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

/* ─── 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);
}
[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);
}

/* ─── BASE ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
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', 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;
}
.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 14px;
  display: block;
  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;
}

/* ─── 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;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mobile-drawer.open { transform: translateX(0); }
.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; }
.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%; }

/* ─── 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 ─── */
.hero-section {
  background: #f0f4fb;
  padding: 54px 0 48px;
  overflow: hidden;
}
.phone-container { position: relative; display: inline-block; }
.phone-frame { max-width: 100%; overflow: hidden; }
.phone-frame img { width: 100%; display: block; }
.hero-center-col { padding: 0 8px; }
.hero-logo-wrap { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.hero-3d-icon { height: 64px; }
.hero-brand-text { height: 64px; }
.hero-desc { font-size: 14px; color: #7a8899; line-height: 1.75; margin-bottom: 28px; }
.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-start-now {
  background: #1a2952; color: #fff; font-size: 14px; font-weight: 700;
  padding: 13px 26px; border-radius: 10px; border: none; cursor: pointer;
  transition: background .2s; display: inline-flex; align-items: center; gap: 8px;
}
.btn-start-now:hover { background: #111e3a; color: #fff; }
.btn-view-services {
  background: #00c4d4; color: #fff; font-size: 14px; font-weight: 700;
  padding: 13px 26px; border-radius: 10px; border: none; cursor: pointer;
  transition: background .2s; display: inline-block;
}
.btn-view-services:hover { background: #00a8b5; color: #fff; }
.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; }
.hero-badge-col { display: flex; flex-direction: column; gap: 14px; align-self: center; }
.hero-badge-card {
  background: #fff; border-radius: 14px; box-shadow: 0 4px 20px rgba(30,45,74,.1);
  padding: 16px 18px; display: flex; align-items: flex-start; gap: 14px;
}
.hero-badge-icon {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid #e8edf5;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  flex-shrink: 0; color: #1a2952;
}
.hero-badge-text strong { display: block; font-size: 13px; font-weight: 700; color: #1e2d4a; margin-bottom: 4px; }
.hero-badge-text span { font-size: 12px; color: #7a8899; line-height: 1.5; }
.hero-badge-text .highlight { color: #f44; font-weight: 600; }

/* ─── 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 h4 {
  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', 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: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #b0bbc9; font-size: 16px; cursor: pointer; padding: 0;
}
.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', 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', 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; }
.login-meta-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: #7a8899;
}
.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: #7a8899; 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: #7a8899; 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: 12px; background-color: #fff; border-radius: 20px; }
.offer-icon-box { width: 78px; height: 78px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; 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: 48px; height: 48px; object-fit: contain; }
.offer-name { font-size: 13px; font-weight: 600; color: #1e2d4a; line-height: 1.4; }

/* ─── 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: #7a8899; }

/* ─── 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-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: #a0aec0; margin-bottom: 10px; }
.test-stars { color: #f59e0b; font-size: 15px; letter-spacing: 2px; margin-bottom: 14px; }
.test-text { font-size: 13px; color: #7a8899; 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: #7a8899; 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 h5 { font-size: 18px; font-weight: 700; color: #1e2d4a; margin-bottom: 12px; }
.ticket-box p { font-size: 13px; color: #7a8899; 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', 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: #7a8899; 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', 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: #7a8899; line-height: 1.75; background: #e8edf5; padding: 4px 20px 18px; }

/* ─── FOOTER ─── */
.site-footer { background: #0c1630; padding: 52px 0 0; }
.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 auto 14px; }
.footer-desc { font-size: 13px; color: #7a8fa8; line-height: 1.75; text-align: center; }
.footer-socials { display: flex; gap: 18px; justify-content: center; margin-top: 20px; }
.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-divider { border-top: 1px solid rgba(255,255,255,.06); margin: 36px 0 0; padding-top: 28px; }
.footer-langs-title { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #7a8fa8; margin-bottom: 18px; }
.footer-langs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding-bottom: 28px; }
.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: #4a5e78; }

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

body.pp-body {
  font-family: 'Montserrat', system-ui, -apple-system, 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); }
.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-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); }
.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-left: auto; display: flex; align-items: center; gap: 14px;
  background: #F5F6FA; border-radius: 60px; padding: 10px 22px; height: 60px;
}
[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); }

/* Language (topbar) */
.pp-lang { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13px; color: var(--smm-ink-2); background: transparent; border: 0; cursor: pointer; }
.pp-lang .flag { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, #1565C0, #42A5F5); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.pp-lang .caret { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--smm-ink-3); }

/* 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); }

/* 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); }

/* Profile */
.pp-profile { display: inline-flex; align-items: center; gap: 10px; margin-left: 8px; padding-left: 20px; border-left: 1px solid rgba(0,28,38,0.08); cursor: pointer; }
[data-bs-theme="dark"] .pp-profile { border-left-color: rgba(255,255,255,.08); }
.pp-profile .name { font-weight: 700; font-size: 16px; color: var(--smm-ink); }
.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: 48px; height: 48px; border-radius: 50%; border: 3px 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: 16px; flex: 0 0 48px; }

/* ─── 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; }
.pp-input input { flex: 1; 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; }
.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; }

/* 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', 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-left: 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: left; 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-radius: 12px 0 0 12px; padding-left: 24px; }
.pp-table thead th:last-child { border-radius: 0 12px 12px 0; padding-right: 24px; text-align: right; }
.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-left: 1px solid var(--smm-border); border-radius: 12px 0 0 12px; padding-left: 24px; }
.pp-table tbody td:last-child { border-right: 1px solid var(--smm-border); border-radius: 0 12px 12px 0; padding-right: 24px; text-align: right; }
[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); }
.pp-page-btn.active { background: var(--smm-primary); border-color: var(--smm-primary); color: #fff; }

/* ── 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: 46px; color: #4D9900; line-height: 1; word-break: break-all; }
[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); }
.pp-sf-lang { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--smm-ink-2); background: transparent; border: 0; cursor: pointer; }
.pp-sf-lang .caret { border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid var(--smm-ink-3); }

/* 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-logo { display: none; height: 32px; width: auto; }

/* 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; }
[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-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-btns { border-top-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .hero-section { background: #001C26; }
[data-bs-theme="dark"] .hero-badge-card { background: #0D2B36; box-shadow: 0 4px 20px rgba(0,0,0,.35); }
[data-bs-theme="dark"] .hero-badge-icon { border-color: rgba(255,255,255,.1); color: #8FA7B2; }
[data-bs-theme="dark"] .hero-badge-text strong { color: #e8f0f4; }
[data-bs-theme="dark"] .hero-dot { background: #1B4754; }
[data-bs-theme="dark"] .hero-desc { color: #8FA7B2; }
[data-bs-theme="dark"] .login-section { background: #001C26; }
[data-bs-theme="dark"] .login-wrapper { background: #071a24; }
[data-bs-theme="dark"] .login-card h4 { 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"] .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: #597380; }
[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 h5 { 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; }

/* ── 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); }
.pp-platform:hover { border-color: var(--smm-primary); transform: translateY(-2px); }
.pp-platform.active { background: var(--smm-primary); border-color: var(--smm-primary); box-shadow: var(--pp-shadow-cyan); }
.pp-platform.active .pp-platform-icon { color: #fff; background: rgba(255,255,255,.18); }
.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); }

/* ── 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 .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); }

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

/* Public nav mobile */
@media (max-width: 991px) {
  .nav-links, .nav-desktop-btns { display: none !important; }
  .nav-hamburger { display: flex; }
  .nav-card { justify-content: space-between; }
  .nav-card .nav-hamburger { order: 1; }
  .nav-card .navbar-brand { order: 2; margin-left: auto; margin-right: 0 !important; }
  .hero-section { padding: 32px 0 28px; }
  .hero-center-col { padding: 0; text-align: center; }
  .hero-logo-wrap { justify-content: center; }
  .hero-cta-row { justify-content: center; }
  .hero-badge-col { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .hero-badge-card { flex: 1 1 260px; max-width: 340px; }
  .for-robot-img { margin-top: 32px; }
  .login-btn-row { flex-direction: column; }
  .footer-langs { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) { .footer-langs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) {
  .phone-frame { max-width: 240px; margin: 0 auto; }
  .hero-3d-icon { height: 40px; }
  .hero-brand-text { height: 32px; }
  .hero-desc { font-size: 13px; }
  .hero-badge-col { flex-direction: column; }
  .hero-badge-card { max-width: 100%; flex: none; }
  .login-card { padding: 24px 16px; }
  .stat-num { font-size: 28px; }
  .offers-section .row { row-gap: 24px; }
  .footer-langs { grid-template-columns: repeat(2, 1fr); }
}

/* 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; }
  .pp-sidebar { transform: translateX(-100%); transition: transform .25s cubic-bezier(.4,0,.2,1); border-radius: 0 20px 20px 0; width: 280px; }
  .pp-sidebar.open { transform: translateX(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; }
  .pp-page-hero { display: block; margin: -16px -14px 20px; padding: 22px 18px 26px; background: var(--smm-gradient); }
  .pp-page-hero h1 { color: #fff; font-size: 26px; font-weight: 700; margin: 0 0 4px; line-height: 1.2; }
  .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: #7a8899; 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; }

/* 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 h3 { font-size: 18px; font-weight: 700; color: #1e2d4a; margin: 0; }
[data-bs-theme="dark"] .svc-panel-head h3 { 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: #7a8899; 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; }

/* Category label row */
.svc-cat-row { padding: 14px 24px 4px; }
.svc-cat-label { font-size: 11px; 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; }
.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: #7a8899; 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: column; }
.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; }
.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; }
.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; }
.svc-card-desc { font-size: 12px; color: #7a8899; 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: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .svc-thead { display: none; }
  .svc-table-wrap { padding-bottom: 0; }
  .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; }
.pp-search-form {
  display: flex;
  gap: 10px;
  align-items: center;
}
.pp-search-form .pp-input { flex: 1; 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;
}
.pp-search-clear:hover { color: var(--smm-danger); }
.pp-search-submit {
  display: inline-flex;
  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-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; }

/* ─── 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-form { flex-direction: column; align-items: stretch; }
  .pp-search-submit { justify-content: center; }
}


/* ════════════════════════════════════════
   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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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: #7a8899;
  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', 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 {
  min-height: 300px;
  background-size: cover;
  background-position: center;
}
.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;
}
.featured-card h2 {
  font-size: 22px;
  font-weight: 800;
  color: #1e2d4a;
  line-height: 1.3;
  margin-bottom: 12px;
}
.feat-excerpt {
  font-size: 13.5px;
  color: #7a8899;
  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: #7a8899;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: 'Inter', 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 {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.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; }
.blog-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: #1e2d4a;
  line-height: 1.4;
  margin: 0;
}
.blog-card-excerpt {
  font-size: 13px;
  color: #7a8899;
  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.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 {
  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);
}
.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', 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; }

/* 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 h4 {
  font-weight: 700;
  font-size: 18px;
  color: var(--smm-ink);
  margin-bottom: 6px;
}
[data-bs-theme="dark"] .smm-value-card h4 { 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;
  }
}