:root {
    /* M3 Color Tokens - Light Theme */
    --fb-blue: #1877f2;
    --fb-dark-blue: #166fe5;
    --fb-primary: #1877f2;
    --fb-on-primary: #ffffff;
    --fb-primary-container: #d3e4ff;
    --fb-on-primary-container: #001c3a;
    --fb-secondary: #545f71;
    --fb-on-secondary: #ffffff;
    --fb-secondary-container: #d8e3f8;
    --fb-tertiary: #6e5676;
    --fb-on-tertiary: #ffffff;
    --fb-error: #ba1a1a;
    --fb-on-error: #ffffff;
    --fb-surface: #f8f9ff;
    --fb-surface-dim: #d8dae0;
    --fb-surface-bright: #f8f9ff;
    --fb-surface-container-lowest: #ffffff;
    --fb-surface-container-low: #f2f3fa;
    --fb-surface-container: #ecedf4;
    --fb-surface-container-high: #e6e8ef;
    --fb-surface-container-highest: #e0e2e8;
    --fb-on-surface: #191c20;
    --fb-on-surface-variant: #43474e;
    --fb-outline: #73777f;
    --fb-outline-variant: #c3c6cf;
    --fb-inverse-surface: #2e3036;
    --fb-inverse-on-surface: #eff0f7;

    /* M3 Elevation */
    --fb-shadow: 0 1px 3px 1px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.3);
    --fb-shadow-sm: 0 1px 2px rgba(0,0,0,0.1), 0 1px 3px 1px rgba(0,0,0,0.08);
    --fb-elevation-0: 0 0 0 rgba(0,0,0,0);
    --fb-elevation-1: 0 0.5px 1.5px 0 rgba(0,0,0,0.08), 0 0.5px 2px 0 rgba(0,0,0,0.06);
    --fb-elevation-2: 0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 4px 0 rgba(0,0,0,0.06);
    --fb-elevation-3: 0 2px 6px 0 rgba(0,0,0,0.10), 0 2px 8px 0 rgba(0,0,0,0.06);
    --fb-elevation-4: 0 4px 12px 0 rgba(0,0,0,0.10), 0 4px 16px 0 rgba(0,0,0,0.06);
    --fb-elevation-5: 0 6px 20px 0 rgba(0,0,0,0.12), 0 8px 24px 0 rgba(0,0,0,0.08);

    /* M3 Shape */
    --fb-shape-xs: 4px;
    --fb-shape-sm: 8px;
    --fb-shape-md: 12px;
    --fb-shape-lg: 16px;
    --fb-shape-xl: 28px;
    --fb-shape-full: 9999px;

    /* M3 Typography */
    --fb-font-display-lg: 32px;
    --fb-font-display-md: 28px;
    --fb-font-headline-lg: 24px;
    --fb-font-headline-md: 20px;
    --fb-font-title-lg: 18px;
    --fb-font-title-md: 16px;
    --fb-font-title-sm: 14px;
    --fb-font-body-lg: 16px;
    --fb-font-body-md: 14px;
    --fb-font-body-sm: 12px;
    --fb-font-label-lg: 14px;
    --fb-font-label-md: 12px;
    --fb-font-label-sm: 11px;
    --fb-font-weight-regular: 400;
    --fb-font-weight-medium: 500;
    --fb-font-weight-semibold: 600;
    --fb-font-weight-bold: 700;
    --fb-letter-spacing: 0.15px;
    --fb-line-height: 1.5;

    /* Legacy aliases */
    --fb-bg: var(--fb-surface);
    --fb-white: var(--fb-surface-container-lowest);
    --fb-border: var(--fb-outline-variant);
    --fb-text-gray: var(--fb-on-surface-variant);
    --fb-chat-me: #0084ff;
    --fb-chat-them: var(--fb-surface-container-high);
    --fb-text-main: var(--fb-on-surface);
    --fb-text-name: var(--fb-on-surface);
    --fb-card-bg: var(--fb-surface-container-lowest);
    --fb-input-bg: var(--fb-surface-container);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; width: 100%; max-width: 100%; margin: 0; min-height: 100dvh; }
body { overflow-x: hidden; width: 100%; max-width: 100%; margin: 0; min-height: 100dvh; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: var(--fb-font-body-md); line-height: var(--fb-line-height); color: var(--fb-on-surface); background: var(--fb-surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* DARK THEME STYLES - M3 Dark Color Tokens */
[data-theme="dark"] {
    --fb-primary: #a8c7fa;
    --fb-on-primary: #003061;
    --fb-primary-container: #084280;
    --fb-on-primary-container: #d3e4ff;
    --fb-secondary: #bcc7dc;
    --fb-on-secondary: #283141;
    --fb-secondary-container: #3e4758;
    --fb-tertiary: #d6bee2;
    --fb-on-tertiary: #3e2848;
    --fb-error: #ffb4ab;
    --fb-on-error: #690005;
    --fb-surface: #111318;
    --fb-surface-dim: #111318;
    --fb-surface-bright: #37393e;
    --fb-surface-container-lowest: #0c0e13;
    --fb-surface-container-low: #191c20;
    --fb-surface-container: #1d2024;
    --fb-surface-container-high: #282a2f;
    --fb-surface-container-highest: #33353a;
    --fb-on-surface: #e1e2e8;
    --fb-on-surface-variant: #c3c6cf;
    --fb-outline: #8d9199;
    --fb-outline-variant: #43474e;
    --fb-inverse-surface: #e1e2e8;
    --fb-inverse-on-surface: #2e3036;
    --fb-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.6);
    --fb-shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
    --fb-elevation-1: 0 0.5px 1.5px 0 rgba(0,0,0,0.4), 0 0.5px 2px 0 rgba(0,0,0,0.3);
    --fb-elevation-2: 0 1px 3px 0 rgba(0,0,0,0.4), 0 1px 4px 0 rgba(0,0,0,0.3);
    --fb-elevation-3: 0 2px 6px 0 rgba(0,0,0,0.45), 0 2px 8px 0 rgba(0,0,0,0.3);
    --fb-elevation-4: 0 4px 12px 0 rgba(0,0,0,0.5), 0 4px 16px 0 rgba(0,0,0,0.35);
    --fb-elevation-5: 0 6px 20px 0 rgba(0,0,0,0.55), 0 8px 24px 0 rgba(0,0,0,0.4);
    /* Legacy aliases */
    --fb-bg: var(--fb-surface);
    --fb-white: var(--fb-surface-container-lowest);
    --fb-border: var(--fb-outline-variant);
    --fb-text-gray: var(--fb-on-surface-variant);
    --fb-chat-them: var(--fb-surface-container-high);
    --fb-text-main: var(--fb-on-surface);
    --fb-text-name: var(--fb-on-surface);
    --fb-card-bg: var(--fb-surface-container-lowest);
    --fb-input-bg: var(--fb-surface-container);
}

/* LOADING SCREEN */
.loading-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999999;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 30%, #162447 60%, #0a0a1a 100%);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.loading-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-container { text-align: center; position: relative; }
.loading-logo { margin-bottom: 16px; position: relative; display: inline-block; }
.loading-logo svg { width: 72px; height: 72px; filter: drop-shadow(0 0 30px rgba(118,75,162,0.4)); animation: loadingLogoFloat 2s ease-in-out infinite; }
@keyframes loadingLogoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.loading-brand {
    font-size: 36px; font-weight: 900;
    background: linear-gradient(135deg, #1877f2, #764ba2, #f093fb);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -1px; margin-bottom: 28px;
    text-shadow: none;
    filter: drop-shadow(0 0 20px rgba(118,75,162,0.3));
}
.loading-spinner { margin-bottom: 20px; }
.loading-spinner svg { width: 40px; height: 40px; }
.loading-text {
    font-size: 14px; color: rgba(255,255,255,0.6);
    font-weight: 500; letter-spacing: 0.5px;
    margin-bottom: 16px;
}
.loading-dots { display: flex; gap: 6px; justify-content: center; }
.loading-dots span {
    width: 8px; height: 8px; border-radius: 50%;
    background: linear-gradient(135deg, #1877f2, #764ba2);
    animation: loadingDotBounce 1.4s ease-in-out infinite;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes loadingDotBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}

body {
    background-color: var(--fb-surface);
    color: var(--fb-on-surface);
    transition: background-color 0.3s, color 0.3s;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.safe-area-top { padding-top: env(safe-area-inset-top); }
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); }
.safe-area-left { padding-left: env(safe-area-inset-left); }
.safe-area-right { padding-right: env(safe-area-inset-right); }

/* NAVIGATION BAR - M3 Top App Bar */
.navbar {
    background: var(--fb-surface-container);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 16px;
    padding-top: calc(6px + env(safe-area-inset-top));
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--fb-outline-variant);
    gap: 8px;
    flex-wrap: wrap;
}
.navbar .logo-area {
    display: flex;
    align-items: center;
    gap: 10px;
}
.navbar .logo { 
    color: var(--fb-blue);
    font-size: 28px; 
    font-weight: bold; 
    text-decoration: none;
    cursor: pointer;
    letter-spacing: -1px;
}

.nav-tabs-center {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1;
    justify-content: center;
    min-width: 0;
}
.nav-tabs-center::-webkit-scrollbar { display: none; }
.tab-nav-btn {
    background: none;
    border: none;
    font-size: 14px;
    font-weight: var(--fb-font-weight-medium);
    color: var(--fb-on-surface-variant);
    padding: 8px 16px;
    cursor: pointer;
    position: relative;
    border-radius: var(--fb-shape-sm) var(--fb-shape-sm) 0 0;
    transition: color 0.2s, background 0.2s;
    letter-spacing: 0.1px;
}
.tab-nav-btn::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    width: 0; height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--fb-primary);
    transition: width 0.2s, left 0.2s;
}
.tab-nav-btn.active {
    color: var(--fb-primary);
}
.tab-nav-btn.active::after {
    width: 60%;
    left: 20%;
}

.search-btn-header {
    background: var(--fb-surface-container-high); border: none; cursor: pointer;
    width: 40px; height: 40px; border-radius: var(--fb-shape-full);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1); flex-shrink: 0;
}
.search-btn-header:hover { background: var(--fb-surface-container-highest); transform: scale(1.05); }
.search-btn-header:active { transform: scale(0.95); }
.search-btn-header svg {
    width: 22px; height: 22px; fill: var(--fb-on-surface-variant);
    transition: fill 0.2s;
}
.search-btn-header:hover svg { fill: var(--fb-primary); }

