/* ============================================================
   SERVICE TABLE
   ============================================================ */
@media (max-width: 480px) {
  .stats-row > div { font-size: 11px; }
  .stats-row div div:last-child { font-size: 13px; }
}
.service-col {
  min-width: 420px; font-size: 13px; line-height: 1.6;
  vertical-align: middle !important; word-break: break-word;
  color: #444; font-weight: 500;
}
.service-id        { color: #5b7cff; font-weight: 700; }
.service-separator { color: #999; margin: 0 4px; }
.service-title     { color: #555; font-weight: 600; }

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --pk:            #e8275d;
  --pk-lt:         #ff5f8f;
  --pk-dark:       #c41e50;
  --pk-soft:       #fef2f6;
  --pk-bdr:        #f8c4d6;
  --pk-grad:       linear-gradient(135deg,#e8275d 0%,#ff5f8f 100%);
  --pk-sh:         0 4px 20px rgba(232,39,93,.14);
  --pk-sh2:        0 8px 32px rgba(232,39,93,.24);
  --c-bg:          #f6f7fa;
  --c-surface:     #ffffff;
  --c-surface2:    #f2f4f8;
  --c-text:        #0d0d14;
  --c-muted:       #6b7280;
  --c-subtle:      #9ca3af;
  --c-border:      #e5e7ef;
  --c-border2:     #d1d5e0;
  --nav-h:         62px;
  --sidebar-w:     272px;
  --sidebar-w-collapsed: 78px;
  --r-sm:          8px;
  --r-md:          12px;
  --r-lg:          16px;
  --r-pill:        999px;
  --sh-card:       0 1px 4px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.04);
  --sh-pink:       0 4px 18px rgba(232,39,93,.16);
  --sh-pink2:      0 8px 32px rgba(232,39,93,.22);

  /* backward-compat aliases */
  --c-pink:        var(--pk);
  --c-pink-lt:     var(--pk-lt);
  --c-pink-soft:   var(--pk-soft);
  --c-pink-border: var(--pk-bdr);
  --c-pink-grad:   var(--pk-grad);
  --cr:            16px;
  --ir:            12px;

  /* legacy names used throughout page-specific blocks below */
  --pink-primary:  var(--pk);
  --pink-light:    var(--pk-lt);
  --pink-dark:     var(--pk-dark);
  --pink-soft:     var(--pk-soft);
  --pink-border:   var(--pk-bdr);
  --pink-gradient: var(--pk-grad);
  --card-radius:   var(--r-lg);
  --input-radius:  var(--r-md);
}

[data-theme="dark"] {
  --c-bg:          #0f0f12;
  --c-surface:     #18181c;
  --c-surface2:    #222228;
  --c-text:        #f0f0f8;
  --c-muted:       #9090a0;
  --c-subtle:      #55556a;
  --c-border:      #2a2a34;
  --c-border2:     #333340;
  --pk-soft:       rgba(232,39,93,.12);
  --pk-bdr:        rgba(232,39,93,.26);
  --c-pink-soft:   rgba(232,39,93,.12);
  --c-pink-border: rgba(232,39,93,.26);
  --pink-soft:     rgba(232,39,93,.12);
  --pink-border:   rgba(232,39,93,.26);
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
body {
  background: var(--c-bg);
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color: var(--c-text);
  margin: 0; padding: 0;
  -webkit-font-smoothing: antialiased;
  transition: background .25s, color .25s;
  overflow-x: hidden; max-width: 100%;
}
a       { color: var(--pk); text-decoration: none; }
a:hover,
a:focus { color: var(--pk-lt); }

/* ============================================================
   OVERFLOW SAFETY NET
   Flex children default to min-width:auto, which can force them
   (and their parents, and the whole page) wider than the viewport
   when their text content is long. This resets that default across
   the areas that were reported as breaking on mobile.
   ============================================================ */
.no-card, .no-layout-grid, .no-main-col, .no-sidebar,
.no-hero-card, .no-form-card, .no-bestsellers-card, .no-announce-card,
.no-announce, .no-tg-bar, .no-search-row, .no-stats, .no-filter-box,
.topbar-inner, .topbar-left, .topbar-right,
.sb-panel, .sb-head, .sb-user, .sb-balance-row, .sb-foot,
.mob-nav, .container, .container-fluid {
  max-width: 100%;
}
.no-card *, .no-layout-grid > *, .no-hero-top > *, .no-form-head > *,
.no-announce > *, .no-tg-bar > *, .topbar-inner > *, .topbar-left > *,
.topbar-right > *, .sb-head > *, .sb-user > *, .sb-balance-row > *,
.no-bestseller-item > *, .no-filter-toggle > * {
  min-width: 0;
}

/* ============================================================
   SKIP LINK (accessibility)
   ============================================================ */
.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 10000;
  background: var(--pk);
  color: #fff !important;
  padding: 10px 18px;
  border-radius: var(--ir);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(232,39,93,.3);
  transition: top .2s ease;
}
.skip-link:focus {
  top: 12px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}
#main-content:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   NEW ORDER PAGE — TWO COLUMN LAYOUT + BEST SELLERS SIDEBAR
   ============================================================ */
.no-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 18px;
  align-items: start;
  max-width: 100%;
}
.no-main-col { min-width: 0; max-width: 100%; }
.no-sidebar { position: sticky; top: 20px; max-width: 100%; }
.no-bestsellers-card { padding: 16px; }
.no-bestsellers-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--pk);
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 12px;
}
.no-bestsellers-title i { font-size: 14px; }
.no-bestsellers-list { display: flex; flex-direction: column; gap: 6px; }
.no-bestseller-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  background: var(--c-surface); border: 1.5px solid var(--pk-bdr);
  border-radius: var(--ir); padding: 10px 12px;
  cursor: pointer; font-family: inherit;
  transition: border-color .15s, background .15s, transform .15s;
  will-change: transform;
}
.no-bestseller-item:hover {
  border-color: var(--pk); background: var(--pk-soft); transform: translateX(2px);
}
.no-bestseller-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  background: var(--pk-soft); border: 1px solid var(--pk-bdr);
  display: flex; align-items: center; justify-content: center;
  color: var(--pk); font-size: 14px;
}
.no-bestseller-label {
  flex: 1; font-size: 13px; font-weight: 600; color: var(--c-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.no-bestseller-arrow { font-size: 11px; color: var(--c-subtle); flex-shrink: 0; }
.no-bestseller-item:hover .no-bestseller-arrow { color: var(--pk); }
.no-bestseller-item.is-flash { animation: bestsellerFlash .6s ease; }
@keyframes bestsellerFlash {
  0%, 100% { box-shadow: none; }
  35%      { box-shadow: 0 0 0 3px rgba(232,39,93,.18); }
}

@media (max-width: 900px) {
  .no-layout-grid { grid-template-columns: 1fr; }
  .no-sidebar { position: static; }
  .no-bestsellers-list {
    flex-direction: row; overflow-x: auto; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .no-bestsellers-list::-webkit-scrollbar { display: none; }
  .no-bestseller-item { flex: 0 0 auto; min-width: 168px; }
}


/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--pk-bdr); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--pk); }

/* ============================================================
   CARD BASE
   ============================================================ */
.no-card {
  background: var(--c-surface);
  border: 1px solid var(--pk-bdr);
  border-radius: var(--cr);
  box-shadow: 0 2px 14px rgba(232,39,93,.07);
  contain: layout;
  margin-bottom: 14px;
  transition: background .25s, border-color .25s;
}

/* ============================================================
   ANNOUNCEMENT BAR (inner pages)
   ============================================================ */
.no-announce {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(117deg, rgb(254 242 246), #ffffff);
  border: 1px solid var(--pk-bdr); border-left: 4px solid var(--pk);
  border-radius: var(--cr);
  box-shadow: var(--pk-sh);
  margin-bottom: 12px;
  font-size: 13.5px; font-weight: 700; color: var(--pk); line-height: 1.5;
}
.no-announce span { min-width: 0; flex: 1 1 auto; }
.no-announce-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
  background: var(--pk-soft); border: 1px solid var(--pk-bdr);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: var(--pk);
}

/* ============================================================
   TELEGRAM / CONTACT BAR
   ============================================================ */
.no-tg-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: var(--pk-soft); border: 1px solid var(--pk-bdr);
  border-radius: var(--ir); margin-bottom: 14px;
  font-size: 13px; font-weight: 600; color: var(--c-muted);
  flex-wrap: wrap; transition: background .25s;
}
.no-tg-bar i { color: #29a8e8; font-size: 17px; }
.no-tg-bar span { min-width: 0; }

.no-tg-btn {
  margin-left: auto;
  background: var(--pk-grad); color: #fff !important;
  padding: 5px 14px; border-radius: 8px;
  font-size: 12.5px; font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(232,39,93,.28);
  transition: transform .15s, box-shadow .15s;
  display: inline-flex; align-items: center; gap: 5px;
  will-change: transform;
}
.no-tg-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(232,39,93,.38); }

/* ============================================================
   STATS ROW (new order page / dashboard)
   ============================================================ */
.no-stats { display: flex; align-items: stretch; padding: 14px 16px; }
.no-stat {
  flex: 1; text-align: center; padding: 6px 8px;
  border-right: 1px solid var(--pk-bdr); min-width: 0;
}
.no-stat:last-child { border-right: none; }
.no-stat-icon {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--pk-soft); border: 1px solid var(--pk-bdr);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 5px; color: var(--pk); font-size: 15px;
}
.no-stat-label {
  font-size: 10px; color: var(--c-subtle);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px;
}
.no-stat-val {
  font-size: 14px; font-weight: 700; color: var(--pk);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================
   PLACE YOUR ORDER — HERO CARD (header + stats combined)
   ============================================================ */
.no-hero-card { padding: 0; overflow: hidden; }
.no-hero-top {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 18px 16px;
  background: linear-gradient(120deg, var(--pk-soft), rgba(255,95,143,.06));
  border-bottom: 1px solid var(--pk-bdr);
}
.no-hero-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--pk-grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; box-shadow: var(--pk-sh);
}
.no-hero-text   { min-width: 0; }
.no-hero-title  { font-size: 17px; font-weight: 800; color: var(--c-text); letter-spacing: -.2px; }
.no-hero-sub    { font-size: 12.5px; font-weight: 500; color: var(--c-muted); margin-top: 2px; line-height: 1.4; }
.no-hero-stats  { padding: 12px 16px; }

@media (max-width: 480px) {
  .no-hero-top   { padding: 14px 14px 12px; gap: 11px; }
  .no-hero-icon  { width: 38px; height: 38px; font-size: 16px; border-radius: 10px; }
  .no-hero-title { font-size: 15px; }
  .no-hero-sub   { font-size: 11.5px; }
}

/* ============================================================
   PLATFORM FILTER  (new order page)
   ============================================================ */
.no-search-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.no-search-input {
  width: 100%;
}
.no-search-input .input-wrapper { position: relative; width: 100%; }
.no-search-input .input-wrapper input.form-control {
  width: 100% !important;
  height: 48px !important; border-radius: var(--ir) !important;
  border: 1.5px solid var(--pk-bdr) !important;
  background: var(--c-surface) !important; color: var(--c-text) !important;
  font-size: 14px !important; padding: 10px 14px 10px 40px !important;
  box-shadow: none !important;
  transition: border-color .18s, box-shadow .18s, background .2s;
}
.no-search-input .input-wrapper input.form-control:focus {
  border-color: var(--pk) !important;
  box-shadow: 0 0 0 3px rgba(232,39,93,.09) !important; outline: none !important;
}
.no-search-icon-btn {
  position: absolute; top: 50%; left: 12px; transform: translateY(-50%);
  background: none; border: none; color: var(--pk); padding: 0 2px;
  display: flex; align-items: center; pointer-events: none; z-index: 2;
}
[dir="rtl"] .no-search-icon-btn,
.no-search-input[data-dir="rtl"] .no-search-icon-btn { left: auto; right: 12px; }
.no-filter-toggle-row {
  width: 100%; margin-bottom: 0;
}

.no-filter-toggle {
  width: 100%; height: 48px; border-radius: var(--ir);
  border: 1.5px solid var(--pk-bdr); background: var(--c-surface);
  color: var(--pk); font-size: 13.5px; font-weight: 700; letter-spacing: .3px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 8px; transition: background .18s, border-color .18s, box-shadow .18s;
  margin-bottom: 12px; will-change: transform; font-family: inherit;
}
.no-filter-toggle:hover {
  background: var(--pk-soft); border-color: var(--pk); box-shadow: var(--pk-sh);
}
.no-filter-box { display: flex; flex-wrap: wrap; gap: 9px; padding: 14px 16px; }
.no-platform-item {
  width: 50px; height: 50px; border-radius: 14px;
  border: 1px solid var(--pk-bdr);
  display: flex; align-items: center; justify-content: center;
  background: var(--c-surface); cursor: pointer;
  font-size: 21px; color: var(--c-subtle);
  transition: border-color .18s, color .18s, background .18s, transform .18s, box-shadow .18s;
  will-change: transform; position: relative;
}
.no-platform-item:hover {
  border-color: var(--pk); color: var(--pk);
  background: var(--pk-soft); transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(232,39,93,.15);
}
.no-platform-item.active {
  background: var(--pk-soft); border-color: var(--pk); color: var(--pk);
  box-shadow: 0 4px 12px rgba(232,39,93,.18);
}

@media (max-width: 575px) {
  .no-filter-toggle-row { padding: 0 12px; }
}

/* ============================================================
   FORM CARD HEADER  (Create an order)
   ============================================================ */
.no-form-head { display: flex; align-items: center; margin-bottom: 16px; }
.no-form-head-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 800; color: var(--c-text); letter-spacing: -.2px;
}
.no-form-head-title i {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--pk-soft); border: 1px solid var(--pk-bdr);
  display: flex; align-items: center; justify-content: center;
  color: var(--pk); font-size: 13px; flex-shrink: 0;
}

/* ============================================================
   SIDEBAR — TELEGRAM ANNOUNCEMENTS CARD
   ============================================================ */
.no-announce-card { padding: 16px; }
.no-announce-card-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--pk);
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 8px;
}
.no-announce-card-text {
  font-size: 12.5px; color: var(--c-muted); line-height: 1.6; margin-bottom: 12px;
}
.no-announce-card-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; height: 42px; border-radius: var(--ir);
  background: linear-gradient(135deg,#29a8e8 0%,#1d86bf 100%);
  color: #fff !important; font-size: 13px; font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(41,168,232,.28);
  transition: transform .15s, box-shadow .15s;
}
.no-announce-card-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(41,168,232,.38); }

/* ============================================================
   FORM CARD  (new order, mass order, drip feed…)
   ============================================================ */
.no-form-card { padding: 20px; }
.no-form-card .control-label {
  font-size: 11.5px !important; font-weight: 700 !important;
  color: var(--c-muted) !important; text-transform: uppercase !important;
  letter-spacing: .5px !important; margin-bottom: 6px !important; display: block;
}
.no-form-card .form-control {
  border-radius: var(--ir) !important;
  border: 1.5px solid var(--pk-bdr) !important;
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  height: 48px !important; font-size: 14px !important; padding: 10px 14px !important;
  box-shadow: none !important;
  transition: border-color .18s, box-shadow .18s, background .2s;
}
.no-form-card .form-control:focus {
  border-color: var(--pk) !important;
  box-shadow: 0 0 0 3px rgba(232,39,93,.09) !important;
  outline: none !important; background: var(--c-surface) !important;
}
.no-form-card .form-control:hover:not(:focus) {
  border-color: var(--pk) !important;
}
.no-form-card .form-control::placeholder { color: var(--c-subtle); }
.no-form-card .search-dropdown .input-wrapper input { padding-left: 38px !important; }

.no-desc-box {
  background: var(--pk-soft); border: 1.5px solid var(--pk-bdr);
  border-radius: var(--ir); padding: 13px 15px;
  font-size: 13.5px; color: var(--c-muted); line-height: 1.7;
}

.no-form-card #charge {
  background: var(--pk-soft) !important; color: var(--pk) !important;
  font-weight: 700 !important; font-size: 16px !important;
  border-color: var(--pk-bdr) !important;
}

/* ============================================================
   SUBMIT BUTTON
   ============================================================ */
.no-submit-btn {
  width: 100%; height: 52px;
  background: var(--pk-grad); border: none; border-radius: var(--ir);
  color: #fff; font-size: 15.5px; font-weight: 700; letter-spacing: .4px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(232,39,93,.32);
  transition: transform .15s, box-shadow .15s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  will-change: transform; font-family: inherit;
}
.no-submit-btn:hover  { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(232,39,93,.42); }
.no-submit-btn:active { transform: translateY(0); }
.no-submit-btn:disabled {
  opacity: .75; cursor: not-allowed;
  transform: none !important; box-shadow: 0 6px 20px rgba(232,39,93,.22) !important;
}

/* ============================================================
   ALERTS
   ============================================================ */
.alert-danger {
  border-radius: var(--ir) !important;
  border-left: 4px solid #e53e3e !important;
  background: #fff5f5 !important; color: #c53030 !important;
}
.alert-success {
  border-radius: var(--ir) !important;
  border-left: 4px solid #38a169 !important;
  background: #f0fff4 !important; color: #276749 !important;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.alert { animation: slideDown .3s ease; }

/* ============================================================
   TERMS CHECKBOX
   ============================================================ */
.no-terms label {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: var(--c-muted); cursor: pointer;
}
.no-terms input[type="checkbox"] {
  accent-color: var(--pk); width: 15px; height: 15px;
  margin-top: 2px; flex-shrink: 0;
}
.no-terms a { color: var(--pk) !important; text-decoration: underline; }

/* ============================================================
   SELECT2 OVERRIDES
   ============================================================ */
.select2-container--default .select2-selection--single {
  border-radius: var(--ir) !important;
  border: 1.5px solid var(--pk-bdr) !important;
  height: 48px !important;
  display: flex !important; align-items: center !important;
  background: var(--c-surface) !important;
  max-width: 100% !important;
}
.select2-container { max-width: 100% !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 48px !important; color: var(--c-text) !important; padding-left: 14px !important;
  flex: 1 1 auto !important; min-width: 0 !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  display: block !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 46px !important; flex-shrink: 0 !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open  .select2-selection--single {
  border-color: var(--pk) !important;
  box-shadow: 0 0 0 3px rgba(232,39,93,.09) !important;
}
.select2-dropdown {
  border: 1.5px solid var(--pk-bdr) !important;
  border-radius: var(--ir) !important;
  box-shadow: 0 8px 24px rgba(232,39,93,.12) !important;
  background: var(--c-surface) !important;
}
.select2-results__option { color: var(--c-text) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--pk) !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--pk-soft) !important; color: var(--pk) !important;
}
.select2-search--dropdown .select2-search__field {
  border: 1.5px solid var(--pk-bdr) !important; border-radius: var(--r-sm) !important;
  background: var(--c-surface) !important; color: var(--c-text) !important;
}

/* ============================================================
   QUANTITY HINT  (new order page)
   ============================================================ */
.qty-hint { font-size: 11px; font-weight: 600; margin-top: 5px; display: none; }
.qty-hint.visible { display: block; color: var(--c-subtle); }
.qty-hint.error   { display: block; color: #e53e3e; }
.qty-hint.ok      { display: block; color: #38a169; }
.qty-invalid { border-color: #e53e3e !important; box-shadow: 0 0 0 3px rgba(229,62,62,.10) !important; }

/* ============================================================
   CHARGE FIELD ANIMATION
   ============================================================ */
@keyframes chargeFlash {
  0%   { background: var(--pk-soft) !important; border-color: var(--pk-bdr) !important; box-shadow: none !important; }
  35%  { background: rgba(232,39,93,.22) !important; border-color: var(--pk) !important; box-shadow: 0 0 0 3px rgba(232,39,93,.14) !important; }
  100% { background: var(--pk-soft) !important; border-color: var(--pk-bdr) !important; box-shadow: none !important; }
}
.charge-flash { animation: chargeFlash .55s ease !important; }

/* ============================================================
   SUBMIT PULSE  (fires once on load)
   ============================================================ */
@keyframes btnPulse {
  0%,100% { box-shadow: 0 6px 20px rgba(232,39,93,.32); }
  50%     { box-shadow: 0 6px 20px rgba(232,39,93,.32), 0 0 0 10px rgba(232,39,93,.10); }
}
.no-submit-btn.pulse { animation: btnPulse 1s ease 2; }

/* ============================================================
   PLATFORM BADGE
   ============================================================ */
.plt-badge {
  position: absolute; top: -6px; right: -6px;
  background: var(--pk); color: #fff;
  font-size: 9px; font-weight: 800;
  min-width: 17px; height: 17px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; pointer-events: none;
  box-shadow: 0 2px 6px rgba(232,39,93,.35);
}

/* ============================================================
   COPY BUTTON  (orders page)
   ============================================================ */
.copy-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(39,103,73,.10); border: 1px solid rgba(39,103,73,.22);
  border-radius: 6px; padding: 2px 9px;
  font-size: 11.5px; font-weight: 700; color: #276749;
  cursor: pointer; transition: background .15s, transform .12s;
  margin-left: 6px; vertical-align: middle; font-family: inherit;
}
.copy-btn:hover  { background: rgba(39,103,73,.20); transform: translateY(-1px); }
.copy-btn:active { transform: translateY(0); }

/* ============================================================
   FILTER TOGGLE CHEVRON
   ============================================================ */
.filter-chevron { display: inline-block; font-size: 11px; margin-left: 2px; transition: transform .25s ease; }
.filter-chevron.open { transform: rotate(180deg); }

/* ============================================================
   TG PULSE
   ============================================================ */
@keyframes tgPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(46,204,113,.25); }
  50%     { box-shadow: 0 0 0 6px rgba(46,204,113,.08); }
}

/* ============================================================
   ANNOUNCE BANNER  (layout top bar)
   ============================================================ */
.announce-bar {
  background: var(--pk-grad); color: #fff;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 9px 48px;
  text-align: center; position: relative; line-height: 1.4;
  transition: opacity .25s, max-height .3s;
}
.announce-bar a { color: #fff; text-decoration: underline; }
.announce-close {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: rgba(255,255,255,.8);
  font-size: 18px; cursor: pointer; padding: 0; line-height: 1; transition: color .15s;
}
.announce-close:hover { color: #fff; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar.navbar-default {
  background:    var(--c-surface) !important;
  background:    rgba(255,255,255,.85) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border:        none !important;
  border-bottom: 1px solid var(--c-border) !important;
  box-shadow:    0 1px 14px rgba(0,0,0,.045) !important;
  min-height:    var(--nav-h) !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  z-index:       100;
  transition:    background .25s, border-color .25s, box-shadow .25s;
}
[data-theme="dark"] .navbar.navbar-default { background: rgba(24,24,28,.85) !important; }
.navbar + .container,  .navbar ~ .container,
.navbar + .container-fluid, .navbar ~ .container-fluid,
.navbar ~ main .container:first-child, .navbar ~ main .container-fluid:first-child { margin-top: 28px; }

.navbar-brand {
  height:          var(--nav-h) !important;
  padding:         0 20px !important;
  display:         flex !important; align-items: center !important;
  gap:             9px;
  font-weight:     800 !important; font-size: 18px !important; letter-spacing: -.4px;
  color:           var(--c-text) !important; text-decoration: none !important;
  transition:      color .15s;
}
.navbar-brand:hover, .navbar-brand:focus { color: var(--pk) !important; }
.navbar-brand img { max-height: 34px; width: auto; display: block; }
.navbar-brand em  { color: var(--pk); font-style: normal; }

.navbar-default .navbar-nav > li > a {
  height:        var(--nav-h) !important;
  display:       flex !important; align-items: center !important;
  padding:       0 14px !important;
  font-size:     13.5px !important; font-weight: 600 !important;
  color:         var(--c-muted) !important;
  border-bottom: 2.5px solid transparent;
  transition:    color .15s, border-color .15s;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background: transparent !important; color: var(--pk) !important;
}
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active > a:hover,
.navbar-default .navbar-nav > li.active > a:focus {
  background: transparent !important; color: var(--pk) !important;
  border-bottom-color: var(--pk); font-weight: 700 !important;
}
.navbar-icon { margin-right: 5px; color: var(--pk); }

.navbar-default .navbar-nav > li > a .badge {
  background:    var(--pk-grad) !important; color: #fff !important;
  font-size:     11.5px !important; font-weight: 700 !important;
  padding:       3px 10px !important; border-radius: var(--r-pill) !important;
  box-shadow:    0 2px 8px rgba(232,39,93,.28) !important; letter-spacing: .2px;
}

.navbar-default .dropdown-menu {
  background:    var(--c-surface) !important;
  border:        1px solid var(--c-border) !important;
  border-radius: var(--r-md) !important;
  box-shadow:    0 8px 24px rgba(0,0,0,.1) !important;
  padding:       5px !important; margin-top: 6px !important;
}
.navbar-default .dropdown-menu > li > a {
  border-radius: var(--r-sm) !important; padding: 9px 13px !important;
  font-size:     13px !important; font-weight: 500 !important;
  color:         var(--c-text) !important; transition: background .1s;
}
.navbar-default .dropdown-menu > li > a:hover,
.navbar-default .dropdown-menu > li > a:focus {
  background: var(--pk-soft) !important; color: var(--pk) !important;
}
.navbar-default .dropdown-menu > li.active > a,
.navbar-default .dropdown-menu > li.active > a:hover {
  background: var(--pk) !important; color: #fff !important;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  background: var(--pk-soft) !important; color: var(--pk) !important;
}
.dropdown-max-height { max-height: 300px; overflow-y: auto; }

.navbar-dark-btn {
  height: var(--nav-h); padding: 0 12px;
  display: flex; align-items: center;
  background: none; border: none; color: var(--c-muted);
  font-size: 17px; cursor: pointer; transition: color .15s;
}
.navbar-dark-btn:hover { color: var(--pk); }

.navbar-default .navbar-toggle {
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r-sm) !important;
  margin: 14px 15px !important; padding: 7px 9px !important;
  background: transparent !important; transition: background .15s;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background: var(--pk-soft) !important; }
.navbar-default .navbar-toggle .icon-bar { background: var(--pk) !important; border-radius: 2px; height: 2px; }

@media (max-width: 767px) {
  #navbar.navbar-collapse { display: none !important; }
  .navbar-default .navbar-toggle { display: block !important; }
}

/* ============================================================
   TOPBAR v2 — compact authenticated header
   (menu button + brand + page title | balance pill + avatar)
   ============================================================ */
