/* ================================================================
   KUPR MODERN THEME — v4.0  "Phantom"
   Premium dark — black/grey/blue palette
   Inspired by Vercel · Figma · Linear
   Overrides WoWonder dark.css + style.css
   Load order: style.css → dark.css → kupr-modern.css (wins)
   ================================================================ */

/* ---- 1. DESIGN TOKENS ----------------------------------------- */
:root {
  /* Backgrounds — pure neutral black stack */
  --k-bg:          #080808;
  --k-surface:     #111111;
  --k-surface-2:   #1a1a1a;
  --k-surface-3:   #242424;
  --k-hover:       rgba(255,255,255,0.04);
  --k-hover-md:    rgba(255,255,255,0.07);

  /* Borders */
  --k-border:      rgba(255,255,255,0.08);
  --k-border-md:   rgba(255,255,255,0.13);
  --k-border-lg:   rgba(255,255,255,0.20);

  /* Brand — electric blue (replaces gold) */
  --k-gold:        #2563EB;
  --k-gold-2:      #60A5FA;
  --k-gold-dim:    rgba(37,99,235,0.12);
  --k-gold-glow:   0 0 20px rgba(37,99,235,0.28);

  /* Semantic */
  --k-blue:        #2563EB;
  --k-blue-light:  #60A5FA;
  --k-green:       #10B981;
  --k-green-light: #34D399;
  --k-red:         #F87171;
  --k-red-light:   #FCA5A5;
  --k-purple:      #A78BFA;
  --k-purple-light:#C4B5FD;
  --k-amber:       #D97706;

  /* Text */
  --k-text:        #FAFAFA;
  --k-text-dim:    #737373;
  --k-text-muted:  #404040;
  --k-text-invert: #080808;

  /* Radius */
  --k-r:           12px;
  --k-r-sm:        7px;
  --k-r-lg:        18px;
  --k-r-xl:        26px;

  /* Shadows — deeper for true black bg */
  --k-shadow:      0 1px 3px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.4);
  --k-shadow-lg:   0 4px 8px rgba(0,0,0,0.6), 0 12px 40px rgba(0,0,0,0.55);

  /* Transitions */
  --k-t:           all 0.15s ease;
}

/* ---- 2. GLOBAL RESET ------------------------------------------ */
body {
  background: var(--k-bg) !important;
  color: var(--k-text) !important;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--k-gold); transition: var(--k-t); }
a:hover, a:focus { color: var(--k-gold-2); text-decoration: none; }

hr { border-color: var(--k-border) !important; }

/* ---- 3. NAVBAR ------------------------------------------------- */
.navbar-default,
.navbar.navbar-default {
  background: rgba(8,8,8,0.94) !important;
  border-bottom: 1px solid var(--k-border-md) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 1px 0 var(--k-border), 0 4px 20px rgba(0,0,0,0.3) !important;
}

.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a svg {
  color: var(--k-text-dim) !important;
  transition: var(--k-t);
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li.active > a {
  color: var(--k-text) !important;
  background: transparent !important;
}
.navbar-default .navbar-nav > li > a:hover svg {
  color: var(--k-gold) !important;
}

/* Navbar brand / logo area */
.navbar-brand { padding: 10px 15px; }

/* Navbar notification badges */
.navbar-default .navbar-nav > li .new-update-alert {
  background: var(--k-gold) !important;
  color: var(--k-text-invert) !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  min-width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  border-radius: 9px !important;
  padding: 0 5px !important;
}

/* Search bar in navbar */
#search-box-cont input,
.navbar #top-search,
.navbar .search-form input {
  background: var(--k-surface-2) !important;
  border: 1px solid var(--k-border-md) !important;
  color: var(--k-text) !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  transition: var(--k-t);
}
#search-box-cont input:focus,
.navbar .search-form input:focus {
  border-color: var(--k-gold) !important;
  box-shadow: 0 0 0 3px var(--k-gold-dim) !important;
  outline: none !important;
}

/* ---- 4. MAIN LAYOUT -------------------------------------------- */
.content-container {
  margin-top: 50px !important;
  padding-top: 16px !important;
}

/* ---- 5. CARDS (wow_content / wowonder-well) -------------------- */
.wow_content,
.wowonder-well,
.tab-container,
.panel,
.panel-white {
  background: var(--k-surface) !important;
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-r) !important;
  box-shadow: var(--k-shadow) !important;
  transition: border-color 0.2s ease;
}
.wow_content:hover { border-color: var(--k-border-md) !important; }
.wow_content { padding: 16px 16px 4px !important; }
.wow_content.negg_padd { padding: 0 !important; }

