/* ==========================================================================
   MetaGram Design Tokens — Clean Dark Grey Theme
   Single unified dark theme with balanced grey tones
   ========================================================================== */

:root,
[data-theme="glass"],
[data-theme="dark"],
[data-color-scheme="dark"],
[data-color-scheme="monochrome"] {
  /* ── App Background ── */
  --mg-bg-app: #080808;
  
  /* ── Surface Scale ── */
  --mg-bg-card: #111111;
  --mg-bg-card-solid: #111111;
  --mg-bg-card-elevated: #161616;
  --mg-bg-surface-hover: rgba(255, 255, 255, 0.04);
  --mg-bg-active-pill: rgba(255, 255, 255, 0.08);
  --mg-bg-input: #0c0c0c;

  /* ── Borders ── */
  --mg-glass-blur: blur(16px);
  --mg-border-subtle: rgba(255, 255, 255, 0.05);
  --mg-border-card: rgba(255, 255, 255, 0.07);
  --mg-border-hover: rgba(255, 255, 255, 0.12);
  --mg-border-focus: rgba(255, 255, 255, 0.22);

  --mg-inner-bevel: none;
  --mg-shadow-glass: 0 2px 8px rgba(0, 0, 0, 0.45);
  --mg-glow-soft: none !important;
  --mg-accent-glow: none !important;

  /* ── Typography ── */
  --mg-text-main: #e8e8e8;
  --mg-text-secondary: #949494;
  --mg-text-muted: #666666;
  --mg-text-dim: #444444;

  /* ── Pills & Glass Buttons ── */
  --mg-glass-pill-bg: rgba(255, 255, 255, 0.04);
  --mg-glass-pill-border: rgba(255, 255, 255, 0.07);
  
  --mg-btn-glass-bg: rgba(255, 255, 255, 0.04);
  --mg-btn-glass-border: rgba(255, 255, 255, 0.07);
  --mg-btn-glass-text: var(--mg-text-secondary);
  --mg-btn-glass-hover-bg: rgba(255, 255, 255, 0.07);
  --mg-btn-glass-hover-border: rgba(255, 255, 255, 0.12);
  --mg-btn-glass-hover-text: var(--mg-text-main);

  /* ── Accent (White on Dark) ── */
  --mg-accent-primary: #ffffff;
  --mg-accent-primary-hover: #d4d4d4;
  --mg-accent-primary-text: #080808;
  --mg-accent-rgb: 255, 255, 255;

  /* ── Radii ── */
  --mg-radius-xs: 6px;
  --mg-radius-sm: 8px;
  --mg-radius-md: 12px;
  --mg-radius-card: 16px;
  --mg-radius-pill: 9999px;

  /* ── Transitions ── */
  --mg-trans-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --mg-trans-smooth: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Anti-Glow: hide all neon/glow elements globally ── */
.mg-stars-hero-star-glow,
.mg-studio-glow-spot,
.mg-gift-detail-glow,
[class*="-glow"],
[class*="glow-"] {
  display: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* ==========================================================================
   Component Overrides — Dark Grey
   ========================================================================== */

/* 1. Surfaces, Cards, Headers, Modals & Sidebars */
.mg-feed-header,
.mg-view-header,
.mg-search-header,
.mg-search-discovery-card,
.mg-settings-card,
.mg-post-card,
.mg-chat-sidebar,
.mg-chat-main,
.mg-chat-header,
.mg-chat-composer,
.mg-sidebar-card,
.mg-right-aside,
.mg-auth-card,
.mg-gift-send-card,
.mg-profile-card,
.mg-community-card,
.mg-studio-card,
.mg-studio-balance-card,
.mg-studio-stat-box,
.mg-stars-action-card,
.mg-stars-history-card,
.mg-stars-balance-card-v2,
.mg-stars-pack-item,
.mg-bottom-bar,
.mg-modal-content,
.mg-empty-state-card,
.mg-search-empty-state {
  background-color: var(--mg-bg-card) !important;
  border-color: var(--mg-border-card) !important;
  box-shadow: var(--mg-shadow-glass) !important;
}

/* 2. Active Tabs & Pills (pill-style only — NOT underline tabs like mg-stars-hist-tab) */
.mg-view-pill.active,
.mg-tab-item.active,
.mg-search-tab.active,
.mg-studio-tab.active {
  background-color: var(--mg-accent-primary) !important;
  color: var(--mg-accent-primary-text) !important;
  border-color: var(--mg-accent-primary) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
  font-weight: 700;
}

/* 3. Inactive Tabs & Pills */
.mg-view-pill:not(.active),
.mg-tab-item:not(.active),
.mg-search-tab:not(.active),
.mg-studio-tab:not(.active) {
  background-color: rgba(255, 255, 255, 0.03) !important;
  color: var(--mg-text-secondary) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

.mg-view-pill:hover:not(.active),
.mg-tab-item:hover:not(.active),
.mg-search-tab:hover:not(.active),
.mg-studio-tab:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--mg-text-main) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* 4. Primary Action Buttons */
.mg-btn-primary,
.mg-btn-auth-primary,
.mg-btn-compose-submit,
#profile-compose-submit-btn,
.mg-stars-topup-btn,
.mg-pack-buy-action-btn:not(:disabled):not(.is-disabled),
.mg-compose-float-btn {
  background-color: var(--mg-accent-primary) !important;
  color: var(--mg-accent-primary-text) !important;
  border-color: var(--mg-accent-primary) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
  font-weight: 700;
}

.mg-btn-primary:hover,
.mg-btn-auth-primary:hover,
.mg-btn-compose-submit:hover,
#profile-compose-submit-btn:hover,
.mg-stars-topup-btn:hover,
.mg-pack-buy-action-btn:not(:disabled):not(.is-disabled):hover,
.mg-compose-float-btn:hover {
  background-color: var(--mg-accent-primary-hover) !important;
  border-color: var(--mg-accent-primary-hover) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* 5. Secondary Buttons */
.mg-btn-secondary,
.mg-btn-auth-secondary,
.mg-settings-subtle-btn,
.mg-stars-action-btn,
.mg-stars-stats-btn,
.mg-auth-switch-btn,
.mg-top-icon-btn,
.mg-chat-header-tool-btn,
.mg-chat-back-btn,
.mg-search-back-btn {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  color: var(--mg-text-main) !important;
}

.mg-btn-secondary:hover,
.mg-btn-auth-secondary:hover,
.mg-settings-subtle-btn:hover,
.mg-stars-action-btn:hover,
.mg-stars-stats-btn:hover,
.mg-auth-switch-btn:hover,
.mg-top-icon-btn:hover,
.mg-chat-header-tool-btn:hover,
.mg-chat-back-btn:hover,
.mg-search-back-btn:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* 6. Follow Buttons */
.mg-follow-action-btn:not(.is-following),
.mg-btn-edit-profile.mg-btn-follow-active {
  background-color: var(--mg-accent-primary) !important;
  color: var(--mg-accent-primary-text) !important;
  border-color: var(--mg-accent-primary) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

.mg-follow-action-btn:not(.is-following):hover,
.mg-btn-edit-profile.mg-btn-follow-active:hover {
  background-color: var(--mg-accent-primary-hover) !important;
  border-color: var(--mg-accent-primary-hover) !important;
}

/* 7. Desktop Sidebar Navigation */
.mg-nav-item.active a {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--mg-text-main) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}

.mg-nav-item.active a svg {
  stroke: var(--mg-text-main) !important;
}

.mg-nav-item:not(.active) a {
  color: var(--mg-text-secondary) !important;
}

.mg-nav-item:not(.active) a svg {
  stroke: var(--mg-text-secondary) !important;
}

.mg-nav-item:not(.active) a:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--mg-text-main) !important;
}

.mg-nav-item:not(.active) a:hover svg {
  stroke: var(--mg-text-main) !important;
}

/* 8. Mobile Navigation Bottom Bar */
.mg-mobile-tab.active {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--mg-text-main) !important;
}

