/* ConfaHub Design — the final, landing-specific visual layer.
   It intentionally preserves templates, interaction hooks and layout contracts. */

:root {
    --chd-bg-0: #050505;
    --chd-bg-1: #101010;
    --chd-surface: rgba(19, 19, 19, .68);
    --chd-surface-strong: rgba(29, 29, 29, .82);
    --chd-surface-soft: rgba(255, 255, 255, .055);
    --chd-edge: rgba(255, 255, 255, .15);
    --chd-edge-strong: rgba(255, 255, 255, .30);
    --chd-ink: #f7f7f4;
    --chd-muted: rgba(247, 247, 244, .70);
    --chd-dim: rgba(247, 247, 244, .48);
    --chd-radius-xl: 30px;
    --chd-radius-lg: 22px;
    --chd-radius-md: 16px;
    --chd-shadow: 0 22px 62px rgba(0, 0, 0, .31);
    --chd-shadow-hover: 0 28px 72px rgba(0, 0, 0, .40);
    --bg: radial-gradient(ellipse 70% 60% at 90% -20%, rgba(255, 255, 255, .11), transparent 62%), linear-gradient(135deg, var(--chd-bg-0), var(--chd-bg-1));
    --surface: linear-gradient(150deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .025) 42%, rgba(0, 0, 0, .10)), var(--chd-surface);
    --surface-soft: var(--chd-surface-soft);
    --border: var(--chd-edge);
    --border-strong: var(--chd-edge-strong);
    --text: var(--chd-ink);
    --muted: var(--chd-muted);
    --muted-soft: var(--chd-dim);
    --chip: rgba(255, 255, 255, .065);
    --shadow: var(--chd-shadow);
    --shadow-soft: 0 12px 34px rgba(0, 0, 0, .20);
    --glow: inset 0 1px rgba(255, 255, 255, .14), inset 0 -1px rgba(0, 0, 0, .12);
    --radius-2xl: var(--chd-radius-xl);
    --radius-xl: var(--chd-radius-lg);
    --radius-lg: var(--chd-radius-md);
    --radius-md: 12px;
    --font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.confahub-body {
    background: var(--bg);
    letter-spacing: -.01em;
}

.confahub-body.page-profile {
    --hub-ink: var(--chd-ink);
    --hub-muted: var(--chd-muted);
    --hub-faint: var(--chd-dim);
    --hub-panel: rgba(19, 19, 19, .68);
    --hub-panel-strong: rgba(29, 29, 29, .82);
    --hub-line: var(--chd-edge);
    --hub-line-strong: var(--chd-edge-strong);
    --hub-violet: var(--chd-ink);
    --hub-blue: var(--chd-ink);
    --hub-mint: var(--chd-ink);
    --hub-shadow: var(--chd-shadow);
    background: var(--bg);
    color: var(--chd-ink);
    font-family: var(--font-display);
}

.site-ambience {
    background:
        radial-gradient(ellipse 50% 58% at 3% 8%, rgba(255, 255, 255, .12), transparent 71%),
        radial-gradient(ellipse 46% 54% at 91% 82%, rgba(255, 255, 255, .075), transparent 74%);
}