/* Sidebar profile card */
.sidebar-profile-style,
.sidebar-conatnier .sidebar-profile-style {
  background: var(--k-surface) !important;
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-r) !important;
  box-shadow: var(--k-shadow) !important;
}

/* Settings page */
.wo_sett_content,
.wo_settings_page {
  background: var(--k-surface) !important;
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-r) !important;
}

/* ---- 6. POST CARDS -------------------------------------------- */
.post,
.bs-callout {
  background: var(--k-surface) !important;
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-r) !important;
  box-shadow: var(--k-shadow) !important;
  margin-bottom: 14px !important;
  overflow: hidden;
  transition: border-color 0.2s ease !important;
}
.post:hover { border-color: var(--k-border-md) !important; }

/* Post heading */
.post .post-heading,
.bs-callout .post-heading {
  padding: 14px 16px 10px !important;
}
.post .post-heading .meta .title a,
.bs-callout .post-heading .title .main-color {
  color: var(--k-text) !important;
  font-weight: 600 !important;
}
.post .post-heading .meta .title span,
.post .post-heading .meta .title small,
.bs-callout .post-heading .title span,
.bs-callout .post-heading .title small {
  color: var(--k-text-dim) !important;
  font-size: 12px !important;
}

/* Post body */
.post .post-description p,
.post .post-description {
  color: var(--k-text) !important;
  line-height: 1.65 !important;
}

/* Post footer (like / comment / share buttons) */
.post .post-footer,
.wo_imagecombo_lbox .comment-section-inner .comment-inner-footer,
.wo_imagecombo_lbox .lightbox-post-footer .comments-list {
  background: transparent !important;
  border-top: 1px solid var(--k-border) !important;
  padding: 4px 8px !important;
}

.post .post-footer .stat-item,
#wo_post_stat_button .stat-item {
  color: var(--k-text-dim) !important;
  border-radius: var(--k-r-sm) !important;
  padding: 7px 10px !important;
  transition: var(--k-t);
}
.post .post-footer .stat-item:hover,
#wo_post_stat_button .stat-item:hover {
  background: var(--k-hover-md) !important;
  color: var(--k-text) !important;
}

/* Like button active state */
.post .post-footer .stat-item.liked,
.post .post-footer .stat-item[data-type="like"].active {
  color: var(--k-gold) !important;
}

/* Post reactions */
.reactions-box {
  background: var(--k-surface-3) !important;
  border: 1px solid var(--k-border-md) !important;
  border-radius: 24px !important;
  box-shadow: var(--k-shadow) !important;
  padding: 4px 6px !important;
}

/* Post comments section */
.post .post-footer .comments-list .comment {
  margin: 14px 0 !important;
}
.post .post-footer .comments-list .comment .comment-body {
  background: var(--k-surface-2) !important;
  border-radius: 10px 10px 10px 3px !important;
  padding: 10px 14px !important;
  border: 1px solid var(--k-border) !important;
}
.post .post-footer .comments-list .comment .comment-heading .user {
  color: var(--k-text) !important;
  font-weight: 600 !important;
}

/* Comment input */
#wo_comment_combo .comment_combo_footer,
#wo_comment_combo.comment-toggle {
  background: var(--k-surface-2) !important;
  border: 1px solid var(--k-border-md) !important;
  border-radius: 10px !important;
  margin: 8px 12px !important;
}

