/*
 * SoloGatas theme: brings the look of the home page (dark "neon", Poppins,
 * pink/violet gradients, glass cards) to the rest of the site.
 * Loaded last from includes/css_general. Dark mode (visitors and users with
 * dark mode on) gets the full neon look; light mode gets the same accents on
 * a light background. The navbar and footer are dark in both modes.
 */

:root {
  --sg-pink: #d91678;
  --sg-pink-2: #ff4fa3;
  --sg-violet: #7b2ff7;
  --sg-ink: #0b0710;
  --sg-ink-2: #140c1b;
  --sg-ink-3: #1c1226;
  --sg-text: #f4eef6;
  --sg-muted: #b3a6bb;
  --sg-line: rgba(255, 255, 255, .08);
  --sg-grad: linear-gradient(100deg, var(--sg-pink), #ff3d9a 55%, var(--sg-pink));
  --sg-grad-text: linear-gradient(100deg, var(--sg-pink-2), var(--sg-pink) 45%, #b26bff);
  --sg-radius: 20px;
  --plyr-color-main: var(--sg-pink);
  --swiper-theme-color: var(--sg-pink);
}

/* ---------- Base ---------- */

body,
.font-montserrat,
.popover,
.tooltip,
.btn,
.form-control,
.dropdown-menu,
.modal-content {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}
body { letter-spacing: -.005em; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { font-weight: 700; letter-spacing: -.02em; }

::selection { background: var(--sg-pink); color: #fff; }

/* Ambient glow behind every page (fixed layer, painted once) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Page titles (all "section-sm" headers) */
.section-sm > .container > .row.text-center h2 {
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  background: var(--sg-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  display: inline-block;
}
.section-sm > .container > .row.text-center h2 i {
  -webkit-text-fill-color: initial;
  color: var(--sg-pink-2);
}
.section-sm > .container > .row.text-center .lead { font-size: 1rem; }
.section-sm > .container > .row.text-center > [class*='col']::after {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  margin: 1.1rem auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--sg-pink), var(--sg-violet));
  box-shadow: 0 0 18px rgba(217, 22, 120, .7);
}

/* ---------- Buttons ---------- */

.btn { font-weight: 600; transition: transform .2s ease, box-shadow .25s ease, background-position .6s ease, color .2s, border-color .2s; }

.btn-primary,
.btn-primary:focus,
.btn-success,
.btn-success:focus {
  color: #fff !important;
  border: 0 !important;
  background: var(--sg-grad) !important;
  background-size: 200% 100% !important;
  box-shadow: 0 10px 26px -12px rgba(217, 22, 120, .85);
}
.btn-primary:hover,
.btn-primary:active,
.btn-success:hover,
.btn-success:active {
  background-position: 100% 0 !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 34px -12px rgba(217, 22, 120, 1), 0 0 0 1px rgba(255, 79, 163, .35);
}
.btn-primary:disabled, .btn-primary.disabled, .btn-success:disabled { opacity: .55; transform: none; }

.btn-outline-primary {
  color: var(--sg-pink-2) !important;
  border: 1px solid rgba(217, 22, 120, .55) !important;
  background: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
  color: #fff !important;
  border-color: transparent !important;
  background: var(--sg-grad) !important;
  box-shadow: 0 10px 26px -12px rgba(217, 22, 120, .85);
}

.bg-gradient,
.alert-primary {
  background:
    radial-gradient(420px 200px at 100% 0, rgba(255, 255, 255, .18), transparent 70%),
    linear-gradient(120deg, var(--sg-pink), #a3125d 55%, var(--sg-violet)) !important;
  box-shadow: 0 20px 50px -24px rgba(217, 22, 120, .8);
}
.alert-primary { color: #fff !important; border: 0 !important; }
.alert-primary a { color: #fff !important; text-decoration: underline !important; }
.badge-primary, .bg-primary { background: var(--sg-grad) !important; }
.text-primary:not(.btn) { color: var(--sg-pink) !important; }
.custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked {
  background-color: var(--sg-pink) !important;
  border-color: var(--sg-pink) !important;
}
.form-switch .form-check-input:focus,
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 4px rgba(217, 22, 120, .2) !important; }
.progress-bar { background: linear-gradient(90deg, var(--sg-pink), var(--sg-violet)) !important; }

/* ---------- Cards ---------- */

.card,
.card-settings,
.modal-content,
.dropdown-menu { border-radius: var(--sg-radius); }
.card { transition: border-color .3s, box-shadow .3s, transform .3s; }
.card-updates { animation: sgCardIn .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes sgCardIn { from { opacity: 0; transform: translateY(14px); } }

.card-user-profile:hover { transform: translateY(-3px); }

/* Avatars: gradient ring like the home page creators */
.avatar-wrap img,
.card-avatar img {
  box-shadow: 0 0 0 3px var(--sg-pink-2), 0 0 0 6px rgba(123, 47, 247, .35), 0 10px 30px -6px rgba(217, 22, 120, .7) !important;
}

/* Profile tabs */
.nav-profile li.active { border-bottom: 0 !important; position: relative; }
.nav-profile li.active::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--sg-pink), var(--sg-violet));
  box-shadow: 0 0 14px rgba(217, 22, 120, .8);
}
.nav-profile li.active a, .nav-profile li.active i { color: var(--sg-pink-2) !important; }

/* Profile cover fades into the page */
.jumbotron-cover-user { position: relative; }
.jumbotron-cover-user::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  pointer-events: none;
}

/* Left menu (feed) and settings menu */
.menu-left-home li > a {
  border-radius: 999px !important;
  transition: background .2s, color .2s, box-shadow .25s;
}
.menu-left-home li > a.active,
.card-settings .list-group-item.active,
.card-settings > .list-group-flush > .list-group-item.active {
  color: #fff !important;
  border-color: transparent !important;
  background: var(--sg-grad) !important;
  box-shadow: 0 10px 26px -14px rgba(217, 22, 120, .9);
}
.menu-left-home li > a.active i,
.card-settings .list-group-item.active i { color: #fff !important; }

/* Category / filter pills (creators page) */
.btn-category,
.category-filter {
  border-radius: 999px !important;
  transition: background .2s, border-color .2s, box-shadow .25s;
}
.btn-category.active-category,
.active-category {
  color: #fff !important;
  border-color: transparent !important;
  background: var(--sg-grad) !important;
  box-shadow: 0 10px 26px -14px rgba(217, 22, 120, .9);
}

/* ---------- Forms ---------- */

.form-control,
.custom-select,
.form-select,
.input-group-text {
  border-radius: 14px;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.input-group > .input-group-prepend > .input-group-text { border-radius: 14px 0 0 14px; }
.input-group > .form-control:not(:first-child) { border-radius: 0 14px 14px 0; }
.form-control:focus,
.custom-select:focus,
.form-select:focus,
.search-bar:focus {
  border-color: var(--sg-pink-2) !important;
  box-shadow: 0 0 0 4px rgba(217, 22, 120, .18) !important;
}

/* ---------- Navbar (dark glass in both modes) ---------- */

.navbar.fixed-top:not(.scroll) {
  /* No backdrop-filter: it would make the fixed mobile menu panel position inside the navbar */
  background: rgba(11, 7, 16, .96) !important;
  box-shadow: 0 10px 40px -20px rgba(0, 0, 0, .9) !important;
  border-bottom: 0 !important;
}
.navbar.fixed-top:not(.scroll)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sg-pink) 25%, var(--sg-violet) 50%, var(--sg-pink-2) 75%, transparent);
  background-size: 200% 100%;
  animation: sgNavLine 8s linear infinite;
  opacity: .8;
}
@keyframes sgNavLine { to { background-position: -200% 0; } }

.navbar .logo { transition: transform .3s ease, filter .3s ease; }
.navbar .navbar-brand:hover .logo { transform: scale(1.04); filter: drop-shadow(0 0 10px rgba(255, 79, 163, .55)); }

.navbar .nav-link:not(.btn),
.navbar .link-scroll a.nav-link:not(.btn),
.link-scroll a.nav-link:not(.btn),
.navbar .navbar-toggler,
.navbar .icon-navbar,
.navbar .navbar-toggler:not(.text-white) { color: var(--sg-text) !important; }
.navbar .nav-link:not(.btn):hover,
.navbar .nav-link:not(.btn):hover .icon-navbar { color: var(--sg-pink-2) !important; }
.navbar .search-bar {
  color: var(--sg-text) !important;
  border: 1px solid var(--sg-line) !important;
  background-color: rgba(255, 255, 255, .06) !important;
  border-radius: 999px !important;
}
.navbar .search-bar::placeholder { color: var(--sg-muted); }
.navbar .button-search, .navbar .button-search i { color: var(--sg-muted) !important; }
.navbar .noti_notifications,
.navbar .noti_msg,
.notify { background: var(--sg-pink) !important; box-shadow: 0 0 0 2px var(--sg-ink), 0 0 12px rgba(255, 79, 163, .8); }

@media (max-width: 991px) {
  .navbar .navbar-collapse,
  .navbar .navbar-collapse.navbar-mobile {
    background: var(--sg-ink-2) !important;
    color: var(--sg-text) !important;
  }
  .navbar-collapse .navbar-toggler span { background-color: var(--sg-text) !important; }
}

/* Mobile bottom menu (logged in) */
.menuMobile {
  background: rgba(11, 7, 16, .97) !important;
  border-top: 1px solid var(--sg-line) !important;
}
.menuMobile .btn-mobile, .menuMobile .btn-mobile i, .menuMobile .icon-navbar { color: var(--sg-text) !important; }

.navbar .login-btn:not(.btn) {
  border-radius: 999px;
  padding: .45rem 1rem !important;
  margin-right: .4rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
  transition: background .2s, box-shadow .2s;
}
.navbar .login-btn:not(.btn):hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 79, 163, .6); }

