/* ═══════════════════════════════════════════════════════════════════════════
   Fangbook — Secured by The Digital Draculas
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --fb-bg:              #0d0d14;
    --fb-surface:         #14141e;
    --fb-surface-hover:   #1c1c2a;
    --fb-border:          #252538;
    --fb-border-light:    #333346;
    --fb-text:            #d4d4dc;
    --fb-text-muted:      #7a7a8e;
    --fb-text-dim:        #55556a;
    --fb-crimson:         #c41e3a;
    --fb-crimson-dim:     #8a1528;
    --fb-crimson-glow:    rgba(196, 30, 58, 0.12);
    --fb-accent:          #e8335a;
    --fb-gold:            rgba(196, 160, 80, 0.15);
    --fb-gold-line:       rgba(196, 160, 80, 0.08);
    --fb-success:         #3a8a5c;
    --fb-radius:          8px;
    --fb-radius-sm:       4px;
    --fb-font:            -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fb-content-width:   760px;
}

/* ── Sacred geometry background pattern (Rose of Venus) ───────────────────── */

.fb-app {
    font-family: var(--fb-font);
    background-color: var(--fb-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cline x1='100' y1='100' x2='100.0' y2='65.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100' y1='100' x2='130.3' y2='82.5' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100' y1='100' x2='130.3' y2='117.5' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100' y1='100' x2='100.0' y2='135.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100' y1='100' x2='69.7' y2='117.5' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100' y1='100' x2='69.7' y2='82.5' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100' y1='100' x2='100.0' y2='30.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100' y1='100' x2='160.6' y2='65.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100' y1='100' x2='160.6' y2='135.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100' y1='100' x2='100.0' y2='170.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100' y1='100' x2='39.4' y2='135.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100' y1='100' x2='39.4' y2='65.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='65.0' x2='130.3' y2='82.5' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='65.0' x2='130.3' y2='117.5' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='65.0' x2='100.0' y2='135.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='65.0' x2='69.7' y2='117.5' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='65.0' x2='69.7' y2='82.5' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='65.0' x2='100.0' y2='30.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='65.0' x2='160.6' y2='65.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='65.0' x2='160.6' y2='135.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='65.0' x2='100.0' y2='170.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='65.0' x2='39.4' y2='135.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='65.0' x2='39.4' y2='65.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='130.3' y1='82.5' x2='130.3' y2='117.5' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='130.3' y1='82.5' x2='100.0' y2='135.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='130.3' y1='82.5' x2='69.7' y2='117.5' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='130.3' y1='82.5' x2='69.7' y2='82.5' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='130.3' y1='82.5' x2='100.0' y2='30.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='130.3' y1='82.5' x2='160.6' y2='65.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='130.3' y1='82.5' x2='160.6' y2='135.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='130.3' y1='82.5' x2='100.0' y2='170.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='130.3' y1='82.5' x2='39.4' y2='135.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='130.3' y1='82.5' x2='39.4' y2='65.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='130.3' y1='117.5' x2='100.0' y2='135.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='130.3' y1='117.5' x2='69.7' y2='117.5' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='130.3' y1='117.5' x2='69.7' y2='82.5' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='130.3' y1='117.5' x2='100.0' y2='30.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='130.3' y1='117.5' x2='160.6' y2='65.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='130.3' y1='117.5' x2='160.6' y2='135.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='130.3' y1='117.5' x2='100.0' y2='170.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='130.3' y1='117.5' x2='39.4' y2='135.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='130.3' y1='117.5' x2='39.4' y2='65.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='135.0' x2='69.7' y2='117.5' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='135.0' x2='69.7' y2='82.5' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='135.0' x2='100.0' y2='30.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='135.0' x2='160.6' y2='65.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='135.0' x2='160.6' y2='135.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='135.0' x2='100.0' y2='170.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='135.0' x2='39.4' y2='135.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='135.0' x2='39.4' y2='65.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='69.7' y1='117.5' x2='69.7' y2='82.5' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='69.7' y1='117.5' x2='100.0' y2='30.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='69.7' y1='117.5' x2='160.6' y2='65.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='69.7' y1='117.5' x2='160.6' y2='135.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='69.7' y1='117.5' x2='100.0' y2='170.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='69.7' y1='117.5' x2='39.4' y2='135.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='69.7' y1='117.5' x2='39.4' y2='65.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='69.7' y1='82.5' x2='100.0' y2='30.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='69.7' y1='82.5' x2='160.6' y2='65.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='69.7' y1='82.5' x2='160.6' y2='135.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='69.7' y1='82.5' x2='100.0' y2='170.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='69.7' y1='82.5' x2='39.4' y2='135.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='69.7' y1='82.5' x2='39.4' y2='65.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='30.0' x2='160.6' y2='65.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='30.0' x2='160.6' y2='135.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='30.0' x2='100.0' y2='170.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='30.0' x2='39.4' y2='135.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='30.0' x2='39.4' y2='65.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='160.6' y1='65.0' x2='160.6' y2='135.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='160.6' y1='65.0' x2='100.0' y2='170.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='160.6' y1='65.0' x2='39.4' y2='135.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='160.6' y1='65.0' x2='39.4' y2='65.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='160.6' y1='135.0' x2='100.0' y2='170.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='160.6' y1='135.0' x2='39.4' y2='135.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='160.6' y1='135.0' x2='39.4' y2='65.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='170.0' x2='39.4' y2='135.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='100.0' y1='170.0' x2='39.4' y2='65.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Cline x1='39.4' y1='135.0' x2='39.4' y2='65.0' stroke='rgba(196,160,80,0.07)' stroke-width='0.4'/%3E%3Ccircle cx='100' cy='100' r='14' fill='none' stroke='rgba(196,160,80,0.09)' stroke-width='0.6'/%3E%3Ccircle cx='100.0' cy='65.0' r='14' fill='none' stroke='rgba(196,160,80,0.09)' stroke-width='0.6'/%3E%3Ccircle cx='130.3' cy='82.5' r='14' fill='none' stroke='rgba(196,160,80,0.09)' stroke-width='0.6'/%3E%3Ccircle cx='130.3' cy='117.5' r='14' fill='none' stroke='rgba(196,160,80,0.09)' stroke-width='0.6'/%3E%3Ccircle cx='100.0' cy='135.0' r='14' fill='none' stroke='rgba(196,160,80,0.09)' stroke-width='0.6'/%3E%3Ccircle cx='69.7' cy='117.5' r='14' fill='none' stroke='rgba(196,160,80,0.09)' stroke-width='0.6'/%3E%3Ccircle cx='69.7' cy='82.5' r='14' fill='none' stroke='rgba(196,160,80,0.09)' stroke-width='0.6'/%3E%3Ccircle cx='100.0' cy='30.0' r='14' fill='none' stroke='rgba(196,160,80,0.09)' stroke-width='0.6'/%3E%3Ccircle cx='160.6' cy='65.0' r='14' fill='none' stroke='rgba(196,160,80,0.09)' stroke-width='0.6'/%3E%3Ccircle cx='160.6' cy='135.0' r='14' fill='none' stroke='rgba(196,160,80,0.09)' stroke-width='0.6'/%3E%3Ccircle cx='100.0' cy='170.0' r='14' fill='none' stroke='rgba(196,160,80,0.09)' stroke-width='0.6'/%3E%3Ccircle cx='39.4' cy='135.0' r='14' fill='none' stroke='rgba(196,160,80,0.09)' stroke-width='0.6'/%3E%3Ccircle cx='39.4' cy='65.0' r='14' fill='none' stroke='rgba(196,160,80,0.09)' stroke-width='0.6'/%3E%3C/svg%3E");
    color: var(--fb-text);
    min-height: 100vh;
    font-size: 15px;
    line-height: 1.5;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-attachment: fixed;
}

.fb-app *, .fb-app *::before, .fb-app *::after {
    box-sizing: border-box;
}

/* Prevent blue highlights — keep everything on-theme */
.fb-app ::selection {
    background: var(--fb-crimson) !important;
    color: #fff !important;
}
.fb-app ::-moz-selection {
    background: var(--fb-crimson) !important;
    color: #fff !important;
}
.fb-app *:focus {
    outline-color: var(--fb-crimson) !important;
    box-shadow: none !important;
}
.fb-app *:focus-visible {
    outline: 2px solid var(--fb-crimson) !important;
    outline-offset: 2px;
}
.fb-app a,
.fb-app a:visited,
.fb-app a:hover,
.fb-app a:focus,
.fb-app a:active {
    color: inherit !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.fb-app button:focus,
.fb-app button:active,
.fb-app select:focus,
.fb-app input:focus,
.fb-app textarea:focus {
    outline: none !important;
    box-shadow: none !important;
}
.fb-app *:hover {
    outline: none !important;
}
.fb-app img {
    -webkit-user-select: none;
    user-select: none;
}
.fb-app * {
    -webkit-tap-highlight-color: transparent !important;
}

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

.fb-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--fb-surface);
    border-bottom: 1px solid var(--fb-border);
    /* Geometric ward line */
    background-image:
        linear-gradient(to right, transparent 0%, rgba(196,160,80,0.18) 20%, rgba(196,160,80,0.25) 50%, rgba(196,160,80,0.18) 80%, transparent 100%);
    background-size: 100% 1px;
    background-position: bottom;
    background-repeat: no-repeat;
}

