/* ===== QUESTIONNAIRE FORM STYLES ===== */

/* ===== RESET & VARIABLES ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --red: #E31837;
    --red-dark: #B71430;
    --red-light: #FEF2F4;
    --dark: #0F1923;
    --gray-900: #111827;
    --gray-700: #374151;
    --gray-600: #4B5563;
    --gray-500: #6B7280;
    --gray-400: #9CA3AF;
    --gray-300: #D1D5DB;
    --gray-200: #E5E7EB;
    --gray-100: #F3F4F6;
    --gray-50: #F9FAFB;
    --white: #FFFFFF;
    --success: #059669;
    --radius: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    --transition: 0.2s ease;
}

body {
    min-height: 100vh;
    background: #f8f9fa;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--gray-900);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

a { text-decoration: none; color: inherit; }

/* ===== LOGO ===== */
.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 900;
}

.logo__icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.logo__text {
    color: var(--gray-900);
}

.logo__highlight {
    color: var(--red);
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border-radius: var(--radius);
    transition: all var(--transition);
    white-space: nowrap;
    gap: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    padding: 12px 24px;
}

.btn--primary {
    background: var(--red);
    color: white;
    border-color: var(--red);
}

.btn--primary:hover {
    background: var(--red-dark);
    border-color: var(--red-dark);
}

.btn--primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn--outline {
    background: transparent;
    color: var(--gray-700);
    border-color: var(--gray-300);
}

.btn--outline:hover {
    border-color: var(--gray-500);
    color: var(--gray-900);
}

.btn--lg {
    padding: 14px 32px;
    font-size: 16px;
}

.btn--sm {
    padding: 8px 16px;
    font-size: 13px;
}

/* ===== PAGE LAYOUT ===== */
.q-page {
    min-height: 100vh;
    background: #f8f9fa;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--gray-900);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

.q-container {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px;
}

.q-header {
    height: 60px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.q-header__logo {
    height: 32px;
}

/* ===== PROGRESS BAR ===== */
.q-progress-wrap {
    background: var(--white);
    border-bottom: 1px solid var(--gray-100);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    position: sticky;
    top: 60px;
    z-index: 90;
}

.q-progress {
    max-width: 640px;
    margin: 0 auto;
    padding: 20px 32px 24px;
}

.q-progress__bar {
    width: calc(100% - 48px);
    height: 4px;
    background: var(--gray-200);
    border-radius: 100px;
    overflow: hidden;
    margin: 0 auto 20px;
    position: relative;
}

.q-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--red), #ff4d6a);
    border-radius: 100px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.q-progress__fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: -2px;
    width: 8px;
    height: 8px;
    background: var(--red);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(227, 24, 55, 0.2);
    transition: opacity 0.3s;
}

.q-progress__steps {
    display: flex;
    justify-content: space-between;
    position: relative;
}

/* Connecting line between steps */
.q-progress__steps::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 24px;
    right: 24px;
    height: 2px;
    background: var(--gray-200);
    z-index: 0;
}

.q-progress__step {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2.5px solid var(--gray-300);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-400);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
    cursor: default;
}

.q-progress__step--active {
    border-color: var(--red);
    background: var(--red);
    color: var(--white);
    box-shadow: 0 0 0 5px rgba(227, 24, 55, 0.12), 0 2px 8px rgba(227, 24, 55, 0.25);
    transform: scale(1.1);
}

.q-progress__step--done {
    border-color: var(--success);
    background: var(--success);
    color: var(--white);
    box-shadow: 0 1px 3px rgba(5, 150, 105, 0.2);
}

.q-progress__step--done::after {
    content: '✓';
    font-size: 15px;
    font-weight: 800;
}

.q-progress__step--done span {
    display: none;
}

/* ===== STEPS ===== */
.q-step {
    display: none;
}

.q-step--active,
.step--active {
    display: block;
    animation: q-fadeIn 0.35s ease;
}

@keyframes q-fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.q-step__title {
    font-size: 24px;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 8px;
    letter-spacing: -0.3px;
    line-height: 1.3;
}

.q-step__desc {
    font-size: 15px;
    color: var(--gray-500);
    margin-bottom: 28px;
    line-height: 1.6;
}

