:root {
    --primary: #00f0ff;
    --secondary: #ff00ff;
    --accent: #00ff88;
    --dark: #0a0e27;
    --darker: #050816;
    --light: #ffffff;
    --gray: #8892b0;
    --card-bg: rgba(15, 23, 42, 0.8);
    --border: rgba(0, 240, 255, 0.3);
    --glow: 0 0 20px rgba(0, 240, 255, 0.5);
    --text-primary: #ffffff;
    --text-secondary: #8892b0;
    --page-bg: var(--darker);
    --grid-line: rgba(0, 240, 255, 0.05);
    --navbar-bg: rgba(10, 14, 39, 0.95);
    --input-bg: rgba(255, 255, 255, 0.03);
    --hover-bg: rgba(255, 255, 255, 0.05);
    --shadow-color: rgba(0, 0, 0, 0.4);

    color-scheme: dark;
}

/* ===== LIGHT THEME ===== */
[data-theme="light"] {
    --primary: #0088aa;
    --secondary: #b8009e;
    --accent: #00915c;
    --dark: #f4f6fb;
    --darker: #ffffff;
    --light: #0a0e27;
    --gray: #55607a;
    --card-bg: rgba(255, 255, 255, 0.85);
    --border: rgba(0, 136, 170, 0.25);
    --glow: 0 0 20px rgba(0, 136, 170, 0.25);
    --text-primary: #0a0e27;
    --text-secondary: #4a5370;
    --page-bg: #f4f6fb;
    --grid-line: rgba(0, 136, 170, 0.06);
    --navbar-bg: rgba(255, 255, 255, 0.95);
    --input-bg: rgba(0, 0, 0, 0.03);
    --hover-bg: rgba(0, 0, 0, 0.04);
    --shadow-color: rgba(10, 14, 39, 0.12);

    color-scheme: light;
}

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

html {
    -webkit-text-size-adjust: 100%;
    /* Root fix for the "half the site is cut off / scrolled sideways on
       mobile" bug: the mobile nav drawer (.nav-links/.user-menu) is
       position:fixed + transform:translateX(100%) to sit off-screen when
       closed (see the max-width:768px media query below). A transform
       only moves an element visually — it does NOT shrink the layout box
       browsers use to compute the page's scrollable width, so that
       ~320px-wide off-screen drawer was still inflating the whole
       document's horizontal scroll range past the viewport, even though
       nothing was visibly overflowing. overflow-x:hidden was already set
       on body, but body's own scrollWidth is still driven by html's
       scrollable area in this situation — needs to be set here too. */
    overflow-x: hidden;
    width: 100%;
}

/* Defensive baseline: nothing embedded in a card should be able to force
   horizontal scroll on a narrow viewport, even if a specific component
   forgets its own width rule. */
img, video, svg, canvas {
    max-width: 100%;
}
/* Same defensive baseline, for form controls: a <textarea>, <select>, or
   <input> has its own browser-default intrinsic width, and inside a flex
   or grid row that default silently overrides flex:1/width:100% unless
   min-width:0 is set explicitly (see .post-input's comment above for the
   real bug this caused). Setting it globally here means no future
   textarea/select/input placed in a flex/grid row can repeat that bug
   just by omission. */
textarea, select, input {
    min-width: 0;
    max-width: 100%;
}

body {
    font-family: 'Rajdhani', sans-serif;
    background: var(--page-bg);
    color: var(--text-primary);
    overflow-x: hidden;
    position: relative;
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Animated Background Grid */
.cyber-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
        linear-gradient(var(--grid-line) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridMove 20s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--navbar-bg);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--border);
    z-index: 1000;
    box-shadow: 0 4px 30px var(--shadow-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--light);
    min-width: 0;
    flex-shrink: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.logo-icon {
    font-size: 2rem;
    color: var(--primary);
    filter: drop-shadow(0 0 10px var(--primary));
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.logo-text .highlight {
    color: var(--primary);
    text-shadow: 0 0 20px var(--primary);
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-link {
    color: var(--gray);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transition: width 0.3s;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.username {
    color: var(--accent);
    font-weight: 600;
    font-size: 1.1rem;
}

.btn-logout {
    padding: 0.5rem 1.5rem;
    background: rgba(255, 0, 0, 0.2);
    border: 1px solid rgba(255, 0, 0, 0.5);
    color: #ff4444;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-logout:hover {
    background: rgba(255, 0, 0, 0.3);
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
}

/* ===== Theme Toggle + Hamburger ===== */
.nav-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--input-bg);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
}

.theme-toggle:hover {
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.25);
    transform: translateY(-1px);
}

.theme-icon {
    font-size: 1.2rem;
    line-height: 1;
}

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

.hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
}

.hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-menu-backdrop.visible {
    display: block;
    opacity: 1;
}

/* ===== Settings Page ===== */
.settings-card {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.75rem;
    margin-top: 1.5rem;
}

.settings-card-header h3 {
    color: var(--light);
    font-size: 1.2rem;
    margin-bottom: 0.35rem;
}

.settings-card-header p {
    color: var(--gray);
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
}

#verificationSettingsBody .form-group {
    margin-bottom: 1rem;
}

.theme-option-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    background: var(--input-bg);
    border: 2px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-primary);
    font-family: inherit;
    transition: all 0.25s;
}

.theme-option:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.theme-option.selected {
    border-color: var(--primary);
    box-shadow: var(--glow);
    background: rgba(0, 240, 255, 0.08);
}

.theme-option-icon {
    font-size: 1.75rem;
}

.theme-option-label {
    font-weight: 600;
    letter-spacing: 0.5px;
}

.settings-hint {
    margin-top: 1.25rem;
    color: var(--gray);
    font-size: 0.85rem;
}

/* Main Content */
.main-content {
    margin-top: 80px;
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 80px);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.page {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}

.page.active {
    display: block;
}

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

/* Hero Section */
.hero {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.15) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.hero-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.hero-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.glitch {
    color: var(--primary);
    text-shadow: 
        0 0 10px var(--primary),
        0 0 20px var(--primary),
        0 0 40px var(--primary);
    animation: glitch 3s infinite;
}

@keyframes glitch {
    0%, 100% { text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary); }
    25% { text-shadow: -2px 0 10px var(--secondary), 2px 2px 20px var(--primary); }
    50% { text-shadow: 2px -2px 10px var(--primary), -2px 0 20px var(--secondary); }
    75% { text-shadow: -2px 2px 10px var(--accent), 2px 0 20px var(--primary); }
}

.subtitle {
    font-size: 2rem;
    color: var(--gray);
    letter-spacing: 5px;
}

.hero-description {
    font-size: 1.3rem;
    color: var(--gray);
    max-width: 600px;
    margin: 0 auto 3rem;
}

.hero-stats {
    display: flex;
    gap: 4rem;
    justify-content: center;
    margin-bottom: 3rem;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-family: 'Orbitron', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary);
    text-shadow: 0 0 20px var(--primary);
}

.stat-label {
    font-size: 1.1rem;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}

/* Buttons */
.btn-primary,
.btn-secondary,
.btn-submit,
.btn-search {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Rajdhani', sans-serif;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: var(--dark);
    box-shadow: 0 4px 15px rgba(0, 240, 255, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 240, 255, 0.6);
}

.btn-secondary {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.btn-secondary:hover {
    background: rgba(0, 240, 255, 0.1);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
}

.btn-submit,
.btn-search {
    width: 100%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: var(--dark);
    margin-top: 1rem;
}

.btn-submit:hover,
.btn-search:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 240, 255, 0.6);
}

/* Forms */
.form-container,
.search-container,
.dashboard-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

.section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
    color: var(--primary);
    text-shadow: 0 0 20px var(--primary);
}

.player-form {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    color: var(--primary);
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.team-member-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    align-items: center;
}
.team-member-row input {
    flex: 1;
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    font-size: 0.9rem;
}
.team-member-row button {
    background: none;
    border: 1px solid var(--border);
    color: #f66;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    cursor: pointer;
    flex-shrink: 0;
}
.team-member-row button:hover { background: rgba(255,68,68,0.1); border-color: #f66; }

.form-group input,
.form-group textarea,
.search-input {
    padding: 0.875rem;
    background: var(--hover-bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--light);
    font-size: 1rem;
    font-family: 'Rajdhani', sans-serif;
    transition: all 0.3s;
}

.form-group select {
    padding: 0.875rem;
    background: var(--hover-bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--light);
    font-size: 1rem;
    font-family: 'Rajdhani', sans-serif;
    transition: all 0.3s;
}

.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus,
.search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
}

.file-upload {
    grid-column: 1 / -1;
}

.file-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.file-input-wrapper input[type="file"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

.file-input-wrapper::before {
    content: 'Choose File';
    padding: 0.875rem 1.5rem;
    background: rgba(0, 240, 255, 0.2);
    border: 1px solid var(--primary);
    border-radius: 5px;
    color: var(--primary);
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 600;
}

.file-input-wrapper:hover::before {
    background: rgba(0, 240, 255, 0.3);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

.file-name {
    color: var(--gray);
    font-style: italic;
}

/* Dashboard */
.dashboard-container {
    max-width: 1400px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
}

.dash-card {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.dash-card h3 {
    font-family: 'Orbitron', sans-serif;
    color: var(--primary);
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.profile-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
    background: var(--input-bg);
    border-radius: 5px;
    border-left: 3px solid var(--accent);
}

.profile-label {
    color: var(--gray);
    font-weight: 600;
}

.profile-value {
    color: var(--light);
    font-weight: 700;
}

.guild-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.guild-form h4 {
    color: var(--accent);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.guild-list {
    max-height: 400px;
    overflow-y: auto;
    margin-top: 1rem;
}

.guild-item {
    padding: 1rem;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    margin-bottom: 1rem;
    transition: all 0.3s;
}

.guild-item:hover {
    background: var(--hover-bg);
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
}

.guild-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.guild-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--light);
}

.guild-tag {
    padding: 0.25rem 0.75rem;
    background: var(--primary);
    color: var(--dark);
    border-radius: 3px;
    font-weight: 700;
    font-size: 0.9rem;
}

.guild-info {
    color: var(--gray);
    font-size: 0.95rem;
}

.guild-members {
    margin-top: 0.5rem;
    color: var(--accent);
    font-weight: 600;
}

.btn-join {
    margin-top: 0.75rem;
    padding: 0.5rem 1.5rem;
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-join:hover {
    background: rgba(0, 255, 136, 0.1);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

.request-item {
    padding: 1rem;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    margin-bottom: 1rem;
}

.request-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.request-player {
    font-weight: 700;
    color: var(--light);
}

.request-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-accept,
.btn-reject {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-accept {
    background: rgba(0, 255, 136, 0.2);
    color: var(--accent);
    border: 1px solid var(--accent);
}

.btn-accept:hover {
    background: rgba(0, 255, 136, 0.3);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

.btn-reject {
    background: rgba(255, 0, 0, 0.2);
    color: #ff4444;
    border: 1px solid #ff4444;
}

.btn-reject:hover {
    background: rgba(255, 0, 0, 0.3);
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
}

/* Search */
.search-box {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.search-input {
    flex: 1;
}

.btn-search {
    width: auto;
    padding: 0.875rem 2rem;
    margin: 0;
}

.search-results {
    display: grid;
    gap: 1.5rem;
}

.player-card {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
}

.player-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 32px rgba(0, 240, 255, 0.3);
    transform: translateY(-5px);
}

.player-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.player-main-info h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.player-uid {
    color: var(--gray);
    font-size: 1rem;
}

.player-status {
    padding: 0.5rem 1rem;
    background: rgba(0, 255, 136, 0.2);
    border: 1px solid var(--accent);
    border-radius: 5px;
    color: var(--accent);
    font-weight: 600;
}

.player-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.detail-item {
    padding: 0.75rem;
    background: var(--input-bg);
    border-radius: 5px;
    border-left: 3px solid var(--accent);
}

.detail-label {
    color: var(--gray);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.detail-value {
    color: var(--light);
    font-weight: 700;
    font-size: 1.1rem;
}

/* Toast Notifications */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 1rem 2rem;
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--light);
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    transform: translateX(400px);
    transition: transform 0.3s;
    z-index: 2000;
}

.toast.show {
    transform: translateX(0);
}

.toast.success {
    border-color: var(--accent);
    box-shadow: 0 4px 20px rgba(0, 255, 136, 0.3);
}

.toast.error {
    border-color: #ff4444;
    box-shadow: 0 4px 20px rgba(255, 0, 0, 0.3);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--darker);
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* ============================================================
   RESPONSIVE — Tablet / iPad (max-width: 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .nav-container {
        padding: 1rem 1.5rem;
    }

    .feed-layout {
        grid-template-columns: 1fr;
        max-width: 700px;
    }

    .feed-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .feed-sidebar .sidebar-card {
        flex: 1 1 220px;
    }

    .container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .hero-title {
        font-size: 3.5rem;
    }
}

/* ============================================================
   RESPONSIVE — Mobile / small tablets (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
    .nav-container {
        padding: 0.85rem 0.75rem;
    }

    .nav-right {
        gap: 0.4rem;
    }

    .icon-btn,
    .theme-toggle,
    .hamburger {
        width: 38px;
        height: 38px;
    }

    .hamburger {
        display: flex;
    }

    /* Turn the desktop link rows into a slide-in drawer */
    .nav-links,
    .user-menu {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: min(78vw, 320px);
        background: var(--navbar-bg);
        backdrop-filter: blur(14px);
        border-left: 1px solid var(--border);
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 5.5rem 1.5rem 2rem;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 999;
        overflow-y: auto;
        display: flex;
    }

    .nav-links.menu-hidden,
    .user-menu.menu-hidden {
        display: none;
    }

    .nav-links.open,
    .user-menu.open {
        transform: translateX(0);
        box-shadow: -10px 0 40px var(--shadow-color);
    }

    .nav-links .nav-link,
    .user-menu .nav-link {
        width: 100%;
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--border);
        font-size: 1rem;
    }

    /* These already live on the bottom nav bar (or, for Home/Feed/Reels/
       Videos, are one tap away from it) — hidden here so the hamburger
       drawer only shows what isn't already reachable another way. */
    .nav-links .nav-link.mobile-hide,
    .user-menu .nav-link.mobile-hide {
        display: none;
    }

    .user-menu {
        gap: 0.25rem;
    }

    .user-menu .username {
        padding: 0.75rem 0;
    }

    .user-menu .btn-logout {
        width: 100%;
        margin-top: 0.5rem;
        text-align: center;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .subtitle {
        font-size: 1.25rem;
    }

    .hero-description {
        font-size: 0.95rem;
    }

    .hero-stats {
        flex-direction: column;
        gap: 1.5rem;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions button {
        width: 100%;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .player-details {
        grid-template-columns: 1fr;
    }

    .feed-layout {
        padding: 1.25rem 0.75rem;
    }

    .feed-sidebar {
        flex-direction: column;
    }

    .section-title {
        font-size: 1.6rem;
    }

    .settings-card {
        padding: 1.25rem;
    }

    .theme-option-group {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .theme-option {
        flex-direction: row;
        justify-content: flex-start;
        padding: 0.9rem 1rem;
    }
}

/* ============================================================
   RESPONSIVE — Small phones (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {
    .nav-container {
        padding: 0.65rem 0.5rem;
    }

    .logo {
        gap: 0.3rem;
    }

    .logo-text {
        font-size: 0.85rem;
    }

    .logo-icon {
        font-size: 1.3rem;
    }

    .hero-title {
        font-size: 2rem;
    }

    .nav-links,
    .user-menu {
        width: 100vw;
    }

    .modal-content {
        padding: 1.25rem;
        width: 94%;
    }

    .account-type-cards {
        grid-template-columns: 1fr;
    }

    .nav-right {
        gap: 0.25rem;
    }

    .icon-btn,
    .theme-toggle,
    .hamburger {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
    }

    .icon-btn .icon-badge {
        font-size: 0.6rem;
    }

    .profile-edit-btn {
        flex: 1 1 auto;
        padding: 0.45rem 0.6rem;
        font-size: 0.78rem;
    }

    .post-card { padding: 0.75rem; }
    .post-actions { flex-wrap: nowrap; }
    .btn-post-action { flex: 1 1 0; min-width: 0; padding: 0.4rem 0.2rem; font-size: 0.68rem; gap: 0.15rem; }
    .post-actions .react-count { font-size: 0.65rem; min-width: 8px; padding: 1px 3px; }
    .post-actions.post-actions-compact {
        flex-wrap: nowrap;
        gap: 0.25rem;
    }
    .post-actions-compact .btn-post-action {
        flex: 1 1 0;
        padding: 0.32rem 0.15rem;
        font-size: 0.7rem;
        gap: 0.15rem;
    }
    .post-actions-compact .btn-share-action {
        flex: 0 0 auto;
        width: 1.9rem;
    }
    .post-actions-compact .react-count {
        font-size: 0.65rem;
        padding: 1px 4px;
    }
    .post-card .video-player-wrap video,
    .post-card .video-player-wrap .custom-player,
    .custom-player video {
        /* The video's displayed CSS size doesn't affect decode cost (the
           browser decodes the source resolution regardless), so capping
           this tightly bought no real performance benefit — it just made
           the player look smaller. Sized relative to the viewport height
           so it reads as a big, immersive player on any phone without
           ever overflowing a short screen. */
        max-height: 65vh;
    }
}

/* ============================================================
   RESPONSIVE — Large desktop refinement
   ============================================================ */
@media (min-width: 1400px) {
    .nav-container,
    .container {
        max-width: 1500px;
    }
}

/* Guild Browse */
.guild-browse-list {
    display: grid;
    gap: 1.5rem;
    margin-top: 2rem;
}

.guild-browse-item {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s;
}

.guild-browse-item:hover {
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
    transform: translateY(-3px);
}

.guild-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    color: var(--gray);
    font-size: 0.9rem;
}

.guild-meta strong {
    color: var(--accent);
}

/* Guild Details Page */
.guild-details-header {
    margin-bottom: 2rem;
}

/* Member Item */
.member-item {
    padding: 1rem;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
}

.member-item:hover {
    background: var(--hover-bg);
}

.member-item.banned-member {
    background: rgba(255, 0, 0, 0.1);
    border-color: rgba(255, 0, 0, 0.3);
}

.member-info {
    flex: 1;
}

.member-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--light);
    margin-bottom: 0.5rem;
}

.member-meta {
    display: flex;
    gap: 1rem;
    color: var(--gray);
    font-size: 0.9rem;
}

.ban-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(255, 0, 0, 0.3);
    color: #ff4444;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 0.5rem;
}

.team-id-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    background: rgba(0, 255, 136, 0.15);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: monospace;
    vertical-align: middle;
    margin-left: 0.4rem;
}