.topbar-v2 { padding: 0 !important; }
.topbar-v2 .container-fluid { padding: 0 16px; }
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h); gap: 10px;
}
.topbar-left  { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.topbar-menu-btn {
  width: 38px; height: 38px; flex-shrink: 0; border: none; cursor: pointer;
  border-radius: var(--r-md);
  background: var(--pk-grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; box-shadow: 0 2px 10px rgba(232,39,93,.3);
  transition: transform .15s, box-shadow .15s;
}
.topbar-menu-btn:hover   { box-shadow: 0 4px 14px rgba(232,39,93,.4); }
.topbar-menu-btn:active  { transform: scale(.94); }

.topbar-brand {
  display: flex; align-items: center; flex-shrink: 0;
  font-weight: 800; font-size: 16px; letter-spacing: -.3px;
  color: var(--c-text) !important; text-decoration: none !important;
}
.topbar-brand img { max-height: 26px; width: auto; display: block; }
.topbar-brand em  { color: var(--pk); font-style: normal; }

.topbar-divider { width: 1px; height: 20px; background: var(--c-border); flex-shrink: 0; }

.topbar-title {
  flex: 1 1 auto; min-width: 0;
  font-size: 15px; font-weight: 650; color: var(--c-text);
  letter-spacing: -.1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.topbar-right .navbar-dark-btn {
  width: 38px; height: 38px; padding: 0; flex-shrink: 0;
  border-radius: 50%; background: var(--c-surface2);
  border: 1px solid var(--c-border); color: var(--c-muted);
  justify-content: center; font-size: 15px;
  transition: background .15s, border-color .15s, color .15s;
}
.topbar-right .navbar-dark-btn:hover {
  background: var(--pk-soft); border-color: var(--pk-bdr); color: var(--pk);
}

.topbar-balance-pill {
  display: inline-flex; align-items: center;
  background: var(--pk-soft); border: 1px solid var(--pk-bdr);
  border-radius: var(--r-pill); padding: 7px 14px;
  font-size: 13px; font-weight: 800; color: var(--pk) !important;
  text-decoration: none !important; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.topbar-balance-pill:hover { background: var(--pk); color: #fff !important; }

.topbar-avatar { display: flex; align-items: center; position: relative; }
.topbar-avatar-circle {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--pk-grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
  box-shadow: 0 2px 8px rgba(232,39,93,.3);
}
.topbar-avatar-dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #2ecc71; border: 2px solid var(--c-surface);
}

@media (max-width: 575px) {
  .topbar-v2 .container-fluid { padding: 0 10px; }
  .topbar-inner   { gap: 8px; }
  .topbar-brand   { display: none; }
  .topbar-divider { display: none; }
  .topbar-title   { font-size: 13.5px; }
  .topbar-balance-pill { padding: 6px 11px; font-size: 12px; }
  .topbar-menu-btn, .topbar-avatar-circle, .topbar-right .navbar-dark-btn { width: 34px; height: 34px; }
}

/* ============================================================
   GUEST NAVBAR — floating pill header (signin, signup, marketing pages)
   ============================================================ */
.site-nav-wrap { position: relative; z-index: 1030; padding: 18px 24px 0; }
.site-nav {
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; gap: 18px;
  background: var(--c-surface); border-radius: var(--r-pill);
  padding: 10px 10px 10px 18px;
  box-shadow: 0 10px 30px rgba(232,39,93,.12), 0 2px 8px rgba(0,0,0,.04);
  border: 1px solid rgba(232,39,93,.08);
}

.site-nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none !important; flex-shrink: 0; overflow: hidden; min-width: 0; }
.site-nav-brand-icon {
  width: 36px; height: 36px; border-radius: 11px; background: var(--pk-grad);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; flex-shrink: 0; overflow: hidden;
  box-shadow: 0 4px 14px rgba(232,39,93,.32);
}
.site-nav-brand-icon img { max-width: 20px; max-height: 20px; object-fit: contain; }
.site-nav-brand-text { font-size: 16px; font-weight: 900; color: var(--c-text); letter-spacing: -.4px; }
.site-nav-brand-text em { color: var(--pk); font-style: normal; }

.site-nav-links { display: flex; align-items: center; gap: 26px; flex: 1; justify-content: center; }
.site-nav-links a {
  font-size: 13.5px; font-weight: 600; color: var(--c-muted); text-decoration: none !important;
  transition: color .15s; white-space: nowrap;
}
.site-nav-links a:hover { color: var(--pk); }

.site-nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.site-nav-lang-dd { position: relative; }
.site-nav-lang-btn {
  height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 14px;
  border-radius: var(--r-pill); border: 1px solid var(--c-border); background: var(--c-surface2);
  color: var(--c-muted) !important; font-size: 12.5px; font-weight: 700;
  text-decoration: none !important; cursor: pointer;
}
.site-nav-lang-btn i { font-size: 9px; }

.site-nav-dark-btn {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--c-border); background: var(--c-surface2); color: var(--c-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.site-nav-dark-btn:hover { background: var(--pk-soft); color: var(--pk); border-color: var(--pk-bdr); }

.site-nav-signin {
  height: 38px; display: flex; align-items: center; padding: 0 18px;
  border-radius: var(--r-pill); border: 1.5px solid var(--c-border); background: var(--c-surface);
  color: var(--c-text) !important; font-size: 13px; font-weight: 700;
  text-decoration: none !important; transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
}
.site-nav-signin:hover,
.site-nav-signin.is-active { border-color: var(--pk); color: var(--pk) !important; background: var(--pk-soft); }

.site-nav-signup {
  height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 18px;
  border-radius: var(--r-pill); background: var(--pk-grad);
  color: #fff !important; font-size: 13px; font-weight: 800;
  text-decoration: none !important; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(232,39,93,.32);
  transition: transform .15s, box-shadow .15s;
}
.site-nav-signup:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(232,39,93,.4); }
.site-nav-signup i { font-size: 12px; }

.site-nav-burger {
  display: none; width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--c-border); background: var(--c-surface2); color: var(--c-text); font-size: 15px;
  align-items: center; justify-content: center; cursor: pointer;
}

@media (max-width: 900px) {
  .site-nav-links  { display: none; }
  .site-nav-signin { display: none; }
  .site-nav-lang-dd { display: none; }
  .site-nav-burger { display: flex; }
}
@media (max-width: 480px) {
  .site-nav-wrap  { padding: 14px 14px 0; }
  .site-nav       { padding: 8px 8px 8px 14px; gap: 10px; }
  .site-nav-brand-text { font-size: 14px; }
  .site-nav-signup span { display: none; }
}

[data-theme="dark"] .site-nav { background: #18181c !important; border-color: rgba(232,39,93,.22) !important; }
[data-theme="dark"] .site-nav-brand-text { color: #f0f0f8 !important; }
[data-theme="dark"] .site-nav-links a { color: #a8a8b8 !important; }
[data-theme="dark"] .site-nav-lang-btn { background: #222228 !important; border-color: #333 !important; color: #ccc !important; }
[data-theme="dark"] .site-nav-dark-btn { background: #2a2a32 !important; border-color: #4a4a55 !important; color: #c8c8d2 !important; }
[data-theme="dark"] .site-nav-signin   { background: #1f1f24 !important; border-color: #333 !important; color: #ddd !important; }
[data-theme="dark"] .site-nav-burger   { background: #2a2a32 !important; border-color: #4a4a55 !important; color: #ddd !important; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sb-overlay {
  position: fixed; inset: 0; background: rgba(15,15,20,.55);
  z-index: 1040; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, visibility 0s linear .22s;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.sb-overlay.is-open {
  opacity: 1; visibility: visible; pointer-events: all;
  transition: opacity .22s ease, visibility 0s;
}

.sb-panel {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w);
  background: var(--c-surface); z-index: 1041;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(-100%);
  transition: transform .26s cubic-bezier(.4,0,.2,1), background .25s;
  box-shadow: 6px 0 40px rgba(0,0,0,.14);
}
.sb-panel.is-open { transform: none; }

.sb-head {
  background: var(--pk-grad); padding: 22px 18px 18px;
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.sb-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -.4px;
  overflow: hidden; min-width: 0;
}
.sb-brand-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
}
.sb-brand-icon img { max-width: 22px; max-height: 22px; object-fit: contain; }
.sb-brand-icon i   { font-size: 15px; color: #fff; }
.sb-brand-sub      { font-weight: 500; opacity: .75; font-size: 12px; }
.sb-close {
  width: 32px; height: 32px; border-radius: 9px;
  background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.28);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.9); font-size: 16px; cursor: pointer;
  transition: background .15s; flex-shrink: 0;
}
.sb-close:hover { background: rgba(255,255,255,.32); }

.sb-user {
  background: var(--pk-soft); border-bottom: 1px solid var(--pk-bdr);
  padding: 12px 16px; display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; transition: background .25s;
}
.sb-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--pk-grad);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 800; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(232,39,93,.3);
}
.sb-user-info  { flex: 1; min-width: 0; }
.sb-username   { font-weight: 700; font-size: 13px; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-balance    { font-size: 12px; font-weight: 600; color: var(--pk); margin-top: 1px; }
.sb-balance-row { display: flex; align-items: center; gap: 6px; }
.sb-add-funds {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--pk); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  box-shadow: 0 1px 4px rgba(232,39,93,.35);
  transition: transform .15s, box-shadow .15s;
  text-decoration: none; flex-shrink: 0;
}
.sb-add-funds:hover { transform: scale(1.15); box-shadow: 0 3px 10px rgba(232,39,93,.45); }

.sb-curr-pill {
  display: flex; align-items: center; gap: 5px;
  background: var(--c-surface); border: 1px solid var(--pk-bdr);
  border-radius: var(--r-pill); padding: 5px 9px;
  font-size: 11.5px; font-weight: 700; color: var(--pk);
  cursor: pointer; flex-shrink: 0;
  transition: background .15s, border-color .15s; white-space: nowrap; position: relative;
}
.sb-curr-pill:hover { background: var(--pk-soft); border-color: var(--pk); }
.sb-curr-pill .chevron { font-size: 9px; opacity: .6; transition: transform .2s; }
.sb-curr-pill.is-open .chevron { transform: rotate(180deg); }

.sb-curr-drop {
  display: none; position: fixed; width: 210px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); box-shadow: 0 8px 28px rgba(0,0,0,.13);
  z-index: 1055; overflow: hidden; transition: background .25s;
}
.sb-curr-drop.is-open { display: block; }
.sb-curr-drop-head {
  padding: 10px 14px 8px; font-size: 10.5px; font-weight: 800;
  color: var(--c-muted); text-transform: uppercase; letter-spacing: .7px;
  border-bottom: 1px solid var(--pk-soft);
}
.sb-curr-drop-list { padding: 5px; max-height: 260px; overflow-y: auto; }
.sb-curr-opt {
  display: flex !important; align-items: center !important; gap: 10px !important;
  padding: 9px 11px !important; border-radius: var(--r-sm);
  font-size: 13px !important; font-weight: 600 !important;
  color: var(--c-text) !important; text-decoration: none !important;
  transition: background .1s; cursor: pointer;
}
.sb-curr-opt:hover, .sb-curr-opt.is-active { background: var(--pk-soft) !important; color: var(--pk) !important; }
.sb-curr-sym {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  background: var(--pk-soft); border: 1px solid var(--pk-bdr);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--pk); flex-shrink: 0;
}
.sb-curr-key   { flex: 1; }
.sb-curr-label { font-size: 11px; opacity: .45; }

.sb-nav { flex: 1; padding: 10px 8px; }
.sb-section {
  font-size: 10px; font-weight: 800; color: var(--c-subtle);
  text-transform: uppercase; letter-spacing: .8px; padding: 10px 10px 4px;
}
.sb-divider { height: 1px; background: var(--c-border); margin: 6px 10px 8px; opacity: .6; }
.sb-link {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 600;
  color: var(--c-text) !important; text-decoration: none !important;
  transition: background .12s, color .12s; margin-bottom: 1px; position: relative;
}
.sb-link i { width: 18px; text-align: center; font-size: 15px; color: var(--c-subtle); flex-shrink: 0; transition: color .12s; }
.sb-link-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-link-badge {
  flex-shrink: 0; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--pk); color: #fff !important;
  font-size: 10.5px; font-weight: 800; line-height: 19px; text-align: center;
}
.sb-link.is-active .sb-link-badge { background: rgba(255,255,255,.28); }
.sb-link:hover { background: var(--pk-soft) !important; color: var(--pk) !important; }
.sb-link:hover i { color: var(--pk); }
.sb-link:focus-visible { outline: 2px solid var(--pk); outline-offset: -2px; }

.sb-link.is-active {
  background: var(--pk-grad) !important; color: #fff !important;
  font-weight: 700 !important; box-shadow: 0 4px 14px rgba(232,39,93,.32);
  padding-right: 30px;
}
.sb-link.is-active i { color: #fff !important; }
.sb-link.is-active::after {
  content: '\f054'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
  font-size: 11px; color: rgba(255,255,255,.85);
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
}

.sb-foot {
  padding: 12px 16px; border-top: 1px solid var(--c-border);
  background: var(--c-surface2); flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--c-subtle); transition: background .25s;
}
.sb-dark-btn {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: none; border: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-muted); font-size: 15px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.sb-dark-btn:hover { background: var(--pk-soft); color: var(--pk); border-color: var(--pk-bdr); }

.sb-support-wrap { padding: 10px 12px 4px; flex-shrink: 0; }
.sb-support-card {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px; border-radius: var(--r-md);
  background: linear-gradient(135deg,#29a8e8 0%,#1d86bf 100%);
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(41,168,232,.3);
  transition: transform .15s, box-shadow .15s;
}
.sb-support-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(41,168,232,.4); }
.sb-support-icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px;
}
.sb-support-text  { min-width: 0; }
.sb-support-title { font-size: 13px; font-weight: 800; color: #fff; }
.sb-support-sub   { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.85); margin-top: 1px; }

/* ============================================================
   PERSISTENT DESKTOP SIDEBAR (authenticated pages)
   — always visible, with an optional collapse-to-rail toggle
   ============================================================ */
.topbar-collapse-btn { display: none; }

