@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
.install-banner{display:flex;align-items:center;gap:15px;padding:18px 22px;border:1px solid #d6e1d1;border-radius:14px;background:#edf2e8;margin-bottom:30px}.install-banner img{border-radius:12px;flex-shrink:0}.install-banner strong{font-size:15px}.install-banner p{font-size:11px;color:#738078;margin:5px 0 0}.install-banner button{margin-left:auto;white-space:nowrap}.offline-status{padding:12px 16px;background:#fff1ce;border-radius:10px;font-size:12px}dialog h3{font-size:15px;margin-top:22px}@media(max-width:680px){.install-banner{padding:15px;gap:11px;flex-wrap:wrap}.install-banner strong{font-size:13px}.install-banner p{font-size:10px}.install-banner button{width:100%;font-size:12px}}@media(display-mode:standalone){body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}}
:root{--green:#155b45;--ink:#233f35;--muted:#738078;--line:#e1e5df;--cream:#f8f9f5}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:'Manrope','Noto Sans Thai',sans-serif;font-size:14px}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{cursor:pointer}button{color:inherit}a{color:inherit;text-decoration:none}button{border:0;background:none}button:focus-visible,a:focus-visible{outline:3px solid #c7a640;outline-offset:4px}input:focus,select:focus,textarea:focus{outline:2px solid #7ba68f;outline-offset:2px}[hidden]{display:none!important}header{height:94px;max-width:1360px;margin:auto;padding:0 48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;font-size:24px;font-weight:700;line-height:1.2}.logo{background:var(--green);color:white;width:44px;height:48px;border-radius:13px 13px 13px 3px;text-align:center;padding-top:7px;font:800 30px Manrope,sans-serif}.logo span{color:#e5f0ac}.brand small{display:block;letter-spacing:3px;font-size:8px;margin-top:5px}nav{display:flex;height:100%;gap:34px}.nav{font-weight:600;position:relative;color:#7d8881}.nav.active{color:var(--green)}.nav.active:after{content:'';height:3px;position:absolute;bottom:0;left:0;right:0;background:var(--green)}#count{font-size:10px;background:#e6ebe3;padding:3px 7px;border-radius:20px;margin-left:5px}.settings{font-size:14px;color:#66786d}main{max-width:1264px;margin:auto;padding:48px 0 0}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:35px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:#7d8d80;margin:0 0 16px;display:flex;align-items:center;gap:9px}.eyebrow span,.green-dot{display:inline-block;width:6px;height:6px;background:#4c8b66;border-radius:50%}h1{font-size:51px;line-height:1.32;letter-spacing:-1.6px;margin:0 0 15px;font-weight:600}h1>span{color:#4e8567}h1 i{font-style:normal;font-size:42px;font-weight:400;display:inline-block;vertical-align:top;margin:5px 0 0 26px;color:#8aab81}.lead{color:#79837c;line-height:1.9;margin:0;font-size:14px}.intro-note{display:flex;align-items:center;gap:17px;margin:65px 45px 0 0;transform:rotate(-4deg)}.round-pin{border:1px solid #c4d0bf;border-radius:50%;font-size:32px;width:64px;height:64px;display:grid;place-items:center}.intro-note p{font-size:17px;font-weight:600}.intro-note small{display:block;color:#8c968c;font-size:12px;font-weight:400;margin-top:7px}.workspace{display:grid;grid-template-columns:360px 1fr;border:1px solid #dce2d8;border-radius:20px;overflow:hidden;background:white;box-shadow:0 8px 28px #243d3105}.search-panel{padding:29px}.step{font-size:11px;color:#8b9a89;letter-spacing:1px;margin-bottom:25px}.step span{font-size:16px;color:var(--ink);letter-spacing:0;margin-left:13px;font-weight:600}label{display:block;font-size:12px;font-weight:600;margin-bottom:9px}input,select,textarea{width:100%;background:#fff;border:1px solid #dfe5dc;border-radius:9px;padding:13px 12px;color:var(--ink);margin-bottom:20px}input::placeholder,textarea::placeholder{color:#97a096;font-size:12px}.input-wrap{position:relative}.input-wrap>span{position:absolute;font-size:25px;left:13px;top:2px;color:#80917e}.input-wrap input{padding-left:38px}.primary{display:inline-flex;justify-content:center;align-items:center;gap:20px;background:var(--green);color:white;padding:14px 22px;border-radius:9px;font-weight:600;line-height:1.6}.primary:hover{background:#0e4836}.primary>span{margin-left:auto;font-size:20px;line-height:1}.full{width:100%}.location{padding:13px;margin-top:10px;border:1px solid #dfe6dc;border-radius:9px;font-size:12px}.location:hover,.secondary:hover{background:#eef2e9}.divider{border-top:1px solid var(--line);margin:25px 0 20px}.small-title{font-size:11px;color:#85907f;margin:0 0 11px}.chips{display:flex;gap:7px;flex-wrap:wrap}.chips button{font-size:11px;border-radius:6px;padding:7px 11px;background:#f2f4ed}.chips button:hover{background:#e3ecdc}.source-note{font-size:10px;line-height:1.8;margin:23px 0 0;color:#5e7662}.source-note span{color:#929a8d;font-size:9px}.map-panel{position:relative;min-height:526px;background:#e9ede5;overflow:hidden}.map-art{position:absolute;inset:0;opacity:.7}.map-art svg{width:100%;height:100%;filter:blur(.3px)}.map-art:after{content:'';position:absolute;inset:0;background:#edf1e53b}.map-label{position:absolute;z-index:2;top:22px;left:24px;border:1px solid #d8e0d2;background:#ffffffeb;border-radius:30px;padding:9px 15px;font-size:10px;display:flex;gap:8px;align-items:center;max-width:90%}.parking{position:absolute;background:white;border:1px solid #c9d8c5;border-radius:11px;width:37px;height:37px;display:grid;place-items:center;font-size:19px;color:#75917b;box-shadow:0 5px 10px #435d3510}.p1{top:21%;left:73%;transform:rotate(8deg)}.p2{top:64%;left:16%;transform:rotate(-9deg)}.p3{top:72%;left:80%;transform:rotate(5deg)}.map-center{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);text-align:center;width:80%}.hero-pin{display:grid;place-items:center;background:var(--green);color:#e8f1d7;font-size:35px;font-weight:800;border:7px solid #f6f8ed;box-shadow:0 8px 20px #405a3930;width:77px;height:85px;border-radius:23px 23px 23px 4px;margin:0 auto 24px;transform:rotate(-5deg)}.map-center h2{font-size:24px;margin:0 0 10px;font-weight:600}.map-center p{font-size:12px;color:#6c7e6e;line-height:1.9;margin:0}.illustration-note{display:block;font-size:9px;color:#7f8f7d;margin-top:19px}.map-footer{position:absolute;bottom:0;left:0;right:0;z-index:2;background:#fffffff0;padding:16px 23px;display:flex;justify-content:space-between;border-top:1px solid #dce4d6;gap:10px;font-size:10px}.map-footer span{color:#8b9a83}.map-footer b{font-weight:400;color:#5e7059;margin-left:6px}.map-footer button{font-size:10px;color:#466d4d;text-align:right}iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.result{margin-top:22px;padding:25px 29px;background:#edf2e8;border:1px solid #d6e1d1;border-radius:13px;display:flex;justify-content:space-between;align-items:center;gap:20px}.result h2{margin:0;font-size:20px;overflow-wrap:anywhere}.result .eyebrow{margin-bottom:7px}.result p:not(.eyebrow){font-size:11px;color:#7c8c78}.result-actions{display:flex;gap:9px;flex-shrink:0}.secondary{border:1px solid #d4ded0;border-radius:8px;padding:12px 16px;background:white}.lower{margin-top:48px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.section-heading h2{font-size:23px;font-weight:600;margin:0}.section-heading .eyebrow{font-size:9px;margin-bottom:7px}.text-button{font-size:12px;color:#567d5f;padding:10px 0}.quick-grid{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:20px;margin-top:22px}.quick-grid article{border:1px solid var(--line);padding:24px;border-radius:12px;position:relative}.quick-grid h3{font-size:15px;margin:10px 0 8px;font-weight:600}.quick-grid p{color:#8b9589;font-size:11px;line-height:1.9;margin:0}.feature-icon{color:#6f8868;font-size:21px}.quick-grid .tip{background:#f0f1e5;border-color:#e5e7d7}.tag{display:inline-block;color:#7c8362;background:#e4e7d5;border-radius:4px;padding:4px 7px;font-size:9px}.tip h3{margin-top:14px}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:43px;padding:22px 0 28px;font-size:12px;color:#6d806d}footer small{font-size:8px;letter-spacing:1px;color:#98a18f}footer>span:last-child{font-size:10px;color:#99a18f}dialog{width:470px;max-width:calc(100% - 30px);border:1px solid #d9e1d5;border-radius:18px;padding:28px;color:var(--ink);box-shadow:0 20px 90px #102d3425}dialog::backdrop{background:#173c3655;backdrop-filter:blur(4px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}.dialog-top h2{font-size:22px;margin:0}.dialog-top button{font-size:20px;padding:5px}dialog p{font-size:12px;line-height:1.9;color:#7d8979}.storage-note{font-size:11px;color:#8a9584;line-height:1.8}.help-link{display:block;font-size:11px;color:#35764f;text-decoration:underline;margin:15px 0 22px}#toast{position:fixed;z-index:20;bottom:25px;left:50%;transform:translateX(-50%);background:#203e31;color:white;border-radius:10px;padding:13px 22px;box-shadow:0 5px 30px #0002;max-width:90%;opacity:0;pointer-events:none;transition:.2s;font-size:12px}#toast.show{opacity:1}.saved-heading{font-size:40px}.collection-tools{display:flex;gap:12px;margin:28px 0}.collection-tools input{margin:0;max-width:450px}.empty{text-align:center;padding:65px 20px;border:1px dashed #cdd9c5;border-radius:15px;background:#f0f3e9}.empty>span{font-size:38px;color:#8caa81}.empty p{color:#8a9584;font-size:13px}.saved-card{border:1px solid var(--line);border-radius:12px;padding:24px;margin-bottom:16px;background:white;display:flex;justify-content:space-between;gap:25px}.saved-card h3{margin:0 0 7px;font-size:18px;overflow-wrap:anywhere}.saved-card p{white-space:pre-wrap;overflow-wrap:anywhere;max-width:700px;color:#7b8973;font-size:12px;line-height:1.9}.saved-card small{color:#98a18f;font-size:10px}.saved-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.saved-actions button{font-size:11px;padding:8px}.saved-actions a{font-size:11px;white-space:nowrap}.saved-actions .delete{color:#a86558}button:disabled{opacity:.5;cursor:wait}
@media(min-width:1440px){main{padding-top:55px}.intro{margin-bottom:40px}.map-panel{min-height:545px}}@media(max-width:1370px){main{margin:0 48px}}@media(max-width:950px){header{padding:0 25px}main{margin:0 25px;padding-top:35px}.workspace{grid-template-columns:320px 1fr}.intro-note{margin-right:0}.result{align-items:flex-start;flex-direction:column}.quick-grid{gap:12px}.quick-grid article{padding:20px}nav{gap:20px}}@media(max-width:680px){header{height:78px;padding:0 18px}.brand{font-size:20px;gap:7px}.logo{width:35px;height:40px;font-size:25px}.brand small{font-size:7px;letter-spacing:2px}nav{gap:15px;margin-left:15px}.nav{font-size:11px}.settings{font-size:20px}.settings span{display:none}main{margin:0 18px;padding-top:30px}.intro{margin-bottom:25px}h1{font-size:40px}.eyebrow{font-size:8px;letter-spacing:1.5px}.intro-note{display:none}.lead{font-size:12px}.workspace{grid-template-columns:1fr;border-radius:15px}.search-panel{padding:24px}.map-panel{min-height:340px;border-top:1px solid #dde5d7}.map-label{top:15px;left:15px}.map-center{top:47%}.hero-pin{width:55px;height:63px;font-size:26px;border-width:5px;border-radius:17px 17px 17px 4px;margin-bottom:15px}.map-center h2{font-size:20px}.map-center p{font-size:11px}.illustration-note{margin-top:10px;font-size:8px}.map-footer{padding:13px 16px;font-size:9px}.map-footer button{font-size:9px}.lower{margin-top:35px}.section-heading h2{font-size:20px}.quick-grid{grid-template-columns:1fr 1fr}.quick-grid .tip{grid-column:1/-1}.quick-grid p{font-size:10px}.quick-grid h3{font-size:13px}.quick-grid article{padding:18px}.result-actions{flex-direction:column;width:100%;gap:10px}.result{padding:22px}.result .primary,.result .secondary{width:100%;font-size:12px}.section-heading{gap:12px}.section-heading .primary{font-size:11px;padding:11px 13px}.saved-heading{font-size:32px}.saved-card{flex-direction:column;gap:10px;padding:20px}.saved-actions{justify-content:flex-start}.collection-tools{flex-direction:column}.collection-tools input{max-width:none}footer{font-size:11px;gap:12px}footer>span:last-child{display:none}dialog{padding:24px}}

.parking-results{margin-top:42px}.parking-explainer{color:#7b8975;font-size:12px;line-height:1.9;max-width:900px}.places-source{color:#6f7e70;font-size:11px}.parking-toolbar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding:17px 0;margin-top:20px}.parking-toolbar>span{font-size:12px;color:#74836e}.parking-toolbar label{display:flex;align-items:center;gap:10px;margin:0 0 0 auto;font-size:11px;font-weight:400}.parking-toolbar select{width:auto;padding:9px 12px;font-size:11px;margin:0}.parking-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.parking-card{padding:23px;border:1px solid #dfe6d9;border-radius:14px;background:#fff;display:flex;flex-direction:column;min-width:0}.parking-card-top{display:flex;justify-content:space-between;align-items:center}.parking-index{font-size:12px;letter-spacing:2px;color:#a0ad96}.parking-type{font-size:9px;background:#edf3e7;color:#6a845c;border-radius:5px;padding:4px 8px}.parking-card h3{font-size:18px;line-height:1.6;overflow-wrap:anywhere;margin:16px 0 8px}.parking-address{font-size:11px;color:#8c9787;line-height:1.8;margin:0 0 18px;min-height:40px;overflow-wrap:anywhere}.parking-price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;padding:16px 0;border-top:1px solid #edf0e8}.parking-price strong{font-size:28px;font-weight:600}.parking-price .unknown-price{font-size:19px;color:#8e9a85}.parking-price span{font-size:10px;color:#8e9a85}.rate-meta,.rate-note{font-size:10px;line-height:1.8;color:#85917c;overflow-wrap:anywhere;margin:0 0 10px}.rate-note{color:#657a59;white-space:pre-wrap}.rate-source{font-size:10px;text-decoration:underline;color:#5c7d50;display:block;margin-bottom:12px}.parking-card-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;padding-top:12px}.parking-card-actions .secondary{flex:1;font-size:10px;padding:10px;text-align:center;white-space:nowrap}.parking-card-actions .rate-button{width:100%;font-size:12px;border:1px dashed #bdceb0;background:#f6f9f0;padding:11px;border-radius:8px;color:#557944}.parking-card-actions .text-button{width:100%;padding-bottom:0}.parking-message{border:1px solid #e1e7d9;border-radius:13px;padding:24px;background:#f1f5eb}.parking-message h3{font-size:17px;margin:0 0 8px}.parking-message p{color:#7f8c75;font-size:12px;line-height:1.9;max-width:800px}.parking-message .secondary{display:inline-block;margin-top:10px;font-size:12px}#rate-place-name{color:#4d7147;font-weight:600;font-size:15px}
@media(max-width:950px){.parking-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:680px){.parking-grid{grid-template-columns:1fr}.parking-results>.section-heading{align-items:flex-start;flex-direction:column;gap:8px}.parking-explainer{font-size:11px}.parking-toolbar{gap:12px}.parking-toolbar>span{width:100%}.parking-toolbar label{margin-left:0;flex:1}.parking-toolbar select{max-width:190px}.parking-toolbar .text-button{font-size:10px}.parking-card h3{font-size:18px}.parking-address{min-height:0}.parking-card{padding:21px}}

#map{height:calc(100% - 53px)}
@media(max-width:680px){main{padding-top:20px}.intro{margin-bottom:20px}.intro h1{font-size:28px;line-height:1.25;margin-bottom:10px}.intro h1 i{font-size:29px;margin-top:2px}.intro .eyebrow{font-size:7px;letter-spacing:1px;margin-bottom:11px}.intro .lead{font-size:11px;line-height:1.6}.workspace .map-panel{order:-1;min-height:320px;border-top:0;border-bottom:1px solid #dde5d7}.workspace .search-panel{order:1}}

#map{position:absolute;inset:0 0 103px;width:100%;height:auto;min-height:200px;background:#e8eee3;z-index:1}.map-label{z-index:5}.map-footer{z-index:4}.tracking-toolbar{position:absolute;bottom:53px;left:0;right:0;min-height:50px;z-index:4;display:flex;gap:6px;align-items:center;justify-content:center;padding:8px 10px;background:#fffffff5;border-top:1px solid #dce4d6}.tracking-toolbar button{border:1px solid #d6e0cf;border-radius:6px;padding:7px 10px;background:#f5f8ef;font-size:10px}.tracking-toolbar button[aria-pressed=true]{background:#e0edda;color:#316b38}.tracking-toolbar button:disabled{opacity:.45;cursor:default}.live-indicator{position:absolute;top:12px;left:12px;z-index:4;padding:7px 11px;border-radius:18px;background:#fff;color:#788672;font-size:10px;box-shadow:0 2px 8px #0001}.live-indicator[data-live=true]{background:#e6f0ff;color:#2468bd}.location-status{font-size:10px;line-height:1.8;color:#75846c;margin:10px 0 5px}.location-status[data-state=active]{color:#2562a6}.location-help{font-size:9px;line-height:1.8;color:#909a86;margin:0}.map-place-popup{font-family:'Noto Sans Thai',sans-serif;font-size:12px;max-width:240px}.map-place-popup p{font-size:11px;color:#788672}.map-panel{min-height:570px}@media(max-width:680px){.workspace .map-panel{min-height:365px}.tracking-toolbar{gap:5px;padding:8px 6px}.tracking-toolbar button{font-size:9px;padding:8px 7px}.live-indicator{font-size:9px;top:10px;left:10px}}

.auto-location-row{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:400;color:#58774c;margin:12px 0 6px;padding:10px 12px;background:#f1f6e9;border-radius:8px;cursor:pointer}.auto-location-row input{width:16px;height:16px;margin:0;flex-shrink:0;accent-color:#155b45}