/* ===== Canvas ===== */
html, body, #root {
  background: #fff;
  color: #111;
}

/* ===== Top nav (single line, left) ===== */
.topbar, .header, .topbar-inner, .hero {
  display: block;
  width: 100%;
  height: 48px;
  border: 0;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: none;
  text-align: left;
}

/* (Optional) tiny logo lockup if present */
.logoWrap, .brandLogoWrap {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 0;
  vertical-align: middle;
  border: 0;
}
.logoWrap img, .brandLogoWrap img,
.logoWrap canvas, .brandLogoWrap canvas,
.logoWrap svg, .brandLogoWrap svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border: 0;
}

/* ===== Search bar under nav (left) ===== */
.search, .header__search {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #eef2f7;
  background: #fff;
}
.search input, .header__search input {
  display: inline-block;
  width: 360px;          /* fixed; not responsive */
  height: 32px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111;
}

/* ===== Feed (vertical list; all-left) ===== */
.feed, .grid, .content, main, section, .container, .wrapper {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

/* Posts/items — flat list */
.post, .postCard, .composerCard, .rightCard, .thread-item, .card, .panel, .tile, .module, .widget, .sheet, .surface {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  border-bottom: 1px solid #f3f4f6; /* thin row divider */
}

/* Chat/bubbles (if present) */
.chatHead, .chatScroll, .composer, .bubble, .leftCol, .rightCol, #messages, .wrap {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

/* Buttons/links — simple */
button, .btn, .pill, .chip, .tag, a {
  display: inline-block;
  height: 32px;
  line-height: 30px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111;
  text-decoration: none;
}

/* Inputs/selects — plain */
input, textarea, select {
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111;
}

/* Images/media — block */
img, canvas, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}

/* Absolutely no responsive rules */


/* ===== AVATAR — global base clamp ===== */
.avatarMenuRoot .avatarBtn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
  flex: 0 0 32px;
  padding: 0;
  line-height: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
}

/* media inside fills the circle */
.avatarMenuRoot .avatarBtn > .avatarImg,
.avatarMenuRoot .avatarBtn > img,
.avatarMenuRoot .avatarBtn > canvas,
.avatarMenuRoot .avatarBtn > svg,
.avatarMenuRoot .avatarBtn > .avatarFallback {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

/* fallback tone */
.avatarMenuRoot .avatarBtn > .avatarFallback {
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #fff;
  background: #0b0b0b;
}
html[data-theme="light"] .avatarMenuRoot .avatarBtn > .avatarFallback {
  background: #e5e7eb;
  color: #111;
}

/* Route-scoped avatar clamps take precedence over global styles */
html[data-route="universe"] .composerAvatarImg,
html[data-route="universe"] .postHeadAvatar,
html[data-route="universe"] .userRowAvatar,
html[data-route="universe"] .commentAvatar{
  width: auto; height: auto; /* let the Universe CSS above set exact px */
}
/* === UNIVERSE: lock composer avatar to 40×40 (wins load order) === */
html[data-route="universe"] .composerTop { 
  grid-template-columns: 40px 1fr; 
  align-items: center;
}
html[data-route="universe"] .composerTop > .composerAvatar { 
  width: 40px; 
  height: 40px; 
  flex: 0 0 40px; 
  overflow: hidden; 
  border-radius: 50%;
}
html[data-route="universe"] .composerTop > .composerAvatar > img.composerAvatarImg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}
/* === UNIVERSE — clamp images inside NOTES === */
html[data-route="universe"] :is(.note, .notes, .noteCard, .noteBody, .noteContent, .noteMedia, .noteText) img,
html[data-route="universe"] :is(.note, .notes, .noteCard, .noteBody, .noteContent, .noteMedia, .noteText) picture img {
  display: block;
  width: 100%;
  height: auto;          /* keep aspect */
  max-height: 40vh;      /* don't let portraits take over */
  object-fit: contain;   /* never crop */
  border: 0;
}

/* if your notes have a dedicated media wrapper, make sure it doesn't force growth */
html[data-route="universe"] :is(.noteMedia, .noteBody, .noteContent) {
  overflow: hidden;      /* trims any weird intrinsic overflow */
}
:root{--hh-icon-color:#0f172a;}
html[data-theme="dark"]{--hh-icon-color:#ffffff;}

/* ============================================================================
   HASH HUMANITY — hh-shell.css (ROOT + 1-COLUMN SHELL, NO PSEUDO)
   Requires UniversePage.jsx to wrap everything in:
     <div className="hh-root">
       <div className="hh-wallpaper" aria-hidden="true" />
       <HeaderNav />
       <div className="hh-shell">...</div>
     </div>
   ============================================================================ */

/* ============================================================================
   0) RESET
   ============================================================================ */
html, body { margin: 0; padding: 0; height: 100%; }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }

/* ============================================================================
   1) TOKENS
   ============================================================================ */
:root{
  --hh-bg: #ffffff;
  --hh-ink: #020617;
  --hh-muted: rgba(15,23,42,.72);

  --hh-header: rgba(245,245,245,.28);
  --hh-header-border: rgba(0,0,0,1);

  --hh-nav-bg: rgba(255,255,255,.92);
  --hh-nav-border: rgba(255,255,255,1);

  /* frosted surfaces */
  --hh-glass: rgba(255,255,255,.1);
  --hh-glass-strong: rgba(255,255,255,.34);
  --hh-border: rgba(15,23,42,1);

  --hh-shadow-1: 0 10px 28px rgba(15,23,42,.18);


  --hh-input-bg: rgba(255,255,255,.92);
  --hh-input-border: rgba(15,23,42,1);

  --hh-btn-bg: rgba(255,255,255,.96);
  --hh-btn-border: rgba(15,23,42,1);

   --hh-icon: #000;

  /* layout */
  --hh-shell-max: 634px;        /* = 650 - 16 (8px each side) */
  --hh-shell-pad-x: 8px;
  --hh-header-offset: 88px;     /* fixed header clearance; adjust if needed */
}
:root{
  --hh-card-gap: 12px;
}

/* Works even if cards are inside extra wrapper divs */
.hh-feed .hh-card{
  margin: 0 0 var(--hh-card-gap) 0 !important;
}

/* Optional: try to avoid extra space after the last card in common cases */
.hh-feed .hh-card:last-child{
  margin-bottom: 0 !important;
}

html[data-theme="dark"]{
  --hh-bg: #020617;
  --hh-ink: #e5e7eb;
  --hh-muted: rgba(229,231,235,.72);

  --hh-header: rgba(5,5,5,.48);
  --hh-header-border: rgba(255,255,255,1);

  --hh-nav-bg: radial-gradient(circle at top left, rgba(16,16,16,.98), rgba(0,0,0,.78));
  --hh-nav-border: rgba(255,255,255,1);

  --hh-glass: rgba(0,0,0,.42);
  --hh-glass-strong: rgba(0,0,0,.52);
  --hh-border: rgba(255,255,255,1);

  --hh-shadow-1: 0 14px 40px rgba(0,0,0,.90);
  --hh-shadow-2: 0 18px 42px rgba(0,0,0,.95);

  --hh-input-bg: rgba(12,12,12,.96);
  --hh-input-border: rgba(249,250,251,1);

  --hh-btn-bg: rgba(0,0,0,.96);
  --hh-btn-border: rgba(249,250,251,1);

  --hh-icon: #fff;
}
body{
  background: var(--hh-bg);
  color: var(--hh-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
;}

/* ============================================================================
   2) ROOT + REAL WALLPAPER LAYER (NO PSEUDO)
   ============================================================================ */
.hh-root{
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow-x: hidden;

  /* theme vars (default = light) */
  --hh-bg: #ffffff;
  --hh-text: rgba(10,12,14,0.92);

  /* wallpaper vars (light = crisp + visible) */
  --hh-wallpaper-opacity: 0.80;
  --hh-wallpaper-filter: contrast(1.12) brightness(1.02);
  --hh-wallpaper-blur: 0px;

  background-color: var(--hh-bg);
  color: var(--hh-text);

  transition:
    background-color 700ms ease 120ms,
    color 700ms ease 120ms;
}

html[data-theme="dark"] .hh-root,
body[data-theme="dark"] .hh-root{
  --hh-bg: #141618; /* charcoal */
  --hh-text: rgba(255,255,255,0.92);

  /* dark = softer wallpaper */
  --hh-wallpaper-opacity: 0.5;
  --hh-wallpaper-filter: brightness(0.5) contrast(3.06);
  --hh-wallpaper-blur: 0px;
}

/* wallpaper must stay fixed behind all content */
.hh-wallpaper{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background: url("/world.png") center top / cover no-repeat;
  /* REMOVE THIS — it causes scroll jitter/flicker */
  /* background-attachment: fixed; */

  opacity: var(--hh-wallpaper-opacity);
  filter: var(--hh-wallpaper-filter) blur(var(--hh-wallpaper-blur));

  /* Force compositor layer so it stops “shimmering” on scroll */
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: paint;

  transition:
    opacity 760ms ease 140ms,
    filter 760ms ease 140ms;
}


/* ============================================================================
   3) HEADER (FIXED)
   ============================================================================ */
.hh-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 10px 18px;
  background: var(--hh-header);
  border-bottom: 1px solid var(--hh-header-border);
  box-shadow: var(--hh-shadow-1);

  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.hh-navRow{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 15px;
  border-radius: 999px;

  background: var(--hh-nav-bg);
  border: 1px solid var(--hh-nav-border);
  box-shadow: 0 0 5px 1px rgba(0,0,0,1);
}

html[data-theme="dark"] .hh-navRow{
  box-shadow: 0 0 5px 1px rgba(255,255,255,.28);
}

.hh-navRow .hh-tab,
.hh-navRow .hh-brand,
.hh-navRow .avatar-tab,
.hh-navRow .hh-themeTab button{
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--hh-icon);
  cursor: pointer;
}

.hh-tab svg { width: 18px; height: 18px; stroke: currentColor; }

.hh-brand{ position: relative; line-height: 0; }
.hh-brand img{ width: 20px; height: 20px; object-fit: contain; user-select: none; -webkit-user-drag: none; }

/* ----------------------------------------------------------------------------
   3A) BRAND LOGO SWAP (SHOW EXACTLY ONE)
   - Supports BOTH naming styles:
     A) .hh-brand-icon--light / .hh-brand-icon--dark (older)
     B) .hh-brand-light / .hh-brand-dark (newer)
   ---------------------------------------------------------------------------- */

/* default: hide all variants */
.hh-brand .hh-brand-icon,
.hh-brand .hh-brand-icon--light,
.hh-brand .hh-brand-icon--dark,
.hh-brand .hh-brand-light,
.hh-brand .hh-brand-dark{
  display: none;
}

/* light theme: show light */
html:not([data-theme="dark"]) .hh-brand .hh-brand-icon--light,
html:not([data-theme="dark"]) .hh-brand .hh-brand-light{
  display: block;
}

/* dark theme: show dark */
html[data-theme="dark"] .hh-brand .hh-brand-icon--dark,
html[data-theme="dark"] .hh-brand .hh-brand-dark{
  display: block;
}

/* keep stacked icons aligned if you use the hh-brand-icon wrapper style */
.hh-brand .hh-brand-icon{
  position: absolute;
  inset: 0;
  margin: auto;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------- */

.avatar-tab{ overflow: hidden; }
.avatar-tab img{ width: 100%; height: 100%; object-fit: cover; display:block; }

/* ============================================================================
   4) ONE-COLUMN SHELL (ALL FEEDS LIVE HERE)
   ============================================================================ */
.hh-shell{
  width: 100%;
  margin: 0 auto;
  padding: calc(var(--hh-header-offset) + 8px) var(--hh-shell-pad-x) 32px;

  max-width: 100%;
}

/* stop growing after 650px viewport: 8px + 634px + 8px */
@media (min-width: 650px){
  .hh-shell{
    max-width: var(--hh-shell-max);
  }
}

/* ============================================================================
   5) GLASS CARDS (NO HOVER RULES DEFINED HERE)
   ============================================================================ */
.hh-card{
  position: relative;
  padding: 16px 16px 14px;
  border-radius: 22px;

  background: var(--hh-glass-strong);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: var(--hh-shadow-2);

  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}

html[data-theme="dark"] .hh-card{
   backdrop-filter: blur(5px) saturate(60%);
  -webkit-backdrop-filter: blur(22px) saturate(60%);
  background: var(--hh-glass-strong);
  border: 1px solid rgba(255,255,255,.18);
}

/* ============================================================================
   6) INPUTS
   ============================================================================ */
.hh-input,
.hh-textarea,
.hh-card input,
.hh-card textarea{
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: 10px 10px;
  border-radius: 12px;

  color: var(--hh-ink);
  background: var(--hh-input-bg);
  border: 1px solid var(--hh-input-border);
  outline: none;
}

.hh-textarea{ resize: vertical; min-height: 90px; }

/* ============================================================================
   7) BUTTONS
   ============================================================================ */
.hh-btn{
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-family: inherit;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  cursor: pointer;
  border: 1px solid var(--hh-btn-border);
  background: var(--hh-btn-bg);
  color: var(--hh-ink);
}

.hh-btn-primary{
  background: #000;
  color: #fff;
  border-color: #000;
}

html[data-theme="dark"] .hh-btn-primary{
  background: #fff;
  color: #000;
  border-color: #fff;
}

.hh-btn-ghost{
  background: transparent;
  border-color: transparent;
  color: rgba(107,114,128,1);
}

.hh-icon-btn{
  border: none;
  background: transparent;
  padding: 6px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--hh-icon);
}

/* ============================================================================
   8) POSTS (NO HOVER RULES DEFINED HERE)
   ============================================================================ */
.hh-post{
  position: relative;
  padding: 18px 20px 16px;
  border-radius: 22px;

  display: flex;
  flex-direction: column;
  gap: 14px;

  background: var(--hh-glass);
  border: 1px solid rgba(255,255,255,.55);

  backdrop-filter: blur(22px) saturate(50%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);

  box-shadow: 0 22px 60px rgba(0,0,0,.22), 0 6px 18px rgba(0,0,0,.16);
}

html[data-theme="dark"] .hh-post{
  background: var(--hh-glass);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 26px 70px rgba(0,0,0,.85), 0 10px 24px rgba(0,0,0,.72);
    backdrop-filter: blur(22px) saturate(50%);
  -webkit-backdrop-filter: blur(22px) saturate(80%);
}

.hh-postHeader{ display:flex; align-items:center; gap: 12px; }
.hh-postUserBtn{ display:flex; align-items:center; gap: 10px; border:none; background:transparent; cursor:pointer; color:inherit; }

.hh-postAvatar{
  width: 42px; height: 42px; border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255,255,255,.40);
}

