/* HiveLuminary — base components: shell (header/nav/search/footer/bottomnav), tile + hex utils,
   badges, chips, cards base, modal, toast, skeleton primitives, motion keyframes. */

html.is-theming,html.is-theming body{transition:background-color 220ms,color 220ms}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
a:hover{color:var(--hl-primary-ink)}
h1,h2,h3,h4{margin:0 0 .4em;line-height:var(--hl-lh-tight);font-weight:700;letter-spacing:-.01em}
h1{font-size:var(--hl-fs-2xl)}h2{font-size:var(--hl-fs-xl)}h3{font-size:var(--hl-fs-lg)}h4{font-size:var(--hl-fs-md)}
p{margin:0 0 1em}
:focus-visible{outline:none;box-shadow:var(--hl-ring);border-radius:var(--hl-r-xs)}
.hl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hl-main{max-width:var(--hl-max);margin:0 auto;padding:0 var(--hl-gutter) calc(var(--hl-bottomnav-h) + var(--hl-safe-b) + 24px)}
.hl-wrap{max-width:var(--hl-max);margin:0 auto;padding:0 var(--hl-gutter)}
.hl-kicker{font-size:var(--hl-fs-xs);text-transform:uppercase;letter-spacing:var(--hl-track-caps);color:var(--hl-primary-ink);font-weight:700}
.hl-muted{color:var(--hl-text-3)}.hl-small{font-size:var(--hl-fs-sm)}
.hl-dropcap:first-letter{float:left;font-size:3.2em;line-height:.8;padding:.08em .12em 0 0;color:var(--hl-primary-ink);font-weight:700}
.hl-grad-text{background:var(--hl-grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.hl-section{margin:36px 0}
.hl-section__head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:16px}
.hl-section__head h2{margin:0}
.hl-section__more{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--hl-primary-ink);white-space:nowrap}

