/* Patron Mode Skin - Patreon Style */

.pm-app {

    --pm-bg: var(--bg-primary, #0d0d0d);

    --pm-bg-secondary: var(--bg-secondary, #141414);

    --pm-bg-tertiary: var(--bg-tertiary, #1f1f1f);

    --pm-bg-hover: var(--bg-hover, #2a2a2a);

    --pm-text: var(--text-primary, #fff);

    --pm-text-secondary: var(--text-secondary, #999);

    --pm-text-muted: var(--text-muted, #666);

    --pm-border: var(--border-color, #262626);

    --pm-accent: #ff424d;

}

[data-theme="light"] .pm-app, .light-mode .pm-app, body.light .pm-app {

    --pm-bg: #ffffff; --pm-bg-secondary: #fafafa; --pm-bg-tertiary: #f0f0f0; --pm-bg-hover: #e5e5e5; --pm-text: #1a1a1a; --pm-text-secondary: #666; --pm-text-muted: #999; --pm-border: #e5e5e5;

}

.pm-app { min-height: 100vh; background: var(--pm-bg); color: var(--pm-text); display: flex; flex-direction: column; }



/* Header */

.pm-header { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 24px; background: var(--pm-bg-secondary); border-bottom: 1px solid var(--pm-border); }

.pm-header-left { display: flex; align-items: center; }

.pm-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--pm-text); font-size: 20px; font-weight: 700; }

.pm-logo i { color: var(--pm-accent); font-size: 24px; }

.pm-header-center { flex: 1; display: flex; justify-content: center; }

.pm-nav { display: flex; gap: 32px; }

.pm-nav a { color: var(--pm-text-secondary); text-decoration: none; font-weight: 600; font-size: 15px; }

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

.pm-nav a.active { color: var(--pm-text); }

.pm-header-right { display: flex; align-items: center; gap: 16px; }



/* Skin Switcher */

.pm-skin-switcher { position: relative; }

.pm-skin-btn { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--pm-bg-tertiary); border: none; border-radius: 8px; color: var(--pm-text); cursor: pointer; font-size: 13px; }

.pm-skin-btn:hover { background: var(--pm-bg-hover); }

.pm-skin-dot { width: 10px; height: 10px; border-radius: 50%; }

.pm-skin-dropdown { position: absolute; top: 100%; right: 0; margin-top: 8px; min-width: 180px; background: var(--pm-bg-secondary); border: 1px solid var(--pm-border); border-radius: 12px; display: none; z-index: 200; overflow: hidden; }

.pm-skin-switcher.active .pm-skin-dropdown { display: block; }

.pm-skin-option { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: var(--pm-text); text-decoration: none; font-size: 14px; }

.pm-skin-option:hover { background: var(--pm-bg-tertiary); }

.pm-skin-option.active { background: rgba(255,66,77,0.1); }

.pm-skin-option .fa-check { margin-left: auto; font-size: 12px; color: var(--pm-accent); }

.pm-create-btn { padding: 10px 20px; background: var(--pm-accent); color: white; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 14px; }

.pm-create-btn:hover { background: #ff5a63; }



/* Main Layout */

.pm-main { display: flex; flex: 1; max-width: 1400px; margin: 0 auto; width: 100%; }



/* Left Sidebar */

.pm-sidebar { width: 280px; padding: 24px; border-right: 1px solid var(--pm-border); display: flex; flex-direction: column; }

.pm-sidebar-section { margin-bottom: 24px; }

.pm-sidebar-section h4 { font-size: 12px; text-transform: uppercase; color: var(--pm-text-muted); letter-spacing: 1px; margin-bottom: 16px; }

.pm-membership { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 8px; text-decoration: none; color: var(--pm-text); margin-bottom: 4px; }

.pm-membership:hover { background: var(--pm-bg-tertiary); }

.pm-membership-avatar { width: 36px; height: 36px; background: linear-gradient(135deg, var(--pm-accent), #ff8f6b); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; color: white; }

.pm-membership span { font-weight: 500; font-size: 14px; }

.pm-sidebar-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--pm-border); }

.pm-footer-links { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }

.pm-footer-links a { color: var(--pm-text-muted); font-size: 12px; text-decoration: none; }

.pm-footer-links a:hover { color: var(--pm-text); }

.pm-earning { color: var(--pm-accent); font-size: 13px; display: flex; align-items: center; gap: 8px; }



/* Content */

.pm-content { flex: 1; padding: 24px; max-width: 680px; }



/* Feed */

.pm-feed { display: flex; flex-direction: column; gap: 24px; }

.pm-post { background: var(--pm-bg-secondary); border-radius: 12px; border: 1px solid var(--pm-border); overflow: hidden; }

.pm-post-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; }

.pm-post-creator { display: flex; align-items: center; gap: 12px; }

.pm-avatar { width: 44px; height: 44px; background: linear-gradient(135deg, var(--pm-accent), #ff8f6b); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: white; }

.pm-creator-info { display: flex; flex-direction: column; }

.pm-creator-name { font-weight: 600; font-size: 15px; }

.pm-post-time { font-size: 13px; color: var(--pm-text-muted); }

.pm-tier { padding: 6px 12px; background: var(--pm-bg-tertiary); border-radius: 20px; font-size: 12px; color: var(--pm-text-secondary); }

.pm-post-title { padding: 0 16px 16px; margin: 0; font-size: 18px; font-weight: 600; line-height: 1.4; }

.pm-post-full .pm-post-title { font-size: 24px; padding-bottom: 20px; }

.pm-post-media { display: block; position: relative; }

.pm-post-media img, .pm-post-media video { width: 100%; display: block; }

.pm-placeholder { width: 100%; aspect-ratio: 16/9; background: var(--pm-bg-tertiary); display: flex; align-items: center; justify-content: center; font-size: 64px; color: var(--pm-text-muted); }

.pm-play-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; }

.pm-post-media:hover .pm-play-overlay { opacity: 1; }

.pm-play-overlay i { font-size: 64px; color: white; }

.pm-post-description { padding: 16px; line-height: 1.7; color: var(--pm-text-secondary); }

.pm-post-actions { display: flex; gap: 8px; padding: 16px; border-top: 1px solid var(--pm-border); }

.pm-action { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--pm-bg-tertiary); border: none; border-radius: 8px; color: var(--pm-text); cursor: pointer; font-size: 14px; }

.pm-action:hover { background: var(--pm-bg-hover); }



.pm-empty { text-align: center; padding: 60px; color: var(--pm-text-muted); }

.pm-empty i { font-size: 48px; color: var(--pm-accent); margin-bottom: 16px; display: block; }



/* Right Sidebar */

.pm-right-sidebar { width: 320px; padding: 24px; }

.pm-card { background: var(--pm-bg-secondary); border-radius: 12px; border: 1px solid var(--pm-border); padding: 20px; }

.pm-card h4 { font-size: 14px; font-weight: 600; margin: 0 0 16px; }

.pm-suggested { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }

.pm-suggested:last-child { margin-bottom: 0; }

.pm-suggested-avatar { width: 40px; height: 40px; background: linear-gradient(135deg, var(--pm-accent), #ff8f6b); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; color: white; }

.pm-suggested-info { flex: 1; }

.pm-suggested-name { display: block; font-weight: 500; font-size: 14px; }

.pm-suggested-type { font-size: 12px; color: var(--pm-text-muted); }



@media (max-width: 1200px) { .pm-right-sidebar { display: none; } }

@media (max-width: 900px) { .pm-sidebar { display: none; } .pm-content { max-width: 100%; } }