/* =============================================================================
   USER PROFILE PAGE
   Social media-style public profile — cover, header, stats bar, tabs, feed.
   ============================================================================= */

/* ── Page wrapper ─────────────────────────────────────────────────────────── */

.geekly-profile {
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 80px;
}


/* -- Hero card (cover + avatar + identity, all in one contained card) -------- */

.geekly-profile__hero-card {
    background-color: var(--clr-bg-surface);
    border: 1px solid color-mix(in srgb, var(--clr-border) 160%, transparent);
    border-radius: 12px;
    /* No overflow:hidden — it would clip the avatar overlap */
    margin-top: 8px;
    margin-bottom: 16px;
    position: relative;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
}

/* Cover photo -- top of the hero card */
.geekly-profile__cover {
    position: relative;
    height: clamp(120px, 14vw, 160px);
    background-color: #0a0608;
    background-image:
        radial-gradient(ellipse 70% 100% at 80% 60%, rgba(230, 57, 70, 0.22) 0%, transparent 65%),
        radial-gradient(ellipse 50% 80% at 20% 40%, rgba(155, 89, 182, 0.12) 0%, transparent 60%),
        linear-gradient(135deg, #0d0b10 0%, #160d0e 50%, #0d0b10 100%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

/* Edit / Follow button -- top right of cover */
.geekly-profile__hero-action-btn {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 2;
    text-decoration: none;
}

/* Hero body -- below the cover, inside the card */
.geekly-profile__hero-body {
    padding: 0 24px 20px 32px; /* extra left padding so avatar ring never clips */
    position: relative;
    overflow: visible; /* allow avatar ring to overflow the card edge */
}

/* Avatar row: avatar left, edit button right — same baseline */
.geekly-profile__hero-avatar-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 14px;
}

/* Edit Profile link -- aligned with avatar bottom */
.geekly-profile__hero-edit-link {
    flex-shrink: 0;
    padding-bottom: 4px; /* align with avatar bottom */
    z-index: 2;
    text-decoration: none;
}

/* Avatar wrap -- pulls up to overlap the cover bottom. */
.geekly-profile__hero-body .geekly-profile__avatar-wrap {
    margin-top: -52px;
    position: relative;
    z-index: 2;
    display: inline-block;
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    overflow: visible;
}

/* Avatar image and wrap scale together */
.geekly-profile__hero-body .geekly-profile__avatar {
    width: 100%;
    height: 100%;
}

/* Avatar image */
.geekly-profile__avatar {
    width: 110px;
    height: 110px;
    border-radius: 20px;
    object-fit: cover;
    display: block;
    background-color: var(--clr-bg-elevated);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    /* Gradient ring: pad + outline technique */
    padding: 3px;
    background-clip: content-box;
    outline: 3px solid transparent;
    border: none;
}

/* Gradient ring wrapper — scales with the wrap at all zoom levels */
.geekly-profile__avatar-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 3px;
    background: linear-gradient(135deg, var(--clr-purple) 0%, var(--clr-brand) 50%, #E6A817 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
    pointer-events: none;
}

/* Level badge pill */
.geekly-profile__level-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    height: 22px;
    min-width: 38px;
    padding: 0 7px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--clr-brand) 0%, #a01020 100%);
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--clr-bg-surface);
    user-select: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    z-index: 3; /* above the ::before gradient ring (z-index: 1) */
}

/* Legacy selectors kept for compatibility */
.geekly-profile__header-wrap,
.geekly-profile__header,
.geekly-profile__avatar-row {
    display: block;
}

/* Header actions — sits at the bottom of the avatar row, right side */
.geekly-profile__header-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
}

/* Follow button */
.geekly-profile__follow-btn--following {
    opacity: 0.85;
}

.geekly-profile__follow-btn--following:hover {
    opacity: 1;
}

/* Identity block */
.geekly-profile__identity {
    min-width: 0;
}

.geekly-profile__name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.geekly-profile__name {
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 3vw, 1.75rem);
    font-weight: 700;
    color: var(--clr-text-primary);
    margin: 0;
    line-height: 1.15;
}

.geekly-profile__role-badge {
    font-family: var(--font-display);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    flex-shrink: 0;
}

.geekly-profile__role-badge--administrator {
    color: var(--clr-brand);
    background-color: rgba(230, 57, 70, 0.12);
    border: 1px solid rgba(230, 57, 70, 0.25);
}

.geekly-profile__role-badge--editor {
    color: var(--clr-warning);
    background-color: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.geekly-profile__role-badge--author {
    color: #3B82F6;
    background-color: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.geekly-profile__role-badge--contributor {
    color: var(--clr-success);
    background-color: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.geekly-profile__handle {
    font-size: 0.875rem;
    color: var(--clr-text-dim);
    margin-bottom: 0;
}

.geekly-profile__bio {
    font-size: 0.9375rem;
    color: var(--clr-text-muted);
    line-height: 1.55;
    margin: 10px 0 0;
    max-width: 560px;
}

.geekly-profile__meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
    margin-bottom: 0;
}

.geekly-profile__join-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8125rem;
    color: var(--clr-text-dim);
}

.geekly-profile__join-date svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Social links */
.geekly-profile__socials {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}

.geekly-profile__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: var(--clr-bg-raised);
    border: 1px solid var(--clr-border);
    color: var(--clr-text-muted);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.geekly-profile__social-link svg {
    width: 15px;
    height: 15px;
}

.geekly-profile__social-link:hover {
    color: var(--clr-text-primary);
    border-color: var(--clr-text-dim);
    background-color: var(--clr-bg-active);
}

/* Large social link variant — used on the profile hero */
.geekly-profile__social-link--lg {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: var(--clr-bg-raised);
    border: 1px solid var(--clr-border);
}

.geekly-profile__social-link--lg svg {
    width: 18px;
    height: 18px;
}

.geekly-profile__social-link--lg:hover {
    background-color: var(--clr-bg-active);
    border-color: var(--clr-text-dim);
    color: var(--clr-text-primary);
}

/* Counts */
.geekly-profile__counts {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.geekly-profile__count-btn {
    display: flex;
    align-items: baseline;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.geekly-profile__count-btn--static {
    cursor: default;
}

.geekly-profile__count-btn:hover:not(.geekly-profile__count-btn--static) {
    opacity: 0.75;
}

.geekly-profile__count-num {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--clr-text-primary);
    line-height: 1;
}

.geekly-profile__count-label {
    font-size: 0.875rem;
    color: var(--clr-text-dim);
}

.geekly-profile__counts-sep {
    color: var(--clr-text-dim);
    font-size: 0.875rem;
    user-select: none;
}

.geekly-profile__handle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

/* ── Gamification stats bar ───────────────────────────────────────────────── */

.geekly-profile__stats-bar {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    background-color: var(--clr-bg-surface);
    border: 1px solid var(--clr-border);
    border-radius: 10px;
    margin: 16px 0 0;
    overflow: hidden;
}

.geekly-profile__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 14px 16px;
    text-align: center;
    flex: 1;
    min-width: 72px;
    transition: background-color 0.15s ease;
}

.geekly-profile__stat:hover {
    background-color: var(--clr-bg-raised);
}

.geekly-profile__stat-sep {
    width: 1px;
    background-color: var(--clr-border);
    flex-shrink: 0;
    align-self: stretch;
}

.geekly-profile__stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--clr-text-dim);
    margin-bottom: 2px;
    flex-shrink: 0;
}

.geekly-profile__stat-icon svg {
    width: 18px;
    height: 18px;
}

.geekly-profile__stat-value {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--clr-text-primary);
    line-height: 1;
}

.geekly-profile__stat-label {
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-text-dim);
    white-space: nowrap;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */

.geekly-profile__body {
    margin-top: 20px;
}

.geekly-profile__tabs {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--clr-border);
    margin-bottom: 20px;
    overflow-x: auto;
    scrollbar-width: none;
}

.geekly-profile__tabs::-webkit-scrollbar {
    display: none;
}

.geekly-profile__tab {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-text-dim);
    text-decoration: none;
    padding: 10px 16px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    flex-shrink: 0;
}

.geekly-profile__tab:hover {
    color: var(--clr-text-primary);
}

.geekly-profile__tab--active {
    color: var(--clr-text-primary);
    border-bottom-color: var(--clr-brand);
}

/* ── Content layout ───────────────────────────────────────────────────────── */

.geekly-profile__content-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 900px) {
    .geekly-profile__content-wrap {
        grid-template-columns: 1fr 280px;
        align-items: start;
    }
}

.geekly-profile__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Compose box ──────────────────────────────────────────────────────────── */

.geekly-profile__compose {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px;
    background-color: var(--clr-bg-surface);
    border: 1px solid var(--clr-border);
    border-radius: 10px;
    transition: border-color 0.15s ease;
}

.geekly-profile__compose:focus-within {
    border-color: var(--clr-text-dim);
}

.geekly-profile__compose-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--clr-border);
}

.geekly-profile__compose-input-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.geekly-profile__compose-input {
    width: 100%;
    background: none;
    border: none;
    color: var(--clr-text-primary);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.5;
    resize: none;
    overflow: hidden;
    min-height: 40px;
    padding: 0;
}

.geekly-profile__compose-input:focus {
    outline: none;
}

.geekly-profile__compose-input::placeholder {
    color: var(--clr-text-dim);
}

.geekly-profile__compose-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--clr-border);
    padding-top: 8px;
}

/* hidden attribute support */
.geekly-profile__compose-footer[hidden] {
    display: none !important;
}

.geekly-profile__compose-count {
    font-size: 0.75rem;
    color: var(--clr-text-dim);
    font-family: var(--font-display);
    font-weight: 700;
    transition: color 0.15s ease;
}

.geekly-profile__compose-count--warn {
    color: var(--clr-warning);
}

.geekly-profile__compose-count--danger {
    color: var(--clr-brand);
}

/* ── Feed ─────────────────────────────────────────────────────────────────── */

.geekly-profile__feed {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.geekly-profile__feed-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background-color: var(--clr-bg-raised);
    border-radius: 10px;
    transition: background-color 0.12s ease;
}

.geekly-profile__feed-item:hover {
    background-color: var(--clr-bg-hover);
}

.geekly-profile__feed-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    color: #ffffff;
}

.geekly-profile__feed-icon svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.geekly-profile__feed-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.geekly-profile__feed-item-text {
    font-size: 0.9rem;
    color: var(--clr-text-secondary);
    line-height: 1.5;
    margin: 0;
}

.geekly-profile__feed-item-text a {
    color: var(--clr-text-primary);
    text-decoration: none;
}

.geekly-profile__feed-item-text a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.geekly-profile__feed-item-time {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
}

.geekly-profile__posts-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.geekly-profile__post-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background-color: var(--clr-bg-raised);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.12s ease;
}

.geekly-profile__post-item:hover {
    background-color: var(--clr-bg-hover);
}

.geekly-profile__post-thumb {
    width: 72px;
    height: 52px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background-color: var(--clr-bg-elevated);
}

.geekly-profile__post-thumb--placeholder {
    background-color: var(--clr-bg-elevated);
    border: 1px solid var(--clr-border);
}

.geekly-profile__post-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.geekly-profile__post-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.geekly-profile__post-type {
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-brand);
}

.geekly-profile__post-cat {
    font-size: 0.6875rem;
    color: var(--clr-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.geekly-profile__post-cat::before {
    content: '·';
    margin-right: 8px;
    color: var(--clr-text-dim);
}

.geekly-profile__post-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--clr-text-primary);
    margin: 0;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.geekly-profile__post-item:hover .geekly-profile__post-title {
    color: var(--clr-brand);
}

.geekly-profile__post-date {
    font-size: 0.75rem;
    color: var(--clr-text-dim);
}

.geekly-profile__feed-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 56px 24px;
    text-align: center;
    color: var(--clr-text-dim);
    font-size: 0.9375rem;
}

.geekly-profile__feed-empty svg {
    width: 36px;
    height: 36px;
    opacity: 0.25;
}

.geekly-profile__feed-empty p {
    margin: 0;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */

.geekly-profile__sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 900px) {
    .geekly-profile__sidebar {
        position: sticky;
        top: calc(var(--topbar-height) + 20px);
    }
}

/* Pinned panel */
.geekly-profile__pinned {
    background-color: var(--clr-bg-surface);
    border: 1px solid var(--clr-border);
    border-radius: 10px;
    overflow: hidden;
}

.geekly-profile__pinned-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--clr-border);
}

.geekly-profile__pinned-title svg {
    width: 13px;
    height: 13px;
    color: var(--clr-brand);
    flex-shrink: 0;
}

.geekly-profile__pinned-edit {
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-text-dim);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.geekly-profile__pinned-edit:hover {
    color: var(--clr-text-primary);
    background-color: var(--clr-bg-active);
}

.geekly-profile__pinned-empty {
    padding: 24px 16px;
    font-size: 0.8125rem;
    color: var(--clr-text-dim);
    text-align: center;
}

.geekly-profile__pinned-empty p {
    margin: 0;
}

.geekly-profile__pinned-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Pinned article item */
.geekly-profile__pinned-item {
    display: flex;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--clr-bg-raised);
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

.geekly-profile__pinned-item:last-child {
    border-bottom: none;
}

.geekly-profile__pinned-item:hover {
    background-color: var(--clr-bg-raised);
}

.geekly-profile__pinned-thumb {
    width: 56px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    background-color: var(--clr-bg-active);
}

.geekly-profile__pinned-item-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--clr-text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pinned info body */
.geekly-profile__pinned-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
}

.geekly-profile__pinned-cat {
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-brand);
}

.geekly-profile__pinned-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--clr-text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.geekly-profile__pinned-item:hover .geekly-profile__pinned-title {
    color: var(--clr-text-primary);
}

