:root {
    --bg: #0f0f0f;
    --surface: #181818;
    --surface-2: #202020;
    --surface-3: #282828;
    --border: #303030;
    --text: #f1f1f1;
    --text-secondary: #aaaaaa;
    --primary: #f97316;
    --primary-hover: #ea580c;
    --primary-pressed: #c2410c;
    --primary-2: #c2410c;
    --hover: #272727;
    --radius: 12px;
    --radius-sm: 8px;
    --verified-color: #ffffff;
    --card-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

html[data-theme="light"] {
    --bg: #f9f9f9;
    --surface: #ffffff;
    --surface-2: #f2f2f2;
    --surface-3: #e5e5e5;
    --border: #e0e0e0;
    --text: #0f0f0f;
    --text-secondary: #606060;
    --hover: #f2f2f2;
    --verified-color: #6c6c6c;
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}



a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--text);
}

.container {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0 2rem;
    flex-shrink: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.header-left,
.header-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.logo-icon {
    display: block;
    font-size: 2.2rem;
    color: var(--primary);
}

.header-search {
    flex: 1;
    max-width: 640px;
    display: flex;
    justify-content: center;
}

.search-box {
    width: 100%;
    height: 44px;
    display: flex;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9999px;
    overflow: hidden;
    font-family: 'Space Grotesk', sans-serif;
}

.search-box input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    padding: 0 1.25rem;
    font-size: 1rem;
}

.search-box input::placeholder {
    color: var(--text-secondary);
}

.search-box button {
    background: var(--surface-3);
    color: var(--text);
    border: none;
    padding: 0 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.search-box button:hover {
    background: var(--hover);
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    overflow: hidden;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.95rem;
    background: var(--surface-3);
    color: var(--text);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn i {
    font-size: 1.25rem;
}

.btn.icon-only {
    padding: 0.25rem;
    width: 44px;
    height: 44px;
    font-size: 1.45rem;
}

.btn.icon-only i {
    font-size: 1.75rem;
}

.btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
}

button.btn {
    font-family: inherit;
    border: none;
}

.btn-primary,
.btn-subscribe {
    background: var(--primary);
    color: #fff;
}

.btn-primary:hover,
.btn-subscribe:hover {
    background: var(--primary-hover);
}

.btn-primary:active,
.btn-subscribe:active {
    background: var(--primary-pressed);
}

.btn-ghost {
    background: transparent;
    color: var(--text);
}

.btn-ghost:hover {
    background: var(--hover);
}

.btn-subscribe.subscribed {
    background: var(--surface-3);
    color: var(--text);
    box-shadow: none;
}

.btn-subscribe.subscribed:hover {
    background: var(--hover);
    box-shadow: none;
}

.btn-like {
    background: var(--surface-3);
    color: var(--text);
}

.btn-like.liked {
    background: var(--primary);
    color: #fff;
}

.main-content {
    padding: 1.5rem 0;
    flex: 1 0 auto;
}

.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text);
}

.section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.section-header-row .section-title {
    margin-bottom: 0;
}

.section-header-row .sort-bar {
    margin-bottom: 1rem;
}

.feed-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.tab {
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    background: var(--surface);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.15s ease;
}

.tab:hover,
.tab.active {
    background: var(--text);
    color: var(--bg);
}

.empty {
    color: var(--text-secondary);
    padding: 1rem 0;
}

.error,
.message {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.error {
    background: rgba(255, 0, 0, 0.15);
    color: #ff6b6b;
    border: 1px solid rgba(255, 0, 0, 0.3);
}

.message {
    background: rgba(0, 255, 128, 0.1);
    color: #4ade80;
    border: 1px solid rgba(0, 255, 128, 0.2);
}

.status-badge {
    display: inline-flex;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: capitalize;
    background: var(--surface-3);
    color: var(--text);
}

.status-badge.open {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.status-badge.resolved {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}

.progress-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.progress-row {
    display: grid;
    grid-template-columns: 120px 1fr 100px;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
}

.progress-name {
    color: var(--text-secondary);
}

.progress-value {
    color: var(--text);
    text-align: right;
    font-weight: 500;
}

.progress-bar {
    height: 10px;
    background: var(--surface-3);
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #34d399, #10b981);
    border-radius: 5px;
    transition: width 0.4s ease;
}

@media (max-width: 600px) {
    .progress-row {
        grid-template-columns: 1fr;
    }
}

.revenue-sources {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.revenue-sources li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text);
    font-size: 0.95rem;
}

.upload-steps {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.upload-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    transition: background 0.15s, color 0.15s;
    cursor: default;
}

.upload-step.clickable {
    cursor: pointer;
}

.upload-step.clickable:hover {
    background: var(--surface-2);
    color: var(--text);
}

.upload-step.active {
    color: var(--primary);
}

.upload-step.done {
    color: var(--text);
    opacity: 0.7;
}

.upload-step .step-number {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-3);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.upload-step.active .step-number {
    background: var(--primary);
    color: #fff;
}

.upload-step.done .step-number {
    background: #34d399;
    color: #064e3b;
}

.upload-step .step-number i {
    font-size: 1rem;
}

.upload-review {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    line-height: 1.8;
}

/* ===== Review & publish preview card ===== */
.review-preview-card {
    display: flex;
    gap: 1.25rem;
    margin: 1rem 0 1.5rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
}
.review-preview-thumb {
    position: relative;
    width: 240px;
    min-width: 240px;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-3);
}
.review-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.review-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}
.review-thumb-placeholder i {
    font-size: 2.5rem;
}
.review-duration-badge {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}
.review-preview-body {
    flex: 1;
    min-width: 0;
}
.review-preview-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--text);
}
.review-preview-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 1rem;
    line-height: 1.5;
}
.review-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}
.review-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--surface-2);
    border-radius: 10px;
}
.review-meta-item i {
    font-size: 1.1rem;
    color: var(--primary);
    margin-top: 1px;
    flex-shrink: 0;
}
.review-meta-item div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.review-meta-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}
.review-meta-value {
    font-size: 0.85rem;
    color: var(--text);
    font-weight: 600;
    word-break: break-word;
}
@media (max-width: 600px) {
    .review-preview-card {
        flex-direction: column;
        gap: 1rem;
    }
    .review-preview-thumb {
        width: 100%;
        min-width: 0;
    }
    .review-meta-grid {
        grid-template-columns: 1fr;
    }
    .upload-steps {
        gap: 0;
    }
    .upload-step {
        padding: 0.4rem 0.5rem;
    }
    .upload-step .step-label {
        font-size: 0.78rem;
    }
}

.ad-video-wrap {
    margin: 1rem 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #000;
}

#ad-preview {
    width: 100%;
    max-height: 360px;
    display: block;
}

.ad-markers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.ad-marker-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    background: var(--surface-3);
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
}

.ad-marker-chip:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

.video-card {
    display: block;
    border-radius: 0;
    overflow: hidden;
    background: var(--surface);
}

.video-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-icon {
    width: 0;
    height: 0;
    border-left: 24px solid #fff;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    opacity: 0.9;
}

.duration-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}

.new-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    letter-spacing: 0.03em;
}

.load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.progress-track {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
}

.progress-fill {
    height: 100%;
    background: var(--primary);
}

.video-card-body {
    display: flex;
    gap: 0.9rem;
    padding: 0.75rem 1rem 1rem;
    align-items: flex-start;
}

.card-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    flex-shrink: 0;
    overflow: hidden;
}

.card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-info {
    flex: 1;
    min-width: 0;
}

.video-info h3 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 0.35rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-info .meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.video-info .meta strong {
    color: var(--text);
    font-weight: 600;
}

.watch-page {
    padding: 1.5rem 0;
}

.watch-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.player-wrap {
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
}

html[data-theme="light"] .player-wrap {
    background: #fff;
}

.video-player {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    background: #000;
}

.watch-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 1rem 0 0.25rem;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.watch-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.watch-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.watch-meta i {
    font-size: 1.05rem;
}

.channel-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--surface);
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.channel-row .channel-name {
    flex: 1;
    min-width: 0;
}

.channel-row .action-form,
.channel-row .btn {
    flex-shrink: 0;
}

.channel-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    text-transform: uppercase;
    object-fit: cover;
}

.channel-name {
    flex: 1;
    min-width: 0;
}

.channel-name strong {
    display: block;
    font-weight: 600;
}

.channel-name span {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.channel-name .verified-badge {
    font-size: 1.05em;
}

.action-form {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    max-width: none;
}

.description-box {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.5;
}

.sidebar h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text);
}

.side-video {
    display: flex;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
}

.side-thumb {
    position: relative;
    flex: 0 0 120px;
    height: 68px;
    background: var(--surface-3);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.side-thumb .duration-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-size: 0.65rem;
    padding: 0.1rem 0.25rem;
}

.side-thumb .play-icon {
    border-left-width: 14px;
    border-top-width: 9px;
    border-bottom-width: 9px;
}

.side-info {
    flex: 1;
    min-width: 0;
}

.side-info h5 {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.side-info .meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.comments-section {
    width: 100%;
}

.comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.comments-section h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
}

.comment-sort-form {
    display: inline-flex;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}

.comment-sort-form select {
    padding: 0.35rem 0.6rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.85rem;
    outline: none;
}

.comments-disabled {
    color: var(--text-secondary);
    padding: 0.75rem 0;
    font-size: 0.95rem;
}

.studio-layout {
    display: flex;
    gap: 0;
    min-height: calc(100vh - 56px);
    max-width: none;
    padding: 0;
    margin: 0;
}

.studio-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 56px;
    height: calc(100vh - 56px);
    overflow-y: auto;
}

.studio-sidebar-top {
    flex: 1;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.studio-sidebar-bottom {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.studio-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1.25rem 1.25rem;
    border-bottom: 1px solid var(--border);
    font-weight: 800;
    font-size: 1rem;
    color: var(--primary);
}

.studio-brand i {
    font-size: 1.8rem;
    flex-shrink: 0;
}

/* Studio sidebar profile */
.studio-sidebar-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem 1rem;
    border-bottom: 1px solid var(--border);
    gap: 0.35rem;
}
.studio-profile-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    font-size: 1rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
}
.studio-profile-brand i {
    font-size: 1.5rem;
    flex-shrink: 0;
}
.studio-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--border);
    margin-bottom: 0.25rem;
    flex-shrink: 0;
}
.studio-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.studio-profile-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
}
.studio-profile-name {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.studio-profile-name .verified-badge {
    font-size: 0.85rem;
    color: var(--primary);
}
.studio-profile-subs {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.studio-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
    position: relative;
}

.studio-link i {
    font-size: 1.15rem;
    width: 20px;
    text-align: center;
}

/* Colorful studio sidebar icons */
.studio-link .bxs-dashboard { color: #3b82f6; }
.studio-link .bx-video { color: #ef4444; }
.studio-link .bx-comment { color: #f97316; }
.studio-link .bx-line-chart { color: #10b981; }
.studio-link .bx-shield { color: #8b5cf6; }
.studio-link .bx-dollar-circle { color: #22c55e; }
.studio-link .bx-group { color: #ec4899; }
.studio-link .bx-cog { color: #64748b; }
.studio-link .bx-arrow-back { color: #ea580c; }

.studio-link:hover {
    background: var(--surface-2);
    color: var(--text);
}

.studio-link.active {
    background: var(--primary);
    color: #fff;
}

.studio-link.active i {
    color: #fff !important;
}

.studio-main {
    flex: 1;
    padding: 1.5rem;
    min-width: 0;
    overflow-x: auto;
}

.studio-cta {
    margin-top: 1.5rem;
}

.studio-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 0;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.per-page-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.per-page-form select {
    padding: 0.35rem 0.6rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    outline: none;
}

.pagination-controls {
    display: flex;
    gap: 0.5rem;
}

.playlist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.create-playlist-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.create-playlist-form input {
    min-width: 220px;
    padding: 0.5rem 0.75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    outline: none;
}

.studio-playlist-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.playlist-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.playlist-card-thumb {
    width: 80px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.playlist-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.playlist-info strong {
    font-size: 1rem;
    font-weight: 600;
}

.playlist-desc {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin: 0;
    line-height: 1.3;
}

.playlist-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.playlist-modal-box {
    max-width: 620px;
}

.add-to-playlist-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.add-to-playlist-form select {
    flex: 1;
    min-width: 220px;
    padding: 0.5rem 0.75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    outline: none;
}

.playlist-videos {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 340px;
    overflow-y: auto;
}

.playlist-video-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}

.playlist-thumb {
    width: 100px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    position: relative;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.playlist-video-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.playlist-video-title a {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.edit-playlist-page {
    width: 100%;
}

.page-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.page-header .btn {
    flex-shrink: 0;
}

.success-message {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.playlist-details-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.form-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.25rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-field label {
    font-size: 0.9rem;
    font-weight: 600;
}

.form-field textarea,
.form-field input {
    padding: 0.6rem 0.75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    outline: none;
}

.pl-thumb-preview {
    width: 160px;
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    display: block;
}

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

.add-to-playlist-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.add-to-playlist-form-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    margin-top: 0.5rem;
}

.add-to-playlist-form-row select {
    flex: 1;
    padding: 0.6rem 0.75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    outline: none;
}

.reorder-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

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

.playlist-reorder-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.playlist-reorder-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: move;
}

.playlist-reorder-item.dragging {
    opacity: 0.5;
}

.drag-handle {
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: grab;
}

.playlist-reorder-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.playlist-reorder-title a {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

.playlist-hero {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.playlist-hero-thumb {
    width: 240px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 2.5rem;
    flex-shrink: 0;
}

.playlist-hero-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.playlist-hero-info .section-title {
    margin: 0;
}

.playlist-description {
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 600px) {
    .playlist-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .playlist-hero-thumb {
        width: 100%;
    }
}

.playlist-view-layout {
    display: grid;
    grid-template-columns: 35% 63%;
    gap: 2%;
    padding-top: 1rem;
}

.playlist-view-info {
    position: sticky;
    top: 100px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    height: fit-content;
}

.playlist-view-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 3rem;
}

.playlist-view-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.playlist-view-desc {
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.playlist-view-meta {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.playlist-creator {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.playlist-creator-avatar,
.video-creator-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text);
}

.video-creator {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.playlist-view-videos {
    min-width: 0;
}

.playlist-view-heading {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.playlist-view-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.playlist-view-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: background 0.15s;
}

.playlist-view-item:hover {
    background: var(--surface-2);
}

.playlist-view-item-thumb {
    width: 160px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    position: relative;
    flex-shrink: 0;
    display: block;
}

.playlist-view-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.playlist-view-item-info .meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.playlist-view-item-title {
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.playlist-view-item-title:hover {
    text-decoration: underline;
}

/* Studio analytics */
.analytics-page {
    padding: 0 1.25rem 1.25rem;
}

.analytics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.analytics-header .section-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
}

.analytics-subtabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}

.analytics-subtabs .subtab {
    padding: 0.6rem 1.1rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 0;
    font-size: 0.9rem;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.analytics-subtabs .subtab:hover {
    color: var(--text);
}

.analytics-subtabs .subtab.active {
    color: var(--primary);
    background: transparent;
    font-weight: 700;
    border-bottom-color: var(--primary);
}

.range-form select {
    padding: 0.55rem 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    outline: none;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s;
}

.range-form select:hover {
    border-color: var(--primary);
}

.analytics-insight {
    margin-bottom: 1.5rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
    border-radius: var(--radius);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.analytics-insight::after {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 150px;
    height: 150px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
}

.insight-label {
    color: rgba(255,255,255,0.8);
    font-size: 0.85rem;
    margin: 0 0 0.35rem;
    position: relative;
    z-index: 1;
}

.insight-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
    position: relative;
    z-index: 1;
}

.insight-title strong {
    font-size: 1.6rem;
}

.analytics-planned {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
}

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

.audience-grid {
    margin-top: 1.5rem;
}

.demography-list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.demography-row {
    display: grid;
    grid-template-columns: 130px 1fr 50px;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
}

.demography-name {
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.demography-bar {
    height: 8px;
    background: var(--surface-3);
    border-radius: 4px;
    overflow: hidden;
}

.demography-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-2));
    border-radius: 4px;
}

.demography-pct {
    color: var(--text-secondary);
    text-align: right;
}

@media (max-width: 900px) {
    .demography-row {
        grid-template-columns: 100px 1fr 45px;
    }
}

.content-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.content-filter {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    font-size: 0.85rem;
    background: var(--surface);
}

.content-filter:hover {
    background: var(--surface-2);
}

.content-filter.active {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
    font-weight: 600;
}

.content-filter.disabled {
    opacity: 0.45;
    pointer-events: none;
}

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

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.content-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    min-width: 0;
    transition: border-color 0.15s;
}

.content-panel:hover {
    border-color: rgba(249, 115, 22,0.2);
}

.panel-title {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.panel-title::before {
    content: '';
    width: 4px;
    height: 16px;
    background: var(--primary);
    border-radius: 2px;
}

.panel-subtitle {
    margin: 0 0 1.25rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.traffic-sources {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.traffic-row {
    display: grid;
    grid-template-columns: 130px 1fr 60px;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
}

.traffic-name {
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.traffic-bar {
    height: 10px;
    background: var(--surface-3);
    border-radius: 6px;
    overflow: hidden;
}

.traffic-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-2));
    border-radius: 6px;
    transition: width 0.3s;
}

.traffic-pct {
    color: var(--text-secondary);
    text-align: right;
    font-size: 0.82rem;
    font-weight: 600;
}

.top-videos-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.top-video-row {
    display: grid;
    grid-template-columns: 50px 1fr 50px;
    align-items: center;
    gap: 0.75rem;
}

.top-video-thumb {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    display: block;
}

.top-video-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.top-video-title {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.top-video-title:hover {
    text-decoration: underline;
}

.top-video-bar-bg {
    height: 6px;
    background: var(--surface-3);
    border-radius: 3px;
    overflow: hidden;
}

.top-video-bar {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-2));
    border-radius: 3px;
    transition: width 0.3s;
}

.top-video-views {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: right;
}

@media (max-width: 900px) {
    .content-grid {
        grid-template-columns: 1fr;
    }

    .traffic-row {
        grid-template-columns: 100px 1fr 35px;
    }
}

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

.metric-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, var(--primary), var(--primary-2));
    opacity: 0;
    transition: opacity 0.2s;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border-color: rgba(249, 115, 22,0.3);
}

.metric-card:hover::before {
    opacity: 1;
}

.metric-label {
    color: var(--text-secondary);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}

.metric-label i {
    color: var(--primary);
    font-size: 1rem;
}

.metric-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
}

.metric-value-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.metric-change {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
}

.metric-change.up {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

.metric-change.down {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.metric-change.same {
    color: var(--text-secondary);
}

.metric-hint {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.analytics-chart-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: border-color 0.15s;
}

.analytics-chart-wrap:hover {
    border-color: rgba(249, 115, 22,0.2);
}

.chart-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.chart-title::before {
    content: '';
    width: 4px;
    height: 18px;
    background: var(--primary);
    border-radius: 2px;
}

.analytics-chart-wrap canvas {
    min-height: 300px;
    max-height: 360px;
}

.analytics-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.analytics-table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    min-width: 0;
}

.analytics-table {
    width: 100%;
    border-collapse: collapse;
}

.analytics-table th,
.analytics-table td {
    text-align: left;
    padding: 0.85rem 0.6rem;
    font-size: 0.88rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.analytics-table th {
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--border);
}

.analytics-table tbody tr {
    transition: background 0.15s;
}

.analytics-table tbody tr:hover {
    background: var(--surface-2);
}

.analytics-table tr:last-child td {
    border-bottom: none;
}

.rank {
    width: 30px;
    color: var(--primary);
    font-weight: 800;
    font-size: 1rem;
}

.content-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.content-thumb {
    width: 60px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    display: block;
    flex-shrink: 0;
}

.content-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.content-title {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.content-title:hover {
    text-decoration: underline;
}

.badge-new {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    width: fit-content;
}

.latest-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.latest-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.content-info .meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.analytics-right-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.analytics-realtime,
.analytics-latest {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: border-color 0.15s;
}

.analytics-realtime:hover,
.analytics-latest:hover {
    border-color: rgba(249, 115, 22,0.2);
}

.realtime-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.realtime-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

.realtime-row:last-child {
    border-bottom: none;
}

.realtime-label {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}

.realtime-label i {
    color: var(--text-secondary);
    font-size: 1rem;
}

.realtime-value {
    font-weight: 800;
    font-size: 1.1rem;
}

.realtime-subtitle {
    font-size: 0.9rem;
    margin: 1rem 0 0.5rem;
    font-weight: 600;
}

.realtime-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.realtime-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
}

.realtime-list a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    text-decoration: none;
}

.realtime-list a:hover {
    text-decoration: underline;
}

.realtime-list span {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.realtime-thumb {
    width: 30px;
    height: 30px;
    border-radius: var(--radius);
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    display: block;
}

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

.realtime-chart-wrap {
    height: 180px;
    margin: 1rem 0;
}

.analytics-latest .latest-thumb {
    width: 80px;
    height: 80px;
    border-radius: var(--radius);
    flex-shrink: 0;
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 0.75rem;
}

@media (max-width: 900px) {
    .analytics-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .playlist-view-layout {
        grid-template-columns: 1fr;
    }

    .playlist-view-info {
        position: static;
    }
}

.studio-subtabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
}

.studio-subtab {
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}

.studio-subtab.active {
    color: var(--text);
    background: var(--surface-2);
}

.studio-video-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.studio-video-list-header,
.studio-video-row {
    display: grid;
    grid-template-columns: 140px 2fr 110px 120px 100px 100px 90px;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
}

.studio-video-list-header {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
}

.studio-video-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
}

.studio-thumb {
    width: 140px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    position: relative;
    display: block;
    background-size: cover;
    background-position: center;
}

.studio-thumb .duration-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 0.15rem 0.3rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.studio-video-info h4 {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.studio-video-desc {
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    box-orient: vertical;
}

.studio-video-visibility,
.studio-video-published,
.studio-video-views,
.studio-video-comments {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.studio-video-visibility .visibility {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text);
}

.studio-video-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
}

@media (max-width: 900px) {
    .studio-video-list-header,
    .studio-video-row {
        grid-template-columns: 100px 1fr 80px;
        gap: 0.75rem;
    }

    .studio-video-list-header .col-visibility,
    .studio-video-list-header .col-date,
    .studio-video-list-header .col-views,
    .studio-video-list-header .col-comments,
    .studio-video-visibility,
    .studio-video-published,
    .studio-video-views,
    .studio-video-comments {
        display: none;
    }
}

@media (max-width: 600px) {
    .studio-video-list-header {
        display: none;
    }
    .studio-video-row {
        grid-template-columns: 120px 1fr;
        gap: 0.5rem;
        padding: 0.5rem;
    }
    .studio-video-row .studio-video-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

.comment-form {
    margin-bottom: 1.25rem;
    padding: 0;
    background: transparent;
    border: none;
    max-width: none;
}

.comment-form textarea {
    width: 100%;
    height: 80px;
    min-height: 80px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 0.75rem;
    resize: none;
    overflow-y: auto;
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: 0.75rem;
}

.comment {
    display: flex;
    gap: 0.85rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
}

.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    flex-shrink: 0;
    overflow: hidden;
    text-decoration: none;
}

.comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comment-content {
    flex: 1;
}

.comment-author {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.comment-author a {
    color: var(--text);
    text-decoration: none;
}

.comment-time {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-left: 0.5rem;
    font-weight: 400;
}

.comment-body {
    color: var(--text);
    font-size: 0.95rem;
}

.comment-body .mention,
.comment-body .comment-link {
    color: var(--primary);
    text-decoration: none;
}

.comment-body .mention:hover,
.comment-body .comment-link:hover {
    text-decoration: underline;
}

.comment-timestamp {
    background: transparent;
    border: none;
    color: var(--primary);
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}

.comment-timestamp:hover {
    text-decoration: underline;
}

.auth-split {
    display: flex;
    min-height: calc(100vh - 60px);
}

.auth-brand-side {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2.5rem;
    overflow: hidden;
}

.auth-brand-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
    z-index: 0;
}

.auth-brand-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(249, 115, 22,0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(59,130,246,0.12) 0%, transparent 50%);
}

.auth-brand-content {
    position: relative;
    z-index: 1;
    max-width: 480px;
}

.auth-brand-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    margin-bottom: 2rem;
}

.auth-brand-logo i {
    font-size: 2.2rem;
    color: var(--primary);
}

.auth-brand-logo span {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.auth-brand-headline {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
}

.auth-brand-headline span {
    color: var(--primary);
}

.auth-brand-tagline {
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
    margin: 0 0 2rem;
}

.auth-brand-stats {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1.25rem 1.5rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius);
}

.auth-brand-stat {
    display: flex;
    flex-direction: column;
}

.auth-brand-stat strong {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.auth-brand-stat span {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
    margin-top: 0.2rem;
}

.auth-brand-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.auth-feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
}

.auth-feature i {
    color: var(--primary);
    font-size: 1.1rem;
}

.auth-form-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 2.5rem;
    background: var(--bg);
    font-family: 'Space Grotesk', sans-serif;
}

.auth-form-wrap {
    width: 100%;
    max-width: 440px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

/* Right-side branding (moved from left panel) */
.auth-form-wrap .auth-brand-logo {
    margin-bottom: 1.25rem;
}
.auth-form-wrap .auth-brand-logo span {
    color: var(--text);
}
.auth-form-headline {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 0.5rem 0;
    color: var(--text);
    letter-spacing: -0.02em;
}
.auth-form-headline span {
    color: var(--primary);
}
.auth-form-tagline {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin: 0 0 1.25rem 0;
    line-height: 1.5;
}
.auth-form-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.auth-form-features .auth-feature {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.auth-form-features .auth-feature i {
    color: var(--primary);
    font-size: 1rem;
}
.auth-form-divider {
    height: 1px;
    background: var(--border);
    margin: 0 0 1.5rem 0;
}

/* Footer logo — centered at bottom of form side */
.auth-form-footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-decoration: none;
    margin-top: auto;
    padding-top: 1.5rem;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.auth-form-footer-logo:hover {
    opacity: 1;
}
.auth-form-footer-logo i {
    font-size: 1.1rem;
    color: var(--primary);
}
.auth-form-footer-logo span {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
}

.auth-form-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-form-logo {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 0.75rem;
    display: block;
}

.auth-form-header h2 {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    font-weight: 800;
}

.auth-form-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.auth-error {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: var(--radius-sm);
    color: #ef4444;
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.auth-field {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-field > i {
    position: absolute;
    left: 0.85rem;
    color: var(--text-secondary);
    font-size: 1.1rem;
    pointer-events: none;
}

.auth-field input,
.auth-field select {
    width: 100%;
    padding: 0.8rem 0.85rem 0.8rem 2.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.auth-field input:focus,
.auth-field select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(249, 115, 22,0.1);
}

.auth-field input::placeholder {
    color: var(--text-secondary);
}

.auth-field-row {
    display: flex;
    gap: 0.75rem;
}

.auth-field.half {
    flex: 1;
}

.auth-field select {
    appearance: none;
    cursor: pointer;
}

.auth-submit {
    width: 100%;
    padding: 0.85rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: background 0.15s, transform 0.1s;
    margin-top: 0.25rem;
}

.auth-submit:hover {
    background: var(--primary-2);
}

.auth-submit:active {
    transform: scale(0.98);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.auth-switch {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.auth-switch a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.auth-switch a:hover {
    text-decoration: underline;
}

@media (max-width: 800px) {
    .auth-split {
        flex-direction: column;
    }
    .auth-brand-side {
        padding: 2rem 1.5rem;
    }
    .auth-brand-headline {
        font-size: 1.75rem;
    }
    .auth-brand-stats {
        gap: 1.25rem;
    }
    .auth-brand-features {
        grid-template-columns: 1fr;
    }
    .auth-form-side {
        padding: 1.5rem 1rem;
    }
}

.report-page {
    padding: 1.5rem 0;
    max-width: 720px;
}

.report-target {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.report-thumb {
    width: 160px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text);
    flex-shrink: 0;
}

.report-target-info h3 {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.report-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.report-form label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.report-form select,
.report-form textarea {
    width: 100%;
    padding: 0.7rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    margin-bottom: 1rem;
    outline: none;
}

.report-form select:focus,
.report-form textarea:focus {
    border-color: var(--primary);
}

.report-form textarea {
    min-height: 120px;
    resize: none;
}

.edit-video-form label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.edit-video-form input,
.edit-video-form textarea,
.edit-video-form select {
    width: 100%;
    padding: 0.7rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    margin-bottom: 1rem;
    outline: none;
    font-family: inherit;
}

.edit-video-form input:focus,
.edit-video-form textarea:focus,
.edit-video-form select:focus {
    border-color: var(--primary);
}

.report-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.success-box {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #4ade80;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}

.error-box {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #f87171;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}

.dashboard {
    padding: 1.5rem 0;
}

.form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.customisation-view .form-card {
    max-width: none;
}

.form-card.danger-zone {
    border-color: var(--primary);
}

.form-card.danger-zone p.meta {
    margin-bottom: 1rem;
}

.form-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.form-card label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.form-card input,
.form-card textarea {
    width: 100%;
    padding: 0.7rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    margin-bottom: 1rem;
    outline: none;
}

.form-card textarea {
    min-height: 90px;
    resize: vertical;
}

.form-card input:focus,
.form-card textarea:focus {
    border-color: var(--primary);
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
}

th,
td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 0.95rem;
}

th {
    color: var(--text-secondary);
    font-weight: 500;
}

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

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.channel-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 2rem;
    background: var(--surface);
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}

.channel-hero .channel-avatar {
    width: 90px;
    height: 90px;
    font-size: 2.2rem;
}

.channel-info h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.channel-info span {
    display: block;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.subscribed-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.channel-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9999px;
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
    transition: background 0.15s;
}

.channel-chip:hover {
    background: var(--hover);
}

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

.playlist-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    transition: transform 0.15s, background 0.15s;
}

.playlist-card:hover {
    background: var(--surface-2);
    transform: translateY(-2px);
}

.playlist-card h4 {
    margin-bottom: 0.25rem;
    font-size: 1.05rem;
}

.playlist-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.playlist-action select {
    padding: 0.55rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    outline: none;
}

.side-menu {
    position: fixed;
    top: 70px;
    left: 0;
    width: 250px;
    height: calc(100vh - 70px);
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 1.25rem 0.75rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 90;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-weight: 600;
    font-size: 1rem;
    transition: background 0.15s;
}

.menu-item i {
    font-size: 1.55rem;
    color: var(--text-secondary);
}

.menu-item:hover i {
    color: #fff;
}

.menu-item:hover {
    background: var(--hover);
    color: #fff;
}

main.container {
    margin-left: 300px;
    width: calc(100% - 300px);
}

body.no-sidebar main.container {
    margin-left: 70px;
    width: calc(100% - 70px);
}

body.no-sidebar main.edit-page {
    margin-left: 0;
    width: 100%;
}

body.no-sidebar main.container.studio-page,
body.no-sidebar main.container.playlist-view-page {
    margin-left: 0;
    width: 100%;
    padding: 0;
}

.channel-banner {
    width: 100%;
    height: 180px;
    background: var(--surface-3);
    border-radius: var(--radius);
    margin-bottom: -3rem;
    position: relative;
    overflow: hidden;
}

.channel-banner-text {
    position: absolute;
    bottom: 1rem;
    left: 1.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.channel-hero.with-banner {
    position: relative;
    z-index: 2;
    margin: 0 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
}

.channel-about,
.featured-playlist {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.channel-about h3,
.featured-playlist h3 {
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
}

.profile-subscribers {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.notification-bell {
    position: relative;
    font-size: 1.7rem;
}
.notification-bell i {
    font-size: 1.7rem !important;
}

.notification-bell .badge {
    position: absolute;
    top: 4px;
    right: 8px;
    background: var(--primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-list {
    max-width: 800px;
}

.notification-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.notification-item.unread {
    border-left: 4px solid var(--primary);
}

.notification-message {
    flex: 1;
    font-weight: 500;
}

.notification-time {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.video-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0.75rem 0 1rem;
}

.video-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-pill {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.15s;
}

.tag-pill:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.share-btn {
    cursor: pointer;
}

.btn-dislike {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 0.65rem 1.1rem;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-dislike:hover,
.btn-dislike.disliked {
    background: var(--surface-3);
    color: #fff;
    border-color: var(--surface-3);
}

.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.modal.open {
    display: flex;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.modal-box {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    width: 90%;
    max-width: 460px;
    z-index: 1;
}

.modal-box h3 {
    margin-bottom: 1rem;
}

.modal-box input,
.modal-box select,
.modal-box textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    box-sizing: border-box;
}
.modal-box input[type="checkbox"] {
    width: auto;
}
.modal-box input[type="file"] {
    padding: 0.4rem;
}
.modal-box input[type="color"] {
    padding: 0.2rem;
    height: 40px;
}
.modal-box .form-group {
    margin-bottom: 1rem;
}
.modal-box .form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}
.modal-box .form-group input,
.modal-box .form-group select,
.modal-box .form-group textarea {
    margin-bottom: 0;
}
.modal-box textarea {
    resize: vertical;
    min-height: 80px;
}
.modal-box .modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}
.modal-box .modal-head h3 {
    margin: 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.modal-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 600px) {
    .modal-form-row {
        grid-template-columns: 1fr;
    }
}
.modal-checkbox-row {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.modal-checkbox-row label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}
.modal-checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.shortcuts-list {
    list-style: none;
    margin: 0.75rem 0;
}

.shortcuts-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.shortcuts-list li:last-child {
    border-bottom: none;
}

.shortcuts-list kbd {
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.15rem 0.5rem;
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--text);
}

.share-timestamp-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
}

.share-timestamp-toggle input {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.share-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1rem;
}

.share-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.9rem;
}

.share-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

.share-tab-panel {
    margin-bottom: 1rem;
}

.share-tab-panel textarea {
    width: 100%;
    font-family: monospace;
    font-size: 0.82rem;
    resize: vertical;
}

.modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.sort-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0 1.25rem;
}

.sort-bar label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.sort-bar select {
    padding: 0.55rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    outline: none;
}

.creator-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.creator-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
    transition: transform 0.15s, background 0.15s;
}

.creator-card:hover {
    background: var(--surface-2);
    transform: translateY(-2px);
}

.creator-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.8rem;
    text-transform: uppercase;
    margin: 0 auto 1rem;
    object-fit: cover;
}

.creator-card h3 {
    margin-bottom: 0.25rem;
}

.creator-bio {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.post-list {
    margin-bottom: 1.5rem;
}

.post-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 0.75rem;
}

.post-card p {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.dashboard .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
    transition: transform 0.15s, background 0.15s;
}

.stat-card:hover {
    background: var(--surface-2);
    transform: translateY(-2px);
}

.stat-label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
}

.stat-value {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
}

.chart-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
}

.chart-card h3 {
    margin-bottom: 1rem;
    font-size: 1.05rem;
    color: var(--text);
}

.chart-card canvas {
    max-height: 280px;
}

@media (min-width: 1024px) {
    .chart-grid {
        grid-template-columns: 1fr 1fr;
    }

    .chart-card.wide {
        grid-column: 1 / -1;
    }

    .dashboard-forms {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        align-items: start;
    }

    .dashboard-table-wrap {
        overflow-x: auto;
    }
}

.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.dashboard-table th,
.dashboard-table td {
    padding: 0.9rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.dashboard-table th {
    background: var(--surface-2);
    color: var(--text);
    font-weight: 600;
}

.dashboard-table tr:last-child td {
    border-bottom: none;
}

.dashboard-table a {
    color: var(--primary);
}

.studio-overview {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.studio-bottom,
.studio-create {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.studio-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.studio-card h3 {
    font-size: 1.05rem;
    margin-bottom: 1rem;
    color: var(--text);
}

.latest-performance .video-thumb {
    height: 180px;
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
}

.latest-performance h4 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.metric-row {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.metric-row strong {
    display: block;
    color: #fff;
    font-size: 1rem;
}

.big-stat {
    margin-bottom: 0.75rem;
}

.big-label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.big-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
}

.summary-row {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.chart-wrap {
    height: 120px;
    margin-bottom: 1rem;
}

.top-content-list {
    list-style: none;
    padding: 0;
}

.top-content-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

.top-content-list li:last-child {
    border-bottom: none;
}

.top-content-list a {
    color: var(--text);
    max-width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-snippet {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.video-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.video-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.row-thumb {
    width: 120px;
    height: 68px;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    flex-shrink: 0;
}

.row-info h4 {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.sub-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sub-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sub-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    object-fit: cover;
}

.sub-info {
    display: flex;
    flex-direction: column;
}

.sub-info a {
    color: var(--text);
}

.analytics-tabs {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
}

.analytics-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.analytics .stat-card.wide {
    grid-column: 1 / -1;
    text-align: left;
}

.analytics .chart-card {
    margin-bottom: 1.5rem;
}

.analytics .chart-card h3 {
    margin-bottom: 1rem;
}

.range-picker {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.range-picker label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.range-picker select {
    padding: 0.55rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    outline: none;
}

.realtime .stat-label {
    color: #4ade80;
}

.activity-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    list-style: none;
    margin-bottom: 1.5rem;
}

.activity-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

.activity-row:last-child {
    border-bottom: none;
}

.activity-icon {
    color: var(--primary);
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

.activity-text {
    flex: 1;
    color: var(--text);
}

.activity-text strong {
    color: #fff;
}

.activity-text em {
    color: var(--text-secondary);
    font-style: normal;
}

.activity-time {
    color: var(--text-secondary);
    font-size: 0.8rem;
    white-space: nowrap;
}

.post-title {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.player-wrap {
    position: relative;
}

.ad-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    display: none;
    flex-direction: column;
    z-index: 10;
}

.ad-label {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    z-index: 11;
}

.ad-video {
    width: 100%;
    height: 100%;
}

.ad-skip {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 12;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
}

.ad-skip:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.custom-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: rgba(0, 0, 0, 0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.control-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: background 0.15s;
}

.control-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.control-time {
    color: #fff;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    min-width: 40px;
}

.progress-wrap {
    flex: 1;
    padding: 0.4rem 0;
    cursor: pointer;
}

.progress-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    width: 0%;
    position: absolute;
    top: 0;
    left: 0;
}

.progress-thumb {
    width: 14px;
    height: 14px;
    background: var(--primary);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    display: none;
}

.chapter-marker {
    position: absolute;
    top: 0;
    width: 3px;
    height: 100%;
    background: #fff;
    transform: translateX(-50%);
    pointer-events: auto;
    cursor: pointer;
    opacity: 0.7;
}

.chapter-marker:hover {
    opacity: 1;
    background: var(--primary);
}

.progress-track:hover .progress-thumb {
    display: block;
}

.volume-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.volume-slider {
    width: 80px;
    accent-color: var(--primary);
}

/* ===== YouTube-style End Screen ===== */
.end-screen {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    z-index: 5;
    opacity: 0;
    animation: endScreenFadeIn 0.3s ease forwards;
}

@keyframes endScreenFadeIn {
    to { opacity: 1; }
}

.end-screen-grid {
    display: flex;
    gap: 1.5rem;
    max-width: 720px;
    width: 100%;
    align-items: stretch;
}

.end-screen-main {
    flex: 1;
    min-width: 0;
}

/* Video card */
.end-screen-video-card {
    display: block;
    text-decoration: none;
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: background 0.2s, transform 0.2s;
    cursor: pointer;
}

.end-screen-video-card:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}

.end-screen-thumb {
    position: relative;
    aspect-ratio: 16/9;
    background: rgba(255,255,255,0.05);
    background-size: cover;
    background-position: center;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.end-screen-thumb-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.end-screen-video-card:hover .end-screen-thumb-overlay {
    opacity: 1;
}

.end-screen-thumb-overlay i {
    font-size: 3rem;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.end-screen-duration {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 0.72rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
}

.end-screen-video-info {
    padding: 0.75rem 1rem;
}

.end-screen-video-info h4 {
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.35;
    margin: 0 0 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.end-screen-label {
    color: rgba(255,255,255,0.6);
    font-size: 0.78rem;
}

/* Side panel */
.end-screen-side {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Subscribe card */
.end-screen-sub-card {
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

.end-screen-sub-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
}

.end-screen-sub-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.end-screen-sub-info strong {
    color: #fff;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    justify-content: center;
}

.end-screen-sub-info span {
    color: rgba(255,255,255,0.5);
    font-size: 0.72rem;
}

.end-screen-sub-btn {
    background: #fff;
    color: #0f0f0f;
    border: none;
    padding: 0.5rem 1.2rem;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
    display: inline-block;
}

.end-screen-sub-btn:hover {
    background: rgba(255,255,255,0.9);
}

/* Action buttons */
.end-screen-action-btns {
    display: flex;
    gap: 0.5rem;
}

.end-screen-action-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 12px;
    padding: 0.75rem 0.5rem;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}

.end-screen-action-btn:hover {
    background: rgba(255,255,255,0.15);
}

.end-screen-action-btn i {
    font-size: 1.3rem;
}

.end-screen-action-btn span {
    font-size: 0.72rem;
}

/* Countdown */
.end-screen-countdown {
    display: none;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
    font-size: 0.88rem;
    background: rgba(255,255,255,0.1);
    padding: 0.5rem 1rem;
    border-radius: 24px;
    margin-top: 0.5rem;
}

.countdown-ring {
    position: relative;
    width: 36px;
    height: 36px;
}

.countdown-ring svg {
    width: 100%;
    height: 100%;
}

#countdownCircle {
    transition: stroke-dashoffset 1s linear;
}

.countdown-ring span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
}

.end-screen-cancel-btn {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: none;
    padding: 0.35rem 0.8rem;
    border-radius: 16px;
    font-size: 0.78rem;
    cursor: pointer;
    display: none;
    transition: background 0.15s;
    font-family: inherit;
}

.end-screen-cancel-btn:hover {
    background: rgba(255,255,255,0.25);
}

/* Responsive */
@media (max-width: 640px) {
    .end-screen-grid {
        flex-direction: column;
    }
    .end-screen-side {
        width: 100%;
        flex-direction: row;
    }
    .end-screen-sub-card {
        flex: 1;
    }
    .end-screen-action-btns {
        flex-direction: column;
        width: 100px;
    }
}

.screen-card {
    position: absolute;
    bottom: 3.5rem;
    left: 1rem;
    background: rgba(24, 24, 24, 0.92);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    display: none;
    align-items: center;
    gap: 0.75rem;
    max-width: 340px;
    z-index: 4;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 0;
    transform: translateY(8px);
}

.screen-card-visible {
    opacity: 1;
    transform: translateY(0);
}

.screen-card-fading {
    opacity: 0;
    transform: translateY(8px);
}

.screen-card-body {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.screen-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    object-fit: cover;
    flex-shrink: 0;
}

.screen-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.screen-info strong {
    color: #fff;
    font-size: 0.95rem;
}

.screen-card-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
}

.preview-tag {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    margin-left: 0.35rem;
    vertical-align: middle;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0 0.25rem;
}

/* Video cards overlay (top-right info boxes during playback) */
.video-cards-overlay {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 4;
    max-width: 260px;
    pointer-events: none;
}

.video-card-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(24, 24, 24, 0.92);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    pointer-events: auto;
    transition: background 0.15s, transform 0.15s;
    animation: cardSlideIn 0.25s ease;
}

.video-card-item:hover {
    background: rgba(40, 40, 40, 0.96);
    transform: translateX(-2px);
}

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

.video-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.video-card-overlay-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    overflow: hidden;
}

.video-card-overlay-body strong {
    font-size: 0.85rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-card-overlay-body .meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* End screen & cards editor sections in edit modal */
.edit-section-divider {
    height: 1px;
    background: var(--border);
    margin: 1.25rem 0 0.75rem;
}

.edit-section-title {
    font-size: 1rem;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.edit-section-hint {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
}

.end-screen-form,
.card-add-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

.cards-editor-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.cards-editor-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.cards-editor-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    overflow: hidden;
}

.cards-editor-info strong {
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cards-editor-info .meta {
    font-size: 0.78rem;
}

.verified-badge {
    color: var(--verified-color);
    font-size: 0.75em;
    vertical-align: middle;
    margin-left: 0.25rem;
}

.admin-panel .admin-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.admin-panel .action-form {
    margin: 0;
}

.admin-panel .dashboard-table td {
    vertical-align: middle;
}

@media (min-width: 1024px) {
    .watch-layout {
        grid-template-columns: 3fr 1fr;
    }

    .studio-overview {
        grid-template-columns: 1fr 1.2fr 0.8fr;
    }

    .studio-bottom,
    .studio-create {
        grid-template-columns: 1.5fr 1fr;
    }
}

.hamburger {
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 1.6rem;
    cursor: pointer;
    display: none;
    margin-right: 0.5rem;
}

.mobile-search-btn {
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 1.4rem;
    cursor: pointer;
    display: none;
    padding: 0.4rem;
}

@media (max-width: 768px) {
    .mobile-search-btn {
        display: inline-flex;
    }

    .header-search {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--surface);
        padding: 0.75rem;
        border-bottom: 1px solid var(--border);
        z-index: 50;
        display: none;
        max-width: none;
    }

    .header-search.mobile-open {
        display: flex;
    }
}

@media (max-width: 768px) {
    .site-header {
        padding: 0 0.75rem;
        gap: 0.5rem;
        height: 56px;
    }

    .hamburger {
        display: inline-flex;
    }

    .side-menu {
        transform: translateX(-100%);
        transition: transform 0.2s;
        position: fixed;
        top: 56px;
        left: 0;
        width: 280px;
        height: calc(100vh - 56px);
        z-index: 90;
        background: var(--surface);
        overflow-y: auto;
        box-shadow: 2px 0 12px rgba(0,0,0,0.2);
    }

    .side-menu.open {
        transform: translateX(0);
    }

    main.container {
        margin-left: 0;
        width: 100%;
        padding: 0 0.75rem;
    }

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

    .watch-layout {
        grid-template-columns: 1fr;
    }

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

    .btn-ghost.icon-only {
        padding: 0.4rem;
    }

    .btn-ghost:not(.icon-only) span {
        display: none;
    }

    .upload-btn-text {
        display: none;
    }

    .video-card .thumbnail-wrap {
        aspect-ratio: 16 / 9;
    }

    .video-info h3 {
        font-size: 0.9rem;
    }

    .comment-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .comment-avatar {
        width: 32px;
        height: 32px;
    }

    .channel-hero {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .channel-avatar {
        width: 80px;
        height: 80px;
    }

    .channel-stats {
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
    }

    .form-card {
        padding: 1rem;
    }

    .modal-content {
        margin: 0.5rem;
        max-height: 95vh;
        overflow-y: auto;
    }

    .analytics-grid {
        grid-template-columns: 1fr !important;
    }

    .analytics-chart {
        min-width: 0;
    }

    .studio-tabs {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .studio-tab {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }

    .search-box {
        height: 38px;
    }

    .notification-item {
        padding: 0.75rem;
    }

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

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

    .footer-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .site-header {
        padding: 0 0.5rem;
    }

    .logo-text {
        display: none;
    }

    .video-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .video-card {
        margin-bottom: 0;
    }

    .video-card .thumbnail-wrap {
        aspect-ratio: 16 / 9;
    }

    .video-info {
        padding: 0.5rem 0;
    }

    .video-info h3 {
        font-size: 0.85rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .video-info .meta {
        font-size: 0.75rem;
    }

    .upload-steps {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.75rem;
    }

    .upload-step {
        flex-shrink: 0;
    }

    .upload-step .step-label {
        font-size: 0.72rem;
    }

    .form-card input,
    .form-card textarea,
    .form-card select {
        font-size: 16px;
    }

    .btn {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }

    .modal-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-actions .btn {
        width: 100%;
        text-align: center;
    }

    .comment-actions {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .watch-info h1 {
        font-size: 1.1rem;
    }

    .watch-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .channel-actions {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }

    .channel-actions .btn {
        width: 100%;
        text-align: center;
    }

    .admin-stat-grid {
        grid-template-columns: 1fr !important;
    }

    .admin-table-wrap {
        overflow-x: auto;
    }

    .admin-table {
        min-width: 500px;
    }

    .content-review-card {
        flex-direction: column;
    }

    .content-review-thumb {
        width: 100%;
        min-width: 0;
    }

    .content-review-actions {
        flex-direction: row;
    }

    .review-meta-grid {
        grid-template-columns: 1fr;
    }
}

/* Player toolbar: speed, PiP, theater mode, autoplay */
.player-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.25rem 0;
}

/* Light theme: white toolbar with dark icons */
html[data-theme="light"] .player-toolbar {
    background: #ffffff;
    border-radius: 0;
    padding: 0.5rem 0.75rem;
    margin-top: 0;
    border: none;
}

html[data-theme="light"] .player-toolbar .btn-ghost,
html[data-theme="light"] .player-toolbar .btn-ghost.icon-only {
    color: #0f0f0f;
    background: transparent;
}

html[data-theme="light"] .player-toolbar .btn-ghost:hover {
    background: #f2f2f2;
}

html[data-theme="light"] .player-toolbar .quality-select {
    background: #f2f2f2;
    color: #0f0f0f;
    border: 1px solid var(--border);
}

html[data-theme="light"] .player-toolbar .autoplay-toggle {
    color: #606060;
}

html[data-theme="light"] .player-toolbar .speed-menu {
    background: #ffffff;
    border: 1px solid var(--border);
    color: #0f0f0f;
}

html[data-theme="light"] .player-toolbar .speed-option {
    color: #0f0f0f;
}

html[data-theme="light"] .player-toolbar .speed-option:hover {
    background: #f2f2f2;
}

/* Light theme: custom controls bar (progress bar area) */
html[data-theme="light"] .custom-controls {
    background: #ffffff;
    border-top: 1px solid var(--border);
}

html[data-theme="light"] .control-btn {
    color: #0f0f0f;
}

html[data-theme="light"] .control-btn:hover {
    background: #f2f2f2;
}

html[data-theme="light"] .control-time {
    color: #0f0f0f;
}

html[data-theme="light"] .progress-track {
    background: rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .chapter-marker {
    background: #0f0f0f;
}

.speed-control {
    position: relative;
}

.quality-control {
    display: flex;
    align-items: center;
}

.quality-select {
    background: var(--surface-3);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.speed-menu {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 0.4rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    display: none;
    flex-direction: column;
    min-width: 90px;
    z-index: 10;
    overflow: hidden;
}

.speed-menu.open {
    display: flex;
}

.speed-option {
    background: transparent;
    border: none;
    color: var(--text);
    padding: 0.6rem 0.9rem;
    text-align: left;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
}

.speed-option:hover {
    background: var(--hover);
}

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

.autoplay-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    font-size: 0.9rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.autoplay-toggle input {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Theater mode */
.watch-page.theater-mode .watch-layout {
    grid-template-columns: 1fr;
}

.watch-page.theater-mode .sidebar {
    display: none;
}

.watch-page.theater-mode .video-player {
    max-height: 80vh;
}

/* Chapters */
.chapters-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.chapters-box h4 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.chapter-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text);
    padding: 0.5rem 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 0.9rem;
}

.chapter-item:hover {
    color: var(--primary);
}

.chapter-time {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.chapter-item:hover .chapter-time {
    color: var(--primary);
}

.chapter-item.active {
    color: var(--primary);
    font-weight: 600;
}

.chapter-item.active .chapter-time {
    color: var(--primary);
}

.chapter-item.active::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 1.1em;
    background: var(--primary);
    border-radius: 2px;
    margin-right: -0.25rem;
    flex-shrink: 0;
}

/* Chapter editor in edit modal */
.chapter-editor {
    margin-bottom: 1rem;
}

.chapter-editor-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.chapter-editor-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.chapter-time-input {
    width: 80px;
    flex-shrink: 0;
}

.chapter-title-input {
    flex: 1;
}

/* Comment report button */
.comment-report-form {
    display: inline-block;
    margin: 0.35rem 0 0;
}

.comment-report-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
}

.comment-report-btn:hover {
    color: var(--primary);
}

.pinned-comment {
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: 1rem;
    border: 1px solid var(--border);
}

.pinned-badge,
.edited-badge {
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 600;
}

.pinned-badge {
    margin-left: 0.5rem;
}

.comment-heart-badge {
    display: inline-flex;
    align-items: center;
    position: relative;
    margin-top: 0.35rem;
}

.comment-heart-badge i.bxs-heart {
    color: #ef4444;
    font-size: 1.4rem;
    position: relative;
    z-index: 1;
}

.comment-heart-badge img,
.comment-heart-badge .heart-avatar-initial {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    margin-left: -8px;
    border: 2px solid var(--surface);
    position: relative;
    z-index: 2;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
}

.comment-actions .btn.hearted,
.comment-actions .btn.hearted i {
    color: #ef4444;
}

.hearted-badge {
    color: #ef4444;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

.studio-comment-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.studio-comment-actions .action-form {
    display: inline-flex;
    margin: 0;
}

.studio-comment-actions .hearted,
.studio-comment-actions .hearted i {
    color: #ef4444;
}

.comment-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    margin-top: 0.5rem;
}

.comment-actions .action-form,
.comment-actions > .btn {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

.comment-actions .btn,
.comment-stat {
    font-size: 0.8rem;
    padding: 0.1rem 0.4rem;
    color: var(--text-secondary);
    gap: 0.25rem;
}

.comment-actions .btn i {
    font-size: 1rem;
}

.comment-actions .btn:hover,
.comment-actions .btn.liked,
.comment-actions .btn.disliked,
.comment-actions .btn.reposted,
.comment-actions .btn.pinned,
.comment-stat .bx-like,
.comment-stat .bx-dislike,
.comment-stat .bx-repost {
    color: var(--primary);
}

.comment-stat {
    font-size: 0.85rem;
}

.reply-form {
    display: none;
    margin-top: 0.75rem;
}

.reply-form.open {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.reply-form textarea {
    flex: 1;
    min-width: 160px;
    height: 40px;
    min-height: 40px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 0.5rem;
    resize: none;
    overflow-y: auto;
}

.reply-form .btn-primary {
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
}

.replies {
    margin-top: 0.75rem;
    padding-left: 1rem;
    border-left: 2px solid var(--border);
}

.reply {
    display: flex;
    gap: 0.65rem;
    padding: 0.5rem 0;
}

.reply-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    flex-shrink: 0;
    overflow: hidden;
    text-decoration: none;
}

.reply-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reply-content {
    flex: 1;
}

.reply-author {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.15rem;
}

.reply-author a {
    color: var(--text);
    text-decoration: none;
}

.reply-body {
    color: var(--text);
    font-size: 0.9rem;
}

/* Search autocomplete */
.header-search {
    position: relative;
}

.search-suggestions {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 50;
}

.search-suggestions.open {
    display: flex;
}

.search-suggestion-item {
    display: block;
    padding: 0.65rem 1rem;
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
}

.search-suggestion-item:hover {
    background: var(--hover);
}

/* Post likes */
.post-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.post-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
}

.post-like-btn.liked {
    color: var(--primary);
}

.post-like-btn:hover {
    color: var(--primary);
}

/* Privacy select in upload form */
.privacy-select {
    width: 100%;
    padding: 0.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    margin-bottom: 0.75rem;
}

.channel-page {
    padding-top: 0;
}

.channel-banner {
    position: relative;
    height: 220px;
    background: linear-gradient(135deg, var(--channel-primary, var(--primary)) 0%, #1a1a2e 100%);
    background-size: cover;
    background-position: center;
    border-radius: 0 0 var(--radius) var(--radius);
    overflow: hidden;
}

.channel-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%);
}

.channel-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 1.25rem;
    padding: 0 1.5rem;
    margin-top: -60px;
}

.channel-hero.with-banner {
    margin-top: -60px;
}

.channel-avatar-wrap {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--surface);
    background: var(--surface-3);
    box-shadow: var(--card-shadow);
    align-self: center;
    margin-top: -30px;
}

.channel-avatar-wrap .channel-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text);
    background: var(--surface-3);
}

.channel-info {
    flex: 1;
    padding-bottom: 0.5rem;
}

.channel-name-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.channel-name {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text);
    margin: 0;
}

.channel-handle {
    color: var(--text-secondary);
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
}

.channel-bio {
    max-width: 600px;
    color: var(--text-secondary);
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.btn.btn-subscribe,
.btn.btn-primary {
    margin-top: 0.75rem;
    border-radius: 999px;
    padding: 0.55rem 1.25rem;
    font-weight: 700;
}

.btn.btn-subscribe {
    background: var(--channel-primary, var(--primary));
    color: #fff;
    border: none;
}

.btn.btn-subscribe.subscribed {
    background: var(--surface-3);
    color: var(--text);
}

.channel-tabs {
    display: flex;
    gap: 0.5rem;
    padding: 1.5rem 1.5rem 0;
    border-bottom: 1px solid var(--border);
    margin-top: 1.5rem;
}

.channel-tab {
    padding: 0.6rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.channel-tab:hover,
.channel-tab.active {
    color: var(--channel-primary, var(--primary));
    border-bottom-color: var(--channel-primary, var(--primary));
}

.channel-section {
    display: none;
    padding: 1.5rem;
}

.channel-section.active {
    display: block;
}

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

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

.channel-playlist-grid .playlist-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    text-decoration: none;
    color: var(--text);
    transition: transform 0.15s, box-shadow 0.15s;
}

.channel-playlist-grid .playlist-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.channel-playlist-grid .playlist-card h4 {
    margin: 0 0 0.3rem;
    font-size: 1rem;
}

.channel-about-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-top: 1rem;
}

.channel-bio-text {
    color: var(--text);
    line-height: 1.6;
    margin: 0 0 1.25rem;
}

.channel-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}

.channel-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}

.channel-stat .stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--channel-primary, var(--primary));
}

.channel-stat .stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

.customisation-view {
    max-width: none;
    width: 100%;
}

.customisation-form label {
    display: block;
    margin: 1rem 0 0.35rem;
    font-weight: 600;
    color: var(--text);
}

.customisation-form input[type="file"],
.customisation-form input[type="color"],
.customisation-form textarea {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 0.65rem;
}

.customisation-form textarea {
    resize: vertical;
}

.customisation-preview {
    position: relative;
    margin-bottom: 1rem;
}

.cover-preview {
    width: 100%;
    height: 160px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--primary) 0%, #1a1a2e 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    font-weight: 600;
}

.avatar-preview-wrap {
    position: absolute;
    bottom: -40px;
    left: 1.5rem;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--surface);
    background: var(--surface-3);
    box-shadow: var(--card-shadow);
}

.avatar-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
}

