/* Fandock - Glasmorphism Dark Theme, Mobile-First */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    --bg: #0a0a1a;
    --bg2: #0d0d24;
    --bg3: #12123a;
    --surface: rgba(255, 255, 255, 0.05);
    --surface2: rgba(255, 255, 255, 0.08);
    --surface-hover: rgba(255, 255, 255, 0.12);
    --glass: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-border-hover: rgba(255, 255, 255, 0.2);
    --accent: #7c3aed;
    --accent2: #a855f7;
    --accent-glow: rgba(124, 58, 237, 0.4);
    --neon: #00d4ff;
    --neon-glow: rgba(0, 212, 255, 0.3);
    --text: #e8eaf6;
    --text2: #8b92b3;
    --text3: #5a6080;
    --border: rgba(255, 255, 255, 0.08);
    --danger: #ef4444;
    --danger-bg: rgba(239, 68, 68, 0.15);
    --success: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.15);
    --gold: #fbbf24;
    --gold-glow: rgba(251, 191, 36, 0.4);
    --radius: 16px;
    --radius-sm: 10px;
    --radius-xs: 6px;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4);
    --blur: blur(20px);
    --blur-heavy: blur(40px);
    --nav-height: 60px;
    --bottom-nav-height: 64px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; }

body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    background-image:
        radial-gradient(ellipse at 20% 0%, rgba(124, 58, 237, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(30, 0, 80, 0.3) 0%, transparent 70%);
    background-attachment: fixed;
    padding-bottom: calc(var(--bottom-nav-height) + 16px);
}

a { color: var(--accent2); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--neon); }

::selection { background: var(--accent); color: white; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--glass-border-hover); }

/* ===== NAVBAR (Top) ===== */
.navbar {
    background: rgba(10, 10, 26, 0.8);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border-bottom: 1px solid var(--glass-border);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0 1rem;
}
.nav-container {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    overflow: hidden;
}
.nav-logo {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text) !important;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--accent2), var(--neon));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Desktop nav links */
.nav-links {
    display: none;
    gap: 0.25rem;
    flex-wrap: nowrap;
    overflow: hidden;
}
.nav-links a {
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
    font-size: 1.2rem;
    color: var(--text2);
    transition: all var(--transition);
    position: relative;
}
.nav-links a:hover {
    background: var(--surface2);
    color: var(--text);
    transform: translateY(-1px);
}

/* Bottom Navigation (Mobile) */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(10, 10, 26, 0.9);
    backdrop-filter: var(--blur-heavy);
    -webkit-backdrop-filter: var(--blur-heavy);
    border-top: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: var(--bottom-nav-height);
    padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text3);
    font-size: 1.4rem;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    min-width: 44px;
    min-height: 44px;
    text-decoration: none;
    position: relative;
}
.bottom-nav a span {
    font-size: 0.6rem;
    margin-top: 2px;
    font-weight: 500;
    letter-spacing: 0.3px;
}
.bottom-nav a:hover,
.bottom-nav a.active {
    color: var(--accent2);
}
.bottom-nav a.nav-create {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: white;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    margin-top: -16px;
    box-shadow: 0 4px 20px var(--accent-glow);
    font-size: 1.5rem;
}
.bottom-nav a.nav-create span { display: none; }
.bottom-nav a.nav-create:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px var(--accent-glow);
}

/* More menu (mobile) */
.nav-more-menu {
    display: none;
    position: fixed;
    bottom: calc(var(--bottom-nav-height) + 8px);
    right: 12px;
    background: rgba(20, 20, 50, 0.95);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 0.5rem;
    z-index: 1001;
    min-width: 180px;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.2s ease;
}
.nav-more-menu.open { display: block; }
.nav-more-menu a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 1rem;
    color: var(--text);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    transition: background var(--transition);
}
.nav-more-menu a:hover { background: var(--surface2); }

@keyframes slideUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== CONTAINER ===== */
.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* ===== TYPOGRAPHY ===== */
h1 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -0.3px;
}
h2 {
    font-size: 1.15rem;
    margin: 1.5rem 0 0.8rem;
    color: var(--text2);
    font-weight: 600;
    letter-spacing: -0.2px;
}
h3 { font-weight: 600; }

/* ===== ALERTS ===== */
.alert {
    padding: 0.85rem 1.1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    backdrop-filter: var(--blur);
    animation: fadeIn 0.3s ease;
}
.alert.error {
    background: var(--danger-bg);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}
.alert.success {
    background: var(--success-bg);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #86efac;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== AUTH FORMS ===== */
.auth-form {
    max-width: 420px;
    margin: 2rem auto;
    background: var(--glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    padding: 2.5rem 2rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.auth-form h1 {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}
.auth-link {
    text-align: center;
    margin-top: 1.2rem;
    color: var(--text2);
    font-size: 0.9rem;
}

/* ===== FORM ELEMENTS ===== */
label {
    display: block;
    margin: 1rem 0 0.4rem;
    color: var(--text2);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="datetime-local"],
textarea, select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 1rem;
    font-family: inherit;
    transition: all var(--transition);
    backdrop-filter: blur(8px);
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow), 0 0 20px rgba(124, 58, 237, 0.15);
    background: rgba(255, 255, 255, 0.06);
}
input::placeholder, textarea::placeholder {
    color: var(--text3);
}
textarea { resize: vertical; min-height: 80px; }
select option { background: var(--bg2); color: var(--text); }

input[type="file"] {
    color: var(--text2);
    margin: 0.3rem 0;
    font-size: 0.9rem;
    display: none; /* Hidden, replaced by upload zones */
}

/* ===== BUTTONS ===== */
button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    margin-top: 1rem;
    transition: all var(--transition);
    min-height: 44px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
button:hover, .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--accent-glow);
    filter: brightness(1.1);
}
button:active, .btn:active {
    transform: translateY(0);
}
.btn-accent { background: linear-gradient(135deg, var(--accent), var(--accent2)); }
.btn-secondary {
    background: var(--surface2);
    border: 1px solid var(--glass-border);
}
.btn-secondary:hover {
    background: var(--surface-hover);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    min-height: 36px;
}
.btn-danger {
    background: linear-gradient(135deg, #dc2626, #ef4444);
}

/* Loading state */
button.loading {
    pointer-events: none;
    opacity: 0.7;
}
button.loading::after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-left: 0.5rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== UPLOAD ZONES ===== */
.upload-zone {
    border: 2px dashed var(--glass-border);
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    background: rgba(255, 255, 255, 0.02);
    position: relative;
    overflow: hidden;
}
.upload-zone:hover, .upload-zone.dragover {
    border-color: var(--accent);
    background: rgba(124, 58, 237, 0.08);
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.1);
}
.upload-zone .upload-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    display: block;
    opacity: 0.6;
}
.upload-zone .upload-text {
    color: var(--text2);
    font-size: 0.9rem;
}
.upload-zone .upload-hint {
    color: var(--text3);
    font-size: 0.8rem;
    margin-top: 0.3rem;
}
.upload-zone .file-name {
    color: var(--accent2);
    font-size: 0.85rem;
    margin-top: 0.5rem;
    font-weight: 500;
    display: none;
}
.upload-zone .file-name.show { display: block; }

/* Upload Previews */
.upload-preview {
    margin-top: 0.8rem;
    display: none;
    position: relative;
}
.upload-preview.show { display: block; }
.upload-preview img {
    max-width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
}
.upload-preview.round {
    width: 100px;
    height: 100px;
    margin: 0.8rem auto 0;
}
.upload-preview.round img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.upload-preview.wide img {
    aspect-ratio: 16/4;
    object-fit: cover;
    width: 100%;
}
.upload-preview.thumb img {
    aspect-ratio: 16/9;
    object-fit: cover;
    max-width: 300px;
}

/* ===== POST GRID ===== */
/* === Feed List (vertical, like Instagram) === */
.feed-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto;
}
.feed-item {
    background: var(--glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--transition);
}
.feed-item:hover {
    border-color: var(--glass-border-hover);
}
.feed-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
}
.feed-author {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text);
}
.feed-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--glass-border);
}
.feed-author-name {
    font-weight: 600;
    font-size: 0.9rem;
}
.creator-star {
    text-shadow: 0 0 8px var(--gold-glow);
}
.feed-item-body {
    display: block;
    color: var(--text);
}
.feed-thumbnail {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    background: linear-gradient(135deg, var(--bg2), var(--bg3));
}
.feed-thumbnail-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}
.feed-thumbnail-placeholder.live { background: linear-gradient(135deg, #1a0a0a, #2a0a1a); }
.feed-thumbnail-placeholder.video { background: linear-gradient(135deg, #0a0a2a, #0a1a3a); }
.feed-thumbnail-placeholder.poll { background: linear-gradient(135deg, #0a1a0a, #0a2a1a); }
.feed-title {
    padding: 0.75rem 1rem 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}
.feed-item-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem 0.75rem;
    font-size: 0.85rem;
    color: var(--text2);
}
.feed-action {
    color: var(--text2);
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-xs);
    transition: all var(--transition);
}
.feed-action:hover {
    background: var(--surface2);
    color: var(--text);
}
.feed-action.liked { color: #ef4444; }
.feed-time {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text3);
}

/* Legacy compat */
.creator-name {
    color: var(--accent2) !important;
    font-weight: 500;
}

/* Old grid (search/discover pages) */
.post-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.post-card {
    background: var(--glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all var(--transition);
    display: block;
    color: var(--text);
    position: relative;
}
.post-card:hover {
    transform: translateY(-4px);
    border-color: var(--glass-border-hover);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.15);
}
.post-thumbnail {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
.post-thumbnail.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background: linear-gradient(135deg, var(--bg2), var(--bg3));
}
.post-card-info {
    padding: 1rem;
}
.post-card-info h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}
.post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    color: var(--text2);
}

/* Creator badge */
.creator-badge {
    color: var(--gold);
    text-shadow: 0 0 8px var(--gold-glow);
    font-size: 0.9em;
}

.post-type-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-xs);
    display: inline-block;
    margin-bottom: 0.5rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}
.post-type-badge.live {
    background: rgba(220, 38, 38, 0.2);
    color: #fca5a5;
    border: 1px solid rgba(220, 38, 38, 0.3);
}
.post-type-badge.video {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.post-type-badge.poll {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.post-type-badge.standard {
    background: var(--surface2);
    color: var(--text2);
    border: 1px solid var(--glass-border);
}

/* ===== POST DETAIL ===== */
.post-detail { max-width: 720px; }
.post-detail h1 {
    font-size: 1.8rem;
    margin: 0.8rem 0;
    line-height: 1.3;
}
.post-detail-img {
    width: 100%;
    border-radius: var(--radius);
    margin: 1rem 0;
    border: 1px solid var(--glass-border);
}
.post-creator {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.post-date { color: var(--text2); font-size: 0.85rem; }
.post-content {
    margin: 1rem 0;
    line-height: 1.8;
    color: var(--text);
    font-size: 1rem;
}
.post-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background: var(--glass);
    backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    margin: 0.5rem 0;
    word-break: break-all;
    transition: all var(--transition);
    font-size: 0.9rem;
}
.post-link:hover {
    border-color: var(--accent);
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.1);
}
.live-schedule {
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid rgba(220, 38, 38, 0.3);
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    margin: 0.5rem 0;
    font-weight: 500;
}
.video-platform {
    color: var(--text2);
    margin: 0.5rem 0;
    font-size: 0.9rem;
}

/* ===== LIKE & ACTIONS ===== */
.post-actions { margin: 1.2rem 0; }
.like-btn, .reply-btn {
    background: var(--glass);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    color: var(--text);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
    transition: all var(--transition);
    min-height: 40px;
    margin-top: 0;
}
.like-btn:hover, .reply-btn:hover {
    border-color: var(--glass-border-hover);
    background: var(--surface2);
    transform: translateY(-1px);
}
.like-btn.liked {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

/* ===== COMMENTS ===== */
.comments-section { margin-top: 2.5rem; }
.comments-section h2 {
    margin-top: 0;
    margin-bottom: 1rem;
}
.comment-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.comment-form input {
    flex: 1;
}
.comment-form button { margin-top: 0; }

.comment {
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    padding: 1rem;
    border-radius: var(--radius);
    margin-bottom: 0.6rem;
    transition: border-color var(--transition);
}
.comment:hover {
    border-color: var(--glass-border-hover);
}
.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
}
.comment-header a { font-weight: 600; }
.comment-date { color: var(--text3); font-size: 0.8rem; }
.comment p { font-size: 0.95rem; line-height: 1.5; }
.comment-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
}
.comment-actions .like-btn,
.comment-actions .reply-btn {
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    min-height: 32px;
}
.reply-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
}
.reply-form input {
    flex: 1;
    padding: 0.5rem 0.8rem;
    font-size: 0.9rem;
}
.reply-form button {
    margin-top: 0;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

/* ===== POLL ===== */
.poll-options { margin: 1.2rem 0; }
.poll-option { margin-bottom: 0.6rem; }
.poll-option button {
    width: 100%;
    text-align: left;
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    padding: 0.9rem 1.2rem;
    border-radius: var(--radius-sm);
    margin-top: 0;
    font-weight: 500;
    transition: all var(--transition);
}
.poll-option button:hover {
    background: rgba(124, 58, 237, 0.15);
    border-color: var(--accent);
    transform: translateX(4px);
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.1);
}
.poll-result {
    position: relative;
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 0.9rem 1.2rem;
    overflow: hidden;
}
.poll-bar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.25), rgba(168, 85, 247, 0.15));
    border-radius: var(--radius-sm);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.poll-result span {
    position: relative;
    z-index: 1;
    font-weight: 500;
    font-size: 0.95rem;
}

/* Dynamic poll options (create) */
.poll-option-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
    animation: fadeIn 0.2s ease;
}
.poll-option-row input { flex: 1; margin: 0; }
.poll-option-remove {
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background: var(--danger-bg);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--danger);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
    flex-shrink: 0;
}
.poll-option-remove:hover {
    background: rgba(239, 68, 68, 0.3);
    transform: scale(1.1);
}
.add-poll-option {
    background: var(--surface2);
    border: 1px dashed var(--glass-border);
    color: var(--text2);
    width: 100%;
    padding: 0.7rem;
    margin-top: 0.5rem;
}
.add-poll-option:hover {
    border-color: var(--accent);
    color: var(--accent2);
    background: rgba(124, 58, 237, 0.08);
}

/* ===== PROFILE ===== */
.profile-page { overflow: hidden; max-width: 100%; width: 100%; box-sizing: border-box; }
.profile-page > * { max-width: 100%; box-sizing: border-box; }
.profile-banner {
    height: 200px;
    background: var(--bg3);
    background-size: cover;
    background-position: center;
    border-radius: var(--radius);
    margin-bottom: -40px;
    border: 1px solid var(--glass-border);
    position: relative;
    overflow: hidden;
}
.profile-banner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(10, 10, 26, 0.8), transparent);
}
.profile-banner.default {
    background: linear-gradient(135deg, var(--accent), var(--bg3), rgba(0, 212, 255, 0.3));
}
.profile-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0 1rem;
    position: relative;
    z-index: 1;
}
.profile-avatar img, .avatar-placeholder {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--bg);
    background: var(--surface2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.profile-info { flex: 1; min-width: 200px; }
.profile-info h1 {
    margin-bottom: 0.3rem;
    font-size: 1.4rem;
}
.bio {
    color: var(--text2);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
}
.profile-stats {
    display: flex;
    gap: 1.2rem;
    color: var(--text2);
    font-size: 0.9rem;
    flex-wrap: wrap;
}
.follow-btn {
    padding: 0.5rem 1.4rem;
    min-height: 40px;
}
.follow-btn.following {
    background: var(--surface2);
    border: 1px solid var(--glass-border);
}
.follow-btn.following:hover {
    background: var(--danger-bg);
    border-color: rgba(239, 68, 68, 0.3);
}

/* ===== TYPE SELECTION GRID ===== */
.type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.type-card {
    background: var(--glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    padding: 1.5rem;
    border-radius: var(--radius);
    text-align: center;
    color: var(--text);
    transition: all var(--transition);
    text-decoration: none;
}
.type-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 8px 30px var(--accent-glow);
    background: rgba(124, 58, 237, 0.08);
}
.type-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.6rem;
}
.type-card h3 {
    margin-bottom: 0.3rem;
    font-size: 1rem;
}
.type-card p {
    color: var(--text2);
    font-size: 0.85rem;
}

/* ===== CREATE FORM ===== */
.create-form { max-width: 600px; }

/* ===== SEARCH ===== */
.search-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.search-form input {
    flex: 1;
    background: var(--glass);
    backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
}
.search-form button { margin-top: 0; }

/* ===== CREATOR LIST ===== */
.creator-list, .creator-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.creator-card {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    color: var(--text);
    transition: all var(--transition);
    text-decoration: none;
}
.creator-card:hover {
    background: var(--surface-hover);
    border-color: var(--glass-border-hover);
    transform: translateX(4px);
}
.creator-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface2);
    font-size: 1.2rem;
    border: 1px solid var(--glass-border);
}
.creator-avatar img { width: 100%; height: 100%; object-fit: cover; }
.muted {
    color: var(--text2);
    font-size: 0.85rem;
    margin-left: auto;
    white-space: nowrap;
}

.top-lists {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
}
.top-list {
    background: var(--glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    padding: 1.2rem;
    border-radius: var(--radius);
}
.top-list h2 { margin-top: 0; }

/* ===== DISCOVER ===== */
.discover-card {
    background: var(--glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1rem;
    transition: all var(--transition);
}
.discover-card:hover {
    border-color: var(--glass-border-hover);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
.discover-banner {
    height: 100px;
    background-size: cover;
    background-position: center;
}
.discover-banner.default {
    background: linear-gradient(135deg, var(--accent), var(--bg3), rgba(0, 212, 255, 0.3));
}
.discover-info {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: -30px;
}
.discover-info .creator-avatar {
    width: 60px; height: 60px;
    border: 3px solid var(--bg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.discover-stats {
    display: flex;
    gap: 1rem;
    color: var(--text2);
    font-size: 0.85rem;
    margin: 0.5rem 0;
}

/* ===== DASHBOARD ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.stat-card {
    background: var(--glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    padding: 1.5rem;
    border-radius: var(--radius);
    text-align: center;
    transition: all var(--transition);
}
.stat-card:hover {
    border-color: var(--glass-border-hover);
    transform: translateY(-2px);
}
.stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent2), var(--neon));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.stat-card span:last-child {
    font-size: 0.8rem;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}
.dashboard-actions { margin-bottom: 1.5rem; }
.post-table { display: flex; flex-direction: column; gap: 0.5rem; }
.post-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem;
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    flex-wrap: wrap;
    transition: all var(--transition);
}
.post-row:hover {
    border-color: var(--glass-border-hover);
    background: var(--surface-hover);
}
.post-row a { flex: 1; min-width: 150px; font-weight: 500; }
.post-row span { font-size: 0.85rem; color: var(--text2); }

/* ===== SETTINGS ===== */
.settings-section {
    background: var(--glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    padding: 1.5rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}
.settings-section h2 { margin-top: 0; }
.preview-img {
    max-width: 100px;
    border-radius: var(--radius-sm);
    margin-top: 0.5rem;
    border: 1px solid var(--glass-border);
}
.preview-img.wide {
    max-width: 100%;
    border-radius: var(--radius-sm);
}

/* ===== EMPTY STATE ===== */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text2);
}
.empty-state p { font-size: 1.05rem; }
.subtitle {
    color: var(--text2);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

/* ===== FOOTER ===== */
.site-footer {
    text-align: center;
    padding: 2rem;
    color: var(--text3);
    font-size: 0.8rem;
    letter-spacing: 0.3px;
}

/* ===== RESPONSIVE ===== */

/* Tablet+ */
@media (min-width: 640px) {
    .post-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
    .top-lists {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

/* Desktop */
@media (min-width: 768px) {
    .nav-links { display: flex; }
    .bottom-nav { display: none; }
    body { padding-bottom: 0; }
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .profile-banner { height: 220px; }
    h1 { font-size: 1.8rem; }
}

@media (max-width: 767px) {
    .profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .profile-stats { justify-content: center; }
    .profile-info { text-align: center; }
    .type-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(3, 1fr); }
    .container { padding: 1rem 0.8rem; }
}

@media (max-width: 400px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .type-grid { grid-template-columns: 1fr; }
}

/* ===== TOAST NOTIFICATIONS ===== */
.toast {
    position: fixed;
    bottom: calc(var(--bottom-nav-height) + 16px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 50, 0.95);
    backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 0.7rem 1.4rem;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 2000;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}
.toast.show {
    opacity: 1;
    visibility: visible;
}

@media (min-width: 768px) {
    .toast { bottom: 24px; }
}

/* ===== DOCKS SYSTEM ===== */
.nav-docks {
    background: var(--surface2) !important;
    border-radius: 20px !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--gold) !important;
    border: 1px solid rgba(251, 191, 36, 0.2);
    white-space: nowrap;
}
.nav-docks:hover {
    border-color: var(--gold) !important;
    box-shadow: 0 0 12px var(--gold-glow);
}

.docks-page { max-width: 700px; margin: 0 auto; }
.docks-page h1 { text-align: center; margin: 1.5rem 0 0.3rem; font-size: 1.8rem; }
.docks-subtitle { text-align: center; color: var(--text2); margin-bottom: 2rem; }

.docks-balance-card {
    display: flex; align-items: center; gap: 1rem;
    background: var(--glass); backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border); border-radius: var(--radius);
    padding: 1.2rem 1.5rem; margin-bottom: 1.5rem;
}
.docks-balance-icon { font-size: 2.5rem; }
.docks-balance-info { display: flex; flex-direction: column; }
.docks-balance-label { font-size: 0.85rem; color: var(--text2); }
.docks-balance-amount { font-size: 1.6rem; font-weight: 800; color: var(--gold); }

/* Success animation */
.docks-success {
    position: relative; overflow: hidden;
    background: var(--success-bg); border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: var(--radius); padding: 1rem 1.5rem; margin-bottom: 1.5rem;
    text-align: center;
}
.docks-success-glow {
    position: absolute; inset: 0;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.4), transparent 70%);
    opacity: 0; transition: opacity 0.5s;
}
.docks-success.animate .docks-success-glow {
    animation: successPulse 1.5s ease-in-out 2;
}
@keyframes successPulse {
    0%, 100% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}
.docks-success-text { position: relative; z-index: 1; }
.docks-success-icon { font-size: 1.5rem; display: block; margin-bottom: 0.3rem; }
.docks-success-text strong { font-size: 1.3rem; color: var(--success); display: block; }
.docks-success-text span { color: var(--text2); font-size: 0.9rem; }

/* Package grid */
.docks-packages {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem; margin-bottom: 2.5rem;
}
.dock-package {
    position: relative; display: flex; flex-direction: column; align-items: center;
    background: var(--glass); backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border); border-radius: var(--radius);
    padding: 1.5rem 1rem; text-align: center;
    transition: all var(--transition); cursor: pointer;
}
.dock-package:hover {
    border-color: var(--glass-border-hover);
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}
.dock-package.popular { border-color: rgba(251, 191, 36, 0.3); }
.dock-package.popular:hover { border-color: var(--gold); box-shadow: 0 8px 32px var(--gold-glow); }
.dock-package.highlight { border-color: rgba(124, 58, 237, 0.3); }
.dock-package.highlight:hover { border-color: var(--accent2); box-shadow: 0 8px 32px var(--accent-glow); }
.dock-package.mega {
    border-color: rgba(0, 212, 255, 0.3);
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(124, 58, 237, 0.08));
}
.dock-package.mega:hover { border-color: var(--neon); box-shadow: 0 8px 32px var(--neon-glow); }

.dock-badge {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, var(--gold), #f59e0b);
    color: #000; font-size: 0.65rem; font-weight: 700;
    padding: 2px 10px; border-radius: 10px; white-space: nowrap;
}
.dock-badge.mega-badge { background: linear-gradient(135deg, var(--neon), var(--accent2)); color: #fff; }

.dock-package-icon { font-size: 2.2rem; margin-bottom: 0.5rem; }
.dock-package-amount { font-size: 1.8rem; font-weight: 800; color: var(--text); line-height: 1; }
.dock-package-label { font-size: 0.8rem; color: var(--text2); margin: 0.3rem 0 0.8rem; }
.dock-buy-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: white; border: none; border-radius: 20px;
    padding: 0.5rem 1.5rem; font-weight: 700; font-size: 0.9rem;
    cursor: pointer; transition: all var(--transition); width: 100%;
}
.dock-buy-btn:hover { transform: scale(1.05); box-shadow: 0 4px 16px var(--accent-glow); }

/* Transaction history */
.docks-history { margin-bottom: 2rem; }
.docks-history h2 { margin-bottom: 1rem; font-size: 1.2rem; }
.docks-history-list { display: flex; flex-direction: column; gap: 0.5rem; }
.dock-tx {
    display: flex; align-items: center; gap: 0.8rem;
    background: var(--glass); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); padding: 0.8rem 1rem;
}
.dock-tx-icon { font-size: 1.3rem; }
.dock-tx-info { flex: 1; display: flex; flex-direction: column; }
.dock-tx-desc { font-size: 0.9rem; font-weight: 500; }
.dock-tx-date { font-size: 0.75rem; color: var(--text3); }
.dock-tx-amount { font-weight: 700; font-size: 1rem; }
.dock-tx-amount.positive { color: var(--success); }
.dock-tx-amount.negative { color: var(--danger); }

/* ===== BOOST SYSTEM ===== */
.boost-btn {
    color: var(--accent2) !important;
}
.boost-btn:hover {
    background: rgba(168, 85, 247, 0.15) !important;
    color: var(--neon) !important;
}
.boost-btn-large {
    background: linear-gradient(135deg, var(--accent), #9333ea) !important;
    color: white !important;
    border: 1px solid rgba(168, 85, 247, 0.4);
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all var(--transition);
    backdrop-filter: blur(8px);
    min-height: 40px;
    margin-top: 0;
}
.boost-btn-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px var(--accent-glow), 0 8px 20px rgba(147, 51, 234, 0.3);
    filter: brightness(1.15);
}
.boost-btn-large .boost-count {
    background: rgba(255,255,255,0.2);
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    margin-left: 0.3rem;
    font-size: 0.8rem;
}

/* Boost pulse animation */
@keyframes boostPulse {
    0% { transform: scale(1); }
    30% { transform: scale(1.2); }
    60% { transform: scale(0.95); }
    100% { transform: scale(1); }
}
.boost-pulse {
    animation: boostPulse 0.6s ease !important;
}

/* Rank badge */
.rank-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(239, 68, 68, 0.15));
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: var(--gold);
    white-space: nowrap;
}

/* === Boost Confirmation Modal === */
.boost-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 1rem;
}
.boost-modal-overlay.visible { opacity: 1; }
.boost-modal {
    background: rgba(20, 20, 50, 0.9);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 2rem;
    max-width: 380px;
    width: 100%;
    text-align: center;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(124, 58, 237, 0.1);
}
.boost-modal-overlay.visible .boost-modal {
    transform: scale(1) translateY(0);
}
.boost-modal-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}
.boost-modal h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: #e8eaf6;
}
.boost-modal-cost {
    font-size: 1.1rem;
    color: #a855f7;
    margin-bottom: 1rem;
}
.boost-modal-cost strong {
    color: #fbbf24;
}
.boost-modal-info {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    text-align: left;
}
.boost-modal-info p {
    font-size: 0.85rem;
    color: #8b92b3;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}
.boost-modal-info p:last-child { margin-bottom: 0; }
.boost-modal-info strong { color: #e8eaf6; }
.boost-modal-actions {
    display: flex;
    gap: 0.75rem;
}
.boost-modal-cancel, .boost-modal-confirm {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: none;
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.boost-modal-cancel {
    background: rgba(255, 255, 255, 0.08);
    color: #8b92b3;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.boost-modal-cancel:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #e8eaf6;
}
.boost-modal-confirm {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: white;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}
.boost-modal-confirm:hover {
    box-shadow: 0 6px 25px rgba(124, 58, 237, 0.5);
    transform: translateY(-1px);
}

/* === Score Details Modal === */
.score-modal { max-width: 420px; text-align: left; }
.score-modal h3 { text-align: center; }
.score-modal .boost-modal-icon { text-align: center; }
.score-breakdown {
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 0.75rem;
    margin: 1rem 0;
}
.score-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.25rem;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.score-row:last-child { border-bottom: none; }
.score-val { color: #22c55e; font-weight: 600; font-variant-numeric: tabular-nums; }
.score-boosters-section { margin-top: 1rem; }
.score-boosters-section h4 { font-size: 0.9rem; margin-bottom: 0.75rem; color: var(--text2); }
.score-boosters-list { max-height: 250px; overflow-y: auto; }
.score-booster {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem;
    border-radius: 10px;
    color: var(--text);
    transition: background 0.2s;
}
.score-booster:hover { background: rgba(255,255,255,0.06); }
.score-booster-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--glass-border);
}
.score-booster-name { flex: 1; font-size: 0.85rem; font-weight: 500; }
.score-booster-count { font-size: 0.8rem; color: var(--accent2); font-weight: 600; }
.score-load-more {
    width: 100%;
    padding: 0.6rem;
    margin-top: 0.5rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text2);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}
.score-load-more:hover { background: rgba(255,255,255,0.1); color: var(--text); }
.score-loading { text-align: center; color: var(--text3); padding: 2rem; }

/* ===== NEW POST TYPE BADGES ===== */
.post-type-badge.exclusive_image {
    background: rgba(251, 191, 36, 0.2);
    color: var(--gold);
    border: 1px solid rgba(251, 191, 36, 0.3);
}
.post-type-badge.download {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.post-type-badge.collection {
    background: rgba(249, 115, 22, 0.2);
    color: #fdba74;
    border: 1px solid rgba(249, 115, 22, 0.3);
}
.post-type-badge.live_interaction {
    background: rgba(220, 38, 38, 0.2);
    color: #fca5a5;
    border: 1px solid rgba(220, 38, 38, 0.3);
    animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.3); }
    50% { box-shadow: 0 0 12px 2px rgba(220, 38, 38, 0.4); }
}

/* ===== EXCLUSIVE IMAGE ===== */
.exclusive-locked {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    margin: 1rem 0;
}
.exclusive-blur-img {
    width: 100%;
    display: block;
    filter: blur(20px);
    transform: scale(1.05);
}
.exclusive-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.exclusive-lock-icon { font-size: 3rem; }
.btn-unlock {
    background: linear-gradient(135deg, var(--gold), #f59e0b) !important;
    color: #000 !important;
    font-weight: 700;
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 20px var(--gold-glow);
}
.btn-unlock:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--gold-glow);
}

/* Feed blur thumbnail */
.feed-thumbnail-wrapper {
    position: relative;
    overflow: hidden;
}
.feed-blur {
    filter: blur(20px);
    transform: scale(1.05);
}
.feed-blur-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}
.feed-price-tag {
    font-size: 0.75rem;
    background: rgba(251, 191, 36, 0.2);
    color: var(--gold);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-xs);
    margin-left: 0.5rem;
    font-weight: 600;
}

/* Live pulse icon in feed */
.live-pulse {
    animation: livePulseIcon 1.5s ease-in-out infinite;
}
@keyframes livePulseIcon {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Placeholder backgrounds for new types */
.feed-thumbnail-placeholder.exclusive_image { background: linear-gradient(135deg, #1a1500, #2a1a00); }
.feed-thumbnail-placeholder.download { background: linear-gradient(135deg, #001a0a, #002a1a); }
.feed-thumbnail-placeholder.collection { background: linear-gradient(135deg, #1a0f00, #2a1500); }
.feed-thumbnail-placeholder.live_interaction { background: linear-gradient(135deg, #1a0a0a, #2a0a1a); }

/* ===== DOWNLOAD CARD ===== */
.download-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--glass);
    backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}
.download-icon { font-size: 3rem; }
.download-info { flex: 1; min-width: 150px; }
.download-info h3 { margin-bottom: 0.3rem; }
.download-size { color: var(--text2); font-size: 0.85rem; }
.btn-download {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    color: white !important;
    text-decoration: none;
}

/* ===== COLLECTION ===== */
.collection-container { margin: 1rem 0; }
.collection-header {
    margin-bottom: 0.8rem;
}
.collection-count {
    color: var(--text2);
    font-size: 0.9rem;
    font-weight: 500;
}
.collection-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.collection-entry {
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    transition: border-color var(--transition);
}
.collection-entry:hover { border-color: var(--glass-border-hover); }
.collection-entry h4 { margin-bottom: 0.3rem; }
.collection-entry p { color: var(--text2); font-size: 0.9rem; line-height: 1.5; }
.collection-link {
    display: inline-block;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    word-break: break-all;
}
.collection-entry.preview {
    color: var(--text2);
    font-size: 0.9rem;
}
.collection-entry.locked {
    color: var(--text3);
    text-align: center;
    border-style: dashed;
}

/* ===== LIVE INTERACTION ===== */
.live-reactions-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 1rem 0;
    padding: 1rem;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
}
.live-reactions-label {
    color: var(--text2);
    font-size: 0.85rem;
    margin-right: 0.5rem;
}
.reaction-btn {
    font-size: 1.5rem;
    padding: 0.5rem 0.8rem;
    background: var(--surface2);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    min-height: 44px;
    margin-top: 0;
}
.reaction-btn:hover {
    transform: scale(1.15);
    border-color: var(--accent);
    box-shadow: 0 0 15px var(--accent-glow);
}
@keyframes reactionPop {
    0% { transform: scale(1); }
    30% { transform: scale(1.5); }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); }
}
.reaction-animate {
    animation: reactionPop 0.6s ease !important;
}

.live-questions-section { margin: 1.5rem 0; }
.live-question-form { margin-bottom: 1rem; }
.live-question-form textarea {
    width: 100%;
    margin-bottom: 0.5rem;
}
.live-question-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.highlight-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--gold);
    cursor: pointer;
    text-transform: none;
    margin: 0;
}
.highlight-toggle input { width: auto; }

.live-questions-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.live-question {
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    transition: all var(--transition);
}
.live-question.highlighted {
    border-color: var(--gold);
    background: rgba(251, 191, 36, 0.08);
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.15);
}
.live-question.answered { opacity: 0.6; }
.live-question-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}
.live-question-author { font-weight: 600; font-size: 0.9rem; }
.live-question-hl-badge {
    font-size: 0.75rem;
    background: rgba(251, 191, 36, 0.2);
    color: var(--gold);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-xs);
    font-weight: 600;
}
.live-question-answered-badge {
    font-size: 0.75rem;
    background: var(--success-bg);
    color: var(--success);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-xs);
    font-weight: 600;
}
.live-question p { font-size: 0.95rem; line-height: 1.5; }

