/* ═══════════════════════════════════════════════════
   smm.plus — Main Stylesheet
   Covers: public pages (guest) + auth dashboard pages
═══════════════════════════════════════════════════ */

/* Metric-matched fallback for Inter, used on every guest page (see
   "font: Inter" below). Google Fonts' own CSS already sets
   font-display: swap, so text always paints immediately in whatever
   font is available - without this, that's the generic 'sans-serif'
   fallback, whose character widths/line-height don't match Inter's, so
   the whole page visibly reflows line-by-line the moment Inter finishes
   loading. Inserting this metrics-adjusted stand-in (same local Arial,
   resized/respaced via the overrides below to mimic Inter's box) right
   after 'Inter' in the font stack removes that swap-triggered shift
   almost entirely - this is purely a CLS fix, not a visual change: once
   the real Inter loads, rendering is the same as before. Values are the
   commonly published Inter-vs-Arial metrics (as used by e.g. next/font's
   automatic fallback generation), not computed from this site's exact
   font file - good enough to remove most of the shift, fine-tune later
   with https://meowni.ca/font-style-matcher/ if any residual gap shows
   up. Non-Latin text (Persian, Arabic, CJK, Thai) is unaffected - those
   scripts skip straight to their own listed font regardless, since
   neither Inter nor this fallback has their glyphs. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}

/* Bootstrap Icons' own stylesheet (bootstrap-icons.min.css) is loaded via the
   print-media-swap trick in layout.twig's <head> so it doesn't block first
   paint - but that means every <i class="bi bi-*"> on the page is an empty,
   zero-size element until that stylesheet finally applies its ::before
   content and @font-face. The moment it does, every icon on the page pops
   in at once, each shifting its surrounding text/gap - across the dozens of
   icon usages this page now has (CTA arrows, card icons, tab icons), that
   single coordinated pop-in is large enough to register as a page-wide CLS
   event. Reserving a fixed box up front means the box never changes size
   whether or not the glyph has rendered yet, so nothing shifts when it
   does. Bootstrap Icons' own glyphs are drawn on a 16x16 grid, so 1em is a
   close match and this is purely a CLS fix, not a visual change. */
i[class^="bi-"], i[class*=" bi-"] {
  display: inline-block;
  width: 1em;
  height: 1em;
}

/* ─── CSS VARIABLES (auth dashboard) ─── */
:root {
  --smm-primary: #00CAF3;
  --smm-primary-rgb: 0, 202, 243;
  --smm-primary-dark: #007F99;
  --smm-accent: #797AF2;
  --smm-gradient: linear-gradient(135deg, #797AF2 0%, #00CAF3 100%);
  --smm-ink: #1D353D;
  --smm-ink-2: #526166;
  --smm-ink-3: #8FA7B2;
  --smm-ink-4: #9DA4A6;
  --smm-bg: #F2F4FA;
  --smm-surface: #FFFFFF;
  --smm-surface-soft: rgba(255,255,255,0.8);
  --smm-border: #E2E3E5;
  --smm-border-soft: rgba(0,0,0,0.05);
  --smm-success: #66CC00;
  --smm-warn: #FFAA00;
  --smm-danger: #F2556F;
  --smm-shadow-card: 0 4px 20px rgba(51,68,102,0.16);
  --smm-shadow-soft: 0 5px 20px rgba(77,140,153,0.15);
  --smm-shadow-btn: 0 10px 10px rgba(0,127,153,0.30);
  --pp-sidebar-w: 228px;
  --pp-sidebar-gap: 16px;
  --pp-topbar-h: 100px;
  --pp-radius-card: 16px;
  --pp-shadow-card: 0 4px 20px rgba(0,202,243,0.10);
  --pp-shadow-soft: 0 5px 30px rgba(77,140,153,0.20);
  --pp-shadow-cyan: 0 4px 20px rgba(0,202,243,0.20);
}
:root { color-scheme: light; }
[data-bs-theme="dark"] { color-scheme: dark; }
/* color-scheme alone isn't enough in every browser to theme native option popups —
   set explicit colors on the options too so dropdown lists (e.g. account language,
   timezone) aren't left with a white background/text in dark mode. */
[data-bs-theme="dark"] select option {
  background-color: var(--smm-surface);
  color: var(--smm-ink);
}
[data-bs-theme="dark"] {
  --smm-ink: #FFFFFF;
  --smm-ink-2: #8FA7B2;
  --smm-ink-3: #597380;
  --smm-ink-4: #527380;
  --smm-bg: #001C26;
  --smm-surface: #0D2B36;
  --smm-surface-soft: rgba(13,43,54,0.55);
  --smm-border: rgba(255,255,255,0.08);
  --smm-border-soft: rgba(255,255,255,0.06);
  --smm-shadow-card: 0 4px 20px rgba(0,0,0,0.35);
  --smm-shadow-soft: 0 5px 20px rgba(0,0,0,0.35);
  --pp-shadow-card: 0 4px 20px rgba(0,0,0,0.4);
  --pp-shadow-soft: 0 5px 30px rgba(0,0,0,0.5);
  --pp-shadow-cyan: 0 4px 20px rgba(0,202,243,0.12);
}

/* ─── Theme toggle: circular reveal transition (Telegram-style) ─── */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) {
  z-index: 2;
  animation: smm-theme-reveal .5s ease-in-out forwards;
}
@keyframes smm-theme-reveal {
  from { clip-path: circle(0px at var(--theme-toggle-x, 50%) var(--theme-toggle-y, 50%)); }
  to   { clip-path: circle(var(--theme-toggle-r, 150%) at var(--theme-toggle-x, 50%) var(--theme-toggle-y, 50%)); }
}

/* ─── BASE ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overscroll-behavior-y: none; }
/* Rubber-band/overscroll bounce past the bottom of the page briefly reveals
   whatever is behind the document - on some browser/OS combinations that's
   a hard white flash no background-color alone can fully suppress, since
   it's the scroll-bounce glow itself, not unpainted page area. overscroll-
   behavior-y:none (above) stops the bounce from happening at all, so there
   is nothing past the footer to scroll or flash into. The background below
   is a same-color backstop for the (rarer) browsers that don't support
   overscroll-behavior. Guest pages (body has no .pp-body class - that's
   only added when logged in) have no explicit background otherwise, so it
   defaults to white; the footer (#0c1630) is the last section on every
   guest page. */