.fb-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    gap: 16px;
    max-width: var(--fb-content-width);
    margin: 0 auto;
}

.fb-logo {
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
}
.fb-logo-img {
    height: 40px;
    width: auto;
    display: block;
}

/* Logo seal removed */

.fb-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    justify-content: flex-end;
}

/* ── Nav ──────────────────────────────────────────────────────────────────── */

.fb-nav {
    display: flex;
    max-width: var(--fb-content-width);
    margin: 0 auto;
    border-top: 1px solid var(--fb-border);
}

.fb-nav-btn {
    flex: 1;
    padding: 10px 8px;
    border: none;
    background: transparent;
    color: var(--fb-text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    font-family: var(--fb-font);
    position: relative;
}
.fb-nav-btn:hover { color: var(--fb-text); }
.fb-nav-btn.active {
    color: var(--fb-crimson);
    border-bottom-color: var(--fb-crimson);
}

/* Friend request badge — inline after tab text */
.fb-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fb-crimson);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 8px;
    text-align: center;
    padding: 0 4px;
    margin-left: 4px;
    vertical-align: middle;
}

/* ── Inputs & buttons ────────────────────────────────────────────────────── */

.fb-input, .fb-select, .fb-textarea {
    background: var(--fb-bg);
    border: 1px solid var(--fb-border);
    color: var(--fb-text);
    border-radius: var(--fb-radius-sm);
    padding: 8px 10px;
    font-size: 14px;
    font-family: var(--fb-font);
    outline: none;
    transition: border-color 0.2s;
}
.fb-input:focus, .fb-select:focus, .fb-textarea:focus {
    border-color: var(--fb-crimson);
}
.fb-textarea {
    resize: vertical;
    min-height: 60px;
    width: 100%;
}

