/* ============================================================
   HiddenFlirt UI · hf-components.css
   Tutti i componenti, prefisso .hf-*. Dipende da hf-tokens.css.
   Estensione: nuove varianti = nuova classe .hf-btn--tuavariante
   che ridefinisce solo variabili locali (--_bg, --_ink, ...).
   ============================================================ */

/* ---------- Base ---------- */
.hf { font-family: var(--hf-font); color: var(--hf-ink); }
.hf *, .hf *::before, .hf *::after { box-sizing: border-box; }
.hf-serif { font-family: var(--hf-font-display); font-weight: 400; }
.hf-mono { font-family: var(--hf-font-mono); }

/* ---------- Bottoni ---------- */
.hf-btn {
  --_bg: var(--hf-primary); --_bg-h: var(--hf-primary-hover);
  --_ink: #fff; --_bd: transparent; --_sh: var(--hf-shadow-glow);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--hf-control-h); min-width: var(--hf-touch-min);
  padding: 0 22px; border-radius: var(--hf-r-md);
  background: var(--_bg); color: var(--_ink); border: 1.5px solid var(--_bd);
  font: 700 var(--hf-text-md)/1 var(--hf-font); cursor: pointer;
  box-shadow: var(--_sh); user-select: none; text-decoration: none;
  transition: background var(--hf-t-ui) var(--hf-ease), transform var(--hf-t-tap) var(--hf-ease), box-shadow var(--hf-t-ui);
}
.hf-btn:hover { background: var(--_bg-h); }
.hf-btn:active { transform: scale(.97); }
.hf-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--hf-glow); }
.hf-btn--secondary { --_bg: var(--hf-bg); --_bg-h: var(--hf-surface); --_ink: var(--hf-ink); --_bd: var(--hf-ink); --_sh: none; }
.hf-btn--outline { --_bg: var(--hf-bg); --_bg-h: var(--hf-surface); --_ink: var(--hf-ink); --_bd: var(--hf-border); --_sh: none; }
.hf-btn--ghost { --_bg: transparent; --_bg-h: var(--hf-surface); --_ink: var(--hf-muted); --_bd: transparent; --_sh: none; }
.hf-btn--danger { --_bg: var(--hf-primary-tint); --_bg-h: #FBDCDC; --_ink: var(--hf-danger); --_bd: var(--hf-primary-tint-border); --_sh: none; }
.hf-btn--dark { --_bg: var(--hf-dark); --_bg-h: #000; --_ink: #fff; --_sh: none; }
.hf-btn--sm { height: 34px; padding: 0 14px; font-size: var(--hf-text-sm); border-radius: 11px; }
.hf-btn--lg { height: 54px; padding: 0 28px; font-size: 15px; border-radius: 15px; }
.hf-btn--pill { border-radius: var(--hf-r-full); }
.hf-btn--icon { width: var(--hf-control-h); padding: 0; border-radius: var(--hf-r-full); }
.hf-btn[disabled], .hf-btn--disabled { --_bg: var(--hf-canvas); --_bg-h: var(--hf-canvas); --_ink: var(--hf-disabled); --_sh: none; pointer-events: none; }
.hf-btn--loading { pointer-events: none; opacity: .8; }
.hf-btn--loading::before { content: ""; width: 14px; height: 14px; border-radius: 999px; border: 2px solid color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; animation: hf-spin .7s linear infinite; }
.hf-btn--glow { animation: hf-glow 2.8s ease-in-out infinite; }
.hf-fab { width: 54px; height: 54px; border-radius: var(--hf-r-full); padding: 0; font-size: 24px; font-weight: 300; }

/* ---------- Badge / Pill / Tag ---------- */
.hf-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--hf-r-full); font: 800 9.5px/1 var(--hf-font); letter-spacing: .08em; text-transform: uppercase; }
.hf-badge--primary { background: var(--hf-primary); color: #fff; }
.hf-badge--tint { background: var(--hf-primary-tint); border: 1px solid var(--hf-primary-tint-border); color: var(--hf-primary); }
.hf-badge--online { background: var(--hf-online-tint); border: 1px solid var(--hf-online-border); color: var(--hf-online-ink); }
.hf-badge--dark { background: var(--hf-dark); color: #fff; }
.hf-badge--outline { border: 1px solid var(--hf-border); color: var(--hf-muted); }
.hf-badge--warning { background: var(--hf-warning-tint); color: var(--hf-warning); }
.hf-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--hf-online); display: inline-block; }
.hf-dot--pulse { position: relative; }
.hf-dot--pulse::after { content: ""; position: absolute; inset: 0; border-radius: 999px; border: 1.5px solid currentColor; color: inherit; animation: hf-pulse 2.2s ease-out infinite; }
.hf-counter { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--hf-r-full); background: var(--hf-primary); color: #fff; font: 700 10px/18px var(--hf-font); text-align: center; display: inline-block; }

