:root{--primary:#3b82f6;--primary-glow:#3b82f680;--bg-color:#0f172a;--surface-color:#1e293b;--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent:#10b981;--glass-bg:#1e293bd1;--glass-border:#ffffff1a;--nav-height:0px;--drawer-width:260px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);width:100vw;height:100dvh;font-family:Inter,Noto Sans Thai,sans-serif;overflow:hidden}.app-container{flex-direction:column;width:100vw;height:100dvh;display:flex}.router-view{height:calc(100dvh - var(--nav-height));z-index:10;pointer-events:none;flex:1;transition:opacity .3s;position:relative;overflow-y:auto}.glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--glass-border)}#hamburger-btn{z-index:4100;background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);cursor:pointer;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;transition:background .2s,box-shadow .2s;display:flex;position:fixed;top:16px;right:16px;box-shadow:0 4px 20px #0009}@media (width<=600px){#hamburger-btn{background:#0f172ae6;box-shadow:0 6px 24px #000c}}#hamburger-btn span{background:var(--text-primary);border-radius:2px;width:20px;height:2px;transition:all .3s;display:block}#hamburger-btn.open span:first-child{transform:translateY(7px)rotate(45deg)}#hamburger-btn.open span:nth-child(2){opacity:0}#hamburger-btn.open span:nth-child(3){transform:translateY(-7px)rotate(-45deg)}.nav-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:3500;opacity:0;pointer-events:none;visibility:hidden;background:#00000080;transition:all .3s;position:fixed;inset:0}.nav-overlay.open{opacity:1;pointer-events:auto;visibility:visible}.side-drawer{width:var(--drawer-width);background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);border-right:1px solid var(--glass-border);z-index:4000;flex-direction:column;height:100vh;transition:transform .32s cubic-bezier(.32,.72,0,1);display:flex;position:fixed;top:0;left:0;overflow-y:auto;transform:translate(-100%);box-shadow:4px 0 30px #00000080}.side-drawer.open{transform:translate(0)}.side-drawer-header{border-bottom:1px solid var(--glass-border);flex-shrink:0;justify-content:space-between;align-items:center;padding:20px 16px;display:flex}.side-drawer-header button{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:6px;align-items:center;padding:4px;transition:color .2s;display:flex}.side-drawer-header button:hover{color:var(--text-primary)}.nav-item{color:var(--text-secondary);border-bottom:1px solid var(--glass-border);flex-direction:row;align-items:center;gap:14px;padding:15px 20px;font-size:15px;font-weight:500;text-decoration:none;transition:all .2s ease-in-out;display:flex}.nav-item svg{opacity:.7;flex-shrink:0;transition:opacity .2s}.nav-item.active{color:var(--primary);background:#3b82f614}.nav-item.active svg{opacity:1;filter:drop-shadow(0 2px 4px var(--primary-glow))}.nav-item:hover{color:var(--text-primary);background:#ffffff0d}.page{opacity:0;pointer-events:none;visibility:hidden;width:100%;height:100%;transition:opacity .3s,transform .3s;position:absolute;top:0;left:0;overflow-y:auto;transform:translateY(10px)}.page.active{opacity:1;pointer-events:none;visibility:visible;transform:translateY(0)}#page-home{overflow:hidden}.map-container{width:100%;height:100%}.bottom-sheet{bottom:calc(var(--nav-height) + 16px);background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);z-index:800;pointer-events:auto;border-radius:20px;flex-direction:column;max-height:40vh;padding:16px;display:flex;position:absolute;left:16px;right:16px;overflow-y:auto;box-shadow:0 10px 25px #0000004d}.header{border-bottom:1px solid var(--glass-border);background:linear-gradient(90deg,#3b82f61a,#0000);padding:20px}.header h1{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#60a5fa,#a78bfa);-webkit-background-clip:text;background-clip:text;font-size:24px;font-weight:700}.form-group{margin-bottom:16px}.form-group label{color:var(--text-secondary);margin-bottom:6px;font-size:13px;display:block}.form-control{border:1px solid var(--glass-border);width:100%;color:var(--text-primary);background:#0003;border-radius:12px;padding:12px 14px;font-family:inherit;font-size:15px;transition:border-color .2s}.form-control:focus{border-color:var(--primary);outline:none}.btn{background:linear-gradient(135deg, var(--primary), #6366f1);color:#fff;cursor:pointer;border:none;border-radius:12px;width:100%;padding:14px;font-size:15px;font-weight:600;transition:transform .2s,box-shadow .2s}.btn:active{transform:scale(.98)}.btn.glow{box-shadow:0 4px 15px var(--primary-glow)}.leaflet-control-zoom-in,.leaflet-control-zoom-out,.leaflet-control-attribution{background:var(--glass-bg)!important;color:var(--text-primary)!important;border:1px solid var(--glass-border)!important}.container{min-height:100%;padding:20px}.map-bg{z-index:0;width:100%;height:100%;position:absolute;top:0;left:0}.floating-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);z-index:2100;pointer-events:auto;border-radius:20px;width:380px;max-width:calc(100vw - 40px);padding:24px;transition:transform .4s cubic-bezier(.32,.72,0,1),opacity .3s;position:absolute;top:20px;left:20px;box-shadow:0 10px 40px #00000080}@media (width<=600px){.floating-card{width:100%;max-width:100%;max-height:calc(100svh - 80px);padding:12px 20px calc(36px + env(safe-area-inset-bottom,0px));border-top:2px solid var(--glass-border);border-bottom:none;border-left:none;border-right:none;border-radius:28px 28px 0 0;inset:auto 0 0;overflow-y:auto;transform:translateY(0)}}.floating-card.collapsed{transform:translateY(calc(100% - 64px - env(safe-area-inset-bottom,0px)))}@media (width>=601px){.floating-card.collapsed{transform:none}}.card-header{justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}@media (width<=600px){.card-header{cursor:pointer;align-items:center;min-height:64px;margin-bottom:20px;padding-top:12px;padding-left:0;display:flex;position:relative}.card-header:before{content:"";background:#ffffff26;border-radius:10px;width:40px;height:4px;position:absolute;top:0;left:50%;transform:translate(-50%)}}#card-collapse-btn{border:1px solid var(--glass-border);color:var(--text-secondary);cursor:pointer;background:#ffffff0f;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;transition:all .3s;display:none}@media (width<=600px){#card-collapse-btn{display:flex}}.floating-card.collapsed #card-collapse-btn{transform:rotate(180deg)}@media (width<=600px){.floating-card.collapsed>:not(.card-header){opacity:0;pointer-events:none;visibility:hidden}}.suggestions-dropdown{-webkit-backdrop-filter:blur(25px);border:1px solid var(--primary);z-index:10000;pointer-events:auto;background:#1e293bfa;border-radius:12px;max-height:280px;display:none;position:absolute;top:calc(100% + 5px);left:0;right:0;overflow-y:auto;box-shadow:0 15px 45px #000000b3}.suggestion-item{cursor:pointer;color:#fff;border-bottom:1px solid #ffffff0d;padding:14px 18px;font-size:15px;transition:background .2s;display:block}.suggestion-item:hover{color:#60a5fa;background:#3b82f633}.station-detail-overlay{z-index:1500;opacity:0;pointer-events:none;background:#00000080;transition:opacity .3s;position:fixed;inset:0}.station-detail-sheet{border-top:1px solid var(--glass-border);z-index:1600;background:#111827;border-top-left-radius:24px;border-top-right-radius:24px;flex-direction:column;max-height:80vh;transition:transform .35s cubic-bezier(.32,.72,0,1);display:flex;position:fixed;bottom:0;left:0;right:0;overflow:hidden;transform:translateY(100%);box-shadow:0 -8px 40px #00000080}.station-detail-sheet.active{transform:translateY(0)}.station-detail-sheet.active+.station-detail-overlay{opacity:1;pointer-events:auto}.station-detail-drag-handle{background:#fff3;border-radius:2px;flex-shrink:0;width:40px;height:4px;margin:12px auto 0}.station-detail-content{flex:1;padding:16px 20px 80px;overflow-y:auto}.marker-cluster-small div{color:#fff!important;background-color:#3b82f6b3!important}.marker-cluster-medium div{color:#fff!important;background-color:#3b82f6cc!important}.marker-cluster-large div{color:#fff!important;background-color:#3b82f6e6!important}.marker-cluster div{text-align:center;border-radius:15px;justify-content:center;align-items:center;width:30px;height:30px;margin-top:5px;margin-left:5px;font-size:12px;font-weight:700;display:flex}.suggestions-dropdown{-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);z-index:5000;pointer-events:auto;background:#1e293bf2;border-radius:12px;width:100%;max-height:250px;margin-top:5px;display:none;position:absolute;top:100%;left:0;overflow-y:auto;box-shadow:0 15px 40px #0009}.suggestion-item{cursor:pointer;border-bottom:1px solid var(--glass-border);color:var(--text-primary);padding:12px 16px;font-size:14px;transition:background .2s;display:block}.suggestion-item:last-child{border-bottom:none}.waypoint-row{z-index:1;position:relative}.waypoint-row:focus-within{z-index:100!important}.floating-card .form-group:focus-within{z-index:101!important}.suggestion-item:hover{background:#ffffff14}.car-search-wrap{margin-bottom:12px;position:relative}.car-search-input-wrap{align-items:center;display:flex;position:relative}.car-search-results{-webkit-backdrop-filter:blur(25px);border:1px solid var(--primary);z-index:10005;background:#1e293bfa;border-radius:12px;max-height:250px;margin-top:5px;display:none;position:absolute;top:100%;left:0;right:0;overflow-y:auto;box-shadow:0 15px 45px #000000b3}.car-result-item{cursor:pointer;border-bottom:1px solid #ffffff0d;flex-direction:column;gap:2px;padding:10px 14px;transition:background .2s;display:flex}.car-result-item:hover{background:#3b82f626}.car-result-name{color:var(--text-primary);font-size:14px;font-weight:600}.car-result-meta{color:var(--text-secondary);align-items:center;gap:8px;font-size:11px;display:flex}.year-badge{color:var(--text-primary);background:#ffffff1a;border-radius:4px;padding:1px 5px;font-size:10px;font-weight:700}.leaflet-cluster-anim .leaflet-marker-icon,.leaflet-cluster-anim .leaflet-marker-shadow{-webkit-transition:-webkit-transform .3s ease-out,opacity .3s ease-in;-o-transition:-o-transform .3s ease-out, opacity .3s ease-in;-moz-transition:-moz-transform .3s ease-out,opacity .3s ease-in;transition:transform .3s ease-out,opacity .3s ease-in}.leaflet-cluster-spider-leg{-webkit-transition:-webkit-stroke-dashoffset .3s ease-out,-webkit-stroke-opacity .3s ease-in;-o-transition:-o-stroke-dashoffset .3s ease-out, -o-stroke-opacity .3s ease-in;-moz-transition:-moz-stroke-dashoffset .3s ease-out,-moz-stroke-opacity .3s ease-in;transition:stroke-dashoffset .3s ease-out,stroke-opacity .3s ease-in}.marker-cluster-small{background-color:#b5e28c99}.marker-cluster-small div{background-color:#6ecc3999}.marker-cluster-medium{background-color:#f1d35799}.marker-cluster-medium div{background-color:#f0c20c99}.marker-cluster-large{background-color:#fd9c7399}.marker-cluster-large div{background-color:#f1801799}.leaflet-oldie .marker-cluster-small{background-color:#b5e28c}.leaflet-oldie .marker-cluster-small div{background-color:#6ecc39}.leaflet-oldie .marker-cluster-medium{background-color:#f1d357}.leaflet-oldie .marker-cluster-medium div{background-color:#f0c20c}.leaflet-oldie .marker-cluster-large{background-color:#fd9c73}.leaflet-oldie .marker-cluster-large div{background-color:#f18017}.marker-cluster{background-clip:padding-box;border-radius:20px}.marker-cluster div{text-align:center;border-radius:15px;width:30px;height:30px;margin-top:5px;margin-left:5px;font:12px Helvetica Neue,Arial,Helvetica,sans-serif}.marker-cluster span{line-height:30px}