.fb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--fb-radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    font-family: var(--fb-font);
}
.fb-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.fb-btn-primary { background: var(--fb-crimson); color: #fff; }
.fb-btn-primary:hover:not(:disabled) { background: var(--fb-accent); }
.fb-btn-secondary { background: var(--fb-border); color: var(--fb-text); }
.fb-btn-secondary:hover:not(:disabled) { background: var(--fb-border-light); }
.fb-btn-ghost { background: transparent; color: var(--fb-text-muted); padding: 6px 10px; }
.fb-btn-ghost:hover { color: var(--fb-text); background: var(--fb-surface-hover); }
.fb-btn-danger { background: transparent; color: var(--fb-crimson); padding: 6px 10px; border: 1px solid var(--fb-crimson-dim); }
.fb-btn-danger:hover { background: var(--fb-crimson-glow); }
.fb-btn-sm { padding: 5px 10px; font-size: 13px; }

/* ── Search ───────────────────────────────────────────────────────────────── */

.fb-search-wrap { position: relative; }
.fb-search-input { width: 180px; font-size: 13px; padding: 6px 10px; }
.fb-search-results {
    position: absolute;
    top: 100%;
    right: 0;
    width: 300px;
    max-height: 300px;
    overflow-y: auto;
    background: var(--fb-surface);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    z-index: 200;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.fb-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--fb-border);
}
.fb-search-item:last-child { border-bottom: none; }
.fb-search-item:hover { background: var(--fb-surface-hover); }

/* ── Content area — full width, centered inner ───────────────────────────── */

.fb-content {
    padding: 20px 24px;
    max-width: var(--fb-content-width);
    margin: 0 auto;
}

.fb-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--fb-text-muted);
}

/* ── Cards (posts) ───────────────────────────────────────────────────────── */

.fb-card {
    background: var(--fb-surface);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    padding: 18px;
    margin-bottom: 14px;
    position: relative;
}

/* Sacred geometry corner marks on cards */
.fb-card::before,
.fb-card::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: rgba(196, 160, 80, 0.25);
    border-style: solid;
    pointer-events: none;
}
.fb-card::before {
    top: -1px;
    left: -1px;
    border-width: 1px 0 0 1px;
    border-radius: var(--fb-radius) 0 0 0;
}
.fb-card::after {
    bottom: -1px;
    right: -1px;
    border-width: 0 1px 1px 0;
    border-radius: 0 0 var(--fb-radius) 0;
}

.fb-post-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* ── Avatars ─────────────────────────────────────────────────────────────── */

.fb-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--fb-border);
    object-fit: cover;
    flex-shrink: 0;
    cursor: pointer;
}
.fb-avatar-sm { width: 28px; height: 28px; }
.fb-avatar-lg { width: 88px; height: 88px; }

/* Geometric ring around large avatar */
.fb-avatar-lg {
    border: 2px solid var(--fb-crimson);
    box-shadow:
        0 0 0 3px var(--fb-surface),
        0 0 0 4px rgba(196, 160, 80, 0.2);
}

.fb-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--fb-text-muted);
    background: var(--fb-border);
    border-radius: 50%;
}
.fb-avatar-placeholder.fb-avatar-lg { font-size: 32px; }

.fb-post-meta {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.fb-username {
    font-weight: 600;
    font-size: 15px;
    color: var(--fb-text);
    cursor: pointer;
}
.fb-username:hover { color: var(--fb-crimson); }
.fb-timestamp { font-size: 12px; color: var(--fb-text-dim); }

.fb-visibility-badge {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--fb-border);
    color: var(--fb-text-muted);
}
.fb-visibility-badge.friends {
    background: var(--fb-crimson-glow);
    color: var(--fb-crimson);
}

.fb-post-content {
    margin-bottom: 12px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ── YouTube embeds ──────────────────────────────────────────────────────── */

.fb-yt-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    margin: 10px 0;
    border-radius: var(--fb-radius);
    overflow: hidden;
    background: #000;
}
.fb-yt-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ── GIF embeds ──────────────────────────────────────────────────────────── */

.fb-gif-embed {
    display: block;
    max-width: 100%;
    max-height: 400px;
    border-radius: var(--fb-radius);
    margin: 8px 0;
    cursor: pointer;
    object-fit: contain;
}
.fb-comment-text .fb-gif-embed {
    max-height: 200px;
    margin: 6px 0 2px;
}

/* ── GIF picker ──────────────────────────────────────────────────────────── */

.fb-gif-btn {
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 0.5px;
    border: 1px solid var(--fb-border) !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    color: var(--fb-text-muted) !important;
    background: transparent !important;
}
.fb-gif-btn:hover {
    border-color: var(--fb-crimson) !important;
    color: var(--fb-crimson) !important;
}

.fb-gif-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    max-height: 400px;
    overflow-y: auto;
    padding: 2px;
}

.fb-gif-picker-item {
    width: 100%;
    height: auto;
    border-radius: var(--fb-radius-sm);
    cursor: pointer;
    object-fit: cover;
    aspect-ratio: 4/3;
    background: var(--fb-bg);
    border: 1px solid var(--fb-border);
    transition: border-color 0.15s, transform 0.15s;
}
.fb-gif-picker-item:hover {
    border-color: var(--fb-crimson);
    transform: scale(1.03);
}

.fb-post-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--fb-border);
    flex-wrap: wrap;
}

/* ── Reactions ────────────────────────────────────────────────────────────── */

.fb-reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--fb-border);
    border-radius: 20px;
    background: transparent;
    color: var(--fb-text-muted);
    font-size: 15px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--fb-font);
}
.fb-reaction-btn:hover { border-color: var(--fb-border-light); background: var(--fb-surface-hover); }
.fb-reaction-btn.active { border-color: var(--fb-crimson); background: var(--fb-crimson-glow); color: var(--fb-crimson); }
.fb-reaction-count { font-size: 12px; font-weight: 600; }

.fb-comment-toggle {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--fb-text-muted);
    cursor: pointer;
    font-size: 13px;
    padding: 4px 8px;
    font-family: var(--fb-font);
}
.fb-comment-toggle:hover { color: var(--fb-text); }

.fb-post-delete {
    background: none; border: none; color: var(--fb-text-dim);
    cursor: pointer; font-size: 16px; padding: 4px; line-height: 1;
    margin-left: auto; font-family: var(--fb-font);
}
.fb-post-delete:hover { color: var(--fb-crimson); }

/* ── Comments ────────────────────────────────────────────────────────────── */