.mg-mobile-tab.active .mg-mob-tab-icon svg {
  stroke: var(--mg-text-main) !important;
}

.mg-mobile-tab.active .mg-mob-avatar-wrap {
  border-color: var(--mg-text-main) !important;
  box-shadow: none !important;
}

.mg-mobile-tab:not(.active) {
  color: var(--mg-text-muted) !important;
}

.mg-mobile-tab:not(.active) .mg-mob-tab-icon svg {
  stroke: var(--mg-text-muted) !important;
}

/* 9. Switches and Sliders */
.mg-switch input:checked + .mg-switch-slider,
.mg-studio-switch input:checked + .mg-studio-slider {
  background-color: var(--mg-accent-primary) !important;
  box-shadow: none !important;
}

.mg-switch input:checked + .mg-switch-slider:before,
.mg-studio-switch input:checked + .mg-studio-slider:before {
  background-color: var(--mg-accent-primary-text) !important;
}

/* 10. Chat Outgoing & Incoming Bubbles & Active Chats */
.mg-message-incoming {
  background-color: #141414 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--mg-text-main) !important;
  box-shadow: none !important;
}

.mg-message-outgoing {
  background-color: #1f1f1f !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--mg-text-main) !important;
  box-shadow: none !important;
}

.mg-chat-item.active {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.mg-chat-unread-badge {
  background-color: var(--mg-accent-primary) !important;
  color: var(--mg-accent-primary-text) !important;
  box-shadow: none !important;
}

.mg-chat-send-btn {
  background-color: var(--mg-accent-primary) !important;
  color: var(--mg-accent-primary-text) !important;
}

/* 11. Form Inputs, Textareas & Search Focus Rings */
input:not(.mg-compose-input):not(#compose-input):not(.mg-search-input):not(#mg-search-input):not(.mg-chat-search-input):not(.mg-comment-input):not(.mg-auth-input):not(.mg-auth-input-wrap input),
textarea:not(.mg-compose-input):not(#compose-input):not(.mg-compose-textarea),
select,
.mg-chat-input,
.mg-header-quick-search {
  background-color: var(--mg-bg-input) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--mg-text-main) !important;
}

input:not(.mg-compose-input):not(#compose-input):not(.mg-search-input):not(#mg-search-input):not(.mg-chat-search-input):not(.mg-comment-input):not(.mg-auth-input):not(.mg-auth-input-wrap input):focus,
textarea:not(.mg-compose-input):not(#compose-input):not(.mg-compose-textarea):focus,
select:focus,
.mg-chat-input:focus {
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06) !important;
}

/* Seamless inputs (compose, search, comments, auth) */
.mg-compose-input,
#compose-input,
.mg-compose-textarea,
.mg-search-input,
#mg-search-input,
.mg-comment-input,
.mg-comment-input-box,
.mg-auth-input-wrap input,
.mg-auth-input {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.mg-compose-input:focus,
#compose-input:focus,
.mg-compose-textarea:focus,
.mg-search-input:focus,
#mg-search-input:focus,
.mg-comment-input:focus,
.mg-comment-input-box:focus,
.mg-comment-input-box:focus-within,
.mg-auth-input-wrap input:focus,
.mg-auth-input:focus {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.mg-header-quick-search:hover {
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
}

.mg-header-quick-search:hover .mg-header-search-kbd {
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: var(--mg-text-main) !important;
}

/* 12. Badges & Indicators */
.mg-view-badge,
.mg-notif-badge,
.mg-comm-count-badge,
.mg-stars-badge {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--mg-text-main) !important;
}

.mg-settings-card-icon {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--mg-text-secondary) !important;
}

/* 13. Likes, Reactions & Engagement */
.mg-action-like.is-liked {
  color: var(--mg-text-main) !important;
}

.mg-action-like.is-liked svg {
  stroke: var(--mg-text-main) !important;
  fill: var(--mg-text-main) !important;
  filter: none !important;
}

.mg-action-btn:hover {
  color: var(--mg-text-main) !important;
}

/* 14. Tags, Category Chips & Profile Badges */
.mg-tag-bubble,
.mg-post-tag,
.mg-profile-tag {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--mg-text-secondary) !important;
}

.mg-tag-bubble:hover,
.mg-post-tag:hover,
.mg-profile-tag:hover,
.mg-profile-tag.is-hovered,
.mg-profile-username-3d:hover,
.mg-profile-username-3d.is-hovered {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: var(--mg-text-main) !important;
}

/* 15. Profile Tabs & Badges */
.mg-follows-tab-btn.active {
  color: var(--mg-text-main) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.mg-follows-tab-btn.active .mg-follows-tab-badge {
  background-color: var(--mg-accent-primary) !important;
  color: var(--mg-accent-primary-text) !important;
}

.mg-profile-nav-tab.active {
  color: var(--mg-text-main) !important;
  border-color: var(--mg-text-main) !important;
}

/* 16. Selection & Scrollbars */
::selection {
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* 17. Studio & Creator Center */
.mg-studio-balance-card {
  background: var(--mg-bg-card) !important;
  border: 1px solid var(--mg-border-card) !important;
  box-shadow: var(--mg-shadow-glass) !important;
}

.mg-studio-star-badge {
  background: var(--mg-accent-primary) !important;
  color: var(--mg-accent-primary-text) !important;
  box-shadow: none !important;
}

.mg-studio-star-badge svg {
  fill: currentColor !important;
}

.mg-studio-pill-badge {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--mg-text-secondary) !important;
}

.mg-studio-stat-box {
  background: var(--mg-bg-card) !important;
  border: 1px solid var(--mg-border-card) !important;
}

.mg-studio-stat-box:hover {
  border-color: var(--mg-border-hover) !important;
}

.mg-studio-sub-icon-wrap {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--mg-text-secondary) !important;
}

.mg-studio-sub-icon-wrap svg {
  fill: var(--mg-text-secondary) !important;
}

#mg-studio-shortcut-stars svg {
  fill: var(--mg-accent-primary-text) !important;
}

.mg-studio-chart-big-num {
  color: var(--mg-text-main) !important;
}

.mg-studio-sponsor-badge {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--mg-text-secondary) !important;
}

