/* ==========================================================================
   Default theme — STYLE sheet (the DESIGN — edit this to change the look).
   Every component's appearance: header, menu, balance, cards, forms, buttons,
   badges, alerts, tables, tabs, filters, tickets, modals, stars, FAQ, …
   Each section carries its base rules and its @media (mobile) overrides.
   Colours come from colors/<scheme>.css; the reset + grid + loading overlay live
   in core.css. Breakpoint: <=900px = mobile.
   Developed by Bilal & the HQ Team.
   ========================================================================== */

/* ---------- Header (logo) ---------- */
/* The header mirrors the page's own structure so the logo lines up with the card
   edges under it: the 16px gutter goes on the OUTER element (like .site-main) and
   the 1600 cap on the INNER one (like .row-wide). Putting both on .header-inner
   looked right until 1920px, where border-box counts its padding inside the cap
   and the logo ended up 16px inside the card's edge. Change one, change both. */
.site-header {
  background: var(--c-header);
  border-bottom: 1px solid var(--c-border);
  padding: 0 16px;
}
.header-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 12px 0;
}
.site-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 38px;
  overflow: hidden;
}
.site-logo img {
  height: 30px;
  width: auto;
  max-width: 170px;
  display: block;
}
.site-logo-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
  white-space: nowrap;
}
@media (max-width: 900px) {
  /* logo + toggle share the top row; the menu drops to its own line below.
     No gutter here — each child carries its own 12px so the drop-down menu can
     still run edge to edge. */
  .site-header {
    padding: 0;
  }
  .header-inner {
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 0;
    gap: 10px;
  }
  .site-logo {
    padding-left: 12px;
    height: auto;
  }
  .site-logo img {
    height: 28px;
  }
}

/* ---------- Menu ---------- */
/* Desktop: fills the space beside the logo, wraps to new lines (all left-aligned). */
.main-menu {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px 2px;
}
.menu-item {
  display: block;
  padding: 8px 14px;
  color: var(--c-muted);
  white-space: nowrap;
  border-radius: var(--c-radius);
  -webkit-tap-highlight-color: transparent;
}
.menu-item:hover,
.menu-item:active {
  color: var(--c-text);
  background: var(--c-active);
}
.menu-item.is-active {
  background: var(--c-active);
  color: var(--c-text);
}
.menu-icon {
  display: inline-block;
  width: 14px;
  margin-right: 4px;
  text-align: center;
  font-size: 0.95em;
}
.menu-toggle {
  display: none;
  cursor: pointer;
  line-height: 1;
  font-size: 15px;
  padding: 7px 11px;
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  background: var(--c-input);
  color: var(--c-muted);
}
.menu-toggle:hover {
  background: var(--c-active);
}
@media (max-width: 900px) {
  /* logo stays left; margin-left:auto pushes the toggle to the right */
  .menu-toggle {
    display: inline-block;
    order: 2;
    margin-left: auto;
    margin-right: 12px;
  }
  /* menu becomes an in-flow dropdown (pushes the page down when open) */
  .main-menu {
    display: none;
    order: 3;
    flex-basis: 100%;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--c-border);
  }
  .main-menu.is-open {
    display: flex;
  }
  /* 12px left/right margin so items line up with the logo + card gutter */
  .menu-item {
    padding: 10px 10px;
    margin: 0 12px;
  }
}

/* ---------- Header balance + currency (one control) ----------
   The button IS the balance; opening it switches currency. It is the first item
   INSIDE .main-menu, so it flows with the menu: left of the links on desktop, and
   at the top of the drop-down on mobile. */
.header-balance {
  flex: 0 0 auto;
  position: relative;
}
.balance-amount {
  font-weight: 700;
  font-size: 14px;
  color: var(--c-text);
  white-space: nowrap;
}
/* the currency the balance beside it is in — muted so the number still leads */
.balance-code {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-muted);
  white-space: nowrap;
}
.balance-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  cursor: pointer;
  background: var(--c-input);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
}
.balance-toggle:hover {
  background: var(--c-active);
}
/* same focus + open treatment as .select-control, so it behaves like every other
   dropdown on the site rather than looking dead when it is open */
.balance-toggle:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}
.header-balance.is-open .balance-toggle {
  border-color: var(--c-primary);
}
.balance-caret {
  font-size: 10px;
  color: var(--c-muted);
  transition: transform 0.15s;
}
.header-balance.is-open .balance-caret {
  transform: rotate(180deg);
}
/* left:0 — the card's left edge lines up with the button's */
.balance-menu {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 220px;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  box-shadow: var(--c-shadow);
}
.header-balance.is-open .balance-menu {
  display: block;
}
.balance-currency {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--c-radius);
  font-size: 13px;
  color: var(--c-text);
  white-space: nowrap;
}
.balance-currency span {
  color: var(--c-muted);
}
.balance-currency:hover {
  background: var(--c-active);
}
.balance-currency.is-active {
  background: var(--c-primary);
  color: var(--c-on-primary);
}
.balance-currency.is-active span {
  color: rgba(255, 255, 255, 0.8);
}
@media (max-width: 900px) {
  /* the menu is a stretched column here — same 12px gutter as .menu-item so the
     button lines up with the links under it, and full width like them */
  .header-balance {
    margin: 0 12px 4px;
  }
  .balance-toggle {
    height: 34px;
    padding: 0 10px;
    width: 100%;
  }
  /* balance + code stay left; the auto margin throws the caret to the far right */
  .balance-caret {
    margin-left: auto;
  }
  /* match the button rather than sitting narrower than it */
  .balance-menu {
    width: 100%;
  }
}