html[data-theme="dark"] .hh-postAvatar{ box-shadow: 0 0 0 2px rgba(255,255,255,.14); }

.hh-postUsername{ font-weight: 600; font-size: 14px; }
.hh-postTime{ font-size: 11px; opacity: .70; }

.hh-postBody, .hh-commentText{
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
  font-size: 14px;
}

.hh-postBody a, .hh-commentText a{
  color: #0073ff;
  font-weight: 500;
  border-bottom: 1px solid rgba(0,115,255,.35);
}

html[data-theme="dark"] .hh-postBody a,
html[data-theme="dark"] .hh-commentText a{
  color: #8bb7ff;
  border-bottom-color: rgba(139,183,255,.35);
}

.hh-postImage, .hh-postVideo{
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
  background: #000;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 10px 30px rgba(0,0,0,.30), 0 4px 14px rgba(0,0,0,.20);
}

html[data-theme="dark"] .hh-postImage,
html[data-theme="dark"] .hh-postVideo{
  border-color: rgba(255,255,255,.14);
}

/* ============================================================================
   9) MOBILE TIGHTENING
   ============================================================================ */
@media (max-width: 600px){
  :root{ --hh-header-offset: 76px; }

  .hh-post{
    padding: 16px 16px 14px;
    border-radius: 18px;
  }

Video Image code 
 
 .hh-postImage, .hh-postVideo{ border-radius: 14px; }
}
.hh-linkCard{
  display:block;
  height: 100%;
  text-decoration:none;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.86);
  color: #0f172a;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 30px rgba(15,23,42,.08);
  transition: transform .12s ease, box-shadow .12s ease;
}
html[data-theme="dark"] .hh-linkCard{
  background: rgba(2,6,23,.55);
  color: #e5e7eb;
  height: 100%;
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
}

.linkard:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 44px rgba(15,23,42,.12);
}