/* ===== FORM FIELDS ===== */
.q-field {
    margin-bottom: 20px;
}

.q-label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--gray-900);
    margin-bottom: 6px;
}

.q-label--required::after {
    content: ' *';
    color: var(--red);
    font-weight: 700;
}

.q-hint {
    display: block;
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 6px;
    line-height: 1.4;
}

.q-explain {
    display: block;
    font-size: 12.5px;
    color: #6b7280;
    margin-top: 6px;
    line-height: 1.5;
    padding-left: 2px;
}

.q-explain strong {
    color: #374151;
    font-weight: 600;
}

.q-input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--gray-200);
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    color: var(--gray-900);
    background: var(--white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

.q-input::placeholder {
    color: var(--gray-400);
}

.q-input:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(227, 24, 55, 0.1);
}

.q-input--error {
    border-color: var(--red);
    background: #fef2f2;
}

.q-input--error:focus {
    box-shadow: 0 0 0 3px rgba(227, 24, 55, 0.15);
}

.q-select {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--gray-200);
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    color: var(--gray-900);
    background: var(--white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236B7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5l-5-5h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}

.q-select:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(227, 24, 55, 0.1);
}

.q-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--gray-200);
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    color: var(--gray-900);
    background: var(--white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
}

.q-textarea:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(227, 24, 55, 0.1);
}

/* ===== RADIO GROUP ===== */
.q-radio-group {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
}

.q-radio {
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border: 1.5px solid var(--gray-200);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-700);
    background: var(--white);
    transition: all 0.2s ease;
    min-height: 44px;
}

.q-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.q-radio:has(input:checked),
.q-radio--selected {
    border-color: var(--red);
    background: var(--red-light);
    color: var(--red);
    font-weight: 600;
}

.q-radio:hover {
    border-color: var(--gray-300);
    background: var(--gray-50);
}

.q-radio:has(input:checked):hover {
    border-color: var(--red);
    background: var(--red-light);
}

/* Fallback for browsers without :has() — JS adds this class */
.q-radio--checked,
.q-radio.q-radio--checked {
    border-color: var(--red) !important;
    background: var(--red-light) !important;
    color: var(--red) !important;
    font-weight: 600 !important;
}

/* ===== CHECKBOX ===== */
.q-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--gray-700);
    line-height: 1.5;
    min-height: 44px;
    padding: 4px 0;
}

.q-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--gray-300);
    border-radius: 5px;
    appearance: none;
    flex-shrink: 0;
    margin-top: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--white);
    position: relative;
}

.q-checkbox input[type="checkbox"]:checked {
    background: var(--red);
    border-color: var(--red);
}

.q-checkbox input[type="checkbox"]:checked::after {
    content: '✓';
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.q-checkbox input[type="checkbox"]:focus {
    box-shadow: 0 0 0 3px rgba(227, 24, 55, 0.1);
}

/* ===== ERROR / HELP ===== */
.q-error {
    font-size: 13px;
    color: var(--red);
    margin-top: 4px;
    line-height: 1.4;
}

.q-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--gray-200);
    color: var(--gray-600);
    font-size: 11px;
    font-weight: 700;
    cursor: help;
    position: relative;
    vertical-align: middle;
    margin-left: 4px;
}

.q-help:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--gray-900);
    color: var(--white);
    font-size: 12px;
    font-weight: 400;
    padding: 8px 12px;
    border-radius: 8px;
    white-space: nowrap;
    max-width: 260px;
    white-space: normal;
    z-index: 50;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
}

.q-help:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--gray-900);
    z-index: 50;
}

/* ===== DYNAMIC CARDS ===== */
.q-card {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;
}

.q-card:hover {
    box-shadow: var(--shadow);
}

.q-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.q-card__title {
    font-weight: 600;
    font-size: 15px;
    color: var(--gray-900);
}

.q-card__actions {
    display: flex;
    gap: 8px;
}

.q-card__actions button {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--gray-500);
    transition: all 0.2s ease;
    background: var(--gray-50);
    border: none;
    cursor: pointer;
}

.q-card__actions button:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.q-card__actions button.q-card__delete:hover {
    background: #fef2f2;
    color: var(--red);
}

.q-card--editing {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(227, 24, 55, 0.08);
}