/* ---- 7. PUBLISHER BOX (create post) --------------------------- */
.publisher-box {
  background: var(--k-surface) !important;
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-r) !important;
  box-shadow: var(--k-shadow) !important;
  margin-bottom: 14px !important;
  overflow: hidden;
}
.publisher-box .publisher-box-inner {
  padding: 14px 16px 10px !important;
}
.publisher-box .post-input,
.publisher-box textarea {
  background: var(--k-surface-2) !important;
  border: 1px solid var(--k-border-md) !important;
  color: var(--k-text) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  transition: var(--k-t);
  resize: none;
}
.publisher-box .post-input:focus,
.publisher-box textarea:focus {
  border-color: var(--k-gold) !important;
  box-shadow: 0 0 0 3px var(--k-gold-dim) !important;
  outline: none !important;
}
.publisher-box .publisher-box-footer {
  background: var(--k-surface-2) !important;
  border-top: 1px solid var(--k-border) !important;
  padding: 8px 12px !important;
}
.publisher-box .publisher-box-footer .poster-left-buttons svg.feather {
  color: var(--k-text-dim) !important;
  transition: var(--k-t);
}
.publisher-box .publisher-box-footer .poster-left-buttons:hover svg.feather {
  color: var(--k-gold) !important;
}

/* ---- 8. BUTTONS ----------------------------------------------- */
/* Primary / gold button */
.btn-primary,
.btn-mat,
[class*="btn-mat"][class*="gold"],
.kupr-btn-primary {
  background: linear-gradient(135deg, var(--k-gold), var(--k-gold-2)) !important;
  color: var(--k-text-invert) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 9px 22px !important;
  transition: var(--k-t);
  box-shadow: 0 2px 12px var(--k-gold-dim);
}
.btn-primary:hover,
.btn-mat:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(37,99,235,0.40) !important;
  color: var(--k-text-invert) !important;
}

/* Default / secondary button */
.btn-default,
.btn-secondary {
  background: var(--k-surface-3) !important;
  color: var(--k-text-dim) !important;
  border: 1px solid var(--k-border-lg) !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
  transition: var(--k-t);
}
.btn-default:hover,
.btn-secondary:hover {
  background: var(--k-hover-md) !important;
  color: var(--k-text) !important;
  border-color: var(--k-border-lg) !important;
}

/* Danger button */
.btn-danger {
  background: rgba(248,113,113,0.12) !important;
  color: var(--k-red) !important;
  border: 1px solid rgba(248,113,113,0.25) !important;
  border-radius: 10px !important;
  transition: var(--k-t);
}
.btn-danger:hover {
  background: rgba(248,113,113,0.22) !important;
}

/* Follow / friend buttons */
.btn-follow,
[data-type="follow_user"] .btn,
.add-friend-btn {
  background: var(--k-gold-dim) !important;
  color: var(--k-gold) !important;
  border: 1px solid rgba(37,99,235,0.30) !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 6px 18px !important;
  transition: var(--k-t);
}
.btn-follow:hover {
  background: var(--k-gold) !important;
  color: var(--k-text-invert) !important;
}

/* ---- 9. FORMS / INPUTS ---------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select,
.form-control {
  background: var(--k-surface-2) !important;
  border: 1px solid var(--k-border-md) !important;
  color: var(--k-text) !important;
  border-radius: 10px !important;
  padding: 9px 14px !important;
  transition: var(--k-t);
  box-shadow: none !important;
}
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--k-gold) !important;
  box-shadow: 0 0 0 3px var(--k-gold-dim) !important;
  outline: none !important;
  background: var(--k-surface-3) !important;
}
input::placeholder,
textarea::placeholder { color: var(--k-text-muted) !important; }

/* Input group addon */
.input-group-addon {
  background: var(--k-surface-3) !important;
  border-color: var(--k-border-md) !important;
  color: var(--k-text-dim) !important;
  border-radius: 10px 0 0 10px !important;
}

/* ---- 10. DROPDOWNS -------------------------------------------- */
.dropdown-menu,
.dropdown-menu:not(.notfi-dropdown):not([role=combobox]) {
  background: var(--k-surface-2) !important;
  border: 1px solid var(--k-border-md) !important;
  border-radius: var(--k-r) !important;
  box-shadow: var(--k-shadow-lg) !important;
  padding: 6px !important;
}
.dropdown-menu > li > a {
  color: var(--k-text-dim) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  transition: var(--k-t);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: var(--k-hover-md) !important;
  color: var(--k-text) !important;
}
.dropdown-menu .divider {
  background: var(--k-border) !important;
  margin: 4px 0 !important;
}

/* Notification dropdown */
.dropdown-menu.notfi-dropdown {
  background: var(--k-surface-2) !important;
  border: 1px solid var(--k-border-md) !important;
  border-radius: var(--k-r-lg) !important;
  box-shadow: var(--k-shadow-lg) !important;
  min-width: 340px;
  overflow: hidden;
}
.dropdown-menu.notfi-dropdown .notifi_item:hover {
  background: var(--k-hover) !important;
}