.hh-linkThumb{
  width:100%;
  height:100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hh-linkBody{ padding: 12px 14px; min-width:0; }
.hh-linkSite{
  font-size:12px; opacity:.72;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hh-linkTitle{
  margin-top:4px;
  font-size:15px; font-weight:800; line-height:1.2;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.hh-linkDesc{
  margin-top:6px;
  font-size:12.5px; opacity:.82; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.hh-linkUrl{
  margin-top:8px;
  font-size:11px; opacity:.65;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* =====================================================================
   DARK MODE: make post composer / inputs readable (text + box + caret)
   ===================================================================== */
html[data-theme="dark"] .hh-root input,
html[data-theme="dark"] .hh-root textarea,
html[data-theme="dark"] .hh-root [contenteditable="true"],
html[data-theme="dark"] .hh-root .hh-input,
html[data-theme="dark"] .hh-root .hh-textarea,
html[data-theme="dark"] .hh-root .hh-composerInput,
html[data-theme="dark"] .hh-root .hh-postInput,
html[data-theme="dark"] .hh-root .postComposer textarea,
html[data-theme="dark"] .hh-root .hh-postComposer textarea {
  background: rgba(0, 0, 0, 0.55) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  caret-color: rgba(255, 255, 255, 0.92) !important;

  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: none;
}

html[data-theme="dark"] .hh-root input::placeholder,
html[data-theme="dark"] .hh-root textarea::placeholder,
html[data-theme="dark"] .hh-root [contenteditable="true"]::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

html[data-theme="dark"] .hh-root input:focus,
html[data-theme="dark"] .hh-root textarea:focus,
html[data-theme="dark"] .hh-root [contenteditable="true"]:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.28) !important;
}
.hh-postBody a.hh-plainLink,
.hh-commentText a.hh-plainLink,
a.hh-plainLink{
  display: inline !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;

  color: #0073ff !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;

  /* don't wrap into 3 lines */
  white-space: nowrap;
}

html[data-theme="dark"] .hh-postBody a.hh-plainLink,
html[data-theme="dark"] .hh-commentText a.hh-plainLink,
html[data-theme="dark"] a.hh-plainLink{
  color: #8bb7ff !important;
}


.hh-loadMoreWrap{
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  padding: 12px 8px 0;
}
.hh-badgeDot{
  position:absolute;
  top:-1px;
  right:-1px;
  width:8px;
  height:8px;
  border-radius:999px;
  background: #3b82f6;

  /* looks like it sits *in* the button, not pasted on */
  box-shadow:
    0 0 0 2px rgba(255,255,255,.92),
    0 0 10px rgba(59,130,246,.55);
}

html[data-theme="dark"] .hh-badgeDot{
  box-shadow:
    0 0 0 2px rgba(0,0,0,.92),
    0 0 12px rgba(59,130,246,.65);
}
.hh-iconWrap{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Profile links: normal blue links, no white pill blocks */
[data-route="profile"] a {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: inline !important;
  color: #1a73e8 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
[data-route="profile"] a:hover { text-decoration-thickness: 2px; }
/* GLOBAL: HH card outline + separation */
.hh-card{
  border: 1px solid rgba(0,0,0,0.55);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.25);
}

/* Optional: nested cards slightly softer so it doesn’t look like a stack of boxes */
.hh-card .hh-card{
  border-color: rgba(0,0,0,0.35);
  box-shadow:
    0 8px 20px rgba(0,0,0,0.14),
    inset 0 0 0 1px rgba(255,255,255,0.22);
}
:root{
  --hh-gap: 12px;
}

/* ✅ 12px between cards everywhere (works even if dashboard.css fights it) */
.hh-card + .hh-card{
  margin-top: var(--hh-gap) !important;
}

/* ✅ If a container uses flex/grid, force its internal gaps too */
.hh-shell,
.hh-page,
.dashboard-col,
.dashboard-metrics,
.dashboard-grid{
  gap: var(--hh-gap) !important;
}

/* Most of your “columns” should actually stack cards */
.dashboard-col,
.dashboard-metrics{
  display: flex !important;
  flex-direction: column !important;
}

.hh-searchWrap {
    width: min(720px, calc(100% - 24px));
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
  }


/* =========================================================
   MOBILE CENTERING — Universe page + SearchBar
   ========================================================= */
@media (max-width: 640px) {
  /* Ensure page doesn't introduce side offset */
  .hh-universePage,
  .hh-universePage .hh-shell,
  .hh-universePage .hh-searchWrap {
    box-sizing: border-box;
  }

  /* Center the main column */
  .hh-universePage .hh-shell {
    width: min(720px, calc(100% - 24px)); /* predictable centered column */
    margin-left: auto;
    margin-right: auto;
  }

  /* Center the search block */
  .hh-universePage .hh-searchWrap {
    width: min(720px, calc(100% - 24px));
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
  }

  /* Force the SearchBar component to fill the centered column */
  .hh-universePage .hh-searchWrap > * {
    width: 100%;
  }

  /* Optional: if your SearchBar uses an <input> inside */
  .hh-universePage .hh-searchWrap input,
  .hh-universePage .hh-searchWrap textarea {
    width: 100%;
  }
}
.hh-wallpaper,
.hh-overlayTop,
.hh-overlayTop2 {
  pointer-events: none !important;
}

.hh-wallpaper {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.hh-root,
.hh-shell,
.hh-headerWrap {
  position: relative;
  z-index: 1;
}
.hh-post,
.hh-postBody,
.hh-cardContent {
  overflow: hidden;
}

.hh-post img,
.hh-postBody img,
.hh-cardContent img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* ============================================================================
   11) PRESENCE ATOM (ROOM USERS) — CANONICAL (NO CLIPPING OF BADGES)
   - Avatar is clipped; badges are NOT.
   ============================================================================ */

.hh-userList{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-start;
}

/* Outer atom */
.hh-presenceAtom{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  width:72px;
  gap:6px;
  user-select:none;
}

/* Speaking glow affects the NODE ring */
.hh-presenceAtom.hh-speaking .hh-atomNode{
  box-shadow:
    0 0 0 2px rgba(59,130,246,.45),
    0 0 18px rgba(59,130,246,.45);
}

/* Node MUST NOT clip badges */
.hh-atomNode{
  position:relative;
  width:44px;
  height:44px;
  border-radius:999px;
  overflow:visible; /* critical: badges sit outside the circle */
}

/* Clip only the avatar image */
.hh-atomAvatarClip{
  position:relative;
  width:100%;
  height:100%;
  border-radius:999px;
  overflow:hidden; /* critical: only image is clipped */
  z-index:1;
}

.hh-atomAvatar{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Badges float above the avatar (not clipped) */
.hh-atomBadge{
  position:absolute;
  width:16px;
  height:16px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--hh-btn-bg);
  border:1px solid var(--hh-btn-border);
  color:var(--hh-icon);
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  z-index:5; /* above avatar */
  pointer-events:none;
}

.hh-atomBadge.tl{top:-4px;left:-4px;}
.hh-atomBadge.tr{top:-4px;right:-4px;}
.hh-atomBadge.br{bottom:-4px;right:-4px;}
.hh-atomBadge.bl{bottom:-4px;left:-4px;}

.hh-atomName{
  font-size:11px;
  line-height:1.1;
  font-weight:800;
  max-width:72px;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:.92;
}


/* =========================================================
   DISCUSSIONS ROOM — CONTROL BAR BUTTONS (CIRCULAR ICONS)
   ========================================================= */
.hh-roomControls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
}

/* Force the 3 main room control buttons to be true circles, regardless of any
   inherited/pill button styling elsewhere in HH. */
.hh-roomControls button,
.hh-roomControls .hh-roomBtn{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  padding:0 !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  box-sizing:border-box !important;
  -webkit-appearance:none;
  appearance:none;
}

.hh-roomBtn{
  /* sizing + radius are forced above for safety */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--hh-btn-bg);
  border:1px solid var(--hh-btn-border);
  color:var(--hh-icon);
  cursor:pointer;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}

.hh-roomBtn svg{
  width:20px;
  height:20px;
}

/* =========================================================
   PRESENCE LIST SPACING FIX
   ========================================================= */
.hh-userList{
  padding:25px;
}


/* =====================================================================
   DiscussionsRoom: top control icons (hamburger / mic / leave)
   We use the same .hh-iconBtn class as the JSX.
   Force true circle geometry regardless of inherited button styles.
   ===================================================================== */

button.hh-iconBtn{
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-grid !important;
  place-items: center !important;
  line-height: 1 !important;
}

button.hh-iconBtn > svg{
  width: 20px;
  height: 20px;
}
/* ================= Profile: Likes/Comments pills (no background) ================= */

/* remove pill background + border */
html[data-route="profile"] button[title="Likes"],
html[data-route="profile"] button[title="Comments"]{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* light mode = black */
html[data-route="profile"] button[title="Likes"],
html[data-route="profile"] button[title="Comments"]{
  color: #000 !important;
}

/* dark mode = white */
html[data-route="profile"][data-theme="dark"] button[title="Likes"],
html[data-route="profile"][data-theme="dark"] button[title="Comments"]{
  color: #fff !important;
}

/* in case your app sets theme on <html data-theme="dark"> */
html[data-theme="dark"][data-route="profile"] button[title="Likes"],
html[data-theme="dark"][data-route="profile"] button[title="Comments"]{
  color: #fff !important;
}

/* make the emoji/icon inherit the same color */
html[data-route="profile"] button[title="Likes"] span,
html[data-route="profile"] button[title="Comments"] span{
  color: inherit !important;
}



/* === THREAD PROFESSIONAL POLISH === */

/* Modal overlay + card (not see-through) */
.hh-modalOverlay{
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.hh-modalCard{
  width: min(720px, calc(100% - 24px));
  padding: 16px !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 120px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}
html[data-theme="dark"] .hh-modalCard,
body.dark .hh-modalCard{
  background: rgba(10,10,12,0.90) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.92) !important;
}
html:not([data-theme="dark"]) .hh-modalCard,
body:not(.dark) .hh-modalCard{
  background: rgba(255,255,255,0.97) !important;
  border: 1px solid rgba(0,0,0,0.14) !important;
  color: rgba(0,0,0,0.92) !important;
}

/* Tight, consistent action buttons */
.hh-threadIcon.hh-iconBtn{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  line-height: 1;
  font-size: 16px;
  padding: 0 !important;
}
.hh-threadActions{ display:flex; align-items:center; gap:8px; }

/* Replies IN the same comment card */
.hh-threadReplies{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
html:not([data-theme="dark"]) .hh-threadReplies{
  border-top: 1px solid rgba(0,0,0,0.10);
}
.hh-threadReplyRow{
  display: flex;
  gap: 10px;
  padding: 10px 0;
}
.hh-threadReplyRow + .hh-threadReplyRow{
  border-top: 1px solid rgba(255,255,255,0.08);
}
html:not([data-theme="dark"]) .hh-threadReplyRow + .hh-threadReplyRow{
  border-top: 1px solid rgba(0,0,0,0.08);
}
.hh-threadReplyBody{ flex:1; min-width:0; }
.hh-threadReplyMeta{ display:flex; gap:8px; align-items:baseline; font-size:12px; opacity:.92; }
.hh-threadName{ font-weight: 900; }
.hh-threadTime{ opacity:.70; }

/* Reaction pill style (works in dark + light) */
.hh-reactPill{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}
.hh-reactPill[data-active="1"]{
  background: rgba(255,255,255,0.16);
}
html:not([data-theme="dark"]) .hh-reactPill{
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(0,0,0,0.04);
}
html:not([data-theme="dark"]) .hh-reactPill[data-active="1"]{
  background: rgba(0,0,0,0.08);
}


/* === LIVE AVATAR CLAMP (prevents hero-avatar) === */
.hh-threadAvatar{
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  max-width: 34px;
  max-height: 34px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.hh-threadAvatarImg{
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  display: block !important;
}


/* === THREAD MEDIA (match UniverseFeed feel) === */
.hh-threadMedia{
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 18px;
  display: block;
  margin-top: 10px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.12);
}
html:not([data-theme="dark"]) .hh-threadMedia,
body:not(.dark) .hh-threadMedia{
  border: 1px solid rgba(0,0,0,0.10);
}


/* === THREAD ICON BUTTONS (match UniverseFeed: no white circles) === */
.hh-threadIcon.hh-iconBtn{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: var(--hh-icon-color) !important;
  padding: 6px !important;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px !important;
  box-shadow: none !important;
}
html:not([data-theme="dark"]) .hh-threadIcon.hh-iconBtn,
body:not(.dark) .hh-threadIcon.hh-iconBtn{
  border: 1px solid rgba(0,0,0,0.14) !important;
}
.hh-threadIcon.hh-iconBtn svg{
  display:block;
}


/* === REPLY DISTINCT (replies are NOT cards; they live inside the parent comment card) === */
.hh-threadReplies{
  margin-left: 44px;          /* keeps replies visually attached to parent card */
  padding-left: 12px;
  border-left: 2px solid rgba(255,255,255,0.14);
}
html:not([data-theme="dark"]) .hh-threadReplies,
body:not(.dark) .hh-threadReplies{
  border-left: 2px solid rgba(0,0,0,0.12);
}

/* Reply rows are compact, not full-card blocks */
.hh-threadReplyRow{
  padding: 10px 0;
}

.hh-threadReplies .hh-threadAvatar{
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  max-width: 28px;
  max-height: 28px;
}

.hh-threadReplies .hh-threadAvatarImg{
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
}

.hh-threadReplyMeta{
  font-size: 11px;
  opacity: .88;
}

.hh-threadReplyText{
  font-size: 13px;
  opacity: .95;
}

/* Optional subtle “reply bubble” feel without becoming a card */
.hh-threadReplyBody{
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}
html:not([data-theme="dark"]) .hh-threadReplyBody,
body:not(.dark) .hh-threadReplyBody{
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.10);
}



/* === THREAD CLEANUP OVERRIDES (kill random lines + align buttons) === */

/* Stop connector/indent lines from taking over */
.hh-threadReplies{
  margin-left: 44px !important;
  padding-left: 0 !important;
  border-left: none !important;
  border-top: none !important;
}

/* Remove extra separators inside replies */
.hh-threadReplyRow + .hh-threadReplyRow{
  border-top: none !important;
}

/* Make reply bubble subtle and clean (no harsh borders) */
.hh-threadReplyBody{
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}
html:not([data-theme="dark"]) .hh-threadReplyBody,
body:not(.dark) .hh-threadReplyBody{
  background: rgba(0,0,0,0.025) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}

/* Align action buttons consistently */
.hh-threadActions{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
.hh-threadIcon.hh-iconBtn{
  background: transparent !important;
  box-shadow: none !important;
}

/* Ensure icons never drift vertically */
.hh-threadIcon.hh-iconBtn svg{
  vertical-align: middle;
}

/* Prevent any accidental borders on cards in thread */
.hh-threadCard, .hh-threadCardInner{
  border-left: none !important;
}
/* === THREAD OVERRIDES (no extra lines, no emoji circles, icons match UniverseFeed) === */

/* Kill any thread connector/guide lines */
.hh-threadReplies,
.hh-threadLine,
.hh-threadBranch,
.hh-threadRail{
  border: none !important;
  box-shadow: none !important;
}

/* No separators that look like random lines */
.hh-threadReplyRow,
.hh-threadReplyRow + .hh-threadReplyRow,
.hh-threadReplies{
  border-top: none !important;
}

/* Icon buttons: NO white circles, NO borders. Keep 36px tap target. */
.hh-threadIcon.hh-iconBtn{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 999px !important;
}

/* Ensure globe/translate is black in light mode, white in dark mode */
html:not([data-theme="dark"]) .hh-threadIcon,
body:not(.dark) .hh-threadIcon{ color: #000 !important; }
html[data-theme="dark"] .hh-threadIcon,
body.dark .hh-threadIcon{ color: #fff !important; }

/* Actions row: menu pushed to the right */
.hh-threadActions{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}
.hh-threadMenuBtn{
  margin-left: auto !important;
}

/* Replies stay inside parent comment card but look nested without extra rails */
.hh-threadReplies{
  margin-left: 44px !important;
  padding-left: 0 !important;
  margin-top: 10px !important;
}

/* Replies: compact bubble, no borders that look like lines */
.hh-threadReplyBody{
  background: rgba(0,0,0,0.03) !important;
  border: none !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .hh-threadReplyBody,
body.dark .hh-threadReplyBody{
  background: rgba(255,255,255,0.06) !important;
}

/* Remove any default outline/box around the reply icon button */
.hh-threadIcon.hh-iconBtn:focus,
.hh-threadIcon.hh-iconBtn:focus-visible{
  outline: none !important;
}
/* ================= THREAD HARD OVERRIDES (NO LINES / NO CIRCLES) ================= */
.hh-root[data-route="universe-thread"] .hh-card,
.hh-root[data-route="universe-thread"] .hh-threadReplies,
.hh-root[data-route="universe-thread"] .hh-threadReplyRow{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important; /* remove “line” artifacts from shadows */
}

/* Kill any left rails / separators inside replies */
.hh-root[data-route="universe-thread"] .hh-threadReplies{
  border-left: 0 !important;
}
.hh-root[data-route="universe-thread"] .hh-threadReplyRow + .hh-threadReplyRow{
  border-top: 0 !important;
}

/* THREAD ICON BUTTONS: no white circles, no squares, no outlines */
.hh-root[data-route="universe-thread"] .hh-threadIcon.hh-iconBtn,
.hh-root[data-route="universe-thread"] .hh-threadIcon{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important; /* removes any “round button” inheritance */
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
}
.hh-root[data-route="universe-thread"] .hh-threadIcon.hh-iconBtn:focus,
.hh-root[data-route="universe-thread"] .hh-threadIcon.hh-iconBtn:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* Only thumbs-up should look like an action */
.hh-root[data-route="universe-thread"] .hh-threadThumb{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.08) !important;
}
html:not([data-theme="dark"]) .hh-root[data-route="universe-thread"] .hh-threadThumb{
  border: 1px solid rgba(0,0,0,0.14) !important;
  background: rgba(0,0,0,0.04) !important;
}

/* Translate icon: BLACK in light mode */
html:not([data-theme="dark"]) .hh-root[data-route="universe-thread"] .hh-threadTranslate{
  color: #0f172a !important;
}

/* Hamburger/menu to the far right */
.hh-root[data-route="universe-thread"] .hh-threadActions{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.hh-root[data-route="universe-thread"] .hh-threadMenuBtn{
  margin-left: auto !important;
}

/* ================= UniverseThread: corner actions + card separation ================= */
.hh-threadCornerActions{
  position:absolute;
  top:10px;
  right:12px;
  display:flex;
  flex-direction: column;
  align-items:flex-end;
  gap:6px;
  z-index:3;
}

/* Translation icon: black in light, white in dark */
.hh-threadCornerActions .hh-threadIcon{
  color: rgba(0,0,0,.88) !important;
}
html[data-theme="dark"] .hh-threadCornerActions .hh-threadIcon,
html.dark .hh-threadCornerActions .hh-threadIcon,
body.dark .hh-threadCornerActions .hh-threadIcon{
  color: rgba(255,255,255,.92) !important;
}

.hh-threadReplyBody{
  position: relative;
}

/* Make hh-cards stand off the wallpaper in light mode; glow softly in dark mode */
.hh-card{
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.65);
}
html[data-theme="dark"] .hh-card,
html.dark .hh-card,
body.dark .hh-card{
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.65);
}


.translate-icon{
  color: #000 !important;
  opacity: .9;
}
html.dark .translate-icon,
body.dark .translate-icon,
html[data-theme="dark"] .translate-icon{
  color: #fff !important;
}


.hh-threadCornerActions .hh-iconBtn{
  background: transparent !important;
}


.hh-threadNewCommentBtn{
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(0,0,0,.32) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 22px rgba(0,0,0,.10) !important;
  color: rgba(0,0,0,.90) !important;
  min-height: 54px !important;
  display:flex !important;
  align-items:center !important;
  font-weight: 800 !important;
  letter-spacing: .1px !important;
}
html.dark .hh-threadNewCommentBtn,
body.dark .hh-threadNewCommentBtn,
html[data-theme="dark"] .hh-threadNewCommentBtn{
  background: rgba(18,20,23,.62) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 40px rgba(0,0,0,.55) !important;
  color: rgba(255,255,255,.94) !important;
}
html.dark .hh-threadNewCommentBtn,
body.dark .hh-threadNewCommentBtn,
html[data-theme="dark"] .hh-threadNewCommentBtn{
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(0,0,0,.32) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 22px rgba(0,0,0,.10) !important;
  color: rgba(0,0,0,.90) !important;
  min-height: 54px !important;
  display:flex !important;
  align-items:center !important;
  font-weight: 800 !important;
  letter-spacing: .1px !important;
}
html.dark .hh-threadNewCommentBtn,
body.dark .hh-threadNewCommentBtn,
html[data-theme="dark"] .hh-threadNewCommentBtn{
  background: rgba(18,20,23,.62) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 40px rgba(0,0,0,.55) !important;
  color: rgba(255,255,255,.94) !important;
}


.hh-translateBtn{
  color:#000 !important;
}
html.dark .hh-translateBtn,
body.dark .hh-translateBtn,
html[data-theme="dark"] .hh-translateBtn{
  color:#fff !important;
}


.hh-translateBtn .translate-icon{
  color: inherit !important;
}


/* thread text spacing */
.hh-threadReplyBody{
  padding-right: 96px; /* avoids text under corner icons */
}
.hh-threadBody,
.hh-threadCommentBody,
.hh-threadRootBody{
  padding-right: 56px;
}


.hh-threadNewCommentInput{
  background: rgba(255,255,255,.90) !important;
  border: 1px solid rgba(0,0,0,.32) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important;
  color: rgba(0,0,0,.90) !important;
  outline: none !important;
}
.hh-threadNewCommentInput:focus{
  border-color: rgba(0,0,0,.45) !important;
}
html.dark .hh-threadNewCommentInput,
body.dark .hh-threadNewCommentInput,
html[data-theme="dark"] .hh-threadNewCommentInput{
  background: rgba(18,20,23,.62) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
}
.hh-threadNewCommentSend{
  background: rgba(0,0,0,.08) !important;
  border: 1px solid rgba(0,0,0,.22) !important;
}
html.dark .hh-threadNewCommentSend,
body.dark .hh-threadNewCommentSend,
html[data-theme="dark"] .hh-threadNewCommentSend{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.92) !important;
}


.hh-threadBackBtn{
  background: transparent !important;
  border: 1px solid rgba(0,0,0,.28) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
html.dark .hh-threadBackBtn,
body.dark .hh-threadBackBtn,
html[data-theme="dark"] .hh-threadBackBtn{
  border: 1px solid rgba(255,255,255,.28) !important;
  color: rgba(255,255,255,.92) !important;
}


/* thread card visibility boost */
html.dark .hh-card,
body.dark .hh-card,
html[data-theme="dark"] .hh-card{
  box-shadow: 0 18px 54px rgba(0,0,0,.62), 0 0 22px rgba(255,255,255,.06) !important;
}


/* remove reaction pills */
.hh-reactPill{
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.hh-reactPill[data-active="1"]{
  background: transparent !important;
}


/* no pill buttons */
.hh-threadBackBtn,
.hh-threadNewCommentSend{
  box-shadow: none !important;
}


/* FINAL SEND BUTTON FIX */
.hh-threadNewCommentSend{
  background: transparent !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: rgba(0,0,0,.9) !important;
}
html.dark .hh-threadNewCommentSend,
body.dark .hh-threadNewCommentSend,
html[data-theme="dark"] .hh-threadNewCommentSend{
  background: transparent !important;
  color: rgba(255,255,255,.92) !important;
}


/* =========================
   CARD OUTLINES (LIKE COMMENT BOX)
   ========================= */
.hh-card{
  border: 1px solid rgba(0,0,0,.85) !important; /* strong black outline */
  box-shadow: 0 14px 34px rgba(0,0,0,.18) !important;
}
html.dark .hh-card,
body.dark .hh-card,
html[data-theme="dark"] .hh-card{
  border: 1px solid rgba(255,255,255,.85) !important; /* strong white outline */
  box-shadow: 0 18px 54px rgba(0,0,0,.62), 0 0 22px rgba(255,255,255,.06) !important;
}

/* Also outline any nested “reply cards” if they use their own class */
.hh-threadReplyCard,
.hh-threadCommentCard,
.hh-threadRootCard{
  border: 1px solid rgba(0,0,0,.85) !important;
}
html.dark .hh-threadReplyCard,
body.dark .hh-threadReplyCard,
html[data-theme="dark"] .hh-threadReplyCard,
html.dark .hh-threadCommentCard,
body.dark .hh-threadCommentCard,
html[data-theme="dark"] .hh-threadCommentCard,
html.dark .hh-threadRootCard,
body.dark .hh-threadRootCard,
html[data-theme="dark"] .hh-threadRootCard{
  border: 1px solid rgba(255,255,255,.85) !important;
}

/* =========================
   REMOVE ALL “WHITE PILL” BACKGROUNDS
   ========================= */
.hh-pill,
.pill,
.chip,
.badge{
  background: transparent !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* Common button pills */
.hh-iconBtn,
.hh-threadBackBtn,
.hh-threadNewCommentSend{
  background: transparent !important;
  box-shadow: none !important;
}

/* Any generic rounded “pill” buttons */
button[style*="borderRadius: 999"],
button[style*="border-radius: 999"]{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}

/* =========================
   REMOVE BACKGROUND BEHIND EMOJI REACTIONS (EVERYWHERE)
   ========================= */
.hh-reactPill,
.hh-reactPill *{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* Light mode: make cards stand off the wallpaper */
.hh-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 50px rgba(0,0,0,.14);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}

/* Dark mode: keep frosted charcoal, still separated */
html.dark .hh-card,
body.dark .hh-card,
html[data-theme="dark"] .hh-card,
body[data-theme="dark"] .hh-card{
  background: rgba(18,20,23,.68);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}
/* =========================
   CANONICAL HH-CARD (FROSTED + VISIBLE)
   Put this at the VERY BOTTOM of hh-shell.css
   ========================= */

/* Light mode: frosted glass + BLACK outline */
html:not([data-theme="dark"]) .hh-card,
body:not(.dark) .hh-card{
  background: rgba(255,255,255,0.34) !important; /* frosted */
  border: 1px solid rgba(0,0,0,0.55) !important; /* black outline */
  box-shadow:
    0 18px 55px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
}

/* Dark mode: frosted charcoal + WHITE outline + soft glow */
html[data-theme="dark"] .hh-card,
html.dark .hh-card,
body.dark .hh-card{
  background: rgba(0,0,0,0.52) !important; /* frosted charcoal */
  border: 1px solid rgba(255,255,255,0.22) !important; /* white outline */
  box-shadow:
    0 22px 70px rgba(0,0,0,0.55),
    0 0 18px rgba(255,255,255,0.07) !important; /* soft glow */
  backdrop-filter: blur(22px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(120%) !important;
}
/* =========================
   HH-CARD OUTLINES (LIGHT/DARK)
   Paste at VERY BOTTOM of hh-shell.css
   ========================= */

/* Light mode: black outline + visible frosted */
html:not(.dark):not([data-theme="dark"]) .hh-card,
body:not(.dark) .hh-card{
  border: 1px solid rgba(0,0,0,.55) !important;      /* black outline */
  background: rgba(255,255,255,.34) !important;      /* frosted */
  box-shadow: 0 18px 55px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
}

/* Dark mode: white outline + frosted charcoal + soft glow */
html.dark .hh-card,
body.dark .hh-card,
html[data-theme="dark"] .hh-card{
  border: 1px solid rgba(255,255,255,.22) !important; /* white outline */
  background: rgba(0,0,0,.52) !important;            /* frosted charcoal */
  box-shadow:
    0 22px 70px rgba(0,0,0,.55),
    0 0 18px rgba(255,255,255,.07) !important;       /* soft glow */
  backdrop-filter: blur(22px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(120%) !important;
}
/* =========================
   THREAD COMPOSER: remove inner lines + kill Send background
   ========================= */

/* The whole composer row wrapper (textarea + send) */
.hh-threadComposerRow,
.hh-threadComposerWrap,
.hh-threadNewCommentInput {
  background: transparent !important;   /* removes grey slab behind Send */
  box-shadow: none !important;          /* removes inset line/shading */
}

/* Keep ONE clean outer outline only (optional: comment this block out if you want no outline) */
.hh-threadComposerRow,
.hh-threadComposerWrap {
  border: 1px solid rgba(0,0,0,.35) !important;
  border-radius: 18px !important;
}

/* Remove the inner textarea border + any inset line */
.hh-threadNewCommentInput textarea,
.hh-threadNewCommentInput input,
.hh-threadNewCommentInput {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* If there’s a divider line between textarea and Send, kill it */
.hh-threadNewCommentSend {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Some layouts add a separator via border-left on the Send button */
.hh-threadNewCommentSend,
.hh-threadNewCommentSend * {
  border-left: none !important;
}

/* Dark mode outline if you kept the outer outline */
html.dark .hh-threadComposerRow,
body.dark .hh-threadComposerRow,
html[data-theme="dark"] .hh-threadComposerRow,
html.dark .hh-threadComposerWrap,
body.dark .hh-threadComposerWrap,
html[data-theme="dark"] .hh-threadComposerWrap {
  border: 1px solid rgba(255,255,255,.22) !important;
}

/* ================================
   Composer Modal (Reply/Comment)
   Isolated styles: only affects modal with --composer marker
================================ */

/* Overlay */
.hh-modalOverlay--composer {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  padding: 18px;

  background: rgba(0,0,0,.38);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Dark mode overlay (if you use .dark on html) */
.dark .hh-modalOverlay--composer {
  background: rgba(0,0,0,.58);
}

/* Card */
.hh-modalCard--composer {
  width: min(760px, calc(100vw - 28px));
  border-radius: 22px;
  overflow: hidden;

  background: rgba(248,249,252,.96);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 32px 120px rgba(0,0,0,.22);

  /* kill any inherited haze */
  opacity: 1;
  filter: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Dark card */
.dark .hh-modalCard--composer {
  background: rgba(18,20,24,.94);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 40px 140px rgba(0,0,0,.70);
}

/* Header */
.hh-modalCard--composer > div:first-child {
  padding: 14px 16px 10px !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.dark .hh-modalCard--composer > div:first-child {
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Title (the {title} div) */
.hh-modalCard--composer > div:first-child > div:first-child {
  font-weight: 900 !important;
  font-size: 16px !important;
  line-height: 1.15 !important;
  opacity: 1 !important;
  letter-spacing: .2px;
  color: rgba(0,0,0,.88);
}

.dark .hh-modalCard--composer > div:first-child > div:first-child {
  color: rgba(255,255,255,.92);
}

/* Body wrapper (whatever wraps {children}) */
.hh-modalCard--composer > div:nth-child(2) {
  padding: 16px !important;
}

/* Inputs inside composer */
.hh-modalCard--composer textarea,
.hh-modalCard--composer input[type="text"],
.hh-modalCard--composer input[type="url"],
.hh-modalCard--composer input[type="number"] {
  width: 100%;
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 16px; /* prevent iOS zoom */
  line-height: 1.35;

  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.90);

  outline: none;
}

.dark .hh-modalCard--composer textarea,
.dark .hh-modalCard--composer input[type="text"],
.dark .hh-modalCard--composer input[type="url"],
.dark .hh-modalCard--composer input[type="number"] {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
}

/* Focus */
.hh-modalCard--composer textarea:focus,
.hh-modalCard--composer input:focus {
  border-color: rgba(0,0,0,.22);
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}

.dark .hh-modalCard--composer textarea:focus,
.dark .hh-modalCard--composer input:focus {
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}

/* Footer row buttons (Attach / Cancel / Send) */
.hh-modalCard--composer button {
  border-radius: 12px;
}

/* Make the action row feel like Pulse (spacing + alignment) */
.hh-modalCard--composer .hh-modalActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

/* Secondary buttons (Attach/Cancel) */
.hh-modalCard--composer .hh-btnSecondary {
  padding: 8px 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  color: rgba(0,0,0,.85);
}

.dark .hh-modalCard--composer .hh-btnSecondary {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}

/* Primary button (Send) */
.hh-modalCard--composer .hh-btnPrimary {
  padding: 8px 18px;
  border: none;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(216,255,243,1), rgba(182,245,227,1));
  color: rgba(0,0,0,.90);
}

.dark .hh-modalCard--composer .hh-btnPrimary {
  background: linear-gradient(135deg, rgba(159,255,229,1), rgba(124,247,212,1));
  color: rgba(0,0,0,.92);
}

/* Close button (top right X) */
.hh-modalCard--composer .hh-modalClose {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(0,0,0,.03) !important;
}

.dark .hh-modalCard--composer .hh-modalClose {
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
}
/* =========================
   HH Modal (Thread Composer)
   ========================= */

.hh-modalOverlay{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  z-index: 9000;

  /* Frosted backdrop like HH */
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Make the modal card feel like hh-shell/hh-card */
.hh-modalCard{
  width: min(720px, calc(100vw - 28px));
  max-height: min(78vh, 720px);
  overflow: hidden;

  border-radius: 18px;
  padding: 12px;

  /* Default (light) */
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(0,0,0,0.18);
  box-shadow: 0 18px 60px rgba(0,0,0,0.18);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}

/* Dark mode override */
html.dark .hh-modalCard,
[data-theme="dark"] .hh-modalCard{
  background: rgba(14,16,20,0.78);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 22px 70px rgba(0,0,0,0.70);
}

/* Close button: no random circles, clean HH icon button */
.hh-modalClose{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  line-height: 1;

  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
}

html.dark .hh-modalClose,
[data-theme="dark"] .hh-modalClose{
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.07);
}

/* Composer textarea inside modal (and thread inline composer) */
.hh-threadNewCommentInput,
.hh-modalCard textarea{
  width: 100%;
  color: inherit;

  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);

  outline: none;
}

html.dark .hh-threadNewCommentInput,
[data-theme="dark"] .hh-threadNewCommentInput,
html.dark .hh-modalCard textarea,
[data-theme="dark"] .hh-modalCard textarea{
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
}

/* Send button in the thread composer */
.hh-threadNewCommentSend{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: inherit;
}

html.dark .hh-threadNewCommentSend,
[data-theme="dark"] .hh-threadNewCommentSend{
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.07);
}
/* UniverseThread: make the little menu buttons match HH glass */
.hh-root[data-route="universe-thread"] .hh-menu button {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.85);
  color: #000;
  box-shadow: none;
}

body[data-theme="dark"] .hh-root[data-route="universe-thread"] .hh-menu button,
body.theme-dark .hh-root[data-route="universe-thread"] .hh-menu button {
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.16);
  color: #fff;
}

.hh-root[data-route="universe-thread"] .hh-menu button:active {
  transform: translateY(1px);
  opacity: 0.92;
}
/* Universe composer footer row: icons left, follow control right */
.hh-shell .hhComposerActions{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  flex-wrap:wrap;            /* iPhone fix */
}

.hh-shell .hhComposerFollow{
  margin-left:auto;          /* pushes it to the right */
  white-space:nowrap;
}

/* On tight iPhones: let Follow drop cleanly to its own line */
@media (max-width: 430px){
  .hh-shell .hhComposerFollow{
    width:100%;
    margin-left:0;
    display:flex;
    justify-content:flex-end;
  }
}
/* FILE: src/Styles/LandingPage.css
   Landing route only (LandingPage sets: html[data-route="landing"])
*/

/* 0) Hard-stop any theme flash */
html[data-route="landing"],
html[data-route="landing"] body,
html[data-route="landing"] #root,
html[data-route="landing"] .hh-landing{
  background: #fff !important;
  color: #0b1220;
  color-scheme: light;
}

/* 1) Tokens */
html[data-route="landing"]{
  /* Frost needs LOW alpha so the backdrop shows through */
  --hh-glass-strong: rgba(255,255,255,.16);
  --hh-glass-soft: rgba(255,255,255,.10);
  --hh-ink: #0b1220;
}

/* 2) Globe layer (fixed + centered + big) */
html[data-route="landing"] .globeLayer,
html[data-route="landing"] #globe-landing{
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background: #fff !important; /* prevents any “gray canvas” flash */
}

html[data-route="landing"] .globeLayer .globeBW,
html[data-route="landing"] #globe-landing .globeBW{
  width: min(1900px, 165vmin) !important;
  height: auto !important;
  max-height: 150vmin !important;

  transform: translateY(7vh) scale(1.08) !important;

  opacity: 0.96 !important;
  object-fit: contain !important;
  object-position: center !important;

  /* Your PNG has faint square/lines inside it.
     This washes them out without ruining the globe. */
  filter: grayscale(1) contrast(1.35) brightness(1.06) blur(0.10px) !important;

  background: transparent !important;
  box-shadow: none !important;
  user-select: none !important;
}

/* 3) Ensure real content sits above globe */
html[data-route="landing"] .hh-header,
html[data-route="landing"] .hh-main,
html[data-route="landing"] .hh-footer{
  position: relative;
  z-index: 5;
  background: transparent !important;
}

/* Kill any opaque panels coming from shell css */
html[data-route="landing"] .hh-main,
html[data-route="landing"] .hh-main-inner,
html[data-route="landing"] .hh-container{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 4) Header */
html[data-route="landing"] .hh-header{
  padding-top: 22px;
  padding-bottom: 8px;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-route="landing"] .hh-header-inner{
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
}

html[data-route="landing"] .hh-brandWrap{
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0;
}

html[data-route="landing"] .hh-logo{
  width: 100px;
  height: 100px;
  object-fit: contain;
  display: block;
  opacity: 0.95;
}

html[data-route="landing"] .hh-brand{
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.05;
  color: #0b1220;
}

html[data-route="landing"] .hh-powered{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-top: -4px;
}

/* 5) Ticker */
html[data-route="landing"] .hh-hello{
  margin-top: calc(clamp(25px, 3.2vh, 44px) + 100px) !important;
}

html[data-route="landing"] .hh-ticker{
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

html[data-route="landing"] .hh-tw1{ font-weight: 800; opacity: 0.92; }
html[data-route="landing"] .hh-tw2{ font-weight: 950; }

/* 6) Layout */
html[data-route="landing"] .hh-main{
  padding-top: calc(clamp(16px, 3vh, 44px) + 20px) !important;
}

html[data-route="landing"] .hh-main-inner{
  display: grid;
  justify-items: center;
  text-align: center;
}

/* 7) THE ACTUAL FROSTED CARD */
html[data-route="landing"] .hh-card--frost,
html[data-route="landing"] .hh-card.hh-card--frost{
  width: min(430px, 92vw) !important;
  padding: 18px 18px 16px !important;
  border-radius: 22px !important;

  /* translucent + blur = frost */
  background: linear-gradient(180deg, var(--hh-glass-strong) 0%, var(--hh-glass-soft) 100%) !important;
  border: 1px solid var(--hh-border) !important;

  backdrop-filter: blur(26px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(165%) !important;

  text-align: center !important;
  overflow: hidden;
  transform: translateZ(0);
}

html[data-route="landing"] .hh-title{
  margin: 0;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.01em;
  color: #0b1220;
}

html[data-route="landing"] .hh-sub{
  margin: 6px 0 14px;
  font-size: 13px;
  opacity: 0.78;
  color: #0b1220;
}

html[data-route="landing"] .hh-cta{
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin: 12px 0;
}

/* Small alert box for WorldID errors */
html[data-route="landing"] .hh-alert{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(220,38,38,0.25);
  background: rgba(220,38,38,0.08);
  color: #7f1d1d;
  font-weight: 800;
  font-size: 12px;
}

/* Buttons */
html[data-route="landing"] .hh-btn,
html[data-route="landing"] .hh-cta button{
  appearance: none;
  border: 0;
  cursor: pointer;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(180deg, #111 0%, #000 100%);
  box-shadow: 0 10px 22px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

html[data-route="landing"] .hh-btn:hover,
html[data-route="landing"] .hh-cta button:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.26);
}

html[data-route="landing"] .hh-btn:disabled{
  opacity: .65;
  cursor: not-allowed;
  transform: none;
}

/* Language */
html[data-route="landing"] .hh-lang{
  display: grid;
  gap: 8px;
  justify-items: center;
  margin-top: 12px;
}

html[data-route="landing"] .hh-lang-label{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.62;
}

html[data-route="landing"] .hh-lang-select{
  width: min(360px, 78vw);
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.20);
  background: rgba(255,255,255,0.92);
  padding: 0 12px;
  font-weight: 800;
  color: #0f172a;
}

/* 8) Footer */
html[data-route="landing"] .hh-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 6;
  padding: 0 12px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-route="landing"] .hh-legal-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

html[data-route="landing"] .hh-sep{ opacity: 0.45; }

html[data-route="landing"] .hh-link{
  color: rgba(15,23,42,0.78);
  text-decoration: none;
  font-weight: 800;
  font-size: 11px;
}

html[data-route="landing"] .hh-link:hover{
  color: rgba(15,23,42,1);
  text-decoration: underline;
}

html[data-route="landing"] .hh-copyright{
  margin-top: 12px;
  font-size: 12px;
  opacity: 0.70;
  text-align: center;
}

/* 9) Dev modal — make it look professional */
html[data-route="landing"] .hh-devOverlay{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,0.50);
  z-index: 9999;
}

html[data-route="landing"] .hh-devModal{
  width: min(440px, 94vw);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;

  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  color: #0b1220;

  box-shadow: 0 24px 80px rgba(0,0,0,0.40);
  border: 1px solid rgba(255,255,255,0.55);
}

html[data-route="landing"] .hh-devHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.00));
  border-bottom: 1px solid rgba(15,23,42,0.10);
  font-weight: 950;
  letter-spacing: .02em;
}

html[data-route="landing"] .hh-devClose{
  appearance: none;
  border: 0;
  background: rgba(0,0,0,0.06);
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

html[data-route="landing"] .hh-devClose:hover{
  background: rgba(0,0,0,0.10);
}

html[data-route="landing"] .hh-devForm{
  padding: 16px;
  display: grid;
  gap: 12px;
}

html[data-route="landing"] .hh-devLabel{
  display: grid;
  gap: 8px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,0.85);
}

html[data-route="landing"] .hh-devInput{
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.18);
  background: rgba(255,255,255,0.96);
  padding: 0 12px;
  font-weight: 800;
  color: #0b1220;
  outline: none;
}

html[data-route="landing"] .hh-devInput:focus{
  border-color: rgba(0,0,0,0.40);
  box-shadow: 0 0 0 4px rgba(0,0,0,0.08);
}

html[data-route="landing"] .hh-devMsg{
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid transparent;
}

html[data-route="landing"] .hh-devMsg--err{
  border-color: rgba(220,38,38,0.25);
  background: rgba(220,38,38,0.08);
  color: #7f1d1d;
}

html[data-route="landing"] .hh-devMsg--ok{
  border-color: rgba(22,163,74,0.25);
  background: rgba(22,163,74,0.08);
  color: #064e0a;
}

html[data-route="landing"] .hh-devActions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}

html[data-route="landing"] .hh-btn-ghost{
  background: rgba(0,0,0,0.06) !important;
  color: #0b1220 !important;
  box-shadow: none !important;
}

html[data-route="landing"] .hh-btn-ghost:hover{
  background: rgba(0,0,0,0.10) !important;
}

html[data-route="landing"] .hh-devTip{
  font-size: 12px;
  opacity: 0.75;
  margin-top: 6px;
}

/* Fallback if blur unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  html[data-route="landing"] .hh-card--frost,
  html[data-route="landing"] .hh-card.hh-card--frost{
    background: rgba(255,255,255,0.88) !important;
  }
}
/* ===== 6) Footer: remove the boxed “squares” on links ===== */
html[data-route="landing"] .hh-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 5;
  padding: 0 12px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* This is the key: override any "button link" styles from hh-shell */
html[data-route="landing"] .hh-legal-nav a,
html[data-route="landing"] .hh-link {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: inline !important;
  text-decoration: none;
  font-weight: 800;
  font-size: 11px;
  color: rgba(15,23,42,0.78);
}
html[data-route="landing"] .hh-legal-nav a:hover,
html[data-route="landing"] .hh-link:hover {
  color: rgba(15,23,42,1);
  text-decoration: underline;
}

/* ===== 7) Fallback if blur unsupported ===== */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-route="landing"] .hh-card.hh-card--frost {
    background: rgba(255, 255, 255, 0.86) !important;
  }
}/* Discussions UI (HH-native, CornyChat-inspired layout) */

