*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

:root {
  --bg: #090b10;
  --bg2: #0f1219;
  --bg3: #141820;
  --card: #101420;
  --border: #1c2438;
  --gold: #c89b3c;
  --gold2: #f0c060;
  --blue: #3d8bff;
  --purple: #7b4fff;
  --text: #e4e8f0;
  --muted: #4a5672;
  --danger: #ff3355;
  --green: #00c896;
  --orange: #ff8c00;
  --b2: #232c42;
  --pix: #32bcad;
}

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px
}

::-webkit-scrollbar-track {
  background: var(--bg)
}

::-webkit-scrollbar-thumb {
  background: var(--b2);
  border-radius: 2px
}

/* LOGIN SCREEN (CLOUD STORE AESTHETIC) */
#lockScreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg) url('https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?q=80&w=2070&auto=format&fit=crop') center/cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#lockScreen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 8, 20, 0.85) 0%, rgba(4, 8, 20, 0.95) 100%);
  pointer-events: none;
}

#lockScreen>div {
  position: relative;
  z-index: 1;
}

.lock-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 38px;
  letter-spacing: 6px;
  text-align: center;
  color: var(--blue);
  text-shadow: 0 0 20px rgba(61, 139, 255, 0.4);
}

.lock-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  background: rgba(8, 12, 25, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(61, 139, 255, 0.2);
  border-radius: 12px;
  padding: 30px 24px;
  margin-top: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.lock-card .inp {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(61, 139, 255, 0.2);
  border-radius: 8px;
  color: #fff;
  padding: 14px;
}

.lock-card .inp:focus {
  border-color: var(--blue);
  box-shadow: 0 0 15px rgba(61, 139, 255, 0.15);
}

.lock-card .inp-label {
  color: var(--blue);
  font-size: 11px;
  letter-spacing: 1.5px;
}

.lock-card .btn-blue {
  background: rgba(10, 15, 60, 0.9);
  border: 1px solid rgba(61, 139, 255, 0.3);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 13px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.9);
}

.lock-card .btn-blue:hover {
  background: rgba(14, 25, 100, 1);
  border-color: rgba(61, 139, 255, 0.5);
  box-shadow: 0 0 20px rgba(61, 139, 255, 0.2);
}

.hidden {
  display: none !important;
}

.mono {
  font-family: 'JetBrains Mono', 'Courier New', monospace
}

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  border: none;
  transition: all .15s;
  white-space: nowrap;
  line-height: 1.3
}

.btn-blue {
  background: var(--blue);
  color: #fff
}

.stk-type-btn {
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s
}
.stk-type-btn:hover { color: var(--text); background: rgba(255,255,255,.04) }
.stk-type-active { background: var(--blue) !important; color: #fff !important }

.btn-blue:hover {
  background: #2d7aee;
  transform: translateY(-1px)
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--b2)
}

.btn-ghost:hover {
  border-color: var(--blue);
  color: var(--blue)
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color: #0a0800
}

.btn-gold:hover {
  transform: translateY(-1px)
}

.btn-danger {
  background: rgba(255, 51, 85, .12);
  color: var(--danger);
  border: 1px solid rgba(255, 51, 85, .3)
}

.btn-danger:hover {
  background: rgba(255, 51, 85, .2)
}

.btn-green {
  background: var(--green);
  color: #002a1e
}

.btn-green:hover {
  transform: translateY(-1px)
}

.btn-pix {
  background: var(--pix);
  color: #fff
}

.btn-pix:hover {
  background: #28a898;
  transform: translateY(-1px)
}

.btn-sm {
  padding: 7px 13px;
  font-size: 12px;
  border-radius: 6px
}

.btn-xs {
  padding: 5px 9px;
  font-size: 11px;
  border-radius: 5px
}

.btn-full {
  width: 100%
}

.btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none !important
}

/* INPUTS */
.inp {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box
}

.inp:focus {
  border-color: var(--blue)
}

.inp::placeholder {
  color: var(--muted)
}

.inp.ok {
  border-color: var(--green)
}

.inp.err {
  border-color: var(--danger)
}

textarea.inp {
  resize: vertical;
  min-height: 120px;
  line-height: 1.7
}

.inp-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  display: block;
  font-family: 'JetBrains Mono', monospace
}

.form-g {
  margin-bottom: 14px
}

.hint {
  font-size: 12px;
  margin-top: 5px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--muted)
}

.hint.g {
  color: var(--green)
}

.hint.r {
  color: var(--danger)
}

/* TOP NAV */
#topNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  height: 52px;
  background: rgba(9, 11, 16, .98);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 4px
}

.nav-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  cursor: pointer;
  margin-right: 6px;
  flex-shrink: 0
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .15s;
  color: var(--muted);
  background: transparent;
  font-family: 'Inter', sans-serif;
  white-space: nowrap
}

.nav-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .05)
}

.nav-btn.active {
  background: rgba(61, 139, 255, .12);
  color: var(--blue);
  border: 1px solid rgba(61, 139, 255, .25)
}

.nav-tabs { display:flex; align-items:center; gap:4px; }
.nav-tab { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; border:none; transition:all .15s; color:var(--muted); background:transparent; font-family:'Syne',sans-serif; white-space:nowrap; text-decoration:none; }
.nav-tab:hover { color:var(--text); background:rgba(255,255,255,.05); }
.nav-tab.active { background:rgba(61,139,255,.12); color:var(--blue); border:1px solid rgba(61,139,255,.25); }
.nav-right { display:flex; align-items:center; gap:8px; margin-left:auto; }
.nav-link-sm { font-size:11px; color:var(--muted); font-family:'Syne',sans-serif; transition:color .15s; }
.nav-link-sm:hover { color:var(--text); }

.nav-gift { display:inline-flex; align-items:center; gap:0; border:1px solid rgba(255,180,50,.2); border-radius:8px; background:rgba(255,180,50,.06); overflow:hidden; height:32px; }
.nav-gift svg { margin-left:8px; color:var(--gold2); flex-shrink:0; }
.nav-gift-input { background:transparent; border:none; outline:none; color:#fff; font-family:'JetBrains Mono',monospace; font-size:11px; padding:0 8px; width:110px; letter-spacing:1px; height:100%; }
.nav-gift-input::placeholder { color:rgba(255,255,255,.25); letter-spacing:.5px; }
.nav-gift-btn { background:linear-gradient(135deg,rgba(255,180,50,.2),rgba(255,150,30,.3)); border:none; border-left:1px solid rgba(255,180,50,.15); color:var(--gold2); font-family:'Syne',sans-serif; font-size:11px; font-weight:600; padding:0 12px; height:100%; cursor:pointer; transition:background .15s; white-space:nowrap; }
.nav-gift-btn:hover { background:linear-gradient(135deg,rgba(255,180,50,.3),rgba(255,150,30,.45)); }
.nav-gift-btn:disabled { opacity:.5; cursor:not-allowed; }
.nav-gift.success { border-color:rgba(0,200,100,.4); background:rgba(0,200,100,.08); }
.nav-gift.success .nav-gift-btn { color:var(--green); }
.nav-gift.error { border-color:rgba(231,76,60,.4); background:rgba(231,76,60,.08); animation:giftShake .4s ease; }
@keyframes giftShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-4px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)} }

.btn-add-balance { display:inline-flex; align-items:center; gap:5px; padding:6px 14px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; border:1px solid rgba(61,139,255,.3); background:rgba(61,139,255,.12); color:var(--blue); font-family:'Syne',sans-serif; transition:all .15s; }
.btn-add-balance:hover { background:rgba(61,139,255,.2); }
@media (max-width:768px) {
  .nav-tabs { display:none; }
  .nav-link-sm { display:none; }
  .btn-add-balance { display:none; }
  .nav-gift { display:none; }
}

.nav-sep {
  flex: 1
}

.nav-balance {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 600
}

.nav-balance:hover {
  border-color: var(--blue)
}

.nav-balance .plus {
  color: var(--blue);
  font-weight: 800;
  font-size: 14px
}

.nav-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  border: 2px solid transparent;
  flex-shrink: 0
}

.nav-av:hover {
  border-color: var(--blue)
}

.av-wrap {
  position: relative
}

.av-menu {
  position: absolute;
  top: calc(100%+8px);
  right: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 185px;
  overflow: hidden;
  display: none;
  z-index: 400;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .7)
}

.av-wrap.open .av-menu {
  display: block
}

.av-mi {
  padding: 10px 14px;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s;
  display: flex;
  align-items: center;
  gap: 8px
}

.av-mi:hover {
  background: rgba(255, 255, 255, .04)
}

.av-sep {
  height: 1px;
  background: var(--border)
}

.av-mi.danger {
  color: var(--danger)
}

/* SEC BAR (Cloud Store style) */
#secBar {
  position: fixed;
  top: 52px;
  left: 0;
  right: 0;
  z-index: 200;
  padding: 6px 14px;
  background: rgba(9, 11, 16, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.dt-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 1400px;
  margin: 0 auto;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  padding: 6px 12px;
  backdrop-filter: blur(8px)
}

.dt-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #eab308;
  font-weight: 700;
  font-size: 11px;
  white-space: nowrap
}

.dt-chips {
  display: flex;
  gap: 6px;
  flex: 1;
  flex-wrap: wrap;
  align-items: center
}

.dt-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  transition: all .2s
}

.dt-rank1 {
  background: linear-gradient(135deg, rgba(234,179,8,.2), rgba(245,158,11,.1));
  border-color: rgba(234,179,8,.3)
}

.dt-rank2 {
  background: rgba(156,163,175,.1);
  border-color: rgba(156,163,175,.2)
}

.dt-rank3 {
  background: rgba(245,158,11,.1);
  border-color: rgba(245,158,11,.2)
}

