/* client-features.css
   Notification center, customer-set server labels, and ticket attachments. */

/* Notification center ------------------------------------------------------ */

.client-home-notification-all {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--highlight);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.client-home-notification-all:hover {
  text-decoration: underline;
}

.client-home-notification-link.is-warning {
  border-left: 2px solid #f59e0b;
  padding-left: 8px;
}

.client-home-notification-link.is-critical {
  border-left: 2px solid #ef4444;
  padding-left: 8px;
}

.client-home-notification-link.is-success {
  border-left: 2px solid #10b981;
  padding-left: 8px;
}

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

.notification-head h2 {
  margin: 0 0 4px;
}

.notification-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.notification-filter {
  padding: 7px 15px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.notification-filter:hover {
  color: var(--text);
}

.notification-filter.is-active {
  border-color: var(--primary);
  background: rgba(37, 99, 235, 0.14);
  color: var(--text);
}

.notification-list {
  display: grid;
  gap: 10px;
}

.notification-item {
  display: flex;
  gap: 13px;
  padding: 15px 16px;
  border: 1px solid var(--stroke);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.notification-item.is-info { border-left-color: var(--primary); }
.notification-item.is-success { border-left-color: #10b981; }
.notification-item.is-warning { border-left-color: #f59e0b; }
.notification-item.is-critical { border-left-color: #ef4444; }

/* Read items stay legible but visibly recede from the unread ones. */
.notification-item.is-read {
  opacity: 0.62;
  border-left-color: var(--stroke);
}

.notification-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-strong);
  color: var(--muted);
}

.notification-item.is-success .notification-icon { color: #10b981; }
.notification-item.is-warning .notification-icon { color: #f59e0b; }
.notification-item.is-critical .notification-icon { color: #ef4444; }

.notification-icon-svg {
  width: 17px;
  height: 17px;
}

.notification-body {
  flex: 1;
  min-width: 0;
}

.notification-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.notification-title-row strong {
  font-size: 0.97rem;
}

.notification-title-row time {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 0.77rem;
}

.notification-body p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.89rem;
  line-height: 1.55;
}

.notification-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

.notification-actions .table-action {
  text-transform: capitalize;
}

/* ==========================================================================
   Services panel — VPS cards
   A card is read top to bottom in bands: who it is, what it is, how to reach
   it, how much is left, and what can be done with it. The bands are separated
   by hairlines instead of nested boxes so a customer with five servers scans
   the same row position on every card.
   ========================================================================== */

.svc-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 14px;
}

.service-browser-view > .svc-group-head:first-child {
  margin-top: 4px;
}

.svc-group-head .subsection-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.svc-group-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(148, 163, 184, 0.12);
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.svc-group-count.is-warning {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
}

.svc-group-count.is-danger {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.13);
  color: #f87171;
}

.svc-group-hint {
  color: var(--muted);
  font-size: 0.8rem;
}

.svc-empty {
  margin: 0;
  padding: 22px 18px;
  border: 1px dashed var(--stroke);
  border-radius: 10px;
  text-align: center;
}

/* Band 1 — identity ------------------------------------------------------- */

.svc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--stroke);
}

.svc-identity {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
}

.svc-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-top: 7px;
  border-radius: 50%;
  background: #64748b;
  box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.16);
}

.svc-dot[data-power='on'] {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.svc-dot[data-power='off'] {
  background: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16);
}

.svc-dot[data-power='locked'] {
  background: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}

.svc-identity-text {
  min-width: 0;
}

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

.svc-name {
  color: var(--text);
  font-family: 'Poppins', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.svc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.svc-meta span + span::before {
  content: '·';
  margin-right: 6px;
  opacity: 0.55;
}

.svc-head-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

/* Lifecycle badge text comes straight off the status string ("active",
   "expires in 5 days"), so lift the first letter rather than title-casing it. */
.svc-chip {
  display: inline-block;
  white-space: nowrap;
  font-size: 0.72rem;
}

.svc-chip::first-letter {
  text-transform: uppercase;
}

/* Band 2 — specs, credentials, meters ------------------------------------- */

.svc-body {
  padding: 15px 18px;
  display: grid;
  gap: 14px;
}

.svc-body > .service-spec-tags {
  margin-bottom: 0;
}

.svc-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: var(--stroke);
  overflow: hidden;
}