/* ---------- Main / Footer ---------- */
.site-main {
  flex: 1;
  padding: 24px 16px;
}
.site-footer {
  text-align: center;
  padding: 16px;
  color: var(--c-muted);
  font-size: 12px;
  border-top: 1px solid var(--c-border);
}
@media (max-width: 900px) {
  .site-main {
    padding: 16px 12px;
  }
}

/* ---------- Card ---------- */
.card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  padding: 18px 20px;
}
.card + .card {
  margin-top: 13px;
}
/* A button row that follows a card (blog post's "Back to blog") — the card has no
   bottom margin, so without this the button sits flush against the card's edge. */
.card + .form-actions {
  margin-top: 13px;
}
/* blocks inside a card carry their own bottom margin — drop it on the last one
   so the card's padding stays even top and bottom */
.card > *:last-child {
  margin-bottom: 0;
}

/* Card header — the card's own title strip, ruled off from the body.
       <div class="card">
         <div class="card-header">
           <h1 class="card-title">Your referral link</h1>
           <span class="label-badge">Earn 5%</span>      ← anything extra sits here
         </div>
         …body…
   The negative margins pull it out to the card's edges, so it must match the
   card's padding (and the mobile padding below). Anything after the title is
   pushed to the right. */
.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: -18px -20px 16px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--c-border);
}
.card-header .card-title {
  margin: 0;
  font-size: 16px;
}
.card-header .card-title + * {
  margin-left: auto;
}

/* Card footer — the header's mirror: a strip ruled off under the body, for the
   card's actions.
       <div class="card">
         …body…
         <div class="card-footer">
           <a class="btn btn-primary" href="…">Download</a>
         </div>
       </div>
   Selector is `.card > .card-footer` on purpose: the footer is the card's last
   child, and the rule above would otherwise zero the negative margin that pulls
   it down onto the card's edge. */
.card > .card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 16px -20px -18px;
  padding: 11px 20px;
  border-top: 1px solid var(--c-border);
}
.card-footer .btn {
  height: 34px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 900px) {
  .card {
    padding: 14px 14px;
  }
  .card-header {
    margin: -14px -14px 13px;
    padding: 9px 14px;
  }
  .card-header .card-title {
    font-size: 15px;
  }
  .card > .card-footer {
    margin: 13px -14px -14px;
    padding: 9px 14px;
  }
}

/* ---------- Divider ----------
   A ruled line between two parts of a card:  <div class="divider"></div> */
.divider {
  height: 1px;
  margin: 13px 0;
  background: var(--c-border);
}

/* ---------- Form controls ----------
   Inputs, custom dropdowns, textareas and readonly boxes ALL share one look
   (same height, padding, border, radius) — used on every page via .form-input. */
.form-group {
  margin-bottom: 13px;
}
.form-label {
  display: block;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 4px;
}
/* small highlight chip inside a label (e.g. the referral bonus rate) */
.label-badge {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  font-size: 11px;
  font-weight: 700;
}
.form-input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--c-text);
  background: var(--c-input);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.form-input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}
/* Muted so a placeholder never reads as a value the user already typed.
   Faded with opacity rather than a lighter colour: opacity blends toward whatever
   the input's background is, so it stays muted on a dark theme too, where a
   hardcoded grey would go the wrong way. (Browsers apply their own placeholder
   opacity, so this is set explicitly either way.)
   .select-search is the dropdown's own box — it isn't a .form-input. */
.form-input::placeholder,
.select-search::placeholder {
  color: var(--c-muted);
  opacity: 0.6;
}
textarea.form-input {
  height: auto;
  min-height: 90px;
  padding: 9px 12px;
  line-height: 1.5;
  resize: vertical;
}
/* readonly display box (description, total charge …) — an input you cannot type in */
.form-static {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--c-text);
  line-height: 1.5;
  background: var(--c-active);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
}

/* A field you cannot type in has to LOOK like one. Until now it didn't: a disabled
   input was pixel-identical to a live one, so the quantity box on mass order (dead
   until a service is picked) just looked like it was ignoring you, and the readonly
   fields on account/affiliate invited edits that silently went nowhere.
   The tell is the background. It is --c-active, NOT --c-card: these fields sit
   inside a .card, which is already --c-card, so that would have dissolved the box
   into the card behind it and left a bare outline. --c-active is a step darker
   than both the card and a live input, so it reads as "greyed out" either way. */