.dt-rank4,
.dt-rank5 {
  background: rgba(255, 255, 255, .03);
  border-color: rgba(255, 255, 255, .06)
}

.dt-icon {
  font-size: 12px
}

.dt-pos {
  font-size: 9px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700
}

.dt-name {
  color: var(--text);
  font-weight: 600;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis
}

.dt-count {
  font-size: 9px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace
}

.bar-sep {
  flex: 1
}

.cashback-txt {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap
}

.cashback-txt b {
  color: var(--green)
}

.dt-saiba {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(200, 155, 60, .1);
  border: 1px solid rgba(200, 155, 60, .25);
  color: var(--gold2);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap
}

.dt-saiba:hover {
  background: rgba(200, 155, 60, .2)
}

@media(max-width:768px) {
  .dt-rank4, .dt-rank5 { display: none }
  .dt-name { max-width: 45px }
  .cashback-txt { display: none }
}

/* MAIN */
.main {
  padding: 108px 14px 80px;
  max-width: 1280px;
  margin: 0 auto
}

/* STORE */
/* ─── STORE ─── */
.store-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap
}

.tabs {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  width: fit-content
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: 'Inter', sans-serif;
  transition: all .15s;
  white-space: nowrap
}

.tab-btn.active {
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  color: #fff;
  box-shadow: 0 2px 12px rgba(59, 130, 246, .4)
}

.tab-hint {
  font-size: 11px;
  color: var(--muted);
  margin-left: 8px;
  align-self: center
}

/* Filter bar */
.fbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap
}

.fsearch {
  flex: 1;
  min-width: 200px;
  max-width: 460px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px
}

.fsearch input {
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  width: 100%
}

.fsearch input::placeholder {
  color: var(--muted)
}

/* Dropdown filters */
.fdrop {
  position: relative;
  display: inline-block
}

.fdrop-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 13px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s
}

.fdrop-btn:hover,
.fdrop-btn.open {
  border-color: var(--blue);
  color: var(--blue)
}

.fdrop-btn .caret {
  font-size: 9px;
  color: var(--muted);
  margin-left: 2px
}

.fdrop-menu {
  position: absolute;
  top: calc(100%+4px);
  left: 0;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  z-index: 500;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .7);
  display: none
}

.fdrop-menu.open {
  display: block
}

.fdrop-item {
  padding: 9px 16px;
  font-size: 12px;
  cursor: pointer;
  transition: background .12s;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace
}

.fdrop-item:hover {
  background: rgba(61, 139, 255, .08)
}

.fdrop-item.active {
  background: rgba(61, 139, 255, .12);
  color: var(--blue)
}

.fdrop-item .check {
  width: 14px;
  color: var(--blue);
  font-size: 12px;
  flex-shrink: 0
}

.fdrop-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0
}

.fclear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  transition: all .15s;
  flex-shrink: 0
}

.fclear-btn:hover {
  border-color: var(--danger);
  color: var(--danger)
}

/* ─── CREDIT CARD GRID ─── */
.cgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  contain: layout
}

.cc-wrap {
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  border: none;
  transition: transform .25s, box-shadow .25s;
  will-change: transform;
  padding: 0 0 4px
}

.cc-skeleton {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.03) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite linear;
  border-radius: 4px;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.cc-wrap:hover {
  transform: scale(1.02);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .5)
}

/* Card face */
.cc-face {
  position: relative;
  padding: 14px 18px;
  aspect-ratio: 1.586/1;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1)
}

.cc-face::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIi8+PC9zdmc+");
  opacity: .5;
  pointer-events: none;
  z-index: 1
}

.cc-face > * { position: relative; z-index: 2 }

.cc-blob-light,
.cc-blob-dark {
  position: absolute;
  width: 192px;
  height: 192px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
  z-index: 1
}

.cc-blob-light {
  right: -64px;
  top: -64px;
  background: rgba(255, 255, 255, .1)
}

.cc-blob-dark {
  left: -64px;
  bottom: -64px;
  background: rgba(0, 0, 0, .1)
}

.cc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 4px
}

.cc-bank {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .9);
  text-transform: uppercase;
  letter-spacing: .5px;
  max-width: 55%;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5)
}

.cc-new {
  background: rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .9);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 8px;
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  margin-left: 5px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .2);
  white-space: nowrap
}

/* Brand logos (Cloud Store style) */
.cc-brand {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 54px
}

.brand-visa {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.3))
}

.brand-mc {
  display: flex;
  position: relative;
  width: 46px;
  height: 28px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.3))
}

.brand-mc .mc1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eb001b;
  opacity: .9
}

.brand-mc .mc2 {
  position: absolute;
  left: 16px;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f79e1b;
  opacity: .9
}

.brand-amex {
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
  background: rgba(255, 255, 255, .15);
  padding: 3px 8px;
  border-radius: 4px;
  backdrop-filter: blur(4px)
}

.brand-elo-svg {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3))
}

.brand-elo {
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px
}

.brand-other {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .7)
}

/* Level badge (Cloud Store glass pill) */
.cc-level {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  letter-spacing: .5px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, .2);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(0,0,0,.15)
}

/* Chip */
.cc-chip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px
}

.cc-chip-svg {
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3))
}

.cc-chip {
  width: 30px;
  height: 22px;
  background: linear-gradient(135deg, #F5E6A3, #D4AF37, #C9A227);
  border-radius: 4px;
  position: relative;
  flex-shrink: 0
}

.cc-chip::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0, 0, 0, .3)
}

.cc-chip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, .3)
}

.cc-type {
  font-size: 10px;
  color: rgba(255, 255, 255, .6);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 1px;
  text-transform: uppercase
}

/* Card number (Cloud Store style) */
.cc-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 2.5px;
  margin-bottom: 4px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .3)
}

/* Footer of card face */
.cc-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between
}

.cc-dados {
  display: flex;
  align-items: center;
  gap: 5px
}

.dados-badge {
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .9);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  backdrop-filter: blur(4px)
}

.cc-cpf {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, .55);
  margin-left: 4px
}

.cc-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
  letter-spacing: .5px
}

/* Buy button (Cloud Store style) */
.cc-buy {
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 8px;
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
  letter-spacing: .5px;
  backdrop-filter: blur(4px)
}

.cc-buy:hover:not(:disabled) {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .35);
  color: #fff
}

.cc-buy:disabled {
  color: rgba(255, 255, 255, .2);
  border-color: rgba(255, 255, 255, .08);
  cursor: not-allowed
}

/* OOS overlay */
.cc-oos {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, .4);
  letter-spacing: 2px
}

/* ─── CARD GRADIENTS ─── */
.cg-nubank {
  background: linear-gradient(to right bottom, #7c3aed, #8b5cf6, #6d28d9)
}

.cg-gold {
  background: linear-gradient(to right bottom, #f59e0b, #facc15, #d97706)
}

.cg-classic {
  background: linear-gradient(to right bottom, #2563eb, #3b82f6, #4338ca)
}

.cg-platinum {
  background: linear-gradient(to right bottom, #94a3b8, #cbd5e1, #64748b)
}

.cg-black {
  background: linear-gradient(to right bottom, #18181b, #27272a, #09090b)
}

.cg-infinite {
  background: linear-gradient(to right bottom, #422006, #18181b, #451a03)
}

.cg-business {
  background: linear-gradient(to right bottom, #1e40af, #1d4ed8, #312e81)
}

.cg-signature {
  background: linear-gradient(to right bottom, #4338ca, #4f46e5, #6b21a8)
}

.cg-standard {
  background: linear-gradient(to right bottom, #dc2626, #f97316, #b91c1c)
}

.cg-nanquim {
  background: linear-gradient(to right bottom, #eab308, #fbbf24, #f97316)
}

.cg-electron {
  background: linear-gradient(to right bottom, #0ea5e9, #38bdf8, #0284c7)
}

.cg-default {
  background: linear-gradient(to right bottom, #1e3a8a, #3b82f6, #1e40af)
}

/* Level badge colors (Cloud Store style) */
.lv-gold {
  background: rgba(120, 53, 15, .4);
  color: #fde68a;
  border: 1px solid rgba(252, 211, 77, .5)
}

.lv-classic {
  background: rgba(55, 65, 81, .4);
  color: #e5e7eb;
  border: 1px solid rgba(156, 163, 175, .5)
}

.lv-platinum {
  background: rgba(255, 255, 255, .3);
  color: #27272a;
  border: 1px solid rgba(161, 161, 170, .5)
}

.lv-black {
  background: rgba(0, 0, 0, .6);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .3)
}

.lv-infinite {
  background: rgba(69, 26, 3, .5);
  color: #fef3c7;
  border: 1px solid rgba(253, 224, 71, .3)
}

.lv-business,
.lv-businesscard,
.lv-empresarial {
  background: rgba(30, 58, 138, .5);
  color: #bfdbfe;
  border: 1px solid rgba(96, 165, 250, .3)
}

.lv-signature {
  background: rgba(49, 46, 129, .5);
  color: #c7d2fe;
  border: 1px solid rgba(129, 140, 248, .3)
}

.lv-standard {
  background: rgba(255, 255, 255, .2);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .3)
}

.lv-debit {
  background: rgba(0, 180, 100, .25);
  color: #80ffb0;
  border: 1px solid rgba(0, 180, 100, .4)
}

.lv-corporate,
.lv-corporativo {
  background: rgba(60, 0, 180, .3);
  color: #b080ff;
  border: 1px solid rgba(60, 0, 180, .5)
}

.lv-prepago,
.lv-prepaid {
  background: rgba(200, 80, 0, .3);
  color: #ffa060;
  border: 1px solid rgba(200, 80, 0, .5)
}

.lv-default {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .7);
  border: 1px solid rgba(255, 255, 255, .15)
}

/* ─── MEUS CARTÕES ─── */
.my-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 16px
}

/* ── Card wrapper ── */
.my-card-wrap {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow .2s
}

.my-card-wrap:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, .5)
}

/* ── Card face ── */
.my-card-face {
  position: relative;
  padding: 24px 26px 20px;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  overflow: hidden
}

.my-card-face::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .07) 0%, transparent 55%);
  pointer-events: none
}

.my-card-face::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 45%;
  height: 200%;
  background: rgba(255, 255, 255, .04);
  transform: rotate(20deg);
  pointer-events: none
}

/* top row */
.my-cface-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 2px
}

.my-cface-bank {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, .7);
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  max-width: 200px;
  line-height: 1.3
}