/* ── Hex motif (avatars + background pattern only; icon surfaces use rounded tiles) ── */
.hl-hex{clip-path:var(--hl-hex);-webkit-clip-path:var(--hl-hex)}
.hl-hex-ring{position:relative;display:inline-grid;place-items:center;background:var(--hl-grad-gold);padding:2px;clip-path:var(--hl-hex);-webkit-clip-path:var(--hl-hex)}
.hl-hex-ring>*{clip-path:var(--hl-hex);-webkit-clip-path:var(--hl-hex);background:var(--hl-surface);width:100%;height:100%}
.hl-avatar{width:56px;height:56px;object-fit:cover;background:var(--hl-surface-3);flex:none}
.hl-avatar--mono{display:grid;place-items:center;color:#fff;background:var(--cat,var(--hl-grad-gold));font-weight:700;font-size:.42em;letter-spacing:.02em}
.hl-avatar--lg{width:96px;height:96px}.hl-avatar--xl{width:136px;height:136px}.hl-avatar--sm{width:40px;height:40px}.hl-avatar--xs{width:28px;height:28px}
/* ── Category tile (Suki-style rounded square: soft tint of --cat, gradient glow border, emoji or line icon) ── */
.hl-cat-tile{--cat-r:18px;--cat-tint:.14;--cat-ring:.42;position:relative;width:64px;height:64px;display:grid;place-items:center;flex:none;isolation:isolate;border-radius:var(--cat-r);color:var(--cat,var(--hl-gold));background:var(--hl-surface);box-shadow:var(--hl-sh-xs);overflow:hidden;-webkit-transform:translateZ(0);transform:translateZ(0)}
.hl-cat-tile::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(145deg,var(--cat,var(--hl-gold)),var(--cat,var(--hl-gold)) 55%,transparent 160%);opacity:var(--cat-tint)}
.hl-cat-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1.5px solid var(--cat,var(--hl-gold));opacity:var(--cat-ring);pointer-events:none;-webkit-mask:linear-gradient(160deg,#000 20%,rgba(0,0,0,.35));mask:linear-gradient(160deg,#000 20%,rgba(0,0,0,.35))}
.hl-cat-tile svg{width:28px;height:28px;position:relative}
.hl-cat-tile .hl-cat-emoji,.hl-cat-emoji{font-style:normal;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",var(--hl-font);line-height:1;display:inline-block;position:relative;font-size:30px;filter:drop-shadow(0 1px 1px rgba(26,20,36,.12))}
.hl-cat-tile--sm{--cat-r:12px;width:40px;height:40px}.hl-cat-tile--sm svg{width:18px;height:18px}.hl-cat-tile--sm .hl-cat-emoji{font-size:20px}
.hl-cat-tile--xs{--cat-r:9px;width:28px;height:28px}.hl-cat-tile--xs svg{width:14px;height:14px}.hl-cat-tile--xs .hl-cat-emoji{font-size:15px}
.hl-cat-tile[style*="background:var(--hl-grad-gold)"]{--cat-tint:0;--cat-ring:0;color:var(--hl-text-on-gold);box-shadow:var(--hl-sh-sm)}
:root[data-theme="dark"] .hl-cat-tile{--cat-tint:.24;--cat-ring:.55;background:var(--hl-surface-2)}
:root[data-theme="dark"] .hl-cat-tile svg{filter:brightness(1.35) saturate(.9)}
/* small inline tiles inside menus / chips / pickers share the same recipe */
.hl-tile-i{position:relative;display:grid;place-items:center;flex:none;isolation:isolate;border-radius:8px;color:var(--cat,var(--hl-gold));background:var(--hl-surface);overflow:hidden;-webkit-transform:translateZ(0);transform:translateZ(0)}
.hl-tile-i::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--cat,var(--hl-gold));opacity:.14}
.hl-tile-i::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--cat,var(--hl-gold));opacity:.4;pointer-events:none}
:root[data-theme="dark"] .hl-tile-i{background:var(--hl-surface-2)}:root[data-theme="dark"] .hl-tile-i::before{opacity:.24}:root[data-theme="dark"] .hl-tile-i::after{opacity:.55}
:root[data-theme="dark"] .hl-tile-i svg{filter:brightness(1.35) saturate(.9)}
.hl-diamond{width:10px;height:10px;background:var(--hl-grad-gold);clip-path:var(--hl-diamond);-webkit-clip-path:var(--hl-diamond);display:inline-block;flex:none}
.hl-divider{display:flex;align-items:center;gap:12px;color:var(--hl-text-3);font-size:var(--hl-fs-xs);text-transform:uppercase;letter-spacing:var(--hl-track-caps);margin:24px 0}
.hl-divider::before,.hl-divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--hl-border-strong),transparent)}
.hl-hexline{height:14px;background:url("../img/hex-pattern.svg") repeat-x center/28px 14px;opacity:.45}
.hl-honeycomb{background-image:url("../img/hex-pattern.svg");background-size:56px 28px;opacity:.06;position:absolute;inset:0;pointer-events:none}
.hl-ic{flex:none;vertical-align:middle}