.confahub-body.page-profile .site-ambience {
    background:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 86px 86px;
    mask-image: linear-gradient(to bottom, black, transparent 78%);
}
.confahub-body.page-profile .site-ambience__glow {
    opacity: .12;
    background: radial-gradient(circle, rgba(255, 255, 255, .34), transparent 68%);
}
.confahub-body.page-profile .hub-profile__card {
    border-color: var(--chd-edge);
    background: var(--chd-surface-strong);
    box-shadow: var(--glow), var(--chd-shadow);
}
.confahub-body.page-profile .hub-profile__form .profile-field input,
.confahub-body.page-profile .hub-profile__form .profile-field textarea {
    border-color: var(--chd-edge);
    background: rgba(255, 255, 255, .055);
    color: var(--chd-ink);
}
.confahub-body.page-profile .hub-button--primary {
    border-color: rgba(255, 255, 255, .62);
    background: linear-gradient(145deg, #f0f0e9, #bfc1ba);
    color: #151515;
    box-shadow: inset 0 1px rgba(255, 255, 255, .74), 0 12px 28px rgba(0, 0, 0, .22);
}
.confahub-body.page-profile .hub-button--quiet:hover { background: rgba(255, 255, 255, .10); }

.site-ambience__glow { opacity: .10; filter: blur(110px); }
.site-ambience__glow--left { top: -18rem; left: -15rem; }
.site-ambience__glow--right { top: 22rem; right: -17rem; }
.site-ambience__mesh { opacity: .035; background-size: 112px 112px; }

.site-shell { gap: 20px; padding: 20px; }
.main-content { gap: 20px; }

.surface-card,
.site-header__inner,
.bottom-nav-mobile__inner,
.email-verify-modal__card {
    border: 1px solid var(--chd-edge);
    box-shadow: var(--glow), var(--chd-shadow);
    backdrop-filter: blur(28px) saturate(125%);
    -webkit-backdrop-filter: blur(28px) saturate(125%);
}

.surface-card::before { background: linear-gradient(135deg, rgba(255, 255, 255, .10), transparent 34%); }
.section-eyebrow {
    color: var(--chd-dim);
    font-size: .71rem;
    font-weight: 750;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.brand-logo { letter-spacing: -.06em; }
.brand-logo--header { font-size: clamp(1.45rem, 1.15rem + 1vw, 2.3rem); }
.brand-logo--sidebar { font-size: 1.6rem; }
.brand-logo__avatar { box-shadow: 0 10px 26px rgba(0, 0, 0, .32); }

.site-header { position: relative; z-index: 50; }
.site-header__inner {
    min-height: 72px;
    padding: 12px 16px;
    gap: 12px;
    border-radius: 20px;
    background: linear-gradient(120deg, rgba(255, 255, 255, .045), transparent 60%), rgba(15, 15, 15, .82);
}

.site-header .site-header__brand { position: static; min-width: 0; margin-right: auto; transform: none; pointer-events: auto; }
.site-header .icon-button--menu { position: static; flex-shrink: 0; transform: none; }
.site-header .brand-logo--header { font-size: 1.5rem; gap: 10px; }
.site-header .brand-logo__avatar { width: 36px; height: 36px; flex: 0 0 36px; }
.site-header .brand-logo__spark { display: none; }
.site-header .site-header__actions { position: static; transform: none; flex: 0 0 auto; gap: 8px; }
.site-header .icon-button { width: 44px; height: 44px; border-radius: 14px; }
.site-header .header-login { width: auto; padding: 0 16px; gap: 8px; font-size: .88rem; font-weight: 700; }
.site-header .header-user-profile { height: 44px; padding: 5px 12px 5px 5px; border-radius: 14px; }
.site-header .header-user-avatar { width: 32px; height: 32px; border-radius: 10px; }
.site-header .header-user-nickname { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-header .badge-count { top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 3px; font-size: .6rem; }
.site-header a:focus-visible,
.site-header button:focus-visible { outline: 2px solid var(--chd-ink); outline-offset: 4px; }

@media (max-width: 680px) {
    .site-header .site-header__inner { min-height: 64px; padding: 9px; gap: 8px; }
    .site-header .brand-logo--header { font-size: clamp(.95rem, 4.5vw, 1.2rem); }
    .site-header .brand-logo__avatar { display: none; }
    .site-header .site-header__actions { gap: 5px; }
    .site-header .header-login { width: 44px; padding: 0; }
    .site-header .header-login span,
    .site-header .header-user-nickname { display: none; }
    .site-header .header-user-profile { width: 44px; padding: 5px; }
}

.icon-button,
.header-link-pill,
.header-user-profile {
    border-color: var(--chd-edge);
    background: rgba(255, 255, 255, .055);
    box-shadow: inset 0 1px rgba(255, 255, 255, .11);
}

.icon-button--accent {
    border-color: rgba(255, 255, 255, .52);
    background: var(--chd-ink);
    color: #131313;
    box-shadow: 0 10px 28px rgba(255, 255, 255, .10);
}

.hero-card {
    min-height: 540px;
    background:
        radial-gradient(ellipse 48% 70% at 86% 44%, rgba(255, 255, 255, .11), transparent 70%),
        linear-gradient(130deg, rgba(255, 255, 255, .08), transparent 38%),
        rgba(14, 14, 14, .68);
}

.hero-card__layout { gap: clamp(20px, 3vw, 46px); }
.hero-card__intro { align-self: center; }
.hero-card__title {
    max-width: 12ch;
    font-size: clamp(3rem, 4.5vw, 5.5rem);
    line-height: .96;
    letter-spacing: -.072em;
    text-wrap: balance;
}

.hero-card__description { max-width: 37rem; color: var(--chd-muted); font-size: clamp(1rem, 1.1vw, 1.16rem); line-height: 1.65; }
.hero-card__visual {
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: var(--chd-radius-xl);
    background:
        radial-gradient(circle at 52% 45%, rgba(255, 255, 255, .13), transparent 25%),
        radial-gradient(circle at 50% 120%, rgba(255, 255, 255, .10), transparent 56%),
        rgba(255, 255, 255, .025);
    box-shadow: inset 0 1px rgba(255, 255, 255, .11), 0 20px 52px rgba(0, 0, 0, .26);
}

.hero-globe-scene__aura { background: radial-gradient(circle, rgba(255, 255, 255, .17), transparent 66%); }
.hero-globe-scene__flare { background: rgba(255, 255, 255, .76); box-shadow: 0 0 18px rgba(255, 255, 255, .45); }

.stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.stats-card {
    min-height: 88px;
    padding: 16px 18px;
    border-color: rgba(255, 255, 255, .11);
    border-radius: var(--chd-radius-md);
    background: rgba(255, 255, 255, .05);
    box-shadow: inset 0 1px rgba(255, 255, 255, .10);
}
.stats-card__icon { width: 34px; height: 34px; flex-basis: 34px; color: var(--chd-dim); }
.stats-card__copy { gap: 2px; }
.stats-card__copy strong { font-size: 1.28rem; letter-spacing: -.05em; white-space: nowrap; }
.stats-card__copy span { color: var(--chd-muted); font-size: .82rem; white-space: nowrap; }

.services-section { padding: clamp(22px, 3vw, 34px); background: rgba(15, 15, 15, .58); }
.section-heading { align-items: end; }
.section-heading h2 { font-size: clamp(1.65rem, 2.4vw, 2.35rem); letter-spacing: -.055em; }
.section-link { color: var(--chd-muted); }

.service-card {
    border-color: rgba(255, 255, 255, .11);
    border-radius: var(--chd-radius-lg);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .075), transparent 44%),
        rgba(255, 255, 255, .025);
    box-shadow: inset 0 1px rgba(255, 255, 255, .11), 0 10px 32px rgba(0, 0, 0, .14);
}
.service-card__icon-wrap,
.sidebar-service-card__icon,
.sidebar-premium-card__icon {
    border-color: rgba(255, 255, 255, .13);
    background: rgba(255, 255, 255, .065);
    box-shadow: inset 0 1px rgba(255, 255, 255, .12);
}
.service-card__icon-wrap.service-card__icon-wrap--asset,
.sidebar-service-card__icon.sidebar-service-card__icon--asset,
.sidebar-premium-card__icon.sidebar-premium-card__icon--asset {
    border: 0;
    background: transparent;
    box-shadow: none;
}
.service-card__title-row h3 { letter-spacing: -.045em; }
.service-card__copy p,
.sidebar-service-card__copy span { color: var(--chd-muted); }
.inline-badge,
.service-chip {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .065);
    color: var(--chd-muted);
}
.service-card__features li { color: var(--chd-muted); }
.service-card__features .icon { color: var(--chd-ink); }
.service-card__button,
.sidebar-auth-button {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .075);
    box-shadow: inset 0 1px rgba(255, 255, 255, .12);
}