.form-input:disabled,
.form-input[readonly],
textarea.form-input:disabled,
textarea.form-input[readonly] {
  background: var(--c-active);
}
/* readonly still holds a real value the user may want to read or copy, so it keeps
   full-strength text; disabled has nothing to say yet, so it goes muted. */
.form-input:disabled {
  color: var(--c-muted);
  cursor: not-allowed;
}
/* Neither one is editable, so neither gets the blue "you are typing here" ring —
   clicking a readonly field to copy it should not look like it accepted focus. */
.form-input:disabled:focus,
.form-input[readonly]:focus {
  border-color: var(--c-border);
  box-shadow: none;
}
/* custom dropdown (<select class="searchable-select [has-search]">, see js-core/core.js)
   — the control matches .form-input exactly */
.select-wrap {
  position: relative;
}
.select-control {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  height: 38px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--c-text);
  background: var(--c-input);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
}
.select-control:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}
.select-wrap.is-open .select-control {
  border-color: var(--c-primary);
}
.select-value {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select-value i {
  margin-right: 4px;
  color: var(--c-muted);
}
.select-arrow {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--c-muted);
  transition: transform 0.15s;
}
.select-wrap.is-open .select-arrow {
  transform: rotate(180deg);
}
.select-panel {
  display: none;
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.select-wrap.is-open .select-panel {
  display: block;
}
.select-wrap.opens-up .select-panel {
  top: auto;
  bottom: calc(100% + 4px);
}
.select-search {
  width: 100%;
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--c-text);
  background: var(--c-input);
  border: 0;
  border-bottom: 1px solid var(--c-border);
}
.select-search:focus {
  outline: none;
}
.select-list {
  max-height: 260px;
  overflow-y: auto;
}
/* flex-start + the icon's small offset keep the icon on the FIRST line when a long name wraps */
.select-option {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 9px 12px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-text);
  cursor: pointer;
}
.select-option i {
  flex: 0 0 auto;
  width: 14px;
  margin-top: 3px;
  text-align: center;
  color: var(--c-muted);
}
.select-option:hover,
.select-option.is-active {
  background: var(--c-active);
}
.select-option.is-selected {
  background: var(--c-active);
  font-weight: 600;
}
.select-empty {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--c-muted);
}

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}
.form-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 13px;
  color: var(--c-text);
  cursor: pointer;
}
.form-check input {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
.form-row .form-check {
  margin-bottom: 0;
}

/* The fee pair under the Add Funds amount box: two read-only fields of equal width.
   align-items:start, not the row's default center — the two labels can wrap to
   different heights ("You will receive" is longer than "Fee"), and centred boxes then
   sit at different levels. */
.fee-row {
  align-items: flex-start;
}
.fee-row .form-group {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0;
}
.recaptcha-box {
  margin-bottom: 14px;
}
.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* quiet one-liner under a field or a button — use this instead of an info alert
   for small facts (minimum amount, "we do this by hand", …) */
.form-hint {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-muted);
}
.form-actions .btn {
  height: 38px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  border: 0;
  border-radius: var(--c-radius);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  transition:
    background 0.15s,
    transform 0.08s;
}
.btn:active {
  transform: translateY(1px);
}
/* A disabled button had NO styling at all: same colour, still cursor:pointer, and
   :active still pressed it in. So Spin Now looked live with 0 spins and looked
   live while the wheel was turning — it was already disabled both times, just
   invisibly. Nothing may look pressable when it is not. */
.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn:disabled:hover,
.btn[disabled]:hover {
  background: var(--c-primary);
}
.btn-primary {
  background: var(--c-primary);
}
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:visited {
  color: var(--c-on-primary);
}
.btn-primary:hover {
  background: var(--c-primary-dark);
}
/* small button for inside table rows (refill / cancel) */
.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  background: var(--c-active);
  border: 1px solid var(--c-border);
  color: var(--c-text);
}
.btn-sm:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-on-primary);
}
.btn-sm.is-busy {
  opacity: 0.5;
  pointer-events: none;
}
/* Refill / Cancel row buttons — ab theme colour se (pehle grey --c-active thay, sirf hover pe rang
   aata tha). Refill = accent (--c-primary), Cancel = danger (--c-danger); dono theme ki color file
   se aate hain, to admin scheme badle to ye bhi apne aap badal jate hain. `.btn-sm.btn-*` ki
   specificity `.btn-sm` ke grey se zyada hai isliye jeet leti hai. */