/* ---------- Footer (dark in both modes) ---------- */

.sg-site-footer {
  position: relative;
  color: var(--sg-muted) !important;
  background: radial-gradient(700px 260px at 15% 0, rgba(217, 22, 120, .14), transparent 70%), var(--sg-ink) !important;
  border-top: 0 !important;
}
.sg-site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sg-pink), var(--sg-violet), transparent);
}
.sg-site-footer h5, .sg-site-footer .h5 { color: var(--sg-text) !important; font-weight: 700; }
.sg-site-footer a, .sg-site-footer .link-footer, .sg-site-footer .footer_text_color { color: var(--sg-muted) !important; transition: color .2s; }
.sg-site-footer a:hover, .sg-site-footer .link-footer:hover { color: var(--sg-pink-2) !important; }
.sg-site-footer .ico-social { color: var(--sg-text) !important; }
.sg-site-footer .btn-outline-primary, .sg-site-footer .btn-secondary, .sg-site-footer .dropdown-toggle {
  color: var(--sg-text) !important;
  border-color: var(--sg-line) !important;
  background: rgba(255, 255, 255, .05) !important;
}

/* ---------- Misc ---------- */

.tooltip-inner { background: var(--sg-ink-3) !important; border: 1px solid rgba(255, 79, 163, .35); border-radius: 10px; }
.bs-tooltip-top .tooltip-arrow::before, .arrow::before { border-top-color: var(--sg-ink-3) !important; }
.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--sg-ink-3) !important; }
.page-item.active .page-link { background: var(--sg-grad) !important; border-color: transparent !important; color: #fff !important; }
.pace .pace-progress { background: linear-gradient(90deg, var(--sg-pink), var(--sg-violet)) !important; }
.link-border { border-bottom-color: rgba(255, 79, 163, .45) !important; }

.custom-scrollbar::-webkit-scrollbar-thumb,
.wrapper-msg-inbox::-webkit-scrollbar-thumb { background: rgba(217, 22, 120, .45) !important; border-radius: 10px; }

/* ================================================================
   DARK MODE (visitors and users with dark mode on)
   ================================================================ */

html[data-bs-theme=dark] {
  --bs-body-bg: var(--sg-ink);
  --bs-body-bg-rgb: 11, 7, 16;
  --bs-body-color: var(--sg-text);
  --bs-body-color-rgb: 244, 238, 246;
  --bs-secondary-color: var(--sg-muted);
  --bs-secondary-bg: var(--sg-ink-3);
  --bs-tertiary-bg: var(--sg-ink-2);
  --bs-border-color: var(--sg-line);
  --bs-border-color-translucent: var(--sg-line);
  --bs-link-color: var(--sg-pink-2);
  --bs-link-hover-color: #ff7dbb;
  --color-media-wrapper: #1c1226;
  --color-pulse-media-wrapper: #241830;
}
html[data-bs-theme=dark] body { background-color: var(--sg-ink) !important; color: var(--sg-text); }
html[data-bs-theme=dark] main,
html[data-bs-theme=dark] .bg-light,
html[data-bs-theme=dark] main > div.section:nth-child(even),
html[data-bs-theme=dark] main > div.section:nth-child(odd) { background-color: transparent !important; }
html[data-bs-theme=dark] body::before {
  background:
    radial-gradient(900px 520px at 0% -10%, rgba(217, 22, 120, .16), transparent 65%),
    radial-gradient(800px 480px at 105% 5%, rgba(123, 47, 247, .14), transparent 65%),
    radial-gradient(700px 500px at 50% 115%, rgba(217, 22, 120, .08), transparent 70%);
}

html[data-bs-theme=dark] .text-muted,
html[data-bs-theme=dark] .lead.text-muted,
html[data-bs-theme=dark] small.text-muted { color: var(--sg-muted) !important; }

/* Surfaces */
html[data-bs-theme=dark] .card:not(.bg-transparent),
html[data-bs-theme=dark] .wrapper-msg-inbox,
html[data-bs-theme=dark] .bg-white:not(.btn),
html[data-bs-theme=dark] .card-settings,
html[data-bs-theme=dark] .list-group-item,
html[data-bs-theme=dark] .modal-content,
html[data-bs-theme=dark] .card-footer,
html[data-bs-theme=dark] .card-header {
  background-color: var(--sg-ink-2) !important;
  border-color: var(--sg-line) !important;
  color: var(--sg-text);
}
html[data-bs-theme=dark] .card:not(.bg-transparent) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0)) !important;
  border: 1px solid var(--sg-line) !important;
  box-shadow: 0 24px 60px -36px rgba(0, 0, 0, .95);
}
html[data-bs-theme=dark] .card .card-footer,
html[data-bs-theme=dark] .card .card-header,
html[data-bs-theme=dark] .card .card-body,
html[data-bs-theme=dark] .card .bg-white:not(.btn) { background-color: transparent !important; }
html[data-bs-theme=dark] .card-updates:hover,
html[data-bs-theme=dark] .card-user-profile:hover {
  border-color: rgba(255, 79, 163, .35) !important;
  box-shadow: 0 24px 60px -30px rgba(217, 22, 120, .55), 0 0 0 1px rgba(255, 79, 163, .15);
}
html[data-bs-theme=dark] .border,
html[data-bs-theme=dark] .border-top,
html[data-bs-theme=dark] .border-bottom,
html[data-bs-theme=dark] hr,
html[data-bs-theme=dark] .dropdown-divider { border-color: var(--sg-line) !important; }
html[data-bs-theme=dark] .avatar-wrap,
html[data-bs-theme=dark] .card-avatar { background-color: var(--sg-ink-2) !important; }
html[data-bs-theme=dark] .jumbotron-cover-user::after { background: linear-gradient(180deg, transparent, var(--sg-ink)); }
html[data-bs-theme=dark] .card-cover { position: relative; }

