:root{--color-bg-primary:#ffffff;--color-bg-secondary:#f8f9fa;--color-bg-dark:#1a1a1a;--color-text-primary:#1a1a1a;--color-text-secondary:#666666;--color-text-light:#999999;--color-text-inverse:#ffffff;--color-brand:#ff6b6b;--color-brand-hover:#ff5252;--color-border:#e0e0e0;--color-shadow:rgba(0,0,0,0.1);--font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;--border-radius:12px;--border-radius-sm:8px;--spacing-xs:8px;--spacing-sm:12px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;}*{margin:0;padding:0;box-sizing:border-box;}body{font-family:var(--font-family);color:var(--color-text-primary);background-color:var(--color-bg-secondary);line-height:1.6;font-size:16px;}a{color:var(--color-text-primary);text-decoration:none;transition:color 0.3s ease;}a:hover{color:var(--color-brand);}.site-header{background-color:var(--color-bg-dark);color:var(--color-text-inverse);padding:var(--spacing-md) 0;position:sticky;top:0;z-index:1000;box-shadow:0 2px 8px var(--color-shadow);}.header-container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md);display:flex;justify-content:space-between;align-items:center;}.site-logo{font-size:24px;font-weight:700;color:var(--color-text-inverse);display:flex;align-items:center;gap:var(--spacing-xs);}.site-logo:hover{color:var(--color-brand);}.site-nav ul{display:flex;list-style:none;gap:var(--spacing-lg);flex-wrap:nowrap;}.site-nav a{color:var(--color-text-inverse);font-size:15px;font-weight:500;white-space:nowrap;transition:color 0.3s ease;}.site-nav a:hover{color:var(--color-brand);}.breadcrumb{max-width:1200px;margin:var(--spacing-md) auto;padding:0 var(--spacing-md);display:flex;align-items:center;gap:var(--spacing-xs);font-size:14px;color:var(--color-text-secondary);}.breadcrumb a{color:var(--color-text-secondary);}.breadcrumb a:hover{color:var(--color-brand);}.breadcrumb-separator{color:var(--color-text-light);}.container{max-width:1200px;margin:0 auto;padding:var(--spacing-lg) var(--spacing-md);}.section{margin-bottom:var(--spacing-xl);}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-sm);border-bottom:2px solid var(--color-brand);}.section-title{font-size:24px;font-weight:700;color:var(--color-text-primary);}.section-more{font-size:14px;color:var(--color-brand);font-weight:500;}.section-more:hover{color:var(--color-brand-hover);}.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-lg);}.video-card{background-color:var(--color-bg-primary);border-radius:var(--border-radius);overflow:hidden;box-shadow:0 2px 8px var(--color-shadow);transition:transform 0.3s ease,box-shadow 0.3s ease;display:flex;flex-direction:column;}.video-card:hover{transform:translateY(-4px);box-shadow:0 4px 16px rgba(0,0,0,0.15);}.video-thumbnail{width:100%;height:180px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);display:flex;align-items:center;justify-content:center;color:var(--color-text-inverse);font-size:14px;font-weight:600;text-align:center;padding:var(--spacing-md);position:relative;overflow:hidden;}.video-thumbnail::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.2);}.video-thumbnail span{position:relative;z-index:1;}.video-info{padding:var(--spacing-md);flex:1;display:flex;flex-direction:column;}.video-title{font-size:16px;font-weight:600;color:var(--color-text-primary);margin-bottom:var(--spacing-xs);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}.video-meta{display:flex;gap:var(--spacing-sm);font-size:13px;color:var(--color-text-secondary);margin-bottom:var(--spacing-xs);flex-wrap:wrap;}.video-meta span{display:inline-block;}.video-desc{font-size:14px;color:var(--color-text-secondary);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:auto;}.detail-container{max-width:1000px;margin:0 auto;padding:var(--spacing-lg) var(--spacing-md);}.detail-header{background-color:var(--color-bg-primary);border-radius:var(--border-radius);padding:var(--spacing-xl);margin-bottom:var(--spacing-xl);box-shadow:0 2px 8px var(--color-shadow);}.detail-title{font-size:32px;font-weight:700;color:var(--color-text-primary);margin-bottom:var(--spacing-md);line-height:1.3;}.detail-meta{display:flex;gap:var(--spacing-lg);font-size:14px;color:var(--color-text-secondary);margin-bottom:var(--spacing-md);flex-wrap:wrap;}.detail-meta-item{display:flex;gap:var(--spacing-xs);}.detail-meta-label{font-weight:600;color:var(--color-text-primary);}.detail-tags{display:flex;gap:var(--spacing-xs);flex-wrap:wrap;margin-bottom:var(--spacing-lg);}.tag{display:inline-block;padding:4px 12px;background-color:var(--color-bg-secondary);border-radius:16px;font-size:13px;color:var(--color-text-secondary);font-weight:500;}.detail-oneline{font-size:18px;color:var(--color-text-primary);font-weight:600;line-height:1.6;padding:var(--spacing-md);background-color:var(--color-bg-secondary);border-radius:var(--border-radius-sm);border-left:4px solid var(--color-brand);margin-bottom:var(--spacing-lg);}.detail-section{background-color:var(--color-bg-primary);border-radius:var(--border-radius);padding:var(--spacing-xl);margin-bottom:var(--spacing-lg);box-shadow:0 2px 8px var(--color-shadow);}.detail-section-title{font-size:20px;font-weight:700;color:var(--color-text-primary);margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:2px solid var(--color-border);}.detail-text{font-size:16px;color:var(--color-text-primary);line-height:1.8;margin-bottom:var(--spacing-md);}.detail-text.expandable{max-height:150px;overflow:hidden;position:relative;}.detail-text.expandable.expanded{max-height:none;}.expand-toggle{display:inline-block;margin-top:var(--spacing-sm);color:var(--color-brand);cursor:pointer;font-size:14px;font-weight:600;user-select:none;}.expand-toggle:hover{color:var(--color-brand-hover);}.related-videos{margin-top:var(--spacing-xl);}.site-footer{background-color:var(--color-bg-dark);color:var(--color-text-inverse);padding:var(--spacing-xl) 0;margin-top:var(--spacing-xl);}.footer-container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md);text-align:center;}.footer-nav{margin-bottom:var(--spacing-md);}.footer-nav ul{display:flex;justify-content:center;gap:var(--spacing-lg);list-style:none;flex-wrap:wrap;}.footer-nav a{color:var(--color-text-inverse);font-size:14px;}.footer-nav a:hover{color:var(--color-brand);}.footer-text{font-size:14px;color:var(--color-text-light);line-height:1.8;}.back-to-top{position:fixed;bottom:40px;right:40px;width:48px;height:48px;background-color:var(--color-brand);color:var(--color-text-inverse);border:none;border-radius:50%;cursor:pointer;display:none;align-items:center;justify-content:center;font-size:20px;box-shadow:0 4px 12px var(--color-shadow);transition:background-color 0.3s ease,transform 0.3s ease;z-index:999;}.back-to-top.visible{display:flex;}.back-to-top:hover{background-color:var(--color-brand-hover);transform:translateY(-2px);}.error-page{text-align:center;padding:var(--spacing-xl) var(--spacing-md);min-height:60vh;display:flex;flex-direction:column;justify-content:center;align-items:center;}.error-code{font-size:120px;font-weight:700;color:var(--color-brand);line-height:1;margin-bottom:var(--spacing-md);}.error-message{font-size:24px;color:var(--color-text-primary);margin-bottom:var(--spacing-lg);}.error-desc{font-size:16px;color:var(--color-text-secondary);margin-bottom:var(--spacing-xl);}.btn-primary{display:inline-block;padding:12px 32px;background-color:var(--color-brand);color:var(--color-text-inverse);font-size:16px;font-weight:600;border-radius:var(--border-radius-sm);transition:background-color 0.3s ease,transform 0.3s ease;}.btn-primary:hover{background-color:var(--color-brand-hover);transform:translateY(-2px);color:var(--color-text-inverse);}@media (max-width:768px){.header-container{flex-direction:column;gap:var(--spacing-md);}.site-nav ul{width:100%;justify-content:space-between;gap:4px;flex-wrap:nowrap;overflow:hidden;}.site-nav a{font-size:13px;padding:4px 6px;white-space:nowrap;}.video-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--spacing-md);}.video-thumbnail{height:140px;font-size:12px;}.video-title{font-size:14px;}.video-meta{font-size:12px;}.video-desc{font-size:13px;}.detail-title{font-size:24px;}.detail-header{padding:var(--spacing-lg);}.detail-section{padding:var(--spacing-lg);}.section-title{font-size:20px;}.back-to-top{bottom:20px;right:20px;width:40px;height:40px;font-size:18px;}.error-code{font-size:80px;}.error-message{font-size:20px;}}@media (max-width:480px){.video-grid{grid-template-columns:1fr;}.detail-meta{flex-direction:column;gap:var(--spacing-xs);}}