.fb-comments { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--fb-border); }
.fb-comment { display: flex; gap: 8px; padding: 8px 0; font-size: 14px; }
.fb-comment + .fb-comment { border-top: 1px solid rgba(42,42,58,0.5); }
.fb-comment-body { flex: 1; min-width: 0; }
.fb-comment-body .fb-username { font-size: 13px; margin-right: 6px; }
.fb-comment-text { white-space: pre-wrap; word-wrap: break-word; }
.fb-comment-time { font-size: 11px; color: var(--fb-text-dim); margin-top: 2px; }
.fb-comment-form { display: flex; gap: 8px; margin-top: 8px; }
.fb-comment-form input { flex: 1; }

/* ── Seen By ──────────────────────────────────────────────────────────── */

.fb-seen-by {
    font-size: 12px;
    color: var(--fb-text-dim);
    padding: 6px 0 0;
    cursor: pointer;
    transition: color 0.2s;
}
.fb-seen-by:hover {
    color: var(--fb-text-muted);
}
.fb-seen-list {
    padding: 8px 0 0;
    border-top: 1px solid var(--fb-border);
    margin-top: 6px;
}
.fb-seen-viewer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
}
.fb-seen-time {
    margin-left: auto;
    font-size: 11px;
    color: var(--fb-text-dim);
}

/* ── Composer ────────────────────────────────────────────────────────────── */

.fb-composer {
    background: var(--fb-surface);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    padding: 16px;
    margin-bottom: 16px;
}
.fb-composer-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

/* ── Message Thread ──────────────────────────────────────────────────────── */