.sidebar__card {
    background: rgba(15, 15, 15, .64);
    border-radius: var(--chd-radius-xl);
}
.sidebar-service-card {
    border-color: transparent;
    border-radius: var(--chd-radius-md);
    background: transparent;
}
.sidebar-premium-card {
    border-color: rgba(255, 255, 255, .16);
    background: linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .025));
}
.social-link { border-color: rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .04); }

.auth-spotlight,
.auth-form-card,
.profile-card,
.email-verify-modal__card { background: rgba(17, 17, 17, .72); }
.auth-spotlight h1,
.auth-form-card h1,
.profile-card h1 { letter-spacing: -.06em; }
.auth-service-preview__item { border-color: rgba(255, 255, 255, .10); background: rgba(255, 255, 255, .04); }
.auth-field input,
.profile-field input,
.email-verify-modal__row input {
    border-color: rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .055);
    color: var(--chd-ink);
}
.auth-field input:focus,
.profile-field input:focus,
.email-verify-modal__row input:focus { border-color: rgba(255, 255, 255, .55); box-shadow: 0 0 0 4px rgba(255, 255, 255, .10); }
.primary-button,
.auth-spotlight__button,
.auth-form-card__button-link,
.email-verify-modal__row .primary-button {
    border: 1px solid rgba(255, 255, 255, .62);
    background: var(--chd-ink);
    color: #151515;
    box-shadow: inset 0 1px rgba(255, 255, 255, .75), 0 12px 28px rgba(0, 0, 0, .22);
}
.text-link { color: var(--chd-muted); }