/* chip row */
.my-cface-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  margin-top: 14px
}

/* card number */
.my-card-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 4px;
  flex: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  padding-bottom: 16px
}

/* bottom */
.my-card-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: auto
}

.my-card-holder {
  font-size: 8px;
  color: rgba(255, 255, 255, .45);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
  font-family: 'JetBrains Mono', monospace
}

.my-card-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.my-card-cpf {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, .5);
  margin-top: 2px;
  letter-spacing: .3px
}

.my-exp-block {
  text-align: right;
  flex-shrink: 0
}

.my-exp-lbl {
  font-size: 8px;
  color: rgba(255, 255, 255, .4);
  letter-spacing: .8px;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 4px;
  text-transform: uppercase
}

.my-exp-row {
  display: flex;
  gap: 18px;
  justify-content: flex-end
}

.my-exp-col {
  text-align: center
}

.my-exp-val,
.my-cvv-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  color: #fff;
  font-weight: 800;
  display: block;
  line-height: 1
}

.my-exp-sub {
  font-size: 7px;
  color: rgba(255, 255, 255, .35);
  font-family: 'JetBrains Mono', monospace;
  text-align: center;
  margin-top: 3px;
  letter-spacing: .8px
}

/* ── Action bar (Note · Pipe · Tudo · delete) ── */
.my-actions-bar {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  gap: 8px;
  flex-wrap: wrap
}

.my-time-price {
  display: flex;
  flex-direction: column;
  gap: 1px
}

.my-time-tag {
  font-size: 11px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace
}

.my-btn-grp {
  display: flex;
  gap: 5px
}

.my-act-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--muted);
  transition: all .14s;
  white-space: nowrap
}

.my-act-btn:hover {
  border-color: var(--blue);
  color: var(--blue)
}

.my-act-btn.act-tudo {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff
}

.my-act-btn.act-tudo:hover {
  filter: brightness(1.15)
}

.my-act-btn.act-del {
  border-color: rgba(255, 51, 85, .25);
  color: rgba(255, 51, 85, .55);
  background: transparent;
  padding: 5px 9px
}

.my-act-btn.act-del:hover {
  background: rgba(255, 51, 85, .1);
  border-color: var(--danger);
  color: var(--danger)
}

/* ── Status row ── */
.my-status-row {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  gap: 10px
}

.my-row-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0
}

.my-row-dot.blue {
  background: var(--blue)
}

.my-row-dot.gold {
  background: var(--gold2)
}

.my-row-lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  min-width: 54px
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 200, 100, .1);
  border: 1px solid rgba(0, 200, 100, .25);
  color: #00c864;
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 10px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace
}

.live-dot {
  width: 5px;
  height: 5px;
  background: #00c864;
  border-radius: 50%;
  animation: pulse .9s infinite
}

.completo-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 180, 255, .1);
  border: 1px solid rgba(0, 180, 255, .25);
  color: var(--blue);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .3px
}

.verificar-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 7px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all .14s
}

.verificar-btn:hover {
  border-color: var(--blue);
  color: var(--blue)
}

/* ── Titular row (colapsável) ── */
.my-titular-row {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  gap: 10px;
  user-select: none;
  transition: background .14s
}

.my-titular-row:hover {
  background: rgba(255, 255, 255, .02)
}

.my-cpf-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text);
  font-weight: 700;
  margin-left: auto
}

.my-expand-arrow {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform .2s
}

.my-expand-arrow.open {
  transform: rotate(180deg)
}

/* ── Titular expanded panel ── */
.my-titular-panel {
  display: none;
  border-top: 1px solid var(--border)
}

.my-titular-panel.open {
  display: block
}

.my-titular-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .04)
}

.my-titular-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--muted)
}

.my-titular-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0
}

.my-titular-key {
  font-size: 9px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .8px
}

.my-titular-val {
  font-size: 12px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  overflow-wrap: break-word
}

.my-copy-titular-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, .03);
  border: none;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all .14s
}

.my-copy-titular-btn:hover {
  background: rgba(61, 139, 255, .08);
  color: var(--blue)
}

.my-titular-btns {
  display: flex;
  gap: 0;
}

.my-titular-btns .my-copy-titular-btn {
  flex: 1;
  border-radius: 0;
}

.my-titular-btns .my-copy-titular-btn:first-child {
  border-right: 1px solid var(--border);
}

.my-cpf-consult-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1;
  padding: 12px;
  background: rgba(255, 255, 255, .03);
  border: none;
  border-top: 1px solid var(--border);
  color: #f59e0b;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all .14s;
}

.my-cpf-consult-btn:hover {
  background: rgba(245, 158, 11, .08);
  color: #fbbf24;
}

.my-cpf-consult-btn:disabled {
  opacity: .5;
  cursor: wait;
}

.my-cpf-result {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.cpf-card-base {
  margin-bottom: 10px;
}

.cpf-card-base:last-child {
  margin-bottom: 0;
}

.cpf-card-base-hdr {
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  padding: 6px 10px;
  border-radius: 6px 6px 0 0;
  letter-spacing: .5px;
}

.cpf-card-base-hdr.b1 { background: rgba(59, 130, 246, .15); color: #60a5fa; }
.cpf-card-base-hdr.b2 { background: rgba(16, 185, 129, .15); color: #34d399; }
.cpf-card-base-hdr.b3 { background: rgba(168, 85, 247, .15); color: #c084fc; }

.cpf-card-base-body {
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 8px;
}

.cpf-card-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 4px 6px;
  font-size: 11px;
  border-bottom: 1px solid rgba(255,255,255,.03);
}

.cpf-card-row:last-child { border-bottom: none; }

.cpf-card-key {
  color: var(--muted);
  font-weight: 600;
  min-width: 100px;
  flex-shrink: 0;
}

.cpf-card-val {
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  text-align: right;
  word-break: break-all;
}

.cpf-card-section {
  padding: 4px 6px;
}

.cpf-card-section strong {
  font-size: 11px;
  color: var(--blue);
  display: block;
  margin-bottom: 4px;
}

/* ── Search ── */
.my-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 16px;
  margin-bottom: 20px;
  transition: border-color .15s
}

.my-search:focus-within {
  border-color: rgba(61, 139, 255, .35)
}

.my-search input {
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  width: 100%
}

.my-search input::placeholder {
  color: var(--muted)
}

/* ── Misc ── */
.my-info-bar,
.my-dados-strip,
.my-meta,
.my-meta-price,
.full-badge,
.my-info-label,
.my-cpf-val,
.my-dados-item,
.my-dados-label,
.my-dados-val,
.my-actions,
.my-row-icon,
.my-row-label {
  display: none
}

@media(max-width:768px) {
  .cgrid {
    grid-template-columns: 1fr
  }

  .my-grid {
    grid-template-columns: 1fr
  }

  .fdrop-menu {
    min-width: 200px
  }
}

/* PROGRESS */
#stImportProgress {
  margin-bottom: 10px
}

/* PERMISSIONS */
.perm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .15s;
  user-select: none
}

.perm-on {
  background: rgba(0, 200, 100, .12);
  border-color: rgba(0, 200, 100, .35);
  color: #00c864
}

.perm-off {
  background: rgba(255, 255, 255, .04);
  border-color: var(--border);
  color: var(--muted)
}

/* MODALS */
.mo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .9);
  backdrop-filter: blur(8px);
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  padding: 14px
}

.mo.open {
  opacity: 1;
  pointer-events: all
}

.mc {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  width: 100%;
  max-width: 420px;
  transform: translateY(12px) scale(.97);
  transition: all .2s;
  position: relative;
  max-height: 92vh;
  overflow-y: auto
}

.mo.open .mc {
  transform: none
}

.mc-lg {
  max-width: 640px
}

.mclose {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1
}

.mclose:hover {
  color: var(--text)
}

.mc-brand {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 19px;
  letter-spacing: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px
}

.mc-title {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 4px
}

.mc-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 18px;
  line-height: 1.6
}

.divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0
}

.divider span {
  font-size: 11px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border)
}

.drow {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px
}

.drow .k {
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace
}

.drow .v {
  font-weight: 600
}

/* TERMS */
.terms-scroll {
  max-height: 180px;
  overflow-y: auto;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted)
}

.terms-scroll h4 {
  color: var(--text);
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 700
}

.terms-scroll p {
  margin-bottom: 7px
}

/* STATUS BADGES */
.sbadge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace
}

.sb-ok {
  background: rgba(0, 200, 150, .12);
  color: var(--green);
  border: 1px solid rgba(0, 200, 150, .3)
}

.sb-sold {
  background: rgba(61, 139, 255, .12);
  color: var(--blue);
  border: 1px solid rgba(61, 139, 255, .3)
}

.sb-empty {
  background: rgba(255, 51, 85, .12);
  color: var(--danger);
  border: 1px solid rgba(255, 51, 85, .3)
}

.sb-warn {
  background: rgba(255, 140, 0, .12);
  color: var(--orange);
  border: 1px solid rgba(255, 140, 0, .3)
}

