/* ==========================================================================
   Azmora Dark Cyber Theme Hardening (Cleaned & Fixed)
   ========================================================================== */

:root,
html[data-hl-theme="light"],
html[data-hl-theme="dark"] {
  color-scheme: dark !important;
  --hl-global-bg: #07090e;
  --hl-global-surface: #0c1018;
  --hl-global-surface-2: #131824;
  --hl-global-text: #ffffff;
  --hl-global-muted: #9ea5b3;
  --hl-global-line: rgba(255, 255, 255, 0.10);
  
  /* Brand Accent Colors - NEVER #fff */
  --pink: #ff2a70 !important;
  --purple: #7928ca !important;
  --cyan: #00f0ff !important;
  --hl-pink: #ff2a70 !important;
  --hl-purple: #7928ca !important;
  --hl-cyan: #00f0ff !important;
  --hl401-brand: #ff2a70 !important;
  --hl401-brand2: #7928ca !important;
  --hl42-accent: #00f0ff !important;
  --hl70-pink: #ff2a70 !important;
  --hl68-pink: #ff2a70 !important;
  --hl69-pink: #ff2a70 !important;
  --hl81-pink: #ff2a70 !important;
  --hl100-pink: #ff2a70 !important;
  --hl40-pink: #ff2a70 !important;
  --hl40-cyan: #00f0ff !important;
  --s77-pink: #ff2a70 !important;
  --v32-pink: #ff2a70 !important;
  --v32-pink-soft: rgba(255, 42, 112, 0.2) !important;
  --v32-purple: #7928ca !important;
  --v32-cyan: #00f0ff !important;
  --hlv2-accent: #00f0ff !important;
  --hlv2-accent-2: #7928ca !important;
  --hl-system-pink: #ff2a70 !important;
  --hl-system-cyan: #00f0ff !important;
  --ad-pink: #ff2a70 !important;
  --ad-purple: #7928ca !important;
  --live-pink: #ff2a70 !important;
  --live-purple: #7928ca !important;
  --p33-bg: #07090e !important;
  --p33-panel: #0c1018 !important;
  --p33-panel2: #131824 !important;
  --p33-text: #ffffff !important;
  --p33-muted: #9ea5b3 !important;
  --p33-line: rgba(255, 255, 255, 0.09) !important;
  --p33-pink: #ff2a70 !important;
  --p33-purple: #7928ca !important;
}

html, body {
  background: var(--hl-global-bg) !important;
  color: var(--hl-global-text) !important;
}

body {
  accent-color: var(--cyan) !important;
}

body, button, input, select, textarea {
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

/* Force Dark Mode across everything */
html[data-hl-theme="light"],
html[data-hl-theme="light"] body {
  background: var(--hl-global-bg) !important;
  color: var(--hl-global-text) !important;
}

/* Typography */
h1, h2, h3, h4, h5, h6,
strong, b, label, legend,
[role="heading"] {
  color: #ffffff !important;
}

p, small, .muted, .subtitle, .description, .helper, .hint {
  color: var(--hl-global-muted) !important;
}

/* Standard controls */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea, select {
  background: #111318 !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
}

input::placeholder, textarea::placeholder {
  color: rgba(255, 255, 255, 0.42) !important;
}

select option {
  background: #111318 !important;
  color: #fff !important;
}

/* Bottom Navigation (Blurry Mirror / Frosted Glass Dock) */
#hlGlobalBottomNav,
.hl76-global-nav {
  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;
  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;
}

#hlGlobalBottomNav .hl76-nav-item,
#hlGlobalBottomNav .hl76-nav-item small,
.hl76-global-nav .hl76-nav-item,
.hl76-global-nav .hl76-nav-item small {
  color: rgba(255, 255, 255, 0.65) !important;
}

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

#hlGlobalBottomNav .hl76-create,
.hl76-global-nav .hl76-create {
  color: #ffffff !important;
}

#hlGlobalBottomNav .hl76-create-ring,
.hl76-global-nav .hl76-create-ring {
  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;
}

#hlGlobalBottomNav .hl76-create-plus,
.hl76-global-nav .hl76-create-plus {
  stroke: #ffffff !important;
  stroke-width: 2.5 !important;
}

/* ==========================================================================
   Universal Input Focus Reset - Eliminates Browser Default Blue Focus Ring
   ========================================================================== */
input, textarea, select, button, a {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

input:focus, input:focus-visible, input:active,
textarea:focus, textarea:focus-visible, textarea:active,
select:focus, select:focus-visible, select:active {
  outline: none !important;
  -webkit-focus-ring-color: transparent !important;
  box-shadow: none !important;
}

/* ==========================================================================
   Universal Circular Avatar & Aspect Ratio Enforcement
   ========================================================================== */
img[class*="avatar"], span[class*="avatar"], div[class*="avatar"],
.hl-avatar, .hl-story-avatar, .hlx88-avatar, .hl76-profile img,
.hlp33-avatar, .hlv33-comment-avatar, .lv34-avatar img, .hl-conv-person .hl-avatar {
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

img[class*="avatar"] img, span[class*="avatar"] img, div[class*="avatar"] img,
.hl-avatar img, .hl-story-avatar img, .hlx88-avatar img, .hlp33-avatar img {
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ==========================================================================
   Instagram-Style Story Rings Everywhere Profile Photos Are Rendered
   ========================================================================== */
.has-story.story-unseen,
.story-unseen,
.hl-story-ring-unseen {
  position: relative !important;
  border-radius: 50% !important;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  padding: 2.5px !important;
  box-sizing: border-box !important;
}

.has-story.story-seen,
.story-seen,
.hl-story-ring-seen {
  position: relative !important;
  border-radius: 50% !important;
  background: #3c4149 !important;
  padding: 2px !important;
  box-sizing: border-box !important;
}

.story-unseen img,
.story-seen img,
.hl-story-ring-unseen img,
.hl-story-ring-seen img {
  border: 2px solid #000000 !important;
  border-radius: 50% !important;
}