.geekly-profile__pinned-remove {
    background: none;
    border: none;
    color: var(--clr-text-dim);
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 4px;
    flex-shrink: 0;
    align-self: flex-start;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.geekly-profile__pinned-item:hover .geekly-profile__pinned-remove {
    opacity: 1;
}

.geekly-profile__pinned-remove:hover {
    color: var(--clr-brand);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .geekly-profile__avatar-row {
        margin-top: -44px;
    }

    .geekly-profile__avatar,
    .geekly-profile__avatar-wrap {
        width: 88px;
        height: 88px;
    }

    .geekly-profile__stat {
        padding: 12px 14px;
        min-width: 60px;
    }

    .geekly-profile__stat-value {
        font-size: 1rem;
    }

    .geekly-profile__header-actions .geekly-btn {
        padding: 6px 12px;
        font-size: 0.6875rem;
    }
}


/* =============================================================================
   USER SETTINGS PAGE
   ============================================================================= */

/* ── Page wrapper ─────────────────────────────────────────────────────────── */

.geekly-settings {
    max-width: 960px;
    margin: 0 auto;
    padding-bottom: 80px;
}

/* ── Page header ──────────────────────────────────────────────────────────── */

.geekly-settings__page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--clr-border);
}

.geekly-settings__page-title {
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 3vw, 1.75rem);
    font-weight: 700;
    color: var(--clr-text-primary);
    margin: 0 0 2px;
    line-height: 1.15;
}

.geekly-settings__page-sub {
    font-size: 0.875rem;
    color: var(--clr-text-dim);
    margin: 0;
}

/* ── Layout: sidebar nav + content ───────────────────────────────────────── */

.geekly-settings__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
}

@media (min-width: 768px) {
    .geekly-settings__layout {
        grid-template-columns: 200px 1fr;
        gap: 28px;
    }
}

/* ── Sidebar nav ──────────────────────────────────────────────────────────── */

.geekly-settings__nav {
    background-color: var(--clr-bg-surface);
    border: 1px solid var(--clr-border);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
}

@media (min-width: 768px) {
    .geekly-settings__nav {
        flex-direction: column;
        position: sticky;
        top: calc(var(--topbar-height) + 20px);
    }
}

.geekly-settings__nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--clr-text-muted);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}

@media (max-width: 767px) {
    .geekly-settings__nav-item {
        border-left: none;
        border-bottom: 2px solid transparent;
        padding: 8px 12px;
        font-size: 0.75rem;
    }
}

.geekly-settings__nav-item:hover {
    color: var(--clr-text-primary);
    background-color: var(--clr-bg-raised);
}

.geekly-settings__nav-item--active {
    color: var(--clr-text-primary);
    background-color: var(--clr-bg-raised);
    border-left-color: var(--clr-brand);
}

@media (max-width: 767px) {
    .geekly-settings__nav-item--active {
        border-left-color: transparent;
        border-bottom-color: var(--clr-brand);
    }
}

.geekly-settings__nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--clr-text-dim);
}

.geekly-settings__nav-item--active .geekly-settings__nav-icon {
    color: var(--clr-brand);
}

.geekly-settings__nav-icon svg {
    width: 100%;
    height: 100%;
}

/* ── Settings content ─────────────────────────────────────────────────────── */

.geekly-settings__content {
    min-width: 0;
}

/* ── Section ──────────────────────────────────────────────────────────────── */

.geekly-settings__section {
    background-color: var(--clr-bg-surface);
    border: 1px solid var(--clr-border);
    border-top: 3px solid var(--clr-brand);
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.geekly-settings__section-header {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--clr-border);
}

.geekly-settings__section-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--clr-text-primary);
    margin: 0 0 4px;
}

.geekly-settings__section-desc {
    font-size: 0.875rem;
    color: var(--clr-text-dim);
    margin: 0;
}

/* ── Field ────────────────────────────────────────────────────────────────── */

.geekly-settings__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.geekly-settings__label {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.geekly-settings__input,
.geekly-settings__textarea,
.geekly-settings__select {
    background-color: var(--clr-bg-raised);
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    color: var(--clr-text-primary);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    padding: 9px 12px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    width: 100%;
    box-sizing: border-box;
cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23484F58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 36px;
}

.geekly-settings__textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.55;
}

.geekly-settings__input:focus,
.geekly-settings__textarea:focus,
.geekly-settings__select:focus {
    outline: none;
    border-color: var(--clr-brand);
    box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.12);
}

.geekly-settings__input--readonly {
    opacity: 0.6;
    cursor: not-allowed;
}

.geekly-settings__hint {
    font-size: 0.8125rem;
    color: var(--clr-text-dim);
    margin: 0;
    line-height: 1.5;
}

.geekly-settings__hint a {
    color: var(--clr-brand);
    text-decoration: none;
}

.geekly-settings__hint a:hover {
    text-decoration: underline;
}

.geekly-settings__hint--warn {
    color: var(--clr-brand);
}

/* Input with prefix addon */
.geekly-settings__input-with-addon {
    display: flex;
    align-items: center;
    background-color: var(--clr-bg-raised);
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.geekly-settings__input-with-addon:focus-within {
    border-color: var(--clr-brand);
    box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.12);
}

.geekly-settings__input-addon {
    padding: 9px 10px 9px 12px;
    font-size: 0.875rem;
    color: var(--clr-text-dim);
    background-color: var(--clr-bg-active);
    border-right: 1px solid var(--clr-border);
    white-space: nowrap;
    flex-shrink: 0;
}

.geekly-settings__input-with-addon .geekly-settings__input {
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    flex: 1;
}

.geekly-settings__input-with-addon .geekly-settings__input:focus {
    box-shadow: none;
}

/* Field footer (bio count) */
.geekly-settings__field-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.geekly-settings__char-count {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--clr-text-dim);
    flex-shrink: 0;
    transition: color var(--transition-fast);
}

.geekly-settings__char-count--warn { color: var(--clr-warning); }
.geekly-settings__char-count--danger { color: var(--clr-brand); }

/* ── Avatar field ─────────────────────────────────────────────────────────── */

.geekly-settings__field--avatar {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
}

.geekly-settings__avatar-img-wrap {
    position: relative;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
}

.geekly-settings__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--clr-border);
    display: block;
    transition: filter 0.2s ease;
}

.geekly-settings__avatar-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 0;
}

.geekly-settings__avatar-actions {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Button row inside avatar actions */
.geekly-settings__avatar-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Settings action buttons */
.geekly-settings__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px solid var(--clr-border);
    background: var(--clr-bg-raised);
    color: var(--clr-text-primary);
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}

.geekly-settings__btn:hover {
    background: var(--clr-bg-active);
    border-color: var(--clr-text-dim);
    color: var(--clr-text-primary);
}

.geekly-settings__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.geekly-settings__btn--danger {
    border-color: rgba(230,57,70,0.3);
    color: var(--clr-brand);
}

.geekly-settings__btn--danger:hover {
    background: rgba(230,57,70,0.1);
    border-color: var(--clr-brand);
    color: var(--clr-brand);
}

/* Error hint */
.geekly-settings__hint--error {
    color: var(--clr-brand);
}

/* ── Banner preview ───────────────────────────────────────────────────────── */

.geekly-settings__banner-preview {
    height: 120px;
    border-radius: 8px;
    background-color: var(--clr-bg-elevated);
    background-size: cover;
    background-position: center;
    border: 1px solid var(--clr-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.geekly-settings__banner-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--clr-text-dim);
    font-size: 0.8125rem;
}

.geekly-settings__banner-placeholder svg {
    width: 28px;
    height: 28px;
    opacity: 0.4;
}

.geekly-settings__banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Toggle rows (notifications) ──────────────────────────────────────────── */

.geekly-settings__toggle-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    overflow: hidden;
}

.geekly-settings__group-title {
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-text-dim);
    padding: 10px 14px;
    background-color: var(--clr-bg-raised);
    border-bottom: 1px solid var(--clr-border);
    margin: 0;
}

.geekly-settings__toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--clr-bg-raised);
    transition: background-color var(--transition-fast);
}

.geekly-settings__toggle-row:last-child {
    border-bottom: none;
}

.geekly-settings__toggle-row:hover {
    background-color: var(--clr-bg-raised);
}

.geekly-settings__toggle-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.geekly-settings__toggle-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--clr-text-primary);
}

.geekly-settings__toggle-desc {
    font-size: 0.8125rem;
    color: var(--clr-text-dim);
}

/* Toggle switch */
.geekly-settings__toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.geekly-settings__toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.geekly-settings__toggle-track {
    display: block;
    width: 40px;
    height: 22px;
    background: var(--clr-border);
    border-radius: 11px;
    position: relative;
    transition: background 0.2s ease;
}

.geekly-settings__toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: var(--clr-text-dim);
    border-radius: 50%;
    transition: transform 0.2s ease, background 0.2s ease;
}

.geekly-settings__toggle input:checked + .geekly-settings__toggle-track {
    background: rgba(230, 57, 70, 0.25);
    border: 1px solid rgba(230, 57, 70, 0.4);
}

.geekly-settings__toggle input:checked + .geekly-settings__toggle-track::after {
    transform: translateX(18px);
    background: var(--clr-brand);
}

/* ── Theme picker ─────────────────────────────────────────────────────────── */

.geekly-settings__theme-picker {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.geekly-settings__theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 20px;
    background-color: var(--clr-bg-raised);
    border: 2px solid var(--clr-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
    min-width: 80px;
}

.geekly-settings__theme-option:hover {
    border-color: var(--clr-text-dim);
    background-color: var(--clr-bg-active);
}

.geekly-settings__theme-option--active {
    border-color: var(--clr-brand);
    background-color: rgba(230, 57, 70, 0.06);
}

.geekly-settings__theme-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.geekly-settings__theme-label {
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.geekly-settings__theme-option--active .geekly-settings__theme-label {
    color: var(--clr-brand);
}

/* ── Actions row ──────────────────────────────────────────────────────────── */

.geekly-settings__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
    border-top: 1px solid var(--clr-border);
}

.geekly-settings__save-notice {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--clr-success);
}

.geekly-settings__save-notice[hidden] {
    display: none;
}

/* ── Divider ──────────────────────────────────────────────────────────────── */

.geekly-settings__divider {
    height: 1px;
    background-color: var(--clr-border);
    margin: 4px 0;
}

/* ── Action rows (sign out, delete) ───────────────────────────────────────── */

.geekly-settings__action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.geekly-settings__action-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--clr-text-primary);
    display: block;
    margin-bottom: 2px;
}

.geekly-settings__action-desc {
    font-size: 0.8125rem;
    color: var(--clr-text-dim);
    margin: 0;
    line-height: 1.5;
}

/* ── Danger zone ──────────────────────────────────────────────────────────── */

.geekly-settings__danger-zone {
    background-color: rgba(230, 57, 70, 0.04);
    border: 1px solid rgba(230, 57, 70, 0.2);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.geekly-settings__danger-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-brand);
    margin: 0;
}

.geekly-settings__danger-title svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.geekly-settings__action-row--danger .geekly-settings__action-label {
    color: var(--clr-brand);
}


/* =============================================================================
   TROPHIES PAGE
   ============================================================================= */

.geekly-trophies {
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Hero header ──────────────────────────────────────────────────────────── */

.geekly-trophies__hero {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 28px 32px;
    background-color: var(--clr-bg-surface);
    border: 1px solid var(--clr-border);
    border-top: 3px solid #E6A817; /* gold — trophies accent */
    border-radius: 12px;
    flex-wrap: wrap;
}

.geekly-trophies__hero-icon {
    font-size: 2.5rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.geekly-trophies__hero-text {
    flex: 1;
    min-width: 200px;
}

.geekly-trophies__hero-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--clr-text-primary);
    margin: 0 0 6px;
    line-height: 1.15;
}

.geekly-trophies__hero-desc {
    font-size: 0.9375rem;
    color: var(--clr-text-dim);
    margin: 0;
    line-height: 1.55;
    max-width: 520px;
}

.geekly-trophies__hero-progress {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
    min-width: 140px;
}

.geekly-trophies__hero-count {
    display: flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
}

.geekly-trophies__hero-earned {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: #E6A817;
}

.geekly-trophies__hero-sep {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--clr-text-dim);
}

.geekly-trophies__hero-total {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--clr-text-muted);
}

.geekly-trophies__hero-bar {
    width: 140px;
    height: 6px;
    background-color: var(--clr-bg-active);
    border-radius: 3px;
    overflow: hidden;
}

.geekly-trophies__hero-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #E6A817 0%, #f0c040 100%);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.geekly-trophies__hero-pct {
    font-size: 0.75rem;
    color: var(--clr-text-dim);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* ── Category filter tabs ─────────────────────────────────────────────────── */

.geekly-trophies__tabs {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--clr-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.geekly-trophies__tabs::-webkit-scrollbar {
    display: none;
}

.geekly-trophies__tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--clr-text-dim);
    text-decoration: none;
    padding: 10px 16px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.geekly-trophies__tab:hover {
    color: var(--clr-text-primary);
}

.geekly-trophies__tab--active {
    color: var(--clr-text-primary);
    border-bottom-color: #E6A817;
}

.geekly-trophies__tab-count {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 1px 6px;
    border-radius: 10px;
    background-color: var(--clr-bg-active);
    color: var(--clr-text-dim);
}

.geekly-trophies__tab--active .geekly-trophies__tab-count {
    background-color: rgba(230, 168, 23, 0.15);
    color: #E6A817;
}

/* ── Trophy grid ──────────────────────────────────────────────────────────── */