.hh-discussions {
  width: 100%;
}

.hh-discussionsGrid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 14px;
  align-items: start;
}

@media (max-width: 900px) {
  .hh-discussionsGrid {
    grid-template-columns: 1fr;
  }
}

/* Left panel (Rooms) */
.hh-roomsPanel {
  overflow: hidden;
}

.hh-roomsHeader {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
}

.hh-roomsSearch {
  flex: 1;
  min-width: 0;
}

.hh-roomsList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px 12px;
}

.hh-roomRow {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 10px;
  border-radius: 14px;
  cursor: pointer;
  user-select: none;
}

.hh-roomRow:hover {
  filter: brightness(1.06);
}

.hh-roomRowActive {
  outline: 1px solid rgba(255, 255, 255, 0.14);
}

.hh-roomMeta {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hh-roomTitle {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hh-roomSub {
  opacity: 0.78;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right panel (Thread) */
.hh-threadPanel {
  overflow: hidden;
  min-height: 520px;
  display: flex;
  flex-direction: column;
}

.hh-threadTopbar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hh-threadTitle {
  font-weight: 800;
  font-size: 16px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hh-threadBody {
  flex: 1;
  min-height: 240px;
  padding: 12px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hh-msg {
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.hh-msgHeader {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
  opacity: 0.92;
}

.hh-msgName {
  font-weight: 800;
  font-size: 13px;
}

.hh-msgTime {
  font-size: 12px;
  opacity: 0.7;
}

.hh-msgText {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.35;
}

.hh-threadComposer {
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  gap: 10px;
  align-items: center;
}

.hh-threadInput {
  flex: 1;
  min-width: 0;
}
/* ==========================================================================
   EDIT PROFILE — HH-CARD MODE
   Layout + form polish only.
   Theme (light/dark) comes from hh-shell.css.
   ========================================================================== */

#editprofile-page{
  overflow-x: hidden;
}

/* Keep content aligned like other pages (right under HeaderNav) */
.editprofile-shell{
  width: 100%;
}

/* This is the "bump it up" behavior: match other pages spacing */
.editprofile-center{
  width: 100%;
  min-width: 0;
  padding: 0 12px 40px;
  box-sizing: border-box;
}

/* The card uses hh-card visuals; we only size/space */
.editprofile-card{
  margin-top: 0;
}

/* inner spacing */
.editprofile-cardInner{
  display: grid;
  gap: 14px;
}

/* field blocks */
.editprofile-field{
  display: grid;
  gap: 8px;
}

.editprofile-label{
  font-size: 14px;
  font-weight: 800;
  opacity: 0.9;
}

/* Inputs: don’t fight HH theme — use transparent-ish fields */
.editprofile-input,
.editprofile-textarea{
  width: 100%;
  box-sizing: border-box;

  padding: 12px 14px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);

  color: inherit;
  outline: none;
}

/* Light mode: darker border + cleaner background */
html[data-theme="light"] .editprofile-input,
html[data-theme="light"] .editprofile-textarea{
  border: 1px solid rgba(15,23,42,0.16);
  background: rgba(255,255,255,0.70);
}

/* Dark mode: true HH black-glass fields */
html[data-theme="dark"] .editprofile-input,
html[data-theme="dark"] .editprofile-textarea{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.28);
}

.editprofile-textarea{
  min-height: 120px;
  resize: vertical;
}

.editprofile-file{
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 14px;

  border: 1px dashed rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  color: inherit;
}

html[data-theme="light"] .editprofile-file{
  border-color: rgba(15,23,42,0.20);
  background: rgba(255,255,255,0.72);
}

html[data-theme="dark"] .editprofile-file{
  border-color: rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.22);
}

/* 2-col upload section on desktop */
.editprofile-grid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 720px){
  .editprofile-grid2{
    grid-template-columns: 1fr;
  }
}

/* Audio block */
.editprofile-audioWrap{
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.editprofile-audioLabel{
  font-size: 12px;
  opacity: 0.85;
}

.editprofile-audio{
  width: min(360px, 100%);
}

.editprofile-audioEmpty{
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.75;
}

/* Errors */
.editprofile-error{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(220,38,38,0.12);
  font-weight: 800;
}

.editprofile-loading{
  font-weight: 800;
  opacity: 0.85;
}

/* Buttons — keep your contrast rule */
.editprofile-actions{
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.editprofile-save,
.editprofile-cancel{
  width: min(320px, 92%);
  height: 46px;
  margin: 0 auto;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 900;
  border: none;
}

/* Light: black pill / white text */
html[data-theme="light"] .editprofile-save{
  background: #000;
  color: #fff;
}

/* Dark: white pill / black text */
html[data-theme="dark"] .editprofile-save{
  background: rgba(255,255,255,0.92);
  color: rgba(2,6,23,0.95);
}

.editprofile-cancel{
  font-weight: 800;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: inherit;
}

html[data-theme="light"] .editprofile-cancel{
  border-color: rgba(15,23,42,0.18);
  background: rgba(255,255,255,0.78);
  color: #000;
}

.editprofile-save:hover,
.editprofile-cancel:hover{
  transform: translateY(-1px);
}

.editprofile-save:active,
.editprofile-cancel:active{
  transform: translateY(0px);
}

.editprofile-save:disabled,
.editprofile-cancel:disabled{
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}
/* FILE: src/Styles/content-page.css
   Pro content pages: landing-style background + frosted glass cards */

/* Route scope */
html[data-route="content"],
html[data-route="content"] body,
html[data-route="content"] #root {
  min-height: 100%;
}

/* Base canvas matches landing vibe */
html[data-route="content"] body {
  background: #000 !important;
  color: #fff !important;
  color-scheme: dark;
  overflow-x: hidden;
}

/* Background layer (landing-style image wash) */
html[data-route="content"] .hh-content-page {
  position: relative;
  min-height: 100dvh;
  color: #fff;
}

/* This is your landing background feel */
html[data-route="content"] .hh-content-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  /* base */
  background: #000;

  /* world image overlay */
  background-image:
    radial-gradient(1200px 700px at 50% 20%, rgba(255,255,255,0.10), transparent 60%),
    url("/world.png");

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.55;
}

/* Keep content above bg */
html[data-route="content"] .hh-page-main,
html[data-route="content"] .hh-content-header,
html[data-route="content"] .hh-prose {
  position: relative;
  z-index: 2;
}

/* Width helpers */
html[data-route="content"] .hh-max-wide {
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: clamp(16px, 3.6vw, 48px);
}

html[data-route="content"] .hh-max-narrow {
  max-width: 72ch;
  margin: 0 auto;
  padding-inline: clamp(16px, 3.6vw, 48px);
}

html[data-route="content"] .hh-max-full {
  max-width: none;
  width: 100%;
  padding-inline: clamp(16px, 3.6vw, 48px);
}

/* Padding presets */
html[data-route="content"] .hh-pad-sm { padding-block: clamp(10px, 2vh, 24px); }
html[data-route="content"] .hh-pad-md { padding-block: clamp(14px, 3vh, 40px); }
html[data-route="content"] .hh-pad-lg { padding-block: clamp(18px, 3.6vh, 56px); }

/* Pro frosted card (landing-style) */
html[data-route="content"] .hh-card--frost,
html[data-route="content"] .hh-card {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(16px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
  border-radius: 18px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.42) !important;
  color: #fff !important;
  padding: clamp(16px, 2.2vw, 24px);
}

/* Header card spacing */
html[data-route="content"] .hh-content-header {
  margin-bottom: clamp(14px, 3vh, 24px);
  text-align: center;
}

/* Title typography */
html[data-route="content"] .hh-h1 {
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.015em;
  margin: 0 0 8px 0;
}

html[data-route="content"] .hh-subtle {
  margin: 0;
  opacity: 0.78;
  font-size: 14px;
}

/* Prose */
html[data-route="content"] .hh-prose {
  font-size: 16px;
  line-height: 1.68;
}

html[data-route="content"] .hh-prose > * + * { margin-top: 0.85em; }

html[data-route="content"] .hh-prose h2,
html[data-route="content"] .hh-prose h3,
html[data-route="content"] .hh-prose h4 {
  margin-top: 1.6em;
  margin-bottom: 0.4em;
  letter-spacing: -0.01em;
}

html[data-route="content"] .hh-prose h2 {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 900;
}

html[data-route="content"] .hh-prose h3 {
  font-size: clamp(18px, 2.0vw, 22px);
  font-weight: 800;
}

html[data-route="content"] .hh-prose p {
  margin: 0;
  color: rgba(255,255,255,0.92);
}

/* Links */
html[data-route="content"] .hh-prose a {
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,0.45);
}

