[v-cloak] { display: none; }

:root {
    --navy-900: #0c2340;
    --navy-800: #123657;
    --blue-600: #1f5fa8;
    --blue-700: #184b86;
    --blue-100: #dfeaf6;
    --green-600: #2f8f5b;
    --text-dark: #1a2733;
    --text-mid: #48576a;
    --text-light: #7688a0;
    --bg-page: #f3f6fa;
    --border: #dbe3ec;
    --danger: #c0392b;
    --danger-light: #fbeae8;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    color: var(--text-mid);
    margin: 0;
    background-color: var(--bg-page);
}

#app {
    max-width: 900px;
    margin: 2rem auto;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(12, 35, 64, 0.08);
    overflow: hidden;
    border: 1px solid var(--border);
}

/* Logo */
.logo-container {
    background-color: var(--navy-900);
    padding: 1.75rem 2rem 1.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.logo-container img { max-width: 280px; height: auto; filter: invert(1) brightness(2); }
.logo-title { color: #fff; font-size: 2em; font-weight: bold; }
.logo-subtitle { color: var(--blue-100); font-size: 0.9em; margin-top: 0.35rem; }

/* Trust bar */
.trust-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.9rem 1.5rem;
    background-color: var(--navy-800);
    border-top: 1px solid rgba(255,255,255,0.08);
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--blue-100);
    font-size: 0.8em;
    font-weight: 500;
    white-space: nowrap;
}
.trust-icon { width: 16px; height: 16px; color: #6fd39a; flex-shrink: 0; }

/* Progress bar */
.progress-bar { display: flex; justify-content: space-between; padding: 1.25rem 2rem; background-color: #ffffff; border-bottom: 1px solid var(--border); position: relative; }
.progress-fill { background-color: var(--blue-600); transition: width 0.3s ease-in-out; height: 4px; position: absolute; top: 50%; left: 2rem; right: 2rem; transform: translateY(-50%); z-index: 1; border-radius: 2px; }
.progress-fill::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--border);
    z-index: -1;
}
.progress-step { display: flex; flex-direction: column; align-items: center; z-index: 2; background-color: #ffffff; padding: 0 0.5rem; }
.step-circle { width: 26px; height: 26px; border-radius: 50%; background-color: #ffffff; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; transition: background-color 0.3s, border-color 0.3s; }
.step-circle.active { background-color: var(--blue-600); border-color: var(--blue-600); }
.step-circle.completed { background-color: var(--blue-600); border-color: var(--blue-600); }
.step-label { margin-top: 0.5rem; font-size: 0.8em; color: var(--text-light); transition: color 0.3s; }
.step-label.active { color: var(--text-dark); font-weight: 600; }
.step-label.completed { color: var(--blue-600); }

/* Welcome message */
.welcome-message { background-color: var(--bg-page); padding: 1rem 2rem; border-bottom: 1px solid var(--border); text-align: center; color: var(--text-mid); font-size: 0.95em; }

/* Content sections */
.section-title { font-size: 1.4em; color: var(--text-dark); padding: 1.5rem 2rem 0.5rem; margin: 0; font-weight: 600; }
.content-section { padding: 1rem 2rem 1.5rem; }

/* Upload area */
.upload-area { border: 2px dashed var(--border); border-radius: 8px; padding: 3rem 1.5rem; text-align: center; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; min-height: 160px; display: flex; align-items: center; justify-content: center; }
.upload-area-active { border-color: var(--blue-600); background-color: var(--blue-100); }
.upload-area-has-file { border-style: solid; border-color: var(--border); padding: 1.5rem; }
.upload-placeholder { display: flex; flex-direction: column; align-items: center; width: 100%; }
.upload-icon { width: 44px; height: 44px; color: var(--blue-600); margin-bottom: 1rem; }
.upload-text { color: var(--text-mid); font-weight: 500; margin-bottom: 0.5rem; }
.upload-formats { font-size: 0.8em; color: var(--text-light); }
.hidden-file-input { display: none; }
.file-preview { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 1rem; background-color: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.file-info { display: flex; align-items: center; gap: 1rem; }
.file-icon { width: 32px; height: 32px; color: var(--blue-600); }
.file-details { text-align: left; }
.file-name { font-weight: 500; color: var(--text-dark); margin: 0; word-break: break-all; }
.file-size { font-size: 0.85em; color: var(--text-light); margin: 0.2rem 0 0; }
.file-remove { background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 50%; transition: background-color 0.2s; }
.file-remove:hover { background-color: var(--bg-page); }
.remove-icon { width: 20px; height: 20px; color: var(--danger); }

/* Form elements */
.form-group { margin-bottom: 1.5rem; }
.form-label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--text-dark); font-size: 0.9em; }
.form-input, textarea.form-input { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.95em; box-sizing: border-box; font-family: inherit; transition: border-color 0.2s, box-shadow 0.2s; }
.form-input:focus, textarea.form-input:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px var(--blue-100); }
.form-input.error, textarea.form-input.error { border-color: var(--danger); }
.error-text { color: var(--danger); font-size: 0.8em; margin-top: 0.3rem; }
textarea.form-input { min-height: 100px; resize: vertical; }

