:root { font-family: Arial, Helvetica, sans-serif; color: #1d2926; background: #f6f4ee; }
* { box-sizing: border-box; }
body { margin: 0; }
.account-shell { max-width: 540px; min-height: 100vh; margin: 0 auto; padding: 30px 20px; }
.account-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 38px; }
.account-brand { display: inline-flex; flex: none; align-items: center; }
.brand-logo { display: block; width: 190px; height: 46px; overflow: hidden; }
.brand-logo img { display: block; width: 215px; max-width: none; height: auto; transform: translate(-12px, -14px); }
.back { color: #315e49; font-weight: 700; text-decoration: none; white-space: nowrap; }
.back:hover, a:hover { text-decoration: underline; }
.card { padding: clamp(26px, 6vw, 46px); border: 1px solid #e1e3d9; border-radius: 24px; background: #fffdfa; box-shadow: 0 18px 44px #35553c10; }
.eyebrow { color: #4b7864; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
h1 { margin: 16px 0 14px; font-size: clamp(32px, 7vw, 44px); letter-spacing: -.06em; line-height: 1.1; }
p { color: #67736b; line-height: 1.6; }
form { margin-top: 28px; }
label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 700; }
input { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid #bfc9bf; border-radius: 9px; background: #fff; font: inherit; }
select { width: 100%; min-height: 48px; margin-bottom: 18px; padding: 11px 13px; border: 1px solid #bfc9bf; border-radius: 9px; background: #fff; font: inherit; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid #438565; outline-offset: 2px; }
form > div { margin-bottom: 18px; }
.name-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.name-grid > div { margin-bottom: 0; }
button { width: 100%; min-height: 50px; margin-top: 10px; border: 0; border-radius: 9px; background: #214c3d; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
button:hover { background: #346b52; }
button:disabled { background: #9aaca1; cursor: not-allowed; }
button.secondary { background: #eaf0e9; color: #214c3d; }
.subtle { margin-top: 24px; font-size: 14px; }
a { color: #315e49; }
.error, .invalid-feedback, form ul { color: #9b3131; font-size: 14px; }
.dev-mail-note { padding: 16px; border: 1px solid #d9e3d5; border-radius: 12px; background: #edf3e9; color: #28523d; }
.code-input { height: 76px; margin-top: 8px; text-align: center; font-size: 38px; font-weight: 800; letter-spacing: .22em; font-variant-numeric: tabular-nums; color: #0a2848; border: 2px solid #97cbbd; background: #f4fbf9; }
.code-input:focus-visible { border-color: #00a980; }
.prepare-action { display: flex; align-items: center; gap: 14px; min-height: 112px; margin: 28px 0 34px; padding: 18px; border-radius: 18px; background: linear-gradient(135deg, #0a2848, #145b56); color: #fff; text-decoration: none; box-shadow: 0 16px 30px #0a28482b; transition: transform .18s ease, box-shadow .18s ease; }
.prepare-action:hover { transform: translateY(-2px); box-shadow: 0 20px 34px #0a28483d; text-decoration: none; }
.prepare-action:focus-visible { outline: 3px solid #00b58a; outline-offset: 3px; }
.prepare-action__icon { display: grid; flex: 0 0 48px; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: #ffffff20; color: #b7f2df; }
.prepare-action__icon svg { width: 26px; height: 26px; }
.prepare-action__copy { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.prepare-action__badge { align-self: flex-start; padding: 4px 7px; border: 1px solid #ffffff4d; border-radius: 5px; color: #b7f2df; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.prepare-action__copy strong { margin-top: 3px; color: #fff; font-size: clamp(17px, 4.7vw, 21px); line-height: 1.2; letter-spacing: -.03em; }
.prepare-action__copy > span:last-child { color: #e0f0ec; font-size: 13px; line-height: 1.35; }
.prepare-action__arrow { align-self: center; color: #b7f2df; font-size: 25px; line-height: 1; }
.pickup-list { margin: 14px 0 30px; padding: 0; list-style: none; }
.pickup-list li { margin-bottom: 10px; border: 1px solid #e1e3d9; border-radius: 10px; }
.pickup-list a { display: flex; flex-direction: column; gap: 6px; padding: 16px; text-decoration: none; }
.pickup-list span { color: #67736b; font-size: 14px; }
.prepare-card { padding: 24px 18px 30px; }
.prepare-progress { display: flex; gap: 8px; margin: 20px 0 24px; }
.prepare-progress span { height: 5px; flex: 1; border-radius: 8px; background: #e1e8e3; }
.prepare-progress .is-active { background: #00a980; }
.prepare-step-label { color: #0b8064; }
.prepare-card h1 { margin-top: 8px; font-size: clamp(30px, 8vw, 42px); }
.prepare-card > p { margin-bottom: 24px; }
.carrier-list { display: grid; gap: 10px; }
.carrier-option { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 10px 14px; border: 1px solid #dce6e0; border-radius: 16px; background: #fff; color: #162e2a; text-decoration: none; box-shadow: 0 4px 14px #234b3710; transition: border-color .16s ease, transform .16s ease; }
.carrier-option:hover { border-color: #00a980; transform: translateY(-1px); text-decoration: none; }
.carrier-mark { display: grid; flex: 0 0 74px; place-items: center; width: 74px; height: 52px; overflow: hidden; border-radius: 10px; background: #f1f5f4; color: #173946; font-size: 18px; letter-spacing: -.06em; }
.carrier-mark img { display: block; max-width: 65px; max-height: 40px; object-fit: contain; }
.carrier-mark--dao { background: #e32521; }
.carrier-mark--dao img { max-width: 52px; max-height: 35px; }
.carrier-mark--postnord { color: #005da8; font-size: 13px; letter-spacing: -.07em; }
.carrier-mark--ups { background: #f9f1e4; color: #382214; font-size: 22px; }
.carrier-mark--ups img { max-width: 36px; max-height: 42px; }
.carrier-mark--demo { background: #0a2848; color: #b7f2df; }
.carrier-option__name { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; font-weight: 800; font-size: 17px; }
.carrier-option__name small, .selected-carrier small { display: block; color: #65756c; font-size: 12px; font-weight: 500; }
.carrier-option__arrow { color: #2c755e; font-size: 28px; line-height: 1; }
.demo-choice { margin-top: 30px; padding-top: 24px; border-top: 1px solid #e1e8e3; }
.demo-choice .eyebrow { display: block; margin-bottom: 12px; }
.selected-carrier { display: flex; align-items: center; gap: 14px; margin: 18px 0 24px; padding: 10px 14px; border: 1px solid #dce6e0; border-radius: 16px; color: #162e2a; text-decoration: none; }
.selected-carrier:hover { text-decoration: none; border-color: #00a980; }
.selected-carrier > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.selected-carrier small { color: #16775d; font-weight: 700; }
.prepare-form { margin-top: 22px; }
.prepare-form input { min-height: 56px; font-size: 17px; }
.prepare-form button { min-height: 56px; margin-top: 16px; }
.pending-group { margin-top: 32px; padding-top: 24px; border-top: 1px solid #e1e8e3; }
.pending-group h2 { font-size: 20px; }
.pending-group .pickup-list li { padding: 12px; }
.pending-group .pickup-list form { margin-top: 5px; }
.pending-group .pickup-list button { min-height: 38px; }
.pickup-qr { margin: 26px 0 10px; padding: 22px 14px; border: 1px solid #bedfd2; border-radius: 20px; background: #f0faf6; text-align: center; }
.pickup-qr img { display: block; width: min(100%, 320px); height: auto; aspect-ratio: 1; margin: 18px auto; border: 12px solid #fff; border-radius: 12px; image-rendering: pixelated; }
.pickup-qr p { margin: 0 auto; max-width: 32ch; color: #315d4d; font-size: 14px; }
@media (max-width: 430px) { .brand-logo { width: 142px; height: 36px; } .brand-logo img { width: 160px; transform: translate(-9px, -10px); } .prepare-action { gap: 11px; padding: 15px; } .prepare-action__icon { flex-basis: 42px; width: 42px; height: 42px; } }
@media (min-width: 431px) { .name-grid { grid-template-columns: 1fr 1fr; } .account-shell { padding-top: 48px; } .account-nav { flex-wrap: nowrap; gap: 16px; } }
@media (prefers-reduced-motion: reduce) { .prepare-action { transition: none; } .prepare-action:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .carrier-option { transition: none; } .carrier-option:hover { transform: none; } }

.app-install { margin-top: 24px; padding: clamp(24px, 5vw, 32px); border: 1px solid #315e49; border-radius: 24px; background: #214c3d; color: #fffdfa; }
.app-install[hidden] { display: none; }
.app-install__heading { display: flex; align-items: center; gap: 16px; }
.app-install__heading img { flex: none; border: 1px solid #ffffff35; border-radius: 16px; }
.app-install .eyebrow { color: #b3d9c1; font-size: 10px; letter-spacing: .1em; }
.app-install h2 { margin: 8px 0 0; font-size: clamp(22px, 5vw, 27px); line-height: 1.15; letter-spacing: -.04em; }
.app-install p { color: #dfebe1; font-size: 14px; }
.app-install strong { color: #fffdfa; }
.app-install button { margin: 4px 0 18px; background: #f6f4ee; color: #214c3d; }
.app-install button:hover { background: #e1eddf; }
.app-install summary { padding: 10px 0; font-size: 14px; font-weight: 700; cursor: pointer; }
.app-install summary:focus-visible { outline: 3px solid #b3d9c1; outline-offset: 3px; }
.app-install details p { margin: 12px 0; }
@media (max-width: 360px) { .app-install__heading { gap: 12px; } .app-install__heading img { width: 48px; height: 48px; } }