.btn-ban {
    padding: 0.5rem 1.5rem;
    background: rgba(255, 0, 0, 0.2);
    border: 1px solid #ff4444;
    color: #ff4444;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-ban:hover {
    background: rgba(255, 0, 0, 0.3);
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
}

/* Teams */
.team-item {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.team-item h4 {
    color: var(--primary);
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}

.team-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.team-member-card {
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid var(--primary);
    border-radius: 5px;
    padding: 1rem;
    text-align: center;
}

.team-member-name {
    font-weight: 700;
    color: var(--light);
    margin-bottom: 0.25rem;
}

.team-member-uid {
    color: var(--gray);
    font-size: 0.9rem;
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    animation: fadeIn 0.3s;
}

.modal-content {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 2rem;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.modal-content h3 {
    color: var(--primary);
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.member-selector {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 1rem;
    background: var(--input-bg);
}

.member-checkbox {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--input-bg);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
}

.member-checkbox:hover {
    background: var(--hover-bg);
}

.member-checkbox input[type="checkbox"] {
    margin-right: 0.75rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.member-checkbox span {
    color: var(--light);
    font-weight: 500;
}

/* Ban Status Styles */
.banned-player-card {
    border: 2px solid #ff4444 !important;
    background: rgba(255, 68, 68, 0.05) !important;
}

.banned-status {
    background: #ff4444 !important;
    color: white !important;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    font-weight: bold;
}

.ban-status-alert {
    background: rgba(255, 68, 68, 0.1);
    border: 2px solid #ff4444;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1rem 0;
}

.ban-detail-item {
    margin: 1rem 0;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 68, 68, 0.2);
}

.ban-detail-item:last-child {
    border-bottom: none;
}

.ban-detail-item strong {
    color: #ff4444;
    display: block;
    margin-bottom: 0.5rem;
}

.ban-attachments-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.ban-attachments-grid img,
.ban-attachments-grid video {
    border: 2px solid rgba(255, 68, 68, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.ban-attachments-grid img:hover,
.ban-attachments-grid video:hover {
    border-color: #ff4444;
    transform: scale(1.05);
}

/* Member Actions */
.member-actions {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
}

.member-actions button {
    width: 100%;
    min-width: 100px;
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(5px);
}

.modal-content {
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 2rem;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 50px rgba(0, 240, 255, 0.3);
}

.modal-content h3 {
    color: var(--primary);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.modal-content textarea {
    width: 100%;
    min-height: 100px;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--light);
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
}

.modal-content textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.file-preview {
    margin-top: 1rem;
}

/* User Menu Styles */
.user-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-menu .nav-link {
    margin: 0 0.5rem;
}

.username {
    color: var(--accent);
    font-weight: 600;
    padding: 0.5rem 1rem;
    background: rgba(0, 255, 136, 0.1);
    border-radius: 5px;
}

/* Responsive styles */
@media (max-width: 768px) {
    .member-actions {
        flex-direction: row;
    }
    
    .member-actions button {
        width: auto;
        min-width: 80px;
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }
    
    .modal-content {
        padding: 1.5rem;
        width: 95%;
    }
}

/* ===== SOCIAL FEED STYLES ===== */
.feed-layout {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1rem;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* Feed page no longer has a left profile sidebar — the create-post
   composer now serves that role, so the feed is a single centered column. */
.feed-layout-nosidebar {
    grid-template-columns: 1fr;
    max-width: 680px;
}

.feed-sidebar {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0; /* same grid-item overflow risk as .feed-main, see its comment */
}

.sidebar-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    backdrop-filter: blur(10px);
}

.sidebar-title {
    color: var(--primary);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
    font-family: 'Orbitron', sans-serif;
}

.sidebar-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(0, 240, 255, 0.1);
    font-size: 0.9rem;
}
.sidebar-stat:last-child { border-bottom: none; }
.sidebar-stat strong { color: var(--primary); }

.sidebar-profile-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.sidebar-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    overflow: hidden;
    flex-shrink: 0;
}
.sidebar-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #000;
    font-weight: 900;
    font-size: 1.2rem;
    font-family: 'Orbitron', sans-serif;
}

.sidebar-name { font-weight: 700; color: var(--light); font-size: 0.95rem; }
.sidebar-uid { color: var(--gray); font-size: 0.8rem; }
.sidebar-guild { color: var(--accent); font-size: 0.8rem; margin-top: 0.2rem; }
.sidebar-bio { color: var(--gray); font-size: 0.85rem; margin-top: 0.5rem; line-height: 1.4; }

/* Feed Main */
/* min-width:0 is the actual root fix for the site-wide "cut off / shifted
   sideways" bug: .feed-layout is a CSS grid (grid-template-columns:1fr on
   mobile, via .feed-layout-nosidebar), and grid items — just like flex
   items — default to min-width:auto, meaning a 1fr track still won't
   shrink narrower than the tallest intrinsic content inside it. That
   content was the postContent <textarea> a few levels down (browser
   textareas have their own intrinsic min width via the cols attribute),
   which forced this grid item, and with it the whole grid and every
   .page/.main-content ancestor above it, wider than the viewport. Fixing
   the textarea alone (see .post-input) wasn't enough because THIS is the
   actual constraint the grid was honoring — min-width:0 here lets the
   grid item actually shrink to its track's real size on any screen. */
.feed-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.feed-login-prompt {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: var(--gray);
}

.feed-loading {
    text-align: center;
    padding: 3rem;
    color: var(--primary);
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    animation: pulse 2s ease-in-out infinite;
}

.no-posts {
    text-align: center;
    padding: 3rem;
    color: var(--gray);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
}

/* Create Post */
.create-post-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.25rem;
    backdrop-filter: blur(10px);
}

.create-post-header {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.post-avatar-wrap { flex-shrink: 0; }

.post-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #000;
    font-weight: 900;
    font-size: 1rem;
    font-family: 'Orbitron', sans-serif;
    flex-shrink: 0;
}
.post-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.post-avatar-letter { font-size: 1rem; font-weight: 900; color: #000; }

.post-input {
    flex: 1;
    /* This is the actual root cause of the site being cut off / scrolled
       sideways on mobile (confirmed by measuring real element widths):
       a <textarea> has a browser-default intrinsic width (~20 columns)
       that flex items respect unless told otherwise — flex items default
       to min-width:auto, meaning "never shrink below your natural
       content size," and flex:1 does NOT override that on its own. With
       no cols attribute set on this textarea (see index.html), its
       intrinsic width was a few hundred px, wider than a 412px phone
       screen, and it was forcing every ancestor up the chain
       (.create-post-header -> .create-post-card -> .feed-main ->
       .feed-layout) to stretch wide enough to fit it — which is what
       pushed the entire feed page (and the page below it) past the
       right edge of the viewport. min-width:0 is the standard fix: it
       lets the flex item actually shrink to fill its share of the row
       instead of being floored by its own content's natural size. */
    min-width: 0;
    background: rgba(0, 240, 255, 0.05);
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: 24px;
    padding: 0.75rem 1.25rem;
    color: var(--light);
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    resize: none;
    min-height: 80px;
    transition: border-color 0.3s;
}
.post-input:focus { outline: none; border-color: var(--primary); }
.post-input::placeholder { color: var(--gray); }

.create-post-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 240, 255, 0.1);
    /* On narrow screens (Photo/Reel/Video pills + community select + char
       counter + Post button) don't all fit on one line — without wrap
       they were forced onto one row and pushed the Post button a little
       past the right edge instead of dropping to a second line. */
    flex-wrap: wrap;
}

.post-img-label {
    color: var(--primary);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 20px;
    transition: all 0.2s;
    background: none;
    font-family: inherit;
    display: inline-block;
}
.post-img-label:hover { background: rgba(0, 240, 255, 0.1); }

.post-community-select {
    color: var(--text);
    background: var(--card-bg);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-family: inherit;
    max-width: 170px;
}
.post-community-select:hover { border-color: var(--primary); }

.char-counter {
    color: var(--gray);
    font-size: 0.85rem;
    margin-left: auto;
}

.btn-post {
    padding: 0.5rem 1.5rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border: none;
    border-radius: 20px;
    color: #000;
    font-weight: 800;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s;
    letter-spacing: 1px;
}
.btn-post:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0, 240, 255, 0.4); }

/* Post Card */
.post-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.25rem;
    backdrop-filter: blur(10px);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.post-card:hover { border-color: rgba(0, 240, 255, 0.5); }

.post-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.post-author-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.post-author-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
}
.post-author-line .post-author {
    flex: 0 1 auto;
}
.post-author-line .verify-badge {
    flex: 0 0 auto;
}
.post-author-line .post-guild-badge {
    flex: 0 1 auto;
    margin: 0;
    text-decoration: none;
}
.post-author-line .btn-inline-follow {
    flex: 0 0 auto;
    margin-left: 0.1rem;
}

.post-author {
    font-weight: 700;
    color: var(--light);
    font-size: 1rem;
}
.post-author:hover { color: var(--primary); }

.verify-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 0.25rem;
    background: var(--primary);
    color: #05070c;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 900;
    vertical-align: middle;
    line-height: 1;
}