@media (min-width: 992px) {
  body.is-auth {
    padding-left: var(--sidebar-w);
    transition: padding-left .28s cubic-bezier(.4,0,.2,1);
  }

  body.is-auth .sb-overlay { display: none !important; }
  body.is-auth .sb-close   { display: none !important; }
  body.is-auth .sb-panel {
    transform: none !important;
    box-shadow: none; border-right: 1px solid var(--c-border);
    width: var(--sidebar-w);
    transition: width .28s cubic-bezier(.4,0,.2,1), background .25s;
  }

  body.is-auth .topbar-menu-btn,
  body.is-auth .topbar-brand,
  body.is-auth .topbar-divider { display: none !important; }

  body.is-auth .topbar-collapse-btn {
    display: flex; width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 50%; border: 1px solid var(--c-border);
    background: var(--c-surface2); color: var(--c-muted);
    align-items: center; justify-content: center; font-size: 13px; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .2s;
  }
  body.is-auth .topbar-collapse-btn:hover { background: var(--pk-soft); color: var(--pk); border-color: var(--pk-bdr); }

  /* ---- Collapsed (icon-only rail) state ---- */
  html.sb-collapsed body.is-auth { padding-left: var(--sidebar-w-collapsed); }
  html.sb-collapsed body.is-auth .sb-panel { width: var(--sidebar-w-collapsed); }
  html.sb-collapsed body.is-auth .topbar-collapse-btn i { transform: rotate(180deg); }

  html.sb-collapsed body.is-auth .sb-brand-text,
  html.sb-collapsed body.is-auth .sb-brand-sub,
  html.sb-collapsed body.is-auth .sb-user-info,
  html.sb-collapsed body.is-auth .sb-curr-pill,
  html.sb-collapsed body.is-auth .sb-add-funds,
  html.sb-collapsed body.is-auth .sb-section,
  html.sb-collapsed body.is-auth .sb-link-label,
  html.sb-collapsed body.is-auth .sb-link-badge,
  html.sb-collapsed body.is-auth .sb-support-text,
  html.sb-collapsed body.is-auth .sb-foot span {
    display: none !important;
  }
  html.sb-collapsed body.is-auth .sb-head    { justify-content: center; padding: 22px 10px 18px; }
  html.sb-collapsed body.is-auth .sb-user    { justify-content: center; }
  html.sb-collapsed body.is-auth .sb-link    { justify-content: center; padding: 10px; }
  html.sb-collapsed body.is-auth .sb-link i  { width: auto; }
  html.sb-collapsed body.is-auth .sb-link.is-active { padding-right: 10px; }
  html.sb-collapsed body.is-auth .sb-link.is-active::after { display: none; }
  html.sb-collapsed body.is-auth .sb-support-wrap { padding: 10px 10px 4px; }
  html.sb-collapsed body.is-auth .sb-support-card { justify-content: center; padding: 11px; }
  html.sb-collapsed body.is-auth .sb-foot    { justify-content: center; }

  /* Full-width content: the legacy centered Bootstrap column is no
     longer needed now that the sidebar provides the side structure */
  body.is-auth .container {
    width: 100% !important; max-width: 100% !important;
    padding-left: 28px !important; padding-right: 28px !important;
  }
  body.is-auth .container .col-md-10,
  body.is-auth .container .col-md-offset-1,
  body.is-auth .container .col-md-8,
  body.is-auth .container .col-md-offset-2 {
    width: 100% !important; margin-left: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
}


/* ============================================================
   TOAST SYSTEM
   ============================================================ */
#notify-wrapper { display: none !important; }

#toast-stack {
  position: fixed; bottom: 84px; right: 18px; z-index: 9998;
  display: flex; flex-direction: column-reverse; gap: 10px;
  width: 340px; max-width: calc(100vw - 36px); pointer-events: none;
}
.toast {
  pointer-events: all;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 14px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 20px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.06);
  transform: translateX(calc(100% + 28px)); opacity: 0;
  transition: transform .3s cubic-bezier(.34,1.28,.64,1), opacity .22s ease;
  will-change: transform, opacity; overflow: hidden; position: relative;
}
.toast.is-visible { transform: translateX(0); opacity: 1; }
.toast.is-leaving { transform: translateX(calc(100% + 28px)); opacity: 0; transition: transform .22s ease, opacity .18s ease; }
.toast::before    { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.toast-icon       { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; margin-left: 4px; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.toast-body       { flex: 1; min-width: 0; padding-top: 1px; }
.toast-title      { font-size: 13.5px; font-weight: 700; color: var(--c-text); line-height: 1.3; margin-bottom: 2px; }
.toast-message    { font-size: 12.5px; color: var(--c-muted); line-height: 1.5; }
.toast-close      { background: none; border: none; padding: 0; cursor: pointer; color: var(--c-subtle); font-size: 16px; line-height: 1; flex-shrink: 0; margin-top: 1px; transition: color .15s; }
.toast-close:hover { color: var(--c-muted); }
.toast-progress   { position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; border-radius: 0 0 var(--r-lg) var(--r-lg); transform-origin: left; }

.toast-success::before         { background: #22c55e; }
.toast-success .toast-icon     { background: #f0fdf4; color: #16a34a; }
.toast-success .toast-progress { background: #22c55e; }
.toast-error::before           { background: #ef4444; }
.toast-error .toast-icon       { background: #fef2f2; color: #dc2626; }
.toast-error .toast-progress   { background: #ef4444; }
.toast-warning::before         { background: #f59e0b; }
.toast-warning .toast-icon     { background: #fffbeb; color: #d97706; }
.toast-warning .toast-progress { background: #f59e0b; }
.toast-info::before            { background: var(--pk); }
.toast-info .toast-icon        { background: var(--pk-soft); color: var(--pk); }
.toast-info .toast-progress    { background: var(--pk); }

@media (max-width: 480px) {
  #toast-stack { right: 12px; left: 12px; width: auto; bottom: 78px; }
}

/* ============================================================
   FOOTER  (layout.txt footer)
   ============================================================ */
.site-footer {
  background: var(--c-surface); border-top: 1px solid var(--c-border);
  padding: 22px 0; margin-top: 40px; text-align: center;
  transition: background .25s;
}
.site-footer-name { font-size: 16px; font-weight: 900; letter-spacing: -.3px; color: var(--c-text); margin-bottom: 4px; }
.site-footer-name span { color: var(--pk); }
.site-footer-copy { font-size: 12px; color: var(--c-subtle); font-weight: 500; }

/* ============================================================
   MOBILE BOTTOM NAV
   ============================================================ */
.mob-nav { display: none; }
@media (max-width: 767px) {
  body { padding-bottom: 84px !important; }
  #toast-stack { bottom: 92px; }
  .mob-nav {
    display: flex; position: fixed; inset: auto 12px 14px; height: 62px; z-index: 1038;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--c-border);
    border-radius: var(--r-pill);
    box-shadow: 0 8px 28px rgba(0,0,0,.12), 0 2px 10px rgba(232,39,93,.1);
    align-items: stretch; padding: 0 6px;
    margin-bottom: env(safe-area-inset-bottom,0);
    transition: background .25s;
  }
  [data-theme="dark"] .mob-nav { background: rgba(24,24,28,.98); }
  .mob-nav-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    padding: 6px 4px 5px; border-radius: var(--r-pill); margin: 6px 2px;
    font-size: 9.5px; font-weight: 600; color: var(--c-subtle);
    text-decoration: none !important;
    transition: color .15s, background .15s; -webkit-tap-highlight-color: transparent; position: relative;
  }
  .mob-nav-item i       { font-size: 17px; line-height: 1; transition: transform .15s; }
  .mob-nav-item span    { line-height: 1; }
  .mob-nav-item.is-active, .mob-nav-item:hover { color: var(--pk); background: var(--pk-soft); }
  .mob-nav-item.is-active i { transform: translateY(-1px); }
  .mob-nav-item:focus-visible { outline: 2px solid var(--pk); outline-offset: -2px; }
  .mob-nav-item .nav-badge {
    position: absolute; top: 4px; right: calc(50% - 14px);
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--pk); color: #fff; font-size: 9px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--c-bg);
  }
  .mob-nav-fab-wrap {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-nav-fab {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--pk-grad);
    box-shadow: 0 4px 16px rgba(232,39,93,.42), 0 0 0 3px rgba(232,39,93,.10);
    display: flex; align-items: center; justify-content: center;
    color: #fff !important; font-size: 20px; text-decoration: none !important;
    margin-top: -22px; border: 3px solid var(--c-bg);
    transition: transform .15s, box-shadow .15s;
  }
  .mob-nav-fab:active { transform: scale(1.08); box-shadow: 0 6px 22px rgba(232,39,93,.52), 0 0 0 3px rgba(232,39,93,.15); }
  .mob-nav-fab-label { font-size: 9.5px; font-weight: 700; color: var(--pk); line-height: 1; }

  /* inner pages mobile tweaks */
  .no-announce   { font-size: 12.5px; padding: 10px 12px; }
  .no-tg-btn     { margin-left: 0; }
  .no-stat-val   { font-size: 13px; }
  .no-platform-item { width: 46px; height: 46px; font-size: 19px; }
  .no-submit-btn { height: 50px; font-size: 15px; }
  .no-form-card  { padding: 16px; }
}

/* ============================================================
   GLOBAL DARK MODE — Bootstrap overrides for all pages
   ============================================================ */

/* --- Wells & Panels --- */
[data-theme="dark"] .well {
  background: var(--c-surface) !important;
  border-color: var(--c-border) !important;
  box-shadow: none !important;
  color: var(--c-text) !important;
}
[data-theme="dark"] .panel {
  background: var(--c-surface) !important;
  border-color: var(--c-border) !important;
}
[data-theme="dark"] .panel-heading {
  background: var(--c-surface2) !important;
  border-color: var(--c-border) !important;
  color: var(--c-text) !important;
}
[data-theme="dark"] .panel-body { color: var(--c-text) !important; }
[data-theme="dark"] .panel-footer {
  background: var(--c-surface2) !important;
  border-color: var(--c-border) !important;
  color: var(--c-muted) !important;
}

/* --- Tables --- */
[data-theme="dark"] .table {
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
}
[data-theme="dark"] .table > thead > tr > th,
[data-theme="dark"] .table > thead > tr > td {
  background: var(--c-surface2) !important;
  color: var(--pk) !important;
  border-color: var(--c-border) !important;
}
[data-theme="dark"] .table > tbody > tr > td,
[data-theme="dark"] .table > tbody > tr > th,
[data-theme="dark"] .table > tfoot > tr > td {
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .table > tbody > tr:hover > td,
[data-theme="dark"] .table > tbody > tr:hover > th {
  background: var(--c-surface2) !important;
}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td {
  background: rgba(255,255,255,.02) !important;
}
[data-theme="dark"] .table-bordered,
[data-theme="dark"] .table-bordered > thead > tr > th,
[data-theme="dark"] .table-bordered > tbody > tr > td {
  border-color: var(--c-border) !important;
}
[data-theme="dark"] .well.well-float {
  background: var(--c-surface) !important;
  border-color: var(--pk-bdr) !important;
}

/* --- Forms & Inputs --- */
[data-theme="dark"] .form-control {
  background: var(--c-surface2) !important;
  border-color: var(--c-border) !important;
  color: var(--c-text) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .form-control:focus {
  border-color: var(--pk) !important;
  background: var(--c-surface2) !important;
  color: var(--c-text) !important;
  box-shadow: 0 0 0 3px var(--pk-soft) !important;
}
[data-theme="dark"] .form-control::placeholder { color: var(--c-muted) !important; }
[data-theme="dark"] .input-group-addon {
  background: var(--c-surface2) !important;
  border-color: var(--c-border) !important;
  color: var(--c-muted) !important;
}
[data-theme="dark"] label,
[data-theme="dark"] .control-label { color: var(--c-text) !important; }
[data-theme="dark"] .checkbox label,
[data-theme="dark"] .radio label { color: var(--c-muted) !important; }
[data-theme="dark"] select.form-control option {
  background: var(--c-surface2);
  color: var(--c-text);
}

/* --- Buttons --- */
[data-theme="dark"] .btn-default {
  background: var(--c-surface2) !important;
  border-color: var(--c-border) !important;
  color: var(--c-text) !important;
}
[data-theme="dark"] .btn-default:hover,
[data-theme="dark"] .btn-default:focus {
  background: var(--c-border) !important;
  color: var(--c-text) !important;
}
[data-theme="dark"] .btn.btn-xs.btn-default {
  background: var(--c-surface2) !important;
  border-color: var(--pk-bdr) !important;
  color: var(--c-muted) !important;
}

/* --- Alerts --- */
[data-theme="dark"] .alert-danger {
  background: rgba(220,38,38,.15) !important;
  border-color: rgba(220,38,38,.35) !important;
  color: #fca5a5 !important;
}
[data-theme="dark"] .alert-success {
  background: rgba(34,197,94,.12) !important;
  border-color: rgba(34,197,94,.3) !important;
  color: #86efac !important;
}
[data-theme="dark"] .alert-info {
  background: rgba(59,130,246,.12) !important;
  border-color: rgba(59,130,246,.3) !important;
  color: #93c5fd !important;
}
[data-theme="dark"] .alert-warning {
  background: rgba(234,179,8,.12) !important;
  border-color: rgba(234,179,8,.3) !important;
  color: #fde68a !important;
}
[data-theme="dark"] .alert .close { color: var(--c-muted) !important; }

/* --- Modals --- */
[data-theme="dark"] .modal-content {
  background: var(--c-surface) !important;
  border-color: var(--c-border) !important;
  color: var(--c-text) !important;
}
[data-theme="dark"] .modal-header {
  background: var(--c-surface2) !important;
  border-color: var(--c-border) !important;
}
[data-theme="dark"] .modal-title { color: var(--c-text) !important; }
[data-theme="dark"] .modal-footer {
  background: var(--c-surface2) !important;
  border-color: var(--c-border) !important;
}
[data-theme="dark"] .modal-backdrop { background: #000 !important; }

/* --- Dropdowns --- */
[data-theme="dark"] .dropdown-menu {
  background: var(--c-surface) !important;
  border-color: var(--c-border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.45) !important;
}
[data-theme="dark"] .dropdown-menu > li > a {
  color: var(--c-text) !important;
}
[data-theme="dark"] .dropdown-menu > li > a:hover,
[data-theme="dark"] .dropdown-menu > li > a:focus {
  background: var(--c-surface2) !important;
  color: var(--pk) !important;
}
[data-theme="dark"] .dropdown-menu .divider {
  background: var(--c-border) !important;
}

/* --- Pagination --- */
[data-theme="dark"] .pagination > li > a,
[data-theme="dark"] .pagination > li > span {
  background: var(--c-surface) !important;
  border-color: var(--c-border) !important;
  color: var(--c-muted) !important;
}
[data-theme="dark"] .pagination > li > a:hover {
  background: var(--c-surface2) !important;
  color: var(--pk) !important;
}
[data-theme="dark"] .pagination > li.active > a,
[data-theme="dark"] .pagination > li.active > span {
  background: var(--pk-grad, var(--pk)) !important;
  border-color: var(--pk) !important;
  color: #fff !important;
}
[data-theme="dark"] .pagination > li.disabled > a,
[data-theme="dark"] .pagination > li.disabled > span {
  background: var(--c-surface) !important;
  color: var(--c-subtle) !important;
}

/* --- Nav Pills & Tabs --- */
[data-theme="dark"] .nav.nav-pills {
  background: var(--c-surface) !important;
  border-color: var(--c-border) !important;
}
[data-theme="dark"] .nav.nav-pills > li > a {
  color: var(--c-muted) !important;
}
[data-theme="dark"] .nav.nav-pills > li > a:hover {
  background: var(--pk-soft) !important;
  color: var(--pk) !important;
}
[data-theme="dark"] .nav-tabs {
  border-color: var(--c-border) !important;
}
[data-theme="dark"] .nav-tabs > li > a {
  color: var(--c-muted) !important;
  border-color: transparent !important;
}
[data-theme="dark"] .nav-tabs > li.active > a,
[data-theme="dark"] .nav-tabs > li.active > a:hover,
[data-theme="dark"] .nav-tabs > li.active > a:focus {
  background: var(--c-surface) !important;
  border-color: var(--c-border) var(--c-border) transparent !important;
  color: var(--pk) !important;
}
[data-theme="dark"] .tab-content { color: var(--c-text) !important; }

/* --- General page text & links --- */
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,
[data-theme="dark"] h4,[data-theme="dark"] h5,[data-theme="dark"] h6 {
  color: var(--c-text) !important;
}
[data-theme="dark"] p, [data-theme="dark"] li, [data-theme="dark"] span {
  color: inherit;
}
[data-theme="dark"] hr {
  border-color: var(--c-border) !important;
}
[data-theme="dark"] .text-muted { color: var(--c-muted) !important; }

/* --- Badges & Labels --- */
[data-theme="dark"] .label-default,
[data-theme="dark"] .badge {
  background: #ffffff !important;
  color: #e8275d !important;
}

/* Status badges dark mode */
[data-theme="dark"] .status-badge.s-completed  { background: rgba(22,163,74,.15);  color: #4ade80; }
[data-theme="dark"] .status-badge.s-pending    { background: rgba(217,119,6,.15);  color: #fbbf24; }
[data-theme="dark"] .status-badge.s-inprogress { background: rgba(37,99,235,.15);  color: #60a5fa; }
[data-theme="dark"] .status-badge.s-partial    { background: rgba(147,51,234,.15); color: #c084fc; }
[data-theme="dark"] .status-badge.s-canceled   { background: rgba(220,38,38,.15);  color: #f87171; }
[data-theme="dark"] .status-badge.s-processing { background: var(--pk-soft);       color: var(--pk); }
[data-theme="dark"] .status-badge.s-default    { background: var(--c-surface2);    color: var(--c-muted); }

/* --- Tooltips --- */
[data-theme="dark"] .tooltip-inner {
  background: var(--c-surface2) !important;
  color: var(--c-text) !important;
  border: 1px solid var(--c-border);
}



/* ============================================================
   PAGE-SPECIFIC STYLES
   (Previously inline <style> blocks in each template — now centralized here.
    Each section is scoped to a unique wrapper class added to that page's
    template, e.g. .pg-orders, .pg-tickets, etc. so nothing collides.)
   ============================================================ */

/* ============================================================
   2FA PAGE  (scope: .pg-2fa)
   ============================================================ */
.pg-2fa .well {
  background: #fff !important;
  border: 1px solid var(--pink-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 2px 16px rgba(244, 52, 111, 0.08) !important;
  padding: 28px !important;
}
.pg-2fa .well h4 {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  margin: 0 0 10px !important;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--pink-border);
}
.pg-2fa .well p {
  font-size: 13.5px;
  color: #666;
  line-height: 1.7;
  margin-bottom: 18px;
}
.pg-2fa .form-group label.control-label {
  font-weight: 700;
  color: #222;
  font-size: 13.5px;
  margin-bottom: 7px;
  display: block;
}
.pg-2fa .form-control {
  border-radius: var(--input-radius) !important;
  border: 1.5px solid var(--pink-border) !important;
  background: #fff !important;
  color: #333 !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  height: 48px !important;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: none !important;
}
.pg-2fa .form-control:focus {
  border-color: var(--pink-primary) !important;
  box-shadow: 0 0 0 3px rgba(244, 52, 111, 0.10) !important;
  outline: none !important;
}
.pg-2fa .btn.btn-primary {
  background: var(--pink-gradient) !important;
  border: none !important;
  border-radius: var(--input-radius) !important;
  height: 50px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  width: 100% !important;
  color: #fff !important;
  box-shadow: 0 5px 18px rgba(244, 52, 111, 0.32) !important;
  transition: transform .15s, box-shadow .15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
}
.pg-2fa .btn.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(244, 52, 111, 0.42) !important;
}
.pg-2fa .btn.btn-primary:active {
  transform: translateY(0) !important;
}
/* ----- 2FA dark mode ----- */
[data-theme="dark"] .pg-2fa .well {
  background: var(--c-surface) !important;
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-2fa .well h4 {
  color: var(--c-text) !important;
  border-bottom-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-2fa .well p { color: var(--c-muted) !important; }
[data-theme="dark"] .pg-2fa .form-group label.control-label { color: var(--c-text) !important; }
[data-theme="dark"] .pg-2fa .form-control {
  background: var(--c-surface2) !important;
  border-color: var(--c-border2) !important;
  color: var(--c-text) !important;
}
[data-theme="dark"] .pg-2fa .form-control::placeholder { color: var(--c-muted) !important; }

/* ============================================================
   ACCOUNT PAGE  (scope: .pg-account)
   ============================================================ */
/* ===== PAGE HEADER ===== */
.pg-account .acc-page-head { margin-bottom: 18px; }
.pg-account .acc-page-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--c-text, #1a1a1a);
  margin: 0 0 4px;
  letter-spacing: -.3px;
}
.pg-account .acc-page-sub {
  font-size: 13.5px;
  color: var(--c-muted, #777);
  margin: 0;
}
/* ===== ACCOUNT TABS ===== */
.pg-account .nav.nav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 22px !important;
  background: var(--c-surface, #fff);
  border: 1px solid var(--pink-border);
  border-radius: var(--card-radius);
  padding: 10px 14px;
  box-shadow: 0 2px 12px rgba(244, 52, 111, 0.07);
}
.pg-account .nav.nav-pills > li > a {
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--c-muted, #666) !important;
  padding: 8px 18px !important;
  background: transparent !important;
  border: 1.5px solid transparent !important;
  transition: all .15s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px;
}
.pg-account .nav.nav-pills > li > a:hover {
  background: var(--pink-soft) !important;
  color: var(--pink-primary) !important;
  border-color: var(--pink-border) !important;
}
.pg-account .nav.nav-pills > li.active > a, .pg-account .nav.nav-pills > li.active > a:hover, .pg-account .nav.nav-pills > li.active > a:focus {
  background: var(--pink-gradient) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 3px 10px rgba(244, 52, 111, 0.3) !important;
}
/* ===== ALERTS ===== */
.pg-account .alert-success {
  border-radius: var(--input-radius) !important;
  border-left: 4px solid #38a169 !important;
  background: #f0fff4 !important;
  color: #276749 !important;
  border-color: #9ae6b4 !important;
  font-weight: 600;
  margin-bottom: 16px !important;
}
.pg-account .alert-danger {
  border-radius: var(--input-radius) !important;
  border-left: 4px solid #e53e3e !important;
  background: #fff5f5 !important;
  color: #c53030 !important;
  border-color: #feb2b2 !important;
  font-weight: 600;
  margin-bottom: 16px !important;
}
/* ===== CARD (formerly "well") ===== */
.pg-account .well.acc-card {
  background: var(--c-surface, #fff) !important;
  border: 1px solid var(--pink-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 2px 16px rgba(244, 52, 111, 0.08) !important;
  padding: 0 !important;
  margin-bottom: 18px !important;
  overflow: hidden;
}
/* ===== CARD HEAD (icon + title + desc + optional status pill) ===== */
.pg-account .acc-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--pink-border);
  background: var(--pk-soft, rgba(244,52,111,.04));
}
.pg-account .acc-card-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--pink-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 4px 14px rgba(244, 52, 111, 0.3);
}
.pg-account .acc-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text, #1a1a1a);
  margin-bottom: 3px;
}
.pg-account .acc-card-desc {
  font-size: 12.5px;
  color: var(--c-muted, #888);
  line-height: 1.55;
}
.pg-account .acc-status-pill {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.pg-account .acc-status-pill.is-on {
  background: rgba(56, 161, 105, 0.12);
  color: #2f855a;
}
.pg-account .acc-status-pill.is-off {
  background: var(--c-surface2, #f2f2f5);
  color: var(--c-muted, #888);
}
/* ===== CARD BODY ===== */
.pg-account .acc-card-body { padding: 22px 24px 24px; }
.pg-account .acc-card-body .alert { margin-bottom: 16px !important; }
.pg-account .acc-card-body form > .btn.btn-primary:last-child,
.pg-account .acc-card-body > .btn.btn-primary:last-child { margin-top: 4px; }
.pg-account .acc-helper-text {
  font-size: 13.5px;
  color: var(--c-muted, #666);
  line-height: 1.7;
  margin-bottom: 14px;
}
/* ===== TWO-COLUMN FIELD ROW ===== */
.pg-account .form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
/* ===== FORM LABELS ===== */
.pg-account .form-group label.control-label, .pg-account .form-group label {
  font-weight: 700;
  color: var(--c-text, #222);
  font-size: 13.5px;
  margin-bottom: 7px;
  display: block;
}
/* ===== INPUTS / SELECTS / TEXTAREAS ===== */
.pg-account .form-control {
  border-radius: var(--input-radius) !important;
  border: 1.5px solid var(--pink-border) !important;
  background: var(--c-surface, #fff) !important;
  color: var(--c-text, #333) !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  height: 48px !important;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: none !important;
}
.pg-account .form-control:focus {
  border-color: var(--pink-primary) !important;
  box-shadow: 0 0 0 3px rgba(244, 52, 111, 0.10) !important;
  outline: none !important;
}
.pg-account .form-control[readonly], .pg-account .form-control[disabled], .pg-account span.form-control[disabled] {
  background: var(--pink-soft) !important;
  color: var(--c-muted, #888) !important;
  border-color: var(--pink-border) !important;
  cursor: default !important;
  display: flex;
  align-items: center;
}
.pg-account textarea.form-control {
  height: auto !important;
  resize: vertical;
  min-height: 130px;
  line-height: 1.65;
}
.pg-account select.form-control {
  cursor: pointer;
  appearance: auto;
}
/* API key helper text */
.pg-account .help-block {
  font-size: 12px;
  color: var(--c-subtle, #aaa);
  margin-top: 6px;
  display: block;
}
/* ===== ALL BUTTONS ===== */
.pg-account .btn.btn-primary {
  background: var(--pink-gradient) !important;
  border: none !important;
  border-radius: var(--input-radius) !important;
  height: 48px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  padding: 0 26px !important;
  color: #fff !important;
  box-shadow: 0 5px 18px rgba(244, 52, 111, 0.32) !important;
  transition: transform .15s, box-shadow .15s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px;
}
.pg-account .btn.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(244, 52, 111, 0.42) !important;
}
.pg-account .btn.btn-primary:active {
  transform: translateY(0) !important;
}
/* ===== MODAL ===== */
.pg-account .modal-content {
  border-radius: var(--card-radius) !important;
  border: 1px solid var(--pink-border) !important;
  box-shadow: 0 8px 32px rgba(244, 52, 111, 0.15) !important;
  overflow: hidden;
  background: var(--c-surface, #fff) !important;
}
.pg-account .modal-header {
  background: var(--pink-soft) !important;
  border-bottom: 1.5px solid var(--pink-border) !important;
  padding: 16px 20px !important;
}
.pg-account .modal-header .modal-title {
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--c-text, #1a1a1a) !important;
}
.pg-account .modal-header .close {
  color: var(--pink-primary) !important;
  opacity: 1 !important;
  font-size: 20px !important;
}
.pg-account .modal-body {
  padding: 22px !important;
}
.pg-account .modal-body .form-group label {
  font-weight: 700;
  font-size: 13px;
  color: var(--c-text, #444);
  margin-bottom: 6px;
  display: block;
}
.pg-account .modal-body .error-summary {
  border-radius: var(--input-radius) !important;
  font-size: 13.5px;
  margin-bottom: 16px;
}
.pg-account .modal-footer {
  border-top: 1.5px solid var(--pink-border) !important;
  padding: 14px 20px !important;
  background: var(--c-surface2, #fafafa) !important;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.pg-account .modal-footer .btn.btn-default {
  background: var(--c-surface, #fff) !important;
  border: 1.5px solid var(--pink-border) !important;
  border-radius: var(--input-radius) !important;
  color: var(--c-muted, #666) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding: 0 20px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: background .15s, border-color .15s !important;
  box-shadow: none !important;
  width: auto !important;
}
.pg-account .modal-footer .btn.btn-default:hover {
  background: var(--pink-soft) !important;
  border-color: var(--pink-primary) !important;
  color: var(--pink-primary) !important;
}
.pg-account .modal-footer .btn.btn-primary {
  height: 44px !important;
  font-size: 13.5px !important;
  padding: 0 22px !important;
}
/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .pg-account .acc-page-title { font-size: 20px; }
  .pg-account .acc-card-head {
    padding: 16px 18px;
    gap: 11px;
  }
  .pg-account .acc-card-icon { width: 34px; height: 34px; font-size: 14px; border-radius: 10px; }
  .pg-account .acc-card-body { padding: 18px 18px 20px; }
  .pg-account .acc-status-pill {
    margin-left: 0;
    order: 3;
    flex-basis: 100%;
    margin-top: 4px;
  }
  .pg-account .acc-card-head { flex-wrap: wrap; }
  .pg-account .form-row-2 { grid-template-columns: 1fr; gap: 0; }
  .pg-account .btn.btn-primary {
    width: 100% !important;
    justify-content: center !important;
    height: 48px !important;
  }
  .pg-account .modal-footer {
    flex-direction: column-reverse;
  }
  .pg-account .modal-footer .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}
/* ===== DARK MODE ===== */
[data-theme="dark"] .pg-account .acc-page-sub { color: var(--c-muted) !important; }
[data-theme="dark"] .pg-account .nav.nav-pills {
  background: var(--c-surface) !important;
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-account .nav.nav-pills > li > a { color: var(--c-muted) !important; }
[data-theme="dark"] .pg-account .well.acc-card {
  background: var(--c-surface) !important;
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-account .acc-card-head {
  background: rgba(232,39,93,.06) !important;
  border-bottom-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-account .acc-card-desc,
[data-theme="dark"] .pg-account .acc-helper-text,
[data-theme="dark"] .pg-account .help-block { color: var(--c-muted) !important; }
[data-theme="dark"] .pg-account .acc-status-pill.is-on {
  background: rgba(56, 161, 105, 0.18) !important;
  color: #68d391 !important;
}
[data-theme="dark"] .pg-account .acc-status-pill.is-off {
  background: var(--c-surface2) !important;
  color: var(--c-muted) !important;
}
[data-theme="dark"] .pg-account .form-control {
  background: var(--c-surface2) !important;
  border-color: var(--c-border2) !important;
  color: var(--c-text) !important;
}
[data-theme="dark"] .pg-account .form-control::placeholder { color: var(--c-muted) !important; }
[data-theme="dark"] .pg-account .form-control[readonly],
[data-theme="dark"] .pg-account .form-control[disabled],
[data-theme="dark"] .pg-account span.form-control[disabled] {
  background: rgba(232,39,93,.08) !important;
  color: var(--c-muted) !important;
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-account .alert-success {
  background: rgba(56, 161, 105, 0.12) !important;
  color: #68d391 !important;
  border-color: rgba(56, 161, 105, 0.3) !important;
}
[data-theme="dark"] .pg-account .alert-danger {
  background: rgba(229, 62, 62, 0.12) !important;
  color: #fc8181 !important;
  border-color: rgba(229, 62, 62, 0.3) !important;
}
[data-theme="dark"] .pg-account .modal-content { background: var(--c-surface) !important; }
[data-theme="dark"] .pg-account .modal-header {
  background: rgba(232,39,93,.08) !important;
  border-bottom-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-account .modal-header .modal-title { color: var(--c-text) !important; }
[data-theme="dark"] .pg-account .modal-body .form-group label { color: var(--c-text) !important; }
[data-theme="dark"] .pg-account .modal-footer {
  border-top-color: var(--c-border2) !important;
  background: var(--c-surface2) !important;
}
[data-theme="dark"] .pg-account .modal-footer .btn.btn-default {
  background: var(--c-surface2) !important;
  border-color: var(--c-border2) !important;
  color: var(--c-muted) !important;
}
[data-theme="dark"] .pg-account .modal-footer .btn.btn-default:hover {
  background: var(--pk-soft) !important;
  border-color: var(--pk) !important;
  color: var(--pk) !important;
}

/* ============================================================
   ADD FUNDS PAGE  (scope: .pg-addfunds)
   ============================================================ */
/* ===== WELL / CARD ===== */
.pg-addfunds .well {
  background: #fff !important;
  border: 1px solid var(--pink-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 2px 16px rgba(244, 52, 111, 0.08) !important;
  padding: 24px !important;
}
/* ===== FORM LABELS ===== */
.pg-addfunds .form-group label.control-label {
  font-weight: 700;
  color: #222;
  font-size: 13.5px;
  margin-bottom: 7px;
  display: block;
}
/* ===== INPUTS & SELECTS ===== */
.pg-addfunds .form-control {
  border-radius: var(--input-radius) !important;
  border: 1.5px solid var(--pink-border) !important;
  background: #fff !important;
  color: #333 !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  height: 48px !important;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: none !important;
}
.pg-addfunds .form-control:focus {
  border-color: var(--pink-primary) !important;
  box-shadow: 0 0 0 3px rgba(244, 52, 111, 0.10) !important;
  outline: none !important;
}
.pg-addfunds select.form-control {
  cursor: pointer;
  appearance: auto;
}
/* ===== ALERTS ===== */
.pg-addfunds .alert-success {
  border-radius: var(--input-radius) !important;
  border-left: 4px solid #38a169 !important;
  background: #f0fff4 !important;
  color: #276749 !important;
  border-color: #9ae6b4 !important;
  font-weight: 600;
}
.pg-addfunds .alert-danger {
  border-radius: var(--input-radius) !important;
  border-left: 4px solid #e53e3e !important;
  background: #fff5f5 !important;
  color: #c53030 !important;
  border-color: #feb2b2 !important;
  font-weight: 600;
}
/* ===== SUBMIT BUTTON ===== */
.pg-addfunds .btn.btn-primary {
  background: var(--pink-gradient) !important;
  border: none !important;
  border-radius: var(--input-radius) !important;
  height: 52px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  width: 100% !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(244, 52, 111, 0.35) !important;
  transition: transform .15s, box-shadow .15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
}
.pg-addfunds .btn.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(244, 52, 111, 0.45) !important;
}
.pg-addfunds .btn.btn-primary:active {
  transform: translateY(0) !important;
}
/* ===== PAYMENT HISTORY TABLE ===== */
.pg-addfunds .table {
  margin-bottom: 0 !important;
}
.pg-addfunds .table thead tr th {
  background: var(--pink-soft) !important;
  color: var(--pink-primary) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  border-bottom: 2px solid var(--pink-border) !important;
  padding: 12px 16px !important;
  white-space: nowrap;
  border-top: none !important;
}
.pg-addfunds .table thead tr th:first-child {
  border-radius: var(--input-radius) 0 0 0;
}
.pg-addfunds .table thead tr th:last-child {
  border-radius: 0 var(--input-radius) 0 0;
}
.pg-addfunds .table tbody tr td {
  padding: 13px 16px !important;
  vertical-align: middle !important;
  font-size: 13.5px !important;
  color: #444 !important;
  border-bottom: 1px solid #fdf0f5 !important;
  border-top: none !important;
}
.pg-addfunds .table tbody tr:last-child td {
  border-bottom: none !important;
}
.pg-addfunds .table tbody tr:hover td {
  background: var(--pink-soft) !important;
}
/* Amount column */
.pg-addfunds .table tbody tr td:nth-child(4) {
  font-weight: 700 !important;
  color: var(--pink-primary) !important;
}
/* Invoice link */
.pg-addfunds .table tbody tr td a {
  color: var(--pink-primary) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  background: var(--pink-soft);
  border: 1.5px solid var(--pink-border);
  border-radius: 8px;
  padding: 5px 12px;
  transition: background .2s, border-color .2s;
  display: inline-block;
}
.pg-addfunds .table tbody tr td a:hover {
  background: var(--pink-border) !important;
  border-color: var(--pink-primary) !important;
}
.pg-addfunds .nowrap {
  white-space: nowrap;
}
/* ===== PAGINATION ===== */
.pg-addfunds .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  margin: 16px 0 4px;
}
.pg-addfunds .pagination > li > a, .pg-addfunds .pagination > li > span {
  border-radius: 8px !important;
  border: 1.5px solid var(--pink-border) !important;
  color: var(--pink-primary) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding: 6px 13px !important;
  background: #fff !important;
  transition: all .15s !important;
  line-height: 1.5 !important;
}
.pg-addfunds .pagination > li > a:hover {
  background: var(--pink-soft) !important;
  border-color: var(--pink-primary) !important;
}
.pg-addfunds .pagination > li.active > a, .pg-addfunds .pagination > li.active > span {
  background: var(--pink-gradient) !important;
  border-color: var(--pink-primary) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(244, 52, 111, 0.3) !important;
}
.pg-addfunds .pagination > li.disabled > a {
  color: #ccc !important;
  border-color: #eee !important;
  background: #fafafa !important;
  cursor: not-allowed;
}
/* ===== PAYMENT METHOD CARDS ===== */
.pg-addfunds .payment-method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.pg-addfunds .payment-method-card {
  position: relative;
  border: 1.5px solid var(--pink-border);
  border-radius: var(--card-radius);
  padding: 14px 10px 12px;
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: border-color .2s, box-shadow .2s, background .2s, transform .15s;
  user-select: none;
}
.pg-addfunds .payment-method-card:hover {
  border-color: var(--pink-primary);
  background: var(--pink-soft);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(244, 52, 111, 0.14);
}
.pg-addfunds .payment-method-card.active {
  border-color: var(--pink-primary);
  background: var(--pink-soft);
  box-shadow: 0 4px 16px rgba(244, 52, 111, 0.20);
}
.pg-addfunds .payment-method-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid var(--pink-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  font-size: 20px;
  color: var(--pink-primary);
  transition: background .2s, border-color .2s;
}
.pg-addfunds .payment-method-card.active .payment-method-icon {
  background: var(--pink-gradient);
  border-color: var(--pink-primary);
  color: #fff;
}
.pg-addfunds .payment-method-letter {
  font-size: 18px;
  font-weight: 800;
  color: inherit;
}
.pg-addfunds .payment-method-name {
  font-size: 12px;
  font-weight: 600;
  color: #444;
  line-height: 1.3;
  word-break: break-word;
  margin-bottom: 2px;
}
.pg-addfunds .payment-method-card.active .payment-method-name {
  color: var(--pink-primary);
}
.pg-addfunds .payment-method-check {
  position: absolute;
  top: 7px;
  right: 8px;
  font-size: 13px;
  color: var(--pink-primary);
  opacity: 0;
  transition: opacity .15s;
}
.pg-addfunds .payment-method-card.active .payment-method-check {
  opacity: 1;
}
@media (max-width: 480px) {
  .pg-addfunds .payment-method-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
  }
  .pg-addfunds .payment-method-card {
    padding: 12px 8px 10px;
  }
  .pg-addfunds .payment-method-icon {
    width: 38px;
    height: 38px;
    font-size: 17px;
  }
  .pg-addfunds .payment-method-name {
    font-size: 11px;
  }
}
/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .pg-addfunds .well {
    padding: 16px !important;
  }
  .pg-addfunds .btn.btn-primary {
    height: 48px !important;
    font-size: 14px !important;
  }
  .pg-addfunds .table thead tr th, .pg-addfunds .table tbody tr td {
    padding: 10px 10px !important;
    font-size: 12.5px !important;
  }
}
/* ===== DARK MODE ===== */
[data-theme="dark"] .pg-addfunds .well {
  background: #18181c !important;
  border-color: rgba(232,39,93,.26) !important;
  color: #f0f0f8 !important;
}
[data-theme="dark"] .pg-addfunds .payment-method-card {
  background: #222228 !important;
  border-color: rgba(232,39,93,.26) !important;
  color: #d0d0e0 !important;
}
[data-theme="dark"] .pg-addfunds .payment-method-card.selected, [data-theme="dark"] .pg-addfunds .payment-method-card:hover {
  background: rgba(232,39,93,.12) !important;
  border-color: #f4346f !important;
}
[data-theme="dark"] .pg-addfunds .payment-method-card .method-name {
  color: #f0f0f8 !important;
}
[data-theme="dark"] .pg-addfunds .table {
  background: #18181c !important;
}
[data-theme="dark"] .pg-addfunds .table thead tr th {
  background: rgba(232,39,93,.10) !important;
  color: #f4346f !important;
  border-color: rgba(232,39,93,.26) !important;
}
[data-theme="dark"] .pg-addfunds .table tbody tr td {
  color: #d0d0e0 !important;
  border-color: rgba(255,255,255,.06) !important;
  background: #18181c !important;
}
[data-theme="dark"] .pg-addfunds .table tbody tr:hover td {
  background: rgba(232,39,93,.07) !important;
}
[data-theme="dark"] .pg-addfunds label, [data-theme="dark"] .pg-addfunds h4, [data-theme="dark"] .pg-addfunds h3 {
  color: #f0f0f8 !important;
}

/* ============================================================
   AFFILIATES PAGE  (scope: .pg-affiliates)
   ============================================================ */
/* ===== AFFILIATES PAGE ===== */
/* Section headings inside wells */
.pg-affiliates .aff-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #f4346f;
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pg-affiliates .aff-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #ffd6e7;
}
/* Stat cards grid */
.pg-affiliates .aff-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 4px;
}
.pg-affiliates .aff-stat-card {
    background: #fff0f5;
    border: 1px solid #ffd6e7;
    border-radius: 14px;
    padding: 14px 12px;
    text-align: center;
}
.pg-affiliates .aff-stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #ffd6e7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    color: #f4346f;
    font-size: 15px;
}
.pg-affiliates .aff-stat-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #b0a0a8;
    margin-bottom: 5px;
}
.pg-affiliates .aff-stat-value {
    font-size: 15px;
    font-weight: 700;
    color: #f4346f;
    word-break: break-all;
}
/* Referral link box */
.pg-affiliates .aff-link-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.pg-affiliates .aff-link-input {
    flex: 1;
    height: 44px;
    border-radius: 12px;
    border: 1.5px solid #ffd6e7;
    background: #fff8fb;
    padding: 0 14px;
    font-size: 13px;
    color: #555;
    outline: none;
    transition: border-color .2s;
    min-width: 0;
}
.pg-affiliates .aff-link-input:focus {
    border-color: #f4346f;
}
.pg-affiliates .aff-copy-btn {
    height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #f4346f 0%, #ff6b9d 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(244, 52, 111, 0.30);
    transition: transform .15s, box-shadow .15s;
    flex-shrink: 0;
}
.pg-affiliates .aff-copy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(244, 52, 111, 0.40);
}
.pg-affiliates .aff-copy-btn.copied {
    background: linear-gradient(135deg, #38a169 0%, #68d391 100%);
    box-shadow: 0 4px 14px rgba(56, 161, 105, 0.30);
}
/* Info chips (commission, min payout) */
.pg-affiliates .aff-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.pg-affiliates .aff-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #ffd6e7;
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 13px;
}
.pg-affiliates .aff-chip-label {
    color: #b0a0a8;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.pg-affiliates .aff-chip-value {
    color: #f4346f;
    font-weight: 700;
    font-size: 13px;
}
/* Payout request button */
.pg-affiliates .btn-payout {
    background: linear-gradient(135deg, #f4346f 0%, #ff6b9d 100%);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    box-shadow: 0 3px 10px rgba(244, 52, 111, 0.30);
    transition: transform .15s, box-shadow .15s;
    white-space: nowrap;
}
.pg-affiliates .btn-payout:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(244, 52, 111, 0.40);
}
/* Table tweaks */
.pg-affiliates .aff-table {
    margin-bottom: 0;
}
.pg-affiliates .aff-table > thead > tr > th {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #f4346f;
    border-bottom: 2px solid #ffd6e7 !important;
    padding: 10px 14px;
    white-space: nowrap;
}
.pg-affiliates .aff-table > tbody > tr > td {
    padding: 12px 14px;
    font-size: 13.5px;
    color: #444;
    border-top: 1px solid #ffd6e7 !important;
    vertical-align: middle;
}
.pg-affiliates .aff-table > tbody > tr:hover > td {
    background: #fff8fb;
}
/* Status badge */
.pg-affiliates .status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.pg-affiliates .status-paid { background: #f0fff4; color: #276749; border: 1px solid #9ae6b4; }
.pg-affiliates .status-pending { background: #fff0f5; color: #c01f55; border: 1px solid #ffd6e7; }
/* Responsive */
@media (max-width: 600px) {
  .pg-affiliates .aff-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .pg-affiliates .aff-link-row { flex-direction: column; }
  .pg-affiliates .aff-copy-btn { width: 100%; }
  .pg-affiliates .aff-chips { gap: 8px; }
}

/* ============================================================
   API PAGE  (scope: .pg-api)
   ============================================================ */
/* ===== WELL ===== */
.pg-api .well.api {
  background: #fff !important;
  border: 1px solid var(--pink-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 2px 16px rgba(244, 52, 111, 0.08) !important;
  padding: 32px !important;
}
/* ===== PAGE TITLE ===== */
.pg-api .center-big-content-block h2 {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  margin-bottom: 20px !important;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--pink-border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.pg-api .center-big-content-block h2::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 26px;
  background: var(--pink-gradient);
  border-radius: 4px;
}
/* ===== METHOD HEADINGS ===== */
.pg-api .center-big-content-block h4 {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  margin-top: 28px !important;
  margin-bottom: 12px !important;
  padding: 10px 14px;
  background: var(--pink-soft);
  border-left: 4px solid var(--pink-primary);
  border-radius: 0 var(--input-radius) var(--input-radius) 0;
}
/* ===== TABLES ===== */
.pg-api .table-bordered {
  border: 1.5px solid var(--pink-border) !important;
  border-radius: var(--input-radius) !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin-bottom: 20px !important;
}
.pg-api .table-bordered > thead > tr > th, .pg-api .table-bordered > tbody > tr > th {
  background: var(--pink-soft) !important;
  color: var(--pink-primary) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 12px 16px !important;
  border-bottom: 2px solid var(--pink-border) !important;
  border-right: 1px solid var(--pink-border) !important;
  white-space: nowrap;
}
.pg-api .table-bordered > thead > tr > th:last-child, .pg-api .table-bordered > tbody > tr > th:last-child {
  border-right: none !important;
}
.pg-api .table-bordered > tbody > tr > td {
  padding: 12px 16px !important;
  font-size: 13.5px !important;
  color: #444 !important;
  border-bottom: 1px solid #fdf0f5 !important;
  border-right: 1px solid var(--pink-border) !important;
  vertical-align: middle !important;
}
.pg-api .table-bordered > tbody > tr > td:last-child {
  border-right: none !important;
}
.pg-api .table-bordered > tbody > tr:last-child > td {
  border-bottom: none !important;
}
.pg-api .table-bordered > tbody > tr:hover > td {
  background: var(--pink-soft) !important;
}
/* First column label style */
.pg-api .table-bordered > tbody > tr > td.width-40, .pg-api .table-bordered > thead > tr > th.width-40 {
  font-weight: 700 !important;
  color: #333 !important;
  background: #fafafa !important;
  white-space: nowrap;
  width: 40% !important;
}
.pg-api .table-bordered > tbody > tr > td.width-40 {
  font-size: 13px !important;
}
/* Links inside table */
.pg-api .table-bordered td a {
  color: var(--pink-primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.pg-api .table-bordered td a:hover {
  text-decoration: underline !important;
  color: var(--pink-light) !important;
}
/* ===== TYPE SELECTOR (inline form) ===== */
.pg-api .form-inline .form-group {
  margin-bottom: 12px !important;
}
.pg-api .form-inline .form-control.input-sm {
  border-radius: var(--input-radius) !important;
  border: 1.5px solid var(--pink-border) !important;
  background: #fff !important;
  color: #333 !important;
  font-size: 13.5px !important;
  padding: 7px 14px !important;
  height: 40px !important;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: none !important;
  min-width: 200px;
}
.pg-api .form-inline .form-control.input-sm:focus {
  border-color: var(--pink-primary) !important;
  box-shadow: 0 0 0 3px rgba(244, 52, 111, 0.10) !important;
  outline: none !important;
}
/* ===== EXAMPLE RESPONSE BLOCK ===== */
.pg-api .center-big-content-block > p > strong, .pg-api .center-big-content-block p strong {
  font-size: 13px;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 8px;
}
.pg-api pre {
  background: #1e1e2e !important;
  color: #e2e8f0 !important;
  border: none !important;
  border-radius: var(--input-radius) !important;
  padding: 18px 20px !important;
  font-size: 12.5px !important;
  line-height: 1.7 !important;
  overflow-x: auto !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
  margin-bottom: 24px !important;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
}
/* Scrollbar inside pre */
.pg-api pre::-webkit-scrollbar { height: 4px; }
.pg-api pre::-webkit-scrollbar-track { background: #2d2d3f; }
.pg-api pre::-webkit-scrollbar-thumb { background: var(--pink-primary); border-radius: 4px; }
/* ===== PHP EXAMPLE BUTTON ===== */
.pg-api .btn.btn-default.m-t {
  background: #fff !important;
  border: 1.5px solid var(--pink-border) !important;
  border-radius: var(--input-radius) !important;
  color: var(--pink-primary) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  padding: 10px 22px !important;
  height: auto !important;
  transition: background .15s, border-color .15s, box-shadow .15s !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  text-decoration: none !important;
  margin-top: 8px !important;
  width: auto !important;
}
.pg-api .btn.btn-default.m-t:hover {
  background: var(--pink-soft) !important;
  border-color: var(--pink-primary) !important;
  box-shadow: 0 4px 14px rgba(244, 52, 111, 0.15) !important;
  color: var(--pink-primary) !important;
}
/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .pg-api .well.api {
    padding: 16px !important;
  }
  .pg-api .center-big-content-block {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .pg-api .table-bordered {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .pg-api .table-bordered > tbody > tr > td, .pg-api .table-bordered > thead > tr > th {
    padding: 10px 12px !important;
    font-size: 12.5px !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
  .pg-api pre {
    font-size: 11.5px !important;
    padding: 12px !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    white-space: pre !important;
    word-break: normal !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }
  .pg-api .form-inline .form-control.input-sm {
    min-width: unset !important;
    width: 100% !important;
  }
  .pg-api .col-lg-8 {
    width: 100% !important;
    padding: 0 !important;
  }
}

/* ===== DARK MODE ===== */
[data-theme="dark"] .pg-api .well.api {
  background: var(--c-surface) !important;
  border-color: var(--c-border2) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.3) !important;
}
[data-theme="dark"] .pg-api .center-big-content-block h2 {
  color: var(--c-text) !important;
  border-bottom-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-api .center-big-content-block h4 {
  color: var(--c-text) !important;
  background: var(--pk-soft) !important;
  border-left-color: var(--pk) !important;
}
[data-theme="dark"] .pg-api .table-bordered {
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-api .table-bordered > thead > tr > th,
[data-theme="dark"] .pg-api .table-bordered > tbody > tr > th {
  background: var(--pk-soft) !important;
  color: var(--pk) !important;
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-api .table-bordered > tbody > tr > td {
  color: var(--c-text) !important;
  border-bottom-color: var(--c-border) !important;
  border-right-color: var(--c-border2) !important;
  background: var(--c-surface) !important;
}
[data-theme="dark"] .pg-api .table-bordered > tbody > tr > td.width-40 {
  color: var(--c-text) !important;
  background: var(--c-surface2) !important;
}
[data-theme="dark"] .pg-api .table-bordered > tbody > tr:hover > td {
  background: rgba(232,39,93,.07) !important;
}
[data-theme="dark"] .pg-api .table-bordered > tbody > tr:last-child > td {
  border-bottom: none !important;
}
[data-theme="dark"] .pg-api .form-inline .form-control.input-sm {
  background: var(--c-surface2) !important;
  border-color: var(--c-border2) !important;
  color: var(--c-text) !important;
}
[data-theme="dark"] .pg-api .center-big-content-block > p > strong,
[data-theme="dark"] .pg-api .center-big-content-block p strong {
  color: var(--c-muted) !important;
}
[data-theme="dark"] .pg-api .btn.btn-default.m-t {
  background: var(--c-surface2) !important;
  border-color: var(--c-border2) !important;
  color: var(--pk) !important;
}
[data-theme="dark"] .pg-api .btn.btn-default.m-t:hover {
  background: var(--pk-soft) !important;
  border-color: var(--pk) !important;
}

/* ============================================================
   CHILD PANEL ORDER PAGE  (scope: .pg-childpanelorder)
   ============================================================ */
/* ===== WELL / CARD ===== */
.pg-childpanelorder .well {
  background: #fff !important;
  border: 1px solid var(--pink-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 2px 16px rgba(244, 52, 111, 0.08) !important;
  padding: 24px !important;
}
/* ===== FORM LABELS ===== */
.pg-childpanelorder .form-group label.control-label {
  font-weight: 700;
  color: #222;
  font-size: 13.5px;
  margin-bottom: 7px;
  display: block;
}
/* ===== INPUTS & SELECTS ===== */
.pg-childpanelorder .form-control {
  border-radius: var(--input-radius) !important;
  border: 1.5px solid var(--pink-border) !important;
  background: #fff !important;
  color: #333 !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  height: 48px !important;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: none !important;
}
.pg-childpanelorder .form-control:focus {
  border-color: var(--pink-primary) !important;
  box-shadow: 0 0 0 3px rgba(244, 52, 111, 0.10) !important;
  outline: none !important;
}
.pg-childpanelorder select.form-control {
  cursor: pointer;
  appearance: auto;
}
/* ===== ALERTS ===== */
.pg-childpanelorder .alert-success {
  border-radius: var(--input-radius) !important;
  border-left: 4px solid #38a169 !important;
  background: #f0fff4 !important;
  color: #276749 !important;
  border-color: #9ae6b4 !important;
  font-weight: 600;
}
.pg-childpanelorder .alert-danger {
  border-radius: var(--input-radius) !important;
  border-left: 4px solid #e53e3e !important;
  background: #fff5f5 !important;
  color: #c53030 !important;
  border-color: #feb2b2 !important;
  font-weight: 600;
}
/* ===== SUBMIT BUTTON ===== */
.pg-childpanelorder .btn.btn-primary {
  background: var(--pink-gradient) !important;
  border: none !important;
  border-radius: var(--input-radius) !important;
  height: 52px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  width: 100% !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(244, 52, 111, 0.35) !important;
  transition: transform .15s, box-shadow .15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
}
.pg-childpanelorder .btn.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(244, 52, 111, 0.45) !important;
}
.pg-childpanelorder .btn.btn-primary:active {
  transform: translateY(0) !important;
}
/* ===== PAYMENT HISTORY TABLE ===== */
.pg-childpanelorder .table {
  margin-bottom: 0 !important;
}
.pg-childpanelorder .table thead tr th {
  background: var(--pink-soft) !important;
  color: var(--pink-primary) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  border-bottom: 2px solid var(--pink-border) !important;
  padding: 12px 16px !important;
  white-space: nowrap;
  border-top: none !important;
}
.pg-childpanelorder .table thead tr th:first-child {
  border-radius: var(--input-radius) 0 0 0;
}
.pg-childpanelorder .table thead tr th:last-child {
  border-radius: 0 var(--input-radius) 0 0;
}
.pg-childpanelorder .table tbody tr td {
  padding: 13px 16px !important;
  vertical-align: middle !important;
  font-size: 13.5px !important;
  color: #444 !important;
  border-bottom: 1px solid #fdf0f5 !important;
  border-top: none !important;
}
.pg-childpanelorder .table tbody tr:last-child td {
  border-bottom: none !important;
}
.pg-childpanelorder .table tbody tr:hover td {
  background: var(--pink-soft) !important;
}
/* Amount column */
.pg-childpanelorder .table tbody tr td:nth-child(4) {
  font-weight: 700 !important;
  color: var(--pink-primary) !important;
}
/* Invoice link */
.pg-childpanelorder .table tbody tr td a {
  color: var(--pink-primary) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  background: var(--pink-soft);
  border: 1.5px solid var(--pink-border);
  border-radius: 8px;
  padding: 5px 12px;
  transition: background .2s, border-color .2s;
  display: inline-block;
}
.pg-childpanelorder .table tbody tr td a:hover {
  background: var(--pink-border) !important;
  border-color: var(--pink-primary) !important;
}
.pg-childpanelorder .nowrap {
  white-space: nowrap;
}
/* ===== PAGINATION ===== */
.pg-childpanelorder .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  margin: 16px 0 4px;
}
.pg-childpanelorder .pagination > li > a, .pg-childpanelorder .pagination > li > span {
  border-radius: 8px !important;
  border: 1.5px solid var(--pink-border) !important;
  color: var(--pink-primary) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding: 6px 13px !important;
  background: #fff !important;
  transition: all .15s !important;
  line-height: 1.5 !important;
}
.pg-childpanelorder .pagination > li > a:hover {
  background: var(--pink-soft) !important;
  border-color: var(--pink-primary) !important;
}
.pg-childpanelorder .pagination > li.active > a, .pg-childpanelorder .pagination > li.active > span {
  background: var(--pink-gradient) !important;
  border-color: var(--pink-primary) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(244, 52, 111, 0.3) !important;
}
.pg-childpanelorder .pagination > li.disabled > a {
  color: #ccc !important;
  border-color: #eee !important;
  background: #fafafa !important;
  cursor: not-allowed;
}
/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .pg-childpanelorder .well {
    padding: 16px !important;
  }
  .pg-childpanelorder .btn.btn-primary {
    height: 48px !important;
    font-size: 14px !important;
  }
  .pg-childpanelorder .table thead tr th, .pg-childpanelorder .table tbody tr td {
    padding: 10px 10px !important;
    font-size: 12.5px !important;
  }
}
/* ===== DARK MODE ===== */
[data-theme="dark"] .pg-childpanelorder .well {
  background: var(--c-surface) !important;
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-childpanelorder .form-group label.control-label { color: var(--c-text) !important; }
[data-theme="dark"] .pg-childpanelorder .form-control {
  background: var(--c-surface2) !important;
  border-color: var(--c-border2) !important;
  color: var(--c-text) !important;
}
[data-theme="dark"] .pg-childpanelorder .alert-success {
  background: rgba(56, 161, 105, 0.12) !important;
  color: #68d391 !important;
  border-color: rgba(56, 161, 105, 0.3) !important;
}
[data-theme="dark"] .pg-childpanelorder .alert-danger {
  background: rgba(229, 62, 62, 0.12) !important;
  color: #fc8181 !important;
  border-color: rgba(229, 62, 62, 0.3) !important;
}
[data-theme="dark"] .pg-childpanelorder .table thead tr th {
  background: var(--pk-soft) !important;
  border-bottom-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-childpanelorder .table tbody tr td {
  color: var(--c-text) !important;
  border-bottom-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-childpanelorder .table tbody tr:hover td { background: var(--pk-soft) !important; }
[data-theme="dark"] .pg-childpanelorder .table tbody tr td a {
  background: var(--pk-soft) !important;
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-childpanelorder .table tbody tr td a:hover {
  background: var(--pk-bdr) !important;
  border-color: var(--pk) !important;
}
[data-theme="dark"] .pg-childpanelorder .pagination > li > a,
[data-theme="dark"] .pg-childpanelorder .pagination > li > span {
  background: var(--c-surface2) !important;
  border-color: var(--c-border2) !important;
  color: var(--pk) !important;
}
[data-theme="dark"] .pg-childpanelorder .pagination > li.disabled > a {
  background: var(--c-surface2) !important;
  border-color: var(--c-border) !important;
  color: var(--c-subtle) !important;
}

/* ============================================================
   NOTIFICATIONS PAGE  (scope: .pg-notifications)
   ============================================================ */
/* ===== TABS ===== */
.pg-notifications .nav.nav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px !important;
  background: #fff;
  border: 1px solid var(--pink-border);
  border-radius: var(--card-radius);
  padding: 10px 14px;
  box-shadow: 0 2px 12px rgba(244, 52, 111, 0.07);
}
.pg-notifications .nav.nav-pills > li > a {
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #666 !important;
  padding: 8px 18px !important;
  background: transparent !important;
  border: 1.5px solid transparent !important;
  transition: all .15s !important;
}
.pg-notifications .nav.nav-pills > li > a:hover {
  background: var(--pink-soft) !important;
  color: var(--pink-primary) !important;
  border-color: var(--pink-border) !important;
}
.pg-notifications .nav.nav-pills > li.active > a, .pg-notifications .nav.nav-pills > li.active > a:hover, .pg-notifications .nav.nav-pills > li.active > a:focus {
  background: var(--pink-gradient) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 3px 10px rgba(244, 52, 111, 0.3) !important;
}
/* ===== WELL / CARD ===== */
.pg-notifications .well {
  background: #fff !important;
  border: 1px solid var(--pink-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 2px 16px rgba(244, 52, 111, 0.08) !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
}
/* Section headings inside wells */
.pg-notifications .well h5 {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  margin: 0 0 10px !important;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--pink-border);
}
.pg-notifications .well p {
  font-size: 13.5px;
  color: #666;
  line-height: 1.7;
  margin-bottom: 16px;
}
/* ===== ALERTS ===== */
.pg-notifications .alert-success {
  border-radius: var(--input-radius) !important;
  border-left: 4px solid #38a169 !important;
  background: #f0fff4 !important;
  color: #276749 !important;
  border-color: #9ae6b4 !important;
  font-weight: 600;
  margin-bottom: 16px !important;
}
.pg-notifications .alert-danger {
  border-radius: var(--input-radius) !important;
  border-left: 4px solid #e53e3e !important;
  background: #fff5f5 !important;
  color: #c53030 !important;
  border-color: #feb2b2 !important;
  font-weight: 600;
  margin-bottom: 16px !important;
}
/* ===== BUTTONS ===== */
.pg-notifications .btn.btn-primary {
  background: var(--pink-gradient) !important;
  border: none !important;
  border-radius: var(--input-radius) !important;
  height: 50px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  color: #fff !important;
  box-shadow: 0 5px 18px rgba(244, 52, 111, 0.32) !important;
  transition: transform .15s, box-shadow .15s !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  width: auto !important;
}
.pg-notifications .btn.btn-primary.btn-block {
  width: 100% !important;
  display: flex !important;
}
.pg-notifications .btn.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(244, 52, 111, 0.42) !important;
}
.pg-notifications .btn.btn-primary:active {
  transform: translateY(0) !important;
}
/* ===== NOTIFICATIONS TABLE ===== */
.pg-notifications .table {
  margin-bottom: 16px !important;
}
.pg-notifications .table thead tr th {
  background: var(--pink-soft) !important;
  color: var(--pink-primary) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: 2px solid var(--pink-border) !important;
  border-top: none !important;
  padding: 12px 16px !important;
  white-space: nowrap;
}
.pg-notifications .table thead tr th:first-child {
  border-radius: var(--input-radius) 0 0 0;
}
.pg-notifications .table thead tr th:last-child {
  border-radius: 0 var(--input-radius) 0 0;
}
.pg-notifications .table tbody tr td {
  padding: 13px 16px !important;
  vertical-align: middle !important;
  font-size: 13.5px !important;
  color: #444 !important;
  border-bottom: 1px solid #fdf0f5 !important;
  border-top: none !important;
}
.pg-notifications .table tbody tr:last-child td {
  border-bottom: none !important;
}
.pg-notifications .table tbody tr:hover td {
  background: var(--pink-soft) !important;
}
/* Notification name column */
.pg-notifications .table tbody tr td:first-child {
  font-weight: 600 !important;
  color: #222 !important;
}
/* ===== CUSTOM CHECKBOXES ===== */
.pg-notifications .table tbody tr td input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--pink-border);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: border-color .15s, background .15s;
  vertical-align: middle;
  flex-shrink: 0;
}
.pg-notifications .table tbody tr td input[type="checkbox"]:checked {
  background: var(--pink-gradient) !important;
  border-color: var(--pink-primary) !important;
}
.pg-notifications .table tbody tr td input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.pg-notifications .table tbody tr td input[type="checkbox"]:hover:not(:disabled) {
  border-color: var(--pink-primary);
  box-shadow: 0 0 0 3px rgba(244, 52, 111, 0.10);
}
.pg-notifications .table tbody tr td input[type="checkbox"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .pg-notifications .well {
    padding: 18px !important;
  }
  .pg-notifications .table thead tr th, .pg-notifications .table tbody tr td {
    padding: 10px 12px !important;
    font-size: 12.5px !important;
  }
}
/* ===== DARK MODE ===== */
[data-theme="dark"] .pg-notifications .nav.nav-pills {
  background: var(--c-surface) !important;
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-notifications .nav.nav-pills > li > a { color: var(--c-muted) !important; }
[data-theme="dark"] .pg-notifications .well {
  background: var(--c-surface) !important;
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-notifications .well h5 {
  color: var(--c-text) !important;
  border-bottom-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-notifications .well p { color: var(--c-muted) !important; }
[data-theme="dark"] .pg-notifications .alert-success {
  background: rgba(56, 161, 105, 0.12) !important;
  color: #68d391 !important;
  border-color: rgba(56, 161, 105, 0.3) !important;
}
[data-theme="dark"] .pg-notifications .alert-danger {
  background: rgba(229, 62, 62, 0.12) !important;
  color: #fc8181 !important;
  border-color: rgba(229, 62, 62, 0.3) !important;
}
[data-theme="dark"] .pg-notifications .table thead tr th {
  background: var(--pk-soft) !important;
  border-bottom-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-notifications .table tbody tr td {
  color: var(--c-text) !important;
  border-bottom-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-notifications .table tbody tr:hover td { background: var(--pk-soft) !important; }
[data-theme="dark"] .pg-notifications .table tbody tr td:first-child { color: var(--c-text) !important; }
[data-theme="dark"] .pg-notifications .table tbody tr td input[type="checkbox"] {
  border-color: var(--c-border2);
  background: var(--c-surface2);
}

/* ============================================================
   ORDERS PAGE  (scope: .pg-orders)
   ============================================================ */
/* ===== STATUS FILTER TABS ===== */
.pg-orders .nav.nav-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--pink-border);
  border-radius: var(--card-radius);
  padding: 10px 14px;
  margin-bottom: 20px !important;
  box-shadow: 0 2px 12px rgba(244, 52, 111, 0.07);
}
/* Kill Bootstrap 3 clear floats that break modern flexbox layout */
.pg-orders .nav.nav-pills::before, .pg-orders .nav.nav-pills::after {
  display: none !important;
}
.pg-orders .nav.nav-pills > li {
  float: none !important;
  display: inline-block;
}
.pg-orders .nav.nav-pills > li > a {
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #666 !important;
  padding: 7px 14px !important;
  background: transparent !important;
  border: 1.5px solid transparent !important;
  transition: all .15s !important;
  white-space: nowrap;
  display: block;
}
.pg-orders .nav.nav-pills > li > a:hover {
  background: var(--pink-soft) !important;
  color: var(--pink-primary) !important;
  border-color: var(--pink-border) !important;
}
.pg-orders .nav.nav-pills > li.active > a, .pg-orders .nav.nav-pills > li.active > a:hover, .pg-orders .nav.nav-pills > li.active > a:focus {
  background: var(--pink-gradient) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 3px 10px rgba(244, 52, 111, 0.3) !important;
}
/* ===== SEARCH ===== */
.pg-orders .nav.nav-pills > li.search-container {
  margin-left: auto !important;
  float: none !important;
}
.pg-orders .nav.nav-pills li.search-container .input-group .form-control {
  border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
  border: 1.5px solid var(--pink-border) !important;
  border-right: none !important;
  height: 38px !important;
  font-size: 13px !important;
  color: #333 !important;
  background: #fff !important;
  box-shadow: none !important;
  padding: 6px 12px !important;
}
.pg-orders .nav.nav-pills li.search-container .btn.btn-default {
  border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
  border: 1.5px solid var(--pink-border) !important;
  border-left: none !important;
  background: #fff !important;
  color: var(--pink-primary) !important;
  height: 38px !important;
  padding: 0 14px !important;
}
/* ===== FIXED CONTAINER + HORIZONTAL SCROLL ===== */
.pg-orders .well.well-float {
  background: #fff !important;
  border: 1px solid var(--pink-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 2px 16px rgba(244, 52, 111, 0.08) !important;
  margin-bottom: 24px !important;
  position: relative;
  width: 100%;
  overflow: visible !important;
  clear: both !important;
}
/* ===== TABLE — fixed layout, fits full desktop width ===== */
.pg-orders .table {
  margin-bottom: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed;
  background: #fff;
}
.pg-orders .table thead tr th {
  background: var(--pink-soft) !important;
  color: var(--pink-primary) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  border-bottom: 2px solid var(--pink-border) !important;
  border-top: none !important;
  padding: 10px 10px !important;
  white-space: nowrap;
  overflow: hidden;
}
.pg-orders .table tbody tr td {
  padding: 10px 10px !important;
  vertical-align: middle !important;
  font-size: 12.5px !important;
  color: #444 !important;
  border-bottom: 1px solid #fdf0f5 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pg-orders .table tbody tr:hover td {
  background: var(--pink-soft) !important;
}
/* ===== COLUMN WIDTHS
   Total ~100%: 60+110+170+72+78+70+auto+100+65+100 = ~825px fixed + Service auto
   ===== */
.pg-orders .table th:nth-child(1), .pg-orders .table td:nth-child(1) { width: 70px; }
/* ID */
.pg-orders .table th:nth-child(2), .pg-orders .table td:nth-child(2) { width: 110px; }
/* Date */
.pg-orders .table th:nth-child(3), .pg-orders .table td:nth-child(3) { width: 170px; }
/* Link */
.pg-orders .table th:nth-child(4), .pg-orders .table td:nth-child(4) { width: 72px; }
/* Charge */
.pg-orders .table th:nth-child(5), .pg-orders .table td:nth-child(5) { width: 78px; }
/* Start Count */
.pg-orders .table th:nth-child(6), .pg-orders .table td:nth-child(6) { width: 70px; }
/* Quantity */
.pg-orders .table th:nth-child(7), .pg-orders .table td:nth-child(7) { width: 200px; }
/* Service — fills remaining */
.pg-orders .table th:nth-child(8), .pg-orders .table td:nth-child(8) { width: 100px; white-space: nowrap; }
/* Status — full text */
.pg-orders .table th:nth-child(9), .pg-orders .table td:nth-child(9) { width: 65px; }
/* Remains */
.pg-orders .table th:nth-child(10), .pg-orders .table td:nth-child(10) { width: 70px; }
/* Actions */
/* Status cell: never truncate */
.pg-orders .table td:nth-child(8) {
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: nowrap !important;
}
/* ===== ORDER LINK — shortened display with tooltip ===== */
.pg-orders .order-link {
  color: var(--pink-primary) !important;
  text-decoration: none !important;
  font-weight: 600;
  transition: all .18s ease;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.pg-orders .order-link:hover {
  color: var(--pink-light) !important;
  text-decoration: underline !important;
}
/* ===== DARK MODE — orders table ===== */
[data-theme="dark"] .pg-orders .nav.nav-pills {
  background: #18181c !important;
  border-color: rgba(232,39,93,.26) !important;
}
[data-theme="dark"] .pg-orders .nav.nav-pills > li > a {
  color: #9090a0 !important;
}
[data-theme="dark"] .pg-orders .well.well-float, [data-theme="dark"] .pg-orders .table {
  background: #18181c !important;
}
[data-theme="dark"] .pg-orders .table thead tr th {
  background: rgba(232,39,93,.10) !important;
  color: #f4346f !important;
  border-bottom-color: rgba(232,39,93,.26) !important;
}
[data-theme="dark"] .pg-orders .table tbody tr td {
  color: #d0d0e0 !important;
  border-bottom-color: rgba(255,255,255,.05) !important;
}
[data-theme="dark"] .pg-orders .table tbody tr:hover td {
  background: rgba(232,39,93,.07) !important;
}
[data-theme="dark"] .pg-orders .btn.btn-xs.btn-default {
  background: #222228 !important;
  border-color: rgba(232,39,93,.26) !important;
  color: #9090a0 !important;
}
[data-theme="dark"] .pg-orders .nav.nav-pills li.search-container .input-group .form-control {
  background: #18181c !important;
  border-color: rgba(232,39,93,.26) !important;
  color: #f0f0f8 !important;
}
[data-theme="dark"] .pg-orders .nav.nav-pills li.search-container .btn.btn-default {
  background: #18181c !important;
  border-color: rgba(232,39,93,.26) !important;
}
[data-theme="dark"] .pg-orders .pagination > li > a, [data-theme="dark"] .pg-orders .pagination > li > span {
  background: #18181c !important;
  border-color: rgba(232,39,93,.26) !important;
  color: #9090a0 !important;
}
/* ===== STATUS BADGE ===== */
.pg-orders .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.pg-orders .status-badge.s-completed { background: #edfbf3; color: #16a34a; }
.pg-orders .status-badge.s-pending { background: #fff7ed; color: #d97706; }
.pg-orders .status-badge.s-inprogress { background: #eff6ff; color: #2563eb; }
.pg-orders .status-badge.s-partial { background: #fdf4ff; color: #9333ea; }
.pg-orders .status-badge.s-canceled { background: #fef2f2; color: #dc2626; }
.pg-orders .status-badge.s-processing { background: var(--pink-soft); color: var(--pink-primary); }
.pg-orders .status-badge.s-default { background: #f3f4f6; color: #6b7280; }
/* ===== BUTTONS ===== */
.pg-orders .btn.btn-xs.btn-primary {
  background: var(--pink-gradient) !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
  color: #fff !important;
}
.pg-orders .btn.btn-xs.btn-default {
  background: #fff !important;
  border: 1.5px solid var(--pink-border) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
  color: #666 !important;
}
/* ===== ORDER ACTIONS ===== */
.pg-orders .order-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
/* ===== PAGINATION ===== */
.pg-orders .pagination-wrapper {
  width: 100% !important;
  clear: both !important;
  display: flex !important;
  justify-content: center !important;
  position: relative !important;
  margin-top: 20px !important;
}
.pg-orders .pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pg-orders .pagination::before, .pg-orders .pagination::after {
  display: none !important;
}
.pg-orders .pagination > li {
  display: inline-block !important;
  float: none !important;
}
.pg-orders .pagination > li > a, .pg-orders .pagination > li > span {
  min-width: 38px;
  height: 38px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  border: 1px solid var(--pink-border) !important;
  color: #666 !important;
  font-weight: 600;
  text-decoration: none !important;
  background: #fff !important;
  padding: 0 !important;
}
.pg-orders .pagination > li.active > a, .pg-orders .pagination > li.active > span {
  background: var(--pink-gradient) !important;
  border-color: var(--pink-primary) !important;
  color: #fff !important;
}
/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .pg-orders .nav.nav-pills {
    padding: 8px;
    gap: 5px;
  }
  .pg-orders .nav.nav-pills > li.search-container {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 8px !important;
  }
  .pg-orders .nav.nav-pills li.search-container .input-group {
    width: 100% !important;
  }
  /* On mobile: allow horizontal scroll with readable min-width */
  .pg-orders .well.well-float {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .pg-orders .table {
    min-width: 700px !important;
    table-layout: auto !important;
  }
  /* Mobile: shorten long links */
  .pg-orders .order-link {
    max-width: 140px !important;
    font-size: 11px !important;
  }
  .pg-orders .service {
  max-width: 190px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
  .pg-orders .pagination > li > a, .pg-orders .pagination > li > span {
    min-width: 32px;
    height: 32px;
    font-size: 12px;
    border-radius: 8px !important;
  }
}
.pg-orders .well {
    min-height: 20px;
    padding: 0px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

/* ============================================================
   REFILL PAGE  (scope: .pg-refill)
   ============================================================ */
/* ===== STATUS FILTER TABS ===== */
.pg-refill .nav.nav-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--pink-border);
  border-radius: var(--card-radius);
  padding: 10px 14px;
  margin-bottom: 20px !important;
  box-shadow: 0 2px 12px rgba(244, 52, 111, 0.07);
}
.pg-refill .nav.nav-pills::before, .pg-refill .nav.nav-pills::after {
  display: none !important;
}
.pg-refill .nav.nav-pills > li {
  float: none !important;
  display: inline-block;
}
.pg-refill .nav.nav-pills > li > a {
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #666 !important;
  padding: 7px 14px !important;
  background: transparent !important;
  border: 1.5px solid transparent !important;
  transition: all .15s !important;
  white-space: nowrap;
  display: block;
}
.pg-refill .nav.nav-pills > li > a:hover {
  background: var(--pink-soft) !important;
  color: var(--pink-primary) !important;
  border-color: var(--pink-border) !important;
}
.pg-refill .nav.nav-pills > li.active > a, .pg-refill .nav.nav-pills > li.active > a:hover, .pg-refill .nav.nav-pills > li.active > a:focus {
  background: var(--pink-gradient) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 3px 10px rgba(244, 52, 111, 0.3) !important;
}
/* ===== SEARCH ===== */
.pg-refill .nav.nav-pills > li.search-container {
  margin-left: auto !important;
  float: none !important;
}
.pg-refill .nav.nav-pills li.search-container .input-group .form-control {
  border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
  border: 1.5px solid var(--pink-border) !important;
  border-right: none !important;
  height: 38px !important;
  font-size: 13px !important;
  color: #333 !important;
  background: #fff !important;
  box-shadow: none !important;
  padding: 6px 12px !important;
}
.pg-refill .nav.nav-pills li.search-container .btn.btn-default {
  border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
  border: 1.5px solid var(--pink-border) !important;
  border-left: none !important;
  background: #fff !important;
  color: var(--pink-primary) !important;
  height: 38px !important;
  padding: 0 14px !important;
}
/* ===== FIXED CONTAINER CONTAINER SHELL ===== */
.pg-refill .well.well-float {
  background: #fff !important;
  border: 1px solid var(--pink-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 2px 16px rgba(244, 52, 111, 0.08) !important;
  margin-bottom: 24px !important;
  position: relative;
  width: 100%;
  clear: both !important;
  padding: 0px !important;
}
/* ===== DESKTOP ALIGNMENT STRUCTURAL FIXES ===== */
@media (min-width: 769px) {
  .pg-refill .well.well-float {
    overflow-x: auto !important;
  }
  .pg-refill .refill-log-system .table {
    margin-bottom: 0 !important;
    width: 100%;
    min-width: 1100px; 
    background: #fff;
    table-layout: fixed !important; 
  }
  /* Fixed column proportions for standard desktop layout engines */
  .pg-refill .refill-log-system .table thead tr th:nth-child(1) { width: 100px; }
  /* Refill ID */
  .pg-refill .refill-log-system .table thead tr th:nth-child(2) { width: 160px; }
  /* Date Created */
  .pg-refill .refill-log-system .table thead tr th:nth-child(3) { width: 130px; }
  /* Linked Order ID */
  .pg-refill .refill-log-system .table thead tr th:nth-child(4) { width: 320px; }
  /* Destination URL Link */
  .pg-refill .refill-log-system .table thead tr th:nth-child(5) { width: 250px; }
  /* Target Service Description */
  .pg-refill .refill-log-system .table thead tr th:nth-child(6) { width: 140px; }
  /* System Execution Status */
  .pg-refill .refill-log-system .table thead tr th {
    background: var(--pink-soft) !important;
    color: var(--pink-primary) !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    text-transform: uppercase !important;
    border-bottom: 2px solid var(--pink-border) !important;
    border-top: none !important;
    padding: 14px 12px !important;
  }
  .pg-refill .refill-log-system .table tbody tr td {
    padding: 14px 12px !important;
    vertical-align: middle !important;
    font-size: 13px !important;
    color: #444 !important;
    border-bottom: 1px solid #fdf0f5 !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  /* Allow textual components to break line breaks safely inside fixed layouts */
  .pg-refill .refill-log-system .table tbody tr td:nth-child(4), .pg-refill .refill-log-system .table tbody tr td:nth-child(5) {
    white-space: normal !important;
    word-break: break-all;
  }
  .pg-refill .refill-log-system .table tbody tr:hover td {
    background: var(--pink-soft) !important;
  }
}
/* ===== ANCHOR DATA MAPPING LINKS ===== */
.pg-refill .order-link {
    color: var(--pink-primary) !important;
    text-decoration: none !important;
    font-weight: 600;
    transition: all .18s ease;
    display: inline-block;
    max-width: 100%;

    /* FIX: prevent overflow */
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}
.pg-refill .order-link:hover {
  color: var(--pink-light) !important;
  text-decoration: underline !important;
}
/* ======================================================= */
/* EXCLUSIVE MOBILE CARD CONVERSION LAYOUT ENGINE          */
/* ======================================================= */
@media screen and (max-width: 768px) {
  .pg-refill .nav.nav-pills { padding: 8px; gap: 5px; }
  .pg-refill .nav.nav-pills > li.search-container { width: 100% !important; margin-left: 0 !important; margin-top: 8px !important; }
  .pg-refill .nav.nav-pills li.search-container .input-group { width: 100% !important; }
  /* Deconstruct container wells to isolate card structures */
  .pg-refill .well.well-float {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  /* Dissolve table constraints into clean stackable vertical structures */
  .pg-refill .refill-log-system .table, .pg-refill .refill-log-system .table tbody, .pg-refill .refill-log-system .table tr {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
  }
  /* Erase traditional horizontal row headers on mobile views */
  .pg-refill .refill-log-system .table thead {
    display: none !important;
  }
  /* Structural Card Component Rule Sets */
  .pg-refill .refill-log-system .table tbody tr {
    background: #fff !important;
    border: 1px solid var(--pink-border) !important;
    border-radius: var(--card-radius) !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 4px 12px rgba(244, 52, 111, 0.04) !important;
    position: relative !important;
  }
  .pg-refill .refill-log-system .table tbody tr td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    white-space: normal !important;
    text-align: left !important;
  }
  /* Card Badge Header: Refill Task ID Data Mapping */
  .pg-refill .refill-log-system .table tbody tr td:nth-child(1) {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--pink-primary) !important;
    background: var(--pink-soft) !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    width: auto !important;
    margin-bottom: 12px !important;
  }
  .pg-refill .refill-log-system .table tbody tr td:nth-child(1)::before { content: "Refill ID #"; }
  /* Card Absolute Alignment Timestamp Placements */
  .pg-refill .refill-log-system .table tbody tr td:nth-child(2) {
    position: absolute !important;
    top: 20px !important;
    right: 16px !important;
    width: auto !important;
    font-size: 12px !important;
    color: #888 !important;
  }
  /* Service Category Title Text Block Descriptions */
  .pg-refill .refill-log-system .table tbody tr td:nth-child(5) {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #222 !important;
    line-height: 1.4 !important;
    margin-bottom: 14px !important;
    margin-top: 4px !important;
  }
  /* Card Destination URL Parameter Box Row */
  .pg-refill .refill-log-system .table tbody tr td:nth-child(4) {
    background: #fafafa !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    margin-bottom: 14px !important;
    font-size: 12.5px !important;
    border: 1px solid #f3f3f3 !important;
  }
  .pg-refill .refill-log-system .table tbody tr td:nth-child(4)::before {
    content: "Link: ";
    font-weight: 700;
    color: #777;
  }
  /* Linked Core Order ID Segment Block Mapping Rules */
  .pg-refill .refill-log-system .table tbody tr td:nth-child(3) {
    display: block !important;
    margin-bottom: 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }
  .pg-refill .refill-log-system .table tbody tr td:nth-child(3)::before {
    content: "Source Order: #";
    font-weight: 700 !important;
    color: #999 !important;
  }
  .pg-refill .refill-log-system .table tbody tr td:nth-child(3) a {
    color: var(--pink-primary) !important;
    text-decoration: none;
  }
  /* Card Dynamic System Status Field Component */
  .pg-refill .refill-log-system .table tbody tr td:nth-child(6) {
    border-top: 1px dashed var(--pink-border) !important;
    padding-top: 12px !important;
    margin-top: 4px !important;
    font-weight: 700 !important;
    color: var(--pink-primary) !important;
    font-size: 12px !important;
    text-transform: uppercase;
  }
  .pg-refill .refill-log-system .table tbody tr td:nth-child(6)::before {
    content: "Execution Status: ";
    color: #666 !important;
    font-weight: 500 !important;
    text-transform: none !important;
  }
}
/* ===== PAGINATION ENGINE ===== */
.pg-refill .pagination-wrapper {
  width: 100% !important;
  clear: both !important;
  display: flex !important;
  justify-content: center !important;
  position: relative !important;
  margin-top: 20px !important;
}
.pg-refill .pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pg-refill .pagination::before, .pg-refill .pagination::after { display: none !important; }
.pg-refill .pagination > li { display: inline-block !important; float: none !important; }
.pg-refill .pagination > li > a, .pg-refill .pagination > li > span {
  min-width: 38px;
  height: 38px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  border: 1px solid var(--pink-border) !important;
  color: #666 !important;
  font-weight: 600;
  text-decoration: none !important;
  background: #fff !important;
  padding: 0 !important;
}
.pg-refill .pagination > li.active > a, .pg-refill .pagination > li.active > span {
  background: var(--pink-gradient) !important;
  border-color: var(--pink-primary) !important;
  color: #fff !important;
}
.pg-refill .pagination > li.disabled > span, .pg-refill .pagination > li.disabled > a {
  color: #ccc !important;
  border-color: #eee !important;
  background: #fafafa !important;
  cursor: not-allowed !important;
}

/* ============================================================
   REFUNDS PAGE  (scope: .pg-refunds)
   ============================================================ */
/* ===== STATUS FILTER TABS ===== */
.pg-refunds .nav.nav-pills {
  display: flex;
  gap: 6px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--pink-border);
  border-radius: var(--card-radius);
  padding: 10px 14px;
  margin-bottom: 16px !important;
  box-shadow: 0 2px 12px rgba(244, 52, 111, 0.07);
}
/* Kill Bootstrap 3 clear floats that break modern flexbox layout */
.pg-refunds .nav.nav-pills::before, .pg-refunds .nav.nav-pills::after {
  display: none !important;
}
.pg-refunds .nav.nav-pills > li {
  float: none !important;
  display: inline-block;
}
.pg-refunds .nav.nav-pills > li > a {
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #666 !important;
  padding: 7px 14px !important;
  background: transparent !important;
  border: 1.5px solid transparent !important;
  transition: all .15s !important;
  white-space: nowrap;
  display: block;
}
.pg-refunds .nav.nav-pills > li > a:hover {
  background: var(--pink-soft) !important;
  color: var(--pink-primary) !important;
  border-color: var(--pink-border) !important;
}
.pg-refunds .nav.nav-pills > li.active > a, .pg-refunds .nav.nav-pills > li.active > a:hover, .pg-refunds .nav.nav-pills > li.active > a:focus {
  background: var(--pink-gradient) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 3px 10px rgba(244, 52, 111, 0.3) !important;
}
/* ===== SEARCH ===== */
.pg-refunds .nav.nav-pills > li.search-container {
  margin-left: auto !important;
  float: none !important;
}
.pg-refunds .nav.nav-pills li.search-container .input-group .form-control {
  border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
  border: 1.5px solid var(--pink-border) !important;
  border-right: none !important;
  height: 38px !important;
  font-size: 13px !important;
  color: #333 !important;
  background: #fff !important;
  box-shadow: none !important;
  padding: 6px 12px !important;
}
.pg-refunds .nav.nav-pills li.search-container .btn.btn-default {
  border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
  border: 1.5px solid var(--pink-border) !important;
  border-left: none !important;
  background: #fff !important;
  color: var(--pink-primary) !important;
  height: 38px !important;
  padding: 0 14px !important;
}
/* ===== FIXED CONTAINER + HORIZONTAL SCROLL ===== */
.pg-refunds .well.well-float {
  background: #fff !important;
  border: 1px solid var(--pink-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 2px 16px rgba(244, 52, 111, 0.08) !important;
  margin-bottom: 24px !important;
  position: relative;
  width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  clear: both !important;
}
/* SWIPE MESSAGE */
.pg-refunds .well.well-float::before {
  content: "☝ Swipe left to see all columns ↔";
  display: none;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--pink-primary);
  background: #fff7fa;
  padding: 12px;
  border-bottom: 1px solid var(--pink-border);
  position: sticky;
  left: 0;
  z-index: 5;
}
/* CUSTOM SCROLLBAR */
.pg-refunds .well.well-float::-webkit-scrollbar {
  height: 6px;
}
.pg-refunds .well.well-float::-webkit-scrollbar-thumb {
  background: rgba(244, 52, 111, 0.4);
  border-radius: 20px;
}
.pg-refunds .well.well-float::-webkit-scrollbar-track {
  background: transparent;
}
/* ===== TABLE ===== */
.pg-refunds .table {
  margin-bottom: 0 !important;
  min-width: 1250px;
  width: max-content;
  background: #fff;
}
.pg-refunds .table thead tr th {
  background: var(--pink-soft) !important;
  color: var(--pink-primary) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  border-bottom: 2px solid var(--pink-border) !important;
  border-top: none !important;
  padding: 14px !important;
  white-space: nowrap;
}
.pg-refunds .table tbody tr td {
  padding: 14px !important;
  vertical-align: middle !important;
  font-size: 13px !important;
  color: #444 !important;
  border-bottom: 1px solid #fdf0f5 !important;
  white-space: nowrap;
}
.pg-refunds .table tbody tr:hover td {
  background: var(--pink-soft) !important;
}
/* ===== ORDER LINK ===== */
.pg-refunds .order-link {
  color:var(--pink-primary) !important;
  text-decoration:none !important;
  font-weight:600;
  transition:all .18s ease;
}
.pg-refunds .order-link:hover {
  color:var(--pink-light) !important;
  text-decoration:underline !important;
}
/* ===== WIDTH ===== */
.pg-refunds .table .width-40 {
  min-width: 260px;
  max-width: 260px;
  word-break: break-all;
  white-space: normal !important;
}
.pg-refunds .nowrap {
  white-space: nowrap;
}
/* ===== BUTTONS ===== */
.pg-refunds .btn.btn-xs.btn-primary {
  background: var(--pink-gradient) !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
  color: #fff !important;
}
.pg-refunds .btn.btn-xs.btn-default {
  background: #fff !important;
  border: 1.5px solid var(--pink-border) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
  color: #666 !important;
}
/* ===== ORDER ACTIONS ===== */
.pg-refunds .order-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
}
/* ===== PAGINATION ===== */
/* ===== PAGINATION ===== */
.pg-refunds .pagination {
  display:flex !important;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;

  padding:0 !important;
  margin:24px 0 16px !important;

  width:100%;
}
.pg-refunds .pagination > li {
  display:flex !important;
  align-items:center;
}
.pg-refunds .pagination > li > a, .pg-refunds .pagination > li > span {

  min-width:40px;
  height:40px;

  display:flex !important;
  align-items:center;
  justify-content:center;

  padding:0 14px !important;

  line-height:1 !important;
}
.pg-refunds .pagination > li.active > a {
  transform:translateY(-1px);
}
.pg-refunds .pagination > li:first-child a, .pg-refunds .pagination > li:last-child a {
  font-size:16px !important;
}
.pg-refunds .pagination > li > a:hover {
  background: var(--pink-soft) !important;
  border-color: var(--pink-primary) !important;
}
.pg-refunds .pagination > li.active > a, .pg-refunds .pagination > li.active > span {
  background: var(--pink-gradient) !important;
  border-color: var(--pink-primary) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(244, 52, 111, 0.3) !important;
}
.pg-refunds .pagination > li.disabled > a {
  color: #ccc !important;
  border-color: #eee !important;
  background: #fafafa !important;
  cursor: not-allowed;
}
/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .pg-refunds .well.well-float::before {
    display: block;
  }
  .pg-refunds .nav.nav-pills {
    padding: 8px;
    gap: 5px;
  }
  .pg-refunds .nav.nav-pills > li.search-container {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 8px !important;
  }
  .pg-refunds .nav.nav-pills li.search-container .input-group {
    width: 100% !important;
  }
  .pg-refunds .table {
    min-width: 1200px;
  }
  .pg-refunds .well {
    min-height: 20px;
    padding: 0px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
}
/* ===== DARK MODE ===== */
[data-theme="dark"] .pg-refunds .nav.nav-pills {
  background: var(--c-surface) !important;
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-refunds .nav.nav-pills > li > a { color: var(--c-muted) !important; }
[data-theme="dark"] .pg-refunds .nav.nav-pills li.search-container .input-group .form-control {
  background: var(--c-surface2) !important;
  border-color: var(--c-border2) !important;
  color: var(--c-text) !important;
}
[data-theme="dark"] .pg-refunds .nav.nav-pills li.search-container .btn.btn-default {
  background: var(--c-surface2) !important;
  border-color: var(--c-border2) !important;
  color: var(--pk) !important;
}
[data-theme="dark"] .pg-refunds .well.well-float {
  background: var(--c-surface) !important;
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-refunds .well.well-float::before {
  background: rgba(232,39,93,.08) !important;
  border-bottom-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-refunds .table { background: var(--c-surface) !important; }
[data-theme="dark"] .pg-refunds .table thead tr th {
  background: var(--pk-soft) !important;
  border-bottom-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-refunds .table tbody tr td {
  color: var(--c-text) !important;
  border-bottom-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-refunds .table tbody tr:hover td { background: var(--pk-soft) !important; }
[data-theme="dark"] .pg-refunds .btn.btn-xs.btn-default {
  background: var(--c-surface2) !important;
  border-color: var(--c-border2) !important;
  color: var(--c-muted) !important;
}
[data-theme="dark"] .pg-refunds .pagination > li > a,
[data-theme="dark"] .pg-refunds .pagination > li > span {
  background: var(--c-surface2) !important;
  border-color: var(--c-border2) !important;
  color: var(--pk) !important;
}
[data-theme="dark"] .pg-refunds .pagination > li.disabled > a {
  background: var(--c-surface2) !important;
  border-color: var(--c-border) !important;
  color: var(--c-subtle) !important;
}
@media (max-width: 768px) {
  [data-theme="dark"] .pg-refunds .well {
    background-color: var(--c-surface2) !important;
    border-color: var(--c-border2) !important;
  }
}

/* ============================================================
   SERVICES PAGE  (scope: .pg-services)
   ============================================================ */
/* ======================================= */
/* GENERAL STRUCTURAL SAFETY CONFIGS       */
/* ======================================= */
.pg-services .container {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  box-sizing: border-box !important;
}
.pg-services .well.well-float {
  background: #fff !important;
  border: 1px solid var(--pink-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 2px 16px rgba(244, 52, 111, 0.08) !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
  width: 100% !important;
}
/* ======================================= */
/* DROPDOWN FILTER LAYOUT                  */
/* ======================================= */
.pg-services .nav.nav-pills {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid var(--pink-border);
  border-radius: var(--card-radius);
  padding: 12px;
  margin-bottom: 16px !important;
  list-style: none;
  gap: 10px;
}
.pg-services .nav.nav-pills li { display: inline-block; }
.pg-services .nav.nav-pills .btn.btn-primary {
  background: var(--pink-gradient) !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 700 !important;
  height: 42px !important;
  padding: 0 16px !important;
  box-shadow: 0 5px 16px rgba(244,52,111,.25);
}
.pg-services .nav.nav-pills .dropdown-menu {
  border-radius: 14px !important;
  border: 1px solid var(--pink-border) !important;
  width: 320px !important;
  max-height: 400px !important;
  overflow-y: auto !important;
  background-color: #fff !important;
  box-shadow: 0 6px 12px rgba(0,0,0,.175) !important;
  padding: 6px 0 !important;
  margin-top: 5px !important;
}
.pg-services .nav.nav-pills .dropdown-menu li {
  display: block !important;
  width: 100% !important;
  float: none !important;
}
.pg-services .nav.nav-pills .dropdown-menu li a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  color: #333 !important;
  text-decoration: none !important;
  white-space: normal !important; 
  word-break: break-word !important;
  border-bottom: 1px solid #fff5f8 !important;
  transition: all 0.2s ease;
}
.pg-services .nav.nav-pills .dropdown-menu li:last-child a {
  border-bottom: none !important;
}
.pg-services .nav.nav-pills .dropdown-menu li a:hover {
  background-color: var(--pink-soft) !important;
  color: var(--pink-primary) !important;
}
.pg-services .nav.nav-pills .dropdown-menu li a span i, .pg-services .nav.nav-pills .dropdown-menu li a span.fal, .pg-services .nav.nav-pills .dropdown-menu li a span.fas, .pg-services .nav.nav-pills .dropdown-menu li a span.far {
  color: var(--pink-primary) !important;
  font-size: 14px !important;
  width: 18px;
  text-align: center;
}
.pg-services .nav.nav-pills > li.search { margin-left: auto; }
.pg-services .nav.nav-pills .input-group { width: 260px; }
.pg-services .nav.nav-pills .form-control {
  border: 1px solid var(--pink-border) !important;
  box-shadow: none !important;
  height: 42px !important;
  border-radius: 12px 0 0 12px !important;
}
.pg-services .nav.nav-pills .btn.btn-default {
  border: 1px solid var(--pink-border) !important;
  border-left: none !important;
  background: #fff !important;
  color: var(--pink-primary) !important;
  border-radius: 0 12px 12px 0 !important;
  height: 42px !important;
}
/* ======================================= */
/* DESKTOP VIEW STYLING                    */
/* ======================================= */
.pg-services .mobile-services-view { display: none; }
.pg-services .desktop-table-view { display: block; width: 100% !important; }
.pg-services .table {
  width: 100% !important;
  margin-bottom: 0 !important;
  background: #fff !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
}
.pg-services .col-favorite { width: 45px; text-align: center; }
.pg-services .col-id { width: 70px; text-align: center; }
.pg-services .col-name { width: auto; min-width: 320px; }
.pg-services .col-rate { width: 130px; }
.pg-services .col-min { width: 120px; }
.pg-services .col-max { width: 120px; }
.pg-services .col-time { width: 150px; }
.pg-services .col-desc { width: 110px; text-align: center; }
.pg-services .table thead tr th {
  background: #fff5f9 !important;
  color: var(--pink-primary) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  border-bottom: 2px solid var(--pink-border) !important;
  padding: 14px !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}
.pg-services .table tbody tr td {
  padding: 12px 14px !important;
  font-size: 13px !important;
  color: #444 !important;
  border-bottom: 1px solid #fff0f5 !important;
  vertical-align: middle !important;
}
.pg-services .table tbody tr:hover td { background: #fff8fb !important; }
.pg-services .table tbody tr.desktop-category-banner-row td[colspan] {
  background: linear-gradient(135deg, #fff0f5 0%, #ffe7f1 100%) !important;
  border-top: 1px solid var(--pink-border) !important;
  border-bottom: 1px solid var(--pink-border) !important;
  padding: 12px 16px !important;
}
.pg-services .category-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--pink-primary) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}
.pg-services .category-title-wrap span i, .pg-services .category-title-wrap span.fal, .pg-services .category-title-wrap span.fas, .pg-services .category-title-wrap span.far {
  font-size: 14px !important;
}
.pg-services .service-name {
  font-weight: 500 !important;
  color: #222 !important;
  white-space: normal !important;
  word-break: break-word;
}
.pg-services .rate-text { color: var(--pink-primary) !important; font-weight: 700 !important; }
.pg-services .btn-desc-eye {
  background: #fff0f5 !important;
  border: 1px solid var(--pink-border) !important;
  border-radius: 8px !important;
  color: var(--pink-primary) !important;
  padding: 5px 10px !important;
  cursor: pointer;
}
.pg-services .btn-desc-eye:hover { background: var(--pink-primary) !important; color: #fff !important; }
.pg-services .description-row td {
  background: #fafafa !important;
  padding: 15px 20px !important;
  font-size: 13px !important;
  line-height: 1.5;
  color: #555;
  border-bottom: 1px solid var(--pink-border) !important;
}
.pg-services [data-favorite-service-id] { cursor: pointer; font-size: 15px; color: #cfcfcf; }
.pg-services .favorite-active [data-favorite-icon], .pg-services [data-favorite-icon].fas.fa-star { color: #f6c90e !important; }
/* ======================================================== */
/* PREMIUM APP MOBILE VIEW GRID DISPLAY                     */
/* ======================================================== */
@media (max-width: 767px) {
  .pg-services { overflow-x: hidden !important; }
  .pg-services .desktop-table-view { display: none !important; }
  .pg-services .mobile-services-view { display: block !important; width: 100% !important; }
  .pg-services .nav.nav-pills { padding: 10px !important; }
  .pg-services .nav.nav-pills > li.search { width: 100% !important; margin-left: 0 !important; margin-top: 6px; }
  .pg-services .nav.nav-pills .input-group { width: 100% !important; }
  .pg-services .nav.nav-pills .dropdown-menu { width: 100% !important; max-width: 100% !important; }
  .pg-services .smm-mobile-category-banner {
    background: linear-gradient(135deg, #fff0f5 0%, #ffe7f1 100%) !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--pink-border);
    border-top: 1px solid var(--pink-border);
  }
  .pg-services .smm-mobile-category-banner:first-of-type { border-top: none; }
  .pg-services .smm-mobile-card {
    background: #fff;
    padding: 14px;
    border-bottom: 1px solid #fff0f5;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    contain: content;
  }
  .pg-services .smm-mobile-card-top { display: flex; align-items: flex-start; gap: 8px; }
  .pg-services .smm-mobile-id-badge {
    background: #fff0f5;
    color: var(--pink-primary);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
  }
  .pg-services .smm-mobile-title {
    font-size: 13px;
    font-weight: 500;
    color: #222;
    line-height: 1.4;
    flex: 1;
    word-break: break-word;
  }
  .pg-services .smm-mobile-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    background: #fafafa;
    padding: 10px;
    border-radius: 8px;
    margin-top: 4px;
  }
  .pg-services .smm-mobile-meta-item { font-size: 12px; color: #666; }
  .pg-services .smm-mobile-meta-item span { font-weight: 700; color: #333; }
  .pg-services .smm-mobile-meta-item .mob-rate { color: var(--pink-primary) !important; }
  .pg-services .smm-mobile-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 4px;
  }
  .pg-services .smm-mobile-desc-box {
    background: #fff6f9;
    border: 1px dashed var(--pink-border);
    border-radius: 8px;
    padding: 12px;
    font-size: 12px;
    color: #444;
    line-height: 1.5;
    margin-top: 4px;
  }
}
/* ===== DARK MODE ===== */
[data-theme="dark"] .pg-services .well, [data-theme="dark"] .pg-services .panel, [data-theme="dark"] .pg-services .smm-service-card {
  background: #18181c !important;
  border-color: rgba(232,39,93,.26) !important;
}
[data-theme="dark"] .pg-services .smm-category-header {
  background: rgba(232,39,93,.10) !important;
  color: #f4346f !important;
  border-color: rgba(232,39,93,.26) !important;
}
[data-theme="dark"] .pg-services .table {
  background: #18181c !important;
}
[data-theme="dark"] .pg-services .table > thead > tr > th {
  background: rgba(232,39,93,.10) !important;
  color: #f4346f !important;
  border-color: rgba(232,39,93,.26) !important;
}
[data-theme="dark"] .pg-services .table > tbody > tr > td {
  color: #d0d0e0 !important;
  border-color: rgba(255,255,255,.05) !important;
  background: #18181c !important;
}
[data-theme="dark"] .pg-services .table > tbody > tr:hover > td {
  background: rgba(232,39,93,.07) !important;
}
[data-theme="dark"] .pg-services .smm-mobile-card {
  background: #222228 !important;
  border-color: rgba(232,39,93,.26) !important;
}
[data-theme="dark"] .pg-services .smm-mobile-card:hover {
  background: rgba(232,39,93,.10) !important;
}
[data-theme="dark"] .pg-services .smm-service-name {
  color: #f0f0f8 !important;
}
[data-theme="dark"] .pg-services .smm-mobile-meta-item {
  color: #9090a0 !important;
}
[data-theme="dark"] .pg-services .smm-mobile-meta-item span {
  color: #d0d0e0 !important;
}
[data-theme="dark"] .pg-services .smm-desc-box {
  background: #222228 !important;
  border-color: rgba(232,39,93,.20) !important;
  color: #c0c0d0 !important;
}
[data-theme="dark"] .pg-services .smm-category-pill {
  background: #222228 !important;
  border-color: rgba(232,39,93,.26) !important;
  color: #9090a0 !important;
}
[data-theme="dark"] .pg-services .smm-category-pill.active, [data-theme="dark"] .pg-services .smm-category-pill:hover {
  background: rgba(232,39,93,.15) !important;
  color: #f4346f !important;
  border-color: #f4346f !important;
}
/* ---- Services dark mode: well / nav / mobile cards ---- */
[data-theme="dark"] .pg-services .well.well-float {
  background: var(--c-surface) !important;
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-services .nav.nav-pills {
  background: var(--c-surface2) !important;
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-services .nav.nav-pills .form-control {
  background: var(--c-surface) !important;
  border-color: var(--c-border2) !important;
  color: var(--c-text) !important;
}
[data-theme="dark"] .pg-services .nav.nav-pills .btn.btn-default {
  background: var(--c-surface) !important;
  border-color: var(--c-border2) !important;
  color: var(--pk) !important;
}
[data-theme="dark"] .pg-services .nav.nav-pills .dropdown-menu {
  background: var(--c-surface2) !important;
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-services .nav.nav-pills .dropdown-menu li a {
  color: var(--c-text) !important;
  border-bottom-color: var(--c-border) !important;
}
[data-theme="dark"] .pg-services .nav.nav-pills .dropdown-menu li a:hover {
  background: var(--pk-soft) !important;
  color: var(--pk) !important;
}
[data-theme="dark"] .pg-services .table tbody tr td {
  color: var(--c-text) !important;
  border-bottom-color: var(--c-border) !important;
  background: var(--c-surface) !important;
}
[data-theme="dark"] .pg-services .table thead tr th {
  background: var(--pk-soft) !important;
  border-bottom-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-services .table tbody tr:hover td {
  background: rgba(232,39,93,.07) !important;
}
[data-theme="dark"] .pg-services .table tbody tr.desktop-category-banner-row td[colspan] {
  background: rgba(232,39,93,.10) !important;
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-services .description-row td {
  background: var(--c-surface2) !important;
  color: var(--c-muted) !important;
  border-bottom-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-services .btn-desc-eye {
  background: var(--pk-soft) !important;
  border-color: var(--pk-bdr) !important;
  color: var(--pk) !important;
}
[data-theme="dark"] .pg-services .service-name {
  color: var(--c-text) !important;
}
/* Mobile cards dark mode */
[data-theme="dark"] .pg-services .smm-mobile-category-banner {
  background: rgba(232,39,93,.10) !important;
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-services .smm-mobile-card {
  background: var(--c-surface2) !important;
  border-bottom-color: var(--c-border) !important;
}
[data-theme="dark"] .pg-services .smm-mobile-id-badge {
  background: var(--pk-soft) !important;
  color: var(--pk) !important;
}
[data-theme="dark"] .pg-services .smm-mobile-title {
  color: var(--c-text) !important;
}
[data-theme="dark"] .pg-services .smm-mobile-details-grid {
  background: var(--c-surface) !important;
}
[data-theme="dark"] .pg-services .smm-mobile-meta-item {
  color: var(--c-muted) !important;
}
[data-theme="dark"] .pg-services .smm-mobile-meta-item span {
  color: var(--c-text) !important;
}
[data-theme="dark"] .pg-services .smm-mobile-desc-box {
  background: var(--c-surface) !important;
  border-color: var(--pk-bdr) !important;
  color: var(--c-muted) !important;
}

/* ============================================================
   SIGNIN PAGE  (scope: .pg-signin)
   ============================================================ */
/* ============================================================
   TOKENS
   ============================================================ */
.pg-signin *, .pg-signin *::before, .pg-signin *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
.pg-signin { font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:#f8f9fc; color:#222; overflow-x:hidden; }
.pg-signin ::selection { background:rgba(232,39,93,.15); }
.pg-signin a { color:var(--pk); }
.pg-signin a:hover { color:var(--pk-lt); }

/* ============================================================
   HERO
   ============================================================ */
.pg-signin .hero {
  position:relative;
  background:linear-gradient(160deg,#fff 0%,#fff3f8 60%,#ffe8f0 100%);
  overflow:hidden;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.pg-signin .hero-blob {
  position:absolute; right:-60px; top:50%; transform:translateY(-50%);
  width:720px; height:720px; border-radius:50%;
  background:radial-gradient(circle,rgba(232,39,93,.13) 0%,rgba(232,39,93,.05) 52%,transparent 72%);
  pointer-events:none; z-index:0;
}
.pg-signin .hero-dot { position:absolute; border-radius:50%; pointer-events:none; }
.pg-signin .d1 { width:12px;height:12px;background:var(--pk);top:22%;left:50%;opacity:.2; }
.pg-signin .d2 { width:8px; height:8px; background:var(--pk);top:42%;left:60%;opacity:.14; }
.pg-signin .d3 { width:10px;height:10px;background:var(--pk);bottom:28%;left:46%;opacity:.17; }
/* hero image — right side desktop */
.pg-signin .hero-img-wrap {
  position:absolute; left:46%; right:0; bottom:0; top:0;
  z-index:1; display:flex; align-items:flex-end; justify-content:center;
  pointer-events:none; overflow:hidden;
}
.pg-signin .hero-img-wrap img {
  height:98%; width:auto; max-width:100%;
  object-fit:contain; object-position:bottom center;
  filter:drop-shadow(0 0 70px rgba(232,39,93,.26)) grayscale(8%);
  display:block; margin-bottom:-4px;
}
/* floating platform icons */
.pg-signin .floating-icons { position:absolute; inset:0; z-index:2; pointer-events:none; }
.pg-signin .float-icon {
  position:absolute; width:60px; height:60px; border-radius:18px;
  background:#fff; box-shadow:0 10px 32px rgba(0,0,0,.13),0 2px 8px rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:center;
  font-size:26px; animation:floatBob 4s ease-in-out infinite;
  border:1px solid rgba(0,0,0,.04);
}
.pg-signin .float-icon.fi-ig { top:8%;   right:36%; animation-delay:0s; }
.pg-signin .float-icon.fi-tk { top:24%;  right:16%; animation-delay:.7s; }
.pg-signin .float-icon.fi-yt { bottom:32%;right:26%;animation-delay:1.5s; }
.pg-signin .float-icon.fi-fb { bottom:12%;right:42%;animation-delay:2.1s; }
.pg-signin .float-icon.fi-tg { bottom:6%; right:12%;animation-delay:2.8s; }

@keyframes floatBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.pg-signin .ic-ig { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.pg-signin .ic-tk { color:#010101; font-size:22px; }
.pg-signin .ic-yt { color:#ff0000; }
.pg-signin .ic-fb { color:#1877f2; }
.pg-signin .ic-tg { color:#29a8e8; }
/* hero layout */
.pg-signin .hero-body {
  position:relative; z-index:3; flex:1; display:flex; align-items:center;
}
.pg-signin .hero-inner { padding:52px 0; width:100%; max-width:500px; }
/* brand row */
.pg-signin .brand-row { display:flex; align-items:center; gap:10px; margin-bottom:26px; }
.pg-signin .brand-icon {
  width:46px; height:46px; border-radius:13px; background:var(--grad);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:#fff;
  box-shadow:0 4px 18px rgba(232,39,93,.38);
  flex-shrink:0; overflow:hidden;
}
.pg-signin .brand-icon img { max-width:26px; max-height:26px; object-fit:contain; }
.pg-signin .brand-name { font-size:21px; font-weight:900; color:#0d0d14; letter-spacing:-.5px; }
.pg-signin .brand-name em { color:var(--pk); font-style:normal; }
/* eyebrow pill */
.pg-signin .eyebrow {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--pk-soft); border:1px solid var(--pk-bdr);
  border-radius:40px; padding:5px 14px;
  font-size:11.5px; font-weight:700; color:var(--pk);
  letter-spacing:.4px; text-transform:uppercase; margin-bottom:16px;
  box-shadow:0 2px 8px rgba(232,39,93,.10);
}
/* hero headline */
.pg-signin .hero-h1 {
  font-size:68px; font-weight:900; color:#0d0d14;
  line-height:.94; letter-spacing:-3px; margin-bottom:14px;
}
.pg-signin .be-the { display:block; font-size:26px; font-weight:700; color:#ccc; letter-spacing:-.3px; margin-bottom:4px; }
.pg-signin .chad-word {
  display:block;
  background:var(--grad); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}
/* typewriter line */
.pg-signin .tw-wrap {
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:#bbb; margin-bottom:20px;
  height:22px;
}
.pg-signin .tw-word { color:var(--pk); font-weight:700; }
.pg-signin .tw-cursor {
  display:inline-block; width:2px; height:16px;
  background:var(--pk); border-radius:1px;
  animation:blink .7s step-end infinite;
  vertical-align:middle; margin-left:1px;
}

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.pg-signin .hero-sub { font-size:14px; color:#888; line-height:1.8; margin-bottom:28px; font-weight:500; max-width:400px; }
/* ============================================================
   LOGIN CARD
   ============================================================ */
.pg-signin .login-card {
  background:#fff;
  border:1.5px solid var(--pk-bdr);
  border-radius:var(--cr);
  padding:26px 26px 22px;
  box-shadow:0 16px 48px rgba(232,39,93,.12),0 2px 8px rgba(0,0,0,.04);
  max-width:440px;
}
.pg-signin .login-card.shake { animation:cardShake .4s ease; }

@keyframes cardShake {
  0%,100%{transform:translateX(0)} 15%{transform:translateX(-8px)}
  30%{transform:translateX(8px)} 45%{transform:translateX(-6px)}
  60%{transform:translateX(6px)} 75%{transform:translateX(-3px)} 90%{transform:translateX(3px)}
}
/* tabs */
.pg-signin .card-tabs {
  display:flex; gap:4px; background:var(--pk-soft);
  border-radius:11px; padding:4px; margin-bottom:20px;
  border:1px solid var(--pk-bdr);
}
.pg-signin .card-tab {
  flex:1; height:36px; border:none; border-radius:9px;
  font-size:13px; font-weight:700; cursor:pointer;
  background:transparent; color:#ccc;
  transition:background .18s,color .18s,box-shadow .18s;
  font-family:inherit;
}
.pg-signin .card-tab.is-active {
  background:#fff; color:var(--pk);
  box-shadow:0 2px 10px rgba(232,39,93,.16);
}
.pg-signin .tab-pane { display:none; }
.pg-signin .tab-pane.is-active { display:block; }
.pg-signin .card-title { font-size:15px; font-weight:800; color:#111; margin-bottom:16px; display:flex; align-items:center; gap:7px; }
.pg-signin .card-title i { color:var(--pk); font-size:14px; }
/* fields grid */
.pg-signin .fields-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:4px; }
.pg-signin .form-group { margin-bottom:12px; }
.pg-signin .form-group label {
  display:block; font-size:11px; font-weight:700; color:#aaa;
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px;
}
/* inputs */
.pg-signin .input-wrap { position:relative; }
.pg-signin .input-wrap .form-control { padding-right:42px !important; }
.pg-signin .input-wrap .input-action {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:#ccc; font-size:15px; cursor:pointer;
  padding:0; transition:color .15s;
}
.pg-signin .input-wrap .input-action:hover { color:var(--pk); }
.pg-signin .form-control {
  width:100%; height:46px !important; border-radius:var(--ir) !important;
  border:1.5px solid #eee !important; background:#f9f9fb !important;
  color:#222 !important; font-size:13.5px !important; padding:10px 14px !important;
  font-family:inherit; transition:border-color .2s,box-shadow .2s,background .2s;
  box-shadow:none !important; outline:none !important;
}
.pg-signin .form-control:focus {
  border-color:var(--pk) !important; background:#fff !important;
  box-shadow:0 0 0 3px rgba(232,39,93,.10) !important;
}
.pg-signin .form-control:hover:not(:focus) { border-color:var(--pk-bdr) !important; }
.pg-signin .form-control::placeholder { color:#ccc; }
/* remember + forgot */
.pg-signin .remember-row {
  display:flex; align-items:center; justify-content:space-between;
  margin:10px 0 16px;
}
.pg-signin .remember-label {
  display:flex; align-items:center; gap:7px;
  font-size:12px; font-weight:600; color:#aaa; cursor:pointer;
}
.pg-signin .remember-label input[type="checkbox"] { accent-color:var(--pk); width:14px; height:14px; }
.pg-signin .forgot-link { font-size:11.5px; font-weight:600; color:var(--pk); text-decoration:none; }
.pg-signin .forgot-link:hover { text-decoration:underline; }
/* login button */
.pg-signin .btn-login {
  width:100%; height:50px; background:var(--grad); border:none; border-radius:var(--ir);
  color:#fff; font-size:15px; font-weight:800; letter-spacing:.3px; cursor:pointer;
  box-shadow:0 8px 28px rgba(232,39,93,.36),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .18s,box-shadow .18s;
  display:flex; align-items:center; justify-content:center; gap:8px; font-family:inherit;
}
.pg-signin .btn-login:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(232,39,93,.46); }
.pg-signin .btn-login:active { transform:translateY(0); }
/* or divider */
.pg-signin .or-divider {
  display:flex; align-items:center; gap:10px; color:#ddd;
  font-size:11.5px; font-weight:600; margin:12px 0;
}
.pg-signin .or-divider::before, .pg-signin .or-divider::after { content:''; flex:1; height:1px; background:var(--pk-bdr); }
.pg-signin .google-wrap { display:flex; justify-content:center; }
.pg-signin .card-footer-row { text-align:center; font-size:12.5px; color:#bbb; margin-top:12px; }
.pg-signin .card-footer-row a { color:var(--pk); font-weight:700; text-decoration:none; }
.pg-signin .card-footer-row a:hover { text-decoration:underline; }
/* trust badges */
.pg-signin .trust-badges {
  display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:18px;
}
.pg-signin .trust-badge { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:#bbb; }
.pg-signin .trust-badge i { color:var(--pk); font-size:12px; }
/* alerts */
.pg-signin .alert-danger {
  border-left:4px solid #e53e3e !important; background:#fff5f5 !important; color:#c53030 !important;
  border:1px solid #feb2b2; font-weight:600; padding:10px 14px; font-size:13px;
  margin-bottom:12px; border-radius:var(--ir); position:relative;
}
.pg-signin .alert-success {
  border-left:4px solid #38a169 !important; background:#f0fff4 !important; color:#276749 !important;
  border:1px solid #9ae6b4; font-weight:600; padding:10px 14px; font-size:13px;
  margin-bottom:12px; border-radius:var(--ir);
}
.pg-signin .alert .close { background:none; border:none; float:right; font-size:16px; cursor:pointer; opacity:.6; color:inherit; }
/* ============================================================
   PLATFORM MARQUEE STRIP
   ============================================================ */
.pg-signin .marquee-strip {
  background:#fff; border-top:1px solid var(--pk-bdr); border-bottom:1px solid var(--pk-bdr);
  padding:15px 0; overflow:hidden; position:relative; z-index:5;
}
.pg-signin .marquee-strip::before, .pg-signin .marquee-strip::after {
  content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none;
}
.pg-signin .marquee-strip::before { left:0; background:linear-gradient(90deg,#fff,transparent); }
.pg-signin .marquee-strip::after { right:0; background:linear-gradient(-90deg,#fff,transparent); }
.pg-signin .marquee-track {
  display:flex; align-items:center; gap:0;
  animation:marquee 28s linear infinite; width:max-content;
}
.pg-signin .marquee-track:hover { animation-play-state:paused; }
.pg-signin .marquee-item {
  display:flex; align-items:center; gap:9px;
  padding:0 30px; border-right:1px solid var(--pk-bdr);
  font-size:13px; font-weight:700; color:#aaa; white-space:nowrap;
}
.pg-signin .marquee-item:last-child { border-right:none; }
.pg-signin .marquee-item i { font-size:18px; }
.pg-signin .mi-ig { color:#e1306c; }
.pg-signin .mi-tk { color:#010101; }
.pg-signin .mi-yt { color:#ff0000; }
.pg-signin .mi-fb { color:#1877f2; }
.pg-signin .mi-tg { color:#29a8e8; }
.pg-signin .mi-sp { color:#1db954; }
.pg-signin .mi-tw { color:#1da1f2; }
.pg-signin .mi-dc { color:#5865f2; }
.pg-signin .mi-sc { color:#ff5500; }
.pg-signin .mi-li { color:#0077b5; }

@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
/* ============================================================
   FEATURES BAR
   ============================================================ */
.pg-signin .features-bar {
  background:#fff; border-top:1px solid var(--pk-bdr); border-bottom:1px solid var(--pk-bdr);
  padding:18px 0; position:relative; z-index:4;
}
.pg-signin .features-inner { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0; }
.pg-signin .feature-item {
  display:flex; align-items:center; gap:12px; padding:10px 28px;
  border-right:1px solid var(--pk-bdr); flex:1; min-width:140px; justify-content:center;
}
.pg-signin .feature-item:last-child { border-right:none; }
.pg-signin .feature-icon {
  width:40px; height:40px; border-radius:12px;
  background:var(--pk-soft); border:1.5px solid var(--pk-bdr);
  display:flex; align-items:center; justify-content:center;
  color:var(--pk); font-size:16px; flex-shrink:0;
  box-shadow:var(--shadow-sm);
}
.pg-signin .feature-text strong { display:block; font-size:13px; font-weight:800; color:#0d0d14; }
.pg-signin .feature-text span { font-size:11px; color:#aaa; font-weight:500; }
/* ============================================================
   PAGE SECTIONS
   ============================================================ */
.pg-signin .page-sections { padding:56px 0 68px; background:#f8f9fc; }
/* stats grid */
.pg-signin .stats-section { margin-bottom:32px; }
.pg-signin .stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pg-signin .stat-block {
  background:#fff; border:1.5px solid var(--pk-bdr); border-radius:var(--cr);
  padding:26px 18px; text-align:center;
  box-shadow:0 2px 14px rgba(232,39,93,.07);
  transition:transform .2s,box-shadow .2s;
}
.pg-signin .stat-block:hover { transform:translateY(-4px); box-shadow:var(--shadow-pk); }
.pg-signin .stat-num {
  font-size:34px; font-weight:900; letter-spacing:-1px;
  background:var(--grad); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
  line-height:1; margin-bottom:6px;
}
.pg-signin .stat-lbl { font-size:12px; font-weight:700; color:#bbb; text-transform:uppercase; letter-spacing:.5px; }
.pg-signin .stat-icon { font-size:22px; margin-bottom:10px; color:var(--pk); opacity:.3; }
/* section labels */
.pg-signin .section-heading { font-size:24px; font-weight:900; color:#0d0d14; letter-spacing:-.5px; margin-bottom:6px; }
.pg-signin .section-sub { font-size:14px; color:#aaa; font-weight:500; margin-bottom:26px; }
/* HOW IT WORKS */
.pg-signin .hiw-section { margin-bottom:32px; }
.pg-signin .hiw-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; position:relative; }
.pg-signin .hiw-arrow { position:absolute; top:34px; font-size:20px; color:var(--pk-bdr); pointer-events:none; z-index:2; }
.pg-signin .hiw-arrow.a1 { left:calc(33.33% - 12px); }
.pg-signin .hiw-arrow.a2 { left:calc(66.66% - 12px); }
.pg-signin .hiw-card {
  background:#fff; border:1.5px solid var(--pk-bdr); border-radius:var(--cr);
  padding:24px 18px; text-align:center; position:relative;
  box-shadow:0 2px 14px rgba(232,39,93,.06);
  transition:transform .2s,box-shadow .2s;
}
.pg-signin .hiw-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-pk); }
.pg-signin .hiw-num {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  width:28px; height:28px; border-radius:50%;
  background:var(--grad); color:#fff; font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 12px rgba(232,39,93,.34);
}
.pg-signin .hiw-icon {
  width:54px; height:54px; border-radius:15px;
  background:var(--pk-soft); border:1.5px solid var(--pk-bdr);
  display:flex; align-items:center; justify-content:center;
  color:var(--pk); font-size:22px; margin:10px auto 13px;
  box-shadow:var(--shadow-sm);
}
.pg-signin .hiw-title { font-size:14px; font-weight:800; color:#0d0d14; margin-bottom:5px; }
.pg-signin .hiw-desc { font-size:12.5px; color:#aaa; line-height:1.65; }
/* TESTIMONIALS */
.pg-signin .testi-section { margin-bottom:32px; }
.pg-signin .testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pg-signin .testi-card {
  background:#fff; border:1.5px solid var(--pk-bdr); border-radius:var(--cr);
  padding:22px; box-shadow:0 2px 14px rgba(232,39,93,.06);
  transition:transform .2s,box-shadow .2s;
}
.pg-signin .testi-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-pk); }
.pg-signin .testi-stars { color:#f59e0b; font-size:13px; margin-bottom:10px; letter-spacing:1px; }
.pg-signin .testi-text { font-size:13px; color:#555; line-height:1.75; margin-bottom:14px; font-style:italic; }
.pg-signin .testi-author { display:flex; align-items:center; gap:10px; }
.pg-signin .testi-avatar {
  width:38px; height:38px; border-radius:50%; background:var(--grad);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; font-weight:800; flex-shrink:0;
  box-shadow:0 2px 8px rgba(232,39,93,.3);
}
.pg-signin .testi-name { font-size:13px; font-weight:700; color:#0d0d14; }
.pg-signin .testi-role { font-size:11px; color:#bbb; }
/* PRICING TABLE */
.pg-signin .pricing-section { margin-bottom:32px; }
.pg-signin .pricing-table-wrap {
  background:#fff; border:1.5px solid var(--pk-bdr); border-radius:var(--cr);
  overflow:hidden; box-shadow:0 2px 14px rgba(232,39,93,.07);
}
.pg-signin .pricing-table { width:100%; border-collapse:collapse; }
.pg-signin .pricing-table th {
  padding:14px 18px; font-size:12px; font-weight:800;
  text-transform:uppercase; letter-spacing:.6px; border-bottom:2px solid var(--pk-bdr);
  text-align:left; background:#fafafa;
}
.pg-signin .pricing-table th:not(:first-child) { text-align:center; }
.pg-signin .pricing-table th.col-us { background:var(--pk-soft); color:var(--pk); border-bottom-color:var(--pk); }
.pg-signin .pricing-table th.col-comp { color:#ccc; }
.pg-signin .pricing-table td {
  padding:12px 18px; font-size:13px; color:#444;
  border-bottom:1px solid #fdf0f5;
}
.pg-signin .pricing-table td:not(:first-child) { text-align:center; }
.pg-signin .pricing-table tr:last-child td { border-bottom:none; }
.pg-signin .pricing-table tr:hover td { background:var(--pk-soft); }
.pg-signin .pricing-table td.col-us { background:rgba(232,39,93,.025); }
.pg-signin .chk { color:#22c55e; font-size:16px; }
.pg-signin .crs { color:#ef4444; font-size:16px; }
.pg-signin .pricing-table td.feat { font-weight:600; color:#333; }
.pg-signin .pricing-badge {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--grad); color:#fff; font-size:11px; font-weight:700;
  padding:3px 10px; border-radius:20px; box-shadow:0 2px 8px rgba(232,39,93,.3);
}
/* FAQ */
.pg-signin .faq-section { margin-bottom:32px; }
.pg-signin .faq-list { display:flex; flex-direction:column; gap:8px; }
.pg-signin .faq-item {
  background:#fff; border:1.5px solid var(--pk-bdr); border-radius:var(--cr);
  overflow:hidden; transition:box-shadow .2s,border-color .2s;
}
.pg-signin .faq-item.is-open { box-shadow:var(--shadow-pk); border-color:var(--pk); }
.pg-signin .faq-q {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:16px 20px; background:none; border:none;
  font-size:14px; font-weight:700; color:#0d0d14; cursor:pointer;
  font-family:inherit; text-align:left; transition:background .15s;
}
.pg-signin .faq-q:hover { background:var(--pk-soft); }
.pg-signin .faq-item.is-open .faq-q { color:var(--pk); }
.pg-signin .faq-icon {
  width:26px; height:26px; border-radius:8px; flex-shrink:0;
  background:var(--pk-soft); border:1px solid var(--pk-bdr);
  display:flex; align-items:center; justify-content:center;
  color:var(--pk); font-size:13px; transition:transform .25s,background .15s;
}
.pg-signin .faq-item.is-open .faq-icon { transform:rotate(45deg); background:var(--pk); color:#fff; }
.pg-signin .faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.pg-signin .faq-item.is-open .faq-a { max-height:300px; }
.pg-signin .faq-a-inner {
  padding:14px 20px 16px; font-size:13.5px; color:#666; line-height:1.78;
  border-top:1px solid var(--pk-bdr);
}
/* SEO WELLS */
.pg-signin .seo-well {
  background:#fff; border:1.5px solid var(--pk-bdr); border-radius:var(--cr);
  box-shadow:0 4px 20px rgba(232,39,93,.06); padding:28px; margin-bottom:22px;
  transition:transform .2s,box-shadow .2s;
}
.pg-signin .seo-well:hover { transform:translateY(-2px); box-shadow:var(--shadow-pk); }
.pg-signin .seo-well h2 {
  margin:0 0 14px; font-size:20px; font-weight:900; color:#0d0d14;
  letter-spacing:-.4px; padding-bottom:12px; border-bottom:2px solid var(--pk-bdr);
}
.pg-signin .seo-well h3 { margin:18px 0 8px; font-size:15.5px; font-weight:700; color:#222; }
.pg-signin .seo-well p { line-height:1.9; color:#666; font-size:14px; margin-bottom:10px; }
.pg-signin .seo-well ul { padding-left:0; list-style:none; margin-top:10px; }
.pg-signin .seo-well li {
  margin-bottom:9px; line-height:1.7; color:#555; font-size:14px;
  display:flex; align-items:center; gap:10px;
}
.pg-signin .seo-well li::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--grad); flex-shrink:0;
}
/* ACCORDION GRID */
.pg-signin .acc-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pg-signin .acc-item {
  background:#fff; border:1.5px solid var(--pk-bdr); border-radius:12px;
  overflow:hidden; transition:box-shadow .2s,border-color .2s;
}
.pg-signin .acc-item.is-open { border-color:var(--pk); box-shadow:0 4px 20px rgba(232,39,93,.14); }
.pg-signin .acc-trigger {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:13px 16px; background:none; border:none;
  font-size:13px; font-weight:700; color:#333; cursor:pointer;
  font-family:inherit; text-align:left; transition:background .15s,color .15s;
}
.pg-signin .acc-trigger:hover { background:var(--pk-soft); color:var(--pk); }
.pg-signin .acc-item.is-open .acc-trigger { color:var(--pk); background:var(--pk-soft); }
.pg-signin .acc-chevron {
  width:22px; height:22px; border-radius:6px;
  background:var(--pk-soft); border:1px solid var(--pk-bdr);
  display:flex; align-items:center; justify-content:center;
  color:var(--pk); font-size:11px; flex-shrink:0;
  transition:transform .25s,background .15s;
}
.pg-signin .acc-item.is-open .acc-chevron { transform:rotate(180deg); background:var(--pk); color:#fff; }
.pg-signin .acc-body { max-height:0; overflow:hidden; transition:max-height .32s ease; }
.pg-signin .acc-item.is-open .acc-body { max-height:600px; }
.pg-signin .acc-inner {
  padding:12px 16px 14px; border-top:1px solid var(--pk-bdr);
  font-size:13px; color:#666; line-height:1.75;
}
.pg-signin .acc-inner p { margin-bottom:8px; }
.pg-signin .acc-inner ul { list-style:none; padding:0; margin:6px 0 0; }
.pg-signin .acc-inner li {
  display:flex; align-items:flex-start; gap:8px; margin-bottom:5px;
  font-size:12.5px; color:#555; line-height:1.6;
}
.pg-signin .acc-inner li::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--grad); flex-shrink:0; margin-top:6px;
}
.pg-signin .acc-section-label {
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px;
  color:var(--pk); margin:22px 0 10px;
  display:flex; align-items:center; gap:8px; grid-column:1 / -1;
}
.pg-signin .acc-section-label::after { content:''; flex:1; height:1px; background:var(--pk-bdr); }
/* ============================================================
   MOBILE OVERLAY (inside hero-img-wrap on mobile)
   ============================================================ */
.pg-signin .mob-overlay { display:none; }
.pg-signin .mob-card-wrap { display:none; }
/* ============================================================
   RESPONSIVE  768–960
   ============================================================ */
@media (max-width:960px) and (min-width:768px) {
  .pg-signin .hero-img-wrap { left:44%; }
  .pg-signin .float-icon.fi-ig { right:30%; }
  .pg-signin .float-icon.fi-tk { right:10%; }
  .pg-signin .float-icon.fi-yt { right:20%; }
  .pg-signin .float-icon.fi-fb { right:38%; }
  .pg-signin .float-icon.fi-tg { right:8%; }
  .pg-signin .testi-grid { grid-template-columns:1fr 1fr; }
  .pg-signin .hiw-grid { grid-template-columns:1fr 1fr; }
  .pg-signin .hiw-arrow.a2 { display:none; }
  .pg-signin .acc-grid { grid-template-columns:1fr; }
}
/* ============================================================
   MOBILE  < 768px
   ============================================================ */
@media (max-width:767px) {
  .pg-signin .hero { min-height:auto; flex-direction:column; background:#fff; overflow:visible; display:block; }
  .pg-signin .mob-overlay { display:flex; }
  .pg-signin .mob-card-wrap { display:block; }
  .pg-signin .hero-body { display:none; }
  .pg-signin .floating-icons, .pg-signin .hero-blob, .pg-signin .hero-dot { display:none; }
  /* mobile hero image banner */
  .pg-signin .hero-img-wrap {
    position:relative !important; left:auto !important; right:auto !important;
    top:auto !important; bottom:auto !important;
    width:100%; height:72vw; min-height:280px; max-height:380px;
    overflow:hidden; display:flex; align-items:flex-end; justify-content:flex-end;
    background:linear-gradient(150deg,#fff0f5 0%,#ffd6e7 100%);
  }
  .pg-signin .hero-img-wrap::before {
    content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(105deg,rgba(255,240,245,.95) 0%,rgba(255,240,245,.78) 38%,rgba(255,240,245,.15) 62%,transparent 72%);
  }
  .pg-signin .hero-img-wrap::after {
    content:''; position:absolute; left:0; right:0; bottom:0; height:70px; z-index:3;
    background:linear-gradient(to bottom,transparent,#fff); pointer-events:none;
  }
  .pg-signin .hero-img-wrap img {
    position:relative; z-index:1; height:105%; width:auto; max-width:68%;
    object-fit:contain; object-position:bottom center;
    filter:drop-shadow(-10px 0 28px rgba(232,39,93,.28)) grayscale(8%);
    margin-right:10%; align-self:flex-end;
  }
  /* text overlay on hero image */
  .pg-signin .mob-overlay {
    position:absolute; top:0; left:0; bottom:0; width:58%; z-index:4;
    display:flex; flex-direction:column; justify-content:center;
    padding:16px 0 24px 18px; pointer-events:none; gap:6px;
  }
  .pg-signin .mob-overlay .brand-row { margin-bottom:4px; pointer-events:auto; gap:8px; }
  .pg-signin .mob-overlay .brand-name { font-size:17px; color:#111; white-space:nowrap; }
  .pg-signin .mob-overlay .brand-icon { width:36px; height:36px; flex-shrink:0; }
  .pg-signin .mob-overlay .eyebrow { margin-bottom:6px; pointer-events:auto; font-size:10.5px; padding:4px 10px; }
  .pg-signin .mob-overlay .hero-h1 { font-size:40px; letter-spacing:-2px; margin-bottom:4px; line-height:.92; pointer-events:auto; }
  .pg-signin .mob-overlay .be-the { font-size:16px; color:#aaa; }
  .pg-signin .mob-overlay .tw-wrap { display:none; }
  .pg-signin .mob-overlay .hero-sub { font-size:11.5px; color:#666; line-height:1.55; margin-bottom:0; max-width:100%; pointer-events:auto; }
  /* login card below image on mobile */
  .pg-signin .mob-card-wrap {
    position:relative; z-index:5; background:#fff;
    padding:0 14px 28px; margin-top:-16px;
    display:flex; justify-content:center;
  }
  .pg-signin .mob-card-wrap .login-card {
    max-width:440px; width:100%; border-radius:20px; margin:0;
    box-shadow:0 -2px 12px rgba(232,39,93,.06),0 12px 36px rgba(232,39,93,.14);
  }
  .pg-signin .fields-row { grid-template-columns:1fr; }
  /* features bar on mobile */
  .pg-signin .feature-item {
    padding:10px 12px; min-width:46%; border-right:none;
    border-bottom:1px solid var(--pk-bdr); flex:0 0 48%;
  }
  .pg-signin .feature-item:nth-child(odd) { border-right:1px solid var(--pk-bdr); }
  .pg-signin .feature-item:nth-child(3), .pg-signin .feature-item:nth-child(4) { border-bottom:none; }
  .pg-signin .stats-grid, .pg-signin .hiw-grid, .pg-signin .testi-grid { grid-template-columns:1fr; }
  .pg-signin .hiw-arrow { display:none; }
  .pg-signin .pricing-table-wrap { overflow-x:auto; }
  .pg-signin .pricing-table { min-width:480px; }
  .pg-signin .page-sections { padding:32px 0 40px; }
  .pg-signin .acc-grid { grid-template-columns:1fr; }
  .pg-signin .acc-section-label { grid-column:1; }
  .pg-signin .section-heading { font-size:20px; }
  .pg-signin .seo-well h2 { font-size:17px; }
  .pg-signin .testi-grid { grid-template-columns:1fr; }
}
@media (max-width:400px) {
  .pg-signin .hero-img-wrap { height:76vw; min-height:260px; }
  .pg-signin .mob-overlay { padding:14px 0 20px 14px; width:56%; }
  .pg-signin .mob-overlay .brand-name { font-size:15px; }
  .pg-signin .mob-overlay .hero-h1 { font-size:34px; }
  .pg-signin .mob-overlay .be-the { font-size:14px; }
  .pg-signin .hero-img-wrap img { max-width:66%; margin-right:-3%; }
}
/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] .pg-signin .hero {
  background: linear-gradient(160deg,#0f0f12 0%,#18181c 60%,#1a0f14 100%) !important;
}
[data-theme="dark"] .pg-signin .login-card {
  background: #18181c !important;
  border-color: rgba(232,39,93,.26) !important;
}
[data-theme="dark"] .pg-signin .marquee-strip, [data-theme="dark"] .pg-signin .feature-bar {
  background: #18181c !important;
  border-color: rgba(232,39,93,.20) !important;
}
[data-theme="dark"] .pg-signin .marquee-strip::before {
  background: linear-gradient(90deg,#18181c,transparent) !important;
}
[data-theme="dark"] .pg-signin .marquee-strip::after {
  background: linear-gradient(-90deg,#18181c,transparent) !important;
}
[data-theme="dark"] .pg-signin .feature-item {
  color: #9090a0 !important;
}
[data-theme="dark"] .pg-signin .feature-item strong { color: #f0f0f8 !important; }
[data-theme="dark"] .pg-signin .seo-well, [data-theme="dark"] .pg-signin .faq-item, [data-theme="dark"] .pg-signin .acc-item, [data-theme="dark"] .pg-signin .testi-card, [data-theme="dark"] .pg-signin .pricing-table thead th, [data-theme="dark"] .pg-signin .hiw-card, [data-theme="dark"] .pg-signin .stat-card, [data-theme="dark"] .pg-signin .stat-block {
  background: #18181c !important;
  border-color: rgba(232,39,93,.26) !important;
  color: #d0d0e0 !important;
}
[data-theme="dark"] .pg-signin .faq-item .faq-q, [data-theme="dark"] .pg-signin .acc-item .acc-q {
  color: #f0f0f8 !important;
}
[data-theme="dark"] .pg-signin .page-sections { background: #0f0f12 !important; }
[data-theme="dark"] .pg-signin .section-heading { color: #f0f0f8 !important; }
[data-theme="dark"] .pg-signin .pricing-table tbody td { 
  background: #18181c !important; 
  border-color: rgba(232,39,93,.15) !important;
  color: #d0d0e0 !important;
}
[data-theme="dark"] .pg-signin .pricing-table thead { background: rgba(232,39,93,.12) !important; }
/* Mobile hero dark */
[data-theme="dark"] .pg-signin .hero-img-wrap {
  background: linear-gradient(150deg,#1a0f14 0%,#18181c 100%) !important;
}
[data-theme="dark"] .pg-signin .hero-img-wrap::before {
  background: linear-gradient(105deg,rgba(15,15,18,.97) 0%,rgba(15,15,18,.82) 38%,rgba(15,15,18,.20) 62%,transparent 72%) !important;
}
[data-theme="dark"] .pg-signin .hero-img-wrap::after {
  background: linear-gradient(to bottom,transparent,#0f0f12) !important;
}
[data-theme="dark"] .pg-signin .mob-card-wrap {
  background: #0f0f12 !important;
}
/* ---- Signin: card-tabs (Sign In / Register switcher) ---- */
[data-theme="dark"] .pg-signin .card-tabs {
  background: var(--pk-soft) !important;
  border-color: var(--pk-bdr) !important;
}
[data-theme="dark"] .pg-signin .card-tab {
  color: var(--c-muted) !important;
}
[data-theme="dark"] .pg-signin .card-tab.is-active {
  background: var(--c-surface2) !important;
  color: var(--pk) !important;
}
/* ---- Signin: form inputs ---- */
[data-theme="dark"] .pg-signin .login-card .form-control,
[data-theme="dark"] .pg-signin .form-control {
  background: var(--c-surface2) !important;
  border-color: var(--c-border2) !important;
  color: var(--c-text) !important;
}
[data-theme="dark"] .pg-signin .login-card .form-control::placeholder {
  color: var(--c-muted) !important;
}
[data-theme="dark"] .pg-signin .card-title {
  color: var(--c-text) !important;
}
[data-theme="dark"] .pg-signin .form-group label {
  color: var(--c-muted) !important;
}
[data-theme="dark"] .pg-signin .input-action { color: var(--c-muted) !important; }
/* ---- Signin: stat-block (the 456K+, 889, 24/7 cards) ---- */
[data-theme="dark"] .pg-signin .stat-block {
  background: var(--c-surface) !important;
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-signin .stat-lbl { color: var(--c-muted) !important; }
/* ---- Signin: hiw-card text ---- */
[data-theme="dark"] .pg-signin .hiw-title { color: var(--c-text) !important; }
[data-theme="dark"] .pg-signin .hiw-desc  { color: var(--c-muted) !important; }
/* ---- Signin: acc-item inner text, faq answer ---- */
[data-theme="dark"] .pg-signin .acc-trigger { color: var(--c-text) !important; }
[data-theme="dark"] .pg-signin .acc-inner  { color: var(--c-muted) !important; border-top-color: var(--c-border2) !important; }
[data-theme="dark"] .pg-signin .faq-a-inner { color: var(--c-muted) !important; }
/* ---- Signin: section sub-heading ---- */
[data-theme="dark"] .pg-signin .section-sub { color: var(--c-muted) !important; }
/* ---- Signin: feature-item grid (the 2x2 benefits grid) ---- */
[data-theme="dark"] .pg-signin .feature-item {
  border-color: var(--c-border) !important;
  background: var(--c-surface2) !important;
}
[data-theme="dark"] .pg-signin .feature-text strong { color: var(--c-text) !important; }
[data-theme="dark"] .pg-signin .feature-text span  { color: var(--c-muted) !important; }

/* ============================================================
   AFFILIATES DARK MODE  (scope: .pg-affiliates)
   ============================================================ */
[data-theme="dark"] .pg-affiliates .well,
[data-theme="dark"] .pg-affiliates .panel {
  background: var(--c-surface) !important;
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-affiliates .aff-section-title {
  color: var(--pk) !important;
}
[data-theme="dark"] .pg-affiliates .aff-section-title::after {
  background: var(--c-border2) !important;
}
/* Stat cards (Visits, Registrations, Referrals…) */
[data-theme="dark"] .pg-affiliates .aff-stat-card {
  background: var(--pk-soft) !important;
  border-color: var(--pk-bdr) !important;
}
[data-theme="dark"] .pg-affiliates .aff-stat-icon {
  background: var(--c-surface2) !important;
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-affiliates .aff-stat-label { color: var(--c-muted) !important; }
[data-theme="dark"] .pg-affiliates .aff-stat-value { color: var(--pk) !important; }
/* Referral link input */
[data-theme="dark"] .pg-affiliates .aff-link-input {
  background: var(--c-surface2) !important;
  border-color: var(--c-border2) !important;
  color: var(--c-text) !important;
}
/* Info chips (Commission Rate, Minimum Payout) */
[data-theme="dark"] .pg-affiliates .aff-chip {
  background: var(--c-surface2) !important;
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-affiliates .aff-chip-label { color: var(--c-muted) !important; }
[data-theme="dark"] .pg-affiliates .aff-chip-value { color: var(--pk) !important; }
/* Table */
[data-theme="dark"] .pg-affiliates .aff-table > thead > tr > th {
  color: var(--pk) !important;
  border-bottom-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-affiliates .aff-table > tbody > tr > td {
  color: var(--c-text) !important;
  border-top-color: var(--c-border) !important;
}
[data-theme="dark"] .pg-affiliates .aff-table > tbody > tr:hover > td {
  background: var(--pk-soft) !important;
}

/* ============================================================
   REFILL PAGE DARK MODE  (scope: .pg-refill)
   ============================================================ */
[data-theme="dark"] .pg-refill .nav.nav-pills {
  background: var(--c-surface2) !important;
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-refill .nav.nav-pills > li > a {
  color: var(--c-muted) !important;
}
[data-theme="dark"] .pg-refill .nav.nav-pills > li > a:hover {
  background: var(--pk-soft) !important;
  color: var(--pk) !important;
  border-color: var(--pk-bdr) !important;
}
[data-theme="dark"] .pg-refill .nav.nav-pills li.search-container .input-group .form-control {
  background: var(--c-surface) !important;
  border-color: var(--c-border2) !important;
  color: var(--c-text) !important;
}
[data-theme="dark"] .pg-refill .nav.nav-pills li.search-container .btn.btn-default {
  background: var(--c-surface) !important;
  border-color: var(--c-border2) !important;
  color: var(--pk) !important;
}
/* Well container */
[data-theme="dark"] .pg-refill .well.well-float {
  background: var(--c-surface) !important;
  border-color: var(--c-border2) !important;
}
/* Desktop table */
[data-theme="dark"] .pg-refill .refill-log-system .table {
  background: var(--c-surface) !important;
}
[data-theme="dark"] .pg-refill .refill-log-system .table thead tr th {
  background: var(--pk-soft) !important;
  color: var(--pk) !important;
  border-bottom-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-refill .refill-log-system .table tbody tr td {
  color: var(--c-text) !important;
  border-bottom-color: var(--c-border) !important;
  background: var(--c-surface) !important;
}
[data-theme="dark"] .pg-refill .refill-log-system .table tbody tr:hover td {
  background: rgba(232,39,93,.07) !important;
}
/* Mobile cards */
@media screen and (max-width: 768px) {
  [data-theme="dark"] .pg-refill .refill-log-system .table tbody tr {
    background: var(--c-surface2) !important;
    border-color: var(--c-border2) !important;
  }
  [data-theme="dark"] .pg-refill .refill-log-system .table tbody tr td:nth-child(2) {
    color: var(--c-muted) !important;
  }
  [data-theme="dark"] .pg-refill .refill-log-system .table tbody tr td:nth-child(5) {
    color: var(--c-text) !important;
  }
  [data-theme="dark"] .pg-refill .refill-log-system .table tbody tr td:nth-child(4) {
    background: var(--c-surface) !important;
    border-color: var(--c-border) !important;
  }
  [data-theme="dark"] .pg-refill .refill-log-system .table tbody tr td:nth-child(3) {
    color: var(--c-text) !important;
  }
  [data-theme="dark"] .pg-refill .refill-log-system .table tbody tr td:nth-child(6) {
    border-top-color: var(--c-border) !important;
  }
}
/* Pagination */
[data-theme="dark"] .pg-refill .pagination > li > a,
[data-theme="dark"] .pg-refill .pagination > li > span {
  background: var(--c-surface2) !important;
  border-color: var(--c-border2) !important;
  color: var(--c-muted) !important;
}

/* ============================================================
   TICKETS PAGE  (scope: .pg-tickets)
   ============================================================ */
/* ===== TICKET PAGE THEME ===== */
/* ===== WELL / CARD ===== */
.pg-tickets .well {
  background: #fff !important;
  border: 1px solid var(--pink-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 2px 16px rgba(244, 52, 111, 0.08) !important;
  padding: 24px !important;
}
/* ===== FORM LABELS ===== */
.pg-tickets .form-group label.control-label {
  font-weight: 700;
  color: #222;
  font-size: 13.5px;
  margin-bottom: 7px;
  display: block;
}
/* ===== INPUTS, SELECTS, TEXTAREAS ===== */
.pg-tickets .form-control {
  border-radius: var(--input-radius) !important;
  border: 1.5px solid var(--pink-border) !important;
  background: #fff !important;
  color: #333 !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: none !important;
  height: auto !important;
}
.pg-tickets .form-control:focus {
  border-color: var(--pink-primary) !important;
  box-shadow: 0 0 0 3px rgba(244, 52, 111, 0.10) !important;
  outline: none !important;
}
.pg-tickets input.form-control {
  height: 48px !important;
}
.pg-tickets textarea.form-control {
  resize: vertical;
  min-height: 140px;
  line-height: 1.6;
}
/* ===== SELECT ===== */
.pg-tickets select.form-control {
  height: 48px !important;
  cursor: pointer;
  appearance: auto;
}
/* ===== ALERT DANGER ===== */
.pg-tickets .ticket-danger {
  border-radius: var(--input-radius) !important;
  border-left: 4px solid #e53e3e !important;
  background: #fff5f5 !important;
  color: #c53030 !important;
  border-color: #feb2b2 !important;
  font-weight: 600;
}
/* ===== SUBMIT BUTTON ===== */
.pg-tickets .btn.btn-primary {
  background: var(--pink-gradient) !important;
  border: none !important;
  border-radius: var(--input-radius) !important;
  height: 52px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  width: 100% !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(244, 52, 111, 0.35) !important;
  transition: transform .15s, box-shadow .15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
}
.pg-tickets .btn.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(244, 52, 111, 0.45) !important;
}
.pg-tickets .btn.btn-primary:active {
  transform: translateY(0) !important;
}
/* ===== SEARCH BAR ===== */
.pg-tickets .nav-pills .input-group .form-control {
  border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
  border-right: none !important;
  height: 44px !important;
}
.pg-tickets .nav-pills .input-group .btn.btn-default {
  background: #f4346f !important;
  border: 1.5px solid var(--pink-border) !important;
  border-left: none !important;
  border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
  color: #ffffff !important;
  height: 44px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  transition: background .2s !important;
  width: auto !important;
  box-shadow: none !important;
}
.pg-tickets .nav-pills .input-group .btn.btn-default:hover {
  background: var(--pink-soft) !important;
}
/* ===== TICKET TABLE ===== */
.pg-tickets .table {
  margin-bottom: 0 !important;
}
.pg-tickets .table thead tr th {
  background: var(--pink-soft) !important;
  color: var(--pink-primary) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  border-bottom: 2px solid var(--pink-border) !important;
  padding: 12px 16px !important;
  white-space: nowrap;
}
.pg-tickets .table thead tr th:first-child {
  border-radius: var(--input-radius) 0 0 0;
}
.pg-tickets .table thead tr th:last-child {
  border-radius: 0 var(--input-radius) 0 0;
}
.pg-tickets .table tbody tr td {
  padding: 13px 16px !important;
  vertical-align: middle !important;
  font-size: 13.5px !important;
  color: #444 !important;
  border-bottom: 1px solid #fdf0f5 !important;
}
.pg-tickets .table tbody tr:last-child td {
  border-bottom: none !important;
}
.pg-tickets .table tbody tr:hover td {
  background: var(--pink-soft) !important;
}
.pg-tickets .table tbody tr td a {
  color: var(--pink-primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color .15s;
}
.pg-tickets .table tbody tr td a:hover {
  color: var(--pink-light) !important;
  text-decoration: underline !important;
}
.pg-tickets .table tbody tr td a strong {
  color: var(--pink-primary) !important;
}
/* Status badges in table */
.pg-tickets .table tbody tr td:nth-child(3) {
  font-weight: 600 !important;
  color: #38a169 !important;
}
.pg-tickets .nowrap {
  white-space: nowrap;
}
/* ===== PAGINATION ===== */
.pg-tickets .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  margin: 16px 0 0;
}
.pg-tickets .pagination > li > a, .pg-tickets .pagination > li > span {
  border-radius: 8px !important;
  border: 1.5px solid var(--pink-border) !important;
  color: var(--pink-primary) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding: 6px 13px !important;
  background: #fff !important;
  transition: all .15s !important;
  line-height: 1.5 !important;
}
.pg-tickets .pagination > li > a:hover {
  background: var(--pink-soft) !important;
  border-color: var(--pink-primary) !important;
}
.pg-tickets .pagination > li.active > a, .pg-tickets .pagination > li.active > span {
  background: var(--pink-gradient) !important;
  border-color: var(--pink-primary) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(244, 52, 111, 0.3) !important;
}
.pg-tickets .pagination > li.disabled > a {
  color: #ccc !important;
  border-color: #eee !important;
  background: #fafafa !important;
  cursor: not-allowed;
}
/* ===== FILE UPLOADER ===== */
.pg-tickets .tickets-uploader {
  border: 2px dashed var(--pink-border);
  border-radius: var(--input-radius);
  padding: 18px;
  text-align: center;
  transition: border-color .2s;
}
.pg-tickets .tickets-uploader:hover {
  border-color: var(--pink-primary);
}
/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .pg-tickets .well {
    padding: 16px !important;
  }
  .pg-tickets .btn.btn-primary {
    height: 48px !important;
    font-size: 14px !important;
  }
  .pg-tickets .table thead tr th, .pg-tickets .table tbody tr td {
    padding: 10px 12px !important;
    font-size: 12.5px !important;
  }
}
/* ===== UNREAD TICKET ROW ===== */
.pg-tickets .ticket-unread td {
  background: #fff5f8 !important;
}
.pg-tickets .ticket-unread:hover td {
  background: #ffe8f0 !important;
}
.pg-tickets .ticket-unread td:first-child {
  border-left: 3px solid var(--pink-primary) !important;
}
/* Unread dot */
.pg-tickets .unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--pink-primary);
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(244,52,111,.20);
  animation: unreadPulse 1.6s ease infinite;
  flex-shrink: 0;
}

@keyframes unreadPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(244,52,111,.20); }
  50%      { box-shadow: 0 0 0 6px rgba(244,52,111,.06); }
}
/* New Reply badge */
.pg-tickets .badge-new-reply {
  display: block;           /* stacks below subject text */
  width: fit-content;
  color: #02b447;              /* solid pink — more visible on mobile */
  border: none;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  margin-top: 3px;
  letter-spacing: .4px;
  text-transform: uppercase;
}

@keyframes fadeIn {
  from { opacity:0; transform:scale(.85); }
  to   { opacity:1; transform:scale(1); }
}
/* ===== STATUS BADGE COLORS ===== */
.pg-tickets .status-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .3px;
}
.pg-tickets .status-answered {
  color: #276749;
  border: 1px solid #9ae6b4;
}
.pg-tickets .status-open {
  color: #2b6cb0;
  border: 1px solid #90cdf4;
}
.pg-tickets .status-closed {
  color: #718096;
  border: 1px solid #e2e8f0;
}
.pg-tickets .status-pending {
  color: #b7791f;
  border: 1px solid #fbd38d;
}
/* ===== DARK MODE OVERRIDES ===== */
[data-theme="dark"] .pg-tickets .well {
  background: #18181c !important;
  border-color: rgba(232,39,93,.26) !important;
}
[data-theme="dark"] .pg-tickets .well .well {
  background: #222228 !important;
}
[data-theme="dark"] .pg-tickets .form-group label.control-label, [data-theme="dark"] .pg-tickets .ticket-subject, [data-theme="dark"] .pg-tickets .ticket-meta {
  color: #f0f0f8 !important;
}
[data-theme="dark"] .pg-tickets .table {
  background: #18181c !important;
}
[data-theme="dark"] .pg-tickets .table > thead > tr > th {
  background: rgba(232,39,93,.10) !important;
  color: #f4346f !important;
  border-color: rgba(232,39,93,.26) !important;
}
[data-theme="dark"] .pg-tickets .table > tbody > tr > td {
  color: #d0d0e0 !important;
  border-color: rgba(255,255,255,.06) !important;
  background: #18181c !important;
}
[data-theme="dark"] .pg-tickets .table > tbody > tr:hover > td {
  background: rgba(232,39,93,.07) !important;
}
[data-theme="dark"] .pg-tickets .ticket-msg-user, [data-theme="dark"] .pg-tickets .ticket-msg-support {
  background: #222228 !important;
  border-color: rgba(232,39,93,.20) !important;
  color: #d0d0e0 !important;
}
[data-theme="dark"] .pg-tickets .ticket-msg-support {
  background: rgba(232,39,93,.10) !important;
}
[data-theme="dark"] .pg-tickets .input-group-addon, [data-theme="dark"] .pg-tickets .file-upload-area {
  background: #222228 !important;
  border-color: rgba(232,39,93,.26) !important;
  color: #9090a0 !important;
}
[data-theme="dark"] .pg-tickets .ticket-status-badge.status-open { background: rgba(39,167,69,.15); }
[data-theme="dark"] .pg-tickets .ticket-status-badge.status-answered { background: rgba(37,99,235,.15); }
[data-theme="dark"] .pg-tickets .ticket-status-badge.status-closed { background: rgba(107,114,128,.15); }
[data-theme="dark"] .pg-tickets .ticket-status-badge.status-customer_reply { background: rgba(217,119,6,.15); }
/* ===== FORM CONTROLS (input / select / textarea) — was missing, caused white boxes in dark mode ===== */
[data-theme="dark"] .pg-tickets .form-control {
  background: #222228 !important;
  border-color: rgba(232,39,93,.26) !important;
  color: #f0f0f8 !important;
}
[data-theme="dark"] .pg-tickets .form-control::placeholder {
  color: #9090a0 !important;
}
[data-theme="dark"] .pg-tickets .form-control:focus {
  border-color: var(--pink-primary) !important;
  box-shadow: 0 0 0 3px rgba(232,39,93,.18) !important;
}
[data-theme="dark"] .pg-tickets select.form-control option {
  background: #222228 !important;
  color: #f0f0f8 !important;
}
/* ===== TICKET CATEGORY ERROR ALERT ===== */
[data-theme="dark"] .pg-tickets .ticket-danger {
  background: rgba(229,62,62,.12) !important;
  color: #fc8181 !important;
  border-color: rgba(229,62,62,.35) !important;
}
/* ===== FILE UPLOADER ===== */
[data-theme="dark"] .pg-tickets .tickets-uploader {
  border-color: rgba(232,39,93,.30) !important;
  background: #18181c !important;
  color: #d0d0e0 !important;
}
[data-theme="dark"] .pg-tickets .tickets-uploader:hover {
  border-color: var(--pink-primary) !important;
}
/* ===== SEARCH BAR ===== */
[data-theme="dark"] .pg-tickets .nav-pills .input-group .form-control {
  background: #222228 !important;
  border-color: rgba(232,39,93,.26) !important;
  color: #f0f0f8 !important;
}
[data-theme="dark"] .pg-tickets .nav-pills .input-group .btn.btn-default {
  background: var(--pink-primary) !important;
  border-color: rgba(232,39,93,.26) !important;
}
/* ===== PAGINATION ===== */
[data-theme="dark"] .pg-tickets .pagination > li > a,
[data-theme="dark"] .pg-tickets .pagination > li > span {
  background: #18181c !important;
  border-color: rgba(232,39,93,.26) !important;
  color: #f0f0f8 !important;
}
[data-theme="dark"] .pg-tickets .pagination > li > a:hover {
  background: rgba(232,39,93,.10) !important;
  border-color: var(--pink-primary) !important;
}
[data-theme="dark"] .pg-tickets .pagination > li.disabled > a {
  background: #18181c !important;
  border-color: rgba(255,255,255,.06) !important;
  color: #55556a !important;
}
/* ===== UNREAD TICKET ROW ===== */
[data-theme="dark"] .pg-tickets .ticket-unread td {
  background: rgba(232,39,93,.06) !important;
}
[data-theme="dark"] .pg-tickets .ticket-unread:hover td {
  background: rgba(232,39,93,.12) !important;
}


/* ============================================================
   UPDATES PAGE  (scope: .pg-updates)
   ============================================================ */
/* ===== STATUS FILTER TABS ===== */
.pg-updates .nav.nav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--pink-border);
  border-radius: var(--card-radius);
  padding: 10px 14px;
  margin-bottom: 16px !important;
  box-shadow: 0 2px 12px rgba(244, 52, 111, 0.07);
}
.pg-updates .nav.nav-pills > li > a {
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #666 !important;
  padding: 7px 14px !important;
  background: transparent !important;
  border: 1.5px solid transparent !important;
  transition: all .15s !important;
  white-space: nowrap;
  display: block;
}
.pg-updates .nav.nav-pills > li > a:hover {
  background: var(--pink-soft) !important;
  color: var(--pink-primary) !important;
  border-color: var(--pink-border) !important;
}
.pg-updates .nav.nav-pills > li.active > a, .pg-updates .nav.nav-pills > li.active > a:hover, .pg-updates .nav.nav-pills > li.active > a:focus {
  background: var(--pink-gradient) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 3px 10px rgba(244, 52, 111, 0.3) !important;
}
/* Search bar in nav */
.pg-updates .nav.nav-pills > li.search {
  margin-left: auto;
}
.pg-updates .nav.nav-pills li.search .input-group .form-control {
  border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
  border: 1.5px solid var(--pink-border) !important;
  border-right: none !important;
  height: 38px !important;
  font-size: 13px !important;
  color: #333 !important;
  background: #fff !important;
  box-shadow: none !important;
  padding: 6px 12px !important;
}
.pg-updates .nav.nav-pills li.search .input-group .form-control:focus {
  border-color: var(--pink-primary) !important;
  box-shadow: none !important;
  outline: none !important;
}
.pg-updates .nav.nav-pills li.search .btn.btn-default {
  border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
  border: 1.5px solid var(--pink-border) !important;
  border-left: none !important;
  background: #fff !important;
  color: var(--pink-primary) !important;
  height: 38px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  transition: background .2s !important;
  box-shadow: none !important;
}
.pg-updates .nav.nav-pills li.search .btn.btn-default:hover {
  background: var(--pink-soft) !important;
}
/* ===== WELL / TABLE CARD ===== */
.pg-updates .well.well-float {
  background: #fff !important;
  border: 1px solid var(--pink-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 2px 16px rgba(244, 52, 111, 0.08) !important;
  padding: 0 !important;
  overflow: hidden;
  margin-bottom: 16px !important;
}
/* ===== TABLE ===== */
.pg-updates .table {
  margin-bottom: 0 !important;
}
.pg-updates .table thead tr th {
  background: var(--pink-soft) !important;
  color: var(--pink-primary) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: 2px solid var(--pink-border) !important;
  border-top: none !important;
  padding: 12px 14px !important;
  white-space: nowrap;
}
.pg-updates .table tbody tr td {
  padding: 12px 14px !important;
  vertical-align: middle !important;
  font-size: 13px !important;
  color: #444 !important;
  border-bottom: 1px solid #fdf0f5 !important;
  border-top: none !important;
}
.pg-updates .table tbody tr:last-child td {
  border-bottom: none !important;
}
.pg-updates .table tbody tr:hover td {
  background: var(--pink-soft) !important;
}
.pg-updates .table .width-40 {
  max-width: 220px;
  word-break: break-all;
  font-size: 12.5px !important;
  color: #555 !important;
}
.pg-updates .nowrap {
  white-space: nowrap;
}
/* Order detail icon link */
.pg-updates .table tbody tr td a[data-toggle="modal"] {
  color: var(--pink-primary) !important;
  margin-left: 6px;
  font-size: 13px;
}
/* ===== STATUS BADGES ===== */
.pg-updates .table tbody tr td.nowrap {
  font-weight: 600 !important;
}
/* ===== ACTION BUTTONS ===== */
.pg-updates .btn.btn-xs.btn-primary {
  background: var(--pink-gradient) !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(244, 52, 111, 0.3) !important;
  transition: transform .15s, box-shadow .15s !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
}
.pg-updates .btn.btn-xs.btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(244, 52, 111, 0.4) !important;
}
.pg-updates .btn.btn-xs.btn-primary.disabled {
  opacity: 0.55 !important;
  cursor: not-allowed;
  transform: none !important;
}
.pg-updates .btn.btn-xs.btn-default {
  background: #fff !important;
  border: 1.5px solid var(--pink-border) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  color: #666 !important;
  transition: background .15s, border-color .15s !important;
  height: auto !important;
}
.pg-updates .btn.btn-xs.btn-default:hover {
  background: var(--pink-soft) !important;
  border-color: var(--pink-primary) !important;
  color: var(--pink-primary) !important;
}
.pg-updates .order-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  white-space: nowrap;
  font-size: 12px;
  color: #888;
}
/* ORDER LINK */
.pg-updates .order-link {
  color:var(--pink-primary) !important;

  text-decoration:none !important;

  font-weight:600;

  transition:all .18s ease;

  word-break:break-all;
}
.pg-updates .order-link:hover {

  color:var(--pink-light) !important;

  text-decoration:underline !important;
}
/* ===== MODAL ===== */
.pg-updates .modal-content {
  border-radius: var(--card-radius) !important;
  border: 1px solid var(--pink-border) !important;
  box-shadow: 0 8px 32px rgba(244, 52, 111, 0.15) !important;
  overflow: hidden;
}
.pg-updates .modal-header {
  background: var(--pink-soft) !important;
  border-bottom: 1.5px solid var(--pink-border) !important;
  padding: 16px 20px !important;
}
.pg-updates .modal-header .modal-title {
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #1a1a1a !important;
}
.pg-updates .modal-header .close {
  color: var(--pink-primary) !important;
  opacity: 1 !important;
  font-size: 20px !important;
}
.pg-updates .modal-body {
  padding: 20px !important;
}
.pg-updates .modal-body .form-group label {
  font-weight: 700;
  font-size: 13px;
  color: #444;
  margin-bottom: 6px;
  display: block;
}
.pg-updates .modal-body .form-control {
  border-radius: var(--input-radius) !important;
  border: 1.5px solid var(--pink-border) !important;
  background: #fafafa !important;
  color: #555 !important;
  font-size: 13.5px !important;
  box-shadow: none !important;
  height: auto !important;
  padding: 10px 14px !important;
}
/* ===== PAGINATION ===== */
/* ===== PAGINATION ===== */
.pg-updates .pagination {
  display:flex !important;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;

  padding:0 !important;
  margin:24px 0 16px !important;

  width:100%;
}
.pg-updates .pagination > li {
  display:flex !important;
  align-items:center;
}
.pg-updates .pagination > li > a, .pg-updates .pagination > li > span {

  min-width:40px;
  height:40px;

  display:flex !important;
  align-items:center;
  justify-content:center;

  padding:0 14px !important;

  line-height:1 !important;
}
.pg-updates .pagination > li.active > a {
  transform:translateY(-1px);
}
.pg-updates .pagination > li:first-child a, .pg-updates .pagination > li:last-child a {
  font-size:16px !important;
}
.pg-updates .pagination > li > a:hover {
  background: var(--pink-soft) !important;
  border-color: var(--pink-primary) !important;
}
.pg-updates .pagination > li.active > a, .pg-updates .pagination > li.active > span {
  background: var(--pink-gradient) !important;
  border-color: var(--pink-primary) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(244, 52, 111, 0.3) !important;
}
.pg-updates .pagination > li.disabled > a {
  color: #ccc !important;
  border-color: #eee !important;
  background: #fafafa !important;
  cursor: not-allowed;
}
/* ===== MOBILE ===== */
@media (max-width: 992px) {
  .pg-updates .nav.nav-pills {
    padding: 8px 10px;
    gap: 5px;
  }
  .pg-updates .nav.nav-pills > li > a {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
  .pg-updates .nav.nav-pills > li.search {
    margin-left: 0;
    width: 100%;
    margin-top: 4px;
  }
  .pg-updates .nav.nav-pills li.search .input-group {
    width: 100%;
  }
  .pg-updates .table thead tr th, .pg-updates .table tbody tr td {
    padding: 9px 10px !important;
    font-size: 12px !important;
  }
}
/* ===== DARK MODE ===== */
[data-theme="dark"] .pg-updates .nav.nav-pills {
  background: var(--c-surface) !important;
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-updates .nav.nav-pills > li > a { color: var(--c-muted) !important; }
[data-theme="dark"] .pg-updates .nav.nav-pills li.search .input-group .form-control {
  background: var(--c-surface2) !important;
  border-color: var(--c-border2) !important;
  color: var(--c-text) !important;
}
[data-theme="dark"] .pg-updates .nav.nav-pills li.search .btn.btn-default {
  background: var(--c-surface2) !important;
  border-color: var(--c-border2) !important;
  color: var(--pk) !important;
}
[data-theme="dark"] .pg-updates .well.well-float {
  background: var(--c-surface) !important;
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-updates .table thead tr th {
  background: var(--pk-soft) !important;
  border-bottom-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-updates .table tbody tr td {
  color: var(--c-text) !important;
  border-bottom-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-updates .table tbody tr:hover td { background: var(--pk-soft) !important; }
[data-theme="dark"] .pg-updates .table .width-40 { color: var(--c-muted) !important; }
[data-theme="dark"] .pg-updates .btn.btn-xs.btn-default {
  background: var(--c-surface2) !important;
  border-color: var(--c-border2) !important;
  color: var(--c-muted) !important;
}
[data-theme="dark"] .pg-updates .order-actions { color: var(--c-muted) !important; }
[data-theme="dark"] .pg-updates .modal-content { background: var(--c-surface) !important; }
[data-theme="dark"] .pg-updates .modal-header {
  background: rgba(232,39,93,.08) !important;
  border-bottom-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-updates .modal-header .modal-title { color: var(--c-text) !important; }
[data-theme="dark"] .pg-updates .modal-body .form-group label { color: var(--c-text) !important; }
[data-theme="dark"] .pg-updates .modal-body .form-control {
  background: var(--c-surface2) !important;
  color: var(--c-muted) !important;
  border-color: var(--c-border2) !important;
}
[data-theme="dark"] .pg-updates .pagination > li > a,
[data-theme="dark"] .pg-updates .pagination > li > span {
  background: var(--c-surface2) !important;
  border-color: var(--c-border2) !important;
  color: var(--pk) !important;
}
[data-theme="dark"] .pg-updates .pagination > li.disabled > a {
  background: var(--c-surface2) !important;
  border-color: var(--c-border) !important;
  color: var(--c-subtle) !important;
}

/* ============================================================
   VIEW TICKET PAGE  (scope: .pg-viewticket)
   ============================================================ */
/* ===== CARD ===== */
.pg-viewticket .well {
  background: #fff !important;
  border: 1px solid var(--pink-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 2px 16px rgba(244, 52, 111, 0.08) !important;
  padding: 24px !important;
}
/* ===== TICKET TITLE ===== */
.pg-viewticket .titcket-title {
  font-size: 17px;
  font-weight: 800;
  color: #f6346f;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--pink-border);
  letter-spacing: -0.2px;
}
/* ===== MESSAGE BLOCKS ===== */
.pg-viewticket .ticket-message-block {
  margin-bottom: 20px;
}
/* User message — right side */
.pg-viewticket .ticket-message-right .ticket-message {
  background: var(--pink-soft);
  border: 1.5px solid var(--pink-border);
  border-radius: var(--card-radius) var(--card-radius) 4px var(--card-radius);
  padding: 14px 18px;
  font-size: 14px;
  color: #333;
  line-height: 1.65;
  box-shadow: 0 2px 10px rgba(244, 52, 111, 0.08);
}
.pg-viewticket .ticket-message-right .info {
  margin-top: 7px;
  padding-right: 4px;
  font-size: 12px;
  color: #999;
}
.pg-viewticket .ticket-message-right .info strong {
  color: var(--pink-primary);
  margin-right: 6px;
  font-weight: 700;
}
/* Support message — left side */
.pg-viewticket .ticket-message-left .ticket-message {
  background: #f8f9fa;
  border: 1.5px solid #e9ecef;
  border-radius: var(--card-radius) var(--card-radius) var(--card-radius) 4px;
  padding: 14px 18px;
  font-size: 14px;
  color: #333;
  line-height: 1.65;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.pg-viewticket .ticket-message-left .info {
  margin-top: 7px;
  padding-left: 4px;
  font-size: 12px;
  color: #999;
}
.pg-viewticket .ticket-message-left .info strong {
  color: #555;
  margin-right: 6px;
  font-weight: 700;
}
/* File attachments inside messages */
.pg-viewticket .ticket-message a {
  color: var(--pink-primary) !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}
.pg-viewticket .ticket-message a:hover {
  text-decoration: underline;
  color: var(--pink-light) !important;
}
/* ===== REPLY FORM DIVIDER ===== */
.pg-viewticket .panel-border-top {
  padding-top: 20px;
  margin-top: 8px;
  border-top: 2px solid var(--pink-border);
}
/* ===== FORM LABELS ===== */
.pg-viewticket .form-group label.control-label {
  font-weight: 700;
  color: #222;
  font-size: 13.5px;
  margin-bottom: 7px;
  display: block;
}
/* ===== TEXTAREA ===== */
.pg-viewticket .form-control {
  border-radius: var(--input-radius) !important;
  border: 1.5px solid var(--pink-border) !important;
  background: #fff !important;
  color: #333 !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: none !important;
  height: auto !important;
}
.pg-viewticket .form-control:focus {
  border-color: var(--pink-primary) !important;
  box-shadow: 0 0 0 3px rgba(244, 52, 111, 0.10) !important;
  outline: none !important;
}
.pg-viewticket textarea.form-control {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}
/* ===== FILE UPLOADER ===== */
.pg-viewticket .tickets-uploader {
  border: 2px dashed var(--pink-border);
  border-radius: var(--input-radius);
  padding: 16px;
  text-align: center;
  transition: border-color .2s;
}
.pg-viewticket .tickets-uploader:hover {
  border-color: var(--pink-primary);
}
/* ===== ALERT DANGER ===== */
.pg-viewticket .alert-danger {
  border-radius: var(--input-radius) !important;
  border-left: 4px solid #e53e3e !important;
  background: #fff5f5 !important;
  color: #c53030 !important;
  border-color: #feb2b2 !important;
  font-weight: 600;
}
/* ===== SUBMIT BUTTON ===== */
.pg-viewticket .btn.btn-primary {
  background: var(--pink-gradient) !important;
  border: none !important;
  border-radius: var(--input-radius) !important;
  height: 52px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  width: 100% !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(244, 52, 111, 0.35) !important;
  transition: transform .15s, box-shadow .15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
}
.pg-viewticket .btn.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(244, 52, 111, 0.45) !important;
}
.pg-viewticket .btn.btn-primary:active {
  transform: translateY(0) !important;
}
/* ===== CLOSED TICKET NOTICE ===== */
.pg-viewticket .ticket-closed-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  margin-top: 8px;
  border-top: 2px solid var(--pink-border);
  border-radius: var(--input-radius);
  background: #f7f7f9;
  color: #5a5a66;
  font-size: 13.5px;
  font-weight: 600;
}
.pg-viewticket .ticket-closed-notice i {
  color: #9094a3;
  font-size: 15px;
  flex-shrink: 0;
}
[data-theme="dark"] .pg-viewticket .ticket-closed-notice {
  background: #20202a;
  color: #b4b4c2;
}
/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .pg-viewticket .well {
    padding: 16px !important;
  }
  .pg-viewticket .ticket-message-right .ticket-message, .pg-viewticket .ticket-message-left .ticket-message {
    padding: 12px 14px;
    font-size: 13.5px;
  }
  .pg-viewticket .btn.btn-primary {
    height: 48px !important;
    font-size: 14px !important;
  }
}
/* ===== DARK MODE ===== */
[data-theme="dark"] .pg-viewticket .well {
  background: #18181c !important;
  border-color: rgba(232,39,93,.26) !important;
}
[data-theme="dark"] .pg-viewticket .ticket-message {
  background: #222228 !important;
  color: #d0d0e0 !important;
  border-color: rgba(232,39,93,.20) !important;
}
[data-theme="dark"] .pg-viewticket .ticket-message-right .ticket-message {
  background: rgba(232,39,93,.12) !important;
}
[data-theme="dark"] .pg-viewticket .ticket-message-meta, [data-theme="dark"] .pg-viewticket .ticket-info-label, [data-theme="dark"] .pg-viewticket h4, [data-theme="dark"] .pg-viewticket h3 {
  color: #f0f0f8 !important;
}
[data-theme="dark"] .pg-viewticket .form-control {
  background: #222228 !important;
  border-color: rgba(232,39,93,.26) !important;
  color: #f0f0f8 !important;
}
[data-theme="dark"] .pg-viewticket .input-group-addon {
  background: #222228 !important;
  border-color: rgba(232,39,93,.26) !important;
  color: #9090a0 !important;
}
[data-theme="dark"] .pg-viewticket .alert-success {
  background: rgba(39,167,69,.15) !important;
  border-color: rgba(39,167,69,.30) !important;
  color: #6ee7a0 !important;
}
[data-theme="dark"] .pg-viewticket .alert-danger {
  background: rgba(197,48,48,.15) !important;
  border-color: rgba(197,48,48,.30) !important;
  color: #fc8181 !important;
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .navbar, .sb-overlay, .sb-panel, .mob-nav,
  #toast-stack, .announce-bar, .site-footer { display: none !important; }
  body { background: #fff !important; color: #000 !important; padding: 0 !important; }
  .container, .container-fluid { width: 100% !important; max-width: 100% !important; padding: 0 16px !important; }
  a { color: #000 !important; text-decoration: underline; }
  * { box-shadow: none !important; text-shadow: none !important; }
}

/* ===== SERVICE INSIGHTS WIDGET (Last 24 Hours) ===== */
.no-insights-card { padding: 20px 22px; margin-bottom: 18px; }

.no-insights-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.no-insights-title {
  font-size: 16px; font-weight: 700; color: var(--c-text);
  display: flex; align-items: center; gap: 8px;
}
.no-insights-title i { color: var(--pk); }
.no-insights-sub { font-weight: 500; font-size: 13px; color: var(--c-muted); }
.no-insights-updated { font-size: 12px; color: var(--c-subtle); }

.no-insights-tabs {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
  border-bottom: 1px solid var(--c-border); padding-bottom: 12px;
}
.no-insights-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--c-border); background: var(--c-surface2);
  color: var(--c-muted); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s ease;
}
.no-insights-tab:hover { border-color: var(--pk-bdr); color: var(--pk); }
.no-insights-tab.active {
  background: var(--pk-grad); border-color: transparent; color: #fff;
  box-shadow: var(--sh-pink);
}

.no-insights-panel { display: none; flex-direction: column; gap: 10px; }
.no-insights-panel.active { display: flex; }

.no-insights-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--c-surface2); border: 1px solid var(--c-border);
  transition: border-color .15s ease;
}
.no-insights-row:hover { border-color: var(--pk-bdr); }

.no-insights-row-main { flex: 1; min-width: 220px; }

.no-insights-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; padding: 3px 9px; border-radius: var(--r-pill);
  margin-bottom: 6px;
}
.no-insights-badge.is-fast { background: var(--pk-soft); color: var(--pk-dark); }
.no-insights-badge.is-reliable { background: #eaf7ee; color: #1f9d55; }

.no-insights-name { font-size: 14px; font-weight: 600; color: var(--c-text); margin-bottom: 4px; }

.no-insights-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--c-muted);
}
.no-insights-meta span { display: inline-flex; align-items: center; gap: 4px; }
.no-insights-meta i { color: var(--pk-lt); font-size: 11px; }

.no-insights-use-btn {
  flex-shrink: 0; padding: 8px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--pk-bdr); background: #fff; color: var(--pk);
  font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s ease;
}
.no-insights-use-btn:hover { background: var(--pk-grad); color: #fff; border-color: transparent; }

[data-theme="dark"] .no-insights-row { background: var(--c-surface2); border-color: var(--c-border); }
[data-theme="dark"] .no-insights-badge.is-reliable { background: rgba(31,157,85,.15); color: #4ade80; }

@media (max-width: 767px) {
  .no-insights-row { flex-direction: column; align-items: stretch; }
  .no-insights-use-btn { width: 100%; }
}