/* =====================================================================
   Ehna design layer for Nova
   - brand palette: orange + Red Sea (turquoise) + sky
   - Merits-style menus (gradient card, glow blobs, icon tiles)
   - Facebook-like proportions & mobile tab bar
   ===================================================================== */
:root {
  --ehna-orange: #f97316;
  --ehna-orange-600: color-mix(in oklab, var(--ehna-orange) 84%, black);
  --ehna-on-accent: #ffffff;
  --ehna-sand: #f59e0b;
  --ehna-sea: #0891b2;
  --ehna-sea-deep: #0e7490;
  --ehna-sky: #38bdf8;
}
html[data-theme^="nova"],
html[data-theme^="admin"] {
  --color-primary: var(--ehna-orange);
  --color-primary-content: var(--ehna-on-accent);
  --color-secondary: #0891b2;
  --color-secondary-content: #ffffff;
  --color-accent: #38bdf8;
  --color-accent-content: #062a3c;
  --color-info: #38bdf8;
  --accent: var(--ehna-orange);
  --accent-hover: var(--ehna-orange-600);
  --accent-foreground: var(--ehna-on-accent);
  --focus: var(--ehna-orange);
}

/* ---------- Merits-style menus ---------- */
.ehna-menu-item { --ehna-tone: var(--ehna-orange); }
.ehna-menu-item:nth-child(4n+2) { --ehna-tone: var(--ehna-sea); }
.ehna-menu-item:nth-child(4n+3) { --ehna-tone: var(--ehna-sky); }
.ehna-menu-item:nth-child(4n+4) { --ehna-tone: var(--ehna-sand); }
.ehna-tile {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .85rem;
  background: color-mix(in oklab, var(--ehna-tone, var(--ehna-orange)) 11%, transparent);
  color: var(--ehna-tone, var(--ehna-orange));
  transition: transform .15s ease, background .15s ease;
}
.ehna-tile > span { width: 1.25rem; height: 1.25rem; }
.ehna-tile-sm { width: 2rem; height: 2rem; border-radius: .75rem; }
.ehna-tile-sm > span { width: 1.1rem; height: 1.1rem; }
.ehna-menu-item > a:hover .ehna-tile { transform: scale(1.06); }
.ehna-menu-item > a[aria-current="page"] .ehna-tile,
.ehna-menu-item > a.menu-active .ehna-tile {
  background: linear-gradient(135deg, var(--ehna-orange), var(--ehna-orange-600));
  color: #fff;
  box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--ehna-orange) 70%, transparent);
}
.ehna-menu-item > a { border-radius: 1rem; }
.ehna-menu-item > a:hover { background: color-mix(in oklab, var(--color-base-100) 55%, transparent) !important; }
.ehna-menu-item > a[aria-current="page"],
.ehna-menu-item > a.menu-active {
  background: color-mix(in oklab, var(--ehna-orange) 8%, var(--color-base-100)) !important;
  color: var(--color-base-content) !important;
}

/* menu panels get the Merits card look */
#site-sidebar > nav,
#settings-drawer .drawer-body > ul,
#settings-drawer .drawer-body > nav {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--color-base-content) 9%, transparent);
  border-radius: 1.75rem;
  padding: .75rem .5rem;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--ehna-orange) 7%, var(--color-base-100)) 0%,
    var(--color-base-100) 48%,
    color-mix(in oklab, var(--ehna-sky) 6%, var(--color-base-100)) 100%);
}
#site-sidebar > nav::before,
#site-sidebar > nav::after,
#settings-drawer .drawer-body > ul::before,
#settings-drawer .drawer-body > ul::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 11rem;
  height: 11rem;
  border-radius: 999px;
  filter: blur(48px);
  pointer-events: none;
}
#site-sidebar > nav::before,
#settings-drawer .drawer-body > ul::before { inset-inline-end: -3.5rem; top: -3.5rem; background: color-mix(in oklab, var(--ehna-orange) 14%, transparent); }
#site-sidebar > nav::after,
#settings-drawer .drawer-body > ul::after { inset-inline-start: -3rem; bottom: -4rem; background: color-mix(in oklab, var(--ehna-sea) 12%, transparent); }
.dropdown-menu {
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--ehna-orange) 7%, var(--color-base-100)) 0%,
    var(--color-base-100) 55%,
    color-mix(in oklab, var(--ehna-sky) 7%, var(--color-base-100)) 100%);
}

/* ---------- Facebook-like mobile tab bar ---------- */
.ehna-tabbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 35;
  height: calc(3.5rem + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--color-base-100);
  border-top: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
  box-shadow: 0 -6px 18px -12px rgba(0, 0, 0, .35);
  transition: transform .3s ease;
}
.ehna-tabbar[data-hidden="true"] { transform: translateY(110%); }
.ehna-tabbar-row { display: flex; height: 3.5rem; align-items: stretch; }
.ehna-tab { position: relative; display: flex; flex: 1 1 0; min-width: 0; }
.ehna-tab-link {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: color-mix(in oklab, var(--color-base-content) 62%, transparent) !important;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.ehna-tab-icon { position: relative; display: inline-flex; }
.ehna-tab-icon > span:first-child { width: 1.65rem; height: 1.65rem; }
.ehna-tab-label { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ehna-tab.is-active .ehna-tab-link { color: var(--ehna-orange) !important; }
.ehna-tab.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 22%;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--ehna-orange), var(--ehna-sky));
}
.ehna-tab-badge {
  position: absolute;
  top: -5px;
  inset-inline-end: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid var(--color-base-100);
  border-radius: 999px;
  background: #e41e3f;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}
.ehna-tab-badge.hidden { display: none; }
.ehna-tab-menu { flex-direction: column; }
.ehna-tab-menu > .dropdown { height: 100%; }
.ehna-tab-menu .dropdown-toggle { padding-bottom: 14px; }
.ehna-tab-menu .dropdown-toggle img { width: 1.65rem !important; height: 1.65rem !important; }
.ehna-tab-menu .ehna-tab-label {
  position: absolute;
  inset-inline: 0;
  bottom: 9px;
  color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
  font-size: 10.5px;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
}
@media (max-width: 767.98px) {
  .ehna-desktop-only { display: none !important; }
  main.site-content { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)) !important; }
}
@media (min-width: 768px) {
  .ehna-desktop-only { display: contents; }
}