.btn-sm.btn-refill {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-on-primary);
}
.btn-sm.btn-refill:hover {
  background: var(--c-primary-dark);
  border-color: var(--c-primary-dark);
  color: var(--c-on-primary);
}
.btn-sm.btn-cancel {
  background: var(--c-danger);
  border-color: var(--c-danger);
  color: var(--c-on-primary);
}
.btn-sm.btn-cancel:hover {
  background: var(--c-danger);
  border-color: var(--c-danger);
  color: var(--c-on-primary);
  filter: brightness(0.92);
}
@media (max-width: 900px) {
  .btn {
    font-size: 13px;
  }
}

/* ---------- Links ---------- */
.link {
  color: var(--c-primary);
  font-weight: 700;
}
/* link-fixed: theme colour ke saath change NAHI hota — hamesha default link blue. Orders page ke
   URL-link par (.mass-links-ok wali soch: scheme koi bhi ho, valid URL link pehchana-jaana blue rahe). */
.link.link-fixed {
  color: #2f6fed;
}

/* ---------- Auth pages (login / signup / forgot / …) ---------- */
.auth-notes {
  margin-bottom: 14px;
}
.auth-switch {
  margin-top: 12px;
  color: var(--c-muted);
}
/* Resend is a <button> (it fires a request, it is not a link), so it arrives with
   the browser's native grey chrome — the reset only clears margin/padding, not
   background or border. Strip it so it reads as the link it looks like. While the
   cooldown runs it is disabled: muted and plain, not blue and bold, or a dead
   button still looks clickable. */
/* font-family/size, NOT the `font` shorthand: `font:inherit` also resets
   font-weight to inherit, and this rule sits after .link, so it was quietly
   undoing .link's bold. */
.resend-code {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}
.resend-code:disabled {
  color: var(--c-muted);
  cursor: default;
}
/* .form-row carries a bottom margin for the field under it; as the last thing in a
   card there is nothing under it, and .card > *:last-child only clears the margin
   of the row's own wrapper. */
.form-row.auth-switch {
  margin-bottom: 0;
}
.google-button {
  height: 38px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: var(--c-radius);
}
/* ---------- Inline form alert (success / error / warning / info) — sits above the card ----------
   IMPORTANT: .form-alert / .alert / .alert-* are used by the notification system (theme.js).
   Restyle them freely, but keep the class names — messages stop showing without them. */
.form-alert:not(:empty) {
  margin-bottom: 16px;
}
/* An alert box that sits between two cards has to carry the gap `.card + .card`
   would have given, or the cards weld together — the box breaks their adjacency
   whether it holds a message or not. */
.card + .form-alert {
  margin-top: 13px;
}
/* ...and an alert that FOLLOWS a card needs the same gap, or it sits flush against
   it — the closed-ticket notice under the thread was doing exactly that. */
.card + .alert {
  margin-top: 13px;
}
.alert {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 40px 12px 14px;
  margin-bottom: 13px;
  border: 1px solid;
  border-radius: var(--c-radius);
  font-size: 14px;
  line-height: 1.45;
}
.alert-icon {
  flex: 0 0 auto;
  font-size: 16px;
  margin-top: 1px;
}
.alert-text {
  flex: 1 1 auto;
  word-break: break-word;
}
.alert-close {
  position: absolute;
  top: 6px;
  right: 9px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: inherit;
  opacity: 0.55;
}
.alert-close:hover {
  opacity: 1;
}
.alert-success {
  color: var(--c-success);
  background: var(--c-success-bg);
  border-color: var(--c-success-border);
}
.alert-error {
  color: var(--c-danger);
  background: var(--c-danger-bg);
  border-color: var(--c-danger-border);
}
.alert-warning {
  color: var(--c-warning);
  background: var(--c-warning-bg);
  border-color: var(--c-warning-border);
}
.alert-info {
  color: var(--c-info);
  background: var(--c-info-bg);
  border-color: var(--c-info-border);
}

/* ---------- Receipt (order placed / withdraw requested) ----------
   Sits inside .alert.alert-success — it IS a success message, so it already has
   the alert's look and spacing. Only the inner lines need styling. */
.receipt-title {
  font-weight: 700;
  margin-bottom: 6px;
}
.receipt-row {
  word-break: break-word;
}

/* ---------- Input with a button beside it (referral link + copy) ---------- */
.input-with-button {
  display: flex;
  gap: 8px;
}
.input-with-button .form-input {
  flex: 1 1 auto;
  min-width: 0;
}
.input-with-button .btn {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
}
/* ---------- Code + example response (API manual) ---------- */
code {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--c-active);
  border: 1px solid var(--c-border);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  color: var(--c-text);
}
.api-response-title {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-muted);
}
.api-response {
  margin: 0 0 13px;
  padding: 12px 14px;
  overflow-x: auto;
  background: var(--c-active);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-text);
}
@media (max-width: 900px) {
  .api-response {
    padding: 10px;
  }
}