.svc-fact {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 9px 12px;
  min-width: 0;
  background: var(--surface-strong);
}

.svc-fact small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.svc-fact-value {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  min-width: 0;
}

.svc-fact-text {
  min-width: 0;
  color: var(--text);
  font-family: 'JetBrains Mono', 'SFMono-Regular', 'Consolas', monospace;
  font-size: 0.84rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.svc-fact-text.is-masked {
  letter-spacing: 0.12em;
}

.svc-fact-actions {
  display: flex;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.svc-fact-actions .vps-credential-action {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 6px;
  background: transparent;
}

.svc-fact-actions .vps-credential-action svg {
  width: 13px;
  height: 13px;
}

.svc-fact:hover .svc-fact-actions,
.svc-fact:focus-within .svc-fact-actions {
  opacity: 1;
}

/* Touch devices never fire hover, so the copy buttons have to stay visible. */
@media (hover: none) {
  .svc-fact-actions {
    opacity: 1;
  }
}

.svc-meters {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.svc-meters > * {
  margin: 0 !important;
}

.svc-renewal {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: var(--surface-strong);
}

.svc-renewal small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.svc-renewal strong {
  color: var(--text);
  font-size: 0.98rem;
  font-variant-numeric: tabular-nums;
}

.svc-renewal span {
  color: var(--muted);
  font-size: 0.78rem;
}

.svc-renewal.is-warning {
  border-color: rgba(245, 158, 11, 0.35);
}

.svc-renewal.is-warning span {
  color: #fbbf24;
}

.svc-renewal.is-danger {
  border-color: rgba(239, 68, 68, 0.35);
}

.svc-renewal.is-danger span {
  color: #f87171;
}

/* Band 3 — auto-renew ------------------------------------------------------ */

.service-server-card .service-auto-renew {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: var(--surface-strong);
}

.service-server-card .service-auto-renew.is-on {
  border-color: rgba(37, 99, 235, 0.32);
}

.service-auto-renew-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.service-server-card .service-auto-renew-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

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

.svc-switch {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 19px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(148, 163, 184, 0.18);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.svc-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #e2e8f0;
  transition: transform 0.18s ease, background 0.18s ease;
}

.svc-switch-input:checked + .svc-switch {
  background: var(--client-accent, #2563eb);
  border-color: var(--client-accent, #2563eb);
}

.svc-switch-input:checked + .svc-switch::after {
  transform: translateX(15px);
  background: #ffffff;
}

.svc-switch-input:focus-visible + .svc-switch {
  outline: 2px solid var(--client-accent, #2563eb);
  outline-offset: 2px;
}

.service-auto-renew-title {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.service-auto-renew-title strong {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
}

.service-server-card .service-auto-renew-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.4;
}

.service-server-card .service-auto-renew-fields {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--stroke);
}

/* Band 4 — actions --------------------------------------------------------- */

.svc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 18px;
  border-top: 1px solid var(--stroke);
  background: rgba(148, 163, 184, 0.045);
}

.svc-foot-note {
  min-width: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.svc-foot-note:empty {
  display: none;
}

.service-server-card .svc-foot-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 0 0 auto;
}

/* One button height across the row: the manage CTA carries a 44px minimum and
   a gradient of its own, which left it towering over everything beside it. */
.service-server-card .svc-foot-actions .table-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 34px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
}

.client-dashboard-page:not(.admin-page) .svc-foot-actions .client-vps-manage-action,
.client-dashboard-page:not(.admin-page) .svc-foot-actions .client-vps-manage-action:hover,
.client-dashboard-page:not(.admin-page) .svc-foot-actions .client-vps-manage-action:focus-visible {
  background: var(--client-accent, #2563eb);
  border-color: var(--client-accent, #2563eb);
  box-shadow: none;
  color: #ffffff;
}

.client-dashboard-page:not(.admin-page) .svc-foot-actions .client-vps-manage-action:hover,
.client-dashboard-page:not(.admin-page) .svc-foot-actions .client-vps-manage-action:focus-visible {
  filter: brightness(1.12);
}

.service-server-card .service-locked-warning,
.service-server-card .service-usage-warning,
.service-server-card .service-usage-caution {
  margin: 0 18px 16px;
}

.service-server-card .service-label-form,
.service-server-card > .service-customer-note {
  margin: 0 18px 16px;
}

/* Bright theme ------------------------------------------------------------- */

html[data-theme='bright'] .svc-facts,
html[data-theme='bright'] .svc-fact,
html[data-theme='bright'] .svc-renewal,
html[data-theme='bright'] .service-server-card .service-auto-renew {
  background: rgba(15, 23, 42, 0.025);
}

html[data-theme='bright'] .svc-facts {
  background: rgba(15, 23, 42, 0.08);
}

html[data-theme='bright'] .svc-foot {
  background: rgba(15, 23, 42, 0.025);
}

html[data-theme='bright'] .svc-switch::after {
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
}

/* The spec chips, the section heading and the copy icons are all inherited
   dark-theme colours that land on a white card in this theme. */
html[data-theme='bright'] .service-server-card .service-spec-tags span {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(30, 64, 110, 0.16);
  color: #1e3a5f;
}

html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) .svc-group-head .subsection-title,
html[data-theme='bright'] .svc-group-head .subsection-title {
  color: #12355c;
}

html[data-theme='bright'] .svc-fact-actions .vps-credential-action {
  color: rgba(30, 64, 110, 0.7);
}

html[data-theme='bright'] .svc-fact-actions .vps-credential-action:hover,
html[data-theme='bright'] .svc-fact-actions .vps-credential-action:focus-visible {
  background: rgba(37, 99, 235, 0.1);
  color: #12355c;
}

html[data-theme='bright'] .svc-group-count {
  border-color: rgba(30, 64, 110, 0.18);
  background: rgba(30, 64, 110, 0.07);
}

@media (max-width: 780px) {
  .svc-head {
    flex-direction: column;
    align-items: stretch;
  }

  .svc-head-status {
    justify-content: flex-start;
  }

  .svc-meters {
    grid-template-columns: 1fr;
  }

  /* Narrow viewports are reached by touch far more often than the hover query
     detects, and a copy button nobody can hover is a copy button nobody has. */
  .svc-fact-actions {
    opacity: 1;
  }

  .svc-foot {
    flex-direction: column;
    align-items: stretch;
  }

  .service-server-card .svc-foot-actions {
    justify-content: flex-start;
    margin-left: 0;
  }

  .service-server-card .svc-foot-actions .table-action {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Customer-set server labels ---------------------------------------------- */

.service-label-edit {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--stroke);
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.service-label-edit svg {
  width: 14px;
  height: 14px;
}

.service-label-edit:hover {
  color: var(--text);
  border-color: var(--primary);
}

.service-label-form {
  display: grid;
  gap: 8px;
  margin: 10px 0 4px;
  padding: 12px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
}

.service-label-form input,
.service-label-form textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--stroke);
  border-radius: 7px;
  background: var(--bg-1);
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  resize: vertical;
}

.service-label-form input:focus,
.service-label-form textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.service-label-form-actions {
  display: flex;
  gap: 8px;
}

.service-customer-note {
  margin: 8px 0 0;
  padding: 8px 11px;
  border-radius: 7px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Ticket attachments ------------------------------------------------------- */

.support-kb-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--highlight);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
}

.support-kb-link svg {
  width: 15px;
  height: 15px;
}

.support-kb-link:hover {
  text-decoration: underline;
}

.attach-label {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  font-weight: 600;
}

.attach-label em {
  color: var(--muted);
  font-style: normal;
  font-weight: 500;
}

.attach-control {
  display: grid;
  gap: 6px;
}

.attach-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px dashed var(--stroke);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 0.87rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.attach-button svg {
  width: 15px;
  height: 15px;
}

.attach-button:hover {
  color: var(--text);
  border-color: var(--primary);
}

.attach-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.attach-icon-button {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: 1px solid var(--stroke);
  border-radius: 9px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.attach-icon-button svg {
  width: 16px;
  height: 16px;
}

.attach-icon-button:hover {
  color: var(--text);
  border-color: var(--primary);
}

.attach-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 4px 0 2px;
}

.attach-preview {
  position: relative;
  width: 84px;
  margin: 0;
}

.attach-preview img {
  width: 84px;
  height: 64px;
  border: 1px solid var(--stroke);
  border-radius: 7px;
  object-fit: cover;
}

.attach-preview figcaption {
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attach-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

.support-reply-previews {
  padding: 0 4px;
}

.message-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 2px;
}

.message-attachment {
  display: block;
  width: 128px;
  color: inherit;
  text-decoration: none;
}

.message-attachment img {
  width: 128px;
  height: 92px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background: var(--surface-strong);
  object-fit: cover;
  transition: transform 0.16s ease;
}

.message-attachment:hover img {
  transform: scale(1.02);
}

.message-attachment-name {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  font-size: 0.71rem;
  opacity: 0.75;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-attachment.is-broken img {
  opacity: 0.35;
}

@media (max-width: 640px) {
  .notification-head {
    flex-direction: column;
  }

  .notification-title-row {
    flex-direction: column;
    gap: 2px;
  }

  .message-attachment,
  .message-attachment img {
    width: 104px;
  }
}

/* ---------------------------------------------------------------------------
   Referral program panel
   The progress track is drawn as one segment per referral rather than a single
   filled bar, because the reward is granted in whole referrals — a half-filled
   bar would suggest a partial referral counts for something.
--------------------------------------------------------------------------- */

.referral-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 6px;
}

.referral-hero h2 {
  margin: 4px 0 6px;
}

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

.referral-stat {
  min-width: 108px;
  padding: 10px 14px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.referral-stat strong {
  display: block;
  font-size: 1.32rem;
  line-height: 1.2;
}

.referral-stat span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.referral-stat.is-highlight {
  border-color: rgba(16, 185, 129, 0.42);
  background: var(--success-soft);
}

.referral-explainer ol {
  margin: 0;
  padding-left: 20px;
}

.referral-explainer li + li {
  margin-top: 6px;
}

.referral-section {
  margin-top: 22px;
}

.referral-code-input-row {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.referral-code-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--stroke);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--surface-strong);
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.referral-code-input-row input {
  flex: 1;
  min-width: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  text-transform: uppercase;
}

.referral-code-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.referral-code-label {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.referral-code-display strong {
  display: block;
  margin: 4px 0 2px;
  font-family: "Poppins", "Inter", sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  word-break: break-all;
}

.referral-code-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.referral-progress-card {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.referral-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.referral-progress-head h4 {
  margin: 0;
  font-size: 0.98rem;
}

.referral-progress-head strong {
  font-size: 1.16rem;
}

.referral-progress-track {
  display: flex;
  gap: 6px;
  margin: 12px 0 8px;
}

.referral-progress-step {
  flex: 1;
  height: 10px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: var(--surface-strong);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.referral-progress-step.is-filled {
  border-color: transparent;
  background: linear-gradient(90deg, var(--primary), var(--highlight));
}

.referral-reward-ready {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(16, 185, 129, 0.42);
  border-radius: var(--radius);
  background: var(--success-soft);
}

.referral-reward-ready strong {
  font-size: 1.1rem;
}

.referral-redeem-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.referral-redeem-controls label {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.referral-redeem-controls select {
  min-width: 168px;
}

.referral-reward-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.referral-reward-item + .referral-reward-item {
  margin-top: 8px;
}

.referral-reward-item h4 {
  margin: 0 0 2px;
  font-size: 0.96rem;
}

.referral-users-table td span.referral-units {
  display: inline-block;
  min-width: 24px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-strong);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

@media (max-width: 640px) {
  .referral-code-card,
  .referral-reward-ready {
    flex-direction: column;
    align-items: stretch;
  }

  .referral-code-actions .btn,
  .referral-redeem-controls .btn,
  .referral-redeem-controls select {
    width: 100%;
  }
}