/* ── Eclipse + bokeh backdrop ── */
.hl-eclipse{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hl-eclipse::before{content:"";position:absolute;width:62vmin;height:62vmin;left:50%;top:-20vmin;transform:translateX(-50%);border-radius:50%;background:var(--hl-grad-eclipse);filter:blur(10px)}
.hl-eclipse::after{content:"";position:absolute;width:40vmin;height:40vmin;left:50%;top:-14vmin;transform:translateX(-50%);border-radius:50%;background:var(--hl-bg);box-shadow:0 0 80px 20px rgba(var(--hl-gold-rgb),.35)}
.hl-eclipse--plum::after{background:var(--hl-plum)}
.hl-bokeh{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hl-bokeh i{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(246,196,83,.55),rgba(246,196,83,0) 70%);filter:blur(2px);animation:hl-float 14s var(--hl-ease-io) infinite alternate}
.hl-bokeh i:nth-child(1){width:120px;height:120px;left:8%;top:30%}.hl-bokeh i:nth-child(2){width:70px;height:70px;left:78%;top:18%;animation-delay:-4s}
.hl-bokeh i:nth-child(3){width:160px;height:160px;left:60%;top:60%;animation-delay:-8s}.hl-bokeh i:nth-child(4){width:50px;height:50px;left:30%;top:70%;animation-delay:-2s}

/* ── Header ── */
.hl-header{position:sticky;top:0;z-index:50;height:var(--hl-header-h);background:rgba(255,255,255,.82);background:color-mix(in srgb,var(--hl-surface) 82%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--hl-border);transition:box-shadow var(--hl-t)}
:root[data-theme="dark"] .hl-header{background:rgba(30,21,54,.82);background:color-mix(in srgb,var(--hl-surface) 82%,transparent)}
.hl-header.is-scrolled{box-shadow:var(--hl-sh)}
.hl-header__in{max-width:var(--hl-max);margin:0 auto;padding:0 var(--hl-gutter);height:100%;display:flex;align-items:center;gap:14px}
.hl-logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:var(--hl-fs-lg);letter-spacing:-.01em;color:var(--hl-text);flex:none}
.hl-logo:hover{color:var(--hl-text)}
.hl-logo svg{width:34px;height:34px;border-radius:9px;filter:drop-shadow(0 2px 6px rgba(217,166,43,.35))}
.hl-logo b{font-weight:700;color:var(--hl-text-2)}
.hl-logo span{background:var(--hl-grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.hl-nav{display:none;align-items:center;gap:4px;margin-left:6px}
.hl-nav a,.hl-nav button{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:var(--hl-r-sm);font-weight:700;font-size:var(--hl-fs-sm);color:var(--hl-text-2);background:none;border:0;cursor:pointer;font-family:inherit}
.hl-nav a:hover,.hl-nav button:hover,.hl-nav a.is-active{background:var(--hl-surface-3);color:var(--hl-text)}
.hl-nav__dd{position:relative}
.hl-nav__menu{position:absolute;top:calc(100% + 8px);left:0;min-width:280px;max-height:70vh;overflow:auto;background:var(--hl-surface);border:1px solid var(--hl-border);border-radius:var(--hl-r);box-shadow:var(--hl-sh-lg);padding:8px;display:none;z-index:60}
.hl-nav__dd.is-open .hl-nav__menu{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.hl-nav__menu a{height:auto;padding:8px 10px;display:flex;gap:10px;align-items:center;font-weight:600;color:var(--hl-text-2)}
.hl-nav__menu a i{width:30px;height:30px;position:relative;display:grid;place-items:center;flex:none;isolation:isolate;border-radius:9px;color:var(--cat,var(--hl-gold));background:var(--hl-surface);overflow:hidden}
.hl-nav__menu a i::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--cat,var(--hl-gold));opacity:.14}
.hl-nav__menu a i::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--cat,var(--hl-gold));opacity:.4;pointer-events:none}
.hl-nav__menu a i svg{width:14px;height:14px}.hl-nav__menu a i .hl-cat-emoji{font-size:16px}
.hl-nav__menu a:hover i{box-shadow:var(--hl-glow)}
:root[data-theme="dark"] .hl-nav__menu a i{background:var(--hl-surface-2)}:root[data-theme="dark"] .hl-nav__menu a i::before{opacity:.24}:root[data-theme="dark"] .hl-nav__menu a i::after{opacity:.55}
.hl-header__sp{flex:1}
.hl-header__act{display:flex;align-items:center;gap:8px;margin-left:auto}
.hl-iconbtn{width:var(--hl-ctl-h);height:var(--hl-ctl-h);display:inline-grid;place-items:center;border-radius:var(--hl-r-sm);border:1px solid transparent;background:transparent;color:var(--hl-text-2);cursor:pointer;flex:none;font-family:inherit;transition:background var(--hl-t),color var(--hl-t)}
.hl-iconbtn:hover{background:var(--hl-surface-3);color:var(--hl-text)}
.hl-iconbtn--sm{width:36px;height:36px}
#hlThemeToggle .hl-ic--moon{display:none}
:root[data-theme="dark"] #hlThemeToggle .hl-ic--sun{display:none}
:root[data-theme="dark"] #hlThemeToggle .hl-ic--moon{display:block}
@media (max-width:1023px){.hl-hide-m{display:none!important}}
@media (min-width:1024px){
  .hl-nav{display:flex}.hl-only-m{display:none!important}
}