.geekly-trophies__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 640px) {
    .geekly-trophies__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 900px) {
    .geekly-trophies__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ── Trophy card ──────────────────────────────────────────────────────────── */

.geekly-trophies__card {
    position: relative;
    background-color: var(--clr-bg-surface);
    border: 1px solid var(--clr-border);
    border-radius: 10px;
    padding: 20px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.geekly-trophies__card:hover {
    border-color: var(--clr-text-dim);
    transform: translateY(-2px);
}

.geekly-trophies__card--earned {
    border-color: rgba(230, 168, 23, 0.3);
    background: linear-gradient(160deg, var(--clr-bg-surface) 0%, color-mix(in srgb, #E6A817 4%, var(--clr-bg-surface)) 100%);
}

.geekly-trophies__card--earned:hover {
    border-color: rgba(230, 168, 23, 0.6);
}

.geekly-trophies__card--locked {
    opacity: 0.7;
}

.geekly-trophies__card--locked:hover {
    opacity: 1;
}

/* Rarity badge */
.geekly-trophies__rarity {
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: var(--font-display);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--rarity-color);
    background-color: color-mix(in srgb, var(--rarity-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--rarity-color) 30%, transparent);
}

/* Icon wrap */
.geekly-trophies__icon-wrap {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--clr-bg-raised);
    border: 2px solid var(--clr-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 4px;
    transition: border-color 0.15s ease;
}

.geekly-trophies__icon-wrap--earned {
    border-color: color-mix(in srgb, var(--rarity-color) 50%, transparent);
    background-color: color-mix(in srgb, var(--rarity-color) 8%, var(--clr-bg-raised));
    box-shadow: 0 0 16px color-mix(in srgb, var(--rarity-color) 20%, transparent);
}

.geekly-trophies__icon {
    font-size: 1.75rem;
    line-height: 1;
}

/* Earned checkmark overlay */
.geekly-trophies__earned-check {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #E6A817;
    border: 2px solid var(--clr-bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
}

.geekly-trophies__earned-check svg {
    width: 10px;
    height: 10px;
}

/* Name + description */
.geekly-trophies__name {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--clr-text-primary);
    margin: 0;
    line-height: 1.2;
}

.geekly-trophies__desc {
    font-size: 0.8125rem;
    color: var(--clr-text-muted);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

/* Footer: earned label / progress / login hint */
.geekly-trophies__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--clr-bg-raised);
}

.geekly-trophies__earned-label {
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #E6A817;
}

.geekly-trophies__progress-bar {
    width: 100%;
    height: 4px;
    background-color: var(--clr-bg-active);
    border-radius: 2px;
    overflow: hidden;
}

.geekly-trophies__progress-fill {
    height: 100%;
    border-radius: 2px;
    background-color: var(--rarity-color);
    transition: width 0.4s ease;
}

.geekly-trophies__progress-label {
    font-size: 0.6875rem;
    color: var(--clr-text-dim);
    font-family: var(--font-display);
    font-weight: 700;
}

.geekly-trophies__login-hint {
    font-size: 0.6875rem;
    color: var(--clr-text-dim);
}

.geekly-trophies__login-hint a {
    color: var(--clr-brand);
    text-decoration: none;
}

.geekly-trophies__login-hint a:hover {
    text-decoration: underline;
}

.geekly-trophies__member-count {
    font-size: 0.625rem;
    color: var(--clr-text-dim);
    font-family: var(--font-display);
    letter-spacing: 0.04em;
}

.geekly-trophies__xp-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-success);
    background: color-mix(in srgb, #10B981 10%, transparent);
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 2px;
}

.geekly-trophies__card--earned .geekly-trophies__xp-label {
    color: #E6A817;
    background: color-mix(in srgb, #E6A817 10%, transparent);
}

/* ── Trophy highlight (scroll-to from notification) ─────────────────────────── */
/* Spring pop: card scales up with slight overshoot then settles */
@keyframes geekly-trophy-pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.06); }
    55%  { transform: scale(0.98); }
    75%  { transform: scale(1.02); }
    100% { transform: scale(1); }
}
/* Shimmer sweep: a bright diagonal stripe crosses the card once */
@keyframes geekly-trophy-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.geekly-trophies__card--highlight {
    animation: geekly-trophy-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    border-color: rgba(230, 168, 23, 0.7);
    z-index: 1;
    overflow: hidden;
}
/* Shimmer pseudo-element sweeps across the card */
.geekly-trophies__card--highlight::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255, 220, 100, 0.22) 50%,
        rgba(255, 255, 255, 0.10) 55%,
        transparent 65%
    );
    background-size: 200% 100%;
    animation: geekly-trophy-shimmer 0.7s 0.15s ease-in-out forwards;
    pointer-events: none;
    border-radius: inherit;
}


/* ── Footer note ──────────────────────────────────────────────────────────── */

.geekly-trophies__footer-note {
    font-size: 0.875rem;
    color: var(--clr-text-dim);
    text-align: center;
    margin: 0;
}

.geekly-trophies__footer-note a {
    color: var(--clr-brand);
    text-decoration: none;
}

.geekly-trophies__footer-note a:hover {
    text-decoration: underline;
}


/* =============================================================================
   CHALLENGES PAGE
   ============================================================================= */

.geekly-challenges {
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Hero header ──────────────────────────────────────────────────────────── */

.geekly-challenges__hero {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 28px 32px;
    background-color: var(--clr-bg-surface);
    border: 1px solid var(--clr-border);
    border-top: 3px solid var(--clr-brand);
    border-radius: 12px;
    flex-wrap: wrap;
}

.geekly-challenges__hero-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(230, 57, 70, 0.12);
    border: 1px solid rgba(230, 57, 70, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--clr-brand);
    margin-top: 2px;
}

.geekly-challenges__hero-icon svg {
    width: 22px;
    height: 22px;
}

.geekly-challenges__hero-text {
    flex: 1;
    min-width: 200px;
}

.geekly-challenges__hero-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--clr-text-primary);
    margin: 0 0 6px;
    line-height: 1.15;
}

.geekly-challenges__hero-desc {
    font-size: 0.9375rem;
    color: var(--clr-text-dim);
    margin: 0;
    line-height: 1.55;
    max-width: 520px;
}

.geekly-challenges__hero-progress {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
    min-width: 140px;
}

.geekly-challenges__hero-count {
    display: flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
}

.geekly-challenges__hero-done {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--clr-brand);
}

.geekly-challenges__hero-sep {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--clr-text-dim);
}

.geekly-challenges__hero-total {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--clr-text-muted);
}

.geekly-challenges__hero-bar {
    width: 140px;
    height: 6px;
    background-color: var(--clr-bg-active);
    border-radius: 3px;
    overflow: hidden;
}

.geekly-challenges__hero-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--clr-brand) 0%, color-mix(in srgb, var(--clr-brand) 70%, #ff9900) 100%);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.geekly-challenges__hero-pct {
    font-size: 0.75rem;
    color: var(--clr-text-dim);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* ── Filter tabs ──────────────────────────────────────────────────────────── */

.geekly-challenges__tabs {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--clr-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.geekly-challenges__tabs::-webkit-scrollbar {
    display: none;
}

.geekly-challenges__tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--clr-text-dim);
    text-decoration: none;
    padding: 10px 16px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.geekly-challenges__tab:hover {
    color: var(--clr-text-primary);
}

.geekly-challenges__tab--active {
    color: var(--clr-text-primary);
    border-bottom-color: var(--clr-brand);
}

.geekly-challenges__tab-count {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 1px 6px;
    border-radius: 10px;
    background-color: var(--clr-bg-active);
    color: var(--clr-text-dim);
}

.geekly-challenges__tab--active .geekly-challenges__tab-count {
    background-color: rgba(230, 57, 70, 0.15);
    color: var(--clr-brand);
}

/* ── Content area ─────────────────────────────────────────────────────────── */

.geekly-challenges__content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ── Section (daily / weekly) ─────────────────────────────────────────────── */

.geekly-challenges__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.geekly-challenges__section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--clr-text-primary);
    letter-spacing: 0.02em;
}

.geekly-challenges__section-title svg {
    width: 16px;
    height: 16px;
    color: var(--clr-brand);
    flex-shrink: 0;
}

.geekly-challenges__section-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.geekly-challenges__resets-in {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8125rem;
    color: var(--clr-text-dim);
    font-family: var(--font-display);
    font-weight: 600;
}

.geekly-challenges__resets-in svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* ── Challenge grid ───────────────────────────────────────────────────────── */

.geekly-challenges__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 640px) {
    .geekly-challenges__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .geekly-challenges__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Challenge card ───────────────────────────────────────────────────────── */

.geekly-challenges__card {
    background-color: var(--clr-bg-surface);
    border: 1px solid var(--clr-border);
    border-radius: 10px;
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.geekly-challenges__card:hover {
    border-color: var(--clr-text-dim);
    transform: translateY(-2px);
}

.geekly-challenges__card--completed {
    border-color: rgba(230, 57, 70, 0.25);
    background: linear-gradient(160deg, var(--clr-bg-surface) 0%, color-mix(in srgb, var(--clr-brand) 4%, var(--clr-bg-surface)) 100%);
}

.geekly-challenges__card--completed:hover {
    border-color: rgba(230, 57, 70, 0.5);
}

/* ── Challenge highlight (scroll-to from notification) ──────────────────────── */
@keyframes geekly-challenge-pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.06); }
    55%  { transform: scale(0.98); }
    75%  { transform: scale(1.02); }
    100% { transform: scale(1); }
}
@keyframes geekly-challenge-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.geekly-challenges__card--highlight {
    animation: geekly-challenge-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    border-color: rgba(245, 158, 11, 0.7);
    z-index: 1;
    overflow: hidden;
}
.geekly-challenges__card--highlight::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255, 210, 80, 0.20) 50%,
        rgba(255, 255, 255, 0.08) 55%,
        transparent 65%
    );
    background-size: 200% 100%;
    animation: geekly-challenge-shimmer 0.7s 0.15s ease-in-out forwards;
    pointer-events: none;
    border-radius: inherit;
}

/* Card header: icon + XP badge */
.geekly-challenges__card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.geekly-challenges__card-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: var(--clr-bg-raised);
    border: 1px solid var(--clr-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--clr-text-dim);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.geekly-challenges__card-icon svg {
    width: 18px;
    height: 18px;
}

.geekly-challenges__card-icon--completed {
    background-color: rgba(230, 57, 70, 0.1);
    border-color: rgba(230, 57, 70, 0.3);
    color: var(--clr-brand);
}

/* XP badge */
.geekly-challenges__xp-badge {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--clr-brand);
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.geekly-challenges__xp-badge--weekly {
    color: #3B82F6;
}

/* Card name + desc */
.geekly-challenges__card-name {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--clr-text-primary);
    margin: 0;
    line-height: 1.2;
}

.geekly-challenges__card-desc {
    font-size: 0.8125rem;
    color: var(--clr-text-muted);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

/* Card footer: progress / completed / login hint */
.geekly-challenges__card-footer {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--clr-bg-raised);
}

.geekly-challenges__completed-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-brand);
}

.geekly-challenges__completed-badge svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.geekly-challenges__progress-bar {
    width: 100%;
    height: 4px;
    background-color: var(--clr-bg-active);
    border-radius: 2px;
    overflow: hidden;
}

.geekly-challenges__progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}

.geekly-challenges__progress-fill--daily {
    background-color: var(--clr-brand);
}

.geekly-challenges__progress-fill--weekly {
    background-color: #3B82F6;
}

.geekly-challenges__progress-label {
    font-size: 0.6875rem;
    color: var(--clr-text-dim);
    font-family: var(--font-display);
    font-weight: 700;
}

.geekly-challenges__login-hint {
    font-size: 0.6875rem;
    color: var(--clr-text-dim);
}

.geekly-challenges__login-hint a {
    color: var(--clr-brand);
    text-decoration: none;
}

.geekly-challenges__login-hint a:hover {
    text-decoration: underline;
}

/* ── Footer note ──────────────────────────────────────────────────────────── */

.geekly-challenges__footer-note {
    font-size: 0.875rem;
    color: var(--clr-text-dim);
    text-align: center;
    margin: 0;
}


/* =============================================================================
   LEADERBOARD PAGE
   ============================================================================= */

.geekly-leaderboard {
    max-width: 860px;
    margin: 0 auto;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Page header ──────────────────────────────────────────────────────────── */


/* Your rank pill */


/* ── Period tabs ──────────────────────────────────────────────────────────── */


/* ── Podium ───────────────────────────────────────────────────────────────── */


/* Crown above 1st place */


@keyframes geekly-crown-bob {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-4px); }
}

/* Avatar link */


/* Rank medal badge */


/* Info below avatar */


/* Podium blocks (the platform steps) */


/* ── Ranked list (rank 4+) ────────────────────────────────────────────────── */


/* Rank number */


/* Avatar */


/* Identity */


/* XP value */


/* ── Empty state ──────────────────────────────────────────────────────────── */


/* ── Footer note ──────────────────────────────────────────────────────────── */



/* =============================================================================
   NOTIFICATIONS PAGE
   ============================================================================= */

.geekly-notifs-page {
    max-width: 680px;
    margin: 0 auto;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Page header ──────────────────────────────────────────────────────────── */

.geekly-notifs-page__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0 16px;
}

.geekly-notifs-page__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--clr-text-primary);
    margin: 0;
    line-height: 1.15;
}

.geekly-notifs-page__mark-all {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--clr-brand);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: opacity var(--transition-fast);
}

.geekly-notifs-page__mark-all:hover {
    opacity: 0.75;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */

.geekly-notifs-page__tabs {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--clr-border);
    margin-bottom: 8px;
}

.geekly-notifs-page__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--clr-text-dim);
    text-decoration: none;
    padding: 10px 16px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.geekly-notifs-page__tab:hover {
    color: var(--clr-text-primary);
}

.geekly-notifs-page__tab--active {
    color: var(--clr-text-primary);
    border-bottom-color: var(--clr-brand);
}

.geekly-notifs-page__tab-badge {
    font-size: 0.625rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    background-color: var(--clr-brand);
    color: #ffffff;
    line-height: 1.4;
}

/* ── Content area ─────────────────────────────────────────────────────────── */

.geekly-notifs-page__content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Group ────────────────────────────────────────────────────────────────── */

.geekly-notifs-page__group {
    margin-bottom: 8px;
}

.geekly-notifs-page__group-label {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--clr-text-primary);
    margin: 0;
    padding: 14px 0 8px;
    letter-spacing: 0.02em;
}