/* ADMIN */
.admin-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  height: 52px;
  background: rgba(9, 11, 16, .98);
  border-bottom: 1px solid rgba(255, 51, 85, .2);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 8px
}

.admin-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  transition: all .15s
}

.admin-menu-toggle:hover {
  border-color: var(--blue);
  color: var(--blue)
}

.aside-sep {
  height: 1px;
  background: var(--border);
  margin: 6px 0
}

.admin-sidebar {
  position: fixed;
  top: 52px;
  left: 0;
  bottom: 0;
  width: 195px;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
  z-index: 100
}

.admin-content {
  margin-left: 195px;
  padding: 72px 20px 40px;
  min-height: 100vh
}

.aside-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: 'Inter', sans-serif;
  width: 100%;
  text-align: left;
  transition: all .15s;
  text-decoration: none;
}

.aside-btn:hover {
  background: rgba(255, 255, 255, .04);
  color: var(--text)
}

.aside-btn.active {
  background: rgba(61, 139, 255, .1);
  color: var(--blue)
}

.admin-section {
  display: none
}

.admin-section.active {
  display: block
}

.a-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 2px;
  margin-bottom: 4px
}

.a-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 18px;
  line-height: 1.5
}

.a-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 14px
}

.a-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 10px;
  margin-bottom: 18px
}

.a-stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 16px
}

.a-stat .n {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  line-height: 1;
  color: var(--gold2)
}

.a-stat .l {
  font-size: 11px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .8px
}

/* Profile / detail row */
.drow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.drow .k {
  font-size: 12px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
}

.drow .v {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
}

.a-stat .delta {
  font-size: 11px;
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace
}

.a-table {
  width: 100%;
  border-collapse: collapse
}

.a-table th {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  font-family: 'JetBrains Mono', monospace;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  background: rgba(255, 255, 255, .02)
}

.a-table td {
  padding: 10px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle
}

.a-table tr:last-child td {
  border-bottom: none
}

.a-table tr:hover td {
  background: rgba(255, 255, 255, .015)
}

/* REVENUE CHART */
.rev-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  margin-bottom: 8px;
  padding: 0 4px
}

.rev-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 28px
}

.rev-bar {
  width: 100%;
  background: rgba(61, 139, 255, .15);
  border-radius: 4px 4px 0 0;
  border: 1px solid rgba(61, 139, 255, .3);
  transition: all .3s;
  cursor: pointer;
  position: relative;
  min-height: 4px
}

.rev-bar:hover {
  background: rgba(61, 139, 255, .35)
}

.rev-bar-val {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--blue);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s
}

.rev-bar:hover .rev-bar-val {
  opacity: 1
}

.rev-bar-label {
  font-size: 9px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  text-align: center
}

/* PIX */
.pix-qr-wrap {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 14px auto;
  width: fit-content
}

.pix-copypaste {
  background: var(--bg3);
  border: 1px solid var(--pix);
  border-radius: 8px;
  padding: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  word-break: break-all;
  color: var(--pix);
  margin-bottom: 12px;
  cursor: pointer;
  transition: background .15s
}

.pix-copypaste:hover {
  background: rgba(50, 188, 173, .08)
}

.pix-timer {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px
}

.pix-timer b {
  color: var(--orange);
  font-size: 18px
}

.pix-status-checking {
  text-align: center;
  padding: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--blue)
}

.pix-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--blue);
  border-radius: 50%;
  margin-right: 6px;
  animation: pulse 1s infinite
}

@keyframes pulse {
  0%, 100% { opacity:1; transform:scale(1); }
  50% { opacity:.4; transform:scale(.8); }
}

@keyframes rcPulse {
  0%, 100% { opacity:1; transform:scale(1); }
  50% { opacity:.3; transform:scale(.7); }
}

.pm-btn { padding:5px 12px; cursor:pointer; border:none; background:transparent; color:var(--muted); font-size:11px; font-weight:600; font-family:'Syne',sans-serif; transition:all .15s; }
.pm-btn:hover { color:var(--text); }
.pm-btn.pm-active { background:rgba(61,139,255,.15); color:var(--blue); }

/* PURCHASE CARDS */
.ph-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 8px
}

.ph-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 6px
}

.ph-title {
  font-size: 13px;
  font-weight: 700
}

.ph-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted)
}

.ph-price {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  color: var(--gold2)
}

.ph-cred {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 8px
}

.cred-row {
  display: flex;
  align-items: flex-start;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  gap: 8px
}

.cred-row:last-child {
  border-bottom: none
}

.cred-key {
  color: var(--muted);
  min-width: 110px;
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: .5px;
  padding-top: 1px
}

.cred-val {
  color: var(--green);
  font-weight: 600;
  word-break: break-all;
  flex: 1
}

.cred-val.card-num {
  color: var(--gold2);
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: 700
}

.cred-val.highlight {
  color: var(--blue)
}

.cred-sep {
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid var(--border);
  padding: 6px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 2px
}

/* LOCK */
#lockScreen {
  position: fixed;
  inset: 0;
  background: #090b10;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  padding: 14px;
  overflow-y: auto
}

.lock-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 52px;
  letter-spacing: 6px;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center
}

.lock-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  width: 100%;
  max-width: 400px
}

/* LOGIN LOADING */
.login-loading {
  text-align: center;
  padding: 24px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--blue)
}

.spin {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(61, 139, 255, .2);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin-bottom: 10px
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

/* MOBILE */
#mobileNav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 300;
  background: rgba(9, 11, 16, .98);
  border-top: 1px solid var(--border);
  padding: 6px 0;
  padding-bottom: env(safe-area-inset-bottom)
}

.mnav-items {
  display: flex;
  justify-content: space-around
}

.mnav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 5px 10px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  border-radius: 8px
}

.mnav-btn.active {
  color: var(--blue)
}

/* TOGGLE SWITCH */
.toggle-sw { position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0 }
.toggle-sw input { opacity:0;width:0;height:0 }
.toggle-sw .slider { position:absolute;inset:0;background:var(--bg3);border:1px solid var(--border);border-radius:22px;cursor:pointer;transition:.25s }
.toggle-sw .slider::before { content:'';position:absolute;height:16px;width:16px;left:2px;bottom:2px;background:#666;border-radius:50%;transition:.25s }
.toggle-sw input:checked + .slider { background:rgba(34,197,94,.25);border-color:rgba(34,197,94,.5) }
.toggle-sw input:checked + .slider::before { transform:translateX(18px);background:#22c55e }

/* TOAST */
.toast {
  position: fixed;
  bottom: 20px;
  right: 14px;
  background: var(--bg2);
  border: 1px solid rgba(61, 139, 255, .35);
  border-radius: 9px;
  padding: 12px 18px;
  font-size: 13px;
  z-index: 1000;
  transform: translateX(280px);
  opacity: 0;
  transition: all .3s;
  max-width: 300px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5)
}

.toast.show {
  transform: translateX(0);
  opacity: 1
}

.toast.tg {
  border-color: rgba(0, 200, 150, .4)
}

.toast.tr {
  border-color: rgba(255, 51, 85, .4)
}

.toast.tp {
  border-color: rgba(50, 188, 173, .5)
}

/* EMPTY STATE */
.empty-state {
  text-align: center;
  padding: 50px 20px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px
}

.empty-state .ei {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: .4
}

/* PAGE */
.page {
  display: none
}

.page.active {
  display: block
}

/* RESPONSIVE */
@media(max-width:768px) {
  #mobileNav {
    display: block
  }

  .main {
    padding: 110px 12px 90px
  }

  .pgrid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px
  }

  .pc-img {
    height: 100px
  }

  .pc-emoji {
    font-size: 40px
  }

  .admin-sidebar {
    display: none;
    position: fixed;
    top: 52px;
    left: 0;
    bottom: 0;
    width: 220px;
    z-index: 250;
    background: var(--bg2);
    border-right: 1px solid var(--border);
    box-shadow: 8px 0 30px rgba(0,0,0,.6)
  }

  .admin-sidebar.mobile-open {
    display: flex
  }

  .admin-menu-toggle {
    display: flex
  }

  .admin-nav-label {
    display: none
  }

  .admin-content {
    margin-left: 0;
    padding: 72px 12px 40px
  }

  #topNav .nav-btn span {
    display: none
  }

  .a-stat-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .mc {
    padding: 20px
  }

  .rev-chart {
    height: 80px
  }

  .cc-face {
    padding: 12px 14px;
    height: auto;
    aspect-ratio: 1.586/1;
    min-height: 190px
  }

  .cc-num {
    font-size: 13px;
    letter-spacing: 2px
  }

  .cc-bank {
    font-size: 10px
  }

  .cc-price {
    font-size: 14px
  }

  .cc-level {
    font-size: 8px
  }

  .brand-visa-svg {
    height: 16px
  }

  .brand-visa {
    font-size: 19px
  }

  .fbar {
    gap: 6px
  }

  .fsearch {
    min-width: 0;
    flex: 1
  }

  .fdrop-btn {
    font-size: 12px;
    padding: 8px 10px
  }

  .cgrid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px
  }

  .lock-logo {
    font-size: 38px
  }

  .lock-card {
    padding: 22px
  }

  .mc-title {
    font-size: 16px
  }

  .mc-brand {
    font-size: 17px
  }

  .a-title {
    font-size: 24px
  }

  .inp {
    font-size: 15px;
    padding: 12px 14px
  }

  /* bigger on mobile for touch */
  .btn {
    font-size: 13px;
    padding: 11px 16px
  }

  .btn-sm {
    font-size: 12px;
    padding: 8px 12px
  }

  .toast {
    bottom: 80px;
    right: 10px;
    left: 10px;
    max-width: none;
    font-size: 13px
  }

  .a-table td {
    font-size: 12px;
    padding: 8px
  }

  .drow {
    font-size: 13px
  }

  .hint {
    font-size: 12px
  }

  .tabs {
    gap: 4px
  }

  .tab-btn {
    font-size: 12px;
    padding: 6px 12px
  }

  .tab-hint {
    font-size: 11px
  }

  .ph-title {
    font-size: 14px
  }

  .cred-key {
    min-width: 90px;
    font-size: 11px
  }

  .cred-val {
    font-size: 12px
  }
}

