.auth-page { margin: 0; background: #f6f8f6; color: #1c2921; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.5; }
.auth-page *, .auth-page *::before, .auth-page *::after { box-sizing: border-box; }
.auth-page a { color: #137d38; text-decoration: none; }
.auth-page a:hover { text-decoration: underline; }
.auth-page button, .auth-page input { font: inherit; }
.auth-page :focus-visible { outline: 3px solid #79c994; outline-offset: 3px; }
.auth-shell { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px 20px; }
.auth-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; color: #1c2921 !important; font-size: 25px; font-weight: 750; letter-spacing: -1px; }
.auth-brand:hover { text-decoration: none !important; }
.auth-brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #1bac4b; color: #fff; }
.auth-brand-mark svg { width: 23px; height: 23px; }
.auth-card { width: 100%; max-width: 440px; padding: 32px; border: 1px solid #e3e9e4; border-radius: 20px; background: #fff; box-shadow: 0 8px 32px #203d2710; }
.auth-heading { margin-bottom: 26px; }
.auth-heading h1 { margin: 0 0 7px; font-size: 27px; line-height: 1.2; letter-spacing: -.8px; font-weight: 700; }
.auth-heading p { margin: 0; color: #68756c; }
.auth-form { display: flex; flex-direction: column; gap: 17px; }
.auth-field label, .auth-role legend { display: block; font-weight: 600; font-size: 13px; margin-bottom: 7px; }
.auth-field input { width: 100%; min-width: 0; height: 46px; padding: 10px 13px; background: #fff; border: 1px solid #d7dfd9; border-radius: 9px; color: #1c2921; font-size: 16px; transition: border-color .15s; }
.auth-field input::placeholder { color: #87918a; font-size: 14px; }
.auth-field input:focus { border-color: #188e40; }
.auth-field input[aria-invalid="true"] { border-color: #bd3939; }
.auth-password { position: relative; }
.auth-password:has(button:not([hidden])) input { padding-right: 64px; }
.auth-reveal { position: absolute; right: 2px; top: 2px; height: 42px; padding: 0 12px; background: transparent; border: 0; border-radius: 7px; color: #526359; font-size: 12px !important; font-weight: 600 !important; cursor: pointer; }
.auth-hint { display: block; margin-top: 6px; color: #68756c; font-size: 12px; }
.auth-optional { color: #748078; font-weight: 400; }
.auth-error { display: block; color: #af3030; font-size: 12px; margin-top: 5px; }
.auth-error:empty { display: none; }
.auth-role { margin: 0; padding: 0; border: 0; min-width: 0; }
.auth-role-options { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 4px; border-radius: 10px; background: #f0f4f1; }
.auth-role-options label { position: relative; cursor: pointer; }
.auth-role-options input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; }
.auth-role-options span { display: block; text-align: center; padding: 9px; border: 1px solid transparent; border-radius: 7px; color: #5c6c61; font-weight: 600; }
.auth-role-options input:checked + span { background: #fff; border-color: #dae6dd; color: #137d38; box-shadow: 0 1px 3px #1739230a; }
.auth-role-options input:focus-visible + span { outline: 3px solid #79c994; outline-offset: 1px; }
.auth-seller-fields { display: none; }
.auth-form:has(input[name="userType"][value="vendor"]:checked) .auth-seller-fields { display: block; }
.auth-seller-fields summary { cursor: pointer; color: #526359; font-size: 13px; }
.auth-seller-fields details[open] summary { margin-bottom: 12px; }
.auth-remember { display: flex; align-items: center; gap: 9px; color: #526359; cursor: pointer; font-size: 13px; }
.auth-remember input { width: 17px; height: 17px; margin: 0; accent-color: #168b3e; }
.auth-submit { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; margin-top: 3px; border: 0; border-radius: 9px; background: #178b3e; color: #fff; font-weight: 650 !important; cursor: pointer; }
.auth-submit:hover { background: #117331; }
.auth-submit:disabled { opacity: .65; cursor: wait; }
.auth-switch { margin-top: 25px; padding-top: 22px; border-top: 1px solid #edf0ed; text-align: center; color: #68756c; font-size: 13px; }
.auth-switch a { font-weight: 600; }
.auth-home { margin-top: 22px; color: #68756c !important; font-size: 13px; }
.auth-home span { margin-right: 5px; }
.auth-alert, .auth-notice { padding: 12px; border-radius: 8px; font-size: 13px; margin-bottom: 18px; }
.auth-alert { background: #fff0f0; color: #a52c2c; }
.auth-notice { background: #edf8f0; color: #137d38; }
@media (max-width: 480px) { .auth-shell { padding: 25px 16px; } .auth-card { padding: 25px 22px; border-radius: 16px; } .auth-heading h1 { font-size: 25px; } .auth-brand { margin-bottom: 20px; } }
/* Native marketplace shell: shared real brand, compact app bar, no desktop login panel on mobile. */
.auth-page { background:#f7f8f7; font-family:"Noto Sans",Roboto,system-ui,sans-serif; }
.auth-shell { justify-content:flex-start; width:100%; max-width:520px; margin:0 auto; padding:0 0 max(24px,env(safe-area-inset-bottom)); }
.auth-appbar { display:flex; align-items:center; gap:10px; width:100%; min-height:64px; padding: max(10px,env(safe-area-inset-top)) 16px 10px; background:#fff; }
.auth-back { display:grid; place-items:center; width:40px; height:40px; font-size:25px; color:#20372c!important; }
.auth-wordmark { width:88px; height:32px; object-fit:contain; display:block; }
.auth-app-label { margin-left:auto; font-size:10px; color:#68756c; max-width:90px; }
.auth-hero { margin:16px 16px 0; width:calc(100% - 32px); display:flex; align-items:center; justify-content:space-between; gap:12px; background:#064b37; border-radius:16px; padding:24px 20px; color:white; }
.auth-hero span { color:#c7e6d7; font-size:9px; letter-spacing:1px; font-weight:700; }
.auth-hero strong { display:block; font-size:23px; line-height:1.25; letter-spacing:-.7px; margin-top:10px; }
.auth-hero img { width:76px; height:76px; padding:9px; border-radius:24px; background:#f3fff7; transform:rotate(5deg); }
.auth-card { max-width:none; padding:28px 24px 20px; background:transparent; border:0; box-shadow:none; border-radius:0; }
.auth-heading h1 { font-size:25px; }
.auth-heading p { font-size:13px; line-height:1.7; }
.auth-field input { background:white; height:52px; border-radius:12px; }
.auth-reveal { height:48px; }
.auth-submit { background:#087d3b; min-height:52px; border-radius:12px; }
.auth-submit:hover { background:#065f2e; }
.auth-phone { display:flex; align-items:center; border:1px solid #d7dfd9; border-radius:12px; background:white; }
.auth-phone span { padding:0 14px; border-right:1px solid #d7dfd9; font-weight:600; }
.auth-phone input { border:0; background:transparent; }
.auth-phone:focus-within { outline:2px solid #79c994; }
.auth-footnote { font-size:11px; color:#68756c; text-align:center; line-height:1.7; margin:0; }
.auth-code-heading h2 { font-size:20px; margin:0; }
.auth-code-heading p { color:#68756c; font-size:13px; }
.auth-link { border:0; background:transparent; color:#087d3b; min-height:44px; padding:8px 0; cursor:pointer; font-weight:600!important; }
.auth-link:disabled { color:#748078; cursor:default; }
.auth-code { text-align:center; font-size:25px!important; letter-spacing:9px; font-weight:700; }
.auth-page [hidden] { display:none!important; }
.auth-switch p { margin:12px 0 0; }
.auth-home { margin-top:0; }
@media(min-width:768px) { .auth-shell { margin:36px auto; border:1px solid #e3e9e4; border-radius:20px; overflow:hidden; min-height:0; background:#fff; box-shadow:0 10px 36px #203d2710; } .auth-card { padding:30px; } }
@media(max-width:350px) { .auth-hero strong { font-size:20px; } .auth-hero img { width:58px;height:58px; } .auth-card { padding:24px 20px; } }
.onboarding-progress{width:100%;height:5px;accent-color:#087d3b;margin:0 0 24px;border:0;border-radius:4px}.onboarding-address{display:block;width:100%;border:1px solid #d7dfd9;border-radius:12px;padding:13px;font:inherit;background:white;resize:vertical}.onboarding-actions{display:flex;justify-content:space-between;margin-top:16px}
.store-hours{padding:12px 0;border-bottom:1px solid #e5ebe6}.store-hours>label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}.store-hours>div{display:flex;align-items:center;gap:10px}.store-hours input[type=time]{border:1px solid #d7dfd9;border-radius:8px;padding:8px;min-width:0;width:42%;background:white}[data-store-details]{padding:16px 0;font-size:13px;line-height:1.9}