/* ---- 11. MODALS ----------------------------------------------- */
.modal-content {
  background: var(--k-surface) !important;
  border: 1px solid var(--k-border-md) !important;
  border-radius: var(--k-r-lg) !important;
  box-shadow: var(--k-shadow-lg) !important;
  overflow: hidden;
}
.modal-header {
  background: var(--k-surface-2) !important;
  border-bottom: 1px solid var(--k-border) !important;
  padding: 16px 20px !important;
}
.modal-title {
  color: var(--k-text) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}
.modal-footer {
  background: var(--k-surface-2) !important;
  border-top: 1px solid var(--k-border) !important;
  border-color: var(--k-border) !important;
  padding: 12px 16px !important;
}
.modal-body { padding: 20px !important; }

/* Modal backdrop */
.modal-backdrop { background: rgba(0,0,0,0.75) !important; }

/* ---- 12. SIDEBAR ---------------------------------------------- */
.sidebar-conatnier .sidebar-profile-style .card.hovercard {
  background: transparent !important;
}
.sidebar-conatnier .sidebar-profile-style .card.hovercard .info .title a {
  color: var(--k-text) !important;
  font-weight: 600 !important;
}
.sidebar-conatnier .sidebar-profile-style .card.hovercard .info .title p {
  color: var(--k-text-dim) !important;
}

/* Sidebar list items */
.sidebar .list-group-item,
.left-sidebar .list-group-item {
  background: transparent !important;
  border-color: var(--k-border) !important;
  color: var(--k-text-dim) !important;
  transition: var(--k-t);
}
.sidebar .list-group-item:hover {
  background: var(--k-hover) !important;
  color: var(--k-text) !important;
}

/* Sidebar title */
.sidebar .sidebar-title-back,
.sidebar h4, .sidebar h3 {
  background: transparent !important;
  color: var(--k-text) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 12px 16px 8px !important;
  border-bottom: 1px solid var(--k-border) !important;
}

/* Friends / people sidebar */
.wo_sidebar_friends,
.wo_sidebar_groups,
.wo_sidebar_pages,
.wo_sidebar_products {
  background: transparent !important;
  border-color: var(--k-border) !important;
}

/* ---- 13. USER AVATARS ----------------------------------------- */
.avatar img,
.post .post-heading .avatar img,
.sidebar .avatar img {
  border-radius: 50% !important;
  border: 2px solid var(--k-border-lg) !important;
  transition: var(--k-t);
}
.avatar img:hover { border-color: var(--k-gold) !important; }

/* Online dot */
.online-dot,
.chat-online-dot {
  background: var(--k-green) !important;
  border: 2px solid var(--k-surface) !important;
  border-radius: 50% !important;
  width: 10px !important;
  height: 10px !important;
}

/* ---- 14. STORIES BAR ------------------------------------------ */
.user-story-container,
.wo-stories-container {
  background: transparent !important;
  margin-bottom: 14px !important;
}
.story-card,
.wo-story-item {
  border-radius: var(--k-r-sm) !important;
  overflow: hidden;
  border: 2px solid var(--k-border) !important;
  transition: var(--k-t);
}
.story-card:hover { border-color: var(--k-gold) !important; }

/* ---- 15. NAV TABS --------------------------------------------- */
.nav-tabs {
  border-bottom: 1px solid var(--k-border) !important;
  margin-bottom: 0 !important;
}
.nav-tabs > li > a {
  color: var(--k-text-dim) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
  font-weight: 500 !important;
  transition: var(--k-t);
  background: transparent !important;
}
.nav-tabs > li > a:hover {
  color: var(--k-text) !important;
  border-bottom-color: var(--k-border-lg) !important;
  background: transparent !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  background: transparent !important;
  color: var(--k-gold) !important;
  border-bottom: 2px solid var(--k-gold) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}
.tab-content { padding: 16px !important; }