/* ── Notification item ────────────────────────────────────────────────────── */

.geekly-notifs-page__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color 0.12s ease;
    position: relative;
}

.geekly-notifs-page__item:hover {
    background-color: var(--clr-bg-raised);
}

.geekly-notifs-page__item--unread {
    background-color: rgba(230, 57, 70, 0.04);
}

.geekly-notifs-page__item--unread:hover {
    background-color: rgba(230, 57, 70, 0.07);
}

/* Avatar wrap — position:relative for the type badge */
.geekly-notifs-page__item-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
}

/* User avatar */
.geekly-notifs-page__item-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid var(--clr-bg-surface);
    background-color: var(--clr-bg-raised);
}

/* System notification avatar (coloured circle with icon) */
.geekly-notifs-page__item-avatar--system {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.geekly-notifs-page__item-avatar--system svg {
    width: 22px;
    height: 22px;
}

/* Type badge — small circle bottom-right of avatar */
.geekly-notifs-page__item-type-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border: 2px solid var(--clr-bg-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.geekly-notifs-page__item-type-badge svg {
    width: 10px;
    height: 10px;
}

/* Hide type badge on system notifications (the avatar IS the icon) */
.geekly-notifs-page__item-avatar--system ~ .geekly-notifs-page__item-type-badge {
    display: none;
}

/* Item body */
.geekly-notifs-page__item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.geekly-notifs-page__item-text {
    font-size: 0.9375rem;
    color: var(--clr-text-muted);
    line-height: 1.45;
    margin: 0;
}

.geekly-notifs-page__item-text strong {
    color: var(--clr-text-primary);
    font-weight: 600;
}

.geekly-notifs-page__item-time {
    font-size: 0.8125rem;
    color: var(--clr-text-dim);
}

.geekly-notifs-page__item-time--unread {
    color: var(--clr-brand);
    font-weight: 600;
}

/* Unread dot — right side */
.geekly-notifs-page__item-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--clr-brand);
    flex-shrink: 0;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */

.geekly-notifs-page__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 24px;
    text-align: center;
    color: var(--clr-text-dim);
}

.geekly-notifs-page__empty svg {
    width: 36px;
    height: 36px;
    opacity: 0.2;
}

.geekly-notifs-page__empty p {
    font-size: 0.9375rem;
    margin: 0;
}


/* =============================================================================
   COMMUNITY PAGE
   ============================================================================= */

/* Community content renders outside geekly-wrap — override min-height so the
   empty wrap doesn't push the community content down below the viewport */
body:has( #geekly-community ) .geekly-wrap,
body:has( #geekly-community ) .geekly-main {
    min-height: 0;
}


.geekly-community {
    /* No max-width here — same as .ab, hero breaks out via negative margins */
    display: flex;
    flex-direction: column;
    gap: 48px; /* more breathing room between sections */
    padding-bottom: 80px;
}

/* Inner content wrapper — constrains width to match hero text area */
.geekly-community__inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

@media (min-width: 768px) { .geekly-community { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1280px) { .geekly-community { padding-left: 40px; padding-right: 40px; } }

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.geekly-community__hero {
    position: relative;
    overflow: hidden;
    min-height: clamp(280px, 40vw, 400px);
    display: flex;
    align-items: flex-end;
    /* Break out of .geekly-main padding */
    margin-top: -24px;
    margin-left: -16px;
    margin-right: -16px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--clr-border);
    background:
        radial-gradient(ellipse 70% 90% at 80% 40%, color-mix(in srgb, var(--clr-brand) 8%, transparent) 0%, transparent 60%),
        linear-gradient(180deg, var(--clr-bg-deep) 0%, var(--clr-bg-base) 100%);
}

@media (min-width: 768px) {
    .geekly-community__hero {
        margin-left: calc(-16px - 32px);
        margin-right: calc(-16px - 32px);
    }
}

@media (min-width: 1280px) {
    .geekly-community__hero {
        margin-top: calc(-32px - var(--topbar-height));
        margin-left: calc(-40px - 40px); /* main padding + community padding */
        margin-right: calc(-40px - 40px);
    }
}

@media (min-width: 1280px) {
    .geekly-community__hero {
        margin-top: calc(-40px - var(--topbar-height));
        margin-left: calc(-32px - 40px); /* main-padding-lg + community padding */
        margin-right: calc(-32px - 40px);
    }
}

.geekly-community__hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 50%, color-mix(in srgb, var(--clr-brand) 6%, transparent) 0%, transparent 50%),
        radial-gradient(circle at 85% 20%, rgba(139, 92, 246, 0.06) 0%, transparent 40%);
    pointer-events: none;
}

.geekly-community__hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    /* Top padding ensures the eyebrow text is visible below the community nav.
       Side padding compensates for the hero's negative margin breakout. */
    padding: clamp(56px, 8vw, 80px) clamp(24px, 5vw, 52px) clamp(24px, 4vw, 40px);
}

@media (min-width: 768px) { .geekly-community__hero-content { padding-left: 48px; padding-right: 48px; } }
@media (min-width: 1280px) { .geekly-community__hero-content { padding-left: 80px; padding-right: 80px; } }
@media (min-width: 1280px) { .geekly-community__hero-content { padding-left: 72px; padding-right: 72px; } }

.geekly-community__hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--clr-brand);
    margin-bottom: 12px;
    opacity: 0.9;
    padding-top: 40px; /* ensure eyebrow clears the community nav on mobile */
}

@media (min-width: 768px) {
    .geekly-community__hero-eyebrow {
        padding-top: 0;
    }
}

.geekly-community__hero-eyebrow::before {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background: var(--clr-brand);
    border-radius: 1px;
    flex-shrink: 0;
}

.geekly-community__hero-title {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 10vw, 7rem);
    font-weight: 800;
    color: var(--clr-text-primary);
    margin: 0 0 14px;
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.geekly-community__hero-desc {
    font-size: 1rem;
    color: var(--clr-text-secondary);
    margin: 0 0 20px;
    max-width: 520px;
    line-height: 1.6;
}

.geekly-community__hero-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.geekly-community__hero-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--clr-text-muted);
    background: rgba(46, 44, 53, 0.6);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 5px 14px;
    border-radius: 20px;
    backdrop-filter: blur(8px);
    text-decoration: none;
    text-transform: uppercase;
}

.geekly-community__hero-stat strong {
    color: var(--clr-text-primary);
    font-weight: 800;
}

.geekly-community__hero-stat--link {
    color: var(--clr-text-secondary);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.geekly-community__hero-stat--link:hover {
    border-color: var(--clr-text-dim);
    color: var(--clr-text-primary);
}

/* ── New Members Spotlight ────────────────────────────────────────────────── */

.geekly-community__spotlight {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.geekly-community__spotlight-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    margin: 0;
}

.geekly-community__spotlight-title svg {
    width: 14px;
    height: 14px;
    color: #E6A817;
    flex-shrink: 0;
}

.geekly-community__spotlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.geekly-community__spotlight-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 20px 20px;
    background-color: var(--clr-bg-elevated);
    border: 1px solid var(--clr-border);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
    .geekly-community__spotlight-card:hover {
        border-color: rgba(255,255,255,0.12);
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    }
}

.geekly-community__card-new-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-family: var(--font-display);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 5px;
    border-radius: 3px;
    background-color: rgba(16, 185, 129, 0.15);
    color: var(--clr-success);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* ── Controls ─────────────────────────────────────────────────────────────── */

/* ── Controls — unified card ─────────────────────────────────────────────── */

.geekly-community__controls {
    background: var(--clr-bg-elevated);
    border: 1px solid var(--clr-border);
    border-radius: 14px;
    overflow: hidden;
}

/* Search row */
.geekly-community__search-form {
    width: 100%;
}

.geekly-community__search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--clr-border);
}

.geekly-community__search-wrap > svg {
    position: absolute;
    left: 18px;
    width: 17px;
    height: 17px;
    color: var(--clr-text-dim);
    pointer-events: none;
    flex-shrink: 0;
}

.geekly-community__search-input {
    width: 100%;
    padding: 16px 44px 16px 48px;
    background-color: transparent;
    border: none;
    color: var(--clr-text-primary);
    font-size: 1rem;
    outline: none;
    box-sizing: border-box;
    font-family: var(--font-body);
}

.geekly-community__search-input:focus {
    background-color: color-mix(in srgb, var(--clr-brand) 3%, transparent);
}

.geekly-community__search-input::placeholder {
    color: var(--clr-text-dim);
    font-style: italic;
}

.geekly-community__search-clear {
    position: absolute;
    right: 14px;
    font-size: 1.25rem;
    color: var(--clr-text-dim);
    text-decoration: none;
    line-height: 1;
    padding: 4px 6px;
    transition: color var(--transition-fast);
}

.geekly-community__search-clear:hover {
    color: var(--clr-text-primary);
}

/* Filters row — sort + level in one padded area */
.geekly-community__filters {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Sort row */
.geekly-community__sort-group {
    display: flex;
    gap: 0;
    align-items: stretch;
    border-bottom: 1px solid var(--clr-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.geekly-community__sort-group::-webkit-scrollbar { display: none; }

.geekly-community__sort-btn {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-text-dim);
    text-decoration: none;
    padding: 14px 22px;
    border: none;
    border-bottom: 2px solid transparent;
    background-color: transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
    position: relative;
    bottom: -1px;
}

.geekly-community__sort-btn:hover {
    color: var(--clr-text-secondary);
}

.geekly-community__sort-btn--active {
    color: var(--clr-text-primary);
    border-bottom-color: var(--clr-brand);
}

/* Level filter row */
.geekly-community__level-filter {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding: 14px 18px;
}

.geekly-community__level-btn {
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-text-dim);
    text-decoration: none;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid var(--clr-border);
    background-color: transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
    white-space: nowrap;
}

.geekly-community__level-btn:hover {
    color: var(--clr-text-primary);
    border-color: var(--clr-text-dim);
    background-color: var(--clr-bg-active);
}

.geekly-community__level-btn--active {
    color: var(--level-colour, var(--clr-brand));
    border-color: var(--level-colour, var(--clr-brand));
    background-color: color-mix(in srgb, var(--level-colour, var(--clr-brand)) 12%, transparent);
}

/* Member count */
.geekly-community__count {
    font-size: 0.875rem;
    color: var(--clr-text-dim);
    margin: 0;
}

/* ── Member grid ──────────────────────────────────────────────────────────── */

.geekly-community__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (min-width: 640px) {
    .geekly-community__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
}

@media (min-width: 900px) {
    .geekly-community__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}

@media (min-width: 1100px) {
    .geekly-community__grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
    }
}

/* ── Member card ──────────────────────────────────────────────────────────── */

.geekly-community__member-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 20px 22px;
    background-color: var(--clr-bg-elevated);
    border: 1px solid var(--clr-border);
    border-radius: 12px;
    text-align: center;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
    .geekly-community__member-card:hover {
        border-color: rgba(255,255,255,0.12);
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    }
}

/* Avatar */
.geekly-community__member-avatar-link {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.geekly-community__member-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 3px solid var(--member-colour, var(--clr-border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--member-colour, var(--clr-border)) 20%, transparent);
}

.geekly-community__member-level-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 0.5625rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--clr-bg-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Identity */
.geekly-community__member-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    width: 100%;
}

.geekly-community__member-name {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--clr-text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

.geekly-community__member-name:hover {
    color: var(--clr-brand);
}

.geekly-community__member-handle {
    font-size: 0.75rem;
    color: var(--clr-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

.geekly-community__member-level-name {
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Stats */
.geekly-community__member-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.geekly-community__member-stat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.8125rem;
    color: var(--clr-text-secondary);
    font-family: var(--font-display);
    font-weight: 600;
}

.geekly-community__member-stat svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

/* Follow button */
.geekly-community__follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 5px;
    border: 1px solid var(--clr-brand);
    background-color: transparent;
    color: var(--clr-brand);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    margin-top: auto;
    white-space: nowrap;
}

.geekly-community__follow-btn svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

.geekly-community__follow-btn:hover {
    background-color: var(--clr-brand);
    color: #ffffff;
}

.geekly-community__follow-btn-default { display: inline-flex; align-items: center; gap: 5px; }
.geekly-community__follow-btn-hover { display: none; }

@media (hover: hover) {
    .geekly-community__follow-btn--following:hover .geekly-community__follow-btn-default { display: none; }
    .geekly-community__follow-btn--following:hover .geekly-community__follow-btn-hover { display: inline; }
    .geekly-community__follow-btn--following:hover {
        border-color: var(--clr-brand);
        color: var(--clr-brand);
        background-color: transparent;
    }
}

.geekly-community__follow-btn--following {
    border-color: var(--clr-border);
    color: var(--clr-text-muted);
    background-color: var(--clr-bg-raised);
}

.geekly-community__follow-btn--following:hover {
    border-color: var(--clr-brand);
    color: var(--clr-brand);
    background-color: transparent;
}

.geekly-community__follow-btn--guest {
    border-color: var(--clr-border);
    color: var(--clr-text-dim);
}

.geekly-community__follow-btn--guest:hover {
    border-color: var(--clr-brand);
    color: var(--clr-brand);
    background-color: transparent;
}

/* Spotlight card avatar */
.geekly-community__card-avatar-wrap {
    position: relative;
}

.geekly-community__card-avatar-wrap img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid var(--member-colour, var(--clr-border));
}

.geekly-community__card-name {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--clr-text-primary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.geekly-community__card-level {
    font-family: var(--font-display);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */

.geekly-community__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 24px;
    text-align: center;
    color: var(--clr-text-dim);
}

.geekly-community__empty svg {
    width: 40px;
    height: 40px;
    opacity: 0.2;
}

.geekly-community__empty p {
    font-size: 0.9375rem;
    margin: 0;
}


/* =============================================================================
   BOOKMARKS PAGE
   ============================================================================= */

.geekly-bookmarks {
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.geekly-bookmarks__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--clr-border);
}

.geekly-bookmarks__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--clr-text-primary);
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.15;
}

