:root{font-family:system-ui,-apple-system,Arial;color:#202c3b;background:#f6f7fa}*{box-sizing:border-box}main{max-width:550px;margin:auto;padding:14px 12px 40px}h1{font-size:22px;margin:0}.sub{font-size:13px;color:#526477}.card{background:white;border-radius:16px;padding:17px;margin:14px 0;box-shadow:0 1px 7px #151e2615}h2{font-size:16px;margin:0 0 14px}label{font-size:13px;font-weight:650;display:block;margin:12px 0 5px}input,select{width:100%;border:1px solid #becbd2;border-radius:9px;padding:12px 10px;background:white;color:#182536;font-size:16px;min-width:0}input[type=checkbox]{width:auto}.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.btn{background:#4d777e;color:white;border:0;border-radius:11px;padding:13px 14px;font-weight:700;font-size:15px}.btn.alt{background:#eeeaf8;color:#38334f}.btn.warn{background:#faf0f2;color:#892f48}.btn:disabled{opacity:.55}.row{display:flex;gap:10px;align-items:center;justify-content:space-between}.row .btn{padding:9px}.full{width:100%}.small{font-size:12px;color:#627080;line-height:1.45}.summary{background:#f0f8f7;padding:14px;border-radius:10px;margin:14px 0;font-weight:700}.hidden{display:none}.treatment{border:1px solid #dce2e7;border-radius:12px;padding:12px;margin:12px 0}.choice{display:flex;gap:9px;align-items:center}.results button{width:100%;border:1px solid #dce2e7;padding:12px;text-align:left;background:white}.good{color:#16715e}.error{color:#b12445}header{padding:12px 2px 2px}

/* Version 4 responsive layout — mobile first, iPhone and Android */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-width:0;overflow-x:hidden}
main{width:100%;max-width:620px;margin-inline:auto;padding:clamp(10px,3vw,22px) clamp(10px,3vw,20px) calc(90px + env(safe-area-inset-bottom,0px))}
.card{min-width:0;overflow-wrap:anywhere}
input,select,textarea,button{max-width:100%;font:inherit}
input,select,textarea{font-size:16px;min-height:44px}
button,.btn{min-height:44px;touch-action:manipulation;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #7765ae;outline-offset:2px}
.grid>*{min-width:0}.row>*{min-width:0}
.treatment{min-width:0}.results button{font-size:15px;min-height:44px}
#afterSave .btn{white-space:normal}
#status{overflow-wrap:anywhere;line-height:1.5}
@media(max-width:480px){
 main{padding:10px 10px calc(70px + env(safe-area-inset-bottom,0px))}
 .card{margin:10px 0;padding:14px 12px;border-radius:14px}
 header .row{align-items:flex-start;gap:8px}
 h1{font-size:clamp(18px,5vw,22px)}
 header .btn{font-size:13px;line-height:1.25;padding:10px 11px;max-width:42%}
 .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
 .treatment{padding:11px 10px}
 .row{flex-wrap:wrap}
 #mileageWrap>.row .btn{flex:1 1 100%}
 #saveBtn{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:5;box-shadow:0 4px 18px #0002}
}
@media(max-width:350px){
 .grid{grid-template-columns:minmax(0,1fr)}
 header .row{display:block}
 header .btn{max-width:100%;width:100%;margin-top:10px}
 .treatment>.row{flex-direction:column;align-items:stretch}
}
@media(min-width:700px){main{max-width:720px}.card{padding:22px}.grid{gap:15px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* IMK brand: teal to lavender, with high-contrast form surfaces. */
:root{background:#e8f3f1;color:#202c3b}
body{min-height:100vh;background:linear-gradient(135deg,#c6e5df 0%,#e4e9f1 52%,#ded2ed 100%);background-attachment:fixed}
header .brand-lockup{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.imk-logo{width:96px;height:96px;flex:0 0 96px;object-fit:contain;background:#fff;border-radius:50%;box-shadow:0 2px 12px #365d6620}
.card{background:#fff;box-shadow:0 3px 16px #365d6614}
.btn{background:#365f66;color:#fff}.btn.alt{background:#eae3f4;color:#3c3555}
header .row{flex-wrap:nowrap}
@media(max-width:480px){.imk-logo{width:72px;height:72px;flex-basis:72px}header .brand-lockup{gap:8px}header h1{font-size:17px}header .sub{font-size:12px}header .row>.btn{flex:0 0 auto;max-width:30%;font-size:12px;padding:9px}}
@media(max-width:350px){header .row{display:block}header .row>.btn{max-width:100%;width:100%}}

[hidden]{display:none!important}.auth-panel{max-width:420px;margin:8vh auto;padding:32px 20px;text-align:center;background:#fff;border-radius:20px;box-shadow:0 6px 30px #365d6620}.auth-panel img{border-radius:50%}.auth-panel .btn{display:inline-block;text-decoration:none;margin-top:15px}.session-bar{display:flex;gap:12px;align-items:center;justify-content:space-between;font-size:12px;overflow-wrap:anywhere}.session-bar button{background:#fff8;border:1px solid #52787a;border-radius:8px;padding:8px;color:#25484f}.session-bar span{min-width:0}

/* App navigation and safe-area layout for iPhone. */
html{height:100%;background:#d7e7e6}body{min-height:100%;overscroll-behavior-y:none}
main{padding:0 14px calc(195px + env(safe-area-inset-bottom,0px));max-width:620px}
.session-bar{padding:8px 3px 0;color:#496168;font-size:11px}.session-bar button{min-height:32px;padding:4px 9px;font-size:11px;background:transparent;border:0}
header{position:sticky;top:0;z-index:8;margin:0 -14px 16px;padding:10px 14px;background:#e3ececf2;backdrop-filter:blur(16px);border-bottom:1px solid #fff9}
header .row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap}
header .brand-lockup{gap:6px;min-width:0}.imk-logo{width:66px;height:66px;flex:0 0 66px;margin:-5px 0;box-shadow:none}
header h1{font-size:18px;letter-spacing:.5px}header .sub{font-size:12px;margin-top:3px;color:#587078}
header .row>.btn{max-width:none;flex:0 0 auto;padding:9px 14px;font-size:13px;min-height:40px;border-radius:999px;background:#fff;color:#365f66}
.app-panel{display:none;margin:12px 0 16px;padding:20px 17px;border:1px solid #fff;border-radius:20px;box-shadow:0 5px 24px #365d660b}
[data-active-panel="customer"] [data-app-panel="customer"],[data-active-panel="visit"] [data-app-panel="visit"],[data-active-panel="mileage"] [data-app-panel="mileage"]{display:block}
.app-panel h2{font-size:20px;margin-bottom:18px;letter-spacing:-.35px}label{font-size:13px;color:#35535a;margin-top:15px}
input,select,textarea{border:1px solid #d6e1e4;background:#f9fbfc;border-radius:12px;min-height:48px;padding:12px;font-size:16px}
input:focus,select:focus,textarea:focus{outline:2px solid #8abdb6;outline-offset:1px;background:#fff}
.next-panel{margin-top:19px;border-radius:14px;min-height:49px}.next-panel span{margin-left:8px}
.app-save-dock{position:fixed;z-index:21;bottom:calc(67px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);width:min(100%,620px);padding:10px 16px;background:#f8fbfbf7;backdrop-filter:blur(16px);border-top:1px solid #d7e4e5}
.app-save-dock #saveBtn{position:static;box-shadow:none;min-height:49px;border-radius:14px;background:linear-gradient(110deg,#386c70,#766b95);font-size:15px;letter-spacing:.1px}
.app-save-dock #status{font-size:12px;margin:0;max-height:64px;overflow:auto}.app-save-dock #status:not(:empty){padding:8px 2px 0}
.app-bottom-nav{position:fixed;z-index:22;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,620px);height:calc(67px + env(safe-area-inset-bottom,0px));padding:5px 8px calc(5px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border-top:1px solid #e0e8e9;box-shadow:0 -2px 20px #365d6607}
.app-bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:transparent;color:#7b8791;min-height:52px;border-radius:14px;font-size:11px;font-weight:650;touch-action:manipulation}
.app-bottom-nav button[aria-current="page"]{background:#e9f3f1;color:#366c6d}.app-bottom-nav svg{flex:0 0 auto}
.treatment{border-color:#e3e9ed;background:#fbfcfd;border-radius:15px}.summary{background:#edf6f3;border-radius:12px;font-size:14px}
.imk-logo-frame{width:54px;height:54px;flex:0 0 54px;overflow:hidden;border-radius:50%;position:relative;margin-right:5px}.imk-logo-frame .imk-logo{position:absolute;width:80px;height:80px;max-width:none;max-height:none;left:-13px;top:-13px;margin:0;border-radius:0}
.auth-logo-frame{display:inline-block;width:112px;height:112px;overflow:hidden;border-radius:50%;position:relative}.auth-logo-frame img{position:absolute;width:166px;height:166px;max-width:none;left:-27px;top:-27px;border-radius:0}
.consultation-note{color:#3b7166;font-weight:700;margin:10px 0 2px;font-size:14px}
#afterSave{border-radius:20px;padding:18px;background:#fff}#afterSave h2{font-size:18px}#afterSave .small{font-size:12px}
@media(max-width:350px){header .row{display:flex}header h1{font-size:15px}.imk-logo{width:52px;height:52px;flex-basis:52px}header .row>.btn{width:auto;margin:0;padding:8px 11px}main{padding-inline:10px}header{margin-inline:-10px;padding-inline:10px}.app-panel{padding:17px 14px}}
@media(display-mode:standalone){header{padding-top:calc(10px + env(safe-area-inset-top,0px))}}