.bottom-nav-mobile { padding-bottom: max(10px, var(--safe-bottom)); }
.bottom-nav-mobile__inner {
    border-radius: 22px;
    background: rgba(18, 18, 18, .86);
    box-shadow: var(--glow), 0 16px 44px rgba(0, 0, 0, .36);
}
.bottom-nav-mobile__item { color: var(--chd-dim); }
.bottom-nav-mobile__item.is-active { color: var(--chd-ink); background: rgba(255, 255, 255, .09); }

.email-verify-modal__backdrop { background: rgba(0, 0, 0, .68); backdrop-filter: blur(8px); }

.notification-menu { position: relative; }
.notification-popover {
    position: absolute;
    z-index: 40;
    top: calc(100% + 10px);
    right: 0;
    width: min(23rem, calc(100vw - 2rem));
    padding: 14px;
    border: 1px solid var(--chd-edge-strong);
    border-radius: 18px;
    background: rgba(18, 18, 18, .96);
    box-shadow: var(--chd-shadow-hover);
    backdrop-filter: blur(24px) saturate(130%);
}
.notification-popover[hidden] { display: none; }
.notification-popover__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 4px 4px 10px; }
.notification-popover__head .section-eyebrow { margin: 0 0 3px; font-size: .62rem; }
.notification-popover__head h2 { margin: 0; color: var(--chd-ink); font-size: 1.05rem; letter-spacing: -.04em; }
.notification-popover__close { width: 36px; height: 36px; border-radius: 11px; }
.notification-popover__list { display: grid; gap: 6px; max-height: min(28rem, calc(100vh - 9rem)); overflow-y: auto; }
.notification-item { display: grid; gap: 4px; padding: 12px; border: 1px solid transparent; border-radius: 13px; color: var(--chd-muted); }
.notification-item:hover,
.notification-item:focus-visible { border-color: var(--chd-edge); background: rgba(255, 255, 255, .07); outline: none; }
.notification-item__eyebrow { color: var(--chd-dim); font-size: .62rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.notification-item strong { color: var(--chd-ink); font-size: .84rem; line-height: 1.3; }
.notification-item > span:last-child { color: var(--chd-muted); font-size: .74rem; line-height: 1.45; }

.hub-profile__form-actions { display: flex; grid-column: 2; gap: 10px; align-items: center; }
.hub-profile__form-actions .hub-button { flex: 1 1 0; min-height: 44px; }
.hub-profile__form-actions [data-profile-cancel]:disabled { cursor: default; opacity: .42; }
.hub-profile__vpn-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; max-width: 62rem; }
.hub-profile__vpn-mark { display: grid; width: 76px; height: 76px; place-items: center; border: 1px solid var(--chd-edge); border-radius: 20px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 1px rgba(255, 255, 255, .12); }
.hub-profile__vpn-mark img { width: 64px; height: 64px; border-radius: 17px; object-fit: cover; }
.hub-profile__vpn-copy h2 { margin: 0; color: var(--chd-ink); font-size: clamp(1.55rem, 3vw, 2.35rem); letter-spacing: -.06em; }
.hub-profile__vpn-copy > p:not(.hub-eyebrow) { max-width: 42rem; margin: 10px 0 0; color: var(--chd-muted); line-height: 1.55; }
.hub-profile__vpn-facts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.hub-profile__vpn-facts span { padding: 7px 9px; border: 1px solid var(--chd-edge); border-radius: 9px; background: rgba(255, 255, 255, .045); color: var(--chd-muted); font-size: .72rem; }
.hub-profile__vpn-facts strong { color: var(--chd-ink); }
.hub-profile__vpn-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.hub-profile__vpn-actions .hub-button { min-height: 44px; }