/* ===== TIP SYSTEM ===== */
.btn-tip {
    background: linear-gradient(135deg, #a16207, #ca8a04) !important;
    color: white !important;
}
.tip-amounts {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0;
    justify-content: center;
}
.tip-amount-btn {
    background: var(--surface2);
    border: 1px solid var(--glass-border);
    color: var(--gold);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    transition: all var(--transition);
    margin-top: 0;
}
.tip-amount-btn:hover {
    border-color: var(--gold);
    background: rgba(251, 191, 36, 0.15);
    transform: translateY(-2px);
}

/* ===== PROMOTE ===== */
.promo-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(124, 58, 237, 0.2));
    border: 1px solid rgba(0, 212, 255, 0.3);
    color: var(--neon);
    white-space: nowrap;
}
.promote-packages {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1rem;
}
.promote-pkg {
    background: var(--surface2);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
}
.promote-pkg:hover {
    border-color: var(--accent);
    background: rgba(124, 58, 237, 0.1);
    transform: translateY(-2px);
}
.promote-pkg h4 { margin-bottom: 0.3rem; }
.promote-pkg p { color: var(--text2); font-size: 0.85rem; margin: 0; }

/* ===== EARNINGS GRID ===== */
.earnings-grid {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.8rem;
}
.earnings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
.earnings-item:last-child { border-bottom: none; }
.earnings-val { font-weight: 700; color: var(--success); }
.earnings-total { padding-top: 0.8rem; font-weight: 700; font-size: 1rem; }
.earnings-total .earnings-val { color: var(--gold); font-size: 1.1rem; }

/* ===== PROFILE ACTIONS ROW ===== */
.profile-actions-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ===== COLLECTION ITEM ROW (create form) ===== */
.collection-item-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    animation: fadeIn 0.2s ease;
}
.collection-item-row input { flex: 1; min-width: 100px; margin: 0; }

/* ===== NEW POST TYPE BADGES ===== */
.post-type-badge.exclusive_image {
    background: rgba(251, 191, 36, 0.2);
    color: var(--gold);
    border: 1px solid rgba(251, 191, 36, 0.3);
}
.post-type-badge.download {
    background: rgba(0, 212, 255, 0.2);
    color: var(--neon);
    border: 1px solid rgba(0, 212, 255, 0.3);
}
.post-type-badge.collection {
    background: rgba(168, 85, 247, 0.2);
    color: var(--accent2);
    border: 1px solid rgba(168, 85, 247, 0.3);
}
.post-type-badge.live_interaction {
    background: rgba(251, 191, 36, 0.15);
    color: var(--gold);
    border: 1px solid rgba(251, 191, 36, 0.3);
    animation: livePulse 2s infinite;
}
.post-type-badge.promoted {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(239, 68, 68, 0.15));
    color: var(--gold);
    border: 1px solid rgba(251, 191, 36, 0.4);
}
.post-type-badge.price-badge {
    background: rgba(251, 191, 36, 0.15);
    color: var(--gold);
    border: 1px solid rgba(251, 191, 36, 0.25);
}

@keyframes livePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ===== EXCLUSIVE IMAGE (BLUR) ===== */
.exclusive-blur-container {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    clip-path: inset(0 round var(--radius));
}
.blurred-image {
    filter: blur(30px) brightness(0.6);
    -webkit-filter: blur(30px) brightness(0.6);
    transform: scale(1.2);
}
.blurred-feed {
    filter: blur(20px) brightness(0.6);
    -webkit-filter: blur(20px) brightness(0.6);
    transform: scale(1.2);
}
.unlock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: background var(--transition);
}
.unlock-overlay:hover {
    background: rgba(124, 58, 237, 0.3);
}
.unlock-icon { font-size: 3rem; margin-bottom: 0.5rem; }
.unlock-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Feed blur wrap */
.feed-thumbnail-blur-wrap, .post-thumbnail-blur-wrap {
    position: relative;
    overflow: hidden;
    clip-path: inset(0);
    width: 100%;
    aspect-ratio: 16/9;
}
.feed-thumbnail-blur-wrap img, .post-thumbnail-blur-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.feed-unlock-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    color: var(--gold);
    font-weight: 700;
    font-size: 0.9rem;
}

/* Feed price tag */
.feed-price-tag {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    margin: 0 1rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gold);
    background: rgba(251, 191, 36, 0.1);
    border-radius: var(--radius-xs);
}

/* ===== DOWNLOAD CARD ===== */
.download-card {
    background: var(--glass);
    backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}
.download-card-icon { font-size: 3rem; }
.download-card-info h3 { margin-bottom: 0.3rem; }
.download-meta {
    font-size: 0.85rem;
    color: var(--text2);
    margin-bottom: 0.5rem;
    display: block;
}
.download-btn { margin-top: 0.5rem; }

/* Download placeholder */
.feed-thumbnail-placeholder.download {
    background: linear-gradient(135deg, #0a1a2a, #0a2a3a);
}
.feed-thumbnail-placeholder.collection {
    background: linear-gradient(135deg, #1a0a2a, #2a0a3a);
}
.feed-thumbnail-placeholder.live_interaction {
    background: linear-gradient(135deg, #2a1a0a, #3a2a0a);
    animation: livePulse 2s infinite;
}

/* ===== COLLECTION ===== */
.collection-preview {
    background: var(--glass);
    backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.collection-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}
.collection-items { padding: 0.5rem; }
.collection-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
}
.collection-item:last-child { border-bottom: none; }
.collection-item-img {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}
.collection-item-info h4 { margin-bottom: 0.2rem; font-size: 0.95rem; }
.collection-item-info p { font-size: 0.85rem; color: var(--text2); }
.collection-item-info a { font-size: 0.85rem; }
.collection-locked {
    padding: 2rem;
    text-align: center;
    color: var(--text2);
}
.collection-locked p { font-size: 1.2rem; margin-bottom: 1rem; }

/* Collection item form */
.collection-item-row {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ===== LIVE INTERACTION ===== */
.live-reactions-bar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin: 1rem 0;
}
.live-reaction-btn {
    background: var(--glass) !important;
    border: 1px solid var(--glass-border) !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 20px !important;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all var(--transition);
    margin: 0 !important;
}
.live-reaction-btn:hover {
    background: rgba(251, 191, 36, 0.15) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
    transform: scale(1.1);
}
.live-reaction-btn span { font-size: 0.8rem; }
.live-reaction-cost {
    font-size: 0.8rem;
    color: var(--text3);
    margin-left: 0.5rem;
}

.live-questions-section { margin-top: 1.5rem; }
.live-questions-section h3 { margin-bottom: 1rem; }
.live-question-form {
    margin-bottom: 1rem;
}
.live-question-form input {
    margin-bottom: 0.5rem;
}
.live-question-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.btn-highlight {
    background: linear-gradient(135deg, var(--gold), #f59e0b) !important;
    color: #000 !important;
}
.live-questions-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.live-question {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 1rem;
}
.live-question.highlighted {
    border-color: rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.08);
}
.live-question.answered { opacity: 0.6; }
.lq-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
}
.lq-header a { font-weight: 600; }
.lq-highlight-badge {
    background: rgba(251, 191, 36, 0.2);
    color: var(--gold);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}
.lq-answered-badge {
    color: var(--success);
    font-size: 0.75rem;
    font-weight: 600;
}

/* ===== TIP MODAL ===== */
.tip-amounts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.tip-amount-btn {
    background: var(--surface2) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text) !important;
    padding: 0.6rem !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    transition: all var(--transition);
    margin: 0 !important;
}
.tip-amount-btn:hover {
    border-color: var(--gold) !important;
    background: rgba(251, 191, 36, 0.1) !important;
}
.tip-amount-btn.selected {
    border-color: var(--gold) !important;
    background: rgba(251, 191, 36, 0.2) !important;
    color: var(--gold) !important;
    box-shadow: 0 0 12px var(--gold-glow);
}

.btn-tip {
    background: linear-gradient(135deg, #92400e, #b45309) !important;
    color: white !important;
}
.btn-tip:hover {
    box-shadow: 0 4px 15px rgba(180, 83, 9, 0.4) !important;
}

/* Profile actions */
.profile-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ===== PROMOTE MODAL ===== */
.promote-packages {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
}
.promote-pkg {
    background: var(--surface2) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text) !important;
    padding: 1rem !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer;
    text-align: left !important;
    transition: all var(--transition);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.promote-pkg:hover {
    border-color: var(--gold) !important;
    background: rgba(251, 191, 36, 0.08) !important;
    transform: translateX(4px);
}
.promote-pkg strong { color: var(--gold); }
.promote-pkg span { color: var(--text2); font-size: 0.85rem; }

.btn-promote {
    background: linear-gradient(135deg, #b45309, #d97706) !important;
    color: white !important;
}

/* ===== PREMIUM TYPE CARDS ===== */
.type-card-premium {
    border-color: rgba(251, 191, 36, 0.2);
    position: relative;
}
.type-card-premium::after {
    content: '💰';
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.8rem;
}
.type-card-premium:hover {
    border-color: var(--gold);
    box-shadow: 0 8px 30px var(--gold-glow);
}

/* ===== EARNINGS GRID ===== */
.earnings-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

/* Promoted feed item */
.feed-item-promoted {
    border-color: rgba(251, 191, 36, 0.2) !important;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.05);
}

/* Dashboard highlighted row */
.highlighted-row {
    border-color: rgba(251, 191, 36, 0.3) !important;
    background: rgba(251, 191, 36, 0.05) !important;
}

/* ===== LIVE SESSION SYSTEM ===== */
.live-page { max-width: 100%; }

.live-ended-banner {
    background: var(--surface2);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    text-align: center;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text2);
}

.stream-embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1rem;
    border: 1px solid var(--glass-border);
}
.stream-embed iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

.live-header {
    background: var(--glass);
    backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.2rem;
    margin-bottom: 1rem;
}
.live-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.live-creator-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.live-creator-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent);
}
.live-title {
    font-size: 1.3rem;
    margin-bottom: 0.1rem;
}
.live-creator-name {
    color: var(--text2);
    font-size: 0.9rem;
}
.live-badges {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.live-badge-live {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    animation: livePulse 2s ease-in-out infinite;
    white-space: nowrap;
}
@keyframes livePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
    50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}
.live-description {
    margin-top: 0.75rem;
    color: var(--text2);
    font-size: 0.9rem;
}

/* Live Tabs */
.live-tabs {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.live-tabs::-webkit-scrollbar { display: none; }
.live-tab {
    background: var(--surface);
    border: 1px solid var(--glass-border);
    color: var(--text2);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition);
}
.live-tab.active, .live-tab:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* Live Cards */
.live-card {
    background: var(--glass);
    backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.2rem;
    margin-bottom: 1rem;
}
.live-card h3 { margin-bottom: 0.75rem; font-size: 1rem; }
.live-module-hint { color: var(--text3); font-size: 0.85rem; margin-bottom: 0.5rem; }

/* Chat */
.live-chat-messages {
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0;
}
.chat-msg {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius-xs);
    transition: background var(--transition);
}
.chat-msg:hover { background: var(--surface); }
.chat-msg.highlighted {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid var(--gold);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
}
.chat-msg-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.chat-msg strong { color: var(--accent2); font-size: 0.85rem; margin-right: 0.3rem; }
.chat-msg-text { color: var(--text); font-size: 0.9rem; }

.live-chat-highlighted {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}
.live-chat-highlighted:empty { display: none; }

.live-chat-input {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.live-chat-input input[type="text"] {
    flex: 1;
    min-width: 150px;
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
}
.chat-highlight-toggle {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--gold);
    cursor: pointer;
    white-space: nowrap;
    text-transform: none;
    margin: 0;
}
.chat-highlight-toggle input { width: auto; }

/* Q&A */
.qa-item {
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}
.qa-item.answered { opacity: 0.6; }
.qa-item.highlighted { border-color: var(--gold); background: rgba(251,191,36,0.08); }
.qa-user { font-size: 0.8rem; color: var(--accent2); margin-bottom: 0.2rem; }
.qa-question { font-size: 0.9rem; margin-bottom: 0.3rem; }
.qa-status { font-size: 0.8rem; color: var(--text3); }

/* Reactions */
.live-reactions-grid {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.live-reaction-btn {
    background: var(--surface);
    border: 1px solid var(--glass-border);
    color: var(--text);
    padding: 1rem 1.5rem;
    border-radius: var(--radius);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}
.live-reaction-btn span { font-size: 0.8rem; color: var(--text2); }
.live-reaction-btn:hover:not(:disabled) {
    transform: scale(1.1);
    background: var(--surface2);
    border-color: var(--accent);
}
.live-reaction-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Polls */
.live-poll-item {
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.live-poll-question {
    font-weight: 600;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}
.poll-closed-badge {
    background: var(--surface2);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text3);
}
.live-poll-option {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xs);
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.3rem;
    cursor: pointer;
    overflow: hidden;
    transition: all var(--transition);
}
.live-poll-option:hover { border-color: var(--accent); }
.live-poll-option.voted { border-color: var(--accent); }
.live-poll-bar {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background: rgba(124, 58, 237, 0.2);
    transition: width 0.5s ease;
    border-radius: var(--radius-xs);
}
.live-poll-text { position: relative; z-index: 1; font-size: 0.9rem; }
.live-poll-pct {
    position: relative; z-index: 1;
    float: right;
    font-size: 0.8rem;
    color: var(--text2);
    font-weight: 600;
}

.live-poll-creator {
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.live-poll-creator input {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}

/* Giveaway */
.giveaway-enter-btn {
    font-size: 1.2rem;
    padding: 1rem 2rem;
    width: 100%;
    animation: livePulse 2s ease-in-out infinite;
}
.giveaway-winner {
    text-align: center;
    padding: 2rem;
}
.giveaway-confetti { font-size: 2rem; margin-bottom: 1rem; }
.giveaway-winner h2 { color: var(--gold); font-size: 1.5rem; }

/* Leaderboard */
.leaderboard-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: var(--radius-xs);
}
.leaderboard-row:nth-child(odd) { background: var(--surface); }
.lb-rank { font-size: 1.1rem; min-width: 2rem; text-align: center; }
.lb-name { flex: 1; font-weight: 500; }
.lb-score { color: var(--text2); font-size: 0.85rem; }

/* Live Session Cards (Discover, Feed banners) */
.live-sessions-bar {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0.5rem 0 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 1rem;
}
.live-sessions-bar::-webkit-scrollbar { display: none; }

.live-session-card {
    flex-shrink: 0;
    width: 220px;
    background: var(--glass);
    backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1rem;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.live-session-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--accent-glow);
}
.live-session-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.live-session-card-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
}
.live-session-card-title {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.live-session-card .live-badge-live {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
}

/* Live Banner (Feed sticky) */
.live-feed-banner {
    background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(124,58,237,0.15));
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    animation: livePulse 3s ease-in-out infinite;
}
.live-feed-banner a { color: var(--text); font-weight: 600; }
.live-feed-banner .live-dot {
    width: 10px; height: 10px;
    background: #ef4444;
    border-radius: 50%;
    animation: liveDot 1.5s ease-in-out infinite;
}
@keyframes liveDot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Profile Live Banner */
.profile-live-banner {
    display: block;
    background: linear-gradient(135deg, rgba(239,68,68,0.2), rgba(124,58,237,0.2));
    border: 2px solid rgba(239,68,68,0.4);
    border-radius: var(--radius);
    padding: 1rem 1.5rem;
    text-align: center;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all var(--transition);
    animation: bannerPulse 2s ease-in-out infinite;
}
.profile-live-banner:hover {
    border-color: #ef4444;
    transform: translateY(-2px);
}
@keyframes bannerPulse {
    0%, 100% { border-color: rgba(239,68,68,0.4); }
    50% { border-color: rgba(239,68,68,0.8); }
}
.profile-live-banner h3 { font-size: 1.1rem; }
.profile-live-banner p { color: var(--text2); font-size: 0.85rem; margin-top: 0.3rem; }

.profile-event-banner {
    display: block;
    background: linear-gradient(135deg, rgba(124,58,237,0.2), rgba(251,191,36,0.15));
    border: 2px solid rgba(124,58,237,0.4);
    border-radius: var(--radius);
    padding: 1rem 1.5rem;
    text-align: center;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all var(--transition);
}
.profile-event-banner:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

/* Dashboard Live Section */
.live-go-section {
    background: var(--glass);
    backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.2rem;
    margin-bottom: 1.5rem;
}
.live-go-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.live-go-btn {
    flex: 1;
    min-width: 140px;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
}
.live-go-btn:hover {
    background: var(--surface2);
    border-color: var(--accent);
    transform: translateY(-2px);
}
.live-go-btn.live-type { border-color: rgba(239,68,68,0.3); }
.live-go-btn.event-type { border-color: rgba(124,58,237,0.3); }

.live-sessions-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}
.live-session-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
}
.live-session-row-title { font-weight: 500; flex: 1; min-width: 120px; }
.live-session-row-actions { display: flex; gap: 0.5rem; align-items: center; }

.status-badge {
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.status-badge.active { background: rgba(239,68,68,0.2); color: #f87171; }
.status-badge.scheduled { background: rgba(59,130,246,0.2); color: #60a5fa; }
.status-badge.ended { background: var(--surface2); color: var(--text3); }

/* Bald Live Section */
.soon-live-section {
    margin-bottom: 1.5rem;
}
.soon-live-section h2 { margin-top: 0; }

/* Live Create Modal */
.live-create-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.live-create-form label { margin: 0; }
.live-type-toggle {
    display: flex;
    gap: 0.5rem;
}
.live-type-toggle button {
    flex: 1;
    padding: 0.6rem;
    background: var(--surface);
    border: 1px solid var(--glass-border);
    color: var(--text2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    font-size: 0.9rem;
}
.live-type-toggle button.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}
.modules-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.module-check {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xs);
    padding: 0.4rem 0.7rem;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--text2);
    transition: all var(--transition);
}
.module-check:has(input:checked) {
    border-color: var(--accent);
    color: var(--text);
    background: rgba(124,58,237,0.15);
}
.module-check input { width: auto; margin: 0; }
.btn-danger {
    background: var(--danger);
    color: white;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
}
.btn-danger:hover { background: #dc2626; }

@media (min-width: 768px) {
    .live-modules { display: flex; flex-wrap: wrap; gap: 1rem; }
    .live-module { flex: 1; min-width: 300px; }
    .live-tabs { display: none; }
    .live-module { display: block !important; }
}

/* ===== PREDICTIONS SYSTEM ===== */
.prediction-creator, .goal-creator {
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.prediction-creator input, .goal-creator input {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}
.pred-new-opt { margin-bottom: 0.25rem; }

.prediction-card {
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 0.75rem;
    transition: all var(--transition);
}
.prediction-card.resolved { border-color: rgba(34,197,94,0.3); }
.prediction-card.cancelled { opacity: 0.6; }
.prediction-card.locked { border-color: rgba(251,191,36,0.3); }

.prediction-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.prediction-question { font-weight: 600; font-size: 1rem; flex: 1; }
.prediction-pool { font-size: 0.85rem; color: var(--gold); margin-bottom: 0.75rem; font-weight: 600; }

.pred-status {
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.pred-status.active { background: rgba(124,58,237,0.2); color: var(--accent2); }
.pred-status.locked { background: rgba(251,191,36,0.2); color: var(--gold); }
.pred-status.resolved { background: var(--success-bg); color: var(--success); }
.pred-status.cancelled { background: var(--danger-bg); color: var(--danger); }

.prediction-options { display: flex; flex-direction: column; gap: 0.4rem; }

.prediction-option {
    position: relative;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.8rem;
    overflow: hidden;
    transition: all var(--transition);
}
.prediction-option.winner {
    border-color: var(--success);
    box-shadow: 0 0 15px rgba(34,197,94,0.2);
    animation: winnerGlow 1.5s ease-in-out 3;
}
@keyframes winnerGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(34,197,94,0.2); }
    50% { box-shadow: 0 0 30px rgba(34,197,94,0.5); }
}

.prediction-option-bar {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    border-radius: var(--radius-sm);
    transition: width 0.6s ease;
}
.prediction-option-content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.prediction-option-text { font-weight: 500; font-size: 0.9rem; }
.prediction-option-stats { font-size: 0.8rem; color: var(--text2); font-weight: 600; }

.prediction-user-bet {
    position: relative; z-index: 1;
    font-size: 0.75rem;
    color: var(--neon);
    margin-top: 0.3rem;
    font-weight: 500;
}

.prediction-bet-input {
    position: relative; z-index: 1;
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
}
.prediction-bet-input input {
    flex: 1;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    min-width: 80px;
}
.prediction-bet-input .btn { margin-top: 0; }

.prediction-creator-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--glass-border);
}
.prediction-creator-actions .btn { margin-top: 0; }

/* ===== GOALS SYSTEM ===== */
.goal-card {
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 0.75rem;
    transition: all var(--transition);
}
.goal-card.reached {
    border-color: rgba(34,197,94,0.4);
    box-shadow: 0 0 20px rgba(34,197,94,0.15);
}
.goal-card.closed { opacity: 0.6; }

.goal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.goal-title { font-weight: 600; font-size: 1rem; }

.goal-progress-bar {
    height: 24px;
    background: var(--surface2);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.5rem;
    position: relative;
}
.goal-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent2), var(--neon));
    border-radius: 12px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.goal-progress-fill.goal-reached {
    background: linear-gradient(90deg, #22c55e, #16a34a, #15803d);
    animation: goalReachedPulse 1s ease-in-out 3;
}
@keyframes goalReachedPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.4); }
}

.goal-stats {
    font-size: 0.85rem;
    color: var(--text2);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.goal-contribute {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.goal-contribute input {
    flex: 1;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    min-width: 80px;
}
.goal-contribute .btn { margin-top: 0; }

/* Confetti */
.confetti-piece {
    position: fixed;
    top: -10px;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    z-index: 9999;
    pointer-events: none;
    animation: confettiFall linear forwards;
}
@keyframes confettiFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ===== LIVE DASHBOARD (ANALYTICS) ===== */
.live-dashboard-page { max-width: 800px; margin: 0 auto; }
.live-dashboard-header { margin-bottom: 1.5rem; }
.live-dashboard-header h1 { margin-bottom: 0.3rem; }
.live-dashboard-session-title {
    font-size: 1.1rem;
    color: var(--text2);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.analytics-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.analytics-card {
    background: var(--glass);
    backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    transition: all var(--transition);
}
.analytics-card:hover {
    border-color: var(--glass-border-hover);
    transform: translateY(-2px);
}
.analytics-icon { font-size: 2rem; }
.analytics-number {
    font-size: 2.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent2), var(--neon));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.analytics-label {
    font-size: 0.75rem;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.analytics-section {
    background: var(--glass);
    backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.2rem;
    margin-bottom: 1rem;
}
.analytics-section h2 { margin-top: 0; margin-bottom: 0.75rem; }

.top-supporters-list { display: flex; flex-direction: column; gap: 0.4rem; }
.supporter-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem;
    border-radius: var(--radius-xs);
}
.supporter-row:nth-child(odd) { background: var(--surface); }
.supporter-rank { font-size: 1rem; min-width: 2rem; text-align: center; }
.supporter-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--glass-border);
}
.supporter-name { flex: 1; font-weight: 500; font-size: 0.9rem; }
.supporter-docks { font-size: 0.85rem; color: var(--gold); font-weight: 600; }

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
.quick-action-btn {
    background: var(--surface);
    border: 1px solid var(--glass-border);
    color: var(--text);
    padding: 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
}
.quick-action-btn:hover {
    background: var(--surface2);
    border-color: var(--accent);
    transform: translateY(-2px);
}
.quick-action-danger {
    border-color: rgba(239,68,68,0.3) !important;
}
.quick-action-danger:hover {
    border-color: var(--danger) !important;
    background: var(--danger-bg) !important;
}

@media (min-width: 640px) {
    .analytics-cards { grid-template-columns: repeat(4, 1fr); }
}

/* ===== PHASE 2: QUIZ ===== */
.quiz-card {
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.quiz-card.active { border-color: rgba(124,58,237,0.3); }
.quiz-card.closed { opacity: 0.8; }
.quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.quiz-question { font-weight: 600; font-size: 1rem; flex: 1; }
.quiz-timer {
    font-size: 1.5rem;
    font-weight: 800;
    text-align: center;
    color: var(--neon);
    margin-bottom: 0.5rem;
    font-variant-numeric: tabular-nums;
}
.quiz-options { display: flex; flex-direction: column; gap: 0.4rem; }
.quiz-option {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 0.7rem 1rem;
    cursor: pointer;
    overflow: hidden;
    transition: all var(--transition);
}
.quiz-option:hover:not(.correct):not(.user-correct):not(.user-wrong) {
    border-color: var(--accent);
    background: rgba(124,58,237,0.1);
}
.quiz-option.correct {
    border-color: var(--success);
    background: var(--success-bg);
}
.quiz-option.user-correct {
    border-color: var(--success);
    background: var(--success-bg);
    box-shadow: 0 0 15px rgba(34,197,94,0.2);
}
.quiz-option.user-wrong {
    border-color: var(--danger);
    background: var(--danger-bg);
}
.quiz-option-bar {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background: rgba(124,58,237,0.15);
    border-radius: var(--radius-sm);
    transition: width 0.5s ease;
}
.quiz-option-text { position: relative; z-index: 1; font-weight: 500; }
.quiz-option-pct {
    position: relative; z-index: 1;
    float: right;
    font-size: 0.8rem;
    color: var(--text2);
    font-weight: 600;
}
.quiz-feedback {
    text-align: center;
    padding: 0.5rem;
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: 0.5rem;
}
.quiz-leaderboard {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--glass-border);
}
.quiz-leaderboard h4 { font-size: 0.85rem; color: var(--text2); margin-bottom: 0.5rem; }

/* ===== PHASE 2: SONG REQUESTS ===== */
.song-request-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--glass-border);
}
.song-request-form input { padding: 0.5rem 0.75rem; font-size: 0.9rem; }
.song-now-playing {
    background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(0,212,255,0.1));
    border: 1px solid rgba(124,58,237,0.3);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 0.75rem;
    animation: livePulse 3s ease-in-out infinite;
}
.song-now-playing-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent2);
    margin-bottom: 0.3rem;
}
.song-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.song-item:last-child { border-bottom: none; }
.song-item.played, .song-item.rejected { opacity: 0.5; }
.song-info { flex: 1; min-width: 120px; }
.song-user { color: var(--text3); font-size: 0.8rem; margin-left: 0.3rem; }
.song-link { font-size: 0.8rem; margin-left: 0.3rem; }
.song-actions { display: flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; }
.song-actions .btn { margin-top: 0; }

/* ===== PHASE 2: TIMER ===== */
.timer-creator {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--glass-border);
}
.timer-creator input, .timer-creator select { padding: 0.5rem 0.75rem; font-size: 0.9rem; }
.timer-prominent-card {
    background: linear-gradient(135deg, rgba(0,212,255,0.1), rgba(124,58,237,0.1));
    border: 1px solid rgba(0,212,255,0.3);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-align: center;
    margin-bottom: 1rem;
}
.timer-title { font-size: 0.9rem; color: var(--text2); margin-bottom: 0.5rem; font-weight: 600; }
.timer-display {
    font-size: 3rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--neon);
    text-shadow: 0 0 30px var(--neon-glow);
}
.timer-display.timer-danger { color: var(--danger); text-shadow: 0 0 30px rgba(239,68,68,0.5); animation: timerBlink 0.5s ease-in-out infinite; }
.timer-display.timer-done { color: var(--gold); animation: timerDone 1s ease-in-out infinite; }
@keyframes timerBlink { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
@keyframes timerDone { 0%,100% { transform:scale(1); } 50% { transform:scale(1.05); } }
.timer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.timer-item .btn { margin-top: 0; }
.timer-inline { font-weight: 700; color: var(--neon); font-variant-numeric: tabular-nums; }

/* ===== PHASE 2: SHOP ===== */
.shop-offer-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    transition: all var(--transition);
}
.shop-offer-card.inactive { opacity: 0.5; }
.shop-offer-info { flex: 1; min-width: 120px; }
.shop-offer-post { display: block; font-size: 0.8rem; color: var(--text3); }
.shop-offer-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold);
    white-space: nowrap;
}
.shop-offer-actions { display: flex; gap: 0.3rem; align-items: center; }
.shop-offer-actions .btn { margin-top: 0; }

/* ===== PHASE 2: BADGES ===== */
.profile-badges {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin: 0.5rem 0;
}
.profile-badge {
    font-size: 1.3rem;
    cursor: help;
    transition: transform 0.2s;
}
.profile-badge:hover { transform: scale(1.3); }
.chat-badge {
    font-size: 0.65rem;
    margin-left: 0.15rem;
}

/* Badge Toast */
.badge-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: rgba(20,20,50,0.95);
    backdrop-filter: var(--blur);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    padding: 2rem;
    text-align: center;
    z-index: 10000;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.badge-toast.show { transform: translate(-50%, -50%) scale(1); }
.badge-toast-icon { font-size: 3rem; margin-bottom: 0.5rem; }

/* ===== PHASE 2: EMOTES ===== */
.emote-picker {
    background: var(--glass);
    backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    max-height: 150px;
    overflow-y: auto;
    margin-top: 0.5rem;
}
.emote-pick-btn {
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xs);
    padding: 0.3rem;
    cursor: pointer;
    transition: all var(--transition);
    margin: 0;
    min-height: auto;
}
.emote-pick-btn:hover { background: var(--surface2); border-color: var(--accent); transform: scale(1.1); }
.emote-pick-img { width: 24px; height: 24px; object-fit: contain; display: block; }
.chat-emote { width: 24px; height: 24px; vertical-align: middle; display: inline; }
.emote-picker-btn { font-size: 1rem !important; }

/* ===== PHASE 2: MODERATION ===== */
.chat-mute-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.7rem;
    opacity: 0;
    transition: opacity 0.2s;
    margin-left: 0.3rem;
    padding: 0;
    min-height: auto;
    margin-top: 0;
}
.chat-msg:hover .chat-mute-btn { opacity: 0.7; }
.chat-mute-btn:hover { opacity: 1 !important; }
.mute-durations {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1rem;
}
.mute-durations .btn { margin-top: 0; }

/* Leaderboard highlight */
.leaderboard-me {
    background: rgba(124,58,237,0.15) !important;
    border: 1px solid rgba(124,58,237,0.3);
    border-radius: var(--radius-xs);
}

/* Emote management on dashboard */
.emote-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.emote-card {
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    min-width: 80px;
}
.emote-card img { width: 32px; height: 32px; object-fit: contain; }
.emote-card span { font-size: 0.75rem; color: var(--text2); }

/* ===== Phase 3: Clips, Shoutouts, Analytics, Schedule ===== */

/* Clip bar */
.clip-bar { display: flex; justify-content: center; padding: 0.5rem 0; }
.clip-btn { animation: pulse-clip 2s infinite; }
@keyframes pulse-clip { 0%,100% { box-shadow: 0 0 0 0 rgba(124,58,237,0.3); } 50% { box-shadow: 0 0 0 8px rgba(124,58,237,0); } }

/* Shoutout card in chat */
.shoutout-card {
    background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(234,179,8,0.1));
    border: 1px solid rgba(245,158,11,0.4);
    border-radius: 12px;
    padding: 0.75rem;
    margin: 0.5rem 0;
    text-align: center;
}
.shoutout-header { font-weight: 700; font-size: 1rem; color: #f59e0b; margin-bottom: 0.25rem; }
.shoutout-body { font-size: 0.95rem; color: var(--text); }
.shoutout-message { font-style: italic; color: var(--text2); margin-top: 0.25rem; font-size: 0.85rem; }
.shoutout-amount { color: #f59e0b; font-weight: 600; font-size: 0.85rem; margin-top: 0.25rem; }

/* Analytics page */
.analytics-page { max-width: 800px; margin: 0 auto; }
.analytics-subtitle { color: var(--text2); margin-bottom: 1.5rem; }
.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.analytics-card {
    background: var(--glass);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.analytics-icon { font-size: 1.5rem; }
.analytics-value { font-size: 1.5rem; font-weight: 700; color: var(--neon); }
.analytics-label { font-size: 0.8rem; color: var(--text2); }

/* Heatmap */
.heatmap-container {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    margin: 0.75rem 0;
}
.heatmap-block {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: rgba(124,58,237, calc(0.1 + var(--intensity) * 0.8));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    position: relative;
}
.heatmap-label { font-size: 0.55rem; color: rgba(255,255,255,0.8); }
.heatmap-legend { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--text3); margin-top: 0.25rem; }
.heatmap-legend-bar {
    flex: 1;
    max-width: 120px;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, rgba(124,58,237,0.1), rgba(124,58,237,0.9));
}

/* Highlight rows */
.highlight-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--glass-border);
    flex-wrap: wrap;
}
.highlight-row:last-child { border-bottom: none; }
.highlight-time {
    font-family: monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--neon);
    background: rgba(124,58,237,0.15);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    white-space: nowrap;
}
.highlight-count { color: var(--text2); font-size: 0.85rem; }

/* Stream schedule */
.schedule-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
@media (max-width: 600px) {
    .schedule-week { grid-template-columns: 1fr; }
}
.schedule-day {
    background: var(--glass);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 0.5rem;
    min-height: 60px;
}
.schedule-day-name {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--neon);
    text-transform: uppercase;
    margin-bottom: 0.3rem;
    text-align: center;
}
.schedule-slot {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    padding: 0.2rem 0;
    flex-wrap: wrap;
}
.schedule-slot span:first-child { font-weight: 600; color: var(--text); white-space: nowrap; }
.schedule-type { font-size: 0.7rem; }
.schedule-empty { font-size: 0.75rem; color: var(--text3); text-align: center; }
.schedule-week.compact .schedule-day { min-height: 40px; }

