* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; background: #f4f4f4; color: #222; }
header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #222; color: white; gap: 12px; flex-wrap: wrap; }
header a { color: white; }
main { padding: 20px; max-width: 1200px; margin: auto; }
.box { background: white; padding: 20px; border-radius: 10px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.login-wrap { max-width: 430px; margin: 60px auto; }
.login-box input, .login-box textarea { width: 100%; padding: 10px; margin: 6px 0 14px; border: 1px solid #ccc; border-radius: 6px; }
button, .download { display: inline-block; background: #222; color: white; padding: 10px 14px; border: 0; border-radius: 6px; text-decoration: none; cursor: pointer; }
.success { color: #0a7a20; font-weight: bold; }
.error { color: #b00020; font-weight: bold; }
.note { color: #555; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.card { background: white; padding: 10px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.card img { width: 100%; height: 180px; object-fit: cover; display: block; border-radius: 8px; margin-bottom: 10px; background: #ddd; }
.filename { font-size: 13px; color: #444; margin-bottom: 10px; word-break: break-word; }
input[type="file"] { display: block; margin: 10px 0 14px; }