/* ── Live search (markup container; search.js enhances) ── */
.hl-search{position:relative;flex:1;max-width:520px;display:none}
.hl-search__box{display:flex;align-items:center;gap:8px;height:var(--hl-ctl-h);padding:0 12px 0 14px;border:1px solid var(--hl-border-strong);border-radius:var(--hl-r-full);background:var(--hl-surface);color:var(--hl-text-3);transition:border-color var(--hl-t),box-shadow var(--hl-t)}
.hl-search__box:focus-within{border-color:var(--hl-primary);box-shadow:var(--hl-ring);color:var(--hl-text)}
.hl-search__box input{flex:1;min-width:0;border:0;background:none;color:var(--hl-text);font:inherit;font-size:max(16px,1em);height:100%;outline:none;-webkit-appearance:none;appearance:none}
.hl-search__box input::placeholder{color:var(--hl-text-3)}
.hl-search__kbd{font-size:11px;color:var(--hl-text-3);border:1px solid var(--hl-border);border-radius:6px;padding:2px 6px;display:none}
.hl-search__panel{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--hl-surface);border:1px solid var(--hl-border);border-radius:var(--hl-r);box-shadow:var(--hl-sh-lg);padding:8px;display:none;max-height:min(70vh,560px);overflow:auto;z-index:70}
.hl-search.is-open .hl-search__panel{display:block}
.hl-search__group{padding:6px 10px 4px;font-size:var(--hl-fs-xs);text-transform:uppercase;letter-spacing:var(--hl-track-caps);color:var(--hl-text-3);font-weight:700}
.hl-search__item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--hl-r-sm);cursor:pointer;color:var(--hl-text)}
.hl-search__item[aria-selected="true"],.hl-search__item:hover{background:var(--hl-surface-3)}
.hl-search__item small{color:var(--hl-text-3);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hl-search__all{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;font-weight:700;color:var(--hl-primary-ink);border-top:1px solid var(--hl-border);margin-top:6px}
.hl-search__empty{padding:14px 10px;color:var(--hl-text-3);text-align:center}
.hl-search-sheet{position:fixed;inset:0;z-index:90;background:var(--hl-bg);padding:calc(10px + var(--hl-safe-t)) var(--hl-gutter) 16px;display:none;flex-direction:column;gap:12px;height:100dvh}
.hl-search-sheet.is-open{display:flex}
.hl-search-sheet .hl-search{display:block;max-width:none}
.hl-search-sheet .hl-search__panel{position:static;box-shadow:none;border:0;background:transparent;max-height:none;padding:0}
.hl-search-sheet__top{display:flex;gap:8px;align-items:center}
@media (min-width:1024px){.hl-search{display:block;margin:0 10px}.hl-search__kbd{display:inline-block}}

/* ── Mobile sheet menu ── */
.hl-sheet{position:fixed;inset:0;z-index:80;background:var(--hl-bg);display:none;flex-direction:column;height:100dvh;padding:calc(12px + var(--hl-safe-t)) var(--hl-gutter) calc(20px + var(--hl-safe-b));overflow:auto}
.hl-sheet.is-open{display:flex}
.hl-sheet__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.hl-sheet nav a{display:flex;align-items:center;gap:12px;padding:14px 6px;border-bottom:1px solid var(--hl-border);font-weight:700;font-size:var(--hl-fs-md)}
.hl-sheet nav a svg{color:var(--hl-primary-ink)}
.hl-sheet__cats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:18px 0}
.hl-sheet__cats a{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--hl-border);border-radius:var(--hl-r-sm);font-size:var(--hl-fs-sm);font-weight:600;background:var(--hl-surface)}
.hl-sheet__cats a i{width:34px;height:34px;position:relative;display:grid;place-items:center;flex:none;isolation:isolate;border-radius:10px;color:var(--cat,var(--hl-gold));background:var(--hl-surface);overflow:hidden}
.hl-sheet__cats a i::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--cat,var(--hl-gold));opacity:.14}
.hl-sheet__cats a i::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--cat,var(--hl-gold));opacity:.4;pointer-events:none}
.hl-sheet__cats a i svg{width:15px;height:15px}.hl-sheet__cats a i .hl-cat-emoji{font-size:18px}
:root[data-theme="dark"] .hl-sheet__cats a i{background:var(--hl-surface-2)}:root[data-theme="dark"] .hl-sheet__cats a i::before{opacity:.24}:root[data-theme="dark"] .hl-sheet__cats a i::after{opacity:.55}
body.hl-lock{overflow:hidden}