/* ===== ADS ===== */
.ad-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text3); padding: 0.1rem 0.4rem; background: rgba(255,255,255,0.05); border-radius: 3px; display: inline-block; margin-bottom: 0.25rem; }
.ad-inline { background: var(--glass); backdrop-filter: var(--blur); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 1rem; margin: 1rem 0; }
.ad-inline-link { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: var(--text); }
.ad-inline-img { width: 80px; height: 60px; object-fit: cover; border-radius: var(--radius-xs); }
.ad-inline-text strong { display: block; margin-bottom: 0.2rem; }
.ad-inline-text span { color: var(--text2); font-size: 0.85rem; }
.ad-header-banner { background: var(--glass); border-bottom: 1px solid var(--glass-border); padding: 0.5rem 1rem; text-align: center; }
.ad-header-banner a { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--text); text-decoration: none; font-size: 0.85rem; }
.ad-header-banner img { height: 32px; border-radius: 4px; }
.ad-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 10000; display: flex; align-items: center; justify-content: center; }
.ad-overlay-card { background: rgba(20,20,50,0.95); backdrop-filter: var(--blur-heavy); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 2rem; max-width: 400px; width: 90%; text-align: center; position: relative; }
.ad-overlay-close { position: absolute; top: 0.75rem; right: 0.75rem; background: none; border: none; color: var(--text2); font-size: 1.2rem; cursor: pointer; }
.ad-overlay-close:hover { color: var(--text); }
.ad-timer { position: absolute; top: 0.75rem; left: 0.75rem; color: var(--text3); font-size: 0.75rem; }
.ad-overlay-link { display: block; text-decoration: none; color: var(--text); }
.ad-overlay-img { width: 100%; border-radius: var(--radius-sm); margin: 0.75rem 0; }
.ad-overlay-text strong { display: block; font-size: 1.1rem; margin-bottom: 0.25rem; }
.ad-overlay-text span { color: var(--text2); font-size: 0.85rem; }

/* ===== FEATURED ===== */
.featured-section { margin-bottom: 1.5rem; }
.featured-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.featured-card { display: flex; flex-direction: column; background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(0,212,255,0.08)); border: 1px solid rgba(124,58,237,0.3); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--text); transition: all 0.3s; }
.featured-card:hover { transform: translateY(-3px); border-color: rgba(124,58,237,0.5); box-shadow: 0 8px 32px rgba(124,58,237,0.2); color: var(--text); }
.featured-card-img { width: 100%; height: 120px; object-fit: cover; }
.featured-card-img.placeholder { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.03); font-size: 2rem; }
.featured-card-info { padding: 0.75rem 1rem; }
.featured-label { display: inline-block; font-size: 0.75rem; padding: 0.1rem 0.5rem; background: rgba(124,58,237,0.3); border-radius: 999px; margin-bottom: 0.3rem; color: var(--accent2); }

/* Watchparty */
.wp-page { max-width: 1100px; margin: 0 auto; }
.wp-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.wp-header h1 { font-size: 1.5rem; margin: 0; }
.wp-session-link { color: var(--text2); font-size: 0.9rem; margin-top: 0.3rem; }
.wp-session-link a { color: var(--accent); text-decoration: none; }
.wp-header-actions { display: flex; gap: 0.5rem; }
.wp-content { display: grid; grid-template-columns: 1fr 340px; gap: 1.5rem; }
@media (max-width: 768px) { .wp-content { grid-template-columns: 1fr; } }
.wp-video { aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #000; }
.wp-video iframe { width: 100%; height: 100%; border: none; }
.wp-sidebar { display: flex; flex-direction: column; gap: 1rem; }
.wp-members { background: var(--glass); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; }
.wp-members h3 { font-size: 0.95rem; margin: 0 0 0.75rem; }
.wp-members-list { display: flex; flex-direction: column; gap: 0.5rem; }
.wp-member { display: flex; align-items: center; gap: 0.5rem; }
.wp-member-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.wp-member-name { font-size: 0.85rem; }
.wp-host-badge { font-size: 0.75rem; }
.wp-chat { background: var(--glass); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; flex: 1; min-height: 300px; }
.wp-chat h3 { font-size: 0.95rem; margin: 0 0 0.75rem; }
.wp-chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem; max-height: 400px; padding-right: 0.3rem; }
.wp-chat-msg { font-size: 0.85rem; line-height: 1.4; word-break: break-word; }
.wp-chat-msg strong { color: var(--accent); margin-right: 0.3rem; }
.wp-chat-input { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.wp-chat-input input { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.75rem; color: var(--text); font-size: 0.85rem; }
.wp-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.wp-list-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--text); transition: background 0.2s; }
.wp-list-item:hover { background: rgba(255,255,255,0.06); }
.wp-list-info { display: flex; flex-direction: column; gap: 0.15rem; }
.wp-list-session { font-size: 0.8rem; color: var(--accent); }
.wp-list-meta { font-size: 0.75rem; color: var(--text3); }
.wp-status { font-size: 0.85rem; }

/* ===== ACHIEVEMENTS ===== */
.ach-page { max-width: 900px; margin: 0 auto; }
.ach-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.ach-header h1 { font-size: 1.5rem; margin: 0; }
.ach-username { color: var(--text2); font-size: 0.9rem; margin-top: 0.3rem; }
.ach-username a { color: var(--accent); text-decoration: none; }
.ach-level-box { display: flex; align-items: center; gap: 1rem; }
.ach-level-badge { background: linear-gradient(135deg, var(--accent), var(--neon)); color: #fff; font-weight: 800; font-size: 1.3rem; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px var(--accent-glow); }
.ach-xp-info { display: flex; flex-direction: column; gap: 0.2rem; }
.ach-xp-text { font-size: 0.95rem; font-weight: 600; color: var(--gold); }
.ach-xp-bar { width: 140px; height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.ach-xp-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--neon)); border-radius: 4px; transition: width 0.5s; }
.ach-xp-next { font-size: 0.7rem; color: var(--text3); }
.ach-category { margin-bottom: 2rem; }
.ach-cat-title { font-size: 1.1rem; margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; }
.ach-card { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 1rem; background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: all 0.3s; }
.ach-card.earned { border-color: rgba(124,58,237,0.35); background: linear-gradient(135deg, rgba(124,58,237,0.1), rgba(0,212,255,0.05)); }
.ach-card.earned:hover { border-color: rgba(124,58,237,0.5); box-shadow: 0 4px 20px rgba(124,58,237,0.15); }
.ach-card.locked { opacity: 0.5; }
.ach-icon { font-size: 1.8rem; flex-shrink: 0; line-height: 1; }
.ach-details { flex: 1; min-width: 0; }
.ach-name { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.15rem; }
.ach-desc { font-size: 0.78rem; color: var(--text2); line-height: 1.3; margin-bottom: 0.3rem; }
.ach-meta { display: flex; align-items: center; gap: 0.5rem; }
.ach-xp-badge { font-size: 0.7rem; padding: 0.1rem 0.4rem; background: rgba(251,191,36,0.15); color: var(--gold); border-radius: 4px; font-weight: 600; }
.ach-date { font-size: 0.7rem; color: var(--success); }
/* Profile achievement summary */
.profile-ach-summary { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; padding: 0.5rem 0.75rem; background: rgba(255,255,255,0.03); border-radius: 8px; }
.profile-ach-summary a { color: var(--accent); text-decoration: none; font-size: 0.8rem; }
.profile-ach-level { font-size: 0.85rem; font-weight: 700; color: var(--accent2); }
.profile-ach-icons { display: flex; gap: 0.2rem; font-size: 1rem; }
.profile-ach-more { font-size: 0.75rem; color: var(--text3); }

/* ===== STORIES ===== */
.stories-page { max-width: 600px; margin: 0 auto; }
.stories-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.stories-header h1 { font-size: 1.4rem; margin: 0; }