.fb-thread-messages {
    background: var(--fb-surface);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    padding: 16px;
    min-height: 300px;
    max-height: 60vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fb-thread-compose {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.fb-msg {
    max-width: 75%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
}
.fb-msg-own {
    align-self: flex-end;
    background: var(--fb-crimson-dim);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.fb-msg-other {
    align-self: flex-start;
    background: var(--fb-border);
    color: var(--fb-text);
    border-bottom-left-radius: 4px;
}
.fb-msg-text { white-space: pre-wrap; }
.fb-msg-time {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    margin-top: 3px;
}
.fb-msg-other .fb-msg-time { color: var(--fb-text-dim); }

/* ── Profile view ────────────────────────────────────────────────────────── */

.fb-profile-header {
    background: var(--fb-surface);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    padding: 28px;
    margin-bottom: 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Background geometric ward on profile header */
.fb-profile-header::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M115.2,100.0 L115.3,99.4 L115.6,98.8 L116.1,98.3 L116.8,97.9 L117.6,97.6 L118.6,97.4 L119.7,97.4 L121.0,97.5 L122.3,97.9 L123.7,98.4 L125.2,99.2 L126.6,100.2 L128.1,101.5 L129.5,103.0 L130.8,104.8 L132.0,106.8 L133.0,109.0 L133.9,111.4 L134.6,114.1 L135.0,116.9 L135.2,119.9 L135.2,123.0 L134.8,126.2 L134.1,129.5 L133.1,132.9 L131.7,136.3 L130.0,139.6 L127.9,142.9 L125.4,146.1 L122.6,149.2 L119.5,152.1 L116.0,154.7 L112.2,157.2 L108.2,159.3 L103.8,161.1 L99.2,162.6 L94.3,163.7 L89.3,164.4 L84.2,164.7 L78.9,164.5 L73.5,163.9 L68.2,162.7 L62.8,161.1 L57.5,159.1 L52.4,156.5 L47.4,153.4 L42.5,149.9 L38.0,146.0 L33.7,141.6 L29.8,136.7 L26.2,131.5 L23.1,126.0 L20.4,120.1 L18.2,114.0 L16.5,107.6 L15.3,101.1 L14.7,94.4 L14.6,87.6 L15.1,80.7 L16.2,73.9 L17.9,67.1 L20.2,60.5 L23.0,54.0 L26.4,47.7 L30.4,41.7 L34.8,36.1 L39.8,30.8 L45.2,25.9 L51.0,21.4 L57.2,17.5 L63.7,14.0 L70.5,11.1 L77.6,8.8 L84.9,7.1 L92.2,6.0 L99.7,5.5 L107.2,5.7 L114.7,6.4 L122.0,7.9 L129.3,9.9 L136.3,12.5 L143.1,15.7 L149.6,19.4 L155.8,23.7 L161.5,28.5 L166.9,33.7 L171.7,39.4 L176.1,45.4 L179.9,51.8 L183.2,58.4 L185.8,65.2 L187.9,72.3 L189.4,79.4 L190.3,86.6 L190.6,93.8 L190.2,101.0 L189.3,108.0 L187.8,114.9 L185.7,121.7 L183.1,128.1 L180.0,134.3 L176.4,140.1 L172.4,145.6 L167.9,150.7 L163.1,155.3 L158.0,159.4 L152.6,163.1 L146.9,166.2 L141.1,168.9 L135.2,171.0 L129.2,172.6 L123.2,173.6 L117.1,174.2 L111.2,174.2 L105.3,173.7 L99.6,172.7 L94.1,171.3 L88.9,169.5 L83.9,167.2 L79.2,164.6 L74.8,161.6 L70.8,158.4 L67.1,154.9 L63.9,151.1 L61.0,147.2 L58.5,143.2 L56.5,139.1 L54.8,134.9 L53.6,130.7 L52.8,126.5 L52.3,122.4 L52.2,118.3 L52.5,114.5 L53.0,110.7 L53.9,107.2 L55.1,103.9 L56.4,100.8 L58.0,97.9 L59.8,95.4 L61.7,93.1 L63.8,91.0 L65.9,89.3 L68.0,87.8 L70.2,86.7 L72.3,85.8 L74.4,85.1 L76.4,84.7 L78.3,84.5 L80.1,84.6 L81.7,84.8 L83.2,85.2 L84.5,85.7 L85.6,86.3 L86.5,86.9 L87.2,87.7 L87.7,88.4 L88.0,89.2 L88.0,89.9 L87.9,90.5 L87.7,91.0 L87.2,91.5 L86.7,91.8 L86.0,91.9 L85.2,91.8 L84.3,91.6 L83.4,91.2 L82.5,90.5 L81.6,89.7 L80.7,88.6 L79.9,87.3 L79.2,85.8 L78.6,84.2 L78.2,82.3 L77.9,80.3 L77.9,78.1 L78.1,75.7 L78.6,73.3 L79.3,70.8 L80.3,68.3 L81.6,65.7 L83.2,63.2 L85.1,60.7 L87.3,58.3 L89.8,56.1 L92.6,53.9 L95.7,52.0 L99.1,50.3 L102.7,48.9 L106.5,47.7 L110.6,46.9 L114.8,46.4 L119.2,46.3 L123.7,46.5 L128.3,47.2 L132.9,48.3 L137.5,49.8 L142.0,51.8 L146.5,54.2 L150.8,57.0 L155.0,60.2 L158.9,63.9 L162.6,68.0 L166.0,72.4 L169.1,77.2 L171.7,82.3 L174.0,87.7 L175.8,93.4 L177.2,99.3 L178.0,105.3 L178.4,111.6 L178.2,117.8 L177.5,124.2 L176.2,130.5 L174.4,136.8 L172.1,142.9 L169.2,148.9 L165.7,154.7 L161.8,160.3 L157.3,165.5 L152.4,170.4 L147.1,174.8 L141.3,178.9 L135.2,182.5 L128.8,185.5 L122.1,188.1 L115.2,190.0 L108.0,191.4 L100.8,192.2 L93.5,192.4 L86.1,192.0 L78.8,190.9 L71.6,189.2 L64.5,186.9 L57.6,184.1 L51.0,180.6 L44.7,176.6 L38.7,172.1 L33.1,167.1 L28.0,161.6 L23.3,155.7 L19.2,149.4 L15.6,142.9 L12.5,136.0 L10.1,128.9 L8.2,121.7 L7.0,114.3 L6.4,106.9 L6.4,99.4 L7.0,92.1 L8.3,84.8 L10.1,77.7 L12.5,70.8 L15.5,64.1 L19.1,57.8 L23.1,51.8 L27.6,46.2 L32.5,41.0 L37.7,36.3 L43.4,32.1 L49.3,28.4 L55.4,25.2 L61.8,22.6 L68.3,20.6 L74.8,19.1 L81.4,18.2 L88.0,17.9 L94.5,18.1 L101.0,18.8 L107.2,20.1 L113.2,21.9 L119.0,24.1 L124.5,26.8 L129.7,29.9 L134.6,33.4 L139.0,37.2 L143.0,41.4 L146.7,45.7 L149.8,50.3 L152.6,55.1 L154.8,60.0 L156.6,64.9 L158.0,69.9 L158.8,74.9 L159.3,79.9 L159.3,84.7 L158.9,89.4 L158.2,94.0 L157.0,98.3 L155.6,102.5 L153.8,106.3 L151.7,109.9 L149.4,113.2 L147.0,116.2 L144.3,118.9 L141.5,121.3 L138.6,123.3 L135.7,125.0 L132.7,126.3 L129.8,127.4 L126.9,128.1 L124.1,128.6 L121.3,128.7 L118.7,128.6 L116.3,128.3 L114.0,127.8 L112.0,127.1 L110.1,126.2 L108.5,125.2 L107.0,124.2 L105.8,123.0 L104.9,121.9 L104.1,120.7 L103.6,119.6 L103.3,118.5 L103.1,117.5 L103.2,116.6 L103.4,115.8 L103.7,115.2 L104.2,114.8 L104.7,114.5 L105.3,114.4 L105.9,114.5 L106.6,114.8 L107.2,115.3 L107.8,116.0 L108.2,116.9 L108.6,117.9 L108.9,119.2 L108.9,120.6 L108.8,122.1 L108.5,123.7 L108.0,125.4 L107.2,127.2 L106.2,128.9 L105.0,130.7 L103.5,132.5 L101.7,134.2 L99.6,135.8 L97.3,137.2 L94.8,138.5 L92.0,139.7 L89.0,140.6 L85.8,141.2 L82.4,141.6 L78.9,141.6 L75.3,141.4 L71.6,140.7 L67.8,139.8 L64.0,138.4 L60.2,136.7 L56.5,134.6 L52.9,132.2 L49.4,129.3 L46.1,126.1 L43.0,122.5 L40.2,118.6 L37.6,114.3 L35.4,109.7 L33.6,104.9 L32.1,99.8 L31.1,94.6 L30.5,89.1 L30.4,83.5 L30.7,77.9 L31.6,72.2 L32.9,66.4 L34.8,60.8 L37.1,55.2 L40.0,49.8 L43.4,44.6 L47.2,39.6 L51.5,34.9 L56.3,30.5 L61.4,26.5 L66.9,22.9 L72.8,19.8 L79.0,17.1 L85.4,14.9 L92.1,13.3 L98.9,12.3 L105.9,11.8 L112.9,11.9 L120.0,12.6 L127.0,13.9 L133.9,15.8 L140.7,18.3 L147.2,21.3 L153.6,24.9 L159.6,29.1 L165.3,33.8 L170.6,38.9 L175.4,44.5 L179.8,50.5 L183.7,56.9 L187.0,63.6 L189.8,70.5 L191.9,77.7 L193.5,85.0 L194.4,92.5 L194.8,100.0 L194.4,107.5 L193.5,115.0 L191.9,122.3 L189.8,129.5 L187.0,136.4 L183.7,143.1 L179.8,149.5 L175.4,155.5 L170.6,161.1 L165.3,166.2 L159.6,170.9 L153.6,175.1 L147.2,178.7 L140.7,181.7 L133.9,184.2 L127.0,186.1 L120.0,187.4 L112.9,188.1 L105.9,188.2 L98.9,187.7 L92.1,186.7 L85.4,185.1 L79.0,182.9 L72.8,180.2 L66.9,177.1 L61.4,173.5 L56.3,169.5 L51.5,165.1 L47.2,160.4 L43.4,155.4 L40.0,150.2 L37.1,144.8 L34.8,139.2 L32.9,133.6 L31.6,127.8 L30.7,122.1 L30.4,116.5 L30.5,110.9 L31.1,105.4 L32.1,100.2 L33.6,95.1 L35.4,90.3 L37.6,85.7 L40.2,81.4 L43.0,77.5 L46.1,73.9 L49.4,70.7 L52.9,67.8 L56.5,65.4 L60.2,63.3 L64.0,61.6 L67.8,60.2 L71.6,59.3 L75.3,58.6 L78.9,58.4 L82.4,58.4 L85.8,58.8 L89.0,59.4 L92.0,60.3 L94.8,61.5 L97.3,62.8 L99.6,64.2 L101.7,65.8 L103.5,67.5 L105.0,69.3 L106.2,71.1 L107.2,72.8 L108.0,74.6 L108.5,76.3 L108.8,77.9 L108.9,79.4 L108.9,80.8 L108.6,82.1 L108.2,83.1 L107.8,84.0 L107.2,84.7 L106.6,85.2 L105.9,85.5 L105.3,85.6 L104.7,85.5 L104.2,85.2 L103.7,84.8 L103.4,84.2 L103.2,83.4 L103.1,82.5 L103.3,81.5 L103.6,80.4 L104.1,79.3 L104.9,78.1 L105.8,77.0 L107.0,75.8 L108.5,74.8 L110.1,73.8 L112.0,72.9 L114.0,72.2 L116.3,71.7 L118.7,71.4 L121.3,71.3 L124.1,71.4 L126.9,71.9 L129.8,72.6 L132.7,73.7 L135.7,75.0 L138.6,76.7 L141.5,78.7 L144.3,81.1 L147.0,83.8 L149.4,86.8 L151.7,90.1 L153.8,93.7 L155.6,97.5 L157.0,101.7 L158.2,106.0 L158.9,110.6 L159.3,115.3 L159.3,120.1 L158.8,125.1 L158.0,130.1 L156.6,135.1 L154.8,140.0 L152.6,144.9 L149.8,149.7 L146.7,154.3 L143.0,158.6 L139.0,162.8 L134.6,166.6 L129.7,170.1 L124.5,173.2 L119.0,175.9 L113.2,178.1 L107.2,179.9 L101.0,181.2 L94.5,181.9 L88.0,182.1 L81.4,181.8 L74.8,180.9 L68.3,179.4 L61.8,177.4 L55.4,174.8 L49.3,171.6 L43.4,167.9 L37.7,163.7 L32.5,159.0 L27.6,153.8 L23.1,148.2 L19.1,142.2 L15.5,135.9 L12.5,129.2 L10.1,122.3 L8.3,115.2 L7.0,107.9 L6.4,100.6 L6.4,93.1 L7.0,85.7 L8.2,78.3 L10.1,71.1 L12.5,64.0 L15.6,57.1 L19.2,50.6 L23.3,44.3 L28.0,38.4 L33.1,32.9 L38.7,27.9 L44.7,23.4 L51.0,19.4 L57.6,15.9 L64.5,13.1 L71.6,10.8 L78.8,9.1 L86.1,8.0 L93.5,7.6 L100.8,7.8 L108.0,8.6 L115.2,10.0 L122.1,11.9 L128.8,14.5 L135.2,17.5 L141.3,21.1 L147.1,25.2 L152.4,29.6 L157.3,34.5 L161.8,39.7 L165.7,45.3 L169.2,51.1 L172.1,57.1 L174.4,63.2 L176.2,69.5 L177.5,75.8 L178.2,82.2 L178.4,88.4 L178.0,94.7 L177.2,100.7 L175.8,106.6 L174.0,112.3 L171.7,117.7 L169.1,122.8 L166.0,127.6 L162.6,132.0 L158.9,136.1 L155.0,139.8 L150.8,143.0 L146.5,145.8 L142.0,148.2 L137.5,150.2 L132.9,151.7 L128.3,152.8 L123.7,153.5 L119.2,153.7 L114.8,153.6 L110.6,153.1 L106.5,152.3 L102.7,151.1 L99.1,149.7 L95.7,148.0 L92.6,146.1 L89.8,143.9 L87.3,141.7 L85.1,139.3 L83.2,136.8 L81.6,134.3 L80.3,131.7 L79.3,129.2 L78.6,126.7 L78.1,124.3 L77.9,121.9 L77.9,119.7 L78.2,117.7 L78.6,115.8 L79.2,114.2 L79.9,112.7 L80.7,111.4 L81.6,110.3 L82.5,109.5 L83.4,108.8 L84.3,108.4 L85.2,108.2 L86.0,108.1 L86.7,108.2 L87.2,108.5 L87.7,109.0 L87.9,109.5 L88.0,110.1 L88.0,110.8 L87.7,111.6 L87.2,112.3 L86.5,113.1 L85.6,113.7 L84.5,114.3 L83.2,114.8 L81.7,115.2 L80.1,115.4 L78.3,115.5 L76.4,115.3 L74.4,114.9 L72.3,114.2 L70.2,113.3 L68.0,112.2 L65.9,110.7 L63.8,109.0 L61.7,106.9 L59.8,104.6 L58.0,102.1 L56.4,99.2 L55.1,96.1 L53.9,92.8 L53.0,89.3 L52.5,85.5 L52.2,81.7 L52.3,77.6 L52.8,73.5 L53.6,69.3 L54.8,65.1 L56.5,60.9 L58.5,56.8 L61.0,52.8 L63.9,48.9 L67.1,45.1 L70.8,41.6 L74.8,38.4 L79.2,35.4 L83.9,32.8 L88.9,30.5 L94.1,28.7 L99.6,27.3 L105.3,26.3 L111.2,25.8 L117.1,25.8 L123.2,26.4 L129.2,27.4 L135.2,29.0 L141.1,31.1 L146.9,33.8 L152.6,36.9 L158.0,40.6 L163.1,44.7 L167.9,49.3 L172.4,54.4 L176.4,59.9 L180.0,65.7 L183.1,71.9 L185.7,78.3 L187.8,85.1 L189.3,92.0 L190.2,99.0 L190.6,106.2 L190.3,113.4 L189.4,120.6 L187.9,127.7 L185.8,134.8 L183.2,141.6 L179.9,148.2 L176.1,154.6 L171.7,160.6 L166.9,166.3 L161.5,171.5 L155.8,176.3 L149.6,180.6 L143.1,184.3 L136.3,187.5 L129.3,190.1 L122.0,192.1 L114.7,193.6 L107.2,194.3 L99.7,194.5 L92.2,194.0 L84.9,192.9 L77.6,191.2 L70.5,188.9 L63.7,186.0 L57.2,182.5 L51.0,178.6 L45.2,174.1 L39.8,169.2 L34.8,163.9 L30.4,158.3 L26.4,152.3 L23.0,146.0 L20.2,139.5 L17.9,132.9 L16.2,126.1 L15.1,119.3 L14.6,112.4 L14.7,105.6 L15.3,98.9 L16.5,92.4 L18.2,86.0 L20.4,79.9 L23.1,74.0 L26.2,68.5 L29.8,63.3 L33.7,58.4 L38.0,54.0 L42.5,50.1 L47.4,46.6 L52.4,43.5 L57.5,40.9 L62.8,38.9 L68.2,37.3 L73.5,36.1 L78.9,35.5 L84.2,35.3 L89.3,35.6 L94.3,36.3 L99.2,37.4 L103.8,38.9 L108.2,40.7 L112.2,42.8 L116.0,45.3 L119.5,47.9 L122.6,50.8 L125.4,53.9 L127.9,57.1 L130.0,60.4 L131.7,63.7 L133.1,67.1 L134.1,70.5 L134.8,73.8 L135.2,77.0 L135.2,80.1 L135.0,83.1 L134.6,85.9 L133.9,88.6 L133.0,91.0 L132.0,93.2 L130.8,95.2 L129.5,97.0 L128.1,98.5 L126.6,99.8 L125.2,100.8 L123.7,101.6 L122.3,102.1 L121.0,102.5 L119.7,102.6 L118.6,102.6 L117.6,102.4 L116.8,102.1 L116.1,101.7 L115.6,101.2 L115.3,100.6 L115.2,100.0' fill='none' stroke='rgba(196,160,80,0.12)' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 1;
}

.fb-profile-username {
    font-size: 24px;
    font-weight: 700;
    margin: 12px 0 4px;
    position: relative;
}
.fb-profile-bio {
    color: var(--fb-text-muted);
    margin-bottom: 12px;
    white-space: pre-wrap;
    position: relative;
}
.fb-profile-stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin: 12px 0;
    font-size: 14px;
    color: var(--fb-text-muted);
    position: relative;
}
.fb-profile-stat-val {
    font-weight: 700;
    font-size: 18px;
    color: var(--fb-text);
    display: block;
}
.fb-profile-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    position: relative;
}

/* ── Photo gallery ───────────────────────────────────────────────────────── */

.fb-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    margin: 12px 0;
}
.fb-photo-thumb {
    aspect-ratio: 1;
    border-radius: var(--fb-radius-sm);
    object-fit: cover;
    cursor: pointer;
    border: 1px solid var(--fb-border);
    width: 100%;
    transition: opacity 0.2s;
}
.fb-photo-thumb:hover { opacity: 0.8; }

