software-engineering/policy-ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP jordan

Browse Source
This commit is contained in:
Jordan Weingarten
2026-04-16 11:11:44 -05:00
parent ff2d7b18b5
commit 67482f6629
163 changed files with 50627 additions and 728 deletions
Download Patch File Download Diff File Expand all files Collapse all files

672
app/pages/claims/intake/[token].vue Normal file
View File

@@ -0,0 +1,672 @@
<script setup lang="ts">
definePageMeta({ ssr: false, layout: false })
const route = useRoute()
const token = route.params.token as string
// ── Mock claim lookup by token ────────────────────────────────────────────────
interface IntakeClaim {
id: string
customerName: string
policyNumber: string
carrier: string
lob: 'Auto' | 'Life' | 'General Risk' | 'Home'
handler: string
expiresAt: string
}
const MOCK_TOKENS: Record<string, IntakeClaim> = {
'tk_hp_048_a3f1': { id: 'CLM-0048', customerName: 'Hotel Pacífico S.A.', policyNumber: 'PROP-2024-HP-001', carrier: 'ASSA', lob: 'General Risk', handler: 'Ana R.', expiresAt: '2026-04-09T14:30:00Z' },
'tk_abc_047_b7e2': { id: 'CLM-0047', customerName: 'Empresa ABC S.A.', policyNumber: 'AUTO-2024-FLEET-007', carrier: 'Qualitas', lob: 'Auto', handler: 'Ana R.', expiresAt: '2026-04-07T11:00:00Z' },
'tk_st_043_c9d4': { id: 'CLM-0043', customerName: 'Supermercado Tico S.A.', policyNumber: 'GL-2023-ST-001', carrier: 'Mapfre', lob: 'General Risk', handler: 'Marco V.', expiresAt: '2026-03-20T16:00:00Z' },
'demo-auto': { id: 'CLM-DEMO-A', customerName: 'Demo Auto Client', policyNumber: 'AUTO-DEMO-001', carrier: 'ASSA', lob: 'Auto', handler: 'Ana R.', expiresAt: '2026-12-31T23:59:00Z' },
'demo-life': { id: 'CLM-DEMO-L', customerName: 'Demo Life Client', policyNumber: 'LIFE-DEMO-001', carrier: 'Pan-American Life', lob: 'Life', handler: 'Ana R.', expiresAt: '2026-12-31T23:59:00Z' },
}
const claim = computed(() => MOCK_TOKENS[token] ?? null)
const expired = computed(() => {
if (!claim.value) return false
return new Date(claim.value.expiresAt) < new Date()
})
// ── Steps ─────────────────────────────────────────────────────────────────────
const currentStep = ref(0)
const submitted = ref(false)
const steps = computed(() => {
const base = [
{ id: 'incident', label: 'Incident Details' },
{ id: 'parties', label: claim.value?.lob === 'Auto' ? 'Vehicles & Parties' : claim.value?.lob === 'Life' ? 'Patient & Provider' : 'Property & Parties' },
{ id: 'documents', label: 'Documents & Photos' },
{ id: 'review', label: 'Review & Submit' },
]
return base
})
function nextStep() { if (currentStep.value < steps.value.length - 1) currentStep.value++ }
function prevStep() { if (currentStep.value > 0) currentStep.value-- }
function submitForm() { submitted.value = true }
// ── Form data ─────────────────────────────────────────────────────────────────
const form = reactive({
// Step 1: Incident
incidentDate: '',
incidentTime: '',
incidentLocation: '',
incidentDescription: '',
// Step 2: Auto-specific
vehicleMake: '',
vehicleModel: '',
vehicleYear: '',
vehiclePlate: '',
vehicleColor: '',
otherDriverName: '',
otherDriverPhone: '',
otherDriverInsurance: '',
otherDriverPlate: '',
witnessName: '',
witnessPhone: '',
// Step 2: Life-specific
patientName: '',
patientDob: '',
patientCedula: '',
providerName: '',
providerAddress: '',
diagnosis: '',
treatmentDates: '',
// Step 2: Property/General Risk
propertyAddress: '',
propertyType: '',
damageDescription: '',
emergencyServicesCalled: false,
thirdPartyInvolved: false,
// Step 3: Documents
photoDescriptions: [] as string[],
hasSignedFud: false,
additionalNotes: '',
})
// ── Photo uploads (mock) ──────────────────────────────────────────────────────
const photoSlots = computed(() => {
if (!claim.value) return []
if (claim.value.lob === 'Auto') return [
{ id: 'front', label: 'Front of vehicle' },
{ id: 'rear', label: 'Rear of vehicle' },
{ id: 'left', label: 'Left side' },
{ id: 'right', label: 'Right side' },
{ id: 'damage', label: 'Close-up of damage' },
{ id: 'fud', label: 'FUD firmado — foto del documento (si aplica)', optional: true },
]
if (claim.value.lob === 'Life') return [
{ id: 'prescription', label: 'Medical prescription' },
{ id: 'referral', label: 'Specialist referral' },
{ id: 'records', label: 'Medical records' },
]
return [
{ id: 'damage1', label: 'Damage photo 1' },
{ id: 'damage2', label: 'Damage photo 2' },
{ id: 'damage3', label: 'Additional photos' },
{ id: 'report', label: 'Fire/police report (if available)', optional: true },
]
})
const uploadedPhotos = ref<Record<string, boolean>>({})
function mockUpload(slotId: string) { uploadedPhotos.value[slotId] = true }
</script>
<template>
<div class="ci-page">
<!-- Segur-OS branding bar -->
<div class="ci-brand-bar">
<span class="ci-brand-logo">Segur-OS</span>
<span class="ci-brand-tag">Client Intake Form</span>
</div>
<!-- Invalid / expired token -->
<template v-if="!claim">
<div class="ci-error">
<div class="ci-error-icon">!</div>
<h2>Invalid Link</h2>
<p>This intake form link is invalid or has expired. Please contact your broker for a new link.</p>
</div>
</template>
<template v-else-if="expired">
<div class="ci-error">
<div class="ci-error-icon">⏱</div>
<h2>Link Expired</h2>
<p>This intake form link expired on {{ new Date(claim.expiresAt).toLocaleDateString() }}. Please contact your broker to request a new link.</p>
</div>
</template>
<!-- Success state -->
<template v-else-if="submitted">
<div class="ci-success">
<div class="ci-success-icon">✓</div>
<h2>Thank You</h2>
<p>Your claim information for <strong>{{ claim.id }}</strong> has been submitted successfully.</p>
<p class="ci-success-sub">Your broker {{ claim.handler }} will review the information and follow up with you shortly.</p>
</div>
</template>
<!-- Main form -->
<template v-else>
<!-- Claim context header -->
<div class="ci-context">
<div class="ci-context-left">
<h1 class="ci-context-title">{{ claim.customerName }}</h1>
<p class="ci-context-meta">{{ claim.id }} · {{ claim.policyNumber }} · {{ claim.carrier }}</p>
</div>
<div class="ci-context-right">
<span class="ci-context-lob">{{ claim.lob }}</span>
</div>
</div>
<!-- Step indicator -->
<div class="ci-steps">
<div
v-for="(step, idx) in steps"
:key="step.id"
class="ci-step"
:class="{
'ci-step-done': idx < currentStep,
'ci-step-active': idx === currentStep,
'ci-step-pending': idx > currentStep,
}"
>
<div class="ci-step-circle">
<span v-if="idx < currentStep">✓</span>
<span v-else>{{ idx + 1 }}</span>
</div>
<span class="ci-step-label">{{ step.label }}</span>
</div>
</div>
<!-- Step content -->
<div class="ci-card">
<!-- ═══ Step 1: Incident Details ═══ -->
<template v-if="currentStep === 0">
<h2 class="ci-section-title">Incident Details</h2>
<p class="ci-section-desc">When and where did the incident occur?</p>
<div class="ci-field-grid">
<div class="ci-field">
<label class="ci-label">Date of Incident</label>
<input v-model="form.incidentDate" type="date" class="ci-input" />
</div>
<div class="ci-field">
<label class="ci-label">Time (approximate)</label>
<input v-model="form.incidentTime" type="time" class="ci-input" />
</div>
</div>
<div class="ci-field">
<label class="ci-label">Location</label>
<input v-model="form.incidentLocation" type="text" class="ci-input" placeholder="Street address, intersection, or description" />
</div>
<div class="ci-field">
<label class="ci-label">Description of what happened</label>
<textarea v-model="form.incidentDescription" class="ci-textarea" rows="4" placeholder="Describe the incident in detail..." />
</div>
</template>
<!-- ═══ Step 2: Auto ═══ -->
<template v-if="currentStep === 1 && claim.lob === 'Auto'">
<h2 class="ci-section-title">Vehicles & Parties</h2>
<p class="ci-section-desc">Your vehicle and other parties involved.</p>
<h3 class="ci-subsection">Your Vehicle</h3>
<div class="ci-field-grid">
<div class="ci-field">
<label class="ci-label">Make</label>
<input v-model="form.vehicleMake" type="text" class="ci-input" placeholder="Toyota" />
</div>
<div class="ci-field">
<label class="ci-label">Model</label>
<input v-model="form.vehicleModel" type="text" class="ci-input" placeholder="Hilux" />
</div>
<div class="ci-field">
<label class="ci-label">Year</label>
<input v-model="form.vehicleYear" type="text" class="ci-input" placeholder="2024" />
</div>
<div class="ci-field">
<label class="ci-label">Plate</label>
<input v-model="form.vehiclePlate" type="text" class="ci-input" placeholder="ABC-123" />
</div>
</div>
<div class="ci-field">
<label class="ci-label">Color</label>
<input v-model="form.vehicleColor" type="text" class="ci-input" placeholder="White" />
</div>
<h3 class="ci-subsection">Other Driver</h3>
<div class="ci-field-grid">
<div class="ci-field">
<label class="ci-label">Name</label>
<input v-model="form.otherDriverName" type="text" class="ci-input" />
</div>
<div class="ci-field">
<label class="ci-label">Phone</label>
<input v-model="form.otherDriverPhone" type="tel" class="ci-input" />
</div>
</div>
<div class="ci-field-grid">
<div class="ci-field">
<label class="ci-label">Insurance Company</label>
<input v-model="form.otherDriverInsurance" type="text" class="ci-input" />
</div>
<div class="ci-field">
<label class="ci-label">Plate Number</label>
<input v-model="form.otherDriverPlate" type="text" class="ci-input" />
</div>
</div>
<h3 class="ci-subsection">Witness (if any)</h3>
<div class="ci-field-grid">
<div class="ci-field">
<label class="ci-label">Name</label>
<input v-model="form.witnessName" type="text" class="ci-input" />
</div>
<div class="ci-field">
<label class="ci-label">Phone</label>
<input v-model="form.witnessPhone" type="tel" class="ci-input" />
</div>
</div>
</template>
<!-- ═══ Step 2: Life ═══ -->
<template v-if="currentStep === 1 && claim.lob === 'Life'">
<h2 class="ci-section-title">Patient & Provider</h2>
<p class="ci-section-desc">Information about the patient and medical provider.</p>
<h3 class="ci-subsection">Patient Information</h3>
<div class="ci-field-grid">
<div class="ci-field">
<label class="ci-label">Patient Name</label>
<input v-model="form.patientName" type="text" class="ci-input" />
</div>
<div class="ci-field">
<label class="ci-label">Date of Birth</label>
<input v-model="form.patientDob" type="date" class="ci-input" />
</div>
</div>
<div class="ci-field">
<label class="ci-label">Cédula / ID</label>
<input v-model="form.patientCedula" type="text" class="ci-input" />
</div>
<h3 class="ci-subsection">Medical Provider</h3>
<div class="ci-field">
<label class="ci-label">Provider / Hospital Name</label>
<input v-model="form.providerName" type="text" class="ci-input" />
</div>
<div class="ci-field">
<label class="ci-label">Provider Address</label>
<input v-model="form.providerAddress" type="text" class="ci-input" />
</div>
<div class="ci-field">
<label class="ci-label">Diagnosis</label>
<textarea v-model="form.diagnosis" class="ci-textarea" rows="3" placeholder="Describe the diagnosis or reason for treatment..." />
</div>
<div class="ci-field">
<label class="ci-label">Treatment Dates</label>
<input v-model="form.treatmentDates" type="text" class="ci-input" placeholder="e.g. April 1–5, 2026" />
</div>
</template>
<!-- ═══ Step 2: General Risk / Home ═══ -->
<template v-if="currentStep === 1 && (claim.lob === 'General Risk' || claim.lob === 'Home')">
<h2 class="ci-section-title">Property & Parties</h2>
<p class="ci-section-desc">Details about the affected property.</p>
<div class="ci-field">
<label class="ci-label">Property Address</label>
<input v-model="form.propertyAddress" type="text" class="ci-input" />
</div>
<div class="ci-field">
<label class="ci-label">Property Type</label>
<select v-model="form.propertyType" class="ci-input">
<option value="">Select...</option>
<option value="commercial">Commercial</option>
<option value="residential">Residential</option>
<option value="industrial">Industrial</option>
<option value="other">Other</option>
</select>
</div>
<div class="ci-field">
<label class="ci-label">Damage Description</label>
<textarea v-model="form.damageDescription" class="ci-textarea" rows="4" placeholder="Describe the damage in detail..." />
</div>
<div class="ci-field-row">
<label class="ci-checkbox">
<input v-model="form.emergencyServicesCalled" type="checkbox" />
<span>Emergency services were called (fire, police, ambulance)</span>
</label>
</div>
<div class="ci-field-row">
<label class="ci-checkbox">
<input v-model="form.thirdPartyInvolved" type="checkbox" />
<span>Third parties are involved</span>
</label>
</div>
</template>
<!-- ═══ Step 3: Documents & Photos ═══ -->
<template v-if="currentStep === 2">
<h2 class="ci-section-title">Documents & Photos</h2>
<p class="ci-section-desc">Upload photos and supporting documents. Take clear, well-lit photos.</p>
<div class="ci-photo-grid">
<div v-for="slot in photoSlots" :key="slot.id" class="ci-photo-slot">
<div class="ci-photo-box" :class="{ 'ci-photo-uploaded': uploadedPhotos[slot.id] }" @click="mockUpload(slot.id)">
<template v-if="uploadedPhotos[slot.id]">
<span class="ci-photo-check">✓</span>
</template>
<template v-else>
<span class="ci-photo-plus">+</span>
</template>
</div>
<span class="ci-photo-label">{{ slot.label }}</span>
<span v-if="slot.optional" class="ci-photo-optional">Optional</span>
</div>
</div>
<div class="ci-field" style="margin-top: 20px;">
<label class="ci-label">Additional Notes</label>
<textarea v-model="form.additionalNotes" class="ci-textarea" rows="3" placeholder="Anything else your broker should know..." />
</div>
</template>
<!-- ═══ Step 4: Review & Submit ═══ -->
<template v-if="currentStep === 3">
<h2 class="ci-section-title">Review & Submit</h2>
<p class="ci-section-desc">Please review your information before submitting.</p>
<div class="ci-review-section">
<h3 class="ci-review-heading">Incident</h3>
<div class="ci-review-grid">
<div class="ci-review-item">
<span class="ci-review-label">Date</span>
<span class="ci-review-value">{{ form.incidentDate || '—' }}</span>
</div>
<div class="ci-review-item">
<span class="ci-review-label">Time</span>
<span class="ci-review-value">{{ form.incidentTime || '—' }}</span>
</div>
<div class="ci-review-item ci-review-full">
<span class="ci-review-label">Location</span>
<span class="ci-review-value">{{ form.incidentLocation || '—' }}</span>
</div>
<div class="ci-review-item ci-review-full">
<span class="ci-review-label">Description</span>
<span class="ci-review-value">{{ form.incidentDescription || '—' }}</span>
</div>
</div>
</div>
<div v-if="claim.lob === 'Auto'" class="ci-review-section">
<h3 class="ci-review-heading">Vehicle</h3>
<div class="ci-review-grid">
<div class="ci-review-item">
<span class="ci-review-label">Vehicle</span>
<span class="ci-review-value">{{ form.vehicleYear }} {{ form.vehicleMake }} {{ form.vehicleModel }}</span>
</div>
<div class="ci-review-item">
<span class="ci-review-label">Plate</span>
<span class="ci-review-value">{{ form.vehiclePlate || '—' }}</span>
</div>
<div class="ci-review-item">
<span class="ci-review-label">Other Driver</span>
<span class="ci-review-value">{{ form.otherDriverName || 'Not provided' }}</span>
</div>
</div>
</div>
<div v-if="claim.lob === 'Life'" class="ci-review-section">
<h3 class="ci-review-heading">Patient & Provider</h3>
<div class="ci-review-grid">
<div class="ci-review-item">
<span class="ci-review-label">Patient</span>
<span class="ci-review-value">{{ form.patientName || '—' }}</span>
</div>
<div class="ci-review-item">
<span class="ci-review-label">Provider</span>
<span class="ci-review-value">{{ form.providerName || '—' }}</span>
</div>
<div class="ci-review-item ci-review-full">
<span class="ci-review-label">Diagnosis</span>
<span class="ci-review-value">{{ form.diagnosis || '—' }}</span>
</div>
</div>
</div>
<div v-if="claim.lob === 'General Risk' || claim.lob === 'Home'" class="ci-review-section">
<h3 class="ci-review-heading">Property</h3>
<div class="ci-review-grid">
<div class="ci-review-item">
<span class="ci-review-label">Address</span>
<span class="ci-review-value">{{ form.propertyAddress || '—' }}</span>
</div>
<div class="ci-review-item">
<span class="ci-review-label">Type</span>
<span class="ci-review-value">{{ form.propertyType || '—' }}</span>
</div>
<div class="ci-review-item ci-review-full">
<span class="ci-review-label">Damage</span>
<span class="ci-review-value">{{ form.damageDescription || '—' }}</span>
</div>
</div>
</div>
<div class="ci-review-section">
<h3 class="ci-review-heading">Documents</h3>
<p class="ci-review-photos">{{ Object.values(uploadedPhotos).filter(Boolean).length }} of {{ photoSlots.length }} photos uploaded</p>
</div>
</template>
</div>
<!-- Navigation buttons -->
<div class="ci-nav">
<button v-if="currentStep > 0" class="ci-btn-back" @click="prevStep">
← Back
</button>
<div class="ci-nav-spacer" />
<button v-if="currentStep < steps.length - 1" class="ci-btn-next" @click="nextStep">
Continue →
</button>
<button v-if="currentStep === steps.length - 1" class="ci-btn-submit" @click="submitForm">
Submit Claim Information
</button>
</div>
</template>
<!-- Footer -->
<div class="ci-footer">
<p>Powered by <strong>Segur-OS</strong> · This form does not require a login</p>
</div>
</div>
</template>
<style scoped>
/* =====================================================================
CLIENT INTAKE FORM — mobile-first, no layout, ci- prefix
===================================================================== */
.ci-page {
max-width: 640px;
margin: 0 auto;
padding: 0 16px 48px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: #1a1a1a;
min-height: 100vh;
background: #f8f8f6;
}
/* ── Brand bar ── */
.ci-brand-bar {
display: flex; align-items: center; gap: 10px;
padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,0.06);
margin-bottom: 20px;
}
.ci-brand-logo { font-size: 16px; font-weight: 800; color: #01696f; letter-spacing: -0.02em; }
.ci-brand-tag { font-size: 12px; color: #8a8a86; font-weight: 500; }
/* ── Error / expired ── */
.ci-error { text-align: center; padding: 60px 16px; }
.ci-error-icon { font-size: 40px; margin-bottom: 12px; }
.ci-error h2 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.ci-error p { font-size: 14px; color: #5c5650; line-height: 1.6; }
/* ── Success ── */
.ci-success { text-align: center; padding: 60px 16px; }
.ci-success-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px; border-radius: 50%;
background: rgba(1, 105, 111, 0.1); color: #01696f;
font-size: 28px; font-weight: 700; margin-bottom: 16px;
}
.ci-success h2 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.ci-success p { font-size: 14px; color: #3a3a3a; line-height: 1.6; }
.ci-success-sub { color: #8a8a86; margin-top: 8px; }
/* ── Context header ── */
.ci-context {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; padding: 12px 16px;
background: white; border: 1px solid rgba(0,0,0,0.06);
border-radius: 12px; margin-bottom: 16px;
}
.ci-context-title { font-size: 16px; font-weight: 700; }
.ci-context-meta { font-size: 12px; color: #8a8a86; margin-top: 2px; }
.ci-context-lob {
display: inline-flex; padding: 4px 10px;
border-radius: 8px; font-size: 11px; font-weight: 700;
background: rgba(1, 105, 111, 0.08); color: #01696f;
text-transform: uppercase; letter-spacing: 0.04em;
}
/* ── Step indicator ── */
.ci-steps {
display: flex; gap: 4px; margin-bottom: 20px; overflow-x: auto;
}
.ci-step {
display: flex; align-items: center; gap: 6px; padding: 8px 12px;
border-radius: 8px; font-size: 12px; font-weight: 500;
white-space: nowrap; flex: 1; min-width: 0;
}
.ci-step-circle {
width: 24px; height: 24px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.ci-step-label { overflow: hidden; text-overflow: ellipsis; }
.ci-step-done { color: #01696f; }
.ci-step-done .ci-step-circle { background: #01696f; color: white; }
.ci-step-active { color: #1a1a1a; background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.ci-step-active .ci-step-circle { background: #01696f; color: white; }
.ci-step-pending { color: #8a8a86; }
.ci-step-pending .ci-step-circle { background: rgba(0,0,0,0.06); color: #8a8a86; }
/* ── Card ── */
.ci-card {
background: white; border: 1px solid rgba(0,0,0,0.06);
border-radius: 12px; padding: 20px 16px;
}
/* ── Section ── */
.ci-section-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.ci-section-desc { font-size: 13px; color: #8a8a86; margin-bottom: 20px; }
.ci-subsection { font-size: 14px; font-weight: 600; margin: 20px 0 10px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,0.06); }
/* ── Fields ── */
.ci-field { margin-bottom: 14px; }
.ci-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.ci-field-row { margin-bottom: 12px; }
.ci-label { display: block; font-size: 12px; font-weight: 600; color: #5c5650; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.03em; }
.ci-input {
width: 100%; padding: 10px 12px; border: 1px solid rgba(0,0,0,0.1);
border-radius: 8px; font-size: 14px; color: #1a1a1a;
background: white; transition: border-color 150ms ease;
}
.ci-input:focus { outline: none; border-color: #01696f; }
.ci-textarea {
width: 100%; padding: 10px 12px; border: 1px solid rgba(0,0,0,0.1);
border-radius: 8px; font-size: 14px; color: #1a1a1a;
resize: vertical; font-family: inherit;
}
.ci-textarea:focus { outline: none; border-color: #01696f; }
.ci-checkbox {
display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
font-size: 14px; color: #3a3a3a;
}
.ci-checkbox input { margin-top: 3px; accent-color: #01696f; }
/* ── Photo grid ── */
.ci-photo-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;
}
.ci-photo-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ci-photo-box {
width: 100%; aspect-ratio: 4/3; border: 2px dashed rgba(0,0,0,0.12);
border-radius: 10px; display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all 150ms ease; background: rgba(0,0,0,0.02);
}
.ci-photo-box:hover { border-color: #01696f; background: rgba(1, 105, 111, 0.03); }
.ci-photo-uploaded { border-style: solid; border-color: #01696f; background: rgba(1, 105, 111, 0.06); }
.ci-photo-plus { font-size: 24px; color: #8a8a86; }
.ci-photo-check { font-size: 24px; color: #01696f; font-weight: 700; }
.ci-photo-label { font-size: 11px; color: #5c5650; text-align: center; line-height: 1.3; }
.ci-photo-optional { font-size: 10px; color: #8a8a86; font-style: italic; }
/* ── Review ── */
.ci-review-section { margin-bottom: 20px; }
.ci-review-heading { font-size: 14px; font-weight: 700; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.ci-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ci-review-full { grid-column: 1 / -1; }
.ci-review-item { }
.ci-review-label { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #8a8a86; margin-bottom: 2px; }
.ci-review-value { font-size: 14px; color: #1a1a1a; }
.ci-review-photos { font-size: 13px; color: #5c5650; }
/* ── Navigation ── */
.ci-nav {
display: flex; align-items: center; gap: 12px;
margin-top: 16px; padding: 0 4px;
}
.ci-nav-spacer { flex: 1; }
.ci-btn-back {
padding: 10px 20px; border-radius: 10px; font-size: 14px; font-weight: 600;
background: white; color: #5c5650; border: 1px solid rgba(0,0,0,0.1);
cursor: pointer;
}
.ci-btn-back:hover { color: #1a1a1a; border-color: rgba(0,0,0,0.2); }
.ci-btn-next {
padding: 10px 24px; border-radius: 10px; font-size: 14px; font-weight: 600;
background: #01696f; color: white; border: none; cursor: pointer;
}
.ci-btn-next:hover { opacity: 0.9; }
.ci-btn-submit {
padding: 12px 28px; border-radius: 10px; font-size: 14px; font-weight: 700;
background: #01696f; color: white; border: none; cursor: pointer;
}
.ci-btn-submit:hover { opacity: 0.9; }
/* ── Footer ── */
.ci-footer {
text-align: center; padding: 24px 0; margin-top: 32px;
border-top: 1px solid rgba(0,0,0,0.06);
font-size: 12px; color: #8a8a86;
}
/* ── Responsive ── */
@media (max-width: 480px) {
.ci-field-grid { grid-template-columns: 1fr; }
.ci-photo-grid { grid-template-columns: repeat(2, 1fr); }
.ci-review-grid { grid-template-columns: 1fr; }
.ci-steps { gap: 2px; }
.ci-step-label { display: none; }
}
</style>