html[data-route="content"] .hh-prose a:hover {
  text-decoration-color: rgba(255,255,255,0.85);
}

/* Lists */
html[data-route="content"] .hh-prose ul,
html[data-route="content"] .hh-prose ol { padding-left: 1.2em; }

html[data-route="content"] .hh-prose li { margin: 0.35em 0; }

html[data-route="content"] .hh-prose li::marker { color: rgba(255,255,255,0.55); }

/* Code blocks */
html[data-route="content"] .hh-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 0.15em 0.35em;
}

html[data-route="content"] .hh-prose pre {
  overflow: auto;
  background: rgba(0,0,0,0.40);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 14px 16px;
}

/* Tables */
html[data-route="content"] .hh-prose table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  overflow: hidden;
}

html[data-route="content"] .hh-prose th,
html[data-route="content"] .hh-prose td {
  border-bottom: 1px solid rgba(255,255,255,0.10);
  padding: 10px 12px;
}

/* Mobile tightening */
@media (max-width: 640px) {
  html[data-route="content"] .hh-card--frost,
  html[data-route="content"] .hh-card {
    border-radius: 16px;
    padding: 16px;
  }
}
/* ===== FIX: keep landing-style dark bg, but make CARDS light with DARK text ===== */

/* Page canvas stays dark */
html[data-route="content"] body {
  background: #000 !important;
  color-scheme: dark;
}