.color-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.color-row input[type="color"] {
    width: 60px;
    height: 40px;
    padding: 0;
    border: none;
    cursor: pointer;
}

.color-value {
    color: var(--text-secondary);
    font-family: monospace;
    font-size: 0.95rem;
}

.watch-page .channel-row {
    padding: 0.6rem 0.75rem;
}

.watch-page .channel-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
}

.watch-page .channel-name strong {
    font-size: 0.95rem;
    line-height: 1.2;
}

.watch-page .channel-name a {
    color: var(--text);
    text-decoration: none;
}

.watch-page .channel-name a:hover {
    color: var(--primary);
}

.watch-page .channel-name span {
    font-size: 0.78rem;
}

.channel-name-wrap .verified-badge {
    font-size: 1rem;
    color: var(--verified-color);
    margin-top: 0;
    vertical-align: middle;
}

.watch-page .channel-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
}

.watch-channel-name {
    margin: 0.25rem 0 0.75rem;
    font-size: 0.95rem;
}

.watch-channel-name a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
}

.watch-channel-name a:hover {
    color: var(--primary);
}

.watch-channel-name .verified-badge {
    font-size: 0.9rem;
    color: var(--verified-color);
    margin-left: 0.15rem;
    vertical-align: middle;
}

.channel-card-channel {
    margin: 0.15rem 0 0.3rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.channel-card-channel .verified-badge {
    font-size: 0.85rem;
    color: var(--verified-color);
    margin-top: 0.05rem;
}

.channel-name-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    flex-wrap: wrap;
}

.channel-name-wrap .verified-badge {
    font-size: 1.05rem;
    color: var(--verified-color);
    margin-top: 0.15rem;
}

.watch-page .channel-name span {
    margin-top: 0.05rem;
    line-height: 1.15;
}

.playlist-tile {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
}

.playlist-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.playlist-tile-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
}

.playlist-tile-count {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.playlist-tile-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.15s;
}

.playlist-tile:hover .playlist-tile-overlay {
    opacity: 1;
}

.playlist-tile-body {
    padding: 0.8rem;
}

.playlist-tile-body h4 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
}

.playlist-tile-desc {
    margin: 0 0 0.3rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.community-composer {
    display: flex;
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.composer-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    object-fit: cover;
    flex-shrink: 0;
}

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

.composer-form textarea {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 0.65rem;
    resize: vertical;
}

.composer-form .btn {
    align-self: flex-end;
}

.community-post {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
}

.community-post-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.community-post-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    object-fit: cover;
}

.community-post-author {
    display: block;
    font-weight: 600;
    color: var(--text);
}

.community-post-author .verified-badge {
    font-size: 0.85rem;
    color: var(--verified-color);
    margin-left: 0.15rem;
}

.community-post-body {
    margin: 0 0 0.6rem;
    line-height: 1.5;
    color: var(--text);
}

.channel-about-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.25rem;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .channel-about-grid {
        grid-template-columns: 1fr;
    }
}

.about-card-title {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.about-stat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.about-stat-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    font-size: 0.92rem;
}

.about-stat-list li:last-child {
    border-bottom: none;
}

.about-stat-list li i {
    color: var(--channel-primary, var(--primary));
}

.composer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.composer-tools {
    display: flex;
    gap: 0.25rem;
}

.composer-tool {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background 0.15s, color 0.15s;
}

.composer-tool:hover {
    background: var(--surface-3);
    color: var(--channel-primary, var(--primary));
}

.composer-attach-preview {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.composer-attach-preview img {
    max-height: 80px;
    border-radius: 4px;
    object-fit: cover;
}

.attach-file-chip {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--text);
}

.attach-remove {
    background: var(--surface-3);
    border: none;
    color: var(--text);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.emoji-picker {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 0.2rem;
    padding: 0.6rem;
    margin-top: 0.5rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    max-height: 200px;
    overflow-y: auto;
}

.emoji-item {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.3rem;
    padding: 0.2rem;
    border-radius: 4px;
    transition: background 0.1s;
}

.emoji-item:hover {
    background: var(--surface-3);
}

.community-post-image-wrap {
    display: block;
    margin: 0 0 0.6rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.community-post-image {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    display: block;
    transition: transform 0.2s;
}

.community-post-image-wrap:hover .community-post-image {
    transform: scale(1.01);
}

.community-post-file {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin: 0 0 0.6rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text);
    font-size: 0.9rem;
    transition: background 0.15s;
}

.community-post-file:hover {
    background: var(--surface-3);
}

.community-post-file i:first-child {
    font-size: 1.3rem;
    color: var(--channel-primary, var(--primary));
}

.community-post-file span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-post-file i:last-child {
    color: var(--text-secondary);
}

.channel-video-grid .video-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
}

.channel-video-grid .video-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.25);
}

.channel-video-grid .video-thumb {
    aspect-ratio: 16 / 9;
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    position: relative;
}

.channel-video-grid .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, transform 0.15s;
}

.channel-video-grid .play-icon::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 14px solid #fff;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    margin-left: 4px;
}

.channel-video-grid .video-card:hover .play-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.channel-video-grid .video-info {
    padding: 0.75rem;
}

.channel-video-grid .video-info h3 {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.channel-video-grid .video-info .meta {
    font-size: 0.8rem;
    margin: 0;
}

.home-community-section {
    margin-top: 2rem;
}

.home-post-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.home-post-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.home-post-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.home-post-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    object-fit: cover;
    flex-shrink: 0;
}

.home-post-meta {
    display: flex;
    flex-direction: column;
}

.home-post-author {
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}

.home-post-author:hover {
    color: var(--primary);
}

.home-post-author .verified-badge {
    font-size: 0.85rem;
    color: var(--verified-color);
    margin-left: 0.15rem;
}

.home-post-body {
    margin: 0 0 0.6rem;
    line-height: 1.5;
    color: var(--text);
    font-size: 0.92rem;
}

.home-post-image-wrap {
    display: block;
    margin: 0 0 0.6rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.home-post-image {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
}

.home-post-file {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    margin: 0 0 0.6rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text);
    font-size: 0.85rem;
}

.home-post-file:hover {
    background: var(--surface-3);
}

.home-post-file i:first-child {
    font-size: 1.2rem;
    color: var(--primary);
}

.home-post-file span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-post-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
}

.profile-page {
    padding-top: 0;
}

.profile-banner {
    position: relative;
    height: 240px;
    background: linear-gradient(135deg, var(--primary) 0%, #1a1a2e 100%);
    background-size: cover;
    background-position: center;
    border-radius: 0 0 var(--radius) var(--radius);
    overflow: hidden;
}

.profile-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
}

.banner-upload-form {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 2;
}

.banner-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    cursor: pointer;
    font-size: 1.2rem;
    transition: background 0.15s;
}

.banner-upload-btn:hover {
    background: rgba(0,0,0,0.85);
}

.profile-hero {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    padding: 0 1.5rem;
    margin-top: -60px;
    position: relative;
}

.profile-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.profile-avatar {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    border: 4px solid var(--surface);
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    color: var(--text);
    object-fit: cover;
    box-shadow: var(--card-shadow);
}

.avatar-upload-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    border: 3px solid var(--surface);
    transition: background 0.15s;
}

.avatar-upload-btn:hover {
    background: var(--primary-2);
}

.profile-info {
    flex: 1;
    padding-bottom: 0.5rem;
}

.profile-name-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.profile-name-wrap .verified-badge {
    font-size: 1.1rem;
    color: var(--verified-color);
}

.profile-name {
    font-size: 2rem;
    font-weight: 800;
    margin: 0;
}

.profile-handle {
    color: var(--text-secondary);
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
}

.profile-bio {
    max-width: 600px;
    color: var(--text-secondary);
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.profile-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.profile-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.profile-stat-pill i {
    color: var(--primary);
}

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

.profile-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1.5rem 1.5rem 0;
    border-bottom: 1px solid var(--border);
    margin-top: 1.5rem;
}

.profile-tab {
    padding: 0.6rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.profile-tab:hover,
.profile-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.profile-section {
    display: none;
    padding: 1.5rem;
}

.profile-section.active {
    display: block;
}

.profile-form-card {
    max-width: 600px;
}

.form-card-title {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    .profile-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .profile-stats-row {
        justify-content: center;
    }
    .profile-actions {
        justify-content: center;
    }
}

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

.subscription-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text);
    transition: background 0.15s, transform 0.15s;
}

.subscription-card:hover {
    background: var(--surface-2);
    transform: translateY(-1px);
}

.subscription-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    object-fit: cover;
    flex-shrink: 0;
}

.subscription-name {
    font-weight: 600;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.danger-zone {
    border-color: #ef4444;
}

.danger-zone .btn-dislike {
    background: #ef4444;
    color: #fff;
    border: none;
}

.danger-zone .btn-dislike:hover {
    background: #dc2626;
}

.customisation-profile-header {
    margin-bottom: 1.5rem;
}

.customisation-banner {
    height: 160px;
    background: linear-gradient(135deg, var(--primary) 0%, #1a1a2e 100%);
    background-size: cover;
    background-position: center;
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
}

.customisation-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%);
}

.customisation-hero {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    padding: 0 1rem;
    margin-top: -40px;
    position: relative;
}

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

.customisation-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--surface);
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
    object-fit: cover;
}

.customisation-hero-info {
    flex: 1;
    padding-bottom: 0.5rem;
}

.customisation-name-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.customisation-name-wrap h3 {
    margin: 0;
    font-size: 1.3rem;
}

.customisation-name-wrap .verified-badge {
    font-size: 1rem;
    color: var(--verified-color);
}

.customisation-stat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0;
}

.customisation-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}

.custom-tab {
    padding: 0.55rem 0.9rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.custom-tab:hover,
.custom-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.custom-section {
    display: none;
}

.custom-section.active {
    display: block;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.dash-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.dash-welcome {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
}

.dash-subtitle {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.dash-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dash-stat-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: transform 0.15s, box-shadow 0.15s;
}

.dash-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.dash-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.dash-stat-body {
    display: flex;
    flex-direction: column;
}

.dash-stat-value {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.1;
}

.dash-stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.dash-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.8fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
    .dash-grid {
        grid-template-columns: 1fr;
    }
}

.dash-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.dash-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.dash-card-head h3 {
    margin: 0;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dash-card-head h3 i {
    color: var(--primary);
}

.dash-card-link {
    font-size: 0.82rem;
    color: var(--primary);
    text-decoration: none;
}

.dash-card-link:hover {
    text-decoration: underline;
}

.dash-latest-thumb {
    display: block;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.dash-latest-thumb .video-thumb {
    aspect-ratio: 16 / 9;
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    position: relative;
}

.dash-latest-title {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    line-height: 1.3;
}

.dash-metric-row {
    display: flex;
    gap: 0;
    margin-top: 0.75rem;
    flex-wrap: nowrap;
}

.dash-metric {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.5rem 0.25rem;
    border-right: 1px solid var(--border);
}

.dash-metric:last-child {
    border-right: none;
}

.dash-metric i {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.dash-metric strong {
    font-size: 1.1rem;
}

.dash-metric span {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.dash-empty {
    text-align: center;
    padding: 1.5rem 0;
}

.dash-empty i {
    font-size: 2.5rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.dash-empty p {
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
}

.dash-top-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dash-top-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: background 0.15s, transform 0.15s;
}

.dash-top-item:hover {
    background: var(--surface-2);
    transform: translateX(2px);
}

.dash-top-rank {
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    flex-shrink: 0;
}

.dash-top-thumb {
    width: 72px;
    height: 44px;
    border-radius: 6px;
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    transition: border-radius 0.15s;
}

.dash-top-item:hover .dash-top-thumb {
    border-radius: 8px;
}

.dash-top-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.dash-top-title {
    color: var(--text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.dash-top-title:hover {
    color: var(--primary);
}

.dash-top-info .meta {
    font-size: 0.75rem;
    margin: 0;
}

.dash-sub-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dash-sub-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.dash-sub-row:hover {
    background: var(--surface-2);
}

.dash-sub-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border);
}

.dash-sub-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.dash-sub-info a {
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1.2;
}

.dash-sub-info a:hover {
    color: var(--primary);
}

.dash-sub-info .meta {
    font-size: 0.75rem;
    margin: 0;
}

.dash-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
}

.dash-quick-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.1rem 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    transition: transform 0.15s, background 0.15s, color 0.15s;
}

.dash-quick-card:hover {
    transform: translateY(-2px);
    background: var(--surface-2);
    color: var(--primary);
}

.dash-quick-card i {
    font-size: 1.5rem;
}

.dash-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.dash-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 50%, #1a1a2e 100%);
    z-index: 0;
}

.dash-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 50%, rgba(255,255,255,0.08) 0%, transparent 50%);
}

.dash-hero-info {
    position: relative;
    z-index: 1;
}

.dash-welcome {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 800;
    color: #fff;
}

.dash-subtitle {
    margin: 0.3rem 0 0;
    color: rgba(255,255,255,0.8);
    font-size: 0.95rem;
}

.dash-upload-btn {
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
}

.dash-upload-btn:hover {
    background: rgba(255,255,255,0.3);
}

.dash-stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.72rem;
    margin-top: 0.2rem;
}

.dash-stat-trend.up {
    color: #22c55e;
}

.dash-chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.dash-chart-total {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.dash-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 120px;
    margin-top: 1rem;
    padding-top: 0.5rem;
}

.dash-chart-bar {
    flex: 1;
    min-width: 8px;
    background: linear-gradient(to top, var(--primary) 0%, rgba(249, 115, 22,0.4) 100%);
    border-radius: 4px 4px 0 0;
    position: relative;
    transition: opacity 0.15s, transform 0.15s;
    cursor: pointer;
}

.dash-chart-bar:hover {
    opacity: 0.8;
    transform: scaleY(1.02);
    transform-origin: bottom;
}

.dash-chart-bar-value {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: var(--text-secondary);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s;
}

.dash-chart-bar:hover .dash-chart-bar-value {
    opacity: 1;
}

.dash-stat-card {
    position: relative;
    overflow: hidden;
}

.dash-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    opacity: 0;
    transition: opacity 0.2s;
}

.dash-stat-card:hover::before {
    opacity: 1;
}

.dash-quick-card {
    position: relative;
    overflow: hidden;
}

.dash-quick-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary);
    transform: scaleX(0);
    transition: transform 0.2s;
}

.dash-quick-card:hover::after {
    transform: scaleX(1);
}

.dash-line-chart {
    margin-top: 1rem;
}

.dash-line-svg {
    width: 100%;
    height: 140px;
    display: block;
    overflow: visible;
}

.dash-line-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.4rem;
}

.dash-line-label {
    font-size: 0.65rem;
    color: var(--text-secondary);
    flex: 1;
    text-align: center;
}

.dash-line-xlabels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px solid var(--border);
}

.dash-line-xlabel {
    font-size: 0.68rem;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}

.detection-view {
    padding: 0 0.5rem;
}

.detection-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    padding: 1.75rem 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.detection-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    z-index: 0;
}

.detection-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 50%);
}

.detection-hero-info {
    position: relative;
    z-index: 1;
}

.detection-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detection-title i {
    color: #fff;
}

.detection-subtitle {
    margin: 0.3rem 0 0;
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
}

.detection-scan-form {
    position: relative;
    z-index: 1;
}

.detection-scan-btn {
    background: #fff;
    border: none;
    padding: 0.7rem 1.4rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a2e;
}

.detection-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.detection-stat-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    border-left: 4px solid var(--border);
    transition: transform 0.15s, box-shadow 0.15s;
}

.detection-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.detection-stat-card.has-issues {
    border-left-color: #fff;
}

.detection-stat-card.has-reports {
    border-left-color: #fff;
}

.detection-stat-card.warn {
    border-left-color: #fff;
}

.detection-stat-card.clean {
    border-left-color: #22c55e;
}

