@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #040405;
  --sidebar-bg: rgba(4, 4, 5, 0.65);
  --surface: #0d0e12;
  --surface-2: #16181d;
  --surface-3: #21242c;
  --line: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.12);
  --text: #ffffff;
  --muted: #a1a1aa;
  --muted-2: #71717a;
  --green: #00e676;
  --green-dark: #00c853;
  --green-darker: #00a844;
  --green-alpha: rgba(0, 230, 118, 0.15);
  --danger: #ef4444;
  --warning: #f59e0b;
  --sidebar: 264px;
  --sidebar-mini: 76px;
  --radius: 12px;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

@media (max-width: 900px) {

  .incentive-command-grid,
  .qr-analytics-panels {
    grid-template-columns: 1fr;
  }

  .qr-analytics-dashboard {
    min-width: 0;
  }
}

@media (max-width: 620px) {

  .marketplace-tabs,
  .marketplace-intro-card {
    grid-template-columns: 1fr;
  }

  .marketplace-intro-card {
    display: grid;
    align-items: start;
  }

  .qr-bars {
    grid-auto-columns: minmax(26px, 34px);
  }
}

/* Livestream hub and in-app room */
.live-page-shell {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.live-page-loading {
  min-height: 300px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
}

.live-start-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 28px;
  padding: clamp(20px, 3vw, 34px);
  background: #111818;
  border-color: rgba(0, 212, 223, .16);
}

.live-start-copy h2,
.live-directory-section h2,
.live-empty-directory h2,
.live-room-info h2 {
  margin: 12px 0 7px;
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
}

.live-start-copy>p,
.live-directory-section header p,
.live-empty-directory p {
  max-width: 650px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.live-status-pill {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: calc(999px * var(--radius-scale, 1));
  background: #b62f42;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .09em;
}

.live-status-pill .material-symbols-rounded {
  font-size: 14px;
}

.live-status-pill.is-ready {
  background: rgba(0, 212, 223, .1);
  color: var(--green);
}

.live-status-pill.is-ended {
  background: var(--surface-3);
  color: var(--muted);
}

.live-start-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.live-start-benefits span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: calc(9px * var(--radius-scale, 1));
  color: var(--muted);
  font-size: 9px;
}

.live-start-benefits .material-symbols-rounded {
  color: var(--green);
  font-size: 15px;
}

.live-start-form {
  display: grid;
  gap: 11px;
}

.live-start-form .button {
  justify-content: center;
}

.live-directory-section {
  display: grid;
  gap: 14px;
}

.live-directory-section>header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.live-directory-section h2 {
  margin: 5px 0;
  font-size: 20px;
}

.live-count {
  color: var(--green);
  font-size: 10px;
  font-weight: 800;
}

.live-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
}

.live-directory-card {
  min-width: 0;
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(14px * var(--radius-scale, 1));
  background: var(--surface);
  color: var(--text);
  text-align: left;
  transition: border-color .2s ease, transform .2s ease;
}

.live-directory-card:hover {
  border-color: rgba(0, 212, 223, .38);
  transform: translateY(-2px);
}

.live-card-visual {
  position: relative;
  min-height: 148px;
  display: grid;
  place-items: center;
  background: #0c1516;
  color: rgba(255, 255, 255, .92);
}

.live-card-visual>.material-symbols-rounded {
  font-size: 42px;
}

.live-card-visual .live-status-pill {
  position: absolute;
  top: 12px;
  left: 12px;
}

.live-platform {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
}

.live-platform .material-symbols-rounded {
  font-size: 14px;
}

.live-card-body {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 13px 13px 8px;
}

.live-creator-avatar,
.live-room-avatar,
.live-chat-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(0, 212, 223, .1);
  color: var(--green);
  font-size: 10px;
  font-weight: 800;
}

.live-creator-avatar {
  width: 38px;
  height: 38px;
}

.live-creator-avatar img,
.live-room-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.live-card-body strong,
.live-card-body small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.live-card-body small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.live-card-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 9px 13px 12px 61px;
}

.live-card-stats small {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 8px;
}

.live-card-stats small .material-symbols-rounded {
  font-size: 13px;
}

.live-card-stats strong {
  color: var(--green);
  font-size: 10px;
}

.live-empty-directory {
  min-height: 260px;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
}

.live-empty-directory>.material-symbols-rounded {
  color: var(--green);
  font-size: 42px;
}

.live-empty-directory .button {
  margin-top: 12px;
}

.live-room-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.live-room-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 370px);
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.live-room-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.live-player-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(0, 212, 223, .14);
  border-radius: calc(14px * var(--radius-scale, 1));
  background: #050606;
}

.live-player-shell iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.live-ended-state {
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  color: var(--muted);
  text-align: center;
}

.live-ended-state .material-symbols-rounded {
  color: var(--danger);
  font-size: 40px;
}

.live-ended-state strong {
  color: var(--text);
}

.live-ended-state p {
  margin: 0;
  font-size: 10px;
}

.live-room-info {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.live-room-creator {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
}

.live-room-avatar {
  width: 48px;
  height: 48px;
}

.live-room-info h2 {
  margin: 0;
  font-size: clamp(17px, 2.5vw, 23px);
}

.live-room-creator p {
  margin: 3px 0 0;
  color: var(--text);
  font-size: 10px;
}

.live-room-creator p span {
  color: var(--muted);
}

.live-room-description {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.65;
}

.live-room-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.live-room-metrics>span {
  min-width: 135px;
  display: grid;
  grid-template-columns: 22px auto;
  column-gap: 7px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: calc(10px * var(--radius-scale, 1));
  background: var(--surface-2);
}

.live-room-metrics .material-symbols-rounded {
  grid-row: 1 / 3;
  color: var(--green);
  font-size: 18px;
}

.live-room-metrics strong {
  font-size: 13px;
}

.live-room-metrics small {
  color: var(--muted);
  font-size: 8px;
}

.live-room-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.live-chat-panel {
  position: sticky;
  top: 82px;
  padding: 0;
  overflow: hidden;
}

.live-chat-header {
  min-height: 91px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.live-chat-header h3 {
  margin: 4px 0 3px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px;
}

.live-chat-header p {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
}

.live-chat-pulse {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: #42d782;
  box-shadow: 0 0 0 5px rgba(66, 215, 130, .09);
}

.live-chat-list {
  height: min(610px, calc(100vh - 220px));
  min-height: 350px;
  overflow-y: auto;
  padding: 7px 12px 12px;
  scrollbar-width: thin;
}

.live-chat-message {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
}

.live-chat-message.is-pending {
  opacity: .7;
}

.live-chat-avatar {
  width: 30px;
  height: 30px;
  font-size: 8px;
}

.live-chat-message header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.live-chat-message header strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
}

.live-chat-message time {
  color: var(--muted-2);
  font-size: 7px;
}

.live-chat-message p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.live-chat-amount {
  color: var(--green);
  font-size: 9px;
  font-weight: 800;
  text-align: right;
}

.live-chat-amount small {
  display: block;
  margin-top: 2px;
  color: var(--muted-2);
  font-size: 6px;
  font-weight: 600;
}

.live-chat-empty {
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.live-chat-empty .material-symbols-rounded {
  color: var(--green);
  font-size: 34px;
}

.live-chat-empty strong {
  font-size: 11px;
}

.live-chat-empty span {
  color: var(--muted);
  font-size: 9px;
}

.live-donate-form {
  gap: 12px;
}

.live-donate-recipient {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: calc(11px * var(--radius-scale, 1));
  background: var(--surface-2);
}

.live-donate-recipient small,
.live-donate-recipient strong {
  display: block;
}

.live-donate-recipient small {
  color: var(--muted);
  font-size: 8px;
}

.live-donate-recipient strong {
  margin-top: 2px;
  font-size: 11px;
}

.live-amount-input {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: calc(9px * var(--radius-scale, 1));
  background: var(--surface);
}

.live-amount-input:focus-within {
  border-color: var(--green);
}

.live-amount-input span {
  padding-left: 12px;
  color: var(--green);
  font-weight: 800;
}

.live-amount-input input {
  border: 0 !important;
  background: transparent !important;
}

.live-quick-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.live-quick-values button {
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: calc(8px * var(--radius-scale, 1));
  background: var(--surface-2);
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.live-quick-values button:hover {
  border-color: var(--green);
  color: var(--green);
}

.live-pix-result {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.live-pix-qr {
  width: 200px;
  height: 200px;
  max-width: 100%;
  object-fit: contain;
  padding: 10px;
  border-radius: calc(12px * var(--radius-scale, 1));
  background: #fff;
}

.live-pix-result>strong {
  color: var(--green);
  font-size: 25px;
}

.live-pix-result p {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 10px;
}

.notification-item.is-actionable {
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.notification-item.is-actionable:hover {
  border-color: rgba(0, 212, 223, .28);
  background: rgba(0, 212, 223, .04);
}

.notification-action-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 7px;
  color: var(--green);
  font-size: 8px;
  font-weight: 800;
}

.notification-action-label .material-symbols-rounded {
  font-size: 13px;
}

@media (max-width: 1080px) {
  .live-start-panel {
    grid-template-columns: 1fr;
  }

  .live-room-layout {
    grid-template-columns: 1fr;
  }

  .live-chat-panel {
    position: static;
  }

  .live-chat-list {
    height: min(480px, 60vh);
    min-height: 280px;
  }
}

@media (max-width: 720px) {
  .live-start-panel {
    padding: 18px;
  }

  .live-directory-section>header {
    align-items: start;
  }

  .live-room-actions .button {
    flex: 1 1 180px;
    justify-content: center;
  }

  .live-room-toolbar .button {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 9px;
  }
}

/* Presentation safe area and expanded animated art library. */
.obs-scene-bg.is-content-fit {
  left: var(--obs-safe-left, 0);
  right: var(--obs-safe-right, 0);
  bottom: var(--obs-safe-bottom, 0);
  animation: obsSceneContentFitIn var(--obs-layout-speed, 900ms) cubic-bezier(.16, 1, .3, 1) both;
}

.obs-scene-safe-area {
  position: absolute;
  z-index: 1;
  top: 0;
  left: var(--obs-safe-left, 0);
  right: var(--obs-safe-right, 0);
  bottom: var(--obs-safe-bottom, 0);
  border: 1px dashed rgba(255, 255, 255, .28);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45);
  pointer-events: none;
  animation: obsSceneSafeAreaIn var(--obs-layout-speed, 900ms) cubic-bezier(.16, 1, .3, 1) both;
}

.obs-scene-safe-area span {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 6px;
  color: rgba(255, 255, 255, .68);
  background: rgba(0, 0, 0, .66);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 4px;
  font: 700 7px/1 "Inter", sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

@keyframes obsSceneContentFitIn {
  from { left: 0; right: 0; bottom: 0; }
  to { left: var(--obs-safe-left, 0); right: var(--obs-safe-right, 0); bottom: var(--obs-safe-bottom, 0); }
}

@keyframes obsSceneContentFitOut {
  from { left: var(--obs-safe-left, 0); right: var(--obs-safe-right, 0); bottom: var(--obs-safe-bottom, 0); }
  to { left: 0; right: 0; bottom: 0; }
}

@keyframes obsSceneSafeAreaIn {
  from { left: 0; right: 0; bottom: 0; opacity: 0; }
  to { left: var(--obs-safe-left, 0); right: var(--obs-safe-right, 0); bottom: var(--obs-safe-bottom, 0); opacity: 1; }
}

.obs-scene-panel-bg.is-contour {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--obs-panel-accent-a, #2d6cdf) 24%, transparent), transparent 54%),
    var(--obs-panel-bg, #071327);
}

.obs-scene-panel-bg.is-contour .obs-scene-panel-mesh {
  inset: -40%;
  background:
    repeating-radial-gradient(ellipse at 28% 54%, transparent 0 17px, rgba(255, 255, 255, .14) 18px 19px, transparent 20px 31px),
    repeating-radial-gradient(ellipse at 78% 24%, transparent 0 24px, color-mix(in srgb, var(--obs-panel-accent-b, #ffd523) 28%, transparent) 25px 26px, transparent 27px 42px);
  transform: rotate(-8deg) scale(1.2);
  animation: obsSceneContourDrift var(--obs-panel-motion, 56s) ease-in-out infinite alternate;
}

.obs-scene-panel-bg.is-contour .obs-scene-panel-grid {
  opacity: .16;
  background-size: 72px 72px, 72px 72px, 180px 180px;
}

.obs-scene-panel-bg.is-signal {
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--obs-panel-accent-a, #2d6cdf) 24%, transparent) 48%, transparent),
    var(--obs-panel-bg, #071327);
}

.obs-scene-panel-bg.is-signal .obs-scene-panel-mesh {
  inset: -10%;
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 255, 255, .06) 19px 20px, transparent 21px 38px),
    repeating-linear-gradient(0deg, transparent 0 46%, color-mix(in srgb, var(--obs-panel-accent-b, #ffd523) 50%, transparent) 47% 49%, transparent 50% 100%);
  clip-path: polygon(0 42%, 8% 42%, 12% 25%, 17% 70%, 23% 36%, 30% 58%, 38% 45%, 46% 45%, 51% 18%, 57% 76%, 63% 34%, 70% 60%, 78% 42%, 100% 42%, 100% 58%, 0 58%);
  animation: obsSceneSignalSweep calc(var(--obs-panel-motion, 56s) * .22) linear infinite;
}

.obs-scene-panel-bg.is-signal .obs-scene-panel-grid {
  opacity: .24;
  background-size: 38px 38px, 38px 38px, 120px 120px;
}

.obs-scene-panel-bg.is-prism {
  background:
    conic-gradient(from 28deg at 24% 36%, transparent 0 12%, color-mix(in srgb, var(--obs-panel-accent-a, #2d6cdf) 48%, transparent) 13% 22%, transparent 23% 58%, color-mix(in srgb, var(--obs-panel-accent-b, #ffd523) 36%, transparent) 59% 68%, transparent 69%),
    linear-gradient(145deg, var(--obs-panel-bg, #071327), #020309);
}

.obs-scene-panel-bg.is-prism .obs-scene-panel-mesh {
  inset: -12%;
  background:
    linear-gradient(32deg, transparent 0 36%, rgba(255, 255, 255, .17) 36.2% 36.7%, transparent 37% 100%),
    linear-gradient(148deg, transparent 0 52%, color-mix(in srgb, var(--obs-panel-accent-a, #2d6cdf) 36%, transparent) 52.2% 53%, transparent 53.2% 100%),
    repeating-conic-gradient(from 18deg at 50% 50%, rgba(255, 255, 255, .04) 0 8deg, transparent 8deg 28deg);
  animation: obsScenePrismShift var(--obs-panel-motion, 56s) ease-in-out infinite alternate;
}

.obs-scene-panel-bg.is-prism .obs-scene-panel-orbits {
  opacity: .32;
  transform: skewX(-18deg);
}

.obs-scene-panel-bg.is-velocity {
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--obs-panel-accent-a, #2d6cdf) 28%, transparent), transparent 45%),
    var(--obs-panel-bg, #071327);
}

.obs-scene-panel-bg.is-velocity .obs-scene-panel-mesh {
  inset: -35%;
  background:
    repeating-linear-gradient(118deg, transparent 0 18px, rgba(255, 255, 255, .14) 19px 20px, transparent 21px 52px),
    repeating-linear-gradient(118deg, transparent 0 76px, color-mix(in srgb, var(--obs-panel-accent-b, #ffd523) 40%, transparent) 77px 81px, transparent 82px 154px);
  filter: blur(.15px);
  animation: obsSceneVelocityRun calc(var(--obs-panel-motion, 56s) * .18) linear infinite;
}

.obs-scene-panel-bg.is-velocity .obs-scene-panel-grid {
  opacity: .1;
}

@keyframes obsSceneContourDrift {
  from { transform: translate3d(-4%, -2%, 0) rotate(-8deg) scale(1.16); }
  to { transform: translate3d(5%, 3%, 0) rotate(-4deg) scale(1.24); }
}

@keyframes obsSceneSignalSweep {
  from { transform: translate3d(-16%, 0, 0); }
  to { transform: translate3d(16%, 0, 0); }
}

@keyframes obsScenePrismShift {
  from { transform: translate3d(-2%, 0, 0) rotate(-1deg) scale(1.02); filter: saturate(.9); }
  to { transform: translate3d(3%, -2%, 0) rotate(2deg) scale(1.08); filter: saturate(1.24); }
}

@keyframes obsSceneVelocityRun {
  from { transform: translate3d(-12%, 8%, 0); }
  to { transform: translate3d(12%, -8%, 0); }
}

.obs-scene-art-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.obs-scene-art-option {
  min-width: 0;
  padding: 4px;
  display: grid;
  gap: 4px;
  color: #8d949f;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 6px;
  text-align: left;
}

.obs-scene-art-option:hover,
.obs-scene-art-option.active {
  color: #fff;
  border-color: rgba(0, 230, 118, .34);
  background: rgba(0, 230, 118, .045);
}

.obs-scene-art-option small {
  min-width: 0;
  padding-inline: 2px;
  overflow: hidden;
  font-size: 8px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obs-scene-art-swatch {
  position: relative;
  height: 34px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: rgba(255, 255, 255, .76);
  border-radius: 4px;
  background: #071327;
}

.obs-scene-art-swatch .material-symbols-rounded {
  position: relative;
  z-index: 1;
  font-size: 15px;
}

.obs-scene-art-swatch.is-aurora { background: radial-gradient(circle at 24% 24%, #2d6cdf, transparent 44%), linear-gradient(135deg, #071327, #251d4b); }
.obs-scene-art-swatch.is-blueprint { background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(255,255,255,.12) 8px), repeating-linear-gradient(90deg, #071327 0 7px, rgba(255,255,255,.12) 8px); }
.obs-scene-art-swatch.is-orbit { background: radial-gradient(circle, transparent 0 30%, #2d6cdf 31% 33%, transparent 34%), #070914; }
.obs-scene-art-swatch.is-stadium { background: radial-gradient(ellipse at 50% 100%, #ffd523, transparent 42%), #07090d; }
.obs-scene-art-swatch.is-contour { background: repeating-radial-gradient(ellipse at 30% 50%, #071327 0 6px, rgba(255,255,255,.16) 7px 8px); }
.obs-scene-art-swatch.is-signal { background: linear-gradient(90deg, #071327, #2d6cdf 48%, #071327); }
.obs-scene-art-swatch.is-prism { background: conic-gradient(from 30deg, #071327, #2d6cdf, #ffd523, #071327); }
.obs-scene-art-swatch.is-velocity { background: repeating-linear-gradient(118deg, #071327 0 8px, #2d6cdf 9px 11px, #071327 12px 19px); }

@media (max-width: 540px) {
  .obs-scene-art-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.clean-mode .playground-tabs-container {
  gap: 3px;
  margin-bottom: 14px;
  padding: 3px;
  background: #0d0f13;
  border-color: rgba(255, 255, 255, .07);
  border-radius: 7px;
  backdrop-filter: none;
}

.clean-mode .playground-tab-btn {
  min-height: 36px;
  padding: 8px 11px;
  gap: 6px;
  border-radius: 5px;
  font-size: 10px;
  letter-spacing: 0;
  transition: color .16s ease, background .16s ease;
}

.clean-mode .playground-tab-btn .material-symbols-rounded {
  font-size: 17px;
}

.clean-mode .playground-tab-btn.active {
  color: #fff;
  background: #252932;
  border-color: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
}

.clean-mode .playground-layout {
  grid-template-columns: minmax(340px, .82fr) minmax(480px, 1.18fr);
  align-items: start;
  gap: 16px;
}

.clean-mode .playground-layout.is-presentation {
  grid-template-columns: minmax(330px, .78fr) minmax(0, 1.22fr);
}

.clean-mode .playground-editor-panel {
  max-height: calc(100vh - 190px);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  background: #0d0f13;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 8px;
}

.clean-mode .playground-editor-panel .customizer-section {
  margin: 0;
  padding: 16px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  border-radius: 0;
}

.clean-mode .playground-editor-panel .customizer-section:last-child {
  border-bottom: 0;
}

.playground-preview-column {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.clean-mode .playground-preview-container {
  width: 100%;
  min-height: 430px;
  padding: clamp(16px, 2.4vw, 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #050609;
  background-image:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 28px 28px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 8px;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .55);
}

.clean-mode .live-qr-card-wrapper {
  width: 100%;
  max-width: 390px;
}

.clean-mode .live-qr-card-wrapper.is-scene {
  max-width: 820px;
}

.playground-actions {
  width: 100%;
  display: grid;
  gap: 8px;
}

.playground-actions>.button-primary {
  min-height: 42px !important;
}

.playground-actions>.button-text {
  min-height: 30px;
  margin-top: 0 !important;
  color: #737a85;
  font-size: 10px !important;
  opacity: 1 !important;
}

.playground-actions-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.playground-actions-row .button {
  width: 100%;
}

.playground-test-button {
  min-height: 38px !important;
  color: #77dca9 !important;
  border-color: rgba(36, 206, 131, .22) !important;
}

@media (max-width: 1120px) {
  .clean-mode .playground-layout,
  .clean-mode .playground-layout.is-presentation {
    grid-template-columns: 1fr;
  }

  .playground-preview-column {
    position: static;
  }

  .clean-mode .playground-editor-panel {
    max-height: none;
  }
}

@media (max-width: 620px) {
  .clean-mode .playground-preview-container {
    min-height: 300px;
    padding: 12px;
  }

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

@media (max-width: 520px) {
  .live-directory-grid {
    grid-template-columns: 1fr;
  }

  .live-card-visual {
    min-height: 130px;
  }

  .live-start-benefits {
    display: grid;
  }

  .live-room-info {
    padding: 14px;
  }

  .live-room-metrics>span {
    flex: 1;
    min-width: 0;
  }

  .live-chat-list {
    padding-inline: 9px;
  }

  .live-chat-message {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .live-chat-amount {
    grid-column: 2;
    text-align: left;
  }

  .live-quick-values {
    grid-template-columns: repeat(2, 1fr);
  }

  .live-donate-recipient {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .live-donate-recipient .live-status-pill {
    grid-column: 2;
  }
}

@media (max-width: 720px) {
  .audit-row {
    grid-template-columns: auto minmax(0, 1fr) 32px;
  }

  .audit-row>span:nth-child(3) {
    grid-column: 2;
  }

  .admin-cash-filters {
    grid-template-columns: 1fr;
  }
}

/* Public account and benefit checkout */
.support-card {
  position: relative;
}

.public-account-card {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 8;
  width: max-content;
  max-width: calc(100% - 36px);
}

.public-account-trigger,
.public-account-menu {
  border: 1px solid rgba(0, 212, 223, .2);
  border-radius: calc(12px * var(--radius-scale, 1));
  background: #0d1818;
  color: var(--text);
}

.public-account-trigger {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 20px;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  text-align: left;
  cursor: pointer;
}

.public-account-trigger>span:nth-child(2) {
  min-width: 0;
  display: grid;
}

.public-account-trigger strong,
.public-account-trigger small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-account-trigger strong {
  font-size: 11px;
}

.public-account-trigger small {
  color: var(--muted);
  font-size: 8px;
}

.public-account-avatar {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #087d81;
  color: #fff;
  font-weight: 700;
}

.public-account-menu {
  margin-top: 6px;
  padding: 7px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .36);
}

.public-account-menu>div {
  display: grid;
  padding: 8px 9px;
  border-bottom: 1px solid var(--line);
}

.public-account-menu small {
  color: var(--muted);
  font-size: 8px;
}

.public-account-menu button {
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 0;
  border-radius: calc(8px * var(--radius-scale, 1));
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.public-account-menu button:hover {
  background: rgba(0, 212, 223, .08);
}

.public-benefits-panel {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(0, 212, 223, .22);
  border-radius: calc(12px * var(--radius-scale, 1));
  background: #0c1717;
}

.public-benefits-panel header,
.public-benefits-panel label {
  display: flex;
  gap: 9px;
  align-items: center;
}

.public-benefits-panel header>div,
.public-benefits-panel label>span {
  display: grid;
  gap: 2px;
}

.public-benefits-panel label {
  padding: 9px;
  border-radius: calc(9px * var(--radius-scale, 1));
  background: #111e1e;
  cursor: pointer;
}

.public-benefits-panel small {
  color: var(--muted);
  font-size: 8px;
}

.public-benefits-panel input {
  accent-color: #00c7cf;
}

.payment-breakdown {
  width: min(420px, 100%);
  display: grid;
  gap: 7px;
  padding: 12px;
  border-radius: calc(11px * var(--radius-scale, 1));
  background: #0d1818;
}

.payment-breakdown span {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: var(--muted);
  font-size: 10px;
}

.payment-breakdown strong {
  color: var(--text);
}

.payment-breakdown span:last-child {
  padding-top: 7px;
  border-top: 1px solid var(--line);
  color: var(--text);
}

.payment-expiry {
  color: #f4c85a;
  font: 700 12px "Space Grotesk", sans-serif;
}

.audit-row {
  grid-template-columns: auto minmax(0, 1fr) auto 32px;
}

.audit-favorite {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: calc(8px * var(--radius-scale, 1));
  color: var(--muted);
}

.audit-favorite:hover,
.audit-favorite.active {
  color: #f6c94c;
  background: rgba(246, 201, 76, .1);
}

.audit-favorite-filter {
  flex-direction: row !important;
  align-items: center;
  align-self: end;
  min-height: 39px;
}

.audit-favorite-filter input {
  width: auto;
  accent-color: #00c7cf;
}

@media (max-width: 720px) {
  .public-account-card {
    position: static;
    width: 100%;
    margin: 0 0 18px;
  }

  .audit-row {
    grid-template-columns: auto minmax(0, 1fr) 32px;
  }

  .audit-row>span:nth-child(3) {
    grid-column: 2;
  }
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
  font: inherit;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  padding-right: 42px !important;
  cursor: pointer;
}

select option {
  background-color: #1c1c24;
  color: #ffffff;
  padding: 12px;
  font-size: 14px;
}

select::-ms-expand {
  display: none;
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 19px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  direction: ltr;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.incentive-star {
  display: inline-grid;
  place-items: center;
  color: var(--green);
  font-size: 19px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font: 700 18px/1 "Space Grotesk";
  letter-spacing: -0.5px;
  text-decoration: none;
}

.beta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 229, 255, 0.1);
  border: 1px solid rgba(0, 229, 255, 0.3);
  color: var(--green);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 4px;
  border-radius: calc(4px * var(--radius-scale, 1));
  text-transform: uppercase;
  margin-left: 4px;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.2);
  backdrop-filter: blur(4px);
  transform: translateY(-1px);
}

.logo img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(21, 208, 220, .16))
}

.logo-large img {
  width: 42px;
  height: 42px
}

.logo-name>span,
.logo>span:last-child>span {
  color: var(--green);
}

.logo-mark {
  position: relative;
  width: 29px;
  height: 25px;
  display: inline-block;
  flex: 0 0 auto;
  transform: rotate(-8deg);
}

.logo-mark i {
  position: absolute;
  width: 19px;
  height: 11px;
  border: 4px solid #6d756e;
  border-radius: calc(9px * var(--radius-scale, 1)) calc(2px * var(--radius-scale, 1));
}

.logo-mark i:first-child {
  left: 0;
  top: 1px;
}

.logo-mark i:last-child {
  right: 0;
  bottom: 1px;
  border-color: var(--green);
}

.logo-large {
  font-size: 27px;
}

.eyebrow {
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
}

.button {
  min-height: 38px;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text);
  background: var(--surface-3);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
}

.button:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.button>.material-symbols-rounded {
  width: 1em;
  flex: 0 0 1em;
  overflow: hidden;
  white-space: nowrap;
}

.button-primary {
  color: #000000;
  background: var(--text);
  border-color: var(--text);
}

.button-primary:hover {
  background: var(--muted);
  border-color: var(--muted);
  color: #000000;
}

.button-secondary,
.button-ghost {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
}

.button-secondary:hover,
.button-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}

.button-danger {
  color: var(--danger);
  background: rgba(223, 125, 133, 0.1);
  border-color: rgba(223, 125, 133, 0.24);
}

.button-danger:hover {
  background: rgba(223, 125, 133, 0.16);
  border-color: rgba(223, 125, 133, 0.38);
}

.button-full {
  width: 100%;
}

.auth-view {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
}

.auth-brand {
  position: relative;
  overflow: hidden;
  padding: 52px 7vw;
  background: radial-gradient(circle at 25% 70%, rgba(255, 255, 255, .04), transparent 34%), #000000;
  border-right: 1px solid var(--line);
}

.auth-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 650px;
  margin-top: 21vh;
}

.hero-copy h1 {
  margin: 18px 0;
  font: 700 clamp(43px, 5vw, 74px)/1.03 "Space Grotesk";
  letter-spacing: -4px;
}

.hero-copy h1 em {
  color: var(--green);
  font-style: normal;
}

.hero-copy p {
  max-width: 560px;
  color: #aab3ab;
  font-size: 18px;
  line-height: 1.65;
}

.trust-note {
  width: fit-content;
  margin-top: 44px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--line);
  border-radius: calc(12px * var(--radius-scale, 1));
}

.trust-note>span {
  color: var(--green);
}

.trust-note div {
  display: grid;
  gap: 3px;
}

.trust-note strong {
  font-size: 12px;
}

.trust-note small {
  color: var(--muted);
  font-size: 10px;
}

.auth-panel {
  display: grid;
  place-items: center;
  padding: 40px;
}

.auth-card {
  width: min(430px, 100%);
  background: rgba(9, 9, 11, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 34px;
  border-radius: calc(20px * var(--radius-scale, 1));
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
}

.mobile-logo {
  display: none;
  margin-bottom: 45px;
}

.auth-card h2 {
  margin: 10px 0 5px;
  font: 700 34px "Space Grotesk";
  letter-spacing: -1.5px;
}

.auth-card>p {
  margin: 0 0 28px;
  color: var(--muted);
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  margin-bottom: 22px;
  background: rgba(9, 9, 11, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: calc(11px * var(--radius-scale, 1));
  backdrop-filter: blur(8px);
}

.auth-tabs button {
  padding: 10px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: calc(8px * var(--radius-scale, 1));
  font-weight: 600;
  transition: color 0.22s, background 0.22s;
}

.auth-tabs button.active {
  color: #000000;
  background: var(--text);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

.auth-card form {
  display: grid;
  gap: 16px;
}

.auth-card label,
.field {
  display: grid;
  gap: 7px;
  color: #c7cec8;
  font-size: 11px;
  font-weight: 700;
}

.auth-card input {
  width: 100%;
  padding: 12px 13px;
  color: var(--text);
  background: rgba(16, 20, 17, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: calc(9px * var(--radius-scale, 1));
  outline: none;
  transition: border-color 0.22s, box-shadow 0.22s, background 0.22s;
}

.auth-card input:focus {
  background: rgba(16, 20, 17, 0.75);
  border-color: var(--green);
  box-shadow: 0 0 12px rgba(141, 217, 168, 0.18), 0 0 0 3px rgba(141, 217, 168, 0.06);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: calc(12px * var(--radius-scale, 1));
  outline: none;
  resize: vertical;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.15);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--green);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 4px rgba(41, 199, 95, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

.form-row a,
.link-button {
  padding: 0;
  color: var(--green);
  background: none;
  border: 0;
  text-decoration: none;
  font-size: inherit;
}

.check {
  display: flex !important;
  align-items: center;
  gap: 7px;
  color: var(--muted) !important;
  font-weight: 500 !important;
}

.check input {
  width: auto;
  accent-color: var(--green-dark);
}

.form-message {
  min-height: 18px;
  margin: 0;
  color: var(--danger);
  font-size: 11px;
}

.form-message.ok {
  color: var(--green);
}

.qr-login-block {
  margin-top: 8px;
  display: grid;
  gap: 12px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted-2);
  font-size: 9px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

.qr-login-panel {
  padding: 14px;
  display: grid;
  gap: 11px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--line);
  border-radius: calc(13px * var(--radius-scale, 1));
}

.qr-login-panel.hidden {
  display: none;
}

.qr-login-preview {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.qr-login-preview img {
  width: 118px;
  height: 118px;
  padding: 0;
  border-radius: calc(14px * var(--radius-scale, 1));
  filter: invert(1);
  mix-blend-mode: screen;
}

.qr-login-copy {
  display: grid;
  gap: 6px;
}

.qr-login-copy strong {
  font: 700 13px "Space Grotesk";
}

.qr-login-copy small,
.qr-login-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

.qr-login-status {
  min-height: 28px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #dbe7de;
  background: rgba(141, 217, 168, .06);
  border: 1px solid rgba(141, 217, 168, .15);
  border-radius: calc(9px * var(--radius-scale, 1));
  font-size: 9px;
}

.qr-login-status .material-symbols-rounded {
  color: var(--green);
  font-size: 16px;
}

.qr-review-modal {
  width: min(760px, 100%);
}

.qr-review-summary {
  padding: 14px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  background: linear-gradient(135deg, rgba(141, 217, 168, .08), rgba(255, 255, 255, .025));
  border: 1px solid rgba(141, 217, 168, .18);
  border-radius: calc(14px * var(--radius-scale, 1));
}

.qr-review-summary>.material-symbols-rounded {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--green);
  background: #132018;
  border-radius: calc(12px * var(--radius-scale, 1));
}

.qr-review-summary strong {
  display: block;
  margin-bottom: 3px;
  font: 700 14px "Space Grotesk";
}

.qr-review-summary span,
.qr-review-summary small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

.qr-review-warning {
  margin: 12px 0;
  padding: 11px;
  display: flex;
  gap: 8px;
  color: #ffd9d9;
  background: rgba(255, 83, 83, .08);
  border: 1px solid rgba(255, 83, 83, .2);
  border-radius: calc(11px * var(--radius-scale, 1));
  font-size: 10px;
  line-height: 1.5;
}

.qr-review-warning .material-symbols-rounded {
  color: var(--danger);
  font-size: 18px;
}

.qr-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.qr-review-list {
  min-height: 170px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(12px * var(--radius-scale, 1));
}

.qr-review-list h3 {
  margin: 0 0 9px;
  font: 700 11px "Space Grotesk";
}

.qr-review-list ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
}

.qr-review-list li {
  padding: 8px;
  display: grid;
  gap: 3px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .045);
  border-radius: calc(8px * var(--radius-scale, 1));
  color: var(--muted);
  font-size: 8px;
  line-height: 1.4;
}

.qr-review-list strong {
  color: var(--text);
  font-size: 9px;
}

.legal {
  display: block;
  margin-top: 20px;
  color: var(--muted-2);
  text-align: center;
  font-size: 10px;
  line-height: 1.5;
}

.official-links {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap
}

.official-links a {
  padding: 7px 9px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(8px * var(--radius-scale, 1));
  text-decoration: none;
  font-size: 9px
}

.official-links a:hover {
  color: var(--text);
  border-color: var(--line-strong)
}

.official-links .material-symbols-rounded {
  font-size: 14px
}

.sidebar {
  position: fixed;
  z-index: 30;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  padding: 24px 14px 15px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #101a2a 0%, var(--sidebar-bg) 48%, #0b111b 100%);
  border-right: 1px solid rgba(141, 217, 168, .09);
  overflow-y: auto;
  overflow-x: visible;
  transition: width .22s ease, padding .22s ease;
  scrollbar-width: thin;
}

.sidebar-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 8px 22px;
}

.sidebar-toggle-mobile {
  display: grid;
  width: 34px;
  height: 34px;
  margin-left: auto;
}

.profile-switcher {
  width: 100%;
  min-height: 48px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(10px * var(--radius-scale, 1));
  text-align: left;
  overflow: hidden;
}

.profile-switcher:disabled {
  cursor: default;
  border-color: #294732;
  background: #111b15
}

.avatar,
.avatar-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--green);
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(10px * var(--radius-scale, 1));
  font: 700 11px "Space Grotesk";
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.avatar:hover,
.avatar-button:hover {
  opacity: 0.85;
}

.avatar img,
.avatar-button img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

.avatar-button {
  width: 40px;
  height: 40px;
  padding: 2px;
  color: #dff4e6;
  background: linear-gradient(145deg, rgba(115, 182, 138, .24), rgba(255, 255, 255, .045));
  border-color: rgba(115, 182, 138, .32);
  border-radius: calc(999px * var(--radius-scale, 1));
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.avatar-button:hover {
  opacity: 1;
  transform: translateY(-1px);
  border-color: rgba(115, 182, 138, .58);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .34), 0 0 0 3px rgba(115, 182, 138, .08);
}

.profile-copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 3px;
}

.profile-copy strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-copy small {
  color: var(--muted);
  font-size: 9px;
}

.switch-arrows {
  color: var(--muted);
}

.balance-card {
  min-height: 98px;
  margin: 8px 0;
  padding: 10px 12px;
  display: grid;
  flex: 0 0 auto;
  align-content: start;
  gap: 5px;
  background: #101612;
  border: 1px solid var(--line);
  border-radius: calc(12px * var(--radius-scale, 1));
  overflow: hidden;
  transition: all 0.3s ease;
}

.balance-card>span {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .6px;
  white-space: nowrap;
}

.balance-card strong {
  font: 700 21px "Space Grotesk";
  white-space: nowrap;
}

.eye-button,
.balance-card>button {
  padding: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--green);
  background: none;
  border: 0;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.eye-button .material-symbols-rounded,
.balance-card>button .material-symbols-rounded {
  font-size: 15px;
}

.balance-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 8px;
  white-space: nowrap
}

.balance-status i {
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(141, 217, 168, .08)
}

.sidebar nav {
  min-height: 0;
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 2px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.sidebar nav p {
  margin: 14px 10px 5px;
  color: #586159;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

.sidebar nav button {
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #969e97;
  background: transparent;
  border: 0;
  border-radius: calc(8px * var(--radius-scale, 1));
}

.sidebar-bottom button {
  flex: 1;
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #969e97;
  background: transparent;
  border: 0;
  border-radius: calc(8px * var(--radius-scale, 1));
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar nav button b,
.sidebar-bottom button b {
  font-weight: 600;
}

.sidebar nav button:hover,
.sidebar-bottom button:hover {
  color: var(--text);
  background: var(--surface);
}

.sidebar nav button.active {
  color: var(--text);
  background: rgba(141, 217, 168, .09);
  box-shadow: inset 2px 0 var(--green);
}

.sidebar nav button.active>.material-symbols-rounded,
.sidebar nav button.active>.incentive-star {
  color: var(--green);
}

.sidebar nav button>span,
.sidebar-bottom button>span {
  width: 20px;
  flex: 0 0 20px;
  color: #747d75;
  text-align: center;
}

.sidebar-bottom {
  display: flex;
  gap: 5px;
  margin-top: auto;
  padding-top: 8px;
}

.app-main {
  min-height: 100vh;
  margin-left: var(--sidebar);
  transition: margin-left .22s ease;
}

.sidebar-collapsed .sidebar {
  width: var(--sidebar-mini);
  padding-inline: 11px;
}

.sidebar-collapsed .app-main {
  margin-left: var(--sidebar-mini);
}

.sidebar-collapsed .sidebar .logo-name,
.sidebar-collapsed .profile-copy,
.sidebar-collapsed .switch-arrows,
.sidebar-collapsed .balance-label,
.sidebar-collapsed .balance-link,
.sidebar-collapsed .balance-card strong,
.sidebar-collapsed .sidebar nav p,
.sidebar-collapsed .sidebar nav button b,
.sidebar-collapsed .sidebar-bottom button b {
  display: none;
}

.sidebar-collapsed .sidebar-top {
  justify-content: center;
  padding-inline: 0;
}

.sidebar-collapsed .sidebar-toggle-mobile {
  display: none
}

.sidebar-collapsed .pro-promo-card {
  display: none !important;
}

.sidebar-collapsed .sidebar nav button,
.sidebar-collapsed .sidebar-bottom button {
  justify-content: center;
  padding-inline: 7px;
}

.sidebar-collapsed .profile-switcher {
  justify-content: center;
  padding: 0;
  background: transparent !important;
  border: none !important;
  min-height: auto;
}

.sidebar-collapsed .balance-card {
  padding: 10px;
  place-items: center;
}

.sidebar-collapsed .balance-card {
  min-height: 54px;
}

.sidebar-collapsed .balance-status {
  display: none;
}

.sidebar-collapsed .balance-card>span {
  justify-content: center;
}

.sidebar-collapsed .balance-card>button .material-symbols-rounded {
  font-size: 18px;
}

.sidebar-mobile-open {
  overflow: hidden;
}

.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  height: 70px;
  padding: 0 clamp(20px, 3vw, 44px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: rgba(9, 11, 10, .9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.topbar-start {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 11px
}

.top-search {
  width: min(420px, 45vw);
  padding: 8px 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(9px * var(--radius-scale, 1));
}

.top-search input {
  min-width: 0;
  flex: 1;
  color: var(--text);
  background: none;
  border: 0;
  outline: 0;
  font-size: 11px;
}

.top-search kbd {
  color: var(--muted-2);
  font-size: 8px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.icon-button {
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #aeb6af;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(9px * var(--radius-scale, 1));
}

.has-dot::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 6px;
  width: 5px;
  height: 5px;
  background: var(--green);
  border-radius: 50%;
}

.live-button {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--green);
  background: #101712;
  border: 1px solid #243b2b;
  border-radius: calc(9px * var(--radius-scale, 1));
  font-size: 10px;
  font-weight: 700;
}

.live-button i {
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
}

.sidebar-toggle {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: calc(11px * var(--radius-scale, 1));
  transition: background .18s, border-color .18s, transform .18s
}

.sidebar-toggle[hidden] {
  display: none !important;
}

.sidebar-toggle:hover {
  color: var(--text);
  background: var(--surface-3);
  border-color: #315840
}

.sidebar-toggle.is-open {
  color: var(--green);
  background: #132018;
  border-color: #294732
}

.sidebar-toggle .material-symbols-rounded {
  font-size: 21px
}

.sidebar-toggle-desktop {
  display: grid
}

.page-content {
  width: min(1380px, 100%);
  margin: auto;
  padding: 38px clamp(22px, 3.2vw, 52px) 76px;
}

.page-heading {
  margin-bottom: 24px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.page-heading h1 {
  margin: 5px 0;
  font: 700 clamp(27px, 3vw, 37px) "Space Grotesk";
  letter-spacing: -1.8px;
}

.page-heading h1 span {
  color: var(--green);
}

.page-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.heading-actions {
  display: flex;
  gap: 8px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 13px;
}

.stat-card {
  min-height: 138px;
  padding: 19px;
  display: grid;
  align-content: space-between;
  background: linear-gradient(145deg, rgba(255, 255, 255, .03), transparent 60%), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 230, 118, 0.4);
}

.admin-stat {
  width: 100%;
  color: var(--text);
  text-align: left;
  cursor: pointer
}

.admin-stat:hover {
  transform: translateY(-2px);
  border-color: #315840;
  background: var(--surface-2)
}

.stat-head {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 10px;
}

.stat-icon {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  color: var(--green);
  background: #172219;
  border: 1px solid #243a2a;
  border-radius: calc(8px * var(--radius-scale, 1));
}

.stat-card strong {
  font: 700 23px "Space Grotesk";
  letter-spacing: -1px;
}

.stat-card small {
  color: var(--green);
  font-size: 9px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

}

.panel-head {
  padding: 17px 19px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.panel-head h3 {
  margin: 0;
  font: 700 13px "Space Grotesk";
}

.panel-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 9px;
}

.period-select {
  padding: 6px 8px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: calc(7px * var(--radius-scale, 1));
  font-size: 9px;
}

.dashboard-grid {
  margin-top: 13px;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(270px, .8fr);
  gap: 13px;
}

.chart-wrap {
  height: 246px;
  padding: 10px 19px 20px;
}

.chart-wrap svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  color: var(--muted-2);
  font-size: 8px;
}

.quick-qr {
  min-height: 322px;
  padding: 19px;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at 100% 0, rgba(72, 128, 89, .1), transparent 42%), var(--surface);
}

.quick-qr .qr-preview {
  width: 112px;
  height: 112px;
  margin: 18px auto;
  padding: 12px;
  background: rgba(16, 21, 17, 0.45);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(141, 217, 168, 0.25);
  border-radius: calc(16px * var(--radius-scale, 1));
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3), inset 0 0 15px rgba(141, 217, 168, 0.1);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.quick-qr .qr-preview:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(141, 217, 168, 0.5);
}

.qr-pattern {
  width: 100%;
  height: 100%;
  border-radius: calc(3px * var(--radius-scale, 1));
  background: linear-gradient(90deg, rgba(141, 217, 168, 0.35) 10%, transparent 10% 20%, rgba(141, 217, 168, 0.35) 20% 30%, transparent 30% 40%, rgba(141, 217, 168, 0.35) 40% 70%, transparent 70% 80%, rgba(141, 217, 168, 0.35) 80%),
    linear-gradient(rgba(141, 217, 168, 0.35) 10%, transparent 10% 20%, rgba(141, 217, 168, 0.35) 20% 40%, transparent 40% 50%, rgba(141, 217, 168, 0.35) 50% 60%, transparent 60% 70%, rgba(141, 217, 168, 0.35) 70% 90%, transparent 90%);
  background-size: 16px 16px;
  box-shadow: inset 0 0 10px rgba(141, 217, 168, 0.2);
}

.quick-qr strong {
  text-align: center;
  font: 700 17px "Space Grotesk";
}

.quick-qr p {
  margin: 6px 0 18px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}

.quick-qr .button {
  margin-top: auto;
}

.bottom-grid {
  margin-top: 13px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 13px;
}

.transaction-list {
  padding: 0 17px 10px;
}

.transaction {
  padding: 12px 2px;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--line);
}

.transaction-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--green);
  background: #172219;
  border-radius: calc(9px * var(--radius-scale, 1));
  font-size: 9px;
  font-weight: 700;
}

.transaction-copy,
.transaction-value {
  display: grid;
  gap: 3px;
}

.transaction-copy strong,
.transaction-value strong {
  font-size: 10px;
}

.transaction-copy span,
.transaction-value span {
  color: var(--muted);
  font-size: 8px;
}

.transaction-value {
  text-align: right;
}

.transaction-value strong {
  color: var(--green);
}

.goal-body {
  padding: 5px 19px 21px;
}

.goal-value {
  margin: 15px 0 10px;
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.goal-value strong {
  font: 700 22px "Space Grotesk";
}

.goal-value span,
.goal-meta {
  color: var(--muted);
  font-size: 9px;
}

.progress {
  height: 6px;
  overflow: hidden;
  background: var(--surface-3);
  border-radius: calc(10px * var(--radius-scale, 1));
}

.progress i {
  display: block;
  height: 100%;
  background: var(--green-dark);
  border-radius: inherit;
}

.goal-meta {
  margin-top: 11px;
  display: flex;
  justify-content: space-between;
}

.status {
  padding: 4px 7px;
  color: var(--green);
  background: #142018;
  border: 1px solid #27422f;
  border-radius: calc(20px * var(--radius-scale, 1));
  font-size: 8px;
  font-weight: 700;
}

.status.done {
  color: #c5f0d0;
  background: #132018;
  border-color: #2a4a33
}

.status.pending {
  color: #9fd8ff;
  background: #101f2b;
  border-color: #234454
}

.status.rejected {
  color: #ffc1c1;
  background: #251419;
  border-color: #5b2f36
}

.status.neutral {
  color: #d8dde0;
  background: #1a1e20;
  border-color: #30363a
}

.empty-state {
  min-height: 245px;
  padding: 45px 20px;
  display: grid;
  place-items: center;
  align-content: center;
  color: var(--muted);
  text-align: center;
}

.empty-state>.material-symbols-rounded {
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  display: grid;
  place-items: center;
  color: var(--green);
  background: #162119;
  border: 1px solid #24392a;
  border-radius: calc(13px * var(--radius-scale, 1));
  font-size: 23px;
}

.empty-state h3 {
  margin: 0 0 6px;
  color: var(--text);
  font: 700 14px "Space Grotesk";
}

.empty-state p {
  max-width: 380px;
  margin: 0 0 17px;
  font-size: 10px;
  line-height: 1.55;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
}

.feature-card {
  min-height: 185px;
  padding: 19px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .18s, border-color .18s;
}

.feature-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
}

.feature-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--green);
  background: #162119;
  border: 1px solid #24392a;
  border-radius: calc(11px * var(--radius-scale, 1));
}

.feature-card h3 {
  margin: 15px 0 7px;
  font: 700 14px "Space Grotesk";
}

.feature-card p {
  margin: 0 0 17px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.feature-card button {
  margin-top: auto;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--green);
  background: none;
  border: 0;
  text-align: left;
  font-size: 9px;
  font-weight: 700;
}

.feature-card button .material-symbols-rounded {
  font-size: 14px;
}

.widget-qr {
  margin-bottom: 13px;
  padding: 25px;
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 30px;
  align-items: center;
}

.widget-qr h2 {
  margin: 8px 0;
  font: 700 22px "Space Grotesk";
}

.widget-qr p {
  max-width: 590px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.widget-actions {
  margin-top: 20px;
  display: flex;
  gap: 8px;
}

.widget-qr-preview {
  width: 160px;
  height: 160px;
  padding: 16px;
  justify-self: end;
  background: rgba(16, 21, 17, 0.45);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(141, 217, 168, 0.25);
  border-radius: calc(20px * var(--radius-scale, 1));
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(141, 217, 168, 0.1);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.widget-qr-preview:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(141, 217, 168, 0.5);
}

.widgets-loading {
  min-height: 420px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: var(--muted);
  text-align: center;
}

.widgets-loading>.material-symbols-rounded {
  color: var(--green);
  font-size: 34px;
  animation: spin 1.2s linear infinite;
}

.widgets-loading strong {
  color: var(--text);
  font: 700 17px "Space Grotesk";
}

.widgets-loading span {
  font-size: 10px;
}

.widgets-loading.widgets-load-error>.material-symbols-rounded {
  color: var(--danger);
  animation: none;
}

.widgets-status-grid {
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.widgets-status-grid article {
  min-width: 0;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 11px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .025), transparent), var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(13px * var(--radius-scale, 1));
}

.widgets-status-grid article>div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.widgets-status-grid small {
  color: var(--muted-2);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1px;
}

.widgets-status-grid strong {
  overflow: hidden;
  color: var(--text);
  font: 700 11px "Space Grotesk";
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widgets-status-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
}

.widgets-status-icon {
  width: 35px;
  height: 35px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #cbd3cc;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: calc(10px * var(--radius-scale, 1));
}

.widgets-status-icon.ready {
  color: var(--green);
  background: rgba(141, 217, 168, .08);
  border-color: rgba(141, 217, 168, .25);
  box-shadow: 0 0 22px rgba(141, 217, 168, .08);
}

.widgets-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr);
  gap: 14px;
  align-items: start;
}

.widgets-test-panel {
  margin: 0;
  padding: 20px;
}

.widgets-test-panel .panel-head {
  margin-bottom: 18px;
}

.widgets-test-panel .panel-head h3 {
  margin: 4px 0;
  font: 700 17px "Space Grotesk";
}

.widgets-test-panel .panel-head p {
  max-width: 500px;
  margin: 0;
}

.widgets-live-badge {
  padding: 6px 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #d7e7dc;
  background: rgba(141, 217, 168, .06);
  border: 1px solid rgba(141, 217, 168, .18);
  border-radius: calc(20px * var(--radius-scale, 1));
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.widgets-live-badge i,
.widget-source-state i,
.widgets-preview-stage header i {
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--green);
}

.widgets-test-fields {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 10px;
}

.widgets-test-panel .field>small {
  margin-top: 5px;
  color: var(--muted-2);
  font-size: 8px;
}

.widgets-amount-presets {
  margin: 8px 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.widgets-amount-presets button {
  padding: 5px 9px;
  color: var(--muted);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: calc(20px * var(--radius-scale, 1));
  font-size: 8px;
  font-weight: 700;
}

.widgets-amount-presets button:hover {
  color: var(--green);
  border-color: rgba(141, 217, 168, .35);
}

.widgets-audio-settings {
  margin-top: 14px;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  background: rgba(0, 0, 0, .16);
  border: 1px solid var(--line);
  border-radius: calc(12px * var(--radius-scale, 1));
}

.widgets-setting-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.widgets-sound-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(112px, 1fr));
  gap: 7px;
}

.widgets-sound-actions .button {
  min-height: 38px;
  white-space: nowrap;
}

.widgets-range-field {
  position: relative;
}

.widgets-range-field output {
  position: absolute;
  top: 0;
  right: 0;
  color: var(--green);
  font-size: 8px;
  font-weight: 700;
}

.widgets-range-field input[type="range"] {
  height: 34px;
  padding: 0;
  accent-color: var(--green);
}

.widgets-check {
  min-height: 58px;
  padding: 9px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: calc(9px * var(--radius-scale, 1));
  cursor: pointer;
}

.widgets-check input {
  accent-color: var(--green);
}

.widgets-check span {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 6px;
  align-items: center;
}

.widgets-check .material-symbols-rounded {
  grid-row: span 2;
  color: var(--green);
}

.widgets-check strong {
  font-size: 9px;
}

.widgets-check small {
  color: var(--muted);
  font-size: 7px;
}

.widgets-test-actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
}

.widgets-test-actions .button:first-child {
  flex: 1;
}

.widgets-form-note {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 8px;
}

.widgets-form-note .material-symbols-rounded {
  color: var(--green);
  font-size: 14px;
}

.widgets-preview-column {
  display: grid;
  gap: 14px;
}

.widgets-preview-stage {
  overflow: hidden;
  background: #080a09;
  border: 1px solid var(--line);
  border-radius: calc(14px * var(--radius-scale, 1));
  box-shadow: 0 24px 50px rgba(0, 0, 0, .2);
}

.widgets-preview-stage header,
.widgets-preview-stage footer {
  min-height: 38px;
  padding: 8px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, .025);
  border-bottom: 1px solid var(--line);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .7px;
}

.widgets-preview-stage header span,
.widgets-preview-stage footer span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.widgets-preview-stage header button {
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--green);
  background: none;
  border: 0;
  font-size: 7px;
  font-weight: 700;
}

.widgets-preview-stage header .material-symbols-rounded,
.widgets-preview-stage footer .material-symbols-rounded {
  font-size: 13px;
}

.widgets-preview-stage footer {
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.widgets-preview-canvas {
  min-height: 190px;
  padding: 12px;
  display: grid;
  place-items: center;
  background-color: #101512;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .025) 25%, transparent 25%), linear-gradient(-45deg, rgba(255, 255, 255, .025) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .025) 75%), linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .025) 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.widgets-alert-preview.is-testing {
  animation: obsBounce .8s cubic-bezier(.34, 1.56, .64, 1);
}

.widgets-alert-preview {
  width: min(100%, 480px);
  min-height: 0;
  padding: 0;
  display: block;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.widgets-alert-preview.is-testing .stream-alert-card {
  animation: obsBounce .8s cubic-bezier(.34, 1.56, .64, 1);
}

.stream-alert-card {
  width: min(92vw, 480px);
  min-height: 116px;
  max-height: 178px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  color: var(--alert-text, #fff);
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  contain: layout paint;
}

.stream-alert-media {
  width: var(--alert-media-size, 58px);
  height: var(--alert-media-size, 58px);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .28));
  animation: streamAlertMediaFloat 2.4s ease-in-out infinite;
  will-change: transform;
}

.stream-alert-media-fallback {
  color: var(--alert-accent, #00d9ff);
  background: transparent;
  border: 0;
  border-radius: 0;
}

.stream-alert-media-fallback .material-symbols-rounded {
  font-size: calc(var(--alert-media-size, 58px) * .46);
}

.stream-alert-title {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  font: 800 clamp(15px, 2.4vw, 22px)/1.02 "Space Grotesk", "Inter", sans-serif;
  letter-spacing: -.04em;
  color: var(--alert-text, #fff);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stream-alert-name {
  color: var(--alert-accent, #00d9ff);
  text-shadow: 0 0 18px color-mix(in srgb, var(--alert-accent, #00d9ff) 40%, transparent);
}

.stream-alert-action {
  font-weight: 650;
}

.stream-alert-value {
  font-weight: 900;
  color: var(--alert-text, #fff);
}

.stream-alert-message {
  max-width: min(390px, 100%);
  max-height: 34px;
  overflow: hidden;
  margin: 0;
  color: color-mix(in srgb, var(--alert-text, #fff) 88%, transparent);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font: 700 clamp(9px, 1.25vw, 11px)/1.25 "Inter", "DM Sans", sans-serif;
  text-align: center;
}

.stream-alert-card.title-shine .stream-alert-title {
  background: linear-gradient(100deg, var(--alert-text, #fff) 20%, var(--alert-accent, #00d9ff) 45%, var(--alert-text, #fff) 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: streamAlertTitleShine 2.4s ease-in-out infinite;
}

.stream-alert-card.title-shine .stream-alert-name,
.stream-alert-card.title-shine .stream-alert-value {
  color: inherit;
}

.stream-alert-card.title-pop .stream-alert-title {
  animation: streamAlertTitlePop 1.3s cubic-bezier(.2, 1.4, .3, 1) infinite;
}

.stream-alert-card.title-wave .stream-alert-title {
  animation: streamAlertTitleWave 1.8s ease-in-out infinite;
}

.stream-alert-card.title-glitch .stream-alert-title {
  animation: streamAlertTitleGlitch 1.4s steps(2, end) infinite;
}

.widgets-media-settings {
  margin-top: 14px;
  padding: 14px;
  background: rgba(0, 0, 0, .16);
  border: 1px solid var(--line);
  border-radius: calc(12px * var(--radius-scale, 1));
}

.widgets-media-settings header {
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.widgets-media-settings header strong,
.widgets-media-settings header small {
  display: flex;
  align-items: center;
  gap: 6px;
}

.widgets-media-settings header strong {
  font-size: 10px;
}

.widgets-media-settings header small,
.widgets-media-settings p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.45;
}

.widgets-media-settings header span {
  padding: 4px 7px;
  color: var(--green);
  background: rgba(141, 217, 168, .08);
  border: 1px solid rgba(141, 217, 168, .2);
  border-radius: calc(20px * var(--radius-scale, 1));
  font-size: 7px;
  font-weight: 800;
  white-space: nowrap;
}

.widgets-media-grid {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 10px;
}

.widgets-media-url {
  grid-column: span 1;
}

@keyframes streamAlertMediaFloat {

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

  50% {
    transform: translateY(-5px) scale(1.03);
  }
}

@keyframes streamAlertTitleShine {
  0% {
    background-position: 160% 50%;
    filter: drop-shadow(0 0 0 transparent);
  }

  55% {
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--alert-accent, #00d9ff) 45%, transparent));
  }

  100% {
    background-position: -60% 50%;
    filter: drop-shadow(0 0 0 transparent);
  }
}

@keyframes streamAlertTitlePop {

  0%,
  100% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.045);
  }
}

@keyframes streamAlertTitleWave {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  35% {
    transform: translateY(-3px) rotate(-.5deg);
  }

  70% {
    transform: translateY(2px) rotate(.5deg);
  }
}

@keyframes streamAlertTitleGlitch {

  0%,
  100% {
    text-shadow: 0 0 0 transparent;
    transform: translate(0, 0);
  }

  20% {
    text-shadow: -2px 0 var(--alert-accent, #00d9ff), 2px 0 #ff477e;
    transform: translate(1px, -1px);
  }

  24% {
    text-shadow: 2px 0 var(--alert-accent, #00d9ff), -2px 0 #ff477e;
    transform: translate(-1px, 1px);
  }
}

.widgets-obs-link {
  margin: 0;
  padding: 14px;
  display: grid;
  gap: 9px;
}

.widgets-obs-link code {
  overflow: hidden;
  padding: 9px;
  color: #aab4ac;
  background: rgba(0, 0, 0, .24);
  border: 1px solid var(--line);
  border-radius: calc(8px * var(--radius-scale, 1));
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widgets-obs-link>div {
  display: flex;
  gap: 7px;
}

.widgets-obs-link .button {
  min-height: 32px;
  flex: 1;
  font-size: 8px;
}

.widgets-sound-library-panel {
  margin-top: 14px;
  padding: 18px;
}

.widget-sound-upload {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(180px, .8fr) auto auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid rgba(0, 212, 223, .2);
  border-radius: calc(12px * var(--radius-scale, 1));
  background: rgba(0, 212, 223, .045);
}

.widget-sound-upload>div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.widget-sound-upload>div:first-child>span {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: calc(10px * var(--radius-scale, 1));
  background: rgba(0, 212, 223, .11);
  color: var(--green);
}

.widget-sound-upload strong,
.widget-sound-upload small {
  display: block;
}

.widget-sound-upload small,
.widget-sound-upload>p {
  color: var(--muted);
  font-size: 9px;
}

.widget-sound-upload>p {
  grid-column: 1 / -1;
  margin: 0;
}

.widget-file-button {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.widget-file-button input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.widget-custom-sound-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.widget-custom-sound {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  border: 1px solid var(--line);
  border-radius: calc(10px * var(--radius-scale, 1));
  background: var(--surface-2);
  overflow: hidden;
}

.widget-custom-sound.active {
  border-color: rgba(0, 212, 223, .38);
  background: rgba(0, 212, 223, .06);
}

.widget-custom-sound>button:first-child {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  color: var(--text);
  text-align: left;
}

.widget-custom-sound strong,
.widget-custom-sound small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-custom-sound small {
  color: var(--muted);
  font-size: 8px;
}

.widget-custom-delete {
  display: grid;
  place-items: center;
  color: var(--muted);
  border-left: 1px solid var(--line);
}

.widget-custom-delete:hover {
  color: var(--danger);
  background: rgba(223, 125, 133, .08);
}

.widget-custom-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: calc(10px * var(--radius-scale, 1));
  color: var(--muted);
}

.widget-custom-empty strong,
.widget-custom-empty small {
  display: block;
}

.widget-library-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 10px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.widget-library-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

.widget-sound-grid {
  max-height: 270px;
  padding-right: 4px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  overflow-y: auto;
}

@media (max-width: 1050px) {
  .widget-sound-upload {
    grid-template-columns: 1fr 1fr;
  }

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

@media (max-width: 620px) {

  .widget-sound-upload,
  .widget-custom-sound-grid {
    grid-template-columns: 1fr;
  }
}

.widget-sound-card {
  min-width: 0;
  padding: 9px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: calc(9px * var(--radius-scale, 1));
  text-align: left;
}

.widget-sound-card:hover,
.widget-sound-card.active {
  color: var(--text);
  border-color: rgba(141, 217, 168, .35);
  background: rgba(141, 217, 168, .06);
}

.widget-sound-card.active>span:first-child,
.widget-sound-card.active>.material-symbols-rounded {
  color: var(--green);
}

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

.widget-sound-card strong {
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-sound-card small {
  color: var(--muted-2);
  font-size: 7px;
}

.widget-sound-card .material-symbols-rounded {
  font-size: 15px;
}

.widgets-catalog {
  margin-top: 22px;
}

.widgets-section-heading {
  margin-bottom: 12px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.widgets-section-heading h2 {
  margin: 5px 0;
  font: 700 20px "Space Grotesk";
}

.widgets-section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
}

.widgets-catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}

.widget-source-card {
  position: relative;
  min-height: 190px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(13px * var(--radius-scale, 1));
}

.widget-source-card.featured {
  background: linear-gradient(145deg, rgba(141, 217, 168, .07), transparent), var(--surface);
  border-color: rgba(141, 217, 168, .25);
}

.widget-source-icon {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  color: var(--green);
  background: rgba(141, 217, 168, .07);
  border: 1px solid rgba(141, 217, 168, .18);
  border-radius: calc(10px * var(--radius-scale, 1));
}

.widget-source-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--green);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .7px;
}

.widget-source-card h3 {
  margin: 6px 0;
  font: 700 12px "Space Grotesk";
}

.widget-source-card p {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.5;
}

.widget-source-actions {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.widget-source-actions button {
  min-height: 30px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: calc(7px * var(--radius-scale, 1));
}

.widget-source-actions button:hover {
  color: var(--green);
  border-color: rgba(141, 217, 168, .3);
}

.widget-source-actions .material-symbols-rounded {
  font-size: 15px;
}

.widget-qr-updated {
  margin-top: 12px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(110deg, rgba(141, 217, 168, .07), transparent 55%), var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(14px * var(--radius-scale, 1));
}

.widget-qr-updated h3 {
  margin: 5px 0;
  font: 700 15px "Space Grotesk";
}

.widget-qr-updated p {
  max-width: 620px;
  overflow: hidden;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-qr-updated>div>div {
  display: flex;
  gap: 7px;
}

.widget-qr-updated img {
  width: 95px;
  height: 95px;
  padding: 6px;
  background: #fff;
  border-radius: calc(11px * var(--radius-scale, 1));
}

@media (max-width: 1180px) {

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

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

/* Donate flow and full-screen audio editor */
body.donate-editor-open {
  overflow: hidden;
}

.support-card:has(#support-form:not(.hidden)) {
  width: min(760px, 100%);
}

.donate-flow-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 7px;
  background: rgba(255, 255, 255, .09);
}

.donate-flow-steps span {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #7f8994;
  background: #0c0f13;
  font-size: 10px;
  font-weight: 700;
}

.donate-flow-steps span.active {
  color: #e8fff3;
  background: #14231c;
}

.donate-flow-steps b {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 9px;
}

.donate-editor-launch {
  display: grid !important;
  grid-template-columns: 22px 1fr 22px;
  align-items: center;
  gap: 8px;
}

.donate-editor-launch>span:nth-child(2) {
  text-align: center;
}

#combo-items-container .legacy-donate-audio-actions,
#combo-items-container .item-audio-preview {
  display: none !important;
}

.donate-required-audio-format {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
  padding: 8px 10px;
  color: #dce6df;
  border: 1px solid rgba(69, 216, 149, .2);
  border-radius: 7px;
  background: #102019;
}

.donate-required-audio-format>.material-symbols-rounded {
  color: #45d895;
  font-size: 21px;
}

.donate-required-audio-format>span:last-child {
  display: grid;
  gap: 2px;
}

.donate-required-audio-format strong {
  font-size: 9px;
}

.donate-required-audio-format small {
  color: #829087;
  font-size: 8px;
}

.donate-editor-screen {
  position: fixed;
  z-index: 1100;
  inset: 0;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr) 68px;
  color: #e8edf2;
  background: #080a0d;
}

body.donate-editor-open .modal-backdrop {
  z-index: 1200;
}

body.donate-editor-open .toast-stack {
  z-index: 1300;
}

.donate-editor-screen button,
.donate-editor-screen input,
.donate-editor-screen select,
.donate-editor-screen output {
  font-family: Inter, sans-serif;
}

.donate-editor-topbar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(180px, 1fr) minmax(210px, 1fr);
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  border-bottom: 1px solid #242a31;
  background: #111419;
}

.donate-editor-brand,
.donate-editor-top-actions,
.donate-editor-transport,
.transport-tools,
.transport-playback,
.donate-editor-footer>div {
  display: flex;
  align-items: center;
}

.donate-editor-brand {
  min-width: 0;
  gap: 10px;
}

.donate-editor-brand>div,
.donate-editor-context,
.donate-editor-versions header>div,
.donate-editor-inspector>header,
.donate-timeline-panel>header>div,
.donate-editor-footer>div>span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.donate-editor-brand span,
.donate-editor-versions header span,
.donate-editor-inspector>header span,
.donate-timeline-panel>header span,
.donate-editor-tool-group>span {
  color: #73808d;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0;
}

.donate-editor-brand strong {
  font: 700 14px "Space Grotesk", sans-serif;
}

.donate-editor-context {
  justify-items: center;
  overflow: hidden;
  text-align: center;
}

.donate-editor-context strong {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.donate-editor-context small {
  color: #82909d;
  font-size: 8px;
}

.donate-editor-context small.ready {
  color: #49d990;
}

.donate-editor-top-actions {
  justify-content: flex-end;
  gap: 8px;
}

.editor-icon-button {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #aab3bd;
  border: 1px solid #2b323a;
  border-radius: 6px;
  background: #171b21;
  cursor: pointer;
}

.editor-icon-button:hover:not(:disabled) {
  color: #fff;
  border-color: #46515d;
  background: #20262d;
}

.editor-icon-button.primary {
  color: #06130d;
  border-color: #45d895;
  background: #45d895;
}

.editor-icon-button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.editor-icon-button .material-symbols-rounded {
  font-size: 19px;
}

.editor-generate-button {
  min-height: 36px;
  padding: 0 14px;
  gap: 6px;
  border-radius: 6px;
  white-space: nowrap;
}

.editor-generate-button .material-symbols-rounded {
  font-size: 17px;
}

.donate-editor-layout {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 288px;
}

.donate-editor-versions,
.donate-editor-inspector {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: #0e1115;
}

.donate-editor-versions {
  border-right: 1px solid #242a31;
}

.donate-editor-inspector {
  border-left: 1px solid #242a31;
}

.donate-editor-versions>header,
.donate-editor-inspector>header {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #242a31;
}

.donate-editor-versions header strong,
.donate-editor-inspector>header strong,
.donate-timeline-panel>header strong {
  font-size: 10px;
}

.donate-editor-versions header>b {
  min-width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  color: #8e9aa6;
  border: 1px solid #2d343c;
  border-radius: 5px;
  background: #15191e;
  font-size: 9px;
}

.donate-version-list {
  display: grid;
  gap: 7px;
  padding: 10px;
}

.donate-version-empty {
  min-height: 170px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  padding: 16px;
  color: #6f7b87;
  text-align: center;
}

.donate-version-empty .material-symbols-rounded {
  font-size: 30px;
}

.donate-version-empty strong {
  color: #b6bec6;
  font-size: 10px;
}

.donate-version-empty small {
  font-size: 8px;
  line-height: 1.5;
}

.donate-version-card {
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 9px;
  padding: 9px;
  color: #d9dfe5;
  border: 1px solid #262d34;
  border-radius: 6px;
  background: #15191e;
  text-align: left;
  cursor: pointer;
}

.donate-version-card:hover {
  border-color: #3c4853;
  background: #191e24;
}

.donate-version-card.active {
  border-color: #45d895;
  box-shadow: inset 3px 0 0 #45d895;
}

.donate-version-card>i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #45d895;
  border-radius: 5px;
  background: #10231a;
  font-style: normal;
}

.donate-version-card>i .material-symbols-rounded {
  font-size: 17px;
}

.donate-version-card>span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.donate-version-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
}

.donate-version-card small {
  color: #76828e;
  font-size: 8px;
}

.donate-version-card>b {
  color: #45d895;
  font-size: 16px;
}

.donate-editor-workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 52px minmax(0, 1fr);
  background: #090c10;
}

.donate-editor-transport {
  min-width: 0;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid #242a31;
  background: #0f1318;
}

.transport-tools,
.transport-playback {
  gap: 6px;
}

.transport-playback output {
  width: 118px;
  color: #aeb7c0;
  font: 600 9px/1 "Space Grotesk", sans-serif;
  text-align: center;
}

.donate-editor-zoom {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #77838e;
}

.donate-editor-zoom .material-symbols-rounded {
  font-size: 16px;
}

.donate-editor-zoom input {
  width: 86px;
  accent-color: #45d895;
}

.donate-timeline-panel {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 14px;
}

.donate-timeline-panel>header {
  min-width: 680px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  border: 1px solid #252c33;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: #10141a;
}

.timeline-sample-rate {
  color: #707d89;
  font-size: 8px;
}

.donate-timeline-ruler {
  min-width: 680px;
  height: 26px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  padding-left: 126px;
  color: #64717d;
  border: 1px solid #252c33;
  border-bottom: 0;
  background: #0d1116;
  font-size: 7px;
}

.donate-timeline-ruler span {
  position: relative;
  padding: 0 0 5px 5px;
  border-left: 1px solid #273039;
}

.donate-timeline {
  position: relative;
  min-width: 680px;
  min-height: 290px;
  display: grid;
  grid-template-columns: 126px minmax(550px, 1fr);
  overflow: hidden;
  border: 1px solid #252c33;
  border-radius: 0 0 6px 6px;
  background-color: #0a0d11;
  background-image: linear-gradient(to right, transparent calc(100% - 1px), rgba(255,255,255,.045) 1px);
  background-size: calc((100% - 126px) / 6) 100%;
  cursor: crosshair;
}

.donate-track-labels {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 1fr 1fr;
  border-right: 1px solid #2a3139;
  background: #10141a;
}

.donate-track-labels span {
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 12px;
  color: #7d8994;
  border-bottom: 1px solid #262d34;
  font-size: 8px;
}

.donate-track-labels b {
  color: #c2cad1;
  font-size: 9px;
}

.donate-track-lanes {
  position: relative;
  display: grid;
  grid-template-rows: 1fr 1fr;
}

.donate-track-lane {
  position: relative;
  min-height: 144px;
  border-bottom: 1px solid #262d34;
}

.donate-audio-clip {
  position: absolute;
  top: 30px;
  height: 82px;
  min-width: 30px;
  overflow: hidden;
  border: 1px solid #3f8d6b;
  border-radius: 5px;
  background: #153b2b;
}

.donate-audio-clip.effect {
  top: 39px;
  height: 66px;
  border-color: #5579b7;
  background: #182946;
}

.donate-audio-clip.external {
  border-color: #b47a51;
  background: #3a281c;
}

.donate-audio-clip canvas {
  width: 100%;
  height: 100%;
  opacity: .82;
}

.donate-audio-clip>span {
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 7px;
  max-width: calc(100% - 14px);
  overflow: hidden;
  color: #eafff4;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  font-weight: 700;
}

.donate-audio-clip .clip-remove {
  position: absolute;
  z-index: 3;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #e8edf2;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 4px;
  background: rgba(0,0,0,.36);
}

.donate-audio-clip .clip-remove .material-symbols-rounded {
  font-size: 13px;
}

.donate-playhead {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: 126px;
  width: 1px;
  pointer-events: none;
  background: #f0c95b;
}

.donate-playhead i {
  position: absolute;
  top: 0;
  left: -5px;
  width: 11px;
  height: 8px;
  background: #f0c95b;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.donate-empty-timeline {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 5px;
  color: #65727e;
  text-align: center;
}

.donate-empty-timeline .material-symbols-rounded {
  font-size: 34px;
}

.donate-empty-timeline strong {
  color: #9ea8b2;
  font-size: 10px;
}

.donate-empty-timeline small {
  font-size: 8px;
}

.donate-editor-inspector>header {
  justify-content: center;
}

.donate-editor-account-state {
  padding: 12px;
  border-bottom: 1px solid #242a31;
}

.donate-account-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 10px;
  color: #cbd2d9;
  border: 1px solid #2a323a;
  border-radius: 6px;
  background: #15191e;
}

.donate-account-card>.material-symbols-rounded {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #45d895;
  border-radius: 5px;
  background: #10231a;
}

.donate-account-card>span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.donate-account-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
}

.donate-account-card small {
  color: #7d8994;
  font-size: 8px;
}

.donate-account-card.locked {
  grid-template-columns: 34px minmax(0, 1fr);
}

.donate-account-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 3px;
}

.donate-account-actions button {
  min-height: 30px;
  padding: 0 8px;
  font-size: 8px;
}

.donate-account-actions button:last-child {
  color: #07100c;
  border-color: #45d895;
  background: #45d895;
}

.donate-account-discount {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #f0c95b;
  font-size: 8px;
  font-weight: 700;
}

.donate-inspector-controls {
  position: relative;
  display: grid;
  gap: 15px;
  padding: 14px;
}

.donate-inspector-controls.is-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  cursor: pointer;
  background: rgba(14, 17, 21, .68);
}

.donate-inspector-controls>label,
.donate-editor-control-grid label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  color: #aeb7c0;
  font-size: 9px;
  font-weight: 700;
}

.donate-inspector-controls label output {
  color: #45d895;
  font-size: 8px;
}

.donate-inspector-controls input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: #45d895;
}

.donate-editor-control-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.donate-editor-control-grid input,
.donate-editor-tool-group select {
  width: 100%;
  min-height: 34px;
  padding: 0 9px;
  color: #dce2e7;
  border: 1px solid #2b333b;
  border-radius: 5px;
  background: #151a20;
  font-size: 9px;
}

.donate-editor-tool-group {
  display: grid;
  gap: 7px;
  padding-top: 14px;
  border-top: 1px solid #252c33;
}

.donate-editor-tool-group .button {
  min-height: 34px;
  justify-content: center;
  gap: 6px;
  border-radius: 5px;
  font-size: 9px;
}

.donate-editor-footer {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid #242a31;
  background: #111419;
}

.donate-editor-footer>div {
  min-width: 0;
  gap: 9px;
}

.donate-editor-footer>div>.material-symbols-rounded {
  color: #45d895;
  font-size: 21px;
}

.donate-editor-footer strong {
  font-size: 9px;
}

.donate-editor-footer small {
  color: #7d8994;
  font-size: 8px;
}

.donate-editor-footer>.button {
  min-height: 40px;
  padding: 0 16px;
  gap: 7px;
  border-radius: 6px;
  white-space: nowrap;
}

.donate-editor-auth-modal {
  width: min(650px, calc(100vw - 32px));
}

.donate-editor-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #0c0f13;
}

.donate-editor-auth-tabs button {
  min-height: 36px;
  color: var(--muted);
  border: 0;
  border-radius: 5px;
  background: transparent;
  font-size: 10px;
  font-weight: 700;
}

.donate-editor-auth-tabs button.active {
  color: #eafff4;
  background: #183327;
}

.donate-editor-register-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.donate-editor-register-grid .field.full {
  grid-column: 1 / -1;
}

.donate-editor-discount-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  color: #f0d476;
  border: 1px solid rgba(240, 201, 91, .25);
  border-radius: 6px;
  background: rgba(240, 201, 91, .06);
  font-size: 9px;
}

.donate-editor-loading {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.donate-editor-loading .material-symbols-rounded {
  animation: spin .8s linear infinite;
}

@media (max-width: 1050px) {
  .donate-editor-layout {
    grid-template-columns: 190px minmax(0, 1fr) 250px;
  }

  .donate-editor-context {
    display: none;
  }

  .donate-editor-topbar {
    grid-template-columns: 1fr auto;
  }
}

@media (max-width: 760px) {
  .donate-editor-screen {
    grid-template-rows: 58px minmax(0, 1fr) auto;
  }

  .donate-editor-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 0 9px;
  }

  .donate-editor-brand>div span,
  .donate-editor-top-actions>#donate-editor-close {
    display: none;
  }

  .editor-generate-button {
    padding: 0 10px;
  }

  .donate-editor-layout {
    overflow-y: auto;
    display: block;
  }

  .donate-editor-versions,
  .donate-editor-inspector {
    overflow: visible;
    border: 0;
    border-bottom: 1px solid #242a31;
  }

  .donate-version-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(180px, 72vw);
    overflow-x: auto;
  }

  .donate-version-empty {
    min-height: 90px;
  }

  .donate-editor-workspace {
    min-height: 440px;
  }

  .donate-editor-zoom,
  .transport-tools button:first-child {
    display: none;
  }

  .donate-timeline-panel {
    padding: 9px;
  }

  .donate-editor-inspector {
    padding-bottom: 12px;
  }

  .donate-editor-footer {
    align-items: stretch;
    padding: 9px;
  }

  .donate-editor-footer>div {
    display: none;
  }

  .donate-editor-footer>.button {
    width: 100%;
    justify-content: center;
  }

  .donate-flow-steps span {
    font-size: 0;
  }

  .donate-flow-steps b {
    font-size: 9px;
  }

  .donate-editor-register-grid {
    grid-template-columns: 1fr;
  }

  .donate-editor-register-grid .field.full {
    grid-column: auto;
  }
}

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

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

@media (max-width: 620px) {

  .widgets-status-grid,
  .widgets-catalog-grid,
  .widgets-test-fields,
  .widgets-audio-settings,
  .widgets-media-grid,
  .widget-sound-grid {
    grid-template-columns: 1fr;
  }

  .widgets-setting-wide,
  .widgets-section-heading,
  .widget-qr-updated {
    align-items: stretch;
    flex-direction: column;
  }

  .widgets-setting-wide {
    display: grid;
    grid-template-columns: 1fr;
  }

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

  .widgets-test-actions,
  .widget-qr-updated>div>div {
    flex-direction: column;
  }

  .widget-qr-updated img {
    align-self: center;
  }
}

.wallet-summary {
  margin-bottom: 13px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
}

.wallet-summary article {
  padding: 20px;
  display: grid;
  gap: 9px;
}

.wallet-summary span,
.wallet-summary small {
  color: var(--muted);
  font-size: 9px;
}

.wallet-summary strong {
  font: 700 24px "Space Grotesk";
}

.settings-layout {
  display: grid;
  grid-template-columns: 185px minmax(0, 1fr);
  gap: 13px;
}

.settings-menu {
  height: fit-content;
  padding: 8px;
  display: grid;
  gap: 4px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: calc(14px * var(--radius-scale, 1));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.settings-menu button {
  padding: 10px 14px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: calc(10px * var(--radius-scale, 1));
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
}

.settings-menu button:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(2px);
}

.settings-menu button.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(0, 230, 118, 0.15) 0%, rgba(0, 230, 118, 0.05) 100%);
  border: 1px solid rgba(0, 230, 118, 0.2);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 4px 12px rgba(0, 0, 0, 0.1);
  font-weight: 700;
}

.playground-tabs-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 12px;
  margin-bottom: 24px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--line);
  border-radius: calc(14px * var(--radius-scale, 1));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.playground-tabs-container::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari and Opera */
}

.playground-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(10px * var(--radius-scale, 1));
  color: var(--muted);
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.playground-tab-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.playground-tab-btn.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(0, 230, 118, 0.15) 0%, rgba(0, 230, 118, 0.02) 100%);
  border-color: rgba(0, 230, 118, 0.3);
  box-shadow: 0 4px 12px rgba(0, 230, 118, 0.08);
}


.customizer-section {
  padding: 20px;
  margin-bottom: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .02), transparent 70%), var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(14px * var(--radius-scale, 1));
}


.settings-form {
  padding: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .03), transparent 60%), var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(18px * var(--radius-scale, 1));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.settings-form h3 {
  margin: 0 0 5px;
  font: 700 18px "Space Grotesk";
  letter-spacing: -0.01em;
}

.settings-form>p {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.theme-pro-shell {
  display: grid;
  gap: 16px;
}

.theme-pro-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(var(--theme-accent-rgb, 0, 230, 118), .18);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 8% 0%, rgba(var(--theme-glow-rgb, 0, 212, 223), .2), transparent 34%),
    linear-gradient(135deg, rgba(var(--theme-accent-rgb, 0, 230, 118), .11), rgba(var(--theme-secondary-rgb, 88, 101, 242), .08));
}

.theme-pro-hero h3 {
  margin: 2px 0 4px;
  font: 800 22px "Space Grotesk", sans-serif;
}

.theme-pro-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.theme-designer-grid {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(320px, 1.1fr);
  gap: 14px;
}

.theme-live-preview {
  min-height: 360px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--preview-radius, 14px);
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--preview-glow, #00d4df) 32%, transparent), transparent 34%),
    linear-gradient(145deg, var(--preview-bg, #040405), color-mix(in srgb, var(--preview-secondary, #5865f2) 20%, var(--preview-bg, #040405)));
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 18px 45px rgba(0, 0, 0, .28), 0 0 26px color-mix(in srgb, var(--preview-glow, #00d4df) 22%, transparent);
  overflow: hidden;
  position: relative;
}

.theme-live-preview::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 220px;
  height: 220px;
  background: conic-gradient(from 90deg, var(--preview-accent, #00e676), var(--preview-secondary, #5865f2), var(--preview-glow, #00d4df), var(--preview-accent, #00e676));
  filter: blur(34px);
  opacity: var(--preview-alpha, .4);
}

.theme-preview-top,
.theme-preview-card {
  position: relative;
  z-index: 1;
}

.theme-preview-top {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font: 800 13px "Space Grotesk", sans-serif;
}

.theme-preview-card {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: calc(var(--preview-radius, 14px) + 2px);
  background: color-mix(in srgb, var(--preview-surface, #0d0e12) 86%, transparent);
  backdrop-filter: blur(18px);
}

.theme-preview-card strong {
  display: block;
  color: #fff;
  font-size: 18px;
}

.theme-preview-card p {
  margin: 6px 0 16px;
  color: color-mix(in srgb, #fff 72%, var(--preview-accent, #00e676));
  font-size: 11px;
  line-height: 1.5;
}

.theme-preview-actions {
  display: flex;
  gap: 8px;
}

.theme-preview-actions span {
  height: 30px;
  border-radius: calc(8px * var(--radius-scale, 1));
  background: var(--preview-accent, #00e676);
  box-shadow: 0 0 18px color-mix(in srgb, var(--preview-glow, #00d4df) 45%, transparent);
}

.theme-preview-actions span:nth-child(1) {
  width: 72px;
}

.theme-preview-actions span:nth-child(2) {
  width: 44px;
  background: var(--preview-secondary, #5865f2);
}

.theme-preview-actions span:nth-child(3) {
  width: 30px;
  background: var(--preview-glow, #00d4df);
}

.theme-controls-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .03);
}

.theme-controls-panel h4 {
  margin: 0;
  font: 800 11px "Space Grotesk", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.theme-preset-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: calc(8px * var(--radius-scale, 1));
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}

.theme-preset-card span {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: calc(7px * var(--radius-scale, 1));
  box-shadow: inset 0 1px rgba(255, 255, 255, .3), 0 0 16px rgba(var(--theme-glow-rgb, 0, 212, 223), .24);
}

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

.theme-preset-card.active,
.theme-preset-card:hover {
  border-color: rgba(var(--theme-accent-rgb, 0, 230, 118), .45);
  background: rgba(var(--theme-accent-rgb, 0, 230, 118), .08);
}

.theme-color-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.theme-color-grid label,
.theme-range-field {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 10px;
}

.theme-color-grid input[type="color"] {
  width: 100%;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: calc(8px * var(--radius-scale, 1));
  background: transparent;
  cursor: pointer;
}

.theme-range-field {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.theme-range-field input {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: var(--green);
}

.theme-control-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.theme-lock-note {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.theme-pro-shell.locked .theme-controls-panel {
  opacity: .62;
}

@media (max-width: 900px) {

  .theme-pro-hero,
  .theme-designer-grid {
    grid-template-columns: 1fr;
  }

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

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field.full {
  grid-column: 1/-1;
}

.toggle-row {
  margin-top: 14px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: calc(14px * var(--radius-scale, 1));
  transition: background 0.3s ease;
}

.toggle-row:hover {
  background: rgba(0, 0, 0, 0.3);
}

.toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.toggle-copy strong {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.toggle-copy span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.toggle {
  width: 44px;
  height: 24px;
  padding: 3px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: calc(24px * var(--radius-scale, 1));
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.toggle::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle.on {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 12px rgba(41, 199, 95, 0.4);
}

.toggle.on::after {
  transform: translateX(20px);
}

.modal-backdrop {
  position: fixed;
  z-index: 100;
  inset: 0;
  padding: 20px;
  display: grid;
  place-items: center;
  background: rgba(3, 5, 4, .82);
  backdrop-filter: blur(12px);
}

.modal {
  width: min(520px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 23px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: calc(18px * var(--radius-scale, 1));
  box-shadow: var(--shadow);
  transition: width 0.3s ease;
}

.modal.modal-wide {
  width: min(920px, 95%);
}

.modal-head {
  margin-bottom: 21px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.modal-head h2 {
  margin: 0 0 4px;
  font: 700 19px "Space Grotesk";
}

.modal-head p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
}

.modal-close {
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: calc(8px * var(--radius-scale, 1));
}

.modal-form {
  display: grid;
  gap: 14px;
}

.modal-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.qr-result {
  display: grid;
  place-items: center;
  gap: 13px;
  text-align: center;
}

.qr-result img {
  width: 235px;
  max-width: 100%;
  padding: 11px;
  background: #eef2ee;
  border-radius: calc(14px * var(--radius-scale, 1));
}

.qr-result code {
  max-width: 100%;
  overflow: hidden;
  padding: 8px;
  color: var(--green);
  background: var(--surface);
  border-radius: calc(7px * var(--radius-scale, 1));
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-code {
  color: var(--muted);
  font-size: 10px;
}

.invite-code strong {
  color: var(--text);
  letter-spacing: 1px;
}

.mode-options {
  display: grid;
  gap: 9px;
}

.mode-option {
  padding: 15px;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 11px;
  align-items: center;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(11px * var(--radius-scale, 1));
  text-align: left;
}

.mode-option.active {
  border-color: #315840;
}

.mode-option>.material-symbols-rounded:first-child {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  color: var(--green);
  background: #162119;
  border-radius: calc(9px * var(--radius-scale, 1));
}

.mode-option strong {
  display: block;
  font-size: 11px;
}

.mode-option small {
  color: var(--muted);
  font-size: 8px;
}

.mode-option>.material-symbols-rounded:last-child {
  color: var(--green);
}

.toast-stack {
  position: fixed;
  z-index: 200;
  right: 20px;
  bottom: 20px;
  display: grid;
  gap: 8px;
}

.toast {
  min-width: 270px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #171d18;
  border: 1px solid var(--line-strong);
  border-radius: calc(10px * var(--radius-scale, 1));
  box-shadow: var(--shadow);
  font-size: 10px;
}

.toast .material-symbols-rounded {
  color: var(--green);
}

.public-view {
  min-height: 100vh;
  background: radial-gradient(circle at 50% 8%, rgba(59, 116, 76, .13), transparent 25%), var(--bg);
}

.public-header {
  height: 70px;
  padding: 0 clamp(20px, 5vw, 70px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  font-size: 10px;
}

.public-main {
  min-height: calc(100vh - 70px);
  padding: 55px 20px 80px;
  display: grid;
  place-items: start center;
}

.support-card {
  position: relative;
  width: min(610px, 100%);
  padding: 36px;
  background: rgba(16, 20, 17, .97);
  border: 1px solid var(--line-strong);
  border-radius: calc(22px * var(--radius-scale, 1));
  box-shadow: var(--shadow);
}

.creator-avatar {
  width: 76px;
  height: 76px;
  margin: -72px auto 17px;
  position: relative;
  display: grid;
  place-items: center;
  color: var(--green);
  background: #18231b;
  border: 5px solid var(--bg);
  border-radius: calc(22px * var(--radius-scale, 1));
  font: 700 20px "Space Grotesk";
}

.creator-avatar img:not(#public-avatar-skin) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(17px * var(--radius-scale, 1));
}

.creator-avatar .material-symbols-rounded {
  font-size: 30px;
}

.creator-intro {
  margin-bottom: 25px;
  text-align: center;
}

.support-kicker {
  color: var(--green);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.creator-intro h1 {
  margin: 7px 0 6px;
  font: 700 26px "Space Grotesk";
  letter-spacing: -1px;
}

.creator-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.support-form {
  display: grid;
  gap: 15px;
}

.public-actions {
  display: grid;
  gap: 9px;
}

.public-actions>button {
  padding: 15px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(11px * var(--radius-scale, 1));
  text-align: left;
}

.public-actions>button:hover {
  border-color: #315840;
  background: #121a14;
}

.public-actions>button>.material-symbols-rounded:first-child,
.public-actions>button>.incentive-star {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--green);
  background: #172219;
  border-radius: calc(9px * var(--radius-scale, 1));
}

.public-actions strong {
  display: block;
  font-size: 11px;
}

.public-actions small {
  color: var(--muted);
  font-size: 8px;
}

.public-actions>button>.material-symbols-rounded:last-child {
  color: var(--muted);
}

.public-actions>.public-primary-action {
  min-height: 68px;
  padding: 16px;
  background: #0b2424;
  border-color: rgba(0, 212, 223, .24);
}

.public-actions>.public-primary-action:hover {
  background: #0d3030;
  border-color: rgba(0, 212, 223, .5);
  transform: translateY(-1px);
}

.public-actions>.public-primary-action strong {
  font-size: 13px;
}

.public-value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 5px;
}

.public-value-grid article {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: calc(10px * var(--radius-scale, 1));
  background: rgba(255, 255, 255, .018);
}

.public-value-grid .material-symbols-rounded {
  display: block;
  margin-bottom: 8px;
  color: var(--green);
  font-size: 19px;
}

.public-value-grid strong,
.public-value-grid small {
  display: block;
}

.public-value-grid strong {
  margin-bottom: 4px;
  font-size: 9px;
}

.public-value-grid small {
  color: var(--muted);
  font-size: 8px;
  line-height: 1.45;
}

.public-trust-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 8px;
  text-align: center;
}

.public-trust-line .material-symbols-rounded {
  color: var(--green);
  font-size: 15px;
}

@media (max-width: 520px) {
  .public-value-grid {
    grid-template-columns: 1fr;
  }

  .public-value-grid article {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 8px;
  }

  .public-value-grid .material-symbols-rounded {
    grid-row: 1 / 3;
    margin: 0;
  }
}

.public-back {
  margin-bottom: 10px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  background: none;
  border: 0;
  font-size: 9px;
}

.public-back .material-symbols-rounded {
  font-size: 15px;
}

.public-section {
  display: grid;
  gap: 12px;
}

.product-grid {
  display: grid;
  gap: 9px;
}

.product-card {
  padding: 13px;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(10px * var(--radius-scale, 1));
}

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

.product-card>.material-symbols-rounded {
  color: var(--green);
  width: 32px;
  height: 32px;
  border-radius: calc(10px * var(--radius-scale, 1));
  background: rgba(0, 212, 223, .08);
}

.product-card strong {
  display: block;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-card p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 8px;
}

.product-card>span {
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
}

.product-card .button {
  grid-column: 1 / -1;
}

.public-empty {
  min-height: 170px;
  display: grid;
  place-items: center;
  align-content: center;
  color: var(--muted);
  text-align: center;
}

.public-empty>.material-symbols-rounded {
  color: var(--green);
  font-size: 27px;
}

.public-empty h3 {
  margin: 10px 0 4px;
  color: var(--text);
  font-size: 13px;
}

.public-empty p {
  margin: 0;
  font-size: 9px;
}

.field-hint {
  color: var(--muted);
  font-weight: 500;
}

.money-input {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: calc(9px * var(--radius-scale, 1));
}

.money-input:focus-within {
  border-color: #497a59;
  box-shadow: 0 0 0 3px rgba(73, 122, 89, .12);
}

.money-input span {
  padding-left: 13px;
  color: var(--green);
  font-weight: 700;
}

.money-input input {
  border: 0;
  box-shadow: none !important;
}

.message-types {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  border: 0;
}

.message-types legend {
  margin-bottom: 7px;
  color: #c7cec8;
  font-size: 11px;
  font-weight: 700;
}

.message-types label {
  position: relative;
  padding: 13px;
  display: grid;
  grid-template-columns: 25px 1fr;
  gap: 3px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(10px * var(--radius-scale, 1));
  cursor: pointer;
}

.message-types input {
  position: absolute;
  opacity: 0;
}

.message-types label:has(input:checked) {
  border-color: #3d6f4d;
  background: #121b14;
}

.message-types .material-symbols-rounded {
  grid-row: 1/3;
  color: var(--green);
}

.message-types strong {
  font-size: 9px;
}

.message-types small {
  color: var(--muted);
  font-size: 7px;
  line-height: 1.4;
}

.support-feedback {
  min-height: 16px;
  margin: 0;
  color: var(--danger);
  font-size: 10px;
  text-align: center;
}

.support-feedback.success {
  color: var(--green);
}

.support-footer {
  margin-top: 18px;
  padding-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted-2);
  border-top: 1px solid var(--line);
  font-size: 8px;
}

.support-footer .material-symbols-rounded {
  font-size: 13px;
}

@media (max-width: 1150px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .help-channels {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .auth-brand {
    display: none;
  }

  .mobile-logo {
    display: flex;
  }

  .sidebar,
  .sidebar-collapsed .sidebar {
    width: var(--sidebar);
    padding: 24px 14px 15px;
    transform: translateX(-100%);
    box-shadow: var(--shadow);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar .logo-name,
  .sidebar .profile-copy,
  .sidebar .switch-arrows,
  .sidebar .balance-label,
  .sidebar .balance-link,
  .sidebar .balance-card strong,
  .sidebar nav p,
  .sidebar nav button b,
  .sidebar-bottom button b {
    display: initial !important;
  }

  .sidebar .profile-switcher,
  .sidebar nav button,
  .sidebar-bottom button {
    justify-content: flex-start !important;
  }

  .app-main,
  .sidebar-collapsed .app-main {
    margin-left: 0;
  }

  .dashboard-grid,
  .bottom-grid,
  .settings-layout {
    grid-template-columns: 1fr;
  }

  .settings-menu {
    grid-template-columns: repeat(4, 1fr);
  }

  .widget-qr {
    grid-template-columns: 1fr;
  }

  .widget-qr-preview {
    justify-self: center;
  }

  .wallet-summary {
    grid-template-columns: 1fr;
  }

  .qr-review-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .auth-panel {
    padding: 28px 20px;
  }

  .auth-card {
    padding: 24px;
  }

  .qr-login-preview {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .topbar {
    height: 62px;
    padding: 0 14px;
  }

  .top-search,
  .live-button,
  .top-actions .icon-button {
    display: none;
  }

  .topbar-start {
    flex: 0 0 auto
  }

  .page-content {
    padding: 24px 14px 50px;
  }

  .page-heading {
    align-items: start;
    flex-direction: column;
  }

  .heading-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .heading-actions .button {
    flex: 1;
    min-width: min(160px, 100%);
    justify-content: center;
  }

  .stats-grid,
  .feature-grid,
  .field-grid,
  .message-types {
    grid-template-columns: 1fr;
  }

  .field.full {
    grid-column: auto;
  }

  .settings-menu {
    grid-template-columns: 1fr 1fr;
  }

  .public-header>span {
    display: none;
  }

  .public-main {
    padding: 55px 12px 50px;
  }

  .support-card {
    padding: 27px 18px;
    border-radius: calc(17px * var(--radius-scale, 1));
  }

  .help-channels {
    grid-template-columns: 1fr;
  }
}

.payment-qr {
  width: min(260px, 100%);
  margin: 18px auto;
  border-radius: calc(18px * var(--radius-scale, 1));
  background: #fff;
  padding: 12px
}

.public-empty .button {
  margin-top: 10px;
  text-decoration: none
}

.admin-section {
  margin-top: 16px
}

.admin-list {
  display: grid;
  gap: 8px
}

.admin-list button {
  padding: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(10px * var(--radius-scale, 1));
  text-align: left
}

.admin-list strong,
.admin-list small {
  display: block
}

.admin-list small {
  margin-top: 4px;
  color: var(--muted)
}

.detail-list {
  display: grid;
  gap: 8px
}

.detail-list>div {
  padding: 12px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px
}

.detail-list span {
  color: var(--muted)
}

.detail-list strong {
  text-align: right;
  word-break: break-word
}

.info-tip {
  position: relative;
  color: var(--green);
  cursor: help
}

.info-tip .material-symbols-rounded {
  font-size: 15px
}

.transaction {
  width: 100%;
  border: 0;
  text-align: left
}

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

.admin-dashboard-grid>.admin-section {
  min-width: 0
}

.admin-list.compact {
  max-height: 290px;
  overflow: auto;
  padding-right: 3px
}

.admin-list button>span:last-child {
  text-align: right
}

.admin-list button>span:last-child strong {
  color: var(--green)
}

.ticket-row {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  gap: 10px !important
}

.ticket-row.login-help {
  border-color: rgba(141, 217, 168, .28) !important;
  background: linear-gradient(135deg, rgba(141, 217, 168, .08), rgba(255, 255, 255, .025)) !important;
}

.ticket-row.login-help .ticket-row-icon {
  color: #dff4e6;
  background: rgba(141, 217, 168, .16);
  border-color: rgba(141, 217, 168, .3);
}

.ticket-row-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #91d7f2;
  background: #10232d;
  border: 1px solid #234754;
  border-radius: 9px
}

.ticket-row-icon .material-symbols-rounded {
  font-size: 17px
}

.ticket-row>span:nth-child(2) {
  min-width: 0
}

.ticket-row small {
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.ticket-meta {
  display: grid;
  justify-items: end;
  gap: 5px
}

.ticket-kind {
  padding: 3px 7px;
  color: var(--green);
  background: rgba(141, 217, 168, .08);
  border: 1px solid rgba(141, 217, 168, .18);
  border-radius: calc(999px * var(--radius-scale, 1));
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.ticket-meta em {
  color: var(--muted);
  font-size: 8px;
  font-style: normal
}

.chat-modal {
  width: min(780px, 100%);
  padding: 0;
  overflow: hidden
}

.chat-head {
  margin: 0;
  padding: 21px 23px 17px;
  background: #111713;
  border-bottom: 1px solid var(--line)
}

.chat-head>div {
  min-width: 0
}

.chat-head h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.ticket-admin-actions {
  padding: 10px 22px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  background: #0d120f;
  border-bottom: 1px solid var(--line)
}

.ticket-admin-actions button {
  padding: 6px 9px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: calc(7px * var(--radius-scale, 1));
  font-size: 8px;
  font-weight: 700
}

.ticket-admin-actions button:hover {
  color: var(--text);
  border-color: #315840
}

.chat-thread {
  height: min(480px, 58vh);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  overflow-y: auto;
  background: radial-gradient(circle at 50% 0, rgba(71, 155, 190, .05), transparent 35%), #0b0f0d
}

.chat-message {
  max-width: 78%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: calc(13px * var(--radius-scale, 1)) calc(13px * var(--radius-scale, 1)) calc(13px * var(--radius-scale, 1)) calc(4px * var(--radius-scale, 1));
  background: #151b17;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .13)
}

.chat-message.own {
  align-self: flex-end;
  border-color: #315840;
  border-radius: calc(13px * var(--radius-scale, 1)) calc(13px * var(--radius-scale, 1)) calc(4px * var(--radius-scale, 1)) calc(13px * var(--radius-scale, 1));
  background: #17251b
}

.chat-message.support {
  align-self: flex-start;
  border-color: #254654;
  background: #10212a
}

.chat-message.system {
  align-self: center;
  max-width: 92%;
  color: #173545;
  background: #f0fbff;
  border-color: #b9e7f8;
  border-radius: calc(13px * var(--radius-scale, 1));
  box-shadow: 0 8px 30px rgba(92, 190, 226, .12)
}

.chat-message header {
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  gap: 14px
}

.chat-message header strong {
  font-size: 9px
}

.chat-message header span {
  color: var(--muted);
  font-size: 7px
}

.chat-message.system header span {
  color: #6d8995
}

.chat-message p {
  margin: 0;
  font-size: 10px;
  line-height: 1.6;
  word-break: break-word
}

.chat-message.system p {
  color: #204556
}

.chat-message.system p strong {
  color: #3a9fc8;
  font-weight: 800
}

.chat-composer {
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
  background: #111713;
  border-top: 1px solid var(--line)
}

.chat-composer textarea {
  min-height: 56px;
  padding: 11px 12px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: calc(10px * var(--radius-scale, 1));
  outline: 0;
  resize: none
}

.chat-composer textarea:focus {
  border-color: #497a59
}

.chat-composer .form-message {
  grid-column: 1/-1
}

.chat-closed {
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  background: #111713;
  border-top: 1px solid var(--line);
  font-size: 9px
}

.admin-profile-modal {
  width: min(1080px, 100%)
}

.admin-profile-head {
  align-items: center
}

.admin-profile-head>div:nth-child(2) {
  flex: 1
}

.admin-profile-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--green);
  background: #172219;
  border: 1px solid #294732;
  border-radius: calc(13px * var(--radius-scale, 1));
  font: 700 13px "Space Grotesk"
}

.admin-profile-metrics {
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px
}

.admin-profile-metrics div {
  padding: 13px;
  display: grid;
  gap: 5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px
}

.admin-profile-metrics span {
  color: var(--muted);
  font-size: 8px
}

.admin-profile-metrics strong {
  font: 700 16px "Space Grotesk"
}

.admin-profile-section {
  margin-top: 18px
}

.admin-profile-section h3,
.admin-profile-columns h3 {
  margin: 0 0 9px;
  font: 700 12px "Space Grotesk"
}

.admin-profile-columns {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px
}

.pix-key-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px
}

.pix-key-grid>div {
  padding: 11px;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 9px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px
}

.pix-key-grid>.admin-profile-empty {
  display: block
}

.pix-key-grid .material-symbols-rounded {
  color: var(--green)
}

.pix-key-grid strong,
.pix-key-grid small {
  display: block
}

.pix-key-grid small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
  word-break: break-all
}

.pix-key-grid em {
  color: var(--muted);
  font-size: 7px;
  font-style: normal
}

.admin-profile-empty {
  padding: 16px;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: calc(10px * var(--radius-scale, 1));
  font-size: 9px;
  text-align: center
}

.admin-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.admin-config-grid>button,
.admin-config-grid>div {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: calc(16px * var(--radius-scale, 1));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
  min-height: 130px;
}

.admin-config-grid>button:hover,
.admin-config-grid>div:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(0, 212, 223, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.admin-config-grid .material-symbols-rounded {
  color: var(--green);
  font-size: 28px;
  margin-bottom: 4px;
}

.admin-config-grid strong {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

.admin-config-grid span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.help-channels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 13px
}

.help-channels a {
  min-height: 115px;
  padding: 17px;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 10px;
  align-items: center;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: .18s
}

.help-channels a:hover {
  border-color: #315840;
  background: var(--surface-2);
  transform: translateY(-2px)
}

.help-channels>a>.material-symbols-rounded:first-child {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--green);
  background: #162119;
  border-radius: 10px
}

.help-channels strong,
.help-channels small {
  display: block
}

.help-channels small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 8px
}

.help-channels>a>.material-symbols-rounded:last-child {
  color: var(--muted);
  font-size: 15px
}

.viewer-welcome {
  min-height: 322px;
  padding: 30px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  background: radial-gradient(circle at 50% 0, rgba(72, 128, 89, .08), transparent 45%), var(--surface)
}

.viewer-welcome>.material-symbols-rounded {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: var(--green);
  background: #162119;
  border-radius: 15px
}

.viewer-welcome h3 {
  margin: 16px 0 7px
}

.viewer-welcome p {
  max-width: 260px;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6
}

[data-mode="admin"] .page-content {
  max-width: 1320px
}

.panel,
.stat-card,
.feature-card {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .015)
}

.page-heading {
  padding-bottom: 4px
}

.admin-list button:hover,
.transaction:hover {
  background: var(--surface-2);
  border-color: var(--line-strong)
}

.mvp-banner {
  margin-bottom: 16px;
  padding: 15px 17px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 13px;
  align-items: center;
  background: #101a15;
  border: 1px solid #253d2d;
  border-radius: 14px
}

.mvp-banner-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--green);
  background: #17271d;
  border-radius: 11px
}

.mvp-banner strong {
  font-size: 12px
}

.mvp-banner p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 9px
}

.mvp-dashboard {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .65fr);
  gap: 16px
}

.activity-panel {
  min-height: 360px
}

.activity-panel .transaction-list {
  padding-bottom: 16px
}

.activity-panel .empty-state {
  min-height: 285px
}

.transaction {
  padding: 14px 4px;
  border-radius: calc(8px * var(--radius-scale, 1));
  transition: background .16s
}

.transaction+.transaction {
  border-top: 1px solid var(--line)
}

.support-form {
  gap: 17px
}

.support-form>.button-primary {
  min-height: 48px;
  font-size: 12px
}

.public-main {
  padding-top: 82px;
  background: radial-gradient(circle at 50% 10%, rgba(68, 122, 85, .1), transparent 30%)
}

@media (max-width:900px) {

  .mvp-dashboard,
  .admin-dashboard-grid,
  .admin-profile-columns {
    grid-template-columns: 1fr
  }

  .admin-profile-metrics {
    grid-template-columns: 1fr 1fr
  }

  .pix-key-grid {
    grid-template-columns: 1fr
  }

  .sidebar-toggle-mobile {
    display: grid;
    position: absolute;
    top: 14px;
    right: 12px;
    width: 38px;
    height: 38px;
    z-index: 2
  }
}

@media (max-width:1150px) {
  .help-channels {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width:620px) {
  .mvp-banner {
    grid-template-columns: 38px 1fr
  }

  .mvp-banner>.status {
    display: none
  }

  .help-channels,
  .admin-config-grid {
    grid-template-columns: 1fr
  }

  .chat-thread {
    padding: 14px
  }

  .chat-message {
    max-width: 92%
  }

  .chat-composer {
    grid-template-columns: 1fr
  }

  .chat-composer .button {
    width: 100%
  }

  .sidebar {
    padding-top: 18px
  }

  .sidebar-toggle-mobile {
    width: 38px;
    height: 38px
  }

  .sidebar-top {
    padding-bottom: 16px
  }
}

@media (orientation: landscape) and (max-width:900px) {
  .sidebar-toggle-mobile {
    top: 12px;
    right: 10px
  }

  .sidebar-top {
    padding-bottom: 16px
  }

  .sidebar {
    padding-top: 18px
  }
}

.status-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end
}

.status-filters .status {
  font-size: 7px
}

.admin-loading {
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  text-align: center
}

.admin-loading strong {
  font: 700 14px "Space Grotesk"
}

.admin-loading p {
  max-width: 340px;
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.6
}

.spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(141, 217, 168, .18);
  border-top-color: var(--green);
  animation: spin .8s linear infinite
}

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

@media (min-width: 901px) {
  /* Permitir exibição do botão toggle na header */
}

/* Glassmorphism Preview for Alerts */
.incentive-preview-container {
  margin-top: 15px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-strong);
  border-radius: calc(12px * var(--radius-scale, 1));
}

.incentive-preview-box {
  padding: 24px;
  background: rgba(16, 20, 17, 0.7);
  border: 1px solid rgba(141, 217, 168, 0.25);
  border-radius: var(--radius);
  text-align: center;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.incentive-preview-title {
  color: var(--green);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 16px;
}

.incentive-preview-msg {
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}

/* sound alert RGB glowing */
@keyframes rgbGlow {
  0% {
    border-color: #ff0000;
    box-shadow: 0 0 8px #ff0000;
  }

  33% {
    border-color: #00ff00;
    box-shadow: 0 0 8px #00ff00;
  }

  66% {
    border-color: #0000ff;
    box-shadow: 0 0 8px #0000ff;
  }

  100% {
    border-color: #ff0000;
    box-shadow: 0 0 8px #ff0000;
  }
}

.rgb-glowing {
  animation: rgbGlow 3s infinite linear !important;
  border-width: 2px !important;
}

/* Notifications dropdown */
.notifications-dropdown {
  position: absolute;
  top: 55px;
  right: 0;
  width: 340px;
  max-height: 400px;
  background: rgba(16, 20, 17, 0.95);
  border: 1px solid var(--line-strong);
  border-radius: calc(12px * var(--radius-scale, 1));
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  z-index: 150;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.notifications-header {
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.notifications-header h4 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
}

.notifications-header button {
  background: none;
  border: 0;
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
  padding: 0;
}

.notifications-list {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0;
  scrollbar-width: thin;
}

.notification-item {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  text-align: left;
  background: transparent;
  border-left: 3px solid transparent;
  width: 100%;
}

.notification-item.unread {
  background: rgba(141, 217, 168, 0.03);
  border-left-color: var(--green);
}

.notification-item strong {
  font-size: 10px;
  color: var(--text);
}

.notification-item p {
  margin: 0;
  font-size: 9px;
  color: var(--muted);
  line-height: 1.4;
}

.notification-item small {
  font-size: 8px;
  color: var(--muted-2);
}

.notification-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 10px;
}

/* 2026 interface refresh: calmer, flatter, closer to the production mockup */
.sidebar {
  background: var(--sidebar-bg) !important;
  border-right-color: rgba(0, 212, 223, .08);
  box-shadow: none;
}

.topbar {
  background: #073b3a;
  border-bottom-color: rgba(0, 212, 223, .1);
  backdrop-filter: none;
}

.panel,
.stat-card,
.feature-card,
.support-card,
.auth-card,
.modal {
  background: var(--surface);
  border-color: rgba(255, 255, 255, .07);
  box-shadow: none;
}

.button-primary {
  color: #eaffff;
  background: #0c969c;
  border-color: #0c969c;
}

.button-primary:hover {
  background: #0a858a;
}

.button-secondary,
.button-ghost,
.icon-button,
.top-search,
.live-button {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .08);
}

.sidebar nav button,
.sidebar-bottom button {
  min-height: 38px;
  border-radius: calc(10px * var(--radius-scale, 1));
  color: #b4cdcd;
}

.sidebar nav button:hover,
.sidebar-bottom button:hover {
  background: rgba(255, 255, 255, .07);
}

.sidebar nav button.active {
  background: #0b999e;
  color: #ecffff;
  box-shadow: none;
}

.sidebar nav button.active>.material-symbols-rounded,
.sidebar nav button.active>.incentive-star {
  color: #ecffff;
}

.profile-switcher,
.balance-card {
  background: #073333;
  border-color: rgba(255, 255, 255, .08);
}

.pro-promo-card {
  background: #082b2b !important;
  border-color: rgba(0, 212, 223, .12) !important;
  box-shadow: none !important;
}

.page-heading h1 span,
.logo-name>span,
.logo>span:last-child>span,
.eyebrow {
  color: var(--green);
}

.admin-workspace-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  align-items: start;
}

.admin-workspace-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-workspace-menu button {
  justify-content: flex-start;
  gap: 8px;
}

.admin-settings-panel {
  min-height: 320px;
}

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

.admin-panel-headline h3 {
  margin: 4px 0;
}

.admin-panel-headline p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}



.admin-team-form {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: calc(14px * var(--radius-scale, 1));
  background: rgba(255, 255, 255, .025);
}

.admin-permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.admin-permission-grid label {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: calc(12px * var(--radius-scale, 1));
  background: rgba(255, 255, 255, .035);
}

.admin-permission-grid small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

.admin-team-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.admin-member-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: calc(14px * var(--radius-scale, 1));
  background: rgba(255, 255, 255, .025);
}

.admin-member-avatar {
  width: 44px;
  height: 44px;
  border-radius: calc(14px * var(--radius-scale, 1));
  display: grid;
  place-items: center;
  color: #eaffff;
  background: #0b8e93;
  font: 800 12px "Space Grotesk";
}

.admin-member-card small,
.admin-member-card p {
  display: block;
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.admin-member-perms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.admin-member-perms span {
  padding: 4px 7px;
  border-radius: calc(999px * var(--radius-scale, 1));
  color: #c8eeee;
  background: rgba(0, 212, 223, .08);
  font-size: 9px;
}

.admin-member-actions {
  display: grid;
  gap: 7px;
  justify-items: end;
}

.danger-soft {
  color: var(--danger) !important;
  border-color: rgba(223, 125, 133, .28) !important;
}

.admin-db-toolbar {
  display: flex;
  align-items: end;
  gap: 10px;
  margin-bottom: 14px;
}

.admin-db-toolbar .field {
  flex: 1;
  margin: 0;
}

.admin-db-table {
  display: grid;
  border: 1px solid var(--line);
  border-radius: calc(14px * var(--radius-scale, 1));
  overflow: hidden;
}

.admin-db-head,
.admin-db-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(90px, 1fr)) 160px;
  gap: 0;
}

.admin-db-head {
  background: rgba(255, 255, 255, .055);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-db-head span,
.admin-db-row span {
  min-width: 0;
  padding: 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

.admin-db-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.admin-db-actions .button {
  min-height: 28px;
  padding: 5px 8px;
  font-size: 9px;
}

.admin-db-warning {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--warning);
  font-size: 10px;
}

.notifications-modal {
  width: min(620px, 92vw);
}

.notifications-modal-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.push-permission-modal {
  width: min(610px, 92vw);
}

.push-permission-head {
  align-items: flex-start;
}

.push-permission-head>div:nth-child(2) {
  flex: 1;
}

.push-permission-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  color: var(--green);
  background: rgba(0, 212, 223, .1);
  border: 1px solid rgba(0, 212, 223, .2);
  border-radius: calc(14px * var(--radius-scale, 1));
}

.push-permission-details {
  display: grid;
  gap: 8px;
  margin: 18px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: calc(12px * var(--radius-scale, 1));
  background: rgba(255, 255, 255, .025);
}

.push-permission-details span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
}

.push-permission-details .material-symbols-rounded {
  color: var(--green);
  font-size: 18px;
}

.push-permission-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.obs-audio-unlock {
  appearance: none;
  border: 1px solid rgba(0, 212, 223, .45);
  border-radius: calc(999px * var(--radius-scale, 1));
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  background: rgba(3, 26, 29, .94);
  font: 700 11px/1 "DM Sans", sans-serif;
  cursor: pointer;
}

.obs-audio-unlock .material-symbols-rounded {
  color: #00d4df;
  font-size: 17px;
}

@media (max-width: 560px) {
  .push-permission-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
  }

  .push-permission-actions,
  .notifications-modal-actions {
    flex-direction: column-reverse;
  }

  .push-permission-actions .button,
  .notifications-modal-actions .button {
    width: 100%;
  }
}

.notifications-list-modal {
  max-height: min(540px, 62vh);
  padding: 0;
}

.notifications-list-modal .notification-item {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: calc(12px * var(--radius-scale, 1));
  margin-bottom: 8px;
  background: rgba(255, 255, 255, .025);
}

.notification-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--green);
  background: rgba(0, 212, 223, .08);
  border-radius: calc(12px * var(--radius-scale, 1));
}

.notification-empty strong,
.notification-empty span {
  display: block;
  margin-top: 6px;
}

@media (max-width: 760px) {

  .admin-member-card,
  .admin-db-head,
  .admin-db-row {
    grid-template-columns: 1fr;
  }

  .admin-member-actions {
    justify-items: stretch;
  }

  .admin-db-actions {
    justify-content: flex-start;
  }
}

/* Sound modal customizations */
.sound-effects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 10px;
}

.sound-effect-card {
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(9px * var(--radius-scale, 1));
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.sound-effect-card.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

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

.sound-effect-card small {
  color: var(--muted);
  font-size: 8px;
}

.sound-effect-card .sound-timer {
  color: var(--warning);
  font-size: 8px;
  font-weight: 700;
}

.sound-effect-actions {
  display: flex;
  gap: 6px;
}

.sound-effect-actions button {
  flex: 1;
  padding: 6px;
  font-size: 9px;
  border-radius: calc(6px * var(--radius-scale, 1));
}

/* Card customizer */
.card-customizer-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.customizer-preview-pane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}

@media (max-width: 768px) {
  .card-customizer-container {
    grid-template-columns: 1fr;
  }
}

/* static 3D elements for auth view background */
.auth-brand-3d-scene {
  position: absolute;
  inset: 0;
  perspective: 1200px;
  overflow: hidden;
  pointer-events: none;
}

.auth-ambient-glow-1 {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(141, 217, 168, 0.18) 0%, rgba(141, 217, 168, 0) 70%);
  filter: blur(80px);
  top: 5%;
  right: -5%;
  z-index: 0;
}

.auth-ambient-glow-2 {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13, 20, 32, 0.8) 0%, rgba(13, 20, 32, 0) 75%);
  filter: blur(100px);
  bottom: -10%;
  left: -10%;
  z-index: 0;
}

.auth-brand-3d-grid {
  position: absolute;
  width: 250%;
  height: 200%;
  top: -10%;
  left: -75%;
  background-image:
    linear-gradient(rgba(141, 217, 168, 0.06) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(141, 217, 168, 0.06) 1.5px, transparent 1.5px);
  background-size: 60px 60px;
  transform: rotateX(74deg) translateZ(-160px);
  transform-origin: top center;
  mask-image: radial-gradient(ellipse at 50% 35%, black 20%, transparent 68%);
  opacity: 0.95;
}

.shape-3d {
  position: absolute;
  border-radius: calc(18px * var(--radius-scale, 1));
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.005));
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.65), inset 0 1.5px 0.5px rgba(255, 255, 255, 0.12);
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s, box-shadow 0.4s;
}

@keyframes float-shape-1 {
  0% {
    transform: rotateX(24deg) rotateY(-22deg) rotateZ(8deg) translateY(0);
  }

  50% {
    transform: rotateX(24deg) rotateY(-22deg) rotateZ(8deg) translateY(-15px);
  }

  100% {
    transform: rotateX(24deg) rotateY(-22deg) rotateZ(8deg) translateY(0);
  }
}

.shape-1 {
  width: 250px;
  height: auto;
  min-height: 140px;
  top: 18%;
  right: -20px;
  transform: rotateX(24deg) rotateY(-22deg) rotateZ(8deg);
  background: linear-gradient(135deg, rgba(141, 217, 168, 0.16), rgba(0, 0, 0, 0.6));
  border-color: rgba(141, 217, 168, 0.28);
  box-shadow: 0 0 45px rgba(141, 217, 168, 0.08), 0 40px 90px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  text-align: center;
  animation: float-shape-1 6s ease-in-out infinite;
}

.shape-1 .shape-logo {
  width: 32px;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 8px rgba(141, 217, 168, 0.5));
}

.shape-1 strong {
  color: var(--green, #8dd9a8);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  text-shadow: 0 0 10px rgba(141, 217, 168, 0.4);
}

.shape-1 p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}

.shape-1:hover {
  transform: rotateX(24deg) rotateY(-22deg) rotateZ(8deg) translateZ(25px) translateY(0);
  border-color: rgba(141, 217, 168, 0.48);
  box-shadow: 0 0 60px rgba(141, 217, 168, 0.22), 0 50px 110px rgba(0, 0, 0, 0.7);
  animation-play-state: paused;
}

.shape-2 {
  width: 140px;
  height: 140px;
  bottom: 12%;
  left: 6%;
  transform: rotateX(-12deg) rotateY(28deg) rotateZ(-12deg);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(141, 217, 168, 0.22), rgba(0, 0, 0, 0.35) 75%);
  border-color: rgba(141, 217, 168, 0.22);
  box-shadow: 0 0 55px rgba(141, 217, 168, 0.14), inset 0 2px 8px rgba(255, 255, 255, 0.18);
}

.shape-2:hover {
  transform: rotateX(-12deg) rotateY(28deg) rotateZ(-12deg) translateZ(25px);
  border-color: rgba(141, 217, 168, 0.42);
  box-shadow: 0 0 75px rgba(141, 217, 168, 0.3), inset 0 2px 10px rgba(255, 255, 255, 0.25);
}

.shape-3 {
  width: 180px;
  height: 96px;
  bottom: 38%;
  right: 12%;
  transform: rotateX(15deg) rotateY(18deg) rotateZ(-6deg);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.003));
  border-color: rgba(255, 255, 255, 0.05);
}

.shape-3:hover {
  transform: rotateX(15deg) rotateY(18deg) rotateZ(-6deg) translateZ(25px);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 45px rgba(255, 255, 255, 0.08), 0 40px 95px rgba(0, 0, 0, 0.6);
}

/* ===== REFERRAL CODE PANEL ===== */
.referral-code-panel {
  background: linear-gradient(135deg, rgba(141, 217, 168, 0.05) 0%, rgba(16, 20, 17, 0) 100%);
  border-color: rgba(141, 217, 168, 0.18) !important;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.referral-code-panel:hover {
  border-color: rgba(141, 217, 168, 0.3) !important;
  box-shadow: 0 0 24px rgba(141, 217, 168, 0.06);
}

.referral-code-panel.used {
  opacity: 0.72;
  background: rgba(141, 217, 168, 0.025);
}

.referral-panel-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.referral-panel-header>div {
  flex: 1;
}

.referral-panel-header h3 {
  margin: 0 0 3px;
  font-size: 13px;
  font-weight: 700;
}

.referral-panel-header p {
  margin: 0;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.5;
}

.referral-panel-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: calc(10px * var(--radius-scale, 1));
  background: rgba(141, 217, 168, 0.1);
  border: 1px solid rgba(141, 217, 168, 0.2);
  color: var(--green);
  font-size: 20px;
  flex-shrink: 0;
}

.referral-panel-icon .material-symbols-rounded {
  font-size: 20px;
}

.referral-timer-badge {
  padding: 4px 10px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(141, 217, 168, 0.1);
  border: 1px solid rgba(141, 217, 168, 0.2);
  border-radius: calc(20px * var(--radius-scale, 1));
  white-space: nowrap;
  flex-shrink: 0;
  animation: pulse-timer 2.5s ease-in-out infinite;
}

@keyframes pulse-timer {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(141, 217, 168, 0);
  }

  50% {
    box-shadow: 0 0 0 4px rgba(141, 217, 168, 0.12);
  }
}

.referral-input-row {
  display: flex;
  gap: 10px;
  align-items: end;
}

.referral-input-row .field {
  flex: 1;
  margin: 0;
}

.referral-input-row input {
  letter-spacing: 0.06em;
  font-weight: 700;
}

/* ===== ADMIN REFERRAL CODES TABLE ===== */
.referral-codes-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: calc(10px * var(--radius-scale, 1));
  overflow: hidden;
}

.referral-codes-table-head,
.referral-codes-table-row {
  display: grid;
  grid-template-columns: 1.8fr 1fr 0.8fr 0.6fr 0.7fr 1.2fr;
  gap: 12px;
  padding: 10px 14px;
  align-items: center;
  font-size: 10px;
}

.referral-codes-table-head {
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.referral-codes-table-row {
  border-bottom: 1px solid var(--line);
  transition: background 0.15s;
}

.referral-codes-table-row:last-child {
  border-bottom: none;
}

.referral-codes-table-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.referral-codes-table-row strong {
  font-size: 11px;
  display: block;
}

.referral-codes-table-row small {
  color: var(--muted);
  font-size: 9px;
  display: block;
  margin-top: 2px;
}

.settings-main-panel {
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-width: 0;
}

/* ===== PROFILE PAGE ===== */
.profile-page-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
  max-width: 800px;
  margin: 0 auto;
}

.profile-form-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.profile-card-section {
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.profile-card-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  margin: 0;
  opacity: 0.5;
}

.profile-card-section-label {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-card-section-label>div {
  flex: 1;
  min-width: 0;
}

.profile-card-section-label strong {
  display: block;
  font: 700 15px "Space Grotesk";
  margin-bottom: 4px;
  letter-spacing: -0.01em;
  color: #fff;
}

.profile-card-section-label p {
  margin: 0;
  color: #a1a1aa;
  font-size: 12px;
  line-height: 1.5;
}

.profile-card-section-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--green);
  background: linear-gradient(135deg, rgba(39, 219, 134, 0.15) 0%, rgba(39, 219, 134, 0.02) 100%);
  border: 1px solid rgba(39, 219, 134, 0.2);
  border-radius: calc(12px * var(--radius-scale, 1));
  box-shadow: 0 4px 12px rgba(39, 219, 134, 0.05);
}

.profile-card-section-icon .material-symbols-rounded {
  font-size: 20px;
}

/* Color picker with hex label */
.color-picker-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: calc(9px * var(--radius-scale, 1));
  cursor: pointer;
}

.color-picker-wrap input[type="color"] {
  width: 28px;
  height: 28px;
  padding: 2px;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: calc(5px * var(--radius-scale, 1));
  flex: 0 0 auto;
}

.color-picker-label {
  font-size: 10px;
  font-weight: 700;
  font-family: monospace;
  color: var(--muted);
  letter-spacing: 0.06em;
}

/* Range input with value badge */
.range-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.range-wrap input[type="range"] {
  flex: 1;
  accent-color: var(--green);
  height: 4px;
  border: 0;
  background: none;
  padding: 0;
}

.range-badge {
  width: 40px;
  flex: 0 0 auto;
  padding: 3px 7px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--green);
  background: #162119;
  border: 1px solid #24392a;
  border-radius: calc(7px * var(--radius-scale, 1));
}

/* Preview panel */
.profile-preview-panel {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 90px;
}

.profile-preview-stage {
  display: flex;
  justify-content: center;
  padding: 28px 20px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: calc(14px * var(--radius-scale, 1));
}

.profile-preview-card {
  width: 100%;
  max-width: 280px;
  padding: 20px;
  border-radius: calc(16px * var(--radius-scale, 1));
  background-color: #101411;
  color: #f2f5f2;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: background-color 0.2s, color 0.2s, border-radius 0.2s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-preview-card .support-kicker {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  display: block;
}

.profile-preview-identity {
  display: flex;
  gap: 11px;
  align-items: center;
}

.preview-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-size: 13px !important;
  flex: 0 0 auto;
}

.profile-preview-name {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 2px;
  font-family: "Space Grotesk", sans-serif;
}

.profile-preview-bio {
  font-size: 9px;
  opacity: 0.65;
  margin: 0;
  line-height: 1.4;
}

.profile-preview-field-mock {
  height: 30px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: calc(7px * var(--radius-scale, 1));
}

.profile-preview-btn-mock {
  height: 36px;
  background: var(--green-dark);
  border-radius: calc(7px * var(--radius-scale, 1));
  opacity: 0.85;
}

/* Profile form message spacing */
#profile-save-message {
  margin: 0 24px 16px;
  font-size: 11px;
}

@media (max-width: 900px) {


  .profile-preview-panel {
    position: static;
  }
}

@media (max-width: 620px) {
  .profile-card-section {
    padding: 18px 16px;
  }

  .profile-card-divider {
    margin: 0 16px;
  }

  #profile-save-message {
    margin: 0 16px 14px;
  }
}

/* Custom Profile Card backgrounds & segment selector controls */
.bg-type-selector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line);
  border-radius: calc(9px * var(--radius-scale, 1));
  padding: 3px;
  margin-top: 4px;
}

.bg-type-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  background: transparent;
  border: 0;
  border-radius: calc(7px * var(--radius-scale, 1));
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  transition: color 0.2s, background 0.2s;
}

.bg-type-btn.active {
  color: var(--text);
  background: var(--surface-3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.bg-type-btn .material-symbols-rounded {
  font-size: 14px;
}

.bg-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

/* YouTube linking status */
.youtube-link-status {
  font-size: 10px;
  font-weight: 600;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
}

/* Avatar layout and picker overlay */
.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 6px;
}

.profile-avatar-pick {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px dashed transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.2s, background 0.2s;
  flex-shrink: 0;
}

.profile-avatar-pick:hover {
  border-color: var(--green);
  background: rgba(141, 217, 168, 0.03);
}

.profile-avatar-pick.drag-over {
  border-color: #00e5ff;
  background: rgba(0, 229, 255, 0.08);
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #00e5ff;
  font-size: 1.1em;
  vertical-align: middle;
  margin-left: 4px;
  animation: verified-glow 2.5s infinite alternate ease-in-out;
}

@keyframes verified-glow {
  0% {
    filter: drop-shadow(0 0 2px rgba(0, 229, 255, 0.4));
  }

  100% {
    filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.9));
    transform: scale(1.05);
  }
}

.profile-avatar-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-img span {
  font: 700 22px "Space Grotesk";
  color: var(--green);
}

.profile-avatar-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s;
}

.profile-avatar-pick:hover .profile-avatar-overlay {
  opacity: 1;
}

.profile-avatar-actions {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* TTS and Donation Buttons */
.tts-preview-btn {
  background: transparent;
  color: var(--green);
  border: 1px solid rgba(141, 217, 168, 0.25);
  transition: all 0.2s;
}

.tts-preview-btn:hover {
  background: rgba(141, 217, 168, 0.08);
  border-color: var(--green);
}

.donation-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--green);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  flex-shrink: 0;
  margin-left: 8px;
}

.donation-play-btn:hover {
  background: rgba(141, 217, 168, 0.1);
  border-color: var(--green);
  transform: scale(1.08);
}

.donation-play-btn.loading {
  animation: spin 1s linear infinite;
  color: var(--muted);
  cursor: default;
}

.donation-play-btn .material-symbols-rounded {
  font-size: 16px;
}

/* ── Voice Recorder Panel ── */
.voice-recorder-panel {
  background: rgba(17, 18, 20, 0.85);
  border: 1px solid var(--line);
  border-radius: calc(12px * var(--radius-scale, 1));
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.voice-waveform {
  width: 100%;
  max-width: 400px;
  height: 64px;
  border-radius: calc(8px * var(--radius-scale, 1));
  border: 1px solid var(--line);
  background: rgba(17, 18, 20, 0.85);
}

.voice-recorder-time {
  font-family: 'Space Grotesk', monospace;
  font-size: 28px;
  color: var(--green);
  letter-spacing: 2px;
}

.voice-recorder-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.voice-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: calc(10px * var(--radius-scale, 1));
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.voice-btn:hover {
  background: rgba(141, 217, 168, 0.1);
  border-color: var(--green);
}

.voice-btn.record {
  color: #ff5252;
  border-color: rgba(255, 82, 82, 0.4);
}

.voice-btn.record:hover {
  background: rgba(255, 82, 82, 0.1);
}

.voice-btn.stop {
  color: #ffab40;
  border-color: rgba(255, 171, 64, 0.4);
}

.voice-btn .material-symbols-rounded {
  font-size: 18px;
}

.voice-recorder-hint {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin: 0;
}

/* ── Download Audio Button ── */
.donation-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--cyan, #00bcd4);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  flex-shrink: 0;
  margin-left: 4px;
  text-decoration: none;
}

.donation-download-btn:hover {
  background: rgba(0, 188, 212, 0.1);
  border-color: var(--cyan, #00bcd4);
  transform: scale(1.08);
}

.donation-download-btn .material-symbols-rounded {
  font-size: 16px;
}

/* ── Incentive Advanced Filters ── */
.incentive-filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  align-items: flex-end;
}

.incentive-filter-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.incentive-filter-toolbar input,
.incentive-filter-toolbar select {
  height: 34px;
  padding: 0 10px;
  border-radius: calc(8px * var(--radius-scale, 1));
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  min-width: 100px;
}

.incentive-filter-toolbar input[type="text"] {
  min-width: 160px;
}

.incentive-filter-toolbar input[type="date"] {
  min-width: 130px;
}

.incentive-filter-toolbar input[type="number"] {
  min-width: 80px;
  max-width: 100px;
}

.incentive-filter-toolbar select {
  min-width: 140px;
}

.incentive-show-more-row {
  text-align: center;
  padding: 12px;
}

.incentive-show-more-btn {
  padding: 8px 24px;
  border-radius: calc(8px * var(--radius-scale, 1));
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--green);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}

.incentive-show-more-btn:hover {
  background: rgba(141, 217, 168, 0.1);
  border-color: var(--green);
}

/* Keyframes for animated card gradient */
@keyframes animatedCardGradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Modal link preview styling */
.youtube-link-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--line);
  border-radius: calc(9px * var(--radius-scale, 1));
  margin-top: 10px;
}

.youtube-link-preview img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line-strong);
}

/* Supporter Banner */
.supporter-banner {
  margin-bottom: 16px;
  padding: 12px 14px;
  background: rgba(141, 217, 168, 0.08);
  border: 1px solid rgba(141, 217, 168, 0.22);
  border-radius: calc(10px * var(--radius-scale, 1));
  font-size: 11px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}

.supporter-banner a {
  color: var(--green);
  text-decoration: underline;
  font-weight: 700;
  cursor: pointer;
}

/* Incentives, QR analytics and wallet refinements */
.incentive-summary-grid,
.qr-analytics-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.incentive-kpi-card,
.qr-analytics-kpis article {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.incentive-kpi-card>span,
.qr-analytics-kpis span,
.wallet-profit-icon {
  width: 42px;
  height: 42px;
  border-radius: calc(14px * var(--radius-scale, 1));
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(141, 217, 168, 0.15), rgba(66, 180, 112, 0.05));
  color: var(--green);
  box-shadow: 0 4px 12px rgba(66, 180, 112, 0.15);
  border: 1px solid rgba(141, 217, 168, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.qr-analytics-kpis article:hover span {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(66, 180, 112, 0.3);
  border-color: rgba(141, 217, 168, 0.4);
}

.incentive-kpi-card strong,
.qr-analytics-kpis strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(22px, 4vw, 32px);
  color: var(--text);
}

.incentive-kpi-card small,
.qr-analytics-kpis small,
.wallet-profit-banner small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.incentive-kpi-card p,
.wallet-profit-banner p {
  margin: 0;
  color: var(--text-muted);
  font-size: 11px;
}

.incentive-command-grid,
.qr-analytics-panels {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 16px;
}

.feature-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.feature-grid.compact .feature-card {
  min-height: 150px;
  padding: 16px;
}

.transaction-list.mini {
  max-height: 340px;
  overflow: auto;
}

.incentive-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: 16px;
  margin-bottom: 16px;
}

.incentive-hero-panel {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(20px, 3vw, 30px);
  overflow: hidden;
}

.incentive-hero-copy {
  max-width: 660px;
}

.incentive-hero-copy h2 {
  margin: 8px 0;
  max-width: 560px;
  font: 800 clamp(26px, 4.4vw, 48px) / .98 "Space Grotesk", sans-serif;
  letter-spacing: -.04em;
}

.incentive-hero-copy p {
  margin: 0;
  max-width: 560px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.incentive-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.incentive-hero-pills span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: calc(999px * var(--radius-scale, 1));
  background: rgba(255, 255, 255, .045);
  color: #d7e0df;
  font-size: 11px;
  font-weight: 800;
}

.incentive-hero-pills .material-symbols-rounded {
  color: var(--green);
  font-size: 16px;
}

.incentive-health {
  width: clamp(118px, 16vw, 158px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    conic-gradient(var(--green) var(--progress), rgba(255, 255, 255, .08) 0),
    rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px var(--line);
}

.incentive-health>div {
  width: calc(100% - 20px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border-radius: 50%;
  background: var(--surface);
  text-align: center;
}

.incentive-health strong {
  font: 800 clamp(22px, 4vw, 34px) "Space Grotesk", sans-serif;
  color: var(--text);
}

.incentive-health small,
.incentive-next-card small,
.incentive-status-card small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.incentive-next-card {
  display: grid;
  align-content: space-between;
  gap: 18px;
  padding: 20px;
}

.incentive-next-card>span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: calc(15px * var(--radius-scale, 1));
  background: rgba(0, 212, 223, .13);
  color: var(--green);
}

.incentive-next-card strong {
  display: block;
  margin-top: 6px;
  font: 800 18px "Space Grotesk", sans-serif;
}

.incentive-next-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.incentive-summary-grid.refined {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.incentive-summary-grid.refined .incentive-kpi-card {
  min-height: 156px;
  padding: 18px;
  border-color: rgba(255, 255, 255, .075);
}

.incentive-kpi-card.strong,
.incentive-kpi-card.accent {
  background: var(--surface-2);
}

.incentive-kpi-card.accent strong {
  color: var(--green);
}

.incentive-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, .55fr);
  gap: 16px;
  align-items: start;
}

.incentive-feed-panel {
  min-width: 0;
}

.incentive-feed-head {
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
}

.incentive-filter-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: calc(999px * var(--radius-scale, 1));
  background: rgba(255, 255, 255, .035);
}

.incentive-filter-tabs button {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: calc(999px * var(--radius-scale, 1));
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.incentive-filter-tabs button.active {
  background: var(--green-dark);
  color: #efffff;
}

.incentive-live-list {
  max-height: 610px;
  overflow: auto;
  padding-top: 8px;
}

.incentive-live-list .transaction {
  padding: 13px 4px;
}

.incentive-live-list .empty-state {
  min-height: 340px;
}

.incentive-side-stack {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.incentive-status-panel,
.incentive-actions-panel {
  overflow: hidden;
}

.incentive-status-cards {
  display: grid;
  gap: 10px;
  padding: 0 17px 17px;
}

.incentive-status-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: calc(15px * var(--radius-scale, 1));
  background: rgba(255, 255, 255, .035);
}

.incentive-status-card>span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: calc(13px * var(--radius-scale, 1));
  background: rgba(255, 255, 255, .06);
  color: var(--green);
}

.incentive-status-card strong {
  display: block;
  margin: 3px 0 1px;
  font: 800 19px "Space Grotesk", sans-serif;
}

.incentive-status-card p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.incentive-status-card.done {
  border-color: rgba(0, 212, 223, .24);
}

.incentive-status-card.pending>span {
  color: var(--warning);
}

.incentive-status-card.rejected>span {
  color: var(--danger);
}

.incentive-total-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-radius: calc(14px * var(--radius-scale, 1));
  background: #0d2f31;
  color: #eaffff;
}

.incentive-total-strip span {
  color: #a8d6d6;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.incentive-total-strip strong {
  font: 800 17px "Space Grotesk", sans-serif;
}

.incentive-action-list {
  display: grid;
  gap: 8px;
  padding: 0 17px 17px;
}

.incentive-action-list button {
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: calc(15px * var(--radius-scale, 1));
  background: rgba(255, 255, 255, .035);
  color: var(--text);
  text-align: left;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.incentive-action-list button:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 212, 223, .22);
  background: rgba(0, 212, 223, .07);
}

.incentive-action-list button>.material-symbols-rounded {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: calc(12px * var(--radius-scale, 1));
  background: rgba(0, 212, 223, .11);
  color: var(--green);
}

.incentive-action-list strong,
.incentive-action-list small {
  display: block;
}

.incentive-action-list strong {
  font-size: 12px;
}

.incentive-action-list small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

@media (max-width: 1100px) {
  .incentive-summary-grid.refined {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .incentive-hero-grid,
  .incentive-main-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 740px) {
  .incentive-hero-panel {
    flex-direction: column;
    align-items: flex-start;
  }

  .incentive-health {
    width: 124px;
  }

  .incentive-side-stack,
  .incentive-summary-grid.refined {
    grid-template-columns: 1fr;
  }

  .incentive-feed-head {
    display: grid;
    align-items: start;
  }

  .incentive-filter-tabs {
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    border-radius: calc(14px * var(--radius-scale, 1));
  }

  .incentive-filter-tabs button {
    flex: 1 0 auto;
  }

  .incentive-live-list {
    max-height: none;
  }
}

@media (max-width: 520px) {

  .incentive-hero-panel,
  .incentive-next-card,
  .incentive-summary-grid.refined .incentive-kpi-card {
    padding: 16px;
  }

  .incentive-hero-copy h2 {
    font-size: 28px;
  }

  .incentive-hero-pills span {
    width: 100%;
    justify-content: center;
  }
}

/* Incentives page v2 */
.incentives-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, .42fr);
  gap: 14px;
  margin-bottom: 14px;
}

.incentives-revenue-card {
  min-height: 0;
  padding: clamp(19px, 2.6vw, 26px);
  display: grid;
  gap: 18px;
  background: #111414;
  border-color: rgba(255, 255, 255, .09);
}

.incentives-card-top,
.incentives-live-row,
.incentive-total-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.incentives-revenue-main strong {
  display: block;
  font: 800 clamp(38px, 6vw, 66px) / .94 "Space Grotesk", sans-serif;
  letter-spacing: -.06em;
  color: var(--text);
}

.incentives-revenue-main p {
  max-width: 580px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.incentives-progress-line {
  height: 9px;
  overflow: hidden;
  border-radius: calc(999px * var(--radius-scale, 1));
  background: rgba(255, 255, 255, .07);
}

.incentives-progress-line i {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: inherit;
  background: var(--green);
}

.incentives-live-row {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.incentives-live-row span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: calc(999px * var(--radius-scale, 1));
  background: rgba(255, 255, 255, .035);
  color: #c8d7d7;
  font-size: 10px;
  font-weight: 800;
}

.incentives-live-row .material-symbols-rounded {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  overflow: hidden;
  color: var(--green);
  font-size: 15px;
}

.incentives-metric-grid {
  display: grid;
  gap: 10px;
}

.incentive-kpi-card.compact {
  min-height: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 3px 10px;
  padding: 14px;
  background: #121616;
  border-color: rgba(255, 255, 255, .08);
}

.incentive-kpi-card.compact>span {
  grid-row: 1 / 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: calc(13px * var(--radius-scale, 1));
  background: rgba(0, 212, 223, .11);
}

.incentive-kpi-card.compact>span .material-symbols-rounded {
  width: 22px;
  height: 22px;
  color: var(--green);
  font-size: 22px;
}

.incentive-kpi-card.compact small {
  grid-column: 2;
  color: #8da1a1;
}

.incentive-kpi-card.compact strong {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  font-size: clamp(22px, 3vw, 30px);
  text-align: right;
}

.incentive-kpi-card.compact p {
  grid-column: 2;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.incentives-ops-strip {
  display: grid;
  grid-template-columns: minmax(220px, .55fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
  padding: 16px 18px;
  background: #111414;
}

.incentives-ops-copy h3 {
  margin: 5px 0 3px;
  font: 800 15px "Space Grotesk", sans-serif;
}

.incentives-ops-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.incentives-ops-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.incentives-ops-actions button {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: calc(14px * var(--radius-scale, 1));
  background: rgba(255, 255, 255, .035);
  color: #dce8e8;
  font-size: 11px;
  font-weight: 800;
}

.incentives-ops-actions button:hover {
  border-color: rgba(0, 212, 223, .28);
  background: rgba(0, 212, 223, .07);
}

.incentives-ops-actions .material-symbols-rounded {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  overflow: hidden;
  color: var(--green);
}

.incentive-main-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .55fr);
  gap: 14px;
}

.incentive-feed-panel,
.incentive-status-panel,
.incentive-actions-panel {
  background: #111414;
  border-color: rgba(255, 255, 255, .085);
}

.incentive-feed-head {
  align-items: center;
  padding: 16px 18px 13px;
}

.incentive-feed-head h3,
.incentive-status-panel .panel-head h3,
.incentive-actions-panel .panel-head h3 {
  font-size: 14px;
}

.incentive-filter-tabs {
  border-radius: calc(13px * var(--radius-scale, 1));
  background: #0d1111;
}

.incentive-filter-tabs button {
  min-height: 30px;
  padding-inline: 11px;
  font-size: 10px;
}

.incentive-filter-tabs button.active {
  background: #0c969c;
}

.incentive-live-list {
  max-height: 520px;
  padding: 8px 14px 14px;
}

.incentive-live-list .transaction {
  padding: 12px 6px;
  border-radius: calc(12px * var(--radius-scale, 1));
}

.incentive-live-list .empty-state {
  min-height: 285px;
}

.incentive-side-stack {
  gap: 14px;
}

.incentive-status-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 14px 14px;
}

.incentive-status-card {
  min-height: 86px;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: start;
  padding: 12px;
  border-radius: calc(14px * var(--radius-scale, 1));
  background: rgba(255, 255, 255, .032);
}

.incentive-status-card>span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: calc(11px * var(--radius-scale, 1));
  background: rgba(0, 212, 223, .1);
}

.incentive-status-card>span .material-symbols-rounded {
  width: 20px;
  height: 20px;
  color: var(--green);
  font-size: 20px;
}

.incentive-status-card strong {
  margin: 2px 0 0;
  font-size: 18px;
}

.incentive-status-card p {
  margin-top: 2px;
  font-size: 10px;
}

.incentive-total-strip {
  grid-column: 1 / -1;
  padding: 12px;
  border: 1px solid rgba(0, 212, 223, .16);
  background: #0b3335;
}

.incentive-action-list {
  gap: 7px;
  padding: 0 14px 14px;
}

.incentive-action-list button {
  min-height: 58px;
  grid-template-columns: 32px 1fr;
  padding: 9px 10px;
  border-radius: calc(13px * var(--radius-scale, 1));
}

.incentive-action-list button>.material-symbols-rounded {
  width: 32px;
  height: 32px;
  border-radius: calc(11px * var(--radius-scale, 1));
}

@media (max-width: 1180px) {

  .incentives-overview-grid,
  .incentive-main-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 860px) {
  .incentives-ops-strip {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 620px) {

  .incentives-metric-grid,
  .incentive-status-cards {
    grid-template-columns: 1fr;
  }

  .incentives-card-top,
  .incentives-live-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .incentive-kpi-card.compact {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .incentive-kpi-card.compact strong {
    grid-column: 2;
    grid-row: auto;
    text-align: left;
  }
}

@media (max-width: 460px) {
  .incentives-ops-actions {
    grid-template-columns: 1fr;
  }
}

.qr-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.qr-feature-card.highlight {
  border-color: rgba(141, 217, 168, .35);
  box-shadow: 0 18px 44px rgba(66, 180, 112, .12);
}

.qr-analytics-dashboard {
  min-width: min(860px, 82vw);
}

.qr-analytics-highlight {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.qr-analytics-highlight .panel,
.wallet-profit-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(141, 217, 168, 0.02);
  border: 1px solid rgba(141, 217, 168, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 8px 24px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.qr-analytics-highlight .panel:hover {
  transform: translateY(-2px);
  border-color: rgba(141, 217, 168, 0.3);
}

.qr-analytics-highlight strong,
.wallet-profit-banner strong {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 20px;
  background: linear-gradient(90deg, #00f2fe, var(--green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 10px rgba(0, 242, 254, 0.2);
}

.qr-bars {
  height: 210px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(22px, 1fr);
  align-items: end;
  gap: 6px;
  overflow-x: auto;
  padding: 18px 2px 4px;
}

.weekday-bars {
  grid-auto-columns: minmax(44px, 1fr);
}

.qr-bar-item {
  height: 100%;
  min-width: 22px;
  display: grid;
  grid-template-rows: 20px 1fr 18px;
  align-items: end;
  text-align: center;
  gap: 6px;
}

.qr-bar-item i {
  width: 100%;
  min-height: 6px;
  border-radius: calc(999px * var(--radius-scale, 1)) calc(999px * var(--radius-scale, 1)) calc(6px * var(--radius-scale, 1)) calc(6px * var(--radius-scale, 1));
  background: linear-gradient(180deg, #00f2fe, var(--green));
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.3), inset 0 0 8px rgba(255,255,255,0.2);
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.qr-bar-item:hover i {
  filter: brightness(1.2);
  box-shadow: 0 0 25px rgba(0, 242, 254, 0.6), inset 0 0 12px rgba(255,255,255,0.4);
}

.qr-bar-item b,
.qr-bar-value,
.qr-recent-row small {
  font-size: 9px;
  color: var(--muted);
}

.qr-bar-value {
  transform: rotate(-28deg);
  white-space: nowrap;
  transform-origin: center;
}

.qr-recent-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.qr-recent-row:last-child {
  border-bottom: 0;
}

.wallet-profit-banner {
  margin-bottom: 16px;
  border-color: rgba(141, 217, 168, .28);
  background: linear-gradient(135deg, rgba(141, 217, 168, .12), rgba(255, 255, 255, .03));
}

.wallet-profit-banner.muted {
  opacity: .78;
}

/* Marketplace Grids */
.marketplace-shell {
  display: grid;
  gap: 16px;
}

.marketplace-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: calc(14px * var(--radius-scale, 1));
  background: rgba(255, 255, 255, .035);
}

.marketplace-tabs button {
  min-height: 44px;
  border: 0;
  border-radius: calc(10px * var(--radius-scale, 1));
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  cursor: pointer;
}

.marketplace-tabs button.active {
  background: rgba(141, 217, 168, .14);
  color: var(--text);
}

.marketplace-pane {
  display: grid;
  gap: 16px;
}

.marketplace-intro-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.marketplace-intro-card h3 {
  margin: 4px 0;
}

.marketplace-intro-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 11px;
}

.marketplace-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: clamp(16px, 2vw, 22px);
  background: #111414;
  border-color: rgba(255, 255, 255, .09);
}

.marketplace-hero-copy {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.marketplace-hero-copy h3 {
  margin: 0;
  font: 800 clamp(20px, 2.4vw, 30px) / 1 "Space Grotesk", sans-serif;
  letter-spacing: -.04em;
}

.marketplace-hero-copy p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.marketplace-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.marketplace-count-pill {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid rgba(0, 212, 223, .18);
  border-radius: calc(999px * var(--radius-scale, 1));
  background: rgba(0, 212, 223, .07);
  color: #bdeff1;
  font-size: 10px;
  font-weight: 800;
}

.marketplace-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(150px, .22fr) minmax(150px, .22fr);
  gap: 10px;
  align-items: center;
}

.marketplace-search-field,
.marketplace-toolbar select {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: calc(12px * var(--radius-scale, 1));
  background: #101414;
  color: var(--text);
}

.marketplace-search-field {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  overflow: hidden;
}

.marketplace-search-field .material-symbols-rounded {
  color: var(--muted);
}

.marketplace-search-field input {
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 11px;
}

.marketplace-toolbar select {
  width: 100%;
  padding: 0 12px;
  font-size: 11px;
}

.marketplace-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.marketplace-product-card {
  min-width: 0;
  min-height: 100%;
  display: grid;
  grid-template-rows: 154px minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .085);
  border-radius: calc(16px * var(--radius-scale, 1));
  background: #111414;
  transition: transform .18s, border-color .18s, background .18s;
}

.marketplace-product-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 212, 223, .22);
  background: #131818;
}

.marketplace-product-media {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0c1010;
  border-bottom: 1px solid var(--line);
}

.marketplace-product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.marketplace-product-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 212, 223, .18);
  border-radius: calc(18px * var(--radius-scale, 1));
  background: rgba(0, 212, 223, .08);
  color: var(--green);
}

.marketplace-product-icon .material-symbols-rounded {
  font-size: 31px;
}

.marketplace-product-chip {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 8px;
  border-radius: calc(999px * var(--radius-scale, 1));
  background: rgba(7, 9, 8, .74);
  color: #dff8f8;
  font-size: 9px;
  font-weight: 900;
  backdrop-filter: blur(8px);
}

.marketplace-product-chip.draft {
  color: #f4d39a;
  border: 1px solid rgba(199, 165, 106, .28);
}

.marketplace-product-chip.active {
  color: #bdeff1;
  border: 1px solid rgba(0, 212, 223, .24);
}

.marketplace-product-body {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.marketplace-product-title-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.marketplace-product-title-row h4 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font: 800 14px / 1.25 "Space Grotesk", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketplace-product-title-row strong {
  color: var(--green);
  font: 800 14px / 1 "Space Grotesk", sans-serif;
  white-space: nowrap;
}

.marketplace-product-body p {
  min-height: 40px;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.marketplace-product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.marketplace-product-meta span {
  max-width: 100%;
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: calc(999px * var(--radius-scale, 1));
  background: rgba(255, 255, 255, .032);
  color: #b9c7c7;
  font-size: 9px;
  font-weight: 800;
}

.marketplace-product-meta .material-symbols-rounded {
  width: 14px;
  height: 14px;
  overflow: hidden;
  color: var(--green);
  font-size: 14px;
}

.marketplace-product-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 14px 14px;
}

.marketplace-product-actions .button {
  min-width: 0;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: calc(11px * var(--radius-scale, 1));
}

.marketplace-store-copy {
  min-width: 0;
}

.marketplace-store-copy small {
  color: var(--muted);
  font-size: 10px;
}

.marketplace-store-footer {
  width: 100%;
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.marketplace-store-card .store-avatar-fallback {
  display: grid;
  place-items: center;
  background: rgba(0, 212, 223, .1);
  color: var(--green);
  font-weight: 900;
}

.marketplace-stores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 15px;
}

.marketplace-store-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(12px * var(--radius-scale, 1));
  padding: 16px;
  text-align: center;
  transition: transform 0.2s, border-color 0.2s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.marketplace-store-card:hover {
  transform: translateY(-2px);
  border-color: rgba(141, 217, 168, 0.4);
  background: var(--surface-2);
}

.marketplace-store-card .store-avatar {
  width: 64px;
  height: 64px;
  border-radius: calc(16px * var(--radius-scale, 1));
  object-fit: cover;
  border: 2px solid var(--line-strong);
  margin-bottom: 10px;
}

.marketplace-store-card h4 {
  margin: 5px 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 14px;
}

.marketplace-store-card p {
  color: var(--muted);
  font-size: 10px;
  margin: 0 0 10px;
  line-height: 1.4;
  height: 2.8em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.marketplace-store-card .product-badge {
  background: rgba(141, 217, 168, 0.1);
  color: var(--green);
  padding: 4px 8px;
  border-radius: calc(20px * var(--radius-scale, 1));
  font-size: 9px;
  font-weight: 700;
}

@media (max-width: 980px) {

  .marketplace-hero-card,
  .marketplace-toolbar {
    grid-template-columns: 1fr;
  }

  .marketplace-hero-actions {
    justify-content: stretch;
  }

  .marketplace-hero-actions .button {
    width: 100%;
  }
}

@media (max-width: 620px) {

  .marketplace-products-grid,
  .marketplace-stores-grid {
    grid-template-columns: 1fr;
  }

  .marketplace-product-card {
    grid-template-rows: 132px minmax(0, 1fr) auto;
  }

  .marketplace-product-title-row,
  .marketplace-product-actions {
    grid-template-columns: 1fr;
  }

  .marketplace-product-title-row strong {
    justify-self: start;
  }
}

/* Storefront layout */
.storefront-header {
  padding: 20px;
  border-radius: calc(16px * var(--radius-scale, 1));
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.storefront-header-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
}

.storefront-header-content img {
  width: 70px;
  height: 70px;
  border-radius: calc(16px * var(--radius-scale, 1));
  border: 2px solid var(--text);
  object-fit: cover;
}

.storefront-header-text h2 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 20px;
}

.storefront-header-text p {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--muted);
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.catalog-item-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(12px * var(--radius-scale, 1));
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
}

.catalog-item-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
}

.catalog-item-thumb {
  width: 100%;
  height: 140px;
  object-fit: cover;
  background: #151a16;
  border-bottom: 1px solid var(--line);
}

.catalog-item-info {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.catalog-item-info h4 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-item-price {
  font-family: "Space Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 8px;
}

.catalog-item-badge {
  font-size: 8px;
  padding: 2px 6px;
  border-radius: calc(4px * var(--radius-scale, 1));
  background: rgba(255, 255, 255, 0.08);
  width: fit-content;
  margin-top: auto;
  text-transform: uppercase;
}

/* Product Detail Views */
.product-detail-layout {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 20px;
  margin-top: 10px;
}

.product-gallery-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-main-img {
  width: 100%;
  height: 320px;
  object-fit: contain;
  background: #111512;
  border: 1px solid var(--line);
  border-radius: calc(12px * var(--radius-scale, 1));
}

.product-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 5px;
}

.product-thumb {
  width: 60px;
  height: 60px;
  border-radius: calc(8px * var(--radius-scale, 1));
  object-fit: cover;
  border: 1px solid var(--line);
  cursor: pointer;
  background: #151a16;
}

.product-thumb.active {
  border-color: var(--green);
}

.product-info-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.product-info-box h2 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 22px;
}

.product-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-price-row .price {
  font-family: "Space Grotesk", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--green);
}

.product-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  white-space: pre-wrap;
  background: var(--surface);
  padding: 12px;
  border-radius: calc(8px * var(--radius-scale, 1));
  border: 1px solid var(--line);
  max-height: 200px;
  overflow-y: auto;
}

/* Color & Size Selectors */
.option-selectors {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
}

.color-dots-row {
  display: flex;
  gap: 8px;
}

.color-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s;
}

.color-dot.active {
  border-color: var(--text);
  transform: scale(1.1);
}

.size-tags-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.size-tag {
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(6px * var(--radius-scale, 1));
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.size-tag.active {
  background: var(--green-dark);
  border-color: var(--green);
  color: #fff;
}

/* Shipping CEP panel */
.cep-calc-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: calc(8px * var(--radius-scale, 1));
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cep-calc-row {
  display: flex;
  gap: 8px;
}

.cep-calc-row input {
  flex: 1;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: calc(6px * var(--radius-scale, 1));
  color: var(--text);
  font-size: 11px;
}

.cep-result-msg {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4;
}

/* Invoice Presentation / Receipt */
.invoice-card {
  background: #fff;
  color: #000;
  border-radius: calc(12px * var(--radius-scale, 1));
  padding: 24px;
  margin-top: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  font-family: monospace;
  position: relative;
}

.invoice-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #50c878, #3b8c54);
  border-radius: calc(12px * var(--radius-scale, 1)) calc(12px * var(--radius-scale, 1)) 0 0;
}

.invoice-header {
  border-bottom: 2px dashed #ccc;
  padding-bottom: 12px;
  margin-bottom: 12px;
  text-align: center;
}

.invoice-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
}

.invoice-header p {
  margin: 4px 0 0;
  font-size: 10px;
  color: #666;
}

.invoice-body {
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.invoice-row {
  display: flex;
  justify-content: space-between;
}

.invoice-row.total {
  border-top: 2px dashed #ccc;
  padding-top: 10px;
  font-weight: 700;
  font-size: 13px;
  margin-top: 6px;
}

.invoice-stamp {
  position: absolute;
  bottom: 20px;
  right: 20px;
  border: 3px double #d9534f;
  color: #d9534f;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  transform: rotate(-10deg);
  border-radius: calc(4px * var(--radius-scale, 1));
  text-transform: uppercase;
}

/* Video Wrapper */
.video-preview-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: calc(8px * var(--radius-scale, 1));
  overflow: hidden;
  margin-top: 8px;
}

.video-preview-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Star rating input */
.rating-stars {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 10px 0;
}

.rating-star {
  font-size: 28px;
  color: var(--muted-2);
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
}

.rating-star:hover,
.rating-star.active {
  color: var(--warning);
  transform: scale(1.15);
}

/* Custom Settings Warning Card */
.settings-price-warning {
  padding: 10px 12px;
  background: rgba(223, 125, 133, 0.08);
  border: 1px solid rgba(223, 125, 133, 0.25);
  border-radius: calc(8px * var(--radius-scale, 1));
  color: var(--danger);
  font-size: 10px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 768px) {
  .product-detail-layout {
    grid-template-columns: 1fr;
  }
}

/* 3D Glassmorphism QR Card Styles */
.qr-card-container {
  perspective: 1000px;
  width: 100%;
  max-width: 290px;
  margin: 25px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.qr-glass-card {
  position: relative;
  width: 100%;
  height: 360px;
  background: rgba(16, 21, 17, 0.55);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(141, 217, 168, 0.2);
  border-radius: calc(24px * var(--radius-scale, 1));
  padding: 24px;
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 30px rgba(141, 217, 168, 0.05);
  transform-style: preserve-3d;
  transition: transform 0.1s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.qr-glass-card:hover {
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(141, 217, 168, 0.15);
}

.qr-card-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  transition: background 0.1s ease;
}

.qr-card-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateZ(30px);
  transform-style: preserve-3d;
}

.qr-card-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateZ(40px);
}

.qr-card-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.qr-card-brand span {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.qr-card-brand span span {
  color: var(--green);
}

.qr-card-frame {
  align-self: center;
  width: 160px;
  height: 160px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(141, 217, 168, 0.15);
  border-radius: calc(18px * var(--radius-scale, 1));
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateZ(50px);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

.qr-card-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: calc(12px * var(--radius-scale, 1));
  filter: contrast(110%);
}

.qr-card-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transform: translateZ(35px);
}

.qr-card-invite-code {
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
}

.qr-card-invite-code strong {
  color: var(--green);
  font-size: 13px;
}

.qr-card-destination {
  font-family: monospace;
  font-size: 9px;
  color: var(--muted-2);
  background: rgba(0, 0, 0, 0.2);
  padding: 3px 8px;
  border-radius: calc(6px * var(--radius-scale, 1));
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Playground Page & Customizer Layout */
.playground-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 20px;
}

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

.playground-preview-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at center, rgba(141, 217, 168, 0.04), transparent), rgba(0, 0, 0, 0.2);
  border: 1px dashed var(--line);
  border-radius: calc(18px * var(--radius-scale, 1));
  padding: 40px 20px;
  min-height: 480px;
}

/* live customized card wrapping container */
.live-qr-card-wrapper {
  perspective: 1000px;
  width: 100%;
  max-width: 290px;
}

.obs-scene-widget {
  position: relative;
  width: 1280px;
  height: 720px;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
}

.obs-scene-widget.is-preview {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 255, 255, .08);
  background:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    rgba(0, 0, 0, .18);
  background-size: 40px 40px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .32);
}

.obs-widget-body .obs-scene-widget {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
}

.obs-scene-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: var(--obs-scene-bg-opacity, .8);
}

.obs-scene-bg-solid {
  background: var(--obs-scene-bg, #05070d);
}

.obs-scene-bg-image {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, .34)),
    var(--obs-scene-bg-image) center / cover no-repeat,
    var(--obs-scene-bg, #05070d);
}

.obs-scene-bg-abstract {
  background:
    radial-gradient(circle at 18% 22%, rgba(45, 108, 223, .42), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(255, 213, 35, .32), transparent 34%),
    linear-gradient(135deg, var(--obs-scene-bg, #05070d), #030409 56%, #061329);
  background:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--obs-scene-accent-a, #2d6cdf) 58%, transparent), transparent 30%),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--obs-scene-accent-b, #ffd523) 46%, transparent), transparent 34%),
    linear-gradient(135deg, var(--obs-scene-bg, #05070d), #030409 56%, color-mix(in srgb, var(--obs-scene-accent-a, #2d6cdf) 18%, #02030a));
}

.obs-scene-bg-mesh,
.obs-scene-bg-grid,
.obs-scene-bg-orbits,
.obs-scene-bg-nodes {
  position: absolute;
  inset: -12%;
}

.obs-scene-bg-mesh {
  background:
    conic-gradient(from 120deg at 35% 55%, transparent 0 18%, rgba(45, 108, 223, .22) 26%, transparent 38% 100%),
    radial-gradient(ellipse at 70% 62%, rgba(255, 213, 35, .16), transparent 42%),
    repeating-linear-gradient(118deg, rgba(255,255,255,.08) 0 1px, transparent 1px 72px);
  background:
    conic-gradient(from 120deg at 35% 55%, transparent 0 18%, color-mix(in srgb, var(--obs-scene-accent-a, #2d6cdf) 30%, transparent) 26%, transparent 38% 100%),
    radial-gradient(ellipse at 70% 62%, color-mix(in srgb, var(--obs-scene-accent-b, #ffd523) 22%, transparent), transparent 42%),
    repeating-linear-gradient(118deg, rgba(255,255,255,.08) 0 1px, transparent 1px 72px);
  filter: blur(.2px) saturate(1.12);
  animation: obsSceneMeshDrift var(--obs-scene-motion, 56s) linear infinite;
}

.obs-scene-bg-grid {
  background:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(60deg, transparent 0 48%, rgba(255,255,255,.06) 49% 51%, transparent 52% 100%);
  background-size: 96px 96px, 96px 96px, 180px 180px;
  mask-image: radial-gradient(ellipse at center, #000 0 62%, transparent 86%);
  opacity: .42;
  animation: obsSceneGridSlide var(--obs-scene-motion, 56s) linear infinite;
}

.obs-scene-bg-orbits i {
  position: absolute;
  border: 1px solid rgba(45, 108, 223, .34);
  border: 1px solid color-mix(in srgb, var(--obs-scene-accent-a, #2d6cdf) 42%, transparent);
  border-radius: 999px;
  box-shadow: inset 0 0 28px rgba(255,255,255,.035), 0 0 42px rgba(45, 108, 223, .14);
  box-shadow: inset 0 0 28px rgba(255,255,255,.035), 0 0 42px color-mix(in srgb, var(--obs-scene-accent-a, #2d6cdf) 18%, transparent);
  transform-origin: center;
  animation: obsSceneOrbit var(--obs-scene-motion, 56s) linear infinite;
}

.obs-scene-bg-orbits i:nth-child(1) {
  width: 520px;
  height: 210px;
  left: 10%;
  top: 16%;
  transform: rotate(-18deg);
}

.obs-scene-bg-orbits i:nth-child(2) {
  width: 760px;
  height: 310px;
  right: -8%;
  top: 26%;
  border-color: color-mix(in srgb, var(--obs-scene-accent-b, #ffd523) 34%, transparent);
  animation-direction: reverse;
}

.obs-scene-bg-orbits i:nth-child(3) {
  width: 420px;
  height: 420px;
  left: 42%;
  bottom: -16%;
  opacity: .58;
}

.obs-scene-bg-nodes i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 18px #fff, 0 0 42px var(--obs-scene-accent-b, #ffd523);
  opacity: .68;
  animation: obsSceneNodePulse 9s ease-in-out infinite;
}

.obs-scene-bg-nodes i:nth-child(1) { left: 16%; top: 28%; animation-delay: -2s; }
.obs-scene-bg-nodes i:nth-child(2) { left: 31%; top: 62%; animation-delay: -5s; }
.obs-scene-bg-nodes i:nth-child(3) { left: 54%; top: 34%; animation-delay: -9s; }
.obs-scene-bg-nodes i:nth-child(4) { left: 72%; top: 68%; animation-delay: -13s; }
.obs-scene-bg-nodes i:nth-child(5) { left: 84%; top: 24%; animation-delay: -17s; }
.obs-scene-bg-nodes i:nth-child(6) { left: 44%; top: 82%; animation-delay: -21s; }

.obs-scene-bg-abstract.is-blueprint {
  background:
    radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--obs-scene-accent-a, #2d6cdf) 36%, transparent), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--obs-scene-bg, #05070d) 82%, #071d38), #020913);
}

.obs-scene-bg-abstract.is-blueprint .obs-scene-bg-mesh {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.075) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.075) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(45deg, transparent 0 54px, color-mix(in srgb, var(--obs-scene-accent-a, #2d6cdf) 18%, transparent) 55px 56px, transparent 57px 112px);
}

.obs-scene-bg-abstract.is-orbit .obs-scene-bg-grid {
  opacity: .22;
  background-size: 140px 140px, 140px 140px, 220px 220px;
}

.obs-scene-bg-abstract.is-stadium {
  background:
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--obs-scene-accent-b, #ffd523) 24%, transparent), transparent 34%),
    radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--obs-scene-accent-a, #2d6cdf) 48%, transparent), transparent 28%),
    linear-gradient(180deg, #030406, var(--obs-scene-bg, #05070d));
}

.obs-scene-logo {
  position: absolute;
  z-index: 3;
  left: var(--obs-logo-x, 48px);
  top: var(--obs-logo-y, 42px);
  width: var(--obs-logo-size, 128px);
  max-height: calc(var(--obs-logo-size, 128px) * 1.4);
  object-fit: contain;
  opacity: var(--obs-logo-opacity, 1);
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .45));
  animation: obsSceneLogoFloat 11s ease-in-out infinite;
  pointer-events: none;
}

.obs-scene-widget.is-preview .obs-scene-logo {
  pointer-events: auto;
  cursor: grab;
}

.obs-scene-sidebar,
.obs-scene-footer {
  position: absolute;
  z-index: 2;
  background: var(--obs-panel-color, #0d1117);
  opacity: var(--obs-panel-opacity, .92);
  box-shadow: 0 18px 54px rgba(0, 0, 0, .34);
  will-change: transform, opacity;
  color: var(--obs-part-text, #fff);
}

.obs-scene-sidebar {
  top: 0;
  bottom: 0;
  width: var(--obs-sidebar-width, 220px);
}

.obs-scene-widget.is-preview .obs-scene-sidebar {
  width: var(--obs-sidebar-width-preview, 17.188%);
}

.obs-scene-sidebar.is-left {
  left: 0;
  animation: obsSceneSidebarLeftIn var(--obs-layout-speed, 900ms) cubic-bezier(.16, 1, .3, 1) both;
}

.obs-scene-sidebar.is-right {
  right: 0;
  animation: obsSceneSidebarRightIn var(--obs-layout-speed, 900ms) cubic-bezier(.16, 1, .3, 1) both;
}

.obs-scene-footer {
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--obs-footer-height, 96px);
  animation: obsSceneFooterIn var(--obs-layout-speed, 900ms) cubic-bezier(.16, 1, .3, 1) both;
}

.obs-scene-widget.is-preview .obs-scene-footer {
  height: var(--obs-footer-height-preview, 13.333%);
}

.obs-scene-panel-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: var(--obs-panel-bg-opacity, 1);
  background: var(--obs-panel-bg, transparent);
}

.obs-scene-panel-bg.is-image {
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.38)),
    var(--obs-panel-bg-image) center / cover no-repeat,
    var(--obs-panel-bg, #05070d);
}

.obs-scene-panel-bg.is-solid {
  background: var(--obs-panel-bg, #05070d);
}

.obs-scene-panel-bg.is-abstract {
  background:
    radial-gradient(circle at 16% 24%, rgba(45, 108, 223, .44), transparent 30%),
    radial-gradient(circle at 84% 16%, rgba(255, 213, 35, .26), transparent 34%),
    linear-gradient(135deg, var(--obs-panel-bg, #071327), #03040a 68%);
  background:
    radial-gradient(circle at 16% 24%, color-mix(in srgb, var(--obs-panel-accent-a, #2d6cdf) 52%, transparent), transparent 30%),
    radial-gradient(circle at 84% 16%, color-mix(in srgb, var(--obs-panel-accent-b, #ffd523) 34%, transparent), transparent 34%),
    linear-gradient(135deg, var(--obs-panel-bg, #071327), #03040a 68%);
}

.obs-scene-panel-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .52));
}

.obs-scene-panel-mesh,
.obs-scene-panel-grid,
.obs-scene-panel-orbits,
.obs-scene-panel-nodes {
  position: absolute;
  inset: -22%;
}

.obs-scene-panel-mesh {
  background:
    conic-gradient(from 90deg at 36% 54%, transparent 0 20%, rgba(45, 108, 223, .2) 27%, transparent 40% 100%),
    repeating-linear-gradient(118deg, rgba(255,255,255,.09) 0 1px, transparent 1px 54px);
  background:
    conic-gradient(from 90deg at 36% 54%, transparent 0 20%, color-mix(in srgb, var(--obs-panel-accent-a, #2d6cdf) 28%, transparent) 27%, transparent 40% 100%),
    repeating-linear-gradient(118deg, rgba(255,255,255,.09) 0 1px, transparent 1px 54px);
  animation: obsSceneMeshDrift var(--obs-panel-motion, 56s) linear infinite;
}

.obs-scene-panel-grid {
  background:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(60deg, transparent 0 48%, rgba(255,255,255,.06) 49% 51%, transparent 52% 100%);
  background-size: 54px 54px, 54px 54px, 132px 132px;
  opacity: .42;
  animation: obsSceneGridSlide var(--obs-panel-motion, 56s) linear infinite;
}

.obs-scene-panel-orbits i {
  position: absolute;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  box-shadow: 0 0 28px color-mix(in srgb, var(--obs-panel-accent-a, #2d6cdf) 18%, transparent);
  animation: obsSceneOrbit var(--obs-panel-motion, 56s) linear infinite;
}

.obs-scene-panel-orbits i:nth-child(1) { width: 46%; height: 54%; left: 6%; top: 14%; transform: rotate(-12deg); }
.obs-scene-panel-orbits i:nth-child(2) { width: 64%; height: 76%; right: -18%; top: 4%; animation-direction: reverse; }
.obs-scene-panel-orbits i:nth-child(3) { width: 32%; height: 42%; left: 42%; bottom: -8%; opacity: .58; }

.obs-scene-panel-nodes i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 16px #fff, 0 0 34px var(--obs-panel-accent-b, #ffd523);
  animation: obsSceneNodePulse 8s ease-in-out infinite;
}

.obs-scene-panel-nodes i:nth-child(1) { left: 18%; top: 22%; animation-delay: -1s; }
.obs-scene-panel-nodes i:nth-child(2) { left: 36%; top: 70%; animation-delay: -3s; }
.obs-scene-panel-nodes i:nth-child(3) { left: 68%; top: 28%; animation-delay: -5s; }
.obs-scene-panel-nodes i:nth-child(4) { left: 82%; top: 72%; animation-delay: -7s; }

.obs-scene-panel-bg.is-blueprint .obs-scene-panel-mesh {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.075) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.075) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(45deg, transparent 0 42px, rgba(255,255,255,.08) 43px 44px, transparent 45px 84px);
}

.obs-scene-panel-bg.is-orbit .obs-scene-panel-grid {
  opacity: .22;
  background-size: 86px 86px, 86px 86px, 160px 160px;
}

.obs-scene-panel-bg.is-stadium {
  background:
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--obs-panel-accent-b, #ffd523) 26%, transparent), transparent 44%),
    radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--obs-panel-accent-a, #2d6cdf) 48%, transparent), transparent 31%),
    linear-gradient(180deg, #030406, var(--obs-panel-bg, #071327));
}

.obs-scene-panel-inner {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 18px 34px;
  transform: translate(var(--obs-content-x, 0), var(--obs-content-y, 0));
  will-change: transform;
}

.obs-scene-footer .obs-scene-panel-inner {
  justify-content: center;
}

.obs-scene-sidebar .obs-scene-panel-inner {
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 24px 18px;
  text-align: center;
}

.obs-scene-footer.has-container .obs-scene-panel-inner,
.obs-scene-sidebar.has-container .obs-scene-panel-inner {
  margin: 14px;
  height: calc(100% - 28px);
  padding: 14px 22px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: var(--obs-part-container, rgba(0, 0, 0, .52));
  box-shadow: 0 12px 34px rgba(0, 0, 0, .34);
}

.obs-scene-panel-image {
  position: absolute;
  z-index: 2;
  left: var(--obs-anchor-left, 50%);
  top: var(--obs-anchor-top, 50%);
  width: var(--obs-anchor-size, 190px);
  max-width: 86%;
  max-height: calc(100% - 24px);
  object-fit: contain;
  opacity: var(--obs-anchor-opacity, 1);
  transform:
    translate(var(--obs-anchor-translate-x, -50%), var(--obs-anchor-translate-y, -50%))
    translate(var(--obs-anchor-x, 0), var(--obs-anchor-y, 0));
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .42));
  will-change: transform, opacity;
  pointer-events: none;
}

.obs-scene-sidebar .obs-scene-panel-image {
  width: var(--obs-anchor-size, 210px);
  max-width: 82%;
  max-height: 82%;
}

.obs-scene-panel-logo {
  z-index: 4;
  max-width: 78%;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .5));
}

.obs-scene-extra-image {
  z-index: 4;
  max-width: 94%;
  max-height: 94%;
}

.obs-scene-panel-copy {
  position: relative;
  z-index: 5;
  min-width: 0;
  display: grid;
  gap: 2px;
  font-family: "Space Grotesk", "Inter", sans-serif;
  line-height: .96;
  text-transform: uppercase;
  transform: translate(var(--obs-text-x, 0), var(--obs-text-y, 0));
  will-change: transform;
}

.obs-scene-panel-copy strong {
  color: var(--obs-part-accent, #ffd523);
  font-size: var(--obs-part-font, 28px);
  font-weight: 950;
  letter-spacing: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .78);
}

.obs-scene-panel-copy span {
  color: var(--obs-part-text, #fff);
  font-size: calc(var(--obs-part-font, 28px) * .82);
  font-weight: 950;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .78);
}

.obs-scene-sidebar .obs-scene-panel-copy {
  gap: 10px;
}

.obs-scene-sidebar .obs-scene-panel-copy strong {
  font-size: var(--obs-part-font, 30px);
}

.obs-scene-sidebar .obs-scene-panel-copy span {
  font-size: calc(var(--obs-part-font, 30px) * .46);
  line-height: 1.1;
}

.obs-scene-widget.is-preview .obs-scene-panel-inner {
  gap: 2.2vw;
  padding: 1.4vw 2.7vw;
}

.obs-scene-widget.is-preview .obs-scene-footer.has-container .obs-scene-panel-inner,
.obs-scene-widget.is-preview .obs-scene-sidebar.has-container .obs-scene-panel-inner {
  margin: 1.1%;
  height: calc(100% - 2.2%);
  padding: 1.2vw 1.8vw;
}

.obs-scene-widget.is-preview .obs-scene-panel-image {
  max-width: 86%;
  max-height: 82%;
}

.obs-scene-widget.is-preview .obs-scene-sidebar .obs-scene-panel-image {
  max-width: 82%;
  max-height: 82%;
}

.obs-scene-widget.is-preview .obs-scene-panel-copy strong {
  font-size: calc(var(--obs-part-font, 28px) * var(--obs-scene-scale, .59375));
}

.obs-scene-widget.is-preview .obs-scene-panel-copy span {
  font-size: calc(var(--obs-part-font, 28px) * var(--obs-scene-scale, .59375) * .82);
}

.obs-scene-widget.is-preview .obs-scene-sidebar .obs-scene-panel-copy span {
  font-size: calc(var(--obs-part-font, 30px) * var(--obs-scene-scale, .59375) * .46);
}

.obs-scene-panel-copy {
  width: min(100%, var(--obs-copy-max-width, 100%));
  max-width: var(--obs-copy-max-width, 100%);
  justify-items: stretch;
  text-align: var(--obs-copy-align, center);
  text-transform: var(--obs-copy-case, uppercase);
  line-height: var(--obs-copy-line-height, 1);
  perspective: var(--obs-text-perspective, 800px);
  transform-style: preserve-3d;
}

.obs-scene-panel-copy>strong,
.obs-scene-panel-copy>span {
  min-width: 0;
  color: inherit;
  font-weight: var(--obs-copy-weight, 800);
  line-height: var(--obs-copy-line-height, 1);
  letter-spacing: 0;
  text-align: inherit;
  text-shadow: var(--obs-copy-shadow, 0 3px 14px rgba(0, 0, 0, .82));
  transform-style: preserve-3d;
}

.obs-scene-panel-copy>strong {
  color: var(--obs-part-accent, #ffd523);
  font-size: var(--obs-part-font, 28px);
}

.obs-scene-footer .obs-scene-panel-copy>span,
.obs-scene-sidebar .obs-scene-panel-copy>span {
  color: var(--obs-part-text, #fff);
  font-size: calc(var(--obs-part-font, 28px) * var(--obs-copy-sub-scale, .78));
}

.obs-scene-widget.is-preview .obs-scene-panel-copy>strong {
  font-size: calc(var(--obs-part-font, 28px) * var(--obs-scene-scale, .59375));
}

.obs-scene-widget.is-preview .obs-scene-footer .obs-scene-panel-copy>span,
.obs-scene-widget.is-preview .obs-scene-sidebar .obs-scene-panel-copy>span {
  font-size: calc(var(--obs-part-font, 28px) * var(--obs-scene-scale, .59375) * var(--obs-copy-sub-scale, .78));
}

.obs-scene-animated-text {
  transform-style: preserve-3d;
}

.obs-scene-animated-text.is-whole {
  display: block;
  white-space: pre-line;
}

.obs-scene-animated-text.is-word {
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--obs-copy-justify, center);
  column-gap: .28em;
  row-gap: .08em;
}

.obs-scene-animated-text.is-line {
  display: grid;
  justify-items: var(--obs-copy-justify-items, center);
  gap: .08em;
}

.obs-text-break {
  flex-basis: 100%;
  width: 0;
  height: 0;
}

.obs-text-unit {
  display: inline-block;
  color: inherit;
  font: inherit;
  font-style: normal;
  line-height: inherit;
  letter-spacing: 0;
  transform-origin: 50% 62%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
  animation: obsSceneTextReveal var(--obs-text-entry-duration, 720ms) var(--obs-text-entry-ease, cubic-bezier(.16, 1, .3, 1)) both;
  animation-delay: var(--obs-text-entry-unit-delay, 0ms);
}

.obs-scene-animated-text.is-line .obs-text-unit {
  display: block;
  white-space: pre-wrap;
}

.obs-scene-panel-copy.is-text-exiting .obs-text-unit {
  animation-name: obsSceneTextConceal;
  animation-duration: var(--obs-text-exit-duration, 420ms);
  animation-timing-function: cubic-bezier(.7, 0, .84, 0);
  animation-delay: var(--obs-text-exit-unit-delay, 0ms);
}

@keyframes obsSceneTextReveal {
  from {
    opacity: var(--obs-text-entry-opacity, 0);
    filter: blur(var(--obs-text-entry-blur, 0));
    letter-spacing: var(--obs-text-entry-letter-spacing, 0);
    transform: translate3d(var(--obs-text-entry-x, 0), var(--obs-text-entry-y, 0), var(--obs-text-entry-z, 0)) scale(var(--obs-text-entry-scale, 1)) rotateX(var(--obs-text-entry-rotate, 0deg)) rotateY(var(--obs-text-entry-rotate-y, 0deg)) skewX(var(--obs-text-entry-skew-x, 0deg));
  }

  to {
    opacity: 1;
    filter: blur(0);
    letter-spacing: 0;
    transform: translate3d(0, 0, 0) scale(1) rotateX(0deg) rotateY(0deg) skewX(0deg);
  }
}

@keyframes obsSceneTextConceal {
  from {
    opacity: 1;
    filter: blur(0);
    letter-spacing: 0;
    transform: translate3d(0, 0, 0) scale(1) rotateX(0deg) rotateY(0deg) skewX(0deg);
  }

  to {
    opacity: var(--obs-text-exit-opacity, 0);
    filter: blur(var(--obs-text-exit-blur, 0));
    letter-spacing: var(--obs-text-exit-letter-spacing, 0);
    transform: translate3d(var(--obs-text-exit-x, 0), var(--obs-text-exit-y, 0), var(--obs-text-exit-z, 0)) scale(var(--obs-text-exit-scale, 1)) rotateX(var(--obs-text-exit-rotate, 0deg)) rotateY(var(--obs-text-exit-rotate-y, 0deg)) skewX(var(--obs-text-exit-skew-x, 0deg));
  }
}

.obs-scene-widget.is-preview [data-obs-move] {
  cursor: grab;
  user-select: none;
  pointer-events: auto;
}

.obs-scene-widget.is-preview [data-obs-move].is-dragging {
  cursor: grabbing;
  outline: 1px dashed rgba(255, 255, 255, .45);
  outline-offset: 4px;
}

@keyframes obsSceneMeshDrift {
  0% { transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(2%, 1.5%, 0) rotate(2deg) scale(1.04); }
  100% { transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1); }
}

@keyframes obsSceneGridSlide {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(96px, 96px, 0); }
}

@keyframes obsSceneOrbit {
  0% { rotate: 0deg; }
  100% { rotate: 360deg; }
}

@keyframes obsSceneNodePulse {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.72); opacity: .28; }
  45% { transform: translate3d(14px, -10px, 0) scale(1.18); opacity: .9; }
}

@keyframes obsSceneLogoFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -6px, 0); }
}

@keyframes obsSceneFooterIn {
  from {
    opacity: 0;
    transform: translateY(110%);
  }

  to {
    opacity: var(--obs-panel-opacity, .92);
    transform: translateY(0);
  }
}

@keyframes obsSceneFooterOut {
  from {
    opacity: var(--obs-panel-opacity, .92);
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(110%);
  }
}

@keyframes obsSceneSidebarLeftIn {
  from {
    opacity: 0;
    transform: translateX(-110%);
  }

  to {
    opacity: var(--obs-panel-opacity, .92);
    transform: translateX(0);
  }
}

@keyframes obsSceneSidebarLeftOut {
  from {
    opacity: var(--obs-panel-opacity, .92);
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(-110%);
  }
}

@keyframes obsSceneSidebarRightIn {
  from {
    opacity: 0;
    transform: translateX(110%);
  }

  to {
    opacity: var(--obs-panel-opacity, .92);
    transform: translateX(0);
  }
}

@keyframes obsSceneSidebarRightOut {
  from {
    opacity: var(--obs-panel-opacity, .92);
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(110%);
  }
}

@keyframes obsSceneFadeIn {
  from { opacity: 0; }
  to { opacity: var(--obs-panel-opacity, .92); }
}

@keyframes obsSceneFadeOut {
  from { opacity: var(--obs-panel-opacity, .92); }
  to { opacity: 0; }
}

@keyframes obsSceneScaleIn {
  from {
    opacity: 0;
    transform: scale(.94);
  }

  to {
    opacity: var(--obs-panel-opacity, .92);
    transform: scale(1);
  }
}

@keyframes obsSceneScaleOut {
  from {
    opacity: var(--obs-panel-opacity, .92);
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(.96);
  }
}

@keyframes obsSceneBlurIn {
  from { opacity: 0; filter: blur(22px); transform: scale(1.035); }
  to { opacity: var(--obs-panel-opacity, .92); filter: blur(0); transform: scale(1); }
}

@keyframes obsSceneBlurOut {
  from { opacity: var(--obs-panel-opacity, .92); filter: blur(0); transform: scale(1); }
  to { opacity: 0; filter: blur(22px); transform: scale(.975); }
}

@keyframes obsSceneFooterWipeIn {
  from { opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(18%); }
  to { opacity: var(--obs-panel-opacity, .92); clip-path: inset(0 0 0 0); transform: translateY(0); }
}

@keyframes obsSceneFooterWipeOut {
  from { opacity: var(--obs-panel-opacity, .92); clip-path: inset(0 0 0 0); transform: translateY(0); }
  to { opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(14%); }
}

@keyframes obsSceneSidebarLeftWipeIn {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-14%); }
  to { opacity: var(--obs-panel-opacity, .92); clip-path: inset(0 0 0 0); transform: translateX(0); }
}

@keyframes obsSceneSidebarLeftWipeOut {
  from { opacity: var(--obs-panel-opacity, .92); clip-path: inset(0 0 0 0); transform: translateX(0); }
  to { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-14%); }
}

@keyframes obsSceneSidebarRightWipeIn {
  from { opacity: 0; clip-path: inset(0 0 0 100%); transform: translateX(14%); }
  to { opacity: var(--obs-panel-opacity, .92); clip-path: inset(0 0 0 0); transform: translateX(0); }
}

@keyframes obsSceneSidebarRightWipeOut {
  from { opacity: var(--obs-panel-opacity, .92); clip-path: inset(0 0 0 0); transform: translateX(0); }
  to { opacity: 0; clip-path: inset(0 0 0 100%); transform: translateX(14%); }
}

@keyframes obsSceneFooterSpringIn {
  0% { opacity: 0; transform: translateY(112%); }
  66% { opacity: var(--obs-panel-opacity, .92); transform: translateY(-7%); }
  84% { transform: translateY(2.5%); }
  100% { opacity: var(--obs-panel-opacity, .92); transform: translateY(0); }
}

@keyframes obsSceneFooterSpringOut {
  0% { opacity: var(--obs-panel-opacity, .92); transform: translateY(0); }
  18% { transform: translateY(-5%); }
  100% { opacity: 0; transform: translateY(112%); }
}

@keyframes obsSceneSidebarLeftSpringIn {
  0% { opacity: 0; transform: translateX(-112%); }
  66% { opacity: var(--obs-panel-opacity, .92); transform: translateX(7%); }
  84% { transform: translateX(-2.5%); }
  100% { opacity: var(--obs-panel-opacity, .92); transform: translateX(0); }
}

@keyframes obsSceneSidebarLeftSpringOut {
  0% { opacity: var(--obs-panel-opacity, .92); transform: translateX(0); }
  18% { transform: translateX(5%); }
  100% { opacity: 0; transform: translateX(-112%); }
}

@keyframes obsSceneSidebarRightSpringIn {
  0% { opacity: 0; transform: translateX(112%); }
  66% { opacity: var(--obs-panel-opacity, .92); transform: translateX(-7%); }
  84% { transform: translateX(2.5%); }
  100% { opacity: var(--obs-panel-opacity, .92); transform: translateX(0); }
}

@keyframes obsSceneSidebarRightSpringOut {
  0% { opacity: var(--obs-panel-opacity, .92); transform: translateX(0); }
  18% { transform: translateX(-5%); }
  100% { opacity: 0; transform: translateX(112%); }
}

@keyframes obsSceneFooterFlipIn {
  from { opacity: 0; transform-origin: 50% 100%; transform: perspective(900px) rotateX(72deg) translateY(35%); }
  to { opacity: var(--obs-panel-opacity, .92); transform-origin: 50% 100%; transform: perspective(900px) rotateX(0) translateY(0); }
}

@keyframes obsSceneFooterFlipOut {
  from { opacity: var(--obs-panel-opacity, .92); transform-origin: 50% 100%; transform: perspective(900px) rotateX(0) translateY(0); }
  to { opacity: 0; transform-origin: 50% 100%; transform: perspective(900px) rotateX(72deg) translateY(35%); }
}

@keyframes obsSceneSidebarFlipIn {
  from { opacity: 0; transform-origin: 50% 50%; transform: perspective(900px) rotateY(-74deg) scale(.92); }
  to { opacity: var(--obs-panel-opacity, .92); transform-origin: 50% 50%; transform: perspective(900px) rotateY(0) scale(1); }
}

@keyframes obsSceneSidebarFlipOut {
  from { opacity: var(--obs-panel-opacity, .92); transform-origin: 50% 50%; transform: perspective(900px) rotateY(0) scale(1); }
  to { opacity: 0; transform-origin: 50% 50%; transform: perspective(900px) rotateY(74deg) scale(.92); }
}

.obs-scene-editor-section {
  display: grid;
  gap: 9px;
}

.obs-scene-editor-section h4 {
  margin: 0;
  color: var(--green);
  font-size: 12px;
  letter-spacing: .5px;
}

.obs-scene-media-field>span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.obs-scene-media-field input {
  min-width: 0;
}

.obs-scene-media-field .button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 10px;
  font-size: 10px;
}

.obs-scene-position-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
}

.obs-scene-position-grid .field {
  margin: 0;
  font-size: 10px;
}

.obs-scene-position-grid output {
  color: var(--green);
  font-weight: 800;
}

.obs-scene-bg-controls {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
}

.obs-scene-bg-controls>strong {
  color: var(--green);
  font-size: 11px;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.obs-scene-bg-controls .field {
  margin: 0;
}

.obs-scene-extra-images {
  display: grid;
  gap: 10px;
}

.obs-scene-extra-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
}

.obs-scene-extra-head strong {
  display: block;
  color: #eef5f1;
  font-size: 12px;
}

.obs-scene-extra-head small {
  display: block;
  margin-top: 3px;
  color: #8d98a4;
  font-size: 10px;
  line-height: 1.35;
}

.obs-scene-extra-card {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 8px;
  background: #0c0f13;
}

.obs-scene-extra-card header,
.obs-scene-extra-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.obs-scene-extra-card header label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #edf1f4;
  font-size: 11px;
  font-weight: 800;
}

.obs-scene-extra-card header span {
  color: #73dfa9;
  font-size: 10px;
  font-weight: 800;
}

.obs-scene-extra-url-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.obs-scene-extra-url-row .button,
.obs-scene-extra-head .button,
.obs-scene-extra-card footer .button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 10px;
}

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

.obs-scene-extra-grid .field {
  margin: 0;
}

.obs-scene-extra-grid output {
  color: var(--green);
  font-weight: 800;
}

.obs-scene-extra-empty {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #8d98a4;
  border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .025);
  font-size: 11px;
}

.is-obs-qr-disabled {
  filter: saturate(.6);
}

.obs-scene-text-motion {
  overflow: hidden;
  border-block: 1px solid rgba(255, 255, 255, .09);
  background: #0c0f13;
}

.obs-scene-text-motion summary {
  min-height: 46px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 8px;
  color: #edf1f4;
  cursor: pointer;
  list-style: none;
}

.obs-scene-text-motion summary::-webkit-details-marker {
  display: none;
}

.obs-scene-text-motion summary>span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 750;
}

.obs-scene-text-motion summary small {
  color: #8f99a5;
  font-size: 10px;
}

.obs-scene-text-motion summary>.material-symbols-rounded {
  color: #8f99a5;
  font-size: 18px;
  transition: transform .16s ease;
}

.obs-scene-text-motion[open] summary>.material-symbols-rounded {
  transform: rotate(180deg);
}

.obs-scene-text-motion-body {
  padding: 0 12px 14px;
  display: grid;
  gap: 14px;
}

.obs-scene-text-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.obs-scene-text-preset {
  min-height: 38px;
  padding: 7px 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #9da6b1;
  background: #151920;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 6px;
  font-size: 10px;
  cursor: pointer;
}

.obs-scene-text-preset .material-symbols-rounded {
  font-size: 16px;
}

.obs-scene-text-preset:hover,
.obs-scene-text-preset.active {
  color: #eaf9f1;
  background: #13251d;
  border-color: rgba(53, 212, 134, .28);
}

.obs-scene-text-group {
  display: grid;
  gap: 9px;
}

.obs-scene-text-group+.obs-scene-text-group {
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.obs-scene-text-group>strong {
  color: #73dfa9;
  font-size: 10px;
  text-transform: uppercase;
}

.obs-scene-text-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.obs-scene-text-control-grid .field {
  min-width: 0;
  margin: 0;
}

.obs-scene-text-toggle {
  display: flex;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.obs-scene-text-toggle input {
  width: auto;
}

@media (max-width: 620px) {
  .obs-scene-text-presets,
  .obs-scene-text-control-grid,
  .obs-scene-extra-grid,
  .obs-scene-extra-head,
  .obs-scene-extra-url-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .obs-scene-text-control-grid,
  .obs-scene-extra-grid,
  .obs-scene-extra-head,
  .obs-scene-extra-url-row {
    grid-template-columns: 1fr;
  }
}

/* Animations for OBS / Live Card */
@keyframes obsFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes obsSlideUp {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes obsScaleIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes obsBounce {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }

  70% {
    transform: scale(0.9);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes obsFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes obsSlideDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(100px);
  }
}

@keyframes obsScaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.5);
  }
}

/* Continuous 3D Floating animation */
@keyframes obs3DFloatSpin {
  0% {
    transform: translateY(0px) rotateX(10deg) rotateY(-10deg) rotateZ(0deg);
  }

  25% {
    transform: translateY(-8px) rotateX(4deg) rotateY(8deg) rotateZ(0.5deg);
  }

  50% {
    transform: translateY(0px) rotateX(-10deg) rotateY(4deg) rotateZ(0deg);
  }

  75% {
    transform: translateY(8px) rotateX(0deg) rotateY(-4deg) rotateZ(-0.5deg);
  }

  100% {
    transform: translateY(0px) rotateX(10deg) rotateY(-10deg) rotateZ(0deg);
  }
}

.live-qr-card {
  position: relative;
  width: 100%;
  height: 360px;
  border-radius: calc(24px * var(--radius-scale, 1));
  padding: 24px;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease, border 0.3s ease;
}

.live-qr-card-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(141, 217, 168, 0.15), transparent 50%);
  pointer-events: none;
  z-index: 1;
}

.live-qr-card-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform-style: preserve-3d;
}

/* OBS Widget Container overrides */
.obs-widget-body {
  background: transparent !important;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* Logo image overlay inside QR Code */
.qr-logo-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  background: white;
  border-radius: calc(6px * var(--radius-scale, 1));
  padding: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

.qr-logo-overlay img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

/* Animated QR Scanline and SVG hover transformations */
.widget-qr-preview {
  position: relative;
  overflow: hidden;
}

.widget-qr-preview:hover .qr-pattern-svg {
  transform: scale(1.08) rotate(3deg);
}

.qr-scan-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  box-shadow: 0 0 10px var(--green);
  animation: qrScanLine 2.8s linear infinite;
  pointer-events: none;
}

@keyframes qrScanLine {
  0% {
    top: 0%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

/* Pro Promo Card Styles */
.pro-promo-card {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(141, 217, 168, 0.12) 0%, rgba(20, 30, 24, 0.5) 100%);
  border: 1px solid rgba(141, 217, 168, 0.25);
  border-radius: calc(12px * var(--radius-scale, 1));
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease, gap 0.3s ease;
}

.pro-promo-card:hover {
  border-color: rgba(141, 217, 168, 0.6);
  box-shadow: 0 6px 20px rgba(141, 217, 168, 0.15);
}

.pro-promo-card p {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0 !important;
  font-size: 10px;
  line-height: 1.4;
  color: var(--muted);
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin-top 0.3s ease;
}

.pro-promo-card:hover p {
  max-height: 80px;
  opacity: 1;
  margin-top: 4px !important;
}

.pro-promo-actions {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin-top 0.3s ease;
}

.pro-promo-card:hover .pro-promo-actions {
  max-height: 60px;
  opacity: 1;
  margin-top: 6px;
}

.pro-promo-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pro-badge-nitro {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #00e5ff, #0055ff);
  padding: 3px;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.6), inset 0 0 4px rgba(255, 255, 255, 0.8);
  animation: nitro-badge-evolve 12s infinite linear;
  flex: 0 0 26px;
}

.pro-badge-nitro-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #0a101a, #001133);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
}

.pro-badge-nitro-inner .material-symbols-rounded {
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #00e5ff;
}

@keyframes nitro-badge-evolve {
  0% {
    filter: hue-rotate(0deg);
  }

  16% {
    filter: hue-rotate(60deg);
  }

  33% {
    filter: hue-rotate(120deg);
  }

  50% {
    filter: hue-rotate(180deg);
  }

  66% {
    filter: hue-rotate(240deg);
  }

  83% {
    filter: hue-rotate(300deg);
  }

  100% {
    filter: hue-rotate(360deg);
  }
}

.pro-promo-header strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  transition: opacity 0.3s ease;
}

.promo-title-expanded {
  display: none;
}

.pro-promo-card:hover .promo-title-compact {
  display: none;
}

.pro-promo-card:hover .promo-title-expanded {
  display: inline;
}

.pro-comparison-modal {
  width: min(720px, 100%) !important;
}

.pro-promo-card {
  background: linear-gradient(135deg, rgba(184, 116, 51, 0.18), rgba(28, 20, 15, 0.72));
  border-color: rgba(210, 146, 74, 0.34);
  box-shadow: 0 12px 32px rgba(55, 31, 12, 0.28);
}

.pro-promo-card:hover {
  border-color: rgba(232, 171, 91, 0.72);
  box-shadow: 0 18px 42px rgba(184, 116, 51, 0.22);
}

.pro-badge-bronze {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .48), transparent 18%),
    conic-gradient(from 18deg, #5c2c12, #b36a2f, #f2b96b, #7b3e18, #d79246, #5c2c12);
  box-shadow: 0 0 0 1px rgba(255, 204, 128, .28), 0 0 18px rgba(201, 126, 52, .55), inset 0 0 12px rgba(39, 19, 8, .8);
  animation: bronzeBadgeOrbit 6s linear infinite, bronzeBadgePulse 2.8s ease-in-out infinite;
}

.pro-badge-large {
  width: 54px;
  height: 54px;
  flex-basis: 54px;
}

.pro-badge-bronze::before {
  content: "";
  position: absolute;
  inset: -45%;
  background: conic-gradient(from 0deg, transparent 0 18%, rgba(255, 219, 156, .55) 22%, transparent 30% 64%, rgba(142, 255, 212, .22) 70%, transparent 78%);
  animation: bronzeBadgeSweep 3.4s linear infinite;
}

.pro-badge-shard,
.pro-badge-core {
  position: absolute;
  display: block;
}

.pro-badge-shard {
  width: 44%;
  height: 18%;
  border-radius: calc(999px * var(--radius-scale, 1));
  background: linear-gradient(90deg, rgba(255, 230, 171, .95), rgba(154, 76, 26, .22));
  filter: drop-shadow(0 0 5px rgba(255, 185, 92, .7));
  transform-origin: center;
}

.pro-badge-shard.s1 {
  transform: translateY(-7px) rotate(18deg);
}

.pro-badge-shard.s2 {
  transform: translate(5px, 3px) rotate(132deg);
}

.pro-badge-shard.s3 {
  transform: translate(-6px, 5px) rotate(252deg);
}

.pro-badge-core {
  width: 34%;
  height: 34%;
  border-radius: 45% 55% 48% 52%;
  background: radial-gradient(circle at 35% 28%, #fff2c9, #d88b3d 42%, #673014 100%);
  box-shadow: inset 0 0 8px rgba(255, 255, 255, .28), 0 0 12px rgba(244, 169, 82, .72);
  animation: bronzeCoreMorph 4.5s ease-in-out infinite;
}

@keyframes bronzeBadgeOrbit {
  to {
    filter: hue-rotate(18deg);
    transform: rotate(360deg);
  }
}

@keyframes bronzeBadgePulse {

  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(255, 204, 128, .25), 0 0 14px rgba(201, 126, 52, .42), inset 0 0 12px rgba(39, 19, 8, .8);
  }

  50% {
    box-shadow: 0 0 0 1px rgba(255, 226, 168, .56), 0 0 26px rgba(232, 171, 91, .82), inset 0 0 18px rgba(255, 188, 92, .2);
  }
}

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

@keyframes bronzeCoreMorph {

  0%,
  100% {
    border-radius: 45% 55% 48% 52%;
    transform: scale(.92);
  }

  50% {
    border-radius: 58% 42% 54% 46%;
    transform: scale(1.08);
  }
}

.pro-badge-gem {
  --gem-core-a: #fff2c6;
  --gem-core-b: #d68b41;
  --gem-core-c: #683114;
  --gem-glow: rgba(232, 171, 91, .78);
  --gem-ring: rgba(255, 213, 145, .42);
  --gem-orbit: #77f7c9;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: visible;
  border-radius: 50%;
  isolation: isolate;
  animation: proGemFloat 3.8s ease-in-out infinite;
  filter: drop-shadow(0 0 10px var(--gem-glow));
}

.pro-badge-gem::before,
.pro-badge-gem::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  pointer-events: none;
}

.pro-badge-gem::before {
  border: 1px solid var(--gem-ring);
  box-shadow: 0 0 18px var(--gem-glow), inset 0 0 12px rgba(255, 255, 255, .08);
}

.pro-badge-gem::after {
  inset: -10%;
  background: conic-gradient(from 20deg, transparent, var(--gem-glow), transparent 34%, transparent 72%, rgba(255, 255, 255, .38), transparent);
  opacity: .58;
  animation: proGemSweep 5s linear infinite;
  z-index: -1;
}

.pro-badge-large {
  width: 58px;
  height: 58px;
  flex-basis: 58px;
}

.pro-gem-core {
  width: 48%;
  height: 56%;
  display: block;
  position: relative;
  z-index: 2;
  clip-path: polygon(50% 0, 92% 24%, 76% 92%, 50% 100%, 24% 92%, 8% 24%);
  background:
    linear-gradient(125deg, rgba(255, 255, 255, .88) 0 12%, transparent 13%),
    linear-gradient(55deg, rgba(255, 255, 255, .45), transparent 42%),
    radial-gradient(circle at 34% 18%, var(--gem-core-a), var(--gem-core-b) 46%, var(--gem-core-c) 100%);
  box-shadow: inset -4px -7px 9px rgba(0, 0, 0, .32), inset 3px 4px 7px rgba(255, 255, 255, .24), 0 0 14px var(--gem-glow);
  animation: proGemCorePulse 2.65s ease-in-out infinite;
}

.pro-gem-core::before,
.pro-gem-core::after {
  content: "";
  position: absolute;
  inset: 12% 46% 8% 46%;
  background: rgba(255, 255, 255, .34);
  transform: rotate(12deg);
}

.pro-gem-core::after {
  inset: 38% 12% 50% 12%;
  transform: rotate(-9deg);
  opacity: .5;
}

.pro-gem-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform-origin: center;
  animation: proGemOrbit var(--orbit-speed, 4.2s) linear infinite;
}

.pro-gem-orbit i {
  width: 20%;
  height: 22%;
  position: absolute;
  left: 50%;
  top: -4%;
  display: block;
  clip-path: polygon(50% 0, 95% 30%, 74% 100%, 28% 100%, 5% 30%);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .76), transparent 34%),
    radial-gradient(circle at 34% 20%, #ffffff, var(--gem-orbit) 46%, var(--gem-core-c));
  box-shadow: 0 0 8px var(--gem-glow);
  transform: translateX(-50%) scale(var(--orbit-scale, .72));
  animation: proGemMicroSpark 1.8s ease-in-out infinite;
}

.orbit-a {
  --orbit-speed: 3.4s;
  transform: rotate(12deg);
}

.orbit-b {
  --orbit-speed: 5.1s;
  animation-direction: reverse;
  transform: rotate(126deg);
}

.orbit-c {
  --orbit-speed: 6.6s;
  transform: rotate(244deg);
}

.orbit-b i {
  --orbit-scale: .55;
  top: 2%;
}

.orbit-c i {
  --orbit-scale: .43;
  top: 4%;
}

.pro-badge-level-bronze {
  --gem-core-a: #fff0c2;
  --gem-core-b: #d8893e;
  --gem-core-c: #5d2b12;
  --gem-glow: rgba(230, 150, 67, .76);
  --gem-ring: rgba(255, 202, 128, .5);
  --gem-orbit: #f8c46f;
}

.pro-badge-level-silver {
  --gem-core-a: #ffffff;
  --gem-core-b: #b9c4d3;
  --gem-core-c: #536070;
  --gem-glow: rgba(209, 226, 244, .74);
  --gem-ring: rgba(236, 246, 255, .52);
  --gem-orbit: #dcecff;
}

.pro-badge-level-gold {
  --gem-core-a: #fff8bc;
  --gem-core-b: #ffca48;
  --gem-core-c: #8c5a05;
  --gem-glow: rgba(255, 199, 64, .86);
  --gem-ring: rgba(255, 232, 130, .58);
  --gem-orbit: #ffe16f;
}

.pro-badge-level-cyan {
  --gem-core-a: #eaffff;
  --gem-core-b: #43f1e0;
  --gem-core-c: #075f74;
  --gem-glow: rgba(63, 231, 223, .84);
  --gem-ring: rgba(116, 255, 240, .58);
  --gem-orbit: #6dfff0;
}

.pro-badge-level-titanium {
  --gem-core-a: #edf2ff;
  --gem-core-b: #202735;
  --gem-core-c: #030408;
  --gem-glow: rgba(175, 198, 231, .58);
  --gem-ring: rgba(210, 224, 246, .38);
  --gem-orbit: #d6e3ff;
}

.pro-badge-level-magic {
  --gem-core-a: #ffffff;
  --gem-core-b: #31f5d4;
  --gem-core-c: #4019a8;
  --gem-glow: rgba(93, 255, 216, .88);
  --gem-ring: rgba(255, 255, 255, .62);
  --gem-orbit: #ff7cff;
  animation: proGemFloat 3.8s ease-in-out infinite, proGemRgb 4.5s linear infinite;
}

.pro-promo-card[data-pro-level="silver"] {
  background: linear-gradient(135deg, rgba(190, 207, 226, .16), rgba(18, 22, 28, .76));
  border-color: rgba(218, 232, 249, .34);
}

.pro-promo-card[data-pro-level="gold"] {
  background: linear-gradient(135deg, rgba(255, 198, 59, .18), rgba(38, 28, 10, .78));
  border-color: rgba(255, 214, 82, .4);
}

.pro-promo-card[data-pro-level="cyan"] {
  background: linear-gradient(135deg, rgba(54, 228, 218, .16), rgba(8, 37, 44, .78));
  border-color: rgba(104, 255, 238, .36);
}

.pro-promo-card[data-pro-level="titanium"] {
  background: linear-gradient(135deg, rgba(194, 211, 241, .12), rgba(4, 5, 8, .86));
  border-color: rgba(206, 222, 248, .28);
}

.pro-promo-card[data-pro-level="magic"] {
  background: linear-gradient(135deg, rgba(54, 244, 216, .16), rgba(52, 16, 98, .54), rgba(13, 18, 24, .86));
  border-color: rgba(180, 255, 242, .4);
}

.pro-levels-modal {
  width: min(760px, 96vw) !important;
}

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

.pro-level-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  min-height: 128px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: calc(8px * var(--radius-scale, 1));
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .015));
}

.pro-level-card.active {
  border-color: rgba(116, 255, 240, .54);
  background: linear-gradient(180deg, rgba(67, 241, 224, .11), rgba(255, 255, 255, .02));
  box-shadow: 0 0 0 1px rgba(116, 255, 240, .08), 0 18px 34px rgba(31, 205, 190, .12);
}

.pro-level-badge {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
}

.pro-level-card strong,
.pro-level-card span {
  display: block;
}

.pro-level-card strong {
  font-size: 13px;
  line-height: 1.1;
}

.pro-level-time {
  color: #9ae6c5;
  font-size: 10px;
  font-weight: 800;
  margin-top: 4px;
  text-transform: uppercase;
}

.pro-level-card p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.pro-level-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

@keyframes proGemFloat {

  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }

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

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

@keyframes proGemCorePulse {

  0%,
  100% {
    transform: scale(.95);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.09);
    filter: brightness(1.22);
  }
}

@keyframes proGemOrbit {
  to {
    rotate: 360deg;
  }
}

@keyframes proGemMicroSpark {

  0%,
  100% {
    opacity: .78;
    filter: brightness(1);
  }

  50% {
    opacity: 1;
    filter: brightness(1.42);
  }
}

@keyframes proGemRgb {
  to {
    filter: hue-rotate(360deg) drop-shadow(0 0 13px var(--gem-glow));
  }
}

@media (max-width: 720px) {
  .pro-level-grid {
    grid-template-columns: 1fr;
  }

  .pro-level-actions .button {
    width: 100%;
  }
}

.pro-badge-gem {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .78) 0 32%, transparent 33%),
    conic-gradient(from 18deg, var(--gem-core-c), var(--gem-core-b), var(--gem-core-a), var(--gem-core-b), var(--gem-core-c));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    0 0 20px var(--gem-glow),
    inset 0 0 12px rgba(0, 0, 0, .65);
}

.pro-badge-large {
  width: 64px;
  height: 64px;
  flex-basis: 64px;
}

.pro-level-badge {
  width: 50px;
  height: 50px;
  flex-basis: 50px;
}

.theme-preview-badge {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
}

.pro-badge-gem::before {
  inset: -2px;
  border: 0;
  background:
    repeating-conic-gradient(from 8deg, var(--gem-core-a) 0 9deg, transparent 9deg 17deg, var(--gem-core-b) 17deg 28deg, transparent 28deg 41deg),
    conic-gradient(from 0deg, var(--gem-core-c), var(--gem-core-b), var(--gem-core-a), var(--gem-core-b), var(--gem-core-c));
  -webkit-mask: radial-gradient(circle, transparent 0 52%, #000 54% 70%, transparent 72%);
  mask: radial-gradient(circle, transparent 0 52%, #000 54% 70%, transparent 72%);
  box-shadow: none;
  animation: proGemSweep 9s linear infinite;
}

.pro-badge-gem::after {
  inset: -28%;
  background:
    conic-gradient(from 0deg, transparent 0 9%, rgba(255, 255, 255, .5) 11%, transparent 16% 58%, var(--gem-glow) 64%, transparent 72%),
    radial-gradient(circle, transparent 0 58%, var(--gem-glow) 60%, transparent 69%);
  opacity: .72;
}

.pro-gem-core {
  width: 42%;
  height: 46%;
  transform-style: preserve-3d;
  border-radius: calc(2px * var(--radius-scale, 1));
  clip-path: polygon(50% 0, 94% 25%, 75% 92%, 50% 100%, 25% 92%, 6% 25%);
}

.pro-gem-orbit i {
  border-radius: calc(1px * var(--radius-scale, 1));
  filter: drop-shadow(0 0 8px var(--gem-glow));
}

/* Simplified premium badge: clean geometric gem inspired by Nitro badges. */
.pro-badge-gem {
  --gem-face-left: #6122f2;
  --gem-face-right: #8f55ff;
  --gem-face-mid: #7a3dff;
  --gem-outline: #a3a4ad;
  width: 34px;
  height: 40px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--gem-face-right) 42%, transparent));
  animation: proSimpleGemFloat 4s ease-in-out infinite;
}

.pro-badge-large {
  width: 58px;
  height: 68px;
  flex-basis: 58px;
}

.pro-level-badge {
  width: 46px;
  height: 54px;
  flex-basis: 46px;
}

.theme-preview-badge {
  width: 46px;
  height: 54px;
  flex-basis: 46px;
}

.pro-badge-gem::before,
.pro-badge-gem::after,
.pro-gem-orbit {
  display: none !important;
}

.pro-gem-core {
  width: 78%;
  height: 92%;
  position: relative;
  z-index: 1;
  display: block;
  border-radius: 0;
  clip-path: polygon(50% 0, 88% 28%, 88% 72%, 50% 100%, 12% 72%, 12% 28%);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .18) 0 2px, transparent 2px) 50% 0 / 2px 100% no-repeat,
    linear-gradient(132deg, rgba(255, 255, 255, .22) 0 14%, transparent 15% 100%),
    linear-gradient(90deg, var(--gem-face-left) 0 50%, var(--gem-face-right) 50% 100%);
  box-shadow:
    inset 7px -8px 0 color-mix(in srgb, var(--gem-face-left) 78%, #000 22%),
    inset -7px 8px 0 color-mix(in srgb, var(--gem-face-right) 82%, #fff 18%),
    0 5px 14px color-mix(in srgb, var(--gem-face-mid) 30%, transparent);
  animation: none;
}

.pro-gem-core::before {
  content: "";
  position: absolute;
  inset: 27% 29%;
  display: block;
  clip-path: polygon(50% 0, 88% 28%, 88% 72%, 50% 100%, 12% 72%, 12% 28%);
  background: var(--gem-outline);
  opacity: .92;
  transform: none;
}

.pro-gem-core::after {
  content: "";
  position: absolute;
  inset: 35% 39%;
  display: block;
  clip-path: polygon(50% 0, 88% 28%, 88% 72%, 50% 100%, 12% 72%, 12% 28%);
  background: linear-gradient(90deg, var(--gem-face-left) 0 48%, var(--gem-face-right) 48% 100%);
  opacity: .96;
  transform: none;
}

.pro-badge-gem {
  --gem-highlight: rgba(255, 255, 255, .42);
  width: 36px;
  height: 46px;
  flex: 0 0 36px;
  perspective: 160px;
  filter:
    drop-shadow(0 10px 10px rgba(0, 0, 0, .24)) drop-shadow(0 0 10px var(--gem-glow));
}

.pro-badge-large {
  width: 62px;
  height: 78px;
  flex-basis: 62px;
}

.pro-level-badge,
.theme-preview-badge {
  width: 50px;
  height: 64px;
  flex-basis: 50px;
}

.pro-gem-core {
  width: 78%;
  height: 94%;
  clip-path: polygon(50% 0, 88% 25%, 88% 72%, 50% 100%, 12% 72%, 12% 25%);
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(255, 255, 255, .28) 49% 51%, rgba(0, 0, 0, .18) 52% 100%),
    linear-gradient(150deg, var(--gem-highlight) 0 13%, transparent 14% 100%),
    linear-gradient(62deg, color-mix(in srgb, var(--gem-face-left) 72%, #000 28%) 0 36%, transparent 37%),
    linear-gradient(118deg, transparent 0 63%, color-mix(in srgb, var(--gem-face-right) 82%, #fff 18%) 64% 100%),
    linear-gradient(90deg, var(--gem-face-left) 0 50%, var(--gem-face-right) 50% 100%);
  box-shadow:
    inset 5px -9px 0 color-mix(in srgb, var(--gem-face-left) 62%, #000 38%),
    inset -5px 8px 0 color-mix(in srgb, var(--gem-face-right) 78%, #fff 22%),
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 8px 18px color-mix(in srgb, var(--gem-face-mid) 30%, transparent);
  transform: rotateY(-8deg) rotateX(3deg);
}

.pro-gem-core::before {
  inset: 28% 30%;
  clip-path: polygon(50% 0, 86% 27%, 86% 73%, 50% 100%, 14% 73%, 14% 27%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--gem-outline) 82%, #000 18%) 0 38%, var(--gem-outline) 39% 61%, color-mix(in srgb, var(--gem-outline) 84%, #fff 16%) 62% 100%);
  opacity: .96;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 5px rgba(255, 255, 255, .08);
}

.pro-gem-core::after {
  inset: 37% 40%;
  clip-path: polygon(50% 0, 84% 28%, 84% 72%, 50% 100%, 16% 72%, 16% 28%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--gem-face-left) 82%, #000 18%) 0 48%, color-mix(in srgb, var(--gem-face-right) 88%, #fff 12%) 49% 100%);
  opacity: 1;
  box-shadow: inset 1px 0 rgba(255, 255, 255, .22);
}

.pro-badge-gem::selection,
.pro-gem-core::selection {
  background: transparent;
}

.pro-badge-level-bronze {
  --gem-face-left: #8f3e13;
  --gem-face-right: #ffae58;
  --gem-face-mid: #cf7130;
  --gem-outline: #c8a48f;
  --gem-highlight: rgba(255, 226, 187, .5);
  --gem-glow: rgba(224, 132, 59, .48);
}

.pro-badge-level-silver {
  --gem-face-left: #626d7c;
  --gem-face-right: #f0f7ff;
  --gem-face-mid: #b6c5d5;
  --gem-outline: #9da8b8;
  --gem-highlight: rgba(255, 255, 255, .68);
  --gem-glow: rgba(210, 225, 242, .44);
}

.pro-badge-level-gold {
  --gem-face-left: #a56802;
  --gem-face-right: #ffe978;
  --gem-face-mid: #f0b72c;
  --gem-outline: #bc8422;
  --gem-highlight: rgba(255, 250, 187, .62);
  --gem-glow: rgba(255, 202, 72, .52);
}

.pro-badge-level-cyan {
  --gem-face-left: #047e9e;
  --gem-face-right: #71fff3;
  --gem-face-mid: #24dce4;
  --gem-outline: #9cecef;
  --gem-highlight: rgba(225, 255, 255, .64);
  --gem-glow: rgba(63, 231, 223, .52);
}

.pro-badge-level-titanium {
  --gem-face-left: #030409;
  --gem-face-right: #687488;
  --gem-face-mid: #252f40;
  --gem-outline: #dce7f7;
  --gem-highlight: rgba(255, 255, 255, .52);
  --gem-glow: rgba(180, 199, 230, .38);
}

.pro-badge-level-magic {
  --gem-face-left: #551cff;
  --gem-face-right: #ff61f6;
  --gem-face-mid: #36e6ff;
  --gem-outline: #e1fff8;
  --gem-highlight: rgba(255, 255, 255, .66);
  --gem-glow: rgba(152, 96, 255, .58);
  animation: proSimpleGemFloat 4s ease-in-out infinite, proSimpleGemHue 7s linear infinite;
}

@keyframes proSimpleGemFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

@keyframes proSimpleGemHue {
  to {
    filter: hue-rotate(360deg) drop-shadow(0 0 9px color-mix(in srgb, var(--gem-face-right) 42%, transparent));
  }
}

/* Nitro-style coin badge with StreamPix mark. */
.pro-badge-gem {
  --coin-a: var(--gem-face-right);
  --coin-b: var(--gem-face-mid);
  --coin-dark: var(--gem-face-left);
  --coin-inner: color-mix(in srgb, var(--gem-face-left) 68%, #05060a 32%);
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 50%;
  overflow: visible;
  perspective: none;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .92) 0 5%, transparent 8%),
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--coin-a) 92%, #fff 8%) 0 34%, var(--coin-b) 49%, var(--coin-dark) 71%, color-mix(in srgb, var(--coin-a) 78%, #fff 22%) 100%);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .34),
    inset 0 -5px 9px rgba(0, 0, 0, .38),
    0 0 0 1px color-mix(in srgb, var(--coin-a) 46%, transparent),
    0 8px 18px rgba(0, 0, 0, .28),
    0 0 16px var(--gem-glow);
  filter: none;
  animation: proCoinFloat 4s ease-in-out infinite;
}

.pro-badge-large {
  width: 66px;
  height: 66px;
  flex-basis: 66px;
}

.pro-level-badge,
.theme-preview-badge {
  width: 54px;
  height: 54px;
  flex-basis: 54px;
}

.pro-badge-gem::before {
  content: "";
  display: block !important;
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 6deg, color-mix(in srgb, var(--coin-a) 94%, #fff 6%) 0 13deg, transparent 13deg 24deg),
    conic-gradient(from 180deg, var(--coin-dark), var(--coin-a), var(--coin-b), var(--coin-dark), var(--coin-a));
  -webkit-mask: radial-gradient(circle, transparent 0 58%, #000 60% 74%, transparent 76%);
  mask: radial-gradient(circle, transparent 0 58%, #000 60% 74%, transparent 76%);
  opacity: .98;
  box-shadow: none;
  animation: proCoinRing 14s linear infinite;
  pointer-events: none;
}

.pro-badge-gem::after {
  content: "";
  display: block !important;
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background:
    linear-gradient(130deg, rgba(255, 255, 255, .6) 0 12%, transparent 13% 42%, rgba(255, 255, 255, .16) 43% 52%, transparent 53%),
    radial-gradient(circle at 70% 80%, rgba(0, 0, 0, .28), transparent 34%);
  opacity: .68;
  mix-blend-mode: screen;
  pointer-events: none;
}

.pro-gem-orbit {
  display: none !important;
}

.pro-gem-core {
  width: 58%;
  height: 58%;
  z-index: 1;
  display: block;
  position: relative;
  border-radius: 50%;
  clip-path: none;
  transform: none;
  background:
    url("/assets/streampix-logo.png") center / 68% 68% no-repeat,
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, .46), transparent 22%),
    radial-gradient(circle, color-mix(in srgb, var(--coin-inner) 76%, #fff 24%) 0 38%, var(--coin-inner) 72%);
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, .28),
    inset 0 -5px 8px rgba(0, 0, 0, .45),
    0 0 0 2px color-mix(in srgb, var(--coin-a) 56%, #000 44%),
    0 0 0 4px rgba(0, 0, 0, .2);
  animation: none;
}

.pro-gem-core::before {
  content: "";
  display: block;
  position: absolute;
  inset: -21%;
  border-radius: 50%;
  clip-path: none;
  background: conic-gradient(from 0deg, transparent 0 18%, rgba(255, 255, 255, .42) 22%, transparent 30% 70%, rgba(255, 255, 255, .22) 76%, transparent 84%);
  opacity: .58;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

.pro-gem-core::after {
  content: "";
  display: block;
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  clip-path: none;
  background: url("/assets/streampix-logo.png") center / contain no-repeat;
  filter:
    brightness(1.12) contrast(1.08) drop-shadow(0 1px 1px rgba(0, 0, 0, .38));
  opacity: .94;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

.pro-badge-level-bronze {
  --gem-face-left: #7a2d08;
  --gem-face-right: #ff7b13;
  --gem-face-mid: #c75812;
  --gem-glow: rgba(255, 110, 19, .48);
}

.pro-badge-level-silver {
  --gem-face-left: #56616c;
  --gem-face-right: #eaf4ff;
  --gem-face-mid: #aeb9c5;
  --gem-glow: rgba(218, 232, 248, .45);
}

.pro-badge-level-gold {
  --gem-face-left: #8d5600;
  --gem-face-right: #ffc43f;
  --gem-face-mid: #dc8e00;
  --gem-glow: rgba(255, 196, 63, .54);
}

.pro-badge-level-cyan {
  --gem-face-left: #00758c;
  --gem-face-right: #25d8ff;
  --gem-face-mid: #00a6db;
  --gem-glow: rgba(37, 216, 255, .52);
}

.pro-badge-level-titanium {
  --gem-face-left: #05070c;
  --gem-face-right: #5f697a;
  --gem-face-mid: #242b38;
  --gem-glow: rgba(170, 190, 220, .38);
}

.pro-badge-level-magic {
  --gem-face-left: #4a18cb;
  --gem-face-right: #ff53f1;
  --gem-face-mid: #35d5ff;
  --gem-glow: rgba(163, 85, 255, .6);
  animation: proCoinFloat 4s ease-in-out infinite, proCoinRgb 6s linear infinite;
}

@keyframes proCoinFloat {

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

  50% {
    transform: translateY(-2px) scale(1.02);
  }
}

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

@keyframes proCoinRgb {
  to {
    filter: hue-rotate(360deg);
  }
}

/* Hyper-real coin pass: badge-colored app mark and deeper metallic reflections. */
.pro-badge-gem {
  --coin-logo: color-mix(in srgb, var(--coin-a) 84%, #fff 16%);
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .95) 0 5%, transparent 9%),
    radial-gradient(ellipse at 30% 18%, rgba(255, 255, 255, .36), transparent 34%),
    radial-gradient(circle at 66% 78%, rgba(0, 0, 0, .48), transparent 38%),
    conic-gradient(from 218deg, color-mix(in srgb, var(--coin-dark) 82%, #000 18%), var(--coin-a), color-mix(in srgb, var(--coin-a) 76%, #fff 24%), var(--coin-b), var(--coin-dark), var(--coin-a));
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .5),
    inset 4px 0 7px rgba(255, 255, 255, .14),
    inset -5px -7px 10px rgba(0, 0, 0, .48),
    0 1px 0 rgba(255, 255, 255, .12),
    0 10px 18px rgba(0, 0, 0, .34),
    0 0 18px var(--gem-glow);
}

.pro-badge-gem::before {
  inset: -3px;
  background:
    repeating-conic-gradient(from 3deg, color-mix(in srgb, var(--coin-a) 94%, #fff 6%) 0 10deg, color-mix(in srgb, var(--coin-dark) 70%, #000 30%) 10deg 16deg, transparent 16deg 24deg),
    conic-gradient(from 180deg, var(--coin-dark), color-mix(in srgb, var(--coin-a) 92%, #fff 8%), var(--coin-b), var(--coin-dark), var(--coin-a));
  -webkit-mask: radial-gradient(circle, transparent 0 56%, #000 58% 76%, transparent 78%);
  mask: radial-gradient(circle, transparent 0 56%, #000 58% 76%, transparent 78%);
  filter: drop-shadow(0 0 4px var(--gem-glow));
}

.pro-badge-gem::after {
  inset: 2px;
  background:
    linear-gradient(125deg, transparent 0 19%, rgba(255, 255, 255, .72) 22%, rgba(255, 255, 255, .18) 28%, transparent 34%),
    radial-gradient(circle at 36% 24%, rgba(255, 255, 255, .42), transparent 24%),
    radial-gradient(circle at 72% 78%, rgba(0, 0, 0, .4), transparent 34%);
  opacity: .78;
}

.pro-gem-core {
  width: 56%;
  height: 56%;
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 255, 255, .52), transparent 25%),
    radial-gradient(circle at 64% 76%, rgba(0, 0, 0, .55), transparent 42%),
    radial-gradient(circle, color-mix(in srgb, var(--coin-inner) 70%, #fff 30%) 0 34%, var(--coin-inner) 72%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, .34),
    inset 0 -7px 11px rgba(0, 0, 0, .54),
    0 0 0 1px color-mix(in srgb, var(--coin-a) 76%, #fff 24%),
    0 0 0 3px color-mix(in srgb, var(--coin-dark) 62%, #000 38%),
    0 3px 7px rgba(0, 0, 0, .3);
}

.pro-gem-core::before {
  inset: -16%;
  background:
    conic-gradient(from 8deg, transparent 0 17%, rgba(255, 255, 255, .58) 21%, transparent 29% 70%, rgba(255, 255, 255, .28) 76%, transparent 86%);
  opacity: .68;
}

.pro-gem-core::after {
  inset: 17%;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--coin-logo) 92%, #fff 8%), color-mix(in srgb, var(--coin-logo) 70%, #000 30%));
  -webkit-mask: url("/assets/streampix-logo.png") center / contain no-repeat;
  mask: url("/assets/streampix-logo.png") center / contain no-repeat;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, .2)) drop-shadow(0 2px 2px rgba(0, 0, 0, .48));
  opacity: 1;
}

.pro-badge-level-bronze {
  --coin-logo: #ff9a3d;
}

.pro-badge-level-silver {
  --coin-logo: #f2f8ff;
}

.pro-badge-level-gold {
  --coin-logo: #ffe074;
}

.pro-badge-level-cyan {
  --coin-logo: #70f2ff;
}

.pro-badge-level-titanium {
  --coin-logo: #c7d2e8;
}

.pro-badge-level-magic {
  --coin-logo: #ffc9ff;
}

/* Evolved coin rendering: softer reflections and per-level detail density. */
.pro-badge-gem {
  --coin-ring-opacity: .32;
  --coin-shine-opacity: .38;
  --coin-inner-detail: .18;
  --coin-halo-size: 12px;
  background:
    radial-gradient(ellipse at 27% 19%, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, .32) 14%, rgba(255, 255, 255, .08) 34%, transparent 58%),
    radial-gradient(ellipse at 72% 82%, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .22) 24%, transparent 56%),
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--coin-a) 95%, #fff 5%) 0%, color-mix(in srgb, var(--coin-b) 88%, #fff 12%) 34%, var(--coin-b) 50%, color-mix(in srgb, var(--coin-dark) 86%, #000 14%) 76%, color-mix(in srgb, var(--coin-a) 82%, #fff 18%) 100%),
    conic-gradient(from 220deg, color-mix(in srgb, var(--coin-dark) 90%, #000 10%), var(--coin-a), color-mix(in srgb, var(--coin-a) 78%, #fff 22%), var(--coin-b), var(--coin-dark), var(--coin-a));
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, .48),
    inset 4px 0 9px rgba(255, 255, 255, .13),
    inset -6px -8px 12px rgba(0, 0, 0, .48),
    inset 0 0 18px color-mix(in srgb, var(--coin-a) 18%, transparent),
    0 1px 0 rgba(255, 255, 255, .12),
    0 11px 19px rgba(0, 0, 0, .34),
    0 0 var(--coin-halo-size) var(--gem-glow);
}

.pro-badge-gem::before {
  background:
    repeating-conic-gradient(from 4deg, color-mix(in srgb, var(--coin-a) 86%, #fff 14%) 0 8deg, color-mix(in srgb, var(--coin-dark) 76%, #000 24%) 13deg 17deg, transparent 22deg 30deg),
    conic-gradient(from 180deg, var(--coin-dark), color-mix(in srgb, var(--coin-a) 90%, #fff 10%), var(--coin-b), color-mix(in srgb, var(--coin-dark) 86%, #000 14%), var(--coin-a));
  -webkit-mask: radial-gradient(circle, transparent 0 53%, rgba(0, 0, 0, .28) 55%, #000 61% 72%, rgba(0, 0, 0, .36) 76%, transparent 81%);
  mask: radial-gradient(circle, transparent 0 53%, rgba(0, 0, 0, .28) 55%, #000 61% 72%, rgba(0, 0, 0, .36) 76%, transparent 81%);
  opacity: var(--coin-ring-opacity);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--coin-a) 52%, transparent));
}

.pro-badge-gem::after {
  background:
    linear-gradient(126deg, transparent 0%, rgba(255, 255, 255, .08) 12%, rgba(255, 255, 255, .58) 23%, rgba(255, 255, 255, .2) 34%, rgba(255, 255, 255, .04) 46%, transparent 62%),
    radial-gradient(ellipse at 36% 24%, rgba(255, 255, 255, .36) 0%, rgba(255, 255, 255, .12) 28%, transparent 58%),
    radial-gradient(ellipse at 76% 82%, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, .13) 30%, transparent 62%);
  opacity: var(--coin-shine-opacity);
}

.pro-gem-core {
  background:
    radial-gradient(ellipse at 30% 18%, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .14) 26%, transparent 54%),
    radial-gradient(ellipse at 68% 78%, rgba(0, 0, 0, .48) 0%, rgba(0, 0, 0, .16) 34%, transparent 66%),
    conic-gradient(from 210deg, transparent 0 12%, color-mix(in srgb, var(--coin-a) 20%, transparent) 19%, transparent 27% 63%, color-mix(in srgb, var(--coin-a) 16%, transparent) 74%, transparent 84%),
    radial-gradient(circle, color-mix(in srgb, var(--coin-inner) 70%, #fff 30%) 0 30%, color-mix(in srgb, var(--coin-inner) 86%, var(--coin-a) 14%) 58%, var(--coin-inner) 100%);
}

.pro-gem-core::before {
  background:
    conic-gradient(from 12deg, transparent 0 16%, rgba(255, 255, 255, .5) 22%, transparent 32% 68%, rgba(255, 255, 255, .24) 77%, transparent 88%),
    repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--coin-a) 45%, transparent) 0 4deg, transparent 4deg 20deg);
  opacity: var(--coin-inner-detail);
}

.pro-gem-core::after {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--coin-logo) 96%, #fff 4%), color-mix(in srgb, var(--coin-logo) 62%, #000 38%));
}

.pro-badge-level-bronze {
  --coin-ring-opacity: .18;
  --coin-shine-opacity: .28;
  --coin-inner-detail: .08;
  --coin-halo-size: 10px;
}

.pro-badge-level-silver {
  --coin-ring-opacity: .34;
  --coin-shine-opacity: .4;
  --coin-inner-detail: .16;
  --coin-halo-size: 12px;
}

.pro-badge-level-gold {
  --coin-ring-opacity: .48;
  --coin-shine-opacity: .5;
  --coin-inner-detail: .24;
  --coin-halo-size: 15px;
}

.pro-badge-level-cyan {
  --coin-ring-opacity: .6;
  --coin-shine-opacity: .58;
  --coin-inner-detail: .32;
  --coin-halo-size: 17px;
}

.pro-badge-level-titanium {
  --coin-ring-opacity: .5;
  --coin-shine-opacity: .46;
  --coin-inner-detail: .38;
  --coin-halo-size: 13px;
}

.pro-badge-level-magic {
  --coin-ring-opacity: .78;
  --coin-shine-opacity: .72;
  --coin-inner-detail: .55;
  --coin-halo-size: 22px;
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, .5),
    inset 4px 0 9px rgba(255, 255, 255, .16),
    inset -6px -8px 12px rgba(0, 0, 0, .44),
    inset 0 0 22px rgba(255, 255, 255, .08),
    0 1px 0 rgba(255, 255, 255, .16),
    0 11px 21px rgba(0, 0, 0, .34),
    0 0 12px rgba(53, 213, 255, .38),
    0 0 24px rgba(255, 83, 241, .28);
}

.subscription-alert {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid rgba(232, 171, 91, .34);
  border-radius: calc(8px * var(--radius-scale, 1));
  background: rgba(45, 30, 18, .78);
}

.subscription-alert.expired {
  border-color: rgba(255, 89, 89, .45);
  background: rgba(60, 18, 20, .82);
}

.subscription-alert-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: calc(8px * var(--radius-scale, 1));
  color: #f2b96b;
  background: rgba(242, 185, 107, .12);
}

.subscription-alert.expired .subscription-alert-icon {
  color: var(--danger);
  background: rgba(255, 89, 89, .12);
}

.subscription-alert strong,
.subscription-alert span {
  display: block;
}

.subscription-alert strong {
  font-size: 13px;
}

.subscription-alert span {
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}

.pro-subscription-modal {
  width: min(940px, 96vw) !important;
  max-height: 92vh;
  overflow: auto;
}

.pro-sub-head {
  align-items: flex-start;
}

.pro-sub-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pro-sub-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  padding: 18px 0 4px;
}

.pro-current-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 16px;
  padding: 11px 12px;
  border: 1px solid rgba(141, 217, 168, .24);
  border-radius: calc(8px * var(--radius-scale, 1));
  background: rgba(141, 217, 168, .08);
}

.pro-current-status.expired {
  border-color: rgba(255, 89, 89, .36);
  background: rgba(255, 89, 89, .08);
}

.pro-current-status strong,
.pro-current-status span {
  display: block;
}

.pro-current-status span {
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}

.pro-sub-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, .9fr) minmax(240px, .9fr);
  gap: 14px;
}

.pro-sub-section h3 {
  margin: 0 0 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}

.pro-plan-grid,
.pro-method-grid {
  display: grid;
  gap: 10px;
}

.pro-plan-card,
.pro-pay-method {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: calc(8px * var(--radius-scale, 1));
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.pro-plan-card {
  padding: 13px;
  display: grid;
  gap: 8px;
}

.pro-plan-card:hover,
.pro-pay-method:hover,
.pro-plan-card.active,
.pro-pay-method.active {
  border-color: rgba(232, 171, 91, .72);
  background: rgba(73, 43, 22, .64);
}

.pro-plan-card.active,
.pro-pay-method.active {
  transform: translateY(-1px);
}

.pro-plan-card span {
  color: #f2b96b;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.pro-plan-card strong {
  font-size: 22px;
  line-height: 1;
}

.pro-plan-card small {
  color: var(--muted);
  font-size: 10px;
  margin-left: 3px;
}

.pro-plan-card em {
  color: var(--muted);
  font-style: normal;
  font-size: 11px;
}

.pro-plan-card ul {
  list-style: none;
  padding: 0;
  margin: 2px 0 0;
  display: grid;
  gap: 5px;
}

.pro-plan-card li {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
}

.pro-plan-card li .material-symbols-rounded {
  font-size: 15px;
  color: var(--green);
}

.pro-pay-method {
  padding: 11px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.pro-pay-method .material-symbols-rounded {
  color: #f2b96b;
}

.pro-pay-method strong,
.pro-pay-method small {
  display: block;
}

.pro-pay-method small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  margin-top: 2px;
}

.pro-wallet-password {
  margin-top: 10px;
}

.pro-payment-summary {
  border: 1px solid rgba(232, 171, 91, .28);
  border-radius: calc(8px * var(--radius-scale, 1));
  padding: 13px;
  background: linear-gradient(180deg, rgba(60, 36, 20, .68), rgba(17, 18, 22, .92));
}

.pro-promo-line {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #f2b96b;
  background: rgba(242, 185, 107, .1);
  border: 1px solid rgba(242, 185, 107, .24);
  border-radius: calc(8px * var(--radius-scale, 1));
  padding: 8px;
  font-size: 11px;
  margin-bottom: 10px;
}

.pro-promo-line.recovery {
  color: #9ae6c5;
  border-color: rgba(154, 230, 197, .24);
  background: rgba(154, 230, 197, .08);
}

.pro-payment-summary dl {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}

.pro-payment-summary dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

.pro-payment-summary dt {
  color: var(--muted);
}

.pro-payment-summary dd {
  margin: 0;
  font-weight: 700;
}

.pro-payment-summary .total {
  border-top: 1px solid var(--line);
  padding-top: 9px;
  font-size: 16px;
}

.pro-sub-note {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.pro-pix-box {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: calc(8px * var(--radius-scale, 1));
  padding: 14px;
  display: grid;
  gap: 10px;
  background: var(--surface-2);
}

.pro-pix-box>div:first-child strong,
.pro-pix-box>div:first-child span {
  display: block;
}

.pro-pix-box>div:first-child span {
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}

.pro-pix-box img {
  width: 190px;
  max-width: 100%;
  border-radius: calc(8px * var(--radius-scale, 1));
  background: #fff;
  padding: 8px;
}

.pro-pix-box textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  border-radius: calc(8px * var(--radius-scale, 1));
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  padding: 9px;
  font-size: 11px;
}

.pro-pix-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#pro-pix-status {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 920px) {
  .pro-sub-grid {
    grid-template-columns: 1fr;
  }

  .subscription-alert {
    grid-template-columns: auto 1fr;
  }

  .subscription-alert .button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Comprovantes de transações estilo bancário */
.comprovante-box {
  background: #0d110e;
  border: 1px solid var(--line);
  border-radius: calc(16px * var(--radius-scale, 1));
  padding: 24px;
  margin: 10px 0;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  position: relative;
  overflow: hidden;
}

.comprovante-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  justify-content: center;
}

.comprovante-brand img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.comprovante-brand span {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.comprovante-brand span span {
  color: var(--green);
}

.comprovante-type {
  text-align: center;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 4px;
}

.comprovante-value {
  text-align: center;
  font-family: "Space Grotesk", sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
}

.comprovante-divider {
  border-top: 1px dashed var(--line-strong);
  margin: 16px 0;
  height: 1px;
}

.comprovante-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 11px;
}

.comprovante-grid>div {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.comprovante-grid>div span {
  color: var(--muted);
  flex-shrink: 0;
}

.comprovante-grid>div strong {
  text-align: right;
  font-weight: 500;
  word-break: break-all;
}

.comprovante-full-row {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 4px !important;
}

.comprovante-full-row span {
  text-align: left !important;
}

.comprovante-full-row strong {
  text-align: left !important;
  font-family: inherit;
  white-space: pre-wrap;
}

.comprovante-status {
  padding: 2px 8px;
  border-radius: calc(4px * var(--radius-scale, 1));
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.comprovante-status.status-completed,
.comprovante-status.status-approved,
.comprovante-status.status-paid {
  background: rgba(141, 217, 168, 0.15);
  color: var(--green);
}

.comprovante-status.status-pending,
.comprovante-status.status-processing {
  background: rgba(240, 173, 78, 0.15);
  color: #f0ad4e;
}

.comprovante-status.status-rejected,
.comprovante-status.status-failed,
.comprovante-status.status-canceled {
  background: rgba(219, 68, 85, 0.15);
  color: var(--danger);
}

.comprovante-fees {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11px;
}

.comprovante-fees .fee-row {
  display: flex;
  justify-content: space-between;
}

.comprovante-fees .fee-row.total {
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.comprovante-footer {
  margin-top: 24px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--line);
  border-radius: calc(8px * var(--radius-scale, 1));
  text-align: center;
  font-size: 9px;
}

.comprovante-footer span {
  display: block;
  color: var(--muted);
  margin-bottom: 2px;
}

.comprovante-footer strong {
  font-family: monospace;
  font-size: 10px;
  color: var(--text);
  word-break: break-all;
}

/* Custom Plan Comparison Tabs Style */
.plans-tab-container .tab-btn {
  padding: 8px 20px;
  border-radius: calc(25px * var(--radius-scale, 1));
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--muted);
  transition: all 0.25s ease;
}

.plans-tab-container #btn-tab-pro.active {
  background: var(--green) !important;
  color: var(--surface) !important;
}

.plans-tab-container #btn-tab-advanced.active {
  background: #ffb74d !important;
  color: var(--surface) !important;
}

/* Nota Fiscal de Serviços Eletrônica (NFS-e) Style */
.nfse-box {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #111111 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  padding: 15px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
  margin: 10px 0 !important;
  position: relative !important;
  border-radius: 4px !important;
}

.nfse-table {
  width: 100% !important;
  border: 1px solid #000000 !important;
  border-collapse: collapse !important;
  margin-bottom: 10px !important;
}

.nfse-table td,
.nfse-table th {
  border: 1px solid #000000 !important;
  padding: 6px 8px !important;
  vertical-align: top !important;
  color: #000000 !important;
}

.nfse-table th {
  background: #f0f0f0 !important;
  font-weight: bold !important;
  text-align: left !important;
}

.nfse-section-title {
  background: #e5e5e5 !important;
  font-weight: bold !important;
  text-align: center !important;
  font-size: 10px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

.nfse-desc-field {
  min-height: 80px !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

.nfse-tax-grid {
  width: 100% !important;
  border: 1px solid #000000 !important;
  border-collapse: collapse !important;
}

.nfse-tax-grid td {
  border: 1px solid #000000 !important;
  padding: 4px !important;
  text-align: center !important;
  font-size: 9px !important;
  color: #000000 !important;
}

.nfse-tax-grid th {
  border: 1px solid #000000 !important;
  padding: 4px !important;
  background: #f5f5f5 !important;
  font-size: 9px !important;
  font-weight: bold !important;
  text-align: center !important;
  color: #000000 !important;
}

/* Animations and tweaks for Bank-Style Transfers */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0.9;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bank-loader .spinner {
  border-color: rgba(255, 255, 255, 0.05);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.legal-consent {
  display: flex !important;
  align-items: flex-start;
  gap: 9px;
  font-size: 10px;
  line-height: 1.45;
  color: var(--muted);
}

.legal-consent.hidden {
  display: none !important;
}

.legal-consent input {
  width: 16px !important;
  min-width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: var(--green);
}

.legal a,
.legal-consent a {
  color: var(--green);
}

.audit-filters {
  display: grid;
  grid-template-columns: 180px minmax(240px, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: calc(10px * var(--radius-scale, 1));
  margin-bottom: 14px;
}

.audit-filters label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.audit-list {
  display: grid;
  gap: 6px;
}

.audit-row {
  width: 100%;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 130px;
  gap: 12px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: calc(9px * var(--radius-scale, 1));
  background: rgba(255, 255, 255, 0.015);
  color: var(--text);
  text-align: left;
}

.audit-row:hover {
  border-color: rgba(82, 255, 137, 0.35);
}

.audit-row span {
  min-width: 0;
}

.audit-row strong,
.audit-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-row small {
  color: var(--muted);
  font-size: 9px;
  margin-top: 3px;
}

.audit-method {
  padding: 5px 4px;
  border-radius: calc(6px * var(--radius-scale, 1));
  font-size: 9px;
  font-weight: 800;
  text-align: center;
}

.audit-method.ok {
  color: var(--green);
  background: rgba(82, 255, 137, 0.08);
}

.audit-method.failed {
  color: var(--danger);
  background: rgba(255, 91, 91, 0.08);
}

@media (max-width: 760px) {
  .audit-filters {
    grid-template-columns: 1fr;
  }

  .audit-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .audit-row>span:last-child {
    grid-column: 2;
  }
}

/* Public incentive privacy and conversion telemetry */
.field-optional {
  margin-left: 6px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  text-transform: none;
}

.support-contact-note {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.8;
  margin-top: 6px;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(0, 212, 223, .18);
  border-radius: calc(10px * var(--radius-scale, 1));
  background: rgba(0, 212, 223, .055);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.support-contact-note .material-symbols-rounded {
  flex: 0 0 auto;
  color: var(--green);
  font-size: 17px;
}

.qr-analytics-kpis {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

.qr-analytics-kpis article {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(141, 217, 168, 0.1);
  border-radius: calc(16px * var(--radius-scale, 1));
  background: rgba(141, 217, 168, 0.02);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}

.qr-analytics-kpis article::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 0%, rgba(141, 217, 168, 0.15), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.qr-analytics-kpis article:hover {
  transform: translateY(-4px);
  border-color: rgba(141, 217, 168, 0.4);
  box-shadow: inset 0 0 0 1px rgba(141, 217, 168, 0.1), 0 12px 30px rgba(66, 180, 112, 0.15);
}

.qr-analytics-kpis article:hover::before {
  opacity: 1;
}

.qr-analytics-kpis strong {
  font-size: clamp(20px, 3vw, 28px);
}

.qr-activity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 16px 0;
}

.qr-activity-row,
.qr-attempt-row,
.qr-recent-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.2s ease, transform 0.2s ease;
  border-radius: 8px;
  margin-bottom: 2px;
}

.qr-activity-row:last-child,
.qr-attempt-row:last-child,
.qr-recent-row:last-child {
  border-bottom: none;
}

.qr-activity-row:hover,
.qr-attempt-row:hover,
.qr-recent-row:hover {
  background: rgba(141, 217, 168, 0.04);
  transform: translateX(4px);
}

.qr-activity-row span,
.qr-recent-row span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(141, 217, 168, 0.1);
  color: var(--green);
  font-size: 18px;
}

.qr-activity-row:last-child,
.qr-attempt-row:last-child {
  border-bottom: 0;
}

.qr-activity-row>span:first-child {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: calc(9px * var(--radius-scale, 1));
  background: rgba(0, 212, 223, .08);
  color: var(--green);
}

.qr-activity-row strong,
.qr-activity-row small,
.qr-attempt-row strong,
.qr-attempt-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qr-activity-row small,
.qr-attempt-row small,
.qr-activity-row time {
  color: var(--muted);
  font-size: 9px;
}

.public-activity-panel {
  margin-top: 16px;
}

.public-activity-panel .audit-filters {
  grid-template-columns: 140px 140px minmax(220px, 1fr) auto;
}

.public-activity-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.public-activity-stats article {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: calc(10px * var(--radius-scale, 1));
  background: var(--surface-2);
}

.public-activity-stats article>span {
  color: var(--green);
}

.public-activity-stats small,
.public-activity-stats strong {
  display: block;
}

.public-activity-stats small {
  color: var(--muted);
  font-size: 9px;
}

.public-activity-list {
  display: grid;
  gap: 6px;
}

.public-activity-row {
  width: 100%;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 140px;
  gap: 12px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: calc(9px * var(--radius-scale, 1));
  background: rgba(255, 255, 255, .015);
  color: var(--text);
  text-align: left;
}

.public-activity-row:hover {
  border-color: rgba(0, 212, 223, .35);
}

.public-activity-row strong,
.public-activity-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-activity-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

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

  .public-activity-panel .audit-filters,
  .public-activity-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {

  .public-activity-panel .audit-filters,
  .public-activity-stats {
    grid-template-columns: 1fr;
  }

  .public-activity-row {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .public-activity-row>span:last-child {
    grid-column: 2;
  }

  .qr-activity-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .qr-activity-row time {
    grid-column: 2;
  }
}

/* QRLives: compact, high-contrast and OBS-safe */
.live-qr-card.qr-widget-card {
  --qr-card-width: 320px;
  --qr-widget-size: 260px;
  width: min(var(--qr-card-width), 100%);
  height: auto;
  min-height: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-inline: auto;
  padding: 14px 17px 15px;
  overflow: visible;
  box-sizing: border-box;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .28);
  transform-style: flat;
}

.qr-widget-heading {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  font-size: 11px;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.qr-widget-heading strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qr-widget-live-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #ff5268;
  box-shadow: 0 0 0 4px rgba(255, 82, 104, .13);
}

.qr-widget-frame {
  position: relative;
  width: min(var(--qr-widget-size), 100%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 7px solid var(--qr-code-bg, #fff);
  border-radius: calc(10px * var(--radius-scale, 1));
  background: var(--qr-code-bg, #fff);
  box-shadow: 0 7px 20px rgba(0, 0, 0, .22);
}

.qr-widget-frame .qr-card-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  image-rendering: auto;
}

.qr-widget-center-logo {
  position: absolute;
  inset: 50% auto auto 50%;
  width: clamp(30px, 16%, 46px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 4px;
  border-radius: calc(9px * var(--radius-scale, 1));
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 9px rgba(0, 0, 0, .25);
}

.qr-widget-center-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: calc(6px * var(--radius-scale, 1));
}

.qr-widget-footer {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  text-align: center;
}

.qr-widget-footer strong {
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.qr-widget-footer code {
  max-width: 100%;
  overflow: hidden;
  padding: 3px 7px;
  border-radius: calc(6px * var(--radius-scale, 1));
  background: rgba(0, 0, 0, .24);
  color: inherit;
  font: 700 9px "DM Sans", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-qr-card.qr-layout-qrOnly {
  width: min(var(--qr-widget-size), 100%);
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none;
}

.qr-layout-qrOnly .qr-widget-frame {
  width: 100%;
  border-width: 0;
  border-radius: 0;
  box-shadow: none;
}

.qr-size-control output {
  float: right;
  color: var(--green);
  font-weight: 800;
}

.qr-customizer-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 10px 0 0;
  padding: 9px 10px;
  border: 1px solid rgba(0, 212, 223, .14);
  border-radius: calc(9px * var(--radius-scale, 1));
  background: rgba(0, 212, 223, .045);
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

.qr-customizer-hint .material-symbols-rounded {
  flex: 0 0 auto;
  color: var(--green);
  font-size: 15px;
}

.qr-visibility-controls {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.qr-visibility-controls label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 10px;
}

.qr-visibility-controls input {
  accent-color: var(--green);
}

.widget-precision-section {
  display: grid;
  gap: 10px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.widget-precision-section h4 {
  margin: 0;
  color: var(--green);
  font-size: 12px;
}

.widget-precision-section>p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

.widget-scale-frame {
  width: 100%;
  display: grid;
  place-items: center;
  opacity: var(--widget-opacity, 1);
  zoom: var(--widget-zoom, 1);
}

.widget-qr-updated img {
  width: 132px;
  height: 132px;
  padding: 5px;
}

.obs-widget-body .qr-widget-card {
  max-width: min(92vw, 390px);
  max-height: 96vh;
}

@media (max-width: 620px) {
  .live-qr-card.qr-widget-card {
    width: min(var(--qr-card-width), 100%);
    padding: 12px 14px 13px;
  }

  .widget-qr-updated img {
    width: min(160px, 70vw);
    height: auto;
    aspect-ratio: 1;
  }
}

.widget-qrlives-showcase {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 340px);
  gap: clamp(18px, 4vw, 42px);
  align-items: center;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid rgba(0, 212, 223, .16);
  border-radius: calc(16px * var(--radius-scale, 1));
  background: #111818;
}

.widget-qrlives-copy h3 {
  margin: 6px 0 8px;
  font: 700 clamp(18px, 2.4vw, 24px) "Space Grotesk", sans-serif;
}

.widget-qrlives-copy p {
  max-width: 620px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.65;
}

.widget-qrlives-copy>code {
  display: block;
  max-width: 620px;
  overflow: hidden;
  margin-bottom: 15px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: calc(8px * var(--radius-scale, 1));
  background: rgba(0, 0, 0, .2);
  color: var(--green);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-qrlives-copy>div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.widget-qrlives-preview {
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 14px;
  border: 1px dashed rgba(0, 212, 223, .18);
  border-radius: calc(13px * var(--radius-scale, 1));
  background: rgba(0, 0, 0, .2);
}

.widget-qrlives-preview .qr-widget-card {
  --qr-widget-size: 240px;
}

.community-empty-state {
  min-height: 360px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.community-empty-state>.material-symbols-rounded {
  color: var(--green);
  font-size: 44px;
}

.community-empty-state h2 {
  margin: 4px 0 0;
  font: 700 22px "Space Grotesk", sans-serif;
}

.community-empty-state p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

/* Final precedence for refreshed account, audit and cash layouts. */
.support-card {
  position: relative;
}

.audit-row {
  grid-template-columns: auto minmax(0, 1fr) auto 32px;
}

.admin-cash-filters {
  margin-bottom: 16px;
}

.marketplace-benefits-panel {
  margin-top: 12px;
}

.youtube-invite-body {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
  padding: 18px;
  border-radius: calc(14px * var(--radius-scale, 1));
  background: #101a1a;
}

.youtube-invite-body>.material-symbols-rounded {
  font-size: 42px;
  color: #ff4e45;
}

.youtube-invite-body>div {
  display: grid;
  gap: 3px;
}

.youtube-invite-body span {
  color: var(--muted);
  font-size: 10px;
}

.invoice-disclaimer {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.5;
  text-align: center;
}

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

@media (max-width: 520px) {
  .widget-qrlives-copy>div .button {
    flex: 1 1 150px;
    justify-content: center;
  }

  .widget-qrlives-preview {
    padding: 10px;
  }
}

@media (max-width: 720px) {
  .audit-row {
    grid-template-columns: auto minmax(0, 1fr) 32px;
  }

  .audit-row>span:nth-child(3) {
    grid-column: 2;
  }

  .admin-cash-filters {
    grid-template-columns: 1fr;
  }
}

/* Kickover Premium Badge Animation */
.kickover-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00c7cf, #0b8e93);
  color: #fff;
  font-size: 11px;
  box-shadow: 0 0 10px rgba(0, 199, 207, 0.5);
  position: relative;
  overflow: hidden;
  margin-left: 6px;
}

.kickover-badge::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: rotate(45deg);
  animation: shimmer 2s infinite linear;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }

  100% {
    transform: translateX(100%) rotate(45deg);
  }
}

/* -------------------------------------------------------------
   NEW REDESIGNED PUBLIC INCENTIVES (PAYMENT) UI STYLES
   ------------------------------------------------------------- */

/* Support Form Layout */
.support-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Section Header with Icon */
.sf-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 4px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
}

.sf-section-header .material-symbols-rounded {
  font-size: 18px;
  color: var(--green);
  opacity: 0.85;
}

/* Enhanced Section (Fieldset) Styling */
.sf-section,
.tts-customization {
  border: 1px solid var(--line-strong);
  border-radius: calc(16px * var(--radius-scale, 1));
  padding: 20px 18px 18px;
  margin: 12px 0;
  background: rgba(255, 255, 255, 0.015);
  backdrop-filter: blur(4px);
  transition: border-color 0.25s ease;
}

.sf-section:hover,
.tts-customization:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.sf-section-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
  padding: 0 8px;
}

.sf-section-legend .material-symbols-rounded {
  font-size: 16px;
  color: var(--green);
}

/* TTS Options Grid */
.tts-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 6px;
}

/* TTS Speed Control */
.tts-speed-control {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.tts-speed-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 !important;
}

.tts-speed-text {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

.tts-speed-text #ttsSpeedValue {
  color: var(--green);
  font-weight: 700;
}

/* Custom Range Slider */
.tts-speed-range,
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--surface-3);
  border-radius: calc(6px * var(--radius-scale, 1));
  outline: none;
  cursor: pointer;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.tts-speed-range::-webkit-slider-thumb,
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
  cursor: pointer;
  box-shadow: 0 0 8px rgba(41, 199, 95, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tts-speed-range::-webkit-slider-thumb:hover,
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 14px rgba(41, 199, 95, 0.55);
}

.tts-speed-range::-moz-range-thumb,
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
  cursor: pointer;
  border: none;
  box-shadow: 0 0 8px rgba(41, 199, 95, 0.4);
}

/* Entry and Exit Animations */
@keyframes itemFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes itemFadeOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
}

.item-fade-in {
  animation: itemFadeIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.item-fade-out {
  animation: itemFadeOut 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Combo Items Wrapper */
.combo-items-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Redesigned Premium Combo Item Card */
.combo-item-card {
  position: relative;
  padding: 22px 20px;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--line-strong) !important;
  border-left: 4px solid var(--green) !important;
  border-radius: 16px !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.combo-item-card:hover {
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

/* Remove Button */
.btn-remove-combo-item {
  position: absolute;
  right: 14px;
  top: 14px;
  background: rgba(255, 83, 83, 0.06);
  border: 1px solid rgba(255, 83, 83, 0.18);
  border-radius: calc(8px * var(--radius-scale, 1));
  color: var(--danger);
  padding: 5px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-remove-combo-item:hover {
  background: rgba(255, 83, 83, 0.15);
  border-color: rgba(255, 83, 83, 0.4);
  transform: scale(1.04);
}

.btn-remove-combo-item .material-symbols-rounded {
  font-size: 13px;
}

/* Add Combo Button */
.btn-add-combo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 16px;
  border: 2px dashed var(--line-strong) !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 600;
  padding: 14px !important;
  transition: all 0.22s ease;
}

.btn-add-combo:hover {
  border-color: var(--green) !important;
  color: var(--green) !important;
  background: rgba(41, 199, 95, 0.04) !important;
}

.btn-add-combo .material-symbols-rounded {
  font-size: 18px;
  transition: transform 0.2s ease;
}

.btn-add-combo:hover .material-symbols-rounded {
  transform: rotate(90deg);
}

/* Sleek Preset Voice Chips */
.btn-voice-preset {
  font-size: 9px;
  padding: 4px 10px;
  border-radius: calc(8px * var(--radius-scale, 1));
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
  color: var(--muted);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.18s ease;
}

.btn-voice-preset:hover {
  background: rgba(41, 199, 95, 0.1);
  border-color: var(--green);
  color: var(--text);
  transform: translateY(-1px);
}

.voice-presets-container {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  justify-content: flex-end;
}

/* Combo Summary Card */
.combo-summary-card {
  margin: 8px 0 18px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line-strong);
  border-radius: calc(14px * var(--radius-scale, 1));
  font-size: 11px;
  backdrop-filter: blur(4px);
}

.combo-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  color: var(--muted);
}

.combo-summary-row strong {
  color: var(--text);
  font-weight: 600;
}

.combo-summary-total {
  border-top: 1px solid var(--line-strong);
  margin-top: 6px;
  padding-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--green) !important;
}

.combo-summary-total span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
}

.combo-summary-total span .material-symbols-rounded {
  font-size: 16px;
  opacity: 0.85;
}

.combo-summary-total strong {
  color: var(--green) !important;
  font-size: 15px;
}

/* Redesigned Payment Modes Selector Grid */
.payment-modes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  border: 1px solid var(--line-strong);
  border-radius: calc(16px * var(--radius-scale, 1));
  margin: 12px 0;
  padding: 18px 16px 16px;
  background: rgba(255, 255, 255, 0.015);
}

.payment-mode-option {
  position: relative;
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line-strong);
  border-radius: calc(14px * var(--radius-scale, 1));
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  gap: 8px;
}

.payment-mode-option:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.payment-mode-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.payment-mode-option:has(input[type="radio"]:checked) {
  border-color: var(--green) !important;
  background: rgba(41, 199, 95, 0.07) !important;
  box-shadow: 0 0 20px rgba(41, 199, 95, 0.14), inset 0 0 0 1px rgba(41, 199, 95, 0.1);
}

.payment-mode-option:has(input[type="radio"]:checked)::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 10px;
  font-weight: 700;
  color: var(--green);
  background: rgba(41, 199, 95, 0.12);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.payment-mode-option .material-symbols-rounded {
  font-size: 28px;
  color: var(--green);
  transition: transform 0.2s ease;
}

.payment-mode-option:hover .material-symbols-rounded {
  transform: scale(1.12);
}

.payment-mode-option strong {
  font-size: 11px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: var(--text);
}

.payment-mode-option small {
  font-size: 9px;
  color: var(--muted);
  line-height: 1.35;
  display: block;
}

/* Wallet Auth Box */
.wallet-auth-box {
  margin-top: 6px;
  background: rgba(0, 0, 0, 0.25);
  padding: 16px 18px;
  border-radius: calc(14px * var(--radius-scale, 1));
  border: 1px solid var(--line-strong);
  animation: itemFadeIn 0.25s ease forwards;
}

.wallet-auth-label {
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.wallet-auth-label .material-symbols-rounded {
  font-size: 16px;
  color: var(--green);
}

.wallet-auth-label input {
  flex: 1 1 100%;
}

/* Modern inputs & textareas inside payment form */
.supporter-fields-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.supporter-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.support-form .field input,
.support-form .field select,
.support-form .field textarea {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  color: var(--text) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.support-form .field input:hover,
.support-form .field select:hover,
.support-form .field textarea:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.support-form .field input:focus,
.support-form .field select:focus,
.support-form .field textarea:focus {
  border-color: var(--green) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 0 0 4px rgba(41, 199, 95, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  outline: none !important;
}

/* Money Input Group */
.money-input {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--line-strong);
  border-radius: calc(12px * var(--radius-scale, 1));
  padding-left: 14px;
  transition: all 0.2s ease;
}

.money-input:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(41, 199, 95, 0.15);
  background: rgba(0, 0, 0, 0.35);
}

.money-input span {
  color: var(--green);
  font-weight: 700;
  font-size: 12px;
}

.money-input input {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 6px !important;
}

/* Support Footer */
.support-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 0 10px;
  font-size: 10px;
  color: var(--muted-2);
  border-top: 1px solid var(--line);
  margin-top: 10px;
}

.support-footer .material-symbols-rounded {
  font-size: 13px;
}

/* Responsive Overrides */
@media (max-width: 600px) {
  .payment-modes-grid {
    grid-template-columns: 1fr;
    padding: 14px 12px;
  }

  .payment-mode-option {
    flex-direction: row;
    text-align: left;
    padding: 14px 16px;
    gap: 12px;
  }

  .payment-mode-option .material-symbols-rounded {
    font-size: 24px;
  }

  .payment-mode-option:has(input[type="radio"]:checked)::after {
    top: 50%;
    transform: translateY(-50%);
  }

  .combo-item-card {
    padding: 18px 14px;
  }

  .tts-options-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sf-section,
  .tts-customization {
    padding: 16px 14px 14px;
  }
}

@media (max-width: 580px) {
  .supporter-contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .combo-summary-total {
    font-size: 12px;
  }

  .combo-summary-total strong {
    font-size: 13px;
  }
}


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

  .admin-workspace-menu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 620px) {
  .admin-workspace-menu {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================
   KICKOVER MARKETPLACE & CHAT MVP
   ========================================= */

.kickover-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.kickover-filters {
  width: 250px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 80px;
}

.kickover-filters label {
  font-size: 13px;
  color: var(--muted);
  display: block;
  margin-bottom: 6px;
}

.kickover-grid {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.kickover-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.kickover-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  border-color: #00c7cf;
}

.kickover-card-media {
  width: 100%;
  height: 160px;
  background: #000;
  position: relative;
}

.kickover-card-media img,
.kickover-card-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kickover-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.kickover-card-seller {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.kickover-card-seller img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.kickover-card-seller span {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
}

.kickover-card-title {
  font-size: 15px;
  color: #fff;
  line-height: 1.4;
  margin: 0 0 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kickover-card-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kickover-card-price {
  font-size: 16px;
  font-weight: bold;
  color: var(--text);
}

.kickover-badge {
  color: #00e5ff;
  display: inline-flex;
  align-items: center;
}

/* Chat Layout */
.chat-layout {
  display: flex;
  height: calc(100vh - 140px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.chat-sidebar {
  width: 300px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.2);
}

.chat-sidebar-header {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  font-weight: bold;
}

.chat-order-list {
  flex-grow: 1;
  overflow-y: auto;
}

.chat-order-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.2s;
}

.chat-order-item:hover,
.chat-order-item.active {
  background: rgba(0, 199, 207, 0.05);
}

.chat-order-item-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 4px;
  color: var(--text);
}

.chat-order-item-meta {
  font-size: 12px;
  color: var(--muted);
}

.chat-main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.chat-header {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
}

.chat-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-header-info img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.chat-messages {
  flex-grow: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-bubble {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: calc(12px * var(--radius-scale, 1));
  font-size: 14px;
  line-height: 1.4;
  position: relative;
}

.chat-bubble.sent {
  align-self: flex-end;
  background: #00c7cf;
  color: #000;
  border-bottom-right-radius: 2px;
}

.chat-bubble.received {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  border-bottom-left-radius: 2px;
}

.chat-system-message {
  align-self: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 6px 12px;
  border-radius: calc(16px * var(--radius-scale, 1));
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 8px 0;
}

.chat-input-area {
  padding: 16px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  gap: 12px;
}

.chat-input-area input {
  flex-grow: 1;
  padding: 12px 16px;
  border-radius: calc(24px * var(--radius-scale, 1));
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
}

.chat-input-area input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.chat-status-banner {
  padding: 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}

.chat-status-banner.cancelled {
  background: rgba(255, 68, 68, 0.1);
  color: #ff4444;
}

.chat-status-banner.awaiting_payment {
  background: rgba(0, 199, 207, 0.1);
  color: #00c7cf;
}

/* Kickover Responsive */
@media (max-width: 900px) {
  .kickover-layout {
    flex-direction: column;
  }

  .kickover-filters {
    width: 100%;
    position: static;
  }

  .chat-layout {
    flex-direction: column;
    height: auto;
    min-height: calc(100vh - 140px);
  }

  .chat-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--line);
    max-height: 250px;
  }

  .chat-messages {
    min-height: 400px;
  }
}

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

  .chat-bubble {
    max-width: 85%;
  }
}

/* --- REDESIGN AUTH SCREENS --- */

/* Compacting .auth-brand */
.auth-brand {
  padding: 30px 4vw !important;
  /* Reduced padding */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-copy {
  margin-top: 8vh !important;
  /* Reduced margin */
}

.hero-copy h1 {
  font-size: clamp(32px, 4vw, 50px) !important;
  /* Smaller font */
  margin: 12px 0 !important;
}

.hero-copy p {
  font-size: 14px !important;
  /* Smaller text */
  margin-bottom: 20px !important;
  line-height: 1.5 !important;
}

.trust-note {
  margin-top: 20px !important;
  /* Reduced margin */
  padding: 10px 14px !important;
}

/* Compacting .auth-card */
.auth-panel {
  padding: 20px !important;
}

.auth-card {
  padding: 24px !important;
  /* Reduced padding */
  width: min(380px, 100%) !important;
  /* Slightly narrower */
  background: rgba(9, 9, 11, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(20px) !important;
  /* Glassmorphism enhancement */
  -webkit-backdrop-filter: blur(20px) !important;
  position: relative;
  overflow: hidden;
  /* For the loading overlay */
}

.auth-card h2 {
  font-size: 24px !important;
  /* Smaller title */
  margin: 0 0 4px !important;
}

.auth-card>p {
  margin: 0 0 16px !important;
  font-size: 13px !important;
}

.auth-tabs {
  margin-bottom: 16px !important;
  padding: 3px !important;
}

.auth-tabs button {
  padding: 8px !important;
  font-size: 13px !important;
}

.auth-card form {
  gap: 12px !important;
  /* Tighter gap */
}

/* Input Groups - Floating Labels */
.input-group {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.input-icon {
  position: absolute;
  left: 14px;
  color: var(--muted);
  font-size: 18px !important;
  pointer-events: none;
  z-index: 2;
  transition: color 0.3s ease;
}

.input-group input,
.input-group select {
  width: 100%;
  padding: 20px 14px 8px 40px !important;
  /* Space for icon and floating label */
  color: var(--text) !important;
  background: rgba(16, 20, 17, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  transition: all 0.3s ease !important;
}

.input-group select {
  appearance: none;
  cursor: pointer;
}

.input-group input:focus,
.input-group select:focus {
  background: rgba(16, 20, 17, 0.8) !important;
  border-color: var(--green) !important;
  box-shadow: 0 0 0 2px rgba(41, 199, 95, 0.15) !important;
}

.input-group input:focus~.input-icon {
  color: var(--green);
}

.input-group label {
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-2);
  font-size: 13px !important;
  font-weight: 500 !important;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 2;
}

.input-group input:focus~label,
.input-group input:not(:placeholder-shown)~label,
.input-group select~label {
  top: 12px;
  font-size: 10px !important;
  color: var(--green);
}

.input-group input:-webkit-autofill~label {
  top: 12px;
  font-size: 10px !important;
  color: var(--green);
}

/* Toggle password */
.toggle-password {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: var(--muted);
  padding: 0;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-password:hover {
  color: var(--text);
}

/* Password Strength */
.password-strength-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: -4px;
}

.password-strength-container.hidden {
  display: none !important;
}

.password-strength-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: calc(2px * var(--radius-scale, 1));
  overflow: hidden;
}

.strength-fill {
  height: 100%;
  width: 0%;
  transition: all 0.3s ease;
  background: var(--danger);
}

.strength-fill.weak {
  background: var(--danger);
  width: 33%;
}

.strength-fill.medium {
  background: #f4c85a;
  width: 66%;
}

.strength-fill.strong {
  background: var(--green);
  width: 100%;
}

.strength-text {
  font-size: 10px;
  color: var(--muted-2);
  text-align: right;
  font-weight: 600;
}

/* Server Loading Overlay */
.auth-loading-overlay {
  position: fixed;
  /* Make it cover the whole viewport or just the card? User said "overlay". Let's make it cover the card or the whole auth-view. Actually auth-view */
  inset: 0;
  background: rgba(5, 5, 5, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.auth-loading-overlay.hidden {
  display: none !important;
}

.auth-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: auth-spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  margin-bottom: 16px;
}

#auth-loading-text {
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  animation: pulse-text 1.5s infinite alternate;
}

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

@keyframes pulse-text {
  from {
    opacity: 0.6;
  }

  to {
    opacity: 1;
  }
}

/* QR Code Improvements */
.qr-login-block {
  margin-top: 16px !important;
}

.qr-login-preview {
  position: relative;
  overflow: hidden;
  border-radius: calc(14px * var(--radius-scale, 1));
}

.qr-scanner-line {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: var(--green);
  box-shadow: 0 0 10px var(--green), 0 0 20px var(--green);
  animation: scan-anim 2.5s linear infinite;
  z-index: 10;
}

@keyframes scan-anim {
  0% {
    top: 0%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

/* Fix for .register-field hidden toggle */
.input-group.register-field.hidden {
  display: none !important;
}

/* =========================================================
   COMMUNITY PAGE - AMAZON STYLE LAYOUT
   ========================================================= */
.community-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 20px;
}

.community-top-bar {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 16px 24px;
  border-radius: calc(16px * var(--radius-scale, 1));
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.community-search-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.community-search-wrapper .material-symbols-rounded {
  position: absolute;
  left: 16px;
  color: var(--muted);
  font-size: 22px;
}

.community-search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 14px 16px 14px 48px;
  border-radius: calc(12px * var(--radius-scale, 1));
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px;
  transition: all 0.2s;
}

.community-search-input:focus {
  outline: none;
  border-color: var(--green);
  background: rgba(0, 230, 118, 0.05);
  box-shadow: 0 0 0 4px rgba(0, 230, 118, 0.1);
}

.community-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex: 1;
}

.community-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(16px * var(--radius-scale, 1));
  padding: 24px;
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.community-sidebar-group h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin: 0 0 12px;
  font-weight: 700;
}

.community-filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  transition: color 0.2s;
}

.community-filter-option:hover {
  color: var(--green);
}

.community-filter-option input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--line-strong);
  border-radius: calc(4px * var(--radius-scale, 1));
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}

.community-filter-option input[type="checkbox"]:checked {
  background: var(--green);
  border-color: var(--green);
}

.community-filter-option input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.community-main {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(16px * var(--radius-scale, 1));
  min-height: 500px;
  display: flex;
  flex-direction: column;
  padding: 30px;
}

.community-empty-state {
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.community-empty-state .icon-wrapper {
  width: 80px;
  height: 80px;
  background: rgba(0, 230, 118, 0.1);
  border: 1px solid rgba(0, 230, 118, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  font-size: 36px;
  margin-bottom: 8px;
}

.community-empty-state h3 {
  font-size: 20px;
  margin: 0;
  color: var(--text);
}

.community-empty-state p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
  max-width: 320px;
  line-height: 1.5;
  height: 2px;
  background: var(--green);
  box-shadow: 0 0 10px var(--green), 0 0 20px var(--green);
  animation: scan-anim 2.5s linear infinite;
  z-index: 10;
}

@keyframes scan-anim {
  0% {
    top: 0%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

/* Fix for .register-field hidden toggle */
.input-group.register-field.hidden {
  display: none !important;
}

/* =========================================================
   COMMUNITY PAGE - AMAZON STYLE LAYOUT
   ========================================================= */
.community-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 20px;
}

.community-top-bar {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 16px 24px;
  border-radius: calc(16px * var(--radius-scale, 1));
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.community-search-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.community-search-wrapper .material-symbols-rounded {
  position: absolute;
  left: 16px;
  color: var(--muted);
  font-size: 22px;
}

.community-search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 14px 16px 14px 48px;
  border-radius: calc(12px * var(--radius-scale, 1));
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px;
  transition: all 0.2s;
}

.community-search-input:focus {
  outline: none;
  border-color: var(--green);
  background: rgba(0, 230, 118, 0.05);
  box-shadow: 0 0 0 4px rgba(0, 230, 118, 0.1);
}

.community-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex: 1;
}

.community-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(16px * var(--radius-scale, 1));
  padding: 24px;
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.community-sidebar-group h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin: 0 0 12px;
  font-weight: 700;
}

.community-filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  transition: color 0.2s;
}

.community-filter-option:hover {
  color: var(--green);
}

.community-filter-option input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--line-strong);
  border-radius: calc(4px * var(--radius-scale, 1));
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}

.community-filter-option input[type="checkbox"]:checked {
  background: var(--green);
  border-color: var(--green);
}

.community-filter-option input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.community-main {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(16px * var(--radius-scale, 1));
  min-height: 500px;
  display: flex;
  flex-direction: column;
  padding: 30px;
}

.community-empty-state {
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.community-empty-state .icon-wrapper {
  width: 80px;
  height: 80px;
  background: rgba(0, 230, 118, 0.1);
  border: 1px solid rgba(0, 230, 118, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  font-size: 36px;
  margin-bottom: 8px;
}

.community-empty-state h3 {
  font-size: 20px;
  margin: 0;
  color: var(--text);
}

.community-empty-state p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
  max-width: 320px;
  line-height: 1.5;
}

.community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.community-item-card {
  border-color: rgba(255, 255, 255, .075) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.community-item-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 230, 118, .26) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .22);
}

.community-item-card .card-body strong {
  overflow-wrap: anywhere;
}

.community-like-button {
  appearance: none;
  border: 1px solid rgba(255, 92, 154, .24);
  background: rgba(255, 255, 255, .035);
  color: #ff6aa8;
  border-radius: calc(999px * var(--radius-scale, 1));
  min-width: 72px;
  height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: 700 12px/1 "Space Grotesk", sans-serif;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.community-like-button .material-symbols-rounded {
  font-size: 18px;
  line-height: 1;
}

.community-like-button:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 92, 154, .52);
  background: rgba(255, 92, 154, .11);
  box-shadow: 0 10px 24px rgba(255, 0, 127, .12);
}

.community-like-button.is-liked {
  color: #fff;
  border-color: rgba(255, 52, 132, .7);
  background: linear-gradient(135deg, #ff2f87, #ff6aa8);
  box-shadow: 0 12px 30px rgba(255, 47, 135, .22);
}

.community-like-button:disabled {
  opacity: .65;
  cursor: wait;
  transform: none;
}

.community-like-button-large {
  min-width: 112px;
  height: 42px;
  margin-top: 8px;
  font-size: 15px;
}

.community-profile-shell {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(18px * var(--radius-scale, 1));
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
}

.community-profile-banner {
  min-height: 220px;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.community-profile-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 34px 24px;
  margin-top: -58px;
}

.community-profile-identity {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  min-width: 0;
}

.community-profile-avatar {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  padding: 6px;
  background: #090a0f;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
  flex: 0 0 auto;
}

.community-profile-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.community-profile-copy {
  min-width: 0;
  padding-bottom: 8px;
}

.community-profile-copy h1 {
  margin: 5px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(24px, 4vw, 36px);
}

.community-profile-copy h1 .material-symbols-rounded {
  color: var(--green);
  font-size: 25px;
}

.community-profile-copy p {
  margin: 4px 0 8px;
  color: var(--muted);
}

.community-profile-copy small {
  display: block;
  max-width: 620px;
  color: var(--text-soft);
  line-height: 1.5;
}

.community-profile-actions {
  padding-bottom: 10px;
  flex: 0 0 auto;
}

.community-profile-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
  padding: 0 34px 28px;
}

.community-profile-stats article {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: calc(12px * var(--radius-scale, 1));
  background: rgba(255, 255, 255, .035);
  padding: 14px;
}

.community-profile-stats strong {
  display: block;
  color: var(--text);
  font-size: 18px;
}

.community-profile-stats span {
  color: var(--muted);
  font-size: 12px;
}

.community-profile-creations {
  padding: 26px 34px 34px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.community-profile-creations>header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.community-profile-creations h3 {
  margin: 2px 0 0;
}

.community-profile-empty {
  grid-column: 1 / -1;
  min-height: 180px;
  border: 1px dashed rgba(255, 255, 255, .14);
  border-radius: calc(14px * var(--radius-scale, 1));
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--muted);
  text-align: center;
  padding: 24px;
}

.community-profile-empty .material-symbols-rounded {
  color: var(--green);
  font-size: 34px;
}

.community-profile-empty strong {
  color: var(--text);
}

@media (max-width: 768px) {
  .community-layout {
    flex-direction: column;
  }

  .community-sidebar {
    width: 100%;
    position: static;
  }

  .community-profile-header,
  .community-profile-creations>header {
    align-items: flex-start;
    flex-direction: column;
  }

  .community-profile-header {
    padding: 0 20px 22px;
    margin-top: -44px;
  }

  .community-profile-identity {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .community-profile-avatar {
    width: 104px;
    height: 104px;
  }

  .community-profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 20px 22px;
  }

  .community-profile-creations {
    padding: 22px 20px;
  }
}

/* =========================================================
   GLOBAL SEARCH DROPDOWN
   ========================================================= */
.top-search {
  position: relative;
}

.search-results-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 320px;
  max-height: 400px;
  background: rgba(18, 18, 18, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line-strong);
  border-radius: calc(12px * var(--radius-scale, 1));
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  overflow-y: auto;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.2s, transform 0.2s;
}

.search-results-dropdown.hidden {
  display: none;
  opacity: 0;
  transform: translateY(-10px);
}

.search-results-dropdown::-webkit-scrollbar {
  width: 6px;
}

.search-results-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.search-results-dropdown::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: calc(10px * var(--radius-scale, 1));
}

.search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  color: var(--text);
  transition: background 0.1s, color 0.1s;
}

.search-item .material-symbols-rounded {
  font-size: 20px;
  color: var(--muted);
  transition: color 0.1s;
}

.search-item-text {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.search-item-text strong {
  font-size: 14px;
  font-weight: 600;
}

.search-item-text small {
  font-size: 11px;
  color: var(--muted);
}

.search-item:hover,
.search-item.selected {
  background: rgba(0, 230, 118, 0.1);
}

.search-item:hover .material-symbols-rounded,
.search-item.selected .material-symbols-rounded,
.search-item:hover strong,
.search-item.selected strong {
  color: var(--green);
}

.search-empty {
  padding: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* --- CREATOR LANDING PAGE --- */
.community-creator-btn {
  margin-left: 12px;
  padding: 0 20px;
  background: #00a8e1 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 15px rgba(0, 168, 225, 0.3) !important;
  transition: all 0.3s ease !important;
}

.community-creator-btn:hover {
  background: #008cc0 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 168, 225, 0.4) !important;
}

.creator-landing-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(180deg, #0f171e 0%, #000000 100%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.4s ease-out;
  overflow-y: auto;
  overflow-x: hidden;
}

.creator-landing-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.creator-landing-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}

.creator-landing-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.creator-landing-hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 600px;
}

.creator-landing-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 30%, rgba(0, 168, 225, 0.15) 0%, transparent 60%);
  z-index: 1;
}

.creator-landing-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.creator-landing-particles::before,
.creator-landing-particles::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: #00a8e1;
  border-radius: 50%;
  box-shadow: 0 0 10px #00a8e1;
  animation: floatParticle 8s infinite ease-in-out alternate;
}

.creator-landing-particles::before {
  top: 20%;
  left: 30%;
}

.creator-landing-particles::after {
  top: 60%;
  right: 25%;
  animation-delay: -3s;
}

@keyframes floatParticle {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.2;
  }

  50% {
    transform: translateY(-40px) scale(1.5);
    opacity: 0.8;
  }

  100% {
    transform: translateY(-80px) scale(1);
    opacity: 0.1;
  }
}

.creator-landing-text {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 800px;
  padding: 40px;
}

.creator-landing-badge {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: calc(4px * var(--radius-scale, 1));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin-bottom: 24px;
  text-transform: uppercase;
}

.creator-landing-text h1 {
  font-size: 48px;
  line-height: 1.2;
  margin-bottom: 24px;
  color: #ffffff;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.creator-landing-text p {
  font-size: 20px;
  color: #aebfd0;
  margin-bottom: 48px;
  line-height: 1.6;
}

.creator-landing-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.creator-btn-cyan {
  background: #00a8e1 !important;
  color: #ffffff !important;
  font-size: 18px !important;
  padding: 0 40px !important;
  height: 56px !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 20px rgba(0, 168, 225, 0.3) !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  transition: all 0.3s ease !important;
}

.creator-btn-cyan:hover {
  background: #008cc0 !important;
  box-shadow: 0 6px 25px rgba(0, 168, 225, 0.5) !important;
  transform: scale(1.02) !important;
}

.creator-btn-green {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 18px !important;
  padding: 0 40px !important;
  height: 56px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  transition: all 0.3s ease !important;
}

.creator-btn-green:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: scale(1.02) !important;
}

.creator-landing-footer {
  position: relative;
  padding: 40px 20px;
  background: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  overflow: hidden;
  z-index: 3;
}

.footer-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 120px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.03);
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: 10px;
}

.footer-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.footer-logo {
  height: 32px;
  filter: brightness(0) invert(1) opacity(0.5);
}

.creator-landing-footer p {
  color: #8197a4;
  font-size: 14px;
  margin: 0;
}

@media (max-width: 768px) {
  .creator-landing-text h1 {
    font-size: 32px;
  }

  .creator-landing-actions {
    flex-direction: column;
  }

  .creator-landing-actions button {
    width: 100%;
  }
}

/* CREATOR STUDIO CSS */
.creator-option-card {
  background: #22222d;
  border: 1px solid #333;
  border-radius: calc(12px * var(--radius-scale, 1));
  padding: 20px;
  width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s;
  color: #fff;
}

.creator-option-card:hover:not(.disabled-option) {
  transform: translateY(-5px);
  border-color: #ff007f;
  box-shadow: 0 5px 15px rgba(255, 0, 127, 0.2);
}

.creator-option-card h3 {
  font-size: 16px;
  margin: 10px 0 5px 0;
}

.creator-option-card p {
  font-size: 12px;
  color: #aaa;
  margin: 0;
  line-height: 1.4;
}

.disabled-option {
  opacity: 0.4;
  cursor: not-allowed;
}

.cs-studio-shell {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  background: #0f0f13;
  color: #fff;
}

.cs-studio-header {
  min-height: 60px;
  border-bottom: 1px solid #2a2a35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  background: #101014;
}

.cs-studio-brand,
.cs-studio-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cs-studio-brand strong {
  font-family: 'Space Grotesk', sans-serif;
  white-space: nowrap;
}

.cs-studio-brand strong span {
  color: #ff007f;
  margin-left: 6px;
}

.cs-studio-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.cs-studio-actions #cs-save-status {
  color: #aaa;
  font-size: 12px;
  margin-right: 4px;
}

/* ==========================================================================
   MEDIA MANAGER / UPLOAD GALLERY (v1b)
   ========================================================================== */
.media-manager-modal {
  display: flex;
  flex-direction: column;
  height: 80vh;
  max-height: 700px;
}
.media-manager-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.media-manager-content {
  flex: 1;
  overflow-y: auto;
  min-height: 200px;
  background: var(--spx-bg-alt);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--spx-border);
}
.media-manager-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.media-manager-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--spx-bg);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
}
.media-manager-item:hover {
  border-color: var(--spx-primary);
  transform: scale(1.02);
}
.media-manager-item img,
.media-manager-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-manager-item.is-audio {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111511;
  color: #00d4df;
  font-size: 32px;
}
.media-manager-item-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 11px;
  padding: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.media-manager-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--spx-text-muted);
  gap: 12px;
  padding: 40px;
}
.media-manager-empty span {
  font-size: 48px;
  color: var(--spx-primary);
  opacity: 0.8;
  animation: floatIcon 3s ease-in-out infinite;
}
@keyframes floatIcon {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}
.media-upload-area {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(0, 212, 223, 0.4);
  border-radius: 16px;
  padding: 40px 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  background: linear-gradient(145deg, rgba(0, 212, 223, 0.02) 0%, rgba(0, 212, 223, 0.05) 100%);
}
.media-upload-area:hover, .media-upload-area.dragover {
  border-color: var(--spx-primary);
  background: linear-gradient(145deg, rgba(0, 212, 223, 0.06) 0%, rgba(0, 212, 223, 0.12) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 212, 223, 0.1);
}
.media-upload-area span {
  font-size: 42px;
  color: var(--spx-primary);
  margin-bottom: 12px;
  transition: transform 0.3s;
}
.media-upload-area:hover span {
  transform: scale(1.1);
}
.media-upload-area p {
  color: var(--spx-text-muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
}
.media-upload-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}
.media-upload-progress {
  width: 100%;
  height: 4px;
  background: var(--spx-bg);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 10px;
  display: none;
}
.media-upload-bar {
  height: 100%;
  background: var(--spx-primary);
  width: 0%;
  transition: width 0.3s;
}
.media-upload-loading {
  display: none;
  color: var(--spx-primary);
  margin-top: 10px;
  font-size: 14px;
}

.cs-studio-actions .button-outline {
  border-color: #333;
  color: #fff;
}

.cs-studio-body {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.cs-toolbar-left {
  width: 70px;
  flex: 0 0 70px;
  background: #15151a;
  border-right: 1px solid #2a2a35;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 50;
}

.cs-toolbar-separator {
  width: 40px;
  height: 1px;
  background: #333;
  margin: 5px 0;
  flex-shrink: 0;
}

.cs-tool-btn {
  background: transparent;
  border: none;
  color: #aaa;
  cursor: pointer;
  padding: 8px;
  border-radius: calc(6px * var(--radius-scale, 1));
  transition: 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-tool-btn:hover {
  background: #2a2a35;
  color: #fff;
}

.cs-tool-btn.active {
  background: #ff007f;
  color: #fff;
}

.cs-palette {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.cs-color-swatch {
  width: 25px;
  height: 25px;
  border-radius: calc(4px * var(--radius-scale, 1));
  cursor: pointer;
  border: 1px solid #333;
  transition: 0.2s;
}

.cs-color-swatch:hover {
  transform: scale(1.1);
}

/* CREATOR STUDIO ADVANCED UI */
.cs-main-workspace {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #191921;
  overflow: hidden;
}

.cs-canvas-wrapper {
  position: relative;
  border: 1px solid #333;
  background: repeating-conic-gradient(#222 0% 25%, #2a2a2a 0% 50%) 50% / 20px 20px;
  transition: transform 0.1s ease-out;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}

.cs-grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 25;
  display: none;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 6.25px 6.25px;
}

.cs-avatar-mask {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
}

.cs-avatar-motion {
  position: absolute;
  top: 8.33%;
  left: 8.33%;
  width: 83.33%;
  height: 83.33%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
}

.cs-avatar-preview {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0.5;
  pointer-events: none;
  border: 2px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 4px rgba(255, 0, 127, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.cs-reference-motion {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.cs-reference-layer {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.3;
  pointer-events: none;
  display: none;
}

.cs-art-motion {
  position: relative;
  z-index: 20;
  width: 400px;
  height: 400px;
}

.cs-canvas {
  image-rendering: pixelated;
  width: 400px;
  height: 400px;
  position: absolute;
  inset: 0;
  cursor: crosshair;
}

.cs-sidebar-right {
  width: 326px;
  flex: 0 0 326px;
  background: #15151a;
  border-left: 1px solid #2a2a35;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.cs-panel {
  border-bottom: 1px solid #2a2a35;
  background: #15151a;
}

.cs-panel-header {
  padding: 12px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1a1a24;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 600;
  color: #eee;
  transition: background 0.2s;
}

.cs-panel-header:hover {
  background: #22222d;
}

.cs-panel-content {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-panel.collapsed .cs-panel-content {
  display: none;
}

.cs-panel.collapsed .cs-panel-header .material-symbols-rounded {
  transform: rotate(-90deg);
}

.cs-panel-header .material-symbols-rounded {
  transition: transform 0.2s;
  font-size: 18px;
  color: #aaa;
}

.cs-extended-palette {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 5px;
}

.cs-extended-palette .cs-color-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: calc(4px * var(--radius-scale, 1));
  cursor: pointer;
  border: 1px solid #333;
  transition: transform 0.1s, border-color 0.1s;
}

.cs-extended-palette .cs-color-swatch:hover {
  transform: scale(1.1);
  border-color: #fff;
  z-index: 2;
  position: relative;
}

.cs-zoom-controls {
  position: absolute;
  bottom: 20px;
  background: #15151a;
  border: 1px solid #2a2a35;
  border-radius: calc(20px * var(--radius-scale, 1));
  display: flex;
  align-items: center;
  padding: 4px 8px;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.cs-zoom-btn {
  background: transparent;
  border: none;
  color: #aaa;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  transition: 0.2s;
}

.cs-zoom-btn:hover {
  background: #2a2a35;
  color: #fff;
}

.cs-zoom-value {
  font-size: 12px;
  color: #eee;
  min-width: 45px;
  text-align: center;
  user-select: none;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
}

.cs-zoom-separator {
  width: 1px;
  height: 16px;
  background: #333;
  margin: 0 4px;
}

.cs-field-mini {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  color: #aaa;
}

.cs-field-mini output {
  float: right;
  color: #fff;
  font-size: 10px;
  margin-left: 4px;
}

.cs-field-mini input[type="range"] {
  width: 100%;
  accent-color: #ff007f;
}

.cs-field-mini input[type="number"],
.cs-field-mini select {
  width: 100%;
  min-height: 30px;
  border: 1px solid #333;
  border-radius: calc(6px * var(--radius-scale, 1));
  background: #101014;
  color: #fff;
  padding: 5px 7px;
  font-size: 12px;
}

.cs-field-mini input[type="color"] {
  width: 100%;
  height: 32px;
  border: 1px solid #333;
  border-radius: calc(6px * var(--radius-scale, 1));
  background: #101014;
  padding: 2px;
}

.cs-check {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #eee;
  font-size: 12px;
  font-weight: 700;
}

.cs-check input {
  accent-color: #ff007f;
}

.cs-control-group,
.cs-animation-block {
  border: 1px solid #2a2a35;
  background: #101014;
  border-radius: calc(8px * var(--radius-scale, 1));
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.cs-highlight-group {
  border-color: rgba(255, 0, 127, .22);
  background: linear-gradient(180deg, rgba(255, 0, 127, .06), #101014);
}

.cs-section-title,
.cs-subsection-label {
  color: #d7d7df;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cs-keyframe-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cs-keyframe-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  color: #aaa;
}

.cs-keyframe-grid input,
.cs-keyframe-grid select {
  min-width: 0;
  border: 1px solid #333;
  border-radius: calc(6px * var(--radius-scale, 1));
  background: #15151a;
  color: #fff;
  padding: 5px 6px;
  font-size: 12px;
  width: 100%;
}

.cs-action-grid,
.cs-frame-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cs-action-grid .button,
.cs-frame-actions .button {
  min-width: 0;
  min-height: 32px;
  padding: 7px 8px;
  font-size: 11px;
  justify-content: center;
}

.cs-action-grid .material-symbols-rounded,
.cs-frame-actions .material-symbols-rounded {
  font-size: 16px;
}

.cs-playback-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.cs-play-button {
  min-width: 40px;
  min-height: 36px;
  padding: 6px;
}

@media (max-width: 920px) {
  .cs-studio-header {
    align-items: flex-start;
    flex-direction: column;
    padding-block: 10px;
  }

  .cs-studio-actions {
    justify-content: flex-start;
  }

  .cs-sidebar-right {
    width: 300px;
    flex-basis: 300px;
  }
}

.cs-studio-motion,
.creator-skin-motion {
  --cs-float-start-x: 0px;
  --cs-float-start-y: 0px;
  --cs-float-end-x: 0px;
  --cs-float-end-y: -12px;
  --cs-float-speed: 3s;
  --cs-transform-delay: 0s;
  --cs-transform-easing: ease-in-out;
  --cs-rotate-start: 0deg;
  --cs-rotate-end: 0deg;
  --cs-scale-start: 1;
  --cs-scale-end: 1;
  --cs-glow-time: 2s;
  --cs-glow-delay: 0s;
  --cs-glow-color: rgba(255, 255, 255, .65);
  --cs-glow-size: 16px;
  --cs-glow-brightness: 1.35;
  --cs-opacity-start: 1;
  --cs-opacity-end: 1;
  --cs-opacity-speed: 2s;
  will-change: transform, filter;
}

@keyframes csStudioTransform {
  from {
    transform: translate(var(--cs-float-start-x), var(--cs-float-start-y)) scale(var(--cs-scale-start)) rotate(var(--cs-rotate-start));
  }

  to {
    transform: translate(var(--cs-float-end-x), var(--cs-float-end-y)) scale(var(--cs-scale-end)) rotate(var(--cs-rotate-end));
  }
}

@keyframes csStudioFloat {
  from {
    transform: translate(var(--cs-float-start-x), var(--cs-float-start-y));
  }

  to {
    transform: translate(var(--cs-float-end-x), var(--cs-float-end-y));
  }
}

@keyframes csStudioGlow {

  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)) brightness(1);
  }

  50% {
    filter: drop-shadow(0 0 var(--cs-glow-size) var(--cs-glow-color)) brightness(var(--cs-glow-brightness));
  }
}

@keyframes csStudioOpacity {
  from {
    opacity: var(--cs-opacity-start);
  }

  to {
    opacity: var(--cs-opacity-end);
  }
}

.admin-art-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 150px 150px auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.admin-art-toolbar label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: calc(8px * var(--radius-scale, 1));
  background: rgba(255, 255, 255, 0.03);
  padding: 0 10px;
}

.admin-art-toolbar input,
.admin-art-toolbar select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: calc(8px * var(--radius-scale, 1));
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  padding: 0 10px;
}

.admin-art-toolbar label input {
  border: 0;
  background: transparent;
  padding: 0;
}

.admin-art-row {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  text-align: left;
}

.admin-art-thumb {
  width: 46px;
  height: 46px;
  border-radius: calc(8px * var(--radius-scale, 1));
  background: #101014;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.admin-art-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.admin-art-copy {
  min-width: 0;
}

.admin-art-copy strong,
.admin-art-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-art-user-results,
.admin-art-whitelist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-art-user-results button,
.admin-art-whitelist button {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: calc(8px * var(--radius-scale, 1));
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
}

.admin-art-user-results small,
.admin-art-whitelist small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}

@media (max-width: 920px) {
  .admin-art-toolbar {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   IN-APP POPUP SYSTEM (replaces native alert/confirm/prompt)
   ═══════════════════════════════════════════════════════════════ */

.app-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.app-popup-backdrop.visible {
  opacity: 1;
}

.app-popup-backdrop.closing {
  opacity: 0;
}

.app-popup {
  width: 92%;
  max-width: 420px;
  background: #15151a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: calc(16px * var(--radius-scale, 1));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  padding: 28px;
  transform: translateY(16px) scale(0.97);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  opacity: 0;
}

.app-popup-backdrop.visible .app-popup {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.app-popup-backdrop.closing .app-popup {
  transform: translateY(10px) scale(0.98);
  opacity: 0;
}

.app-popup-icon {
  width: 48px;
  height: 48px;
  border-radius: calc(12px * var(--radius-scale, 1));
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}

.app-popup-icon .material-symbols-rounded {
  font-size: 26px;
}

.app-popup-icon.confirm {
  background: rgba(255, 107, 53, 0.12);
  color: #ff6b35;
  border: 1px solid rgba(255, 107, 53, 0.2);
}

.app-popup-icon.danger {
  background: rgba(223, 125, 133, 0.12);
  color: #df7d85;
  border: 1px solid rgba(223, 125, 133, 0.2);
}

.app-popup-icon.info {
  background: rgba(100, 180, 255, 0.12);
  color: #64b4ff;
  border: 1px solid rgba(100, 180, 255, 0.2);
}

.app-popup-icon.prompt {
  background: rgba(141, 217, 168, 0.12);
  color: #8dd9a8;
  border: 1px solid rgba(141, 217, 168, 0.2);
}

.app-popup-icon.warning {
  background: rgba(255, 200, 60, 0.12);
  color: #ffc83c;
  border: 1px solid rgba(255, 200, 60, 0.2);
}

.app-popup h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
  color: #fff;
}

.app-popup p {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 20px;
  line-height: 1.5;
}

.app-popup-input {
  width: 100%;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: calc(10px * var(--radius-scale, 1));
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  margin-bottom: 20px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.app-popup-input:focus {
  border-color: rgba(141, 217, 168, 0.4);
  box-shadow: 0 0 0 3px rgba(141, 217, 168, 0.08);
}

.app-popup-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.app-popup-actions button {
  padding: 10px 20px;
  border-radius: calc(10px * var(--radius-scale, 1));
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.app-popup-btn-cancel {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.app-popup-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.app-popup-btn-confirm {
  background: linear-gradient(135deg, #8dd9a8, #6bc490);
  color: #0a1a0f;
  border: none !important;
  box-shadow: 0 2px 12px rgba(141, 217, 168, 0.25);
}

.app-popup-btn-confirm:hover {
  box-shadow: 0 4px 20px rgba(141, 217, 168, 0.35);
  transform: translateY(-1px);
}

.app-popup-btn-danger {
  background: linear-gradient(135deg, #df7d85, #c75a64);
  color: #fff;
  border: none !important;
  box-shadow: 0 2px 12px rgba(223, 125, 133, 0.25);
}

.app-popup-btn-danger:hover {
  box-shadow: 0 4px 20px rgba(223, 125, 133, 0.35);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════
   ENHANCED TOAST — type variants + progress bar
   ═══════════════════════════════════════════════════════════════ */

.toast {
  position: relative;
  overflow: hidden;
  animation: toastSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes toastSlideIn {
  from {
    transform: translateX(40px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast.removing {
  animation: toastSlideOut 0.25s ease forwards;
}

@keyframes toastSlideOut {
  to {
    transform: translateX(40px);
    opacity: 0;
  }
}

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 0 0 calc(10px * var(--radius-scale, 1)) calc(10px * var(--radius-scale, 1));
  background: var(--green);
  animation: toastProgress 3.2s linear forwards;
}

@keyframes toastProgress {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

.toast.toast-success {
  border-color: rgba(141, 217, 168, 0.25);
}

.toast.toast-success .material-symbols-rounded {
  color: #8dd9a8;
}

.toast.toast-success .toast-progress {
  background: #8dd9a8;
}

.toast.toast-error {
  border-color: rgba(223, 125, 133, 0.25);
  background: #1d1517;
}

.toast.toast-error .material-symbols-rounded {
  color: #df7d85;
}

.toast.toast-error .toast-progress {
  background: #df7d85;
}

.toast.toast-warning {
  border-color: rgba(255, 200, 60, 0.25);
  background: #1d1a14;
}

.toast.toast-warning .material-symbols-rounded {
  color: #ffc83c;
}

.toast.toast-warning .toast-progress {
  background: #ffc83c;
}

.toast.toast-info {
  border-color: rgba(100, 180, 255, 0.25);
  background: #141a1d;
}

.toast.toast-info .material-symbols-rounded {
  color: #64b4ff;
}

.toast.toast-info .toast-progress {
  background: #64b4ff;
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN UI REFRESH — Premium admin mode styling
   ═══════════════════════════════════════════════════════════════ */

/* Admin sidebar badge */
.admin-nav-badge {
  color: #fff;
  padding: 0 0 14px;
  margin-bottom: 14px;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 1.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 107, 53, 0.15);
  text-transform: uppercase;
}

.admin-nav-badge-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(255, 160, 80, 0.1));
  border: 1px solid rgba(255, 107, 53, 0.25);
  border-radius: calc(8px * var(--radius-scale, 1));
  color: #ff6b35;
}

.admin-nav-badge-icon .material-symbols-rounded {
  font-size: 16px;
}

.admin-nav-badge span {
  background: linear-gradient(135deg, #ff6b35, #ffa050);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Admin nav button accent */
#admin-nav button.active {
  background: rgba(255, 107, 53, 0.08) !important;
  border-color: rgba(255, 107, 53, 0.2) !important;
  color: #ff6b35 !important;
}

#admin-nav button:hover:not(.active) {
  background: rgba(255, 107, 53, 0.04);
}

/* Admin config grid premium */
.admin-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.admin-config-grid>div,
.admin-config-grid>button {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(12px * var(--radius-scale, 1));
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s ease;
  text-align: left;
  color: var(--text);
  cursor: default;
}

.admin-config-grid>button {
  cursor: pointer;
}

.admin-config-grid>button:hover,
.admin-config-grid>div:hover {
  border-color: rgba(255, 107, 53, 0.25);
  background: rgba(255, 107, 53, 0.04);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.admin-config-grid .material-symbols-rounded {
  font-size: 22px;
  color: #ff6b35;
  margin-bottom: 4px;
}

.admin-config-grid strong {
  font-size: 12px;
}

.admin-config-grid span {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4;
}

/* Admin panel headline */
.admin-panel-headline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.admin-panel-headline h3 {
  margin: 2px 0 4px;
}

.admin-panel-headline p {
  font-size: 10px;
  color: var(--muted);
  margin: 0;
}

/* Admin member card premium */
.admin-member-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(12px * var(--radius-scale, 1));
  margin-top: 10px;
  transition: all 0.2s ease;
}

.admin-member-card:hover {
  border-color: rgba(255, 107, 53, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.admin-member-avatar {
  width: 44px;
  height: 44px;
  border-radius: calc(12px * var(--radius-scale, 1));
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.15), rgba(255, 160, 80, 0.08));
  border: 1px solid rgba(255, 107, 53, 0.2);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  color: #ff6b35;
}

.admin-member-card strong {
  font-size: 13px;
}

.admin-member-card small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

.admin-member-card p {
  font-size: 10px;
  color: var(--muted);
  margin: 4px 0 0;
}

.admin-member-perms {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.admin-member-perms span {
  font-size: 9px;
  padding: 2px 7px;
  background: rgba(255, 107, 53, 0.08);
  border: 1px solid rgba(255, 107, 53, 0.15);
  border-radius: calc(6px * var(--radius-scale, 1));
  color: #ffa050;
}

.admin-member-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.admin-member-actions .status {
  font-size: 10px;
}

/* Admin permission grid */
.admin-permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin: 12px 0;
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: calc(10px * var(--radius-scale, 1));
}

.admin-permission-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: calc(8px * var(--radius-scale, 1));
  cursor: pointer;
  transition: background 0.15s ease;
  font-size: 11px;
}

.admin-permission-grid label:hover {
  background: rgba(255, 107, 53, 0.05);
}

.admin-permission-grid label span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.admin-permission-grid label small {
  font-size: 9px;
  color: var(--muted);
}

/* Admin database table premium */
.admin-db-table {
  border: 1px solid var(--line);
  border-radius: calc(10px * var(--radius-scale, 1));
  overflow: hidden;
}

.admin-db-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) 120px;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(255, 107, 53, 0.06);
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ff6b35;
}

.admin-db-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) 120px;
  gap: 8px;
  padding: 10px 14px;
  font-size: 11px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  transition: background 0.15s ease;
}

.admin-db-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}

.admin-db-row:hover {
  background: rgba(255, 107, 53, 0.04);
}

.admin-db-row:last-child {
  border-bottom: none;
}

.admin-db-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-db-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.admin-db-actions .button {
  padding: 4px 10px !important;
  font-size: 10px !important;
}

.admin-db-toolbar {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 16px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(10px * var(--radius-scale, 1));
}

.admin-db-toolbar .field {
  flex: 1;
  margin: 0;
}

.admin-db-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #ffc83c;
  background: rgba(255, 200, 60, 0.06);
  border: 1px solid rgba(255, 200, 60, 0.12);
  border-radius: calc(8px * var(--radius-scale, 1));
  padding: 8px 12px;
  margin: 10px 0;
}

/* Admin team form */
.admin-team-form {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(12px * var(--radius-scale, 1));
  margin-bottom: 16px;
}

.admin-team-list {
  display: grid;
  gap: 10px;
}

/* Field grid for admin forms */
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

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

/* Admin workspace layout premium */
.admin-workspace-layout .settings-menu {
  border-right-color: rgba(255, 107, 53, 0.12);
}

.admin-workspace-layout .settings-menu button.active {
  background: rgba(255, 107, 53, 0.08);
  color: #ff6b35;
  border-color: rgba(255, 107, 53, 0.2);
}

.admin-workspace-layout .settings-menu button:hover:not(.active) {
  background: rgba(255, 107, 53, 0.04);
}

/* Admin settings panel */
.admin-settings-panel .eyebrow {
  color: #ff6b35;
}

/* Audit rows premium */
.audit-row,
.public-activity-row {
  transition: all 0.15s ease !important;
}

.audit-row:hover,
.public-activity-row:hover {
  border-color: rgba(255, 107, 53, 0.2) !important;
  background: rgba(255, 107, 53, 0.03) !important;
  transform: translateX(2px);
}

/* Referral codes table */
.referral-codes-table {
  border: 1px solid var(--line);
  border-radius: calc(10px * var(--radius-scale, 1));
  overflow: hidden;
}

.referral-codes-table-head {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 0.7fr 0.7fr 1fr;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(255, 107, 53, 0.06);
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ff6b35;
}

.referral-codes-table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 0.7fr 0.7fr 1fr;
  gap: 8px;
  padding: 11px 14px;
  font-size: 11px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  transition: background 0.15s ease;
}

.referral-codes-table-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}

.referral-codes-table-row:hover {
  background: rgba(255, 107, 53, 0.04);
}

.referral-codes-table-row:last-child {
  border-bottom: none;
}

.referral-codes-table-row small {
  display: block;
  font-size: 9px;
  color: var(--muted);
  margin-top: 2px;
}

/* Danger soft button */
.button.danger-soft {
  color: #df7d85 !important;
  border-color: rgba(223, 125, 133, 0.2) !important;
}

.button.danger-soft:hover {
  background: rgba(223, 125, 133, 0.08) !important;
}

/* Admin audit filters refinement */
.audit-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(10px * var(--radius-scale, 1));
  margin-bottom: 14px;
}

.audit-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
}

.audit-filters input,
.audit-filters select {
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: calc(8px * var(--radius-scale, 1));
  color: var(--text);
  font-size: 11px;
  font-family: inherit;
  min-width: 140px;
}

.audit-favorite-filter {
  flex-direction: row !important;
  align-items: center;
  gap: 6px !important;
}

/* Public activity stats */
.public-activity-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.public-activity-stats article {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(10px * var(--radius-scale, 1));
}

.public-activity-stats article span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: rgba(255, 107, 53, 0.08);
  border: 1px solid rgba(255, 107, 53, 0.15);
  border-radius: calc(10px * var(--radius-scale, 1));
  color: #ff6b35;
  flex-shrink: 0;
}

.public-activity-stats article span .material-symbols-rounded {
  font-size: 18px;
}

.public-activity-stats article small {
  font-size: 10px;
  color: var(--muted);
  display: block;
}

.public-activity-stats article strong {
  font-size: 18px;
  display: block;
}

/* Audit method badge */
.audit-method {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: calc(6px * var(--radius-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.audit-method.ok {
  background: rgba(141, 217, 168, 0.1);
  color: #8dd9a8;
  border: 1px solid rgba(141, 217, 168, 0.2);
}

.audit-method.failed {
  background: rgba(223, 125, 133, 0.1);
  color: #df7d85;
  border: 1px solid rgba(223, 125, 133, 0.2);
}

/* Modal permissions override for admin */
.modal-permissions {
  max-height: 220px;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .admin-config-grid {
    grid-template-columns: 1fr;
  }

  .admin-member-card {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .admin-member-actions {
    flex-direction: row;
  }

  .referral-codes-table-head,
  .referral-codes-table-row {
    grid-template-columns: 1fr 1fr;
  }

  .admin-db-head,
  .admin-db-row {
    grid-template-columns: 1fr;
  }

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

/* 
======================================================
   ULTRA-PREMIUM BADGES ENHANCEMENT
======================================================
*/

/* --- 1. Pro Badge Gem (Ultra-Realism & Shines) --- */
.pro-badge-gem {
  --coin-halo-size: 20px;
  --coin-glow-intensity: 0.8;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, .6),
    inset 4px 0 10px rgba(255, 255, 255, .2),
    inset -6px -8px 16px rgba(0, 0, 0, .6),
    inset 0 0 20px color-mix(in srgb, var(--coin-a) 25%, transparent),
    0 2px 1px rgba(255, 255, 255, .15),
    0 12px 24px rgba(0, 0, 0, .45),
    0 0 var(--coin-halo-size) color-mix(in srgb, var(--gem-glow) 80%, transparent) !important;
  transform-style: preserve-3d;
}

.pro-badge-gem::before {
  /* Enhancing the outer ring shine */
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--coin-a) 80%, transparent)) brightness(1.2) !important;
  opacity: calc(var(--coin-ring-opacity) + 0.15) !important;
}

.pro-badge-gem::after {
  /* Hyper reflection */
  background:
    linear-gradient(126deg, transparent 0%, rgba(255, 255, 255, .15) 10%, rgba(255, 255, 255, .8) 22%, rgba(255, 255, 255, .3) 32%, rgba(255, 255, 255, .05) 45%, transparent 60%),
    radial-gradient(ellipse at 35% 20%, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .2) 25%, transparent 50%),
    radial-gradient(ellipse at 75% 85%, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .2) 30%, transparent 60%) !important;
  opacity: calc(var(--coin-shine-opacity) + 0.2) !important;
  mix-blend-mode: color-dodge !important;
}

.pro-gem-core {
  /* Deepening the core */
  box-shadow:
    inset 0 3px 5px rgba(255, 255, 255, .4),
    inset 0 -8px 14px rgba(0, 0, 0, .7),
    0 0 0 1px color-mix(in srgb, var(--coin-a) 85%, #fff 15%),
    0 0 0 3px color-mix(in srgb, var(--coin-dark) 70%, #000 30%),
    0 4px 10px rgba(0, 0, 0, .4) !important;
}

.pro-gem-core::after {
  /* App mark pop */
  filter:
    drop-shadow(0 2px 0 rgba(255, 255, 255, .25)) drop-shadow(0 3px 4px rgba(0, 0, 0, .6)) brightness(1.15) !important;
}

/* Enhancing levels individually */
.pro-badge-level-bronze {
  --coin-halo-size: 14px;
}

.pro-badge-level-silver {
  --coin-halo-size: 18px;
}

.pro-badge-level-gold {
  --coin-halo-size: 22px;
}

.pro-badge-level-cyan {
  --coin-halo-size: 26px;
}

.pro-badge-level-titanium {
  --coin-halo-size: 18px;
  filter: contrast(1.1) saturate(1.2);
}

.pro-badge-level-magic {
  --coin-halo-size: 32px;
  filter: contrast(1.15) brightness(1.1);
}

/* --- 2. System Pill Badges (Glassmorphism & Glow) --- */

.catalog-item-badge,
.marketplace-store-card .product-badge,
.creator-landing-badge,
.range-badge {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 0 12px color-mix(in srgb, currentColor 15%, transparent);
  position: relative;
  overflow: hidden;
  border-radius: calc(20px * var(--radius-scale, 1));
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.catalog-item-badge::before,
.marketplace-store-card .product-badge::before,
.creator-landing-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 50%, rgba(0, 0, 0, 0.1) 100%);
  pointer-events: none;
}

.catalog-item-badge::after,
.marketplace-store-card .product-badge::after,
.creator-landing-badge::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-20deg);
  transition: 0.5s ease;
  pointer-events: none;
}

.catalog-item-badge:hover::after,
.marketplace-store-card .product-badge:hover::after,
.creator-landing-badge:hover::after {
  left: 150%;
}

.catalog-item-badge:hover,
.marketplace-store-card .product-badge:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 16px color-mix(in srgb, currentColor 35%, transparent);
  border-color: color-mix(in srgb, currentColor 45%, transparent);
}

/* --- 3. Verified & Kickover Badges --- */
.verified-badge {
  filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 50%, transparent));
}

.kickover-badge {
  animation: kickoverBadgePulse 2s infinite alternate;
}

@keyframes kickoverBadgePulse {
  0% {
    filter: drop-shadow(0 0 6px rgba(163, 85, 255, 0.5)) brightness(1);
  }

  100% {
    filter: drop-shadow(0 0 14px rgba(163, 85, 255, 0.9)) brightness(1.2);
  }
}

/* --- 4. Admin Nav Badge --- */
.admin-nav-badge {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.2),
    inset 0 1px 2px rgba(255, 255, 255, 0.2),
    0 0 10px rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}

.admin-nav-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
  pointer-events: none;
}

.admin-nav-badge-icon {
  background: linear-gradient(135deg, #a355ff, #35d5ff);
  box-shadow: 0 0 12px rgba(163, 85, 255, 0.5), inset 0 0 4px rgba(255, 255, 255, 0.4);
  color: #fff;
}


/* --- Promo Card Compact & Horizontal Align Fix --- */
.pro-promo-header {
  align-items: center !important;
}

.pro-promo-header .pro-badge-gem {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
}

/* Reduce halo size slightly for compact badge */
.pro-promo-header .pro-badge-gem {
  --coin-halo-size: 8px !important;
}

.pro-promo-actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  justify-content: space-between;
}

.pro-promo-actions .button {
  flex: 1;
  font-size: 11.5px;
  padding: 6px 0;
  height: auto;
  min-height: unset;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* --- Mercado Pago Card Form Styles --- */
.mp-secure-container {
  background: rgba(255, 255, 255, 0.03);
  border-radius: calc(12px * var(--radius-scale, 1));
  padding: 15px;
  margin-top: 15px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.mp-field-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mp-container {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: calc(8px * var(--radius-scale, 1));
  height: 44px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--text-color);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}

.mp-container:focus-within,
.input-themed:focus {
  border-color: var(--primary-color);
  background: rgba(255, 255, 255, 0.08);
}

.input-themed {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: calc(8px * var(--radius-scale, 1));
  height: 44px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--text-color);
  width: 100%;
}

.input-themed::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.input-themed option {
  background: #111;
  color: #fff;
}

/* ------------------------------------------- */
/* Logo Enhancements (Aprimoramento Visual e Tamanho) */
/* ------------------------------------------- */
.logo img,
.shape-logo,
.mobile-logo img,
.footer-logo,
.logo-landing img,
.logo-large img {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s ease;
  filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.4));
  transform-origin: center;
}

/* Tamanhos Aprimorados da Logo - Removido forçar larguras globais para não quebrar a sidebar */

.logo img:hover,
.shape-logo:hover,
.mobile-logo img:hover,
.footer-logo:hover,
.logo-landing img:hover,
.logo-large img:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 15px rgba(0, 229, 255, 0.7)) brightness(1.1);
}

.logo span {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.logo:hover span {
  color: #fff;
  text-shadow: 0 0 18px rgba(0, 229, 255, 0.7);
}

.logo span span {
  color: var(--green) !important;
}

.logo:hover span span {
  text-shadow: 0 0 18px var(--green);
}

/* ------------------------------------------- */
/* Badge Enhancements (Aprimoramento Visual) */
/* ------------------------------------------- */
.plan-badge,
.hero-badge,
.verified-badge,
.product-badge,
.catalog-item-badge,
.pro-badge-nitro,
.pro-badge-bronze,
.pro-level-badge,
.theme-preview-badge,
.widgets-live-badge,
.referral-timer-badge {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease, box-shadow 0.3s ease;
}

.plan-badge:hover,
.hero-badge:hover,
.verified-badge:hover,
.product-badge:hover,
.catalog-item-badge:hover,
.pro-badge-nitro:hover,
.pro-badge-bronze:hover,
.pro-level-badge:hover,
.theme-preview-badge:hover,
.widgets-live-badge:hover,
.referral-timer-badge:hover {
  transform: translateY(-3px) scale(1.08);
  filter: brightness(1.2);
  box-shadow: 0 8px 20px rgba(0, 229, 255, 0.35);
  z-index: 10;
}

.hero-badge,
.plan-badge,
.widgets-live-badge,
.referral-timer-badge {
  border: 1px solid rgba(0, 229, 255, 0.4) !important;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.1), rgba(0, 85, 255, 0.15)) !important;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.2), inset 0 0 8px rgba(0, 229, 255, 0.1) !important;
  color: #fff !important;
  text-shadow: 0 0 5px rgba(0, 229, 255, 0.5) !important;
  padding: 6px 14px !important;
  border-radius: 99px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

.hero-badge:hover,
.plan-badge:hover,
.widgets-live-badge:hover,
.referral-timer-badge:hover {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.25), rgba(0, 85, 255, 0.3)) !important;
  border-color: rgba(0, 229, 255, 0.8) !important;
  box-shadow: 0 0 25px rgba(0, 229, 255, 0.5), inset 0 0 12px rgba(0, 229, 255, 0.3) !important;
}

/* ------------------------------------------- */
/* Subscription Screen (Aprimoramento) */
/* ------------------------------------------- */
.subscription-header-modern {
  text-align: center;
  margin-bottom: 40px;
}

.subscription-header-modern .material-symbols-rounded {
  font-size: 56px;
  color: var(--green);
  margin-bottom: 16px;
  filter: drop-shadow(0 0 12px rgba(0, 230, 118, 0.4));
}

.subscription-header-modern h3 {
  font-size: 28px;
  color: var(--text);
  margin: 0 0 12px 0;
  font-family: 'Space Grotesk', sans-serif;
}

.subscription-header-modern p {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
}

.subscription-tiers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.sub-tier-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: calc(20px * var(--radius-scale, 1));
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s ease, box-shadow 0.3s ease;
}

.sub-tier-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 229, 255, 0.4);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.sub-tier-card.featured-tier {
  border-color: rgba(0, 229, 255, 0.5);
  background: linear-gradient(180deg, var(--surface-3) 0%, var(--surface-2) 100%);
  box-shadow: 0 0 25px rgba(0, 229, 255, 0.1);
}

.sub-tier-card.featured-tier:hover {
  border-color: rgba(0, 229, 255, 0.8);
  box-shadow: 0 18px 45px rgba(0, 229, 255, 0.25);
}

.sub-tier-card .plan-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px !important;
}

.sub-tier-header {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.sub-tier-header h4 {
  color: var(--text);
  margin: 0 0 12px 0;
  font-size: 20px;
}

.sub-tier-price {
  font-size: 38px;
  font-weight: 800;
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
}

.sub-tier-price span {
  font-size: 16px;
  color: var(--muted);
  font-weight: 500;
}

.sub-tier-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
  flex: 1;
}

.sub-tier-benefits li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 14px;
}

.sub-tier-benefits .material-symbols-rounded {
  color: var(--green);
  font-size: 20px;
}

/* ------------------------------------------- */
/* Payment Screen Redirect State */
/* ------------------------------------------- */
#public-payment-screen {
  min-height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}

.payment-state-container {
  width: 100%;
  animation: authFadeIn 0.4s ease forwards;
}

@keyframes authFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Insight de Lucro - Premium UI */
.wallet-profit-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px;
  margin-bottom: 24px;
  border-radius: calc(16px * var(--radius-scale, 1));
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.08) 0%, rgba(0, 229, 255, 0.02) 100%);
  border: 1px solid rgba(0, 229, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 229, 255, 0.05);
  backdrop-filter: blur(8px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wallet-profit-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 229, 255, 0.1);
  border-color: rgba(0, 229, 255, 0.35);
}

.wallet-profit-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: calc(12px * var(--radius-scale, 1));
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 229, 255, 0.3);
  flex-shrink: 0;
}

.wallet-profit-icon-wrapper span {
  font-size: 24px;
}

.wallet-profit-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.wallet-profit-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wallet-profit-header small {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  font-weight: 600;
}

.wallet-profit-badge {
  font-size: 9px;
  padding: 3px 8px;
  border-radius: calc(999px * var(--radius-scale, 1));
  background: rgba(0, 229, 255, 0.15);
  color: var(--primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wallet-profit-banner strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 16px;
  color: var(--text);
  line-height: 1.3;
}

.wallet-profit-banner p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

.wallet-profit-banner.muted {
  opacity: 0.6;
  filter: grayscale(1);
  pointer-events: none;
}

/* Audio Recording UI */
.recording-pulse {
  animation: pulse-red 1.5s infinite;
  color: #ff3366 !important;
}

@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 51, 102, 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(255, 51, 102, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 51, 102, 0);
  }
}

.audio-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.2);
  padding: 8px 12px;
  border-radius: calc(8px * var(--radius-scale, 1));
  margin-top: 10px;
}

.audio-preview audio {
  height: 30px;
  outline: none;
  flex: 1;
}

.audio-preview .icon-button {
  background: rgba(255, 51, 102, 0.1);
  color: #ff3366;
  border-color: rgba(255, 51, 102, 0.2);
}

.audio-preview .icon-button:hover {
  background: rgba(255, 51, 102, 0.2);
}

.account-verification-panel {
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(0, 229, 255, 0.035));
  border-radius: calc(12px * var(--radius-scale, 1));
  padding: 16px;
  margin: 16px 0 20px;
}

.verification-head,
.verification-row,
.verification-actions,
.verification-code-field {
  display: flex;
  align-items: center;
}

.verification-head {
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.verification-head h4 {
  margin: 0 0 4px;
  font-size: 15px;
}

.verification-head p,
.verification-channel-copy span,
.verification-channel-copy small,
.verification-empty,
.verification-loading {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.verification-list {
  display: grid;
  gap: 10px;
}

.verification-row {
  gap: 12px;
  padding: 12px;
  border-radius: calc(10px * var(--radius-scale, 1));
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.verification-channel-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: calc(10px * var(--radius-scale, 1));
  background: rgba(0, 229, 255, 0.1);
  color: var(--primary);
  flex: 0 0 auto;
}

.verification-channel-copy {
  display: grid;
  gap: 2px;
  min-width: 140px;
  flex: 1;
}

.verification-channel-copy strong {
  font-size: 13px;
}

.verification-status {
  border-radius: calc(999px * var(--radius-scale, 1));
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.verification-status.ok {
  color: #95f0b7;
  background: rgba(75, 220, 130, .14);
}

.verification-status.pending {
  color: #ffd98a;
  background: rgba(255, 190, 70, .13);
}

.verification-status.danger {
  color: #ff9cae;
  background: rgba(255, 70, 110, .13);
}

.verification-actions {
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.verification-code-field {
  gap: 6px;
}

.verification-code-field input {
  width: 82px;
  height: 34px;
  border-radius: calc(8px * var(--radius-scale, 1));
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
  color: var(--text);
  text-align: center;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .08em;
}

.button-small {
  min-height: 34px;
  padding: 0 10px;
  font-size: 11px;
}

@media (max-width: 760px) {
  .verification-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .verification-status {
    margin-left: auto;
  }

  .verification-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .logo {
    font-size: 16px;
    gap: 4px;
  }

  .logo img {
    width: 20px;
    height: 20px;
  }

  .beta-badge {
    font-size: 6px;
    padding: 2px 3px;
    margin-left: 2px;
  }
}

.auth-learn-card {
  margin-top: 12px;
  padding: 12px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 22px;
  gap: 10px;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: calc(12px * var(--radius-scale, 1));
  background:
    linear-gradient(135deg, rgba(0, 199, 207, 0.12), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.auth-learn-card:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 199, 207, 0.28);
  background:
    linear-gradient(135deg, rgba(0, 199, 207, 0.18), rgba(141, 217, 168, 0.06)),
    rgba(255, 255, 255, 0.04);
}

.auth-learn-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #9ff5ff;
  background: rgba(0, 199, 207, 0.14);
  border: 1px solid rgba(0, 199, 207, 0.2);
  border-radius: calc(10px * var(--radius-scale, 1));
}

.auth-learn-card strong,
.auth-learn-card small {
  display: block;
  min-width: 0;
}

.auth-learn-card strong {
  font-size: 12px;
}

.auth-learn-card small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.chat-service-notice {
  align-self: center;
  max-width: 620px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #dce3e7;
  background: #20252a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: calc(12px * var(--radius-scale, 1));
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.chat-service-notice .material-symbols-rounded {
  color: #aeb9c2;
  font-size: 17px;
}

.chat-email-prompt {
  align-self: center;
  width: min(640px, 100%);
  padding: 14px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
    #11161a;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: calc(14px * var(--radius-scale, 1));
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.25);
}

.chat-email-prompt-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #8dd9a8;
  background: rgba(141, 217, 168, 0.1);
  border: 1px solid rgba(141, 217, 168, 0.2);
  border-radius: calc(10px * var(--radius-scale, 1));
}

.chat-email-prompt strong,
.chat-email-prompt p {
  margin: 0;
}

.chat-email-prompt strong {
  display: block;
  font-size: 12px;
}

.chat-email-prompt p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.chat-email-prompt-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.chat-email-prompt-actions .button {
  min-height: 34px;
  padding: 0 12px;
  font-size: 10px;
}

.chat-email-prompt.is-saved {
  grid-template-columns: 32px minmax(0, 1fr);
  background: #151a1e;
}

@media (max-width: 760px) {
  .chat-email-prompt {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .chat-email-prompt-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .chat-email-prompt-actions .button {
    flex: 1;
  }
}

/* Admin command center refresh */
.admin-command-center {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.5fr);
  gap: 24px;
  margin-bottom: 32px;
}

.admin-command-hero,
.admin-command-side,
.admin-user-directory,
.admin-ops-panel,
.admin-transactions-panel {
  border-color: rgba(255, 255, 255, .08) !important;
  background: rgba(15, 15, 15, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255,255,255,0.05);
  border-radius: 20px;
}

.admin-command-hero {
  padding: 40px;
  border: 1px solid rgba(95, 215, 255, 0.15);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.admin-command-hero::after {
  content: "";
  position: absolute;
  inset: -50%;
  pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(95, 215, 255, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(141, 217, 168, 0.1) 0%, transparent 30%);
  animation: adminGlow 15s ease-in-out infinite alternate;
}

@keyframes adminGlow {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.1) translate(-2%, 5%); }
}

.admin-command-hero > * {
  position: relative;
  z-index: 1;
}

.admin-command-hero .eyebrow {
  color: #5fd7ff;
  font-weight: 800;
  letter-spacing: 2px;
  font-size: 11px;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}

.admin-command-hero h2 {
  margin: 0 0 12px;
  max-width: 720px;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.1;
  background: linear-gradient(to right, #fff, rgba(255,255,255,0.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.admin-command-hero p {
  margin: 0 0 32px;
  max-width: 600px;
  color: rgba(255,255,255,0.75);
  font-size: 15px;
  line-height: 1.6;
}

.admin-command-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-command-side {
  display: grid;
  gap: 16px;
}

.admin-command-side div {
  min-width: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: linear-gradient(145deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.admin-command-side div:hover {
  transform: translateY(-4px);
  border-color: rgba(95, 215, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2), inset 0 0 20px rgba(95,215,255,0.05);
  background: linear-gradient(145deg, rgba(95, 215, 255, 0.08), rgba(255,255,255,0.02));
}

.admin-command-side span {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #5fd7ff;
  background: rgba(95, 215, 255, 0.15);
  border-radius: 12px;
  margin-bottom: 12px;
  font-size: 20px;
}

.admin-command-side strong {
  font: 800 32px "Space Grotesk", sans-serif;
  color: #fff;
  line-height: 1;
  margin-bottom: 4px;
}

.admin-command-side small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 500;
}

.admin-dashboard-grid-main {
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr);
  align-items: start;
}

.admin-user-filters {
  margin: 14px 0;
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(150px, .55fr) minmax(170px, .65fr) auto auto;
  gap: 8px;
  align-items: center;
}

.admin-user-filters label,
.admin-user-filters select {
  min-height: 42px;
}

.admin-user-filters label {
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  background: rgba(0, 0, 0, .22);
  border: 1px solid var(--line);
  border-radius: calc(10px * var(--radius-scale, 1));
}

.admin-user-filters input,
.admin-user-filters select {
  width: 100%;
  color: var(--text);
  background: rgba(0, 0, 0, .22);
  border: 1px solid var(--line);
  border-radius: calc(10px * var(--radius-scale, 1));
  outline: 0;
}

.admin-user-filters label input {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.admin-risk-toggle {
  white-space: nowrap;
  font-size: 11px;
}

.admin-risk-toggle input {
  width: auto;
  accent-color: #ffbf66;
}

.admin-user-directory-list,
.admin-ops-list {
  display: grid;
  gap: 9px;
}

.admin-user-card {
  width: 100%;
  min-width: 0;
  padding: 13px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1.4fr) minmax(230px, .9fr) minmax(118px, .42fr);
  gap: 12px;
  align-items: center;
  color: var(--text);
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: calc(12px * var(--radius-scale, 1));
  text-align: left;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.admin-user-card:hover {
  transform: translateY(-1px);
  border-color: rgba(95, 215, 255, .22);
  background: rgba(95, 215, 255, .035);
}

.admin-user-card.is-risk {
  border-color: rgba(255, 130, 130, .2);
  background: linear-gradient(135deg, rgba(255, 111, 111, .055), rgba(255, 255, 255, .02));
}

.admin-user-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #bff4ff;
  background: linear-gradient(135deg, rgba(95, 215, 255, .14), rgba(141, 217, 168, .09));
  border: 1px solid rgba(95, 215, 255, .24);
  border-radius: calc(12px * var(--radius-scale, 1));
  font: 800 13px "Space Grotesk", sans-serif;
}

.admin-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-user-main,
.admin-user-risk {
  min-width: 0;
  display: grid;
  gap: 5px;
}

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

.admin-user-title strong,
.admin-user-title em,
.admin-user-main small,
.admin-user-risk small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-title strong {
  font-size: 13px;
}

.admin-user-title em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.admin-user-main small,
.admin-user-risk small {
  color: var(--muted);
  font-size: 9px;
}

.admin-user-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.admin-chip {
  min-height: 22px;
  padding: 3px 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #d8dde0;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: calc(999px * var(--radius-scale, 1));
  font-size: 9px;
  font-weight: 800;
}

.admin-chip .material-symbols-rounded {
  font-size: 14px;
}

.admin-chip.ok {
  color: #bdf2ca;
  background: rgba(141, 217, 168, .08);
  border-color: rgba(141, 217, 168, .2);
}

.admin-chip.warn {
  color: #ffd08a;
  background: rgba(255, 191, 102, .09);
  border-color: rgba(255, 191, 102, .22);
}

.admin-chip.role {
  color: #c9eaff;
  background: rgba(95, 215, 255, .08);
  border-color: rgba(95, 215, 255, .18);
}

.admin-user-metrics {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(48px, 1fr));
  gap: 6px;
}

.admin-user-metrics span {
  min-width: 0;
  padding: 8px 7px;
  display: grid;
  gap: 2px;
  background: rgba(0, 0, 0, .16);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: calc(9px * var(--radius-scale, 1));
}

.admin-user-metrics strong {
  font-size: 12px;
}

.admin-user-metrics small {
  color: var(--muted);
  font-size: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-user-risk {
  justify-items: end;
  text-align: right;
}

.admin-ops-row {
  width: 100%;
  min-width: 0;
  padding: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  color: var(--text);
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: calc(10px * var(--radius-scale, 1));
  text-align: left;
}

.admin-ops-row:hover {
  border-color: rgba(255, 191, 102, .22);
  background: rgba(255, 191, 102, .035);
}

.admin-ops-row strong,
.admin-ops-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-ops-row small,
.admin-ops-row em {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
}

@media (max-width: 1120px) {

  .admin-command-center,
  .admin-dashboard-grid-main {
    grid-template-columns: 1fr;
  }

  .admin-command-side {
    grid-template-columns: repeat(3, 1fr);
  }

  .admin-user-card {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .admin-user-metrics,
  .admin-user-risk {
    grid-column: 2;
  }

  .admin-user-risk {
    justify-items: start;
    text-align: left;
  }
}

@media (max-width: 760px) {
  .admin-command-hero {
    padding: 18px;
  }

  .admin-command-hero h2 {
    font-size: 26px;
  }

  .admin-command-side,
  .admin-user-filters,
  .admin-command-actions {
    grid-template-columns: 1fr;
  }

  .admin-command-side {
    display: grid;
  }

  .admin-user-card {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
  }

  .admin-user-avatar {
    width: 40px;
    height: 40px;
  }

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

  .admin-ops-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .admin-ops-row em {
    grid-column: 2;
  }
}

/* Live configuration styles */
.live-config-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.field-label-bold {
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
}

.live-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.live-radio-group .radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

.live-radio-group input[type="radio"] {
  accent-color: var(--green);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.live-terms-section {
  margin-top: 10px;
  margin-bottom: 24px;
  padding: 16px;
  background: var(--surface-3);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.terms-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.terms-checkbox input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--green);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

.terms-checkbox span {
  flex: 1;
}

.terms-checkbox .terms-link {
  color: var(--green);
  text-decoration: none;
  font-weight: 500;
}

.terms-checkbox .terms-link:hover {
  text-decoration: underline;
}

/* New Live History and Chat styles */
.live-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
  z-index: 0;
}

.live-card-visual > * {
  z-index: 1;
  position: relative;
}

.live-chat-input-area {
  padding: 16px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}

.live-chat-input-area form {
  display: flex;
  gap: 8px;
}

.live-chat-input-area input {
  flex: 1;
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 8px 12px;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13px;
}

.live-chat-input-area input:focus {
  border-color: var(--green);
  outline: none;
}

.live-chat-input-area button {
  padding: 0 16px;
}

.live-chat-login-prompt {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.live-chat-message.free-chat {
  opacity: 0.8;
  border: none;
  background: transparent;
  padding: 8px 0;
}

.live-chat-message.free-chat .live-chat-avatar {
  background: var(--surface-3);
  color: var(--muted);
}

@media (max-width: 900px) {
  .sidebar,
  .sidebar.open {
    background: var(--bg) !important;
  }
}

/* Premium QR Code Login */
.qr-login-panel {
  animation: qrFadeScale 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes qrFadeScale {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.premium-qr {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  text-align: center;
  background: transparent;
  padding: 16px 0;
}

.qr-image-wrapper {
  background: transparent;
  padding: 16px;
  border-radius: calc(16px * var(--radius-scale, 1));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0,230,118,0.2);
  flex-shrink: 0;
  display: inline-block;
  animation: qrFloat 4s ease-in-out infinite;
  transition: transform 0.3s ease;
}
.qr-image-wrapper:hover {
  transform: scale(1.05);
}

@keyframes qrFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.qr-image-wrapper img {
  display: block;
  width: 150px;
  height: 150px;
  border-radius: calc(4px * var(--radius-scale, 1));
}

.qr-login-copy {
  flex: 1;
  width: 100%;
}

.qr-login-copy strong {
  display: block;
  font-size: 16px;
  margin-bottom: 12px;
  color: var(--text);
  font-weight: 500;
}

.qr-steps {
  list-style: none;
  padding: 0;
  margin: 0 auto 20px auto;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 240px;
}

.qr-steps li {
  position: relative;
  padding-left: 28px;
}

.qr-steps li::before {
  content: "check_circle";
  font-family: "Material Symbols Rounded";
  position: absolute;
  left: 0;
  top: 0px;
  font-size: 18px;
  color: var(--green);
}

.qr-login-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 230, 118, 0.1);
  color: var(--green);
  padding: 8px 16px;
  border-radius: calc(20px * var(--radius-scale, 1));
  font-size: 13px;
  font-weight: 500;
  animation: qrPulse 2s infinite;
}

@keyframes qrPulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.2); }
  70% { box-shadow: 0 0 0 10px rgba(0, 230, 118, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0); }
}

.qr-login-status span.material-symbols-rounded {
  font-size: 18px;
  animation: spin 3s linear infinite;
}

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


/* =========================================
   FRUTIGER AERO THEME STYLES
   ========================================= */

body[data-app-theme="frutigeraero"] {
  background: var(--bg) !important;
  color: #0b1c2e;
  text-shadow: 0 1px 1px rgba(255,255,255,0.8);
}
body[data-app-theme="frutigeraero"]::before {
  content: "";
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: -1;
  background: var(--frutiger-bg, url('/assets/frutigeraero/frutinger-aero1.png')) no-repeat center center fixed !important;
  background-size: cover !important;
  opacity: var(--frutiger-opacity, 1);
  pointer-events: none;
}

/* Base button glossy style */
body[data-app-theme="frutigeraero"] .button-primary,
body[data-app-theme="frutigeraero"] .theme-preset-card.active,
body[data-app-theme="frutigeraero"] .pro-badge-large {
  background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.0) 50%, rgba(0,174,255,0.6) 51%, rgba(0,102,255,0.8) 100%), linear-gradient(180deg, #00d2ff, #0066ff) !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  border-bottom-color: rgba(0,0,0,0.4) !important;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.9), inset 0 -2px 6px rgba(0,0,0,0.4), 0 4px 12px rgba(0, 150, 255, 0.4) !important;
  color: white !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
  border-radius: 999px !important; /* Full pill shape */
  transition: all 0.2s ease !important;
}

body[data-app-theme="frutigeraero"] .button-primary:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.1) 50%, rgba(0,200,255,0.7) 51%, rgba(0,130,255,0.9) 100%), linear-gradient(180deg, #33dfff, #0088ff) !important;
  box-shadow: inset 0 2px 5px rgba(255,255,255,1), inset 0 -2px 6px rgba(0,0,0,0.3), 0 6px 16px rgba(0, 150, 255, 0.6) !important;
}

body[data-app-theme="frutigeraero"] .button-secondary {
  background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.15) 51%, rgba(255,255,255,0.2) 100%) !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.7), 0 2px 8px rgba(0,0,0,0.3) !important;
  color: #0b1c2e !important;
  text-shadow: 0 1px 1px rgba(255,255,255,0.8) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Inputs and Forms */
body[data-app-theme="frutigeraero"] input,
body[data-app-theme="frutigeraero"] select,
body[data-app-theme="frutigeraero"] textarea {
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-top-color: rgba(0, 0, 0, 0.2) !important;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.8) !important;
  color: #0b1c2e !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* Modal Popup Específico (Azul claro translúcido) */
body[data-app-theme="frutigeraero"] .modal {
  background: linear-gradient(180deg, rgba(220, 245, 255, 0.85) 0%, rgba(180, 230, 255, 0.7) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-top: 2px solid rgba(255, 255, 255, 1) !important;
  box-shadow: 0 20px 50px rgba(0, 100, 200, 0.3), inset 0 3px 6px rgba(255, 255, 255, 0.9), inset 0 -3px 15px rgba(0, 150, 255, 0.2) !important;
  backdrop-filter: blur(24px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.3) !important;
  color: #082b4a !important;
  border-radius: 16px !important;
}

/* Theme Panel Modal Images */
body[data-app-theme="frutigeraero"] .frutiger-bg-option img {
  transition: transform 0.2s ease;
}
body[data-app-theme="frutigeraero"] .frutiger-bg-option:hover img {
  transform: scale(1.05);
}


/* AUTO-GENERATED GLASSMORPHISM CONTAINERS */
body[data-app-theme="frutigeraero"] .live-status-pill.is-ended,
body[data-app-theme="frutigeraero"] .live-directory-card,
body[data-app-theme="frutigeraero"] .live-room-metrics>span,
body[data-app-theme="frutigeraero"] .live-donate-recipient,
body[data-app-theme="frutigeraero"] .live-amount-input,
body[data-app-theme="frutigeraero"] .live-quick-values button,
body[data-app-theme="frutigeraero"] .button,
body[data-app-theme="frutigeraero"] .qr-review-list,
body[data-app-theme="frutigeraero"] .official-links a,
body[data-app-theme="frutigeraero"] .profile-switcher,
body[data-app-theme="frutigeraero"] .top-search,
body[data-app-theme="frutigeraero"] .icon-button,
body[data-app-theme="frutigeraero"] .stat-card,
body[data-app-theme="frutigeraero"] .panel,
body[data-app-theme="frutigeraero"] .period-select,
body[data-app-theme="frutigeraero"] .quick-qr,
body[data-app-theme="frutigeraero"] .progress,
body[data-app-theme="frutigeraero"] .feature-card,
body[data-app-theme="frutigeraero"] .widgets-status-grid article,
body[data-app-theme="frutigeraero"] .widgets-status-icon,
body[data-app-theme="frutigeraero"] .widgets-amount-presets button,
body[data-app-theme="frutigeraero"] .widgets-check,
body[data-app-theme="frutigeraero"] .widget-custom-sound,
body[data-app-theme="frutigeraero"] .widget-sound-card,
body[data-app-theme="frutigeraero"] .widget-source-card,
body[data-app-theme="frutigeraero"] .widget-source-card.featured,
body[data-app-theme="frutigeraero"] .widget-source-actions button,
body[data-app-theme="frutigeraero"] .widget-qr-updated,
body[data-app-theme="frutigeraero"] .customizer-section,
body[data-app-theme="frutigeraero"] .settings-form,
body[data-app-theme="frutigeraero"] .theme-preset-card,
body[data-app-theme="frutigeraero"] .modal-close,
body[data-app-theme="frutigeraero"] .qr-result code,
body[data-app-theme="frutigeraero"] .mode-option,
body[data-app-theme="frutigeraero"] .public-actions>button,
body[data-app-theme="frutigeraero"] .product-card,
body[data-app-theme="frutigeraero"] .money-input,
body[data-app-theme="frutigeraero"] .message-types label,
body[data-app-theme="frutigeraero"] .admin-list button,
body[data-app-theme="frutigeraero"] .detail-list>div,
body[data-app-theme="frutigeraero"] .ticket-admin-actions button,
body[data-app-theme="frutigeraero"] .chat-composer textarea,
body[data-app-theme="frutigeraero"] .admin-profile-metrics div,
body[data-app-theme="frutigeraero"] .pix-key-grid>div,
body[data-app-theme="frutigeraero"] .admin-profile-empty,
body[data-app-theme="frutigeraero"] .help-channels a,
body[data-app-theme="frutigeraero"] .viewer-welcome,
body[data-app-theme="frutigeraero"] .support-card,
body[data-app-theme="frutigeraero"] .auth-card,
body[data-app-theme="frutigeraero"] .sound-effect-card,
body[data-app-theme="frutigeraero"] .customizer-preview-pane,
body[data-app-theme="frutigeraero"] /* Color picker with hex label */
.color-picker-wrap,
body[data-app-theme="frutigeraero"] .bg-type-btn.active,
body[data-app-theme="frutigeraero"] .donation-play-btn,
body[data-app-theme="frutigeraero"] .voice-btn,
body[data-app-theme="frutigeraero"] /* ── Download Audio Button ── */
.donation-download-btn,
body[data-app-theme="frutigeraero"] .incentive-filter-toolbar input,
body[data-app-theme="frutigeraero"] .incentive-filter-toolbar select,
body[data-app-theme="frutigeraero"] .incentive-show-more-btn,
body[data-app-theme="frutigeraero"] .incentive-health>div,
body[data-app-theme="frutigeraero"] .incentive-kpi-card.strong,
body[data-app-theme="frutigeraero"] .incentive-kpi-card.accent,
body[data-app-theme="frutigeraero"] .marketplace-store-card,
body[data-app-theme="frutigeraero"] .catalog-item-card,
body[data-app-theme="frutigeraero"] .product-desc,
body[data-app-theme="frutigeraero"] .size-tag,
body[data-app-theme="frutigeraero"] .cep-calc-row input,
body[data-app-theme="frutigeraero"] .pro-plan-card,
body[data-app-theme="frutigeraero"] .pro-pay-method,
body[data-app-theme="frutigeraero"] .pro-pix-box,
body[data-app-theme="frutigeraero"] .pro-pix-box textarea,
body[data-app-theme="frutigeraero"] .plans-tab-container #btn-tab-pro.active,
body[data-app-theme="frutigeraero"] .plans-tab-container #btn-tab-advanced.active,
body[data-app-theme="frutigeraero"] .qr-analytics-kpis article,
body[data-app-theme="frutigeraero"] .public-activity-stats article,
body[data-app-theme="frutigeraero"] /* Custom Range Slider */
.tts-speed-range,
body[data-app-theme="frutigeraero"] input[type="range"],
body[data-app-theme="frutigeraero"] .kickover-filters,
body[data-app-theme="frutigeraero"] .kickover-card,
body[data-app-theme="frutigeraero"] /* Chat Layout */
.chat-layout,
body[data-app-theme="frutigeraero"] .chat-header,
body[data-app-theme="frutigeraero"] .chat-bubble.received,
body[data-app-theme="frutigeraero"] .chat-input-area,
body[data-app-theme="frutigeraero"] .community-top-bar,
body[data-app-theme="frutigeraero"] .community-sidebar,
body[data-app-theme="frutigeraero"] .community-main,
body[data-app-theme="frutigeraero"] .admin-config-grid>div,
body[data-app-theme="frutigeraero"] .admin-config-grid>button,
body[data-app-theme="frutigeraero"] /* Admin member card premium */
.admin-member-card,
body[data-app-theme="frutigeraero"] .admin-db-toolbar,
body[data-app-theme="frutigeraero"] /* Admin team form */
.admin-team-form,
body[data-app-theme="frutigeraero"] /* Admin audit filters refinement */
.audit-filters,
body[data-app-theme="frutigeraero"] .sub-tier-card,
body[data-app-theme="frutigeraero"] .sub-tier-card.featured-tier,
body[data-app-theme="frutigeraero"] .live-terms-section,
body[data-app-theme="frutigeraero"] .live-chat-input-area,
body[data-app-theme="frutigeraero"] .live-chat-input-area input,
body[data-app-theme="frutigeraero"] .live-chat-message.free-chat .live-chat-avatar,
body[data-app-theme="frutigeraero"] .sidebar,
body[data-app-theme="frutigeraero"] .navbar {
  /* Brighter, glossy glass for dark text */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 10px 30px rgba(0, 50, 100, 0.15), inset 0 2px 3px rgba(255, 255, 255, 0.8), inset 0 -2px 10px rgba(0, 100, 200, 0.1) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  color: #0a1f33 !important; /* Darker font color */
  text-shadow: 0 1px 1px rgba(255,255,255,0.7) !important;
}

/* Theme Pro Settings Styles */
.theme-pro-shell { display: flex; flex-direction: column; gap: 24px; }
.theme-pro-hero { display: flex; align-items: center; gap: 20px; background: var(--surface-2); padding: 24px; border-radius: var(--radius); border: 1px solid var(--line); }
.theme-designer-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 24px; }
@media (max-width: 900px) { .theme-designer-grid { grid-template-columns: 1fr; } }
.theme-preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px; }
.theme-preset-card { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--line); padding: 12px; border-radius: var(--radius); cursor: pointer; transition: 0.2s; color: var(--text); }
.theme-preset-card:hover { background: var(--surface-3); }
.theme-preset-card.active { border-color: var(--green); background: var(--green-alpha); }
.theme-preset-card span { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 10px rgba(0,0,0,0.5); }
.theme-color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; margin-bottom: 24px; }
.theme-color-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.theme-color-grid input[type="color"] { width: 100%; height: 36px; border: none; border-radius: 6px; cursor: pointer; background: none; }
.theme-range-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; color: var(--muted); font-size: 13px; }
.theme-control-actions { display: flex; gap: 12px; margin-top: 24px; }

/* Frutiger Aero Theme Overrides */
body[data-app-theme="frutigeraero"] {
  background-image: var(--frutiger-bg, url('/assets/frutigeraero/frutinger-aero1.png'));
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: #000;
}
body[data-app-theme="frutigeraero"]::before {
  content: ""; position: fixed; inset: 0; background: rgba(0,0,0, 1);
  opacity: calc(1 - var(--frutiger-opacity, 1));
  pointer-events: none; z-index: -1;
}
body[data-app-theme="frutigeraero"] .app-shell,
body[data-app-theme="frutigeraero"] .sidebar,
body[data-app-theme="frutigeraero"] .topbar {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.2);
}
body[data-app-theme="frutigeraero"] .panel,
body[data-app-theme="frutigeraero"] .modal-card {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important; -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 10px 30px rgba(0, 50, 100, 0.15) !important;
  color: #0a1f33 !important;
}
body[data-app-theme="frutigeraero"] h1, body[data-app-theme="frutigeraero"] h2, body[data-app-theme="frutigeraero"] h3, body[data-app-theme="frutigeraero"] h4, body[data-app-theme="frutigeraero"] p, body[data-app-theme="frutigeraero"] span, body[data-app-theme="frutigeraero"] label, body[data-app-theme="frutigeraero"] div {
  color: #0a1f33; /* Forçar cor escura em textos sobre fundo claro do aero */
}
body[data-app-theme="frutigeraero"] .button-primary { background: #0088cc; color: white; }
body[data-app-theme="frutigeraero"] .theme-preset-card { background: rgba(255, 255, 255, 0.4); border-color: rgba(255, 255, 255, 0.5); }
body[data-app-theme="frutigeraero"] .theme-preset-card.active { background: rgba(255, 255, 255, 0.8); border-color: #0088cc; }

/* Global App Header */
.global-app-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; background: rgba(10, 10, 12, 0.95); border-bottom: 1px solid rgba(255,255,255,0.05); position: sticky; top: 0; z-index: 9999; backdrop-filter: blur(10px); }
.gah-left { display: flex; align-items: center; gap: 24px; }
.gah-watermark { display: flex; align-items: center; gap: 8px; opacity: 0.3; filter: grayscale(100%); font-family: 'Inter', sans-serif; user-select: none; }
.gah-watermark strong { font-weight: 800; font-size: 16px; letter-spacing: -0.5px; }
.gah-security { display: flex; align-items: center; gap: 10px; color: #10b981; background: rgba(16, 185, 129, 0.1); padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(16, 185, 129, 0.2); }
.gah-security span.material-symbols-rounded { font-size: 20px; }
.gah-security div { display: flex; flex-direction: column; }
.gah-security div span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.gah-security div small { font-size: 10px; color: rgba(255,255,255,0.6); }
.gah-nav { display: flex; align-items: center; gap: 16px; }
.gah-nav a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 13px; font-weight: 500; transition: all 0.2s; }
.gah-nav a:hover { color: #fff; }
.gah-logoff { color: #ef4444 !important; background: rgba(239, 68, 68, 0.1); padding: 6px 12px; border-radius: 6px; }
.gah-logoff:hover { background: rgba(239, 68, 68, 0.2); }
@media(max-width: 900px) { .global-app-header { flex-direction: column; gap: 16px; align-items: flex-start; } .gah-nav { flex-wrap: wrap; } }

/* Welcome Screen Overrides */
.welcome-animation-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 40px;
  animation: slideUpFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.channel-marketing-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
  max-width: 800px;
  margin: 0 auto 40px auto;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  animation: slideUpFade 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.channel-marketing-card img {
  width: 100%;
  display: block;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cmc-body {
  padding: 32px;
  text-align: center;
}
.cmc-body h3 { font-size: 24px; margin-bottom: 12px; }
.cmc-body p { color: rgba(255,255,255,0.7); font-size: 15px; margin-bottom: 24px; line-height: 1.6; }
.cmc-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #a855f7;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s;
}
.cmc-button:hover { background: #9333ea; transform: translateY(-2px); }

@keyframes slideUpFade {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Dashboard Footer - Matches page-content horizontal width */
.dashboard-footer {
  width: min(1380px, 100%);
  margin: 0 auto;
  padding: 0 clamp(22px, 3.2vw, 52px) 40px;
  display: flex;
  justify-content: center;
}

.dashboard-footer-inner {
  width: 100%;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted-2);
  font-size: 13px;
}

.dashboard-footer-inner .footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--text);
  font-size: 16px;
}

.dashboard-footer-inner .footer-brand img {
  height: 24px;
  border-radius: 5px;
}

.dashboard-footer-inner .footer-brand .beta-badge {
  font-size: 10px;
  background: var(--green);
  color: #000;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.dashboard-footer-inner .footer-links {
  display: flex;
  gap: 24px;
}

.dashboard-footer-inner .footer-links a {
  color: var(--muted-2);
  text-decoration: none;
  transition: color 0.2s;
}

.dashboard-footer-inner .footer-links a:hover {
  color: var(--text);
}

.dashboard-footer-inner .footer-copyright {
  text-align: right;
}

@media (max-width: 800px) {
  .dashboard-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .dashboard-footer-inner .footer-copyright {
    text-align: left;
  }
  .dashboard-footer-inner .footer-links {
    flex-wrap: wrap;
    gap: 16px;
  }
}


/* --- Frutiger Aero Global Styles --- */
body.theme-frutiger-aero {
  --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --bg-modal: rgba(173, 216, 230, 0.4); /* Baby blue glass */
  --bg-card: rgba(255, 255, 255, 0.2);
  --bg-sidebar: rgba(173, 216, 230, 0.5);
  --radius: 0px;
  --radius-scale: 0;
  --border-radius: 0px;
  font-family: var(--font-family);
}

body.theme-frutiger-aero * {
  border-radius: 0 !important;
}

body.theme-frutiger-aero .panel,
body.theme-frutiger-aero .modal,
body.theme-frutiger-aero .sidebar,
body.theme-frutiger-aero .header,
body.theme-frutiger-aero .card {
  background: var(--bg-modal) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 6px rgba(0,0,0,0.1) !important;
}

/* Make inner canvases lighter and borderless */
body.theme-frutiger-aero .canvas,
body.theme-frutiger-aero .inner-content {
  background: rgba(255, 255, 255, 0.5) !important;
  border: none !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important;
}

/* Modals for Frutiger Config */
.frutiger-bg-btn {
  transition: transform 0.2s;
}
.frutiger-bg-btn:hover {
  transform: scale(1.05);
}
.frutiger-bg-btn.active {
  box-shadow: 0 0 0 3px var(--primary);
}

.fa-page-cb {
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
}


/* --- Frutiger Aero Preview Toolbar --- */
.fa-preview-toolbar {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(20, 20, 30, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  z-index: 9999;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
}

.fa-preview-toolbar.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.fa-preview-toolbar .button {
  border-radius: 30px !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
  height: auto !important;
  white-space: nowrap;
}

.fa-preview-toolbar-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 4px;
}


/* --- Windows Vista Aesthetics for Frutiger Aero --- */
.theme-frutiger-aero .panel,
.theme-frutiger-aero .card,
.theme-frutiger-aero .modal-content,
.theme-frutiger-aero .auth-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
}

.theme-frutiger-aero .modal-header,
.theme-frutiger-aero .panel-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.0) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.theme-frutiger-aero .button-primary {
  background: linear-gradient(180deg, var(--theme-accent) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.3) 51%, rgba(0, 0, 0, 0.5) 100%) !important;
  background-color: var(--theme-accent) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.7), 0 2px 5px rgba(0,0,0,0.4) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
}

.theme-frutiger-aero .button-primary:hover {
  filter: brightness(1.2);
}

/* Fix text colors inside glass panels to ensure readability */
.theme-frutiger-aero h1,
.theme-frutiger-aero h2,
.theme-frutiger-aero h3 {
  text-shadow: 0 2px 4px rgba(0,0,0,0.7);
}

@keyframes discordGlow {
  0% { box-shadow: 0 0 10px rgba(88, 101, 242, 0.4), 0 0 20px rgba(88, 101, 242, 0.2); }
  100% { box-shadow: 0 0 25px rgba(88, 101, 242, 0.8), 0 0 40px rgba(88, 101, 242, 0.4); }
}

.discord-qr-mode {
  animation: discordGlow 1.5s ease-in-out infinite alternate !important;
  border-color: #5865F2 !important;
}

/* Clean mode: keep the creator workflow focused by default. */
.clean-mode .sidebar {
  padding-top: 18px;
  background: rgba(7, 8, 10, 0.96) !important;
  border-right-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.clean-mode .sidebar-top {
  padding-bottom: 16px;
}

.clean-mode .profile-switcher,
.clean-mode .balance-card {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.075);
}

.clean-mode .sidebar nav {
  gap: 3px;
}

.clean-mode .sidebar nav p {
  margin: 15px 10px 6px;
  color: rgba(255, 255, 255, 0.34);
  font-size: 7px;
  letter-spacing: 1.5px;
}

.clean-mode .sidebar nav button,
.clean-mode .sidebar-bottom button {
  min-height: 38px;
  color: rgba(255, 255, 255, 0.62);
  border: 1px solid transparent;
}

.clean-mode .sidebar nav button:hover,
.clean-mode .sidebar-bottom button:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.06);
}

.clean-mode .sidebar nav button.active {
  background: rgba(0, 230, 118, 0.095);
  border-color: rgba(0, 230, 118, 0.15);
  box-shadow: inset 2px 0 var(--green);
}

.clean-mode .topbar {
  height: 64px;
  background: rgba(7, 8, 10, 0.88);
}

.clean-mode .top-search {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.075);
}

.clean-mode .page-content {
  padding-top: clamp(22px, 3vw, 36px);
}

.clean-mode .page-heading {
  margin-bottom: 18px;
}

.clean-mode .page-heading h1 {
  font-size: clamp(28px, 4vw, 44px);
}

.clean-mode .panel,
.clean-mode .stat-card {
  border-color: rgba(255, 255, 255, 0.075);
  box-shadow: none;
}

.clean-modules-head p {
  max-width: 540px;
}

.clean-modules-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 24px 18px;
}

.clean-modules-toolbar>span {
  margin-left: auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.clean-modules-list {
  display: grid;
  gap: 8px;
  padding: 0 24px 24px;
}

.clean-module-row {
  width: 100%;
  min-height: 68px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: calc(10px * var(--radius-scale, 1));
  text-align: left;
}

.clean-module-row:hover {
  border-color: rgba(0, 230, 118, 0.22);
  background: rgba(255, 255, 255, 0.055);
}

.clean-module-row.is-highlighted {
  border-color: rgba(0, 230, 118, 0.55);
  box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.08);
}

.clean-module-row.is-locked {
  opacity: .48;
  cursor: not-allowed;
}

.clean-module-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--green);
  background: rgba(0, 230, 118, 0.08);
}

.clean-module-icon .material-symbols-rounded {
  font-size: 20px;
}

.clean-module-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.clean-module-copy strong {
  font-size: 13px;
}

.clean-module-copy small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.clean-module-switch {
  width: 40px;
  height: 22px;
  padding: 2px;
  display: flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  transition: background .18s ease;
}

.clean-module-switch i {
  width: 18px;
  height: 18px;
  display: block;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  transition: transform .18s ease, background .18s ease;
}

.clean-module-row.is-enabled .clean-module-switch {
  background: rgba(0, 230, 118, 0.28);
}

.clean-module-row.is-enabled .clean-module-switch i {
  transform: translateX(18px);
  background: var(--green);
}

.clean-modules-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  gap: 6px;
  color: var(--muted);
  text-align: center;
}

/* Focused application shell and widget operations center. */
.clean-mode {
  --radius: 8px;
}

.clean-mode .app-main {
  background: #07080a;
}

.clean-mode .topbar {
  padding-inline: clamp(18px, 2.4vw, 34px);
  border-bottom-color: rgba(255, 255, 255, .07);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .45);
}

.clean-mode .top-search {
  width: min(520px, 48vw);
  min-height: 36px;
  border-radius: 7px;
}

.clean-mode .page-content {
  width: min(100%, 1500px);
  margin-inline: auto;
  padding-inline: clamp(18px, 2.4vw, 34px);
}

.clean-mode .page-heading h1 {
  font-size: 32px;
  letter-spacing: 0;
}

.clean-mode .panel,
.clean-mode .stat-card,
.clean-mode .feature-card,
.clean-mode .support-card {
  border-radius: 8px;
  background: #0d0f13;
}

.clean-mode .panel-head {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.widget-manager-trigger {
  position: relative;
  min-height: 34px;
  padding: 0 8px 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #d8dce3;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

.widget-manager-trigger:hover {
  color: #fff;
  background: rgba(255, 255, 255, .075);
  border-color: rgba(255, 255, 255, .14);
}

.widget-manager-trigger>.material-symbols-rounded {
  font-size: 17px;
}

.widget-manager-trigger>b {
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  display: grid;
  place-items: center;
  color: #9da4ae;
  background: rgba(255, 255, 255, .07);
  border-radius: 5px;
  font-size: 8px;
}

.widget-manager-trigger.has-online::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 7px;
  height: 7px;
  border: 2px solid #08090b;
  border-radius: 50%;
  background: #19d77c;
  box-shadow: 0 0 10px rgba(25, 215, 124, .7);
}

.modal-backdrop.widget-manager-backdrop {
  padding: 0;
  place-items: stretch;
  background: rgba(2, 3, 5, .94);
  backdrop-filter: blur(18px);
}

.modal.widget-manager-modal {
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  padding: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #08090c;
  box-shadow: none;
}

.widget-manager-head {
  min-height: 84px;
  padding: 18px clamp(20px, 3vw, 42px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.widget-manager-head h2 {
  margin: 2px 0 3px;
  font: 700 25px/1.1 "Space Grotesk", "Inter", sans-serif;
  letter-spacing: 0;
}

.widget-manager-head p {
  margin: 0;
  color: #858b96;
  font-size: 10px;
}

.widget-manager-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.widget-manager-cloud-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9ca3ad;
  font-size: 9px;
  font-weight: 700;
}

.widget-manager-cloud-state .material-symbols-rounded {
  color: #24c985;
  font-size: 16px;
}

.widget-manager-cloud-state.is-local .material-symbols-rounded {
  color: #f0b84a;
}

.widget-manager-head .icon-button,
.widget-manager-head .modal-close {
  width: 34px;
  height: 34px;
  border-radius: 7px;
}

.widget-manager-head .is-spinning .material-symbols-rounded {
  animation: spin 1s linear infinite;
}

.widget-manager-metrics {
  padding: 0 clamp(20px, 3vw, 42px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: #0b0c10;
}

.widget-manager-metrics article {
  min-height: 76px;
  padding: 14px 18px;
  display: grid;
  align-content: center;
  gap: 3px;
  border-right: 1px solid rgba(255, 255, 255, .06);
}

.widget-manager-metrics article:first-child {
  border-left: 1px solid rgba(255, 255, 255, .06);
}

.widget-manager-metrics span {
  color: #777e89;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.widget-manager-metrics strong {
  font: 700 22px/1 "Space Grotesk", sans-serif;
}

.widget-manager-metrics .is-online strong {
  color: #2bdc8f;
}

.widget-manager-toolbar {
  padding: 14px clamp(20px, 3vw, 42px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.widget-manager-search {
  width: min(390px, 42vw);
  min-height: 38px;
  padding-inline: 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #777e89;
  background: #0e1014;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 7px;
}

.widget-manager-search .material-symbols-rounded {
  font-size: 17px;
}

.widget-manager-search input {
  min-width: 0;
  flex: 1;
  color: #f6f7f9;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 11px;
}

.widget-manager-filters {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  background: #0e1014;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 7px;
}

.widget-manager-filters button {
  min-height: 30px;
  padding-inline: 11px;
  color: #818792;
  background: transparent;
  border: 0;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
}

.widget-manager-filters button:hover {
  color: #e7e9ed;
}

.widget-manager-filters button.active {
  color: #fff;
  background: #252932;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.widget-manager-list {
  min-height: 0;
  padding: 12px clamp(20px, 3vw, 42px) 30px;
  display: grid;
  align-content: start;
  gap: 6px;
  overflow-y: auto;
}

.widget-manager-row {
  min-height: 72px;
  display: grid;
  grid-template-columns: 34px 38px minmax(210px, 1fr) minmax(230px, .65fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #0d0f13;
  border: 1px solid rgba(255, 255, 255, .065);
  border-radius: 7px;
  transition: background .16s ease, border-color .16s ease;
}

.widget-manager-row:hover {
  background: #111319;
  border-color: rgba(255, 255, 255, .12);
}

.widget-manager-row.is-online {
  box-shadow: inset 2px 0 #24ce83;
}

.widget-manager-number {
  color: #5f6671;
  font: 700 11px/1 "Space Grotesk", sans-serif;
  text-align: center;
}

.widget-manager-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #ccd1d8;
  background: #181b21;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 7px;
}

.widget-manager-icon .material-symbols-rounded {
  font-size: 19px;
}

.widget-manager-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.widget-manager-copy>div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.widget-manager-copy strong {
  min-width: 0;
  overflow: hidden;
  color: #f1f3f6;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-manager-copy small {
  overflow: hidden;
  color: #747b86;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-manager-copy-badge,
.widget-operation-state,
.widget-runtime-state {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

.widget-manager-copy-badge {
  padding: 3px 6px;
  color: #b9c1cb;
  background: rgba(255, 255, 255, .06);
}

.widget-manager-copy-badge.is-primary {
  color: #8fceff;
  background: rgba(68, 162, 235, .1);
}

.widget-manager-states {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
}

.widget-runtime-state,
.widget-operation-state {
  min-height: 24px;
  padding-inline: 8px;
  border: 1px solid rgba(255, 255, 255, .07);
}

.widget-runtime-state {
  color: #7f8792;
  background: rgba(255, 255, 255, .025);
}

.widget-runtime-state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #535963;
}

.widget-runtime-state.is-online {
  color: #7ee8b4;
  border-color: rgba(36, 206, 131, .18);
  background: rgba(36, 206, 131, .07);
}

.widget-runtime-state.is-online i {
  background: #24ce83;
  box-shadow: 0 0 8px rgba(36, 206, 131, .7);
}

.widget-operation-state.is-active {
  color: #8fceff;
  border-color: rgba(68, 162, 235, .2);
  background: rgba(68, 162, 235, .08);
}

.widget-operation-state.is-paused {
  color: #f7c86b;
  border-color: rgba(247, 181, 54, .2);
  background: rgba(247, 181, 54, .08);
}

.widget-operation-state.is-disabled {
  color: #f1939c;
  border-color: rgba(239, 68, 68, .2);
  background: rgba(239, 68, 68, .08);
}

.widget-manager-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.widget-manager-actions button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #8d949f;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
}

.widget-manager-actions button:hover:not(:disabled) {
  color: #fff;
  background: #20232b;
  border-color: rgba(255, 255, 255, .08);
}

.widget-manager-actions button.is-danger:hover:not(:disabled) {
  color: #ff9099;
  background: rgba(239, 68, 68, .09);
  border-color: rgba(239, 68, 68, .16);
}

.widget-manager-actions button:disabled {
  opacity: .25;
  cursor: not-allowed;
}

.widget-manager-actions .material-symbols-rounded {
  font-size: 17px;
}

.widget-manager-actions .is-busy .material-symbols-rounded {
  animation: spin 1s linear infinite;
}

.widget-manager-loading,
.widget-manager-empty {
  min-height: 220px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  color: #747b86;
  text-align: center;
}

.widget-manager-loading .material-symbols-rounded,
.widget-manager-empty>.material-symbols-rounded {
  font-size: 28px;
}

.widget-manager-empty strong {
  color: #d8dce3;
  font-size: 12px;
}

.widget-manager-empty span,
.widget-manager-loading span {
  font-size: 9px;
}

@media (max-width: 1040px) {
  .widget-manager-row {
    grid-template-columns: 30px 38px minmax(180px, 1fr) auto;
  }

  .widget-manager-states {
    grid-column: 3;
    grid-row: 2;
  }

  .widget-manager-actions {
    grid-column: 4;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 720px) {
  .widget-manager-trigger>span:not(.material-symbols-rounded) {
    display: none;
  }

  .widget-manager-head {
    min-height: 74px;
    padding: 14px 16px;
  }

  .widget-manager-head p,
  .widget-manager-cloud-state {
    display: none;
  }

  .widget-manager-metrics {
    padding: 0 16px;
    grid-template-columns: repeat(5, minmax(64px, 1fr));
    overflow-x: auto;
  }

  .widget-manager-metrics article {
    min-height: 64px;
    padding: 10px;
  }

  .widget-manager-toolbar {
    padding: 10px 16px;
    align-items: stretch;
    flex-direction: column;
  }

  .widget-manager-search {
    width: 100%;
  }

  .widget-manager-filters {
    overflow-x: auto;
  }

  .widget-manager-list {
    padding: 10px 16px 24px;
  }

  .widget-manager-row {
    grid-template-columns: 30px 38px minmax(0, 1fr);
    gap: 9px;
  }

  .widget-manager-copy {
    grid-column: 3;
  }

  .widget-manager-states {
    grid-column: 2 / -1;
    grid-row: auto;
    flex-wrap: wrap;
  }

  .widget-manager-actions {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .055);
  }
}

/* 5.1.1 UI consolidation: solid surfaces, stronger hierarchy and readability. */
body.clean-mode {
  --bg: #07090c;
  --sidebar-bg: #0b0e12;
  --surface: #111419;
  --surface-2: #171b21;
  --surface-3: #1d222a;
  --line: rgba(255, 255, 255, .085);
  --line-strong: rgba(255, 255, 255, .16);
  --text: #f5f7f9;
  --muted: #a3aab5;
  --muted-2: #727b87;
  --green: #35d486;
  --green-dark: #24bd72;
  --green-alpha: rgba(53, 212, 134, .12);
  --danger: #f06f78;
  --warning: #e8b45b;
  --shadow: 0 14px 34px rgba(0, 0, 0, .28);
  color: var(--text);
  background: var(--bg);
}

body.clean-mode #app-view,
body.clean-mode .app-main {
  background: var(--bg);
}

body.clean-mode #app-view * {
  letter-spacing: 0;
}

body.clean-mode .sidebar {
  padding: 18px 12px 14px;
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--line);
  box-shadow: none;
}

body.clean-mode .sidebar-top {
  padding: 0 8px 16px;
}

body.clean-mode .profile-switcher,
body.clean-mode .balance-card {
  background: #101318;
  background-image: none;
  border-color: var(--line);
  border-radius: 7px;
  box-shadow: none;
}

body.clean-mode .profile-switcher {
  min-height: 52px;
}

body.clean-mode .profile-copy strong {
  color: var(--text);
  font-size: 12px;
}

body.clean-mode .profile-copy small,
body.clean-mode .sidebar-username {
  color: #8d96a2 !important;
  font-size: 11px !important;
}

body.clean-mode .balance-card {
  min-height: 104px;
  padding: 12px;
}

body.clean-mode .balance-card strong {
  font-size: 22px;
  letter-spacing: 0;
}

body.clean-mode .sidebar nav {
  gap: 2px;
}

body.clean-mode .sidebar nav p {
  margin: 17px 10px 6px;
  color: #777f8a;
  font-size: 10px;
  letter-spacing: 0;
}

body.clean-mode .sidebar nav button,
body.clean-mode .sidebar-bottom button {
  min-height: 42px;
  padding: 9px 10px;
  gap: 10px;
  color: #9da5af;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
}

body.clean-mode .sidebar nav button .material-symbols-rounded,
body.clean-mode .sidebar-bottom button .material-symbols-rounded {
  font-size: 19px;
}

body.clean-mode .sidebar nav button:hover,
body.clean-mode .sidebar-bottom button:hover {
  color: #edf0f3;
  background: #151920;
  border-color: var(--line);
}

body.clean-mode .sidebar nav button.active {
  color: #effaf4;
  background: #13251d;
  border-color: rgba(53, 212, 134, .2);
  box-shadow: inset 2px 0 #35d486;
}

body.clean-mode .topbar {
  height: 66px;
  padding-inline: clamp(18px, 2.4vw, 34px);
  background: rgba(11, 14, 18, .96);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  backdrop-filter: blur(12px);
}

body.clean-mode .top-search {
  min-height: 38px;
  background: #111419;
  border-color: var(--line);
  border-radius: 7px;
}

body.clean-mode .top-search:focus-within {
  border-color: rgba(53, 212, 134, .48);
  box-shadow: 0 0 0 3px rgba(53, 212, 134, .08);
}

body.clean-mode .top-search input {
  color: var(--text);
  font-size: 12px;
}

body.clean-mode .top-search kbd {
  padding: 3px 5px;
  color: #929aa5;
  background: #1b2027;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 10px;
}

body.clean-mode .icon-button,
body.clean-mode .widget-manager-trigger,
body.clean-mode .live-button {
  background: #151920;
  background-image: none;
  border-color: var(--line);
  border-radius: 7px;
  box-shadow: none;
}

body.clean-mode .widget-manager-trigger:hover,
body.clean-mode .icon-button:hover,
body.clean-mode .live-button:hover {
  background: #1b2027;
  border-color: var(--line-strong);
  transform: none;
}

body.clean-mode .page-content {
  width: min(100%, 1460px);
  padding: 28px clamp(18px, 2.4vw, 34px) 56px;
}

body.clean-mode .page-heading {
  margin-bottom: 20px;
  align-items: end;
  gap: 22px;
}

body.clean-mode .page-heading h1 {
  margin-top: 5px;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: 0;
}

body.clean-mode .page-heading p {
  max-width: 720px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

body.clean-mode .eyebrow {
  color: #73dfa9;
  font-size: 10px;
  letter-spacing: 0;
}

body.clean-mode .heading-actions {
  gap: 7px;
}

body.clean-mode .button {
  min-height: 38px;
  border-radius: 6px;
  font-size: 12px;
  letter-spacing: 0;
  box-shadow: none;
}

body.clean-mode .button:hover {
  transform: none;
}

body.clean-mode .button-primary {
  color: #06120c;
  background: #35d486;
  background-image: none;
  border-color: #35d486;
}

body.clean-mode .button-primary:hover {
  color: #030a06;
  background: #49df95;
  border-color: #49df95;
}

body.clean-mode .button-secondary,
body.clean-mode .button-ghost {
  color: #d7dce2;
  background: #171b21;
  background-image: none;
  border-color: var(--line);
}

body.clean-mode .button-secondary:hover,
body.clean-mode .button-ghost:hover {
  background: #1d222a;
  border-color: var(--line-strong);
}

body.clean-mode #page-content :is(.panel, .stat-card, .feature-card, .mvp-banner),
body.clean-mode .modal {
  background: var(--surface);
  background-image: none !important;
  border-color: var(--line);
  border-radius: 8px;
  box-shadow: none;
}

body.clean-mode .panel-head {
  min-height: 58px;
  padding: 15px 17px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .065);
}

body.clean-mode .panel-head h3 {
  color: var(--text);
  font-size: 14px;
  letter-spacing: 0;
}

body.clean-mode .panel-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

body.clean-mode .stats-grid {
  gap: 10px;
}

body.clean-mode .stat-card {
  min-height: 122px;
  padding: 16px;
  transition: border-color .16s ease, background .16s ease;
}

body.clean-mode .stat-card:hover {
  background: #14181e;
  border-color: rgba(53, 212, 134, .28);
  transform: none;
}

body.clean-mode .stat-head {
  align-items: center;
  color: #aab1bb;
  font-size: 11px;
  font-weight: 650;
}

body.clean-mode .stat-icon {
  width: 32px;
  height: 32px;
  color: #73dfa9;
  background: #17231d;
  border-color: rgba(53, 212, 134, .15);
  border-radius: 6px;
}

body.clean-mode .stat-card strong {
  color: #f7f9fa;
  font-size: 24px;
  letter-spacing: 0;
}

body.clean-mode .stat-card small {
  color: #98a1ad;
  font-size: 11px;
  line-height: 1.4;
}

body.clean-mode .mvp-banner-resume {
  width: 100%;
  color: var(--text);
  background: #10191e !important;
  border-color: rgba(73, 184, 220, .24) !important;
  border-radius: 7px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

body.clean-mode .mvp-banner-resume:hover {
  background: #131e24 !important;
  border-color: rgba(73, 184, 220, .42) !important;
}

body.clean-mode .mvp-banner-resume .mvp-banner-icon {
  color: #7bd2ee;
  background: #16262d;
  border: 1px solid rgba(73, 184, 220, .14);
  border-radius: 6px;
}

body.clean-mode .mvp-banner-resume>.material-symbols-rounded {
  color: #7bd2ee;
}

body.clean-mode .mvp-banner strong {
  color: var(--text);
  font-size: 13px;
}

body.clean-mode .mvp-banner p {
  color: var(--muted);
  font-size: 11px;
}

body.clean-mode .mvp-dashboard,
body.clean-mode .dashboard-grid,
body.clean-mode .bottom-grid {
  gap: 12px;
}

body.clean-mode .activity-panel {
  min-height: 370px;
}

body.clean-mode .transaction-list {
  padding: 0 12px 12px;
}

body.clean-mode .transaction {
  min-height: 64px;
  padding: 11px 7px;
  border-radius: 6px;
  border-top-color: rgba(255, 255, 255, .065);
}

body.clean-mode .transaction:hover {
  background: #161a20;
}

body.clean-mode .transaction-avatar {
  color: #78e2ad;
  background: #17231d;
  border: 1px solid rgba(53, 212, 134, .14);
  border-radius: 6px;
}

body.clean-mode .transaction-copy strong,
body.clean-mode .transaction-value strong {
  color: #edf0f3;
  font-size: 12px;
}

body.clean-mode .transaction-copy span,
body.clean-mode .transaction-value span {
  color: #89929e;
  font-size: 10px;
}

body.clean-mode .quick-qr {
  min-height: 340px;
}

body.clean-mode .quick-qr .qr-preview {
  background: #0b0e12;
  background-image: none;
  border-color: var(--line-strong);
  border-radius: 7px;
  box-shadow: none;
  backdrop-filter: none;
}

body.clean-mode .quick-qr .qr-preview:hover {
  border-color: rgba(53, 212, 134, .34);
  transform: none;
}

body.clean-mode .quick-qr>strong {
  font-size: 16px;
}

body.clean-mode .quick-qr>p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

body.clean-mode .feature-grid {
  gap: 10px;
}

body.clean-mode .feature-card {
  padding: 18px;
}

body.clean-mode .feature-card h3 {
  font-size: 14px;
}

body.clean-mode .feature-card p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

body.clean-mode .feature-icon {
  color: #73dfa9;
  background: #17231d;
  border: 1px solid rgba(53, 212, 134, .15);
  border-radius: 6px;
}

body.clean-mode .field {
  color: #aab1bb;
  font-size: 11px;
  line-height: 1.4;
}

body.clean-mode .field input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
body.clean-mode .field select,
body.clean-mode .field textarea {
  min-height: 40px;
  color: var(--text);
  background: #0c0f13;
  background-image: none;
  border-color: var(--line-strong);
  border-radius: 6px;
  font-size: 12px;
}

body.clean-mode .field textarea {
  min-height: 88px;
  line-height: 1.5;
}

body.clean-mode .field input::placeholder,
body.clean-mode .field textarea::placeholder {
  color: #626b77;
}

body.clean-mode .field input:hover,
body.clean-mode .field select:hover,
body.clean-mode .field textarea:hover {
  border-color: rgba(255, 255, 255, .22);
}

body.clean-mode .field input:focus,
body.clean-mode .field select:focus,
body.clean-mode .field textarea:focus {
  border-color: rgba(53, 212, 134, .55);
  box-shadow: 0 0 0 3px rgba(53, 212, 134, .08);
}

body.clean-mode .status {
  min-height: 22px;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0;
}

body.clean-mode .modal-backdrop {
  background: rgba(2, 4, 6, .82);
  backdrop-filter: blur(8px);
}

body.clean-mode .modal {
  background: #111419;
  border-color: var(--line-strong);
}

body.clean-mode .modal.widget-manager-modal {
  background: #08090c;
  border: 0;
  border-radius: 0;
}

body.clean-mode .modal-head h2 {
  font-size: 20px;
  letter-spacing: 0;
}

body.clean-mode .modal-head p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

body.clean-mode .clean-module-row {
  background: #151920;
  background-image: none;
  border-color: var(--line);
  border-radius: 7px;
}

body.clean-mode .clean-module-row:hover {
  background: #1a1f26;
  border-color: var(--line-strong);
}

body.clean-mode .playground-preview-container {
  background: #05070a;
  background-image: none;
  border-color: var(--line);
}

body.clean-mode .playground-editor-panel,
body.clean-mode .playground-tabs-container {
  background: #111419;
  background-image: none;
  border-color: var(--line);
}

body.clean-mode .playground-tab-btn.active {
  background: #222831;
  background-image: none;
  border-color: var(--line-strong);
}

body.clean-mode .widget-manager-copy strong {
  font-size: 13px;
}

body.clean-mode .widget-manager-copy small,
body.clean-mode .widget-runtime-state,
body.clean-mode .widget-operation-state {
  font-size: 10px;
}

body.clean-mode .widget-manager-metrics span {
  font-size: 10px;
}

body.clean-mode .widget-manager-row {
  background: #101318;
  border-color: var(--line);
}

body.clean-mode .widget-manager-row:hover {
  background: #151920;
  border-color: var(--line-strong);
}

body.clean-mode *:focus-visible {
  outline: 2px solid rgba(53, 212, 134, .72);
  outline-offset: 2px;
}

/* Public access follows the same solid, neutral system language. */
.auth-view:not(.hidden) {
  color: #f5f7f9;
  background: #07090c;
}

.auth-brand {
  background: #050709 !important;
  border-right-color: rgba(255, 255, 255, .09);
}

.auth-brand::before {
  opacity: .16;
  mask-image: none;
}

.auth-ambient-glow-1,
.auth-ambient-glow-2,
.shape-3d.shape-2,
.shape-3d.shape-3 {
  display: none;
}

.shape-3d.shape-1 {
  background: #10161b;
  background-image: none;
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .34);
  backdrop-filter: none;
}

.auth-panel {
  background: #0b0e12;
}

.auth-card {
  background: #111419 !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.auth-card h2,
.hero-copy h1 {
  letter-spacing: 0 !important;
}

.auth-card>p,
.hero-copy p {
  color: #a3aab5;
}

.auth-tabs {
  background: #0b0e12;
  border-color: rgba(255, 255, 255, .1);
  border-radius: 7px;
  backdrop-filter: none;
}

.auth-tabs button {
  border-radius: 5px !important;
}

.auth-tabs button.active {
  color: #07100b;
  background: #e9f0ec;
  box-shadow: none;
}

.input-group input,
.input-group select {
  background: #0c0f13 !important;
  border-color: rgba(255, 255, 255, .12) !important;
  border-radius: 6px !important;
}

.input-group input:focus,
.input-group select:focus {
  background: #0c0f13 !important;
  border-color: rgba(53, 212, 134, .62) !important;
  box-shadow: 0 0 0 3px rgba(53, 212, 134, .09) !important;
}

.auth-learn-card {
  background: #121a1e;
  background-image: none;
  border-color: rgba(73, 184, 220, .2);
  border-radius: 7px;
  box-shadow: none;
  transition: background .16s ease, border-color .16s ease;
}

.auth-learn-card:hover {
  background: #162127;
  background-image: none;
  border-color: rgba(73, 184, 220, .4);
  transform: none;
}

.auth-learn-card strong {
  font-size: 13px;
}

.auth-learn-card small,
.trust-note small {
  font-size: 11px;
}

.official-links a {
  background: #151920;
  border-radius: 6px;
  font-size: 10px;
}

.auth-view :focus-visible {
  outline: 2px solid rgba(53, 212, 134, .72);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .auth-brand,
  .shape-3d.shape-1 {
    display: none;
  }
}

@media (max-width: 1180px) {
  body.clean-mode .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.clean-mode .mvp-dashboard,
  body.clean-mode .dashboard-grid,
  body.clean-mode .bottom-grid {
    grid-template-columns: 1fr;
  }

  body.clean-mode .quick-qr {
    min-height: 300px;
  }
}

@media (max-width: 700px) {
  body.clean-mode .topbar {
    padding-inline: 14px;
  }

  body.clean-mode .page-content {
    padding: 20px 14px 44px;
  }

  body.clean-mode .page-heading {
    align-items: stretch;
  }

  body.clean-mode .page-heading h1 {
    font-size: 26px;
  }

  body.clean-mode .heading-actions,
  body.clean-mode .heading-actions .button {
    width: 100%;
  }

  body.clean-mode .heading-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.clean-mode .stats-grid {
    grid-template-columns: 1fr;
  }

  body.clean-mode .stat-card {
    min-height: 108px;
  }

  body.clean-mode .mvp-banner-resume {
    grid-template-columns: 38px minmax(0, 1fr) 20px;
    padding: 12px;
  }
}

/* StreamPix 5.3: denser application UI, Presentation workspace and StreamWallet. */
body.clean-mode .button,
body.clean-mode button {
  letter-spacing: 0;
}

body.clean-mode .button-primary {
  background: #28cf84;
  background-image: none;
  border-color: #28cf84;
  color: #06110b;
  box-shadow: none;
}

body.clean-mode .button-primary:hover {
  background: #38dc92;
  border-color: #38dc92;
  transform: none;
}

body.clean-mode .button-secondary {
  background: #151920;
  background-image: none;
  border-color: rgba(255, 255, 255, .1);
  box-shadow: none;
}

body.clean-mode .incentives-revenue-card,
body.clean-mode .incentive-kpi-card,
body.clean-mode .incentives-ops-strip,
body.clean-mode .incentive-feed-panel,
body.clean-mode .incentive-status-panel,
body.clean-mode .incentive-actions-panel,
body.clean-mode .wallet-profit-banner {
  background: #101318;
  background-image: none;
  border-color: rgba(255, 255, 255, .08);
  box-shadow: none;
}

body.clean-mode .incentive-filter-toolbar,
body.clean-mode .incentive-filter-tabs {
  background: #0b0e12;
  background-image: none;
  border-color: rgba(255, 255, 255, .08);
}

.incentive-control-header {
  min-height: 104px;
  margin-bottom: 14px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: #0f1217;
}

.incentive-control-profile {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.incentive-control-avatar {
  position: relative;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
  background: #090c10;
}

.incentive-control-profile h2 {
  margin: 3px 0 4px;
  font: 750 20px/1.12 "Space Grotesk", sans-serif;
  letter-spacing: 0;
}

.incentive-control-profile p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.incentive-control-profile p strong {
  color: var(--text);
}

.incentive-control-actions {
  display: flex;
  gap: 8px;
}

.playground-tabs-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 7px;
  overflow: visible;
}

.playground-tab-btn {
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  text-align: left;
}

.playground-tab-btn>.material-symbols-rounded {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, .055);
  font-size: 18px;
}

.playground-tab-btn>span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.playground-tab-btn strong,
.playground-tab-btn small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playground-tab-btn strong {
  font-size: 11px;
  font-weight: 750;
}

.playground-tab-btn small {
  color: var(--muted);
  font-size: 8px;
}

.playground-tab-btn.active>.material-symbols-rounded {
  color: #2bdc8f;
  background: rgba(43, 220, 143, .1);
}

.obs-scene-overview {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
  padding: 16px;
  background: #0d1014;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 8px;
}

.obs-scene-overview>header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.obs-scene-overview h3 {
  margin: 4px 0;
  font: 750 20px/1.15 "Space Grotesk", sans-serif;
  letter-spacing: 0;
}

.obs-scene-overview p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.obs-scene-ready {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  color: #39dc92;
  border: 1px solid rgba(57, 220, 146, .2);
  border-radius: 6px;
  background: rgba(57, 220, 146, .07);
  font-size: 8px;
  font-weight: 750;
}

.obs-scene-ready .material-symbols-rounded {
  font-size: 14px;
}

.obs-scene-overview-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 7px;
  overflow: hidden;
}

.obs-scene-overview-metrics>div {
  min-width: 0;
  padding: 9px 10px;
  display: grid;
  gap: 3px;
  background: #0c0f13;
  border-right: 1px solid rgba(255, 255, 255, .06);
  border-bottom: 0;
}

.obs-scene-overview-metrics>div:last-child {
  border-right: 0;
}

.obs-scene-overview-metrics span {
  color: var(--muted);
  font-size: 8px;
}

.obs-scene-overview-metrics strong {
  overflow: hidden;
  color: var(--text);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obs-scene-preset-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.obs-scene-layout-preset {
  min-height: 72px;
  padding: 9px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-content: center;
  column-gap: 8px;
  color: var(--text);
  background: #11151a;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 7px;
  text-align: left;
}

.obs-scene-layout-preset:hover {
  background: #161b21;
  border-color: rgba(43, 220, 143, .3);
}

.obs-scene-layout-preset>span {
  grid-row: span 2;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: #39dc92;
  border-radius: 5px;
  background: rgba(57, 220, 146, .08);
}

.obs-scene-layout-preset .material-symbols-rounded {
  font-size: 16px;
}

.obs-scene-layout-preset strong {
  font-size: 10px;
}

.obs-scene-layout-preset small {
  color: var(--muted);
  font-size: 8px;
  line-height: 1.35;
}

.obs-config-accordion {
  margin: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .065);
}

.obs-config-accordion:last-child {
  border-bottom: 0;
}

.obs-config-accordion>summary {
  min-height: 62px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 10px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition: background .16s ease, color .16s ease;
}

.obs-config-accordion>summary::-webkit-details-marker {
  display: none;
}

.obs-config-accordion>summary:hover,
.obs-config-accordion[open]>summary {
  background: #12161b;
}

.obs-config-accordion-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #38db91;
  background: rgba(56, 219, 145, .075);
  border: 1px solid rgba(56, 219, 145, .12);
  border-radius: 6px;
}

.obs-config-accordion-icon .material-symbols-rounded {
  font-size: 18px;
}

.obs-config-accordion-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.obs-config-accordion-copy strong {
  overflow: hidden;
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obs-config-accordion-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obs-config-accordion-state {
  max-width: 105px;
  overflow: hidden;
  color: #8d96a3;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obs-config-accordion-chevron {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #727b87;
  transition: transform .18s ease;
}

.obs-config-accordion-chevron .material-symbols-rounded {
  font-size: 18px;
}

.obs-config-accordion[open] .obs-config-accordion-chevron {
  transform: rotate(180deg);
}

.obs-config-accordion-body {
  padding: 14px 16px 18px;
  background: #0b0e12;
  border-top: 1px solid rgba(255, 255, 255, .045);
}

.obs-config-accordion-body>p:first-child {
  margin-top: 0 !important;
}

.obs-config-accordion-body>.field:first-child {
  margin-top: 0;
}

.dashboard-load-error {
  min-height: 320px;
  padding: 32px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  text-align: center;
}

.dashboard-load-error-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #e8b45b;
  background: rgba(232, 180, 91, .09);
  border: 1px solid rgba(232, 180, 91, .2);
  border-radius: 8px;
}

.dashboard-load-error-icon .material-symbols-rounded {
  font-size: 24px;
}

.dashboard-load-error h2 {
  margin: 5px 0 6px;
  font-size: 20px;
  letter-spacing: 0;
}

.dashboard-load-error p {
  max-width: 440px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.wallet-command-bar {
  min-height: 62px;
  margin-bottom: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: #0e1116;
}

.wallet-account-id {
  min-width: 0;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.wallet-account-id>span,
.wallet-withdrawal-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #32d78b;
  border-radius: 7px;
  background: rgba(50, 215, 139, .08);
}

.wallet-account-id>div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.wallet-account-id small,
.wallet-balance-card span,
.wallet-balance-card small {
  color: var(--muted);
  font-size: 9px;
}

.wallet-account-id strong {
  font-size: 13px;
}

.wallet-reconciled {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #8f98a5;
  font-size: 9px;
}

.wallet-reconciled .material-symbols-rounded {
  color: #32d78b;
  font-size: 15px;
}

.wallet-balance-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.wallet-balance-card {
  min-height: 132px;
  padding: 18px;
  display: grid;
  align-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: #101318;
}

.wallet-balance-card.primary {
  background: #111a17;
  border-color: rgba(50, 215, 139, .2);
}

.wallet-balance-card strong {
  font: 750 29px/1 "Space Grotesk", sans-serif;
  letter-spacing: 0;
}

.wallet-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, .72fr);
  gap: 12px;
  margin: 16px 0;
}

.wallet-history-panel,
.wallet-payout-panel {
  min-width: 0;
}

.wallet-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.wallet-section-head h3,
.wallet-payout-panel h3 {
  margin: 3px 0;
  font-size: 15px;
  letter-spacing: 0;
}

.wallet-section-head p,
.wallet-payout-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
}

.wallet-panel-loading {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  font-size: 10px;
}

.wallet-withdrawal-list {
  display: grid;
}

.wallet-withdrawal-row {
  min-height: 68px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.wallet-withdrawal-row:last-child {
  border-bottom: 0;
}

.wallet-withdrawal-copy,
.wallet-withdrawal-value {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.wallet-withdrawal-copy strong,
.wallet-withdrawal-value strong {
  font-size: 11px;
}

.wallet-withdrawal-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-withdrawal-value {
  justify-items: end;
}

.wallet-payout-panel>header {
  display: flex;
  gap: 9px;
  margin-bottom: 10px;
}

.wallet-payout-panel>header>span {
  color: #32d78b;
}

.wallet-payout-method {
  min-height: 70px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.wallet-payout-method>span {
  color: #9ba5b2;
}

.wallet-payout-method>div {
  display: grid;
  gap: 3px;
}

.wallet-payout-method strong {
  font-size: 10px;
}

.wallet-payout-method small {
  color: var(--muted);
  font-size: 8px;
  line-height: 1.35;
}

.wallet-payout-method>b {
  color: #76808d;
  font-size: 8px;
  text-transform: uppercase;
}

.streamwallet-loading {
  min-height: 420px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: var(--muted);
}

.streamwallet-shell {
  display: grid;
  gap: 14px;
}

.streamwallet-hero {
  min-height: 190px;
  padding: clamp(22px, 3.4vw, 42px);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
  align-items: center;
  gap: 28px;
  color: #f4f7f5;
  border: 1px solid rgba(63, 218, 145, .2);
  border-radius: 8px;
  background: #101a16;
}

.streamwallet-hero h2 {
  max-width: 720px;
  margin: 6px 0 9px;
  font: 750 clamp(24px, 3vw, 38px)/1.08 "Space Grotesk", sans-serif;
  letter-spacing: 0;
}

.streamwallet-hero p {
  max-width: 650px;
  margin: 0;
  color: #9eaaa4;
  font-size: 11px;
  line-height: 1.55;
}

.streamwallet-hero>aside {
  min-height: 116px;
  padding: 18px;
  display: grid;
  align-content: center;
  gap: 8px;
  border-left: 1px solid rgba(255, 255, 255, .1);
}

.streamwallet-hero>aside small {
  color: #a4afa9;
  font-size: 9px;
}

.streamwallet-hero>aside strong {
  font: 750 30px/1 "Space Grotesk", sans-serif;
}

.streamwallet-hero>aside span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #42db96;
  font-size: 9px;
}

.streamwallet-toolbar {
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: #0e1116;
}

.streamwallet-search {
  min-width: 240px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 6px;
  background: #090c10;
}

.streamwallet-search .material-symbols-rounded {
  color: var(--muted);
  font-size: 17px;
}

.streamwallet-search input {
  width: 100%;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
}

.streamwallet-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.streamwallet-filters button {
  min-height: 34px;
  padding: 0 10px;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font-size: 9px;
  text-transform: capitalize;
}

.streamwallet-filters button:hover,
.streamwallet-filters button.active {
  color: var(--text);
  border-color: rgba(255, 255, 255, .1);
  background: #171b21;
}

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

.streamwallet-item {
  min-width: 0;
  min-height: 370px;
  display: grid;
  grid-template-rows: 150px minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: #101318;
}

.streamwallet-item:hover {
  border-color: rgba(255, 255, 255, .16);
}

.streamwallet-item.is-unavailable {
  opacity: .56;
}

.streamwallet-item-media {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #36d98f;
  background: #0a0d11;
  border-bottom: 1px solid rgba(255, 255, 255, .065);
}

.streamwallet-item-media>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.streamwallet-item-media>.material-symbols-rounded {
  font-size: 42px;
}

.streamwallet-item-media>span {
  position: absolute;
  left: 9px;
  top: 9px;
  padding: 4px 6px;
  color: #c9d0d8;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 5px;
  background: rgba(5, 7, 9, .82);
  font-size: 8px;
  text-transform: capitalize;
}

.streamwallet-item-body {
  padding: 15px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.streamwallet-item-body h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0;
}

.streamwallet-item-body p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.streamwallet-item-body small {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  color: #808a96;
  font-size: 8px;
  line-height: 1.4;
}

.streamwallet-item-body small .material-symbols-rounded {
  font-size: 13px;
}

.streamwallet-item>footer {
  padding: 12px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, .065);
}

.streamwallet-item>footer>div {
  display: grid;
  gap: 2px;
}

.streamwallet-item>footer span {
  color: var(--muted);
  font-size: 8px;
}

.streamwallet-item>footer strong {
  font-size: 14px;
}

.streamwallet-item>footer .button {
  min-width: 0;
  min-height: 34px;
  padding-inline: 9px;
  font-size: 8px;
}

.streamwallet-orders {
  margin-top: 4px;
}

.streamwallet-order-row {
  min-height: 70px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.streamwallet-order-row:last-child {
  border-bottom: 0;
}

.streamwallet-order-row>span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #38d98f;
  border-radius: 7px;
  background: rgba(56, 217, 143, .08);
}

.streamwallet-order-row>div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.streamwallet-order-row>div:last-child {
  justify-items: end;
}

.streamwallet-order-row strong {
  font-size: 10px;
}

.streamwallet-order-row small {
  color: var(--muted);
  font-size: 8px;
}

.streamwallet-empty {
  grid-column: 1 / -1;
  min-height: 240px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  color: var(--muted);
  border: 1px dashed rgba(255, 255, 255, .1);
  border-radius: 8px;
}

.streamwallet-confirm-item {
  padding: 12px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 7px;
  background: #0c0f13;
}

.streamwallet-confirm-item>span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #38d98f;
  border-radius: 7px;
  background: rgba(56, 217, 143, .08);
}

.streamwallet-confirm-item>div {
  display: grid;
  gap: 3px;
}

.streamwallet-confirm-item strong,
.streamwallet-confirm-item b {
  font-size: 11px;
}

.streamwallet-confirm-item small {
  color: var(--muted);
  font-size: 8px;
}

.streamwallet-payment-summary {
  padding: 11px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.streamwallet-payment-summary span {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 8px;
}

.streamwallet-payment-summary strong {
  color: var(--text);
  font-size: 12px;
}

.streamwallet-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}

#withdraw-form {
  gap: 13px;
}

.modal:has(#withdraw-form) {
  width: min(680px, calc(100vw - 28px));
}

#withdraw-form>label.field:first-child input {
  min-height: 52px;
  font: 700 20px/1 "Space Grotesk", sans-serif;
}

#withdraw-pix-fields,
#withdraw-bank-fields {
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 7px;
  background: #0c0f13;
}

#withdraw-scheduled-fields {
  display: none !important;
}

.public-view {
  background: #080b0f;
  background-image: none;
}

.public-header,
.support-card,
.public-account-card,
.combo-summary-card,
.public-benefits-panel,
.payment-mode-option {
  background-image: none !important;
  box-shadow: none !important;
}

.support-card {
  border-color: rgba(255, 255, 255, .1);
  border-radius: 8px;
  background: #111419;
}

.public-primary-action {
  background: #25cf83 !important;
  background-image: none !important;
  color: #06100a !important;
  border-radius: 8px;
  box-shadow: none !important;
}

.public-primary-action strong,
.public-primary-action small,
.public-primary-action>.material-symbols-rounded {
  color: #06100a !important;
}

.public-primary-action small {
  opacity: .7;
}

.public-value-grid article,
.payment-mode-option,
.combo-summary-card {
  border-radius: 7px;
  background: #0c0f13;
  border-color: rgba(255, 255, 255, .08);
}

@media (max-width: 1180px) {
  .streamwallet-catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .playground-tabs-container {
    grid-template-columns: repeat(3, minmax(145px, 1fr));
  }

  .obs-scene-preset-list,
  .obs-scene-overview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .obs-scene-overview-metrics>div:nth-child(2n) {
    border-right: 0;
  }

  .obs-scene-overview-metrics>div:nth-child(-n+2) {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }
}

@media (max-width: 860px) {
  .wallet-balance-grid,
  .wallet-workspace-grid,
  .streamwallet-hero {
    grid-template-columns: 1fr;
  }

  .streamwallet-hero>aside {
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-left: 0;
  }

  .streamwallet-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .streamwallet-search {
    min-width: 0;
  }

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

@media (max-width: 560px) {
  .public-account-card {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-width: none;
    margin-bottom: 16px;
  }

  .creator-avatar {
    margin: 0 auto 17px;
  }

  .incentive-control-header,
  .incentive-control-profile {
    align-items: flex-start;
    flex-direction: column;
  }

  .incentive-control-actions,
  .incentive-control-actions .button {
    width: 100%;
  }

  .incentive-control-actions {
    display: grid;
  }

  .wallet-command-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .wallet-command-bar .button {
    width: 100%;
  }

  .wallet-reconciled {
    justify-content: center;
  }

  .wallet-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .wallet-withdrawal-row,
  .streamwallet-order-row {
    grid-template-columns: 34px minmax(0, 1fr);
    padding-block: 9px;
  }

  .wallet-withdrawal-value,
  .streamwallet-order-row>div:last-child {
    grid-column: 2;
    justify-items: start;
  }

  .streamwallet-catalog,
  .playground-tabs-container,
  .obs-scene-preset-list,
  .obs-scene-overview-metrics {
    grid-template-columns: 1fr;
  }

  .obs-scene-overview-metrics>div {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
  }

  .obs-scene-overview-metrics>div:last-child {
    border-bottom: 0 !important;
  }

  .obs-scene-overview {
    padding: 13px;
  }

  .obs-scene-overview>header {
    align-items: stretch;
    flex-direction: column;
  }

  .obs-scene-ready {
    align-self: flex-start;
  }

  .obs-config-accordion>summary {
    grid-template-columns: 32px minmax(0, 1fr) 18px;
    padding-inline: 11px;
  }

  .obs-config-accordion-icon {
    width: 32px;
    height: 32px;
  }

  .obs-config-accordion-state {
    display: none;
  }

  .obs-config-accordion-body {
    padding-inline: 12px;
  }

  .streamwallet-item {
    min-height: 350px;
  }

  #withdraw-bank-fields>div {
    grid-template-columns: 1fr !important;
  }
}