/* But the actual content UI should use dark ink (because cards are light) */
html[data-route="content"] .hh-content-page {
  color: #111;
}

/* Light frosted cards with dark text */
html[data-route="content"] .hh-card--frost,
html[data-route="content"] .hh-card {
  background: rgba(255,255,255,0.78) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  backdrop-filter: blur(16px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
  box-shadow: 0 14px 44px rgba(0,0,0,0.35) !important;
  color: #111 !important;
}

/* Prose uses dark ink */
html[data-route="content"] .hh-prose p,
html[data-route="content"] .hh-prose li,
html[data-route="content"] .hh-prose td,
html[data-route="content"] .hh-prose th {
  color: #222 !important;
}

/* Headings dark */
html[data-route="content"] .hh-prose h1,
html[data-route="content"] .hh-prose h2,
html[data-route="content"] .hh-prose h3,
html[data-route="content"] .hh-prose h4,
html[data-route="content"] .hh-h1 {
  color: #111 !important;
}

/* Links readable on light cards */
html[data-route="content"] .hh-prose a {
  color: #1f4dd8 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(31,77,216,0.35);
}
html[data-route="content"] .hh-prose a:hover {
  text-decoration-color: rgba(31,77,216,0.75);
}

/* Code blocks should also go dark-on-light */
html[data-route="content"] .hh-prose code {
  color: #111 !important;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.10);
}
html[data-route="content"] .hh-prose pre {
  color: #111 !important;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.10);
}
/* FILE: src/css/content-page.css
   PRO CONTENT PAGES:
   - Landing-style background (dark + world image)
   - Frosted GLASS cards (light glass)
   - DARK, readable text inside cards
   - Scoped ONLY to html[data-route="content"]
*/

html[data-route="content"],
html[data-route="content"] body {
  height: 100%;
}

/* 1) Dark landing-style canvas */
html[data-route="content"] body {
  background: #000 !important;
  color-scheme: dark;
  overflow-x: hidden;
}

/* 2) World image background layer (like landing) */
html[data-route="content"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-color: #000;
  background-image: url("/world.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(1100px, 92vw);
  opacity: 0.18;
  filter: grayscale(1) contrast(1.05);
  pointer-events: none;
  z-index: 0;
}

/* 3) Subtle vignette to make it feel premium */
html[data-route="content"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(
      70% 55% at 50% 30%,
      rgba(255, 255, 255, 0.06),
      rgba(0, 0, 0, 0.92) 70%
    );
  pointer-events: none;
  z-index: 0;
}

/* 4) Ensure page content sits above the background layers */
html[data-route="content"] #root,
html[data-route="content"] .hh-page,
html[data-route="content"] .hh-content-page {
  position: relative;
  z-index: 1;
}

/* 5) Container polish */
html[data-route="content"] .hh-page-main,
html[data-route="content"] .hh-content-main {
  padding-top: clamp(18px, 3vh, 40px);
  padding-bottom: clamp(28px, 6vh, 64px);
}

/* 6) Global text rules for content pages:
      IMPORTANT: do NOT set body text to white here.
      Cards are LIGHT glass => text must be DARK.
*/
html[data-route="content"] .hh-content-page {
  color: #111;
}

/* 7) Frosted card system (light glass on dark bg) */
html[data-route="content"] .hh-card,
html[data-route="content"] .hh-card--frost {
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.22) inset !important;
  border-radius: 18px;
  color: #111 !important;
}

/* 8) Typography polish */
html[data-route="content"] .hh-section-title,
html[data-route="content"] h1,
html[data-route="content"] h2,
html[data-route="content"] h3 {
  color: #0f0f10 !important;
  letter-spacing: -0.01em;
}

html[data-route="content"] .hh-meta {
  color: rgba(15, 15, 16, 0.72) !important;
}

html[data-route="content"] .hh-body-text,
html[data-route="content"] p,
html[data-route="content"] li {
  color: rgba(20, 20, 22, 0.90) !important;
  line-height: 1.65;
}

/* 9) Callout box inside cards */
html[data-route="content"] .hh-callout {
  background: rgba(0, 0, 0, 0.04);
  border: 1px dashed rgba(0, 0, 0, 0.14);
  border-radius: 14px;
  padding: 10px 12px;
  color: rgba(20, 20, 22, 0.85) !important;
}

/* 10) Links */
html[data-route="content"] .hh-link,
html[data-route="content"] a {
  color: #1f4dd8 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(31, 77, 216, 0.35);
}
html[data-route="content"] a:hover {
  text-decoration-color: rgba(31, 77, 216, 0.75);
}

/* 11) Pills/buttons (keep readable on light cards) */
html[data-route="content"] .hh-pill {
  background: rgba(255, 255, 255, 0.82) !important;
  color: #111 !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* 12) If any old rules try to force white text, override them hard */
html[data-route="content"] .hh-content-page *,
html[data-route="content"] .hh-content-page *::before,
html[data-route="content"] .hh-content-page *::after {
  text-shadow: none;
}

/* 13) Mobile tuning */
@media (max-width: 640px) {
  html[data-route="content"] body::before {
    background-size: min(980px, 96vw);
    opacity: 0.16;
  }
  html[data-route="content"] .hh-card,
  html[data-route="content"] .hh-card--frost {
    border-radius: 16px;
  }
}
/* ===========================
   CONTENT ROUTE — PRO BUTTONS
   =========================== */

/* Make sure content route text is dark (fixes the "everything is white" issue) */
html[data-route="content"] {
  color-scheme: light !important;
}
html[data-route="content"] body,
html[data-route="content"] .hh-page,
html[data-route="content"] .hh-page-main,
html[data-route="content"] .hh-prose {
  color: #111 !important;
}

/* Clean, consistent action buttons (overrides your global hh-pill look) */
html[data-route="content"] .hh-pill,
html[data-route="content"] a.hh-pill,
html[data-route="content"] button.hh-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;

  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;

  border: 1px solid rgba(0,0,0,0.14) !important;
  background: rgba(255,255,255,0.78) !important;
  color: #111 !important;

  text-decoration: none !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.10) !important;

  -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
  backdrop-filter: blur(14px) saturate(125%) !important;

  cursor: pointer !important;
}