.geekly-bookmarks__title svg {
    width: 22px;
    height: 22px;
    color: #E6A817;
    flex-shrink: 0;
}

.geekly-bookmarks__sub {
    font-size: 0.875rem;
    color: var(--clr-text-dim);
    margin: 0;
}

.geekly-bookmarks__clear-all {
    font-size: 0.8125rem;
    color: var(--clr-text-dim);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color var(--transition-fast);
    flex-shrink: 0;
}

.geekly-bookmarks__clear-all:hover {
    color: var(--clr-brand);
}

/* ── Filter tabs ──────────────────────────────────────────────────────────── */

.geekly-bookmarks__tabs {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--clr-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.geekly-bookmarks__tabs::-webkit-scrollbar {
    display: none;
}

.geekly-bookmarks__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--clr-text-dim);
    text-decoration: none;
    padding: 10px 16px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.geekly-bookmarks__tab:hover {
    color: var(--clr-text-primary);
}

.geekly-bookmarks__tab--active {
    color: var(--clr-text-primary);
    border-bottom-color: #E6A817;
}

.geekly-bookmarks__tab-count {
    font-size: 0.625rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    background-color: var(--clr-bg-active);
    color: var(--clr-text-dim);
}

.geekly-bookmarks__tab--active .geekly-bookmarks__tab-count {
    background-color: rgba(230, 168, 23, 0.15);
    color: #E6A817;
}

/* ── Grid ─────────────────────────────────────────────────────────────────── */

.geekly-bookmarks__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (min-width: 640px) {
    .geekly-bookmarks__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 900px) {
    .geekly-bookmarks__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ── Item wrapper (card + remove button) ──────────────────────────────────── */

.geekly-bookmarks__item {
    position: relative;
}

/* Remove bookmark button — top-right of card, appears on hover */
.geekly-bookmarks__remove {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--clr-text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
    padding: 0;
    backdrop-filter: blur(4px);
}

.geekly-bookmarks__remove svg {
    width: 12px;
    height: 12px;
}

.geekly-bookmarks__item:hover .geekly-bookmarks__remove {
    opacity: 1;
}

.geekly-bookmarks__remove:hover {
    color: #ffffff;
    background-color: var(--clr-brand);
    border-color: var(--clr-brand);
}

/* ── Empty states ─────────────────────────────────────────────────────────── */

.geekly-bookmarks__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    color: var(--clr-text-dim);
}

.geekly-bookmarks__empty svg {
    width: 36px;
    height: 36px;
    opacity: 0.2;
}

.geekly-bookmarks__empty p {
    font-size: 0.9375rem;
    margin: 0;
}

.geekly-bookmarks__empty--full {
    padding: 80px 24px;
}

.geekly-bookmarks__empty-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--clr-text-primary);
    margin: 0;
}


/* =============================================================================
   HISTORY PAGE
   ============================================================================= */

.geekly-history {
    max-width: 760px;
    margin: 0 auto;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.geekly-history__header {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--clr-border);
    margin-bottom: 0;
}

.geekly-history__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--clr-text-primary);
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.15;
}

.geekly-history__title svg {
    width: 22px;
    height: 22px;
    color: var(--clr-brand);
    flex-shrink: 0;
}

.geekly-history__sub {
    font-size: 0.875rem;
    color: var(--clr-text-dim);
    margin: 0;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */

.geekly-history__tabs {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--clr-border);
    margin-bottom: 28px;
}

.geekly-history__tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--clr-text-dim);
    text-decoration: none;
    padding: 12px 18px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}

.geekly-history__tab svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.geekly-history__tab:hover {
    color: var(--clr-text-primary);
}

.geekly-history__tab--active {
    color: var(--clr-text-primary);
    border-bottom-color: var(--clr-brand);
}

/* ── Content ──────────────────────────────────────────────────────────────── */

.geekly-history__content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ── Date group ───────────────────────────────────────────────────────────── */

.geekly-history__group-label {
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-text-dim);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--clr-bg-raised);
}

/* ── Reading history list ─────────────────────────────────────────────────── */

.geekly-history__reading-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: var(--clr-bg-surface);
    border: 1px solid var(--clr-border);
    border-radius: 10px;
    overflow: hidden;
}

.geekly-history__reading-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    text-decoration: none;
    border-bottom: 1px solid var(--clr-bg-raised);
    transition: background-color 0.12s ease;
}

.geekly-history__reading-item:last-child {
    border-bottom: none;
}

.geekly-history__reading-item:hover {
    background-color: var(--clr-bg-raised);
}

/* Thumbnail */
.geekly-history__reading-thumb {
    width: 72px;
    height: 48px;
    border-radius: 5px;
    overflow: hidden;
    flex-shrink: 0;
    background-color: var(--clr-bg-raised);
}

.geekly-history__reading-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.geekly-history__reading-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-dim);
    opacity: 0.3;
}

.geekly-history__reading-thumb-placeholder svg {
    width: 20px;
    height: 20px;
}

/* Body */
.geekly-history__reading-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.geekly-history__reading-cat {
    font-family: var(--font-display);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-brand);
}

.geekly-history__reading-title {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--clr-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.geekly-history__reading-item:hover .geekly-history__reading-title {
    color: var(--clr-brand);
}

/* Time */
.geekly-history__reading-time {
    font-size: 0.75rem;
    color: var(--clr-text-dim);
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Activity list ────────────────────────────────────────────────────────── */

.geekly-history__activity-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.geekly-history__activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--clr-bg-raised);
}

.geekly-history__activity-item:last-child {
    border-bottom: none;
}

/* Icon circle */
.geekly-history__activity-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.geekly-history__activity-icon svg {
    width: 15px;
    height: 15px;
}

/* Body */
.geekly-history__activity-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 2px;
}

.geekly-history__activity-text {
    font-size: 0.9375rem;
    color: var(--clr-text-muted);
    margin: 0;
    line-height: 1.45;
}

.geekly-history__activity-text strong {
    color: var(--clr-text-primary);
    font-weight: 600;
}

.geekly-history__activity-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.geekly-history__activity-link:hover strong {
    color: var(--clr-brand);
}

.geekly-history__activity-time {
    font-size: 0.75rem;
    color: var(--clr-text-dim);
}

/* ── Empty states ─────────────────────────────────────────────────────────── */

.geekly-history__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 72px 24px;
    text-align: center;
    color: var(--clr-text-dim);
}

.geekly-history__empty svg {
    width: 36px;
    height: 36px;
    opacity: 0.2;
}

.geekly-history__empty-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--clr-text-primary);
    margin: 0;
}

.geekly-history__empty p {
    font-size: 0.9375rem;
    margin: 0;
}


/* =============================================================================
   HOW IT WORKS PAGE  (geekly-hiw__ namespace)
   ============================================================================= */

.geekly-hiw {
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.geekly-hiw__hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 36px 36px;
    background: linear-gradient(135deg, var(--clr-bg-surface) 0%, color-mix(in srgb, var(--clr-brand) 7%, var(--clr-bg-surface)) 100%);
    border: 1px solid var(--clr-border);
    border-top: 3px solid var(--clr-brand);
    border-radius: 14px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.geekly-hiw__hero::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230, 57, 70, 0.2) 0%, rgba(230, 57, 70, 0.06) 50%, transparent 70%);
    pointer-events: none;
}

.geekly-hiw__hero-eyebrow {
    display: block;
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--clr-brand);
    margin-bottom: 10px;
}

.geekly-hiw__hero-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    color: var(--clr-text-primary);
    margin: 0 0 16px;
    line-height: 1.1;
}

.geekly-hiw__hero-title-accent {
    color: var(--clr-brand);
}

.geekly-hiw__hero-desc {
    font-size: 1.0625rem;
    color: var(--clr-text-muted);
    line-height: 1.6;
    margin: 0;
    max-width: 480px;
}

/* User level card */
.geekly-hiw__hero-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background-color: var(--clr-bg-raised);
    border: 1px solid color-mix(in srgb, var(--level-colour, var(--clr-border)) 30%, transparent);
    border-radius: 10px;
    flex-shrink: 0;
    min-width: 240px;
    max-width: 300px;
}

.geekly-hiw__hero-card-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--level-colour, var(--clr-brand));
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--level-colour, var(--clr-brand)) 40%, transparent);
}

.geekly-hiw__hero-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.geekly-hiw__hero-card-name {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
}

.geekly-hiw__hero-card-xp {
    font-size: 0.8125rem;
    color: var(--clr-text-dim);
}

.geekly-hiw__hero-card-link {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--clr-brand);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--transition-fast);
}

.geekly-hiw__hero-card-link:hover {
    opacity: 0.75;
}

/* Guest CTA */
.geekly-hiw__hero-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 22px;
    background-color: var(--clr-bg-raised);
    border: 1px solid var(--clr-border);
    border-radius: 10px;
    flex-shrink: 0;
    max-width: 260px;
}

.geekly-hiw__hero-cta p {
    font-size: 0.875rem;
    color: var(--clr-text-dim);
    margin: 0;
    line-height: 1.5;
}

/* ── Two-column layout ────────────────────────────────────────────────────── */

.geekly-hiw__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}

@media (min-width: 900px) {
    .geekly-hiw__layout {
        grid-template-columns: 180px 1fr;
        gap: 36px;
    }
}

/* ── Sticky ToC ───────────────────────────────────────────────────────────── */

.geekly-hiw__toc {
    background-color: var(--clr-bg-surface);
    border: 1px solid var(--clr-border);
    border-radius: 10px;
    padding: 16px;
    order: 2;
}

@media (min-width: 900px) {
    .geekly-hiw__toc {
        position: sticky;
        top: calc(var(--topbar-height) + 24px);
        order: 0;
    }
}

.geekly-hiw__toc-heading {
    display: block;
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-text-dim);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--clr-border);
}

.geekly-hiw__toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    counter-reset: toc;
}

.geekly-hiw__toc-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--clr-text-dim);
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 5px;
    border-left: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.geekly-hiw__toc-link:hover {
    color: var(--clr-text-primary);
    background-color: var(--clr-bg-raised);
}

.geekly-hiw__toc-link--active {
    color: var(--clr-brand);
    border-left-color: var(--clr-brand);
    background-color: rgba(230, 57, 70, 0.05);
}

/* ── Content sections ─────────────────────────────────────────────────────── */

.geekly-hiw__content {
    display: flex;
    flex-direction: column;
    gap: 48px;
    min-width: 0;
}

.geekly-hiw__section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.geekly-hiw__section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--clr-border);
}

.geekly-hiw__section-header svg {
    width: 20px;
    height: 20px;
    color: var(--clr-brand);
    flex-shrink: 0;
}

.geekly-hiw__section-title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3vw, 1.625rem);
    font-weight: 700;
    color: var(--clr-text-primary);
    margin: 0;
}

.geekly-hiw__section-intro {
    font-size: 0.9375rem;
    color: var(--clr-text-muted);
    line-height: 1.65;
    margin: 0;
}

/* ── XP action list ───────────────────────────────────────────────────────── */

.geekly-hiw__xp-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: var(--clr-bg-surface);
    border: 1px solid var(--clr-border);
    border-radius: 10px;
    overflow: hidden;
}

.geekly-hiw__xp-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--clr-bg-raised);
    transition: background-color 0.12s ease;
}

.geekly-hiw__xp-item:last-child {
    border-bottom: none;
}

.geekly-hiw__xp-item:hover {
    background-color: var(--clr-bg-raised);
}

.geekly-hiw__xp-icon {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.geekly-hiw__xp-icon svg {
    width: 18px;
    height: 18px;
}

.geekly-hiw__xp-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.geekly-hiw__xp-action {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--clr-text-primary);
}

.geekly-hiw__xp-desc {
    font-size: 0.8125rem;
    color: var(--clr-text-muted);
}

.geekly-hiw__xp-freq {
    font-size: 0.6875rem;
    color: var(--clr-text-dim);
    font-style: italic;
}

.geekly-hiw__xp-reward {
    display: flex;
    align-items: baseline;
    gap: 3px;
    flex-shrink: 0;
}

.geekly-hiw__xp-value {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--clr-brand);
}

.geekly-hiw__xp-unit {
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--clr-text-dim);
    letter-spacing: 0.06em;
}

/* ── Level progression ────────────────────────────────────────────────────── */

.geekly-hiw__levels {
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: var(--clr-bg-surface);
    border: 1px solid var(--clr-border);
    border-radius: 10px;
    overflow: hidden;
}

.geekly-hiw__level {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--clr-bg-raised);
    transition: background-color 0.12s ease;
}

.geekly-hiw__level:last-child {
    border-bottom: none;
}

.geekly-hiw__level--current {
    background-color: color-mix(in srgb, var(--level-colour, var(--clr-brand)) 6%, transparent);
    border-left: 3px solid var(--level-colour, var(--clr-brand));
}

.geekly-hiw__level--past {
    opacity: 0.65;
}

.geekly-hiw__level-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--level-colour, var(--clr-border));
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.geekly-hiw__level-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.geekly-hiw__level-name {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--level-colour, var(--clr-text-primary));
}

.geekly-hiw__level-range {
    font-size: 0.8125rem;
    color: var(--clr-text-dim);
}

.geekly-hiw__level-you {
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    background-color: color-mix(in srgb, var(--level-colour, var(--clr-brand)) 15%, transparent);
    color: var(--level-colour, var(--clr-brand));
    border: 1px solid color-mix(in srgb, var(--level-colour, var(--clr-brand)) 35%, transparent);
    flex-shrink: 0;
}

.geekly-hiw__level-check {
    width: 16px;
    height: 16px;
    color: var(--level-colour, var(--clr-success));
    flex-shrink: 0;
}

/* ── Trophy categories grid ───────────────────────────────────────────────── */

.geekly-hiw__trophy-categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (min-width: 640px) {
    .geekly-hiw__trophy-categories {
        grid-template-columns: repeat(3, 1fr);
    }
}