.btn-inline-follow {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.6rem;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.btn-inline-follow:hover { background: rgba(0, 240, 255, 0.1); }
.btn-inline-follow:disabled { opacity: 0.6; cursor: default; }
.btn-inline-follow-active {
    background: rgba(0, 240, 255, 0.1);
    color: var(--gray);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Small follow button on the profile page header (distinct from the huge
   hero .btn-primary/.btn-secondary buttons — those are sized for the
   landing page hero, not a compact action next to a name). */
.btn-profile-follow {
    background: transparent;
    border: 1.5px solid var(--primary);
    color: var(--primary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.btn-profile-follow:hover {
    background: rgba(0, 240, 255, 0.1);
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
}
.btn-profile-follow:disabled { opacity: 0.6; cursor: default; }
.btn-profile-follow-active {
    background: rgba(0, 240, 255, 0.08);
    color: var(--gray);
    border-color: rgba(255, 255, 255, 0.15);
}
.btn-profile-follow-active:hover {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: none;
}

.verify-form-error {
    color: #ff4466;
    font-size: 0.85rem;
    margin: -0.3rem 0 0;
    min-height: 1em;
}
.verify-form-error:empty { display: none; }

.post-guild-badge {
    display: inline-block;
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.3);
    color: var(--primary);
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
    width: fit-content;
}

.post-time { color: var(--gray); font-size: 0.8rem; }

.btn-delete-post {
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.4;
    font-size: 1rem;
    padding: 0.25rem;
    transition: opacity 0.2s;
    margin-left: auto;
}
.btn-delete-post:hover { opacity: 1; }

.post-content {
    color: var(--light);
    font-size: 1rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 0.75rem;
}

/* Title / caption clamp — Facebook-style "See more". initTextClamps()
   (app.js) measures each block's real rendered height after insertion and
   only adds .clamped + the toggle to blocks that actually overflow 2
   lines, so short text never gets a dangling "See more" it doesn't need.
   max-height is the reliable cross-browser clamp; -webkit-line-clamp is
   layered on top as a progressive enhancement where it's supported (it
   trims mid-word more cleanly), but max-height alone is what guarantees
   this works on WebViews that ignore -webkit-line-clamp. calc() derives
   the height from this rule's own line-height so it stays in sync with
   initTextClamps()'s own measurement (which reads the same computed
   line-height) without hardcoding a pixel number in two places. */
.post-content.clamped,
.video-title.clamped {
    line-height: 1.5;
    max-height: calc(1.5em * 2);
    overflow: hidden;
    margin-bottom: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.post-content-more {
    color: var(--gray);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    display: inline-block;
}
.post-content-more:hover { color: var(--primary); text-decoration: underline; }

.post-image-wrap { margin: 0.75rem 0; border-radius: 12px; overflow: hidden; }
.post-image { width: 100%; max-height: 500px; object-fit: cover; display: block; }

.post-video-wrap { position: relative; margin: 0.75rem 0; border-radius: 12px; overflow: hidden; background: #000; }
.post-video { width: 100%; max-height: 640px; display: block; background: #000; }
.post-reel-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    border: 1px solid rgba(0, 240, 255, 0.4);
    pointer-events: none;
}

.post-stats-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-top: 1px solid rgba(0, 240, 255, 0.1);
    border-bottom: 1px solid rgba(0, 240, 255, 0.1);
    margin: 0.5rem 0;
    font-size: 0.85rem;
    color: var(--gray);
}

.post-reaction-summary {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.reaction-count { color: var(--gray); font-size: 0.85rem; }

.comment-count-link {
    cursor: pointer;
    color: var(--gray);
}
.comment-count-link:hover { color: var(--primary); text-decoration: underline; }

.post-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.btn-post-action {
    flex: 1;
    padding: 0.5rem;
    background: none;
    border: 1px solid rgba(0, 240, 255, 0.15);
    border-radius: 8px;
    color: var(--gray);
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}
.btn-post-action:hover { background: rgba(0, 240, 255, 0.1); color: var(--primary); border-color: var(--primary); }
.btn-reacted { background: rgba(0, 240, 255, 0.15); color: var(--primary); border-color: var(--primary); }

/* Love & Angry React Buttons */
.btn-react-love {
    color: #ff6b9d;
    border-color: rgba(255, 107, 157, 0.25);
    flex: 1;
}
.btn-react-love:hover { background: rgba(255, 107, 157, 0.15); color: #ff4488; border-color: #ff6b9d; }
.btn-react-love-active { background: rgba(255, 107, 157, 0.2); color: #ff3377 !important; border-color: #ff6b9d !important; box-shadow: 0 0 8px rgba(255,51,119,0.4); }

.btn-react-angry {
    color: #ff7043;
    border-color: rgba(255, 112, 67, 0.25);
    flex: 1;
}
.btn-react-angry:hover { background: rgba(255, 112, 67, 0.15); color: #ff5722; border-color: #ff7043; }
.btn-react-angry-active { background: rgba(255, 112, 67, 0.2); color: #ff3d00 !important; border-color: #ff7043 !important; box-shadow: 0 0 8px rgba(255,61,0,0.4); }

.btn-comment-action { color: var(--gray); }
.btn-comment-action:hover { color: var(--accent); border-color: var(--accent); background: rgba(0,255,136,0.08); }

.btn-dislike-action { color: var(--gray); }
.btn-dislike-action:hover { color: #ff7043; border-color: #ff7043; background: rgba(255,112,67,0.08); }
.btn-dislike-action.disliked { background: rgba(255,112,67,0.15); color: #ff5722; border-color: #ff7043; }

.btn-share-action { color: var(--gray); flex: 0 0 auto; }
.btn-share-action:hover { color: var(--secondary); border-color: var(--secondary); background: rgba(255,0,255,0.08); }

/* Like / Dislike / Comment / Share all on one line, small buttons —
   used by video posts (renderFeedVideoPost). Icon + count only (no text
   labels) so four buttons comfortably fit one row even on narrow phones;
   Like/Dislike/Comment flex evenly, Share stays a fixed small square
   since it has no count badge next to its icon. */
.post-actions-compact {
    flex-wrap: nowrap;
    gap: 0.35rem;
}
.post-actions-compact .btn-post-action {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.4rem 0.3rem;
    font-size: 0.85rem;
    gap: 0.25rem;
}
.post-actions-compact .btn-share-action {
    flex: 0 0 auto;
    width: 2.4rem;
    padding: 0.4rem 0;
}
.post-actions-compact .react-count {
    font-size: 0.72rem;
    min-width: 10px;
    padding: 1px 5px;
}

.react-count {
    font-size: 0.82rem;
    font-weight: 700;
    min-width: 14px;
    text-align: center;
    background: rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 0 5px;
    display: inline-block;
}
.react-count:empty { display: none; }

@keyframes reactPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.4); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}
.react-pop { animation: reactPop 0.35s ease; }

/* Preview Comments — hidden until the Comment button is clicked
   (openComments()/toggleInlineComments() in app.js toggle this). Starts
   hidden here so there's no flash of visible content before JS runs. */
.post-preview-comments { margin-top: 0.75rem; display: none; flex-direction: column; gap: 0.5rem; }
.post-preview-comments.expanded { display: flex; }
.view-all-comments { color: var(--primary); cursor: pointer; font-size: 0.85rem; font-weight: 600; padding: 0.25rem 0; }
.view-all-comments:hover { text-decoration: underline; }

/* Comment item */
.comment-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    flex-shrink: 0;
}
.comment-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.comment-avatar-letter { font-size: 0.75rem; font-weight: 900; color: #000; }

.comment-body {
    background: rgba(0, 240, 255, 0.05);
    border-radius: 12px;
    padding: 0.5rem 0.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.comment-author { font-weight: 700; color: var(--light); font-size: 0.85rem; margin-right: 0.5rem; }
.comment-author:hover { color: var(--primary); }
.comment-text { color: var(--light); font-size: 0.9rem; line-height: 1.4; word-break: break-word; }
.comment-time { color: var(--gray); font-size: 0.75rem; }

.btn-delete-comment {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray);
    font-size: 0.85rem;
    opacity: 0.5;
    padding: 0.25rem;
    transition: opacity 0.2s;
    align-self: center;
}
.btn-delete-comment:hover { opacity: 1; color: #ff4444; }

/* Reaction Picker */
.reaction-picker {
    position: fixed;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 0.5rem 0.75rem;
    display: none;
    gap: 0.3rem;
    z-index: 9999;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}
.reaction-btn {
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 50%;
    transition: transform 0.2s;
    line-height: 1;
}
.reaction-btn:hover { transform: scale(1.4); }

/* Comments Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(4px);
}

.comments-modal-content {
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
}
.modal-header h3 { color: var(--primary); font-family: 'Orbitron', sans-serif; font-size: 1rem; }
.modal-close {
    background: none;
    border: none;
    color: var(--gray);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: color 0.2s;
}
.modal-close:hover { color: var(--light); }

.comments-list-full {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
}

.comment-input-area {
    padding: 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.comment-field {
    flex: 1;
    background: rgba(0, 240, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 0.6rem 1rem;
    color: var(--light);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    transition: border-color 0.3s;
}
.comment-field:focus { outline: none; border-color: var(--primary); }
.btn-comment-send {
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border: none;
    border-radius: 20px;
    color: #000;
    font-weight: 800;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
}

/* ===== PROFILE PAGE STYLES ===== */
.profile-page { min-height: calc(100vh - 80px); }

.profile-banner {
    height: 240px;
    background: linear-gradient(135deg, var(--dark), #1a0533);
    position: relative;
}

.profile-body {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
}

.profile-header-section {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    margin-top: -60px;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.profile-avatar-wrap { position: relative; }

.profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid var(--darker);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    flex-shrink: 0;
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.4);
}
.profile-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-letter { font-size: 2.5rem; font-weight: 900; color: #000; font-family: 'Orbitron', sans-serif; }

.profile-info-wrap { flex: 1; padding-bottom: 0.5rem; min-width: 200px; }

.profile-nickname {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--light);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.banned-tag {
    font-size: 0.7rem;
    background: rgba(255, 68, 68, 0.2);
    border: 1px solid #ff4444;
    color: #ff4444;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    vertical-align: middle;
}

.profile-meta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.profile-meta-item { color: var(--gray); font-size: 0.9rem; }

.profile-guild-badge {
    display: inline-block;
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.4);
    color: var(--primary);
    font-size: 0.85rem;
    padding: 0.2rem 0.75rem;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s;
}
.profile-guild-badge:hover { background: rgba(0, 240, 255, 0.2); }
.profile-no-guild { color: var(--gray); font-size: 0.85rem; }

.profile-bio {
    color: var(--gray);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-top: 0.75rem;
    max-width: 500px;
}

.profile-stats-row {
    display: flex;
    gap: 2rem;
    margin-top: 0.75rem;
}
.profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.profile-stat strong { font-size: 1.3rem; color: var(--primary); font-family: 'Orbitron', sans-serif; }
.profile-stat span { font-size: 0.8rem; color: var(--gray); text-transform: uppercase; letter-spacing: 1px; }

.profile-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
}

.profile-edit-btn {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex: 0 0 auto;
}

.edit-profile-form {
    background: rgba(0, 240, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 0.75rem;
}

.bio-input {
    width: 100%;
    background: rgba(0, 240, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem;
    color: var(--light);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 80px;
}
.bio-input:focus { outline: none; border-color: var(--primary); }

.edit-profile-uploads {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.photo-upload-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    position: relative;
}

.photo-upload-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 240, 255, 0.05);
    border: 2px dashed var(--border);
    transition: border-color 0.2s;
    position: relative;
}
.photo-upload-tile:hover .photo-upload-preview { border-color: var(--primary); }

.photo-upload-preview-round {
    width: 90px;
    height: 90px;
    border-radius: 50%;
}

.photo-upload-preview-wide {
    width: 160px;
    height: 90px;
    border-radius: 10px;
}

.photo-upload-placeholder {
    font-size: 1.8rem;
    opacity: 0.5;
}

.photo-upload-overlay {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 1.3rem;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.photo-upload-tile:hover .photo-upload-overlay { opacity: 1; }

.photo-upload-tile-cover .photo-upload-overlay {
    width: 160px;
    height: 90px;
    border-radius: 10px;
}

.photo-upload-label {
    font-size: 0.8rem;
    color: var(--gray);
    text-align: center;
}

.profile-ban-banner {
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid rgba(255, 68, 68, 0.4);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    color: #ff4444;
    font-weight: 700;
}
.ban-reason-text { color: var(--gray); font-weight: 400; margin-top: 0.5rem; font-size: 0.9rem; }

.profile-guild-section { margin: 1rem 0; }

.profile-posts-section { margin-top: 1.5rem; }
.profile-posts-title {
    font-family: 'Orbitron', sans-serif;
    color: var(--primary);
    font-size: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

/* Hero Section tweaks */
.glitch {
    font-family: 'Orbitron', sans-serif;
    font-size: 5rem;
    font-weight: 900;
    color: var(--primary);
    text-shadow: 0 0 40px var(--primary);
    display: block;
    position: relative;
}

.subtitle {
    display: block;
    font-size: 1.5rem;
    color: var(--secondary);
    letter-spacing: 0.5rem;
    text-shadow: 0 0 20px var(--secondary);
}

@media (max-width: 768px) {
    .feed-layout { grid-template-columns: 1fr; }
    .feed-sidebar { position: static; }
    .profile-header-section { flex-direction: column; align-items: flex-start; margin-top: -40px; }
    .profile-avatar { width: 80px; height: 80px; }
    .profile-nickname { font-size: 1.3rem; }
    .post-card {
        padding: 0.9rem;
        /* backdrop-filter is one of the most expensive properties for
           mobile scroll performance — every .post-card in/near the
           viewport must have its blur recomputed as it moves, competing
           with video decode for the same per-frame budget (see the
           .custom-player comment for the matching rounded-corner-clip
           issue). --card-bg is already ~80-85% opaque, so dropping the
           blur here is barely visible but removes a real chunk of
           per-frame compositing cost specifically on the smaller/weaker
           devices this breakpoint targets. */
        backdrop-filter: none;
    }
    /* Keep Love/Angry/Comment/Share on a single row on mobile too —
       flex-wrap: wrap here used to push them onto two lines. */
    .post-actions { flex-wrap: nowrap; gap: 0.3rem; }
    .btn-post-action { flex: 1 1 0; min-width: 0; padding: 0.4rem 0.25rem; font-size: 0.72rem; gap: 0.2rem; }
    .post-actions .react-count { font-size: 0.7rem; min-width: 10px; padding: 1px 4px; }
    .post-actions.post-actions-compact {
        flex-wrap: nowrap;
        gap: 0.3rem;
    }
    .post-actions-compact .btn-post-action {
        flex: 1 1 0;
        padding: 0.35rem 0.2rem;
        font-size: 0.78rem;
    }
    .post-actions-compact .btn-share-action {
        flex: 0 0 auto;
        width: 2.1rem;
    }
    .glitch { font-size: 3rem; }
    .profile-header-actions {
        margin-left: 0;
        width: 100%;
        margin-top: 0.75rem;
    }
    .profile-edit-btn {
        flex: 1 1 140px;
        text-align: center;
    }
}

/* Investigation styles */
.investigation-member {
    border-left: 3px solid orange !important;
    background: rgba(255, 165, 0, 0.05) !important;
}

.investigation-badge {
    display: inline-block;
    background: rgba(255, 165, 0, 0.15);
    color: orange;
    border: 1px solid orange;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 4px;
}

/* Profile under-investigation banner */
.profile-investigation-banner {
    background: linear-gradient(135deg, rgba(255,165,0,0.15), rgba(255,165,0,0.05));
    border: 1px solid orange;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1rem 1.5rem;
    color: orange;
    font-weight: 600;
}


/* ============================================================
   COMMUNITY & ACCOUNT TYPE STYLES
   ============================================================ */

/* Registration Steps */
.reg-step { animation: fadeIn 0.3s ease; }
/* active-step removed — steps controlled purely by JS display:none/block */

/* Account Type Cards */
.account-type-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    margin-top: 0.5rem;
}
@media (max-width: 500px) { .account-type-cards { grid-template-columns: 1fr; } }

.account-type-card {
    background: var(--card-bg, #16213e);
    border: 2px solid rgba(108,99,255,0.25);
    border-radius: 16px;
    padding: 1.8rem 1.2rem;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}
.account-type-card:hover {
    border-color: var(--primary, #6c63ff);
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(108,99,255,0.25);
}
.account-type-card.selected {
    border-color: var(--primary, #6c63ff);
    background: rgba(108,99,255,0.12);
    box-shadow: 0 0 0 3px rgba(108,99,255,0.3);
}
.account-type-icon { font-size: 2.8rem; margin-bottom: 0.6rem; }
.account-type-title { font-size: 1.2rem; font-weight: 700; color: #fff; margin-bottom: 0.4rem; font-family: 'Orbitron', sans-serif; }
.account-type-desc { font-size: 0.82rem; color: #aaa; line-height: 1.4; margin-bottom: 0.8rem; }
.account-type-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.7rem;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.player-badge { background: rgba(108,99,255,0.25); color: #a29bfe; border: 1px solid rgba(108,99,255,0.4); }
.viewer-badge { background: rgba(255,200,50,0.15); color: #ffd32a; border: 1px solid rgba(255,200,50,0.3); }
.host-badge { background: rgba(0,212,255,0.15); color: #00d4ff; border: 1px solid rgba(0,212,255,0.35); }

/* Community Picker Grid (registration) */
.community-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.9rem;
}
.community-pick-card {
    background: var(--card-bg, #16213e);
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 1rem 0.5rem;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}
.community-pick-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.3); }
.community-pick-card.selected {
    border-color: var(--comm-color, #6c63ff);
    background: rgba(108,99,255,0.12);
    box-shadow: 0 0 0 3px rgba(108,99,255,0.2), 0 0 16px var(--comm-color, #6c63ff44);
}
.community-pick-icon { font-size: 2rem; margin-bottom: 0.4rem; }
.community-pick-name { font-size: 0.78rem; font-weight: 700; color: #fff; }
.community-pick-check {
    position: absolute;
    top: 6px; right: 8px;
    font-size: 1rem;
    display: none;
}
.community-pick-card.selected .community-pick-check { display: block; }
.community-pick-card { position: relative; }

/* Registration summary bar */
.reg-summary-bar {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(108,99,255,0.1);
    border: 1px solid rgba(108,99,255,0.25);
    border-radius: 10px;
    padding: 0.7rem 1.1rem;
    font-size: 0.85rem;
    color: #ccc;
}
.reg-summary-bar .sb-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(108,99,255,0.2);
    border-radius: 20px;
    padding: 0.2rem 0.7rem;
    font-weight: 700;
    font-size: 0.78rem;
    color: #a29bfe;
}
.reg-summary-bar .sb-comm {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 700;
    color: #fff;
}

/* Step progress indicator */
.step-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.step-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    transition: all 0.25s;
}
.step-dot.active { background: var(--primary, #6c63ff); box-shadow: 0 0 8px var(--primary, #6c63ff); }
.step-dot.done { background: #00b894; }

/* ---- Community Browser ---- */
.communities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.4rem;
    margin-top: 1rem;
}
.community-card {
    background: var(--card-bg, #16213e);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}
.community-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
.community-card-banner {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    position: relative;
}
.community-card-body { padding: 1rem 1.2rem 1.2rem; }
.community-card-name {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 0.3rem;
}
.community-card-desc { font-size: 0.8rem; color: #aaa; margin-bottom: 0.8rem; line-height: 1.4; }
.community-card-stats {
    display: flex;
    gap: 0.8rem;
    font-size: 0.78rem;
}
.comm-stat { display: flex; align-items: center; gap: 0.25rem; color: #aaa; }
.comm-stat span { color: #fff; font-weight: 700; }
.community-card-join-btn {
    position: absolute;
    top: 10px; right: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(0,0,0,0.4);
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}
.community-card-join-btn.joined {
    background: rgba(0,184,148,0.2);
    border-color: #00b894;
    color: #00b894;
}

/* Community Detail Page */
.community-detail-banner {
    border-radius: 16px;
    padding: 2.5rem 2rem 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    overflow: hidden;
}
.community-detail-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    border-radius: 16px;
}
.community-detail-icon { font-size: 4rem; position: relative; z-index: 1; }
.community-detail-info { position: relative; z-index: 1; }
.community-detail-info h1 { font-size: 2rem; font-weight: 900; color: #fff; font-family: 'Orbitron', sans-serif; margin: 0 0 0.3rem; }
.community-detail-info p { color: rgba(255,255,255,0.75); margin: 0 0 0.7rem; }
.community-detail-stats { display: flex; gap: 1.5rem; }
.cd-stat { text-align: center; }
.cd-stat-num { font-size: 1.4rem; font-weight: 800; color: #fff; font-family: 'Orbitron', sans-serif; }
.cd-stat-label { font-size: 0.7rem; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.5px; }

/* Community Members list */
.community-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.9rem;
    margin-top: 1rem;
}
.community-member-card {
    background: var(--card-bg, #16213e);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}
.community-member-card:hover { border-color: rgba(108,99,255,0.4); background: rgba(108,99,255,0.07); }
.cm-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--primary, #6c63ff);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.1rem; color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}
.cm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cm-info { min-width: 0; }
.cm-name { font-weight: 700; color: #fff; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-sub { font-size: 0.72rem; color: #888; }
.cm-type-badge {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: inline-block;
    margin-top: 0.2rem;
}
.badge-player { background: rgba(108,99,255,0.2); color: #a29bfe; }
.badge-viewer { background: rgba(255,200,50,0.15); color: #ffd32a; }

/* Profile Community Badge */
.profile-community-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,0.15);
    margin-top: 0.4rem;
    cursor: pointer;
    transition: all 0.2s;
}
.profile-community-tag:hover { opacity: 0.8; }
.profile-account-type-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 0.5rem;
}
.tag-player { background: rgba(108,99,255,0.2); color: #a29bfe; border: 1px solid rgba(108,99,255,0.35); }
.tag-viewer { background: rgba(255,200,50,0.15); color: #ffd32a; border: 1px solid rgba(255,200,50,0.3); }

/* ===== REELS ===== */
.reels-layout {
    display: flex;
    justify-content: center;
    position: relative;
    min-height: calc(100vh - 70px);
    padding: 1rem 0;
}
.reels-viewer {
    width: 100%;
    max-width: 420px;
    height: calc(100vh - 100px);
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    border-radius: 12px;
    background: #000;
}
.reels-viewer::-webkit-scrollbar { display: none; }

/* Floating community filter pill over the reels viewer (top-center) — the
   reels page is a full-bleed vertical scroller, so this overlays instead of
   pushing content down like the feed/tournaments filter bars do. */
.reels-filter-overlay {
    position: absolute;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    pointer-events: none; /* only the select itself is interactive */
}
.reels-filter-overlay select {
    pointer-events: auto;
    background: rgba(20, 20, 30, 0.75);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    font-size: 0.85rem;
    cursor: pointer;
    max-width: 200px;
}
.reels-filter-overlay select:hover {
    border-color: var(--primary);
}

.reel-item {
    position: relative;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}
.reel-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}
.reel-processing-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.5) blur(2px);
}
.reel-processing-overlay {
    position: relative;
    z-index: 1;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(0,0,0,0.55);
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
}
.reel-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.35) 100%);
}
.reel-info {
    padding: 1rem 4.2rem 1.25rem 1rem;
    pointer-events: auto;
}
.reel-author {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin-bottom: 0.4rem;
}
.reel-author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    overflow: hidden;
    flex-shrink: 0;
}
.reel-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.reel-author-name { color: #fff; font-weight: 700; font-size: 0.95rem; }

/* Follow button inside a reel's author row — sits on top of video, so it
   gets a translucent dark fill for legibility over any frame. */
.reel-author .btn-inline-follow {
    flex: 0 0 auto;
    margin-left: 0.15rem;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
}
.reel-author .btn-inline-follow-active {
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.3);
}

.reel-caption { color: #eee; font-size: 0.88rem; line-height: 1.35; max-width: 85%; }

.reel-actions {
    position: absolute;
    right: 0.6rem;
    bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    pointer-events: auto;
}
.reel-action-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}
.reel-action-count { font-size: 0.72rem; font-weight: 700; }
.reel-action-btn.liked { color: #ff3b5c; }
.reel-delete-btn {
    position: absolute;
    top: 0.75rem;
    right: 3.5rem;
    background: rgba(0,0,0,0.5);
    border: none;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    z-index: 2;
}

.reel-mute-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(0,0,0,0.5);
    border: none;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Center play glyph shown only while a reel is manually paused (tap-to-pause) */
.reel-pause-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    font-size: 3rem;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.reel-item.paused .reel-pause-indicator {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1);
}

.reels-empty, .reels-error {
    color: var(--gray);
    text-align: center;
    padding: 3rem 1rem;
}

/* Invisible trigger the sentinel IntersectionObserver watches; height gives
   it something to intersect against without adding a visible gap in the
   snap feed (scroll-snap-align: none excludes it from the one-video-per-
   screen stops). */
.reels-sentinel {
    scroll-snap-align: none;
    height: 1px;
    width: 100%;
    position: relative;
}
.reels-sentinel.loading::after {
    content: '';
    position: absolute;
    top: 1rem;
    left: 50%;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    border: 3px solid rgba(255,255,255,0.25);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: reelsSpin 0.7s linear infinite;
}
@keyframes reelsSpin {
    to { transform: rotate(360deg); }
}

@media (max-width: 480px) {
    .reels-viewer { max-width: 100%; height: calc(100vh - 130px); border-radius: 0; }
}

/* ===== TOURNAMENTS ===== */
.tournaments-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}
.tournaments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.tournament-tabs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-bottom: 1.25rem;
    -webkit-overflow-scrolling: touch;
}
.tournament-tab {
    flex: 0 0 auto;
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--gray);
    padding: 0.55rem 1.1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.tournament-tab:hover {
    border-color: var(--primary);
    color: var(--text);
}
.tournament-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
/* Shared community-filter control — used on Tournaments, Feed, and Reels
   pages so the "filter by community" UI looks/behaves the same everywhere. */
.community-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.community-filter-bar label {
    font-size: 0.85rem;
    color: var(--gray);
    font-weight: 600;
    white-space: nowrap;
}
.community-filter-bar select {
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    max-width: 220px;
}
.community-filter-bar select:hover {
    border-color: var(--primary);
}
.tournaments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
.tournament-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--tourn-color, var(--primary));
    border-radius: 12px;
    padding: 1.1rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tournament-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--shadow-color);
}
.tournament-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}
.tournament-card-icon {
    font-size: 1.6rem;
}
.tournament-card-title {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}
.tournament-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    font-size: 0.8rem;
    color: var(--gray);
    margin-top: 0.35rem;
}
.tourn-status-pill {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.pill-open { background: rgba(0,184,148,0.18); color: #00b894; border: 1px solid rgba(0,184,148,0.35); }
.pill-upcoming { background: rgba(255,200,50,0.15); color: #ffd32a; border: 1px solid rgba(255,200,50,0.3); }
.pill-running { background: rgba(255,68,68,0.18); color: #ff6b6b; border: 1px solid rgba(255,68,68,0.35); }
.pill-cancelled { background: rgba(150,150,150,0.15); color: #999; border: 1px solid rgba(150,150,150,0.3); }
.pill-completed { background: rgba(108,99,255,0.18); color: #a29bfe; border: 1px solid rgba(108,99,255,0.35); }

/* ===== Host Dashboard ===== */
.host-dash-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--tourn-color, var(--primary));
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
}
.host-dash-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem;
    cursor: pointer;
    gap: 1rem;
}
.host-dash-card-header:hover { background: rgba(255,255,255,0.02); }
.host-dash-card-title {
    font-weight: 700;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.host-dash-card-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    color: var(--gray);
    font-size: 0.85rem;
    margin-top: 0.4rem;
}
.host-dash-expand-icon {
    color: var(--gray);
    flex-shrink: 0;
}
.host-dash-roster {
    border-top: 1px solid var(--border);
    padding: 0.5rem 1.1rem 1.1rem;
}
.host-dash-registrant {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}
.host-dash-registrant:last-child { border-bottom: none; }
.host-dash-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.host-dash-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
}
.host-dash-registrant-info { flex: 1; min-width: 0; }
.host-dash-team-name { margin-top: 0.3rem; font-size: 0.9rem; }
.host-dash-team-members {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.4rem;
}
.host-dash-team-members span {
    background: rgba(108,99,255,0.12);
    border: 1px solid rgba(108,99,255,0.25);
    border-radius: 20px;
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
    color: var(--text);
}

/* ===== Tournament group stage (host manager + player status) ===== */
.host-group-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    margin: 0.75rem 0;
    padding: 0 0.85rem 0.35rem;
    background: rgba(255,255,255,0.015);
}
.host-group-card.group-finished { opacity: 0.85; border-style: dashed; }
.host-group-card.waiting-card { border-color: rgba(255,200,50,0.4); }
.host-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border);
}
.host-group-count { color: var(--gray); font-size: 0.82rem; margin-left: 0.4rem; }
.host-round-title {
    margin: 1.1rem 0 0.2rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.8rem;
}
.host-group-setup {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.8rem 0.9rem;
    margin: 0.5rem 0 0.75rem;
    border: 1px dashed var(--border);
    border-radius: 10px;
}
.host-group-setup-hint { color: var(--gray); font-size: 0.82rem; }
.host-group-setup-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.host-group-setup-row input[type="number"] {
    width: 110px;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text, inherit);
}
.host-mini-btn {
    font-size: 0.78rem;
    padding: 0.3rem 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(108,99,255,0.15);
    color: inherit;
    cursor: pointer;
}
.host-mini-btn.btn-primary { background: var(--primary); color: #fff; border-color: transparent; }
.host-mini-btn.btn-danger-soft { background: rgba(255,68,68,0.12); border-color: rgba(255,68,68,0.35); }
.host-mini-btn:hover { filter: brightness(1.15); }
.host-move-select {
    font-size: 0.78rem;
    padding: 0.3rem 0.4rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: inherit;
    max-width: 150px;
}
.host-move-select option { color: #000; }
.host-squad-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; align-items: center; }
.host-adv-check { width: 18px; height: 18px; margin-top: 0.7rem; flex-shrink: 0; cursor: pointer; }
.squad-inactive .host-dash-avatar, .squad-inactive strong { opacity: 0.55; }
.squad-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.12rem 0.5rem;
    border-radius: 20px;
    margin-left: 0.3rem;
    border: 1px solid var(--border);
    white-space: nowrap;
}
.badge-playing { background: rgba(0,184,148,0.15); color: #00b894; border-color: rgba(0,184,148,0.35); }
.badge-waiting { background: rgba(255,200,50,0.15); color: #ffd32a; border-color: rgba(255,200,50,0.3); }
.badge-advanced { background: rgba(108,99,255,0.18); color: #a29bfe; border-color: rgba(108,99,255,0.35); }
.badge-out { background: rgba(255,68,68,0.15); color: #ff6b6b; border-color: rgba(255,68,68,0.35); }
.badge-finished { background: rgba(150,150,150,0.15); color: #aaa; }

.my-status-card {
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-size: 0.9rem;
}
.my-status-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 0.2rem; }
.my-status-card.status-good { background: rgba(0,184,148,0.1); border-color: rgba(0,184,148,0.35); }
.my-status-card.status-out { background: rgba(255,68,68,0.1); border-color: rgba(255,68,68,0.35); }
.my-status-note { margin-top: 0.3rem; color: var(--gray); font-size: 0.85rem; }
.tourn-groups-section { margin-top: 1rem; }
.tourn-group-view {
    margin-top: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.45rem 0.75rem;
}
.tourn-group-view summary { cursor: pointer; font-weight: 600; }
.tourn-group-view ul { list-style: none; margin: 0.4rem 0 0.2rem; padding: 0; font-size: 0.88rem; }
.tourn-group-view li { padding: 0.2rem 0; }
.tourn-group-view li.is-me { font-weight: 700; color: var(--primary); }
.tourn-group-view li.squad-inactive { opacity: 0.55; text-decoration: line-through; }

/* ----- host messages ----- */
.host-msg-panel { border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.85rem 0.7rem; margin: 0.75rem 0; }
.host-msg-panel summary { cursor: pointer; font-weight: 600; padding: 0.45rem 0; }
.host-group-header-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.host-msg-batch { border-top: 1px solid var(--border); padding: 0.5rem 0; }
.host-msg-batch-head { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.host-msg-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.2rem 0; }
.host-msg-name { font-weight: 600; min-width: 90px; }
.host-msg-chip { display: inline-block; font-size: 0.78rem; padding: 0.15rem 0.5rem; border-radius: 10px; margin-top: 0.2rem; background: rgba(255,255,255,0.06); }
.host-msg-chip.msg-ok { background: rgba(0,184,148,0.15); }
.host-msg-chip.msg-wait { background: rgba(108,99,255,0.16); }
.host-msg-chip.msg-warn { background: rgba(255,170,0,0.16); }
.host-msg-chip.msg-bad { background: rgba(255,68,68,0.16); }
.host-msg-modal { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.host-msg-dialog { background: var(--card-bg, #14141f); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; }
.host-msg-dialog h3 { margin: 0 0 0.5rem; }
.host-msg-dialog textarea { width: 100%; box-sizing: border-box; padding: 0.6rem; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text, inherit); resize: vertical; margin: 0.4rem 0; }
.host-msg-wait { display: block; font-size: 0.85rem; margin: 0.4rem 0; }
.host-msg-wait select { padding: 0.2rem 0.3rem; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text, inherit); }
.host-msg-progress { font-size: 0.88rem; margin: 0.5rem 0; min-height: 1.2rem; }
.host-msg-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.6rem; }
.team-member-row { flex-wrap: wrap; }
.team-member-row input { min-width: 110px; }
.team-member-row button { order: 2; }
.team-member-row .team-member-username { order: 3; flex: 1 1 100%; }

/* ----- host dashboard tabs + registration panel ----- */
.host-dash-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.host-dash-tab { background: transparent; border: 1px solid var(--border); color: var(--gray); padding: 0.5rem 1rem; border-radius: 20px; cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.host-dash-tab.active { background: rgba(108,99,255,0.18); border-color: var(--primary); color: #fff; }
.host-dash-tab-count { display: inline-block; min-width: 1.4rem; padding: 0 0.4rem; margin-left: 0.25rem; border-radius: 10px; background: rgba(255,255,255,0.1); font-size: 0.78rem; text-align: center; }
.host-reg-panel { border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.85rem; margin: 0.75rem 0; }
.host-reg-panel.reg-open { border-color: rgba(0,184,148,0.45); background: rgba(0,184,148,0.06); }
.host-reg-panel.reg-closed { border-color: rgba(255,170,0,0.4); background: rgba(255,170,0,0.05); }
.host-reg-quick { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }
.host-reg-panel summary { cursor: pointer; font-weight: 600; padding: 0.45rem 0; }
.host-reg-grid { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.3rem; }
.host-reg-grid label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--gray); }
.host-reg-grid input { padding: 0.4rem 0.5rem; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text, inherit); }

/* ----- roadmap, points & standings ----- */
.rm-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.5rem 0; }
.rm-step { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.65rem; border-radius: 20px;
    border: 1px solid var(--border); font-size: 0.82rem; font-weight: 600; }
.rm-step small { color: var(--gray); font-weight: 400; }
.rm-step.rm-done { background: rgba(0,184,148,0.12); border-color: rgba(0,184,148,0.35); }
.rm-step.rm-current { background: rgba(255,68,68,0.12); border-color: rgba(255,68,68,0.4); }
.rm-step.rm-next { opacity: 0.8; }
.rm-arrow { color: var(--gray); }
.host-roadmap { border: 1px solid var(--border); border-radius: 10px; padding: 0 0.85rem 0.7rem; margin: 0.75rem 0; background: rgba(255,255,255,0.015); }
.host-roadmap summary, .host-points-panel summary, .host-finish-panel summary, .host-round-done summary { cursor: pointer; font-weight: 600; padding: 0.45rem 0; }
.rm-edit-row { display: flex; align-items: center; gap: 0.5rem; margin: 0.35rem 0; flex-wrap: wrap; }
.rm-edit-no { width: 1.4rem; text-align: center; color: var(--gray); font-weight: 700; }
.rm-edit-row input { padding: 0.35rem 0.5rem; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text, inherit); }
.rm-edit-row .rm-name { flex: 1; min-width: 130px; }
.rm-edit-row .rm-matches { width: 70px; }
.rm-unit { color: var(--gray); font-size: 0.82rem; }
.host-round-card { border: 1px solid rgba(255,68,68,0.3); border-radius: 12px; padding: 0.2rem 0.85rem 0.6rem; margin: 0.75rem 0; }
.host-round-head { padding: 0.7rem 0 0.2rem; }
.host-round-note { padding: 0.8rem; border: 1px dashed var(--border); border-radius: 10px; margin: 0.75rem 0; color: var(--gray); font-size: 0.88rem; }
.host-round-done { margin: 0.75rem 0; border: 1px solid var(--border); border-radius: 10px; padding: 0 0.85rem; }
.host-group-name-input { width: 160px; padding: 0.35rem 0.5rem; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text, inherit); }
.host-fill-label { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--gray); }
.host-points-panel, .host-finish-panel { border-bottom: 1px solid var(--border); }
.host-finish-panel { border: 1px solid var(--primary); border-radius: 10px; padding: 0 0.85rem 0.7rem; margin-top: 0.75rem; }
.host-points-body { padding: 0.2rem 0 0.7rem; display: flex; flex-direction: column; gap: 0.45rem; }
.host-points-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.host-points-name { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.host-pts-input { width: 90px; padding: 0.35rem 0.5rem; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text, inherit); }
.host-finish-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.4rem 0; }
.host-finish-tools input { width: 60px; padding: 0.3rem 0.4rem; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text, inherit); }
.host-finish-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.host-finish-row .host-adv-check { margin-top: 0; }
.host-finish-rank { width: 2.2rem; font-weight: 700; color: var(--primary); }
.host-finish-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.host-finish-pts { font-weight: 700; }
.host-finish-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.6rem; flex-wrap: wrap; }
.host-rank-col { width: 2.2rem; flex-shrink: 0; text-align: center; font-weight: 700; padding-top: 0.55rem; }
.squad-points { font-size: 0.9rem; margin-top: 0.15rem; }
.squad-points small { color: var(--gray); margin-left: 0.4rem; }
.tourn-standings-title { display: block; margin-top: 1rem; }
.tourn-round-view { margin-top: 0.6rem; border: 1px solid var(--border); border-radius: 10px; padding: 0.45rem 0.75rem; }
.tourn-round-view > summary { cursor: pointer; font-weight: 700; }
.tourn-standings-wrap { overflow-x: auto; margin: 0.4rem 0 0.2rem; }
.tourn-standings { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.tourn-standings th, .tourn-standings td { padding: 0.3rem 0.45rem; text-align: center; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tourn-standings th:nth-child(2), .tourn-standings td:nth-child(2) { text-align: left; }
.tourn-standings th { color: var(--gray); font-weight: 600; font-size: 0.75rem; }
.tourn-standings tr.is-me td { font-weight: 700; color: var(--primary); }
.tourn-st-group { color: var(--gray); margin-left: 0.3rem; }

.tournament-details-meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--text);
    background: rgba(108,99,255,0.06);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
}

/* ===== VIDEOS PAGE (long-form) =====
   Deliberately NOT the swipe-snap full-bleed layout Reels uses — long
   videos are browsed like a normal feed (scroll, read the title/caption,
   press play when interested), so this reuses the feed-card visual
   language (post-card-like chrome) instead of the vertical reel viewer. */
.videos-layout {
    max-width: 640px;
    margin: 0 auto;
    padding: 1rem;
}
.videos-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.video-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.video-card-processing {
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}
.video-processing-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.5) blur(2px);
}
.video-processing-overlay {
    position: relative;
    z-index: 1;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(0,0,0,0.55);
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
}
.video-player-wrap {
    position: relative;
    background: #000;
    /* Base rule: no side bleed here. This class is shared by two different
       parents — .post-card (Home feed, which HAS 1.25rem side padding to
       cancel) and .video-card (standalone Videos tab, which has NO side
       padding of its own — see .video-card-body below). Applying a fixed
       -1.25rem side margin here unconditionally pulled the player past
       .video-card's edges on the Videos tab (clipped by .video-card's
       overflow:hidden, since that card has nothing to cancel), which is
       what broke that tab's layout. The bleed is now applied only inside
       .post-card, right below, where it's actually correct. */
    margin: 0.5rem 0 0;
}
/* Bleed the video out to the card's full width (cancel .post-card's
   1.25rem side padding) so it reads as a bigger, edge-to-edge player
   instead of a small frame with visible margin on both sides — same idea
   as .post-image-wrap/.post-video-wrap, which only get vertical margin.
   Scoped to .post-card specifically (Home feed / feed-embedded videos) —
   NOT .video-card (standalone Videos tab), which has no padding to
   cancel; see the base .video-player-wrap rule above for why that
   matters. */
.post-card .video-player-wrap {
    margin: 0.5rem -1.25rem 0;
}
/* Tighten the space above/below the video specifically (not other post
   types): less margin under the header/caption before the player starts,
   and less padding in the action row right under it, so the player reads
   as bigger and more edge-to-edge instead of floating with visible gaps. */
.post-card:has(.video-player-wrap) .post-header {
    margin-bottom: 0.5rem;
}
.post-card:has(.video-player-wrap) .post-actions {
    padding: 0.35rem 0 0.15rem;
}
.video-player-wrap video {
    width: 100%;
    /* This is the actual fix for "huge empty gap / player looks tiny":
       the <video> tag has preload="none" (see renderVideoCard in app.js)
       and no width/height attributes, so before playback starts the
       browser gives it NO intrinsic size — it collapses to a sliver, and
       everything below (name, time, like row) bunches up right under
       that sliver while the rest of the card is blank space. A
       max-height alone (the old approach here) can only cap a size the
       box never actually reaches, so it did nothing. aspect-ratio forces
       the box to reserve real, consistent space immediately, before any
       video data loads or the poster image renders. 16:9 matches this
       app's video (non-reel) uploads. */
    aspect-ratio: 16 / 9;
    max-height: 640px;
    object-fit: contain;
    display: block;
    background: #000;
}
.video-card-body {
    /* Top padding trimmed (was 0.85rem): the header (avatar/name/time)
       sat with visible extra air above it compared to the Home feed's
       tighter .post-header. This pulls the whole header block — avatar,
       name, and the upload-time text under it — up closer to the player,
       matching Home's spacing. */
    padding: 0.5rem 1rem 1rem;
}
.video-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.video-author {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
}
.video-author-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    overflow: hidden;
    flex-shrink: 0;
}
.video-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.video-author-name { font-weight: 700; color: var(--text); font-size: 0.92rem; }
/* Was inline with video-author-name at the same baseline with no lift —
   next to the bigger player above, that read as loose/low. Home's
   .post-time sits right under the name (see .post-author-info's
   column layout + 0.05rem gap); .video-author/.video-card-header don't
   use that column layout, so pull the time up with a small negative
   margin instead to get the same tight, "right under the name" feel
   without restructuring the row. */
.video-time { color: var(--gray); font-size: 0.8rem; margin-top: -0.15rem; }
.video-delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.7;
}
.video-delete-btn:hover { opacity: 1; }
.video-title { font-weight: 700; margin-bottom: 0.3rem; color: var(--text); }
/* Was 0.5rem bottom margin — with the header above also tightened, this
   left a visibly bigger gap between the caption/frame and the
   like/dislike/comment row than anywhere else in the card. */
.video-caption { color: var(--text); font-size: 0.9rem; line-height: 1.4; margin-bottom: 0.3rem; }
.video-card-actions {
    display: flex;
    gap: 1.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}
.video-action-btn {
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.95rem;
}
.video-action-btn.liked { color: #ff3b5c; }
.video-action-btn.disliked { color: #ff7043; }
.video-action-count { font-size: 0.82rem; font-weight: 700; color: var(--gray); }

.videos-empty, .videos-error {
    color: var(--gray);
    text-align: center;
    padding: 3rem 1rem;
}

/* Long videos embedded in the main /api/feed (see server.py's
   _video_row_as_feed_item / app.js's renderFeedVideoPost) reuse
   .video-player-wrap inside a normal .post-card, so only the player
   itself needs feed-specific sizing here. */
.post-card .video-player-wrap { position: relative; margin: 0.75rem 0; border-radius: 12px; overflow: hidden; }
.post-card .video-player-wrap video,
.post-card .video-player-wrap .custom-player { max-height: 420px; }
.post-card .video-player-wrap .post-reel-badge {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    pointer-events: none;
}

@media (max-width: 480px) {
    .videos-layout { padding: 0.5rem; }
}

/* ===== BOTTOM NAVIGATION (mobile) ===== */
.bottom-nav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: var(--navbar-bg);
    backdrop-filter: blur(10px);
    border-top: 2px solid var(--border);
    box-shadow: 0 -4px 30px var(--shadow-color);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.55rem 0.25rem calc(0.5rem + env(safe-area-inset-bottom, 0));
    text-decoration: none;
    color: var(--gray);
    font-family: 'Rajdhani', sans-serif;
    transition: color 0.2s ease;
}

.bottom-nav-icon {
    font-size: 1.4rem;
    line-height: 1;
    filter: grayscale(60%);
    transition: filter 0.2s ease, transform 0.2s ease;
}

.bottom-nav-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.bottom-nav-link.active {
    color: var(--primary);
}

.bottom-nav-link.active .bottom-nav-icon {
    filter: grayscale(0%);
    transform: translateY(-1px);
    text-shadow: var(--glow);
}

@media (max-width: 768px) {
    .bottom-nav {
        display: flex;
    }

    /* Leave room above the bottom nav so content isn't hidden behind it */
    .main-content {
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 0));
    }

    .reels-layout {
        min-height: calc(100vh - 70px - 58px - env(safe-area-inset-bottom, 0));
    }

    .reels-viewer {
        height: calc(100vh - 100px - 58px - env(safe-area-inset-bottom, 0));
    }
}

@media (max-width: 480px) {
    .reels-viewer {
        height: calc(100vh - 130px - 58px - env(safe-area-inset-bottom, 0));
    }
}

/* ============================================================
   MESSAGES + NOTIFICATIONS
   ============================================================ */

/* --- Navbar icon buttons (messages / bell) --- */
.icon-btn-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--input-bg);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    font-size: 1.1rem;
    position: relative;
}

.icon-btn:hover {
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.25);
    transform: translateY(-1px);
}

