.section { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 24px; } .sectionTitle { font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-secondary, rgba(255, 255, 255, 0.5)); font-weight: 600; margin: 0 0 18px; } .slots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .slot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); } .slot:first-child { border-top: none; } .slotInfo { display: flex; flex-direction: column; gap: 4px; min-width: 200px; } .slotLabel { font-size: 14px; font-weight: 600; color: var(--text-primary, #fff); } .slotFile { font-size: 13px; color: var(--text-secondary, rgba(255, 255, 255, 0.7)); } .slotActions { display: flex; align-items: center; gap: 10px; } .hiddenInput { display: none; } .uploadBtn { background: var(--interactive, #4a6dff); border: none; border-radius: 10px; color: #fff; font-size: 14px; font-weight: 600; padding: 11px 20px; cursor: pointer; transition: opacity 0.2s; white-space: nowrap; } .uploadBtn:disabled { opacity: 0.5; cursor: not-allowed; } .mono { font-family: var(--font-mono, monospace); font-size: 13px; } .downloadBtn { display: inline-block; background: rgba(74, 109, 255, 0.12); border: 1px solid rgba(74, 109, 255, 0.3); border-radius: 8px; color: #7c95ff; font-size: 13px; font-weight: 600; padding: 7px 14px; cursor: pointer; text-decoration: none; transition: background 0.2s; white-space: nowrap; } .downloadBtn:hover { background: rgba(74, 109, 255, 0.22); } .muted { color: var(--text-secondary, rgba(255, 255, 255, 0.4)); } .state { padding: 32px 16px; text-align: center; color: var(--text-secondary, rgba(255, 255, 255, 0.6)); font-size: 14px; } .error { color: #ff5a5a; font-size: 13px; margin: 0 0 12px; }