/* ── Bottom nav (mobile) ── */
.hl-bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:50;height:calc(var(--hl-bottomnav-h) + var(--hl-safe-b));padding-bottom:var(--hl-safe-b);display:grid;grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.92);background:color-mix(in srgb,var(--hl-surface) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--hl-border)}
:root[data-theme="dark"] .hl-bottomnav{background:rgba(30,21,54,.92);background:color-mix(in srgb,var(--hl-surface) 92%,transparent)}
.hl-bottomnav a,.hl-bottomnav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:700;color:var(--hl-text-3);background:none;border:0;font-family:inherit;cursor:pointer;min-height:44px}
.hl-bottomnav a.is-active,.hl-bottomnav a:hover,.hl-bottomnav button:hover{color:var(--hl-primary-ink)}
.hl-bottomnav .hl-bottomnav__hex{width:36px;height:36px;display:grid;place-items:center;background:var(--hl-grad-gold);color:var(--hl-text-on-gold);border-radius:11px;box-shadow:var(--hl-glow);margin-top:-2px}
@media (min-width:1024px){.hl-bottomnav{display:none}.hl-main{padding-bottom:40px}}

/* ── Footer ── */
.hl-footer{position:relative;margin-top:48px;background:var(--hl-grad-plum);color:#D9D2E8;overflow:hidden}
.hl-footer .hl-honeycomb{opacity:.05}
.hl-footer__in{position:relative;max-width:var(--hl-max);margin:0 auto;padding:40px var(--hl-gutter) 24px;display:grid;gap:28px;grid-template-columns:1fr}
.hl-footer h4{color:#F6C453;font-size:var(--hl-fs-sm);text-transform:uppercase;letter-spacing:var(--hl-track-caps);margin-bottom:12px}
.hl-footer a{display:block;color:#D9D2E8;padding:4px 0}
.hl-footer a:hover{color:#F6C453}
.hl-footer__brand .hl-logo{color:#fff;margin-bottom:10px}
.hl-footer__brand .hl-logo b{color:#fff}
.hl-footer__brand p{color:#B9B0D0;font-size:var(--hl-fs-sm);max-width:360px}
.hl-footer__bottom{position:relative;border-top:1px solid rgba(255,255,255,.1);padding:16px var(--hl-gutter) calc(16px + var(--hl-bottomnav-h) + var(--hl-safe-b));text-align:center;font-size:var(--hl-fs-xs);color:#9A90B8}
.hl-footer__bottom a{display:inline;color:#B9B0D0}
.hl-footer .hl-hexline{opacity:.25;position:relative}
@media (min-width:640px){.hl-footer__in{grid-template-columns:1.4fr 1fr 1fr 1fr}}
@media (min-width:1024px){.hl-footer__bottom{padding-bottom:16px}}

/* ── Badges / chips / pills ── */
.hl-badges{display:flex;flex-wrap:wrap;gap:6px}
.hl-badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--hl-r-full);font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;border:1px solid transparent;background:var(--hl-surface);color:var(--hl-text-2);box-shadow:var(--hl-sh-xs)}
.hl-badge--cover{background:var(--hl-grad-gold);color:var(--hl-text-on-gold)}
.hl-badge--premium{border-color:var(--hl-gold);color:var(--hl-primary-ink);background:var(--hl-surface)}
.hl-badge--featured{background:var(--hl-violet);color:#fff}
.hl-badge--verified{background:var(--hl-success-bg);color:var(--hl-success);border-color:rgba(31,157,106,.3)}
.hl-badge--new{background:var(--hl-ivory);color:var(--hl-text-2);border-color:var(--hl-border-strong)}
.hl-badge--boosted{background:var(--hl-warning-bg);color:var(--hl-warning)}
.hl-badge--sample{background:var(--hl-info-bg);color:var(--hl-info)}
.hl-badge--pinned{background:var(--hl-surface-3);color:var(--hl-text-2)}
.hl-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 5px;border-radius:var(--hl-r-full);border:1px solid var(--hl-border);background:var(--hl-surface-2);font-size:var(--hl-fs-xs);font-weight:700;color:var(--hl-text-2);white-space:nowrap}
.hl-chip i{width:20px;height:20px;position:relative;display:grid;place-items:center;flex:none;isolation:isolate;border-radius:6px;color:var(--cat,var(--hl-gold));background:var(--hl-surface);overflow:hidden}
.hl-chip i::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--cat,var(--hl-gold));opacity:.16}
.hl-chip i::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--cat,var(--hl-gold));opacity:.4;pointer-events:none}
.hl-chip i svg{width:10px;height:10px}.hl-chip i .hl-cat-emoji{font-size:12px;filter:none}
:root[data-theme="dark"] .hl-chip i{background:var(--hl-surface-3)}:root[data-theme="dark"] .hl-chip i::before{opacity:.26}:root[data-theme="dark"] .hl-chip i::after{opacity:.55}
.hl-chip:hover{border-color:var(--hl-primary);color:var(--hl-primary-ink)}
.hl-pill{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--hl-r-full);font-size:11px;font-weight:700;background:var(--hl-surface-3);color:var(--hl-text-2)}
.hl-pill--success{background:var(--hl-success-bg);color:var(--hl-success)}.hl-pill--warning{background:var(--hl-warning-bg);color:var(--hl-warning)}
.hl-pill--danger{background:var(--hl-danger-bg);color:var(--hl-danger)}.hl-pill--info{background:var(--hl-info-bg);color:var(--hl-info)}
.hl-pill--gold{background:var(--hl-grad-gold);color:var(--hl-text-on-gold)}
.hl-stars{display:inline-flex;gap:1px;color:var(--hl-border-strong);vertical-align:middle}
.hl-stars i{display:inline-flex}.hl-stars i.is-on,.hl-stars i.is-half{color:var(--hl-gold)}.hl-stars i.is-on svg{fill:var(--hl-gold)}
.hl-stars__n{font-size:var(--hl-fs-sm);color:var(--hl-text-2);font-weight:700}

/* ── Panels / notices ── */
.hl-panel{background:var(--hl-surface);border:1px solid var(--hl-border);border-radius:var(--hl-r-lg);box-shadow:var(--hl-sh-sm);padding:20px}
.hl-notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--hl-r-sm);font-size:var(--hl-fs-sm);background:var(--hl-info-bg);color:var(--hl-info)}
.hl-notice--warn{background:var(--hl-warning-bg);color:var(--hl-warning)}.hl-notice--ok{background:var(--hl-success-bg);color:var(--hl-success)}.hl-notice--err{background:var(--hl-danger-bg);color:var(--hl-danger)}
.hl-note{font-size:var(--hl-fs-sm);color:var(--hl-text-3);border-left:3px solid var(--hl-gold);padding:6px 12px;background:var(--hl-surface-2);border-radius:0 var(--hl-r-xs) var(--hl-r-xs) 0}

