/* Wizard and profile. Big targets, plain layout, one thing at a time. */
.fw, .fp { --fw-navy: #14213d; --fw-blue: #2340a6; --fw-red: #d92129; --fw-sky: #2fb4ea; --fw-soft: #eef8fd; --fw-ink: #18213f; --fw-muted: #4a5677; --fw-line: #dfe5ee; --fw-ok: #1f9d55; --fw-ok-soft: #eaf8f0; --fw-warn: #8a5a00; --fw-warn-soft: #fff6dc; color: var(--fw-ink); }
.fw *, .fp * { box-sizing: border-box; }
.fw-card { max-width: 880px; margin: 0 auto; background: #fff; border: 1px solid var(--fw-line); border-radius: 20px; box-shadow: 0 1px 2px rgba(27, 43, 107, .05), 0 12px 32px -16px rgba(27, 43, 107, .18); }
.fw-body { padding: 8px clamp(20px, 4vw, 44px) clamp(24px, 4vw, 40px); }
.fw-i { width: 24px; height: 24px; flex: none; display: block; }

/* Top row and progress */
.fw-top { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 6px clamp(10px, 3vw, 28px) 0; }
.fw-backbtn { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 12px; background: transparent; color: var(--fw-navy); cursor: pointer; }
.fw-backbtn:hover { background: #f3f6fa; }
.fw-h { margin: 28px 0 12px; font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fw-muted); }
.fw-h:first-of-type { margin-top: 4px; }
.fw-count { font-weight: 600; color: var(--fw-muted); font-size: .98rem; padding-right: 8px; }
.fw-title { margin: 0 0 14px; font-size: clamp(1.9rem, 2vw + 1.2rem, 2.6rem); line-height: 1.08; color: var(--fw-navy); outline: none; }
.fw-lead { margin: 0 0 24px; font-size: 1.15rem; color: var(--fw-muted); }
.fw-hint { margin: 6px 0 0; font-size: .98rem; color: var(--fw-muted); }

/* Service tiles */
.fw-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .fw-tiles { grid-template-columns: 1fr; } }
.fw-tile { position: relative; display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 14px 54px 14px 16px; border: 2px solid var(--fw-line); border-radius: 16px; background: #fff; color: var(--fw-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s; }
.fw-tile:hover { border-color: #b9c4d6; }
.fw-tile.is-on { border-color: var(--fw-blue); background: var(--fw-soft); }
.fw-tile-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--fw-soft); color: var(--fw-navy); flex: none; }
.fw-tile.is-on .fw-tile-ico { background: var(--fw-blue); color: #fff; }
.fw-tile-txt { display: grid; gap: 2px; }
.fw-tile-txt strong { font-size: 1.15rem; font-weight: 700; }
.fw-tile-txt small { font-size: .95rem; color: var(--fw-muted); }
.fw-tick { position: absolute; right: 16px; top: 50%; margin-top: -15px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #c3cddc; color: transparent; }
.fw-tile.is-on .fw-tick { background: var(--fw-blue); border-color: var(--fw-blue); color: #fff; }
.fw-tick .fw-i { width: 18px; height: 18px; stroke-width: 3; }

/* Vehicles */
.fw-vcard { border: 1px solid var(--fw-line); border-radius: 16px; padding: 18px; margin-bottom: 14px; }
.fw-vcard-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.fw-vcard h3 { margin: 0; font-size: 1.25rem; color: var(--fw-navy); }
.fw-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
@media (min-width: 640px) { .fw-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fw-chip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--fw-line); background: #fff; font: inherit; font-weight: 600; color: var(--fw-ink); cursor: pointer; }
.fw-chip.is-on { border-color: var(--fw-blue); background: var(--fw-blue); color: #fff; }
.fw-vread { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 1.05rem; color: var(--fw-ok); }
.fw-vread strong { color: var(--fw-ink); letter-spacing: .03em; }
.fw-add { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 60px; border: 2px dashed #b9c4d6; border-radius: 16px; background: #fff; font: inherit; font-weight: 700; font-size: 1.1rem; color: var(--fw-navy); cursor: pointer; }
.fw-add:hover { border-color: var(--fw-navy); background: var(--fw-soft); }

/* Uploads */
.fw-up { border: 1px solid var(--fw-line); border-radius: 16px; padding: 16px; margin-bottom: 12px; background: #fff; }
.fw-up.has-files { border-color: #bfe3cd; background: #fbfefc; }
.fw-up.is-missing { border-color: var(--fw-red); box-shadow: 0 0 0 3px rgba(217, 33, 41, .12); }
.fw-up-head { display: flex; gap: 14px; align-items: flex-start; }
.fw-up-head h3 { margin: 0 0 2px; font-size: 1.15rem; color: var(--fw-ink); }
.fw-up-head h3 small, .fw-lbl small { font-weight: 500; color: var(--fw-muted); font-size: .85rem; }
.fw-up-head p { margin: 0; color: var(--fw-muted); font-size: .98rem; }
.fw-up-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--fw-soft); color: var(--fw-navy); flex: none; }
.fw-up-done { margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--fw-ok); color: #fff; flex: none; }
.fw-up-done .fw-i { width: 18px; height: 18px; stroke-width: 3; }
.fw-up-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; margin-top: 14px; border-radius: 12px; background: var(--fw-blue); color: #fff; font-weight: 700; font-size: 1.05rem; cursor: pointer; }
.has-files .fw-up-btn { background: #fff; color: var(--fw-navy); border: 2px solid var(--fw-line); }
.fw-up-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fw-up-btn:focus-within { outline: 3px solid var(--fw-sky); outline-offset: 2px; }
.fw-thumbs { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 14px 0 0; padding: 0; }
.fw-thumb { position: relative; width: 96px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--fw-soft); }
.fw-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fw-pdf { display: grid; place-items: center; height: 100%; font-weight: 800; color: var(--fw-navy); }
.fw-thumb-x { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(24, 33, 63, .8); color: #fff; cursor: pointer; }
.fw-thumb-x .fw-i { width: 16px; height: 16px; }
.fw-status { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 1rem; font-weight: 600; }
.fw-status.is-ok { color: var(--fw-ok); }
.fw-status.is-warn { color: var(--fw-warn); background: var(--fw-warn-soft); padding: 10px 12px; border-radius: 10px; font-weight: 500; }
.fw-status.is-busy { color: var(--fw-muted); }
.fw-spin { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--fw-line); border-top-color: var(--fw-navy); animation: fw-spin .8s linear infinite; flex: none; }
@keyframes fw-spin { to { transform: rotate(360deg); } }
.fw-seg { display: inline-flex; padding: 4px; border-radius: 14px; background: #eef1f6; margin-bottom: 12px; }
.fw-seg button { min-height: 48px; padding: 0 18px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-weight: 700; color: var(--fw-muted); cursor: pointer; }
.fw-seg button.is-on { background: #fff; color: var(--fw-navy); box-shadow: 0 1px 3px rgba(24, 33, 63, .15); }

/* Fields */
.fw-sec { padding: 22px 0; border-top: 1px solid var(--fw-line); }
.fw-sec:first-of-type { border-top: 0; padding-top: 0; }
.fw-sec h3 { margin: 0 0 14px; font-size: 1.3rem; color: var(--fw-navy); }
.fw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
@media (max-width: 640px) { .fw-grid { grid-template-columns: 1fr; } }
.fw-field { display: grid; gap: 6px; align-content: start; }
.fw-field.is-wide, .fw-derived { grid-column: 1 / -1; }
.fw-lbl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 700; font-size: 1.02rem; }
.fw-read { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; font-weight: 600; color: var(--fw-ok); background: var(--fw-ok-soft); padding: 2px 8px 2px 6px; border-radius: 999px; }
.fw-read .fw-i { width: 14px; height: 14px; }
.fw-input { width: 100%; min-height: 58px; padding: 0 16px; border: 2px solid var(--fw-line); border-radius: 12px; background: #fff; font: inherit; font-size: 1.15rem; color: var(--fw-ink); }
textarea.fw-input { padding: 14px 16px; min-height: 120px; }
select.fw-input { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b2b6b' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 20px; padding-right: 44px; }
.fw-input:focus { outline: none; border-color: var(--fw-blue); box-shadow: 0 0 0 4px rgba(47, 180, 234, .25); }
.fw-plate { text-transform: uppercase; font-weight: 700; letter-spacing: .06em; }
.fw-mono { text-transform: uppercase; letter-spacing: .04em; }
.fw-err { color: var(--fw-red); font-size: .95rem; font-weight: 600; min-height: 0; margin: 0; }
.fw-err:empty { display: none; }
.fw-derived { display: flex; align-items: center; gap: 8px; margin: -6px 0 0; color: var(--fw-ok); font-weight: 600; }
.fw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; }

/* Sign */
.fw-forms { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.fw-forms li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.fw-forms .fw-i { color: var(--fw-navy); }
.fw-pad { position: relative; border: 2px dashed #b9c4d6; border-radius: 16px; background: #fbfcfe; margin-bottom: 18px; }
.fw-pad canvas { display: block; width: 100%; height: 220px; touch-action: none; cursor: crosshair; }
.fw-pad-hint { position: absolute; left: 0; right: 0; top: 50%; margin-top: -14px; text-align: center; font-size: 1.2rem; color: #9aa6ba; pointer-events: none; }
.fw-pad.has-ink .fw-pad-hint { display: none; }
.fw-pad-clear { position: absolute; right: 12px; top: 10px; }
.fw-agree { display: flex; gap: 14px; align-items: flex-start; margin: 20px 0 0; padding: 16px; border-radius: 14px; background: #f5f7fb; font-size: 1.05rem; cursor: pointer; }
.fw-agree input { width: 26px; height: 26px; margin: 0; flex: none; accent-color: var(--fw-navy); }

/* Review */
.fw-review { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .fw-review { grid-template-columns: 1fr; } }
.fw-review h3 { margin: 0 0 4px; font-size: 1.3rem; color: var(--fw-navy); }
.fw-preview { margin: 14px 0; max-height: 70vh; overflow: auto; padding: 12px; border-radius: 14px; background: #e9edf3; }
.fw-page { background: #fff; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(24, 33, 63, .2); }
.fw-page canvas { display: block; }
.fw-row { display: flex; flex-wrap: wrap; gap: 10px; }
.fw-est { padding: 20px; border-radius: 16px; background: #f5f7fb; }
.fw-est dl { margin: 12px 0 0; }
.fw-est dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--fw-line); font-size: 1rem; }
.fw-est dd { margin: 0; font-weight: 700; white-space: nowrap; }
.fw-est-total { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 0; }
.fw-est-total span { font-weight: 700; }
.fw-est-total strong { font-size: 2.2rem; color: var(--fw-navy); }

/* Buttons and bar */
.fw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 24px; border-radius: 14px; border: 2px solid transparent; font: inherit; font-size: 1.12rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.fw-btn--go { background: var(--fw-blue); color: #fff; }
.fw-btn--go:hover { background: #1b3285; color: #fff; }
.fw-btn--go[aria-disabled="true"] { background: #a9b6dd; }
.fw-btn--go.is-submit { background: var(--fw-ok); }
.fw-btn--go.is-submit[aria-disabled="true"] { background: #9ccfb2; }
.fw-btn--ghost { background: #fff; color: var(--fw-navy); border-color: var(--fw-line); }
.fw-btn--ghost:hover { border-color: var(--fw-navy); }
.fw-btn--back { background: transparent; color: var(--fw-navy); padding: 0 14px; }
.fw-btn--wa { background: #25d366; color: #073b1d; }
.fw-link { background: none; border: 0; padding: 6px; font: inherit; font-weight: 700; color: var(--fw-navy); text-decoration: underline; cursor: pointer; }
.fw-bar { position: sticky; bottom: 0; z-index: 5; background: rgba(255, 255, 255, .97); border-top: 1px solid var(--fw-line); border-radius: 0 0 20px 20px; }
.fw-prog { height: 4px; background: var(--fw-line); }
.fw-prog span { display: block; height: 4px; background: var(--fw-blue); transition: width .3s; }
.fw-bar-in { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px clamp(16px, 4vw, 44px) 14px; }
.fw-bar-what { display: grid; min-width: 0; }
.fw-bar-what strong { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-bar-what small { font-size: .9rem; color: var(--fw-muted); }
.fw-bar .fw-btn--go { min-width: 170px; flex: none; }
@media (max-width: 480px) { .fw-bar .fw-btn--go { min-width: 130px; } }
.fw-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 100; max-width: calc(100% - 32px); padding: 14px 20px; border-radius: 12px; background: var(--fw-ink, #18213f); color: #fff; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }

/* Done */
.fw-done { padding: clamp(28px, 5vw, 56px); text-align: center; }
.fw-done-ico { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--fw-ok); color: #fff; margin-bottom: 14px; }
.fw-done-ico .fw-i { width: 40px; height: 40px; stroke-width: 3; }
.fw-done h2 { margin: 0 0 8px; font-size: 2.4rem; color: var(--fw-navy); }
.fw-next { max-width: 460px; margin: 0 auto 26px; padding-left: 1.2em; text-align: left; font-size: 1.1rem; line-height: 1.7; }
.fw-done .fw-row { justify-content: center; }

/* Profile */
.fp-card { max-width: 560px; padding: clamp(22px, 4vw, 40px); }
.fp-card.fp-me { max-width: 760px; }
.fp-btn, .fp-new { width: 100%; margin-top: 18px; }
.fp-foot { margin-top: 18px; text-align: center; }
.fp-last4, .fp-code { font-size: 1.6rem; letter-spacing: .35em; font-weight: 700; }
.fp-hello { display: flex; justify-content: space-between; align-items: center; }
.fp-h { margin: 30px 0 12px; font-size: 1.25rem; color: var(--fw-navy); }
.fp-apps, .fp-veh { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fp-app { padding: 16px; border: 1px solid var(--fw-line); border-radius: 14px; }
.fp-app-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.fp-app-top strong { display: block; font-size: 1.1rem; }
.fp-app-top span { color: var(--fw-muted); font-size: .95rem; }
.fp-pill { flex: none; padding: 4px 12px; border-radius: 999px; background: var(--fw-soft); color: var(--fw-navy) !important; font-weight: 700; font-size: .9rem !important; }
.fp-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; list-style: none; margin: 14px 0 0; padding: 0; font-size: .78rem; color: var(--fw-muted); }
.fp-track li { padding-top: 10px; border-top: 5px solid var(--fw-line); }
.fp-track li.is-done { border-color: var(--fw-blue); }
.fp-track li.is-now { border-color: var(--fw-red); color: var(--fw-ink); font-weight: 700; }
.fp-veh li { padding: 12px 16px; border-radius: 12px; background: #f5f7fb; }
.fp-del { margin-top: 30px; }
.fp-del summary { cursor: pointer; font-weight: 700; color: var(--fw-muted); }
.fp-del .fw-btn { margin-top: 12px; color: var(--fw-red); }

.fw-vcard .fw-up { margin-bottom: 0; border-style: dashed; }
.fw-letter { margin: 0 0 18px; padding: 16px 18px; border-radius: 14px; background: #f5f7fb; font-size: 1.08rem; line-height: 1.55; }