/* OMERO AI — Styles */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #0a0e17; color: #e0e0e0; min-height: 100vh; display: flex; flex-direction: column; }
.container { max-width: 960px; margin: 0 auto; padding: 0 20px; width: 100%; }
.accent { color: #4fc3f7; }
.muted { color: #64748b; }

/* Header */
header { background: linear-gradient(135deg, #0d1b2a, #1b2838); padding: 16px 0; border-bottom: 2px solid #4fc3f7; }
.header-row { display: flex; align-items: center; justify-content: space-between; }
header h1 { font-size: 1.6em; letter-spacing: 2px; }
nav { display: flex; gap: 10px; align-items: center; }
#userName { color: #90a4ae; margin-right: 8px; }

/* Buttons */
.btn { display: inline-block; background: #4fc3f7; color: #0a0e17; padding: 8px 20px; border-radius: 6px; cursor: pointer; font-weight: 600; border: none; font-size: 0.9em; transition: background 0.3s; text-decoration: none; }
.btn:hover { background: #81d4fa; }
.btn-outline { background: transparent; color: #4fc3f7; border: 1px solid #4fc3f7; }
.btn-outline:hover { background: rgba(79,195,247,0.1); }
.btn-large { padding: 14px 36px; font-size: 1.1em; margin-top: 24px; }
.btn-full { width: 100%; padding: 12px; margin-top: 16px; }
.btn-small { padding: 6px 14px; font-size: 0.85em; }
.btn-tiny { padding: 4px 10px; font-size: 0.8em; margin: 2px; }
.btn-approve { background: #2e7d32; color: #fff; }
.btn-approve:hover { background: #388e3c; }
.btn-reject { background: #c62828; color: #fff; }
.btn-reject:hover { background: #d32f2f; }

/* Hero */
.hero { text-align: center; padding: 80px 0; }
.hero h2 { font-size: 2.4em; line-height: 1.3; margin-bottom: 16px; }
.hero p { color: #90a4ae; font-size: 1.15em; max-width: 600px; margin: 0 auto; }

/* Modal */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 100; justify-content: center; align-items: center; }
.modal-content { background: #111827; border-radius: 12px; padding: 36px; width: 100%; max-width: 420px; position: relative; border: 1px solid #1e293b; }
.modal-small { max-width: 360px; }
.close { position: absolute; top: 12px; right: 16px; font-size: 1.5em; color: #64748b; cursor: pointer; }
.close:hover { color: #e0e0e0; }

/* Forms */
input[type="text"], input[type="email"], input[type="password"], select {
    width: 100%; padding: 12px; margin-top: 12px; background: #1e293b; border: 1px solid #334155;
    border-radius: 6px; color: #e0e0e0; font-size: 0.95em;
}
input:focus, select:focus { outline: none; border-color: #4fc3f7; }
.error-msg { color: #ef5350; font-size: 0.85em; margin-top: 8px; min-height: 20px; }
.switch-link { text-align: center; margin-top: 16px; font-size: 0.9em; color: #64748b; }
.switch-link a { color: #4fc3f7; text-decoration: none; }

/* Account type select */
.account-type-select { display: flex; gap: 12px; margin-top: 16px; }
.type-option { flex: 1; cursor: pointer; }
.type-option input { display: none; }
.type-card { border: 2px solid #334155; border-radius: 8px; padding: 14px; text-align: center; transition: all 0.2s; }
.type-card strong { display: block; color: #e0e0e0; }
.type-card span { font-size: 0.8em; color: #64748b; }
.type-option input:checked + .type-card { border-color: #4fc3f7; background: rgba(79,195,247,0.08); }

/* Dashboard */
.dashboard-tabs { display: flex; gap: 4px; margin: 24px 0 20px; border-bottom: 1px solid #1e293b; }
.tab { background: none; border: none; color: #64748b; padding: 10px 20px; cursor: pointer; font-size: 0.95em; border-bottom: 2px solid transparent; }
.tab.active { color: #4fc3f7; border-bottom-color: #4fc3f7; }
.tab:hover { color: #90a4ae; }

/* Upload */
.upload-section { background: #111827; border-radius: 12px; padding: 32px; border: 1px solid #1e293b; }
.upload-area { border: 2px dashed #334155; border-radius: 8px; padding: 40px 20px; text-align: center; cursor: pointer; transition: all 0.3s; }
.upload-area:hover, .upload-area.dragover { border-color: #4fc3f7; background: rgba(79,195,247,0.05); }
.upload-icon { font-size: 2.5em; margin-bottom: 12px; }
.small { color: #64748b; margin: 8px 0; }
.formats { color: #64748b; font-size: 0.8em; margin-top: 12px; }

.status { margin-top: 16px; padding: 10px 14px; border-radius: 6px; font-size: 0.9em; }
.status.uploading { background: #1e3a5f; color: #90caf9; }
.status.success { background: #1b4332; color: #81c784; }
.status.error { background: #4a1c1c; color: #ef9a9a; }

/* Files & Tables */
.files-list { margin-top: 24px; }
.files-list h3, .team-header h3 { color: #4fc3f7; margin-bottom: 12px; }
.team-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; color: #64748b; font-size: 0.85em; padding: 8px 12px; border-bottom: 1px solid #1e293b; text-transform: uppercase; letter-spacing: 0.5px; }
.data-table td { padding: 10px 12px; border-bottom: 1px solid #0f172a; font-size: 0.9em; }
.data-table tr:hover { background: rgba(79,195,247,0.03); }

/* Badges */
.badge { padding: 3px 8px; border-radius: 4px; font-size: 0.8em; font-weight: 600; }
.badge-admin { background: #1a237e; color: #90caf9; }
.badge-member { background: #1b5e20; color: #a5d6a7; }
.badge-viewer { background: #4e342e; color: #bcaaa4; }
.badge-active { background: #1b4332; color: #81c784; }
.badge-pending { background: #4a3800; color: #ffd54f; }
.badge-rejected { background: #4a1c1c; color: #ef9a9a; }

/* QA Section */
.qa-section { background: #111827; border-radius: 12px; padding: 32px; border: 1px solid #1e293b; }
.qa-section h3 { color: #4fc3f7; margin-bottom: 8px; }
.qa-desc { color: #64748b; font-size: 0.9em; margin-bottom: 16px; }
.qa-form { display: flex; gap: 12px; align-items: stretch; }
.qa-form input { flex: 1; margin-top: 0; }
.qa-form .btn { white-space: nowrap; height: auto; }
.qa-tasks-list { margin-top: 20px; }
.qa-task-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #1e293b; flex-wrap: wrap; }
.qa-task-code { font-family: monospace; color: #e0e0e0; font-size: 0.95em; }

/* RPX toggle */
.rpx-toggle { display: flex; align-items: center; gap: 6px; color: #90a4ae; font-size: 0.9em; cursor: pointer; white-space: nowrap; }
.rpx-toggle input[type="checkbox"] { width: 16px; height: 16px; accent-color: #4fc3f7; cursor: pointer; }

/* Progress bar */
.qa-progress { margin-top: 16px; }
.progress-bar { background: #1e293b; border-radius: 8px; height: 24px; overflow: hidden; position: relative; }
.progress-fill { background: linear-gradient(90deg, #4fc3f7, #81d4fa); height: 100%; border-radius: 8px; transition: width 0.5s ease; width: 0%; }
.progress-label { margin-top: 6px; font-size: 0.85em; color: #90a4ae; text-align: center; }

/* Footer */
footer { text-align: center; padding: 20px 0; color: #64748b; font-size: 0.85em; border-top: 1px solid #1e293b; margin-top: auto; }

/* Responsive */
@media (max-width: 600px) {
    .hero h2 { font-size: 1.6em; }
    .account-type-select { flex-direction: column; }
    .header-row { flex-direction: column; gap: 10px; }
}