@media (min-width: 1081px) {
    .sidebar__card { min-height: 0; }
    .confahub-body.page-profile .site-shell {
        display: flex;
        max-width: var(--container);
        margin: 0 auto;
        padding: 20px;
    }
    .confahub-body.page-profile .site-main { flex: 1 1 auto; min-width: 0; }
}

@media (hover: hover) {
    .icon-button:hover,
    .header-link-pill:hover,
    .header-user-profile:hover,
    .social-link:hover { border-color: var(--chd-edge-strong); background: rgba(255, 255, 255, .10); }
    .icon-button--accent:hover,
    .primary-button:hover,
    .auth-spotlight__button:hover,
    .auth-form-card__button-link:hover { transform: translateY(-1px); background: #fff; }
    .service-card:hover,
    .stats-card--link:hover,
    .sidebar-service-card:hover {
        border-color: rgba(255, 255, 255, .30);
        background-color: rgba(255, 255, 255, .075);
        box-shadow: inset 0 1px rgba(255, 255, 255, .15), var(--chd-shadow-hover);
    }
    .service-card__button:hover,
    .sidebar-auth-button:hover { border-color: rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .12); }
}

@media (max-width: 900px) {
    .site-shell { padding: 12px; gap: 14px; }
    .main-content { gap: 14px; }
    .site-header__inner { min-height: 60px; border-radius: 18px; }
    .hero-card { min-height: 0; }
    .hero-card__title { font-size: clamp(2.55rem, 12vw, 4rem); }
    .hero-card__visual { border-radius: 22px; }
    .services-section { padding: 20px 15px 16px; }
    .service-card { border-radius: 18px; }
    .sidebar__card { border-radius: 0 24px 24px 0; background: rgba(13, 13, 13, .92); }
}

@media (max-width: 480px) {
    .section-eyebrow { font-size: .65rem; }
    .hero-card__description { font-size: .98rem; line-height: 1.58; }
    .stats-card__copy strong { font-size: 1.22rem; }
    .notification-popover { right: -8px; }
}

@media (max-width: 360px) {
    .site-header__brand { left: 85px; right: 85px; }
    .brand-logo--header { font-size: 1.08rem; }
}

@media (max-width: 560px) {
    .hero-card__layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "visual" "stats"; }
    .hero-card__title { max-width: none; }
    .stats-grid { grid-template-columns: minmax(0, 1fr); }
    .stats-card { min-height: 74px; padding: 14px 16px; }
    .hub-profile__form-actions,
    .hub-profile__vpn-actions { align-items: stretch; flex-direction: column; }
    .hub-profile__form-actions { grid-column: auto; }
    .hub-profile__vpn-card { grid-template-columns: 1fr; }
    .hub-profile__vpn-mark { width: 64px; height: 64px; }
    .hub-profile__vpn-mark img { width: 54px; height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
    .icon-button--accent:hover,
    .primary-button:hover,
    .auth-spotlight__button:hover,
    .auth-form-card__button-link:hover { transform: none; }
}

@media (max-width: 680px) {
    .notification-popover {
        position: fixed;
        top: 112px;
        right: max(8px, var(--safe-right));
        left: auto;
        width: min(23rem, calc(100vw - 16px));
    }
}

/* Auth pages use the same black / graphite ConfaHub surface as the cabinet.
   This scoped override wins over the legacy blue home skin without touching
   the public landing page. */
