* {box-sizing:border-box;margin:0;padding:0;}
body {font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;background-color:#121212;color:#f0f0f0;line-height:1.5;}
a {color:#4da3ff;text-decoration:none;}
a:hover {text-decoration:underline;}
header {background-color:#1f1f1f;padding:12px 16px;box-shadow:0 2px 6px rgba(0,0,0,0.3);}
.header-container {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;}
.logo {font-size:1.5rem;font-weight:bold;color:#4da3ff;text-decoration:none;white-space:nowrap;}
.search-bar {display:flex;flex:1;min-width:200px;max-width:360px;width:100%;}
.search-bar input[type="text"] {flex:1;padding:8px 14px;border:1px solid #555;border-radius:20px 0 0 20px;background-color:#2a2a2a;color:#fff;font-size:0.95rem;}
.search-bar button {padding:8px 14px;border:1px solid #4da3ff;border-left:none;border-radius:0 20px 20px 0;background-color:#4da3ff;color:#fff;font-size:0.95rem;cursor:pointer;transition:background-color 0.2s;}
.search-bar button:hover {background-color:#3a8be0;}
@media (max-width:600px) {.header-container {flex-direction:column;align-items:stretch;}
.search-bar {width:100%;}
.logo {font-size:1.3rem;text-align:center;width:100%;}
;}
main {display:flex;flex-direction:column;gap:20px;padding:10px 0 20px;}
.section-title {max-width:500px;margin:0 auto 15px;padding-left:15px;display:flex;align-items:center;gap:8px;}
.video-list {display:flex;flex-direction:column;align-items:center;gap:20px;}
.video-item {width:96%;max-width:500px;background-color:#1e1e1e;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.6);overflow:hidden;transition:transform 0.3s ease;}
.video-item:hover {transform:translateY(-3px);}
.video-item video {width:100%;height:66vh;object-fit:cover;background-color:#000;}
.video-item h4 {padding:10px 12px;font-size:1rem;color:#fff;display:flex;align-items:center;gap:8px;}
.intro-box {background-color:#1e1e1e;padding:20px;border-radius:10px;font-size:0.95rem;box-shadow:0 2px 6px rgba(0,0,0,0.3);text-align:center;margin:0 12px;max-width:500px;margin-left:auto;margin-right:auto;}
.loading,.end-message {text-align:center;padding:20px;color:#aaa;}
.end-message {font-style:italic;}
footer {text-align:center;padding:16px;background-color:#1f1f1f;font-size:0.9rem;color:#aaa;border-top:1px solid #333;}
footer a {color:#4da3ff;margin:0 8px;text-decoration:none;}
footer a:hover {text-decoration:underline;}

[v-cloak] { display: none !important; }