/* ---------- Status badge (listing tables) ----------
   One class per status the panel actually stores. Orders: pending (an 'error'
   order is shown as pending), processing, inprogress, completed, partial,
   canceled. Affiliate payouts: pending, success, rejected, spam. */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  text-transform: capitalize;
  white-space: nowrap;
}
.badge-pending,
.badge-partial {
  color: var(--c-warning);
  background: var(--c-warning-bg);
}
.badge-processing,
.badge-inprogress,
.badge-new,
.badge-open,     /* a ticket support has replied to — live, same blue as in-progress */
.badge-answered {
  color: var(--c-info);
  background: var(--c-info-bg);
}
.badge-closed,
.badge-spam {
  color: var(--c-neutral);
  background: var(--c-neutral-bg);
}
.badge-completed,
.badge-success {
  color: var(--c-success);
  background: var(--c-success-bg);
}
.badge-canceled,
.badge-rejected,
.badge-disabled {
  color: var(--c-danger);
  background: var(--c-danger-bg);
}
/* refunded is not a failure — the money went back, so it reads neutral, not red */
.badge-refunded {
  color: var(--c-neutral);
  background: var(--c-neutral-bg);
}
/* "there is something new here", shown NEXT TO a status rather than instead of it —
   a ticket can be open or closed and still have an unread reply. Takes the theme's own
   accent so it cannot be mistaken for one of the status colours above (amber/blue/grey),
   and follows whatever scheme the panel is set to. */
.badge-unread {
  color: var(--c-primary);
  background: var(--c-primary-soft);
  border: 1px solid var(--c-primary);
}
/* updates feed */
.badge-new_service {
  color: var(--c-info);
  background: var(--c-info-bg);
}
.badge-announcement {
  color: var(--c-announce);
  background: var(--c-announce-bg);
}

/* ---------- Update item (updates feed) ---------- */
.update-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.update-date {
  font-size: 12px;
  color: var(--c-muted);
}
.update-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text);
  word-break: break-word;
}

/* ---------- Child panel item ---------- */

/* ---------- Error list inside an alert (mass order) ---------- */
.error-list {
  margin: 8px 0 0;
  padding-left: 18px;
}
.error-list li {
  margin-bottom: 3px;
}

/* ---------- Payment method description (add funds) ----------
   The admin writes this per method in the panel, so it is their own HTML. */
/* No padding and no background on purpose: the tinted box made this text start and
   end further in than the inputs below it, so the admin's own description looked
   misaligned with the form. Flat, it lines up edge to edge with them. */
.payment-desc {
  margin-bottom: 13px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-text);
  word-break: break-word;
}
.payment-desc img {
  max-width: 100%;
  height: auto;
}
.payment-desc :last-child {
  margin-bottom: 0;
}

/* ---------- Mass order ---------- */
.mass-order-input {
  min-height: 240px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
}

/* ---------- Ticket thread ----------
   The header holds both ends of the line: subject on the left, status pushed to
   the right. .card-header is already a flex row, so this only adds the gap and
   stops the title reserving the whole width. */
.ticket-head {
  gap: 10px;
  flex-wrap: wrap;
}
.ticket-head .card-title {
  margin: 0;
}

/* what the ticket is about, under the header — the orders it concerns */
.ticket-about {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13px;
  color: var(--c-muted);
}
.ticket-about b {
  color: var(--c-text);
  font-weight: 700;
}

/* A conversation, read like one — and from the reader's own seat: YOUR messages sit
   on the right, support's on the left, the way every chat app puts "me" on the right.
   (The admin page mirrors this: there, staff is the one on the right.) */
.ticket-thread {
  margin-top: 13px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ticket-message {
  /* A FIXED width, not max-width: every bubble the same size whatever it holds, so
     the thread reads as two tidy columns instead of a ragged staircase of boxes. */
  width: 70%;
  align-self: flex-end;
  /* no bottom padding — the footer strip provides it, and overflow:hidden keeps
     that strip clipped to the bubble's rounded corners */
  padding: 11px 13px 0;
  overflow: hidden;
  border-radius: var(--c-radius);
  background: var(--c-active);
  border: 1px solid var(--c-border);
}
.ticket-message.is-staff {
  align-self: flex-start;
  background: var(--c-primary-soft);
  border-color: var(--c-primary);
}
/* The bubble's FOOTER: who said it and when, as a strip along the bottom rather
   than a line of text floating under the message. The negative side margins pull it
   out to the bubble's own edges (the bubble cancels its bottom padding for this), so
   it reads as part of the bubble's furniture and not as more content.
   Left-aligned in both bubbles — which side the bubble is on already says who is
   speaking. */
.ticket-time {
  margin: 9px -13px 0;
  padding: 4px 13px;
  border-top: 1px solid var(--c-border);
  background: rgba(0, 0, 0, 0.035);
  /* line-height as well as padding — at 1.5 the text itself was carrying most of
     the strip's height, so trimming the padding alone barely moved it */
  font-size: 11px;
  line-height: 1.45;
  color: var(--c-muted);
}
.ticket-time b {
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--c-text);
}

/* The reply box and the closed notice both live inside the thread's own card now, so
   they need the gap the old separate card used to give them. */