.geekly-hiw__trophy-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 12px;
    background-color: var(--clr-bg-surface);
    border: 1px solid color-mix(in srgb, var(--cat-colour, var(--clr-border)) 25%, transparent);
    border-top: 2px solid var(--cat-colour, var(--clr-border));
    border-radius: 8px;
    text-align: center;
    transition: transform 0.15s ease;
}

.geekly-hiw__trophy-cat:hover {
    transform: translateY(-2px);
}

.geekly-hiw__trophy-cat-icon {
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 2px;
}

.geekly-hiw__trophy-cat-name {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--clr-text-primary);
}

.geekly-hiw__trophy-cat-count {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cat-colour, var(--clr-brand));
    line-height: 1;
}

.geekly-hiw__trophy-cat-desc {
    font-size: 0.6875rem;
    color: var(--clr-text-dim);
}

/* ── Challenge types ──────────────────────────────────────────────────────── */

.geekly-hiw__challenge-types {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 640px) {
    .geekly-hiw__challenge-types {
        grid-template-columns: 1fr 1fr;
    }
}

.geekly-hiw__challenge-type {
    padding: 18px 20px;
    background-color: var(--clr-bg-surface);
    border: 1px solid var(--clr-border);
    border-radius: 10px;
}

.geekly-hiw__challenge-type--daily {
    border-top: 2px solid var(--clr-brand);
}

.geekly-hiw__challenge-type--weekly {
    border-top: 2px solid #3B82F6;
}

.geekly-hiw__challenge-type-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--clr-text-primary);
}

.geekly-hiw__challenge-type--daily .geekly-hiw__challenge-type-header svg { color: var(--clr-brand); }
.geekly-hiw__challenge-type--weekly .geekly-hiw__challenge-type-header svg { color: #3B82F6; }

.geekly-hiw__challenge-type-header svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.geekly-hiw__challenge-type-reset {
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--clr-text-dim);
    margin-left: auto;
    white-space: nowrap;
}

.geekly-hiw__challenge-type p {
    font-size: 0.875rem;
    color: var(--clr-text-muted);
    margin: 0;
    line-height: 1.55;
}

.geekly-hiw__challenge-note {
    font-size: 0.875rem;
    color: var(--clr-text-dim);
    font-style: italic;
    margin: 0;
}

/* ── Geek Score steps ─────────────────────────────────────────────────────── */

.geekly-hiw__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: var(--clr-bg-surface);
    border: 1px solid var(--clr-border);
    border-radius: 10px;
    overflow: hidden;
}

.geekly-hiw__step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--clr-bg-raised);
}

.geekly-hiw__step:last-child {
    border-bottom: none;
}

.geekly-hiw__step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--clr-brand);
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.geekly-hiw__step-body {
    font-size: 0.9375rem;
    color: var(--clr-text-muted);
    line-height: 1.55;
}

.geekly-hiw__step-body strong {
    color: var(--clr-text-primary);
    font-weight: 600;
}

.geekly-hiw__step-body em {
    color: var(--clr-brand);
    font-style: normal;
    font-weight: 500;
}

/* ── View all link ────────────────────────────────────────────────────────── */

.geekly-hiw__view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--clr-brand);
    text-decoration: none;
    transition: gap var(--transition-fast), opacity var(--transition-fast);
    align-self: flex-start;
}

.geekly-hiw__view-all:hover {
    opacity: 0.8;
    gap: 9px;
}

.geekly-hiw__view-all svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}


/* =============================================================================
   GEEK SCORE PAGE  (geekly-gs__ namespace)
   ============================================================================= */

.geekly-gs {
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.geekly-gs__hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 40px;
    background: linear-gradient(135deg, var(--clr-bg-surface) 0%, color-mix(in srgb, var(--clr-brand) 6%, var(--clr-bg-surface)) 100%);
    border: 1px solid var(--clr-border);
    border-top: 3px solid var(--clr-brand);
    border-radius: 14px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.geekly-gs__hero::before {
    content: '';
    position: absolute;
    bottom: -60px;
    right: -60px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230, 57, 70, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.geekly-gs__hero-eyebrow {
    display: block;
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--clr-brand);
    margin-bottom: 8px;
}

.geekly-gs__hero-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--clr-text-primary);
    margin: 0 0 12px;
    line-height: 1.1;
}

.geekly-gs__hero-desc {
    font-size: 1rem;
    color: var(--clr-text-muted);
    line-height: 1.6;
    margin: 0;
    max-width: 420px;
}

/* Score ring wrap */
.geekly-gs__hero-score-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.geekly-gs__hero-score-wrap--guest {
    opacity: 0.7;
}

.geekly-gs__score-ring-wrap {
    position: relative;
    width: 124px;
    height: 124px;
    flex-shrink: 0;
}

.geekly-gs__score-ring {
    display: block;
    transform: rotate(0deg);
}

.geekly-gs__score-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.geekly-gs__score-value {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--clr-text-primary);
    line-height: 1;
}

.geekly-gs__score-value--guest {
    color: var(--clr-text-dim);
}

.geekly-gs__score-label {
    font-size: 0.625rem;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-text-dim);
}

/* Stats row */
.geekly-gs__hero-stats {
    display: flex;
    align-items: center;
    gap: 16px;
}

.geekly-gs__hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.geekly-gs__hero-stat-num {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--clr-text-primary);
    line-height: 1;
    text-align: center;
}

.geekly-gs__hero-stat-label {
    font-size: 0.625rem;
    color: var(--clr-text-dim);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
}

.geekly-gs__hero-stat-sep {
    width: 1px;
    height: 28px;
    background-color: var(--clr-border);
    flex-shrink: 0;
}

.geekly-gs__guest-hint {
    font-size: 0.8125rem;
    color: var(--clr-text-dim);
    margin: 0;
    text-align: center;
}

/* ── Shared section styles ────────────────────────────────────────────────── */

.geekly-gs__section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.geekly-gs__section-title {
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 3vw, 1.5rem);
    font-weight: 700;
    color: var(--clr-text-primary);
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--clr-border);
}

.geekly-gs__section-sub {
    font-size: 0.875rem;
    color: var(--clr-text-dim);
    margin: 0;
}

/* ── How it works grid ────────────────────────────────────────────────────── */

.geekly-gs__how-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 640px) {
    .geekly-gs__how-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .geekly-gs__how-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.geekly-gs__how-card {
    padding: 20px 18px;
    background-color: var(--clr-bg-surface);
    border: 1px solid color-mix(in srgb, var(--step-colour, var(--clr-border)) 25%, transparent);
    border-top: 2px solid var(--step-colour, var(--clr-border));
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.15s ease;
}

.geekly-gs__how-card:hover {
    transform: translateY(-2px);
}

.geekly-gs__how-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: color-mix(in srgb, var(--step-colour, var(--clr-brand)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--step-colour, var(--clr-brand)) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--step-colour, var(--clr-brand));
    flex-shrink: 0;
}

.geekly-gs__how-icon svg {
    width: 18px;
    height: 18px;
}

.geekly-gs__how-title {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--clr-text-primary);
    margin: 0;
    line-height: 1.25;
}

.geekly-gs__how-desc {
    font-size: 0.8125rem;
    color: var(--clr-text-muted);
    line-height: 1.55;
    margin: 0;
}

/* ── Two-column layout (personal + compare) ───────────────────────────────── */

.geekly-gs__two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 640px) {
    .geekly-gs__two-col {
        grid-template-columns: 1fr 1fr;
    }
}

/* Personal score card */
.geekly-gs__personal-card,
.geekly-gs__compare-card {
    background-color: var(--clr-bg-surface);
    border: 1px solid var(--clr-border);
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.geekly-gs__personal-score {
    display: flex;
    align-items: center;
    gap: 16px;
}

.geekly-gs__personal-pct {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.geekly-gs__personal-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.geekly-gs__personal-tier {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
}

.geekly-gs__personal-sub {
    font-size: 0.8125rem;
    color: var(--clr-text-dim);
}

.geekly-gs__take-quiz-link {
    font-size: 0.8125rem;
    color: var(--clr-brand);
    text-decoration: none;
    font-weight: 500;
    transition: opacity var(--transition-fast);
}

.geekly-gs__take-quiz-link:hover {
    opacity: 0.75;
}

/* Compare bars */
.geekly-gs__compare-desc {
    font-size: 0.875rem;
    color: var(--clr-text-dim);
    margin: 0;
    line-height: 1.5;
}

.geekly-gs__compare-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.geekly-gs__compare-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.geekly-gs__compare-bar-label {
    font-size: 0.75rem;
    color: var(--clr-text-dim);
    width: 100px;
    flex-shrink: 0;
}

.geekly-gs__compare-bar-track {
    flex: 1;
    height: 8px;
    background-color: var(--clr-bg-active);
    border-radius: 4px;
    overflow: hidden;
}

.geekly-gs__compare-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.geekly-gs__compare-bar-fill--you {
    background: linear-gradient(90deg, var(--clr-brand), #E6A817);
}

.geekly-gs__compare-bar-fill--avg {
    background-color: var(--clr-text-dim);
}

.geekly-gs__compare-bar-value {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--clr-text-primary);
    width: 36px;
    text-align: right;
    flex-shrink: 0;
}

.geekly-gs__compare-result {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0;
}

.geekly-gs__compare-result--above { color: var(--clr-success); }
.geekly-gs__compare-result--below { color: var(--clr-brand); }

/* ── Quiz score list ──────────────────────────────────────────────────────── */

.geekly-gs__quiz-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: var(--clr-bg-surface);
    border: 1px solid var(--clr-border);
    border-radius: 10px;
    overflow: hidden;
}

.geekly-gs__quiz-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--clr-bg-raised);
    transition: background-color 0.12s ease;
}

.geekly-gs__quiz-item:last-child {
    border-bottom: none;
}

.geekly-gs__quiz-item:hover {
    background-color: var(--clr-bg-raised);
}

.geekly-gs__quiz-thumb {
    width: 56px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    background-color: var(--clr-bg-raised);
}

.geekly-gs__quiz-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.geekly-gs__quiz-title {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--clr-text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.geekly-gs__quiz-title:hover { color: var(--clr-brand); }

.geekly-gs__quiz-meta {
    font-size: 0.75rem;
    color: var(--clr-text-dim);
}

.geekly-gs__quiz-score {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.geekly-gs__quiz-score--good { color: var(--clr-success); }
.geekly-gs__quiz-score--mid { color: var(--clr-warning); }
.geekly-gs__quiz-score--low { color: var(--clr-brand); }

.geekly-gs__quiz-play {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--clr-brand);
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity var(--transition-fast);
}

.geekly-gs__quiz-play:hover { opacity: 0.75; }

/* ── Trophy grid ──────────────────────────────────────────────────────────── */

.geekly-gs__trophy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (min-width: 640px) {
    .geekly-gs__trophy-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.geekly-gs__trophy-card {
    background-color: var(--clr-bg-surface);
    border: 1px solid var(--clr-border);
    border-radius: 10px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.geekly-gs__trophy-card:hover {
    border-color: var(--clr-text-dim);
    transform: translateY(-2px);
}

.geekly-gs__trophy-card--earned {
    border-color: rgba(230, 168, 23, 0.3);
    background: linear-gradient(160deg, var(--clr-bg-surface) 0%, color-mix(in srgb, #E6A817 4%, var(--clr-bg-surface)) 100%);
}

.geekly-gs__trophy-icon {
    font-size: 1.75rem;
    line-height: 1;
}

.geekly-gs__trophy-rarity {
    font-family: var(--font-display);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.geekly-gs__trophy-name {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--clr-text-primary);
    margin: 0;
}

.geekly-gs__trophy-desc {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
    line-height: 1.45;
    margin: 0;
    flex: 1;
}

.geekly-gs__trophy-earned {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #E6A817;
    margin-top: auto;
}

.geekly-gs__trophy-earned svg {
    width: 11px;
    height: 11px;
}

/* ── View all link ────────────────────────────────────────────────────────── */

.geekly-gs__view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--clr-brand);
    text-decoration: none;
    transition: gap var(--transition-fast), opacity var(--transition-fast);
    align-self: flex-start;
}

.geekly-gs__view-all:hover { opacity: 0.8; gap: 9px; }

.geekly-gs__view-all svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* ── CTA footer ───────────────────────────────────────────────────────────── */

.geekly-gs__cta {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px 32px;
    background: linear-gradient(135deg, var(--clr-bg-surface) 0%, color-mix(in srgb, var(--clr-brand) 5%, var(--clr-bg-surface)) 100%);
    border: 1px solid var(--clr-border);
    border-top: 2px solid var(--clr-brand);
    border-radius: 12px;
    flex-wrap: wrap;
}

.geekly-gs__cta-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background-color: rgba(230, 57, 70, 0.1);
    border: 1px solid rgba(230, 57, 70, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-brand);
    flex-shrink: 0;
}

.geekly-gs__cta-icon svg {
    width: 22px;
    height: 22px;
}

.geekly-gs__cta-text {
    flex: 1;
    min-width: 200px;
}

.geekly-gs__cta-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--clr-text-primary);
    margin: 0 0 4px;
}

.geekly-gs__cta-desc {
    font-size: 0.875rem;
    color: var(--clr-text-dim);
    margin: 0;
}


/* =============================================================================
   TROPHIES PAGE — STATUS FILTER (All / Unlocked / Locked)
   ============================================================================= */

.geekly-trophies__status-filter {
    display: flex;
    gap: 8px;
    padding: 0 0 16px;
    flex-wrap: wrap;
}

.geekly-trophies__status-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid var(--clr-border);
    background-color: var(--clr-bg-raised);
    color: var(--clr-text-dim);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}

.geekly-trophies__status-btn:hover {
    color: var(--clr-text-primary);
    border-color: var(--clr-text-dim);
}

.geekly-trophies__status-btn--active {
    background-color: var(--clr-brand);
    border-color: var(--clr-brand);
    color: #fff;
}

