/* ============================================

   Classic Video Skin - YouTube Style

   Light/Dark theme aware

   ============================================ */



/* Theme Variables */

.yt-app {

    --yt-bg: var(--bg-primary, #0f0f0f);

    --yt-bg-secondary: var(--bg-secondary, #0f0f0f);

    --yt-bg-tertiary: var(--bg-tertiary, #272727);

    --yt-bg-hover: var(--bg-hover, #3a3a3a);

    --yt-text: var(--text-primary, #f1f1f1);

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

    --yt-text-muted: var(--text-muted, #717171);

    --yt-border: var(--border-color, #303030);

    --yt-accent: #ff0000;

}



.yt-app {

    display: flex;

    flex-direction: column;

    min-height: 100vh;

    background: var(--yt-bg);

    color: var(--yt-text);

}



/* Header */

.yt-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 56px;

    padding: 0 16px;

    background: var(--yt-bg-secondary);

    position: sticky;

    top: 0;

    z-index: 100;

    border-bottom: 1px solid var(--yt-border);

}



.yt-header-left {

    display: flex;

    align-items: center;

    gap: 16px;

}



.yt-menu-btn {

    background: none;

    border: none;

    color: var(--yt-text);

    font-size: 20px;

    cursor: pointer;

    padding: 8px;

    border-radius: 50%;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.yt-menu-btn:hover {

    background: var(--yt-bg-tertiary);

}



.yt-logo {

    display: flex;

    align-items: center;

    gap: 6px;

    text-decoration: none;

    color: var(--yt-text);

    font-size: 18px;

    font-weight: 600;

}



.yt-logo-icon {

    width: 32px;

    height: 22px;

    background: var(--yt-accent);

    border-radius: 6px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    color: white;

}



.yt-header-center {

    flex: 1;

    max-width: 640px;

    margin: 0 40px;

}



.yt-search-form {

    display: flex;

}



.yt-search-input {

    flex: 1;

    padding: 10px 16px;

    background: var(--yt-bg);

    border: 1px solid var(--yt-border);

    border-right: none;

    border-radius: 20px 0 0 20px;

    color: var(--yt-text);

    font-size: 16px;

    outline: none;

}



.yt-search-input:focus {

    border-color: #3ea6ff;

}



.yt-search-input::placeholder {

    color: var(--yt-text-muted);

}



.yt-search-btn {

    padding: 0 24px;

    background: var(--yt-bg-tertiary);

    border: 1px solid var(--yt-border);

    border-radius: 0 20px 20px 0;

    color: var(--yt-text);

    cursor: pointer;

}



.yt-search-btn:hover {

    background: var(--yt-bg-hover);

}



.yt-header-right {

    display: flex;

    align-items: center;

    gap: 12px;

}



/* Skin Switcher */

.yt-skin-switcher {

    position: relative;

}



.yt-skin-btn {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 8px 12px;

    background: var(--yt-bg-tertiary);

    border: none;

    border-radius: 20px;

    color: var(--yt-text);

    cursor: pointer;

    font-size: 13px;

}



.yt-skin-btn:hover {

    background: var(--yt-bg-hover);

}



.yt-skin-dot {

    width: 10px;

    height: 10px;

    border-radius: 50%;

}



.yt-skin-dropdown {

    position: absolute;

    top: 100%;

    right: 0;

    margin-top: 8px;

    min-width: 180px;

    background: var(--yt-bg-secondary);

    border: 1px solid var(--yt-border);

    border-radius: 12px;

    display: none;

    z-index: 200;

    overflow: hidden;

    box-shadow: 0 4px 16px rgba(0,0,0,0.4);

}



.yt-skin-switcher.active .yt-skin-dropdown {

    display: block;

}



.yt-skin-option {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 14px;

    color: var(--yt-text);

    text-decoration: none;

    font-size: 14px;

}



.yt-skin-option:hover {

    background: var(--yt-bg-tertiary);

}



.yt-skin-option.active {

    background: var(--yt-bg-tertiary);

}



.yt-skin-option .fa-check {

    margin-left: auto;

    font-size: 12px;

    color: var(--yt-text-muted);

}



.yt-create-btn {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 16px;

    background: var(--yt-bg-tertiary);

    border-radius: 20px;

    color: var(--yt-text);

    text-decoration: none;

    font-size: 14px;

    font-weight: 500;

}



.yt-create-btn:hover {

    background: var(--yt-bg-hover);

}



/* Body Layout */

.yt-body {

    display: flex;

    flex: 1;

}



/* Sidebar */

.yt-sidebar {

    width: 240px;

    padding: 12px 0;

    background: var(--yt-bg);

    overflow-y: auto;

    display: flex;

    flex-direction: column;

    height: calc(100vh - 56px);

    position: sticky;

    top: 56px;

}



.yt-sidebar.collapsed {

    width: 72px;

}



.yt-sidebar.collapsed .yt-nav-item span,

.yt-sidebar.collapsed .yt-sidebar-footer {

    display: none;

}



.yt-nav {

    display: flex;

    flex-direction: column;

    gap: 2px;

    padding: 0 12px;

}



.yt-nav-item {

    display: flex;

    align-items: center;

    gap: 24px;

    padding: 10px 12px;

    color: var(--yt-text);

    text-decoration: none;

    border-radius: 10px;

    font-size: 14px;

}



.yt-nav-item:hover {

    background: var(--yt-bg-tertiary);

}



.yt-nav-item.active {

    background: var(--yt-bg-tertiary);

    font-weight: 500;

}



.yt-nav-item i {

    width: 24px;

    font-size: 18px;

    text-align: center;

}



.yt-nav-divider {

    height: 1px;

    background: var(--yt-border);

    margin: 12px;

}



/* Sidebar Footer */

.yt-sidebar-footer {

    margin-top: auto;

    padding: 16px;

    border-top: 1px solid var(--yt-border);

}



.yt-footer-links {

    display: flex;

    flex-wrap: wrap;

    gap: 6px 12px;

    margin-bottom: 12px;

}



.yt-footer-links a {

    color: var(--yt-text-muted);

    font-size: 12px;

    text-decoration: none;

}



.yt-footer-links a:hover {

    color: var(--yt-text);

}



.yt-footer-tagline {

    font-size: 12px;

    color: var(--yt-accent);

    display: flex;

    align-items: center;

    gap: 6px;

}



/* Main Content */

.yt-main {

    flex: 1;

    padding: 24px;

    overflow-y: auto;

}



/* Feed View */

.yt-chips {

    display: flex;

    gap: 12px;

    margin-bottom: 24px;

    flex-wrap: wrap;

}



.yt-chip {

    padding: 8px 16px;

    background: var(--yt-bg-tertiary);

    border-radius: 8px;

    color: var(--yt-text);

    text-decoration: none;

    font-size: 14px;

}



.yt-chip:hover {

    background: var(--yt-bg-hover);

}



.yt-chip.active {

    background: var(--yt-text);

    color: var(--yt-bg);

}



.yt-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: 16px;

}



.yt-card {

    text-decoration: none;

    color: var(--yt-text);

}



.yt-card-thumb {

    position: relative;

    border-radius: 12px;

    overflow: hidden;

    margin-bottom: 12px;

}



.yt-card-thumb img {

    width: 100%;

    aspect-ratio: 16/9;

    object-fit: cover;

    display: block;

}



.yt-thumb-placeholder {

    width: 100%;

    aspect-ratio: 16/9;

    background: var(--yt-bg-tertiary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 32px;

    color: var(--yt-text-muted);

}



.yt-duration {

    position: absolute;

    bottom: 8px;

    right: 8px;

    padding: 3px 6px;

    background: rgba(0,0,0,0.8);

    border-radius: 4px;

    font-size: 12px;

    font-weight: 500;

    color: white;

}



.yt-card-info {

    display: flex;

    gap: 12px;

}



.yt-avatar {

    width: 36px;

    height: 36px;

    background: var(--yt-bg-tertiary);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 600;

    font-size: 14px;

    flex-shrink: 0;

    color: var(--yt-text);

}



.yt-card-meta {

    flex: 1;

}



.yt-card-meta h3 {

    font-size: 14px;

    font-weight: 500;

    margin: 0 0 4px;

    line-height: 1.4;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.yt-card-channel {

    display: block;

    font-size: 12px;

    color: var(--yt-text-secondary);

    margin-bottom: 2px;

}



.yt-card-stats {

    font-size: 12px;

    color: var(--yt-text-secondary);

}



.yt-empty {

    grid-column: 1 / -1;

    text-align: center;

    padding: 60px 20px;

    color: var(--yt-text-muted);

}



.yt-empty i {

    font-size: 48px;

    margin-bottom: 16px;

    display: block;

}



.yt-empty h3 {

    margin: 0 0 8px;

    color: var(--yt-text);

}



/* Watch View */

.yt-watch {

    display: flex;

    gap: 24px;

}



.yt-watch-primary {

    flex: 1;

    max-width: 900px;

}



.yt-video {

    width: 100%;

    aspect-ratio: 16/9;

    background: #000;

    border-radius: 12px;

}



.yt-video-info {

    padding: 16px 0;

}



.yt-video-info h1 {

    font-size: 20px;

    font-weight: 600;

    margin: 0 0 8px;

}



.yt-video-meta {

    font-size: 14px;

    color: var(--yt-text-secondary);

    margin-bottom: 16px;

    display: flex;

    gap: 8px;

}



.yt-video-actions {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

}



.yt-action {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 16px;

    background: var(--yt-bg-tertiary);

    border: none;

    border-radius: 20px;

    color: var(--yt-text);

    cursor: pointer;

    font-size: 14px;

}



.yt-action:hover {

    background: var(--yt-bg-hover);

}



.yt-action.active {

    background: rgba(255,255,255,0.2);

}



.yt-channel-bar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px 0;

    border-bottom: 1px solid var(--yt-border);

}



.yt-channel {

    display: flex;

    align-items: center;

    gap: 12px;

}



.yt-channel-name {

    font-weight: 500;

}



.yt-subscribe-btn {

    padding: 10px 20px;

    background: var(--yt-accent);

    border: none;

    border-radius: 20px;

    color: white;

    font-weight: 500;

    cursor: pointer;

}



.yt-subscribe-btn:hover {

    background: #cc0000;

}



.yt-description {

    padding: 16px 0;

    font-size: 14px;

    line-height: 1.6;

    color: var(--yt-text-secondary);

}



/* Related Videos */

.yt-related {

    width: 400px;

    flex-shrink: 0;

}



.yt-related h3 {

    font-size: 16px;

    margin: 0 0 16px;

}



.yt-related-item {

    display: flex;

    gap: 8px;

    text-decoration: none;

    color: var(--yt-text);

    margin-bottom: 12px;

}



.yt-related-thumb {

    width: 168px;

    flex-shrink: 0;

    border-radius: 8px;

    overflow: hidden;

}



.yt-related-thumb img {

    width: 100%;

    aspect-ratio: 16/9;

    object-fit: cover;

}



.yt-related-info {

    flex: 1;

}



.yt-related-info h4 {

    font-size: 14px;

    font-weight: 500;

    margin: 0 0 4px;

    line-height: 1.3;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.yt-related-info span {

    display: block;

    font-size: 12px;

    color: var(--yt-text-secondary);

}



/* Responsive */

@media (max-width: 1200px) {

    .yt-related { width: 300px; }

}



@media (max-width: 900px) {

    .yt-watch { flex-direction: column; }

    .yt-related { width: 100%; }

    .yt-sidebar { display: none; }

    .yt-header-center { margin: 0 16px; }

}



@media (max-width: 600px) {

    .yt-header-center { display: none; }

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

}




/* ============================================

   Light Mode Overrides

   ============================================ */



[data-theme="light"] .yt-app,

.light-mode .yt-app,

body.light .yt-app {

    --yt-bg: #ffffff;

    --yt-bg-secondary: #ffffff;

    --yt-bg-tertiary: #f2f2f2;

    --yt-bg-hover: #e5e5e5;

    --yt-text: #0f0f0f;

    --yt-text-secondary: #606060;

    --yt-text-muted: #909090;

    --yt-border: #e5e5e5;

}



[data-theme="light"] .yt-chip.active,

.light-mode .yt-chip.active,

body.light .yt-chip.active {

    background: #0f0f0f;

    color: #ffffff;

}



[data-theme="light"] .yt-duration,

.light-mode .yt-duration,

body.light .yt-duration {

    background: rgba(0,0,0,0.8);

    color: white;

}



[data-theme="light"] .yt-action.active,

.light-mode .yt-action.active,

body.light .yt-action.active {

    background: rgba(0,0,0,0.1);

}



[data-theme="light"] .yt-subscribe-btn,

.light-mode .yt-subscribe-btn,

body.light .yt-subscribe-btn {

    background: #cc0000;

    color: white;

}



[data-theme="light"] .yt-logo-icon,

.light-mode .yt-logo-icon,

body.light .yt-logo-icon {

    color: white;

}



[data-theme="light"] .yt-search-input:focus,

.light-mode .yt-search-input:focus,

body.light .yt-search-input:focus {

    border-color: #1a73e8;

}