.icon-btn:active {
    transform: translateY(0) scale(0.94);
}

.icon-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: linear-gradient(135deg, #ff4444, #ff0066);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(255, 0, 80, 0.6);
    animation: badgePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    line-height: 1;
}

@keyframes badgePop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* --- Notification dropdown panel --- */
.notif-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: -8px;
    width: 340px;
    max-height: 440px;
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px var(--shadow-color), var(--glow);
    z-index: 1500;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: notifPanelIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top right;
}

@keyframes notifPanelIn {
    from { opacity: 0; transform: scale(0.95) translateY(-6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.notif-panel-header h4 {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    color: var(--primary);
    letter-spacing: 0.02em;
}

.notif-mark-all {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    transition: color 0.2s;
}

.notif-mark-all:hover { color: var(--primary); }

.notif-panel-list {
    overflow-y: auto;
    flex: 1;
}

.notif-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
    position: relative;
    border-bottom: 1px solid var(--grid-line);
}

.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--hover-bg); }
.notif-item.unread { background: rgba(0, 240, 255, 0.05); }

.notif-item-avatar { width: 38px; height: 38px; flex-shrink: 0; }

.notif-item-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.notif-item-body span:first-child {
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.35;
}

.notif-item-time {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* --- Notification categories (tabs), device-alerts banner, important accent --- */
.notif-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: none;
}
.notif-tabs::-webkit-scrollbar { display: none; }