/* Hover/active polish */
html[data-route="content"] .hh-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.12) !important;
}
html[data-route="content"] .hh-pill:active {
  transform: translateY(0px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.10) !important;
}

/* Focus ring that doesn't look like ass */
html[data-route="content"] .hh-pill:focus-visible {
  outline: 2px solid rgba(31,77,216,0.40) !important;
  outline-offset: 2px !important;
}

/* Remove ugly default blue visited link behavior */
html[data-route="content"] a.hh-pill:visited {
  color: #111 !important;
}

/* Optional: "primary" variant if you want one button to stand out */
html[data-route="content"] .hh-pill.hh-pill--primary {
  background: rgba(17,17,17,0.92) !important;
  border-color: rgba(17,17,17,0.92) !important;
  color: #fff !important;
}

/* Back button (arrow-only) should look like a pro icon button on content pages */
html[data-route="content"] .hh-back {
  width: 38px !important;
  height: 34px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,0.14) !important;
  background: rgba(255,255,255,0.78) !important;
  color: #111 !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.10) !important;
  -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
  backdrop-filter: blur(14px) saturate(125%) !important;
}
html[data-route="content"] .hh-back:hover { transform: translateY(-1px); }
html[data-route="content"] .hh-back:active { transform: translateY(0px); }
@media (max-width: 640px){
  /* DON'T break normal link text into random chunks */
  html[data-route="content"] a{
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  /* Only allow aggressive wrapping where it makes sense (emails / long strings) */
  html[data-route="content"] .hh-meta,
  html[data-route="content"] code,
  html[data-route="content"] pre{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}
@media (max-width: 800px){
  html[data-route="content"] .hh-support-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  html[data-route="content"] .hh-support-grid > *{
    min-width: 0; /* prevents weird overflow */
  }

  /* Make quick links look like clean tap targets */
  html[data-route="content"] .hh-support-grid .hh-quick-links a{
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.60);
    text-decoration: none;
  }
  html[data-route="content"] .hh-support-grid .hh-quick-links a:hover{
    text-decoration: underline;
  }
}
/* ============================================================
   SUPPORT PAGE: better spacing + mobile layout (content route)
   ============================================================ */

html[data-route="content"] .hh-column {
  padding: 22px 14px 44px !important;
}

@media (min-width: 700px) {
  html[data-route="content"] .hh-column {
    padding: 26px 18px 56px !important;
  }
}

/* Header card spacing */
html[data-route="content"] .hh-page-header {
  margin-bottom: 16px !important;
}

/* Cards: consistent padding + softer layout */
html[data-route="content"] .hh-card {
  border-radius: 18px;
  padding: 18px 18px;
}

@media (min-width: 700px) {
  html[data-route="content"] .hh-card {
    padding: 20px 20px;
  }
}

/* Support grid: nice gaps + mobile stack */
html[data-route="content"] .hh-support-grid {
  gap: 16px !important;
  align-items: start;
}

@media (max-width: 820px) {
  html[data-route="content"] .hh-support-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Form: field spacing */
html[data-route="content"] .hh-support-form label {
  margin-top: 10px;
}

html[data-route="content"] .hh-support-form input,
html[data-route="content"] .hh-support-form select,
html[data-route="content"] .hh-support-form textarea {
  width: 100%;
  border-radius: 14px !important;
  padding: 11px 12px !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  background: rgba(255,255,255,.90);
  color: #111;
  box-sizing: border-box;
}

/* Textarea: better feel */
html[data-route="content"] .hh-support-form textarea {
  min-height: 140px !important;
}

/* Action buttons: better spacing + mobile full width */
html[data-route="content"] .hh-support-actions {
  gap: 10px !important;
  margin-top: 12px !important;
}

@media (max-width: 520px) {
  html[data-route="content"] .hh-support-actions > .hh-pill,
  html[data-route="content"] .hh-support-actions > button.hh-pill {
    width: 100% !important;
    justify-content: center;
  }
}

/* Quick links list: stop ugly wrapping + make it cleaner */
html[data-route="content"] .hh-support-side ul {
  padding-left: 1.1em;
  margin-top: 10px !important;
}

html[data-route="content"] .hh-support-side li {
  margin: 10px 0 !important;
  line-height: 1.3;
}

/* Links should NOT break mid-word */
html[data-route="content"] .hh-support-side a {
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* The little meta boxes on the right */
html[data-route="content"] .hh-support-side .hh-meta {
  border-radius: 14px !important;
  padding: 12px 12px !important;
}

/* Mobile: tighten the “Quick Links” card so it doesn’t feel tall/empty */
@media (max-width: 520px) {
  html[data-route="content"] .hh-support-side .hh-card-title {
    margin-bottom: 6px !important;
  }
  html[data-route="content"] .hh-support-side li {
    margin: 8px 0 !important;
  }
}