* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #1a1a1a; color: #eee; font-family: sans-serif; overflow: auto; min-height: 100vh; padding: 1rem; padding-bottom: 80px; }
.container { max-width: 900px; margin: 0 auto; }
.header { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1rem; }
h1 { font-size: 1.8rem; }
.about-btn { padding: 0 0.8rem; border: none; border-radius: 8px; cursor: pointer; font-size: 1rem; color: white; background: #0078d7; height: 2.2rem; line-height: 2.2rem; box-sizing: border-box; }
.about-btn:hover { background: #0098ff; }
#main { display: flex; align-items: center; justify-content: center; position: relative; min-height: 300px; }
#main img { max-width: 100%; max-height: 50vh; object-fit: contain; }
#filename { height: 50px; padding: 0 10px; text-align: center; background: #2d2d2d; font-size: 16px; color: #ccc; display: flex; align-items: center; justify-content: center; gap: 10px; }
#infobtn { padding: 5px 15px; background: #0078d7; color: white; border: none; border-radius: 4px; cursor: pointer; display: none; }
#infobtn:hover { background: #0098ff; }
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; }
.modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 800px; max-height: 85%; width: 90%; padding: 1.5rem; border-radius: 12px; background: #262626; color: #eee; }
.modal-scroll { overflow-y: auto; }
.modal-close { float: right; cursor: pointer; font-size: 1.5rem; line-height: 1; color: #eee; }
.modal-text { white-space: pre-wrap; margin-top: 1rem; color: #eee; line-height: 1.6; }
.nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: white; border: none; font-size: 30px; width: 50px; height: 50px; cursor: pointer; border-radius: 50%; }
.nav:hover { background: rgba(0,0,0,0.8); }
#prev { left: 20px; }
#next { right: 20px; }
#filmstrip { height: 100px; background: #2d2d2d; display: flex; align-items: center; overflow-x: auto; padding: 10px; gap: 10px; }
#filmstrip::-webkit-scrollbar { height: 8px; }
#filmstrip::-webkit-scrollbar-track { background: #1a1a1a; }
#filmstrip::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
.thumb { height: 80px; width: 80px; object-fit: cover; cursor: pointer; opacity: 0.6; border: 2px solid transparent; transition: all 0.2s; }
.thumb:hover { opacity: 0.9; }
.thumb.active { opacity: 1; border-color: #0078d7; }
@media (max-width: 600px) {
    h1 { font-size: 1.5rem; }
    #main { min-height: 200px; }
    #main img { max-height: 40vh; }
    #filmstrip { height: 80px; }
    .thumb { height: 60px; width: 60px; }
    body { padding-bottom: 100px; }
    .modal-content { padding: 1rem; width: 100%; max-width: 100%; height: 100%; max-height: 100%; top: 0; left: 0; transform: none; border-radius: 0; align-self: flex-start; overflow-y: auto; }
}