.notif-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    background: none;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.3rem 0.65rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.notif-tab:hover { color: var(--text-primary); background: var(--hover-bg); }
.notif-tab.active {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(0, 240, 255, 0.08);
}

.notif-tab-count {
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #e53935;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
}

.notif-push-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 240, 255, 0.06);
    font-size: 0.78rem;
    color: var(--text-primary);
    flex-shrink: 0;
}
.notif-push-banner.on { background: transparent; color: var(--text-secondary); }

.notif-push-btn {
    flex-shrink: 0;
    background: var(--primary);
    color: #000;
    border: none;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
}
.notif-push-banner.on .notif-push-btn {
    background: none;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.notif-push-actions { display: inline-flex; gap: 0.35rem; flex-shrink: 0; }
.notif-push-btn.secondary {
    background: none;
    color: var(--primary);
    border: 1px solid var(--primary);
}

/* One-time "turn on notifications" prompt (sits above the mobile bottom nav) */
.push-prompt {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    width: min(420px, calc(100vw - 1.5rem));
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--primary);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    color: var(--text-primary);
    font-size: 0.85rem;
}
.push-prompt-text { display: flex; flex-direction: column; gap: 0.2rem; }
.push-prompt-text span { color: var(--text-secondary); font-size: 0.8rem; }
.push-prompt-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.push-prompt-actions button {
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    border: 1px solid var(--border);
    background: none;
    color: var(--text-secondary);
}
.push-prompt-actions .push-prompt-yes { background: var(--primary); color: #000; border-color: var(--primary); }

/* Unread important items get a coloured edge so they stand out in "All". */
.notif-item.notif-cat-important.unread { box-shadow: inset 3px 0 0 var(--primary); }

/* --- Shared small-avatar styles (used by both conv list and notif panel) --- */
.conv-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.conv-avatar-letter {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #05060f;
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;
}

.conv-unread-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 6px var(--primary);
    flex-shrink: 0;
}

