/* HELPER_NAV_TONES_V2
   Variant 2 of the shared rail: every group carries its own colour (favourites
   gold, site cyan, game violet, management red, page sections green). Icons sit
   in tinted tiles, the active row glows in its group colour, favourites become
   chips, and stars appear only on hover. Geometry and behaviour stay as they
   were; this file decides appearance only. */
:is(.helper-unified-page,.faq-unified-page) .hfn-rail{--tc:#54def5;border-color:#ffffff10;background:radial-gradient(circle at 0 0,#54def514,transparent 220px),radial-gradient(circle at 100% 100%,#a98bff14,transparent 260px),#0a1119f5}
/* A thin neon edge drawn as a masked ring, so nothing inside the rail moves. */
:is(.helper-unified-page,.faq-unified-page) .hfn-rail::before{content:"";position:absolute;inset:-1px;padding:1px;border-radius:inherit;background:linear-gradient(160deg,#54def566,transparent 30%,transparent 70%,#a98bff66);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail [data-hfn-tone=cyan]{--tc:#54def5}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail [data-hfn-tone=violet]{--tc:#a98bff}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail [data-hfn-tone=red]{--tc:#ff5f7c}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail [data-hfn-tone=gold]{--tc:#ffcf5a}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail [data-hfn-tone=green]{--tc:#46e0a2}

/* --- group headings: dot, title, badge, count, chevron --------------------- */
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-group>p{height:24px;margin:8px 0 4px;color:var(--tc);font-size:10px;font-weight:800;letter-spacing:.14em}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-group+.hfn-group{margin-top:10px}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-group-toggle{gap:7px;padding:0 8px 0 10px}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-group-toggle:hover{color:color-mix(in srgb,var(--tc) 70%,#fff)}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-group-toggle::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:var(--tc);box-shadow:0 0 8px var(--tc)}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-group-toggle::after{color:#7f93a6}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-group-toggle:has(>.hfn-group-count:not([hidden]))::after{margin-left:2px}
:is(.helper-unified-page,.faq-unified-page) .hfn-group-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
:is(.helper-unified-page,.faq-unified-page) .hfn-group-count{display:inline-block;margin-left:auto;padding:2px 6px;border-radius:6px;background:#ffffff08;color:#8ea2b4;font:600 9.5px/1.3 'JetBrains Mono',ui-monospace,monospace;letter-spacing:0}
:is(.helper-unified-page,.faq-unified-page) .hfn-group-count[hidden]{display:none}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-beta-badge{display:inline-block;flex:0 0 auto;margin:0;padding:3px 6px;border:1px solid #ffcf5a66;border-radius:999px;background:#ffcf5a14;color:#ffcf5a;font:800 8px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.1em}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail:not(.is-expanded) .hfn-group>p{border-top-color:color-mix(in srgb,var(--tc) 38%,transparent)}

/* --- rows: tinted icon tiles, glowing active row ---------------------------- */
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-links .hfn-item{height:38px;padding-inline:5px 10px;gap:10px;border-radius:11px;color:#b5c4d2;font-size:12.5px}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-links .hfn-item>svg,
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-links .hfn-item>.hfn-favorite-mark{box-sizing:border-box;flex:0 0 28px;width:28px;height:28px;padding:6px;border-radius:9px;background:color-mix(in srgb,var(--tc) 11%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc) 22%,transparent);color:var(--tc);stroke-width:1.9;transition:background .15s,box-shadow .15s,color .15s}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-links .hfn-item>.hfn-favorite-mark{padding:0;font-size:13px}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-links .hfn-item:hover{background:color-mix(in srgb,var(--tc) 7%,transparent);color:#eef6fb}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-links .hfn-item:hover>svg{background:color-mix(in srgb,var(--tc) 18%,transparent)}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-links .hfn-item.is-active{background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 30%,transparent),color-mix(in srgb,var(--tc) 6%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc) 45%,transparent),0 0 18px color-mix(in srgb,var(--tc) 16%,transparent);color:#fff;font-weight:650}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-links .hfn-item.is-active::before{display:none}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-links .hfn-item.is-active>svg{background:var(--tc);box-shadow:0 0 12px color-mix(in srgb,var(--tc) 55%,transparent);color:#120d24;stroke-width:2.1}
/* Page sections stay secondary to the page itself, as before. */
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-links .hfn-item[data-page-section]{color:#a3b5c5}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-links .hfn-item[data-page-section].is-active{background:color-mix(in srgb,var(--tc) 8%,transparent);box-shadow:inset 2px 0 0 var(--tc);color:#e3eef5;font-weight:600}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-links .hfn-item[data-page-section].is-active>svg{background:color-mix(in srgb,var(--tc) 24%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc) 45%,transparent);color:var(--tc)}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-links .hfn-item.hfn-coming-soon:hover{background:none}
/* --- narrow rail: one centred tile per row ----------------------------------
   The scrollbar and side padding used to eat the 72px column, so tiles drifted
   and the active row's box slid left. Here the column loses both, every row is
   a fixed square in the middle, and only the tile itself lights up. */
:is(.helper-unified-page,.faq-unified-page) .hfn-rail:not(.is-expanded) .hfn-links{padding-inline:0;scrollbar-width:none}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail:not(.is-expanded) .hfn-links::-webkit-scrollbar{display:none}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail:not(.is-expanded) .hfn-links .hfn-nav-row{justify-content:center}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail:not(.is-expanded) .hfn-links .hfn-item,
:is(.helper-unified-page,.faq-unified-page) .hfn-rail:not(.is-expanded) .hfn-links .hfn-item:is(:hover,.is-active,[data-page-section].is-active){flex:0 0 auto;width:44px;height:42px;margin:2px auto;padding:0;gap:0;justify-content:center;background:none;box-shadow:none}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail:not(.is-expanded) .hfn-links .hfn-item>:is(svg,.hfn-favorite-mark){flex:0 0 36px;width:36px;height:36px;padding:9px;border-radius:12px}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail:not(.is-expanded) .hfn-links .hfn-item>.hfn-favorite-mark{padding:0;font-size:14px}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail:not(.is-expanded) .hfn-links .hfn-item:hover>:is(svg,.hfn-favorite-mark){background:color-mix(in srgb,var(--tc) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc) 45%,transparent)}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail:not(.is-expanded) .hfn-links .hfn-item.is-active>svg{background:var(--tc);box-shadow:0 0 0 1px color-mix(in srgb,var(--tc) 70%,#fff),0 0 16px color-mix(in srgb,var(--tc) 60%,transparent);color:#120d24}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail:not(.is-expanded) .hfn-links .hfn-item[data-page-section].is-active>svg{background:color-mix(in srgb,var(--tc) 26%,transparent);box-shadow:inset 0 0 0 1.5px var(--tc),0 0 12px color-mix(in srgb,var(--tc) 30%,transparent);color:var(--tc)}

/* --- value chips: wallet balance and mirrored counts ----------------------- */
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-item :is(.hfn-value,.hfn-count){flex:0 0 auto;margin-left:auto;padding:2px 7px;border-radius:6px;background:color-mix(in srgb,var(--tc) 12%,transparent);color:var(--tc);font:600 10px/1.4 'JetBrains Mono',ui-monospace,monospace;font-style:normal;white-space:nowrap}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-item .hfn-value[hidden]{display:none}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-item.is-active :is(.hfn-value,.hfn-count){background:#ffffff1a;color:#fff}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail:not(.is-expanded) .hfn-item .hfn-value{display:none}

/* --- stars only on hover ----------------------------------------------------- */
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-nav-row>.hfn-favorite-toggle{opacity:0;transition:opacity .15s,color .15s,background .15s}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-nav-row:is(:hover,:focus-within)>.hfn-favorite-toggle{opacity:1}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-nav-row>.hfn-favorite-toggle:disabled{opacity:0}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-nav-row:is(:hover,:focus-within)>.hfn-favorite-toggle:disabled{opacity:.4}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-favorite-toggle:hover{background:#ffcf5a14;color:#ffcf5a}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-favorite-toggle[aria-pressed=true]{color:#ffcf5a}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-favorite-toggle[aria-pressed=true] svg{fill:#ffcf5a55}
@media(hover:none){
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-nav-row>.hfn-favorite-toggle{opacity:1}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-nav-row>.hfn-favorite-toggle:disabled{opacity:.4}
}

/* --- favourites as chips (expanded rail; the narrow rail keeps icon rows) --- */
:is(.helper-unified-page,.faq-unified-page) .hfn-rail.is-expanded #hfnFavorites{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:5px 3px 4px}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail.is-expanded #hfnFavorites:empty{display:none}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail.is-expanded #hfnFavorites .hfn-nav-row{position:relative;gap:0;max-width:100%}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail.is-expanded #hfnFavorites .hfn-nav-row>.hfn-item{flex:1 1 auto;width:100%}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail.is-expanded .hfn-links #hfnFavorites .hfn-favorite-link{height:30px;margin:0;padding:0 8px 0 4px;gap:5px;border-radius:999px;background:color-mix(in srgb,var(--tc) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc) 35%,transparent);color:color-mix(in srgb,var(--tc) 55%,#fff);font-size:11px;font-weight:600;letter-spacing:-.01em}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail.is-expanded .hfn-links #hfnFavorites .hfn-favorite-link:hover{background:color-mix(in srgb,var(--tc) 18%,transparent);color:#fff}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail.is-expanded .hfn-links #hfnFavorites .hfn-favorite-link>:is(svg,.hfn-favorite-mark){flex-basis:20px;width:20px;height:20px;padding:3.5px;border-radius:50%;background:color-mix(in srgb,var(--tc) 20%,transparent);box-shadow:none}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail.is-expanded .hfn-links #hfnFavorites .hfn-favorite-link>.hfn-favorite-mark{padding:0;font-size:11px}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail.is-expanded #hfnFavorites .hfn-favorite-toggle{position:absolute;top:-4px;right:-4px;z-index:1;width:16px;height:16px;flex-basis:16px;padding:0;border-radius:50%;background:#1a2430;box-shadow:0 0 0 1px #ffffff2e;color:#c9d6e0;font-size:12px;line-height:1}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail.is-expanded #hfnFavorites .hfn-favorite-toggle:hover{background:#ff5f7c;color:#fff}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-favorites-empty{color:#a39373}

/* --- filter ------------------------------------------------------------------ */
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-search{border-color:#ffffff12;border-radius:10px;background:#ffffff06}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-search:is(:focus-within,.is-searching){border-color:#54def555;background:#54def50a;box-shadow:0 0 0 3px #54def512}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-search kbd{border-color:#ffffff1a;background:#ffffff08}

/* --- head and footer ------------------------------------------------------- */
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-robot{border-color:#54def540;background:linear-gradient(135deg,#54def51a,#a98bff14);box-shadow:0 0 22px #54def51f}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-footer{border-top-color:#ffffff0d;background:transparent}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-dashboard{border-color:#ffffff12;border-radius:12px;background:linear-gradient(135deg,#54def512,#a98bff12)}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-dashboard:hover{border-color:#54def540;background:linear-gradient(135deg,#54def51f,#a98bff1f)}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-dashboard .hfn-avatar{border-color:#54def555;border-radius:10px;box-shadow:0 0 12px #54def522}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail:not(.is-expanded) .hfn-dashboard{border:0;background:none}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-quick>*{border-color:#ffffff10;border-radius:9px;background:#ffffff05}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-quick>*:hover{border-color:#54def540;color:#e3f4fb}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-pin[aria-pressed=true]{border-color:#54def555;background:#54def512;color:#9fe9f6}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-pin i{display:none}

@media(max-width:700px){
:is(.helper-unified-page,.faq-unified-page) .hfn-rail .hfn-links .hfn-item{height:42px}
:is(.helper-unified-page,.faq-unified-page) .hfn-rail.is-expanded .hfn-links #hfnFavorites .hfn-favorite-link{height:34px}
}
@media(prefers-reduced-motion:reduce){
:is(.helper-unified-page,.faq-unified-page) .hfn-rail :is(.hfn-item>svg,.hfn-favorite-toggle){transition:none}
}