/* ==========================================================================
   Azmora Pure Black OLED Mobile UI (100% Solid Pitch-Black Dark Theme)
   Matches Official Reference Designs & EMU Prototypes
   ========================================================================== */

:root {
  --bg-pure: #000000;
  --bg-card: #10131a;
  --bg-card-2: #151822;
  --bg-card-hover: #1c202d;
  --text-pure: #ffffff;
  --text-muted: #8e95a5;
  --text-faint: #5a6170;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --accent-pink: #ff2a70;
  --accent-blue: #0084ff;
  --accent-cyan: #00f0ff;
  color-scheme: dark !important;
}

/* Universal Global Pitch Black Reset */
html, body,
:root,
html[data-hl-theme="light"],
html[data-hl-theme="dark"],
html body.hlv33-ready,
body.hlp33-body,
body.hlv401-profile-body,
body.cd171-body,
body.dr-body,
body.cc158,
body.hl-growth-page,
body.hlv32-ready,
body.lv34-body,
body.lv35-body,
body.lv34-settings-root,
body.has-app-bottom-nav,
.hl-shell,
.cd171-shell,
.dr-shell,
.cc-shell,
.hl-growth-page,
.hl-chat-app {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
  color-scheme: dark !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ==========================================================================
   1. PROFILE PAGE (Exact Match with Reference Image 3: emu.gt.tc/profile.php)
   ========================================================================== */
.hlp33-main,
.hlp33-profile-head,
.hlv33-profile-hero,
.hlv32-profile-summary,
.hlp33-reels-section {
  background: #000000 !important;
  color: #ffffff !important;
}

.hlp33-topbar,
.hlv401-profile-topbar {
  background: #000000 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

.hlp33-title strong,
.az-account-title strong {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

.hlp33-title span {
  color: #8e94a0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.hlv32-profile-summary {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 10px 18px !important;
  background: #000000 !important;
}

.hlp33-avatar-shell {
  position: relative !important;
  width: 90px !important;
  height: 90px !important;
  min-width: 90px !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.hlp33-avatar {
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 0 !important;
  background: #141720 !important;
}

.hlp33-avatar-fallback {
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  background: #181c24 !important;
  color: #ffffff !important;
  display: grid !important;
  place-items: center !important;
  font-size: 32px !important;
  font-weight: 800 !important;
}

.hlp33-avatar-plus {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.hlv32-profile-copy {
  flex: 1 !important;
  min-width: 0 !important;
}

.hlv32-profile-copy h1 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 850 !important;
}

.hlv32-profile-copy h1 span {
  color: #ffffff !important;
}

.hlp33-username {
  color: #8e94a0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
}

.hlv83-profile-edit-pencil {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #12141a !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  display: grid !important;
  place-items: center !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.hlv83-profile-edit-pencil svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #ffffff !important;
}

/* 3-Column Profile Stats */
.hlp33-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  text-align: center !important;
  padding: 16px 12px 10px !important;
  background: #000000 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.hlp33-stats > div,
.hlp33-stats > a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  color: inherit !important;
  text-decoration: none !important;
}

.hlp33-stats .hl-stat-icon {
  display: grid !important;
  place-items: center !important;
  color: #ffffff !important;
  margin-bottom: 3px !important;
}

.hlp33-stats .hl-stat-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #ffffff !important;
}

.hlp33-stats strong {
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 850 !important;
}

.hlp33-stats small,
.hlp33-stats span {
  color: #8e94a0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.hlv32-bio-text {
  padding: 8px 18px 14px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  background: #000000 !important;
}

/* Profile 4-Tabs Bar */
.hlp33-tabs {
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  background: #000000 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  height: 48px !important;
  padding: 0 !important;
}

.hlp33-tab {
  flex: 1 !important;
  height: 48px !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border: 0 !important;
  color: #8e94a0 !important;
  position: relative !important;
  cursor: pointer !important;
}

.hlp33-tab svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #8e94a0 !important;
  fill: none !important;
}

.hlp33-tab.active {
  color: #ffffff !important;
}

.hlp33-tab.active svg {
  stroke: #ffffff !important;
}

.hlp33-tab.active:after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 20% !important;
  right: 20% !important;
  height: 2.5px !important;
  background: #ffffff !important;
  border-radius: 2px !important;
}