.detection-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.has-issues .detection-stat-icon { background: rgba(255,255,255,0.12); color: #fff; }
.has-reports .detection-stat-icon { background: rgba(255,255,255,0.12); color: #fff; }
.warn .detection-stat-icon { background: rgba(255,255,255,0.12); color: #fff; }
.clean .detection-stat-icon { background: rgba(34,197,94,0.15); color: #22c55e; }

.detection-stat-body {
    display: flex;
    flex-direction: column;
}

.detection-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
}

.detection-stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.detection-section {
    margin-bottom: 2rem;
}

.detection-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.detection-section-head h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.detection-section-head h3 i {
    color: #fff;
}

.detection-count {
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    background: var(--surface-2);
    border-radius: 999px;
}

.detection-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detection-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    transition: border-color 0.15s, transform 0.15s;
}

.detection-card:hover {
    border-color: rgba(255,255,255,0.3);
    transform: translateY(-1px);
}

.detection-card-videos {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.detection-video {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.detection-video-thumb {
    width: 64px;
    height: 40px;
    border-radius: 6px;
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.detection-video-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.detection-video-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detection-video-title:hover {
    color: var(--primary);
}

.detection-video-info .meta {
    font-size: 0.72rem;
    margin: 0;
}

.detection-vs {
    color: var(--text-secondary);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.detection-card-meta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.detection-match-type {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.detection-match-type i {
    color: #fff;
}

.detection-confidence {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detection-confidence-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.detection-confidence-bar {
    width: 80px;
    height: 8px;
    background: var(--surface-3);
    border-radius: 4px;
    overflow: hidden;
}

.detection-confidence-bar span {
    display: block;
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s;
}

.detection-confidence-value {
    font-size: 0.82rem;
    font-weight: 700;
}

.detection-time {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.status-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.status-badge.pending {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

.status-badge.resolved {
    background: rgba(34,197,94,0.15);
    color: #22c55e;
}

.status-badge.flagged {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

.status-badge.dismissed {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
}

.detection-empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}

.detection-empty-state i {
    font-size: 3rem;
    color: #22c55e;
    margin-bottom: 0.5rem;
}

.detection-empty-state h4 {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
}

.detection-empty-state p {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.9rem;
}

.detection-report-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detection-report-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid #fff;
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    transition: border-color 0.15s;
}

.detection-report-card:hover {
    border-color: var(--border);
    border-left-color: #fff;
}

.detection-report-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.detection-report-thumb {
    width: 56px;
    height: 36px;
    border-radius: 6px;
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.detection-report-info {
    flex: 1;
    min-width: 0;
}

.detection-report-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0.25rem;
}

.detection-report-title:hover {
    color: var(--primary);
}

.detection-report-tags {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.detection-report-type {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0.15rem 0.5rem;
    background: var(--surface-2);
    border-radius: 999px;
}

.detection-report-reason {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 0.6rem;
    line-height: 1.4;
}

.detection-report-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detection-action-form select {
    padding: 0.4rem 0.65rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
}

.detection-action-form select:hover {
    border-color: var(--primary);
}

.detection-action-done {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #22c55e;
}

.detection-action-done i {
    font-size: 1.1rem;
}

.detection-video-scan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.detection-scan-card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.detection-scan-card:hover {
    background: var(--surface-2);
}

.detection-scan-thumb {
    width: 56px;
    height: 36px;
    border-radius: 6px;
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.detection-scan-info {
    flex: 1;
    min-width: 0;
}

.detection-scan-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detection-scan-title:hover {
    color: var(--primary);
}

.detection-scan-btn-sm {
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .detection-card-videos {
        flex-direction: column;
        align-items: flex-start;
    }
    .detection-vs {
        transform: rotate(90deg);
    }
}

.earn-view {
    padding: 0 0.5rem;
}

.earn-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    padding: 1.75rem 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.earn-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    z-index: 0;
}

.earn-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 50%, rgba(255,255,255,0.08) 0%, transparent 50%);
}

.earn-hero-info {
    position: relative;
    z-index: 1;
}

.earn-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.earn-title i {
    color: #fff;
}

.earn-subtitle {
    margin: 0.3rem 0 0;
    color: rgba(255,255,255,0.75);
    font-size: 0.9rem;
}

.earn-hero-badge {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
}

.earn-hero-badge.approved {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
}

.earn-hero-badge.pending {
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.2);
}

.earn-range-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.earn-range-tab {
    padding: 0.55rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    border-bottom: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.earn-range-tab:hover {
    color: var(--text);
}

.earn-range-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.earn-revenue-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.earn-rev-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: transform 0.15s, box-shadow 0.15s;
}

.earn-rev-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.earn-rev-card.primary {
    border-left: 4px solid #fff;
}

.earn-rev-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    background: rgba(255,255,255,0.12);
    color: #fff;
    flex-shrink: 0;
}

.earn-rev-body {
    display: flex;
    flex-direction: column;
}

.earn-rev-value {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
}

.earn-rev-label {
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.earn-rev-hint {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.earn-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 1.25rem;
}

@media (max-width: 900px) {
    .earn-grid {
        grid-template-columns: 1fr;
    }
}

.earn-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: border-color 0.15s;
}

.earn-panel:hover {
    border-color: rgba(255,255,255,0.2);
}

.earn-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.earn-panel-head h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.earn-panel-head h3 i {
    color: #fff;
}

.earn-range-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    background: var(--surface-2);
    border-radius: 999px;
}

.earn-sources {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.earn-sources li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--text);
}

.earn-sources li i {
    color: #fff;
    font-size: 1.1rem;
}

.earn-formula {
    padding: 0.75rem 1rem;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.earn-formula span {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.earn-formula code {
    font-size: 0.85rem;
    color: #fff;
    font-weight: 700;
}

.earn-top-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.earn-top-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.4rem 0;
}

.earn-top-rank {
    font-size: 0.8rem;
    font-weight: 800;
    color: #1a1a2e;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
}

.earn-top-thumb {
    width: 56px;
    height: 36px;
    border-radius: 6px;
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.earn-top-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.earn-top-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.earn-top-title:hover {
    color: #fff;
}

.earn-top-bar-bg {
    height: 6px;
    background: var(--surface-3);
    border-radius: 3px;
    overflow: hidden;
}

.earn-top-bar {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #fff, #e5e7eb);
    border-radius: 3px;
    transition: width 0.3s;
}

.earn-top-numbers {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.earn-top-rev {
    font-size: 0.9rem;
    font-weight: 800;
    color: #fff;
}

.earn-top-views {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.earn-eligibility {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 900px) {
    .earn-eligibility {
        grid-template-columns: 1fr;
    }
}

.earn-eligibility-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.earn-eligibility-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.earn-eligibility-head h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.earn-eligibility-head h3 i {
    color: var(--primary);
}

.earn-eligibility-status {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

.earn-eligibility-status.qualified {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

.earn-eligibility-status.not-qualified {
    background: rgba(234,179,8,0.15);
    color: #eab308;
}

.earn-progress-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.earn-progress-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    align-items: center;
}

.earn-progress-head {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.earn-progress-name {
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.earn-progress-name i {
    color: var(--primary);
}

.earn-progress-value {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.earn-progress-bar {
    grid-column: 1;
    height: 10px;
    background: var(--surface-3);
    border-radius: 6px;
    overflow: hidden;
}

.earn-progress-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-2));
    border-radius: 6px;
    transition: width 0.3s;
}

.earn-progress-pct {
    grid-column: 2;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    min-width: 45px;
    text-align: right;
}

.earn-apply-box {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius);
    text-align: center;
}

.earn-apply-box p {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.earn-apply-btn {
    background: #fff;
    border: none;
    color: #1a1a2e;
}

.earn-apply-btn:hover {
    background: #e5e7eb;
}

.earn-pending-box {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: rgba(234,179,8,0.08);
    border: 1px solid rgba(234,179,8,0.2);
    border-radius: var(--radius);
    text-align: center;
}

.earn-pending-box i {
    font-size: 1.5rem;
    color: #eab308;
    margin-bottom: 0.25rem;
}

.earn-pending-box p {
    margin: 0;
    color: #eab308;
    font-weight: 600;
}

.earn-rejected-box {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: var(--radius);
    text-align: center;
}

.earn-rejected-box i {
    font-size: 1.5rem;
    color: #ef4444;
    margin-bottom: 0.25rem;
}

.earn-rejected-box p {
    margin: 0 0 0.75rem;
    color: #ef4444;
    font-weight: 600;
}

.earn-not-qualified {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--surface-2);
    border-radius: var(--radius);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.earn-not-qualified i {
    color: var(--text-secondary);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.earn-not-qualified p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.earn-eligibility-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.earn-info-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.earn-info-card h4 {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.earn-info-card h4 i {
    color: #fff;
}

.earn-estimate-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.earn-estimate-card h4 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.earn-estimate-card h4 i {
    color: #fff;
}

.earn-est-label {
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.earn-est-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.earn-est-grid div {
    display: flex;
    flex-direction: column;
}

.earn-est-grid strong {
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
}

.earn-est-grid span {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.profile-dropdown {
    position: relative;
}

.profile-dropdown .user-avatar {
    cursor: pointer;
}

.profile-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    z-index: 1000;
}

.profile-dropdown-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.profile-dropdown-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}

.profile-dropdown-header p {
    margin: 0;
    font-weight: 700;
    font-size: 0.9rem;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    color: var(--text);
    text-decoration: none;
    font-size: 0.88rem;
    transition: background 0.15s;
}

.dropdown-item:hover {
    background: var(--surface-2);
}

.dropdown-item i {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.dropdown-item.logout {
    color: #ef4444;
}

.dropdown-item.logout i {
    color: #ef4444;
}

.dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 0.25rem 0;
}

.side-sub-header {
    padding: 0.75rem 1.25rem 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.menu-item.sub-channel {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.4rem 1.25rem;
}

.sub-channel-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--surface-3);
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
}

.sub-channel-letter {
    color: var(--text);
}

.sub-channel-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
}

.sub-new-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--bg);
}

.menu-item.see-more {
    color: var(--text-secondary);
    font-size: 0.82rem;
    padding: 0.5rem 1.25rem;
}

.menu-item.see-more i {
    font-size: 1.1rem;
}

.menu-item.see-more:hover {
    color: var(--primary);
}

.video-section {
    margin-bottom: 2rem;
}

.video-section .section-title {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.video-section .section-title i {
    color: var(--primary);
}

.watched-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary);
    border-radius: 0 0 0 var(--radius-sm);
}

.home-community-section {
    margin-bottom: 2rem;
}

.dash-latest-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin: 1rem 0;
}

.dash-latest-metric {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    transition: transform 0.15s;
}

.dash-latest-metric:hover {
    transform: translateY(-1px);
}

.dash-latest-metric-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.dash-latest-metric-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dash-latest-metric-body strong {
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.1;
}

.dash-latest-metric-body span {
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-latest-engagement {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.dash-engagement-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.dash-engagement-label {
    font-size: 0.82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-secondary);
}

.dash-engagement-label i {
    color: var(--primary);
}

.dash-engagement-value {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--primary);
}

.dash-engagement-track {
    height: 8px;
    background: var(--surface-3);
    border-radius: 4px;
    overflow: hidden;
}

.dash-engagement-track span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-2));
    border-radius: 4px;
    transition: width 0.3s;
}

@media (max-width: 768px) {
    .dash-latest-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .dash-latest-metrics {
        grid-template-columns: 1fr;
    }
    .dash-latest-metric {
        padding: 0.5rem !important;
        gap: 0.4rem !important;
    }
    .dash-latest-metric-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.9rem !important;
    }
    .dash-latest-metric-body strong {
        font-size: 0.95rem !important;
    }
}

@media (max-width: 600px) {
    .dash-latest-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
}

.upload-detection-warning {
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.2);
    border-left: 4px solid #fff;
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.upload-detection-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.upload-detection-head i {
    font-size: 1.4rem;
    color: #fff;
}

.upload-detection-head h4 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.upload-detection-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.upload-detection-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.upload-detection-type {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    flex: 1;
    min-width: 0;
}

.upload-detection-type i {
    color: #fff;
    flex-shrink: 0;
}

.upload-detection-type span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-detection-match {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.upload-detection-match a {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}

.upload-detection-match a:hover {
    color: #fff;
}

.upload-detection-conf {
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    padding: 0.15rem 0.5rem;
    background: rgba(255,255,255,0.12);
    border-radius: 999px;
    flex-shrink: 0;
}

.upload-detection-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.auth-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.75rem;
}

.auth-step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    background: var(--surface-3);
    color: var(--text-secondary);
    border: 2px solid var(--border);
    flex-shrink: 0;
    transition: all 0.2s;
}

.auth-step-dot.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.auth-step-dot.done {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.auth-step-line {
    width: 50px;
    height: 2px;
    background: var(--border);
    transition: background 0.2s;
}

.auth-step-line.active {
    background: var(--primary);
}

.auth-field-hint {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: -0.4rem 0 0.5rem;
    padding: 0 0.25rem;
}

.auth-upload-group {
    margin-bottom: 1rem;
}

.auth-upload-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.4rem;
}

.auth-upload-box {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem;
    background: var(--surface);
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.auth-upload-box:hover {
    border-color: var(--primary);
    background: var(--surface-2);
}

.auth-upload-wide {
    align-items: flex-start;
}

.auth-upload-preview {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.auth-upload-preview i {
    font-size: 2rem;
    color: var(--text-secondary);
}

.auth-upload-banner {
    width: 80px;
    height: 48px;
    border-radius: 8px;
}

.auth-upload-banner i {
    font-size: 1.5rem;
}

.auth-upload-text {
    display: flex;
    flex-direction: column;
}

.auth-upload-text span {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
}

.auth-upload-text small {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.auth-field {
    position: relative;
}

.auth-field-status {
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
}

.auth-field-status.available i {
    color: #22c55e;
}

.auth-field-status.taken i {
    color: #ef4444;
}

.auth-field-status.checking i {
    color: var(--text-secondary);
}

.auth-field.available input {
    border-color: #22c55e;
}

.auth-field.taken input {
    border-color: #ef4444;
}

.auth-username-helper {
    margin-bottom: 0.5rem;
}

.auth-suggestions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.65rem 0.85rem;
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.15);
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}

.auth-suggestions-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.auth-suggestion-list {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.auth-suggestion-chip {
    padding: 0.25rem 0.65rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.auth-suggestion-chip:hover {
    background: rgba(249, 115, 22,0.1);
    border-color: var(--primary);
}

.auth-preview-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.75rem 0 1rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.auth-preview-divider::before,
.auth-preview-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.auth-channel-preview {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.acp-banner {
    width: 100%;
    height: 90px;
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.acp-banner i {
    font-size: 1.5rem;
    color: var(--text-secondary);
}

.acp-banner img {
    position: absolute;
    inset: 0;
}

.acp-body {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0 1rem 0.85rem;
    margin-top: -24px;
    position: relative;
}

.acp-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid var(--surface);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 800;
}

.acp-avatar img {
    position: absolute;
    inset: 0;
}

.acp-info {
    flex: 1;
    min-width: 0;
}

.acp-info h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acp-handle {
    margin: 0.1rem 0 0.15rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.acp-stats {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.acp-stats strong {
    color: var(--text);
}

.acp-sub-btn {
    padding: 0.4rem 1rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: not-allowed;
    opacity: 0.7;
    flex-shrink: 0;
}

.acp-tabs {
    display: flex;
    gap: 1.25rem;
    padding: 0 1rem;
    border-bottom: 1px solid var(--border);
}

.acp-tab {
    padding: 0.6rem 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
}

.acp-tab.active {
    color: var(--text);
    border-bottom-color: var(--primary);
}

.acp-video-grid {
    padding: 1rem;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.acp-video-empty {
    text-align: center;
    color: var(--text-secondary);
}

.acp-video-empty i {
    font-size: 1.8rem;
    margin-bottom: 0.25rem;
    display: block;
}

.acp-video-empty p {
    margin: 0;
    font-size: 0.82rem;
}

/* ===== Customisation View Redesign ===== */

.cust-toast {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.25);
    border-radius: var(--radius);
    color: #22c55e;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    transition: opacity 0.3s, transform 0.3s;
}

.cust-toast.hide {
    opacity: 0;
    transform: translateY(-10px);
}

.cust-toast i { font-size: 1.2rem; }

/* Hero Card */
.cust-hero-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.cust-hero-banner {
    height: 200px;
    background: linear-gradient(135deg, var(--primary) 0%, #1a1a2e 100%);
    background-size: cover;
    background-position: center;
    position: relative;
}

.cust-hero-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%);
}

.cust-banner-edit {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.15s;
    z-index: 2;
}

.cust-banner-edit:hover {
    background: rgba(0,0,0,0.8);
}

.cust-hero-body {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 0 1.5rem 1.5rem;
    margin-top: -48px;
    position: relative;
}

.cust-hero-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.cust-hero-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 4px solid var(--surface);
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text);
    object-fit: cover;
}

.cust-hero-avatar-letter {
    background: var(--primary);
    color: #fff;
}

.cust-avatar-edit {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: 3px solid var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
}

.cust-avatar-edit:hover {
    background: var(--primary-2);
}

.cust-hero-info {
    flex: 1;
    padding-top: 2.5rem;
    min-width: 0;
}

.cust-hero-name-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.cust-hero-name-row h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
}

.cust-hero-handle {
    margin: 0.15rem 0 0;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.cust-hero-bio {
    margin: 0.5rem 0 0;
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 500px;
}

.cust-hero-stats {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.85rem;
    flex-wrap: wrap;
}

.cust-stat {
    display: flex;
    flex-direction: column;
}

.cust-stat strong {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
}

.cust-stat span {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.cust-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    padding-top: 2.5rem;
    flex-shrink: 0;
}

.cust-view-channel {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s;
}

.cust-view-channel:hover {
    background: var(--surface-3);
    border-color: var(--primary);
}

.cust-accent-display {
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 800;
}

.cust-accent-display span {
    mix-blend-mode: difference;
    color: #fff;
}

/* Tabs */
.cust-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}

.cust-tab {
    padding: 0.65rem 1rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.cust-tab:hover {
    color: var(--text);
}

.cust-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.cust-tab-danger {
    margin-left: auto;
}

.cust-tab-danger:hover,
.cust-tab-danger.active {
    color: #ef4444;
    border-bottom-color: #ef4444;
}

/* Sections */
.cust-section { display: none; }
.cust-section.active { display: block; }

/* Channel Grid */
.cust-channel-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 1000px) {
    .cust-channel-grid {
        grid-template-columns: 1fr;
    }
}

/* Form Panel */
.cust-form-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.cust-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.cust-panel-head > i {
    font-size: 1.5rem;
    color: var(--primary);
    margin-top: 0.1rem;
}

.cust-panel-head h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
}

.cust-panel-head p {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.cust-danger-icon { color: #ef4444 !important; }

/* Fields */
.cust-field-group {
    margin-bottom: 1.25rem;
}

.cust-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 600px) {
    .cust-field-row { grid-template-columns: 1fr; }
}

.cust-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.4rem;
}

.cust-char-count {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.cust-input {
    width: 100%;
    padding: 0.7rem 0.85rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.cust-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(249, 115, 22,0.1);
}

.cust-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.cust-textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.9rem;
    outline: none;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.cust-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(249, 115, 22,0.1);
}

.cust-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.3rem;
}