.geekly-trophies__status-btn--active:hover {
    background-color: var(--clr-brand-dark, #c0303a);
    border-color: var(--clr-brand-dark, #c0303a);
    color: #fff;
}



/* =============================================================================
   DELETE ACCOUNT MODAL
   ============================================================================= */

.geekly-delete-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.geekly-delete-modal[hidden] {
    display: none;
}

.geekly-delete-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.geekly-delete-modal__panel {
    position: relative;
    z-index: 1;
    background: var(--clr-bg-surface);
    border: 1px solid rgba(230, 57, 70, 0.3);
    border-radius: 14px;
    padding: 32px 28px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(230, 57, 70, 0.1);
    animation: geekly-delete-modal-in 0.2s ease;
}

@keyframes geekly-delete-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.geekly-delete-modal__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(230, 57, 70, 0.12);
    border: 1px solid rgba(230, 57, 70, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--clr-brand);
}

.geekly-delete-modal__icon svg {
    width: 22px;
    height: 22px;
}

.geekly-delete-modal__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--clr-text-primary);
    margin: 0 0 8px;
}

.geekly-delete-modal__desc {
    font-size: 0.875rem;
    color: var(--clr-text-muted);
    line-height: 1.6;
    margin: 0 0 20px;
}

.geekly-delete-modal__desc strong {
    color: var(--clr-brand);
    font-weight: 600;
}

.geekly-delete-modal__field {
    margin-bottom: 8px;
}

.geekly-delete-modal__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--clr-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.geekly-delete-modal__input {
    width: 100%;
}

.geekly-delete-modal__error {
    font-size: 0.8125rem;
    color: var(--clr-brand);
    margin: 6px 0 0;
    padding: 8px 12px;
    background: rgba(230, 57, 70, 0.08);
    border-radius: 6px;
    border-left: 3px solid var(--clr-brand);
}

.geekly-delete-modal__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* Danger solid button */
.geekly-btn--danger-solid {
    background: var(--clr-brand);
    color: #fff !important;
    border-color: var(--clr-brand);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.geekly-btn--danger-solid:hover {
    background: var(--clr-brand-dark);
    border-color: var(--clr-brand-dark);
    color: #fff !important;
}

.geekly-btn--danger-solid:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}



/* =============================================================================
   FOLLOWERS / FOLLOWING MODAL
   ============================================================================= */

.geekly-follow-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.geekly-follow-modal[hidden] { display: none; }

.geekly-follow-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.geekly-follow-modal__panel {
    position: relative;
    z-index: 1;
    background: var(--clr-bg-elevated);
    border: 1px solid var(--clr-border);
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.geekly-follow-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--clr-border);
    flex-shrink: 0;
}

.geekly-follow-modal__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--clr-text-primary);
    margin: 0;
}

.geekly-follow-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--clr-border);
    background: transparent;
    color: var(--clr-text-dim);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
}

.geekly-follow-modal__close:hover {
    background: var(--clr-bg-active);
    color: var(--clr-text-primary);
}

.geekly-follow-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    min-height: 120px;
}

/* Ensure hidden attribute works on flex elements */
.geekly-follow-modal__loading[hidden],
.geekly-follow-modal__footer[hidden],
.geekly-follow-modal__list[hidden],
.geekly-follow-modal__empty[hidden] { display: none !important; }

.geekly-follow-modal__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.geekly-follow-modal__spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--clr-border);
    border-top-color: var(--clr-brand);
    border-radius: 50%;
    animation: geekly-spin 0.7s linear infinite;
    display: block;
}

@keyframes geekly-spin { to { transform: rotate(360deg); } }

.geekly-follow-modal__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.geekly-follow-modal__item {
    border-bottom: 1px solid var(--clr-border-subtle, var(--clr-border));
}

.geekly-follow-modal__item:last-child { border-bottom: none; }

.geekly-follow-modal__user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    text-decoration: none;
    transition: background var(--transition-fast);
}

.geekly-follow-modal__user:hover {
    background: var(--clr-bg-raised);
}

.geekly-follow-modal__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--clr-border);
}

.geekly-follow-modal__user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.geekly-follow-modal__display-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--clr-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.geekly-follow-modal__username {
    font-size: 0.75rem;
    color: var(--clr-text-dim);
}

.geekly-follow-modal__empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--clr-text-dim);
    font-size: 0.875rem;
}

.geekly-follow-modal__footer {
    padding: 12px 20px;
    border-top: 1px solid var(--clr-border);
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}


/* =============================================================================
   NEW MEMBERS SPOTLIGHT — Community page
   ============================================================================= */

.geekly-community__new-members {
    margin-bottom: 40px;
}

.geekly-community__new-members-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.geekly-community__new-members-label {
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-text-dim);
}

.geekly-community__new-members-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

@media (max-width: 900px) {
    .geekly-community__new-members-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .geekly-community__new-members-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

.geekly-community__new-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    background: var(--clr-bg-surface);
    border: 1px solid var(--clr-border);
    border-radius: 12px;
    text-align: center;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.geekly-community__new-member:hover {
    border-color: color-mix(in srgb, var(--clr-brand) 30%, var(--clr-border));
    background: var(--clr-bg-hover);
}

.geekly-community__new-member-avatar-wrap {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.geekly-community__new-member-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid var(--clr-border);
}

.geekly-community__new-member-level-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--clr-bg-surface);
}

.geekly-community__new-member-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--clr-text-primary);
    text-decoration: none;
    line-height: 1.3;
    word-break: break-word;
}

.geekly-community__new-member-name:hover {
    color: var(--clr-brand);
}

.geekly-community__new-member-level {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    opacity: 0.85;
}

.geekly-community__new-member-follow {
    margin-top: 4px;
    padding: 4px 12px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 20px;
    border: 1px solid var(--clr-border);
    background: transparent;
    color: var(--clr-text-secondary);
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.geekly-community__new-member-follow:hover {
    border-color: var(--clr-brand);
    color: var(--clr-brand);
}

.geekly-community__new-member-follow.geekly-follow-btn--following {
    border-color: color-mix(in srgb, var(--clr-brand) 40%, var(--clr-border));
    color: var(--clr-brand);
    background: color-mix(in srgb, var(--clr-brand) 8%, transparent);
}


/* Whole-site responsive quality pass: member actions are frequently repeated,
   so a full mobile touch target prevents accidental taps without widening cards. */
@media (max-width: 767px) {
    .geekly-community__follow-btn {
        min-height: 40px;
    }
}

/* ── Community Pulse hero ────────────────────────────────────────────────── */
.geekly-community__hero {
    min-height: clamp(380px, 33vw, 470px);
    align-items: stretch;
    margin-bottom: 34px;
    background:
        radial-gradient(58rem 31rem at 77% 48%, color-mix(in srgb, var(--clr-brand) 13%, transparent) 0%, transparent 68%),
        linear-gradient(106deg, #1a1015 0%, var(--clr-bg-deep) 56%, var(--clr-bg-base) 100%);
}

.geekly-community__hero-bg {
    opacity: 1;
    background:
        radial-gradient(circle at 21% 52%, color-mix(in srgb, var(--clr-brand) 5%, transparent) 0%, transparent 48%),
        radial-gradient(circle at 80% 18%, rgba(139, 92, 246, 0.05) 0%, transparent 37%);
}

.geekly-community__hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.25;
    background-image: radial-gradient(rgba(230, 237, 243, 0.34) 1px, transparent 1.35px);
    background-size: 17px 17px;
    -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 52%, transparent 97%);
    mask-image: linear-gradient(90deg, transparent 4%, #000 52%, transparent 97%);
}

.geekly-community__hero-figures {
    position: absolute;
    z-index: 0;
    top: 26px;
    right: clamp(28px, 7vw, 128px);
    display: flex;
    flex-direction: column;
    gap: clamp(2px, 0.6vw, 8px);
    color: rgba(230, 237, 243, 0.025);
    font-family: var(--font-display);
    font-size: clamp(9rem, 17vw, 17rem);
    font-weight: 800;
    letter-spacing: -0.08em;
    line-height: 0.76;
    pointer-events: none;
    user-select: none;
}

.geekly-community__hero-content {
    min-height: clamp(380px, 33vw, 470px);
    max-width: 1400px;
    display: grid;
    grid-template-columns: minmax(290px, 0.86fr) minmax(460px, 1.14fr);
    align-items: end;
    gap: clamp(42px, 7vw, 112px);
    padding: clamp(72px, 9vw, 108px) clamp(24px, 6vw, 82px) clamp(34px, 4vw, 52px);
}

.geekly-community__hero-text {
    position: relative;
    z-index: 1;
    max-width: 565px;
}

.geekly-community__hero-eyebrow {
    gap: 10px;
    margin-bottom: 17px;
    padding-top: 0;
    color: #ff6570;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.17em;
}

.geekly-community__hero-eyebrow::before {
    width: 28px;
    background: var(--clr-brand);
}

.geekly-community__hero-title {
    max-width: 600px;
    margin-bottom: 0;
    font-size: clamp(4rem, 7vw, 7.2rem);
    font-weight: 800;
    line-height: 0.84;
    letter-spacing: -0.045em;
}

.geekly-community__hero-desc {
    max-width: 470px;
    margin: 22px 0 0;
    color: var(--clr-text-secondary);
    font-size: 1rem;
    line-height: 1.58;
}

.geekly-community__hero-leaderboard {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    margin-top: 23px;
    padding: 4px 0 7px;
    border-bottom: 1px solid color-mix(in srgb, var(--clr-text-primary) 32%, transparent);
    color: var(--clr-text-primary);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.geekly-community__hero-leaderboard > span {
    display: grid;
    width: 21px;
    height: 21px;
    place-items: center;
    border-radius: 50%;
    background: var(--clr-brand);
    color: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
}

.geekly-community__hero-leaderboard:hover {
    border-color: var(--clr-brand);
    color: #fff;
    transform: translateX(2px);
}

.geekly-community__hero-leaderboard:focus-visible {
    outline: 2px solid var(--clr-brand);
    outline-offset: 5px;
}

.geekly-community__hero-pulse {
    position: relative;
    z-index: 1;
    align-self: center;
    min-width: 0;
    padding-top: 23px;
}

.geekly-community__hero-pulse-label {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--clr-text-muted);
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.17em;
    line-height: 1;
    text-transform: uppercase;
}

.geekly-community__hero-stats {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    border-top: 1px solid rgba(230, 237, 243, 0.15);
    border-bottom: 1px solid rgba(230, 237, 243, 0.15);
}

.geekly-community__hero-stats::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 34%;
    height: 3px;
    background: var(--clr-brand);
}

.geekly-community__hero-stat {
    min-width: 0;
    min-height: 194px;
    padding: 24px 22px 18px;
    border: 0;
    border-left: 1px solid rgba(230, 237, 243, 0.14);
    border-radius: 0;
    background: transparent;
    color: var(--clr-text-primary);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    backdrop-filter: none;
}

.geekly-community__hero-stat:first-child {
    border-left: 0;
}