/* 3-Column Profile Reels Grid */
.hlp33-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2px !important;
  background: #000000 !important;
  padding: 2px 0 110px !important;
}

.hlp33-grid-item {
  position: relative !important;
  aspect-ratio: 9/14 !important;
  background: #0e1117 !important;
  overflow: hidden !important;
  display: block !important;
}

.hlp33-grid-item img,
.hlp33-grid-item video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.hlp33-views {
  position: absolute !important;
  left: 6px !important;
  bottom: 6px !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
}

.hl86-grid-reel-icon {
  position: absolute !important;
  right: 6px !important;
  top: 6px !important;
  color: #ffffff !important;
}

.hl86-grid-reel-icon svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #ffffff !important;
}


/* ==========================================================================
   2. INBOX / CONVERSATIONS (Exact Match with Reference Image 1: emu.gt.tc/conversation.php)
   ========================================================================== */
.hl-chat-app,
.hl-chat-app.list-view,
.hl-chat-app.conversation-view,
.hl-inbox-scroll,
.hl-story-strip,
.hl-inbox-actions,
.hl-list-panel,
.hl-list-scroll {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #ffffff !important;
}

.hl-chat-bg,
.hl-target-bg,
.hl-v41-note {
  display: none !important;
}

/* Header (Inbox top bar) */
.hl-inbox-head,
.hl-list-head {
  background: #000000 !important;
  border-bottom: 0 !important;
  display: grid !important;
  grid-template-columns: 48px 1fr 48px !important;
  align-items: center !important;
  padding: 10px 14px !important;
  height: 56px !important;
  box-shadow: none !important;
}

.hl-inbox-head h1,
.hl-v44-title h1,
.hl-wordmark {
  font-size: 21px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 !important;
  text-align: center !important;
  letter-spacing: -0.01em !important;
}

.hl-inbox-head-btn,
.hl-head-button,
.hl-back {
  background: transparent !important;
  border: 0 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  text-decoration: none !important;
}

.hl-inbox-head-btn svg,
.hl-head-button svg,
.hl-back svg {
  stroke: #ffffff !important;
  width: 24px !important;
  height: 24px !important;
  fill: none !important;
  stroke-width: 2 !important;
}

/* User Avatar Strip at Top */
.hl-story-strip {
  padding: 14px 18px 8px !important;
  display: flex !important;
  align-items: center !important;
  background: #000000 !important;
  margin: 0 !important;
  min-height: auto !important;
}

