:root{--primary-color:#1a2332;--secondary-color:#2c3e50;--accent-blue:#3498db;--accent-yellow:#f39c12;--text-light:#ecf0f1;--text-dark:#2c3e50;--bg-light:#f8f9fa;--bg-dark:#1a2332;--border-color:#34495e;--card-bg:#fff;--hover-bg:#ecf0f1}body{background:var(--bg-light);color:var(--text-dark);font-size:16px}.container{max-width:1200px;margin:0 auto;padding:1.5rem}nav{background:var(--primary-color);box-shadow:0 2px 8px rgba(0,0,0,0.1);position:sticky;top:0;z-index:100}nav .container{padding:0 1rem}nav ul{margin:0;padding:0;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:0}nav li{list-style:none;flex:1 1 0;min-width:0;text-align:center}nav a{display:block;color:var(--text-light);padding:1rem 0.5rem;font-weight:500;transition:background 0.2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nav a:hover,nav a[aria-current="page"]{background:var(--secondary-color);text-decoration:none}.breadcrumb{font-size:0.875rem;color:#666;padding:0.75rem 0;margin-bottom:1rem;border-bottom:1px solid #e0e0e0}.breadcrumb a{color:var(--accent-blue);margin:0 0.25rem}.breadcrumb span{color:#333;font-weight:500}.hero{text-align:center;padding:3rem 0 2rem;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:var(--text-light);border-radius:8px;margin-bottom:3rem}.hero h1{font-size:2rem;margin-bottom:1rem;line-height:1.3}.hero .intro{font-size:1.125rem;max-width:800px;margin:0 auto;line-height:1.8;opacity:0.95}section{margin-bottom:3rem}section h2{font-size:1.75rem;margin-bottom:0.5rem;color:var(--primary-color);border-left:4px solid var(--accent-blue);padding-left:1rem}.section-desc,.page-intro{color:#666;margin-bottom:1.5rem;font-size:1rem;line-height:1.7}.notice{background:#fff3cd;border-left:4px solid var(--accent-yellow);padding:1rem;margin:1rem 0;border-radius:4px;font-size:0.95rem;line-height:1.6}.notice a{color:var(--accent-blue);font-weight:500}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-top:1.5rem}.card{background:var(--card-bg);border-radius:8px;padding:1.5rem;box-shadow:0 2px 8px rgba(0,0,0,0.08);transition:transform 0.2s,box-shadow 0.2s}.card:hover{transform:translateY(-4px);box-shadow:0 4px 16px rgba(0,0,0,0.12)}.card h3{font-size:1.25rem;margin-bottom:0.75rem;color:var(--primary-color)}.card h3 a{color:inherit}.card h3 a:hover{color:var(--accent-blue)}.card .meta{font-size:0.875rem;color:#999;margin-bottom:0.75rem}.card .one-line{color:#555;line-height:1.6;margin-bottom:0.5rem}.card .summary{font-size:0.9rem;color:#666;line-height:1.7;margin-top:0.75rem}.channel-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;margin-top:1.5rem}.channel-card{background:var(--card-bg);border:2px solid var(--border-color);border-radius:8px;padding:2rem 1.5rem;text-align:center;transition:all 0.2s;display:block}.channel-card:hover{border-color:var(--accent-blue);background:var(--hover-bg);transform:translateY(-2px);text-decoration:none}.channel-card h3{font-size:1.5rem;color:var(--primary-color);margin-bottom:0.5rem}.channel-card p{color:#666;font-size:0.95rem}.card-list{display:flex;flex-direction:column;gap:1.5rem;margin-top:1.5rem}.card-item{background:var(--card-bg);border-radius:8px;padding:1.5rem;box-shadow:0 2px 8px rgba(0,0,0,0.08);position:relative;transition:box-shadow 0.2s}.card-item:hover{box-shadow:0 4px 16px rgba(0,0,0,0.12)}.card-item .rank{position:absolute;top:1rem;right:1rem;background:var(--accent-yellow);color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:1.125rem}.card-item h2{font-size:1.5rem;margin-bottom:0.75rem;color:var(--primary-color);border:none;padding:0}.card-item h2 a{color:inherit}.card-item h2 a:hover{color:var(--accent-blue)}.card-item .meta{font-size:0.875rem;color:#999;margin-bottom:0.5rem}.card-item .genre{font-size:0.9rem;color:#666;margin-bottom:0.75rem}.card-item .one-line{color:#555;line-height:1.7;margin-bottom:0.75rem}.tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.75rem}.tag{background:var(--hover-bg);color:#555;padding:0.25rem 0.75rem;border-radius:12px;font-size:0.875rem;border:1px solid #ddd}.detail{background:var(--card-bg);border-radius:8px;padding:2.5rem;box-shadow:0 2px 8px rgba(0,0,0,0.08)}.detail-header h1{font-size:2.25rem;color:var(--primary-color);margin-bottom:1rem;line-height:1.3}.detail-meta{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem;font-size:0.95rem;color:#666}.detail-meta span{background:var(--hover-bg);padding:0.375rem 0.875rem;border-radius:4px;border:1px solid #ddd}.detail section{margin-bottom:2rem;padding-top:1.5rem;border-top:1px solid #e0e0e0}.detail section:first-of-type{border-top:none;padding-top:0}.detail section h2{font-size:1.5rem;margin-bottom:1rem;color:var(--secondary-color)}.one-line-highlight{font-size:1.125rem;color:#333;line-height:1.8;font-weight:500;padding:1rem;background:#f0f8ff;border-left:4px solid var(--accent-blue);border-radius:4px}.summary,.review{font-size:1rem;color:#444;line-height:1.9}.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem;margin-top:1rem}.related-card{background:var(--bg-light);border-radius:6px;padding:1.25rem;border:1px solid #e0e0e0;transition:border-color 0.2s,background 0.2s}.related-card:hover{border-color:var(--accent-blue);background:#fff}.related-card h3{font-size:1.125rem;margin-bottom:0.5rem;color:var(--primary-color)}.related-card h3 a{color:inherit}.related-card h3 a:hover{color:var(--accent-blue)}.related-card .meta{font-size:0.875rem;color:#999;margin-bottom:0.5rem}.related-card .desc{font-size:0.9rem;color:#666;line-height:1.6}.detail-invalid{text-align:center;padding:4rem 2rem;background:var(--card-bg);border-radius:8px}.detail-invalid h1{font-size:2rem;color:var(--primary-color);margin-bottom:1.5rem}.detail-invalid p{font-size:1.125rem;color:#666;margin-bottom:1rem}.detail-invalid .actions{margin-top:2rem;display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}.btn{display:inline-block;background:var(--accent-blue);color:#fff;padding:0.75rem 2rem;border-radius:6px;font-weight:500;transition:background 0.2s}.btn:hover{background:var(--secondary-color);text-decoration:none}.error-page{text-align:center;padding:4rem 2rem}.error-page h1{font-size:2.5rem;color:var(--primary-color);margin-bottom:1rem}.error-page p{font-size:1.125rem;color:#666;margin-bottom:1rem}@media (max-width:768px){nav ul{flex-wrap:nowrap;justify-content:space-between;gap:0}nav li{flex:1 1 0;min-width:0}nav a{padding:0.875rem 0.25rem;font-size:0.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero h1{font-size:1.5rem}.hero .intro{font-size:1rem}section h2{font-size:1.5rem}.card-grid{grid-template-columns:1fr;gap:1rem}.channel-links{grid-template-columns:1fr}.detail{padding:1.5rem}.detail-header h1{font-size:1.75rem}.related-grid{grid-template-columns:1fr}}@media (min-width:769px) and (max-width:1024px){.card-grid{grid-template-columns:repeat(2,1fr)}.channel-links{grid-template-columns:repeat(2,1fr)}.related-grid{grid-template-columns:repeat(2,1fr)}}