.geekly-community__hero-stat strong {
    display: block;
    margin-bottom: 14px;
    color: var(--clr-text-primary);
    font-family: var(--font-display);
    font-size: clamp(4.5rem, 7vw, 6.8rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 0.86;
    font-variant-numeric: tabular-nums lining-nums;
}

.geekly-community__hero-stat-copy {
    display: block;
    min-width: 0;
}

.geekly-community__hero-stat-label,
.geekly-community__hero-stat-detail {
    display: block;
}

.geekly-community__hero-stat-label {
    color: var(--clr-text-primary);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    line-height: 1;
    text-transform: uppercase;
}

.geekly-community__hero-stat-detail {
    margin-top: 5px;
    color: var(--clr-text-muted);
    font-size: 0.6875rem;
    line-height: 1.35;
}

.geekly-community__hero-stat-signal {
    display: flex;
    align-items: end;
    gap: 4px;
    height: 16px;
    margin-top: 12px;
}

.geekly-community__hero-stat-signal i {
    display: block;
    width: 5px;
    border-radius: 4px;
    background: var(--clr-brand);
}

.geekly-community__hero-stat-signal i:nth-child(1) { height: 6px; opacity: 0.35; }
.geekly-community__hero-stat-signal i:nth-child(2) { height: 11px; opacity: 0.6; }
.geekly-community__hero-stat-signal i:nth-child(3) { height: 16px; }
.geekly-community__hero-stat--writers .geekly-community__hero-stat-signal i { background: #72d7ec; }
.geekly-community__hero-stat--levels .geekly-community__hero-stat-signal i { background: #58c888; }

@media (max-width: 1100px) {
    .geekly-community__hero,
    .geekly-community__hero-content {
        min-height: auto;
    }

    .geekly-community__hero-content {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 52px;
        padding-top: 76px;
    }

    .geekly-community__hero-pulse {
        width: 100%;
        max-width: 760px;
    }
}

@media (max-width: 767px) {
    .geekly-community__hero {
        margin-bottom: 28px;
        background:
            radial-gradient(28rem 23rem at 86% 12%, color-mix(in srgb, var(--clr-brand) 15%, transparent) 0%, transparent 65%),
            linear-gradient(145deg, #191015, var(--clr-bg-base));
    }

    .geekly-community__hero-bg::after {
        opacity: 0.2;
        -webkit-mask-image: linear-gradient(180deg, transparent 3%, #000 32%, transparent 95%);
        mask-image: linear-gradient(180deg, transparent 3%, #000 32%, transparent 95%);
    }

    .geekly-community__hero-figures {
        top: auto;
        right: -6px;
        bottom: 12px;
        gap: 1px;
        color: rgba(230, 237, 243, 0.018);
        font-size: 9.5rem;
    }

    .geekly-community__hero-content {
        gap: 48px;
        padding: 66px 20px 28px;
    }

    .geekly-community__hero-eyebrow {
        margin-bottom: 14px;
        font-size: 0.625rem;
    }

    .geekly-community__hero-eyebrow::before {
        width: 20px;
    }

    .geekly-community__hero-title {
        font-size: clamp(3.45rem, 17vw, 5rem);
        line-height: 0.86;
    }

    .geekly-community__hero-desc {
        margin-top: 18px;
        font-size: 0.9375rem;
    }

    .geekly-community__hero-leaderboard {
        margin-top: 20px;
        font-size: 0.875rem;
    }

    .geekly-community__hero-pulse {
        padding-top: 22px;
    }

    .geekly-community__hero-pulse-label {
        font-size: 0.625rem;
    }

    .geekly-community__hero-stats {
        display: flex;
        flex-direction: column;
        border-bottom: 0;
    }

    .geekly-community__hero-stats::before {
        top: auto;
        bottom: -1px;
        width: 44px;
        height: 2px;
    }

    .geekly-community__hero-stat {
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr) auto;
        align-items: center;
        min-height: 0;
        padding: 15px 0 14px;
        border-left: 0;
        border-bottom: 1px solid rgba(230, 237, 243, 0.12);
        column-gap: 14px;
    }

    .geekly-community__hero-stat strong {
        grid-row: 1 / span 2;
        margin: 0;
        font-size: 4rem;
        line-height: 0.72;
    }

    .geekly-community__hero-stat-label {
        font-size: 0.875rem;
    }

    .geekly-community__hero-stat-detail {
        margin-top: 3px;
        font-size: 0.625rem;
    }

    .geekly-community__hero-stat-signal {
        grid-column: 3;
        grid-row: 1 / span 2;
        margin: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .geekly-community__hero-leaderboard {
        transition: none;
    }
}


/* =============================================================================
   COMMUNITY DIRECTORY — PEOPLE-FIRST REFINEMENT
   Keeps the established live data and interactions while reducing card weight.
   ============================================================================= */
.geekly-community__new-members {
    margin-bottom: clamp(46px, 5vw, 68px);
    padding: 0 0 clamp(28px, 3vw, 38px);
    border-bottom: 1px solid rgba(230, 237, 243, 0.10);
}

.geekly-community__new-members-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.geekly-community__new-members-heading { min-width: 0; }

.geekly-community__new-members-label,
.geekly-community__directory-eyebrow,
.geekly-community__directory-control-label {
    color: var(--clr-text-muted);
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    line-height: 1;
    text-transform: uppercase;
}

.geekly-community__new-members-label,
.geekly-community__directory-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
}

.geekly-community__new-members-label::before,
.geekly-community__directory-eyebrow::before {
    display: inline-block;
    width: 20px;
    height: 2px;
    background: var(--clr-brand);
    content: '';
}

.geekly-community__new-members-intro {
    margin: 7px 0 0 29px;
    color: var(--clr-text-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.geekly-community__new-members-list {
    gap: 10px;
}

.geekly-community__new-member {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: center;
    min-height: 98px;
    padding: 13px;
    column-gap: 11px;
    row-gap: 0;
    border-color: rgba(230, 237, 243, 0.12);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(28, 27, 32, 0.86), rgba(20, 19, 24, 0.86));
    text-align: left;
}

.geekly-community__new-member:hover {
    border-color: color-mix(in srgb, var(--clr-brand) 42%, var(--clr-border));
    background: linear-gradient(135deg, rgba(38, 28, 33, 0.94), rgba(20, 19, 24, 0.94));
}

.geekly-community__new-member-avatar-wrap {
    grid-row: 1 / span 3;
    grid-column: 1;
}

.geekly-community__new-member-avatar {
    width: 48px;
    height: 48px;
    border-color: rgba(230, 237, 243, 0.18);
}

.geekly-community__new-member-level-dot { border-color: var(--clr-bg-elevated); }

.geekly-community__new-member-identity {
    display: flex;
    grid-column: 2;
    grid-row: 1 / span 2;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.geekly-community__new-member-name {
    overflow: hidden;
    max-width: 100%;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.05;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
}

.geekly-community__new-member-level {
    overflow: hidden;
    margin-top: 5px;
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.075em;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.geekly-community__new-member-follow {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    min-height: 24px;
    margin: 6px 0 0;
    padding: 3px 9px;
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.065em;
    line-height: 1;
    text-transform: uppercase;
}

.geekly-community__directory { margin-top: 0; }

.geekly-community__directory-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 18px;
}

.geekly-community__directory-title {
    margin: 9px 0 0;
    color: var(--clr-text-primary);
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.4vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 0.86;
    text-transform: uppercase;
}

.geekly-community__directory-intro {
    max-width: 330px;
    margin: 0 0 2px;
    color: var(--clr-text-muted);
    font-size: 0.875rem;
    line-height: 1.48;
}

.geekly-community__controls {
    display: grid;
    grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
    overflow: visible;
    border-color: rgba(230, 237, 243, 0.14);
    border-radius: 10px;
    background: linear-gradient(100deg, rgba(25, 24, 29, 0.94), rgba(17, 16, 20, 0.94));
}

.geekly-community__search-form {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    padding: 0 17px;
    border-right: 1px solid rgba(230, 237, 243, 0.12);
}

.geekly-community__directory-control-label {
    flex: 0 0 auto;
    color: var(--clr-text-dim);
    white-space: nowrap;
}

.geekly-community__search-wrap {
    min-width: 0;
    border-bottom: 0;
}

.geekly-community__search-wrap > svg {
    left: 1px;
    width: 15px;
    height: 15px;
}

.geekly-community__search-input {
    padding: 18px 32px 18px 29px;
    font-size: 0.9375rem;
}

.geekly-community__search-input:focus { background: transparent; }

.geekly-community__search-wrap:focus-within::after {
    position: absolute;
    right: 0;
    bottom: 7px;
    left: 29px;
    height: 1px;
    background: var(--clr-brand);
    content: '';
}

.geekly-community__search-clear { right: 0; }

.geekly-community__filters {
    display: grid;
    grid-template-columns: 1fr;
    min-width: 0;
}

.geekly-community__sort-group,
.geekly-community__level-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 10px 16px;
}

.geekly-community__sort-group {
    border-bottom: 1px solid rgba(230, 237, 243, 0.10);
    overflow: visible;
}

.geekly-community__sort-group .geekly-community__directory-control-label,
.geekly-community__level-filter .geekly-community__directory-control-label {
    min-width: 40px;
    margin-right: 5px;
}

.geekly-community__sort-btn {
    position: static;
    bottom: auto;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--clr-text-muted);
    font-size: 0.6875rem;
    line-height: 1.2;
}

.geekly-community__sort-btn:hover {
    border-color: rgba(230, 237, 243, 0.14);
    color: var(--clr-text-primary);
}

.geekly-community__sort-btn--active {
    border-color: color-mix(in srgb, var(--clr-brand) 55%, var(--clr-border));
    background: color-mix(in srgb, var(--clr-brand) 10%, transparent);
    color: var(--clr-text-primary);
}

.geekly-community__level-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.geekly-community__level-filter::-webkit-scrollbar { display: none; }

.geekly-community__level-btn {
    flex: 0 0 auto;
    padding: 4px 9px;
    border-radius: 4px;
    font-size: 0.625rem;
    line-height: 1.2;
}

.geekly-community__count {
    margin: 15px 0 -2px;
    color: var(--clr-text-muted);
}

.geekly-community__grid {
    margin-top: 26px;
    gap: 14px;
}

.geekly-community__member-card {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: center;
    min-height: 138px;
    padding: 17px;
    column-gap: 13px;
    row-gap: 0;
    border-color: rgba(230, 237, 243, 0.13);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(25, 24, 29, 0.92), rgba(19, 18, 23, 0.92));
    text-align: left;
}

@media (hover: hover) {
    .geekly-community__member-card:hover {
        border-color: rgba(230, 237, 243, 0.25);
        background: linear-gradient(145deg, rgba(34, 28, 33, 0.96), rgba(20, 19, 24, 0.96));
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
    }
}

.geekly-community__member-avatar-link {
    grid-column: 1;
    grid-row: 1 / span 3;
}

.geekly-community__member-avatar {
    width: 62px;
    height: 62px;
}

.geekly-community__member-identity {
    grid-column: 2;
    grid-row: 1;
    align-items: flex-start;
    gap: 3px;
    text-align: left;
}

.geekly-community__member-name {
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.012em;
}

.geekly-community__member-handle {
    color: var(--clr-text-muted);
    font-size: 0.6875rem;
}

.geekly-community__member-level-name {
    margin-top: 3px;
    font-size: 0.5625rem;
    letter-spacing: 0.1em;
}

.geekly-community__member-stats {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-start;
    gap: 7px;
    margin-top: 9px;
}

.geekly-community__member-stat {
    gap: 4px;
    color: var(--clr-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.015em;
}

.geekly-community__member-stat--xp { color: var(--clr-text-secondary); }
.geekly-community__member-stat svg { width: 10px; height: 10px; }

.geekly-community__follow-btn {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    min-height: 26px;
    margin-top: 10px;
    padding: 4px 9px;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    line-height: 1;
}

.geekly-community__member-name:focus-visible,
.geekly-community__new-member-name:focus-visible,
.geekly-community__member-avatar-link:focus-visible,
.geekly-community__new-member-avatar-wrap:focus-visible,
.geekly-community__sort-btn:focus-visible,
.geekly-community__level-btn:focus-visible,
.geekly-community__new-member-follow:focus-visible,
.geekly-community__follow-btn:focus-visible {
    outline: 2px solid var(--clr-brand);
    outline-offset: 3px;
}

@media (max-width: 1100px) {
    .geekly-community__controls { grid-template-columns: 1fr; }

    .geekly-community__search-form {
        grid-template-columns: 96px minmax(0, 1fr);
        border-right: 0;
        border-bottom: 1px solid rgba(230, 237, 243, 0.12);
    }

    .geekly-community__filters { grid-template-columns: 1fr 1.65fr; }
    .geekly-community__sort-group { border-right: 1px solid rgba(230, 237, 243, 0.10); border-bottom: 0; }
    .geekly-community__level-filter { padding-right: 14px; }
}

@media (max-width: 767px) {
    .geekly-community__new-members { margin-bottom: 40px; padding-bottom: 26px; }
    .geekly-community__new-members-header { margin-bottom: 12px; }
    .geekly-community__new-members-intro { font-size: 0.75rem; }
    .geekly-community__new-members-list { grid-template-columns: 1fr; gap: 8px; }
    .geekly-community__new-member { min-height: 78px; }

    .geekly-community__directory-header {
        display: block;
        margin-bottom: 15px;
    }

    .geekly-community__directory-title { font-size: 2.35rem; }
    .geekly-community__directory-intro { max-width: 100%; margin-top: 13px; font-size: 0.8125rem; }

    .geekly-community__controls { border-radius: 8px; }
    .geekly-community__search-form { grid-template-columns: 1fr; padding: 11px 14px 7px; }
    .geekly-community__search-form > .geekly-community__directory-control-label { display: none; }
    .geekly-community__search-input { padding-top: 12px; padding-bottom: 12px; }
    .geekly-community__search-wrap:focus-within::after { bottom: 3px; }

    .geekly-community__filters { grid-template-columns: 1fr; }
    .geekly-community__sort-group { border-right: 0; border-bottom: 1px solid rgba(230, 237, 243, 0.10); }
    .geekly-community__sort-group,
    .geekly-community__level-filter { padding: 10px 14px; }

    .geekly-community__grid { margin-top: 20px; gap: 10px; }

    .geekly-community__member-card {
        grid-template-columns: 54px minmax(0, 1fr);
        min-height: 124px;
        padding: 13px;
        column-gap: 10px;
    }

    .geekly-community__member-avatar { width: 54px; height: 54px; }
    .geekly-community__member-name { font-size: 0.9375rem; }
    .geekly-community__member-level-name { font-size: 0.5rem; }
    .geekly-community__member-stat { font-size: 0.625rem; }
    .geekly-community__member-stats { gap: 5px; margin-top: 7px; }
    .geekly-community__follow-btn { min-height: 28px; margin-top: 8px; }
}

@media (max-width: 430px) {
    .geekly-community__new-members-list { grid-template-columns: 1fr; }
    .geekly-community__level-filter { gap: 5px; }
    .geekly-community__level-btn { padding-right: 8px; padding-left: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .geekly-community__member-card,
    .geekly-community__new-member { transition: none; }
}


/* Final Community directory balance pass */
.geekly-community__new-members {
    margin-bottom: clamp(32px, 3vw, 44px);
    padding-bottom: clamp(22px, 2.3vw, 28px);
}

.geekly-community__controls {
    grid-template-columns: minmax(240px, 0.58fr) minmax(0, 1.42fr);
}

.geekly-community__new-member-self {
    display: inline-flex;
    grid-column: 2;
    grid-row: 3;
    align-items: center;
    min-height: 24px;
    margin-top: 6px;
    color: var(--clr-text-muted);
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.085em;
    line-height: 1;
    text-transform: uppercase;
}

.geekly-community__member-stat--xp {
    color: var(--clr-text-primary);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: 0.025em;
}

.geekly-community__member-stat--xp svg {
    width: 11px;
    height: 11px;
    color: #E6A817;
}

.geekly-community__member-stat--posts,
.geekly-community__member-stat--trophies {
    color: var(--clr-text-muted);
    opacity: 0.78;
}

@media (max-width: 1100px) {
    .geekly-community__filters { grid-template-columns: minmax(205px, 0.52fr) minmax(0, 1.48fr); }
}

@media (max-width: 767px) {
    .geekly-community__new-members {
        margin-bottom: 32px;
        padding-bottom: 20px;
    }

    .geekly-community__member-stat--xp { font-size: 0.6875rem; }
}


/* Keep Follow-state labels stable when the hover copy changes. */
.geekly-community__member-card,
.geekly-community__new-member {
    --community-follow-control-width: 84px;
}

.geekly-community__follow-btn,
.geekly-community__new-member-follow {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    inline-size: var(--community-follow-control-width);
    justify-content: center;
    text-align: center;
}