.hl-story-card {
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hl-story-avatar-shell {
  position: relative !important;
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  aspect-ratio: 1/1 !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

.hl-story-avatar {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  aspect-ratio: 1/1 !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 2px solid rgba(255, 255, 255, 0.22) !important;
  background: #181c24 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.hl-story-avatar img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1/1 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 0 !important;
  display: block !important;
}

.hl-story-avatar i {
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  font-style: normal !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  background: #1c202a !important;
}

.hl-story-add {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

/* Shortcut Cards (New followers & Activity) */
.hl-inbox-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  padding: 16px 18px !important;
  background: #000000 !important;
  margin: 0 !important;
  align-items: center !important;
}

.hl-inbox-action-card {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
}

.hl-inbox-action-card:first-child {
  padding-right: 14px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.hl-inbox-action-card:last-child {
  padding-left: 14px !important;
}

.hl-inbox-action-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
}

.hl-inbox-action-icon.followers {
  background: #0084ff !important;
  color: #ffffff !important;
}

.hl-inbox-action-icon.activity {
  background: #ff2a70 !important;
  color: #ffffff !important;
}

.hl-inbox-action-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #ffffff !important;
  fill: none !important;
  stroke-width: 2 !important;
}

.hl-inbox-action-card span:nth-child(2) {
  flex: 1 !important;
  min-width: 0 !important;
}

.hl-inbox-action-card strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.hl-inbox-action-card small {
  display: block !important;
  color: #8e95a5 !important;
  font-size: 11px !important;
  margin-top: 3px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.hl-row-chevron {
  width: 14px !important;
  height: 14px !important;
  stroke: #5a6170 !important;
  fill: none !important;
  stroke-width: 2 !important;
  margin-left: auto !important;
  flex: 0 0 14px !important;
}

/* 3 Text Tabs (Mutuals / Recents / Requests) with Underline */
.hl-tabs {
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  background: #000000 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin: 0 !important;
  padding: 0 8px !important;
  height: 46px !important;
  position: static !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.hl-tab {
  flex: 1 !important;
  height: 50px !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  color: #8e95a5 !important;
  border: 0 !important;
  position: relative !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.hl-tab b {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #8e95a5 !important;
  transition: color 0.15s ease !important;
}

.hl-tab.active b {
  color: #ffffff !important;
}

.hl-tab.active:after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 44px !important;
  height: 2.5px !important;
  background: #ffffff !important;
  border-radius: 2px !important;
}

/* Hide any pseudo uppercase panel headers */
.hl-list-panel:before,
.hl-list-panel.active:before {
  display: none !important;
  content: none !important;
}

/* Search bar hidden by default */
.hl-search {
  display: none !important;
}

.hl-search.open {
  display: flex !important;
}

/* Chat Person Rows */
.hl-person-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  text-decoration: none !important;
  background: #000000 !important;
  min-height: 68px !important;
}

.hl-person-row:active {
  background: rgba(255, 255, 255, 0.03) !important;
}

.hl-avatar {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  aspect-ratio: 1/1 !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  background: #20242e !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
}

.hl-avatar img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1/1 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 0 !important;
  display: block !important;
}

.hl-avatar i {
  color: #ffffff !important;
  font-style: normal !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.hl-person-text {
  flex: 1 !important;
  min-width: 0 !important;
}

.hl-person-text strong {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.hl-chat-badge.mutual,
.hl-chat-app.list-view .hl-chat-badge.mutual {
  display: inline-block !important;
  background: #1c2029 !important;
  color: #9da3af !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 6px !important;
  padding: 2px 7px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

.hl-person-text small {
  display: block !important;
  color: #8e95a5 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-top: 3px !important;
}

.hl-person-side {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
}

.hl-row-camera {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  color: #ffffff !important;
}

.hl-row-camera svg {
  width: 24px !important;
  height: 24px !important;
  stroke: #ffffff !important;
  fill: none !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Empty States */
.hl-empty {
  text-align: center !important;
  padding: 60px 20px !important;
  background: #000000 !important;
  color: #ffffff !important;
}

.hl-empty strong {
  display: block !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 6px !important;
}

.hl-empty span {
  display: block !important;
  font-size: 13px !important;
  color: #8e95a5 !important;
  max-width: 320px !important;
  margin: 0 auto !important;
  line-height: 1.4 !important;
}

/* Conversation / Private Message Stream */
.hl-conv-head {
  background: #000000 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.hl-message-stream {
  background: #000000 !important;
}

.hl-chat-app.conversation-view .hl-msg {
  background: #181b24 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.hl-chat-app.conversation-view .hl-message-row.mine .hl-msg {
  background: linear-gradient(135deg, #ff2a70, #7a46f2) !important;
  color: #ffffff !important;
  border: 0 !important;
}

.hl-composer {
  background: #08090d !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.hl-message-input-shell {
  background: #141720 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.hl-composer textarea,
.hl-composer input[name="body"] {
  color: #ffffff !important;
}

.hl-composer textarea::placeholder,
.hl-composer input::placeholder {
  color: #727a8a !important;
}


/* ==========================================================================
   3. CREATOR STUDIO (Exact Match with Reference: creator-studio.php)
   ========================================================================== */
.cd171-body,
.cd171-shell,
.cd171-main {
  background: #000000 !important;
  color: #ffffff !important;
}

.cd171-topbar {
  background: #000000 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(20px) !important;
}

.cd171-icon-btn {
  background: #11141b !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.cd171-icon-btn svg {
  stroke: #ffffff !important;
}

.cd171-title span {
  color: #8e95a5 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
}

.cd171-title h1 {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 850 !important;
}

.cd171-hero {
  background: linear-gradient(160deg, #131620, #0c0e14) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 24px !important;
  padding: 22px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
}

.cd171-status-row > span {
  color: #8e95a5 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
}

.cd171-status-row i {
  background: #1c202a !important;
  color: #c9ced7 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  letter-spacing: 0.1em !important;
  padding: 6px 10px !important;
  border-radius: 99px !important;
}

.cd171-hero h2 {
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
}

.cd171-hero p {
  color: #8e95a5 !important;
  font-size: 13px !important;
}

.cd171-create {
  background: #ffffff !important;
  color: #000000 !important;
  font-weight: 900 !important;
  border-radius: 14px !important;
}

.cd171-overview-grid article {
  background: #11141b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
}

.cd171-overview-grid article.wide {
  background: linear-gradient(160deg, #151822, #0d0f15) !important;
}

.cd171-overview-grid span,
.cd171-inline-metrics i {
  color: #8e95a5 !important;
}

.cd171-overview-grid strong {
  color: #ffffff !important;
}

.cd171-overview-grid small {
  color: #8e95a5 !important;
}

.cd171-cpm-note {
  background: #11141b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  color: #ffffff !important;
}

.cd171-cpm-note b {
  color: #ffffff !important;
}

.cd171-cpm-note small {
  color: #8e95a5 !important;
}

.cd171-sortbar button {
  background: #11141b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #8e95a5 !important;
}

.cd171-sortbar button.active {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

.cd171-reel-row {
  background: #11141b !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 18px !important;
}

.cd171-inline-metrics span {
  background: #161922 !important;
  color: #ffffff !important;
}

.cd171-empty {
  background: #0d0f14 !important;
  border: 1px dashed rgba(255, 255, 255, 0.12) !important;
  border-radius: 22px !important;
  color: #8e95a5 !important;
}


/* ==========================================================================
   4. CREATOR CHALLENGE & DAILY REWARDS (Exact Match with Reference Image 2)
   ========================================================================== */
.dr-body,
.dr-shell,
.dr-shell main,
.cc158,
.cc-shell,
.cc-page,
.daily-rewards-page {
  background: #000000 !important;
  color: #ffffff !important;
}

.dr-top,
.cc-header {
  background: #000000 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dr-back svg {
  stroke: #ffffff !important;
}

.dr-top span,
.cc-kicker {
  color: #8e95a5 !important;
  font-size: 9px !important;
  letter-spacing: 0.16em !important;
  font-weight: 800 !important;
}

.dr-top h1,
.cc-title {
  color: #ffffff !important;
}

.dr-lock {
  background: #11141b !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.dr-hero {
  background: linear-gradient(160deg, #131620, #0c0e14) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
}

.dr-hero h2 {
  color: #ffffff !important;
}

.dr-hero p {
  color: #8e95a5 !important;
}

.dr-ring {
  background: conic-gradient(#ffffff calc(var(--p) * 1%), rgba(255, 255, 255, 0.1) 0) !important;
}

.dr-ring:after {
  background: #11141b !important;
}

.dr-ring b {
  color: #ffffff !important;
}

.dr-ring small {
  color: #8e95a5 !important;
}

.cc-wallet {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.cc-wallet span, .cc-wallet small {
  color: #8e95a5 !important;
}

.cc-wallet b {
  color: #ffffff !important;
}

.cc-counters div {
  background: #11141b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
}

.cc-counters span, .cc-counters small {
  color: #8e95a5 !important;
}

.cc-counters b {
  color: #ffffff !important;
}

.cc-counters em {
  color: #616776 !important;
}

.cc-join {
  background: #11141b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 22px !important;
}

.cc-join span {
  color: #8e95a5 !important;
}

.cc-join h3 {
  color: #ffffff !important;
}

.cc-join p {
  color: #8e95a5 !important;
}

.cc-rules i {
  background: #171b24 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #c9ced7 !important;
}

.cc-join button,
#ccJoin {
  background: #ffffff !important;
  color: #000000 !important;
  font-weight: 900 !important;
  border-radius: 14px !important;
}

.cc-tabs {
  background: #000000 !important;
}

.dr-day {
  background: #11141b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #8e95a5 !important;
}

.dr-day span {
  background: #171a22 !important;
  color: #ffffff !important;
}

.dr-day.selected,
.dr-day.active {
  background: #181c26 !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

.dr-day.selected span,
.dr-day.active span {
  background: #ffffff !important;
  color: #000000 !important;
}

.dr-day.done {
  background: #13161e !important;
  color: #ffffff !important;
}

.dr-day.done span {
  background: #ffffff !important;
  color: #000000 !important;
}

.dr-note {
  background: #0e1117 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dr-note b {
  color: #ffffff !important;
}

.dr-note small {
  color: #8e95a5 !important;
}

.dr-day-panel {
  background: transparent !important;
}

.dr-day-head h3 {
  color: #ffffff !important;
}

.dr-day-head p, .dr-day-head span, .dr-day-value small {
  color: #8e95a5 !important;
}

.dr-day-value b {
  color: #ffffff !important;
}

.dr-task,
.cc-card,
.dr-mission-card {
  background: #11141b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
}

.dr-task.ready {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: #141720 !important;
}

.dr-task-icon {
  background: #161922 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.dr-task-title b {
  color: #ffffff !important;
}

.dr-task-copy p {
  color: #8e95a5 !important;
}

.dr-progress {
  background: #1e222c !important;
}

.dr-progress span {
  background: #ffffff !important;
}

.dr-count {
  color: #8e95a5 !important;
}

.dr-task-action a, .dr-task-action button {
  background: #1c202a !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.dr-task-action .dr-claim {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

.dr-evidence {
  background: #0b0d12 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.dr-withdraw {
  background: #11141b !important;
  border: 1px dashed rgba(255, 255, 255, 0.14) !important;
  border-radius: 20px !important;
}

.dr-withdraw.ready {
  border-style: solid !important;
  background: #141720 !important;
}

.dr-withdraw-icon {
  background: #171b24 !important;
}

.dr-withdraw h3 {
  color: #ffffff !important;
}

.dr-withdraw p, .dr-withdraw span {
  color: #8e95a5 !important;
}

.dr-withdraw button {
  background: #ffffff !important;
  color: #000000 !important;
}

.dr-withdraw button:disabled {
  background: #1c202a !important;
  color: #636a78 !important;
}

.cc169-next-season {
  background: #0d0f14 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
}

.cc169-next-season h3 {
  color: #ffffff !important;
}

.cc169-next-season p, .cc169-next-season span {
  color: #8e95a5 !important;
}


/* ==========================================================================
   5. FLOATING BOTTOM NAVIGATION (Blurry Mirror / Frosted Glass Dock)
   ========================================================================== */
#hlGlobalBottomNav,
.hl76-global-nav,
.hl72-bottom-nav,
.hlv32-bottom-nav,
.hlv33-bottom-nav,
.app-bottom-nav {
  position: fixed !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  left: 16px !important;
  right: 16px !important;
  height: 68px !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(20, 24, 38, 0.50) 25%, rgba(10, 12, 18, 0.62) 100%) !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.38) !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  padding: 0 10px !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55), inset 0 1px 1.5px rgba(255, 255, 255, 0.35), inset 0 -1px 1px rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(28px) saturate(200%) contrast(105%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) contrast(105%) !important;
  z-index: 10000 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

#hlGlobalBottomNav .hl76-nav-item,
.hl76-global-nav .hl76-nav-item,
.hl72-bottom-nav .hl72-nav-item,
.app-bottom-item {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  gap: 3px !important;
  padding: 4px 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  transition: color 0.18s ease, transform 0.15s ease !important;
}

#hlGlobalBottomNav .hl76-nav-item:active,
.hl76-global-nav .hl76-nav-item:active,
.hl72-bottom-nav .hl72-nav-item:active {
  transform: scale(0.92) !important;
}

#hlGlobalBottomNav .hl76-nav-item.active,
.hl76-global-nav .hl76-nav-item.active,
.hl72-bottom-nav .hl72-nav-item.active,
.app-bottom-item.active {
  color: #ffffff !important;
}

#hlGlobalBottomNav .hl76-nav-item small,
.hl76-global-nav .hl76-nav-item small,
.hl72-bottom-nav .hl72-nav-item small {
  color: currentColor !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.2px !important;
}

#hlGlobalBottomNav .hl76-nav-item svg,
.hl76-global-nav .hl76-nav-item svg,
.hl72-bottom-nav .hl72-nav-item svg,
.app-bottom-item svg {
  width: 23px !important;
  height: 23px !important;
  stroke: currentColor !important;
  fill: none !important;
  display: block !important;
}

#hlGlobalBottomNav .hl76-home-icon svg,
.hl76-global-nav .hl76-home-icon svg,
.hl72-bottom-nav .hl72-home-icon svg {
  fill: currentColor !important;
  stroke: none !important;
}

#hlGlobalBottomNav .hl76-rooms-icon,
.hl76-global-nav .hl76-rooms-icon,
.hl72-bottom-nav .hl72-rooms-icon {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#hlGlobalBottomNav .hl76-rooms-icon b,
.hl76-global-nav .hl76-rooms-icon b,
.hl72-bottom-nav .hl72-rooms-icon b {
  position: absolute !important;
  right: -3px !important;
  bottom: 0px !important;
  background: #fe2c55 !important;
  color: #ffffff !important;
  font-size: 6.5px !important;
  font-weight: 900 !important;
  padding: 1px 3.5px !important;
  border-radius: 4px !important;
  line-height: 1 !important;
  letter-spacing: 0.2px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* Center Large (+) Create Button */
#hlGlobalBottomNav .hl76-create,
.hl76-global-nav .hl76-create,
.hl72-bottom-nav .hl72-create,
.create-item {
  flex: 0 0 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  margin: 0 4px !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  transition: transform 0.15s ease !important;
  color: #ffffff !important;
}

#hlGlobalBottomNav .hl76-create:active,
.hl76-global-nav .hl76-create:active,
.hl72-bottom-nav .hl72-create:active {
  transform: scale(0.92) !important;
}

#hlGlobalBottomNav .hl76-create-ring,
.hl76-global-nav .hl76-create-ring,
.hl72-bottom-nav .hl72-create-ring,
.create-disc {
  position: relative !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 50% !important;
  border: 2.5px solid #ffffff !important;
  background: rgba(10, 12, 18, 0.88) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #ffffff !important;
}

/* Center Plus (+) Icon — Supporting Both Vector SVG and Centered i/b Fallback */
#hlGlobalBottomNav .hl76-create-plus,
.hl76-global-nav .hl76-create-plus,
.hl72-bottom-nav .hl76-create-plus,
.hl72-bottom-nav .hl72-create-plus,
.hl72-create-ring svg,
.hl76-create-ring svg {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  stroke: #ffffff !important;
  stroke-width: 2.6 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
  display: block !important;
  margin: auto !important;
  position: relative !important;
  z-index: 3 !important;
}

#hlGlobalBottomNav .hl76-create-plus path,
.hl76-global-nav .hl76-create-plus path,
.hl72-bottom-nav .hl76-create-plus path,
.hl72-bottom-nav .hl72-create-plus path,
.hl72-create-ring svg path,
.hl76-create-ring svg path {
  stroke: #ffffff !important;
  stroke-width: 2.6 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
}

/* Fallback lines when SVG is absent */
html body .hl72-create-ring i,
html body .hl72-create-ring b,
html body .hl76-create-ring i,
html body .hl76-create-ring b,
.create-disc i,
.create-disc b {
  position: absolute !important;
  display: block !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

html body .hl72-create-ring i,
html body .hl76-create-ring i,
.create-disc i {
  width: 22px !important;
  height: 2.6px !important;
}

html body .hl72-create-ring b,
html body .hl76-create-ring b,
.create-disc b {
  width: 2.6px !important;
  height: 22px !important;
}

.hl72-create-ring:has(svg) i,
.hl72-create-ring:has(svg) b,
.hl76-create-ring:has(svg) i,
.hl76-create-ring:has(svg) b {
  display: none !important;
}

/* Inbox Chat Icon & Unread Badge */
#hlGlobalBottomNav .hl76-inbox-icon,
.hl76-global-nav .hl76-inbox-icon,
.hl72-bottom-nav .hl72-inbox-icon {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#hlGlobalBottomNav .hl76-inbox-badge,
.hl76-global-nav .hl76-inbox-badge,
.hl72-bottom-nav .hl72-inbox-badge {
  position: absolute !important;
  top: -3px !important;
  right: -6px !important;
  background: #fe2c55 !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 1px 4.5px !important;
  border-radius: 999px !important;
  min-width: 14px !important;
  text-align: center !important;
  line-height: 1.2 !important;
  box-shadow: 0 2px 6px rgba(254, 44, 85, 0.5) !important;
  border: 1.5px solid #0d0f16 !important;
}

/* Profile Photo Icon */
#hlGlobalBottomNav .hl76-profile img,
.hl76-global-nav .hl76-profile img,
.hl72-bottom-nav .hl72-profile img,
#hlGlobalBottomNav .hl76-profile .hl76-profile-fallback,
.hl76-global-nav .hl76-profile .hl76-profile-fallback,
.hl72-bottom-nav .hl72-profile-fallback {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1.8px solid rgba(255, 255, 255, 0.45) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  background: #1c2030 !important;
  color: #ffffff !important;
  transition: border-color 0.18s ease, transform 0.15s ease !important;
}

#hlGlobalBottomNav .hl76-profile.active img,
.hl76-global-nav .hl76-profile.active img,
.hl72-bottom-nav .hl72-profile.active img,
#hlGlobalBottomNav .hl76-profile.active .hl76-profile-fallback,
.hl76-global-nav .hl76-profile.active .hl76-profile-fallback,
.hl72-bottom-nav .hl72-profile.active .hl72-profile-fallback {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 1.5px #ffffff, 0 2px 8px rgba(255, 255, 255, 0.25) !important;
}


/* ==========================================================================
   6. CARDS, LISTS, SETTINGS, SUBPAGES, ROOMS, WALLET & COMMON CONTROLS
   ========================================================================== */
html,
body,
body.lv34-body,
body.lv35-body,
body.lv35-ready,
body.lv34-settings-root,
.lv34-shell,
.lv35-shell,
.lv34-main,
.lv35-main,
.hlsec-flow {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #ffffff !important;
}

.hl-topbar,
.s59-topbar,
.lv34-topbar,
.lv35-topbar {
  background: #000000 !important;
  background-color: #000000 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

.lv34-back,
.lv34-home,
.lv35-back,
.lv35-home {
  background: #11141b !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.lv34-back svg,
.lv34-home svg,
.lv35-back svg,
.lv35-home svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

.lv34-heading h1,
.lv35-heading h1 {
  color: #ffffff !important;
  font-size: 19px !important;
  font-weight: 800 !important;
}

.lv34-heading span,
.lv35-heading span {
  color: #8e95a5 !important;
  font-weight: 700 !important;
}

.lv34-heading p,
.lv35-heading p {
  color: #8e95a5 !important;
}

/* Settings Hero / VIP card on settings.php */
.lv34-hero {
  background: #11141b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 22px !important;
  box-shadow: none !important;
}

.lv34-hero:before {
  display: none !important;
}

.lv34-profile h2 {
  color: #ffffff !important;
  font-weight: 800 !important;
}

.lv34-profile p {
  color: #8e95a5 !important;
}

.lv34-balance {
  background: #181c26 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
}

.lv34-balance b {
  color: #ffffff !important;
}

.lv34-balance span {
  color: #8e95a5 !important;
}

.lv34-vip-card {
  background: #11141b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.lv34-vip-card b {
  color: #ffffff !important;
}

.lv34-vip-card small {
  color: #8e95a5 !important;
}

/* Section Titles */
.lv34-section-title,
.lv35-section-title {
  margin: 24px 4px 10px !important;
}

.lv34-section-title h2,
.lv35-section-title h2 {
  color: #8e95a5 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.lv34-section-title p,
.lv35-section-title p {
  color: #5a6170 !important;
  font-size: 12px !important;
}

/* Cards & Groups */
.hl-card,
.hl-choice,
.hl-settings-card,
.hl-room-card,
.s59-section,
.s59-item,
.lv34-card,
.lv35-card,
.hlsec-card,
.hlsec-contact-card,
.hl-choice-grid a {
  background: #11141b !important;
  background-color: #11141b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  color: #ffffff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* List Rows & Setting Items */
.lv34-nav-item,
.lv35-nav-item,
.lv34-setting-row,
.lv35-setting-row,
.hlsec-contact-row,
.lv34-account-row {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  padding: 14px 16px !important;
  min-height: 72px !important;
}

.lv34-nav-item:last-child,
.lv35-nav-item:last-child,
.lv34-setting-row:last-child,
.lv35-setting-row:last-child,
.hlsec-contact-row:last-child,
.lv34-account-row:last-child {
  border-bottom: 0 !important;
}

.lv34-nav-item:active,
.lv35-nav-item:active,
.hlsec-contact-row:active {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Icons */
.lv34-nav-icon,
.lv35-nav-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: #181c26 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  display: grid !important;
  place-items: center !important;
}

.lv34-nav-icon svg,
.lv35-nav-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #ffffff !important;
}

.lv34-nav-copy,
.lv35-nav-copy,
.hlsec-contact-copy {
  flex: 1 !important;
  min-width: 0 !important;
}

.lv34-nav-copy b,
.lv35-nav-copy b,
.hlsec-contact-copy b {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  display: block !important;
}

.lv34-nav-copy small,
.lv35-nav-copy small,
.hlsec-contact-copy small {
  color: #8e95a5 !important;
  font-size: 12px !important;
  display: block !important;
  margin-top: 3px !important;
}

.lv34-nav-arrow,
.lv35-nav-arrow {
  color: #636a78 !important;
}

.lv34-nav-arrow svg,
.lv35-nav-arrow svg {
  stroke: #636a78 !important;
}

/* Badges & Status */
.lv34-nav-item em,
.lv35-nav-item em,
.hlsec-status {
  background: #181c26 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-style: normal !important;
}

.hlsec-status.ok {
  background: rgba(0, 200, 115, 0.15) !important;
  border-color: rgba(0, 200, 115, 0.3) !important;
  color: #00e676 !important;
}

.hlsec-status.warn {
  background: rgba(255, 170, 0, 0.15) !important;
  border-color: rgba(255, 170, 0, 0.3) !important;
  color: #ffb300 !important;
}

.hlsec-status.add {
  background: rgba(0, 132, 255, 0.15) !important;
  border-color: rgba(0, 132, 255, 0.3) !important;
  color: #29b6f6 !important;
}

/* Switch Toggles */
.lv34-switch {
  width: 50px !important;
  height: 28px !important;
  background: #222632 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  padding: 2px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

.lv34-switch span {
  width: 22px !important;
  height: 22px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.2s ease !important;
}

.lv34-switch.on {
  background: #ffffff !important;
  border-color: #ffffff !important;
}

.lv34-switch.on span {
  background: #000000 !important;
  transform: translateX(22px) !important;
}

/* Form Controls & Inputs */
.lv34-form {
  padding: 16px !important;
}

.lv34-field span {
  color: #8e95a5 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
}

.lv34-input,
.lv34-textarea,
.lv34-select,
.lv112-choice-trigger,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input.form-control,
textarea {
  background: #0d0f14 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  outline: none !important;
  box-shadow: none !important;
}

.lv34-input:focus,
.lv34-textarea:focus,
input:focus,
textarea:focus {
  border-color: #ffffff !important;
}

/* Action Buttons */
.lv34-btn,
.lv34-primary-btn {
  background: #ffffff !important;
  color: #000000 !important;
  border: 0 !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.lv34-btn.secondary {
  background: #181c26 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.lv34-btn.danger {
  background: #ff3b5c !important;
  color: #ffffff !important;
}

/* Notices & Alerts */
.lv34-notice {
  background: #111520 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #8e95a5 !important;
  border-radius: 14px !important;
}

.lv34-notice a {
  color: #ffffff !important;
  text-decoration: underline !important;
}

.lv34-notice.error {
  background: rgba(255, 59, 92, 0.12) !important;
  border-color: rgba(255, 59, 92, 0.3) !important;
  color: #ff6e8a !important;
}

/* Modals & Dialogs */
.lv34-user-sheet-card,
.hld-card,
.hld-dialog {
  background: #11141b !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 24px !important;
  color: #ffffff !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
}

.lv34-sheet-action {
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.lv34-sheet-action svg {
  stroke: #ffffff !important;
}

.lv34-sheet-cancel {
  background: #181c26 !important;
  color: #ffffff !important;
  border-radius: 14px !important;
}

/* Earnings & Wallet Hero Cards */
.hl-earnings-hero,
.hl-wallet-hero {
  background: linear-gradient(160deg, #131620, #0c0e14) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 22px !important;
}

.hl-earning-grid > div {
  background: #11141b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
}