.q-card--collapsed .q-card__body {
    display: none;
}

.q-card__summary {
    font-size: 13px;
    color: var(--gray-500);
    line-height: 1.5;
}

/* ===== ADD BUTTON ===== */
.q-add-btn {
    width: 100%;
    padding: 14px;
    text-align: center;
    border: 2px dashed var(--gray-300);
    border-radius: 10px;
    background: transparent;
    color: var(--gray-500);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
}

.q-add-btn:hover {
    border-color: var(--red);
    color: var(--red);
    background: rgba(227, 24, 55, 0.02);
}

/* ===== TIMELINE ===== */
.q-timeline {
    margin: 20px 0;
}

.q-timeline__bar {
    width: 100%;
    height: 24px;
    background: var(--gray-100);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    position: relative;
}

.q-timeline__filled {
    height: 100%;
    background: var(--success);
    opacity: 0.8;
    transition: width 0.3s ease;
}

.q-timeline__gap {
    height: 100%;
    background: var(--red);
    opacity: 0.25;
    transition: width 0.3s ease;
}

.q-timeline__labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
}

.q-timeline__label {
    font-size: 11px;
    color: var(--gray-400);
    font-weight: 500;
}

/* ===== GAP WARNING ===== */
.q-gap-warning {
    background: #fffbeb;
    padding: 16px;
    border-radius: 10px;
    border-left: 4px solid #f59e0b;
    margin: 16px 0;
    font-size: 14px;
    color: #92400e;
    line-height: 1.5;
}

.q-gap-warning strong {
    font-weight: 600;
}

/* ===== NAVIGATION BUTTONS ===== */
.q-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
    gap: 16px;
}

.q-btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 28px;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--gray-700);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
}

.q-btn-back:hover {
    border-color: var(--gray-400);
    color: var(--gray-900);
}

.q-btn-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 36px;
    background: var(--red);
    color: var(--white);
    border: none;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(227, 24, 55, 0.4);
    transition: all 0.2s ease;
    min-height: 44px;
}

.q-btn-next:hover {
    background: var(--red-dark);
    box-shadow: 0 8px 25px rgba(227, 24, 55, 0.5);
    transform: translateY(-1px);
}

.q-btn-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.q-btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 40px;
    background: var(--success);
    color: var(--white);
    border: none;
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.4);
    transition: all 0.2s ease;
    min-height: 44px;
}

.q-btn-submit:hover {
    background: #047857;
    box-shadow: 0 8px 25px rgba(5, 150, 105, 0.5);
    transform: translateY(-1px);
}

/* ===== INTRO SCREEN (Step 0) ===== */
.q-intro {
    text-align: center;
    padding: 40px 0;
}

.q-intro__icon {
    font-size: 56px;
    margin-bottom: 20px;
    line-height: 1;
}

.q-intro__title {
    font-size: 28px;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 12px;
    letter-spacing: -0.3px;
}

.q-intro__text {
    font-size: 16px;
    color: var(--gray-500);
    max-width: 520px;
    margin: 0 auto 32px;
    line-height: 1.7;
}

.q-intro__features {
    list-style: none;
    padding: 0;
    text-align: left;
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.q-intro__features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--gray-700);
}

.q-intro__features li::before {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(5, 150, 105, 0.1);
    color: var(--success);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ===== REVIEW SCREEN (Step 6) ===== */
.q-review {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.q-review__section {
    border-bottom: 1px solid var(--gray-200);
    padding: 20px 0;
}

.q-review__section:last-child {
    border-bottom: none;
}

.q-review__section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 12px;
}

.q-review__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 6px 0;
    gap: 16px;
}

.q-review__label {
    font-size: 13px;
    color: var(--gray-500);
    flex-shrink: 0;
    min-width: 140px;
}

.q-review__value {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-900);
    text-align: right;
}

/* ===== SUCCESS SCREEN ===== */
.q-success {
    text-align: center;
    padding: 40px 0 60px;
    position: relative;
    overflow: hidden;
}