/* ---------- Chip / Filtri ---------- */
.hf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--hf-r-full); background: var(--hf-bg); border: 1px solid var(--hf-border); font: 600 11.5px/1 var(--hf-font); color: var(--hf-ink); cursor: pointer; transition: all var(--hf-t-ui) var(--hf-ease); }
.hf-chip:hover { border-color: var(--hf-primary); color: var(--hf-primary); }
.hf-chip[aria-pressed="true"], .hf-chip--active { background: var(--hf-primary); border-color: var(--hf-primary); color: #fff; font-weight: 700; }
.hf-chip--dark[aria-pressed="true"] { background: var(--hf-dark); border-color: var(--hf-dark); }

/* ---------- Avatar ---------- */
.hf-avatar { --_size: 44px; position: relative; width: var(--_size); height: var(--_size); border-radius: var(--hf-r-full); background: var(--hf-surface) center/cover; flex: none; }
.hf-avatar--xs { --_size: 26px; } .hf-avatar--sm { --_size: 34px; }
.hf-avatar--lg { --_size: 56px; } .hf-avatar--xl { --_size: 92px; }
.hf-avatar__status { position: absolute; bottom: 0; right: 0; width: 26%; height: 26%; min-width: 10px; min-height: 10px; border-radius: 999px; background: var(--hf-online); border: 2px solid var(--hf-bg); }
.hf-avatar--ring { outline: 2.5px solid transparent; border: 2.5px solid var(--hf-bg); background-clip: padding-box; box-shadow: 0 0 0 2.5px var(--hf-primary); }
.hf-avatar--ring-new { box-shadow: 0 0 0 2.5px var(--hf-primary); }
.hf-avatar--ring-seen { box-shadow: 0 0 0 2.5px var(--hf-border); }
.hf-avatar--blur { filter: blur(4px); }
.hf-avatar-stack { display: flex; }
.hf-avatar-stack .hf-avatar { border: 2px solid var(--hf-bg); }
.hf-avatar-stack .hf-avatar + .hf-avatar { margin-left: calc(var(--_size) * -.32); }
.hf-avatar-stack__more { display: flex; align-items: center; justify-content: center; background: var(--hf-dark); color: #fff; font: 800 10px/1 var(--hf-font); }

/* ---------- Input / Form ---------- */
.hf-field { display: flex; flex-direction: column; gap: 6px; }
.hf-label { font: 700 var(--hf-text-xs)/1 var(--hf-font); letter-spacing: .08em; text-transform: uppercase; color: var(--hf-muted); }
.hf-input, .hf-textarea, .hf-select {
  width: 100%; min-height: var(--hf-control-h); padding: 12px 15px;
  border-radius: var(--hf-r-md); border: 1.5px solid var(--hf-border);
  background: var(--hf-bg); color: var(--hf-ink);
  font: 500 var(--hf-text-md)/1.4 var(--hf-font);
  transition: border-color var(--hf-t-ui), box-shadow var(--hf-t-ui); outline: none;
}
.hf-input::placeholder, .hf-textarea::placeholder { color: var(--hf-faint); }
.hf-input:focus, .hf-textarea:focus, .hf-select:focus { border-color: var(--hf-primary); box-shadow: 0 0 0 3px var(--hf-glow); }
.hf-input--error { border-color: #E58B8B; }
.hf-input--error:focus { box-shadow: 0 0 0 3px rgba(185,28,28,.15); }
.hf-hint { font: 500 var(--hf-text-xs)/1.4 var(--hf-font); color: var(--hf-faint); }
.hf-hint--error { color: var(--hf-danger); } .hf-hint--ok { color: var(--hf-online-ink); }
.hf-search { display: flex; align-items: center; gap: 10px; padding: 0 15px; height: var(--hf-control-h); border-radius: var(--hf-r-md); background: var(--hf-surface); border: 1px solid var(--hf-border); }
.hf-search input { border: 0; background: transparent; outline: 0; flex: 1; font: 500 13px/1 var(--hf-font); color: var(--hf-ink); }
.hf-otp { display: flex; gap: 8px; }
.hf-otp input { width: 46px; height: 56px; border-radius: var(--hf-r-md); border: 1.5px solid var(--hf-border); background: var(--hf-surface); text-align: center; font: 800 22px/1 var(--hf-font); color: var(--hf-ink); outline: 0; }
.hf-otp input:focus { border-color: var(--hf-primary); background: var(--hf-bg); box-shadow: 0 0 0 3px var(--hf-glow); }
.hf-otp--error input { border-color: #E58B8B; background: var(--hf-primary-tint); color: var(--hf-danger); animation: hf-shake .3s; }
.hf-strength { display: flex; gap: 4px; align-items: center; }
.hf-strength i { flex: 1; height: 4px; border-radius: 999px; background: var(--hf-canvas); }
.hf-strength[data-level="1"] i:nth-child(-n+1), .hf-strength[data-level="2"] i:nth-child(-n+2) { background: var(--hf-warning); }
.hf-strength[data-level="3"] i:nth-child(-n+3), .hf-strength[data-level="4"] i:nth-child(-n+4) { background: var(--hf-online); }

/* Switch / Check / Radio / Slider / Stepper */
.hf-switch { position: relative; width: 44px; height: 26px; flex: none; appearance: none; border-radius: 999px; background: var(--hf-border); cursor: pointer; transition: background var(--hf-t-ui); border: 0; }
.hf-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 999px; background: #fff; box-shadow: var(--hf-shadow-card); transition: transform var(--hf-t-ui) var(--hf-ease); }
.hf-switch:checked { background: var(--hf-primary); }
.hf-switch:checked::after { transform: translateX(18px); }
.hf-check, .hf-radio { appearance: none; width: 18px; height: 18px; border: 1.5px solid var(--hf-border); background: var(--hf-bg); cursor: pointer; display: inline-grid; place-content: center; transition: all var(--hf-t-ui); }
.hf-check { border-radius: 6px; } .hf-radio { border-radius: 999px; }
.hf-check:checked, .hf-radio:checked { background: var(--hf-primary); border-color: var(--hf-primary); }
.hf-check:checked::after { content: "✓"; color: #fff; font: 700 11px/1 var(--hf-font); }
.hf-radio:checked::after { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #fff; }
.hf-slider { appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--hf-primary) var(--hf-slider-fill, 50%), var(--hf-border) 0); outline: 0; }
.hf-slider::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; border-radius: 999px; background: #fff; border: 2px solid var(--hf-primary); box-shadow: var(--hf-shadow-card); cursor: grab; }
.hf-stepper { display: inline-flex; align-items: center; border: 1px solid var(--hf-border); border-radius: var(--hf-r-md); overflow: hidden; }
.hf-stepper button { width: 40px; height: 40px; border: 0; background: var(--hf-surface); font: 700 16px/1 var(--hf-font); cursor: pointer; }
.hf-stepper output { min-width: 44px; text-align: center; font: 700 14px/1 var(--hf-font); }

/* ---------- Tabs / Segmented ---------- */
.hf-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--hf-border-soft); }
.hf-tab { position: relative; padding: 0 0 10px; border: 0; background: none; font: 500 15px/1 var(--hf-font); color: var(--hf-faint); cursor: pointer; }
.hf-tab[aria-selected="true"] { font-weight: 800; color: var(--hf-ink); }
.hf-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; border-radius: 2px; background: var(--hf-primary); }
.hf-segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--hf-surface); border: 1px solid var(--hf-border); border-radius: var(--hf-r-md); }
.hf-segmented button { padding: 9px 16px; border: 0; border-radius: 11px; background: transparent; font: 600 12px/1 var(--hf-font); color: var(--hf-muted); cursor: pointer; }
.hf-segmented button[aria-pressed="true"] { background: var(--hf-bg); color: var(--hf-ink); font-weight: 800; box-shadow: var(--hf-shadow-card); }

