:root { --ink:#202a2e; --muted:#69777d; --line:#d8e0e3; --paper:#fff; --canvas:#f2f6f7; --accent:#1d6f73; --accent-dark:#155356; --soft:#e7f1f0; --danger:#b42318; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:var(--accent); }
.container { max-width:1280px; margin:auto; padding:0 24px; }
.navbar { display:none; }
.hero { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:46px 0 28px; }
.eyebrow { color:var(--accent); font-size:.78rem; font-weight:800; letter-spacing:.12em; margin:0 0 8px; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(2rem,4vw,3.1rem); letter-spacing:-.04em; margin-bottom:10px; }
h2 { font-size:1.2rem; margin-bottom:4px; }
h3 { font-size:1rem; margin-bottom:16px; }
.lead,.section-heading p,.muted { color:var(--muted); }
.lead { margin:0; }
.page-grid { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:24px; padding-bottom:48px; }
.form-shell,.recent-panel { background:var(--paper); border:1px solid var(--line); border-radius:18px; box-shadow:0 8px 30px #1a3a3d0b; }
.form-section { padding:28px; border-bottom:1px solid var(--line); }
.form-section:last-of-type { border-bottom:0; }
.section-heading { display:flex; gap:14px; margin-bottom:24px; }
.section-number { align-items:center; background:var(--soft); border-radius:50%; color:var(--accent-dark); display:flex; flex:0 0 34px; font-weight:800; height:34px; justify-content:center; }
.section-heading p { font-size:.9rem; margin:0; }
.field-grid { display:grid; gap:18px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.field-grid.compact { gap:14px; }
.field-wide { grid-column:1/-1; }
.field label { display:inline-block; font-size:.84rem; font-weight:700; margin-bottom:7px; }
.required { color:var(--danger); margin-left:4px; }
input,select,textarea { background:#fff; border:1px solid #bdc9cc; border-radius:9px; color:var(--ink); font:inherit; min-height:44px; padding:10px 12px; width:100%; }
.measurement-card > .field > label,
.measurement-card .compact .field > label { display:block; line-height:1.2; min-height:2.4em; }
.measurement-input { display:grid; gap:8px; grid-template-columns:minmax(0,1fr) 76px; }
.measurement-input input,
.measurement-input select { height:44px; min-width:0; }
.measurement-card > .field { margin-bottom:18px; }
.measurement-card > .field:last-child { margin-bottom:0; }
.measurement-card .compact { align-items:start; }
.height-fields { display:grid; gap:14px; }
textarea { resize:vertical; }
input:focus,select:focus,textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px #1d6f7320; outline:0; }
.field span[data-valmsg-for] { color:var(--danger); display:block; font-size:.76rem; margin-top:5px; }
.measurement-layout { display:grid; gap:20px; grid-template-columns:minmax(240px,.8fr) minmax(0,1.5fr); }
.measurement-card,.details-card { background:#f8fafb; border:1px solid var(--line); border-radius:12px; padding:20px; }
.details-card { background:#fff; }
.form-actions { display:flex; gap:12px; padding:24px 28px 28px; }
.add-panel-row { align-items:center; display:flex; flex-wrap:wrap; gap:12px; padding:0 28px 28px; }
.button { border:0; border-radius:9px; cursor:pointer; display:inline-flex; font:700 .92rem inherit; justify-content:center; padding:13px 18px; text-decoration:none; }
.button-primary { background:var(--accent); color:#fff; }
.button-primary:hover { background:var(--accent-dark); color:#fff; }
.button-secondary { background:#edf2f2; color:var(--ink); }
.alert { border-radius:9px; margin:20px 28px 0; padding:13px 15px; }
.alert:empty { display:none; }
.alert.error { background:#fff3f1; color:var(--danger); }
.alert.success { background:#e6f5eb; color:#17633a; }
.recent-panel { align-self:start; padding:24px; position:sticky; top:20px; }
.recent-list { list-style:none; margin:0; padding:0; }
.recent-list li { border-top:1px solid var(--line); }
.recent-list a { display:block; padding:14px 0; text-decoration:none; }
.recent-list strong,.recent-list span { display:block; }
.recent-list span { color:var(--muted); font-size:.8rem; margin-top:4px; }
.check-row { align-items:center; display:flex; gap:10px; font-weight:600; }
.check-row input { min-height:auto; width:auto; }
.photo-upload { border:1px dashed #aebfc2; border-radius:12px; margin-top:22px; padding:18px; }
.photo-upload > label { display:block; font-weight:800; margin-bottom:5px; }
.upload-help { color:var(--muted); font-size:.86rem; margin-bottom:12px; }
.photo-upload input[type=file] { background:#f8fafb; padding:9px; }
.photo-actions { display:flex; flex-wrap:wrap; gap:10px; }
.visually-hidden { height:1px; opacity:0; overflow:hidden; position:absolute; width:1px; }
.selected-photos { color:var(--muted); font-size:.82rem; margin-top:10px; }
.photo-upload span[data-valmsg-for] { color:var(--danger); display:block; font-size:.8rem; margin-top:6px; }
.photo-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); margin-top:18px; }
.photo-grid a { color:var(--ink); font-size:.75rem; overflow:hidden; text-decoration:none; }
.photo-grid img { aspect-ratio:4/3; border:1px solid var(--line); border-radius:9px; display:block; object-fit:cover; width:100%; }
.photo-grid span { display:block; overflow:hidden; padding-top:5px; text-overflow:ellipsis; white-space:nowrap; }
.footer { display:none; }
@media (max-width:900px) { .page-grid { grid-template-columns:1fr; } .recent-panel { position:static; } }
@media (max-width:640px) { .container { padding:0 14px; } .hero { align-items:stretch; flex-direction:column; padding-top:28px; } .hero .button { width:100%; } .field-grid,.measurement-layout { grid-template-columns:1fr; } .field-wide { grid-column:auto; } .form-section { padding:20px 16px; } .form-actions { flex-direction:column; padding:20px 16px; } .button { width:100%; } }
@media print { body { background:#fff; font-size:10pt; } .container { max-width:none; padding:0; } .hero { padding:0 0 16px; } .hero .button,.no-print,.recent-panel { display:none!important; } .form-shell { border:0; box-shadow:none; } .form-section { break-inside:avoid; padding:14px 0; } .measurement-card,.details-card { padding:12px; } input,select,textarea { border:0; min-height:0; padding:0; } textarea { height:auto; } .field-grid { gap:8px; } h1 { font-size:22pt; } }