*{box-sizing:border-box}
body{margin:0;background:#050914;color:#fff;font-family:Segoe UI,Arial}
.app{max-width:1400px;margin:auto;padding:20px}
header,#panel,.viewer,nav,.cards{background:#0b1424;border:1px solid #00d9ff55;border-radius:18px;padding:15px;margin-bottom:15px;box-shadow:0 0 20px #00d9ff22}
header{display:flex;justify-content:space-between}
button{background:#00cfff;color:#001018;border:0;border-radius:10px;padding:10px;cursor:pointer}
#panel{display:flex;gap:10px;flex-wrap:wrap}
input{background:#050914;color:white;border:1px solid #00cfff;border-radius:10px;padding:10px}
iframe{width:100%;height:500px;border-radius:15px;border:2px solid #00cfff;background:white}
nav{display:flex;gap:10px;overflow:auto}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:15px}
.card{padding:20px;background:#121e33;border-radius:15px;cursor:pointer}
.card:hover{box-shadow:0 0 20px #00cfff}
.hide{display:none}
@media(max-width:600px){iframe{height:320px}header{flex-direction:column}}