/* ---- 16. ALERTS / TOASTS -------------------------------------- */
.alert {
  border-radius: 10px !important;
  border: none !important;
  padding: 12px 16px !important;
  font-weight: 500 !important;
}
.alert-info    { background: rgba(37,99,235,0.10) !important;  color: #60A5FA !important; }
.alert-success { background: rgba(16,185,129,0.10) !important;  color: #34D399 !important; }
.alert-warning { background: rgba(217,119,6,0.10) !important;   color: #FCD34D !important; }
.alert-danger  { background: rgba(248,113,113,0.10) !important; color: #FCA5A5 !important; }

/* ---- 17. LIST GROUPS ------------------------------------------ */
.list-group-item {
  background: var(--k-surface) !important;
  border-color: var(--k-border) !important;
  color: var(--k-text) !important;
  transition: var(--k-t);
}
.list-group-item:first-child { border-radius: var(--k-r-sm) var(--k-r-sm) 0 0 !important; }
.list-group-item:last-child  { border-radius: 0 0 var(--k-r-sm) var(--k-r-sm) !important; }
.list-group-item:hover { background: var(--k-hover) !important; }
.list-group-item.active,
.list-group-item.active:hover {
  background: var(--k-gold-dim) !important;
  color: var(--k-gold) !important;
  border-color: rgba(37,99,235,0.25) !important;
}

/* ---- 18. CHAT / MESSAGES -------------------------------------- */
.chat-container,
.chat-container .online-toggle {
  background: var(--k-surface-2) !important;
  border: 1px solid var(--k-border-md) !important;
  border-radius: var(--k-r) var(--k-r) 0 0 !important;
}
.chat-tab .online-toggle-hdr,
.wow_thread_head {
  background: var(--k-surface-2) !important;
  border-bottom: 1px solid var(--k-border) !important;
  color: var(--k-text) !important;
}
.chat-messages-wrapper {
  background: var(--k-surface) !important;
  border-color: var(--k-border) !important;
}
.chat-messages-wrapper .messages-wrapper .incoming .message-media > a:not(.file-sharing-download-btn) {
  background: var(--k-surface-3) !important;
  border-radius: 12px !important;
}
.message p { color: var(--k-text) !important; }
.chat_main  { color: var(--k-text-muted) !important; }
#sendMessage,
.chat-textarea {
  background: var(--k-surface-2) !important;
  border-color: var(--k-border-md) !important;
  border-radius: 10px !important;
}

/* ---- 19. PROFILE PAGES ---------------------------------------- */
.wo_user_profile .user-bottom-nav,
.wo_user_profile .user-nav {
  background: var(--k-surface) !important;
  border-bottom: 1px solid var(--k-border) !important;
}
.wo_user_profile .user-bottom-nav a {
  color: var(--k-text-dim) !important;
  transition: var(--k-t);
}
.wo_user_profile .user-bottom-nav a:hover,
.wo_user_profile .user-bottom-nav a.active {
  color: var(--k-gold) !important;
  border-bottom: 2px solid var(--k-gold) !important;
}

/* User info card */
.wo_user_side_info li {
  border-color: var(--k-border) !important;
  color: var(--k-text-dim) !important;
  padding: 8px 0 !important;
}
.wo_user_side_info li .split-link {
  color: var(--k-text) !important;
}
.sidebar-user-data .sidebar-listed-user-name,
.wow_hdr_menu_usr_lnk b {
  color: var(--k-text) !important;
}

/* ---- 20. SETTINGS PAGE ---------------------------------------- */
.wo_settings_page .setting-panel .list-group-item {
  background: var(--k-surface-2) !important;
  border-color: var(--k-border) !important;
}
.wo_settings_page .setting-panel .list-group-item.active a {
  color: var(--k-gold) !important;
}
.wo_settings_page h3,
#wo_main_sett_mid .wo_settings_page h3 {
  background: transparent !important;
  color: var(--k-text-dim) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 16px 0 8px !important;
  border-bottom: 1px solid var(--k-border) !important;
  margin-bottom: 0 !important;
}

/* ---- 21. LOGIN PAGE ------------------------------------------- */
.login,
.login form {
  background: var(--k-surface) !important;
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-r-lg) !important;
  box-shadow: var(--k-shadow-lg) !important;
}
.login input,
.login select,
.login textarea { border-radius: 10px !important; }

/* ---- 22. TABLE STYLES ----------------------------------------- */
.table-striped > tbody > tr:nth-of-type(odd) {
  background: rgba(255,255,255,0.025) !important;
}
.table > thead > tr > th {
  color: var(--k-text-dim) !important;
  border-color: var(--k-border) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 10px 12px !important;
}
.table > tbody > tr > td {
  color: var(--k-text) !important;
  border-color: var(--k-border) !important;
  padding: 10px 12px !important;
}
.table-bordered { border-color: var(--k-border) !important; }

/* Forum threads */
.threads-table tr td { border-color: var(--k-border) !important; }
.thread-replies { border-color: var(--k-border) !important; }

/* ---- 23. SCROLLBARS ------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* ---- 24. LOADING / SKELETON ----------------------------------- */
.wo_loading_post {
  background: var(--k-surface) !important;
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-r) !important;
  box-shadow: none !important;
}
.wo_loading_post .loading-post-body::before {
  background: linear-gradient(90deg,
    var(--k-surface) 25%,
    var(--k-surface-2) 50%,
    var(--k-surface) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.5s infinite !important;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- 25. USER FETCH / SUGGESTIONS ----------------------------- */
.user-fetch,
.wo_poke_users,
.featured-users {
  background: var(--k-surface) !important;
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-r) !important;
  box-shadow: none !important;
}
.user-fetch .user-name a,
.wo_poke_users .poke_info .user-name {
  color: var(--k-text) !important;
  font-weight: 600 !important;
}
.user-request-list .user-info a {
  color: var(--k-text-dim) !important;
}

/* ---- 26. MEDIA / IMAGE POSTS ---------------------------------- */
.post .post-description .post-photo-wrap img,
.post .post-description .post-video-wrap {
  border-radius: var(--k-r-sm) !important;
  overflow: hidden;
}

/* Link preview in posts */
.post-fetched-url {
  background: var(--k-surface-2) !important;
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-r-sm) !important;
  transition: var(--k-t);
}
.post-fetched-url:hover {
  background: var(--k-surface-3) !important;
  border-color: var(--k-border-md) !important;
}
.post-fetched-url .fetched-url-text h4 {
  color: var(--k-text) !important;
  font-weight: 600 !important;
}

/* ---- 27. SEARCH PAGE ------------------------------------------ */
.wo_search_page .wo_game_style a,
.wo_search_page .wo_game_style .game-name {
  color: var(--k-text) !important;
}

/* ---- 28. MISC COMPONENTS -------------------------------------- */
/* Bootstrap tags */
.bootstrap-tagsinput {
  background: var(--k-surface-2) !important;
  border-color: var(--k-border-md) !important;
  border-radius: 10px !important;
}
.bootstrap-tagsinput .tag {
  background: var(--k-gold-dim) !important;
  color: var(--k-gold) !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
}

/* Pagination */
.pagination > li > a,
.pagination > li > span {
  background: var(--k-surface) !important;
  border-color: var(--k-border) !important;
  color: var(--k-text-dim) !important;
  border-radius: 8px !important;
  margin: 0 2px !important;
  transition: var(--k-t);
}
.pagination > li > a:hover {
  background: var(--k-surface-2) !important;
  color: var(--k-text) !important;
}
.pagination > .active > a,
.pagination > .active > span {
  background: var(--k-gold) !important;
  border-color: var(--k-gold) !important;
  color: var(--k-text-invert) !important;
}

/* Tooltips */
.tooltip-inner {
  background: var(--k-surface-3) !important;
  color: var(--k-text) !important;
  border: 1px solid var(--k-border-md) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}

/* Progress bars */
.progress {
  background: var(--k-surface-2) !important;
  border-radius: 99px !important;
  height: 8px !important;
  overflow: hidden;
}
.progress-bar {
  background: linear-gradient(90deg, var(--k-gold), var(--k-gold-2)) !important;
  border-radius: 99px !important;
}

/* Badges */
.badge,
.label {
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  padding: 3px 7px !important;
}
.badge-primary, .label-primary {
  background: var(--k-gold-dim) !important;
  color: var(--k-gold) !important;
}

/* ---- 29. DARK MODE OVERRIDE (night cookie) -------------------- */
/* Ensure dark.css gray tones are upgraded to our palette */
.navbar-default,
.chat-container,
.modal-content,
.dropdown-menu,
.list-group,
.panel,
.wo_settings_page,
.sidebar-profile-style,
.wowonder-well,
.tab-container,
.publisher-box,
.blog-h-list,
.read-blog,
.events-list-cover,
.wo_event_profile .event-info-cont,
.wo_page_profile .page-info-cont,
.wo_pokes_cont,
.wo_poke_users,
.featured-users {
  background: var(--k-surface) !important;
}

body { background: var(--k-bg) !important; }
.form-control, input, textarea, select { background: var(--k-surface-2) !important; }

/* Override WoWonder dark.css's #212121 surfaces */
.modal-header,
.chat-container input,
.chat-user-desc,
.chat-messages-wrapper { background: var(--k-surface-2) !important; }

.table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255,255,255,0.025) !important; }