.q-success__card {
    background: var(--white);
    border-radius: 20px;
    padding: 48px 32px 40px;
    max-width: 480px;
    margin: 0 auto;
    box-shadow:
        0 4px 6px -1px rgba(0,0,0,0.07),
        0 10px 30px -5px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1;
    animation: q-successSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes q-successSlideUp {
    from { opacity: 0; transform: translateY(30px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.q-success__icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #059669, #34d399);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    box-shadow:
        0 8px 24px rgba(5, 150, 105, 0.3),
        0 0 0 8px rgba(5, 150, 105, 0.08);
    animation: q-successPop 0.5s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes q-successPop {
    from { opacity: 0; transform: scale(0.3); }
    to   { opacity: 1; transform: scale(1); }
}

.q-success__title {
    font-size: 26px;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 10px;
    letter-spacing: -0.3px;
}

.q-success__text {
    font-size: 15px;
    color: var(--gray-500);
    max-width: 360px;
    margin: 0 auto 28px;
    line-height: 1.7;
}

/* Next steps inside success */
.q-success__steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
    background: var(--gray-50);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 28px;
}

.q-success__step {
    display: flex;
    align-items: center;
    gap: 14px;
}

.q-success__step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--red);
    color: white;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.q-success__step-text {
    font-size: 14px;
    color: var(--gray-700);
    font-weight: 500;
    line-height: 1.4;
}

.q-success__btn {
    width: 100%;
}

/* Confetti animation */
.q-success__confetti {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.q-success__confetti span {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    opacity: 0;
    animation: q-confettiFall 2.5s ease-in-out forwards;
}

.q-success__confetti span:nth-child(1)  { left: 10%; background: #E31837; animation-delay: 0.1s; }
.q-success__confetti span:nth-child(2)  { left: 20%; background: #3b82f6; animation-delay: 0.3s; width: 8px; height: 8px; border-radius: 50%; }
.q-success__confetti span:nth-child(3)  { left: 35%; background: #f59e0b; animation-delay: 0.0s; }
.q-success__confetti span:nth-child(4)  { left: 45%; background: #059669; animation-delay: 0.2s; width: 6px; height: 12px; }
.q-success__confetti span:nth-child(5)  { left: 55%; background: #E31837; animation-delay: 0.4s; border-radius: 50%; }
.q-success__confetti span:nth-child(6)  { left: 65%; background: #8b5cf6; animation-delay: 0.15s; width: 8px; height: 8px; }
.q-success__confetti span:nth-child(7)  { left: 75%; background: #f59e0b; animation-delay: 0.35s; border-radius: 50%; width: 7px; height: 7px; }
.q-success__confetti span:nth-child(8)  { left: 85%; background: #3b82f6; animation-delay: 0.05s; }
.q-success__confetti span:nth-child(9)  { left: 15%; background: #059669; animation-delay: 0.5s; width: 6px; height: 10px; }
.q-success__confetti span:nth-child(10) { left: 50%; background: #8b5cf6; animation-delay: 0.25s; border-radius: 50%; }
.q-success__confetti span:nth-child(11) { left: 30%; background: #E31837; animation-delay: 0.45s; width: 8px; height: 8px; }
.q-success__confetti span:nth-child(12) { left: 70%; background: #f59e0b; animation-delay: 0.55s; }

@keyframes q-confettiFall {
    0%   { top: -10%; opacity: 1; transform: rotate(0deg) scale(1); }
    50%  { opacity: 1; }
    100% { top: 105%; opacity: 0; transform: rotate(720deg) scale(0.5); }
}

/* ===== AUTOSAVE NOTICE ===== */
.q-autosave {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--gray-900);
    color: var(--white);
    padding: 10px 18px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 200;
}

.q-autosave--visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== DATE GROUP ===== */
.q-date-group {
    display: flex;
    gap: 12px;
}

.q-date-group > * {
    flex: 1;
}

/* ===== CONDITIONAL FIELDS ===== */
.q-conditional,
.q-conditional-block {
    display: none;
    overflow: hidden;
}

.q-conditional--visible {
    display: block;
    animation: q-slideDown 0.3s ease;
}

@keyframes q-slideDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        max-height: 800px;
        transform: translateY(0);
    }
}

/* ===== GRID LAYOUTS ===== */
.q-grid {
    display: grid;
    gap: 16px;
}

.q-grid--2 {
    grid-template-columns: 1fr 1fr;
}

.q-grid--2-1 {
    grid-template-columns: 2fr 1fr;
}

.q-grid--1-2 {
    grid-template-columns: 1fr 2fr;
}

/* ===== ADDRESS BLOCK ===== */
.q-address-block {
    background: #fafbfc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.q-address-block .q-field {
    margin-bottom: 14px;
}

.q-address-block .q-field:last-child {
    margin-bottom: 0;
}

.q-address-block .q-grid {
    margin-bottom: 14px;
}

.q-address-block .q-grid:last-child {
    margin-bottom: 0;
}

.q-address-hint {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
    font-style: italic;
}

.q-date-selects {
    display: flex;
    gap: 8px;
}

.q-date-selects .q-input--sm {
    flex: 1;
}

.q-separator {
    height: 1px;
    background: #e5e7eb;
    margin: 24px 0;
}

.q-btn-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn--active {
    background: #059669 !important;
    color: white !important;
    border-color: #059669 !important;
}

/* ===== MAIN LAYOUT ===== */
.q-main {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px 60px;
}

.q-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    width: 100%;
}

/* ===== STEP CONTENT ===== */
.q-step__content {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow);
}

.q-step__content--narrow {
    max-width: 560px;
    margin: 0 auto;
}

.q-step__text {
    font-size: 15px;
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 16px;
}

.q-step__subtitle {
    font-size: 13px;
    font-weight: 600;
    color: var(--red);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
}

.q-step__section-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 28px 0 16px;
    padding-top: 20px;
    border-top: 1px solid var(--gray-200);
}

.q-step__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
    gap: 16px;
}

.q-step__actions--center {
    justify-content: center;
}

/* ===== NOTICE BOX ===== */
.q-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 16px;
    margin: 20px 0;
}

.q-notice__icon {
    flex-shrink: 0;
    color: #3b82f6;
    margin-top: 2px;
}

.q-notice__text {
    font-size: 14px;
    color: #1e40af;
    line-height: 1.6;
}

/* ===== REQUIRED MARK ===== */
.q-required {
    color: var(--red);
    font-weight: 700;
}

/* ===== DYNAMIC LIST ===== */
.q-dynamic-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

/* ===== ADD BUTTON (btn variant) ===== */
.q-btn-add {
    width: 100%;
    margin-bottom: 16px;
}

/* ===== CARD BUTTONS ===== */
.q-card__btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--gray-500);
    transition: all 0.2s ease;
    background: var(--gray-50);
    border: none;
    cursor: pointer;
}

.q-card__btn:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.q-card__btn--delete:hover {
    background: #fef2f2;
    color: var(--red);
}

/* ===== INPUT SMALL ===== */
.q-input--sm {
    padding: 10px 12px;
    font-size: 14px;
}

/* ===== CHECKBOX CONFIRM ===== */
.q-checkbox--confirm {
    background: var(--gray-50);
    padding: 16px;
    border-radius: 10px;
    border: 1px solid var(--gray-200);
    margin-top: 20px;
}

/* ===== SUCCESS INNER (legacy, now using __card) ===== */
.q-success__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===== SUCCESS MOBILE ===== */
@media (max-width: 640px) {
    .q-success {
        padding: 24px 0 40px;
    }
    .q-success__card {
        padding: 36px 20px 32px;
        border-radius: 16px;
        margin: 0 8px;
    }
    .q-success__icon {
        width: 64px;
        height: 64px;
        margin-bottom: 20px;
    }
    .q-success__icon svg {
        width: 36px;
        height: 36px;
    }
    .q-success__title {
        font-size: 22px;
    }
    .q-success__steps {
        padding: 16px 18px;
    }
}

/* ===== RESTORE MODAL ===== */
.q-restore-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

.q-restore-modal__content {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 32px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.q-restore-modal__content h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.q-restore-modal__content p {
    font-size: 14px;
    color: var(--gray-500);
    margin-bottom: 20px;
}

.q-restore-modal__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* ===== CHAR COUNTER ===== */
.q-char-counter {
    font-size: 12px;
    color: var(--gray-400);
    text-align: right;
    margin-top: 4px;
}

.q-char-counter--warn {
    color: #f59e0b;
}

.q-char-counter--over {
    color: var(--red);
}

/* ===== PREV BUTTON ===== */
.q-btn-prev {
    /* inherits from .btn .btn--outline */
}

/* ===== CARD BODY ===== */
.q-card__body {
    margin-top: 12px;
}

.q-card__body--collapsed {
    display: none;
}

/* ===== CARD TYPE CLASSES ===== */
.q-employment-card,
.q-trip-card,
.q-education-card {
    /* Card type identifiers — inherit from .q-card */
}

/* ===== CARD EDIT BUTTON ===== */
.q-card__btn--edit:hover {
    background: #eff6ff;
    color: #3b82f6;
}

/* ===== ERROR MESSAGES ===== */
.q-error-msg {
    font-size: 13px;
    color: var(--red);
    margin-top: 4px;
    line-height: 1.4;
    display: block;
}

.q-submit-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 16px;
    margin-top: 16px;
    font-size: 14px;
    color: #b91c1c;
    line-height: 1.5;
    text-align: center;
}

/* ===== CHAR COUNT (JS variant) ===== */
.q-char-count {
    font-size: 12px;
    color: var(--gray-400);
    text-align: right;
    margin-top: 4px;
}

.q-char-count--warning {
    color: #f59e0b;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
    .q-grid--2,
    .q-grid--2-1,
    .q-grid--1-2 {
        grid-template-columns: 1fr;
    }

    .q-address-block {
        padding: 14px;
    }

    .q-container {
        padding: 16px;
    }

    .q-header {
        padding: 0 16px;
    }

    .q-step__title {
        font-size: 20px;
    }

    .q-step__desc {
        font-size: 14px;
    }

    .q-intro__title {
        font-size: 22px;
    }

    .q-intro__text {
        font-size: 14px;
    }

    .q-intro__icon {
        font-size: 44px;
    }

    .q-radio-group {
        flex-direction: column;
    }

    .q-radio span {
        width: 100%;
        justify-content: center;
    }

    .q-nav {
        flex-direction: column-reverse;
    }

    .q-btn-back,
    .q-btn-next,
    .q-btn-submit {
        width: 100%;
    }

    .q-date-group {
        flex-direction: column;
        gap: 8px;
    }

    .q-review__row {
        flex-direction: column;
        gap: 2px;
    }

    .q-review__value {
        text-align: left;
    }

    .q-progress {
        padding: 14px 12px 18px;
    }

    .q-progress__bar {
        width: calc(100% - 16px);
        margin-bottom: 12px;
        height: 3px;
    }

    .q-progress__fill::after {
        width: 6px;
        height: 6px;
        top: -1.5px;
    }

    .q-progress__steps::before {
        left: 14px;
        right: 14px;
        top: 14px;
        height: 1.5px;
    }

    .q-progress__step {
        width: 28px;
        height: 28px;
        font-size: 10px;
        border-width: 2px;
    }

    .q-progress__step--active {
        transform: scale(1.08);
        box-shadow: 0 0 0 3px rgba(227, 24, 55, 0.1);
    }

    .q-autosave {
        bottom: 16px;
        right: 16px;
        left: 16px;
        text-align: center;
    }

    .q-card {
        padding: 16px;
    }

    .q-input,
    .q-select,
    .q-textarea {
        font-size: 16px; /* prevent iOS zoom */
    }

    .q-main {
        padding: 0 16px 40px;
    }

    .q-step__content {
        padding: 20px 16px;
    }

    .q-step__actions {
        flex-direction: column-reverse;
    }

    .q-step__actions .btn {
        width: 100%;
    }

    .q-step__section-title {
        font-size: 15px;
    }

    .q-progress__step-label {
        display: none;
    }
}

/* ===== PROGRESS STEP WRAPPERS & LABELS ===== */
.q-progress__step-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.q-progress__step-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-400);
    white-space: nowrap;
    letter-spacing: 0.01em;
    transition: color 0.3s ease;
}

/* Highlight label for active step */
.q-progress__step-wrapper:has(.q-progress__step--active) .q-progress__step-label,
.q-progress__wrapper--active .q-progress__step-label {
    color: var(--red);
    font-weight: 700;
}

.q-progress__step-wrapper:has(.q-progress__step--done) .q-progress__step-label,
.q-progress__wrapper--done .q-progress__step-label {
    color: var(--success);
}

/* ===== NOTICE INFO VARIANT ===== */
.q-notice--info {
    background: #eff6ff;
    border-color: #bfdbfe;
}

/* ===== GAP WARNING BLOCKING ===== */
.q-gap-warning--blocking {
    background: #fef2f2;
    border-left-color: var(--red);
    color: #991b1b;
    animation: q-shake 0.5s ease;
}

@keyframes q-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* ===== ERROR FLASH ===== */
.q-input--error-flash {
    background-color: #fef2f2 !important;
    transition: background-color 0.3s ease;
}

@keyframes q-errorFlash {
    0% { background-color: #fef2f2; }
    100% { background-color: var(--white); }
}

/* ===== v23 fixes ===== */
/* a finished step shows only the tick (the number was showing next to it) */
.q-progress__step--done { font-size: 0; }
.q-progress__step--done::after { font-size: 15px; line-height: 1; }
/* «saved» is a quiet note at the top, not a black pill over the fields */
.q-autosave { top: 84px; bottom: auto; right: 16px; left: auto; padding: 6px 12px; background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; font-size: 12.5px; font-weight: 600; box-shadow: 0 6px 16px -10px rgba(4, 120, 87, .5); transform: translateY(-6px); }
.q-autosave::before { content: '✓ '; }
.q-autosave--visible { transform: translateY(0); }
@media (max-width: 768px) { .q-autosave { top: 76px; bottom: auto; left: auto; right: 12px; text-align: left; } }
/* the 10-year strip: the pieces the script draws (they had no colour, so the strip stayed grey) */
.q-timeline__segment { height: 100%; transition: width .3s ease; }
.q-timeline__segment--filled { background: var(--success); opacity: .85; }
.q-timeline__segment--gap { background: repeating-linear-gradient(45deg, rgba(227, 24, 55, .28) 0 6px, rgba(227, 24, 55, .14) 6px 12px); }
.q-timeline__labels span { font-size: 12px; font-weight: 600; color: var(--gray-500); }
/* the «saved» note sits in the empty right side of the header on phones */
@media (max-width: 768px) { .q-autosave { top: 16px; right: 12px; } }

/* ===== v24 · the «continue?» window: in the middle of the screen, on a soft veil ===== */
.q-modal-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(15, 25, 35, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: qFade .25s ease; }
.q-modal { width: min(460px, 100%); padding: 28px 26px 22px; border-radius: 22px; background: #fff; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55); text-align: center; animation: qPop .35s cubic-bezier(.3, 1.4, .5, 1); }
.q-modal__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 12px; border-radius: 16px; background: #FEF2F2; }
.q-modal__icon svg { width: 28px; height: 28px; fill: none; stroke: #E31837; stroke-width: 2; stroke-linejoin: round; }
.q-modal__title { margin: 0 0 8px; font-size: 21px; font-weight: 800; line-height: 1.25; color: #0F1923; }
.q-modal__text { margin: 0; font-size: 15.5px; line-height: 1.55; color: #374151; }
.q-modal__meta { margin: 8px 0 0; font-size: 13px; color: #9CA3AF; }
.q-modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.q-modal__btn { width: 100%; min-height: 48px; margin: 0; justify-content: center; }
.q-modal__actions #restoreYes { order: 2; } .q-modal__actions #restoreNo { order: 1; }
@keyframes qFade { from { opacity: 0; } }
@keyframes qPop { from { opacity: 0; scale: .92; } }
@media (max-width: 420px) { .q-modal__actions { grid-template-columns: 1fr; } .q-modal__actions #restoreYes { order: 1; } .q-modal__actions #restoreNo { order: 2; } }
/* the hover-only «?» did nothing on phones; its words now live in the field's instruction */
.q-help { display: none !important; }
.q-modal__btn:focus { outline: none; }
.q-modal__btn:focus-visible { outline: 3px solid #FECACA; outline-offset: 2px; }
/* v25 · the form card gets air under the step bar (it was pressed right against it) */
.q-main { padding-top: 36px; }
@media (max-width: 768px) { .q-main { padding-top: 20px; } }