/* ---------- Facebook proportions ---------- */
.site-topbar > div { height: 56px; }
@media (min-width: 1024px) {
  main.site-content:has(#site-sidebar) { max-width: none !important; padding-inline: 1rem !important; }
  main.site-content:has(#site-sidebar) #site-sidebar { top: 72px; height: calc(100dvh - 88px); }
  main.site-content:has(#site-sidebar) #site-sidebar:not(.minified) { width: 280px; }
  main.site-content:has(#site-sidebar) #site-sidebar ~ div { width: 100%; max-width: 680px; margin-inline: auto; }
  main.site-content:has(#site-sidebar) #site-sidebar ~ aside { width: 280px; }
}
@media (min-width: 1260px) {
  main.site-content:has(#site-sidebar) #site-sidebar:not(.minified) { width: 360px; }
  main.site-content:has(#site-sidebar) #site-sidebar ~ aside { width: 360px; }
}
article.post { border-radius: 8px; }
@media (max-width: 767.98px) {
  /* edge-to-edge feed like the Facebook app */
  main.site-content:has(#site-sidebar) { padding-inline: 0 !important; }
  main.site-content:has(#site-sidebar) article.post { border-radius: 0; border-inline: 0; }
}

/* centre "+" create button (bigger, raised, brand gradient) */
.ehna-tab-add { justify-content: center; overflow: visible; }
.ehna-tab-add > .dropdown { justify-content: center; }
.ehna-add-button { display: flex; align-items: flex-start; justify-content: center; width: 100%; height: 100%; -webkit-tap-highlight-color: transparent; }
.ehna-add-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  margin-top: -1.35rem;
  border: 4px solid var(--color-base-100);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ehna-orange) 0%, var(--ehna-sand) 45%, var(--ehna-sea) 100%);
  color: #fff;
  box-shadow: 0 10px 22px -8px color-mix(in oklab, var(--ehna-orange) 75%, transparent);
  transition: transform .15s ease;
}
.ehna-add-circle > span { width: 1.9rem; height: 1.9rem; }
.ehna-add-button:active .ehna-add-circle,
.ehna-add-button[aria-expanded="true"] .ehna-add-circle { transform: scale(.94) rotate(45deg); }
.ehna-tab-add .dropdown-menu { position: fixed !important; inset-inline: .75rem !important; bottom: calc(4.25rem + env(safe-area-inset-bottom)) !important; top: auto !important; max-height: 70vh; }
.ehna-tab-add .dropdown-menu { overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; max-height: calc(100dvh - 6.5rem - env(safe-area-inset-bottom)) !important; }

/* ---------- Profile About: grouped blocks ---------- */
.ehna-about { display: grid; gap: .75rem; }
.ehna-about-group {
  border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
  border-radius: 1rem;
  padding: .75rem .85rem;
  background: color-mix(in oklab, var(--ehna-orange) 3%, var(--color-base-100));
}
.ehna-about-group:not(:has(li)) { display: none; }
.ehna-about-title { margin-bottom: .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.ehna-about-list { display: grid; gap: .55rem; font-size: .875rem; }
.ehna-about-row { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.ehna-about-row a { color: var(--ehna-sea); }
.ehna-about-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .5rem; }
.ehna-about-stat {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  border-radius: .9rem; padding: .6rem .25rem;
  background: color-mix(in oklab, var(--ehna-sea) 6%, var(--color-base-100));
  border: 1px solid color-mix(in oklab, var(--ehna-sea) 12%, transparent);
}
.ehna-about-stat strong { font-size: 1.05rem; color: var(--color-base-content); }
.ehna-about-stat span { font-size: .72rem; color: color-mix(in oklab, var(--color-base-content) 58%, transparent); }
/* create menu: pinned above the tab bar, never off-screen, scrolls inside, compact 3-column grid */
.ehna-tab-add .dropdown-menu.dropdown-open,
.ehna-tab-add .dropdown-menu:not(.hidden) {
  position: fixed !important;
  transform: none !important;
  inset: auto .75rem calc(4.5rem + env(safe-area-inset-bottom)) .75rem !important;
  width: auto !important;
  max-height: calc(100dvh - 8.5rem - env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
  z-index: 1000;
}
.ehna-tab-add .dropdown-menu > div { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem !important; padding: .75rem !important; }
.ehna-tab-add .dropdown-menu > div > * { min-width: 0 !important; padding: .6rem .25rem !important; }
.ehna-tab-add .dropdown-menu > div > .basis-full { grid-column: 1 / -1; }

/* ---------- flat, professional tab bar ---------- */
.ehna-tabbar:has(.dropdown-menu:not(.hidden)) { z-index: 60; }
.ehna-tabbar { box-shadow: none; border-top-color: color-mix(in oklab, var(--color-base-content) 8%, transparent); }
.ehna-tab-icon > span:first-child { width: 1.5rem; height: 1.5rem; }
.ehna-tab-link { color: color-mix(in oklab, var(--color-base-content) 55%, transparent) !important; font-weight: 500; }
.ehna-tab.is-active .ehna-tab-link { font-weight: 700; }
.ehna-tab.is-active::before { inset-inline: 30%; height: 2.5px; border-radius: 0 0 3px 3px; background: var(--ehna-orange); }
.ehna-add-circle {
  width: 3.25rem; height: 3.25rem; margin-top: -1.1rem;
  border-width: 3px;
  background: var(--ehna-orange);
  box-shadow: 0 4px 10px -4px color-mix(in oklab, var(--ehna-orange) 60%, transparent);
}
.ehna-add-circle > span { width: 1.65rem; height: 1.65rem; }
.ehna-add-button[aria-expanded="true"] .ehna-add-circle { background: var(--ehna-sea); }
/* create menu tiles: neutral cards, tinted icon squares in brand tones */
.ehna-tab-add .dropdown-menu > div > * {
  background: color-mix(in oklab, var(--color-base-content) 4%, var(--color-base-100)) !important;
  border: 1px solid color-mix(in oklab, var(--color-base-content) 7%, transparent);
  border-radius: 1rem !important;
  font-weight: 600;
  --ehna-tone: var(--ehna-orange);
}
.ehna-tab-add .dropdown-menu > div > *:nth-child(3n+2) { --ehna-tone: var(--ehna-sea); }
.ehna-tab-add .dropdown-menu > div > *:nth-child(3n+3) { --ehna-tone: var(--ehna-sky); }
.ehna-tab-add .dropdown-menu > div > * > span[class*="icon-"] { color: var(--ehna-tone) !important; width: 1.6rem; height: 1.6rem; }

/* HeroUI buttons follow the brand (HeroUI sets its own violet accent on .heroui) */
html[data-theme] .heroui { --accent: var(--ehna-orange); --accent-hover: var(--ehna-orange-600); --accent-foreground: var(--ehna-on-accent); --focus: var(--ehna-orange); }
/* Follow: calm sea tone instead of bright cyan */
html[data-theme] .heroui.js_follow { --button-bg: color-mix(in oklab, var(--ehna-sea) 16%, transparent) !important; --button-bg-hover: color-mix(in oklab, var(--ehna-sea) 24%, transparent) !important; --button-bg-pressed: color-mix(in oklab, var(--ehna-sea) 24%, transparent) !important; --button-fg: color-mix(in oklab, var(--ehna-sea) 70%, var(--color-base-content)) !important; }
/* soft tip / gift buttons */
.ehna-soft-btn { --tone: var(--ehna-orange); --button-bg: color-mix(in oklab, var(--tone) 13%, transparent) !important; --button-bg-hover: color-mix(in oklab, var(--tone) 20%, transparent) !important; --button-fg: color-mix(in oklab, var(--tone) 75%, var(--color-base-content)) !important; border: 1px solid color-mix(in oklab, var(--tone) 28%, transparent) !important; font-weight: 600; }
.ehna-soft-sea { --tone: var(--ehna-sea); }

/* ---------- left sidebar: collapsed = narrow icon rail (the card shrinks with it) ---------- */
@media (min-width: 1024px) {
  main.site-content:has(#site-sidebar) #site-sidebar.minified { width: 76px !important; }
}
#site-sidebar.minified > nav { padding: .5rem .3rem; border-radius: 1.25rem; }
#site-sidebar.minified > nav::before, #site-sidebar.minified > nav::after { display: none; }
#site-sidebar.minified .ehna-menu-item > a { justify-content: center; padding-inline: 0; }
#site-sidebar.minified .ehna-menu-item > a > :not(.ehna-tile):not(img):not(svg) { display: none; }
#site-sidebar.minified { scrollbar-gutter: auto !important; }

/* ---------- mobile: icon rail sliding in from the left (toggle next to the news ticker) ---------- */
.ehna-rail-toggle { display: none; }
.ehna-rail-backdrop { display: none; }
@media (max-width: 1023.98px) {
  .ehna-rail-toggle {
    display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border-radius: 1rem;
    background: color-mix(in oklab, var(--ehna-orange) 12%, var(--color-base-100));
    color: var(--ehna-orange);
    border: 1px solid color-mix(in oklab, var(--ehna-orange) 22%, transparent);
  }
  .ehna-rail-toggle > span { width: 1.4rem; height: 1.4rem; }
  .ehna-ticker-row { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
  .ehna-ticker-row > .ehna-ticker { margin-bottom: 0 !important; flex: 1 1 auto; min-width: 0; }
  #site-sidebar.ehna-rail {
    display: block !important;
    position: fixed !important;
    top: 56px; bottom: calc(3.5rem + env(safe-area-inset-bottom));
    left: 0; right: auto;
    width: 76px !important;
    z-index: 45;
    overflow-y: auto;
    padding: .5rem .35rem;
    background: var(--color-base-100);
    border-inline-end: 1px solid color-mix(in oklab, var(--color-base-content) 9%, transparent);
    border-radius: 0 1.25rem 1.25rem 0;
    box-shadow: 8px 0 24px -16px rgba(0,0,0,.45);
    transform: translateX(-105%);
    transition: transform .25s ease;
    visibility: hidden;
  }
  #site-sidebar.ehna-rail.is-open { transform: none; visibility: visible; }
  #site-sidebar.ehna-rail > nav { border: 0; padding: 0; background: none; }
  #site-sidebar.ehna-rail [data-overlay-minifier] { display: none; }
  .ehna-rail-backdrop.is-open { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(0,0,0,.35); }

  /* full menu with names next to the icons; .minified shrinks it back to the icon rail */
  #site-sidebar.ehna-rail:not(.minified) { width: min(16rem, 82vw) !important; padding: .6rem .5rem; transition: transform .25s ease, width .2s ease; }
  #site-sidebar.ehna-rail:not(.minified) .ehna-menu-item > a { justify-content: flex-start; padding-inline: .75rem; }
  html[dir="rtl"] #site-sidebar.ehna-rail { left: auto; right: 0; border-radius: 1.25rem 0 0 1.25rem; transform: translateX(105%); box-shadow: -8px 0 24px -16px rgba(0,0,0,.45); }
  html[dir="rtl"] #site-sidebar.ehna-rail.is-open { transform: none; }

  /* button: a real "menu" control with its label, not a lone icon */
  .ehna-rail-toggle { width: auto; padding-inline: .8rem 1rem; gap: .4rem; font-weight: 700; font-size: .875rem; }
  .ehna-rail-toggle-label { white-space: nowrap; }

  /* header inside the menu: invite friends + shrink */
  .ehna-rail-head { display: flex; align-items: center; gap: .4rem; padding: 0 .1rem .6rem; margin-bottom: .4rem; border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent); }
  .ehna-rail-invite { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: .45rem; height: 2.6rem; padding-inline: .75rem; border-radius: .9rem; font-size: .85rem; font-weight: 700; color: #fff !important; background: linear-gradient(135deg, var(--ehna-orange), color-mix(in oklab, var(--ehna-orange) 55%, #e11d48)); box-shadow: 0 6px 16px -8px var(--ehna-orange); }
  .ehna-rail-invite > .icon-\[tabler--user-plus\] { width: 1.2rem; height: 1.2rem; flex-shrink: 0; }
  .ehna-rail-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ehna-rail-mini { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: .9rem; color: color-mix(in oklab, var(--color-base-content) 70%, transparent); background: color-mix(in oklab, var(--color-base-content) 6%, transparent); }
  .ehna-rail-mini > span { width: 1.25rem; height: 1.25rem; }
  html[dir="rtl"] .ehna-rail-mini > span { transform: scaleX(-1); }
  .ehna-rail-mini-open, #site-sidebar.minified .ehna-rail-mini-close { display: none; }
  #site-sidebar.minified .ehna-rail-mini-open { display: inline-block; }
  #site-sidebar.minified .ehna-rail-head { flex-direction: column; padding-inline: 0; }
  #site-sidebar.minified .ehna-rail-invite { width: 2.6rem; flex: 0 0 auto; padding: 0; }
  #site-sidebar.minified .ehna-rail-text { display: none; }
}
@media (min-width: 1024px) { .ehna-rail-head { display: none; } }

/* ---------- live viewer: gift button ---------- */
.ehna-live-gift-btn {
  position: absolute; z-index: 12; inset-inline-start: .85rem; bottom: 1rem;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem .95rem; border-radius: 999px;
  background: var(--ehna-orange); color: #fff; font-size: .85rem; font-weight: 700;
  box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--ehna-orange) 70%, transparent);
  transition: transform .15s ease;
}
.ehna-live-gift-btn > span:first-child { width: 1.2rem; height: 1.2rem; }
.ehna-live-gift-btn:active { transform: scale(.95); }
.ehna-live-gift-btn:disabled { opacity: .6; }

/* ---------- theme colour picker ---------- */
.ehna-accent-dot { display: inline-block; flex-shrink: 0; width: 1rem; height: 1rem; border-radius: 999px; background: conic-gradient(var(--ehna-orange) 0 25%, #2563eb 0 50%, #16a34a 0 75%, #db2777 0); box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 3px color-mix(in oklab, var(--color-base-content) 15%, transparent); }
.ehna-accent-picker { display: flex; flex-direction: column; gap: 1rem; }
.ehna-accent-hint { font-size: .85rem; color: color-mix(in oklab, var(--color-base-content) 62%, transparent); }
.ehna-accent-preview {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding: .85rem; border-radius: 1.1rem;
  background: color-mix(in oklab, var(--ehna-orange) 7%, var(--color-base-100));
  border: 1px solid color-mix(in oklab, var(--ehna-orange) 18%, transparent);
}
.ehna-accent-preview-btn { padding: .45rem .95rem; border-radius: .8rem; background: var(--ehna-orange); color: var(--ehna-on-accent); font-weight: 700; font-size: .85rem; }
.ehna-accent-preview-chip { padding: .3rem .7rem; border-radius: 999px; background: color-mix(in oklab, var(--ehna-orange) 15%, transparent); color: color-mix(in oklab, var(--ehna-orange) 80%, var(--color-base-content)); font-weight: 600; font-size: .8rem; }
.ehna-accent-preview-link { color: var(--ehna-orange); font-weight: 600; font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; }
.ehna-accent-preview-tile { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: .8rem; background: color-mix(in oklab, var(--ehna-orange) 12%, transparent); color: var(--ehna-orange); margin-inline-start: auto; }
.ehna-accent-preview-tile > span { width: 1.15rem; height: 1.15rem; }
.ehna-accent-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 640px) { .ehna-accent-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .65rem; } }
.ehna-accent-swatch {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .6rem .25rem .5rem; border-radius: 1rem; cursor: pointer;
  border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
  background: var(--color-base-100);
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.ehna-accent-swatch:hover { transform: translateY(-1px); border-color: color-mix(in oklab, var(--swatch) 45%, transparent); }
.ehna-accent-swatch-dot { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--swatch); color: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.ehna-accent-swatch-dot > span { width: 1.1rem; height: 1.1rem; opacity: 0; transform: scale(.6); transition: .15s ease; }
.ehna-accent-swatch-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; font-weight: 600; color: color-mix(in oklab, var(--color-base-content) 70%, transparent); }
.ehna-accent-swatch.is-active { border-color: var(--swatch); background: color-mix(in oklab, var(--swatch) 9%, var(--color-base-100)); }
.ehna-accent-swatch.is-active .ehna-accent-swatch-dot { box-shadow: 0 0 0 3px var(--color-base-100), 0 0 0 5px var(--swatch); }
.ehna-accent-swatch.is-active .ehna-accent-swatch-dot > span { opacity: 1; transform: none; }
.ehna-accent-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding-top: .25rem; border-top: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent); }
.ehna-accent-custom { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; font-size: .85rem; font-weight: 600; padding-top: .6rem; }
.ehna-accent-custom input { width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: .7rem; background: none; cursor: pointer; }
.ehna-accent-custom input::-webkit-color-swatch-wrapper { padding: 0; }
.ehna-accent-custom input::-webkit-color-swatch { border: 1px solid color-mix(in oklab, var(--color-base-content) 15%, transparent); border-radius: .7rem; }
.ehna-accent-reset { margin-top: .6rem; padding: .45rem .85rem; border-radius: .8rem; font-size: .8rem; font-weight: 600; color: color-mix(in oklab, var(--color-base-content) 70%, transparent); background: color-mix(in oklab, var(--color-base-content) 6%, transparent); }
.ehna-accent-reset:hover { background: color-mix(in oklab, var(--color-base-content) 10%, transparent); }

/* ---------- news ticker: icon-only label on mobile ---------- */
@media (max-width: 767.98px) {
  .ehna-ticker { padding-inline: .5rem !important; gap: .5rem !important; }
  .ehna-ticker-label { width: 2rem; height: 2rem; padding: 0 !important; justify-content: center; }
  .ehna-ticker-label-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- admin: City Hub settings ---------- */
.ehna-city-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .25rem; }
.ehna-city-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.3rem; margin-inline-start: .35rem; padding: 0 .4rem; border-radius: 999px; font-size: .72rem; background: color-mix(in oklab, var(--color-base-content) 8%, transparent); }
.ehna-city-search { display: inline-flex; align-items: center; gap: .45rem; min-width: 14rem; padding: .45rem .75rem; border-radius: .8rem; border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent); background: var(--color-base-100); color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.ehna-city-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--color-base-content); font-size: .875rem; }
.ehna-city { border-radius: 1rem; border: 1px solid color-mix(in oklab, var(--color-base-content) 9%, transparent); background: color-mix(in oklab, var(--color-base-content) 3%, var(--color-base-100)); transition: border-color .15s ease; }
.ehna-city[open] { border-color: color-mix(in oklab, var(--color-primary) 35%, transparent); background: var(--color-base-100); }
.ehna-city-summary { display: flex; align-items: center; gap: .85rem; padding: .75rem .9rem; cursor: pointer; list-style: none; }
.ehna-city-summary::-webkit-details-marker { display: none; }
.ehna-city-summary::marker { content: ""; }
.ehna-city-icon { flex-shrink: 0; }
.ehna-city-name { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: .1rem; }
.ehna-city-name strong { font-size: .925rem; font-weight: 600; }
.ehna-city-ar { margin-inline-start: .35rem; font-weight: 500; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.ehna-city-name small { font-size: .78rem; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.ehna-city-status { flex-shrink: 0; padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; background: color-mix(in oklab, var(--color-base-content) 8%, transparent); color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }
.ehna-city-status.is-on { background: color-mix(in oklab, var(--color-success) 14%, transparent); color: var(--color-success); }
.ehna-city-chevron { flex-shrink: 0; color: color-mix(in oklab, var(--color-base-content) 45%, transparent); transition: transform .2s ease; }
.ehna-city[open] .ehna-city-chevron { transform: rotate(180deg); }
.ehna-city-body { display: flex; flex-direction: column; gap: 1rem; padding: .25rem .9rem 1rem; border-top: 1px solid color-mix(in oklab, var(--color-base-content) 7%, transparent); padding-top: 1rem; }
.ehna-city-grid { display: grid; grid-template-columns: 1fr; gap: .9rem 1rem; }
@media (min-width: 768px) { .ehna-city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ehna-city-open { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; font-size: .82rem; font-weight: 600; color: var(--color-primary) !important; }
@media (max-width: 639.98px) { .ehna-city-search { min-width: 0; width: 100%; } .ehna-city-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
.ehna-city-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: .85rem; background: color-mix(in oklab, var(--color-primary) 12%, transparent); color: var(--color-primary); font-size: 1rem; }
.ehna-city-icon-sm { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: .85rem; background: color-mix(in oklab, var(--color-base-content) 7%, transparent); color: color-mix(in oklab, var(--color-base-content) 70%, transparent); }
.ehna-city-chevron { display: inline-flex; font-size: .85rem; }
.ehna-city-list { display: grid; gap: .6rem; }
.ehna-city-field { display: flex; min-width: 0; flex-direction: column; gap: .35rem; }
.ehna-city-field .form-label { margin: 0; font-size: .8rem; font-weight: 600; }
.ehna-city-toolbar { margin-bottom: .9rem; }

/* ---------- floating back button ---------- */
.ehna-back {
  position: fixed; z-index: 34;
  inset-inline-start: .85rem; bottom: calc(4.6rem + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 999px; cursor: pointer;
  color: var(--ehna-fg, var(--color-base-content, #1c1e21));
  background: color-mix(in oklab, var(--ehna-bg, var(--color-base-100, #fff)) 82%, transparent);
  border: 1px solid color-mix(in oklab, var(--ehna-fg, var(--color-base-content, #1c1e21)) 12%, transparent);
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.ehna-back > span, .ehna-back > i { width: 1.3rem; height: 1.3rem; font-size: 1.05rem; line-height: 1.3rem; text-align: center; }
[dir="rtl"] .ehna-back > span, [dir="rtl"] .ehna-back > i { transform: scaleX(-1); }
.ehna-back:hover { color: var(--ehna-orange, #f97316); transform: translateY(-1px); }
.ehna-back:active { transform: scale(.94); }
@media (min-width: 768px) {
  .ehna-back { bottom: 1.5rem; inset-inline-start: 1.5rem; width: 3rem; height: 3rem; }
  body:has(#PWAInstallBanner:not(.hidden)) .ehna-back { bottom: 7.5rem; }
}
body:has(.lightbox) .ehna-back, body.lightbox-open .ehna-back { display: none; }

/* ---------- Live directory: on mobile the side menus become scrollable chip rows ---------- */
@media (max-width: 1023.98px) {
  .ehna-live-aside { gap: .5rem !important; min-width: 0; max-width: 100%; }
  div:has(> .ehna-live-aside) { grid-template-columns: minmax(0, 1fr); }
  .ehna-live-aside > nav { padding: 0 !important; border: 0 !important; background: none !important; overflow: hidden; }
  .ehna-live-aside > nav > div { display: none; }
  .ehna-live-aside > nav > ul { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: .4rem !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px !important; }
  .ehna-live-aside > nav > ul::-webkit-scrollbar { display: none; }
  .ehna-live-aside > nav > ul > li { flex: 0 0 auto; }
  .ehna-live-aside > nav > ul > li > a {
    white-space: nowrap; padding: .45rem .85rem !important; border-radius: 999px !important;
    border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
    background: var(--color-base-100); font-size: .82rem;
  }
  .ehna-live-aside > nav > ul > li > a.menu-active,
  .ehna-live-aside > nav > ul > li > a[aria-current="page"] { background: color-mix(in oklab, var(--ehna-orange) 14%, var(--color-base-100)) !important; border-color: color-mix(in oklab, var(--ehna-orange) 35%, transparent); color: var(--ehna-orange) !important; }
}
/* never let media/cards spill out of their frame on the live / watch / rooms pages */
main.site-content .card, main.site-content article.post { max-width: 100%; }
main.site-content :is(.card, article.post) :is(img, video, iframe) { max-width: 100%; }
/* single-column grids (lg:grid-cols-* only) must not grow wider than the screen on phones/tablets */
@media (max-width: 1023.98px) {
  main.site-content .grid:not([class*=" grid-cols-"]):not([class^="grid-cols-"]):not([class*="sm:grid-cols-"]):not([class*="md:grid-cols-"]) { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- header: language button + mobile balances ---------- */
.ehna-lang-flag { width: 1.4rem; height: 1.4rem; border-radius: 999px; object-fit: cover; box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 3px color-mix(in oklab, var(--color-base-content) 14%, transparent); }
.ehna-lang-menu { width: min(24rem, calc(100vw - 1.5rem)); max-height: min(70vh, 30rem); overflow-y: auto; border-radius: 1.25rem; }
.ehna-lang-head { padding: .35rem .5rem .55rem; font-size: .8rem; font-weight: 700; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }
.ehna-lang-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; }
.ehna-lang-item { display: flex; min-width: 0; align-items: center; gap: .5rem; padding: .5rem .6rem; border-radius: .8rem; font-size: .82rem; color: var(--color-base-content) !important; }
.ehna-lang-item img { width: 1.2rem; height: 1.2rem; flex-shrink: 0; border-radius: 999px; object-fit: cover; }
.ehna-lang-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ehna-lang-item:hover { background: color-mix(in oklab, var(--color-base-content) 6%, transparent); }
.ehna-lang-item.is-active { background: color-mix(in oklab, var(--ehna-orange) 12%, transparent); color: var(--ehna-orange) !important; font-weight: 600; }
.ehna-balance-m { display: inline-flex; flex-direction: column; justify-content: center; gap: 1px; height: 2.5rem; padding: 0 .55rem; border-radius: .9rem; background: color-mix(in oklab, var(--color-base-content) 6%, transparent); color: var(--color-base-content) !important; line-height: 1; }
.ehna-balance-m-row { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 700; }
.ehna-balance-m-row > span { width: .85rem; height: .85rem; color: var(--ehna-orange); }
.ehna-balance-m-row.is-coins > span { color: var(--color-warning); }
@media (max-width: 639.98px) {
  .site-topbar > div { gap: .4rem !important; padding-inline: .6rem !important; }
  .site-topbar a[aria-label] > img { max-width: 5.25rem; }
  .site-topbar .js_site-topbar-chrome { gap: .15rem !important; }
  .site-topbar .site-topbar-icon { width: 2.35rem !important; height: 2.35rem !important; min-width: 0 !important; }
}
@media (min-width: 640px) { .ehna-balance-m { display: none !important; } }
@media (max-width: 379.98px) {
  .site-topbar a[aria-label] > img { max-width: 4.4rem; }
  .site-topbar .site-topbar-icon { width: 2.15rem !important; height: 2.15rem !important; }
  .ehna-balance-m { padding: 0 .4rem; }
}
@media (max-width: 339.98px) { .site-topbar .js_site-topbar-chrome > .dropdown:has(> .heroui > [aria-label="Explore"]) { display: none !important; } }

/* ---------- chat bubbles (mobile) ---------- */
.ehna-heads { position: fixed; z-index: 70; inset-inline-end: .6rem; display: flex; flex-direction: column; gap: .6rem; touch-action: none; transition: top .25s ease; }
.ehna-heads.is-start { inset-inline-end: auto; inset-inline-start: .6rem; }
.ehna-heads[hidden] { display: none; }
.ehna-head {
  position: relative; width: 3.6rem; height: 3.6rem; padding: 0; border: 0; border-radius: 999px; cursor: pointer; touch-action: none;
  background: var(--color-base-100);
  box-shadow: 0 0 0 3px var(--color-base-100), 0 0 0 5px var(--ehna-orange), 0 10px 24px -8px rgba(0,0,0,.55);
  transition: transform .18s ease;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.ehna-head img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; pointer-events: none; }
.ehna-head:active { transform: scale(.94); }
.ehna-head.is-pop { animation: ehna-head-pop .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes ehna-head-pop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ehna-heads.is-dragging .ehna-head { transition: none; }
.ehna-head-badge {
  position: absolute; top: -3px; inset-inline-end: -3px; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem;
  border: 2px solid var(--color-base-100); border-radius: 999px; background: #e41e3f; color: #fff;
  font-size: .7rem; font-weight: 800; line-height: 1rem; text-align: center;
}
.ehna-heads-target {
  position: fixed; z-index: 69; left: 50%; bottom: calc(5.5rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; border-radius: 999px;
  background: rgba(20, 20, 24, .72); color: #fff; font-size: 2rem; line-height: 1;
  border: 2px solid rgba(255, 255, 255, .55);
  transform: translate(-50%, 140%) scale(.8); opacity: 0; pointer-events: none;
  transition: transform .2s ease, opacity .2s ease, background .15s ease;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ehna-heads-target.is-visible { transform: translate(-50%, 0) scale(1); opacity: 1; }
.ehna-heads-target.is-hot { transform: translate(-50%, 0) scale(1.18); background: #e41e3f; border-color: #fff; }
@media (prefers-reduced-motion: reduce) { .ehna-head.is-pop { animation: none; } }

/* ---------- app permissions center ---------- */
.ehna-perms { display: flex; flex-direction: column; gap: .6rem; }
.ehna-perms-hint, .ehna-perms-note { font-size: .84rem; color: color-mix(in oklab, var(--color-base-content) 62%, transparent); }
.ehna-perms-note { font-size: .76rem; }
.ehna-perm { display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; border-radius: 1rem; border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent); background: color-mix(in oklab, var(--color-base-content) 3%, var(--color-base-100)); }
.ehna-perm-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: .85rem; background: color-mix(in oklab, var(--ehna-orange) 12%, transparent); color: var(--ehna-orange); }
.ehna-perm-icon > span { width: 1.25rem; height: 1.25rem; }
.ehna-perm-text { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: .1rem; }
.ehna-perm-text strong { font-size: .9rem; }
.ehna-perm-text small { font-size: .75rem; color: color-mix(in oklab, var(--color-base-content) 58%, transparent); }
.ehna-perm-state { flex-shrink: 0; font-size: .72rem; font-weight: 700; }
.ehna-perm[data-state="granted"] .ehna-perm-state::before { content: attr(data-on); padding: .2rem .55rem; border-radius: 999px; background: color-mix(in oklab, var(--color-success) 15%, transparent); color: var(--color-success); }
.ehna-perm[data-state="denied"] .ehna-perm-state::before { content: attr(data-off); padding: .2rem .55rem; border-radius: 999px; background: color-mix(in oklab, var(--color-error) 14%, transparent); color: var(--color-error); }
.ehna-perm[data-state="unsupported"] .ehna-perm-state::before { content: attr(data-na); color: color-mix(in oklab, var(--color-base-content) 50%, transparent); }
.ehna-perm-allow { flex-shrink: 0; padding: .45rem .9rem; border-radius: .8rem; background: var(--ehna-orange); color: var(--ehna-on-accent); font-size: .8rem; font-weight: 700; }
.ehna-perm-allow[hidden] { display: none; }
.ehna-perm-allow:disabled { opacity: .6; }
.ehna-perms-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-top: .3rem; }
.ehna-perms-test { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border-radius: .8rem; font-size: .8rem; font-weight: 600; background: color-mix(in oklab, var(--color-base-content) 6%, transparent); }
.ehna-perms-test > span { width: 1rem; height: 1rem; }
.ehna-perms-test.is-ok { background: color-mix(in oklab, var(--color-success) 15%, transparent); color: var(--color-success); }
.ehna-perms-all { padding: .5rem 1rem; border-radius: .8rem; font-size: .85rem; font-weight: 700; background: var(--ehna-orange); color: var(--ehna-on-accent); }
@media (max-width: 420px) { .ehna-perm { flex-wrap: wrap; } .ehna-perm-text { flex-basis: calc(100% - 3.2rem); } .ehna-perm-state { margin-inline-start: 3.15rem; } .ehna-perm-allow { margin-inline-start: auto; } }

/* inline SVG icons that hardcode the old default-theme blue follow the theme colour */
svg [fill="#5e72e4" i], svg[fill="#5e72e4" i] { fill: var(--ehna-orange) !important; }
svg [stroke="#5e72e4" i], svg[stroke="#5e72e4" i] { stroke: var(--ehna-orange) !important; }
svg [fill="#825ee4" i] { fill: var(--ehna-orange-600) !important; }

/* ---------- header v2: bigger logo, one-column language list, roomy mobile balances ---------- */
.site-topbar a[aria-label] > img { max-height: 2.9rem !important; max-width: 11rem !important; }
@media (max-width: 639.98px) { .site-topbar a[aria-label] > img { max-height: 2.5rem !important; max-width: 7.6rem !important; } }
@media (max-width: 379.98px) { .site-topbar a[aria-label] > img { max-height: 2.2rem !important; max-width: 6.2rem !important; } }
.ehna-lang-menu { width: 16.5rem !important; max-height: min(65vh, 26rem) !important; padding: .4rem !important; }
.ehna-lang-grid { grid-template-columns: 1fr !important; gap: 2px !important; }
.ehna-lang-item { padding: .55rem .7rem !important; font-size: .875rem !important; border-radius: .75rem !important; }
.ehna-lang-item img { width: 1.45rem !important; height: 1.45rem !important; box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-base-content) 12%, transparent); }
.ehna-lang-item span:not(.ehna-lang-check) { flex: 1; }
.ehna-lang-check { width: 1.05rem; height: 1.05rem; flex-shrink: 0; color: var(--ehna-orange); }
.ehna-lang-head { display: flex; align-items: center; gap: .4rem; padding: .45rem .7rem .6rem !important; border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent); margin-bottom: .3rem; }
.ehna-balance-strip { display: flex; gap: .6rem; padding: .6rem .75rem .1rem; }
.ehna-balance-card {
  display: flex; flex: 1 1 0; min-width: 0; align-items: center; gap: .6rem; padding: .55rem .7rem;
  border-radius: 1rem; background: var(--color-base-100); color: var(--color-base-content) !important;
  border: 1px solid color-mix(in oklab, var(--color-base-content) 9%, transparent);
}
.ehna-balance-card-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: .8rem; background: color-mix(in oklab, var(--ehna-orange) 13%, transparent); color: var(--ehna-orange); }
.ehna-balance-card.is-coins .ehna-balance-card-icon { background: color-mix(in oklab, var(--color-warning) 15%, transparent); color: var(--color-warning); }
.ehna-balance-card-icon > span { width: 1.2rem; height: 1.2rem; }
.ehna-balance-card-text { display: flex; min-width: 0; flex: 1; flex-direction: column; line-height: 1.15; }
.ehna-balance-card-text small { font-size: .7rem; color: color-mix(in oklab, var(--color-base-content) 58%, transparent); }
.ehna-balance-card-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; font-weight: 800; }
.ehna-balance-card-add { width: 1rem; height: 1rem; flex-shrink: 0; color: color-mix(in oklab, var(--color-base-content) 45%, transparent); }
.ehna-lang-btn { position: relative; display: inline-flex; }
.ehna-lang-badge { position: absolute; inset-inline-end: -7px; bottom: -6px; width: 1rem; height: 1rem; border-radius: 999px; object-fit: cover; box-shadow: 0 0 0 2px var(--color-base-100); }
.ehna-pulse { position: relative; border-radius: .9rem; animation: ehna-pulse 1.2s ease-in-out 3; box-shadow: 0 0 0 2px var(--ehna-orange); }
@keyframes ehna-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--ehna-orange); } 50% { box-shadow: 0 0 0 7px color-mix(in oklab, var(--ehna-orange) 25%, transparent); } }
/* picker v2: quick colours + "Customize" grouped palette */
.ehna-accent-more { display: flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; padding: .6rem; border-radius: .9rem; font-size: .85rem; font-weight: 700; border: 1px dashed color-mix(in oklab, var(--color-base-content) 20%, transparent); background: color-mix(in oklab, var(--color-base-content) 3%, transparent); }
.ehna-accent-more > span { width: 1.05rem; height: 1.05rem; }
.ehna-accent-more[aria-expanded="true"] .ehna-accent-more-chev { transform: rotate(180deg); }
.ehna-accent-full { display: flex; flex-direction: column; gap: .9rem; max-height: min(52vh, 26rem); overflow-y: auto; padding: .15rem .1rem .3rem; overscroll-behavior: contain; }
.ehna-accent-full[hidden] { display: none; }
.ehna-accent-group-title { margin: 0 0 .45rem; font-size: .75rem; font-weight: 800; letter-spacing: .02em; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }
.ehna-accent-grid.is-mini { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.ehna-accent-grid.is-mini .ehna-accent-swatch { padding: .45rem .15rem .4rem; border-radius: .85rem; }
.ehna-accent-grid.is-mini .ehna-accent-swatch-dot { width: 1.85rem; height: 1.85rem; }
.ehna-accent-grid.is-mini .ehna-accent-swatch-name { font-size: .64rem; }
@media (min-width: 640px) { .ehna-accent-grid:not(.is-mini) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ehna-accent-grid:not(.is-mini) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: .45rem !important; }
.ehna-accent-grid:not(.is-mini) .ehna-accent-swatch-dot { width: 2.05rem; height: 2.05rem; }
.ehna-accent-grid:not(.is-mini) .ehna-accent-swatch { padding: .5rem .15rem .45rem; }
.ehna-accent-grid:not(.is-mini) .ehna-accent-swatch-name { font-size: .66rem; }

/* ---------- tab bar always visible (no hide-on-scroll), also on Reels ---------- */
.ehna-tabbar[data-hidden="true"] { transform: none !important; }
.ehna-tabbar.is-reels { background: rgba(0, 0, 0, .55); border-top-color: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ehna-tabbar.is-reels .ehna-tab-link, .ehna-tabbar.is-reels .ehna-tab-label { color: rgba(255, 255, 255, .82) !important; }
.ehna-tabbar.is-reels .ehna-tab.is-active .ehna-tab-link { color: #fff !important; }
.ehna-tabbar.is-reels .ehna-add-circle { border-color: rgba(0, 0, 0, .6); }
@media (max-width: 767.98px) {
  /* the reels viewer ends above the tab bar, so captions / read more / menu are never under it */
  body:has(.ehna-tabbar.is-reels) #reels.js_reels { height: calc(100dvh - 3.5rem - env(safe-area-inset-bottom)); }
  .ehna-tabbar.is-reels { background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* while a video plays in the lightbox the tab bar steps aside, so the player controls are fully visible */
  body.lightbox-open .ehna-tabbar { display: none !important; }
}

@media (min-width: 640px) { .ehna-balance-strip { display: none !important; } }

/* ---------- phone: menu button at the start of the top bar ---------- */
.ehna-top-menu { display: none; }
@media (max-width: 1023.98px) {
  .ehna-top-menu { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .9rem; color: var(--color-base-content); background: color-mix(in oklab, var(--color-base-content) 6%, transparent); }
  .ehna-top-menu > span { width: 1.4rem; height: 1.4rem; }
  .ehna-top-menu:active { transform: scale(.94); }
  /* the top bar button replaces the extra one next to the news ticker */
  .ehna-ticker-row > .ehna-rail-toggle { display: none; }
  .site-topbar #site-sidebar.ehna-rail, #site-sidebar.ehna-rail { top: 64px; }
}
@media (max-width: 1023.98px) {
  /* keep the top bar (and its menu button) above the dimmed backdrop so one tap closes the menu */
  body:has(#site-sidebar.ehna-rail.is-open) .site-topbar { z-index: 46; }
}