* {margin:0;padding:0;box-sizing:border-box;} body.ui-style-7 {font-family:-apple-system,sans-serif;line-height:1.6;color:#333;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;} .container {max-width:1200px;margin:0 auto;padding:0 20px;} header {background:rgba(255,255,255,0.95);box-shadow:0 2px 10px rgba(0,0,0,0.1);position:sticky;top:0;z-index:1000;} .header-content {display:flex;justify-content:space-between;align-items:center;padding:15px 0;} .logo {font-size:24px;font-weight:bold;color:#667eea;text-decoration:none;} nav ul {display:flex;list-style:none;gap:25px;flex-wrap:nowrap;align-items:center;} nav a {text-decoration:none;color:#555;font-weight:500;transition:color 0.3s;white-space:nowrap;} nav a:hover {color:#667eea;} main {background:white;margin:30px auto;padding:40px;border-radius:10px;box-shadow:0 5px 20px rgba(0,0,0,0.15);} h1 {color:#333;margin-bottom:20px;font-size:32px;} h2 {color:#444;margin:30px 0 20px;font-size:24px;border-left:4px solid #667eea;padding-left:15px;} h3 {color:#555;margin:20px 0 15px;font-size:20px;} .intro-section {background:#f8f9fa;padding:30px;border-radius:8px;margin:30px 0;line-height:1.8;} .video-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:25px;margin:30px 0;} .video-card {background:white;border:1px solid #e0e0e0;border-radius:8px;padding:20px;transition:all 0.3s;box-shadow:0 2px 5px rgba(0,0,0,0.05);} .video-card:hover {transform:translateY(-5px);box-shadow:0 5px 15px rgba(0,0,0,0.15);} .video-title {font-size:18px;font-weight:bold;margin-bottom:10px;color:#333;} .video-meta {font-size:14px;color:#666;margin:5px 0;} .video-desc {font-size:14px;color:#777;margin:10px 0;line-height:1.6;} .video-link {display:inline-block;margin-top:10px;padding:8px 16px;background:#667eea;color:white;text-decoration:none;border-radius:5px;transition:background 0.3s;} .video-link:hover {background:#764ba2;} .video-list {list-style:none;} .video-list li {padding:20px;border-bottom:1px solid #e0e0e0;transition:background 0.3s;} .video-list li:hover {background:#f8f9fa;} .video-list .rank {display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;background:#667eea;color:white;border-radius:50%;margin-right:15px;font-weight:bold;} .video-detail {line-height:1.8;} .detail-info {background:#f8f9fa;padding:20px;border-radius:8px;margin:20px 0;} .detail-info .info-row {margin:10px 0;display:flex;flex-wrap:wrap;} .detail-info .label {font-weight:bold;color:#555;min-width:80px;} .detail-info .value {color:#666;flex:1;} .tags {display:flex;flex-wrap:wrap;gap:8px;margin:15px 0;} .tag {background:#e7e7ff;color:#667eea;padding:5px 12px;border-radius:15px;font-size:13px;} .related-section {margin-top:40px;padding-top:40px;border-top:2px solid #e0e0e0;} footer {text-align:center;padding:30px;color:white;font-size:14px;} @media (max-width:768px) {nav ul {gap:10px;} nav a {font-size:13px;padding:5px;} .header-content {flex-direction:column;gap:15px;} main {padding:20px;margin:20px 10px;} h1 {font-size:24px;} .video-grid {grid-template-columns:1fr;gap:15px;} .logo {font-size:20px;}}