/* ============================================================
   MESSAGES PAGE — two-pane chat shell
   ============================================================ */

.messages-shell {
    display: grid;
    grid-template-columns: 340px 1fr;
    height: calc(100vh - 130px);
    max-height: 780px;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px var(--shadow-color);
}

/* --- Conversation list pane --- */
.conv-list-pane {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    min-width: 0;
}

.conv-list-header {
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.conv-list {
    overflow-y: auto;
    flex: 1;
}

.conv-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    cursor: pointer;
    transition: background 0.15s ease;
    border-left: 3px solid transparent;
    position: relative;
}

.conv-list-item:hover { background: var(--hover-bg); }

.conv-list-item.active {
    background: rgba(0, 240, 255, 0.07);
    border-left-color: var(--primary);
}

.conv-list-item.unread .conv-list-item-name { color: var(--text-primary); font-weight: 700; }
.conv-list-item.unread .conv-list-item-preview { color: var(--text-primary); font-weight: 600; }

.conv-avatar {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
}

.conv-list-item-body {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.conv-list-item-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.conv-list-item-name {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conv-list-item-time {
    font-size: 0.72rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.conv-list-item-preview {
    font-size: 0.82rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Thread pane --- */
.conv-thread-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
}

.conv-thread-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--text-secondary);
}

.conv-thread-active {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.conv-thread-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.conv-back-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0 0.25rem;
    flex-shrink: 0;
}

.conv-thread-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.conv-thread-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.conv-thread-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    scroll-behavior: smooth;
}

.conv-msg-row {
    display: flex;
    flex-direction: column;
    max-width: 68%;
    animation: msgIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.conv-msg-row.mine {
    align-self: flex-end;
    align-items: flex-end;
}

.conv-msg-row.theirs {
    align-self: flex-start;
    align-items: flex-start;
}

.conv-msg-bubble {
    padding: 0.6rem 0.95rem;
    border-radius: 16px;
    font-size: 0.92rem;
    line-height: 1.4;
    word-break: break-word;
    white-space: pre-wrap;
}

.conv-msg-row.mine .conv-msg-bubble {
    background: linear-gradient(135deg, var(--primary), #0090a8);
    color: #05060f;
    border-bottom-right-radius: 4px;
}

.conv-msg-row.theirs .conv-msg-bubble {
    background: var(--input-bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

.conv-msg-time {
    font-size: 0.68rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
    padding: 0 0.3rem;
}

.conv-msg-row.sending .conv-msg-bubble { opacity: 0.6; }
.conv-msg-row.failed .conv-msg-bubble {
    border: 1px solid #ff4444;
    opacity: 0.75;
}
.conv-msg-row.failed .conv-msg-time { color: #ff4444; }

/* --- Read receipts (WhatsApp-style ✓ / ✓✓) --- */
.conv-msg-status {
    font-size: 0.78rem;
    letter-spacing: -2px;
    margin-left: 0.2rem;
    color: var(--text-secondary);
}
.conv-msg-status.read { color: var(--primary); letter-spacing: -2px; }

/* --- Typing indicator --- */
.conv-typing-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 1.25rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-style: italic;
    flex-shrink: 0;
}

.conv-typing-dots {
    display: inline-flex;
    gap: 3px;
}

.conv-typing-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
    animation: typingBounce 1.1s infinite ease-in-out;
}

.conv-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.conv-typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* --- Attachments --- */
.conv-attach-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.15rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.conv-attach-btn:hover { background: var(--hover-bg); color: var(--primary); }

.conv-attach-preview {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1.1rem;
    margin: 0 1.1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--input-bg);
    font-size: 0.82rem;
    color: var(--text-primary);
    flex-shrink: 0;
}

.conv-attach-preview-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conv-attach-preview-remove {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 0.2rem;
    flex-shrink: 0;
}
.conv-attach-preview-remove:hover { color: #ff4444; }

.conv-msg-attachment {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.15);
    cursor: pointer;
    max-width: 260px;
}

.conv-msg-attachment-icon { font-size: 1.4rem; flex-shrink: 0; }

.conv-msg-attachment-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.conv-msg-attachment-name {
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conv-msg-attachment-size {
    font-size: 0.7rem;
    opacity: 0.75;
}

.conv-msg-attachment-image {
    max-width: 240px;
    max-height: 240px;
    border-radius: 12px;
    display: block;
    cursor: pointer;
}

/* --- Composer --- */
.conv-thread-composer {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.conv-composer-input {
    flex: 1;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 0.65rem 1.1rem;
    color: var(--text-primary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.conv-composer-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.12);
}

.conv-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #05060f;
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.conv-send-btn:hover { box-shadow: var(--glow); transform: translateY(-1px); }
.conv-send-btn:active { transform: translateY(0) scale(0.92); }

/* ============================================================
   MOBILE — single-pane chat with slide transition
   ============================================================ */
@media (max-width: 768px) {
    .messages-shell {
        grid-template-columns: 1fr;
        height: calc(100vh - 70px - 58px - env(safe-area-inset-bottom, 0));
        max-height: none;
        border-radius: 0;
        border-left: none;
        border-right: none;
        position: relative;
        overflow: hidden;
    }

    .conv-list-pane,
    .conv-thread-pane {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .conv-list-pane { border-right: none; }

    .conv-thread-pane {
        position: absolute;
        inset: 0;
        transform: translateX(100%);
        background: var(--page-bg);
    }

    .messages-shell.thread-open .conv-thread-pane {
        transform: translateX(0);
    }

    .messages-shell.thread-open .conv-list-pane {
        transform: translateX(-8%);
        opacity: 0.4;
        pointer-events: none;
    }

    .conv-back-btn { display: block; }

    .notif-panel {
        position: fixed;
        top: 62px;
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
        max-height: 70vh;
    }
}

/* ===== PLAYER DASHBOARD ===== */
.pdash-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 0 2rem;
}
.pdash-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1rem 0.5rem;
}
.pdash-back {
    background: var(--input-bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.15s ease;
}
.pdash-back:hover { background: var(--hover-bg); transform: translateX(-2px); }
.pdash-back:active { transform: translateX(-2px) scale(0.94); }
.pdash-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}

.pdash-tabs {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.pdash-tabs::-webkit-scrollbar { display: none; }
.pdash-tab {
    flex-shrink: 0;
    background: var(--input-bg);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}
.pdash-tab:hover { background: var(--hover-bg); }
.pdash-tab:active { transform: scale(0.96); }
.pdash-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--darker);
}

.pdash-content {
    padding: 0.25rem 1rem 1rem;
    animation: pdashFadeIn 0.22s ease both;
}
@keyframes pdashFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.pdash-summary-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem;
    margin-bottom: 1.25rem;
}
.pdash-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
}
.pdash-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pdash-avatar-sm { width: 34px; height: 34px; }
.pdash-avatar-letter { color: #fff; font-weight: 700; font-size: 1.2rem; }
.pdash-avatar-sm .pdash-avatar-letter { font-size: 0.95rem; }
.pdash-summary-info { min-width: 0; }
.pdash-summary-name {
    font-weight: 700;
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pdash-summary-meta {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 0.15rem;
}

.pdash-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 1.4rem 0 0.6rem;
}
.pdash-section-head h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}
.pdash-section-head a {
    font-size: 0.85rem;
    color: var(--primary);
    text-decoration: none;
}
.pdash-section-head a:hover { text-decoration: underline; }

.pdash-nextstep {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.15s ease, border-color 0.18s ease;
}
.pdash-nextstep:hover { background: var(--hover-bg); border-color: var(--primary); }
.pdash-nextstep:active { transform: scale(0.985); }
.pdash-nextstep-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--input-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.pdash-nextstep-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.pdash-nextstep-text strong { font-size: 0.92rem; }
.pdash-nextstep-text span { font-size: 0.82rem; color: var(--text-secondary); }
.pdash-nextstep-arrow { color: var(--gray); font-size: 1.3rem; flex-shrink: 0; }

.pdash-insight-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
}
.pdash-insight-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    transition: border-color 0.18s ease, transform 0.15s ease;
}
.pdash-insight-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.pdash-insight-label {
    color: var(--text-secondary);
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
}
.pdash-insight-value {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.3px;
}
.pdash-insight-sub {
    margin-top: 0.5rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}
.pdash-insight-change { font-weight: 700; }
.pdash-insight-change.up { color: var(--accent); }
.pdash-insight-change.down { color: #ff5c5c; }
.pdash-insight-change.new { color: var(--primary); }
.pdash-insight-period { color: var(--gray); }

.pdash-lifetime-card {
    margin-top: 1.1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.9rem 1rem;
}
.pdash-lifetime-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.pdash-lifetime-row:not(:last-child) { border-bottom: 1px solid var(--border); }
.pdash-lifetime-row strong { color: var(--text-primary); font-size: 1rem; }

.pdash-library-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.pdash-library-item {
    display: flex;
    gap: 0.8rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.65rem;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.15s ease, border-color 0.18s ease;
}
.pdash-library-item:hover { background: var(--hover-bg); border-color: var(--primary); }
.pdash-library-item:active { transform: scale(0.985); }
.pdash-thumb {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--input-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pdash-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdash-thumb-sm { width: 48px; height: 48px; border-radius: 8px; }
.pdash-thumb-fallback { font-size: 1.4rem; opacity: 0.6; }
.pdash-library-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; justify-content: center; }
.pdash-library-title {
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pdash-library-stats {
    font-size: 0.78rem;
    color: var(--text-secondary);
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.pdash-library-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--gray);
}
.pdash-kind-tag {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.3px;
}
.pdash-kind-reel { background: rgba(255,0,255,0.12); color: var(--secondary); }
.pdash-kind-video { background: rgba(0,240,255,0.12); color: var(--primary); }

.pdash-engagement-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}
.pdash-engagement-row:last-child { border-bottom: none; }
.pdash-engagement-body { flex: 1; min-width: 0; }
.pdash-engagement-text {
    font-size: 0.88rem;
    line-height: 1.35;
    color: var(--text-primary);
}
.pdash-engagement-time {
    font-size: 0.75rem;
    color: var(--gray);
    margin-top: 0.2rem;
}

.pdash-empty {
    color: var(--text-secondary);
    text-align: center;
    padding: 2.5rem 1rem;
    font-size: 0.9rem;
}

@media (max-width: 480px) {
    .pdash-insight-grid { gap: 0.55rem; }
    .pdash-insight-value { font-size: 1.4rem; }
}

/* ===== Global floating upload widget (reel/video upload) =====
   Small circular indicator fixed in the bottom-right corner, app-wide —
   NOT inside the upload modal. The upload modal closes the instant the
   request is fired (see submitReel/submitVideo in app.js), so this is the
   only upload UI visible afterward, and it stays visible across
   navigation since the person is meant to keep using the app while an
   XMLHttpRequest upload (see uploadFileWithProgress) runs in the
   background. An SVG ring (stroke-dashoffset driven by --upload-pct)
   forms the % indicator; the percentage renders in the center and the
   transfer speed as a small label below the circle. Sits just above
   .toast (which occupies the same corner) so a toast firing near upload
   completion doesn't overlap it, and above .bottom-nav on mobile. */