.confahub-body.page-login,
.confahub-body.page-register {
    --hub-ink: #f2f2ed;
    --hub-muted: rgba(242, 242, 237, .68);
    --hub-faint: rgba(242, 242, 237, .44);
    --hub-line: rgba(255, 255, 255, .14);
    --hub-line-strong: rgba(255, 255, 255, .30);
    --hub-blue: #d8d9d2;
    color: var(--hub-ink);
    background: radial-gradient(circle at 78% 8%, rgba(218, 220, 211, .10), transparent 30rem), #070707;
}
.confahub-body.page-login .site-ambience,
.confahub-body.page-register .site-ambience { opacity: .32; }
.confahub-body.page-login .site-ambience__glow,
.confahub-body.page-register .site-ambience__glow { background: radial-gradient(circle, rgba(220, 222, 214, .18), transparent 68%); }
.confahub-body.page-login .hub-header,
.confahub-body.page-register .hub-header { background: linear-gradient(to bottom, rgba(7, 7, 7, .96), rgba(7, 7, 7, .58), transparent); }
.confahub-body.page-login .hub-header__inner,
.confahub-body.page-register .hub-header__inner { border-color: var(--hub-line); background: rgba(16, 16, 15, .82); box-shadow: 0 14px 36px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .05); }
.confahub-body.page-login .identity-auth,
.confahub-body.page-register .identity-auth { min-height: calc(100vh - 8rem); }
.confahub-body.page-login .identity-auth h1,
.confahub-body.page-register .identity-auth h1,
.confahub-body.page-login .identity-auth h2,
.confahub-body.page-register .identity-auth h2 { color: var(--hub-ink); }
.confahub-body.page-login .identity-auth__card,
.confahub-body.page-register .identity-auth__card { border-color: var(--hub-line); background: rgba(18, 18, 17, .84); box-shadow: 0 22px 60px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .06); }
.confahub-body.page-login .identity-auth__services span,
.confahub-body.page-register .identity-auth__services span,
.confahub-body.page-login .identity-auth__google,
.confahub-body.page-register .identity-auth__google { border-color: var(--hub-line); background: rgba(255, 255, 255, .035); color: var(--hub-muted); }
.confahub-body.page-login .identity-auth__card .auth-field,
.confahub-body.page-register .identity-auth__card .auth-field { color: var(--hub-muted); }
.confahub-body.page-login .identity-auth__card .auth-field input,
.confahub-body.page-register .identity-auth__card .auth-field input { border-color: var(--hub-line); background: rgba(255, 255, 255, .055); color: var(--hub-ink); }
.confahub-body.page-login .identity-auth__card .auth-field input::placeholder,
.confahub-body.page-register .identity-auth__card .auth-field input::placeholder { color: var(--hub-faint); }
.confahub-body.page-login .identity-auth__card .auth-field input:focus,
.confahub-body.page-register .identity-auth__card .auth-field input:focus { border-color: var(--hub-line-strong); box-shadow: 0 0 0 4px rgba(255, 255, 255, .08); }
.confahub-body.page-login .identity-auth__google > span:first-child,
.confahub-body.page-register .identity-auth__google > span:first-child { color: #171717; }
.confahub-body.page-login .identity-auth__switch a,
.confahub-body.page-register .identity-auth__switch a { color: var(--hub-ink); }
.confahub-body.page-login .hub-button--primary,
.confahub-body.page-register .hub-button--primary { border-color: rgba(255, 255, 255, .62); background: linear-gradient(145deg, #f0f0e9, #bfc1ba); color: #111; box-shadow: 0 12px 28px rgba(218, 220, 211, .12); }
.confahub-body.page-login .hub-button--quiet,
.confahub-body.page-register .hub-button--quiet { border-color: var(--hub-line); background: rgba(255, 255, 255, .045); }
.confahub-body.page-login .form-notice,
.confahub-body.page-register .form-notice { border-color: rgba(220, 222, 214, .20); background: rgba(220, 222, 214, .08); color: var(--hub-ink); }

@view-transition { navigation: auto; }

@media (max-width: 1080px) {
    .bottom-nav-mobile { view-transition-name: mobile-navigation; }
    .bottom-nav-mobile__item { position: relative; }
    .is-nav-loading .bottom-nav-mobile__item.is-active::after {
        content: "";
        position: absolute;
        bottom: 4px;
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        animation: nav-loading 650ms ease-in-out infinite alternate;
    }
}

@keyframes nav-loading {
    from { opacity: .3; transform: scaleX(.45); }
    to { opacity: 1; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .is-nav-loading .bottom-nav-mobile__item.is-active::after { animation: none; }
    ::view-transition-old(root), ::view-transition-new(root),
    ::view-transition-old(mobile-navigation), ::view-transition-new(mobile-navigation) { animation-duration: .01ms !important; }
}