/* Upload rows */
.cust-upload-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cust-upload-thumb {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--surface-3);
    border: 2px solid var(--border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cust-upload-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cust-upload-thumb i {
    font-size: 2rem;
    color: var(--text-secondary);
}

.cust-upload-thumb-wide {
    width: 96px;
    height: 54px;
    border-radius: 8px;
}

.cust-upload-thumb-wide i { font-size: 1.5rem; }

.cust-upload-controls {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cust-upload-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    align-self: flex-start;
}

.cust-upload-btn:hover {
    background: var(--surface-3);
    border-color: var(--primary);
}

/* Color picker */
.cust-color-picker {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cust-color-picker input[type="color"] {
    width: 44px;
    height: 44px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
    background: none;
}

.cust-color-hex {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    font-family: monospace;
}

.cust-color-presets {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.cust-preset {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border);
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
    padding: 0;
}

.cust-preset:hover {
    transform: scale(1.15);
    border-color: var(--text);
}

/* Form actions */
.cust-form-actions {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.cust-save-btn {
    padding: 0.7rem 1.5rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: background 0.15s, transform 0.1s;
}

.cust-save-btn:hover {
    background: var(--primary-2);
}

.cust-save-btn:active {
    transform: scale(0.98);
}

/* Preview Panel */
.cust-preview-panel {
    position: sticky;
    top: 1rem;
}

.cust-preview-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cust-preview-head i { font-size: 1.1rem; }

.cust-preview-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.cust-preview-banner {
    height: 80px;
    background: linear-gradient(135deg, var(--primary) 0%, #1a1a2e 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cust-preview-banner i {
    font-size: 1.3rem;
    color: rgba(255,255,255,0.4);
}

.cust-preview-body {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0 0.85rem 0.75rem;
    margin-top: -20px;
    position: relative;
}

.cust-preview-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid var(--surface);
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
}

.cust-preview-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.cust-preview-info {
    flex: 1;
    min-width: 0;
    padding-top: 1.25rem;
}

.cust-preview-info h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cust-preview-handle {
    margin: 0.1rem 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.cust-preview-stats {
    margin: 0;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.cust-preview-bio {
    margin: 0.3rem 0 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cust-preview-sub {
    padding: 0.35rem 0.85rem;
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 1.25rem;
}

.cust-preview-tabs {
    display: flex;
    gap: 1rem;
    padding: 0 0.85rem;
    border-bottom: 1px solid var(--border);
}

.cust-preview-tab {
    padding: 0.5rem 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
}

.cust-preview-tab.active {
    color: var(--text);
    border-bottom-color: var(--primary);
}

/* Recent videos in preview */
.cust-preview-recent {
    margin-top: 1rem;
}

.cust-preview-recent h4 {
    font-size: 0.82rem;
    font-weight: 700;
    margin: 0 0 0.6rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cust-preview-video-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cust-preview-video {
    display: flex;
    gap: 0.5rem;
    text-decoration: none;
    align-items: center;
}

.cust-preview-vthumb {
    width: 80px;
    height: 45px;
    border-radius: 6px;
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.cust-preview-vinfo {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cust-preview-vtitle {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cust-preview-vmeta {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* Playlists grid */
.cust-playlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.cust-playlist-card {
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s;
}

.cust-playlist-card:hover {
    transform: translateY(-2px);
}

.cust-playlist-thumb {
    aspect-ratio: 16/9;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.cust-playlist-count {
    position: absolute;
    bottom: 0.4rem;
    right: 0.4rem;
    padding: 0.15rem 0.5rem;
    background: rgba(0,0,0,0.75);
    color: #fff;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.cust-playlist-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
}

.cust-playlist-overlay i {
    font-size: 2rem;
    color: #fff;
}

.cust-playlist-card:hover .cust-playlist-overlay {
    opacity: 1;
}

.cust-playlist-info {
    padding: 0.5rem 0.25rem 0;
}

.cust-playlist-info h4 {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
}

.cust-playlist-info span {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Subscriptions grid */
.cust-sub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}

.cust-sub-card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, transform 0.15s;
}

.cust-sub-card:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}

.cust-sub-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text);
    object-fit: cover;
    flex-shrink: 0;
}

.cust-sub-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cust-sub-name {
    font-size: 0.88rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cust-sub-view {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Empty states */
.cust-empty {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.cust-empty i {
    font-size: 3rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    display: block;
}

.cust-empty h4 {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.cust-empty p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Danger zone */
.cust-danger-card {
    max-width: 600px;
    background: var(--surface);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.cust-danger-warning {
    padding: 1rem 1.25rem;
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.15);
    border-radius: var(--radius-sm);
    margin-bottom: 1.25rem;
}

.cust-danger-warning > i {
    color: #ef4444;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    display: block;
}

.cust-danger-warning p {
    margin: 0 0 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
}

.cust-danger-warning ul {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.cust-danger-warning li {
    margin-bottom: 0.2rem;
}

.cust-danger-input {
    border-color: rgba(239,68,68,0.3) !important;
}

.cust-danger-input:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.1) !important;
}

.cust-delete-btn {
    padding: 0.7rem 1.5rem;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: background 0.15s;
}

.cust-delete-btn:hover {
    background: #dc2626;
}

/* Responsive hero */
@media (max-width: 700px) {
    .cust-hero-body {
        flex-direction: column;
        align-items: flex-start;
    }
    .cust-hero-actions {
        flex-direction: row;
        align-items: center;
        padding-top: 0;
    }
    .cust-hero-stats {
        gap: 1rem;
    }
}

/* ===== Notifications Page ===== */

.notif-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem 0;
}

.notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.notif-header-info h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.notif-header-info h2 i {
    color: var(--primary);
}

.notif-header-info p {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.notif-mark-all {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s;
}

.notif-mark-all:hover {
    background: var(--surface-2);
    border-color: var(--primary);
}

.notif-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.notif-group-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1rem 0.5rem 0.4rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.25rem;
}

.notif-group-label:first-child {
    padding-top: 0;
}

.notif-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    position: relative;
}

.notif-item:hover {
    background: var(--surface-2);
    border-color: var(--primary);
    transform: translateX(2px);
}

.notif-item.unread {
    background: rgba(249, 115, 22,0.04);
    border-color: rgba(249, 115, 22,0.15);
}

.notif-item.unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary);
    border-radius: var(--radius) 0 0 var(--radius);
}

.notif-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.notif-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
    object-fit: cover;
    overflow: hidden;
}

.notif-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notif-avatar-letter {
    background: var(--primary);
    color: #fff;
}

.notif-avatar-icon {
    color: #fff;
}

.notif-type-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #fff;
    border: 2px solid var(--surface);
}

.notif-item:hover .notif-type-badge {
    border-color: var(--surface-2);
}

.notif-body {
    flex: 1;
    min-width: 0;
}

.notif-message {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--text);
}

.notif-message strong {
    font-weight: 700;
}

.notif-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
    display: block;
}

.notif-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}

.notif-chevron {
    font-size: 1.2rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: transform 0.15s;
}

.notif-item:hover .notif-chevron {
    transform: translateX(2px);
    color: var(--primary);
}

/* Empty state */
.notif-empty {
    text-align: center;
    padding: 4rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.notif-empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.notif-empty-icon i {
    font-size: 2.5rem;
    color: var(--text-secondary);
}

.notif-empty h3 {
    margin: 0 0 0.4rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.notif-empty p {
    margin: 0 0 1.25rem;
    font-size: 0.88rem;
    color: var(--text-secondary);
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 600px) {
    .notif-item {
        padding: 0.75rem;
        gap: 0.65rem;
    }
    .notif-avatar {
        width: 38px;
        height: 38px;
    }
    .notif-type-badge {
        width: 18px;
        height: 18px;
        font-size: 0.65rem;
    }
    .notif-chevron {
        display: none;
    }
}


/* ===== Admin Panel ===== */

.admin-layout {
    display: flex;
    gap: 0;
    min-height: calc(100vh - 56px);
    max-width: none;
    padding: 0;
    margin: 0;
}

.admin-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 56px;
    height: calc(100vh - 56px);
    overflow-y: auto;
}

.admin-sidebar-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1.25rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.admin-sidebar-logo {
    font-size: 1.8rem;
    color: var(--primary);
    flex-shrink: 0;
}

.admin-sidebar-head-text {
    flex: 1;
    min-width: 0;
}

.admin-sidebar-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.admin-sidebar-head span {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.admin-sidebar-collapse {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.admin-sidebar-collapse:hover {
    background: var(--surface-2);
    color: var(--text);
}

/* Admin greeting */
.admin-greeting {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.admin-greeting-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.admin-greeting-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
}
.admin-greeting-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.admin-greeting-hello {
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.admin-greeting-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Collapsed state */
.admin-layout.collapsed .admin-sidebar {
    width: 64px;
}
.admin-layout.collapsed .admin-sidebar-head-text,
.admin-layout.collapsed .admin-greeting-text,
.admin-layout.collapsed .admin-nav-item span,
.admin-layout.collapsed .admin-sidebar-foot a span,
.admin-layout.collapsed .admin-greeting {
    display: none;
}
.admin-layout.collapsed .admin-sidebar-head {
    justify-content: center;
    padding: 1.25rem 0.5rem;
}
.admin-layout.collapsed .admin-sidebar-collapse {
    display: none;
}
.admin-layout.collapsed .admin-nav-item {
    justify-content: center;
    padding: 0.65rem;
}
.admin-layout.collapsed .admin-nav-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    margin: 0;
}
.admin-layout.collapsed .admin-sidebar-foot a {
    justify-content: center;
    padding: 0.65rem;
}

/* Mobile overlay */
.admin-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
}
.admin-overlay.show {
    display: block;
}

/* Mobile toggle */
.admin-mobile-toggle {
    display: none;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    margin-bottom: 1rem;
}

.admin-nav {
    flex: 1;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
    position: relative;
}

.admin-nav-item i {
    font-size: 1.15rem;
    width: 20px;
    text-align: center;
}

/* Colorful admin sidebar icons */
.admin-nav-item .bx-grid-alt { color: #3b82f6; }
.admin-nav-item .bx-group { color: #8b5cf6; }
.admin-nav-item .bx-video { color: #ef4444; }
.admin-nav-item .bx-comment-detail { color: #f97316; }
.admin-nav-item .bx-flag { color: #ea580c; }
.admin-nav-item .bx-news { color: #06b6d4; }
.admin-nav-item .bx-error-circle { color: #dc2626; }
.admin-nav-item .bx-shield-quarter { color: #10b981; }
.admin-nav-item .bxs-badge-check { color: #2d9bf0; }
.admin-nav-item .bx-star { color: #eab308; }
.admin-nav-item .bx-dollar-circle { color: #22c55e; }
.admin-nav-item .bx-money { color: #16a34a; }
.admin-nav-item .bx-wallet { color: #0ea5e9; }
.admin-nav-item .bx-wallet-alt { color: #14b8a6; }
.admin-nav-item .bx-megaphone { color: #ec4899; }
.admin-nav-item .bx-broadcast { color: #f97316; }
.admin-nav-item .bx-cog { color: #64748b; }
.admin-nav-item .bx-history { color: #a855f7; }

/* Active state: white icons */
.admin-nav-item.active i {
    color: #fff !important;
}

.admin-nav-item:hover {
    background: var(--surface-2);
    color: var(--text);
}

.admin-nav-item.active {
    background: var(--primary);
    color: #fff;
}

.admin-nav-badge {
    margin-left: auto;
    padding: 0.1rem 0.45rem;
    background: #ef4444;
    color: #fff;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
}

.admin-nav-item.active .admin-nav-badge {
    background: rgba(255,255,255,0.25);
}

.admin-sidebar-foot {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
}

.admin-sidebar-foot a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
}

.admin-sidebar-foot a:hover { color: var(--primary); }

.admin-main {
    flex: 1;
    padding: 1.5rem;
    min-width: 0;
    overflow-x: auto;
}

.admin-toast {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.25);
    border-radius: var(--radius);
    color: #22c55e;
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.admin-section-head {
    margin-bottom: 1.5rem;
}

.admin-section-head h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
}

.admin-section-head p {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.admin-search-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    max-width: 400px;
}

.admin-search-bar i {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.admin-search-bar input {
    flex: 1;
    padding: 0.55rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.85rem;
    outline: none;
}

.admin-search-bar input:focus { border-color: var(--primary); }

.admin-search-bar button {
    padding: 0.55rem 1rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.admin-stat-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s;
}

.admin-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.admin-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.admin-stat-body strong {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
}

.admin-stat-body span {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* Tables */
.admin-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.admin-table thead {
    background: var(--surface-2);
}

.admin-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--border);
}

.admin-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.admin-table tbody tr:hover {
    background: var(--surface-2);
}

.admin-table a { color: var(--primary); text-decoration: none; }
.admin-table a:hover { text-decoration: underline; }

.admin-user-cell {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.admin-user-cell img,
.admin-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.admin-role-badges {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.admin-role {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
}

.admin-role-admin { background: rgba(239,68,68,0.15); color: #ef4444; }
.admin-role-creator { background: rgba(168,85,247,0.15); color: #a855f7; }
.admin-role-verified { background: rgba(249, 115, 22,0.15); color: var(--primary); }
.admin-role-none { background: var(--surface-3); color: var(--text-secondary); }

.admin-row-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* Buttons */
.admin-btn-primary, .admin-btn-danger, .admin-btn-ghost {
    padding: 0.45rem 0.85rem;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: opacity 0.15s;
}

.admin-btn-primary { background: var(--primary); color: #fff; }
.admin-btn-primary:hover { opacity: 0.9; }

.admin-btn-danger { background: #ef4444; color: #fff; }
.admin-btn-danger:hover { opacity: 0.9; }

.admin-btn-ghost { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.admin-btn-ghost:hover { background: var(--surface-3); }

.admin-btn-sm { padding: 0.35rem 0.55rem; font-size: 0.78rem; }

/* Video grid */
.admin-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.admin-video-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.admin-video-thumb {
    aspect-ratio: 16/9;
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.admin-video-play {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.admin-video-thumb:hover .admin-video-play { opacity: 1; }

.admin-video-info {
    padding: 0.75rem;
    flex: 1;
}

.admin-video-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0.25rem;
}

.admin-video-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: block;
}

.admin-video-date {
    font-size: 0.72rem;
    color: var(--text-secondary);
    display: block;
    margin-top: 0.15rem;
}

.admin-video-card .action-form {
    padding: 0 0.75rem 0.75rem;
}

/* Comments */
.admin-comment-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-comment-card {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    align-items: flex-start;
}

.admin-comment-avatar img,
.admin-comment-avatar .admin-user-avatar {
    width: 36px;
    height: 36px;
}

.admin-comment-body { flex: 1; min-width: 0; }

.admin-comment-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.admin-comment-head strong { font-size: 0.85rem; }

.admin-comment-head span { font-size: 0.78rem; color: var(--text-secondary); }

.admin-comment-head a { color: var(--primary); text-decoration: none; }

.admin-comment-time {
    margin-left: auto !important;
    font-size: 0.72rem !important;
}

.admin-comment-text {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text);
}

/* Verification cards */
.admin-verify-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-verify-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.admin-verify-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.admin-verify-user {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.admin-verify-user img,
.admin-verify-user .admin-user-avatar {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
}

.admin-verify-user a {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}

.admin-verify-user a:hover { color: var(--primary); }

.admin-verify-date {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.admin-verify-stats {
    display: flex;
    gap: 1rem;
}

.admin-verify-stat {
    text-align: center;
}

.admin-verify-stat strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
}

.admin-verify-stat span {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.admin-verify-details {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.admin-verify-row {
    display: flex;
    gap: 0.75rem;
    font-size: 0.85rem;
}

.admin-verify-row > span {
    width: 100px;
    flex-shrink: 0;
    color: var(--text-secondary);
    font-weight: 600;
}

.admin-verify-row > strong { font-weight: 600; }

.admin-verify-reason p {
    margin: 0;
    line-height: 1.5;
}

.admin-verify-evidence {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--primary);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
}

.admin-verify-actions {
    display: flex;
    gap: 0.65rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* Forms */
.admin-form-card {
    max-width: 600px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.admin-form-card h3 {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.admin-field {
    margin-bottom: 1rem;
}

.admin-field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.admin-field input,
.admin-field select,
.admin-field textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.88rem;
    outline: none;
    font-family: inherit;
}

.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus {
    border-color: var(--primary);
}

.admin-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Empty state */
.admin-empty {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.admin-empty i {
    font-size: 2.5rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    display: block;
}

.admin-empty p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 900px) {
    .admin-sidebar {
        width: 280px;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.25s;
    }
    .admin-sidebar.open {
        transform: translateX(0);
    }
    .admin-sidebar-collapse {
        display: none;
    }
    .admin-mobile-toggle {
        display: inline-flex;
    }
    .admin-nav-badge {
        position: relative;
        margin-left: auto;
    }
}

@media (max-width: 600px) {
    .admin-layout { flex-direction: column; }
    .admin-main { padding: 1rem; }
    .admin-field-row { grid-template-columns: 1fr; }
    .admin-table { font-size: 0.78rem; }
    .admin-table th, .admin-table td { padding: 0.4rem 0.5rem; }
    .admin-stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .admin-section-head h2 { font-size: 1.2rem; }
}

/* ===== Verification Page ===== */

.verify-page {
    max-width: 680px;
    margin: 0 auto;
    padding: 1rem 0;
}

.verify-hero {
    text-align: center;
    margin-bottom: 2rem;
    padding: 2rem 1rem;
}

.verify-hero-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: rgba(249, 115, 22,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.verify-hero-icon i {
    font-size: 2.2rem;
    color: var(--primary);
}

.verify-hero h1 {
    margin: 0 0 0.5rem;
    font-size: 1.6rem;
    font-weight: 800;
}

.verify-hero p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.5;
}

.verify-alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.1rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    font-size: 0.88rem;
    font-weight: 600;
}

.verify-alert.success {
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.25);
    color: #22c55e;
}

.verify-alert.error {
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.25);
    color: #ef4444;
}

.verify-status-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}

.verify-status-card.verified {
    background: rgba(34,197,94,0.08);
    border: 1px solid rgba(34,197,94,0.25);
}

.verify-status-card.pending {
    background: rgba(234,179,8,0.08);
    border: 1px solid rgba(234,179,8,0.25);
}

.verify-status-card.rejected {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.25);
}

.verify-status-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.verify-status-card.verified .verify-status-icon { background: rgba(34,197,94,0.15); color: #22c55e; }
.verify-status-card.pending .verify-status-icon { background: rgba(234,179,8,0.15); color: #eab308; }
.verify-status-card.rejected .verify-status-icon { background: rgba(239,68,68,0.15); color: #ef4444; }

.verify-status-body h3 {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.verify-status-body p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.verify-app-details {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.verify-app-details h4 {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    font-weight: 700;
}

.verify-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}

.verify-detail-row:last-child { border-bottom: none; }

.verify-detail-row span { color: var(--text-secondary); }

.verify-detail-row strong { font-weight: 600; }

.verify-eligibility {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.verify-eligibility h3 {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.verify-eligibility-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

@media (max-width: 500px) {
    .verify-eligibility-grid { grid-template-columns: 1fr; }
}

.verify-eligibility-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}

.verify-eligibility-item i { font-size: 1.3rem; flex-shrink: 0; }

.verify-eligibility-item.met i { color: #22c55e; }
.verify-eligibility-item.unmet i { color: #ef4444; }

.verify-eligibility-item strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
}

.verify-eligibility-item span {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.verify-eligibility-note {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0.5rem 0 0;
}

.verify-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.verify-form h3 {
    margin: 0 0 1.25rem;
    font-size: 1.1rem;
    font-weight: 700;
}

.verify-field {
    margin-bottom: 1.25rem;
}

.verify-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.verify-required { color: #ef4444; }

.verify-field input,
.verify-field select,
.verify-field textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.88rem;
    outline: none;
    font-family: inherit;
}

.verify-field input:focus,
.verify-field select:focus,
.verify-field textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(249, 115, 22,0.1);
}

.verify-field small {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.3rem;
}

.verify-upload {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: var(--surface-2);
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.15s;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.verify-upload:hover { border-color: var(--primary); color: var(--text); }

.verify-upload i { font-size: 1.2rem; }

.verify-submit {
    padding: 0.75rem 1.5rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 0.15s;
}

.verify-submit:hover { background: var(--primary-2); }

/* ===== Admin Panel Extras ===== */

.admin-video-actions {
    display: flex;
    gap: 0.4rem;
    padding: 0 0.75rem 0.75rem;
}

.admin-video-actions .action-form { padding: 0; }

.admin-featured-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.2rem 0.5rem;
    background: rgba(249, 115, 22,0.9);
    color: #fff;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.admin-video-thumb { position: relative; }

.admin-report-reason {
    margin-top: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: rgba(239,68,68,0.08);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    color: #ef4444;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.admin-post-attachment {
    margin-top: 0.5rem;
}

.admin-post-attachment img {
    max-width: 200px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.admin-post-attachment a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--primary);
    text-decoration: none;
    font-size: 0.82rem;
}

.admin-post-likes {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Settings toggles */
.admin-settings-toggles {
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.admin-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    gap: 1rem;
}

.admin-toggle-row strong {
    font-size: 0.88rem;
    font-weight: 700;
}

.admin-toggle-row p {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.admin-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.admin-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.admin-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--surface-3);
    border-radius: 24px;
    transition: background 0.2s;
}

.admin-switch-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.admin-switch input:checked + .admin-switch-slider {
    background: var(--primary);
}

.admin-switch input:checked + .admin-switch-slider::before {
    transform: translateX(20px);
}

/* Activity log */
.admin-log-action {
    padding: 0.15rem 0.5rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: monospace;
}

/* ===== Admin Overview Charts ===== */

.admin-stat-trend {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.7rem;
    color: #22c55e;
    margin-top: 0.15rem;
    font-weight: 600;
}

.admin-chart-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

@media (max-width: 900px) {
    .admin-chart-row { grid-template-columns: 1fr; }
}

.admin-chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.admin-chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.admin-chart-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.admin-chart-head h3 i { color: var(--primary); }

.admin-chart-sub {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.admin-chart-total {
    font-size: 1.2rem;
    font-weight: 800;
}

.admin-chart-total small {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.admin-chart-link {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}

.admin-chart-link:hover { text-decoration: underline; }

.admin-chart-body {
    height: 160px;
}

.admin-line-svg {
    width: 100%;
    height: 100%;
}

/* Bar chart */
.admin-bar-chart {
    display: flex;
    align-items: flex-end;
}

.admin-bar-svg {
    width: 100%;
    height: 100%;
}

/* Donut chart */
.admin-donut-wrap {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.admin-donut-svg {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
}

.admin-donut-num {
    font-size: 14px;
    font-weight: 800;
    fill: var(--text);
}

.admin-donut-label {
    font-size: 7px;
    fill: var(--text-secondary);
}

.admin-donut-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 120px;
}

.admin-legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
}

.admin-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.admin-legend-name {
    flex: 1;
    color: var(--text);
}

.admin-legend-val {
    font-weight: 700;
    color: var(--text-secondary);
}

/* Week summary */
.admin-week-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.65rem;
}

@media (max-width: 600px) {
    .admin-week-grid { grid-template-columns: repeat(3, 1fr); }
}

.admin-week-item {
    text-align: center;
    padding: 0.75rem 0.4rem;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}

.admin-week-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.4rem;
    font-size: 1.05rem;
}

.admin-week-item strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
}

.admin-week-item span {
    font-size: 0.68rem;
    color: var(--text-secondary);
}

/* Top creators */
.admin-top-creators {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-creator-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.admin-creator-row:hover { background: var(--surface-2); }

.admin-creator-rank {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-creator-row img,
.admin-creator-row .admin-user-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
}

.admin-creator-info {
    flex: 1;
    min-width: 0;
}

.admin-creator-name {
    font-size: 0.82rem;
    font-weight: 700;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-creator-stats {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* Recent lists */
.admin-recent-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.admin-recent-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.admin-recent-row:hover { background: var(--surface-2); }

.admin-recent-row img,
.admin-recent-row .admin-user-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
}

.admin-user-avatar-sm {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.75rem !important;
}

.admin-recent-info {
    flex: 1;
    min-width: 0;
}

.admin-recent-name {
    font-size: 0.82rem;
    font-weight: 700;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-recent-meta {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* Recent videos */
.admin-recent-videos {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-recent-video {
    display: flex;
    gap: 0.6rem;
    text-decoration: none;
    color: inherit;
    align-items: center;
}

.admin-recent-vthumb {
    width: 64px;
    height: 36px;
    border-radius: 6px;
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.admin-recent-vinfo {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin-recent-vtitle {
    font-size: 0.8rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-recent-vmeta {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* ===== Admin Video Filters ===== */

.admin-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.admin-filter-search {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    min-width: 180px;
}

.admin-filter-search i {
    color: var(--text-secondary);
    font-size: 1.05rem;
}

.admin-filter-search input {
    flex: 1;
    padding: 0.45rem 0.65rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.82rem;
    outline: none;
}

.admin-filter-search input:focus { border-color: var(--primary); }

.admin-filter-bar select {
    padding: 0.45rem 0.65rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.82rem;
    outline: none;
    cursor: pointer;
}

.admin-filter-bar select:focus { border-color: var(--primary); }

.admin-filter-results {
    margin-bottom: 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Video card extras */
.admin-privacy-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.15rem 0.45rem;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
}

.admin-duration-badge {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    padding: 0.1rem 0.4rem;
    background: rgba(0,0,0,0.8);
    color: #fff;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
}

.admin-video-stats {
    display: flex;
    gap: 0.65rem;
    margin: 0.25rem 0;
}

.admin-video-stats span {
    font-size: 0.72rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.admin-video-stats i { font-size: 0.85rem; }

.admin-video-cat {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    background: var(--surface-3);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
}

@media (max-width: 700px) {
    .admin-filter-bar { gap: 0.4rem; }
    .admin-filter-bar select { font-size: 0.78rem; }
}

/* ===== Subscriptions Feed ===== */

.subs-feed-page { max-width: 1100px; margin: 0 auto; }

.subs-feed-header {
    margin-bottom: 1.25rem;
}

.subs-feed-header h2 {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.subs-feed-header h2 i { color: var(--primary); }

.subs-feed-header p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.subs-chips {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    scrollbar-width: thin;
}

.subs-chip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s;
}

.subs-chip:hover { background: var(--surface-2); }

.subs-chip.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.subs-chip img,
.subs-chip-letter {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
}

.subs-feed-group {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    margin: 1.25rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}

.subs-feed-video {
    display: flex;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
    margin-bottom: 0.5rem;
}

.subs-feed-video:hover { background: var(--surface); }

.subs-feed-thumb {
    width: 200px;
    aspect-ratio: 16/9;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    position: relative;
}

.subs-feed-thumb .duration-badge {
    position: absolute;
    bottom: 0.4rem;
    right: 0.4rem;
    padding: 0.1rem 0.4rem;
    background: rgba(0,0,0,0.8);
    color: #fff;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
}

.subs-feed-thumb .play-icon {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    opacity: 0;
    transition: opacity 0.15s;
}

.subs-feed-thumb .play-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0;
    height: 0;
    border-left: 12px solid #fff;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    left: 14px;
}

.subs-feed-video:hover .play-icon { opacity: 1; }

.subs-feed-info {
    display: flex;
    gap: 0.65rem;
    flex: 1;
    min-width: 0;
}

.subs-feed-channel img,
.subs-feed-avatar-letter {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

.subs-feed-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.subs-feed-text h4 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.subs-feed-meta {
    font-size: 0.78rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.subs-feed-stats {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.subs-feed-cat {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    background: var(--surface-3);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-secondary);
    width: fit-content;
}

.subs-empty {
    text-align: center;
    padding: 4rem 1rem;
}

.subs-empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.subs-empty-icon i {
    font-size: 2.5rem;
    color: var(--text-secondary);
}

.subs-empty h3 {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
}

.subs-empty p {
    margin: 0 0 1.5rem;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

@media (max-width: 700px) {
    .subs-feed-thumb { width: 130px; }
    .subs-feed-text h4 { -webkit-line-clamp: 1; }
}

/* ===== Studio Edit Thumbnail ===== */

.edit-thumb-row {
    display: flex;
    gap: 0.85rem;
    align-items: center;
}

.edit-thumb-preview {
    width: 100px;
    aspect-ratio: 16/9;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.edit-thumb-preview i {
    font-size: 1.5rem;
    color: var(--text-secondary);
}

.edit-thumb-row small {
    display: block;
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 0.3rem;
}

/* ===== Studio Comment Meta ===== */

.studio-comment-meta {
    display: flex;
    gap: 0.85rem;
    margin-top: 0.4rem;
}

.studio-comment-meta span {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* ===== Admin User Modal ===== */

.admin-user-modal {
    max-width: 500px;
}

.admin-user-modal-head {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.admin-user-modal-avatar img,
.admin-user-modal-avatar .admin-user-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.admin-user-modal-info {
    flex: 1;
}

.admin-user-modal-info h3 {
    margin: 0 0 0.2rem;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.admin-user-modal-info p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.admin-modal-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
}

.admin-modal-close:hover { color: var(--text); }

.admin-user-modal-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 500px) {
    .admin-user-modal-stats { grid-template-columns: repeat(3, 1fr); }
}

.admin-user-modal-stat {
    text-align: center;
    padding: 0.65rem 0.4rem;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}

.admin-user-modal-stat strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
}

.admin-user-modal-stat span {
    font-size: 0.68rem;
    color: var(--text-secondary);
}

.admin-user-modal-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.admin-user-modal-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 0.85rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
}

.admin-user-modal-row span {
    color: var(--text-secondary);
    font-weight: 600;
}

.admin-user-modal-row strong {
    font-weight: 600;
    text-align: right;
}

.admin-user-modal-row p {
    margin: 0;
    text-align: right;
    max-width: 300px;
    line-height: 1.4;
}

.admin-user-modal-color {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

.admin-user-modal-actions {
    display: flex;
    gap: 0.65rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* ===== Home Page Redesign ===== */

.home-page {
    padding-top: 1.5rem;
}

/* Feed Tabs */
.home-feed-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}

.feed-tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.1rem;
    border-radius: 8px 8px 0 0;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.88rem;
    transition: all 0.15s;
    position: relative;
    margin-bottom: -1px;
}

.feed-tab i { font-size: 1.1rem; }

.feed-tab:hover {
    color: var(--text);
    background: var(--surface-2);
}

.feed-tab.active {
    color: var(--primary);
    border-bottom: 3px solid var(--primary);
    margin-bottom: -3px;
}

/* Category Chips */
.home-cat-chips {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.5rem 0 1rem;
    scrollbar-width: none;
}

.home-cat-chips::-webkit-scrollbar { display: none; }

.cat-chip {
    padding: 0.35rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.15s;
}

.cat-chip:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--text-secondary);
}

.cat-chip.active {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}

/* Search header */
.home-search-head {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.home-search-head h2 {
    font-size: 1.3rem;
    font-weight: 800;
}

.home-search-head span {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Hero Section */
.home-hero {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 2rem;
    min-height: 340px;
    display: flex;
    align-items: flex-end;
}

.home-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-3);
    z-index: 0;
}

.home-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 70%, transparent 100%);
    z-index: 1;
}

.home-hero-content {
    position: relative;
    z-index: 2;
    padding: 2rem;
    max-width: 600px;
}

.home-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    background: var(--primary);
    color: #fff;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.85rem;
}

.home-hero-title {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 0.6rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-hero-desc {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-hero-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.home-hero-creator {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.home-hero-creator img,
.home-hero-avatar-letter {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
}

.home-hero-creator strong {
    display: block;
    color: #fff;
    font-size: 0.88rem;
}

.home-hero-creator span {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
}

.home-hero-stats {
    display: flex;
    gap: 0.85rem;
}

.home-hero-stats span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.8);
}

.home-hero-stats i { font-size: 0.95rem; }

.home-hero-play {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.5rem;
    background: #fff;
    color: #000;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    transition: transform 0.15s, background 0.15s;
}

.home-hero-play:hover {
    transform: scale(1.05);
    background: var(--primary);
    color: #fff;
}

.home-hero-play i { font-size: 1.2rem; }

@media (max-width: 700px) {
    .home-hero { min-height: 260px; }
    .home-hero-content { padding: 1.25rem; }
    .home-hero-title { font-size: 1.3rem; }
    .home-hero-desc { display: none; }
    .home-hero-stats { display: none; }
}

/* Discover Creators — Fresh Voices Leaderboard */
.discover-creators {
    margin-bottom: 1.75rem;
}
.discover-creators-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.875rem;
}
.discover-creators-head h3 {
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}
.discover-creators-head h3 i {
    color: #facc15;
    font-size: 1.2rem;
}
.discover-week-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary);
    background: rgba(249, 115, 22, 0.1);
    padding: 0.15rem 0.5rem;
    border-radius: 100px;
    margin-left: 0.25rem;
}
.discover-see-all {
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    transition: color 0.15s;
}
.discover-see-all:hover {
    color: var(--primary);
}

/* Leaderboard */
.leaderboard {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem;
}
.leaderboard-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, transform 0.1s;
    position: relative;
}
.leaderboard-row:hover {
    background: var(--surface-2);
    transform: translateX(2px);
}
.leaderboard-row.rank-gold {
    background: linear-gradient(90deg, rgba(250, 204, 21, 0.08), transparent);
    border: 1px solid rgba(250, 204, 21, 0.2);
}
.leaderboard-row.rank-silver {
    background: linear-gradient(90deg, rgba(203, 213, 225, 0.08), transparent);
    border: 1px solid rgba(203, 213, 225, 0.15);
}
.leaderboard-row.rank-bronze {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.08), transparent);
    border: 1px solid rgba(205, 127, 50, 0.15);
}
.leaderboard-rank {
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.leaderboard-medal {
    font-size: 1.5rem;
    line-height: 1;
}
.leaderboard-rank-num {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.leaderboard-avatar-wrap {
    flex-shrink: 0;
}
.leaderboard-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}
.leaderboard-avatar-letter {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    background: var(--surface-3);
    color: var(--text);
    border: 2px solid var(--border);
}
.leaderboard-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.leaderboard-name {
    font-size: 0.92rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.leaderboard-subs {
    font-size: 0.76rem;
    color: var(--text-secondary);
}
.leaderboard-views {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}
.leaderboard-views-num {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.1;
}
.leaderboard-views-label {
    font-size: 0.66rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.leaderboard-action {
    color: var(--text-secondary);
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: color 0.15s, transform 0.15s;
}
.leaderboard-row:hover .leaderboard-action {
    color: var(--primary);
    transform: translateX(3px);
}
@media (max-width: 600px) {
    .leaderboard-row {
        gap: 0.5rem;
        padding: 0.6rem 0.6rem;
    }
    .leaderboard-avatar, .leaderboard-avatar-letter {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
    }
    .leaderboard-name {
        font-size: 0.85rem;
    }
    .leaderboard-subs {
        font-size: 0.7rem;
    }
    .leaderboard-views-num {
        font-size: 0.95rem;
    }
    .leaderboard-views-label {
        display: none;
    }
    .leaderboard-action {
        display: none;
    }
}

/* ===== Admin Analytics Page ===== */
.analytics-page {
    padding: 1.5rem 2rem;
    max-width: 100%;
}
.analytics-page .admin-header {
    margin-bottom: 1.5rem;
}
.analytics-period-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.analytics-period-tab {
    padding: 0.5rem 1.25rem;
    border-radius: 100px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s;
}
.analytics-period-tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.analytics-period-tab:hover:not(.active) {
    border-color: var(--primary);
    color: var(--primary);
}

.analytics-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.analytics-kpi-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: transform 0.15s, border-color 0.15s;
}
.analytics-kpi-card:hover {
    transform: translateY(-2px);
    border-color: rgba(249, 115, 22, 0.3);
}
.kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.kpi-icon-indigo { background: rgba(249, 115, 22,0.15); color: #f97316; }
.kpi-icon-emerald { background: rgba(16,185,129,0.15); color: #10b981; }
.kpi-icon-amber { background: rgba(249, 115, 22,0.15); color: #f97316; }
.kpi-icon-red { background: rgba(239,68,68,0.15); color: #ef4444; }
.kpi-icon-blue { background: rgba(59,130,246,0.15); color: #3b82f6; }
.kpi-icon-green { background: rgba(34,197,94,0.15); color: #22c55e; }
.kpi-icon-pink { background: rgba(236,72,153,0.15); color: #ec4899; }
.kpi-icon-cyan { background: rgba(6,182,212,0.15); color: #06b6d4; }
.kpi-icon-purple { background: rgba(139,92,246,0.15); color: #8b5cf6; }
.kpi-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.kpi-value {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.1;
}
.kpi-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.kpi-sub {
    font-size: 0.66rem;
    color: var(--primary);
    font-weight: 600;
}

.analytics-chart-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.analytics-chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
}
.analytics-chart-card h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.analytics-chart-card h3 i {
    color: var(--primary);
}

.analytics-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 140px;
    padding-bottom: 0.5rem;
}
.analytics-bar-group {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 100%;
    min-width: 6px;
}
.analytics-bar {
    flex: 1;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    transition: opacity 0.15s;
}
.analytics-bar-indigo { background: #f97316; }
.analytics-bar-emerald { background: #10b981; }
.analytics-bar-amber { background: #f97316; }
.analytics-bar-blue { background: #3b82f6; }
.analytics-chart-legend {
    display: flex;
    gap: 1.25rem;
    margin-top: 0.75rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 0.3rem;
    vertical-align: middle;
}
.legend-indigo { background: #f97316; }
.legend-emerald { background: #10b981; }
.legend-amber { background: #f97316; }
.legend-blue { background: #3b82f6; }

.analytics-tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
.analytics-tech-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}
.tech-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.tech-value {
    font-size: 1.1rem;
    font-weight: 700;
}
.tech-value-red { color: #ef4444; }
.tech-value-amber { color: #f97316; }
.tech-value-green { color: #22c55e; }

.analytics-device-list, .analytics-category-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.analytics-device-row, .analytics-category-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.device-name, .cat-name {
    font-size: 0.82rem;
    font-weight: 600;
    min-width: 80px;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.device-bar-wrap, .cat-bar-wrap {
    flex: 1;
    height: 8px;
    background: var(--surface-3);
    border-radius: 100px;
    overflow: hidden;
}
.device-bar, .cat-bar {
    height: 100%;
    border-radius: 100px;
    background: var(--primary);
    transition: width 0.3s;
}
.cat-bar { background: var(--primary); }
.cat-auth { background: #f97316; }
.cat-upload { background: #f97316; }
.cat-video { background: #3b82f6; }
.cat-engagement { background: #ec4899; }
.cat-fanfuel { background: #10b981; }
.cat-wallet { background: #22c55e; }
.cat-search { background: #06b6d4; }
.cat-technical { background: #ef4444; }
.cat-admin { background: #8b5cf6; }
.device-count, .cat-count {
    font-size: 0.82rem;
    font-weight: 700;
    min-width: 50px;
    text-align: right;
}

.analytics-table {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.analytics-table-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.6rem;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}
.analytics-table-rank {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-secondary);
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}
.analytics-table-query {
    flex: 1;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.analytics-table-video {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.analytics-table-video a {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.analytics-table-meta {
    font-size: 0.7rem;
    color: var(--text-secondary);
}
.analytics-table-count {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary);
    flex-shrink: 0;
}

.analytics-error-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 320px;
    overflow-y: auto;
}
.analytics-error-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    background: rgba(239,68,68,0.06);
    border-radius: var(--radius-sm);
    border-left: 3px solid #ef4444;
}
.error-cat {
    font-size: 0.72rem;
    font-weight: 700;
    color: #ef4444;
    white-space: nowrap;
}
.error-msg {
    flex: 1;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.error-time {
    font-size: 0.7rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.analytics-empty {
    color: var(--text-secondary);
    font-size: 0.85rem;
    padding: 1rem 0;
    text-align: center;
}

@media (max-width: 1200px) {
    .analytics-kpi-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
    .analytics-kpi-grid { grid-template-columns: repeat(3, 1fr); }
    .analytics-chart-row { grid-template-columns: 1fr; }
    .analytics-tech-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .analytics-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .analytics-tech-grid { grid-template-columns: 1fr; }
}

/* FanFuel CTA */
.fanfuel-cta {
    margin: 2rem 0 1.5rem;
}
.fanfuel-cta-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.75rem 2rem;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.10), rgba(20, 184, 166, 0.10));
    border: 1px solid rgba(234, 88, 12, 0.20);
    flex-wrap: wrap;
}
.fanfuel-cta-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 280px;
}
.fanfuel-cta-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ea580c, #14b8a6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    flex-shrink: 0;
}
.fanfuel-cta-text h3 {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 0.25rem 0;
    color: #ea580c;
}
.fanfuel-cta-text p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
    max-width: 480px;
}
.fanfuel-cta-actions {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
}
.fanfuel-btn {
    white-space: nowrap;
    background: #14b8a6;
    border-color: #14b8a6;
    color: #fff;
    box-shadow: none;
}
.fanfuel-btn:hover {
    background: #0d9488;
    border-color: #0d9488;
    box-shadow: none;
}
.fanfuel-btn-ghost {
    white-space: nowrap;
    color: #ea580c;
    border-color: rgba(234, 88, 12, 0.3);
}
.fanfuel-btn-ghost:hover {
    background: rgba(234, 88, 12, 0.08);
    border-color: #ea580c;
    color: #c2410c;
}
@media (max-width: 600px) {
    .fanfuel-cta-card {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem 1.25rem;
    }
    .fanfuel-cta-content {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    .fanfuel-cta-text p {
        max-width: 100%;
    }
    .fanfuel-cta-actions {
        width: 100%;
        flex-direction: column;
    }
    .fanfuel-btn, .fanfuel-btn-ghost {
        width: 100%;
        justify-content: center;
    }
}

/* Section Headers */
.home-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.home-section-head h3 {
    font-size: 1.1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.home-section-head h3 i {
    color: var(--primary);
    font-size: 1.25rem;
}

.home-see-all {
    display: flex;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: color 0.15s;
}

.home-see-all:hover { color: var(--primary); }

.home-see-all i { font-size: 1.1rem; }

/* Video Card Polish */
.home-page .video-card {
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.2s ease;
    cursor: pointer;
}

.home-page .video-card:hover {
    transform: translateY(-3px);
}

.home-page .video-thumb {
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-radius 0.2s;
}

.home-page .video-card:hover .video-thumb {
    border-radius: var(--radius) var(--radius) 0 0;
}

.home-page .video-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background 0.2s;
    border-radius: inherit;
}

.home-page .video-card:hover .video-thumb::after {
    background: rgba(0,0,0,0.1);
}

.home-page .play-icon {
    position: absolute;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

.home-page .video-card:hover .play-icon {
    opacity: 1;
}

.home-page .video-card-body {
    padding: 0.75rem 0.5rem;
}

.home-page .video-info h3 {
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.3rem;
}

.home-page .video-info .meta {
    font-size: 0.8rem;
}

/* Empty State */
.home-empty {
    text-align: center;
    padding: 4rem 1rem;
}

.home-empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-empty-icon i {
    font-size: 2.5rem;
    color: var(--text-secondary);
}

.home-empty h3 {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.home-empty p {
    color: var(--text-secondary);
    font-size: 0.88rem;
    margin-bottom: 1.5rem;
}

/* Load more button polish */
.home-page .load-more-wrap {
    margin-top: 2rem;
}

.home-page .load-more-wrap .btn {
    padding: 0.7rem 2rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.88rem;
}

/* ===== Channel Social Links ===== */

.channel-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.channel-social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--text-secondary);
    transition: all 0.15s;
}

.channel-social-link:hover {
    transform: translateY(-2px);
    background: var(--surface-3);
    color: var(--text);
    border-color: var(--primary);
}

.channel-social-link i.bxl-twitter:hover { color: #1da1f2; }
.channel-social-link i.bxl-instagram:hover { color: #e1306c; }
.channel-social-link i.bxl-youtube:hover { color: #ff0000; }
.channel-social-link i.bxl-tiktok:hover { color: #fff; }
.channel-social-link i.bxl-facebook:hover { color: #1877f2; }
.channel-social-link i.bxl-github:hover { color: var(--text); }
.channel-social-link i.bxl-discord:hover { color: #5865f2; }
.channel-social-link i.bxl-twitch:hover { color: #9146ff; }
.channel-social-link i.bxl-linkedin:hover { color: #0a66c2; }
.channel-social-link i.bxl-patreon:hover { color: #ff5900; }

/* ===== Studio Social Links Editor ===== */

.cust-social-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 600px) {
    .cust-social-grid { grid-template-columns: 1fr; }
}

.cust-social-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.cust-social-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.cust-social-field {
    flex: 1;
    min-width: 0;
}

.cust-social-field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.cust-social-field input {
    width: 100%;
    padding: 0.4rem 0.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.82rem;
    outline: none;
}

.cust-social-field input:focus {
    border-color: var(--primary);
}

/* ===== Site Footer ===== */

.site-footer {
    margin-top: 3rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 2.5rem 0 1.5rem;
    flex-shrink: 0;
}

.footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.footer-top {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 2.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .footer-top { grid-template-columns: 1fr; gap: 1.5rem; }
}

.footer-brand {
    max-width: 280px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 0.6rem;
}

.footer-logo .logo-icon {
    color: var(--primary);
    font-size: 1.6rem;
}

.footer-tagline {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

@media (max-width: 600px) {
    .footer-links { grid-template-columns: repeat(2, 1fr); }
}

.footer-col h4 {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
    color: var(--text);
}

.footer-col a {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 0.25rem 0;
    transition: color 0.15s;
}

.footer-col a:hover {
    color: var(--primary);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.footer-bottom p {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.footer-social {
    display: flex;
    gap: 0.5rem;
}

.footer-social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: var(--text-secondary);
    transition: all 0.15s;
}

.footer-social a:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: translateY(-2px);
}

/* Hide footer on admin and studio pages */
.no-sidebar .site-footer,
.admin-layout ~ .site-footer {
    display: none;
}

/* ===== Auth Slideshow ===== */

.auth-slideshow {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.auth-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1s ease, transform 6s ease;
    text-align: center;
    padding: 2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.auth-slide.active {
    opacity: 1;
    transform: scale(1);
}

.auth-slide-icon {
    font-size: 5rem;
    color: rgba(255,255,255,0.9);
    filter: drop-shadow(0 4px 20px rgba(0,0,0,0.3));
}

.auth-slide-caption {
    font-size: 1.15rem;
    font-weight: 600;
    color: rgba(255,255,255,0.95);
    max-width: 320px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
    line-height: 1.4;
}

.auth-slide-dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 2;
}

.auth-slide-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    transition: all 0.3s;
}

.auth-slide-dot.active {
    background: #fff;
    width: 24px;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .auth-slide-icon { font-size: 3.5rem; }
    .auth-slide-caption { font-size: 0.95rem; max-width: 260px; }
}

/* Brand stats */
.auth-brand-stats {
    display: flex;
    gap: 2rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.15);
}

.auth-brand-stat strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
}

.auth-brand-stat span {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
}

@media (max-width: 768px) {
    .auth-brand-stats { gap: 1.25rem; }
    .auth-brand-stat strong { font-size: 1.2rem; }
}

/* ===== Verification CTA ===== */

.side-verify-cta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    margin: 0.5rem 0.25rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(249, 115, 22,0.12), rgba(139,92,246,0.12));
    border: 1px solid rgba(249, 115, 22,0.25);
    transition: all 0.15s;
    text-decoration: none;
}

.side-verify-cta:hover {
    background: linear-gradient(135deg, rgba(249, 115, 22,0.2), rgba(139,92,246,0.2));
    border-color: rgba(249, 115, 22,0.4);
    transform: translateY(-1px);
}

.side-verify-cta > i {
    font-size: 1.4rem;
    color: var(--primary);
    flex-shrink: 0;
}

.side-verify-cta strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
}

.side-verify-cta span {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.channel-owner-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.btn-verify-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary), var(--primary-2, #8b5cf6));
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    transition: transform 0.15s, box-shadow 0.15s;
}

.btn-verify-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(249, 115, 22,0.3);
}

.btn-verify-cta i {
    font-size: 1.05rem;
}

/* ===== Enhanced Video Edit Modal ===== */

.modal-box-wide {
    max-width: 720px;
    width: 90%;
}

.edit-form-grid {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

@media (max-width: 600px) {
    .edit-form-grid { grid-template-columns: 1fr; }
}

.edit-form-left label {
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: 0.75rem;
    margin-bottom: 0.3rem;
    display: block;
}

.edit-form-left label small {
    font-weight: 400;
    color: var(--text-secondary);
}

.edit-form-left input[type="text"],
.edit-form-left input[type="datetime-local"],
.edit-form-left input[type="date"],
.edit-form-left textarea,
.edit-form-left select {
    width: 100%;
    padding: 0.5rem 0.7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.85rem;
    font-family: inherit;
}

.edit-form-left textarea {
    resize: vertical;
    min-height: 80px;
}

.edit-form-left input:focus,
.edit-form-left textarea:focus,
.edit-form-left select:focus {
    border-color: var(--primary);
    outline: none;
}

.edit-form-left small {
    display: block;
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

.edit-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

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

.edit-form-right label {
    font-size: 0.82rem;
    font-weight: 600;
}

.edit-thumb-preview-large {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn-block {
    width: 100%;
    text-align: center;
    justify-content: center;
}

.edit-video-stats {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.edit-stat {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.edit-stat i {
    font-size: 1rem;
    color: var(--primary);
}

/* ===== Watch Recording Location ===== */

.watch-location {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: -0.5rem 0 0.75rem;
}

.watch-location i {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

/* ===== Video Analytics Page ===== */

.video-analytics-page {
    width: 100%;
    max-width: none;
    padding-top: 1rem;
}

.va-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    transition: color 0.15s;
}

.va-back:hover { color: var(--primary); }

.va-video-header {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.va-video-thumb {
    width: 200px;
    aspect-ratio: 16/9;
    border-radius: var(--radius);
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    position: relative;
}

.va-video-info {
    flex: 1;
    min-width: 0;
}

.va-video-info h1 {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.va-video-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 0.85rem;
}

.va-video-meta span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

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

@media (max-width: 600px) {
    .va-video-header { flex-direction: column; }
    .va-video-thumb { width: 100%; }
}

/* Stats grid */
.va-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.85rem;
    margin-bottom: 2rem;
}

@media (max-width: 1024px) {
    .va-stats-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .va-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

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

.va-stat-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: transform 0.15s;
}

.va-stat-card:hover { transform: translateY(-2px); }

.va-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.va-stat-body strong {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.1;
}

.va-stat-body span {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    margin-top: 0.1rem;
}

.va-stat-body small {
    display: block;
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

/* Chart sections */
.va-chart-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.va-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.va-section-head h3 {
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.va-section-head h3 i { color: var(--primary); }

.va-section-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--surface-2);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

.va-section-link {
    font-size: 0.8rem;
    color: var(--primary);
    font-weight: 600;
}

.va-chart {
    width: 100%;
    height: auto;
}

.va-no-data {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem;
    font-size: 0.85rem;
}

/* Two column layout */
.va-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .va-two-col { grid-template-columns: 1fr; }
}

/* Watch time buckets */
.va-watch-buckets {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.va-bucket {
    display: grid;
    grid-template-columns: 80px 1fr 50px;
    align-items: center;
    gap: 0.75rem;
}

.va-bucket-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: right;
}

.va-bucket-bar {
    height: 10px;
    background: var(--surface-2);
    border-radius: 999px;
    overflow: hidden;
}

.va-bucket-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #c2410c);
    border-radius: 999px;
    transition: width 0.3s;
}

.va-bucket-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
}

/* Recent comments */
.va-comment-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.va-comment {
    display: flex;
    gap: 0.65rem;
    padding: 0.75rem;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}

.va-comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.va-comment-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-3);
    font-weight: 700;
    font-size: 0.85rem;
}

.va-comment-head {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.2rem;
}

.va-comment-head strong {
    font-size: 0.82rem;
}

.va-comment-time {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-left: auto;
}

.va-comment-body p {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ===== Video Analytics — New Sections ===== */

/* Traffic source list */
.va-source-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.va-source-row {
    display: grid;
    grid-template-columns: 180px 1fr 100px;
    align-items: center;
    gap: 0.85rem;
}

.va-source-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.va-source-info i {
    font-size: 1.1rem;
    color: var(--primary);
}

.va-source-bar-wrap {
    height: 12px;
    background: var(--surface-2);
    border-radius: 999px;
    overflow: hidden;
}

.va-source-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #c2410c);
    border-radius: 999px;
    transition: width 0.3s;
}

.va-source-bar-purple {
    background: linear-gradient(90deg, #8b5cf6, #6d28d9);
}

.va-source-numbers {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
}

.va-source-numbers strong {
    font-size: 0.85rem;
    font-weight: 700;
}

.va-source-numbers span {
    font-size: 0.78rem;
    color: var(--text-secondary);
    min-width: 40px;
    text-align: right;
}

@media (max-width: 600px) {
    .va-source-row { grid-template-columns: 120px 1fr 80px; gap: 0.5rem; }
    .va-source-info { font-size: 0.78rem; }
}

/* Retention chart */
.va-retention-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
    height: 200px;
    padding-top: 1rem;
}

.va-retention-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.va-retention-bar-wrap {
    flex: 1;
    width: 100%;
    max-width: 50px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.va-retention-bar {
    width: 80%;
    background: linear-gradient(180deg, var(--primary), #c2410c);
    border-radius: 4px 4px 0 0;
    min-height: 2px;
    transition: height 0.3s;
}

.va-retention-label {
    font-size: 0.68rem;
    color: var(--text-secondary);
    margin-top: 0.3rem;
    white-space: nowrap;
}

.va-retention-pct {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text);
}

/* Hourly chart */
.va-hourly-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 160px;
}

.va-hour-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-width: 0;
}

.va-hour-bar-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.va-hour-bar {
    width: 70%;
    background: var(--primary);
    border-radius: 3px 3px 0 0;
    min-height: 1px;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.va-hour-col:hover .va-hour-bar {
    opacity: 1;
}

.va-hour-label {
    font-size: 0.6rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    white-space: nowrap;
}

/* Day of week chart */
.va-dow-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 160px;
}

.va-dow-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.va-dow-bar-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.va-dow-bar {
    width: 60%;
    background: linear-gradient(180deg, #3b82f6, #1d4ed8);
    border-radius: 4px 4px 0 0;
    min-height: 2px;
    transition: height 0.3s;
}

.va-dow-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 0.3rem;
}

.va-dow-count {
    font-size: 0.68rem;
    color: var(--text);
    font-weight: 600;
}

/* ===== Upload: Monetization toggle ===== */
.monetize-toggle-wrap {
    margin: 1.5rem 0;
}
.monetize-toggle {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--surface-2);
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.15s;
}
.monetize-toggle:hover {
    background: var(--surface-3);
}
.monetize-toggle input[type="checkbox"] {
    width: 48px;
    height: 26px;
    appearance: none;
    background: var(--surface-4);
    border-radius: 9999px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}
.monetize-toggle input[type="checkbox"]::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    top: 3px;
    left: 3px;
    transition: transform 0.2s;
}
.monetize-toggle input[type="checkbox"]:checked {
    background: var(--accent);
}
.monetize-toggle input[type="checkbox"]:checked::before {
    transform: translateX(22px);
}
.monetize-toggle-label {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.monetize-toggle-label strong {
    font-size: 1rem;
    color: var(--text);
}
.monetize-toggle-label .meta {
    font-size: 0.82rem;
}
.monetize-info-box {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 10px;
    margin-bottom: 1rem;
}
.monetize-info-box i {
    font-size: 1.3rem;
    color: #3b82f6;
    flex-shrink: 0;
    margin-top: 2px;
}
.monetize-info-box p {
    font-size: 0.85rem;
    color: var(--text);
    margin: 0;
}
.ad-stats {
    display: flex;
    gap: 1.5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}
.ad-stat-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--text);
}
.ad-stat-item i {
    color: var(--accent);
}

/* ===== Upload: Content detection step ===== */
.detection-clean {
    text-align: center;
    padding: 2.5rem 1rem;
}
.detection-clean-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
.detection-clean-icon i {
    font-size: 2rem;
    color: #22c55e;
}
.detection-clean h4 {
    margin-bottom: 0.5rem;
}
.detection-warning-box {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid rgba(249, 115, 22, 0.3);
    border-radius: 10px;
    margin: 1.5rem 0;
}
.detection-warning-box i {
    font-size: 1.3rem;
    color: #f97316;
    flex-shrink: 0;
    margin-top: 2px;
}
.detection-warning-box p {
    font-size: 0.85rem;
    margin: 0;
}

/* ===== Upload: Review step ===== */
.review-detection-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    margin-bottom: 1.5rem;
}
.review-detection-notice i {
    font-size: 1.3rem;
    color: #ef4444;
    flex-shrink: 0;
    margin-top: 2px;
}
.review-detection-notice p {
    font-size: 0.88rem;
    margin: 0;
}
.review-confirm {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--surface-2);
    border-radius: 10px;
    margin: 1rem 0;
    cursor: pointer;
}
.review-confirm input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
}
.review-confirm span {
    font-size: 0.88rem;
    color: var(--text);
}
.detection-flag {
    color: #ef4444;
    font-weight: 600;
}
.detection-clean-text {
    color: #22c55e;
    font-weight: 600;
}
.upload-review-pending {
    text-align: center;
    padding: 2rem 1rem;
}
.upload-review-pending i {
    font-size: 3rem;
    color: #f97316;
    display: block;
    margin-bottom: 1rem;
}
.upload-review-pending h3 {
    margin-bottom: 0.75rem;
}
.upload-review-pending p {
    max-width: 400px;
    margin: 0 auto 0.5rem;
}

/* ===== Admin: Content review ===== */
.content-review-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.content-review-card {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--surface-2);
    border-radius: 14px;
    border: 1px solid rgba(249, 115, 22, 0.2);
}
.content-review-thumb {
    position: relative;
    width: 180px;
    min-width: 180px;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16/9;
}
.content-review-thumb img,
.content-review-thumb .thumbnail-empty {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.content-review-thumb .thumbnail-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-3);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-secondary);
}
.content-review-info {
    flex: 1;
    min-width: 0;
}
.content-review-info h4 {
    margin-bottom: 0.5rem;
}
.content-review-creator {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}
.content-review-creator img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}
.content-review-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.content-review-flag-count {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    font-size: 0.8rem;
    font-weight: 600;
}
.content-review-flag-types {
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.content-review-matches {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.content-review-match-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.4rem 0.6rem;
    background: var(--surface-3);
    border-radius: 8px;
    font-size: 0.8rem;
}
.content-review-match-item .match-type {
    color: #f97316;
    font-weight: 600;
}
.content-review-match-item .match-conf {
    margin-left: auto;
    color: #ef4444;
    font-weight: 700;
}
.content-review-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
}
@media (max-width: 700px) {
    .content-review-card {
        flex-direction: column;
    }
    .content-review-thumb {
        width: 100%;
        min-width: 0;
    }
    .content-review-actions {
        flex-direction: row;
    }
}

/* ===== Search Filters Sidebar ===== */
.search-filter-toggle {
    display: none;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 1rem;
}
.search-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}
.search-filters {
    width: 240px;
    flex-shrink: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    position: sticky;
    top: 80px;
}
.search-filter-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.search-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.search-filter-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.search-filter-select {
    padding: 0.5rem 0.6rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
}
.search-filter-clear {
    font-size: 0.8rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    padding-top: 0.25rem;
}
.search-results-main {
    flex: 1;
    min-width: 0;
}
@media (max-width: 900px) {
    .search-filter-toggle { display: inline-flex; }
    .search-layout { flex-direction: column; }
    .search-filters {
        width: 100%;
        position: static;
        display: none;
    }
    .search-filters.open { display: block; }
}

/* ===== Notification Settings Panel ===== */
.notif-settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
    font-size: 1.1rem;
    transition: background 0.15s, border-color 0.15s;
}
.notif-settings-btn:hover { background: var(--surface-2); border-color: var(--primary); }
.notif-settings-panel {
    display: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.notif-settings-panel.open { display: block; }
.notif-settings-panel h3 {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.notif-settings-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.notif-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
}
.notif-setting-row label {
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.notif-toggle {
    position: relative;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}
.notif-toggle input { opacity: 0; width: 100%; height: 100%; position: absolute; margin: 0; cursor: pointer; }
.notif-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: 999px;
    transition: background 0.2s;
}
.notif-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.notif-toggle input:checked + .notif-toggle-slider { background: var(--primary); }
.notif-toggle input:checked + .notif-toggle-slider::before { transform: translateX(18px); }
.notif-header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* ===== History Controls ===== */
.history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.history-search-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.7rem;
    min-width: 240px;
}
.history-search-box i { color: var(--text-secondary); }
.history-search-box input {
    border: none;
    background: transparent;
    color: var(--text);
    outline: none;
    font-size: 0.9rem;
    width: 100%;
}
.history-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: var(--radius-sm);
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.history-clear-btn:hover { background: rgba(239,68,68,0.2); }
.history-item-wrap {
    position: relative;
}
.history-remove-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.15s;
}
.history-item-wrap:hover .history-remove-btn { opacity: 1; }

/* ===== Analytics CSV Export ===== */
.va-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.va-export-btn:hover { background: var(--surface-2); border-color: var(--primary); }

/* ===== Monetization & Payouts ===== */

/* FanFuel button on watch page */
.btn-super-thanks {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    border: none;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    transition: transform 0.15s, box-shadow 0.15s;
    text-decoration: none;
}
.btn-super-thanks:hover {
    transform: translateY(-1px);
    color: #fff;
}

/* Tip modal */
.tip-modal-subtitle {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.tip-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.tip-amount-btn {
    background: var(--surface-2);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 0.6rem 1.1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    font-family: inherit;
}
.tip-amount-btn:hover {
    border-color: var(--primary);
    background: var(--surface-3);
}
.tip-amount-btn.selected {
    border-color: var(--primary);
    background: rgba(249, 115, 22, 0.12);
    color: var(--primary);
    transform: scale(1.05);
}
.tip-custom-field,
.tip-message-field {
    margin-bottom: 0.85rem;
}
.tip-custom-field label,
.tip-message-field label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
    color: var(--text-secondary);
}
.tip-custom-field input,
.tip-message-field textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
}
.tip-message-field textarea {
    resize: vertical;
    min-height: 50px;
}

/* Earn view — balance summary */
.earn-balance-summary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin: 1rem 0;
}
.earn-balance-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}
.earn-balance-item:last-child {
    border-bottom: none;
}
.earn-balance-item.highlight {
    background: rgba(249, 115, 22, 0.08);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-top: 0.25rem;
    border: 1px solid rgba(249, 115, 22, 0.3);
    border-bottom: 1px solid rgba(249, 115, 22, 0.3);
}
.earn-balance-label {
    font-size: 0.88rem;
    color: var(--text-secondary);
    flex: 1;
}
.earn-balance-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    text-align: right;
    min-width: 100px;
}
.earn-balance-item.highlight .earn-balance-value {
    color: var(--primary);
    font-size: 1.15rem;
}
.earn-balance-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

/* Earn view — payout request form */
.earn-payout-request {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin: 1rem 0;
}
.earn-payout-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.earn-payout-head h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}
.earn-payout-threshold {
    font-size: 0.82rem;
    color: var(--text-secondary);
    background: var(--surface-2);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
}
.earn-payout-form {
    display: grid;
    gap: 0.75rem;
}
.earn-payout-field label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
    color: var(--text-secondary);
}
.earn-payout-field input,
.earn-payout-field select {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
}
.earn-payout-btn {
    justify-self: start;
    margin-top: 0.25rem;
}

/* Earn view — payout locked */
.earn-payout-locked {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin: 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-secondary);
}
.earn-payout-locked i {
    font-size: 1.5rem;
    color: var(--text-secondary);
}
.earn-payout-locked p {
    margin: 0;
    font-size: 0.88rem;
}

/* Earn view — payout history table */
.earn-payout-history {
    margin: 1.5rem 0;
}
.earn-payout-history h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.earn-payout-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.earn-payout-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.earn-payout-table th {
    background: var(--surface-2);
    padding: 0.6rem 0.8rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.earn-payout-table td {
    padding: 0.6rem 0.8rem;
    border-top: 1px solid var(--border);
    vertical-align: top;
}
.earn-payout-table td small {
    color: var(--text-secondary);
}

/* Payout status badges */
.payout-status {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}
.payout-status-pending { background: rgba(234, 179, 8, 0.15); color: #eab308; }
.payout-status-approved { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.payout-status-paid { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.payout-status-rejected { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

/* Earn view — tips section */
.earn-tips-section {
    margin: 1.5rem 0;
}
.earn-tips-section h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.earn-tips-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.earn-tip-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.earn-tip-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-secondary);
    flex-shrink: 0;
    overflow: hidden;
}
.earn-tip-avatar i {
    font-size: 1.1rem;
}
.earn-tip-info {
    flex: 1;
    min-width: 0;
}
.earn-tip-info strong {
    font-size: 0.88rem;
}
.earn-tip-info span {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.earn-tip-info span a {
    color: var(--primary);
}
.earn-tip-info p {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0.2rem 0 0;
    font-style: italic;
}
.earn-tip-amount {
    font-size: 1rem;
    font-weight: 700;
    color: #22c55e;
    flex-shrink: 0;
}

/* Admin — stat row for payouts */
.admin-stat-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.admin-stat-card {
    flex: 1;
    min-width: 140px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.admin-stat-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
}
.admin-stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Admin — filter tabs */
.admin-filter-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0;
}
.admin-filter-tab {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.admin-filter-tab:hover {
    color: var(--text);
}
.admin-filter-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.admin-muted {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Message styles for tip feedback */
.message-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}
.message-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}

/* Responsive */
@media (max-width: 700px) {
    .earn-balance-item {
        flex-wrap: wrap;
    }
    .earn-balance-value {
        min-width: 80px;
    }
    .earn-payout-form {
        gap: 0.6rem;
    }
    .admin-stat-row {
        gap: 0.5rem;
    }
    .admin-stat-card {
        min-width: calc(50% - 0.25rem);
    }
    .earn-tip-row {
        flex-wrap: wrap;
    }
    .tip-amount-btn {
        flex: 1;
        min-width: 70px;
    }
}

/* ===== Full-page Edit Video ===== */

.edit-page {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
}

.edit-page-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    position: sticky;
    top: 60px;
    z-index: 10;
    flex-wrap: wrap;
}

.edit-page-topbar-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.edit-page-title {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0;
}

.edit-page-message {
    margin: 1rem 2rem 0;
}

.edit-page-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0;
    align-items: start;
    min-height: calc(100vh - 120px);
}

/* Section navigation sidebar */
.edit-nav-sidebar {
    position: sticky;
    top: 120px;
    height: calc(100vh - 120px);
    border-right: 1px solid var(--border);
    background: var(--surface);
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
}

.edit-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.edit-nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}

.edit-nav-link i {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.edit-nav-link:hover {
    background: var(--surface-2);
    color: var(--text);
}

.edit-nav-link.active {
    background: rgba(249, 115, 22, 0.1);
    color: var(--primary);
    font-weight: 600;
}

.edit-nav-save {
    padding: 1rem 0.5rem 0.5rem;
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Main content area */
.edit-page-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem 2rem 3rem;
    width: 100%;
}

/* Edit section card */
.edit-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.edit-section-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.edit-section-head > i {
    font-size: 1.25rem;
    color: var(--primary);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.edit-section-head h2 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.edit-section-head p {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0.15rem 0 0;
}

.edit-section-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Form fields */
.edit-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.edit-field label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
}

.edit-field label small {
    font-weight: 400;
    color: var(--text-secondary);
}

.edit-field input[type="text"],
.edit-field input[type="url"],
.edit-field input[type="number"],
.edit-field input[type="date"],
.edit-field input[type="datetime-local"],
.edit-field select,
.edit-field textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    transition: border-color 0.15s;
}

.edit-field input:focus,
.edit-field select:focus,
.edit-field textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.edit-field textarea {
    resize: vertical;
    min-height: 80px;
}

.edit-required {
    color: #ef4444;
}

.edit-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.85rem;
}

/* Chapter editor actions */
.chapter-editor-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

/* Thumbnail preview */
.edit-thumb-preview-large {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.edit-thumb-preview-large i {
    font-size: 2rem;
    color: var(--text-secondary);
}

/* Stats */
.edit-video-stats {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.edit-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.edit-stat i {
    font-size: 1.1rem;
    color: var(--primary);
}

.btn-block {
    width: 100%;
    text-align: center;
    justify-content: center;
}

/* Checkbox label inside edit sections */
.edit-section .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.88rem;
}

.edit-section .checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

/* Cards editor list inside edit page */
.edit-section .cards-editor-list {
    margin-top: 0.75rem;
}

/* Responsive */
@media (max-width: 900px) {
    .edit-page-layout {
        grid-template-columns: 1fr;
    }
    .edit-nav-sidebar {
        position: static;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 0.75rem 1rem;
    }
    .edit-nav {
        flex-direction: row;
        overflow-x: auto;
        gap: 0.25rem;
        padding-bottom: 0.25rem;
    }
    .edit-nav-link {
        white-space: nowrap;
        padding: 0.5rem 0.75rem;
    }
    .edit-nav-link span {
        display: inline;
    }
    .edit-nav-save {
        flex-direction: row;
        border-top: none;
        margin-top: 0;
        padding-top: 0.5rem;
    }
    .edit-nav-save .btn {
        flex: 1;
    }
    .edit-page-content {
        padding: 1rem;
    }
    .edit-page-topbar {
        padding: 0.75rem 1rem;
    }
}

@media (max-width: 600px) {
    .edit-page-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .edit-field-row {
        grid-template-columns: 1fr;
    }
    .edit-section-body {
        padding: 1rem;
    }
    .edit-section-head {
        padding: 0.75rem 1rem;
    }
}

/* ===== FanFuel Earnings Card (owner view) ===== */
.super-thanks-earnings {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(194, 65, 12, 0.04));
    border: 1px solid rgba(249, 115, 22, 0.25);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ste-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ste-header i {
    font-size: 1.5rem;
    color: var(--primary);
}

.ste-header h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
}

.ste-header small {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.ste-body {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}

.ste-amount {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--primary);
}

.ste-stats {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.ste-stats strong {
    color: var(--text);
}

.ste-link {
    font-size: 0.85rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.ste-link:hover {
    text-decoration: underline;
}

/* ===== Sidebar CTA Card (verification) ===== */
.sidebar-cta-card {
    margin-top: 1.25rem;
    padding: 1.25rem;
    border-radius: var(--radius);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.verification-cta {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(249, 115, 22, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.cta-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-card-icon i {
    font-size: 1.5rem;
    color: #3b82f6;
}

.sidebar-cta-card h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
}

.sidebar-cta-card p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.cta-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius);
    font-weight: 500;
}

.cta-status.pending {
    background: rgba(249, 115, 22, 0.1);
    color: #ea580c;
}

/* ===== Playlist Modal ===== */
.playlist-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.75rem;
}

.playlist-modal-head h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.playlist-modal-video-info {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--surface-2);
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.pmvi-thumb {
    width: 120px;
    height: 68px;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.pmvi-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
}

.pmvi-info strong {
    font-size: 0.9rem;
    line-height: 1.3;
}

.pmvi-info .meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.playlist-modal-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 280px;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.playlist-modal-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s;
}

.playlist-modal-item:hover {
    background: var(--surface-2);
}

.playlist-modal-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    flex-shrink: 0;
}

.pmi-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pmi-info strong {
    font-size: 0.9rem;
    font-weight: 600;
}

.pmi-info .meta {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.pm-check {
    color: var(--primary);
    font-size: 1.2rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.playlist-modal-item.added .pm-check {
    opacity: 1;
}

.playlist-modal-empty {
    text-align: center;
    padding: 1.5rem 0;
    color: var(--text-secondary);
}

.playlist-modal-create {
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}

.playlist-modal-create h4 {
    margin: 0 0 0.6rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.playlist-create-form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.playlist-create-form input[type="text"] {
    flex: 1;
    min-width: 150px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font-size: 0.88rem;
}

.playlist-create-form input[type="text"]:focus {
    outline: none;
    border-color: var(--primary);
}

.playlist-create-form select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font-size: 0.88rem;
}

.playlist-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

@media (max-width: 600px) {
    .playlist-create-form {
        flex-direction: column;
    }
    .playlist-create-form input[type="text"],
    .playlist-create-form select {
        width: 100%;
    }
    .playlist-modal-footer {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }
}

/* FanFuel mini badge (owner button bar) */
.super-thanks-mini {
    color: #22c55e !important;
    font-weight: 600;
}
.super-thanks-mini i {
    color: #22c55e;
}

/* ===== Wallet Page ===== */
.wallet-page {
    max-width: 900px;
    margin: 0 auto;
    padding-top: 1.5rem;
}

.wallet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.wallet-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.wallet-icon-lg {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wallet-icon-lg i {
    font-size: 1.75rem;
    color: #fff;
}

.wallet-header h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
}

.wallet-header p {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.wallet-balance-card {
    background: linear-gradient(135deg, #22c55e, #15803d);
    border-radius: var(--radius);
    padding: 1.25rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: #fff;
    min-width: 200px;
}

.wbc-label {
    font-size: 0.82rem;
    opacity: 0.9;
}

.wbc-amount {
    font-size: 2rem;
    font-weight: 800;
}

.wallet-alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.wallet-alert.success {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.wallet-alert.error {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.wallet-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.wallet-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.wallet-card h3 {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wallet-card h3 i {
    color: var(--primary);
}

.wallet-quick-amounts {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.wallet-quick-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.wallet-quick-btn:hover,
.wallet-quick-btn.selected {
    border-color: #22c55e;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.05);
}

.wallet-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}

.wallet-field label {
    font-size: 0.85rem;
    font-weight: 600;
}

.wallet-field input,
.wallet-field select {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
}

.wallet-field input:focus,
.wallet-field select:focus {
    outline: none;
    border-color: var(--primary);
}

.wallet-note {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.wallet-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

.wallet-stat:last-child {
    border-bottom: none;
}

.wallet-stat span {
    color: var(--text-secondary);
}

.wallet-stat strong {
    font-size: 1rem;
}

.stat-green { color: #22c55e; }
.stat-orange { color: var(--primary); }

.wallet-tx-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.wallet-tx-section h3 {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wallet-tx-table {
    overflow-x: auto;
}

.wallet-tx-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.wallet-tx-table th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 2px solid var(--border);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.wallet-tx-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.wallet-tx-type {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
}

.type-top_up { background: rgba(34, 197, 94, 0.1); color: #16a34a; }
.type-tip_sent { background: rgba(249, 115, 22, 0.1); color: #c2410c; }
.type-refund { background: rgba(59, 130, 246, 0.1); color: #2563eb; }
.type-adjustment { background: rgba(107, 114, 128, 0.1); color: #6b7280; }

.tx-positive { color: #22c55e; font-weight: 600; }
.tx-negative { color: #ef4444; font-weight: 600; }

/* Tip modal wallet balance */
.tip-wallet-balance {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    background: var(--surface-2);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.88rem;
}

.tip-wallet-balance i {
    font-size: 1.2rem;
    color: #22c55e;
}

.tip-wallet-balance strong {
    color: #22c55e;
}

.tip-topup-link {
    margin-left: auto;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.tip-topup-link:hover {
    text-decoration: underline;
}

@media (max-width: 700px) {
    .wallet-grid {
        grid-template-columns: 1fr;
    }
    .wallet-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===== Wallet payment instructions ===== */
.pay-instructions {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 0.85rem;
}

.pay-instr-block h4 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.pay-instr-block p {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.pay-detail-box {
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pay-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
}

.pay-detail-row span {
    color: var(--text-secondary);
}

.pay-detail-row strong {
    font-weight: 600;
}

.wallet-required {
    color: #ef4444;
}

.wallet-upload {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.wallet-upload:hover {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.03);
}

.wallet-upload i {
    font-size: 1.75rem;
    color: var(--text-secondary);
}

.wallet-upload span {
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.screenshot-thumb {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: var(--radius-sm);
    background-size: cover;
    background-position: center;
    background-color: var(--surface-2);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.15s;
}

.screenshot-thumb:hover {
    transform: scale(1.1);
}

/* Admin payment details form */
.admin-form-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.admin-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.admin-field label {
    font-size: 0.85rem;
    font-weight: 600;
}

.admin-field input,
.admin-field textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font-size: 0.88rem;
    font-family: inherit;
}

.admin-field input:focus,
.admin-field textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.admin-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.admin-card h3 {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-card-sub {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.admin-user-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

@media (max-width: 700px) {
    .admin-form-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Collaboration System ===== */

/* Edit video — collaborator add form */
.collab-add-form {
    margin-bottom: 1rem;
}

.collab-add-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 120px auto;
    gap: 0.5rem;
    align-items: center;
}

.collab-add-grid input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font-size: 0.88rem;
}

.collab-add-grid input:focus {
    outline: none;
    border-color: var(--primary);
}

.collab-hint {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Collaborator list in edit page */
.collab-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.collab-summary {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    background: var(--surface-2);
    border-radius: var(--radius);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.collab-summary strong {
    color: var(--primary);
}

.collab-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.collab-row.collab-pending {
    border-color: rgba(249, 115, 22, 0.3);
    background: rgba(249, 115, 22, 0.03);
}

.collab-row.collab-declined {
    border-color: rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.02);
    opacity: 0.7;
}

.collab-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.collab-avatar,
.collab-avatar-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

.collab-avatar {
    object-fit: cover;
}

.collab-avatar-placeholder {
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.collab-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.collab-user-info strong {
    font-size: 0.9rem;
}

.collab-user-info .meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.collab-share-wrap {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.collab-share-form {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.collab-share-form input {
    width: 70px;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 0.85rem;
    text-align: right;
}

.collab-share-form span {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.collab-status {
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-secondary);
    min-width: 80px;
    text-align: center;
}

.collab-pending .collab-status {
    background: rgba(249, 115, 22, 0.1);
    color: #ea580c;
}

.collab-accepted .collab-status {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.collab-declined .collab-status {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.collab-remove-form {
    display: inline;
}

/* Watch page — collaborator credits */
.collab-credits {
    margin-bottom: 1.5rem;
}

.collab-credits h4 {
    margin: 0 0 0.6rem;
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.collab-credits-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.collab-credit-chip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    transition: border-color 0.15s;
}

.collab-credit-chip:hover {
    border-color: var(--primary);
}

.collab-credit-avatar,
.collab-credit-avatar-placeholder {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
}

.collab-credit-avatar {
    object-fit: cover;
}

.collab-credit-avatar-placeholder {
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.collab-credit-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.collab-credit-role {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* Studio — collaborations */
.collab-studio-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.stat-card-mini {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.88rem;
}

.stat-card-mini i {
    font-size: 1.25rem;
    color: var(--primary);
}

.stat-card-mini strong {
    font-weight: 700;
}

.collab-invite-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.collab-invite-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.collab-invite-thumb {
    width: 80px;
    height: 45px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.collab-invite-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.collab-invite-info strong {
    font-size: 0.9rem;
}

.collab-invite-info .meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.collab-invite-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.collab-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.4rem;
}

.collab-share-badge {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

@media (max-width: 600px) {
    .collab-add-grid {
        grid-template-columns: 1fr;
    }
    .collab-row {
        flex-wrap: wrap;
    }
    .collab-invite-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .collab-invite-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ===== Stacked collaborator avatars (diagonal: collaborator on top, owner below) ===== */
.avatar-stack {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

/* No collaborators — single avatar displays normally */
.avatar-stack:not(.has-collab) .channel-avatar.avatar-main {
    width: 48px;
    height: 48px;
    position: static;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-secondary);
}

/* With collaborators — diagonal stack */
.avatar-stack.has-collab {
    width: 56px;
    height: 56px;
    cursor: pointer;
}

.avatar-stack.has-collab .channel-avatar.avatar-main,
.avatar-stack.has-collab .avatar-collab {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid var(--bg);
    object-fit: cover;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    position: absolute;
}

.avatar-stack .avatar-collab img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Collaborators on top, shifted up-right diagonally */
.avatar-stack.has-collab .avatar-collab-1 {
    top: 0;
    right: 0;
    z-index: 4;
}

.avatar-stack.has-collab .avatar-collab-2 {
    top: 2px;
    right: -4px;
    z-index: 3;
}

.avatar-stack.has-collab .avatar-collab-more {
    top: 4px;
    right: -8px;
    z-index: 2;
    background: var(--primary);
    color: #fff;
    font-size: 0.7rem;
}

/* Owner below, shifted down-left */
.avatar-stack.has-collab .avatar-main {
    bottom: 0;
    left: 0;
    z-index: 5;
}

/* Channel name with collaborators */
.collab-and {
    color: var(--text-secondary);
    font-weight: 400;
}

.collab-click-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.7;
    font-style: italic;
}

/* ===== Collaborators channel modal ===== */
.collab-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.75rem;
}

.collab-modal-head h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.collab-modal-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.collab-modal-channel {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}

.collab-modal-channel:hover {
    border-color: var(--primary);
    background: var(--surface-2);
}

.collab-modal-channel.collab-modal-owner {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.03);
}

.collab-modal-avatar,
.collab-modal-avatar-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
}

.collab-modal-avatar {
    object-fit: cover;
}

.collab-modal-avatar-placeholder {
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.collab-modal-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.collab-modal-info strong {
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.collab-modal-info .meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.collab-modal-arrow {
    font-size: 1.2rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .avatar-stack {
        width: 48px;
        height: 48px;
    }
    .avatar-stack .channel-avatar.avatar-main,
    .avatar-stack .avatar-collab {
        width: 34px;
        height: 34px;
        font-size: 0.75rem;
    }
}

/* Channel name with collaborators */
.collab-and {
    color: var(--text-secondary);
    font-weight: 400;
}

.collab-click-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.7;
    font-style: italic;
}

/* Avatar stack in video cards (smaller) */
.video-card-body .avatar-stack {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    position: relative;
}

/* No collaborators — show single avatar normally, centered */
.video-card-body .avatar-stack:not(.has-collab) {
    width: 40px;
    height: 40px;
}

.video-card-body .avatar-stack:not(.has-collab) .channel-avatar.avatar-main {
    width: 40px;
    height: 40px;
    position: static;
    border-width: 0;
}

/* With collaborators — diagonal stack */
.video-card-body .avatar-stack.has-collab .channel-avatar.avatar-main,
.video-card-body .avatar-stack.has-collab .avatar-collab {
    width: 30px;
    height: 30px;
    border-width: 2px;
    font-size: 0.7rem;
    position: absolute;
}

.video-card-body .avatar-stack.has-collab .avatar-collab-1 {
    top: 0;
    right: 0;
}

.video-card-body .avatar-stack.has-collab .avatar-collab-2 {
    top: 2px;
    right: -3px;
}

.video-card-body .avatar-stack.has-collab .avatar-collab-more {
    top: 4px;
    right: -6px;
    font-size: 0.55rem;
    position: absolute;
}

.video-card-body .avatar-stack.has-collab .avatar-main {
    bottom: 0;
    left: 0;
}

.video-card-body .video-info {
    flex: 1;
    min-width: 0;
}

.video-card-body .meta .collab-and {
    color: var(--text-secondary);
    font-weight: 400;
}

/* Verified badge in collaboration modal */
.collab-modal-info .verified-badge {
    font-size: 0.9rem;
    color: var(--verified-color);
    vertical-align: middle;
    margin-left: 0.2rem;
}

/* Channel action buttons — stay on one line */
.channel-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.channel-actions .action-form,
.channel-actions .btn {
    flex-shrink: 0;
    white-space: nowrap;
    margin-top: 0;
}

.channel-actions .btn-subscribe {
    border: 2px solid var(--primary);
    border-radius: 999px;
    padding: 0.45rem 1.25rem;
    font-weight: 700;
}

.channel-actions .btn-subscribe.subscribed {
    border-color: var(--border);
}

@media (max-width: 768px) {
    .channel-actions {
        flex-wrap: wrap;
        gap: 0.4rem;
    }
}

/* Video link preview in description */
.desc-video-preview {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    margin: 0.5rem 0;
    transition: border-color 0.15s;
    max-width: 400px;
}

.desc-video-preview:hover {
    border-color: var(--primary);
}

.desc-video-thumb {
    width: 160px;
    height: 90px;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    flex-shrink: 0;
    position: relative;
    background-size: cover;
    background-position: center;
}

.desc-video-dur {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 0.7rem;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
}

.desc-video-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    min-width: 0;
}

.desc-video-info strong {
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.3;
}

.desc-video-info .meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

@media (max-width: 600px) {
    .desc-video-preview {
        max-width: 100%;
    }
    .desc-video-thumb {
        width: 120px;
        height: 68px;
    }
}

/* Social links in channel header */
.channel-social-header {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.channel-social-header .channel-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--social-color, var(--text));
    font-size: 1.1rem;
    text-decoration: none;
    transition: transform 0.15s, background 0.15s, border-color 0.15s;
}

.channel-social-header .channel-social-link:hover {
    transform: translateY(-2px);
    background: var(--social-color, var(--primary));
    border-color: var(--social-color, var(--primary));
    color: #fff;
}

html[data-theme="light"] .channel-social-header .channel-social-link {
    color: var(--social-color, var(--text));
}

html[data-theme="light"] .channel-social-header .channel-social-link:hover {
    color: #fff;
}
CSSEEOF
echo "CSS appended"

/* ===== Feature Toggle Grid ===== */
.feature-toggle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.feature-toggle-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.15s;
}

.feature-toggle-card:hover {
    border-color: var(--primary);
}

.feature-toggle-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.feature-toggle-info {
    flex: 1;
    min-width: 0;
}

.feature-toggle-info strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.feature-toggle-info p {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.feature-toggle-card .admin-switch {
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .feature-toggle-grid {
        grid-template-columns: 1fr;
    }
}

/* Admin nav icon for Features */
.admin-nav-item .bx-customize { color: #f97316; }

/* Payouts page empty state */
.earn-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.earn-empty i {
    font-size: 3rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    display: block;
}

.earn-empty h3 {
    margin: 0 0 0.25rem;
    color: var(--text);
}

.earn-empty p {
    margin: 0;
    font-size: 0.9rem;
}

.earn-payout-link {
    margin: 1rem 0;
    text-align: center;
}

/* Studio sidebar Payouts icon color */
.studio-link .bx-wallet-alt { color: #14b8a6; }

/* Payouts page — stat cards and section head */
.studio-section-head {
    margin-bottom: 1.25rem;
}

.studio-section-head h2 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 0.15rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.studio-section-head p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.earn-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.earn-stat-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.earn-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.earn-stat-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.earn-stat-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
}

.earn-stat-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

@media (max-width: 600px) {
    .earn-stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    .earn-stat-card {
        padding: 0.75rem;
        gap: 0.5rem;
    }
    .earn-stat-icon {
        width: 34px;
        height: 34px;
        font-size: 1.1rem;
    }
    .earn-stat-value {
        font-size: 0.95rem;
    }
}

/* Full-width wallet page */
.wallet-main {
    margin-left: 300px;
    width: calc(100% - 300px);
    min-height: calc(100vh - 60px);
    padding: 2rem 3rem;
    background: var(--bg);
    flex: 1 0 auto;
}

body.no-sidebar .wallet-main {
    margin-left: 70px;
    width: calc(100% - 70px);
}

.wallet-main .wallet-page {
    max-width: 100%;
    width: 100%;
}

.wallet-main .wallet-grid {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 900px) {
    .wallet-main {
        padding: 1.5rem 1.25rem;
    }
    .wallet-main .wallet-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .wallet-main {
        margin-left: 0;
        width: 100%;
        padding: 1rem;
    }
}

/* ===== Shorts Page ===== */
.shorts-main {
    margin-left: 300px;
    width: calc(100% - 300px);
    min-height: calc(100vh - 60px);
    background: #000;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

body.no-sidebar .shorts-main {
    margin-left: 70px;
    width: calc(100% - 70px);
}

@media (max-width: 768px) {
    .shorts-main { margin-left: 0; width: 100%; }
}

.shorts-feed {
    max-width: 480px;
    margin: 0 auto;
}

.short-card {
    height: calc(100vh - 60px);
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.short-video-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 480px;
    background: #000;
}

.short-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.short-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 1rem 5rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    pointer-events: none;
}

.short-info { pointer-events: auto; }

.short-creator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.short-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
}

.short-username {
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
}

.short-title {
    color: #fff;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

.short-actions {
    position: absolute;
    right: 0.75rem;
    bottom: 5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    z-index: 5;
}

.short-action-btn {
    background: none;
    border: none;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    font-size: 0.75rem;
}

.short-action-btn i { font-size: 1.75rem; }
.short-action-btn.liked i { color: var(--primary); }

.shorts-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: #888;
}

.shorts-empty i { font-size: 3rem; display: block; margin-bottom: 1rem; }

/* ===== Clips Modal ===== */
.clip-time-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.form-field {
    margin-bottom: 0.75rem;
}

.form-field label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
    color: var(--text-secondary);
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
}

/* ===== Audio-only mode ===== */
.audio-only-mode {
    filter: blur(20px) brightness(0.3);
}

#audioModeBtn.active {
    color: var(--primary);
    background: rgba(249, 115, 22, 0.15);
}

/* ===== Video Polls ===== */
.watch-poll-container {
    margin: 1rem 0;
}

.watch-poll {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
}

.watch-poll h4 {
    font-size: 0.95rem;
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.poll-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.poll-option {
    position: relative;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    transition: border-color 0.15s;
    font-family: inherit;
    color: var(--text);
    font-size: 0.88rem;
}

.poll-option:hover:not(:disabled) {
    border-color: var(--primary);
}

.poll-option.voted {
    border-color: var(--primary);
}

.poll-option-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgba(249, 115, 22, 0.15);
    z-index: 0;
}

.poll-option-label,
.poll-option-pct {
    position: relative;
    z-index: 1;
}

.poll-option-pct {
    float: right;
    font-weight: 700;
}

.poll-total {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    display: block;
}

/* ===== Channel Goals Bar ===== */
.channel-goals-bar {
    display: flex;
    gap: 1.5rem;
    padding: 1rem 0;
    flex-wrap: wrap;
}

.channel-goal-item {
    flex: 1;
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
}

.channel-goal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.channel-goal-pct {
    color: var(--primary);
    font-weight: 800;
}

.channel-goal-bar {
    height: 8px;
    background: var(--surface-2);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.3rem;
}

.channel-goal-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s;
}

.channel-goal-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ===== Membership Badges ===== */
.membership-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 600;
}

/* ===== Goals List ===== */
.goals-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.goal-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
}

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

.goal-head h4 {
    margin: 0;
    font-size: 0.95rem;
}

.goal-type-badge {
    font-size: 0.72rem;
    text-transform: uppercase;
    background: var(--surface-2);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

.goal-progress-bar {
    height: 10px;
    background: var(--surface-2);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 0.4rem;
}

.goal-progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 5px;
    transition: width 0.3s;
}

.goal-stats {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Studio sidebar new icons */
.studio-link .bx-badge-check { color: #a855f7; }
.studio-link .bx-collection { color: #3b82f6; }
.studio-link .bx-target-lock { color: #22c55e; }
.studio-link .bx-scissors { color: #06b6d4; }
.studio-link .bx-headphone { color: #ea580c; }

/* ===== Shorts comments panel + play overlay ===== */
.short-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    border: none;
    color: #fff;
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: opacity 0.2s;
}

.short-play-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.short-comments-panel {
    position: absolute;
    right: -100%;
    top: 0;
    width: 360px;
    max-width: 85%;
    height: 100%;
    background: var(--surface);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 20;
    transition: right 0.3s ease;
}

.short-comments-panel.open {
    right: 0;
}

.short-comments-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.short-comments-head h4 {
    margin: 0;
    font-size: 1rem;
}

.short-comments-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0.25rem;
}

.short-comments-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1.25rem;
}

.short-comments-empty {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem 0;
    font-size: 0.88rem;
}

.short-comment {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.short-comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text);
    flex-shrink: 0;
}

.short-comment-body {
    flex: 1;
    min-width: 0;
}

.short-comment-body strong {
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.short-comment-body p {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--text);
    word-wrap: break-word;
}

.short-comment-form {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.short-comment-form input {
    flex: 1;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
}

.short-comment-form button {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.short-comments-login {
    text-align: center;
    padding: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-top: 1px solid var(--border);
}

.short-comments-login a {
    color: var(--primary);
    font-weight: 600;
}

.short-action-btn.disliked i { color: var(--primary); }

@media (max-width: 600px) {
    .short-comments-panel {
        width: 100%;
        max-width: 100%;
    }
}

/* Shorts comment meta + actions */
.short-comment-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.1rem;
}

.short-comment-meta strong {
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.short-comment-time {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.short-comment-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.35rem;
}

.sc-action {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    padding: 0.15rem 0;
    font-family: inherit;
}

.sc-action i { font-size: 0.95rem; }
.sc-action.active { color: var(--primary); }
.sc-action.heart-comment.active { color: #ef4444; }
.sc-action.dislike-comment.active { color: var(--text); }

.sc-heart-display {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.75rem;
    color: #ef4444;
}

.sc-heart-display i { font-size: 0.95rem; }

/* Upload button — light primary background */
.btn.upload-btn {
    background: rgba(249, 115, 22, 0.12);
    color: var(--primary);
    border: 1px solid rgba(249, 115, 22, 0.25);
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s;
}

.btn.upload-btn:hover {
    background: rgba(249, 115, 22, 0.2);
    border-color: rgba(249, 115, 22, 0.4);
}

.btn.upload-btn i {
    color: var(--primary);
}

/* Pinned comment */
.short-comment.is-pinned {
    background: rgba(249, 115, 22, 0.06);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    margin: -0.25rem -0.5rem 1rem;
}

.sc-pinned-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--primary);
    background: rgba(249, 115, 22, 0.12);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
}

.sc-action.pin-comment.active {
    color: var(--primary);
}

.sc-action.pin-comment.active i {
    color: var(--primary);
}

/* ===== Comment input toolbar ===== */
.comment-input-wrap {
    position: relative;
}

.comment-input-toolbar {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.4rem;
}

.comment-tool-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.15rem;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: var(--radius-sm);
    transition: background 0.15s, color 0.15s;
}

.comment-tool-btn:hover {
    background: var(--surface-2);
    color: var(--text);
}

.comment-tool-btn.active {
    color: var(--primary);
    background: rgba(249, 115, 22, 0.12);
}

/* ===== Emoji Picker ===== */
.emoji-picker {
    position: fixed;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 0.5rem;
    z-index: 9999;
    max-width: 320px;
    max-height: 280px;
    overflow-y: auto;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.15rem;
}

.emoji-item {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--radius-sm);
    transition: background 0.1s;
    font-family: inherit;
}

.emoji-item:hover {
    background: var(--surface-2);
}

/* ===== Mention Dropdown ===== */
.mention-dropdown {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    margin-bottom: 0.25rem;
}

.mention-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background 0.1s;
}

.mention-item:hover {
    background: var(--surface-2);
}

.mention-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.mention-avatar-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    color: var(--text);
    font-weight: 700;
    font-size: 0.75rem;
}

.mention-item span {
    font-size: 0.85rem;
    color: var(--text);
}

/* ===== Comment Poll Builder ===== */
.comment-poll-builder {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: var(--surface-2);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.poll-question-input {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
}

.poll-option-input {
    width: 100%;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 0.82rem;
    margin-bottom: 0.3rem;
}

.btn-sm {
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem;
}

/* ===== Comment Poll Display ===== */
.comment-poll {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: var(--surface-2);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.cpoll-question {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.cpoll-options {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cpoll-option {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    transition: border-color 0.15s;
    font-family: inherit;
    color: var(--text);
    font-size: 0.82rem;
}

.cpoll-option:hover:not(:disabled) {
    border-color: var(--primary);
}

.cpoll-option.voted {
    border-color: var(--primary);
}

.cpoll-option-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgba(249, 115, 22, 0.15);
    z-index: 0;
    transition: width 0.3s;
}

.cpoll-option-label,
.cpoll-option-pct {
    position: relative;
    z-index: 1;
}

.cpoll-option-pct {
    float: right;
    font-weight: 700;
}

.cpoll-total {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
    display: block;
}

/* ===== Lock Comments ===== */
.lock-comments-form {
    margin-top: 0.5rem;
}

.lock-comments-btn {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.lock-comments-btn i {
    color: var(--text-secondary);
}

.comments-disabled {
    color: var(--text-secondary);
    padding: 0.75rem 0;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Shorts comment input with emoji */
.sc-input-wrap {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    width: 100%;
}

.sc-input-wrap input {
    flex: 1;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
}

.sc-emoji-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.3rem;
    flex-shrink: 0;
}

.sc-emoji-btn:hover {
    color: var(--text);
}

.sc-mention-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 0.25rem;
}

/* Delete comment button */
.sc-action.delete-comment {
    color: var(--text-secondary);
    margin-left: auto;
}

.sc-action.delete-comment:hover {
    color: #ef4444;
}

.sc-action.delete-comment i { font-size: 0.9rem; }

/* ===== Shorts Tabs ===== */
.shorts-tabs {
    position: fixed;
    top: 56px;
    left: 300px;
    width: calc(100% - 300px);
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 0.5rem 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    z-index: 50;
}

body.no-sidebar .shorts-tabs {
    left: 70px;
    width: calc(100% - 70px);
}

@media (max-width: 768px) {
    .shorts-tabs {
        left: 0;
        width: 100%;
    }
}

.shorts-tab {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    border-radius: var(--radius);
    transition: color 0.15s, background 0.15s;
    position: relative;
}

.shorts-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.shorts-tab.active {
    color: #fff;
}

.shorts-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background: var(--primary);
    border-radius: 1px;
}

/* Adjust feed to account for fixed tabs */
.shorts-feed {
    padding-top: 48px;
}

/* ===== Shorts Subscribe Button ===== */
.short-subscribe-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    margin-left: 0.5rem;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
}

.short-subscribe-btn:hover {
    background: #ea7c1a;
}

.short-subscribe-btn.subscribed {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

.short-subscribe-btn.subscribed:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ===== Stories Page ===== */
.stories-page { padding-top: 1rem; }

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

.stories-header h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.stories-bar {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding: 1rem 0;
    flex-wrap: wrap;
}

.stories-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
    width: 100%;
}

.story-ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    flex-shrink: 0;
}

.story-ring-outer {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #ea580c, #ec4899, #8b5cf6);
    transition: transform 0.15s;
}

.story-ring-outer.viewed {
    background: var(--surface-2);
}

.story-ring:hover .story-ring-outer {
    transform: scale(1.05);
}

.story-ring-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 2px;
    background: var(--bg);
}

.story-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    background: var(--surface-2);
}

.story-avatar-letter {
    font-size: 1.2rem;
}

.story-username {
    font-size: 0.78rem;
    color: var(--text);
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Story Viewer */
.story-viewer {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.95);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

.story-viewer.open { display: flex; }

.story-viewer-content {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 100%;
    max-height: 750px;
    background: #111;
    overflow: hidden;
}

.story-viewer-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex;
    gap: 4px;
    padding: 8px;
    z-index: 5;
}

.story-progress-seg {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    overflow: hidden;
}

.story-progress-seg.done { background: #fff; }

.story-progress-fill {
    height: 100%;
    background: #fff;
    width: 0;
    transition: width linear;
}

.story-viewer-header {
    position: absolute;
    top: 20px; left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: 5;
}

.story-viewer-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
}

.story-viewer-user img,
.story-viewer-user .story-avatar {
    width: 32px;
    height: 32px;
}

.story-viewer-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}

.story-viewer-media {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-viewer-media img,
.story-viewer-media video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.story-viewer-caption {
    position: absolute;
    bottom: 60px;
    left: 0; right: 0;
    text-align: center;
    color: #fff;
    padding: 0 1.5rem;
    font-size: 0.9rem;
    z-index: 3;
}

.story-nav-prev,
.story-nav-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-nav-prev { left: 10px; }
.story-nav-next { right: 10px; }

/* ===== Reactions Bar ===== */
.reactions-bar {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.reaction-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem 0.35rem;
    border-radius: var(--radius-sm);
    transition: transform 0.1s, background 0.15s;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    font-family: inherit;
}

.reaction-btn:hover {
    background: var(--surface-2);
    transform: scale(1.15);
}

.reaction-btn.active {
    background: rgba(249, 115, 22, 0.15);
}

.reaction-count {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* ===== Video Speed Control ===== */
.speed-select {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 0.3rem 0.4rem;
    font-size: 0.8rem;
    cursor: pointer;
    font-family: inherit;
}

/* ===== Trending Page ===== */
.trending-page { padding-top: 1rem; }

.trending-header h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.25rem;
}

.trending-header p {
    color: var(--text-secondary);
    margin: 0 0 1.5rem;
}

.trending-tags-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.trending-tag-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: border-color 0.15s, transform 0.15s;
}

.trending-tag-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.trending-rank {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--primary);
}

.trending-tag-name {
    font-size: 1.1rem;
    font-weight: 700;
}

.trending-tag-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.trending-tag-stats span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.trending-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

/* ===== Watch Party Page ===== */
.watch-party-page { padding-top: 1rem; }

.party-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 1rem;
}

@media (max-width: 900px) {
    .party-layout { grid-template-columns: 1fr; }
}

.party-video-side .player-wrap {
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16/9;
}

.party-video-side video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.party-video-title {
    margin: 0.75rem 0 0.5rem;
    font-size: 1.2rem;
}

.party-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.party-host {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
}

.party-host-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.85rem;
}

.party-participants-count {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.party-chat-side {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    height: 500px;
}

.party-chat-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}

.party-chat-header h3 {
    margin: 0;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.party-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.party-chat-empty {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: auto;
}

.party-chat-msg {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.party-chat-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.72rem;
    background: var(--surface-2);
    color: var(--text);
}

.party-chat-body {
    flex: 1;
    min-width: 0;
}

.party-chat-body strong {
    font-size: 0.82rem;
}

.party-chat-time {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-left: 0.4rem;
}

.party-chat-body p {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    word-wrap: break-word;
}

.party-chat-form {
    display: flex;
    gap: 0.4rem;
    padding: 0.75rem;
    border-top: 1px solid var(--border);
}

.party-chat-form input {
    flex: 1;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
}

.party-chat-form button {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 1.1rem;
}

.party-participants-section {
    margin-top: 1.5rem;
}

.party-participants-section h3 {
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
}

.party-participants-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.party-participant {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
}

.party-participant-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.7rem;
    background: var(--surface-2);
}

.party-host-badge {
    background: var(--primary);
    color: #fff;
    font-size: 0.68rem;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
}

/* ===== Clip Page ===== */
.clip-page { padding-top: 1rem; }

.clip-player-wrap {
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16/9;
    max-width: 800px;
}

.clip-player-wrap video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.clip-info {
    margin-top: 1rem;
}

.clip-info h2 {
    margin: 0 0 0.5rem;
}

.clip-creator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.clip-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: var(--surface-2);
}

.clip-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.clip-meta a {
    color: var(--primary);
}

/* ===== Series Page ===== */
.series-page { padding-top: 1rem; }

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

.series-creator-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.5rem;
    background: var(--surface-2);
}

.series-header h1 {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
}

.series-creator {
    margin: 0 0 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.series-desc {
    margin: 0.5rem 0;
    font-size: 0.9rem;
    color: var(--text);
}

.series-stats {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0;
}

.series-episodes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.series-episode-card {
    text-decoration: none;
    color: var(--text);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.15s;
}

.series-episode-card:hover {
    transform: translateY(-2px);
}

.series-episode-thumb {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--surface-2);
    border-radius: var(--radius);
    overflow: hidden;
}

.series-episode-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.series-episode-num {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 0.72rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
}

.series-episode-duration {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 0.72rem;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
}

.series-episode-info h4 {
    margin: 0.5rem 0 0.25rem;
    font-size: 0.9rem;
}

.series-episode-info span {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* ===== Watch Party Chat Enhancements ===== */
.party-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.party-superchat-toggle {
    background: linear-gradient(135deg, #ea580c, #ef4444);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-family: inherit;
}

.party-superchat-toggle:hover {
    opacity: 0.9;
}

/* Superchat amount picker */
.superchat-amount-picker {
    padding: 0.75rem;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

.superchat-amounts {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}

.superchat-amount-btn {
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--text);
    font-family: inherit;
    transition: border-color 0.15s;
}

.superchat-amount-btn:hover {
    border-color: var(--primary);
}

.superchat-amount-btn.selected {
    border-color: var(--primary);
    background: rgba(249, 115, 22, 0.12);
    color: var(--primary);
}

.superchat-balance {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* Superchat message styling */
.party-chat-msg.superchat {
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.6rem;
    margin: 0.25rem 0;
}

.party-chat-msg.pinned {
    background: rgba(249, 115, 22, 0.08);
    border-left: 3px solid var(--primary);
    padding-left: 0.6rem;
    border-radius: var(--radius-sm);
}

.superchat-badge {
    display: inline-block;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    margin-left: 0.3rem;
    background: var(--primary);
}

.party-pin-icon {
    color: var(--primary);
    font-size: 0.85rem;
    margin-right: 0.25rem;
    flex-shrink: 0;
}

/* Chat message actions */
.party-chat-actions {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

.party-msg-action {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.72rem;
    cursor: pointer;
    padding: 0.15rem 0.3rem;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 0.2rem;
    transition: color 0.15s, background 0.15s;
    font-family: inherit;
}

.party-msg-action:hover {
    background: var(--surface-2);
    color: var(--text);
}

.party-msg-action.active {
    color: var(--primary);
}

.party-msg-action i {
    font-size: 0.85rem;
}

/* Mentions and links in chat */
.party-mention {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.party-mention:hover {
    text-decoration: underline;
}

.party-link {
    color: #3b82f6;
    text-decoration: none;
    word-break: break-all;
}

.party-link:hover {
    text-decoration: underline;
}

/* ===== Watch Parties Page ===== */
.parties-page { padding-top: 1rem; }

.parties-header {
    margin-bottom: 1.5rem;
}

.parties-header h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.25rem;
}

.parties-header p {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.9rem;
}

.parties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

.parties-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.party-card {
    text-decoration: none;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.15s, border-color 0.15s;
    display: block;
}

.party-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
}

.party-card-thumb {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--surface-2);
    overflow: hidden;
}

.party-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.party-card-nothumb {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--text-secondary);
}

.party-live-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: #ef4444;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    text-transform: uppercase;
}

.party-live-badge i {
    font-size: 0.55rem;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.party-card-duration {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 0.72rem;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
}

.party-card-info {
    padding: 0.75rem;
}

.party-card-title {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.party-card-host {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    margin-bottom: 0.4rem;
}

.party-card-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.7rem;
    background: var(--surface-2);
}

.party-card-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.party-card-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* ===== Watch Party Privacy Selector ===== */
.party-privacy-options {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.4rem;
}

.party-privacy-option {
    flex: 1;
    cursor: pointer;
}

.party-privacy-option input[type="radio"] {
    display: none;
}

.party-privacy-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.15s, background 0.15s;
    text-align: center;
}

.party-privacy-card i {
    font-size: 1.5rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.party-privacy-card strong {
    font-size: 0.9rem;
}

.party-privacy-card small {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.party-privacy-option input[type="radio"]:checked + .party-privacy-card {
    border-color: var(--primary);
    background: rgba(249, 115, 22, 0.08);
}

.party-privacy-option input[type="radio"]:checked + .party-privacy-card i {
    color: var(--primary);
}

@media (max-width: 480px) {
    .party-privacy-options {
        flex-direction: column;
    }
}

/* ===== Watch Party Host Controls ===== */
.party-host-controls {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.btn-danger {
    background: #ef4444;
    color: #fff;
    border: none;
}

.btn-danger:hover {
    background: #dc2626;
}

/* Viewer overlay (locks video for non-host) */
.party-viewer-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    pointer-events: none;
    z-index: 5;
}

.party-viewer-overlay i {
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

.party-viewer-overlay p {
    font-size: 0.82rem;
    margin: 0;
}

.party-viewer-info {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: #3b82f6;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Party ended overlay */
.party-ended-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.9);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.party-ended-overlay > div {
    text-align: center;
    color: #fff;
    padding: 2rem;
}

.party-ended-overlay h2 {
    margin: 1rem 0 0.5rem;
}

.party-ended-overlay p {
    margin: 0 0 1.5rem;
    color: rgba(255,255,255,0.7);
}

/* ===== Viewer Volume Controls ===== */
.party-viewer-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 120px;
    height: 4px;
    background: var(--surface-2);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
}

.volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: none;
}

/* ===== Video Analytics Redesign ===== */
.video-analytics-page { padding-top: 1rem; }

.va-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    transition: color 0.15s;
}

.va-back:hover { color: var(--text); }

/* Hero card */
.va-hero {
    display: flex;
    gap: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.va-hero-thumb {
    width: 240px;
    min-width: 240px;
    aspect-ratio: 16/9;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.va-hero-thumb i {
    font-size: 2.5rem;
    color: var(--text-secondary);
}

.va-hero-duration {
    position: absolute;
    bottom: 0.4rem;
    right: 0.4rem;
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 0.72rem;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
}

.va-hero-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.va-hero-tag {
    display: inline-flex;
    align-items: center;
    background: rgba(249, 115, 22,0.12);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: fit-content;
}

.va-hero-body h1 {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.3;
}

.va-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.va-hero-meta span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.va-collab-badge {
    background: rgba(168,85,247,0.12);
    color: #a855f7;
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.va-hero-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

/* Tabs */
.va-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

.va-tab {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.6rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    font-family: inherit;
}

.va-tab:hover { color: var(--text); }

.va-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.va-tab-content { display: none; }
.va-tab-content.active { display: block; }

/* Stat cards */
.va-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.va-stat-card {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    transition: border-color 0.15s;
}

.va-stat-card:hover { border-color: var(--primary); }

.va-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.va-stat-body { display: flex; flex-direction: column; gap: 0.1rem; }
.va-stat-body strong { font-size: 1.5rem; line-height: 1.2; }
.va-stat-body span { font-size: 0.82rem; color: var(--text-secondary); }
.va-stat-body small { font-size: 0.72rem; color: var(--text-secondary); margin-top: 0.2rem; }

/* Panels */
.va-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.va-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 1rem;
}

.va-panel-head h3 {
    margin: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.va-panel-sub {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.va-pill {
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.va-pill-link {
    color: var(--primary);
    text-decoration: none;
    background: rgba(249, 115, 22,0.1);
}

.va-pill-link:hover { background: rgba(249, 115, 22,0.2); }

/* Charts */
.va-chart { width: 100%; height: auto; max-height: 250px; }

.va-no-data {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem;
    font-size: 0.85rem;
}

/* Two column layout */
.va-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Source list */
.va-source-list { display: flex; flex-direction: column; gap: 0.6rem; }

.va-source-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.va-source-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 120px;
    font-size: 0.82rem;
}

.va-source-info i { font-size: 1rem; color: var(--text-secondary); }

.va-source-bar-wrap {
    flex: 1;
    height: 8px;
    background: var(--surface-2);
    border-radius: 4px;
    overflow: hidden;
}

.va-source-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 4px;
    transition: width 0.3s;
}

.va-source-bar-purple { background: #a855f7; }

.va-source-numbers {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 60px;
}

.va-source-numbers strong { font-size: 0.85rem; }
.va-source-numbers span { font-size: 0.72rem; color: var(--text-secondary); }

/* Watch buckets */
.va-watch-buckets { display: flex; flex-direction: column; gap: 0.5rem; }

.va-bucket {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.va-bucket-label {
    min-width: 70px;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.va-bucket-bar {
    flex: 1;
    height: 24px;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.va-bucket-fill {
    height: 100%;
    background: linear-gradient(90deg, #ea580c, #ef4444);
    border-radius: var(--radius-sm);
    transition: width 0.3s;
}

.va-bucket-count {
    min-width: 50px;
    text-align: right;
    font-size: 0.82rem;
    font-weight: 600;
}

/* Retention chart */
.va-retention-chart {
    display: flex;
    gap: 0.25rem;
    align-items: flex-end;
    height: 200px;
    padding-top: 1rem;
}

.va-retention-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.va-retention-bar-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    background: var(--surface-2);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    overflow: hidden;
}

.va-retention-bar {
    width: 100%;
    background: linear-gradient(180deg, #3b82f6, #1d4ed8);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: height 0.3s;
}

.va-retention-label { font-size: 0.68rem; color: var(--text-secondary); }
.va-retention-pct { font-size: 0.68rem; font-weight: 600; }

/* Hourly chart */
.va-hourly-chart {
    display: flex;
    gap: 0.15rem;
    align-items: flex-end;
    height: 160px;
}

.va-hour-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.va-hour-bar-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.va-hour-bar {
    width: 100%;
    background: #ea580c;
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    transition: height 0.3s;
}

.va-hour-label { font-size: 0.6rem; color: var(--text-secondary); }

/* Day of week chart */
.va-dow-chart {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    height: 160px;
}

.va-dow-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.va-dow-bar-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.va-dow-bar {
    width: 100%;
    background: #8b5cf6;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    min-height: 2px;
    transition: height 0.3s;
}

.va-dow-label { font-size: 0.72rem; color: var(--text-secondary); }
.va-dow-count { font-size: 0.68rem; font-weight: 600; }

/* Comments */
.va-comment-list { display: flex; flex-direction: column; gap: 0.75rem; }

.va-comment {
    display: flex;
    gap: 0.6rem;
    padding: 0.6rem;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}

.va-comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.va-comment-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    background: var(--surface-3);
}

.va-comment-body { flex: 1; min-width: 0; }

.va-comment-head {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.2rem;
}

.va-comment-head strong { font-size: 0.82rem; }

.va-comment-time {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-left: auto;
}

.va-comment-body p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text);
}

/* Responsive */
@media (max-width: 768px) {
    .va-hero { flex-direction: column; }
    .va-hero-thumb { width: 100%; min-width: 0; }
    .va-two-col { grid-template-columns: 1fr; }
    .va-stats-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .va-stats-grid { grid-template-columns: 1fr; }
    .va-hero-body h1 { font-size: 1.1rem; }
    .va-tabs { font-size: 0.78rem; }
}

/* ===== Custom Clip Icon ===== */
.clip-icon {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    background-color: currentColor;
    -webkit-mask: url('../icons/clip.svg') no-repeat center / contain;
    mask: url('../icons/clip.svg') no-repeat center / contain;
    vertical-align: middle;
}

.clip-icon-lg {
    width: 1.5rem;
    height: 1.5rem;
}

.clip-icon-xl {
    width: 3rem;
    height: 3rem;
}

/* ===== Clip Modal with Playhead Markers ===== */
.modal-box-lg {
    max-width: 700px;
    width: 90%;
}

.clip-preview-wrap {
    margin: 1rem 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
}

.clip-preview-video {
    width: 100%;
    display: block;
    max-height: 300px;
    object-fit: contain;
}

/* Timeline */
.clip-timeline-wrap {
    margin: 1rem 0;
}

.clip-timeline {
    position: relative;
    height: 48px;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin-bottom: 0.5rem;
    overflow: visible;
    user-select: none;
}

.clip-timeline-track {
    position: absolute;
    top: 50%;
    left: 4px;
    right: 4px;
    height: 8px;
    transform: translateY(-50%);
    background: var(--surface-3);
    border-radius: 4px;
}

.clip-timeline-selection {
    position: absolute;
    top: 50%;
    height: 8px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(249, 115, 22,0.5), rgba(249, 115, 22,0.6));
    border-radius: 4px;
    display: none;
    transition: left 0.1s ease, width 0.1s ease;
}

.clip-marker {
    position: absolute;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: 2px;
    display: none;
    z-index: 4;
    cursor: grab;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.clip-marker:active { cursor: grabbing; transform: scale(1.15); }

.clip-marker-in {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34,197,94,0.4);
}

.clip-marker-out {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239,68,68,0.4);
}

.clip-marker:hover { transform: scale(1.2); }

.clip-marker-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: inherit;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.clip-marker-in .clip-marker-handle { background: #22c55e; }
.clip-marker-out .clip-marker-handle { background: #ef4444; }

.clip-marker-label {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.58rem;
    font-weight: 800;
    color: #fff;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
}

.clip-marker-in .clip-marker-label { background: #22c55e; }
.clip-marker-out .clip-marker-label { background: #ef4444; }

.clip-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #fff;
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 0 6px rgba(0,0,0,0.6);
    will-change: left;
}

.clip-playhead::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #fff;
}

.clip-time-display {
    display: flex;
    gap: 1.5rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    padding: 0.5rem 0;
}

.clip-time-display strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* Clip controls */
.clip-controls {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.clip-in-btn { color: #22c55e; border-color: #22c55e; }
.clip-in-btn:hover { background: rgba(34,197,94,0.1); }

.clip-out-btn { color: #ef4444; border-color: #ef4444; }
.clip-out-btn:hover { background: rgba(239,68,68,0.1); }

#clipSubmitBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== Clips Section on Watch Page ===== */
.clips-section {
    margin: 1.5rem 0;
}

.clips-section h3 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1rem;
    font-size: 1.05rem;
}

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

.clip-card {
    text-decoration: none;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.15s, border-color 0.15s;
    display: block;
}

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

.clip-card-thumb {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--surface-2);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clip-card-duration {
    position: absolute;
    bottom: 0.4rem;
    right: 0.4rem;
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 0.72rem;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
}

.clip-card-play {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    transition: transform 0.15s, background 0.15s;
}

.clip-card:hover .clip-card-play {
    transform: scale(1.15);
    background: var(--primary);
}

.clip-card-info {
    padding: 0.6rem;
}

.clip-card-info strong {
    display: block;
    font-size: 0.85rem;
    line-height: 1.3;
    margin-bottom: 0.35rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.clip-card-creator {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
}

.clip-card-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.65rem;
    background: var(--surface-3);
}

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

.clips-empty {
    color: var(--text-secondary);
    font-size: 0.85rem;
    padding: 1rem;
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

/* ===== Clip Delete Button ===== */
.clip-info-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.clip-delete-btn {
    color: #ef4444;
    border-color: #ef4444;
}

.clip-delete-btn:hover {
    background: rgba(239,68,68,0.1);
}

.clip-card-wrap {
    position: relative;
}

.clip-card-delete-form {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 5;
}

.clip-card-delete-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
}

.clip-card-wrap:hover .clip-card-delete-btn {
    opacity: 1;
}

.clip-card-delete-btn:hover {
    background: #ef4444;
}

/* ===== Modern File Dropzone ===== */
.upload-dropzone {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    margin-bottom: 1rem;
    background: var(--surface-2);
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-dropzone:hover {
    border-color: var(--primary);
    background: rgba(249, 115, 22,0.04);
}

.upload-dropzone.dragover {
    border-color: var(--primary);
    background: rgba(249, 115, 22,0.1);
    transform: scale(1.01);
}

.dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-secondary);
}

.dropzone-content i {
    font-size: 2.5rem;
    color: var(--text-secondary);
    transition: color 0.2s;
}

.upload-dropzone:hover .dropzone-content i {
    color: var(--primary);
}

.dropzone-content p {
    margin: 0;
    font-size: 0.9rem;
}

.dropzone-content p strong {
    color: var(--text);
}

.dropzone-content small {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Image preview */
.dropzone-preview {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    position: relative;
}

.dropzone-preview img {
    max-width: 100%;
    max-height: 200px;
    border-radius: var(--radius-sm);
    object-fit: contain;
}

/* Video preview */
.dropzone-video-preview {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
}

.dropzone-video-preview video {
    max-width: 200px;
    max-height: 120px;
    border-radius: var(--radius-sm);
    background: #000;
}

.dropzone-video-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
    text-align: left;
    min-width: 0;
}

.dropzone-video-info strong {
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropzone-video-info span {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* Remove button */
.dropzone-remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.15s;
    z-index: 5;
}

.dropzone-remove:hover {
    background: #ef4444;
}

/* Larger dropzone for video */
.upload-dropzone-video {
    min-height: 180px;
}

.upload-dropzone-video .dropzone-content i {
    font-size: 3rem;
}

/* ===== Creator Goals Redesign ===== */
.goal-create-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.goal-create-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.goal-create-head i {
    font-size: 1.3rem;
    color: var(--primary);
}

.goal-create-head h3 {
    margin: 0;
    font-size: 1.05rem;
}

/* Type selector pills */
.goal-type-selector {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.goal-type-option {
    cursor: pointer;
}

.goal-type-option input {
    display: none;
}

.goal-type-pill {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    border: 2px solid var(--border);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.15s;
}

.goal-type-pill i {
    font-size: 1.1rem;
    color: var(--type-color);
}

.goal-type-option.selected .goal-type-pill {
    border-color: var(--type-color);
    background: color-mix(in srgb, var(--type-color) 12%, transparent);
    color: var(--text);
}

.goal-type-option:hover .goal-type-pill {
    border-color: var(--type-color);
}

.goal-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 640px) {
    .goal-form-grid { grid-template-columns: 1fr; }
}

/* Goal cards v2 */
.goals-list-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
}

.goal-card-v2 {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.15s;
}

.goal-card-v2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--goal-color);
}

.goal-card-v2:hover {
    border-color: var(--goal-color);
    transform: translateY(-2px);
}

.goal-card-v2.goal-complete {
    border-color: var(--goal-color);
    background: color-mix(in srgb, var(--goal-color) 5%, var(--surface));
}

.goal-card-v2-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.goal-card-v2-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--goal-color) 15%, transparent);
    color: var(--goal-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.goal-card-v2-info {
    flex: 1;
    min-width: 0;
}

.goal-card-v2-info h4 {
    margin: 0 0 0.2rem;
    font-size: 0.95rem;
    line-height: 1.3;
}

.goal-card-v2-type {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.goal-card-v2-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.goal-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: var(--surface-2);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: background 0.15s, color 0.15s;
}

.goal-action-btn:hover {
    background: var(--surface-3);
    color: var(--text);
}

.goal-action-delete:hover {
    background: rgba(239,68,68,0.15);
    color: #ef4444;
}

/* Progress bar */
.goal-card-v2-bar {
    height: 12px;
    background: var(--surface-2);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.goal-card-v2-fill {
    height: 100%;
    background: var(--goal-color);
    border-radius: 6px;
    transition: width 0.5s ease;
    position: relative;
}

.goal-card-v2-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: goalShimmer 2s infinite;
}

@keyframes goalShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Stats row */
.goal-card-v2-stats {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
}

.goal-current {
    font-weight: 700;
    color: var(--text);
}

.goal-divider {
    color: var(--text-secondary);
}

.goal-target {
    color: var(--text-secondary);
}

.goal-pct-badge {
    margin-left: auto;
    background: color-mix(in srgb, var(--goal-color) 15%, transparent);
    color: var(--goal-color);
    font-weight: 700;
    font-size: 0.78rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
}

.goal-achieved {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: #22c55e;
    font-size: 0.78rem;
    font-weight: 600;
}

/* ===== Channel Goals V2 ===== */
.channel-goals-v2 {
    margin: 1.5rem 0;
}

.channel-goals-v2-head h3 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.1rem;
    margin: 0 0 1rem;
}

.channel-goals-v2-head h3 i {
    color: var(--primary);
}

.channel-goals-v2-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.channel-goal-v2-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    position: relative;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.15s;
}

.channel-goal-v2-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--goal-color);
}

.channel-goal-v2-card:hover {
    border-color: var(--goal-color);
    transform: translateY(-2px);
}

.channel-goal-v2-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.channel-goal-v2-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--goal-color) 15%, transparent);
    color: var(--goal-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.channel-goal-v2-info {
    flex: 1;
    min-width: 0;
}

.channel-goal-v2-info strong {
    display: block;
    font-size: 0.85rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channel-goal-v2-info span {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.channel-goal-v2-done {
    color: #22c55e;
    font-size: 1.1rem;
}

.channel-goal-v2-bar {
    height: 8px;
    background: var(--surface-2);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.channel-goal-v2-fill {
    height: 100%;
    background: var(--goal-color);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.channel-goal-v2-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.channel-goal-v2-pct {
    font-weight: 700;
    color: var(--goal-color);
}

/* ===== Channel Trailer (YouTube-style) ===== */
.channel-home-trailer {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 0 0 1.5rem;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
}

.trailer-player-side {
    flex: 0 0 480px;
    max-width: 480px;
    min-width: 0;
}

.trailer-player-wrap {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
}

.trailer-player-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.trailer-info-side {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.25rem;
}

.trailer-featured-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.trailer-title {
    font-size: 1.15rem;
    line-height: 1.35;
    margin: 0 0 0.15rem;
    color: var(--text);
}

.trailer-description {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1rem;
    margin: 0 0 0.75rem;
    text-align: justify;
    text-justify: inter-word;
    white-space: pre-line;
    max-height: 4.5rem;
    overflow: hidden;
}

.trailer-channel-name {
    font-size: 0.88rem;
    color: var(--text);
    margin: 0 0 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.trailer-sub-count {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.trailer-subscribe-btn {
    width: fit-content;
}

@media (max-width: 768px) {
    .channel-home-trailer {
        flex-direction: column;
        gap: 1rem;
    }
    .trailer-player-side {
        flex: 1;
        max-width: 100%;
    }
    .trailer-title {
        font-size: 1.05rem;
    }
}

/* ===== Customisation Trailer Section ===== */
.cust-trailer-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.cust-trailer-current {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--surface-2);
    border-radius: var(--radius);
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.cust-trailer-thumb {
    width: 120px;
    min-width: 120px;
    aspect-ratio: 16/9;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cust-trailer-thumb i {
    font-size: 1.8rem;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.cust-trailer-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.cust-trailer-info strong {
    font-size: 0.9rem;
}

.cust-trailer-info span {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.cust-trailer-remove {
    background: none;
    border: 1px solid #ef4444;
    color: #ef4444;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.15s;
    white-space: nowrap;
}

.cust-trailer-remove:hover {
    background: rgba(239,68,68,0.1);
}

.cust-trailer-form {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.cust-trailer-form select {
    flex: 1;
}

.cust-trailer-form button {
    white-space: nowrap;
}

@media (max-width: 640px) {
    .cust-trailer-form { flex-direction: column; }
}

/* ===== Polls Management (edit_video.php) ===== */
.polls-manage-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.poll-manage-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
}

.poll-manage-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.poll-manage-head strong {
    font-size: 0.92rem;
    flex: 1;
}

.poll-manage-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.poll-manage-options {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.poll-manage-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.6rem;
    background: var(--surface);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
}

.poll-manage-votes {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.poll-create-form .poll-option-input {
    width: 100%;
    margin-bottom: 0.4rem;
}

/* ===== Channel Video Sort Buttons ===== */
.channel-videos-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.video-sort-buttons {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.sort-btn {
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--surface);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: all 0.15s;
}

.sort-btn:hover {
    border-color: var(--primary);
    color: var(--text);
}

.sort-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

@media (max-width: 640px) {
    .channel-videos-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===== Video Transcripts ===== */
.transcript-add-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.transcript-add-row input {
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.85rem;
}

.transcript-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 400px;
    overflow-y: auto;
}

.transcript-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.transcript-item .transcript-time {
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 600;
    white-space: nowrap;
    min-width: 110px;
}

.transcript-item .transcript-text {
    flex: 1;
    font-size: 0.85rem;
    color: var(--text);
}

/* Watch page transcript box */
.transcript-box {
    margin-top: 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
}

.transcript-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}

.transcript-box-head h4 {
    margin: 0;
    font-size: 0.95rem;
}

.transcript-toggle-btn {
    padding: 0.3rem 0.8rem;
    border-radius: 16px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s;
}

.transcript-toggle-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.transcript-box-body {
    max-height: 320px;
    overflow-y: auto;
    padding: 0.5rem;
}

.transcript-segment {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.transcript-segment:hover {
    background: var(--bg-hover, rgba(0,0,0,0.05));
}

.transcript-segment.active {
    background: var(--primary-light, rgba(59,130,246,0.12));
}

.transcript-segment.active .transcript-segment-time {
    color: var(--primary);
}

.transcript-segment-time {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
    min-width: 70px;
    padding-top: 1px;
}

.transcript-segment-text {
    flex: 1;
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.4;
}

/* ===== Premiere Countdown Overlay ===== */
.premiere-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.premiere-content {
    text-align: center;
    color: #fff;
    padding: 2rem;
}

.premiere-content h2 {
    font-size: 1.5rem;
    margin: 0 0 0.5rem;
}

.premiere-content h2 i {
    color: var(--primary);
}

.premiere-title {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.8);
    margin: 0 0 1.5rem;
}

.premiere-countdown {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 1.5rem 0;
}

.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    min-width: 70px;
}

.countdown-num {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
}

.countdown-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-top: 0.25rem;
}

.premiere-date {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    margin: 0;
}

/* ===== Creator Badges ===== */
.creator-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.creator-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: 16px;
    font-size: 0.72rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--badge-color, #f97316) 15%, transparent);
    color: var(--badge-color, #f97316);
    border: 1px solid color-mix(in srgb, var(--badge-color, #f97316) 30%, transparent);
}

.creator-badge i {
    font-size: 0.85rem;
}

/* ===== Subtitle List (edit page) ===== */
.subtitle-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.subtitle-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.subtitle-lang {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

/* ===== Video Queue Panel ===== */
.queue-panel {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 340px;
    max-width: calc(100vw - 2rem);
    max-height: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.queue-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}

.queue-panel-head h4 {
    margin: 0;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.queue-panel-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0;
    line-height: 1;
}

.queue-panel-close:hover {
    color: var(--text);
}

.queue-panel-body {
    overflow-y: auto;
    flex: 1;
    padding: 0.5rem;
}

.queue-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background 0.15s;
}

.queue-item:hover {
    background: var(--bg-hover, rgba(0,0,0,0.05));
}

.queue-item-thumb {
    width: 80px;
    height: 45px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--border);
}

.queue-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.queue-item-nothumb {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 1.2rem;
}

.queue-item-info {
    flex: 1;
    min-width: 0;
}

.queue-item-title {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.queue-item-title:hover {
    color: var(--primary);
}

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

.queue-item-remove {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.queue-item-remove:hover {
    color: var(--danger, #ef4444);
}

@media (max-width: 640px) {
    .queue-panel {
        right: 0.5rem;
        left: 0.5rem;
        bottom: 0.5rem;
        width: auto;
    }
    .premiere-countdown {
        gap: 0.5rem;
    }
    .countdown-unit {
        min-width: 55px;
        padding: 0.5rem 0.6rem;
    }
    .countdown-num {
        font-size: 1.3rem;
    }
}

/* ===== AI Generated Content Label ===== */
.ai-content-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    margin: 0.5rem 0;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.ai-content-label i {
    font-size: 0.95rem;
}

/* ===== Protection Badges ===== */
.protection-badges {
    display: flex;
    gap: 0.5rem;
    margin: 0.5rem 0;
    flex-wrap: wrap;
}
.protection-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.protection-badge i {
    font-size: 0.85rem;
}
.drm-badge {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.wm-badge {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

/* ===== Enhanced End Screen Elements ===== */
.endscreen-elements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.endscreen-element-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.endscreen-element-field:nth-child(4),
.endscreen-element-field:nth-child(5) {
    grid-column: 1 / -1;
}

.endscreen-element-field label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.endscreen-element-field label i {
    color: var(--primary);
    font-size: 1rem;
}

.endscreen-element-field select,
.endscreen-element-field input {
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 0.85rem;
    width: 100%;
}

.endscreen-elements .checkbox-label {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    cursor: pointer;
}

.endscreen-elements .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.endscreen-elements .checkbox-label span {
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.endscreen-elements .checkbox-label span i {
    color: var(--primary);
}

@media (max-width: 640px) {
    .endscreen-elements {
        grid-template-columns: 1fr;
    }
}

.end-screen-video-card-sm {
    margin-top: 0.5rem;
    max-width: 200px;
}

.end-screen-video-card-sm .end-screen-thumb {
    height: 70px;
}

.end-screen-video-card-sm h4 {
    font-size: 0.78rem;
}

.end-screen-playlist-card .end-screen-thumb-overlay i {
    font-size: 1.5rem;
}

.end-screen-link-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    text-decoration: none;
    color: #fff;
    margin-top: 0.5rem;
    max-width: 280px;
    transition: background 0.15s;
}

.end-screen-link-card:hover {
    background: rgba(255,255,255,0.18);
}

.end-screen-link-card > i:first-child {
    font-size: 1.3rem;
    color: rgba(255,255,255,0.8);
}

.end-screen-link-info {
    flex: 1;
    min-width: 0;
}

.end-screen-link-info h4 {
    font-size: 0.82rem;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.end-screen-link-info .end-screen-label {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
}

.end-screen-link-card > i:last-child {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
}

/* ===== Poll Timeline Picker ===== */
.poll-timeline-picker {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.poll-preview-video {
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
    background: #000;
}

.poll-timeline-bar {
    position: relative;
    height: 36px;
    background: var(--border);
    border-radius: 18px;
    cursor: pointer;
    overflow: visible;
    user-select: none;
}

.poll-timeline-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: rgba(59, 130, 246, 0.2);
    border-radius: 18px;
    width: 0;
    transition: width 0.05s;
}

.poll-timeline-marker {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 2;
    transition: transform 0.1s;
}

.poll-timeline-marker:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.poll-timeline-marker:active {
    cursor: grabbing;
}

.poll-timeline-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.poll-timeline-info strong {
    color: var(--primary);
}

/* ===== Live Streaming — Directory ===== */
.live-directory-page {
    padding-top: 1.5rem;
}

.live-directory-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.live-directory-header h2 {
    margin: 0;
    font-size: 1.6rem;
}

.live-directory-header p {
    flex: 1;
    min-width: 200px;
    color: var(--text-secondary);
    margin: 0;
}

.live-go-live-btn {
    white-space: nowrap;
}

.live-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.live-empty h3 {
    margin: 0.75rem 0 0.25rem;
    color: var(--text-primary);
}

.live-empty p {
    margin: 0;
}

.live-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.live-stream-card {
    display: block;
    background: var(--surface-2);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
    color: inherit;
}

.live-stream-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.live-stream-card-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--surface-3);
    overflow: hidden;
}

.live-stream-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.live-stream-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2.5rem;
    color: var(--text-secondary);
}

.live-stream-card-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: #ef4444;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    text-transform: uppercase;
}

.live-stream-card-viewers {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.live-stream-card-latency {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: rgba(249, 115, 22, 0.9);
    color: #fff;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.live-stream-card-info {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
}

.live-stream-card-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-3);
}

.live-stream-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.live-stream-card-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: 600;
    color: var(--text-secondary);
}

.live-stream-card-meta {
    min-width: 0;
}

.live-stream-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 0.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-stream-card-channel {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.live-stream-card-stats {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ===== Live Streaming — Watch Page ===== */
.live-watch-page {
    padding-top: 1rem;
}

.live-watch-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1rem;
}

@media (max-width: 900px) {
    .live-watch-layout {
        grid-template-columns: 1fr;
    }
}

.live-watch-main {
    min-width: 0;
}

.live-player-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

.live-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.live-player-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    z-index: 5;
}

.live-player-overlay.visible {
    display: flex;
}

.live-overlay-content {
    text-align: center;
    color: #fff;
}

.live-overlay-content p {
    margin: 0.75rem 0 0;
    font-size: 0.95rem;
}

.live-buffer-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    margin: 0 auto;
    animation: live-spin 0.8s linear infinite;
}

@keyframes live-spin {
    to { transform: rotate(360deg); }
}

.live-player-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
    z-index: 4;
}

.live-indicator-badge {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
}

.live-indicator-badge.live {
    background: #ef4444;
}

.live-indicator-badge.offline {
    background: rgba(100, 100, 100, 0.8);
}

.live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    animation: live-pulse 1.5s ease-in-out infinite;
}

.live-indicator-badge.live .live-dot {
    background: #fff;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.live-viewer-count-badge {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: #fff;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.5);
}

.live-low-latency-badge {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #ea580c;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.5);
    font-weight: 600;
}

.live-quality-selector {
    margin-left: auto;
    position: relative;
}

.live-quality-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: #fff;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    cursor: pointer;
}

.live-quality-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}

.live-quality-menu {
    display: none;
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 0.25rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    min-width: 120px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.live-quality-menu.open {
    display: block;
}

.live-quality-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border: none;
    background: none;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
}

.live-quality-menu button:hover {
    background: var(--surface-3);
}

.live-stream-info {
    margin-top: 1rem;
}

.live-stream-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.live-stream-description {
    color: var(--text-secondary);
    margin: 0 0 1rem;
    line-height: 1.5;
}

.live-channel-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.live-channel-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
}

.live-channel-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-3);
    object-fit: cover;
}

.live-channel-avatar.live-channel-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--text-secondary);
}

.live-channel-meta {
    display: flex;
    flex-direction: column;
}

.live-channel-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.live-channel-subs {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.live-subscribe-btn {
    white-space: nowrap;
}

/* ===== Live Streaming — Chat Panel ===== */
.live-chat-panel {
    background: var(--surface-2);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
    min-height: 400px;
    overflow: hidden;
}

.live-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}

.live-chat-header h3 {
    margin: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.live-chat-count {
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--surface-3);
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
}

.live-pinned-message {
    padding: 0.6rem 1rem;
    background: rgba(249, 115, 22, 0.1);
    border-bottom: 1px solid var(--border);
}

.live-pinned-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.live-pinned-body {
    font-size: 0.85rem;
    line-height: 1.4;
}

.live-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.live-chat-msg {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    font-size: 0.85rem;
    line-height: 1.4;
}

.live-chat-avatar {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-3);
    object-fit: cover;
}

.live-chat-avatar.live-chat-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.live-chat-msg-body {
    min-width: 0;
    flex: 1;
}

.live-chat-username {
    font-weight: 600;
    color: var(--text-primary);
    margin-right: 0.35rem;
}

.live-chat-text {
    color: var(--text-secondary);
    word-break: break-word;
}

.live-chat-mod {
    display: inline-flex;
    gap: 0.25rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.live-chat-mod button {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.1rem 0.2rem;
    font-size: 0.85rem;
    border-radius: 3px;
}

.live-chat-mod button:hover {
    background: var(--surface-3);
    color: var(--text-primary);
}

.live-chat-input-row {
    display: flex;
    gap: 0.5rem;
    padding: 0.6rem;
    border-top: 1px solid var(--border);
}

.live-chat-input-row input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-3);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.live-chat-input-row input:focus {
    outline: none;
    border-color: var(--primary);
}

.live-chat-send-btn {
    padding: 0.5rem 0.75rem;
    flex-shrink: 0;
}

.live-chat-login-cta {
    padding: 1rem;
    text-align: center;
    border-top: 1px solid var(--border);
}

.live-chat-disabled {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-secondary);
}

.live-chat-disabled h3 {
    margin: 0.75rem 0 0.25rem;
    color: var(--text-primary);
}

/* ===== Live Streaming — Go Live Page ===== */
.go-live-page {
    padding-top: 1.5rem;
}

.go-live-header {
    margin-bottom: 1.5rem;
}

.go-live-header h2 {
    margin: 0 0 0.25rem;
    font-size: 1.6rem;
}

.go-live-header p {
    margin: 0;
    color: var(--text-secondary);
}

.go-live-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.25rem;
}

@media (max-width: 800px) {
    .go-live-layout {
        grid-template-columns: 1fr;
    }
}

.go-live-sidebar {
    background: var(--surface-2);
    border-radius: 12px;
    padding: 0.75rem;
    height: fit-content;
}

.go-live-sidebar-title {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.go-live-empty-text {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.go-live-stream-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    margin-bottom: 0.25rem;
    transition: background 0.15s;
}

.go-live-stream-item:hover {
    background: var(--surface-3);
}

.go-live-stream-item.active {
    background: var(--surface-3);
}

.go-live-stream-status {
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.go-live-stream-status.live {
    color: #ef4444;
}

.go-live-stream-title {
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.go-live-stream-viewers {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.go-live-main {
    min-width: 0;
}

.go-live-panel {
    background: var(--surface-2);
    border-radius: 12px;
    padding: 1.25rem;
}

.go-live-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.go-live-panel-header h3 {
    margin: 0;
    font-size: 1.2rem;
}

.go-live-status-badge {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    text-transform: uppercase;
}

.go-live-status-badge.live {
    background: #ef4444;
    color: #fff;
}

.go-live-status-badge.offline {
    background: var(--surface-3);
    color: var(--text-secondary);
}

.go-live-encoder-section {
    background: var(--surface-3);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.go-live-encoder-section h4 {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.go-live-help {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.go-live-key-row {
    margin-bottom: 0.75rem;
}

.go-live-key-row label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.go-live-copy-row {
    display: flex;
    gap: 0.5rem;
}

.go-live-copy-row input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: monospace;
}

.go-live-copy-row input:focus {
    outline: none;
    border-color: var(--primary);
}

.go-live-controls {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.go-live-start-btn,
.go-live-stop-btn {
    font-size: 0.95rem;
    padding: 0.6rem 1.25rem;
}

.go-live-viewer-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.go-live-stat-box {
    flex: 1;
    background: var(--surface-3);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    text-align: center;
}

.go-live-stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
}

.go-live-stat-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.go-live-settings-section {
    margin-bottom: 1.25rem;
}

.go-live-settings-section h4 {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.go-live-settings-form .form-field {
    margin-bottom: 0.75rem;
}

.go-live-settings-form .form-field label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.go-live-settings-form input[type="text"],
.go-live-settings-form textarea,
.go-live-settings-form select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-3);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.go-live-settings-form input:focus,
.go-live-settings-form textarea:focus,
.go-live-settings-form select:focus {
    outline: none;
    border-color: var(--primary);
}

.go-live-toggles {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.go-live-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.go-live-toggle input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.go-live-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.9rem;
}

.go-live-mod-section {
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
}

.go-live-mod-section h4 {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.go-live-pinned-mod {
    background: rgba(249, 115, 22, 0.1);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.75rem;
}

.go-live-pinned-body {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.go-live-chat-list {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.25rem;
}

.go-live-create-form .form-field {
    margin-bottom: 1rem;
}

.go-live-create-form .form-field label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.go-live-create-form .required {
    color: #ef4444;
}

.go-live-create-form input[type="text"],
.go-live-create-form textarea,
.go-live-create-form select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-3);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.go-live-create-form input:focus,
.go-live-create-form textarea:focus,
.go-live-create-form select:focus {
    outline: none;
    border-color: var(--primary);
}

.go-live-create-btn {
    font-size: 0.95rem;
    padding: 0.6rem 1.25rem;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.btn-danger {
    background: #ef4444;
    color: #fff;
    border: none;
}

.btn-danger:hover {
    background: #dc2626;
}

/* ===== Support / FAQ Page ===== */
.support-page {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 2rem 1.5rem 4rem;
}

.support-hero {
    text-align: center;
    padding: 2.5rem 1rem 2rem;
}

.support-hero-icon {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.support-hero h1 {
    font-size: 2rem;
    margin: 0 0 0.25rem;
}

.support-hero p {
    color: var(--text-secondary);
    margin: 0;
}

.support-section-head {
    margin: 2.5rem 0 1.25rem;
}

.support-section-head h2 {
    font-size: 1.35rem;
    margin: 0 0 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.support-section-head h2 i {
    color: var(--primary);
}

.support-section-head p {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.9rem;
}

.support-flash {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    margin: 1.5rem 0;
    font-size: 0.9rem;
}

.support-flash-success {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.support-flash-error {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* FAQ search */
.support-search-wrap {
    position: relative;
    margin-bottom: 1.5rem;
}

.support-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 1.2rem;
}

.support-search-input {
    width: 100%;
    padding: 0.85rem 2.75rem 0.85rem 2.75rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.95rem;
    transition: border-color 0.15s;
}

.support-search-input:focus {
    outline: none;
    border-color: var(--primary);
}

.support-search-clear {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
}

.support-search-clear:hover {
    color: var(--text);
}

/* FAQ categories & items */
.faq-category {
    margin-bottom: 1.75rem;
}

.faq-category-title {
    font-size: 1.05rem;
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    color: var(--primary);
}

.faq-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.faq-item {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.95rem;
    list-style: none;
    transition: background 0.15s;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question:hover {
    background: var(--surface-3);
}

.faq-chevron {
    transition: transform 0.2s;
    color: var(--text-secondary);
    font-size: 1.3rem;
    flex-shrink: 0;
}

.faq-item[open] .faq-chevron {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 1.1rem 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.faq-no-results {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
}

.faq-no-results i {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* Support empty state */
.support-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-secondary);
}

.support-empty i {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    display: block;
}

.support-empty h3 {
    margin: 0 0 0.25rem;
    color: var(--text);
}

/* Ticket form */
.support-ticket-form {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.support-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.support-field label {
    font-size: 0.85rem;
    font-weight: 600;
}

.support-field input,
.support-field textarea {
    padding: 0.75rem 0.9rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
}

.support-field input:focus,
.support-field textarea:focus {
    outline: none;
    border-color: var(--primary);
}

/* My tickets list */
.support-tickets-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.support-ticket-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
}

.support-ticket-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.support-ticket-subject strong {
    display: block;
    font-size: 1rem;
}

.support-ticket-meta {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.support-ticket-body {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 0.75rem;
}

.support-ticket-reply {
    background: var(--surface-3);
    border-left: 3px solid var(--primary);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.support-ticket-reply-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
}

.support-ticket-reply-head i {
    color: var(--primary);
}

.support-ticket-reply-body {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.55;
}

/* Ticket status badges (shared with admin) */
.support-ticket-status,
.support-status-open,
.support-status-replied,
.support-status-closed {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    text-transform: capitalize;
    white-space: nowrap;
}

.support-status-open {
    background: rgba(249, 115, 22, 0.15);
    color: var(--primary);
}

.support-status-replied {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.support-status-closed {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

/* ===== Admin Support Tickets ===== */
.admin-support-tickets {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.admin-support-ticket-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
}

.admin-support-ticket-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.admin-support-ticket-user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.admin-support-ticket-user img,
.admin-support-ticket-user .admin-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.admin-support-ticket-meta {
    display: flex;
    flex-direction: column;
}

.admin-support-ticket-meta a {
    font-weight: 600;
}

.admin-support-ticket-subject {
    margin-bottom: 0.4rem;
}

.admin-support-ticket-body {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 0.75rem;
}

.admin-support-ticket-reply {
    background: var(--surface-3);
    border-left: 3px solid var(--primary);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.admin-support-ticket-reply-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
}

.admin-support-ticket-reply-head i {
    color: var(--primary);
}

.admin-support-ticket-reply-body {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.55;
}

.admin-support-reply-form {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.admin-support-reply-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-support-close-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.admin-support-ticket-closed-note {
    color: var(--text-secondary);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

@media (max-width: 600px) {
    .support-hero h1 {
        font-size: 1.5rem;
    }
    .support-ticket-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .admin-support-ticket-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===== A/B Thumbnail Test ===== */
#section-abtest .abtest-status {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}
.abtest-status.abtest-active {
    background: rgba(34, 197, 94, .12);
    color: #22c55e;
}
.abtest-status.abtest-ended {
    background: rgba(59, 130, 246, .12);
    color: #3b82f6;
}
.abtest-status.abtest-idle {
    background: rgba(148, 163, 184, .12);
    color: var(--muted, #94a3b8);
}
.abtest-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: abtest-pulse 1.5s ease-in-out infinite;
}
@keyframes abtest-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}
.abtest-variants {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 640px) {
    .abtest-variants { grid-template-columns: 1fr; }
}
.abtest-variant {
    border: 1px solid var(--border, rgba(255, 255, 255, .08));
    border-radius: 10px;
    padding: 1rem;
    background: var(--card-bg, rgba(255, 255, 255, .03));
}
.abtest-variant-label {
    font-weight: 600;
    margin-bottom: .6rem;
}
.abtest-variant-label small {
    font-weight: 400;
    color: var(--muted, #94a3b8);
}
.abtest-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, .2);
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.abtest-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.abtest-nothumb {
    color: var(--muted, #94a3b8);
    font-size: .85rem;
}
.abtest-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    font-size: .85rem;
    color: var(--muted, #94a3b8);
}
.abtest-stats strong {
    color: var(--text, #fff);
}
.abtest-ctr strong {
    color: var(--primary, #3b82f6);
}
.abtest-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: .5rem;
}
.abtest-form .edit-field {
    flex: 1;
    min-width: 220px;
}

/* ===== Red LIVE Ring Around Profile Pictures ===== */
.avatar-stack.is-live,
.channel-avatar-wrap.is-live,
.sub-channel-avatar-wrap.is-live {
    position: relative;
}

.avatar-stack.is-live::before,
.channel-avatar-wrap.is-live::before,
.sub-channel-avatar-wrap.is-live::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2.5px solid #ef4444;
    animation: liveRingPulse 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes liveRingPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* LIVE badge on avatar ring */
.live-ring-badge {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    background: #ef4444;
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    white-space: nowrap;
    z-index: 2;
    letter-spacing: 0.5px;
    line-height: 1.4;
    cursor: pointer;
}

.live-ring-badge:hover {
    background: #dc2626;
    color: #fff;
    text-decoration: none;
}

.live-ring-badge .live-dot {
    width: 5px;
    height: 5px;
    background: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: liveDotBlink 1.5s ease-in-out infinite;
}

@keyframes liveDotBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Sidebar subscription live badge */
.sub-channel-avatar-wrap {
    position: relative;
    display: inline-flex;
}

.sub-live-badge {
    margin-left: auto;
    background: #ef4444;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sub-live-badge .live-dot {
    width: 5px;
    height: 5px;
    background: #fff;
    border-radius: 50%;
    animation: liveDotBlink 1.5s ease-in-out infinite;
}

/* Channel page avatar live ring */
.channel-avatar-wrap.is-live {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.channel-avatar-wrap.is-live::before {
    inset: -4px;
    border-width: 3px;
}

.channel-avatar-wrap .live-ring-badge {
    font-size: 0.65rem;
    padding: 2px 8px;
    bottom: -8px;
}

/* Live dot shared */
.live-dot {
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    display: inline-block;
    animation: liveDotBlink 1.5s ease-in-out infinite;
}

/* ===== FAQ / Support Quick Links ===== */
.support-quick-links {
    margin-bottom: 2rem;
}

.support-quick-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s, transform 0.15s;
}

.support-quick-link:hover {
    border-color: var(--primary);
    transform: translateX(4px);
    text-decoration: none;
}

.support-quick-link > i:first-child {
    font-size: 1.5rem;
    color: var(--primary);
    flex-shrink: 0;
}

.support-quick-link > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.support-quick-link strong {
    font-size: 0.95rem;
}

.support-quick-link span {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.support-quick-link > i:last-child {
    color: var(--text-secondary);
    font-size: 1.2rem;
}

.faq-support-cta {
    text-align: center;
    padding: 2rem 1rem;
    margin-top: 2rem;
    border-top: 1px solid var(--border);
}

.faq-support-cta p {
    margin: 0 0 1rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* ===== Go Live — Encoder Recommendations ===== */
.go-live-encoder-recommendations {
    background: var(--surface-3);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.go-live-encoder-recommendations h4 {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.go-live-recommendations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.go-live-recommendation {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.6rem 0.75rem;
    background: var(--surface-2);
    border-radius: 6px;
    border: 1px solid var(--border);
}

.go-live-recommendation-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.go-live-recommendation-value {
    font-size: 0.85rem;
    font-weight: 600;
}

/* ===== Go Live — Quick Actions ===== */
.go-live-quick-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.go-live-quick-btn {
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem;
}

/* ===== Go Live — Stream Health Monitor ===== */
.go-live-health-monitor {
    background: var(--surface-3);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.go-live-health-monitor h4 {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.go-live-health-status-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}

.go-live-health-status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
}

.go-live-health-status-indicator.fair { background: #f97316; }
.go-live-health-status-indicator.poor { background: #ef4444; }

.go-live-health-metric {
    margin-bottom: 0.75rem;
}

.go-live-health-metric-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
}

.go-live-health-metric-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.go-live-health-metric-value {
    font-size: 0.85rem;
    font-weight: 600;
    font-family: monospace;
}

.go-live-health-bar {
    height: 6px;
    background: var(--surface-2);
    border-radius: 3px;
    overflow: hidden;
}

.go-live-health-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #4ade80);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.go-live-health-bar-fill.fair { background: linear-gradient(90deg, #f97316, #fbbf24); }
.go-live-health-bar-fill.poor { background: linear-gradient(90deg, #ef4444, #f87171); }

/* ===== Go Live — Stream Preview ===== */
.go-live-preview-section {
    background: var(--surface-3);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.go-live-preview-section h4 {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.go-live-preview-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.go-live-preview-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.go-live-preview-hint {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0;
}

/* ===== Go Live — Analytics Panel ===== */
.go-live-analytics-panel {
    background: var(--surface-3);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.go-live-analytics-panel h4 {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.go-live-analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.go-live-analytics-box {
    text-align: center;
    padding: 0.6rem;
    background: var(--surface-2);
    border-radius: 6px;
}

.go-live-analytics-value {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
}

.go-live-analytics-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ===== Live Watch Page — New Elements ===== */
.live-uptime-timer {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-family: monospace;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.live-player-controls-spacer {
    flex: 1;
}

.live-player-icon-btn {
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.15s;
}

.live-player-icon-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}

.live-player-icon-btn.active {
    color: #22c55e;
}

.live-stream-info-card {
    background: var(--surface-2);
    border-radius: 10px;
    padding: 1.25rem;
    margin-top: 1rem;
}

.live-stream-info-card-top {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.live-stream-info-card-top h1 {
    flex: 1;
    min-width: 200px;
}

.live-stream-category-badge {
    background: var(--primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    white-space: nowrap;
}

.live-stream-started-time {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0.25rem 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.live-channel-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.live-report-btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
}

.live-avatar-ring {
    border: 2.5px solid #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
    animation: liveRingPulse 2s ease-in-out infinite;
}

/* Owner stats */
.live-owner-stats {
    background: var(--surface-2);
    border-radius: 10px;
    padding: 1.25rem;
    margin-top: 1rem;
}

.live-owner-stats-title {
    margin: 0 0 1rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.live-owner-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
}

.live-owner-stat-box {
    text-align: center;
    padding: 0.75rem;
    background: var(--surface-3);
    border-radius: 8px;
}

.live-owner-stat-value {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
}

.live-owner-stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ===== Live Directory — Featured Hero ===== */
.live-directory-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.live-total-viewers-badge {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: var(--surface-2);
    padding: 0.4rem 0.75rem;
    border-radius: 20px;
}

.live-featured-hero {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
}

.live-featured-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.live-featured-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.live-featured-hero-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--text-secondary);
    background: var(--surface-3);
}

.live-featured-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 100%);
}

.live-featured-hero-content {
    position: relative;
    z-index: 1;
    padding: 1.5rem 2rem;
    color: #fff;
    max-width: 600px;
}

.live-featured-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #ef4444;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.live-featured-hero-category {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    margin-left: 0.5rem;
}

.live-featured-hero-title {
    margin: 0 0 0.5rem;
    font-size: 1.8rem;
    line-height: 1.2;
}

.live-featured-hero-desc {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    opacity: 0.9;
}

.live-featured-hero-creator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.live-featured-hero-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: var(--primary);
    color: #fff;
}

.live-featured-hero-letter {
    font-size: 0.9rem;
}

.live-featured-hero-name {
    font-size: 0.9rem;
    font-weight: 600;
}

.live-featured-hero-viewers {
    font-size: 0.8rem;
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.live-featured-hero-cta {
    font-size: 0.95rem;
    padding: 0.6rem 1.5rem;
}

/* ===== Live Directory — Toolbar ===== */
.live-directory-toolbar {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.live-directory-search {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 400px;
}

.live-directory-search i {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 1rem;
}

.live-directory-search input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface-2);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.live-directory-search input:focus {
    outline: none;
    border-color: var(--primary);
}

.live-category-chips {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.live-category-chip {
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
}

.live-category-chip:hover {
    border-color: var(--primary);
    color: var(--text);
}

.live-category-chip.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

@media (max-width: 600px) {
    .live-featured-hero {
        min-height: 240px;
    }
    .live-featured-hero-content {
        padding: 1rem 1.25rem;
    }
    .live-featured-hero-title {
        font-size: 1.3rem;
    }
    .live-directory-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .live-directory-search {
        max-width: 100%;
    }
}

/* ===== Go Live — Separated Card Layout ===== */
.go-live-card {
    background: var(--surface-2);
    border-radius: 12px;
    border: 1px solid var(--border);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.go-live-card-head {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-3);
}

.go-live-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.go-live-card-title h3 {
    margin: 0;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.go-live-card-body {
    padding: 1.25rem;
}

.go-live-card .go-live-controls {
    margin-bottom: 0.75rem;
}

.go-live-card .go-live-quick-actions {
    margin-bottom: 0;
}

.go-live-card .go-live-viewer-stats {
    margin-bottom: 1rem;
}

.go-live-card .go-live-health-monitor {
    background: var(--surface-3);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.go-live-card .go-live-health-monitor h4 {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.go-live-card .go-live-preview-section {
    background: var(--surface-3);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0;
}

.go-live-card .go-live-encoder-recommendations {
    margin-bottom: 0;
    margin-top: 0.75rem;
}

.go-live-card .go-live-settings-form {
    margin-bottom: 0;
}

.go-live-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 600px) {
    .go-live-form-row {
        grid-template-columns: 1fr;
    }
}

.go-live-card .go-live-analytics-grid {
    margin-bottom: 0;
}

.go-live-card .go-live-chat-list {
    margin-bottom: 0;
}

/* Health indicator dot */
.go-live-health-indicator {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.go-live-health-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    display: inline-block;
}

.go-live-health-dot.fair { background: #f97316; }
.go-live-health-dot.poor { background: #ef4444; }

.go-live-health-resolution,
.go-live-health-fps {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-family: monospace;
}

/* ===== Go Live — Tab Navigation ===== */
.go-live-tabs {
    margin-bottom: 1.25rem;
}

.go-live-tab-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.go-live-tab-link {
    padding: 0.7rem 1.1rem;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}

.go-live-tab-link:hover {
    color: var(--text);
}

.go-live-tab-link.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.go-live-tab-link i {
    font-size: 1.05rem;
}

.go-live-tab-content {
    display: none;
}

.go-live-tab-content.active {
    display: block;
}

.go-live-tab-content .go-live-card {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .go-live-tab-link {
        padding: 0.6rem 0.75rem;
        font-size: 0.8rem;
    }
    .go-live-tab-link span {
        display: none;
    }
}

/* ===== Live Stickers — Viewer UI ===== */
.live-sticker-toggle-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.live-sticker-toggle-btn:hover {
    color: var(--primary);
    background: var(--surface-3);
}

.live-sticker-picker {
    border-top: 1px solid var(--border);
    padding: 0.75rem;
    max-height: 280px;
    overflow-y: auto;
}

.live-sticker-picker-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.live-sticker-wallet {
    font-weight: 600;
    color: var(--primary);
}

.live-sticker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.live-sticker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.5rem 0.25rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
    text-align: center;
}

.live-sticker-item:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.live-sticker-emoji {
    font-size: 1.8rem;
    line-height: 1;
}

.live-sticker-name {
    font-size: 0.7rem;
    font-weight: 600;
}

.live-sticker-price {
    font-size: 0.65rem;
    color: var(--primary);
    font-weight: 700;
}

.live-sticker-loading,
.live-sticker-not-eligible {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.8rem;
    padding: 1rem;
}

.live-sticker-picker-foot {
    border-top: 1px solid var(--border);
    padding-top: 0.5rem;
}

.live-sticker-picker-foot input {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text-primary);
    font-size: 0.8rem;
}

/* Sticker animation overlay on player */
.live-sticker-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1rem;
    gap: 0.5rem;
}

.live-sticker-anim {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 0.5rem 1rem;
    color: #fff;
    animation: stickerSlideIn 0.4s ease;
    max-width: 80%;
}

.live-sticker-anim.fade-out {
    animation: stickerFadeOut 1s ease forwards;
}

.live-sticker-anim-emoji {
    font-size: 2.5rem;
    line-height: 1;
}

.live-sticker-anim-name {
    font-size: 0.8rem;
    font-weight: 600;
}

.live-sticker-anim-msg {
    font-size: 0.75rem;
    opacity: 0.9;
    font-style: italic;
}

@keyframes stickerSlideIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.8); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes stickerFadeOut {
    to { opacity: 0; transform: scale(1.1); }
}

/* Sticker in chat */
.live-chat-sticker-msg {
    background: rgba(249, 115, 22, 0.08);
    border-left: 3px solid #ea580c;
    padding-left: 0.5rem;
}

.live-chat-sticker-display {
    font-size: 0.85rem;
    color: #ea580c;
}

/* ===== Go Live — Sticker Earnings Tab ===== */
.live-sticker-not-eligible-creator {
    text-align: center;
    padding: 2rem 1rem;
}

.live-sticker-not-eligible-creator i {
    font-size: 2.5rem;
    color: var(--text-secondary);
}

.live-sticker-not-eligible-creator h4 {
    margin: 0.5rem 0 0.25rem;
}

.live-sticker-not-eligible-creator p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0;
}

.go-live-sticker-history {
    max-height: 400px;
    overflow-y: auto;
}

.go-live-sticker-history-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.go-live-sticker-history-item:last-child {
    border-bottom: none;
}

.go-live-sticker-history-emoji {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.go-live-sticker-history-info {
    flex: 1;
    font-size: 0.85rem;
    min-width: 0;
}

.go-live-sticker-history-amount {
    font-size: 0.85rem;
    font-weight: 700;
    color: #22c55e;
    flex-shrink: 0;
}

/* ===== Admin — Sticker Table ===== */
.admin-stat-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-stat-card {
    flex: 1;
    min-width: 160px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
}

.admin-stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
}

.admin-stat-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ===== Go Live — Enhanced Analytics ===== */
.go-live-chart-wrap {
    position: relative;
    height: 200px;
    width: 100%;
}

.go-live-top-stream {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.go-live-top-stream-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.go-live-top-stream-info span {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.go-live-streams-table {
    overflow-x: auto;
}

.go-live-streams-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.go-live-streams-table th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.go-live-streams-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.go-live-streams-table tr:last-child td {
    border-bottom: none;
}

.go-live-streams-table a {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
}

.go-live-streams-table a:hover {
    color: var(--primary);
}

/* ===== A/B Test Divider in Thumbnail Section ===== */
.abtest-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.abtest-divider span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* ===== Live Sticker Raised Banner in Chat ===== */
.live-sticker-raised {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.12), rgba(239, 68, 68, 0.08));
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--text);
}

.live-sticker-raised i {
    font-size: 1.1rem;
    color: #ea580c;
}

.live-sticker-raised strong {
    color: #ea580c;
    font-size: 0.9rem;
}

.live-sticker-raised-count {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* ===== Encoding & Processing Section ===== */
.encoding-status-card {
    background: var(--card-bg, #1a1a2e);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.encoding-status-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.encoding-status-badge {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.encoding-badge-pending {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.encoding-badge-processing {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    animation: encoding-pulse 1.5s ease-in-out infinite;
}

.encoding-badge-completed {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.encoding-badge-failed {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

@keyframes encoding-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.encoding-progress-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.encoding-progress-bar {
    margin-top: 0.75rem;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.encoding-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    transition: width 0.5s ease;
    border-radius: 3px;
}

.encoding-metadata-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.encoding-meta-item {
    background: var(--card-bg, #1a1a2e);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.encoding-meta-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
}

.encoding-meta-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

.encoding-qualities-section,
.encoding-thumbnails-section,
.encoding-jobs-section {
    margin-bottom: 1.5rem;
}

.encoding-qualities-section h3,
.encoding-thumbnails-section h3,
.encoding-jobs-section h3 {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.encoding-qualities-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.encoding-quality-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--card-bg, #1a1a2e);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
}

.encoding-quality-label {
    font-weight: 600;
}

.encoding-quality-label small {
    color: var(--text-secondary);
    font-weight: 400;
}

.encoding-quality-dim {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.encoding-thumbnails-hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.encoding-thumbnails-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.encoding-thumb-candidate {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
    aspect-ratio: 16/9;
}

.encoding-thumb-candidate:hover {
    border-color: var(--primary);
}

.encoding-thumb-candidate img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.encoding-thumb-time {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.7rem;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

.encoding-jobs-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.encoding-job-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--card-bg, #1a1a2e);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

.encoding-job-type {
    font-weight: 500;
}

.encoding-job-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    text-transform: capitalize;
}

.job-status-queued { background: rgba(249, 115, 22, 0.15); color: #f97316; }
.job-status-processing { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.job-status-completed { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.job-status-failed { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

.encoding-job-error {
    color: #ef4444;
    font-size: 0.8rem;
    margin-left: auto;
}

.encoding-loading {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
}

/* ===== Description Editor with Mention Autocomplete ===== */
.desc-editor-wrap {
    position: relative;
}

.desc-editor-wrap textarea {
    width: 100%;
    min-height: 200px;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px 8px 0 0;
    background: var(--input-bg, var(--card-bg));
    color: var(--text);
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
}

.desc-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0.5rem;
    background: var(--card-bg, #1a1a2e);
    border: 1px solid var(--border);
    border-radius: 8px;
}

/* Link preview — attached to bottom of textarea, inside the box */
.desc-link-preview {
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    background: var(--card-bg, #1a1a2e);
    max-width: 100%;
}

.desc-link-preview-body {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    align-items: flex-start;
}

.desc-link-preview-body {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    align-items: flex-start;
}

.desc-link-preview-img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--border);
}

.desc-link-preview-content {
    flex: 1;
    min-width: 0;
}

.desc-link-preview-domain {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.desc-link-preview-favicon {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    flex-shrink: 0;
}

.desc-link-preview-site-name {
    font-weight: 600;
    color: var(--text);
}

.desc-link-preview-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-bottom: 0.15rem;
}

.desc-link-preview-desc {
    font-size: 0.76rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.desc-link-preview-loading {
    padding: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.desc-link-preview-loading i {
    animation: encoding-pulse 1s ease-in-out infinite;
    color: #3b82f6;
}

.desc-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.desc-tool-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.desc-tool-btn i {
    font-size: 1rem;
}

.desc-mention-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--card-bg, #1e1e36);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
    z-index: 100;
    margin-bottom: 4px;
}

.mention-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background 0.1s;
}

.mention-item:hover,
.mention-item.active {
    background: var(--primary);
    color: #fff;
}

.mention-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.mention-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
}

.mention-name {
    font-size: 0.85rem;
    font-weight: 500;
}

.mention-verified {
    color: #3b82f6;
    font-size: 0.85rem;
    margin-left: 0.2rem;
}

/* Upload two-column layout for language/country */
.upload-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.upload-two-col > div {
    display: flex;
    flex-direction: column;
}

.upload-two-col label {
    margin-bottom: 0.3rem;
}

@media (max-width: 600px) {
    .upload-two-col {
        grid-template-columns: 1fr;
    }
}

/* ===== Smart Streaming Controls ===== */
.smart-stream-btn {
    position: relative;
    transition: all 0.2s;
}

.smart-stream-btn.active {
    color: #22c55e !important;
    background: rgba(34, 197, 94, 0.15) !important;
}

.smart-stream-btn.active::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 4px #22c55e;
}

.smart-connection-badge {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    background: var(--card-bg, rgba(0, 0, 0, 0.3));
    border: 1px solid var(--border);
    transition: all 0.3s;
    white-space: nowrap;
}

.smart-connection-badge i {
    font-size: 0.95rem;
}

.smart-conn-fast {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.08);
}

.smart-conn-medium {
    border-color: rgba(249, 115, 22, 0.4);
    background: rgba(249, 115, 22, 0.08);
}

.smart-conn-slow {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
    animation: smart-conn-pulse 2s ease-in-out infinite;
}

@keyframes smart-conn-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Smart stream toast notice */
.smart-stream-notice {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    z-index: 50;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: opacity 0.3s, transform 0.3s;
    backdrop-filter: blur(8px);
    animation: smart-notice-in 0.25s ease;
}

.smart-stream-notice i {
    font-size: 1rem;
    color: #3b82f6;
}

.smart-stream-notice.fade-out {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
}

@keyframes smart-notice-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Quality select with Auto option */
.quality-select option[value="auto"] {
    font-weight: 600;
    color: #3b82f6;
}

@media (max-width: 600px) {
    .smart-connection-badge span {
        display: none;
    }
    .smart-connection-badge {
        padding: 0.3rem;
    }
    .smart-connection-badge i {
        font-size: 1.1rem;
    }
}

/* ===== Buffer Health Bar ===== */
.buffer-health-bar {
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 4px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0 0 4px 4px;
    overflow: hidden;
    z-index: 20;
    display: flex;
    align-items: center;
}

.buffer-health-fill {
    height: 100%;
    width: 0%;
    transition: width 0.5s ease, background 0.3s;
    border-radius: 0 0 4px 4px;
}

.buffer-health-fill.buffer-good {
    background: #22c55e;
}

.buffer-health-fill.buffer-medium {
    background: #f97316;
}

.buffer-health-fill.buffer-low {
    background: #ef4444;
}

.buffer-health-text {
    position: absolute;
    top: 6px;
    right: 4px;
    font-size: 0.65rem;
    color: var(--text-secondary);
    pointer-events: none;
}

/* ===== Reconnect Overlay ===== */
.reconnect-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(4px);
    gap: 0.75rem;
}

.reconnect-spinner i {
    font-size: 3rem;
    color: #3b82f6;
    animation: reconnect-spin 1s linear infinite;
}

@keyframes reconnect-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.reconnect-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}

.reconnect-msg {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.reconnect-attempts {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.reconnect-btn {
    margin-top: 0.5rem;
}

/* ===== Offline Download Panel ===== */
.offline-download-panel {
    position: absolute;
    top: 50px;
    right: 10px;
    width: 320px;
    max-width: calc(100vw - 20px);
    background: var(--card-bg, #1a1a2e);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 80;
    overflow: hidden;
}

.offline-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.9rem;
}

.offline-panel-header i {
    margin-right: 0.3rem;
}

.offline-panel-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0;
    line-height: 1;
}

.offline-panel-close:hover {
    color: var(--text);
}

.offline-panel-body {
    padding: 0.75rem;
}

.offline-quality-hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.offline-quality-hint a,
.offline-progress-label a {
    color: #3b82f6;
    text-decoration: underline;
}

.offline-quality-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: border-color 0.15s;
}

.offline-quality-item:hover {
    border-color: var(--primary);
}

.offline-quality-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.offline-quality-info i {
    color: var(--text-secondary);
}

.offline-progress-wrap {
    padding: 0.5rem 0;
}

.offline-progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
}

.offline-progress-bar {
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.offline-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    transition: width 0.3s;
    border-radius: 4px;
}

.offline-progress-size {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
    text-align: center;
}

/* ===== Downloads Page ===== */
#downloadedPage {
    padding: 2rem 0;
    min-height: 80vh;
}

.downloads-header {
    margin-bottom: 1.5rem;
}

.downloads-header h1 {
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.downloads-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: 0.3rem;
}

.downloads-controls {
    margin-bottom: 1.5rem;
}

.downloads-storage-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--card-bg, #1a1a2e);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
}

.downloads-storage-info i {
    color: var(--text-secondary);
}

.downloads-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.downloads-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.downloads-loading i {
    font-size: 2rem;
    animation: reconnect-spin 1s linear infinite;
    display: block;
    margin-bottom: 0.5rem;
}

.downloads-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--text-secondary);
}

.downloads-empty i {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.downloads-empty h2 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.downloads-empty p {
    margin-bottom: 1.5rem;
}

.download-card {
    background: var(--card-bg, #1a1a2e);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.15s, border-color 0.15s;
}

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

.download-thumb {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--border);
}

.download-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.download-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.download-thumb-placeholder i {
    font-size: 2.5rem;
}

.download-duration {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 0.72rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

.download-offline-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(34, 197, 94, 0.9);
    color: #fff;
    font-size: 0.68rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.download-info {
    padding: 0.75rem;
}

.download-title {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.download-creator {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.download-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.download-meta span {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.download-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.download-actions .btn-sm {
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem;
}

@media (max-width: 600px) {
    .offline-download-panel {
        width: calc(100vw - 20px);
        right: 10px;
    }
    .downloads-list {
        grid-template-columns: 1fr;
    }
}

/* ===== Offline Player Modal ===== */
.offline-player-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.offline-player-wrap {
    width: 90%;
    max-width: 900px;
    background: var(--card-bg, #1a1a2e);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.6);
}

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

.offline-player-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}

.offline-player-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0;
}

.offline-player-close:hover {
    color: var(--text);
}

.offline-player-video-wrap {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
}

.offline-player-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Watermark — visible, moves periodically */
.offline-watermark {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10;
    transition: left 0.5s ease, top 0.5s ease;
    text-align: center;
    opacity: 0.7;
}

.watermark-text {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.05em;
}

.watermark-sub {
    display: block;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.offline-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.offline-loading-overlay i {
    font-size: 2rem;
    animation: reconnect-spin 1s linear infinite;
    color: #3b82f6;
}

/* Encrypted badge on download cards */
.download-encrypted-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(249, 115, 22, 0.9);
    color: #fff;
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

/* Edit hint for offline download toggle */
.edit-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.3rem;
    line-height: 1.4;
}

.edit-hint i,
.edit-field label i {
    color: var(--text-secondary);
    cursor: help;
}

/* ===== AJAX save button states ===== */
@keyframes bx-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.bx-spin {
    animation: bx-spin 0.8s linear infinite;
}
.btn-success {
    background: #22c55e !important;
    border-color: #22c55e !important;
}
.btn-error {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
}

/* ===== Auto-Generated Thumbnails in Thumbnail Section ===== */
.auto-thumbs-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.auto-thumbs-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.auto-thumbs-title i {
    color: var(--primary);
}

.auto-thumbs-hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.auto-thumbs-hint strong {
    color: var(--text);
}

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

.auto-thumb-card {
    position: relative;
    border: 2px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.15s;
    background: var(--card-bg, #1a1a2e);
}

.auto-thumb-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.auto-thumb-card img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

.auto-thumb-time {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

.auto-thumb-actions {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem;
    justify-content: space-between;
}

.auto-thumb-actions .btn-sm {
    flex: 1;
    font-size: 0.75rem;
    padding: 0.35rem 0.5rem;
    justify-content: center;
}

@media (max-width: 600px) {
    .auto-thumbs-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

/* ===== Mobile Responsiveness Improvements ===== */

/* Tablet: 2-column video grid instead of 1 */
@media (max-width: 768px) and (min-width: 480px) {
    .video-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem;
    }
    .channel-video-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Studio sidebar: collapse on mobile */
@media (max-width: 900px) {
    .studio-layout {
        flex-direction: column;
    }
    .studio-sidebar {
        width: 100%;
        height: auto;
        position: relative;
        top: 0;
        border-right: none;
        border-bottom: 1px solid var(--border);
        flex-direction: column;
        overflow: visible;
        padding: 0;
    }
    .studio-brand {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border);
        font-size: 0.9rem;
    }
    .studio-brand i {
        font-size: 1.3rem;
    }
    .studio-sidebar-profile {
        padding: 0.75rem 1rem;
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 0.65rem;
    }
    .studio-profile-brand {
        font-size: 0.85rem;
        margin-bottom: 0;
        margin-right: auto;
    }
    .studio-profile-brand i {
        font-size: 1.2rem;
    }
    .studio-profile-avatar {
        width: 40px !important;
        height: 40px !important;
        border-width: 2px !important;
        margin-bottom: 0 !important;
    }
    .studio-profile-name {
        font-size: 0.85rem;
    }
    .studio-profile-subs {
        display: none;
    }
    .studio-sidebar-top {
        flex: none;
        padding: 0.5rem;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.25rem;
    }
    .studio-sidebar-bottom {
        padding: 0.5rem;
        border-top: 1px solid var(--border);
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    .studio-link {
        white-space: nowrap;
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
    .studio-link span {
        display: inline;
    }
    .studio-main {
        width: 100%;
        flex: none;
    }
}

/* Upload page: mobile-friendly */
@media (max-width: 768px) {
    .upload-page {
        padding: 1rem 0.75rem !important;
    }
    .upload-dropzone {
        padding: 1.5rem 0.75rem !important;
    }
    .upload-dropzone .dropzone-content i {
        font-size: 2.5rem !important;
    }
    .upload-form .edit-field-row {
        grid-template-columns: 1fr !important;
    }
}

/* Watch page: mobile optimizations */
@media (max-width: 768px) {
    .watch-page {
        padding: 0.5rem 0 !important;
    }
    .player-wrap {
        border-radius: 0 !important;
    }
    .video-player {
        max-height: 56vw !important;
    }
    .watch-actions {
        flex-wrap: wrap;
        gap: 0.4rem !important;
    }
    .watch-actions .btn {
        font-size: 0.78rem !important;
        padding: 0.35rem 0.6rem !important;
    }
    .watch-actions .btn span {
        display: none;
    }
    .video-title {
        font-size: 1.05rem !important;
        line-height: 1.3 !important;
    }
    .video-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem !important;
    }
    .sidebar-video-card {
        flex-direction: row !important;
    }
    .sidebar-video-card .thumbnail-wrap {
        width: 160px !important;
        flex-shrink: 0;
    }
    .sidebar-video-card .video-info {
        padding: 0 0 0 0.5rem !important;
    }
    .sidebar-video-card .video-info h3 {
        font-size: 0.82rem !important;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
    .comment-input-row {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    .comment-input-row .comment-input {
        width: 100% !important;
    }
}

/* Edit page: mobile optimizations */
@media (max-width: 768px) {
    .edit-page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
    .edit-page-header .edit-page-actions {
        flex-wrap: wrap;
        gap: 0.4rem !important;
    }
    .edit-nav-sidebar {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        overflow-x: auto;
        padding: 0.5rem !important;
        border-bottom: 1px solid var(--border);
    }
    .edit-nav-link {
        white-space: nowrap;
        padding: 0.4rem 0.75rem !important;
    }
    .edit-nav-save {
        width: auto !important;
        position: relative !important;
        bottom: auto !important;
    }
    .edit-page-content {
        padding: 0.75rem !important;
    }
    .edit-field-row {
        grid-template-columns: 1fr !important;
    }
    .abtest-variants {
        grid-template-columns: 1fr !important;
    }
    .auto-thumbs-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Channel page: mobile optimizations */
@media (max-width: 768px) {
    .channel-hero {
        padding: 1rem 0.75rem !important;
    }
    .channel-actions {
        flex-wrap: wrap;
        gap: 0.4rem !important;
    }
    .channel-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .channel-tab {
        white-space: nowrap;
    }
}

/* Studio: mobile optimizations */
@media (max-width: 768px) {
    .studio-main {
        padding: 0.75rem !important;
        overflow-x: hidden !important;
    }
    .studio-overview {
        grid-template-columns: 1fr !important;
    }
    .studio-bottom,
    .studio-create {
        grid-template-columns: 1fr !important;
    }
    .studio-video-list {
        grid-template-columns: 1fr !important;
    }
    .studio-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .studio-tab {
        white-space: nowrap;
    }
    .dash-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    .dash-stat-card {
        padding: 0.75rem !important;
        gap: 0.5rem !important;
    }
    .dash-stat-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 8px !important;
    }
    .dash-stat-icon i {
        font-size: 1.1rem !important;
    }
    .dash-stat-value {
        font-size: 1.1rem !important;
    }
    .dash-stat-label {
        font-size: 0.72rem !important;
    }
    .dash-stat-trend {
        font-size: 0.68rem !important;
    }
    .dash-welcome {
        font-size: 1.2rem !important;
    }
    .dash-subtitle {
        font-size: 0.85rem !important;
    }
    .dash-chart-card {
        padding: 0.75rem !important;
    }
    .dash-quick-actions {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
    }
    .dash-quick-card {
        padding: 0.6rem !important;
        font-size: 0.72rem !important;
    }
    .dash-quick-card i {
        font-size: 1.2rem !important;
    }
}

@media (max-width: 480px) {
    .dash-stats-grid {
        grid-template-columns: 1fr !important;
    }
    .dash-quick-actions {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Dashboard: mobile optimizations */
@media (max-width: 768px) {
    .dash-grid {
        grid-template-columns: 1fr !important;
    }
    .dash-quick-actions {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .dash-hero {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
}

/* Modal: mobile optimizations */
@media (max-width: 600px) {
    .modal-box {
        width: 95% !important;
        max-width: none !important;
        max-height: 90vh;
        overflow-y: auto;
        margin: 0.5rem !important;
    }
    .modal-box-wide {
        width: 95% !important;
    }
}

/* Tip modal: mobile optimizations */
@media (max-width: 600px) {
    .tip-amounts {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .tip-amount-btn {
        padding: 0.5rem !important;
        font-size: 0.85rem !important;
    }
}

/* Wallet page: mobile */
@media (max-width: 768px) {
    .wallet-grid {
        grid-template-columns: 1fr !important;
    }
    .wallet-balance-card {
        padding: 1rem !important;
    }
    .wallet-balance-amount {
        font-size: 1.5rem !important;
    }
}

/* Analytics: mobile */
@media (max-width: 768px) {
    .analytics-grid {
        grid-template-columns: 1fr !important;
    }
    .analytics-chart {
        padding: 0.75rem !important;
    }
}

/* Search results: mobile */
@media (max-width: 768px) {
    .search-filters {
        position: relative !important;
        width: 100% !important;
    }
    .search-results-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Notification page: mobile */
@media (max-width: 600px) {
    .notif-item {
        padding: 0.65rem !important;
        gap: 0.5rem !important;
    }
    .notif-avatar {
        width: 36px !important;
        height: 36px !important;
    }
    .notif-message {
        font-size: 0.82rem !important;
    }
}

/* Footer: mobile */
@media (max-width: 600px) {
    .footer-top {
        grid-template-columns: 1fr !important;
    }
    .footer-links {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
    }
    .site-footer {
        padding: 1.5rem 0.75rem !important;
    }
}

/* Prevent horizontal scroll on mobile */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    img, video {
        max-width: 100%;
        height: auto;
    }
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    pre, code {
        white-space: pre-wrap;
        word-break: break-word;
    }
}

/* Touch-friendly: bigger tap targets on mobile */
@media (max-width: 768px) {
    .btn, .btn-ghost, .btn-primary {
        min-height: 40px;
        padding: 0.5rem 0.85rem;
    }
    .btn-sm {
        min-height: 34px;
    }
    .menu-item {
        padding: 0.75rem 1rem;
    }
    .video-card {
        cursor: pointer;
    }
    .video-card .thumbnail-wrap {
        border-radius: 8px;
    }
}

/* Shorts: mobile full-width */
@media (max-width: 768px) {
    .shorts-container {
        max-width: 100% !important;
    }
    .shorts-player {
        max-height: 85vh !important;
    }
    .shorts-actions {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
}

/* Live streaming: mobile */
@media (max-width: 768px) {
    .live-page {
        padding: 0.5rem !important;
    }
    .live-chat {
        height: 300px !important;
    }
    .live-chat-messages {
        font-size: 0.85rem !important;
    }
}

/* Embed: mobile */
@media (max-width: 768px) {
    .embed-player {
        max-height: 56vw !important;
    }
}

/* ===== STUDIO VIDEOS & PLAYLISTS — MOBILE OVERRIDES ===== */

@media (max-width: 768px) {
    /* Video list: horizontal row — thumbnail left, info+meta right */
    .studio-video-list-header {
        display: none !important;
    }
    .studio-video-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 0.6rem !important;
        padding: 0.6rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .studio-video-row .studio-thumb {
        width: 140px !important;
        flex-shrink: 0 !important;
        aspect-ratio: 16 / 9 !important;
    }
    .studio-video-row .studio-video-info {
        flex: 1 !important;
        min-width: 0 !important;
    }
    .studio-video-row .studio-video-info h4 {
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
    }
    .studio-video-row .studio-video-desc {
        font-size: 0.76rem !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 1;
    line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
        margin-bottom: 0.3rem !important;
    }
    /* Show metadata inline under description */
    .studio-video-row .studio-video-visibility,
    .studio-video-row .studio-video-published,
    .studio-video-row .studio-video-views,
    .studio-video-row .studio-video-comments {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
        font-size: 0.72rem !important;
        color: var(--text-secondary) !important;
    }
    .studio-video-row .studio-video-visibility .visibility {
        font-size: 0.72rem !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.2rem !important;
    }
    .studio-video-row .studio-video-actions {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 0.25rem !important;
        flex-shrink: 0 !important;
    }

    /* Subtabs scroll horizontally */
    .studio-subtabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        gap: 0.25rem !important;
    }
    .studio-subtab {
        white-space: nowrap !important;
        font-size: 0.82rem !important;
        padding: 0.3rem 0.6rem !important;
    }

    /* Playlist header stacks */
    .playlist-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }
    .playlist-header h3 {
        font-size: 1.1rem !important;
    }
    .create-playlist-form {
        display: flex !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }
    .create-playlist-form input[name="name"] {
        min-width: 0 !important;
        flex: 1 !important;
    }
    .create-playlist-form .btn {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .add-to-playlist-form {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    .add-to-playlist-form select {
        min-width: 0 !important;
        width: 100% !important;
    }
    .add-to-playlist-form .btn {
        width: 100% !important;
    }

    /* Playlist cards stack vertically */
    .playlist-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
        padding: 0.75rem !important;
    }
    .playlist-card-thumb {
        width: 100% !important;
        aspect-ratio: 16/9 !important;
        border-radius: var(--radius-sm) !important;
    }
    .playlist-info {
        text-align: left !important;
        width: 100% !important;
    }
    .playlist-info strong {
        font-size: 0.95rem !important;
    }
    .playlist-actions {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 0.35rem !important;
        width: 100% !important;
    }
    .playlist-actions .btn {
        font-size: 0.8rem !important;
        padding: 0.35rem 0.6rem !important;
    }

    /* Playlist video rows */
    .playlist-video-row {
        gap: 0.5rem !important;
        padding: 0.4rem !important;
    }
    .playlist-video-row .playlist-thumb {
        width: 100px !important;
        flex-shrink: 0 !important;
    }
    .playlist-video-title {
        min-width: 0 !important;
        font-size: 0.82rem !important;
    }
    .playlist-video-title a {
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Studio pagination stacks */
    .studio-pagination {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }
    .per-page-form {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        font-size: 0.8rem !important;
    }
    .pagination-info {
        text-align: center !important;
        font-size: 0.8rem !important;
    }
    .pagination-controls {
        justify-content: space-between !important;
    }
    .pagination-controls .btn {
        flex: 1 !important;
        justify-content: center !important;
        font-size: 0.82rem !important;
    }

    /* Edit modal form */
    .edit-form-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .edit-form-row {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    .edit-thumb-preview-large {
        max-width: 280px !important;
    }

    /* Cards editor */
    .cards-editor-row {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
        padding: 0.5rem !important;
    }
    .cards-editor-info {
        flex: 1 !important;
        min-width: 0 !important;
    }
    .cards-editor-info strong {
        font-size: 0.85rem !important;
        word-break: break-word !important;
    }
}

@media (max-width: 480px) {
    .studio-video-row .studio-thumb {
        width: 110px !important;
    }
    .studio-video-row .studio-video-info h4 {
        font-size: 0.82rem !important;
    }
    .playlist-actions .btn {
        flex: 1 !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ===== STUDIO VIDEO ROW — DESKTOP/MOBILE SPLIT ===== */

/* Desktop: hide mobile meta, show desktop columns */
.studio-video-meta-mobile {
    display: none;
}

/* Mobile: hide desktop columns, show mobile meta under description */
@media (max-width: 768px) {
    .studio-video-meta-mobile {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
        margin-top: 0.3rem !important;
        font-size: 0.72rem !important;
        color: var(--text-secondary) !important;
    }
    .studio-video-meta-mobile .studio-video-visibility,
    .studio-video-meta-mobile .studio-video-published,
    .studio-video-meta-mobile .studio-video-views,
    .studio-video-meta-mobile .studio-video-comments {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.2rem !important;
        font-size: 0.72rem !important;
        color: var(--text-secondary) !important;
    }
    .studio-video-meta-mobile .visibility {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.2rem !important;
        font-size: 0.72rem !important;
    }
    /* Hide the duplicate desktop columns on mobile */
    .studio-video-row > .studio-video-col-desktop {
        display: none !important;
    }
}

/* ===== HEADER MOBILE OVERRIDES ===== */

@media (max-width: 768px) {
    .site-header {
        padding: 0 0.5rem !important;
        gap: 0.25rem !important;
        height: 56px !important;
    }
    .header-left,
    .header-right {
        gap: 0.25rem !important;
    }
    .logo-text {
        font-size: 1.1rem !important;
    }
    .logo-icon {
        font-size: 1.8rem !important;
    }
    .btn-ghost.icon-only {
        padding: 0.4rem !important;
        font-size: 1.2rem !important;
    }
    .upload-btn-text {
        display: none !important;
    }
    .upload-btn {
        padding: 0.4rem !important;
        font-size: 1.2rem !important;
    }
    .upload-btn i {
        font-size: 1.2rem !important;
    }
    .notification-bell i {
        font-size: 1.3rem !important;
    }
    .notification-bell {
        font-size: 1.3rem !important;
    }
    .user-avatar {
        width: 32px !important;
        height: 32px !important;
    }
}

@media (max-width: 480px) {
    .site-header {
        padding: 0 0.4rem !important;
        gap: 0.15rem !important;
    }
    .logo-text {
        display: none !important;
    }
    .logo-icon {
        font-size: 1.6rem !important;
    }
    .header-left,
    .header-right {
        gap: 0.15rem !important;
    }
    /* Hide studio icon — accessible via profile dropdown */
    .header-right .btn-ghost[aria-label="Studio"] {
        display: none !important;
    }
    /* Hide theme toggle — accessible via settings */
    #themeToggle {
        display: none !important;
    }
    .upload-btn {
        padding: 0.35rem !important;
    }
    .notification-bell i {
        font-size: 1.2rem !important;
    }
    .user-avatar {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.8rem !important;
    }
}

/* ===== CHANNEL PAGE MOBILE OVERRIDES ===== */

@media (max-width: 768px) {
    /* Banner: shorter on mobile */
    .channel-banner {
        height: 140px !important;
        border-radius: 0 !important;
    }

    /* Hero: stack vertically, avatar on top */
    .channel-hero {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.75rem !important;
        padding: 0.75rem !important;
        margin-top: -40px !important;
    }

    /* Avatar: smaller on mobile */
    .channel-hero .channel-avatar-wrap {
        width: 80px !important;
        height: 80px !important;
        border-width: 3px !important;
        margin-top: -20px !important;
    }
    .channel-hero .channel-avatar-wrap .channel-avatar {
        font-size: 1.8rem !important;
    }

    /* Channel info: full width, centered */
    .channel-info {
        width: 100% !important;
        padding-bottom: 0 !important;
        text-align: center !important;
    }
    .channel-name-wrap {
        justify-content: center !important;
    }
    .channel-name {
        font-size: 1.3rem !important;
    }
    .channel-handle {
        font-size: 0.82rem !important;
    }
    .channel-bio {
        font-size: 0.85rem !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    /* Social links: center */
    .channel-social-header {
        justify-content: center !important;
    }
    .channel-social-header .channel-social-link {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.95rem !important;
    }

    /* Owner actions: center and wrap */
    .channel-owner-actions {
        justify-content: center !important;
    }

    /* Subscribe button: full width on mobile */
    .channel-info .action-form,
    .channel-info .btn-subscribe,
    .channel-info .btn-primary {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0.5rem auto 0 !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Creator badges: center */
    .creator-badges-row {
        justify-content: center !important;
    }

    /* Tabs: horizontal scroll */
    .channel-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding: 1rem 0.75rem 0 !important;
        gap: 0.25rem !important;
    }
    .channel-tab {
        white-space: nowrap !important;
        font-size: 0.85rem !important;
        padding: 0.5rem 0.75rem !important;
    }

    /* Goals grid: 1 column */
    .channel-goals-v2-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    .channel-goals-v2 {
        padding: 0.75rem !important;
    }
    .channel-goal-v2-card {
        padding: 0.75rem !important;
    }

    /* About grid: already collapses at 768px, ensure it stays */
    .channel-about-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    /* Channel video grid: 2 columns on tablet */
    .channel-video-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    /* Channel playlist grid: 2 columns */
    .channel-playlist-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    /* Banner: even shorter */
    .channel-banner {
        height: 100px !important;
    }

    /* Avatar: smaller */
    .channel-hero .channel-avatar-wrap {
        width: 64px !important;
        height: 64px !important;
    }
    .channel-hero .channel-avatar-wrap .channel-avatar {
        font-size: 1.4rem !important;
    }

    /* Name: smaller */
    .channel-name {
        font-size: 1.1rem !important;
    }

    /* Video grid: 1 column on phones */
    .channel-video-grid {
        grid-template-columns: 1fr !important;
    }

    /* Playlist grid: 1 column */
    .channel-playlist-grid {
        grid-template-columns: 1fr !important;
    }

    /* Goals: compact */
    .channel-goal-v2-top {
        gap: 0.5rem !important;
    }
    .channel-goal-v2-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
    }
    .channel-goal-v2-info strong {
        font-size: 0.85rem !important;
    }
    .channel-goal-v2-info span {
        font-size: 0.72rem !important;
    }
}

/* Channel sections: ensure they don't overflow */
@media (max-width: 768px) {
    .channel-section {
        padding: 0.75rem !important;
    }
    .channel-section .section-title {
        font-size: 1.1rem !important;
    }
    .channel-section.active {
        display: block;
    }
    /* Community posts on mobile */
    .community-post {
        padding: 0.75rem !important;
    }
    .community-post-header {
        gap: 0.5rem !important;
    }
    .community-post-avatar {
        width: 36px !important;
        height: 36px !important;
    }
    .community-post-body {
        font-size: 0.88rem !important;
    }
}

/* Channel stats: wrap on mobile */
@media (max-width: 768px) {
    .channel-stats {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        justify-content: center !important;
    }
    .channel-stat {
        font-size: 0.8rem !important;
    }
}

/* Series grid on channel */
@media (max-width: 768px) {
    .channel-series-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
}

/* Membership tiers on channel */
@media (max-width: 768px) {
    .membership-tiers {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    .membership-tier-card {
        padding: 1rem !important;
    }
}

/* ===== CONTENT PROTECTION UI ===== */

/* License description */
.license-description {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
    padding: 0.6rem 0.75rem;
    background: var(--surface-2);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    line-height: 1.5;
}

/* Creator News — Studio Dashboard */
.creator-news-section {
    margin-top: 2.5rem;
    padding: 1.25rem;
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
}
.creator-news-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.creator-news-head h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.15rem;
    margin: 0;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.creator-news-head h3 i {
    color: var(--primary);
    font-size: 1.5rem;
}
.creator-news-view-all {
    font-size: 0.82rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 0, 0, 0.07);
    transition: all 0.2s;
}
.creator-news-view-all:hover {
    background: rgba(255, 0, 0, 0.15);
    transform: translateX(2px);
}

/* Featured news card */
.creator-news-featured {
    display: block;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    margin-bottom: 1.5rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.creator-news-featured:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 28px rgba(255, 0, 0, 0.08);
}
.creator-news-featured-thumb {
    width: 100%;
    height: 180px;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-3);
    position: relative;
}
.creator-news-featured-icon {
    background: linear-gradient(135deg, #ff0000 0%, #8b5cf6 100%);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.6);
}
.creator-news-video-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    backdrop-filter: blur(6px);
}
.creator-news-featured-body {
    padding: 1.25rem 1.5rem 1.5rem;
}
.creator-news-featured-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0.6rem 0 0.5rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
}
.creator-news-featured-summary {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 1rem 0;
}
.creator-news-featured .creator-news-readmore {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.4rem 0;
}

@media (min-width: 768px) {
    .creator-news-featured {
        display: flex;
        flex-direction: row;
    }
    .creator-news-featured-thumb {
        width: 240px;
        height: auto;
        min-height: 180px;
        flex-shrink: 0;
    }
    .creator-news-featured-body {
        flex: 1;
        padding: 1.25rem 1.75rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* News grid cards */
.creator-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}
.creator-news-grid-full {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}
.creator-news-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.creator-news-card:hover {
    border-color: var(--primary);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}
.creator-news-card.pinned {
    border-color: rgba(255, 0, 0, 0.3);
}
.creator-news-card .creator-news-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.85rem 1rem 1rem;
}
.creator-news-card .creator-news-readmore {
    margin-top: auto;
    padding-top: 0.5rem;
}
.creator-news-thumb {
    width: 100%;
    height: 120px;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-3);
    flex-shrink: 0;
}
.creator-news-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff0000 0%, #8b5cf6 100%);
}
.creator-news-thumb-placeholder i {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.7);
}
.creator-news-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.creator-news-pin {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.15rem;
}
.creator-news-cat {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}
.creator-news-cat-update { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.creator-news-cat-feature { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.creator-news-cat-policy { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.creator-news-cat-tutorial { background: rgba(168, 85, 247, 0.1); color: #a855f7; }
.creator-news-cat-announcement { background: rgba(249, 115, 22, 0.1); color: #f97316; }
.creator-news-date {
    font-size: 0.7rem;
    color: var(--text-secondary);
}
.creator-news-title {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 0.3rem 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.creator-news-summary {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 0.5rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.creator-news-readmore {
    font-size: 0.78rem;
    color: var(--primary);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: gap 0.2s;
}
.creator-news-card:hover .creator-news-readmore,
.creator-news-featured:hover .creator-news-readmore {
    gap: 0.5rem;
}

/* News article page */
.news-article-page {
    max-width: 800px;
    padding: 2rem 1rem;
}
.news-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}
.news-back-link:hover { color: var(--primary); }
.news-article {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    margin-bottom: 2rem;
}
.news-article-head { margin-bottom: 1.5rem; }
.news-article-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.news-article-date, .news-article-views {
    font-size: 0.82rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.news-article h1 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}
.news-article-summary {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.news-article-banner {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}
.news-article-video {
    margin-bottom: 1.5rem;
}
.news-article-video video {
    width: 100%;
    border-radius: var(--radius);
}
.news-article-body {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text);
    white-space: pre-wrap;
}
.news-related h3 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

/* News list page */
.news-list-page {
    max-width: 1100px;
    padding: 2rem 1rem;
}
.news-list-head {
    margin-bottom: 2rem;
}
.news-list-head h1 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.75rem;
    margin-bottom: 0.4rem;
}
.news-list-head p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}
.news-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--text-secondary);
}
.news-empty i {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
    opacity: 0.4;
}

/* ===== Rich Text Editor (RTE) ===== */
.rte-toolbar {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.rte-toolbar button {
    background: none;
    border: none;
    padding: 0.35rem 0.45rem;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    min-width: 30px;
    min-height: 30px;
}
.rte-toolbar button:hover {
    background: var(--hover);
    color: var(--text);
}
.rte-toolbar button:active {
    background: var(--primary);
    color: #fff;
}
.rte-divider {
    width: 1px;
    height: 22px;
    background: var(--border);
    margin: 0 0.2rem;
}
.rte-editor {
    min-height: 200px;
    max-height: 500px;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text);
    outline: none;
    transition: border-color 0.15s;
}
.rte-editor:focus {
    border-color: var(--primary);
}
.rte-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--text-secondary);
    opacity: 0.6;
    pointer-events: none;
}
.rte-editor h2 { font-size: 1.3rem; font-weight: 800; margin: 1rem 0 0.5rem; }
.rte-editor h3 { font-size: 1.1rem; font-weight: 700; margin: 0.8rem 0 0.4rem; }
.rte-editor blockquote {
    border-left: 4px solid var(--primary);
    padding: 0.5rem 1rem;
    margin: 1rem 0;
    background: var(--surface);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-secondary);
    font-style: italic;
}
.rte-editor pre {
    background: var(--surface-3);
    padding: 1rem;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.85rem;
    margin: 1rem 0;
}
.rte-editor code {
    background: var(--surface-3);
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.85rem;
}
.rte-editor pre code {
    padding: 0;
    background: none;
}
.rte-editor ul, .rte-editor ol {
    padding-left: 1.5rem;
    margin: 0.75rem 0;
}
.rte-editor li { margin: 0.25rem 0; }
.rte-editor a {
    color: var(--primary);
    text-decoration: underline;
    font-weight: 600;
}
.rte-editor img {
    max-width: 100%;
    border-radius: var(--radius-sm);
    margin: 0.75rem 0;
}
.rte-editor hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}

/* Emoji picker */
.rte-emoji-picker {
    position: absolute;
    z-index: 1000;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    max-width: 320px;
}
.rte-emoji-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 0.15rem;
}
.rte-emoji-item {
    background: none;
    border: none;
    padding: 0.3rem;
    font-size: 1.3rem;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.1s;
}
.rte-emoji-item:hover {
    background: var(--hover);
}

/* Embed dialog */
.rte-embed-dialog {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-top: 0.5rem;
}
.rte-embed-dialog h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.rte-embed-dialog p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0 0 0.5rem 0;
}

/* Block type select in toolbar */
.rte-block-select {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.8rem;
    cursor: pointer;
    margin: 0 0.15rem;
}
.rte-block-select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Callout dialog */
.rte-callout-dialog, .rte-table-dialog {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-top: 0.5rem;
}
.rte-callout-dialog h4, .rte-table-dialog h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Upload progress indicator */
.rte-upload-progress {
    padding: 1rem 1.25rem;
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0;
}
.rte-upload-progress i {
    font-size: 1.1rem;
    color: var(--primary);
}

/* RTE figure (uploaded images/videos) */
.rte-editor figure, .news-article-body figure {
    margin: 1.25rem 0;
}
.rte-editor figcaption, .news-article-body figcaption {
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 0.4rem;
    font-style: italic;
}
.rte-editor video, .news-article-body video {
    max-width: 100%;
    border-radius: var(--radius);
    display: block;
    margin: 0.75rem 0;
}

/* RTE callout blocks */
.rte-editor .news-callout, .news-article-body .news-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-sm);
    margin: 1.25rem 0;
    border-left: 4px solid;
    font-size: 0.92rem;
    line-height: 1.6;
}
.rte-editor .news-callout-icon, .news-article-body .news-callout-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    line-height: 1.6;
}
.rte-editor .news-callout-body, .news-article-body .news-callout-body {
    flex: 1;
}
.news-callout-info {
    background: rgba(59, 130, 246, 0.08);
    border-color: #3b82f6;
    color: #93c5fd;
}
.news-callout-success {
    background: rgba(34, 197, 94, 0.08);
    border-color: #22c55e;
    color: #86efac;
}
.news-callout-warning {
    background: rgba(249, 115, 22, 0.08);
    border-color: #f97316;
    color: #fcd34d;
}
.news-callout-danger {
    background: rgba(239, 68, 68, 0.08);
    border-color: #ef4444;
    color: #fca5a5;
}
.news-callout-tip {
    background: rgba(168, 85, 247, 0.08);
    border-color: #a855f7;
    color: #d8b4fe;
}

/* ===== News Article Rich Content ===== */
.news-article-body {
    font-size: 1rem;
    line-height: 1.8;
}
.news-article-body h2 {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 1.5rem 0 0.75rem;
    letter-spacing: -0.01em;
}
.news-article-body h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 1.25rem 0 0.5rem;
}
.news-article-body p {
    margin: 0.75rem 0;
}
.news-article-body a {
    color: var(--primary);
    text-decoration: underline;
    font-weight: 600;
}
.news-article-body a:hover {
    text-decoration: none;
    opacity: 0.8;
}
.news-article-body strong, .news-article-body b {
    font-weight: 700;
}
.news-article-body em, .news-article-body i {
    font-style: italic;
}
.news-article-body u {
    text-decoration: underline;
}
.news-article-body s, .news-article-body strike, .news-article-body del {
    text-decoration: line-through;
}
.news-article-body ul, .news-article-body ol {
    padding-left: 1.5rem;
    margin: 1rem 0;
}
.news-article-body li {
    margin: 0.4rem 0;
}
.news-article-body blockquote {
    border-left: 4px solid var(--primary);
    padding: 0.75rem 1.25rem;
    margin: 1.25rem 0;
    background: var(--surface-2);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-secondary);
    font-style: italic;
    font-size: 1.02rem;
}
.news-article-body pre {
    background: var(--surface-3);
    padding: 1.25rem;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.88rem;
    margin: 1.25rem 0;
    line-height: 1.5;
}
.news-article-body code {
    background: var(--surface-3);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.88rem;
}
.news-article-body pre code {
    padding: 0;
    background: none;
}
.news-article-body img {
    max-width: 100%;
    border-radius: var(--radius);
    margin: 1rem 0;
    display: block;
}
.news-article-body hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2rem 0;
}
.news-article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
}
.news-article-body th, .news-article-body td {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    text-align: left;
}
.news-article-body th {
    background: var(--surface-2);
    font-weight: 700;
}

/* Embeds in articles */
.news-embed-wrapper {
    margin: 1.5rem 0;
}
.news-embed-frame {
    position: relative;
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
}
.news-embed-frame iframe {
    display: block;
    width: 100%;
    height: 400px;
    border: 0;
}
.news-embed-youtube .news-embed-frame,
.news-embed-vimeo .news-embed-frame {
    aspect-ratio: 16/9;
    height: auto;
}
.news-embed-youtube .news-embed-frame iframe,
.news-embed-vimeo .news-embed-frame iframe {
    position: absolute;
    inset: 0;
    height: 100%;
}
.news-embed-spotify .news-embed-frame iframe {
    height: 152px;
}
.news-embed-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-decoration: none;
    margin-top: 0.4rem;
}
.news-embed-link:hover {
    color: var(--primary);
}

/* Link previews in articles */
.news-link-preview {
    margin: 1.25rem 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.news-link-preview:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.news-link-preview a {
    display: flex;
    text-decoration: none;
    color: inherit;
}
.news-lp-image {
    width: 160px;
    min-height: 120px;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-3);
    flex-shrink: 0;
}
.news-lp-body {
    padding: 0.85rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.news-lp-title {
    font-size: 0.92rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-lp-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0 0 0.35rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-lp-url {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: lowercase;
}
@media (max-width: 600px) {
    .news-link-preview a {
        flex-direction: column;
    }
    .news-lp-image {
        width: 100%;
        min-height: 160px;
    }
}

/* Protection forms on edit video page */
.protection-form {
    max-width: 100%;
}
.protection-form .form-group {
    margin-bottom: 1rem;
}
.protection-form label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}
.protection-form input[type="text"],
.protection-form input[type="url"],
.protection-form input[type="email"],
.protection-form select,
.protection-form textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.9rem;
}
.protection-form input[type="range"] {
    width: 100%;
}
.protection-form label input[type="checkbox"] {
    margin-right: 0.5rem;
    vertical-align: middle;
}
.protection-form small {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* DRM status badge */
.drm-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-weight: 600;
}
.drm-status.drm-active {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.drm-status.drm-inactive {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.drm-status i {
    font-size: 1.3rem;
}
.drm-info-box {
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}
.drm-info-box p {
    margin: 0 0 0.5rem 0;
    font-size: 0.85rem;
    color: #22c55e;
    font-weight: 600;
}
.drm-info-box p i {
    margin-right: 0.3rem;
}
.drm-info-box ul,
.drm-feature-list {
    margin: 0.5rem 0 1rem 0;
    padding-left: 1.25rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
.drm-info-box ul li,
.drm-feature-list li {
    margin-bottom: 0.2rem;
}
.drm-description {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0.5rem 0 0 0;
}

/* Rights list */
.rights-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.rights-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.rights-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.rights-item-info strong {
    font-size: 0.9rem;
}
.rights-type {
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.rights-expiry {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* Studio protection tab */
.protection-strikes-card {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.protection-strikes-card h3 {
    color: #ef4444;
    margin-bottom: 0.5rem;
}
.protection-warning {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}
.strikes-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.strike-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* Copyright strikes overview (studio copyright tab) */
.copyright-strikes-overview {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.copyright-strikes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.copyright-strikes-header h3 {
    margin: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.copyright-strikes-count {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}
.copyright-strikes-count.strikes-warning {
    background: rgba(249, 115, 22, 0.12);
    color: #f97316;
}
.copyright-strikes-count.strikes-danger {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}
.copyright-strikes-bar {
    width: 100%;
    height: 8px;
    background: var(--surface-3);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}
.copyright-strikes-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}
.copyright-strikes-fill.strikes-ok {
    background: #22c55e;
}
.copyright-strikes-fill.strikes-warning {
    background: #f97316;
}
.copyright-strikes-fill.strikes-danger {
    background: #ef4444;
}
.copyright-strikes-info {
    font-size: 0.82rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 1rem 0;
}
.copyright-strikes-info i {
    color: #3b82f6;
}
.copyright-strikes-warning {
    font-size: 0.82rem;
    color: #f97316;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 1rem 0;
}
.copyright-strikes-warning i {
    font-size: 1rem;
}
.copyright-strikes-terminated {
    font-size: 0.88rem;
    color: #ef4444;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 1rem 0;
}
.copyright-strikes-terminated i {
    font-size: 1.1rem;
}
.copyright-strikes-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.copyright-strike-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: var(--radius-sm);
}
.copyright-strike-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}
.copyright-strike-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.copyright-strike-info strong {
    font-size: 0.88rem;
}
.copyright-strike-info span {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.copyright-strike-info small {
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.strike-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.strike-info strong {
    font-size: 0.88rem;
}
.strike-info span {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.strike-info small {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* Claims list */
.claims-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.claim-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    flex-wrap: wrap;
}
.claim-item.claim-status-pending {
    border-left: 3px solid #f97316;
}
.claim-item.claim-status-approved {
    border-left: 3px solid #ef4444;
}
.claim-item.claim-status-rejected {
    border-left: 3px solid #22c55e;
}
.claim-item.claim-status-counter_notified {
    border-left: 3px solid #3b82f6;
}
.claim-item-info {
    flex: 1;
    min-width: 200px;
}
.claim-item-info strong {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}
.claim-item-info span {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.claim-item-info p {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 0.35rem;
}
.claim-status-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    margin-top: 0.35rem;
    background: var(--surface-3);
    color: var(--text-secondary);
}
.claim-status-pending .claim-status-badge { background: rgba(249, 115, 22, 0.2); color: #f97316; }
.claim-status-approved .claim-status-badge { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.claim-status-rejected .claim-status-badge { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.claim-status-counter_notified .claim-status-badge { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.claim-counter-form {
    flex: 1;
    min-width: 200px;
}
.claim-counter-form textarea {
    width: 100%;
    padding: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.82rem;
    margin-bottom: 0.5rem;
}

/* Protection video list (studio) */
.protection-video-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.protection-video-header {
    display: grid;
    grid-template-columns: 2fr 80px 90px 1.5fr 80px 90px;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}
.protection-video-row {
    display: grid;
    grid-template-columns: 2fr 80px 90px 1.5fr 80px 90px;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    align-items: center;
    border-bottom: 1px solid var(--border);
    font-size: 0.82rem;
}
.pv-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.pv-title img {
    width: 40px;
    height: 22px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}
.pv-title a {
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pv-title a:hover {
    color: var(--primary);
}
.pv-badge {
    text-align: center;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
}
.pv-badge.pv-on {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}
.pv-badge.pv-off {
    background: var(--surface-3);
    color: var(--text-secondary);
}
.pv-license {
    font-size: 0.75rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* User watermark overlay on watch page */
.user-watermark {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    font-size: 2.5rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.55);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
    transition: top 0.5s ease, left 0.5s ease, right 0.5s ease, bottom 0.5s ease;
}
.wm-pos-top_left { top: 5%; left: 5%; }
.wm-pos-top_right { top: 5%; right: 5%; }
.wm-pos-bottom_left { bottom: 5%; left: 5%; }
.wm-pos-bottom_right { bottom: 5%; right: 5%; }
.wm-pos-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* Geo-blocked overlay */
.geo-blocked-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    text-align: center;
    padding: 3rem 2rem;
    margin: 1rem 0;
}
.geo-blocked-overlay i {
    font-size: 3rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}
.geo-blocked-overlay h2 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}
.geo-blocked-overlay p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.geo-blocked-country {
    margin-top: 0.25rem;
    font-size: 0.78rem !important;
    opacity: 0.7;
}
.geo-blocked-test {
    margin-top: 1rem !important;
    font-size: 0.78rem !important;
    color: var(--primary) !important;
}
.geo-blocked-test a {
    color: var(--primary);
    text-decoration: underline;
}
.geo-test-select {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 0.82rem;
}

/* Copyright claim modal */
.flash-message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin: 0 auto 1rem;
    max-width: 1200px;
    font-size: 0.88rem;
    font-weight: 600;
    animation: flashSlide 0.3s ease;
}
.flash-message button {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    opacity: 0.6;
    padding: 0.2rem;
}
.flash-message button:hover { opacity: 1; }
.flash-success {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.25);
}
.flash-error {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.flash-info {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.25);
}
@keyframes flashSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.copyright-claim-form .form-group {
    margin-bottom: 1rem;
}
.copyright-claim-form label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}
.copyright-claim-form .req {
    color: #ef4444;
}
.copyright-claim-form input,
.copyright-claim-form select,
.copyright-claim-form textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.9rem;
}
.copyright-claim-form textarea {
    resize: vertical;
}

/* Admin roles & permissions */
.admin-roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.admin-role-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    border-left: 4px solid var(--role-color, #6b7280);
}
.admin-role-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.admin-role-name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.95rem;
}
.admin-role-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--role-color, #6b7280);
    flex-shrink: 0;
}
.admin-role-system-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    background: rgba(249, 115, 22, 0.12);
    color: #f97316;
}
.admin-role-users {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 600;
}
.admin-role-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}
.admin-role-perms {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}
.admin-role-actions {
    display: flex;
    gap: 0.5rem;
}
.role-perms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.role-perm-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    cursor: pointer;
    transition: all 0.15s;
}
.role-perm-checkbox:hover {
    border-color: var(--primary);
}
.role-perm-checkbox input[type="checkbox"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
}
.role-perm-label {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.role-perm-label i {
    font-size: 1rem;
    color: var(--primary);
}
.role-perm-label strong {
    font-size: 0.85rem;
}
.role-perm-label small {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.3;
}
.admin-role-tag {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 0.3rem;
    margin-bottom: 0.2rem;
}
.admin-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.admin-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--border);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.admin-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}
.admin-table tr:last-child td {
    border-bottom: none;
}
.admin-table tr:hover td {
    background: var(--hover);
}

/* Admin copyright section */
.admin-copyright-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0;
}
.admin-copyright-tab {
    padding: 0.6rem 1.1rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    font-family: inherit;
}
.admin-copyright-tab:hover {
    color: var(--text);
}
.admin-copyright-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.admin-copyright-panel {
    min-height: 100px;
}
.admin-claims-list,
.admin-strikes-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.admin-claim-item {
    display: grid;
    grid-template-columns: 220px 1fr 220px;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    align-items: start;
    transition: box-shadow 0.15s;
}
.admin-claim-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.admin-claim-item.claim-status-pending { border-left: 4px solid #f97316; }
.admin-claim-item.claim-status-approved { border-left: 4px solid #ef4444; }
.admin-claim-item.claim-status-rejected { border-left: 4px solid #22c55e; }
.admin-claim-item.claim-status-retracted { border-left: 4px solid #6b7280; }
.admin-claim-item.claim-status-counter_notified { border-left: 4px solid #3b82f6; }
.admin-claim-item.claim-status-under_review { border-left: 4px solid #a855f7; }
.admin-claim-video {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.admin-claim-video img {
    width: 80px;
    height: 45px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    border: 1px solid var(--border);
}
.admin-claim-video strong {
    display: block;
    font-size: 0.88rem;
    line-height: 1.3;
}
.admin-claim-video span {
    font-size: 0.76rem;
    color: var(--text-secondary);
}
.admin-claim-info {
    min-width: 0;
}
.admin-claim-info p {
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
    line-height: 1.4;
}
.admin-claim-info p strong {
    color: var(--text);
}
.admin-claim-info a {
    color: var(--primary);
    word-break: break-all;
}
.admin-claim-info .admin-counter-notice {
    background: rgba(59, 130, 246, 0.08);
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    border-left: 3px solid #3b82f6;
    margin-top: 0.35rem;
}
.admin-claim-info small {
    display: block;
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
}
.admin-claim-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.admin-claim-form {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.admin-note-input {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 0.78rem;
    font-family: inherit;
}
.admin-note-input:focus {
    outline: none;
    border-color: var(--primary);
}
.admin-strike-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    border-left: 4px solid #ef4444;
    gap: 1rem;
}
.admin-strike-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.admin-strike-info strong {
    font-size: 0.9rem;
}
.admin-strike-info span {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.admin-strike-info small {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* Protection UI mobile responsive */
@media (max-width: 768px) {
    .protection-video-header {
        display: none !important;
    }
    .protection-video-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.4rem !important;
        padding: 0.6rem !important;
    }
    .pv-title {
        width: 100% !important;
    }
    .pv-badge,
    .pv-license {
        text-align: left !important;
        padding: 0.2rem 0.4rem !important;
    }
    .admin-claim-item {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    .admin-claim-actions {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    .admin-claim-form {
        flex: 1;
        min-width: 180px;
    }
    .admin-copyright-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    .admin-copyright-tab {
        white-space: nowrap;
    }
    .claim-item {
        flex-direction: column !important;
    }
    .protection-form input,
    .protection-form select,
    .protection-form textarea {
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .user-watermark {
        font-size: 1.5rem !important;
    }
    .admin-strike-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
}