/* Menus */
html[data-bs-theme=dark] .menu-left-home li > a:not(.active):hover,
html[data-bs-theme=dark] .card-settings .list-group-item:not(.active):hover,
html[data-bs-theme=dark] .btn-category:not(.active-category):hover {
  color: #fff !important;
  background: rgba(217, 22, 120, .12) !important;
}
html[data-bs-theme=dark] .btn-category:not(.active-category) {
  color: var(--sg-text) !important;
  border-color: var(--sg-line) !important;
  background: rgba(255, 255, 255, .03) !important;
}

/* Dropdowns and modals */
html[data-bs-theme=dark] .dropdown-menu,
html[data-bs-theme=dark] .dd-menu-user {
  background: var(--sg-ink-3) !important;
  border: 1px solid var(--sg-line) !important;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 79, 163, .06) !important;
}
html[data-bs-theme=dark] .dd-menu-user:before { color: var(--sg-ink-3) !important; }
html[data-bs-theme=dark] .dropdown-item { color: var(--sg-text) !important; }
html[data-bs-theme=dark] .dropdown-item:hover,
html[data-bs-theme=dark] .dropdown-item:focus,
html[data-bs-theme=dark] .dropdown-item.balance:hover { background: rgba(217, 22, 120, .14) !important; color: #fff !important; }
html[data-bs-theme=dark] .modal-content { box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 79, 163, .08); }
html[data-bs-theme=dark] .modal-backdrop.show { opacity: .75; }
html[data-bs-theme=dark] .close, html[data-bs-theme=dark] .btn-close { color: var(--sg-text) !important; }