.fb-photo-slot {
    aspect-ratio: 1;
    border: 2px dashed var(--fb-border);
    border-radius: var(--fb-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fb-text-dim);
    cursor: pointer;
    font-size: 24px;
    transition: border-color 0.2s;
}
.fb-photo-slot:hover { border-color: var(--fb-crimson); color: var(--fb-crimson); }

.fb-photo-actions { position: absolute; top: 4px; right: 4px; display: none; }
.fb-photo-wrap { position: relative; }
.fb-photo-wrap:hover .fb-photo-actions { display: flex; gap: 4px; }

/* ── Friends list on profile ─────────────────────────────────────────────── */

.fb-profile-friends {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 8px;
    position: relative;
}
.fb-profile-friend-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    background: var(--fb-bg);
    border: 1px solid var(--fb-border);
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.2s;
}
.fb-profile-friend-chip:hover { border-color: var(--fb-crimson); }
.fb-profile-friend-chip img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

/* ── Friends page ────────────────────────────────────────────────────────── */

.fb-friend-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--fb-surface);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    margin-bottom: 8px;
}
.fb-friend-card .fb-username { flex: 1; }

/* ── Setup / onboarding ──────────────────────────────────────────────────── */

.fb-setup {
    max-width: 420px;
    margin: 0 auto;
    padding: 60px 20px;
}
.fb-setup h2 {
    text-align: center;
    margin-bottom: 8px;
    color: var(--fb-crimson);
    font-size: 28px;
}
.fb-setup .fb-setup-subtitle {
    text-align: center;
    color: var(--fb-text-dim);
    margin-bottom: 28px;
    font-size: 13px;
    font-style: italic;
}
.fb-setup label {
    display: block;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--fb-text-muted);
}
.fb-setup label span {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    color: var(--fb-text);
}
.fb-setup .fb-input,
.fb-setup .fb-select,
.fb-setup .fb-textarea { width: 100%; }