/* Override dark.css border #363636 → our subtle border */
.form-control, textarea, input, select, .table-bordered,
.nav-tabs, .thread-replies, .event_two_blocks li:first-child {
  border-color: var(--k-border-md) !important;
}

/* ---- 30. POST SHARE & RESHARE --------------------------------- */
.bs-callout-default {
  border-left: 3px solid var(--k-gold) !important;
  border-color: var(--k-border) var(--k-border) var(--k-border) var(--k-gold) !important;
  background: var(--k-surface) !important;
  border-radius: var(--k-r) !important;
}
.bs-callout .post-heading .title .main-color {
  color: var(--k-text) !important;
}

/* ---- 31. MOBILE NAV (kupr-bottom-nav override) ---------------- */
#kupr-bottom-nav {
  background: rgba(8,8,8,0.96) !important;
  border-top: 1px solid var(--k-border-md) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.30) !important;
}
#kupr-bottom-nav a { color: var(--k-text-muted) !important; transition: var(--k-t); }
#kupr-bottom-nav a.active,
#kupr-bottom-nav a:hover { color: var(--k-gold) !important; }

/* ---- 32. PRICE TICKER ----------------------------------------- */
#kupr-ticker,
.kupr-ticker-wrap {
  background: rgba(8,8,8,0.88) !important;
  border-bottom: 1px solid var(--k-border) !important;
  backdrop-filter: blur(10px) !important;
}

