/* Short Form Skin - TikTok Style */

.sf-app {

    --sf-bg: var(--bg-primary, #000);

    --sf-bg-secondary: var(--bg-secondary, #121212);

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

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

    --sf-text-secondary: var(--text-secondary, #aaa);

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

    --sf-border: var(--border-color, #2f2f2f);

    --sf-accent: #fe2c55;

}

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

    --sf-bg: #ffffff; --sf-bg-secondary: #f8f8f8; --sf-bg-tertiary: #eee; --sf-text: #161823; --sf-text-secondary: #545454; --sf-text-muted: #8a8a8a; --sf-border: #e3e3e3;

}

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



/* Sidebar */

.sf-sidebar { width: 240px; padding: 20px 12px; display: flex; flex-direction: column; border-right: 1px solid var(--sf-border); position: fixed; top: 0; left: 0; height: 100vh; background: var(--sf-bg); z-index: 100; }

.sf-logo { font-size: 28px; color: var(--sf-accent); margin-bottom: 24px; text-decoration: none; display: block; padding: 0 12px; }

.sf-nav { display: flex; flex-direction: column; gap: 4px; }

.sf-nav-item { display: flex; align-items: center; gap: 16px; padding: 12px; color: var(--sf-text); text-decoration: none; border-radius: 8px; font-size: 16px; font-weight: 600; }

.sf-nav-item:hover { background: var(--sf-bg-tertiary); }

.sf-nav-item.active { color: var(--sf-accent); }

.sf-nav-item i { width: 24px; font-size: 20px; text-align: center; }

.sf-upload-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: var(--sf-accent); border-radius: 8px; color: white; text-decoration: none; font-weight: 600; margin-top: 16px; }



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

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

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

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



/* Skin Switcher */

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

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

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

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

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

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

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

.sf-skin-option.active { background: var(--sf-bg-tertiary); }

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



/* Main */

.sf-main { flex: 1; margin-left: 240px; display: flex; align-items: center; justify-content: center; min-height: 100vh; }



/* Video Container */

.sf-video-container { position: relative; width: 400px; max-width: 100%; height: 90vh; max-height: 800px; background: #000; border-radius: 12px; overflow: hidden; }

.sf-video { width: 100%; height: 100%; object-fit: cover; }



.sf-video-info { position: absolute; bottom: 80px; left: 16px; right: 80px; }

.sf-username { font-weight: 700; font-size: 16px; display: block; margin-bottom: 8px; }

.sf-caption { font-size: 14px; line-height: 1.4; margin: 0; }



/* Actions */

.sf-actions { position: absolute; right: 12px; bottom: 100px; display: flex; flex-direction: column; align-items: center; gap: 16px; }

.sf-action-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }

.sf-action-item button { width: 48px; height: 48px; background: var(--sf-bg-tertiary); border: none; border-radius: 50%; color: var(--sf-text); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }

.sf-action-item button:hover { background: var(--sf-bg-hover, #333); }

.sf-action-item span { font-size: 12px; color: var(--sf-text); }

.sf-avatar { width: 48px; height: 48px; background: var(--sf-bg-tertiary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; border: 2px solid var(--sf-text); position: relative; }

.sf-follow-plus { position: absolute; bottom: -6px; width: 20px; height: 20px; background: var(--sf-accent); border-radius: 50%; font-size: 14px; display: flex; align-items: center; justify-content: center; }

.sf-music-disc { width: 48px; height: 48px; background: var(--sf-bg-tertiary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; animation: spin 3s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }



/* Nav Arrows */

.sf-nav-arrows { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 16px; }

.sf-arrow { width: 40px; height: 40px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; font-size: 18px; }

.sf-arrow:hover { background: rgba(255,255,255,0.2); }



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

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



@media (max-width: 768px) {

    .sf-sidebar { width: 72px; padding: 20px 8px; }

    .sf-nav-item span, .sf-sidebar-footer, .sf-upload-btn span { display: none; }

    .sf-upload-btn { padding: 12px; }

    .sf-logo { padding: 0; text-align: center; }

    .sf-main { margin-left: 72px; }

}