/* PulseYL 2026 visual system */
:root {
    --hg-primary: #5b4cf0;
    --hg-primary-strong: #4938d6;
    --hg-primary-soft: #eeecff;
    --hg-cyan: #1e9db1;
    --hg-coral: #ee6c5b;
    --hg-ink: #172033;
    --hg-muted: #667085;
    --hg-bg: #f7f8fc;
    --hg-surface: #ffffff;
    --hg-surface-2: #f1f3f9;
    --hg-border: #e5e8f0;
    --hg-shadow: 0 18px 50px rgba(26, 32, 56, .09);
    --hg-shadow-sm: 0 8px 24px rgba(26, 32, 56, .07);
    --hg-radius: 22px;
    --hg-radius-sm: 14px;
    --hg-header: rgba(255, 255, 255, .9);
}

body.dark {
    --hg-primary: #8c7eff;
    --hg-primary-strong: #a69cff;
    --hg-primary-soft: rgba(123, 104, 255, .15);
    --hg-cyan: #55c2d2;
    --hg-coral: #ff8a7a;
    --hg-ink: #f4f5fb;
    --hg-muted: #a7afc0;
    --hg-bg: #10131b;
    --hg-surface: #191d28;
    --hg-surface-2: #222735;
    --hg-border: #303647;
    --hg-shadow: 0 18px 60px rgba(0, 0, 0, .26);
    --hg-shadow-sm: 0 8px 30px rgba(0, 0, 0, .2);
    --hg-header: rgba(16, 19, 27, .9);
}

html {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    scroll-padding-top: 92px;
}

body,
body.dark {
    max-width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-x: clip;
    color: var(--hg-ink);
    background: var(--hg-bg);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.65;
    transition: background-color .25s ease, color .25s ease;
}

body > main { min-height: 65vh; }
h1, h2, h3, h4, h5, h6 { color: var(--hg-ink); letter-spacing: -.025em; }
a { color: var(--hg-primary); }
a:hover { color: var(--hg-primary-strong); }
.text-secondary, .text-muted { color: var(--hg-muted) !important; }
.container { max-width: 1320px; }

.skip-link {
    position: fixed;
    left: 16px;
    top: -60px;
    z-index: 1100;
    border-radius: 10px;
    padding: 10px 16px;
    color: #fff;
    background: var(--hg-primary);
    transition: top .2s;
}
.skip-link:focus { top: 12px; color: #fff; }

/* Navigation */
.site-navbar {
    min-height: 76px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(130, 138, 160, .14);
    background: var(--hg-header);
    box-shadow: 0 6px 28px rgba(23, 32, 51, .045);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
.site-navbar .navbar-brand { display: flex; align-items: center; margin-right: 28px; }
.site-navbar .navbar-brand img { width: 102px; height: auto; filter: brightness(.48); }
.dark .site-navbar .navbar-brand img,
.site-nav { align-items: center; gap: 3px; }
.site-navbar .navbar-collapse,
.site-nav { min-width: 0; }
.site-navbar .nav-link {
    position: relative;
    display: flex;
    gap: 7px;
    align-items: center;
    padding: 9px 11px !important;
    border-radius: 10px;
    color: var(--hg-muted) !important;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.site-navbar .nav-link:hover { color: var(--hg-ink) !important; background: var(--hg-surface-2); }
.site-navbar .nav-link.active { color: var(--hg-primary) !important; background: var(--hg-primary-soft); }
.site-navbar .nav-link i { font-size: 15px; }
.site-navbar .dropdown-menu {
    min-width: 230px;
    margin-top: 10px;
    padding: 8px;
    border: 1px solid var(--hg-border);
    border-radius: 14px;
    background: var(--hg-surface);
    box-shadow: var(--hg-shadow);
}
.site-navbar .dropdown-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 9px 11px;
    border-radius: 9px;
    color: var(--hg-ink);
    font-size: 14px;
}
.site-navbar .dropdown-item > i {
    width: 20px;
    flex: 0 0 20px;
    margin: 0;
    color: var(--hg-muted);
    font-size: 16px;
    text-align: center;
}
.site-navbar .dropdown-item:hover > i { color: var(--hg-primary); }
.site-navbar .dropdown-item:hover { color: var(--hg-primary); background: var(--hg-primary-soft); }
.site-navbar .dropdown-header { margin: 0; padding: 7px 11px 5px; color: var(--hg-muted); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.site-navbar .dropdown-divider { border-color: var(--hg-border); }
.site-more-menu { width: min(310px, calc(100vw - 32px)); max-height: calc(100vh - 105px); overflow-y: auto; }
.site-more-menu button.dropdown-item { width: 100%; border: 0; background: transparent; text-align: left; }
.site-more-menu button.dropdown-item:hover { color: var(--hg-primary); background: var(--hg-primary-soft); }
.navbar-tools { gap: 10px; }
.user-nav .dropdown-item button { font: inherit; }
.notification-slot,
.mobile-more-trigger {
    position: relative;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    border: 1px solid var(--hg-border);
    border-radius: 12px;
    color: var(--hg-muted);
    background: var(--hg-surface-2);
    font-size: 17px;
}
.notification-slot { cursor: pointer; transition: color .18s ease, border-color .18s ease, background-color .18s ease; }
.notification-slot:hover,
.notification-slot[aria-expanded="true"] { border-color: color-mix(in srgb, var(--hg-primary) 45%, var(--hg-border)); color: var(--hg-primary); background: var(--hg-primary-soft); }
.notification-slot:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(91, 76, 240, .18); }
.notification-unread-badge {
    position: absolute;
    top: -6px;
    right: -7px;
}
.notification-unread-badge__value {
    display: grid;
    min-width: 19px;
    min-height: 19px;
    place-items: center;
    padding: 0 4px;
    border: 2px solid var(--hg-surface);
    border-radius: 999px;
    color: #fff;
    background: #e34d67;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}
.notification-center-panel {
    position: fixed;
    z-index: 1090;
    top: 70px;
    right: max(20px, calc((100vw - 1320px) / 2));
    width: min(420px, calc(100vw - 32px));
    overflow: hidden;
    border: 1px solid var(--hg-border);
    border-radius: 20px;
    color: var(--hg-ink);
    background: var(--hg-surface);
    box-shadow: 0 24px 70px rgba(20, 24, 45, .2);
}
.notification-center-panel[hidden] { display: none; }
.notification-center-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 14px; border-bottom: 1px solid var(--hg-border); }
.notification-center-panel__header span { color: var(--hg-primary); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.notification-center-panel__header h2 { margin: 2px 0 0; color: var(--hg-ink); font-size: 21px; }
.notification-center-panel__actions { display: flex; gap: 8px; align-items: center; }
.notification-center-panel__actions > button { border: 0; color: var(--hg-primary); background: transparent; font-size: 12px; font-weight: 700; }
.notification-center-panel__actions > .notification-center-panel__close { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: var(--hg-muted); background: var(--hg-surface-2); font-size: 14px; }
.notification-push-control { display: flex; gap: 11px; align-items: center; color: var(--hg-ink); background: var(--hg-surface); }
.notification-push-control[hidden] { display: none; }
.notification-push-control--panel { padding: 11px 15px; border-bottom: 1px solid var(--hg-border); background: color-mix(in srgb, var(--hg-primary-soft) 42%, var(--hg-surface)); }
.notification-push-control--page { margin-bottom: 18px; padding: 17px 18px; border: 1px solid var(--hg-border); border-radius: 16px; box-shadow: var(--hg-shadow-sm); }
.notification-push-control__icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 11px; color: var(--hg-primary); background: var(--hg-primary-soft); }
.notification-push-control__copy { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.notification-push-control__copy strong { color: var(--hg-ink); font-size: 13px; }
.notification-push-control__copy small { color: var(--hg-muted); font-size: 10px; line-height: 1.35; }
.notification-push-control--panel > button { flex: 0 0 auto; padding: 6px 9px; border: 0; border-radius: 9px; color: #fff; background: var(--hg-primary); font-size: 10px; font-weight: 800; }
.notification-push-control--panel > button.is-disable { color: var(--hg-muted); background: var(--hg-surface-2); }
.notification-push-control button:disabled { cursor: wait; opacity: .62; }
.push-permission-gate {
    position: fixed;
    z-index: 2100;
    inset: 0;
    display: grid;
    overflow-y: auto;
    padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
    background: rgba(16, 18, 39, .68);
    backdrop-filter: blur(10px);
    place-items: center;
}
.push-permission-gate[hidden] { display: none; }
body.has-push-permission-gate { overflow: hidden; }
.push-permission-gate__dialog {
    display: flex;
    width: min(440px, 100%);
    flex-direction: column;
    align-items: center;
    padding: 34px 30px 28px;
    border: 1px solid color-mix(in srgb, var(--hg-primary) 18%, var(--hg-border));
    border-radius: 24px;
    color: var(--hg-ink);
    background: var(--hg-surface);
    box-shadow: 0 30px 90px rgba(10, 12, 30, .34);
    text-align: center;
}
.push-permission-gate__icon {
    display: grid;
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(145deg, var(--hg-primary), var(--hg-primary-strong));
    box-shadow: 0 14px 32px color-mix(in srgb, var(--hg-primary) 34%, transparent);
    font-size: 25px;
    place-items: center;
}
.push-permission-gate__eyebrow { color: var(--hg-primary); font-size: 10px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.push-permission-gate__dialog h2 { margin: 7px 0 10px; color: var(--hg-ink); font-size: clamp(24px, 5vw, 31px); letter-spacing: -.025em; }
.push-permission-gate__dialog p { max-width: 350px; margin: 0 0 22px; color: var(--hg-muted); font-size: 14px; line-height: 1.6; }
.push-permission-gate__dialog button { min-width: 210px; min-height: 46px; border-radius: 13px; font-weight: 800; }
.push-permission-gate__dialog button:disabled { cursor: wait; opacity: .7; }
.push-permission-gate__dialog small { margin-top: 12px; color: var(--hg-muted); font-size: 10px; line-height: 1.4; }
.notification-center-panel__list { max-height: min(540px, calc(100vh - 180px)); overflow-y: auto; }
.notification-item { position: relative; border-bottom: 1px solid var(--hg-border); background: var(--hg-surface); }
.notification-item.is-unread { background: color-mix(in srgb, var(--hg-primary-soft) 62%, var(--hg-surface)); }
.notification-item__open { margin: 0; }
.notification-item__open > button { display: flex; width: 100%; gap: 12px; align-items: flex-start; padding: 15px 82px 15px 16px; border: 0; color: inherit; background: transparent; text-align: left; }
.notification-item__open > button:hover { background: color-mix(in srgb, var(--hg-surface-2) 65%, transparent); }
.notification-item__icon,
.notification-history-item__icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 12px; color: var(--hg-primary); background: var(--hg-primary-soft); }
.notification-item__copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.notification-item__copy strong { color: var(--hg-ink); font-size: 14px; line-height: 1.35; }
.notification-item__copy > span { display: -webkit-box; overflow: hidden; color: var(--hg-muted); font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.notification-item__copy time { color: var(--hg-muted); font-size: 10px; }
.notification-item__chevron { align-self: center; color: var(--hg-muted); font-size: 11px; }
.notification-item__actions { position: absolute; top: 11px; right: 10px; display: flex; gap: 1px; align-items: center; }
.notification-item__read,
.notification-item__delete { display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 50%; color: var(--hg-muted); background: transparent; font-size: 12px; }
.notification-item__read span { width: 9px; height: 9px; border-radius: 50%; background: var(--hg-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hg-primary) 14%, transparent); }
.notification-item__read:hover { background: var(--hg-surface-2); }
.notification-item__delete:hover { color: #d64555; background: rgba(214, 69, 85, .1); }
.notification-center-panel__empty { display: flex; min-height: 220px; flex-direction: column; gap: 7px; align-items: center; justify-content: center; padding: 30px; color: var(--hg-muted); text-align: center; }
.notification-center-panel__empty i { margin-bottom: 5px; color: var(--hg-primary); font-size: 30px; }
.notification-center-panel__empty strong { color: var(--hg-ink); }
.notification-center-panel__empty span { font-size: 12px; }
.notification-center-panel__footer { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 13px; color: var(--hg-primary); background: var(--hg-surface-2); font-size: 13px; font-weight: 750; }
.notification-center-panel__footer:hover { color: var(--hg-primary-strong); }
.mobile-more-trigger { display: none; cursor: pointer; }
.theme-toggle { position: relative; display: inline-flex; }
.theme-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
.theme-toggle-control {
    position: relative;
    display: grid;
    width: 72px;
    height: 38px;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 4px;
    border: 1px solid var(--hg-border);
    border-radius: 999px;
    background: var(--hg-surface-2);
    cursor: pointer;
    isolation: isolate;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.theme-toggle-control:hover { border-color: color-mix(in srgb, var(--hg-primary) 45%, var(--hg-border)); }
.theme-toggle-input:focus-visible + .theme-toggle-control { box-shadow: 0 0 0 4px rgba(91, 76, 240, .18); }
.theme-toggle-icon {
    position: relative;
    z-index: 2;
    display: grid;
    height: 28px;
    place-items: center;
    color: var(--hg-muted);
    font-size: 14px;
    transition: color .22s ease, transform .22s ease;
}
.theme-toggle-thumb {
    position: absolute;
    z-index: 1;
    top: 4px;
    left: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--hg-surface);
    box-shadow: 0 3px 10px rgba(24, 31, 50, .16);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), background-color .2s ease;
}
.theme-toggle-input:not(:checked) + .theme-toggle-control .theme-toggle-sun { color: #e49b24; transform: rotate(8deg); }
.theme-toggle-input:checked + .theme-toggle-control .theme-toggle-thumb { transform: translateX(34px); background: var(--hg-primary); }
.theme-toggle-input:checked + .theme-toggle-control .theme-toggle-moon { color: #fff; transform: rotate(-8deg); }
.user-menu { padding: 4px 7px !important; }
.user-menu .user-name { white-space: nowrap; }
.user-avatar {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, var(--hg-primary), #8a7cf8);
    font-size: 14px;
    font-weight: 700;
}

/* Shared UI */
.btn {
    border-radius: 11px;
    font-weight: 650;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { border-color: var(--hg-primary); background: var(--hg-primary); box-shadow: 0 8px 20px rgba(91, 76, 240, .2); }
.btn-primary:hover, .btn-primary:focus { border-color: var(--hg-primary-strong); background: var(--hg-primary-strong); }
.btn-outline-primary { border-color: var(--hg-primary); color: var(--hg-primary); }
.btn-outline-primary:hover { border-color: var(--hg-primary); background: var(--hg-primary); }
.btn-outline-secondary { border-color: var(--hg-border); color: var(--hg-ink); background: transparent; }
.btn-outline-secondary:hover { border-color: var(--hg-primary); color: var(--hg-primary); background: var(--hg-primary-soft); }
.btn-soft { border: 1px solid var(--hg-border); color: var(--hg-ink); background: var(--hg-surface); }
.btn-soft:hover { border-color: var(--hg-primary); color: var(--hg-primary); background: var(--hg-primary-soft); }
.btn-lg { padding: .83rem 1.25rem; font-size: 15px; }

.card,
.alert,
.border,
.list-group-item {
    border-color: var(--hg-border) !important;
}
.card {
    border-radius: var(--hg-radius-sm);
    color: var(--hg-ink);
    background: var(--hg-surface);
    box-shadow: var(--hg-shadow-sm);
}
.dark .card.bg-dark { background: var(--hg-surface) !important; }
.dark .card.text-white { color: var(--hg-ink) !important; }
.card-header, .card-footer { border-color: var(--hg-border); background: var(--hg-surface-2); }
.card-footer:last-child { border-radius: 0 0 var(--hg-radius-sm) var(--hg-radius-sm); }
.alert-light { color: var(--hg-ink); background: var(--hg-surface); }
.badge { padding: .42em .65em; border-radius: 7px; }
.bg-secondary, .text-bg-light { color: var(--hg-muted) !important; border-color: var(--hg-border) !important; background: var(--hg-surface-2) !important; }
.nav-pills { gap: 7px; }
.nav-pills .nav-link { border: 1px solid var(--hg-border); border-radius: 10px; color: var(--hg-muted); background: var(--hg-surface); font-size: 14px; font-weight: 600; }
.nav-pills .nav-link:hover { border-color: var(--hg-primary); color: var(--hg-primary); }
.nav-pills .nav-link.active { border-color: var(--hg-primary); color: #fff; background: var(--hg-primary); }
.games-empty-state {
    max-width: 590px;
    margin: 34px auto 0;
    padding: 44px 28px;
    border: 1px solid var(--hg-border);
    border-radius: 22px;
    color: var(--hg-ink);
    background: var(--hg-surface);
    box-shadow: var(--hg-shadow-sm);
    text-align: center;
}
.games-empty-state > span { display: grid; width: 62px; height: 62px; margin: 0 auto 18px; place-items: center; border-radius: 18px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 25px; }
.games-empty-state h3 { margin-bottom: 8px; color: var(--hg-ink); font-size: 22px; }
.games-empty-state p { max-width: 420px; margin: 0 auto 22px; color: var(--hg-muted); font-size: 14px; line-height: 1.65; }
.form-control, .form-select, .input-group-text {
    min-height: 44px;
    border-color: var(--hg-border);
    border-radius: 10px;
    color: var(--hg-ink);
    background-color: var(--hg-surface);
}
.form-control:focus, .form-select:focus { border-color: var(--hg-primary); color: var(--hg-ink); background: var(--hg-surface); box-shadow: 0 0 0 4px rgba(91, 76, 240, .12); }
.dark .form-control:disabled, .dark .form-control[readonly] { color: var(--hg-muted); background: var(--hg-surface-2); }
.form-check-input:checked { border-color: var(--hg-primary); background-color: var(--hg-primary); }
.progress { border-radius: 20px; background: var(--hg-surface-2); }
.table { color: var(--hg-ink); }
.table > :not(caption) > * > * { border-color: var(--hg-border); }
.modal-content { border: 1px solid var(--hg-border); border-radius: var(--hg-radius); color: var(--hg-ink); background: var(--hg-surface); }
.accordion-item { border-color: var(--hg-border); color: var(--hg-ink); background: var(--hg-surface); }
.accordion-button { color: var(--hg-ink); background: var(--hg-surface); }

/* Home */
.home-hero {
    position: relative;
    overflow: hidden;
    padding: 150px 0 84px;
    background:
        radial-gradient(circle at 8% 15%, rgba(91, 76, 240, .13), transparent 27%),
        radial-gradient(circle at 92% 5%, rgba(30, 157, 177, .12), transparent 25%),
        var(--hg-bg);
}
.home-hero::after {
    content: "";
    position: absolute;
    right: -100px;
    bottom: -200px;
    width: 480px;
    height: 480px;
    border: 1px solid rgba(91, 76, 240, .09);
    border-radius: 50%;
    box-shadow: 0 0 0 70px rgba(91, 76, 240, .025), 0 0 0 140px rgba(91, 76, 240, .018);
}
.home-hero .container { position: relative; z-index: 1; }
.eyebrow, .page-eyebrow {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    margin-bottom: 14px;
    color: var(--hg-primary);
    font-size: 13px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.hero-copy h1 { max-width: 760px; margin-bottom: 22px; font-size: clamp(42px, 5.3vw, 72px); font-weight: 800; line-height: 1.04; }
.hero-copy h1 span { color: var(--hg-primary); }
.hero-lead { max-width: 680px; margin-bottom: 30px; color: var(--hg-muted); font-size: 19px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { display: flex; gap: 13px; align-items: flex-start; max-width: 660px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--hg-border); }
.hero-note-icon { display: grid; min-width: 35px; height: 35px; place-items: center; border-radius: 10px; color: var(--hg-primary); background: var(--hg-primary-soft); }
.hero-note p { margin: 0; color: var(--hg-muted); font-size: 13px; line-height: 1.55; }
.hero-note strong { color: var(--hg-ink); }
.hero-panel { padding: 28px; border: 1px solid var(--hg-border); border-radius: 28px; background: color-mix(in srgb, var(--hg-surface) 92%, transparent); box-shadow: var(--hg-shadow); }
.hero-panel-label { margin-bottom: 5px; color: var(--hg-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hero-panel h2 { margin-bottom: 18px; font-size: 25px; }
.quick-links { display: grid; gap: 9px; }
.quick-links > a { display: grid; grid-template-columns: 48px 1fr auto; gap: 13px; align-items: center; padding: 13px; border: 1px solid transparent; border-radius: 15px; color: var(--hg-ink); }
.quick-links > a:hover { border-color: var(--hg-border); color: var(--hg-ink); background: var(--hg-surface-2); transform: translateX(3px); }
.quick-links strong, .quick-links small { display: block; }
.quick-links strong { font-size: 14px; }
.quick-links small { color: var(--hg-muted); font-size: 12px; }
.quick-links > a > .bi { color: var(--hg-muted); }
.quick-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 13px; font-size: 20px; }
.quick-icon.violet { color: var(--hg-primary); background: var(--hg-primary-soft); }
.quick-icon.blue { color: var(--hg-cyan); background: rgba(30, 157, 177, .12); }
.quick-icon.coral { color: var(--hg-coral); background: rgba(238, 108, 91, .12); }

.impact-section { position: relative; z-index: 2; margin-top: -35px; padding: 0 0 76px; background: var(--hg-bg); }
.impact-card { overflow: hidden; border: 1px solid var(--hg-border); border-radius: 24px; background: var(--hg-surface); box-shadow: var(--hg-shadow); }
.impact-heading { display: flex; gap: 16px; align-items: center; padding: 25px 29px 23px; }
.impact-heading .eyebrow { margin: 0 0 3px; }
.impact-heading h2 { margin: 0; font-size: clamp(20px, 2.3vw, 28px); font-weight: 760; }
.impact-pulse { position: relative; display: grid; min-width: 52px; height: 52px; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(135deg, var(--hg-primary), #8172f5); font-size: 21px; }
.impact-pulse::after { content: ""; position: absolute; inset: -6px; border: 1px solid color-mix(in srgb, var(--hg-primary) 25%, transparent); border-radius: 20px; }
.impact-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hg-border); }
.impact-stat { display: grid; min-width: 0; grid-template-columns: 45px 1fr auto; gap: 11px; align-items: center; padding: 21px 20px; color: var(--hg-ink); background: var(--hg-surface); transition: background-color .2s ease; }
.impact-stat + .impact-stat { border-left: 1px solid var(--hg-border); }
a.impact-stat:hover { color: var(--hg-ink); background: var(--hg-surface-2); }
.impact-stat > .bi { color: var(--hg-muted); font-size: 12px; transition: color .2s ease, transform .2s ease; }
a.impact-stat:hover > .bi { color: var(--hg-primary); transform: translate(2px, -2px); }
.impact-stat-icon { display: grid; width: 45px; height: 45px; place-items: center; border-radius: 13px; font-size: 18px; }
.impact-stat-icon.violet { color: var(--hg-primary); background: var(--hg-primary-soft); }
.impact-stat-icon.blue { color: var(--hg-cyan); background: rgba(30, 157, 177, .12); }
.impact-stat-icon.coral { color: var(--hg-coral); background: rgba(238, 108, 91, .12); }
.impact-stat-icon.green { color: #20a875; background: rgba(32, 168, 117, .12); }
.impact-stat-copy { min-width: 0; }
.impact-stat-copy strong, .impact-stat-copy small { display: block; }
.impact-stat-copy strong { color: var(--hg-ink); font-size: 23px; font-weight: 790; line-height: 1; }
.impact-stat-copy small { margin-top: 5px; color: var(--hg-muted); font-size: 11px; line-height: 1.25; }
.impact-stat-copy .impact-start { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; color: #fff; background: var(--hg-primary); font-size: 17px; }
.impact-purpose { background: linear-gradient(135deg, var(--hg-primary-soft), var(--hg-surface)); }

.category-section { padding: 86px 0 96px; background: var(--hg-surface); }
.section-heading { display: flex; gap: 28px; align-items: end; justify-content: space-between; margin-bottom: 34px; }
.section-heading .eyebrow { margin-bottom: 7px; }
.section-heading h2 { margin-bottom: 7px; font-size: clamp(31px, 4vw, 44px); font-weight: 780; }
.section-heading p { margin: 0; color: var(--hg-muted); }
.section-link { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; font-weight: 700; }
.category-card {
    position: relative;
    display: flex;
    min-height: 275px;
    flex-direction: column;
    padding: 27px;
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius);
    color: var(--hg-ink);
    background: var(--hg-bg);
    box-shadow: 0 0 0 transparent;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.category-card:hover { border-color: rgba(91, 76, 240, .35); color: var(--hg-ink); box-shadow: var(--hg-shadow); transform: translateY(-6px); }
.category-icon { display: grid; width: 58px; height: 58px; margin-bottom: 25px; place-items: center; border-radius: 16px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 26px; }
.category-title { display: block; margin-bottom: 8px; font-size: 21px; font-weight: 760; }
.category-description { display: block; color: var(--hg-muted); font-size: 14px; line-height: 1.55; }
.category-meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 21px; color: var(--hg-muted); font-size: 12px; }
.category-card:hover .category-meta > .bi { color: var(--hg-primary); transform: translate(2px, -2px); }

.community-pulse-section { padding: 94px 0 88px; background: var(--hg-bg); }
.community-pulse-heading { display: flex; gap: 30px; align-items: end; justify-content: space-between; margin-bottom: 32px; }
.community-pulse-heading .eyebrow { margin-bottom: 7px; }
.community-pulse-heading h2 { max-width: 760px; margin-bottom: 8px; font-size: clamp(32px, 4vw, 46px); font-weight: 790; }
.community-pulse-heading p { margin: 0; color: var(--hg-muted); }
.community-live { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 7px; padding: 8px 11px; border: 1px solid var(--hg-border); border-radius: 999px; color: var(--hg-muted); background: var(--hg-surface); font-size: 11px; white-space: nowrap; }
.community-live > span { width: 7px; height: 7px; border-radius: 50%; background: #20a875; box-shadow: 0 0 0 4px rgba(32, 168, 117, .12); }
.community-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.community-metric {
    position: relative;
    display: flex;
    min-height: 260px;
    overflow: hidden;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--hg-border);
    border-radius: 20px;
    color: var(--hg-ink);
    background: var(--hg-surface);
    box-shadow: 0 7px 24px rgba(26, 32, 56, .045);
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.community-metric::after { content: ""; position: absolute; right: -45px; bottom: -55px; width: 150px; height: 150px; border: 1px solid currentColor; border-radius: 50%; opacity: .07; box-shadow: 0 0 0 28px currentColor; }
a.community-metric:hover { border-color: color-mix(in srgb, currentColor 28%, var(--hg-border)); color: var(--hg-ink); box-shadow: var(--hg-shadow); transform: translateY(-4px); }
.community-metric-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; }
.community-metric-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; font-size: 19px; }
.community-metric-kicker { color: var(--hg-muted); font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.community-metric-value { display: flex; align-items: baseline; margin-bottom: 10px; color: var(--hg-ink); font-size: clamp(39px, 5vw, 56px); font-weight: 820; letter-spacing: -.045em; line-height: .95; }
.community-metric-value small { margin-left: 3px; color: var(--hg-muted); font-size: 20px; }
.community-metric h3 { margin-bottom: 6px; color: var(--hg-ink); font-size: 18px; font-weight: 750; }
.community-metric p { max-width: 310px; margin: 0; color: var(--hg-muted); font-size: 12px; line-height: 1.5; }
.community-metric-link { display: inline-flex; gap: 7px; align-items: center; margin-top: auto; padding-top: 18px; font-size: 12px; font-weight: 720; }
.community-metric-link i { transition: transform .2s ease; }
a.community-metric:hover .community-metric-link i { transform: translateX(3px); }
.metric-violet { color: var(--hg-primary); }
.metric-violet .community-metric-icon { color: var(--hg-primary); background: var(--hg-primary-soft); }
.metric-green { color: #20a875; }
.metric-green .community-metric-icon { color: #20a875; background: rgba(32, 168, 117, .12); }
.metric-coral { color: var(--hg-coral); }
.metric-coral .community-metric-icon { color: var(--hg-coral); background: rgba(238, 108, 91, .12); }
.metric-blue { color: var(--hg-cyan); }
.metric-blue .community-metric-icon { color: var(--hg-cyan); background: rgba(30, 157, 177, .12); }
.metric-amber { color: #d58b1c; }
.metric-amber .community-metric-icon { color: #d58b1c; background: rgba(213, 139, 28, .13); }
.metric-pink { color: #d45a97; }
.metric-pink .community-metric-icon { color: #d45a97; background: rgba(212, 90, 151, .12); }
.community-metric-note { display: flex; gap: 9px; align-items: flex-start; margin: 18px 0 0; color: var(--hg-muted); font-size: 11px; }
.community-metric-note i { margin-top: 2px; color: var(--hg-primary); }

.home-cta { padding: 76px 0; background: var(--hg-bg); }
.home-cta-card { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; overflow: hidden; padding: 38px 42px; border-radius: 28px; color: #fff; background: linear-gradient(120deg, #4837d7, #6556ed 55%, #257f9f); box-shadow: 0 25px 70px rgba(67, 51, 190, .25); }
.home-cta-card::after { content: ""; position: absolute; right: 14%; width: 220px; height: 220px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 45px rgba(255,255,255,.04), 0 0 0 90px rgba(255,255,255,.025); }
.home-cta-card > * { position: relative; z-index: 1; }
.home-cta-card .eyebrow { margin: 0 0 3px; color: rgba(255,255,255,.7); }
.home-cta-card h2 { margin: 0 0 6px; color: #fff; font-size: 29px; }
.home-cta-card p { max-width: 700px; margin: 0; color: rgba(255,255,255,.78); font-size: 14px; }
.cta-icon { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 18px; background: rgba(255,255,255,.14); font-size: 27px; }
.home-cta-card .btn-light { color: var(--hg-primary-strong); }

/* Personal dashboard */
.dashboard-hero {
    position: relative;
    overflow: hidden;
    margin-top: 76px;
    padding: 54px 0 46px;
    background:
        radial-gradient(circle at 86% 10%, rgba(255,255,255,.14), transparent 25%),
        linear-gradient(120deg, #4033bb, #5b4cf0 58%, #287e9c);
}
.dashboard-hero::after { content: ""; position: absolute; right: -75px; bottom: -210px; width: 390px; height: 390px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 52px rgba(255,255,255,.035), 0 0 0 104px rgba(255,255,255,.02); }
.dashboard-welcome { position: relative; z-index: 1; display: flex; gap: 30px; align-items: center; justify-content: space-between; }
.dashboard-welcome .eyebrow { color: rgba(255,255,255,.72); }
.dashboard-welcome h1 { margin: 8px 0 7px; color: #fff; font-size: clamp(34px, 5vw, 55px); font-weight: 810; letter-spacing: -.035em; }
.dashboard-welcome p { margin: 0; color: rgba(255,255,255,.75); font-size: 16px; }
.dashboard-bell { position: relative; display: flex; min-width: 235px; gap: 13px; align-items: center; padding: 14px 16px; border: 1px solid rgba(255,255,255,.19); border-radius: 18px; color: #fff; background: rgba(255,255,255,.1); text-align: left; backdrop-filter: blur(10px); transition: background .2s ease, transform .2s ease; }
.dashboard-bell:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.dashboard-bell > .bi { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 13px; background: rgba(255,255,255,.13); font-size: 19px; }
.dashboard-bell strong, .dashboard-bell small { display: block; }
.dashboard-bell strong { font-size: 14px; }
.dashboard-bell small { margin-top: 2px; color: rgba(255,255,255,.66); font-size: 11px; }
.dashboard-bell .notification-unread-badge { position: absolute; top: 9px; right: auto; left: 47px; }

.dashboard-main { padding: 34px 0 92px; background: var(--hg-bg); }
#dashboard-announcement-slot.has-announcements { display: grid; gap: 12px; margin-bottom: 18px; }
.dashboard-announcement { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 16px; align-items: center; min-height: 104px; overflow: hidden; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--hg-primary) 20%, var(--hg-border)); border-radius: 22px; background: linear-gradient(115deg, var(--hg-primary-soft), var(--hg-surface) 62%); box-shadow: var(--hg-shadow-sm); }
.dashboard-announcement::after { content: ""; position: absolute; right: 18%; bottom: -115px; width: 170px; height: 170px; border: 1px solid color-mix(in srgb, var(--hg-primary) 12%, transparent); border-radius: 50%; }
.dashboard-announcement--city { background: linear-gradient(115deg, rgba(30,157,177,.13), var(--hg-surface) 62%); }
.dashboard-announcement--community { background: linear-gradient(115deg, rgba(32,168,117,.12), var(--hg-surface) 62%); }
.dashboard-announcement__image-button { position: relative; z-index: 1; display: block; width: 132px; height: 76px; overflow: hidden; padding: 0; border: 0; border-radius: 15px; background: transparent; cursor: zoom-in; }
.dashboard-announcement__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease, filter .2s ease; }
.dashboard-announcement__image-button > span { position: absolute; right: 7px; bottom: 7px; display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; color: #fff; background: rgba(5,7,15,.62); font-size: 10px; opacity: 0; transform: translateY(3px); transition: opacity .2s ease, transform .2s ease; backdrop-filter: blur(5px); }
.dashboard-announcement__image-button:hover .dashboard-announcement__image { filter: brightness(.86); transform: scale(1.04); }
.dashboard-announcement__image-button:hover > span, .dashboard-announcement__image-button:focus-visible > span { opacity: 1; transform: none; }
.dashboard-announcement__image-button:focus-visible { outline: 3px solid var(--hg-primary); outline-offset: 2px; }
.dashboard-announcement__icon { position: relative; z-index: 1; display: grid; width: 54px; height: 54px; place-items: center; border-radius: 16px; color: #fff; background: var(--hg-primary); font-size: 22px; }
.dashboard-announcement__copy { position: relative; z-index: 1; min-width: 0; }
.dashboard-announcement__copy small, .dashboard-announcement__copy strong { display: block; }
.dashboard-announcement__copy small { margin-bottom: 2px; color: var(--hg-primary); font-size: 9px; font-weight: 820; letter-spacing: .07em; text-transform: uppercase; }
.dashboard-announcement__copy strong { overflow: hidden; color: var(--hg-ink); font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-announcement__copy p { display: -webkit-box; overflow: hidden; margin: 3px 0 0; color: var(--hg-muted); font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dashboard-announcement__action { position: relative; z-index: 1; display: inline-flex; gap: 7px; align-items: center; padding: 10px 13px; border-radius: 12px; color: #fff; background: var(--hg-primary); font-size: 11px; font-weight: 760; white-space: nowrap; }
.dashboard-announcement__action:hover { color: #fff; filter: brightness(1.06); }
.dashboard-announcement__close { position: relative; z-index: 1; display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 11px; color: var(--hg-muted); background: color-mix(in srgb, var(--hg-surface) 82%, transparent); font-size: 13px; }
.dashboard-announcement__close:hover { color: var(--hg-ink); background: var(--hg-surface); }
.dashboard-announcement-lightbox .modal-content { border: 0; color: #fff; background: rgba(5,7,15,.98); }
.dashboard-announcement-lightbox .modal-body { display: grid; min-height: 0; padding: 66px 18px 18px; place-items: center; }
.dashboard-announcement-lightbox .modal-body img { display: block; max-width: 100%; max-height: calc(100vh - 84px); object-fit: contain; }
.dashboard-announcement-lightbox__toolbar { position: absolute; z-index: 3; top: max(16px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); left: max(18px, env(safe-area-inset-left)); display: flex; gap: 18px; align-items: center; justify-content: space-between; }
.dashboard-announcement-lightbox__toolbar strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-announcement-lightbox__toolbar .btn-close { flex: 0 0 auto; padding: 10px; border-radius: 50%; background-color: rgba(255,255,255,.12); background-size: 13px; opacity: .9; }
.dashboard-event-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(250px, .72fr); gap: 18px; }
.dashboard-next-event { position: relative; display: flex; min-height: 385px; overflow: hidden; flex-direction: column; padding: 31px; border: 1px solid var(--hg-border); border-radius: 27px; color: var(--hg-ink); background: var(--hg-surface); box-shadow: var(--hg-shadow-sm); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
a.dashboard-next-event:hover { border-color: rgba(91,76,240,.32); color: var(--hg-ink); box-shadow: var(--hg-shadow); transform: translateY(-3px); }
.dashboard-next-event::after { content: ""; position: absolute; right: -80px; top: -100px; width: 260px; height: 260px; border-radius: 50%; background: var(--hg-primary-soft); opacity: .65; }
.dashboard-next-event.is-current { border-color: rgba(32,168,117,.32); background: linear-gradient(135deg, rgba(32,168,117,.08), var(--hg-surface) 48%); }
.dashboard-card-topline { position: relative; z-index: 1; display: flex; gap: 15px; align-items: center; justify-content: space-between; color: var(--hg-muted); font-size: 10px; font-weight: 780; letter-spacing: .065em; text-transform: uppercase; }
.dashboard-format { color: var(--hg-primary); }
.dashboard-live { display: inline-flex; gap: 6px; align-items: center; padding: 5px 9px; border-radius: 999px; color: #fff; background: #16835b; font-size: 9px; }
.dashboard-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dashboard-next-event h2 { position: relative; z-index: 1; max-width: 730px; margin: 35px 0 10px; color: var(--hg-ink); font-size: clamp(29px, 4vw, 42px); font-weight: 790; letter-spacing: -.03em; }
.dashboard-next-event > p { position: relative; z-index: 1; max-width: 700px; margin: 0 0 27px; color: var(--hg-muted); line-height: 1.62; }
.dashboard-event-meta { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-top: auto; border: 1px solid var(--hg-border); border-radius: 17px; background: var(--hg-border); }
.dashboard-event-meta > span { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center; padding: 14px; background: var(--hg-surface-2); }
.dashboard-event-meta i { grid-row: 1 / 3; color: var(--hg-primary); font-size: 17px; }
.dashboard-event-meta strong, .dashboard-event-meta small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-event-meta strong { color: var(--hg-ink); font-size: 12px; }
.dashboard-event-meta small { color: var(--hg-muted); font-size: 9px; }
.dashboard-card-link { position: relative; z-index: 1; display: inline-flex; gap: 7px; align-items: center; margin-top: 19px; color: var(--hg-primary); font-size: 12px; font-weight: 750; }
.dashboard-empty-event { justify-content: center; }
.dashboard-empty-event::after { display: none; }
.dashboard-empty-event .dashboard-empty-icon { display: grid; width: 56px; height: 56px; margin-bottom: 20px; place-items: center; border-radius: 17px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 24px; }
.dashboard-empty-event h2 { margin: 8px 0 9px; }
.dashboard-empty-event .btn { width: fit-content; }
.dashboard-all-events { position: relative; display: flex; min-height: 385px; overflow: hidden; flex-direction: column; justify-content: space-between; padding: 27px; border-radius: 27px; color: #fff; background: linear-gradient(155deg, #171b2d, #282d48); box-shadow: 0 16px 42px rgba(18,23,42,.18); transition: transform .22s ease, box-shadow .22s ease; }
.dashboard-all-events::after { content: ""; position: absolute; right: -75px; bottom: -85px; width: 220px; height: 220px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,255,255,.035); }
.dashboard-all-events:hover { color: #fff; box-shadow: 0 22px 50px rgba(18,23,42,.25); transform: translateY(-3px); }
.dashboard-all-events-icon { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 17px; color: #d5d1ff; background: rgba(255,255,255,.1); font-size: 23px; }
.dashboard-all-events > span, .dashboard-all-events > .bi { position: relative; z-index: 1; }
.dashboard-all-events small, .dashboard-all-events strong, .dashboard-all-events em { display: block; }
.dashboard-all-events small { margin-bottom: 5px; color: #9187f6; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.dashboard-all-events strong { color: #fff; font-size: 28px; font-style: normal; }
.dashboard-all-events em { margin-top: 6px; color: #9fa6ba; font-size: 12px; font-style: normal; }
.dashboard-all-events > .bi { align-self: flex-end; font-size: 20px; }

.dashboard-section-heading { display: flex; gap: 20px; align-items: end; justify-content: space-between; margin: 55px 0 20px; }
.dashboard-section-heading .eyebrow { margin-bottom: 5px; }
.dashboard-section-heading h2 { margin: 0; font-size: clamp(27px, 3.5vw, 37px); font-weight: 780; }
.dashboard-section-heading > a { display: inline-flex; gap: 7px; align-items: center; font-size: 12px; font-weight: 720; }
.dashboard-duties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.dashboard-duty { display: flex; min-width: 0; gap: 14px; align-items: center; padding: 18px; border: 1px solid var(--hg-border); border-radius: 18px; color: var(--hg-ink); background: var(--hg-surface); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.dashboard-duty:hover { border-color: rgba(91,76,240,.3); color: var(--hg-ink); box-shadow: var(--hg-shadow-sm); transform: translateY(-2px); }
.dashboard-duty-icon { display: grid; width: 47px; height: 47px; flex: 0 0 47px; place-items: center; border-radius: 14px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 19px; }
.dashboard-duty-copy { min-width: 0; }
.dashboard-duty-copy small, .dashboard-duty-copy strong, .dashboard-duty-copy em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-duty-copy small { color: var(--hg-primary); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dashboard-duty-copy strong { margin: 3px 0; color: var(--hg-ink); font-size: 15px; }
.dashboard-duty-copy em { color: var(--hg-muted); font-size: 10px; font-style: normal; }
.dashboard-duty > .bi { margin-left: auto; color: var(--hg-muted); font-size: 12px; }
.dashboard-empty-wide { grid-column: 1 / -1; display: flex; gap: 17px; align-items: center; padding: 27px; border: 1px dashed var(--hg-border); border-radius: 19px; color: var(--hg-muted); background: var(--hg-surface); }
.dashboard-empty-wide > i { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border-radius: 14px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 20px; }
.dashboard-empty-wide strong, .dashboard-empty-wide span { display: block; }
.dashboard-empty-wide strong { margin-bottom: 3px; color: var(--hg-ink); font-size: 15px; }
.dashboard-empty-wide span { font-size: 12px; }

.dashboard-section-heading--training { margin-top: 52px; }
.dashboard-training-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dashboard-training-card { position: relative; overflow: hidden; padding: 25px; border: 1px solid rgba(91,76,240,.18); border-radius: 22px; background: linear-gradient(135deg, var(--hg-primary-soft), var(--hg-surface) 62%); }
.dashboard-training-head { display: flex; align-items: center; justify-content: space-between; }
.dashboard-training-head > span { display: grid; width: 45px; height: 45px; place-items: center; border-radius: 14px; color: #fff; background: var(--hg-primary); font-size: 19px; }
.dashboard-training-head small { color: var(--hg-primary); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.dashboard-training-card h3 { margin: 20px 0 7px; color: var(--hg-ink); font-size: 23px; }
.dashboard-training-card > p { max-width: 620px; margin: 0 0 20px; color: var(--hg-muted); font-size: 12px; line-height: 1.55; }
.dashboard-training-stats { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 20px; }
.dashboard-training-stats > span { min-width: 150px; padding: 11px 13px; border: 1px solid var(--hg-border); border-radius: 12px; background: color-mix(in srgb, var(--hg-surface) 82%, transparent); }
.dashboard-training-stats small, .dashboard-training-stats strong { display: block; }
.dashboard-training-stats small { color: var(--hg-muted); font-size: 9px; }
.dashboard-training-stats strong { margin-top: 2px; color: var(--hg-ink); font-size: 13px; }
.dashboard-training-card > a, .dashboard-training-disabled { display: inline-flex; gap: 7px; align-items: center; font-size: 12px; font-weight: 730; }
.dashboard-training-disabled { color: var(--hg-muted); }

.dashboard-section-heading--actions { margin-top: 52px; }
.dashboard-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dashboard-action { display: flex; min-width: 0; gap: 13px; align-items: center; padding: 16px; border: 1px solid var(--hg-border); border-radius: 17px; color: var(--hg-ink); background: var(--hg-surface); transition: border-color .2s ease, transform .2s ease; }
.dashboard-action:hover { border-color: rgba(91,76,240,.32); color: var(--hg-ink); transform: translateY(-2px); }
.dashboard-action > span { display: grid; width: 43px; height: 43px; flex: 0 0 43px; place-items: center; border-radius: 13px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 17px; }
.dashboard-action div { min-width: 0; }
.dashboard-action strong, .dashboard-action small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-action strong { color: var(--hg-ink); font-size: 13px; }
.dashboard-action small { margin-top: 3px; color: var(--hg-muted); font-size: 10px; }
.dashboard-action > .bi { margin-left: auto; color: var(--hg-muted); font-size: 11px; }

@media (max-width: 991.98px) {
    .dashboard-event-grid { grid-template-columns: 1fr; }
    .dashboard-all-events { min-height: 210px; }
    .dashboard-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .dashboard-hero { margin-top: 68px; padding: 40px 0 36px; }
    .dashboard-welcome { align-items: stretch; flex-direction: column; }
    .dashboard-welcome h1 { font-size: 37px; }
    .dashboard-bell { min-width: 0; width: 100%; }
    .dashboard-main { padding-top: 20px; padding-bottom: 66px; }
    #dashboard-announcement-slot.has-announcements { margin-bottom: 12px; }
    .dashboard-announcement { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 76px; gap: 10px; padding: 10px 11px; border-radius: 17px; }
    .dashboard-announcement__image-button { width: 48px; height: 48px; border-radius: 13px; }
    .dashboard-announcement__image-button > span { right: 4px; bottom: 4px; width: 20px; height: 20px; border-radius: 6px; opacity: 1; transform: none; font-size: 8px; }
    .dashboard-announcement__icon { width: 44px; height: 44px; border-radius: 13px; font-size: 18px; }
    .dashboard-announcement__copy small { font-size: 8px; }
    .dashboard-announcement__copy strong { font-size: 13px; }
    .dashboard-announcement__copy p { margin-top: 1px; font-size: 10px; -webkit-line-clamp: 1; }
    .dashboard-announcement__action { grid-column: 2; width: fit-content; margin-top: -4px; padding: 6px 9px; font-size: 9px; }
    .dashboard-announcement__close { grid-column: 3; grid-row: 1; width: 31px; height: 31px; }
    .dashboard-next-event { min-height: 0; padding: 22px; border-radius: 21px; }
    .dashboard-next-event h2 { margin-top: 25px; font-size: 29px; }
    .dashboard-event-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-all-events { min-height: 190px; padding: 22px; border-radius: 21px; }
    .dashboard-section-heading { align-items: flex-start; flex-direction: column; margin-top: 43px; }
    .dashboard-duties, .dashboard-training-grid, .dashboard-actions { grid-template-columns: 1fr; }
    .dashboard-empty-wide { align-items: flex-start; padding: 20px; }
}

/* Internal announcements */
.announcements-page { background: var(--hg-bg); }
.announcements-guidance { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 22px; padding: 15px 17px; border: 1px solid rgba(30,157,177,.2); border-radius: 16px; color: var(--hg-muted); background: rgba(30,157,177,.08); font-size: 12px; line-height: 1.5; }
.announcements-guidance > i { margin-top: 1px; color: var(--hg-cyan); font-size: 18px; }
.announcements-guidance strong { color: var(--hg-ink); }
.announcements-layout { display: grid; grid-template-columns: minmax(340px, .78fr) minmax(0, 1.22fr); gap: 22px; align-items: start; }
.announcement-editor { position: sticky; top: 98px; padding: 24px; border: 1px solid var(--hg-border); border-radius: 22px; background: var(--hg-surface); box-shadow: var(--hg-shadow-sm); }
.announcement-editor > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 21px; }
.announcement-editor > header span, .announcement-list-head span { display: block; color: var(--hg-primary); font-size: 9px; font-weight: 820; letter-spacing: .07em; text-transform: uppercase; }
.announcement-editor > header h2, .announcement-list-head h2 { margin: 3px 0 0; color: var(--hg-ink); font-size: 23px; }
.announcement-editor > header > i { color: var(--hg-primary); font-size: 25px; }
.announcement-scope-lock { display: flex; gap: 11px; align-items: center; padding: 11px 13px; border: 1px solid var(--hg-border); border-radius: 13px; background: var(--hg-surface-2); }
.announcement-scope-lock > i { color: var(--hg-primary); }
.announcement-scope-lock small, .announcement-scope-lock strong { display: block; }
.announcement-scope-lock small { color: var(--hg-muted); font-size: 9px; text-transform: uppercase; }
.announcement-scope-lock strong { color: var(--hg-ink); font-size: 12px; }
.announcement-list-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 15px; }
.announcement-list-head > strong { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 15px; }
.announcement-list { display: grid; gap: 12px; }
.announcement-manage-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 15px; align-items: center; min-height: 126px; padding: 16px; border: 1px solid var(--hg-border); border-radius: 20px; background: var(--hg-surface); box-shadow: var(--hg-shadow-sm); }
.announcement-manage-card.is-inactive { opacity: .68; }
.announcement-manage-card > img { width: 112px; height: 90px; object-fit: cover; border-radius: 14px; }
.announcement-manage-card__icon { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 17px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 23px; }
.announcement-manage-card__copy { min-width: 0; }
.announcement-manage-card__meta { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.announcement-manage-card__meta span { overflow: hidden; color: var(--hg-primary); font-size: 8px; font-weight: 820; letter-spacing: .055em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.announcement-manage-card__meta em { padding: 4px 7px; border-radius: 999px; color: var(--hg-muted); background: var(--hg-surface-2); font-size: 8px; font-style: normal; font-weight: 750; white-space: nowrap; }
.announcement-manage-card__meta em.is-live { color: #14704f; background: rgba(32,168,117,.13); }
.announcement-manage-card h3 { overflow: hidden; margin: 7px 0 3px; color: var(--hg-ink); font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.announcement-manage-card p { display: -webkit-box; overflow: hidden; margin: 0 0 7px; color: var(--hg-muted); font-size: 11px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.announcement-manage-card__copy > small { color: var(--hg-muted); font-size: 9px; }
.announcement-manage-card__menu .btn { width: 38px; height: 38px; padding: 0; border-radius: 11px; }
.announcements-empty { padding: 52px 28px; border: 1px dashed var(--hg-border); border-radius: 20px; color: var(--hg-muted); background: var(--hg-surface); text-align: center; }
.announcements-empty > i { display: grid; width: 56px; height: 56px; margin: 0 auto 14px; place-items: center; border-radius: 17px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 22px; }
.announcements-empty h3 { margin: 0 0 5px; color: var(--hg-ink); font-size: 18px; }
.announcements-empty p { max-width: 440px; margin: 0 auto; font-size: 11px; line-height: 1.55; }
.announcement-modal .modal-content { border: 0; border-radius: 22px; background: var(--hg-surface); }
.announcement-modal .modal-header, .announcement-modal .modal-footer { border-color: var(--hg-border); }
.announcement-modal .modal-title { margin-top: 3px; color: var(--hg-ink); font-size: 22px; }
.announcement-audience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.announcement-audience-option { display: flex; gap: 9px; align-items: center; min-height: 42px; padding: 9px 11px; border: 1px solid var(--hg-border); border-radius: 12px; color: var(--hg-ink); background: var(--hg-surface-2); font-size: 11px; font-weight: 680; cursor: pointer; }
.announcement-audience-option:has(input:checked) { border-color: color-mix(in srgb, var(--hg-primary) 42%, var(--hg-border)); background: var(--hg-primary-soft); }
.announcement-audience-option .form-check-input { flex: 0 0 auto; margin: 0; }
.announcement-manage-card__detail { display: inline-flex; gap: 5px; align-items: center; margin-top: 7px; color: var(--hg-primary); font-size: 9px; font-weight: 760; }
.announcement-detail-page { background: var(--hg-bg); }
.announcement-detail-card { display: grid; grid-template-columns: minmax(280px, .84fr) minmax(0, 1.16fr); gap: 28px; align-items: start; padding: 24px; border: 1px solid var(--hg-border); border-radius: 24px; background: var(--hg-surface); box-shadow: var(--hg-shadow-sm); }
.announcement-detail-poster { position: relative; overflow: hidden; width: 100%; max-height: 680px; padding: 0; border: 0; border-radius: 19px; background: var(--hg-surface-2); cursor: zoom-in; }
.announcement-detail-poster img { display: block; width: 100%; max-height: 680px; object-fit: contain; }
.announcement-detail-poster span { position: absolute; right: 12px; bottom: 12px; display: inline-flex; gap: 7px; align-items: center; padding: 8px 11px; border-radius: 10px; color: #fff; background: rgba(5,7,15,.7); font-size: 10px; font-weight: 720; backdrop-filter: blur(6px); }
.announcement-detail-content { min-width: 0; padding: 6px 4px; }
.announcement-detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.announcement-detail-meta span { display: inline-flex; gap: 7px; align-items: center; padding: 7px 10px; border-radius: 999px; color: var(--hg-muted); background: var(--hg-surface-2); font-size: 10px; }
.announcement-detail-text { color: var(--hg-ink); font-size: 15px; line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; }
.announcement-detail-action { margin-top: 24px; }

@media (max-width: 991.98px) {
    .announcements-layout { grid-template-columns: 1fr; }
    .announcement-editor { position: static; }
    .announcement-detail-card { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .announcement-editor { padding: 18px; border-radius: 18px; }
    .announcement-audience-grid { grid-template-columns: 1fr; }
    .announcement-detail-card { gap: 18px; padding: 14px; border-radius: 18px; }
    .announcement-detail-content { padding: 2px; }
    .announcement-manage-card { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; min-height: 0; padding: 12px; border-radius: 17px; }
    .announcement-manage-card > img { width: 52px; height: 52px; }
    .announcement-manage-card__icon { width: 46px; height: 46px; border-radius: 13px; font-size: 18px; }
    .announcement-manage-card__meta em { display: none; }
    .announcement-manage-card h3 { margin-top: 4px; font-size: 14px; }
    .announcement-manage-card p { -webkit-line-clamp: 1; }
    .announcement-manage-card__copy > small { display: none; }
}

/* Inner pages */
.page-banner-section {
    position: relative;
    overflow: hidden;
    min-height: 230px;
    margin-top: 76px;
    padding: 55px 0 45px;
    background: linear-gradient(125deg, #3d32b3, #5b4cf0 55%, #277e9e) !important;
}
.page-banner-section::after { content: ""; position: absolute; right: -60px; top: -180px; width: 430px; height: 430px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 60px rgba(255,255,255,.035), 0 0 0 120px rgba(255,255,255,.02); }
.page-banner-section .container { position: relative; z-index: 1; }
.page-banner-section h1, .page-banner-section h2 { margin: 7px 0 9px; color: #fff !important; font-size: clamp(29px, 4vw, 43px); font-weight: 760; }
.page-banner-section p { max-width: 680px; margin: 0 0 16px; color: rgba(255,255,255,.74); }
.page-eyebrow { margin: 0; color: rgba(255,255,255,.72); }
.page-banner-section .breadcrumb { margin: 7px 0 0; }
.page-banner-section .breadcrumb-item,
.page-banner-section .breadcrumb-item a { color: rgba(255,255,255,.68) !important; font-size: 13px !important; }
.page-banner-section .breadcrumb-item.active { color: #fff !important; }
.page-banner-section .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.45) !important; }

.feature-section, .service-section { background: var(--hg-bg); }
.feature-section.py-5 { padding-top: 70px !important; padding-bottom: 82px !important; }
.service-section.pt-130 { padding-top: 126px; }
.service-section.pt-40 { padding-top: 62px; }
.service-section.pb-80 { padding-bottom: 82px; }
.service-box.box-style {
    height: 290px !important;
    padding: 28px;
    border-color: var(--hg-border);
    border-radius: var(--hg-radius);
    color: var(--hg-ink);
    background: var(--hg-surface);
}
.service-box.box-style:hover { border-color: rgba(91, 76, 240, .35); box-shadow: var(--hg-shadow); transform: translateY(-5px); }
.box-style .box-icon-style { width: 60px; height: 60px; margin-bottom: 22px; border: 0; border-radius: 16px; color: var(--hg-primary); background: var(--hg-primary-soft); background-image: none; font-size: 26px; }
.box-style .box-icon-style::after { display: none; }
.box-style:hover .box-icon-style { color: #fff; background: var(--hg-primary); }
.service-box .h4 { display: block; margin-bottom: 7px; color: var(--hg-ink); font-size: 21px; font-weight: 730; }
.service-box .text-secondary { font-size: 14px; }
.mb-55 { margin-bottom: 36px; }
.pt-100 { padding-top: 70px; }
.pb-80 { padding-bottom: 70px; }
.border.border-secondary.rounded.p-4 { border-radius: var(--hg-radius-sm) !important; background: var(--hg-surface); box-shadow: var(--hg-shadow-sm); }
.pray-item-card img { border-radius: 12px !important; }

/* Support */
.support-banner { min-height: 300px; padding-top: 60px; }
.support-section { padding: 86px 0 105px !important; }
.support-title { max-width: 690px; margin-bottom: 20px; font-size: clamp(32px, 4vw, 46px); font-weight: 780; line-height: 1.14; }
.support-lead { max-width: 700px; margin-bottom: 34px; color: var(--hg-muted); font-size: 18px; }
.support-benefits { display: grid; gap: 15px; }
.support-benefits > div { display: flex; gap: 16px; align-items: flex-start; padding: 17px; border: 1px solid var(--hg-border); border-radius: 15px; background: var(--hg-surface); }
.support-benefits > div > span { display: grid; min-width: 44px; height: 44px; place-items: center; border-radius: 12px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 18px; }
.support-benefits p { margin: 0; }
.support-benefits strong, .support-benefits small { display: block; }
.support-benefits strong { color: var(--hg-ink); }
.support-benefits small { color: var(--hg-muted); }
.support-note { display: flex; gap: 12px; margin-top: 24px; padding: 16px; border-radius: 13px; color: var(--hg-muted); background: var(--hg-surface-2); font-size: 13px; }
.support-note i { color: var(--hg-primary); }
.support-note p { margin: 0; }
.donation-card { position: relative; overflow: hidden; padding: 29px; border: 1px solid var(--hg-border); border-radius: 26px; background: var(--hg-surface); box-shadow: var(--hg-shadow); }
.donation-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, #f04444, #ed6a5a); }
.donation-card-head { display: flex; align-items: center; margin-bottom: 31px; }
.kaspi-mark { display: grid; width: 46px; height: 46px; margin-right: 12px; place-items: center; border-radius: 14px; color: #fff; background: #f14646; font-size: 23px; font-weight: 800; }
.donation-card-head div span, .donation-card-head div strong { display: block; line-height: 1.25; }
.donation-card-head div span { color: var(--hg-muted); font-size: 12px; }
.donation-card-head div strong { color: var(--hg-ink); font-size: 20px; }
.donation-card-head > i { margin-left: auto; color: #20a875; font-size: 24px; }
.donation-label { margin-bottom: 6px; color: var(--hg-muted); font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; }
.card-number { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 15px 16px; border: 1px solid var(--hg-border); border-radius: 13px; color: var(--hg-ink); background: var(--hg-surface-2); font-size: clamp(18px, 2.2vw, 23px); font-weight: 740; letter-spacing: .045em; transition: .2s; }
.card-number:hover, .card-number.copied { border-color: var(--hg-primary); color: var(--hg-primary); }
.donation-hint { margin: 7px 0 24px; color: var(--hg-muted); font-size: 11px; }
.donation-comment { display: flex; gap: 12px; align-items: center; padding: 15px; border-radius: 13px; background: var(--hg-primary-soft); }
.donation-comment > i { color: var(--hg-primary); }
.donation-comment span, .donation-comment strong { display: block; }
.donation-comment span { color: var(--hg-muted); font-size: 11px; }
.donation-comment strong { color: var(--hg-ink); font-size: 14px; }
.donation-thanks { display: flex; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hg-border); color: var(--hg-muted); font-size: 13px; }
.donation-thanks i { color: var(--hg-coral); }
.copy-toast { margin: 14px auto 0; padding: 10px 15px; border-radius: 10px; color: #fff; background: #172033; font-size: 13px; text-align: center; opacity: 0; transform: translateY(-7px); transition: .2s; }
.copy-toast.show { opacity: 1; transform: none; }

/* Community footer */
.community-footer, .dark .community-footer { position: relative; overflow: hidden; padding: 54px 0 0; color: #9299ad; background: #0b0e19; }
.community-footer::after { content: ""; position: absolute; right: -190px; bottom: -310px; width: 560px; height: 560px; border: 1px solid rgba(133,120,255,.1); border-radius: 50%; box-shadow: 0 0 0 75px rgba(110,94,255,.025), 0 0 0 150px rgba(110,94,255,.018); pointer-events: none; }
.community-footer .container { position: relative; z-index: 1; }
.community-footer__cta { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; overflow: hidden; padding: 25px 28px; border: 1px solid rgba(255,255,255,.1); border-radius: 24px; background: linear-gradient(115deg, #4d3cda, #6254ed 55%, #267e9e); box-shadow: 0 22px 55px rgba(39,30,129,.25); }
.community-footer__cta-icon { display: grid; width: 55px; height: 55px; place-items: center; border-radius: 17px; color: #fff; background: rgba(255,255,255,.13); font-size: 23px; }
.community-footer__cta span { color: rgba(255,255,255,.67); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.community-footer__cta h2 { margin: 3px 0 2px; color: #fff; font-size: 23px; font-weight: 770; }
.community-footer__cta p { margin: 0; color: rgba(255,255,255,.7); font-size: 12px; }
.community-footer__cta .btn { position: relative; display: inline-flex; gap: 7px; align-items: center; border: 0; color: #4636c7; white-space: nowrap; }
.community-footer__grid { display: flex; gap: 42px; align-items: flex-start; padding: 62px 0 50px; }
.community-footer__brand { min-width: 285px; flex: 1.55; }
.community-footer__logo { display: inline-block; width: 126px; margin-bottom: 19px; }
.community-footer__logo img { width: 100%; filter: brightness(0) invert(1); opacity: .92; }
.community-footer__brand > p { max-width: 370px; margin: 0 0 21px; color: #a5abba; font-size: 13px; line-height: 1.65; }
.community-footer__place { display: flex; width: fit-content; gap: 10px; align-items: center; padding: 10px 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: rgba(255,255,255,.035); }
.community-footer__place > i { color: #8072f7; }
.community-footer__place strong, .community-footer__place small { display: block; }
.community-footer__place strong { color: #e8eaf0; font-size: 11px; }
.community-footer__place small { margin-top: 1px; color: #747c91; font-size: 9px; }
.community-footer__nav, .community-footer__contact { min-width: 138px; flex: 1; }
.community-footer h3 { margin: 1px 0 17px; color: #f5f6fa; font-size: 12px; font-weight: 760; letter-spacing: .02em; }
.community-footer__nav ul { display: grid; gap: 11px; margin: 0; padding: 0; }
.community-footer__nav li { list-style: none; }
.community-footer__nav a { display: inline-flex; gap: 8px; align-items: center; color: #868ea2; font-size: 11px; transition: color .18s ease, transform .18s ease; }
.community-footer__nav a:hover { color: #fff; transform: translateX(2px); }
.community-footer__nav a i { width: 15px; color: #7165dd; text-align: center; }
.community-footer__count { display: inline-grid; min-width: 19px; height: 19px; margin-left: 2px; place-items: center; padding: 0 5px; border-radius: 999px; color: #fff; background: #6657e9; font-size: 8px; font-weight: 800; }
.community-footer__contact p { max-width: 180px; margin: 0 0 16px; color: #7d8598; font-size: 11px; line-height: 1.55; }
.community-footer__socials { display: flex; gap: 8px; }
.community-footer__socials a { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; color: #b8becd; background: rgba(255,255,255,.035); font-size: 15px; transition: color .18s ease, background .18s ease, transform .18s ease; }
.community-footer__socials a:hover { color: #fff; background: #5b4cf0; transform: translateY(-2px); }
.community-footer__bottom { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; padding: 21px 0; border-top: 1px solid rgba(255,255,255,.07); }
.community-footer__bottom p, .community-footer__bottom span { margin: 0; color: #626a7c; font-size: 10px; }
.community-footer__bottom span { text-align: center; }
.community-footer__bottom a { display: inline-flex; gap: 6px; align-items: center; justify-self: end; color: #a9a1ff; font-size: 10px; font-weight: 700; }
.community-footer__bottom a:hover { color: #fff; }

/* Compact footer for the authenticated app shell */
.app-footer {
    border-top: 1px solid var(--hg-border);
    color: var(--hg-muted);
    background: var(--hg-surface);
}
.app-footer__inner {
    display: grid;
    min-height: 72px;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: center;
    padding-top: 14px;
    padding-bottom: 14px;
}
.app-footer p { margin: 0; font-size: 12px; }
.app-footer__links { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; }
.app-footer__links a { color: var(--hg-muted); font-size: 12px; font-weight: 650; }
.app-footer__links a:hover,
.app-footer__links a:focus-visible { color: var(--hg-primary); }
.app-footer__version { justify-self: end; color: var(--hg-muted); font-size: 11px; }

.scroll-top { display: none; right: 22px; bottom: 22px; width: 44px; height: 44px; border-radius: 13px; color: #fff; background: var(--hg-primary); box-shadow: 0 10px 25px rgba(63, 48, 199, .25); line-height: 44px; }
.scroll-top:hover { color: #fff; background: var(--hg-primary-strong); transform: translateY(-2px); }

@media (max-width: 1199.98px) {
    .site-navbar .navbar-collapse { max-height: calc(100vh - 90px); margin-top: 10px; padding: 12px; overflow-y: auto; border: 1px solid var(--hg-border); border-radius: 17px; background: var(--hg-surface); box-shadow: var(--hg-shadow); }
    .site-nav { align-items: stretch; }
    .site-navbar .nav-link { padding: 11px !important; }
    .navbar-tools { align-items: stretch !important; flex-direction: column; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hg-border); }
    .theme-toggle { width: fit-content; }
    .site-navbar .user-menu { width: fit-content; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .site-navbar .notification-slot--mobile { display: flex !important; margin-right: 10px; margin-left: auto; }
    .site-navbar .notification-slot--desktop { display: none !important; }
}

@media (max-width: 991.98px) {
    .home-hero { padding: 125px 0 68px; }
    .hero-copy h1 { font-size: 50px; }
    .home-cta-card { grid-template-columns: auto 1fr; }
    .home-cta-card .btn { grid-column: 2; width: fit-content; }
    .support-section { padding-top: 66px !important; }
    .impact-stats { grid-template-columns: repeat(2, 1fr); }
    .impact-stat:nth-child(3) { border-top: 1px solid var(--hg-border); border-left: 0; }
    .impact-stat:nth-child(4) { border-top: 1px solid var(--hg-border); }
    .community-pulse-heading { align-items: flex-start; flex-direction: column; }
    .community-metrics { grid-template-columns: repeat(2, 1fr); }
    .app-footer__inner { grid-template-columns: 1fr auto; }
    .app-footer__links { grid-column: 1 / -1; grid-row: 1; justify-content: flex-start; }
    .app-footer__version { grid-column: 2; grid-row: 2; }
}

@media (max-width: 767.98px) {
    .container { width: 100%; padding-right: 20px; padding-left: 20px; }
    .site-navbar { min-height: 68px; }
    .site-navbar .navbar-brand img { width: 95px; }
    .home-hero { padding: 112px 0 58px; }
    .hero-copy h1 { font-size: 40px; }
    .hero-lead { font-size: 17px; }
    .hero-actions .btn { width: 100%; }
    .hero-note { margin-top: 26px; }
    .hero-panel { padding: 20px; border-radius: 20px; }
    .impact-section { margin-top: -20px; padding-bottom: 58px; }
    .impact-card { border-radius: 19px; }
    .impact-heading { align-items: flex-start; padding: 22px 20px; }
    .impact-pulse { min-width: 44px; height: 44px; border-radius: 13px; font-size: 18px; }
    .impact-stats { grid-template-columns: 1fr; }
    .impact-stat { padding: 16px 18px; }
    .impact-stat + .impact-stat { border-top: 1px solid var(--hg-border); border-left: 0; }
    .category-section { padding: 66px 0; }
    .community-pulse-section { padding: 68px 0 62px; }
    .community-pulse-heading { gap: 18px; margin-bottom: 24px; }
    .community-live { white-space: normal; }
    .community-metrics { grid-template-columns: 1fr; gap: 12px; }
    .community-metric { min-height: 230px; padding: 21px; }
    .community-metric-top { margin-bottom: 21px; }
    .community-metric-value { font-size: 45px; }
    .section-heading { align-items: flex-start; flex-direction: column; margin-bottom: 25px; }
    .category-card { min-height: 245px; }
    .home-cta { padding: 55px 0; }
    .home-cta-card { display: flex; align-items: flex-start; flex-direction: column; padding: 28px; }
    .home-cta-card .btn { width: 100%; }
    .page-banner-section { min-height: 200px; margin-top: 68px; padding: 43px 0 35px; }
    .feature-section.py-5 { padding-top: 50px !important; padding-bottom: 60px !important; }
    .service-section.pt-130 { padding-top: 108px; }
    .service-section.pt-40 { padding-top: 45px; }
    .support-banner { min-height: 245px; }
    .donation-card { padding: 22px; }
    .card-number { font-size: 17px; }
    .community-footer { padding-top: 38px; }
    .community-footer__cta { grid-template-columns: auto 1fr; padding: 22px; }
    .community-footer__cta .btn { grid-column: 2; width: fit-content; }
    .community-footer__grid { gap: 34px 24px; flex-wrap: wrap; padding: 46px 0 36px; }
    .community-footer__brand { min-width: 100%; }
    .community-footer__nav, .community-footer__contact { min-width: calc(50% - 15px); }
    .community-footer__bottom { grid-template-columns: 1fr auto; }
    .community-footer__bottom span { display: none; }
    .user-name { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Organizer leader workspace */
.organizer-workspace { overflow: hidden; }
.organizer-workspace > .container { min-width: 0; }
.organizer-tabs { display: flex; max-width: 100%; gap: 7px; overflow-x: auto; margin: -6px 0 28px; padding: 6px 0 9px; scrollbar-width: none; overscroll-behavior-x: contain; }
.organizer-tabs::-webkit-scrollbar { display: none; }
.organizer-tabs a { display: inline-flex; flex: 0 0 auto; gap: 7px; align-items: center; padding: 10px 14px; border: 1px solid var(--hg-border); border-radius: 999px; color: var(--hg-muted); background: var(--hg-surface); font-size: 11px; font-weight: 800; white-space: nowrap; }
.organizer-tabs a:hover, .organizer-tabs a.is-active { border-color: var(--hg-primary); color: #fff; background: var(--hg-primary); box-shadow: 0 7px 18px rgba(91,76,240,.2); }
.organizer-section-heading { display: flex; gap: 18px; align-items: end; justify-content: space-between; margin-bottom: 20px; }
.organizer-section-heading h2 { margin: 3px 0 0; color: var(--hg-ink); font-size: clamp(24px, 3vw, 32px); }
.organizer-section-heading p { max-width: 680px; margin: 7px 0 0; color: var(--hg-muted); font-size: 12px; }
.organizer-primary-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.organizer-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.organizer-kpi-card, .organizer-stat-summary article { display: flex; min-width: 0; flex-direction: column; padding: 18px; border: 1px solid var(--hg-border); border-radius: 18px; color: inherit; background: var(--hg-surface); box-shadow: 0 6px 20px rgba(26,32,56,.035); }
.organizer-kpi-card { text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.organizer-kpi-card:hover, .organizer-kpi-card:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--hg-primary) 45%, var(--hg-border)); color: inherit; box-shadow: 0 10px 26px rgba(91,76,240,.13); outline: none; }
.organizer-kpi-grid span, .organizer-stat-summary span { overflow: hidden; color: var(--hg-muted); font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.organizer-kpi-grid span i { margin-right: 4px; color: var(--hg-primary); }
.organizer-kpi-grid strong, .organizer-stat-summary strong { margin: 8px 0 1px; color: var(--hg-ink); font-size: 29px; line-height: 1; }
.organizer-kpi-grid small, .organizer-stat-summary small { color: var(--hg-muted); font-size: 9px; }
.organizer-overview-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 18px; }
.organizer-next-event, .organizer-gaps-card, .organizer-program-card, .organizer-feedback-detail, .organizer-stat-section, .organizer-game-editor { padding: 23px; border: 1px solid var(--hg-border); border-radius: 22px; background: var(--hg-surface); box-shadow: var(--hg-shadow-sm); }
.organizer-card-head, .organizer-program-head { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; }
.organizer-card-head h2, .organizer-program-head h2 { margin: 4px 0; color: var(--hg-ink); font-size: 24px; }
.organizer-next-event > p, .organizer-program-head p { margin: 8px 0 14px; color: var(--hg-muted); font-size: 11px; }
.organizer-ready-value { display: grid; width: 62px; height: 62px; flex: 0 0 62px; place-items: center; border-radius: 50%; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 18px; }
.organizer-progress { overflow: hidden; height: 7px; margin: 11px 0 16px; border-radius: 999px; background: var(--hg-surface-2); }
.organizer-progress i, .organizer-feedback-event-list a div > span i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hg-primary), #52a98b); }
.organizer-readiness-checks { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.organizer-readiness-checks span { padding: 6px 9px; border-radius: 999px; font-size: 9px; font-weight: 750; }
.organizer-readiness-checks .is-ready { color: #16835b; background: rgba(22,131,91,.1); }
.organizer-readiness-checks .is-missing { color: #bb5060; background: rgba(207,66,84,.1); }
.organizer-gaps-card h2 { margin: 4px 0 16px; color: var(--hg-ink); font-size: 21px; }
.organizer-gaps-card a { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 13px 0; border-top: 1px solid var(--hg-border); color: var(--hg-ink); font-size: 11px; font-weight: 700; }
.organizer-gaps-card a span { display: flex; gap: 8px; align-items: center; }
.organizer-gaps-card a i { color: var(--hg-primary); }
.organizer-gaps-card a strong { display: grid; min-width: 30px; height: 30px; place-items: center; border-radius: 10px; color: var(--hg-primary); background: var(--hg-primary-soft); }
.organizer-quick-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 18px; }
.organizer-quick-actions > span { padding: 0 8px; color: var(--hg-muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.organizer-quick-actions a, .organizer-quick-actions button { display: inline-flex; gap: 8px; align-items: center; padding: 11px 13px; border: 1px solid var(--hg-border); border-radius: 13px; color: var(--hg-ink); background: var(--hg-surface); font-size: 10px; }
.organizer-quick-actions i { color: var(--hg-primary); font-size: 15px; }
.organizer-event-groups { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.organizer-event-groups > section { min-width: 0; }
.organizer-event-groups > section > h3 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 9px; color: var(--hg-ink); font-size: 13px; }
.organizer-event-groups > section > h3 span { color: var(--hg-muted); font-size: 10px; }
.organizer-event-card-list { display: grid; gap: 8px; }
.organizer-event-card { display: grid; min-width: 0; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--hg-border); border-radius: 15px; color: inherit; background: var(--hg-surface); }
.organizer-event-card:hover, .organizer-event-card.is-active { border-color: var(--hg-primary); background: var(--hg-primary-soft); }
.organizer-event-card time { display: grid; width: 42px; height: 48px; place-items: center; align-content: center; border-radius: 12px; color: var(--hg-primary); background: var(--hg-primary-soft); }
.organizer-event-card time strong { font-size: 17px; line-height: 1; }
.organizer-event-card time span { margin-top: 2px; font-size: 7px; }
.organizer-event-card div { min-width: 0; }
.organizer-event-card small { color: var(--hg-primary); font-size: 8px; font-weight: 700; }
.organizer-event-card h4 { overflow: hidden; margin: 2px 0 3px; color: var(--hg-ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.organizer-event-card p { margin: 0; color: var(--hg-muted); font-size: 8px; }
.organizer-empty-inline { margin: 0; padding: 18px; border: 1px dashed var(--hg-border); border-radius: 14px; color: var(--hg-muted); font-size: 11px; text-align: center; }
.organizer-program-card { margin-top: 22px; }
.organizer-program-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: 22px; }
.organizer-program-layout h3, .organizer-feedback-detail > h3 { margin: 6px 0 12px; color: var(--hg-ink); font-size: 19px; }
.organizer-program-layout > aside { padding-left: 22px; border-left: 1px solid var(--hg-border); }
.organizer-activity-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.organizer-activity-list li { display: grid; grid-template-columns: 31px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 11px; border-radius: 14px; background: var(--hg-surface-2); }
.organizer-activity-list li > span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 10px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 10px; font-weight: 800; }
.organizer-activity-list li > div { display: flex; min-width: 0; flex-direction: column; }
.organizer-activity-list li strong { color: var(--hg-ink); font-size: 11px; }
.organizer-activity-list li small, .organizer-activity-list time { color: var(--hg-muted); font-size: 8px; }
.organizer-activity-list button { border: 0; color: var(--hg-muted); background: transparent; }
.organizer-activity-list .is-empty { display: block; color: var(--hg-muted); text-align: center; }
.organizer-inline-editor { margin-top: 10px; border: 1px solid var(--hg-border); border-radius: 14px; }
.organizer-inline-editor summary { padding: 11px 13px; color: var(--hg-primary); font-size: 10px; font-weight: 800; cursor: pointer; }
.organizer-inline-editor form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 13px; border-top: 1px solid var(--hg-border); }
.organizer-inline-editor label, .organizer-game-editor label, .organizer-stat-filters label, .organizer-filter-sheet label { display: grid; gap: 5px; color: var(--hg-muted); font-size: 9px; font-weight: 750; }
.organizer-inline-editor form label:nth-of-type(3) { grid-column: 1 / -1; }
.organizer-inline-editor form .btn { align-self: end; }
.organizer-speech-summary { display: flex; gap: 12px; padding: 15px; border-radius: 16px; background: linear-gradient(135deg, var(--hg-primary-soft), var(--hg-surface-2)); }
.organizer-speech-summary > i { color: var(--hg-primary); font-size: 22px; }
.organizer-speech-summary strong { color: var(--hg-ink); font-size: 12px; }
.organizer-speech-summary p { margin: 5px 0; color: var(--hg-muted); font-size: 10px; line-height: 1.5; }
.organizer-speech-summary small { color: var(--hg-primary); font-size: 9px; font-weight: 800; }
.organizer-games-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.organizer-games-grid > article { display: flex; min-width: 0; flex-direction: column; padding: 18px; border: 1px solid var(--hg-border); border-radius: 18px; background: var(--hg-surface); }
.organizer-game-card-head { display: flex; align-items: center; justify-content: space-between; }
.organizer-game-card-head > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: var(--hg-primary); background: var(--hg-primary-soft); }
.organizer-game-card-head a { color: var(--hg-muted); }
.organizer-games-grid article > small { margin-top: 12px; color: var(--hg-primary); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.organizer-games-grid h3 { margin: 4px 0 8px; color: var(--hg-ink); font-size: 17px; }
.organizer-games-grid p { flex: 1; color: var(--hg-muted); font-size: 10px; line-height: 1.55; }
.organizer-games-grid article > div:last-child { display: flex; gap: 8px; align-items: center; justify-content: space-between; color: var(--hg-muted); font-size: 9px; }
.organizer-games-grid article > div:last-child span { padding: 4px 7px; border-radius: 7px; color: #b47318; background: rgba(234,159,47,.13); }
.organizer-game-editor { margin-bottom: 18px; }
.organizer-game-editor h3 { margin: 0 0 15px; color: var(--hg-ink); }
.organizer-game-switches { display: flex; gap: 18px; margin: 14px 0; color: var(--hg-muted); font-size: 10px; }
.organizer-feedback-layout { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); gap: 16px; align-items: start; }
.organizer-feedback-event-list { display: grid; gap: 8px; }
.organizer-feedback-event-list > a { position: relative; display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; padding: 14px; border: 1px solid var(--hg-border); border-radius: 16px; color: inherit; background: var(--hg-surface); }
.organizer-feedback-event-list > a:hover, .organizer-feedback-event-list > a.is-active { border-color: var(--hg-primary); background: var(--hg-primary-soft); }
.organizer-feedback-event-list time { grid-column: 1 / -1; color: var(--hg-primary); font-size: 11px; font-weight: 800; }
.organizer-feedback-event-list h3 { margin: 0 0 5px; color: var(--hg-ink); font-size: 16px; }
.organizer-feedback-event-list p { margin: 0 0 8px; color: var(--hg-muted); font-size: 12px; line-height: 1.45; }
.organizer-feedback-event-list a div > span { display: block; overflow: hidden; height: 4px; border-radius: 999px; background: var(--hg-surface-2); }
.organizer-feedback-event-list a > strong { align-self: center; color: var(--hg-primary); font-size: 21px; }
.organizer-feedback-event-list em { position: absolute; top: 9px; right: 10px; padding: 4px 7px; border-radius: 999px; color: #fff; background: #cf4254; font-size: 10px; font-style: normal; font-weight: 800; }
.organizer-feedback-metrics { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 18px; margin: 20px 0 24px; }
.organizer-feedback-metric-group { min-width: 0; }
.organizer-feedback-metric-group > h3 { margin: 0 0 9px; color: var(--hg-muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.organizer-feedback-rating-group { padding-left: 18px; border-left: 1px solid var(--hg-border); }
.organizer-feedback-counts, .organizer-feedback-ratings { display: grid; gap: 8px; }
.organizer-feedback-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.organizer-feedback-ratings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.organizer-feedback-counts > div, .organizer-rating-card, .organizer-activity-ratings > div { display: flex; min-width: 0; flex-direction: column; padding: 13px; border: 1px solid transparent; border-radius: 14px; background: var(--hg-surface-2); }
.organizer-feedback-counts span, .organizer-rating-card span, .organizer-activity-ratings span { color: var(--hg-muted); font-size: 12px; line-height: 1.35; }
.organizer-feedback-counts strong, .organizer-rating-card strong, .organizer-activity-ratings strong { margin-top: 6px; color: var(--hg-ink); font-size: 24px; }
.organizer-rating-card, .organizer-activity-ratings > div { position: relative; overflow: hidden; }
.organizer-rating-card::before, .organizer-activity-ratings > div::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: currentColor; content: ''; }
.organizer-rating-card.is-rating-1, .organizer-activity-ratings > div.is-rating-1 { border-color: rgba(225,72,88,.32); color: #e14858; background: rgba(225,72,88,.1); }
.organizer-rating-card.is-rating-2, .organizer-activity-ratings > div.is-rating-2 { border-color: rgba(230,120,55,.32); color: #e67837; background: rgba(230,120,55,.1); }
.organizer-rating-card.is-rating-3, .organizer-activity-ratings > div.is-rating-3 { border-color: rgba(220,164,42,.34); color: #dca42a; background: rgba(220,164,42,.11); }
.organizer-rating-card.is-rating-4, .organizer-activity-ratings > div.is-rating-4 { border-color: rgba(62,163,132,.34); color: #3ea384; background: rgba(62,163,132,.11); }
.organizer-rating-card.is-rating-5, .organizer-activity-ratings > div.is-rating-5 { border-color: rgba(35,176,104,.34); color: #23b068; background: rgba(35,176,104,.12); }
.organizer-rating-card.is-rating-none, .organizer-activity-ratings > div.is-rating-none { color: var(--hg-muted); }
.organizer-rating-card[class*="is-rating-"] strong, .organizer-activity-ratings > div[class*="is-rating-"] strong { color: currentColor; }
.organizer-activity-ratings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
.organizer-activity-ratings small { color: var(--hg-muted); font-size: 11px; }
.organizer-comment-list { display: grid; gap: 10px; }
.organizer-comment-card { margin: 0; padding: 16px; border: 1px solid var(--hg-border); border-radius: 16px; background: var(--hg-surface-2); box-shadow: 0 5px 16px rgba(15,20,38,.04); }
.organizer-comment-text { display: flex; gap: 11px; align-items: flex-start; }
.organizer-comment-text > i { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 10px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 14px; }
.organizer-comment-text p { margin: 4px 0 0; color: var(--hg-ink); font-size: 14px; line-height: 1.6; }
.organizer-comment-wish { display: flex; gap: 10px; align-items: center; margin-top: 13px; padding: 11px 12px; border: 1px solid rgba(220,164,42,.22); border-radius: 12px; color: #dca42a; background: rgba(220,164,42,.08); }
.organizer-comment-wish > i { flex: 0 0 auto; font-size: 16px; }
.organizer-comment-wish > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.organizer-comment-wish span { color: currentColor; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.organizer-comment-wish strong { color: var(--hg-ink); font-size: 13px; font-weight: 700; line-height: 1.45; }
.organizer-feedback-reward { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--hg-border); }
.organizer-feedback-reward__issued, .organizer-feedback-reward__toggle { display: inline-flex; gap: 6px; align-items: center; padding: 8px 10px; border-radius: 9px; font-size: 11px; font-weight: 800; }
.organizer-feedback-reward__issued { color: #16835b; background: rgba(36,173,120,.11); }
.organizer-feedback-reward__toggle { border: 1px solid color-mix(in srgb, var(--hg-primary) 24%, var(--hg-border)); color: var(--hg-primary); background: var(--hg-surface); }
.organizer-feedback-reward__toggle:hover, .organizer-feedback-reward__toggle:focus-visible { border-color: var(--hg-primary); background: var(--hg-primary-soft); }
.organizer-feedback-bonus-form { display: grid; grid-template-columns: minmax(180px, .36fr) minmax(320px, 1fr) auto; gap: 12px; align-items: end; margin-top: 13px; padding: 16px; border: 1px solid var(--hg-border); border-radius: 14px; background: var(--hg-surface); }
.organizer-feedback-bonus-form label { min-width: 0; }
.organizer-feedback-bonus-form label > span { display: block; margin-bottom: 7px; color: var(--hg-ink); font-size: 13px; font-weight: 750; line-height: 1.35; }
.organizer-feedback-bonus-form label > span small { color: var(--hg-muted); font-size: 12px; font-weight: 500; }
.organizer-feedback-bonus-form .form-control, .organizer-feedback-bonus-form .input-group-text { min-height: 44px; padding: 9px 12px; font-size: 14px; }
.organizer-feedback-bonus-form input[type="number"] { min-width: 86px; font-size: 16px; font-weight: 800; }
.organizer-feedback-bonus-form .input-group-text { flex: 0 0 auto; white-space: nowrap; }
.organizer-feedback-bonus-form > .btn { min-height: 44px; padding: 9px 17px; font-size: 13px; }
.organizer-feedback-bonus-form > small { grid-column: 1 / -1; color: var(--hg-muted); font-size: 12px; line-height: 1.4; }
.organizer-stat-filters { gap: 10px; align-items: end; margin-bottom: 15px; padding: 13px; border: 1px solid var(--hg-border); border-radius: 16px; background: var(--hg-surface); }
.organizer-stat-filters label { min-width: 210px; }
.organizer-stat-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.organizer-stat-section { margin-bottom: 14px; }
.organizer-stat-section > h3 { margin: 0 0 12px; color: var(--hg-ink); font-size: 16px; }
.organizer-attendance-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.organizer-attendance-cards > article { padding: 13px; border: 1px solid var(--hg-border); border-radius: 15px; }
.organizer-attendance-cards time { color: var(--hg-primary); font-size: 8px; font-weight: 800; }
.organizer-attendance-cards h4 { margin: 3px 0 10px; color: var(--hg-ink); font-size: 13px; }
.organizer-stat-row { display: flex; flex-wrap: wrap; gap: 7px; }
.organizer-stat-row > span { display: flex; min-width: 72px; flex: 1; flex-direction: column; padding: 7px; border-radius: 9px; color: var(--hg-muted); background: var(--hg-surface-2); font-size: 7px; }
.organizer-stat-row strong { margin-top: 2px; color: var(--hg-ink); font-size: 13px; }
.organizer-stat-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.organizer-ranking-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; padding: 9px 0; border-top: 1px solid var(--hg-border); }
.organizer-ranking-row span { color: var(--hg-ink); font-size: 10px; font-weight: 700; }
.organizer-ranking-row small { grid-column: 1; color: var(--hg-muted); font-size: 8px; }
.organizer-ranking-row strong { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--hg-primary); }
.organizer-reaction-total { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.organizer-reaction-total span { display: flex; align-items: center; flex-direction: column; padding: 16px; border-radius: 14px; background: var(--hg-surface-2); font-size: 21px; }
.organizer-reaction-total strong { color: var(--hg-ink); font-size: 22px; }
.organizer-reaction-total small { color: var(--hg-muted); font-size: 8px; }
.organizer-filter-sheet { height: auto !important; border-radius: 22px 22px 0 0; background: var(--hg-surface); }
.organizer-filter-sheet form { display: grid; gap: 13px; }
.event-program-public { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hg-border); }
.event-program-public h2 { margin: 0 0 12px; color: var(--hg-ink); font-size: 19px; }
.event-program-public ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.event-program-public li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border-radius: 13px; background: var(--hg-surface-2); }
.event-program-public li > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 10px; font-weight: 800; }
.event-program-public li > div { display: flex; flex-direction: column; }
.event-program-public strong { color: var(--hg-ink); font-size: 11px; }
.event-program-public small, .event-program-public time { color: var(--hg-muted); font-size: 8px; }
.event-feedback-form-card { margin-bottom: 28px; padding: 23px; border: 1px solid var(--hg-border); border-radius: 22px; background: var(--hg-surface); box-shadow: var(--hg-shadow-sm); }
.event-feedback-motivation { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 13px; align-items: center; margin: -5px 0 18px; padding: 13px; border: 1px solid color-mix(in srgb, var(--hg-primary) 22%, var(--hg-border)); border-radius: 16px; background: linear-gradient(135deg, var(--hg-primary-soft), color-mix(in srgb, var(--hg-surface) 88%, var(--hg-primary-soft))); }
.event-feedback-motivation > span { display: inline-flex; gap: 5px; align-items: center; justify-content: center; min-height: 52px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--hg-primary), #7b6df5); font-size: 18px; font-weight: 850; box-shadow: 0 9px 22px rgba(91,76,240,.2); }
.event-feedback-motivation strong { display: block; color: var(--hg-ink); font-size: 12px; }
.event-feedback-motivation p { margin: 3px 0 0; color: var(--hg-muted); font-size: 10px; line-height: 1.5; }
.event-feedback-rating-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.event-feedback-rating-grid label { display: grid; gap: 5px; color: var(--hg-ink); font-size: 10px; font-weight: 750; }
.event-feedback-form-card > form > .form-label { display: block; }
.event-feedback-submit { display: flex; gap: 15px; align-items: center; justify-content: space-between; margin-top: 15px; }
.event-feedback-submit small { color: var(--hg-muted); font-size: 9px; }
.event-feedback-submit i { color: #16835b; }
.event-feedback-thanks { display: flex; gap: 14px; align-items: center; }
.event-feedback-thanks > i { color: #16835b; font-size: 32px; }
.event-feedback-thanks h2 { margin: 0 0 4px; color: var(--hg-ink); }
.event-feedback-thanks p { margin: 0; color: var(--hg-muted); font-size: 11px; }
.event-feedback-thanks p strong { color: #16835b; }
.user-perspective-banner { position: fixed; z-index: 1055; top: 0; right: 0; left: 0; display: flex; min-height: 42px; gap: 12px; align-items: center; justify-content: center; padding: 8px 16px; color: #fff; background: #26314f; font-size: 10px; box-shadow: 0 6px 18px rgba(10,15,30,.22); }
.user-perspective-banner.is-preview { background: #256c60; }
.user-perspective-banner.is-impersonation { background: #a43c4c; }
.user-perspective-banner span { display: inline-flex; gap: 6px; align-items: center; }
.user-perspective-banner button { padding: 4px 9px; border: 1px solid rgba(255,255,255,.5); border-radius: 8px; color: #fff; background: transparent; font-size: 9px; font-weight: 800; }
.has-user-perspective .site-navbar { top: 42px; }
.has-user-perspective .section-page-hero, .has-user-perspective .users-hero, .has-user-perspective .member-profile-hero { padding-top: calc(42px + 96px); }
.public-page.has-user-perspective, .auth-page.has-user-perspective { padding-top: 42px; }
.user-perspective-help { margin: 0 0 13px; color: var(--hg-muted); font-size: 10px; line-height: 1.55; }
#participantPreviewSheet form { display: grid; gap: 12px; }
#participantPreviewSheet form label { display: grid; gap: 6px; color: var(--hg-muted); font-size: 10px; font-weight: 750; }

@media (max-width: 991.98px) {
    .organizer-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .organizer-overview-grid, .organizer-feedback-layout { grid-template-columns: 1fr; }
    .organizer-games-grid, .organizer-stat-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .organizer-program-layout { grid-template-columns: 1fr; }
    .organizer-program-layout > aside { padding: 18px 0 0; border-top: 1px solid var(--hg-border); border-left: 0; }
}

@media (max-width: 767.98px) {
    .organizer-hero p { max-width: 310px; }
    .organizer-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-right: 0;
        margin-left: 0;
        padding: 6px;
        overflow: visible;
        border: 1px solid var(--hg-border);
        border-radius: 17px;
        background: var(--hg-surface);
    }
    .organizer-tabs a {
        min-width: 0;
        justify-content: center;
        padding-right: 8px;
        padding-left: 8px;
        text-align: center;
        white-space: normal;
    }
    .organizer-section-heading { align-items: flex-start; }
    .organizer-section-heading > .btn, .organizer-section-heading > .organizer-primary-actions { flex: 0 0 auto; }
    .organizer-section-heading p { font-size: 10px; }
    .organizer-kpi-grid { gap: 8px; }
    .organizer-kpi-card, .organizer-stat-summary article { padding: 13px; border-radius: 15px; }
    .organizer-kpi-grid strong, .organizer-stat-summary strong { font-size: 24px; }
    .organizer-overview-grid { grid-template-columns: 1fr; }
    .organizer-next-event, .organizer-gaps-card, .organizer-program-card, .organizer-feedback-detail, .organizer-stat-section, .organizer-game-editor, .event-feedback-form-card { padding: 16px; border-radius: 18px; }
    .organizer-card-head, .organizer-program-head { align-items: flex-start; flex-direction: column; }
    .organizer-ready-value { position: absolute; align-self: flex-end; }
    .organizer-next-event { position: relative; }
    .organizer-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .organizer-quick-actions > span { grid-column: 1 / -1; }
    .organizer-quick-actions a, .organizer-quick-actions button { min-height: 48px; }
    .organizer-event-groups { grid-template-columns: repeat(4, minmax(270px, 78vw)); margin-right: -16px; padding-right: 16px; }
    .organizer-primary-actions .btn { padding-right: 10px; padding-left: 10px; font-size: 9px; }
    .organizer-inline-editor form { grid-template-columns: 1fr; }
    .organizer-inline-editor form label:nth-of-type(3) { grid-column: auto; }
    .organizer-activity-list li { grid-template-columns: 31px minmax(0, 1fr) auto; }
    .organizer-activity-list li > button { grid-column: 3; grid-row: 1; }
    .organizer-activity-list time { grid-column: 2; }
    .organizer-games-grid { grid-template-columns: 1fr; }
    .organizer-feedback-metrics { grid-template-columns: 1fr; }
    .organizer-feedback-rating-group { padding-top: 16px; padding-left: 0; border-top: 1px solid var(--hg-border); border-left: 0; }
    .organizer-feedback-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .organizer-feedback-ratings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .organizer-activity-ratings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .organizer-stat-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .organizer-attendance-cards, .organizer-stat-columns { grid-template-columns: 1fr; }
    .organizer-filter-sheet .offcanvas-body { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
    .event-feedback-rating-grid { grid-template-columns: 1fr; }
    .event-feedback-submit { align-items: stretch; flex-direction: column; }
    .event-feedback-submit .btn { width: 100%; }
    .event-feedback-motivation { grid-template-columns: 62px minmax(0, 1fr); }
    .event-feedback-motivation > span { min-height: 48px; font-size: 15px; }
    .organizer-feedback-bonus-form { grid-template-columns: 1fr; }
    .organizer-feedback-bonus-form > small { grid-column: 1; }
    .user-perspective-banner { justify-content: space-between; }
    .user-perspective-banner span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Authentication */
body.auth-page {
    position: relative;
    display: flex;
    min-height: 100%;
    align-items: center;
    padding: 44px 0;
    background:
        radial-gradient(circle at 10% 10%, rgba(91, 76, 240, .15), transparent 28%),
        radial-gradient(circle at 90% 90%, rgba(30, 157, 177, .12), transparent 30%),
        var(--hg-bg);
}
body.auth-page::before {
    content: "";
    position: fixed;
    left: -190px;
    bottom: -210px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(91, 76, 240, .09);
    border-radius: 50%;
    box-shadow: 0 0 0 70px rgba(91, 76, 240, .025), 0 0 0 140px rgba(91, 76, 240, .018);
}
.auth-page > .container { position: relative; z-index: 1; }
.auth-page .form-signin {
    max-width: 440px;
    padding: 38px;
    border: 1px solid var(--hg-border);
    border-radius: 26px;
    color: var(--hg-ink);
    background: var(--hg-surface);
    box-shadow: var(--hg-shadow);
}
.auth-logo { height: 56px; margin-bottom: 22px; }
.auth-kicker { display: block; margin-bottom: 3px; color: var(--hg-primary); font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.auth-title { margin-bottom: 6px; font-size: 29px; font-weight: 780; }
.auth-subtitle { margin-bottom: 25px; color: var(--hg-muted); font-size: 14px; }
.auth-page .form-floating { margin-bottom: 12px; }
.auth-page .form-floating > .form-control { margin: 0 !important; border-radius: 11px !important; }
.auth-page .form-floating > label { color: var(--hg-muted); }
.auth-remember { color: var(--hg-muted); font-size: 13px; text-align: left; }
.auth-remember input { margin-right: 5px; accent-color: var(--hg-primary); }
.auth-page .btn-primary { min-height: 48px; }
.auth-links { font-size: 13px; }
.auth-page .form-signin > img { height: 56px; }
.auth-page .form-signin textarea { min-height: 96px; }
.organization-suggestion-inline { margin: 18px 0; padding: 16px; border: 1px dashed var(--hg-border); border-radius: 15px; background: var(--hg-surface-2); text-align: left; }
.organization-suggestion-inline strong { display: block; margin-bottom: 3px; color: var(--hg-ink); font-size: 14px; }
.organization-suggestion-inline p { margin-bottom: 12px; color: var(--hg-muted); font-size: 12px; }
.organization-onboarding { width: 100%; max-width: 940px; margin: auto; color: var(--hg-ink); text-align: left; }
.organization-onboarding__head { max-width: 620px; margin: 0 auto 25px; text-align: center; }
.organization-onboarding__head .auth-logo { display: block; margin-right: auto; margin-left: auto; }
.organization-onboarding__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.organization-onboarding__card { padding: 28px; border: 1px solid var(--hg-border); border-radius: 24px; background: var(--hg-surface); box-shadow: var(--hg-shadow-sm); }
.organization-onboarding__card--suggest { border-color: color-mix(in srgb, var(--hg-primary) 32%, var(--hg-border)); }
.organization-onboarding__icon { display: grid; width: 46px; height: 46px; margin-bottom: 17px; place-items: center; border-radius: 14px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 20px; }
.organization-onboarding__card h2 { margin-bottom: 7px; font-size: 21px; }
.organization-onboarding__card > p { min-height: 42px; margin-bottom: 19px; color: var(--hg-muted); font-size: 13px; line-height: 1.55; }
.organization-onboarding__card .btn { min-height: 46px; }
.organization-onboarding__separator { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--hg-muted); font-size: 12px; text-transform: uppercase; }
.organization-onboarding__separator::before,
.organization-onboarding__separator::after { content: ''; flex: 1; height: 1px; background: var(--hg-border); }
.organization-onboarding__notice { display: block; margin-top: 12px; color: var(--hg-muted); line-height: 1.45; }
.organization-onboarding__logout { display: block; margin: 18px auto 0; color: var(--hg-muted); }

@media (max-width: 575.98px) {
    body.auth-page { padding: 20px 0; }
    .auth-page > .container { padding: 0 14px; }
    .auth-page .form-signin { padding: 27px 22px; border-radius: 21px; }
    .organization-onboarding__grid { grid-template-columns: 1fr; }
    .organization-onboarding__card { padding: 22px; border-radius: 20px; }
    .organization-onboarding__card > p { min-height: 0; }
}

/* Public share pages */
.public-page { min-height: 100vh; }
.public-header { border-bottom: 1px solid var(--hg-border); background: var(--hg-surface); }
.public-header .container { display: flex; min-height: 70px; align-items: center; justify-content: space-between; }
.public-brand { display: inline-flex; }
.public-brand img { width: 105px; filter: brightness(.5); }
.public-header span { color: var(--hg-muted); font-size: 13px; font-weight: 600; }
.public-page .feature-section { min-height: calc(100vh - 139px); }
.public-page .feature-section h1 { margin-bottom: 32px !important; font-size: clamp(30px, 4vw, 46px); font-weight: 780; }
.public-footer { border-top: 1px solid var(--hg-border); background: var(--hg-surface); }
.public-footer .container { display: flex; min-height: 68px; gap: 20px; align-items: center; justify-content: space-between; color: var(--hg-muted); font-size: 13px; }
.public-footer a { display: inline-flex; gap: 7px; align-items: center; font-weight: 700; }

@media (max-width: 575.98px) {
    .public-header .container, .public-footer .container { min-height: 62px; }
    .public-header span { font-size: 11px; }
    .public-footer .container { align-items: flex-start; flex-direction: column; justify-content: center; padding-top: 14px; padding-bottom: 14px; }
}

/* Discipleship tree */
.tree-banner { min-height: 280px; }
.tree-section { padding: 76px 0 100px !important; }
.tree-intro { display: flex; gap: 28px; align-items: end; justify-content: space-between; margin-bottom: 30px; }
.tree-intro .eyebrow { margin-bottom: 6px; }
.tree-intro h2 { margin-bottom: 7px; font-size: clamp(30px, 4vw, 43px); font-weight: 780; }
.tree-intro p { margin: 0; color: var(--hg-muted); }
.tree-shell { overflow: hidden; border: 1px solid var(--hg-border); border-radius: 24px; background: var(--hg-surface); box-shadow: var(--hg-shadow-sm); }
.tree-toolbar { display: flex; min-height: 72px; gap: 20px; align-items: center; padding: 12px 16px 12px 20px; border-bottom: 1px solid var(--hg-border); background: var(--hg-surface); }
.tree-summary { display: flex; gap: 11px; align-items: center; }
.tree-summary-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 18px; }
.tree-summary strong, .tree-summary small { display: block; line-height: 1.2; }
.tree-summary strong { color: var(--hg-ink); font-size: 18px; }
.tree-summary small { margin-top: 3px; color: var(--hg-muted); font-size: 11px; }
.tree-help { gap: 7px; align-items: center; margin-left: auto; color: var(--hg-muted); font-size: 12px; }
.tree-controls { display: flex; gap: 4px; align-items: center; padding: 4px; border: 1px solid var(--hg-border); border-radius: 11px; background: var(--hg-surface-2); }
.tree-control, .tree-scale { display: grid; height: 31px; place-items: center; border: 0; border-radius: 8px; color: var(--hg-muted); background: transparent; font-size: 13px; }
.tree-control { width: 31px; }
.tree-scale { min-width: 48px; padding: 0 8px; font-size: 11px; font-weight: 700; }
.tree-control:hover, .tree-scale:hover { color: var(--hg-primary); background: var(--hg-surface); }
.tree-focus { margin-left: 3px; border-left: 1px solid var(--hg-border); border-radius: 0 7px 7px 0; }
.tree-mobile-hint { display: none; }

.tree-viewport.genealogy-body {
    position: relative;
    min-height: 590px;
    padding: 54px 42px 70px;
    overflow: auto;
    color: var(--hg-ink);
    background: var(--hg-bg);
    cursor: grab;
    text-align: center;
    white-space: nowrap;
    scrollbar-color: color-mix(in srgb, var(--hg-primary) 42%, var(--hg-border)) var(--hg-surface-2);
    scrollbar-width: thin;
}
.tree-viewport:focus-visible { outline: 3px solid color-mix(in srgb, var(--hg-primary) 32%, transparent); outline-offset: -3px; }
.tree-viewport.is-dragging { cursor: grabbing; user-select: none; }
.tree-viewport::-webkit-scrollbar { width: 10px; height: 10px; }
.tree-viewport::-webkit-scrollbar-track { border-radius: 999px; background: var(--hg-surface-2); }
.tree-viewport::-webkit-scrollbar-thumb { border: 2px solid var(--hg-surface-2); border-radius: 999px; background: color-mix(in srgb, var(--hg-primary) 52%, var(--hg-border)); }

.tree-canvas { --tree-zoom: 1; display: inline-block; min-width: max-content; zoom: var(--tree-zoom); }
.discipleship-tree ul { display: flex; justify-content: center; margin: 0; padding: 38px 0 0; }
.discipleship-tree li { position: relative; float: none; padding: 38px 10px 0; list-style: none; text-align: center; }
.discipleship-tree > ul { padding-top: 0; }
.discipleship-tree > ul > li { padding-top: 0; }
.discipleship-tree li::before, .discipleship-tree li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 38px; border-top: 2px solid var(--hg-border); }
.discipleship-tree li::after { right: auto; left: 50%; border-left: 2px solid var(--hg-border); }
.discipleship-tree li:only-child::before, .discipleship-tree li:only-child::after { display: none; }
.discipleship-tree li:only-child { padding-top: 0; }
.discipleship-tree li:first-child::before, .discipleship-tree li:last-child::after { border: 0; }
.discipleship-tree li:last-child::before { border-right: 2px solid var(--hg-border); border-radius: 0 10px 0 0; }
.discipleship-tree li:first-child::after { border-radius: 10px 0 0; }
.discipleship-tree ul ul::before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 38px; border-left: 2px solid var(--hg-border); }
.discipleship-tree .tree-root-list::before { display: none; }
.discipleship-tree ul.tree-collapsed { display: none !important; }

.tree-person {
    position: relative;
    display: flex;
    width: 168px;
    min-height: 72px;
    align-items: center;
    margin: 0 auto;
    padding: 10px 10px 10px 11px;
    border: 1px solid var(--hg-border);
    border-radius: 15px;
    color: var(--hg-ink);
    background: var(--hg-surface);
    box-shadow: 0 7px 20px rgba(26, 32, 56, .08);
    white-space: normal;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tree-person:hover { border-color: color-mix(in srgb, var(--hg-primary) 48%, var(--hg-border)); box-shadow: 0 12px 28px rgba(50, 44, 115, .13); transform: translateY(-2px); }
.tree-root-node { width: 190px; border-color: color-mix(in srgb, var(--hg-primary) 52%, var(--hg-border)); background: linear-gradient(135deg, var(--hg-primary-soft), var(--hg-surface)); box-shadow: 0 12px 32px rgba(91, 76, 240, .14); }
.discipleship-tree .tree-person-link { display: flex; min-width: 0; flex: 1; gap: 9px; align-items: center; border-radius: 0; color: var(--hg-ink) !important; font-family: inherit; text-align: left; }
.tree-avatar { display: grid; min-width: 42px; height: 42px; place-items: center; border-radius: 12px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 15px; font-weight: 780; }
.tree-avatar-root { color: #fff; background: linear-gradient(135deg, var(--hg-primary), #8879f7); }
.tree-person-copy { min-width: 0; text-align: left; }
.tree-person-copy strong, .tree-person-copy small { display: block; }
.tree-person-copy strong { overflow: hidden; color: var(--hg-ink); font-size: 12px; font-weight: 740; line-height: 1.3; text-overflow: ellipsis; }
.tree-person-copy small { margin-top: 3px; color: var(--hg-muted); font-size: 9px; line-height: 1.2; }
.tree-branch-toggle { display: grid; min-width: 25px; height: 25px; margin-left: 5px; place-items: center; border: 0; border-radius: 8px; color: var(--hg-muted); background: var(--hg-surface-2); font-size: 10px; }
.tree-branch-toggle:hover { color: #fff; background: var(--hg-primary); }
.tree-empty { width: min(430px, 100%); margin: 100px auto; white-space: normal; }
.tree-empty > span { display: grid; width: 64px; height: 64px; margin: 0 auto 18px; place-items: center; border-radius: 18px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 26px; }
.tree-empty h3 { margin-bottom: 8px; font-size: 24px; }
.tree-empty p { color: var(--hg-muted); }

@media (max-width: 991.98px) {
    .tree-section { padding-top: 58px !important; }
    .tree-intro { align-items: flex-start; flex-direction: column; }
    .tree-toolbar { flex-wrap: wrap; }
    .tree-controls { margin-left: auto; }
    .tree-viewport.genealogy-body { min-height: 520px; }
}

@media (max-width: 767.98px) {
    .tree-banner { min-height: 245px; }
    .tree-section { padding: 45px 0 65px !important; }
    .tree-intro { gap: 18px; margin-bottom: 22px; }
    .tree-intro .btn { width: 100%; }
    .tree-shell { border-radius: 18px; }
    .tree-toolbar { min-height: 66px; padding: 10px 12px; }
    .tree-summary-icon { width: 38px; height: 38px; }
    .tree-controls { padding: 3px; }
    .tree-control { width: 29px; height: 29px; }
    .tree-scale { display: none; }
    .tree-controls [data-tree-action="zoom-in"], .tree-controls [data-tree-action="zoom-out"] { display: none; }
    .tree-focus { margin: 0; border: 0; border-radius: 7px; }
    .tree-mobile-hint { display: flex; gap: 7px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--hg-border); color: var(--hg-muted); background: var(--hg-surface-2); font-size: 11px; }
    .tree-viewport.genealogy-body { min-height: 0; max-height: none; padding: 20px 14px 26px; overflow: visible; cursor: default; white-space: normal; }
    .tree-canvas { display: block; min-width: 0; zoom: 1 !important; }
    .discipleship-tree, .discipleship-tree ul { display: block; width: 100%; padding: 0; }
    .discipleship-tree li, .discipleship-tree li:only-child { position: relative; width: 100%; padding: 0 0 0 25px; text-align: left; }
    .discipleship-tree li + li { margin-top: 9px; }
    .discipleship-tree li::before, .discipleship-tree li::after, .discipleship-tree ul ul::before { display: none; }
    .discipleship-tree .tree-root-list > li { padding-left: 0; }
    .discipleship-tree li > ul { position: relative; margin: 11px 0 11px 22px; padding-left: 12px; border-left: 2px solid color-mix(in srgb, var(--hg-primary) 32%, var(--hg-border)); }
    .discipleship-tree li > ul > li::before { content: ""; position: absolute; top: 35px; left: -12px; display: block; width: 12px; height: 0; border-top: 2px solid color-mix(in srgb, var(--hg-primary) 32%, var(--hg-border)); }
    .tree-person, .tree-root-node { width: 100%; min-height: 68px; margin: 0; }
    .tree-person-copy strong { font-size: 13px; }
    .tree-person-copy small { font-size: 10px; }
    .tree-empty { margin: 55px auto; }
}

/* Mobile app shell */
.mobile-app-nav,
.mobile-more-sheet { display: none; }

.mobile-more-toggle,
.mobile-more-backdrop { display: none; }

.mobile-filter-menu,
.mobile-saved-games { display: none; }

body {
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 767.98px) {
    html { scroll-padding-top: calc(76px + env(safe-area-inset-top)); }

    body.has-mobile-nav {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    body.has-mobile-nav .site-navbar {
        min-height: calc(62px + env(safe-area-inset-top));
        padding-top: env(safe-area-inset-top);
    }

    body.has-mobile-nav .site-navbar .container {
        position: relative;
        justify-content: center;
    }

    body.has-mobile-nav .site-navbar .navbar-brand {
        margin-right: 0;
    }

    body.has-mobile-nav .site-navbar .navbar-brand img {
        width: 94px;
    }

    body.has-mobile-nav .site-navbar .navbar-toggler,
    body.has-mobile-nav .site-navbar .navbar-collapse {
        display: none !important;
    }

    body.has-mobile-nav .notification-slot--mobile {
        position: absolute;
        top: 50%;
        display: flex;
        transform: translateY(-50%);
    }

    body.has-mobile-nav .notification-slot--mobile { right: 20px; }

    .notification-center-panel {
        top: calc(66px + env(safe-area-inset-top));
        right: 10px;
        left: 10px;
        width: auto;
        max-height: calc(100vh - 150px - env(safe-area-inset-bottom));
        border-radius: 18px;
    }

    .notification-center-panel__list { max-height: calc(100vh - 290px - env(safe-area-inset-bottom)); }

    body.has-mobile-nav .home-hero {
        padding-top: calc(103px + env(safe-area-inset-top));
    }

    body.has-mobile-nav .page-banner-section {
        margin-top: calc(62px + env(safe-area-inset-top));
    }

    body.has-mobile-nav .service-section.pt-130 {
        padding-top: calc(102px + env(safe-area-inset-top));
    }

    body.has-mobile-nav .app-footer { display: none; }

    .mobile-app-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;
        display: grid;
        min-height: calc(76px + env(safe-area-inset-bottom));
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        align-items: start;
        padding: 7px 5px max(7px, env(safe-area-inset-bottom));
        border-top: 1px solid color-mix(in srgb, var(--hg-border) 88%, transparent);
        background: var(--hg-surface);
        box-shadow: 0 -10px 35px rgba(22, 25, 44, .08);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translate3d(0, 0, 0);
        will-change: transform;
    }

    .mobile-app-nav--compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mobile-more-toggle {
        position: fixed;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

    .mobile-more-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1041;
        background: rgba(9, 12, 24, .56);
        opacity: 0;
        transition: opacity .25s ease;
    }

    .mobile-more-toggle:checked ~ .mobile-more-backdrop {
        display: block;
        opacity: 1;
    }

    .mobile-more-toggle:checked ~ .mobile-more-sheet {
        visibility: visible;
        transform: none;
    }

    .mobile-app-nav__item {
        position: relative;
        display: flex;
        min-width: 0;
        min-height: 54px;
        gap: 3px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 5px 2px 2px;
        border: 0;
        border-radius: 13px;
        color: var(--hg-muted);
        background: transparent;
        font-family: inherit;
        font-size: 10px;
        font-weight: 680;
        line-height: 1.15;
        text-align: center;
        transition: color .18s ease, background-color .18s ease, transform .18s ease;
        cursor: pointer;
    }

    .mobile-app-nav__item > i {
        font-size: 20px;
        line-height: 1;
    }

    .mobile-app-nav__item:active { transform: scale(.94); }
    .mobile-app-nav__item:hover,
    .mobile-app-nav__item.is-active { color: var(--hg-primary); }
    .mobile-app-nav__item.is-active:not(.mobile-app-nav__item--primary) { background: var(--hg-primary-soft); }
    .mobile-app-nav__item.is-disabled { color: color-mix(in srgb, var(--hg-muted) 58%, transparent); cursor: default; }
    .mobile-app-nav__item.is-disabled:hover { color: color-mix(in srgb, var(--hg-muted) 58%, transparent); }

    .mobile-app-nav__item--primary {
        padding-top: 0;
    }

    .mobile-app-nav__primary-icon {
        display: grid;
        width: 42px;
        height: 42px;
        margin-top: -16px;
        place-items: center;
        border: 4px solid var(--hg-surface);
        border-radius: 15px;
        color: #fff;
        background: linear-gradient(135deg, #7467f5, #4b3cda);
        box-shadow: 0 8px 18px rgba(79, 64, 220, .3);
        font-size: 18px;
    }

    .mobile-app-nav__item.is-disabled .mobile-app-nav__primary-icon {
        color: var(--hg-muted);
        background: var(--hg-surface-2);
        box-shadow: none;
    }

    .mobile-app-nav__item--primary > span:last-child { margin-top: 1px; }

    .mobile-more-sheet {
        z-index: 1042;
        display: flex;
        height: auto;
        max-height: min(86dvh, 690px);
        flex-direction: column;
        overflow: hidden;
        padding-bottom: env(safe-area-inset-bottom);
        border: 0;
        border-radius: 26px 26px 0 0;
        color: var(--hg-ink);
        background: var(--hg-surface);
        box-shadow: 0 -18px 50px rgba(20, 24, 45, .22);
    }

    .mobile-more-sheet.is-open {
        visibility: visible;
        transform: none;
    }

    .mobile-more-sheet::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        width: 42px;
        height: 4px;
        border-radius: 999px;
        background: var(--hg-border);
        transform: translateX(-50%);
    }

    .mobile-more-sheet .offcanvas-header {
        align-items: flex-start;
        padding: 27px 20px 14px;
    }

    .mobile-more-sheet .offcanvas-title {
        color: var(--hg-ink);
        font-size: 22px;
        font-weight: 780;
    }

    .mobile-more-sheet__eyebrow {
        display: block;
        margin-bottom: 3px;
        color: var(--hg-primary);
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .14em;
    }

    .mobile-more-sheet .offcanvas-body {
        min-height: 0;
        padding: 4px 20px 22px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .community-footer__cta { display: flex; align-items: flex-start; flex-direction: column; }
    .community-footer__cta .btn { grid-column: auto; width: 100%; justify-content: center; }
    .community-footer__grid { gap: 33px 20px; }
    .community-footer__brand { min-width: 100%; }
    .community-footer__nav, .community-footer__contact { min-width: calc(50% - 10px); }
    .community-footer__bottom { gap: 12px; grid-template-columns: 1fr; }
    .community-footer__bottom a { justify-self: start; }

    .desktop-filter-nav { display: none !important; }

    .mobile-filter-menu {
        display: block;
        overflow: hidden;
        border: 1px solid var(--hg-border);
        border-radius: 18px;
        background: var(--hg-surface);
        box-shadow: var(--hg-shadow-sm);
    }

    .mobile-saved-games {
        display: flex;
        min-height: 64px;
        gap: 11px;
        align-items: center;
        padding: 10px 13px;
        border: 1px solid color-mix(in srgb, var(--hg-primary) 34%, var(--hg-border));
        border-radius: 17px;
        color: var(--hg-ink);
        background: linear-gradient(120deg, var(--hg-primary-soft), var(--hg-surface) 68%);
        box-shadow: var(--hg-shadow-sm);
    }

    .mobile-saved-games__icon {
        display: grid;
        min-width: 41px;
        height: 41px;
        place-items: center;
        border-radius: 12px;
        color: var(--hg-primary);
        background: var(--hg-surface);
        box-shadow: 0 4px 12px rgba(45, 39, 105, .1);
        font-size: 17px;
    }

    .mobile-saved-games__copy {
        display: flex;
        min-width: 0;
        flex: 1;
        flex-direction: column;
    }

    .mobile-saved-games__copy small {
        margin-bottom: 2px;
        color: var(--hg-muted);
        font-size: 9px;
        font-weight: 760;
        text-transform: uppercase;
        letter-spacing: .09em;
    }

    .mobile-saved-games__copy strong {
        color: var(--hg-ink);
        font-size: 14px;
        font-weight: 750;
    }

    .mobile-saved-games > b {
        display: grid;
        min-width: 25px;
        height: 25px;
        place-items: center;
        border-radius: 999px;
        color: #fff;
        background: var(--hg-primary);
        font-size: 10px;
    }

    .mobile-saved-games__arrow { color: var(--hg-muted); font-size: 13px; }

    .mobile-saved-games.is-active {
        border-color: var(--hg-primary);
        box-shadow: 0 8px 22px rgba(79, 64, 220, .16);
    }

    .mobile-saved-games.is-disabled {
        opacity: .45;
        pointer-events: none;
    }

    .mobile-filter-summary {
        display: flex;
        min-height: 68px;
        gap: 12px;
        align-items: center;
        padding: 11px 14px;
        color: var(--hg-ink);
        cursor: pointer;
        list-style: none;
        user-select: none;
    }

    .mobile-filter-summary::-webkit-details-marker { display: none; }

    .mobile-filter-summary__icon {
        display: grid;
        min-width: 43px;
        height: 43px;
        place-items: center;
        border-radius: 13px;
        color: #fff;
        background: linear-gradient(135deg, #7568f5, #5040dc);
        box-shadow: 0 7px 16px rgba(79, 64, 220, .22);
        font-size: 18px;
    }

    .mobile-filter-summary__copy {
        display: flex;
        min-width: 0;
        flex: 1;
        flex-direction: column;
    }

    .mobile-filter-summary__copy small {
        margin-bottom: 2px;
        color: var(--hg-muted);
        font-size: 9px;
        font-weight: 760;
        text-transform: uppercase;
        letter-spacing: .1em;
    }

    .mobile-filter-summary__copy strong {
        overflow: hidden;
        color: var(--hg-ink);
        font-size: 14px;
        font-weight: 740;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-filter-summary__chevron {
        display: grid;
        width: 32px;
        height: 32px;
        place-items: center;
        border-radius: 10px;
        color: var(--hg-muted);
        background: var(--hg-surface-2);
        transition: transform .2s ease;
    }

    .mobile-filter-menu[open] .mobile-filter-summary__chevron { transform: rotate(180deg); }

    .mobile-filter-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 12px;
        border-top: 1px solid var(--hg-border);
        background: var(--hg-surface-2);
    }

    .mobile-filter-option {
        position: relative;
        display: flex;
        min-width: 0;
        min-height: 48px;
        gap: 9px;
        align-items: center;
        padding: 9px 11px;
        border: 1px solid var(--hg-border);
        border-radius: 13px;
        color: var(--hg-muted);
        background: var(--hg-surface);
        font-size: 11px;
        font-weight: 680;
        line-height: 1.25;
    }

    .mobile-filter-option > i {
        display: grid;
        min-width: 27px;
        height: 27px;
        place-items: center;
        border-radius: 8px;
        color: var(--hg-primary);
        background: var(--hg-primary-soft);
        font-size: 13px;
    }

    .mobile-filter-option span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-filter-option.is-active {
        border-color: color-mix(in srgb, var(--hg-primary) 38%, var(--hg-border));
        color: var(--hg-primary);
        background: var(--hg-primary-soft);
    }

    .mobile-filter-option.is-active > i {
        color: #fff;
        background: var(--hg-primary);
    }

    .mobile-filter-option b {
        display: grid;
        min-width: 20px;
        height: 20px;
        margin-left: auto;
        place-items: center;
        border-radius: 999px;
        color: #fff;
        background: #d64555;
        font-size: 9px;
    }

    .mobile-filter-option.is-disabled {
        opacity: .45;
        pointer-events: none;
    }

    .mobile-more-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .mobile-more-group + .mobile-more-group { margin-top: 22px; }

    .mobile-more-link {
        display: flex;
        min-width: 0;
        min-height: 104px;
        gap: 9px;
        align-items: flex-start;
        flex-direction: column;
        padding: 14px;
        border: 1px solid var(--hg-border);
        border-radius: 17px;
        color: var(--hg-ink);
        background: var(--hg-surface-2);
        font-family: inherit;
        text-align: left;
    }

    .mobile-more-link span {
        display: grid;
        width: 34px;
        height: 34px;
        place-items: center;
        border-radius: 11px;
        color: var(--hg-primary);
        background: var(--hg-primary-soft);
        font-size: 16px;
    }

    .mobile-more-link strong {
        color: inherit;
        font-size: 11px;
        font-weight: 720;
        line-height: 1.3;
    }

    .mobile-more-link--danger { color: #d64555; }
    .mobile-more-link--danger span { color: #d64555; background: rgba(214,69,85,.1); }

    .mobile-install-button,
    .mobile-logout,
    .ios-install-hint {
        width: 100%;
        margin-top: 14px;
        border-radius: 15px;
        font-family: inherit;
    }

    .mobile-install-button {
        display: flex;
        min-height: 60px;
        gap: 12px;
        align-items: center;
        padding: 11px 14px;
        border: 0;
        color: #fff;
        background: linear-gradient(135deg, #6d60f2, #4939d6);
        text-align: left;
    }

    .mobile-install-button[hidden] { display: none; }
    .mobile-install-button > i:first-child { font-size: 21px; }
    .mobile-install-button > i:last-child { margin-left: auto; }
    .mobile-install-button span { display: flex; flex: 1; flex-direction: column; }
    .mobile-install-button strong { font-size: 13px; }
    .mobile-install-button small { margin-top: 2px; color: rgba(255, 255, 255, .72); font-size: 10px; }

    .ios-install-hint {
        min-height: 54px;
        gap: 11px;
        align-items: center;
        padding: 12px 14px;
        color: var(--hg-muted);
        background: var(--hg-primary-soft);
        font-size: 11px;
        line-height: 1.45;
    }

    .ios-install-hint:not([hidden]) { display: flex; }

    .mobile-logout {
        min-height: 46px;
        border: 0;
        color: #d64555;
        background: transparent;
        font-size: 13px;
        font-weight: 700;
    }

    .btn:not(.btn-sm),
    .form-control,
    .form-select { min-height: 46px; }

    .nav-pills,
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .nav-pills::-webkit-scrollbar,
    .nav-tabs::-webkit-scrollbar { display: none; }

    .scroll-top { display: none !important; }
}

/* Notifications history */
.notifications-history { max-width: 900px; }
.notifications-history__toolbar { display: flex; gap: 18px; align-items: center; justify-content: space-between; margin-bottom: 18px; padding: 16px 18px; border: 1px solid var(--hg-border); border-radius: 16px; background: var(--hg-surface); }
.notifications-history__toolbar p { margin: 0; color: var(--hg-muted); }
.notifications-history__actions,
.notification-history-item__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.notifications-history__list { overflow: hidden; border: 1px solid var(--hg-border); border-radius: 20px; background: var(--hg-surface); box-shadow: var(--hg-shadow-sm); }
.notification-history-item { display: flex; gap: 16px; align-items: center; padding: 19px 20px; border-bottom: 1px solid var(--hg-border); }
.notification-history-item:last-child { border-bottom: 0; }
.notification-history-item.is-unread { background: color-mix(in srgb, var(--hg-primary-soft) 58%, var(--hg-surface)); }
.notification-history-item__copy { min-width: 0; flex: 1; }
.notification-history-item__copy strong { display: block; margin-bottom: 3px; color: var(--hg-ink); }
.notification-history-item__copy p { margin: 0 0 5px; color: var(--hg-muted); font-size: 13px; line-height: 1.5; }
.notification-history-item__copy time { color: var(--hg-muted); font-size: 11px; }
.notification-history-empty { padding: 70px 25px; color: var(--hg-muted); text-align: center; }
.notification-history-empty > i { color: var(--hg-primary); font-size: 40px; }
.notification-history-empty h2 { margin: 14px 0 6px; color: var(--hg-ink); font-size: 22px; }
.notifications-pagination { display: flex; gap: 15px; align-items: center; justify-content: center; margin-top: 24px; color: var(--hg-muted); font-size: 13px; }

/* Read-only audit log */
.audit-log-page { max-width: 1160px; }
.audit-filter-card { margin-bottom: 28px; padding: 24px; border: 1px solid var(--hg-border); border-radius: 22px; background: var(--hg-surface); box-shadow: var(--hg-shadow-sm); }
.audit-filter-card__heading { display: flex; gap: 18px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.audit-filter-card__heading h2 { margin: 3px 0 0; color: var(--hg-ink); font-size: 22px; }
.audit-scope-badge { display: inline-flex; max-width: 320px; gap: 7px; align-items: center; padding: 8px 11px; border-radius: 999px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 12px; font-weight: 750; }
.audit-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.audit-filter-grid .form-label { margin-bottom: 6px; color: var(--hg-muted); font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.audit-filter-actions { display: flex; gap: 9px; margin-top: 18px; }
.audit-results-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 12px; }
.audit-results-heading h2 { margin: 0; color: var(--hg-ink); font-size: 22px; }
.audit-results-heading span { color: var(--hg-muted); font-size: 12px; }
.audit-log-list { display: grid; gap: 12px; }
.audit-log-item { overflow: hidden; border: 1px solid var(--hg-border); border-radius: 18px; background: var(--hg-surface); box-shadow: var(--hg-shadow-sm); }
.audit-log-item__top { display: flex; gap: 14px; align-items: center; padding: 17px 19px; }
.audit-log-item__icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 13px; color: var(--hg-primary); background: var(--hg-primary-soft); }
.audit-log-item__summary { min-width: 0; flex: 1; }
.audit-log-item__summary h3 { margin: 0 0 6px; color: var(--hg-ink); font-size: 16px; }
.audit-log-item__meta { display: flex; flex-wrap: wrap; gap: 5px 16px; color: var(--hg-muted); font-size: 11px; }
.audit-log-item__meta span { display: inline-flex; min-width: 0; gap: 5px; align-items: center; }
.audit-log-item__scope { max-width: 220px; padding: 6px 9px; overflow: hidden; border-radius: 9px; color: var(--hg-muted); background: var(--hg-surface-2); font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.audit-log-details { border-top: 1px solid var(--hg-border); }
.audit-log-details summary { padding: 11px 19px; color: var(--hg-primary); cursor: pointer; font-size: 12px; font-weight: 750; list-style-position: inside; }
.audit-log-details__body { padding: 4px 19px 19px; }
.audit-technical-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.audit-technical-meta > div { min-width: 0; padding: 10px; border-radius: 10px; background: var(--hg-surface-2); }
.audit-technical-meta dt { margin-bottom: 3px; color: var(--hg-muted); font-size: 9px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.audit-technical-meta dd { margin: 0; overflow-wrap: anywhere; color: var(--hg-ink); font-size: 11px; }
.audit-change-table { overflow: hidden; border: 1px solid var(--hg-border); border-radius: 12px; }
.audit-change-table__row { display: grid; grid-template-columns: minmax(130px, .7fr) minmax(0, 1fr) minmax(0, 1fr); }
.audit-change-table__row > * { min-width: 0; padding: 9px 11px; overflow-wrap: anywhere; border-top: 1px solid var(--hg-border); color: var(--hg-ink); font-size: 11px; }
.audit-change-table__row > * + * { border-left: 1px solid var(--hg-border); }
.audit-change-table__head > * { border-top: 0; color: var(--hg-muted); background: var(--hg-surface-2); font-size: 9px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.audit-change-table code { color: var(--hg-primary); background: transparent; }
.audit-no-changes { margin: 0; color: var(--hg-muted); font-size: 12px; }
.audit-log-empty { padding: 64px 24px; border: 1px dashed var(--hg-border); border-radius: 20px; color: var(--hg-muted); background: var(--hg-surface); text-align: center; }
.audit-log-empty > i { color: var(--hg-primary); font-size: 38px; }
.audit-log-empty h2 { margin: 12px 0 5px; color: var(--hg-ink); font-size: 21px; }
.audit-log-empty p { margin: 0; }

@media (max-width: 991.98px) {
    .audit-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .audit-technical-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .notifications-history__toolbar { align-items: stretch; flex-direction: column; }
    .notifications-history__actions { align-items: stretch; flex-direction: column; }
    .notifications-history__actions .btn { width: 100%; }
    .notification-history-item { align-items: flex-start; padding: 16px; }
    .notification-history-item__actions { align-self: center; }
    .notification-history-item__actions form .btn { width: 40px; overflow: hidden; padding-right: 0; padding-left: 0; color: transparent; white-space: nowrap; }
    .notification-history-item__actions form .btn i { color: currentColor; }
    .notification-history-item__actions form .btn-primary i { color: #fff; }
    .notification-history-item__actions form .btn-outline-secondary i { color: var(--hg-ink); }
    .notification-push-control--page { align-items: flex-start; flex-wrap: wrap; }
    .notification-push-control--page > button { width: 100%; }
    .audit-filter-card { padding: 17px; border-radius: 17px; }
    .audit-filter-card__heading { align-items: flex-start; flex-direction: column; }
    .audit-filter-grid { grid-template-columns: 1fr; }
    .audit-filter-actions { align-items: stretch; flex-direction: column; }
    .audit-log-item__top { align-items: flex-start; padding: 15px; }
    .audit-log-item__scope { display: none; }
    .audit-log-item__meta { flex-direction: column; }
    .audit-log-details summary { padding-right: 15px; padding-left: 15px; }
    .audit-log-details__body { padding-right: 15px; padding-left: 15px; }
    .audit-technical-meta { grid-template-columns: 1fr; }
    .audit-change-table { overflow-x: auto; }
    .audit-change-table__row { min-width: 620px; }
}

@media (max-width: 374.98px) {
    .mobile-app-nav { padding-right: 3px; padding-left: 3px; }
    .mobile-app-nav__item { font-size: 9.5px; }
    .mobile-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (display-mode: standalone) and (max-width: 767.98px) {
    body.has-mobile-nav .site-navbar {
        box-shadow: 0 1px 0 var(--hg-border);
    }
}

/* Senior leader user management */
.users-hero { position: relative; overflow: hidden; padding: 142px 0 68px; color: #fff; background: linear-gradient(128deg, #24205e 0%, #4d3ed1 56%, #7567f6 100%); }
.users-hero::before { position: absolute; inset: 0; background-image: radial-gradient(circle at 10% 20%, rgba(255,255,255,.13) 0 1px, transparent 1.5px); background-size: 24px 24px; content: ''; opacity: .35; }
.users-hero__inner { position: relative; z-index: 1; display: flex; min-height: 210px; gap: 50px; align-items: center; justify-content: space-between; }
.users-hero__copy { max-width: 680px; }
.users-hero__eyebrow { display: inline-flex; gap: 8px; align-items: center; padding: 7px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.1); font-size: 12px; font-weight: 750; letter-spacing: .04em; backdrop-filter: blur(10px); }
.users-hero h1 { margin: 17px 0 12px; color: #fff; font-size: clamp(38px, 5vw, 62px); letter-spacing: -.035em; }
.users-hero__copy > p { max-width: 620px; margin: 0; color: rgba(255,255,255,.75); font-size: 17px; line-height: 1.65; }
.users-hero__breadcrumb { display: flex; gap: 9px; align-items: center; margin-top: 26px; font-size: 12px; }
.users-hero__breadcrumb a { color: rgba(255,255,255,.75); }
.users-hero__breadcrumb a:hover { color: #fff; }
.users-hero__breadcrumb i { font-size: 9px; opacity: .55; }
.users-hero__breadcrumb span { color: #fff; font-weight: 700; }
.users-hero__visual { position: relative; width: 250px; height: 210px; flex: 0 0 250px; }
.users-hero__icon { position: absolute; top: 28px; left: 55px; z-index: 2; display: grid; width: 140px; height: 140px; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 42px; background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.08)); box-shadow: 0 28px 60px rgba(22,15,78,.3); font-size: 58px; backdrop-filter: blur(12px); transform: rotate(-5deg); }
.users-hero__member { position: absolute; z-index: 3; display: grid; width: 44px; height: 44px; place-items: center; border: 3px solid rgba(255,255,255,.8); border-radius: 50%; box-shadow: 0 10px 24px rgba(22,15,78,.25); }
.users-hero__member--one { top: 5px; right: 26px; color: #c25371; background: #ffd6e1; }
.users-hero__member--two { right: 2px; bottom: 27px; color: #25816c; background: #cbf5e7; }
.users-hero__member--three { bottom: 4px; left: 21px; color: #8c5c20; background: #ffe4b8; }
.users-hero__orb { position: absolute; border-radius: 50%; background: rgba(255,255,255,.12); }
.users-hero__orb--one { top: 8px; left: 2px; width: 28px; height: 28px; }
.users-hero__orb--two { top: 85px; right: 0; width: 18px; height: 18px; }

.user-manager-section { padding: 38px 0 64px; background: color-mix(in srgb, var(--hg-surface-2) 54%, var(--hg-surface)); }
.user-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.user-stat-card { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 13px; align-items: center; overflow: hidden; min-height: 128px; padding: 20px; border: 1px solid var(--hg-border); border-radius: 20px; color: inherit; background: var(--hg-surface); box-shadow: 0 6px 22px rgba(26,32,56,.045); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.user-stat-card:hover { border-color: color-mix(in srgb, currentColor 42%, var(--hg-border)); color: inherit; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(26,32,56,.08); }
.user-stat-card.is-active { border-color: currentColor; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 10%, transparent); }
.user-stat-card::after { position: absolute; top: -34px; right: -34px; width: 90px; height: 90px; border-radius: 50%; background: currentColor; content: ''; opacity: .045; }
.user-stat-card__icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; font-size: 21px; }
.user-stat-card div { display: flex; min-width: 0; flex-direction: column; }
.user-stat-card strong { color: var(--hg-ink); font-size: 29px; line-height: 1; }
.user-stat-card div span { overflow: hidden; margin-top: 6px; color: var(--hg-muted); font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.user-stat-card small { grid-column: 1 / -1; color: var(--hg-muted); font-size: 10px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; }
.user-stat-card--total { color: #5b4cf0; }.user-stat-card--total .user-stat-card__icon { background: #eeecff; }
.user-stat-card--active { color: #16835b; }.user-stat-card--active .user-stat-card__icon { background: rgba(22,131,91,.1); }
.user-stat-card--banned { color: #c13b4d; }.user-stat-card--banned .user-stat-card__icon { background: rgba(193,59,77,.1); }
.user-stat-card--leaders { color: #b47318; }.user-stat-card--leaders .user-stat-card__icon { background: rgba(234,159,47,.13); }
    .mobile-more-section-title { display: flex; gap: 7px; align-items: center; margin: 0 0 9px; color: var(--hg-primary); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.user-manager-card { overflow: hidden; border: 1px solid var(--hg-border); border-radius: 24px; background: var(--hg-surface); box-shadow: 0 14px 40px rgba(26,32,56,.07); }
.user-manager-head { display: flex; gap: 24px; align-items: center; justify-content: space-between; padding: 26px 30px; border-bottom: 1px solid var(--hg-border); }
.user-manager-kicker { display: inline-flex; gap: 7px; align-items: center; color: var(--hg-primary); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.user-manager-head h2 { margin: 4px 0; font-size: clamp(25px, 3vw, 31px); letter-spacing: -.02em; }
.user-manager-head p { max-width: 700px; margin: 0; color: var(--hg-muted); }
.user-manager-head p strong { color: var(--hg-ink); }
.user-manager-head .btn { flex: 0 0 auto; }
.user-manager-head .btn-primary { padding-right: 20px; padding-left: 20px; border: 0; background: linear-gradient(135deg, var(--hg-primary), var(--hg-primary-strong)); box-shadow: 0 10px 24px rgba(91,76,240,.22); }
.user-manager-filters { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(190px, 260px) auto auto; gap: 10px; padding: 18px 30px; border-bottom: 1px solid var(--hg-border); background: color-mix(in srgb, var(--hg-surface-2) 74%, var(--hg-surface)); }
.user-manager-filters .input-group-text { border-color: var(--hg-border); color: var(--hg-muted); background: var(--hg-surface); }
.user-mobile-filterbar,
.user-filter-sheet { display: none; }
.user-community-panel { margin-bottom: 22px; padding: 24px 26px; border: 1px solid var(--hg-border); border-radius: 24px; background: var(--hg-surface); box-shadow: 0 10px 32px rgba(26,32,56,.055); }
.user-community-panel__head { display: flex; gap: 20px; align-items: end; justify-content: space-between; margin-bottom: 18px; }
.user-community-panel__head h2 { margin: 4px 0 0; color: var(--hg-ink); font-size: 25px; }
.user-community-reset { padding: 8px 13px; border: 1px solid var(--hg-border); border-radius: 999px; color: var(--hg-muted); font-size: 11px; font-weight: 750; }
.user-community-reset:hover, .user-community-reset.is-active { border-color: var(--hg-primary); color: var(--hg-primary); background: var(--hg-primary-soft); }
.user-community-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.user-community-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 78px; padding: 14px; border: 1px solid var(--hg-border); border-radius: 17px; color: inherit; background: color-mix(in srgb, var(--hg-surface-2) 60%, var(--hg-surface)); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.user-community-card:hover { border-color: color-mix(in srgb, var(--hg-primary) 48%, var(--hg-border)); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(26,32,56,.07); }
.user-community-card.is-active { border-color: var(--hg-primary); background: var(--hg-primary-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--hg-primary) 12%, transparent); }
.user-community-card__icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: var(--hg-primary); background: var(--hg-surface); font-size: 18px; }
.user-community-card__copy, .user-community-card__count { display: flex; min-width: 0; flex-direction: column; }
.user-community-card__copy small { color: var(--hg-muted); font-size: 9px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.user-community-card__copy strong { overflow: hidden; color: var(--hg-ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.user-community-card__count { align-items: flex-end; }
.user-community-card__count strong { color: var(--hg-primary); font-size: 22px; line-height: 1; }
.user-community-card__count small { margin-top: 4px; color: var(--hg-muted); font-size: 9px; }
.user-community-empty { grid-column: 1 / -1; color: var(--hg-muted); }
.organization-admin-section { padding: 0 0 48px; }
.organization-admin-head { display: flex; gap: 28px; align-items: center; justify-content: space-between; margin-bottom: 18px; padding: 26px 30px; border: 1px solid var(--hg-border); border-radius: 24px; background: var(--hg-surface); box-shadow: 0 10px 32px rgba(26,32,56,.055); }
.organization-admin-head > div:first-child { max-width: 690px; }
.organization-admin-head h2 { margin: 5px 0 7px; color: var(--hg-ink); font-size: clamp(25px, 3vw, 31px); letter-spacing: -.02em; }
.organization-admin-head p { margin: 0; color: var(--hg-muted); line-height: 1.55; }
.organization-admin-head__actions { display: flex; flex: 0 0 auto; gap: 10px; }
.organization-admin-head__actions .btn { min-height: 46px; }
.organization-admin-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.organization-admin-stats > div { display: grid; grid-template-columns: 42px 1fr; gap: 2px 12px; align-items: center; padding: 17px 19px; border: 1px solid var(--hg-border); border-radius: 18px; background: var(--hg-surface); box-shadow: 0 7px 22px rgba(26,32,56,.04); }
.organization-admin-stats span { display: grid; grid-row: 1 / 3; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 18px; }
.organization-admin-stats strong { color: var(--hg-ink); font-size: 25px; line-height: 1; }
.organization-admin-stats small { color: var(--hg-muted); font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.organization-city-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.organization-city-card { min-width: 0; border: 1px solid var(--hg-border); border-radius: 22px; background: var(--hg-surface); box-shadow: 0 10px 30px rgba(26,32,56,.05); }
.organization-city-card.is-inactive { border-style: dashed; }
.organization-city-card__head { display: grid; grid-template-columns: 48px minmax(0, 1fr) 44px; gap: 13px; align-items: center; padding: 20px; border-bottom: 1px solid var(--hg-border); }
.organization-city-card__icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(145deg, var(--hg-primary), var(--hg-primary-strong)); box-shadow: 0 9px 20px color-mix(in srgb, var(--hg-primary) 23%, transparent); font-size: 19px; }
.organization-city-card__title { min-width: 0; }
.organization-city-card__title h3 { overflow: hidden; margin: 3px 0; color: var(--hg-ink); font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
.organization-city-card__title p { overflow: hidden; margin: 0; color: var(--hg-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.organization-status { display: inline-flex; color: var(--hg-muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.organization-status.is-active { color: #16835b; }
.organization-status.is-inactive { color: #b26a1b; }
.organization-entity-actions > .btn { display: grid; width: 44px; min-height: 44px; padding: 0; place-items: center; border-radius: 12px; }
.organization-entity-actions .dropdown-menu { min-width: 210px; padding: 7px; border-color: var(--hg-border); border-radius: 14px; background: var(--hg-surface); box-shadow: var(--hg-shadow); }
.organization-entity-actions .dropdown-item { display: flex; min-height: 42px; gap: 10px; align-items: center; padding: 9px 11px; border: 0; border-radius: 9px; color: var(--hg-ink); background: transparent; font-size: 13px; }
.organization-entity-actions .dropdown-item:hover,
.organization-entity-actions .dropdown-item:focus { color: var(--hg-primary); background: var(--hg-primary-soft); }
.organization-community-list { display: grid; gap: 8px; padding: 14px; }
.organization-community-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) 44px; gap: 11px; align-items: center; min-height: 66px; padding: 10px; border: 1px solid var(--hg-border); border-radius: 15px; background: color-mix(in srgb, var(--hg-surface-2) 68%, var(--hg-surface)); }
.organization-community-row.is-inactive { opacity: .7; }
.organization-community-row__icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: var(--hg-primary); background: var(--hg-surface); }
.organization-community-row__copy { display: flex; min-width: 0; flex-direction: column; }
.organization-community-row__copy strong { overflow: hidden; color: var(--hg-ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.organization-community-row__copy small { overflow: hidden; margin-top: 3px; color: var(--hg-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.organization-community-empty { display: flex; min-height: 66px; gap: 8px; align-items: center; justify-content: center; padding: 12px; border: 1px dashed var(--hg-border); border-radius: 15px; color: var(--hg-muted); font-size: 12px; }
.organization-city-card__foot { padding: 0 20px 17px; color: var(--hg-muted); font-size: 9px; line-height: 1.45; }
.organization-city-card__foot i { margin-right: 5px; color: var(--hg-primary); }
.organization-admin-empty { grid-column: 1 / -1; padding: 46px 24px; border: 1px dashed var(--hg-border); border-radius: 22px; color: var(--hg-muted); background: var(--hg-surface); text-align: center; }
.organization-admin-empty > span { display: grid; width: 56px; height: 56px; margin: 0 auto 14px; place-items: center; border-radius: 17px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 22px; }
.organization-admin-empty h3 { margin: 0 0 6px; color: var(--hg-ink); }
.organization-admin-empty p { margin: 0 0 17px; }
.organization-slug-note { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 11px 13px; border-radius: 12px; color: var(--hg-muted); background: var(--hg-surface-2); font-size: 10px; }
.organization-slug-note i { color: var(--hg-primary); font-size: 15px; }
.organization-slug-note code { overflow: hidden; color: var(--hg-ink); text-overflow: ellipsis; white-space: nowrap; }
.user-manager-table { min-width: 1120px; margin: 0; }
.user-manager-table th { padding: 13px 20px; border-bottom-color: var(--hg-border); color: var(--hg-muted); background: var(--hg-surface); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.user-sort-link { display: inline-flex; gap: 6px; align-items: center; color: inherit; white-space: nowrap; }
.user-sort-link:hover, .user-sort-link.is-active { color: var(--hg-primary); }
.user-sort-link i { font-size: 11px; }
.user-manager-table td { padding: 15px 20px; border-bottom-color: var(--hg-border); }
.user-manager-table tbody tr { transition: background .18s ease; }
.user-manager-table tbody tr:hover { background: color-mix(in srgb, var(--hg-primary-soft) 35%, transparent); }
.user-identity { display: inline-flex; gap: 12px; align-items: center; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; }
.user-identity:hover strong { color: var(--hg-primary); }
.user-identity > span:last-child { display: flex; flex-direction: column; }
.user-identity strong { color: var(--hg-ink); font-size: 13px; transition: color .2s ease; }
.user-identity small { color: var(--hg-muted); }
.user-organization { display: inline-flex; min-width: 150px; flex-direction: column; gap: 3px; }
.user-organization strong { color: var(--hg-ink); font-size: 12px; }
.user-organization small { color: var(--hg-muted); font-size: 11px; }
.user-organization i { margin-right: 3px; color: var(--hg-primary); }
.user-manager-table tbody tr:nth-child(4n + 1) .user-avatar { background: linear-gradient(135deg, #7669f6, #4939d6); }
.user-manager-table tbody tr:nth-child(4n + 2) .user-avatar { background: linear-gradient(135deg, #24a77d, #13705a); }
.user-manager-table tbody tr:nth-child(4n + 3) .user-avatar { background: linear-gradient(135deg, #e79b35, #b5641c); }
.user-manager-table tbody tr:nth-child(4n + 4) .user-avatar { background: linear-gradient(135deg, #db6380, #a93455); }
.user-avatar { display: inline-grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #7669f6, #4939d6); font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.user-avatar-lg { width: 64px; height: 64px; flex-basis: 64px; font-size: 24px; }
.user-avatar-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.user-presence { position: absolute; right: -3px; bottom: -2px; width: 13px; height: 13px; border: 3px solid var(--hg-surface); border-radius: 50%; background: #a7afbd; box-sizing: content-box; }
.user-presence.is-online { background: #27c981; box-shadow: 0 0 0 3px rgba(39,201,129,.12); }
.user-presence-lg { right: -4px; bottom: 1px; width: 16px; height: 16px; }
.user-group-badge, .status-badge { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.user-group-badge { color: var(--hg-primary); background: var(--hg-primary-soft); }
.status-badge.is-active { color: #16835b; background: rgba(22, 131, 91, .1); }
.status-badge.is-banned { color: #c13b4d; background: rgba(193, 59, 77, .1); }
.user-last-seen { color: var(--hg-muted); font-size: 11px; font-weight: 650; white-space: nowrap; }
.user-last-seen.is-online { display: inline-flex; gap: 6px; align-items: center; color: #16835b; }
.user-last-seen.is-online i { font-size: 7px; }
.user-last-seen.is-never { opacity: .72; }
.user-actions { display: flex; gap: 6px; justify-content: flex-end; }
.user-actions .user-actions__toggle { display: inline-grid; width: 44px; min-height: 44px; padding: 0; place-items: center; border-radius: 12px; }
.user-actions .dropdown-menu { min-width: 210px; padding: 7px; border-color: var(--hg-border); border-radius: 14px; background: var(--hg-surface); box-shadow: var(--hg-shadow); }
.user-actions .dropdown-item { display: flex; min-height: 42px; gap: 10px; align-items: center; padding: 9px 11px; border: 0; border-radius: 9px; color: var(--hg-ink); background: transparent; font-size: 13px; }
.user-actions .dropdown-item:hover,
.user-actions .dropdown-item:focus { color: var(--hg-primary); background: var(--hg-primary-soft); }
.user-actions .dropdown-item.text-danger { color: #d64555 !important; }
.user-actions .dropdown-item i { width: 18px; text-align: center; }
.user-manager-empty { height: 180px; color: var(--hg-muted); text-align: center; }
.user-manager-empty i, .user-manager-empty span { display: block; }
.user-manager-empty i { margin-bottom: 8px; font-size: 30px; }
.user-manager-pagination { display: flex; gap: 7px; justify-content: center; padding: 20px; }
.user-manager-pagination a { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--hg-border); border-radius: 10px; color: var(--hg-ink); }
.user-manager-pagination a.active { border-color: var(--hg-primary); color: #fff; background: var(--hg-primary); }
.user-modal { border: 0; border-radius: 20px; box-shadow: var(--hg-shadow); }
.user-modal .modal-header, .user-modal .modal-footer { padding: 20px 24px; border-color: var(--hg-border); }
.user-modal .modal-body { padding: 24px; }
.user-modal .modal-title { font-size: 22px; }
.user-profile-head { display: flex; gap: 16px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--hg-border); }
.user-profile-head h4 { margin: 0 0 3px; }
.user-profile-details { display: grid; gap: 0; margin: 12px 0 0; }
.user-profile-details div { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--hg-border); }
.user-profile-details dt { color: var(--hg-muted); font-weight: 500; }
.user-profile-details dd { margin: 0; font-weight: 700; text-align: right; }

@media (max-width: 767.98px) {
    .users-hero { padding: 108px 0 38px; }
    .users-hero__inner { min-height: 0; }
    .users-hero__copy > p { font-size: 14px; }
    .users-hero__visual { display: none; }
    .users-hero__breadcrumb { margin-top: 18px; }
    .user-manager-section { padding: 18px 0 34px; }
    .user-community-panel { padding: 18px; border-radius: 18px; }
    .user-community-panel__head { align-items: flex-start; }
    .user-community-grid { grid-template-columns: 1fr; padding-bottom: 5px; overflow: visible; }
    .user-community-card { min-width: 0; }
    .organization-admin-section { padding: 0 0 34px; }
    .organization-admin-head { align-items: stretch; flex-direction: column; gap: 18px; padding: 20px 18px; border-radius: 18px; }
    .organization-admin-head__actions { display: grid; grid-template-columns: 1fr; }
    .organization-admin-head__actions .btn { width: 100%; justify-content: center; }
    .organization-admin-stats { grid-template-columns: 1fr; gap: 9px; }
    .organization-admin-stats > div { min-height: 72px; padding: 14px 16px; border-radius: 16px; }
    .organization-city-grid { grid-template-columns: 1fr; gap: 12px; }
    .organization-city-card { border-radius: 18px; }
    .organization-city-card__head { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; padding: 15px; }
    .organization-city-card__icon { width: 44px; height: 44px; border-radius: 13px; }
    .organization-city-card__title h3 { font-size: 16px; }
    .organization-community-list { padding: 11px; }
    .organization-community-row { padding: 9px; }
    .organization-city-card__foot { padding: 0 15px 14px; }
    .organization-admin-empty { padding: 34px 18px; border-radius: 18px; }
    .organization-admin-modal .modal-dialog { margin: max(12px, env(safe-area-inset-top)) 12px max(88px, env(safe-area-inset-bottom)); }
    .user-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .user-stat-card { grid-template-columns: 40px 1fr; min-height: 108px; padding: 14px; border-radius: 16px; }
    .user-stat-card__icon { width: 40px; height: 40px; border-radius: 12px; font-size: 18px; }
    .user-stat-card strong { font-size: 24px; }
    .user-stat-card div span { font-size: 10px; }
    .user-stat-card div span { line-height: 1.25; white-space: normal; }
    .user-stat-card small { display: none; }
    .user-manager-card { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
    .user-manager-head { flex-direction: column; padding: 22px 18px; }
    .user-manager-head { align-items: stretch; border: 1px solid var(--hg-border); border-radius: 18px 18px 0 0; background: var(--hg-surface); }
    .user-manager-head .btn { width: 100%; }
    .user-manager-filters--desktop { display: none; }
    .user-mobile-filterbar { display: grid; gap: 10px; padding: 14px 0; }
    .user-mobile-filterbar > .btn { width: 100%; justify-content: center; }
    .user-mobile-filterbar__count { margin-left: 3px; color: #d64555; font-size: 9px; }
    .user-filter-chips { display: flex; gap: 7px; padding: 0 2px 2px; overflow-x: auto; scrollbar-width: none; }
    .user-filter-chips::-webkit-scrollbar { display: none; }
    .user-filter-chips span,
    .user-filter-chips a { display: inline-flex; min-height: 34px; gap: 6px; align-items: center; flex: 0 0 auto; padding: 6px 10px; border: 1px solid var(--hg-border); border-radius: 999px; color: var(--hg-muted); background: var(--hg-surface); font-size: 10px; font-weight: 720; }
    .user-filter-chips a { color: #d64555; }
    .user-filter-sheet { display: flex; height: auto; max-height: min(82dvh, 600px); flex-direction: column; overflow: hidden; padding-bottom: env(safe-area-inset-bottom); border: 0; border-radius: 24px 24px 0 0; color: var(--hg-ink); background: var(--hg-surface); }
    .user-filter-sheet .offcanvas-header { padding: 25px 20px 13px; }
    .user-filter-sheet .offcanvas-title { margin-top: 2px; color: var(--hg-ink); font-size: 22px; }
    .user-filter-sheet .offcanvas-body { min-height: 0; padding: 8px 20px 24px; overflow-y: auto; }
    .user-filter-sheet__form { display: grid; gap: 10px; }
    .user-filter-sheet__form .form-label { margin: 5px 0 -4px; color: var(--hg-muted); font-size: 11px; font-weight: 780; }
    .user-filter-sheet__form .btn { width: 100%; margin-top: 5px; }
    .user-manager-card .table-responsive { overflow: visible; }
    .user-manager-table { min-width: 0; border-collapse: separate; border-spacing: 0 10px; }
    .user-manager-table thead { display: none; }
    .user-manager-table tbody, .user-manager-table tr, .user-manager-table td { display: block; width: 100%; }
    .user-manager-table tr { overflow: visible; padding: 4px 16px 14px; border: 1px solid var(--hg-border); border-radius: 17px; background: var(--hg-surface); box-shadow: 0 6px 18px rgba(26,32,56,.045); }
    .user-manager-table td { display: flex; min-height: 46px; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--hg-border); text-align: right; }
    .user-manager-table td::before { margin-right: 14px; color: var(--hg-muted); content: attr(data-label); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
    .user-manager-table td:first-child { padding-top: 14px; }
    .user-manager-table td:first-child::before { display: none; }
    .user-manager-table td:last-child { padding-bottom: 0; border-bottom: 0; }
    .user-identity { width: 100%; }
    .user-organization { align-items: flex-end; }
    .user-actions { flex: 1; justify-content: flex-end; }
    .user-manager-empty { display: grid !important; height: 150px; place-items: center; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .user-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .user-community-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .user-manager-card .table-responsive { overflow: visible; }
    .user-manager-table { min-width: 0; border-collapse: separate; border-spacing: 0 10px; }
    .user-manager-table thead { display: none; }
    .user-manager-table tbody, .user-manager-table tr, .user-manager-table td { display: block; width: 100%; }
    .user-manager-table tr { overflow: visible; padding: 4px 18px 14px; border: 1px solid var(--hg-border); border-radius: 17px; background: var(--hg-surface); box-shadow: 0 6px 18px rgba(26,32,56,.045); }
    .user-manager-table td { display: flex; min-height: 46px; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--hg-border); text-align: right; }
    .user-manager-table td::before { margin-right: 14px; color: var(--hg-muted); content: attr(data-label); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
    .user-manager-table td:first-child { padding-top: 14px; }
    .user-manager-table td:first-child::before { display: none; }
    .user-manager-table td:last-child { padding-bottom: 0; border-bottom: 0; }
    .user-identity { width: 100%; }
    .user-organization { align-items: flex-end; }
    .user-actions { flex: 1; justify-content: flex-end; }
}

/* Community training settings */
.training-settings-page { min-height: 100vh; padding: 112px 0 72px; background: var(--hg-bg); }
.training-settings-page .container { max-width: 1180px; }
.training-settings-summary { display: flex; gap: 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; }
.training-settings-summary__main { min-width: 0; }
.training-settings-back { display: inline-flex; gap: 7px; align-items: center; margin-bottom: 16px; color: var(--hg-muted); font-size: 14px; font-weight: 700; }
.training-settings-back:hover { color: var(--hg-primary); }
.training-settings-title-row { display: flex; gap: 15px; align-items: center; }
.training-settings-logo { display: grid; width: 52px; height: 52px; flex: 0 0 52px; place-items: center; border-radius: 17px; color: #fff; background: linear-gradient(145deg, var(--hg-primary), #7869ff); box-shadow: 0 12px 28px rgba(91,76,240,.22); font-size: 22px; }
.training-settings-title-row h1 { overflow: hidden; max-width: 720px; margin: 0; font-size: clamp(25px, 4vw, 37px); text-overflow: ellipsis; white-space: nowrap; }
.training-settings-title-row p { margin: 3px 0 0; color: var(--hg-muted); font-size: 14px; }
.training-settings-meta { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding-bottom: 5px; }
.training-settings-meta > span { display: inline-flex; gap: 7px; align-items: center; min-height: 34px; padding: 6px 12px; border: 1px solid var(--hg-border); border-radius: 999px; color: var(--hg-muted); background: var(--hg-surface); font-size: 13px; font-weight: 750; }
.training-status-dot i, .training-open-state i { width: 7px; height: 7px; border-radius: 50%; background: #a7afc0; }
.training-status-dot.is-open i, .training-open-state.is-open i { background: #24ad78; box-shadow: 0 0 0 4px rgba(36,173,120,.11); }

.training-settings-tabs { position: sticky; z-index: 10; top: 86px; display: flex; gap: 5px; margin-bottom: 14px; padding: 6px; border: 1px solid var(--hg-border); border-radius: 17px; background: color-mix(in srgb, var(--hg-surface) 92%, transparent); box-shadow: 0 8px 28px rgba(26,32,56,.06); backdrop-filter: blur(16px); }
.training-settings-tabs button { display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 12px; color: var(--hg-muted); background: transparent; font-size: 14px; font-weight: 780; transition: .18s ease; }
.training-settings-tabs button:hover { color: var(--hg-ink); background: var(--hg-surface-2); }
.training-settings-tabs button.active { color: var(--hg-primary); background: var(--hg-primary-soft); }
.training-settings-tabs button i { font-size: 15px; }
.training-settings-tabs button em { display: grid; min-width: 21px; height: 21px; place-items: center; padding: 0 5px; border-radius: 999px; color: #fff; background: var(--hg-primary); font-size: 11px; font-style: normal; }
.training-settings-content { min-height: 460px; }
.training-settings-content > .tab-pane { padding: clamp(18px, 3vw, 30px); border: 1px solid var(--hg-border); border-radius: 22px; background: var(--hg-surface); box-shadow: var(--hg-shadow-sm); }
.training-panel-heading { display: flex; gap: 20px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.training-panel-heading > div { min-width: 0; }
.training-panel-heading > div > span { color: var(--hg-primary); font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.training-panel-heading h2 { margin: 2px 0 0; font-size: 24px; }
.training-panel-note, .training-open-state, .training-panel-count { display: inline-flex; gap: 7px; align-items: center; color: var(--hg-muted); font-size: 13px; font-weight: 700; }
.training-panel-count { min-width: 32px; height: 32px; justify-content: center; border-radius: 10px; color: var(--hg-primary); background: var(--hg-primary-soft); }

.training-schedule-accordion, .training-progress-list { display: grid; gap: 9px; }
.training-schedule-accordion .accordion-item, .training-progress-list .accordion-item { overflow: hidden; border: 1px solid var(--hg-border); border-radius: 16px; color: var(--hg-ink); background: var(--hg-surface); }
.training-schedule-accordion .accordion-button, .training-progress-list .accordion-button { min-height: 68px; gap: 12px; padding: 13px 16px; color: var(--hg-ink); background: var(--hg-surface); box-shadow: none; }
.training-schedule-accordion .accordion-button:not(.collapsed), .training-progress-list .accordion-button:not(.collapsed) { color: var(--hg-ink); background: color-mix(in srgb, var(--hg-primary-soft) 42%, var(--hg-surface)); }
.training-schedule-accordion .accordion-button::after, .training-progress-list .accordion-button::after { display: none; }
.training-schedule-accordion .accordion-button > i, .training-progress-list .accordion-button > i { margin-left: auto; color: var(--hg-muted); font-size: 12px; transition: transform .18s ease; }
.training-schedule-accordion .accordion-button:not(.collapsed) > i, .training-progress-list .accordion-button:not(.collapsed) > i { transform: rotate(180deg); }
.training-group-number { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 11px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 14px; font-weight: 850; }
.training-group-title { display: flex; flex-direction: column; font-size: 15px; font-weight: 800; }
.training-group-title small { margin-top: 2px; color: var(--hg-muted); font-size: 12px; font-weight: 600; }
.training-schedule-accordion .accordion-body, .training-progress-list .accordion-body { padding: 16px; border-top: 1px solid var(--hg-border); background: color-mix(in srgb, var(--hg-surface-2) 45%, var(--hg-surface)); }
.training-session-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.training-session-card { min-width: 0; padding: 16px; border: 1px solid var(--hg-border); border-radius: 15px; background: var(--hg-surface); }
.training-session-card__head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; margin-bottom: 13px; }
.training-session-card__head span { color: var(--hg-muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.training-session-card__head h4 { margin: 2px 0 0; font-size: 17px; }
.training-session-badges { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.training-chip { padding: 5px 8px; border-radius: 7px; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0 !important; text-transform: none !important; }
.training-chip.is-offline { color: #8a5c13; background: rgba(234,159,47,.14); }
.training-chip.is-cancelled { color: #b43b56; background: rgba(210,67,93,.11); }
.training-session-fields, .training-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.training-session-fields label, .training-form-grid label, .training-progress-grid label { min-width: 0; }
.training-session-fields label > span, .training-form-grid label > span, .training-progress-grid label > span { display: block; overflow: hidden; margin-bottom: 6px; color: var(--hg-muted); font-size: 13px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.training-settings-page .form-control, .training-settings-page .form-select { min-height: 44px; border-color: var(--hg-border); border-radius: 11px; color: var(--hg-ink); background-color: var(--hg-surface); font-size: 15px; }
.training-settings-page .form-control::placeholder { color: color-mix(in srgb, var(--hg-muted) 68%, transparent); }
.training-settings-page .form-control:focus, .training-settings-page .form-select:focus { border-color: color-mix(in srgb, var(--hg-primary) 56%, var(--hg-border)); box-shadow: 0 0 0 3px rgba(91,76,240,.1); }
.training-session-card__foot { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--hg-border); }
.training-session-options { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.training-check { display: inline-flex; gap: 7px; align-items: center; color: var(--hg-muted); cursor: pointer; font-size: 13px; font-weight: 650; }
.training-check input { accent-color: var(--hg-primary); }
.training-check input:disabled { cursor: not-allowed; opacity: .7; }
.training-check--field { min-height: 44px; align-self: end; padding: 10px 12px; border: 1px solid var(--hg-border); border-radius: 11px; background: var(--hg-surface); }
.training-session-card__foot .btn, .training-form-actions .btn { display: inline-flex; gap: 6px; align-items: center; justify-content: center; min-height: 40px; border-radius: 10px; font-size: 14px; font-weight: 780; }

.training-season-form, .training-create-form { overflow: hidden; border: 1px solid var(--hg-border); border-radius: 17px; background: var(--hg-surface); }
.training-create-form { max-width: 1060px; margin: 0 auto; box-shadow: var(--hg-shadow-sm); }
.training-form-section { padding: 22px; }
.training-form-section + .training-form-section { border-top: 1px solid var(--hg-border); }
.training-form-section h3 { margin: 0 0 15px; font-size: 16px; }
.training-form-grid.is-title { grid-template-columns: minmax(0, 2fr) minmax(180px, .75fr); }
.training-form-grid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.training-form-actions { display: flex; gap: 20px; align-items: center; justify-content: space-between; padding: 15px 22px; border-top: 1px solid var(--hg-border); background: color-mix(in srgb, var(--hg-surface-2) 48%, var(--hg-surface)); }
.training-form-actions > span { color: var(--hg-muted); font-size: 13px; }
.training-archive-list { margin-top: 14px; border: 1px solid var(--hg-border); border-radius: 15px; background: var(--hg-surface); }
.training-archive-list summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; color: var(--hg-muted); cursor: pointer; font-size: 14px; font-weight: 750; list-style: none; }
.training-archive-list summary::-webkit-details-marker { display: none; }
.training-archive-list summary span { display: inline-flex; gap: 8px; align-items: center; }
.training-archive-list summary em { font-style: normal; }
.training-archive-list > div { padding: 0 16px 10px; }
.training-archive-list article { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--hg-border); }
.training-archive-list article span { display: flex; flex-direction: column; }
.training-archive-list article strong { color: var(--hg-ink); font-size: 14px; }
.training-archive-list article small, .training-archive-list article time { color: var(--hg-muted); font-size: 12px; }

.training-person-list { display: grid; gap: 8px; }
.training-person-row { display: grid; grid-template-columns: minmax(260px, 1fr) auto auto; gap: 12px; align-items: center; padding: 13px 14px; border: 1px solid var(--hg-border); border-radius: 14px; background: var(--hg-surface); }
.training-participant { display: grid; min-width: 0; grid-template-columns: 46px minmax(0, 1fr) auto 14px; gap: 11px; align-items: center; margin: -6px; padding: 6px; border-radius: 12px; color: inherit; transition: background .18s ease, transform .18s ease; }
.training-participant:hover, .training-participant:focus-visible { color: inherit; background: var(--hg-primary-soft); transform: translateX(2px); }
.training-participant__avatar-wrap { position: relative; display: inline-flex; width: 46px; height: 46px; }
.training-participant__avatar { display: grid; width: 46px; height: 46px; border-radius: 14px; background: var(--hg-primary-soft); object-fit: cover; place-items: center; }
.training-participant__avatar--emoji { font-size: 23px; }
.training-participant__presence { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border: 3px solid var(--hg-surface); border-radius: 50%; background: #9ba3b2; box-sizing: content-box; }
.training-participant__presence.is-online { background: #27c981; box-shadow: 0 0 0 3px rgba(39,201,129,.12); }
.training-participant__copy { display: flex; min-width: 0; flex-direction: column; }
.training-participant__name-row { display: flex; min-width: 0; gap: 5px; align-items: center; }
.training-participant__name-row strong { overflow: hidden; color: var(--hg-ink); font-size: 15px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.training-participant__name-row b { flex: 0 0 auto; font-size: 14px; font-weight: 400; }
.training-participant__copy small { display: flex; overflow: hidden; gap: 5px; align-items: center; margin-top: 3px; color: var(--hg-muted); font-size: 13px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.training-participant__copy small span { overflow: hidden; text-overflow: ellipsis; }
.training-participant__copy small i { font-style: normal; opacity: .55; }
.training-participant__level { display: inline-flex; gap: 4px; align-items: center; padding: 4px 7px; border-radius: 999px; color: #8a5c13; background: rgba(234,159,47,.14); font-size: 12px; font-weight: 800; }
.training-participant__level i { font-size: 11px; }
.training-participant__arrow { color: var(--hg-muted); font-size: 12px; transition: color .18s ease, transform .18s ease; }
.training-participant:hover .training-participant__arrow { color: var(--hg-primary); transform: translate(1px, -1px); }
.training-application-status, .training-online-mark { padding: 5px 8px; border-radius: 8px; color: var(--hg-muted); background: var(--hg-surface-2); font-size: 12px; font-weight: 750; white-space: nowrap; }
.training-application-status.is-accepted { color: #16835b; background: rgba(22,131,91,.1); }
.training-application-status.is-rejected { color: #bd3d5c; background: rgba(189,61,92,.1); }
.training-application-actions { display: flex; gap: 7px; align-items: center; }
.training-application-actions .btn { border-radius: 9px; font-size: 13px; font-weight: 750; }
.training-application-actions .btn-light { border-color: var(--hg-border); color: var(--hg-muted); background: var(--hg-surface-2); }
.training-switch { display: inline-flex; gap: 6px; align-items: center; margin-right: 4px; color: var(--hg-muted); cursor: pointer; font-size: 13px; font-weight: 700; }
.training-switch input { position: absolute; opacity: 0; }
.training-switch > span { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--hg-border); transition: .18s ease; }
.training-switch > span::after { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.16); content: ''; transition: .18s ease; }
.training-switch input:checked + span { background: var(--hg-primary); }
.training-switch input:checked + span::after { transform: translateX(12px); }
.training-online-mark { color: var(--hg-primary); background: var(--hg-primary-soft); }
.training-panel-empty { display: grid; min-height: 220px; place-items: center; align-content: center; gap: 8px; color: var(--hg-muted); text-align: center; }
.training-panel-empty i { color: var(--hg-primary); font-size: 28px; }
.training-panel-empty strong { font-size: 14px; }
.training-panel-empty.is-compact { min-height: 130px; border: 1px dashed var(--hg-border); border-radius: 16px; background: color-mix(in srgb, var(--hg-surface-2) 42%, var(--hg-surface)); }
.training-panel-heading--spaced { margin-top: 28px; }
.training-manual-enrollment { overflow: hidden; padding: 20px; border: 1px solid color-mix(in srgb, var(--hg-primary) 24%, var(--hg-border)); border-radius: 19px; background: linear-gradient(135deg, color-mix(in srgb, var(--hg-primary-soft) 64%, var(--hg-surface)), var(--hg-surface) 62%); }
.training-manual-enrollment__head { display: flex; gap: 13px; align-items: center; margin-bottom: 17px; }
.training-manual-enrollment__head > span { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(145deg, var(--hg-primary), #7969ff); box-shadow: 0 9px 22px rgba(91,76,240,.2); font-size: 18px; }
.training-manual-enrollment__head div { min-width: 0; }
.training-manual-enrollment__head small { color: var(--hg-primary); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.training-manual-enrollment__head h2 { margin: 1px 0 0; font-size: 19px; }
.training-manual-enrollment__head p { margin: 3px 0 0; color: var(--hg-muted); font-size: 12px; }
.training-manual-enrollment__form { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(190px, 1fr) auto auto; gap: 10px; align-items: end; }
.training-manual-enrollment__form > label:not(.training-switch) > span { display: block; margin-bottom: 5px; color: var(--hg-muted); font-size: 12px; font-weight: 750; }
.training-manual-enrollment__form .training-switch { min-height: 44px; margin: 0; padding: 0 8px; }
.training-manual-enrollment__form .training-switch em { font-size: 12px; font-style: normal; white-space: nowrap; }
.training-manual-enrollment__form .btn { min-height: 44px; border-radius: 11px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.training-manual-enrollment__empty { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-radius: 12px; color: var(--hg-muted); background: color-mix(in srgb, var(--hg-surface) 72%, transparent); font-size: 13px; }
.training-manual-enrollment__empty i { color: #24ad78; font-size: 17px; }
.training-manual-enrollment.is-locked { border-style: dashed; background: color-mix(in srgb, var(--hg-surface-2) 54%, var(--hg-surface)); }
.training-manual-enrollment.is-locked .training-manual-enrollment__head { margin-bottom: 0; }
.training-manual-enrollment.is-locked .training-manual-enrollment__head > span { color: var(--hg-muted); background: var(--hg-surface-2); box-shadow: none; }
.training-enrollment-toolbar { display: flex; gap: 12px; align-items: end; justify-content: space-between; margin-bottom: 18px; padding: 13px; border: 1px solid var(--hg-border); border-radius: 13px; background: var(--hg-surface); }
.training-enrollment-toolbar > form:first-child { width: min(100%, 410px); }
.training-enrollment-toolbar label > span { display: block; margin-bottom: 5px; color: var(--hg-muted); font-size: 12px; font-weight: 750; }
.training-enrollment-toolbar .btn { min-height: 38px; border-radius: 10px; font-size: 12px; font-weight: 780; }
.training-enrollment-toolbar .training-removal-form { display: grid; width: min(100%, 520px); grid-template-columns: minmax(190px, 1fr) auto; gap: 8px; align-items: end; }
.training-enrollment-archive-note { display: flex; gap: 9px; align-items: center; color: var(--hg-muted); }
.training-enrollment-archive-note > i { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--hg-surface-2); }
.training-enrollment-archive-note span, .training-enrollment-archive-note strong, .training-enrollment-archive-note small, .training-enrollment-archive-note em { display: block; }
.training-enrollment-archive-note strong { color: var(--hg-ink); font-size: 12px; }
.training-enrollment-archive-note small { margin-top: 1px; font-size: 10px; }
.training-enrollment-archive-note em { max-width: 520px; margin-top: 5px; color: var(--hg-ink); font-size: 11px; font-style: normal; line-height: 1.4; }
.training-enrollment-archive-actions { display: flex; width: 100%; gap: 14px; align-items: center; justify-content: space-between; }
.training-enrollment-archive-actions .btn { white-space: nowrap; }
.training-enrollment-item.is-failed, .training-enrollment-item.is-withdrawn { opacity: .82; }
.training-enrollment-item.is-completed { border-color: rgba(36,173,120,.28); }
.training-enrollment-archive { margin-top: 20px; border: 1px solid var(--hg-border); border-radius: 17px; background: color-mix(in srgb, var(--hg-surface-2) 50%, var(--hg-surface)); }
.training-enrollment-archive > summary { display: grid; min-height: 56px; grid-template-columns: minmax(0, 1fr) auto 16px; gap: 11px; align-items: center; padding: 13px 16px; color: var(--hg-muted); cursor: pointer; list-style: none; }
.training-enrollment-archive > summary::-webkit-details-marker { display: none; }
.training-enrollment-archive > summary span { display: inline-flex; gap: 9px; align-items: center; }
.training-enrollment-archive > summary span > i { color: var(--hg-primary); }
.training-enrollment-archive > summary strong { color: var(--hg-ink); font-size: 14px; }
.training-enrollment-archive > summary em { display: grid; min-width: 27px; height: 27px; place-items: center; border-radius: 9px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 11px; font-style: normal; font-weight: 850; }
.training-enrollment-archive > summary > i { font-size: 11px; transition: transform .18s ease; }
.training-enrollment-archive[open] > summary > i { transform: rotate(180deg); }
.training-enrollment-archive > .training-progress-list { padding: 0 10px 10px; }

.training-progress-summary, .training-portal-participant-summary { display: grid; min-height: 72px; grid-template-columns: minmax(0, 1fr) auto 40px; gap: 13px; align-items: center; padding: 11px 13px; color: var(--hg-ink); background: var(--hg-surface); }
.training-progress-context { max-width: 270px; padding: 6px 9px; border-radius: 9px; color: var(--hg-muted); background: var(--hg-surface-2); font-size: 12px; font-weight: 720; line-height: 1.25; text-align: right; }
.training-progress-toggle { display: grid; width: 38px; height: 38px; border: 1px solid var(--hg-border); border-radius: 11px; color: var(--hg-muted); background: var(--hg-surface-2); place-items: center; transition: border-color .18s ease, color .18s ease, background .18s ease; }
.training-progress-toggle:hover, .training-progress-toggle:focus-visible { border-color: color-mix(in srgb, var(--hg-primary) 45%, var(--hg-border)); color: var(--hg-primary); background: var(--hg-primary-soft); }
.training-progress-toggle i { font-size: 12px; transition: transform .18s ease; }
.training-progress-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.training-progress-stage + .training-progress-stage { margin-top: 18px; }
.training-progress-stage h4 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 8px; color: var(--hg-primary); font-size: 12px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.training-progress-lock { display: inline-flex; gap: 5px; align-items: center; padding: 4px 7px; border-radius: 7px; color: var(--hg-muted); background: var(--hg-surface-2); font-size: 10px; font-weight: 750; letter-spacing: 0; text-transform: none; }
.training-progress-stage.is-locked .training-progress-grid { opacity: .62; }
.training-progress-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.training-progress-grid form { padding: 10px; border: 1px solid var(--hg-border); border-radius: 11px; background: var(--hg-surface); }
.training-progress-grid label { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(150px, 1.2fr); gap: 10px; align-items: center; }
.training-progress-grid label > span { margin: 0; }
.training-progress-grid .form-select { min-height: 34px; }

.training-settings-empty-head { max-width: 1060px; margin: 0 auto 22px; text-align: center; }
.training-settings-empty-head .training-settings-back { display: flex; width: max-content; }
.training-settings-empty-head .training-settings-logo { margin: 4px auto 12px; }
.training-settings-empty-head h1 { margin: 0; font-size: clamp(27px, 4vw, 40px); }
.training-settings-empty-head p { margin: 4px 0 0; color: var(--hg-muted); font-size: 12px; }

@media (max-width: 991.98px) {
    .training-session-grid { grid-template-columns: 1fr; }
    .training-form-grid.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .training-person-row { grid-template-columns: minmax(0, 1fr) auto; }
    .training-application-actions { grid-column: 1 / -1; justify-content: flex-end; }
    .training-manual-enrollment__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .training-settings-page { padding: 92px 0 48px; }
    .training-settings-summary { align-items: flex-start; flex-direction: column; }
    .training-settings-meta { justify-content: flex-start; padding: 0; }
    .training-settings-title-row h1 { max-width: calc(100vw - 110px); font-size: 25px; }
    .training-settings-tabs { top: 76px; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
    .training-settings-tabs::-webkit-scrollbar { display: none; }
    .training-settings-tabs button { min-width: max-content; padding: 8px 12px; }
    .training-settings-content > .tab-pane { padding: 16px; border-radius: 18px; }
    .training-panel-note { display: none; }
    .training-session-fields, .training-form-grid, .training-form-grid.is-title, .training-form-grid.is-three { grid-template-columns: 1fr; }
    .training-person-row { grid-template-columns: 1fr; }
    .training-application-status, .training-online-mark { grid-column: auto; width: max-content; }
    .training-application-actions { grid-column: 1 / -1; flex-wrap: wrap; justify-content: flex-start; padding-top: 8px; border-top: 1px solid var(--hg-border); }
    .training-progress-summary, .training-portal-participant-summary { grid-template-columns: minmax(0, 1fr) 40px; gap: 9px; }
    .training-progress-context { grid-column: 1 / -1; grid-row: 2; max-width: none; text-align: left; }
    .training-progress-toggle { grid-column: 2; grid-row: 1; }
    .training-participant__level { display: none; }
    .training-participant { grid-template-columns: 46px minmax(0, 1fr) 12px; }
    .training-progress-grid { grid-template-columns: 1fr; }
    .training-progress-grid label { grid-template-columns: 1fr; gap: 4px; }
    .training-manual-enrollment { padding: 16px; }
    .training-manual-enrollment__form { grid-template-columns: 1fr; }
    .training-manual-enrollment__form .training-switch { padding: 0; }
    .training-manual-enrollment__form .btn { width: 100%; }
    .training-enrollment-toolbar { align-items: stretch; flex-direction: column; }
    .training-enrollment-toolbar > form, .training-enrollment-toolbar > form:first-child { width: 100%; }
    .training-enrollment-toolbar .training-removal-form { width: 100%; grid-template-columns: 1fr; }
    .training-enrollment-toolbar .btn { width: 100%; }
    .training-enrollment-archive-actions { align-items: stretch; flex-direction: column; }
    .training-form-actions { align-items: stretch; flex-direction: column; }
    .training-form-actions .btn { width: 100%; min-height: 42px; }
}

/* Public member profile */
.member-profile-hero { position: relative; overflow: hidden; padding: 132px 0 50px; color: #fff; background: linear-gradient(130deg, #211d57, #4c3dcc 58%, #7162ef); }
.member-profile-hero::after { position: absolute; inset: 0; background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.15), transparent 25%), radial-gradient(circle at 5% 100%, rgba(126,111,255,.35), transparent 28%); content: ''; }
.member-profile-hero .container { position: relative; z-index: 1; }
.member-profile-head { display: flex; gap: 30px; align-items: center; }
.member-profile-avatar-wrap { position: relative; width: 142px; height: 142px; flex: 0 0 142px; padding: 5px; border: 1px solid rgba(255,255,255,.28); border-radius: 36px; background: rgba(255,255,255,.12); box-shadow: 0 24px 50px rgba(18,12,66,.28); backdrop-filter: blur(10px); }
.member-profile-avatar { width: 100%; height: 100%; border-radius: 30px; object-fit: cover; }
.member-profile-online { position: absolute; right: -4px; bottom: 10px; width: 22px; height: 22px; border: 4px solid #5142cc; border-radius: 50%; background: #a7afbd; }
.member-profile-online.is-online { background: #3bd28d; box-shadow: 0 0 0 5px rgba(59,210,141,.16); }
.member-presence-text.is-online, .member-presence-value.is-online { color: #16835b; }
.member-presence-text.is-online i { font-size: 8px; }
.member-presence-value.is-offline { color: var(--hg-muted); }
.member-profile-title { min-width: 0; }
.member-profile-role { display: inline-flex; gap: 7px; align-items: center; padding: 6px 11px; border-radius: 999px; color: #fff; background: rgba(255,255,255,.13); font-size: 11px; font-weight: 750; }
.member-profile-legend { display: inline-flex; gap: 7px; align-items: center; margin-left: 7px; padding: 6px 11px; border: 1px solid rgba(255,220,113,.55); border-radius: 999px; color: #fff1b5; background: rgba(104,67,0,.25); font-size: 11px; font-weight: 850; }
.member-profile-rank--silver .member-profile-avatar-wrap { border: 2px solid #e4e8f0; box-shadow: 0 0 0 5px rgba(228,232,240,.18), 0 24px 50px rgba(18,12,66,.28); }
.member-profile-rank--gold .member-profile-avatar-wrap { border: 2px solid #ffd568; box-shadow: 0 0 0 5px rgba(255,213,104,.2), 0 24px 55px rgba(18,12,66,.34); }
.member-profile-title h1 { margin: 11px 0 8px; color: #fff; font-size: clamp(34px, 5vw, 54px); letter-spacing: -.035em; }
.member-profile-title > p { max-width: 650px; margin: 0; color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.65; }
.member-profile-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; color: rgba(255,255,255,.7); font-size: 11px; font-weight: 650; }
.member-profile-meta span { display: inline-flex; gap: 7px; align-items: center; }
.member-profile-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.member-profile-actions .btn { display: inline-flex; gap: 7px; align-items: center; border-radius: 11px; font-size: 11px; font-weight: 750; }
.member-profile-content { padding: 26px 0 64px; background: color-mix(in srgb, var(--hg-surface-2) 54%, var(--hg-surface)); }
.member-profile-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .7fr); gap: 20px; align-items: start; }
.member-profile-side { display: grid; gap: 20px; }
.member-profile-card { padding: 25px; border: 1px solid var(--hg-border); border-radius: 22px; background: var(--hg-surface); box-shadow: var(--hg-shadow-sm); }
.member-card-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.member-card-heading div { display: flex; flex-direction: column; }
.member-card-heading span { color: var(--hg-primary); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.member-card-heading h2 { margin: 3px 0 0; font-size: 25px; }
.member-card-heading > i { color: var(--hg-primary); font-size: 24px; }
.member-profile-students-heading__actions { display: flex !important; flex-direction: row !important; gap: 10px; align-items: center; }
.member-profile-students-heading__actions > strong { display: inline-flex; min-width: 34px; height: 30px; align-items: center; justify-content: center; padding: 0 10px; border-radius: 999px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 10px; font-weight: 850; }
.member-profile-students-heading__actions > a { display: inline-flex; gap: 6px; align-items: center; color: var(--hg-primary); font-size: 11px; font-weight: 800; }
.member-profile-students-heading__actions > a:hover { color: color-mix(in srgb, var(--hg-primary) 78%, var(--hg-ink)); }
.member-profile-students { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.member-profile-student { display: flex; min-width: 0; gap: 10px; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid var(--hg-border); border-radius: 16px; color: var(--hg-ink); background: var(--hg-surface-2); transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.member-profile-student:hover { border-color: color-mix(in srgb, var(--hg-primary) 35%, var(--hg-border)); color: var(--hg-ink); background: var(--hg-primary-soft); transform: translateY(-1px); }
.member-profile-student.is-unlinked { justify-content: flex-start; }
.member-profile-student.is-unlinked:hover { border-color: var(--hg-border); background: var(--hg-surface-2); transform: none; }
.member-profile-student__placeholder { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 50%; color: var(--hg-muted); background: var(--hg-surface); font-size: 17px; }
.member-profile-student.is-unlinked > strong { overflow: hidden; min-width: 0; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.member-profile-student .member-identity { min-width: 0; flex: 1; }
.member-profile-student .member-identity__copy { min-width: 0; }
.member-profile-student .member-identity__name,
.member-profile-student .member-identity__subtitle { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; }
.member-profile-student > i { flex: 0 0 auto; color: var(--hg-primary); font-size: 11px; }
.member-training-history__list { display: grid; gap: 13px; }
.member-training-season { overflow: hidden; padding: 17px; border: 1px solid var(--hg-border); border-radius: 18px; background: linear-gradient(145deg, color-mix(in srgb, var(--hg-primary-soft) 28%, var(--hg-surface)), var(--hg-surface) 50%); }
.member-training-season.is-success { border-color: rgba(36,173,120,.27); background: linear-gradient(145deg, rgba(36,173,120,.08), var(--hg-surface) 50%); }
.member-training-season.is-muted { background: color-mix(in srgb, var(--hg-surface-2) 46%, var(--hg-surface)); }
.member-training-season__head { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 11px; align-items: center; }
.member-training-season__icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(145deg, var(--hg-primary), #7969ff); box-shadow: 0 8px 18px rgba(91,76,240,.18); font-size: 17px; }
.member-training-season.is-success .member-training-season__icon { background: linear-gradient(145deg, #16835b, #2fc78d); box-shadow: 0 8px 18px rgba(22,131,91,.16); }
.member-training-season.is-muted .member-training-season__icon { color: var(--hg-muted); background: var(--hg-surface-2); box-shadow: none; }
.member-training-season__head div { min-width: 0; }
.member-training-season__head small { color: var(--hg-muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.member-training-season__head h3 { overflow: hidden; margin: 2px 0 0; color: var(--hg-ink); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.member-training-season__status { padding: 5px 8px; border-radius: 8px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 10px; font-weight: 800; white-space: nowrap; }
.member-training-season.is-success .member-training-season__status { color: #16835b; background: rgba(36,173,120,.11); }
.member-training-season.is-muted .member-training-season__status { color: var(--hg-muted); background: var(--hg-surface-2); }
.member-training-season__progress { margin-top: 15px; }
.member-training-season__progress > div:first-child { display: flex; align-items: center; justify-content: space-between; color: var(--hg-muted); font-size: 10px; font-weight: 700; }
.member-training-season__progress > div:first-child strong { color: var(--hg-ink); font-size: 12px; }
.member-training-season__progress .member-level-progress { height: 6px; margin: 7px 0 0; background: var(--hg-primary-soft); }
.member-training-season__progress .member-level-progress span { background: linear-gradient(90deg, var(--hg-primary), #8c7cff); }
.member-training-season.is-success .member-level-progress span { background: linear-gradient(90deg, #16835b, #3bd39a); }
.member-training-season__meta { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 13px; color: var(--hg-muted); font-size: 10px; }
.member-training-season__meta span { display: inline-flex; gap: 5px; align-items: center; }
.member-training-season__meta i { color: var(--hg-primary); }
.member-training-season__reason { display: flex; gap: 8px; align-items: flex-start; margin: 13px 0 0; padding: 10px 11px; border-radius: 11px; color: var(--hg-ink); background: rgba(189,61,92,.08); font-size: 10px; line-height: 1.45; }
.member-training-season__reason > i { color: #bd3d5c; }
.member-training-season__reason span, .member-training-season__reason small { display: block; }
.member-training-season__reason small { margin-bottom: 2px; color: #bd3d5c; font-size: 8px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.member-training-season__mentor { display: grid; grid-template-columns: 34px minmax(0, 1fr) 14px; gap: 9px; align-items: center; margin-top: 14px; padding: 9px 10px; border: 1px solid var(--hg-border); border-radius: 12px; color: inherit; background: color-mix(in srgb, var(--hg-surface) 78%, transparent); transition: border-color .18s ease, transform .18s ease; }
.member-training-season__mentor:hover { border-color: color-mix(in srgb, var(--hg-primary) 38%, var(--hg-border)); color: inherit; transform: translateY(-1px); }
.member-training-season__mentor > img, .member-training-season__mentor > span:first-child { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--hg-primary-soft); object-fit: cover; }
.member-training-season__mentor > span:nth-child(2) { min-width: 0; }
.member-training-season__mentor small, .member-training-season__mentor strong { display: block; }
.member-training-season__mentor small { color: var(--hg-muted); font-size: 9px; }
.member-training-season__mentor strong { overflow: hidden; color: var(--hg-ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.member-training-season__mentor > i { color: var(--hg-primary); font-size: 11px; }
.member-training-history__empty { display: grid; min-height: 160px; place-items: center; align-content: center; gap: 6px; border: 1px dashed var(--hg-border); border-radius: 17px; color: var(--hg-muted); text-align: center; }
.member-training-history__empty i { color: var(--hg-primary); font-size: 26px; }
.member-training-history__empty strong { color: var(--hg-ink); font-size: 12px; }
.member-training-history__empty span { font-size: 10px; }
.member-awards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.member-award { display: flex; gap: 12px; align-items: center; min-height: 86px; padding: 15px; border: 1px solid var(--hg-border); border-radius: 16px; background: color-mix(in srgb, var(--hg-surface-2) 48%, var(--hg-surface)); }
.member-award-icon { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; border-radius: 14px; font-size: 20px; }
.member-award div { display: flex; min-width: 0; flex-direction: column; }
.member-award strong { color: var(--hg-ink); font-size: 12px; }
.member-award small { margin-top: 3px; color: var(--hg-muted); font-size: 10px; }
.member-award--violet .member-award-icon { color: #5b4cf0; background: #eeecff; }.member-award--blue .member-award-icon { color: #2879bd; background: #e4f2ff; }.member-award--green .member-award-icon { color: #16835b; background: #e0f5ec; }.member-award--amber .member-award-icon { color: #a96810; background: #fff0d5; }.member-award--rose .member-award-icon { color: #bd3d68; background: #ffe6ef; }.member-award--orange .member-award-icon { color: #c76522; background: #ffeadc; }
.member-level-card { overflow: hidden; color: #fff; background: linear-gradient(145deg, #5343dc, #7566f5); }
.member-level-label { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .72; }
.member-level-number { display: grid; width: 68px; height: 68px; margin: 18px 0 14px; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 22px; background: rgba(255,255,255,.12); font-size: 30px; font-weight: 850; }
.member-level-card h3 { margin: 0; color: #fff; font-size: 20px; }
.member-level-progress { overflow: hidden; height: 7px; margin: 18px 0 9px; border-radius: 10px; background: rgba(255,255,255,.16); }
.member-level-progress span { display: block; height: 100%; border-radius: inherit; background: #fff; }
.member-level-card p { margin: 0; color: rgba(255,255,255,.72); font-size: 10px; }
.member-level-info { display: grid; width: 100%; grid-template-columns: 18px 1fr 12px; gap: 8px; align-items: center; margin-top: 16px; padding: 10px 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 13px; color: #fff; background: rgba(255,255,255,.1); font-size: 11px; font-weight: 780; text-align: left; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.member-level-info:hover, .member-level-info:focus-visible { border-color: rgba(255,255,255,.42); color: #fff; background: rgba(255,255,255,.17); transform: translateY(-1px); }
.member-level-info > i:first-child { font-size: 16px; }
.member-level-info > i:last-child { font-size: 10px; opacity: .72; }
.member-level-modal__eyebrow { display: block; margin-bottom: 3px; color: var(--hg-primary); font-size: 9px; font-weight: 820; letter-spacing: .08em; text-transform: uppercase; }
.member-level-modal__experience { display: grid; grid-template-columns: 48px repeat(2, minmax(0, 1fr)); gap: 13px; align-items: center; margin-bottom: 18px; padding: 15px; border: 1px solid var(--hg-border); border-radius: 16px; background: var(--hg-surface-2); }
.member-level-modal__experience > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(145deg, var(--hg-primary), #8a70f4); font-size: 20px; }
.member-level-modal__experience > div { min-width: 0; }
.member-level-modal__experience small,
.member-level-modal__experience strong { display: block; }
.member-level-modal__experience small { color: var(--hg-primary); font-size: 8px; font-weight: 820; letter-spacing: .05em; text-transform: uppercase; }
.member-level-modal__experience strong { overflow: hidden; margin-top: 2px; color: var(--hg-ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.member-level-modal__experience p { margin: 2px 0 0; color: var(--hg-muted); font-size: 9px; line-height: 1.35; }
.member-level-modal__next { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 13px; align-items: center; margin-bottom: 22px; padding: 15px; border: 1px solid color-mix(in srgb, var(--hg-primary) 22%, var(--hg-border)); border-radius: 16px; background: linear-gradient(135deg, var(--hg-primary-soft), color-mix(in srgb, var(--hg-surface) 88%, var(--hg-primary-soft))); }
.member-level-modal__next > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; color: #fff; background: var(--hg-primary); font-size: 20px; box-shadow: 0 8px 20px rgba(91,76,240,.2); }
.member-level-modal__next small, .member-level-modal__next strong { display: block; }
.member-level-modal__next small { color: var(--hg-primary); font-size: 9px; font-weight: 820; letter-spacing: .06em; text-transform: uppercase; }
.member-level-modal__next strong { margin-top: 2px; color: var(--hg-ink); font-size: 14px; }
.member-level-modal__next p { margin: 3px 0 0; color: var(--hg-muted); font-size: 10px; line-height: 1.4; }
.member-level-modal__next.is-complete > span { background: #d49729; box-shadow: 0 8px 20px rgba(212,151,41,.2); }
.member-level-benefits ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.member-level-benefits li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: start; opacity: .58; }
.member-level-benefits li > span { display: grid; width: 38px; height: 38px; border: 1px solid var(--hg-border); border-radius: 12px; color: var(--hg-muted); background: var(--hg-surface-2); place-items: center; }
.member-level-benefits li.is-unlocked { opacity: 1; }
.member-level-benefits li.is-unlocked > span { border-color: rgba(36,173,120,.2); color: #16835b; background: rgba(36,173,120,.1); }
.member-level-benefits li.is-current > span { color: #fff; background: var(--hg-primary); box-shadow: 0 0 0 4px var(--hg-primary-soft); }
.member-level-benefits li div { min-width: 0; }
.member-level-benefits li small, .member-level-benefits li strong { display: block; }
.member-level-benefits li small { color: var(--hg-primary); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.member-level-benefits li strong { margin-top: 1px; color: var(--hg-ink); font-size: 12px; }
.member-level-benefits li p { margin: 2px 0 0; color: var(--hg-muted); font-size: 10px; line-height: 1.4; }
.member-reward-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.member-reward-tile { position: relative; display: grid; min-width: 0; place-items: center; align-content: start; padding: 18px 12px 14px; border: 1px solid var(--hg-border); border-radius: 19px; color: var(--hg-ink); background: linear-gradient(155deg, color-mix(in srgb, var(--hg-surface-2) 72%, var(--hg-surface)), var(--hg-surface)); text-align: center; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.member-reward-tile:hover, .member-reward-tile:focus-visible { border-color: color-mix(in srgb, var(--reward-a, var(--hg-primary)) 45%, var(--hg-border)); color: var(--hg-ink); box-shadow: 0 14px 30px color-mix(in srgb, var(--reward-a, var(--hg-primary)) 14%, transparent); transform: translateY(-3px); }
.member-reward-tile > strong { display: -webkit-box; overflow: hidden; min-height: 34px; margin-top: 12px; font-size: 11px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.member-reward-tile > span:last-child { display: inline-flex; gap: 5px; align-items: center; margin-top: 7px; color: var(--hg-muted); font-size: 9px; font-weight: 720; }
.member-reward-medal { --reward-a: #bf5af2; --reward-b: #5e5ce6; --reward-c: #64d2ff; position: relative; display: grid; width: 92px; height: 92px; flex: 0 0 92px; place-items: center; isolation: isolate; filter: drop-shadow(0 10px 12px color-mix(in srgb, var(--reward-a) 25%, transparent)); transition: filter .2s ease, transform .2s ease; }
.member-reward-tile:hover .member-reward-medal { filter: drop-shadow(0 14px 16px color-mix(in srgb, var(--reward-a) 35%, transparent)); transform: scale(1.04) rotate(-2deg); }
.member-reward-medal::before { position: absolute; inset: 0; z-index: -2; background: conic-gradient(from -20deg, var(--reward-a), var(--reward-c), var(--reward-b), var(--reward-a), var(--reward-c), var(--reward-a)); clip-path: polygon(50% 0,61% 8%,74% 4%,82% 17%,96% 22%,92% 38%,100% 50%,92% 62%,96% 78%,82% 83%,74% 96%,61% 92%,50% 100%,39% 92%,26% 96%,18% 83%,4% 78%,8% 62%,0 50%,8% 38%,4% 22%,18% 17%,26% 4%,39% 8%); content: ''; }
.member-reward-medal::after { position: absolute; inset: 8px; z-index: -1; border: 2px solid rgba(255,255,255,.66); border-radius: 50%; background: repeating-conic-gradient(from 15deg, color-mix(in srgb, var(--reward-a) 88%, #fff) 0 12deg, var(--reward-b) 12deg 24deg); box-shadow: inset 0 0 0 4px rgba(12,12,32,.28), 0 0 0 2px color-mix(in srgb, var(--reward-c) 68%, transparent); content: ''; }
.member-reward-medal__face { position: relative; display: grid; width: 62px; height: 62px; z-index: 1; place-items: center; align-content: center; overflow: hidden; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: #fff; background: radial-gradient(circle at 32% 24%, color-mix(in srgb, var(--reward-c) 68%, #fff), var(--reward-a) 42%, color-mix(in srgb, var(--reward-b) 76%, #08091d)); box-shadow: inset 0 -10px 18px rgba(5,6,25,.28), inset 0 3px 5px rgba(255,255,255,.38); text-shadow: 0 2px 7px rgba(5,6,25,.42); }
.member-reward-medal__face::after { position: absolute; width: 74px; height: 26px; top: -12px; left: -20px; border-radius: 50%; background: rgba(255,255,255,.28); content: ''; transform: rotate(-20deg); }
.member-reward-medal__face i { font-size: 22px; line-height: 1; }
.member-reward-medal__face b { margin-top: 2px; font-size: 11px; line-height: 1; }
.member-reward-medal--attendance_streak { --reward-a: #ff375f; --reward-b: #ff7b18; --reward-c: #ffd60a; }
.member-reward-medal--confirmed_referrals { --reward-a: #30d158; --reward-b: #0a84ff; --reward-c: #64d2ff; }
.member-reward-medal--training_block_one { --reward-a: #bf5af2; --reward-b: #5e5ce6; --reward-c: #64d2ff; }
.member-reward-medal--training_completion { --reward-a: #ffd60a; --reward-b: #ff375f; --reward-c: #ff9f0a; }
.member-reward-medal.is-cancelled { filter: grayscale(1) opacity(.55); }
.member-reward-medal--large { width: 138px; height: 138px; flex-basis: 138px; filter: drop-shadow(0 18px 24px color-mix(in srgb, var(--reward-a) 32%, transparent)); }
.member-reward-medal--large::after { inset: 12px; border-width: 3px; box-shadow: inset 0 0 0 6px rgba(12,12,32,.28), 0 0 0 3px color-mix(in srgb, var(--reward-c) 68%, transparent); }
.member-reward-medal--large .member-reward-medal__face { width: 94px; height: 94px; border-width: 2px; }
.member-reward-medal--large .member-reward-medal__face i { font-size: 34px; }
.member-reward-medal--large .member-reward-medal__face b { font-size: 15px; }
.member-reward-modal .modal-header > span { color: var(--hg-muted); font-size: 10px; font-weight: 820; letter-spacing: .08em; text-transform: uppercase; }
.member-reward-modal .modal-body { display: grid; justify-items: center; padding-top: 20px; text-align: center; }
.member-reward-modal__eyebrow { margin-top: 15px; color: var(--hg-primary); font-size: 9px; font-weight: 820; letter-spacing: .08em; text-transform: uppercase; }
.member-reward-modal h2 { margin: 5px 0 0; color: var(--hg-ink); font-size: 24px; }
.member-reward-modal .modal-body > p { max-width: 390px; margin: 8px 0 20px; color: var(--hg-muted); font-size: 12px; line-height: 1.55; }
.member-reward-modal dl { width: 100%; margin: 0; padding: 4px 15px; border: 1px solid var(--hg-border); border-radius: 16px; background: var(--hg-surface-2); text-align: left; }
.member-reward-modal dl > div { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--hg-border); }
.member-reward-modal dl > div:last-child { border: 0; }
.member-reward-modal dt { display: inline-flex; gap: 7px; align-items: center; color: var(--hg-muted); font-size: 10px; font-weight: 650; }
.member-reward-modal dt i { color: var(--hg-primary); }
.member-reward-modal dd { margin: 0; color: var(--hg-ink); font-size: 11px; font-weight: 780; text-align: right; }
.member-reward-status { display: inline-flex; padding: 5px 8px; border-radius: 8px; font-size: 9px; font-weight: 800; }
.member-reward-status.is-pending { color: #9a6413; background: rgba(234,159,47,.13); }
.member-reward-status.is-issued { color: #16835b; background: rgba(36,173,120,.12); }
.member-reward-status.is-cancelled { color: var(--hg-muted); background: var(--hg-surface); }
.member-activity-card ul { margin: 0; padding: 0; list-style: none; }
.member-activity-card li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--hg-border); font-size: 11px; }
.member-activity-card li:last-child { padding-bottom: 0; border: 0; }
.member-activity-card li span { display: inline-flex; gap: 7px; align-items: center; color: var(--hg-muted); }
.member-activity-card li strong { color: var(--hg-ink); text-align: right; }
.user-award-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.user-award-checks label { cursor: pointer; }
.user-award-checks label > input { position: absolute; opacity: 0; pointer-events: none; }
.user-award-checks label > span { display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 9px 12px; border: 1px solid var(--hg-border); border-radius: 12px; color: var(--hg-muted); background: var(--hg-surface); font-size: 11px; font-weight: 700; transition: .18s ease; }
.user-award-checks input:checked + span { border-color: var(--hg-primary); color: var(--hg-primary); background: var(--hg-primary-soft); box-shadow: 0 0 0 3px rgba(91,76,240,.08); }
.account-avatar-field { display: flex; gap: 18px; align-items: center; }
.account-avatar-field img { width: 86px; height: 86px; flex: 0 0 86px; border-radius: 24px; object-fit: cover; box-shadow: var(--hg-shadow-sm); }
.account-avatar-field > div { min-width: 0; flex: 1; }
.account-avatar-field small { display: block; margin-top: 6px; color: var(--hg-muted); font-size: 10px; }
.account-organization-readonly { padding: 17px; border: 1px solid var(--hg-border); border-radius: 17px; background: var(--hg-surface-2); }
.account-organization-readonly__label { display: block; margin-bottom: 10px; color: var(--hg-muted); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.account-organization-readonly__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.account-organization-readonly__grid > div { display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; align-items: center; min-width: 0; padding: 11px; border-radius: 12px; background: var(--hg-surface); }
.account-organization-readonly__grid i { grid-row: 1 / 3; color: var(--hg-primary); font-size: 18px; }
.account-organization-readonly__grid span { color: var(--hg-muted); font-size: 10px; }
.account-organization-readonly__grid strong { overflow: hidden; color: var(--hg-ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-organization-readonly > small { display: block; margin-top: 10px; color: var(--hg-muted); font-size: 10px; }

@media (max-width: 767.98px) {
    .member-profile-hero { padding: 102px 0 34px; }
    .member-profile-head { gap: 18px; align-items: flex-start; }
    .member-profile-avatar-wrap { width: 86px; height: 86px; flex-basis: 86px; padding: 3px; border-radius: 24px; }
    .member-profile-avatar { border-radius: 20px; }
    .member-profile-online { right: -3px; bottom: 4px; width: 17px; height: 17px; border-width: 3px; }
    .member-profile-title h1 { margin-top: 8px; font-size: 27px; }
    .member-profile-title > p { font-size: 12px; }
    .member-profile-meta { gap: 8px; margin-top: 12px; }
    .member-profile-meta span { width: 100%; }
    .member-profile-actions { gap: 7px; }
    .member-profile-actions .btn { padding: 8px 10px; }
    .member-level-modal__experience { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
    .member-level-modal__experience > span { width: 44px; height: 44px; grid-row: 1 / 3; }
    .member-level-modal__experience > div:last-child { grid-column: 2; }
    .member-profile-grid { grid-template-columns: 1fr; }
    .member-profile-main { order: 2; }
    .member-profile-side { order: 1; grid-template-columns: 1fr; }
    .member-profile-card { padding: 19px; border-radius: 18px; }
    .member-profile-students { grid-template-columns: 1fr; }
    .member-awards-grid { grid-template-columns: 1fr; }
    .member-reward-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .member-reward-tile { padding-inline: 8px; }
    .user-award-checks { grid-template-columns: 1fr; }
    .account-organization-readonly__grid { grid-template-columns: 1fr; }
}

/* Events, training, organizer and profile directory */
.section-page-hero { position: relative; overflow: hidden; padding: 128px 0 48px; color: #fff; background: linear-gradient(132deg, #211d57, #5141d2 62%, #7768f5); }
.section-page-hero::after { position: absolute; inset: 0; background: radial-gradient(circle at 85% 10%, rgba(255,255,255,.15), transparent 25%), radial-gradient(circle at 10% 100%, rgba(144,129,255,.3), transparent 30%); content: ''; }
.section-page-hero .container { position: relative; z-index: 1; }
.section-page-hero .eyebrow { color: rgba(255,255,255,.76); }
.section-page-hero h1 { max-width: 880px; margin: 9px 0 8px; color: #fff; font-size: clamp(34px, 5vw, 54px); letter-spacing: -.035em; }
.section-page-hero p { max-width: 720px; margin: 0; color: rgba(255,255,255,.73); font-size: 15px; }
.events-view-nav { display: flex; width: fit-content; gap: 7px; margin-bottom: 20px; padding: 6px; border: 1px solid var(--hg-border); border-radius: 17px; background: var(--hg-surface); box-shadow: var(--hg-shadow-sm); }
.events-view-nav__item { display: flex; min-height: 52px; gap: 10px; align-items: center; padding: 8px 14px; border-radius: 12px; color: var(--hg-muted); }
.events-view-nav__item:hover { color: var(--hg-ink); background: var(--hg-surface-2); }
.events-view-nav__item.is-active { color: var(--hg-primary); background: var(--hg-primary-soft); }
.events-view-nav__item > i { font-size: 18px; }
.events-view-nav__item > span { display: flex; flex-direction: column; }
.events-view-nav__item strong { color: inherit; font-size: 13px; line-height: 1.25; }
.events-view-nav__item small { margin-top: 2px; color: var(--hg-muted); font-size: 9px; }
.event-format-toolbar { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin: 18px 0; }
.event-format-search { position: relative; width: min(100%, 520px); margin: 0; }
.event-format-search > span { position: absolute; z-index: 2; top: 50%; left: 14px; color: var(--hg-muted); transform: translateY(-50%); }
.event-format-search .form-control { padding-left: 42px; }
.event-format-toolbar__count { flex: 0 0 auto; color: var(--hg-muted); font-size: 12px; font-weight: 720; }
.event-format-card .content-card-body { min-width: 0; flex: 1; }
.event-format-actions { justify-content: flex-end; }
.event-format-actions__toggle { display: inline-flex; min-height: 44px; gap: 7px; align-items: center; }
.event-format-actions .dropdown-menu { min-width: 210px; padding: 7px; border-color: var(--hg-border); border-radius: 14px; color: var(--hg-ink); background: var(--hg-surface); box-shadow: var(--hg-shadow); }
.event-format-actions .dropdown-item { display: flex; min-height: 42px; gap: 10px; align-items: center; padding: 9px 11px; border: 0; border-radius: 9px; color: var(--hg-ink); background: transparent; font-size: 13px; }
.event-format-actions .dropdown-item:hover,
.event-format-actions .dropdown-item:focus { color: var(--hg-primary); background: var(--hg-primary-soft); }
.event-format-actions .dropdown-item.text-danger { color: #d64555 !important; }
.event-format-actions .dropdown-item i { width: 18px; text-align: center; }
.event-format-empty { display: flex; min-height: 180px; flex-direction: column; gap: 3px; align-items: center; justify-content: center; padding: 28px; border: 1px dashed var(--hg-border); border-radius: 20px; color: var(--hg-muted); background: var(--hg-surface); text-align: center; }
.event-format-empty[hidden] { display: none; }
.event-format-empty > i { margin-bottom: 5px; color: var(--hg-primary); font-size: 28px; }
.event-format-empty strong { color: var(--hg-ink); }
.event-format-empty span { font-size: 12px; }
.event-format-more { display: flex; min-width: 180px; min-height: 44px; gap: 7px; align-items: center; justify-content: center; margin: 18px auto 0; }
.event-format-more[hidden] { display: none; }
.training-portal-hero { display: flex; gap: 28px; align-items: flex-end; justify-content: space-between; }
.training-portal-hero > div { min-width: 0; }
.training-portal-settings-link { display: inline-flex; flex: 0 0 auto; gap: 8px; align-items: center; padding: 12px 17px; border: 1px solid rgba(255,255,255,.28); color: #fff; background: rgba(255,255,255,.12); box-shadow: 0 12px 28px rgba(20,15,67,.16); backdrop-filter: blur(12px); font-size: 14px; }
.training-portal-settings-link:hover, .training-portal-settings-link:focus { border-color: rgba(255,255,255,.5); color: #fff; background: rgba(255,255,255,.2); }
.training-portal-mentor { max-width: 560px; margin: 4px 0 18px; padding: 13px 14px; border: 1px solid var(--hg-border); border-radius: 16px; background: var(--hg-surface-2); }
.training-portal-mentor > span { display: block; margin-bottom: 10px; color: var(--hg-primary); font-size: 11px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.training-own-status { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; margin: -4px 0 18px; padding: 15px; border: 1px solid rgba(189,61,92,.22); border-radius: 16px; background: linear-gradient(135deg, rgba(189,61,92,.1), var(--hg-surface)); }
.training-own-status > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; color: #bd3d5c; background: rgba(189,61,92,.12); font-size: 18px; }
.training-own-status div > small, .training-own-status div > strong, .training-own-status div > em { display: block; }
.training-own-status div > small { color: #bd3d5c; font-size: 9px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.training-own-status div > strong { margin-top: 2px; color: var(--hg-ink); font-size: 16px; }
.training-own-status p { margin: 8px 0 0; color: var(--hg-ink); font-size: 13px; line-height: 1.5; }
.training-own-status div > em { margin-top: 7px; color: var(--hg-muted); font-size: 11px; font-style: normal; }
.training-reward-path__heading { margin-top: 20px; }
.training-reward-path__heading span { color: var(--hg-primary); font-size: 10px; font-weight: 820; letter-spacing: .07em; text-transform: uppercase; }
.training-reward-path__heading h3 { margin: 3px 0 0; color: var(--hg-ink); font-size: 19px; }
.training-reward-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.training-reward-path article { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 11px; padding: 14px; border: 1px dashed var(--hg-border); border-radius: 16px; opacity: .66; background: var(--hg-surface-2); }
.training-reward-path article > span { display: grid; width: 42px; height: 42px; border-radius: 13px; color: var(--hg-muted); background: var(--hg-surface); font-size: 18px; place-items: center; }
.training-reward-path article.is-earned { border-style: solid; border-color: rgba(36,173,120,.3); opacity: 1; background: rgba(36,173,120,.07); }
.training-reward-path article.is-earned > span { color: #16835b; background: rgba(36,173,120,.12); }
.training-reward-path small, .training-reward-path strong { display: block; }
.training-reward-path small { color: var(--hg-primary); font-size: 9px; font-weight: 820; text-transform: uppercase; }
.training-reward-path strong { margin-top: 3px; color: var(--hg-ink); font-size: 12px; }
.training-reward-path p { margin: 4px 0 0; color: var(--hg-muted); font-size: 10px; line-height: 1.4; }
.training-portal-program { display: grid; gap: 14px; }
.training-portal-block { overflow: hidden; border: 1px solid var(--hg-border); border-radius: 19px; background: color-mix(in srgb, var(--hg-surface-2) 38%, var(--hg-surface)); }
.training-portal-block__head { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: var(--hg-surface); }
.training-portal-block__number { display: grid; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 14px; font-weight: 850; place-items: center; }
.training-portal-block__head > div { min-width: 0; }
.training-portal-block__head h3 { margin: 0; color: var(--hg-ink); font-size: 17px; }
.training-portal-block__head small { display: block; margin-top: 2px; color: var(--hg-muted); font-size: 12px; }
.training-portal-block__lock { display: inline-flex; gap: 5px; align-items: center; margin-left: auto; padding: 6px 9px; border-radius: 9px; color: var(--hg-muted); background: var(--hg-surface-2); font-size: 11px; font-weight: 780; }
.training-portal-block > .training-portal-schedule { padding: 12px; border-top: 1px solid var(--hg-border); }
.training-portal-block__locked { display: flex; min-height: 92px; gap: 13px; align-items: center; padding: 18px; border-top: 1px solid var(--hg-border); color: var(--hg-muted); background: repeating-linear-gradient(135deg, transparent, transparent 12px, color-mix(in srgb, var(--hg-surface-2) 55%, transparent) 12px, color-mix(in srgb, var(--hg-surface-2) 55%, transparent) 24px); }
.training-portal-block__locked > i { display: grid; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; color: var(--hg-primary); background: var(--hg-primary-soft); place-items: center; }
.training-portal-block__locked strong, .training-portal-block__locked span { display: block; }
.training-portal-block__locked strong { color: var(--hg-ink); font-size: 14px; }
.training-portal-block__locked span { margin-top: 3px; font-size: 13px; }
.training-portal-requirements { overflow: hidden; border: 1px solid color-mix(in srgb, #df9a2d 38%, var(--hg-border)); border-radius: 19px; background: color-mix(in srgb, rgba(234,159,47,.12) 60%, var(--hg-surface)); }
.training-portal-requirements.is-complete { border-color: color-mix(in srgb, #24ad78 38%, var(--hg-border)); background: color-mix(in srgb, rgba(36,173,120,.1) 62%, var(--hg-surface)); }
.training-portal-requirements > header { display: flex; gap: 15px; align-items: center; justify-content: space-between; padding: 15px 17px; border-bottom: 1px solid var(--hg-border); }
.training-portal-requirements > header span { color: var(--hg-primary); font-size: 11px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.training-portal-requirements > header h3 { margin: 2px 0 0; color: var(--hg-ink); font-size: 17px; }
.training-portal-requirements > header > i { color: #b87518; font-size: 22px; }
.training-portal-requirements.is-complete > header > i { color: #16835b; }
.training-portal-requirements__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 13px 16px; }
.training-portal-requirements__grid article { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid var(--hg-border); border-radius: 13px; background: var(--hg-surface); }
.training-portal-requirements__grid article > i { color: var(--hg-muted); font-size: 17px; }
.training-portal-requirements__grid article.is-success > i { color: #16835b; }
.training-portal-requirements__grid article.is-danger > i { color: #bd3d5c; }
.training-portal-requirements__grid strong, .training-portal-requirements__grid span { display: block; }
.training-portal-requirements__grid strong { color: var(--hg-ink); font-size: 14px; }
.training-portal-requirements__grid span { margin-top: 2px; color: var(--hg-muted); font-size: 12px; }
.training-portal-requirements > p { display: flex; gap: 7px; align-items: center; margin: 0; padding: 11px 16px; border-top: 1px solid var(--hg-border); color: var(--hg-muted); font-size: 12px; font-weight: 720; }
.training-portal-requirements.is-complete > p { color: #16835b; }
.training-portal-schedule { display: grid; gap: 10px; }
.training-portal-session { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 15px; border: 1px solid var(--hg-border); border-radius: 17px; color: var(--hg-ink); background: color-mix(in srgb, var(--hg-surface-2) 56%, var(--hg-surface)); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.training-portal-session:hover { border-color: color-mix(in srgb, var(--hg-primary) 38%, var(--hg-border)); box-shadow: var(--hg-shadow-sm); transform: translateY(-1px); }
.training-portal-session.is-cancelled { opacity: .68; }
.training-portal-session__date { display: grid; width: 66px; height: 66px; align-content: center; border: 1px solid color-mix(in srgb, var(--hg-primary) 25%, var(--hg-border)); border-radius: 17px; color: var(--hg-primary); background: var(--hg-primary-soft); text-align: center; }
.training-portal-session__date strong { font-size: 24px; line-height: 1; }
.training-portal-session__date span { margin-top: 4px; font-size: 11px; font-weight: 750; }
.training-portal-session__copy { min-width: 0; }
.training-portal-session__copy > span { color: var(--hg-primary); font-size: 11px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.training-portal-session__copy h3 { overflow: hidden; margin: 2px 0 6px; color: var(--hg-ink); font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.training-portal-session__meta { display: flex; flex-wrap: wrap; gap: 7px 16px; color: var(--hg-muted); font-size: 13px; }
.training-portal-session__meta time, .training-portal-session__meta span { display: inline-flex; gap: 6px; align-items: center; }
.training-portal-session__meta i { color: var(--hg-primary); }
.training-portal-session__actions { display: flex; max-width: 280px; flex-wrap: wrap; gap: 7px; align-items: center; justify-content: flex-end; }
.training-portal-session__actions .btn { display: inline-flex; gap: 6px; align-items: center; min-height: 34px; border-radius: 9px; font-size: 12px; font-weight: 750; }
.training-portal-session__badge { display: inline-flex; gap: 5px; align-items: center; padding: 6px 9px; border-radius: 9px; font-size: 11px; font-weight: 780; white-space: nowrap; }
.training-portal-session__badge.is-offline { color: #9b6616; background: rgba(234,159,47,.14); }
.training-portal-session__badge.is-cancelled { color: #b43b56; background: rgba(210,67,93,.11); }
.training-portal-progress { display: inline-flex; gap: 5px; align-items: center; padding: 6px 9px; border-radius: 9px; color: var(--hg-muted); background: var(--hg-surface); font-size: 11px; font-weight: 780; white-space: nowrap; }
.training-portal-progress.is-success { color: #16835b; background: rgba(22,131,91,.1); }
.training-portal-progress.is-danger { color: #bd3d5c; background: rgba(189,61,92,.1); }
.training-portal-progress.is-warning { color: #9b6616; background: rgba(234,159,47,.14); }
.training-portal-session__xp { display: inline-flex; gap: 4px; align-items: center; padding: 6px 9px; border-radius: 9px; color: #9b6616; background: rgba(234,159,47,.14); font-size: 11px; font-weight: 820; white-space: nowrap; }
.training-portal-enrollment-list { display: grid; gap: 9px; }
.training-portal-enrollment-list .accordion-item { overflow: hidden; border: 1px solid var(--hg-border); border-radius: 16px; color: var(--hg-ink); background: var(--hg-surface); }
.training-portal-enrollment-list .accordion-body { border-top: 1px solid var(--hg-border); color: var(--hg-ink); background: color-mix(in srgb, var(--hg-surface-2) 45%, var(--hg-surface)); }
.training-leader-progress { overflow: hidden; }
.training-leader-progress > .text-muted { margin-bottom: 18px; }
.training-leader-section-head { display: flex; gap: 14px; align-items: center; justify-content: space-between; margin: 22px 0 10px; }
.training-leader-section-head > div { display: flex; min-width: 0; flex-direction: column; }
.training-leader-section-head span { color: var(--hg-primary); font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.training-leader-section-head h3 { margin: 2px 0 0; color: var(--hg-ink); font-size: 18px; }
.training-leader-section-head b, .training-portal-archive summary > b { display: grid; min-width: 34px; height: 34px; place-items: center; border-radius: 11px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 13px; }
.training-portal-enrollment-list { gap: 12px; }
.training-portal-enrollment-list .training-learner-card { border-radius: 20px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.training-portal-enrollment-list .training-learner-card:has(.accordion-collapse.show) { border-color: color-mix(in srgb, var(--hg-primary) 42%, var(--hg-border)); box-shadow: 0 20px 50px rgba(47,38,122,.11); }
.training-portal-enrollment-list .training-learner-card:hover { border-color: color-mix(in srgb, var(--hg-primary) 30%, var(--hg-border)); }
.training-portal-enrollment-list .training-journey-empty.is-compact { min-height: 130px; border: 1px dashed color-mix(in srgb, var(--hg-primary) 22%, var(--hg-border)); border-radius: 18px; background: color-mix(in srgb, var(--hg-primary-soft) 25%, var(--hg-surface)); }
.training-portal-archive { margin-top: 18px; border: 1px solid var(--hg-border); border-radius: 19px; background: color-mix(in srgb, var(--hg-surface-2) 58%, var(--hg-surface)); }
.training-portal-archive > summary { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 15px 17px; color: var(--hg-ink); cursor: pointer; list-style: none; }
.training-portal-archive > summary::-webkit-details-marker { display: none; }
.training-portal-archive > summary > span { display: flex; min-width: 0; gap: 11px; align-items: center; }
.training-portal-archive > summary > span > i { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 12px; color: var(--hg-muted); background: var(--hg-surface); }
.training-portal-archive > summary > span > span { display: flex; min-width: 0; flex-direction: column; }
.training-portal-archive > summary strong { font-size: 14px; }
.training-portal-archive > summary small { margin-top: 2px; color: var(--hg-muted); font-size: 11px; }
.training-portal-archive > .training-portal-enrollment-list { padding: 0 12px 12px; }
.training-portal-participant-summary { grid-template-columns: minmax(260px, 1fr) minmax(180px, .62fr) minmax(150px, auto) 40px; min-height: 84px; gap: 14px; padding: 13px 15px; }
.training-learner-card__person { min-width: 0; }
.training-mentor-chip { display: grid; min-width: 0; grid-template-columns: 38px minmax(0, 1fr) 12px; gap: 9px; align-items: center; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--hg-primary) 24%, var(--hg-border)); border-radius: 14px; color: var(--hg-ink); background: linear-gradient(135deg, color-mix(in srgb, var(--hg-primary-soft) 75%, var(--hg-surface)), var(--hg-surface)); transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.training-mentor-chip:hover, .training-mentor-chip:focus-visible { border-color: color-mix(in srgb, var(--hg-primary) 52%, var(--hg-border)); color: var(--hg-ink); background: var(--hg-primary-soft); transform: translateY(-1px); }
.training-mentor-chip > img, .training-mentor-chip > span:first-child { display: grid; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--hg-primary-soft) 80%, var(--hg-surface)); object-fit: cover; place-items: center; }
.training-mentor-chip > span:first-child { font-size: 19px; }
.training-mentor-chip > span:nth-child(2) { display: flex; overflow: hidden; min-width: 0; flex-direction: column; }
.training-mentor-chip small, .training-mentor-chip strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.training-mentor-chip small { color: var(--hg-primary); font-size: 9px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.training-mentor-chip strong { margin-top: 1px; color: var(--hg-ink); font-size: 13px; }
.training-mentor-chip > i { color: var(--hg-primary); font-size: 10px; }
.training-overall-chip { display: flex; gap: 9px; align-items: center; min-width: max-content; }
.training-overall-chip > span:last-child { display: flex; flex-direction: column; }
.training-overall-chip strong { color: var(--hg-ink); font-size: 13px; line-height: 1.2; }
.training-overall-chip small { margin-top: 2px; color: var(--hg-muted); font-size: 10px; font-weight: 700; }
.training-overall-ring { position: relative; display: grid; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; background: conic-gradient(#725cff calc(var(--training-progress) * 1%), color-mix(in srgb, var(--hg-border) 78%, transparent) 0); place-items: center; }
.training-overall-ring::after { position: absolute; inset: 5px; border-radius: inherit; background: var(--hg-surface); content: ''; }
.training-overall-ring b { position: relative; z-index: 1; color: var(--hg-ink); font-size: 10px; letter-spacing: -.02em; }
.training-portal-enrollment-list .accordion-body { padding: 20px; }
.training-archive-state { display: grid; grid-template-columns: 42px minmax(150px, auto) minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, #d39332 28%, var(--hg-border)); border-radius: 15px; background: color-mix(in srgb, #f0b64f 9%, var(--hg-surface)); }
.training-archive-state > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #9a6718; background: rgba(225,157,53,.14); }
.training-archive-state > div { display: flex; flex-direction: column; }
.training-archive-state small { color: #9a6718; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.training-archive-state strong { color: var(--hg-ink); font-size: 14px; }
.training-archive-state time { color: var(--hg-muted); font-size: 10px; }
.training-archive-state p { margin: 0; color: var(--hg-muted); font-size: 12px; }
.training-journey-hero { position: relative; display: grid; overflow: hidden; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; padding: 23px; border: 1px solid color-mix(in srgb, #7661ff 36%, var(--hg-border)); border-radius: 21px; color: var(--hg-ink); background: radial-gradient(circle at 93% 8%, rgba(119,99,255,.2), transparent 31%), radial-gradient(circle at 8% 100%, rgba(31,190,164,.12), transparent 32%), linear-gradient(135deg, color-mix(in srgb, var(--hg-primary-soft) 52%, var(--hg-surface)), var(--hg-surface)); }
.training-journey-hero::after { position: absolute; top: -34px; right: 70px; width: 100px; height: 100px; border: 1px solid rgba(119,99,255,.13); border-radius: 28px; content: ''; transform: rotate(28deg); }
.training-journey-hero__intro { position: relative; z-index: 1; min-width: 0; }
.training-journey-hero__intro > span, .training-journey-grid header > span, .training-journey-timeline-section > header > div > span { color: var(--hg-primary); font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.training-journey-hero__intro h4 { margin: 4px 0 3px; color: var(--hg-ink); font-size: clamp(19px, 2.2vw, 26px); letter-spacing: -.025em; }
.training-journey-hero__intro p { margin: 0; color: var(--hg-muted); font-size: 13px; font-weight: 680; }
.training-journey-hero__score { position: relative; z-index: 1; display: flex; align-items: flex-end; flex-direction: column; }
.training-journey-hero__score strong { color: var(--hg-primary); font-size: clamp(32px, 4vw, 46px); font-weight: 900; letter-spacing: -.055em; line-height: .92; }
.training-journey-hero__score span { margin-top: 5px; color: var(--hg-muted); font-size: 10px; font-weight: 820; letter-spacing: .06em; text-transform: uppercase; }
.training-journey-bar { position: relative; z-index: 1; overflow: hidden; grid-column: 1 / -1; height: 10px; border: 1px solid color-mix(in srgb, var(--hg-border) 78%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--hg-surface-2) 78%, var(--hg-surface)); box-shadow: inset 0 1px 2px rgba(27,20,75,.08); }
.training-journey-bar > span { display: block; min-width: 4px; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5d4ce7, #8c69ff 58%, #38d8b5); box-shadow: 0 0 16px rgba(112,88,255,.42); transition: width .45s ease; }
.training-next-step { position: relative; z-index: 1; display: grid; grid-column: 1 / -1; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--hg-primary) 22%, var(--hg-border)); border-radius: 16px; background: color-mix(in srgb, var(--hg-surface) 88%, transparent); backdrop-filter: blur(10px); }
.training-next-step__icon { display: grid; width: 44px; height: 44px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #674ee6, #8e6cff); box-shadow: 0 9px 19px rgba(100,76,227,.23); place-items: center; }
.training-next-step > div { display: flex; min-width: 0; flex-direction: column; }
.training-next-step small { color: var(--hg-primary); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.training-next-step strong { overflow: hidden; margin-top: 2px; color: var(--hg-ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.training-next-step > div > span { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 4px; color: var(--hg-muted); font-size: 12px; }
.training-next-step > div > span i { color: var(--hg-primary); }
.training-next-step em { padding: 6px 9px; border-radius: 9px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 10px; font-style: normal; font-weight: 820; white-space: nowrap; }
.training-next-step.is-finished { border-color: color-mix(in srgb, #23ad7b 35%, var(--hg-border)); }
.training-next-step.is-finished .training-next-step__icon { background: linear-gradient(135deg, #199d70, #38d8a7); }
.training-next-step.is-archived { border-color: color-mix(in srgb, #d39332 28%, var(--hg-border)); }
.training-next-step.is-archived .training-next-step__icon { background: linear-gradient(135deg, #b9781b, #e4aa45); box-shadow: 0 9px 19px rgba(185,120,27,.2); }
.training-attendance-editor { overflow: hidden; margin-top: 14px; border: 1px solid color-mix(in srgb, var(--hg-primary) 28%, var(--hg-border)); border-radius: 19px; background: var(--hg-surface); }
.training-attendance-editor > header { display: flex; gap: 18px; align-items: center; justify-content: space-between; padding: 17px 19px; border-bottom: 1px solid var(--hg-border); background: linear-gradient(135deg, color-mix(in srgb, var(--hg-primary-soft) 52%, var(--hg-surface)), var(--hg-surface)); }
.training-attendance-editor > header > div { min-width: 0; }
.training-attendance-editor > header span { color: var(--hg-primary); font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.training-attendance-editor > header h4 { margin: 2px 0; color: var(--hg-ink); font-size: 17px; }
.training-attendance-editor > header p { margin: 0; color: var(--hg-muted); font-size: 11px; }
.training-attendance-editor > header > i { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #5e4ad8, #8c6bff); box-shadow: 0 9px 20px rgba(91,76,240,.2); }
.training-attendance-stages { display: grid; gap: 16px; padding: 16px; }
.training-attendance-stage + .training-attendance-stage { padding-top: 16px; border-top: 1px solid var(--hg-border); }
.training-attendance-stage h5 { margin: 0 0 9px; color: var(--hg-primary); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.training-attendance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.training-attendance-grid form { min-width: 0; }
.training-attendance-grid label { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(145px, .7fr); gap: 10px; align-items: center; padding: 10px 11px; border: 1px solid var(--hg-border); border-radius: 13px; background: var(--hg-surface-2); }
.training-attendance-grid label > span { display: flex; overflow: hidden; min-width: 0; flex-direction: column; }
.training-attendance-grid label strong { overflow: hidden; color: var(--hg-ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.training-attendance-grid label small { display: inline-flex; gap: 4px; align-items: center; margin-top: 3px; color: var(--hg-muted); font-size: 10px; }
.training-attendance-grid .form-select { min-height: 38px; border-color: var(--hg-border); border-radius: 10px; color: var(--hg-ink); background-color: var(--hg-surface); font-size: 12px; }
.training-attendance-grid .form-select:focus { border-color: color-mix(in srgb, var(--hg-primary) 54%, var(--hg-border)); box-shadow: 0 0 0 3px rgba(91,76,240,.1); }
.training-learner-card__number, .training-learner-card__phone { display: inline-flex; gap: 5px; align-items: center; margin: 3px 0 0 8px; color: var(--hg-muted); font-size: 10px; font-weight: 720; }
.training-attendance-note-form { grid-column: 1 / -1; }
.training-attendance-note-form label { grid-template-columns: minmax(170px, .55fr) minmax(240px, 1fr); }
.training-attendance-note-form__controls { display: grid !important; overflow: visible !important; gap: 7px; }
.training-attendance-note-form__controls .btn { justify-self: start; }
.training-journey-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); gap: 14px; margin-top: 14px; }
.training-journey-mentor, .training-journey-requirements, .training-journey-timeline-section { border: 1px solid var(--hg-border); border-radius: 18px; background: var(--hg-surface); }
.training-journey-grid header { padding: 15px 16px 8px; }
.training-journey-grid header h4, .training-journey-timeline-section > header h4 { margin: 2px 0 0; color: var(--hg-ink); font-size: 16px; }
.training-journey-mentor > .training-participant { margin: 0 10px 11px; }
.training-journey-requirements { padding-bottom: 10px; }
.training-journey-requirements > div { display: flex; gap: 9px; align-items: center; margin: 0 10px 7px; padding: 9px 10px; border: 1px solid var(--hg-border); border-radius: 12px; color: var(--hg-muted); background: var(--hg-surface-2); }
.training-journey-requirements > div > i { color: #d09631; }
.training-journey-requirements > div.is-complete > i { color: #22a874; }
.training-journey-requirements > div > span { display: flex; min-width: 0; flex-direction: column; }
.training-journey-requirements strong { color: var(--hg-ink); font-size: 12px; }
.training-journey-requirements small { margin-top: 1px; color: var(--hg-muted); font-size: 11px; }
.training-journey-requirements > p { display: flex; gap: 8px; align-items: center; margin: 3px 14px 8px; color: var(--hg-muted); font-size: 12px; }
.training-journey-requirements > p i { color: var(--hg-primary); }
.training-journey-timeline-section { overflow: hidden; margin-top: 14px; }
.training-journey-timeline-section > header { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--hg-border); }
.training-journey-timeline-section > header > small { display: inline-flex; gap: 5px; align-items: center; padding: 5px 8px; border-radius: 8px; color: var(--hg-muted); background: var(--hg-surface-2); font-size: 10px; font-weight: 750; }
.training-journey-timeline { display: grid; padding: 8px 14px 12px; }
.training-timeline-item { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 13px; align-items: center; min-height: 78px; padding: 10px 5px; }
.training-timeline-item + .training-timeline-item { border-top: 1px solid color-mix(in srgb, var(--hg-border) 76%, transparent); }
.training-timeline-item__rail { position: relative; z-index: 1; display: grid; width: 34px; height: 34px; border: 1px solid color-mix(in srgb, var(--hg-primary) 30%, var(--hg-border)); border-radius: 11px; color: var(--hg-primary); background: var(--hg-primary-soft); place-items: center; }
.training-timeline-item__rail i { font-size: 13px; }
.training-timeline-item.is-complete .training-timeline-item__rail { border-color: rgba(32,170,115,.25); color: #169564; background: rgba(32,170,115,.1); }
.training-timeline-item.is-attention .training-timeline-item__rail { border-color: rgba(210,67,93,.25); color: #c13b59; background: rgba(210,67,93,.1); }
.training-timeline-item.is-overdue .training-timeline-item__rail { border-color: rgba(218,151,43,.28); color: #a86d13; background: rgba(218,151,43,.12); }
.training-timeline-item.is-cancelled { opacity: .6; }
.training-timeline-item.is-cancelled .training-timeline-item__rail { color: var(--hg-muted); background: var(--hg-surface-2); }
.training-timeline-item__copy { min-width: 0; }
.training-timeline-item__copy > span { color: var(--hg-primary); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.training-timeline-item__copy h5 { margin: 1px 0 4px; color: var(--hg-ink); font-size: 14px; }
.training-timeline-item__copy p { display: flex; flex-wrap: wrap; gap: 5px 16px; margin: 0; color: var(--hg-muted); font-size: 11px; }
.training-timeline-item__copy p time, .training-timeline-item__copy p span { display: inline-flex; gap: 5px; align-items: center; }
.training-timeline-item__copy p i { color: var(--hg-primary); }
.training-timeline-item__status { display: inline-flex; gap: 5px; align-items: center; justify-content: center; max-width: 190px; padding: 6px 9px; border-radius: 9px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 10px; font-weight: 800; line-height: 1.2; text-align: center; }
.training-timeline-item.is-complete .training-timeline-item__status { color: #16835b; background: rgba(22,131,91,.1); }
.training-timeline-item.is-attention .training-timeline-item__status { color: #bd3d5c; background: rgba(189,61,92,.1); }
.training-timeline-item.is-overdue .training-timeline-item__status { color: #98600e; background: rgba(218,151,43,.13); }
.training-timeline-item.is-cancelled .training-timeline-item__status { color: var(--hg-muted); background: var(--hg-surface-2); }
.training-journey-empty { display: grid; min-height: 150px; align-content: center; justify-items: center; gap: 5px; color: var(--hg-muted); text-align: center; }
.training-journey-empty > i { color: var(--hg-primary); font-size: 24px; }
.training-journey-empty > strong { color: var(--hg-ink); font-size: 14px; }
.training-journey-empty > span { font-size: 12px; }
.training-journey-remove { display: flex; gap: 9px; align-items: end; justify-content: flex-end; margin-top: 14px; }
.training-journey-remove label { width: min(100%, 420px); }
.training-journey-remove label > span { display: block; margin-bottom: 5px; color: var(--hg-muted); font-size: 11px; font-weight: 750; }
.training-journey-remove .btn { display: inline-flex; gap: 6px; align-items: center; border-radius: 10px; }
.training-journey-restore { display: flex; gap: 14px; align-items: center; justify-content: space-between; margin-top: 14px; padding: 12px 13px; border: 1px solid rgba(91,76,240,.22); border-radius: 13px; background: var(--hg-primary-soft); }
.training-journey-restore p { margin: 0; color: var(--hg-ink); font-size: 12px; }
.training-journey-restore .btn { white-space: nowrap; }
@media (max-width: 991.98px) {
    .training-portal-participant-summary { grid-template-columns: minmax(0, 1fr) minmax(160px, .7fr) 40px; }
    .training-overall-chip { grid-column: 2; grid-row: 2; }
    .training-mentor-chip { grid-column: 1; grid-row: 2; max-width: 280px; }
    .training-progress-toggle { grid-column: 3; grid-row: 1; }
    .training-learner-card__person { grid-column: 1 / 3; }
    .training-attendance-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .training-portal-enrollment-list .accordion-body { padding: 12px; }
    .training-portal-participant-summary { grid-template-columns: minmax(0, 1fr) 40px; gap: 9px; }
    .training-learner-card__person { grid-column: 1; }
    .training-progress-toggle { grid-column: 2; grid-row: 1; }
    .training-mentor-chip { grid-column: 1 / -1; grid-row: 2; max-width: none; }
    .training-overall-chip { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; padding: 5px 2px 1px; }
    .training-journey-hero { grid-template-columns: 1fr auto; padding: 17px; }
    .training-next-step { grid-template-columns: 40px minmax(0, 1fr); }
    .training-next-step__icon { width: 40px; height: 40px; }
    .training-next-step em { grid-column: 2; width: max-content; }
    .training-journey-grid { grid-template-columns: 1fr; }
    .training-journey-timeline-section > header { align-items: flex-start; flex-direction: column; }
    .training-timeline-item { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
    .training-timeline-item__status { grid-column: 2; width: max-content; max-width: 100%; }
    .training-journey-remove, .training-journey-restore { align-items: stretch; flex-direction: column; }
    .training-journey-remove label, .training-journey-remove .btn, .training-journey-restore .btn { width: 100%; }
    .training-archive-state { grid-template-columns: 42px minmax(0, 1fr); }
    .training-archive-state p { grid-column: 1 / -1; }
    .training-attendance-editor > header { align-items: flex-start; padding: 15px; }
    .training-attendance-stages { padding: 12px; }
    .training-attendance-grid label { grid-template-columns: 1fr; }
}
.section-page-content { min-height: 420px; padding: 34px 0 68px; background: color-mix(in srgb, var(--hg-surface-2) 52%, var(--hg-surface)); }
.section-back-link { display: inline-flex; gap: 7px; align-items: center; color: rgba(255,255,255,.72); font-size: 12px; font-weight: 750; }
.section-back-link:hover { color: #fff; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; color: rgba(255,255,255,.74); font-size: 12px; font-weight: 650; }
.detail-meta span { display: inline-flex; gap: 7px; align-items: center; }
.detail-card { max-width: 920px; padding: clamp(24px, 5vw, 48px); border: 1px solid var(--hg-border); border-radius: 24px; background: var(--hg-surface); box-shadow: var(--hg-shadow-sm); }
.detail-lead { padding-bottom: 22px; border-bottom: 1px solid var(--hg-border); color: var(--hg-ink); font-size: 19px; font-weight: 600; line-height: 1.65; }
.detail-richtext { color: var(--hg-ink); line-height: 1.75; }
.detail-richtext + .btn { margin-top: 24px; }
.event-hero { padding-bottom: 42px; }
.event-format-badge { display: table; margin-top: 24px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: rgba(255,255,255,.84); background: rgba(255,255,255,.1); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.event-hero h1 { margin-top: 14px; }
.event-page { padding: 36px 0 68px; background: color-mix(in srgb, var(--hg-surface-2) 52%, var(--hg-surface)); }
.event-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.event-main-card, .event-side-card, .event-leader-panel { border: 1px solid var(--hg-border); background: var(--hg-surface); box-shadow: var(--hg-shadow-sm); }
.event-main-card { min-height: 300px; padding: clamp(25px, 4vw, 42px); border-radius: 24px; }
.event-card-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--hg-border); }
.event-card-heading > span { color: var(--hg-muted); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.event-card-heading em { padding: 5px 8px; border-radius: 8px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 10px; font-style: normal; font-weight: 800; }
.event-side-card { position: sticky; top: 96px; padding: 22px; border-radius: 22px; }
.event-date-tile { display: inline-grid; width: 72px; height: 72px; place-content: center; border-radius: 18px; color: #fff; background: linear-gradient(145deg, #4f3fd2, #7768f5); text-align: center; }
.event-date-tile strong { display: block; font-size: 27px; line-height: 1; }
.event-date-tile span { margin-top: 4px; color: rgba(255,255,255,.78); font-size: 10px; font-weight: 750; }
.event-side-copy { display: inline-flex; margin-left: 13px; vertical-align: middle; flex-direction: column; }
.event-side-copy strong { color: var(--hg-ink); font-size: 24px; }
.event-side-copy span { color: var(--hg-muted); font-size: 11px; }
.event-capacity-line { display: flex; align-items: center; justify-content: space-between; margin: 22px 0; padding: 15px 0; border-top: 1px solid var(--hg-border); border-bottom: 1px solid var(--hg-border); color: var(--hg-muted); font-size: 12px; }
.event-capacity-line span { display: inline-flex; gap: 7px; align-items: center; }
.event-capacity-line strong { color: var(--hg-ink); }
.event-participation-stats { display: grid; gap: 0; margin: 22px 0; border-top: 1px solid var(--hg-border); border-bottom: 1px solid var(--hg-border); }
.event-participation-stats > div { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; color: var(--hg-muted); font-size: 11px; }
.event-participation-stats > div + div { border-top: 1px solid var(--hg-border); }
.event-participation-stats span { display: inline-flex; gap: 7px; align-items: center; }
.event-participation-stats strong { color: var(--hg-ink); font-size: 13px; }
.event-attended { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; padding: 11px 12px; border-radius: 12px; color: #16835b; background: rgba(22,131,91,.1); font-size: 11px; font-weight: 750; }
.event-team { margin-top: 34px; padding-top: 25px; border-top: 1px solid var(--hg-border); }
.event-team h2 { margin-bottom: 15px; color: var(--hg-ink); font-size: 17px; }
.event-team-list { display: flex; flex-wrap: wrap; gap: 10px; }
.event-team-member { display: flex; min-width: 210px; gap: 10px; align-items: center; padding: 10px 13px; border: 1px solid var(--hg-border); border-radius: 14px; color: inherit; background: color-mix(in srgb, var(--hg-surface-2) 60%, var(--hg-surface)); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.event-team-member:hover { border-color: color-mix(in srgb, var(--hg-primary) 42%, var(--hg-border)); color: inherit; box-shadow: var(--hg-shadow-sm); transform: translateY(-1px); }
.event-team-avatar { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 12px; color: var(--hg-primary); background: var(--hg-primary-soft); object-fit: cover; font-size: 12px; font-weight: 850; }
.event-team-avatar--emoji { font-size: 20px; }
.event-team-person { min-width: 0; }
.event-team-member strong, .event-team-member small { display: block; }
.event-team-member strong { color: var(--hg-ink); font-size: 11px; }
.event-team-member small { margin-top: 2px; color: var(--hg-muted); font-size: 9px; }
.event-team-name-emoji { display: inline; margin-left: 3px; font-size: 12px; }
.event-team-arrow { margin-left: auto; color: var(--hg-muted); font-size: 11px; }
.event-present { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--hg-border); }
.event-present-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.event-present-heading h2 { margin: 0; color: var(--hg-ink); font-size: 17px; }
.event-present-heading > span { display: inline-flex; gap: 5px; align-items: center; padding: 5px 8px; border-radius: 999px; color: #16835b; background: rgba(22,131,91,.1); font-size: 9px; font-weight: 800; }
.event-present-heading > span i { font-size: 6px; }
.event-present-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.event-present-person { display: flex; min-width: 0; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--hg-border); border-radius: 14px; color: inherit; background: var(--hg-surface-2); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.event-present-person:hover { border-color: rgba(22,131,91,.35); color: inherit; box-shadow: var(--hg-shadow-sm); transform: translateY(-1px); }
.event-present-avatar-wrap { position: relative; flex: 0 0 auto; }
.event-present-avatar { display: grid; width: 42px; height: 42px; border-radius: 13px; background: var(--hg-primary-soft); object-fit: cover; place-items: center; }
.event-present-avatar--emoji { font-size: 22px; }
.event-present-avatar-wrap > i { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border: 2px solid var(--hg-surface-2); border-radius: 50%; background: #24c58a; box-shadow: 0 0 0 2px rgba(36,197,138,.12); }
.event-present-person > span:nth-child(2) { min-width: 0; }
.event-present-person strong, .event-present-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-present-person strong { color: var(--hg-ink); font-size: 11px; }
.event-present-person small { margin-top: 2px; color: var(--hg-muted); font-size: 8px; }
.event-present-person > i { margin-left: auto; color: #16835b; font-size: 11px; }
.event-admin-actions { display: grid; gap: 8px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hg-border); }
.event-admin-actions .btn { justify-content: flex-start; width: 100%; }
.event-admin-qr { width: 100%; }
.event-admin-qr > summary { cursor: pointer; list-style: none; }
.event-admin-qr > summary::-webkit-details-marker { display: none; }
.event-admin-qr[open] > summary { border-color: color-mix(in srgb, var(--hg-primary) 45%, var(--hg-border)); color: var(--hg-primary); background: var(--hg-primary-soft); }
.event-admin-qr-panel { margin-top: 8px; padding: 8px; border: 1px solid var(--hg-border); border-radius: 16px; background: var(--hg-surface-2); }
.event-admin-qr-panel .event-qr-display { width: 100%; padding: 10px; border-radius: 12px; }
.event-admin-qr-panel .event-qr-display svg { width: min(100%, 230px); }
.btn-event-danger { border: 1px solid rgba(211,66,81,.24); color: #b52f40; background: rgba(211,66,81,.08); }
.btn-event-danger:hover { border-color: rgba(211,66,81,.42); color: #982535; background: rgba(211,66,81,.13); }
.event-live-actions-card { margin-top: 20px; padding: 20px 22px; border: 1px solid color-mix(in srgb, var(--hg-primary) 28%, var(--hg-border)); border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--hg-primary-soft) 55%, var(--hg-surface)), var(--hg-surface)); box-shadow: var(--hg-shadow-sm); }
.event-live-actions-card h2 { display: flex; gap: 8px; align-items: center; margin: 0 0 13px; color: var(--hg-ink); font-size: 13px; }
.event-live-actions-card h2 i { color: var(--hg-primary); }
.event-live-actions-row { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 14px; align-items: center; }
.event-live-message-control { display: flex; min-width: 0; gap: 8px; }
.event-live-message-blocked { display: flex; min-height: 54px; gap: 11px; align-items: center; padding: 9px 13px; border: 1px solid color-mix(in srgb, var(--hg-primary) 38%, var(--hg-border)); border-radius: 15px; color: var(--hg-ink); background: linear-gradient(135deg, color-mix(in srgb, var(--hg-primary-soft) 88%, var(--hg-surface)), var(--hg-surface)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); }
.event-live-message-blocked > span { display: grid; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; background: var(--hg-surface); font-size: 22px; place-items: center; animation: event-muted-wiggle 3.4s ease-in-out infinite; }
.event-live-message-blocked strong, .event-live-message-blocked small { display: block; }
.event-live-message-blocked strong { font-size: 11px; }
.event-live-message-blocked small { margin-top: 2px; color: var(--hg-muted); font-size: 9px; }
.event-live-reaction-buttons { display: flex; gap: 7px; }
.event-live-reaction-buttons button { display: grid; width: 42px; height: 42px; border: 1px solid var(--hg-border); border-radius: 13px; background: var(--hg-surface-2); font-size: 20px; place-items: center; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.event-live-reaction-buttons button:hover { border-color: color-mix(in srgb, var(--hg-primary) 45%, var(--hg-border)); background: var(--hg-primary-soft); transform: translateY(-2px) scale(1.06); }

/* Event LED / live screen */
.event-live-body { min-height: 100vh; overflow-x: hidden; color: #f5f5ff; background: #10121f; }
.event-live-body::before, .event-live-body::after { position: fixed; z-index: -1; width: 52vw; height: 52vw; border-radius: 50%; content: ''; filter: blur(80px); opacity: .2; pointer-events: none; }
.event-live-body::before { top: -22vw; left: -14vw; background: #7457ff; animation: event-live-orbit 14s ease-in-out infinite alternate; }
.event-live-body::after { right: -18vw; bottom: -25vw; background: #1dd3b0; animation: event-live-orbit 18s ease-in-out infinite alternate-reverse; }
.event-live-shell { min-height: 100vh; padding: clamp(70px, 7vw, 110px) clamp(26px, 6vw, 100px) 50px; }
.event-live-brand { position: fixed; z-index: 10; top: 24px; left: 28px; color: rgba(255,255,255,.5); font-size: 12px; font-weight: 950; letter-spacing: .18em; }
.event-live-back { position: fixed; z-index: 10; top: 22px; left: 26px; display: inline-flex; gap: 8px; align-items: center; padding: 9px 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: rgba(255,255,255,.72); background: rgba(16,18,31,.66); backdrop-filter: blur(14px); font-size: 11px; font-weight: 750; }
.event-live-back:hover { color: #fff; border-color: rgba(255,255,255,.25); }
.event-live-header { display: flex; gap: 40px; align-items: end; justify-content: space-between; margin-bottom: clamp(40px, 6vh, 76px); }
.event-live-heading { display: flex; min-width: 0; gap: clamp(16px, 2vw, 30px); align-items: center; }
.event-live-heading > div { min-width: 0; }
.event-live-community-logo { display: grid; width: clamp(72px, 7vw, 118px); height: clamp(72px, 7vw, 118px); flex: 0 0 auto; border: 1px solid rgba(255,255,255,.16); border-radius: 29%; background: rgba(255,255,255,.08); object-fit: cover; place-items: center; box-shadow: 0 20px 60px rgba(0,0,0,.28); }
.event-live-community-logo--fallback { color: #fff; background: linear-gradient(145deg, #7457ff, #302b5c); font-size: clamp(30px, 4vw, 58px); font-weight: 900; }
.event-live-kicker { display: inline-flex; gap: 8px; align-items: center; color: #9b8cff; font-size: clamp(10px, 1vw, 14px); font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.event-live-kicker i { color: #39dbb9; animation: event-live-blink 1.8s ease-in-out infinite; }
.event-live-header h1 { max-width: 980px; margin: 12px 0 6px; color: #fff; font-size: clamp(38px, 5.2vw, 86px); line-height: .98; letter-spacing: -.045em; }
.event-live-header p { margin: 0; color: rgba(255,255,255,.52); font-size: clamp(11px, 1.15vw, 18px); }
.event-live-totals { display: flex; flex: 0 0 auto; gap: 10px; }
.event-live-totals > div { display: grid; min-width: 120px; padding: 18px 22px; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: rgba(255,255,255,.055); backdrop-filter: blur(16px); }
.event-live-totals strong { color: #fff; font-size: clamp(28px, 3vw, 48px); line-height: 1; }
.event-live-totals span { margin-top: 6px; color: rgba(255,255,255,.5); font-size: 10px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.event-live-totals .is-live { border-color: rgba(57,219,185,.24); background: rgba(57,219,185,.09); }
.event-live-totals .is-live strong { color: #55e5c7; }
.event-live-status-stack { display: grid; flex: 0 0 auto; gap: 10px; }
.event-live-start-countdown { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 12px 17px; border: 1px solid rgba(155,140,255,.3); border-radius: 18px; background: rgba(116,87,255,.13); backdrop-filter: blur(16px); }
.event-live-start-countdown span { color: rgba(255,255,255,.58); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.event-live-start-countdown strong { color: #fff; font-variant-numeric: tabular-nums; font-size: clamp(22px, 2.5vw, 38px); line-height: 1; }
.event-live-grid { display: grid; grid-template-columns: repeat(var(--live-columns, 6), minmax(0, 1fr)); gap: clamp(26px, 4vw, 62px) clamp(18px, 3vw, 44px); align-items: end; transition: gap .35s ease; }
.event-live-person { position: relative; display: grid; min-width: 0; place-items: center; text-align: center; animation: event-live-enter .7s cubic-bezier(.2,.8,.2,1) both, event-live-float 4.6s ease-in-out var(--person-delay) infinite; }
.event-live-bubble { position: relative; z-index: 3; max-width: 260px; margin-bottom: 20px; padding: 13px 17px; border: 1px solid rgba(255,255,255,.18); border-radius: 22px 22px 22px 6px; color: #22233b; background: #fff; box-shadow: 0 16px 50px rgba(0,0,0,.3); font-size: clamp(11px, 1vw, 15px); font-weight: 720; line-height: 1.35; overflow-wrap: anywhere; animation: event-live-bubble 3.6s ease-in-out var(--person-delay) infinite; }
.event-live-bubble::after { position: absolute; bottom: -9px; left: 22px; width: 18px; height: 18px; background: #fff; content: ''; transform: rotate(45deg); }
.event-live-avatar-wrap { position: relative; width: clamp(112px, 10vw, 180px); height: clamp(112px, 10vw, 180px); }
.event-live-avatar { position: relative; z-index: 2; display: grid; width: 100%; height: 100%; border: 4px solid rgba(255,255,255,.14); border-radius: 34%; background: linear-gradient(145deg, #302b5c, #181a2d); object-fit: cover; place-items: center; box-shadow: 0 25px 70px rgba(0,0,0,.34); }
.event-live-avatar--emoji { font-size: clamp(48px, 5vw, 84px); }
.event-live-pulse { position: absolute; inset: -8px; border: 1px solid rgba(116,87,255,.55); border-radius: 37%; animation: event-live-pulse 2.7s ease-out var(--person-delay) infinite; }
.event-live-check { position: absolute; z-index: 4; right: -4px; bottom: -4px; display: grid; width: clamp(31px, 2.6vw, 43px); height: clamp(31px, 2.6vw, 43px); border: 4px solid #10121f; border-radius: 50%; color: #10121f; background: #55e5c7; place-items: center; font-size: 18px; font-weight: 900; }
.event-live-person--muted .event-live-avatar { filter: saturate(.55) brightness(.76); }
.event-live-muted-badge { position: absolute; z-index: 5; bottom: 10px; left: 50%; display: inline-flex; gap: 6px; align-items: center; padding: 7px 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #fff; background: rgba(18,19,34,.88); box-shadow: 0 10px 30px rgba(0,0,0,.38); backdrop-filter: blur(12px); transform: translateX(-50%); white-space: nowrap; }
.event-live-muted-badge b { font-size: 16px; line-height: 1; }
.event-live-muted-badge strong { font-size: 8px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.event-live-person h2 { margin: 17px 0 3px; color: #fff; font-size: clamp(15px, 1.45vw, 23px); line-height: 1.1; }
.event-live-person h2 span { font-size: .75em; }
.event-live-person time { color: rgba(255,255,255,.42); font-size: clamp(9px, .8vw, 12px); font-weight: 700; letter-spacing: .04em; }
.event-live-grid--comfort { gap: clamp(18px, 2.2vh, 34px) clamp(12px, 1.8vw, 26px); }
.event-live-grid--comfort .event-live-avatar-wrap { width: clamp(104px, 12vh, 145px); height: clamp(104px, 12vh, 145px); }
.event-live-grid--comfort .event-live-person h2 { margin-top: 10px; font-size: clamp(12px, 1vw, 17px); }
.event-live-grid--comfort .event-live-person time { font-size: 9px; }
.event-live-grid--comfort .event-live-bubble { max-width: 190px; margin-bottom: 11px; padding: 9px 12px; font-size: 10px; }
.event-live-grid--compact { gap: clamp(20px, 2.4vw, 36px) clamp(12px, 1.8vw, 26px); }
.event-live-grid--compact .event-live-avatar-wrap { width: clamp(78px, 7vw, 118px); height: clamp(78px, 7vw, 118px); }
.event-live-grid--compact .event-live-person h2 { margin-top: 11px; font-size: clamp(12px, 1vw, 17px); }
.event-live-grid--compact .event-live-bubble { max-width: 170px; margin-bottom: 12px; padding: 9px 12px; font-size: 10px; }
.event-live-grid--wall { gap: clamp(13px, 1.5vw, 22px) clamp(8px, 1vw, 15px); }
.event-live-grid--wall .event-live-avatar-wrap { width: clamp(54px, 4.5vw, 82px); height: clamp(54px, 4.5vw, 82px); }
.event-live-grid--wall .event-live-avatar { border-width: 2px; border-radius: 27%; }
.event-live-grid--wall .event-live-pulse { inset: -4px; }
.event-live-grid--wall .event-live-check { right: -3px; bottom: -3px; width: 23px; height: 23px; border-width: 3px; font-size: 10px; }
.event-live-grid--wall .event-live-muted-badge { bottom: 4px; padding: 4px; }
.event-live-grid--wall .event-live-muted-badge b { font-size: 12px; }
.event-live-grid--wall .event-live-muted-badge strong { display: none; }
.event-live-grid--wall .event-live-person h2 { overflow: hidden; width: 100%; margin: 8px 0 0; font-size: clamp(9px, .72vw, 12px); text-overflow: ellipsis; white-space: nowrap; }
.event-live-grid--wall .event-live-person time, .event-live-grid--wall .event-live-bubble { display: none; }
.event-live-empty { display: grid; min-height: 48vh; place-items: center; align-content: center; text-align: center; }
.event-live-empty > span { display: grid; width: 96px; height: 96px; border: 1px solid rgba(155,140,255,.3); border-radius: 30px; color: #9b8cff; background: rgba(116,87,255,.1); place-items: center; font-size: 38px; animation: event-live-float 4s ease-in-out infinite; }
.event-live-empty h2 { margin: 24px 0 6px; color: #fff; font-size: clamp(28px, 4vw, 56px); }
.event-live-empty p { color: rgba(255,255,255,.48); }
.event-live-lifecycle { display: grid; min-height: 53vh; place-items: center; align-content: center; text-align: center; }
.event-live-lifecycle-icon { display: grid; width: 92px; height: 92px; margin-bottom: 24px; border: 1px solid rgba(155,140,255,.28); border-radius: 30px; color: #9b8cff; background: rgba(116,87,255,.11); font-size: 36px; place-items: center; animation: event-live-float 4s ease-in-out infinite; }
.event-live-lifecycle-label { margin-bottom: 12px; color: rgba(255,255,255,.5); font-size: clamp(10px, 1vw, 14px); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.event-live-lifecycle strong { max-width: 1100px; color: #fff; font-size: clamp(42px, 7vw, 110px); line-height: .98; letter-spacing: -.05em; }
.event-live-lifecycle p { margin: 18px 0 0; color: rgba(255,255,255,.5); font-size: clamp(12px, 1.2vw, 18px); }
.event-live-lifecycle--finale strong { background: linear-gradient(100deg, #fff, #a99cff 42%, #55e5c7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.event-live-finale-emojis { display: flex; gap: 20px; margin-bottom: 24px; font-size: clamp(36px, 5vw, 72px); }
.event-live-finale-emojis span { animation: event-live-finale-pop 2.5s ease-in-out infinite; }
.event-live-finale-emojis span:nth-child(2) { animation-delay: -.8s; }
.event-live-finale-emojis span:nth-child(3) { animation-delay: -1.6s; }
.event-live-spotlight { position: fixed; z-index: 40; inset: 0; display: grid; padding: 5vw; background: rgba(7,8,18,.78); opacity: 0; place-items: center; backdrop-filter: blur(20px); transition: opacity .42s ease; pointer-events: none; }
.event-live-spotlight.is-visible { opacity: 1; }
.event-live-spotlight-card { position: relative; display: grid; width: min(90vw, 820px); min-height: min(78vh, 760px); padding: clamp(32px, 5vw, 72px); overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: clamp(32px, 5vw, 70px); background: radial-gradient(circle at 25% 15%, rgba(116,87,255,.42), transparent 48%), radial-gradient(circle at 80% 85%, rgba(57,219,185,.25), transparent 45%), #171929; box-shadow: 0 50px 140px rgba(0,0,0,.6); place-items: center; align-content: center; text-align: center; transform: scale(.88) translateY(32px); transition: transform .55s cubic-bezier(.2,.85,.2,1); }
.event-live-spotlight.is-visible .event-live-spotlight-card { transform: scale(1) translateY(0); }
.event-live-spotlight-message { position: relative; max-width: 650px; margin-bottom: 28px; padding: 17px 24px; border-radius: 28px 28px 28px 8px; color: #202139; background: #fff; font-size: clamp(18px, 2vw, 31px); font-weight: 800; line-height: 1.25; box-shadow: 0 18px 55px rgba(0,0,0,.28); }
.event-live-spotlight-avatar-slot { width: clamp(170px, 22vw, 310px); height: clamp(170px, 22vw, 310px); }
.event-live-spotlight-avatar { display: grid; width: 100%; height: 100%; border: 6px solid rgba(255,255,255,.18); border-radius: 34%; background: linear-gradient(145deg, #342e67, #1a1c32); object-fit: cover; place-items: center; box-shadow: 0 30px 90px rgba(0,0,0,.5); }
.event-live-spotlight-avatar--emoji { font-size: clamp(80px, 11vw, 150px); }
.event-live-spotlight-card h2 { margin: 22px 0 5px; color: #fff; font-size: clamp(26px, 4vw, 56px); }
.event-live-spotlight-card > span { color: #55e5c7; font-size: clamp(10px, 1vw, 14px); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.event-live-local-hype { position: absolute; z-index: 7; top: 50%; left: 50%; font-size: clamp(22px, 2.2vw, 38px); opacity: 0; animation: event-live-hype 1.55s cubic-bezier(.16,.8,.25,1) var(--hype-delay) both; pointer-events: none; }
.event-live-person--hyped .event-live-avatar { animation: event-live-avatar-hype 1.5s cubic-bezier(.2,.85,.2,1); }
@keyframes event-live-enter { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes event-live-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes event-live-bubble { 0%, 100% { transform: rotate(-1deg) translateY(0); } 50% { transform: rotate(1deg) translateY(-5px); } }
@keyframes event-live-pulse { 0% { opacity: .8; transform: scale(.96); } 75%, 100% { opacity: 0; transform: scale(1.18); } }
@keyframes event-live-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes event-live-orbit { from { transform: translate3d(0,0,0); } to { transform: translate3d(8vw,5vw,0); } }
@keyframes event-live-finale-pop { 0%, 100% { transform: translateY(0) rotate(-4deg) scale(.94); } 50% { transform: translateY(-12px) rotate(5deg) scale(1.08); } }
@keyframes event-live-hype { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.25) rotate(0); } 22% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--hype-x)), calc(-50% + var(--hype-y))) scale(1.15) rotate(var(--hype-rotate)); } }
@keyframes event-live-avatar-hype { 0%, 100% { transform: scale(1) rotate(0); } 22% { transform: scale(1.16) rotate(-5deg); } 48% { transform: scale(1.08) rotate(5deg); } 72% { transform: scale(1.13) rotate(-2deg); } }
.event-checkin-result { display: flex; gap: 13px; align-items: center; margin-bottom: 18px; padding: 15px 18px; border-radius: 16px; font-size: 12px; }
.event-checkin-result > i { font-size: 22px; }
.event-checkin-result strong, .event-checkin-result span { display: block; }
.event-checkin-result span { margin-top: 2px; opacity: .78; }
.event-checkin-result.is-success { color: #116943; background: rgba(22,131,91,.12); }
.event-checkin-result.is-error { color: #a02f3c; background: rgba(211,66,81,.11); }
.event-leader-panel { margin-top: 20px; border-radius: 20px; }
.event-leader-panel > summary { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; color: var(--hg-ink); cursor: pointer; list-style: none; }
.event-leader-panel > summary::-webkit-details-marker { display: none; }
.event-leader-panel > summary > span { display: inline-flex; gap: 9px; align-items: center; }
.event-leader-panel > summary > span i { color: var(--hg-primary); }
.event-leader-panel[open] > summary { border-bottom: 1px solid var(--hg-border); }
.event-leader-panel[open] > summary > i { transform: rotate(180deg); }
.event-leader-body { padding: 22px; }
.event-qr-display { display: grid; max-width: 360px; padding: 18px; border-radius: 20px; background: #fff; place-items: center; }
.event-qr-display svg { display: block; width: min(100%, 320px); height: auto; }
.event-qr-display span { margin-top: 9px; color: #4d5268; font-size: 10px; font-weight: 700; }
.event-leader-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hg-border); }
.event-leader-body > .event-leader-secondary:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.event-leader-secondary > details { padding: 12px 14px; border: 1px solid var(--hg-border); border-radius: 13px; }
.event-leader-secondary > details > summary { color: var(--hg-ink); cursor: pointer; font-size: 11px; font-weight: 750; }
.event-leader-secondary form { display: flex; gap: 8px; margin-top: 12px; }
.event-leader-secondary form .form-select { min-width: 0; }
.event-live-moderation-card { scroll-margin-top: 96px; margin-top: 20px; padding: 18px 20px; border: 1px solid rgba(211,66,81,.2); border-radius: 20px; background: linear-gradient(135deg, rgba(211,66,81,.07), var(--hg-surface) 50%); box-shadow: var(--hg-shadow-sm); }
.event-live-moderation-head { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.event-live-moderation-head > div > span { color: #c44252; font-size: 9px; font-weight: 850; letter-spacing: .11em; }
.event-live-moderation-head > div > span i { margin-right: 4px; }
.event-live-moderation-head h2 { margin: 2px 0 0; color: var(--hg-ink); font-size: 16px; }
.event-live-moderation-head form { margin: 0; }
.event-live-moderation-list { display: grid; gap: 7px; margin-top: 12px; }
.event-live-moderation-card .event-live-moderation-list { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.event-live-moderation-person { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 8px; border-radius: 13px; background: var(--hg-surface-2); }
.event-live-moderation-person > a { display: flex; min-width: 0; flex: 1; gap: 9px; align-items: center; color: inherit; }
.event-live-moderation-person > a > img, .event-live-moderation-person > a > span:not(.member-identity) { display: grid; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; background: var(--hg-primary-soft); object-fit: cover; place-items: center; font-size: 18px; }
.event-live-moderation-person strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.event-live-moderation-person .btn { flex: 0 0 auto; padding: 8px 11px; font-size: 9px; }
.event-live-moderation-empty { margin: 12px 0 0; color: var(--hg-muted); font-size: 10px; }
@keyframes event-muted-wiggle { 0%, 82%, 100% { transform: rotate(0) scale(1); } 88% { transform: rotate(-8deg) scale(1.07); } 94% { transform: rotate(7deg) scale(1.07); } }
.event-manage-actions { display: flex; grid-column: 1 / -1; gap: 8px; align-items: center; padding-top: 8px; }
.section-heading-spaced { margin-top: 38px; }
.calendar-card { overflow: hidden; border: 1px solid var(--hg-border); border-radius: 24px; background: var(--hg-surface); box-shadow: var(--hg-shadow-sm); }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--hg-border); }
.calendar-toolbar h2 { margin: 0; color: var(--hg-ink); font-size: 23px; }
.calendar-toolbar .btn { display: grid; width: 40px; height: 40px; padding: 0; place-items: center; border-radius: 12px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays { color: var(--hg-muted); background: color-mix(in srgb, var(--hg-surface-2) 70%, var(--hg-surface)); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-align: center; text-transform: uppercase; }
.calendar-weekdays span { padding: 10px; }
.calendar-week { border-top: 1px solid var(--hg-border); }
.calendar-day { min-width: 0; min-height: 112px; padding: 9px; border-right: 1px solid var(--hg-border); }
.calendar-day:last-child { border-right: 0; }
.calendar-day.is-muted { opacity: .42; background: color-mix(in srgb, var(--hg-surface-2) 55%, transparent); }
.calendar-date { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; color: var(--hg-muted); font-size: 11px; font-weight: 800; }
.calendar-day.is-today .calendar-date { color: #fff; background: var(--hg-primary); }
.calendar-day-events { display: grid; gap: 4px; margin-top: 5px; }
.calendar-day-events a { overflow: hidden; padding: 5px 7px; border-radius: 7px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.calendar-day-events time { opacity: .7; }
.calendar-day-events a.is-current { color: #fff; background: #16835b; box-shadow: 0 4px 12px rgba(22,131,91,.2); }
.calendar-event-live { display: inline-flex; margin-left: 4px; padding: 1px 4px; border-radius: 999px; background: rgba(255,255,255,.2); font-size: 7px; letter-spacing: .03em; text-transform: uppercase; }
.content-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.content-card { position: relative; display: flex; gap: 17px; min-height: 180px; padding: 23px; border: 1px solid var(--hg-border); border-radius: 20px; color: inherit; background: var(--hg-surface); box-shadow: 0 6px 22px rgba(26,32,56,.045); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.content-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--hg-primary) 28%, var(--hg-border)); box-shadow: var(--hg-shadow-sm); }
.content-card.is-current { border-color: rgba(22,131,91,.34); background: linear-gradient(135deg, rgba(22,131,91,.07), var(--hg-surface) 55%); box-shadow: 0 10px 28px rgba(22,131,91,.1); }
.content-card.is-current .content-card-icon { color: #16835b; background: rgba(22,131,91,.12); }
.content-card-icon { display: grid; width: 49px; height: 49px; flex: 0 0 49px; place-items: center; border-radius: 15px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 21px; }
.content-card-training:nth-child(3n + 2) .content-card-icon { color: #16835b; background: rgba(22,131,91,.1); }
.content-card-training:nth-child(3n + 3) .content-card-icon { color: #b47318; background: rgba(234,159,47,.13); }
.content-card-body { min-width: 0; }
.content-card-body time { display: inline-flex; gap: 5px; align-items: center; color: var(--hg-primary); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.content-card-live { display: inline-flex; gap: 5px; align-items: center; margin-left: 5px; padding: 3px 7px; border-radius: 999px; color: #fff; background: #16835b; font-size: 8px; }
.content-card-live i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 rgba(255,255,255,.65); animation: calendar-live-pulse 1.7s infinite; }
@keyframes calendar-live-pulse { 70% { box-shadow: 0 0 0 5px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.content-card-body h3 { margin: 7px 0 8px; color: var(--hg-ink); font-size: 20px; }
.content-card-body p { margin: 0 0 12px; color: var(--hg-muted); font-size: 12px; line-height: 1.55; }
.content-card-body > span { display: inline-flex; gap: 6px; align-items: center; color: var(--hg-primary); font-size: 11px; font-weight: 750; }
.content-card-arrow { margin-left: auto; color: var(--hg-muted); }
.empty-section { grid-column: 1 / -1; padding: 58px 24px; border: 1px dashed var(--hg-border); border-radius: 22px; color: var(--hg-muted); background: var(--hg-surface); text-align: center; }
.empty-section > i { font-size: 34px; }
.empty-section h3 { margin: 10px 0 5px; color: var(--hg-ink); font-size: 20px; }
.empty-section p { margin: 0; }
.section-pagination { display: flex; justify-content: center; margin-top: 28px; }
.directory-search { max-width: 620px; margin-bottom: 24px; }
.directory-search .input-group-text { color: var(--hg-muted); background: var(--hg-surface); border-color: var(--hg-border); }
.profile-directory-heading { display: flex; gap: 20px; align-items: end; justify-content: space-between; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--hg-border); }
.profile-directory-heading div { display: flex; flex-direction: column; }
.profile-directory-heading span { color: var(--hg-primary); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.profile-directory-heading h2 { margin: 3px 0 0; color: var(--hg-ink); font-size: 26px; }
.profile-directory-heading > strong { color: var(--hg-muted); font-size: 12px; }
.profile-directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.profile-directory-card { display: flex; gap: 16px; min-height: 110px; padding: 20px; border: 1px solid var(--hg-border); border-radius: 20px; color: inherit; background: var(--hg-surface); box-shadow: 0 6px 22px rgba(26,32,56,.04); transition: transform .2s ease, box-shadow .2s ease; }
.profile-directory-card:hover { transform: translateY(-3px); box-shadow: var(--hg-shadow-sm); }
.profile-directory-card img { width: 68px; height: 68px; flex: 0 0 68px; border-radius: 20px; object-fit: cover; }
.profile-directory-card div { min-width: 0; }
.profile-directory-card h2 { overflow: hidden; margin: 3px 0 7px; color: var(--hg-ink); font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.profile-directory-card p { display: -webkit-box; overflow: hidden; margin: 0 0 11px; color: var(--hg-muted); font-size: 11px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.profile-directory-card span { color: var(--hg-primary); font-size: 10px; font-weight: 750; }

/* Public member profiles */
.member-profile-wallpaper--aurora { background: linear-gradient(130deg, #063c46, #295d75 48%, #7754b6); }
.member-profile-wallpaper--sunset { background: linear-gradient(130deg, #7c2e55, #d35b55 52%, #e9a445); }
.member-profile-wallpaper--midnight { background: linear-gradient(130deg, #0d1736, #252456 55%, #433179); }
.member-profile-wallpaper--cosmic { background: radial-gradient(circle at 78% 20%, rgba(170,96,255,.65), transparent 18%), radial-gradient(circle at 18% 82%, rgba(42,205,205,.34), transparent 22%), linear-gradient(130deg, #090c28, #2a1757 55%, #561b68); }
.member-profile-avatar--emoji { display: grid; place-items: center; background: rgba(255,255,255,.92); font-size: 66px; line-height: 1; }
.member-profile-name-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: baseline; }
.member-profile-name-row h1 { min-width: 0; }
.member-name-emoji { display: inline; flex: 0 0 auto; font-size: clamp(22px, 3vw, 30px); font-weight: 400; line-height: 1; }
.member-nickname--accent { text-decoration: underline; text-decoration-color: #ffd568; text-decoration-thickness: 4px; text-underline-offset: 7px; }
.member-nickname--gradient { color: transparent !important; background: linear-gradient(90deg, #5544d8, #c34686, #d98237); -webkit-background-clip: text; background-clip: text; }
.member-profile-title .member-nickname--gradient { background-image: linear-gradient(90deg, #fff, #ffe3a3, #d8d1ff); }
.member-nickname--neon { color: #f6fdff !important; text-shadow: 0 0 7px rgba(99,235,255,.9), 0 0 18px rgba(170,96,255,.75), 0 0 30px rgba(85,68,216,.65); }
.member-profile-bio { margin: 0; color: var(--hg-muted); font-size: 14px; line-height: 1.8; white-space: pre-line; }
.member-emoji-picker { margin: 0; padding: 0; border: 0; }
.member-emoji-picker legend { margin-bottom: 2px; }
.member-emoji-picker > p { margin: 0 0 12px; color: var(--hg-muted); font-size: 11px; }
.member-emoji-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 9px; }
.member-emoji-option { position: relative; margin: 0; cursor: pointer; }
.member-emoji-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.member-emoji-option span { display: grid; min-height: 58px; place-items: center; border: 2px solid transparent; border-radius: 15px; background: var(--hg-surface-2); box-shadow: inset 0 0 0 1px var(--hg-border); font-size: 27px; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.member-emoji-option:hover span { transform: translateY(-2px); background: var(--hg-primary-soft); }
.member-emoji-option input:checked + span { border-color: #f1a932; background: rgba(241,169,50,.12); box-shadow: 0 0 0 3px rgba(241,169,50,.14); }
.member-emoji-option input:focus-visible + span { outline: 3px solid rgba(91,76,240,.28); outline-offset: 2px; }
.member-moments-heading { margin-bottom: 10px; }
.member-moments-heading > strong { display: inline-flex; min-width: 54px; height: 32px; align-items: center; justify-content: center; padding: 0 11px; border-radius: 999px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 11px; font-weight: 850; }
.member-photo-uploader { margin-top: 18px; padding: 12px; border: 1px solid var(--hg-border); border-radius: 18px; background: color-mix(in srgb, var(--hg-surface-2) 74%, var(--hg-surface)); }
.member-photo-dropzone { display: flex; min-height: 112px; gap: 14px; align-items: center; padding: 18px; border: 2px dashed color-mix(in srgb, var(--hg-primary) 30%, var(--hg-border)); border-radius: 15px; background: var(--hg-surface); cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.member-photo-dropzone:hover,
.member-photo-dropzone.is-dragging { border-color: var(--hg-primary); background: var(--hg-primary-soft); transform: translateY(-1px); }
.member-photo-dropzone:focus-within { outline: 3px solid color-mix(in srgb, var(--hg-primary) 24%, transparent); outline-offset: 2px; }
.member-photo-dropzone__icon { display: grid; width: 54px; height: 54px; flex: 0 0 54px; place-items: center; border-radius: 17px; color: #fff; background: linear-gradient(145deg, var(--hg-primary), #8a70f4); box-shadow: 0 10px 24px color-mix(in srgb, var(--hg-primary) 28%, transparent); font-size: 23px; }
.member-photo-dropzone__copy { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.member-photo-dropzone__copy strong { color: var(--hg-ink); font-size: 14px; font-weight: 850; }
.member-photo-dropzone__copy small { margin-top: 4px; color: var(--hg-muted); font-size: 10px; }
.member-photo-dropzone__limit { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 9px; font-weight: 800; }
.member-photo-upload-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 11px; }
.member-photo-upload-preview__item { position: relative; min-width: 0; overflow: hidden; margin: 0; border-radius: 13px; aspect-ratio: 1; background: var(--hg-surface); }
.member-photo-upload-preview__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.member-photo-upload-preview__item figcaption { position: absolute; right: 0; bottom: 0; left: 0; overflow: hidden; padding: 18px 7px 6px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.74)); font-size: 8px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.member-photo-upload-preview__remove { position: absolute; z-index: 2; top: 6px; right: 6px; display: grid; width: 27px; height: 27px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(8,10,18,.68); box-shadow: 0 3px 10px rgba(0,0,0,.18); place-items: center; font-size: 10px; backdrop-filter: blur(6px); }
.member-photo-upload-preview__remove:hover { background: #d34251; }
.member-photo-upload-footer { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 11px 4px 1px; }
.member-photo-upload-footer > span { color: var(--hg-muted); font-size: 9px; line-height: 1.45; }
.member-photo-upload-footer .btn { display: inline-flex; min-width: 142px; gap: 6px; align-items: center; justify-content: center; border-radius: 11px; font-size: 10px; font-weight: 800; }
.member-photo-upload-notice { display: flex; gap: 12px; align-items: center; margin-top: 17px; padding: 15px; border-radius: 15px; color: var(--hg-muted); background: var(--hg-surface-2); }
.member-photo-upload-notice > i { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 12px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 17px; }
.member-photo-upload-notice > div { display: flex; flex-direction: column; }
.member-photo-upload-notice strong { color: var(--hg-ink); font-size: 11px; }
.member-photo-upload-notice span { margin-top: 2px; font-size: 9px; line-height: 1.45; }
.member-photo-upload-notice.is-blocked { color: #8c5a14; background: rgba(234,159,47,.12); }
.member-photo-upload-notice.is-blocked > i { color: #a56813; background: rgba(234,159,47,.16); }
.member-event-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.member-event-photos figure { position: relative; overflow: hidden; margin: 0; border-radius: 16px; aspect-ratio: 4 / 3; background: var(--hg-surface-2); }
.member-event-photos img { width: 100%; height: 100%; object-fit: cover; }
.member-event-photo-trigger { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.member-event-photo-trigger img { transition: transform .2s ease, filter .2s ease; }
.member-event-photo-trigger:hover img { transform: scale(1.035); filter: brightness(.92); }
.member-event-photo-trigger:focus-visible { outline: 3px solid var(--hg-primary); outline-offset: -3px; }
.member-event-photos .member-event-photo-action { position: absolute; z-index: 2; top: 8px; right: 8px; }
.member-moments-lightbox .modal-content { border: 0; background: rgba(5, 7, 15, .98); color: #fff; }
.member-moments-lightbox .modal-body { min-height: 0; padding: 0; }
.member-moments-lightbox__toolbar { position: absolute; z-index: 5; top: max(18px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); left: max(20px, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.member-moments-lightbox__toolbar > * { pointer-events: auto; }
.member-moments-lightbox__counter { padding: 7px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(0,0,0,.38); font-size: 12px; font-weight: 700; backdrop-filter: blur(8px); }
.member-moments-lightbox .btn-close { width: 20px; height: 20px; padding: 10px; border-radius: 50%; background-color: rgba(0,0,0,.38); background-size: 14px; opacity: .9; }
.member-moments-lightbox .carousel-item { text-align: center; }
.member-moments-lightbox__image { display: block; width: 100%; height: 100%; padding: 68px 76px 24px; object-fit: contain; }
.member-moments-lightbox .carousel-control-prev,
.member-moments-lightbox .carousel-control-next { width: min(12%, 96px); opacity: .78; }
.member-referral-card { overflow: hidden; }
.member-referral-card__title { color: inherit; text-decoration: none; }
.member-referral-card__title:hover { color: var(--hg-primary); }
.member-referral-actions { display: flex; gap: 8px; margin-top: 9px; }
.member-referral-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; }
.member-referral-stats a { display: flex; flex-direction: column; padding: 10px; border-radius: 12px; background: var(--hg-surface-2); text-align: center; text-decoration: none; }
.member-referral-stats a:hover { background: color-mix(in srgb, var(--hg-primary) 10%, var(--hg-surface-2)); }
.member-referral-stats span { color: var(--hg-muted); font-size: 9px; }
.member-referral-stats strong { margin-top: 4px; color: var(--hg-ink); font-size: 18px; font-weight: 800; }
.directory-filters { display: grid; grid-template-columns: minmax(240px, 1fr) auto; gap: 10px; }
.directory-filters.has-leadership-filter { grid-template-columns: minmax(240px, 1fr) minmax(180px, .4fr) auto; }
.profile-directory-emoji { display: grid; width: 68px; height: 68px; flex: 0 0 68px; place-items: center; border-radius: 20px; background: var(--hg-primary-soft); font-size: 34px !important; }
.directory-card-name-row { display: flex; gap: 5px; align-items: center; }
.directory-card-name-row h2 { min-width: 0; }
.directory-name-emoji { display: inline; flex: 0 0 auto; color: inherit !important; font-size: 16px !important; font-weight: 400 !important; }

/* Students and shared material progress */
.student-cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.student-cards-empty { grid-column: 1 / -1; padding: 30px; border: 1px dashed var(--hg-border); border-radius: 20px; color: var(--hg-muted); background: var(--hg-surface); }
.student-card { overflow: hidden; display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--hg-border); border-radius: 22px; color: var(--hg-ink); background: var(--hg-surface); box-shadow: 0 10px 30px rgba(26,32,56,.05); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.student-card:hover { border-color: color-mix(in srgb, var(--hg-primary) 24%, var(--hg-border)); box-shadow: var(--hg-shadow-sm); transform: translateY(-2px); }
.student-card.is-archived { opacity: .76; }
.student-card.is-group .student-card__avatar { background: linear-gradient(145deg, #1f9d84, #3bc9a9); box-shadow: 0 8px 20px rgba(31,157,132,.2); }
.student-card__header { display: flex; min-width: 0; gap: 12px; align-items: center; justify-content: space-between; padding: 18px 18px 14px; }
.student-card__identity,
.student-card__linked-identity { display: flex; overflow: hidden; min-width: 0; flex: 1; gap: 11px; align-items: center; color: inherit; }
.student-card__linked-identity > .member-identity { width: 100%; }
.student-card__linked-identity .member-identity__name { color: var(--hg-ink); font-size: 16px; }
.student-card__linked-identity .member-identity__subtitle { color: var(--hg-muted); font-size: 12px; font-weight: 650; }
.student-card__linked-identity:hover .member-identity__name { color: var(--hg-primary); }
.student-card__avatar { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(145deg, var(--hg-primary), #8b7dff); box-shadow: 0 8px 20px color-mix(in srgb, var(--hg-primary) 24%, transparent); font-size: 18px; }
.student-card__avatar:hover { color: #fff; transform: scale(1.03); }
.student-card__identity-copy { overflow: hidden; min-width: 0; }
.student-card__name-row { display: flex; min-width: 0; gap: 7px; align-items: center; }
.student-card__name { overflow: hidden; color: var(--hg-ink); font-size: 16px; font-weight: 850; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.student-card__name:hover { color: var(--hg-primary); }
.student-card__type { display: block; margin-top: 4px; color: var(--hg-muted); font-size: 12px; font-weight: 700; }
.student-card__tools { display: flex; flex: 0 0 auto; gap: 5px; align-items: center; }
.student-card__contacts { display: flex; flex: 0 0 auto; gap: 5px; }
.student-card__record-link,
.student-card__contacts a { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--hg-border); border-radius: 11px; color: var(--hg-muted); background: var(--hg-surface-2); font-size: 13px; }
.student-card__record-link:hover,
.student-card__contacts a:hover { border-color: color-mix(in srgb, var(--hg-primary) 35%, var(--hg-border)); color: var(--hg-primary); background: var(--hg-primary-soft); }
.student-card__body { display: grid; gap: 12px; padding: 0 18px 18px; }
.student-card__account-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--hg-muted); font-size: 12px; font-weight: 650; }
.student-card__account-meta span { display: inline-flex; gap: 5px; align-items: center; }
.student-card__account-meta i { color: var(--hg-primary); }
.student-card__footer { margin-top: auto; border-top: 1px solid var(--hg-border); background: color-mix(in srgb, var(--hg-surface-2) 55%, var(--hg-surface)); }
.student-card__edit { padding: 16px 18px 4px; }
.student-card__edit-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }
.student-card__edit-form label { display: grid; min-width: 0; gap: 5px; color: var(--hg-muted); font-size: 12px; font-weight: 750; }
.student-card__edit-form label:first-child { grid-column: 1 / -1; }
.student-card__edit-form .student-card__group-field { display: flex; flex-direction: row; gap: 7px; align-items: center; align-self: center; }
.student-card__edit-form > .btn { min-height: 32px; }
.student-card__actions { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 12px 18px; }
.student-card__actions a { display: inline-flex; min-height: 30px; gap: 6px; align-items: center; color: var(--hg-muted); font-size: 12px; font-weight: 750; }
.student-card__actions a:hover { color: var(--hg-primary); }
.student-card__actions a.is-success { color: #16835b; }
.student-card__actions a.is-danger { color: #c44859; }

.student-progress { min-width: 0; }
.student-progress__heading { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.student-progress__heading > div { display: flex; min-width: 0; flex-direction: column; }
.student-progress__heading span { color: var(--hg-primary); font-size: 12px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.student-progress__heading strong { margin-top: 2px; color: var(--hg-ink); font-size: 15px; }
.student-progress__heading > i { color: var(--hg-primary); font-size: 16px; }
.student-progress__list { display: grid; gap: 8px; }
.student-progress--profile .student-progress__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.student-progress__item { display: grid; min-width: 0; grid-template-columns: 35px minmax(0, 1fr); gap: 10px; padding: 11px; border: 1px solid var(--hg-border); border-radius: 15px; color: var(--hg-ink); background: color-mix(in srgb, var(--hg-surface-2) 65%, var(--hg-surface)); transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.student-progress__item:hover { border-color: color-mix(in srgb, var(--hg-primary) 38%, var(--hg-border)); color: var(--hg-ink); background: var(--hg-primary-soft); transform: translateY(-1px); }
.student-progress__item.is-complete { border-color: rgba(36,173,120,.25); background: linear-gradient(145deg, rgba(36,173,120,.08), var(--hg-surface)); }
.student-progress__icon { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 11px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 14px; }
.student-progress__item.is-complete .student-progress__icon { color: #16835b; background: rgba(36,173,120,.12); }
.student-progress__content { overflow: hidden; min-width: 0; }
.student-progress__title-row { display: flex; min-width: 0; gap: 8px; align-items: start; justify-content: space-between; }
.student-progress__title-row strong { overflow: hidden; min-width: 0; color: var(--hg-ink); font-size: 13px; font-weight: 800; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.student-progress__title-row > span { flex: 0 0 auto; color: var(--hg-muted); font-size: 12px; font-weight: 800; }
.student-progress__bar { overflow: hidden; display: block; height: 5px; margin-top: 8px; border-radius: 99px; background: color-mix(in srgb, var(--hg-border) 70%, var(--hg-surface)); }
.student-progress__bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hg-primary), #9c8fff); box-shadow: 0 0 10px color-mix(in srgb, var(--hg-primary) 22%, transparent); }
.student-progress__item.is-complete .student-progress__bar > span { background: linear-gradient(90deg, #16835b, #3bd39a); }
.student-progress__meta { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-top: 7px; color: var(--hg-muted); font-size: 12px; font-weight: 700; }
.student-progress__meta > span:last-child { color: var(--hg-primary); }
.student-progress__item.is-complete .student-progress__meta > span:last-child { color: #16835b; }
.student-progress__empty { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px; border: 1px dashed color-mix(in srgb, var(--hg-primary) 24%, var(--hg-border)); border-radius: 15px; background: color-mix(in srgb, var(--hg-primary-soft) 35%, var(--hg-surface)); }
.student-progress__empty-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 15px; }
.student-progress__empty > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.student-progress__empty strong { color: var(--hg-ink); font-size: 13px; }
.student-progress__empty small { margin-top: 3px; color: var(--hg-muted); font-size: 12px; line-height: 1.4; }
.student-progress__empty > a { display: inline-flex; min-height: 30px; gap: 5px; align-items: center; color: var(--hg-primary); font-size: 12px; font-weight: 800; }

.member-mentorship-progress__actions { display: flex !important; flex-direction: row !important; gap: 8px; align-items: center; }
.member-mentorship-progress__actions > strong { display: inline-flex; min-width: 38px; height: 32px; align-items: center; justify-content: center; padding: 0 11px; border-radius: 999px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 13px; font-weight: 850; }
.member-mentorship-progress__actions > a { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--hg-border); border-radius: 10px; color: var(--hg-primary); background: var(--hg-surface-2); font-size: 13px; }
.member-mentorship-progress__actions > a:hover { border-color: color-mix(in srgb, var(--hg-primary) 35%, var(--hg-border)); background: var(--hg-primary-soft); }
.member-mentorship-mentor { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-bottom: 16px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--hg-primary) 20%, var(--hg-border)); border-radius: 16px; color: var(--hg-ink); background: linear-gradient(135deg, color-mix(in srgb, var(--hg-primary-soft) 72%, var(--hg-surface)), var(--hg-surface)); }
.member-mentorship-mentor:hover { border-color: color-mix(in srgb, var(--hg-primary) 42%, var(--hg-border)); color: var(--hg-ink); transform: translateY(-1px); }
.member-mentorship-mentor__label { display: inline-flex; min-height: 32px; gap: 7px; align-items: center; padding: 0 11px; border-radius: 999px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 12px; font-weight: 800; }
.member-mentorship-mentor > .member-identity { width: 100%; }
.member-mentorship-mentor .member-identity__name { font-size: 15px; }
.member-mentorship-mentor .member-identity__subtitle { font-size: 12px; font-weight: 650; }
.member-mentorship-mentor__arrow { color: var(--hg-primary); font-size: 14px; }

@media (max-width: 1199.98px) {
    .student-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .student-cards-grid,
    .student-progress--profile .student-progress__list { grid-template-columns: 1fr; }
    .student-card__header { flex-wrap: wrap; align-items: flex-start; }
    .student-card__identity,
    .student-card__linked-identity { flex-basis: 220px; }
    .student-card__tools { margin-left: auto; }
    .student-card__contacts { gap: 4px; }
    .student-card__record-link,
    .student-card__contacts a { width: 34px; height: 34px; }
    .student-card__edit-form { grid-template-columns: 1fr; }
    .student-card__edit-form label:first-child { grid-column: auto; }
    .student-progress__empty { grid-template-columns: 38px minmax(0, 1fr); }
    .student-progress__empty > a { grid-column: 2; }
    .member-mentorship-progress__heading { align-items: flex-start; }
    .member-mentorship-progress__actions > strong { white-space: nowrap; }
    .member-mentorship-mentor { grid-template-columns: minmax(0, 1fr) auto; }
    .member-mentorship-mentor__label { grid-column: 1 / -1; width: max-content; }
}

.invitations-page { max-width: 920px; }
.invitation-list { display: grid; gap: 10px; }
.invitation-row { display: flex; gap: 20px; align-items: center; justify-content: space-between; padding: 16px; border: 1px solid var(--hg-border); border-radius: 15px; }
.invitation-row > div:first-child { display: flex; min-width: 0; flex-direction: column; }
.invitation-row small { margin-top: 4px; color: var(--hg-muted); }
.invitation-row__status { display: flex; flex: 0 0 auto; flex-direction: column; gap: 6px; align-items: end; }
.invitation-row__status > strong { color: var(--hg-primary); font-size: 11px; }

@media (max-width: 767.98px) {
    .training-portal-hero { align-items: flex-start; flex-direction: column; }
    .training-reward-path { grid-template-columns: 1fr; }
    .training-portal-settings-link { width: 100%; justify-content: center; }
    .training-portal-session { grid-template-columns: 54px minmax(0, 1fr); gap: 12px; padding: 13px; }
    .training-portal-session__date { width: 54px; height: 58px; border-radius: 14px; }
    .training-portal-session__date strong { font-size: 21px; }
    .training-portal-session__actions { grid-column: 1 / -1; max-width: none; justify-content: flex-start; padding-top: 10px; border-top: 1px solid var(--hg-border); }
    .training-portal-requirements__grid { grid-template-columns: 1fr; }
    .training-portal-block__locked span { font-size: 12px; }
    .member-profile-name-row { gap: 6px; }
    .member-name-emoji { font-size: 21px; }
    .member-emoji-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
    .member-emoji-option span { min-height: 50px; border-radius: 13px; font-size: 24px; }
    .member-photo-uploader { padding: 9px; border-radius: 15px; }
    .member-photo-dropzone { min-height: 96px; padding: 14px; }
    .member-photo-dropzone__icon { width: 46px; height: 46px; flex-basis: 46px; border-radius: 14px; font-size: 20px; }
    .member-photo-dropzone__copy strong { font-size: 12px; }
    .member-photo-dropzone__copy small { font-size: 9px; }
    .member-photo-dropzone__limit { display: none; }
    .member-photo-upload-preview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .member-photo-upload-footer { align-items: stretch; flex-direction: column; }
    .member-photo-upload-footer .btn { width: 100%; min-height: 42px; }
    .member-event-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .member-moments-lightbox__image { padding: 62px 8px max(12px, env(safe-area-inset-bottom)); }
    .member-moments-lightbox .carousel-control-prev,
    .member-moments-lightbox .carousel-control-next { width: 56px; }
    .directory-filters,
    .directory-filters.has-leadership-filter { grid-template-columns: 1fr; }
    .member-referral-stats { grid-template-columns: 1fr; }
    .invitation-row { align-items: flex-start; flex-direction: column; }
    .invitation-row__status { align-items: flex-start; }
    .invitations-share-card .input-group { display: grid; grid-template-columns: 1fr 1fr; }
    .invitations-share-card .input-group input { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 991.98px) {
    .profile-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .event-detail-layout { grid-template-columns: 1fr; }
    .event-side-card { position: static; }
}

@media (max-width: 767.98px) {
    .section-page-hero { padding: 102px 0 34px; }
    .section-page-content { padding: 20px 0 42px; }
    .events-view-nav { width: 100%; }
    .events-view-nav__item { min-width: 0; flex: 1; justify-content: center; padding-right: 9px; padding-left: 9px; }
    .events-view-nav__item small { display: none; }
    .event-format-toolbar { align-items: stretch; flex-direction: column; gap: 8px; }
    .event-format-toolbar__count { align-self: flex-end; }
    .event-format-card { align-items: flex-start; padding: 16px; }
    .event-format-card > .content-card-icon { width: 44px; height: 44px; flex-basis: 44px; }
    .event-format-actions {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-top: 12px;
    }
    .event-format-actions__toggle { width: 44px; padding: 0; justify-content: center; }
    .event-format-actions__toggle span { display: none; }
    .event-format-actions .dropdown-menu {
        position: static !important;
        width: 100%;
        flex: 0 0 100%;
        margin: 8px 0 0 !important;
        inset: auto !important;
        transform: none !important;
    }
    .event-format-edit-form .row > [class*="col-"] { width: 100%; }
    .content-card-grid, .profile-directory-grid { grid-template-columns: 1fr; }
    .calendar-card { overflow: hidden; border-radius: 18px; }
    .calendar-toolbar { position: static; min-width: 0; padding: 13px 12px; }
    .calendar-toolbar h2 { font-size: 18px; }
    .calendar-toolbar .btn { width: 34px; height: 34px; }
    .calendar-weekdays, .calendar-week { min-width: 0; }
    .calendar-weekdays span { padding: 8px 2px; font-size: 8px; }
    .calendar-day { min-height: 62px; padding: 4px 3px; }
    .calendar-date { width: 25px; height: 25px; margin: 0 auto; border-radius: 8px; font-size: 9px; }
    .calendar-day-events { display: flex; max-width: 32px; gap: 3px; justify-content: center; margin: 5px auto 0; }
    .calendar-day-events a { display: block; width: 8px; height: 8px; min-width: 8px; padding: 0; border-radius: 50%; font-size: 0; }
    .calendar-day-events a time { display: none; }
    .calendar-day-events a.is-current { width: 10px; height: 10px; min-width: 10px; box-shadow: 0 0 0 3px rgba(22,131,91,.16); }
    .calendar-event-live { display: none; }
    .content-card { min-height: 0; padding: 18px; }
    .detail-card { padding: 22px 18px; border-radius: 18px; }
    .profile-directory-card { min-height: 0; }
    .event-page { padding: 20px 0 42px; }
    .event-main-card { min-height: 0; padding: 22px 18px; border-radius: 18px; }
    .event-side-card { padding: 18px; border-radius: 18px; }
    .event-live-actions-card { padding: 18px; }
    .event-live-actions-row { grid-template-columns: 1fr; }
    .event-live-message-control { flex-direction: column; }
    .event-live-reaction-buttons { justify-content: space-between; }
    .event-live-moderation-card { padding: 16px; }
    .event-live-moderation-head { align-items: stretch; flex-direction: column; }
    .event-live-moderation-head .btn { width: 100%; justify-content: center; }
    .event-team-list { display: grid; grid-template-columns: 1fr; }
    .event-team-member { min-width: 0; }
    .event-leader-body { padding: 17px; }
    .event-leader-secondary { grid-template-columns: 1fr; }
    .event-manage-actions { grid-column: auto; flex-wrap: wrap; }
    .event-leader-secondary form { flex-direction: column; }
    .event-live-shell { padding: 74px 18px 34px; }
    .event-live-back { top: 14px; left: 14px; }
    .event-live-header { align-items: stretch; flex-direction: column; gap: 22px; margin-bottom: 42px; }
    .event-live-heading { align-items: flex-start; }
    .event-live-community-logo { width: 64px; height: 64px; }
    .event-live-header h1 { font-size: clamp(38px, 13vw, 62px); }
    .event-live-status-stack { width: 100%; }
    .event-live-totals { width: 100%; }
    .event-live-totals > div { min-width: 0; flex: 1; padding: 14px 16px; border-radius: 17px; }
    .event-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 14px; }
    .event-live-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 10px; }
    .event-live-grid--wall { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 15px 6px; }
    .event-live-grid--wall .event-live-avatar-wrap { width: min(14vw, 58px); height: min(14vw, 58px); }
    .event-live-grid--wall .event-live-person h2 { font-size: 7px; }
    .event-live-bubble { max-width: 160px; margin-bottom: 14px; padding: 10px 12px; font-size: 10px; }
    .event-live-avatar-wrap { width: min(32vw, 130px); height: min(32vw, 130px); }
    .event-live-avatar { border-radius: 30%; }
    .event-live-lifecycle { min-height: 58vh; }
    .event-live-lifecycle strong { font-size: clamp(42px, 14vw, 68px); }
    .event-live-spotlight-card { min-height: 72vh; padding: 28px 20px; border-radius: 34px; }
    .event-live-spotlight-message { margin-bottom: 20px; padding: 13px 17px; font-size: 17px; }
    .event-live-spotlight-avatar-slot { width: 180px; height: 180px; }
    .event-live-moderation-person { align-items: stretch; flex-direction: column; }
    .event-live-moderation-person .btn { width: 100%; justify-content: center; }
}

/* Community hub and product settings */
.community-hub-tabs,
.community-settings-tabs {
    display: flex;
    gap: 7px;
    margin-bottom: 24px;
    padding: 6px;
    overflow-x: auto;
    border: 1px solid var(--hg-border);
    border-radius: 17px;
    background: var(--hg-surface);
    box-shadow: var(--hg-shadow-sm);
    scrollbar-width: none;
}
.community-hub-tabs::-webkit-scrollbar,
.community-settings-tabs::-webkit-scrollbar { display: none; }
.community-hub-tabs a,
.community-settings-tabs a {
    display: inline-flex;
    min-height: 44px;
    min-width: max-content;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    border-radius: 12px;
    color: var(--hg-muted);
    font-size: 13px;
    font-weight: 750;
}
.community-hub-tabs a:hover,
.community-settings-tabs a:hover { color: var(--hg-ink); background: var(--hg-surface-2); }
.community-hub-tabs a.is-active,
.community-settings-tabs a.is-active { color: var(--hg-primary); background: var(--hg-primary-soft); }
.community-settings-tabs { width: fit-content; margin-top: -10px; }
.community-settings-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .75fr); gap: 24px; align-items: start; }
.community-settings-form .form-control { min-height: 44px; }
.community-logo-card { position: sticky; top: 96px; }
.community-logo-preview { position: relative; width: min(100%, 260px); aspect-ratio: 1; margin: 0 auto 18px; transition: opacity .2s ease, filter .2s ease; }
.community-logo-preview > img,
.community-logo-placeholder { width: 100%; height: 100%; border: 1px solid var(--hg-border); border-radius: 24px; object-fit: cover; box-shadow: 0 18px 40px rgba(33, 27, 92, .12); }
.community-logo-placeholder { display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--hg-primary), #796cff); font-size: 72px; font-weight: 850; }
.community-logo-preview__badge { position: absolute; right: 12px; bottom: 12px; display: grid; width: 38px; height: 38px; place-items: center; border: 3px solid var(--hg-surface); border-radius: 13px; color: #fff; background: linear-gradient(145deg, var(--hg-primary), #806cff); box-shadow: 0 8px 20px rgba(67, 52, 180, .3); }
.community-logo-preview.is-removed { opacity: .38; filter: grayscale(1); }
.community-logo-upload { min-width: 0; }
.community-logo-upload__surface { display: flex; min-height: 76px; gap: 11px; align-items: center; margin: 0; padding: 12px; border: 1px dashed color-mix(in srgb, var(--hg-primary) 42%, var(--hg-border)); border-radius: 16px; color: var(--hg-ink); background: color-mix(in srgb, var(--hg-primary-soft) 34%, var(--hg-surface)); cursor: pointer; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.community-logo-upload__surface:hover { border-color: var(--hg-primary); background: color-mix(in srgb, var(--hg-primary-soft) 72%, var(--hg-surface)); transform: translateY(-1px); }
.community-logo-upload:focus-within .community-logo-upload__surface { border-color: var(--hg-primary); box-shadow: 0 0 0 4px rgba(91, 76, 240, .13); }
.community-logo-upload__icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 13px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 19px; }
.community-logo-upload__copy { min-width: 0; flex: 1; }
.community-logo-upload__copy strong,
.community-logo-upload__copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-logo-upload__copy strong { color: var(--hg-ink); font-size: 12px; font-weight: 780; }
.community-logo-upload__copy small { margin-top: 3px; color: var(--hg-muted); font-size: 10px; }
.community-logo-upload__action { display: inline-flex; min-height: 31px; flex: 0 0 auto; align-items: center; padding: 6px 9px; border: 1px solid var(--hg-border); border-radius: 9px; color: var(--hg-primary); background: var(--hg-surface); font-size: 9px; font-weight: 800; }
.community-logo-upload.has-file .community-logo-upload__surface { border-color: rgba(32, 168, 117, .46); background: rgba(32, 168, 117, .08); }
.community-logo-upload.has-file .community-logo-upload__icon { color: #16835b; background: rgba(32, 168, 117, .13); }
.community-logo-upload.has-error .community-logo-upload__surface { border-color: rgba(220, 53, 69, .55); background: rgba(220, 53, 69, .07); }
.community-logo-upload.has-error .community-logo-upload__icon { color: #c53243; background: rgba(220, 53, 69, .11); }
.community-logo-remove { display: flex; min-height: 54px; gap: 10px; align-items: center; margin: 12px 0 0; padding: 8px 10px; border-radius: 13px; color: var(--hg-muted); background: var(--hg-surface-2); cursor: pointer; font-size: 12px; }
.community-logo-remove > span { display: flex; min-width: 0; flex-direction: column; }
.community-logo-remove strong { color: var(--hg-ink); font-size: 12px; }
.community-logo-remove small { line-height: 1.35; }
.community-logo-save { display: inline-flex; width: 100%; min-height: 44px; gap: 8px; align-items: center; justify-content: center; margin-top: 14px; }

/* Shared file uploader */
.site-upload { min-width: 0; }
.site-upload__surface {
    display: flex;
    width: 100%;
    min-height: 88px;
    min-width: 0;
    gap: 13px;
    align-items: center;
    margin: 0;
    padding: 14px;
    border: 1px dashed color-mix(in srgb, var(--hg-primary) 42%, var(--hg-border));
    border-radius: 17px;
    color: var(--hg-ink);
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--hg-primary-soft) 72%, transparent), transparent 45%),
        color-mix(in srgb, var(--hg-primary-soft) 24%, var(--hg-surface));
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.site-upload__surface:hover,
.site-upload.is-dragging .site-upload__surface {
    border-color: var(--hg-primary);
    background-color: color-mix(in srgb, var(--hg-primary-soft) 62%, var(--hg-surface));
    transform: translateY(-1px);
}
.site-upload:focus-within .site-upload__surface {
    border-color: var(--hg-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--hg-primary) 15%, transparent);
}
.site-upload__icon {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(145deg, var(--hg-primary), #8871f8);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--hg-primary) 24%, transparent);
    font-size: 20px;
}
.site-upload__copy { display: block; min-width: 0; flex: 1; }
.site-upload__copy strong,
.site-upload__copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-upload__copy strong { color: var(--hg-ink); font-size: 13px; font-weight: 800; }
.site-upload__copy small { margin-top: 3px; color: var(--hg-muted); font-size: 10px; }
.site-upload__action {
    display: inline-flex;
    min-height: 33px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 1px solid var(--hg-border);
    border-radius: 10px;
    color: var(--hg-primary);
    background: var(--hg-surface);
    font-size: 9px;
    font-weight: 820;
}
.site-upload.is-compact .site-upload__surface { min-height: 72px; padding: 11px 12px; border-radius: 14px; }
.site-upload.is-compact .site-upload__icon { width: 42px; height: 42px; flex-basis: 42px; border-radius: 13px; font-size: 18px; }
.site-upload.has-file .site-upload__surface { border-style: solid; border-color: rgba(32, 168, 117, .46); background: rgba(32, 168, 117, .08); }
.site-upload.has-file .site-upload__icon { color: #16835b; background: rgba(32, 168, 117, .14); box-shadow: none; }
.dark .site-upload.has-file .site-upload__icon { color: #65dab0; }
.site-upload.has-error .site-upload__surface { border-style: solid; border-color: rgba(220, 53, 69, .55); background: rgba(220, 53, 69, .08); }
.site-upload.has-error .site-upload__icon { color: #c53243; background: rgba(220, 53, 69, .13); box-shadow: none; }
.site-upload__preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 9px;
    margin-top: 10px;
}
.site-upload__preview[hidden] { display: none; }
.site-upload__preview-item {
    position: relative;
    min-width: 0;
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--hg-border);
    border-radius: 13px;
    background: var(--hg-surface-2);
    aspect-ratio: 4 / 3;
}
.site-upload__preview-item img { width: 100%; height: 100%; object-fit: cover; }
.site-upload__preview-item figcaption {
    position: absolute;
    right: 5px;
    bottom: 5px;
    left: 5px;
    overflow: hidden;
    padding: 5px 7px;
    border-radius: 7px;
    color: #fff;
    background: rgba(14, 17, 28, .72);
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.site-upload__preview-item.is-current figcaption { right: auto; width: max-content; max-width: calc(100% - 10px); }
.site-upload__preview-remove {
    position: absolute;
    z-index: 2;
    top: 6px;
    right: 6px;
    display: grid;
    width: 27px;
    height: 27px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 9px;
    color: #fff;
    background: rgba(14, 17, 28, .72);
    font-size: 10px;
    cursor: pointer;
}
.site-upload__preview-remove:hover { background: rgba(190, 42, 58, .9); }
.site-upload__file-icon { display: grid; width: 100%; height: 100%; place-items: center; color: var(--hg-primary); font-size: 30px; }
.site-upload.is-avatar .site-upload__preview { grid-template-columns: minmax(96px, 128px); }
.site-upload.is-avatar .site-upload__preview-item { aspect-ratio: 1; border-radius: 18px; }
.site-upload-remove {
    display: flex;
    min-height: 52px;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 13px;
    color: var(--hg-muted);
    background: var(--hg-surface-2);
    cursor: pointer;
    font-size: 11px;
}
.site-upload-remove > span { display: flex; min-width: 0; flex-direction: column; }
.site-upload-remove strong { color: var(--hg-ink); font-size: 11px; }
.site-upload-remove small { line-height: 1.35; }
.event-photo-upload-card { display: grid; gap: 18px; margin-top: 22px; }
.event-photo-upload-card__heading { display: flex; gap: 13px; align-items: center; }
.event-photo-upload-card__heading > span { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border-radius: 15px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 20px; }
.event-photo-upload-card__heading small { display: block; color: var(--hg-primary); font-size: 9px; font-weight: 820; letter-spacing: .07em; text-transform: uppercase; }
.event-photo-upload-card__heading h3 { margin: 2px 0; color: var(--hg-ink); font-size: 19px; }
.event-photo-upload-card__heading p { margin: 0; color: var(--hg-muted); font-size: 11px; }
.event-photo-upload-card__actions { display: flex; gap: 14px; align-items: center; justify-content: space-between; }
.event-photo-upload-card__actions > span { color: var(--hg-muted); font-size: 10px; }
.event-photo-upload-card__actions > span i { margin-right: 5px; color: #1aa373; }

.community-settings-links { display: grid; grid-template-columns: minmax(220px, .8fr) repeat(2, minmax(220px, 1fr)); gap: 14px; align-items: stretch; margin-top: 24px; }
.community-settings-links > div { padding: 8px 4px; }
.community-settings-links h2 { margin: 4px 0 0; font-size: 22px; }
.community-settings-links > a { display: flex; min-height: 88px; gap: 13px; align-items: center; padding: 18px; border: 1px solid var(--hg-border); border-radius: 18px; color: var(--hg-ink); background: var(--hg-surface); box-shadow: var(--hg-shadow-sm); }
.community-settings-links > a > i:first-child { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 13px; color: var(--hg-primary); background: var(--hg-primary-soft); }
.community-settings-links > a > span { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.community-settings-links > a small { color: var(--hg-muted); line-height: 1.35; }
.community-settings-links > a:hover { border-color: color-mix(in srgb, var(--hg-primary) 35%, var(--hg-border)); transform: translateY(-2px); }
.administration-links { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
.administration-links > div { grid-column: 1 / -1; }
.organizer-context-nav { display: flex; min-height: 48px; gap: 9px; align-items: center; margin-bottom: 24px; padding: 9px 13px; overflow-x: auto; border: 1px solid var(--hg-border); border-radius: 15px; color: var(--hg-muted); background: var(--hg-surface); font-size: 13px; white-space: nowrap; }
.organizer-context-nav a { display: inline-flex; min-height: 44px; gap: 7px; align-items: center; color: var(--hg-primary); font-weight: 720; }
.organizer-context-nav > i { font-size: 10px; opacity: .55; }
.organizer-context-nav span { display: inline-flex; gap: 7px; align-items: center; color: var(--hg-ink); font-weight: 750; }

@media (max-width: 991.98px) {
    .community-settings-layout { grid-template-columns: 1fr; }
    .community-logo-card { position: static; }
    .community-settings-links { grid-template-columns: 1fr 1fr; }
    .community-settings-links > div { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
    .community-hub-tabs,
    .community-settings-tabs {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-right: 0;
        margin-left: 0;
        padding: 6px;
        overflow: visible;
        border: 1px solid var(--hg-border);
        border-radius: 17px;
        box-shadow: var(--hg-shadow-sm);
    }
    .community-settings-tabs { margin-top: -10px; }
    .community-hub-tabs a,
    .community-settings-tabs a {
        min-width: 0;
        padding-right: 8px;
        padding-left: 8px;
        font-size: 12px;
        line-height: 1.25;
        text-align: center;
        white-space: normal;
    }
    .administration-hub-tabs {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-right: 0;
        margin-left: 0;
        padding: 6px;
        overflow: visible;
        border: 1px solid var(--hg-border);
        border-radius: 17px;
        box-shadow: var(--hg-shadow-sm);
    }
    .administration-hub-tabs a {
        min-width: 0;
        min-height: 52px;
        padding: 9px 8px;
        line-height: 1.25;
        text-align: center;
        white-space: normal;
    }
    .community-settings-layout { gap: 16px; }
    .community-settings-form,
    .community-logo-card { padding: 18px; }
    .community-settings-links { grid-template-columns: 1fr; }
    .community-settings-links > div { grid-column: auto; }
    .community-settings-links > a { min-height: 82px; }
    .site-upload__surface { min-height: 78px; padding: 11px; }
    .site-upload__icon { width: 43px; height: 43px; flex-basis: 43px; border-radius: 13px; font-size: 18px; }
    .site-upload__copy strong { font-size: 12px; }
    .site-upload__copy small { font-size: 9px; }
    .site-upload__action { min-height: 31px; padding: 5px 8px; }
    .site-upload__preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .event-photo-upload-card__actions { align-items: stretch; flex-direction: column; }
    .event-photo-upload-card__actions .btn { width: 100%; }
    .organizer-context-nav { margin-right: -20px; margin-left: -20px; padding-right: 20px; padding-left: 20px; border-right: 0; border-left: 0; border-radius: 0; }
}

@media (max-width: 390px) {
    .calendar-day { min-height: 56px; }
    .calendar-date { width: 23px; height: 23px; }
    .event-live-grid { grid-template-columns: 1fr; }
    .event-live-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .event-live-grid--wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .event-live-avatar-wrap { width: 140px; height: 140px; }
}

@media (display-mode: standalone) and (max-width: 767.98px) {
    .section-page-hero,
    .member-profile-hero {
        padding-top: calc(102px + var(--app-safe-area-top, env(safe-area-inset-top)));
    }

    .users-hero {
        padding-top: calc(108px + var(--app-safe-area-top, env(safe-area-inset-top)));
    }

    .training-settings-page {
        padding-top: calc(112px + var(--app-safe-area-top, env(safe-area-inset-top)));
    }
}

@media (max-width: 767.98px) {
    html.app-standalone .section-page-hero,
    html.app-standalone .member-profile-hero {
        padding-top: calc(102px + var(--app-safe-area-top, env(safe-area-inset-top)));
    }

    html.app-standalone .users-hero {
        padding-top: calc(108px + var(--app-safe-area-top, env(safe-area-inset-top)));
    }

    html.app-standalone .training-settings-page {
        padding-top: calc(112px + var(--app-safe-area-top, env(safe-area-inset-top)));
    }
}

@media (prefers-reduced-motion: reduce) {
    .event-live-body::before, .event-live-body::after, .event-live-person, .event-live-bubble,
    .event-live-pulse, .event-live-kicker i, .event-live-empty > span { animation: none !important; }
}

/* Shared user identity: avatar, level frame, name and profile emoji */
.member-identity {
    --member-identity-size: 48px;
    --member-identity-radius: 15px;
    display: inline-flex;
    min-width: 0;
    gap: 11px;
    align-items: center;
    color: inherit;
    line-height: 1.2;
}
.member-identity--xs { --member-identity-size: 34px; --member-identity-radius: 10px; gap: 8px; }
.member-identity--sm { --member-identity-size: 42px; --member-identity-radius: 13px; gap: 9px; }
.member-identity--md { --member-identity-size: 48px; --member-identity-radius: 15px; }
.member-identity--lg { --member-identity-size: 68px; --member-identity-radius: 20px; gap: 14px; }
.member-identity--xl { --member-identity-size: 142px; --member-identity-radius: 36px; gap: 30px; }
.member-identity--live { width: 100%; height: 100%; --member-identity-size: 100%; --member-identity-radius: 34%; }
.member-identity__avatar-wrap {
    position: relative;
    display: inline-grid;
    width: var(--member-identity-size);
    height: var(--member-identity-size);
    flex: 0 0 var(--member-identity-size);
    padding: 3px;
    border: 1px solid color-mix(in srgb, var(--hg-primary) 18%, var(--hg-border));
    border-radius: var(--member-identity-radius);
    background: color-mix(in srgb, var(--hg-surface) 86%, var(--hg-primary-soft));
    box-shadow: 0 7px 17px rgba(25, 20, 74, .1);
    place-items: center;
}
.member-identity--frame-silver .member-identity__avatar-wrap {
    padding: 3px;
    border-color: #f6f8fc;
    background: linear-gradient(145deg, #ffffff 5%, #aeb8c9 42%, #f7f9fc 66%, #8c98aa 100%);
    box-shadow: 0 0 0 2px rgba(176, 186, 202, .28), 0 8px 22px rgba(49, 57, 76, .2);
}
.member-identity--frame-gold .member-identity__avatar-wrap {
    padding: 3px;
    border-color: #fff1a7;
    background: linear-gradient(145deg, #fff7bd 2%, #e9ad27 34%, #fff2a0 58%, #b86f09 100%);
    box-shadow: 0 0 0 2px rgba(242, 184, 51, .27), 0 8px 24px rgba(152, 93, 5, .27);
}
.member-identity__avatar {
    display: grid;
    width: 100%;
    height: 100%;
    border-radius: calc(var(--member-identity-radius) - 4px);
    color: var(--hg-primary);
    background: var(--hg-primary-soft);
    object-fit: cover;
    font-size: calc(var(--member-identity-size) * .48);
    line-height: 1;
    place-items: center;
}
.member-identity__level {
    position: absolute;
    right: -7px;
    bottom: -6px;
    z-index: 3;
    display: inline-flex;
    min-width: 22px;
    height: 19px;
    gap: 2px;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid var(--hg-surface);
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #4939d6, #7969f6);
    box-shadow: 0 4px 10px rgba(44, 34, 129, .26);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1;
}
.member-identity__level i { font-size: 7px; }
.member-identity--frame-silver .member-identity__level { color: #334054; background: linear-gradient(135deg, #f8fafc, #aeb8c8); }
.member-identity--frame-gold .member-identity__level { color: #604005; background: linear-gradient(135deg, #fff4a8, #e3a520); }
.member-identity__presence {
    position: absolute;
    top: -3px;
    right: -3px;
    z-index: 4;
    width: 11px;
    height: 11px;
    border: 2px solid var(--hg-surface);
    border-radius: 50%;
    background: #9ba3b2;
    box-shadow: 0 2px 7px rgba(29, 31, 41, .18);
}
.member-identity__presence.is-online { background: #27c981; box-shadow: 0 0 0 3px rgba(39, 201, 129, .14); }
.member-identity__copy { display: flex; overflow: hidden; min-width: 0; flex: 1; flex-direction: column; }
.member-identity__name-row { display: flex; min-width: 0; gap: 5px; align-items: center; }
.member-identity__name {
    overflow: hidden;
    margin: 0;
    color: var(--hg-ink);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.member-identity__emoji { flex: 0 0 auto; font-size: .95em; font-weight: 400; line-height: 1; }
.member-identity__subtitle { overflow: hidden; margin-top: 3px; color: var(--hg-muted); font-size: 10px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.member-identity__meta { overflow: hidden; margin-top: 5px; color: var(--hg-muted); font-size: 9px; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.member-identity__kicker { display: inline-flex; width: max-content; max-width: 100%; gap: 6px; align-items: center; margin-bottom: 7px; padding: 6px 11px; border-radius: 999px; color: #fff; background: rgba(255,255,255,.13); font-size: 11px; font-weight: 750; }
.member-identity__kicker::before { font-family: bootstrap-icons; content: "\f52e"; }
.member-identity--avatar-only { gap: 0; }
.member-identity--nickname-neon .member-identity__copy { overflow: visible; }
.member-identity .member-nickname--neon {
    text-shadow: none;
    filter: drop-shadow(0 0 3px rgba(99,235,255,.9)) drop-shadow(0 0 7px rgba(170,96,255,.7)) drop-shadow(0 0 11px rgba(85,68,216,.55));
}

.member-identity--hero .member-identity__avatar-wrap { padding: 5px; border-color: rgba(255,255,255,.28); background-color: rgba(255,255,255,.12); box-shadow: 0 24px 50px rgba(18,12,66,.28); backdrop-filter: blur(10px); }
.member-identity--hero.member-identity--frame-silver .member-identity__avatar-wrap { border-color: #f4f7fc; background: linear-gradient(145deg, #fff, #aab4c5 45%, #f8fafc 68%, #8793a6); box-shadow: 0 0 0 5px rgba(228,232,240,.18), 0 24px 50px rgba(18,12,66,.28); }
.member-identity--hero.member-identity--frame-gold .member-identity__avatar-wrap { border-color: #fff1a4; background: linear-gradient(145deg, #fff6b2, #dfa018 44%, #fff0a0 67%, #aa6505); box-shadow: 0 0 0 5px rgba(255,213,104,.2), 0 24px 55px rgba(18,12,66,.34); }
.member-identity--hero .member-identity__avatar { border-radius: 30px; }
.member-identity--hero .member-identity__level { right: -8px; bottom: 5px; min-width: 38px; height: 28px; border-color: rgba(58, 44, 157, .9); font-size: 13px; }
.member-identity--hero .member-identity__level i { font-size: 11px; }
.member-identity--hero .member-identity__presence { top: auto; right: -4px; bottom: 38px; width: 20px; height: 20px; border: 4px solid #5142cc; }
.member-identity--hero .member-identity__copy,
.member-identity--hero .member-identity__name-row,
.member-identity--hero .member-identity__name { overflow: visible; }
.member-identity--hero .member-identity__name-row { flex-wrap: wrap; }
.member-identity--hero .member-identity__name {
    color: #fff;
    font-size: clamp(34px, 5vw, 54px);
    letter-spacing: -.035em;
    text-overflow: clip;
    white-space: normal;
}
.member-identity--hero .member-identity__emoji { font-size: clamp(22px, 3vw, 30px); }
.member-identity--hero .member-identity__subtitle { margin-top: 8px; color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.65; white-space: normal; }
.member-profile-head { display: grid; grid-template-columns: 142px minmax(0, 1fr); gap: 0 30px; align-items: center; }
.member-profile-head > .member-identity--hero { display: contents; }
.member-profile-head > .member-identity--hero .member-identity__avatar-wrap { grid-column: 1; grid-row: 1 / 3; }
.member-profile-head > .member-identity--hero .member-identity__copy { grid-column: 2; grid-row: 1; }
.member-profile-head > .member-profile-title { grid-column: 2; grid-row: 2; }
.member-profile-legend { margin: 10px 0 0; }

.user-menu > .member-identity { max-width: 210px; }
.user-menu .member-identity__name { max-width: 110px; font-size: 12px; }
.user-menu .member-identity__level { border-color: var(--hg-surface); }
.profile-directory-card { flex-direction: column; }
.profile-directory-card > .member-identity { width: 100%; }
.profile-directory-card .member-identity__avatar { width: 100%; height: 100%; border-radius: calc(var(--member-identity-radius) - 4px); }
.profile-directory-card .member-identity__name { color: var(--hg-ink); font-size: 17px; }
.profile-directory-card .member-identity__emoji { color: inherit; font-size: 15px; }
.profile-directory-card .member-identity__subtitle { color: var(--hg-muted); font-size: 11px; white-space: normal; }
.profile-directory-card .member-identity__meta { color: var(--hg-muted); font-size: 9px; }
.profile-directory-card .member-identity__level { color: #fff; }
.profile-directory-card .member-identity--frame-silver .member-identity__level { color: #334054; }
.profile-directory-card .member-identity--frame-gold .member-identity__level { color: #604005; }
.user-identity > .member-identity:last-child { display: inline-flex; flex-direction: row; }
.user-profile-head > .member-identity { width: 100%; }
.account-avatar-field > .member-identity { flex: 0 1 260px; }
.account-avatar-field .member-identity__avatar { width: 100%; height: 100%; border-radius: calc(var(--member-identity-radius) - 4px); }
.training-participant { grid-template-columns: minmax(0, 1fr) 14px; }
.training-participant > .member-identity { width: 100%; }
.training-participant .member-identity__name { font-size: 15px; }
.training-participant .member-identity__subtitle { font-size: 13px; }
.training-mentor-chip { grid-template-columns: minmax(0, 1fr) 12px; }
.training-mentor-chip > .member-identity:first-child { display: inline-flex; width: 100%; height: auto; border-radius: 0; background: transparent; font-size: inherit; object-fit: initial; place-items: normal; }
.member-training-season__mentor { grid-template-columns: minmax(0, 1fr) 14px; }
.member-training-season__mentor > .member-identity:first-child { display: inline-flex; width: 100%; height: auto; border-radius: 0; background: transparent; object-fit: initial; place-items: normal; }
.event-team-member > .member-identity, .event-present-person > .member-identity, .event-live-moderation-person > a > .member-identity { min-width: 0; flex: 1; }
.event-team-member .member-identity__name, .event-present-person .member-identity__name, .event-live-moderation-person .member-identity__name { font-size: 11px; }
.event-team-member .member-identity__subtitle, .event-present-person .member-identity__subtitle { font-size: 9px; }
.tree-person > .member-identity, .tree-person-link > .member-identity { min-width: 0; flex: 1; }
.tree-person .member-identity__name { font-size: 12px; }
.tree-person .member-identity__subtitle { font-size: 9px; }
.event-live-avatar-wrap > .member-identity, .event-live-spotlight-avatar-slot > .member-identity { position: relative; z-index: 2; width: 100%; height: 100%; }
.event-live-avatar-wrap .member-identity__avatar-wrap, .event-live-spotlight-avatar-slot .member-identity__avatar-wrap { width: 100%; height: 100%; padding: 4px; border-color: rgba(255,255,255,.14); border-radius: 34%; background: linear-gradient(145deg, #302b5c, #181a2d); box-shadow: 0 25px 70px rgba(0,0,0,.34); }
.event-live-avatar-wrap .member-identity--frame-silver .member-identity__avatar-wrap, .event-live-spotlight-avatar-slot .member-identity--frame-silver .member-identity__avatar-wrap { border-color: #f4f7fc; background: linear-gradient(145deg, #fff, #aab4c5 45%, #f8fafc 68%, #8793a6); box-shadow: 0 0 0 4px rgba(228,232,240,.18), 0 25px 70px rgba(0,0,0,.38); }
.event-live-avatar-wrap .member-identity--frame-gold .member-identity__avatar-wrap, .event-live-spotlight-avatar-slot .member-identity--frame-gold .member-identity__avatar-wrap { border-color: #fff1a4; background: linear-gradient(145deg, #fff6b2, #dfa018 44%, #fff0a0 67%, #aa6505); box-shadow: 0 0 0 4px rgba(255,213,104,.22), 0 25px 70px rgba(0,0,0,.4); }
.event-live-avatar-wrap .member-identity__avatar, .event-live-spotlight-avatar-slot .member-identity__avatar { border-radius: calc(34% - 4px); font-size: clamp(48px, 5vw, 84px); }
.event-live-avatar-wrap .member-identity__level { right: -7px; bottom: -7px; min-width: 31px; height: 25px; border-color: #10121f; font-size: 11px; }
.event-live-spotlight-avatar-slot .member-identity__level { right: -9px; bottom: -9px; min-width: 44px; height: 32px; border-color: #171929; font-size: 14px; }
.event-live-spotlight-avatar-slot .member-identity__avatar { font-size: clamp(80px, 11vw, 150px); }
.event-live-person--muted .member-identity__avatar { filter: saturate(.55) brightness(.76); }
.event-live-person--hyped .member-identity__avatar { animation: event-live-avatar-hype 1.5s cubic-bezier(.2,.85,.2,1); }
.event-live-grid--wall .event-live-avatar-wrap .member-identity__avatar-wrap { padding: 2px; border-radius: 27%; }
.event-live-grid--wall .event-live-avatar-wrap .member-identity__level { right: -4px; bottom: -4px; min-width: 21px; height: 18px; padding: 0 4px; border-width: 2px; font-size: 8px; }

@media (max-width: 767.98px) {
    .member-identity--xl { --member-identity-size: 86px; --member-identity-radius: 24px; gap: 18px; }
    .member-identity--hero .member-identity__avatar-wrap { padding: 3px; }
    .member-identity--hero .member-identity__avatar { border-radius: 20px; }
    .member-identity--hero .member-identity__level { right: -7px; bottom: 1px; min-width: 30px; height: 23px; font-size: 11px; }
    .member-identity--hero .member-identity__presence { right: -3px; bottom: 27px; width: 16px; height: 16px; border-width: 3px; }
    .member-identity--hero .member-identity__name { font-size: 27px; }
    .member-identity--hero .member-identity__subtitle { font-size: 12px; }
    .member-profile-head { grid-template-columns: 86px minmax(0, 1fr); gap: 0 18px; align-items: start; }
    .member-profile-head > .member-profile-title { grid-column: 1 / -1; grid-row: 3; }
    .training-participant { grid-template-columns: minmax(0, 1fr) 12px; }
}

/* Materials library */
.materials-library {
    min-height: 70vh;
    margin-top: 76px;
    padding: 42px 0 96px;
    background: var(--hg-bg);
}

.materials-library__hero {
    position: relative;
    display: grid;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 44px;
    align-items: end;
    padding: 44px 48px;
    border: 1px solid color-mix(in srgb, var(--hg-primary) 18%, var(--hg-border));
    border-radius: 28px;
    background: linear-gradient(125deg, color-mix(in srgb, var(--hg-primary-soft) 66%, var(--hg-surface)), var(--hg-surface) 62%);
    box-shadow: var(--hg-shadow-sm);
}

.materials-library__hero::after {
    position: absolute;
    top: -155px;
    right: -120px;
    width: 390px;
    height: 390px;
    border: 1px solid color-mix(in srgb, var(--hg-primary) 17%, transparent);
    border-radius: 50%;
    box-shadow: 0 0 0 55px color-mix(in srgb, var(--hg-primary) 4%, transparent), 0 0 0 110px color-mix(in srgb, var(--hg-primary) 3%, transparent);
    content: "";
    pointer-events: none;
}

.materials-library__hero-copy,
.materials-library__summary { position: relative; z-index: 1; }

.materials-library__eyebrow {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    margin-bottom: 14px;
    color: var(--hg-primary);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.materials-library__hero h1 {
    max-width: 760px;
    margin: 0 0 14px;
    color: var(--hg-ink);
    font-size: clamp(38px, 4.6vw, 58px);
    font-weight: 820;
    line-height: 1.06;
}

.materials-library__hero p {
    max-width: 700px;
    margin: 0;
    color: var(--hg-muted);
    font-size: 18px;
    line-height: 1.65;
}

.materials-library__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    align-items: stretch;
    padding: 16px 0;
    border-top: 1px solid var(--hg-border);
    border-bottom: 1px solid var(--hg-border);
}

.materials-library__summary-item {
    display: grid;
    min-width: 150px;
    grid-template-columns: 48px 1fr;
    gap: 13px;
    align-items: center;
    padding: 7px 22px;
}

.materials-library__summary-item + .materials-library__summary-item { border-left: 1px solid var(--hg-border); }

.materials-library__summary-item > i {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 14px;
    color: var(--hg-primary);
    background: var(--hg-primary-soft);
    font-size: 21px;
}

.materials-library__summary-item span,
.materials-library__summary-item strong,
.materials-library__summary-item small { display: block; }
.materials-library__summary-item strong { color: var(--hg-ink); font-size: 28px; font-weight: 820; line-height: 1; }
.materials-library__summary-item small { margin-top: 6px; color: var(--hg-muted); font-size: 15px; font-weight: 650; line-height: 1.2; }

.materials-library__controls {
    margin: 28px 0 30px;
    padding: 27px 30px 30px;
    border: 1px solid var(--hg-border);
    border-radius: 24px;
    background: var(--hg-surface);
    box-shadow: 0 8px 28px rgba(26, 32, 56, .045);
}

.materials-library__filter-heading {
    display: flex;
    gap: 24px;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 18px;
}

.materials-library__filter-heading span {
    display: block;
    margin-bottom: 3px;
    color: var(--hg-primary);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.materials-library__filter-heading h2 { margin: 0; color: var(--hg-ink); font-size: 27px; font-weight: 790; }
.materials-library__filter-heading p { margin: 0 0 2px; color: var(--hg-muted); font-size: 16px; }

.materials-filter {
    display: flex;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 10px;
    overflow: visible;
    padding: 3px 2px 10px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--hg-primary) 40%, var(--hg-border)) transparent;
    overscroll-behavior-x: contain;
}

.materials-filter__item {
    display: inline-flex;
    min-height: 50px;
    flex: 0 0 auto;
    gap: 9px;
    align-items: center;
    padding: 11px 16px;
    border: 1px solid var(--hg-border);
    border-radius: 999px;
    color: var(--hg-muted);
    background: var(--hg-surface);
    font-size: 16px;
    font-weight: 720;
    line-height: 1.2;
    white-space: nowrap;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease, transform .18s ease;
}

.materials-filter__item i { color: var(--hg-primary); font-size: 17px; }
.materials-filter__item:hover { border-color: color-mix(in srgb, var(--hg-primary) 45%, var(--hg-border)); color: var(--hg-primary); background: var(--hg-primary-soft); transform: translateY(-1px); }
.materials-filter__item.is-active { border-color: var(--hg-primary); color: #fff; background: var(--hg-primary); box-shadow: 0 8px 20px rgba(91, 76, 240, .22); }
.materials-filter__item.is-active i { color: #fff; }
.materials-filter__item:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(91, 76, 240, .18); }

.materials-library__context {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 15px 17px;
    border-left: 4px solid var(--hg-primary);
    color: var(--hg-muted);
    background: var(--hg-primary-soft);
}

.materials-library__context i { margin-top: 2px; color: var(--hg-primary); font-size: 19px; }
.materials-library__context p { margin: 0; font-size: 16px; line-height: 1.6; }

.materials-search {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--hg-border);
}

.materials-search > label {
    display: block;
    margin-bottom: 9px;
    color: var(--hg-ink);
    font-size: 17px;
    font-weight: 760;
}

.materials-search__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.materials-search__field { position: relative; }
.materials-search__field > i { position: absolute; top: 50%; left: 18px; color: var(--hg-muted); font-size: 19px; transform: translateY(-50%); pointer-events: none; }

.materials-search__field input {
    width: 100%;
    height: 58px;
    padding: 0 58px 0 52px;
    border: 1px solid var(--hg-border);
    border-radius: 15px;
    outline: 0;
    color: var(--hg-ink);
    background: var(--hg-bg);
    font: inherit;
    font-size: 17px;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.materials-search__field input::placeholder { color: color-mix(in srgb, var(--hg-muted) 78%, transparent); }
.materials-search__field input:focus { border-color: var(--hg-primary); background: var(--hg-surface); box-shadow: 0 0 0 4px rgba(91, 76, 240, .13); }
.materials-search__field input::-webkit-search-cancel-button { display: none; }

.materials-search__field button {
    position: absolute;
    top: 50%;
    right: 10px;
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    color: var(--hg-muted);
    background: var(--hg-surface-2);
    font-size: 17px;
    transform: translateY(-50%);
    cursor: pointer;
    place-items: center;
}

.materials-search__field button:hover { color: var(--hg-primary); background: var(--hg-primary-soft); }
.materials-search__field button:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(91, 76, 240, .16); }
.materials-search__status { min-width: 188px; margin: 0; color: var(--hg-muted); font-size: 15px; font-weight: 700; text-align: right; }

.materials-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

.materials-card {
    --material-accent: var(--hg-primary);
    --material-accent-soft: var(--hg-primary-soft);
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 366px;
    overflow: hidden;
    flex-direction: column;
    padding: 26px;
    border: 1px solid var(--hg-border);
    border-radius: 22px;
    color: var(--hg-ink);
    background: var(--hg-surface);
    box-shadow: 0 7px 24px rgba(26, 32, 56, .045);
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.materials-card:nth-child(3n + 2) { --material-accent: var(--hg-cyan); --material-accent-soft: rgba(30, 157, 177, .13); }
.materials-card:nth-child(3n + 3) { --material-accent: var(--hg-coral); --material-accent-soft: rgba(238, 108, 91, .13); }
.materials-card::before { position: absolute; top: 0; left: 26px; width: 62px; height: 4px; border-radius: 0 0 4px 4px; background: var(--material-accent); content: ""; }
.materials-card:hover { border-color: color-mix(in srgb, var(--material-accent) 44%, var(--hg-border)); color: var(--hg-ink); box-shadow: var(--hg-shadow); transform: translateY(-5px); }
.materials-card:focus-visible { outline: 0; border-color: var(--material-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--material-accent) 18%, transparent), var(--hg-shadow); }
.materials-card[hidden], .materials-card-grid[hidden], .materials-empty[hidden] { display: none !important; }

.materials-card__top { display: flex; min-width: 0; gap: 16px; align-items: flex-start; justify-content: space-between; }
.materials-card__icon { display: grid; width: 60px; height: 60px; flex: 0 0 60px; place-items: center; border-radius: 17px; color: var(--material-accent); background: var(--material-accent-soft); font-size: 25px; transition: color .2s ease, background-color .2s ease, transform .2s ease; }
.materials-card:hover .materials-card__icon { color: #fff; background: var(--material-accent); transform: rotate(-3deg) scale(1.04); }

.materials-card__tags { display: flex; min-width: 0; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.materials-card__tags > span { display: inline-flex; gap: 6px; align-items: center; padding: 6px 9px; border: 1px solid var(--hg-border); border-radius: 999px; color: var(--hg-muted); background: var(--hg-bg); font-size: 15px; font-weight: 680; line-height: 1.2; }
.materials-card__tags i { color: var(--material-accent); }

.materials-card__content { display: block; flex: 1; padding: 28px 0 24px; }
.materials-card__title { display: block; margin-bottom: 10px; color: var(--hg-ink); font-size: 24px; font-weight: 790; letter-spacing: -.025em; line-height: 1.2; }
.materials-card__description { display: -webkit-box; overflow: hidden; color: var(--hg-muted); font-size: 16px; line-height: 1.62; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

.materials-card__footer { display: flex; gap: 16px; align-items: end; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--hg-border); }
.materials-card__meta { display: flex; min-width: 0; flex-wrap: wrap; gap: 8px 14px; }
.materials-card__meta > span { display: inline-flex; gap: 6px; align-items: center; color: var(--hg-muted); font-size: 16px; line-height: 1.3; }
.materials-card__meta i { color: var(--material-accent); font-size: 16px; }
.materials-card__meta strong { color: var(--hg-ink); font-weight: 800; }
.materials-card__arrow { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; border-radius: 14px; color: var(--material-accent); background: var(--material-accent-soft); font-size: 19px; transition: color .2s ease, background-color .2s ease, transform .2s ease; }
.materials-card:hover .materials-card__arrow { color: #fff; background: var(--material-accent); transform: translateX(3px); }
.materials-card__updated { display: flex; gap: 7px; align-items: center; margin-top: 14px; color: var(--hg-muted); font-size: 16px; line-height: 1.35; }
.materials-card__updated i { color: var(--material-accent); }

.materials-empty {
    max-width: 690px;
    margin: 42px auto 0;
    padding: 48px 28px;
    border: 1px solid var(--hg-border);
    border-radius: 24px;
    color: var(--hg-ink);
    background: var(--hg-surface);
    box-shadow: var(--hg-shadow-sm);
    text-align: center;
}

.materials-empty > span { display: grid; width: 66px; height: 66px; margin: 0 auto 20px; place-items: center; border-radius: 19px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 27px; }
.materials-empty h2 { margin: 0 0 8px; color: var(--hg-ink); font-size: 27px; }
.materials-empty p { margin: 0 auto 22px; color: var(--hg-muted); font-size: 17px; }

@media (max-width: 1199.98px) {
    .materials-library__hero { grid-template-columns: 1fr; gap: 30px; }
    .materials-library__summary { width: fit-content; }
    .materials-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .materials-library { margin-top: 68px; padding: 24px 0 68px; }
    .materials-library__hero { gap: 26px; padding: 30px 22px; border-radius: 22px; }
    .materials-library__hero::after { top: -210px; right: -205px; }
    .materials-library__hero h1 { font-size: 36px; }
    .materials-library__hero p { font-size: 17px; line-height: 1.55; }
    .materials-library__summary { width: 100%; grid-template-columns: 1fr 1fr; padding: 13px 0; }
    .materials-library__summary-item { min-width: 0; grid-template-columns: 1fr; gap: 9px; padding: 5px 12px; }
    .materials-library__summary-item > i { width: 42px; height: 42px; border-radius: 12px; font-size: 18px; }
    .materials-library__summary-item strong { font-size: 25px; }
    .materials-library__summary-item small { font-size: 15px; }
    .materials-library__controls { margin: 20px 0 22px; padding: 21px 18px 22px; border-radius: 20px; }
    .materials-library__filter-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
    .materials-library__filter-heading h2 { font-size: 25px; }
    .materials-library__filter-heading p { font-size: 16px; }
    .materials-filter { margin-right: 0; padding-right: 2px; }
    .materials-filter__item { min-height: 48px; padding: 10px 15px; font-size: 16px; }
    .materials-library__context { padding: 14px; }
    .materials-library__context p { font-size: 16px; }
    .materials-search__row { grid-template-columns: 1fr; gap: 9px; }
    .materials-search__field input { height: 56px; font-size: 16px; }
    .materials-search__status { min-width: 0; font-size: 16px; text-align: left; }
    .materials-card-grid { grid-template-columns: 1fr; gap: 15px; }
    .materials-card { min-height: 0; padding: 22px; border-radius: 19px; }
    .materials-card::before { left: 22px; }
    .materials-card__top { gap: 12px; }
    .materials-card__icon { width: 55px; height: 55px; flex-basis: 55px; border-radius: 15px; font-size: 23px; }
    .materials-card__tags > span { font-size: 15px; }
    .materials-card__content { padding: 23px 0; }
    .materials-card__title { font-size: 22px; }
    .materials-card__description { font-size: 16px; }
    .materials-card__footer { align-items: center; }
    .materials-card__meta { flex-direction: column; }
    .materials-card__meta > span,
    .materials-card__updated { font-size: 16px; }
    .materials-empty { margin-top: 28px; padding: 38px 22px; border-radius: 20px; }
}

/* Material collections and lesson pages */
.material-collection-page,
.material-detail-page {
    min-height: 70vh;
    margin-top: 76px;
    padding: 34px 0 96px;
    background: var(--hg-bg);
}

.material-inner-hero {
    position: relative;
    overflow: hidden;
    padding: 28px 38px 38px;
    border: 1px solid color-mix(in srgb, var(--hg-primary) 18%, var(--hg-border));
    border-radius: 28px;
    background: linear-gradient(125deg, color-mix(in srgb, var(--hg-primary-soft) 65%, var(--hg-surface)), var(--hg-surface) 64%);
    box-shadow: var(--hg-shadow-sm);
}

.material-inner-hero::after {
    position: absolute;
    top: -210px;
    right: -130px;
    width: 440px;
    height: 440px;
    border: 1px solid color-mix(in srgb, var(--hg-primary) 16%, transparent);
    border-radius: 50%;
    box-shadow: 0 0 0 64px color-mix(in srgb, var(--hg-primary) 4%, transparent), 0 0 0 128px color-mix(in srgb, var(--hg-primary) 3%, transparent);
    content: "";
    pointer-events: none;
}

.material-breadcrumb {
    position: relative;
    z-index: 2;
    display: flex;
    max-width: 100%;
    gap: 9px;
    align-items: center;
    overflow-x: auto;
    margin-bottom: 30px;
    padding-bottom: 5px;
    color: var(--hg-muted);
    font-size: 15px;
    font-weight: 680;
    scrollbar-width: none;
    white-space: nowrap;
}

.material-breadcrumb::-webkit-scrollbar { display: none; }
.material-breadcrumb a { display: inline-flex; gap: 7px; align-items: center; color: var(--hg-muted); }
.material-breadcrumb a:hover { color: var(--hg-primary); }
.material-breadcrumb > i { color: color-mix(in srgb, var(--hg-muted) 58%, transparent); font-size: 12px; }
.material-breadcrumb > span { overflow: hidden; color: var(--hg-ink); text-overflow: ellipsis; }

.material-inner-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 48px;
    align-items: end;
}

.material-inner-hero__eyebrow {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    margin-bottom: 13px;
    color: var(--hg-primary);
    font-size: 15px;
    font-weight: 820;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.material-inner-hero h1 {
    max-width: 820px;
    margin: 0 0 14px;
    color: var(--hg-ink);
    font-size: clamp(38px, 4.5vw, 56px);
    font-weight: 820;
    line-height: 1.08;
}

.material-inner-hero__copy > p {
    max-width: 750px;
    margin: 0;
    color: var(--hg-muted);
    font-size: 18px;
    line-height: 1.65;
}

.material-inner-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 21px; }
.material-inner-hero__tags a { display: inline-flex; gap: 7px; align-items: center; padding: 8px 12px; border: 1px solid var(--hg-border); border-radius: 999px; color: var(--hg-muted); background: var(--hg-surface); font-size: 15px; font-weight: 720; }
.material-inner-hero__tags a:hover { border-color: color-mix(in srgb, var(--hg-primary) 42%, var(--hg-border)); color: var(--hg-primary); background: var(--hg-primary-soft); }

.material-inner-hero__summary {
    display: grid;
    gap: 13px;
    padding: 22px 0 3px 30px;
    border-left: 1px solid var(--hg-border);
}

.material-inner-hero__count,
.material-inner-hero__updated,
.material-inner-hero__back-link {
    display: flex;
    gap: 13px;
    align-items: center;
}

.material-inner-hero__count > i,
.material-inner-hero__back-link > i {
    display: grid;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    place-items: center;
    border-radius: 15px;
    color: var(--hg-primary);
    background: var(--hg-primary-soft);
    font-size: 21px;
}

.material-inner-hero__count span,
.material-inner-hero__count strong,
.material-inner-hero__count small,
.material-inner-hero__back-link span,
.material-inner-hero__back-link strong,
.material-inner-hero__back-link small { display: block; }
.material-inner-hero__count strong { color: var(--hg-ink); font-size: 30px; font-weight: 820; line-height: 1; }
.material-inner-hero__count small { margin-top: 6px; color: var(--hg-muted); font-size: 15px; font-weight: 680; line-height: 1.25; }
.material-inner-hero__updated { color: var(--hg-muted); font-size: 15px; font-weight: 650; }
.material-inner-hero__updated i { color: var(--hg-primary); font-size: 17px; }

.material-inner-hero__back-link { padding: 12px; border: 1px solid var(--hg-border); border-radius: 16px; color: var(--hg-ink); background: color-mix(in srgb, var(--hg-surface) 86%, transparent); }
.material-inner-hero__back-link:hover { border-color: color-mix(in srgb, var(--hg-primary) 42%, var(--hg-border)); color: var(--hg-primary); background: var(--hg-surface); }
.material-inner-hero__back-link small { margin-bottom: 3px; color: var(--hg-muted); font-size: 15px; font-weight: 650; }
.material-inner-hero__back-link strong { color: inherit; font-size: 16px; font-weight: 780; line-height: 1.3; }

.material-edit-link {
    display: inline-flex;
    width: fit-content;
    gap: 8px;
    align-items: center;
    padding: 9px 0;
    color: var(--hg-primary);
    font-size: 16px;
    font-weight: 760;
}

.material-edit-link:hover { color: var(--hg-primary-strong); }
.material-edit-link:focus-visible,
.material-inner-hero a:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(91, 76, 240, .16); }

.material-collection-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 26px;
    align-items: start;
    margin-top: 28px;
}

.material-collection-main,
.material-files-panel,
.material-guide-panel,
.material-reading-card,
.material-public-panel,
.material-on-page {
    border: 1px solid var(--hg-border);
    background: var(--hg-surface);
    box-shadow: 0 7px 26px rgba(26, 32, 56, .045);
}

.material-collection-main { padding: 30px; border-radius: 24px; }
.material-collection-intro { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 30px; padding: 18px 20px; border-left: 4px solid var(--hg-primary); color: var(--hg-muted); background: var(--hg-primary-soft); }
.material-collection-intro > i { margin-top: 3px; color: var(--hg-primary); font-size: 20px; }
.material-collection-intro > div { min-width: 0; font-size: 17px; line-height: 1.7; }
.material-collection-intro p:last-child { margin-bottom: 0; }

.material-section-heading { display: flex; gap: 24px; align-items: end; justify-content: space-between; margin-bottom: 22px; }
.material-section-heading > div > span { display: block; margin-bottom: 4px; color: var(--hg-primary); font-size: 15px; font-weight: 820; letter-spacing: .07em; text-transform: uppercase; }
.material-section-heading h2 { margin: 0; color: var(--hg-ink); font-size: 30px; font-weight: 790; }
.material-section-heading > p { max-width: 470px; margin: 0 0 2px; color: var(--hg-muted); font-size: 16px; line-height: 1.55; text-align: right; }

.material-lesson-list { display: grid; gap: 11px; }
.material-lesson-card {
    display: grid;
    min-width: 0;
    grid-template-columns: 54px minmax(0, 1fr) 46px;
    gap: 17px;
    align-items: center;
    padding: 17px 18px;
    border: 1px solid var(--hg-border);
    border-radius: 17px;
    color: var(--hg-ink);
    background: var(--hg-bg);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}

.material-lesson-card:hover { border-color: color-mix(in srgb, var(--hg-primary) 42%, var(--hg-border)); color: var(--hg-ink); background: var(--hg-surface); box-shadow: var(--hg-shadow-sm); transform: translateY(-2px); }
.material-lesson-card:focus-visible { outline: 0; border-color: var(--hg-primary); box-shadow: 0 0 0 4px rgba(91, 76, 240, .15); }
.material-lesson-card__number { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 15px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 20px; font-weight: 820; }
.material-lesson-card__content { min-width: 0; }
.material-lesson-card__content > strong { display: block; color: var(--hg-ink); font-size: 20px; font-weight: 770; line-height: 1.3; }
.material-lesson-card__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; }
.material-lesson-card__meta > span { display: inline-flex; gap: 6px; align-items: center; color: var(--hg-muted); font-size: 15px; line-height: 1.35; }
.material-lesson-card__meta i { color: var(--hg-primary); }
.material-lesson-card__arrow { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 19px; transition: color .2s ease, background-color .2s ease, transform .2s ease; }
.material-lesson-card:hover .material-lesson-card__arrow { color: #fff; background: var(--hg-primary); transform: translateX(3px); }

.material-collection-sidebar { position: sticky; top: 102px; display: grid; gap: 18px; }
.material-files-panel,
.material-guide-panel { padding: 23px; border-radius: 22px; }
.material-files-panel__heading,
.material-reading-card__heading,
.material-content-section__heading { display: flex; gap: 13px; align-items: center; }
.material-files-panel__heading { margin-bottom: 19px; }
.material-files-panel__heading > span,
.material-reading-card__heading > span,
.material-content-section__heading > span { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border-radius: 14px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 20px; }
.material-files-panel__heading small,
.material-reading-card__heading small,
.material-content-section__heading small { display: block; margin-bottom: 3px; color: var(--hg-primary); font-size: 15px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.material-files-panel__heading h2,
.material-reading-card__heading h2,
.material-content-section__heading h2 { margin: 0; color: var(--hg-ink); font-size: 24px; font-weight: 780; }

.material-file-list { display: grid; gap: 9px; }
.material-file-link { display: grid; min-width: 0; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 12px; border: 1px solid var(--hg-border); border-radius: 14px; color: var(--hg-ink); background: var(--hg-bg); }
.material-file-link:hover { border-color: color-mix(in srgb, var(--hg-primary) 40%, var(--hg-border)); color: var(--hg-primary); background: var(--hg-primary-soft); }
.material-file-link__icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 18px; }
.material-file-link__copy { min-width: 0; }
.material-file-link__copy strong,
.material-file-link__copy small { display: block; }
.material-file-link__copy strong { overflow-wrap: anywhere; color: inherit; font-size: 15px; font-weight: 740; line-height: 1.35; }
.material-file-link__copy small { margin-top: 4px; color: var(--hg-muted); font-size: 15px; }
.material-file-link > .bi { color: var(--hg-muted); font-size: 17px; }

.material-guide-panel { color: var(--hg-ink); background: linear-gradient(135deg, var(--hg-primary-soft), var(--hg-surface)); }
.material-guide-panel__icon { display: grid; width: 50px; height: 50px; margin-bottom: 17px; place-items: center; border-radius: 15px; color: #fff; background: var(--hg-primary); font-size: 21px; }
.material-guide-panel h2 { margin: 0 0 14px; font-size: 23px; font-weight: 780; }
.material-guide-panel ol { display: grid; gap: 11px; margin: 0; padding-left: 22px; color: var(--hg-muted); font-size: 16px; line-height: 1.5; }
.material-guide-panel li::marker { color: var(--hg-primary); font-weight: 800; }

.material-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 26px; align-items: start; margin-top: 28px; }
.material-reading-card { min-width: 0; padding: 34px 38px 42px; border-radius: 24px; }
.material-reading-card__heading { margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--hg-border); }
.material-detail-sidebar { position: sticky; top: 102px; display: grid; gap: 18px; }
.material-public-panel,
.material-on-page { padding: 23px; border-radius: 22px; }
.material-public-panel__icon { display: grid; width: 52px; height: 52px; margin-bottom: 17px; place-items: center; border-radius: 15px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 23px; }
.material-public-panel h2 { margin: 0 0 8px; color: var(--hg-ink); font-size: 24px; font-weight: 780; }
.material-public-panel p { margin: 0 0 17px; color: var(--hg-muted); font-size: 16px; line-height: 1.55; }
.material-public-panel label { display: block; margin-bottom: 7px; color: var(--hg-ink); font-size: 15px; font-weight: 720; }
.material-public-panel input { width: 100%; height: 48px; padding: 0 13px; border: 1px solid var(--hg-border); border-radius: 12px; outline: 0; color: var(--hg-muted); background: var(--hg-bg); font: inherit; font-size: 15px; }
.material-public-panel input:focus { border-color: var(--hg-primary); box-shadow: 0 0 0 4px rgba(91, 76, 240, .13); }
.material-public-panel__actions { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 9px; margin-top: 10px; }
.material-public-panel__actions .btn { display: inline-flex; min-height: 48px; gap: 8px; align-items: center; justify-content: center; font-size: 15px; }
.material-public-panel__actions .btn.is-copied { border-color: #16835b; background: #16835b; }

.material-on-page > span { display: block; margin-bottom: 9px; color: var(--hg-primary); font-size: 15px; font-weight: 820; letter-spacing: .065em; text-transform: uppercase; }
.material-on-page a { display: flex; gap: 10px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--hg-border); color: var(--hg-muted); font-size: 16px; font-weight: 690; }
.material-on-page a:last-child { border-bottom: 0; }
.material-on-page a i { width: 22px; color: var(--hg-primary); text-align: center; }
.material-on-page a:hover { color: var(--hg-primary); transform: translateX(2px); }

#lesson-content,
#verses,
#tasks,
#questions,
#files,
#student-progress { scroll-margin-top: 104px; }

.material-prose {
    color: var(--hg-ink);
    font-size: 18px;
    line-height: 1.82;
}

.material-prose > :first-child { margin-top: 0; }
.material-prose > :last-child { margin-bottom: 0; }
.material-prose p { margin: 0 0 1.35em; }
.material-prose p:empty { display: none; }
.material-prose ul,
.material-prose ol { margin: 0 0 1.4em; padding-left: 1.45em; }
.material-prose li { margin-bottom: .45em; }
.material-prose li::marker { color: var(--hg-primary); font-weight: 800; }
.material-prose strong { color: var(--hg-ink); font-weight: 780; }
.material-prose a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--hg-primary) 45%, transparent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.material-prose blockquote { margin: 1.5em 0; padding: 18px 21px; border-left: 4px solid var(--hg-primary); color: var(--hg-muted); background: var(--hg-primary-soft); }
.material-prose img { max-width: 100%; height: auto; border-radius: 16px; }
.material-prose table { width: 100%; margin: 1.5em 0; border-collapse: collapse; }
.material-prose th,
.material-prose td { padding: 12px; border: 1px solid var(--hg-border); text-align: left; }
.material-prose th { background: var(--hg-surface-2); }

.material-disclosure { margin-top: 22px; overflow: hidden; border: 1px solid var(--hg-border); border-radius: 17px; background: var(--hg-bg); }
.material-disclosure > summary { display: flex; min-height: 58px; gap: 16px; align-items: center; justify-content: space-between; padding: 13px 17px; color: var(--hg-ink); cursor: pointer; font-size: 17px; font-weight: 740; list-style: none; }
.material-disclosure > summary::-webkit-details-marker { display: none; }
.material-disclosure > summary span { display: flex; gap: 9px; align-items: center; }
.material-disclosure > summary span i { color: var(--hg-primary); font-size: 19px; }
.material-disclosure > summary > i { color: var(--hg-muted); transition: transform .2s ease; }
.material-disclosure[open] > summary > i { transform: rotate(180deg); }
.material-disclosure__content { padding: 20px; border-top: 1px solid var(--hg-border); background: var(--hg-surface); }
.material-video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.material-video-grid iframe { border: 0; border-radius: 14px; }

.material-content-section { margin-top: 34px; padding-top: 31px; border-top: 1px solid var(--hg-border); }
.material-content-section__heading { margin-bottom: 20px; }
.material-content-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: material-items; }
.material-content-list > li { position: relative; min-width: 0; padding: 17px 18px 17px 60px; border: 1px solid var(--hg-border); border-radius: 15px; color: var(--hg-ink); background: var(--hg-bg); font-size: 17px; line-height: 1.68; counter-increment: material-items; }
.material-content-list > li::before { position: absolute; top: 17px; left: 17px; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: var(--hg-primary); background: var(--hg-primary-soft); content: counter(material-items); font-size: 15px; font-weight: 820; }
.material-content-list--verses > li > strong { display: block; margin-bottom: 6px; color: var(--hg-primary); font-size: 18px; }
.material-content-list--verses > li > div { color: var(--hg-ink); font-style: italic; }
.material-content-list details { margin-top: 13px; }
.material-content-list details summary { display: inline-flex; gap: 7px; align-items: center; color: var(--hg-primary); cursor: pointer; font-size: 15px; font-weight: 740; list-style: none; }
.material-content-list details summary::-webkit-details-marker { display: none; }
.material-content-list details p { margin: 12px 0 0; padding: 14px 16px; border-left: 3px solid var(--hg-primary); color: var(--hg-muted); background: var(--hg-primary-soft); }
.material-file-list--inline { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.material-progress-section { margin-top: 28px; padding: 30px; border: 1px solid var(--hg-border); border-radius: 24px; background: var(--hg-surface); box-shadow: 0 7px 26px rgba(26, 32, 56, .045); }
.material-section-heading--progress { margin-bottom: 23px; }
.material-student-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.material-student-card { min-width: 0; padding: 18px; border: 1px solid var(--hg-border); border-radius: 18px; background: var(--hg-bg); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.material-student-card:hover { border-color: color-mix(in srgb, var(--hg-primary) 35%, var(--hg-border)); box-shadow: var(--hg-shadow-sm); transform: translateY(-2px); }
.material-student-card.is-complete { border-color: rgba(32, 168, 117, .3); background: color-mix(in srgb, rgba(32, 168, 117, .08) 60%, var(--hg-bg)); }
.material-student-card__top { display: flex; min-width: 0; gap: 13px; align-items: flex-start; justify-content: space-between; }
.material-student-card__identity { display: flex; min-width: 0; flex: 1; gap: 13px; align-items: center; color: var(--hg-ink); }
.material-student-card__identity:hover { color: var(--hg-primary); }
.material-student-card__identity .member-identity { width: 100%; }
.material-student-card__identity .member-identity__name { font-size: 17px; }
.material-student-card__identity .member-identity__subtitle { margin-top: 4px; font-size: 15px; }
.material-student-card__fallback { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border-radius: 14px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 20px; }
.material-student-card__identity > span:last-child strong,
.material-student-card__identity > span:last-child small { display: block; }
.material-student-card__identity > span:last-child strong { font-size: 17px; }
.material-student-card__identity > span:last-child small { margin-top: 4px; color: var(--hg-muted); font-size: 15px; }
.material-student-card__status { display: inline-flex; flex: 0 0 auto; gap: 6px; align-items: center; padding: 7px 10px; border-radius: 999px; color: var(--hg-muted); background: var(--hg-surface-2); font-size: 15px; font-weight: 720; }
.material-student-card.is-complete .material-student-card__status { color: #16835b; background: rgba(32, 168, 117, .12); }
.material-student-card__date { display: flex; gap: 7px; align-items: center; margin: 15px 0 0; color: #16835b; font-size: 15px; }
.material-student-card__footer { display: flex; min-height: 46px; gap: 10px; align-items: center; justify-content: space-between; margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--hg-border); }
.material-student-card__contacts { display: flex; gap: 7px; }
.material-student-card__contacts:empty { display: none; }
.material-student-card__contacts a { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--hg-border); border-radius: 12px; color: var(--hg-muted); background: var(--hg-surface); font-size: 17px; }
.material-student-card__contacts a:hover { border-color: var(--hg-primary); color: var(--hg-primary); background: var(--hg-primary-soft); }
.material-progress-button { display: inline-flex; min-height: 42px; gap: 7px; align-items: center; justify-content: center; margin-left: auto; padding: 9px 13px; border: 1px solid var(--hg-primary); border-radius: 12px; color: #fff; background: var(--hg-primary); font: inherit; font-size: 15px; font-weight: 750; cursor: pointer; }
.material-progress-button:hover { border-color: var(--hg-primary-strong); background: var(--hg-primary-strong); }
.material-progress-button.is-cancel { border-color: var(--hg-border); color: var(--hg-muted); background: var(--hg-surface); }
.material-progress-button.is-cancel:hover { border-color: #c13b4d; color: #c13b4d; background: rgba(193, 59, 77, .08); }
.material-progress-button:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(91, 76, 240, .16); }
.material-progress-empty { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 22px; border: 1px solid var(--hg-border); border-radius: 18px; background: var(--hg-bg); }
.material-progress-empty > span { display: grid; width: 60px; height: 60px; place-items: center; border-radius: 17px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 24px; }
.material-progress-empty h3 { margin: 0 0 5px; color: var(--hg-ink); font-size: 21px; }
.material-progress-empty p { margin: 0; color: var(--hg-muted); font-size: 16px; }

.material-step-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.material-step-navigation__item { display: flex; min-width: 0; gap: 15px; align-items: center; padding: 20px; border: 1px solid var(--hg-border); border-radius: 19px; color: var(--hg-ink); background: var(--hg-surface); box-shadow: 0 7px 24px rgba(26, 32, 56, .04); }
.material-step-navigation__item:hover { border-color: color-mix(in srgb, var(--hg-primary) 42%, var(--hg-border)); color: var(--hg-primary); box-shadow: var(--hg-shadow-sm); transform: translateY(-2px); }
.material-step-navigation__item > i { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; border-radius: 14px; color: var(--hg-primary); background: var(--hg-primary-soft); font-size: 19px; }
.material-step-navigation__item span,
.material-step-navigation__item small,
.material-step-navigation__item strong { display: block; min-width: 0; }
.material-step-navigation__item small { margin-bottom: 4px; color: var(--hg-muted); font-size: 15px; }
.material-step-navigation__item strong { overflow: hidden; color: inherit; font-size: 17px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.material-step-navigation__item.is-next { justify-content: flex-end; text-align: right; }

@media (max-width: 1199.98px) {
    .material-inner-hero__grid { grid-template-columns: minmax(0, 1fr) 310px; gap: 34px; }
    .material-collection-layout { grid-template-columns: minmax(0, 1fr) 310px; }
    .material-detail-layout { grid-template-columns: minmax(0, 1fr) 310px; }
    .material-reading-card { padding-right: 30px; padding-left: 30px; }
}

@media (max-width: 991.98px) {
    .material-inner-hero__grid { grid-template-columns: 1fr; gap: 28px; }
    .material-inner-hero__summary { max-width: 560px; padding: 21px 0 0; border-top: 1px solid var(--hg-border); border-left: 0; }
    .material-collection-layout,
    .material-detail-layout { grid-template-columns: 1fr; }
    .material-collection-sidebar,
    .material-detail-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .material-student-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .material-collection-page,
    .material-detail-page { margin-top: 68px; padding: 22px 0 68px; }
    .material-inner-hero { padding: 20px 21px 28px; border-radius: 22px; }
    .material-inner-hero::after { top: -240px; right: -245px; }
    .material-breadcrumb { margin: 0 -4px 24px; padding: 0 4px 7px; font-size: 15px; }
    .material-inner-hero h1 { font-size: 36px; }
    .material-inner-hero__copy > p { font-size: 17px; line-height: 1.58; }
    .material-inner-hero__tags a { font-size: 15px; }
    .material-inner-hero__summary { max-width: none; }
    .material-collection-layout,
    .material-detail-layout { gap: 18px; margin-top: 18px; }
    .material-collection-main,
    .material-reading-card,
    .material-progress-section { padding: 22px 18px; border-radius: 20px; }
    .material-collection-intro { margin-bottom: 24px; padding: 16px; }
    .material-section-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
    .material-section-heading h2 { font-size: 27px; }
    .material-section-heading > p { font-size: 16px; text-align: left; }
    .material-lesson-card { grid-template-columns: 48px minmax(0, 1fr) 42px; gap: 12px; padding: 15px 13px; border-radius: 15px; }
    .material-lesson-card__number { width: 48px; height: 48px; border-radius: 13px; font-size: 18px; }
    .material-lesson-card__content > strong { font-size: 18px; }
    .material-lesson-card__meta { align-items: flex-start; flex-direction: column; gap: 6px; }
    .material-lesson-card__meta > span { font-size: 15px; }
    .material-lesson-card__arrow { width: 42px; height: 42px; border-radius: 12px; }
    .material-collection-sidebar,
    .material-detail-sidebar { grid-template-columns: 1fr; }
    .material-files-panel,
    .material-guide-panel,
    .material-public-panel,
    .material-on-page { padding: 20px; border-radius: 19px; }
    .material-reading-card__heading { margin-bottom: 24px; }
    .material-reading-card__heading h2,
    .material-content-section__heading h2 { font-size: 23px; }
    .material-prose { font-size: 17px; line-height: 1.76; }
    .material-disclosure > summary { font-size: 16px; }
    .material-video-grid,
    .material-file-list--inline { grid-template-columns: 1fr; }
    .material-content-section { margin-top: 28px; padding-top: 27px; }
    .material-content-list > li { padding: 16px 15px 16px 54px; font-size: 16px; }
    .material-content-list > li::before { top: 15px; left: 14px; }
    .material-student-card { padding: 16px; }
    .material-student-card__top { align-items: flex-start; flex-direction: column; }
    .material-student-card__status { align-self: flex-start; }
    .material-student-card__footer { align-items: stretch; flex-direction: column; }
    .material-student-card__contacts { order: 2; }
    .material-progress-button { width: 100%; margin-left: 0; }
    .material-progress-empty { grid-template-columns: 52px minmax(0, 1fr); padding: 18px; }
    .material-progress-empty > span { width: 52px; height: 52px; }
    .material-progress-empty .btn { grid-column: 1 / -1; width: 100%; }
    .material-step-navigation { grid-template-columns: 1fr; gap: 11px; }
    .material-step-navigation > span:empty { display: none; }
    .material-step-navigation__item { padding: 17px; border-radius: 17px; }
    .material-step-navigation__item strong { white-space: normal; }
}