@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: min(230px, 70vw);
  padding: 9px;
  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;
  }
}

@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));
  }
}

@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);
}

.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: 38px;
  height: 38px;
  border-radius: calc(14px * var(--radius-scale, 1));
  display: grid;
  place-items: center;
  background: rgba(141, 217, 168, 0.12);
  color: var(--green);
}

.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;
}

.qr-analytics-highlight strong,
.wallet-profit-banner strong {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 18px;
}

.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, var(--green), rgba(141, 217, 168, .28));
  box-shadow: 0 10px 24px rgba(141, 217, 168, .16);
}

.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;
}

/* 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: 14px;
  border: 1px solid var(--line);
  border-radius: calc(12px * var(--radius-scale, 1));
  background: var(--surface-2);
}

.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 {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.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.45fr) minmax(260px, .55fr);
  gap: 16px;
  margin-bottom: 16px;
}

.admin-command-hero,
.admin-command-side,
.admin-user-directory,
.admin-ops-panel,
.admin-transactions-panel {
  border-color: rgba(255, 255, 255, .09) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018)),
    var(--panel);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
}

.admin-command-hero {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: calc(14px * var(--radius-scale, 1));
  position: relative;
  overflow: hidden;
}

.admin-command-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent, rgba(95, 215, 255, .08), transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(141, 217, 168, .12), transparent 30%);
}

.admin-command-hero>* {
  position: relative;
  z-index: 1;
}

.admin-command-hero h2 {
  margin: 6px 0 8px;
  max-width: 720px;
  font-size: 34px;
  line-height: 1.05;
}

.admin-command-hero p {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.admin-command-actions {
  margin-top: 18px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-command-side {
  padding: 14px;
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: calc(14px * var(--radius-scale, 1));
}

.admin-command-side div {
  min-width: 0;
  padding: 14px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 4px 10px;
  align-items: center;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: calc(10px * var(--radius-scale, 1));
}

.admin-command-side span {
  width: 34px;
  height: 34px;
  grid-row: span 2;
  display: grid;
  place-items: center;
  color: #5fd7ff;
  background: rgba(95, 215, 255, .1);
  border: 1px solid rgba(95, 215, 255, .2);
  border-radius: calc(9px * var(--radius-scale, 1));
}

.admin-command-side strong {
  font: 800 22px "Space Grotesk", sans-serif;
}

.admin-command-side small {
  color: var(--muted);
  font-size: 10px;
}

.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; }