/* ---------- Card ---------- */
.hf-card { background: var(--hf-bg); border: 1px solid var(--hf-border); border-radius: var(--hf-r-lg); box-shadow: var(--hf-shadow-card); }
.hf-card--flat { box-shadow: none; }
.hf-card--surface { background: var(--hf-surface); border-color: var(--hf-border-soft); }
.hf-card--accent { background: var(--hf-primary-tint); border: 1.5px solid var(--hf-primary); }
.hf-card--dark { background: var(--hf-dark); border-color: transparent; color: #fff; }
.hf-card__pad { padding: var(--hf-s4); }

/* ---------- NSFW Veil ---------- */
.hf-veil { position: relative; overflow: hidden; border-radius: var(--hf-r-lg); background: var(--hf-dark); cursor: pointer; }
.hf-veil__media { position: absolute; inset: 0; background: center/cover; transition: filter var(--hf-t-reveal) var(--hf-ease); }
.hf-veil:not(.hf-veil--revealed) .hf-veil__media { filter: blur(var(--hf-veil-blur)); transform: scale(1.06); }
.hf-veil__scrim { position: absolute; inset: 0; background: rgba(10,10,10,.55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; color: rgba(255,255,255,.92); font: 600 12.5px/1.45 var(--hf-font); text-align: center; transition: opacity var(--hf-t-reveal) var(--hf-ease); }
.hf-veil--revealed .hf-veil__scrim { opacity: 0; pointer-events: none; }
.hf-veil__eye { width: 46px; height: 46px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); display: grid; place-content: center; }
.hf-veil__tag { position: absolute; top: 12px; left: 12px; z-index: 2; }
.hf-eye { width: 22px; height: 13px; border-radius: 999px; background: #fff; display: grid; place-content: center; }
.hf-eye i { width: 7px; height: 7px; border-radius: 999px; background: var(--hf-primary); }

/* ---------- Trust meter / Progress ---------- */
.hf-trust { display: flex; gap: 5px; }
.hf-trust i { flex: 1; height: 7px; border-radius: 999px; background: var(--hf-border); }
.hf-trust i.is-on { background: var(--hf-primary); }
.hf-progress { height: 6px; border-radius: 999px; background: var(--hf-border-soft); overflow: hidden; }
.hf-progress i { display: block; height: 100%; width: var(--hf-progress-value, 40%); border-radius: 999px; background: linear-gradient(90deg, var(--hf-primary), var(--hf-primary-soft)); transition: width var(--hf-t-reveal) var(--hf-ease); }

/* ---------- Toast / Alert / Banner ---------- */
.hf-toast-region { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: var(--hf-z-toast); }
.hf-toast { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border-radius: var(--hf-r-md); background: var(--hf-dark); color: #fff; font: 600 12px/1.35 var(--hf-font); box-shadow: var(--hf-shadow-pop); animation: hf-rise .3s var(--hf-ease); min-width: 260px; }
.hf-toast__action { margin-left: auto; color: var(--hf-primary-soft); font-weight: 700; cursor: pointer; }
.hf-alert { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--hf-r-md); font: 500 12px/1.5 var(--hf-font); }
.hf-alert--info { background: var(--hf-surface); border: 1px solid var(--hf-border-soft); color: var(--hf-muted); }
.hf-alert--danger { background: var(--hf-primary-tint); border: 1px solid var(--hf-primary-tint-border); color: var(--hf-danger); }
.hf-alert--ok { background: var(--hf-online-tint); border: 1px solid var(--hf-online-border); color: var(--hf-online-ink); }
.hf-alert--warning { background: var(--hf-warning-tint); color: var(--hf-warning); }

/* ---------- Modal / Sheet / Drawer ---------- */
.hf-scrim { position: fixed; inset: 0; background: rgba(10,10,10,.45); z-index: calc(var(--hf-z-modal) - 1); animation: hf-fade var(--hf-t-ui) both; }
.hf-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(440px, calc(100vw - 40px)); background: var(--hf-bg); border-radius: var(--hf-r-lg); box-shadow: var(--hf-shadow-pop); z-index: var(--hf-z-modal); animation: hf-pop var(--hf-t-reveal) var(--hf-ease) both; }
.hf-sheet { position: fixed; left: 0; right: 0; bottom: 0; background: var(--hf-bg); border-radius: var(--hf-r-xl) var(--hf-r-xl) 0 0; box-shadow: var(--hf-shadow-pop); z-index: var(--hf-z-sheet); animation: hf-slide-up var(--hf-t-reveal) var(--hf-ease) both; padding-bottom: env(safe-area-inset-bottom); }
.hf-sheet__grip { width: 38px; height: 4px; border-radius: 999px; background: var(--hf-border); margin: 10px auto 6px; }
.hf-drawer { position: fixed; top: 0; bottom: 0; right: 0; width: min(360px, 86vw); background: var(--hf-bg); box-shadow: var(--hf-shadow-pop); z-index: var(--hf-z-sheet); animation: hf-slide-left var(--hf-t-reveal) var(--hf-ease) both; }

/* ---------- Menu / Dropdown / Tooltip ---------- */
.hf-menu { min-width: 220px; background: var(--hf-bg); border: 1px solid var(--hf-border); border-radius: var(--hf-r-lg); box-shadow: var(--hf-shadow-pop); overflow: hidden; }
.hf-menu__item { display: flex; align-items: center; gap: 12px; padding: 13px 18px; font: 600 13px/1 var(--hf-font); color: var(--hf-ink); cursor: pointer; border-bottom: 1px solid var(--hf-canvas); }
.hf-menu__item:last-child { border-bottom: 0; }
.hf-menu__item:hover { background: var(--hf-surface); }
.hf-menu__item--danger { color: var(--hf-danger); background: var(--hf-primary-tint); font-weight: 700; }
.hf-tooltip { position: relative; }
.hf-tooltip::after { content: attr(data-hf-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 7px 11px; border-radius: 9px; background: var(--hf-dark); color: #fff; font: 600 10.5px/1.3 var(--hf-font); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--hf-t-ui); }
.hf-tooltip:hover::after { opacity: 1; }

/* ---------- Skeleton / Spinner ---------- */
.hf-skeleton { border-radius: var(--hf-r-sm); background: linear-gradient(90deg, var(--hf-canvas), var(--hf-surface), var(--hf-canvas)); background-size: 200% 100%; animation: hf-shimmer 1.6s linear infinite; }
.hf-spinner { width: 22px; height: 22px; border-radius: 999px; border: 2.5px solid var(--hf-border); border-top-color: var(--hf-primary); animation: hf-spin .7s linear infinite; }

/* ---------- Empty / Error ---------- */
.hf-empty { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 26px 18px; border: 1px dashed var(--hf-border); border-radius: var(--hf-r-lg); text-align: center; }
.hf-empty__title { font: 400 19px/1.2 var(--hf-font-display); }
.hf-empty__text { font: 400 12px/1.55 var(--hf-font); color: var(--hf-muted); max-width: 240px; }

/* ---------- Liste / Notifiche / Chat ---------- */
.hf-list { display: flex; flex-direction: column; }
.hf-list__item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--hf-r-md); }
.hf-list__item:hover { background: var(--hf-surface); }
.hf-list__item--unread { background: var(--hf-primary-tint); }
.hf-divider { height: 1px; background: var(--hf-border-soft); border: 0; margin: var(--hf-s2) 0; }
.hf-bubble { max-width: 75%; padding: 12px 15px; font: 400 13.5px/1.5 var(--hf-font); border-radius: 18px 18px 18px 6px; background: var(--hf-bg); border: 1px solid var(--hf-border-soft); }
.hf-bubble--me { border-radius: 18px 18px 6px 18px; background: var(--hf-primary); border: 0; color: #fff; align-self: flex-end; }
.hf-bubble__meta { font: 500 10px/1 var(--hf-font); color: var(--hf-disabled); margin-top: 4px; }
.hf-typing { display: inline-flex; gap: 4px; padding: 12px 16px; border-radius: 18px 18px 18px 6px; background: var(--hf-bg); border: 1px solid var(--hf-border-soft); }
.hf-typing i { width: 6px; height: 6px; border-radius: 999px; background: var(--hf-faint); animation: hf-typing 1.2s infinite; }
.hf-typing i:nth-child(2) { animation-delay: .15s; } .hf-typing i:nth-child(3) { animation-delay: .3s; }
.hf-composer { display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-top: 1px solid var(--hf-border-soft); background: var(--hf-bg); }
.hf-composer input { flex: 1; height: 44px; border-radius: 999px; border: 1px solid var(--hf-border); background: var(--hf-surface); padding: 0 16px; font: 500 13px/1 var(--hf-font); outline: 0; }

/* ---------- Reaction / Like ---------- */
.hf-actionbar { display: flex; align-items: center; height: 46px; padding: 0 6px; border-radius: 999px; background: rgba(15,15,15,.82); color: #fff; }
.hf-actionbar > * { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; font: 700 12px/1 var(--hf-font); cursor: pointer; }
.hf-actionbar > * + * { border-left: 1px solid rgba(255,255,255,.14); }
.hf-like.is-liked { color: var(--hf-primary-soft); animation: hf-pop var(--hf-t-reveal) var(--hf-ease); }
.hf-heart-burst { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 72px; color: #fff; opacity: 0; pointer-events: none; }
.hf-heart-burst.is-on { animation: hf-heart .8s var(--hf-ease); }

/* ---------- Story ring / viewer ---------- */
.hf-storycard { width: 88px; height: 140px; border-radius: 16px; padding: 2.5px; background: linear-gradient(160deg, var(--hf-primary), var(--hf-primary-soft)); cursor: pointer; flex: none; }
.hf-storycard--seen { background: var(--hf-border); }
.hf-storycard__inner { width: 100%; height: 100%; border-radius: 14px; position: relative; overflow: hidden; background: var(--hf-dark); }
.hf-storybar { display: flex; gap: 4px; }
.hf-storybar i { flex: 1; height: 3px; border-radius: 999px; background: rgba(255,255,255,.3); overflow: hidden; position: relative; }
.hf-storybar i.is-done { background: #fff; }
.hf-storybar i.is-current::after { content: ""; position: absolute; inset: 0; width: var(--hf-story-progress, 50%); background: var(--hf-primary); }

/* ---------- Navigazione ---------- */
.hf-appbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; background: var(--hf-bg); border-bottom: 1px solid var(--hf-canvas); }
.hf-bottomnav { position: relative; display: flex; align-items: flex-end; justify-content: space-between; padding: 14px 30px calc(24px + env(safe-area-inset-bottom)); background: var(--hf-bg); border-top: 1px solid var(--hf-canvas); z-index: var(--hf-z-nav); }
.hf-bottomnav__item { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 50px; font: 600 9.5px/1 var(--hf-font); color: var(--hf-faint); cursor: pointer; position: relative; }
.hf-bottomnav__item.is-active { color: var(--hf-primary); font-weight: 700; }
.hf-bottomnav__fab { position: absolute; left: 50%; top: -26px; transform: translateX(-50%); width: 64px; height: 64px; border-radius: 999px; background: var(--hf-bg); display: grid; place-content: center; }
.hf-sidebar { width: 250px; display: flex; flex-direction: column; gap: 6px; padding: 20px 14px; border-right: 1px solid var(--hf-border-soft); background: var(--hf-bg); }
.hf-sidebar__item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; font: 600 13.5px/1 var(--hf-font); color: var(--hf-muted); cursor: pointer; }
.hf-sidebar__item:hover { background: var(--hf-surface); }
.hf-sidebar__item.is-active { background: var(--hf-primary-tint); color: var(--hf-primary); font-weight: 800; }
.hf-breadcrumb { display: flex; align-items: center; gap: 7px; font: 500 11.5px/1 var(--hf-font); color: var(--hf-faint); }
.hf-breadcrumb b { color: var(--hf-primary); font-weight: 700; }
.hf-pagination { display: inline-flex; gap: 6px; }
.hf-pagination button { min-width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--hf-border); background: var(--hf-bg); font: 700 12px/1 var(--hf-font); cursor: pointer; }
.hf-pagination button[aria-current="page"] { background: var(--hf-primary); border-color: var(--hf-primary); color: #fff; }

/* ---------- Megamenu + Lingua ---------- */
.hf-megamenu { position: relative; }
.hf-megamenu__panel { position: absolute; left: 50%; top: calc(100% + 14px); transform: translateX(-50%); width: min(880px, 92vw); background: var(--hf-bg); border: 1px solid var(--hf-border); border-radius: var(--hf-r-lg); box-shadow: var(--hf-shadow-pop); padding: 24px; display: none; grid-template-columns: repeat(4, 1fr); gap: 20px; z-index: var(--hf-z-sheet); }
.hf-megamenu.is-open .hf-megamenu__panel { display: grid; animation: hf-rise .25s var(--hf-ease); }
.hf-megamenu__col h6 { margin: 0 0 10px; font: 800 10.5px/1 var(--hf-font); letter-spacing: .1em; color: var(--hf-faint); }
.hf-megamenu__link { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 0 -10px; border-radius: 10px; font: 600 12.5px/1.3 var(--hf-font); color: var(--hf-ink); cursor: pointer; }
.hf-megamenu__link:hover { background: var(--hf-primary-tint); color: var(--hf-primary); }
.hf-megamenu__promo { grid-column: span 1; border-radius: var(--hf-r-md); background: var(--hf-dark); color: #fff; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.hf-lang { position: relative; }
.hf-lang__btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--hf-border); background: var(--hf-bg); font: 700 12px/1 var(--hf-font); cursor: pointer; }
.hf-lang__flag { font-size: 15px; line-height: 1; }
.hf-lang__menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; display: none; }
.hf-lang.is-open .hf-lang__menu { display: block; animation: hf-rise .2s var(--hf-ease); }
.hf-lang__menu .hf-menu__item[aria-current="true"] { background: var(--hf-primary-tint); color: var(--hf-primary); font-weight: 800; }

/* ---------- Accordion / Lightbox / Carousel ---------- */
.hf-accordion { border: 1px solid var(--hf-border); border-radius: var(--hf-r-lg); overflow: hidden; }
.hf-accordion details { border-bottom: 1px solid var(--hf-canvas); }
.hf-accordion details:last-child { border-bottom: 0; }
.hf-accordion summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; font: 700 13px/1.3 var(--hf-font); cursor: pointer; }
.hf-accordion summary::after { content: "+"; color: var(--hf-primary); font-weight: 800; }
.hf-accordion details[open] summary::after { content: "–"; }
.hf-accordion .hf-accordion__body { padding: 0 18px 14px; font: 400 12.5px/1.6 var(--hf-font); color: var(--hf-muted); }
.hf-lightbox { position: fixed; inset: 0; background: rgba(10,10,10,.92); z-index: var(--hf-z-modal); display: grid; place-content: center; animation: hf-fade var(--hf-t-ui) both; }
.hf-carousel { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hf-carousel > * { scroll-snap-align: start; flex: none; }
.hf-carousel::-webkit-scrollbar { display: none; }

/* ---------- Upload / Rating / Countdown ---------- */
.hf-dropzone { border: 2px dashed var(--hf-border); border-radius: var(--hf-r-lg); background: var(--hf-surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 26px; color: var(--hf-faint); font: 600 12px/1.4 var(--hf-font); cursor: pointer; transition: all var(--hf-t-ui); }
.hf-dropzone:hover, .hf-dropzone.is-drag { border-color: var(--hf-primary); background: var(--hf-primary-tint); color: var(--hf-primary); }
.hf-flames { display: inline-flex; gap: 3px; font-size: 16px; cursor: pointer; }
.hf-flames i { color: var(--hf-border); transition: color var(--hf-t-tap), transform var(--hf-t-tap); font-style: normal; }
.hf-flames i.is-on { color: var(--hf-primary); }
.hf-flames i:hover { transform: scale(1.2); }
.hf-countdown { font: 800 14px/1 var(--hf-font); color: var(--hf-primary); font-variant-numeric: tabular-nums; }

/* ---------- Keyframes ---------- */
@keyframes hf-spin { to { transform: rotate(360deg); } }
@keyframes hf-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes hf-pulse { 0% { transform: scale(1); opacity: .7; } 70% { transform: scale(2.2); opacity: 0; } 100% { opacity: 0; } }
@keyframes hf-glow { 0%,100% { box-shadow: 0 12px 28px -8px rgba(188,38,39,.45); } 50% { box-shadow: 0 14px 40px -6px rgba(188,38,39,.8); } }
@keyframes hf-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hf-fade { from { opacity: 0; } }
@keyframes hf-pop { 0% { opacity: 0; transform: scale(.5); } 70% { transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes hf-slide-up { from { transform: translateY(100%); } }
@keyframes hf-slide-left { from { transform: translateX(100%); } }
@keyframes hf-shake { 0%,100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes hf-typing { 0%,60%,100% { transform: none; opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes hf-heart { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.4); } 25% { opacity: 1; transform: translate(-50%,-50%) scale(1.15); } 60% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-70%) scale(1); } }