/* ── Rich content (admin-authored HTML) ── */
.hl-rich{font-size:var(--hl-fs);line-height:1.6;color:var(--hl-text);overflow-wrap:anywhere}
.hl-rich img{border-radius:var(--hl-r-sm);height:auto}
.hl-rich h2,.hl-rich h3{margin-top:1.2em}
.hl-rich ul,.hl-rich ol{padding-left:1.3em}
.hl-rich a{color:var(--hl-primary-ink);text-decoration:underline;text-underline-offset:2px}
.hl-rich blockquote{margin:1em 0;padding:.6em 1em;border-left:3px solid var(--hl-gold);background:var(--hl-surface-2);border-radius:0 var(--hl-r-sm) var(--hl-r-sm) 0}
.hl-rich iframe{max-width:100%;border:0;border-radius:var(--hl-r-sm)}
.hl-rich table{border-collapse:collapse;width:100%}.hl-rich td,.hl-rich th{border:1px solid var(--hl-border);padding:6px 10px;text-align:left}

/* ── Modal / toast ── */
.hl-modal{border:0;padding:0;background:transparent;max-width:min(560px,calc(100vw - 32px));width:100%}
.hl-modal::backdrop{background:rgba(18,11,34,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hl-modal__card{background:var(--hl-surface);color:var(--hl-text);border-radius:var(--hl-r-lg);box-shadow:var(--hl-sh-lg);padding:22px;max-height:calc(100dvh - 32px);overflow:auto}
.hl-modal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.hl-modal__head h3{margin:0}
.hl-modal-fallback{position:fixed;inset:0;z-index:100;display:none;place-items:center;background:rgba(18,11,34,.6);padding:16px}
.hl-modal-fallback.is-open{display:grid}
.hl-toast{position:fixed;left:50%;bottom:calc(var(--hl-bottomnav-h) + var(--hl-safe-b) + 16px);transform:translateX(-50%) translateY(20px);opacity:0;z-index:120;background:var(--hl-text);color:var(--hl-bg);padding:12px 18px;border-radius:var(--hl-r-full);font-size:var(--hl-fs-sm);font-weight:700;box-shadow:var(--hl-sh-lg);transition:opacity var(--hl-t),transform var(--hl-t);pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
.hl-toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}
.hl-toast--error{background:var(--hl-danger);color:#fff}.hl-toast--success{background:var(--hl-success);color:#fff}
@media (min-width:1024px){.hl-toast{bottom:28px}}
.hl-fab{position:fixed;right:16px;bottom:calc(var(--hl-bottomnav-h) + var(--hl-safe-b) + 16px);z-index:45;width:48px;height:48px;display:grid;place-items:center;background:var(--hl-grad-gold);color:var(--hl-text-on-gold);border-radius:14px;box-shadow:var(--hl-glow);border:0;cursor:pointer;opacity:0;transform:translateY(12px);transition:opacity var(--hl-t),transform var(--hl-t);pointer-events:none}
.hl-fab.is-show{opacity:1;transform:none;pointer-events:auto}
@media (min-width:1024px){.hl-fab{bottom:28px}}
.hl-install{position:fixed;left:16px;right:16px;bottom:calc(var(--hl-bottomnav-h) + var(--hl-safe-b) + 12px);z-index:46;background:var(--hl-surface);border:1px solid var(--hl-border);border-radius:var(--hl-r);box-shadow:var(--hl-sh-lg);padding:12px 14px;display:none;align-items:center;gap:12px;transform:translateY(100%);transition:transform 320ms var(--hl-ease)}
.hl-install.is-show{display:flex;transform:none}
.hl-install p{margin:0;font-size:var(--hl-fs-sm);flex:1}
@media (min-width:640px){.hl-install{left:auto;right:16px;max-width:420px}}

/* ── Skeleton primitives ── */
.hl-skel{position:relative;overflow:hidden;background:var(--hl-surface);border:1px solid var(--hl-border);border-radius:var(--hl-r-lg)}
.hl-skel__b{background:var(--hl-surface-3);border-radius:var(--hl-r-xs)}
.hl-skel-hex{display:flex;gap:6px;justify-content:center;padding:14px}
.hl-skel-hex i{width:24px;height:24px;background:var(--hl-gold);opacity:.35;border-radius:7px;animation:hl-pulse 1.2s ease-in-out infinite alternate}
.hl-skel-hex i:nth-child(2){animation-delay:80ms}.hl-skel-hex i:nth-child(3){animation-delay:160ms}.hl-skel-hex i:nth-child(4){animation-delay:240ms}.hl-skel-hex i:nth-child(5){animation-delay:320ms}.hl-skel-hex i:nth-child(6){animation-delay:400ms}.hl-skel-hex i:nth-child(7){animation-delay:480ms}
.hl-skel-shimmer::after{content:"";position:absolute;inset:0;background:var(--hl-grad-shimmer);animation:hl-shimmer 1.4s linear infinite}
.hl-spin-hex{width:28px;height:28px;border:2px solid var(--hl-gold);border-top-color:transparent;border-radius:9px;animation:hl-spin-hex 1.1s linear infinite;display:inline-block}

/* ── Motion ── */
@keyframes hl-reveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes hl-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes hl-pulse{from{opacity:.35}to{opacity:.9}}
@keyframes hl-float{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(12px,-18px,0) scale(1.08)}}
@keyframes hl-glow{0%,100%{box-shadow:var(--hl-glow)}50%{box-shadow:var(--hl-glow-strong)}}
@keyframes hl-spin-hex{to{transform:rotate(360deg)}}
.hl-reveal{opacity:0}.hl-reveal.is-in{animation:hl-reveal var(--hl-t-reveal) var(--hl-ease) both}
.hl-reveal[data-delay="1"].is-in{animation-delay:60ms}.hl-reveal[data-delay="2"].is-in{animation-delay:120ms}.hl-reveal[data-delay="3"].is-in{animation-delay:180ms}
.hl-card--cover-live{animation:hl-glow 4s ease-in-out infinite}
html.hl-nojs .hl-reveal{opacity:1}
@media (prefers-reduced-motion:reduce){.hl-reveal{opacity:1}.hl-reveal.is-in,.hl-skel-shimmer::after,.hl-bokeh i,.hl-card--cover-live,.hl-skel-hex i{animation:none}}

/* ── Page header band (categories/sections/profile) ── */
.hl-band{position:relative;overflow:hidden;background:var(--hl-bg-2);border-bottom:1px solid var(--hl-border);padding:36px 0 28px}
.hl-band__in{position:relative;max-width:var(--hl-max);margin:0 auto;padding:0 var(--hl-gutter);display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.hl-band h1{margin:0}
.hl-band p{margin:4px 0 0;color:var(--hl-text-2)}

/* ── Generic list / util ── */
.hl-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hl-grow{flex:1;min-width:0}
.hl-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hl-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hl-clamp-4{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.hl-clamp-6{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.hl-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hl-media{position:relative;aspect-ratio:16/10;background:var(--hl-surface-3);overflow:hidden}
.hl-media img{width:100%;height:100%;object-fit:cover}
@supports not (aspect-ratio:1){.hl-media{padding-top:62.5%}.hl-media img{position:absolute;inset:0}}
.hl-empty{text-align:center;padding:48px 16px;color:var(--hl-text-3)}
.hl-empty .hl-cat-tile{margin:0 auto 12px}