/* Forms */
html[data-bs-theme=dark] .form-control,
html[data-bs-theme=dark] .custom-select,
html[data-bs-theme=dark] .form-select,
html[data-bs-theme=dark] .input-group-text,
html[data-bs-theme=dark] .select2-selection,
html[data-bs-theme=dark] .StripeElement {
  color: var(--sg-text) !important;
  background-color: rgba(255, 255, 255, .04) !important;
  border-color: rgba(255, 255, 255, .1) !important;
}
html[data-bs-theme=dark] .form-control:focus,
html[data-bs-theme=dark] .custom-select:focus { background-color: rgba(255, 255, 255, .06) !important; color: var(--sg-text) !important; }
html[data-bs-theme=dark] #updateDescription,
html[data-bs-theme=dark] #updateDescription:focus { background-color: transparent !important; }
html[data-bs-theme=dark] .form-control:disabled,
html[data-bs-theme=dark] .form-control[readonly] { background-color: rgba(255, 255, 255, .02) !important; color: var(--sg-muted) !important; }
html[data-bs-theme=dark] .form-control::placeholder { color: rgba(179, 166, 187, .7) !important; }
html[data-bs-theme=dark] .input-group-text { color: var(--sg-muted) !important; }
html[data-bs-theme=dark] .custom-control-label:not(.switch)::before { background-color: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .25) !important; }
html[data-bs-theme=dark] .ui-widget-content { background: var(--sg-ink-3); }

