* { box-sizing: border-box; }
body { font-family: sans-serif; background: #f4f4f4; padding: 10px; margin: 0; }
.container { max-width: 600px; margin: auto; background: white; padding: 15px; border-radius: 8px; }
h1 { font-size: 1.5rem; margin-top: 0; }
.upload-section, .file-list, .info-section { margin-bottom: 20px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; }

/* File List as Cards */
.file-card { border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 5px; }
.file-card p { margin: 5px 0; overflow-wrap: anywhere; }
.file-card .actions { display: flex; gap: 10px; margin-top: 10px; }

/* Upload Section */
.upload-section input { width: 100%; margin-bottom: 10px; }
.upload-section button { width: 100%; padding: 10px; }

/* Info Section */
.url-box { background: #eee; padding: 10px; border-radius: 5px; word-break: break-all; margin: 10px 0; }
#qrCode { display: block; margin: 10px auto; max-width: 220px; width: 100%; height: auto; }

.security-note { color: #888; font-size: 0.8rem; margin-top: 10px; text-align: center; }

@media (max-width: 600px) {
  .container { padding: 10px; border-radius: 0; }
}