/* /content/themes/default/css/identity.css */
/* Ehna - user identity: name colors, badges, tags, avatar frames & effects */
/*
  Loaded after style/features.css but before the inline _head.css.tpl rules, so every
  override uses a `:not(#i)` id-weight bump. Class names / CSS vars used by templates,
  admin.js and voice_rooms.js are kept: identity-name(-custom|-owner|-featured|-badged),
  identity-effect-*, --identity-*, user-badge-chip, avatar-frame-custom,
  avatar-frame-effect-*, --avatar-frame-*, owner-avatar-ring, featured-avatar-ring.
*/

@property --idf-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ===================================================================
   1. Theme tokens (light default, dark for night mode & dark surfaces)
   =================================================================== */
:root,
.idt-light {
  --identity-plain: #111827;
  --idf-gap: #ffffff;
  --idn-contour: drop-shadow(0 0 .35px rgba(15, 23, 42, .55));
  --idn-halo-mix: 34%;
  --idn-mix-color: #000;
  --idn-neon-mix: 24%;
  --idn-pal-badged: linear-gradient(100deg, #0369a1 0%, #4f46e5 55%, #7c3aed 100%);
  --idn-pal-featured: linear-gradient(100deg, #6d28d9 0%, #2563eb 25%, #0891b2 50%, #2563eb 75%, #6d28d9 100%);
  --idn-pal-gold: linear-gradient(100deg, #7a4a05 0%, #b7791f 24%, #d9a43c 44%, #9a6410 66%, #7a4a05 100%);
  --idn-pal-chrome: linear-gradient(100deg, #1f2937 0%, #4b5563 26%, #8a94a3 46%, #374151 70%, #1f2937 100%);
  --idn-pal-fire: linear-gradient(100deg, #b91c1c 0%, #ea580c 25%, #d97706 50%, #ea580c 75%, #b91c1c 100%);
  --idn-pal-ice: linear-gradient(100deg, #0c4a6e 0%, #0284c7 30%, #0891b2 52%, #1d4ed8 78%, #0c4a6e 100%);
  --idn-pal-rainbow: linear-gradient(100deg, #dc2626 0%, #d97706 16%, #16a34a 33%, #0891b2 50%, #4f46e5 66%, #c026d3 83%, #dc2626 100%);
  --idn-pal-royal: linear-gradient(100deg, #4c1d95 0%, #7c3aed 32%, #a16207 52%, #7c3aed 72%, #4c1d95 100%);
  --idn-sheen: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(255, 255, 255, .85) 50%, transparent 60%, transparent 100%);
}

body.night-mode,
.idt-dark,
.vr-sugo,
.lightbox[data-live-post-id] {
  --identity-plain: #eef1ff;
  --idf-gap: #0c1129;
  --idn-contour: drop-shadow(0 1px 1px rgba(0, 0, 0, .55));
  --idn-halo-mix: 60%;
  --idn-mix-color: #fff;
  --idn-neon-mix: 52%;
  --idn-pal-badged: linear-gradient(100deg, #38bdf8 0%, #818cf8 55%, #c084fc 100%);
  --idn-pal-featured: linear-gradient(100deg, #a78bfa 0%, #67e8f9 25%, #818cf8 50%, #67e8f9 75%, #a78bfa 100%);
  --idn-pal-gold: linear-gradient(100deg, #b8860b 0%, #f6d77a 28%, #fff3c4 45%, #e2a93b 64%, #b07a0e 100%);
  --idn-pal-chrome: linear-gradient(100deg, #8d97a5 0%, #e9eef5 28%, #ffffff 45%, #b8c2cf 66%, #7b8494 100%);
  --idn-pal-fire: linear-gradient(100deg, #ef4444 0%, #f97316 25%, #fbbf24 50%, #f97316 75%, #ef4444 100%);
  --idn-pal-ice: linear-gradient(100deg, #7dd3fc 0%, #e0f2fe 30%, #67e8f9 52%, #93c5fd 78%, #7dd3fc 100%);
  --idn-pal-rainbow: linear-gradient(100deg, #f87171 0%, #fbbf24 16%, #4ade80 33%, #22d3ee 50%, #818cf8 66%, #e879f9 83%, #f87171 100%);
  --idn-pal-royal: linear-gradient(100deg, #a78bfa 0%, #c4b5fd 30%, #fcd34d 52%, #c4b5fd 72%, #a78bfa 100%);
}

.vr-sugo { --idf-gap: #1b1033; }
.lightbox[data-live-post-id] { --idf-gap: #111111; }

/* ===================================================================
   2. User names
   =================================================================== */

/* Regular users: clean solid name, no glow/underline (like big networks) */
html body .identity-name:not(#i) {
  --idn-weight: 700;
  font-weight: var(--idn-weight) !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  text-shadow: none !important;
  transform: none !important;
  transition: none !important;
  filter: none !important;
  animation: none !important;
  color: var(--identity-plain) !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

html body a.identity-name:not(#i):hover,
html body .identity-name:not(#i) a:hover {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}

/* Decorated names: gradient text with a solid-color fallback */
html body .identity-name:is(.identity-name-custom, .identity-name-owner, .identity-name-featured, .identity-name-badged):not(#i) {
  --idn-fill: var(--identity-gradient, linear-gradient(var(--identity-solid), var(--identity-solid)));
  --idn-halo: drop-shadow(0 0 0 transparent);
  --idn-anim: none;
  color: var(--identity-solid, #2563eb) !important;
  background-image: var(--idn-fill) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: 0 50% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: var(--idn-contour) var(--idn-halo) !important;
  animation: var(--idn-anim) !important;
}

/* Built-in defaults when no custom colors were picked */
html body .identity-name.identity-name-badged:not(.identity-name-custom):not(.identity-name-owner):not(.identity-name-featured):not(#i) {
  --identity-solid: #4f46e5;
  --idn-fill: var(--idn-pal-badged);
}

html body .identity-name.identity-name-featured:not(.identity-name-custom):not(#i) {
  --identity-solid: #7c3aed;
  --identity-glow: #8b5cf6;
  --idn-fill: var(--idn-pal-featured);
  --idn-halo: drop-shadow(0 0 4px color-mix(in srgb, #8b5cf6 var(--idn-halo-mix), transparent));
  --idn-anim: idn-flow 7s linear infinite;
  background-size: 200% 100% !important;
  background-repeat: repeat-x !important;
}

html body .identity-name.identity-name-owner:not(.identity-name-custom):not(#i) {
  --identity-solid: #b7791f;
  --idn-anim: idn-sheen 4.2s ease-in-out infinite;
  background-image: var(--idn-sheen), var(--idn-pal-gold) !important;
  background-size: 300% 100%, 100% 100% !important;
  background-position: 100% 0, 0 50% !important;
}

/* --- Name effects (keys stored in users.user_name_effect) --- */

/* glow: soft readable halo */
html body .identity-name.identity-effect-glow:not(#i) {
  --idn-halo: drop-shadow(0 0 4px color-mix(in srgb, var(--identity-glow, var(--identity-solid)) var(--idn-halo-mix), transparent));
}

/* shimmer: light sheen sweeping over the gradient */
html body .identity-name.identity-effect-shimmer:not(#i),
html body .identity-name.identity-effect-gold:not(#i),
html body .identity-name.identity-effect-chrome:not(#i),
html body .identity-name.identity-effect-ice:not(#i),
html body .identity-name.identity-effect-royal:not(#i) {
  --idn-anim: idn-sheen 3.8s ease-in-out infinite;
  background-image: var(--idn-sheen), var(--idn-fill) !important;
  background-size: 300% 100%, 100% 100% !important;
  background-position: 100% 0, 0 50% !important;
}

/* pulse: colors breathe back and forth + soft halo */
html body .identity-name.identity-effect-pulse:not(#i) {
  --idn-fill: var(--identity-loop, var(--identity-gradient));
  --idn-halo: drop-shadow(0 0 4px color-mix(in srgb, var(--identity-glow, var(--identity-solid)) var(--idn-halo-mix), transparent));
  --idn-anim: idn-breathe 2.6s ease-in-out infinite alternate;
  background-size: 200% 100% !important;
}

/* aurora: smooth endless color flow */
html body .identity-name.identity-effect-aurora:not(#i),
html body .identity-name.identity-effect-fire:not(#i),
html body .identity-name.identity-effect-rainbow:not(#i) {
  --idn-fill: var(--identity-loop, var(--identity-gradient));
  --idn-anim: idn-flow 6s linear infinite;
  background-size: 200% 100% !important;
  background-repeat: repeat-x !important;
}

/* neon: bright core + crisp tube glow, still readable on light pages */
html body .identity-name.identity-effect-neon:not(#i) {
  --idn-fill: linear-gradient(color-mix(in srgb, var(--identity-solid) , var(--idn-mix-color) var(--idn-neon-mix)), color-mix(in srgb, var(--identity-solid) , var(--idn-mix-color) var(--idn-neon-mix)));
  --idn-halo: drop-shadow(0 0 1.5px color-mix(in srgb, var(--identity-glow, var(--identity-solid)) 85%, transparent)) drop-shadow(0 0 6px color-mix(in srgb, var(--identity-glow, var(--identity-solid)) var(--idn-halo-mix), transparent));
}

/* fixed premium palettes (ignore the user colors on purpose) */
html body .identity-name.identity-effect-gold:not(#i) {
  --identity-solid: #b7791f;
  --idn-fill: var(--idn-pal-gold);
  --idn-anim: idn-sheen 4.2s ease-in-out infinite;
}

html body .identity-name.identity-effect-chrome:not(#i) {
  --identity-solid: #6b7280;
  --idn-fill: var(--idn-pal-chrome);
  --idn-anim: idn-sheen 4.6s ease-in-out infinite;
}

html body .identity-name.identity-effect-fire:not(#i) {
  --identity-solid: #ea580c;
  --idn-fill: var(--idn-pal-fire);
  --idn-halo: drop-shadow(0 0 3px color-mix(in srgb, #f97316 var(--idn-halo-mix), transparent));
  --idn-anim: idn-flow 2.8s linear infinite;
}

html body .identity-name.identity-effect-ice:not(#i) {
  --identity-solid: #0284c7;
  --idn-fill: var(--idn-pal-ice);
  --idn-anim: idn-sheen 4.4s ease-in-out infinite;
}

html body .identity-name.identity-effect-rainbow:not(#i) {
  --identity-solid: #4f46e5;
  --idn-fill: var(--idn-pal-rainbow);
  --idn-anim: idn-flow 9s linear infinite;
}

html body .identity-name.identity-effect-royal:not(#i) {
  --identity-solid: #7c3aed;
  --idn-fill: var(--idn-pal-royal);
  --idn-halo: drop-shadow(0 0 4px color-mix(in srgb, #a855f7 var(--idn-halo-mix), transparent));
  --idn-anim: idn-sheen 4.4s ease-in-out infinite;
}

html body .identity-name.identity-effect-none:not(#i) {
  --idn-anim: none;
}

/* contexts */
html body .profile-name-wrapper .identity-name:not(#i) {
  --idn-weight: 800;
  --identity-plain: #fff;
  --idn-contour: drop-shadow(0 1px 2px rgba(0, 0, 0, .7));
}

html body .profile-name-wrapper .identity-name:not(.identity-name-custom):not(.identity-name-owner):not(.identity-name-featured):not(.identity-name-badged):not(#i) {
  filter: var(--idn-contour) !important;
}

html body .vr-sugo :is(.voice-room-message, .voice-seat) .identity-name:not(#i),
html body .lightbox[data-live-post-id] .live-audience-comments .identity-name:not(#i) {
  --idn-weight: 600;
}

@keyframes idn-flow {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}

@keyframes idn-breathe {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@keyframes idn-sheen {
  0% { background-position: 100% 0, 0 50%; }
  45%, 100% { background-position: 0% 0, 0 50%; }
}

/* no background-clip:text support -> solid color */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  html body .identity-name.identity-name:not(#i) {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
  }
}

/* ===================================================================
   3. Badges / tags (.user-badge-chip)
   =================================================================== */
html body .user-badge-chip:not(#i) {
  --ub-h: 20px;
  --ub-fs: 11px;
  --ub-ic: 10px;
  --ub-px: 8px;
  --ub-gap: 4px;
  --ub-c: var(--badge-color, #0ea5e9);
  --ub-g: var(--badge-glow, var(--ub-c));
  --ub-ring: rgba(255, 255, 255, .24);
  --ub-anim: none;
  --ub-shine: linear-gradient(105deg, transparent 15%, rgba(255, 255, 255, .55) 50%, transparent 85%);
  position: relative;
  isolation: isolate;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--ub-gap) !important;
  height: var(--ub-h);
  min-height: 0 !important;
  max-width: 16em;
  margin: 0 !important;
  margin-inline-start: 6px !important;
  padding: 0 var(--ub-px) !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--badge-text-color, #fff) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 58%),
    linear-gradient(135deg, var(--ub-c) 0%, color-mix(in srgb, var(--ub-c) 52%, var(--ub-g)) 100%) !important;
  box-shadow:
    inset 0 0 0 1px var(--ub-ring),
    inset 0 -1px 0 rgba(0, 0, 0, .14),
    0 1px 2px rgba(15, 23, 42, .2),
    0 2px 8px -3px color-mix(in srgb, var(--ub-g) 70%, transparent) !important;
  font-size: var(--ub-fs) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18) !important;
  white-space: nowrap;
  vertical-align: middle;
  transform: none !important;
  filter: none !important;
  zoom: 1;
  transition: box-shadow .18s ease !important;
}

html body .user-badge-chip:not(#i):hover {
  transform: none !important;
  filter: none !important;
  box-shadow:
    inset 0 0 0 1px var(--ub-ring),
    inset 0 -1px 0 rgba(0, 0, 0, .14),
    0 1px 2px rgba(15, 23, 42, .2),
    0 3px 12px -3px color-mix(in srgb, var(--ub-g) 85%, transparent) !important;
}

html body .user-badge-chip:not(#i) > i,
html body .user-badge-chip:not(#i) .js-user-badge-preview-icon {
  display: inline-block !important;
  flex: 0 0 auto;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--badge-icon-color, #fff) !important;
  font-size: var(--ub-ic) !important;
  line-height: 1 !important;
  text-shadow: none !important;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .22));
}

html body .user-badge-chip:not(#i) > span,
html body .user-badge-chip:not(#i) .js-user-badge-preview-label {
  display: block !important;
  min-width: 0;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--badge-text-color, #fff) !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;
  text-shadow: inherit !important;
}

html body .user-badge-chip:not(#i)::before {
  display: none !important;
}

/* shine sweep, used by premium tiers (transform-only animation) */
html body .user-badge-chip:not(#i)::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  z-index: 1;
  width: 45% !important;
  height: auto !important;
  border-radius: inherit;
  background: var(--ub-shine) !important;
  opacity: 0 !important;
  transform: translateX(-130%) !important;
  pointer-events: none;
  animation: var(--ub-anim) !important;
}

@keyframes ub-sheen {
  0% { opacity: 1; transform: translateX(-130%); }
  32% { opacity: 1; transform: translateX(260%); }
  33%, 100% { opacity: 0; transform: translateX(260%); }
}

/* tiers, detected from the badge icon (or explicit .user-badge-tier-* classes) */
html body .user-badge-chip:is(.user-badge-tier-royal, .user-badge-tier-gold, :has(> i:is(.fa-crown, .fa-chess-king, .fa-chess-queen))):not(#i) {
  --ub-ring: rgba(255, 228, 150, .7);
  --ub-anim: ub-sheen 4.8s ease-in-out infinite;
}

html body .user-badge-chip:is(.user-badge-tier-diamond, :has(> i:is(.fa-gem, .fa-diamond))):not(#i) {
  --ub-ring: rgba(207, 250, 254, .75);
  --ub-shine: linear-gradient(105deg, transparent 10%, rgba(165, 243, 252, .55) 38%, rgba(255, 255, 255, .8) 50%, rgba(240, 171, 252, .5) 62%, transparent 90%);
  --ub-anim: ub-sheen 4.2s ease-in-out infinite;
}

html body .user-badge-chip:is(.user-badge-tier-vip, :has(> i:is(.fa-star, .fa-award, .fa-medal, .fa-trophy, .fa-fire, .fa-bolt))):not(#i) {
  --ub-ring: rgba(255, 255, 255, .42);
  --ub-anim: ub-sheen 5.6s ease-in-out infinite;
}

html body .user-badge-chip:is(.user-badge-tier-verified, :has(> i:is(.fa-check, .fa-circle-check, .fa-check-circle, .fa-certificate, .fa-badge-check))):not(#i) {
  --ub-ring: rgba(255, 255, 255, .34);
}

html body .user-badge-chip:is(.user-badge-tier-mod, .user-badge-tier-admin, :has(> i:is(.fa-shield, .fa-shield-alt, .fa-shield-halved, .fa-user-shield, .fa-gavel, .fa-user-gear, .fa-user-cog))):not(#i) {
  --ub-ring: rgba(255, 255, 255, .3);
  box-shadow:
    inset 0 0 0 1px var(--ub-ring),
    inset 0 -1px 0 rgba(0, 0, 0, .2),
    0 1px 2px rgba(15, 23, 42, .25) !important;
}

html body .user-badge-chip:is(.user-badge-tier-creator, :has(> i:is(.fa-pen-nib, .fa-palette, .fa-video, .fa-camera, .fa-microphone, .fa-music, .fa-paintbrush, .fa-brush, .fa-wand-magic-sparkles))):not(#i) {
  --ub-ring: rgba(255, 255, 255, .38);
  --ub-anim: ub-sheen 6.4s ease-in-out infinite;
}

/* owner: black card with gold hairline */
html body .user-badge-chip.user-badge-owner:not(#i) {
  --ub-ring: rgba(246, 215, 122, .75);
  --ub-anim: ub-sheen 4.8s ease-in-out infinite;
  --ub-shine: linear-gradient(105deg, transparent 15%, rgba(255, 236, 170, .45) 50%, transparent 85%);
  color: #fde68a !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 55%),
    linear-gradient(120deg, #0b1220 0%, #1f2937 55%, #3b2a0a 100%) !important;
}

html body .user-badge-chip.user-badge-owner:not(#i) > i {
  color: #f6c945 !important;
}

html body .user-badge-chip.user-badge-owner:not(#i) > span {
  color: #fdf1c7 !important;
}

/* sizes per context */
html body :is(.comment, .comments, .voice-room-message, .live-audience-comments, .conversation, .chat-conversations, .chat-widget, .notification, .js_notifications, .dropdown-widget, .data-content .name):not(#i) .user-badge-chip,
html body .user-badge-chip.user-badge-xs:not(#i) {
  --ub-h: 16px;
  --ub-fs: 9.5px;
  --ub-ic: 8.5px;
  --ub-px: 6px;
  --ub-gap: 3px;
  margin-inline-start: 4px !important;
}

html body .profile-name-wrapper .user-badge-chip:not(#i),
html body .user-badge-preview-wrap .user-badge-chip:not(#i),
html body .user-badge-chip.user-badge-lg:not(#i) {
  --ub-h: 26px;
  --ub-fs: 12.5px;
  --ub-ic: 11.5px;
  --ub-px: 11px;
  --ub-gap: 6px;
  margin-inline-start: 8px !important;
}

/* undo old scale/zoom hacks in voice rooms (they made the chip blurry) */
html body .vr-sugo .voice-room-message .user-badge-chip:not(#i) {
  transform: none !important;
  zoom: 1 !important;
  margin: 0 !important;
  margin-inline: 4px 2px !important;
}

/* ===================================================================
   4. Avatar frames
   Ring is drawn inside the avatar footprint (no layout shift, no clipping):
   [conic ring --idf-w][gap --idf-gap / transparent][photo]
   =================================================================== */

/* neutralize legacy borders/outlines/filters (hue-rotate distorted the photo) */
html body :is(.avatar-frame-custom, .owner-avatar-ring, .featured-avatar-ring):not(.voice-seat-avatar):not(.voice-seat-video-placeholder > img):not(#i),
html body .profile-header[class*="avatar-frame-effect-"]:not(#i) {
  outline: 0 !important;
  outline-offset: 0 !important;
  filter: none !important;
  animation: none !important;
}

/* palettes */
html body :is(.owner-avatar-ring, .owner-luxury-profile):not(#i) {
  --idf-c1: #a8740d;
  --idf-c2: #f6d77a;
  --idf-c3: #fff4cf;
  --idf-c4: #d4a017;
  --idf-glow: #f5c542;
  --idf-anim: idf-spin 9s linear infinite;
}

html body :is(.featured-avatar-ring, .featured-identity-profile):not(#i) {
  --idf-c1: #7c3aed;
  --idf-c2: #22d3ee;
  --idf-c3: #a78bfa;
  --idf-c4: #6366f1;
  --idf-glow: #8b5cf6;
  --idf-anim: idf-spin 11s linear infinite;
}

html body :is(.avatar-frame-custom, .custom-avatar-profile):not(#i) {
  --idf-c1: var(--avatar-frame-start, #0ea5e9);
  --idf-c2: var(--avatar-frame-end, var(--avatar-frame-start, #8b5cf6));
  --idf-c3: var(--avatar-frame-glow, var(--avatar-frame-end, #22d3ee));
  --idf-c4: color-mix(in srgb, var(--avatar-frame-start, #0ea5e9) 50%, var(--avatar-frame-end, #8b5cf6));
  --idf-glow: var(--avatar-frame-glow, var(--avatar-frame-start, #22d3ee));
  --idf-anim: none;
}

/* frame effects (users.user_avatar_frame_effect) */
html body .avatar-frame-effect-none:not(#i) { --idf-anim: none; }
html body .avatar-frame-effect-pulse:not(#i) { --idf-anim: idf-sway 3.2s ease-in-out infinite alternate; }
html body .avatar-frame-effect-spin:not(#i) { --idf-anim: idf-spin 6s linear infinite; }
html body .avatar-frame-effect-halo:not(#i) { --idf-anim: none; --idf-glow-mix: 85%; --idf-blur-k: 1.6; }
html body .avatar-frame-effect-shine:not(#i) { --idf-hi: #ffffff; --idf-anim: idf-spin 3.6s linear infinite; }
html body .avatar-frame-effect-aurora:not(#i) { --idf-anim: idf-spin 14s linear infinite; --idf-glow-mix: 75%; --idf-blur-k: 1.4; }
html body .avatar-frame-effect-neon:not(#i) {
  --idf-c2: var(--idf-c1);
  --idf-c3: color-mix(in srgb, var(--idf-c1) 55%, #fff);
  --idf-c4: var(--idf-c1);
  --idf-glow: var(--idf-c1);
  --idf-glow-mix: 90%;
  --idf-anim: none;
}
html body .avatar-frame-effect-gold:not(#i) {
  --idf-c1: #a8740d; --idf-c2: #f6d77a; --idf-c3: #fff4cf; --idf-c4: #d4a017; --idf-glow: #f5c542;
  --idf-hi: #fffbe8;
  --idf-anim: idf-spin 7s linear infinite;
}
html body .avatar-frame-effect-royal:not(#i) {
  --idf-c1: #4c1d95; --idf-c2: #a855f7; --idf-c3: #fcd34d; --idf-c4: #7c3aed; --idf-glow: #a855f7;
  --idf-anim: idf-spin 9s linear infinite;
}
html body .avatar-frame-effect-diamond:not(#i) {
  --idf-c1: #67e8f9; --idf-c2: #e0f2fe; --idf-c3: #a5b4fc; --idf-c4: #f0abfc; --idf-glow: #67e8f9;
  --idf-hi: #ffffff;
  --idf-anim: idf-spin 5s linear infinite;
}
html body .avatar-frame-effect-fire:not(#i) {
  --idf-c1: #dc2626; --idf-c2: #f97316; --idf-c3: #fde047; --idf-c4: #ea580c; --idf-glow: #f97316;
  --idf-anim: idf-spin 2.8s linear infinite;
}

/* ring on <img> avatars (and the <img> inside framed wrappers) */
html body img:is(.avatar-frame-custom, .owner-avatar-ring, .featured-avatar-ring):not(.voice-seat-avatar):not(.voice-seat-video-placeholder > img):not(#i),
html body :is(.data-avatar, .chat-avatar):is(.avatar-frame-custom, .owner-avatar-ring, .featured-avatar-ring):not(#i) > img {
  box-sizing: border-box !important;
  padding: var(--idf-g, 1.5px) !important;
  border: var(--idf-w, 2px) solid transparent !important;
  outline: 0 !important;
  object-fit: cover;
  background:
    linear-gradient(var(--idf-gap), var(--idf-gap)) padding-box,
    conic-gradient(from var(--idf-angle), var(--idf-c1), var(--idf-c2) 25%, var(--idf-c3) 50%, var(--idf-hi, var(--idf-c4)) 72%, var(--idf-c1)) border-box !important;
  box-shadow:
    0 0 0 .5px rgba(0, 0, 0, .08),
    0 0 calc(var(--idf-blur, 7px) * var(--idf-blur-k, 1)) calc(var(--idf-blur, 7px) * -.2) color-mix(in srgb, var(--idf-glow) var(--idf-glow-mix, 55%), transparent) !important;
  filter: none !important;
  animation: var(--idf-anim, none) !important;
}

/* framed wrappers keep no frame of their own */
html body :is(.data-avatar, .chat-avatar):is(.avatar-frame-custom, .owner-avatar-ring, .featured-avatar-ring):not(#i) {
  border: 0 !important;
  box-shadow: none !important;
}

/* ring on background-image avatars (post/comment avatars, previews, story card) */
html body :is(.post-avatar-picture, .comment-avatar-picture, .user-identity-avatar-preview, .img):is(.avatar-frame-custom, .owner-avatar-ring, .featured-avatar-ring):not(#i) {
  position: relative !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow:
    0 0 calc(var(--idf-blur, 7px) * var(--idf-blur-k, 1)) calc(var(--idf-blur, 7px) * -.2) color-mix(in srgb, var(--idf-glow) var(--idf-glow-mix, 55%), transparent) !important;
  animation: none !important;
}

html body :is(.post-avatar-picture, .comment-avatar-picture, .user-identity-avatar-preview, .img):is(.avatar-frame-custom, .owner-avatar-ring, .featured-avatar-ring):not(#i)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  border: var(--idf-w, 2px) solid transparent;
  border-radius: inherit;
  padding: var(--idf-g, 1.5px);
  background:
    linear-gradient(var(--idf-gap), var(--idf-gap)) padding-box,
    conic-gradient(from var(--idf-angle), var(--idf-c1), var(--idf-c2) 25%, var(--idf-c3) 50%, var(--idf-hi, var(--idf-c4)) 72%, var(--idf-c1)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0) border-box;
  pointer-events: none;
  animation: var(--idf-anim, none);
}

/* proportional ring sizes */
html body :is(.comment-avatar-picture, .user-menu img, img.avatar-xs, img.rounded-circle.mr10, .voice-room-message-avatar img, .live-audience-comment-avatar, .live-audience-comment-avatar *, .data-avatar img, .chat-avatar img, .conversation img):not(#i) {
  --idf-w: 1.5px;
  --idf-g: 1px;
  --idf-blur: 5px;
}

html body :is(.post-avatar-picture, img.publisher-avatar):not(#i) {
  --idf-w: 2px;
  --idf-g: 1.5px;
  --idf-blur: 7px;
}

html body :is(.user-box img, img.user-profile-picture, .user-identity-avatar-preview, .idt-avatar-lg):not(#i) {
  --idf-w: 3px;
  --idf-g: 2.5px;
  --idf-blur: 12px;
}

/* profile header avatar */
html body .profile-header:is(.owner-luxury-profile, .featured-identity-profile, .custom-avatar-profile) .profile-avatar-wrapper:not(#i) {
  padding: 4px !important;
  background: conic-gradient(from var(--idf-angle), var(--idf-c1), var(--idf-c2) 25%, var(--idf-c3) 50%, var(--idf-hi, var(--idf-c4)) 72%, var(--idf-c1)) !important;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, .28),
    0 0 calc(22px * var(--idf-blur-k, 1)) -4px color-mix(in srgb, var(--idf-glow) var(--idf-glow-mix, 60%), transparent) !important;
  filter: none !important;
  animation: var(--idf-anim, none) !important;
}

html body .profile-header:is(.owner-luxury-profile, .featured-identity-profile, .custom-avatar-profile) .profile-avatar-wrapper:not(#i) > img {
  border: 4px solid var(--idf-gap) !important;
  background: var(--idf-gap) !important;
  outline: 0 !important;
  box-shadow: none !important;
}

html body .owner-avatar-crown:not(#i) {
  top: 2% !important;
  inset-inline-end: 2% !important;
  width: 30px !important;
  height: 30px !important;
  border: 1.5px solid #f6d77a !important;
  background: linear-gradient(145deg, #1f2937, #0b1220) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35), 0 0 10px -2px rgba(246, 201, 69, .7) !important;
  color: #f6c945 !important;
  font-size: 13px !important;
}

@keyframes idf-spin {
  to { --idf-angle: 360deg; }
}

@keyframes idf-sway {
  from { --idf-angle: 0deg; }
  to { --idf-angle: 120deg; }
}

/* ===================================================================
   5. Admin identity editor (live preview stage + preset grids)
   =================================================================== */
.idt-stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 720px;
}

.idt-pane {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 16px;
}

.idt-pane.idt-light { background: #ffffff; }
.idt-pane.idt-dark { background: #0c1129; border-color: rgba(255, 255, 255, .08); }

.idt-pane-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #64748b;
}

.idt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.idt-row .idt-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.idt-row .idt-meta .js-user-identity-name-preview { font-size: 15px; font-weight: 700; color: var(--identity-plain); }
.idt-row-lg .idt-meta .js-user-identity-name-preview { font-size: 20px; }
.idt-row-xs .idt-meta .js-user-identity-name-preview { font-size: 12.5px; }
.idt-row .idt-sub { display: block; width: 100%; font-size: 11px; color: #94a3b8; }

.idt-av { display: inline-flex; flex: 0 0 auto; }

html body .idt-av > .user-identity-avatar-preview:not(#i),
.user-identity-avatar-preview.idt-avatar {
  display: inline-block;
  width: var(--idt-size, 40px);
  height: var(--idt-size, 40px);
  min-width: var(--idt-size, 40px);
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.idt-av-lg { --idt-size: 64px; }
.idt-av-md { --idt-size: 40px; }
.idt-av-sm { --idt-size: 28px; }

html body .idt-av-md > .user-identity-avatar-preview:not(#i) { --idf-w: 2px; --idf-g: 1.5px; --idf-blur: 7px; }
html body .idt-av-sm > .user-identity-avatar-preview:not(#i) { --idf-w: 1.5px; --idf-g: 1px; --idf-blur: 5px; }

html body .idt-row-lg .user-badge-chip:not(#i) {
  --ub-h: 26px;
  --ub-fs: 12.5px;
  --ub-ic: 11.5px;
  --ub-px: 11px;
  --ub-gap: 6px;
}

html body .idt-row-xs .user-badge-chip:not(#i) {
  --ub-h: 16px;
  --ub-fs: 9.5px;
  --ub-ic: 8.5px;
  --ub-px: 6px;
  --ub-gap: 3px;
}

.idt-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
  max-width: 720px;
  margin-top: 10px;
}

.idt-preset {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 74px;
  padding: 10px 6px 8px;
  border: 1px solid rgba(148, 163, 184, .3);
  border-radius: 12px;
  background: #0c1129;
  color: #cbd5e1;
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.idt-preset:hover { border-color: #60a5fa; }

.idt-preset.active {
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, .35);
}

.idt-preset .identity-name { font-size: 15px; }
.idt-preset .idt-avatar { width: 40px; height: 40px; }
.idt-preset small { font-size: 10.5px; opacity: .85; }

.idt-badge-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 720px;
  margin-top: 10px;
}

.idt-badge-presets button {
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.idt-badge-presets button:hover,
.idt-badge-presets button:focus-visible {
  border-color: rgba(56, 189, 248, .6);
}

.idt-badge-presets .user-badge-chip { pointer-events: none; }

@media (max-width: 575.98px) {
  .idt-stage { grid-template-columns: 1fr; }
}

/* ===================================================================
   6. Reduced motion: keep the look, drop the movement
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    --idn-anim: none !important;
    --idf-anim: none !important;
    --ub-anim: none !important;
  }
}

/* Ehna performance: an endless background-position animation re-styles the whole page every frame
   (measured: ~75% of the main thread on a phone). The sheen now plays twice, and again while hovered. */
html body .identity-name:is(.identity-name-custom, .identity-name-owner, .identity-name-featured, .identity-name-badged):not(#i) { animation-iteration-count: 2 !important; }
html body .identity-name:is(.identity-name-custom, .identity-name-owner, .identity-name-featured, .identity-name-badged):not(#i):hover { animation-iteration-count: infinite !important; }

/* /content/themes/default/css/gifts.css */
/* Ehna - live gifts catalog & full-screen gift effects */

/* ---------- shared coin ---------- */
.ehna-coin {
  display: inline-block;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8d6 0 16%, #ffd84d 42%, #e69500 76%, #a85f00);
  box-shadow: inset 0 0 0 1px rgba(122, 74, 0, .55), 0 0 6px rgba(255, 200, 70, .35);
}

/* ---------- catalog dialog (bootbox) as a dark bottom sheet ---------- */
.ehna-gifts-sheet .modal-dialog {
  max-width: 640px;
}
.ehna-gifts-sheet .modal-content {
  background: linear-gradient(180deg, #1f1d2e 0%, #14131d 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.ehna-gifts-sheet .modal-header {
  border: 0;
  padding: 14px 16px 6px;
}
.ehna-gifts-sheet .modal-title {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.ehna-gifts-sheet .bootbox-close-button,
.ehna-gifts-sheet .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
  opacity: .7;
}
.ehna-gifts-sheet .modal-body {
  padding: 0 12px 12px;
}
@media (max-width: 575.98px) {
  .ehna-gifts-sheet .modal-dialog {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .ehna-gifts-sheet.fade .modal-dialog {
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.2, .8, .2, 1);
  }
  .ehna-gifts-sheet.show .modal-dialog {
    transform: none;
  }
  .ehna-gifts-sheet .modal-content {
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .ehna-gifts-sheet .modal-content::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, .25);
  }
  .ehna-gifts-sheet .modal-header {
    padding-top: 6px;
  }
}

/* own sheet (used when bootbox is not available) */
.ehna-gifts-modal {
  position: fixed;
  inset: 0;
  z-index: 50000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.ehna-gifts-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  opacity: 0;
  transition: opacity .3s;
}
.ehna-gifts-panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 32px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 22px;
  background: linear-gradient(180deg, #1f1d2e 0%, #14131d 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
  color: #fff;
  opacity: 0;
  transform: translateY(24px) scale(.98);
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .25s;
}
.ehna-gifts-modal.show .ehna-gifts-backdrop {
  opacity: 1;
}
.ehna-gifts-modal.show .ehna-gifts-panel {
  opacity: 1;
  transform: none;
}
.ehna-gifts-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px 16px;
}
.ehna-gifts-panel-head strong {
  font-size: 16px;
}
.ehna-gifts-x {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 22px;
  line-height: 1;
}
.ehna-gifts-panel-body {
  padding: 0 12px 12px;
}
@media (max-width: 575.98px) {
  .ehna-gifts-modal {
    align-items: flex-end;
    padding: 0;
  }
  .ehna-gifts-panel {
    max-height: 86vh;
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    transform: translateY(100%);
  }
  .ehna-gifts-panel::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, .25);
  }
  .ehna-gifts-panel-head {
    padding-top: 6px;
  }
}

.ehna-gifts {
  color: #fff;
  font-size: 13px;
}
.ehna-gifts-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 2px 10px;
}
.ehna-gifts-balance {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  white-space: nowrap;
}
.ehna-gifts-balance strong {
  color: #ffcf4a;
  font-weight: 800;
}
.ehna-gifts-balance small {
  opacity: .65;
}
.ehna-gifts-balance.wallet {
  margin-inline-start: auto;
}
.ehna-gifts-balance.wallet i {
  color: #7fd0ff;
}
.ehna-gifts-balance.wallet strong {
  color: #fff;
}

.ehna-gifts-tabs {
  display: flex;
  gap: 6px;
  margin: 0 -2px 8px;
  padding: 0 2px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ehna-gifts-tabs::-webkit-scrollbar {
  display: none;
}
.ehna-gifts-tabs button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 6px 14px;
  background: transparent;
  color: rgba(255, 255, 255, .6);
  font-size: 13px;
  font-weight: 600;
  transition: background .2s, color .2s;
}
.ehna-gifts-tabs button:hover {
  color: #fff;
}
.ehna-gifts-tabs button.active {
  background: #fff;
  color: #15141f;
}

.ehna-gifts-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  max-height: min(48vh, 430px);
  padding: 2px 2px 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
@media (min-width: 576px) {
  .ehna-gifts-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .ehna-gifts-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.ehna-gift {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 8px 4px 6px;
  border: 1.5px solid transparent;
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
  color: #fff;
  cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.ehna-gift:hover {
  background: rgba(255, 255, 255, .07);
}
.ehna-gift:active {
  transform: scale(.96);
}
.ehna-gift.is-hidden {
  display: none;
}
.ehna-gift.selected {
  border-color: #ff3d7f;
  background: linear-gradient(180deg, rgba(255, 61, 127, .2), rgba(255, 61, 127, .04));
  box-shadow: 0 0 0 3px rgba(255, 61, 127, .14), 0 8px 20px rgba(255, 61, 127, .22);
}
.ehna-gift-img {
  display: block;
  width: 100%;
  max-width: 64px;
  aspect-ratio: 1 / 1;
}
.ehna-gift-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .25s cubic-bezier(.2, 1.4, .4, 1);
}
.ehna-gift.selected .ehna-gift-img img {
  transform: translateY(-2px) scale(1.14);
}
.ehna-gift-name {
  max-width: 100%;
  overflow: hidden;
  color: rgba(255, 255, 255, .88);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ehna-gift-price {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #ffcf4a;
  font-size: 11px;
  font-weight: 700;
}
.ehna-gift-price .ehna-coin {
  width: 11px;
  height: 11px;
}
.ehna-gifts-empty {
  grid-column: 1 / -1;
  padding: 30px 10px;
  color: rgba(255, 255, 255, .5);
  text-align: center;
}

.ehna-gifts-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.ehna-gifts-selected {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ehna-gifts-selected img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.ehna-gifts-selected > span {
  min-width: 0;
}
.ehna-gifts-selected strong {
  display: block;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ehna-gifts-selected small {
  color: #ffcf4a;
  font-weight: 700;
}
.ehna-gifts-send {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 10px 28px;
  background: linear-gradient(90deg, #ff2d6f, #ff7a45);
  box-shadow: 0 6px 18px rgba(255, 45, 111, .4);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  transition: transform .15s, opacity .2s, box-shadow .2s;
}
.ehna-gifts-send:active {
  transform: scale(.95);
}
.ehna-gifts-send:disabled {
  opacity: .4;
  box-shadow: none;
}

/* ---------- banner pills (small gifts) ---------- */
.ehna-gift-lanes {
  position: fixed;
  z-index: 2147482000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
}
.ehna-gift-lanes.is-rtl {
  align-items: flex-end;
}
.ehna-gift-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  height: 44px;
  padding: 3px 52px 3px 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 45, 111, .94), rgba(255, 122, 69, .78) 72%, rgba(255, 122, 69, .05));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  color: #fff;
  animation: ehna-pill-in .5s cubic-bezier(.2, 1.3, .4, 1) both;
}
.ehna-gift-pill .av {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 2px solid #fff;
  border-radius: 50%;
  object-fit: cover;
}
.ehna-gift-pill .tx {
  min-width: 0;
  line-height: 1.2;
}
.ehna-gift-pill .tx b,
.ehna-gift-pill .tx small {
  display: block;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ehna-gift-pill .tx b {
  font-size: 13px;
}
.ehna-gift-pill .tx small {
  font-size: 11px;
  opacity: .92;
}
.ehna-gift-pill .gf {
  position: absolute;
  top: 50%;
  right: -6px;
  width: 56px;
  height: 56px;
  object-fit: contain;
  transform: translateY(-50%);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35));
  animation: ehna-gift-in .55s cubic-bezier(.2, 1.5, .4, 1) .15s both;
}
.ehna-gift-pill .cb {
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 10px;
  color: #ffe066;
  font-size: 15px;
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 2px 0 #c2410c, 0 0 12px rgba(255, 170, 0, .7);
  transform: translateY(-50%);
}
.ehna-gift-pill .cb em {
  font-size: 28px;
  font-style: italic;
}
.ehna-gift-pill.pop .cb {
  animation: ehna-combo .4s cubic-bezier(.2, 1.6, .4, 1);
}
.ehna-gift-pill.out {
  animation: ehna-pill-out .4s ease-in forwards;
}
.is-rtl .ehna-gift-pill {
  flex-direction: row-reverse;
  padding: 3px 3px 3px 52px;
  background: linear-gradient(270deg, rgba(255, 45, 111, .94), rgba(255, 122, 69, .78) 72%, rgba(255, 122, 69, .05));
  animation-name: ehna-pill-in-rtl;
}
.is-rtl .ehna-gift-pill .gf {
  right: auto;
  left: -6px;
}
.is-rtl .ehna-gift-pill .cb {
  left: auto;
  right: 100%;
  margin: 0 10px 0 0;
}
.is-rtl .ehna-gift-pill.out {
  animation-name: ehna-pill-out-rtl;
}
@keyframes ehna-pill-in {
  from { opacity: 0; transform: translateX(-110%); }
  to { opacity: 1; transform: none; }
}
@keyframes ehna-pill-in-rtl {
  from { opacity: 0; transform: translateX(110%); }
  to { opacity: 1; transform: none; }
}
@keyframes ehna-pill-out {
  to { opacity: 0; transform: translate(-40px, -14px); }
}
@keyframes ehna-pill-out-rtl {
  to { opacity: 0; transform: translate(40px, -14px); }
}
@keyframes ehna-gift-in {
  from { opacity: 0; transform: translateY(-50%) scale(.2) rotate(-25deg); }
  to { opacity: 1; transform: translateY(-50%) scale(1); }
}
@keyframes ehna-combo {
  0% { transform: translateY(-50%) scale(1); }
  45% { transform: translateY(-50%) scale(1.6); }
  100% { transform: translateY(-50%) scale(1); }
}

/* ---------- full-screen effect ---------- */
.ehna-gfx {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.ehna-gfx .vig {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 44%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, .5) 72%, rgba(0, 0, 0, .78));
  opacity: 0;
  transition: opacity .45s;
}
.ehna-gfx .rays {
  position: absolute;
  top: 44%;
  left: 50%;
  width: 180vmax;
  height: 180vmax;
  margin: -90vmax 0 0 -90vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 222, 130, 0) 0deg 6deg, rgba(255, 222, 130, .3) 8deg 11deg, rgba(255, 222, 130, 0) 13deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .65) 14%, transparent 42%);
  mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .65) 14%, transparent 42%);
  opacity: 0;
  animation: ehna-spin 20s linear infinite;
  transition: opacity .6s;
}
.ehna-gfx .rays.r2 {
  background: repeating-conic-gradient(from 10deg, rgba(255, 120, 190, 0) 0deg 12deg, rgba(255, 120, 190, .22) 14deg 17deg, rgba(255, 120, 190, 0) 19deg 30deg);
  animation-direction: reverse;
  animation-duration: 28s;
}
.ehna-gfx .glow {
  position: absolute;
  top: 44%;
  left: 50%;
  width: 84vmin;
  height: 84vmin;
  margin: -42vmin 0 0 -42vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 102, .55), rgba(255, 120, 180, .2) 45%, transparent 70%);
  opacity: 0;
  transform: scale(.3);
  transition: transform .9s cubic-bezier(.2, 1.2, .3, 1), opacity .5s;
}
.ehna-gfx .flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 44%, #fff, rgba(255, 240, 200, .6) 38%, transparent 75%);
  opacity: 0;
}
.ehna-gfx .stage {
  position: absolute;
  top: 44%;
  left: 50%;
  width: min(66vmin, 520px);
  height: min(66vmin, 520px);
  transform: translate(-50%, -50%);
}
.ehna-gfx .stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .45));
}
.ehna-gfx .parts {
  position: absolute;
  top: 44%;
  left: 50%;
  width: 0;
  height: 0;
}
.ehna-gfx .p {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  background: center / contain no-repeat;
  opacity: 0;
  animation: ehna-burst var(--t, 1.6s) cubic-bezier(.12, .75, .3, 1) var(--d, 0s) forwards;
}
.ehna-gfx .p.star {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-52 -52 104 104'%3E%3Cpath d='M0 -50L12 -16L48 -15L19 7L30 41L0 21L-30 41L-19 7L-48 -15L-12 -16Z' fill='%23ffd84d' stroke='%23fff3b0' stroke-width='5'/%3E%3C/svg%3E");
}
.ehna-gfx .p.spark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0 -10C1.2 -2.6 2.6 -1.2 10 0C2.6 1.2 1.2 2.6 0 10C-1.2 2.6 -2.6 1.2 -10 0C-2.6 -1.2 -1.2 -2.6 0 -10Z' fill='%23ffffff'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9));
}
.ehna-gfx .p.heart {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-52 -48 104 84'%3E%3Cpath d='M0 34C-30 14 -50 -2 -50 -20C-50 -36 -38 -46 -25 -46C-13 -46 -4 -39 0 -30C4 -39 13 -46 25 -46C38 -46 50 -36 50 -20C50 -2 30 14 0 34Z' fill='%23ff4f8b'/%3E%3C/svg%3E");
}
.ehna-gfx .p.conf {
  height: calc(var(--s) * .45);
  border-radius: 2px;
  background: var(--c);
}
.ehna-gfx .rain {
  position: absolute;
  top: -40px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  opacity: 0;
  animation: ehna-rain var(--t) linear var(--d) forwards;
}
.ehna-gfx .rain.coin {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8d6 0 15%, #ffd84d 42%, #e69500 76%, #a85f00);
  box-shadow: inset 0 0 0 2px rgba(122, 74, 0, .5), 0 0 10px rgba(255, 200, 70, .5);
}
.ehna-gfx .rain.conf {
  height: calc(var(--s) * .45);
  border-radius: 2px;
  background: var(--c);
}
.ehna-gfx .cap {
  position: absolute;
  bottom: max(12vh, 90px);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 92vw;
  padding: 6px 18px 6px 6px;
  border: 1px solid rgba(255, 215, 120, .6);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(30, 20, 52, .9), rgba(70, 24, 78, .9));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 26px rgba(255, 200, 90, .35);
  color: #fff;
  opacity: 0;
  transform: translate(-50%, 30px);
  transition: transform .5s cubic-bezier(.2, 1.3, .4, 1) .35s, opacity .4s .35s;
}
.ehna-gfx .cap .av {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 2px solid #ffd84d;
  border-radius: 50%;
  object-fit: cover;
}
.ehna-gfx .cap .tx {
  min-width: 0;
  line-height: 1.25;
}
.ehna-gfx .cap b,
.ehna-gfx .cap small {
  display: block;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ehna-gfx .cap b {
  font-size: 15px;
}
.ehna-gfx .cap small {
  font-size: 12px;
  opacity: .85;
}
.ehna-gfx .cap .pts {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #ffd84d;
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
}
.ehna-gfx .cap .pts em {
  font-style: normal;
}
.ehna-gfx .cap .ehna-coin {
  width: 16px;
  height: 16px;
}

/* timeline */
.ehna-gfx.in .vig,
.ehna-gfx.in .rays {
  opacity: 1;
}
.ehna-gfx.in .glow {
  opacity: 1;
  transform: scale(1);
}
.ehna-gfx.in .stage img {
  animation: ehna-pop .9s cubic-bezier(.2, 1.4, .4, 1) forwards, ehna-floaty 2.6s ease-in-out .9s infinite alternate;
}
.ehna-gfx.in .cap {
  opacity: 1;
  transform: translate(-50%, 0);
}
.ehna-gfx.out .vig,
.ehna-gfx.out .rays,
.ehna-gfx.out .glow {
  opacity: 0;
  transition-duration: .6s;
}
.ehna-gfx.out .stage {
  animation: ehna-leave .7s ease-in forwards;
}
.ehna-gfx.out .cap {
  opacity: 0;
  transform: translate(-50%, 20px);
  transition-delay: 0s;
}
.ehna-gfx.tier-1 .rays.r2 {
  display: none;
}
.ehna-gfx.tier-3 .glow {
  background: radial-gradient(circle, rgba(255, 236, 160, .7), rgba(255, 110, 200, .3) 45%, rgba(120, 80, 255, .12) 62%, transparent 72%);
}
.ehna-gfx.mega.in {
  animation: ehna-shake .8s cubic-bezier(.36, .07, .19, .97) .3s;
}
.ehna-gfx.mega.in .flash {
  animation: ehna-flash 1s ease-out .25s, ehna-flash 1s ease-out 1.7s;
}
.ehna-shake {
  animation: ehna-shake .8s cubic-bezier(.36, .07, .19, .97) .3s;
}

@keyframes ehna-spin {
  to { transform: rotate(360deg); }
}
@keyframes ehna-pop {
  0% { opacity: 0; transform: scale(.15) rotate(-10deg); }
  55% { opacity: 1; transform: scale(1.1) rotate(3deg); }
  75% { transform: scale(.95) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes ehna-floaty {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-14px) scale(1.03); }
}
@keyframes ehna-leave {
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}
@keyframes ehna-burst {
  0% { opacity: 1; transform: translate(0, 0) scale(.3) rotate(0); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--r)); }
}
@keyframes ehna-rain {
  0% { opacity: 0; transform: translateY(0) rotate(0) rotateY(0); }
  8% { opacity: 1; }
  100% { opacity: 1; transform: translateY(calc(100vh + 80px)) rotate(var(--r)) rotateY(720deg); }
}
@keyframes ehna-flash {
  0% { opacity: 0; }
  15% { opacity: .85; }
  100% { opacity: 0; }
}
@keyframes ehna-shake {
  10%, 90% { transform: translate3d(-2px, 1px, 0); }
  20%, 80% { transform: translate3d(4px, -2px, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 3px, 0); }
  40%, 60% { transform: translate3d(6px, -3px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ehna-gift-pill,
  .ehna-gift-pill .gf,
  .ehna-gift-pill.pop .cb,
  .ehna-gift-pill.out {
    animation-duration: .01ms;
  }
  .ehna-shake {
    animation: none;
  }
}

.js_ehna-sel-img[src^="data:"] { visibility: hidden; }

/* ---------- voice rooms: recipients row, quantity, seat charm, room total ---------- */
.ehna-gifts-to {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 2px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  margin-bottom: 8px;
}
.ehna-gifts-to.is-shake { animation: ehnaToShake .5s; }
@keyframes ehnaToShake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.ehna-gifts-to-label {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .6);
}
.ehna-gifts-to-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ehna-gifts-to-list::-webkit-scrollbar { display: none; }
.ehna-gifts-to-item {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: none;
  opacity: .6;
  transition: opacity .15s, border-color .15s, transform .15s;
}
.ehna-gifts-to-item img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ehna-gifts-to-item small {
  position: absolute;
  right: -3px;
  bottom: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 16px;
  color: #fff;
  background: #7c6cff;
}
.ehna-gifts-to-item.active { opacity: 1; border-color: #ffd84d; transform: scale(1.06); }
.ehna-gifts-to-empty { font-size: 12px; color: rgba(255, 255, 255, .5); }
.ehna-gifts-qty {
  display: flex;
  gap: 4px;
  margin-inline-end: auto;
}
.ehna-gifts-qty button {
  height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .06);
}
.ehna-gifts-qty button.active {
  color: #2b1a00;
  border-color: transparent;
  background: linear-gradient(135deg, #ffe58a, #f0a500);
}
.ehna-gifts.is-room .ehna-gifts-selected { display: none; }
.ehna-gifts.is-room .ehna-gifts-foot { gap: 8px; }

.voice-seat-charm {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  padding: 1px 7px 1px 4px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  color: #ffe58a;
  background: rgba(0, 0, 0, .32);
}
.voice-seat-charm .ehna-coin { width: 10px; height: 10px; }
.vr-room-gifts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  margin-inline-start: 6px;
  padding: 0 9px 0 6px;
  border-radius: 13px;
  font-size: 12px;
  color: #ffe58a;
  background: rgba(0, 0, 0, .3);
  white-space: nowrap;
}
.vr-room-gifts b { font-weight: 700; }
.voice-room-gift-line {
  display: flex;
  align-items: center;
  gap: 6px;
}
.voice-room-gift-line img { width: 26px; height: 26px; object-fit: contain; }
.voice-room-gift-line b { color: #ffd84d; }

/* /content/themes/default/css/city.css */
/* Ehna city hubs */
.ehna-city-page { min-height: 65vh; padding-bottom: 48px; color: #202c33; }
.ehna-city-intro { padding: 48px 0 34px; color: #fff; background: linear-gradient(118deg, #073b4c, #087e8b 58%, #e76f51); }
.ehna-city-eyebrow { margin: 0 0 10px; color: #f7c873; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.ehna-city-intro h1, .ehna-city-hero h1 { margin: 0; font-size: 36px; line-height: 1.15; font-weight: 800; }
.ehna-city-lead { max-width: 720px; margin: 14px 0 0; font-size: 16px; line-height: 1.6; opacity: .9; }
.ehna-city-index { padding-top: 24px; }
.ehna-city-region { margin-bottom: 30px; }
.ehna-city-region-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; border-bottom: 1px solid #dfe7ea; }
.ehna-city-region-head h2 { margin: 0 0 10px; font-size: 21px; font-weight: 750; }
.ehna-city-region-head span { color: #718087; font-size: 12px; }
.ehna-city-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ehna-city-link { display: flex; align-items: center; gap: 11px; min-height: 68px; padding: 10px 12px; border: 1px solid #e0e8eb; border-radius: 10px; color: inherit; background: #fff; text-decoration: none; transition: border-color .16s, transform .16s, box-shadow .16s; }
.ehna-city-link:hover { border-color: #0c8b91; color: inherit; transform: translateY(-2px); box-shadow: 0 7px 22px rgba(7, 59, 76, .11); }
.ehna-city-mark { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #087e8b, #073b4c); font-size: 10px; font-weight: 800; }
.ehna-city-link strong, .ehna-city-link small { display: block; }
.ehna-city-link strong { font-size: 14px; }
.ehna-city-link small { margin-top: 3px; color: #718087; font-size: 11px; }
.ehna-city-link > i { margin-inline-start: auto; color: #819198; font-size: 12px; }
.ehna-city-hero { position: relative; overflow: hidden; padding: 34px 0 40px; color: #fff; background: linear-gradient(122deg, #073b4c, #087e8b 56%, #37a6a4); }
.ehna-city-hero::after { position: absolute; right: 7%; bottom: -96px; width: 310px; height: 230px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; content: ""; box-shadow: 0 0 0 26px rgba(255,255,255,.04), 0 0 0 56px rgba(255,255,255,.035); pointer-events: none; }
.ehna-city-hero.is-sinai { background: linear-gradient(122deg, #173b42, #16766f 56%, #c66d4e); }
.ehna-city-back { position: relative; z-index: 1; display: inline-flex; gap: 7px; align-items: center; margin-bottom: 22px; color: rgba(255,255,255,.8); font-size: 12px; text-decoration: none; }
.ehna-city-back:hover { color: #fff; }
.ehna-city-hero h1, .ehna-city-hero .ehna-city-lead, .ehna-city-hero .ehna-city-eyebrow { position: relative; z-index: 1; }
.ehna-city-quicklinks { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ehna-city-quicklinks a { padding: 8px 13px; border: 1px solid rgba(255,255,255,.33); border-radius: 18px; color: #fff; background: rgba(0,0,0,.12); font-size: 12px; font-weight: 650; text-decoration: none; backdrop-filter: blur(6px); }
.ehna-city-quicklinks a:hover { background: rgba(255,255,255,.17); }
.ehna-city-content { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; padding-top: 24px; }
.ehna-city-section { margin-bottom: 26px; }
.ehna-city-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid #dfe7ea; }
.ehna-city-section-head h2, .ehna-city-aside h2 { margin: 0; font-size: 18px; font-weight: 750; }
.ehna-city-section-head a { color: #087e8b; font-size: 12px; font-weight: 650; text-decoration: none; }
.ehna-city-posts { display: grid; gap: 12px; }
.ehna-city-post { padding: 15px; border: 1px solid #e3eaed; border-radius: 10px; background: #fff; }
.ehna-city-post-author { display: flex; align-items: center; gap: 9px; }
.ehna-city-post-author img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.ehna-city-post-author strong, .ehna-city-post-author small { display: block; }
.ehna-city-post-author strong { font-size: 13px; }
.ehna-city-post-author small { margin-top: 2px; color: #809097; font-size: 10px; }
.ehna-city-post > p { margin: 12px 0 0; white-space: pre-line; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.ehna-city-post-photo { display: block; width: auto; max-width: 100%; max-height: 360px; margin: 12px auto 0; border-radius: 8px; object-fit: contain; }
.ehna-city-empty { margin: 0; padding: 24px 14px; border: 1px dashed #cbd6da; border-radius: 8px; color: #6a7c83; font-size: 13px; text-align: center; }
.ehna-city-pages, .ehna-city-events { display: grid; gap: 8px; }
.ehna-city-page-link, .ehna-city-event { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #e2e9ec; border-radius: 8px; color: inherit; background: #fff; text-decoration: none; }
.ehna-city-page-link:hover, .ehna-city-event:hover { border-color: #0c8b91; color: inherit; }
.ehna-city-page-link img { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.ehna-city-event > i { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border-radius: 9px; color: #087e8b; background: #e8f4f3; }
.ehna-city-page-link strong, .ehna-city-page-link small, .ehna-city-event strong, .ehna-city-event small { display: block; }
.ehna-city-page-link strong, .ehna-city-event strong { font-size: 13px; }
.ehna-city-page-link small, .ehna-city-event small { margin-top: 3px; color: #718087; font-size: 11px; }
.ehna-city-aside { align-self: start; padding: 15px; border: 1px solid #e1e8eb; border-radius: 10px; background: #f7fafb; }
.ehna-city-aside h2 { margin-bottom: 14px; }
.ehna-city-nearby-group { display: grid; gap: 7px; margin-bottom: 16px; }
.ehna-city-nearby-group > strong { color: #687a81; font-size: 11px; text-transform: uppercase; }
.ehna-city-nearby-group a { color: #26363c; font-size: 13px; text-decoration: none; }
.ehna-city-nearby-group a[aria-current="page"] { color: #087e8b; font-weight: 750; }
body.night-mode .ehna-city-page { color: #edf5f5; }
body.night-mode .ehna-city-region-head, body.night-mode .ehna-city-section-head { border-color: rgba(255,255,255,.13); }
body.night-mode .ehna-city-link, body.night-mode .ehna-city-post, body.night-mode .ehna-city-page-link, body.night-mode .ehna-city-event, body.night-mode .ehna-city-aside { border-color: rgba(255,255,255,.12); color: #edf5f5; background: #1c252a; }
body.night-mode .ehna-city-link small, body.night-mode .ehna-city-post-author small, body.night-mode .ehna-city-page-link small, body.night-mode .ehna-city-event small { color: #9eafb4; }
body.night-mode .ehna-city-nearby-group a { color: #edf5f5; }
@media (max-width: 767px) {
  .ehna-city-intro { padding: 32px 0 26px; }
  .ehna-city-intro h1, .ehna-city-hero h1 { font-size: 30px; }
  .ehna-city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ehna-city-link { min-height: 62px; gap: 8px; padding: 8px; }
  .ehna-city-mark { flex-basis: 32px; width: 32px; height: 32px; font-size: 9px; }
  .ehna-city-link strong { font-size: 12px; }
  .ehna-city-link > i { display: none; }
  .ehna-city-content { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-top: 18px; }
  .ehna-city-aside { order: -1; }
  .ehna-city-nearby-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
}
@media (max-width: 359px) { .ehna-city-grid { grid-template-columns: minmax(0, 1fr); } }

/* Match the site's existing page header, directory cards and card surfaces. */
.ehna-city-page { color: var(--body-color); font-family: var(--body-font-family); }
.ehna-city-index-header.page-header,
.ehna-city-hero.page-header {
  background: linear-gradient(to right, #667db6, #0082c8, #0082c8, #667db6);
  text-align: center;
}
.ehna-city-index-header.page-header { padding: 35px 15px; }
.ehna-city-index-header h1,
.ehna-city-hero h1 { margin: 0 0 8px; color: #fff; font-size: 26px; font-weight: 700; }
.ehna-city-index-header .text-xlg,
.ehna-city-hero .text-xlg { margin: 0; color: #fff; font-size: 15px; line-height: 1.55; }
.ehna-city-eyebrow { margin-bottom: 5px; color: rgba(255,255,255,.82); font-size: 11px; }
.ehna-city-region { overflow: hidden; border-radius: 16px; }
.ehna-city-region-head { justify-content: space-between; align-items: center; margin: 0; padding: 16px 20px; border-bottom: 1px solid #f0f2f5; }
.ehna-city-region-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.ehna-city-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ehna-city-link.directory-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 108px;
  padding: 15px 10px;
  border-radius: 16px;
  text-align: center;
  color: var(--body-color);
  background: #f6f7f9;
}
.ehna-city-link.directory-card:hover { color: var(--link-color); background: #eee; transform: none; box-shadow: none; }
.ehna-city-mark { display: grid; width: 30px; height: 30px; flex-basis: 30px; place-items: center; border-radius: 50%; color: var(--link-color); background: transparent; font-size: 15px; }
.ehna-city-link strong { font-size: 14px; font-weight: 600; }
.ehna-city-link small { color: inherit; opacity: .7; font-size: 11px; }
.ehna-city-hero.page-header { padding: 35px 15px; }
.ehna-city-hero.page-header::after { display: none; }
.ehna-city-back { color: rgba(255,255,255,.86); font-size: 13px; }
.ehna-city-quicklinks { justify-content: center; margin-top: 16px; }
.ehna-city-quicklinks .btn { border-radius: 5px; color: var(--body-color); font-weight: 500; backdrop-filter: none; }
.ehna-city-content { gap: 20px; }
.ehna-city-section-head { border-color: #e5e7eb; }
.ehna-city-section-head h2, .ehna-city-aside h2 { font-size: 17px; font-weight: 600; }
.ehna-city-section-head a { color: var(--link-color); }
.ehna-city-post { overflow: hidden; border: 0; border-radius: 16px; background: #fff; }
.ehna-city-post-author small, .ehna-city-page-link small, .ehna-city-event small { color: #8a8d91; }
.ehna-city-empty { border-color: #d7dbe0; color: #777; }
.ehna-city-page-link, .ehna-city-event { border-color: #e5e7eb; border-radius: 10px; background: #fff; }
.ehna-city-page-link:hover, .ehna-city-event:hover { border-color: var(--link-color); }
.ehna-city-event > i { color: var(--link-color); background: rgba(94,114,228,.1); }
.ehna-city-aside { align-self: start; padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: #fff; }
.ehna-city-aside > .card-body { padding: 18px; }
.ehna-city-nearby-group > strong { color: #8a8d91; }
.ehna-city-nearby-group a { color: var(--body-color); }
.ehna-city-nearby-group a[aria-current="page"] { color: var(--link-color); }
body.night-mode .ehna-city-page { color: var(--body-color-dark); }
body.night-mode .ehna-city-region-head { border-color: var(--card-dark-divider); }
body.night-mode .ehna-city-link.directory-card { color: var(--body-color-dark); background: var(--card-dark-input); }
body.night-mode .ehna-city-link.directory-card:hover { background: var(--card-dark-hover); }
body.night-mode .ehna-city-post,
body.night-mode .ehna-city-page-link,
body.night-mode .ehna-city-event,
body.night-mode .ehna-city-aside { border-color: var(--card-dark-divider); color: var(--body-color-dark); background: var(--card-dark-color); }
body.night-mode .ehna-city-section-head { border-color: var(--card-dark-divider); }
body.night-mode .ehna-city-post-author small,
body.night-mode .ehna-city-page-link small,
body.night-mode .ehna-city-event small { color: #9aa8b2; }
body.night-mode .ehna-city-nearby-group a { color: var(--body-color-dark); }
@media (min-width: 768px) {
  .ehna-city-index-header.page-header { padding: 45px 15px; }
  .ehna-city-hero.page-header { padding: 45px 15px; }
}
@media (max-width: 767px) {
  .ehna-city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ehna-city-link.directory-card { min-height: 88px; padding: 12px 8px; }
  .ehna-city-link strong { font-size: 12px; }
  .ehna-city-content { grid-template-columns: minmax(0, 1fr); }
  .ehna-city-aside { order: -1; }
}

.ehna-admin-city-list { display: grid; gap: 10px; }
.ehna-admin-city {
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}
.ehna-admin-city > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}
.ehna-admin-city > summary::-webkit-details-marker { display: none; }
.ehna-admin-city > summary::after { content: "\f078"; font: 900 12px "Font Awesome 6 Free"; color: var(--link-color); }
.ehna-admin-city[open] > summary { border-bottom: 1px solid #e5e7eb; }
.ehna-admin-city-name strong, .ehna-admin-city-name small { display: block; }
.ehna-admin-city-name strong { font-size: 14px; }
.ehna-admin-city-name small { margin-top: 3px; color: #777; font-size: 11px; }
.ehna-admin-city-body { padding: 16px; }
body.night-mode .ehna-admin-city { border-color: var(--card-dark-divider); background: var(--card-dark-color); }
body.night-mode .ehna-admin-city[open] > summary { border-color: var(--card-dark-divider); }
body.night-mode .ehna-admin-city-name small { color: #b0b3b8; }
@media (max-width: 767px) { .ehna-admin-city-body { padding: 12px; } }
.ehna-city-region-head h2 a { color: inherit; text-decoration: none; }
.ehna-city-region-head h2 a:hover { color: var(--link-color); }
.post-city-tag { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 8px; color: var(--link-color); font-size: 12px; text-decoration: none; }
.post-city-tag:hover { color: var(--link-color); text-decoration: underline; }
body.night-mode .post-city-tag { color: var(--link-color); }

/* Ehna: City Hub admin (shared template) */
body.night-mode { --ehna-fg: #e4e6eb; --ehna-bg: #242526; }

.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(--ehna-fg, #1c1e21) 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(--ehna-fg, #1c1e21) 12%, transparent); background: var(--ehna-bg, #fff); color: color-mix(in oklab, var(--ehna-fg, #1c1e21) 55%, transparent); }
.ehna-city-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ehna-fg, #1c1e21); font-size: .875rem; }
.ehna-city { border-radius: 1rem; border: 1px solid color-mix(in oklab, var(--ehna-fg, #1c1e21) 9%, transparent); background: color-mix(in oklab, var(--ehna-fg, #1c1e21) 3%, var(--ehna-bg, #fff)); transition: border-color .15s ease; }
.ehna-city[open] { border-color: color-mix(in oklab, var(--ehna-primary, #f97316) 35%, transparent); background: var(--ehna-bg, #fff); }
.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(--ehna-fg, #1c1e21) 55%, transparent); }
.ehna-city-name small { font-size: .78rem; color: color-mix(in oklab, var(--ehna-fg, #1c1e21) 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(--ehna-fg, #1c1e21) 8%, transparent); color: color-mix(in oklab, var(--ehna-fg, #1c1e21) 60%, transparent); }
.ehna-city-status.is-on { background: color-mix(in oklab, #16a34a 14%, transparent); color: #16a34a; }
.ehna-city-chevron { flex-shrink: 0; color: color-mix(in oklab, var(--ehna-fg, #1c1e21) 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(--ehna-fg, #1c1e21) 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(--ehna-primary, #f97316) !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(--ehna-primary, #f97316) 12%, transparent); color: var(--ehna-primary, #f97316); 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(--ehna-fg, #1c1e21) 7%, transparent); color: color-mix(in oklab, var(--ehna-fg, #1c1e21) 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; }

/* /content/themes/giftun/css/ehna-giftun.css */
/* Ehna features inside the Giftun theme */

/* header balances (wallet & points) use Giftun's tertiary buttons */
.ehna-balance { white-space: nowrap; }

/* identity badge & package emblem next to names */
.ehna-identity-badge { margin-inline-start: .35rem; vertical-align: middle; }
.ehna-identity-package {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-inline-start: .3rem;
  vertical-align: middle;
  color: #d4af37;
}
.ehna-identity-package img { width: 100%; height: 100%; object-fit: contain; }

/* avatar frames sit on Giftun's rounded avatars */
a.avatar-frame-custom,
a.owner-avatar-ring,
a.featured-avatar-ring,
.profile-avatar-wrapper.avatar-frame-custom {
  position: relative;
  isolation: isolate;
}

/* /content/themes/giftun/css/ehna-design.css */
/* =====================================================================
   Ehna design layer for Giftun
   - 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^="giftun"],
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; }
  html.eh-pwa-on .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; } }
/* 419.98: with search, explore, language, messages and alerts the bar overflowed 390px phones by ~7px */
@media (max-width: 419.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: 3000; 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: 2999; 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; }
}

/* =====================================================================
   Readable form fields everywhere (sign in / sign up / every form)
   - tell the browser which scheme the page uses, so phones that force a dark mode
     on websites do not repaint fields with light text on a light background
   - browser autofill paints its own background: keep our text and background
   ===================================================================== */
:root { color-scheme: light; }
html[data-theme$="-dark"], html:has(> body.night-mode), html.dark { color-scheme: dark; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active,
textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus,
select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-base-content, #11142d) !important;
  caret-color: var(--color-base-content, #11142d);
  -webkit-box-shadow: 0 0 0 1000px var(--color-base-100, #ffffff) inset !important;
  box-shadow: 0 0 0 1000px var(--color-base-100, #ffffff) inset !important;
  transition: background-color 600000s 0s, color 600000s 0s;
}
input, textarea, select { caret-color: var(--color-base-content, currentColor); }
/* while chat bubbles are on screen, a sticky sponsored bar never sits under them: it moves up out of their way */
html.eh-heads-on .ehna-ad-sticky { bottom: calc(150px + env(safe-area-inset-bottom)); }
/* phones: the site's top banner ads stay off; the only ad is the sponsored card in the feed */
@media (max-width: 767.98px) { html:not(.ehna-ads-all) .ehna-ads-master { display: none !important; } }

/* /content/themes/default/css/ehna-flags.css */
/* Ehna: colour flag emoji everywhere (Windows has no flag emoji and shows "EG" letters instead of 🇪🇬).
   The font only covers flag code points (unicode-range), so every other character keeps the theme font.
   Font: Twemoji Country Flags (country-flag-emoji-polyfill), graphics by Twitter Twemoji, CC-BY 4.0. */
@font-face {
  font-family: "Twemoji Country Flags";
  src: url("/content/themes/default/fonts/TwemojiCountryFlags.woff2?v=1") format("woff2");
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  font-display: swap;
}
/* Giftun (Tailwind font tokens) */
:root { --font-sans: "Twemoji Country Flags", "Inter", ui-sans-serif, system-ui, sans-serif; }
[dir=rtl], [dir=RTL] { --font-sans: "Twemoji Country Flags", "Vazirmatn", "Inter", ui-sans-serif, system-ui, sans-serif; }
/* classic theme */
html:not([data-theme]) { --body-font-family: "Twemoji Country Flags", Poppins, Helvetica, sans-serif; }
html:not([data-theme])[dir=RTL], html:not([data-theme])[dir=rtl] { --body-font-family: "Twemoji Country Flags", Tajawal, Helvetica, sans-serif; }

/* /content/themes/default/css/ehna-brand.css */
/* Ehna logo: mark + name rendered as text, so the name follows the visitor's language */
/* Latin name: Montserrat (strong geometric display) — SIL Open Font License, self-hosted */
@font-face { font-family: "Ehna Display"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("/content/themes/default/fonts/montserrat-latin.woff2?v=1") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
.ehna-brand.is-latin .ehna-brand-w1, .ehna-brand.is-latin .ehna-brand-w2 { font-family: "Ehna Display", "Montserrat", system-ui, sans-serif; }
.ehna-brand.is-latin .ehna-brand-w1 { font-weight: 900; letter-spacing: .06em; }
.ehna-brand.is-latin .ehna-brand-w2 { font-weight: 800; letter-spacing: .42em; }
.ehna-brand { display: inline-flex; align-items: center; gap: .5em; line-height: 1; white-space: nowrap; font-size: 16px; color: inherit; }
.ehna-brand--sm { font-size: 15.5px; }
.ehna-brand--lg { font-size: 22px; }
.ehna-brand-icon { width: 2.5em; height: 2.5em; flex: none; object-fit: contain; }
.ehna-brand-text { display: inline-flex; flex-direction: column; align-items: center; gap: .22em; }
.ehna-brand-w1 {
  font-weight: 900; font-size: 1.6em; letter-spacing: .02em; padding-block: .06em;
  background: linear-gradient(90deg, #f7931e 0%, #ffb02e 18%, #1da1e6 46%, #1585d8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Latin "EHNA": orange E, blue HNA, like the original artwork */
.ehna-brand.is-latin .ehna-brand-w1 { background: linear-gradient(90deg, #f7931e 0 24%, #1d9fe6 24% 100%); -webkit-background-clip: text; background-clip: text; }
[dir=rtl] .ehna-brand-w1, [dir=RTL] .ehna-brand-w1 { background-image: linear-gradient(270deg, #f7931e 0%, #ffb02e 18%, #1da1e6 46%, #1585d8 100%); }
.ehna-brand-w2 { font-weight: 800; font-size: .58em; letter-spacing: .34em; margin-inline-start: .34em; color: #22313f; }
.ehna-brand.is-joined .ehna-brand-w2 { letter-spacing: 0; margin-inline-start: 0; font-size: .7em; }
/* dark backgrounds */
html[data-theme$="-dark"] .ehna-brand-w2, body.night-mode .ehna-brand-w2, .ehna-brand--light .ehna-brand-w2 { color: #eef2f7; }
/* 420: the header logo column is 44% wide on phones; at 390px the text was clipped to "EH ON" (live/create, voice rooms) */
@media (max-width: 420px) { .ehna-brand-text[data-hide-xs] { display: none; } }
.ehna-brand .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ehna-brand--lg { margin-bottom: 1.25rem; }

/* ---------- Latin name: engraved (carved into the surface) ----------
   - the letters keep their orange/blue fill, darkened at the top edge = the inner wall of the cut
   - a copy behind them (::after, from data-text) draws a dark lip above and a light bevel below */
.ehna-brand.is-latin .ehna-brand-text { isolation: isolate; }
.ehna-brand.is-latin .ehna-brand-w1, .ehna-brand.is-latin .ehna-brand-w2 { position: relative; }
.ehna-brand.is-latin .ehna-brand-w1 {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .14) 32%, rgba(0, 0, 0, 0) 55%, rgba(255, 255, 255, .14) 100%),
    linear-gradient(90deg, #f7931e 0 24%, #1d9fe6 24% 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ehna-brand.is-latin .ehna-brand-w1::after, .ehna-brand.is-latin .ehna-brand-w2::after {
  content: attr(data-text); position: absolute; inset: 0; z-index: -1; pointer-events: none;
  padding: inherit; letter-spacing: inherit; font: inherit; color: transparent;
  -webkit-background-clip: border-box; background: none;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, 1), 0 2px 1px rgba(255, 255, 255, .55), 0 0 1px rgba(0, 0, 0, .25);
}
.ehna-brand.is-latin .ehna-brand-w2 {
  color: #2b3a48;
  background: linear-gradient(180deg, #16212b 0%, #33475a 60%, #4a6075 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* dark surfaces: the lip is a deep shadow, the bevel a faint light edge */
html[data-theme$="-dark"] .ehna-brand.is-latin .ehna-brand-w1::after, html[data-theme$="-dark"] .ehna-brand.is-latin .ehna-brand-w2::after,
body.night-mode .ehna-brand.is-latin .ehna-brand-w1::after, body.night-mode .ehna-brand.is-latin .ehna-brand-w2::after,
.ehna-brand--light.is-latin .ehna-brand-w1::after, .ehna-brand--light.is-latin .ehna-brand-w2::after {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .85), 0 1px 0 rgba(255, 255, 255, .22), 0 2px 2px rgba(0, 0, 0, .35);
}
html[data-theme$="-dark"] .ehna-brand.is-latin .ehna-brand-w2, body.night-mode .ehna-brand.is-latin .ehna-brand-w2, .ehna-brand--light.is-latin .ehna-brand-w2 {
  background: linear-gradient(180deg, #9fb0c0 0%, #e6edf4 55%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text;
}

/* /content/themes/giftun/css/ehna-perf.css */
/* Ehna performance: let the browser skip style / layout / paint for blocks that are off screen
   (content-visibility: auto). Only on blocks whose popups are positioned outside them or that have none. */
@supports (content-visibility: auto) {
  /* right column cards (desktop) and the promoted strips under the feed on phones */
  aside.xl\:block > *, .xl\:hidden > [data-carousel] { content-visibility: auto; contain-intrinsic-size: auto 300px; }
}
/* phones: frosted-glass blur on large areas is expensive while scrolling, use a solid tint instead */
@media (max-width: 767px) {
  .ehna-ad-pop, .ehna-wl { backdrop-filter: none !important; }
}
/* honour reduced motion (also saves battery) */
@media (prefers-reduced-motion: reduce) {
  .identity-name, .ehna-identity-badge, .user-badge-chip { animation: none !important; }
}

/* news ticker: compositor-only marquee via the Web Animations API (index.newsfeed.tpl) */
.ehna-ticker-track { will-change: transform; }
/* skeleton pulses on hidden placeholders must not keep animating */
.hidden.animate-pulse, [hidden].animate-pulse, .hidden .animate-pulse { animation: none !important; }

/* /content/themes/giftun/css/ehna-ui.css */
/* =====================================================================
   Ehna UI — the shared design layer (City Guide / Tourism look) for the whole site
   - tokens:      --ui-radius, --ui-radius-card, --ui-line, --ui-soft, --ui-muted
   - components:  .ui-block .ui-section-head .ui-more .ui-count .ui-chips/.ui-chip .ui-quick .ui-card
                  .ui-hero .ui-list/.ui-item .ui-tabs/.ui-tab .ui-empty .ui-btn .ui-pill
   - restyles:    Giftun markup (posts, cards, widgets, page headers, profile covers) through selectors,
                  so the precompiled Tailwind classes stay untouched.
   Loaded on every Giftun page (not admin) and on the default-theme screens that wear the Giftun shell
   (live, voice room). Follows var(--color-primary) (the member's theme colour), light & dark, RTL.
   No infinite animations, no backdrop-filter on large areas.
   ===================================================================== */

/* ---------- tokens (re-declared on body so the default theme's body.night-mode values resolve) ---------- */
:root, body {
  --ui-radius: 1.5rem;
  --ui-radius-card: 1.25rem;
  --ui-radius-tile: 1.1rem;
  --ui-line: color-mix(in oklab, var(--color-base-content) 9%, transparent);
  --ui-line-strong: color-mix(in oklab, var(--color-base-content) 16%, transparent);
  --ui-soft: color-mix(in oklab, var(--color-base-content) 5%, var(--color-base-100));
  --ui-muted: color-mix(in oklab, var(--color-base-content) 62%, transparent);
  --ui-lift: 0 14px 30px -18px rgba(0, 0, 0, .45);
}
/* the default theme (live / voice room screens) has no Giftun colour tokens: map them */
html:not([data-theme]) {
  --color-base-100: var(--ehna-bg, #fff);
  --color-base-200: #f0f2f5;
  --color-base-content: var(--ehna-fg, #1c1e21);
  --color-primary: var(--ehna-orange, #f97316);
  --color-primary-content: var(--ehna-on-accent, #fff);
}
html:not([data-theme]) body.night-mode { --color-base-100: #242526; --color-base-200: #18191a; --color-base-content: #e4e6eb; }
/* Giftun: rounder boxes everywhere (cards, dropdowns, modals use --radius-box) */
html[data-theme^="giftun"] { --radius-box: 1.25rem; }

/* ---------- components ---------- */
.ui-block { background: var(--color-base-100); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); padding: 1rem; color: var(--color-base-content); min-width: 0; }
.ui-block.is-flush { padding: 0; overflow: hidden; }
.ui-section-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; min-width: 0; }
.ui-section-head h2, .ui-section-head h3, .ui-section-title { font-family: inherit; color: inherit; font-size: 1.05rem; font-weight: 800; display: flex; align-items: center; gap: .5rem; min-width: 0; margin: 0; line-height: 1.3; }
.ui-section-head h2 > i, .ui-section-head h3 > i, .ui-section-title > i { color: var(--color-primary); }
.ui-section-head a:not(.ui-more) { color: inherit !important; }
.ui-more { font-size: .82rem; font-weight: 700; color: var(--color-primary) !important; white-space: nowrap; }
.ui-count { font-size: .75rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; background: var(--ui-soft); }
.ui-muted { color: var(--ui-muted); }
.ui-empty { text-align: center; font-size: .875rem; padding: 1.5rem; border: 1px dashed var(--ui-line-strong); border-radius: 1rem; color: var(--ui-muted); }
.ui-empty > i { display: block; font-size: 1.8rem; margin-bottom: .5rem; color: var(--color-primary); }

.ui-chips { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .15rem; }
.ui-chips::-webkit-scrollbar { display: none; }
.ui-chips.is-wrap { flex-wrap: wrap; overflow: visible; }
.ui-chip { --tone: var(--color-primary); flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 999px; font-size: .8rem; font-weight: 700; line-height: 1.2; background: var(--ui-soft); color: var(--color-base-content) !important; border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s; white-space: nowrap; }
.ui-chip i { color: var(--tone); }
.ui-chip:hover { border-color: color-mix(in oklab, var(--tone) 40%, transparent); }
.ui-chip.is-active, .ui-chip[aria-pressed="true"], input:checked + .ui-chip { background: color-mix(in oklab, var(--tone) 16%, var(--color-base-100)); border-color: color-mix(in oklab, var(--tone) 45%, transparent); }
.ui-chip.is-solid { background: var(--color-primary); color: var(--color-primary-content) !important; }
.ui-chip.is-solid i { color: inherit; }
.ui-chip.is-danger { --tone: var(--color-error, #ef4444); background: color-mix(in oklab, var(--tone) 14%, var(--color-base-100)); color: var(--tone) !important; }

.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.6rem; padding: .5rem 1.1rem; border-radius: .9rem; font-weight: 700; font-size: .85rem; border: 0; cursor: pointer; background: var(--color-primary); color: var(--color-primary-content) !important; transition: filter .15s, transform .1s; }
.ui-btn:hover { filter: brightness(1.06); }
.ui-btn:active { transform: scale(.97); }
.ui-btn.is-ghost { background: var(--ui-soft); color: var(--color-base-content) !important; }
.ui-btn.is-block { width: 100%; }

.ui-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 800; background: var(--ui-soft); }
.ui-pill.is-live { background: #ef4444; color: #fff; }

/* quick tiles: a tinted icon square per link (set --tone on the tile) */
.ui-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.ui-quick > a, .ui-quick > button, .ui-tile { --tone: var(--color-primary); display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .7rem .3rem; border-radius: var(--ui-radius-tile); background: var(--color-base-100); border: 1px solid var(--ui-line); font-size: .72rem; font-weight: 700; text-align: center; color: var(--color-base-content) !important; transition: transform .15s, border-color .15s; min-width: 0; }
.ui-quick > a:hover, .ui-quick > button:hover, .ui-tile:hover { border-color: color-mix(in oklab, var(--tone) 40%, transparent); }
.ui-quick > a:active, .ui-quick > button:active, .ui-tile:active { transform: scale(.96); }
.ui-tile-icon, .ui-quick > a > span:first-child, .ui-quick > button > span:first-child { --tone: inherit; width: 2.4rem; height: 2.4rem; border-radius: .8rem; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: var(--tone); background: color-mix(in oklab, var(--tone) 14%, var(--color-base-100)); }

/* cards */
.ui-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.ui-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--ui-radius-card); background: var(--color-base-100); border: 1px solid var(--ui-line); color: var(--color-base-content) !important; transition: transform .2s, box-shadow .2s; min-width: 0; }
.ui-card:hover { transform: translateY(-3px); box-shadow: var(--ui-lift); }
.ui-card-media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--ui-soft) center / cover no-repeat; overflow: hidden; }
.ui-card-media > img { width: 100%; height: 100%; object-fit: cover; }
.ui-card-body { padding: .65rem .75rem .75rem; display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.ui-card-title { font-size: .95rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-card-meta { display: flex; flex-wrap: wrap; gap: .25rem .7rem; font-size: .72rem; color: var(--ui-muted); }
.ui-card-meta i { margin-inline-end: .25rem; color: var(--color-primary); }

/* hero: photo (style="background-image") + dark gradient, or the soft brand gradient (.is-soft) */
.ui-hero { position: relative; overflow: hidden; border-radius: var(--ui-radius); min-height: 12rem; display: flex; align-items: flex-end; color: #fff; background: linear-gradient(135deg, color-mix(in oklab, var(--color-primary) 70%, #0e7490), #0891b2 55%, color-mix(in oklab, var(--color-primary) 55%, #f59e0b)) center / cover no-repeat; }
.ui-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .05) 35%, rgba(0, 0, 0, .7) 100%); pointer-events: none; }
.ui-hero-inner { position: relative; width: 100%; padding: 2.5rem 1.1rem 1.3rem; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .9rem; }
.ui-hero-kicker { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; opacity: .9; }
.ui-hero-title { font-size: 1.7rem; font-weight: 900; line-height: 1.1; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); margin: .15rem 0 0; }
.ui-hero-text { margin-top: .35rem; font-size: .9rem; opacity: .9; max-width: 40rem; }
.ui-hero-facts { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .75rem; }
.ui-fact { display: flex; flex-direction: column; padding: .4rem .7rem; border-radius: .9rem; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22); line-height: 1.15; }
.ui-fact b { font-size: .95rem; font-weight: 800; white-space: nowrap; }
.ui-fact small { font-size: .66rem; opacity: .85; white-space: nowrap; }
.ui-hero-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.ui-hero .ui-chip, .ui-hero-actions .ui-btn.is-ghost { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .24); color: #fff !important; }
.ui-hero .ui-chip i { color: inherit; }
.ui-hero-cta { display: inline-flex; align-items: center; gap: .5rem; height: 2.5rem; padding-inline: 1rem; border-radius: 999px; font-weight: 800; font-size: .85rem; background: #fff; color: #0f172a !important; border: 0; cursor: pointer; box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .6); }
.ui-hero-cta i, .ui-hero-cta > span[class*="icon-"] { color: var(--color-primary); }
.ui-hero.is-soft { color: var(--color-base-content); min-height: 0; align-items: center; background: linear-gradient(135deg, color-mix(in oklab, #0891b2 22%, var(--color-base-100)), var(--color-base-100) 55%, color-mix(in oklab, var(--color-primary) 22%, var(--color-base-100))); }
.ui-hero.is-soft::before { display: none; }
.ui-hero.is-soft .ui-hero-inner { padding: 1.5rem 1.25rem; align-items: center; }
.ui-hero.is-soft .ui-hero-title { text-shadow: none; }
.ui-hero.is-soft .ui-hero-text { color: color-mix(in oklab, var(--color-base-content) 70%, transparent); opacity: 1; }
.ui-hero.is-soft .ui-hero-kicker { color: var(--color-primary); }

/* lists */
.ui-list { display: flex; flex-direction: column; gap: .35rem; }
.ui-item { display: flex; align-items: center; gap: .75rem; padding: .55rem; border-radius: 1rem; color: var(--color-base-content) !important; transition: background .15s; min-width: 0; }
.ui-item:hover { background: var(--ui-soft); }
.ui-item > img, .ui-item-icon { width: 3rem; height: 3rem; flex-shrink: 0; border-radius: .85rem; object-fit: cover; }
.ui-item-icon { --tone: var(--color-primary); display: flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--tone) 14%, var(--color-base-100)); color: var(--tone); }
.ui-item-text { min-width: 0; display: flex; flex-direction: column; }
.ui-item-text strong { font-size: .875rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-item-text small { font-size: .75rem; color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* segmented tabs */
.ui-tabs { display: flex; gap: .35rem; padding: .25rem; border-radius: 999px; background: var(--ui-soft); overflow-x: auto; scrollbar-width: none; }
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tab { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 2.3rem; padding-inline: .85rem; border-radius: 999px; font-size: .8rem; font-weight: 700; border: 0; background: none; color: color-mix(in oklab, var(--color-base-content) 70%, transparent) !important; cursor: pointer; white-space: nowrap; }
.ui-tab.is-active, .ui-tab[aria-current="page"] { background: var(--color-base-100); color: var(--color-base-content) !important; box-shadow: 0 2px 8px -4px rgba(0, 0, 0, .35); }

@media (min-width: 640px) {
  .ui-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ui-quick { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ui-hero { min-height: 15rem; }
  .ui-hero-title { font-size: 2.3rem; }
  .ui-hero-inner { padding: 3rem 1.6rem 1.5rem; }
  .ui-hero.is-soft .ui-hero-inner { padding: 2rem 2.25rem; }
}
@media (min-width: 1024px) { .ui-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* =====================================================================
   Giftun restyles (selectors on the existing markup)
   ===================================================================== */
/* ----- post cards html[data-theme^="giftun"] feed ----- */
html[data-theme^="giftun"] article.post:not(.boosted) { border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: none; }
html[data-theme^="giftun"] article.post.boosted { border-radius: var(--ui-radius); }
html[data-theme^="giftun"] article.post .post-header { padding-top: 1rem; }
html[data-theme^="giftun"] article.post .post-avatar-picture { border-radius: 999px; }
html[data-theme^="giftun"] article.post .post-meta > :first-child a { font-weight: 800; }
html[data-theme^="giftun"] article.post .post-media { border-color: var(--ui-line); border-radius: var(--ui-radius-tile); }
html[data-theme^="giftun"] article.post .post-photos, html[data-theme^="giftun"] article.post .post-video { margin-inline: .75rem; border-radius: var(--ui-radius-tile); overflow: hidden; }
html[data-theme^="giftun"] article.post .post-photos { margin-top: .6rem; }
html[data-theme^="giftun"] article.post .post-stats { padding-inline: 1.1rem; }
/* action bar: a soft segmented strip like the city tabs */
html[data-theme^="giftun"] article.post .post-actions { margin: .1rem .75rem .75rem; padding: .25rem; border-top: 0; border-radius: 999px; background: var(--ui-soft); gap: .25rem; }
html[data-theme^="giftun"] article.post .post-actions .action-btn { height: 2.4rem; border-radius: 999px; font-weight: 700; }
html[data-theme^="giftun"] article.post .post-actions .action-btn:hover { background: var(--color-base-100); color: var(--color-base-content); }
html[data-theme^="giftun"] article.post .post-actions .action-btn > [class*="icon-"] { color: var(--color-primary); }
html[data-theme^="giftun"] article.post .post-actions .reaction-btn-icon > [class*="icon-"] { color: var(--color-primary); }
html[data-theme^="giftun"] article.post .post-comments, html[data-theme^="giftun"] article.post .post-footer { border-color: var(--ui-line); }
/* publisher, stories, filters and other feed blocks */
html[data-theme^="giftun"] .card.border.border-base-300.bg-base-100 { border-color: var(--ui-line); border-radius: var(--ui-radius); }

/* ----- listing cards (pages, groups, events, people, market, jobs, offers, courses ...) ----- */
html[data-theme^="giftun"] .group.flex.flex-col.overflow-hidden.rounded-box.border,
html[data-theme^="giftun"] .feeds-item.rounded-box.border { border-color: var(--ui-line); border-radius: var(--ui-radius-card); transition: transform .2s, box-shadow .2s; }
html[data-theme^="giftun"] .group.flex.flex-col.overflow-hidden.rounded-box.border:hover,
html[data-theme^="giftun"] .feeds-item.rounded-box.border:hover { transform: translateY(-3px); box-shadow: var(--ui-lift); }

/* ----- widgets / sidebars: one white block with a hairline (ec-block) ----- */
html[data-theme^="giftun"] .card.bg-\[\#F9F9F9\] { background: var(--color-base-100); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); corner-shape: round; }
html[data-theme^="giftun"] .card.bg-\[\#F9F9F9\] > .card-body,
html[data-theme^="giftun"] .card.bg-primary\/10 > .card-body { background: transparent; border-radius: 0; corner-shape: round; padding-top: 0; }
html[data-theme^="giftun"] .card.bg-primary\/10 { background: var(--color-base-100); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); corner-shape: round; }
html[data-theme^="giftun"] .card.bg-\[\#F9F9F9\] > div:first-child h2,
html[data-theme^="giftun"] .card.bg-primary\/10 > div:first-child h2 { font-size: 1rem; font-weight: 800; }
/* the gradient promo / merits widgets keep a hint of colour but sit on the same block */
html[data-theme^="giftun"] aside .rounded-3xl.bg-linear-to-br,
html[data-theme^="giftun"] .xl\:hidden .rounded-3xl.bg-linear-to-br { --tw-gradient-from: color-mix(in oklab, var(--color-primary) 10%, var(--color-base-100)); --tw-gradient-via: var(--color-base-100); --tw-gradient-to: var(--color-base-100); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); corner-shape: round; }
html[data-theme^="giftun"] aside .rounded-3xl.bg-linear-to-br h2,
html[data-theme^="giftun"] .xl\:hidden .rounded-3xl.bg-linear-to-br h2 { font-size: 1rem; font-weight: 800; }
html[data-theme^="giftun"] aside .rounded-3xl.bg-linear-to-br > div:first-child > [class*="icon-"],
html[data-theme^="giftun"] .xl\:hidden .rounded-3xl.bg-linear-to-br > div:first-child > [class*="icon-"] { color: var(--color-primary); }

/* ----- section heads inside pages/profiles ----- */
html[data-theme^="giftun"] .ui-sh h2, html[data-theme^="giftun"] .card-header h2, html[data-theme^="giftun"] .card-header .card-title { font-weight: 800; }
html[data-theme^="giftun"] .ui-sh h2 { font-size: 1rem; }
html[data-theme^="giftun"] .card-header { border-color: var(--ui-line); }

/* ----- page headers (directories) ----- */
html[data-theme^="giftun"] .ehna-page-hero { border: 1px solid var(--ui-line); background: linear-gradient(135deg, color-mix(in oklab, #0891b2 20%, var(--color-base-100)), var(--color-base-100) 55%, color-mix(in oklab, var(--color-primary) 22%, var(--color-base-100))); }
html[data-theme^="giftun"] .ehna-page-hero h1 { font-weight: 900; letter-spacing: -.01em; }
html[data-theme^="giftun"] .ehna-page-hero > span.bg-linear-to-t, html[data-theme^="giftun"] .ehna-page-hero > span.bg-linear-to-bl { display: none; }
html[data-theme^="giftun"] .ehna-page-hero > span.blur-2xl { opacity: .18; }

/* ----- profile / page / group / event headers: city hero on the cover ----- */
html[data-theme^="giftun"] section:has(> .profile-cover-wrapper) { border: 1px solid var(--ui-line); border-radius: var(--ui-radius); }
html[data-theme^="giftun"] .profile-cover-wrapper { border-radius: calc(var(--ui-radius) - 1px) calc(var(--ui-radius) - 1px) 0 0; }
html[data-theme^="giftun"] .profile-cover-wrapper::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .45) 100%); pointer-events: none; }
html[data-theme^="giftun"] .profile-cover-wrapper:not(:has(img))::after { background: linear-gradient(135deg, color-mix(in oklab, var(--color-primary) 30%, transparent), transparent 60%, color-mix(in oklab, #0891b2 25%, transparent)); }

/* ----- segmented tab rows already in Giftun: match the city tabs ----- */
html[data-theme^="giftun"] ul.rounded-full.bg-base-content\/5 { background: var(--ui-soft); }
html[data-theme^="giftun"] ul.rounded-full.bg-base-content\/5 a[aria-current="page"] { font-weight: 700; }

/* ----- modals html[data-theme^="giftun"] dropdowns: hairline instead of grey border ----- */
html[data-theme^="giftun"] .dropdown-menu.border-base-300 { border-color: var(--ui-line); }

/* underline tab rows (pages, groups, events, market, people, search, wallet, watch, live, voice rooms ...) become city segmented tabs */
html[data-theme^="giftun"] nav.tabs.tabs-bordered { width: fit-content; max-width: 100%; gap: .25rem !important; padding: .25rem; border: 0 !important; border-radius: 1.35rem; background: var(--ui-soft); overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
html[data-theme^="giftun"] nav.tabs.tabs-bordered::-webkit-scrollbar { display: none; }
html[data-theme^="giftun"] nav.tabs.tabs-bordered > .tab { margin: 0 !important; height: 2.5rem; padding-inline: .9rem !important; border: 0 !important; border-radius: 1.1rem; font-weight: 700; white-space: nowrap; --tab-border-color: transparent; }
html[data-theme^="giftun"] nav.tabs.tabs-bordered > .tab::after, html[data-theme^="giftun"] nav.tabs.tabs-bordered > .tab::before { display: none; }
html[data-theme^="giftun"] nav.tabs.tabs-bordered > .tab.tab-active, html[data-theme^="giftun"] nav.tabs.tabs-bordered > .tab[aria-current="page"] { background: var(--color-base-100); color: var(--color-base-content) !important; box-shadow: 0 2px 8px -4px rgba(0, 0, 0, .35); }
html[data-theme^="giftun"] nav.tabs.tabs-bordered > .tab.tab-active > [class*="icon-"] { color: var(--color-primary); }
@media (max-width: 639.98px) {
  html[data-theme^="giftun"] nav.tabs.tabs-bordered { width: 100%; }
  html[data-theme^="giftun"] nav.tabs.tabs-bordered > .tab { height: 3.4rem; padding-inline: .4rem !important; }
}

/* phones: the top bar must fit 390px (no horizontal scroll) */
@media (max-width: 420px) {
  .js_site-topbar-chrome { gap: .1rem !important; }
  .js_site-topbar-chrome .site-topbar-icon { width: 2.15rem !important; height: 2.15rem !important; min-width: 2.15rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-card, .ui-quick > a, .ui-tile { transition: none; }
  .ui-card:hover { transform: none; }
}

/* /content/themes/giftun/css/ehna-i18n.css */
/* Ehna content translation: "Translated · See original" toggle in posts / comments and the note above translated texts */
.ehna-i18n { display: contents; }
.ehna-i18n-bar {
  display: flex; align-items: center; gap: .35rem; width: max-content; max-width: 100%;
  margin: 0 0 .35rem; padding: .15rem .55rem; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .75rem; font-weight: 600; line-height: 1.5; text-align: start;
  color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
  background: color-mix(in oklab, var(--color-primary) 8%, transparent);
  white-space: normal;
}
.ehna-i18n-bar:hover, .ehna-i18n-bar:focus-visible { color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 14%, transparent); }
.ehna-i18n-bar:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ehna-i18n-bar i { font-size: .8rem; color: var(--color-primary); }
.ehna-i18n-text { display: block; }
/* colored-background status posts: the text is centered in a box */
.post-colored .ehna-i18n-bar { margin-inline: auto; color: inherit; background: rgba(0, 0, 0, .18); }
.post-colored .ehna-i18n-bar i { color: inherit; }

.ehna-i18n-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  margin: 0 0 .5rem; font-size: .78rem; line-height: 1.5;
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
}
.ehna-i18n-note i { color: var(--color-primary); }
.ehna-i18n-note a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.ehna-i18n-note a:hover { text-decoration: underline; }

/* /content/themes/giftun/css/ehna-rep.css */
/* Ehna Reputation (profile card, trait picker, leaderboard) — theme tokens only, light & dark */
.ehna-rep-card { position: relative; overflow: hidden; border-radius: 1.75rem; padding: 1.1rem 1.15rem 1rem; margin-bottom: 1.25rem; background: linear-gradient(140deg, color-mix(in oklab, var(--lv) 16%, var(--color-base-100)), var(--color-base-100) 60%); border: 1px solid color-mix(in oklab, var(--lv) 22%, transparent); }
.ehna-rep-card-top { display: flex; align-items: center; gap: .8rem; }
.ehna-rep-badge { display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; flex: none; border-radius: 1.1rem; font-size: 1.8rem; background: color-mix(in oklab, var(--lv) 18%, var(--color-base-100)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--lv) 35%, transparent); }
.ehna-rep-card-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ehna-rep-card-kicker { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.ehna-rep-card-level { font-size: 1.2rem; font-weight: 800; color: var(--lv); line-height: 1.2; }
.ehna-rep-card-rank { font-size: .8rem; color: color-mix(in oklab, var(--color-base-content) 65%, transparent); }
.ehna-rep-card-rank b { color: var(--color-base-content); }
.is-up { color: var(--color-success); font-weight: 700; }
.ehna-rep-ring { --p: 100; width: 3.1rem; height: 3.1rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--color-success) calc(var(--p) * 1%), color-mix(in oklab, var(--color-error) 70%, transparent) 0); }
.ehna-rep-ring span { width: 2.45rem; height: 2.45rem; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 800; background: var(--color-base-100); }
.ehna-rep-bar { height: .5rem; margin-top: .9rem; border-radius: 99px; background: color-mix(in oklab, var(--color-base-content) 9%, transparent); overflow: hidden; }
.ehna-rep-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lv), var(--color-primary)); transition: width .5s ease; }
.ehna-rep-next { margin-top: .4rem; font-size: .75rem; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }
.ehna-rep-known { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .75rem; font-size: .75rem; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }
.ehna-rep-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .55rem; border-radius: 99px; font-size: .75rem; font-weight: 600; color: var(--color-base-content); background: color-mix(in oklab, var(--tc) 14%, var(--color-base-100)); border: 1px solid color-mix(in oklab, var(--tc) 30%, transparent); }
.ehna-rep-chip b { color: var(--tc); }
.ehna-rep-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.ehna-rep-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .9rem; border-radius: .85rem; font-size: .82rem; font-weight: 700; background: color-mix(in oklab, var(--color-base-content) 6%, var(--color-base-100)); border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent); color: var(--color-base-content) !important; cursor: pointer; }
.ehna-rep-btn.is-primary { background: var(--color-primary); border-color: transparent; color: var(--color-primary-content) !important; }
.ehna-rep-btn b { padding: 0 .4rem; border-radius: 99px; background: var(--color-error); color: #fff; font-size: .7rem; }

/* picker */
.ehna-rep-who { display: flex; align-items: center; gap: .75rem; padding: .75rem; border-radius: 1.1rem; background: color-mix(in oklab, var(--color-base-content) 4%, var(--color-base-100)); }
.ehna-rep-who img { width: 2.8rem; height: 2.8rem; border-radius: 50%; object-fit: cover; }
.ehna-rep-who-main { display: flex; flex-direction: column; gap: .2rem; flex: 1; min-width: 0; }
.ehna-rep-level { align-self: flex-start; padding: .1rem .5rem; border-radius: 99px; font-size: .72rem; font-weight: 700; color: var(--lv); background: color-mix(in oklab, var(--lv) 14%, transparent); }
.ehna-rep-who-score { display: flex; flex-direction: column; align-items: center; }
.ehna-rep-who-score b { font-size: 1.35rem; font-weight: 800; line-height: 1; }
.ehna-rep-who-score small { font-size: .7rem; opacity: .6; }
.ehna-rep-quota { margin: .6rem 0 .2rem; font-size: .78rem; color: color-mix(in oklab, var(--color-base-content) 65%, transparent); }
.ehna-rep-sec { display: flex; align-items: center; gap: .4rem; margin: .9rem 0 .5rem; font-size: .85rem; font-weight: 800; }
.ehna-rep-sec small { font-weight: 500; font-size: .72rem; opacity: .6; }
.ehna-rep-sec.is-pos { color: var(--color-success); }
.ehna-rep-sec.is-neg { color: var(--color-error); }
.ehna-rep-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; }
@media (max-width: 520px) { .ehna-rep-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ehna-rep-trait { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .6rem .3rem .45rem; border-radius: 1rem; background: color-mix(in oklab, var(--tc) 9%, var(--color-base-100)); border: 1px solid color-mix(in oklab, var(--tc) 25%, transparent); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.ehna-rep-trait:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 16px -8px var(--tc); }
.ehna-rep-trait:disabled { opacity: .38; cursor: not-allowed; }
.ehna-rep-trait.is-busy { opacity: .6; pointer-events: none; }
.ehna-rep-trait.is-done { outline: 2px solid var(--tc); }
.ehna-rep-emoji { font-size: 1.6rem; line-height: 1; }
.ehna-rep-label { font-size: .72rem; font-weight: 700; text-align: center; line-height: 1.15; color: var(--color-base-content); }
.ehna-rep-pts { font-size: .65rem; font-weight: 800; color: var(--tc); }
.ehna-rep-fine { margin-top: .9rem; font-size: .72rem; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }

/* negatives / appeals */
.ehna-rep-negrow { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent); }
.ehna-rep-negmain { display: flex; flex-direction: column; flex: 1; min-width: 6rem; }
.ehna-rep-negmain small { opacity: .6; font-size: .72rem; }
.ehna-rep-dispute { display: flex; gap: .4rem; flex: 1 1 14rem; }
.ehna-rep-dispute input { flex: 1; min-width: 0; padding: .45rem .7rem; border-radius: .7rem; font-size: .8rem; background: var(--color-base-100); border: 1px solid color-mix(in oklab, var(--color-base-content) 15%, transparent); color: inherit; }
.ehna-rep-tag { padding: .2rem .55rem; border-radius: 99px; font-size: .7rem; font-weight: 700; background: color-mix(in oklab, var(--color-warning) 20%, transparent); }

/* leaderboard */
.ehna-rep-board { border-radius: 1.75rem; padding: 1.1rem; margin-bottom: 1.5rem; background: var(--color-base-100); }
.ehna-rep-board-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .8rem; }
.ehna-rep-board-head h2 { font-size: 1.1rem; font-weight: 800; display: flex; align-items: center; gap: .45rem; }
.ehna-rep-tabs { display: inline-flex; padding: .2rem; border-radius: .9rem; background: color-mix(in oklab, var(--color-base-content) 6%, var(--color-base-100)); }
.ehna-rep-tabs a { padding: .35rem .8rem; border-radius: .7rem; font-size: .8rem; font-weight: 700; color: color-mix(in oklab, var(--color-base-content) 65%, transparent) !important; }
.ehna-rep-tabs a.is-active { background: var(--color-base-100); color: var(--color-base-content) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.ehna-rep-filters { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.ehna-rep-filters a { flex: none; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .65rem; border-radius: 99px; font-size: .75rem; font-weight: 600; border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent); color: var(--color-base-content) !important; }
.ehna-rep-filters a.is-active { background: var(--color-primary); border-color: transparent; color: var(--color-primary-content) !important; }
.ehna-rep-row { display: flex; align-items: center; gap: .7rem; padding: .55rem .4rem; border-radius: 1rem; }
.ehna-rep-row:hover { background: color-mix(in oklab, var(--color-base-content) 4%, transparent); }
.ehna-rep-pos { width: 1.8rem; text-align: center; font-weight: 800; font-size: .9rem; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.ehna-rep-row:nth-child(1) .ehna-rep-pos, .ehna-rep-row:nth-child(2) .ehna-rep-pos, .ehna-rep-row:nth-child(3) .ehna-rep-pos { font-size: 1.25rem; }
.ehna-rep-row img { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; }
.ehna-rep-row-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ehna-rep-row-main strong { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-base-content); }
.ehna-rep-row-main small { font-size: .72rem; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.ehna-rep-row-pts { font-weight: 800; font-size: .95rem; color: var(--color-primary); white-space: nowrap; }
.ehna-rep-levels { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.ehna-rep-levels span { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .55rem; border-radius: 99px; font-size: .72rem; font-weight: 700; color: var(--lv); background: color-mix(in oklab, var(--lv) 12%, transparent); }

/* podium (top 3) */
.ehna-rep-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: .6rem; margin: 1rem 0 .4rem; }
.ehna-rep-pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; padding: 1rem .5rem .9rem; border-radius: 1.4rem; text-align: center; color: var(--color-base-content) !important; background: linear-gradient(180deg, color-mix(in oklab, var(--pod) 22%, var(--color-base-100)), var(--color-base-100)); border: 1px solid color-mix(in oklab, var(--pod) 35%, transparent); transition: transform .15s ease; }
.ehna-rep-pod:hover { transform: translateY(-3px); }
.ehna-rep-pod.is-p1 { --pod: #f5b301; padding-top: 1.6rem; padding-bottom: 1.3rem; box-shadow: 0 18px 40px -22px #f5b301; }
.ehna-rep-pod.is-p2 { --pod: #94a3b8; }
.ehna-rep-pod.is-p3 { --pod: #c2733c; }
.ehna-rep-crown { position: absolute; top: -1.05rem; font-size: 1.6rem; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .2)); }
.ehna-rep-pod-av { position: relative; display: inline-flex; }
.ehna-rep-pod-av img { width: 4.2rem; height: 4.2rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--color-base-100), 0 0 0 6px var(--pod); }
.ehna-rep-pod.is-p1 .ehna-rep-pod-av img { width: 5.4rem; height: 5.4rem; }
.ehna-rep-pod-av b { position: absolute; bottom: -.35rem; left: 50%; transform: translateX(-50%); min-width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 999px; font-size: .8rem; color: #fff; background: var(--pod); box-shadow: 0 0 0 2px var(--color-base-100); }
.ehna-rep-pod strong { margin-top: .45rem; max-width: 100%; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ehna-rep-pod small { font-size: .72rem; font-weight: 700; }
.ehna-rep-pod-pts { margin-top: .15rem; font-size: 1.15rem; font-weight: 900; color: var(--color-base-content); }
.ehna-rep-pod-pts i { font-style: normal; font-size: .7rem; font-weight: 600; opacity: .55; }
@media (max-width: 480px) { .ehna-rep-pod-av img { width: 3.3rem; height: 3.3rem; } .ehna-rep-pod.is-p1 .ehna-rep-pod-av img { width: 4.2rem; height: 4.2rem; } .ehna-rep-pod-pts { font-size: .95rem; } }
/* the rest: compact rows with a bar against the leader */
.ehna-rep-list { display: flex; flex-direction: column; gap: .15rem; margin-top: .5rem; }
.ehna-rep-row { display: grid; grid-template-columns: 2rem 2.5rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; }
.ehna-rep-row .ehna-rep-pos { width: auto; font-size: .9rem !important; }
.ehna-rep-row small em { font-style: normal; opacity: .75; }
.ehna-rep-meter { display: block; height: 4px; margin-top: .3rem; border-radius: 99px; background: color-mix(in oklab, var(--color-base-content) 8%, transparent); overflow: hidden; }
.ehna-rep-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), color-mix(in oklab, var(--color-primary) 55%, #fff)); }
.ehna-rep-row-pts { padding: .25rem .6rem; border-radius: 999px; font-size: .82rem; background: color-mix(in oklab, var(--color-primary) 12%, transparent); }
.ehna-rep-row.is-more { display: none; }
.ehna-rep-board.show-all .ehna-rep-row.is-more { display: grid; }
.ehna-rep-more { width: 100%; margin-top: .6rem; }

/* /content/themes/giftun/css/ehna-fx.css */
/* Ehna multi-currency: switchers (header language menu, footer, settings) and the dual price (class-ehna-fx.php) */
.ehna-fx-head { margin-top: 0; }
.ehna-lang-menu .ehna-fx-note { margin: .35rem .3rem .5rem; padding-bottom: .6rem; border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent); }
.ehna-fx-head i { width: 1rem; text-align: center; }
.ehna-fx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.ehna-fx-item { display: flex; min-width: 0; align-items: center; gap: .45rem; padding: .5rem .6rem; border-radius: .75rem; font-size: .84rem; color: var(--color-base-content) !important; text-decoration: none; }
.ehna-fx-item:hover, .ehna-fx-item:focus-visible { background: color-mix(in oklab, var(--color-base-content) 6%, transparent); }
.ehna-fx-item.is-active { background: color-mix(in oklab, var(--ehna-orange, var(--color-primary)) 12%, transparent); color: var(--ehna-orange, var(--color-primary)) !important; font-weight: 600; }
.ehna-fx-item.is-active .ehna-fx-name { color: inherit; }
.ehna-fx-flag { font-size: 1.05rem; line-height: 1; flex-shrink: 0; }
.ehna-fx-code { font-weight: 700; font-size: .78rem; letter-spacing: .02em; flex-shrink: 0; unicode-bidi: isolate; direction: ltr; }
.ehna-fx-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: color-mix(in oklab, currentColor 70%, transparent); font-size: .76rem; }
.ehna-fx-note { white-space: normal; margin: .45rem .3rem .2rem; font-size: .72rem; line-height: 1.45; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.ehna-fx-warn { margin: .6rem 0 0; padding: .55rem .75rem; border-radius: .9rem; font-size: .8rem; background: color-mix(in oklab, var(--color-warning, #f59e0b) 14%, transparent); color: var(--color-base-content); }

/* footer */
.ehna-fx-footer-btn { display: inline-flex; min-height: 1.75rem; align-items: center; gap: .35rem; padding: 0 .55rem; border: 0; border-radius: var(--radius-field, .5rem); background: var(--color-base-200); color: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; line-height: 1.2; }
.ehna-fx-footer-btn:hover { background: var(--color-base-300); }
.ehna-fx-footer-btn.is-overlay { background: rgb(255 255 255 / .15); backdrop-filter: blur(4px); }
.ehna-fx-footer-btn.is-overlay:hover { background: rgb(255 255 255 / .25); }
.ehna-fx-footer-btn i { font-size: .8rem; opacity: .7; }
.ehna-fx-footer-menu { width: 15rem; max-height: 20rem; overflow-y: auto; padding: .3rem; border-radius: 1rem; border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent); background: var(--color-base-100); box-shadow: 0 8px 24px rgb(0 0 0 / .1); inset-inline-start: 0; top: 0; z-index: 60; }

/* settings card */
.ehna-fx-card { padding: 1.25rem; border-radius: 1.25rem; border: 1px solid color-mix(in oklab, var(--color-base-content) 9%, transparent); background: var(--color-base-100); box-shadow: none; }
.ehna-fx-card-head { display: flex; align-items: flex-start; gap: .85rem; margin-bottom: 1rem; }
.ehna-fx-icon { --tone: var(--color-primary); display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; flex-shrink: 0; border-radius: .9rem; background: color-mix(in oklab, var(--tone) 14%, transparent); color: var(--tone); font-size: 1.05rem; }
.ehna-fx-title { margin: 0; font-size: 1rem; font-weight: 700; }
.ehna-fx-sub { margin: .15rem 0 0; font-size: .82rem; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }
.ehna-fx-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; }
.ehna-fx-chip { display: flex; min-width: 0; align-items: center; gap: .45rem; padding: .6rem .75rem; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent); color: var(--color-base-content) !important; font-size: .84rem; text-decoration: none; }
.ehna-fx-chip:hover { border-color: color-mix(in oklab, var(--color-primary) 45%, transparent); }
.ehna-fx-chip.is-active { border-color: var(--ehna-orange, var(--color-primary)); background: color-mix(in oklab, var(--ehna-orange, var(--color-primary)) 10%, transparent); color: var(--ehna-orange, var(--color-primary)) !important; font-weight: 600; }
.ehna-fx-card .ehna-fx-note { margin: .9rem 0 0; font-size: .78rem; }

/* dual price at checkout: EGP first, the member's currency as "≈" under it */
.ehna-fx-dual { display: inline-flex; flex-direction: column; line-height: 1.2; }
.ehna-fx-alt { font-size: .78em; font-weight: 500; color: color-mix(in oklab, currentColor 62%, transparent); }

@media (max-width: 420px) {
  .ehna-fx-grid { grid-template-columns: 1fr 1fr; }
  .ehna-fx-chips { grid-template-columns: 1fr 1fr; }
}

/* /content/themes/giftun/css/ehna-showcase.css */
/* =====================================================================
   Ehna showcase (Giftun): public promotional content. Mobile first, light/dark, RTL, follows the theme colour.
   ===================================================================== */
.sc { --sc-radius: 1.5rem; --sc-line: color-mix(in oklab, var(--color-base-content) 9%, transparent); --sc-soft: color-mix(in oklab, var(--color-base-content) 5%, var(--color-base-100)); max-width: 72rem; margin-inline: auto; padding-inline: 1rem; padding-top: 1rem; }
.sc a { text-decoration: none; }

.sc-hero { border-radius: var(--sc-radius); padding: 1.75rem 1.25rem; margin-bottom: 1rem; background: linear-gradient(135deg, color-mix(in oklab, #0891b2 22%, var(--color-base-100)), var(--color-base-100) 55%, color-mix(in oklab, var(--color-primary) 22%, var(--color-base-100))); border: 1px solid var(--sc-line); }
.sc-kicker { display: inline-flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--color-primary); }
.sc-hero h1 { font-size: 1.7rem; font-weight: 900; line-height: 1.2; margin-top: .35rem; }
.sc-hero p { margin-top: .5rem; max-width: 42rem; color: color-mix(in oklab, var(--color-base-content) 72%, transparent); }
.sc-hero-actions, .sc-cta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

.sc-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.6rem; padding-inline: 1.1rem; border-radius: 999px; font-weight: 700; font-size: .85rem; background: var(--sc-soft); color: var(--color-base-content) !important; border: 1px solid var(--sc-line); }
.sc-btn.is-primary { background: var(--color-primary); color: var(--color-primary-content) !important; border-color: transparent; }

.sc-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.sc-feature { --tone: var(--color-primary); display: flex; align-items: center; gap: .65rem; padding: .65rem .75rem; border-radius: 1.1rem; background: var(--color-base-100); border: 1px solid var(--sc-line); color: var(--color-base-content) !important; font-size: .82rem; font-weight: 700; line-height: 1.25; transition: transform .15s, box-shadow .15s; }
.sc-feature:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -18px rgba(0, 0, 0, .45); }
.sc-feature-icon { flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: .8rem; display: flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--tone) 15%, var(--color-base-100)); color: var(--tone); }

.sc-tabs { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .15rem; margin-bottom: 1rem; }
.sc-tabs::-webkit-scrollbar { display: none; }
.sc-tab { --tone: var(--color-primary); flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--sc-soft); color: var(--color-base-content) !important; border: 1px solid transparent; }
.sc-tab i { color: var(--tone); }
.sc-tab small { font-weight: 800; opacity: .55; }
.sc-tab.is-active { background: color-mix(in oklab, var(--tone) 16%, var(--color-base-100)); border-color: color-mix(in oklab, var(--tone) 45%, transparent); }

.sc-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: .85rem; }
.sc-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 1.25rem; background: var(--color-base-100); border: 1px solid var(--sc-line); color: var(--color-base-content) !important; transition: transform .2s, box-shadow .2s; }
.sc-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .45); }
.sc-card-media { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #0891b2, #38bdf8 55%, #f59e0b); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .9); font-size: 2rem; overflow: hidden; }
.sc-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-chip { --tone: var(--color-primary); position: absolute; inset-block-start: .6rem; inset-inline-start: .6rem; display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px; font-size: .7rem; font-weight: 800; background: color-mix(in oklab, var(--tone) 85%, #000); color: #fff; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .5); }
.sc-chip.is-solid { position: static; margin-bottom: .6rem; }
.sc-card-body { display: flex; flex-direction: column; gap: .3rem; padding: .8rem .9rem .95rem; min-width: 0; }
.sc-card-body strong { font-size: 1rem; font-weight: 800; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-card-body span { font-size: .82rem; line-height: 1.5; color: color-mix(in oklab, var(--color-base-content) 68%, transparent); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sc-more { display: flex; justify-content: center; margin-top: 1.25rem; }
.sc-empty { text-align: center; font-size: .9rem; padding: 2rem; border: 1px dashed var(--sc-line); border-radius: 1rem; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }

.sc-item { background: var(--color-base-100); border: 1px solid var(--sc-line); border-radius: var(--sc-radius); overflow: hidden; }
.sc-back { display: inline-flex; align-items: center; gap: .4rem; margin: .9rem 1rem 0; font-size: .8rem; font-weight: 700; color: var(--color-primary) !important; }
[dir="rtl"] .sc-back i { transform: scaleX(-1); }
.sc-item-hero { position: relative; margin: .75rem 0 0; aspect-ratio: 16 / 9; background: var(--sc-soft); }
.sc-item-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-item-hero figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: 1.2rem .9rem .45rem; font-size: .62rem; line-height: 1.3; color: rgba(255, 255, 255, .85); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .65)); }
.sc-item-main { padding: 1.1rem 1rem 1.4rem; }
.sc-item-main h1 { font-size: 1.5rem; font-weight: 900; line-height: 1.3; }
.sc-by { display: flex; align-items: center; gap: .45rem; margin-top: .4rem; font-size: .82rem; color: color-mix(in oklab, var(--color-base-content) 62%, transparent); }
.sc-body { margin-top: .9rem; font-size: .98rem; line-height: 1.85; }
.sc-note { display: flex; align-items: flex-start; gap: .45rem; margin-top: 1.1rem; font-size: .74rem; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.sc-related { margin-top: 1.5rem; }
.sc-related h2 { font-size: 1.05rem; font-weight: 800; margin-bottom: .75rem; }

@media (min-width: 640px) {
  .sc-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-hero h1 { font-size: 2.1rem; }
}
@media (min-width: 1024px) {
  .sc-features { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sc-item { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .sc-back { grid-column: 1 / -1; }
  .sc-item-hero { margin: .75rem 0 0 1rem; border-radius: 1.1rem; overflow: hidden; aspect-ratio: 4 / 3; }
  [dir="rtl"] .sc-item-hero { margin: .75rem 1rem 0 0; }
  .sc-item-main { padding: 1.25rem 1.5rem 1.6rem; }
}

/* /content/themes/giftun/css/ehna-legal.css */
/* =====================================================================
   Ehna legal pages + pay notices (Giftun) — mobile first, RTL, light/dark, follows the theme colour
   ===================================================================== */
:root { --el-line: color-mix(in oklab, var(--color-base-content, #1c1917) 9%, transparent); --el-soft: color-mix(in oklab, var(--color-base-content, #1c1917) 5%, var(--color-base-100, #fff)); --el-muted: color-mix(in oklab, var(--color-base-content, #1c1917) 64%, transparent); }

/* ---------- legal document ---------- */
.ehna-legal-doc > :first-child { margin-top: 0 !important; }
.ehna-legal-doc > :last-child { margin-bottom: 0 !important; }
.ehna-legal-doc .ehna-legal-meta { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; padding: .3rem .8rem; border-radius: 999px; background: var(--el-soft); color: var(--el-muted); margin: 0 0 1rem; }
.ehna-legal-doc .ehna-legal-summary { background: color-mix(in oklab, var(--color-primary) 7%, var(--color-base-100)); border: 1px solid color-mix(in oklab, var(--color-primary) 22%, transparent); border-radius: 1.25rem; padding: 1rem 1.15rem; margin: 1rem 0 1.5rem; }
.ehna-legal-doc .ehna-legal-summary > :first-child { margin-top: 0; }
.ehna-legal-doc .ehna-legal-summary > :last-child { margin-bottom: 0; }
.ehna-legal-doc .ehna-legal-summary strong:first-child { display: block; margin-bottom: .35rem; }
.ehna-legal-doc table { display: block; overflow-x: auto; border-collapse: collapse; font-size: .92rem; }
.ehna-legal-doc table td, .ehna-legal-doc table th { vertical-align: top; min-width: 8rem; }
.ehna-legal-doc[dir="rtl"] { text-align: start; }
.ehna-legal-doc h2 { scroll-margin-top: 5rem; }
.ehna-legal-doc a[dir="ltr"] { unicode-bidi: isolate; }

/* business identity card */
.ehna-legal-card { display: grid; gap: .1rem; margin: 1rem 0; padding: .35rem 1rem; border: 1px solid var(--el-line); border-radius: 1.25rem; background: var(--color-base-100); }
.ehna-legal-card-row { display: grid; grid-template-columns: 1fr; gap: .1rem; padding: .6rem 0; border-bottom: 1px solid var(--el-line); }
.ehna-legal-card-row:last-child { border-bottom: 0; }
.ehna-legal-card dt { font-size: .75rem; font-weight: 700; color: var(--el-muted); text-transform: none; }
.ehna-legal-card dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 640px) { .ehna-legal-card-row { grid-template-columns: 13rem 1fr; gap: 1rem; align-items: baseline; } }

/* related policies */
.ehna-legal-nav { margin-top: 1.25rem; background: var(--color-base-100); border: 1px solid var(--el-line); border-radius: 1.5rem; padding: 1rem 1.15rem; }
.ehna-legal-nav-title { font-size: 1rem; font-weight: 800; display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; }
.ehna-legal-nav-title i { color: var(--color-primary); }
.ehna-legal-nav ul { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.ehna-legal-nav a { display: inline-flex; align-items: center; padding: .45rem .85rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--el-soft); color: var(--color-base-content) !important; border: 1px solid transparent; text-decoration: none !important; }
.ehna-legal-nav a:hover { border-color: color-mix(in oklab, var(--color-primary) 40%, transparent); }
.ehna-legal-nav a.is-active { background: var(--color-primary); color: var(--color-primary-content) !important; }

/* admin warning */
.ehna-legal-warning { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1rem; padding: .9rem 1.1rem; border-radius: 1.25rem; border: 1px solid color-mix(in oklab, #f59e0b 45%, transparent); background: color-mix(in oklab, #f59e0b 12%, var(--color-base-100)); color: var(--color-base-content); font-size: .875rem; }
.ehna-legal-warning > i { color: #d97706; margin-top: .2rem; }
.ehna-legal-warning p { margin: .2rem 0 .35rem; }
.ehna-legal-warning a { font-weight: 700; color: var(--color-primary) !important; }

/* ---------- pay / book notice ---------- */
.ehna-paynote { margin: .75rem 0 0; padding: .7rem .85rem; border-radius: 1rem; background: var(--el-soft); border: 1px solid var(--el-line); font-size: .78rem; line-height: 1.5; color: var(--el-muted); text-align: start; }
.ehna-paynote p { margin: 0; }
.ehna-paynote p + p { margin-top: .4rem; }
.ehna-paynote-main { display: flex; gap: .5rem; align-items: flex-start; color: var(--color-base-content); }
.ehna-paynote-main > i { color: var(--color-primary); margin-top: .2rem; flex-shrink: 0; }
.ehna-paynote a { color: var(--color-primary) !important; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.ehna-paynote-secure i { color: #16a34a; margin-inline-end: .25rem; }
.ehna-paynote.is-compact { padding: .55rem .7rem; font-size: .74rem; }
.ehna-paynote.is-flat { background: transparent; border: 0; padding-inline: 0; }

/* sign-up consent links */
.ehna-consent a { white-space: nowrap; }