/* /Layout/MainLayout.razor.rz.scp.css */
.hc-skip[b-1o8w7qypjv] { position:absolute; inset-inline-start:-9999px; top:8px; background:#6D5EF6; color:#fff; padding:8px 14px; border-radius:8px; z-index:2000; }
.hc-skip:focus[b-1o8w7qypjv] { inset-inline-start:8px; }

/* Sticky translucent header, like the mockup's app bar. */
.hc-top[b-1o8w7qypjv] { position:sticky; top:0; z-index:60; background:rgba(7,10,20,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid #26304F; }
.hc-top-in[b-1o8w7qypjv] { display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:880px; margin:0 auto; padding:8px 16px; }
.hc-logo[b-1o8w7qypjv] { height:40px; width:auto; filter:drop-shadow(0 0 12px #6D5EF655); }
.hc-right[b-1o8w7qypjv] { display:flex; align-items:center; gap:6px; flex-wrap:nowrap; justify-content:flex-end; }
@media (max-width: 430px) { .hc-top-in[b-1o8w7qypjv] { padding-inline: 10px; gap:6px; } .hc-logo[b-1o8w7qypjv] { height:36px; max-width:100%; } .hc-brand[b-1o8w7qypjv] { flex: 1 1 auto; min-width: 0; } }
@media (max-width: 339px) { .hc-logo[b-1o8w7qypjv] { height:44px; max-width:60px; } }
.hc-lang[b-1o8w7qypjv] { background:#171F38; border:1px solid #26304F; color:#EEF1FB; border-radius:99px; padding:6px 14px; font-size:14px; cursor:pointer; }
.hc-who[b-1o8w7qypjv] { color:#B4BCD6; font-size:14px; max-width:34vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hc-signin[b-1o8w7qypjv] { text-decoration:none; background:#6D5EF6; border-color:#6D5EF6; color:#fff; }

/* Navigation: pill row on wide screens, bottom tab bar on phones (as in the app mockups). */
.hc-nav[b-1o8w7qypjv] { display:flex; gap:6px; max-width:880px; margin:0 auto; padding:12px 16px 4px; flex-wrap:wrap; }
.hc-nav[b-1o8w7qypjv]  a { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 16px; border-radius:99px; background:#171F38; border:1px solid #26304F; color:#B4BCD6; text-decoration:none; font-size:14px; transition:background .15s, border-color .15s, color .15s; }
.hc-nav[b-1o8w7qypjv]  a:hover { border-color:#6D5EF6; color:#fff; }
.hc-nav[b-1o8w7qypjv]  a.active { background:#6D5EF6; color:#fff; border-color:#6D5EF6; }
.hc-nav[b-1o8w7qypjv]  .hc-ico { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none; }

.hc-main[b-1o8w7qypjv] { max-width:880px; margin:0 auto; padding:0 16px 40px; outline:none; }
.hc-foot[b-1o8w7qypjv] { max-width:880px; margin:0 auto; padding:0 16px 30px; color:#A0A9C5; font-size:12.5px; }
.hc-foot-nav[b-1o8w7qypjv] { display:flex; gap:16px; flex-wrap:wrap; }
.hc-foot-nav a[b-1o8w7qypjv] { color:#B8AEFF; }

@media (max-width: 767.98px) {
    .hc-nav[b-1o8w7qypjv] { position:fixed; inset-inline:0; bottom:0; z-index:70; margin:0; max-width:none; padding:6px 4px calc(6px + env(safe-area-inset-bottom)); gap:0; flex-wrap:nowrap; justify-content:space-around;
              background:rgba(11,16,32,.96); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid #26304F; }
    .hc-nav[b-1o8w7qypjv]  a { flex:1 1 0; min-width:0; flex-direction:column; justify-content:center; gap:2px; padding:6px 2px; border:0; background:transparent; border-radius:12px; font-size:11px; min-height:52px; }
    .hc-nav[b-1o8w7qypjv]  a.active { background:transparent; color:#9A8CFF; }
    .hc-nav[b-1o8w7qypjv]  a span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .hc-nav[b-1o8w7qypjv]  .hc-ico { width:24px; height:24px; }
    .hc-main[b-1o8w7qypjv] { padding-bottom:96px; }
    .hc-foot[b-1o8w7qypjv] { padding-bottom:100px; }
}