/* Tables, alerts */
html[data-bs-theme=dark] .table { --bs-table-bg: transparent; --bs-table-color: var(--sg-text); --bs-table-border-color: var(--sg-line); color: var(--sg-text); }
html[data-bs-theme=dark] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .025) !important; }
html[data-bs-theme=dark] .alert-info { color: var(--sg-text) !important; background: rgba(217, 22, 120, .1) !important; border: 1px solid rgba(255, 79, 163, .25) !important; }
html[data-bs-theme=dark] .page-link { background: var(--sg-ink-2) !important; border-color: var(--sg-line) !important; color: var(--sg-text) !important; }

/* Messages */
html[data-bs-theme=dark] .wrapper-msg-left .msg-inbox,
html[data-bs-theme=dark] .wrapper-msg-left .chat-msg { background: var(--sg-ink-3) !important; }
html[data-bs-theme=dark] .msg-inbox .active,
html[data-bs-theme=dark] .msg-inbox a.active { background: rgba(217, 22, 120, .14) !important; }

/* ================================================================
   LIGHT MODE (users with dark mode off)
   ================================================================ */

html[data-bs-theme=light] { --color-media-wrapper: #f5eef3; --color-pulse-media-wrapper: #faf5f8; }
html[data-bs-theme=light] body { background-color: #fbf7fa !important; }
html[data-bs-theme=light] body::before {
  background:
    radial-gradient(900px 520px at 0% -10%, rgba(217, 22, 120, .07), transparent 65%),
    radial-gradient(800px 480px at 105% 5%, rgba(123, 47, 247, .06), transparent 65%);
}
html[data-bs-theme=light] .card,
html[data-bs-theme=light] .card-settings {
  border: 1px solid rgba(217, 22, 120, .08) !important;
  box-shadow: 0 18px 50px -32px rgba(91, 20, 70, .35);
}
html[data-bs-theme=light] .card-updates:hover,
html[data-bs-theme=light] .card-user-profile:hover {
  border-color: rgba(217, 22, 120, .25) !important;
  box-shadow: 0 22px 50px -28px rgba(217, 22, 120, .45);
}
html[data-bs-theme=light] .menu-left-home li > a:not(.active):hover,
html[data-bs-theme=light] .card-settings .list-group-item:not(.active):hover,
html[data-bs-theme=light] .btn-category:not(.active-category):hover { background: rgba(217, 22, 120, .07) !important; color: var(--sg-pink) !important; }
html[data-bs-theme=light] .dropdown-menu { border: 1px solid rgba(217, 22, 120, .08) !important; box-shadow: 0 24px 60px -24px rgba(91, 20, 70, .35) !important; }
html[data-bs-theme=light] .dropdown-item:hover,
html[data-bs-theme=light] .dropdown-item:focus { background: rgba(217, 22, 120, .07) !important; color: var(--sg-pink) !important; }
html[data-bs-theme=light] .jumbotron-cover-user::after { background: linear-gradient(180deg, transparent, rgba(251, 247, 250, .9)); }
html[data-bs-theme=light] .modal-content { border: 0; box-shadow: 0 40px 100px -30px rgba(91, 20, 70, .45); }

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  .card-updates { animation: none !important; }
  .navbar.fixed-top::after { animation: none !important; }
  .btn, .card { transition: none !important; }
}

.sg-site-footer-bottom { font-size: .85rem; }
.sg-site-footer-bottom::before { opacity: .35; }

/* ---------- New-user light/dark picker ---------- */
.sg-theme-picker .modal-content {
  border: 0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(217, 22, 120, .25);
  overflow: hidden;
}
html[data-bs-theme=dark] .sg-theme-picker .modal-content {
  background: linear-gradient(160deg, #1a1020, #0f0a14);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06);
}
.sg-theme-picker .modal-body { padding: 32px 28px 28px; text-align: center; }
.sg-tp-title {
  font-weight: 700;
  margin-bottom: 6px;
  background: linear-gradient(90deg, var(--sg-pink), var(--sg-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sg-tp-sub { opacity: .75; font-size: .92rem; margin-bottom: 22px; }
.sg-tp-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.sg-tp-option {
  border: 2px solid rgba(128, 128, 128, .25);
  border-radius: 18px;
  padding: 10px 10px 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.sg-tp-option:hover { transform: translateY(-3px); }
.sg-tp-option.active {
  border-color: var(--sg-pink);
  box-shadow: 0 0 0 4px rgba(217, 22, 120, .18), 0 10px 30px rgba(217, 22, 120, .25);
}
.sg-tp-option:focus-visible { outline: 3px solid var(--sg-violet); outline-offset: 2px; }
.sg-tp-preview {
  display: flex;
  flex-direction: column;
  gap: 7px;
  height: 120px;
  border-radius: 12px;
  padding: 0 0 10px;
  overflow: hidden;
  text-align: left;
}
.sg-tp-dark { background: #0b0710; }
.sg-tp-light { background: #fbf7fa; border: 1px solid #eee; }
.sg-tp-bar { height: 16px; background: #0b0710; border-bottom: 2px solid var(--sg-pink); }
.sg-tp-dark .sg-tp-bar { background: #160d1c; }
.sg-tp-row { display: flex; align-items: center; gap: 7px; padding: 0 10px; }
.sg-tp-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sg-pink), var(--sg-violet));
  flex: none;
}
.sg-tp-lines { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sg-tp-lines i { display: block; height: 5px; border-radius: 3px; width: 80%; }
.sg-tp-lines i + i { width: 50%; }
.sg-tp-dark .sg-tp-lines i { background: rgba(255, 255, 255, .35); }
.sg-tp-light .sg-tp-lines i { background: rgba(0, 0, 0, .18); }
.sg-tp-card { flex: 1; margin: 0 10px; border-radius: 8px; }
.sg-tp-dark .sg-tp-card { background: rgba(255, 255, 255, .07); }
.sg-tp-light .sg-tp-card { background: #fff; box-shadow: 0 2px 8px rgba(217, 22, 120, .12); }
.sg-tp-btn {
  height: 10px; width: 46%; margin: 0 10px; border-radius: 6px;
  background: linear-gradient(90deg, var(--sg-pink), var(--sg-violet));
}
.sg-tp-label { display: block; margin-top: 10px; font-weight: 600; }
.sg-tp-label i { margin-right: 4px; }
.sg-tp-save { padding-top: 11px; padding-bottom: 11px; }
@media (max-width: 420px) {
  .sg-theme-picker .modal-body { padding: 26px 18px 20px; }
  .sg-tp-preview { height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-tp-option { transition: none; }
  .sg-tp-option:hover { transform: none; }
}

/* ---------- Verify account: terms checkbox (settings/verify/account) ---------- */

.custom-checkbox:has(#agreeTermsPrivacy) {
  margin-top: 1.5rem;
  padding: 1rem 1rem 1rem 3.25rem;
  border: 2px solid var(--sg-pink);
  border-radius: 14px;
  background: rgba(217, 22, 120, .08);
  box-shadow: 0 0 0 4px rgba(217, 22, 120, .08);
}
.custom-checkbox:has(#agreeTermsPrivacy:checked) {
  border-color: #2dce89;
  background: rgba(45, 206, 137, .08);
  box-shadow: 0 0 0 4px rgba(45, 206, 137, .08);
}
#agreeTermsPrivacy ~ .custom-control-label { font-size: 1.05rem; font-weight: 600; line-height: 1.6rem; cursor: pointer; }
#agreeTermsPrivacy ~ .custom-control-label::before,
#agreeTermsPrivacy ~ .custom-control-label::after {
  top: 0;
  left: -2.25rem;
  width: 1.6rem;
  height: 1.6rem;
}
#agreeTermsPrivacy ~ .custom-control-label::before { border: 2px solid var(--sg-pink) !important; border-radius: 6px; }
#agreeTermsPrivacy ~ .custom-control-label::after { background-size: 70% 70%; }
#agreeTermsPrivacy ~ .custom-control-label a { text-decoration: underline; }