.ticket-thread + .ticket-reply-form,
.ticket-thread + .ticket-closed-note {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
}
.ticket-closed-note {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--c-muted);
}
.ticket-closed-note i {
  color: var(--c-primary);
}
.ticket-message.is-staff .ticket-time {
  border-top-color: var(--c-primary);
}
.ticket-message.is-staff .ticket-time b {
  color: var(--c-primary);
}
/* pre-line, not |nl2br in the template: the JS that appends a reply writes with
   textContent (it must — that text is the user's own), so line breaks have to be a
   CSS job or a fresh reply would read as one long line until the page was reloaded.
   This way the server-rendered messages and the appended one are identical. */
.ticket-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text);
  word-break: break-word;
  white-space: pre-line;
}

@media (max-width: 600px) {
  /* A little wider on a phone — 70% of a narrow screen leaves too little room for the
     text. Not much wider though: the gap on the other side is what shows which way a
     message is going. */
  .ticket-message {
    width: 82%;
  }
}

/* ---------- Service description popup (services list) ---------- */
.service-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.service-modal[hidden] {
  display: none;
}
.service-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.service-modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.service-modal-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-border);
}
.service-modal-title {
  margin: 0;
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-text);
  word-break: break-word;
}
.service-modal-close {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--c-radius);
  background: transparent;
  color: var(--c-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.service-modal-close:hover {
  background: var(--c-active);
  color: var(--c-text);
}
/* pre-line, not normal: descriptions are plain text whose layout IS the line
   breaks ("Start: …\nSpeed: …\nRefill: …"). HTML collapses those newlines, so the
   whole thing ran together on one line. pre-line honours them (blank lines
   included) while still collapsing stray spaces and rendering any real markup. */
.service-modal-body {
  padding: 16px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-text);
  white-space: pre-line;
}
.service-modal-body img {
  max-width: 100%;
  height: auto;
}
body.modal-open {
  overflow: hidden;
}

/* ---------- Smart App (PWA) install POPUP — top-center floating card (js-core/install-banner.js) ----------
   Script markup banata + `.is-open` class toggle karta (slide-down / slide-up); look yahan hai (theme colors).
   position:fixed hone se content push nahi hota — popup upar float karta. */
.pwa-install {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 3000;
  width: calc(100% - 24px);
  max-width: 440px;
  transform: translateX(-50%) translateY(-24px);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 0.84, 0.3, 1), opacity 0.35s ease, visibility 0.35s;
}
.pwa-install.is-open {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}
.pwa-install-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  padding: 12px 14px;
  background: var(--c-bg);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: calc(var(--c-radius) + 6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}
.pwa-install-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--c-radius);
  object-fit: cover;
}
.pwa-install-text {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.pwa-install-title {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pwa-install-sub {
  font-size: 11px;
  color: var(--c-muted);
}
.pwa-install-action {
  flex: none;
  padding: 7px 14px;
  border: 0;
  border-radius: var(--c-radius);
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.pwa-install-action:hover {
  background: var(--c-primary-dark);
}
.pwa-install-close {
  flex: none;
  padding: 2px 6px;
  border: 0;
  background: transparent;
  color: var(--c-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.pwa-install-close:hover {
  color: var(--c-text);
}

/* ---------- Stars ----------
   The rating input has its radios in reverse order (5→1) so a checked/hovered
   star can light every star BEFORE it with the ~ sibling selector — no JS. */
.star-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 4px;
}
.star-rating input {
  display: none;
}
.star-rating label {
  cursor: pointer;
  font-size: 22px;
  color: var(--c-border);
  line-height: 1;
}
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
  color: var(--c-star);
}
.star-display {
  display: inline-flex;
  gap: 2px;
  font-size: 12px;
  color: var(--c-star);
}
.star-display .is-off {
  color: var(--c-border);
}

/* ---------- Review item ---------- */
.review-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.review-name {
  font-size: 14px;
}
.review-date {
  margin-left: auto;
  font-size: 12px;
  color: var(--c-muted);
}
.review-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text);
  word-break: break-word;
}
.review-reply {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: var(--c-radius);
  background: var(--c-active);
  font-size: 13px;
  color: var(--c-text);
}
@media (max-width: 900px) {
  .review-date {
    margin-left: 0;
    width: 100%;
  }
}

/* ---------- Data table (listing pages) ---------- */
.table-wrap {
  overflow-x: auto;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th,
.data-table td {
  padding: 9px 10px;
  text-align: left;
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
.data-table th {
  font-weight: 700;
  color: var(--c-muted);
  font-size: 12px;
}
/* long values (service name, link) may wrap — everything else stays on one line.
   min-width 220: at 140 a service name or link wrapped onto four cramped lines.
   .table-wrap scrolls, so a wider table is fine. */
.data-table .cell-wrap {
  white-space: normal;
  word-break: break-word;
  min-width: 220px;
  max-width: 300px;
}
.data-table tbody tr:hover {
  background: var(--c-active);
}
.data-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ---------- Status tabs (orders / tickets / …) ---------- */
/* Equal-width tabs that reflow on their own: as many per line as the screen
   fits, down to 2 on a phone. A grid (not flex) is what makes every tab the same
   width — flex sized each one to its own label. 140px min is the widest a tab
   gets: "Processing"/"Inprogress" beside a 4-digit count. */
.status-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px;
  margin-bottom: 13px;
}
/* Tabs usually open a page, so they only need the gap below. Child panel is the
   one page where they follow a card — without this they weld to it, the same way
   two cards do without `.card + .card`. */
.card + .status-tabs {
  margin-top: 13px;
}
.status-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  height: 34px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  font-size: 13px;
  color: var(--c-text);
  text-decoration: none;
  white-space: nowrap;
}
.status-tab:hover {
  background: var(--c-active);
}
.status-tab.is-active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-on-primary);
}
.status-tab-count {
  padding: 1px 6px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  background: var(--c-active);
  color: var(--c-muted);
}
.status-tab.is-active .status-tab-count {
  background: rgba(255, 255, 255, 0.25);
  color: var(--c-on-primary);
}
/* ---------- Copy button beside a value (order id, …) ---------- */
.copy-id {
  padding: 2px 4px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--c-muted);
  line-height: 1;
}
.copy-id:hover {
  color: var(--c-primary);
}
.copy-id.is-copied {
  color: var(--c-success);
}