/* Story Circles Row */
.story-circles { display: flex; gap: 1rem; overflow-x: auto; padding: 0.5rem 0; scrollbar-width: none; }
.story-circles::-webkit-scrollbar { display: none; }
.story-circle { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-decoration: none; color: var(--text); flex-shrink: 0; }
.story-circle-ring { width: 68px; height: 68px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, var(--text3), var(--text3)); }
.story-circle.unseen .story-circle-ring { background: linear-gradient(135deg, var(--accent), var(--neon), var(--gold)); }
.story-circle.own .story-circle-ring { background: linear-gradient(135deg, var(--success), var(--neon)); }
.story-circle-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg); }
.story-circle-name { font-size: 0.72rem; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.story-circle-count { font-size: 0.65rem; color: var(--text3); }

/* Stories Grid */
.stories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; margin-top: 0.75rem; }
.story-preview { position: relative; aspect-ratio: 9/16; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; text-decoration: none; color: #fff; min-height: 200px; }
.story-preview-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem 0.75rem 0.6rem; background: linear-gradient(transparent, rgba(0,0,0,0.8)); display: flex; flex-direction: column; gap: 0.15rem; }
.story-preview-author { font-weight: 700; font-size: 0.8rem; }
.story-preview-text { font-size: 0.72rem; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-preview-time { font-size: 0.65rem; opacity: 0.6; }
.story-new-dot { position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; background: var(--neon); border-radius: 50%; box-shadow: 0 0 8px var(--neon-glow); }

/* Story Viewer (Fullscreen) */
.story-viewer { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #000; z-index: 9999; display: flex; flex-direction: column; }
.story-viewer-header { position: absolute; top: 0; left: 0; right: 0; z-index: 10; padding: 12px 16px 8px; background: linear-gradient(rgba(0,0,0,0.6), transparent); }
.story-progress-bar { display: flex; gap: 3px; margin-bottom: 8px; }
.story-progress-seg { flex: 1; height: 3px; background: rgba(255,255,255,0.25); border-radius: 2px; overflow: hidden; }
.story-progress-seg .story-progress-fill { height: 100%; background: #fff; width: 0; border-radius: 2px; }
.story-progress-seg.done .story-progress-fill { width: 100%; }
.story-progress-seg.active .story-progress-fill { width: 100%; animation: storyProgress 6s linear forwards; }
@keyframes storyProgress { from { width: 0; } to { width: 100%; } }
.story-viewer-user { display: flex; align-items: center; gap: 0.5rem; }
.story-viewer-user a { display: flex; align-items: center; gap: 0.5rem; color: #fff; text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.story-viewer-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.story-viewer-time { font-size: 0.75rem; color: rgba(255,255,255,0.6); margin-left: auto; }
.story-viewer-close { position: absolute; top: 14px; right: 16px; color: #fff; text-decoration: none; font-size: 1.5rem; z-index: 11; opacity: 0.8; }
.story-viewer-close:hover { opacity: 1; }

.story-viewer-content { flex: 1; display: flex; align-items: center; justify-content: center; }
.story-slide { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.story-text-overlay { font-size: 1.4rem; font-weight: 700; color: #fff; text-align: center; padding: 2rem; text-shadow: 0 2px 8px rgba(0,0,0,0.5); max-width: 400px; line-height: 1.4; }

.story-viewer-footer { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; padding: 12px 16px 24px; background: linear-gradient(transparent, rgba(0,0,0,0.6)); }
.story-reactions-bar { display: flex; gap: 0.75rem; justify-content: center; }
.story-react-btn { background: rgba(255,255,255,0.15); border: none; font-size: 1.3rem; padding: 0.4rem 0.6rem; border-radius: 50%; cursor: pointer; transition: transform 0.2s; backdrop-filter: blur(8px); }
.story-react-btn:hover { transform: scale(1.2); background: rgba(255,255,255,0.25); }
.story-viewer-stats { text-align: center; margin-top: 0.5rem; font-size: 0.8rem; color: rgba(255,255,255,0.7); }
.story-delete-btn { background: none; border: none; cursor: pointer; font-size: 0.9rem; opacity: 0.7; }
.story-delete-btn:hover { opacity: 1; }

.story-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: none; color: #fff; font-size: 2rem; padding: 1rem 0.5rem; cursor: pointer; z-index: 10; backdrop-filter: blur(4px); border-radius: 8px; opacity: 0.5; }
.story-nav:hover { opacity: 1; background: rgba(255,255,255,0.2); }
.story-nav-prev { left: 8px; }
.story-nav-next { right: 8px; }

/* Story Create Modal */
.story-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 9998; align-items: center; justify-content: center; padding: 1rem; }
.story-modal.open { display: flex; }
.story-modal-content { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; width: 100%; max-width: 420px; }
.story-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.story-modal-header h2 { margin: 0; font-size: 1.2rem; }
.story-modal-close { background: none; border: none; color: var(--text2); font-size: 1.3rem; cursor: pointer; }
.story-color-picker { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.story-color-opt input { display: none; }
.story-color-opt span { display: block; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: border-color 0.2s; }
.story-color-opt input:checked + span { border-color: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.3); }

/* Story bar on feed (index.php) */
.feed-story-bar { display: flex; gap: 0.75rem; overflow-x: auto; padding: 0.75rem 0; margin-bottom: 1rem; scrollbar-width: none; border-bottom: 1px solid var(--border); }
.feed-story-bar::-webkit-scrollbar { display: none; }

/* ===== AUCTIONS ===== */
.auctions-page { max-width: 800px; margin: 0 auto; padding: 1rem 0; }
.auctions-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.auctions-header h1 { font-size: 1.5rem; }
.auctions-section-title { font-size: 1.1rem; color: var(--text2); margin-bottom: 1rem; }
.auctions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.auction-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; }
.auction-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
.auction-card-ended { opacity: 0.7; }
.auction-card-image { height: 160px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bg2, #1a1a2e); }
.auction-card-image img { width: 100%; height: 100%; object-fit: cover; }
.auction-card-placeholder { font-size: 3rem; }
.auction-card-body { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.auction-card-body h3 { font-size: 1rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auction-cat-badge-sm { font-size: 0.75rem; color: var(--text3); }
.auction-card-meta { font-size: 0.8rem; color: var(--text3); }
.auction-card-price { font-size: 1.2rem; font-weight: 700; color: var(--accent, #7c3aed); }
.auction-card-footer { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text3); margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--border); }
.auction-empty-section { text-align: center; padding: 2rem; color: var(--text3); }
.auction-empty { text-align: center; padding: 3rem 1rem; }

/* Auction Detail */
.auction-detail { max-width: 640px; margin: 0 auto; padding: 1rem 0; }
.auction-detail-image { border-radius: 12px; overflow: hidden; margin-bottom: 1rem; max-height: 360px; }
.auction-detail-image img { width: 100%; height: 100%; object-fit: cover; }
.auction-detail-header { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.auction-cat-badge { background: var(--bg2, #1a1a2e); padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.85rem; }
.auction-status-badge { padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
.auction-status-badge.active { background: #22c55e22; color: #22c55e; }
.auction-status-badge.ended { background: #ef444422; color: #ef4444; }
.auction-detail-title { font-size: 1.5rem; margin: 0.5rem 0; }
.auction-creator-link { display: flex; align-items: center; gap: 0.5rem; color: var(--text2); text-decoration: none; margin-bottom: 1rem; }
.auction-creator-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.auction-detail-desc { color: var(--text2); line-height: 1.5; margin-bottom: 1rem; }
.auction-price-box { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; margin-bottom: 1rem; }
.auction-price-current { display: flex; justify-content: space-between; align-items: center; }
.auction-price-label { color: var(--text3); font-size: 0.85rem; }
.auction-price-value { font-size: 1.6rem; font-weight: 700; color: var(--accent, #7c3aed); }
.auction-price-meta { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.85rem; color: var(--text3); }
.auction-winner-box { background: linear-gradient(135deg, #7c3aed22, #f59e0b22); border: 1px solid #f59e0b55; border-radius: 12px; padding: 1rem; text-align: center; margin-bottom: 1rem; }
.auction-winner-label { font-size: 1.1rem; font-weight: 700; display: block; margin-bottom: 0.5rem; }
.auction-winner-user { display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: inherit; text-decoration: none; }
.auction-bid-form { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; margin-bottom: 1rem; }
.auction-bid-form label { font-size: 0.85rem; color: var(--text3); display: block; margin-bottom: 0.5rem; }
.auction-bid-row { display: flex; gap: 0.5rem; }
.auction-bid-row input { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.75rem; color: var(--text); font-size: 1rem; }
.btn-bid { background: var(--accent, #7c3aed); color: #fff; border: none; border-radius: 8px; padding: 0.6rem 1.2rem; font-size: 1rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.2s; }
.btn-bid:hover { filter: brightness(1.1); }
.auction-bid-balance { color: var(--text3); font-size: 0.8rem; display: block; margin-top: 0.5rem; }
.btn-cancel-auction { background: #ef444433; color: #ef4444; border: 1px solid #ef4444; border-radius: 8px; padding: 0.5rem 1rem; cursor: pointer; width: 100%; font-size: 0.9rem; }
.auction-bids-list { margin-top: 1.5rem; }
.auction-bids-list h3 { margin-bottom: 0.75rem; font-size: 1.1rem; }
.auction-bid-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.auction-bid-item.top-bid { background: var(--accent, #7c3aed)11; border-radius: 8px; padding: 0.6rem 0.75rem; }
.auction-bid-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.auction-bid-info { flex: 1; }
.top-bid-label { font-size: 0.7rem; background: var(--accent, #7c3aed); color: #fff; padding: 0.1rem 0.4rem; border-radius: 4px; margin-left: 0.5rem; }
.auction-bid-amount { font-weight: 700; color: var(--accent, #7c3aed); }

/* Auction Create Form */
.auction-create { max-width: 560px; margin: 0 auto; padding: 1rem 0; }
.auction-create h1 { margin-bottom: 1.5rem; }
.auction-form .form-group { margin-bottom: 1rem; }
.auction-form label { display: block; font-size: 0.85rem; color: var(--text2); margin-bottom: 0.3rem; }
.auction-form input, .auction-form textarea, .auction-form select { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.75rem; color: var(--text); font-size: 0.95rem; box-sizing: border-box; }
.auction-form .form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
@media (max-width: 500px) { .auction-form .form-row { grid-template-columns: 1fr; } }

/* ─── Creator Shop ─── */
.shop-manage h2, .shop-browse h2 { text-align:center; margin-bottom:8px; }
.shop-browse-sub { text-align:center; color:var(--text-muted); margin-bottom:20px; }
.shop-stats-row { display:flex; gap:16px; justify-content:center; margin-bottom:20px; }
.shop-stat { background:var(--card-bg); border:1px solid var(--border); border-radius:12px; padding:16px 24px; text-align:center; }
.shop-stat-num { display:block; font-size:1.5rem; font-weight:700; color:var(--accent); }
.shop-stat-label { font-size:.85rem; color:var(--text-muted); }
.shop-settings-box { background:var(--card-bg); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:16px; }
.shop-settings-box summary { cursor:pointer; font-weight:600; font-size:1.05rem; }
.shop-settings-form, .shop-item-form { margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.shop-settings-form label, .shop-item-form label { display:flex; flex-direction:column; gap:4px; font-size:.9rem; color:var(--text-muted); }
.shop-settings-form input, .shop-settings-form textarea, .shop-item-form input, .shop-item-form textarea, .shop-item-form select { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:10px; color:var(--text); font-size:.95rem; }
.shop-form-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
@media(max-width:600px) { .shop-form-row { grid-template-columns:1fr; } }
.shop-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px; margin-top:16px; }
.shop-item-card { background:var(--card-bg); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:transform .2s, box-shadow .2s; }
.shop-item-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(124,58,237,.15); }
.shop-item-inactive { opacity:.5; }
.shop-item-img { width:100%; aspect-ratio:1; object-fit:cover; display:flex; align-items:center; justify-content:center; background:var(--bg); font-size:3rem; }
.shop-item-info { padding:12px; }
.shop-item-info h4 { margin:0 0 6px; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shop-item-price { font-weight:700; color:var(--accent); }
.shop-item-sold { font-size:.8rem; color:var(--text-muted); margin-left:8px; }
.shop-item-stock { font-size:.8rem; color:#f59e0b; margin-left:8px; }
.shop-item-soldout { font-size:.8rem; color:#ef4444; font-weight:600; margin-left:8px; }
.shop-item-cat { display:inline-block; background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:4px 12px; font-size:.8rem; margin:8px 0; }
.shop-item-actions { display:flex; gap:8px; padding:0 12px 12px; }
.shop-orders { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.shop-order-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; background:var(--card-bg); border:1px solid var(--border); border-radius:10px; padding:10px 14px; font-size:.9rem; }
.shop-order-buyer { font-weight:600; color:var(--accent); }
.shop-order-price { font-weight:600; }
.shop-order-status { border-radius:12px; padding:2px 10px; font-size:.8rem; font-weight:600; }
.shop-status-completed { background:#10b98120; color:#10b981; }
.shop-status-pending { background:#f59e0b20; color:#f59e0b; }
.btn-success { background:#10b981; color:#fff; border:none; border-radius:8px; padding:4px 10px; cursor:pointer; font-size:.8rem; }
.btn-danger { background:#ef4444!important; color:#fff!important; }

/* Shop header (creator's store) */
.shop-header { background:linear-gradient(135deg, var(--shop-color), color-mix(in srgb, var(--shop-color) 60%, #000)); border-radius:16px; padding:28px 20px; text-align:center; margin-bottom:20px; }
.shop-header h2 { margin:0; }
.shop-creator-name { color:rgba(255,255,255,.7); }
.shop-creator-name a { color:#fff; }
.shop-desc { color:rgba(255,255,255,.85); margin-top:8px; max-width:500px; margin-inline:auto; }

/* Shop modal */
.shop-modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(4px); z-index:1000; display:none; align-items:center; justify-content:center; padding:20px; }
.shop-modal-bg.open { display:flex; }
.shop-modal { background:var(--card-bg); border:1px solid var(--border); border-radius:16px; max-width:440px; width:100%; max-height:90vh; overflow-y:auto; padding:20px; }
.shop-modal-img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--bg); margin-bottom:12px; }
.shop-modal-desc { color:var(--text-muted); font-size:.95rem; margin:12px 0; }
.shop-modal-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:12px 0; }
.shop-buy-form { margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.shop-buy-form textarea { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:10px; color:var(--text); font-size:.9rem; resize:none; }
.btn-buy { font-size:1.1rem; padding:12px; }

/* Shop browse */
.shop-browse-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; }
.shop-browse-card { display:block; background:var(--card-bg); border:1px solid var(--border); border-radius:14px; overflow:hidden; text-decoration:none; color:var(--text); transition:transform .2s; }
.shop-browse-card:hover { transform:translateY(-3px); }
.shop-browse-banner { height:60px; background:linear-gradient(135deg, var(--shop-color), color-mix(in srgb, var(--shop-color) 60%, #000)); }
.shop-browse-info { padding:14px; text-align:center; }
.shop-browse-avatar { display:inline-block; width:48px; height:48px; border-radius:50%; overflow:hidden; margin-top:-36px; border:3px solid var(--card-bg); background:var(--bg); font-size:1.5rem; line-height:48px; }
.shop-browse-avatar img { width:100%; height:100%; object-fit:cover; }
.shop-browse-info h3 { margin:8px 0 2px; font-size:1.05rem; }
.shop-browse-creator { font-size:.85rem; color:var(--text-muted); }
.shop-browse-count { display:block; margin-top:6px; font-size:.85rem; color:var(--accent); }
.shop-success-box { background:#10b98115; border:1px solid #10b981; border-radius:12px; padding:16px; text-align:center; margin:20px 0; color:#10b981; }

/* ===== TEAM BATTLE ===== */
.tb-title { font-size:1.3rem; font-weight:700; text-align:center; margin-bottom:1rem; background:linear-gradient(135deg,var(--accent),#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent; }
.tb-scoreboard { display:flex; flex-direction:column; gap:1rem; }
.tb-team { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:1rem; position:relative; overflow:hidden; transition:all 0.3s; }
.tb-my-team { border-color:var(--team-color,var(--accent)); box-shadow:0 0 12px color-mix(in srgb, var(--team-color,var(--accent)) 30%, transparent); }
.tb-team-header { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.5rem; }
.tb-team-emoji { font-size:1.5rem; }
.tb-team-name { font-weight:700; font-size:1.1rem; flex:1; }
.tb-team-members { font-size:0.85rem; color:var(--text3); }
.tb-score-bar-wrap { background:rgba(255,255,255,0.05); border-radius:8px; height:32px; position:relative; overflow:hidden; }
.tb-score-bar { height:100%; border-radius:8px; transition:width 0.6s ease; min-width:2px; opacity:0.7; }
.tb-score-value { position:absolute; right:8px; top:50%; transform:translateY(-50%); font-weight:700; font-size:0.9rem; text-shadow:0 1px 3px rgba(0,0,0,0.5); }
.tb-cheer { display:flex; gap:0.5rem; margin-top:0.75rem; align-items:center; }
.tb-cheer-input { flex:1; max-width:120px; }
.tb-top-scorers { margin-top:0.75rem; padding-top:0.5rem; border-top:1px solid rgba(255,255,255,0.06); }
.tb-scorer { display:flex; align-items:center; gap:0.4rem; padding:0.2rem 0; font-size:0.85rem; }
.tb-scorer-rank { width:24px; text-align:center; }
.tb-scorer-pts { margin-left:auto; color:var(--team-color,var(--accent)); font-weight:600; }
.tb-creator-controls { margin-top:1.5rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,0.1); }
.tb-creator-controls h4 { margin-bottom:0.75rem; }
.tb-score-controls { display:flex; flex-direction:column; gap:0.75rem; }
.tb-score-ctrl { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; flex-wrap:wrap; }
.tb-score-ctrl span { font-weight:600; min-width:120px; }
@media(max-width:600px) {
    .tb-score-ctrl { flex-direction:column; align-items:flex-start; }
}

/* ===== SCAVENGER HUNTS ===== */
.scav-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.scav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-bottom:1rem}
.scav-card{display:block;background:var(--card-bg,#1a1a2e);border-radius:12px;padding:1.2rem;text-decoration:none;color:inherit;border:1px solid rgba(255,255,255,.08);transition:transform .2s,box-shadow .2s}
.scav-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.scav-card-ended{opacity:.6}
.scav-card-icon{font-size:2rem;margin-bottom:.5rem}
.scav-card h4{margin:0 0 .5rem;font-size:1.1rem}
.scav-card-meta{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.8rem;color:rgba(255,255,255,.6)}
.scav-card-timer{margin-top:.5rem;font-size:.85rem;color:#fbbf24}

.scav-create{max-width:700px;margin:0 auto}
.scav-create h2{margin-bottom:1rem}
.scav-task-form{background:rgba(255,255,255,.05);border-radius:10px;padding:1rem;margin-bottom:.75rem;display:flex;flex-direction:column;gap:.5rem}
.task-form-header{display:flex;justify-content:space-between;align-items:center}
.task-form-row{display:flex;gap:.5rem;align-items:center}
.form-row{display:flex;gap:1rem}
.form-row .form-group{flex:1}

.scav-detail .scav-header{margin-bottom:1.5rem}
.scav-meta{display:flex;flex-wrap:wrap;gap:.75rem;font-size:.85rem;color:rgba(255,255,255,.6);margin:.5rem 0}
.scav-desc{color:rgba(255,255,255,.7);margin-top:.5rem}
.badge-active,.badge-ended{padding:2px 8px;border-radius:20px;font-size:.75rem}
.badge-active{background:rgba(34,197,94,.15);color:#22c55e}
.badge-ended{background:rgba(239,68,68,.15);color:#ef4444}

.scav-layout{display:grid;grid-template-columns:1fr 300px;gap:1.5rem}
@media(max-width:768px){.scav-layout{grid-template-columns:1fr}.form-row{flex-direction:column}}

.scav-tasks h3,.scav-sidebar h3{margin-bottom:.75rem}
.scav-task{background:rgba(255,255,255,.04);border-radius:10px;padding:1rem;margin-bottom:.75rem;border-left:3px solid rgba(255,255,255,.1)}
.scav-task.task-done{border-left-color:#22c55e;background:rgba(34,197,94,.05)}
.scav-task.task-pending{border-left-color:#fbbf24;background:rgba(251,191,36,.05)}
.scav-task.task-rejected{border-left-color:#ef4444;background:rgba(239,68,68,.05)}
.task-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem}
.task-num{font-weight:700;color:rgba(255,255,255,.4);font-size:.8rem}
.task-points{margin-left:auto;font-size:.85rem;color:#fbbf24;font-weight:600}
.task-desc{font-size:.85rem;color:rgba(255,255,255,.5);margin:.3rem 0}
.task-status{margin-top:.5rem}
.badge-approved{color:#22c55e;font-size:.85rem}.badge-pending{color:#fbbf24;font-size:.85rem}.badge-rejected{color:#ef4444;font-size:.85rem}
.task-answer{font-style:italic;color:rgba(255,255,255,.5);font-size:.85rem;margin-top:.3rem}
.task-submit-form{display:flex;gap:.5rem;margin-top:.5rem}
.task-submit-form input{flex:1;padding:.4rem .6rem;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:#fff;font-size:.85rem}
.task-submissions{margin-top:.75rem;padding-top:.5rem;border-top:1px solid rgba(255,255,255,.08);font-size:.85rem}
.submission-item{display:flex;align-items:center;gap:.5rem;padding:.3rem 0}

.scav-leaderboard .lb-entry{display:flex;align-items:center;gap:.5rem;padding:.5rem;border-radius:8px;margin-bottom:.3rem;background:rgba(255,255,255,.03)}
.lb-rank{font-size:1.1rem;min-width:28px;text-align:center}
.lb-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}
.lb-name{flex:1;font-size:.85rem}
.lb-points{font-weight:600;color:#fbbf24;font-size:.85rem}
.lb-tasks{font-size:.75rem;color:rgba(255,255,255,.4)}

/* ========== Fan-Clubs ========== */
.fanclub-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.fanclub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;margin-bottom:1.5rem}
.fanclub-card{background:rgba(255,255,255,0.05);border:2px solid rgba(124,58,237,0.3);border-radius:16px;padding:1.2rem;text-align:center;text-decoration:none;color:inherit;transition:all 0.2s}
.fanclub-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.3);border-color:rgba(124,58,237,0.6)}
.fanclub-card-emoji{font-size:2.5rem;margin-bottom:0.5rem}
.fanclub-card-name{font-weight:700;font-size:1rem;margin-bottom:0.2rem}
.fanclub-card-creator{font-size:0.8rem;opacity:0.6;margin-bottom:0.4rem}
.fanclub-card-members{font-size:0.85rem;opacity:0.7}
.fanclub-card-price{font-size:0.75rem;margin-top:0.3rem;padding:2px 8px;border-radius:8px;background:rgba(124,58,237,0.2);display:inline-block}
.fanclub-card-price.free{background:rgba(16,185,129,0.2);color:#10b981}
.fanclub-hero{border-radius:16px;padding:2rem;text-align:center;margin-bottom:1.5rem}
.fanclub-hero-emoji{font-size:4rem;margin-bottom:0.5rem}
.fanclub-hero h1{font-size:1.8rem;margin:0 0 0.3rem}
.fanclub-creator{opacity:0.8;font-size:0.9rem}
.fanclub-creator a{color:inherit;text-decoration:underline}
.fanclub-desc{margin-top:0.8rem;opacity:0.85;max-width:500px;margin-left:auto;margin-right:auto}
.fanclub-stats-bar{display:flex;justify-content:center;gap:2rem;padding:1rem;background:rgba(255,255,255,0.05);border-radius:12px;margin-bottom:1.5rem}
.fanclub-stat{text-align:center}
.fanclub-stat .stat-num{display:block;font-size:1.2rem;font-weight:700}
.fanclub-stat .stat-label{font-size:0.75rem;opacity:0.6}
.fanclub-join-section{text-align:center;margin-bottom:1.5rem}
.fanclub-join-btn{font-size:1.1rem;padding:0.8rem 2rem}
.fanclub-membership-card{background:rgba(255,255,255,0.05);border:2px solid;border-radius:16px;padding:1.2rem;margin-bottom:1.5rem}
.membership-rank{font-size:1.3rem;font-weight:700;margin-bottom:0.5rem}
.membership-info{display:flex;gap:1.5rem;font-size:0.85rem;opacity:0.7;margin-bottom:0.8rem}
.membership-actions{display:flex;gap:0.5rem;margin-bottom:0.8rem}
.rank-progress{margin-top:0.5rem}
.rank-progress-label{font-size:0.8rem;opacity:0.7;margin-bottom:0.3rem}
.rank-progress-bar{height:8px;background:rgba(255,255,255,0.1);border-radius:4px;overflow:hidden}
.rank-progress-fill{height:100%;border-radius:4px;transition:width 0.5s}
.fanclub-wall{margin-bottom:2rem}
.fanclub-wall h3{margin-bottom:1rem}
.wall-post-form{margin-bottom:1rem}
.wall-post-form textarea{width:100%;min-height:60px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:10px;color:inherit;padding:0.6rem;resize:vertical;margin-bottom:0.5rem}
.wall-post{background:rgba(255,255,255,0.05);border-radius:12px;padding:1rem;margin-bottom:0.8rem;position:relative}
.wall-pinned{border:1px solid rgba(255,215,0,0.3);background:rgba(255,215,0,0.05)}
.pin-badge{position:absolute;top:0.5rem;right:0.5rem;font-size:0.8rem}
.wall-post-header{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem;flex-wrap:wrap}
.wall-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}
.wall-time{font-size:0.75rem;opacity:0.5;margin-left:auto}
.wall-post-text{font-size:0.9rem;line-height:1.5}
.btn-icon{background:none;border:none;cursor:pointer;font-size:0.8rem;opacity:0.5;padding:2px}
.btn-icon:hover{opacity:1}
.fanclub-members h3{margin-bottom:1rem}
.member-row{display:flex;align-items:center;gap:0.8rem;padding:0.6rem 0;border-bottom:1px solid rgba(255,255,255,0.05)}
.member-rank-num{font-weight:700;width:30px;text-align:center;opacity:0.6}
.member-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}
.member-info{flex:1}
.member-info a{color:inherit;text-decoration:none;font-weight:600}
.member-badge{font-size:0.75rem;margin-left:0.5rem}
.member-docks{font-size:0.85rem;opacity:0.7}
.fanclub-hint{text-align:center;opacity:0.5;padding:2rem 0}
.fanclub-create-form .form-group{margin-bottom:1rem}
.fanclub-create-form label{display:block;font-size:0.85rem;margin-bottom:0.3rem;opacity:0.8}
.fanclub-create-form input,.fanclub-create-form textarea{width:100%;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:10px;color:inherit;padding:0.6rem}
.fanclub-create-form .form-row{display:flex;gap:1rem;flex-wrap:wrap}
.fanclub-create-form .form-row .form-group{flex:1;min-width:120px}
.btn-danger{background:rgba(239,68,68,0.2)!important;border-color:rgba(239,68,68,0.4)!important;color:#ef4444!important}

/* ===== Audio-Rooms ===== */
.audio-rooms-hero{text-align:center;padding:2rem 1rem;background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:16px;margin-bottom:1.5rem}
.audio-rooms-hero h1{font-size:2rem;margin:0 0 .5rem}
.audio-rooms-hero p{color:#94a3b8;margin:0 0 1.5rem}
.audio-rooms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-bottom:1.5rem}
.audio-room-card{display:block;background:#1e293b;border-radius:12px;padding:1.2rem;text-decoration:none;color:#fff;transition:transform .2s,box-shadow .2s;border:1px solid #334155}
.audio-room-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.audio-room-card.live{border-color:#ef4444;box-shadow:0 0 12px rgba(239,68,68,.15)}
.audio-room-card.ended{opacity:.7}
.audio-room-card h3{margin:0 0 .5rem;font-size:1.1rem}
.audio-room-card-status{font-size:.75rem;font-weight:700;color:#ef4444;margin-bottom:.5rem}
.audio-room-card-topic{font-size:.85rem;color:#94a3b8;margin-bottom:.5rem}
.audio-room-card-meta{display:flex;gap:1rem;font-size:.8rem;color:#64748b}
.audio-rooms-empty{text-align:center;padding:3rem 1rem;color:#64748b}

/* Room Detail */
.audio-room-page{max-width:700px;margin:0 auto}
.audio-room-header{text-align:center;padding:1.5rem;background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:16px;margin-bottom:1.5rem}
.audio-room-status{font-size:.8rem;font-weight:700;margin-bottom:.5rem}
.audio-room-status.live{color:#ef4444}
.audio-room-status.ended{color:#64748b}
.audio-room-title{font-size:1.6rem;margin:0 0 .5rem}
.audio-room-topic{color:#a78bfa;margin-bottom:.5rem}
.audio-room-desc{color:#94a3b8;font-size:.9rem;margin:.5rem 0 0}
.audio-room-meta{display:flex;justify-content:center;gap:1.5rem;font-size:.85rem;color:#64748b;margin-top:1rem}
.audio-room-meta a{color:#7c3aed}
.audio-room-section{background:#1e293b;border-radius:12px;padding:1.2rem;margin-bottom:1rem}
.audio-room-section h3{margin:0 0 1rem;font-size:1rem}

/* Speakers Grid */
.audio-speakers-grid{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.audio-speaker-card{display:flex;flex-direction:column;align-items:center;padding:1rem;border-radius:12px;background:#0f172a;min-width:90px;position:relative}
.audio-speaker-card.host{border:2px solid #f59e0b}
.audio-speaker-card.speaking .audio-speaker-avatar{box-shadow:0 0 0 3px #22c55e}
.audio-speaker-card.muted{opacity:.7}
.audio-speaker-avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;position:relative;margin-bottom:.5rem}
.audio-speaker-avatar img{width:100%;height:100%;object-fit:cover}
.audio-speaker-avatar .avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#334155;font-size:1.5rem}
.mute-badge{position:absolute;bottom:-2px;right:-2px;background:#ef4444;border-radius:50%;font-size:.7rem;width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.speaking-indicator{position:absolute;bottom:-2px;right:-2px;width:12px;height:12px;background:#22c55e;border-radius:50%;border:2px solid #1e293b;animation:pulse-speak 1.5s infinite}
@keyframes pulse-speak{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.4)}50%{box-shadow:0 0 0 6px rgba(34,197,94,0)}}
.audio-speaker-name{font-size:.8rem;text-align:center;white-space:nowrap}

/* Listeners */
.audio-listeners-grid{display:flex;flex-wrap:wrap;gap:.5rem}
.audio-listener-chip{background:#0f172a;padding:.4rem .8rem;border-radius:20px;font-size:.8rem;color:#94a3b8}

/* Hands */
.audio-hands-list{display:flex;flex-direction:column;gap:.5rem}
.audio-hand-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem;background:#0f172a;border-radius:8px}

/* Chat */
.audio-chat-box{max-height:300px;overflow-y:auto;padding:.5rem;background:#0f172a;border-radius:8px;margin-bottom:.5rem}
.audio-chat-msg{padding:.3rem 0;font-size:.85rem;line-height:1.4}
.audio-chat-msg strong{color:#a78bfa}
.audio-chat-time{color:#475569;font-size:.7rem;margin-left:.5rem}
.audio-chat-empty{color:#475569;text-align:center;padding:1rem;font-size:.85rem}
.audio-chat-form{display:flex;gap:.5rem}
.audio-chat-form input{flex:1;background:#0f172a;border:1px solid #334155;border-radius:8px;padding:.5rem .8rem;color:#fff;font-size:.85rem}

/* Actions */
.audio-room-actions{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin:1rem 0}

/* ── Tournaments ── */
.tournament-hero{background:#1a1a2e;border-radius:16px;padding:24px;margin-bottom:20px;border-left:4px solid #7c3aed}
.tournament-hero h1{margin:8px 0;font-size:1.6rem}
.tournament-hero-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.tournament-desc{color:#9ca3af;margin:8px 0 12px}
.tournament-stats-bar{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}
.tournament-stat{background:#2a2a3e;padding:6px 12px;border-radius:8px;font-size:.85rem;color:#d1d5db}
.tournament-host{color:#9ca3af;font-size:.85rem;margin:8px 0 12px}
.tournament-host a{color:#7c3aed}
.tournament-cat-badge{background:#2a2a3e;padding:4px 10px;border-radius:12px;font-size:.8rem}
.tournament-status-badge{padding:4px 10px;border-radius:12px;font-size:.8rem;font-weight:600}
.tournament-status-open{background:#1e3a5f;color:#60a5fa}
.tournament-status-in_progress{background:#064e3b;color:#34d399}
.tournament-status-ended{background:#374151;color:#9ca3af}
.tournament-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.tournament-card{background:#1a1a2e;border-radius:12px;padding:16px;text-decoration:none;color:#e0e0e0;transition:transform .2s,box-shadow .2s;display:block}
.tournament-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(124,58,237,.2)}
.tournament-card-ended{opacity:.7}
.tournament-card h3{margin:8px 0;font-size:1.1rem}
.tournament-card-header{display:flex;justify-content:space-between;align-items:center}
.tournament-card-meta{display:flex;gap:12px;font-size:.8rem;color:#9ca3af;flex-wrap:wrap}
.tournament-participants-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.tournament-participant-chip{background:#1a1a2e;padding:6px 14px;border-radius:20px;font-size:.85rem;display:flex;align-items:center;gap:6px}
.tournament-participant-chip.eliminated{opacity:.4;text-decoration:line-through}
.tp-seed{color:#7c3aed;font-weight:700;font-size:.75rem}
.tp-elim{font-size:.75rem}
.tp-winner{font-size:1rem}
.tournament-bracket{display:flex;gap:24px;overflow-x:auto;padding:16px 0}
.bracket-round{display:flex;flex-direction:column;gap:16px;min-width:220px}
.bracket-round-title{text-align:center;font-weight:700;color:#7c3aed;margin-bottom:8px;font-size:.9rem}
.bracket-match{background:#1a1a2e;border-radius:12px;padding:12px;border:1px solid #2a2a3e}
.bracket-match-active{border-color:#7c3aed;box-shadow:0 0 12px rgba(124,58,237,.2)}
.bracket-match-done{opacity:.7}
.bracket-player{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:6px;transition:background .2s}
.bracket-player:hover{background:#2a2a3e}
.bracket-winner{background:#064e3b!important;color:#34d399;font-weight:700}
.bracket-score{font-weight:700;color:#7c3aed;min-width:24px;text-align:right}
.bracket-votes{font-size:.75rem;color:#60a5fa;margin-left:4px}
.bracket-vs{text-align:center;font-size:.7rem;color:#6b7280;padding:2px 0}
.bracket-creator-controls{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px;justify-content:center}
.btn-sm{background:#2a2a3e;color:#e0e0e0;border:none;padding:4px 8px;border-radius:6px;font-size:.75rem;cursor:pointer}
.btn-sm:hover{background:#3a3a4e}
.btn-sm.btn-win{background:#7c3aed;color:#fff}
.btn-sm.btn-win:hover{background:#6d28d9}
.bracket-your-vote{text-align:center;font-size:.7rem;color:#34d399;margin-top:4px}
.tournament-winner-box{text-align:center;background:linear-gradient(135deg,#1a1a2e,#2a1a3e);border:2px solid #f59e0b;border-radius:16px;padding:32px;margin:24px 0}
.tournament-winner-box .trophy-icon{font-size:3rem;margin-bottom:8px}
.tournament-winner-box h2{color:#f59e0b;margin:8px 0}
.tournament-winner-box p{color:#d1d5db}
@media(max-width:600px){.tournament-bracket{flex-direction:column}.bracket-round{min-width:auto}}

/* === LEADERBOARD === */
.lb-page { max-width: 700px; margin: 0 auto; padding: 1rem; }
.lb-header { text-align: center; margin-bottom: 1.5rem; }
.lb-header h1 { font-size: 1.8rem; margin: 0; }
.lb-subtitle { color: #888; margin: .3rem 0 0; font-size: .95rem; }

.lb-cats { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: 1rem; -webkit-overflow-scrolling: touch; }
.lb-cat { display: flex; flex-direction: column; align-items: center; padding: .6rem .8rem; border-radius: 12px; background: #1a1a2e; text-decoration: none; color: #ccc; min-width: 80px; font-size: .75rem; transition: all .2s; flex-shrink: 0; }
.lb-cat:hover { background: #252547; }
.lb-cat.active { background: linear-gradient(135deg, #6c5ce7, #a855f7); color: #fff; }
.lb-cat-icon { font-size: 1.4rem; margin-bottom: .2rem; }
.lb-cat-label { white-space: nowrap; }

.lb-periods { display: flex; justify-content: center; gap: .5rem; margin-bottom: 1.5rem; }
.lb-period { padding: .4rem 1rem; border-radius: 20px; background: #1a1a2e; color: #aaa; text-decoration: none; font-size: .85rem; transition: all .2s; }
.lb-period:hover { background: #252547; }
.lb-period.active { background: #6c5ce7; color: #fff; }

.lb-myrank { display: flex; align-items: center; justify-content: center; gap: 1rem; background: linear-gradient(135deg, #1a1a2e, #252547); border: 1px solid #6c5ce744; border-radius: 12px; padding: .8rem 1.2rem; margin-bottom: 1.5rem; }
.lb-myrank-label { color: #888; font-size: .85rem; }
.lb-myrank-num { font-size: 1.4rem; font-weight: 700; color: #a855f7; }
.lb-myrank-score { color: #ccc; font-size: .9rem; }

.lb-podium { display: flex; align-items: flex-end; justify-content: center; gap: 1rem; margin-bottom: 2rem; padding: 0 1rem; }
.lb-podium-item { display: flex; flex-direction: column; align-items: center; padding: 1rem .8rem; border-radius: 16px; background: #1a1a2e; flex: 1; max-width: 160px; }
.lb-podium-gold { order: 2; background: linear-gradient(135deg, #1a1a2e, #3d2e00); border: 1px solid #ffd70044; padding-bottom: 1.5rem; }
.lb-podium-silver { order: 1; background: linear-gradient(135deg, #1a1a2e, #2a2a3e); border: 1px solid #c0c0c044; }
.lb-podium-bronze { order: 3; background: linear-gradient(135deg, #1a1a2e, #2e1f0f); border: 1px solid #cd7f3244; }
.lb-podium-medal { font-size: 2rem; margin-bottom: .3rem; }
.lb-podium-avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; margin-bottom: .4rem; background: #333; }
.lb-podium-gold .lb-podium-avatar { width: 68px; height: 68px; box-shadow: 0 0 20px #ffd70033; }
.lb-podium-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lb-podium-initials { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 700; color: #888; background: #252547; }
.lb-podium-name { color: #eee; font-weight: 600; font-size: .85rem; text-decoration: none; text-align: center; }
.lb-podium-name:hover { color: #a855f7; }
.lb-podium-score { color: #888; font-size: .8rem; margin-top: .3rem; }
.lb-creator-badge { color: #a855f7; font-size: .7rem; margin-left: .2rem; }

.lb-list { display: flex; flex-direction: column; gap: .4rem; }
.lb-row { display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; background: #1a1a2e; border-radius: 10px; transition: background .2s; }
.lb-row:hover { background: #252547; }
.lb-row-me { border: 1px solid #6c5ce744; background: #1e1e3a; }
.lb-rank { font-weight: 700; color: #666; font-size: .95rem; min-width: 28px; text-align: center; }
.lb-row-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #333; }
.lb-row-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lb-row-initials { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #888; background: #252547; font-size: .9rem; }
.lb-row-name { flex: 1; color: #ddd; text-decoration: none; font-weight: 500; font-size: .9rem; }
.lb-row-name:hover { color: #a855f7; }
.lb-row-score { color: #888; font-size: .85rem; white-space: nowrap; }
.lb-empty { text-align: center; color: #666; padding: 2rem; }

@media (max-width: 500px) {
    .lb-podium { gap: .5rem; }
    .lb-podium-item { padding: .7rem .4rem; }
    .lb-podium-avatar { width: 44px; height: 44px; }
    .lb-podium-gold .lb-podium-avatar { width: 52px; height: 52px; }
    .lb-cats { gap: .3rem; }
    .lb-cat { min-width: 65px; padding: .5rem .5rem; }
}

/* === Subscriptions / Abonnements v19 === */
.sub-hero{text-align:center;padding:2rem 1rem 1.5rem;background:linear-gradient(135deg,#7c3aed22,#ec489922);border-radius:16px;margin-bottom:1.5rem}
.sub-hero h1{font-size:1.8rem;margin:0 0 .5rem}
.sub-hero p{color:#94a3b8;margin:0 0 1rem}
.sub-hero-links{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.sub-stats-bar{display:flex;gap:2rem;justify-content:center;margin-top:1rem}
.sub-stat{display:flex;flex-direction:column;align-items:center}
.sub-stat-num{font-size:1.6rem;font-weight:700;color:#7c3aed}
.sub-stat-label{font-size:.8rem;color:#94a3b8}
.sub-create-card{background:#1e293b;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem}
.sub-create-card h3{margin:0 0 1rem;font-size:1.1rem}
.sub-create-card .form-row{display:flex;gap:.75rem;margin-bottom:.75rem}
.sub-create-card input,.sub-create-card textarea,.sub-create-card select{width:100%;padding:.6rem .8rem;border:1px solid #334155;border-radius:8px;background:#0f172a;color:#e2e8f0;font-size:.9rem}
.sub-create-card textarea{resize:vertical}
.sub-tiers-manage{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.sub-tier-card{background:#1e293b;border-radius:12px;border:2px solid #334155;overflow:hidden}
.sub-tier-header{padding:1rem;display:flex;align-items:center;gap:.75rem}
.sub-tier-emoji{font-size:1.8rem}
.sub-tier-name{font-weight:700;font-size:1.1rem;flex:1}
.sub-tier-price{font-size:.85rem;color:#a78bfa;font-weight:600}
.sub-tier-desc{padding:0 1rem;color:#94a3b8;font-size:.85rem;min-height:40px}
.sub-tier-footer{padding:.75rem 1rem;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #334155;font-size:.8rem;color:#64748b}
.sub-empty{text-align:center;padding:3rem 1rem;color:#64748b;font-size:1rem}
.sub-subscribers{margin-top:1.5rem}
.sub-subscribers h3{margin:0 0 1rem}
.sub-subscriber-row{display:flex;align-items:center;gap:.75rem;padding:.6rem 0;border-bottom:1px solid #1e293b}
.sub-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}
.sub-badge-mini{padding:2px 8px;border-radius:12px;font-size:.75rem;color:#fff;font-weight:600}
.sub-date{margin-left:auto;font-size:.75rem;color:#64748b}
/* Creator page */
.sub-creator-page{max-width:700px;margin:0 auto}
.sub-creator-header{text-align:center;padding:2rem 1rem 1.5rem}
.sub-creator-avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;margin-bottom:.75rem;border:3px solid #7c3aed}
.sub-creator-header h1{margin:.5rem 0 .25rem;font-size:1.4rem}
.sub-creator-header p{color:#94a3b8;font-size:.9rem}
.sub-active-box{background:#10b98122;border:1px solid #10b981;border-radius:10px;padding:.75rem 1rem;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:space-between}
.sub-tiers-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.sub-tier-offer{background:#1e293b;border-radius:14px;border:2px solid #334155;overflow:hidden;transition:transform .2s}
.sub-tier-offer:hover{transform:translateY(-2px)}
.sub-tier-active{box-shadow:0 0 20px #7c3aed44}
.sub-tier-offer-header{padding:1.2rem;text-align:center;color:#fff}
.sub-tier-offer-emoji{font-size:2.2rem;display:block;margin-bottom:.25rem}
.sub-tier-offer-name{font-weight:700;font-size:1.1rem}
.sub-tier-offer-body{padding:1rem}
.sub-tier-offer-price{font-size:1.5rem;font-weight:700;text-align:center;margin-bottom:.75rem;color:#e2e8f0}
.sub-tier-offer-price small{font-size:.7rem;color:#94a3b8}
.sub-tier-offer-body p{color:#94a3b8;font-size:.85rem;min-height:50px}
.sub-tier-offer-subs{text-align:center;font-size:.8rem;color:#64748b;margin:.75rem 0}
.sub-tier-current{text-align:center;padding:.5rem;color:#10b981;font-weight:600;font-size:.9rem}
.btn-full{width:100%}
/* My subs */
.sub-my-list{display:flex;flex-direction:column;gap:.75rem}
.sub-my-card{background:#1e293b;border-radius:12px;padding:1rem;display:flex;align-items:center;gap:1rem}
.sub-my-info{flex:1;display:flex;flex-direction:column;gap:.25rem}
.sub-my-creator{font-weight:700;color:#e2e8f0;text-decoration:none}
.sub-my-creator:hover{color:#a78bfa}
.sub-my-price{font-size:.8rem;color:#a78bfa}
.sub-my-since{font-size:.75rem;color:#64748b}
/* Browse grid */
.sub-creators-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.sub-creator-card{background:#1e293b;border-radius:12px;padding:1.2rem;text-decoration:none;color:#e2e8f0;text-align:center;transition:transform .2s}
.sub-creator-card:hover{transform:translateY(-3px);background:#243047}
.sub-creator-card-img{width:64px;height:64px;border-radius:50%;object-fit:cover;margin-bottom:.5rem}
.sub-creator-card h3{margin:.5rem 0 .25rem;font-size:1rem}
.sub-creator-bio{color:#94a3b8;font-size:.8rem;margin:0 0 .75rem}
.sub-creator-meta{display:flex;justify-content:center;gap:1rem;font-size:.8rem;color:#64748b}
@media(max-width:600px){.sub-tiers-grid{grid-template-columns:1fr}.sub-create-card .form-row{flex-direction:column}}

/* === CHALLENGES === */
.ch-page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.ch-page-header h2{margin:0}
.ch-section-title{color:#ccc;font-size:1rem;margin-bottom:1rem}
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-bottom:1.5rem}
.ch-card{background:#1a1a2e;border-radius:16px;padding:1.2rem;text-decoration:none;color:#fff;transition:transform .2s,box-shadow .2s;border:1px solid rgba(255,255,255,.06)}
.ch-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.ch-card-ended{opacity:.7}
.ch-card-cat{font-size:2rem;margin-bottom:.5rem}
.ch-card h4{margin:0 0 .5rem;font-size:1.1rem}
.ch-card-meta{display:flex;gap:.8rem;font-size:.8rem;color:#888;margin-top:.3rem}

.ch-create{max-width:600px;margin:0 auto}
.ch-create h2{margin-bottom:1.5rem}
.ch-create .form-group{margin-bottom:1rem}
.ch-create label{display:block;color:#aaa;font-size:.85rem;margin-bottom:.3rem}
.ch-create input,.ch-create textarea,.ch-create select{width:100%;padding:.7rem;background:#1a1a2e;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#fff;font-size:.95rem}

.ch-hero{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:20px;padding:2rem;margin-bottom:1.5rem;border:1px solid rgba(255,255,255,.06)}
.ch-cat-badge{background:rgba(255,255,255,.08);padding:.3rem .8rem;border-radius:20px;font-size:.85rem;display:inline-block;margin-bottom:.8rem}
.ch-hero h2{margin:.5rem 0}
.ch-meta{display:flex;flex-wrap:wrap;gap:1rem;font-size:.85rem;color:#888;margin:.8rem 0}
.ch-creator{color:#7c3aed;text-decoration:none;display:flex;align-items:center;gap:.4rem}
.ch-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover}
.ch-desc{color:#ccc;line-height:1.6;margin-top:1rem}
.ch-stats-bar{display:flex;gap:2rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.06)}
.ch-stat{text-align:center}
.ch-stat-val{display:block;font-size:1.2rem;font-weight:700}
.ch-stat-lbl{font-size:.75rem;color:#888}

.ch-submit-box{background:#1a1a2e;border-radius:16px;padding:1.5rem;margin-bottom:1.5rem;border:1px solid rgba(124,58,237,.3)}
.ch-submit-box h3{margin:0 0 1rem;color:#7c3aed}
.ch-submit-box .form-group{margin-bottom:1rem}
.ch-submit-box label{display:block;color:#aaa;font-size:.85rem;margin-bottom:.3rem}
.ch-submit-box input,.ch-submit-box textarea{width:100%;padding:.6rem;background:#16213e;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#fff}
.ch-submitted-msg{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);border-radius:12px;padding:1rem;text-align:center;margin-bottom:1.5rem;color:#22c55e}

.ch-creator-actions{text-align:center;margin-bottom:1.5rem}
.ch-winner-box{background:linear-gradient(135deg,#1a1a2e,#2d1f4e);border-radius:20px;padding:2rem;text-align:center;margin-bottom:1.5rem;border:1px solid rgba(255,215,0,.3)}
.ch-winner-trophy{font-size:3rem;animation:bounce 1s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.ch-winner-name{font-size:1.3rem;font-weight:700;margin:.5rem 0;display:flex;align-items:center;justify-content:center;gap:.5rem}
.ch-winner-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}
.ch-winner-entry{color:#ccc;font-size:.95rem}
.ch-winner-votes{color:#ff6b6b;margin-top:.3rem}
.ch-winner-prize{color:#ffd700;font-size:1.1rem;font-weight:700;margin-top:.5rem}

.ch-entries h3{margin-bottom:1rem}
.ch-entry-card{background:#1a1a2e;border-radius:14px;padding:1.2rem;margin-bottom:1rem;border:1px solid rgba(255,255,255,.06);position:relative}
.ch-entry-card.ch-mine{border-color:rgba(124,58,237,.3);background:rgba(124,58,237,.05)}
.ch-entry-rank{position:absolute;top:1rem;right:1rem;background:rgba(255,255,255,.08);padding:.2rem .6rem;border-radius:10px;font-size:.8rem;font-weight:700;color:#888}
.ch-entry-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.ch-entry-author{color:#7c3aed;text-decoration:none;display:flex;align-items:center;gap:.4rem;font-size:.9rem}
.ch-entry-date{color:#666;font-size:.8rem}
.ch-entry-title{margin:.3rem 0;font-size:1rem}
.ch-entry-desc{color:#aaa;font-size:.9rem;margin:.5rem 0}
.ch-entry-image{margin:.8rem 0;border-radius:12px;overflow:hidden}
.ch-entry-image img{width:100%;max-height:400px;object-fit:cover;display:block}
.ch-entry-footer{display:flex;align-items:center;gap:.8rem;margin-top:.8rem}
.btn-vote{background:none;border:1px solid rgba(255,107,107,.3);color:#ff6b6b;padding:.4rem .8rem;border-radius:20px;cursor:pointer;font-size:.9rem;transition:all .2s}
.btn-vote:hover,.btn-vote.voted{background:rgba(255,107,107,.15);border-color:#ff6b6b}
.vote-display{color:#ff6b6b;font-size:.9rem}
.btn-delete-entry{background:none;border:none;cursor:pointer;font-size:1rem;opacity:.4;transition:opacity .2s}
.btn-delete-entry:hover{opacity:1}
.ch-no-entries{color:#666;text-align:center;padding:2rem}
.ch-empty{text-align:center;padding:3rem;color:#666}
.ch-empty .btn{margin-top:1rem}

@media(max-width:600px){
    .ch-grid{grid-template-columns:1fr}
    .ch-stats-bar{gap:1rem;flex-wrap:wrap}
    .ch-hero{padding:1.2rem}
}

/* ===== BACKSTAGE / BEHIND THE SCENES ===== */
.bts-container{max-width:700px;margin:0 auto;padding:16px}
.bts-hero{text-align:center;padding:30px 20px;background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:16px;margin-bottom:20px}
.bts-hero h2{font-size:1.6rem;margin:0 0 8px}
.bts-hero p{color:#aaa;margin:0 0 16px}
.bts-success{background:#1a3a2a;color:#4ade80;padding:12px;border-radius:10px;text-align:center;margin-bottom:16px}
.bts-error{background:#3a1a1a;color:#f87171;padding:12px;border-radius:10px;text-align:center;margin-bottom:16px}

/* Form */
.bts-form{background:#1a1a2e;border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:16px}
.bts-field label{display:block;font-weight:600;margin-bottom:6px;color:#ccc}
.bts-field input[type="text"],.bts-field textarea,.bts-field select{width:100%;padding:10px 14px;background:#0d0d1a;border:1px solid #333;border-radius:10px;color:#fff;font-size:.95rem}
.bts-field textarea{resize:vertical}
.bts-field small{color:#888;font-size:.8rem;margin-top:4px;display:block}
.bts-select{appearance:auto}
.bts-cat-select{display:flex;flex-wrap:wrap;gap:8px}
.bts-cat-option{cursor:pointer}
.bts-cat-option input{display:none}
.bts-cat-option span{display:inline-block;padding:6px 14px;background:#0d0d1a;border:2px solid #333;border-radius:20px;font-size:.85rem;transition:.2s}
.bts-cat-option input:checked+span{border-color:#a855f7;background:#2d1a4e;color:#d8b4fe}

/* Creator bar */
.bts-creators-bar{display:flex;gap:12px;overflow-x:auto;padding:0 0 16px;scrollbar-width:none}
.bts-creators-bar::-webkit-scrollbar{display:none}
.bts-creator-chip{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:70px;text-decoration:none;color:#ccc}
.bts-creator-chip img{width:50px;height:50px;border-radius:50%;border:2px solid #a855f7;object-fit:cover}
.bts-creator-chip span{font-size:.75rem;white-space:nowrap}
.bts-creator-chip small{font-size:.65rem;color:#888}

/* Creator hero */
.bts-creator-hero{text-align:center;padding:24px;background:linear-gradient(135deg,#1a1a2e,#2d1a4e);border-radius:16px;margin-bottom:20px}
.bts-creator-avatar img{width:72px;height:72px;border-radius:50%;border:3px solid #a855f7;object-fit:cover}
.bts-creator-hero h2{margin:10px 0 4px}
.bts-creator-hero p{color:#aaa;margin:0 0 8px}
.bts-tier-badge{display:inline-block;padding:4px 12px;background:#2d1a4e;border:1px solid #a855f7;border-radius:20px;font-size:.8rem;color:#d8b4fe}

/* Feed */
.bts-feed{display:flex;flex-direction:column;gap:16px}
.bts-card{background:#1a1a2e;border-radius:16px;padding:20px;border:1px solid #222;position:relative;overflow:hidden}
.bts-card.bts-locked{min-height:180px}
.bts-card-header{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.bts-card-author{display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff;font-weight:600}
.bts-card-author img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.bts-cat-tag{font-size:.75rem;padding:3px 10px;background:#0d0d1a;border-radius:12px;color:#aaa}
.bts-tier-tag{font-size:.75rem;padding:3px 10px;background:#2d1a4e;border:1px solid #7c3aed;border-radius:12px;color:#d8b4fe}
.bts-access-tag{font-size:.75rem;padding:3px 10px;background:#1a2e1a;border-radius:12px;color:#86efac}
.bts-time{font-size:.7rem;color:#666;margin-left:auto}
.bts-card-title{font-size:1.1rem;margin:0 0 8px;color:#fff}
.bts-card-content{color:#ccc;font-size:.9rem;line-height:1.5;margin-bottom:12px;white-space:pre-wrap;word-break:break-word}
.bts-card-image{margin-bottom:12px;border-radius:10px;overflow:hidden}
.bts-card-image img{width:100%;display:block;border-radius:10px}

/* Lock overlay */
.bts-lock-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 20px;text-align:center;background:linear-gradient(135deg,rgba(26,26,46,.9),rgba(45,26,78,.9));border-radius:10px}
.bts-lock-icon{font-size:2.5rem;margin-bottom:10px}
.bts-lock-overlay p{color:#aaa;margin:0 0 12px;font-size:.9rem}

/* Actions */
.bts-card-actions{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.bts-like-btn{text-decoration:none;color:#ccc;font-size:.9rem;transition:.2s}
.bts-like-btn.liked{color:#f87171}
.bts-like-btn:hover{transform:scale(1.1)}
.bts-comment-count{color:#888;font-size:.85rem}
.bts-delete-btn{color:#666;text-decoration:none;margin-left:auto;font-size:.85rem}
.bts-delete-btn:hover{color:#f87171}

/* Comments */
.bts-comments{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;padding:8px 0;border-top:1px solid #222}
.bts-comment{font-size:.85rem;color:#ccc}
.bts-comment strong{color:#d8b4fe;margin-right:6px}
.bts-comment-form{display:flex;gap:8px}
.bts-comment-form input{flex:1;padding:8px 12px;background:#0d0d1a;border:1px solid #333;border-radius:20px;color:#fff;font-size:.85rem}
.bts-comment-form button{background:#a855f7;color:#fff;border:none;border-radius:50%;width:34px;height:34px;cursor:pointer;font-size:1rem}

/* Empty */
.bts-empty{text-align:center;padding:40px 20px;color:#888}
.bts-empty-icon{font-size:3rem;margin-bottom:12px}
.bts-empty h3{color:#fff;margin:0 0 8px}

@media(max-width:600px){
    .bts-container{padding:10px}
    .bts-hero{padding:20px 14px}
    .bts-form{padding:16px}
    .bts-card{padding:14px}
}

/* ============ GROUPS ============ */
.groups-page { max-width: 800px; margin: 0 auto; padding: 1rem; }
.groups-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.groups-header h2 { margin: 0; }
.groups-header-actions { display: flex; gap: .5rem; }
.groups-search { display: flex; gap: .5rem; margin-bottom: 1rem; }
.groups-search input { flex: 1; padding: .6rem .8rem; border: 1px solid #333; border-radius: 12px; background: #1a1a2e; color: #fff; font-size: .95rem; }
.groups-search button { padding: .6rem 1rem; border: none; border-radius: 12px; background: #7c3aed; color: #fff; cursor: pointer; }
.groups-categories { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: 1rem; -webkit-overflow-scrolling: touch; }
.cat-chip { padding: .4rem .8rem; border-radius: 20px; background: #1a1a2e; color: #aaa; text-decoration: none; white-space: nowrap; font-size: .85rem; border: 1px solid #333; transition: all .2s; }
.cat-chip.active, .cat-chip:hover { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.group-card { background: #16213e; border-radius: 16px; padding: 1.2rem; text-decoration: none; color: #fff; transition: transform .2s, box-shadow .2s; display: block; }
.group-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(124,58,237,.2); }
.group-card-icon { font-size: 2rem; margin-bottom: .5rem; }
.group-card h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.group-card-desc { color: #aaa; font-size: .85rem; margin: 0 0 .5rem; line-height: 1.4; }
.group-card-meta { color: #888; font-size: .8rem; margin: 0 0 .3rem; }
.group-card-creator { color: #666; font-size: .75rem; }

/* Group Detail */
.group-detail { max-width: 700px; margin: 0 auto; padding: 1rem; }
.group-hero { border-radius: 20px; padding: 2rem 1.5rem; text-align: center; margin-bottom: 1rem; color: #fff; }
.group-hero-icon { font-size: 3rem; margin-bottom: .5rem; }
.group-hero h1 { margin: 0 0 .3rem; font-size: 1.6rem; }
.group-meta { color: rgba(255,255,255,.8); font-size: .9rem; margin: .3rem 0; }
.group-desc { color: rgba(255,255,255,.9); font-size: .9rem; margin-top: .5rem; max-width: 500px; margin-left: auto; margin-right: auto; }
.group-stats-bar { display: flex; justify-content: center; gap: 2rem; padding: 1rem; background: #16213e; border-radius: 14px; margin-bottom: 1rem; }
.group-stat { text-align: center; }
.group-stat-val { display: block; font-size: 1.3rem; font-weight: 700; color: #fff; }
.group-stat-lbl { font-size: .75rem; color: #888; }
.group-actions { display: flex; gap: .5rem; justify-content: center; margin-bottom: 1rem; flex-wrap: wrap; }
.btn-group-join { padding: .6rem 1.2rem; background: #7c3aed; color: #fff; border-radius: 12px; text-decoration: none; font-weight: 600; }
.btn-group-join:hover { background: #6d28d9; }
.btn-group-pending { padding: .6rem 1.2rem; background: #333; color: #aaa; border-radius: 12px; }
.btn-group-members { padding: .5rem 1rem; background: #1a1a2e; color: #7c3aed; border-radius: 12px; text-decoration: none; border: 1px solid #7c3aed; }
.btn-group-leave { padding: .5rem 1rem; background: #1a1a2e; color: #ef4444; border-radius: 12px; text-decoration: none; border: 1px solid #ef4444; }
.badge-pending { background: #ef4444; color: #fff; border-radius: 50%; padding: 0 .4rem; font-size: .75rem; margin-left: .3rem; }
.group-locked { text-align: center; padding: 2rem; color: #888; background: #16213e; border-radius: 14px; }

/* Group Post Form */
.group-post-form { background: #16213e; border-radius: 14px; padding: 1rem; margin-bottom: 1rem; }
.group-post-form textarea { width: 100%; min-height: 80px; background: #1a1a2e; border: 1px solid #333; border-radius: 10px; color: #fff; padding: .6rem; resize: vertical; font-size: .9rem; }
.group-post-form-actions { display: flex; justify-content: space-between; align-items: center; margin-top: .5rem; }
.group-post-form-actions button { padding: .5rem 1.2rem; background: #7c3aed; color: #fff; border: none; border-radius: 10px; cursor: pointer; font-weight: 600; }
.btn-upload-img { cursor: pointer; font-size: 1.2rem; padding: .3rem; }

/* Group Posts */
.group-feed { display: flex; flex-direction: column; gap: .8rem; }
.group-post { background: #16213e; border-radius: 14px; padding: 1rem; }
.group-post.pinned { border: 1px solid #f59e0b; }
.group-post.own { border-left: 3px solid #7c3aed; }
.pin-badge { font-size: .75rem; color: #f59e0b; margin-bottom: .4rem; }
.group-post-header { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.group-post-header .avatar-sm { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.group-post-author { color: #7c3aed; text-decoration: none; font-weight: 600; font-size: .9rem; }
.group-post-time { color: #666; font-size: .75rem; display: block; }
.group-post-content { color: #ddd; font-size: .9rem; line-height: 1.5; margin-bottom: .5rem; word-break: break-word; }
.group-post-image { max-width: 100%; border-radius: 10px; margin-bottom: .5rem; }
.group-post-actions { display: flex; gap: 1rem; align-items: center; }
.group-like-btn { text-decoration: none; color: #888; font-size: .9rem; transition: color .2s; }
.group-like-btn.liked { color: #ef4444; }
.group-delete-btn { text-decoration: none; color: #666; font-size: .85rem; }
.group-delete-btn:hover { color: #ef4444; }

/* Members Page */
.group-members-page { max-width: 600px; margin: 0 auto; padding: 1rem; }
.group-members-page h2, .group-members-page h3 { margin: 1rem 0 .5rem; }
.back-link { color: #7c3aed; text-decoration: none; font-size: .9rem; }
.members-list { display: flex; flex-direction: column; gap: .4rem; }
.member-card { display: flex; align-items: center; gap: .5rem; background: #16213e; padding: .6rem .8rem; border-radius: 10px; flex-wrap: wrap; }
.member-card .avatar-sm { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.member-card a { color: #7c3aed; text-decoration: none; font-size: .9rem; }
.member-role { font-size: .9rem; }
.member-since { color: #666; font-size: .75rem; margin-left: auto; }
.btn-sm { padding: .2rem .5rem; border-radius: 8px; text-decoration: none; font-size: .8rem; background: #1a1a2e; border: 1px solid #333; }
.btn-approve { color: #22c55e; border-color: #22c55e; }
.btn-reject { color: #ef4444; border-color: #ef4444; }

/* Group Create */
.group-create { max-width: 500px; margin: 0 auto; padding: 1rem; }
.group-create h2 { margin-bottom: 1rem; }
.group-create label { display: block; color: #aaa; font-size: .85rem; margin: .8rem 0 .3rem; }
.group-create input[type="text"], .group-create textarea { width: 100%; padding: .6rem; background: #1a1a2e; border: 1px solid #333; border-radius: 10px; color: #fff; font-size: .9rem; }
.group-create textarea { min-height: 80px; resize: vertical; }
.group-create input[type="color"] { width: 60px; height: 36px; border: none; border-radius: 8px; cursor: pointer; background: none; }
.category-select { display: flex; flex-wrap: wrap; gap: .4rem; }
.cat-option { cursor: pointer; }
.cat-option input { display: none; }
.cat-option span { display: inline-block; padding: .4rem .7rem; background: #1a1a2e; border: 1px solid #333; border-radius: 10px; font-size: .85rem; color: #aaa; transition: all .2s; }
.cat-option input:checked + span { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.checkbox-label { display: flex; align-items: center; gap: .5rem; cursor: pointer; color: #ccc; font-size: .9rem; margin: .8rem 0; }
.btn-primary { display: inline-block; padding: .7rem 1.5rem; background: #7c3aed; color: #fff; border: none; border-radius: 12px; font-size: 1rem; font-weight: 600; cursor: pointer; margin-top: 1rem; }
.btn-secondary { display: inline-block; padding: .5rem 1rem; background: #1a1a2e; color: #7c3aed; border: 1px solid #7c3aed; border-radius: 12px; text-decoration: none; font-size: .85rem; }
.error-msg { background: #ef444422; color: #ef4444; padding: .6rem; border-radius: 10px; margin-bottom: 1rem; }
.empty-state { text-align: center; color: #888; padding: 2rem; }
.empty-state a { color: #7c3aed; }

/* ===== Community Voting Module ===== */
.voting-creator { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
#votingOptionsInputs { display: flex; flex-direction: column; gap: 0.4rem; }
.voting-card { background: rgba(30,30,50,0.6); border-radius: 14px; padding: 1rem; margin-bottom: 1rem; border: 1px solid rgba(124,58,237,0.15); }
.voting-card.resolved { border-color: rgba(16,185,129,0.3); }
.voting-card.cancelled { opacity: 0.6; }
.voting-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.5rem; }
.voting-question { font-weight: 600; font-size: 1rem; }
.voting-badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.voting-badge.active { background: rgba(239,68,68,0.2); color: #ef4444; }
.voting-badge.resolved { background: rgba(16,185,129,0.2); color: #10b981; }
.voting-badge.cancelled { background: rgba(107,114,128,0.2); color: #6b7280; }
.voting-pool { font-size: 0.8rem; color: var(--text-muted, #888); margin-bottom: 0.75rem; }
.voting-options { display: flex; flex-direction: column; gap: 0.5rem; }
.voting-option { position: relative; border-radius: 10px; padding: 0.6rem 0.8rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); overflow: hidden; }
.voting-option.winner { border-color: rgba(16,185,129,0.5); background: rgba(16,185,129,0.08); }
.voting-option-bar { position: absolute; top: 0; left: 0; height: 100%; border-radius: 10px; transition: width 0.5s ease; }
.voting-option-content { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.voting-option-text { font-weight: 500; font-size: 0.9rem; }
.voting-option-stats { font-size: 0.75rem; color: var(--text-muted, #888); }
.voting-user-bet { position: relative; font-size: 0.7rem; color: #8b5cf6; margin-top: 2px; }
.voting-bet-input { position: relative; display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.voting-bet-input input { width: 80px; padding: 4px 8px; font-size: 0.8rem; }
.voting-controls { display: flex; gap: 0.5rem; margin-top: 0.75rem; }

/* ===== DAILY STREAKS v24 ===== */
.streak-page { max-width: 600px; margin: 0 auto; padding: 0 1rem 2rem; }
.streak-hero { text-align: center; padding: 2rem 0 1rem; }
.streak-fire { font-size: 3.5rem; animation: streakPulse 1.5s ease-in-out infinite; }
.streak-count { font-size: 4rem; font-weight: 900; color: var(--accent); line-height: 1; }
.streak-label { font-size: 1rem; color: var(--muted); margin-top: .25rem; }
@keyframes streakPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }

.streak-alert { padding: .75rem 1rem; border-radius: 12px; margin-bottom: 1rem; font-size: .9rem; text-align: center; }
.streak-success { background: rgba(34,197,94,.15); color: #22c55e; border: 1px solid rgba(34,197,94,.3); }
.streak-info { background: rgba(59,130,246,.15); color: #3b82f6; border: 1px solid rgba(59,130,246,.3); }

.streak-checkin-wrap { text-align: center; margin-bottom: 1.5rem; }
.streak-btn { padding: .9rem 2rem; border-radius: 16px; font-size: 1.1rem; font-weight: 700; border: none; cursor: pointer; width: 100%; }
.streak-btn-active { background: linear-gradient(135deg, #f97316, #ef4444); color: #fff; box-shadow: 0 4px 20px rgba(249,115,22,.4); transition: transform .15s; }
.streak-btn-active:hover { transform: scale(1.03); }
.streak-btn-done { background: var(--card); color: var(--muted); cursor: default; }

.streak-week { display: flex; gap: .5rem; justify-content: center; margin-bottom: 1.5rem; }
.streak-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .5rem .6rem; border-radius: 12px; background: var(--card); min-width: 44px; }
.streak-day-label { font-size: .65rem; color: var(--muted); text-transform: uppercase; }
.streak-day-num { font-size: .85rem; font-weight: 600; }
.streak-day-icon { font-size: 1.1rem; }
.streak-day-checked { background: rgba(249,115,22,.15); border: 1px solid rgba(249,115,22,.4); }
.streak-day-today { box-shadow: 0 0 0 2px var(--accent); }

.streak-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 1.5rem; }
.streak-stat { background: var(--card); border-radius: 12px; padding: .75rem .5rem; text-align: center; display: flex; flex-direction: column; }
.streak-stat-val { font-size: 1.3rem; font-weight: 800; color: var(--accent); }
.streak-stat-lbl { font-size: .7rem; color: var(--muted); }

.streak-milestones { background: var(--card); border-radius: 16px; padding: 1.25rem; margin-bottom: 1.5rem; }
.streak-milestones h3 { margin: 0 0 .75rem; font-size: 1rem; }
.streak-milestone-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.streak-milestone { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .6rem .25rem; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); font-size: .8rem; }
.streak-milestone-done { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.3); }
.streak-milestone-active { box-shadow: 0 0 12px rgba(34,197,94,.3); }
.streak-milestone-icon { font-size: 1.2rem; }
.streak-milestone-day { font-weight: 700; }
.streak-milestone-reward { color: var(--muted); font-size: .75rem; }
.streak-next-milestone { margin-top: .75rem; text-align: center; font-size: .85rem; color: var(--muted); padding: .5rem; background: rgba(249,115,22,.1); border-radius: 8px; }

.streak-rewards-info { background: var(--card); border-radius: 16px; padding: 1.25rem; margin-bottom: 1.5rem; }
.streak-rewards-info h3 { margin: 0 0 .75rem; font-size: 1rem; }
.streak-reward-table { display: flex; flex-direction: column; gap: .4rem; }
.streak-reward-row { display: flex; justify-content: space-between; font-size: .85rem; padding: .35rem 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.streak-reward-row:last-child { border: none; }

.streak-leaderboard { background: var(--card); border-radius: 16px; padding: 1.25rem; }
.streak-leaderboard h3 { margin: 0 0 .75rem; font-size: 1rem; }
.streak-lb-row { display: flex; align-items: center; gap: .6rem; padding: .5rem; border-radius: 10px; margin-bottom: .35rem; }
.streak-lb-row:hover { background: rgba(255,255,255,.03); }
.streak-lb-me { background: rgba(168,85,247,.1); border: 1px solid rgba(168,85,247,.3); }
.streak-lb-rank { font-weight: 800; min-width: 32px; text-align: center; }
.streak-lb-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.streak-lb-name { flex: 1; font-weight: 600; font-size: .9rem; }
.streak-lb-val { font-weight: 700; color: #f97316; font-size: .85rem; }
.streak-lb-record { font-size: .75rem; color: var(--muted); }

/* === Badge Shop v25 === */
.badge-shop-hero { text-align: center; padding: 2rem 1rem 1rem; }
.badge-shop-hero h1 { font-size: 1.8rem; margin: 0 0 .3rem; }
.badge-shop-hero p { color: var(--muted); margin: 0 0 1rem; }
.badge-shop-actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.badge-cat-filter { display: flex; gap: .5rem; padding: .5rem 1rem; overflow-x: auto; scrollbar-width: none; }
.badge-cat-filter::-webkit-scrollbar { display: none; }
.badge-cat-filter a { white-space: nowrap; padding: .4rem .8rem; border-radius: 20px; background: var(--card); color: var(--text); text-decoration: none; font-size: .85rem; border: 1px solid var(--border); transition: all .2s; }
.badge-cat-filter a.active, .badge-cat-filter a:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.badge-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; padding: 1rem; }
.badge-shop-card { background: var(--card); border-radius: 16px; padding: 1.2rem; text-align: center; position: relative; overflow: hidden; border: 2px solid var(--border); transition: transform .2s, box-shadow .2s; }
.badge-shop-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.badge-rarity-border-common { border-color: #94a3b8; }
.badge-rarity-border-rare { border-color: #3b82f6; }
.badge-rarity-border-epic { border-color: #a855f7; }
.badge-rarity-border-legendary { border-color: #eab308; box-shadow: 0 0 12px rgba(234,179,8,.2); }
.badge-shop-icon { font-size: 3rem; margin: .5rem 0; }
.badge-shop-name { font-weight: 700; font-size: 1rem; margin: .3rem 0; }
.badge-shop-creator { font-size: .75rem; color: var(--muted); margin-bottom: .3rem; }
.badge-shop-desc { font-size: .8rem; color: var(--muted); margin: .4rem 0; }
.badge-shop-meta { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; font-size: .75rem; color: var(--muted); margin: .5rem 0; }
.badge-rarity-common { color: #94a3b8; font-size: .75rem; font-weight: 600; }
.badge-rarity-rare { color: #3b82f6; font-size: .75rem; font-weight: 600; }
.badge-rarity-epic { color: #a855f7; font-size: .75rem; font-weight: 600; }
.badge-rarity-legendary { color: #eab308; font-size: .75rem; font-weight: 600; text-shadow: 0 0 8px rgba(234,179,8,.4); }
.btn-badge-buy { width: 100%; padding: .6rem; border: none; border-radius: 10px; background: linear-gradient(135deg, var(--accent), #7c3aed); color: #fff; font-weight: 700; cursor: pointer; margin-top: .5rem; transition: opacity .2s; }
.btn-badge-buy:hover { opacity: .85; }
.badge-soldout-ribbon { position: absolute; top: 10px; right: -30px; background: #ef4444; color: #fff; font-size: .7rem; padding: 2px 30px; transform: rotate(45deg); font-weight: 700; }
.badge-owned-ribbon { position: absolute; top: 8px; left: 8px; background: #22c55e; color: #fff; font-size: .7rem; padding: 2px 8px; border-radius: 8px; font-weight: 600; }
.already-owned { opacity: .7; }
/* My Badges */
.badge-collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; padding: 1rem; }
.badge-collection-card { background: var(--card); border-radius: 14px; padding: 1rem; text-align: center; border: 2px solid var(--border); transition: all .2s; }
.badge-collection-card.equipped { border-color: var(--badge-color, var(--accent)); box-shadow: 0 0 12px color-mix(in srgb, var(--badge-color) 30%, transparent); }
.badge-collection-icon { font-size: 2.5rem; }
.badge-collection-name { font-weight: 700; font-size: .9rem; margin: .3rem 0; }
.badge-collection-date { font-size: .7rem; color: var(--muted); }
.btn-badge-equip, .btn-badge-unequip { width: 100%; padding: .4rem; border: none; border-radius: 8px; cursor: pointer; font-size: .8rem; font-weight: 600; margin-top: .4rem; }
.btn-badge-equip { background: var(--accent); color: #fff; }
.btn-badge-equip:disabled { opacity: .4; cursor: not-allowed; }
.btn-badge-unequip { background: #22c55e; color: #fff; }
/* Create Form */
.badge-create-form { max-width: 500px; margin: 1rem auto; padding: 1rem; }
.badge-create-form label { display: block; margin-bottom: 1rem; font-weight: 600; font-size: .9rem; }
.badge-create-form input, .badge-create-form select, .badge-create-form textarea { width: 100%; padding: .5rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); margin-top: .3rem; font-size: .9rem; }
.badge-create-form textarea { min-height: 60px; resize: vertical; }
/* Profile shop badges */
.profile-shop-badge { position: relative; }
.profile-shop-badge.badge-rarity-legendary { animation: legendaryPulse 2s ease-in-out infinite; }
@keyframes legendaryPulse { 0%,100% { filter: drop-shadow(0 0 2px rgba(234,179,8,.3)); } 50% { filter: drop-shadow(0 0 8px rgba(234,179,8,.6)); } }
@media (max-width: 600px) {
    .badge-shop-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; padding: .6rem; }
    .badge-collection-grid { grid-template-columns: repeat(3, 1fr); }
    .badge-shop-icon { font-size: 2.2rem; }
}

/* ===== Quiz Hub ===== */
.quiz-hub { max-width: 800px; margin: 0 auto; padding-bottom: 5rem; }
.quiz-hero { text-align: center; padding: 2rem 1rem; background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(139,92,246,0.15)); border-radius: 1rem; margin-bottom: 1.5rem; }
.quiz-hero h1 { font-size: 1.8rem; margin-bottom: 0.3rem; }
.quiz-hero p { color: #94a3b8; margin-bottom: 1rem; }
.quiz-search { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.quiz-search input { flex: 1; padding: 0.6rem 1rem; border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: #fff; }
.quiz-categories { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.5rem; margin-bottom: 1.5rem; }
.quiz-cat-chip { padding: 0.4rem 0.8rem; border-radius: 2rem; background: rgba(255,255,255,0.06); color: #94a3b8; font-size: 0.85rem; white-space: nowrap; text-decoration: none; border: 1px solid transparent; transition: all 0.2s; }
.quiz-cat-chip:hover, .quiz-cat-chip.active { background: rgba(139,92,246,0.2); color: #c4b5fd; border-color: rgba(139,92,246,0.4); }
.quiz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.quiz-card { display: block; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.75rem; padding: 1rem; text-decoration: none; color: #fff; transition: all 0.2s; position: relative; }
.quiz-card:hover { border-color: rgba(139,92,246,0.4); transform: translateY(-2px); }
.quiz-card-cat { font-size: 0.8rem; color: #94a3b8; margin-bottom: 0.4rem; }
.quiz-card h3 { font-size: 1rem; margin-bottom: 0.5rem; line-height: 1.3; }
.quiz-card-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.78rem; color: #64748b; margin-bottom: 0.5rem; }
.quiz-card-footer { display: flex; justify-content: space-between; font-size: 0.75rem; color: #64748b; }
.quiz-card-played { position: absolute; top: 0.5rem; right: 0.5rem; background: rgba(34,197,94,0.2); color: #4ade80; padding: 0.15rem 0.5rem; border-radius: 1rem; font-size: 0.75rem; }
.quiz-card-avg { position: absolute; bottom: 0.5rem; right: 0.5rem; font-size: 0.7rem; color: #64748b; }
.quiz-attempts { display: flex; flex-direction: column; gap: 0.5rem; }
.quiz-attempt-row { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0.8rem; background: rgba(255,255,255,0.03); border-radius: 0.5rem; font-size: 0.9rem; }
.quiz-attempt-score { font-weight: 600; }
.quiz-attempt-score.great { color: #4ade80; }
.quiz-attempt-score.ok { color: #fbbf24; }
.quiz-attempt-score.bad { color: #f87171; }

/* Quiz Create */
.quiz-create { max-width: 600px; margin: 0 auto; }
.quiz-create h1 { margin-bottom: 1.5rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }
.quiz-question-edit { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; }
.qq-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.qq-options { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.qq-options label { display: flex; align-items: center; gap: 0.5rem; }
.qq-options label input[type="text"] { flex: 1; }

/* Quiz Player */
.quiz-player { background: rgba(255,255,255,0.04); border-radius: 1rem; padding: 1.5rem; }
.quiz-progress { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; margin-bottom: 1rem; }
.quiz-progress-bar { height: 100%; background: linear-gradient(90deg, #3b82f6, #8b5cf6); border-radius: 2px; transition: width 0.3s; }
.quiz-timer { text-align: center; font-size: 2rem; font-weight: 700; color: #3b82f6; margin-bottom: 1rem; }
.quiz-play-q h2 { font-size: 1.15rem; margin-bottom: 1rem; text-align: center; }
.quiz-play-opts { display: flex; flex-direction: column; gap: 0.6rem; }
.quiz-opt-btn { padding: 0.8rem 1rem; border: 2px solid rgba(255,255,255,0.1); border-radius: 0.6rem; background: rgba(255,255,255,0.04); color: #fff; font-size: 0.95rem; cursor: pointer; text-align: left; transition: all 0.2s; }
.quiz-opt-btn:hover { border-color: rgba(139,92,246,0.4); background: rgba(139,92,246,0.1); }
.quiz-opt-btn.selected { border-color: #8b5cf6; background: rgba(139,92,246,0.2); }
.quiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; }

/* Quiz Detail */
.quiz-detail-hero { margin-bottom: 1.5rem; }
.quiz-cat-badge { display: inline-block; padding: 0.3rem 0.8rem; background: rgba(139,92,246,0.15); color: #c4b5fd; border-radius: 2rem; font-size: 0.85rem; margin-bottom: 0.5rem; }
.quiz-desc { color: #94a3b8; margin: 0.5rem 0; }
.quiz-detail-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; font-size: 0.85rem; color: #64748b; margin: 1rem 0 0.5rem; }
.quiz-detail-creator { color: #94a3b8; font-size: 0.85rem; }
.quiz-detail-creator a { color: #c4b5fd; }
.quiz-result-box { text-align: center; padding: 1.5rem; background: rgba(139,92,246,0.1); border-radius: 1rem; border: 1px solid rgba(139,92,246,0.3); margin-bottom: 1rem; }
.quiz-result-score { font-size: 1.4rem; font-weight: 700; margin: 0.5rem 0; }
.quiz-result-reward { color: #4ade80; font-weight: 600; }
.quiz-review-q { margin-bottom: 1rem; padding: 0.8rem; background: rgba(255,255,255,0.03); border-radius: 0.5rem; }
.quiz-review-q strong { display: block; margin-bottom: 0.4rem; }
.quiz-review-opts { display: flex; flex-direction: column; gap: 0.25rem; }
.quiz-review-opt { padding: 0.3rem 0.6rem; border-radius: 0.3rem; font-size: 0.9rem; }
.quiz-review-opt.correct { background: rgba(34,197,94,0.15); color: #4ade80; }
.quiz-leaderboard { display: flex; flex-direction: column; gap: 0.4rem; }
.quiz-lb-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 0.8rem; background: rgba(255,255,255,0.03); border-radius: 0.5rem; }
.quiz-lb-row.me { background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.3); }
.quiz-lb-rank { font-size: 1.1rem; min-width: 2rem; }
.quiz-lb-name { flex: 1; }
.quiz-lb-score { font-weight: 600; color: #3b82f6; }
.quiz-lb-score small { color: #64748b; font-weight: 400; }
@media (max-width: 600px) {
    .quiz-grid { grid-template-columns: 1fr 1fr; }
    .form-row { grid-template-columns: 1fr; }
}

/* ─── SHORTS 🎬 ─── */
.shorts-page, .shorts-create { max-width: 640px; margin: 0 auto; padding: 0 16px; }
.shorts-hero { text-align: center; padding: 30px 0 20px; }
.shorts-hero h1 { font-size: 2rem; background: linear-gradient(135deg, #f43f5e, #ec4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.shorts-hero p { color: #aaa; margin-top: 6px; }
.shorts-notice { background: #2d1f0f; border: 1px solid #f59e0b; border-radius: 10px; padding: 14px; color: #fbbf24; text-align: center; margin: 12px 0; }
.shorts-success { background: #0f2d1b; border: 1px solid #22c55e; border-radius: 10px; padding: 14px; color: #4ade80; text-align: center; margin: 12px 0; }
.shorts-empty { text-align: center; padding: 60px 20px; color: #888; }

/* Category pills */
.shorts-cats { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 16px; scrollbar-width: none; }
.shorts-cats::-webkit-scrollbar { display: none; }
.shorts-cat { white-space: nowrap; padding: 8px 16px; border-radius: 20px; background: #1e1e2e; color: #ccc; text-decoration: none; font-size: .85rem; border: 1px solid transparent; transition: all .2s; }
.shorts-cat:hover, .shorts-cat.active { background: #7c3aed22; border-color: #7c3aed; color: #a78bfa; }

/* Feed */
.shorts-feed { display: flex; flex-direction: column; gap: 20px; }
.short-card { background: #1a1a2e; border-radius: 16px; overflow: hidden; border: 1px solid #2a2a40; transition: transform .2s; }
.short-card:hover { transform: translateY(-2px); }
.short-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.short-creator { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #e0e0e0; }
.short-avatar { width: 36px; height: 36px; border-radius: 50%; background: #2a2a40; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 1.2rem; }
.short-avatar img { width: 100%; height: 100%; object-fit: cover; }
.short-username { font-weight: 600; font-size: .95rem; }
.short-time { color: #666; font-size: .8rem; }

/* Content */
.short-content { position: relative; min-height: 200px; display: flex; align-items: center; justify-content: center; background: #12121f; }
.short-video, .short-image { width: 100%; max-height: 500px; object-fit: contain; display: block; }
.short-text-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; background: linear-gradient(transparent, rgba(0,0,0,.7)); color: #fff; font-size: .95rem; }
.short-text-only { padding: 40px 24px; color: #fff; font-size: 1.3rem; text-align: center; font-weight: 600; line-height: 1.5; }
.short-embed-link { padding: 40px; text-align: center; }
.short-embed-link a { color: #a78bfa; font-size: 1.1rem; text-decoration: none; padding: 12px 24px; border: 2px solid #7c3aed; border-radius: 12px; display: inline-block; }
.short-embed-link a:hover { background: #7c3aed22; }

/* Caption */
.short-caption { padding: 10px 16px; color: #ccc; font-size: .9rem; line-height: 1.4; }
.short-cat-badge { background: #2a2a40; padding: 2px 8px; border-radius: 8px; font-size: .75rem; margin-right: 6px; }

/* Actions */
.short-actions { display: flex; align-items: center; gap: 4px; padding: 8px 12px 12px; border-top: 1px solid #2a2a40; }
.short-actions button { background: none; border: none; color: #aaa; cursor: pointer; padding: 6px 12px; border-radius: 8px; font-size: .85rem; transition: all .15s; }
.short-actions button:hover { background: #ffffff10; color: #e0e0e0; }
.short-like-btn.liked { color: #f43f5e; }
.short-delete-btn { margin-left: auto; }
.short-delete-btn:hover { color: #ef4444 !important; }

/* Comments */
.short-comments { padding: 0 16px 16px; }
.short-comments-list { max-height: 200px; overflow-y: auto; margin-bottom: 10px; }
.short-comment { padding: 8px 12px; background: #12121f; border-radius: 10px; margin-bottom: 6px; font-size: .85rem; color: #ccc; }
.short-comment strong { color: #a78bfa; margin-right: 6px; }
.short-comment-empty { color: #666; text-align: center; padding: 12px; font-size: .85rem; }
.short-comment-input { display: flex; gap: 8px; }
.short-comment-input input { flex: 1; background: #12121f; border: 1px solid #333; border-radius: 10px; padding: 8px 14px; color: #e0e0e0; font-size: .85rem; }
.short-comment-input button { background: #7c3aed; border: none; color: #fff; padding: 8px 14px; border-radius: 10px; cursor: pointer; }

/* Pagination */
.shorts-pagination { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 24px 0; }
.shorts-pagination a { color: #a78bfa; text-decoration: none; padding: 8px 16px; border: 1px solid #7c3aed; border-radius: 8px; }
.shorts-pagination span { color: #888; }

/* Create form */
.shorts-form { background: #1a1a2e; border-radius: 16px; padding: 24px; margin-top: 16px; }
.shorts-form .form-group { margin-bottom: 16px; }
.shorts-form label { display: block; color: #aaa; margin-bottom: 6px; font-size: .9rem; }
.shorts-form input[type=text], .shorts-form input[type=url], .shorts-form textarea, .shorts-form select { width: 100%; background: #12121f; border: 1px solid #333; border-radius: 10px; padding: 10px 14px; color: #e0e0e0; font-size: .9rem; box-sizing: border-box; }
.shorts-form input[type=file] { color: #aaa; }
.shorts-form input[type=color] { width: 60px; height: 36px; border: none; border-radius: 8px; cursor: pointer; background: transparent; }
.shorts-form .btn-primary { width: 100%; padding: 14px; background: linear-gradient(135deg, #f43f5e, #ec4899); border: none; color: #fff; font-size: 1rem; font-weight: 600; border-radius: 12px; cursor: pointer; }

@media (max-width: 600px) {
    .shorts-hero h1 { font-size: 1.5rem; }
    .short-text-only { font-size: 1.1rem; padding: 30px 16px; }
}

/* === Notifications 🔔 === */
.nav-notif-link { position: relative; }
.nav-notif-badge { position: absolute; top: -6px; right: -8px; background: #ef4444; color: #fff; font-size: .65rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; }
.notif-menu-badge { background: #ef4444; color: #fff; font-size: .7rem; padding: 1px 6px; border-radius: 8px; margin-left: 4px; }

.notif-page { max-width: 700px; margin: 0 auto; padding: 0 1rem 2rem; }
.notif-hero { text-align: center; padding: 2rem 0 1rem; }
.notif-hero-icon { font-size: 3rem; margin-bottom: .5rem; }
.notif-hero h1 { font-size: 1.6rem; margin: 0 0 .3rem; }
.notif-hero p { color: #94a3b8; font-size: .9rem; margin: 0; }

.notif-actions { display: flex; gap: .5rem; justify-content: center; margin-bottom: 1rem; }
.notif-btn { padding: .5rem 1rem; border-radius: .5rem; border: 1px solid #334155; background: #1e293b; color: #e2e8f0; font-size: .85rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; transition: background .2s; }
.notif-btn:hover { background: #334155; }
.notif-btn-primary { background: #7c3aed; border-color: #7c3aed; }
.notif-btn-primary:hover { background: #6d28d9; }
.notif-btn-danger { background: transparent; border-color: #ef4444; color: #ef4444; }
.notif-btn-danger:hover { background: #ef44441a; }

.notif-filters { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: 1rem; -webkit-overflow-scrolling: touch; }
.notif-filter { padding: .4rem .8rem; border-radius: 999px; background: #1e293b; color: #94a3b8; font-size: .8rem; text-decoration: none; white-space: nowrap; border: 1px solid transparent; transition: all .2s; }
.notif-filter.active, .notif-filter:hover { background: #7c3aed22; color: #a78bfa; border-color: #7c3aed55; }

.notif-list { display: flex; flex-direction: column; gap: 2px; }
.notif-item { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; background: #1e293b; border-radius: .5rem; text-decoration: none; color: #e2e8f0; transition: background .2s; border-left: 3px solid transparent; }
.notif-item:hover { background: #334155; }
.notif-unread { border-left-color: #7c3aed; background: #1e293b; }
.notif-icon { font-size: 1.3rem; flex-shrink: 0; width: 2rem; text-align: center; }
.notif-content { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: .2rem .4rem; align-items: baseline; }
.notif-actor { font-weight: 600; color: #a78bfa; }
.notif-text { color: #cbd5e1; font-size: .9rem; }
.notif-time { color: #64748b; font-size: .75rem; margin-left: auto; white-space: nowrap; }
.notif-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.notif-empty { text-align: center; padding: 3rem 1rem; color: #64748b; }
.notif-empty-icon { font-size: 3rem; display: block; margin-bottom: .5rem; }

.notif-pagination { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1.5rem; color: #94a3b8; font-size: .85rem; }

@media (max-width: 640px) {
    .notif-item { padding: .6rem .75rem; gap: .5rem; }
    .notif-content { font-size: .85rem; }
    .notif-avatar { width: 28px; height: 28px; }
}

/* ══ Checkpoint Events v29 ══ */
.cp-page,.cp-detail,.cp-create{max-width:800px;margin:0 auto}
.cp-hero{text-align:center;padding:2rem 1.5rem;border-radius:16px;margin-bottom:1.5rem;color:#fff}
.cp-hero h1{margin:.5rem 0;font-size:1.6rem}
.cp-hero p{opacity:.8;margin:.5rem 0}
.cp-hero-emoji{font-size:3rem}
.cp-hero-meta{display:flex;gap:.5rem;justify-content:center;font-size:.9rem;opacity:.8;flex-wrap:wrap}
.cp-hero-desc{margin-top:.8rem;font-size:.95rem;line-height:1.5}
.cp-create-btn{display:inline-block;margin-top:1rem;padding:.6rem 1.5rem;background:#8b5cf6;color:#fff;border-radius:12px;text-decoration:none;font-weight:600}
.cp-stats-bar{display:flex;justify-content:center;gap:1.5rem;padding:1rem;background:#1e1e2e;border-radius:12px;margin-bottom:1.5rem;flex-wrap:wrap}
.cp-stat{text-align:center}.cp-stat-val{display:block;font-size:1.3rem;font-weight:700;color:#fff}.cp-stat-label{font-size:.75rem;color:#888}
.cp-section-title{font-size:1.2rem;margin:1.5rem 0 1rem;color:#fff}
.cp-filters{display:flex;gap:.5rem;overflow-x:auto;padding:.5rem 0;margin-bottom:1.5rem;-webkit-overflow-scrolling:touch}
.cp-filter-pill{padding:.4rem 1rem;border-radius:20px;background:#1e1e2e;color:#ccc;text-decoration:none;font-size:.85rem;white-space:nowrap;border:1px solid transparent}
.cp-filter-pill.active{background:#8b5cf6;color:#fff}
.cp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin-bottom:2rem}
.cp-card{background:#1e1e2e;border-radius:14px;padding:1.2rem;text-decoration:none;color:#fff;transition:transform .2s}
.cp-card:hover{transform:translateY(-3px)}
.cp-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.cp-card-emoji{font-size:1.6rem}
.cp-card-status{font-size:.75rem;padding:.2rem .6rem;border-radius:8px;background:#111}
.cp-card-status.active{color:#4ade80}.cp-card-status.ended{color:#888}
.cp-card h3{margin:.3rem 0;font-size:1.05rem}
.cp-card-meta{display:flex;gap:.8rem;font-size:.8rem;color:#aaa;margin:.5rem 0;flex-wrap:wrap}
.cp-card-reward{font-size:.85rem;color:#f59e0b;font-weight:600;margin:.3rem 0}
.cp-card-creator{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:#888;margin-top:.5rem}
.cp-card-creator img{width:20px;height:20px;border-radius:50%;object-fit:cover}
.cp-join-btn{display:block;width:100%;padding:.8rem;background:#8b5cf6;color:#fff;border:none;border-radius:12px;font-size:1.1rem;font-weight:700;cursor:pointer;margin-bottom:1rem}
.cp-completed-badge,.cp-ended-badge{text-align:center;padding:.8rem;border-radius:12px;font-weight:600;margin-bottom:1rem}
.cp-completed-badge{background:#065f4620;color:#4ade80;border:1px solid #4ade8040}
.cp-ended-badge{background:#33333340;color:#888;border:1px solid #88888840}
.cp-progress-wrap{margin-bottom:1.5rem}.cp-progress-label{font-size:.85rem;color:#ccc;margin-bottom:.3rem}
.cp-progress-bar{height:10px;background:#333;border-radius:5px;overflow:hidden}
.cp-progress-fill{height:100%;background:linear-gradient(90deg,#8b5cf6,#a78bfa);border-radius:5px;transition:width .5s}
.cp-timeline{position:relative;padding-left:2.5rem;margin-bottom:2rem}
.cp-timeline::before{content:'';position:absolute;left:1rem;top:0;bottom:0;width:2px;background:#333}
.cp-timeline-item{position:relative;margin-bottom:1.2rem;padding:.8rem 1rem;background:#1e1e2e;border-radius:12px;border:1px solid #333}
.cp-timeline-item.done{border-color:#4ade8040;background:#4ade8008}
.cp-timeline-item.next{border-color:#8b5cf680;background:#8b5cf610;animation:cpPulse 2s infinite}
@keyframes cpPulse{0%,100%{box-shadow:0 0 0 0 #8b5cf640}50%{box-shadow:0 0 0 8px #8b5cf600}}
.cp-timeline-marker{position:absolute;left:-2rem;top:50%;transform:translateY(-50%);font-size:1.2rem;background:#0d0d1a;padding:.2rem;z-index:1}
.cp-timeline-name{font-weight:600;color:#fff;font-size:.95rem}
.cp-timeline-desc{font-size:.8rem;color:#888;margin-top:.2rem}
.cp-checkin-btn{margin-top:.5rem;padding:.4rem 1rem;background:#8b5cf6;color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer}
.cp-leaderboard{background:#1e1e2e;border-radius:14px;overflow:hidden;margin-bottom:2rem}
.cp-lb-row{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;border-bottom:1px solid #ffffff08}
.cp-lb-row.me{background:#8b5cf615;border-left:3px solid #8b5cf6}
.cp-lb-rank{font-size:1.1rem;min-width:2rem;text-align:center}
.cp-lb-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}
.cp-lb-name{flex:1;color:#fff;font-size:.9rem}
.cp-lb-time{color:#8b5cf6;font-size:.85rem;font-weight:600}
.cp-creator-controls{text-align:center;margin:1.5rem 0}
.cp-end-btn{padding:.6rem 1.5rem;background:#ef4444;color:#fff;border:none;border-radius:10px;font-weight:600;cursor:pointer}
.cp-form{background:#1e1e2e;padding:1.5rem;border-radius:14px}
.cp-form label{display:block;font-size:.85rem;color:#ccc;margin:.8rem 0 .3rem;font-weight:600}
.cp-form input,.cp-form textarea,.cp-form select{width:100%;padding:.6rem;background:#111;border:1px solid #333;border-radius:8px;color:#fff;font-size:.95rem;box-sizing:border-box}
.cp-form h3{margin:1.2rem 0 .5rem;color:#fff}
.cp-add-cp-btn{width:100%;padding:.6rem;background:transparent;border:2px dashed #555;border-radius:10px;color:#8b5cf6;font-weight:600;cursor:pointer;margin:.8rem 0}
.cp-submit-btn{width:100%;padding:.8rem;background:#8b5cf6;color:#fff;border:none;border-radius:12px;font-size:1.05rem;font-weight:700;cursor:pointer;margin-top:1rem}
.cp-checkpoint-input{background:#161622;border:1px solid #333;border-radius:10px;padding:.8rem;margin-bottom:.5rem}
.cp-cp-header{display:flex;justify-content:space-between;margin-bottom:.4rem;font-weight:600;color:#8b5cf6}
.cp-cp-header button{background:none;border:none;color:#888;cursor:pointer;font-size:1rem}
.cp-checkpoint-input input{margin-bottom:.3rem}
.cp-my-active{display:flex;gap:.8rem;overflow-x:auto;margin-bottom:1.5rem;padding:.2rem 0}
.cp-my-card{background:#1e1e2e;border:1px solid #8b5cf640;border-radius:12px;padding:1rem;min-width:200px;text-decoration:none;color:#fff;flex-shrink:0}
.cp-my-card strong{font-size:.9rem}
.cp-my-card span{font-size:.75rem;color:#aaa}
.cp-mini-progress{height:4px;background:#333;border-radius:2px;margin:.5rem 0 .3rem;overflow:hidden}
.cp-mini-progress div{height:100%;background:#8b5cf6;border-radius:2px}
@media(max-width:600px){.cp-grid{grid-template-columns:1fr}.cp-stats-bar{gap:1rem}}

/* === Collab-Posts v30 === */
.collab-hero{text-align:center;padding:2rem 1rem;background:linear-gradient(135deg,#0f172a,#1e1b4b);border-radius:16px;margin-bottom:1.5rem}
.collab-hero h1{font-size:1.8rem;margin:0 0 .3rem}
.collab-hero p{color:#94a3b8;margin:0;font-size:.95rem}

.collab-tabs{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.5rem;margin-bottom:1rem;scrollbar-width:none}
.collab-tabs::-webkit-scrollbar{display:none}
.collab-tab{padding:.5rem 1rem;border-radius:20px;background:#1e293b;color:#cbd5e1;font-size:.85rem;text-decoration:none;white-space:nowrap;transition:all .2s}
.collab-tab.active,.collab-tab:hover{background:#7c3aed;color:#fff}
.collab-tab-create{background:#059669!important;color:#fff!important}
.collab-badge{background:#ef4444;color:#fff;border-radius:10px;padding:0 6px;font-size:.75rem;margin-left:4px}

.collab-cats{display:flex;gap:.4rem;overflow-x:auto;margin-bottom:1.5rem;padding-bottom:.5rem;scrollbar-width:none}
.collab-cats::-webkit-scrollbar{display:none}
.collab-cat-pill{padding:.35rem .8rem;border-radius:16px;background:#1e293b;color:#94a3b8;font-size:.8rem;text-decoration:none;white-space:nowrap}
.collab-cat-pill.active{background:#7c3aed;color:#fff}

.collab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.collab-card{display:block;background:#1e293b;border-radius:12px;padding:1.2rem;text-decoration:none;color:#e2e8f0;transition:transform .2s,box-shadow .2s;border:1px solid #334155}
.collab-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(124,58,237,.15);border-color:#7c3aed}
.collab-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.collab-card-cat{font-size:.75rem;background:#0f172a;padding:.2rem .6rem;border-radius:8px;color:#a78bfa}
.collab-card-status{font-size:.7rem;padding:.2rem .5rem;border-radius:8px}
.collab-card-status.published{background:#065f4620;color:#34d399}
.collab-card-status.draft{background:#f59e0b20;color:#fbbf24}
.collab-card-title{font-size:1.05rem;margin:0 0 .4rem;font-weight:600}
.collab-card-desc{font-size:.85rem;color:#94a3b8;margin:0 0 .8rem;line-height:1.4}
.collab-card-contributors{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.collab-avatar-mini{width:28px;height:28px;border-radius:50%;overflow:hidden;background:#334155;display:flex;align-items:center;justify-content:center;font-size:.75rem;border:2px solid #1e293b;margin-right:-.4rem}
.collab-avatar-mini img{width:100%;height:100%;object-fit:cover}
.collab-card-count{font-size:.75rem;color:#94a3b8;margin-left:.5rem}
.collab-card-invite-badge{margin-top:.6rem;background:#7c3aed20;color:#a78bfa;padding:.3rem .6rem;border-radius:8px;font-size:.8rem;text-align:center}

.collab-empty{text-align:center;padding:3rem 1rem;color:#64748b}

.collab-form{max-width:600px;margin:0 auto}
.collab-form label{display:block;margin:.8rem 0 .3rem;font-size:.9rem;color:#94a3b8}
.collab-form label small{color:#64748b}
.collab-form input,.collab-form textarea,.collab-form select{width:100%;padding:.6rem .8rem;border-radius:8px;border:1px solid #334155;background:#0f172a;color:#e2e8f0;font-size:.9rem}
.collab-form textarea{resize:vertical}

.collab-btn-primary{display:inline-block;padding:.7rem 1.5rem;background:#7c3aed;color:#fff;border:none;border-radius:10px;font-size:.95rem;cursor:pointer;margin-top:1rem;transition:background .2s}
.collab-btn-primary:hover{background:#6d28d9}
.collab-btn-secondary{display:inline-block;padding:.7rem 1.5rem;background:#334155;color:#e2e8f0;border:none;border-radius:10px;font-size:.95rem;cursor:pointer;margin-top:1rem}
.collab-btn-danger{display:inline-block;padding:.7rem 1.5rem;background:#dc2626;color:#fff;border:none;border-radius:10px;font-size:.95rem;cursor:pointer;margin-top:1rem}

.collab-detail-hero{text-align:center;padding:2rem 1rem;background:linear-gradient(135deg,#0f172a,#1e1b4b);border-radius:16px;margin-bottom:1.5rem}
.collab-detail-hero h1{font-size:1.6rem;margin:.5rem 0}
.collab-detail-desc{color:#94a3b8;max-width:600px;margin:.5rem auto 0}
.collab-detail-meta{color:#64748b;font-size:.85rem;margin-top:.8rem}
.collab-detail-meta a{color:#a78bfa}

.collab-contributors-section{margin:1.5rem 0}
.collab-contributors-section h2{font-size:1.1rem;margin-bottom:.8rem}
.collab-contributors-list{display:flex;flex-wrap:wrap;gap:.5rem}
.collab-contributor-chip{display:flex;align-items:center;gap:.4rem;background:#1e293b;padding:.4rem .8rem;border-radius:20px;font-size:.85rem;border:1px solid #334155}
.collab-contributor-chip.accepted{border-color:#059669}
.collab-contributor-chip.invited{border-color:#f59e0b}
.collab-contributor-chip.rejected{border-color:#ef4444;opacity:.5}
.collab-contributor-chip.contributed{background:#05966920}
.collab-contributor-avatar{width:24px;height:24px;border-radius:50%;overflow:hidden;background:#334155;display:flex;align-items:center;justify-content:center;font-size:.7rem}
.collab-contributor-avatar.small{width:28px;height:28px}
.collab-contributor-avatar img{width:100%;height:100%;object-fit:cover}
.collab-contrib-status{font-size:.7rem;color:#94a3b8}

.collab-invite-actions{background:#7c3aed15;border:1px solid #7c3aed40;border-radius:12px;padding:1.2rem;text-align:center;margin:1rem 0}
.collab-invite-actions p{margin:0 0 1rem}

.collab-contribute-form{background:#1e293b;border-radius:12px;padding:1.5rem;margin:1.5rem 0}
.collab-contribute-form h2{margin:0 0 1rem;font-size:1.1rem}
.collab-contribute-form label{display:block;margin:.6rem 0 .3rem;font-size:.85rem;color:#94a3b8}
.collab-contribute-form input,.collab-contribute-form textarea{width:100%;padding:.5rem .7rem;border-radius:8px;border:1px solid #334155;background:#0f172a;color:#e2e8f0;font-size:.9rem}
.collab-contribute-form textarea{resize:vertical}

.collab-sections{margin:1.5rem 0}
.collab-sections h2{font-size:1.1rem;margin-bottom:1rem}
.collab-section-card{background:#1e293b;border-radius:12px;padding:1.2rem;margin-bottom:1rem;border-left:3px solid #7c3aed}
.collab-section-author{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem;font-size:.9rem}
.collab-section-content{color:#cbd5e1;line-height:1.6;font-size:.95rem}
.collab-section-img{width:100%;max-height:400px;object-fit:cover;border-radius:8px;margin-top:.8rem}

.collab-owner-actions{text-align:center;margin:2rem 0;padding:1.5rem;background:#0f172a;border-radius:12px}
.collab-owner-actions .collab-btn-danger{margin-left:1rem}
.collab-hint{color:#94a3b8;font-size:.9rem;margin-bottom:1rem}

@media(max-width:640px){
    .collab-grid{grid-template-columns:1fr}
    .collab-owner-actions .collab-btn-danger{margin-left:0;display:block;margin-top:.5rem}
}

/* === Survival-Tracker === */
.survival-page { max-width: 900px; margin: 0 auto; padding-bottom: 5rem; }
.survival-hero { text-align:center; padding:2.5rem 1.5rem; border-radius:1rem; margin-bottom:1.5rem; }
.survival-hero h1 { font-size:1.8rem; margin:0.5rem 0; }
.survival-hero-icon { font-size:3rem; }
.survival-hero-desc { opacity:0.85; margin:0.5rem 0 1rem; font-size:0.95rem; }
.survival-stats-bar { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; font-size:0.9rem; opacity:0.9; margin:1rem 0 0.5rem; }
.survival-creator a { color:#a7f3d0; text-decoration:none; font-weight:600; }
.survival-cat-filter { display:flex; gap:0.5rem; overflow-x:auto; padding:0.5rem 0 1rem; -webkit-overflow-scrolling:touch; }
.survival-cat-filter .cat-pill { white-space:nowrap; padding:0.4rem 1rem; border-radius:2rem; background:rgba(255,255,255,0.05); color:#ccc; text-decoration:none; font-size:0.85rem; border:1px solid rgba(255,255,255,0.1); transition:all 0.2s; }
.survival-cat-filter .cat-pill.active, .survival-cat-filter .cat-pill:hover { background:rgba(5,150,105,0.3); color:#a7f3d0; border-color:rgba(5,150,105,0.5); }
.survival-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.survival-grid-card { display:flex; gap:1rem; align-items:center; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:0.75rem; padding:1rem; text-decoration:none; color:inherit; transition:all 0.2s; }
.survival-grid-card:hover { background:rgba(255,255,255,0.08); border-color:rgba(5,150,105,0.4); transform:translateY(-2px); }
.survival-grid-icon { font-size:2rem; }
.survival-grid-info h3 { margin:0; font-size:1rem; color:#e2e8f0; }
.survival-grid-creator { font-size:0.8rem; color:#94a3b8; }
.survival-grid-meta { display:flex; gap:0.75rem; font-size:0.8rem; color:#94a3b8; margin-top:0.3rem; }
.survival-participants { display:flex; flex-direction:column; gap:1rem; }
.survival-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:0.75rem; padding:1.25rem; transition:all 0.3s; }
.survival-card:hover { background:rgba(255,255,255,0.06); }
.survival-card.eliminated { opacity:0.5; border-color:rgba(220,38,38,0.3); }
.survival-card-header { display:flex; align-items:center; gap:0.75rem; margin-bottom:1rem; }
.survival-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.survival-badge-alive { background:rgba(34,197,94,0.2); color:#4ade80; padding:0.15rem 0.5rem; border-radius:1rem; font-size:0.75rem; }
.survival-badge-elim { background:rgba(220,38,38,0.2); color:#f87171; padding:0.15rem 0.5rem; border-radius:1rem; font-size:0.75rem; }
.survival-total-score { margin-left:auto; font-weight:700; font-size:1.1rem; color:#a7f3d0; }
.survival-bars { display:flex; flex-direction:column; gap:0.5rem; }
.survival-bar-row { display:flex; align-items:center; gap:0.5rem; }
.survival-bar-label { width:110px; font-size:0.8rem; color:#94a3b8; flex-shrink:0; }
.survival-bar { flex:1; height:16px; background:rgba(255,255,255,0.08); border-radius:8px; overflow:hidden; }
.survival-bar-fill { height:100%; border-radius:8px; transition:width 0.5s ease; }
.survival-bar-fill.health { background:linear-gradient(90deg,#ef4444,#f87171); }
.survival-bar-fill.energy { background:linear-gradient(90deg,#eab308,#facc15); }
.survival-bar-fill.hunger { background:linear-gradient(90deg,#f97316,#fb923c); }
.survival-bar-fill.morale { background:linear-gradient(90deg,#3b82f6,#60a5fa); }
.survival-bar-val { width:30px; text-align:right; font-size:0.8rem; font-weight:600; color:#e2e8f0; transition:color 0.3s; }
.survival-card-actions { margin-top:1rem; border-top:1px solid rgba(255,255,255,0.06); padding-top:0.75rem; }
.survival-stat-controls { display:flex; flex-direction:column; gap:0.4rem; }
.survival-ctrl-row { display:flex; align-items:center; gap:0.3rem; justify-content:center; }
.btn-sm-ctrl { padding:0.2rem 0.5rem; font-size:0.75rem; border-radius:0.3rem; border:1px solid rgba(220,38,38,0.4); background:rgba(220,38,38,0.15); color:#fca5a5; cursor:pointer; transition:all 0.2s; }
.btn-sm-ctrl:hover { background:rgba(220,38,38,0.3); }
.btn-sm-ctrl.plus { border-color:rgba(34,197,94,0.4); background:rgba(34,197,94,0.15); color:#86efac; }
.btn-sm-ctrl.plus:hover { background:rgba(34,197,94,0.3); }
.ctrl-label { width:30px; text-align:center; font-size:0.9rem; }
.survival-log { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:0.75rem; padding:1rem; max-height:400px; overflow-y:auto; }
.survival-log-entry { display:flex; gap:0.5rem; align-items:baseline; padding:0.35rem 0; border-bottom:1px solid rgba(255,255,255,0.04); font-size:0.85rem; }
.survival-log-time { color:#64748b; font-size:0.75rem; white-space:nowrap; }
.survival-log-user { color:#a7f3d0; font-weight:600; white-space:nowrap; }
.survival-log-msg { color:#cbd5e1; }
.survival-empty { text-align:center; padding:2rem; color:#64748b; font-size:1rem; }
.survival-form { max-width:500px; margin:0 auto; }
.survival-form label { display:block; margin:1rem 0 0.3rem; font-weight:600; color:#e2e8f0; font-size:0.9rem; }
.survival-form input, .survival-form textarea, .survival-form select { width:100%; padding:0.6rem; border-radius:0.5rem; border:1px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.05); color:#e2e8f0; font-size:0.95rem; }
@media(max-width:600px) {
    .survival-hero h1 { font-size:1.3rem; }
    .survival-stats-bar { font-size:0.8rem; gap:0.5rem; }
    .survival-bar-label { width:80px; font-size:0.7rem; }
    .survival-grid { grid-template-columns:1fr; }
}

/* ═══ Live-Scoreboard 🏆 ═══ */
.sb-page { max-width: 800px; margin: 0 auto; padding: 1rem; }
.sb-hero { text-align: center; padding: 2rem 1rem; background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(59,130,246,0.15)); border-radius: 16px; margin-bottom: 1.5rem; }
.sb-hero h1 { font-size: 1.8rem; margin: 0 0 0.5rem; }
.sb-hero p { color: var(--text-muted); margin: 0; }
.sb-cats { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.5rem; margin-bottom: 1.5rem; -webkit-overflow-scrolling: touch; }
.sb-cat-pill { padding: 0.4rem 0.9rem; border-radius: 20px; background: rgba(255,255,255,0.05); color: var(--text-muted); text-decoration: none; white-space: nowrap; font-size: 0.85rem; border: 1px solid transparent; transition: all 0.2s; }
.sb-cat-pill:hover, .sb-cat-pill.active { background: rgba(124,58,237,0.2); color: #fff; border-color: rgba(124,58,237,0.4); }
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.sb-card { background: var(--card-bg, #1a1a2e); border-radius: 12px; padding: 1.2rem; text-decoration: none; color: inherit; border: 1px solid rgba(255,255,255,0.06); transition: transform 0.2s, border-color 0.2s; display: block; }
.sb-card:hover { transform: translateY(-2px); border-color: rgba(124,58,237,0.4); }
.sb-card h3 { margin: 0.5rem 0; font-size: 1.1rem; }
.sb-card-status { display: flex; justify-content: space-between; align-items: center; }
.sb-live-badge, .sb-live-badge-sm { background: rgba(239,68,68,0.2); color: #ef4444; padding: 0.2rem 0.6rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; animation: sbPulse 2s infinite; }
.sb-ended-badge, .sb-ended-badge-sm { background: rgba(255,255,255,0.05); color: var(--text-muted); padding: 0.2rem 0.6rem; border-radius: 12px; font-size: 0.8rem; }
@keyframes sbPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
.sb-card-teams { margin: 0.8rem 0; display: flex; flex-direction: column; gap: 0.4rem; }
.sb-card-team { display: flex; justify-content: space-between; align-items: center; font-size: 0.95rem; }
.sb-card-team strong { font-size: 1.2rem; }
.sb-card-footer { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted); border-top: 1px solid rgba(255,255,255,0.06); padding-top: 0.6rem; margin-top: 0.4rem; }
.sb-empty { text-align: center; padding: 3rem; color: var(--text-muted); }

/* Detail */
.sb-detail-hero { text-align: center; padding: 2rem 1rem; background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(59,130,246,0.12)); border-radius: 16px; margin-bottom: 1.5rem; }
.sb-detail-hero h1 { margin: 0.5rem 0; font-size: 1.6rem; }
.sb-desc { color: var(--text-muted); margin: 0.5rem 0; }
.sb-meta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; font-size: 0.85rem; color: var(--text-muted); margin: 0.8rem 0; }
.sb-meta a { color: var(--accent, #7c3aed); text-decoration: none; }
.sb-actions-bar { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1rem; }

/* Scoreboard Cards */
.sb-scoreboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.sb-team-card { background: var(--card-bg, #1a1a2e); border-radius: 14px; padding: 1.2rem; text-align: center; border: 2px solid var(--team-color); position: relative; overflow: hidden; }
.sb-team-header { margin-bottom: 0.5rem; }
.sb-team-emoji { font-size: 2rem; display: block; margin-bottom: 0.3rem; }
.sb-team-name { font-weight: 600; font-size: 1rem; }
.sb-team-score { font-size: 3rem; font-weight: 800; color: var(--team-color); text-shadow: 0 0 20px color-mix(in srgb, var(--team-color) 40%, transparent); transition: all 0.3s; }
.sb-team-bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; margin: 0.8rem 0 0.5rem; overflow: hidden; }
.sb-team-bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.sb-team-cheers { font-size: 0.8rem; color: var(--text-muted); }

/* Controls */
.sb-controls { background: var(--card-bg, #1a1a2e); border-radius: 12px; padding: 1.2rem; margin-bottom: 1.5rem; }
.sb-controls h3 { margin: 0 0 1rem; }
.sb-ctrl-row { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0.8rem; margin-bottom: 0.5rem; border-radius: 8px; background: rgba(255,255,255,0.03); }
.sb-ctrl-btns { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.sb-event-log-input { display: flex; gap: 0.5rem; }
.sb-event-log-input input { flex: 1; padding: 0.5rem 0.8rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: #fff; }

/* Cheer */
.sb-cheer-section { background: var(--card-bg, #1a1a2e); border-radius: 12px; padding: 1.2rem; margin-bottom: 1.5rem; }
.sb-cheer-section h3 { margin: 0 0 0.3rem; }
.sb-hint { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 1rem; }
.sb-cheer-btn { display: block; width: 100%; padding: 0.7rem; margin-bottom: 0.5rem; border-radius: 10px; border: 1px solid var(--team-color); background: color-mix(in srgb, var(--team-color) 15%, transparent); color: #fff; font-size: 0.95rem; cursor: pointer; transition: all 0.2s; }
.sb-cheer-btn:hover { background: color-mix(in srgb, var(--team-color) 30%, transparent); }

/* Log */
.sb-log { background: var(--card-bg, #1a1a2e); border-radius: 12px; padding: 1.2rem; }
.sb-log h3 { margin: 0 0 1rem; }
.sb-log-item { display: flex; gap: 0.8rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.9rem; }
.sb-log-time { color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; min-width: 45px; }
.sb-log-msg { flex: 1; }

/* Create Form */
.sb-create-form { background: var(--card-bg, #1a1a2e); border-radius: 12px; padding: 1.5rem; }
.sb-create-form label { display: block; font-weight: 600; margin: 1rem 0 0.3rem; font-size: 0.9rem; }
.sb-create-form label:first-child { margin-top: 0; }
.sb-create-form input[type="text"], .sb-create-form textarea, .sb-create-form select { width: 100%; padding: 0.6rem 0.8rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: #fff; font-size: 0.95rem; box-sizing: border-box; }
.sb-team-input { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.sb-team-input input[type="color"] { width: 40px; height: 36px; border: none; border-radius: 6px; cursor: pointer; background: none; }

@media (max-width: 600px) {
    .sb-scoreboard { grid-template-columns: repeat(2, 1fr); }
    .sb-team-score { font-size: 2.2rem; }
    .sb-ctrl-row { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
}

/* === Direktnachrichten (DMs) v33 === */
.dm-page { max-width: 700px; margin: 0 auto; padding: 1rem; padding-bottom: 5rem; }
.dm-hero { text-align: center; margin-bottom: 1.5rem; }
.dm-hero h1 { font-size: 1.6rem; margin: 0 0 .3rem; }
.dm-hero p { color: rgba(255,255,255,.6); font-size: .9rem; margin: 0; }

.dm-new-bar { margin-bottom: 1rem; }
.dm-new-form { display: flex; gap: .5rem; }
.dm-new-form input { flex: 1; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; padding: .65rem 1rem; color: #fff; font-size: .9rem; }
.dm-new-form input::placeholder { color: rgba(255,255,255,.4); }
.dm-new-btn { background: linear-gradient(135deg,#7c3aed,#a855f7); border: none; color: #fff; padding: .65rem 1.2rem; border-radius: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; font-size: .85rem; }

.dm-inbox { display: flex; flex-direction: column; gap: 2px; }
.dm-conv-item { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; background: rgba(255,255,255,.04); border-radius: 12px; text-decoration: none; color: #fff; transition: background .15s; }
.dm-conv-item:hover { background: rgba(255,255,255,.08); }
.dm-conv-unread { background: rgba(124,58,237,.12); border-left: 3px solid #a855f7; }
.dm-conv-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.dm-conv-info { flex: 1; min-width: 0; }
.dm-conv-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.dm-conv-name { font-weight: 600; font-size: .95rem; }
.dm-conv-time { font-size: .75rem; color: rgba(255,255,255,.4); flex-shrink: 0; }
.dm-conv-preview { font-size: .85rem; color: rgba(255,255,255,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-conv-unread .dm-conv-preview { color: rgba(255,255,255,.8); font-weight: 500; }
.dm-conv-badge { background: #a855f7; color: #fff; font-size: .75rem; font-weight: 700; min-width: 22px; height: 22px; border-radius: 11px; display: flex; align-items: center; justify-content: center; padding: 0 6px; flex-shrink: 0; }

.dm-empty { text-align: center; padding: 3rem 1rem; }
.dm-empty-icon { font-size: 3rem; margin-bottom: .5rem; }

/* Chat View */
.dm-chat-view { display: flex; flex-direction: column; height: calc(100vh - 200px); min-height: 400px; }
.dm-chat-header { display: flex; align-items: center; gap: .75rem; padding: .75rem; background: rgba(255,255,255,.06); border-radius: 14px; margin-bottom: .5rem; }
.dm-back-btn { color: #a855f7; text-decoration: none; font-weight: 600; font-size: .9rem; flex-shrink: 0; }
.dm-partner-info { display: flex; align-items: center; gap: .5rem; flex: 1; text-decoration: none; color: #fff; min-width: 0; }
.dm-partner-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.dm-partner-name { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-delete-btn { background: none; border: none; font-size: 1.1rem; cursor: pointer; opacity: .5; padding: .3rem; }
.dm-delete-btn:hover { opacity: 1; }

.dm-messages { flex: 1; overflow-y: auto; padding: .5rem 0; display: flex; flex-direction: column; gap: .4rem; }
.dm-empty-chat { text-align: center; padding: 2rem; color: rgba(255,255,255,.4); font-size: .9rem; margin: auto 0; }

.dm-msg { display: flex; align-items: flex-end; gap: .4rem; max-width: 80%; }
.dm-msg-mine { align-self: flex-end; flex-direction: row-reverse; }
.dm-msg-theirs { align-self: flex-start; }
.dm-msg-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.dm-msg-bubble { padding: .55rem .85rem; border-radius: 16px; max-width: 100%; word-break: break-word; }
.dm-msg-mine .dm-msg-bubble { background: linear-gradient(135deg,#7c3aed,#6d28d9); border-bottom-right-radius: 4px; }
.dm-msg-theirs .dm-msg-bubble { background: rgba(255,255,255,.1); border-bottom-left-radius: 4px; }
.dm-msg-text { font-size: .9rem; line-height: 1.4; }
.dm-msg-time { font-size: .7rem; color: rgba(255,255,255,.4); margin-top: 2px; text-align: right; }

.dm-input-bar { display: flex; gap: .5rem; padding: .5rem 0; flex-shrink: 0; }
.dm-input-bar input { flex: 1; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 20px; padding: .7rem 1rem; color: #fff; font-size: .9rem; }
.dm-input-bar input::placeholder { color: rgba(255,255,255,.4); }
.dm-send-btn { background: linear-gradient(135deg,#7c3aed,#a855f7); border: none; color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* DM link on profile */
.dm-profile-btn { display: inline-flex; align-items: center; gap: .3rem; background: rgba(124,58,237,.2); border: 1px solid rgba(124,58,237,.4); color: #fff; padding: .4rem .8rem; border-radius: 10px; text-decoration: none; font-size: .85rem; font-weight: 500; }
.dm-profile-btn:hover { background: rgba(124,58,237,.35); }

@media (max-width: 600px) {
    .dm-msg { max-width: 88%; }
    .dm-chat-view { height: calc(100vh - 180px); }
}

/* ===== LIVE HIGHLIGHTS ===== */
.hl-create-form { display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px solid rgba(255,255,255,0.1); }
.hl-category-row { display:flex; gap:0.5rem; align-items:center; }
.hl-sort-row { display:flex; gap:0.5rem; margin-bottom:0.75rem; }
.hl-sort-btn { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.15); color:var(--text2); padding:0.3rem 0.75rem; border-radius:20px; cursor:pointer; font-size:0.8rem; transition:all 0.2s; }
.hl-sort-btn.active { background:rgba(124,58,237,0.3); border-color:rgba(124,58,237,0.6); color:var(--text1); }
.hl-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:0.75rem; margin-bottom:0.5rem; transition:all 0.2s; }
.hl-card.pinned { border-color:rgba(251,191,36,0.5); background:rgba(251,191,36,0.06); }
.hl-card-header { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.4rem; }
.hl-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; }
.hl-meta { display:flex; flex-direction:column; flex:1; }
.hl-username { font-size:0.8rem; font-weight:600; color:var(--text1); }
.hl-time { font-size:0.7rem; color:var(--text3); }
.hl-cat { font-size:1.1rem; }
.hl-pin-badge { font-size:0.85rem; }
.hl-title { font-size:0.95rem; font-weight:600; color:var(--text1); margin-bottom:0.2rem; }
.hl-desc { font-size:0.82rem; color:var(--text2); margin-bottom:0.4rem; }
.hl-actions { display:flex; align-items:center; gap:0.5rem; }
.hl-vote-btn { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); color:var(--text2); padding:0.25rem 0.6rem; border-radius:20px; cursor:pointer; font-size:0.85rem; display:flex; align-items:center; gap:0.3rem; transition:all 0.2s; }
.hl-vote-btn.voted { background:rgba(239,68,68,0.2); border-color:rgba(239,68,68,0.5); color:#f87171; }
.hl-vote-btn:hover { background:rgba(239,68,68,0.15); }
@media (max-width:600px) {
    .hl-category-row { flex-wrap:wrap; }
}

/* ===== LIVE BETS ===== */
.bets-creator { margin-bottom:1rem; display:flex; flex-direction:column; gap:0.4rem; }
#betOutcomeInputs { display:flex; flex-direction:column; gap:0.3rem; }
.bet-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:1rem; margin-top:0.75rem; }
.bet-header { display:flex; justify-content:space-between; align-items:flex-start; gap:0.5rem; margin-bottom:0.5rem; flex-wrap:wrap; }
.bet-question { font-weight:600; font-size:1rem; }
.bet-badge { font-size:0.75rem; padding:2px 8px; border-radius:20px; white-space:nowrap; }
.bet-open { background:rgba(34,197,94,0.2); color:#22c55e; }
.bet-locked { background:rgba(234,179,8,0.2); color:#eab308; }
.bet-resolved { background:rgba(124,58,237,0.2); color:var(--accent); }
.bet-cancelled { background:rgba(239,68,68,0.2); color:#ef4444; }
.bet-pool { font-size:0.8rem; color:var(--text-muted); margin-bottom:0.75rem; }
.bet-outcomes { display:flex; flex-direction:column; gap:0.5rem; }
.bet-outcome { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:8px; padding:0.6rem; }
.bet-outcome-winner { border-color:var(--accent); background:rgba(124,58,237,0.1); }
.bet-outcome-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.4rem; }
.bet-outcome-label { font-weight:500; font-size:0.9rem; }
.bet-outcome-odds { font-size:0.8rem; color:var(--accent); font-weight:700; background:rgba(124,58,237,0.15); padding:2px 6px; border-radius:4px; }
.bet-bar-wrap { position:relative; height:22px; background:rgba(255,255,255,0.05); border-radius:4px; overflow:hidden; }
.bet-bar { height:100%; border-radius:4px; transition:width 0.4s ease; }
.bet-bar-label { position:absolute; top:50%; left:8px; transform:translateY(-50%); font-size:0.7rem; color:var(--text-muted); white-space:nowrap; }
.bet-my-wager { font-size:0.75rem; color:var(--accent); margin-top:0.3rem; }
.bet-wager-row { display:flex; gap:0.4rem; align-items:center; margin-top:0.4rem; }
.bet-controls { display:flex; gap:0.4rem; align-items:center; flex-wrap:wrap; margin-top:0.75rem; padding-top:0.75rem; border-top:1px solid rgba(255,255,255,0.06); }
.bet-resolve-select { font-size:0.8rem; }
@media (max-width:600px) {
    .bet-controls { flex-direction:column; align-items:stretch; }
    .bet-controls .btn { width:100%; }
}

/* ========================================================================
   FANDOCK APP UI 2026 — vertical social app shell
   ======================================================================== */
:root {
    --fd-app-width: 520px;
    --fd-page-pad: 14px;
    --fd-nav-h: 74px;
    --fd-top-h: 66px;
    --fd-purple: #7c5cff;
    --fd-pink: #ec4899;
    --fd-cyan: #42d7ff;
    --fd-card: rgba(18, 20, 38, .82);
    --fd-card-strong: rgba(23, 25, 46, .96);
    --fd-line: rgba(255,255,255,.085);
}

html { background:#03040a; }
body {
    background:
        radial-gradient(circle at 50% -10%, rgba(124,92,255,.18), transparent 38%),
        #03040a;
    color:#f7f7fb;
    min-height:100vh;
    padding-bottom:calc(var(--fd-nav-h) + 20px);
}
body::before {
    content:"";
    position:fixed;
    top:0;
    bottom:0;
    left:50%;
    width:min(100vw, var(--fd-app-width));
    transform:translateX(-50%);
    background:
        radial-gradient(circle at 15% 4%, rgba(124,92,255,.14), transparent 25%),
        radial-gradient(circle at 85% 24%, rgba(66,215,255,.06), transparent 27%),
        linear-gradient(180deg,#0a0b16 0%,#0b0d18 48%,#080a13 100%);
    box-shadow:0 0 70px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.045);
    z-index:-1;
}
body.fd-guest { padding-bottom:0; }
body.fd-menu-open { overflow:hidden; }

/* App top bar */
.navbar.fd-appbar {
    position:sticky;
    top:0;
    z-index:1100;
    width:min(100%, var(--fd-app-width));
    margin:0 auto;
    padding:0 14px;
    background:rgba(8,10,20,.86);
    border-bottom:1px solid rgba(255,255,255,.065);
    backdrop-filter:blur(24px) saturate(1.25);
    -webkit-backdrop-filter:blur(24px) saturate(1.25);
}
.navbar.fd-appbar .nav-container {
    height:var(--fd-top-h);
    max-width:none;
    overflow:visible;
}
.nav-logo {
    display:flex;
    align-items:center;
    gap:9px;
    min-width:0;
    background:none;
    -webkit-text-fill-color:initial;
    color:#fff !important;
}
.fd-brand-mark {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    flex:0 0 34px;
    border-radius:11px;
    font-size:1rem;
    font-weight:900;
    color:#fff;
    background:linear-gradient(145deg,#9b7cff 0%,#7246ff 52%,#ec4899 130%);
    box-shadow:0 7px 22px rgba(124,92,255,.34), inset 0 1px 0 rgba(255,255,255,.28);
}
.fd-brand-copy { display:flex; flex-direction:column; line-height:1.05; }
.fd-brand-copy strong { font-size:1.08rem; letter-spacing:-.45px; }
.fd-brand-copy small { margin-top:4px; font-size:.52rem; text-transform:uppercase; letter-spacing:1.35px; color:#727991; font-weight:700; }
.fd-top-actions { display:flex; align-items:center; gap:8px; }
.fd-top-icon,
.fd-mini-profile {
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.075);
    border-radius:14px;
    color:#dfe4f4;
    background:rgba(255,255,255,.035);
    position:relative;
}
.fd-top-icon:hover,.fd-mini-profile:hover { color:#fff; background:rgba(255,255,255,.07); }
.fd-icon { width:22px; height:22px; display:block; }
.fd-mini-profile { overflow:hidden; padding:2px; }
.fd-mini-profile img { width:100%; height:100%; object-fit:cover; border-radius:11px; }
.fd-badge {
    position:absolute;
    top:-4px;
    right:-5px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#ff3b6b;
    color:#fff;
    border:2px solid #0a0b16;
    font-size:.61rem;
    font-weight:900;
    line-height:1;
}
.fd-guest-action {
    padding:8px 12px;
    border-radius:12px;
    color:#fff !important;
    font-size:.8rem;
    font-weight:750;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.055);
}

/* Main vertical app viewport */
.container {
    width:min(100%, var(--fd-app-width));
    max-width:var(--fd-app-width);
    min-height:calc(100vh - var(--fd-top-h));
    margin:0 auto;
    padding:18px var(--fd-page-pad) 28px;
    overflow:visible;
}
.site-footer {
    width:min(100%, var(--fd-app-width));
    margin:0 auto;
    padding:20px 16px calc(var(--fd-nav-h) + 18px);
    color:#52586d;
}
.fd-guest .site-footer { padding-bottom:28px; }

/* Always-mobile navigation, also on desktop */
.bottom-nav {
    display:flex !important;
    position:fixed;
    left:50%;
    right:auto;
    bottom:0;
    transform:translateX(-50%);
    width:min(100vw, var(--fd-app-width));
    max-width:var(--fd-app-width);
    height:calc(var(--fd-nav-h) + env(safe-area-inset-bottom));
    padding:7px 8px env(safe-area-inset-bottom);
    background:rgba(8,10,18,.93);
    border-top:1px solid rgba(255,255,255,.075);
    box-shadow:0 -14px 42px rgba(0,0,0,.25);
    backdrop-filter:blur(28px) saturate(1.35);
    -webkit-backdrop-filter:blur(28px) saturate(1.35);
    z-index:1300;
}
.bottom-nav a {
    flex:1;
    min-width:0;
    min-height:56px;
    padding:6px 4px 4px;
    gap:3px;
    border-radius:14px;
    color:#6e758d;
    font-size:inherit;
    position:relative;
}
.bottom-nav a .fd-icon { width:23px; height:23px; }
.bottom-nav a span:not(.fd-bottom-avatar) { font-size:.61rem; margin:0; letter-spacing:0; font-weight:650; }
.bottom-nav a.active { color:#a893ff; background:linear-gradient(180deg,rgba(124,92,255,.12),transparent); }
.bottom-nav a.active::before {
    content:"";
    position:absolute;
    top:-7px;
    width:28px;
    height:2px;
    border-radius:2px;
    background:linear-gradient(90deg,var(--fd-purple),var(--fd-cyan));
    box-shadow:0 0 10px rgba(124,92,255,.55);
}
.bottom-nav a.nav-create {
    flex:0 0 58px;
    width:54px;
    height:54px;
    min-height:54px;
    margin:-13px 2px 0;
    padding:0;
    border-radius:18px;
    background:linear-gradient(145deg,#8b70ff,#7449ff 60%,#d94eae);
    box-shadow:0 8px 26px rgba(124,92,255,.42), inset 0 1px 0 rgba(255,255,255,.24);
    color:#fff;
}
.bottom-nav a.nav-create .fd-icon { width:27px; height:27px; }
.bottom-nav a.nav-create span { display:none; }
.fd-bottom-avatar { width:23px; height:23px; border-radius:8px; overflow:hidden; display:block; border:1px solid rgba(255,255,255,.15); }
.fd-bottom-avatar img { width:100%; height:100%; object-fit:cover; }
.fd-nav-badge { top:2px; right:13%; border-color:#090b15; }

/* More = native bottom sheet */
.fd-menu-backdrop {
    display:block;
    visibility:hidden;
    opacity:0;
    position:fixed;
    inset:0;
    z-index:1390;
    background:rgba(0,0,0,.62);
    backdrop-filter:blur(4px);
    transition:opacity .22s ease, visibility .22s ease;
}
.fd-menu-backdrop.open { visibility:visible; opacity:1; }
.nav-more-menu {
    display:block;
    visibility:hidden;
    opacity:0;
    position:fixed;
    left:50%;
    right:auto;
    bottom:0;
    transform:translate(-50%, 102%);
    width:min(calc(100vw - 12px), 508px);
    max-width:508px;
    max-height:min(82vh, 760px);
    overflow:auto;
    z-index:1400;
    padding:9px 13px calc(var(--fd-nav-h) + env(safe-area-inset-bottom) + 10px);
    border:1px solid rgba(255,255,255,.1);
    border-bottom:0;
    border-radius:28px 28px 0 0;
    background:linear-gradient(180deg,rgba(25,27,49,.985),rgba(11,13,25,.99));
    box-shadow:0 -20px 70px rgba(0,0,0,.55);
    transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s, visibility .2s;
}
.nav-more-menu.open { visibility:visible; opacity:1; transform:translate(-50%,0); }
.fd-more-handle { width:42px; height:4px; margin:2px auto 12px; background:#62697e; border-radius:999px; opacity:.55; }
.fd-more-head { display:flex; justify-content:space-between; align-items:center; padding:0 3px 13px; }
.fd-more-head > div { display:flex; flex-direction:column; }
.fd-more-kicker { color:#8c7cff; font-size:.58rem; letter-spacing:1.5px; font-weight:850; }
.fd-more-head strong { font-size:1.27rem; margin-top:2px; }
.fd-more-close { width:36px; height:36px; min-height:36px; margin:0; padding:0; border-radius:50%; background:rgba(255,255,255,.07); color:#dce1ef; box-shadow:none; font-size:1.35rem; }
.fd-more-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.fd-more-grid a {
    min-height:72px;
    padding:9px 5px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:6px;
    text-align:center;
    border-radius:15px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.055);
    color:#d7dbea;
    font-size:.66rem;
    line-height:1.2;
    font-weight:650;
}
.fd-more-grid a span { font-size:1.2rem; line-height:1; }
.fd-more-grid a:hover { background:rgba(124,92,255,.12); color:#fff; }
.fd-more-links { display:grid; grid-template-columns:1fr 1fr; gap:0 8px; margin-top:12px; padding-top:10px; border-top:1px solid var(--fd-line); }
.fd-more-links a,.fd-more-account a { padding:10px 9px; border-radius:10px; color:#aab0c3; font-size:.79rem; }
.fd-more-links a:hover,.fd-more-account a:hover { color:#fff; background:rgba(255,255,255,.04); }
.fd-more-account { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; padding-top:8px; border-top:1px solid var(--fd-line); }
.fd-more-account .fd-logout-link { color:#ff91a7; margin-left:auto; }

/* Content polish */
h1 { font-size:1.45rem; letter-spacing:-.55px; font-weight:800; }
h2 { color:#f0f1f7; font-size:1.06rem; font-weight:740; }
.subtitle,.is-muted { color:#8f96aa; }

.feed-story-bar {
    gap:12px;
    margin:-4px calc(var(--fd-page-pad) * -1) 16px;
    padding:10px var(--fd-page-pad) 14px;
    border-bottom:1px solid rgba(255,255,255,.055);
    background:linear-gradient(180deg,rgba(255,255,255,.014),transparent);
}
.story-circle-ring { box-shadow:0 5px 18px rgba(0,0,0,.24); }
.story-circle-name { font-size:.65rem; color:#a6adbf; max-width:62px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.live-feed-banner {
    border-radius:16px;
    border:1px solid rgba(255,67,94,.18);
    background:linear-gradient(110deg,rgba(255,46,83,.12),rgba(124,92,255,.08));
    box-shadow:none;
}

.feed-list { max-width:none; gap:13px; }
.feed-item {
    border-radius:21px;
    border:1px solid rgba(255,255,255,.075);
    background:linear-gradient(180deg,rgba(20,22,39,.9),rgba(14,16,29,.88));
    box-shadow:0 12px 35px rgba(0,0,0,.18);
    backdrop-filter:blur(18px);
}
.feed-item:hover { border-color:rgba(255,255,255,.11); }
.feed-item-header { padding:11px 12px; }
.feed-avatar { width:40px; height:40px; border:2px solid rgba(255,255,255,.12); }
.feed-author-name { font-size:.86rem; font-weight:720; }
.post-type-badge { border-radius:999px !important; font-size:.61rem !important; padding:4px 8px !important; letter-spacing:.2px; }
.feed-thumbnail { aspect-ratio:16/10; background:#080a13; }
.feed-title { padding:12px 13px 7px; font-size:.96rem; font-weight:680; }
.feed-item-footer { padding:4px 10px 11px; gap:4px; }
.feed-action {
    min-height:35px;
    margin:0;
    padding:6px 9px;
    border-radius:11px;
    background:rgba(255,255,255,.025);
    font-size:.78rem;
}
.feed-action:hover { transform:none; box-shadow:none; }
.feed-time { font-size:.66rem; }
.feed-price-tag { border-radius:8px !important; }

.post-card,.settings-section,.stat-card,.profile-card,.discover-card {
    border-color:rgba(255,255,255,.075) !important;
    background:var(--fd-card) !important;
    box-shadow:0 10px 32px rgba(0,0,0,.15);
}
.post-grid { grid-template-columns:1fr 1fr !important; gap:9px; }
.post-card { border-radius:17px; }
.post-thumbnail { height:auto; aspect-ratio:1/1; }
.post-card-info { padding:9px; }
.post-card-info h3 { font-size:.82rem; }

/* Profile becomes creator storefront */
.profile-banner { margin:calc(var(--fd-page-pad) * -1) calc(var(--fd-page-pad) * -1) -38px !important; height:178px !important; border-radius:0 0 26px 26px !important; border-left:0 !important; border-right:0 !important; }
.profile-header { padding:0 3px; gap:11px; }
.profile-avatar img,.avatar-placeholder { width:82px; height:82px; border-width:4px; border-color:#0b0d18; }
.profile-info h1 { font-size:1.22rem; }
.profile-stats { gap:14px; font-size:.78rem; }
.profile-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.profile-actions .btn,.profile-actions a,.profile-actions button { width:100%; margin-top:0; min-height:41px; padding:8px 10px; font-size:.78rem; }

/* Forms and auth should feel native */
label { text-transform:none; font-size:.76rem; letter-spacing:0; color:#9299ac; font-weight:650; }
input[type="text"],input[type="email"],input[type="password"],input[type="url"],input[type="datetime-local"],input[type="number"],textarea,select {
    min-height:48px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.075);
    background:rgba(255,255,255,.045);
    color:#f5f6fb;
    padding:12px 13px;
}
input:focus,textarea:focus,select:focus { border-color:rgba(139,112,255,.78); box-shadow:0 0 0 3px rgba(124,92,255,.12); background:rgba(255,255,255,.055); }
button,.btn { border-radius:14px; min-height:46px; background:linear-gradient(145deg,#896dff,#7247ff); box-shadow:none; }
button:hover,.btn:hover { transform:none; box-shadow:0 6px 20px rgba(124,92,255,.2); }

.auth-form {
    max-width:none;
    margin:clamp(32px,8vh,76px) 0 0;
    padding:26px 20px 22px;
    border-radius:25px;
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg,rgba(24,26,47,.92),rgba(13,15,28,.88));
    box-shadow:0 24px 70px rgba(0,0,0,.32);
}
.auth-form::before {
    content:"FanDock";
    display:block;
    text-align:center;
    color:#8e7aff;
    font-weight:900;
    font-size:.68rem;
    letter-spacing:2.4px;
    text-transform:uppercase;
    margin-bottom:6px;
}
.auth-form h1 { margin-bottom:7px; font-size:1.7rem; }
.auth-form h1::after {
    content:"Dein direkter Platz zwischen Creator und Community.";
    display:block;
    max-width:290px;
    margin:8px auto 22px;
    color:#858da3;
    font-size:.74rem;
    line-height:1.45;
    font-weight:500;
    letter-spacing:0;
}
.auth-form form > button[type="submit"] { width:100%; margin-top:18px; }
.auth-link { padding-top:10px; border-top:1px solid rgba(255,255,255,.06); }

/* Keep complex dashboards mobile, never let desktop CSS widen them */
@media (min-width:640px) {
    .container { padding-left:var(--fd-page-pad); padding-right:var(--fd-page-pad); }
    .top-lists { grid-template-columns:1fr !important; }
}
@media (min-width:768px) {
    body { padding-bottom:calc(var(--fd-nav-h) + 20px); }
    body.fd-guest { padding-bottom:0; }
    .nav-links { display:none !important; }
    .stats-grid { grid-template-columns:repeat(3,1fr); }
    h1 { font-size:1.45rem; }
}
@media (max-width:540px) {
    :root { --fd-app-width:100vw; }
    body::before { box-shadow:none; }
    .container { padding-top:15px; }
    .fd-more-grid { grid-template-columns:repeat(4,1fr); }
}
@media (max-width:390px) {
    .fd-more-grid { grid-template-columns:repeat(3,1fr); }
    .post-grid { grid-template-columns:1fr 1fr !important; }
    .feed-time { display:none; }
}

/* App-specific usability helpers */
.fd-feed-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:12px;
    margin:4px 1px 13px;
}
.fd-feed-heading > div { display:flex; flex-direction:column; gap:1px; }
.fd-feed-heading > div > span { color:#8073c9; font-size:.56rem; letter-spacing:1.45px; font-weight:850; }
.fd-feed-heading h1 { margin:0; }
.fd-feed-heading > a {
    font-size:.7rem;
    font-weight:750;
    color:#cfc6ff;
    padding:7px 10px;
    border-radius:10px;
    background:rgba(124,92,255,.09);
    border:1px solid rgba(124,92,255,.12);
}
.fd-password-wrap { position:relative; }
.fd-password-wrap input { padding-right:50px; }
.fd-password-toggle {
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%) !important;
    width:38px;
    height:38px;
    min-height:38px;
    margin:0;
    padding:0;
    border-radius:11px;
    background:transparent;
    color:#8d94a7;
    box-shadow:none !important;
    filter:none !important;
    font-size:.95rem;
}
.fd-password-toggle:hover { background:rgba(255,255,255,.05); }
.fd-field-hint { margin-top:5px; color:#646b7d; font-size:.67rem; line-height:1.35; }
.toast { max-width:calc(min(100vw, var(--fd-app-width)) - 28px); text-align:center; }
.ad-header-banner { width:min(100%, var(--fd-app-width)); margin-left:auto !important; margin-right:auto !important; }

/* ===== FanDock UX pass: compact filters, media library & creator tools ===== */
.fd-filter-menu {
    position: relative;
    margin: .85rem 0 1.15rem;
}
.fd-filter-menu > summary {
    list-style: none;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1rem;
    border-radius: 16px;
    border: 1px solid var(--border, rgba(255,255,255,.12));
    background: var(--card, rgba(255,255,255,.06));
    color: var(--text, #fff);
    font-weight: 700;
    cursor: pointer;
}
.fd-filter-menu > summary::-webkit-details-marker { display:none; }
.fd-filter-menu > summary::after { content:'☰'; color:var(--accent, #8b5cf6); font-size:1.1rem; }
.fd-filter-menu[open] > summary::after { content:'×'; }
.fd-filter-list {
    margin-top: .55rem;
    padding: .5rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
    border-radius: 16px;
    border: 1px solid var(--border, rgba(255,255,255,.12));
    background: #121425;
}
.fd-filter-list a {
    display:flex;
    align-items:center;
    gap:.45rem;
    min-height:42px;
    padding:.6rem .7rem;
    border-radius:12px;
    color:var(--text2, #cbd5e1);
    text-decoration:none;
    background:rgba(255,255,255,.035);
    border:1px solid transparent;
}
.fd-filter-list a.active {
    color:#fff;
    border-color:rgba(139,92,246,.55);
    background:rgba(124,58,237,.16);
}
@media (max-width: 430px) { .fd-filter-list { grid-template-columns: 1fr; } }

/* Seven compact stream days must always fit inside the app column. */
.schedule-week.fd-compact-week,
.schedule-week {
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:.38rem;
    width:100%;
    overflow:visible;
}
.schedule-week .schedule-day {
    min-width:0;
    padding:.55rem .3rem;
    border-radius:14px;
}
.schedule-week .schedule-day-name {
    font-size:.78rem;
    letter-spacing:.02em;
    text-align:center;
    white-space:nowrap;
}
.schedule-week .schedule-slot {
    padding:.35rem .25rem;
    gap:.2rem;
    font-size:.68rem;
    flex-direction:column;
    align-items:center;
    text-align:center;
}
.schedule-week .schedule-slot > span:nth-child(2) {
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
@media (max-width: 560px) {
    .schedule-week.fd-compact-week,
    .schedule-week { grid-template-columns:repeat(7,minmax(0,1fr)) !important; gap:.25rem; }
    .schedule-week .schedule-day { padding:.45rem .18rem; min-height:64px; }
    .schedule-week .schedule-day-name { font-size:.68rem; }
    .schedule-week .schedule-slot { font-size:.62rem; }
}

.fd-post-actions { display:flex; align-items:center; gap:.4rem; margin-left:auto; }
.fd-delete-post-btn { border:1px solid rgba(248,113,113,.28); background:rgba(248,113,113,.08); color:#fecaca; border-radius:10px; padding:.42rem .6rem; cursor:pointer; }
.fd-delete-post-btn:hover { background:rgba(248,113,113,.16); }

/* Media library */
.fd-media-page { padding-bottom:1.5rem; }
.fd-section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:1rem; }
.fd-section-head.compact { align-items:center; margin-bottom:.65rem; }
.fd-section-head h1,.fd-section-head h2 { margin:.2rem 0 0; }
.fd-section-head p { margin:.35rem 0 0; color:var(--text2); }
.fd-eyebrow { color:var(--accent2, #22d3ee); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.fd-media-section { margin:1rem 0 1.4rem; }
.fd-media-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }
.fd-media-card { position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:16px; border:1px solid var(--border,rgba(255,255,255,.1)); background:var(--card,rgba(255,255,255,.05)); text-decoration:none; color:#fff; }
.fd-media-card img { width:100%; height:100%; object-fit:cover; display:block; }
.fd-media-card > span { position:absolute; left:.4rem; right:.4rem; bottom:.4rem; padding:.3rem .45rem; border-radius:9px; background:rgba(3,7,18,.72); font-size:.68rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fd-media-file { display:grid; place-items:center; height:100%; font-size:2rem; }
@media (max-width:420px){ .fd-media-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.fd-upload-choice { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-top:.45rem; }
.fd-media-picker-btn { border:1px solid rgba(139,92,246,.35); background:rgba(124,58,237,.11); color:#ddd6fe; min-height:40px; padding:.55rem .75rem; border-radius:12px; cursor:pointer; font:inherit; font-weight:700; }
.fd-media-selected { color:var(--text3,#94a3b8); font-size:.78rem; }
.fd-media-modal-bg { position:fixed; inset:0; z-index:10050; display:none; place-items:end center; background:rgba(0,0,0,.58); padding:1rem; }
.fd-media-modal-bg.open { display:grid; }
.fd-media-modal { width:min(720px,100%); max-height:min(78vh,760px); overflow:auto; background:#111426; border:1px solid rgba(255,255,255,.12); border-radius:24px 24px 16px 16px; padding:1rem; box-shadow:0 -20px 60px rgba(0,0,0,.35); }
.fd-media-modal-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; position:sticky; top:-1rem; z-index:2; background:#111426; padding:.85rem 0; }
.fd-media-modal-head h3 { margin:0; }
.fd-media-picker-filter{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.65rem;margin:.15rem 0 .8rem;padding:.7rem .8rem;border-radius:13px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}.fd-media-picker-filter label{font-size:.72rem;font-weight:800;color:var(--text3,#99a3b7)}.fd-media-picker-filter select{min-width:0;width:100%;background:#0b0f1e;border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:10px;padding:.55rem .7rem;font:inherit}.fd-media-pick span small{display:block;color:#b8c1d5;font-size:.56rem;margin-top:.12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-media-modal-close { width:40px; height:40px; border-radius:12px; border:0; background:rgba(255,255,255,.07); color:#fff; font-size:1.25rem; cursor:pointer; }
.fd-media-picker-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }
.fd-media-pick { position:relative; aspect-ratio:1/1; border:1px solid rgba(255,255,255,.08); border-radius:14px; overflow:hidden; padding:0; background:#090d18; cursor:pointer; }
.fd-media-pick img { width:100%; height:100%; object-fit:cover; display:block; }
.fd-media-pick span { position:absolute; left:.3rem; right:.3rem; bottom:.3rem; color:#fff; background:rgba(0,0,0,.65); padding:.25rem; border-radius:8px; font-size:.64rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:420px){ .fd-media-picker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Shop manager */
.shop-manager-toolbar { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:1rem; }
.shop-manager-toolbar h2 { margin:0 !important; text-align:left !important; }
.shop-manager-icons { display:flex; gap:.55rem; }
.shop-manager-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.06); color:#fff; text-decoration:none; cursor:pointer; font-size:1.25rem; }
.shop-settings-box.fd-manager-panel > summary { list-style:none; display:none; }
.shop-settings-box.fd-manager-panel { margin-top:.75rem; }
.shop-banner-preview { width:100%; aspect-ratio:3/1; border-radius:16px; overflow:hidden; background:linear-gradient(135deg,var(--accent,#7c3aed),#14182a); border:1px solid rgba(255,255,255,.08); margin:.5rem 0 .8rem; }
.shop-banner-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.shop-product-previews { display:grid; grid-template-columns:repeat(4,1fr); gap:.45rem; margin-top:.6rem; }
.shop-product-previews img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; border:1px solid rgba(255,255,255,.1); }
.shop-gallery-strip { display:flex; gap:.4rem; overflow-x:auto; margin:.55rem 0; }
.shop-gallery-strip img { width:64px; height:64px; object-fit:cover; border-radius:10px; flex:0 0 auto; }

/* FanDock v3 – compact group UX */
.groups-page .groups-header { align-items:center; }
.groups-page .groups-header-actions { margin-left:auto; flex-wrap:nowrap; }
.groups-page .groups-action-btn { display:inline-flex; align-items:center; justify-content:center; gap:.35rem; min-height:42px; padding:.55rem .72rem; border-radius:13px; white-space:nowrap; font-size:.86rem; }
.groups-page .groups-search { align-items:stretch; }
.groups-page .groups-search button { flex:0 0 46px; width:46px; padding:.55rem; display:grid; place-items:center; }
@media (max-width:520px) {
  .groups-page .groups-header { flex-wrap:nowrap; }
  .groups-page .groups-header h2 { font-size:1.1rem; }
  .groups-page .groups-action-btn span { display:none; }
  .groups-page .groups-action-btn { width:42px; padding:.5rem; }
}

/* ============================================================
   FanDock Messages v4 — app-first inbox + chat
   ============================================================ */
.dm-app {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    color: #f7f8ff;
}
.dm-inbox-shell,
.dm-chat-shell {
    background:
        radial-gradient(circle at 100% 0%, rgba(128, 70, 255, .10), transparent 32%),
        linear-gradient(180deg, rgba(17, 18, 36, .92), rgba(10, 11, 24, .96));
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0,0,0,.24);
}
.dm-inbox-shell { min-height: 66vh; padding-bottom: 12px; }
.dm-inbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 26px 24px 18px;
}
.dm-eyebrow {
    display: block;
    color: #9a7cff;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .13em;
    margin-bottom: 5px;
}
.dm-inbox-header h1,
.dm-new-chat-head h2 {
    margin: 0;
    letter-spacing: -.03em;
}
.dm-inbox-header h1 { font-size: 1.85rem; }
.dm-inbox-header p {
    margin: 5px 0 0;
    color: #9ca7bf;
    font-size: .9rem;
}
.dm-inbox-header p strong { color: #fff; }
.dm-new-chat-fab {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(135deg, #7656ff, #a44cff);
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 400;
    cursor: pointer;
    flex: 0 0 auto;
    box-shadow: 0 10px 30px rgba(121,76,255,.28);
}
.dm-new-chat-fab:hover { transform: translateY(-1px); }
.dm-inbox-search-wrap {
    margin: 0 20px 14px;
    height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 15px;
    border-radius: 17px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.055);
}
.dm-inbox-search-wrap > span { color: #8e99b2; font-size: 1.25rem; }
.dm-inbox-search-wrap input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: .94rem;
}
.dm-inbox-search-wrap input::placeholder { color: #6e7890; }
.dm-conversation-list {
    padding: 2px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dm-conversation-card {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 12px;
    border: 1px solid transparent;
    border-radius: 20px;
    color: #fff;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.dm-conversation-card:hover {
    background: rgba(255,255,255,.055);
    transform: translateY(-1px);
}
.dm-conversation-card.is-unread {
    background: linear-gradient(90deg, rgba(124,77,255,.14), rgba(124,77,255,.035));
    border-color: rgba(145,102,255,.15);
}
.dm-conversation-avatar-wrap,
.dm-avatar-wrap {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}
.dm-conversation-avatar {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    object-fit: cover;
    background: #171a2c;
    border: 1px solid rgba(255,255,255,.1);
}
.dm-creator-dot {
    position: absolute;
    right: -4px;
    bottom: -3px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c4dff, #d04dff);
    color: white;
    border: 3px solid #101224;
    font-size: .58rem;
}
.dm-conversation-content { min-width: 0; flex: 1; }
.dm-conversation-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}
.dm-conversation-row strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .98rem;
}
.dm-conversation-row time {
    flex: 0 0 auto;
    color: #69758e;
    font-size: .72rem;
    font-weight: 700;
}
.dm-conversation-card.is-unread .dm-conversation-row time { color: #b39aff; }
.dm-preview-row { margin-top: 4px; }
.dm-conversation-preview {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #8994ab;
    font-size: .84rem;
}
.dm-conversation-card.is-unread .dm-conversation-preview { color: #d7d9e8; font-weight: 600; }
.dm-unread-badge {
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #8352ff, #d04dff);
    font-size: .68rem;
    box-shadow: 0 5px 16px rgba(131,82,255,.26);
}
.dm-empty-inbox {
    text-align: center;
    padding: 62px 28px 54px;
}
.dm-empty-inbox h2 { margin: 16px 0 7px; font-size: 1.2rem; }
.dm-empty-inbox p { color: #8994ab; margin: 0 auto 20px; max-width: 310px; line-height: 1.5; }
.dm-empty-orbit {
    width: 82px;
    height: 82px;
    margin: 0 auto;
    display: grid;
    place-items: center;
    border-radius: 28px;
    background: radial-gradient(circle, rgba(134,83,255,.28), rgba(134,83,255,.08));
    border: 1px solid rgba(156,108,255,.2);
    font-size: 2.1rem;
}
.dm-primary-action {
    min-height: 46px;
    border: 0;
    border-radius: 15px;
    padding: 0 18px;
    background: linear-gradient(135deg, #7854ff, #a943f4);
    color: #fff;
    font: inherit;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(121,76,255,.2);
}
.dm-primary-action:disabled { opacity: .45; cursor: default; box-shadow: none; }

/* New chat bottom sheet */
.dm-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(1,3,12,.68);
    backdrop-filter: blur(7px);
    opacity: 0;
    transition: opacity .2s ease;
}
.dm-sheet-backdrop.open { opacity: 1; }
.dm-new-chat-sheet {
    position: fixed;
    z-index: 1060;
    left: 50%;
    bottom: calc(var(--bottom-nav-height) + 12px + env(safe-area-inset-bottom));
    width: min(680px, calc(100vw - 28px));
    height: min(720px, calc(100dvh - var(--bottom-nav-height) - 42px - env(safe-area-inset-bottom)));
    max-height: calc(100dvh - var(--bottom-nav-height) - 42px - env(safe-area-inset-bottom));
    overflow: hidden;
    padding: 10px 20px 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 28px;
    background: linear-gradient(180deg, #17182b, #0d0e1c);
    box-shadow: 0 26px 70px rgba(0,0,0,.52), 0 0 0 1px rgba(124,77,255,.04) inset;
    transform: translate(-50%, calc(100% + var(--bottom-nav-height) + 36px));
    transition: transform .24s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
    opacity: 0;
}
.dm-new-chat-sheet.open { transform: translate(-50%,0); opacity: 1; }
.dm-sheet-handle {
    width: 42px;
    height: 5px;
    margin: 0 auto 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
}
.dm-new-chat-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.dm-new-chat-head h2 { font-size: 1.25rem; }
.dm-sheet-close,
.dm-icon-button {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.055);
    color: #fff;
    cursor: pointer;
}
.dm-sheet-close {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    font-size: 1.35rem;
}
.dm-new-chat-form {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}
.dm-user-search-field {
    height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-radius: 17px;
    border: 1px solid rgba(255,255,255,.11);
    background: #0b0d19;
}
.dm-user-search-field > span:first-child { color: #9c7cff; font-weight: 900; }
.dm-user-search-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font: inherit;
}
.dm-search-spinner {
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255,255,255,.16);
    border-top-color: #a681ff;
    border-radius: 50%;
    animation: dmSpin .7s linear infinite;
}
@keyframes dmSpin { to { transform: rotate(360deg); } }
.dm-user-results {
    display: flex;
    flex: 1;
    min-height: 120px;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 4px 8px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.16) transparent;
}
.dm-user-result {
    width: 100%;
    min-height: 74px;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 52px minmax(0,1fr) 28px;
    align-items: center;
    gap: 13px;
    padding: 10px 12px;
    box-sizing: border-box;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.025);
    background: rgba(255,255,255,.018);
    color: #fff;
    cursor: pointer;
    text-align: left;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.dm-user-result:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); }
.dm-user-result.selected { background: rgba(135,84,255,.13); border-color: rgba(153,111,255,.28); box-shadow: 0 8px 26px rgba(80,45,190,.08); }
.dm-user-result img { width: 52px; height: 52px; object-fit: cover; border-radius: 17px; background: #232544; border: 1px solid rgba(255,255,255,.055); }
.dm-user-result span { display: flex; flex-direction: column; min-width: 0; }
.dm-user-result strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .98rem; line-height: 1.2; }
.dm-user-result small { color: #8792aa; margin-top: 5px; font-size: .75rem; line-height: 1.2; }
.dm-user-result b { width: 28px; display:grid; place-items:center; color: #9d7dff; font-size: 1.7rem; font-weight: 400; line-height: 1; }
.dm-no-user-result { padding: 18px; text-align: center; color: #7e8aa3; }
.dm-new-chat-error { color: #ff98aa; background: rgba(255,98,125,.08); border: 1px solid rgba(255,98,125,.16); padding: 10px 12px; border-radius: 13px; font-size: .85rem; }
.dm-start-chat-button {
    width: 100%;
    min-height: 52px;
    flex: 0 0 auto;
    margin-top: 2px;
    position: sticky;
    bottom: 0;
    z-index: 2;
    box-shadow: 0 -14px 30px rgba(13,14,28,.72), 0 10px 28px rgba(124,77,255,.18);
}
body.dm-sheet-open { overflow: hidden; }

/* Chat view */
.dm-chat-shell {
    height: min(790px, calc(100dvh - 156px));
    min-height: 520px;
    display: flex;
    flex-direction: column;
    position: relative;
}
.dm-chat-topbar {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) 42px;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    min-height: 70px;
    border-bottom: 1px solid rgba(255,255,255,.065);
    background: rgba(15,16,31,.92);
    backdrop-filter: blur(14px);
}
.dm-icon-button {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    text-decoration: none;
    font-size: 1.2rem;
}
.dm-back-icon { font-size: 1.45rem; }
.dm-chat-menu-button { font-size: 1.6rem; line-height: 1; }
.dm-chat-person {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
}
.dm-chat-avatar { width: 43px; height: 43px; border-radius: 14px; object-fit: cover; border: 1px solid rgba(255,255,255,.1); }
.dm-chat-person-copy { min-width: 0; display: flex; flex-direction: column; }
.dm-chat-person-copy strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-chat-person-copy small { color: #77839c; font-size: .72rem; margin-top: 2px; }
.dm-chat-popover {
    position: absolute;
    right: 12px;
    top: 61px;
    min-width: 205px;
    padding: 7px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.1);
    background: #181a2d;
    box-shadow: 0 18px 45px rgba(0,0,0,.4);
}
.dm-chat-popover a,
.dm-chat-popover button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    border: 0;
    border-radius: 11px;
    padding: 10px;
    background: transparent;
    color: #e8eaff;
    font: inherit;
    font-size: .84rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.dm-chat-popover a:hover,
.dm-chat-popover button:hover { background: rgba(255,255,255,.06); }
.dm-chat-popover .danger { color: #ff9bac; }
.dm-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 20px 15px 12px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.13) transparent;
}
.dm-date-separator {
    display: flex;
    justify-content: center;
    margin: 9px 0 10px;
}
.dm-date-separator span {
    padding: 5px 9px;
    border-radius: 999px;
    color: #717d96;
    background: rgba(255,255,255,.045);
    font-size: .67rem;
    font-weight: 750;
}
.dm-chat-welcome {
    margin: auto;
    max-width: 300px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    color: #828da5;
}
.dm-chat-welcome img { width: 76px; height: 76px; border-radius: 25px; object-fit: cover; border: 1px solid rgba(255,255,255,.1); margin-bottom: 5px; }
.dm-chat-welcome strong { color: #f3f4ff; }
.dm-msg {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    max-width: 82%;
}
.dm-msg-mine { align-self: flex-end; flex-direction: row-reverse; }
.dm-msg-theirs { align-self: flex-start; }
.dm-msg-avatar { width: 27px; height: 27px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; }
.dm-msg-bubble {
    max-width: 100%;
    padding: 9px 12px 6px;
    border-radius: 18px;
    word-break: break-word;
    box-shadow: 0 7px 22px rgba(0,0,0,.08);
}
.dm-msg-mine .dm-msg-bubble {
    background: linear-gradient(135deg, #7352ff, #9545e9);
    border-bottom-right-radius: 6px;
}
.dm-msg-theirs .dm-msg-bubble {
    background: #202337;
    border: 1px solid rgba(255,255,255,.055);
    border-bottom-left-radius: 6px;
}
.dm-msg-text { font-size: .9rem; line-height: 1.43; }
.dm-msg-time { margin-top: 4px; font-size: .62rem; line-height: 1; color: rgba(255,255,255,.48); text-align: right; }
.dm-msg-pending { opacity: .62; }
.dm-composer {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 9px;
    align-items: end;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,.065);
    background: rgba(13,14,28,.96);
    backdrop-filter: blur(14px);
}
.dm-composer textarea {
    width: 100%;
    min-height: 44px;
    max-height: 132px;
    resize: none;
    box-sizing: border-box;
    border-radius: 17px;
    border: 1px solid rgba(255,255,255,.09);
    background: #191b2c;
    color: #fff;
    padding: 11px 13px;
    outline: none;
    font: inherit;
    font-size: .91rem;
    line-height: 1.4;
}
.dm-composer textarea:focus { border-color: rgba(144,104,255,.48); box-shadow: 0 0 0 3px rgba(124,77,255,.08); }
.dm-composer textarea::placeholder { color: #657089; }
.dm-composer-actions { display: flex; align-items: center; gap: 7px; }
.dm-char-count { display: none; color: #69758f; font-size: .63rem; }
.dm-char-count.warn { color: #ffad79; display: inline; }
.dm-send-button {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #7653ff, #a744f5);
    box-shadow: 0 8px 24px rgba(124,77,255,.24);
    cursor: pointer;
    font-size: 1.1rem;
    transition: opacity .15s ease, transform .15s ease;
}
.dm-send-button:disabled { opacity: .28; cursor: default; box-shadow: none; }
.dm-send-button:not(:disabled):hover { transform: translateY(-1px); }
.dm-send-button.sending span { animation: dmPulse .7s ease infinite alternate; }
@keyframes dmPulse { to { transform: translateX(3px); opacity: .55; } }

@media (max-width: 760px) {
    .dm-app { max-width: none; }
    .dm-inbox-shell,
    .dm-chat-shell { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
    .dm-chat-shell { height: calc(100dvh - 132px); min-height: 460px; }
    .dm-msg { max-width: 88%; }
}
@media (max-width: 480px) {
    .dm-inbox-header { padding: 21px 16px 14px; }
    .dm-inbox-header h1 { font-size: 1.55rem; }
    .dm-new-chat-fab { width: 48px; height: 48px; border-radius: 16px; }
    .dm-inbox-search-wrap { margin-left: 12px; margin-right: 12px; }
    .dm-conversation-list { padding-left: 5px; padding-right: 5px; }
    .dm-conversation-card { padding: 11px 10px; border-radius: 17px; }
    .dm-conversation-avatar { width: 51px; height: 51px; border-radius: 16px; }
    .dm-new-chat-sheet {
        width: calc(100vw - 16px);
        bottom: calc(var(--bottom-nav-height) + 8px + env(safe-area-inset-bottom));
        height: min(700px, calc(100dvh - var(--bottom-nav-height) - 24px - env(safe-area-inset-bottom)));
        max-height: calc(100dvh - var(--bottom-nav-height) - 24px - env(safe-area-inset-bottom));
        border-radius: 24px;
        padding-left: 14px;
        padding-right: 14px;
        padding-bottom: 14px;
    }
    .dm-new-chat-head { margin-bottom: 14px; }
    .dm-user-results { gap: 7px; }
    .dm-user-result { min-height: 76px; padding: 11px 10px; }
    .dm-user-result img { width: 52px; height: 52px; }

    .dm-char-count { display: none !important; }
}

/* ===== FanDock Tournament Social UI v8 ===== */
.fd-tournament-page,.fd-tournament-index,.fd-tournament-form-page{max-width:760px;margin:0 auto;padding:1rem 1rem 7rem}
.fd-tournament-hero{position:relative;overflow:hidden;border:1px solid rgba(164,112,255,.22);border-radius:28px;padding:1.4rem;background:linear-gradient(145deg,#15152a,#201846 58%,#2d1d58);background-size:cover;background-position:center;box-shadow:0 18px 45px rgba(0,0,0,.22)}
.fd-tournament-hero.has-image{min-height:360px;display:flex;flex-direction:column;justify-content:flex-end}
.fd-tournament-tags{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:.8rem}.fd-tournament-tags span{padding:.45rem .72rem;border-radius:999px;background:rgba(7,8,20,.72);border:1px solid rgba(255,255,255,.12);font-weight:800;font-size:.78rem}
.fd-tournament-hero h1{font-size:clamp(2rem,7vw,3rem);line-height:1.02;margin:.25rem 0 .5rem}.fd-tournament-host{color:#b6b1cb;margin:.1rem 0 .65rem}.fd-tournament-host a{color:#caa9ff;text-decoration:none}.fd-tournament-start{display:inline-flex;align-self:flex-start;padding:.55rem .8rem;border-radius:13px;background:rgba(4,5,15,.7);margin-bottom:.7rem}.fd-tournament-desc{font-size:1rem;line-height:1.55;max-width:650px}.fd-tournament-link{display:block;margin-top:.8rem;padding:.85rem 1rem;border-radius:15px;background:rgba(126,70,230,.18);border:1px solid rgba(171,125,255,.3);color:#d4c0ff;text-decoration:none;font-weight:800}.fd-tournament-actions{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:1rem}.fd-tournament-actions form{margin:0}
.fd-tournament-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.65rem;margin:1rem 0}.fd-tournament-stats>div{min-width:0;text-align:center;background:#171728;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:.9rem .45rem}.fd-tournament-stats strong{display:block;color:#aa80ff;font-size:1.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fd-tournament-stats span{display:block;color:#8f90a3;font-size:.68rem;margin-top:.25rem}
.fd-tournament-join-card,.fd-tournament-section{background:#151525;border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:1.2rem;margin-top:1rem}.fd-tournament-join-card{display:flex;gap:.7rem;flex-wrap:wrap}.fd-tournament-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.7rem}.fd-tournament-people>a{display:flex;align-items:center;gap:.65rem;color:#f1eff8;text-decoration:none;background:#0e0f1c;border:1px solid rgba(255,255,255,.07);border-radius:15px;padding:.7rem}.fd-tournament-people>a.eliminated{opacity:.45}.fd-tournament-people img,.fd-user-placeholder{width:42px;height:42px;border-radius:13px;object-fit:cover;background:#25233e;display:grid;place-items:center}.fd-tournament-people span span{display:block}.fd-tournament-people small{display:block;color:#8f90a3;margin-top:.12rem}
.fd-tournament-bracket{padding-bottom:.5rem}.fd-tournament-bracket .bracket-round{min-width:230px}.fd-tournament-compose textarea,.fd-tournament-compose input[type=url]{width:100%;box-sizing:border-box;background:#0b0c17;border:1px solid rgba(255,255,255,.09);border-radius:14px;color:#fff;padding:.85rem;margin:.45rem 0}.fd-tournament-updates{display:grid;gap:.8rem}.fd-tournament-updates article{background:#0d0e1a;border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:1rem}.fd-tournament-updates header{display:flex;gap:.6rem;align-items:center}.fd-tournament-updates header img{width:38px;height:38px;border-radius:12px;object-fit:cover}.fd-tournament-updates header small{display:block;color:#7f8196}.fd-tournament-updates p{line-height:1.55}.fd-tournament-update-image{width:100%;max-height:430px;object-fit:cover;border-radius:15px;margin-top:.55rem}
.fd-tournament-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.9rem}.fd-tournament-card{display:block;overflow:hidden;border-radius:21px;background:#151525;border:1px solid rgba(255,255,255,.08);text-decoration:none;color:#fff}.fd-tournament-card img{width:100%;aspect-ratio:16/8;object-fit:cover}.fd-tournament-card>div{padding:1rem}.fd-tournament-card>div>span{color:#a68bdf;font-size:.76rem;font-weight:800}.fd-tournament-card h3{margin:.35rem 0 .4rem}.fd-tournament-card p{color:#9495a9;font-size:.82rem;margin:.2rem 0}.fd-tournament-card strong{display:block;color:#c3a7ff;margin-top:.55rem}.fd-tournament-card.ended{opacity:.78}.fd-tournament-form-page .fd-route-form-card{margin-bottom:1rem}
.fd-profile-tournament-list{display:grid;gap:.65rem}.fd-profile-tournament-card{display:grid;grid-template-columns:88px 1fr;gap:.75rem;padding:.65rem;background:#121321;border:1px solid rgba(255,255,255,.08);border-radius:17px;text-decoration:none;color:#fff}.fd-profile-tournament-card img,.fd-profile-tournament-placeholder{width:88px;height:74px;object-fit:cover;border-radius:13px;background:#272139;display:grid;place-items:center;font-size:1.8rem}.fd-profile-tournament-card span{color:#9a80d8;font-size:.72rem;font-weight:800}.fd-profile-tournament-card strong{display:block;margin:.2rem 0}.fd-profile-tournament-card small{color:#858699}
@media(max-width:620px){.fd-tournament-page,.fd-tournament-index,.fd-tournament-form-page{padding-left:.65rem;padding-right:.65rem}.fd-tournament-stats{grid-template-columns:1fr 1fr}.fd-tournament-hero{border-radius:23px}.fd-tournament-grid{grid-template-columns:1fr}.fd-tournament-people{grid-template-columns:1fr 1fr}.fd-tournament-people>a{padding:.55rem}.fd-tournament-people img,.fd-user-placeholder{width:36px;height:36px}.fd-profile-tournament-card{grid-template-columns:76px 1fr}.fd-profile-tournament-card img,.fd-profile-tournament-placeholder{width:76px;height:68px}}

/* ===== Collabs app layout v8 ===== */
.fd-collab-page{max-width:760px;margin:0 auto;padding:1rem 1rem 7rem}.fd-collab-hero,.fd-collab-detail-hero{background:linear-gradient(145deg,#16162e,#242052);border:1px solid rgba(166,115,255,.16);border-radius:26px;padding:1.5rem;text-align:center}.fd-collab-hero.compact{padding:1.2rem}.fd-collab-hero h1,.fd-collab-detail-hero h1{margin:.35rem 0;font-size:clamp(2rem,7vw,2.65rem)}.fd-collab-hero p,.fd-collab-detail-hero p{color:#9ca2ba;line-height:1.5}.fd-collab-detail-hero>span{display:inline-flex;padding:.42rem .65rem;border-radius:999px;background:#0c0d19;color:#c5a8ff;font-weight:800}.fd-collab-detail-hero small{display:block;color:#818399}.fd-collab-detail-hero a{color:#bb91ff}
.fd-collab-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 56px;gap:.6rem;margin:1rem 0;position:relative;z-index:20}.fd-collab-menu{position:relative}.fd-collab-menu summary{list-style:none;cursor:pointer;background:#171829;border:1px solid rgba(255,255,255,.08);border-radius:15px;padding:.78rem .85rem;color:#ece9f6;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fd-collab-menu summary::-webkit-details-marker{display:none}.fd-collab-menu summary b{background:#b43cff;color:#fff;border-radius:999px;padding:.05rem .35rem;font-size:.72rem}.fd-collab-menu>div{position:absolute;top:calc(100% + 7px);left:0;right:0;min-width:220px;background:#10111e;border:1px solid rgba(255,255,255,.1);border-radius:15px;padding:.4rem;box-shadow:0 18px 38px rgba(0,0,0,.42);max-height:330px;overflow:auto}.fd-collab-menu a{display:flex;justify-content:space-between;gap:.5rem;text-decoration:none;color:#c7c6d2;padding:.7rem .75rem;border-radius:11px}.fd-collab-menu a:hover,.fd-collab-menu a.active{background:#282044;color:#d7c4ff}.fd-collab-new{display:grid;place-items:center;background:linear-gradient(145deg,#824fff,#cb3fc9);border-radius:15px;color:#fff;text-decoration:none;font-size:2rem;font-weight:300}
.fd-collab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.8rem}.fd-collab-card{display:block;background:#141523;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:1rem;text-decoration:none;color:#fff}.fd-collab-card-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.fd-collab-card-top span{color:#b299e7;font-size:.75rem;font-weight:800}.fd-collab-card-top b{font-size:.72rem;color:#71dfb6}.fd-collab-card h3{margin:.55rem 0 .35rem}.fd-collab-card p{color:#8e91a7;line-height:1.45;font-size:.86rem}.fd-collab-avatars{display:flex;align-items:center;margin-top:.8rem}.fd-collab-avatars>span{width:32px;height:32px;border-radius:10px;border:2px solid #141523;background:#28243e;display:grid;place-items:center;margin-right:-7px;overflow:hidden}.fd-collab-avatars img{width:100%;height:100%;object-fit:cover}.fd-collab-avatars small{margin-left:14px;color:#9899aa}.collab-empty{text-align:center;padding:4rem 1rem;color:#7e849c}.collab-empty>span{font-size:3rem}.collab-empty h2{color:#d9d9e5}
.fd-collab-create-form .fd-route-form-card{margin-top:1rem}.fd-collab-create-form label,.fd-collab-detail-card label{display:block;color:#b8b9c9;font-weight:750;margin:.8rem 0 .35rem}.fd-collab-create-form input,.fd-collab-create-form textarea,.fd-collab-create-form select,.fd-collab-detail-card input,.fd-collab-detail-card textarea{width:100%;box-sizing:border-box;background:#0b0c16;border:1px solid rgba(255,255,255,.09);border-radius:14px;color:#fff;padding:.78rem}.fd-collab-search{display:grid;grid-template-columns:auto 1fr;align-items:center;background:#0b0c16;border:1px solid rgba(255,255,255,.08);border-radius:15px;padding-left:.8rem}.fd-collab-search input{border:0;background:transparent}.fd-collab-partner-results{display:grid;gap:.5rem;margin-top:.7rem;max-height:330px;overflow:auto}.fd-collab-person{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:.7rem;border:1px solid rgba(255,255,255,.07);background:#121321;color:#fff;border-radius:15px;padding:.6rem;text-align:left}.fd-collab-person>img,.fd-collab-person>span:first-child{width:44px;height:44px;border-radius:12px;object-fit:cover;background:#25233d;display:grid;place-items:center}.fd-collab-person span strong,.fd-collab-person span small{display:block}.fd-collab-person span small{color:#82869a}.fd-collab-person>b{font-size:1.35rem;color:#ad82ff}.fd-collab-selected-title{margin:1rem 0 .5rem}.fd-collab-selected{display:grid;gap:.5rem}.fd-collab-selected-person{display:grid;grid-template-columns:42px 1fr 34px;gap:.65rem;align-items:center;background:#211a3b;border:1px solid #53368a;border-radius:14px;padding:.55rem}.fd-collab-selected-person img,.fd-collab-selected-person>span:first-child{width:42px;height:42px;border-radius:12px;object-fit:cover;background:#30294a;display:grid;place-items:center}.fd-collab-selected-person strong,.fd-collab-selected-person small{display:block}.fd-collab-selected-person small{color:#a098b9}.fd-collab-selected-person button{border:0;background:#32294b;color:#fff;width:32px;height:32px;border-radius:10px;font-size:1.2rem}
.fd-collab-detail-card{background:#141523;border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:1.1rem;margin-top:1rem}.fd-collab-contributor-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.6rem}.fd-collab-contributor{display:grid;grid-template-columns:44px 1fr;gap:.6rem;align-items:center;background:#0c0d18;border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:.65rem}.fd-collab-contributor img,.fd-collab-contributor>span{width:44px;height:44px;border-radius:12px;object-fit:cover;background:#28243e;display:grid;place-items:center}.fd-collab-contributor small{display:block;color:#85879a}.fd-collab-contributor.accepted{border-color:rgba(55,210,145,.3)}.fd-collab-contributor.invited{border-color:rgba(249,184,71,.25)}.fd-collab-contributor.rejected{opacity:.45}.fd-collab-invite{text-align:center}.fd-collab-sections{display:grid;gap:.8rem}.fd-collab-sections article{background:#0c0d18;border-radius:16px;padding:1rem;border-left:3px solid #814df0}.fd-collab-sections header{display:flex;align-items:center;gap:.55rem}.fd-collab-sections header img{width:34px;height:34px;border-radius:10px;object-fit:cover}.fd-collab-sections p{line-height:1.55}.fd-collab-owner-actions{display:flex;gap:.6rem;flex-wrap:wrap}
@media(max-width:620px){.fd-collab-page{padding:.7rem .65rem 7rem}.fd-collab-toolbar{grid-template-columns:minmax(0,1fr) 54px}.fd-collab-toolbar .fd-collab-menu:nth-child(2){grid-row:2;grid-column:1/-1}.fd-collab-grid{grid-template-columns:1fr}.fd-collab-contributor-list{grid-template-columns:1fr}.fd-collab-menu>div{right:auto;min-width:250px}}

/* FanDock Ads v9 */
.ad-inline-text small,.ad-overlay-text small{display:block;color:var(--text3);font-size:.75rem;margin-top:.2rem}.ad-inline-text span,.ad-overlay-text span{display:block}.ad-embed{width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#05050c;margin:.6rem 0}.ad-embed iframe{width:100%;height:100%;border:0}.ad-cta{display:inline-flex;margin-top:.7rem;padding:.55rem .8rem;border-radius:10px;background:linear-gradient(135deg,var(--accent),#c23be8);color:white;text-decoration:none;font-weight:700;font-size:.85rem}.ad-header-banner .ad-inline{margin:.5rem auto;max-width:760px}.ad-header-banner .ad-inline-img{width:100px;height:64px}


/* Shared content-form primitives still used by legacy Core features while they
   are migrated to the plugin SDK. Kept in Core deliberately; Routes owns a
   duplicate scoped copy so removing the Routes plugin cannot break these UIs. */
.fd-route-index-head,.fd-route-create-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:6px 0 20px}
.fd-route-index-head h1,.fd-route-create-head h1{margin:.1rem 0 .25rem;font-size:1.75rem;line-height:1.05}
.fd-route-index-head p,.fd-route-create-head p{margin:0;color:var(--text2);line-height:1.45}
.fd-route-create-fab{width:52px;height:52px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg,#7653ff,#b63df0);color:#fff;font-size:1.7rem;text-decoration:none;box-shadow:0 12px 28px rgba(124,77,255,.28);flex:0 0 auto}
.fd-route-list-title{font-size:1rem;margin:22px 2px 10px;color:#e9edff}
.fd-route-form-card{background:#151727;border:1px solid rgba(255,255,255,.07);border-radius:22px;padding:17px;margin-bottom:13px}.fd-route-form-card h2{font-size:1.05rem;margin:0 0 15px}
.fd-route-media-row{display:flex;align-items:center;gap:8px;margin-bottom:9px}.fd-route-upload{display:inline-flex;align-items:center;gap:7px;padding:10px 12px;border-radius:13px;background:#232539;border:1px solid rgba(255,255,255,.08);font-size:.76rem;font-weight:800;cursor:pointer}.fd-route-upload input{display:none}.fd-route-media-row .fd-media-picker-btn{min-height:40px;padding:.55rem .75rem}
.fd-route-video{position:relative;padding-top:56.25%;border-radius:14px;overflow:hidden;margin-top:9px;background:#080a12}.fd-route-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.fd-route-publish-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.fd-route-publish-options label input{display:none}.fd-route-publish-options span{display:block;padding:12px;border-radius:14px;background:#1d1f32;border:1px solid rgba(255,255,255,.07);font-size:.75rem;font-weight:800;text-align:center;cursor:pointer}.fd-route-publish-options input:checked+span{border-color:#835dff;background:rgba(124,77,255,.16)}
.fd-route-create-submit{width:100%;min-height:50px;border-radius:16px;margin-top:2px}
.fd-route-image-choices{display:grid;grid-template-columns:1fr 1fr;gap:9px}.fd-route-file-choice,.fd-route-image-choices .fd-media-picker-btn{min-height:48px;box-sizing:border-box;border-radius:14px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.76rem;font-weight:850;cursor:pointer}.fd-route-file-choice{background:#22243a;border:1px dashed rgba(156,125,255,.35);color:#ddd7f3;padding:10px}.fd-route-file-choice input{display:none}.fd-route-form-preview{display:block;width:100%;max-height:210px;object-fit:cover;border-radius:15px;margin:4px 0 9px;border:1px solid rgba(255,255,255,.08)}.fd-route-remove-image,.fd-route-checkbox{display:flex!important;align-items:center;gap:8px!important;color:#aab3c8!important;font-size:.75rem!important;margin:8px 0 11px}.fd-route-remove-image input,.fd-route-checkbox input{width:auto!important;margin:0!important}
@media(max-width:600px){.fd-route-publish-options,.fd-route-image-choices{grid-template-columns:1fr}}


/* ===== v75: Feed double-tap likes ===== */
.feed-item{position:relative}
.feed-item-body{touch-action:manipulation}
.fd-double-like-burst{
    position:absolute;z-index:80;pointer-events:none;user-select:none;
    transform:translate(-50%,-50%) scale(.18) rotate(-10deg);
    transform-origin:center;font-size:clamp(3.8rem,16vw,7.5rem);line-height:1;
    filter:drop-shadow(0 7px 24px rgba(0,0,0,.48));
    animation:fdDoubleLikeBurst .82s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes fdDoubleLikeBurst{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.18) rotate(-10deg)}
    20%{opacity:1;transform:translate(-50%,-50%) scale(1.16) rotate(5deg)}
    48%{opacity:1;transform:translate(-50%,-50%) scale(.96) rotate(-2deg)}
    72%{opacity:1;transform:translate(-50%,-54%) scale(1.02) rotate(0)}
    100%{opacity:0;transform:translate(-50%,-72%) scale(.72) rotate(0)}
}
@media (prefers-reduced-motion:reduce){
    .fd-double-like-burst{animation-duration:.18s}
}

/* ===== v77: Feed hold menu + robust drawer back-swipes ===== */
.feed-list .feed-item{-webkit-touch-callout:none;-webkit-user-select:none!important;user-select:none!important}
.feed-list .feed-item img{-webkit-user-drag:none;user-drag:none}
.fd-post-hold-overlay,.fd-post-hold-overlay *{-webkit-touch-callout:none!important;-webkit-user-select:none!important;user-select:none!important}
.fd-post-hold-overlay{touch-action:pan-y}
html.fd-feed-overlay-lock,body.fd-feed-overlay-lock{overflow:hidden!important;overscroll-behavior:none!important}
body.fd-feed-overlay-lock .fd-swipe-feed-list{overflow:hidden!important;overscroll-behavior:none!important;touch-action:none!important}
.fd-comments-drawer,.fd-profile-drawer{overscroll-behavior:contain;touch-action:pan-y}
.fd-comments-body,.fd-profile-body{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}

.fd-post-hold-overlay{position:absolute;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(4,6,15,.78);backdrop-filter:blur(11px);opacity:0;visibility:hidden;transition:opacity .16s ease,visibility .16s ease;border-radius:inherit}
.fd-post-hold-overlay.open{opacity:1;visibility:visible}
.fd-post-hold-menu{width:min(360px,calc(100% - 12px));max-height:calc(100% - 16px);overflow:auto;padding:8px;border-radius:22px;background:linear-gradient(180deg,rgba(27,29,48,.98),rgba(13,15,27,.98));border:1px solid rgba(255,255,255,.11);box-shadow:0 24px 70px rgba(0,0,0,.5);overscroll-behavior:contain}
.fd-post-hold-menu-title{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 10px;color:#9ea6bb;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.fd-post-hold-close{width:30px;height:30px;min-height:30px;padding:0;border-radius:10px;background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.08);font-size:1rem}
.fd-post-hold-action{width:100%;min-height:43px;display:flex;align-items:center;gap:11px;padding:10px 12px;margin:2px 0;border:0;border-radius:13px;background:transparent;color:#eef1f8;text-align:left;font-size:.82rem;font-weight:760;cursor:pointer}
.fd-post-hold-action:hover,.fd-post-hold-action:focus-visible{background:rgba(124,77,255,.14);outline:none}
.fd-post-hold-action .fd-hold-icon{width:25px;text-align:center;font-size:1.05rem;flex:0 0 25px}
.fd-post-hold-action small{margin-left:auto;color:#747d93;font-size:.64rem;font-weight:700}
.fd-post-hold-action.danger{color:#ff9d9d}.fd-post-hold-action.disabled{opacity:.45;pointer-events:none}
.fd-post-hold-sep{height:1px;background:rgba(255,255,255,.065);margin:6px 8px}
.fd-swipe-feed-item .fd-post-hold-overlay{border-radius:0}

.fd-report-post-overlay{position:fixed;inset:0;z-index:18000;display:grid;place-items:center;padding:18px;background:rgba(4,5,13,.78);backdrop-filter:blur(10px)}
.fd-report-post-card{width:min(430px,100%);max-height:min(82dvh,680px);overflow:auto;padding:19px;border-radius:22px;background:#121522;border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 80px rgba(0,0,0,.56);overscroll-behavior:contain}
.fd-report-post-card h3{margin:0 0 6px}.fd-report-post-card p{margin:0 0 14px;color:#929aaf;font-size:.8rem;line-height:1.45}
.fd-report-post-card label{display:block;margin:10px 0 5px;color:#bfc5d4;font-size:.72rem;font-weight:800}
.fd-report-post-card select,.fd-report-post-card textarea{width:100%;box-sizing:border-box;background:#090b14;color:#fff;border:1px solid rgba(255,255,255,.09);border-radius:13px;padding:11px;font:inherit}
.fd-report-post-card textarea{min-height:100px;resize:vertical}
.fd-report-post-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.fd-report-post-actions button{min-height:44px}
@media(max-width:520px){.fd-post-hold-overlay{padding:10px}.fd-post-hold-menu{width:min(340px,100%);border-radius:19px}.fd-post-hold-action{min-height:41px;padding:9px 10px;font-size:.79rem}.fd-report-post-actions{grid-template-columns:1fr}}

/* FanDock v79 · embedded YouTube video notices */
.fd-youtube-video-body{display:block!important;padding:0 12px 10px!important;color:inherit!important;text-decoration:none!important}
.fd-youtube-embed-shell{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:20px;background:#05070d;border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 30px rgba(0,0,0,.18)}
.fd-youtube-embed-shell iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
.fd-youtube-video-caption{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;padding:10px 2px 0}
.fd-youtube-video-detail{display:block;min-width:0;flex:1;color:inherit;text-decoration:none}.fd-youtube-video-detail:hover .feed-title{color:#c9b5ff}
.fd-youtube-video-source{display:block;margin-bottom:2px;color:#ff6b7d;font-size:.67rem;font-weight:850;text-transform:uppercase;letter-spacing:.04em}
.fd-youtube-video-caption .feed-title{margin:0!important;padding:0!important;background:none!important;font-size:1rem;line-height:1.35;transition:color .16s}
.fd-youtube-open-external{flex:0 0 auto;padding:.42rem .58rem;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);color:var(--text2);text-decoration:none;font-size:.68rem;font-weight:750;white-space:nowrap}
.fd-youtube-open-external:hover{color:#fff;border-color:rgba(255,0,51,.35);background:rgba(255,0,51,.08)}
.fd-swipe-feed-item .fd-youtube-video-body{min-height:0;display:grid!important;grid-template-rows:minmax(0,1fr) auto;padding:6px 10px 8px!important;overflow:hidden!important}
.fd-swipe-feed-item .fd-youtube-embed-shell{height:100%;min-height:0;aspect-ratio:auto;border-radius:16px}
.fd-swipe-feed-item .fd-youtube-video-caption{padding:7px 1px 0;align-items:center}.fd-swipe-feed-item .fd-youtube-video-caption .feed-title{font-size:.83rem;line-height:1.2}.fd-swipe-feed-item .fd-youtube-video-source{font-size:.57rem}.fd-swipe-feed-item .fd-youtube-open-external{font-size:.59rem;padding:.34rem .45rem}
@media(max-width:560px){.fd-youtube-video-caption{flex-direction:column;gap:.5rem}.fd-youtube-open-external{align-self:flex-start}.fd-swipe-feed-item .fd-youtube-video-caption{flex-direction:row}.fd-swipe-feed-item .fd-youtube-open-external{align-self:auto}}
.post-youtube-embed{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:20px;background:#05070d;border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 30px rgba(0,0,0,.2);margin-bottom:1rem}.post-youtube-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}


/* FanDock v80 · YouTube swipe autoplay state */
.fd-swipe-feed-item .fd-youtube-embed-shell.fd-youtube-autoplay-active{border-color:rgba(255,70,95,.34);box-shadow:0 12px 34px rgba(0,0,0,.24),0 0 0 1px rgba(255,70,95,.09)}
.fd-swipe-feed-item .fd-youtube-embed-shell.fd-youtube-autoplay-active::after{content:'AUTO';position:absolute;z-index:2;top:8px;left:8px;padding:4px 7px;border-radius:999px;background:rgba(5,7,13,.68);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(9px);color:#fff;font-size:.52rem;font-weight:900;letter-spacing:.08em;pointer-events:none;opacity:.78}
.fd-swipe-feed-item .fd-youtube-embed-shell.fd-youtube-autoplay-blocked::before{content:'Autoplay blockiert · tippen zum Starten';position:absolute;z-index:3;left:50%;bottom:14px;transform:translateX(-50%);max-width:calc(100% - 28px);padding:7px 10px;border-radius:999px;background:rgba(5,7,13,.78);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);color:#fff;font-size:.58rem;font-weight:800;white-space:nowrap;pointer-events:none}
.fd-swipe-feed-item .fd-youtube-embed-shell.fd-youtube-sound-blocked:not(.fd-youtube-autoplay-blocked)::before{content:'🔇 Ton vom Browser blockiert · im Player antippen';position:absolute;z-index:3;left:50%;bottom:14px;transform:translateX(-50%);max-width:calc(100% - 28px);padding:7px 10px;border-radius:999px;background:rgba(5,7,13,.78);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);color:#fff;font-size:.58rem;font-weight:800;white-space:nowrap;pointer-events:none}

/* FanDock v80 · Shorts stay vertical; only Shorts are eligible for swipe autoplay */
.fd-youtube-embed-shell.fd-youtube-short{aspect-ratio:9/16;max-width:min(100%,430px);margin-inline:auto}
.fd-swipe-feed-item .fd-youtube-embed-shell.fd-youtube-short{height:100%;width:auto;max-width:100%;aspect-ratio:9/16;justify-self:center;margin-inline:auto}

.post-youtube-embed.fd-youtube-short{aspect-ratio:9/16;max-width:min(100%,430px);margin-left:auto;margin-right:auto}