.global-upload-widget {
    position: fixed;
    right: 1.25rem;
    bottom: 6.5rem;
    width: 56px;
    height: 56px;
    z-index: 2100;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.global-upload-ring {
    position: absolute;
    inset: 0;
    transform: rotate(-90deg); /* start the arc at 12 o'clock */
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

.global-upload-ring-track,
.global-upload-ring-fill {
    fill: var(--card-bg);
    fill-opacity: 0.92;
    stroke-width: 3;
    stroke-linecap: round;
}

.global-upload-ring-track {
    stroke: var(--border);
}

.global-upload-ring-fill {
    stroke: var(--primary);
    /* circumference for r=19 is 2*pi*19 ≈ 119.4 — kept as a fixed
       stroke-dasharray so app.js only ever has to set stroke-dashoffset
       (dashoffset = circumference * (1 - pct/100)) to animate the arc. */
    stroke-dasharray: 119.4;
    stroke-dashoffset: calc(119.4 - (119.4 * var(--upload-pct, 0)) / 100);
    transition: stroke-dashoffset 0.25s ease-out;
}

.global-upload-pct {
    position: relative;
    z-index: 1;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--light);
    letter-spacing: 0.01em;
    pointer-events: none;
}

.global-upload-speed {
    position: absolute;
    right: 0;
    bottom: -1.35rem;
    white-space: nowrap;
    font-size: 0.68rem;
    color: var(--text-secondary);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    pointer-events: none;
}

.global-upload-cancel {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ff4444;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 0.62rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.global-upload-widget.done .global-upload-ring-fill { stroke: var(--accent); }
.global-upload-widget.done .global-upload-cancel { display: none; }
.global-upload-widget.error .global-upload-ring-fill { stroke: #ff4444; }
.global-upload-widget.error .global-upload-cancel { display: none; }

@media (max-width: 768px) {
    /* Clear the bottom nav bar (see .bottom-nav) instead of sitting behind it. */
    .global-upload-widget {
        bottom: calc(70px + env(safe-area-inset-bottom, 0));
    }
}

/* ===== Custom video player (long-form Videos — replaces native <video
   controls>; see buildCustomVideoPlayerHtml in app.js) =====
   The <video> itself has NO controls attribute — everything below is our
   own overlay UI. HLS attach/ABR/resolution switching in app.js is
   completely unaffected by any of this; this file only draws buttons. */
.custom-player {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 0;
    overflow: hidden;
    /* border-radius + overflow:hidden directly on the element wrapping a
       playing <video> forces the browser to re-clip that rounded mask on
       every composited frame instead of letting the video decode straight
       to a GPU overlay layer — on mid/low-end mobile GPUs this is exactly
       what causes visible stutter/dropped-frames while the card is
       scrolling (the corner-clip recompute competes with decode for the
       same frame budget), even though the underlying playback/network is
       fine — which is also why the SAME video is smooth once fullscreen
       drops the radius (see the :fullscreen rule below, border-radius: 0).
       translateZ(0) alone (cheap, no ongoing cost) forces this element
       onto its own compositor layer so the rounded mask is a one-time
       layer property instead of a per-frame rasterize. will-change is
       intentionally NOT set here for every card — see .is-playing below,
       which adds it only for whichever single card is actually decoding
       right now. Holding will-change on every card in a long scrolling
       list permanently reserves a GPU layer for each one, trading the
       original jank for a memory/layer-budget problem instead. */
    transform: translateZ(0);
}
/* Only the one card actually playing needs the extra compositor hint —
   see the comment above. playFeedVideo()/pauseFeedVideo() in app.js
   toggle this exact class (via video.paused / play/pause listeners on
   .is-playing) as the current card changes. */
.custom-player.is-playing {
    will-change: transform;
}

.custom-player video {
    display: block;
    width: 100%;
    max-height: 640px;
    background: #000;
}

/* While fullscreen (paired with the screen.orientation.lock('landscape')
   call in toggleCustomFullscreen's fullscreenchange listener), let the
   video actually fill the now-landscape screen instead of staying capped
   at max-height: 640px — that cap is sized for an inline card in the feed,
   not a fullscreen video, and left in place it would keep the video small
   and letterboxed even after rotation. object-fit: contain preserves the
   video's own aspect ratio (no stretching/cropping) while filling as much
   of the screen as that ratio allows, same as native video players. The
   border radius is also dropped since a rounded-corner card look doesn't
   belong in fullscreen. :fullscreen covers standard browsers;
   :-webkit-full-screen is needed for older WebKit (older iOS Safari). */
.custom-player:fullscreen,
.custom-player:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-player:fullscreen video,
.custom-player:-webkit-full-screen video {
    width: 100%;
    height: 100%;
    max-height: none;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    background: #000;
}

/* Big center play/pause button. Visibility rules are just below the
   .custom-player-center-btn svg line — kept next to the class they
   govern rather than restated here. */
.custom-player-center-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: rgba(10, 14, 30, 0.75);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
    transition: opacity 0.15s ease;
}
.custom-player-center-btn svg { width: 1.6rem; height: 1.6rem; }
/* Button visibility is governed by .controls-visible alone (added by
   showCenterBtnThenAutoHide in app.js on every tap, removed 3s later),
   the same way whether the video is playing or paused — the user wants
   this to fade out after 3s of inactivity either way, not just while
   playing, so there's no separate always-on rule for the paused state.
   The one exception is .just-loaded (set in the initial markup, removed
   the first time the player is interacted with): a freshly-rendered,
   never-played card has nothing to fade from a tap yet, so its play
   button stays visible until the first tap, same as before this change.
   pointer-events is toggled off while hidden so a tap in the button's
   invisible footprint reaches the video underneath instead of being
   swallowed by an invisible element. */
.custom-player-center-btn {
    opacity: 0;
    pointer-events: none;
}
.custom-player.controls-visible .custom-player-center-btn,
.custom-player.just-loaded .custom-player-center-btn {
    opacity: 1;
    pointer-events: auto;
}

.custom-player-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.2rem;
    height: 2.2rem;
    margin: -1.1rem 0 0 -1.1rem;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--primary);
    border-radius: 50%;
    z-index: 5;
    animation: custom-player-spin 0.8s linear infinite;
}
@keyframes custom-player-spin { to { transform: rotate(360deg); } }

.custom-player-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.5rem 0.6rem 0.4rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
    z-index: 4;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.custom-player.controls-visible .custom-player-controls,
.custom-player.just-loaded .custom-player-controls {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.custom-player-progress {
    position: relative;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    margin-bottom: 0.4rem;
}
.custom-player-progress-buffered,
.custom-player-progress-played {
    position: absolute;
    top: 0; left: 0; height: 100%;
    border-radius: 2px;
}
.custom-player-progress-buffered { background: rgba(255, 255, 255, 0.35); }
.custom-player-progress-played { background: var(--primary); }
.custom-player-progress-handle {
    position: absolute;
    top: 50%;
    width: 11px; height: 11px;
    background: var(--primary);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.custom-player-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.custom-player-icon-btn {
    background: none;
    border: none;
    color: #fff;
    width: 1.9rem;
    height: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
}
.custom-player-icon-btn:hover { background: rgba(255, 255, 255, 0.15); }
.custom-player-icon-btn svg { width: 1.1rem; height: 1.1rem; }
.custom-player-skip-btn {
    position: relative;
    width: 2.2rem;
    min-width: 2.2rem;
    height: 2rem;
    padding: 0;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1;
    flex: 0 0 2.2rem;
}
.custom-player-skip-btn .skip-label {
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
    font-size: .46rem;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}

.custom-player-time {
    color: #fff;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.custom-player-spacer { flex: 1; }

/* ---- Volume slider (custom player) ----
   --vol-pct is set from JS (syncCustomVolumeUi) so the filled part of the
   track follows the thumb; WebKit has no native "progress" fill for range
   inputs, so it's drawn with a gradient. */
.custom-player-volume {
    -webkit-appearance: none;
    appearance: none;
    width: 4.2rem;
    height: 1.9rem;
    margin: 0;
    background: transparent;
    cursor: pointer;
    flex-shrink: 1;
    min-width: 2.6rem;
    touch-action: none;
    --vol-pct: 0%;
}
.custom-player-volume::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, #fff var(--vol-pct), rgba(255,255,255,0.3) var(--vol-pct));
}
.custom-player-volume::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.3);
}
.custom-player-volume::-moz-range-progress {
    height: 4px;
    border-radius: 2px;
    background: #fff;
}
.custom-player-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    margin-top: -4px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
}
.custom-player-volume::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: none;
}
/* Very narrow phones: the row already holds play, 2 skip buttons, mute,
   time, quality and fullscreen — drop the slider rather than squeeze the
   rest. The mute button still works. */
@media (max-width: 340px) {
    .custom-player-volume { display: none; }
}


/* ---- Quality selector, now an item inside the custom control bar
   instead of a floating corner pill (see app.js buildQualityMenuHtml) ---- */
.quality-selector {
    position: relative;
    flex-shrink: 0;
}

.quality-selector-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.3rem 0.55rem;
    border-radius: 5px;
    cursor: pointer;
}

.quality-selector-btn:hover,
.quality-selector-btn:active {
    background: var(--primary);
    border-color: var(--primary);
    color: #0a0e1e;
}

/* Single-rendition case: a plain, non-interactive label (not a dropdown —
   there's nothing to switch between) reporting the one resolution that
   exists for this video. */
.quality-selector-static {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.3rem 0.55rem;
    border-radius: 5px;
    pointer-events: none;
    flex-shrink: 0;
}

.quality-selector-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: #0a0e1e;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.3rem;
    min-width: 90px;
    display: none;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
    z-index: 6;
}

.quality-selector-menu.open {
    display: flex;
}

