/* Scoped installation UI and mobile safe areas. */
[hidden]{display:none!important}
.pwa-install-page{margin:0;background:#f3f6f2;color:#153c32;font-family:Anuphan,system-ui,sans-serif;line-height:1.7;min-height:100vh;min-height:100dvh}
.pwa-install-page *{box-sizing:border-box}
.pwa-install-shell{max-width:1060px;margin:auto;padding:32px 28px;padding-top:max(32px,env(safe-area-inset-top));padding-bottom:max(32px,env(safe-area-inset-bottom))}
.pwa-install-header{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#0c3f32;padding:22px 28px;border-radius:22px}
.pwa-install-header img{width:min(390px,65%);height:auto}
.pwa-install-header a{color:#e5ece1;text-decoration:none;font-size:13px;white-space:nowrap}
.pwa-install-hero{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:center;padding:64px 32px}
.pwa-eyebrow{color:#648477;font-size:12px;letter-spacing:.14em;font-weight:700}
.pwa-hero-copy h1{font-size:clamp(32px,4vw,46px);line-height:1.3;letter-spacing:-.02em;margin:16px 0 20px}
.pwa-hero-copy>p{color:#65796e;font-size:15px;margin:0 0 24px;line-height:1.85}
.pwa-install-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pwa-primary,.pwa-secondary{font:inherit;font-size:14px;font-weight:600;border-radius:13px;padding:13px 20px;border:1px solid transparent;text-decoration:none;cursor:pointer;min-height:48px}
.pwa-primary{background:#0b5947;color:white;box-shadow:0 6px 16px #0b594718}
.pwa-primary:hover{background:#084b3b}.pwa-primary:disabled{opacity:.65;cursor:wait}
.pwa-secondary{color:#215a47;background:white;border-color:#dde7df}
.pwa-hero-copy .pwa-install-status{font-size:12px;margin-top:14px;margin-bottom:0;min-height:23px}
.pwa-installed{color:#0b5947;font-size:13px;font-weight:600;margin-top:12px}
.pwa-app-preview{background:linear-gradient(150deg,#e2ecdf,#fcf9ed);border:1px solid #dae4d6;border-radius:36px;min-height:300px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px;box-shadow:0 24px 44px #253a2310;position:relative}
.pwa-preview-dots{display:flex;gap:5px;position:absolute;top:22px;left:24px}.pwa-preview-dots i{width:6px;height:6px;border-radius:50%;background:#a5b7a2}
.pwa-app-preview>img{border-radius:26px;box-shadow:0 12px 22px #0c3f3224;margin:10px 0 16px}
.pwa-app-preview strong{font-size:18px}.pwa-app-preview>span{font-size:12px;color:#6e7e68}
.pwa-preview-chip{font-size:11px;background:#ffffffb5;border:1px solid #dce4d5;border-radius:99px;padding:5px 12px;margin-top:20px;color:#57744e}
.pwa-install-guide{background:white;border:1px solid #e0e8df;border-radius:26px;padding:32px 38px;box-shadow:0 14px 40px #18342105;scroll-margin-top:24px}
.pwa-guide-heading h2{margin:5px 0;font-size:24px;line-height:1.45}.pwa-guide-heading p{margin:0;color:#788477;font-size:13px}
.pwa-platform-tabs{margin:24px 0;background:#eff4ee;padding:5px;border-radius:13px;display:flex;max-width:380px}
.pwa-platform-tabs button{flex:1;min-height:44px;border:0;background:transparent;border-radius:9px;font:inherit;font-size:14px;color:#69806a;font-weight:600;cursor:pointer}
.pwa-platform-tabs button[aria-selected="true"]{background:#fff;color:#0b5947;box-shadow:0 2px 6px #19392410}
.pwa-steps{padding:0;margin:28px 0 24px;list-style:none;display:grid;gap:22px}
.pwa-steps li{display:flex;gap:16px;align-items:flex-start}.pwa-steps li>span{width:34px;height:34px;flex:none;display:grid;place-items:center;background:#f1f6ee;border:1px solid #dce9d5;color:#406c38;border-radius:11px;font-size:14px;font-weight:700}
.pwa-steps h3{font-size:15px;line-height:1.6;margin:2px 0 4px}.pwa-steps p{font-size:13px;color:#748274;margin:0;line-height:1.85}
.pwa-copy-row{border-top:1px solid #edf0ea;padding-top:20px}.pwa-copy-row label{display:block;font-size:12px;color:#748274;margin-bottom:7px}.pwa-copy-row>div{display:flex;gap:8px}.pwa-copy-row input{font:inherit;font-size:13px;color:#64786b;background:#f6f8f4;border:1px solid #e3e9df;min-width:0;width:100%;padding:11px 12px;border-radius:10px}
.pwa-copy-row button{background:#edf3e9;border:1px solid #dce8d5;color:#385b2d;border-radius:10px;padding:10px 16px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;flex:none}
.pwa-browser-hint{background:#fff6df;border:1px solid #eadcbd;color:#866522;border-radius:12px;padding:12px 14px;font-size:13px;margin-bottom:20px}
.pwa-usage-note{display:flex;gap:16px;margin:22px 0;background:#eaf1e6;border:1px solid #dfe9d9;border-radius:20px;padding:22px 26px}.pwa-usage-note>div:first-child{background:#d6e5cc;color:#527248;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none}.pwa-usage-note h2{font-size:14px;margin:2px 0 8px}.pwa-usage-note p{font-size:12px;color:#65785c;margin:4px 0;line-height:1.85}
.pwa-install-footer{text-align:center;color:#8a9484;font-size:11px;line-height:1.85;margin-top:30px}
.pwa-install-page :focus-visible,.pwa-install-link:focus-visible,.pwa-nav-link:focus-visible{outline:2px solid #7d9e6d;outline-offset:3px}
.pwa-install-link{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;margin-top:12px;border:1px solid #dce6dc;border-radius:14px;background:#ffffff99;color:#375e40;text-decoration:none;font-size:13px;min-height:48px}
.pwa-nav-link{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:13px;color:#c4d8cf;text-decoration:none;font-size:13px;margin-top:10px;border:1px solid #ffffff18}
.pwa-nav-link:hover{background:#ffffff0a;color:white}.pwa-nav-link svg{width:20px;height:20px;flex:none}
.pwa-network-banner{position:fixed;bottom:0;left:0;right:0;z-index:10000;text-align:center;background:#fff0d2;border-top:1px solid #e2cf9e;color:#7b571b;padding:12px 18px;padding-bottom:max(12px,env(safe-area-inset-bottom));font:500 13px/1.7 Anuphan,system-ui,sans-serif;box-shadow:0 -4px 24px #3e301b12}
.pwa-login,.pwa-public{min-height:100dvh;padding-top:max(20px,env(safe-area-inset-top));padding-right:max(18px,env(safe-area-inset-right));padding-bottom:max(20px,env(safe-area-inset-bottom));padding-left:max(18px,env(safe-area-inset-left))}
.pwa-app aside{padding-top:calc(28px + env(safe-area-inset-top));padding-bottom:calc(18px + env(safe-area-inset-bottom));overflow-y:auto}
.pwa-app aside>*{flex-shrink:0}
.pwa-app main{min-height:100dvh;padding-bottom:env(safe-area-inset-bottom)}
.pwa-app header{height:calc(88px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
@media(max-width:850px){.pwa-app header{height:calc(80px + env(safe-area-inset-top))}.pwa-install-hero{gap:32px;padding:44px 12px}.pwa-install-shell{padding-left:20px;padding-right:20px}.pwa-app aside>*{flex-shrink:0}
.pwa-app main{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}}
@media(max-width:600px){.pwa-app header{height:calc(85px + env(safe-area-inset-top));padding-top:calc(12px + env(safe-area-inset-top))}.pwa-install-shell{padding:18px 16px;padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))}.pwa-install-header{padding:19px 17px;border-radius:18px;gap:10px}.pwa-install-header img{width:70%}.pwa-install-header a{font-size:11px}.pwa-install-hero{grid-template-columns:1fr;gap:26px;padding:32px 5px}.pwa-hero-copy h1{font-size:34px;margin:12px 0 16px}.pwa-hero-copy>p{font-size:14px}.pwa-app-preview{min-height:245px;border-radius:27px;padding:24px}.pwa-app-preview>img{width:90px;height:90px;border-radius:22px;margin:7px 0 12px}.pwa-preview-chip{margin-top:14px}.pwa-install-guide{padding:26px 22px;border-radius:22px}.pwa-guide-heading h2{font-size:21px}.pwa-usage-note{padding:20px 18px;gap:12px}.pwa-install-actions{gap:10px}.pwa-primary,.pwa-secondary{font-size:13px;padding:13px 16px}.pwa-copy-row button{padding-left:12px;padding-right:12px}}
@supports(-webkit-touch-callout:none){.pwa-app input,.pwa-app select,.pwa-app textarea,.pwa-login input,.pwa-public input,.pwa-copy-row input{font-size:16px}}
@media(prefers-reduced-motion:reduce){.pwa-install-page *{scroll-behavior:auto!important}}