/* ---- 33. SMOOTH MICRO-INTERACTIONS ---------------------------- */
.post,
.wow_content,
.wowonder-well,
.publisher-box,
.modal-content,
.btn,
.dropdown-menu > li > a,
.list-group-item,
.avatar img {
  transition: var(--k-t);
}

/* Pulse animation for new notification badges */
@keyframes k-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(37,99,235,0); }
}
.new-update-alert:not(.hidden) { animation: k-pulse 2s infinite; }

/* ---- 34. LINK LIST ITEMS (feed people suggestions) ------------ */
.nearby_user_wrapper .user_wrapper_link,
.wo_search_page .wo_game_style .btn-link {
  color: var(--k-text-dim) !important;
}
.nearby_user_wrapper .user_wrapper_link:hover {
  color: var(--k-text) !important;
}

/* ---- 35. SECOND USER COLOR (post meta text) ------------------- */
.second-user-color,
.postFooter .u-floatRight a,
.blog-h-list .middot,
.main-blog-sidebar .popular-articles li .article-info {
  color: var(--k-text-muted) !important;
}

/* ---- 36. EVENTS ------------------------------------------ */
.events-list-cover { border-radius: var(--k-r) !important; overflow: hidden; }
.wo_event_profile .event-info-cont,
.wo_page_profile .page-info-cont {
  border-radius: var(--k-r) !important;
}

/* ---- 37. GROUPS ------------------------------------------- */
.wo_group_profile .group-cover { border-radius: var(--k-r) var(--k-r) 0 0 !important; }

/* ---- 38. CODE BLOCKS -------------------------------------- */
pre, code {
  background: var(--k-surface-3) !important;
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-r-sm) !important;
  color: #a6e22e !important;
  font-size: 13px !important;
}

/* ---- 39. MARKET / PREDICTIONS GLOBAL ---------------------- */
/* Already has its own CSS but ensure card consistency */
.kupr-market-card,
.kupr-pred-card {
  background: var(--k-surface) !important;
  border-color: var(--k-border) !important;
}

/* ---- 40. SELECTION COLOR ---------------------------------- */
::selection {
  background: var(--k-gold-dim);
  color: var(--k-gold-2);
}