.quality-selector-option {
    background: none;
    border: none;
    color: var(--text-primary);
    text-align: left;
    padding: 0.45rem 0.7rem;
    font-size: 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.quality-selector-option:hover {
    background: rgba(0, 240, 255, 0.12);
}

.quality-selector-option.active {
    color: var(--primary);
    font-weight: 700;
}



/* =====================================================================
   SOCIAL / FACEBOOK-STYLE UI REDESIGN
   Visual-only layer: existing HTML/JS/API behavior is intentionally kept.
   ===================================================================== */
:root {
    --primary: #1877f2;
    --secondary: #42b72a;
    --accent: #1877f2;
    --dark: #ffffff;
    --darker: #f0f2f5;
    --light: #050505;
    --gray: #65676b;
    --card-bg: #ffffff;
    --border: #dddfe2;
    --glow: 0 2px 8px rgba(0,0,0,.08);
    --text-primary: #050505;
    --text-secondary: #65676b;
    --page-bg: #f0f2f5;
    --grid-line: transparent;
    --navbar-bg: rgba(255,255,255,.98);
    --input-bg: #f0f2f5;
    --hover-bg: #f2f3f5;
    --shadow-color: rgba(0,0,0,.12);
    --text: #050505;
    color-scheme: light;
}

[data-theme="light"] {
    --primary: #1877f2;
    --secondary: #42b72a;
    --accent: #1877f2;
    --dark: #ffffff;
    --darker: #f0f2f5;
    --light: #050505;
    --gray: #65676b;
    --card-bg: #ffffff;
    --border: #dddfe2;
    --glow: 0 2px 8px rgba(0,0,0,.08);
    --text-primary: #050505;
    --text-secondary: #65676b;
    --page-bg: #f0f2f5;
    --grid-line: transparent;
    --navbar-bg: rgba(255,255,255,.98);
    --input-bg: #f0f2f5;
    --hover-bg: #f2f3f5;
    --shadow-color: rgba(0,0,0,.12);
    --text: #050505;
    color-scheme: light;
}

/* Dark mode keeps the same social layout while using familiar dark surfaces. */
html:not([data-theme="light"]) {
    --primary: #4599ff;
    --secondary: #42b72a;
    --accent: #4599ff;
    --dark: #18191a;
    --darker: #18191a;
    --light: #e4e6eb;
    --gray: #b0b3b8;
    --card-bg: #242526;
    --border: #3e4042;
    --glow: 0 2px 8px rgba(0,0,0,.28);
    --text-primary: #e4e6eb;
    --text-secondary: #b0b3b8;
    --page-bg: #18191a;
    --navbar-bg: rgba(36,37,38,.98);
    --input-bg: #3a3b3c;
    --hover-bg: #3a3b3c;
    --shadow-color: rgba(0,0,0,.35);
    --text: #e4e6eb;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--page-bg);
    color: var(--text-primary);
    line-height: 1.35;
}
.cyber-grid {
    display: none !important;
}

/* ---------- Top navigation ---------- */
.navbar {
    height: 64px;
    border-bottom: 1px solid var(--border);
    background: var(--navbar-bg);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    backdrop-filter: blur(12px);
}
.nav-container {
    height: 64px;
    max-width: 1320px;
    padding: 0 16px;
    gap: 12px;
}
.logo {
    font-family: inherit;
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    min-width: 190px;
}
.logo-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 19px;
    filter: none;
    animation: none;
}
.logo-text .highlight {
    color: var(--primary);
    text-shadow: none;
}
.nav-links, .user-menu {
    gap: 4px;
    align-items: center;
}
.nav-link {
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 10px 11px;
    border-radius: 8px;
    white-space: nowrap;
}
.nav-link::after { display:none; }
.nav-link:hover, .nav-link.active {
    color: var(--primary);
    background: var(--input-bg);
}
.username {
    color: var(--text-primary);
    background: var(--input-bg);
    border-radius: 18px;
    padding: 7px 12px;
    font-size: 14px;
}
.btn-logout {
    border: 0;
    background: #e4e6eb;
    color: #1c1e21;
    border-radius: 7px;
    padding: 8px 13px;
}
html:not([data-theme="light"]) .btn-logout { background:#3a3b3c; color:#e4e6eb; }
.btn-logout:hover { box-shadow:none; background:#d8dadf; }

.nav-right { gap: 6px; }
.theme-toggle, .icon-btn {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--input-bg);
    color: var(--text-primary);
    box-shadow: none;
}
.theme-toggle:hover, .icon-btn:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
    background: var(--border);
}
.icon-badge { background:#e41e3f; border:2px solid var(--navbar-bg); }

/* ---------- Main shell ---------- */
.main-content {
    margin-top: 64px;
    min-height: calc(100vh - 64px);
}
.container { max-width: 1100px; padding: 24px 16px; }
.page { animation: none; }

/* ---------- Home / landing ---------- */
.hero {
    min-height: calc(100vh - 64px);
    padding: 48px 20px;
    background: var(--page-bg);
}
.hero::before { display:none; }
.hero-content { max-width: 900px; }
.hero-title {
    font-family: inherit;
    font-size: clamp(42px, 7vw, 72px);
    line-height: 1;
    gap: 10px;
}
.glitch {
    color: var(--primary);
    text-shadow: none;
    animation: none;
}
.subtitle {
    font-family: inherit;
    font-size: clamp(22px, 3vw, 34px);
    color: var(--text-primary);
    letter-spacing: 0;
}
.hero-description { color:var(--text-secondary); font-size:18px; max-width:680px; }
.hero-stats { gap:12px; flex-wrap:wrap; }
.stat-item {
    min-width:145px;
    padding:18px 22px;
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:var(--glow);
}
.stat-number {
    font-family:inherit;
    color:var(--primary);
    text-shadow:none;
    font-size:28px;
}
.stat-label { color:var(--text-secondary); font-size:13px; letter-spacing:0; text-transform:none; }
.hero-actions { gap:10px; }
.btn-primary, .btn-secondary, .btn-submit, .btn-search {
    font-family:inherit;
    text-transform:none;
    letter-spacing:0;
    border-radius:7px;
    padding:10px 18px;
    font-size:15px;
}
.btn-primary {
    background:var(--primary);
    color:#fff;
    box-shadow:none;
}
.btn-primary:hover { transform:none; box-shadow:none; background:#166fe5; }
.btn-secondary {
    background:var(--card-bg);
    color:var(--primary);
    border:1px solid var(--border);
}
.btn-secondary:hover { background:var(--hover-bg); box-shadow:none; }

/* ---------- Global cards/forms ---------- */
.section-title {
    font-family:inherit;
    color:var(--text-primary);
    text-shadow:none;
    font-size:24px;
    text-align:left;
    letter-spacing:0;
}
.player-form, .dash-card, .settings-card, .sidebar-card,
.search-box, .search-results, .no-posts {
    background:var(--card-bg);
    border:1px solid var(--border);
    box-shadow:0 1px 2px rgba(0,0,0,.06);
    backdrop-filter:none;
    border-radius:10px;
}
.form-container, .search-container, .dashboard-container { max-width:900px; padding:28px 16px; }
.player-form { padding:24px; }
.form-group label { color:var(--text-secondary); font-family:inherit; font-size:13px; letter-spacing:0; text-transform:none; }
.form-group input, .form-group textarea, .form-group select, .search-input {
    background:var(--input-bg);
    border:1px solid transparent;
    color:var(--text-primary);
    border-radius:8px;
    font-family:inherit;
    padding:11px 12px;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus, .search-input:focus {
    background:var(--card-bg);
    border-color:var(--primary);
    box-shadow:0 0 0 2px rgba(24,119,242,.15);
}
.btn-submit, .btn-search { background:var(--primary); color:#fff; margin-top:12px; }
.btn-submit:hover, .btn-search:hover { transform:none; box-shadow:none; background:#166fe5; }

/* ---------- Social feed ---------- */
.feed-layout {
    max-width:1100px;
    padding:22px 16px 50px;
    display:grid;
    grid-template-columns:minmax(0,680px);
    justify-content:center;
}
.feed-layout-nosidebar { max-width:1100px; }
.feed-main { gap:12px; }

.create-post-card, .post-card {
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow:0 1px 2px rgba(0,0,0,.06);
    backdrop-filter:none;
}
.create-post-card { padding:16px; }
.create-post-header { gap:10px; }
.post-avatar {
    width:42px; height:42px;
    border:0;
    background:var(--primary);
    color:#fff;
    font-family:inherit;
}
.post-input {
    background:var(--input-bg);
    border:0;
    color:var(--text-primary);
    border-radius:20px;
    min-height:46px;
    padding:12px 16px;
    font-family:inherit;
}
.post-input:focus { border:0; box-shadow:0 0 0 2px rgba(24,119,242,.15); }
.create-post-footer {
    border-top:1px solid var(--border);
    margin-top:12px;
    padding-top:10px;
    gap:6px;
}
.post-img-label {
    color:var(--text-secondary);
    border:0;
    border-radius:7px;
    padding:8px 10px;
}
.post-img-label:hover { color:var(--primary); background:var(--input-bg); }
.post-community-select {
    color:var(--text-primary);
    background:var(--input-bg);
    border:0;
    border-radius:7px;
}
.btn-post {
    background:var(--primary);
    color:#fff;
    border-radius:7px;
    padding:8px 16px;
    font-family:inherit;
    letter-spacing:0;
}
.btn-post:hover { transform:none; box-shadow:none; background:#166fe5; }

.post-card { padding:16px; }
.post-card:hover { border-color:var(--border); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.post-header { gap:10px; margin-bottom:10px; }
.post-author { color:var(--text-primary); font-size:15px; }
.post-author:hover { color:var(--primary); }
.post-time, .post-guild-badge { color:var(--text-secondary); }
.post-content { color:var(--text-primary); font-size:15px; line-height:1.45; }
.post-actions { border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.post-action-btn { color:var(--text-secondary); }
.post-action-btn:hover { color:var(--primary); background:var(--input-bg); }
.community-filter-bar {
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px 12px;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.community-filter-bar label { color:var(--text-secondary); }
.community-filter-bar select {
    background:var(--input-bg);
    color:var(--text-primary);
    border:0;
    border-radius:7px;
}

/* ---------- Media tabs ---------- */
.reels-layout { padding:16px 0; }
.reels-viewer {
    max-width:430px;
    border-radius:12px;
    box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.videos-layout { max-width:680px; padding:22px 16px 50px; }
.video-card, .tournament-card, .host-dash-card {
    background:var(--card-bg);
    border:1px solid var(--border);
    box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.video-card { border-radius:0; border-left:0; border-right:0; border-bottom:0; }
.video-card:first-child { border-top-left-radius:10px; border-top-right-radius:10px; border-top:1px solid var(--border); }
.video-card:last-child { border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-bottom:1px solid var(--border); }
.video-card-body { padding:12px 16px 16px; }

/* ---------- Tournaments / guilds / dashboards ---------- */
.dashboard-grid { gap:12px; }
.dash-card { padding:18px; }
.dash-card h3 {
    font-family:inherit;
    color:var(--text-primary);
    font-size:18px;
    text-transform:none;
    letter-spacing:0;
}
.profile-item, .guild-item {
    background:var(--input-bg);
    border:0;
    border-left:0;
    border-radius:8px;
}
.guild-item:hover, .tournament-card:hover { border-color:var(--border); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.tournament-card { border-left:3px solid var(--primary); border-radius:10px; }

/* ---------- Messages / dialogs ---------- */
.modal-overlay { background:rgba(0,0,0,.55); backdrop-filter:blur(2px); }
.modal-content {
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:0 10px 35px rgba(0,0,0,.25);
}
.modal-header { border-bottom:1px solid var(--border); }
.modal-header h3 { color:var(--text-primary); font-family:inherit; }
.modal-close { border-radius:50%; }
.conv-list-pane, .conv-thread-pane { background:var(--card-bg); border-color:var(--border); }

/* ---------- Notifications ---------- */
.notif-panel {
    background:var(--card-bg);
    border:1px solid var(--border);
    box-shadow:0 8px 28px rgba(0,0,0,.18);
    border-radius:10px;
}
.notif-panel-header { border-bottom:1px solid var(--border); }
.notif-panel-list > * { border-bottom-color:var(--border); }

/* ---------- Mobile: compact Facebook-like app shell ---------- */
@media (max-width: 900px) {
    .nav-container { padding:0 10px; }
    .logo { min-width:auto; }
    .logo-text { display:none; }
    .nav-links { gap:2px; }
    .nav-link { padding:9px 8px; }
    .feed-layout, .videos-layout { padding-left:8px; padding-right:8px; }
}
@media (max-width: 768px) {
    .navbar, .nav-container { height:58px; }
    .main-content { margin-top:58px; min-height:calc(100vh - 58px); }
    .nav-container { padding:0 8px; }
    .nav-links, .user-menu {
        position:fixed;
        top:58px;
        right:8px;
        width:min(310px, calc(100vw - 16px));
        max-height:calc(100vh - 70px);
        overflow:auto;
        padding:8px;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:2px;
        background:var(--card-bg);
        border:1px solid var(--border);
        border-radius:10px;
        box-shadow:0 10px 30px rgba(0,0,0,.2);
    }
    .nav-links:not(.open), .user-menu:not(.open) {
        opacity:0;
        pointer-events:none;
        transform:translateY(-8px);
    }
    .nav-links.open, .user-menu.open {
        opacity:1;
        pointer-events:auto;
        transform:translateY(0);
    }
    .nav-link { width:100%; padding:12px; }
    .user-menu .nav-link { margin:0; }
    .mobile-hide { display:block !important; }
    .hamburger { display:flex; }
    .theme-toggle { width:38px; height:38px; }
    .feed-layout { padding-top:10px; }
    .create-post-card, .post-card { border-radius:8px; }
    .create-post-footer { align-items:center; }
    .post-img-label { flex:1 1 auto; text-align:center; }
    .char-counter { margin-left:0; }
    .btn-post { margin-left:auto; }
    .hero { padding:35px 16px; }
    .hero-stats { display:grid; grid-template-columns:1fr 1fr; width:100%; }
    .stat-item { min-width:0; }
    .hero-actions { flex-direction:column; width:min(360px,100%); margin:auto; }
    .hero-actions button { width:100%; }
    .form-container, .search-container, .dashboard-container { padding:18px 10px; }
    .player-form { padding:16px; }
}
@media (max-width: 480px) {
    .logo-icon { width:36px; height:36px; }
    .nav-right { gap:3px; }
    .theme-toggle, .hamburger { width:36px; height:36px; }
    .feed-layout, .videos-layout { padding-left:0; padding-right:0; }
    .create-post-card, .post-card, .community-filter-bar { border-left:0; border-right:0; border-radius:0; }
    .post-card { padding:12px; }
    .create-post-card { padding:12px; }
    .post-input { font-size:14px; }
}

/* Remove legacy neon effects from common interactive states. */
button:hover, a:hover { text-shadow:none; }

/* ===== Profile content / full-width mobile feed ===== */
.profile-content-tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.profile-content-tabs::-webkit-scrollbar { display: none; }
.profile-content-tab {
    flex: 1 1 0;
    min-width: 110px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    padding: 13px 10px 11px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.profile-content-tab:hover { background: var(--input-bg); color: var(--text-primary); }
.profile-content-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.profile-content-tab span { font-weight: 500; opacity: .75; }
.profile-content-panel { min-width: 0; }
.profile-media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.profile-media-card {
    min-width: 0;
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.profile-media-video-wrap { position: relative; background: #000; }
.profile-media-video-wrap video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    background: #000;
}
.profile-reel-card .profile-media-video-wrap video { aspect-ratio: 9 / 16; object-fit: cover; }
.profile-media-poster { display:block; width:100%; max-height:520px; object-fit:cover; }
.profile-media-card-body { padding: 11px 13px 13px; }
.profile-media-author { display:flex; align-items:center; gap:8px; min-width:0; color:var(--text-secondary); font-size:.82rem; }
.profile-media-author img, .profile-media-author > span:first-child {
    width:32px; height:32px; border-radius:50%; object-fit:cover; flex:0 0 32px;
    display:flex; align-items:center; justify-content:center; background:var(--primary); color:#fff; font-weight:800;
}
.profile-media-author strong { color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-media-author > span:last-child { margin-left:auto; white-space:nowrap; }
.profile-media-title { font-weight:800; margin-top:8px; color:var(--text-primary); }
.profile-media-caption { margin-top:7px; color:var(--text-secondary); font-size:.9rem; line-height:1.4; }
.profile-media-stats { margin-top:9px; padding-top:8px; border-top:1px solid var(--border); color:var(--text-secondary); font-size:.82rem; }
.profile-media-delete {
    position:absolute; top:8px; right:8px; z-index:2;
    border:0; border-radius:50%; width:34px; height:34px;
    background:rgba(0,0,0,.65); color:#fff; cursor:pointer;
}
.profile-media-unavailable { padding: 18px; color: var(--text-secondary); text-align:center; }
.profile-video-list { display:flex; flex-direction:column; gap:0; }
.profile-video-list .profile-video-card { border-radius:0; border-left:0; border-right:0; border-bottom:0; }
.profile-video-list .profile-video-card:first-child { border-top-left-radius:10px; border-top-right-radius:10px; border-top:1px solid var(--border); }
.profile-video-list .profile-video-card:last-child { border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-bottom:1px solid var(--border); }

@media (max-width: 768px) {
    /* The profile header keeps normal side padding, but the actual post/media
       stream intentionally bleeds to the viewport edges like Facebook. */
    .profile-body { padding-left: 0; padding-right: 0; }
    .profile-header-section { padding-left: 12px; padding-right: 12px; }
    .profile-posts-section { margin-top: 8px; }
    .profile-content-tabs { padding: 0 8px; margin-bottom: 0; }
    .profile-content-panel { width: 100%; }
    .profile-posts-section .post-card {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        margin: 0;
        width: 100%;
    }
    .profile-posts-section .no-posts { border-left:0; border-right:0; border-radius:0; }
    .profile-media-grid { grid-template-columns: 1fr; gap: 8px; }
    .profile-media-card { border-left:0; border-right:0; border-radius:0; }
    .profile-video-list .profile-video-card { border-radius:0; }
    .profile-posts-title { padding-left:12px; padding-right:12px; }
}

/* ===== Profile media: Facebook-style Reels grid + native Videos tab UI ===== */
.profile-reels-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    background: var(--border);
    width: 100%;
}
.profile-reel-tile {
    position: relative;
    min-width: 0;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    background: #111;
    color: #fff;
    cursor: pointer;
    display: block;
    text-align: left;
}
.profile-reel-thumb-wrap,
.profile-reel-thumb-video,
.profile-reel-tile > img {
    width: 100%;
    height: 100%;
    display: block;
}
.profile-reel-thumb-video,
.profile-reel-tile > img {
    object-fit: cover;
    background: #111;
}
.profile-reel-view-count {
    position: absolute;
    left: 9px;
    bottom: 8px;
    z-index: 3;
    color: #fff;
    font-size: .9rem;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,.85);
    pointer-events: none;
}
.profile-reel-delete {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 5;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.62);
    color: #fff;
    cursor: pointer;
}
.profile-reel-tile-unavailable .profile-reel-unavailable-label {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 5px 6px;
    border-radius: 6px;
    background: rgba(0,0,0,.68);
    color: #fff;
    font-size: .72rem;
    text-align: center;
}
.profile-reel-empty-thumb {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 2rem;
}
.profile-create-reel-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(160deg, #f8b2d0 0%, #ef8eaf 42%, #f28b31 100%);
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.profile-create-reel-icon {
    position: relative;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: #e94f86;
    font-size: 2rem;
    text-shadow: none;
}
.profile-create-reel-icon b {
    position: absolute;
    right: -7px;
    bottom: -2px;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: #ef4d86;
    border: 2px solid #ef4d86;
    font-size: 1.05rem;
    line-height: 1;
}

/* Profile Videos intentionally reuse renderVideoItem(), so these rules only
   remove the profile wrapper's old card chrome. The player/actions remain the
   exact same working components as the standalone Videos tab. */
.profile-video-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}
.profile-video-list .video-card {
    width: 100%;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    margin: 0;
}
.profile-video-list .video-card:first-child {
    border-top: 1px solid var(--border);
}
.profile-video-list .video-card:last-child {
    border-bottom: 1px solid var(--border);
}

@media (max-width: 768px) {
    .profile-reels-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2px;
    }
    .profile-reel-view-count {
        left: 7px;
        bottom: 7px;
        font-size: .78rem;
    }
    .profile-create-reel-icon {
        width: 52px;
        height: 52px;
        font-size: 1.65rem;
    }
    .profile-create-reel-tile {
        gap: 9px;
        font-size: .92rem;
    }
    .profile-reel-delete {
        width: 27px;
        height: 27px;
        top: 5px;
        right: 5px;
        font-size: .8rem;
    }
}

/* ===== Videos tab mobile edge-to-edge player ===== */
@media (max-width: 900px) {
    .videos-layout {
        width: 100%;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
    .videos-list {
        width: 100%;
    }
    .videos-list .video-card {
        width: 100%;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }
}

/* ===== Video player fixes ===== */
.video-card .video-player-wrap {
    margin: 0;
}
.video-card .custom-player {
    width: 100%;
    border-radius: 0;
}
.profile-video-list .video-card {
    gap: 0;
    overflow: hidden;
}
.profile-video-card-body {
    padding: 10px 12px 8px;
}
.profile-video-actions-body {
    padding: 8px 12px 10px;
}
.profile-video-card .video-card-header {
    margin-bottom: 5px;
}
.profile-video-card .video-title {
    margin: 0;
}
.profile-video-card .video-player-wrap {
    margin: 0;
}
@media (max-width: 768px) {
    .video-card .video-player-wrap {
        margin: 0;
    }
    .video-card .custom-player video {
        aspect-ratio: 16 / 9;
        max-height: none;
    }
    .profile-video-card-body {
        padding: 9px 12px 7px;
    }
    .profile-video-actions-body {
        padding: 7px 12px 9px;
    }
}

/* ===== Videos tab: true edge-to-edge player =====
   The Videos tab renders long-form videos as .post-card elements. Those
   cards keep horizontal padding for the author/title/actions, but the video
   itself should touch the viewport edges on mobile. The older generic
   .post-card .video-player-wrap rule restores normal margins later in the
   stylesheet, so this more specific Videos-tab rule deliberately overrides
   it only for #videosList. */
#videosList .post-card {
    overflow: hidden;
}

#videosList .post-card .video-player-wrap {
    width: calc(100% + 2.5rem);
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
    border-radius: 0;
}

#videosList .post-card .video-player-wrap .custom-player,
#videosList .post-card .video-player-wrap video {
    width: 100%;
    max-width: none;
}

@media (max-width: 480px) {
    #videosList .post-card {
        padding-left: 12px;
        padding-right: 12px;
    }

    #videosList .post-card .video-player-wrap {
        width: calc(100% + 24px);
        margin-left: -12px;
        margin-right: -12px;
    }
}

/* ===== Home feed: long-form video edge-to-edge on mobile =====
   Keep the author/title/actions inside the normal post card padding, but
   make the actual long-form video player span the full available viewport
   width just like the Videos tab. This is scoped to Home feed video posts so
   normal image/reel posts are unchanged. */
@media (max-width: 900px) {
    #feedPage #postsContainer .post-card:has(.video-player-wrap) {
        overflow: visible;
    }

    #feedPage #postsContainer .post-card:has(.video-player-wrap) .video-player-wrap {
        width: calc(100% + 48px);
        margin-left: -24px;
        margin-right: -24px;
        border-radius: 0;
    }
}

@media (max-width: 480px) {
    #feedPage #postsContainer .post-card:has(.video-player-wrap) {
        overflow: visible;
    }

    #feedPage #postsContainer .post-card:has(.video-player-wrap) .video-player-wrap {
        width: calc(100% + 24px);
        margin-left: -12px;
        margin-right: -12px;
    }
}