/* ---------- Filter bar (listing pages) ---------- */
.filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  align-items: end;
  margin-bottom: 13px;
}
.filter-bar .form-group {
  margin-bottom: 0;
}
.filter-actions {
  display: flex;
  gap: 8px;
}
/* gap, not a margin on the icon: .btn is inline-block by default, so the icon and
   its label only touch once this rule flexes them */
.filter-actions .btn {
  height: 38px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-clear {
  background: var(--c-input);
  border: 1px solid var(--c-border);
  color: var(--c-muted);
}
.btn-clear:hover {
  background: var(--c-active);
  color: var(--c-text);
}
/* Phones: one field per row. auto-fit otherwise squeezes two 150px columns onto a
   ~350px screen, so Category and Search sat cramped side by side. Tablets and up
   keep the single-row layout. */
@media (max-width: 600px) {
  .filter-bar {
    grid-template-columns: 1fr;
  }
}

/* ---------- Advanced filter form (orders, balance logs) ----------
   One field always out, the rest behind More. .filter-form also carries
   .filter-bar for the shared field look, so it must undo that class's grid —
   here the top field, the advanced panel and the buttons stack, and the button
   row is last in the markup so opening the panel pushes it down.
   Behaviour (More toggle + dropping empty fields from the url) is in core.js. */
.filter-form {
  display: block;
}
.filter-advanced {
  display: none;
  margin-top: 10px;
}
.filter-form.is-open .filter-advanced {
  display: block;
}
/* scoped: plain .filter-bar forms put .filter-actions in a grid row beside the
   input, where a top margin would be wrong */
.filter-form .filter-actions {
  margin-top: 12px;
}
/* wider min than .filter-bar: these fields hold dates and two-up number pairs */
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.field-pair {
  display: flex;
  gap: 6px;
}
.field-pair .form-input {
  min-width: 0;
}
/* A min/max cell holds two inputs, so give it two columns — each input then
   matches every single-input field instead of being half as wide (admin gets
   this for free by giving From and To a cell each). Guarded by the query
   because below it the grid is one column, and spanning 2 there would force an
   implicit second column and push the bar off-screen. */
@media (min-width: 601px) {
  .filter-pair {
    grid-column: span 2;
  }
}
@media (max-width: 600px) {
  .filter-form .filter-actions .btn {
    flex: 1;
  }
}

/* ---------- Pager ---------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 13px;
}
.pager-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  font-size: 12px;
  color: var(--c-muted);
  background: var(--c-input);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
}
.pager-link:hover {
  background: var(--c-active);
  color: var(--c-text);
}
.pager-info {
  font-size: 12px;
  color: var(--c-muted);
  padding: 0 6px;
}

/* ---------- Stat cards ----------
   Equal-width, as many per line as the screen allows. Values come from stat():
   <div class="stat-card"><div class="stat-value">{{ stat('balance') }}</div>… */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
  margin-bottom: 13px;
}
/* stat cards under a card need the gap above too — they keep their own gap below
   because something (another card) usually follows them */
.card + .stat-cards {
  margin-top: 13px;
}
.stat-card {
  padding: 10px 12px;
  text-align: center;
  overflow: hidden;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
}
.stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-label {
  font-size: 11px;
  color: var(--c-muted);
  margin-top: 2px;
}
@media (max-width: 900px) {
  .stat-card {
    padding: 8px 10px;
  }
  .stat-value {
    font-size: 15px;
  }
}