@media(max-width:480px) {
  .cgrid {
    grid-template-columns: 1fr
  }

  .pgrid {
    grid-template-columns: 1fr 1fr
  }

  .fbar {
    flex-wrap: wrap
  }

  .fsearch {
    min-width: calc(100% - 110px);
    flex: 1
  }

  .mc {
    max-height: 95vh
  }

  body {
    font-size: 14px
  }
}

@media(max-width:360px) {
  .cgrid {
    grid-template-columns: 1fr
  }

  .cc-face {
    height: auto;
    aspect-ratio: 1.586/1;
    min-height: 180px
  }

  .cc-num {
    font-size: 12px;
    letter-spacing: 1px
  }
}

/* AVATAR */
.av0 {
  background: #7b4fff
}

.av1 {
  background: #0bc4ff
}

.av2 {
  background: #c89b3c
}

.av3 {
  background: #ff4466
}

.av4 {
  background: #00c896
}

.av5 {
  background: #ff9040
}

.av6 {
  background: #3d8bff
}

.av7 {
  background: #ff60a0
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(8px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.fade-in {
  animation: fadeUp .2s ease both
}

/* EDIT INLINE */
.editable {
  cursor: pointer;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 1px
}

.editable:hover {
  color: var(--blue);
  border-color: var(--blue)
}

/* CHK Toggle */
.chk-toggle {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--border);
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, .05)
}

.chk-toggle.on {
  background: var(--green)
}

.chk-toggle-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4)
}

.chk-toggle.on .chk-toggle-dot {
  transform: translateX(20px)
}

/* CHK Stock Badge */
.chk-badge-live {
  background: rgba(0, 200, 100, .15);
  color: var(--green);
  border: 1px solid rgba(0, 200, 100, .3);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700
}

.chk-badge-die {
  background: rgba(255, 51, 85, .12);
  color: var(--danger);
  border: 1px solid rgba(255, 51, 85, .3);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700
}

.chk-badge-pend {
  background: rgba(61, 139, 255, .12);
  color: var(--blue);
  border: 1px solid rgba(61, 139, 255, .25);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700
}

/* CHK checking overlay in import */
.chk-progress-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-top: 14px
}

.chk-progress-bar-track {
  background: var(--bg3);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
  margin: 8px 0
}

.chk-progress-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--green), #00e8b0);
  transition: width .3s;
  box-shadow: 0 0 8px rgba(0, 200, 100, .5)
}

/* ─── RULES MODAL ─── */
.rules-modal {
  width: 95%;
  max-width: 780px;
  max-height: 92vh;
  background: #0c0e14;
  border: 1px solid rgba(255,51,85,.2);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,.8), 0 0 40px rgba(255,51,85,.06)
}

.rules-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 28px 18px;
  border-bottom: 1px solid rgba(255,51,85,.15);
  background: rgba(255,51,85,.03);
  flex-shrink: 0
}

.rules-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255,51,85,.1);
  border: 1px solid rgba(255,51,85,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.rules-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 800;
  color: #ff6b7a;
  letter-spacing: 1px;
  text-transform: uppercase
}

.rules-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px
}

.rules-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0
}

.rules-list {
  padding: 0 20px
}

.rule-item {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  margin: 6px 0;
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.04);
  transition: background .15s
}

.rule-item:hover {
  background: rgba(255,255,255,.04)
}

.rule-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.ri-green { background: rgba(0,200,100,.1); color: #00c864 }
.ri-blue { background: rgba(61,139,255,.1); color: #3d8bff }
.ri-orange { background: rgba(255,140,0,.1); color: #ff8c00 }
.ri-yellow { background: rgba(240,200,60,.1); color: #f0c83c }
.ri-red { background: rgba(255,51,85,.1); color: #ff3355 }
.ri-purple { background: rgba(123,79,255,.1); color: #7b4fff }

.rule-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: #e0c8a0;
  margin-bottom: 4px
}

.rule-desc {
  font-size: 11px;
  color: rgba(255,255,255,.45);
  line-height: 1.5
}

.rules-footer {
  padding: 18px 24px 22px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.3);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-shrink: 0
}

.rules-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  flex: 1;
  font-size: 11px;
  color: rgba(255,255,255,.6);
  line-height: 1.5;
  user-select: none
}

.rules-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid rgba(255,51,85,.4);
  background: rgba(255,51,85,.05);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
  position: relative;
  transition: all .15s
}

.rules-check input[type="checkbox"]:checked {
  background: #ff3355;
  border-color: #ff3355
}

.rules-check input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 12px;
  font-weight: 800
}

.rules-confirm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 28px;
  background: #0000ff;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .2s;
  text-transform: uppercase;
  min-width: 280px
}

.rules-confirm-btn:hover:not(:disabled) {
  background: #2222ff;
  box-shadow: 0 4px 20px rgba(0,0,255,.4);
  transform: translateY(-1px)
}

.rules-confirm-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
  transform: none
}

/* Dados Full badge on cards (Cloud Store blue pill) */
.cc-dados-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(59, 130, 246, .3);
  color: #93c5fd;
  border: none;
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  letter-spacing: .3px;
  backdrop-filter: blur(4px)
}

.cc-dados-tag.partial {
  background: rgba(168, 85, 247, .2);
  color: #c4b5fd;
  opacity: .6
}

@media (max-width: 700px) {
  .rules-modal { max-height: 95vh }
  .rules-footer { flex-direction: column; gap: 12px }
  .rules-confirm-btn { width: 100%; min-width: unset }
  .rules-header { padding: 16px 18px 14px }
  .rules-list { padding: 0 12px }
  .rule-item { padding: 10px 12px; gap: 10px }
  .rules-title { font-size: 13px }
}

/* ── Lote Cards ─────────────────────────────────────────────────── */
.lote-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .2s
}
.lote-card:hover { border-color: rgba(61,139,255,.3) }

.lote-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  gap: 10px;
  flex-wrap: wrap;
  transition: background .15s
}
.lote-header:hover { background: rgba(61,139,255,.04) }

.lote-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}
.lote-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.lote-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  background: rgba(61,139,255,.1);
  padding: 2px 8px;
  border-radius: 5px
}
.lote-date {
  font-size: 11px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace
}
.lote-supplier {
  font-size: 11px;
  color: var(--text);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 5px
}

.lote-stat {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600
}
.lote-stat-avail { color: var(--green) }
.lote-stat-sold { color: var(--blue) }
.lote-stat-total { color: var(--muted) }

.lote-chevron {
  font-size: 14px;
  color: var(--muted);
  transition: transform .2s;
  width: 18px;
  text-align: center
}

.lote-details {
  padding: 0 16px 16px;
  border-top: 1px solid var(--border)
}

.lote-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin: 14px 0
}
.lote-meta-item {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center
}
.lote-meta-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px
}
.lote-meta-value {
  font-size: 14px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace
}
.lote-editable {
  cursor: pointer;
  transition: opacity .15s
}
.lote-editable:hover { opacity: .7 }

.lote-bin-tag {
  display: inline-block;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  background: rgba(61,139,255,.08);
  color: var(--blue);
  border: 1px solid rgba(61,139,255,.15);
  padding: 2px 8px;
  border-radius: 4px;
  margin: 2px 3px 2px 0
}
.lote-bins-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px
}

.lote-bin-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
  margin-bottom: 10px
}
.lote-bin-detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px
}

.lote-cards-table {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px
}
.lote-cards-table .a-table { margin: 0 }
.lote-cards-table .a-table th { position: sticky; top: 0; z-index: 1; background: var(--bg2) }

@media (max-width: 600px) {
  .lote-header { padding: 10px 12px }
  .lote-meta-grid { grid-template-columns: repeat(2, 1fr) }
  .lote-bin-detail-grid { grid-template-columns: 1fr }
}

/* ── Dashboard KPI ──────────────────────────────────────────────── */
.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 14px
}
.dash-kpi {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  transition: border-color .2s
}
.dash-kpi:hover { border-color: rgba(61,139,255,.3) }
.dash-kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0
}
.dash-kpi-data { flex: 1; min-width: 0 }
.dash-kpi-val {
  font-size: 22px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.1
}
.dash-kpi-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 2px
}
.dash-kpi-delta {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600
}

/* ── Dashboard Two Column ───────────────────────────────────────── */
.dash-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px
}
@media (max-width: 768px) {
  .dash-two-col { grid-template-columns: 1fr }
  .dash-kpi-grid { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 480px) {
  .dash-kpi-grid { grid-template-columns: 1fr }
}

/* ── Dashboard List Items ───────────────────────────────────────── */
.dash-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  gap: 10px
}
.dash-list-item:last-child { border-bottom: none }
.dash-list-left { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.dash-list-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0 }

/* ── Dashboard Revenue Chart ────────────────────────────────────── */
.dash-chart-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0
}
.dash-chart-val {
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--gold2);
  font-weight: 600;
  white-space: nowrap
}
.dash-chart-fill {
  width: 100%;
  background: linear-gradient(180deg, var(--blue), rgba(61,139,255,.4));
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: height .4s ease
}
.dash-chart-label {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap
}