/* 18. Stars View */
.mg-stars-balance-card-v2 {
  background: var(--mg-bg-card) !important;
  border: 1px solid var(--mg-border-card) !important;
  box-shadow: var(--mg-shadow-glass) !important;
}

.mg-stars-hero-star-glow {
  display: none !important;
  background: none !important;
}

.mg-stars-hero-3d-star {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3)) !important;
}

.mg-stars-hero-3d-star path:first-of-type {
  fill: var(--mg-text-main) !important;
  filter: none !important;
}

.mg-stars-hero-3d-star path:last-of-type {
  fill: rgba(255, 255, 255, 0.15) !important;
}

.mg-stars-card-icon {
  fill: var(--mg-text-secondary) !important;
}

.mg-stars-topup-btn {
  background: var(--mg-accent-primary) !important;
  color: var(--mg-accent-primary-text) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

.mg-stars-stats-btn {
  background: var(--mg-bg-card-elevated) !important;
  border: 1px solid var(--mg-border-card) !important;
  color: var(--mg-text-main) !important;
}

.mg-stars-stats-btn:hover {
  background: var(--mg-bg-surface-hover) !important;
  border-color: var(--mg-border-hover) !important;
}

.mg-stars-pack-item {
  background: var(--mg-bg-card) !important;
  border: 1px solid var(--mg-border-card) !important;
}

.mg-stars-pack-item:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.mg-pack-featured {
  border-color: rgba(255, 255, 255, 0.16) !important;
}

.mg-stars-pack-item .mg-pack-badge {
  background: var(--mg-accent-primary) !important;
  color: var(--mg-accent-primary-text) !important;
}

/* ── Blur toggle ── */
.no-blur,
[data-blur="off"] {
  --mg-glass-blur: none !important;
}

/* ── Hide light theme elements ── */
#scheme-btn-light,
.mg-theme-toggle-btn,
.dot-light,
[data-scheme="light"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}