/* ---------- Card heading ---------- */
/* Left by default — that is what a content page wants (account, affiliate, api…).
   The auth cards (forgot password / activation / two-step) are the exception and
   centre themselves with .card-centered. */
.card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 6px;
}
.card-text {
  color: var(--c-muted);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 18px;
}
.card-text:last-of-type {
  margin-bottom: 0;
}
.card-centered .card-title,
.card-centered .card-text {
  text-align: center;
}

/* ---------- Content page (terms / cookies / contact) ---------- */
.page-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 18px;
}
.content-body {
  color: var(--c-text);
  line-height: 1.7;
}
.content-body h1,
.content-body h2,
.content-body h3,
.content-body h4 {
  margin: 18px 0 8px;
  color: var(--c-text);
}
.content-body p {
  margin-bottom: 12px;
}
.content-body a {
  color: var(--c-primary);
}

/* ---------- FAQ ----------
   One card per question: the question is the card header (click it to open), the
   answer is the body. Closed, the card is just the header — .card-header carries
   `margin:-18px -20px 16px`, so its bottom margin and the card's bottom padding
   both have to go or a shut card keeps a gap under the bar. */
.faq-item .card-header {
  cursor: pointer;
  user-select: none;
}
.faq-item:not(.is-open) .card-header {
  margin-bottom: -18px;
  border-bottom: 0;
}
.faq-arrow {
  color: var(--c-muted);
  transition: transform 0.2s;
}
.faq-item.is-open .faq-arrow {
  transform: rotate(180deg);
}

.faq-answer {
  display: none;
  color: var(--c-muted);
  line-height: 1.6;
}
.faq-item.is-open .faq-answer {
  display: block;
}
.faq-answer > *:first-child {
  margin-top: 0;
}
.faq-answer > *:last-child {
  margin-bottom: 0;
}
.faq-answer p {
  margin: 0 0 10px;
}
.faq-answer ul,
.faq-answer ol {
  margin: 0 0 10px;
  padding-left: 20px;
}
.faq-answer a {
  color: var(--c-primary);
}

/* ---------- Notice (page being updated) ---------- */
.notice {
  max-width: 520px;
  margin: 40px auto;
}
.notice .card {
  text-align: center;
  padding: 40px 26px;
}
.notice-icon {
  font-size: 40px;
  color: var(--c-muted);
  margin-bottom: 14px;
}
.notice-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 8px;
}
.notice-text {
  color: var(--c-muted);
  margin-bottom: 14px;
}
.notice-hint {
  font-size: 12px;
  color: var(--c-muted);
  margin-bottom: 22px;
}
.notice-hint code {
  background: var(--c-active);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  color: var(--c-text);
  word-break: break-all;
}
@media (max-width: 900px) {
  .notice-title {
    font-size: 17px;
  }
}

/* ---------- Spin & Win wheel (design — sirf wheel ki shakl) ---------- */
.spin-card {
  text-align: center;
}

.spin-wheel-wrap {
  position: relative;
  width: 288px;
  height: 288px;
  margin: 8px auto 0;
}

.spin-wheel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--c-wheel-line);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* spoke: starts at the centre, reaches the rim; rotate() is set per segment */
.spin-segment {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 0;
  transform-origin: 0 0;
}
/* the label rides at the outer end of its spoke and reads outwards */
.spin-segment-label {
  position: absolute;
  right: 14px;
  top: -7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-wheel-line);
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55); /* light halo so black reads on any colour */
}

/* pointer sits at the top of the wheel, aiming down into it */
.spin-pointer {
  position: absolute;
  z-index: 3;
  top: -12px;
  left: 50%;
  margin-left: -9px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 20px solid var(--c-primary);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}

.spin-hub {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-card);
  border: 2px solid var(--c-wheel-line);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.spin-actions {
  margin-top: 18px;
}
.spin-actions .btn {
  height: 38px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.spin-hint {
  margin-top: 6px;
  font-size: 11px;
  color: var(--c-muted);
}

@media (max-width: 900px) {
  .spin-wheel-wrap {
    width: 250px;
    height: 250px;
  }
  .spin-hub {
    width: 56px;
    height: 56px;
    font-size: 16px;
  }
  .spin-segment-label {
    font-size: 10px;
    right: 11px;
  }
  .spin-actions .btn {
    height: 34px;
  }
}

/* ===== Integrations — floating contact buttons (WhatsApp / Telegram) ===== */
.chat-float{position:fixed;z-index:9998;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:27px;box-shadow:0 4px 14px rgba(0,0,0,.18);text-decoration:none;transition:transform .2s ease}
.chat-float:hover{transform:scale(1.08);color:#fff}
.chat-float-left{left:20px}
.chat-float-right{right:20px}
.whatsapp-float{background:#25D366;bottom:20px}
.telegram-float{background:#229ED9;bottom:88px}
@media (max-width:576px){.chat-float{width:48px;height:48px;font-size:24px}}