/* ── LurBank Card ───────────────────────────────────────────────── */
.dash-lurbank-card {
  background: linear-gradient(135deg, rgba(0,200,100,.08), rgba(61,139,255,.08));
  border: 1px solid rgba(0,200,100,.2);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px
}
.dash-lurbank-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px
}
.dash-lurbank-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px
}
.dash-lurbank-item { text-align: center }
.dash-lurbank-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px
}
.dash-lurbank-val {
  font-size: 18px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace
}
@media (max-width: 480px) {
  .dash-lurbank-grid { grid-template-columns: 1fr }
}

/* ── Status badges extras ───────────────────────────────────────── */
.sbadge.sb-pending {
  background: rgba(255,140,0,.12);
  color: #ff8c00;
  border-color: rgba(255,140,0,.25)
}

/* ── GATE CARDS ────────────────────────────────────────────────── */
.gate-card { background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-bottom:10px; transition:border-color .15s,background .15s; }
.gate-card.gate-on { border-color:rgba(0,200,100,.2); }
.gate-card.gate-default { border-color:rgba(255,180,50,.3); background:rgba(255,180,50,.03); }
.gate-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.gate-card-info { flex:1; min-width:0; }
.gate-card-name { font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gate-card-url { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.gate-card-toggle { flex-shrink:0; cursor:pointer; }
.gate-card-meta { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.gate-badge { display:inline-flex; align-items:center; gap:3px; padding:3px 8px; border-radius:5px; font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600; letter-spacing:.3px; }
.gate-badge-ok { background:rgba(0,200,100,.08); color:var(--green); border:1px solid rgba(0,200,100,.15); }
.gate-badge-fail { background:rgba(255,51,85,.08); color:var(--danger); border:1px solid rgba(255,51,85,.15); }
.gate-card-actions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.btn-xs { padding:4px 8px; font-size:10px; border-radius:5px; font-weight:600; cursor:pointer; border:1px solid transparent; transition:all .15s; font-family:'Syne',sans-serif; }
.btn-xs.btn-gold { background:rgba(255,180,50,.12); color:var(--gold2); border-color:rgba(255,180,50,.2); }
.btn-xs.btn-gold:hover { background:rgba(255,180,50,.22); }
.btn-xs.btn-ghost { background:rgba(255,255,255,.05); color:var(--muted); border-color:var(--border); }
.btn-xs.btn-ghost:hover { background:rgba(255,255,255,.1); color:var(--text); }
.btn-xs.btn-danger { background:rgba(255,51,85,.1); color:var(--danger); border-color:rgba(255,51,85,.2); }
.btn-xs.btn-danger:hover { background:rgba(255,51,85,.2); }
.btn-xs.btn-green { background:rgba(0,200,100,.1); color:var(--green); border-color:rgba(0,200,100,.2); }
.btn-xs.btn-green:hover { background:rgba(0,200,100,.2); }
.btn-xs.btn-blue { background:rgba(61,139,255,.1); color:var(--blue); border-color:rgba(61,139,255,.2); }
.btn-xs.btn-blue:hover { background:rgba(61,139,255,.2); }

/* ── GIFT SUCCESS NOTIFICATION ─────────────────────────────────── */
.gift-notif { display:none; position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.7); backdrop-filter:blur(8px); align-items:center; justify-content:center; }
.gift-notif.show { display:flex; animation:giftFadeIn .3s ease; }
@keyframes giftFadeIn { from{opacity:0} to{opacity:1} }
.gift-notif-card { position:relative; text-align:center; padding:40px 48px; border-radius:20px; background:linear-gradient(160deg,#0d1117 0%,#161b22 100%); border:1px solid rgba(255,180,50,.25); box-shadow:0 0 60px rgba(255,180,50,.1),0 20px 60px rgba(0,0,0,.5); max-width:380px; width:90%; overflow:hidden; }
.gift-notif-glow { position:absolute; top:-40%; left:50%; transform:translateX(-50%); width:200px; height:200px; background:radial-gradient(circle,rgba(255,180,50,.15) 0%,transparent 70%); pointer-events:none; }
.gift-notif-icon { font-size:56px; margin-bottom:8px; animation:giftBounce .6s ease .2s both; }
@keyframes giftBounce { 0%{transform:scale(0) rotate(-15deg)} 50%{transform:scale(1.2) rotate(5deg)} 100%{transform:scale(1) rotate(0)} }
.gift-notif-title { font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:3px; color:var(--gold2); margin-bottom:4px; }
.gift-notif-value { font-family:'Bebas Neue',sans-serif; font-size:42px; letter-spacing:2px; color:#00c864; margin:8px 0; text-shadow:0 0 20px rgba(0,200,100,.3); animation:giftValuePop .4s ease .4s both; }
@keyframes giftValuePop { from{transform:scale(0.5);opacity:0} to{transform:scale(1);opacity:1} }
.gift-notif-sub { font-size:13px; color:var(--muted); margin-bottom:12px; }
.gift-notif-bal { font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--muted); margin-bottom:20px; }
.gift-notif-bal span { color:var(--green); font-weight:700; }
.gift-notif-btn { background:linear-gradient(135deg,rgba(255,180,50,.2),rgba(255,150,30,.35)); border:1px solid rgba(255,180,50,.3); color:var(--gold2); font-family:'Syne',sans-serif; font-size:13px; font-weight:700; padding:10px 32px; border-radius:10px; cursor:pointer; transition:all .15s; }
.gift-notif-btn:hover { background:linear-gradient(135deg,rgba(255,180,50,.35),rgba(255,150,30,.5)); transform:translateY(-1px); }

/* ── PROFILE HISTORY PANELS ────────────────────────────────────── */
.prof-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; }
@media (max-width:768px) { .prof-grid { grid-template-columns:1fr; } }
.prof-panel { background:var(--bg2); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.prof-panel-hd { display:flex; align-items:center; gap:8px; padding:14px 16px; border-bottom:1px solid var(--border); font-family:'Syne',sans-serif; font-size:13px; font-weight:700; }
.prof-panel-hd svg { flex-shrink:0; }
.prof-panel-body { max-height:420px; overflow-y:auto; }
.prof-panel-body::-webkit-scrollbar { width:4px; }
.prof-panel-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
.prof-panel-empty { padding:32px 16px; text-align:center; font-size:12px; color:var(--muted); }

.tx-row { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid rgba(255,255,255,.03); transition:background .1s; }
.tx-row:hover { background:rgba(255,255,255,.02); }
.tx-row:last-child { border-bottom:none; }
.tx-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.tx-icon.tx-gift { background:rgba(255,180,50,.1); }
.tx-icon.tx-pix { background:rgba(0,200,100,.1); }
.tx-icon.tx-purchase { background:rgba(61,139,255,.1); }
.tx-icon.tx-refund { background:rgba(231,76,60,.1); }
.tx-icon.tx-ref { background:rgba(155,89,182,.1); }
.tx-icon.tx-cpf { background:rgba(139,92,246,.1); }
.tx-icon.tx-sms { background:rgba(6,182,212,.1); }
.tx-info { flex:1; min-width:0; }
.tx-info-title { font-size:12px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tx-info-sub { font-size:10px; color:var(--muted); font-family:'JetBrains Mono',monospace; margin-top:2px; }
.tx-val { font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; white-space:nowrap; }
.tx-val.tx-pos { color:var(--green); }
.tx-val.tx-neg { color:var(--danger); }

.ph-row { padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.03); }
.ph-row:hover { background:rgba(255,255,255,.02); }
.ph-row:last-child { border-bottom:none; }
.ph-row-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.ph-row-bank { font-size:12px; font-weight:700; color:var(--text); }
.ph-row-price { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--gold2); font-weight:700; }
.ph-row-card { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:1px; }
.ph-row-meta { display:flex; align-items:center; gap:8px; margin-top:4px; font-size:10px; color:rgba(255,255,255,.3); font-family:'JetBrains Mono',monospace; }
.ph-row-badge { display:inline-flex; align-items:center; gap:3px; padding:2px 6px; border-radius:4px; font-size:9px; font-weight:700; letter-spacing:.5px; }
.ph-row-badge.brand-visa { background:rgba(61,139,255,.12); color:#3d8bff; }
.ph-row-badge.brand-master { background:rgba(255,87,34,.12); color:#ff5722; }
.ph-row-badge.brand-elo { background:rgba(255,215,0,.12); color:#ffd700; }
.ph-row-badge.brand-amex { background:rgba(0,200,150,.12); color:#00c896; }
.ph-row-badge.brand-other { background:rgba(255,255,255,.06); color:var(--muted); }

/* ── WHATSAPP NAV BUTTON ──────────────────────────────────────── */
.nav-wa-btn { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:rgba(37,211,102,.12); color:#25d366; transition:all .15s; text-decoration:none; }
.nav-wa-btn:hover { background:rgba(37,211,102,.25); transform:scale(1.1); }

/* ── NOTIFICATION BELL ────────────────────────────────────────── */
.nav-notif-wrap { position:relative; }
.nav-notif-btn { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.05); border:none; color:var(--muted); cursor:pointer; transition:all .15s; position:relative; }
.nav-notif-btn:hover { background:rgba(255,255,255,.1); color:var(--text); }
.nav-notif-badge { position:absolute; top:-2px; right:-2px; min-width:16px; height:16px; border-radius:8px; background:var(--danger); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:'JetBrains Mono',monospace; }
.nav-notif-panel { display:none; position:absolute; top:calc(100% + 8px); right:0; width:320px; max-height:400px; background:var(--bg2); border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.5); z-index:8000; overflow:hidden; }
.nav-notif-panel.open { display:block; animation:notifSlide .2s ease; }
@keyframes notifSlide { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.nav-notif-hd { padding:12px 16px; font-size:13px; font-weight:700; border-bottom:1px solid var(--border); font-family:'Syne',sans-serif; }
.nav-notif-list { max-height:340px; overflow-y:auto; }
.nav-notif-list::-webkit-scrollbar { width:4px; }
.nav-notif-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
.nav-notif-empty { padding:32px 16px; text-align:center; font-size:12px; color:var(--muted); }
.nav-notif-item { display:flex; gap:10px; padding:10px 16px; border-bottom:1px solid rgba(255,255,255,.03); cursor:pointer; transition:background .1s; }
.nav-notif-item:hover { background:rgba(255,255,255,.02); }
.nav-notif-item.unread { background:rgba(61,139,255,.04); }
.nav-notif-item.unread::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--blue); flex-shrink:0; margin-top:6px; }
.nav-notif-icon { width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.nav-notif-icon.ni-purchase { background:rgba(61,139,255,.1); }
.nav-notif-icon.ni-gift { background:rgba(255,180,50,.1); }
.nav-notif-icon.ni-vip { background:rgba(155,89,182,.1); }
.nav-notif-icon.ni-system { background:rgba(255,255,255,.05); }
.nav-notif-icon.ni-sms { background:rgba(0,200,100,.1); }
.nav-notif-title { font-size:12px; font-weight:600; color:var(--text); }
.nav-notif-msg { font-size:11px; color:var(--muted); margin-top:2px; line-height:1.3; }
.nav-notif-time { font-size:9px; color:var(--muted); font-family:'JetBrains Mono',monospace; margin-top:3px; }

/* ── CONSULTA CPF PAGE ────────────────────────────────────────── */
.cpf-page { max-width:700px; margin:0 auto; }
.cpf-title { font-family:'Syne',sans-serif; font-size:20px; font-weight:800; margin-bottom:20px; }
.cpf-search-row { display:flex; gap:10px; margin-bottom:14px; }
.cpf-input { flex:1; background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:13px 16px; color:var(--text); font-family:'JetBrains Mono',monospace; font-size:15px; letter-spacing:1px; outline:none; transition:border-color .15s; }
.cpf-input:focus { border-color:var(--blue); }
.cpf-input::placeholder { color:var(--muted); }
.cpf-search-btn { display:flex; align-items:center; gap:8px; padding:0 22px; border-radius:10px; background:var(--blue); border:none; color:#fff; font-family:'Syne',sans-serif; font-size:14px; font-weight:700; cursor:pointer; transition:all .15s; white-space:nowrap; }
.cpf-search-btn:hover { filter:brightness(1.15); transform:translateY(-1px); }
.cpf-search-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.cpf-search-btn svg { flex-shrink:0; }
.cpf-balance-warn { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--danger); margin-bottom:16px; }
.cpf-balance-warn svg { flex-shrink:0; }
.cpf-result { background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:20px; margin-bottom:20px; animation:cpfFade .3s ease; }
@keyframes cpfFade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.cpf-base-header { font-size:14px; font-weight:800; color:var(--text); padding:12px 0 6px; margin-top:10px; border-top:1px solid rgba(255,255,255,.06); font-family:'JetBrains Mono',monospace; }
.cpf-base-header:first-child { margin-top:0; border-top:none; padding-top:0; }
.cpf-result-section { margin-bottom:14px; }
.cpf-result-section:last-child { margin-bottom:0; }
.cpf-result-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--blue); margin-bottom:8px; font-family:'JetBrains Mono',monospace; }
.cpf-result-row { display:flex; gap:8px; padding:4px 0; font-size:12px; }
.cpf-result-label { color:var(--muted); min-width:120px; font-family:'JetBrains Mono',monospace; }
.cpf-result-value { color:var(--text); font-weight:600; word-break:break-word; }
.cpf-history-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); margin-bottom:12px; font-family:'JetBrains Mono',monospace; }
.cpf-history-empty { text-align:center; font-size:12px; color:var(--muted); padding:24px 0; }
.cpf-history-item { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:var(--bg3); border:1px solid var(--border); border-radius:8px; margin-bottom:6px; cursor:pointer; transition:border-color .15s; }
.cpf-history-item:hover { border-color:var(--blue); }
.cpf-history-cpf { font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600; color:var(--text); }
.cpf-history-date { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted); }
.cpf-loading { text-align:center; padding:20px 0; }
.cpf-loading .spin { margin:0 auto 8px; }

/* ── SMS PAGE ─────────────────────────────────────────────────── */
.sms-page { max-width:900px; margin:0 auto; }
.sms-header { display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.sms-header-icon { width:52px; height:52px; border-radius:14px; background:rgba(61,139,255,.1); border:1px solid rgba(61,139,255,.15); display:flex; align-items:center; justify-content:center; }
.sms-header-icon svg { color:var(--blue); }
.sms-header-text h2 { font-family:'Syne',sans-serif; font-size:20px; font-weight:800; margin-bottom:2px; }
.sms-header-text p { font-size:12px; color:var(--muted); }
.sms-tabs { display:flex; gap:6px; margin-bottom:24px; }
.sms-tab { display:flex; align-items:center; gap:6px; padding:10px 20px; border-radius:10px; border:1px solid var(--border); background:var(--bg3); color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; font-family:'Syne',sans-serif; }
.sms-tab:hover { border-color:rgba(255,255,255,.1); color:var(--text); }
.sms-tab.active { background:var(--blue); border-color:var(--blue); color:#fff; }
.sms-tab svg { flex-shrink:0; }

.sms-step { margin-bottom:24px; }
.sms-step-num { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:rgba(61,139,255,.12); color:var(--blue); font-size:11px; font-weight:700; font-family:'JetBrains Mono',monospace; margin-right:8px; }
.sms-step-label { font-size:14px; font-weight:700; color:var(--text); }

.sms-services-grid-old { display:none; }
.sms-svc-card { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px; border-radius:12px; background:var(--bg3); border:1px solid var(--border); cursor:pointer; transition:all .15s; }
.sms-svc-card:hover { border-color:var(--blue); background:rgba(61,139,255,.04); transform:translateY(-2px); }
.sms-svc-card.selected { border-color:var(--blue); background:rgba(61,139,255,.08); box-shadow:0 0 0 1px var(--blue); }
.sms-svc-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; }
.sms-svc-name { font-size:11px; font-weight:600; color:var(--text); text-align:center; line-height:1.2; }

.sms-search-bar { margin-top:10px; }
.sms-search-bar input { width:100%; background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:11px 14px; color:var(--text); font-size:13px; outline:none; transition:border-color .15s; }
.sms-search-bar input:focus { border-color:var(--blue); }
.sms-search-bar input::placeholder { color:var(--muted); }

.sms-country-select-wrap { position:relative; margin-top:12px; }
.sms-country-dropdown { width:100%; display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius:10px; background:var(--bg3); border:1px solid var(--border); cursor:pointer; transition:all .15s; color:var(--text); font-size:13px; font-weight:600; }
.sms-country-dropdown:hover:not(:disabled) { border-color:rgba(255,255,255,.12); }
.sms-country-dropdown:disabled { opacity:.5; cursor:not-allowed; }
.sms-country-dropdown.open { border-color:var(--blue); border-radius:10px 10px 0 0; }
.sms-country-dd-icon { font-size:18px; }
.sms-country-dd-text { flex:1; text-align:left; }
.sms-country-dd-arrow { flex-shrink:0; transition:transform .15s; color:var(--muted); }
.sms-country-dropdown.open .sms-country-dd-arrow { transform:rotate(180deg); }

.sms-country-dd-list { position:absolute; top:100%; left:0; right:0; background:var(--bg2); border:1px solid var(--blue); border-top:none; border-radius:0 0 10px 10px; max-height:280px; overflow:hidden; z-index:100; display:flex; flex-direction:column; }
.sms-country-dd-search { padding:8px; border-bottom:1px solid var(--border); }
.sms-country-dd-search input { width:100%; background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:9px 12px; color:var(--text); font-size:12px; outline:none; }
.sms-country-dd-search input:focus { border-color:var(--blue); }
.sms-country-dd-search input::placeholder { color:var(--muted); }
.sms-country-dd-items { overflow-y:auto; max-height:230px; }
.sms-country-dd-item { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; transition:background .1s; font-size:13px; }
.sms-country-dd-item:hover { background:rgba(61,139,255,.06); }
.sms-country-dd-item.selected { background:rgba(61,139,255,.1); }
.sms-country-dd-flag { font-size:18px; }
.sms-country-dd-name { flex:1; font-weight:600; color:var(--text); }
.sms-country-dd-price { font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; color:var(--green); }
.sms-country-dd-stock { font-size:10px; color:var(--muted); font-family:'JetBrains Mono',monospace; margin-left:4px; }

.sms-services-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-top:12px; }
@media(max-width:680px){ .sms-services-grid { grid-template-columns:repeat(4,1fr); } }
@media(max-width:420px){ .sms-services-grid { grid-template-columns:repeat(3,1fr); } }

.sms-confirm { background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:20px; margin-top:12px; }
.sms-confirm-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:13px; }
.sms-confirm-label { color:var(--muted); }
.sms-confirm-value { font-weight:700; color:var(--text); }
.sms-confirm-price { font-family:'Bebas Neue',sans-serif; font-size:28px; color:var(--green); letter-spacing:1px; text-align:center; margin:12px 0; }
.sms-confirm-btn { width:100%; padding:14px; border-radius:10px; border:none; background:var(--blue); color:#fff; font-family:'Syne',sans-serif; font-size:14px; font-weight:700; cursor:pointer; transition:all .15s; }
.sms-confirm-btn:hover { filter:brightness(1.15); }
.sms-confirm-btn:disabled { opacity:.5; cursor:not-allowed; }

.sms-order-card { background:var(--bg3); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:10px; }
.sms-order-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.sms-order-svc { font-size:14px; font-weight:700; color:var(--text); }
.sms-order-status { font-size:10px; font-weight:700; padding:3px 8px; border-radius:5px; font-family:'JetBrains Mono',monospace; letter-spacing:.3px; }
.sms-order-status.st-pending { background:rgba(255,140,0,.12); color:#ff8c00; }
.sms-order-status.st-completed { background:rgba(0,200,100,.1); color:var(--green); }
.sms-order-status.st-cancelled { background:rgba(255,51,85,.08); color:var(--danger); }
.sms-order-phone { font-family:'JetBrains Mono',monospace; font-size:15px; color:var(--blue); font-weight:600; letter-spacing:1px; margin-bottom:4px; }
.sms-order-code { font-family:'JetBrains Mono',monospace; font-size:18px; color:var(--green); font-weight:700; letter-spacing:2px; background:rgba(0,200,100,.06); padding:8px 12px; border-radius:8px; border:1px solid rgba(0,200,100,.15); margin:8px 0; cursor:pointer; text-align:center; }
.sms-order-meta { font-size:11px; color:var(--muted); font-family:'JetBrains Mono',monospace; display:flex; gap:12px; flex-wrap:wrap; }
.sms-empty { text-align:center; padding:40px 0; color:var(--muted); font-size:13px; }

/* ── VIP PAGE ─────────────────────────────────────────────────── */
.vip-page { max-width:960px; margin:0 auto; }

.vip-hero { text-align:center; padding:48px 20px 36px; margin-bottom:28px; position:relative; border-radius:18px; background:linear-gradient(180deg,rgba(40,30,10,.7) 0%,rgba(15,15,20,.95) 100%); border:1px solid rgba(240,192,96,.12); overflow:hidden; }
.vip-hero-glow { position:absolute; top:-60px; left:50%; transform:translateX(-50%); width:260px; height:200px; background:radial-gradient(ellipse,rgba(240,192,96,.15) 0%,transparent 70%); pointer-events:none; }
.vip-hero-crown { margin-bottom:14px; position:relative; z-index:1; }
.vip-hero-title { font-family:'Bebas Neue','Syne',sans-serif; font-size:38px; letter-spacing:6px; color:#f0c060; position:relative; z-index:1; }
.vip-hero-sub { font-size:13px; color:rgba(255,255,255,.5); line-height:1.6; margin-top:10px; position:relative; z-index:1; }

.vip-current { background:linear-gradient(135deg,rgba(155,89,182,.08),rgba(255,180,50,.08)); border:1px solid rgba(155,89,182,.2); border-radius:14px; padding:20px; text-align:center; margin-bottom:24px; }
.vip-current-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 16px; border-radius:20px; background:linear-gradient(135deg,#9b59b6,#8e44ad); color:#fff; font-family:'Syne',sans-serif; font-size:13px; font-weight:700; margin-bottom:8px; }
.vip-current-exp { font-size:12px; color:var(--muted); font-family:'JetBrains Mono',monospace; }

.vip-section-title { display:flex; align-items:center; gap:12px; font-family:'JetBrains Mono','Syne',sans-serif; font-size:13px; font-weight:700; letter-spacing:2px; color:var(--text); margin-bottom:20px; text-transform:uppercase; }
.vip-section-title span { display:block; width:3px; height:18px; background:#f0c060; border-radius:2px; }

.vip-plans-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:12px; }
@media(max-width:800px) { .vip-plans-row { grid-template-columns:1fr; } }

.vip-plan-box { background:var(--bg2); border:1px solid var(--border); border-radius:16px; padding:28px 22px; text-align:center; position:relative; transition:all .2s; }
.vip-plan-box:hover { border-color:rgba(255,255,255,.12); transform:translateY(-3px); box-shadow:0 12px 40px rgba(0,0,0,.3); }
.vip-plan-featured { border-color:rgba(0,200,150,.25); box-shadow:0 0 40px rgba(0,200,150,.06); }
.vip-plan-featured:hover { border-color:rgba(0,200,150,.4); }

.vip-plan-tag { display:inline-block; font-size:10px; font-weight:800; letter-spacing:2px; padding:4px 14px; border-radius:6px; border:1px solid; margin-bottom:12px; font-family:'JetBrains Mono',monospace; }
.vip-plan-box-name { font-family:'Syne',sans-serif; font-size:18px; font-weight:800; margin-bottom:4px; letter-spacing:1px; }
.vip-plan-box-period { font-size:12px; color:var(--muted); margin-bottom:16px; }
.vip-plan-box-price { display:flex; align-items:baseline; justify-content:center; gap:4px; margin-bottom:6px; }
.vip-price-curr { font-size:16px; color:var(--muted); font-family:'JetBrains Mono',monospace; }
.vip-price-val { font-family:'Bebas Neue',sans-serif; font-size:52px; color:var(--text); letter-spacing:1px; line-height:1; }
.vip-plan-bonus { font-size:11px; font-weight:700; letter-spacing:1px; margin-bottom:14px; font-family:'JetBrains Mono',monospace; }

.vip-plan-box-benefits { text-align:left; margin-bottom:22px; padding:0 4px; }
.vip-ben-item { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text); padding:4px 0; }
.vip-ben-item svg { flex-shrink:0; color:var(--green); }

.vip-plan-box-btn { width:100%; padding:13px; border-radius:10px; border:1px solid var(--border); background:transparent; font-family:'Syne',sans-serif; font-size:13px; font-weight:700; cursor:pointer; transition:all .15s; color:var(--text); }
.vip-plan-box-btn:hover { border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.04); }
.vip-btn-featured { background:linear-gradient(135deg,rgba(0,200,150,.2),rgba(0,150,100,.3)); border-color:rgba(0,200,150,.35); color:#00c896; }
.vip-btn-featured:hover { background:linear-gradient(135deg,rgba(0,200,150,.3),rgba(0,150,100,.45)); }
.vip-plan-box-btn:disabled { opacity:.5; cursor:not-allowed; }

.vip-exc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media(max-width:800px) { .vip-exc-grid { grid-template-columns:1fr; } }

.vip-exc-card { background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:18px; display:flex; gap:14px; align-items:flex-start; transition:border-color .2s; }
.vip-exc-card:hover { border-color:rgba(255,255,255,.12); }
.vip-exc-icon { font-size:22px; flex-shrink:0; margin-top:2px; }
.vip-exc-text h4 { font-size:13px; font-weight:700; margin-bottom:6px; color:var(--text); }
.vip-exc-text p { font-size:11px; color:var(--muted); line-height:1.5; }

.vip-exc-blue { border-color:rgba(61,139,255,.18); background:linear-gradient(135deg,rgba(61,139,255,.04),transparent); }
.vip-exc-yellow { border-color:rgba(240,192,96,.18); background:linear-gradient(135deg,rgba(240,192,96,.04),transparent); }
.vip-exc-green { border-color:rgba(0,200,100,.18); background:linear-gradient(135deg,rgba(0,200,100,.04),transparent); }
.vip-exc-purple { border-color:rgba(155,89,182,.18); background:linear-gradient(135deg,rgba(155,89,182,.04),transparent); }
.vip-exc-teal { border-color:rgba(50,188,173,.18); background:linear-gradient(135deg,rgba(50,188,173,.04),transparent); }
.vip-exc-red { border-color:rgba(255,80,80,.18); background:linear-gradient(135deg,rgba(255,80,80,.04),transparent); }
.vip-exc-orange { border-color:rgba(255,140,50,.18); background:linear-gradient(135deg,rgba(255,140,50,.04),transparent); }
.vip-exc-cyan { border-color:rgba(0,188,212,.18); background:linear-gradient(135deg,rgba(0,188,212,.04),transparent); }

/* ── CHECKER OVERLAY ───────────────────────────────────────────────── */
#chkOverlay {
  display:none; position:fixed; inset:0; z-index:99999;
  background:rgba(0,0,0,.75); backdrop-filter:blur(6px);
  align-items:center; justify-content:center;
  overflow-y:auto; padding:20px 0;
}
.chk-box {
  background:var(--card-bg); border:1px solid var(--border); border-radius:16px;
  padding:36px 48px; text-align:center; min-width:320px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.chk-spinner {
  width:48px; height:48px; margin:0 auto 18px;
  border:3px solid rgba(61,139,255,.15); border-top-color:#3d8bff;
  border-radius:50%; animation:chkSpin 0.8s linear infinite;
}
@keyframes chkSpin { to { transform:rotate(360deg); } }
.chk-title { font-size:16px; font-weight:700; color:var(--text); margin-bottom:6px; }
.chk-sub { font-size:12px; color:var(--muted); margin-bottom:20px; }
.chk-bar-wrap {
  width:100%; height:6px; background:rgba(255,255,255,.06);
  border-radius:3px; overflow:hidden;
}
.chk-bar {
  height:100%; width:0%; background:linear-gradient(90deg,#3d8bff,#00c864);
  border-radius:3px;
}
.chk-die-icon { font-size:42px; margin-bottom:12px; }
.chk-retry-btn {
  padding:10px 20px; background:linear-gradient(135deg,#3d8bff,#2563eb); border:none;
  border-radius:8px; color:#fff; font-size:13px; font-weight:700; cursor:pointer;
  transition:all .2s;
}
.chk-retry-btn:hover { transform:scale(1.02); filter:brightness(1.1); }
.chk-close-btn {
  padding:8px 16px; background:transparent; border:1px solid var(--border);
  border-radius:8px; color:var(--muted); font-size:12px; cursor:pointer;
  transition:all .2s;
}
.chk-close-btn:hover { background:rgba(255,255,255,.05); color:var(--text); }