html, body:not(.pp-body) { background: #0c1630; overscroll-behavior-y: none; }
/* Forces out a body { padding-bottom: 50px; } rule that isn't set anywhere in
   our own theme files (bootstrap.css in this repo is empty - real Bootstrap/
   base platform CSS loads externally via site['styles'], outside our
   control). !important guarantees this wins regardless of that external
   rule's specificity or load order. Guest pages only - .pp-body's own
   padding-bottom is intentional and untouched. */
body:not(.pp-body) { padding-bottom: 0 !important; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
-webkit-font-smoothing { antialiased; }

.hidden {
  display: none;
}

/* ══════════════════════════════════════════════════════
   PUBLIC / GUEST PAGE STYLES
   Font: Inter
══════════════════════════════════════════════════════ */

body:not(.pp-body) {
  font-family: 'Inter', 'Inter Fallback', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif;
  font-size: 15px;
  color: #1e2d4a;
  background: #fff;
}

/* ─── PUBLIC NAVBAR ─── */
.main-nav {
  background: #f0f4fb;
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}
/* Compatibility with the platform's native-app promo banner (.pp-app),
   which sits fixed at the very top (68px tall, z-index above everything)
   and adds .pp-app--show to body. Our sticky header must stick just
   below it, not at top:0, or it scrolls up and ends up hidden behind it. */
body.pp-app--show { padding-top: 68px !important; }
body.pp-app--show .main-nav { top: 68px !important; }
/* The drawer/sidebar are position:fixed, so body's padding-top doesn't
   move them at all — they still start at the very top, behind the banner,
   unless pushed down explicitly. */
body.pp-app--show .mobile-drawer,
body.pp-app--show .pp-sidebar { top: 68px !important; }
.nav-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 18px rgba(30,45,74,.09);
  padding: 8px 20px;
  display: flex;
  align-items: center;
  width: 100%;
}
.main-nav .navbar-brand img { height: 44px; }
.nav-brand-text { font-weight: 800; font-size: 20px; color: #00c4d4; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0 auto;
  padding: 0;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: #4a5568;
  padding: 6px 11px;
  display: block;
  white-space: nowrap;
  transition: color .2s;
}
.nav-links a:hover,
.nav-links a.active { color: #00c4d4; }
.btn-free-trial {
  background: linear-gradient(90deg, #6b7af7 0%, #40c8e8 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: opacity .2s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  letter-spacing: .3px;
}
.btn-free-trial:hover { opacity: .88; color: #fff; }
.btn-get-started {
  background: #1c2333;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: background .2s;
  white-space: nowrap;
  letter-spacing: .3px;
  display: inline-block;
}
.btn-get-started:hover { background: #0f1625; color: #fff; }

/* Hamburger (mobile only) */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  align-items: center;
  justify-content: center;
}

/* ─── FREE SERVICES SPLIT BUTTON (desktop nav) ─── */
.nav-free-wrap {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  background: linear-gradient(90deg, #6b7af7 0%, #40c8e8 100%);
  border-radius: 50px;
  box-shadow: 0 2px 8px rgba(107,122,247,.25);
  flex-shrink: 0;
  margin-right: 16px !important;
  margin-inline-end: 16px !important;
}
.rtl-nav .nav-free-wrap { margin-right: 0 !important; margin-left: 16px !important; }
.nav-free-btn {
  background: transparent;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 14px;
  white-space: nowrap;
  transition: opacity .2s;
  display: inline-flex;
  align-items: center;
  border-start-start-radius: 50px;
  border-end-start-radius: 50px;
}
.nav-free-btn:hover { opacity: .88; color: #fff; }
.nav-free-chev {
  background: rgba(0,0,0,.18);
  color: #fff;
  border: none;
  padding-inline: 8px 12px;
  cursor: pointer;
  transition: background .2s;
  display: flex;
  align-items: center;
  border-start-end-radius: 50px;
  border-end-end-radius: 50px;
  font-size: 10px;
}
.nav-free-chev::after { display: none; }
.nav-free-chev:hover { background: rgba(0,0,0,.28); }
.nav-free-wrap .dropdown-menu { border-radius: 12px; margin-top: 6px; }

/* ─── FREE SERVICES BAR (mobile drawer top) ─── */
.drawer-free-wrap {
  display: flex;
  align-items: stretch;
  margin: 14px 16px 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(107,122,247,.25);
}
.drawer-free-main {
  flex: 1;
  background: linear-gradient(90deg, #6b7af7 0%, #40c8e8 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: opacity .2s;
}
.drawer-free-main:hover { opacity: .88; color: #fff; }
.drawer-free-chev {
  background: rgba(0,0,0,.18);
  color: #fff;
  border: none;
  padding: 0 14px;
  border-left: 1px solid rgba(255,255,255,.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 12px;
  transition: background .2s;
}
.drawer-free-chev[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.drawer-free-chev:hover { background: rgba(0,0,0,.28); }

/* ─── NAV DROPDOWNS ─── */
.nav-dd-toggle { display: flex; align-items: center; gap: 5px; }
.nav-dd-menu {
  min-width: 250px;
  border-radius: 12px;
  border: 1px solid #e2e3e5;
  box-shadow: 0 8px 32px rgba(30,45,74,.12);
  padding: 6px;
  margin-top: 4px;
}
.nav-dd-menu .dropdown-item {
  font-size: 13px;
  font-weight: 500;
  color: #4a5568;
  border-radius: 8px;
  padding: 7px 12px;
  transition: color .18s, background .18s;
}
.nav-dd-menu .dropdown-item:hover { color: #00caf3; background: #f4fdfe; }
.nav-dd-menu .dropdown-divider { margin: 4px 8px; border-color: #e2e3e5; }

/* ─── RTL DROPDOWN MENUS ───
   Text alignment only — positioning is left entirely to Bootstrap's own
   dropdown-menu-end class (Popper-driven). A blanket right:0/left:auto here
   previously fought Popper's own placement math and broke dropdowns
   site-wide in RTL (e.g. opening beside their toggle instead of below it). */
html[dir="rtl"] .dropdown-menu {
  text-align: right;
}

/* ─── MOBILE DRAWER ─── */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,18,36,.45);
  z-index: 1100;
  backdrop-filter: blur(2px);
}
.mobile-overlay.open { display: block; }
.mobile-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 280px;
  background: #fff;
  z-index: 1200;
  /* !important is required here: the panel's own injected .pp-app banner
     styles include "body > *:not(.pp-app) { transform: translateY(0px); }"
     at mobile widths, which is MORE specific than a bare .mobile-drawer
     class selector and silently wins, resetting our hide/show transform
     to translateY(0) (fully visible) regardless of the .open class — the
     drawer then looks permanently stuck open no matter what our JS does. */
  transform: translate3d(-100%, 0, 0) !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  border-radius: 0 20px 20px 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mobile-drawer.open { transform: translate3d(0, 0, 0) !important; }
[dir="rtl"] .mobile-drawer {
  left: auto;
  right: 0;
  transform: translate3d(100%, 0, 0) !important;
  border-radius: 20px 0 0 20px;
}
[dir="rtl"] .mobile-drawer.open { transform: translate3d(0, 0, 0) !important; }
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 16px;
  border-bottom: 1px solid #f0f0f5;
}
.drawer-brand-text { font-weight: 800; font-size: 18px; color: #00c4d4; }
/* !important: same reason as .mobile-drawer's transform above - without it, a higher-
   specificity rule injected by the panel itself can silently win and leave both the
   light and dark logo variants visible at once, stacked on top of each other. */
.drawer-logo-dark { display: none !important; }
[data-bs-theme="dark"] .drawer-logo-light { display: none !important; }
[data-bs-theme="dark"] .drawer-logo-dark { display: inline !important; }
.drawer-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: none;
  background: #f0f4fb;
  color: #4a5568;
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.drawer-close:hover { background: #e4eaf5; }
.drawer-nav {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  flex: 1;
}
.drawer-nav li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 500;
  color: #4a5568;
  transition: color .2s, background .2s;
}
.drawer-nav li a:hover,
.drawer-nav li a.active { color: #00c4d4; background: #f4fdfe; }
.drawer-nav li a i { font-size: 16px; color: #b0bbc9; }
.drawer-nav li a:hover i,
.drawer-nav li a.active i { color: #00c4d4; }
.drawer-btns {
  padding: 16px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #f0f0f5;
}
.drawer-btns .btn-free-trial,
.drawer-btns .btn-get-started { justify-content: center; text-align: center; width: 100%; }

/* ─── DRAWER ACCORDION ─── */
.drawer-acc-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: #4a5568;
  padding: 12px 22px;
  cursor: pointer;
  text-align: left;
  transition: color .2s, background .2s;
}
.drawer-acc-toggle:hover { color: #00c4d4; background: #f4fdfe; }
.drawer-acc-toggle i:first-child { font-size: 16px; color: #b0bbc9; }
.drawer-acc-toggle:hover i:first-child { color: #00c4d4; }
.drawer-chev { margin-left: auto; font-size: 12px; transition: transform .25s; }
.drawer-acc-toggle[aria-expanded="true"] .drawer-chev { transform: rotate(180deg); }
.drawer-sub-nav {
  list-style: none;
  padding: 0 0 6px;
  margin: 0;
  background: rgba(0,196,212,.04);
  border-bottom: 1px solid #f0f0f5;
}
.drawer-sub-nav li a {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: #526166;
  padding: 8px 22px 8px 50px;
  transition: color .18s, background .18s;
}
.drawer-sub-nav li a:hover { color: #00c4d4; background: #f4fdfe; }

/* ─── FLOATING THEME BUTTON (public pages) ─── */
.pg-theme-btn {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: #FFAA00;
  color: #fff;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  transition: background .2s, opacity .2s;
}
[data-bs-theme="dark"] .pg-theme-btn { background: #1B4754; color: #C9F2FF; }
.pg-theme-btn:hover { opacity: .88; }

/* ─── HERO ─── */
/* overflow: hidden removed - with the 3-column layout (phone/text/account box),
   content in RTL locales was being clipped to nothing by it (confirmed live via
   DevTools: disabling overflow made the whole section reappear). */
.hero-section {
  background: #f0f4fb;
  padding: 64px 0 64px;
}
@media (min-width: 992px) {
  .hero-section .container { padding-left: 48px; padding-right: 48px; }
}
.hero-center-col { padding: 0 8px; }
/* CLS fix: prevents the fallback font from synthesizing bold for the h1/buttons below
   before the real font loads - see the matching rule and comment in layout.twig's
   synchronous <head> style (duplicated there so it's active from the first frame). */
.hero-center-col { font-synthesis: none; }
/* Matches the inline styles on their respective elements in signin.twig exactly -
   that duplication is intentional (see the comment there), not a copy that can drift. */
/* hero-eyebrow/h1/desc are exempted from the smm-ready reveal gate (see layout.twig) so they
   paint on first frame, while everything else stays hidden until ready - making this the one
   place on the page where a font swap is actually visible rather than happening off-screen.
   They used to inherit font-family from body/html, whose base comes from an external
   PerfectPanel theme stylesheet outside this repo (this repo's own bootstrap.css is empty) -
   that external default has no reason to use the metrics-matched 'Inter Fallback' this repo
   defines (layout.twig, ascent-override/size-adjust tuned to match real Inter), so the swap from
   whatever generic fallback it does use to real Inter reflowed this large bold heading visibly,
   showing up as the dominant Cumulative Layout Shift contributor. Setting the same
   metrics-matched stack directly here removes the dependency on what that external stylesheet
   happens to default to. */
.hero-eyebrow, .hero-h1, .hero-desc {
  font-family: 'Inter', 'Inter Fallback', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif;
}
.hero-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #00a8b5; margin: 0 0 14px; line-height: 1.5; }
.hero-h1 { font-size: clamp(24px, 1.1vw + 20px, 34px); font-weight: 800; color: #1e2d4a; margin: 0 0 18px; line-height: 1.3; }
.hero-desc { font-size: 14px; color: #5c6b7a; line-height: 1.75; margin: 0 0 32px; }
.hero-explore-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13.5px; font-weight: 600; color: #00a8b5; transition: color .2s; }
.hero-explore-link:hover { color: #00c4d4; }
.hero-explore-link i { transition: transform .25s ease; }
.hero-explore-link:hover i { transform: translateX(4px); }
[dir="rtl"] .hero-explore-link:hover i { transform: translateX(-4px); }
/* Four checkmark trust badges below the CTA row, replacing the old 4-item text-divider line. */
.hero-trust-row { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 32px; }
.hero-trust-badge { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: #4a5568; line-height: 1.3; font-family: 'Inter', 'Inter Fallback', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif; }
.hero-trust-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: rgba(0,168,181,.12); color: #00a8b5;
}
.hero-trust-check i { font-size: 13px; }
.hero-payment-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  background: rgba(0,168,181,.08); border: 1px solid rgba(0,168,181,.25);
  border-radius: 999px; padding: 10px 18px; font-size: 13px; font-weight: 700; color: #1e2d4a;
  font-family: 'Inter', 'Inter Fallback', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif;
}
.hero-payment-chip i { color: #00a8b5; font-size: 15px; }
[data-bs-theme="dark"] .hero-payment-chip { background: rgba(0,196,212,.08); border-color: rgba(0,196,212,.25); color: #e8f0f4; }
[data-bs-theme="dark"] .hero-payment-chip i { color: #00c4d4; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
/* Matches the inline style on the hero's primary CTA <a> tag in signin.twig exactly.
   The second (outline) button in this row reuses .btn-outline-dark as-is, already
   used elsewhere on this page, so it needs no inline duplicate or new CSS. */
.btn-start-now {
  background: #1a2952; color: #fff; font-size: 14px; font-weight: 700;
  padding: 14px 26px; border-radius: 9px; border: none; cursor: pointer;
  transition: background .2s; display: inline-flex; align-items: center; justify-content: center;
  white-space: normal; text-align: center; line-height: 1.25;
}
.btn-start-now:hover { background: #111e3a; color: #fff; }

/* ── Hero account box (sign in / sign up tabs, right column) ──
   Reuses .login-card/.inp/.btn-sign-in/etc as-is (same classes as the old
   standalone login section) - only the surrounding box and the tab strip
   are new. Not CLS-exempted like .hero-center-col: this column stays
   hidden behind the smm-ready gate until the stylesheet loads. */
.hero-account-box { background: #ebedf2; border-radius: 18px; padding: 24px 22px; box-shadow: 0 20px 40px rgba(15,23,42,.08); }
[data-bs-theme="dark"] .hero-account-box { background: #071a24; }
.hero-account-tabs { display: flex; gap: 6px; background: rgba(255,255,255,.6); border-radius: 10px; padding: 4px; margin-bottom: 20px; }
[data-bs-theme="dark"] .hero-account-tabs { background: rgba(255,255,255,.04); }
.hero-account-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: 1; border: none; background: transparent; padding: 9px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 700; color: #5c6b7a; cursor: pointer;
  font-family: 'Inter', 'Inter Fallback', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif;
  transition: background .2s, color .2s;
}
.hero-account-tab i { font-size: 14px; color: #9fb0c0; transition: color .2s; }
.hero-account-tab.active { background: #fff; color: #1a2952; box-shadow: 0 2px 8px rgba(15,23,42,.08); }
.hero-account-tab.active i { color: #00a8b5; }
[data-bs-theme="dark"] .hero-account-tab { color: #8FA7B2; }
[data-bs-theme="dark"] .hero-account-tab i { color: #597380; }
[data-bs-theme="dark"] .hero-account-tab.active { background: #0D2B36; color: #e8f0f4; }
[data-bs-theme="dark"] .hero-account-tab.active i { color: #00c4d4; }
.hero-account-box .login-card { max-width: none; margin: 0; }
.hero-account-box .login-card h2 { font-size: 16px; margin-bottom: 18px; }
.hero-dots { display: flex; gap: 7px; margin-top: 20px; justify-content: center; }
.hero-dot { width: 8px; height: 8px; border-radius: 50%; background: #c8d3e8; transition: all .2s; }
.hero-dot.active { background: #00c4d4; width: 22px; border-radius: 4px; }

.btn-start-now i { transition: transform .25s ease; }
.btn-start-now:hover i { transform: translateX(4px); }
[dir="rtl"] .btn-start-now:hover i { transform: translateX(-4px); }

/* ─── LOGIN SECTION ─── */
.login-section { background: #f0f4fb; padding: 40px 0 60px; }
.login-wrapper { background-color: #ebedf2; border-radius: 20px; padding: 40px; }
.login-card { max-width: 560px; margin: 0 auto; }
.login-card h2 {
  font-size: 20px; font-weight: 700; color: #1e2d4a;
  text-align: center; margin-bottom: 28px; letter-spacing: -.3px;
}
.lbl { display: block; font-size: 13px; font-weight: 600; color: #4a5568; margin-bottom: 7px; }
.inp {
  width: 100%; border: 1.5px solid #e2e8f0; border-radius: 9px;
  padding: 11px 14px 11px 38px; font-size: 14px; color: #1e2d4a;
  background: #fff; font-family: 'Inter', 'Inter Fallback', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.inp:focus { border-color: #00c4d4; box-shadow: 0 0 0 3px rgba(0,196,212,.12); }
.inp::placeholder { color: #b0bbc9; }
.inp-wrap { position: relative; }
.inp-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: #b0bbc9; font-size: 15px; pointer-events: none;
}
.inp-eye {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #b0bbc9; font-size: 16px; cursor: pointer; padding: 0;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
}
.inp-eye:hover { color: #00c4d4; }
.btn-sign-in {
  background: #00c4d4; color: #fff; width: 100%; padding: 13px; border-radius: 9px;
  border: none; font-size: 15px; font-weight: 700; cursor: pointer;
  font-family: 'Inter', 'Inter Fallback', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif; transition: background .2s;
}
.btn-sign-in:hover { background: #00a8b5; }
.btn-google-login {
  width: 100%; border: 1.5px solid #e2e8f0; background: #fff; color: #1e2d4a;
  font-size: 13px; font-weight: 600; padding: 12px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer; font-family: 'Inter', 'Inter Fallback', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif; transition: border-color .2s;
}
.btn-google-login:hover { border-color: #00c4d4; }
.google-g {
  width: 18px; height: 18px; flex-shrink: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%23EA4335" d="M24 9.5c3.5 0 6.5 1.2 8.9 3.2l6.6-6.6C35.5 2.5 30.1 0 24 0 14.6 0 6.6 5.4 2.6 13.3l7.7 6C12.1 13.1 17.6 9.5 24 9.5z"/><path fill="%2334A853" d="M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v8.5h12.7c-.6 3-2.3 5.5-4.9 7.2l7.5 5.8c4.4-4 6.9-10 6.9-17z"/><path fill="%23FBBC05" d="M10.3 28.7C9.8 27.2 9.5 25.6 9.5 24s.3-3.2.8-4.7L2.6 13.3C.9 16.8 0 20.3 0 24s.9 7.2 2.6 10.7l7.7-6z"/><path fill="%234285F4" d="M24 48c6.1 0 11.2-2 14.9-5.4l-7.5-5.8c-2 1.4-4.7 2.2-7.4 2.2-6.4 0-11.9-3.6-13.7-8.8l-7.7 6C6.6 42.6 14.6 48 24 48z"/></svg>') center/contain no-repeat;
}
.login-btn-row { display: flex; gap: 12px; margin-bottom: 14px; }
.login-btn-row .btn-sign-in { flex: 1; }
.login-btn-row .btn-google-login { flex: 1; }
/* The real Google Identity button (g_id_signin) only exists once Google's own script loads
   and swaps it in - that div is 0px tall until then. Without this reserved space, the button
   popping in (standard size = 40px) pushes the remember-me/forgot-password row and everything
   below it down, which is the single biggest Cumulative Layout Shift source on this page -
   worse on mobile because the same pixel shift covers a much larger fraction of a small
   viewport. #g_id_onload carries no visible content at all (Google's script reads it once,
   then leaves it empty), so it needs no reserved space of its own. */
.g_id_signin { min-height: 40px; width: 100%; }
#g_id_onload { display: block; height: 0; overflow: hidden; }
.login-meta-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: #5c6b7a;
}
.remember-label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.recover-link { color: #4a5568; }
.recover-link:hover { color: #00c4d4; }
.signup-text { text-align: center; font-size: 13px; color: #5c6b7a; margin-top: 14px; }
.signup-text a { color: #00c4d4; font-weight: 700; text-transform: uppercase; }

/* Alert overrides for login page */
.login-alert { border-radius: 9px; margin-bottom: 16px; font-size: 14px; }

/* ─── SECTION COMMON ─── */
.sec-title { font-size: 26px; font-weight: 700; color: #1e2d4a; text-align: center; margin-bottom: 40px; }
.sec-sub { font-size: 14px; color: #5c6b7a; text-align: center; margin-bottom: 40px; }
.sec-sub-line { width: 48px; height: 3px; background: #00c4d4; border-radius: 2px; margin: 8px auto 44px; }

/* ─── WHAT WE OFFER ─── */
.offers-section { background: #f0f4fb; padding: 64px 0; }
.offer-col { text-align: center; padding: 10px; background-color: #fff; border-radius: 16px; max-width: 148px; margin: 0 auto; }
.offer-icon-box { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; transition: transform .2s, box-shadow .2s; }
.offer-col:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,196,212,.18); }
.offer-icon-box img { width: 36px; height: 36px; object-fit: contain; }
.offer-name { font-size: 12px; font-weight: 600; color: #1e2d4a; line-height: 1.4; }

/* ─── TELEGRAM PACKAGES & PRICES ───
   .price-card-amount starts as "···" and is filled in by the <script> next to
   the section's markup in signin.twig, from the same live catalog API the
   order page itself uses - never a hardcoded price here that could drift. */
.prices-section { background: #fff; padding: 64px 0; border-top: 1px solid #edf1f7; }
.price-card { background: #f7f9fd; border: 1px solid #e8edf5; border-radius: 18px; padding: 26px 24px; height: 100%; transition: transform .2s, box-shadow .2s; }
.price-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(30,45,74,.1); }
.price-card-name { font-size: 15px; font-weight: 700; color: #1e2d4a; margin-bottom: 10px; }
.price-card-amount { font-size: 28px; font-weight: 800; color: #00a8b5; margin-bottom: 10px; min-height: 36px; }
.price-card-loading { color: #b0bbc9; font-weight: 400; }
.price-card-desc { font-size: 13px; color: #5c6b7a; margin-bottom: 18px; display: flex; align-items: center; gap: 6px; }
.price-card-desc i { color: #22a63a; }
.price-card-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: #00a8b5; text-decoration: none; transition: color .2s; }
.price-card-link:hover { color: #00c4d4; }
.price-card-link i { transition: transform .25s ease; }
.price-card-link:hover i { transform: translateX(4px); }
[dir="rtl"] .price-card-link:hover i { transform: translateX(-4px); }
.prices-footer { text-align: center; margin-top: 36px; }
.btn-view-all-prices { display: inline-flex; align-items: center; gap: 8px; background: #1a2952; color: #fff; font-size: 14px; font-weight: 700; padding: 13px 28px; border-radius: 10px; text-decoration: none; transition: background .2s; }
.btn-view-all-prices:hover { background: #111e3a; color: #fff; }

/* ─── REASONS TO CHOOSE SMM.PLUS ─── */
.reasons-section { background: #fff; padding: 64px 0; border-top: 1px solid #edf1f7; }

/* ─── FREE TELEGRAM SERVICES ─── */
.free-services-section { background: #f0f4fb; padding: 64px 0; }
.free-svc-card { display: block; text-align: center; padding: 22px 14px; background: #fff; border-radius: 18px; height: 100%; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.free-svc-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,196,212,.18); }
.free-svc-icon { width: 54px; height: 54px; border-radius: 50%; background: rgba(0,196,212,.1); color: #00c4d4; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 22px; }
.free-svc-name { font-size: 13.5px; font-weight: 700; color: #1e2d4a; margin-bottom: 6px; line-height: 1.4; }
.free-svc-desc { font-size: 12px; color: #6f7f92; line-height: 1.5; }
.free-svc-cta { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 12px; font-size: 11.5px; font-weight: 700; color: #00a8b5; }
.free-svc-cta i { transition: transform .25s ease; }
.free-svc-card:hover .free-svc-cta i { transform: translateX(4px); }
[dir="rtl"] .free-svc-card:hover .free-svc-cta i { transform: translateX(-4px); }
.free-services-note { max-width: 680px; margin: 24px auto 0; text-align: center; color: #5c6b7a; font-size: 13px; line-height: 1.6; }

/* ─── TELEGRAM SMM SERVICES ───
   "Starting at" prices are a static snapshot of the cheapest real rate in
   each category (see the comment above the section in signin.twig) - not
   live-fetched like the Prices section above, since these are teaser cards
   linking out to full category pages rather than exact order plans. */
.smm-services-section { background: #fff; padding: 64px 0; border-top: 1px solid #edf1f7; }
.smm-svc-card { display: flex; flex-direction: column; padding: 26px 24px; background: #f7f9fd; border: 1px solid #e8edf5; border-radius: 18px; height: 100%; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.smm-svc-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(30,45,74,.1); }
.smm-svc-icon { width: 50px; height: 50px; border-radius: 50%; background: rgba(0,196,212,.1); color: #00c4d4; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: 21px; flex-shrink: 0; }
/* No clamping - every word of name/desc always shows. Alignment instead
   comes from desc's flex-grow: it absorbs whatever space is left over in
   the card (cards in a row are already equal height via Bootstrap's row
   stretch), so a short card's desc paragraph just carries extra blank
   space below its own text, and every card's "Documentation"/price line
   still starts at the same height across the row. */
.smm-svc-name { font-size: 15px; font-weight: 700; color: #1e2d4a; margin-bottom: 8px; line-height: 1.4; }
.smm-svc-desc { font-size: 13px; color: #5c6b7a; line-height: 1.6; margin-bottom: 16px; flex-grow: 1; }
.smm-svc-price { font-size: 13px; color: #5c6b7a; font-weight: 600; }
.smm-svc-price strong { color: #00a8b5; font-size: 15px; font-weight: 800; }

/* ─── LOOKING FOR THE CHEAPEST TELEGRAM PANEL FOR RESELLERS? BUY DIRECT. ─── */
.priceposition-section { background: #f0f4fb; padding: 64px 0; }
.priceposition-body { max-width: 680px; margin: -8px auto 0; text-align: center; }
.priceposition-body p { font-size: 14px; color: #5c6b7a; line-height: 1.75; margin-bottom: 14px; }
.priceposition-body p:last-child { margin-bottom: 0; }

/* ─── REAL SERVICE GUARANTEES ─── */
.guarantees-section { background: #fff; padding: 64px 0; border-top: 1px solid #edf1f7; }
.guarantees-callout {
  max-width: 680px; margin: 30px auto 0; padding: 26px 28px; background: #f7f9fd;
  border: 1px solid #e8edf5; border-radius: 16px; text-align: center;
}
.guarantees-callout h3 { font-size: 16px; font-weight: 800; color: #1e2d4a; margin-bottom: 10px; }
.guarantees-callout p { font-size: 13.5px; color: #5c6b7a; line-height: 1.75; margin: 0; }

/* ─── SOURCE SERVICES, SET YOUR PRICES AND TRACK CLIENT ORDERS ───
   Reuses .smm-svc-card/.reseller-api-card/.reseller-api-desc/.reseller-api-footer
   as-is - same card shape as the Reseller API section below it, just 3
   cards instead of 5. */
.dashboard-section { background: #fff; padding: 64px 0; border-top: 1px solid #edf1f7; }

/* ─── TELEGRAM RESELLER PANEL WITH API ───
   Cards reuse .smm-svc-card/.smm-svc-icon/.smm-svc-name/.smm-svc-desc as-is
   (no price line here), plus .price-card-link for the per-card doc link. */
.reseller-api-section { background: #f0f4fb; padding: 64px 0; }
.reseller-api-desc { max-width: 720px; margin: -8px auto 0; text-align: center; color: #5c6b7a; font-size: 14px; line-height: 1.7; }
.reseller-api-card { background: #fff; }
.reseller-api-footer { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.btn-outline-dark { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #1a2952; border: 2px solid #1a2952; font-size: 14px; font-weight: 700; padding: 11px 26px; border-radius: 10px; text-decoration: none; transition: background .2s, color .2s; }
.btn-outline-dark:hover { background: #1a2952; color: #fff; }

/* ─── START FREE, THEN PLACE YOUR FIRST PAID ORDER ─── */
.getstarted-section { background: #fff; padding: 64px 0; border-top: 1px solid #edf1f7; }
.getstarted-step { padding: 8px 6px; text-align: center; }
.getstarted-num { width: 48px; height: 48px; border-radius: 50%; background: #1a2952; color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 19px; font-weight: 800; }
.getstarted-name { font-size: 15px; font-weight: 700; color: #1e2d4a; margin-bottom: 8px; line-height: 1.4; }
.getstarted-desc { font-size: 13px; color: #5c6b7a; line-height: 1.6; }

/* ─── CRYPTO PAYMENTS AND HELP WHEN YOU NEED IT ───
   Reuses .priceposition-body as-is - plain paragraphs, no CTA (the
   document gives this section no button of its own). */
.payment-support-section { background: #fff; padding: 64px 0; border-top: 1px solid #edf1f7; }

/* ─── GET HELP THROUGH OUR BOT, WEBSITE TICKETS OR EMAIL ─── */
.gethelp-section { background: #f0f4fb; padding: 64px 0; }
.gethelp-inner { max-width: 680px; margin: 0 auto; text-align: center; }
.gethelp-intro { font-size: 14px; color: #4a5568; line-height: 1.7; margin: 0 0 14px; }
.gethelp-disclaimer { font-size: 12.5px; color: #8591a3; line-height: 1.6; margin: 0 0 26px; }
.gethelp-disclaimer a { color: #8591a3; text-decoration: underline; }
.gethelp-subhead { font-size: 15px; font-weight: 800; color: #1e2d4a; margin: 0 0 8px; }
.gethelp-cta-row { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.gethelp-email-row { font-size: 13.5px; color: #5c6b7a; margin: 0; }
.gethelp-email-row a { color: #00a8b5; font-weight: 600; text-decoration: none; }
.gethelp-email-row a:hover { text-decoration: underline; }

/* ─── YOUR DIRECT SUPPLIER FOR AFFORDABLE TELEGRAM SERVICES (about intro) ─── */
.about-section { background: #fff; padding: 64px 0; border-top: 1px solid #edf1f7; }

/* ─── TRY FREE TELEGRAM SERVICES TODAY (final homepage CTA) ─── */
.finalcta-section { background: #1a2952; padding: 64px 0; text-align: center; }
.finalcta-title { font-size: clamp(24px, 3vw, 32px); font-weight: 800; color: #fff; margin: 0 0 14px; }
.finalcta-desc { max-width: 640px; margin: 0 auto 28px; color: rgba(255,255,255,.75); font-size: 14px; line-height: 1.7; }
.finalcta-cta-row { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.btn-cta-light { display: inline-flex; align-items: center; gap: 8px; background: #00c4d4; color: #1a2952; font-size: 14px; font-weight: 700; padding: 13px 28px; border-radius: 10px; text-decoration: none; transition: background .2s; }
.btn-cta-light:hover { background: #00aebe; color: #1a2952; }
.btn-cta-outline-light { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.5); font-size: 14px; font-weight: 700; padding: 11px 26px; border-radius: 10px; text-decoration: none; transition: background .2s, border-color .2s; }
.btn-cta-outline-light:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.finalcta-links-row { font-size: 13px; }
.finalcta-links-row a { color: rgba(255,255,255,.7); text-decoration: underline; }
.finalcta-links-row a:hover { color: #fff; }
.finalcta-links-sep { color: rgba(255,255,255,.4); margin: 0 10px; }
.finalcta-trust { margin: 22px 0 0; font-size: 12.5px; color: rgba(255,255,255,.55); }

/* ─── WHO THIS IS FOR ─── */
.for-section { background: #fff; padding: 64px 0; border-top: 1px solid #edf1f7; }
.for-amp { font-size: 72px; font-weight: 900; color: #00c4d4; line-height: .85; display: block; margin-bottom: -4px; }
.for-title { font-size: 26px; font-weight: 700; color: #1e2d4a; margin: 10px 0 24px; }
.for-list { list-style: none; padding: 0; }
.for-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #4a5568; line-height: 1.6; margin-bottom: 14px; }
.for-list li::before { content: '▸'; color: #00c4d4; font-size: 12px; margin-top: 2px; flex-shrink: 0; }
.for-robot-img { width: 100%; max-width: 440px; display: block; margin: 0 auto; }

/* ─── STATS ─── */
.stats-section { background: #fff; border-top: 1px solid #edf1f7; border-bottom: 1px solid #edf1f7; padding: 44px 0; }
.stat-box { text-align: center; padding: 4px 0; }
.stat-icon { font-size: 28px; color: #00c4d4; margin-bottom: 8px; }
.stat-num { font-size: 36px; font-weight: 800; color: #00c4d4; line-height: 1; margin-bottom: 6px; }
.stat-lbl { font-size: 13px; font-weight: 500; color: #5c6b7a; }

/* ─── TESTIMONIALS ─── */
.testimonials-section { background: #f0f4fb; padding: 64px 0; }
.test-card-wrap { padding-top: 40px; height: 100%; }
.test-card {
  background: #fff; border-radius: 18px; padding: 52px 24px 28px;
  box-shadow: 0 4px 24px rgba(30,45,74,.08); text-align: center; position: relative; height: 100%;
}
.test-avatar-wrap {
  position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 80px; border-radius: 50%; border: 4px solid #fff;
  box-shadow: 0 4px 16px rgba(30,45,74,.14); overflow: hidden; background: #e8f0fe;
}
.test-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.test-avatar-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800; color: var(--smm-primary);
}
.test-name { font-size: 15px; font-weight: 700; color: #1e2d4a; margin-bottom: 4px; }
.test-role { font-size: 12px; font-weight: 600; color: #00c4d4; margin-bottom: 3px; }
.test-country { font-size: 12px; color: #5c6b7a; margin-bottom: 10px; }
.test-stars { color: #f59e0b; font-size: 15px; letter-spacing: 2px; margin-bottom: 14px; }
.test-text { font-size: 13px; color: #5c6b7a; line-height: 1.8; margin: 0; }
.test-dots { display: flex; justify-content: center; gap: 7px; margin-top: 36px; }
.test-dot { width: 8px; height: 8px; border-radius: 50%; background: #c8d3e8; }
.test-dot.active { background: #00c4d4; width: 22px; border-radius: 4px; }

/* ─── BAR TITLE ─── */
.bar-title { display: flex; align-items: stretch; gap: 12px; margin-bottom: 8px; }
.bar-title::before { content: ''; display: block; width: 5px; border-radius: 3px; background: #00c4d4; flex-shrink: 0; min-height: 100%; }
.bar-title-text { font-size: 26px; font-weight: 700; color: #1e2d4a; line-height: 1.2; }

/* ─── CONTACT ─── */
.contact-section { background: #fff; padding: 64px 0; }
.contact-sub { font-size: 13px; color: #5c6b7a; margin-bottom: 28px; margin-top: 6px; line-height: 1.6; }
.contact-card { background: #fff; border-radius: 16px; border: 1px solid #e8edf5; padding: 10px 24px; height: 100%; }
.contact-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid #f0f4fb; }
.contact-row:last-child { border-bottom: none; }
.c-icon-outline { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #8899aa; flex-shrink: 0; }
.c-row-label { font-size: 13px; font-weight: 700; color: #1e2d4a; line-height: 1.3; }
.c-row-value { font-size: 13px; color: #00c4d4; }
.ticket-box {
  background: #fff; border-radius: 16px; border: 1px solid #e8edf5;
  padding: 36px 30px; text-align: center; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ticket-icon { font-size: 52px; color: #c0ccd8; margin-bottom: 18px; line-height: 1; }
.ticket-box h3 { font-size: 18px; font-weight: 700; color: #1e2d4a; margin-bottom: 12px; }
.ticket-box p { font-size: 13px; color: #5c6b7a; line-height: 1.75; margin-bottom: 24px; max-width: 380px; }
.btn-ticket-login {
  background: linear-gradient(90deg, #00c4d4 0%, #00a8b5 100%);
  color: #fff; font-size: 15px; font-weight: 700; padding: 13px 52px;
  border-radius: 50px; border: none; cursor: pointer;
  font-family: 'Inter', 'Inter Fallback', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif; transition: opacity .2s; letter-spacing: .3px;
  display: inline-block;
}
.btn-ticket-login:hover { opacity: .88; color: #fff; }

/* ─── FAQ ─── */
.faq-section { background: #f0f4fb; padding: 64px 0; }
.faq-left-text { font-size: 14px; color: #5c6b7a; line-height: 1.75; margin-top: 10px; }
.faq-highlight { color: #00c4d4; font-weight: 600; }
.accordion-item { background: #e8edf5; border: none !important; border-radius: 12px !important; margin-bottom: 10px; overflow: hidden; }
.accordion-button { font-size: 14px; font-weight: 600; color: #1e2d4a; background: #e8edf5; padding: 16px 20px; box-shadow: none !important; font-family: 'Inter', 'Inter Fallback', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif; }
.accordion-button:not(.collapsed) { color: #1e2d4a; background: #e8edf5; }
.accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234a5568' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300c4d4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 11 6-6 6 6'/%3e%3c/svg%3e"); }
.accordion-body { font-size: 13px; color: #5c6b7a; line-height: 1.75; background: #e8edf5; padding: 4px 20px 18px; }

/* ─── FOOTER ─── */
.site-footer { background: #0c1630; padding: 52px 0 0; }
.footer-links-row { border-top: 1px solid rgba(255,255,255,.06); padding-top: 40px; }
.footer-col-head {
  display: flex; align-items: stretch; gap: 10px; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; color: #fff; margin-bottom: 18px;
}
.footer-col-head::before { content: ''; display: block; width: 4px; border-radius: 3px; background: #00c4d4; flex-shrink: 0; }
.footer-link { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #7a8fa8; margin-bottom: 9px; transition: color .2s; }
.footer-link::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #00c4d4; flex-shrink: 0; }
.footer-link:hover { color: #00c4d4; }
.footer-logo { height: 40px; margin: 0 0 14px; }
.footer-desc { font-size: 13px; color: #7a8fa8; line-height: 1.75; }
.footer-socials { display: flex; gap: 14px; margin-top: 20px; }
.footer-company-row { margin: 18px 0 0; font-size: 12.5px; }
.footer-company-row a { color: #7a8fa8; text-decoration: none; transition: color .2s; }
.footer-company-row a:hover { color: #00c4d4; }
.footer-company-sep { color: #3f4f68; margin: 0 8px; }
.s-btn { display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; text-decoration: none; }
.s-btn-icon { width: 54px; height: 54px; border-radius: 12px; background: #0e4a5c; color: #00c4d4; display: flex; align-items: center; justify-content: center; font-size: 22px; transition: background .2s; }
.s-btn:hover .s-btn-icon { background: #00c4d4; color: #fff; }
.s-btn-label { font-size: 12px; color: #7a8fa8; transition: color .2s; }
.s-btn:hover .s-btn-label { color: #00c4d4; }
.footer-trial-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(90deg, #6b7af7 0%, #40c8e8 100%);
  color: #fff; font-size: 13px; font-weight: 600; border-radius: 50px;
  padding: 10px 22px; border: none; margin-top: 20px; cursor: pointer;
  text-decoration: none; transition: opacity .2s;
}
.footer-trial-btn:hover { opacity: .88; color: #fff; }
.footer-more-langs-btn { background: rgba(255,255,255,.08); font-family: inherit; }
.footer-more-langs-btn:hover { background: rgba(255,255,255,.14); opacity: 1; }
.footer-langs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.fl-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #7a8fa8; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.07); cursor: pointer; white-space: nowrap; transition: border-color .2s, color .2s; }
.fl-item:hover { color: #00c4d4; border-color: #00c4d4; }
.fl-item img { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; flex-shrink: 0; }
.fl-code { font-size: 11px; font-weight: 700; color: #fff; min-width: 22px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.06); text-align: center; padding: 16px 0; font-size: 12px; color: #8FA7B2; }

/* ─── FOOTER "MORE LANGUAGES" MODAL ─── */
.footer-langs-modal-overlay {
  position: fixed; inset: 0; z-index: 10500; background: rgba(15, 23, 42, .62);
  display: flex; align-items: center; justify-content: center; padding: 24px 16px; overflow-y: auto;
}
.footer-langs-modal-box {
  position: relative; width: 100%; max-width: 520px; margin: auto;
  background: #0c1630; border: 1px solid rgba(255,255,255,.08); border-radius: 20px;
  padding: 32px 28px; box-shadow: 0 24px 60px rgba(15, 23, 42, .5);
}
.footer-langs-modal-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.08); color: #8FA7B2; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background-color .2s, color .2s;
}
.footer-langs-modal-close:hover { background: rgba(255,255,255,.14); color: #e8f0f4; }
.footer-langs-modal-title { text-align: center; font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 20px; }
body.footer-langs-modal-open { overflow: hidden; }
@media (max-width: 575.98px) {
  .footer-langs-modal-box { padding: 26px 18px; border-radius: 16px; }
  .footer-langs { grid-template-columns: repeat(1, 1fr); }
}

/* ══════════════════════════════════════════════════════
   AUTH / DASHBOARD PAGE STYLES
   Font: Montserrat
══════════════════════════════════════════════════════ */

body.pp-body {
  font-family: 'Montserrat', system-ui, -apple-system, 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif;
  font-size: 14px;
  background: var(--smm-bg);
  color: var(--smm-ink);
  padding-left: calc(var(--pp-sidebar-w) + var(--pp-sidebar-gap));
  padding-top: var(--pp-topbar-h);
}

/* ─── SIDEBAR ─── */
.pp-sidebar {
  position: fixed; left: 0; top: 0;
  width: var(--pp-sidebar-w); height: 100vh;
  background: rgba(255,255,255,0.85);
  border-right: 1px solid rgba(255,255,255,1);
  border-radius: 0 24px 24px 0;
  box-shadow: var(--pp-shadow-soft);
  backdrop-filter: blur(20px);
  z-index: 1040; overflow-y: auto;
  display: flex; flex-direction: column;
}
[data-bs-theme="dark"] .pp-sidebar { background: rgba(13,43,54,0.92); border-right-color: rgba(255,255,255,0.05); }
/* Desktop RTL: the off-canvas mobile sidebar below already flips to the
   right for [dir="rtl"], but at desktop widths the sidebar stayed pinned
   to the physical left unconditionally while body/topbar also reserved
   their space on the physical left unconditionally - self-consistent for
   LTR, but there was never a matching desktop RTL pair, so none of this
   actually moved for fa/ar. Confirmed live: the "hidden" search submit
   button's own bounding box sat at x:180, inside the sidebar's 0-228px
   footprint (display/visibility/opacity all reported normal - it was
   simply rendering underneath the sidebar's fixed, higher z-index panel).
   Mirroring sidebar + body + topbar together here fixes every dashboard
   page's content area in RTL, not just this one search bar. */
[dir="rtl"] .pp-sidebar { left: auto; right: 0; border-right: none; border-left: 1px solid rgba(255,255,255,1); border-radius: 24px 0 0 24px; }
[data-bs-theme="dark"][dir="rtl"] .pp-sidebar { border-left-color: rgba(255,255,255,0.05); }
[dir="rtl"] body.pp-body { padding-left: 0; padding-right: calc(var(--pp-sidebar-w) + var(--pp-sidebar-gap)); }
.pp-sidebar::-webkit-scrollbar { width: 4px; }
.pp-sidebar::-webkit-scrollbar-thumb { background: rgba(0,202,243,.25); border-radius: 2px; }

.pp-brand { display: flex; align-items: center; padding: 22px 24px 16px; text-decoration: none; }
.pp-brand img { height: 52px; width: auto; max-width: 180px; }
.pp-brand-text { font-weight: 800; font-size: 20px; color: var(--smm-primary); }
.pp-brand-logo-dark { display: none; }
[data-bs-theme="dark"] .pp-brand-logo-light { display: none; }
[data-bs-theme="dark"] .pp-brand-logo-dark { display: inline; }

.pp-nav { padding: 4px 16px 80px; }
.pp-nav-group { margin-bottom: 10px; }
.pp-nav-group-title {
  display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 10px;
  color: var(--smm-ink-3); letter-spacing: 1px; text-transform: uppercase;
  padding: 8px 4px 4px; cursor: pointer; user-select: none;
}
.pp-nav-group-title .caret { width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid var(--smm-ink-3); margin-left: auto; transition: transform .15s; }
.pp-nav-group.collapsed .caret { transform: rotate(-90deg); }
.pp-nav-group.collapsed .pp-nav-list { display: none; }
.pp-nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-nav-item {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 10px; color: var(--smm-ink-2);
  font-weight: 500; font-size: 13.5px; text-decoration: none;
  transition: background .15s, color .15s;
}
.pp-nav-item:hover { background: rgba(0,202,243,0.08); color: var(--smm-ink); }
.pp-nav-item.active { background: var(--smm-primary); color: #fff; font-weight: 700; box-shadow: 0 4px 14px rgba(0,202,243,0.35); }
.pp-nav-item.active:hover { color: #fff; }
.pp-nav-item .nav-ico { width: 18px; height: 18px; flex: 0 0 18px; display: inline-flex; align-items: center; justify-content: center; }
.pp-nav-item .badge-new { margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .5px; background: var(--smm-warn); color: #fff; padding: 2px 6px; border-radius: 6px; }

/* ─── TOPBAR ─── */
.pp-topbar {
  position: fixed; top: 0; left: calc(var(--pp-sidebar-w) + var(--pp-sidebar-gap)); right: 0;
  height: var(--pp-topbar-h); background: var(--smm-surface);
  border-bottom: 1px solid var(--smm-border); z-index: 1030;
  display: flex; align-items: center; gap: 14px; padding: 0 32px 0 36px;
}
[data-bs-theme="dark"] .pp-topbar { background: rgba(13,43,54,0.95); border-bottom-color: rgba(255,255,255,0.06); }
/* Desktop RTL counterpart to the sidebar flip above - the bar spans from
   the viewport's other fixed edge up to the (now right-side) sidebar. */
[dir="rtl"] .pp-topbar { left: 0; right: calc(var(--pp-sidebar-w) + var(--pp-sidebar-gap)); }
.pp-page-title { display: flex; flex-direction: column; gap: 4px; }
.pp-page-title h1 { font-weight: 700; font-size: 30px; color: var(--smm-ink); margin: 0; line-height: 1; }
.pp-page-title .subtitle { font-size: 13px; color: var(--smm-ink-2); margin: 0; font-weight: 500; }
.pp-topbar-actions {
  margin-inline-start: auto; display: flex; align-items: center; gap: 16px;
  background: #F5F6FA; border-radius: 60px; padding: 8px 20px; height: 56px;
}
[data-bs-theme="dark"] .pp-topbar-actions { background: rgba(255,255,255,0.04); }

/* Theme toggle (topbar) */
.pp-theme-toggle { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--smm-ink-2); padding: 4px 8px; cursor: pointer; }
.pp-theme-toggle .ico { width: 16px; height: 16px; opacity: .7; display: inline-flex; }
.pp-theme-toggle .switch { width: 32px; height: 18px; border-radius: 10px; background: rgba(0,28,38,0.15); position: relative; cursor: pointer; }
[data-bs-theme="dark"] .pp-theme-toggle .switch { background: rgba(0,202,243,0.25); }
.pp-theme-toggle .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--smm-primary); transition: transform .2s; }
[data-bs-theme="dark"] .pp-theme-toggle .switch::after { transform: translateX(14px); }

/* Bell */
.pp-bell { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--smm-ink); position: relative; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pp-bell::after { content: ""; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: var(--smm-danger); border-radius: 50%; border: 2px solid #F5F6FA; }
[data-bs-theme="dark"] .pp-bell::after { border-color: rgba(13,43,54,0.95); }

/* Language */
.pp-lang-toggle {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px;
  color: var(--smm-ink-2); background: transparent; border: 0; cursor: pointer; padding: 4px 8px;
}
.pp-lang-toggle i { font-size: 16px; color: var(--smm-ink); }
.pp-lang-toggle .lang-code { letter-spacing: .3px; }

/* Wallet */
.pp-wallet { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; color: var(--smm-ink-2); background: transparent; border: 0; cursor: pointer; }
.pp-wallet .ico { color: var(--smm-ink); display: inline-flex; }
.pp-wallet .amount { background: rgba(102,204,0,0.12); color: #59B200; font-weight: 700; padding: 4px 8px; border-radius: 6px; }
.pp-wallet .caret { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--smm-ink-3); }

/* Currency dropdown — scrollable, never taller than viewport */
#currencies-list {
  max-height: min(320px, 70vh);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--smm-border) transparent;
  padding: 6px;
  min-width: 160px;
}
#currencies-list::-webkit-scrollbar { width: 5px; }
#currencies-list::-webkit-scrollbar-track { background: transparent; }
#currencies-list::-webkit-scrollbar-thumb { background: var(--smm-border); border-radius: 4px; }
#currencies-list .dropdown-item {
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 12px;
  color: var(--smm-ink-2);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
#currencies-list .dropdown-item:hover { background: var(--smm-bg); color: var(--smm-primary); }
[data-bs-theme="dark"] #currencies-list .dropdown-item:hover { background: rgba(255,255,255,.06); }

/* Topbar divider — a real element (not a directional border/margin) so it
   reads correctly regardless of text direction, unlike the border-left hack
   this replaced which vanished in RTL. */
.pp-topbar-divider { align-self: stretch; width: 1px; flex: 0 0 1px; margin: 10px 2px; background: rgba(0,28,38,0.08); }
[data-bs-theme="dark"] .pp-topbar-divider { background: rgba(255,255,255,.08); }

/* Profile */
.pp-profile { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.pp-profile .name { font-weight: 700; font-size: 15px; color: var(--smm-ink); white-space: nowrap; }
.pp-profile .caret { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--smm-ink-3); }
.pp-profile .avatar { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); box-shadow: 0 4px 10px rgba(0,0,0,0.1); background-image: linear-gradient(135deg, #797AF2, #00CAF3); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; flex: 0 0 38px; }

/* ─── MAIN CONTENT ─── */
.pp-main { padding: 28px 32px; min-height: calc(100vh - var(--pp-topbar-h)); }

/* ─── CARDS ─── */
.pp-card { background: var(--smm-surface); border: 1px solid var(--smm-border); border-radius: var(--pp-radius-card); box-shadow: var(--pp-shadow-card); }
[data-bs-theme="dark"] .pp-card { background: rgba(13,43,54,0.6); border-color: rgba(255,255,255,0.06); }
.pp-card-header { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--smm-border); }
[data-bs-theme="dark"] .pp-card-header { border-bottom-color: rgba(255,255,255,.06); }
.pp-card-header h3 { font-weight: 700; font-size: 18px; color: var(--smm-ink); margin: 0; }
.pp-card-header .sub-ico { width: 28px; height: 28px; border-radius: 8px; background: rgba(0,202,243,0.10); color: var(--smm-primary); display: inline-flex; align-items: center; justify-content: center; }

/* ─── FORM CONTROLS (auth) ─── */
.pp-field { margin-bottom: 16px; }
.pp-field-label { display: flex; align-items: center; justify-content: space-between; font-weight: 500; font-size: 14px; color: var(--smm-ink); margin: 0 4px 6px; }
.pp-field-label .right { display: inline-flex; align-items: center; gap: 6px; color: var(--smm-ink-2); cursor: pointer; font-weight: 500; font-size: 13px; }
.pp-field-label .right:hover { color: var(--smm-primary); }
.pp-input, .pp-select-wrap { width: 100%; background: var(--smm-surface); border: 1px solid var(--smm-border); border-radius: 12px; box-shadow: 0 2px 10px rgba(51,68,102,0.05); padding: 0 16px; font-family: inherit; font-size: 14px; color: var(--smm-ink); display: flex; align-items: center; gap: 10px; min-height: 50px; position: relative; }
[data-bs-theme="dark"] .pp-input, [data-bs-theme="dark"] .pp-select-wrap { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); box-shadow: none; }
/* min-width: 0 for the same reason as .pp-search-form .pp-input above - an <input> has
   its own large default intrinsic width that otherwise blocks this flex row from
   shrinking it below that, in every place .pp-input is reused (search bars, amount
   fields, etc.), not just the search bar that first surfaced it. */
.pp-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--smm-ink); font: inherit; padding: 14px 0; }
.pp-input input::placeholder { color: var(--smm-ink-4); }
.pp-input .ico { color: var(--smm-ink-4); display: inline-flex; align-items: center; flex: 0 0 18px; }
.pp-select { flex: 1; border: 0; outline: 0; background: transparent; color: var(--smm-ink); font: inherit; font-size: 14px; padding: 14px 0; cursor: pointer; appearance: none; -webkit-appearance: none; }
.pp-select option { background: var(--smm-surface); color: var(--smm-ink); }
[data-bs-theme="dark"] .pp-select option { background: #0D2B36; }

/* Virtual-select dropdown (category/service selects) — dark mode contrast fix */
[data-bs-theme="dark"] .vscomp-wrapper {
  --vscomp-options-bg: #0D2B36;
  --vscomp-text-color: #E8F0F4;
  --vscomp-text-secondary-color: #8FA7B2;
  --vscomp-border-color: rgba(255,255,255,.08);
  --vscomp-input-bg: rgba(255,255,255,.04);
  --vscomp-input-color: #E8F0F4;
  --vscomp-input-placeholder-color: #8FA7B2;
  --vscomp-options-hover-bg: rgba(255,255,255,.06);
  --vscomp-options-selected-bg: rgba(0,202,243,.18);
  --vscomp-options-selected-color: #00CAF3;
}
[data-bs-theme="dark"] .vscomp-dropbox-container,
[data-bs-theme="dark"] .vscomp-options-container { background: #0D2B36; border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .vscomp-option,
[data-bs-theme="dark"] .vscomp-option-text { color: #E8F0F4; }
[data-bs-theme="dark"] .vscomp-option.focused,
[data-bs-theme="dark"] .vscomp-option:hover { background: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .vscomp-option.selected { background: rgba(0,202,243,.18); color: #00CAF3; }
[data-bs-theme="dark"] .vscomp-search-input { background: rgba(255,255,255,.04); color: #E8F0F4; border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .vscomp-search-input::placeholder { color: #8FA7B2; }
[data-bs-theme="dark"] .vscomp-no-options { color: #8FA7B2; }
.pp-select-caret { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--smm-ink-3); flex: 0 0 10px; pointer-events: none; }
.pp-select-badge { background: #008CFF; color: #fff; font-weight: 500; font-size: 13px; width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; }

/* Select2 theming (category/service selects on New Order render via Select2,
   confirmed against the live markup - the .vscomp-* rules above are for a
   different, unrelated dropdown widget). Matches the .pp-input/.pp-select-wrap
   look used by every other field on this form instead of Select2's own
   generic default skin. */
.select2-container--default .select2-selection--single {
  background: var(--smm-surface);
  border: 1px solid var(--smm-border);
  border-radius: 12px;
  height: auto;
  min-height: 50px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 10px rgba(51,68,102,0.05);
  transition: border-color .15s, box-shadow .15s;
}
[data-bs-theme="dark"] .select2-container--default .select2-selection--single {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  box-shadow: none;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--smm-ink);
  font-size: 14px;
  line-height: 1.4;
  padding: 0;
}
[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: #E8F0F4; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--smm-ink-4); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 14px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--smm-ink-3) transparent transparent transparent;
  border-width: 6px 5px 0 5px;
  margin-left: -5px;
  margin-top: -3px;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--smm-primary);
  box-shadow: 0 0 0 3px rgba(var(--smm-primary-rgb), .12);
}

.select2-dropdown {
  background: var(--smm-surface);
  border: 1px solid var(--smm-border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(51,68,102,0.12);
  overflow: hidden;
}
/* !important below: the category select's options (favorites/icon-tagged entries) are
   rendered via the panel's own JS template, which can carry its own background on
   .select2-results/.select2-results__options with specificity we can't predict - confirmed
   live in dark mode where the dropdown showed a solid white panel despite .select2-dropdown
   itself already being dark, so the override has to win outright rather than rely on
   inheritance from the (correctly dark) .select2-dropdown parent. */
[data-bs-theme="dark"] .select2-dropdown { background: #0D2B36 !important; border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .select2-results,
[data-bs-theme="dark"] .select2-results__options { background: #0D2B36 !important; }
.select2-search--dropdown { padding: 10px; }
.select2-search--dropdown .select2-search__field {
  background: var(--smm-surface);
  border: 1px solid var(--smm-border);
  border-radius: 8px;
  color: var(--smm-ink);
  padding: 8px 12px;
  outline: none;
}
[data-bs-theme="dark"] .select2-search--dropdown .select2-search__field { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); color: #E8F0F4; }
.select2-results__options { padding: 8px 0; }
.select2-results__option {
  color: var(--smm-ink);
  padding: 10px 14px;
  font-size: 13.5px;
  background: transparent;
}
[data-bs-theme="dark"] .select2-results__option { color: #E8F0F4 !important; background: transparent !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: rgba(var(--smm-primary-rgb), .12);
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background: rgba(var(--smm-primary-rgb), .18);
  font-weight: 600;
}
.select2-results__group { color: var(--smm-ink-3); font-weight: 700; font-size: 12px; padding: 8px 14px 4px; background: transparent; }
[data-bs-theme="dark"] .select2-results__group { color: #8FA7B2 !important; background: transparent !important; }
/* Per-option icon badges (the star/signature/emoji icons the panel renders next to each
   category name, from each <option>'s data-icon) - same class the closed selection box
   uses for its own icon, so same dark-mode fix applies here too. */
[data-bs-theme="dark"] .select2-results__option .select2-selection__icon { background: transparent !important; color: #E8F0F4 !important; }

/* Qty stepper */
.pp-qty { display: flex; align-items: center; background: var(--smm-surface); border: 1px solid var(--smm-border); border-radius: 12px; box-shadow: 0 2px 10px rgba(51,68,102,0.05); padding: 7px; min-height: 50px; }
[data-bs-theme="dark"] .pp-qty { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); box-shadow: none; }
.pp-qty button { width: 36px; height: 36px; border-radius: 10px; background: var(--smm-ink); color: #fff; border: 0; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(51,68,102,0.16); cursor: pointer; flex: 0 0 36px; }
.pp-qty button:hover { background: #122930; }
.pp-qty input { flex: 1; border: 0; outline: 0; background: transparent; text-align: center; font-weight: 500; font-size: 16px; color: var(--smm-ink); font-family: inherit; }
.pp-minmax { display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--smm-ink-3); margin-top: 8px; padding: 0 6px; }

/* Time pill */
.pp-time-pill { background: rgba(0,202,243,0.06); border: 1px dashed rgba(0,202,243,0.3); color: var(--smm-ink); border-radius: 12px; padding: 14px 18px; font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 10px; }
.pp-time-pill .ico { color: var(--smm-primary); display: inline-flex; }
.pp-time-pill strong { color: var(--smm-ink); font-weight: 700; margin-left: 4px; }

/* Charge pill */
.pp-charge { background: rgba(102,204,0,0.10); border: 1px solid rgba(102,204,0,0.25); color: #4D9900; border-radius: 12px; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; }
.pp-charge .label { font-weight: 700; font-size: 16px; }
.pp-charge .amount { font-weight: 700; font-size: 32px; line-height: 1; }
[data-bs-theme="dark"] .pp-charge { color: #9CE26B; }

/* Submit */
.pp-submit { width: 100%; background: var(--smm-primary); color: #fff; border: 0; border-radius: 12px; padding: 18px 24px; font-weight: 700; font-size: 16px; font-family: inherit; box-shadow: var(--smm-shadow-btn); display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: background .15s, transform .15s; }
.pp-submit:hover { background: #00B5D9; transform: translateY(-1px); }

/* ── Add Funds ── */
.pp-card-pad { padding: 22px; }
.pp-amount-input { width: 100%; background: var(--smm-surface); border: 1px solid var(--smm-border); border-radius: 12px; box-shadow: 0 2px 10px rgba(51,68,102,0.05); padding: 14px 18px; font-family: 'Montserrat', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif; font-size: 24px; font-weight: 700; color: #4D9900; display: flex; align-items: center; gap: 6px; }
[data-bs-theme="dark"] .pp-amount-input { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); box-shadow: none; color: #9CE26B; }
.pp-amount-input::before { content: "$"; font-weight: 700; }
.pp-amount-input input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; color: inherit; width: 100%; }
.pp-amount-input input::-webkit-outer-spin-button, .pp-amount-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pp-amount-hint { font-size: 12px; color: var(--smm-ink-3); margin-top: 8px; margin-inline-start: 4px; }
.pp-quick-amounts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 6px; }
.pp-quick-amount { background: var(--smm-surface); border: 1px solid var(--smm-border); border-radius: 12px; padding: 14px 6px; font-weight: 700; font-size: 16px; color: var(--smm-ink); cursor: pointer; transition: all .15s; font-family: inherit; text-align: center; }
[data-bs-theme="dark"] .pp-quick-amount { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.pp-quick-amount:hover { border-color: var(--smm-primary); color: var(--smm-primary); }
.pp-quick-amount.active { background: var(--smm-primary); border-color: var(--smm-primary); color: #fff; box-shadow: var(--pp-shadow-cyan); }

/* ── Payment History Table ── */
.pp-table-wrap { padding: 0 22px 22px; overflow-x: auto; }
.pp-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; min-width: 520px; }
.pp-table thead th { background: #3A4548; color: #fff; font-weight: 700; font-size: 13px; text-align: start; padding: 14px 16px; white-space: nowrap; }
[data-bs-theme="dark"] .pp-table thead th { background: rgba(255,255,255,.06); }
.pp-table thead th:first-child { border-start-start-radius: 12px; border-end-start-radius: 12px; padding-inline-start: 24px; }
.pp-table thead th:last-child { border-start-end-radius: 12px; border-end-end-radius: 12px; padding-inline-end: 24px; text-align: end; }
.pp-table tbody tr { background: var(--smm-surface); }
[data-bs-theme="dark"] .pp-table tbody tr { background: rgba(13,43,54,0.55); }
.pp-table tbody td { padding: 14px 16px; font-size: 13px; color: var(--smm-ink); vertical-align: middle; border-top: 1px solid var(--smm-border); border-bottom: 1px solid var(--smm-border); }
[data-bs-theme="dark"] .pp-table tbody td { border-color: rgba(255,255,255,.05); }
.pp-table tbody td:first-child { border-inline-start: 1px solid var(--smm-border); border-start-start-radius: 12px; border-end-start-radius: 12px; padding-inline-start: 24px; }
.pp-table tbody td:last-child { border-inline-end: 1px solid var(--smm-border); border-start-end-radius: 12px; border-end-end-radius: 12px; padding-inline-end: 24px; text-align: end; }
[data-bs-theme="dark"] .pp-table tbody td:first-child, [data-bs-theme="dark"] .pp-table tbody td:last-child { border-color: rgba(255,255,255,.05); }
.pp-table .id-cell { color: var(--smm-ink-2); font-weight: 500; font-family: ui-monospace, Menlo, monospace; }
.pp-table .date-cell { color: var(--smm-ink-2); }
.pp-table .charge-cell { color: #4D9900; font-weight: 700; }
[data-bs-theme="dark"] .pp-table .charge-cell { color: #9CE26B; }
.pp-invoice-link { font-size: 12px; font-weight: 600; color: var(--smm-primary); text-decoration: none; }
.pp-invoice-link:hover { text-decoration: underline; }

/* ── Pagination ── */
.pp-pagination { display: flex; align-items: center; gap: 6px; padding: 12px 22px 22px; flex-wrap: wrap; }
.pp-page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--smm-border); background: var(--smm-surface); color: var(--smm-ink-2); font-weight: 600; font-size: 13px; text-decoration: none; transition: all .15s; padding: 0 8px; }
[data-bs-theme="dark"] .pp-page-btn { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.pp-page-btn:hover { border-color: var(--smm-primary); color: var(--smm-primary); }
/* RTL: the row itself already reverses (prev ends up on the right, next on
   the left), but the chevron glyphs inside don't — mirror them so they still
   point toward "back"/"forward" relative to their new position. */
.rtl-pagination .pp-page-btn svg { transform: scaleX(-1); }
.pp-page-btn.active { background: var(--smm-primary); border-color: var(--smm-primary); color: #fff; }

/* ── Trustpilot review card (compact bar) ── */
.pp-review-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  background: var(--smm-surface);
  border: 1px solid var(--smm-border);
  border-radius: 12px;
  box-shadow: var(--pp-shadow-card);
  padding: 12px 16px;
  margin: 0 0 16px;
  overflow: hidden;
}
[data-bs-theme="dark"] .pp-review-card { background: rgba(13,43,54,0.6); }
.pp-review-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--smm-gradient);
}
.pp-review-card-icon {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 50%;
  background: var(--smm-gradient);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(121,122,242,.3);
}
.pp-review-card-icon svg { width: 15px; height: 15px; }
.pp-review-card-text { flex: 1 1 220px; min-width: 0; text-align: start; }
.pp-review-card-title-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pp-review-card-title { font-weight: 700; font-size: 13.5px; color: var(--smm-ink); margin: 0; }
.pp-review-card-stars { display: flex; gap: 1px; color: #FFAA00; }
.pp-review-card-stars svg { width: 11px; height: 11px; }
.pp-review-card-body { font-size: 12px; color: var(--smm-ink-2); margin: 1px 0 0; line-height: 1.4; }
/* Explicit fallback: force right-alignment for fa/ar regardless of any
   logical-property/inheritance edge case, since text-align:start alone
   wasn't taking effect for these languages. */
[dir="rtl"] .pp-review-card-text,
[dir="rtl"] .pp-review-card-title,
[dir="rtl"] .pp-review-card-body { text-align: right; }
.pp-review-card-widget { flex: 0 0 auto; margin-inline-start: auto; }
.pp-review-card-widget .trustpilot-widget { border-radius: 8px; overflow: hidden; }
[data-bs-theme="dark"] .pp-review-card-widget .trustpilot-widget { filter: invert(1) hue-rotate(180deg); }
@media (max-width: 480px) {
  .pp-review-card-widget { flex: 1 1 100%; margin-inline-start: 0; justify-content: center; display: flex; }
}

/* Generic wrapper for backend-injected rich text/HTML blocks (payment
   gateway output, ticket/giveaway/rules text, etc.) — keeps alignment
   following reading direction instead of a leftover physical left-align. */
.rtl-content { text-align: start; }

/* ── Crypto recharge instructions ── */
.pp-crypto-box .pp-crypto-content { font-size: 13.5px; color: var(--smm-ink-2); line-height: 1.6; }
.pp-crypto-title { font-size: 15px; font-weight: 700; color: var(--smm-ink); margin: 0 0 10px; }
.pp-crypto-subtitle { font-size: 14px; font-weight: 700; color: var(--smm-ink); margin: 16px 0 8px; }
.pp-crypto-bot { font-weight: 700; color: var(--smm-primary); margin: 4px 0; }
.pp-crypto-list { margin: 0 0 4px; padding-inline-start: 20px; }
.pp-crypto-list li { margin-bottom: 4px; }
.pp-crypto-footer { margin-top: 16px; font-weight: 600; color: var(--smm-ink); }

/* ── Right rail ── */
.pp-addfunds-grid { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.pp-addfunds-grid > * { min-width: 0; }
.pp-addfunds-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--pp-topbar-h) + 28px); }
.pp-balance-card { background: var(--smm-surface); border: 1px solid var(--smm-border); border-radius: 16px; padding: 28px 22px; text-align: center; position: relative; overflow: hidden; }
[data-bs-theme="dark"] .pp-balance-card { background: rgba(13,43,54,0.6); border-color: rgba(255,255,255,.06); }
.pp-balance-card::before { content: "$"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 220px; font-weight: 700; color: var(--smm-bg); z-index: 0; line-height: 1; }
[data-bs-theme="dark"] .pp-balance-card::before { color: rgba(255,255,255,.03); }
.pp-balance-card > * { position: relative; z-index: 1; }
.pp-balance-card .lbl { font-weight: 700; font-size: 13px; color: var(--smm-ink-2); margin: 0 0 10px; text-transform: uppercase; letter-spacing: .5px; }
.pp-balance-card .amt { font-weight: 800; font-size: 28px; color: #4D9900; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; }
[data-bs-theme="dark"] .pp-balance-card .amt { color: #9CE26B; }
.pp-balance-card .sub { font-size: 12px; color: var(--smm-ink-3); margin-top: 6px; }
.pp-summary-card { background: var(--smm-surface); border: 1px solid var(--smm-border); border-radius: 16px; padding: 22px; }
[data-bs-theme="dark"] .pp-summary-card { background: rgba(13,43,54,0.6); border-color: rgba(255,255,255,.06); }
.pp-summary-card h4 { font-weight: 700; font-size: 15px; color: var(--smm-ink); margin: 0 0 14px; display: flex; align-items: center; gap: 6px; }
.pp-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 13px; color: var(--smm-ink-2); border-bottom: 1px solid var(--smm-border); }
[data-bs-theme="dark"] .pp-summary-row { border-bottom-color: rgba(255,255,255,.05); }
.pp-summary-row:last-child { border-bottom: 0; }
.pp-summary-row.total { font-weight: 700; color: var(--smm-ink); padding-top: 12px; margin-top: 4px; border-top: 2px solid var(--smm-border); border-bottom: 0; }
[data-bs-theme="dark"] .pp-summary-row.total { border-top-color: rgba(255,255,255,.08); }
.pp-summary-row .v { font-weight: 700; color: var(--smm-ink); }
.pp-summary-row.total .v { color: #4D9900; font-size: 16px; }
[data-bs-theme="dark"] .pp-summary-row.total .v { color: #9CE26B; }
.pp-bonus-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 13px; color: var(--smm-ink-2); }
.pp-bonus-row + .pp-bonus-row { border-top: 1px dashed var(--smm-border); }
[data-bs-theme="dark"] .pp-bonus-row + .pp-bonus-row { border-top-color: rgba(255,255,255,.06); }
.pp-bonus-row .badge-bonus { background: rgba(102,204,0,0.10); color: #4D9900; font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 6px; }
[data-bs-theme="dark"] .pp-bonus-row .badge-bonus { color: #9CE26B; }
.pp-tip { background: rgba(255,170,0,0.06); border: 1px solid rgba(255,170,0,0.20); border-radius: 12px; padding: 14px 16px; font-size: 12.5px; color: var(--smm-ink-2); line-height: 1.55; display: flex; gap: 10px; align-items: flex-start; }
.pp-tip .ico { color: #FFAA00; flex: 0 0 16px; margin-top: 1px; display: inline-flex; }
.pp-tip strong { color: var(--smm-ink); font-weight: 700; }
.pp-addfunds-gateway { font-size: 14px; }

/* Sidebar logout — desktop topbar handles theme/lang/account, so hide here */
.pp-sidebar-logout { display: none; padding: 4px 16px 10px; }
.pp-logout-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 10px; color: var(--smm-danger); font-weight: 600; font-size: 13.5px; text-decoration: none; transition: background .15s; }
.pp-logout-item:hover { background: rgba(242,85,111,0.08); color: var(--smm-danger); }
.pp-settings-item { color: var(--smm-ink) !important; }
.pp-settings-item:hover { background: rgba(0,202,243,0.08); color: var(--smm-primary) !important; }

/* Sidebar footer strip */
.pp-sidebar-foot { display: none; padding: 12px 18px; border-top: 1px solid var(--smm-border); align-items: center; gap: 6px; }
[data-bs-theme="dark"] .pp-sidebar-foot { border-top-color: rgba(255,255,255,.07); }
.pp-sf-btn { width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--smm-ink-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 30px; }
.pp-sf-btn:hover { color: var(--smm-ink); background: rgba(0,202,243,.08); }
.pp-sf-toggle { width: 36px; height: 20px; border-radius: 10px; background: rgba(0,28,38,.12); position: relative; cursor: pointer; border: 0; padding: 0; flex: 0 0 36px; }
[data-bs-theme="dark"] .pp-sf-toggle { background: rgba(0,202,243,.25); }
.pp-sf-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--smm-primary); transition: transform .2s; }
[data-bs-theme="dark"] .pp-sf-toggle::after { transform: translateX(16px); }

/* Language item — inline accordion, same interaction as the Free Services toggle */
.pp-lang-item { width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; }
[dir="rtl"] .pp-lang-item { text-align: right; }
.pp-lang-item-chev { margin-left: auto; font-size: 12px; transition: transform .25s; }
[dir="rtl"] .pp-lang-item-chev { margin-left: 0; margin-right: auto; }
.pp-lang-item[aria-expanded="true"] .pp-lang-item-chev { transform: rotate(180deg); }

/* Explicit "close" row at the top of the expanded list — stays reachable
   even after scrolling, unlike relying on the (possibly scrolled-away)
   toggle button above. Shared by both the auth sidebar and guest drawer. */
.pp-lang-close-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  padding: 8px 14px 6px 46px; font-size: 11px; font-weight: 700;
  color: var(--smm-ink-3, #8FA7B2); text-transform: uppercase; letter-spacing: .4px;
}
[dir="rtl"] .pp-lang-close-row { padding: 8px 46px 6px 14px; text-align: right; }
.pp-lang-close-row:hover { color: var(--smm-primary, #00CAF3); }

.pp-lang-sub-nav { list-style: none; margin: 0; padding: 4px 0 8px; }
.pp-lang-sub-item {
  display: block; padding: 9px 14px 9px 46px; border-radius: 10px; color: var(--smm-ink-2);
  text-decoration: none; font-size: 13px; font-weight: 500; transition: background .15s, color .15s;
}
[dir="rtl"] .pp-lang-sub-item { padding: 9px 46px 9px 14px; }
.pp-lang-sub-item:hover { background: rgba(0,202,243,.08); color: var(--smm-ink); }
.pp-lang-sub-item.active { color: var(--smm-primary); font-weight: 700; }

/* Mobile burger + logo */
.pp-sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,28,38,0.45); z-index: 1035; }
.pp-sidebar-backdrop.open { display: block; }
.pp-mobile-burger { display: none; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; padding: 0; align-items: center; justify-content: center; flex: 0 0 40px; }
.pp-mobile-burger-dark { display: none; }
[data-bs-theme="dark"] .pp-mobile-burger-light { display: none; }
[data-bs-theme="dark"] .pp-mobile-burger-dark { display: block; }
.pp-mobile-logo { display: none; }
.pp-mobile-logo img { height: 32px; width: auto; }
.pp-mobile-logo-dark { display: none; }
[data-bs-theme="dark"] .pp-mobile-logo-light { display: none; }
[data-bs-theme="dark"] .pp-mobile-logo-dark { display: inline; }

/* Hide the floating Telegram support widget while a mobile menu is open, so it can't overlap/cover menu items */
body.mobile-menu-open .integration-fixed.integration-fixed__bottom-left { display: none !important; }

/* Bottom nav (mobile) */
.pp-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 64px; background: #0D2232; z-index: 1050; padding: 0 4px; }
.pp-bottom-nav-inner { display: flex; height: 100%; align-items: center; }
.pp-bn-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; color: rgba(255,255,255,0.55); font-weight: 600; font-size: 10px; padding: 6px 2px; border-radius: 10px; transition: color .15s; position: relative; }
.pp-bn-item.active { color: var(--smm-primary); }
.pp-bn-badge { position: absolute; top: -4px; right: -7px; background: var(--smm-danger); color: #fff; font-size: 8px; font-weight: 700; line-height: 1; padding: 2px 4px; border-radius: 8px; min-width: 14px; text-align: center; }
.pp-bn-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #797AF2, #00CAF3); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12px; }

/* Page hero (mobile only) */
.pp-page-hero { display: none; }

/* ══════════════════════════════════════════════════════
   DARK MODE — PUBLIC PAGES
══════════════════════════════════════════════════════ */

[data-bs-theme="dark"] body:not(.pp-body) { background: #001C26; color: #e8f0f4; }

[data-bs-theme="dark"] .main-nav { background: #001C26; }
[data-bs-theme="dark"] .nav-card { background: rgba(13,43,54,.95); box-shadow: 0 2px 18px rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.07); }
[data-bs-theme="dark"] .nav-links a { color: #8FA7B2; }
[data-bs-theme="dark"] .nav-links a:hover, [data-bs-theme="dark"] .nav-links a.active { color: #00c4d4; }
/* !important on this whole light/dark logo-swap group: same reason as .mobile-drawer's
   transform and .drawer-logo-* above - a higher-specificity panel-injected rule can
   otherwise silently win and leave both variants visible at once, stacked together. */
.nav-hamburger-dark { display: none !important; }
[data-bs-theme="dark"] .nav-hamburger-light { display: none !important; }
[data-bs-theme="dark"] .nav-hamburger-dark { display: block !important; }
.navbar-brand-logo-dark { display: none !important; }
[data-bs-theme="dark"] .navbar-brand-logo-light { display: none !important; }
[data-bs-theme="dark"] .navbar-brand-logo-dark { display: inline !important; }
[data-bs-theme="dark"] .nav-dd-menu { background: #0D2B36; border-color: rgba(255,255,255,.08); box-shadow: 0 8px 32px rgba(0,0,0,.4); }
[data-bs-theme="dark"] .nav-dd-menu .dropdown-item { color: #8FA7B2; }
[data-bs-theme="dark"] .nav-dd-menu .dropdown-item:hover { color: #00c4d4; background: rgba(0,196,212,.08); }
[data-bs-theme="dark"] .nav-dd-menu .dropdown-divider { border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .btn-get-started { background: #1B4754; }
[data-bs-theme="dark"] .btn-get-started:hover { background: #245e70; color: #fff; }
[data-bs-theme="dark"] .mobile-drawer { background: #0D2B36; }
[data-bs-theme="dark"] .drawer-header { border-bottom-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .drawer-close { background: #1B4754; color: #8FA7B2; }
[data-bs-theme="dark"] .drawer-close:hover { background: #245e70; }
[data-bs-theme="dark"] .drawer-nav li a { color: #8FA7B2; }
[data-bs-theme="dark"] .drawer-nav li a:hover, [data-bs-theme="dark"] .drawer-nav li a.active { color: #00c4d4; background: rgba(0,196,212,.08); }
[data-bs-theme="dark"] .drawer-acc-toggle { color: #8FA7B2; }
[data-bs-theme="dark"] .drawer-acc-toggle:hover { color: #00c4d4; background: rgba(0,196,212,.08); }
[data-bs-theme="dark"] .drawer-acc-toggle i:first-child { color: #526166; }
[data-bs-theme="dark"] .drawer-acc-toggle:hover i:first-child { color: #00c4d4; }
[data-bs-theme="dark"] .drawer-sub-nav { background: rgba(255,255,255,.03); border-bottom-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .drawer-sub-nav li a { color: #8FA7B2; }
[data-bs-theme="dark"] .drawer-sub-nav li a:hover { color: #00c4d4; background: rgba(0,196,212,.08); }
[data-bs-theme="dark"] .drawer-free-wrap { box-shadow: 0 2px 8px rgba(0,0,0,.35); }
[data-bs-theme="dark"] .drawer-btns { border-top-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .hero-section { background: #001C26; }
[data-bs-theme="dark"] .hero-dot { background: #1B4754; }
[data-bs-theme="dark"] .hero-eyebrow { color: #00c4d4; }
[data-bs-theme="dark"] .hero-h1 { color: #e8f0f4; }
[data-bs-theme="dark"] .hero-desc { color: #8FA7B2; }
[data-bs-theme="dark"] .hero-trust-badge { color: #8FA7B2; }
[data-bs-theme="dark"] .hero-trust-check { background: rgba(0,196,212,.14); color: #00c4d4; }
[data-bs-theme="dark"] .login-section { background: #001C26; }
[data-bs-theme="dark"] .login-wrapper { background: #071a24; }
[data-bs-theme="dark"] .login-card h2 { color: #e8f0f4; }
[data-bs-theme="dark"] .lbl { color: #8FA7B2; }
[data-bs-theme="dark"] .inp { background: #0D2B36; border-color: rgba(255,255,255,.12); color: #e8f0f4; }
[data-bs-theme="dark"] .inp::placeholder { color: #597380; }
[data-bs-theme="dark"] .inp:focus { border-color: #00c4d4; box-shadow: 0 0 0 3px rgba(0,196,212,.15); }
[data-bs-theme="dark"] .inp-icon, [data-bs-theme="dark"] .inp-eye { color: #597380; }
[data-bs-theme="dark"] .btn-google-login { background: #0D2B36; border-color: rgba(255,255,255,.12); color: #e8f0f4; }
[data-bs-theme="dark"] .login-meta-row { color: #597380; }
[data-bs-theme="dark"] .recover-link { color: #8FA7B2; }
[data-bs-theme="dark"] .signup-text { color: #597380; }
[data-bs-theme="dark"] .sec-title { color: #e8f0f4; }
[data-bs-theme="dark"] .sec-sub { color: #8FA7B2; }
[data-bs-theme="dark"] .bar-title-text { color: #e8f0f4; }
[data-bs-theme="dark"] .offers-section { background: #071a24; }
[data-bs-theme="dark"] .offer-col { background: #0D2B36; }
[data-bs-theme="dark"] .offer-name { color: #e8f0f4; }
[data-bs-theme="dark"] .prices-section { background: #001C26; border-top-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .price-card { background: #0D2B36; border-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .price-card-name { color: #e8f0f4; }
[data-bs-theme="dark"] .price-card-amount { color: #00c4d4; }
[data-bs-theme="dark"] .price-card-loading { color: #597380; }
[data-bs-theme="dark"] .price-card-desc { color: #8FA7B2; }
[data-bs-theme="dark"] .reasons-section { background: #001C26; border-top-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .free-services-section { background: #071a24; }
[data-bs-theme="dark"] .free-svc-card { background: #0D2B36; }
[data-bs-theme="dark"] .free-svc-name { color: #e8f0f4; }
[data-bs-theme="dark"] .free-svc-desc { color: #8FA7B2; }
[data-bs-theme="dark"] .free-services-note { color: #8FA7B2; }
[data-bs-theme="dark"] .smm-services-section { background: #001C26; border-top-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .smm-svc-card { background: #0D2B36; border-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .smm-svc-name { color: #e8f0f4; }
[data-bs-theme="dark"] .smm-svc-desc { color: #8FA7B2; }
[data-bs-theme="dark"] .smm-svc-price { color: #8FA7B2; }
[data-bs-theme="dark"] .smm-svc-price strong { color: #00c4d4; }
[data-bs-theme="dark"] .priceposition-section { background: #071a24; }
[data-bs-theme="dark"] .priceposition-body p { color: #8FA7B2; }
[data-bs-theme="dark"] .guarantees-section { background: #001C26; border-top-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .guarantees-callout { background: #0D2B36; border-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .guarantees-callout h3 { color: #e8f0f4; }
[data-bs-theme="dark"] .guarantees-callout p { color: #8FA7B2; }
[data-bs-theme="dark"] .dashboard-section { background: #001C26; border-top-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .reseller-api-section { background: #071a24; }
[data-bs-theme="dark"] .reseller-api-desc { color: #8FA7B2; }
[data-bs-theme="dark"] .reseller-api-card { background: #0D2B36; border-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .btn-outline-dark { color: #e8f0f4; border-color: #e8f0f4; }
[data-bs-theme="dark"] .btn-outline-dark:hover { background: #e8f0f4; color: #0D2B36; }
[data-bs-theme="dark"] .getstarted-section { background: #001C26; border-top-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .getstarted-num { background: #00c4d4; color: #001C26; }
[data-bs-theme="dark"] .getstarted-name { color: #e8f0f4; }
[data-bs-theme="dark"] .getstarted-desc { color: #8FA7B2; }
[data-bs-theme="dark"] .payment-support-section { background: #001C26; border-top-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .gethelp-section { background: #071a24; }
[data-bs-theme="dark"] .gethelp-intro { color: #c2cdd9; }
[data-bs-theme="dark"] .gethelp-disclaimer { color: #6f8290; }
[data-bs-theme="dark"] .gethelp-disclaimer a { color: #8fa7b2; }
[data-bs-theme="dark"] .gethelp-subhead { color: #e8f0f4; }
[data-bs-theme="dark"] .gethelp-email-row { color: #c2cdd9; }
[data-bs-theme="dark"] .gethelp-email-row a { color: #00c4d4; }
[data-bs-theme="dark"] .about-section { background: #001C26; border-top-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .for-section { background: #001C26; border-top-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .for-title { color: #e8f0f4; }
[data-bs-theme="dark"] .for-list li { color: #8FA7B2; }
[data-bs-theme="dark"] .stats-section { background: #001C26; border-top-color: rgba(255,255,255,.06); border-bottom-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .stat-lbl { color: #8FA7B2; }
[data-bs-theme="dark"] .testimonials-section { background: #071a24; }
[data-bs-theme="dark"] .test-card { background: #0D2B36; box-shadow: 0 4px 24px rgba(0,0,0,.4); }
[data-bs-theme="dark"] .test-avatar-wrap { border-color: #0D2B36; }
[data-bs-theme="dark"] .test-name { color: #e8f0f4; }
[data-bs-theme="dark"] .test-country { color: #8FA7B2; }
[data-bs-theme="dark"] .test-text { color: #8FA7B2; }
[data-bs-theme="dark"] .test-dot { background: #1B4754; }
[data-bs-theme="dark"] .contact-section { background: #001C26; }
[data-bs-theme="dark"] .contact-sub { color: #8FA7B2; }
[data-bs-theme="dark"] .contact-card { background: #0D2B36; border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .contact-row { border-bottom-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .c-icon-outline { color: #597380; }
[data-bs-theme="dark"] .c-row-label { color: #e8f0f4; }
[data-bs-theme="dark"] .ticket-box { background: #0D2B36; border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .ticket-box h3 { color: #e8f0f4; }
[data-bs-theme="dark"] .ticket-box p { color: #8FA7B2; }
[data-bs-theme="dark"] .ticket-icon { color: #1B4754; }
[data-bs-theme="dark"] .faq-section { background: #071a24; }
[data-bs-theme="dark"] .faq-left-text { color: #8FA7B2; }
[data-bs-theme="dark"] .accordion-item { background: #0e2535 !important; }
[data-bs-theme="dark"] .accordion-button { background: #0e2535 !important; color: #e8f0f4 !important; }
[data-bs-theme="dark"] .accordion-button:not(.collapsed) { background: #0e2535 !important; color: #e8f0f4 !important; }
[data-bs-theme="dark"] .accordion-body { background: #0e2535 !important; color: #8FA7B2 !important; }
.select2-container .dropdown-menu > li > a {
  color:var(--smm-ink);
}
.select2-container--default .select2-results__option[aria-selected=true] a {
  color: #1a1a1a !important;
}
/* The panel's own service-select template still emits the Bootstrap 4
   "#id" badge (.select2-selection__id / .badge-secondary / .badge-pill)
   with white text, but this site runs Bootstrap 5, which dropped
   .badge-secondary entirely — so the badge lost its dark background and
   the white text sat directly on the dropdown's white row, invisible in
   light mode (it only read as visible in dark mode by accident, against
   the page's own dark background). Restoring the class gives it back a
   background so the id badge is legible in both themes. */
.badge-secondary {
  background-color: #6c757d;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .25em .6em;
  font-size: 11px;
  font-weight: 600;
}
/* ── Platform Filters ── */
.pp-platforms { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; padding: 22px; }
.pp-platform { background: var(--smm-surface); border: 1px solid var(--smm-border); border-radius: 14px; padding: 14px 8px 10px; display: flex; flex-direction: column; gap: 6px; align-items: center; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s, background .15s; }
[data-bs-theme="dark"] .pp-platform { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.06); }
/* TikTok and Threads use near-black brand colors as inline styles (their actual brand color), which
   are nearly invisible against the dark card background — force a light icon color in dark mode. */
[data-bs-theme="dark"] .pp-platform[data-platform="tiktok"] .pp-platform-icon,
[data-bs-theme="dark"] .pp-platform[data-platform="threads"] .pp-platform-icon {
  color: #fff !important;
  background: rgba(255,255,255,.12) !important;
}
.pp-platform:hover { border-color: var(--smm-primary); transform: translateY(-2px); }
.pp-platform.active { background: rgba(0,202,243,.65); border-color: var(--smm-primary); box-shadow: var(--pp-shadow-cyan); }
.pp-platform.active .pp-platform-icon { color: #fff !important; background: rgba(255,255,255,.18) !important; }
.pp-platform.active .pp-platform-label { color: #fff; }
.pp-platform-icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(0,202,243,.08); color: var(--smm-primary); display: inline-flex; align-items: center; justify-content: center; }
.pp-platform-label { font-weight: 600; font-size: 12px; color: var(--smm-ink-2); }
.pp-mobile-filter-row { display: none; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; }
.pp-mf-icon { width: 28px; height: 28px; border-radius: 8px; background: rgba(0,202,243,.10); color: var(--smm-primary); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; }
.pp-mf-label { flex: 1; font-weight: 600; font-size: 14px; color: var(--smm-ink); }
.pp-mf-label .mf-sel { font-weight: 500; color: var(--smm-ink-3); font-size: 13px; }
.pp-mf-caret { color: var(--smm-ink-3); display: inline-flex; }

/* ── Order Tabs ── */
.pp-tabs { display: flex; gap: 0; margin-top: 22px; position: relative; z-index: 1; }
.pp-tab { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; background: rgba(255,255,255,.6); border: 1px solid var(--smm-border); border-bottom: 0; border-radius: 14px 14px 0 0; margin-right: -6px; color: var(--smm-ink-2); font-weight: 600; font-size: 13px; cursor: pointer; position: relative; transition: color .15s, background .15s; font-family: inherit; }
[data-bs-theme="dark"] .pp-tab { background: rgba(13,43,54,.5); border-color: rgba(255,255,255,.06); }
.pp-tab:hover { color: var(--smm-ink); }
.pp-tab.active { background: var(--smm-surface); color: var(--smm-primary); z-index: 2; }
[data-bs-theme="dark"] .pp-tab.active { background: rgba(13,43,54,.95); }
.pp-tab .ico { width: 16px; height: 16px; display: inline-flex; }
.pp-tab .pro { width: 18px; height: 18px; border-radius: 4px; background: linear-gradient(135deg, #FFAA00, #FFCB5C); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.pp-tab-panel { background: var(--smm-surface); border: 1px solid var(--smm-border); border-radius: 0 16px 16px 16px; padding: 26px 28px; box-shadow: var(--pp-shadow-cyan); position: relative; z-index: 1; margin-top: -1px; }
[data-bs-theme="dark"] .pp-tab-panel { background: rgba(13,43,54,0.6); border-color: rgba(255,255,255,.06); }
.pp-panel-loading { position: absolute; inset: 0; background: var(--smm-surface); border-radius: 0 16px 16px 16px; display: flex; align-items: center; justify-content: center; z-index: 5; }
[data-bs-theme="dark"] .pp-panel-loading { background: rgba(13,43,54,0.95); }
.pp-spinner { width: 34px; height: 34px; border: 3px solid var(--smm-border); border-top-color: var(--smm-primary); border-radius: 50%; animation: pp-spin .7s linear infinite; }
[data-bs-theme="dark"] .pp-spinner { border-color: rgba(255,255,255,.12); border-top-color: var(--smm-primary); }
@keyframes pp-spin { to { transform: rotate(360deg); } }
.pp-subscriptions-desc { font-size: 12.5px; color: var(--smm-ink-2); margin: -8px 4px 16px; line-height: 1.5; }

/* ── Charge input (PP JS updates this) ── */
.pp-charge input { border: 0; outline: 0; background: transparent; font-weight: 700; font-size: 32px; line-height: 1; color: inherit; font-family: inherit; text-align: right; width: auto; min-width: 80px; max-width: 200px; }

/* ── Terms checkbox ── */
.pp-terms-field { margin-top: 4px; }
.pp-terms-label { display: inline-flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--smm-ink-2); cursor: pointer; }
.pp-terms-label input[type="checkbox"] { margin-top: 2px; accent-color: var(--smm-primary); flex: 0 0 15px; }
.pp-terms-label a { color: var(--smm-primary); text-decoration: none; }
.pp-terms-label a:hover { text-decoration: underline; }

/* ── PP-injected fields (#fields) ── */
#fields .form-group { margin-bottom: 16px; }
#fields .control-label { display: block; font-weight: 500; font-size: 14px; color: var(--smm-ink); margin: 0 4px 6px; }
#fields .form-control { width: 100%; background: var(--smm-surface); border: 1px solid var(--smm-border); border-radius: 12px; box-shadow: 0 2px 10px rgba(51,68,102,0.05); padding: 12px 16px; font-family: inherit; font-size: 14px; color: var(--smm-ink); min-height: 50px; transition: border-color .15s, box-shadow .15s; outline: none; }
[data-bs-theme="dark"] #fields .form-control { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); box-shadow: none; color: var(--smm-ink); }
#fields select.form-control option { background: var(--smm-surface); color: var(--smm-ink); }
[data-bs-theme="dark"] #fields select.form-control option { background: #0D2B36; color: #E8F0F4; }
#fields .form-control:focus { border-color: var(--smm-primary); box-shadow: 0 0 0 3px rgba(0,202,243,.12); }
#fields .form-control::placeholder { color: var(--smm-ink-4); }
#fields textarea.form-control { resize: vertical; min-height: 100px; }
#fields .help-block { font-size: 12px; color: var(--smm-ink-3); margin: 6px 4px 0; }
#fields .pp-minmax { display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--smm-ink-3); margin-top: 8px; padding: 0 6px; }

/* ── Page grid ── */
.pp-new-order-grid { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.pp-new-order-grid > * { min-width: 0; }

/* ── Side card ── */
.pp-side-card { padding: 22px; }
.pp-side-card .pp-side-title { font-weight: 700; font-size: 18px; color: var(--smm-ink); margin: 0 0 14px; }
.pp-detail-block { background: var(--smm-bg); border-radius: 14px; padding: 18px; border: 1px solid var(--smm-border); }
[data-bs-theme="dark"] .pp-detail-block { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.05); }
.pp-detail-title { font-weight: 700; font-size: 14px; color: var(--smm-ink); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.pp-detail-desc { font-size: 12.5px; line-height: 1.55; color: var(--smm-ink-2); margin: 0 0 14px; }
.pp-detail-note { display: flex; align-items: flex-start; gap: 8px; background: rgba(0,202,243,0.06); border: 1px solid rgba(0,202,243,0.18); border-radius: 10px; padding: 10px 12px; color: var(--smm-ink); font-size: 12px; font-weight: 500; }
.pp-detail-note .ico { color: var(--smm-primary); flex: 0 0 16px; margin-top: 1px; display: inline-flex; }
.pp-feature-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: 12px; color: var(--smm-ink-2); }
.pp-feature-list li { display: flex; align-items: center; gap: 6px; }
.pp-feature-list li::before { content: ""; width: 14px; height: 14px; flex: 0 0 14px; border-radius: 50%; background: rgba(102,204,0,.15) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366CC00' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/9px no-repeat; }
.pp-help-block { margin-top: 18px; }
.pp-help-block .lbl { font-weight: 700; font-size: 14px; color: var(--smm-ink); }
.pp-help-block .sub { font-size: 12px; color: var(--smm-ink-2); margin-bottom: 10px; }
.pp-help-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pp-help-actions a { border: 1px solid var(--smm-border); border-radius: 10px; padding: 10px; text-align: center; font-weight: 600; font-size: 13px; color: var(--smm-ink); display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--smm-surface); text-decoration: none; transition: border-color .15s, color .15s; }
[data-bs-theme="dark"] .pp-help-actions a { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.06); }
.pp-help-actions a:hover { border-color: var(--smm-primary); color: var(--smm-primary); }


/* ── PP alert ── */
.pp-alert { border-radius: 12px; font-size: 14px; margin-bottom: 20px; }

/* ══════════════════════════════════════════════════════
   GIVEAWAY PAGE
══════════════════════════════════════════════════════ */

/* Cards strip */
.gw-cards-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.gw-cards { display: flex; gap: 16px; min-width: max-content; }
.gw-card { flex: 0 0 260px; background: var(--smm-surface); border: 1px solid var(--smm-border); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--pp-shadow-card); }
[data-bs-theme="dark"] .gw-card { background: rgba(13,43,54,.6); border-color: rgba(255,255,255,.06); }
.gw-card-active { background: linear-gradient(135deg, #797AF2 0%, #00CAF3 100%); border-color: transparent; }
.gw-card-top { display: flex; align-items: center; justify-content: space-between; }
.gw-card-live { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.2); font-size: 11px; font-weight: 700; color: #fff; padding: 3px 8px; border-radius: 20px; letter-spacing: .3px; }
.gw-card-entries { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.8); }
.gw-card-badge-soon { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; color: var(--smm-ink-3); background: var(--smm-bg); padding: 3px 8px; border-radius: 20px; }
[data-bs-theme="dark"] .gw-card-badge-soon { background: rgba(255,255,255,.06); }
.gw-live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #6EFF6E; animation: gw-pulse 1.4s infinite; flex: 0 0 6px; }
@keyframes gw-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.gw-card-icon { font-size: 28px; line-height: 1; }
.gw-card-title { font-weight: 700; font-size: 15px; color: var(--smm-ink); }
.gw-card-active .gw-card-title { color: #fff; }
.gw-card-sub { font-size: 12px; color: var(--smm-ink-3); line-height: 1.5; }
.gw-card-cd { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.gw-cd-block { display: inline-flex; align-items: baseline; gap: 2px; }
.gw-cd-block strong { font-size: 22px; font-weight: 800; color: #fff; }
.gw-cd-block em { font-style: normal; font-size: 11px; color: rgba(255,255,255,.75); font-weight: 600; }
.gw-cd-sep { font-weight: 800; color: rgba(255,255,255,.6); font-size: 18px; }

/* Active giveaway banner */
.gw-banner { background: linear-gradient(135deg, #F2556F 0%, #797AF2 100%); border-radius: 20px; padding: 28px 32px; color: #fff; overflow: hidden; position: relative; }
.gw-banner::before { content: ""; position: absolute; right: -40px; top: -40px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.06); pointer-events: none; }
.gw-banner-inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; position: relative; z-index: 1; }
.gw-banner-info { flex: 1; min-width: 200px; }
.gw-active-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.2); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px; margin-bottom: 10px; letter-spacing: .3px; }
.gw-banner-title { font-size: 28px; font-weight: 800; margin: 0 0 6px; line-height: 1.2; }
.gw-banner-desc { font-size: 13px; color: rgba(255,255,255,.85); margin: 0; line-height: 1.55; max-width: 400px; }
.gw-banner-right { display: flex; flex-direction: column; align-items: center; gap: 16px; flex: 0 0 auto; }
.gw-countdown { display: flex; align-items: center; gap: 6px; }
.gw-cd-unit { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,.18); border-radius: 12px; padding: 10px 14px; min-width: 62px; }
.gw-cd-num { font-size: 30px; font-weight: 800; line-height: 1; }
.gw-cd-lbl { font-size: 10px; font-weight: 700; letter-spacing: .5px; opacity: .8; margin-top: 2px; }
.gw-cd-col { font-size: 26px; font-weight: 800; opacity: .6; }
.gw-enter-btn { background: #fff; color: #F2556F; border: 0; border-radius: 12px; padding: 13px 28px; font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.15); transition: transform .15s, box-shadow .15s; white-space: nowrap; }
.gw-enter-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }

/* Main grid */
.gw-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }

/* Your participation */
.gw-part-badge { margin-left: auto; background: var(--smm-primary); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; letter-spacing: .3px; }
.gw-part-body { padding: 20px 22px; }
.gw-rank-wrap { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.gw-rank-num { font-size: 52px; font-weight: 800; color: var(--smm-primary); line-height: 1; }
.gw-rank-lbl { font-weight: 700; font-size: 14px; color: var(--smm-ink); }
.gw-rank-sub { font-size: 12px; color: var(--smm-ink-3); margin-top: 2px; }
.gw-entries-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.gw-entries-lbl { font-size: 13px; color: var(--smm-ink-2); font-weight: 500; }
.gw-entries-val { font-size: 20px; font-weight: 800; color: var(--smm-ink); }
.gw-entry-bar-wrap { margin-bottom: 18px; }
.gw-entry-bar { background: var(--smm-bg); border-radius: 6px; height: 8px; overflow: hidden; margin-bottom: 5px; }
[data-bs-theme="dark"] .gw-entry-bar { background: rgba(255,255,255,.06); }
.gw-entry-bar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #797AF2, #00CAF3); }
.gw-entry-bar-lbl { font-size: 11px; color: var(--smm-ink-3); }
.gw-enter-btn-sm { width: 100%; background: var(--smm-primary); color: #fff; border: 0; border-radius: 10px; padding: 13px 20px; font-weight: 700; font-size: 14px; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,202,243,.35); transition: background .15s; }
.gw-enter-btn-sm:hover { background: #00B5D9; }

/* Task list */
.gw-task-count { font-size: 12px; font-weight: 700; color: var(--smm-ink-3); background: var(--smm-bg); padding: 2px 8px; border-radius: 20px; }
[data-bs-theme="dark"] .gw-task-count { background: rgba(255,255,255,.06); }
.gw-task-list { padding: 4px 0; }
.gw-task-item { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--smm-border); }
[data-bs-theme="dark"] .gw-task-item { border-bottom-color: rgba(255,255,255,.05); }
.gw-task-icon { width: 32px; height: 32px; border-radius: 10px; background: var(--smm-bg); color: var(--smm-ink-3); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; }
[data-bs-theme="dark"] .gw-task-icon { background: rgba(255,255,255,.05); }
.gw-task-icon-done { background: rgba(102,204,0,.12); color: #4D9900; }
.gw-task-info { flex: 1; min-width: 0; }
.gw-task-name { font-size: 13.5px; font-weight: 500; color: var(--smm-ink); }
.gw-task-done .gw-task-name { color: var(--smm-ink-2); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.2); }
[data-bs-theme="dark"] .gw-task-done .gw-task-name { text-decoration-color: rgba(255,255,255,.2); }
.gw-badge-done { flex: 0 0 auto; background: rgba(102,204,0,.12); color: #4D9900; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; letter-spacing: .3px; white-space: nowrap; }
[data-bs-theme="dark"] .gw-badge-done { color: #9CE26B; }
.gw-badge-pts { flex: 0 0 auto; background: rgba(0,202,243,.10); color: var(--smm-primary); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }

/* Invite friends */
.gw-invite-body { padding: 18px 22px 22px; }
.gw-invite-desc { font-size: 13px; color: var(--smm-ink-2); margin: 0 0 14px; line-height: 1.5; }
.gw-invite-row { display: flex; gap: 8px; margin-bottom: 16px; }
.gw-invite-input-wrap { flex: 1; min-width: 0; }
.gw-invite-input { width: 100%; background: var(--smm-bg); border: 1px solid var(--smm-border); border-radius: 10px; padding: 10px 14px; font-family: inherit; font-size: 13px; color: var(--smm-ink-2); outline: none; }
[data-bs-theme="dark"] .gw-invite-input { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); color: var(--smm-ink-3); }
.gw-copy-btn { background: var(--smm-primary); color: #fff; border: 0; border-radius: 10px; padding: 10px 16px; font-weight: 700; font-size: 13px; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; transition: background .15s; flex: 0 0 auto; }
.gw-copy-btn:hover { background: #00B5D9; }
.gw-invite-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.gw-invite-stat { background: var(--smm-bg); border-radius: 12px; padding: 12px 10px; text-align: center; }
[data-bs-theme="dark"] .gw-invite-stat { background: rgba(255,255,255,.04); }
.gw-invite-stat-num { display: block; font-weight: 800; font-size: 22px; color: var(--smm-primary); }
.gw-invite-stat-lbl { display: block; font-size: 11px; color: var(--smm-ink-3); font-weight: 500; margin-top: 2px; }
.gw-invite-terms { font-size: 11px; color: var(--smm-ink-4); line-height: 1.5; margin: 0; }

/* Leaderboard */
.gw-leaderboard { display: flex; flex-direction: column; }
.gw-lb-list { padding: 8px 0; flex: 1; }
.gw-lb-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; transition: background .15s; }
.gw-lb-item:hover { background: rgba(0,202,243,.04); }
.gw-lb-gold { background: rgba(255,215,0,.05); }
.gw-lb-silver { background: rgba(176,196,222,.05); }
.gw-lb-bronze { background: rgba(205,127,50,.05); }
.gw-lb-me { background: rgba(0,202,243,.07); border-top: 1px dashed rgba(0,202,243,.25); border-bottom: 1px dashed rgba(0,202,243,.25); }
.gw-lb-rank { font-size: 18px; flex: 0 0 28px; text-align: center; }
.gw-lb-rank-num { font-size: 13px; font-weight: 700; color: var(--smm-ink-3); }
.gw-lb-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; flex: 0 0 32px; }
.gw-lb-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--smm-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-lb-you { display: inline-block; background: var(--smm-primary); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px; margin-left: 4px; vertical-align: middle; }
.gw-lb-entries { font-size: 12px; font-weight: 700; color: var(--smm-ink-2); white-space: nowrap; flex: 0 0 auto; }
.gw-lb-footer { padding: 14px 20px; border-top: 1px solid var(--smm-border); font-size: 11.5px; color: var(--smm-ink-3); display: flex; align-items: flex-start; gap: 6px; line-height: 1.5; }
[data-bs-theme="dark"] .gw-lb-footer { border-top-color: rgba(255,255,255,.06); }

/* Giveaway responsive */
@media (max-width: 1100px) { .gw-grid { grid-template-columns: 1fr; } }
@media (max-width: 991px) { .gw-banner-title { font-size: 22px; } .gw-cd-unit { min-width: 50px; padding: 8px 10px; } .gw-cd-num { font-size: 24px; } }

/* ── New order extra text ── */
.pp-new-order-text { margin-top: 24px; background: var(--smm-surface); border: 1px solid var(--smm-border); border-radius: var(--pp-radius-card); padding: 22px 24px; font-size: 14px; color: var(--smm-ink-2); line-height: 1.6; }
[data-bs-theme="dark"] .pp-new-order-text { background: rgba(13,43,54,.6); border-color: rgba(255,255,255,.06); }

.select2-container .select2-selection__id-3 {
    min-width: 38px;
    background: #00caf3;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */

/* Public nav mid-width: the full link row + Free Services split button + Create
   Your Account button no longer fit together once the account button grew from
   the old short "GET STARTED" to the longer "CREATE YOUR ACCOUNT" label - rather
   than squeeze everything into 991px and risk link text wrapping again later
   (e.g. a longer translation), the hamburger now takes over earlier, before
   that cramped zone is ever reached. */
@media (max-width: 1240px) {
  .nav-links, .nav-desktop-btns, .nav-free-wrap { display: none !important; }
  .nav-hamburger { display: flex; }
  .nav-card {
    position: relative;
    justify-content: flex-start;
    min-height: 54px;
  }
  /* Keep the brand optically centered regardless of document direction.
     The flex start edge places the trigger left in LTR and right in RTL. */
  .nav-card .navbar-brand {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0 !important;
    padding: 0;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
  .nav-card .navbar-brand img { height: 36px; width: auto; }
  .nav-card .nav-hamburger {
    margin: 0;
    z-index: 2;
  }
}

/* Public nav mobile */
@media (max-width: 991px) {
  .hero-section { padding: 32px 0 28px; }
  .hero-center-col { padding: 0; text-align: center; }
  .hero-cta-row { flex-wrap: wrap; justify-content: center; }
  .hero-trust-row { justify-content: center; }
  .hero-account-col { margin-top: 8px; }
  .hero-account-box { padding: 22px 18px; }
  .for-robot-img { margin-top: 32px; }
  .login-btn-row { flex-direction: column; }
}
@media (max-width: 575px) {
  .hero-desc { font-size: 13px; }
  .login-card { padding: 24px 16px; }
  .hero-account-box .login-card { padding: 0; }
  .hero-account-box { padding: 20px 14px; }
  .stat-num { font-size: 28px; }
  .offers-section .row { row-gap: 24px; }
}

/* Auth dashboard mobile */
@media (max-width: 991px) {
  html { overflow-x: hidden; }
  body.pp-body { padding-top: 64px; padding-left: 0; padding-bottom: 64px; overflow-x: hidden; max-width: 100vw; }
  .pp-main { overflow-x: hidden; }
  /* !important: see the matching comment on .mobile-drawer — the panel's
     own .pp-app banner CSS resets transform on all direct children of
     body at mobile widths and otherwise wins by specificity. */
  .pp-sidebar { transform: translate3d(-100%, 0, 0) !important; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform .25s cubic-bezier(.4,0,.2,1); border-radius: 0 20px 20px 0; width: 280px; }
  .pp-sidebar.open { transform: translate3d(0, 0, 0) !important; }
  [dir="rtl"] .pp-sidebar { left: auto; right: 0; transform: translate3d(100%, 0, 0) !important; border-radius: 20px 0 0 20px; }
  [dir="rtl"] .pp-sidebar.open { transform: translate3d(0, 0, 0) !important; }
  /* The off-canvas sidebar reserves no permanent space at this width in
     either direction - cancel the desktop RTL reservations above (same
     selectors, so these win here purely by coming later in the file). */
  [dir="rtl"] body.pp-body { padding-right: 0; }
  [dir="rtl"] .pp-topbar { right: 0; }
  .pp-topbar { left: 0; padding: 0 16px; height: 64px; }
  .pp-page-title { display: none; }
  .pp-topbar-actions { display: none; }
  .pp-mobile-burger { display: inline-flex; }
  .pp-mobile-logo { display: block; margin-left: auto; }
  /* Single compact line - no room reserved for a description paragraph below the h1
     (pages still carrying a <p> here can keep it, it just no longer gets extra
     breathing room; removing it per-page is the long-term direction). */
  .pp-page-hero { display: block; margin: -16px -14px 14px; padding: 10px 18px; background: var(--smm-gradient); }
  .pp-page-hero h1 { color: #fff; font-size: 16px; font-weight: 700; margin: 0; line-height: 1.3; }
  .pp-page-hero p { color: rgba(255,255,255,0.78); font-size: 13px; margin: 0; font-weight: 500; }
  .pp-main { padding: 16px 14px; }
  .pp-bottom-nav { display: block; }

  /* Add funds mobile */
  .pp-quick-amounts { grid-template-columns: repeat(3, 1fr); }

  /* Sidebar: show logout + footer strip on mobile only */
  .pp-sidebar-logout { display: block; }
  .pp-sidebar-foot { display: flex; }

  /* New order page mobile */
  .pp-platforms { display: none; }
  .pp-mobile-filter-row { display: flex; }
  .pp-new-order-grid { grid-template-columns: 1fr; }
  .pp-tabs { gap: 2px; margin-top: 16px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pp-tabs::-webkit-scrollbar { display: none; }
  .pp-tab { padding: 10px 12px; gap: 5px; font-size: 12px; border-radius: 10px 10px 0 0; flex-shrink: 0; margin-right: 0; }
  .pp-tab:not(.active) .tab-label { display: none; }
  .pp-tab-panel { border-radius: 0 16px 16px 16px; padding: 18px 14px; }
  .pp-field { margin-bottom: 16px; }
  .pp-select-wrap, .pp-input, .pp-select { max-width: 100%; }
  /* PP custom select widget — PP sets inline width on these, cap it */
  .chosen-container, .select2-container, .ss-main, .snssu-select { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; }
  .pp-charge { font-size: 15px; }
  .pp-charge input { font-size: 26px; }
  .pp-submit { width: 100%; }
  .pp-side-card { padding: 16px; }
  .pp-detail-block { padding: 14px; }
  .pp-feature-list { grid-template-columns: 1fr 1fr; }
  .pp-new-order-text { margin-top: 16px; padding: 16px; }
}
@media (max-width: 1280px) {
  .pp-new-order-grid { grid-template-columns: 1fr; }
  .pp-addfunds-grid { grid-template-columns: 1fr; }
  .pp-addfunds-rail { position: static; }
}
@media (min-width: 992px) and (max-width: 1400px) {
  .pp-platforms { grid-template-columns: repeat(7, 1fr); }
}

/* ══════════════════════════════════════════════════════
   SERVICES PAGE  (public guest + auth dashboard)
══════════════════════════════════════════════════════ */

/* Breadcrumb */
.breadcrumb-wrap { background: #f0f4fb; padding: 12px 0; }
[data-bs-theme="dark"] .breadcrumb-wrap { background: #001C26; }
.pg-breadcrumb { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.8); border-radius: 8px; padding: 5px 16px; font-size: 12px; }
[data-bs-theme="dark"] .pg-breadcrumb { background: rgba(13,43,54,.6); border-color: rgba(255,255,255,.06); }
.pg-breadcrumb a { color: #9da8b8; font-weight: 500; }
.pg-breadcrumb a:hover { color: #00c4d4; }
.pg-breadcrumb .sep { color: #b0bbc9; font-size: 11px; }
.pg-breadcrumb .current { color: #4a5568; font-weight: 600; }
[data-bs-theme="dark"] .pg-breadcrumb a { color: #597380; }
[data-bs-theme="dark"] .pg-breadcrumb .current { color: #8FA7B2; }

/* Hero */
.svc-hero { background: linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)), linear-gradient(135deg, #797af2 0%, #00c4d4 100%); padding: 64px 0 56px; text-align: center; }
[data-bs-theme="dark"] .svc-hero { background: linear-gradient(rgba(0,28,38,.55), rgba(0,28,38,.55)), linear-gradient(135deg, #797af2 0%, #00c4d4 100%); }
.svc-hero h1 { font-size: 42px; font-weight: 800; color: #1e2d4a; margin-bottom: 14px; line-height: 1.15; }
[data-bs-theme="dark"] .svc-hero h1 { color: #e8f0f4; }
.svc-hero .subtitle { font-size: 15px; color: #5c6b7a; max-width: 560px; margin: 0 auto 20px; line-height: 1.7; }
[data-bs-theme="dark"] .svc-hero .subtitle { color: #8FA7B2; }
.svc-hero-badge { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(90deg, #6b7af7 0%, #00c4d4 100%); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .5px; padding: 7px 24px; border-radius: 50px; }
.svc-h1-auth { font-size: 22px; font-weight: 800; color: #1e2d4a; margin: 24px auto 4px; padding: 0 16px; }
[data-bs-theme="dark"] .svc-h1-auth { color: #e8f0f4; }

/* Search */
.svc-search-section { background: #f0f4fb; padding: 28px 0 0; }
[data-bs-theme="dark"] .svc-search-section { background: #001C26; }
body.pp-body .svc-search-section { background: transparent; padding: 28px 32px 0; }
.svc-search-card { background: #fff; border-radius: 14px; box-shadow: 0 2px 16px rgba(30,45,74,.08); padding: 14px 20px; display: flex; align-items: center; gap: 12px; }
[data-bs-theme="dark"] .svc-search-card { background: #0D2B36; box-shadow: 0 2px 16px rgba(0,0,0,.3); }
.svc-search-card > i { font-size: 18px; color: #b0bbc9; flex-shrink: 0; }
[data-bs-theme="dark"] .svc-search-card > i { color: #597380; }
.svc-search-card input { flex: 1; border: none; outline: none; font-size: 15px; font-family: inherit; color: #1e2d4a; background: transparent; }
[data-bs-theme="dark"] .svc-search-card input { color: #e8f0f4; }
.svc-search-card input::placeholder { color: #b0bbc9; }
[data-bs-theme="dark"] .svc-search-card input::placeholder { color: #597380; }

/* Panel section */
.svc-page-section { background: #f0f4fb; padding: 20px 0 64px; }
[data-bs-theme="dark"] .svc-page-section { background: #001C26; }
body.pp-body .svc-page-section { background: transparent; padding: 20px 32px 40px; }

/* Panel container */
.svc-panel { background: #fff; border-radius: 18px; box-shadow: 0 4px 24px rgba(30,45,74,.09); overflow: hidden; }
[data-bs-theme="dark"] .svc-panel { background: #0D2B36; box-shadow: 0 4px 24px rgba(0,0,0,.4); }
.svc-panel-head { padding: 22px 24px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #f0f4fb; }
[data-bs-theme="dark"] .svc-panel-head { border-bottom-color: rgba(255,255,255,.06); }
.svc-panel-head > i { font-size: 20px; color: #4a5568; }
[data-bs-theme="dark"] .svc-panel-head > i { color: #8FA7B2; }
.svc-panel-head h2 { font-size: 18px; font-weight: 700; color: #1e2d4a; margin: 0; }
[data-bs-theme="dark"] .svc-panel-head h2 { color: #e8f0f4; }

/* Category tabs */
.svc-tabs-wrap { padding: 16px 24px 0; }
.svc-tabs { display: flex; gap: 4px; background: #f4f7fc; border-radius: 12px; padding: 6px; overflow-x: auto; scrollbar-width: none; }
.svc-tabs::-webkit-scrollbar { display: none; }
[data-bs-theme="dark"] .svc-tabs { background: rgba(255,255,255,.04); }
.svc-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #5c6b7a; border: none; background: transparent; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; flex-shrink: 0; font-family: inherit; }
.svc-tab:hover { color: #1e2d4a; }
[data-bs-theme="dark"] .svc-tab { color: #597380; }
[data-bs-theme="dark"] .svc-tab:hover { color: #8FA7B2; }
.svc-tab.active { background: #fff; color: #00c4d4; box-shadow: 0 2px 10px rgba(30,45,74,.08); }
[data-bs-theme="dark"] .svc-tab.active { background: #0D2B36; color: #00c4d4; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.svc-tab img { width: 16px; height: 16px; border-radius: 3px; object-fit: contain; }
.tab-tg { color: #00c4d4; }
.tab-ig { color: #e1306c; }
.tab-tt { color: #010101; }
.tab-yt { color: #ff0000; }
.tab-tw { color: #1da1f2; }
[data-bs-theme="dark"] .tab-tt { color: #e8f0f4; }

/* Category label row */
.svc-cat-row { padding: 14px 24px 4px; }
.svc-cat-label { font-size: 14px; font-weight: 700; color: #b0bbc9; text-transform: uppercase; letter-spacing: .7px; display: flex; align-items: center; gap: 6px; }
[data-bs-theme="dark"] .svc-cat-label { color: #597380; }

/* Desktop table */
.svc-table-wrap { padding: 0 24px 24px; }
.svc-thead { display: grid; gap: 8px; padding: 12px 16px; background: #2e3d52; border-radius: 10px 10px 0 0; margin-bottom: 2px; }
[data-bs-theme="dark"] .svc-thead { background: #1B4754; }
.svc-th { font-size: 11px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.svc-tr { display: grid; gap: 8px; padding: 14px 16px; background: #fff; border-bottom: 1px solid #f0f4fb; align-items: center; transition: background .15s; }
[data-bs-theme="dark"] .svc-tr { background: #0D2B36; border-bottom-color: rgba(255,255,255,.06); }
.svc-tr:hover { background: #fafcff; }
[data-bs-theme="dark"] .svc-tr:hover { background: #102d3a; }
.svc-tr:last-child { border-bottom: none; }
.svc-td { font-size: 13px; color: #4a5568; }
[data-bs-theme="dark"] .svc-td { color: #8FA7B2; }

/* Fav button */
.svc-fav { background: none; border: none; cursor: pointer; font-size: 18px; color: #d1d9e6; padding: 0; transition: color .2s; line-height: 1; }
.svc-fav:hover, .svc-fav.active { color: #f44; }

/* Service id / name / price */
.svc-id-label { font-size: 10px; font-weight: 600; color: #b0bbc9; letter-spacing: .5px; text-transform: uppercase; }
.svc-id { font-size: 16px; font-weight: 700; color: #1e2d4a; }
[data-bs-theme="dark"] .svc-id { color: #e8f0f4; }
.svc-name { font-size: 13px; font-weight: 600; color: #1e2d4a; line-height: 1.45; }
[data-bs-theme="dark"] .svc-name { color: #e8f0f4; }
.svc-price { font-size: 14px; font-weight: 700; color: #22a63a; }
.svc-num { font-size: 13px; color: #4a5568; }
[data-bs-theme="dark"] .svc-num { color: #8FA7B2; }
.svc-desc { font-size: 12px; color: #5c6b7a; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
[data-bs-theme="dark"] .svc-desc { color: #597380; }

/* Action buttons */
.svc-actions { display: flex; gap: 7px; flex-direction: row; }
.btn-svc-det { background: #fff; border: 1.5px solid #dde3ef; border-radius: 8px; color: #4a5568; font-size: 12px; font-weight: 600; padding: 8px 12px; cursor: pointer; font-family: inherit; transition: border-color .2s, color .2s; display: flex; align-items: center; gap: 5px; justify-content: center; white-space: nowrap; flex: 1; }
.btn-svc-det:hover { border-color: #00c4d4; color: #00c4d4; }
[data-bs-theme="dark"] .btn-svc-det { background: #0e2535; border-color: rgba(255,255,255,.1); color: #8FA7B2; }
[data-bs-theme="dark"] .btn-svc-det:hover { border-color: #00c4d4; color: #00c4d4; }
.btn-svc-order { background: #00c4d4; border: none; border-radius: 8px; color: #fff; font-size: 12px; font-weight: 700; padding: 8px 12px; cursor: pointer; font-family: inherit; transition: background .2s; display: flex; align-items: center; gap: 5px; justify-content: center; text-decoration: none; flex: 1; }
.btn-svc-order:hover { background: #00a8b5; color: #fff; }

/* Expandable features / description row */
.svc-features-row { display: none; background: #f8fafd; border: 1.5px solid #e8edf5; border-radius: 12px; margin: 4px 0; overflow: hidden; }
[data-bs-theme="dark"] .svc-features-row { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.07); }
.svc-features-row.open { display: block; }
.svc-features-toggle { display: flex; align-items: center; gap: 10px; padding: 12px 18px; cursor: pointer; user-select: none; transition: background .2s; }
.svc-features-toggle:hover { background: #f0f4fb; }
[data-bs-theme="dark"] .svc-features-toggle:hover { background: rgba(255,255,255,.04); }
.feat-star { font-size: 14px; color: #00c4d4; }
.svc-features-toggle > span { font-size: 13px; font-weight: 700; color: #1e2d4a; }
[data-bs-theme="dark"] .svc-features-toggle > span { color: #e8f0f4; }
.feat-chevron { margin-left: auto; font-size: 12px; color: #b0bbc9; transition: transform .2s; }
.svc-features-row.open .feat-chevron { transform: rotate(180deg); }
.svc-features-body { display: none; padding: 4px 18px 16px; }
.svc-features-row.open .svc-features-body { display: block; }
[data-bs-theme="dark"] .svc-features-body p { color: #8FA7B2 !important; }

/* Mobile cards */
.svc-cards-wrap { display: none; padding: 16px 16px 24px; }
.svc-card { background: #fff; border: 1.5px solid #e8edf5; border-radius: 16px; padding: 20px; margin-bottom: 14px; }
[data-bs-theme="dark"] .svc-card { background: #0D2B36; border-color: rgba(255,255,255,.08); }
.svc-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.svc-card-name { font-size: 15px; font-weight: 700; color: #1e2d4a; line-height: 1.45; margin-bottom: 12px; }
[data-bs-theme="dark"] .svc-card-name { color: #e8f0f4; }
.svc-card-platform { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.svc-platform-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; background: #e0f9fc; color: #00c4d4; }
[data-bs-theme="dark"] .svc-platform-icon { background: rgba(0,196,212,.12); }
.svc-card-desc { font-size: 12px; color: #5c6b7a; line-height: 1.6; }
.svc-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.svc-stat-cell { background: #f4f7fc; border-radius: 10px; padding: 10px 14px; }
[data-bs-theme="dark"] .svc-stat-cell { background: rgba(255,255,255,.04); }
.svc-stat-label { font-size: 10px; font-weight: 700; color: #b0bbc9; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.svc-stat-val { font-size: 14px; font-weight: 700; color: #1e2d4a; }
[data-bs-theme="dark"] .svc-stat-val { color: #e8f0f4; }
.svc-stat-val.green { color: #22a63a; }
.svc-card-btns { display: flex; gap: 10px; }

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .svc-table-wrap { display: none; }
  .svc-cards-wrap { display: block; }
}
@media (max-width: 768px) {
  body.pp-body .svc-search-section { padding: 16px 14px 0; }
  body.pp-body .svc-page-section { padding: 16px 14px 32px; }
}
@media (max-width: 575px) {
  .svc-hero { padding: 40px 0 36px; }
  .svc-hero h1 { font-size: 28px; }
  .svc-hero .subtitle { font-size: 13px; }
}


/* ══════════════════════════════════════════════════════
   DASHBOARD (index.html)
══════════════════════════════════════════════════════ */

/* ─── Page header ─── */
.dash-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 32px 32px 0;
}
.dash-page-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--smm-ink);
  margin: 0 0 4px;
}
.dash-page-sub {
  font-size: 13px;
  color: var(--smm-ink-3);
  margin: 0;
}

/* ─── Stat cards row ─── */
.dash-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 24px 32px;
}
.dash-stat-card {
  background: var(--smm-surface);
  border-radius: var(--pp-radius-card);
  padding: 22px 20px 16px;
  box-shadow: var(--pp-shadow-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
.dash-stat-card:hover { transform: translateY(-3px); box-shadow: var(--pp-shadow-soft); }
.dash-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--pp-radius-card) var(--pp-radius-card) 0 0;
}
.dash-stat-green::before  { background: linear-gradient(90deg, #66CC00, #4CAF50); }
.dash-stat-cyan::before   { background: linear-gradient(90deg, #00CAF3, #00a8c8); }
.dash-stat-yellow::before { background: linear-gradient(90deg, #FFAA00, #ff8c00); }
.dash-stat-purple::before { background: linear-gradient(90deg, #797AF2, #5a5bd4); }

.dash-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.dash-stat-green  .dash-stat-icon { background: rgba(102,204,0,.12);  color: #4CAF50; }
.dash-stat-cyan   .dash-stat-icon { background: rgba(0,202,243,.12);  color: #00CAF3; }
.dash-stat-yellow .dash-stat-icon { background: rgba(255,170,0,.12);  color: #FFAA00; }
.dash-stat-purple .dash-stat-icon { background: rgba(121,122,242,.12); color: #797AF2; }

[data-bs-theme="dark"] .dash-stat-green  .dash-stat-icon { background: rgba(102,204,0,.18); }
[data-bs-theme="dark"] .dash-stat-cyan   .dash-stat-icon { background: rgba(0,202,243,.18); }
[data-bs-theme="dark"] .dash-stat-yellow .dash-stat-icon { background: rgba(255,170,0,.18); }
[data-bs-theme="dark"] .dash-stat-purple .dash-stat-icon { background: rgba(121,122,242,.18); }

.dash-stat-body { flex: 1; }
.dash-stat-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--smm-ink);
  line-height: 1.2;
  margin-bottom: 4px;
}
.dash-stat-label {
  font-size: 12px;
  color: var(--smm-ink-3);
  font-weight: 500;
}
.dash-stat-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--smm-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap .15s;
}
.dash-stat-link:hover { gap: 7px; }
.dash-stat-link.dim { color: var(--smm-ink-4); cursor: default; }

/* ─── Panels ─── */
.dash-panel {
  background: var(--smm-surface);
  border-radius: var(--pp-radius-card);
  box-shadow: var(--pp-shadow-card);
  overflow: hidden;
  margin: 0 32px 20px;
}
.dash-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--smm-border);
}
.dash-panel-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  color: var(--smm-ink);
}
.dash-panel-title i {
  font-size: 16px;
  color: var(--smm-primary);
}
.dash-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--smm-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 20px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
}
.dash-badge.danger { background: var(--smm-danger); }
.dash-view-all {
  font-size: 12px;
  font-weight: 600;
  color: var(--smm-primary);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: gap .15s;
}
.dash-view-all:hover { gap: 5px; }

/* ─── Empty state ─── */
.dash-panel-body { padding: 32px 20px; }
.dash-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 16px 0;
}
.dash-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--smm-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--smm-ink-3);
}
[data-bs-theme="dark"] .dash-empty-icon { background: rgba(255,255,255,.05); }
.dash-empty p {
  font-size: 13px;
  color: var(--smm-ink-3);
  margin: 0;
}

/* ─── Dashboard buttons ─── */
.btn-dash-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--smm-gradient);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  padding: 9px 20px;
  border: none;
  cursor: pointer;
  transition: opacity .18s, transform .18s;
}
.btn-dash-primary:hover { opacity: .9; transform: translateY(-1px); color: #fff; }

.btn-dash-outline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  color: var(--smm-primary);
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  padding: 8px 18px;
  border: 1.5px solid var(--smm-primary);
  transition: background .18s, color .18s;
}
.btn-dash-outline:hover { background: var(--smm-primary); color: #fff; }

/* ─── Two-column layout ─── */
.dash-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 0 32px 20px;
}
.dash-two-col .dash-panel { margin: 0; }

/* ─── Assistance bar ─── */
.dash-assist-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--smm-surface);
  border-radius: var(--pp-radius-card);
  box-shadow: var(--pp-shadow-card);
  padding: 20px 28px;
  margin: 0 32px 32px;
}
.dash-assist-left {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--smm-ink);
}
.dash-assist-left > i {
  font-size: 28px;
  color: var(--smm-primary);
  flex-shrink: 0;
}
.dash-assist-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--smm-ink);
  margin-bottom: 2px;
}
.dash-assist-sub {
  font-size: 12px;
  color: var(--smm-ink-3);
}
.dash-assist-btns {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.btn-dash-ticket {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--smm-gradient);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  padding: 10px 22px;
  white-space: nowrap;
  transition: opacity .18s, transform .18s;
}
.btn-dash-ticket:hover { opacity: .9; transform: translateY(-1px); color: #fff; }
.btn-dash-telegram {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #2CA5E0;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  padding: 10px 22px;
  white-space: nowrap;
  transition: opacity .18s, transform .18s;
}
.btn-dash-telegram:hover { opacity: .9; transform: translateY(-1px); color: #fff; }

/* ─── Responsive ─── */
@media (max-width: 1200px) {
  .dash-stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .dash-two-col { grid-template-columns: 1fr; }
  .dash-stats-row { padding: 20px 20px; }
  .dash-panel { margin-inline: 20px; }
  .dash-two-col { margin-inline: 20px; }
  .dash-assist-bar { margin-inline: 20px; flex-direction: column; align-items: flex-start; }
  .dash-page-header { padding: 24px 20px 0; }
}
@media (max-width: 600px) {
  .dash-stats-row { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dash-stat-value { font-size: 18px; }
  .dash-assist-btns { flex-direction: column; width: 100%; }
  .btn-dash-ticket, .btn-dash-telegram { justify-content: center; }
}


/* ══════════════════════════════════════════════════════
   MASS ORDER (massorder.html)
   Classes match design/mass-order.html exactly
══════════════════════════════════════════════════════ */

/* ─── Help card ─── */
.pp-help-card {
  display: flex;
  gap: 16px;
  background: rgba(0,202,243,.07);
  border: 1px solid rgba(0,202,243,.2);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
[data-bs-theme="dark"] .pp-help-card { background: rgba(0,202,243,.1); border-color: rgba(0,202,243,.22); }
.ico-circ {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0,202,243,.15);
  color: var(--smm-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
[data-bs-theme="dark"] .ico-circ { background: rgba(0,202,243,.2); }
.pp-help-card h4 { font-size: 14px; font-weight: 700; color: var(--smm-ink); margin: 0 0 7px; }
.pp-help-card p  { font-size: 13px; color: var(--smm-ink-2); margin: 0 0 10px; line-height: 1.6; }
.pp-help-card .more {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  color: var(--smm-ink-2);
  line-height: 1.55;
}

/* ─── Format card ─── */
.pp-format-card {
  background: var(--smm-surface);
  border: 1px solid var(--smm-border);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 20px;
}
[data-bs-theme="dark"] .pp-format-card { border-color: rgba(255,255,255,.07); }
.pp-format-card .head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.pp-format-card .head .ico {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--smm-warn);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pp-format-card .head h4 { font-size: 14px; font-weight: 700; color: var(--smm-ink); margin: 0; }
.pp-format-card > div[style*="font-weight:600"] { font-size: 13px; font-weight: 600 !important; color: var(--smm-ink); margin-bottom: 6px; }

.pp-format-sample {
  background: rgba(0,202,243,.07);
  border: 1.5px dashed rgba(0,202,243,.4);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--smm-primary);
  margin-bottom: 14px;
}
[data-bs-theme="dark"] .pp-format-sample { background: rgba(0,202,243,.12); }

.pp-format-example {
  background: rgba(102,204,0,.07);
  border-left: 3px solid var(--smm-success);
  border-radius: 0 6px 6px 0;
  padding: 8px 12px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: var(--smm-ink-2);
  margin-bottom: 6px;
}
[data-bs-theme="dark"] .pp-format-example { background: rgba(102,204,0,.08); color: #a8c8a0; }

.pp-warn-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255,170,0,.08);
  border: 1px solid rgba(255,170,0,.28);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 12px;
  color: var(--smm-ink-2);
  line-height: 1.6;
  margin-top: 14px;
}
.pp-warn-card .ico { color: var(--smm-warn); flex-shrink: 0; margin-top: 1px; }
[data-bs-theme="dark"] .pp-warn-card { background: rgba(255,170,0,.1); }

/* ─── Textarea ─── */
.pp-textarea {
  width: 100%;
  background: var(--smm-surface);
  border: 1.5px solid var(--smm-border);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13px;
  font-family: ui-monospace, Menlo, monospace;
  color: var(--smm-ink);
  resize: vertical;
  min-height: 220px;
  line-height: 1.7;
  transition: border-color .15s, box-shadow .15s;
  display: block;
}
.pp-textarea:focus {
  outline: none;
  border-color: var(--smm-primary);
  box-shadow: 0 0 0 3px rgba(0,202,243,.12);
}
[data-bs-theme="dark"] .pp-textarea {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
  color: #e8f0f4;
}
[data-bs-theme="dark"] .pp-textarea:focus { border-color: var(--smm-primary); }

/* ─── Textarea meta row ─── */
.pp-textarea-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--smm-ink-3);
  margin-top: 8px;
  padding: 0 2px;
  gap: 8px;
}
.pp-textarea-meta .left { display: flex; align-items: center; gap: 6px; }
.pp-textarea-meta .pipe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,202,243,.12);
  color: var(--smm-primary);
  font-weight: 700;
  border-radius: 4px;
  padding: 0 5px;
  font-family: ui-monospace, Menlo, monospace;
}

/* ─── Parse & Validate button ─── */
.pp-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1.5px solid var(--smm-primary);
  color: var(--smm-primary);
  border-radius: 10px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, color .15s;
  width: 100%;
  justify-content: center;
}
.pp-btn-outline:hover { background: var(--smm-primary); color: #fff; }

/* ─── Parse preview ─── */
.pp-parse-preview {
  background: var(--smm-surface);
  border: 1px solid var(--smm-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
}
[data-bs-theme="dark"] .pp-parse-preview { border-color: rgba(255,255,255,.08); }
.pp-parse-preview-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--smm-border);
  font-size: 13px;
  font-weight: 700;
  color: var(--smm-ink);
}
[data-bs-theme="dark"] .pp-parse-preview-head { border-color: rgba(255,255,255,.07); }
.pp-parse-err-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--smm-danger);
  background: rgba(242,85,111,.1);
  border-radius: 6px;
  padding: 2px 9px;
}
.pp-parse-preview-body { overflow-x: auto; }
.pp-parse-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pp-parse-table th { background: #2e3d52; color: #fff; font-weight: 700; text-align: left; padding: 10px 14px; white-space: nowrap; }
[data-bs-theme="dark"] .pp-parse-table th { background: rgba(255,255,255,.07); }
.pp-parse-table td { padding: 9px 14px; border-bottom: 1px solid var(--smm-border); color: var(--smm-ink); }
[data-bs-theme="dark"] .pp-parse-table td { border-color: rgba(255,255,255,.05); color: #d0dde2; }
.pp-parse-table tr.row-ok td { background: rgba(102,204,0,.04); }
.pp-parse-table tr.row-err td { background: rgba(242,85,111,.05); }
.pp-parse-table .row-status { font-size: 11px; font-weight: 700; }
.row-ok .row-status { color: var(--smm-success); }
.row-err .row-status { color: var(--smm-danger); }

/* ─── Responsive ─── */
@media (max-width: 600px) {
  .pp-help-card { flex-direction: column; gap: 10px; }
  .pp-format-card { padding: 14px 16px; }
}


/* ══════════════════════════════════════════════════════
   ORDERS PAGE (orders.html)
   Classes match design/orders.html exactly
══════════════════════════════════════════════════════ */

/* ─── Info panel ─── */
.pp-info-panel {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--smm-surface);
  border: 1px solid var(--smm-border);
  border-radius: var(--pp-radius-card);
  padding: 20px 22px;
  margin: 0 0 16px;
  position: relative;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
}
[data-bs-theme="dark"] .pp-info-panel { border-color: rgba(255,255,255,.07); }
.pp-info-panel.collapsed { padding-top: 14px; padding-bottom: 14px; }
.pp-info-panel.collapsed .pp-info-body ul { display: none; }
.pp-info-panel.collapsed .pp-info-toggle { transform: rotate(180deg); }

.pp-info-ico {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(0,202,243,.1);
  color: var(--smm-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
[data-bs-theme="dark"] .pp-info-ico { background: rgba(0,202,243,.15); }
.pp-info-body { flex: 1; min-width: 0; }
.pp-info-title { font-size: 15px; font-weight: 700; color: var(--smm-ink); margin: 0 0 10px; }
.pp-info-body ul { padding-left: 18px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pp-info-body li { font-size: 13px; color: var(--smm-ink-2); line-height: 1.6; }
.pp-info-body li strong { color: var(--smm-ink); }
.pp-pill-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,202,243,.1);
  color: var(--smm-primary);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}
.pp-pill-inline.muted { background: rgba(0,0,0,.06); color: var(--smm-ink-2); }
[data-bs-theme="dark"] .pp-pill-inline.muted { background: rgba(255,255,255,.08); color: var(--smm-ink-3); }
.pp-info-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--smm-border);
  border-radius: 8px;
  background: var(--smm-surface);
  color: var(--smm-ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .25s, background .15s, color .15s;
  flex-shrink: 0;
}
.pp-info-toggle:hover { background: var(--smm-bg); color: var(--smm-ink); }

/* ─── Status tabs ─── */
.pp-status-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
  margin-bottom: 16px;
  scrollbar-width: none;
}
.pp-status-tabs::-webkit-scrollbar { display: none; }
.pp-status-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--smm-ink-2);
  background: var(--smm-surface);
  border: 1px solid var(--smm-border);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
[data-bs-theme="dark"] .pp-status-tab { background: rgba(13,43,54,.5); border-color: rgba(255,255,255,.07); }
.pp-status-tab:hover { color: var(--smm-ink); border-color: var(--smm-primary); }
.pp-status-tab.active { background: var(--smm-primary); color: #fff; border-color: var(--smm-primary); }
.pp-status-tab .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot.pending    { background: var(--smm-warn); }
.dot.progress   { background: #3B82F6; }
.dot.completed  { background: var(--smm-success); }
.dot.partial    { background: #F59E0B; }
.dot.processing { background: var(--smm-primary); }
.dot.canceled   { background: var(--smm-danger); }

/* ─── Search bar ─── */
.pp-search-bar { margin-bottom: 16px; }
/* The panel this theme runs on ships its own global stylesheets alongside this one -
   some loading AFTER it in the page - and "pp-" reads like it could be that platform's
   own prefix too, not just ours. If any of those also define .pp-search-form/.pp-input
   for their own components, a same-specificity rule loading later in the page silently
   wins the cascade over ours, regardless of what this file says. Scoping these three
   selectors under .pp-search-bar (instead of the bare class) raises their specificity
   above a plain single-class rule, and !important on the properties that actually
   control the layout makes them win outright even against an equally-specific
   competitor - cheap insurance against a conflict neither of us can see from here. */
.pp-search-bar .pp-search-form {
  display: flex !important;
  width: 100% !important;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
/* flex-basis (not just flex-grow) so the input claims a full row by itself
   whenever it has to share the row with something wider than the space left
   over - at that point flex-wrap above drops the submit button to its own
   line instead of both being squeezed into whatever sliver remains. */
.pp-search-bar .pp-search-form .pp-input { flex: 1 1 240px !important; min-width: 0; position: relative; }
.pp-search-clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--smm-ink-3);
  display: flex;
  align-items: center;
  transition: color .15s;
}
/* The search icon (.ico, first in DOM) and this clear button both sit inside the same
   flex row (.pp-input) - in RTL that row reverses, so .ico moves to the physical right,
   exactly where this button's hardcoded "right: 14px" also still points, stacking the
   two on top of each other. Flipping it to the left side (the row's other end in RTL)
   keeps it clear of the icon, matching where a "clear" affordance reads naturally once
   text flows right-to-left. */
[dir="rtl"] .pp-search-clear { right: auto; left: 14px; }
.pp-search-clear:hover { color: var(--smm-danger); }
.pp-search-bar .pp-search-submit {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  background: var(--smm-primary);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
  flex-shrink: 0;
}
.pp-search-bar .pp-search-submit:hover { background: #00B5D9; }

/* ─── Orders table wrapper ─── */
.pp-orders-wrap { background: var(--smm-surface); border: 1px solid var(--smm-border); border-radius: var(--pp-radius-card); overflow: hidden; }
[data-bs-theme="dark"] .pp-orders-wrap { border-color: rgba(255,255,255,.07); }
.pp-table-scroll { overflow-x: auto; }

/* ─── Orders table ─── */
.pp-orders-table { width: 100%; border-collapse: collapse; min-width: 860px; }
.pp-orders-table thead th {
  background: #2e3d52;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  padding: 13px 14px;
  white-space: nowrap;
}
[data-bs-theme="dark"] .pp-orders-table thead th { background: rgba(255,255,255,.07); }
.pp-orders-table thead th.col-check { width: 46px; text-align: center; }
.pp-orders-table thead th.col-link { min-width: 160px; }
.pp-orders-table thead th.col-service { min-width: 160px; }
.pp-orders-table thead th.col-action { text-align: center; min-width: 110px; }

.pp-orders-table tbody tr { border-bottom: 1px solid var(--smm-border); transition: background .12s; }
[data-bs-theme="dark"] .pp-orders-table tbody tr { border-color: rgba(255,255,255,.05); }
.pp-orders-table tbody tr:last-child { border-bottom: none; }
.pp-orders-table tbody tr:hover { background: rgba(0,202,243,.03); }
[data-bs-theme="dark"] .pp-orders-table tbody tr:hover { background: rgba(255,255,255,.03); }

.pp-orders-table tbody td {
  padding: 13px 14px;
  font-size: 13px;
  color: var(--smm-ink);
  vertical-align: middle;
}
.pp-orders-table .col-check { text-align: center; }
.pp-orders-table .id-cell { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--smm-ink-2); white-space: nowrap; }
.pp-orders-table .date-cell { font-size: 12px; color: var(--smm-ink-2); white-space: nowrap; }
.pp-orders-table .date-cell .time { display: block; color: var(--smm-ink-3); font-size: 11px; }
.pp-orders-table .link-cell { max-width: 180px; }
.pp-orders-table .link-cell a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--smm-primary); font-size: 12px; max-width: 160px; }
.pp-orders-table .link-cell a:hover { text-decoration: underline; }
.pp-orders-table .charge-cell { color: #22a63a; font-weight: 700; white-space: nowrap; }
[data-bs-theme="dark"] .pp-orders-table .charge-cell { color: #7cd98a; }
.pp-orders-table .col-service { font-size: 12px; color: var(--smm-ink-2); }
.pp-orders-table .col-action { text-align: center; }
.pp-orders-table .nowrap { white-space: nowrap; }

/* ─── Details icon ─── */
.pp-details-btn {
  display: inline-flex;
  align-items: center;
  color: var(--smm-ink-3);
  margin-left: 6px;
  transition: color .15s;
}
.pp-details-btn:hover { color: var(--smm-primary); }

/* ─── Checkbox ─── */
.pp-checkbox {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--smm-border);
  border-radius: 4px;
  background: var(--smm-surface);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  vertical-align: middle;
}
.pp-checkbox:hover { border-color: var(--smm-primary); }

/* ─── Status badges ─── */
.pp-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}
.pp-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pp-status.pending    { background: rgba(255,170,0,.12);  color: #c07000; }
.pp-status.pending::before { background: var(--smm-warn); }
.pp-status.progress   { background: rgba(59,130,246,.12); color: #1d4ed8; }
.pp-status.progress::before { background: #3B82F6; }
.pp-status.completed  { background: rgba(102,204,0,.12);  color: #3a7a00; }
.pp-status.completed::before { background: var(--smm-success); }
.pp-status.partial    { background: rgba(245,158,11,.12); color: #92400e; }
.pp-status.partial::before { background: #F59E0B; }
.pp-status.processing { background: rgba(0,202,243,.12);  color: var(--smm-primary-dark); }
.pp-status.processing::before { background: var(--smm-primary); }
.pp-status.canceled   { background: rgba(242,85,111,.12); color: #b91c3c; }
.pp-status.canceled::before { background: var(--smm-danger); }

[data-bs-theme="dark"] .pp-status.pending    { background: rgba(255,170,0,.18);  color: #ffcb5c; }
[data-bs-theme="dark"] .pp-status.progress   { background: rgba(59,130,246,.18); color: #93c5fd; }
[data-bs-theme="dark"] .pp-status.completed  { background: rgba(102,204,0,.18);  color: #9CE26B; }
[data-bs-theme="dark"] .pp-status.partial    { background: rgba(245,158,11,.18); color: #fcd34d; }
[data-bs-theme="dark"] .pp-status.processing { background: rgba(0,202,243,.18);  color: var(--smm-primary); }
[data-bs-theme="dark"] .pp-status.canceled   { background: rgba(242,85,111,.18); color: #fca5a5; }

.pp-cancel-reason { color: var(--smm-ink-3); cursor: help; margin-left: 4px; }

/* ─── Action buttons ─── */
.pp-order-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pp-btn-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  padding: 5px 12px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  text-decoration: none;
  transition: background .15s, transform .12s;
}
.pp-btn-action:hover { transform: translateY(-1px); }
.pp-btn-action.reorder {
  background: rgba(0,202,243,.1);
  color: var(--smm-primary);
  border: 1px solid rgba(0,202,243,.25);
}
.pp-btn-action.reorder:hover { background: var(--smm-primary); color: #fff; }
.pp-btn-action.cancel {
  background: rgba(242,85,111,.1);
  color: var(--smm-danger);
  border: 1px solid rgba(242,85,111,.25);
}
.pp-btn-action.cancel:hover { background: var(--smm-danger); color: #fff; }
.pp-btn-action.disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.pp-action-text { font-size: 12px; color: var(--smm-ink-3); }

/* ─── Progress strip ─── */
.progress-strip {
  width: 80px;
  height: 4px;
  background: var(--smm-border);
  border-radius: 4px;
  overflow: hidden;
}
.progress-strip .fill { height: 100%; border-radius: 4px; transition: width .3s; }
.progress-strip .fill.progress   { background: #3B82F6; }
.progress-strip .fill.processing { background: var(--smm-primary); }
.progress-strip .fill.partial    { background: #F59E0B; }

/* ─── Empty state ─── */
.pp-empty-row td { padding: 48px 24px !important; text-align: center; }
.pp-empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--smm-ink-3); }
.pp-empty-state p { font-size: 14px; font-weight: 600; color: var(--smm-ink-2); margin: 0; }
td.pp-empty-row:before {
    display: none;
}

/* ─── Modal ─── */
.pp-modal-content { border-radius: var(--pp-radius-card); border: 1px solid var(--smm-border); background: var(--smm-surface); }
[data-bs-theme="dark"] .pp-modal-content { background: #0D2B36; border-color: rgba(255,255,255,.08); }
.pp-modal-header { border-bottom: 1px solid var(--smm-border); padding: 16px 20px; }
[data-bs-theme="dark"] .pp-modal-header { border-color: rgba(255,255,255,.07); }
.pp-modal-header .modal-title { font-size: 15px; font-weight: 700; color: var(--smm-ink); }
.pp-modal-body { padding: 20px; }
.pp-modal-field { margin-bottom: 14px; }
.pp-modal-field label { display: block; font-size: 12px; font-weight: 700; color: var(--smm-ink-3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.pp-modal-input {
  width: 100%;
  background: var(--smm-bg);
  border: 1px solid var(--smm-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--smm-ink);
  resize: vertical;
}
[data-bs-theme="dark"] .pp-modal-input { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); color: #e0eaf0; }

/* ─── Pagination ─── */
.pp-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  border-top: 1px solid var(--smm-border);
}
[data-bs-theme="dark"] .pp-pagination { border-color: rgba(255,255,255,.07); }
.pp-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--smm-ink-2);
  background: var(--smm-surface);
  border: 1px solid var(--smm-border);
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.pp-page-btn:hover { color: var(--smm-primary); border-color: var(--smm-primary); }
.pp-page-btn.active { background: var(--smm-primary); color: #fff; border-color: var(--smm-primary); }
[data-bs-theme="dark"] .pp-page-btn { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }

/* ─── Mobile card layout ─── */
@media (max-width: 860px) {
  .pp-orders-table { min-width: unset; }
  .pp-orders-table thead { display: none; }
  .pp-orders-table tbody tr { display: block; padding: 14px 16px; border-bottom: 1px solid var(--smm-border); }
  .pp-orders-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 5px 0;
    font-size: 13px;
    border: none;
  }
  .pp-orders-table tbody td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    color: var(--smm-ink-3);
    text-transform: uppercase;
    letter-spacing: .4px;
    flex-shrink: 0;
    padding-top: 1px;
    min-width: 90px;
  }
  .pp-orders-table .col-check { display: none; }
  .pp-orders-table .link-cell a { max-width: 160px; }
  .pp-order-actions { align-items: flex-end; }
  .pp-info-panel { flex-direction: column; gap: 12px; }
  .pp-info-ico { display: none; }
  .pp-search-bar .pp-search-form { flex-direction: column !important; align-items: stretch; }
  /* .pp-input's flex: 1 1 240px above sets a 240px *width* basis for the desktop row - once
     this form switches to flex-direction: column here, that same 240px basis applies to
     *height* instead, and flex-grow: 1 then stretches it to fill whatever vertical space the
     column has, producing the huge near-empty search box seen on mobile (fa/ar/en all have
     the same bug - this has nothing to do with language). Flex-basis back to auto (so height
     comes from content/min-height instead) and grow to 0 (nothing left to grow into within a
     column of just these two rows). */
  .pp-search-bar .pp-search-form .pp-input { flex: 0 1 auto !important; }
  .pp-search-bar .pp-search-submit { justify-content: center; }
  .pp-empty-row td { display: block !important; text-align: center !important; }
  .pp-empty-row td::before { display: none; }
  .pp-empty-state { align-items: center; justify-content: center; width: 100%; }
}


/* ════════════════════════════════════════
   REFUNDS PAGE
════════════════════════════════════════ */

/* ─── Info alert ─── */
.rf-info-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,202,243,.08);
  border: 1px solid rgba(0,202,243,.3);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--smm-ink);
  margin-bottom: 20px;
  position: relative;
}
[data-bs-theme="dark"] .rf-info-alert {
  background: rgba(0,202,243,.1);
  border-color: rgba(0,202,243,.25);
  color: #c8e8f0;
}
.rf-info-ico {
  display: inline-flex;
  align-items: center;
  color: var(--smm-primary);
  flex-shrink: 0;
}
.rf-info-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px;
}

/* ─── Search label ─── */
.rf-search-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--smm-ink-2);
  margin: 0 0 10px;
}
.rf-search-label svg { color: var(--smm-ink-3); }

/* ─── Refund amount cell ─── */
.rf-amount {
  color: var(--smm-success) !important;
  font-weight: 700;
  font-size: 13px;
}

/* ─── Showing X orders footer ─── */
.rf-footer {
  padding: 12px 20px;
  font-size: 13px;
  color: var(--smm-ink-3);
  border-top: 1px solid var(--smm-border);
}
.rf-footer strong { color: var(--smm-ink-2); font-weight: 700; }
[data-bs-theme="dark"] .rf-footer { border-color: rgba(255,255,255,.07); }

/* ─── Refunds table — 4-column variant ─── */
.rf-table { min-width: 480px; }

/* Mobile: narrower label column for 4-col table */
@media (max-width: 680px) {
  .rf-table tbody td::before { min-width: 80px; }
}


/* ════════════════════════════════════════
   REFILLS PAGE
════════════════════════════════════════ */

/* ─── New status badge variants ─── */
.pp-status.rejected {
  background: rgba(242,85,111,.1);
  color: var(--smm-danger);
  border: 1px solid rgba(242,85,111,.2);
}
.pp-status.error {
  background: rgba(220,53,69,.1);
  color: #dc3545;
  border: 1px solid rgba(220,53,69,.2);
}
[data-bs-theme="dark"] .pp-status.rejected { background: rgba(242,85,111,.15); border-color: rgba(242,85,111,.25); }
[data-bs-theme="dark"] .pp-status.error    { background: rgba(220,53,69,.15);  border-color: rgba(220,53,69,.25); }

/* ─── Status tab dots ─── */
.dot.rejected { background: var(--smm-danger); }
.dot.error    { background: #dc3545; }

/* ─── Refills table ─── */
.rl-table { min-width: 680px; }
.rl-table .link-cell { max-width: 220px; }
.rl-table .link-cell a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
  color: var(--smm-primary);
  font-size: 13px;
}

/* Mobile: label column for 6-col refills table */
@media (max-width: 860px) {
  .rl-table tbody td::before { min-width: 80px; }
  .rl-table .link-cell a { max-width: 160px; }
}


/* ════════════════════════════════════════
   API ACCESS PAGE
════════════════════════════════════════ */

/* ─── Public hero (guest view) ─── */
.api-public-hero {
  background: linear-gradient(135deg, #eaf6ff 0%, #f0f4ff 100%);
  padding: 72px 0 64px;
  text-align: center;
  border-bottom: 1px solid var(--smm-border);
}
[data-bs-theme="dark"] .api-public-hero {
  background: linear-gradient(135deg, #001c26 0%, #0a1a2e 100%);
  border-bottom-color: rgba(255,255,255,.06);
}
.api-hero-title {
  font-family: 'Montserrat', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif;
  font-size: 42px;
  font-weight: 800;
  color: var(--smm-ink);
  margin: 0 0 12px;
}
[data-bs-theme="dark"] .api-hero-title { color: #fff; }
.api-hero-sub {
  font-size: 17px;
  color: var(--smm-ink-2);
  max-width: 560px;
  margin: 0 auto;
}
.api-public-wrap { padding: 48px 0 80px; }
.api-auth-wrap { }

/* ─── Overview card ─── */
.api-overview-card {
  background: var(--smm-surface);
  border: 1px solid var(--smm-border);
  border-radius: var(--pp-radius-card);
  padding: 24px;
  margin-bottom: 24px;
}
[data-bs-theme="dark"] .api-overview-card { background: #0D2B36; border-color: rgba(255,255,255,.08); }

.api-overview-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--smm-primary);
}
.api-overview-head h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--smm-ink);
  margin: 0;
}

.api-info-grid { display: flex; flex-direction: column; gap: 0; }
.api-info-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--smm-border);
}
[data-bs-theme="dark"] .api-info-row { border-color: rgba(255,255,255,.07); }
.api-info-row:last-child { border-bottom: none; padding-bottom: 0; }
.api-info-row:first-child { padding-top: 0; }

.api-info-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--smm-ink-3);
  min-width: 140px;
  flex-shrink: 0;
}

/* ─── Method / format badges ─── */
.api-badge-code {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .4px;
  font-family: ui-monospace, Menlo, monospace;
}
.api-badge-code.post { background: rgba(242,85,111,.12); color: var(--smm-danger); }
.api-badge-code.json { background: rgba(102,204,0,.12);  color: #3a7a00; }
[data-bs-theme="dark"] .api-badge-code.post { background: rgba(242,85,111,.18); color: #fca5a5; }
[data-bs-theme="dark"] .api-badge-code.json { background: rgba(102,204,0,.18);  color: #9CE26B; }

/* ─── API URL with copy ─── */
.api-url-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--smm-bg);
  border: 1px solid var(--smm-border);
  border-radius: 8px;
  padding: 6px 10px 6px 12px;
  flex: 1;
  min-width: 0;
}
[data-bs-theme="dark"] .api-url-wrap { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.api-url {
  font-size: 13px;
  font-family: ui-monospace, Menlo, monospace;
  color: var(--smm-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  background: none;
  border: none;
  padding: 0;
}
.api-copy-btn {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  color: var(--smm-ink-3);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color .15s, background .15s;
}
.api-copy-btn:hover { color: var(--smm-primary); background: rgba(0,202,243,.1); }
.api-copy-btn.copied { color: var(--smm-success); }

/* ─── API key link ─── */
.api-key-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--smm-primary);
  text-decoration: none;
}
.api-key-link:hover { text-decoration: underline; }

/* ─── Method sections ─── */
.api-section {
  background: var(--smm-surface);
  border: 1px solid var(--smm-border);
  border-radius: var(--pp-radius-card);
  margin-bottom: 20px;
  overflow: hidden;
}
[data-bs-theme="dark"] .api-section { background: #0D2B36; border-color: rgba(255,255,255,.08); }

.api-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--smm-border);
  background: var(--smm-bg);
}
[data-bs-theme="dark"] .api-section-head { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.07); }

.api-section-title-row { display: flex; align-items: center; gap: 10px; }
.api-method-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--smm-gradient);
  flex-shrink: 0;
}
.api-section-title { font-size: 15px; font-weight: 700; color: var(--smm-ink); margin: 0; }
[data-bs-theme="dark"] .api-section-title { color: #e0eaf0; }

.api-action-badge {
  font-size: 11px;
  font-weight: 700;
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: .5px;
  text-transform: lowercase;
  color: var(--smm-accent);
  background: rgba(121,122,242,.12);
  border: 1px solid rgba(121,122,242,.2);
  border-radius: 6px;
  padding: 3px 10px;
}
[data-bs-theme="dark"] .api-action-badge { background: rgba(121,122,242,.18); }

/* ─── Service type selector ─── */
.api-type-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--smm-border);
}
[data-bs-theme="dark"] .api-type-row { border-color: rgba(255,255,255,.07); }
.api-type-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--smm-ink-2);
  flex-shrink: 0;
}
.api-type-select {
  padding: 7px 32px 7px 12px;
  border: 1px solid var(--smm-border);
  border-radius: 8px;
  background: var(--smm-bg);
  color: var(--smm-ink);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238FA7B2' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  min-width: 200px;
}
[data-bs-theme="dark"] .api-type-select { background-color: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); color: #e0eaf0; }

/* ─── Parameters table ─── */
.api-params-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.api-params-table thead tr {
  background: #1D353D;
}
[data-bs-theme="dark"] .api-params-table thead tr { background: rgba(0,0,0,.4); }
.api-params-table thead th {
  padding: 11px 20px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-align: left;
  letter-spacing: .3px;
}
.api-params-table thead th:first-child { width: 160px; }
.api-params-table tbody tr { border-bottom: 1px solid var(--smm-border); }
[data-bs-theme="dark"] .api-params-table tbody tr { border-color: rgba(255,255,255,.07); }
.api-params-table tbody tr:last-child { border-bottom: none; }
.api-params-table tbody tr:hover { background: var(--smm-bg); }
[data-bs-theme="dark"] .api-params-table tbody tr:hover { background: rgba(255,255,255,.02); }
.api-param-name {
  padding: 12px 20px;
  vertical-align: top;
  white-space: nowrap;
}
.api-param-name code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--smm-primary);
  background: rgba(0,202,243,.08);
  border: 1px solid rgba(0,202,243,.15);
  border-radius: 5px;
  padding: 2px 7px;
}
[data-bs-theme="dark"] .api-param-name code { background: rgba(0,202,243,.12); }
.api-param-desc {
  padding: 12px 20px;
  color: var(--smm-ink-2);
  line-height: 1.5;
  vertical-align: top;
}
[data-bs-theme="dark"] .api-param-desc { color: #9db8c4; }

/* ─── Example response ─── */
.api-response-wrap { border-top: 1px solid var(--smm-border); }
[data-bs-theme="dark"] .api-response-wrap { border-color: rgba(255,255,255,.07); }
.api-response-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 700;
  color: var(--smm-ink-3);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--smm-border);
  background: var(--smm-bg);
}
[data-bs-theme="dark"] .api-response-head { background: rgba(0,0,0,.2); border-color: rgba(255,255,255,.07); }
.api-pre {
  margin: 0;
  padding: 20px;
  background: #0F1E24;
  color: #9CE26B;
  font-family: ui-monospace, Menlo, 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: 0;
}
[data-bs-theme="dark"] .api-pre { background: #060f12; }

/* ─── PHP example button ─── */
.api-php-row { margin-top: 4px; padding-bottom: 8px; }
.api-php-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: var(--smm-surface);
  border: 1.5px solid var(--smm-border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--smm-ink-2);
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.api-php-btn:hover { border-color: var(--smm-primary); color: var(--smm-primary); }
[data-bs-theme="dark"] .api-php-btn { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }

/* ─── Mobile ─── */
@media (max-width: 640px) {
  .api-overview-card { padding: 16px; }
  .api-info-label { min-width: 110px; font-size: 12px; }
  .api-url-wrap { flex: 1; min-width: 0; }
  .api-section-head { padding: 14px 16px; flex-wrap: wrap; gap: 8px; }
  .api-type-row { padding: 12px 16px; flex-wrap: wrap; }
  .api-type-select { min-width: unset; width: 100%; }
  .api-params-table thead th { padding: 10px 14px; }
  .api-params-table thead th:first-child { width: 120px; }
  .api-param-name, .api-param-desc { padding: 10px 14px; }
  .api-pre { padding: 14px; font-size: 12px; }
  .api-overview-head h3 { font-size: 14px; }
}


/* ════════════════════════════════════════
   SUBSCRIPTIONS PAGE
════════════════════════════════════════ */

/* ─── New status badge variants ─── */
.pp-status.active {
  background: rgba(102,204,0,.12);
  color: #3a7a00;
  border: 1px solid rgba(102,204,0,.2);
}
.pp-status.active::before { background: var(--smm-success); }
.pp-status.paused {
  background: rgba(255,170,0,.12);
  color: #c07000;
  border: 1px solid rgba(255,170,0,.2);
}
.pp-status.paused::before { background: var(--smm-warn); }
.pp-status.expired {
  background: rgba(158,158,158,.12);
  color: #6b7280;
  border: 1px solid rgba(158,158,158,.2);
}
.pp-status.expired::before { background: #9ca3af; }

[data-bs-theme="dark"] .pp-status.active   { background: rgba(102,204,0,.18);  color: #9CE26B; border-color: rgba(102,204,0,.25); }
[data-bs-theme="dark"] .pp-status.paused   { background: rgba(255,170,0,.18);  color: #ffcb5c; border-color: rgba(255,170,0,.25); }
[data-bs-theme="dark"] .pp-status.expired  { background: rgba(158,158,158,.15); color: #9ca3af; border-color: rgba(158,158,158,.2); }

/* ─── Status tab dots ─── */
.dot.active   { background: var(--smm-success); }
.dot.paused   { background: var(--smm-warn); }
.dot.expired  { background: #9ca3af; }

/* ─── Reason icon (tooltip trigger) ─── */
.subs-reason {
  display: inline-flex;
  align-items: center;
  color: var(--smm-ink-3);
  cursor: help;
  margin-left: 4px;
  vertical-align: middle;
}
.subs-reason:hover { color: var(--smm-primary); }

/* ─── Subscriptions table ─── */
.subs-table { min-width: 1100px; }
.subs-table .col-link  { max-width: 160px; }
.subs-table .col-link a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subs-table .col-action { width: 100px; }

/* ─── Action buttons ─── */
.subs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
  border: 1.5px solid transparent;
}
.subs-btn.cancel {
  background: rgba(242,85,111,.1);
  color: var(--smm-danger);
  border-color: rgba(242,85,111,.25);
}
.subs-btn.cancel:hover { background: var(--smm-danger); color: #fff; }
.subs-btn.resume {
  background: rgba(0,202,243,.1);
  color: var(--smm-primary);
  border-color: rgba(0,202,243,.3);
}
.subs-btn.resume:hover { background: var(--smm-primary); color: #fff; }
.subs-btn.renew {
  background: var(--smm-gradient);
  color: #fff;
  border-color: transparent;
}
.subs-btn.renew:hover { opacity: .88; }

[data-bs-theme="dark"] .subs-btn.cancel { background: rgba(242,85,111,.15); }
[data-bs-theme="dark"] .subs-btn.resume { background: rgba(0,202,243,.15); }

/* ─── Action cell ─── */
.subs-action-cell { white-space: nowrap; }

/* ─── Mobile: 12-col table card layout ─── */
@media (max-width: 1100px) {
  .subs-table { min-width: unset; }
  .subs-table thead { display: none; }
  .subs-table tbody tr { display: block; padding: 14px 16px; border-bottom: 1px solid var(--smm-border); }
  .subs-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 5px 0;
    font-size: 13px;
    border: none;
  }
  .subs-table tbody td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    color: var(--smm-ink-3);
    text-transform: uppercase;
    letter-spacing: .4px;
    flex-shrink: 0;
    padding-top: 2px;
    min-width: 84px;
  }
  .subs-table .col-link { max-width: unset; }
  .subs-table .col-link a { max-width: 180px; }
  .subs-action-cell { padding-top: 10px !important; }
  .subs-action-cell::before { display: none; }
  .subs-btn { width: 100%; justify-content: center; padding: 9px 14px; font-size: 13px; }
}

/* ═══════════════════════════════════════════════
   AFFILIATES PAGE
   ═══════════════════════════════════════════════ */

/* ─── Grid ─── */
.af-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}

/* ─── Welcome banner ─── */
.af-banner {
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(121,122,242,.08) 0%, rgba(0,202,243,.08) 100%);
  border: 1px solid rgba(0,202,243,.2);
}

/* ─── Card base ─── */
.af-card { padding: 24px; }
.af-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--smm-ink);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--smm-border);
}
.af-card-head i { color: var(--smm-primary); font-size: 18px; }

/* ─── Referral link ─── */
.af-ref-link-wrap {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
.af-ref-input {
  flex: 1;
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--smm-border);
  border-radius: 10px;
  background: var(--smm-bg);
  color: var(--smm-ink-2);
  font-size: 13px;
  font-family: monospace;
  outline: none;
}
.af-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px;
  height: 44px;
  background: var(--smm-gradient);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .2s;
}
.af-copy-btn:hover { opacity: .88; }

/* ─── Stats grid ─── */
.af-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.af-stat-card {
  background: var(--smm-bg);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  transition: transform .2s;
}
.af-stat-card:hover { transform: translateY(-2px); }
.af-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  font-size: 18px;
}
.af-si-blue   { background: rgba(0,202,243,.12);   color: var(--smm-primary); }
.af-si-purple { background: rgba(121,122,242,.12); color: var(--smm-accent); }
.af-si-cyan   { background: rgba(0,202,243,.12);   color: #0bbce0; }
.af-si-green  { background: rgba(102,204,0,.12);   color: var(--smm-success); }
.af-si-orange { background: rgba(255,170,0,.12);   color: var(--smm-warn); }
.af-si-teal   { background: rgba(0,200,190,.12);   color: #00c8c0; }
.af-stat-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--smm-ink);
  line-height: 1;
  margin-bottom: 4px;
}
.af-stat-lbl {
  font-size: 11px;
  color: var(--smm-ink-3);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ─── How it works ─── */
.af-steps {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.af-step {
  flex: 1;
  text-align: center;
  padding: 20px 12px;
  background: var(--smm-bg);
  border-radius: 12px;
}
.af-step-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--smm-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0 auto 12px;
}
.af-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--smm-gradient);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px;
}
.af-step-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--smm-ink);
  margin-bottom: 6px;
}
.af-step-desc {
  font-size: 11.5px;
  color: var(--smm-ink-3);
  line-height: 1.5;
}
.af-step-arrow {
  padding-top: 40px;
  color: var(--smm-ink-3);
  font-size: 18px;
  flex-shrink: 0;
}

/* ─── Earning history table ─── */
.af-amount { font-weight: 700; color: var(--smm-success); }
.af-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
}
.af-status-paid,
.af-status-completed { background: rgba(102,204,0,.12);  color: var(--smm-success); }
.af-status-pending   { background: rgba(255,170,0,.12);  color: var(--smm-warn); }
.af-status-rejected,
.af-status-failed    { background: rgba(242,85,111,.12); color: var(--smm-danger); }

/* ─── FAQ ─── */
.af-faq-item { border-bottom: 1px solid var(--smm-border); }
.af-faq-item:last-child { border-bottom: none; }
.af-faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 14px 0;
  background: none;
  border: none;
  text-align: left;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--smm-ink);
  cursor: pointer;
  gap: 12px;
  font-family: inherit;
}
.af-faq-q:hover { color: var(--smm-primary); }
.af-faq-caret { transition: transform .25s; flex-shrink: 0; }
.af-faq-q.open .af-faq-caret,
.af-terms-toggle.open .af-faq-caret { transform: rotate(180deg); }
.af-faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s ease;
}
.af-faq-a.open { max-height: 300px; }
.af-faq-a p {
  padding-bottom: 14px;
  font-size: 13px;
  color: var(--smm-ink-2);
  line-height: 1.65;
  margin: 0;
}

/* ─── Terms & Conditions ─── */
.af-terms-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 0;
  cursor: pointer;
  font-family: inherit;
}
.af-terms-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease;
}
.af-terms-body.open { max-height: 600px; }
.af-terms-body p,
.af-terms-body li { font-size: 13px; color: var(--smm-ink-2); line-height: 1.7; margin: 0; }
.af-terms-body ul { padding-left: 20px; margin-top: 8px; }
.af-terms-body p { margin-top: 16px; }

/* ─── Commission Tiers ─── */
.af-tiers { display: flex; flex-direction: column; gap: 14px; }
.af-tier { display: flex; align-items: center; gap: 10px; }
.af-tier-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 80px;
}
.af-tier-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.af-dot-bronze { background: #cd7f32; }
.af-dot-silver { background: #9DA4A6; }
.af-dot-gold   { background: #FFB800; }
.af-dot-plat   { background: var(--smm-accent); }
.af-tier-name { font-size: 13px; font-weight: 600; color: var(--smm-ink); }
.af-tier-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--smm-border);
  border-radius: 3px;
  overflow: hidden;
}
.af-tier-bar { height: 100%; border-radius: 3px; }
.af-bar-bronze { background: #cd7f32; }
.af-bar-silver { background: #9DA4A6; }
.af-bar-gold   { background: #FFB800; }
.af-bar-plat   { background: var(--smm-accent); }
.af-tier-pct {
  font-size: 13px;
  font-weight: 700;
  min-width: 36px;
  text-align: right;
}
.af-pct-bronze { color: #cd7f32; }
.af-pct-silver { color: #9DA4A6; }
.af-pct-gold   { color: #FFB800; }
.af-pct-plat   { color: var(--smm-accent); }

/* ─── Payment info ─── */
.af-pay-info { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.af-pay-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--smm-bg);
  border-radius: 10px;
}
.af-pay-lbl { font-size: 13px; color: var(--smm-ink-2); }
.af-pay-val { font-size: 14px; font-weight: 700; color: var(--smm-ink); }
.af-pay-highlight { color: var(--smm-success); }
.af-payout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  background: var(--smm-gradient);
  color: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .2s;
}
.af-payout-btn:hover { opacity: .88; color: #fff; }

/* ─── Dark mode ─── */
[data-bs-theme="dark"] .af-banner {
  background: linear-gradient(135deg, rgba(121,122,242,.15) 0%, rgba(0,202,243,.15) 100%);
  border-color: rgba(0,202,243,.25);
}
[data-bs-theme="dark"] .af-ref-input {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  color: var(--smm-ink-3);
}
[data-bs-theme="dark"] .af-stat-card,
[data-bs-theme="dark"] .af-step,
[data-bs-theme="dark"] .af-pay-row { background: rgba(255,255,255,.05); }

/* ─── Responsive ─── */
@media (max-width: 1100px) {
  .af-grid { grid-template-columns: 1fr; }
  .af-stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px) {
  .af-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .af-steps { flex-direction: column; gap: 12px; }
  .af-step-arrow { transform: rotate(90deg); align-self: center; padding-top: 0; }
}

/* ═══════════════════════════════════════════════
   CHILD PANEL ORDER PAGE
   ═══════════════════════════════════════════════ */

/* ─── Hero banner ─── */
.cp-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 36px 40px;
  background: linear-gradient(135deg, rgba(121,122,242,.1) 0%, rgba(0,202,243,.1) 100%);
  border: 1px solid rgba(0,202,243,.2);
  overflow: hidden;
  position: relative;
}
.cp-hero-inner { flex: 1; position: relative; z-index: 1; }
.cp-hero-badge {
  display: inline-block;
  padding: 4px 12px;
  background: var(--smm-gradient);
  color: #fff;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.cp-hero-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--smm-ink);
  line-height: 1.2;
  margin-bottom: 12px;
}
.cp-hero-gradient {
  background: var(--smm-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cp-hero-desc {
  font-size: 14px;
  color: var(--smm-ink-2);
  line-height: 1.65;
  max-width: 520px;
  margin-bottom: 16px;
}
.cp-hero-stars {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--smm-ink-2);
  margin-bottom: 14px;
}
.cp-hero-stars i { color: #FFB800; font-size: 14px; }
.cp-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(0,202,243,.1);
  border: 1px solid rgba(0,202,243,.25);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--smm-primary);
}
/* Hero art */
.cp-hero-art {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}
.cp-hero-circle {
  position: absolute;
  border-radius: 50%;
  opacity: .35;
}
.cp-hero-circle-1 {
  width: 120px;
  height: 120px;
  background: var(--smm-gradient);
  top: 0; left: 0;
}
.cp-hero-circle-2 {
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,.7);
  top: 20px; left: 20px;
}
.cp-hero-icon {
  position: absolute;
  font-size: 40px;
  color: var(--smm-accent);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* ─── Feature cards grid ─── */
.cp-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cp-feature-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: var(--smm-surface);
  border-radius: var(--pp-radius-card);
  box-shadow: var(--pp-shadow-card);
  transition: transform .2s;
}
.cp-feature-card:hover { transform: translateY(-2px); }
.cp-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.cp-fi-blue   { background: rgba(0,202,243,.12);   color: var(--smm-primary); }
.cp-fi-pink   { background: rgba(242,85,111,.12);  color: var(--smm-danger); }
.cp-fi-orange { background: rgba(255,170,0,.12);   color: var(--smm-warn); }
.cp-fi-purple { background: rgba(121,122,242,.12); color: var(--smm-accent); }
.cp-fi-cyan   { background: rgba(0,202,243,.12);   color: #0bbce0; }
.cp-fi-green  { background: rgba(102,204,0,.12);   color: var(--smm-success); }
.cp-feature-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--smm-ink);
  margin-bottom: 4px;
}
.cp-feature-desc { font-size: 12px; color: var(--smm-ink-3); line-height: 1.55; }

/* ─── Card base ─── */
.cp-card { padding: 28px; }
.cp-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--smm-ink);
  margin-bottom: 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--smm-border);
}
.cp-card-head i { color: var(--smm-primary); font-size: 18px; }
.cp-form-sub {
  font-size: 13px;
  color: var(--smm-ink-3);
  margin-top: 0;
  margin-bottom: 24px;
}

/* ─── Form fields ─── */
.cp-field { margin-bottom: 20px; }
.cp-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--smm-ink-2);
  margin-bottom: 7px;
}
.cp-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.cp-input-icon {
  position: absolute;
  left: 14px;
  color: var(--smm-ink-3);
  font-size: 15px;
  pointer-events: none;
}
.cp-input {
  width: 100%;
  height: 46px;
  padding: 0 44px 0 42px;
  border: 1.5px solid var(--smm-border);
  border-radius: 10px;
  background: var(--smm-bg);
  color: var(--smm-ink);
  font-size: 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  font-family: inherit;
}
.cp-input:focus {
  border-color: var(--smm-primary);
  box-shadow: 0 0 0 3px rgba(0,202,243,.12);
  background: var(--smm-surface);
}
.cp-pw-toggle {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: var(--smm-ink-3);
  cursor: pointer;
  padding: 4px;
  font-size: 16px;
  line-height: 1;
}
.cp-pw-toggle:hover { color: var(--smm-primary); }

/* ─── Nameserver info box ─── */
.cp-ns-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
  background: rgba(0,202,243,.07);
  border: 1px solid rgba(0,202,243,.2);
  border-radius: 10px;
  margin-bottom: 20px;
}
.cp-ns-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--smm-primary);
}
.cp-ns-list {
  margin: 0;
  padding-left: 20px;
}
.cp-ns-list li {
  font-size: 13px;
  color: var(--smm-ink-2);
  font-family: monospace;
  padding: 2px 0;
}

/* ─── Pricing display ─── */
.cp-pricing-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--smm-bg);
  border-radius: 12px;
  margin-bottom: 20px;
}
.cp-price-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--smm-gradient);
  border-radius: 8px;
}
.cp-price-val {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}
.cp-price-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cp-price-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--smm-ink-2);
}
.cp-price-meta i { color: var(--smm-ink-3); }

/* ─── Currency select ─── */
.cp-select-wrap {
  position: relative;
}
.cp-select {
  width: 100%;
  height: 46px;
  padding: 0 38px 0 14px;
  border: 1.5px solid var(--smm-border);
  border-radius: 10px;
  background: var(--smm-bg);
  color: var(--smm-ink);
  font-size: 14px;
  outline: none;
  appearance: none;
  cursor: pointer;
  transition: border-color .2s;
  font-family: inherit;
}
.cp-select:focus { border-color: var(--smm-primary); }
.cp-select-caret {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--smm-ink-3);
  font-size: 13px;
  pointer-events: none;
}

/* ─── Alert ─── */
.cp-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  margin-bottom: 20px;
}
.cp-alert-danger {
  background: rgba(242,85,111,.1);
  border: 1px solid rgba(242,85,111,.25);
  color: var(--smm-danger);
}
.cp-alert i { flex-shrink: 0; margin-top: 2px; }

/* ─── Submit button ─── */
.cp-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  background: var(--smm-gradient);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s;
  margin-top: 8px;
  font-family: inherit;
}
.cp-submit-btn:hover { opacity: .88; }

/* ─── What's Included ─── */
.cp-included-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 24px;
}
.cp-included-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--smm-ink-2);
  padding: 6px 0;
}
.cp-included-item i { color: var(--smm-success); font-size: 15px; flex-shrink: 0; }

/* ─── FAQ ─── */
.cp-faq-item { border-bottom: 1px solid var(--smm-border); }
.cp-faq-item:last-child { border-bottom: none; }
.cp-faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 14px 0;
  background: none;
  border: none;
  text-align: left;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--smm-ink);
  cursor: pointer;
  gap: 12px;
  font-family: inherit;
}
.cp-faq-q:hover { color: var(--smm-primary); }
.cp-faq-caret { transition: transform .25s; flex-shrink: 0; }
.cp-faq-q.open .cp-faq-caret { transform: rotate(180deg); }
.cp-faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s ease;
}
.cp-faq-a.open { max-height: 300px; }
.cp-faq-a p {
  padding-bottom: 14px;
  font-size: 13px;
  color: var(--smm-ink-2);
  line-height: 1.65;
  margin: 0;
}

/* ─── Dark mode ─── */
[data-bs-theme="dark"] .cp-hero {
  background: linear-gradient(135deg, rgba(121,122,242,.15) 0%, rgba(0,202,243,.15) 100%);
  border-color: rgba(0,202,243,.25);
}
[data-bs-theme="dark"] .cp-feature-card {
  background: rgba(255,255,255,.04);
}
[data-bs-theme="dark"] .cp-input,
[data-bs-theme="dark"] .cp-select {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  color: var(--smm-ink);
}
[data-bs-theme="dark"] .cp-ns-box {
  background: rgba(0,202,243,.1);
  border-color: rgba(0,202,243,.25);
}
[data-bs-theme="dark"] .cp-pricing-row { background: rgba(255,255,255,.05); }

/* ─── Responsive ─── */
@media (max-width: 1100px) {
  .cp-features { grid-template-columns: repeat(2, 1fr); }
  .cp-included-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .cp-hero { flex-direction: column; padding: 24px 20px; }
  .cp-hero-art { display: none; }
  .cp-hero-title { font-size: 22px; }
  .cp-features { grid-template-columns: 1fr; }
  .cp-included-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .cp-included-grid { grid-template-columns: 1fr; }
  .cp-pricing-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ═══════════════════════════════════════════════
   USER LEVELS & REWARDS PAGE
   ═══════════════════════════════════════════════ */

/* ─── User level card ─── */
.lv-user-card { padding: 24px 28px; }
.lv-user-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.lv-user-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.lv-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--smm-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  flex-shrink: 0;
}
.lv-user-info { display: flex; flex-direction: column; gap: 5px; }
.lv-username {
  font-size: 17px;
  font-weight: 700;
  color: var(--smm-ink);
  line-height: 1;
}
.lv-tier-row { display: flex; align-items: center; gap: 8px; }
.lv-tier-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
}
.lv-tier-silver { background: rgba(121,122,242,.12); color: var(--smm-accent); }
.lv-lvnum { font-size: 12px; color: var(--smm-ink-3); font-weight: 600; }
.lv-stars { display: flex; gap: 2px; font-size: 14px; }
.lv-star-on  { color: #FFB800; }
.lv-star-off { color: var(--smm-border); }

/* Progress to next level */
.lv-next-block { flex: 1; min-width: 200px; max-width: 380px; }
.lv-next-label {
  font-size: 13px;
  color: var(--smm-ink-2);
  margin-bottom: 10px;
}
.lv-next-label strong { color: #FFB800; }
.lv-prog-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lv-prog-from, .lv-prog-pct {
  font-size: 12px;
  color: var(--smm-ink-3);
  white-space: nowrap;
  flex-shrink: 0;
}
.lv-prog-pct {
  font-weight: 700;
  color: var(--smm-primary);
  font-size: 13px;
}
.lv-prog-track {
  flex: 1;
  height: 8px;
  background: var(--smm-border);
  border-radius: 4px;
  overflow: hidden;
}
.lv-prog-fill {
  height: 100%;
  background: var(--smm-gradient);
  border-radius: 4px;
  transition: width 1s ease;
}
.lv-prog-sub {
  font-size: 11.5px;
  color: var(--smm-ink-3);
  margin-top: 6px;
}

/* ─── Levels table card ─── */
.lv-card { padding: 24px; }
.lv-section-head { margin-bottom: 20px; }
.lv-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--smm-ink);
  margin-bottom: 4px;
}
.lv-section-desc { font-size: 13px; color: var(--smm-ink-3); }
.lv-gradient-text {
  background: var(--smm-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Table overrides for levels */
.lv-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.lv-th-center { text-align: center !important; }
.lv-th-right  { text-align: right !important; }
.lv-td-center { text-align: center; }
.lv-td-right  { text-align: right; }

.lv-row { transition: background .2s; }
.lv-row:hover { background: rgba(0,202,243,.04); }
.lv-row-active { background: rgba(121,122,242,.06) !important; }
.lv-row-plat   { background: linear-gradient(to right, rgba(121,122,242,.06), rgba(0,202,243,.04)); }

.lv-level-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lv-level-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--smm-border);
  flex-shrink: 0;
}
.lv-dot-bronze { background: #cd7f32; }
.lv-dot-silver { background: var(--smm-accent); box-shadow: 0 0 0 3px rgba(121,122,242,.2); }
.lv-dot-gold   { background: #FFB800; }
.lv-dot-plat   { background: var(--smm-gradient); }

.lv-emoji { font-size: 22px; flex-shrink: 0; }
.lv-level-name { font-size: 14px; font-weight: 700; color: var(--smm-ink); }
.lv-tier-name  { font-size: 12px; color: var(--smm-ink-3); }
.lv-tier-name-bronze { color: #cd7f32; }
.lv-tier-name-silver { color: var(--smm-accent); }
.lv-tier-name-gold   { color: #D4A017; }
.lv-tier-name-plat   {
  background: var(--smm-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
}
.lv-row-stars { font-size: 11px; color: #FFB800; letter-spacing: 1px; margin-top: 2px; }

.lv-disc {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
}
.lv-disc-standard { background: var(--smm-bg); color: var(--smm-ink-3); }
.lv-disc-bronze   { background: rgba(205,127,50,.12); color: #cd7f32; }
.lv-disc-silver   { background: rgba(121,122,242,.12); color: var(--smm-accent); }
.lv-disc-gold     { background: rgba(255,184,0,.12); color: #D4A017; }
.lv-disc-plat     { background: var(--smm-gradient); color: #fff; box-shadow: 0 2px 8px rgba(121,122,242,.3); }

.lv-spend { font-size: 14px; font-weight: 700; color: var(--smm-ink); }
.lv-plat-text {
  background: var(--smm-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Benefit cards ─── */
.lv-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.lv-benefit-card {
  padding: 24px;
  background: var(--smm-surface);
  border-radius: var(--pp-radius-card);
  box-shadow: var(--pp-shadow-card);
  transition: transform .2s;
}
.lv-benefit-card:hover { transform: translateY(-2px); }
.lv-benefit-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
}
.lv-bi-cyan     { background: rgba(0,202,243,.15);   color: var(--smm-primary); }
.lv-bi-purple   { background: rgba(121,122,242,.15); color: var(--smm-accent); }
.lv-bi-gradient { background: var(--smm-gradient);  color: #fff; }
.lv-benefit-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--smm-ink);
  margin-bottom: 6px;
}
.lv-benefit-desc { font-size: 13px; color: var(--smm-ink-3); line-height: 1.6; }

/* ─── Dark mode ─── */
[data-bs-theme="dark"] .lv-row-active { background: rgba(121,122,242,.12) !important; }
[data-bs-theme="dark"] .lv-row-plat   { background: linear-gradient(to right, rgba(121,122,242,.12), rgba(0,202,243,.06)); }
[data-bs-theme="dark"] .lv-benefit-card { background: rgba(255,255,255,.04); }
[data-bs-theme="dark"] .lv-disc-standard { background: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .lv-prog-track { background: rgba(255,255,255,.1); }

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .lv-benefits { grid-template-columns: 1fr 1fr; }
  .lv-user-top { flex-direction: column; align-items: flex-start; }
  .lv-next-block { max-width: 100%; width: 100%; }
}
@media (max-width: 600px) {
  .lv-benefits { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   UPDATES & ANNOUNCEMENTS PAGE
   ═══════════════════════════════════════════════ */

/* ─── Hero banner ─── */
.upd-hero {
  padding: 28px 32px;
  background: linear-gradient(135deg, rgba(121,122,242,.09) 0%, rgba(0,202,243,.09) 100%);
  border: 1px solid rgba(0,202,243,.18);
}
.upd-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--smm-gradient);
  color: #fff;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.upd-hero-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--smm-ink);
  margin-bottom: 6px;
  line-height: 1.2;
}
.upd-gradient-text {
  background: var(--smm-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.upd-hero-sub {
  font-size: 13.5px;
  color: var(--smm-ink-3);
  margin-bottom: 24px;
  line-height: 1.6;
}

/* ─── Type filter pills (hero) ─── */
.upd-type-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.upd-type-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--smm-surface);
  border: 1.5px solid var(--smm-border);
  border-radius: 12px;
  text-decoration: none;
  transition: all .2s;
  min-width: 120px;
}
.upd-type-pill:hover { border-color: var(--smm-primary); transform: translateY(-1px); }
.upd-type-pill.active {
  border-color: var(--smm-primary);
  background: rgba(0,202,243,.07);
}
.upd-pill-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.upd-pill-label { font-size: 13px; font-weight: 600; color: var(--smm-ink); }

/* Default pill icon colors */
.upd-pill-all        .upd-pill-icon { background: rgba(0,202,243,.12);   color: var(--smm-primary); }
.upd-pill-feature    .upd-pill-icon,
.upd-pill-new        .upd-pill-icon { background: rgba(102,204,0,.12);   color: var(--smm-success); }
.upd-pill-maintenance .upd-pill-icon { background: rgba(255,170,0,.12); color: var(--smm-warn); }
.upd-pill-announcement .upd-pill-icon,
.upd-pill-promo      .upd-pill-icon { background: rgba(121,122,242,.12); color: var(--smm-accent); }
.upd-pill-update     .upd-pill-icon { background: rgba(0,202,243,.12);   color: var(--smm-primary); }

/* ─── Search + filter bar ─── */
.upd-bar {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.upd-search-form { flex: 1; min-width: 200px; }
.upd-search-wrap {
  display: flex;
  align-items: center;
  position: relative;
}
.upd-search-icon {
  position: absolute;
  left: 14px;
  color: var(--smm-ink-3);
  font-size: 14px;
  pointer-events: none;
}
.upd-search-input {
  width: 100%;
  height: 40px;
  padding: 0 48px 0 40px;
  border: 1.5px solid var(--smm-border);
  border-radius: 10px;
  background: var(--smm-bg);
  color: var(--smm-ink);
  font-size: 13.5px;
  outline: none;
  transition: border-color .2s;
  font-family: inherit;
}
.upd-search-input:focus { border-color: var(--smm-primary); background: var(--smm-surface); }
.upd-search-btn {
  position: absolute;
  right: 6px;
  width: 30px;
  height: 30px;
  background: var(--smm-gradient);
  color: #fff;
  border: none;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: opacity .2s;
}
.upd-search-btn:hover { opacity: .85; }
.upd-filter-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.upd-filter-tab {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--smm-ink-2);
  background: var(--smm-bg);
  border: 1px solid var(--smm-border);
  text-decoration: none;
  transition: all .2s;
  white-space: nowrap;
}
.upd-filter-tab:hover { border-color: var(--smm-primary); color: var(--smm-primary); }
.upd-filter-tab.active {
  background: var(--smm-gradient);
  color: #fff;
  border-color: transparent;
}

/* ─── List heading ─── */
.upd-list-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--smm-ink);
}
.upd-list-head i { color: var(--smm-primary); }

/* ─── Update item card ─── */
.upd-item {
  padding: 20px 24px;
  border-left: 3px solid var(--smm-border);
  transition: border-color .2s, transform .15s;
}
.upd-item:hover { border-left-color: var(--smm-primary); transform: translateX(2px); }
.upd-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}
.upd-item-date {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--smm-ink-3);
}
.upd-item-date i { font-size: 11px; }
.upd-item-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--smm-ink);
  margin-bottom: 4px;
  line-height: 1.4;
}
.upd-item-id {
  font-size: 11.5px;
  color: var(--smm-ink-3);
  margin-bottom: 8px;
  font-family: monospace;
}
.upd-item-body {
  font-size: 13.5px;
  color: var(--smm-ink-2);
  line-height: 1.65;
}

/* ─── Type badges ─── */
.upd-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: .2px;
}
/* Default */
.upd-badge                     { background: rgba(143,167,178,.15); color: var(--smm-ink-2); }
.upd-badge-update              { background: rgba(0,202,243,.12);   color: var(--smm-primary); }
.upd-badge-feature,
.upd-badge-new,
.upd-badge-new-feature         { background: rgba(102,204,0,.12);   color: var(--smm-success); }
.upd-badge-maintenance         { background: rgba(255,170,0,.12);   color: var(--smm-warn); }
.upd-badge-announcement,
.upd-badge-promo,
.upd-badge-promotion           { background: rgba(121,122,242,.12); color: var(--smm-accent); }
.upd-badge-bonus               { background: rgba(102,204,0,.12);   color: var(--smm-success); }
.upd-badge-restored,
.upd-badge-resolved            { background: rgba(0,202,243,.12);   color: var(--smm-primary); }
.upd-badge-milestone,
.upd-badge-achievement         { background: rgba(255,184,0,.12);   color: #D4A017; }

/* Border color matches badge type */
.upd-item:has(.upd-badge-feature),
.upd-item:has(.upd-badge-new),
.upd-item:has(.upd-badge-new-feature) { border-left-color: var(--smm-success); }
.upd-item:has(.upd-badge-maintenance) { border-left-color: var(--smm-warn); }
.upd-item:has(.upd-badge-announcement),
.upd-item:has(.upd-badge-promo),
.upd-item:has(.upd-badge-promotion)   { border-left-color: var(--smm-accent); }
.upd-item:has(.upd-badge-update)      { border-left-color: var(--smm-primary); }
.upd-item:has(.upd-badge-milestone)   { border-left-color: #D4A017; }

/* ─── Empty state ─── */
.upd-empty {
  padding: 48px 24px;
  text-align: center;
}
.upd-empty-icon { font-size: 40px; color: var(--smm-border); margin-bottom: 12px; }
.upd-empty-title { font-size: 16px; font-weight: 700; color: var(--smm-ink-2); margin-bottom: 4px; }
.upd-empty-sub { font-size: 13px; color: var(--smm-ink-3); }

/* ─── CTA ─── */
.upd-cta {
  padding: 32px 24px;
  text-align: center;
  background: linear-gradient(135deg, rgba(121,122,242,.07) 0%, rgba(0,202,243,.07) 100%);
  border: 1px solid rgba(0,202,243,.15);
}
.upd-cta-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--smm-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0 auto 14px;
}
.upd-cta-title { font-size: 17px; font-weight: 700; color: var(--smm-ink); margin-bottom: 6px; }
.upd-cta-desc  { font-size: 13px; color: var(--smm-ink-3); max-width: 420px; margin: 0 auto; line-height: 1.6; }

/* ─── Dark mode ─── */
[data-bs-theme="dark"] .upd-hero {
  background: linear-gradient(135deg, rgba(121,122,242,.14) 0%, rgba(0,202,243,.14) 100%);
  border-color: rgba(0,202,243,.25);
}
[data-bs-theme="dark"] .upd-type-pill { background: rgba(255,255,255,.04); }
[data-bs-theme="dark"] .upd-type-pill.active { background: rgba(0,202,243,.1); }
[data-bs-theme="dark"] .upd-search-input { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
[data-bs-theme="dark"] .upd-filter-tab  { background: rgba(255,255,255,.05); }
[data-bs-theme="dark"] .upd-cta { background: linear-gradient(135deg, rgba(121,122,242,.12) 0%, rgba(0,202,243,.12) 100%); }

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .upd-hero { padding: 20px; }
  .upd-bar  { flex-direction: column; align-items: stretch; }
  .upd-type-pills { gap: 8px; }
  .upd-type-pill  { min-width: unset; flex: 1; }
}
@media (max-width: 480px) {
  .upd-item { padding: 16px; }
}

/* ═══════════════════════════════════════════════════════
   TICKETS / SUPPORT PAGE  (tk-*)
   ═══════════════════════════════════════════════════════ */

/* ─── Page header ─── */
.tk-page-header { }
.tk-page-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--smm-ink);
  margin: 0 0 4px;
}
.tk-page-sub {
  font-size: 13.5px;
  color: var(--smm-ink-3);
  margin: 0;
}

/* ─── Feature cards row ─── */
.tk-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.tk-feat-card {
  background: var(--smm-surface);
  border: 1px solid var(--smm-border);
  border-radius: var(--pp-radius-card);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.tk-feat-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.tk-icon-cyan   { background: rgba(0,202,243,.12);   color: var(--smm-primary); }
.tk-icon-green  { background: rgba(102,204,0,.12);   color: var(--smm-success); }
.tk-icon-purple { background: rgba(121,122,242,.12); color: var(--smm-accent); }
.tk-feat-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--smm-ink);
  margin-bottom: 2px;
}
.tk-feat-sub {
  font-size: 12px;
  color: var(--smm-ink-3);
}

/* ─── Telegram banner ─── */
.tk-telegram {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  background: linear-gradient(135deg, rgba(0,136,204,.06) 0%, rgba(0,202,243,.06) 100%);
  border-color: rgba(0,136,204,.18);
}
.tk-tg-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.tk-tg-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(0,136,204,.14);
  color: #0088CC;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.tk-tg-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--smm-ink);
  margin-bottom: 2px;
}
.tk-tg-sub {
  font-size: 12.5px;
  color: var(--smm-ink-3);
}
.tk-tg-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  background: #0088CC;
  color: #fff;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}
.tk-tg-btn:hover { background: #006fa8; color: #fff; }

/* ─── Section head ─── */
.tk-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
}
.tk-section-label {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--smm-ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tk-section-label i { color: var(--smm-primary); }

/* ─── Open Ticket button ─── */
.tk-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: var(--smm-gradient);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s;
}
.tk-new-btn:hover { opacity: .88; }

/* ─── Form panel ─── */
.tk-form-divider {
  height: 1px;
  background: var(--smm-border);
  margin: 0;
}
.tk-form-inner {
  padding: 24px;
}
.tk-form-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--smm-ink-2);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tk-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.tk-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tk-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--smm-ink-2);
}
.tk-req { color: var(--smm-danger); font-size: 13px; }
.tk-input,
.tk-select,
.tk-textarea {
  width: 100%;
  background: var(--smm-bg);
  border: 1.5px solid var(--smm-border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--smm-ink);
  font-family: 'Montserrat', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif;
  outline: none;
  transition: border-color .2s;
}
.tk-input:focus,
.tk-select:focus,
.tk-textarea:focus {
  border-color: var(--smm-primary);
  background: var(--smm-surface);
}
.tk-textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.6;
}
.tk-select { cursor: pointer; }
.tk-form-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 6px;
}
.tk-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 26px;
  background: var(--smm-gradient);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Montserrat', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif;
  transition: opacity .2s;
}
.tk-submit-btn:hover { opacity: .88; }
.tk-form-alert {
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 13px;
}

/* ─── List card ─── */
.tk-list-head { border-bottom: 1px solid var(--smm-border); }

/* ─── Search + filter bar ─── */
.tk-list-bar {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.tk-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.tk-search-ico {
  position: absolute;
  left: 12px;
  color: var(--smm-ink-3);
  font-size: 14px;
  pointer-events: none;
}
.tk-search-input {
  padding: 9px 40px 9px 36px;
  background: var(--smm-bg);
  border: 1.5px solid var(--smm-border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--smm-ink);
  font-family: 'Montserrat', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif;
  width: 240px;
  outline: none;
  transition: border-color .2s;
}
.tk-search-input:focus { border-color: var(--smm-primary); background: var(--smm-surface); }
.tk-search-btn {
  position: absolute;
  right: 4px;
  background: none;
  border: none;
  color: var(--smm-ink-3);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 14px;
}
.tk-filter-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tk-ftab {
  padding: 7px 14px;
  border: 1.5px solid var(--smm-border);
  border-radius: 8px;
  background: var(--smm-surface);
  color: var(--smm-ink-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Montserrat', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif;
  transition: border-color .2s, color .2s, background .2s;
}
.tk-ftab:hover { border-color: var(--smm-primary); color: var(--smm-primary); }
.tk-ftab-active {
  border-color: var(--smm-primary);
  background: rgba(0,202,243,.08);
  color: var(--smm-primary);
}

/* ─── Table ─── */
.tk-table-wrap {
  overflow-x: auto;
  padding: 0 24px 24px;
}
.tk-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.tk-table thead tr {
  background: var(--smm-bg);
}
.tk-table thead th {
  padding: 11px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--smm-ink-3);
  text-transform: uppercase;
  letter-spacing: .4px;
  border-bottom: 1px solid var(--smm-border);
  white-space: nowrap;
}
.tk-table tbody tr {
  border-bottom: 1px solid var(--smm-border);
  transition: background .15s;
}
.tk-table tbody tr:last-child { border-bottom: none; }
.tk-table tbody tr:hover { background: rgba(0,202,243,.04); }
.tk-table td {
  padding: 13px 14px;
  color: var(--smm-ink);
  vertical-align: middle;
}
.tk-id-cell {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--smm-ink-3);
  font-family: monospace;
  white-space: nowrap;
}
.tk-subject-link {
  color: var(--smm-ink);
  text-decoration: none;
  font-weight: 500;
}
.tk-subject-link:hover { color: var(--smm-primary); }
.tk-row-new .tk-subject-link { color: var(--smm-primary); }
.tk-cat-cell { color: var(--smm-ink-2); font-size: 12.5px; }
.tk-date-cell { color: var(--smm-ink-3); font-size: 12px; white-space: nowrap; }

/* ─── Status badges ─── */
.tk-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: capitalize;
  white-space: nowrap;
}
.tk-status-badge                 { background: rgba(143,167,178,.15); color: var(--smm-ink-2); }
.tk-status-open                  { background: rgba(102,204,0,.14);   color: var(--smm-success); }
.tk-status-closed                { background: rgba(242,85,111,.12);  color: var(--smm-danger); }
.tk-status-answered              { background: rgba(0,202,243,.12);   color: var(--smm-primary); }
.tk-status-in-progress           { background: rgba(255,170,0,.12);   color: var(--smm-warn); }
.tk-status-replied               { background: rgba(0,202,243,.12);   color: var(--smm-primary); }
.tk-status-pending               { background: rgba(255,170,0,.12);   color: var(--smm-warn); }

/* ─── View button ─── */
.tk-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: rgba(0,202,243,.1);
  color: var(--smm-primary);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s;
  white-space: nowrap;
}
.tk-view-btn:hover { background: rgba(0,202,243,.2); color: var(--smm-primary); }

/* ─── Dark mode ─── */
[data-bs-theme="dark"] .tk-feat-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
[data-bs-theme="dark"] .tk-telegram  { background: linear-gradient(135deg, rgba(0,136,204,.08) 0%, rgba(0,202,243,.08) 100%); }
[data-bs-theme="dark"] .tk-input,
[data-bs-theme="dark"] .tk-select,
[data-bs-theme="dark"] .tk-textarea  { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
[data-bs-theme="dark"] .tk-input:focus,
[data-bs-theme="dark"] .tk-select:focus,
[data-bs-theme="dark"] .tk-textarea:focus { background: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .tk-search-input { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
[data-bs-theme="dark"] .tk-ftab { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
[data-bs-theme="dark"] .tk-ftab-active { background: rgba(0,202,243,.12); }
[data-bs-theme="dark"] .tk-table thead tr { background: rgba(255,255,255,.04); }

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .tk-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .tk-features  { grid-template-columns: 1fr; }
  .tk-telegram  { flex-direction: column; align-items: flex-start; }
  .tk-form-row  { grid-template-columns: 1fr; }
  .tk-section-head { flex-direction: column; align-items: flex-start; }
  .tk-list-bar  { flex-direction: column; align-items: stretch; }
  .tk-filter-tabs { justify-content: flex-start; }
  .tk-search-input { width: 100%; }
}
@media (max-width: 480px) {
  .tk-form-inner { padding: 16px; }
  .tk-table-wrap { padding: 0 12px 16px; }
}
  .upd-type-pill { padding: 8px 12px; }
  .upd-pill-label { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════
   VIEW TICKET PAGE  (vt-*)
   ═══════════════════════════════════════════════════════ */

/* ─── Header ─── */
.vt-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--smm-ink-3);
  text-decoration: none;
  margin-bottom: 10px;
  transition: color .2s;
}
.vt-back:hover { color: var(--smm-primary); }
.vt-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.vt-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--smm-ink);
  margin: 0;
}
.vt-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
}
.vt-status-badge              { background: rgba(143,167,178,.15); color: var(--smm-ink-2); }
.vt-status-open               { background: rgba(102,204,0,.14);   color: var(--smm-success); }
.vt-status-closed             { background: rgba(242,85,111,.12);  color: var(--smm-danger); }
.vt-status-answered           { background: rgba(0,202,243,.12);   color: var(--smm-primary); }
.vt-status-in-progress        { background: rgba(255,170,0,.12);   color: var(--smm-warn); }
.vt-status-replied            { background: rgba(0,202,243,.12);   color: var(--smm-primary); }
.vt-status-pending            { background: rgba(255,170,0,.12);   color: var(--smm-warn); }

/* ─── Thread card ─── */
.vt-thread {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ─── Message row ─── */
.vt-msg {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.vt-msg-content {
  flex: 1;
  min-width: 0;
}
.vt-msg-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.vt-meta-right { justify-content: flex-end; }
.vt-meta-left  { justify-content: flex-start; }
.vt-msg-author {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--smm-ink);
}
.vt-support-name { color: var(--smm-primary); }
.vt-msg-time {
  font-size: 12px;
  color: var(--smm-ink-3);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ─── User message (right) ─── */
.vt-msg-user {
  flex-direction: row-reverse;
}
.vt-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--smm-gradient);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ─── Support message (left) ─── */
.vt-support-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0,202,243,.14);
  color: var(--smm-primary);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ─── Bubbles ─── */
.vt-bubble {
  border-radius: 14px;
  padding: 14px 18px;
  max-width: 100%;
  line-height: 1.65;
}
.vt-bubble-user {
  background: var(--smm-bg);
  border: 1px solid var(--smm-border);
  border-top-right-radius: 4px;
}
.vt-bubble-support {
  background: rgba(0,202,243,.05);
  border: 1px solid rgba(0,202,243,.18);
  border-left: 3px solid var(--smm-primary);
  border-top-left-radius: 4px;
}
.vt-bubble-text {
  font-size: 13.5px;
  color: var(--smm-ink);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ─── Attachments ─── */
.vt-files {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--smm-border);
}
.vt-files-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--smm-ink-3);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.vt-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: var(--smm-surface);
  border: 1px solid var(--smm-border);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--smm-ink-2);
  text-decoration: none;
  margin: 0 6px 6px 0;
  transition: border-color .2s, color .2s;
}
.vt-file-chip:hover { border-color: var(--smm-primary); color: var(--smm-primary); }
.vt-file-chip i { color: var(--smm-accent); font-size: 14px; }
.vt-file-dl {
  font-size: 11px;
  color: var(--smm-ink-3);
  margin-left: 2px;
}

/* ─── Reply card ─── */
.vt-reply-head {
  padding: 18px 24px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--smm-ink);
  border-bottom: 1px solid var(--smm-border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.vt-reply-head i { color: var(--smm-primary); }
.vt-reply-body { padding: 24px; }
.vt-form-group {
  margin-bottom: 20px;
}
.vt-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--smm-ink-2);
  margin-bottom: 8px;
}
.vt-req { color: var(--smm-danger); }
.vt-textarea-wrap { position: relative; }
.vt-textarea {
  width: 100%;
  background: var(--smm-bg);
  border: 1.5px solid var(--smm-border);
  border-radius: 12px;
  padding: 12px 16px 30px;
  font-size: 13.5px;
  color: var(--smm-ink);
  font-family: 'Montserrat', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif;
  resize: vertical;
  min-height: 140px;
  line-height: 1.65;
  outline: none;
  transition: border-color .2s;
}
.vt-textarea:focus {
  border-color: var(--smm-primary);
  background: var(--smm-surface);
}
.vt-char-count {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-size: 11.5px;
  color: var(--smm-ink-3);
  pointer-events: none;
}
.vt-form-alert {
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 13px;
}
.vt-reply-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.vt-send-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 28px;
  background: var(--smm-gradient);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: 'Montserrat', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif;
  cursor: pointer;
  transition: opacity .2s;
}
.vt-send-btn:hover { opacity: .88; }

/* ─── Dark mode ─── */
[data-bs-theme="dark"] .vt-bubble-user {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
}
[data-bs-theme="dark"] .vt-bubble-support {
  background: rgba(0,202,243,.07);
  border-color: rgba(0,202,243,.22);
}
[data-bs-theme="dark"] .vt-file-chip {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
}
[data-bs-theme="dark"] .vt-textarea {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
}
[data-bs-theme="dark"] .vt-textarea:focus { background: rgba(255,255,255,.08); }

/* ─── Responsive ─── */
@media (max-width: 600px) {
  .vt-thread { padding: 16px; gap: 18px; }
  .vt-bubble { padding: 12px 14px; }
  .vt-reply-body { padding: 16px; }
  .vt-avatar,
  .vt-support-icon { width: 34px; height: 34px; font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════
   MOBILE APPS PAGE  (ma-*)
   ═══════════════════════════════════════════════════════ */

/* ─── Page header ─── */
.ma-page-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--smm-ink);
  margin: 0 0 4px;
}
.ma-page-sub {
  font-size: 13.5px;
  color: var(--smm-ink-3);
  margin: 0;
}

/* ─── Feature pills row ─── */
.ma-pills {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ma-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: rgba(0,202,243,.1);
  color: var(--smm-primary);
  border: 1px solid rgba(0,202,243,.2);
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
}
.ma-pill-green  { background: rgba(102,204,0,.1);   color: var(--smm-success); border-color: rgba(102,204,0,.2); }
.ma-pill-purple { background: rgba(121,122,242,.1); color: var(--smm-accent);  border-color: rgba(121,122,242,.2); }

/* ─── Card sections ─── */
.ma-card { padding: 0; overflow: hidden; }
.ma-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--smm-border);
}
.ma-head-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.ma-icon-tg  { background: rgba(0,136,204,.12); color: #0088CC; }
.ma-icon-app { background: rgba(0,202,243,.12);  color: var(--smm-primary); }
.ma-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--smm-ink);
  margin-bottom: 2px;
}
.ma-card-sub {
  font-size: 12.5px;
  color: var(--smm-ink-3);
}

/* ─── Inner sections ─── */
.ma-inner-section {
  padding: 20px 24px 0;
}
.ma-inner-section:last-child { padding-bottom: 24px; }
.ma-inner-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--smm-ink-2);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.ma-inner-label i { color: var(--smm-primary); }
.mt-3 { margin-top: 18px; }

/* ─── Features grid ─── */
.ma-feat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
.ma-feat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--smm-ink-2);
}
.ma-feat-item i { color: var(--smm-success); font-size: 14px; flex-shrink: 0; }

/* ─── Steps ─── */
.ma-steps {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
.ma-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 100px;
  text-align: center;
}
.ma-step-body { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ma-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,202,243,.12);
  color: var(--smm-primary);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ma-step-accent { background: rgba(121,122,242,.12); color: var(--smm-accent); }
.ma-step-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--smm-ink-2);
  text-align: center;
}
.ma-step-arrow {
  padding-top: 8px;
  color: var(--smm-border);
  font-size: 18px;
  flex-shrink: 0;
  align-self: flex-start;
}
.ma-tg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #0088CC;
  color: #fff;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}
.ma-tg-btn:hover { background: #006fa8; color: #fff; }
.ma-tip {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(0,202,243,.06);
  border-left: 3px solid var(--smm-primary);
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
  color: var(--smm-ink-3);
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.55;
}
.ma-tip i { color: var(--smm-primary); flex-shrink: 0; margin-top: 1px; }

/* ─── App columns ─── */
.ma-app-cols {
  display: flex;
  gap: 0;
  padding: 0 24px;
  margin-top: 20px;
}
.ma-app-panel {
  flex: 1;
  padding: 20px;
  background: var(--smm-bg);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ma-app-divider {
  width: 1px;
  background: var(--smm-border);
  margin: 0 16px;
  align-self: stretch;
}
.ma-app-logo {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 10px;
}
.ma-logo-ios     { background: #000; color: #fff; }
.ma-logo-android { background: rgba(61,220,132,.14); color: #3DDC84; }
.ma-app-platform {
  font-size: 15px;
  font-weight: 700;
  color: var(--smm-ink);
  margin-bottom: 12px;
}
.ma-install-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .2s;
  margin-bottom: 4px;
}
.ma-install-btn:hover { opacity: .85; }
.ma-btn-ios     { background: #111; color: #fff; }
.ma-btn-android { background: #3DDC84; color: #1a1a1a; }
.ma-install-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ma-install-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--smm-ink-2);
  padding-left: 4px;
}
.ma-install-steps li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--smm-primary);
  flex-shrink: 0;
}
.ma-app-note {
  margin: 16px 24px 0;
  padding: 10px 14px;
  background: rgba(255,170,0,.07);
  border-left: 3px solid var(--smm-warn);
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
  color: var(--smm-ink-3);
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.55;
}
.ma-app-note i { color: var(--smm-warn); flex-shrink: 0; margin-top: 1px; }

/* ─── FAQ ─── */
.ma-faq { display: flex; flex-direction: column; gap: 0; }
.ma-faq-item { border-bottom: 1px solid var(--smm-border); }
.ma-faq-item:last-child { border-bottom: none; }
.ma-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  background: none;
  border: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--smm-ink);
  text-align: left;
  cursor: pointer;
  font-family: 'Montserrat', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif;
  transition: color .2s;
}
.ma-faq-q:hover { color: var(--smm-primary); }
.ma-faq-chevron {
  color: var(--smm-ink-3);
  font-size: 12px;
  flex-shrink: 0;
  transition: transform .25s;
}
.ma-faq-q.open .ma-faq-chevron { transform: rotate(180deg); }
.ma-faq-a {
  max-height: 0;
  overflow: hidden;
  font-size: 13px;
  color: var(--smm-ink-3);
  line-height: 1.65;
  transition: max-height .3s ease, padding .3s ease;
}
.ma-faq-a.open {
  max-height: 200px;
  padding-bottom: 14px;
}

/* ─── Dark mode ─── */
[data-bs-theme="dark"] .ma-app-panel {
  background: rgba(255,255,255,.04);
}
[data-bs-theme="dark"] .ma-logo-ios { background: #1a1a1a; }
[data-bs-theme="dark"] .ma-btn-ios  { background: #2a2a2a; }

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .ma-steps { gap: 12px; }
  .ma-step-arrow { display: none; }
  .ma-step { flex: 0 0 calc(50% - 6px); min-width: 0; }
  .ma-feat-grid { grid-template-columns: 1fr; }
  .ma-card-head { padding: 16px; }
  .ma-inner-section { padding: 16px 16px 0; }
  .ma-inner-section:last-child { padding-bottom: 16px; }
  .ma-app-cols { flex-direction: column; padding: 0 16px; gap: 12px; }
  .ma-app-divider { display: none; }
  .ma-app-panel { padding: 16px; }
  .ma-app-note { margin: 12px 16px 0; }
}
@media (max-width: 480px) {
  .ma-pills { gap: 8px; }
  .ma-pill  { padding: 7px 14px; font-size: 12px; }
  .ma-step  { flex: 0 0 calc(50% - 6px); }
}

/* ═══════════════════════════════════════════════════════
   ACCOUNT / SETTINGS PAGE  (ac-*)
   ═══════════════════════════════════════════════════════ */

/* ─── Card shell ─── */
.ac-card { padding: 0; overflow: hidden; }
.ac-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 16px 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--smm-ink);
  border-bottom: 1px solid var(--smm-border);
}
.ac-card-head i { color: var(--smm-primary); font-size: 15px; }
.ac-card-body { padding: 20px 24px 24px; }
.ac-alert { border-radius: 10px; font-size: 13px; }

/* ─── Avatar ─── */
.ac-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--smm-border);
}
.ac-avatar {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--smm-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 10px;
  overflow: hidden;
}
.ac-avatar-letter {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
}
.ac-avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s;
  color: #fff;
  font-size: 20px;
}
.ac-avatar:hover .ac-avatar-overlay { opacity: 1; }
.ac-avatar-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--smm-ink);
  margin-bottom: 3px;
}
.ac-avatar-sub { font-size: 12px; color: var(--smm-ink-3); }

/* ─── Field rows ─── */
.ac-field-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}
.ac-field-row:last-child { margin-bottom: 0; }
.ac-field-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ac-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--smm-ink-2);
}
.ac-input,
.ac-select,
.ac-textarea {
  width: 100%;
  background: var(--smm-bg);
  border: 1.5px solid var(--smm-border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--smm-ink);
  font-family: 'Montserrat', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif;
  outline: none;
  transition: border-color .2s, background .2s;
}
.ac-input:focus,
.ac-select:focus,
.ac-textarea:focus {
  border-color: var(--smm-primary);
  background: var(--smm-surface);
}
.ac-input[readonly],
.ac-input:disabled { opacity: .7; cursor: default; }
.ac-select { cursor: pointer; }
.ac-textarea { resize: vertical; min-height: 110px; line-height: 1.6; }

/* ─── Password input wrap ─── */
.ac-input-wrap { position: relative; }
.ac-input-wrap .ac-input { padding-right: 42px; }
.ac-eye-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--smm-ink-3);
  cursor: pointer;
  padding: 4px;
  font-size: 15px;
  transition: color .2s;
}
.ac-eye-btn:hover { color: var(--smm-primary); }

/* ─── Inline button (Change / Save) ─── */
.ac-inline-btn {
  padding: 10px 18px;
  background: var(--smm-gradient);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Montserrat', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .2s;
}
.ac-inline-btn:hover { opacity: .88; }

/* ─── Save button (full or normal) ─── */
.ac-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 22px;
  background: var(--smm-gradient);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Montserrat', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif;
  transition: opacity .2s;
}
.ac-save-btn:hover { opacity: .88; }
.ac-btn-full { width: 100%; }
.mt-3 { margin-top: 14px; }

/* ─── 2FA section ─── */
.ac-badge-off {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background: rgba(242,85,111,.1);
  color: var(--smm-danger);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
}
.ac-2fa-desc {
  font-size: 13px;
  color: var(--smm-ink-3);
  line-height: 1.6;
  margin-bottom: 16px;
}
.mb-3 { margin-bottom: 14px; }
.mb-4 { margin-bottom: 20px; }

/* ─── API key row ─── */
.ac-apikey-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ac-apikey-input { flex: 1; letter-spacing: 2px; }
.ac-copy-btn {
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--smm-border);
  border-radius: 10px;
  background: var(--smm-surface);
  color: var(--smm-ink-3);
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color .2s, color .2s;
}
.ac-copy-btn:hover { border-color: var(--smm-primary); color: var(--smm-primary); }
.ac-apikey-date {
  font-size: 12px;
  color: var(--smm-ink-3);
  margin-top: 6px;
}

/* ─── Notifications ─── */
.ac-notif-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.ac-notif-panel {
  background: var(--smm-bg);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.ac-notif-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  margin-bottom: 12px;
}
.ac-notif-email  { background: rgba(0,202,243,.12);   color: var(--smm-primary); }
.ac-notif-tg     { background: rgba(0,136,204,.12);   color: #0088CC; }
.ac-notif-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--smm-ink);
  margin-bottom: 5px;
}
.ac-notif-desc {
  font-size: 12px;
  color: var(--smm-ink-3);
  line-height: 1.55;
  flex: 1;
}
.ac-tg-notif-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  background: #0088CC;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Montserrat', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif;
  width: 100%;
  margin-top: 14px;
  transition: background .2s;
}
.ac-tg-notif-btn:hover { background: #006fa8; }

/* ─── Notification Preferences ─── */
.ac-notif-prefs-head {
  font-size: 13px;
  font-weight: 700;
  color: var(--smm-ink-2);
  margin-bottom: 14px;
  padding-top: 4px;
  border-top: 1px solid var(--smm-border);
  padding-top: 20px;
}
.ac-notif-prefs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.ac-notif-pref-card {
  background: var(--smm-bg);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ac-notif-pref-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(0,202,243,.12);
  color: var(--smm-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.ac-notif-pref-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--smm-ink);
}
.ac-notif-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ac-notif-pref-label {
  font-size: 12px;
  color: var(--smm-ink-3);
}

/* ─── Toggle switch ─── */
.ac-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  cursor: pointer;
  flex-shrink: 0;
}
.ac-toggle input { opacity: 0; width: 0; height: 0; }
.ac-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: var(--smm-border);
  transition: background .25s;
}
.ac-toggle-track::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform .25s;
}
.ac-toggle input:checked + .ac-toggle-track { background: var(--smm-primary); }
.ac-toggle input:checked + .ac-toggle-track::after { transform: translateX(16px); }

/* ─── Modal ─── */
.ac-modal { border-radius: 16px; overflow: hidden; border: none; }
.ac-modal-head {
  background: var(--smm-surface);
  border-bottom: 1px solid var(--smm-border);
  padding: 16px 20px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--smm-ink);
}
.ac-modal-body { padding: 20px; background: var(--smm-surface); }
.ac-modal-foot {
  background: var(--smm-surface);
  border-top: 1px solid var(--smm-border);
  padding: 14px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.ac-modal-cancel {
  padding: 9px 18px;
  background: var(--smm-bg);
  border: 1.5px solid var(--smm-border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--smm-ink-2);
  cursor: pointer;
  font-family: 'Montserrat', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif;
}

/* ─── Dark mode ─── */
[data-bs-theme="dark"] .ac-input,
[data-bs-theme="dark"] .ac-select,
[data-bs-theme="dark"] .ac-textarea       { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
[data-bs-theme="dark"] .ac-input:focus,
[data-bs-theme="dark"] .ac-select:focus,
[data-bs-theme="dark"] .ac-textarea:focus { background: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .ac-notif-panel,
[data-bs-theme="dark"] .ac-notif-pref-card { background: rgba(255,255,255,.04); }
[data-bs-theme="dark"] .ac-modal          { background: var(--smm-surface); }
[data-bs-theme="dark"] .ac-copy-btn       { background: rgba(255,255,255,.05); }
[data-bs-theme="dark"] .ac-modal-cancel   { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .ac-notif-prefs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .ac-card-body  { padding: 16px; }
  .ac-card-head  { padding: 14px 16px; }
  .ac-notif-cols { grid-template-columns: 1fr; }
  .ac-field-row  { flex-wrap: wrap; }
  .ac-inline-btn { width: 100%; }
}
@media (max-width: 480px) {
  .ac-notif-prefs { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════
   BLOG PAGE  (guest)
   ═══════════════════════════════════════════════════════ */

/* ─── Breadcrumb ─── */
.breadcrumb-wrap { background: var(--smm-bg); padding: 12px 0; }
.pg-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 8px;
  padding: 5px 16px;
  font-size: 12px;
}
.pg-breadcrumb a { color: #9da8b8; font-weight: 500; transition: color .2s; }
.pg-breadcrumb a:hover { color: var(--smm-primary); }
.pg-breadcrumb .sep { color: #b0bbc9; font-size: 11px; }
.pg-breadcrumb .current { color: #4a5568; font-weight: 600; }

/* ─── Hero ─── */
.blog-hero {
  background: linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)),
              linear-gradient(135deg, #797af2 0%, #00c4d4 100%);
  padding: 64px 0 56px;
  text-align: center;
}
.blog-hero h1 {
  font-size: 42px;
  font-weight: 800;
  color: #1e2d4a;
  margin-bottom: 14px;
  line-height: 1.15;
}
.blog-hero h1 span { color: var(--smm-primary); }
.blog-hero .subtitle {
  font-size: 15px;
  color: #5c6b7a;
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ─── Search ─── */
.search-section { background: var(--smm-bg); padding: 28px 0 0; }
.search-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 16px rgba(30,45,74,.08);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.search-card i { font-size: 18px; color: #b0bbc9; flex-shrink: 0; }
.search-card input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  font-family: 'Inter', 'Inter Fallback', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif;
  color: #1e2d4a;
  background: transparent;
}
.search-card input::placeholder { color: #b0bbc9; }

/* ─── Blog section wrapper ─── */
.blog-section { background: var(--smm-bg); padding: 28px 0 64px; }
.blog-intro-block {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 28px;
  font-size: 14px;
  color: #4a5568;
  line-height: 1.7;
  box-shadow: 0 2px 16px rgba(30,45,74,.07);
}
.section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.section-head h2 {
  font-size: 20px;
  font-weight: 700;
  color: #1e2d4a;
  margin: 0;
}

/* ─── Featured card ─── */
.featured-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(30,45,74,.09);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  margin-bottom: 32px;
}
.featured-card .feat-img {
  position: relative;
  min-height: 300px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.featured-card .feat-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.feat-img-gradient {
  background: var(--smm-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  color: rgba(255,255,255,.4);
}
.feat-img-inner { font-size: 56px; opacity: .5; }
.featured-card .feat-body {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.feat-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #9da8b8;
  margin-bottom: 14px;
}
.feat-chip {
  background: rgba(0,202,243,.1);
  color: var(--smm-primary);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
}
.feat-date { display: inline-flex; align-items: center; gap: 5px; }
.featured-card h2 {
  font-size: 22px;
  font-weight: 800;
  color: #1e2d4a;
  line-height: 1.3;
  margin-bottom: 12px;
}
.featured-card h2 a { color: inherit; text-decoration: none; display: block; }
.featured-card h2 a:hover { color: var(--smm-primary); }
a.feat-img, a.card-img { display: block; }
.feat-excerpt {
  font-size: 13.5px;
  color: #5c6b7a;
  line-height: 1.65;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feat-excerpt p { margin: 0; }
.feat-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.btn-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--smm-primary);
  font-size: 13px;
  font-weight: 700;
  background: rgba(0,202,243,.08);
  padding: 7px 16px;
  border-radius: 8px;
  border: 1px solid rgba(0,202,243,.2);
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.btn-read-more:hover { background: rgba(0,202,243,.16); border-color: var(--smm-primary); color: var(--smm-primary); }

/* ─── Blog panel ─── */
.blog-panel {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(30,45,74,.09);
  overflow: hidden;
}
.blog-panel-head {
  padding: 22px 24px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #f0f4fb;
}
.blog-panel-head i { font-size: 20px; color: #4a5568; }
.blog-panel-head h3 { font-size: 18px; font-weight: 700; color: #1e2d4a; margin: 0; }
.blog-panel-body { padding: 20px 24px 28px; }

/* ─── Category tabs ─── */
.blog-tabs-wrap { margin-bottom: 24px; }
.blog-tabs {
  display: flex;
  gap: 4px;
  background: #f4f7fc;
  border-radius: 12px;
  padding: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.blog-tabs::-webkit-scrollbar { display: none; }
.blog-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #5c6b7a;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: 'Inter', 'Inter Fallback', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif;
  transition: color .18s, background .18s, box-shadow .18s;
}
.blog-tab:hover { color: #4a5568; }
.blog-tab.active { background: #fff; color: var(--smm-primary); box-shadow: 0 2px 10px rgba(30,45,74,.1); }

/* ─── Blog cards ─── */
.blog-card {
  background: #f8fafd;
  border-radius: 16px;
  border: 1px solid #e8edf5;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .2s, box-shadow .2s;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(30,45,74,.13); }
.blog-card .card-img {
  position: relative;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  overflow: hidden;
}
.blog-card .card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card .card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  color: #9da8b8;
}
.card-chip {
  background: rgba(0,202,243,.1);
  color: var(--smm-primary);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}
.card-chip.chip-tg { background: rgba(0,136,204,.1);   color: #0088cc; }
.card-chip.chip-ig { background: rgba(225,48,108,.1);  color: #e1306c; }
.card-chip.chip-tt { background: rgba(1,1,1,.08);      color: #010101; }
.card-chip.chip-yt { background: rgba(255,0,0,.08);    color: #ff0000; }
.card-chip.chip-mk { background: rgba(121,122,242,.1); color: #797af2; }
.card-chip.chip-st { background: rgba(0,170,100,.1);   color: #00aa64; }
.card-date { display: inline-flex; align-items: center; gap: 5px; }
.blog-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: #1e2d4a;
  line-height: 1.4;
  margin: 0;
}
.blog-card h3 a { color: inherit; text-decoration: none; display: block; }
.blog-card h3 a:hover { color: var(--smm-primary); }
.blog-card-excerpt {
  font-size: 13px;
  color: #5c6b7a;
  line-height: 1.55;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-excerpt p { margin: 0; }
.card-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 6px;
  font-size: 12px;
  color: #9da8b8;
}
.card-read-more {
  color: var(--smm-primary);
  font-weight: 700;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  transition: gap .2s;
}
.card-read-more:hover { gap: 7px; color: var(--smm-primary); }

/* ─── Card image gradient variants ─── */
.ci-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.ci-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.ci-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.ci-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.ci-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.ci-6 { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); }
.card-img-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: rgba(255,255,255,.5);
}

/* ─── Dark mode ─── */
[data-bs-theme="dark"] .pg-breadcrumb { background: rgba(13,43,54,.6); border-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .pg-breadcrumb a { color: #597380; }
[data-bs-theme="dark"] .pg-breadcrumb .current { color: #8FA7B2; }
[data-bs-theme="dark"] .blog-hero {
  background: linear-gradient(rgba(0,28,38,.55), rgba(0,28,38,.55)),
              linear-gradient(135deg, #797af2 0%, #00c4d4 100%);
}
[data-bs-theme="dark"] .blog-hero h1 { color: #e8f0f4; }
[data-bs-theme="dark"] .blog-hero .subtitle { color: #8FA7B2; }
[data-bs-theme="dark"] .search-card { background: #0D2B36; box-shadow: 0 2px 16px rgba(0,0,0,.3); }
[data-bs-theme="dark"] .search-card input { color: #e8f0f4; }
[data-bs-theme="dark"] .search-card input::placeholder { color: #597380; }
[data-bs-theme="dark"] .search-card i { color: #597380; }
[data-bs-theme="dark"] .blog-intro-block { background: #0D2B36; color: #8FA7B2; }
[data-bs-theme="dark"] .section-head h2 { color: #e8f0f4; }
[data-bs-theme="dark"] .featured-card { background: #0D2B36; box-shadow: 0 4px 24px rgba(0,0,0,.4); }
[data-bs-theme="dark"] .featured-card h2 { color: #e8f0f4; }
[data-bs-theme="dark"] .feat-excerpt { color: #8FA7B2; }
[data-bs-theme="dark"] .blog-panel { background: #0D2B36; box-shadow: 0 4px 24px rgba(0,0,0,.4); }
[data-bs-theme="dark"] .blog-panel-head { border-bottom-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .blog-panel-head i { color: #8FA7B2; }
[data-bs-theme="dark"] .blog-panel-head h3 { color: #e8f0f4; }
[data-bs-theme="dark"] .blog-tabs { background: rgba(255,255,255,.04); }
[data-bs-theme="dark"] .blog-tab { color: #597380; }
[data-bs-theme="dark"] .blog-tab:hover { color: #8FA7B2; }
[data-bs-theme="dark"] .blog-tab.active { background: #0D2B36; color: var(--smm-primary); box-shadow: 0 2px 10px rgba(0,0,0,.3); }
[data-bs-theme="dark"] .blog-card { background: rgba(13,43,54,.55); border-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .blog-card h3 { color: #e8f0f4; }
[data-bs-theme="dark"] .blog-card-excerpt { color: #8FA7B2; }
[data-bs-theme="dark"] .card-chip.chip-tt { color: #e8f0f4; }

/* ─── Responsive ─── */
@media (max-width: 991px) {
  .blog-hero { padding: 44px 0 36px; }
  .blog-hero h1 { font-size: 30px; }
}
@media (max-width: 768px) {
  .featured-card { grid-template-columns: 1fr; }
  .featured-card .feat-img { min-height: 200px; }
  .featured-card .feat-body { padding: 24px 20px; }
  .featured-card h2 { font-size: 18px; }
  .blog-panel-body { padding: 16px; }
}
@media (max-width: 575px) {
  .blog-hero h1 { font-size: 24px; }
  .blog-hero .subtitle { font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════
   BLOG POST PAGE  (guest)
   ═══════════════════════════════════════════════════════ */

.post-section   { background: var(--smm-bg); padding: 20px 0 64px; }
.related-section { background: var(--smm-bg); padding: 0 0 64px; }

/* ─── Return button ─── */
.btn-return {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #4a5568;
  background: #fff;
  border: 1px solid #e4eaf5;
  border-radius: 8px;
  padding: 8px 16px;
  margin-bottom: 18px;
  text-decoration: none;
  transition: color .2s, border-color .2s, background .2s;
}
.btn-return:hover { color: var(--smm-primary); border-color: var(--smm-primary); background: rgba(0,202,243,.04); }

/* ─── Article card ─── */
.article-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(30,45,74,.09);
  padding: 36px;
  margin-bottom: 32px;
}
.article-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 32px;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #9da8b8;
}
.meta-chip i { font-size: 13px; }
.meta-platform {
  background: rgba(0,202,243,.1);
  color: var(--smm-primary);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
}
.article-title {
  font-size: 26px;
  font-weight: 800;
  color: #1e2d4a;
  line-height: 1.28;
  margin: 0;
}
.cover-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  color: rgba(255,255,255,.5);
}
.cover-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ci-cover { background: var(--smm-gradient); }
.article-divider {
  border: none;
  border-top: 1px solid #e8edf5;
  margin: 0 0 28px;
}

/* ─── Post body typography ─── */
.post-body {
  font-size: 15px;
  line-height: 1.75;
  color: #526878;
  font-family: 'Inter', 'Inter Fallback', 'Vazirmatn', 'Tajawal', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif;
}
.post-body p  { margin-bottom: 16px; }
.post-body h2 {
  font-weight: 700;
  font-size: 21px;
  color: #1e2d4a;
  margin: 32px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #f0f4fb;
}
.post-body h3 { font-weight: 700; font-size: 17px; color: #1e2d4a; margin: 22px 0 10px; }
.post-body ul,
.post-body ol  { padding-left: 22px; margin-bottom: 16px; }
.post-body li  { margin-bottom: 6px; }
.post-body strong { color: #1e2d4a; }
.post-body img { max-width: 100%; border-radius: 12px; margin: 20px 0; }
.post-body blockquote {
  border-left: 3px solid var(--smm-primary);
  padding: 10px 18px;
  background: rgba(0,202,243,.05);
  border-radius: 0 10px 10px 0;
  margin: 20px 0;
  color: #526878;
  font-style: italic;
  font-size: 15px;
}

/* ─── Two-column list box ─── */
.list-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  background: #f8fafd;
  border: 1px solid #e8edf5;
  border-radius: 14px;
  padding: 22px;
  margin: 20px 0;
}
.list-split h3 { font-size: 15px; font-weight: 700; color: #1e2d4a; margin-bottom: 10px; }
.list-split ul  { padding-left: 18px; margin: 0; }
.list-split li  { font-size: 13px; color: #526878; margin-bottom: 5px; }

/* ─── Dark mode ─── */
[data-bs-theme="dark"] .post-section,
[data-bs-theme="dark"] .related-section    { background: #001C26; }
[data-bs-theme="dark"] .btn-return         { background: #0D2B36; border-color: rgba(255,255,255,.08); color: #8FA7B2; }
[data-bs-theme="dark"] .btn-return:hover   { color: var(--smm-primary); border-color: var(--smm-primary); }
[data-bs-theme="dark"] .article-card       { background: #0D2B36; box-shadow: 0 4px 24px rgba(0,0,0,.4); }
[data-bs-theme="dark"] .article-title      { color: #e8f0f4; }
[data-bs-theme="dark"] .meta-chip          { color: #597380; }
[data-bs-theme="dark"] .article-divider    { border-top-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .post-body          { color: #8FA7B2; }
[data-bs-theme="dark"] .post-body h2       { color: #e8f0f4; border-bottom-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .post-body h3       { color: #e8f0f4; }
[data-bs-theme="dark"] .post-body strong   { color: #e8f0f4; }
[data-bs-theme="dark"] .post-body blockquote { background: rgba(0,202,243,.07); color: #8FA7B2; }
[data-bs-theme="dark"] .list-split         { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .list-split h3      { color: #e8f0f4; }
[data-bs-theme="dark"] .list-split li      { color: #8FA7B2; }

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .article-header { grid-template-columns: 1fr; }
  .article-card   { padding: 22px; }
  .article-title  { font-size: 20px; }
  .list-split     { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .article-card { padding: 16px; }
  .post-body h2 { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════
   Free Telegram Post Views  (ft-*)
═══════════════════════════════════════════════════ */

/* ─── Hero ─── */
.ft-hero {
  background: linear-gradient(135deg, #020617 0%, #0f172a 22%, #172554 55%, #312e81 100%);
  padding: 72px 0;
  overflow: hidden;
  position: relative;
}
.ft-hero::before,
.ft-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .28;
  pointer-events: none;
}
.ft-hero::before { width: 300px; height: 300px; background: #22d3ee; top: -40px; left: -40px; }
.ft-hero::after  { width: 320px; height: 320px; background: #d946ef; bottom: -60px; right: -60px; }

.ft-hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 18px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
  backdrop-filter: blur(6px);
}
.ft-hero-title {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 20px;
}
.ft-hero-text { color: #bfdbfe; font-size: 16px; line-height: 1.8; }
.ft-cyan-text    { color: #67e8f9 !important; }
.ft-blue100-text { color: #dbeafe !important; font-style: italic; }
.ft-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.ft-btn-primary {
  padding: 12px 28px;
  border-radius: 14px;
  background: linear-gradient(135deg, #22d3ee, #0ea5e9, #3b82f6);
  color: #0f172a;
  font-weight: 800;
  font-size: 15px;
  border: none;
  transition: transform .2s, box-shadow .2s;
}
.ft-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(34,211,238,.3); color: #0f172a; }

.ft-btn-ghost {
  padding: 12px 28px;
  border-radius: 14px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  backdrop-filter: blur(4px);
  transition: background .2s;
}
.ft-btn-ghost:hover { background: rgba(255,255,255,.18); color: #fff; }

/* Hero Right Panel */
.ft-hero-right {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 24px;
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.ft-hero-right-title { color: #fff; font-size: 20px; font-weight: 800; margin-bottom: 16px; }

.ft-feat-list { display: flex; flex-direction: column; gap: 12px; }
.ft-feat-item { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); }
.ft-feat-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.ft-feat-title { color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.ft-feat-desc  { color: #bfdbfe; font-size: 13px; line-height: 1.6; }

/* Bonus box */
.ft-bonus-wrap {
  margin-top: 16px;
  padding: 1px;
  border-radius: 20px;
  background: linear-gradient(135deg, #34d399, #a3e635, #22c55e);
}
.ft-bonus-inner {
  background: rgba(15,23,42,.88);
  border-radius: 19px;
  padding: 16px 18px;
}
.ft-bonus-title  { color: #fff; font-weight: 700; font-size: 15px; }
.ft-bonus-credit { color: #6ee7b7; font-size: 22px; font-weight: 800; margin: 4px 0; }
.ft-bonus-sub    { color: #bfdbfe; font-size: 13px; line-height: 1.6; }

/* ─── Form Section ─── */
.ft-form-section {
  padding: 56px 0;
  background: var(--smm-bg);
}
[data-bs-theme="dark"] .ft-form-section { background: var(--smm-bg); }

.ft-claim-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.ft-claim-head h2 {
  font-size: 28px;
  font-weight: 900;
  margin: 0;
  color: var(--smm-ink);
}
.ft-free-badge {
  padding: 4px 16px;
  border-radius: 50px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.ft-form-card {
  background: var(--smm-surface);
  border: 1px solid var(--smm-border);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.ft-form-label {
  font-weight: 600;
  color: var(--smm-ink);
  font-size: 15px;
  margin-bottom: 8px;
  display: block;
}
.ft-form-input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--smm-border);
  background: var(--smm-bg);
  color: var(--smm-ink);
  font-size: 15px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.ft-form-input:focus { border-color: var(--smm-primary); box-shadow: 0 0 0 3px rgba(0,202,243,.15); }
.ft-form-hint { font-size: 13px; color: var(--smm-ink-3); margin-top: 6px; }

.ft-btn-claim {
  padding: 14px 24px;
  border-radius: 12px;
  background: var(--smm-gradient);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  border: none;
  transition: opacity .2s, transform .2s;
}
.ft-btn-claim:hover { opacity: .9; transform: translateY(-1px); color: #fff; }

/* Gift Card */
.ft-gift-card {
  background: var(--smm-surface);
  border: 1px solid var(--smm-border);
  border-radius: 20px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  height: 100%;
}
.ft-gift-icon   { font-size: 40px; margin-bottom: 10px; }
.ft-gift-title  { font-size: 18px; font-weight: 700; color: var(--smm-ink); margin-bottom: 6px; }
.ft-gift-amount { font-size: 22px; font-weight: 800; color: var(--smm-accent); margin-bottom: 10px; }
.ft-gift-note   { font-size: 13px; color: var(--smm-ink-2); margin-bottom: 6px; }
.ft-gift-wallet { font-size: 13px; color: var(--smm-ink-3); line-height: 1.6; }

.ft-btn-services {
  padding: 10px 20px;
  border-radius: 12px;
  background: var(--smm-ink);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border: none;
  transition: opacity .2s;
}
.ft-btn-services:hover { opacity: .85; color: #fff; }
[data-bs-theme="dark"] .ft-btn-services { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); }

/* Response box */
.ft-response-box { border-radius: 14px; padding: 16px; font-size: 14px; line-height: 1.7; }
.ft-resp-loading { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a5f; }
.ft-resp-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.ft-resp-error   { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
[data-bs-theme="dark"] .ft-resp-loading { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.3); color: #93c5fd; }
[data-bs-theme="dark"] .ft-resp-success { background: rgba(34,197,94,.1);  border-color: rgba(34,197,94,.3);  color: #86efac; }
[data-bs-theme="dark"] .ft-resp-error   { background: rgba(239,68,68,.1);  border-color: rgba(239,68,68,.3);  color: #fca5a5; }

/* ─── Content Sections ─── */
.ft-content-section { padding: 0 0 56px; }
.ft-content-section .container { display: flex; flex-direction: column; }

.ft-card {
  background: var(--smm-surface);
  border: 1px solid var(--smm-border);
  border-radius: 20px;
  padding: 28px 32px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.ft-card-blue   { background: linear-gradient(135deg, #eff6ff, #fff, #eef2ff); border-color: #dbeafe; }
.ft-card-emerald{ background: linear-gradient(135deg, #f0fdf4, #fff, #f0fdfa); border-color: #bbf7d0; }
.ft-card-violet { background: linear-gradient(135deg, #f5f3ff, #fff, #faf5ff); border-color: #e9d5ff; }
.ft-card-amber  { background: linear-gradient(135deg, #fffbeb, #fff, #fefce8); border-color: #fde68a; }
.ft-card-purple { background: linear-gradient(135deg, #fdf4ff, #fff, #fdf2ff); border-color: #e9d5ff; }
.ft-card-sky    { background: linear-gradient(135deg, #f0f9ff, #fff, #ecfeff); border-color: #bae6fd; }
.ft-card-upgrade{ background: var(--smm-gradient); border: none; }
[data-bs-theme="dark"] .ft-card        { background: #1a2233; border-color: #2a3347; }
[data-bs-theme="dark"] .ft-card-blue   { background: linear-gradient(135deg,rgba(30,58,138,.3),#1a2233); border-color: rgba(59,130,246,.25); }
[data-bs-theme="dark"] .ft-card-emerald{ background: linear-gradient(135deg,rgba(6,78,59,.3),#1a2233); border-color: rgba(34,197,94,.2); }
[data-bs-theme="dark"] .ft-card-violet { background: linear-gradient(135deg,rgba(46,16,101,.3),#1a2233); border-color: rgba(139,92,246,.2); }
[data-bs-theme="dark"] .ft-card-amber  { background: linear-gradient(135deg,rgba(120,53,15,.3),#1a2233); border-color: rgba(245,158,11,.2); }
[data-bs-theme="dark"] .ft-card-purple { background: linear-gradient(135deg,rgba(74,4,78,.3),#1a2233); border-color: rgba(168,85,247,.2); }
[data-bs-theme="dark"] .ft-card-sky    { background: linear-gradient(135deg,rgba(7,89,133,.3),#1a2233); border-color: rgba(14,165,233,.2); }
[data-bs-theme="dark"] .ft-card-upgrade{ background: var(--smm-gradient); }

.ft-card-title { font-size: 22px; font-weight: 800; color: var(--smm-ink); margin-bottom: 14px; }
.ft-card-upgrade .ft-card-title { color: #fff; }
[data-bs-theme="dark"] .ft-card-title  { color: var(--smm-ink); }
.ft-card-text { font-size: 15px; color: var(--smm-ink-2); line-height: 1.8; }
.ft-card-text p { margin-bottom: 10px; }
.ft-card-upgrade .ft-card-text { color: rgba(255,255,255,.9); }

/* Info cards (3-col) */
.ft-info-card {
  background: var(--smm-surface);
  border: 1px solid var(--smm-border);
  border-radius: 14px;
  padding: 16px 18px;
  height: 100%;
}
.ft-info-card h3     { font-size: 15px; font-weight: 700; color: var(--smm-ink); margin-bottom: 6px; }
.ft-info-card p      { font-size: 13px; color: var(--smm-ink-2); line-height: 1.65; margin: 0; }
.ft-info-card-emerald{ border-color: #bbf7d0; }
.ft-info-card-amber  { border-color: #fde68a; }
.ft-info-card-purple { border-color: #e9d5ff; }
[data-bs-theme="dark"] .ft-info-card   { background: #212d42; border-color: #2a3347; }
[data-bs-theme="dark"] .ft-info-card-emerald{ border-color: rgba(34,197,94,.35); }
[data-bs-theme="dark"] .ft-info-card-amber  { border-color: rgba(251,191,36,.35); }
[data-bs-theme="dark"] .ft-info-card-purple { border-color: rgba(168,85,247,.35); }

/* Steps */
.ft-step {
  background: var(--smm-surface);
  border: 1px solid var(--smm-border);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  height: 100%;
}
.ft-step-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--smm-gradient);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.ft-step p { font-size: 14px; color: var(--smm-ink-2); font-weight: 600; margin: 0; }
[data-bs-theme="dark"] .ft-step { background: #212d42; border-color: #2a3347; }

/* Compare tables */
.ft-compare-table { border-radius: 12px; overflow: hidden; margin: 0; font-size: 14px; }
.ft-compare-table thead tr { color: #fff; }
.ft-compare-table th, .ft-compare-table td { padding: 12px 18px; }
.ft-compare-table tbody tr:nth-child(even) { background: rgba(0,0,0,.03); }
.ft-table-blue   thead tr { background: linear-gradient(135deg, #2563eb, #4f46e5); }
.ft-table-violet thead tr { background: linear-gradient(135deg, #7c3aed, #9333ea); }
.ft-table-dark   thead tr { background: linear-gradient(135deg, #374151, #111827); }
[data-bs-theme="dark"] .ft-compare-table tbody tr { background: #1a2233; }
[data-bs-theme="dark"] .ft-compare-table tbody tr:nth-child(even) { background: #212d42; }
[data-bs-theme="dark"] .ft-compare-table td { color: var(--smm-ink-2); border-color: #2a3347; }

/* Explore tools */
.ft-tool-card {
  background: var(--smm-surface);
  border: 1px solid #bae6fd;
  border-radius: 14px;
  padding: 18px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.ft-tool-card h3 { font-size: 15px; font-weight: 700; color: var(--smm-ink); margin-bottom: 6px; }
.ft-tool-card p  { font-size: 13px; color: var(--smm-ink-2); line-height: 1.6; flex: 1; }
.ft-btn-tool {
  padding: 8px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--smm-primary), #0ea5e9);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border: none;
  transition: opacity .2s;
}
.ft-btn-tool:hover { opacity: .88; color: #fff; }
[data-bs-theme="dark"] .ft-tool-card { background: #212d42; border-color: rgba(14,165,233,.25); }

/* Upgrade button */
.ft-btn-upgrade {
  padding: 12px 28px;
  border-radius: 12px;
  background: #fff;
  color: var(--smm-accent);
  font-weight: 700;
  font-size: 15px;
  border: none;
  transition: background .2s;
}
.ft-btn-upgrade:hover { background: #f0f9ff; color: var(--smm-accent); }

/* Link arrow */
.ft-link-arrow { color: var(--smm-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
.ft-link-arrow:hover { color: var(--smm-primary); }

/* ─── FAQ ─── */
.ft-faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.ft-faq-item { border: 1px solid var(--smm-border); border-radius: 12px; overflow: hidden; }
.ft-faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--smm-ink);
  gap: 10px;
  user-select: none;
}
.ft-faq-q .bi { transition: transform .3s; flex-shrink: 0; }
.ft-faq-q.ft-faq-open .bi { transform: rotate(180deg); }
.ft-faq-a { padding: 0 18px 14px; font-size: 14px; color: var(--smm-ink-2); line-height: 1.7; }
[data-bs-theme="dark"] .ft-faq-item { border-color: #2a3347; }
[data-bs-theme="dark"] .ft-faq-q    { color: var(--smm-ink); }

/* ─── Final CTA ─── */
.ft-cta-banner {
  background: var(--smm-gradient);
  border-radius: 20px;
  padding: 48px 40px;
  text-align: center;
  color: #fff;
  margin-bottom: 8px;
}
.ft-cta-banner h2 { font-size: 26px; font-weight: 900; margin-bottom: 12px; }
.ft-cta-banner p  { font-size: 15px; color: rgba(255,255,255,.88); max-width: 640px; margin: 0 auto 24px; line-height: 1.7; }
.ft-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.ft-btn-cta-white {
  padding: 12px 28px;
  border-radius: 12px;
  background: #fff;
  color: var(--smm-accent);
  font-weight: 700;
  font-size: 15px;
  border: none;
  transition: background .2s;
}
.ft-btn-cta-white:hover { background: #f0f9ff; color: var(--smm-accent); }
.ft-btn-cta-outline {
  padding: 12px 28px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  transition: background .2s;
}
.ft-btn-cta-outline:hover { background: rgba(255,255,255,.2); color: #fff; }

/* ─── Responsive ─── */
@media (max-width: 991px) {
  .ft-hero { padding: 52px 0; }
  .ft-form-section { padding: 40px 0; }
}
@media (max-width: 767px) {
  .ft-hero { padding: 40px 0; }
  .ft-hero-title { font-size: 26px; }
  .ft-card { padding: 20px; }
  .ft-cta-banner { padding: 32px 20px; }
  .ft-cta-banner h2 { font-size: 20px; }
  .ft-form-card { padding: 20px; }
  .ft-gift-card { margin-top: 4px; }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* ─── Shared layout container (guest pages) ─── */
.smm-container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 24px;
}
@media (min-width: 1200px) { .smm-container { padding-inline: 0; } }

/* ─── Hero ─── */
.smm-hero {
  background: linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)),
              linear-gradient(135deg, #797AF2 0%, #00CAF3 100%);
  padding: 77px 24px;
  text-align: center;
  overflow: hidden;
}
[data-bs-theme="dark"] .smm-hero {
  background: linear-gradient(rgba(0,28,38,0.55), rgba(0,28,38,0.55)),
              linear-gradient(135deg, #797AF2 0%, #00CAF3 100%);
}
.smm-hero h1 {
  font-weight: 700;
  font-size: 48px;
  color: var(--smm-ink);
  line-height: 1.1;
  margin: 0;
}
[data-bs-theme="dark"] .smm-hero h1 { color: #fff; }
.smm-hero .subtitle {
  color: var(--smm-ink-2);
  font-weight: 500;
  font-size: 16px;
}
[data-bs-theme="dark"] .smm-hero .subtitle { color: rgba(255,255,255,.75); }
@media (max-width: 767px) {
  .smm-hero { padding: 52px 20px; }
  .smm-hero h1 { font-size: 30px; }
}

/* ─── Eyebrow label ─── */
.smm-eyebrow {
  font-weight: 700;
  font-size: 16px;
  color: var(--smm-primary);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 10px;
}

/* ─── Section heading ─── */
.section-h2 {
  font-weight: 700;
  font-size: 40px;
  color: var(--smm-ink);
  line-height: 1.05;
}
[data-bs-theme="dark"] .section-h2 { color: #fff; }
@media (max-width: 767px) { .section-h2 { font-size: 28px; } }

/* ─── Stats row ─── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 20px 0;
}
@media (max-width: 768px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }

.smm-stat { text-align: center; }
.smm-stat .icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  color: var(--smm-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--smm-primary);
  border-radius: 50%;
  background: var(--smm-bg);
}
[data-bs-theme="dark"] .smm-stat .icon { background: rgba(255,255,255,.02); }
.smm-stat .num {
  font-weight: 700;
  font-size: 48px;
  color: var(--smm-primary);
  line-height: 1;
}
.smm-stat .label {
  font-weight: 700;
  font-size: 16px;
  color: var(--smm-ink-2);
  margin-top: 6px;
}
[data-bs-theme="dark"] .smm-stat .label { color: rgba(255,255,255,.6); }

/* ─── Value cards ─── */
.smm-value-card {
  background: var(--smm-surface);
  border-radius: 24px;
  padding: 28px;
  display: flex;
  gap: 18px;
  border: 1px solid var(--smm-border);
  height: 100%;
}
[data-bs-theme="dark"] .smm-value-card {
  background: rgba(13,43,54,.55);
  border-color: rgba(255,255,255,.06);
}
.smm-value-card .ico {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 50px;
}
.smm-value-card h3 {
  font-weight: 700;
  font-size: 18px;
  color: var(--smm-ink);
  margin-bottom: 6px;
}
[data-bs-theme="dark"] .smm-value-card h3 { color: #fff; }
.smm-value-card p {
  color: var(--smm-ink-2);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

/* ─── Check list ─── */
.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.check-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--smm-ink-2);
  font-weight: 700;
  font-size: 16px;
}
[data-bs-theme="dark"] .check-list li { color: rgba(255,255,255,.7); }
.check-list li::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(102,204,0,.15);
  flex: 0 0 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2366CC00'%3E%3Cpath d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 1 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
@media (max-width: 991px) { .check-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .check-list { grid-template-columns: 1fr; } }

/* ============================================================
   CONTACT PAGE
   ============================================================ */

.contact-card {
  background: var(--smm-surface-soft);
  border: 1px solid var(--smm-border);
  border-radius: 24px;
  padding: 26px;
  display: flex;
  gap: 18px;
  align-items: center;
  box-shadow: var(--smm-shadow-card);
  transition: transform .2s;
}
[data-bs-theme="dark"] .contact-card {
  background: rgba(13,43,54,.55);
  border-color: rgba(255,255,255,.06);
}
.contact-card:hover { transform: translateY(-2px); }
.contact-card .ico {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 60px;
  color: #fff;
  box-shadow: 0 10px 20px rgba(2,202,243,.18);
}
.contact-card h5 { margin: 0 0 4px; font-weight: 700; font-size: 18px; color: var(--smm-ink); }
[data-bs-theme="dark"] .contact-card h5 { color: #fff; }
.contact-card a { color: var(--smm-primary); font-weight: 700; font-size: 14px; text-decoration: none; }
.contact-card a:hover { text-decoration: underline; }

/* Signin page reuses .contact-card but as a vertical list — restore block layout */
.contact-section .contact-card { display: block; }

.ticket-card {
  background: var(--smm-surface-soft);
  border: 1px solid var(--smm-border);
  border-radius: 24px;
  padding: 34px;
  text-align: center;
  box-shadow: var(--smm-shadow-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
}
[data-bs-theme="dark"] .ticket-card {
  background: rgba(13,43,54,.55);
  border-color: rgba(255,255,255,.06);
}
.ticket-card .icon-circle {
  width: 96px;
  height: 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--smm-ink);
  opacity: .6;
}
[data-bs-theme="dark"] .ticket-card .icon-circle { color: #fff; opacity: .4; }
.ticket-card h3 { font-weight: 700; font-size: 22px; color: var(--smm-ink); margin: 0; }
[data-bs-theme="dark"] .ticket-card h3 { color: #fff; }
.ticket-card p { color: var(--smm-ink-2); font-size: 15px; line-height: 1.55; margin: 0; max-width: 640px; }

.btn-smm {
  display: inline-block;
  background: var(--smm-primary);
  border: 0;
  color: #fff;
  font-weight: 700;
  padding: 14px 30px;
  border-radius: 12px;
  box-shadow: var(--smm-shadow-btn);
  transition: transform .15s, background .2s;
  text-decoration: none;
  text-align: center;
}
.btn-smm:hover { background: #00B5D9; color: #fff; transform: translateY(-1px); }

/* ============================================================
   FAQ PAGE  (fq-*)
   ============================================================ */

/* ─── Hero ─── */
.fq-hero {
  background: linear-gradient(135deg, rgba(121,122,242,.07) 0%, rgba(0,202,243,.07) 100%);
  padding: 64px 0 56px;
  text-align: center;
}
[data-bs-theme="dark"] .fq-hero {
  background: linear-gradient(135deg, rgba(121,122,242,.12) 0%, rgba(0,202,243,.08) 100%);
}
.fq-hero-sub {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px;
  background: var(--smm-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.fq-hero-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  color: var(--smm-ink);
  line-height: 1.1;
  margin: 0 0 16px;
}
[data-bs-theme="dark"] .fq-hero-title { color: #fff; }
.fq-hero-badge {
  display: inline-block;
  background: var(--smm-gradient);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 16px;
  border-radius: 50px;
  letter-spacing: .03em;
}

/* ─── FAQ section ─── */
.fq-section {
  padding: 48px 0 56px;
  background: var(--smm-bg);
}
[data-bs-theme="dark"] .fq-section { background: var(--smm-bg); }

.fq-list {
  background: var(--smm-surface);
  border-radius: 20px;
  border: 1px solid var(--smm-border);
  overflow: hidden;
  max-width: 860px;
  margin-inline: auto;
}
[data-bs-theme="dark"] .fq-list {
  background: rgba(13,43,54,.6);
  border-color: rgba(255,255,255,.06);
}

.fq-item { border-bottom: 1px solid var(--smm-border); }
[data-bs-theme="dark"] .fq-item { border-color: rgba(255,255,255,.06); }
.fq-item:last-child { border-bottom: none; }

.fq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: var(--smm-ink);
  transition: color .2s;
}
[data-bs-theme="dark"] .fq-q { color: rgba(255,255,255,.9); }
.fq-q:hover { color: var(--smm-primary); }
.fq-q[aria-expanded="true"] { color: var(--smm-primary); }

.fq-chevron {
  flex: 0 0 20px;
  color: var(--smm-ink-3);
  transition: transform .3s cubic-bezier(.4,0,.2,1), color .2s;
}
.fq-q[aria-expanded="true"] .fq-chevron {
  transform: rotate(180deg);
  color: var(--smm-primary);
}

/* ─── Answer ─── */
.fq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1);
}
.fq-a.fq-open { max-height: 600px; }
.fq-a-inner {
  padding: 0 28px 20px 28px;
  color: var(--smm-ink-2);
  font-size: 14px;
  line-height: 1.7;
  background: rgba(0,202,243,.04);
  margin: 0 12px 12px;
  border-radius: 12px;
  padding: 16px 20px;
}
[data-bs-theme="dark"] .fq-a-inner {
  background: rgba(0,202,243,.06);
  color: rgba(255,255,255,.65);
}

/* ─── Contact CTA ─── */
.fq-contact-section {
  padding: 0 0 64px;
  background: var(--smm-bg);
}
.fq-contact-card {
  max-width: 860px;
  margin-inline: auto;
  background: var(--smm-gradient);
  border-radius: 20px;
  padding: 48px 40px;
  color: #fff;
}
.fq-contact-icon {
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: #fff;
}
.fq-contact-title {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
}
.fq-contact-desc {
  font-size: 15px;
  color: rgba(255,255,255,.85);
  margin-bottom: 24px;
  max-width: 520px;
  margin-inline: auto;
}
.fq-contact-btn {
  display: inline-block;
  background: #fff;
  color: var(--smm-accent);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 32px;
  border-radius: 50px;
  text-decoration: none;
  transition: opacity .2s, transform .2s;
}
.fq-contact-btn:hover { opacity: .92; transform: translateY(-1px); color: var(--smm-accent); }

/* ─── Responsive ─── */
@media (max-width: 767px) {
  .fq-hero { padding: 44px 0 36px; }
  .fq-q { padding: 16px 20px; font-size: 14px; }
  .fq-a-inner { margin: 0 8px 10px; }
  .fq-contact-card { padding: 36px 24px; }
  .fq-contact-title { font-size: 22px; }
}

/* ═══════════════════════════════════════════════════
   TERMS OF SERVICE PAGE
═══════════════════════════════════════════════════ */

/* ─── Hero ─── */
.tos-hero {
  padding: 72px 0 52px;
  background: var(--smm-bg);
  text-align: center;
}
[data-bs-theme="dark"] .tos-hero {
  background: #121820;
}
.tos-hero-icon {
  width: 72px;
  height: 72px;
  background: var(--smm-gradient);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: #fff;
  box-shadow: 0 8px 24px rgba(121,122,242,.35);
}
.tos-hero-title {
  font-size: 42px;
  font-weight: 800;
  color: var(--smm-ink);
  line-height: 1.2;
  margin-bottom: 16px;
}
[data-bs-theme="dark"] .tos-hero-title { color: rgba(255,255,255,.95); }
.tos-gradient-text {
  background: var(--smm-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tos-hero-sub {
  font-size: 16px;
  color: var(--smm-ink-2);
  max-width: 600px;
  margin: 0 auto 24px;
  line-height: 1.7;
}
[data-bs-theme="dark"] .tos-hero-sub { color: rgba(255,255,255,.55); }
.tos-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}
.tos-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background: var(--smm-surface);
  border: 1px solid var(--smm-border);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  color: var(--smm-ink);
}
[data-bs-theme="dark"] .tos-badge {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
}
.tos-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tos-updated {
  font-size: 13px;
  color: var(--smm-ink-3);
  margin: 0;
}
[data-bs-theme="dark"] .tos-updated { color: rgba(255,255,255,.35); }

/* ─── Content layout ─── */
.tos-content-section {
  padding: 48px 0 80px;
  background: var(--smm-bg);
}
[data-bs-theme="dark"] .tos-content-section { background: #121820; }

/* ─── TOC ─── */
.tos-toc-wrap {
  position: sticky;
  top: 100px;
}
.tos-toc-card {
  background: var(--smm-surface);
  border: 1px solid var(--smm-border);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
}
[data-bs-theme="dark"] .tos-toc-card {
  background: #1c2533;
  border-color: rgba(255,255,255,.08);
}
.tos-toc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.tos-toc-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--smm-ink);
  margin: 0 0 2px;
}
[data-bs-theme="dark"] .tos-toc-title { color: rgba(255,255,255,.9); }
.tos-toc-hint {
  font-size: 12px;
  color: var(--smm-ink-3);
  margin: 0;
}
[data-bs-theme="dark"] .tos-toc-hint { color: rgba(255,255,255,.35); }
.tos-toc-icon {
  width: 40px;
  height: 40px;
  background: var(--smm-gradient);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.tos-toc-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
}
.tos-toc-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.tos-toc-link:hover {
  background: rgba(0,202,243,.07);
  border-color: rgba(0,202,243,.2);
}
[data-bs-theme="dark"] .tos-toc-link:hover {
  background: rgba(0,202,243,.1);
  border-color: rgba(0,202,243,.2);
}
.tos-toc-link-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--smm-ink);
  flex: 1;
  line-height: 1.4;
  transition: color .15s;
}
[data-bs-theme="dark"] .tos-toc-link-text { color: rgba(255,255,255,.75); }
.tos-toc-link:hover .tos-toc-link-text { color: var(--smm-primary); }
.tos-toc-arrow {
  color: var(--smm-ink-3);
  flex-shrink: 0;
  transition: color .15s;
}
.tos-toc-link:hover .tos-toc-arrow { color: var(--smm-primary); }
.tos-toc-arrow.rotate-180 { transform: rotate(180deg); }

/* ─── TOC note ─── */
.tos-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #FFF8EB;
  border: 1.5px solid #FFCF6B;
  border-radius: 14px;
  padding: 16px;
}
[data-bs-theme="dark"] .tos-note {
  background: rgba(255,170,0,.08);
  border-color: rgba(255,170,0,.25);
}
.tos-note-icon {
  width: 36px;
  height: 36px;
  background: #FFAA00;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.tos-note-title {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #8B5E00;
  margin-bottom: 4px;
}
[data-bs-theme="dark"] .tos-note-title { color: #FFD060; }
.tos-note-text {
  font-size: 12px;
  color: #8B5E00;
  line-height: 1.6;
  margin: 0;
}
[data-bs-theme="dark"] .tos-note-text { color: rgba(255,208,96,.75); }

/* ─── Sections card ─── */
.tos-sections-card {
  background: var(--smm-surface);
  border: 1px solid var(--smm-border);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 2px 20px rgba(0,0,0,.07);
}
[data-bs-theme="dark"] .tos-sections-card {
  background: #1c2533;
  border-color: rgba(255,255,255,.08);
}
.tos-section { scroll-margin-top: 90px; }
.tos-section-divider {
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--smm-border);
}
[data-bs-theme="dark"] .tos-section-divider { border-color: rgba(255,255,255,.08); }
.tos-section-inner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.tos-section-num {
  width: 40px;
  height: 40px;
  background: var(--smm-gradient);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 4px 12px rgba(121,122,242,.3);
}
.tos-section-body { flex: 1; }
.tos-section-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--smm-ink);
  margin-bottom: 10px;
}
[data-bs-theme="dark"] .tos-section-title { color: rgba(255,255,255,.9); }
.tos-section-text {
  font-size: 14px;
  color: var(--smm-ink-2);
  line-height: 1.75;
  margin: 0;
}
[data-bs-theme="dark"] .tos-section-text { color: rgba(255,255,255,.55); }
.tos-section-text strong { color: var(--smm-ink); font-weight: 700; }
[data-bs-theme="dark"] .tos-section-text strong { color: rgba(255,255,255,.85); }

/* ─── Back to top ─── */
.tos-back-wrap { padding-top: 8px; }
.tos-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  background: var(--smm-gradient);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(121,122,242,.35);
  transition: opacity .2s, transform .2s;
}
.tos-back-btn:hover {
  opacity: .9;
  transform: translateY(-1px);
  color: #fff;
}

/* ─── Responsive ─── */
@media (max-width: 991px) {
  .tos-toc-wrap { position: static; }
}
@media (max-width: 767px) {
  .tos-hero { padding: 48px 0 36px; }
  .tos-hero-title { font-size: 30px; }
  .tos-sections-card { padding: 20px 16px; }
  .tos-section-num { width: 34px; height: 34px; font-size: 13px; }
  .tos-section-title { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════
   CONFIRM EMAIL PAGE
═══════════════════════════════════════════════════ */

.ce-card { text-align: center; }

.ce-icon-wrap {
  width: 72px;
  height: 72px;
  background: var(--smm-gradient);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: #fff;
  box-shadow: 0 8px 24px rgba(121,122,242,.35);
}

.ce-desc {
  color: var(--smm-ink-2);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 28px;
}
[data-bs-theme="dark"] .ce-desc { color: rgba(255,255,255,.55); }
.ce-desc p { margin-bottom: 6px; }
.ce-desc p:last-child { margin-bottom: 0; }
.ce-desc strong { color: var(--smm-ink); font-weight: 700; }
[data-bs-theme="dark"] .ce-desc strong { color: rgba(255,255,255,.85); }

.ce-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ce-change-btn {
  background: none;
  border: none;
  color: var(--smm-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .2s;
}
.ce-change-btn:hover { opacity: .75; }

/* ─── Modal ─── */
.ce-modal {
  border-radius: 20px;
  overflow: hidden;
  border: none;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
[data-bs-theme="dark"] .ce-modal {
  background: #1c2533;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.ce-modal-header {
  border-bottom: 1px solid var(--smm-border);
  padding: 20px 24px 16px;
}
[data-bs-theme="dark"] .ce-modal-header { border-color: rgba(255,255,255,.08); }
.ce-modal-header .modal-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--smm-ink);
}
[data-bs-theme="dark"] .ce-modal-header .modal-title { color: rgba(255,255,255,.9); }
.ce-modal-body {
  padding: 24px;
}
.ce-modal-footer {
  border-top: 1px solid var(--smm-border);
  padding: 16px 24px;
  gap: 10px;
}
[data-bs-theme="dark"] .ce-modal-footer { border-color: rgba(255,255,255,.08); }
.ce-modal-cancel {
  background: none;
  border: 1.5px solid var(--smm-border);
  color: var(--smm-ink-2);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.ce-modal-cancel:hover {
  border-color: var(--smm-ink-3);
  color: var(--smm-ink);
}
[data-bs-theme="dark"] .ce-modal-cancel {
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.55);
}
[data-bs-theme="dark"] .ce-modal-cancel:hover {
  border-color: rgba(255,255,255,.25);
  color: rgba(255,255,255,.8);
}
.ce-modal-submit { flex: 1; }

/* ═══════════════════════════════════════════════════
   NOTIFICATIONS PAGE
═══════════════════════════════════════════════════ */

/* ─── Card shell ─── */
.notif-card {
  background: var(--smm-surface);
  border: 1px solid var(--smm-border);
  border-radius: var(--pp-radius-card);
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
[data-bs-theme="dark"] .notif-card {
  background: #1c2533;
  border-color: rgba(255,255,255,.08);
}

/* ─── Card header row ─── */
.notif-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.notif-table-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.notif-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.notif-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--smm-ink);
  margin: 0 0 4px;
}
[data-bs-theme="dark"] .notif-card-title { color: rgba(255,255,255,.9); }
.notif-card-desc {
  font-size: 13px;
  color: var(--smm-ink-2);
  margin: 0;
  line-height: 1.6;
}
[data-bs-theme="dark"] .notif-card-desc { color: rgba(255,255,255,.45); }

/* ─── Action buttons ─── */
.notif-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: opacity .2s, transform .2s;
}
.notif-action-btn:hover { opacity: .88; transform: translateY(-1px); }
.notif-action-primary {
  background: var(--smm-gradient);
  color: #fff;
  box-shadow: 0 4px 12px rgba(121,122,242,.3);
}
.notif-action-telegram {
  background: #29A8E0;
  color: #fff;
  box-shadow: 0 4px 12px rgba(41,168,224,.3);
}

/* ─── Preferences table ─── */
.notif-card-table { padding-bottom: 20px; }

.notif-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.notif-table thead th {
  padding: 10px 16px;
  font-weight: 700;
  font-size: 12px;
  color: var(--smm-ink-3);
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--smm-bg);
  border-bottom: 1px solid var(--smm-border);
  white-space: nowrap;
}
[data-bs-theme="dark"] .notif-table thead th {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.07);
  color: rgba(255,255,255,.35);
}
.notif-table thead th:first-child { border-radius: 10px 0 0 0; }
.notif-table thead th:last-child  { border-radius: 0 10px 0 0; }
.notif-table tbody tr {
  border-bottom: 1px solid var(--smm-border);
  transition: background .15s;
}
[data-bs-theme="dark"] .notif-table tbody tr { border-color: rgba(255,255,255,.06); }
.notif-table tbody tr:last-child { border-bottom: none; }
.notif-table tbody tr:hover { background: rgba(0,202,243,.04); }
[data-bs-theme="dark"] .notif-table tbody tr:hover { background: rgba(255,255,255,.03); }

.notif-name-cell {
  padding: 14px 16px;
  color: var(--smm-ink);
  font-weight: 500;
}
[data-bs-theme="dark"] .notif-name-cell { color: rgba(255,255,255,.8); }
.notif-check-cell {
  padding: 14px 16px;
  text-align: center;
}

.notif-sender-badge {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(121,122,242,.1);
  color: var(--smm-accent);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
[data-bs-theme="dark"] .notif-sender-badge {
  background: rgba(121,122,242,.2);
  color: #a9aaff;
}

/* ─── Toggle switch ─── */
.notif-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.notif-toggle-disabled { opacity: .4; cursor: not-allowed; }
.notif-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.notif-toggle-track {
  display: inline-block;
  width: 36px;
  height: 20px;
  background: var(--smm-border);
  border-radius: 20px;
  transition: background .2s;
  position: relative;
}
[data-bs-theme="dark"] .notif-toggle-track { background: rgba(255,255,255,.15); }
.notif-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s;
}
.notif-toggle-input:checked + .notif-toggle-track {
  background: var(--smm-gradient);
}
.notif-toggle-input:checked + .notif-toggle-track::after {
  transform: translateX(16px);
}

/* ─── Save row ─── */
.notif-save-row {
  padding-top: 20px;
  border-top: 1px solid var(--smm-border);
  margin-top: 4px;
}
[data-bs-theme="dark"] .notif-save-row { border-color: rgba(255,255,255,.08); }

/* ─── Responsive ─── */
@media (max-width: 767px) {
  .notif-card { padding: 18px 16px; }
  .notif-name-cell,
  .notif-check-cell { padding: 12px 12px; }
}

/* ═══════════════════════════════════════════════════
   PRIVACY POLICY PAGE
═══════════════════════════════════════════════════ */

/* ─── Hero banner ─── */
.pp-hero {
  padding: 52px 0 40px;
  background: var(--smm-bg);
}
[data-bs-theme="dark"] .pp-hero { background: #121820; }

.pp-hero-banner {
  background: var(--smm-gradient);
  border-radius: 20px;
  padding: 36px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  box-shadow: 0 12px 40px rgba(121,122,242,.35);
}
.pp-hero-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.pp-hero-icon {
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,.2);
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.pp-hero-title {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
  line-height: 1.2;
}
.pp-hero-sub {
  font-size: 15px;
  color: rgba(255,255,255,.85);
  margin: 0;
}
.pp-hero-meta {
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 14px;
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.pp-hero-meta-label {
  font-size: 12px;
  color: rgba(255,255,255,.7);
}
.pp-hero-meta-date {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}
.pp-hero-meta-note {
  font-size: 11px;
  color: rgba(255,255,255,.65);
}

/* ─── Content layout ─── */
.pp-content-section {
  padding: 40px 0 80px;
  background: var(--smm-bg);
}
[data-bs-theme="dark"] .pp-content-section { background: #121820; }

/* ─── Section cards ─── */
.pp-sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pp-section-card {
  background: var(--smm-surface);
  border: 1px solid var(--smm-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  scroll-margin-top: 90px;
}
[data-bs-theme="dark"] .pp-section-card {
  background: #1c2533;
  border-color: rgba(255,255,255,.08);
}

.pp-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--smm-bg);
  border-bottom: 1px solid var(--smm-border);
}
[data-bs-theme="dark"] .pp-section-head {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.07);
}
.pp-section-icon {
  width: 36px;
  height: 36px;
  background: var(--smm-gradient);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.pp-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--smm-ink);
  margin: 0;
  flex: 1;
}
[data-bs-theme="dark"] .pp-section-title { color: rgba(255,255,255,.9); }
.pp-back-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(0,202,243,.1);
  color: var(--smm-primary);
  text-decoration: none;
  flex-shrink: 0;
  transition: background .15s;
  margin-left: auto;
}
.pp-back-top:hover { background: rgba(0,202,243,.2); color: var(--smm-primary); }

.pp-section-body {
  padding: 20px;
}
.pp-section-body p {
  font-size: 14px;
  color: var(--smm-ink-2);
  line-height: 1.75;
  margin: 0;
}
[data-bs-theme="dark"] .pp-section-body p { color: rgba(255,255,255,.55); }

/* ─── Active TOC link ─── */
.tos-toc-link-active {
  background: rgba(0,202,243,.07);
  border-color: rgba(0,202,243,.2) !important;
}
.tos-toc-link-active .tos-toc-link-text { color: var(--smm-primary) !important; }
.tos-toc-link-active .tos-toc-arrow { color: var(--smm-primary) !important; }

/* ─── Responsive ─── */
@media (max-width: 767px) {
  .pp-hero-banner { padding: 24px 20px; flex-direction: column; }
  .pp-hero-title { font-size: 24px; }
  .pp-hero-meta { width: 100%; }
  .pp-section-head { padding: 14px 16px; }
  .pp-section-body { padding: 16px; }
}

/* ─── Mobile platform filter dropdown ─── */
@media (max-width: 991px) {
  .pp-mf-caret { transition: transform .25s cubic-bezier(.4,0,.2,1); }
  .pp-mobile-filter-row.open .pp-mf-caret { transform: rotate(180deg); }
  .pp-platforms.open {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    padding: 14px 18px 18px;
  }
}

/* ═══════════════════════════════════════════════════
   FREE SERVICES PAGE  (/free-services)
═══════════════════════════════════════════════════ */
.fs-page { padding-bottom: 80px; background: linear-gradient(135deg, rgba(121,122,242,.06) 0%, rgba(0,202,243,.05) 60%, rgba(121,122,242,.04) 100%); min-height: 100vh; }
[data-bs-theme="dark"] .fs-page { background: linear-gradient(135deg, rgba(121,122,242,.12) 0%, rgba(0,202,243,.08) 60%, rgba(121,122,242,.07) 100%); }

.fs-hero { padding: 64px 0 48px; text-align: center; }
.fs-hero-title { font-size: clamp(28px, 5vw, 48px); font-weight: 900; color: var(--smm-ink); line-height: 1.1; margin-bottom: 20px; }
.fs-hero-desc { font-size: 18px; color: var(--smm-ink-2); max-width: 640px; margin: 0 auto 24px; line-height: 1.7; }
.fs-pill { display: inline-flex; align-items: center; padding: 8px 18px; border-radius: 50px; background: rgba(255,255,255,.9); border: 1px solid var(--smm-border); font-size: 14px; color: var(--smm-ink-2); }

.fs-btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 16px; background: var(--smm-gradient); color: #fff; font-weight: 700; text-decoration: none; transition: opacity .2s; position: relative; }
.fs-btn-primary:hover { opacity: .88; color: #fff; }
.fs-free-badge { position: absolute; top: -10px; right: -10px; background: #fff; color: #6b7af7; font-size: 10px; font-weight: 900; padding: 3px 8px; border-radius: 50px; box-shadow: 0 2px 8px rgba(0,0,0,.1); }

.fs-btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 16px; background: rgba(255,255,255,.9); border: 1px solid var(--smm-border); color: var(--smm-ink); font-weight: 700; text-decoration: none; transition: background .2s; }
.fs-btn-secondary:hover { background: #fff; color: var(--smm-ink); }

.fs-intro { max-width: 760px; margin: 0 auto; color: var(--smm-ink-2); line-height: 1.8; }

.fs-glass { background: rgba(255,255,255,.88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 24px; border: 1px solid rgba(226,227,229,.8); }
.fs-section { padding: 16px 0; }

.fw-black { font-weight: 900 !important; }

.fs-numbered-item { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.fs-num-badge { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }

.fs-service-card { background: #fff; border-radius: 24px; border: 1px solid var(--smm-border); box-shadow: 0 4px 24px rgba(0,0,0,.06); padding: 28px 28px 24px; display: flex; flex-direction: column; height: 100%; }
.fs-icon-wrap { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, #dbeafe 0%, #ede9fe 100%); display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; }
.fs-service-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 50px; font-size: 11px; font-weight: 800; background: linear-gradient(90deg, #e8f0fe, #ede9fe); color: #4f46e5; border: 1px solid #c7d2fe; white-space: nowrap; }

.fs-test-box { background: rgba(255,255,255,.8); border: 1px solid var(--smm-border); border-radius: 16px; padding: 16px 20px; margin-top: 16px; }
.fs-extra-box { background: linear-gradient(135deg, #f8faff 0%, #f0f4fe 100%); border: 1px solid var(--smm-border); border-radius: 16px; padding: 16px 20px; margin-top: 12px; }
.fs-service-list { padding-left: 20px; margin: 8px 0 0; color: var(--smm-ink-2); }
.fs-service-list li { margin-bottom: 6px; }

.fs-card-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 20px; border: none; border-radius: 16px; background: var(--smm-gradient); color: #fff; font: inherit; font-weight: 700; text-decoration: none; margin-top: 24px; cursor: pointer; transition: opacity .2s; }
.fs-card-cta:hover { opacity: .88; color: #fff; }

.fs-white-card { background: #fff; border-radius: 20px; padding: 20px 24px; margin-bottom: 12px; }
.fs-gradient-cta { background: var(--smm-gradient); border-radius: 24px; padding: 28px 32px; color: #fff; }
.fs-strat-card { background: #fff; border-radius: 20px; padding: 24px; margin-bottom: 16px; }

.fs-without-box { background: #fff; border-radius: 16px; padding: 20px; margin-bottom: 12px; }
.fs-with-box { background: linear-gradient(135deg, #ecfdf5 0%, #ecfeff 100%); border-radius: 16px; padding: 20px; }

.fs-step-card { background: #fff; border-radius: 14px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.fs-step-num { font-weight: 900; color: var(--smm-primary); font-size: 16px; flex-shrink: 0; }

.fs-faq-item { border-radius: 16px; background: #fff; border: 1px solid var(--smm-border); margin-bottom: 10px; overflow: hidden; }
.fs-faq-item summary { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fs-faq-item summary::-webkit-details-marker { display: none; }
.fs-faq-q { font-weight: 700; color: var(--smm-ink); }
.fs-faq-chev { transition: transform .25s; flex-shrink: 0; color: var(--smm-ink-3); }
.fs-faq-item[open] .fs-faq-chev { transform: rotate(180deg); }
.fs-faq-body { padding: 0 20px 16px; color: var(--smm-ink-2); line-height: 1.75; }

.fs-final-cta { background: var(--smm-gradient); border-radius: 32px; padding: 56px 40px; text-align: center; position: relative; overflow: hidden; }
.fs-final-cta::before { content: ''; position: absolute; top: -40px; left: -40px; width: 180px; height: 180px; background: rgba(255,255,255,.1); border-radius: 50%; filter: blur(40px); }
.fs-final-cta::after { content: ''; position: absolute; bottom: -40px; right: -40px; width: 220px; height: 220px; background: rgba(255,255,255,.08); border-radius: 50%; filter: blur(50px); }

.fs-final-btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 16px; background: #fff; color: #1D353D; font-weight: 900; text-decoration: none; transition: background .2s; }
.fs-final-btn-primary:hover { background: #f1f5f9; color: #1D353D; }
.fs-final-btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 16px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #fff; font-weight: 900; text-decoration: none; transition: background .2s; }
.fs-final-btn-secondary:hover { background: rgba(255,255,255,.18); color: #fff; }

/* ─── FS extensions: claim form + tiles + compare table (redesigned free-service landing pages) ─── */
.fs-form-label { display: block; font-weight: 700; font-size: 14px; color: var(--smm-ink); margin-bottom: 8px; }
.fs-form-input { width: 100%; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--smm-border); background: #fff; font-size: 15px; color: var(--smm-ink); transition: border-color .2s, box-shadow .2s; }
.fs-form-input:focus { outline: none; border-color: var(--smm-primary); box-shadow: 0 0 0 3px rgba(0,202,243,.15); }
.fs-form-hint { font-size: 13px; color: var(--smm-ink-3); margin-top: 6px; }

.fs-tile { background: #fff; border: 1px solid var(--smm-border); border-radius: 18px; padding: 20px 22px; height: 100%; display: flex; flex-direction: column; }
.fs-tile h3 { font-size: 15px; font-weight: 800; color: var(--smm-ink); margin-bottom: 6px; }
.fs-tile p { font-size: 13.5px; color: var(--smm-ink-2); line-height: 1.65; margin: 0; flex-grow: 1; }
.fs-tile .fs-card-cta { margin-top: 16px; padding: 11px 16px; font-size: 14px; }

.fs-compare-table { border-radius: 16px; overflow: hidden; margin: 0; font-size: 14px; border: 1px solid var(--smm-border); }
.fs-compare-table thead tr { background: var(--smm-gradient); }
.fs-compare-table th { color: #fff; padding: 14px 20px; font-weight: 700; }
.fs-compare-table td { padding: 13px 20px; color: var(--smm-ink-2); background: #fff; }
.fs-compare-table tbody tr:nth-child(even) td { background: rgba(0,0,0,.02); }

/* ─── FS hero, 2-column variant (redesigned free-service landing pages) ─── */
.fs-hero-split { position: relative; padding: 24px 0 8px; overflow: hidden; }
.fs-hero-split::before,
.fs-hero-split::after { content: ''; position: absolute; border-radius: 50%; filter: blur(60px); z-index: 0; pointer-events: none; }
.fs-hero-split::before { width: 320px; height: 320px; background: rgba(121,122,242,.16); top: -100px; left: -80px; }
.fs-hero-split::after { width: 300px; height: 300px; background: rgba(0,202,243,.14); bottom: -120px; right: -60px; }
.fs-hero-split .container { position: relative; z-index: 1; }
.fs-hero-headline { font-size: clamp(24px, 3.6vw, 36px); font-weight: 900; line-height: 1.18; color: var(--smm-ink); margin: 16px 0 16px; }
.fs-hero-lead { font-size: 17px; color: var(--smm-ink-2); line-height: 1.7; margin-bottom: 8px; }
.fs-hero-punch { font-size: clamp(24px, 3vw, 30px); font-weight: 900; color: var(--smm-accent); margin: 10px 0 16px; line-height: 1; }
.fs-hero-note { font-size: 15px; color: var(--smm-ink-2); line-height: 1.7; margin-bottom: 8px; }
.fs-hero-closing { font-size: 13.5px; font-style: italic; color: var(--smm-ink-3); margin-bottom: 0; }
.fs-hero-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 22px; }
.fs-hero-meta-item { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--smm-ink-2); white-space: nowrap; margin-inline-end: 20px; margin-bottom: 8px; }
.fs-hero-meta-item i { color: var(--smm-success); font-size: 15px; margin-inline-end: 6px; }
.fs-hero-visual { box-shadow: 0 24px 60px rgba(29,53,61,.1); }

/* ─── FS chat mockup (simulates a Telegram conversation inside a hero card) ─── */
.fs-chat-mock { border-radius: 20px; border: 1px solid var(--smm-border); overflow: hidden; background: var(--smm-surface); }
.fs-chat-mock-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: linear-gradient(135deg, var(--smm-accent) 0%, #5a5bdc 100%); color: #fff; }
.fs-chat-mock-avatar { position: relative; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.fs-chat-mock-avatar .fs-chat-premium-dot { position: absolute; bottom: -3px; right: -3px; width: 15px; height: 15px; border-radius: 50%; background: #fbbf24; border: 2px solid #5a5bdc; font-size: 8px; display: flex; align-items: center; justify-content: center; }
.fs-chat-mock-name { font-weight: 700; font-size: 14px; line-height: 1.25; }
.fs-chat-mock-status { font-size: 11.5px; opacity: .85; display: flex; align-items: center; gap: 5px; margin-top: 1px; }
.fs-chat-mock-status .dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; display: inline-block; flex-shrink: 0; }
.fs-chat-mock-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--smm-surface-soft); }
.fs-chat-bubble { max-width: 84%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; opacity: 0; }
.fs-chat-bubble.out { align-self: flex-end; background: linear-gradient(135deg, var(--smm-accent), #5a5bdc); color: #fff; border-bottom-right-radius: 4px; }
.fs-chat-bubble.in { align-self: flex-start; background: var(--smm-surface); border: 1px solid var(--smm-border); color: var(--smm-ink); border-bottom-left-radius: 4px; }
.fs-chat-typing { align-self: flex-start; display: flex; align-items: center; gap: 4px; background: var(--smm-surface); border: 1px solid var(--smm-border); border-radius: 14px; border-bottom-left-radius: 4px; padding: 10px 14px; opacity: 0; }
.fs-chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--smm-ink-3); display: inline-block; }
.fs-chat-typing span:nth-child(2) { animation-delay: .15s; }
.fs-chat-typing span:nth-child(3) { animation-delay: .3s; }
.fs-chat-toast { align-self: center; margin-top: 2px; background: rgba(102,204,0,.12); border: 1px solid rgba(102,204,0,.35); color: #4d9900; font-weight: 700; font-size: 12px; padding: 6px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; opacity: 0; }
/* Reaction-post variant: a mock post caption with a reaction bar that pops in pill by pill */
.fs-reaction-post-text { font-size: 13.5px; color: var(--smm-ink); line-height: 1.6; margin-bottom: 12px; }
.fs-reaction-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-reaction-pill { display: inline-flex; align-items: center; gap: 5px; background: var(--smm-surface); border: 1px solid var(--smm-border); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--smm-ink); opacity: 0; }
/* Reveal animation only runs once the chat card has scrolled into view (see bootstrap.js IntersectionObserver) */
.fs-chat-mock.fs-inview .fs-chat-bubble { animation: fs-chat-in .45s ease forwards; }
.fs-chat-mock.fs-inview .fs-chat-bubble.out { animation-delay: .15s; }
.fs-chat-mock.fs-inview .fs-chat-bubble.in { animation-delay: .65s; }
.fs-chat-mock.fs-inview .fs-chat-typing { animation: fs-chat-in .3s ease forwards, fs-chat-out .3s ease forwards; animation-delay: .35s, 1.1s; }
.fs-chat-mock.fs-inview .fs-chat-typing span { animation: fs-chat-bounce 1s infinite ease-in-out; }
.fs-chat-mock.fs-inview .fs-chat-toast { animation: fs-chat-in .4s ease forwards; animation-delay: 1.3s; }
.fs-chat-mock.fs-inview .fs-reaction-pill { animation: fs-chat-in .4s ease forwards; }
.fs-chat-mock.fs-inview .fs-reaction-pill.r1 { animation-delay: .2s; }
.fs-chat-mock.fs-inview .fs-reaction-pill.r2 { animation-delay: .45s; }
.fs-chat-mock.fs-inview .fs-reaction-pill.r3 { animation-delay: .7s; }
.fs-chat-mock.fs-inview .fs-reaction-pill.r4 { animation-delay: .95s; }
.fs-chat-mock.fs-inview .fs-chat-toast.fs-reaction-toast { animation-delay: 1.2s; }
@keyframes fs-chat-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fs-chat-out { to { opacity: 0; } }
@keyframes fs-chat-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
[data-bs-theme="dark"] .fs-chat-mock { border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .fs-chat-bubble.in, [data-bs-theme="dark"] .fs-chat-typing { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }

/* ─── FS claim spotlight (draws the eye to the free-test form) ─── */
.fs-claim-spotlight { position: relative; padding: 40px 20px 44px; border-radius: 32px; background: linear-gradient(135deg, rgba(121,122,242,.08) 0%, rgba(0,202,243,.07) 100%); border: 1px solid rgba(121,122,242,.18); overflow: hidden; }
.fs-claim-spotlight::before { content: ''; position: absolute; top: -70px; right: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(0,202,243,.18); filter: blur(55px); pointer-events: none; }
.fs-claim-spotlight::after { content: ''; position: absolute; bottom: -80px; left: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(121,122,242,.16); filter: blur(55px); pointer-events: none; }
.fs-claim-inner { position: relative; z-index: 1; }
.fs-claim-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .3px; color: #fff; background: var(--smm-gradient); padding: 6px 16px; border-radius: 50px; text-transform: uppercase; animation: fsClaimPulseRing 2.4s ease-in-out infinite; }
.fs-claim-eyebrow-icon { display: inline-block; animation: fsClaimWiggle 1.6s ease-in-out infinite; }
.fs-claim-title { font-size: clamp(22px, 4vw, 30px); font-weight: 900; color: var(--smm-ink); margin: 0; }
.fs-claim-promo { font-size: 14.5px; color: var(--smm-ink-2); max-width: 560px; margin: 10px auto 0; line-height: 1.6; }
.fs-claim-btn-glow { animation: fsClaimPulseRing 2.4s ease-in-out infinite; }
@keyframes fsClaimPulseRing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(121,122,242,.35); }
  50%      { box-shadow: 0 0 0 10px rgba(121,122,242,0); }
}
@keyframes fsClaimWiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  15%      { transform: rotate(-14deg) scale(1.05); }
  30%      { transform: rotate(12deg) scale(1.05); }
  45%      { transform: rotate(-8deg) scale(1); }
  60%      { transform: rotate(0deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .fs-claim-eyebrow, .fs-claim-btn-glow, .fs-claim-eyebrow-icon { animation: none; }
}
[data-bs-theme="dark"] .fs-claim-spotlight { background: linear-gradient(135deg, rgba(121,122,242,.14) 0%, rgba(0,202,243,.1) 100%); border-color: rgba(121,122,242,.3); }
[data-bs-theme="dark"] .fs-claim-title { color: #e8f0f4; }

/* Dark mode — free services */
[data-bs-theme="dark"] .fs-form-input { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); color: var(--smm-ink); }
[data-bs-theme="dark"] .fs-tile { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .fs-compare-table td { background: #0D2B36; color: var(--smm-ink-2); border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .fs-compare-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.03); }
[data-bs-theme="dark"] .fs-hero-title { color: #e8f0f4; }
[data-bs-theme="dark"] .fs-glass { background: rgba(13,43,54,.88); border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .fs-service-card { background: #0D2B36; border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .fs-icon-wrap { background: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .fs-service-badge { background: rgba(0,202,243,.12); color: #00c4d4; border-color: rgba(0,202,243,.3); }
[data-bs-theme="dark"] .fs-num-badge[style*="#dbeafe"] { background: rgba(37,99,235,.18) !important; color: #60a5fa !important; }
[data-bs-theme="dark"] .fs-num-badge[style*="#ede9fe"] { background: rgba(124,58,237,.18) !important; color: #a78bfa !important; }
[data-bs-theme="dark"] .fs-num-badge[style*="#cffafe"] { background: rgba(8,145,178,.18) !important; color: #22d3ee !important; }
[data-bs-theme="dark"] .fs-num-badge[style*="#dcfce7"] { background: rgba(22,163,74,.18) !important; color: #4ade80 !important; }
[data-bs-theme="dark"] .fs-num-badge[style*="#fef3c7"] { background: rgba(217,119,6,.18) !important; color: #fbbf24 !important; }
[data-bs-theme="dark"] .fs-num-badge[style*="#e0e7ff"] { background: rgba(79,70,229,.18) !important; color: #818cf8 !important; }
[data-bs-theme="dark"] .fs-num-badge[style*="#fce7f3"] { background: rgba(219,39,119,.18) !important; color: #f472b6 !important; }
[data-bs-theme="dark"] .fs-num-badge[style*="#fee2e2"] { background: rgba(220,38,38,.18) !important; color: #f87171 !important; }
[data-bs-theme="dark"] .fs-num-badge[style*="#ffedd5"] { background: rgba(234,88,12,.18) !important; color: #fb923c !important; }
[data-bs-theme="dark"] .fs-test-box { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .fs-extra-box { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .fs-faq-item { background: #0D2B36; border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .fs-faq-q { color: #e8f0f4; }
[data-bs-theme="dark"] .fs-white-card { background: rgba(255,255,255,.04); }
[data-bs-theme="dark"] .fs-strat-card { background: rgba(255,255,255,.04); }
[data-bs-theme="dark"] .fs-without-box { background: rgba(255,255,255,.04); }
[data-bs-theme="dark"] .fs-with-box { background: rgba(34,197,94,.06); }
[data-bs-theme="dark"] .fs-hero-headline { color: #e8f0f4; }
[data-bs-theme="dark"] .fs-hero-visual { box-shadow: 0 24px 60px rgba(0,0,0,.35); }
[data-bs-theme="dark"] .fs-step-card { background: rgba(255,255,255,.04); }
[data-bs-theme="dark"] .fs-pill { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #8FA7B2; }
[data-bs-theme="dark"] .fs-btn-secondary { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #e8f0f4; }
[data-bs-theme="dark"] .fs-btn-secondary:hover { background: rgba(255,255,255,.1); }


/* === Landing: best-ways-to-promote-telegram-2026 === */
.gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.gradient-text { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
@keyframes fadeInUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out; }
.animate-delay-2 { animation-delay:.2s; animation-fill-mode:both; }
.stats-icon { transition: all 0.3s ease; }
.stats-card:hover .stats-icon { transform: scale(1.2) rotate(5deg); }
.strategy-card { transition: all 0.3s ease; border: 2px solid transparent; }
.strategy-card:hover { transform: translateY(-4px); border-color: #667eea; box-shadow: 0 20px 40px rgba(102,126,234,0.15); }
.mistake-card { transition: all 0.2s ease; border-left: 4px solid #f87171; }
.mistake-card:hover { transform: translateX(4px); }
.tip-card { transition: all 0.3s ease; }
.tip-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(102,126,234,0.15); }
.free-card { transition: all 0.2s ease; }
.free-card:hover { transform: scale(1.03); background: linear-gradient(135deg, #667eea, #764ba2); color: white; }
.free-card:hover .free-icon { color: white !important; }
.free-card:hover p { color: white !important; }
.faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1); }
.faq-item.active .faq-answer { max-height: 500px; }
.faq-item.active .faq-icon { transform: rotate(180deg); }
.faq-icon { transition: transform 0.3s ease; }
.factor-row:hover { background: #f8f7ff; transform: translateX(4px); transition: all 0.2s ease; }
.adv-item { transition: all 0.2s ease; }
.adv-item:hover { transform: translateX(6px); }
@keyframes pulse-slow { 0%,100%{opacity:1} 50%{opacity:0.7} }
.pulse-slow { animation: pulse-slow 3s ease-in-out infinite; }

/* === Landing: telegram-boost === */
.package-card { transition: all 0.3s ease; border: 2px solid #e5e7eb; }
.package-card:hover { transform: translateY(-6px); border-color: #667eea; box-shadow: 0 24px 48px rgba(102,126,234,0.18); }
.step-card { position: relative; overflow: hidden; }
.step-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#667eea,#764ba2); transform:scaleX(0); transition:transform 0.3s ease; transform-origin:left; }
.step-card:hover::before { transform:scaleX(1); }
.supported-tag { transition: all 0.2s ease; }
.supported-tag:hover { transform: scale(1.05); }
@keyframes rocket { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-8px) rotate(-5deg)} }
.rocket-anim { animation: rocket 2s ease-in-out infinite; display:inline-block; }
.guarantee-badge { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }

/* ═══════════════════════════════════════════════════
   REVIEW PROMPT MODAL
═══════════════════════════════════════════════════ */
.review-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(10,18,36,.5); align-items: center; justify-content: center; padding: 20px;
}
.review-modal-overlay.open { display: flex; }
.review-modal-box {
  background: var(--smm-surface); border-radius: 18px; padding: 32px 28px 28px;
  max-width: 420px; width: 100%; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.review-modal-close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
  border: none; background: var(--smm-bg); color: var(--smm-ink-2); font-size: 20px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.review-modal-title { font-size: 19px; font-weight: 800; color: var(--smm-ink); margin: 0 0 6px; text-align: center; }
.review-modal-subtitle { font-size: 13px; color: var(--smm-ink-2); margin: 0 0 20px; text-align: center; }
.review-modal-stars { display: flex; justify-content: center; gap: 6px; margin-bottom: 20px; }
.review-star { font-size: 32px; color: var(--smm-border); cursor: pointer; transition: color .15s, transform .1s; }
.review-star:hover { transform: scale(1.12); }
.review-star.active { color: #f59e0b; }
.review-modal-form { display: flex; flex-direction: column; gap: 6px; }
.review-modal-label { font-size: 12px; font-weight: 700; color: var(--smm-ink-2); margin-top: 8px; }
.review-modal-input, .review-modal-textarea {
  width: 100%; background: var(--smm-surface); border: 1px solid var(--smm-border); border-radius: 12px;
  padding: 12px 14px; font-family: inherit; font-size: 14px; color: var(--smm-ink); resize: vertical;
}
.review-modal-input:focus, .review-modal-textarea:focus { outline: none; border-color: var(--smm-primary); }
.review-modal-error { display: none; color: var(--smm-danger); font-size: 12px; margin-top: 4px; }
.review-modal-btn-row { display: flex; gap: 10px; margin-top: 16px; }
.review-modal-cancel, .review-modal-submit {
  flex: 1; border: 0; border-radius: 12px; padding: 13px 18px; font-weight: 700; font-size: 14px;
  font-family: inherit; cursor: pointer; transition: background .15s, opacity .15s;
}
.review-modal-cancel { background: var(--smm-bg); color: var(--smm-ink-2); }
.review-modal-cancel:hover { background: var(--smm-border); }
.review-modal-submit { background: var(--smm-primary); color: #fff; box-shadow: var(--smm-shadow-btn); }
.review-modal-submit:hover { background: #00B5D9; }
.review-modal-submit:disabled { opacity: .6; cursor: default; }
.review-modal-trustpilot {
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--smm-border); text-align: center;
}
.review-modal-trustpilot-text { font-size: 13px; color: var(--smm-ink-2); margin: 0 0 12px; }
.review-modal-trustpilot-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #00b67a; color: #fff; border-radius: 12px; padding: 12px 20px;
  font-weight: 700; font-size: 14px; text-decoration: none; transition: background .15s;
}
.review-modal-trustpilot-btn:hover { background: #009c69; color: #fff; }
[data-bs-theme="dark"] .review-modal-close { background: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .review-modal-input, [data-bs-theme="dark"] .review-modal-textarea { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }