/*
 * fyt-web.css — Find Your Two  |  Theme: Dark Gold
 * Palette from site header: #0D0D0D bg · #C9A84C gold · #1A1A1A card · #2A2A2A border
 */

/* ── CSS custom properties ─────────────────────────────────────────────────── */
:root {
    --fyt-gold:           #C9A84C;
    --fyt-gold-light:     #E2C97E;
    --fyt-gold-dim:       rgba(201,168,76,.15);
    --fyt-gold-border:    rgba(201,168,76,.35);
    --fyt-bg:             #0D0D0D;
    --fyt-bg-2:           #141414;
    --fyt-card-bg:        #1A1A1A;
    --fyt-card-bg-2:      #222222;
    --fyt-border:         #2A2A2A;
    --fyt-border-light:   #333333;
    --fyt-text:           #F0EDE6;
    --fyt-text-muted:     #888880;
    --fyt-text-dim:       #555550;
    --fyt-success:        #4ADE80;
    --fyt-success-bg:     rgba(74,222,128,.12);
    --fyt-danger:         #F87171;
    --fyt-danger-bg:      rgba(248,113,113,.12);
    --fyt-warning:        #FBBF24;
    --fyt-warning-bg:     rgba(251,191,36,.12);
    --fyt-primary:        var(--fyt-gold);
    --fyt-primary-dark:   #B8943C;
    --fyt-primary-light:  var(--fyt-gold-dim);
    --fyt-radius:         10px;
    --fyt-radius-sm:      7px;
    --fyt-shadow:         0 1px 3px rgba(0,0,0,.5), 0 1px 8px rgba(0,0,0,.3);
    --fyt-shadow-hover:   0 4px 20px rgba(201,168,76,.18), 0 2px 8px rgba(0,0,0,.5);
    --fyt-shadow-gold:    0 0 0 2px rgba(201,168,76,.4);
    --fyt-font:           -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fyt-transition:     all .18s ease;
}

/* ── Global gold colour enforcement ─────────────────────────────────────── */
/* All links on FYT pages = gold, no underline */
.fyt-plugin-page a:not(.fyt-btn):not(.fyt-auth-social-btn):not(.fyt-nav-link):not(.fyt-tab) {
    color: #C9A84C !important;
    text-decoration: none !important;
}
.fyt-plugin-page a:not(.fyt-btn):not(.fyt-auth-social-btn):not(.fyt-nav-link):not(.fyt-tab):hover {
    color: #E2C97E !important;
}

/* ── Mode switcher shortcode ─────────────────────────────────────────────── */
.fyt-mode-switcher-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border: none !important;
    background: linear-gradient(135deg, #C9A84C 0%, #E2C97E 100%) !important;
    color: #0D0D0D !important;
    box-shadow: 0 2px 12px rgba(201,168,76,.35) !important;
    transition: all .18s ease !important;
    font-family: var(--fyt-font) !important;
    letter-spacing: .01em !important;
}
.fyt-mode-switcher-btn:hover {
    box-shadow: 0 4px 20px rgba(201,168,76,.55) !important;
    transform: translateY(-1px) !important;
}

/* ── Base wrapper ──────────────────────────────────────────────────────────── */
.fyt-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    font-family: var(--fyt-font);
    color: var(--fyt-text);
    box-sizing: border-box;
}

*, *::before, *::after { box-sizing: inherit; }

/* ── Buttons (shared) ──────────────────────────────────────────────────────── */
.fyt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: var(--fyt-radius-sm);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all .18s ease;
    line-height: 1.4;
    white-space: nowrap;
    letter-spacing: .02em;
    background-image: none !important;
    box-shadow: none;
    text-shadow: none;
}
.fyt-btn--primary {
    background: linear-gradient(135deg, #C9A84C 0%, #E2C97E 100%) !important;
    color: #0D0D0D !important;
    border-color: #C9A84C !important;
    box-shadow: 0 2px 10px rgba(201,168,76,.3);
}
.fyt-btn--primary:hover {
    background: linear-gradient(135deg, #E2C97E 0%, #C9A84C 100%) !important;
    box-shadow: 0 4px 18px rgba(201,168,76,.45);
    color: #0D0D0D !important;
    transform: translateY(-1px);
}
.fyt-btn--ghost {
    background: transparent !important;
    background-image: none !important;
    color: #C9A84C !important;
    border-color: rgba(201,168,76,.4) !important;
}
.fyt-btn--ghost:hover {
    background: rgba(201,168,76,.12) !important;
    background-image: none !important;
    border-color: #C9A84C !important;
    color: #E2C97E !important;
}
.fyt-btn--success {
    background: transparent !important;
    background-image: none !important;
    color: #4ADE80 !important;
    border-color: rgba(74,222,128,.4) !important;
}
.fyt-btn--success:hover { background: rgba(74,222,128,.12) !important; background-image: none !important; }
.fyt-btn--danger {
    background: transparent !important;
    background-image: none !important;
    color: #F87171 !important;
    border-color: rgba(248,113,113,.4) !important;
}
.fyt-btn--danger:hover { background: rgba(248,113,113,.12) !important; background-image: none !important; }
.fyt-btn--full  { width: 100%; }
.fyt-btn--lg    { padding: 13px 28px; font-size: 15px; }
.fyt-btn--sm    { padding: 5px 12px; font-size: 12px; }
.fyt-btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; }

/* Social login buttons */
.fyt-btn--google {
    background: #1E1E1E !important;
    background-image: none !important;
    color: #F0EDE6 !important;
    border-color: #333333 !important;
}
.fyt-btn--google:hover { background: #2A2A2A !important; background-image: none !important; border-color: rgba(201,168,76,.35) !important; }

.fyt-btn--apple {
    background: #1E1E1E !important;
    background-image: none !important;
    color: #F0EDE6 !important;
    border-color: #333333 !important;
}
.fyt-btn--apple:hover { background: #2A2A2A !important; background-image: none !important; border-color: rgba(201,168,76,.35) !important; }

/* ── Flash / alerts ────────────────────────────────────────────────────────── */
.fyt-flash {
    padding: 13px 18px;
    border-radius: var(--fyt-radius-sm);
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid;
}
.fyt-flash--success { background: var(--fyt-success-bg); color: var(--fyt-success);  border-color: rgba(74,222,128,.3); }
.fyt-flash--error   { background: var(--fyt-danger-bg);  color: var(--fyt-danger);   border-color: rgba(248,113,113,.3); }

.fyt-error-box {
    background: var(--fyt-danger-bg);
    border: 1px solid rgba(248,113,113,.3);
    border-radius: var(--fyt-radius);
    padding: 24px;
    text-align: center;
    color: var(--fyt-text);
}
.fyt-error-box h3 { margin: 0 0 8px; color: var(--fyt-danger); }
.fyt-error-box p  { margin: 0 0 16px; color: var(--fyt-text-muted); }

.fyt-error { color: var(--fyt-danger); font-size: 14px; padding: 20px; text-align: center; }
.fyt-coming-soon { color: var(--fyt-text-muted); font-style: italic; padding: 40px; text-align: center; }

/* ── Toasts ────────────────────────────────────────────────────────────────── */
#fyt-toast-container {
    position: fixed; bottom: 24px; right: 24px; z-index: 9999;
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.fyt-toast {
    min-width: 280px; max-width: 380px;
    padding: 12px 16px;
    border-radius: var(--fyt-radius-sm);
    font-size: 14px; font-weight: 600;
    box-shadow: 0 4px 20px rgba(0,0,0,.5);
    pointer-events: auto;
    animation: fyt-toast-in .25s ease forwards;
    display: flex; align-items: center; gap: 10px;
    border: 1px solid;
}
.fyt-toast--success { background: #0D1F14; color: var(--fyt-success); border-color: rgba(74,222,128,.3); }
.fyt-toast--error   { background: #1F0D0D; color: var(--fyt-danger);  border-color: rgba(248,113,113,.3); }
.fyt-toast--info    { background: #1A1508; color: var(--fyt-gold);    border-color: var(--fyt-gold-border); }
.fyt-toast-close { margin-left: auto; cursor: pointer; opacity: .7; background: none; border: none; color: inherit; font-size: 16px; line-height: 1; padding: 0; }
@keyframes fyt-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ── Forms ──────────────────────────────────────────────────────────────────── */
.fyt-form-group  { display: flex; flex-direction: column; gap: 6px; }
.fyt-form-row    { display: flex; gap: 16px; }
.fyt-form-group--half { flex: 1; min-width: 0; }
.fyt-label { font-size: 13px; font-weight: 600; color: var(--fyt-text-muted); letter-spacing: .03em; text-transform: uppercase; }
.fyt-required { color: var(--fyt-gold); }
.fyt-optional  { font-weight: 400; color: var(--fyt-text-dim); text-transform: none; }

.fyt-input,
.fyt-textarea,
.fyt-select-lg {
    padding: 11px 14px;
    border: 1px solid #333333 !important;
    border-radius: 7px;
    font-size: 14px;
    color: #F0EDE6 !important;
    background: #141414 !important;
    background-image: none !important;
    outline: none;
    width: 100%;
    transition: all .18s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-shadow: none !important;
}
.fyt-input:focus,
.fyt-textarea:focus,
.fyt-select-lg:focus {
    border-color: #C9A84C !important;
    box-shadow: 0 0 0 2px rgba(201,168,76,.4) !important;
}
.fyt-input::placeholder,
.fyt-textarea::placeholder { color: #555550 !important; }
.fyt-textarea { resize: vertical; min-height: 80px; }

.fyt-select {
    padding: 8px 12px;
    border: 1px solid #333333 !important;
    border-radius: 7px;
    font-size: 13px;
    background: #141414 !important;
    background-image: none !important;
    color: #F0EDE6 !important;
    cursor: pointer;
    outline: none;
    transition: all .18s ease;
    box-shadow: none !important;
}
.fyt-select:focus { border-color: #C9A84C !important; box-shadow: 0 0 0 2px rgba(201,168,76,.4) !important; }

/* ── Filter bar ────────────────────────────────────────────────────────────── */
.fyt-filter-bar {
    background: var(--fyt-card-bg);
    border: 1px solid var(--fyt-border);
    border-radius: var(--fyt-radius);
    padding: 16px 20px;
    margin-bottom: 24px;
    box-shadow: var(--fyt-shadow);
}
.fyt-filter-row { display: flex; flex-direction: column; gap: 12px; }
.fyt-filter-categories {
    display: flex; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; -webkit-overflow-scrolling: touch;
}
.fyt-filter-categories::-webkit-scrollbar { display: none; }
.fyt-pill {
    flex-shrink: 0; padding: 6px 16px; border-radius: 20px;
    border: 1px solid #2A2A2A !important; background: #141414 !important;
    background-image: none !important;
    color: #888880 !important; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all .18s ease; white-space: nowrap; line-height: 1.4;
    box-shadow: none !important; text-shadow: none !important;
}
.fyt-pill:hover { border-color: #C9A84C !important; color: #C9A84C !important; background: rgba(201,168,76,.15) !important; background-image: none !important; }
.fyt-pill.active { background: rgba(201,168,76,.15) !important; background-image: none !important; border-color: #C9A84C !important; color: #C9A84C !important; }

.fyt-filter-secondary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.fyt-btn-location {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
    border: 1px solid #2A2A2A !important; border-radius: 7px;
    font-size: 13px; font-weight: 600; background: #141414 !important;
    background-image: none !important;
    color: #888880 !important; cursor: pointer; transition: all .18s ease;
    box-shadow: none !important; text-shadow: none !important;
}
.fyt-btn-location:hover, .fyt-btn-location.active { border-color: #C9A84C !important; color: #C9A84C !important; background: rgba(201,168,76,.15) !important; background-image: none !important; }

.fyt-toggle-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--fyt-text-muted); user-select: none; }
.fyt-toggle-label input { display: none; }
.fyt-toggle-track { display: inline-block; width: 36px; height: 20px; background: var(--fyt-border-light); border-radius: 10px; position: relative; transition: var(--fyt-transition); flex-shrink: 0; }
.fyt-toggle-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--fyt-text-dim); transition: var(--fyt-transition); }
.fyt-toggle-label input:checked + .fyt-toggle-track { background: var(--fyt-gold); }
.fyt-toggle-label input:checked + .fyt-toggle-track::after { transform: translateX(16px); background: #0D0D0D; }

.fyt-filter-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 13px; color: var(--fyt-text-muted); }
.fyt-clear-filters { color: var(--fyt-gold); text-decoration: none; font-weight: 600; }
.fyt-clear-filters:hover { color: var(--fyt-gold-light); }

/* ── Opportunities grid ────────────────────────────────────────────────────── */
.fyt-opportunities-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px; min-height: 200px; transition: opacity .2s;
}
.fyt-opportunities-grid.fyt-loading { opacity: .4; pointer-events: none; }

/* ── Card ──────────────────────────────────────────────────────────────────── */
.fyt-card {
    display: flex; flex-direction: column;
    background: var(--fyt-card-bg); border: 1px solid var(--fyt-border);
    border-radius: var(--fyt-radius); overflow: hidden;
    text-decoration: none; color: inherit;
    box-shadow: var(--fyt-shadow); transition: var(--fyt-transition);
}
.fyt-card:hover {
    box-shadow: var(--fyt-shadow-hover); transform: translateY(-3px);
    border-color: var(--fyt-gold-border);
}
.fyt-card-image { position: relative; height: 180px; overflow: hidden; background: var(--fyt-bg-2); }
.fyt-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.fyt-card:hover .fyt-card-image img { transform: scale(1.05); }

.fyt-badge { position: absolute; top: 10px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; line-height: 1.4; }
.fyt-badge--full    { right: 10px; background: var(--fyt-danger-bg); color: var(--fyt-danger); border: 1px solid rgba(248,113,113,.3); }
.fyt-badge--limited { right: 10px; background: var(--fyt-warning-bg); color: var(--fyt-warning); border: 1px solid rgba(251,191,36,.3); }
.fyt-badge--kids    { left: 10px; background: var(--fyt-success-bg); color: var(--fyt-success); border: 1px solid rgba(74,222,128,.3); }

.fyt-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.fyt-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.fyt-tag { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; background: var(--fyt-gold-dim); color: var(--fyt-gold); text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--fyt-gold-border); }

.fyt-card-title { font-size: 15px; font-weight: 700; line-height: 1.35; margin: 0; color: var(--fyt-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fyt-card-org { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fyt-text-muted); margin: 0; }
.fyt-org-logo { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; }

.fyt-card-meta { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.fyt-meta-item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fyt-text-muted); }
.fyt-meta-item svg { flex-shrink: 0; }

.fyt-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--fyt-border); font-size: 12px; }
.fyt-volunteers-stat { display: flex; align-items: center; gap: 5px; color: var(--fyt-text-muted); font-weight: 500; }
.fyt-volunteers-stat.full { color: var(--fyt-danger); }
.fyt-time-away { font-weight: 700; color: var(--fyt-gold); }

/* ── Empty / spinner / pagination ──────────────────────────────────────────── */
.fyt-empty-state { grid-column: 1/-1; text-align: center; padding: 60px 20px; color: var(--fyt-text-muted); }
.fyt-empty-state svg { margin-bottom: 16px; opacity: .3; }
.fyt-empty-state h3 { font-size: 18px; margin: 0 0 8px; color: var(--fyt-text); }
.fyt-empty-state p { margin: 0; font-size: 14px; }
.fyt-empty-state a { color: var(--fyt-gold); }

.fyt-spinner { grid-column: 1/-1; display: flex; justify-content: center; align-items: center; gap: 6px; padding: 60px; }
.fyt-spinner span { width: 10px; height: 10px; border-radius: 50%; background: var(--fyt-gold); animation: fyt-bounce .6s infinite alternate; }
.fyt-spinner span:nth-child(2) { animation-delay: .2s; }
.fyt-spinner span:nth-child(3) { animation-delay: .4s; }
@keyframes fyt-bounce { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-10px); opacity: .3; } }

.fyt-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 32px; padding-bottom: 20px; }
.fyt-page-btn {
    padding: 8px 20px; border: 1px solid var(--fyt-gold-border);
    border-radius: var(--fyt-radius-sm); background: transparent;
    color: var(--fyt-gold); font-size: 13px; font-weight: 700;
    cursor: pointer; text-decoration: none; transition: var(--fyt-transition);
}
.fyt-page-btn:hover { background: var(--fyt-gold-dim); box-shadow: var(--fyt-shadow-gold); }
.fyt-page-info { font-size: 13px; color: var(--fyt-text-muted); }

/* ── Section heading / back link ────────────────────────────────────────────── */
.fyt-section-heading { font-size: 17px; font-weight: 700; color: var(--fyt-text); margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--fyt-border); }
.fyt-back-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--fyt-text-muted); text-decoration: none; margin-bottom: 20px; transition: var(--fyt-transition); }
.fyt-back-link:hover { color: var(--fyt-gold); }

/* ── Tabs ──────────────────────────────────────────────────────────────────── */
.fyt-tabs { display: flex; border-bottom: 1px solid var(--fyt-border); margin-bottom: 24px; gap: 0; }
.fyt-tab { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; font-size: 14px; font-weight: 600; color: var(--fyt-text-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: var(--fyt-transition); }
.fyt-tab:hover { color: var(--fyt-gold); }
.fyt-tab.active { color: var(--fyt-gold); border-bottom-color: var(--fyt-gold); }
.fyt-tab-badge { background: var(--fyt-gold); color: #0D0D0D; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 10px; line-height: 1.6; }

/* ── Opportunity detail ─────────────────────────────────────────────────────── */
.fyt-detail-wrap { padding-top: 20px; padding-bottom: 40px; }
.fyt-detail-layout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
.fyt-detail-hero { position: relative; border-radius: var(--fyt-radius); overflow: hidden; height: 340px; background: var(--fyt-bg-2); margin-bottom: 20px; }
.fyt-detail-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fyt-detail-status-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.fyt-detail-status-overlay.cancelled { background: rgba(248,113,113,.5); color: #fff; }
.fyt-detail-status-overlay.past      { background: rgba(0,0,0,.6); color: var(--fyt-text-muted); }
.fyt-detail-status-overlay.full      { background: rgba(251,191,36,.4); color: #fff; }

.fyt-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fyt-tag--kids { background: var(--fyt-success-bg); color: var(--fyt-success); border-color: rgba(74,222,128,.3); }

.fyt-detail-title { font-size: 26px; font-weight: 800; line-height: 1.25; margin: 0 0 16px; color: var(--fyt-text); }

.fyt-detail-charity-strip { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--fyt-bg-2); border-radius: var(--fyt-radius-sm); border: 1px solid var(--fyt-border); margin-bottom: 20px; }
.fyt-detail-charity-logo   { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.fyt-detail-charity-avatar { width: 44px; height: 44px; border-radius: 8px; background: var(--fyt-gold-dim); color: var(--fyt-gold); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; flex-shrink: 0; }
.fyt-detail-charity-info   { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fyt-detail-charity-name   { font-size: 14px; font-weight: 700; color: var(--fyt-text); }
.fyt-detail-charity-mission { font-size: 12px; color: var(--fyt-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyt-detail-charity-link   { font-size: 12px; font-weight: 600; color: var(--fyt-gold); text-decoration: none; white-space: nowrap; }
.fyt-detail-charity-link:hover { color: var(--fyt-gold-light); }

.fyt-detail-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.fyt-info-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--fyt-bg-2); border: 1px solid var(--fyt-border); border-radius: var(--fyt-radius-sm); }
.fyt-info-item--full { grid-column: 1/-1; }
.fyt-info-icon { color: var(--fyt-gold); flex-shrink: 0; margin-top: 1px; }
.fyt-info-item > div { display: flex; flex-direction: column; gap: 2px; }
.fyt-info-label { font-size: 11px; color: var(--fyt-text-dim); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.fyt-info-value { font-size: 14px; font-weight: 600; color: var(--fyt-text); }

.fyt-detail-progress { margin-bottom: 24px; }
.fyt-progress-header { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--fyt-text-muted); margin-bottom: 6px; }
.fyt-progress-bar { height: 6px; background: var(--fyt-border); border-radius: 3px; overflow: hidden; }
.fyt-progress-fill { height: 100%; background: linear-gradient(90deg, var(--fyt-gold), var(--fyt-gold-light)); border-radius: 3px; transition: width .4s ease; }
.fyt-progress-fill.full { background: var(--fyt-danger); }

.fyt-detail-section { margin-bottom: 28px; }
.fyt-detail-description { font-size: 15px; line-height: 1.75; color: var(--fyt-text-muted); }
.fyt-detail-description p { margin: 0 0 14px; }

.fyt-map { height: 280px; border-radius: var(--fyt-radius-sm); border: 1px solid var(--fyt-border); overflow: hidden; background: var(--fyt-bg-2); }
.fyt-map-address { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fyt-text-muted); margin: 8px 0 0; }
.fyt-directions-link { color: var(--fyt-gold); font-weight: 600; text-decoration: none; margin-left: 4px; }
.fyt-directions-link:hover { color: var(--fyt-gold-light); }

.fyt-detail-sidebar { position: sticky; top: 90px; }
.fyt-sidebar-card { background: var(--fyt-card-bg); border: 1px solid var(--fyt-border); border-radius: var(--fyt-radius); padding: 20px; box-shadow: var(--fyt-shadow); }
.fyt-sidebar-header { display: flex; align-items: baseline; gap: 6px; margin-bottom: 12px; }
.fyt-sidebar-hours { font-size: 32px; font-weight: 800; color: var(--fyt-gold); }
.fyt-sidebar-hours-label { font-size: 13px; color: var(--fyt-text-muted); }
.fyt-sidebar-date { font-size: 14px; color: var(--fyt-text); margin-bottom: 8px; }
.fyt-sidebar-location { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: var(--fyt-text-muted); margin-bottom: 8px; }
.fyt-sidebar-divider { border: none; border-top: 1px solid var(--fyt-border); margin: 14px 0; }
.fyt-sidebar-status { font-size: 14px; font-weight: 600; padding: 10px 14px; border-radius: var(--fyt-radius-sm); text-align: center; }
.fyt-sidebar-status.cancelled { background: var(--fyt-danger-bg); color: var(--fyt-danger); border: 1px solid rgba(248,113,113,.2); }
.fyt-sidebar-status.past      { background: var(--fyt-bg-2); color: var(--fyt-text-muted); border: 1px solid var(--fyt-border); }
.fyt-sidebar-status.full      { background: var(--fyt-warning-bg); color: var(--fyt-warning); border: 1px solid rgba(251,191,36,.2); }
.fyt-sidebar-enrolled { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--fyt-success); padding: 12px; background: var(--fyt-success-bg); border-radius: var(--fyt-radius-sm); border: 1px solid rgba(74,222,128,.2); }
.fyt-sidebar-note { font-size: 12px; color: var(--fyt-text-muted); text-align: center; margin: 10px 0 0; }
.fyt-sidebar-login-msg { font-size: 13px; color: var(--fyt-text-muted); text-align: center; margin: 0 0 10px; }
.fyt-sidebar-contact { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fyt-text-muted); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--fyt-border); }

/* ── Enrol form ─────────────────────────────────────────────────────────────── */
.fyt-enroll-wrap { padding-top: 20px; padding-bottom: 40px; }
.fyt-enroll-layout { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; }
.fyt-enroll-title    { font-size: 24px; font-weight: 800; margin: 0 0 6px; }
.fyt-enroll-subtitle { font-size: 14px; color: var(--fyt-text-muted); margin: 0 0 24px; }
.fyt-form { display: flex; flex-direction: column; gap: 18px; }
.fyt-enroll-terms { font-size: 12px; color: var(--fyt-text-dim); text-align: center; margin: 0; }

.fyt-enroll-success { text-align: center; padding: 40px 20px; }
.fyt-success-icon { width: 80px; height: 80px; border-radius: 50%; background: var(--fyt-success-bg); color: var(--fyt-success); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; border: 1px solid rgba(74,222,128,.3); }
.fyt-enroll-success h2 { font-size: 22px; font-weight: 800; margin: 0 0 8px; }
.fyt-enroll-success p  { color: var(--fyt-text-muted); font-size: 14px; margin: 0 0 20px; }
.fyt-success-actions   { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.fyt-enroll-opp-card { background: var(--fyt-card-bg); border: 1px solid var(--fyt-border); border-radius: var(--fyt-radius); overflow: hidden; box-shadow: var(--fyt-shadow); position: sticky; top: 90px; }
.fyt-enroll-opp-img  { width: 100%; height: 160px; object-fit: cover; display: block; }
.fyt-enroll-opp-body { padding: 16px; }
.fyt-enroll-opp-org  { font-size: 12px; color: var(--fyt-gold); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: 4px; }
.fyt-enroll-opp-title { font-size: 15px; font-weight: 700; margin: 0 0 12px; color: var(--fyt-text); }
.fyt-enroll-opp-meta  { display: flex; flex-direction: column; gap: 6px; }

/* ── Volunteer dashboard ────────────────────────────────────────────────────── */
.fyt-dashboard-wrap { padding-top: 24px; padding-bottom: 40px; }
.fyt-dashboard-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 12px; }
.fyt-dashboard-greeting { display: flex; align-items: center; gap: 14px; }
.fyt-dashboard-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--fyt-gold-border); }
.fyt-avatar-placeholder { background: var(--fyt-gold-dim); color: var(--fyt-gold); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; border-radius: 50%; width: 52px; height: 52px; flex-shrink: 0; border: 2px solid var(--fyt-gold-border); }
.fyt-dashboard-title    { font-size: 22px; font-weight: 800; margin: 0 0 2px; }
.fyt-dashboard-subtitle { font-size: 13px; color: var(--fyt-text-muted); margin: 0; }

.fyt-dashboard-stats { display: flex; align-items: center; gap: 0; background: var(--fyt-card-bg); border: 1px solid var(--fyt-border); border-radius: var(--fyt-radius); padding: 12px 20px; box-shadow: var(--fyt-shadow); }
.fyt-stat { display: flex; flex-direction: column; align-items: center; padding: 0 20px; }
.fyt-stat-value { font-size: 22px; font-weight: 800; color: var(--fyt-text); line-height: 1.1; }
.fyt-stat-score { color: var(--fyt-gold); }
.fyt-stat-label { font-size: 11px; color: var(--fyt-text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-top: 2px; }
.fyt-stat-divider { width: 1px; height: 36px; background: var(--fyt-border); }

.fyt-impact-teaser-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--fyt-gold); text-decoration: none; margin-bottom: 24px; }
.fyt-impact-teaser-link:hover { color: var(--fyt-gold-light); }

.fyt-participation-list { display: flex; flex-direction: column; gap: 14px; }
.fyt-participation-card { display: grid; grid-template-columns: 120px 1fr auto; gap: 0; background: var(--fyt-card-bg); border: 1px solid var(--fyt-border); border-radius: var(--fyt-radius); overflow: hidden; box-shadow: var(--fyt-shadow); transition: var(--fyt-transition); }
.fyt-participation-card:hover { box-shadow: var(--fyt-shadow-hover); border-color: var(--fyt-gold-border); }

.fyt-participation-image { display: block; overflow: hidden; flex-shrink: 0; }
.fyt-participation-image img { width: 120px; height: 100%; min-height: 100px; object-fit: cover; display: block; transition: transform .3s; }
.fyt-participation-card:hover .fyt-participation-image img { transform: scale(1.04); }

.fyt-participation-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fyt-participation-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fyt-participation-org { font-size: 11px; font-weight: 700; color: var(--fyt-gold); text-transform: uppercase; letter-spacing: .04em; }
.fyt-participation-badges { display: flex; gap: 6px; flex-wrap: wrap; }

.fyt-status-pill, .fyt-attend-pill { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; line-height: 1.6; }
.fyt-status--pending   { background: var(--fyt-warning-bg); color: var(--fyt-warning); border: 1px solid rgba(251,191,36,.2); }
.fyt-status--confirmed { background: var(--fyt-success-bg); color: var(--fyt-success); border: 1px solid rgba(74,222,128,.2); }
.fyt-status--cancelled { background: var(--fyt-danger-bg);  color: var(--fyt-danger);  border: 1px solid rgba(248,113,113,.2); }
.fyt-attend--present    { background: var(--fyt-success-bg); color: var(--fyt-success); border: 1px solid rgba(74,222,128,.2); }
.fyt-attend--absent     { background: var(--fyt-danger-bg);  color: var(--fyt-danger);  border: 1px solid rgba(248,113,113,.2); }
.fyt-attend--checked-in { background: var(--fyt-gold-dim); color: var(--fyt-gold); border: 1px solid var(--fyt-gold-border); }

.fyt-participation-title { font-size: 15px; font-weight: 700; color: var(--fyt-text); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fyt-participation-title:hover { color: var(--fyt-gold); }
.fyt-participation-meta { display: flex; flex-direction: column; gap: 3px; }
.fyt-hours-awarded { color: var(--fyt-success); margin-left: 4px; }
.fyt-participation-actions { display: flex; flex-direction: column; gap: 6px; padding: 14px; align-items: flex-end; justify-content: center; flex-shrink: 0; }
.fyt-dashboard-cta { text-align: center; margin-top: 32px; }

/* ── Impact dashboard ───────────────────────────────────────────────────────── */
.fyt-impact-wrap { padding-top: 28px; padding-bottom: 48px; }
.fyt-impact-hero { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; background: var(--fyt-card-bg); border: 1px solid var(--fyt-border); border-radius: var(--fyt-radius); padding: 24px 28px; margin-bottom: 24px; box-shadow: var(--fyt-shadow); }
.fyt-impact-hero-left { display: flex; align-items: center; gap: 16px; }
.fyt-impact-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--fyt-gold-border); }
.fyt-impact-name { font-size: 22px; font-weight: 800; margin: 0 0 6px; color: var(--fyt-text); }
.fyt-impact-level { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; border: 1px solid; letter-spacing: .04em; text-transform: uppercase; }
.fyt-impact-score-display { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fyt-impact-score-num { font-size: 52px; font-weight: 900; line-height: 1; letter-spacing: -.02em; color: var(--fyt-gold); }
.fyt-impact-score-label { font-size: 12px; font-weight: 700; color: var(--fyt-text-muted); text-transform: uppercase; letter-spacing: .06em; }
.fyt-impact-score-max { font-size: 11px; color: var(--fyt-text-dim); }

.fyt-impact-stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 28px; }
.fyt-impact-stat-card { display: flex; flex-direction: column; align-items: center; padding: 20px 16px; background: var(--fyt-card-bg); border: 1px solid var(--fyt-border); border-radius: var(--fyt-radius); box-shadow: var(--fyt-shadow); gap: 4px; text-align: center; transition: var(--fyt-transition); }
.fyt-impact-stat-card:hover { box-shadow: var(--fyt-shadow-hover); transform: translateY(-2px); border-color: var(--fyt-gold-border); }
.fyt-impact-stat-card.on-fire { border-color: rgba(251,191,36,.4); background: var(--fyt-warning-bg); }
.fyt-impact-stat-icon  { font-size: 24px; line-height: 1; }
.fyt-impact-stat-value { font-size: 32px; font-weight: 800; color: var(--fyt-gold); line-height: 1.1; }
.fyt-impact-stat-label { font-size: 12px; color: var(--fyt-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

.fyt-impact-body { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.fyt-impact-main { display: flex; flex-direction: column; gap: 24px; }
.fyt-impact-side { display: flex; flex-direction: column; gap: 24px; }

.fyt-impact-card { background: var(--fyt-card-bg); border: 1px solid var(--fyt-border); border-radius: var(--fyt-radius); padding: 22px 24px; box-shadow: var(--fyt-shadow); }
.fyt-impact-card-title { font-size: 16px; font-weight: 700; color: var(--fyt-text); margin: 0 0 4px; }
.fyt-impact-card-desc  { font-size: 13px; color: var(--fyt-text-muted); margin: 0 0 18px; }

.fyt-chart-wrap { position: relative; height: 220px; margin-bottom: 14px; }
.fyt-chart-summary { display: flex; gap: 24px; padding-top: 12px; border-top: 1px solid var(--fyt-border); }
.fyt-chart-stat { display: flex; flex-direction: column; gap: 2px; }
.fyt-chart-stat-val { font-size: 20px; font-weight: 800; color: var(--fyt-text); }
.fyt-chart-stat-lbl { font-size: 12px; color: var(--fyt-text-muted); font-weight: 500; }

.fyt-score-rings { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; text-align: center; }
.fyt-score-ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fyt-score-ring { width: 80px; height: 80px; transform: rotate(-90deg); }
.fyt-ring-bg   { fill: none; stroke: var(--fyt-border); stroke-width: 8; }
.fyt-ring-fill { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.fyt-ring-label { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: -4px; }
.fyt-ring-pct  { font-size: 20px; font-weight: 800; color: var(--fyt-text); }
.fyt-ring-name { font-size: 13px; font-weight: 700; color: var(--fyt-text); }
.fyt-ring-desc { font-size: 11px; color: var(--fyt-text-muted); margin: 0; line-height: 1.4; }
.fyt-ring-weight { font-size: 11px; color: var(--fyt-text-dim); font-weight: 600; margin: 0; }

.fyt-cat-bars { display: flex; flex-direction: column; gap: 12px; }
.fyt-cat-bar-row { display: grid; grid-template-columns: 140px 1fr 36px; align-items: center; gap: 10px; }
.fyt-cat-bar-label { font-size: 13px; font-weight: 600; color: var(--fyt-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyt-cat-bar-track { height: 8px; background: var(--fyt-border); border-radius: 4px; overflow: hidden; }
.fyt-cat-bar-fill  { height: 100%; border-radius: 4px; transition: width .5s ease; }
.fyt-cat-bar-pct   { font-size: 12px; font-weight: 700; color: var(--fyt-text-muted); text-align: right; }

.fyt-badges-grid { display: flex; flex-direction: column; gap: 10px; }
.fyt-badge-item { display: grid; grid-template-columns: 44px 1fr 24px; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--fyt-radius-sm); border: 1px solid var(--fyt-border); transition: var(--fyt-transition); }
.fyt-badge-item.earned { background: linear-gradient(135deg, var(--fyt-gold-dim), rgba(201,168,76,.08)); border-color: var(--fyt-gold-border); }
.fyt-badge-item.locked { background: var(--fyt-bg-2); opacity: .5; }
.fyt-badge-icon { font-size: 24px; text-align: center; line-height: 1; }
.fyt-badge-item.locked .fyt-badge-icon { filter: grayscale(1); }
.fyt-badge-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fyt-badge-name  { font-size: 14px; font-weight: 700; color: var(--fyt-text); }
.fyt-badge-desc  { font-size: 12px; color: var(--fyt-text-muted); }
.fyt-badge-earned-date { font-size: 11px; color: var(--fyt-gold); font-weight: 600; }
.fyt-badge-req   { font-size: 11px; color: var(--fyt-text-dim); }
.fyt-badge-check { font-size: 16px; color: var(--fyt-gold); font-weight: 700; }
.fyt-badge-lock  { font-size: 14px; }

.fyt-next-level-name { font-size: 18px; font-weight: 800; color: var(--fyt-text); margin: 0 0 4px; }
.fyt-next-level-name span { font-size: 13px; font-weight: 500; color: var(--fyt-text-muted); }
.fyt-next-level-remaining { font-size: 12px; color: var(--fyt-text-muted); margin: 4px 0 0; }

/* ── Charity dashboard ───────────────────────────────────────────────────────── */
.fyt-charity-dashboard-wrap { padding-top: 24px; padding-bottom: 48px; }
.fyt-charity-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.fyt-charity-header-left { display: flex; align-items: center; gap: 14px; }
.fyt-charity-logo { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--fyt-gold-border); }
.fyt-charity-title    { font-size: 22px; font-weight: 800; margin: 0 0 2px; }
.fyt-charity-subtitle { font-size: 13px; color: var(--fyt-text-muted); margin: 0; }

.fyt-charity-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 28px; }
.fyt-charity-stat-card { display: flex; flex-direction: column; align-items: center; padding: 18px 14px; background: var(--fyt-card-bg); border: 1px solid var(--fyt-border); border-radius: var(--fyt-radius); box-shadow: var(--fyt-shadow); gap: 4px; text-align: center; transition: var(--fyt-transition); }
.fyt-charity-stat-card:hover { box-shadow: var(--fyt-shadow-hover); transform: translateY(-2px); border-color: var(--fyt-gold-border); }
.fyt-charity-stat-icon  { font-size: 22px; line-height: 1; }
.fyt-charity-stat-value { font-size: 28px; font-weight: 800; color: var(--fyt-gold); line-height: 1.1; }
.fyt-charity-stat-label { font-size: 11px; color: var(--fyt-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

.fyt-charity-body { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.fyt-charity-main { display: flex; flex-direction: column; gap: 24px; }
.fyt-charity-side { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 90px; }

.fyt-card-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }

.fyt-opp-manage-list { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; }
.fyt-opp-manage-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--fyt-border); flex-wrap: wrap; }
.fyt-opp-manage-row:last-child { border-bottom: none; }
.fyt-opp-manage-info  { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.fyt-opp-manage-thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.fyt-opp-manage-title { font-size: 14px; font-weight: 700; color: var(--fyt-text); margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.fyt-opp-manage-meta  { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--fyt-text-muted); align-items: center; }
.fyt-opp-manage-fill  { font-weight: 600; }
.fyt-opp-manage-fill.full { color: var(--fyt-danger); }
.fyt-opp-manage-pending { background: var(--fyt-warning-bg); color: var(--fyt-warning); font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 20px; border: 1px solid rgba(251,191,36,.2); }
.fyt-opp-manage-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }

.fyt-signup-list { display: flex; flex-direction: column; gap: 10px; }
.fyt-signup-row  { display: flex; align-items: center; gap: 10px; }
.fyt-signup-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--fyt-gold-dim); color: var(--fyt-gold); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.fyt-signup-info  { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.fyt-signup-name  { font-size: 13px; font-weight: 700; color: var(--fyt-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyt-signup-opp   { font-size: 11px; color: var(--fyt-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyt-signup-time  { font-size: 11px; color: var(--fyt-text-dim); }

.fyt-quick-actions { display: flex; flex-direction: column; gap: 8px; }
.fyt-quick-action-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; background: var(--fyt-bg-2); border: 1px solid var(--fyt-border); border-radius: var(--fyt-radius-sm); font-size: 13px; font-weight: 600; color: var(--fyt-text-muted); cursor: pointer; text-decoration: none; transition: var(--fyt-transition); text-align: left; }
.fyt-quick-action-btn:hover { background: var(--fyt-gold-dim); border-color: var(--fyt-gold-border); color: var(--fyt-gold); }
.fyt-qa-icon { font-size: 16px; line-height: 1; }

/* ── Create opportunity ───────────────────────────────────────────────────────── */
.fyt-create-opp-wrap  { padding-top: 20px; padding-bottom: 48px; }
.fyt-create-opp-title { font-size: 24px; font-weight: 800; margin: 0 0 24px; }
.fyt-create-opp-layout { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
.fyt-create-opp-main   { display: flex; flex-direction: column; gap: 20px; }
.fyt-create-opp-side   { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 90px; }
.fyt-create-opp-form   { width: 100%; }

.fyt-address-wrap  { position: relative; }
.fyt-address-icon  { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--fyt-text-dim); pointer-events: none; }
.fyt-input--with-icon { padding-left: 36px; }
.fyt-map--preview  { height: 200px; border-radius: var(--fyt-radius-sm); border: 1px solid var(--fyt-border); overflow: hidden; background: var(--fyt-bg-2); margin-top: -10px; }

.fyt-field-hint { font-size: 12px; color: var(--fyt-text-dim); margin: 4px 0 0; }
.fyt-field-hint--warn  { color: var(--fyt-warning); }
.fyt-field-hint--error { color: var(--fyt-danger); }

.fyt-cat-checkboxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.fyt-cat-check-label { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--fyt-border); border-radius: var(--fyt-radius-sm); background: var(--fyt-bg-2); cursor: pointer; font-size: 13px; font-weight: 500; color: var(--fyt-text-muted); transition: var(--fyt-transition); user-select: none; }
.fyt-cat-check-label:hover { border-color: var(--fyt-gold-border); background: var(--fyt-gold-dim); color: var(--fyt-gold); }
.fyt-cat-check-label input[type="checkbox"] { accent-color: var(--fyt-gold); width: 15px; height: 15px; flex-shrink: 0; }
.fyt-cat-check-label:has(input:checked) { border-color: var(--fyt-gold); background: var(--fyt-gold-dim); color: var(--fyt-gold); font-weight: 700; }

.fyt-image-upload-area { border: 2px dashed var(--fyt-border); border-radius: var(--fyt-radius-sm); overflow: hidden; cursor: pointer; position: relative; min-height: 160px; display: flex; align-items: center; justify-content: center; background: var(--fyt-bg-2); transition: var(--fyt-transition); }
.fyt-image-upload-area:hover, .fyt-image-upload-area.dragging { border-color: var(--fyt-gold); background: var(--fyt-gold-dim); }
.fyt-image-file-input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.fyt-image-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; color: var(--fyt-text-dim); text-align: center; pointer-events: none; }
.fyt-image-placeholder svg { opacity: .4; }
.fyt-image-placeholder span { font-size: 13px; font-weight: 500; }
.fyt-image-hint { font-size: 11px !important; color: var(--fyt-text-dim); }
.fyt-image-preview-img { width: 100%; height: 180px; object-fit: cover; display: block; }
.fyt-upload-progress { height: 3px; background: var(--fyt-border); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.fyt-upload-bar { height: 100%; background: linear-gradient(90deg, var(--fyt-gold), var(--fyt-gold-light)); border-radius: 2px; width: 0; transition: width .2s ease; }
.fyt-opp-actions-card { display: flex; flex-direction: column; }

/* ── Volunteer list ───────────────────────────────────────────────────────────── */
.fyt-vlist-wrap { padding-top: 20px; padding-bottom: 48px; }
.fyt-vlist-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.fyt-vlist-header-info { display: flex; align-items: center; gap: 14px; }
.fyt-vlist-opp-img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--fyt-border); }
.fyt-vlist-title { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.fyt-vlist-opp-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--fyt-text-muted); }
.fyt-vlist-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.fyt-vlist-stats { display: flex; gap: 0; background: var(--fyt-card-bg); border: 1px solid var(--fyt-border); border-radius: var(--fyt-radius); padding: 14px 24px; margin-bottom: 20px; box-shadow: var(--fyt-shadow); flex-wrap: wrap; row-gap: 12px; }
.fyt-vlist-stat { display: flex; flex-direction: column; align-items: center; padding: 0 20px; border-right: 1px solid var(--fyt-border); gap: 2px; }
.fyt-vlist-stat:last-child { border-right: none; }
.fyt-vlist-stat-val           { font-size: 24px; font-weight: 800; color: var(--fyt-text); line-height: 1; }
.fyt-vlist-stat-val--present  { color: var(--fyt-success); }
.fyt-vlist-stat-val--absent   { color: var(--fyt-danger); }
.fyt-vlist-stat-val--checkin  { color: var(--fyt-gold); }
.fyt-vlist-stat-lbl { font-size: 11px; color: var(--fyt-text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }

.fyt-attendance-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--fyt-card-bg); border: 1px solid var(--fyt-border); border-radius: var(--fyt-radius); padding: 12px 16px; margin-bottom: 12px; box-shadow: var(--fyt-shadow); }
.fyt-attendance-toolbar-left, .fyt-attendance-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fyt-attendance-live-count { font-size: 13px; color: var(--fyt-text-muted); }
.fyt-attendance-live-count strong { color: var(--fyt-text); }

.fyt-vlist-table-wrap { overflow-x: auto; border-radius: var(--fyt-radius); border: 1px solid var(--fyt-border); box-shadow: var(--fyt-shadow); }
.fyt-vlist-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--fyt-card-bg); }
.fyt-vlist-table thead th { background: var(--fyt-bg-2); padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fyt-text-muted); border-bottom: 1px solid var(--fyt-border); white-space: nowrap; }
.fyt-vlist-table tbody tr { border-bottom: 1px solid var(--fyt-border); transition: background .12s; }
.fyt-vlist-table tbody tr:last-child { border-bottom: none; }
.fyt-vlist-table tbody tr:hover { background: var(--fyt-bg-2); }
.fyt-vrow--present { background: rgba(74,222,128,.06) !important; }
.fyt-vrow--absent  { background: rgba(248,113,113,.06) !important; }
.fyt-vlist-table td { padding: 12px 14px; vertical-align: middle; }

.fyt-vrow-num  { color: var(--fyt-text-dim); font-weight: 600; width: 36px; }
.fyt-vrow-name { display: flex; align-items: center; gap: 10px; min-width: 160px; }
.fyt-vrow-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--fyt-gold-dim); color: var(--fyt-gold); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.fyt-vrow-fullname { font-weight: 700; color: var(--fyt-text); display: block; }
.fyt-vrow-joined   { font-size: 11px; color: var(--fyt-text-muted); display: block; }
.fyt-vrow-contact  { min-width: 150px; }
.fyt-vrow-email { color: var(--fyt-gold); font-size: 12px; display: block; word-break: break-all; }
.fyt-vrow-phone { font-size: 12px; color: var(--fyt-text-muted); display: block; margin-top: 2px; }
.fyt-vrow-notes { max-width: 180px; }
.fyt-vrow-note-text { display: block; font-size: 12px; color: var(--fyt-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.fyt-vrow-note-avail { color: var(--fyt-text-dim); font-style: italic; }
.fyt-vrow-none { color: var(--fyt-border-light); }

.fyt-checkin-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; }
.fyt-checkin-badge--yes { background: var(--fyt-gold-dim); color: var(--fyt-gold); border: 1px solid var(--fyt-gold-border); }
.fyt-checkin-badge--no  { background: var(--fyt-bg-2); color: var(--fyt-text-dim); border: 1px solid var(--fyt-border); }

.fyt-attendance-col { min-width: 180px; }
.fyt-attend-toggles { display: flex; gap: 4px; }
.fyt-attend-btn { padding: 5px 10px; border-radius: 6px; border: 1px solid var(--fyt-border); background: var(--fyt-bg-2); font-size: 12px; font-weight: 600; cursor: pointer; transition: var(--fyt-transition); white-space: nowrap; color: var(--fyt-text-muted); }
.fyt-attend-btn--present:hover, .fyt-attend-btn--present.active { background: var(--fyt-success-bg); border-color: rgba(74,222,128,.4); color: var(--fyt-success); }
.fyt-attend-btn--absent:hover,  .fyt-attend-btn--absent.active  { background: var(--fyt-danger-bg);  border-color: rgba(248,113,113,.4); color: var(--fyt-danger); }
.fyt-vrow-actions { display: flex; gap: 4px; white-space: nowrap; }

.fyt-qr-section {}
.fyt-qr-layout  { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
.fyt-qr-display { background: var(--fyt-bg-2); border: 1px solid var(--fyt-gold-border); border-radius: var(--fyt-radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 240px; padding: 16px; gap: 8px; }
.fyt-qr-img { width: 200px; height: 200px; display: block; }
.fyt-qr-token-hint { font-size: 11px; color: var(--fyt-text-dim); text-align: center; margin: 0; word-break: break-all; }
.fyt-qr-token-hint code { background: var(--fyt-bg-2); border: 1px solid var(--fyt-border); border-radius: 4px; padding: 2px 5px; font-size: 10px; color: var(--fyt-gold); }
.fyt-qr-loading { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fyt-text-muted); }
.fyt-spinner-inline { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--fyt-border); border-top-color: var(--fyt-gold); border-radius: 50%; animation: fyt-spin .6s linear infinite; }
@keyframes fyt-spin { to { transform: rotate(360deg); } }
.fyt-qr-steps { padding-left: 18px; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.fyt-qr-steps li { font-size: 13px; color: var(--fyt-text-muted); line-height: 1.5; }
.fyt-qr-actions  { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Check-in page ───────────────────────────────────────────────────────────── */
.fyt-checkin-wrap { padding-top: 40px; padding-bottom: 60px; max-width: 560px; }
.fyt-checkin-card { background: var(--fyt-card-bg); border: 1px solid var(--fyt-border); border-radius: var(--fyt-radius); padding: 40px 32px; text-align: center; box-shadow: var(--fyt-shadow); }
.fyt-checkin-card--success { border-color: rgba(74,222,128,.4);  background: rgba(74,222,128,.06); }
.fyt-checkin-card--error   { border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.06); }
.fyt-checkin-card--info    { border-color: var(--fyt-gold-border); background: var(--fyt-gold-dim); }
.fyt-checkin-icon { font-size: 52px; line-height: 1; margin-bottom: 16px; display: block; }
.fyt-checkin-icon--spin { animation: fyt-pulse 1s ease-in-out infinite; }
@keyframes fyt-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.fyt-checkin-card h2 { font-size: 22px; font-weight: 800; margin: 0 0 10px; }
.fyt-checkin-card p  { color: var(--fyt-text-muted); margin: 0 0 8px; font-size: 15px; }
.fyt-checkin-msg     { font-size: 15px; color: var(--fyt-text); }
.fyt-checkin-page-title { font-size: 22px; font-weight: 800; margin: 0 0 20px; }
.fyt-checkin-event-list { display: flex; flex-direction: column; gap: 14px; }
.fyt-checkin-event-card { background: var(--fyt-card-bg); border: 1px solid var(--fyt-border); border-radius: var(--fyt-radius); padding: 20px 22px; box-shadow: var(--fyt-shadow); }
.fyt-checkin-event-card--done { border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.06); }
.fyt-checkin-event-card h3 { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.fyt-checkin-event-meta { font-size: 13px; color: var(--fyt-text-muted); margin: 0 0 14px; }
.fyt-checkin-event-actions { display: flex; flex-direction: column; gap: 8px; }
.fyt-checkin-qr-hint { font-size: 12px; color: var(--fyt-text-muted); margin: 0; }
.fyt-checkin-done-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--fyt-success); margin-top: 10px; }

/* ── Profile ─────────────────────────────────────────────────────────────────── */
.fyt-profile-wrap  { padding-top: 24px; padding-bottom: 48px; }
.fyt-profile-title { font-size: 24px; font-weight: 800; margin: 0 0 20px; }
.fyt-profile-hero { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; padding: 20px 22px; background: var(--fyt-card-bg); border: 1px solid var(--fyt-border); border-radius: var(--fyt-radius); box-shadow: var(--fyt-shadow); }
.fyt-profile-avatar-wrap { position: relative; flex-shrink: 0; }
.fyt-profile-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; border: 2px solid var(--fyt-gold-border); }
.fyt-avatar-placeholder--lg { width: 72px !important; height: 72px !important; font-size: 26px !important; }
.fyt-avatar-upload-btn { position: absolute; bottom: -2px; right: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--fyt-gold); border: 2px solid var(--fyt-card-bg); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; line-height: 1; transition: var(--fyt-transition); }
.fyt-avatar-upload-btn:hover { background: var(--fyt-gold-light); }
.fyt-profile-display-name { font-size: 20px; font-weight: 800; margin: 0 0 5px; }
.fyt-profile-mode-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: var(--fyt-gold-dim); color: var(--fyt-gold); border: 1px solid var(--fyt-gold-border); }

.fyt-profile-grid { display: flex; flex-direction: column; gap: 28px; }
.fyt-profile-section { background: var(--fyt-card-bg); border: 1px solid var(--fyt-border); border-radius: var(--fyt-radius); padding: 22px 24px; box-shadow: var(--fyt-shadow); display: flex; flex-direction: column; gap: 16px; }
.fyt-profile-section-title { font-size: 15px; font-weight: 700; margin: 0; color: var(--fyt-text); }
.fyt-profile-section-desc  { font-size: 13px; color: var(--fyt-text-muted); margin: -8px 0 0; }

.fyt-tag-checkboxes { display: flex; flex-wrap: wrap; gap: 8px; }
.fyt-tag-check-label { display: inline-flex; align-items: center; gap: 0; padding: 6px 14px; border: 1px solid var(--fyt-border); border-radius: 20px; background: var(--fyt-bg-2); font-size: 13px; font-weight: 500; color: var(--fyt-text-muted); cursor: pointer; transition: var(--fyt-transition); user-select: none; }
.fyt-tag-check-label input { display: none; }
.fyt-tag-check-label:hover, .fyt-tag-check-label.active { background: var(--fyt-gold-dim); border-color: var(--fyt-gold); color: var(--fyt-gold); font-weight: 700; }

.fyt-profile-form { display: flex; flex-direction: column; gap: 0; }
.fyt-profile-submit-row { margin-top: 24px; }

/* ── Notifications ───────────────────────────────────────────────────────────── */
.fyt-notif-wrap { padding-top: 24px; padding-bottom: 48px; }
.fyt-notif-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.fyt-notif-title { font-size: 22px; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 10px; }
.fyt-notif-badge { background: var(--fyt-gold); color: #0D0D0D; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 20px; line-height: 1.6; }

.fyt-notif-list { display: flex; flex-direction: column; gap: 2px; }
.fyt-notif-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; background: var(--fyt-card-bg); border: 1px solid var(--fyt-border); border-radius: var(--fyt-radius-sm); cursor: pointer; transition: var(--fyt-transition); position: relative; }
.fyt-notif-item:hover  { background: var(--fyt-bg-2); }
.fyt-notif-item.unread { background: rgba(201,168,76,.08); border-color: var(--fyt-gold-border); }
.fyt-notif-item.unread:hover { background: rgba(201,168,76,.12); }
.fyt-notif-icon { font-size: 22px; line-height: 1; flex-shrink: 0; margin-top: 1px; }
.fyt-notif-body { flex: 1; min-width: 0; }
.fyt-notif-msg  { font-size: 14px; font-weight: 500; color: var(--fyt-text); margin: 0 0 4px; }
.fyt-notif-time { font-size: 12px; color: var(--fyt-text-muted); }
.fyt-notif-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fyt-gold); flex-shrink: 0; margin-top: 6px; }

/* ── Settings ────────────────────────────────────────────────────────────────── */
.fyt-settings-wrap  { padding-top: 24px; padding-bottom: 48px; }
.fyt-settings-title { font-size: 24px; font-weight: 800; margin: 0 0 24px; }
.fyt-settings-layout { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start; }
.fyt-settings-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 90px; background: var(--fyt-card-bg); border: 1px solid var(--fyt-border); border-radius: var(--fyt-radius); padding: 8px; box-shadow: var(--fyt-shadow); }
.fyt-settings-nav-item { display: block; padding: 9px 14px; border-radius: var(--fyt-radius-sm); font-size: 13px; font-weight: 600; color: var(--fyt-text-muted); text-decoration: none; transition: var(--fyt-transition); }
.fyt-settings-nav-item:hover, .fyt-settings-nav-item.active { background: var(--fyt-gold-dim); color: var(--fyt-gold); }
.fyt-settings-nav-item--danger { color: var(--fyt-danger) !important; }
.fyt-settings-nav-item--danger:hover { background: var(--fyt-danger-bg) !important; }

.fyt-settings-sections { display: flex; flex-direction: column; gap: 24px; }
.fyt-settings-section { background: var(--fyt-card-bg); border: 1px solid var(--fyt-border); border-radius: var(--fyt-radius); padding: 24px 26px; box-shadow: var(--fyt-shadow); display: flex; flex-direction: column; gap: 16px; }
.fyt-settings-section--danger { border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.04); }
.fyt-settings-section-title { font-size: 16px; font-weight: 700; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--fyt-border); color: var(--fyt-text); }
.fyt-settings-section-title--danger { color: var(--fyt-danger); border-color: rgba(248,113,113,.2); }
.fyt-settings-section-desc { font-size: 13px; color: var(--fyt-text-muted); margin: 0; }
.fyt-settings-form { display: flex; flex-direction: column; gap: 16px; }
.fyt-settings-form-footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fyt-settings-inline-msg { font-size: 13px; font-weight: 600; }
.fyt-settings-inline-msg--ok  { color: var(--fyt-success); }
.fyt-settings-inline-msg--err { color: var(--fyt-danger); }

.fyt-notif-pref-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--fyt-border); }
.fyt-notif-pref-row:last-of-type { border-bottom: none; }
.fyt-notif-pref-info  { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fyt-notif-pref-label { font-size: 14px; font-weight: 600; color: var(--fyt-text); }
.fyt-notif-pref-desc  { font-size: 12px; color: var(--fyt-text-muted); }

.fyt-delete-confirm-box { background: var(--fyt-danger-bg); border: 1px solid rgba(248,113,113,.3); border-radius: var(--fyt-radius-sm); padding: 16px; margin-top: 8px; }
.fyt-delete-confirm-box p { font-size: 13px; margin: 0 0 8px; font-weight: 600; color: var(--fyt-text); }

/* ── Login page ──────────────────────────────────────────────────────────────── */
.fyt-login-page {
    min-height: 100vh;
    background: var(--fyt-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    font-family: var(--fyt-font);
}
.fyt-login-box {
    width: 100%;
    max-width: 440px;
    background: var(--fyt-card-bg);
    border: 1px solid var(--fyt-border);
    border-radius: 16px;
    padding: 48px 40px 40px;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
    position: relative;
    overflow: hidden;
}
.fyt-login-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--fyt-gold), var(--fyt-gold-light), var(--fyt-gold));
}
.fyt-login-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--fyt-text);
    text-align: left;
    margin: 0 0 6px;
    letter-spacing: -.01em;
}
.fyt-login-subtitle {
    font-size: 14px;
    color: var(--fyt-text-muted);
    text-align: left;
    margin: 0 0 28px;
}
.fyt-login-form { display: flex; flex-direction: column; gap: 16px; }

/* inputs on login page — match screenshot white-ish appearance */
.fyt-login-box .fyt-input {
    background: #1A1A1A !important;
    background-image: none !important;
    color: #F0EDE6 !important;
    border-color: #333333 !important;
    box-shadow: none !important;
}
.fyt-login-box .fyt-input:focus {
    background: #1A1A1A !important;
    background-image: none !important;
    border-color: #C9A84C !important;
    color: #F0EDE6 !important;
    box-shadow: 0 0 0 2px rgba(201,168,76,.4) !important;
}
.fyt-login-box .fyt-input::placeholder { color: #555550 !important; }
.fyt-login-box .fyt-label { color: var(--fyt-text-muted); }

.fyt-login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 12px;
    color: var(--fyt-text-dim);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: none;
}
.fyt-login-divider::before,
.fyt-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--fyt-border);
}

/* Social buttons side by side */
.fyt-social-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.fyt-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #333333 !important;
    background: #141414 !important;
    background-image: none !important;
    color: #F0EDE6 !important;
    transition: all .18s ease;
    text-decoration: none;
    box-shadow: none !important;
    text-shadow: none !important;
}
.fyt-social-btn:hover {
    border-color: rgba(201,168,76,.4) !important;
    background: rgba(201,168,76,.08) !important;
    background-image: none !important;
    color: #E2C97E !important;
}
.fyt-social-btn svg { flex-shrink: 0; }

.fyt-login-error {
    background: var(--fyt-danger-bg);
    border: 1px solid rgba(248,113,113,.3);
    border-radius: var(--fyt-radius-sm);
    padding: 11px 14px;
    font-size: 13px;
    color: var(--fyt-danger);
    font-weight: 500;
    display: none;
    margin-bottom: 8px;
}
.fyt-login-error.visible { display: block; }

.fyt-login-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 13px;
    color: var(--fyt-text-dim);
}
.fyt-login-footer a { color: var(--fyt-gold); text-decoration: none; font-weight: 600; }
.fyt-login-footer a:hover { color: var(--fyt-gold-light); }

.fyt-login-spinner {
    display: none;
    width: 18px; height: 18px;
    border: 2px solid rgba(13,13,13,.3);
    border-top-color: #0D0D0D;
    border-radius: 50%;
    animation: fyt-spin .6s linear infinite;
    flex-shrink: 0;
}
.fyt-btn--loading .fyt-login-spinner { display: block; }
.fyt-btn--loading .fyt-btn-text { opacity: .7; }

/* Logout button */
.fyt-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--fyt-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(248,113,113,.35);
    background: transparent;
    color: var(--fyt-danger);
    text-decoration: none;
    transition: var(--fyt-transition);
}
.fyt-logout-btn:hover {
    background: var(--fyt-danger-bg);
    border-color: rgba(248,113,113,.6);
    color: var(--fyt-danger);
}

/* ── Utility ─────────────────────────────────────────────────────────────────── */
.fyt-text-muted { color: var(--fyt-text-muted); }
.fyt-truncate   { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyt-clamp-2    { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Skeleton ───────────────────────────────────────────────────────────────── */
.fyt-skeleton { background: linear-gradient(90deg, var(--fyt-border) 25%, var(--fyt-bg-2) 50%, var(--fyt-border) 75%); background-size: 200% 100%; animation: fyt-skeleton-shimmer 1.4s infinite; border-radius: var(--fyt-radius-sm); }
.fyt-skeleton-card { height: 280px; border-radius: var(--fyt-radius); background: linear-gradient(90deg, var(--fyt-border) 25%, var(--fyt-bg-2) 50%, var(--fyt-border) 75%); background-size: 200% 100%; animation: fyt-skeleton-shimmer 1.4s infinite; }
@keyframes fyt-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Skip link / focus ──────────────────────────────────────────────────────── */
.fyt-skip-link { position: absolute; top: -999px; left: 0; background: var(--fyt-gold); color: #0D0D0D; padding: 8px 16px; z-index: 9999; font-size: 14px; font-weight: 700; border-radius: 0 0 8px 0; }
.fyt-skip-link:focus { top: 0; }
.fyt-btn:focus-visible, .fyt-input:focus-visible, .fyt-textarea:focus-visible, .fyt-select:focus-visible, .fyt-pill:focus-visible { outline: 2px solid var(--fyt-gold); outline-offset: 2px; }

/* ── Theme neutralisation ───────────────────────────────────────────────────── */
/* Only strip container constraints inside the plugin's own wrapper, not the whole page */
.fyt-plugin-page .fyt-wrap,
.fyt-plugin-page .fyt-opportunities-wrap,
.fyt-plugin-page .fyt-dashboard-wrap,
.fyt-plugin-page .fyt-auth-wrap,
.fyt-plugin-page .fyt-profile-wrap,
.fyt-plugin-page .fyt-settings-wrap,
.fyt-plugin-page .fyt-detail-wrap,
.fyt-plugin-page .fyt-enroll-wrap,
.fyt-plugin-page .fyt-checkin-wrap,
.fyt-plugin-page .fyt-vol-list-wrap,
.fyt-plugin-page .fyt-impact-wrap,
.fyt-plugin-page .fyt-notif-wrap {
    max-width: none;
    width: 100%;
}
/* Prevent horizontal scroll on detail page */
.fyt-plugin-page body,
.fyt-plugin-page html {
    overflow-x: hidden;
}
/* Keep entry-content full-width but restore Astra padding so non-plugin pages aren't broken */
.fyt-plugin-page .entry-content { max-width: none !important; }
.fyt-plugin-page .ast-article-single { padding: 0 !important; }

/* ── Reduced motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

html { scroll-behavior: smooth; }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 1280px) { .fyt-wrap { padding: 0 20px; } }
@media (max-width: 1024px) {
    .fyt-impact-stats-grid { grid-template-columns: repeat(2,1fr); }
    .fyt-charity-stats { grid-template-columns: repeat(2,1fr); }
    .fyt-detail-layout { grid-template-columns: 1fr; }
    .fyt-detail-sidebar { position: static; }
    .fyt-sidebar-card { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .fyt-sidebar-divider { grid-column: 1/-1; }
}
@media (max-width: 900px) {
    .fyt-detail-layout, .fyt-enroll-layout { grid-template-columns: 1fr; }
    .fyt-detail-sidebar { position: static; }
    .fyt-enroll-opp-card { position: static; }
    .fyt-dashboard-stats { flex-wrap: wrap; justify-content: center; }
    .fyt-qr-layout { grid-template-columns: 1fr; }
    .fyt-qr-display { min-height: 180px; }
}
@media (max-width: 768px) {
    .fyt-wrap { padding: 0 16px; }
    .fyt-opportunities-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .fyt-filter-bar { padding: 12px 14px; }
    .fyt-impact-body { grid-template-columns: 1fr; }
    .fyt-impact-hero { flex-direction: column; align-items: flex-start; gap: 12px; }
    .fyt-charity-body { grid-template-columns: 1fr; }
    .fyt-charity-side { position: static; }
    .fyt-create-opp-layout { grid-template-columns: 1fr; }
    .fyt-create-opp-side { position: static; }
    .fyt-enroll-layout { grid-template-columns: 1fr; }
    .fyt-settings-layout { grid-template-columns: 1fr; }
    .fyt-settings-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .fyt-sidebar-card { display: block; }
    #fyt-toast-container { bottom: 16px; right: 12px; left: 12px; }
    .fyt-toast { min-width: auto; max-width: 100%; }
    .fyt-login-box { padding: 36px 24px 32px; }
}
@media (max-width: 640px) {
    .fyt-opportunities-grid { grid-template-columns: 1fr; }
    .fyt-card-image { height: 160px; }

    /* ── Global mobile overflow fix ── */
    .fyt-detail-wrap,
    .fyt-detail-layout,
    .fyt-detail-main {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    .fyt-detail-wrap {
        padding-top: 10px;
        padding-bottom: 90px;
    }
    .fyt-detail-layout {
        display: block !important;
        grid-template-columns: unset !important;
        gap: 0 !important;
    }
    .fyt-detail-sidebar { display: none !important; }

    .fyt-back-link { font-size: 12px; margin-bottom: 10px; }

    /* Hero */
    .fyt-detail-hero {
        height: 200px !important;
        border-radius: 10px !important;
        margin-bottom: 14px !important;
        width: 100% !important;
    }
    .fyt-detail-status-overlay { font-size: 18px; }

    .fyt-detail-tags { gap: 5px; margin-bottom: 8px; }
    .fyt-detail-title { font-size: 22px; line-height: 1.2; margin-bottom: 12px; }

    /* Charity strip — hard-contain it */
    .fyt-detail-charity-strip {
        padding: 10px 12px !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .fyt-detail-charity-info { min-width: 0; overflow: hidden; }
    .fyt-detail-charity-mission { display: none; }
    .fyt-detail-charity-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Info grid — grouped card with dividers */
    .fyt-detail-info-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin-bottom: 16px !important;
        border: 1px solid var(--fyt-border) !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .fyt-info-item {
        padding: 10px 14px !important;
        border: none !important;
        border-radius: 0 !important;
        border-bottom: 1px solid var(--fyt-border) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .fyt-info-item:last-child { border-bottom: none !important; }
    .fyt-info-item--full { grid-column: unset !important; }
    .fyt-info-value { font-size: 13px; white-space: normal; word-break: break-word; }

    /* Progress */
    .fyt-detail-progress { margin-bottom: 16px; }
    .fyt-detail-section { margin-bottom: 18px; }

    /* Rest of pages */
    .fyt-form-row { flex-direction: column; gap: 14px; }
    .fyt-participation-card { grid-template-columns: 80px 1fr; }
    .fyt-participation-image img { width: 80px; min-height: 80px; }
    .fyt-participation-actions { grid-column: 1/-1; flex-direction: row; padding: 8px 12px; border-top: 1px solid var(--fyt-border); justify-content: flex-start; }
    .fyt-dashboard-header { flex-direction: column; align-items: flex-start; }
    .fyt-impact-stats-grid { grid-template-columns: 1fr 1fr; }
    .fyt-charity-stats { grid-template-columns: 1fr 1fr; }
    .fyt-score-rings { gap: 6px; }
    .fyt-score-ring { width: 64px; height: 64px; }
    .fyt-ring-pct { font-size: 16px; }
    .fyt-cat-bar-row { grid-template-columns: 90px 1fr 30px; gap: 6px; }
    .fyt-tabs { overflow-x: auto; scrollbar-width: none; }
    .fyt-tabs::-webkit-scrollbar { display: none; }
    .fyt-attend-toggles { flex-direction: column; }
    .fyt-attend-btn { font-size: 11px; padding: 4px 8px; }
    .fyt-cat-checkboxes { grid-template-columns: 1fr 1fr; }
    .fyt-profile-hero { flex-direction: column; align-items: flex-start; gap: 10px; }
    .fyt-notif-pref-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .fyt-qr-display { min-height: 160px; }
    .fyt-success-actions { flex-direction: column; }
    .fyt-success-actions .fyt-btn { width: 100%; }
    .fyt-login-box { padding: 32px 20px 28px; max-width: 100%; }
}
/* ── Mobile sticky enrol bar (detail page) ──────────────────────────────── */
.fyt-mobile-enrol-bar {
    display: none; /* hidden on desktop */
}
@media (max-width: 640px) {
    /* Hide the full sidebar card on mobile — enrol bar takes over */
    .fyt-detail-sidebar { display: none; }
    /* Show sticky bar */
    .fyt-mobile-enrol-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        padding: 12px 16px;
        background: #1A1A1A;
        border-top: 1px solid rgba(201,168,76,.25);
        box-shadow: 0 -4px 20px rgba(0,0,0,.5);
    }
    .fyt-mobile-enrol-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
        min-width: 0;
    }
    .fyt-mobile-enrol-date {
        font-size: 13px;
        font-weight: 700;
        color: #F0EDE6;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .fyt-mobile-enrol-hours {
        font-size: 11px;
        color: #C9A84C;
        font-weight: 600;
    }
    .fyt-mobile-enrol-bar .fyt-btn {
        flex-shrink: 0;
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
    /* Add bottom padding to detail wrap so content isn't hidden behind the bar */
    .fyt-detail-wrap { padding-bottom: 90px; }
}

@media (max-width: 400px) {
    .fyt-wrap { padding: 0 12px; }
    .fyt-pill { padding: 5px 10px; font-size: 12px; }
    .fyt-impact-stat-value { font-size: 26px; }
}

/* ── [fyt_nav_button] smart nav button ──────────────────────────────────────── */
.fyt-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all .18s ease;
    letter-spacing: .01em;
}
.fyt-nav-btn--login {
    color: #0D0D0D !important;
    padding: 7px 16px !important;
    border: 1px solid #C9A84C !important;
    border-radius: 6px !important;
    background: linear-gradient(135deg, #C9A84C 0%, #E2C97E 100%) !important;
    background-image: linear-gradient(135deg, #C9A84C 0%, #E2C97E 100%) !important;
    background-color: #C9A84C !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    -webkit-text-fill-color: #0D0D0D !important;
}
.fyt-nav-btn--login:hover {
    color: #0D0D0D !important;
    -webkit-text-fill-color: #0D0D0D !important;
    border-color: #C9A84C !important;
    background: linear-gradient(135deg, #E2C97E 0%, #C9A84C 100%) !important;
    background-image: linear-gradient(135deg, #E2C97E 0%, #C9A84C 100%) !important;
    background-color: #E2C97E !important;
}
/* Extra specificity for themes that override link colours on non-plugin pages */
a.fyt-nav-btn.fyt-nav-btn--login,
a.fyt-nav-btn.fyt-nav-btn--login:link,
a.fyt-nav-btn.fyt-nav-btn--login:visited {
    color: #0D0D0D !important;
    -webkit-text-fill-color: #0D0D0D !important;
    background: linear-gradient(135deg, #C9A84C 0%, #E2C97E 100%) !important;
    background-color: #C9A84C !important;
    border: 1px solid #C9A84C !important;
    border-radius: 6px !important;
    padding: 7px 16px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
}
.fyt-nav-btn--dashboard {
    color: #0D0D0D !important;
    -webkit-text-fill-color: #0D0D0D !important;
    padding: 7px 16px !important;
    border: 1px solid #C9A84C !important;
    border-radius: 6px !important;
    background: linear-gradient(135deg, #C9A84C 0%, #E2C97E 100%) !important;
    background-color: #C9A84C !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    font-size: 14px !important;
}
.fyt-nav-btn--dashboard:hover {
    background: linear-gradient(135deg, #E2C97E 0%, #C9A84C 100%) !important;
    background-color: #E2C97E !important;
    color: #0D0D0D !important;
    -webkit-text-fill-color: #0D0D0D !important;
    border-color: #C9A84C !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(201,168,76,.4) !important;
}
/* Extra specificity for template pages */
a.fyt-nav-btn.fyt-nav-btn--dashboard,
a.fyt-nav-btn.fyt-nav-btn--dashboard:link,
a.fyt-nav-btn.fyt-nav-btn--dashboard:visited {
    color: #0D0D0D !important;
    -webkit-text-fill-color: #0D0D0D !important;
    background: linear-gradient(135deg, #C9A84C 0%, #E2C97E 100%) !important;
    background-color: #C9A84C !important;
    border: 1px solid #C9A84C !important;
    border-radius: 6px !important;
    padding: 7px 16px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* ── Hardcoded gold palette — applies to all FYT plugin pages ─────────────── */
/* Ensures gold/black everywhere regardless of theme inheritance              */

/* Navigation tabs */
.fyt-plugin-page .fyt-tab {
    color: #888880 !important;
    border-bottom: 2px solid transparent !important;
    text-decoration: none !important;
}
.fyt-plugin-page .fyt-tab.active,
.fyt-plugin-page .fyt-tab:hover {
    color: #C9A84C !important;
    border-bottom-color: #C9A84C !important;
}

/* Card titles & headings */
.fyt-plugin-page .fyt-section-title,
.fyt-plugin-page .fyt-card-title,
.fyt-plugin-page .fyt-opp-title,
.fyt-plugin-page .fyt-participation-title {
    color: #F0EDE6 !important;
}

/* stat/impact numbers */
.fyt-plugin-page .fyt-stat-number,
.fyt-plugin-page .fyt-impact-number {
    color: #C9A84C !important;
}

/* Badge & status chips */
.fyt-plugin-page .fyt-badge,
.fyt-plugin-page .fyt-status-badge {
    background: rgba(201,168,76,.15) !important;
    color: #C9A84C !important;
    border-color: rgba(201,168,76,.3) !important;
}

/* Dashboard welcome header */
.fyt-plugin-page .fyt-dash-hello {
    color: #C9A84C !important;
}

/* Opportunity card action link */
.fyt-plugin-page .fyt-opp-link,
.fyt-plugin-page .fyt-card-link {
    color: #C9A84C !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}
.fyt-plugin-page .fyt-opp-link:hover,
.fyt-plugin-page .fyt-card-link:hover {
    color: #E2C97E !important;
}

/* Form labels */
.fyt-plugin-page .fyt-label {
    color: #888880 !important;
}

/* Logout button */
.fyt-plugin-page .fyt-logout-btn {
    color: #888880 !important;
    text-decoration: none !important;
    transition: color .18s !important;
}
.fyt-plugin-page .fyt-logout-btn:hover {
    color: #C9A84C !important;
}

/* Ghost buttons — gold border + gold text */
.fyt-plugin-page .fyt-btn--ghost {
    color: #C9A84C !important;
    border-color: rgba(201,168,76,.4) !important;
    background: transparent !important;
}
.fyt-plugin-page .fyt-btn--ghost:hover {
    background: rgba(201,168,76,.1) !important;
    border-color: #C9A84C !important;
    color: #E2C97E !important;
}

/* ─── Ensure all primary buttons = gold bg / black text everywhere ────────── */
.fyt-btn--primary,
a.fyt-btn--primary,
button.fyt-btn--primary {
    background: linear-gradient(135deg, #C9A84C 0%, #E2C97E 100%) !important;
    color: #0D0D0D !important;
    border-color: #C9A84C !important;
}
.fyt-btn--primary:hover,
a.fyt-btn--primary:hover,
button.fyt-btn--primary:hover {
    background: linear-gradient(135deg, #E2C97E 0%, #C9A84C 100%) !important;
    color: #0D0D0D !important;
}


/* ── Social login buttons: force dark bg regardless of theme ─────────────── */
.fyt-auth-social-btn,
button.fyt-auth-social-btn,
a.fyt-auth-social-btn {
    background-color: #141414 !important;
    background-image: none !important;
    color: #F0EDE6 !important;
    border: 1.5px solid #333333 !important;
}
.fyt-auth-social-btn:hover,
button.fyt-auth-social-btn:hover {
    background-color: rgba(201,168,76,.07) !important;
    border-color: rgba(201,168,76,.5) !important;
    color: #E2C97E !important;
}
.fyt-auth-social-btn--facebook,
button.fyt-auth-social-btn--facebook {
    border-color: rgba(24,119,242,.3) !important;
}
.fyt-auth-social-btn--facebook:hover {
    background-color: rgba(24,119,242,.06) !important;
    border-color: rgba(24,119,242,.6) !important;
    color: #5B9BD5 !important;
}

/* ── Quick action btns: force dark bg ────────────────────────────────────── */
.fyt-quick-action-btn,
a.fyt-quick-action-btn,
button.fyt-quick-action-btn {
    background: #141414 !important;
    color: #888880 !important;
    border-color: #2A2A2A !important;
    background-image: none !important;
}
.fyt-quick-action-btn:hover,
a.fyt-quick-action-btn:hover,
button.fyt-quick-action-btn:hover {
    background: rgba(201,168,76,.1) !important;
    border-color: rgba(201,168,76,.4) !important;
    color: #C9A84C !important;
}

/* ── "My Dashboard" nav link — gold gradient / black text ────────────────── */

/* ── Mode switcher inside quick-actions sidebar: gold gradient / black text ── */
.fyt-quick-actions .fyt-switch-mode-btn,
.fyt-quick-actions .fyt-mode-switcher-btn {
    background: linear-gradient(135deg, #C9A84C 0%, #E2C97E 100%) !important;
    color: #0D0D0D !important;
    border-color: #C9A84C !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 12px rgba(201,168,76,.35) !important;
}
.fyt-quick-actions .fyt-switch-mode-btn:hover,
.fyt-quick-actions .fyt-mode-switcher-btn:hover {
    background: linear-gradient(135deg, #E2C97E 0%, #C9A84C 100%) !important;
    color: #0D0D0D !important;
    box-shadow: 0 4px 18px rgba(201,168,76,.5) !important;
}

/* ── Volunteer dashboard: mode-switch below stats ────────────────────────── */
.fyt-vol-mode-switch-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    margin: 16px 0 8px;
    flex-wrap: wrap;
}
/* Solid dark-red logout button — sits next to charity mode switcher */
.fyt-logout-btn--solid {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 11px 22px !important;
    border-radius: var(--fyt-radius-sm) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border: 1px solid #7f1d1d !important;
    background: #991b1b !important;
    background-color: #991b1b !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(153,27,27,.35) !important;
    transition: all .18s ease !important;
    letter-spacing: .01em !important;
    white-space: nowrap !important;
}
.fyt-logout-btn--solid:hover {
    background: #7f1d1d !important;
    background-color: #7f1d1d !important;
    border-color: #7f1d1d !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(153,27,27,.45) !important;
    transform: translateY(-1px) !important;
}
.fyt-vol-switch-btn {
    padding: 11px 22px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    background: linear-gradient(135deg, #C9A84C 0%, #E2C97E 100%) !important;
    color: #0D0D0D !important;
    border-color: #C9A84C !important;
    box-shadow: 0 2px 14px rgba(201,168,76,.3) !important;
}
.fyt-vol-switch-btn:hover {
    background: linear-gradient(135deg, #E2C97E 0%, #C9A84C 100%) !important;
    box-shadow: 0 4px 20px rgba(201,168,76,.5) !important;
    color: #0D0D0D !important;
    transform: translateY(-1px) !important;
}

/* ── Logout in quick-actions: subtle red tint ────────────────────────────── */
.fyt-qa-logout,
a.fyt-qa-logout {
    color: #F87171 !important;
    border-color: rgba(248,113,113,.25) !important;
    background: transparent !important;
}
.fyt-qa-logout:hover,
a.fyt-qa-logout:hover {
    background: rgba(248,113,113,.08) !important;
    border-color: rgba(248,113,113,.5) !important;
    color: #F87171 !important;
}

/* ── Register page: mode picker icons use currentColor (SVG) ─────────────── */
.fyt-reg-mode-label svg {
    color: currentColor;
    flex-shrink: 0;
}
.fyt-reg-mode-option:checked + .fyt-reg-mode-label svg {
    color: #C9A84C;
}


/* ── Login / Sign Up nav button ─────────────────────────────────────────── */