.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-user { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--fb-on-surface); border-radius: var(--fb-shape-full); padding: 4px 8px 4px 4px; transition: background 0.2s; }
.nav-user:hover { background: var(--fb-surface-container-high); }
.nav-user img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--fb-surface-container-high); flex-shrink: 0; }
.nav-display-name { font-size: 14px; font-weight: 600; color: var(--fb-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }

.menu-btn { background: var(--fb-surface-container-high); border: none; color: var(--fb-on-surface); font-size: 18px; cursor: pointer; width: 36px; height: 36px; border-radius: var(--fb-shape-full); display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.menu-btn:hover { background: var(--fb-surface-container-highest); }

/* AUTH CONTAINER */
.auth-wrapper { display: flex; justify-content: center; align-items: center; min-height: 80vh; padding: 20px; }
.auth-box { background: var(--fb-surface-container-lowest); width: 100%; max-width: 380px; padding: 28px; border-radius: var(--fb-shape-xl); box-shadow: var(--fb-elevation-2); text-align: center; border: 1px solid var(--fb-outline-variant); }
.auth-box .logo-large { color: var(--fb-primary); font-size: 42px; font-weight: 800; margin-bottom: 8px; letter-spacing: -1px; }
.auth-box h2 { font-size: 20px; margin-bottom: 20px; color: var(--fb-on-surface); font-weight: 400; letter-spacing: 0.15px; }
.auth-box input { width: 100%; padding: 14px; margin: 6px 0; border: 1.5px solid var(--fb-outline); border-radius: var(--fb-shape-sm); font-size: var(--fb-font-body-lg); outline: none; background: transparent; color: var(--fb-on-surface); box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s; }
.auth-box input:focus { border-color: var(--fb-primary); border-width: 2px; padding: 13px; box-shadow: 0 0 0 3px rgba(24,119,242,0.12); }
.auth-box button { width: 100%; padding: 14px; background: var(--fb-primary); color: var(--fb-on-primary); border: none; border-radius: var(--fb-shape-full); font-weight: var(--fb-font-weight-semibold); font-size: var(--fb-font-body-lg); cursor: pointer; margin-top: 12px; letter-spacing: 0.3px; transition: box-shadow 0.2s, filter 0.2s; }
.auth-box button:hover { box-shadow: var(--fb-elevation-2); filter: brightness(1.08); }
.auth-box button:active { transform: scale(0.98); }
.pwd-strength { margin-top: 4px; margin-bottom: 4px; }
.pwd-strength.hidden { display: none; }
.pwd-strength-bar { width: 100%; height: 4px; background: var(--fb-outline-variant); border-radius: 2px; overflow: hidden; }
.pwd-strength-fill { height: 100%; width: 0; border-radius: 2px; transition: width 0.3s, background 0.3s; }
.pwd-strength-text { font-size: 12px; font-weight: 600; margin-top: 2px; display: block; }

.pwd-input-wrap { position: relative; display: flex; align-items: center; margin-bottom: 12px; }
.pwd-input-wrap input { flex: 1; margin-bottom: 0; width: auto !important; }
.pwd-input-wrap .change-pwd-input { margin-bottom: 0; }
.auth-box .pwd-input-wrap input { padding: 12px 36px 12px 14px !important; }
.auth-box .pwd-input-wrap input:focus { padding: 11px 35px 11px 13px !important; }
.eye-toggle-btn { position: absolute; right: 8px; background: none; border: none; cursor: pointer; padding: 2px; display: flex; align-items: center; justify-content: center; }
.eye-toggle-btn svg { width: 18px; height: 18px; fill: var(--fb-text-gray); display: block; }
.eye-toggle-btn:hover svg { fill: var(--fb-blue); }
.auth-box p { color: var(--fb-primary); cursor: pointer; margin-top: 15px; font-size: 15px; user-select: none; font-weight: 500; }
.auth-divider { display: flex; align-items: center; margin: 14px 0 2px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--fb-outline-variant); }
.auth-divider span { margin: 0 12px; font-size: 13px; color: var(--fb-on-surface-variant); }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px; border: 1px solid var(--fb-outline); border-radius: var(--fb-shape-full); background: var(--fb-surface-container-lowest); color: var(--fb-on-surface); font-size: 15px; font-weight: 500; cursor: pointer; margin-top: 4px; transition: all 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.btn-google:hover { background: #f8f9fa; border-color: #dadce0; box-shadow: 0 1px 5px rgba(0,0,0,0.12); }
.btn-google:active { background: #f1f3f4; }
.btn-google:disabled { opacity: 0.6; cursor: default; box-shadow: none; }
[data-theme="dark"] .btn-google { background: #2d2d2d; border-color: #5f6368; color: #e8eaed; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
[data-theme="dark"] .btn-google:hover { background: #3a3a3a; border-color: #7a7e84; }
[data-theme="dark"] .btn-google:active { background: #454545; }

/* MAIN CONTAINER */
.main-container { max-width: 580px; margin: 16px auto; padding: 0 12px 70px; }
.feed-form, .post-card, .profile-card, .results-card, .box { background: var(--fb-surface-container-lowest); padding: 16px; border-radius: var(--fb-shape-lg); margin-bottom: 12px; box-shadow: var(--fb-elevation-1); border: 1px solid var(--fb-outline-variant); transition: box-shadow 0.2s; }
.post-card:hover { box-shadow: var(--fb-elevation-2); }

/* POST FORM */
.feed-form h3 { margin: 0 0 12px 0; font-size: 16px; color: var(--fb-on-surface-variant); border-bottom: 1px solid var(--fb-outline-variant); padding-bottom: 8px; font-weight: 500; }
.form-header { display: flex; gap: 10px; margin-bottom: 10px; }
.form-header img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--fb-surface-container-high); }
.feed-form textarea { flex: 1; height: 50px; border: none; resize: none; font-size: 15px; outline: none; font-family: inherit; background: transparent; color: var(--fb-on-surface); }
.media-inputs { border-top: 1px solid var(--fb-outline-variant); padding-top: 10px; display: flex; align-items: center; justify-content: space-between; }
.file-label-btn { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #45bd62; cursor: pointer; padding: 8px 14px; border-radius: var(--fb-shape-full); transition: background 0.2s; }
.file-label-btn:hover { background: var(--fb-surface-container-high); }
.file-label-btn input { display: none; }
.btn-post { background: var(--fb-primary); color: var(--fb-on-primary); border: none; padding: 8px 24px; border-radius: var(--fb-shape-full); font-weight: var(--fb-font-weight-semibold); cursor: pointer; font-size: var(--fb-font-body-md); letter-spacing: 0.3px; transition: box-shadow 0.2s, filter 0.2s; }
.btn-post:hover { box-shadow: var(--fb-elevation-2); filter: brightness(1.08); }
.btn-post:active { transform: scale(0.98); }

.preview-container img, .preview-container video { max-width: 100%; max-height: 180px; border-radius: var(--fb-shape-md); margin-top: 10px; display: block; border: 1px solid var(--fb-outline-variant); }

/* OVERLAY YOUTUBE / SHORTS */
.youtube-embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000; border-radius: 6px; margin: 10px 0; }
.youtube-embed-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.youtube-touch-overlay { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 48px); z-index: 10; background: transparent; cursor: pointer; }

/* POST CARD */
.post-card { margin-bottom: 20px; }
.post-card .post-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.post-header-left { display: flex; align-items: center; gap: 10px; }
.post-header img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--fb-surface-container-high); cursor: pointer; }
.post-header-info { display: flex; flex-direction: column; }
.post-header-info .author-name { font-weight: 700; color: var(--fb-on-surface); cursor: pointer; font-size: 15px; }
.post-header-info .author-name:hover { text-decoration: underline; }
.post-meta { font-size: 12px; color: var(--fb-on-surface-variant); margin-top: 2px; }
.post-text { font-size: 15px; line-height: 1.4; margin: 0 0 10px 0; word-break: break-word; color: var(--fb-on-surface); }
.post-media { max-width: 100%; max-height: 450px; border-radius: var(--fb-shape-md); display: block; margin: 10px auto; width: 100%; object-fit: cover; cursor: pointer; }

.post-video { max-width: 100%; max-height: 450px; border-radius: var(--fb-shape-md); display: block; margin: 10px auto; width: 100%; background: #000; }

.delete-post-btn { background: none; border: none; color: var(--fb-on-surface-variant); cursor: pointer; font-size: 18px; padding: 4px 8px; border-radius: var(--fb-shape-full); display: flex; align-items: center; justify-content: center; }
.delete-post-btn:hover { background: var(--fb-surface-container-high); color: #f02849; }

/* LIKE & COMMENT ACTIONS */
.post-stats { display: flex; justify-content: space-between; font-size: 13px; color: var(--fb-on-surface-variant); padding: 8px 0; border-bottom: 1px solid var(--fb-outline-variant); }
.post-actions { display: flex; align-items:center; justify-content:space-between; padding: 4px 12px; border-bottom: 1px solid var(--fb-outline-variant); margin-bottom: 10px; }
.action-btn { flex: 1; background: none; border: none; padding: 8px; border-radius: var(--fb-shape-sm); font-weight: 600; color: var(--fb-on-surface-variant); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; transition: background 0.2s; }
.action-btn:hover { background: var(--fb-surface-container-high); }
.action-btn.liked { color: #e42645; }
.action-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* COMMENTS SECTION */
.comment-box { display: flex; flex-direction: column; gap: 8px; }
.comment-item { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin-bottom: 10px; position:relative; flex-shrink:0; }
.comment-item img.c-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--fb-surface-container-high); cursor: pointer; flex-shrink:0; }
.comment-body { flex:1;min-width:0; }
.comment-bubble { background:var(--fb-surface-container-high);padding:8px 12px;border-radius:18px;color:var(--fb-on-surface);display:inline-block;max-width:100%;border-bottom-left-radius:4px;position:relative; }
.comment-report-btn { position:absolute;top:-8px;right:-8px;width:28px;height:28px;border:2px solid #fff;background:#f02849;color:#fff;border-radius:50%;font-size:13px;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0;line-height:1;z-index:2;box-shadow:0 2px 6px rgba(0,0,0,0.3); }
.comment-bubble:hover .comment-report-btn { display:flex; }
.comment-report-btn:hover { transform:scale(1.15); }
.comment-user { font-weight: 700; color: var(--fb-on-surface); margin-bottom: 2px; cursor: pointer; font-size: 13px; }
.comment-user:hover { text-decoration: underline; }
.comment-text { word-break: break-word; line-height: 1.3; }
.comment-time { font-size:11px;color:var(--fb-text-gray);margin-top:2px;display:flex;align-items:center;flex-wrap:wrap;gap:4px; }
.comment-author-heart { display:inline-flex;align-items:center;position:relative;margin-left:2px; }
.author-heart-avatar { width:18px;height:18px;border-radius:50%;object-fit:cover;display:block; }
.author-heart-icon { position:absolute;bottom:-4px;right:-6px;font-size:10px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.comment-delete-btn { background:none;border:none;color:var(--fb-text-gray);font-size:12px;cursor:pointer;padding:2px 6px;border-radius:4px;flex-shrink:0;line-height:1;margin-top:4px;opacity:0;transition:opacity 0.2s; }
.comment-item:hover .comment-delete-btn { opacity:1; }
.comment-delete-btn:hover { color:#f02849;background:rgba(240,40,73,0.1); }
.comment-footer { display:flex;gap:12px;align-items:center;margin-top:4px;padding-left:4px; }
.comment-heart-btn,.comment-reply-btn { background:none;border:none;font-size:12px;color:var(--fb-text-gray);cursor:pointer;padding:2px 8px;border-radius:12px;transition:all 0.2s;display:flex;align-items:center;gap:3px; }
.comment-heart-btn:hover,.comment-reply-btn:hover { background:var(--fb-surface-container-high); }
.comment-heart-btn span { min-width:12px; }
.comment-heart-btn:hover span { color:var(--fb-text-gray); }
.comment-heart-btn.hearted { color:#e53935; }
.comment-heart-btn.hearted span { color:#e53935; }
.comment-image { max-width:200px;max-height:200px;object-fit:contain;border-radius:0;margin-top:4px;cursor:pointer;display:block; }
.comment-reply-input-wrap { display:flex;gap:6px;align-items:center;margin:6px 0 6px 40px; }
.comment-reply-input-wrap input { flex:1;padding:6px 12px;border:1px solid var(--fb-border);border-radius:16px;outline:none;background:var(--fb-input-bg);color:var(--fb-text-main);font-size:13px; }
.comment-reply-input-wrap button { padding:4px 12px;border:none;border-radius:12px;background:var(--fb-blue);color:#fff;font-weight:600;font-size:12px;cursor:pointer; }
.comment-replies-thread { margin-top:6px;padding-left:8px;border-left:2px solid var(--fb-border); }
.reply-item { display:flex;gap:6px;align-items:flex-start;margin-bottom:6px;position:relative;padding-left:8px; }
.reply-item .r-avatar { width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0;margin-top:2px; }
.reply-body { flex:1;min-width:0; }
.reply-bubble { padding:6px 10px;border-radius:14px;display:inline-block;max-width:100%;background:var(--fb-surface-container-highest);color:var(--fb-on-surface);border-bottom-left-radius:4px;position:relative; }
.reply-user { font-weight:700;font-size:12px;color:var(--fb-on-surface);cursor:pointer; }
.reply-user:hover { text-decoration:underline; }
.reply-text { font-size:13px;word-break:break-word;line-height:1.3; }
.reply-time { font-size:10px;color:var(--fb-text-gray);margin-top:1px; }
.reply-footer { display:flex;align-items:center;gap:8px;margin-top:2px; }
.reply-footer .comment-reply-btn { background:none;border:none;color:var(--fb-text-gray);font-size:11px;font-weight:600;cursor:pointer;padding:2px 6px;border-radius:8px;transition:background 0.2s; }
.reply-footer .comment-reply-btn:hover { background:var(--fb-surface-container-high);color:var(--fb-primary); }
.reply-load-more-wrap { text-align:center;padding:2px 0; }
.reply-load-more-btn { background:none;border:none;color:#16a34a;font-size:12px;font-weight:600;cursor:pointer;padding:4px 10px;border-radius:12px;transition:all 0.2s; }
.reply-load-more-btn:hover { background:rgba(22,163,74,0.1); }

/* REELS INTERFACE */
.reels-container { display: flex; flex-direction: column; gap: 20px; align-items: center; margin-top: 10px; }
.reel-card { background: #000000; width: 100%; max-width: 360px; height: 580px; border-radius: 12px; position: relative; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; }
.reel-status-badge { position: absolute; top: 12px; left: 12px; z-index: 20; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: default; pointer-events: auto; }
.reel-status-badge.sending { background: rgba(255,193,7,0.9); color: #000; }
.reel-status-badge.failed { background: rgba(229,57,53,0.9); color: #fff; cursor: pointer; }

.reel-card video { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.reel-youtube-iframe { width: 100%; height: 100%; border: none; }

.reel-youtube-click-overlay { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 40px); cursor: pointer; z-index: 5; }
.reel-youtube-disable-top-interaction { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 45px); z-index: 6; pointer-events: none; background: transparent; }

.reel-overlay-right { position: absolute; bottom: 40px; right: 12px; display: flex; flex-direction: column; gap: 16px; z-index: 10; }
.reel-action-icon-btn { background: rgba(0, 0, 0, 0.5); border: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; cursor: pointer; flex-direction: column; font-size: 11px; backdrop-filter: blur(5px); }
.reel-action-icon-btn svg { width: 20px; height: 20px; fill: white; }
.reel-action-icon-btn.active svg { fill: #e42645; }
.reel-action-icon-btn span { font-size: 10px; margin-top: 2px; font-weight: 600; }

.reel-delete-btn { position: absolute; top: 15px; right: 15px; background: rgba(0, 0, 0, 0.6); border: none; color: white; cursor: pointer; font-size: 16px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 12; transition: 0.2s; }
.reel-delete-btn:hover { background: #f02849; }

.reel-overlay-bottom { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px 50px 20px 16px; background: linear-gradient(transparent, rgba(0,0,0,0.85)); color: white; box-sizing: border-box; z-index: 9; pointer-events: none; }
.reel-overlay-bottom a, .reel-overlay-bottom img, .reel-overlay-bottom .name { pointer-events: auto; }
.reel-author-info { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.reel-author-info img { width: 32px; height: 32px; border-radius: 50%; border: 1px solid white; object-fit: cover; }
.reel-author-info .name { font-weight: bold; font-size: 14px; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); }
.reel-meta-time { font-size: 11px; color: #ccc; font-weight: normal; margin-left: auto; }
.reel-description { font-size: 13px; line-height: 1.3; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); word-break: break-word; }

/* FULLSCREEN REELS OVERLAY */
:root { --streak-orange: #f97316; --streak-red: #ef4444; --streak-purple: #a855f7; }
.mg-section-header { display:flex;align-items:center;gap:10px;margin:16px 0 10px;font-size:15px;font-weight:700;color:var(--fb-on-surface); }
.mg-section-header .mg-line { flex:1;height:1px;background:var(--fb-outline-variant); }
.mg-standalone { margin-top:12px; }
.fullscreen-reels-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000000; z-index: 9999; display: flex; justify-content: center; align-items: center; touch-action: none; }
.fr-container { position: relative; width: 100%; max-width: 420px; height: 100%; background: #000; display: flex; justify-content: center; align-items: center; }
.fr-video-wrapper { width: 100%; height: 100%; position: relative; }

.fr-video-wrapper video { width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
.fr-actions { position: absolute; right: 15px; bottom: 120px; display: flex; flex-direction: column; gap: 20px; align-items: center; z-index: 10; }
.fr-btn { background: rgba(0, 0, 0, 0.5); border: none; width: 46px; height: 46px; border-radius: 50%; color: white; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; backdrop-filter: blur(5px); }
.fr-btn svg { width: 22px; height: 22px; fill: white; }
.fr-btn.liked svg { fill: #ff2a54; }
.fr-count { color: white; font-size: 12px; margin-top: 4px; font-weight: bold; text-shadow: 1px 1px 2px black; text-align: center; }
.fr-info { position: absolute; bottom: 30px; left: 15px; right: 80px; color: white; z-index: 10; text-shadow: 1px 1px 3px rgba(0,0,0,0.9); pointer-events: none; }
.fr-info img, .fr-info .fr-username { pointer-events: auto; }
.fr-author-block { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fr-author-block img { width: 36px; height: 36px; border-radius: 50%; border: 1px solid white; object-fit: cover; cursor: pointer; }
.fr-username { font-weight: bold; font-size: 16px; cursor: pointer; }
.fr-caption { font-size: 14px; opacity: 0.95; line-height: 1.3; word-break: break-word; }
.comment-first-badge { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 10px; background: #1a3a6b; color: #fff; font-size: 10px; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.fr-swipe-hint { position: absolute; left: 0; top: 0; width: 50px; height: 100%; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 15; color: rgba(255,255,255,0.7); font-size: 11px; font-weight: 600; writing-mode: vertical-lr; text-orientation: mixed; letter-spacing: 2px; pointer-events: auto; cursor: pointer; user-select: none; }
.fr-close-btn { position: absolute; top: 20px; left: 20px; background: rgba(0,0,0,0.5); border: none; color: white; font-size: 20px; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; z-index: 20; display: flex; align-items: center; justify-content: center; }
.fr-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.15); border: none; color: white; width: 42px; height: 42px; border-radius: 50%; font-size: 20px; cursor: pointer; z-index: 11; display: flex; align-items: center; justify-content: center; }
.fr-nav-btn:hover { background: rgba(255,255,255,0.3); }
.fr-nav-prev { left: -60px; }
.fr-nav-next { right: -60px; }
@media(max-width: 560px) { .fr-nav-btn { display: none; } }

/* PROFILE INTERFACE */
.profile-header-card { background: var(--fb-surface-container-lowest); border-radius: var(--fb-shape-lg); overflow: hidden; margin-bottom: 12px; box-shadow: var(--fb-elevation-1); border: 1px solid var(--fb-outline-variant); }
.cover-container { position: relative; width: 100%; height: 200px; background: var(--fb-surface-dim); }
.cover-photo { width: 100%; height: 100%; object-fit: cover; }
.change-cover-btn { position: absolute; bottom: 10px; right: 10px; background: rgba(255,255,255,0.85); color: #000; padding: 6px 12px; border-radius: var(--fb-shape-full); font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 4px; backdrop-filter: blur(4px); }
.change-cover-btn input { display: none; }

.profile-avatar-container { position: relative; width: 140px; height: 140px; margin: -70px auto 0 auto; display: flex; justify-content: center; align-items: center; }
.profile-avatar-img { width: 100%; height: 100%; border-radius: 50%; border: 4px solid var(--fb-surface-container-lowest); object-fit: cover; background: var(--fb-surface-container-high); box-sizing: border-box !important; }
.change-avatar-btn { position: absolute; bottom: 0; right: 0; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg,#1877f2,#0f5bcc); display: flex; align-items: center; justify-content: center; cursor: pointer; border: 3px solid var(--fb-surface-container-lowest); color: #fff; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,0.25); transition: transform 0.2s, box-shadow 0.2s; }
.change-avatar-btn:hover { transform: scale(1.1); box-shadow: 0 4px 14px rgba(24,119,242,0.4); }
.change-avatar-btn svg { width: 18px; height: 18px; fill: #fff; }
.change-avatar-btn input { display: none; }

.profile-info-block { text-align: center; padding: 15px; }
.profile-info-block h2 { margin: 0 0 5px 0; font-size: 24px; color: var(--fb-on-surface); font-weight: 600; }
.profile-info-block .bio-text { color: var(--fb-on-surface-variant); font-size: 14px; margin: 5px 0; font-style: italic; }
.profile-info-block .profile-username { color: var(--fb-text-gray); font-size: 14px; margin: 2px 0 6px; font-weight: 500; }

.profile-stats-row { display: flex; justify-content: center; gap: 0; padding: 8px 0 12px; }
.profile-stat-item { flex: 1; text-align: center; cursor: pointer; padding: 4px 10px; border-radius: var(--fb-shape-md); transition: background 0.2s; }
.profile-stat-item:hover { background: var(--fb-surface-container-high); }
.profile-stat-num { display: block; font-size: 18px; font-weight: 800; color: var(--fb-on-surface); }
.profile-stat-label { display: block; font-size: 12px; color: var(--fb-on-surface-variant); margin-top: 2px; }

.profile-action-row { display: flex; gap: 10px; padding: 12px 15px; border-bottom: 1px solid var(--fb-outline-variant); background: var(--fb-surface-container-lowest); }
.profile-action-btn { flex: 1; padding: 10px; border-radius: var(--fb-shape-sm); font-size: 14px; font-weight: 700; cursor: pointer; border: none; transition: all 0.2s; text-align: center; }
.profile-action-btn.follow { background: var(--fb-primary); color: var(--fb-on-primary); }
.profile-action-btn.follow:hover { box-shadow: var(--fb-elevation-1); filter: brightness(1.08); }
.profile-action-btn.follow.unfollow { background: var(--fb-surface-container-lowest); color: var(--fb-on-surface); border: 2px solid var(--fb-outline); }
.profile-action-btn.friend { background: var(--fb-primary); color: var(--fb-on-primary); }
.profile-action-btn.friend:hover { box-shadow: var(--fb-elevation-1); filter: brightness(1.08); }
.profile-action-btn.friend.chat { background: var(--fb-surface-container-lowest); color: var(--fb-on-surface); border: 2px solid var(--fb-outline); }

.profile-edit-form { padding: 15px; background: var(--fb-surface-container); border-radius: var(--fb-shape-md); margin: 10px 15px; font-size: 13px; }
.profile-edit-form label { display:block; margin-bottom:4px; }
.profile-edit-form input, .profile-edit-form textarea { width: 95%; padding: 8px; margin: 6px 0; border: 1px solid var(--fb-outline); border-radius: var(--fb-shape-sm); font-family: inherit; background: var(--fb-surface-container-lowest); color: var(--fb-on-surface); }

/* PROFILE SUB-TABS */
.profile-tabs-nav { display: flex; border-bottom: 1px solid var(--fb-outline-variant); background: var(--fb-surface-container-lowest); border-radius: var(--fb-shape-lg) var(--fb-shape-lg) 0 0; padding: 0 10px; margin-top: 15px; }
.profile-tab-btn { flex: 1; padding: 12px; background: none; border: none; font-size: 15px; font-weight: 700; color: var(--fb-on-surface-variant); cursor: pointer; border-bottom: 3px solid transparent; text-align: center; transition: all 0.2s; }
.profile-tab-btn.active { color: var(--fb-primary); border-bottom-color: var(--fb-primary); }
.profile-tab-content-box { background: transparent; border-radius: 0 0 var(--fb-shape-lg) var(--fb-shape-lg); }

/* PROFILE REEL GRID RENDER */
.profile-reels-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 15px 5px; }
.profile-reel-item { background: #000; border-radius: var(--fb-shape-md); overflow: hidden; position: relative; padding-top: 150%; box-shadow: var(--fb-elevation-1); cursor: pointer; }
.profile-reel-item video, .profile-reel-item iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border: none; }
.profile-reel-overlay-click { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; background: rgba(0,0,0,0.15); }
.profile-reel-desc-badge { position: absolute; bottom: 5px; left: 5px; right: 5px; color: white; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 1px 1px 2px black; z-index: 6; }

/* PROFILE FULLSCREEN OVERLAY */
#profileViewTab { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2147483646; background: var(--fb-surface); overflow-y: auto; }
#profileViewTab.hidden { display: none; }
.profile-top-bar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 12px; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top)); background: var(--fb-surface-container); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--fb-outline-variant); }
.profile-top-bar .back-btn { background: var(--fb-surface-container-high); border: none; width: 36px; height: 36px; border-radius: var(--fb-shape-full); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--fb-on-surface); flex-shrink: 0; transition: 0.2s; }
.profile-top-bar .back-btn:hover { background: var(--fb-surface-container-highest); }
.profile-top-bar .profile-top-title { font-size: var(--fb-font-title-lg); font-weight: var(--fb-font-weight-semibold); color: var(--fb-on-surface); letter-spacing: var(--fb-letter-spacing); }
#profileViewTab .profile-header-card { border-radius: 0; max-width: 780px; margin: 0 auto; }
#profileViewTab .profile-tabs-nav { margin: 0 auto; border-radius: 0; max-width: 780px; }
#profileViewTab .profile-tab-content-box { max-width: 780px; margin: 0 auto; padding: 0 10px; }
.profile-equip-items { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-equip-item { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--fb-shape-md); font-size: 11px; font-weight: 600; cursor: pointer; border: 2px solid var(--fb-outline-variant); background: var(--fb-surface-container); color: var(--fb-on-surface-variant); transition: 0.2s; }
.profile-equip-item:hover { border-color: var(--fb-primary); color: var(--fb-primary); }
.profile-equip-item.active { border-color: var(--fb-primary); background: rgba(24,119,242,0.08); color: var(--fb-primary); }
.profile-equip-item .pe-preview { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; background: var(--fb-outline-variant); }
.profile-equip-item .pe-label { max-width: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-equip-item .pe-none { color: var(--fb-on-surface-variant); font-size: 11px; }

/* SIDEBAR / SIDE MENU */
.sidebar { position: fixed; top: 0; right: 0; width: 260px; height: 100%; background: var(--fb-surface-container-lowest); box-shadow: var(--fb-shadow); z-index: 150; padding: 20px; transition: transform 0.3s ease; transform: translateX(100%); border-left: 1px solid var(--fb-outline-variant); border-radius: var(--fb-shape-lg) 0 0 var(--fb-shape-lg); }
.sidebar.active { transform: translateX(0); }
.sidebar-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--fb-outline-variant); margin-bottom: 15px; padding-bottom: 8px; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; text-align: left; background: none; border: none; border-radius: var(--fb-shape-sm); cursor: pointer; font-size: 15px; font-weight: 600; color: var(--fb-on-surface); transition: background 0.2s; }
.menu-item:hover { background: var(--fb-surface-container-high); }
.menu-item svg { width: 20px; height: 20px; fill: var(--fb-on-surface-variant); }
.logout { color: #f02849; }

/* SEARCH & USER CARDS */
.user-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--fb-outline-variant); }
.user-row-left { display: flex; align-items: center; gap: 10px; }
.user-row-left img { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; background: var(--fb-surface-container-high); cursor: pointer; }
.user-row-info { display: flex; flex-direction: column; }
.user-row-info .u-displayname { font-weight: 700; font-size: 15px; cursor: pointer; display: flex; align-items: center; gap: 6px; color: var(--fb-on-surface); }
.user-row-info .u-username { font-size: 12px; color: var(--fb-on-surface-variant); }
.btn-action-sm { background: var(--fb-primary); color: var(--fb-on-primary); border: none; padding: 6px 12px; border-radius: var(--fb-shape-full); font-weight: var(--fb-font-weight-semibold); font-size: var(--fb-font-body-sm); cursor: pointer; transition: box-shadow 0.2s, filter 0.2s; }
.btn-action-sm:hover { box-shadow: var(--fb-elevation-2); filter: brightness(1.08); }
.btn-action-sm.secondary { background: transparent; color: var(--fb-on-surface); border: 1px solid var(--fb-outline); }
.btn-action-sm.secondary:hover { background: var(--fb-surface-container-high); box-shadow: none; filter: none; }

/* ONLINE STATUS INDICATORS */
.status-dot-indicator { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.status-dot-indicator.online { background-color: #45bd62; box-shadow: 0 0 4px #45bd62; }
.status-dot-indicator.offline { background-color: #f02849; box-shadow: 0 0 4px #f02849; }

/* MODAL STYLES */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 200; display: flex; justify-content: center; align-items: center; padding: 10px; box-sizing: border-box; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: modalFadeIn 0.2s ease; }
@keyframes modalFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.modal-content { background: var(--fb-surface-container-lowest); padding: 20px; border-radius: var(--fb-shape-xl); width: 100%; max-width: 480px; position: relative; max-height: 90vh; overflow-y: auto; color: var(--fb-on-surface); box-shadow: var(--fb-elevation-3); }
.close-modal { position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer; color: var(--fb-on-surface-variant); }

/* CHAT WINDOW POPUP */
#chatBoxModal .modal-content { max-width: 440px; padding: 0; border-radius: var(--fb-shape-xl); overflow: hidden; display: flex; flex-direction: column; background: var(--fb-surface-container-lowest); }
.chat-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--fb-outline-variant); }
.chat-header-left { display: flex; align-items: center; gap: 20px; }
.chat-header img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.chat-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--fb-on-surface); }
.chat-header .status-dot { font-size: 12px; display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.chat-header .status-dot.online { color: #45bd62; }
.chat-header .status-dot.offline { color: #f02849; }
.chat-close-btn { background: var(--fb-surface-container-high); border: none; width: 32px; height: 32px; border-radius: var(--fb-shape-full); cursor: pointer; color: var(--fb-on-surface); }

.chat-messages { height: 340px; overflow-y: auto; padding: 16px; background: transparent; display: flex; flex-direction: column; gap: 12px; }
.chat-typing-indicator { padding: 4px 16px 0; font-size: 12px; color: var(--fb-on-surface-variant); font-style: italic; display: flex; align-items: center; gap: 6px; }
.chat-typing-indicator.hidden { display: none; }
.chat-typing-indicator .typing-dots { display: inline-flex; gap: 2px; }
.chat-typing-indicator .typing-dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--fb-on-surface-variant); animation: typingDot 1.4s infinite; }
.chat-typing-indicator .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-indicator .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot { 0%,60%,100% { opacity: 0.3; transform: scale(0.8); } 30% { opacity: 1; transform: scale(1); } }
.chat-msg-block { display: flex; gap: 8px; align-items: flex-end; max-width: 80%; }
.chat-msg-block.msg-me { margin-left: auto; flex-direction: row-reverse; }
.chat-msg-block img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

.chat-bubble { padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.4; word-break: break-word; }
.chat-bubble img, .chat-bubble video { border-radius: var(--fb-shape-md); display: block; margin-top: 4px; }

.chat-msg-block.msg-me .chat-bubble { background: var(--fb-primary); color: var(--fb-on-primary); border-bottom-right-radius: 4px; }
.chat-msg-block.msg-them .chat-bubble { background: var(--fb-surface-container-high); color: var(--fb-on-surface); border-bottom-left-radius: 4px; }

.chat-input-area { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--fb-outline-variant); padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.chat-input-wrap { flex: 1; display: flex; align-items: center; background: var(--fb-surface-container-high); border-radius: var(--fb-shape-full); padding: 6px 14px; }
.chat-input-wrap input { flex: 1; border: none; background: transparent; outline: none; font-size: 14px; color: var(--fb-on-surface); }

.chat-file-btn { background: none; border: none; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; color: var(--fb-on-surface-variant); }
.chat-file-btn input { display: none; }
.chat-send-btn { background: transparent; border: none; color: var(--fb-primary); cursor: pointer; padding: 6px; font-weight: 700; }

.fullscreen-reels-overlay #reelCommentModal { z-index: 2147483647 !important; }
.hidden { display: none !important; }

/* TÀI XỈU MINI GAME CUSTOM CSS */
.tx-grid-select { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.tx-btn-choice { background: var(--fb-surface-container); border: 1px solid var(--fb-outline-variant); padding: 10px; font-weight: 700; border-radius: var(--fb-shape-md); cursor: pointer; color: var(--fb-on-surface); font-size: 13px; text-align: center; transition: 0.2s; position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: center; min-height: 65px; }
.tx-btn-choice:hover { border-color: var(--fb-primary); }
.tx-btn-choice.selected { border-color: var(--fb-primary); background: rgba(24, 119, 242, 0.1); }
.tx-bet-all-label { font-size: 11px; color: #ff9800; font-weight: 700; margin-top: 4px; display: block; width: 100%; text-align: center; }
.tx-chips-container { display: flex; gap: 6px; overflow-x: auto; padding: 6px 0; margin-bottom: 12px; }
.tx-chip-btn { background: var(--fb-surface-container-high); border: 2px solid transparent; border-radius: var(--fb-shape-full); padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--fb-on-surface); white-space: nowrap; transition: 0.2s; }
.tx-chip-btn.selected { background: #ff9800; color: white; border-color: #f57c00; }
.tx-dice-display { display: flex; justify-content: center; gap: 15px; margin: 15px 0; font-size: 32px; background: var(--fb-surface-container); padding: 10px; border-radius: var(--fb-shape-md); min-height: 48px; align-items: center; }
.tx-chat-container { border: 1px solid var(--fb-outline-variant); border-radius: var(--fb-shape-md); background: var(--fb-surface-container-lowest); display: flex; flex-direction: column; height: 260px; margin-top: 15px; overflow: hidden; }
.tx-chat-logs { flex: 1; overflow-y: auto; padding: 10px; font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.tx-chat-form { display: flex; border-top: 1px solid var(--fb-outline-variant); background: var(--fb-surface-container); padding: 6px; }
.tx-chat-form input { flex: 1; border: none; background: transparent; padding: 8px; outline: none; color: var(--fb-on-surface); font-size: 13px; }
.tx-chat-form button { background: var(--fb-primary); color: var(--fb-on-primary); border: none; padding: 6px 14px; border-radius: var(--fb-shape-sm); font-weight: 700; cursor: pointer; font-size: 13px; }
.tx-triple-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.tx-numbers-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 12px; }
@media(max-width: 480px) { .tx-numbers-grid { grid-template-columns: repeat(4, 1fr); } }
/* TOP BANNER BIG WIN NOTIFICATION */
.win-top-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 999999;
    background: linear-gradient(135deg, #fff8e1, #ffd54f, #ffb300);
    padding: 12px 20px; display: flex; align-items: center;
    justify-content: center; box-shadow: 0 4px 20px rgba(255,179,0,0.4);
    animation: winBannerSlide 0.5s ease forwards;
    box-sizing: border-box; border-bottom: 2px solid #ff8f00;
    gap: 10px;
}
.win-top-banner-content {
    display: flex; align-items: center; gap: 12px;
    font-size: 15px; font-weight: 600; color: #1a1a1a;
    flex-wrap: wrap; justify-content: center;
}
.win-banner-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    border: 2px solid #fff; object-fit: cover;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.win-banner-name { font-weight: 700; color: #1a1a1a; font-size: 16px; }
.win-banner-label { color: #5d4037; opacity: 0.8; }
.win-banner-amount { color: #c62828; font-weight: 700; font-size: 20px; }
.win-banner-countdown {
    background: rgba(255,255,255,0.5); border-radius: 12px;
    padding: 2px 10px; font-size: 12px; font-weight: 700;
    color: #6d4c00; white-space: nowrap;
}
.win-banner-close {
    background: rgba(0,0,0,0.1); border: none; color: #5d4037;
    font-size: 18px; cursor: pointer; width: 30px; height: 30px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.win-banner-close:hover { background: rgba(0,0,0,0.2); }
@keyframes winBannerSlide { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* ADMIN PANEL */
.admin-badge { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, #ffd700, #ffaa00); color: #1a1a2e; padding: 2px 10px; border-radius: var(--fb-shape-full); font-size: 11px; font-weight: 700; }
.admin-badge-super { background: linear-gradient(135deg, #ff4500, #ff0000); color: #fff; box-shadow: 0 0 8px rgba(255,69,0,0.6); }
.admin-key-input-group { display: flex; gap: 8px; margin: 10px 0; }
.admin-key-input-group input { flex: 1; padding: 8px; border: 1px solid var(--fb-outline); border-radius: var(--fb-shape-sm); background: var(--fb-surface-container); color: var(--fb-on-surface); }
.admin-key-input-group button { background: var(--fb-primary); color: var(--fb-on-primary); border: none; padding: 8px 16px; border-radius: var(--fb-shape-sm); font-weight: 700; cursor: pointer; }
.admin-panel { background: linear-gradient(135deg, #1a1a2e, #16213e); color: #e4e6eb; border-radius: var(--fb-shape-lg); padding: 15px; margin-top: 10px; border: 1px solid #ffd700; }
.admin-panel h4 { color: #ffd700; margin: 0 0 10px 0; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.admin-coin-control { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.admin-coin-control input, .admin-coin-control select { padding: 6px; border-radius: var(--fb-shape-sm); border: 1px solid #3e4042; background: #242526; color: #e4e6eb; }
.admin-coin-control button { padding: 6px 14px; border: none; border-radius: var(--fb-shape-sm); font-weight: 700; cursor: pointer; }
.admin-btn-add { background: #45bd62; color: white; }
.admin-btn-sub { background: #f02849; color: white; }

/* ROOM TABS */
.room-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.room-tab-btn { flex: 1; padding: 10px; text-align: center; background: var(--fb-surface-container-high); border: 1px solid var(--fb-outline-variant); border-radius: var(--fb-shape-md); cursor: pointer; font-weight: 700; font-size: 14px; color: var(--fb-on-surface-variant); transition: 0.2s; }
.room-tab-btn.active { background: var(--fb-primary); color: var(--fb-on-primary); border-color: var(--fb-primary); }
.room-tab-btn.admin-tab { border-color: #ffd700; }
.room-tab-btn.admin-tab.active { background: linear-gradient(135deg, #ffd700, #ffaa00); color: #1a1a2e; border-color: #ffd700; }
.room-content { display: none; }
.room-content.active { display: block; }

/* ADMIN RESULT SELECTOR IN ROOM */
.admin-result-selector { background: var(--fb-surface-container); border-radius: var(--fb-shape-md); padding: 12px; margin: 10px 0; border: 2px solid #ffd700; }
.admin-result-selector h5 { margin: 0 0 8px 0; color: #ffd700; font-size: 14px; text-align: center; }
.admin-dice-selector { display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; }
.admin-dice-col { text-align: center; }
.admin-dice-col label { font-size: 11px; color: var(--fb-text-gray); display: block; margin-bottom: 4px; }
.admin-dice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.admin-dice-btn { width: 36px; height: 36px; background: var(--fb-surface-container-lowest); border: 1px solid var(--fb-outline-variant); border-radius: var(--fb-shape-sm); cursor: pointer; font-weight: 700; font-size: 14px; color: var(--fb-on-surface); transition: 0.15s; }
.admin-dice-btn:hover { border-color: #ffd700; }
.admin-dice-btn.selected { background: #ffd700; color: #1a1a2e; border-color: #ffd700; box-shadow: 0 0 8px rgba(255,215,0,0.4); }
.admin-result-preview { text-align: center; font-size: 14px; font-weight: bold; color: #ffd700; margin: 8px 0; min-height: 20px; }
.admin-confirm-result-btn { width: 100%; padding: 10px; background: linear-gradient(135deg, #ffd700, #ffaa00); color: #1a1a2e; border: none; border-radius: var(--fb-shape-md); font-weight: 700; font-size: 14px; cursor: pointer; }
.admin-confirm-result-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.admin-start-btn { width: 100%; padding: 12px; background: linear-gradient(135deg, #ffd700, #ffaa00); color: #1a1a2e; border: none; border-radius: var(--fb-shape-md); font-weight: 700; font-size: 15px; cursor: pointer; margin-bottom: 10px; animation: adminStartPulse 1.5s ease-in-out infinite; }
@keyframes adminStartPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,0,0.4); } 50% { box-shadow: 0 0 20px 5px rgba(255,215,0,0.2); } }
.admin-start-btn:disabled { opacity: 0.5; cursor: not-allowed; animation: none; }
.admin-waiting-text { text-align: center; font-size: 14px; color: var(--fb-on-surface-variant); font-style: italic; margin: 10px 0; }

/* ENHANCED WIN BANNER */
.win-top-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 999999;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 16px 20px; display: flex; align-items: center;
    justify-content: center;
    box-shadow: 0 4px 30px rgba(255,215,0,0.4), inset 0 1px 0 rgba(255,215,0,0.3);
    animation: winBannerSlide 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    box-sizing: border-box;
    border-bottom: 2px solid #ffd700;
    gap: 12px;
    overflow: hidden;
}
.win-banner-glow { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,215,0,0.08) 0%, transparent 60%); pointer-events: none; animation: winGlowPulse 2s ease-in-out infinite; }
@keyframes winGlowPulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 1; } }
.win-banner-icon { display: flex; align-items: center; justify-content: center; }
.win-banner-icon svg { width: 48px; height: 48px; filter: drop-shadow(0 0 10px rgba(255,215,0,0.6)); animation: winTrophyBounce 1.5s ease-in-out infinite; }
@keyframes winTrophyBounce { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-5px) rotate(-5deg); } 75% { transform: translateY(-5px) rotate(5deg); } }
.win-top-banner-content { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: #fff; flex-wrap: wrap; justify-content: center; }
.win-banner-avatar { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #ffd700; object-fit: cover; box-shadow: 0 0 15px rgba(255,215,0,0.3); }
.win-banner-name { font-weight: 700; color: #ffd700; font-size: 16px; text-shadow: 0 0 10px rgba(255,215,0,0.3); }
.win-banner-label { color: rgba(255,255,255,0.7); }
.win-banner-amount { color: #ffd700; font-weight: 700; font-size: 22px; text-shadow: 0 0 15px rgba(255,215,0,0.5), 0 0 30px rgba(255,215,0,0.2); animation: winAmountGlow 1.5s ease-in-out infinite; }
@keyframes winAmountGlow { 0%, 100% { text-shadow: 0 0 15px rgba(255,215,0,0.5); } 50% { text-shadow: 0 0 25px rgba(255,215,0,0.8), 0 0 50px rgba(255,215,0,0.3); } }
.win-banner-countdown { background: rgba(255,255,255,0.15); border-radius: 12px; padding: 4px 12px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.8); white-space: nowrap; backdrop-filter: blur(5px); }
.win-banner-close { background: rgba(255,255,255,0.1); border: none; color: rgba(255,255,255,0.7); font-size: 20px; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: 0.2s; }
.win-banner-close:hover { background: rgba(255,255,255,0.2); color: #fff; }

/* CONFETTI */
.win-confetti-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 1; }
.win-confetti-piece { position: absolute; width: 8px; height: 8px; top: -10px; animation: confettiFall linear forwards; }
.win-confetti-piece:nth-child(1) { left: 10%; animation-duration: 3s; animation-delay: 0s; background: #ffd700; border-radius: 50%; }
.win-confetti-piece:nth-child(2) { left: 20%; animation-duration: 3.5s; animation-delay: 0.2s; background: #ff6b6b; border-radius: 2px; }
.win-confetti-piece:nth-child(3) { left: 30%; animation-duration: 2.8s; animation-delay: 0.5s; background: #4ecdc4; border-radius: 50%; }
.win-confetti-piece:nth-child(4) { left: 40%; animation-duration: 3.2s; animation-delay: 0.1s; background: #45bd62; border-radius: 2px; }
.win-confetti-piece:nth-child(5) { left: 50%; animation-duration: 2.5s; animation-delay: 0.4s; background: #ffd700; border-radius: 50%; }
.win-confetti-piece:nth-child(6) { left: 60%; animation-duration: 3.8s; animation-delay: 0.3s; background: #a29bfe; border-radius: 2px; }
.win-confetti-piece:nth-child(7) { left: 70%; animation-duration: 2.2s; animation-delay: 0.6s; background: #fd79a8; border-radius: 50%; }
.win-confetti-piece:nth-child(8) { left: 80%; animation-duration: 3.1s; animation-delay: 0.15s; background: #ffd700; border-radius: 2px; }
.win-confetti-piece:nth-child(9) { left: 90%; animation-duration: 2.9s; animation-delay: 0.45s; background: #00cec9; border-radius: 50%; }
.win-confetti-piece:nth-child(10) { left: 15%; animation-duration: 3.3s; animation-delay: 0.35s; background: #6c5ce7; border-radius: 2px; }
.win-confetti-piece:nth-child(11) { left: 45%; animation-duration: 2.7s; animation-delay: 0.55s; background: #fdcb6e; border-radius: 50%; }
.win-confetti-piece:nth-child(12) { left: 75%; animation-duration: 3.6s; animation-delay: 0.05s; background: #e17055; border-radius: 2px; }
@keyframes confettiFall { 0% { transform: translateY(-20px) rotate(0deg); opacity: 1; } 100% { transform: translateY(200px) rotate(720deg); opacity: 0; } }

/* MINI GAME HUB */
.mini-game-hub { max-width: 600px; margin: 0 auto; padding: 10px; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 20px; }
.game-card { background: var(--fb-surface-container-lowest); border: 1px solid var(--fb-outline-variant); border-radius: var(--fb-shape-lg); padding: 20px 16px; text-align: center; cursor: pointer; transition: all 0.25s; box-shadow: var(--fb-elevation-1); }
.game-card:hover { transform: translateY(-4px); box-shadow: var(--fb-elevation-2); border-color: var(--fb-primary); }
.game-card-icon { font-size: 48px; display: block; margin-bottom: 10px; }
.game-card-name { font-weight: 700; font-size: 16px; color: var(--fb-on-surface); margin-bottom: 4px; }
.game-card-desc { font-size: 12px; color: var(--fb-on-surface-variant); }
.game-back-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--fb-surface-container-high); border: 1px solid var(--fb-outline-variant); padding: 6px 14px; border-radius: var(--fb-shape-full); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--fb-on-surface-variant); margin-bottom: 12px; transition: all 0.2s; }
.game-back-btn:hover { background: var(--fb-surface-container-highest); }

/* WHEEL OF FORTUNE */
.wheel-page { max-width: 480px; margin: 0 auto; padding: 10px; text-align: center; }
.wheel-header { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 6px; }
.wheel-header h2 { margin: 0; font-size: 22px; color: var(--fb-text-name); font-weight: 800; }
.wheel-balance { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #1a1a2e, #162447); padding: 8px 20px; border-radius: 20px; color: #f59e0b; font-weight: 700; font-size: 15px; margin-bottom: 16px; border: 1px solid rgba(245,158,11,0.2); }
.wheel-container { position: relative; width: 320px; height: 320px; margin: 0 auto 16px; }
.wheel-pointer { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); z-index: 10; filter: drop-shadow(0 4px 12px rgba(240,40,73,0.5)); animation: wheelPointerBounce 1s ease-in-out infinite; }
@keyframes wheelPointerBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(4px); } }
.wheel-spin-container { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 6px #1a1a2e, 0 0 0 10px #1877f2, 0 0 40px rgba(24,119,242,0.3); overflow: hidden; transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99); }
.wheel-spin-container canvas { width: 100%; height: 100%; display: block; }
.wheel-actions { display: flex; gap: 12px; justify-content: center; margin: 20px 0; }
.wheel-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border: none; border-radius: 14px; font-weight: 700; font-size: 15px; cursor: pointer; transition: all 0.3s; flex: 1; max-width: 200px; color: white; }
.wheel-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.wheel-btn-red { background: linear-gradient(135deg, #f02849, #d91a3a); box-shadow: 0 4px 16px rgba(240,40,73,0.3); }
.wheel-btn-red:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(240,40,73,0.5); }
.wheel-btn-red:active:not(:disabled) { transform: translateY(0); }
.wheel-btn-blue { background: linear-gradient(135deg, #1877f2, #0d5ab9); box-shadow: 0 4px 16px rgba(24,119,242,0.3); }
.wheel-btn-blue:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(24,119,242,0.5); }
.wheel-btn-blue:active:not(:disabled) { transform: translateY(0); }
.wheel-prizes-list { margin-top: 12px; }
.wheel-prizes-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--fb-text-gray); cursor: pointer; padding: 6px 12px; border-radius: 8px; background: var(--fb-input-bg); border: 1px solid var(--fb-border); transition: 0.2s; }
.wheel-prizes-toggle:hover { border-color: var(--fb-blue); color: var(--fb-blue); }
.wheel-prizes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin-top: 8px; max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.wheel-prizes-grid.open { max-height: 800px; }
.wheel-prize-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--fb-input-bg); border: 1px solid var(--fb-border); font-size: 12px; color: var(--fb-text-gray); }
.wheel-prize-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.wheel-prize-label { flex: 1; text-align: left; font-weight: 500; }
.wheel-prize-prob { font-size: 11px; color: var(--fb-text-gray); }
@keyframes wheelWinGlow { 0%, 100% { box-shadow: 0 0 0 6px #1a1a2e, 0 0 0 10px #1877f2, 0 0 40px rgba(24,119,242,0.3); } 50% { box-shadow: 0 0 0 6px #1a1a2e, 0 0 0 10px #f59e0b, 0 0 60px rgba(245,158,11,0.5); } }

/* LOTTERY */
.lottery-station-select { width: 100%; padding: 10px; border-radius: var(--fb-shape-md); border: 1px solid var(--fb-outline); background: var(--fb-surface-container); color: var(--fb-on-surface); font-size: 14px; margin-bottom: 10px; }
.lottery-number-input { width: 100%; padding: 12px; font-size: 24px; font-family: 'Courier New', monospace; text-align: center; border: 2px solid var(--fb-outline-variant); border-radius: var(--fb-shape-md); background: var(--fb-surface-container); color: var(--fb-on-surface); outline: none; box-sizing: border-box; letter-spacing: 4px; }
.lottery-number-input:focus { border-color: var(--fb-primary); }
.lottery-number-input.error { border-color: #f02849; }
.lottery-quantity-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0; }
.lottery-qty-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--fb-outline-variant); background: var(--fb-surface-container-high); color: var(--fb-on-surface); font-size: 18px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.lottery-qty-btn:hover { background: var(--fb-primary); color: var(--fb-on-primary); border-color: var(--fb-primary); }
.lottery-qty-display { font-size: 22px; font-weight: 700; min-width: 40px; text-align: center; color: var(--fb-on-surface); }
.lottery-buy-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #e91e63, #ff5722); color: white; border: none; border-radius: var(--fb-shape-md); font-weight: 700; font-size: 16px; cursor: pointer; margin: 8px 0 16px 0; transition: 0.2s; }
.lottery-buy-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(233,30,99,0.3); }
.lottery-buy-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.lottery-prize-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
.lottery-prize-table th { background: var(--fb-primary); color: var(--fb-on-primary); padding: 8px 6px; text-align: center; font-weight: 600; }
.lottery-prize-table td { padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--fb-outline-variant); color: var(--fb-on-surface); }
.lottery-prize-table tr:nth-child(even) { background: var(--fb-surface-container); }
.lottery-results-grid { display: grid; gap: 8px; margin: 12px 0; }
.lottery-result-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--fb-surface-container-lowest); border: 1px solid var(--fb-outline-variant); border-radius: var(--fb-shape-md); }
.lottery-result-label { font-weight: 600; font-size: 13px; min-width: 120px; color: var(--fb-on-surface); }
.lottery-result-numbers { display: flex; gap: 6px; flex-wrap: wrap; }
.lottery-result-number { padding: 4px 10px; background: #ffd700; color: #1a1a2e; border-radius: var(--fb-shape-sm); font-weight: 700; font-size: 14px; font-family: 'Courier New', monospace; }
.lottery-ticket-item { padding: 10px; border: 1px solid var(--fb-outline-variant); border-radius: var(--fb-shape-md); margin-bottom: 6px; background: var(--fb-surface-container-lowest); font-size: 13px; }
.lottery-ticket-item.win { border-color: #ffd700; background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,215,0,0.02)); }
.lottery-ticket-number { font-family: 'Courier New', monospace; font-size: 18px; font-weight: 700; letter-spacing: 3px; color: var(--fb-on-surface); }
.lottery-ticket-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; font-size: 12px; color: var(--fb-on-surface-variant); }
.lottery-ticket-status { font-weight: 600; }
.lottery-ticket-status.win { color: #ffd700; }
.lottery-ticket-status.lose { color: var(--fb-on-surface-variant); }
.lottery-ticket-status.pending { color: var(--fb-primary); }
.lottery-admin-input-group { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.lottery-admin-input-group label { font-size: 12px; font-weight: 600; min-width: 100px; color: var(--fb-on-surface); }
.lottery-admin-input { width: 60px; padding: 4px; text-align: center; font-family: 'Courier New', monospace; border: 1px solid var(--fb-outline-variant); border-radius: var(--fb-shape-sm); background: var(--fb-surface-container); color: var(--fb-on-surface); font-size: 14px; }
.lottery-admin-input:focus { border-color: #ffd700; outline: none; }
.lottery-history-container { max-height: 300px; overflow-y: auto; margin-top: 8px; border-top: 1px solid var(--fb-outline-variant); padding-top: 8px; }
.lottery-station-results { display: none; }
.lottery-station-results.active { display: block; }
.lottery-room-status { font-size: 14px; font-weight: 700; margin: 6px 0; }
.lottery-countdown { font-size: 28px; font-weight: 700; color: #f02849; text-align: center; margin: 6px 0; }
.lottery-session { font-size: 12px; color: var(--fb-on-surface-variant); text-align: center; }
.lottery-error-msg { color: #f02849; font-size: 12px; margin: 4px 0; min-height: 18px; }

/* LEADERBOARD */
.leaderboard-container { max-width: 500px; margin: 0 auto; }
.lb-card { display: flex; align-items: center; gap: 12px; background: var(--fb-surface-container-lowest); border: 1px solid var(--fb-outline-variant); border-radius: var(--fb-shape-lg); padding: 12px 16px; margin-bottom: 8px; transition: 0.2s; }
.lb-card:hover { transform: translateX(4px); border-color: var(--fb-primary); }
.lb-rank { font-size: 20px; font-weight: 800; min-width: 36px; text-align: center; color: var(--fb-on-surface-variant); }
.lb-rank.gold { color: #ffd700; }
.lb-rank.silver { color: #c0c0c0; }
.lb-rank.bronze { color: #cd7f32; }
.lb-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.lb-info { flex: 1; }
.lb-name { font-weight: 700; font-size: 14px; color: var(--fb-on-surface); cursor: pointer; }
.lb-name:hover { color: var(--fb-primary); }
.lb-coin { font-size: 12px; color: #ff9800; font-weight: 600; display: flex; align-items: center; gap: 3px; }
.lb-empty { text-align: center; color: var(--fb-on-surface-variant); padding: 40px 20px; font-size: 14px; }

/* SHOP */
.shop-container { max-width: 600px; margin: 0 auto; }
.shop-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.shop-tab { flex: 1; padding: 10px; text-align: center; border-radius: var(--fb-shape-lg); background: var(--fb-surface-container-high); border: 2px solid transparent; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--fb-on-surface-variant); transition: 0.2s; }
.shop-tab:hover { border-color: var(--fb-outline-variant); }
.shop-tab.active { background: rgba(24,119,242,0.08); border-color: var(--fb-primary); color: var(--fb-primary); }
.shop-tab.vip { background: linear-gradient(135deg, #1a1a2e, #16213e); color: #ffd700; }
.shop-tab.vip.active { border-color: #ffd700; background: linear-gradient(135deg, #2a2a3e, #26213e); }
.shop-tab .shop-tab-sub { font-size: 10px; opacity: 0.7; display: block; }
.shop-balance { text-align: center; font-size: 16px; font-weight: 700; color: #ff9800; margin-bottom: 16px; padding: 10px; background: var(--fb-surface-container-lowest); border-radius: var(--fb-shape-lg); border: 1px solid var(--fb-outline-variant); }
.shop-items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.shop-item { background: var(--fb-surface-container-lowest); border: 1px solid var(--fb-outline-variant); border-radius: var(--fb-shape-lg); padding: 14px; text-align: center; transition: 0.25s; position: relative; }
.shop-item:hover { transform: translateY(-2px); box-shadow: var(--fb-elevation-1); }
.shop-item.owned { border-color: #45bd62; background: #45bd6208; }
.shop-item.equipped { border-color: var(--fb-primary); background: rgba(24,119,242,0.06); box-shadow: 0 0 0 2px rgba(24,119,242,0.2); }
.shop-item-preview { width: 64px; height: 64px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; }
.shop-item-name { font-weight: 700; font-size: 12px; color: var(--fb-on-surface); margin-bottom: 2px; }
.shop-item-price { font-size: 11px; color: #ff9800; font-weight: 600; margin-bottom: 8px; }
.shop-item-badge { display: inline-block; padding: 2px 8px; border-radius: var(--fb-shape-md); font-size: 10px; font-weight: 700; }
.shop-item-badge.owned { background: #45bd6220; color: #45bd62; }
.shop-item-badge.equipped { background: var(--fb-primary); color: var(--fb-on-primary); }
.shop-item-btn { width: 100%; padding: 6px; border-radius: var(--fb-shape-md); border: none; font-weight: 600; font-size: 11px; cursor: pointer; transition: 0.2s; }
.shop-item-btn.buy { background: var(--fb-primary); color: var(--fb-on-primary); }
.shop-item-btn.buy:hover { filter: brightness(1.08); }
.shop-item-btn.equip { background: #45bd62; color: white; }
.shop-item-btn.equip:hover { background: #3aa34e; }
.shop-item-btn.unequip { background: var(--fb-surface-container-high); color: var(--fb-on-surface-variant); border: 1px solid var(--fb-outline-variant); }
.shop-item-btn.unequip:hover { background: var(--fb-surface-container-highest); }
.shop-vip-lock { text-align: center; padding: 30px; background: linear-gradient(135deg, #1a1a2e, #16213e); border-radius: var(--fb-shape-lg); color: #ffd700; border: 2px solid #ffd700; margin: 20px 0; }
.shop-vip-lock h3 { margin: 0 0 8px; font-size: 18px; }
.shop-vip-lock p { margin: 0 0 16px; font-size: 13px; opacity: 0.8; }
.shop-vip-lock button { padding: 10px 24px; border-radius: var(--fb-shape-md); border: none; font-weight: 700; font-size: 14px; cursor: pointer; background: linear-gradient(135deg, #ffd700, #ffaa00); color: #1a1a2e; }
.shop-vip-lock button:hover { transform: scale(1.05); }
.shop-spending-lb { margin-top: 20px; background: var(--fb-surface-container-lowest); border: 1px solid var(--fb-outline-variant); border-radius: var(--fb-shape-lg); padding: 16px; }
.shop-spending-lb h4 { margin: 0 0 12px; font-size: 14px; color: var(--fb-on-surface); text-align: center; }
.shop-bubble-preview { width: 100%; padding: 8px 12px; border-radius: 14px; font-size: 11px; text-align: left; }

/* AVATAR FRAMES */
.avatar-frame-wrap { display: inline-block; border-radius: 50%; position: relative; flex-shrink: 0; line-height: 0; vertical-align: middle; overflow: visible; }
.avatar-frame-wrap img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 50%; display: block; max-width: none !important; max-height: none !important; min-width: unset !important; min-height: unset !important; box-sizing: border-box !important; }

/* BUDGET FRAMES */
.af-bgt1 { box-shadow: 0 0 0 3px #8B4513; }
.af-bgt2 { box-shadow: 0 0 0 3px #ff69b4, 0 0 0 5px #fff; }
.af-bgt3 { box-shadow: 0 0 0 3px #1e90ff, 0 0 8px #1e90ff; }
.af-bgt4 { box-shadow: 0 0 0 3px #c0c0c0, inset 0 0 8px #c0c0c0; }
.af-bgt5 { box-shadow: 0 0 0 3px #ff4500, 0 0 6px #ff4500; }
.af-bgt6 { box-shadow: 0 0 0 3px #ff0000, 0 0 0 6px #ff9900, 0 0 0 9px #ffff00, 0 0 0 12px #00ff00, 0 0 0 15px #0000ff; }
.af-bgt7 { box-shadow: 0 0 0 3px #da70d6, 0 0 12px #da70d6; }
.af-bgt8 { box-shadow: 0 0 0 4px #2e8b57, 0 0 12px #2e8b57; }
.af-bgt9 { box-shadow: 0 0 0 4px #ffd700, 0 0 8px #ffd700; }
.af-bgt10 { box-shadow: 0 0 0 4px #9932cc, 0 0 12px #9932cc, 0 0 20px #9932cc66; }

/* VIP FRAMES */
@keyframes afVipSpin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
@keyframes afVipPulse { 0%,100%{opacity:0.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} }
@keyframes afVipGlow { 0%,100%{box-shadow:0 0 5px currentColor} 50%{box-shadow:0 0 20px currentColor,0 0 30px currentColor} }
@keyframes afVipRainbow { 0%{box-shadow:0 0 0 3px #ff0000,0 0 15px #ff0000} 17%{box-shadow:0 0 0 3px #ff8800,0 0 15px #ff8800} 33%{box-shadow:0 0 0 3px #ffff00,0 0 15px #ffff00} 50%{box-shadow:0 0 0 3px #00ff00,0 0 15px #00ff00} 67%{box-shadow:0 0 0 3px #0088ff,0 0 15px #0088ff} 83%{box-shadow:0 0 0 3px #8800ff,0 0 15px #8800ff} 100%{box-shadow:0 0 0 3px #ff0000,0 0 15px #ff0000} }
@keyframes afVipRainbowBorder { 0%{border-top-color:#ff0000} 17%{border-top-color:#ff8800} 33%{border-top-color:#ffff00} 50%{border-top-color:#00ff00} 67%{border-top-color:#0088ff} 83%{border-top-color:#8800ff} 100%{border-top-color:#ff0000} }
.af-vip { position: relative; border-radius: 50%; }
.af-vip::before { content:''; position:absolute; top:-4px; left:-4px; right:-4px; bottom:-4px; border-radius:50%; z-index:-1; }
.af-vip1 { box-shadow: 0 0 0 3px #fff, 0 0 15px #fff, 0 0 30px rgba(255,255,255,0.3); animation: afVipPulse 2s infinite; }
.af-vip2 { box-shadow: 0 0 0 3px #00ffff, 0 0 15px #00ffff; }
.af-vip2::before { border: 3px solid transparent; border-top-color: #00ffff; animation: afVipSpin 1.5s linear infinite; }
.af-vip3 { box-shadow: 0 0 0 3px #87ceeb, 0 0 20px #87ceeb; animation: afVipGlow 2s infinite; color: #87ceeb; }
.af-vip4 { box-shadow: 0 0 0 3px #ff4500, 0 0 15px #ff4500; animation: afVipGlow 1.5s infinite; color: #ff4500; }
.af-vip4::before { border: 3px solid #ff4500; border-top-color: transparent; animation: afVipSpin 1s linear infinite; }
.af-vip5 { box-shadow: 0 0 0 3px #8a2be2, 0 0 20px #8a2be2; animation: afVipPulse 1.5s infinite; }
.af-vip5::before { border: 3px dashed #8a2be2; animation: afVipSpin 3s linear infinite; }
.af-vip6 { box-shadow: 0 0 0 3px #ff0000, 0 0 15px #ff0000; animation: afVipRainbow 3s linear infinite; }
.af-vip6::before { border: 3px solid transparent; border-top-color: #ff0000; animation: afVipRainbowBorder 3s linear infinite, afVipSpin 1s linear infinite; }
.af-vip7 { box-shadow: 0 0 0 4px #ffd700, 0 0 20px #ffd700, 0 0 40px rgba(255,215,0,0.3); animation: afVipPulse 2s infinite; }
.af-vip7::before { border: 4px solid transparent; border-left-color: #ffd700; border-right-color: #ffd700; animation: afVipSpin 2s linear infinite; }
.af-vip8 { box-shadow: 0 0 0 4px #ffffff, 0 0 20px #ffffff, 0 0 40px rgba(255,255,255,0.3), 0 0 60px rgba(255,255,255,0.1); animation: afVipGlow 1.5s infinite; color: #fff; }
.af-vip8::before { border: 4px solid transparent; border-top-color: #fff; border-bottom-color: #fff; animation: afVipSpin 1.5s linear infinite; }
.af-vip9 { box-shadow: 0 0 0 4px #00ffff, 0 0 25px #00ffff, 0 0 50px rgba(0,255,255,0.2); animation: afVipPulse 2.5s infinite; }
.af-vip9::before { border: 4px solid transparent; border-top-color: #00ffff; border-right-color: #00ffff; border-bottom-color: #ff00ff; border-left-color: #ff00ff; animation: afVipSpin 1s linear infinite; }
.af-vip10 { box-shadow: 0 0 0 4px #ffff00, 0 0 30px #ffff00, 0 0 60px rgba(255,255,0,0.3); animation: afVipGlow 1s infinite; color: #ffff00; }
.af-vip10::before { border: 4px solid transparent; border-top-color: #ffff00; border-right-color: #ff00ff; border-bottom-color: #00ffff; border-left-color: #ff0000; animation: afVipSpin 0.8s linear infinite; }

/* CHAT BUBBLE STYLES */
.bubble-basic {  }
.bubble-bgt1 { background: #e3f2fd !important; color: #1565c0 !important; }
.bubble-bgt2 { background: #fce4ec !important; color: #c62828 !important; }
.bubble-bgt3 { background: #f3e5f5 !important; color: #6a1b9a !important; }
.bubble-bgt4 { background: linear-gradient(135deg, #e3f2fd, #fce4ec) !important; color: #1a1a2e !important; border: 1px solid #ddd; }
.bubble-bgt5 { background: linear-gradient(135deg, #ffd700, #ffaa00) !important; color: #1a1a2e !important; box-shadow: 0 2px 8px rgba(255,215,0,0.3); }
/* VIP BUBBLE */
@keyframes bubbleShine { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes bubblePulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.02)} }
.bubble-vip1 { background: linear-gradient(135deg, #667eea, #764ba2) !important; color: #fff !important; }
.bubble-vip2 { background: linear-gradient(135deg, #f093fb, #f5576c) !important; color: #fff !important; animation: bubblePulse 2s infinite; }
.bubble-vip3 { background: linear-gradient(135deg, #4facfe, #00f2fe) !important; color: #fff !important; box-shadow: 0 0 15px rgba(79,172,254,0.4); }
.bubble-vip4 { background: linear-gradient(135deg, #43e97b, #38f9d7) !important; color: #1a1a2e !important; animation: bubblePulse 1.5s infinite; }
.bubble-vip5 { background: linear-gradient(135deg, #fa709a, #fee140) !important; color: #1a1a2e !important; animation: bubbleShine 3s linear infinite; background-size: 200% auto; }
.bubble-vip6 { background: linear-gradient(135deg, #a18cd1, #fbc2eb) !important; color: #1a1a2e !important; box-shadow: 0 0 20px rgba(161,140,209,0.5); }
.bubble-vip7 { background: linear-gradient(135deg, #ffd700, #ff6b6b) !important; color: #fff !important; animation: bubbleShine 2s linear infinite; background-size: 200% auto; box-shadow: 0 0 15px rgba(255,215,0,0.4); }
.bubble-vip8 { background: linear-gradient(135deg, #0c3483, #a2b6df) !important; color: #fff !important; animation: bubblePulse 2.5s infinite; box-shadow: 0 0 20px rgba(12,52,131,0.4); }
.bubble-vip9 { background: linear-gradient(135deg, #11998e, #38ef7d) !important; color: #fff !important; animation: bubbleShine 2.5s linear infinite; background-size: 200% auto; }
.bubble-vip10 { background: linear-gradient(135deg, #ee0979, #ff6a00) !important; color: #fff !important; animation: bubblePulse 1.8s infinite; box-shadow: 0 0 25px rgba(238,9,121,0.4); }

/* VIP SUBSCRIPTION FRAMES (from VIP packages, not shop) */
.af-vip-adv { position:relative; overflow:visible!important; z-index:1; box-shadow:0 0 0 3px #8b5cf6,0 0 0 7px rgba(139,92,246,0.2),0 0 25px rgba(139,92,246,0.35); }
.af-vip-adv::before { content:''; position:absolute; left:50%; top:-9px; width:34px; height:12px; transform:translateX(-50%); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M17,12 L0,12 L3,2 L8,5 L17,0 L26,5 L31,2 L34,12 Z' fill='%238b5cf6'/%3E%3C/svg%3E") no-repeat center/contain; pointer-events:none; z-index:2; }
.af-vip-ult { position:relative; overflow:visible!important; z-index:1; box-shadow:0 0 0 3px #f59e0b,0 0 0 7px #dc2626,0 0 0 11px rgba(220,38,38,0.12),0 0 30px rgba(245,158,11,0.35),0 0 60px rgba(220,38,38,0.1); }
.af-vip-ult::before { content:''; position:absolute; left:50%; top:-10px; width:40px; height:14px; transform:translateX(-50%); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14'%3E%3Cpath d='M20,14 L0,14 L4,2 L10,5 L20,0 L30,5 L36,2 L40,14 Z' fill='%23f59e0b'/%3E%3Cpath d='M4,2 L0,14 L20,14 L40,14 L36,2 L30,5 L20,0 L10,5 Z' fill='%23dc2626' opacity='0.6'/%3E%3C/svg%3E") no-repeat center/contain; pointer-events:none; z-index:2; }
.bubble-vip-adv { background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important; color: #fff !important; box-shadow: 0 0 15px rgba(139,92,246,0.4); animation: bubbleShine 3s linear infinite; background-size: 200% auto; }
.bubble-vip-ult { background: linear-gradient(135deg, #f59e0b, #dc2626, #8b5cf6, #10b981) !important; color: #fff !important; animation: bubbleShine 2s linear infinite; background-size: 300% auto; box-shadow: 0 0 20px rgba(245,158,11,0.4); }

/* YOUTUBE TOGETHER ROOMS */
.yt-together-view { display: flex; flex-direction: column; max-width: 720px; margin: 0 auto; }
.yt-room-tabs { display: flex; gap: 6px; margin-bottom: 8px; background: var(--fb-surface-container-lowest); border-radius: var(--fb-shape-lg); padding: 8px; border: 1px solid var(--fb-outline-variant); box-shadow: var(--fb-elevation-1); }
.yt-room-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: var(--fb-shape-md); background: var(--fb-surface-container-high); border: 2px solid transparent; font-weight: 600; font-size: 12px; cursor: pointer; color: var(--fb-on-surface-variant); transition: all 0.2s; position: relative; }
.yt-room-tab:hover { border-color: var(--fb-outline-variant); }
.yt-room-tab.active { background: rgba(24,119,242,0.08); border-color: var(--fb-primary); color: var(--fb-primary); }
.yt-room-tab .room-label { display: flex; align-items: center; gap: 4px; }
.yt-room-tab .room-label svg { width: 14px; height: 14px; fill: currentColor; }
.yt-fame-badge { font-size: 10px; color: var(--fb-text-gray); font-weight: 500; display: flex; align-items: center; gap: 3px; }
.yt-fame-badge svg { width: 10px; height: 10px; fill: #ff9800; }
.yt-fame-badge .fame-num { font-weight: 700; color: #ff9800; }
.yt-room-content { display: none; flex-direction: column; }
.yt-room-content.active { display: flex; }

.yt-video-container { position: relative; width: 100%; background: #000; aspect-ratio: 16/9; max-height: 48vh; flex-shrink: 0; border-radius: 10px 10px 0 0; overflow: hidden; }
.yt-video-container iframe { width: 100% !important; height: 100% !important; border: none; position: absolute; top: 0; left: 0; }
.yt-api-player { width: 100%; height: 100%; position: relative; }
.yt-api-player iframe { width: 100% !important; height: 100% !important; }
.yt-video-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; color: #555; gap: 12px; position: absolute; top: 0; left: 0; z-index: 1; }
.yt-video-placeholder svg { width: 64px; height: 64px; fill: #444; opacity: 0.5; }
.yt-video-placeholder span { font-size: 14px; font-weight: 500; color: #666; }

.yt-viewer-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; display: none; pointer-events: none; background: transparent; }
.yt-viewer-overlay.active { display: block; pointer-events: auto; }

/* MICS BAR */
.yt-mics-bar { display: flex; gap: 10px; justify-content: center; padding: 12px 10px; background: var(--fb-surface-container-lowest); border: 1px solid var(--fb-outline-variant); border-top: none; border-bottom: none; flex-wrap: wrap; }
.yt-mic-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: all 0.25s; padding: 10px; border-radius: var(--fb-shape-lg); min-width: 90px; }
.yt-mic-slot:hover { background: var(--fb-surface-container-high); transform: translateY(-2px); }
.yt-mic-slot.occupied { cursor: pointer; }
.yt-mic-slot.mine { background: rgba(24,119,242,0.08); border-radius: var(--fb-shape-md); }
.yt-mic-circle { width: 72px; height: 72px; border-radius: 50%; background: var(--fb-surface-container-high); border: 3px solid var(--fb-outline-variant); display: flex; align-items: center; justify-content: center; transition: all 0.3s; position: relative; overflow: visible; }
.yt-mic-slot:hover .yt-mic-circle { border-color: var(--fb-primary); box-shadow: 0 0 0 3px rgba(24,119,242,0.12); }
.yt-mic-slot.occupied .yt-mic-circle { border-color: #45bd62; background: #45bd6215; }
.yt-mic-slot.mine .yt-mic-circle { border-color: var(--fb-primary); background: rgba(24,119,242,0.12); box-shadow: 0 0 0 3px rgba(24,119,242,0.15); }
.yt-mic-circle svg { width: 36px; height: 36px; fill: var(--fb-on-surface-variant); opacity: 0.6; transition: all 0.3s; }
.yt-mic-slot.occupied .yt-mic-circle svg { display: none; }
.yt-mic-slot.mine .yt-mic-circle svg { fill: var(--fb-primary); opacity: 0.4; }
.yt-mic-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: none; position: absolute; top: 0; left: 0; }
.yt-mic-slot.occupied .yt-mic-avatar { display: block; }
.yt-mic-label { font-size: 12px; font-weight: 600; color: var(--fb-on-surface-variant); letter-spacing: 0.5px; }
.yt-mic-name { font-size: 13px; font-weight: 600; color: var(--fb-on-surface); max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; display: none; }
.yt-mic-slot.occupied .yt-mic-name { display: block; }
.yt-mic-slot.occupied .yt-mic-label { display: none; }
.yt-mic-slot.mine .yt-mic-name { color: var(--fb-primary); }

/* CONTROLS BAR */
.yt-controls-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--fb-surface-container-lowest); border: 1px solid var(--fb-outline-variant); border-top: none; }
.yt-controls-bar .yt-now-playing { flex: 1; font-size: 12px; color: var(--fb-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt-controls-bar .yt-now-playing strong { color: var(--fb-on-surface); }
.yt-controls-bar .yt-sync-btn { background: none; border: 1px solid var(--fb-outline-variant); color: var(--fb-on-surface-variant); padding: 4px 12px; border-radius: var(--fb-shape-full); font-size: 11px; cursor: pointer; font-weight: 600; transition: 0.2s; flex-shrink: 0; }
.yt-controls-bar .yt-sync-btn:hover { background: var(--fb-surface-container-high); color: var(--fb-primary); border-color: var(--fb-primary); }
.yt-controls-bar .yt-sync-btn.syncing { animation: ytPulse 1s infinite; color: #45bd62; border-color: #45bd62; }
@keyframes ytPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* CHAT */
.yt-chat-container { display: flex; flex-direction: column; background: var(--fb-surface-container-lowest); border: 1px solid var(--fb-outline-variant); border-top: none; height: 260px; border-radius: 0 0 var(--fb-shape-lg) var(--fb-shape-lg); }
.yt-chat-header { padding: 8px 14px; font-weight: 600; font-size: 13px; color: var(--fb-on-surface); border-bottom: 1px solid var(--fb-outline-variant); background: var(--fb-surface-container); display: flex; align-items: center; gap: 8px; }
.yt-chat-header .admin-badge-small { background: linear-gradient(135deg, #ffd700, #ffaa00); color: #1a1a2e; padding: 1px 8px; border-radius: var(--fb-shape-md); font-size: 9px; font-weight: 700; }
.yt-chat-messages { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.yt-chat-msg { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; }
.yt-chat-msg img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; cursor: pointer; }
.yt-chat-msg .msg-content { background: var(--fb-surface-container-high); padding: 6px 10px; border-radius: 14px; max-width: 88%; word-break: break-word; line-height: 1.35; }
.yt-chat-msg .msg-content .msg-user { font-weight: 700; color: var(--fb-primary); cursor: pointer; font-size: 11px; }
.yt-chat-msg .msg-content .msg-text { color: var(--fb-on-surface); font-size: 13px; }
.yt-chat-msg .msg-content .msg-system { color: #ff9800; font-style: italic; font-size: 12px; }
.yt-chat-msg .msg-content .msg-error { color: #f02849; font-style: italic; font-size: 12px; }
.yt-chat-input-area { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--fb-outline-variant); background: var(--fb-surface-container-lowest); padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
.yt-chat-input-area input { flex: 1; padding: 8px 14px; border: 1px solid var(--fb-outline-variant); border-radius: var(--fb-shape-full); outline: none; font-size: 13px; background: var(--fb-surface-container); color: var(--fb-on-surface); }
.yt-chat-input-area input::placeholder { color: var(--fb-on-surface-variant); }
.yt-chat-input-area button { background: var(--fb-primary); color: var(--fb-on-primary); border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: 0.2s; }
.yt-chat-input-area button:hover { filter: brightness(1.1); }
.yt-chat-input-area button svg { width: 18px; height: 18px; fill: white; }
.yt-admin-input-hint { font-size: 11px; color: var(--fb-on-surface-variant); padding: 3px 14px; background: var(--fb-surface-container); border-top: 1px solid var(--fb-outline-variant); }

/* CONTROL TRANSFER BAR */
.yt-control-bar { display: flex; gap: 6px; padding: 6px 14px; background: var(--fb-surface-container); border-top: 1px solid var(--fb-outline-variant); align-items: center; flex-wrap: wrap; }
.yt-control-bar button { padding: 5px 12px; border-radius: var(--fb-shape-full); border: none; font-weight: 600; font-size: 11px; cursor: pointer; white-space: nowrap; transition: 0.2s; }
.yt-control-bar .ctrl-transfer-btn { background: var(--fb-primary); color: var(--fb-on-primary); }
.yt-control-bar .ctrl-request-btn { background: #f59e0b; color: white; }
.yt-control-bar .ctrl-revoke-btn { background: #f02849; color: white; }
.yt-control-bar .ctrl-return-btn { background: #667eea; color: white; }
.yt-control-bar .ctrl-mode-btn { background: transparent; border: 1px solid var(--fb-outline-variant); color: var(--fb-on-surface-variant); font-size: 10px; }
.yt-control-bar .ctrl-mode-btn.active { background: #667eea; color: white; border-color: #667eea; }
.yt-control-bar .ctrl-label { font-size: 10px; color: var(--fb-on-surface-variant); flex: 1; min-width: 0; }
.yt-control-bar .ctrl-label strong { color: var(--fb-on-surface); }

/* USERS LIST */
.yt-users-bar { background: var(--fb-surface-container-lowest); border: 1px solid var(--fb-outline-variant); border-top: none; padding: 8px 14px; }
.yt-users-bar-title { font-size: 11px; font-weight: 600; color: var(--fb-on-surface-variant); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 4px; }
.yt-users-grid { display: flex; flex-wrap: wrap; gap: 6px; max-height: 80px; overflow-y: auto; }
.yt-user-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--fb-surface-container-high); padding: 3px 8px 3px 3px; border-radius: var(--fb-shape-full); font-size: 11px; color: var(--fb-on-surface); cursor: pointer; transition: 0.2s; }
.yt-user-chip:hover { background: var(--fb-surface-container-highest); }
.yt-user-chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.yt-user-chip .yt-user-chip-name { max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* YT POPUP */
.yt-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.45); z-index: 99999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.yt-popup-box { background: var(--fb-surface-container-lowest); border-radius: var(--fb-shape-xl); padding: 24px; max-width: 380px; width: 90%; text-align: center; box-shadow: var(--fb-elevation-2); }
.yt-popup-box h3 { margin: 0 0 8px 0; font-size: 17px; color: var(--fb-on-surface); }
.yt-popup-box p { margin: 0 0 18px 0; font-size: 14px; color: var(--fb-on-surface-variant); line-height: 1.4; }
.yt-popup-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.yt-popup-btns button { padding: 9px 18px; border-radius: var(--fb-shape-full); font-weight: 600; font-size: 13px; cursor: pointer; border: none; transition: 0.2s; min-width: 80px; flex: 0 1 auto; }
.yt-popup-btns .btn-cancel { background: var(--fb-surface-container-high); color: var(--fb-on-surface); border: 1px solid var(--fb-outline-variant); }
.yt-popup-btns .btn-cancel:hover { background: var(--fb-surface-container-highest); }
.yt-popup-btns .btn-confirm { background: var(--fb-primary); color: var(--fb-on-primary); }
.yt-popup-btns .btn-confirm:hover { filter: brightness(1.1); }
.img-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); z-index: 9999999; display: flex; align-items: center; justify-content: center; user-select: none; }
.img-popup-close { position: fixed; top: 16px; left: 16px; z-index: 10; background: rgba(255,255,255,0.15); border: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; color: white; }
.img-popup-close:hover { background: rgba(255,255,255,0.3); }
.img-popup-close svg { width: 24px; height: 24px; fill: white; }
.img-popup-zoom-info { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 10; background: rgba(0,0,0,0.6); color: white; border-radius: 20px; padding: 8px 16px; font-size: 13px; display: flex; align-items: center; gap: 12px; backdrop-filter: blur(4px); }
.img-popup-zoom-info button { background: rgba(255,255,255,0.15); border: none; color: white; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.img-popup-zoom-info button:hover { background: rgba(255,255,255,0.3); }
.img-popup-zoom-info button:disabled { opacity: 0.3; cursor: default; }
.img-popup-zoom-info span { min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }
.img-popup-wrapper { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; cursor: grab; }
.img-popup-wrapper.dragging { cursor: grabbing; }
.img-popup-img { max-width: 100vw; max-height: 100vh; object-fit: contain; transition: transform 0.15s ease; will-change: transform; pointer-events: none; }
.yt-popup-btns .btn-danger { background: #f02849; color: white; }
.yt-popup-btns .btn-danger:hover { background: #d91c3b; }
.yt-popup-btns .btn-warning { background: #ff9800; color: white; }
.yt-popup-btns .btn-warning:hover { background: #f57c00; }

/* TRANSFER POPUP MIC SLOTS */
.yt-transfer-mic-grid { display: flex; gap: 10px; justify-content: center; padding: 12px 0; flex-wrap: wrap; }
.yt-transfer-mic-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 8px; border-radius: var(--fb-shape-md); border: 2px solid transparent; transition: all 0.2s; background: var(--fb-surface-container-high); min-width: 72px; }
.yt-transfer-mic-slot.has-user:hover { border-color: var(--fb-primary); background: rgba(24,119,242,0.06); transform: translateY(-2px); }
.yt-transfer-mic-slot.selected { border-color: var(--fb-primary); background: rgba(24,119,242,0.1); box-shadow: 0 0 0 2px rgba(24,119,242,0.15); }
.yt-transfer-mic-slot.empty { cursor: default; opacity: 0.5; }
.yt-transfer-mic-circle { width: 52px; height: 52px; border-radius: 50%; background: var(--fb-surface-container-high); border: 2px solid var(--fb-outline-variant); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: all 0.3s; }
.yt-transfer-mic-slot.has-user:hover .yt-transfer-mic-circle { border-color: var(--fb-primary); box-shadow: 0 0 0 3px rgba(24,119,242,0.12); }
.yt-transfer-mic-slot.selected .yt-transfer-mic-circle { border-color: var(--fb-primary); box-shadow: 0 0 0 3px rgba(24,119,242,0.2); }
.yt-transfer-mic-slot .yt-transfer-mic-name { font-size: 11px; font-weight: 600; color: var(--fb-on-surface); max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.yt-transfer-mic-slot .yt-transfer-mic-label { font-size: 10px; font-weight: 600; color: var(--fb-on-surface-variant); }
.yt-transfer-mic-slot .yt-transfer-mic-self { font-size: 9px; color: var(--fb-on-surface-variant); margin-top: 1px; }

/* PAYMENT MODE POPUP */
.yt-payment-option { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--fb-shape-lg); border: 2px solid var(--fb-outline-variant); cursor: pointer; transition: all 0.25s; background: var(--fb-surface-container-lowest); }
.yt-payment-option:hover { border-color: var(--fb-primary); background: rgba(24,119,242,0.04); transform: translateX(3px); }
.yt-payment-option.selected { border-color: var(--fb-primary); background: rgba(24,119,242,0.08); box-shadow: 0 0 0 2px rgba(24,119,242,0.15); }
.yt-payment-option-icon { width: 44px; height: 44px; border-radius: var(--fb-shape-md); display: flex; align-items: center; justify-content: center; font-size: 24px; background: var(--fb-surface-container-high); flex-shrink: 0; }
.yt-payment-option-text { flex: 1; }
.yt-payment-option-title { font-weight: 700; font-size: 15px; color: var(--fb-on-surface); }
.yt-payment-option-desc { font-size: 12px; color: var(--fb-on-surface-variant); margin-top: 2px; }

.yt-payment-loading-box {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 40px 32px; background: var(--fb-surface-container-lowest);
    border-radius: var(--fb-shape-xl); box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    min-width: 220px;
}
.yt-payment-spinner { margin-bottom: 16px; }
.yt-payment-loading-text {
    font-size: 15px; font-weight: 600; color: var(--fb-on-surface);
    animation: ytLoadPulse 1.2s ease-in-out infinite;
}
@keyframes ytLoadPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* VIOLATION REPORT POPUP */
.violation-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.45); z-index: 9999999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.violation-popup-box { background: var(--fb-surface-container-lowest); border-radius: var(--fb-shape-xl); padding: 24px; max-width: 420px; width: 90%; box-shadow: var(--fb-elevation-2); }
.violation-popup-box h3 { margin: 0 0 16px 0; font-size: 17px; color: var(--fb-on-surface); text-align: center; }
.violation-popup-box select, .violation-popup-box textarea { width: 100%; padding: 10px 12px; border-radius: var(--fb-shape-md); border: 1px solid var(--fb-outline-variant); background: var(--fb-surface-container); font-size: 14px; color: var(--fb-on-surface); outline: none; box-sizing: border-box; font-family: inherit; }
.violation-popup-box select { margin-bottom: 12px; appearance: auto; }
.violation-popup-box textarea { min-height: 100px; max-height: 200px; resize: vertical; }
.violation-popup-box select:focus, .violation-popup-box textarea:focus { border-color: var(--fb-primary); }
.violation-char-counter { display: block; text-align: right; font-size: 12px; color: var(--fb-on-surface-variant); margin-top: 4px; }
.violation-popup-btns { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.violation-popup-btns button { padding: 10px 24px; border-radius: var(--fb-shape-md); font-weight: 600; font-size: 14px; cursor: pointer; border: none; transition: 0.2s; min-width: 100px; }
.violation-popup-btns .btn-cancel { background: #f02849; color: white; }
.violation-popup-btns .btn-cancel:hover { background: #d91c3b; }
.violation-popup-btns .btn-submit { background: var(--fb-primary); color: var(--fb-on-primary); }
.violation-popup-btns .btn-submit:hover { filter: brightness(1.1); }
.violation-popup-btns .btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Profile report button */
.profile-report-btn { width: 100%; padding: 12px; background: #f02849; color: white; border: none; border-radius: var(--fb-shape-lg); font-weight: 700; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: 0.2s; }
.profile-report-btn:hover { background: #d91c3b; }

/* YT report room button */
.yt-report-room-btn { background: #f02849; color: white; border: none; padding: 6px 12px; border-radius: var(--fb-shape-md); font-weight: 600; font-size: 12px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 4px; }
.yt-report-room-btn:hover { background: #d91c3b; }

/* CONTROLLER BADGE - gamepad icon overlaid on avatar */
.yt-mic-circle { position: relative; }
.yt-controller-badge { position: absolute; bottom: -1px; right: -1px; width: 32px; height: 32px; background: linear-gradient(135deg, #7c3aed, #4f46e5); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(79,70,229,0.4); z-index: 5; }
.yt-controller-badge svg { width: 18px; height: 18px; fill: #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2)); }
.yt-host-crown { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 6; width: 36px; height: 22px; filter: drop-shadow(0 2px 4px rgba(255,165,0,0.5)); animation: crownFloat 2s ease-in-out infinite; pointer-events: none; }
.yt-host-crown svg { width: 100%; height: 100%; }
@keyframes crownFloat { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-3px); } }

/* YT GIFT BUTTON & POPUP */
.yt-gift-btn { background: none; border: none; font-size: 20px; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: 0.2s; }
.yt-gift-btn:hover { background: var(--fb-input-bg); transform: scale(1.1); }
.yt-gift-btn svg { width: 20px; height: 20px; fill: var(--fb-text-gray); transition: 0.2s; }
.yt-gift-btn:hover svg { fill: var(--fb-blue); }
.yt-gift-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10001; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
/* YT SEARCH POPUP */
@keyframes searchSlideUp { from { transform:translateY(40px);opacity:0; } to { transform:translateY(0);opacity:1; } }
@keyframes searchFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes searchResultIn { from { opacity:0;transform:translateX(-20px); } to { opacity:1;transform:translateX(0); } }
.yt-search-popup-overlay { position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:99999;display:flex;flex-direction:column;overflow:hidden;animation:searchFadeIn 0.25s ease;backdrop-filter:blur(8px); }
.yt-search-popup-body { background:var(--fb-surface-container-lowest);border-radius:20px 20px 0 0;margin-top:auto;max-height:94vh;display:flex;flex-direction:column;overflow:hidden;animation:searchSlideUp 0.3s cubic-bezier(0.16,1,0.3,1);box-shadow:0 -8px 40px rgba(0,0,0,0.15); }
.yt-search-popup-header { display:flex;align-items:center;gap:10px;padding:16px 16px 12px;border-bottom:1px solid var(--fb-outline-variant);background:var(--fb-surface-container-lowest);flex-shrink:0;border-radius:20px 20px 0 0; }
.yt-search-popup-header input { flex:1;padding:12px 18px;border:2px solid var(--fb-outline-variant);border-radius:28px;outline:none;font-size:15px;background:var(--fb-surface-container);color:var(--fb-on-surface);transition:0.25s; }
.yt-search-popup-header input:focus { border-color:var(--fb-primary);box-shadow:0 0 0 4px rgba(24,119,242,0.1); }
.yt-search-popup-close { background:none;border:none;width:38px;height:38px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--fb-on-surface-variant);transition:0.2s; }
.yt-search-popup-close:hover { background:var(--fb-surface-container-high);color:var(--fb-on-surface);transform:rotate(90deg); }
.yt-search-popup-close svg { width:24px;height:24px;fill:currentColor;transition:0.3s; }
.yt-search-popup-results { flex:1;overflow-y:auto;padding:8px 16px 20px; }
.yt-search-result { display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--fb-outline-variant);cursor:pointer;transition:0.25s;animation:searchResultIn 0.35s ease backwards; }
.yt-search-result:nth-child(1) { animation-delay:0.02s; }
.yt-search-result:nth-child(2) { animation-delay:0.06s; }
.yt-search-result:nth-child(3) { animation-delay:0.10s; }
.yt-search-result:nth-child(4) { animation-delay:0.14s; }
.yt-search-result:nth-child(5) { animation-delay:0.18s; }
.yt-search-result:nth-child(6) { animation-delay:0.22s; }
.yt-search-result:nth-child(7) { animation-delay:0.26s; }
.yt-search-result:nth-child(8) { animation-delay:0.30s; }
.yt-search-result:nth-child(9) { animation-delay:0.34s; }
.yt-search-result:nth-child(10) { animation-delay:0.38s; }
.yt-search-result:hover { background:var(--fb-surface-container-high);margin:0 -16px;padding:12px 16px;border-radius:12px;border-bottom-color:transparent;transform:translateX(4px); }
.yt-search-result-thumb { width:168px;height:94px;border-radius:10px;object-fit:cover;flex-shrink:0;background:#e0e0e0;box-shadow:0 2px 8px rgba(0,0,0,0.1); }
.yt-search-result-info { flex:1;min-width:0;padding:2px 0; }
.yt-search-result-title { font-weight:600;font-size:14px;color:var(--fb-on-surface);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4; }
.yt-search-result-channel { font-size:12px;color:var(--fb-on-surface-variant);margin-top:5px;display:flex;align-items:center;gap:4px; }
.yt-search-result-channel svg { width:14px;height:14px;fill:var(--fb-on-surface-variant); }
.yt-search-result-meta { font-size:11px;color:var(--fb-on-surface-variant);margin-top:3px;display:flex;align-items:center;gap:6px; }
.yt-search-loading { text-align:center;padding:60px 20px;color:var(--fb-on-surface-variant);font-size:14px; }
.yt-search-loading svg { width:48px;height:48px;animation:spin 1s linear infinite;margin-bottom:12px; }
@keyframes spin { to { transform:rotate(360deg); } }
.yt-search-empty { text-align:center;padding:80px 20px;color:var(--fb-on-surface-variant);font-size:14px; }
.yt-search-empty svg { width:56px;height:56px;fill:var(--fb-on-surface-variant);margin-bottom:12px;opacity:0.4; }
.yt-search-btn { background:none;border:none;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:0.2s; }
.yt-search-btn:hover { background:var(--fb-surface-container-high);transform:scale(1.15); }
.yt-search-btn svg { width:20px;height:20px;fill:var(--fb-on-surface-variant);transition:0.2s; }
.yt-search-btn:hover svg { fill:var(--fb-primary); }
.yt-search-badge { display:inline-flex;align-items:center;gap:4px;background:rgba(24,119,242,0.08);color:var(--fb-primary);padding:2px 10px;border-radius:var(--fb-shape-full);font-size:10px;font-weight:600; }
.yt-search-badge svg { width:10px;height:10px; }
.yt-search-loadmore-wrap { display:flex;justify-content:center;padding:16px 0 8px; }
.yt-search-loadmore-btn { background:var(--fb-blue);color:#fff;border:none;padding:10px 32px;border-radius:24px;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.25s;display:inline-flex;align-items:center;gap:6px;box-shadow:0 2px 12px rgba(24,119,242,0.3); }
.yt-search-loadmore-btn:hover { background:var(--fb-dark-blue);transform:translateY(-2px);box-shadow:0 4px 20px rgba(24,119,242,0.45); }
.yt-search-loadmore-btn:active { transform:translateY(0); }
.yt-search-loadmore-btn:disabled { opacity:0.6;cursor:not-allowed;transform:none;box-shadow:none; }
.yt-loadmore-spinner { display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite; }
.yt-gift-popup-box { background: var(--fb-surface-container-lowest); border-radius: var(--fb-shape-xl); padding: 20px; max-width: 380px; width: 92%; box-shadow: var(--fb-elevation-2); position: relative; }
.yt-gift-popup-box h3 { margin: 0 0 4px 0; font-size: 18px; color: var(--fb-on-surface); text-align: center; }
.yt-gift-popup-balance { text-align: center; font-size: 13px; color: #ff9800; font-weight: 600; margin-bottom: 14px; }
.yt-gift-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.yt-gift-item { background: var(--fb-surface-container-high); border: 2px solid transparent; border-radius: var(--fb-shape-lg); padding: 12px 6px 10px; text-align: center; cursor: pointer; transition: all 0.25s; position: relative; overflow: hidden; }
.yt-gift-item:hover { border-color: var(--fb-primary); background: rgba(24,119,242,0.06); transform: translateY(-2px); box-shadow: var(--fb-elevation-1); }
.yt-gift-item.selected { border-color: var(--fb-primary); background: rgba(24,119,242,0.1); box-shadow: 0 0 0 2px rgba(24,119,242,0.15); }
.yt-gift-item:disabled, .yt-gift-item[style*="0.4"] { opacity: 0.4; }
.yt-gift-item-icon { display: flex; align-items: center; justify-content: center; margin-bottom: 4px; height: 40px; }
.yt-gift-item-icon svg { width: 36px; height: 36px; }
.yt-gift-item-name { font-size: 11px; font-weight: 600; color: var(--fb-on-surface); display: block; }
.yt-gift-item-price { font-size: 10px; color: #ff9800; font-weight: 600; display: block; margin-top: 2px; }
.yt-gift-send-btn { width: 100%; padding: 12px; background: linear-gradient(135deg, var(--fb-blue), #166fe5); color: white; border: none; border-radius: 10px; font-weight: 700; font-size: 15px; cursor: pointer; transition: 0.2s; }
.yt-gift-send-btn:hover { background: linear-gradient(135deg, #166fe5, #0f5bcc); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(24,119,242,0.3); }
.yt-gift-send-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.yt-gift-close-btn { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--fb-text-gray); line-height: 1; }
.yt-gift-close-btn:hover { color: var(--fb-text-main); }
.yt-gift-popup-box { position: relative; }

/* GIFT POPUP - MIC TARGETS & QUANTITY */
.yt-gift-section-label { font-size: 12px; font-weight: 600; color: var(--fb-on-surface-variant); margin: 10px 0 6px 0; }
.yt-gift-mic-targets { display: flex; gap: 6px; margin-bottom: 4px; }
.yt-gift-mic-slot { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: var(--fb-shape-md); border: 2px solid transparent; cursor: pointer; transition: all 0.2s; background: var(--fb-surface-container-high); min-height: 56px; justify-content: center; }
.yt-gift-mic-slot.has-user { cursor: pointer; }
.yt-gift-mic-slot.has-user:hover { border-color: var(--fb-primary); background: rgba(24,119,242,0.06); transform: translateY(-1px); }
.yt-gift-mic-slot.selected { border-color: var(--fb-primary); background: rgba(24,119,242,0.1); box-shadow: 0 0 0 2px rgba(24,119,242,0.15); }
.yt-gift-mic-slot.empty { opacity: 0.4; cursor: not-allowed; }
.yt-gift-mic-slot img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.yt-gift-mic-slot .mic-slot-name { font-size: 9px; font-weight: 600; color: var(--fb-on-surface); max-width: 52px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.yt-gift-mic-slot .mic-slot-label { font-size: 8px; color: var(--fb-on-surface-variant); font-weight: 500; }
.yt-gift-mic-slot .mic-slot-icon { width: 20px; height: 20px; fill: var(--fb-on-surface-variant); }
.yt-gift-qty-selector { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 14px; }
.yt-gift-qty-btn { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--fb-surface-container-high); color: var(--fb-on-surface); font-size: 20px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; line-height: 1; }
.yt-gift-qty-btn:hover { background: var(--fb-primary); color: var(--fb-on-primary); }
.yt-gift-qty-btn:active { transform: scale(0.9); }
.yt-gift-qty-value { font-size: 22px; font-weight: 700; color: var(--fb-on-surface); min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; }

/* CONFIRM GIFT POPUP */
.yt-gift-popup-box.confirm { text-align: center; }
.yt-gift-confirm-text { font-size: 15px; color: var(--fb-on-surface); padding: 12px 0; line-height: 1.5; }
.yt-gift-confirm-actions { display: flex; gap: 10px; margin-top: 14px; }
.yt-gift-confirm-actions button { flex: 1; padding: 12px; border-radius: var(--fb-shape-md); font-weight: 700; font-size: 14px; cursor: pointer; transition: 0.2s; border: none; }
.yt-gift-confirm-cancel { background: var(--fb-surface-container-high); color: var(--fb-on-surface-variant); }
.yt-gift-confirm-cancel:hover { background: var(--fb-surface-container-highest); }
.yt-gift-confirm-ok { background: var(--fb-primary); color: var(--fb-on-primary); }
.yt-gift-confirm-ok:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: var(--fb-elevation-1); }
.yt-gift-confirm-highlight { color: #ff9800; font-weight: 700; }
.yt-gift-confirm-target { color: #45bd62; font-weight: 700; }
.yt-gift-confirm-price { color: #f02849; font-weight: 700; }

/* MUSIC ROOM - Player controls for admin */
.music-controls-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--fb-surface-container-lowest); border: 1px solid var(--fb-outline-variant); border-top: none; flex-wrap: wrap; }
.music-controls-bar button { background: none; border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; color: var(--fb-on-surface); flex-shrink: 0; }
.music-controls-bar button:hover { background: var(--fb-surface-container-high); }
.music-controls-bar button svg { width: 22px; height: 22px; fill: currentColor; }
.music-controls-bar .music-seek-bar { flex: 1; height: 4px; -webkit-appearance: none; appearance: none; background: var(--fb-outline-variant); border-radius: 2px; outline: none; cursor: pointer; min-width: 60px; }
.music-controls-bar .music-seek-bar::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--fb-primary); border: 2px solid white; box-shadow: 0 1px 4px rgba(0,0,0,0.2); cursor: pointer; }
.music-controls-bar .music-time-display { font-size: 11px; color: var(--fb-on-surface-variant); font-variant-numeric: tabular-nums; min-width: 70px; text-align: center; }
.music-now-playing { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--fb-surface-container); border: 1px solid var(--fb-outline-variant); border-top: none; font-size: 12px; color: var(--fb-on-surface-variant); }
.music-now-playing strong { color: var(--fb-on-surface); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-admin-hint { font-size: 11px; color: var(--fb-on-surface-variant); padding: 3px 14px; background: var(--fb-surface-container); border-top: 1px solid var(--fb-outline-variant); }

/* GLOBAL MUSIC PLAYER - hidden container for YouTube player */
.music-global-player { position: fixed; bottom: -9999px; left: 0; width: 1px; height: 1px; overflow: hidden; z-index: -1; }
.music-global-player.hidden { display: none; }
.music-global-video { width: 1px; height: 1px; }
.music-global-video iframe { width: 1px !important; height: 1px !important; border: none; }
.music-global-item { display: none; }
.music-global-item.active { display: flex; }
.music-sidebar-content { flex: 1; display: flex; align-items: center; gap: 10px; cursor: pointer; background: none; border: none; padding: 0; font: inherit; color: inherit; }
.music-mute-btn { background: none; border: none; cursor: pointer; font-size: 16px; padding: 4px 6px; border-radius: var(--fb-shape-sm); flex-shrink: 0; line-height: 1; }
.music-mute-btn:hover { background: var(--fb-surface-container-high); }
.music-create-btn { display: block; width: 100%; padding: 14px; background: var(--fb-primary); color: var(--fb-on-primary); border: none; border-radius: var(--fb-shape-lg); font-weight: 700; font-size: 15px; cursor: pointer; margin-bottom: 16px; transition: 0.2s; }
.music-create-btn:hover { box-shadow: var(--fb-elevation-1); }
.music-room-card { background: var(--fb-surface-container-lowest); border: 1px solid var(--fb-outline-variant); border-radius: var(--fb-shape-lg); padding: 14px; margin-bottom: 10px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 12px; }
.music-room-card:hover { border-color: var(--fb-primary); box-shadow: var(--fb-elevation-1); }
.music-room-card .mrc-icon { font-size: 28px; flex-shrink: 0; }
.music-room-card .mrc-info { flex: 1; min-width: 0; }
.music-room-card .mrc-name { font-weight: 700; font-size: 15px; color: var(--fb-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-room-card .mrc-host { font-size: 12px; color: var(--fb-on-surface-variant); margin-top: 2px; }
.music-room-card .mrc-status { font-size: 11px; padding: 2px 8px; border-radius: var(--fb-shape-full); font-weight: 600; flex-shrink: 0; }
.music-room-card .mrc-status.playing { background: #e8f5e9; color: #2e7d32; }
.music-room-card .mrc-status.idle { background: var(--fb-surface-container-high); color: var(--fb-on-surface-variant); }
.music-empty-rooms { text-align: center; padding: 40px 20px; color: var(--fb-on-surface-variant); font-size: 14px; }

/* CHESS */
.chess-hub-header { text-align: center; font-size: 24px; font-weight: 800; padding: 24px 0 8px; color: var(--fb-on-surface); }
.chess-hub-btns { display: flex; gap: 12px; padding: 16px; justify-content: center; flex-wrap: wrap; }
.chess-hub-btn { border: none; padding: 14px 28px; border-radius: var(--fb-shape-md); font-weight: 700; font-size: 15px; cursor: pointer; transition: 0.2s; }
.chess-hub-btn.primary { background: var(--fb-primary); color: var(--fb-on-primary); }
.chess-hub-btn.primary:hover { box-shadow: var(--fb-elevation-1); }
.chess-hub-btn.secondary { background: var(--fb-surface-container-lowest); color: var(--fb-on-surface); border: 1px solid var(--fb-outline-variant); }
.chess-hub-btn.secondary:hover { background: var(--fb-surface-container-high); }
.chess-hub-btn.cancel { background: #f02849; color: white; }
.chess-hub-btn.cancel:hover { filter: brightness(1.1); }
.chess-queue-status { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px; color: var(--fb-on-surface-variant); font-size: 14px; }
.chess-queue-spinner { width: 20px; height: 20px; border: 3px solid var(--fb-outline-variant); border-top-color: var(--fb-primary); border-radius: 50%; animation: chessSpin 0.8s linear infinite; }
@keyframes chessSpin { to { transform: rotate(360deg); } }
.chess-section-title { font-weight: 700; font-size: 14px; padding: 16px 16px 8px; color: var(--fb-on-surface); }
.chess-pending-invites { padding: 0 16px 16px; }
.chess-invite-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--fb-surface-container-lowest); border: 1px solid var(--fb-outline-variant); border-radius: var(--fb-shape-md); margin-bottom: 8px; }
.chess-invite-card img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.chess-invite-card .cic-name { flex: 1; font-weight: 600; font-size: 14px; color: var(--fb-on-surface); }
.chess-invite-card .cic-btns { display: flex; gap: 6px; }
.chess-invite-card .cic-btns button { padding: 5px 12px; border: none; border-radius: var(--fb-shape-sm); font-weight: 600; font-size: 12px; cursor: pointer; }
.chess-invite-card .cic-btns .accept { background: var(--fb-primary); color: var(--fb-on-primary); }
.chess-invite-card .cic-btns .decline { background: #f02849; color: white; }
.chess-top-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--fb-surface-container-lowest); border-bottom: 1px solid var(--fb-outline-variant); }
.chess-opponent-name { flex: 1; font-weight: 700; font-size: 15px; text-align: right; color: var(--fb-on-surface); }
.chess-timer-bar { text-align: center; padding: 8px; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--fb-surface-container-lowest); border-bottom: 1px solid var(--fb-outline-variant); }
.chess-timer-bar.active { color: #e65100; }
.chess-board-container { display: flex; justify-content: center; padding: 12px; background: var(--fb-surface); }
.chess-status { text-align: center; padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--fb-on-surface); background: var(--fb-surface-container-lowest); border-bottom: 1px solid var(--fb-outline-variant); }
.chess-bottom-controls { display: flex; gap: 10px; padding: 10px 14px; justify-content: center; background: var(--fb-surface-container-lowest); border-bottom: 1px solid var(--fb-outline-variant); }
.chess-move-history { padding: 8px 14px; max-height: 120px; overflow-y: auto; background: var(--fb-surface-container-lowest); font-size: 12px; font-family: monospace; color: var(--fb-on-surface-variant); }
.chess-move-history .move-num { color: var(--fb-on-surface); font-weight: 600; margin-right: 4px; }
.chess-move-history .move { margin-right: 8px; }
.chess-friend-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--fb-outline-variant); }
.chess-friend-row img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.chess-friend-row .cfr-info { flex: 1; }
.chess-friend-row .cfr-name { font-weight: 600; font-size: 14px; color: var(--fb-on-surface); }
.chess-friend-row .cfr-status { font-size: 11px; color: var(--fb-on-surface-variant); }
.chess-friend-row .cfr-invite-btn { padding: 6px 14px; border: none; border-radius: var(--fb-shape-md); font-weight: 600; font-size: 12px; cursor: pointer; background: var(--fb-primary); color: var(--fb-on-primary); flex-shrink: 0; }
.chess-friend-row .cfr-invite-btn:disabled { opacity: 0.5; cursor: default; }
.chess-friend-row .cfr-invite-btn.sent { background: var(--fb-on-surface-variant); }

/* VIP SHOP */
.vipshop-container { padding: 16px; max-width: 600px; margin: 0 auto; }
.vipshop-container h2 { text-align:center; color:var(--fb-on-surface); margin-bottom:4px; }
.vipshop-container .subtitle { text-align:center; color:var(--fb-on-surface-variant); font-size:13px; margin-bottom:16px; }
.vipshop-balance { text-align:center; font-size:15px; font-weight:700; color:var(--fb-on-surface); margin-bottom:12px; padding:10px; background:var(--fb-surface-container-lowest); border-radius:var(--fb-shape-lg); border:1px solid var(--fb-outline-variant); }
.vipshop-tabs { display:flex; gap:8px; margin-bottom:16px; }
.vipshop-tab { flex:1; text-align:center; padding:10px; border-radius:var(--fb-shape-lg); font-weight:600; font-size:14px; cursor:pointer; background:var(--fb-surface-container-high); color:var(--fb-on-surface-variant); transition:0.2s; border:1px solid var(--fb-outline-variant); }
.vipshop-tab.active { background:linear-gradient(135deg,#f59e0b,#d97706); color:white; border-color:#f59e0b; }
.vipshop-tab:hover:not(.active) { background:var(--fb-surface-container-lowest); }
.vipshop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.vipshop-card { background:var(--fb-surface-container-lowest); border:1px solid var(--fb-outline-variant); border-radius:var(--fb-shape-lg); padding:14px; text-align:center; transition:0.2s; position:relative; overflow:hidden; }
.vipshop-card.vip-tier { border-color:#f59e0b; }
.vipshop-card .vsc-icon { font-size:32px; margin-bottom:6px; }
.vipshop-card .vsc-name { font-weight:700; font-size:14px; color:var(--fb-on-surface); margin-bottom:4px; }
.vipshop-card .vsc-desc { font-size:11px; color:var(--fb-on-surface-variant); margin-bottom:8px; min-height:32px; }
.vipshop-card .vsc-price { font-size:16px; font-weight:800; color:var(--fb-primary); margin-bottom:8px; }
.vipshop-card .vsc-badge { display:inline-block; padding:2px 8px; border-radius:var(--fb-shape-md); font-size:10px; font-weight:600; margin-bottom:6px; }
.vipshop-card .vsc-badge.owned { background:#d1fae5; color:#065f46; }
.vipshop-card .vsc-badge.active { background:#dbeafe; color:#1e40af; }
.vipshop-card .vsc-badge.expired { background:#fee2e2; color:#991b1b; }
.vipshop-btn { background:var(--fb-primary); color:var(--fb-on-primary); border:none; padding:8px 16px; border-radius:var(--fb-shape-md); font-weight:600; font-size:13px; cursor:pointer; width:100%; transition:0.2s; }
.vipshop-btn:hover { filter: brightness(1.08); }
.vipshop-btn:disabled { opacity:0.5; cursor:default; }
.vipshop-btn.owned { background:#10b981; }
.vipshop-btn.bought { background:var(--fb-on-surface-variant); }
.vipshop-tier-tag { position:absolute; top:8px; right:8px; font-size:10px; font-weight:700; padding:2px 6px; border-radius:var(--fb-shape-sm); color:white; }
.vipshop-tier-tag.basic { background:#6b7280; }
.vipshop-tier-tag.intermediate { background:#f59e0b; }
.vipshop-tier-tag.advanced { background:#8b5cf6; }
.vipshop-tier-tag.ultimate { background:#dc2626; }

/* VIP QUEUE POPUP */
.vipq-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:99999; display:flex; align-items:center; justify-content:center; backdrop-filter: blur(4px); }
.vipq-modal { background:var(--fb-surface-container-lowest); border-radius:var(--fb-shape-xl); padding:24px; width:90%; max-width:420px; max-height:85vh; overflow-y:auto; box-shadow:var(--fb-elevation-2); }
.vipq-modal h3 { text-align:center; margin:0 0 4px; font-size:18px; color:var(--fb-on-surface); }
.vipq-modal .vipq-sub { text-align:center; font-size:13px; color:var(--fb-on-surface-variant); margin-bottom:16px; }
.vipq-lane { display:flex; align-items:center; gap:12px; padding:14px; border-radius:var(--fb-shape-lg); margin-bottom:10px; cursor:pointer; transition:0.2s; border:2px solid var(--fb-outline-variant); background:var(--fb-surface); }
.vipq-lane:hover { border-color:var(--fb-primary); }
.vipq-lane.selected { border-color:var(--fb-primary); background:rgba(24,119,242,0.08); }
.vipq-lane.disabled { opacity:0.5; cursor:default; }
.vipq-lane.disabled:hover { border-color:var(--fb-outline-variant); }
.vipq-lane .vql-icon { font-size:28px; flex-shrink:0; }
.vipq-lane .vql-info { flex:1; min-width:0; }
.vipq-lane .vql-name { font-weight:700; font-size:14px; color:var(--fb-on-surface); }
.vipq-lane .vql-desc { font-size:11px; color:var(--fb-on-surface-variant); }
.vipq-lane .vql-pos { font-weight:800; font-size:20px; color:var(--fb-primary); flex-shrink:0; min-width:40px; text-align:center; }
.vipq-progress { height:6px; background:var(--fb-surface-container-high); border-radius:3px; margin:10px 0; overflow:hidden; }
.vipq-progress-fill { height:100%; border-radius:3px; background:var(--fb-primary); transition:width 1s; }
.vipq-progress-fill.fast { background:#f59e0b; }
.vipq-progress-fill.vip { background:#8b5cf6; }
.vipq-info { text-align:center; font-size:12px; color:var(--fb-on-surface-variant); margin:6px 0 12px; }
.vipq-actions { display:flex; gap:8px; }
.vipq-actions button { flex:1; padding:10px; border:none; border-radius:var(--fb-shape-md); font-weight:700; font-size:14px; cursor:pointer; transition:0.2s; }
.vipq-actions .vipq-cancel { background:var(--fb-surface-container-high); color:var(--fb-on-surface-variant); }
.vipq-actions .vipq-cancel:hover { background:var(--fb-surface-container-highest); }
.vipq-actions .vipq-skip { background:linear-gradient(135deg,#f59e0b,#d97706); color:white; }
.vipq-actions .vipq-skip:hover { filter: brightness(1.1); }
.vipq-actions .vipq-skip:disabled { opacity:0.5; cursor:default; }

/* CLOUD GAMING */
.cg-overlay { position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:999999;overflow:hidden; }
.cg-video-wrap { position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden; }
.cg-video-wrap iframe { position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none; }
.cg-close-btn { position:absolute;top:12px;left:12px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.15);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:0.2s; }
.cg-close-btn:hover { background:rgba(255,255,255,0.3); }
.cg-close-btn svg { width:22px;height:22px;fill:#fff; }
#cgPlayer { position:absolute;top:0;left:0;width:100%;height:100%; }
.cg-player-cover { position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;background:transparent;pointer-events:auto; }
.cg-controller { position:absolute;bottom:0;left:0;right:0;padding:8px 20px 10px;display:flex;justify-content:center;align-items:flex-end;gap:40px;pointer-events:none;z-index:5; }
.cg-controller > * { pointer-events:auto; }
.cg-left-col, .cg-right-col { display:flex;flex-direction:column;align-items:center;gap:8px; }
.cg-center-col { display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:20px; }
.cg-center-btns { display:flex;gap:12px; }
.cg-lbumpers, .cg-rbumpers { display:flex;gap:6px; }
.cg-bumper { width:64px;height:40px;border-radius:10px;background:rgba(80,80,80,0.8);color:#fff;border:none;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:0.05s;user-select:none;-webkit-user-select:none;touch-action:manipulation; }
.cg-bumper:active, .cg-bumper.pressed { background:#fff !important;color:#000 !important; }
.cg-dpad-and-stick { display:flex;align-items:center;gap:4px; }
.cg-stick-and-abxy { display:flex;align-items:center;gap:4px; }
.cg-btn-circle { width:56px;height:56px;border-radius:50%;background:rgba(80,80,80,0.8);color:#fff;border:none;font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:0.05s;user-select:none;-webkit-user-select:none;position:absolute;touch-action:manipulation; }
.cg-btn-circle:active, .cg-btn-circle.pressed { background:#fff !important;color:#000 !important; }
.cg-stick-wrap { width:82px;height:82px;border-radius:50%;background:rgba(80,80,80,0.5);position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.cg-stick-inner { width:46px;height:46px;border-radius:50%;background:rgba(100,100,100,0.9);position:absolute;cursor:pointer;transition:none; }
.cg-stick-label { position:absolute;font-size:14px;font-weight:700;color:rgba(255,255,255,0.6);pointer-events:none; }
.cg-dpad { display:grid;grid-template-columns:50px 50px 50px;grid-template-rows:50px 50px 50px;gap:2px;flex-shrink:0; }
.cg-dpad-btn { width:50px;height:50px;background:rgba(80,80,80,0.8);color:#fff;border:none;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:0.05s;user-select:none;-webkit-user-select:none;touch-action:manipulation; }
.cg-dpad-btn:active, .cg-dpad-btn.pressed { background:#fff !important;color:#000 !important; }
.cg-dpad-btn.up { grid-column:2;grid-row:1;border-radius:8px 8px 4px 4px; }
.cg-dpad-btn.down { grid-column:2;grid-row:3;border-radius:4px 4px 8px 8px; }
.cg-dpad-btn.left { grid-column:1;grid-row:2;border-radius:8px 4px 4px 8px; }
.cg-dpad-btn.right { grid-column:3;grid-row:2;border-radius:4px 8px 8px 4px; }
.cg-dpad-btn.center { grid-column:2;grid-row:2;background:rgba(60,60,60,0.8);cursor:default;border-radius:4px; }
.cg-abxy { position:relative;width:142px;height:142px;flex-shrink:0; }
.cg-sm-btn { width:52px;height:32px;border-radius:8px;background:rgba(80,80,80,0.7);color:#fff;border:none;font-size:10px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:0.05s;user-select:none;-webkit-user-select:none;touch-action:manipulation; }
.cg-sm-btn:active, .cg-sm-btn.pressed { background:#fff !important;color:#000 !important; }
.cg-unmute-btn { position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.2);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;font-size:20px;transition:0.2s; }
.cg-unmute-btn:hover { background:rgba(255,255,255,0.4); }
/* CLOUD GAMING LIST */
.cg-list { max-width:600px;margin:0 auto;padding:10px; }
.cg-search { width:100%;padding:12px 16px;border:2px solid var(--fb-outline-variant);border-radius:var(--fb-shape-full);outline:none;font-size:14px;background:var(--fb-surface-container);color:var(--fb-on-surface);margin-bottom:16px;box-sizing:border-box; }
.cg-search:focus { border-color:var(--fb-primary); }
.cg-game-card { display:flex;align-items:center;gap:14px;background:var(--fb-surface-container-lowest);border:1px solid var(--fb-outline-variant);border-radius:var(--fb-shape-lg);padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:0.25s; }
.cg-game-card:hover { transform:translateY(-2px);box-shadow:var(--fb-elevation-1);border-color:var(--fb-primary); }
.cg-game-icon { width:56px;height:56px;border-radius:var(--fb-shape-md);object-fit:cover;flex-shrink:0;background:#1a1a2e;display:flex;align-items:center;justify-content:center;font-size:28px; }
.cg-game-info { flex:1;min-width:0; }
.cg-game-name { font-weight:700;font-size:15px;color:var(--fb-on-surface); }
.cg-game-desc { font-size:12px;color:var(--fb-on-surface-variant);margin-top:3px; }
.cg-game-price { font-size:11px;color:#ff9800;font-weight:600;margin-top:3px; }
.cg-game-hint { text-align:center;color:var(--fb-on-surface-variant);font-size:13px;padding:40px 20px; }

/* GLOBAL ROCKET NOTIFICATION BANNER - PURPLE SPACE THEME */
.rocket-notification-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 999998;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1040 30%, #2d1b69 60%, #0f0c29 100%);
    padding: 10px 16px;
    display: flex; align-items: center;
    box-shadow: 0 4px 30px rgba(139,92,246,0.4), inset 0 1px 0 rgba(167,139,250,0.3);
    animation: rocketNotifSlide 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    box-sizing: border-box;
    border-bottom: 2px solid #8b5cf6;
    gap: 10px;
    overflow: hidden;
    transition: all 0.3s;
    min-height: 56px;
}
.rocket-notification-banner:hover {
    background: linear-gradient(135deg, #1a1040 0%, #2d1b69 30%, #4c1d95 60%, #1a1040 100%);
    box-shadow: 0 4px 40px rgba(139,92,246,0.6), inset 0 1px 0 rgba(167,139,250,0.4);
}
@keyframes rocketNotifSlide {
    0% { transform: translateY(-100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
.rocket-notif-glow {
    position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(139,92,246,0.1) 0%, transparent 60%);
    pointer-events: none;
    animation: rocketNotifGlowPulse 2s ease-in-out infinite;
}
@keyframes rocketNotifGlowPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}
.rocket-notif-icon {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    animation: rocketNotifFloat 2s ease-in-out infinite;
    z-index: 1;
}
.rocket-notif-icon svg {
    width: 36px; height: 36px;
    filter: drop-shadow(0 0 10px rgba(139,92,246,0.6));
}
@keyframes rocketNotifFloat {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-4px) rotate(5deg); }
}
.rocket-notif-content {
    flex: 1; overflow: hidden; position: relative; z-index: 1;
}
.rocket-notif-marquee {
    display: inline-block;
    white-space: nowrap;
    animation: rocketMarquee 14s linear infinite;
    font-size: 14px;
    font-weight: 600;
    color: #e0d4ff;
    text-shadow: 0 0 10px rgba(139,92,246,0.3);
    padding-left: 100%;
}
.rocket-notif-marquee:hover { animation-play-state: paused; }
@keyframes rocketMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
.rocket-notif-stars {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; overflow: hidden; z-index: 0;
}
.rocket-notif-star {
    position: absolute; width: 3px; height: 3px;
    background: #fff; border-radius: 50%;
    animation: starTwinkle var(--duration, 1.5s) ease-in-out infinite alternate;
}
@keyframes starTwinkle {
    0% { opacity: 0.2; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.2); }
}
.rocket-notif-close {
    background: rgba(255,255,255,0.1); border: none; color: rgba(255,255,255,0.7);
    font-size: 18px; cursor: pointer; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: 0.2s; z-index: 2; line-height: 1;
}
.rocket-notif-close:hover { background: rgba(255,255,255,0.2); color: #fff; }
.rocket-notif-sender { color: #c084fc; font-weight: 700; }
.rocket-notif-giftname { color: #f59e0b; font-weight: 700; }
.rocket-notif-recipient { color: #60a5fa; font-weight: 700; }
.rocket-notif-quantity { color: #a78bfa; font-weight: 700; }
.rocket-notif-avatar {
    width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
    margin: 0 6px; border: 2px solid #a78bfa; flex-shrink: 0;
    box-shadow: 0 0 8px rgba(167,139,250,0.5);
}

/* COUNTDOWN TIMER */
.rocket-notif-countdown {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; z-index: 2; position: relative;
    width: 40px; height: 40px;
}
.rocket-notif-countdown svg {
    width: 40px; height: 40px;
    transform: rotate(-90deg);
}
.rocket-notif-countdown-bg {
    fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 3;
}
.rocket-notif-countdown-progress {
    fill: none; stroke: #8b5cf6; stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 113.1;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear;
}
.rocket-notif-countdown-text {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px; font-weight: 700; color: #e0d4ff;
    font-variant-numeric: tabular-nums;
}
.rocket-notif-countdown-text.warning {
    color: #f97316;
}
.rocket-notif-countdown-text.danger {
    color: #ef4444;
    animation: countdownPulse 0.5s ease-in-out infinite alternate;
}
@keyframes countdownPulse {
    0% { transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(-50%, -50%) scale(1.3); }
}

/* JOIN BUTTON */
.rocket-notif-join-btn {
    flex-shrink: 0; z-index: 2;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff; border: none; border-radius: 8px;
    padding: 8px 16px; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: all 0.25s;
    white-space: nowrap;
    box-shadow: 0 2px 12px rgba(37,99,235,0.4);
    display: flex; align-items: center; gap: 6px;
}
.rocket-notif-join-btn:hover {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(37,99,235,0.6);
}
.rocket-notif-join-btn:active {
    transform: translateY(0);
}
.rocket-notif-join-btn svg {
    width: 16px; height: 16px; fill: currentColor;
}

/* VANISH EFFECT */
.rocket-notif-vanish-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 20; overflow: hidden;
}
.rocket-notif-vanish-particle {
    position: absolute; border-radius: 50%;
    animation: vanishParticleFly var(--vdur, 1s) ease-out forwards;
}
@keyframes vanishParticleFly {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--vx), var(--vy)) scale(0); opacity: 0; }
}
.rocket-notif-vanish-portal {
    position: absolute; top: 50%; left: 50%;
    width: 0; height: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: portalErupt 1s ease-out forwards;
    pointer-events: none; z-index: 21;
    background: radial-gradient(circle, rgba(196,132,252,0.9) 0%, rgba(139,92,246,0.6) 25%, rgba(124,58,237,0.3) 50%, transparent 70%);
}
@keyframes portalErupt {
    0% { width: 0; height: 0; opacity: 1; }
    40% { width: 600px; height: 600px; opacity: 0.9; }
    100% { width: 900px; height: 900px; opacity: 0; }
}
.rocket-notif-vanish-spark {
    position: absolute; border-radius: 50%;
    animation: sparkShoot var(--sdur, 0.8s) ease-out forwards;
    pointer-events: none; z-index: 22;
}
@keyframes sparkShoot {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--sx), var(--sy)) scale(0); opacity: 0; }
}
.rocket-notif-banner-vanish {
    animation: bannerVanishUp 0.7s ease-in forwards !important;
}
@keyframes bannerVanishUp {
    0% { transform: translateY(0); opacity: 1; max-height: 200px; }
    50% { transform: translateY(-30px); opacity: 0.5; max-height: 200px; }
    100% { transform: translateY(-100%); opacity: 0; max-height: 0; padding: 0; margin: 0; }
}

/* ============ NEW PAGES CSS ============ */
.new-page-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background: var(--fb-bg); overflow-y: auto; animation: npFadeIn 0.2s ease; }
@keyframes npFadeIn { from { opacity: 0; } to { opacity: 1; } }
.new-page-overlay.hidden { display: none; }
.new-page-top-bar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 12px; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top)); background: var(--fb-surface-container); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--fb-outline-variant); }
.new-page-top-bar .np-back-btn { background: var(--fb-surface-container-high); border: none; width: 36px; height: 36px; border-radius: var(--fb-shape-full); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--fb-text-name); flex-shrink: 0; transition: background 0.2s; }
.new-page-top-bar .np-back-btn:hover { background: var(--fb-surface-container-highest); }
.new-page-top-bar .np-back-btn svg { width: 20px; height: 20px; fill: var(--fb-on-surface-variant); }
.new-page-top-bar .np-title { font-size: var(--fb-font-title-lg); font-weight: var(--fb-font-weight-semibold); color: var(--fb-on-surface); letter-spacing: var(--fb-letter-spacing); }
.new-page-body { padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); max-width: 600px; margin: 0 auto; }

/* Settings menu items */
.settings-menu { display: flex; flex-direction: column; gap: 4px; }
.settings-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--fb-surface-container-lowest); border: 1px solid var(--fb-outline-variant); border-radius: var(--fb-shape-md); cursor: pointer; transition: all 0.2s ease; }
.settings-item:hover { border-color: var(--fb-primary); box-shadow: var(--fb-elevation-2); }
.settings-item:active { transform: scale(0.98); }
.settings-item-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.settings-item-icon svg { width: 22px; height: 22px; }
.settings-item-text { flex: 1; }
.settings-item-title { font-weight: 600; font-size: 15px; color: var(--fb-text-name); }
.settings-item-desc { font-size: 12px; color: var(--fb-text-gray); margin-top: 2px; }
.settings-item-arrow svg { width: 18px; height: 18px; fill: var(--fb-text-gray); transition: transform 0.3s; }
.settings-item-arrow.open svg { transform: rotate(180deg); }

/* Help sub-items */
.help-sub-items { overflow: hidden; max-height: 0; transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease; opacity: 0; margin-top: 0; }
.help-sub-items.open { max-height: 500px; opacity: 1; margin-top: 4px; }
.help-sub-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 56px; background: var(--fb-input-bg); border: 1px solid var(--fb-border); border-radius: 10px; cursor: pointer; transition: all 0.2s; margin-bottom: 4px; }
.help-sub-item:hover { border-color: var(--fb-blue); background: rgba(24,119,242,0.06); }
.help-sub-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.help-sub-item-text { font-size: 14px; font-weight: 500; color: var(--fb-text-name); }

/* My Coins Page */
.mycoins-card { background: linear-gradient(135deg, #1a1a2e, #16213e); border-radius: 16px; padding: 24px; text-align: center; color: #fff; margin-bottom: 16px; border: 1px solid rgba(255,215,0,0.3); box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.mycoins-amount { font-size: 48px; font-weight: 800; color: #ffd700; text-shadow: 0 0 20px rgba(255,215,0,0.3); margin: 10px 0; }
.mycoins-label { font-size: 14px; color: rgba(255,255,255,0.7); }
.mycoins-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.mycoins-stat { background: var(--fb-white); border: 1px solid var(--fb-border); border-radius: 12px; padding: 14px; text-align: center; }
.mycoins-stat-value { font-size: 18px; font-weight: 700; color: var(--fb-text-name); }
.mycoins-stat-label { font-size: 11px; color: var(--fb-text-gray); margin-top: 2px; }
.mycoins-stat-icon { font-size: 24px; margin-bottom: 4px; }

.coin-history-section { background: var(--fb-white); border: 1px solid var(--fb-border); border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
.coin-history-title { padding: 14px 16px; font-weight: 700; font-size: 14px; color: var(--fb-text-name); border-bottom: 1px solid var(--fb-border); background: var(--fb-surface-container-low, var(--fb-white)); }
.coin-history-list { max-height: 320px; overflow-y: auto; }
.coin-history-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--fb-border); }
.coin-history-item:last-child { border-bottom: none; }
.coin-history-left { display: flex; flex-direction: column; gap: 2px; }
.coin-history-amount { font-weight: 700; font-size: 14px; }
.coin-history-desc { font-size: 12px; color: var(--fb-text-gray); }
.coin-history-date { font-size: 11px; color: var(--fb-text-gray); white-space: nowrap; margin-left: 12px; }

/* Anti-fraud page */
.antifraud-hero { background: linear-gradient(135deg, #1a1040, #2d1b69); border-radius: 16px; padding: 24px; text-align: center; color: #fff; margin-bottom: 16px; border: 1px solid rgba(139,92,246,0.3); }
.antifraud-hero svg { width: 64px; height: 64px; margin-bottom: 10px; }
.antifraud-hero h2 { font-size: 20px; margin: 0 0 8px; }
.antifraud-hero p { font-size: 13px; opacity: 0.8; line-height: 1.5; }
.antifraud-link { display: inline-block; background: rgba(255,255,255,0.1); padding: 8px 16px; border-radius: 8px; font-size: 13px; color: #c084fc; word-break: break-all; margin-top: 8px; border: 1px solid rgba(255,255,255,0.1); }
.antifraud-tip { background: var(--fb-white); border: 1px solid var(--fb-border); border-radius: 12px; padding: 16px; margin-bottom: 10px; display: flex; gap: 12px; align-items: flex-start; }
.antifraud-tip-icon { width: 36px; height: 36px; border-radius: 50%; background: #45bd6220; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.antifraud-tip-icon svg { width: 20px; height: 20px; fill: #45bd62; }
.antifraud-tip-content { flex: 1; }
.antifraud-tip-title { font-weight: 600; font-size: 14px; color: var(--fb-text-name); margin-bottom: 4px; }
.antifraud-tip-text { font-size: 13px; color: var(--fb-text-gray); line-height: 1.4; }
.antifraud-warn { background: #f0284915; border: 1px solid #f0284930; border-radius: 12px; padding: 16px; display: flex; gap: 12px; align-items: flex-start; }
.antifraud-warn-icon { width: 36px; height: 36px; border-radius: 50%; background: #f0284920; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.antifraud-warn-icon svg { width: 20px; height: 20px; fill: #f02849; }

/* Report issue page */
.report-form { background: var(--fb-white); border: 1px solid var(--fb-border); border-radius: 16px; padding: 20px; }
.report-form label { display: block; font-size: 13px; font-weight: 600; color: var(--fb-text-name); margin-bottom: 6px; margin-top: 14px; }
.report-form label:first-child { margin-top: 0; }
.report-form select, .report-form textarea, .report-form input { width: 100%; padding: 10px 12px; border: 1px solid var(--fb-border); border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--fb-input-bg); color: var(--fb-text-main); box-sizing: border-box; outline: none; transition: border-color 0.2s; }
.report-form select:focus, .report-form textarea:focus, .report-form input:focus { border-color: var(--fb-blue); }
.report-form textarea { min-height: 100px; resize: vertical; }
.report-file-upload { display: flex; align-items: center; gap: 10px; padding: 12px; border: 2px dashed var(--fb-border); border-radius: 10px; cursor: pointer; transition: 0.2s; margin-top: 6px; }
.report-file-upload:hover { border-color: var(--fb-blue); background: rgba(24,119,242,0.04); }
.report-file-upload svg { width: 24px; height: 24px; fill: var(--fb-text-gray); flex-shrink: 0; }
.report-file-upload span { font-size: 13px; color: var(--fb-text-gray); }
.report-file-upload input { display: none; }
.report-file-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.report-file-preview-item { position: relative; width: 80px; height: 80px; border-radius: 8px; overflow: hidden; border: 1px solid var(--fb-border); }
.report-file-preview-item img, .report-file-preview-item video { width: 100%; height: 100%; object-fit: cover; }
.report-file-preview-item .remove-file { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,0.6); color: #fff; border: none; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; line-height: 1; }
.report-submit-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, var(--fb-blue), #166fe5); color: white; border: none; border-radius: 10px; font-weight: 700; font-size: 15px; cursor: pointer; transition: 0.2s; margin-top: 16px; }
.report-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(24,119,242,0.3); }

/* Terms page */
.terms-hero { background: linear-gradient(135deg, #0f0c29, #1a1040, #2d1b69); border-radius: 16px; padding: 30px 24px; text-align: center; color: #fff; margin-bottom: 16px; border: 1px solid rgba(139,92,246,0.3); }
.terms-hero svg { width: 56px; height: 56px; margin-bottom: 10px; }
.terms-hero h2 { font-size: 22px; margin: 0 0 6px; }
.terms-hero p { font-size: 13px; opacity: 0.7; }
.terms-section { background: var(--fb-white); border: 1px solid var(--fb-border); border-radius: 12px; padding: 16px; margin-bottom: 10px; }
.terms-section h3 { margin: 0 0 8px; font-size: 15px; color: var(--fb-blue); display: flex; align-items: center; gap: 8px; }
.terms-section h3 svg { width: 20px; height: 20px; fill: var(--fb-blue); flex-shrink: 0; }
.terms-section p { margin: 0; font-size: 13px; color: var(--fb-text-gray); line-height: 1.6; }
.terms-section ul { margin: 8px 0 0; padding-left: 20px; }
.terms-section ul li { font-size: 13px; color: var(--fb-text-gray); line-height: 1.6; margin-bottom: 4px; }

/* Admin Reports page */
.admin-reports-list { display: flex; flex-direction: column; gap: 8px; }
.admin-report-card { background: var(--fb-white); border: 1px solid var(--fb-border); border-radius: 12px; padding: 14px; transition: 0.2s; }
.admin-report-card:hover { border-color: var(--fb-blue); }
.admin-report-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.admin-report-user { font-weight: 600; font-size: 13px; color: var(--fb-text-name); display: flex; align-items: center; gap: 6px; }
.admin-report-time { font-size: 11px; color: var(--fb-text-gray); }
.admin-report-issue { font-size: 13px; color: var(--fb-text-main); margin-bottom: 6px; word-break: break-word; }
.admin-report-detail { font-size: 12px; color: var(--fb-text-gray); line-height: 1.4; word-break: break-word; }
.admin-report-media { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.admin-report-media a { font-size: 11px; color: var(--fb-blue); text-decoration: none; padding: 4px 8px; background: var(--fb-input-bg); border-radius: 6px; }
.admin-report-empty { text-align: center; padding: 40px 20px; color: var(--fb-text-gray); font-size: 14px; }
.admin-report-delete-btn { background: none; border: none; color: var(--fb-text-gray); cursor: pointer; font-size: 16px; padding: 4px; border-radius: 50%; }
.admin-report-delete-btn:hover { color: #f02849; background: #f0284915; }
.admin-report-card-comment { border-left: 3px solid #f02849; }
.admin-report-comment-detail { margin-top: 8px; padding: 8px; background: var(--fb-input-bg); border-radius: 8px; font-size: 12px; line-height: 1.5; }
.admin-report-comment-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; word-break: break-word; }
.admin-report-label { font-weight: 600; color: var(--fb-text-gray); min-width: 120px; flex-shrink: 0; }
.admin-report-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; cursor: pointer; }
.admin-report-name { color: var(--fb-blue); cursor: pointer; font-weight: 500; }
.admin-report-name:hover { text-decoration: underline; }

/* Email Link Page */
.email-link-card { background: var(--fb-white); border: 1px solid var(--fb-border); border-radius: 16px; padding: 24px; margin-bottom: 16px; }
.email-link-header { text-align: center; margin-bottom: 20px; }
.email-link-header svg { width: 56px; height: 56px; fill: var(--fb-blue); margin-bottom: 8px; }
.email-link-header h2 { margin: 0; font-size: 20px; color: var(--fb-text-name); }
.email-link-header p { margin: 4px 0 0; font-size: 13px; color: var(--fb-text-gray); }
.email-input-group { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.email-input-group input { flex: 1; padding: 12px 14px; border: 1px solid var(--fb-border); border-radius: 10px; font-size: 14px; outline: none; background: var(--fb-input-bg); color: var(--fb-text-main); transition: border-color 0.2s; box-sizing: border-box; }
.email-input-group input:focus { border-color: var(--fb-blue); }
.email-input-group .send-code-btn { padding: 12px 18px; background: var(--fb-blue); color: white; border: none; border-radius: 10px; font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; transition: 0.2s; flex-shrink: 0; }
.email-input-group .send-code-btn:hover { background: var(--fb-dark-blue); }
.email-input-group .send-code-btn:disabled { opacity: 0.5; cursor: not-allowed; }
input[inputmode="numeric"]::-webkit-outer-spin-button,
input[inputmode="numeric"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[inputmode="numeric"] { -moz-appearance: textfield; }
.email-link-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #45bd62, #3ba555); color: white; border: none; border-radius: 10px; font-weight: 700; font-size: 15px; cursor: pointer; transition: 0.2s; margin-top: 6px; }
.email-link-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(69,189,98,0.3); }
.email-link-btn.danger { background: linear-gradient(135deg, #f02849, #d11a3a); }
.email-link-btn.danger:hover { box-shadow: 0 4px 12px rgba(240,40,73,0.3); }
.email-link-status { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #45bd6210; border: 1px solid #45bd6230; border-radius: 10px; margin-bottom: 14px; }
.email-link-status svg { width: 20px; height: 20px; fill: #45bd62; flex-shrink: 0; }
.email-link-status span { font-size: 14px; color: #2d7a46; font-weight: 500; }
.email-link-status .email-addr { font-weight: 400; color: var(--fb-text-gray); margin-left: 4px; }

/* Change Password Page */
.change-pwd-card { background: var(--fb-surface-container-lowest); border: 1px solid var(--fb-outline-variant); border-radius: var(--fb-shape-lg); padding: 20px; margin-bottom: 16px; transition: box-shadow 0.2s; }
.change-pwd-header { text-align: center; margin-bottom: 20px; }
.change-pwd-header svg { width: 56px; height: 56px; fill: var(--fb-blue); margin-bottom: 8px; }
.change-pwd-header h2 { margin: 0; font-size: 20px; color: var(--fb-text-name); }
.change-pwd-header p { margin: 4px 0 0; font-size: 13px; color: var(--fb-text-gray); }
.change-pwd-input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--fb-outline); border-radius: var(--fb-shape-sm); font-size: var(--fb-font-body-md); outline: none; background: transparent; color: var(--fb-on-surface); transition: border-color 0.2s, box-shadow 0.2s; margin-bottom: 12px; box-sizing: border-box; }
.change-pwd-input:focus { border-color: var(--fb-primary); border-width: 2px; padding: 11.5px 13.5px; box-shadow: 0 0 0 3px rgba(24,119,242,0.12); }
.change-pwd-code-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.change-pwd-code-row input { flex: 1; padding: 12px 14px; border: 1px solid var(--fb-border); border-radius: 10px; font-size: 14px; outline: none; background: var(--fb-input-bg); color: var(--fb-text-main); transition: border-color 0.2s; box-sizing: border-box; }
.change-pwd-code-row input:focus { border-color: var(--fb-blue); }
.change-pwd-code-row .send-code-btn { padding: 12px 18px; background: var(--fb-blue); color: white; border: none; border-radius: 10px; font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; transition: 0.2s; flex-shrink: 0; }
.change-pwd-code-row .send-code-btn:hover { background: var(--fb-dark-blue); }
.change-pwd-code-row .send-code-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.change-pwd-submit { width: 100%; padding: 14px; background: var(--fb-primary); color: var(--fb-on-primary); border: none; border-radius: var(--fb-shape-full); font-weight: var(--fb-font-weight-semibold); font-size: var(--fb-font-body-lg); cursor: pointer; transition: box-shadow 0.2s, filter 0.2s; letter-spacing: 0.3px; }
.change-pwd-submit:hover { box-shadow: var(--fb-elevation-2); filter: brightness(1.08); }
.change-pwd-submit:active { transform: scale(0.98); }
.change-pwd-submit:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }

/* Inline notification toast */
.toast-notification { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 99999; background: var(--fb-white); border: 1px solid var(--fb-border); border-radius: 12px; padding: 12px 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 10px; animation: toastSlideUp 0.3s ease; max-width: 90%; }
@keyframes toastSlideUp { from { transform: translateX(-50%) translateY(30px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }
.toast-notification svg { width: 22px; height: 22px; flex-shrink: 0; }
.toast-notification span { font-size: 14px; color: var(--fb-text-main); font-weight: 500; }

/* Incoming chat message notification stack */
#chatNotifStack {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(92%, 420px);
    pointer-events: none;
}
.chat-notif-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--fb-white);
    border: 1px solid var(--fb-border);
    border-left: 4px solid var(--fb-blue);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-16px) scale(0.98);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.chat-notif-toast.show { opacity: 1; transform: translateY(0) scale(1); }
.chat-notif-toast:active { transform: scale(0.99); }
.chat-notif-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--fb-blue);
    background: var(--fb-bg);
}
.chat-notif-body { flex: 1; min-width: 0; }
.chat-notif-name { font-size: 14px; font-weight: 700; color: var(--fb-text-main); line-height: 1.3; }
.chat-notif-text { font-size: 13px; color: var(--fb-text-secondary); margin-top: 3px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.chat-notif-time { font-size: 11px; color: var(--fb-text-gray); margin-top: 4px; display:flex;align-items:center;gap:4px; }
.chat-notif-time::before { content:'🕐'; font-size:10px; }
.chat-notif-close {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: none;
    background: var(--fb-bg);
    color: var(--fb-text-secondary);
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.chat-notif-close:hover { background: var(--fb-border); color: var(--fb-text-main); }
.chat-notif-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--fb-blue), #a78bfa);
    transform-origin: left center;
    animation: chatNotifProgress 10s linear forwards;
}
@keyframes chatNotifProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Friend chat profile — mute button */
.fc-mute-btn {
    display:flex;align-items:center;gap:8px;width:100%;padding:12px 16px;border:none;
    border-radius:12px;cursor:pointer;font-size:14px;font-weight:600;
    transition:all 0.2s;margin-top:8px;
}
.fc-mute-btn.muted { background:#e53935;color:#fff; }
.fc-mute-btn.muted:hover { background:#c62828; }
.fc-mute-btn.unmuted { background:var(--fb-blue);color:#fff; }
.fc-mute-btn.unmuted:hover { filter:brightness(1.1); }
.fc-mute-btn .fc-btn-icon { width:20px;height:20px;fill:#fff;flex-shrink:0; }


/* Verification Code Popup */
.verify-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; backdrop-filter: blur(4px); }
.verify-popup-overlay.hidden { display: none; }
.verify-popup-modal { background: var(--fb-white); border-radius: 20px; max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 25px 60px rgba(0,0,0,0.3); animation: verifyPopupSlideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); border: 1px solid rgba(255,255,255,0.1); }
@keyframes verifyPopupSlideIn { from { transform: translateY(40px) scale(0.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.verify-popup-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 24px 24px 20px; border-radius: 20px 20px 0 0; color: white; text-align: center; position: relative; overflow: hidden; }
.verify-popup-header::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%); animation: verifyHeaderGlow 3s ease-in-out infinite; }
@keyframes verifyHeaderGlow { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 1; } }
.verify-popup-header svg { width: 56px; height: 56px; fill: white; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2)); margin-bottom: 8px; position: relative; z-index: 1; }
.verify-popup-header h3 { margin: 0; font-size: 17px; font-weight: 700; position: relative; z-index: 1; }
.verify-popup-header span { font-size: 12px; opacity: 0.85; position: relative; z-index: 1; display: block; margin-top: 4px; }
.verify-popup-body { padding: 24px; }
.verify-popup-greeting { font-size: 14px; color: var(--fb-text-name); margin-bottom: 16px; line-height: 1.7; }
.verify-popup-code-box { background: linear-gradient(135deg, #667eea08, #764ba208); border: 2px dashed #667eea40; border-radius: 14px; padding: 18px; text-align: center; margin: 16px 0; position: relative; }
.verify-popup-code-box::after { content: '🔐'; position: absolute; top: -12px; right: -12px; font-size: 20px; }
.verify-popup-code-label { font-size: 12px; color: var(--fb-text-gray); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.verify-popup-code-value { font-size: 32px; font-weight: 900; color: #667eea; letter-spacing: 8px; font-family: 'Courier New', monospace; text-shadow: 0 2px 10px rgba(102,126,234,0.2); }
.verify-popup-wish { font-size: 13px; color: var(--fb-text-gray); line-height: 1.6; margin-bottom: 14px; padding: 12px 16px; background: var(--fb-input-bg); border-radius: 12px; }
.verify-popup-signature { background: linear-gradient(135deg, #667eea06, #764ba206); border: 1px solid #667eea20; border-radius: 12px; padding: 14px 18px; margin-top: 14px; }
.verify-popup-signature .bot-name { font-weight: 700; font-size: 14px; color: var(--fb-text-name); display: flex; align-items: center; gap: 6px; }
.verify-popup-signature .bot-name svg { width: 16px; height: 16px; fill: #667eea; }
.verify-popup-signature .bot-email { font-size: 12px; color: #667eea; font-weight: 500; margin-top: 2px; }
.verify-popup-signature .bot-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #45bd62; background: #e8f5e9; padding: 3px 10px; border-radius: 20px; margin-top: 6px; font-weight: 600; }
.verify-popup-signature .bot-badge svg { width: 12px; height: 12px; fill: #45bd62; }
.verify-popup-footer { font-size: 11px; color: var(--fb-text-gray); line-height: 1.6; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--fb-border); }
.verify-popup-footer a { color: #667eea; text-decoration: none; font-weight: 500; }
.verify-popup-footer a:hover { text-decoration: underline; }
.verify-popup-footer .auto-msg { font-style: italic; }
.verify-popup-close { width: 100%; padding: 14px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; border-radius: 12px; font-weight: 700; font-size: 15px; cursor: pointer; margin-top: 18px; transition: all 0.3s; box-shadow: 0 4px 15px rgba(102,126,234,0.3); }
.verify-popup-close:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(102,126,234,0.4); }
.verify-popup-close:active { transform: translateY(0); }

/* Update sidebar for new items */
.sidebar { width: 300px; }
.sidebar .menu-item { border-radius: 10px; margin-bottom: 2px; font-weight: var(--fb-font-weight-medium); padding: 12px 10px; }
.sidebar .menu-item:hover { background: var(--fb-surface-container-high); }
.sidebar .menu-item .menu-item-icon { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sidebar .menu-item .menu-item-icon svg { width: 22px; height: 22px; fill: var(--fb-text-gray); }
.sidebar-divider { height: 1px; background: var(--fb-border); margin: 8px 0; }
.sidebar .menu-item.logout { color: #f02849; }
.sidebar .menu-item.logout .menu-item-icon svg { fill: #f02849; }
.sidebar .settings-label { font-size: 12px; font-weight: 600; color: var(--fb-text-gray); padding: 10px 10px 4px; text-transform: uppercase; letter-spacing: 0.5px; }

/* BAN POPUP */
.ban-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 100000; display: flex; align-items: center; justify-content: center; }
.ban-popup-box { background: var(--fb-white); border-radius: 16px; padding: 24px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.ban-popup-title { font-size: 16px; font-weight: 700; color: var(--fb-text-name); margin-bottom: 16px; line-height: 1.4; }
.ban-popup-input { width: 100%; padding: 12px 14px; border: 2px solid var(--fb-border); border-radius: 10px; font-size: 16px; outline: none; box-sizing: border-box; text-align: center; font-weight: 600; }
.ban-popup-input:focus { border-color: var(--fb-blue); }
.ban-popup-reason { width: 100%; padding: 10px 12px; border: 2px solid var(--fb-border); border-radius: 10px; font-size: 13px; outline: none; box-sizing: border-box; resize: vertical; min-height: 60px; margin-top: 10px; font-family: inherit; }
.ban-popup-reason:focus { border-color: var(--fb-blue); }
.ban-popup-actions { display: flex; gap: 10px; margin-top: 16px; }
.ban-popup-btn { flex: 1; padding: 12px; border: none; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; transition: 0.2s; }
.ban-popup-btn.cancel { background: #f02849; color: white; }
.ban-popup-btn.cancel:hover { background: #d91a3a; }
.ban-popup-btn.confirm { background: var(--fb-blue); color: white; }
.ban-popup-btn.confirm:hover { background: var(--fb-dark-blue); }

/* FKBPay Wallet */
.fkb-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--fb-bg); z-index: 99999; display: flex; flex-direction: column; overflow-y: auto; }
.fkb-overlay.hidden { display: none; }
.fkb-top-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--fb-white); border-bottom: 1px solid var(--fb-border); position: sticky; top: 0; z-index: 5; }
.fkb-back-btn { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--fb-text-name); padding: 4px; }
.fkb-title { font-size: 17px; font-weight: 700; color: var(--fb-text-name); flex: 1; }
.fkb-body { padding: 20px 16px; max-width: 420px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.fkb-card { background: linear-gradient(135deg, #1a73e8, #0d47a1); border-radius: 16px; padding: 24px; color: white; margin-bottom: 20px; }
.fkb-balance-label { font-size: 12px; opacity: 0.8; margin-bottom: 4px; }
.fkb-balance-amount { font-size: 28px; font-weight: 800; }
.fkb-balance-amount small { font-size: 14px; font-weight: 400; opacity: 0.7; }
.fkb-btn { display: block; width: 100%; padding: 14px; border: none; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; transition: 0.2s; text-align: center; margin-bottom: 12px; }
.fkb-btn.primary { background: var(--fb-blue); color: white; }
.fkb-btn.primary:hover { background: var(--fb-dark-blue); }
.fkb-btn.secondary { background: var(--fb-input-bg); color: var(--fb-text-name); border: 1px solid var(--fb-border); }
.fkb-btn.secondary:hover { background: var(--fb-border); }
.fkb-label { font-size: 13px; font-weight: 600; color: var(--fb-text-name); margin-bottom: 6px; display: block; }
.fkb-input { width: 100%; padding: 12px 14px; border: 2px solid var(--fb-border); border-radius: 10px; font-size: 15px; outline: none; box-sizing: border-box; background: var(--fb-white); color: var(--fb-text-main); }
.fkb-input:focus { border-color: var(--fb-blue); }
.fkb-input.error { border-color: #e53935; }
.fkb-input:disabled { background: var(--fb-input-bg); color: var(--fb-text-gray); }
.fkb-error { color: #e53935; font-size: 12px; margin-top: 4px; display: none; }
.fkb-error.show { display: block; }
.fkb-success { color: #45bd62; font-size: 12px; margin-top: 4px; display: none; }
.fkb-success.show { display: block; }
.fkb-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.55); z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.fkb-popup-overlay.hidden { display: none; }
.fkb-popup-box { background: var(--fb-white); border-radius: 18px; padding: 24px; max-width: 380px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.25); }
.fkb-popup-box h3 { margin: 0 0 8px; font-size: 17px; color: var(--fb-text-name); }
.fkb-popup-box p { margin: 0 0 16px; font-size: 13px; color: var(--fb-text-gray); line-height: 1.5; }
.fkb-popup-actions { display: flex; gap: 10px; margin-top: 16px; }
.fkb-popup-actions button { flex: 1; padding: 12px; border: none; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; transition: 0.2s; }
.fkb-popup-actions .confirm { background: var(--fb-blue); color: white; }
.fkb-popup-actions .confirm:hover { background: var(--fb-dark-blue); }
.fkb-popup-actions .cancel { background: #e53935; color: white; }
.fkb-popup-actions .cancel:hover { background: #c62828; }
.fkb-popup-actions .ok { background: var(--fb-blue); color: white; flex: 0 1 auto; padding: 12px 32px; }
.fkb-popup-icon { text-align: center; font-size: 48px; margin-bottom: 12px; }
.fkb-popup-icon.error svg { width: 56px; height: 56px; fill: #e53935; }
.fkb-confirm-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.fkb-confirm-overlay.hidden { display: none; }
.fkb-confirm-box { background: var(--fb-white); border-radius: 18px; padding: 28px 24px; max-width: 360px; width: 100%; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.fkb-confirm-box h3 { margin: 0 0 10px; font-size: 16px; color: var(--fb-text-name); }
.fkb-confirm-box p { margin: 0 0 20px; font-size: 14px; color: var(--fb-text-gray); line-height: 1.5; }
.fkb-confirm-actions { display: flex; gap: 12px; justify-content: center; }
.fkb-confirm-actions button { padding: 11px 28px; border: none; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; transition: 0.2s; }
.fkb-confirm-actions .confirm { background: var(--fb-blue); color: white; }
.fkb-confirm-actions .confirm:hover { background: var(--fb-dark-blue); }
.fkb-confirm-actions .cancel { background: #e53935; color: white; }
.fkb-confirm-actions .cancel:hover { background: #c62828; }

/* YOUTUBE TOGETHER ROOM LIST */
.yt-room-list-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.yt-room-list-title { margin: 0; font-size: 16px; color: var(--fb-text-name); }
.yt-create-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--fb-blue); color: white; border: none; padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; transition: 0.2s; }
.yt-create-btn:hover { background: var(--fb-dark-blue); transform: translateY(-1px); }
.yt-room-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.yt-room-card { background: var(--fb-white); border: 1px solid var(--fb-border); border-radius: 12px; padding: 16px; cursor: pointer; transition: all 0.25s; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.yt-room-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); border-color: var(--fb-blue); }
.yt-room-card-name { font-weight: 700; font-size: 14px; color: var(--fb-text-name); margin-bottom: 4px; display: flex; align-items: center; gap: 4px; }
.yt-room-card-host { font-size: 11px; color: var(--fb-text-gray); margin-bottom: 6px; }
.yt-room-card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--fb-text-gray); }
.yt-room-card-fame { display: flex; align-items: center; gap: 3px; font-weight: 600; color: #ff9800; }
.yt-room-card-fame svg { width: 12px; height: 12px; fill: #ff9800; }
.yt-room-card-status { padding: 2px 8px; border-radius: 8px; font-size: 10px; font-weight: 600; }
.yt-room-card-status.active { background: #45bd6220; color: #45bd62; }
.yt-room-card-status.idle { background: var(--fb-input-bg); color: var(--fb-text-gray); }
.yt-room-card-thumb { width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;margin-bottom:10px;background:var(--fb-input-bg);position:relative; }
.yt-room-card-thumb img { width:100%;height:100%;object-fit:cover;display:block; }
.yt-room-card-thumb .yt-thumb-overlay { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.3);opacity:0;transition:opacity .25s; }
.yt-room-card:hover .yt-thumb-overlay { opacity:1; }
.yt-room-card-thumb .yt-thumb-overlay svg { width:40px;height:40px;fill:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.yt-room-card-payment { font-size:10px;font-weight:600;padding:2px 8px;border-radius:6px;display:inline-flex;align-items:center;gap:3px;margin-top:6px; }
.yt-room-card-payment.host { background:#e5393520;color:#e53935; }
.yt-room-card-payment.group { background:#1e88e520;color:#1e88e5; }
.yt-empty-rooms { grid-column: 1 / -1; text-align: center; padding: 40px 20px; color: var(--fb-text-gray); font-size: 14px; background: var(--fb-white); border: 1px dashed var(--fb-border); border-radius: 12px; }
.yt-room-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.yt-room-nav-title { flex: 1; font-weight: 700; font-size: 14px; color: var(--fb-text-name); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt-delete-btn { background: #f0284915; color: #f02849; border: 1px solid #f0284930; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 12px; cursor: pointer; transition: 0.2s; }
.yt-delete-btn:hover { background: #f02849; color: white; }
.yt-rename-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* ============ EDGE TO EDGE ============ */
/* Ensure full viewport coverage with safe-area insets */
.navbar, .new-page-top-bar, .profile-top-bar, .sidebar,
.rocket-notification-banner, .win-top-banner,
.fullscreen-reels-overlay,
.yt-gift-popup-overlay, .yt-popup-overlay,
#profileViewTab, .modal, .new-page-overlay {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
.navbar { padding-top: calc(8px + env(safe-area-inset-top)); }
.new-page-top-bar, .profile-top-bar { padding-top: calc(10px + env(safe-area-inset-top)); }
.rocket-notification-banner, .win-top-banner { padding-top: calc(10px + env(safe-area-inset-top)); }
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.modal-content { margin-top: env(safe-area-inset-top); margin-bottom: env(safe-area-inset-bottom); }
.sidebar { padding-top: calc(20px + env(safe-area-inset-top)); }
.sidebar, .rocket-notification-banner, .win-top-banner { box-sizing: border-box; }

/* Full bleed backgrounds on modern phones */
@supports(padding:max(0px)) {
    .navbar, .new-page-top-bar, .profile-top-bar { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
    .modal-content { max-height: calc(90vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
    .chat-input-area { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
    .yt-chat-input-area { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}

/* MISSIONS SYSTEM */
.missions-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; backdrop-filter: blur(4px); }
.missions-overlay.hidden { display: none; }
.missions-modal { background: var(--fb-white); border-radius: 20px; max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 25px 60px rgba(0,0,0,0.3); animation: missionsModalIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
@keyframes missionsModalIn { from { transform: translateY(40px) scale(0.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.missions-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); padding: 24px 24px 20px; border-radius: 20px 20px 0 0; color: white; text-align: center; position: relative; overflow: hidden; }
.missions-header::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 60%); animation: missionsHeaderGlow 3s ease-in-out infinite; pointer-events: none; }
@keyframes missionsHeaderGlow { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 1; } }
.missions-header svg { width: 48px; height: 48px; fill: white; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2)); margin-bottom: 6px; position: relative; z-index: 1; }
.missions-header h3 { margin: 0; font-size: 19px; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; }
.missions-header span { font-size: 12px; opacity: 0.9; display: block; margin-top: 4px; position: relative; z-index: 1; }
.missions-tabs { display: flex; border-bottom: 2px solid var(--fb-border); background: var(--fb-input-bg); }
.missions-tab { flex: 1; padding: 12px; text-align: center; font-weight: 700; font-size: 14px; cursor: pointer; color: var(--fb-text-gray); background: none; border: none; border-bottom: 3px solid transparent; transition: all 0.25s; position: relative; }
.missions-tab:hover { color: var(--fb-text-main); background: rgba(0,0,0,0.03); }
.missions-tab.active { color: #667eea; border-bottom-color: #667eea; }
.missions-tab.active::after { content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 30px; height: 3px; background: #667eea; border-radius: 3px; animation: missionsTabPulse 1.5s ease-in-out infinite; }
@keyframes missionsTabPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.missions-body { padding: 16px 20px; }
.missions-body.hidden { display: none; }
.mission-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--fb-input-bg); margin-bottom: 10px; border: 1px solid var(--fb-border); transition: all 0.3s; position: relative; overflow: hidden; }
.mission-item:hover { transform: translateX(4px); border-color: #667eea; box-shadow: 0 4px 16px rgba(102,126,234,0.12); }
.mission-item::after { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, #667eea, #764ba2); border-radius: 0 4px 4px 0; opacity: 0; transition: opacity 0.3s; }
.mission-item:hover::after { opacity: 1; }
.mission-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(135deg, #667eea, #764ba2); box-shadow: 0 4px 12px rgba(102,126,234,0.3); position: relative; overflow: hidden; }
.mission-icon svg { width: 24px; height: 24px; fill: white; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15)); position: relative; z-index: 1; }
.mission-icon::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%); animation: missionIconShine 3s ease-in-out infinite; pointer-events: none; }
@keyframes missionIconShine { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.1) rotate(5deg); } }
.mission-info { flex: 1; min-width: 0; }
.mission-name { font-size: 14px; font-weight: 600; color: var(--fb-text-name); display: flex; align-items: center; gap: 6px; }
.mission-progress { font-size: 12px; color: var(--fb-text-gray); margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.mission-progress-bar { height: 5px; background: var(--fb-border); border-radius: 3px; margin-top: 7px; overflow: hidden; position: relative; }
.mission-progress-fill { height: 100%; background: linear-gradient(90deg, #667eea, #764ba2, #f093fb); border-radius: 3px; transition: width 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); background-size: 200% 100%; animation: missionProgressShimmer 2s linear infinite; }
@keyframes missionProgressShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.mission-reward { font-size: 13px; font-weight: 700; color: #f59e0b; white-space: nowrap; display: flex; align-items: center; gap: 3px; padding: 4px 8px; background: rgba(245,158,11,0.1); border-radius: 8px; border: 1px solid rgba(245,158,11,0.2); }
.mission-claim-btn { padding: 8px 18px; border-radius: 20px; border: none; font-weight: 700; font-size: 13px; cursor: pointer; background: linear-gradient(135deg, #667eea, #764ba2); color: white; flex-shrink: 0; transition: all 0.3s; box-shadow: 0 2px 8px rgba(102,126,234,0.25); }
.mission-claim-btn:hover:not(:disabled) { transform: translateY(-2px) scale(1.03); box-shadow: 0 6px 20px rgba(102,126,234,0.4); }
.mission-claim-btn:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.mission-claim-btn:disabled { background: var(--fb-border); color: var(--fb-text-gray); cursor: not-allowed; box-shadow: none; transform: none; }
.mission-claim-btn.claimed { background: linear-gradient(135deg, #45bd62, #3ba555); box-shadow: 0 2px 8px rgba(69,189,98,0.25); }
.mission-claim-btn.claimed:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(69,189,98,0.4); }
.mission-claim-btn.ad-watch { background: linear-gradient(135deg, #f59e0b, #f57c00); box-shadow: 0 2px 8px rgba(245,158,11,0.25); animation: missionAdPulse 2s ease-in-out infinite; }
.mission-claim-btn.ad-watch:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(245,158,11,0.4); }
@keyframes missionAdPulse { 0%, 100% { box-shadow: 0 2px 8px rgba(245,158,11,0.25); } 50% { box-shadow: 0 4px 20px rgba(245,158,11,0.5); } }
.mission-claim-btn.can-claim { animation: missionClaimGlow 1.5s ease-in-out infinite; }
@keyframes missionClaimGlow { 0%, 100% { box-shadow: 0 2px 8px rgba(102,126,234,0.25); } 50% { box-shadow: 0 4px 24px rgba(102,126,234,0.6), 0 0 40px rgba(102,126,234,0.2); } }
.mission-reset-info { font-size: 12px; color: var(--fb-text-gray); text-align: center; padding: 10px; border-top: 1px solid var(--fb-border); margin-top: 4px; font-style: italic; }
.missions-close-btn { display: block; width: calc(100% - 40px); margin: 0 auto 16px; padding: 12px; background: var(--fb-input-bg); border: 1px solid var(--fb-border); border-radius: 12px; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--fb-text-main); transition: all 0.2s; }
.missions-close-btn:hover { background: #f0284910; border-color: #f02849; color: #f02849; }
/* AD WATCH POPUP */
/* AD WATCH POPUP (reuses missions-overlay & missions-modal) */
.adwatch-ring-wrap {
    position: relative;
    width: 120px;
    height: 120px;
}
.adwatch-ring {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.adwatch-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    position: absolute;
    top: 0;
    left: 0;
}
.adwatch-ring-bg { fill: none; stroke: #e5e7eb; stroke-width: 5; }
.adwatch-ring-progress {
    fill: none;
    stroke: url(#adwatchGrad);
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.9s linear;
}
.adwatch-ring-label {
    text-align: center;
    z-index: 1;
}
.adwatch-ring-label span {
    display: block;
    font-size: 36px;
    font-weight: 900;
    color: #1f2937;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.adwatch-ring-label small {
    font-size: 10px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.adwatch-reward {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 20px;
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.2);
    font-size: 14px;
    font-weight: 700;
    color: #d97706;
}
.adwatch-reward svg { width: 16px; height: 16px; flex-shrink: 0; }
#adwatchRewardText.pop { animation: checkinPop .4s ease; display: inline-block; }
.adwatch-ad-box {
    width: 100%;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #f3f4f6;
    border-radius: 12px;
    border: 1px dashed #d1d5db;
    font-size: 13px;
    color: #9ca3af;
    font-weight: 500;
}
.adwatch-ad-box.has-ad { border-style: solid; background: transparent; padding: 0; min-height: auto; }
.adwatch-ad-box.has-ad .adwatch-ad-spinner,
.adwatch-ad-box.has-ad span { display: none; }
.adwatch-ad-spinner {
    width: 32px;
    height: 32px;
    animation: adwatchSpin 1s linear infinite;
}
.adwatch-ad-spinner circle:last-child { stroke-dasharray: 75 25; }
@keyframes adwatchSpin { to { transform: rotate(360deg); } }
@keyframes checkinPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }

[data-theme="dark"] .adwatch-ring-bg { stroke: #374151; }
[data-theme="dark"] .adwatch-ring-label span { color: #f3f4f6; }
[data-theme="dark"] .adwatch-ring-label small { color: #6b7280; }
[data-theme="dark"] .adwatch-ad-box { background: #1f2937; border-color: #374151; color: #6b7280; }

/* CHECK-IN SYSTEM */
.checkin-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; backdrop-filter: blur(4px); }
.checkin-overlay.hidden { display: none; }
.checkin-modal { background: var(--fb-white); border-radius: 20px; max-width: 420px; width: 100%; overflow: hidden; box-shadow: 0 25px 60px rgba(0,0,0,0.3); animation: checkinModalIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
@keyframes checkinModalIn { from { transform: translateY(40px) scale(0.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.checkin-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); padding: 24px 20px 20px; text-align: center; color: white; position: relative; overflow: hidden; }
.checkin-header::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 60%); animation: checkinHeaderGlow 3s ease-in-out infinite; pointer-events: none; }
@keyframes checkinHeaderGlow { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 1; } }
.checkin-header svg { width: 52px; height: 52px; display: block; margin: 0 auto 8px; fill: white; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2)); position: relative; z-index: 1; }
.checkin-header h3 { margin: 0; font-size: 19px; position: relative; z-index: 1; }
.checkin-header p { margin: 4px 0 0; font-size: 13px; opacity: 0.9; position: relative; z-index: 1; }
.checkin-streak-info { display: flex; justify-content: space-between; padding: 12px 20px; background: var(--fb-input-bg); border-bottom: 1px solid var(--fb-border); font-size: 13px; color: var(--fb-text-gray); }
.checkin-streak-info span { font-weight: 700; color: #667eea; }
.checkin-days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; padding: 16px 20px; }
.checkin-day { text-align: center; padding: 12px 4px; border-radius: 12px; background: var(--fb-input-bg); border: 2px solid transparent; transition: all 0.3s; position: relative; overflow: hidden; }
.checkin-day:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.checkin-day .day-label { font-size: 11px; font-weight: 600; color: var(--fb-text-gray); margin-bottom: 4px; }
.checkin-day .day-reward { font-size: 12px; font-weight: 700; color: #f59e0b; }
.checkin-day.current { border-color: #667eea; background: rgba(102,126,234,0.12); animation: checkinDayPulse 1.5s ease-in-out infinite; }
.checkin-day.current .day-label { color: #667eea; }
.checkin-day.current .day-reward { color: #667eea; }
@keyframes checkinDayPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(102,126,234,0.2); } 50% { box-shadow: 0 0 0 6px rgba(102,126,234,0); } }
.checkin-day.checked { border-color: #45bd62; background: rgba(69,189,98,0.1); }
.checkin-day.checked .day-label { color: #45bd62; }
.checkin-day.checked .day-check { display: flex; align-items: center; justify-content: center; margin-top: 3px; }
.checkin-day .day-check { display: none; }
.checkin-day .day-check svg { width: 16px; height: 16px; fill: #45bd62; }
.checkin-btn { display: block; width: calc(100% - 40px); margin: 0 auto 12px; padding: 14px; border: none; border-radius: 12px; font-weight: 700; font-size: 15px; cursor: pointer; background: linear-gradient(135deg, #667eea, #764ba2); color: white; transition: all 0.3s; box-shadow: 0 4px 16px rgba(102,126,234,0.3); }
.checkin-btn:disabled { background: var(--fb-border); color: var(--fb-text-gray); cursor: not-allowed; box-shadow: none; transform: none; }
.checkin-btn:not(:disabled):hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 24px rgba(102,126,234,0.45); }
.checkin-btn:not(:disabled):active { transform: translateY(0) scale(0.98); }
.checkin-week-streak { text-align: center; padding: 8px 20px 16px; border-top: 1px solid var(--fb-border); }
.checkin-week-streak h4 { margin: 8px 0; font-size: 14px; color: var(--fb-text-name); display: flex; align-items: center; justify-content: center; gap: 6px; }
.checkin-week-streak h4 svg { width: 18px; height: 18px; fill: #f59e0b; }
.checkin-week-streak .streak-milestones { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.checkin-week-streak .milestone-badge { padding: 6px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; background: var(--fb-input-bg); border: 1px solid var(--fb-border); color: var(--fb-text-gray); transition: all 0.3s; }
.checkin-week-streak .milestone-badge:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.checkin-week-streak .milestone-badge.achieved { background: linear-gradient(135deg, #667eea, #764ba2); color: white; border-color: transparent; }
.checkin-week-streak .milestone-badge.claimable { background: linear-gradient(135deg, #f59e0b, #f57c00); color: white; border-color: transparent; cursor: pointer; animation: checkinClaimPulse 1.5s ease-in-out infinite; }
.checkin-week-streak .milestone-badge.claimable:hover { transform: translateY(-2px) scale(1.05); }
@keyframes checkinClaimPulse { 0%, 100% { box-shadow: 0 2px 8px rgba(245,158,11,0.25); } 50% { box-shadow: 0 4px 20px rgba(245,158,11,0.5); } }
.checkin-close-btn { display: block; width: calc(100% - 40px); margin: 0 auto 16px; padding: 12px; background: var(--fb-input-bg); border: 1px solid var(--fb-border); border-radius: 12px; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--fb-text-main); transition: all 0.2s; }
.checkin-close-btn:hover { background: #f0284910; border-color: #f02849; color: #f02849; }
 
 /* ===== FRIENDS PAGE CSS ===== */
.friend-row { display:flex; align-items:center; gap:20px; padding:12px 8px; border-bottom:1px solid var(--fb-border); cursor:pointer; transition:0.2s; border-radius:8px; }
.friend-row:hover { background:var(--fb-input-bg); padding-left:12px; padding-right:12px; }
.friend-row .friend-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; flex-shrink:0; display:block; }
.friend-row .friend-info { flex:1; min-width:0; }
.friend-row .friend-name { font-weight:600; font-size:15px; color:var(--fb-text-name); }
.friend-row .friend-status { font-size:12px; color:var(--fb-text-gray); display:flex; align-items:center; gap:5px; margin-top:6px; }
.friend-row .friend-status .dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
.friend-row .friend-status .dot.online { background:#45bd62; }
.friend-row .friend-status .dot.offline { background:#f02849; }
.friend-row .friend-status.online { color:#45bd62; }
.friend-row .friend-status.offline { color:var(--fb-text-gray); }

/* ===== CHAT PAGE CSS ===== */
#chatMessagesPage .chat-msg-block { display:flex; gap:8px; align-items:flex-end; max-width:85%; }
#chatMessagesPage .chat-msg-block.msg-me { margin-left:auto; flex-direction:row-reverse; }
#chatMessagesPage .chat-msg-block img.chat-avatar-img { width:28px; height:28px; border-radius:50%; object-fit:cover; }
#chatMessagesPage .chat-bubble { padding:10px 14px; border-radius:18px; font-size:14px; line-height:1.4; overflow-wrap:break-word; word-break:normal; max-width:100%; }
#chatMessagesPage .chat-msg-block.msg-me .chat-bubble { background:var(--fb-chat-me); color:#ffffff; border-bottom-right-radius:4px; }
#chatMessagesPage .chat-msg-block.msg-them .chat-bubble { background:var(--fb-chat-them); color:var(--fb-text-main); border-bottom-left-radius:4px; }
#chatMessagesPage .chat-bubble .youtube-embed-container { border-radius:8px; overflow:hidden; margin-top:4px; }
#chatMessagesPage .chat-bubble .youtube-embed-container iframe { width:100%; }
#chatMessagesPage .chat-msg-block.msg-me .chat-bubble .youtube-embed-container iframe { border-radius:4px; }
#chatMessagesPage .chat-msg-block.msg-them .chat-bubble .youtube-embed-container iframe { border-radius:4px; }
/* Chat page header avatar */
#chatPage .new-page-top-bar .chat-header-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
#   /* ===== SAVE PROFILE BUTTON ===== */
#saveProfileBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(24,119,242,0.4);
}
#saveProfileBtn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(24,119,242,0.3);
}

/* ===== SEARCH OVERLAY ===== */
.search-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 99999; background: var(--fb-bg);
    display: flex; flex-direction: column;
    animation: searchOverlayIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-overlay.hidden { display: none; }
@keyframes searchOverlayIn {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.search-overlay-header {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top));
    background: var(--fb-white); border-bottom: 1px solid var(--fb-border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.search-overlay-close {
    background: var(--fb-input-bg); border: none;
    width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: 0.2s;
}
.search-overlay-close:hover { background: #d8dadf; }
.search-overlay-close svg { width: 24px; height: 24px; fill: var(--fb-text-gray); }
.search-overlay-input-wrap {
    flex: 1; display: flex; align-items: center;
    background: var(--fb-input-bg); border-radius: 24px;
    padding: 0 16px; border: 2px solid transparent;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.search-overlay-input-wrap:focus-within {
    border-color: var(--fb-blue);
    box-shadow: 0 0 0 4px rgba(24,119,242,0.12);
}
.search-overlay-input-wrap svg {
    width: 22px; height: 22px; fill: var(--fb-text-gray);
    flex-shrink: 0; margin-right: 10px;
}
.search-overlay-input {
    flex: 1; border: none; background: transparent;
    padding: 14px 0; font-size: 17px; outline: none;
    color: var(--fb-text-main); min-width: 0;
}
.search-overlay-input::placeholder { color: var(--fb-text-gray); }
.search-overlay-body {
    flex: 1; overflow-y: auto; padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; align-items: center;
}
.search-overlay-welcome {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; flex: 1; text-align: center;
    padding: 40px 20px; animation: searchWelcomeFade 0.6s ease 0.2s both;
}
@keyframes searchWelcomeFade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.search-overlay-welcome svg {
    width: 80px; height: 80px; fill: var(--fb-border);
    margin-bottom: 16px; animation: searchIconPulse 2s ease-in-out infinite;
}
@keyframes searchIconPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 1; }
}
.search-overlay-welcome h2 {
    font-size: 20px; color: var(--fb-text-name); margin: 0 0 8px;
    font-weight: 700;
}
.search-overlay-welcome p {
    font-size: 14px; color: var(--fb-text-gray); margin: 0;
    max-width: 280px; line-height: 1.5;
}
.search-overlay-hints {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    margin-top: 20px;
}
.search-hint-chip {
    background: var(--fb-white); border: 1px solid var(--fb-border);
    padding: 8px 16px; border-radius: 20px; font-size: 13px;
    color: var(--fb-text-gray); cursor: pointer;
    transition: all 0.25s; display: flex; align-items: center; gap: 6px;
}
.search-hint-chip:hover {
    border-color: var(--fb-blue); color: var(--fb-blue);
    transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.search-hint-chip svg { width: 16px; height: 16px; fill: currentColor; }
.search-overlay-loading {
    display: none; flex-direction: column; align-items: center;
    justify-content: center; flex: 1; gap: 12px;
}
.search-overlay-loading.active { display: flex; }
.search-overlay-loading svg {
    width: 48px; height: 48px; animation: searchSpin 1s linear infinite;
}
@keyframes searchSpin { to { transform: rotate(360deg); } }

/* ===== SEARCH RESULTS PAGE ===== */
.search-results-page {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 99999; background: var(--fb-bg);
    display: flex; flex-direction: column;
    animation: searchResultsIn 0.35s ease;
}
.search-results-page.hidden { display: none; }
@keyframes searchResultsIn { from { opacity: 0; } to { opacity: 1; } }
.search-results-header {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top));
    background: var(--fb-white); border-bottom: 1px solid var(--fb-border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06); flex-shrink: 0;
}
.search-results-back {
    background: none; border: none; width: 40px; height: 40px;
    border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: 0.2s;
}
.search-results-back:hover { background: var(--fb-input-bg); }
.search-results-back svg { width: 24px; height: 24px; fill: var(--fb-text-gray); }
.search-results-query {
    flex: 1; font-size: 18px; font-weight: 700; color: var(--fb-text-name);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-results-count {
    font-size: 13px; color: var(--fb-text-gray); font-weight: 500;
    white-space: nowrap;
}
.search-results-body {
    flex: 1; overflow-y: auto; padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.search-results-empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; flex: 1; text-align: center;
    padding: 60px 20px; color: var(--fb-text-gray);
}
.search-results-empty svg { width: 64px; height: 64px; fill: var(--fb-border); margin-bottom: 12px; }
.search-results-empty h3 { font-size: 18px; color: var(--fb-text-name); margin: 0 0 6px; }
.search-results-empty p { font-size: 14px; margin: 0; }
.search-result-item {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; background: var(--fb-white);
    border: 1px solid var(--fb-border); border-radius: 14px;
    margin-bottom: 8px; cursor: pointer;
    transition: all 0.25s; animation: searchResultItemIn 0.3s ease both;
}
.search-result-item:hover {
    border-color: var(--fb-blue); transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.search-result-item:nth-child(1) { animation-delay: 0.05s; }
.search-result-item:nth-child(2) { animation-delay: 0.1s; }
.search-result-item:nth-child(3) { animation-delay: 0.15s; }
.search-result-item:nth-child(4) { animation-delay: 0.2s; }
.search-result-item:nth-child(5) { animation-delay: 0.25s; }
.search-result-item:nth-child(6) { animation-delay: 0.3s; }
.search-result-item:nth-child(7) { animation-delay: 0.35s; }
.search-result-item:nth-child(8) { animation-delay: 0.4s; }
.search-result-item:nth-child(9) { animation-delay: 0.45s; }
.search-result-item:nth-child(10) { animation-delay: 0.5s; }
@keyframes searchResultItemIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
.search-result-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0; background: var(--fb-input-bg);
}
.search-result-info { flex: 1; min-width: 0; }
.search-result-name {
    font-size: 16px; font-weight: 700; color: var(--fb-text-name);
    display: flex; align-items: center; gap: 8px;
}
.search-result-username {
    font-size: 13px; color: var(--fb-text-gray); margin-top: 2px;
}
.search-result-status {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600; margin-top: 3px;
}
.search-result-status .dot {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.search-result-status .dot.online { background: #45bd62; }
.search-result-status .dot.offline { background: #f02849; }
.search-result-status.online { color: #45bd62; }
.search-result-status.offline { color: var(--fb-text-gray); }
.search-result-action {
    padding: 8px 16px; border-radius: 8px; border: none;
    font-weight: 600; font-size: 13px; cursor: pointer;
    transition: all 0.2s; white-space: nowrap; flex-shrink: 0;
}
.search-result-action.friend { background: var(--fb-blue); color: white; }
.search-result-action.friend:hover { background: var(--fb-dark-blue); }
.search-result-action.message { background: var(--fb-input-bg); color: var(--fb-text-main); border: 1px solid var(--fb-border); }
.search-result-action.message:hover { background: var(--fb-border); }
.search-results-divider {
    text-align: center; font-size: 13px; color: var(--fb-text-gray);
    padding: 12px 0; font-weight: 600; position: relative;
}
.search-results-divider::before,
.search-results-divider::after {
    content: ''; position: absolute; top: 50%; width: 30%;
    height: 1px; background: var(--fb-border);
}
.search-results-divider::before { left: 0; }
.search-results-divider::after { right: 0; }

/* ===== BOTTOM NAVIGATION ===== */
.bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; width: 100%;
    z-index: 99;
    background: var(--fb-surface-container);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0 8px;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--fb-outline-variant);
    justify-content: center;
    align-items: center;
    gap: 0;
}
.bottom-nav.active { display: flex; }
.bottom-nav-btn {
    flex: 1; max-width: 120px;
    background: none; border: none;
    display: flex; flex-direction: column;
    align-items: center; gap: 4px;
    padding: 12px 0 16px;
    cursor: pointer;
    color: var(--fb-on-surface-variant);
    transition: all 0.2s;
    position: relative;
    border-radius: 16px;
    -webkit-tap-highlight-color: transparent;
}
.bottom-nav-btn::before {
    content: '';
    position: absolute;
    top: 4px; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 32px;
    background: var(--fb-secondary-container);
    border-radius: 16px;
    transition: width 0.3s cubic-bezier(0.2, 0, 0, 1);
    z-index: -1;
}
.bottom-nav-btn:hover { color: var(--fb-on-surface); }
.bottom-nav-btn.active { color: var(--fb-primary); font-weight: var(--fb-font-weight-semibold); }
.bottom-nav-btn.active::before { width: 64px; background: var(--fb-primary-container); }
.bottom-nav-btn svg {
    width: 24px; height: 24px; fill: currentColor;
    transition: fill 0.2s;
}
.bottom-nav-btn .nav-label {
    font-size: 12px; font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

/* ===== RESPONSIVE MOBILE FIXES ===== */
@media (max-width: 768px) {
    .navbar { padding: 6px 12px; gap: 6px; }
    .navbar .logo { font-size: 22px; }
    .bottom-nav-btn { max-width: 100px; padding: 4px 6px; }
    .bottom-nav-btn svg { width: 22px; height: 22px; }
    .bottom-nav-btn .nav-label { font-size: 10px; }
    .nav-right { gap: 8px; flex-shrink: 0; }
    .main-container { padding: 0 6px; margin: 10px auto; }
    .auth-box { padding: 20px 16px; }
    .auth-box input { width: 100%; box-sizing: border-box; }
    .profile-tabs-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .profile-tabs-nav::-webkit-scrollbar { display: none; }
    .profile-tab-btn { flex: none; white-space: nowrap; padding: 10px 14px; font-size: 13px; }
    .cover-container { height: 140px; }
    .profile-avatar-container { width: 100px; height: 100px; margin: -50px auto 0; }
    .profile-avatar-img { width: 96px; height: 96px; }
    .profile-info-block h2 { font-size: 20px; }
    .profile-reels-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .reel-card { height: 420px; max-width: 100%; }
    .reels-container { padding: 0; }
    .fr-container { max-width: 100%; }
    .modal-content { margin: 10px; width: calc(100% - 20px); max-height: 85vh; }
    .sidebar { width: 280px; }
    .new-page-body { padding: 12px; }
    .shop-items-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .yt-room-list { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .yt-video-container { max-height: 35vh; }
    .yt-mic-circle { width: 60px; height: 60px; }
    .yt-mic-circle svg { width: 30px; height: 30px; }
    .yt-mic-slot { min-width: 76px; }
    .wheel-container { width: 260px; height: 260px; }
    .tx-grid-select { grid-template-columns: repeat(2, 1fr); }
    .tx-triple-grid { grid-template-columns: repeat(3, 1fr); }
    .tx-numbers-grid { grid-template-columns: repeat(4, 1fr); }
    .mycoins-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .mycoins-amount { font-size: 36px; }
    .lottery-number-input { font-size: 20px; }
    .wheel-btn { padding: 12px 16px; font-size: 13px; }
    .game-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .rocket-notification-banner { padding: 8px 12px; flex-wrap: wrap; }
    .rocket-notif-marquee { font-size: 12px; }
    .admin-panel { padding: 10px; }
    .admin-coin-control { flex-direction: column; align-items: stretch; }
    .admin-coin-control input, .admin-coin-control select { width: 100%; }
    .email-input-group { flex-direction: column; }
    .email-input-group .send-code-btn { width: 100%; }
    .change-pwd-code-row { flex-direction: column; }
    .change-pwd-code-row .send-code-btn { width: 100%; }
    .report-form { padding: 14px; }
    .win-top-banner { padding: 10px 12px; flex-wrap: wrap; }
    .verify-popup-modal { max-width: 100%; margin: 10px; width: calc(100% - 20px); }
    .verify-popup-header { padding: 18px 16px 16px; }
    .verify-popup-body { padding: 16px; }
    .yt-gift-popup-box { width: calc(100% - 16px); padding: 16px; }
    .yt-gift-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .ban-popup-box { width: calc(100% - 32px); padding: 20px; }
    .checkin-days-grid { gap: 4px; padding: 12px; }
    .checkin-day { padding: 8px 2px; font-size: 11px; }
    .missions-modal { max-width: 100%; margin: 10px; width: calc(100% - 20px); }
    .missions-body { padding: 12px; }
    .adwatch-ring-wrap { width: 96px; height: 96px; }
    .adwatch-ring-label span { font-size: 28px; }
    .adwatch-ad-box { min-height: 90px; }
    .post-media { max-height: 300px; }
    .post-video { max-height: 300px; }
    .comment-content-wrap { max-width: 90%; }
    .chat-messages { height: 260px; }
    .chat-msg-block { max-width: 90%; }
    .yt-popup-box { width: calc(100% - 32px); padding: 18px; }
    .tx-chat-container { height: 200px; }
    .youtube-touch-overlay { height: calc(100% - 40px); }
    .reel-youtube-click-overlay { height: calc(100% - 36px); }
    .search-overlay-welcome svg { width: 70px; height: 70px; }
    .search-hint-chip { font-size: 12px; padding: 6px 14px; }
    .bottom-nav-btn { max-width: 100px; padding: 4px 6px; }
    .bottom-nav-btn svg { width: 22px; height: 22px; }
    .bottom-nav-btn .nav-label { font-size: 10px; }
    .bottom-nav { padding: 4px 0; }
    .main-container { padding: 0 6px 64px; }
}

@media (max-width: 480px) {
    .navbar { padding: 4px 8px; }
    .navbar .logo { font-size: 18px; }
    .nav-tabs-center .tab-nav-btn { font-size: 12px; padding: 4px 8px; }
    .menu-btn { width: 32px; height: 32px; font-size: 16px; }
    .nav-right { gap: 6px; }
    .nav-user img { width: 28px; height: 28px; }
    .main-container { padding: 0 4px; }
    .feed-form, .post-card, .profile-card { padding: 10px; }
    .post-text { font-size: 14px; }
    .post-header img { width: 36px; height: 36px; }
    .reel-card { height: 360px; }
    .cover-container { height: 120px; }
    .profile-avatar-container { width: 80px; height: 80px; margin: -40px auto 0; }
    .profile-avatar-img { width: 76px; height: 76px; border-width: 3px; }
    .profile-info-block h2 { font-size: 18px; }
    .profile-reels-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
    .profile-reel-item { padding-top: 120%; }
    .room-tabs { flex-direction: column; gap: 4px; }
    .room-tab-btn { padding: 8px; font-size: 13px; }
    .wheel-container { width: 220px; height: 220px; }
    .wheel-btn { padding: 10px 12px; font-size: 12px; }
    .shop-items-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .shop-item { padding: 10px; }
    .yt-room-list { grid-template-columns: 1fr; }
    .game-grid { grid-template-columns: 1fr; gap: 8px; }
    .game-card { padding: 14px 12px; }
    .mycoins-stats { grid-template-columns: repeat(2, 1fr); }
    .mycoins-amount { font-size: 28px; }
    .lb-card { padding: 10px 12px; gap: 8px; }
    .lb-rank { font-size: 16px; min-width: 28px; }
    .tx-chips-container { gap: 4px; }
    .tx-chip-btn { font-size: 11px; padding: 4px 10px; }
    .tx-dice-display { font-size: 26px; gap: 10px; }
    .admin-result-selector { padding: 8px; }
    .admin-dice-grid { grid-template-columns: repeat(3, 1fr); }
    .admin-dice-btn { width: 32px; height: 32px; font-size: 12px; }
    .search-overlay-header { padding: 8px 12px; gap: 8px; }
    .search-overlay-input { font-size: 15px; padding: 12px 0; }
    .search-overlay-input-wrap svg { width: 18px; height: 18px; }
    .search-overlay-welcome svg { width: 60px; height: 60px; }
    .search-overlay-welcome h2 { font-size: 17px; }
    .search-overlay-hints { flex-direction: column; align-items: center; }
    .search-hint-chip { font-size: 12px; padding: 6px 14px; }
    .search-result-item { padding: 10px 12px; gap: 10px; }
    .search-result-avatar { width: 44px; height: 44px; }
    .search-result-name { font-size: 14px; }
    .search-result-action { font-size: 12px; padding: 6px 12px; }
    .search-results-header { padding: 8px 12px; }
    .search-results-query { font-size: 15px; }
    .rocket-notification-banner { padding: 6px 10px; min-height: 44px; }
    .rocket-notif-icon svg { width: 28px; height: 28px; }
    .rocket-notif-marquee { font-size: 11px; }
    .verify-popup-code-value { font-size: 24px; letter-spacing: 4px; }
    .yt-gift-grid { grid-template-columns: repeat(2, 1fr); }
    .yt-gift-item { padding: 8px 4px; }
    .yt-gift-item-icon { height: 32px; }
    .yt-gift-item-icon svg { width: 28px; height: 28px; }
    .checkin-days-grid { grid-template-columns: repeat(7, 1fr); gap: 3px; }
    .checkin-day { padding: 6px 2px; }
    .checkin-day .day-label { font-size: 9px; }
    .checkin-day .day-reward { font-size: 10px; }
    .missions-tab { font-size: 12px; padding: 8px; }
    .mission-item { padding: 10px 12px; gap: 8px; }
    .mission-icon { width: 36px; height: 36px; }
    .mission-icon svg { width: 20px; height: 20px; }
    .settings-item { padding: 10px 12px; gap: 10px; }
    .settings-item-title { font-size: 13px; }
    .post-media { max-height: 240px; }
    .post-video { max-height: 240px; }
    .comment-item img.c-avatar { width: 28px; height: 28px; }
    .comment-bubble { padding: 6px 10px; font-size: 12px; }
    .chat-messages { height: 220px; }
    .chat-header { padding: 8px 12px; }
    .lottery-number-input { font-size: 18px; letter-spacing: 2px; }
    .lottery-prize-table { font-size: 11px; }
    .lottery-prize-table th, .lottery-prize-table td { padding: 4px; }
    .lottery-countdown { font-size: 22px; }
    .shop-tab { font-size: 11px; padding: 8px 4px; }
    .yt-room-tab { font-size: 10px; padding: 6px 4px; }
    .new-page-top-bar { padding: 6px 10px; }
    .new-page-top-bar .np-title { font-size: 15px; }
    .bottom-nav-btn { max-width: 80px; padding: 4px 4px; }
    .bottom-nav-btn svg { width: 20px; height: 20px; }
    .bottom-nav-btn .nav-label { font-size: 9px; }
    .main-container { padding: 0 4px 60px; }
    .reel-action-icon-btn { width: 36px; height: 36px; }
    .reel-action-icon-btn svg { width: 16px; height: 16px; }
    .reel-overlay-bottom { padding: 14px 40px 14px 12px; }
    .reel-author-info img { width: 26px; height: 26px; }
}

/* Fix extremely small screens / very low DPI */
@media (max-width: 360px) {
    .navbar .logo { font-size: 16px; }
    .bottom-nav-btn { max-width: 70px; padding: 2px 2px; }
    .bottom-nav-btn svg { width: 18px; height: 18px; }
    .bottom-nav-btn .nav-label { font-size: 8px; }
    .auth-box { padding: 14px 10px; }
    .auth-box .logo-large { font-size: 32px; }
    .auth-box h2 { font-size: 16px; }
    .auth-box input { padding: 10px; font-size: 14px; }
    .feed-form, .post-card, .profile-card { padding: 8px; }
    .post-text { font-size: 13px; }
    .reel-card { height: 300px; }
    .profile-avatar-container { width: 64px; height: 64px; margin: -32px auto 0; }
    .profile-avatar-img { width: 60px; height: 60px; }
    .cover-container { height: 100px; }
    .shop-items-grid { grid-template-columns: 1fr; }
    .game-grid { grid-template-columns: 1fr; }
    .yt-gift-grid { grid-template-columns: repeat(2, 1fr); }
    .checkin-day .day-label { font-size: 8px; }
    .checkin-day .day-reward { font-size: 9px; }
    .win-banner-amount { font-size: 16px; }
    .win-banner-name { font-size: 13px; }
}

/* FRIEND CHAT PROFILE MODAL */
.fc-profile-overlay { position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:9999;display:flex;align-items:center;justify-content:center;animation:fcFadeIn .2s ease; }
.fc-profile-card { background:var(--fb-bg);border-radius:16px;width:90%;max-width:360px;max-height:90vh;overflow-y:auto;padding:24px 20px;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,0.2);animation:fcSlideUp .3s ease; }
.fc-profile-card .fc-avatar { width:100px;height:100px;border-radius:50%;object-fit:cover;margin:0 auto 12px;display:block;border:3px solid var(--fb-blue); }
.fc-profile-card .fc-name { font-size:20px;font-weight:700;color:var(--fb-text-name);margin:0 0 6px; }
.fc-profile-card .fc-bio { font-size:14px;color:var(--fb-text-gray);margin:0 0 20px;line-height:1.4;padding:0 8px;min-height:20px; }
.fc-block-btn { display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 0;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;position:relative;overflow:hidden;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);color:#fff; }
.fc-block-btn.block { background:linear-gradient(135deg,#e53935,#c62828);box-shadow:0 4px 16px rgba(229,57,53,0.3); }
.fc-block-btn.unblock { background:linear-gradient(135deg,#43a047,#2e7d32);box-shadow:0 4px 16px rgba(67,160,71,0.3); }
.fc-block-btn:hover { transform:translateY(-1px); }
.fc-block-btn:active { transform:scale(0.97); }
.fc-block-btn.loading { pointer-events:none;opacity:0.85;transform:scale(0.97); }
.fc-block-btn.loading::after { content:'';position:absolute;inset:0;background:rgba(0,0,0,0.2);border-radius:12px; }
.fc-block-btn .fc-btn-icon { width:20px;height:20px;fill:#fff;flex-shrink:0;transition:transform .4s ease; }
.fc-block-btn.loading .fc-btn-icon { animation:fcSpin 0.8s linear infinite; }
.fc-block-btn .fc-btn-text { position:relative;z-index:1; }
.fc-block-btn.loading .fc-btn-icon { animation:fcSpin 0.8s linear infinite, fcPulse 0.8s ease-in-out infinite; }
.fc-block-notice { display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;margin:8px 0;background:#fff0f0;border:1px solid #ffcdd2;border-radius:12px;font-size:13px;color:#c62828;font-weight:500; }
.fc-block-notice svg { width:18px;height:18px;fill:#c62828;flex-shrink:0; }
@keyframes fcFadeIn { from{opacity:0} to{opacity:1} }
@keyframes fcSlideUp { from{transform:translateY(30px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes fcSpin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
@keyframes fcPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

/* NOTIFICATIONS PAGE */
.notif-list { display:flex;flex-direction:column;gap:12px;padding:16px;max-width:600px;margin:0 auto; }
.notif-empty { text-align:center;padding:60px 20px;color:var(--fb-text-gray);font-size:14px; }
.notif-card { background:var(--fb-white);border:1px solid var(--fb-border);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;transition:all .3s cubic-bezier(0.4,0,0.2,1);box-shadow:0 2px 8px rgba(0,0,0,0.04);position:relative;overflow:hidden; }
.notif-card::before { content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,#7c3aed,#3b82f6);border-radius:0 2px 2px 0; }
.notif-card:hover { transform:translateX(4px);box-shadow:0 4px 16px rgba(124,58,237,0.12);border-color:#7c3aed40; }
.notif-card-top { display:flex;align-items:center;gap:12px; }
.notif-card-avatar { width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid #7c3aed40;flex-shrink:0; }
.notif-card-name { font-weight:700;font-size:15px;color:var(--fb-text-name); }
.notif-card-msg { font-size:13px;color:var(--fb-text-gray);line-height:1.4;margin:0; }
.notif-card-actions { display:flex;gap:8px;margin-top:4px; }
.notif-card-actions button { flex:1;padding:4px 0;border:none;border-radius:6px;font-weight:700;font-size:14px;cursor:pointer;transition:all .2s cubic-bezier(0.4,0,0.2,1);display:flex;align-items:center;justify-content:center;gap:5px;position:relative;overflow:hidden; }
.notif-accept-btn { background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;box-shadow:0 2px 8px rgba(59,130,246,0.2); }
.notif-accept-btn:hover { filter:brightness(1.1); }
.notif-accept-btn:active { transform:scale(0.97); }
.notif-accept-btn.loading { pointer-events:none;opacity:0.8;transform:scale(0.97); }
.notif-accept-btn.loading::after { content:'';position:absolute;inset:0;background:rgba(0,0,0,0.15);border-radius:6px; }
.notif-accept-btn .btn-icon { width:14px;height:14px;fill:#fff; }
.notif-accept-btn.loading .btn-icon { animation:fcSpin .6s linear infinite; }
.notif-reject-btn .btn-icon { width:14px;height:14px;fill:#fff; }
.notif-reject-btn { background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 2px 8px rgba(239,68,68,0.2); }
.notif-reject-btn:hover { filter:brightness(1.1); }
.notif-reject-btn:active { transform:scale(0.97); }
.notif-reject-btn.loading { pointer-events:none;opacity:0.8;transform:scale(0.97); }
.notif-reject-btn.loading::after { content:'';position:absolute;inset:0;background:rgba(0,0,0,0.15);border-radius:6px; }
.notif-reject-btn.loading .btn-icon { animation:fcSpin .6s linear infinite; }

/* FRIEND REQUEST POPUP */
.fr-popup-overlay { position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.55);z-index:100000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);animation:fcFadeIn .2s ease; }
.fr-popup-box { background:linear-gradient(135deg,#1e1b4b,#312e81);border-radius:20px;padding:32px 24px;max-width:340px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.3),0 0 0 1px rgba(124,58,237,0.2);animation:fcSlideUp .3s ease;position:relative;overflow:hidden; }
.fr-popup-box::before { content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 20%,rgba(124,58,237,0.15),transparent 60%),radial-gradient(circle at 70% 80%,rgba(59,130,246,0.1),transparent 60%);pointer-events:none; }
.fr-popup-icon { width:56px;height:56px;margin:0 auto 16px;position:relative; }
.fr-popup-icon svg { width:100%;height:100%; }
.fr-popup-icon circle.bg { fill:none;stroke:#374151;stroke-width:3; }
.fr-popup-icon circle.progress { fill:none;stroke:url(#frGrad);stroke-width:3;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .8s ease; }
.fr-popup-icon .check { fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round; }
.fr-popup-title { font-size:18px;font-weight:800;color:#fff;margin:0 0 8px;position:relative; }
.fr-popup-msg { font-size:13px;color:#a5b4fc;margin:0 0 20px;line-height:1.5;position:relative; }
.fr-popup-status { display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:10px;font-size:13px;font-weight:600;margin-bottom:16px;position:relative; }
.fr-popup-status.sending { background:rgba(59,130,246,0.15);color:#93c5fd; }
.fr-popup-status.success { background:rgba(34,197,94,0.15);color:#86efac; }
.fr-popup-status.fail { background:rgba(239,68,68,0.15);color:#fca5a5; }
.fr-popup-spinner { width:16px;height:16px;border:2px solid rgba(255,255,255,0.2);border-top-color:#fff;border-radius:50%;animation:fcSpin .6s linear infinite; }
.fr-popup-close-btn { width:100%;padding:12px 0;border:1px solid rgba(255,255,255,0.15);border-radius:12px;background:transparent;color:#a5b4fc;font-size:14px;font-weight:600;cursor:pointer;transition:all .25s;position:relative;margin-top:4px; }
.fr-popup-close-btn:hover { background:rgba(255,255,255,0.05);color:#fff; }
.fr-popup-btn-primary { width:100%;padding:12px 0;border:none;border-radius:12px;background:var(--fb-primary,#1877f2);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .25s;position:relative; }
.fr-popup-btn-primary:hover { background:#166fe5; }
.fr-popup-btn-secondary { width:100%;padding:12px 0;border:none;border-radius:12px;background:#ef4444;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .25s; }
.fr-popup-btn-secondary:hover { background:#dc2626; }

/* ═══ STORIES ═══ */
.stories-section { padding:12px 0 8px; }
.stories-scroll { display:flex; gap:12px; overflow-x:auto; padding:0 12px 8px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.stories-scroll::-webkit-scrollbar { display:none; }
.story-circle { flex:0 0 72px; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; scroll-snap-align:start; }
.story-avatar-ring { width:64px; height:64px; border-radius:50%; padding:3px; background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045); }
.story-avatar-ring.no-story { background:var(--fb-border); }
.story-avatar-ring img { width:100%; height:100%; border-radius:50%; border:3px solid var(--fb-bg); object-fit:cover; }
.story-add-btn { position:relative; }
.story-add-btn::after { content:'+'; position:absolute; bottom:0; right:0; width:20px; height:20px; background:var(--fb-blue); color:#fff; border-radius:50%; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--fb-bg); }
.story-name { font-size:11px; color:var(--fb-text-gray); text-align:center; max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Story Viewer */
.story-viewer-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:9999; display:flex; align-items:center; justify-content:center; }
.story-viewer-container { width:100%; max-width:420px; height:100vh; max-height:750px; background:#000; border-radius:16px; position:relative; overflow:hidden; display:flex; flex-direction:column; }
.story-viewer-header { display:flex; align-items:center; gap:10px; padding:12px 16px; position:absolute; top:0; left:0; right:0; z-index:2; background:linear-gradient(180deg,rgba(0,0,0,0.7),transparent); }
.story-viewer-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid #fff; }
.story-viewer-name { color:#fff; font-size:14px; font-weight:600; }
.story-viewer-time { color:rgba(255,255,255,0.7); font-size:11px; }
.story-viewer-close { position:absolute; top:12px; right:12px; background:none; border:none; color:#fff; font-size:22px; cursor:pointer; z-index:3; }
.story-viewer-body { flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.story-viewer-body img { max-width:100%; max-height:100%; object-fit:contain; }
.story-viewer-body .story-text-display { color:#fff; font-size:20px; font-weight:700; text-align:center; padding:24px; text-shadow:0 2px 8px rgba(0,0,0,0.5); line-height:1.4; }
.story-viewer-progress { position:absolute; top:0; left:0; right:0; height:3px; background:rgba(255,255,255,0.3); z-index:3; }
.story-viewer-progress-fill { height:100%; background:#fff; transition:width 0.1s linear; border-radius:0 2px 2px 0; }

/* Story Create */
.story-create-popup { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:9998; display:flex; align-items:center; justify-content:center; }
.story-create-card { background:var(--fb-card); border-radius:16px; padding:20px; width:90%; max-width:380px; box-shadow:0 8px 32px rgba(0,0,0,0.25); }

/* ═══ POST REACTIONS ═══ */
.reactions-container { position:relative; display:inline-block; z-index:auto; }
.reaction-popup { position:absolute; top:calc(100% + 6px); left:0; background:var(--fb-card); border-radius:28px; padding:6px 10px; display:flex; gap:2px; box-shadow:0 4px 20px rgba(0,0,0,0.25); z-index:200; white-space:nowrap; opacity:0; transform:translateY(-8px) scale(0.9); pointer-events:none; transition:opacity 0.2s ease, transform 0.2s ease; }
.reaction-popup.show { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.reaction-emoji { font-size:30px; cursor:pointer; transition:transform 0.15s ease; padding:4px 5px; border-radius:50%; user-select:none; -webkit-user-select:none; }
.reaction-emoji:hover { transform:scale(1.4) translateY(-6px); }
.reaction-emoji.selected { background:rgba(24,119,242,0.15); }
.post-reactions-summary { display:flex; gap:4px; align-items:center; flex-wrap:wrap; padding:0 16px 4px; }
.reaction-summary-item { font-size:16px; }
.reaction-count { font-size:12px; color:var(--fb-text-gray); margin-left:-2px; }

/* ═══ AUTH POPUPS (White Background) ═══ */
.auth-popup-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:10000; display:flex; align-items:center; justify-content:center; }
[data-theme="dark"] .auth-popup-overlay { background:rgba(0,0,0,0.85); }
.auth-popup-card { background:#fff; border-radius:16px; padding:24px; width:90%; max-width:400px; box-shadow:0 8px 32px rgba(0,0,0,0.2); }
.auth-popup-card input { border-color:#ddd !important; background:#f8f9fa !important; }
[data-theme="dark"] .auth-popup-card { background:var(--fb-card); }
[data-theme="dark"] .auth-popup-card input { border-color:var(--fb-border) !important; background:var(--fb-input-bg) !important; }

/* ═══ PRIVACY BADGE ═══ */
.privacy-badge { font-size:11px; color:var(--fb-text-gray); display:inline-flex; align-items:center; gap:3px; }

/* ═══ NOTIFICATION BADGE ═══ */
.notif-badge { position:absolute;top:-4px;right:-6px;min-width:18px;height:18px;border-radius:9px;background:#f02849;color:#fff;font-size:11px;font-weight:700;align-items:center;justify-content:center;border:2px solid var(--fb-white);padding:0 4px; }
[data-theme="dark"] .notif-badge { border-color:#1a1a2e; }

/* ═══ POST ACTION ICON BUTTONS ═══ */
.post-actions-right { display:flex;gap:4px; }
.action-btn.icon-btn { background:none;border:none;padding:6px;cursor:pointer;border-radius:50%;transition:background 0.2s;display:flex;align-items:center;justify-content:center; }
.action-btn.icon-btn:hover { background:var(--fb-surface-container-high); }

/* ═══ COMMENT POPUP ═══ */
.comment-popup-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:10000;display:flex;align-items:flex-end;justify-content:center; }
[data-theme="dark"] .comment-popup-overlay { background:rgba(0,0,0,0.6); }
.comment-popup { background:var(--fb-surface-container-lowest);width:100%;max-width:none;height:85vh;max-height:85vh;border-radius:var(--fb-shape-xl) var(--fb-shape-xl) 0 0;display:flex;flex-direction:column;overflow:hidden;animation:cpSlideUp 0.3s cubic-bezier(0.2,0,0,1); }
@keyframes cpSlideUp { from{transform:translateY(100%);opacity:0} to{transform:translateY(0);opacity:1} }
.comment-popup.closing { animation:cpSlideDown 0.3s ease forwards; }
@keyframes cpSlideDown { from{transform:translateY(0);opacity:1} to{transform:translateY(100%);opacity:0} }
.comment-popup-header { display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--fb-border);flex-shrink:0; }
.comment-popup-title { font-size:16px;font-weight:700;color:var(--fb-text-name);flex-shrink:0; }
.comment-popup-close { width:32px;height:32px;border:none;border-radius:50%;background:var(--fb-surface-container-high);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--fb-text-main);transition:background 0.2s;flex-shrink:0; }
.comment-popup-close:hover { background:var(--fb-surface-container-highest); }
/* Comment filter toggle button (in header) */
.comment-filter-toggle {
    display:flex;align-items:center;gap:4px;
    margin-left:auto;flex-shrink:0;
    background:var(--fb-surface-container-high);border:1px solid var(--fb-outline-variant);
    border-radius:20px;padding:5px 10px;cursor:pointer;
    font-size:12px;font-weight:600;color:var(--fb-on-surface-variant);
    transition:all 0.2s;
}
.comment-filter-toggle:hover { background:var(--fb-surface-container-highest); }
.comment-filter-toggle svg { flex-shrink:0; }

/* Comment filter popup (above comment popup) */
.cf-overlay {
    position:fixed;inset:0;z-index:2147483647;
    background:rgba(0,0,0,0.35);display:flex;
    align-items:center;justify-content:center;
}
[data-theme="dark"] .cf-overlay { background:rgba(0,0,0,0.55); }
.cf-popup {
    background:var(--fb-white);border-radius:20px;
    width:min(88%, 360px);overflow:hidden;
    box-shadow:0 12px 48px rgba(0,0,0,0.25);
    animation:cfpSlideUp 0.25s cubic-bezier(0.2,0,0,1);
}
@keyframes cfpSlideUp {
    from{transform:translateY(24px) scale(0.96);opacity:0}
    to{transform:translateY(0) scale(1);opacity:1}
}
.cfp-header {
    padding:18px 20px 0;font-size:17px;font-weight:700;
    color:var(--fb-text-main);text-align:center;
}
.cfp-options { padding:16px 12px 8px;display:flex;flex-direction:column;gap:4px; }
.cfp-option {
    display:flex;align-items:center;gap:10px;
    padding:12px 14px;border-radius:14px;cursor:pointer;
    transition:background 0.2s;user-select:none;
}
.cfp-option:hover { background:var(--fb-surface-container-high); }
.cfp-option.selected {
    background:var(--fb-surface-container-highest);
    border:1.5px solid var(--fb-primary);
}
.cfp-option.selected .cfp-opt-check { display:block; }
.cfp-opt-check { display:none;margin-left:auto;color:var(--fb-primary);flex-shrink:0; }
.cfp-opt-icon { font-size:18px;flex-shrink:0; }
.cfp-opt-label { font-size:14px;font-weight:600;color:var(--fb-text-main);flex:1; }
.cfp-actions {
    display:flex;gap:10px;padding:8px 20px 18px;
}
.cfp-btn {
    flex:1;border:none;padding:11px 0;border-radius:14px;
    font-size:15px;font-weight:700;cursor:pointer;
    transition:filter 0.2s, background 0.2s;
}
.cfp-btn:hover { filter:brightness(1.08); }
.cfp-btn:active { transform:scale(0.98); }
.cfp-cancel { background:rgba(240,40,73,0.12);color:#e53935; }
.cfp-cancel:hover { background:rgba(240,40,73,0.2); }
.cfp-apply { background:var(--fb-primary);color:#fff; }
.comment-popup-body { flex:1;overflow-y:auto;padding:12px 16px;min-height:200px;display:flex;flex-direction:column; }
.cp-empty { text-align:center;padding:40px 20px;color:var(--fb-text-gray);font-size:14px;margin:auto 0; }
.comment-popup-reply-bar { display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--fb-surface-container-high);border-top:1px solid var(--fb-border);font-size:13px;color:var(--fb-text-gray);flex-shrink:0;overflow:hidden; }
.comment-popup-reply-bar.slide-in { animation:replyBarSlideIn 0.3s cubic-bezier(0.175,0.885,0.32,1.275) forwards; }
.comment-popup-reply-bar.slide-out { animation:replyBarSlideOut 0.25s ease-in forwards; }
.comment-popup-reply-bar span { flex:1; }
@keyframes replyBarSlideIn { 0%{transform:translateX(100%);opacity:0}100%{transform:translateX(0);opacity:1} }
@keyframes replyBarSlideOut { 0%{transform:translateX(0);opacity:1}100%{transform:translateX(-100%);opacity:0} }
.comment-popup-cancel-reply { background:none;border:none;font-size:16px;cursor:pointer;color:var(--fb-text-gray);padding:4px;border-radius:50%; }
.comment-popup-cancel-reply:hover { background:rgba(240,40,73,0.1);color:#f02849; }
.comment-popup-input-row { display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--fb-border);background:var(--fb-white);flex-shrink:0;position:relative; }
.comment-popup-input-row input { flex:1;padding:10px 14px;border:1px solid var(--fb-border);border-radius:24px;outline:none;background:var(--fb-input-bg);color:var(--fb-text-main);font-size:14px; }
.comment-popup-input-row input:focus { border-color:var(--fb-blue); }
.comment-popup-input-wrap { flex:1;position:relative; }
.comment-popup-input-wrap input { width:100%;padding:10px 50px 10px 14px;border:1px solid var(--fb-border);border-radius:24px;outline:none;background:var(--fb-input-bg);color:var(--fb-text-main);font-size:14px;box-sizing:border-box; }
.comment-popup-input-wrap input:focus { border-color:var(--fb-blue); }
.comment-popup-charcount { position:absolute;right:12px;bottom:6px;font-size:10px;color:var(--fb-text-gray);pointer-events:none; }
.comment-popup-send-btn { width:40px;height:40px;border:none;border-radius:50%;background:var(--fb-blue);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s; }
.comment-popup-send-btn:hover { filter:brightness(1.1); }
.comment-popup-reactions-btn { width:36px;height:36px;border:none;border-radius:50%;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s; }
.comment-popup-reactions-btn:hover { background:var(--fb-surface-container-high); }
.comment-popup-img-btn { width:36px;height:36px;border:none;border-radius:50%;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s; }
.comment-popup-img-btn:hover { background:var(--fb-surface-container-high); }
.comment-popup-sticker-btn { width:36px;height:36px;border:none;border-radius:50%;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s; }
.comment-popup-sticker-btn:hover { background:var(--fb-surface-container-high); }
.comment-popup-gift-btn { width:36px;height:36px;border:none;border-radius:50%;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s; }
.comment-popup-gift-btn:hover { background:var(--fb-surface-container-high); }
.comment-popup-img-preview { width:48px;height:48px;object-fit:contain;border-radius:0;display:block; }
.comment-popup-preview-wrap { display:flex;align-items:center;gap:8px;padding:4px 16px; }
.comment-media-preview { width:48px;height:48px;object-fit:contain;border-radius:6px;display:block; }
.comment-popup-preview-x { width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,0.4);border:none;color:#fff;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;line-height:1; }
.comment-popup-reaction-picker { position:absolute;bottom:100%;left:16px;background:var(--fb-card);border-radius:28px;padding:6px 10px;box-shadow:0 -4px 20px rgba(0,0,0,0.2);display:flex;gap:2px;z-index:10; }
.comment-popup-reaction-picker.hidden { display:none; }
/* ═══ COMMENT VIEW BUTTON ON POST CARDS ═══ */
.comment-view-btn { width:100%;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border:none;border-radius:8px;background:var(--fb-surface-container-high);color:var(--fb-text-gray);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s; }
.comment-view-btn:hover { background:var(--fb-surface-container-highest); }

/* ═══ COMMENT DELETE BUTTON ═══ */
.comment-content-wrap { display:flex;align-items:flex-start;gap:4px;flex:1; }
.comment-delete-btn { background:none;border:none;color:var(--fb-text-gray);font-size:12px;cursor:pointer;padding:2px 4px;border-radius:4px;opacity:0;transition:opacity 0.2s;flex-shrink:0;line-height:1; }
.comment-item:hover .comment-delete-btn { opacity:1; }
.comment-delete-btn:hover { color:#f02849;background:rgba(240,40,73,0.1); }
.pending-status { font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px;display:inline-block; }
.pending-status.sending { color:#f59e0b;background:rgba(245,158,11,0.15); }
.pending-status.sent { color:#22c55e;background:rgba(34,197,94,0.15); }
.pending-status.failed { color:#ef4444;background:rgba(239,68,68,0.15); }

/* ═══ COMMENT LOAD MORE ═══ */
.comment-load-more-wrap { text-align:center;padding:6px 0; }
.comment-load-more-btn { background:#16a34a;color:#fff;border:none;border-radius:20px;padding:6px 18px;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;box-shadow:0 2px 8px rgba(22,163,74,0.25); }
.comment-load-more-btn:hover { background:#15803d;transform:translateY(-1px);box-shadow:0 4px 12px rgba(22,163,74,0.35); }
.comment-load-more-btn:active { transform:scale(0.97); }

/* ═══ NOTIFICATION DELETE BUTTON ═══ */
.notif-delete-btn { position:absolute;top:8px;right:8px;width:24px;height:24px;border:none;border-radius:50%;background:transparent;color:var(--fb-text-gray);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;z-index:2;opacity:0; }
.notif-card:hover .notif-delete-btn { opacity:1; }
.notif-delete-btn:hover { background:rgba(240,40,73,0.1);color:#f02849; }

/* ═══ STICKER POPUP ═══ */
.stk-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:10001;display:flex;align-items:center;justify-content:center; }
.stk-overlay.hidden { display:none; }
.stk-popup { width:85%;max-width:480px;height:40%;max-height:400px;background:var(--fb-white);border-radius:var(--fb-shape-xl);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.25);animation:stkFadeIn 0.2s ease; }
@keyframes stkFadeIn { from { opacity:0;transform:scale(0.95); } to { opacity:1;transform:scale(1); } }
@keyframes stkFadeOut { from { opacity:1;transform:scale(1); } to { opacity:0;transform:scale(0.95); } }
.stk-popup.closing { animation:stkFadeOut 0.15s ease forwards; }
.stk-header { display:flex;align-items:center;padding:12px 16px;flex-shrink:0; }
.stk-header-left { width:120px;flex-shrink:0; }
.stk-header-title { flex:1;text-align:center;font-size:14px;font-weight:600;color:var(--fb-text-name); }
.stk-close-btn { width:32px;height:32px;border:none;border-radius:50%;background:var(--fb-surface-container-high);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--fb-text-main);flex-shrink:0; }
.stk-close-btn:hover { background:var(--fb-surface-container-highest); }
.stk-add-btn { background:var(--fb-blue);color:#fff;border:none;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background 0.2s; }
.stk-add-btn:hover { filter:brightness(1.1); }
.stk-divider { height:1px;background:var(--fb-border);margin:0 16px;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,0.1); }
.stk-body { flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:8px;-webkit-overflow-scrolling:touch; }
.stk-grid { display:flex;flex-direction:column;gap:8px; }
.stk-row { display:flex;gap:8px; }
.stk-item { flex:1;aspect-ratio:1;overflow:hidden;border-radius:8px;cursor:pointer;transition:transform 0.15s; }
.stk-item:hover { transform:scale(1.05); }
.stk-img { width:100%;height:100%;object-fit:cover;display:block;border-radius:8px; }
.stk-empty { text-align:center;color:var(--fb-text-gray);font-size:14px;padding:20px 0; }
.stk-load-more { display:block;margin:8px auto 0;padding:8px 24px;border:none;border-radius:20px;background:var(--fb-blue);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:background 0.2s; }
.stk-load-more.green { background:#2ecc40; }
.stk-load-more.hidden { display:none; }
.stk-load-more:hover { filter:brightness(1.1); }
.stk-tabs { display:flex;padding:0 16px;gap:0;flex-shrink:0; }
.stk-tab { flex:1;padding:8px;border:none;background:transparent;color:var(--fb-text-gray);font-size:13px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;transition:all 0.2s; }
.stk-tab.active { color:var(--fb-blue);border-bottom-color:var(--fb-blue); }
.stk-tab:hover { color:var(--fb-text-name); }
.stk-gif-search-row { display:flex;gap:8px;margin-bottom:8px; }
.stk-gif-search-row input { flex:1;padding:8px 12px;border:1px solid var(--fb-border);border-radius:20px;outline:none;background:var(--fb-input-bg);color:var(--fb-text-main);font-size:13px; }
.stk-gif-search-row input:focus { border-color:var(--fb-blue); }
.stk-gif-search-btn { width:36px;height:36px;border:none;border-radius:50%;background:var(--fb-blue);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px; }
.stk-gif-search-btn:hover { filter:brightness(1.1); }
.stk-gif-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:6px; }
.stk-gif-grid .stk-gif-item { border-radius:8px;overflow:hidden;cursor:pointer;position:relative;aspect-ratio:auto; }
.stk-gif-grid .stk-gif-item img { width:100%;display:block;border-radius:8px;transition:transform 0.15s; }
.stk-gif-grid .stk-gif-item:hover img { transform:scale(1.02); }
.stk-gif-empty { text-align:center;color:var(--fb-text-gray);font-size:13px;padding:20px 0;grid-column:1/-1; }
.stk-gif-loading { text-align:center;color:var(--fb-text-gray);font-size:13px;padding:12px 0;grid-column:1/-1; }
.stk-gif-error { text-align:center;color:#e53935;font-size:13px;padding:12px 0;grid-column:1/-1; }
.stk-item-wrap { position:relative;flex:1;aspect-ratio:1; }
.stk-del-btn { position:absolute;top:-4px;right:-4px;width:20px;height:20px;border:none;border-radius:50%;background:#e53935;color:#fff;font-size:12px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:2;box-shadow:0 1px 4px rgba(0,0,0,0.3);padding:0; }
.stk-item-wrap:hover .stk-del-btn { display:flex; }
.stk-del-btn:hover { background:#c62828; }

/* ═══ STICKER 1:1 IN COMMENTS ═══ */
.comment-sticker-preview { padding:4px 16px; }
.comment-sticker { max-width:200px;max-height:200px;object-fit:contain;border-radius:0;margin-top:4px;cursor:pointer;display:block; }
.comment-gift-line { display:inline-block;padding:2px 8px;border-radius:10px;background:#1a3a6b;color:#fff;font-size:10px;font-weight:700;margin:2px 0;white-space:nowrap; }
.comment-author-heart:hover { filter:brightness(1.2); }

/* ═══ CHAT MEDIA (unified) ═══ */
#chatMessagesPage .chat-media { max-width:200px;max-height:200px;object-fit:contain;border-radius:0;margin-top:4px;cursor:pointer;display:block; }
.chat-preview-inline { display:flex;align-items:center;gap:4px;flex-shrink:0; }
.chat-preview-inline.hidden { display:none; }
.chat-preview-thumb { width:48px;height:48px;object-fit:contain;border-radius:6px;display:block; }
.chat-preview-x { width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,0.5);border:none;color:#fff;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;line-height:1;margin-left:-8px; }

/* ─── GIFT BAR ABOVE COMMENT INPUT ─── */
.comment-gift-bar { display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--fb-surface-container-high);border-top:1px solid var(--fb-border);font-size:13px;color:var(--fb-text-main);flex-shrink:0;overflow:hidden; }
.comment-gift-bar.slide-in { animation:replyBarSlideIn 0.3s cubic-bezier(0.175,0.885,0.32,1.275) forwards; }
.comment-gift-bar.slide-out { animation:replyBarSlideOut 0.25s ease-in forwards; }
.comment-gift-bar .gift-bar-icon { font-size:16px;flex-shrink:0; }
.comment-gift-bar .gift-bar-text { flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

/* ═══ DELETE CONFIRM POPUP ═══ */
.delete-confirm-overlay { position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:99999;display:flex;align-items:center;justify-content:center;animation:dcFadeIn 0.2s ease; }
.delete-confirm-overlay.hidden { display:none; }
@keyframes dcFadeIn { 0%{opacity:0}100%{opacity:1} }
@keyframes dcSlideUp { 0%{transform:translateY(30px) scale(0.95);opacity:0}100%{transform:translateY(0) scale(1);opacity:1} }
@keyframes dcSlideDown { 0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(30px) scale(0.95);opacity:0} }
.delete-confirm-popup { background:var(--fb-white,#fff);border-radius:16px;padding:24px 20px 16px;max-width:340px;width:90%;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,0.2);animation:dcSlideUp 0.25s cubic-bezier(0.175,0.885,0.32,1.275) forwards; }
.delete-confirm-popup.close { animation:dcSlideDown 0.2s ease-in forwards; }
.delete-confirm-icon { margin-bottom:12px; }
.delete-confirm-title { font-size:17px;font-weight:700;color:var(--fb-text-name,#050505);margin-bottom:6px; }
.delete-confirm-text { font-size:13px;color:var(--fb-text-gray,#65676b);margin-bottom:20px;line-height:1.4; }
.delete-confirm-actions { display:flex;gap:10px; }
.delete-confirm-btn { flex:1;padding:11px 0;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:filter 0.2s,transform 0.1s; }
.delete-confirm-btn:active { transform:scale(0.97); }
.delete-confirm-btn:hover { filter:brightness(1.08); }
.delete-confirm-cancel { background:#fee2e2;color:#e53935; }
.delete-confirm-cancel:hover { background:#fecaca; }
.delete-confirm-ok { background:var(--fb-blue,#1877f2);color:#fff; }
.delete-confirm-ok:hover { background:#166fe5; }

/* ═══ RECALL MESSAGE POPUP ═══ */
.recall-popup-overlay { position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.55);z-index:100000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);animation:recallFadeIn 0.25s ease; }
.recall-popup-overlay.hidden { display:none; }
.recall-popup-box { background:var(--fb-surface-container-lowest,#fff);border-radius:20px;padding:28px 24px 20px;max-width:400px;width:90%;box-shadow:0 8px 40px rgba(0,0,0,0.25);text-align:center;animation:recallScaleIn 0.3s cubic-bezier(0.175,0.885,0.32,1.275); }
.recall-popup-header { margin-bottom:12px; }
.recall-popup-title { font-size:16px;font-weight:700;color:var(--fb-on-surface,#1a1a2e);margin-bottom:16px;line-height:1.4; }
.recall-popup-content { background:var(--fb-surface-container,#f0f2f5);border-radius:12px;padding:12px 14px;margin-bottom:20px;font-size:13px;color:var(--fb-text-main);text-align:left;word-break:break-word;max-height:120px;overflow-y:auto;line-height:1.4; }
.recall-popup-content img { max-width:80px;max-height:80px;object-fit:contain;border-radius:6px;margin-top:6px;display:block; }
.recall-popup-content .recalled-text { font-style:italic;color:var(--fb-text-gray,#65676b); }
.recall-popup-actions { display:flex;gap:10px;justify-content:center; }
.recall-popup-actions button { padding:10px 24px;border-radius:12px;font-weight:600;font-size:14px;cursor:pointer;border:none;transition:all 0.2s;min-width:100px; }
.recall-btn-cancel { background:#fee2e2;color:#e53935; }
.recall-btn-cancel:hover { background:#fecaca;transform:scale(1.02); }
.recall-btn-confirm { background:var(--fb-blue,#1877f2);color:#fff; }
.recall-btn-confirm:hover { background:#166fe5;transform:scale(1.02); }
@keyframes recallFadeIn { from{opacity:0} to{opacity:1} }
@keyframes recallScaleIn { from{opacity:0;transform:scale(0.7) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes recallFadeOut { from{opacity:1} to{opacity:0} }
@keyframes recallScaleOut { from{opacity:1;transform:scale(1) translateY(0)} to{opacity:0;transform:scale(0.7) translateY(20px)} }

/* ═══ RECALL BUTTON ON CHAT MESSAGES ═══ */
.recall-btn { position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,0.5);border:none;color:#fff;font-size:10px;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0;line-height:1;z-index:2;transition:background 0.2s; }
.recall-btn:hover { background:#e53935; }
.chat-msg-block .chat-bubble { position:relative; }
.chat-msg-block .chat-bubble:hover .recall-btn { display:flex; }
.recalled-text { font-style:italic;color:var(--fb-text-gray,#65676b);font-size:13px; }
.recalled-bubble { opacity:0.7; }

/* ═══ PURCHASE LOADING / SUCCESS POPUP ═══ */
.purchase-popup-overlay { position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:100001;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);animation:purchaseFadeIn 0.25s ease; }
.purchase-popup-overlay.hidden { display:none; }
.purchase-popup-box { background:var(--fb-surface-container-lowest,#fff);border-radius:24px;padding:40px 32px 28px;max-width:340px;width:88%;box-shadow:0 12px 48px rgba(0,0,0,0.3);text-align:center;animation:purchaseScaleIn 0.35s cubic-bezier(0.175,0.885,0.32,1.275); }
.purchase-loading-spinner { margin-bottom:28px;display:flex;justify-content:center; }
.purchase-spinner-svg { width:72px;height:72px;animation:purchaseSpin 1.2s linear infinite; }
.purchase-spinner-track { fill:none;stroke:var(--fb-border,#e4e6eb);stroke-width:6; }
.purchase-spinner-active { fill:none;stroke:url(#purchaseGradient);stroke-width:6;stroke-linecap:round;stroke-dasharray:226;stroke-dashoffset:56;transform-origin:center; }
.purchase-loading-text { font-size:15px;font-weight:600;color:var(--fb-text-main);line-height:1.5;animation:purchasePulse 1.5s ease-in-out infinite; }
.purchase-success-icon { margin-bottom:16px;animation:purchaseBounce 0.5s ease; }
.purchase-success-text { font-size:16px;font-weight:700;color:var(--fb-text-name,#1a1a2e);margin-bottom:24px;line-height:1.5; }
.purchase-success-btn { padding:12px 36px;border-radius:14px;font-weight:700;font-size:15px;cursor:pointer;border:none;background:var(--fb-blue,#1877f2);color:#fff;transition:all 0.2s;box-shadow:0 4px 12px rgba(24,119,242,0.3); }
.purchase-success-btn:hover { background:#166fe5;transform:scale(1.04);box-shadow:0 6px 20px rgba(24,119,242,0.4); }
.purchase-success-btn:active { transform:scale(0.97); }
@keyframes purchaseFadeIn { from{opacity:0} to{opacity:1} }
@keyframes purchaseScaleIn { from{opacity:0;transform:scale(0.7) translateY(30px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes purchaseFadeOut { from{opacity:1} to{opacity:0} }
@keyframes purchaseScaleOut { from{opacity:1;transform:scale(1) translateY(0)} to{opacity:0;transform:scale(0.7) translateY(-20px)} }
@keyframes purchaseSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes purchasePulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
@keyframes purchaseBounce { 0%{transform:scale(0)} 50%{transform:scale(1.2)} 100%{transform:scale(1)} }