.fb-setup-error { color: var(--fb-crimson); font-size: 13px; margin-top: 8px; }

/* ── Geometric section divider ───────────────────────────────────────────── */

.fb-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 14px;
    color: var(--fb-text-muted);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.fb-divider::before,
.fb-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--fb-gold-line), rgba(196,160,80,0.12), var(--fb-gold-line), transparent);
}
.fb-divider-glyph {
    color: rgba(196, 160, 80, 0.25);
    font-size: 11px;
}

/* ── Modals ───────────────────────────────────────────────────────────────── */

.fb-modal {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
}
.fb-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); }
.fb-modal-content {
    position: relative;
    background: var(--fb-surface);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    padding: 24px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}
.fb-modal-content h3 { margin: 0 0 16px; font-size: 18px; }
.fb-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ── Crop ─────────────────────────────────────────────────────────────────── */

.fb-crop-container { position: relative; max-height: 400px; overflow: hidden; display: flex; justify-content: center; }
.fb-crop-image-wrap { position: relative; display: inline-block; }
.fb-crop-image-wrap img { max-width: 100%; max-height: 380px; display: block; }
.fb-crop-overlay {
    position: absolute;
    border: 2px solid var(--fb-crimson);
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.6);
    cursor: move;
    min-width: 50px;
    min-height: 50px;
}
.fb-crop-resize {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 14px;
    height: 14px;
    background: var(--fb-crimson);
    border: 2px solid #fff;
    border-radius: 2px;
    cursor: nwse-resize;
}