/* Participants */
.participant-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.participant-row input { flex: 1; }
.btn-add { background-color: transparent; border: 1px dashed var(--border); color: var(--blue-600); padding: 0.6rem 1.2rem; border-radius: 6px; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; font-size: 0.9em; margin-top: 0.5rem; }
.btn-add:hover { background-color: var(--blue-100); border-color: var(--blue-600); }

/* Buttons */
.button-row { display: flex; justify-content: space-between; padding: 1.5rem 2rem; background-color: var(--bg-page); border-top: 1px solid var(--border); }
.btn { padding: 0.75rem 1.5rem; border: none; border-radius: 6px; font-size: 0.95em; font-weight: 500; cursor: pointer; transition: background-color 0.2s, opacity 0.2s; }
.btn-primary { background-color: var(--blue-600); color: white; }
.btn-primary:hover:not(:disabled) { background-color: var(--blue-700); }
.btn-primary:disabled { background-color: var(--blue-100); color: var(--text-light); cursor: not-allowed; }
.btn-secondary { background-color: #fff; color: var(--text-dark); border: 1px solid var(--border); }
.btn-secondary:hover { background-color: var(--bg-page); }

/* Modal */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(12, 35, 64, 0.55); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.modal-content { background-color: white; padding: 2rem; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); max-width: 500px; width: 90%; text-align: center; }
.modal-title { font-size: 1.3em; font-weight: 600; color: var(--text-dark); margin-bottom: 1rem; }
.modal p { color: var(--text-mid); margin-bottom: 1rem; line-height: 1.6; }
.modal-secure-note { display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: var(--green-600); font-size: 0.85em; font-weight: 500; margin-bottom: 1.5rem; }
.modal-secure-note svg { width: 16px; height: 16px; flex-shrink: 0; }
.modal-buttons { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; }
.modal-btn { padding: 0.6rem 1.2rem; border-radius: 6px; }

/* Upload progress */
.upload-progress-container { margin-top: 1rem; text-align: center; }
.upload-progress-bar { width: 100%; height: 8px; background-color: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 0.5rem; }
.upload-progress-fill { height: 100%; background-color: var(--blue-600); width: 0%; border-radius: 4px; transition: width 0.3s ease-in-out; }
.upload-progress-text { font-size: 0.9em; color: var(--text-mid); }

/* Error / success toast */
.error-message {
    position: fixed; top: 1.5rem; right: 1.5rem;
    background-color: var(--danger); color: white;
    box-sizing: border-box; width: max-content;
    max-width: min(28rem, calc(100vw - 3rem));
    max-height: min(12rem, calc(100vh - 3rem));
    overflow-y: auto; overflow-wrap: anywhere; white-space: normal;
    padding: 0.875rem 1rem; border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1001; font-size: 0.95rem; line-height: 1.45;
}
.error-message.is-success { background-color: var(--green-600); }

/* Footer */
.footer { padding: 1.5rem 2rem; background-color: var(--bg-page); color: var(--text-light); font-size: 0.8em; text-align: center; line-height: 1.6; border-top: 1px solid var(--border); }
.footer b { color: var(--text-dark); }

/* Overview step */
.overview-section { background-color: var(--bg-page); border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; }
.overview-item { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.overview-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.overview-label { font-weight: 600; color: var(--text-mid); margin-bottom: 0.25rem; font-size: 0.9rem; }
.overview-value { color: var(--text-dark); font-size: 1rem; line-height: 1.5; }
.overview-value ul { list-style: disc; padding-left: 1.5rem; margin: 0.25rem 0 0 0; }
.overview-value li { margin-bottom: 0.25rem; }
.overview-notes {
    white-space: pre-wrap; word-wrap: break-word; max-height: 200px; overflow-y: auto;
    background-color: #fff; border: 1px solid var(--border); padding: 0.5rem; border-radius: 6px;
}

/* Responsive */
@media (max-width: 768px) {
    #app { margin: 0; border-radius: 0; border: none; }
    .logo-container { padding: 1.25rem 1.5rem 1rem; }
    .trust-bar { gap: 0.75rem 1.25rem; padding: 0.75rem 1rem; }
    .progress-bar { padding: 1rem 1rem; }
    .progress-fill { left: 1rem; right: 1rem; }
    .welcome-message, .section-title, .content-section, .button-row, .footer { padding-left: 1.25rem; padding-right: 1.25rem; }
    .participant-row { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .participant-row button { margin-top: 0.5rem; align-self: flex-end; }
}

@media (max-width: 480px) {
    .logo-title { font-size: 1.5em; }
    .trust-item span { display: none; }
    .step-label { display: none; }
    .progress-step { padding: 0; }
    .button-row { flex-direction: column; gap: 0.5rem; }
    .button-row button { width: 100%; }
    .modal-content { width: 95%; padding: 1.5rem; }
    .error-message { top: 1rem; right: 1rem; left: 1rem; width: auto; max-width: none; }
}