:root { --primary: #007bff; --bg: #f8f9fa; --success: #28a745; }
body { font-family: 'Helvetica Neue', Arial, sans-serif; background: var(--bg); display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; }
.container { max-width: 480px; width: 90%; background: white; padding: 30px; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.08); text-align: center; }

h1 { margin-bottom: 30px; color: #333; font-weight: 700; }

.drop-zone { border: 2px dashed #cbd5e0; padding: 40px 20px; border-radius: 16px; cursor: pointer; transition: 0.3s; background: #fafafa; }
.drop-zone:hover { border-color: var(--primary); background: #f0f7ff; }
.drop-zone i { font-size: 48px; color: #a0aec0; margin-bottom: 10px; }

.file-list-preview {
    text-align: left;
    margin: 20px 0; /* 前後の余白をしっかり取る */
    max-height: 150px;
    overflow-y: auto; /* ファイルが多い時にスクロール可能にする */
    padding: 10px;
    border-radius: 8px;
    background: #f9fbff; /* 少し色をつけて目立たせる */
    display: none; /* 初期は隠す */
}

.options { margin: 20px 0; padding: 15px; background: #f7fafc; border-radius: 12px; }
.pw-field { width: 100%; padding: 10px; margin-top: 10px; border: 1px solid #e2e8f0; border-radius: 8px; box-sizing: border-box; }

.upload-main-btn { background: var(--primary); color: white; border: none; padding: 16px; border-radius: 12px; width: 100%; font-size: 16px; font-weight: 600; cursor: pointer; transition: 0.2s; }
.upload-main-btn:hover { background: #0056b3; transform: translateY(-2px); }

.progress-bar { width: 100%; background: #edf2f7; border-radius: 10px; height: 8px; margin-top: 20px; }
.progress-fill { width: 0%; height: 100%; background: var(--primary); border-radius: 10px; transition: 0.3s; }

.result-box { margin-top: 25px; padding: 20px; border: 2px solid var(--success); border-radius: 16px; background: #f0fff4; }
#shareLink { width: 100%; padding: 10px; border: 1px solid #cdfaf3; margin-bottom: 10px; border-radius: 8px; text-align: center; }
.copy-btn { background: var(--success); color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; width: 100%; }