/* ── Lightbox ────────────────────────────────────────────────────────────── */

.fb-lightbox {
    position: fixed; inset: 0; z-index: 1100;
    display: flex; align-items: center; justify-content: center;
}
.fb-lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.85); cursor: pointer; }
.fb-lightbox img { position: relative; max-width: 90%; max-height: 90vh; border-radius: var(--fb-radius); }
.fb-lightbox-close {
    position: absolute; top: 16px; right: 16px;
    background: none; border: none; color: #fff; font-size: 32px; cursor: pointer; z-index: 1;
}

/* ── Profile switcher ────────────────────────────────────────────────────── */

.fb-profile-switcher { display: flex; align-items: center; gap: 6px; }
.fb-profile-switcher .fb-select { font-size: 13px; padding: 4px 8px; max-width: 160px; }
.fb-create-profile-link {
    color: var(--fb-crimson);
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    title: 'Create another profile';
}
.fb-create-profile-link:hover { color: var(--fb-accent); }

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

.fb-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--fb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 20px 0 10px;
}

.fb-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--fb-text-dim);
    font-size: 14px;
}

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

@media (max-width: 600px) {
    .fb-header-inner { padding: 12px 14px; }
    .fb-content { padding: 14px; }
    .fb-search-input { width: 120px; }
}

.fb-login-notice { text-align: center; padding: 40px 20px; color: #888; }

/* ── Login form ──────────────────────────────────────────────────────────── */

.fb-login-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}
.fb-login-box {
    background: var(--fb-surface);
    border: 1px solid var(--fb-border) !important;
    border-radius: var(--fb-radius);
    padding: 40px 32px;
    max-width: 380px;
    width: 100%;
    text-align: center;
}
.fb-login-box *,
.fb-login-box form,
.fb-login-box p,
.fb-login-box div,
.fb-login-box input,
.fb-login-box label {
    border-color: var(--fb-border) !important;
    box-shadow: none !important;
    outline: none !important;
}
.fb-login-wrap,
.fb-login-box {
    -webkit-tap-highlight-color: transparent !important;
}
.fb-login-logo {
    height: 48px;
    width: auto;
    margin-bottom: 16px;
}
.fb-login-subtitle {
    color: var(--fb-text-dim);
    font-size: 14px;
    font-style: italic;
    margin-bottom: 24px;
}
.fb-login-box .login-username,
.fb-login-box .login-password,
.fb-login-box .login-remember,
.fb-login-box .login-submit {
    margin-bottom: 12px;
    text-align: left;
}
.fb-login-box label {
    display: block;
    color: var(--fb-text-muted);
    font-size: 13px;
    margin-bottom: 4px;
}
.fb-login-box input[type="text"],
.fb-login-box input[type="password"] {
    width: 100%;
    background: var(--fb-bg);
    border: 1px solid var(--fb-border);
    color: var(--fb-text);
    border-radius: var(--fb-radius-sm);
    padding: 10px 12px;
    font-size: 14px;
    font-family: var(--fb-font);
    outline: none;
}
.fb-login-box input[type="text"]:focus,
.fb-login-box input[type="password"]:focus {
    border-color: var(--fb-crimson);
}
.fb-login-box .login-remember label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--fb-text-dim);
    font-size: 13px;
    cursor: pointer;
}
.fb-login-box input[type="submit"] {
    width: 100%;
    background: var(--fb-crimson);
    color: #fff;
    border: none;
    border-radius: var(--fb-radius-sm);
    padding: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--fb-font);
    transition: background 0.2s;
}
.fb-login-box input[type="submit"]:hover {
    background: var(--fb-accent);
}
.fb-login-register,
.fb-login-lost {
    margin-top: 12px;
    font-size: 13px;
    color: var(--fb-text-dim);
}
.fb-login-register a,
.fb-login-lost a {
    color: var(--fb-crimson) !important;
    text-decoration: none !important;
}
.fb-login-register a:hover,
.fb-login-lost a:hover {
    color: var(--fb-accent) !important;
}

/* ── Push notification bell ──────────────────────────────────────────────── */

.fb-push-bell {
    background: none;
    border: 1px solid var(--fb-border);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s;
    flex-shrink: 0;
}
.fb-push-bell:hover { border-color: var(--fb-crimson); }
.fb-push-bell.active { border-color: var(--fb-crimson); background: var(--fb-crimson-glow); }

/* ── iOS PWA install banner ──────────────────────────────────────────────── */

.fb-ios-banner {
    background: var(--fb-surface);
    border: 1px solid var(--fb-crimson-dim);
    border-radius: var(--fb-radius);
    padding: 14px 16px;
    margin: 12px 24px;
    max-width: var(--fb-content-width);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--fb-text-muted);
    line-height: 1.5;
}
.fb-ios-banner strong { color: var(--fb-text); }