@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap";:root{font-family:DM Sans,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#1d2939;background:#f4f6f8;font-synthesis:none;text-rendering:optimizeLegibility;font-smooth:always;font-weight:400}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;background:#f4f6f8}.topbar{height:72px;background:#fffffff0;border-bottom:1px solid #e6ebef;display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:11px;min-width:260px}.brand-mark{height:39px;width:39px;border-radius:12px;background:linear-gradient(145deg,#3788f4,#1763d2);display:grid;place-items:center;color:#fff;box-shadow:0 5px 12px #2c7be533}.brand strong{display:block;font:800 18px Manrope,sans-serif;letter-spacing:-.7px;color:#182433}.brand strong span{color:#3982e8}.brand small{display:block;font-size:8px;font-weight:700;letter-spacing:1.35px;color:#96a2ae;margin-top:1px}.topbar-center{display:flex;align-items:center;gap:9px;color:#697786;font-size:12px;font-weight:600}.topbar-center i{height:14px;width:1px;background:#dce2e7;margin:0 5px}.live-dot,.map-live i{width:7px;height:7px;background:#25bd73;border-radius:50%;box-shadow:0 0 0 3px #25bd731a}.garage-label{color:#9aa5af}.top-actions{display:flex;align-items:center;gap:10px;min-width:260px;justify-content:flex-end}.icon-button,.map-tool{height:36px;width:36px;border:1px solid #e8edf1;background:#fff;color:#687687;border-radius:11px;display:grid;place-items:center}.icon-button:hover,.map-tool:hover{background:#f4f8fc;color:#2677df}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e7f0fd;color:#3178d2;font-size:11px;font-weight:800;margin-left:5px}.workspace{display:grid;grid-template-columns:300px minmax(450px,1fr) 310px;gap:16px;padding:17px;min-height:calc(100vh - 72px)}.sidebar,.detail-panel{background:#fff;border:1px solid #e7ecf0;border-radius:17px;box-shadow:0 3px 14px #24364b08}.sidebar{padding:23px 18px 16px;display:flex;flex-direction:column;min-height:700px}.sidebar-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:19px}.eyebrow{margin:0 0 6px;color:#9aa6b2;font-size:9px;letter-spacing:1.35px;font-weight:800}.sidebar h1{font:800 19px Manrope,sans-serif;letter-spacing:-.7px;margin:0;color:#1d2a39}.round-small{width:31px;height:31px;border-radius:9px;border:1px solid #e7edf2;background:#fff;color:#7b8997;display:grid;place-items:center}.searchbox{height:43px;border:1px solid #e6ebf0;border-radius:11px;display:flex;align-items:center;gap:9px;padding:0 11px;color:#97a3af;background:#fbfcfd}.searchbox input{border:0;outline:0;background:transparent;min-width:0;width:100%;font-size:11px;color:#263545}.searchbox input::placeholder{color:#a5afb9}.searchbox kbd{font-size:9px;white-space:nowrap;border:1px solid #e4e9ee;border-radius:5px;padding:3px 5px;color:#a3adb7;background:#fff}.availability-card{margin-top:18px;padding:15px 15px 13px;background:linear-gradient(135deg,#f5f9ff,#f7fbff);border:1px solid #e5eef9;border-radius:13px}.availability-top{display:flex;align-items:center;justify-content:space-between;color:#738293;font-size:10px;font-weight:600}.availability-icon{width:26px;height:26px;border-radius:8px;background:#e5f0ff;color:#4286e1;display:grid;place-items:center}.availability-number{font:800 31px Manrope,sans-serif;letter-spacing:-1.4px;color:#1e2d3e;margin-top:8px}.availability-number small{font:600 14px Manrope;color:#a0adba;letter-spacing:0}.availability-bar{height:5px;border-radius:5px;background:#f4dfe1;margin:9px 0 10px;overflow:hidden}.availability-bar span{display:block;height:100%;border-radius:5px;background:#2ab878;transition:width .3s}.availability-legend{display:flex;justify-content:space-between;color:#8996a3;font-size:9px}.availability-legend span,.map-legend span{display:flex;align-items:center;gap:6px}.green-dot,.red-dot,.blue-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#28bd77}.red-dot{background:#e65b62}.blue-dot{background:#347fe8}.section-title{display:flex;justify-content:space-between;align-items:center;margin:24px 1px 9px;color:#9ca8b3;font-size:9px;font-weight:800;letter-spacing:1.2px}.section-title button{display:flex;align-items:center;gap:3px;background:none;border:0;color:#4385df;font-size:10px;font-weight:600;letter-spacing:0}.spot-list{display:flex;flex-direction:column;gap:5px}.spot-row{width:100%;display:flex;align-items:center;text-align:left;padding:9px 8px;border:1px solid transparent;background:#fff;border-radius:11px;gap:9px;transition:.18s}.spot-row:hover{background:#f8fafc}.spot-row.selected{background:#f2f7ff;border-color:#dceaff}.spot-icon{height:34px;width:34px;display:grid;place-items:center;border-radius:10px;background:#e9f8f0;color:#22a969}.spot-icon.is-busy{background:#fff0f0;color:#dc5961}.spot-info{display:flex;flex-direction:column;gap:3px;flex:1}.spot-info strong{font:800 12px Manrope;color:#263545}.spot-info small{font-size:9px;color:#98a4af}.status-pill{display:flex;align-items:center;gap:5px;font-size:8px;font-weight:700;color:#269d68;white-space:nowrap}.status-pill i,.big-status i{width:6px;height:6px;border-radius:50%;background:#26b875}.status-pill.busy{color:#d45d65}.status-pill.busy i,.big-status.busy i{background:#e45c65}.row-chevron{color:#b2bdc7;transform:rotate(-90deg)}.empty-state{font-size:11px;color:#8b98a5;padding:10px}.sidebar-divider{height:1px;background:#edf0f3;margin:17px 0 14px}.nearest-button{height:42px;border:0;border-radius:11px;background:#2679e8;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 5px 12px #2679e82b}.nearest-button:hover,.primary-action:hover{background:#176bdc}.nearest-button:disabled{opacity:.6;cursor:wait}.sidebar-bottom{display:flex;align-items:center;gap:9px;margin-top:auto;padding:17px 2px 0}.secure-icon{width:30px;height:30px;border-radius:9px;background:#eff8f3;color:#2aaa70;display:grid;place-items:center}.sidebar-bottom strong,.sidebar-bottom small{display:block}.sidebar-bottom strong{font-size:9px;color:#5d6b79}.sidebar-bottom small{font-size:8px;color:#a1acb6;margin-top:3px}.map-area{min-width:0;display:flex;flex-direction:column;background:#fff;border:1px solid #e7ecf0;border-radius:17px;overflow:hidden;box-shadow:0 3px 14px #24364b08}.map-toolbar{height:68px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #edf0f3}.map-title{display:flex;align-items:center;gap:10px}.map-title-icon{width:33px;height:33px;border-radius:10px;background:#edf5ff;color:#3b83df;display:grid;place-items:center}.map-title strong,.map-title small{display:block}.map-title strong{font:700 12px Manrope;color:#273646}.map-title small{font-size:9px;color:#9aa6b2;margin-top:3px}.map-tools{display:flex;align-items:center;gap:8px}.map-live{display:flex;align-items:center;gap:6px;color:#35a876;font-size:8px;font-weight:800;letter-spacing:1px;margin-right:7px}.map-live i{width:6px;height:6px}.map-tool{width:32px;height:32px;border-radius:9px}.map-canvas-wrap{position:relative;flex:1;min-height:530px;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:#f5f8fa;background-image:radial-gradient(#dfe6ec .7px,transparent .7px);background-size:17px 17px;padding:14px}.parking-map{display:block;width:100%;max-height:calc(100vh - 230px);min-height:390px;filter:drop-shadow(0 8px 22px #42566c0c);overflow:visible}.sector-tag rect{fill:#fff;stroke:#dce6ef;stroke-width:1;filter:url(#softShadow)}.sector-tag text{font:800 9px DM Sans,sans-serif;letter-spacing:1px;text-anchor:middle;fill:#7c8b9a}.spot-label{font:800 15px Manrope,sans-serif;fill:#293b4c;pointer-events:none}.map-spot{cursor:pointer;outline:none}.map-spot:hover .spot-hit{stroke:#4389e9;stroke-width:2.5}.map-spot:focus .spot-hit{stroke:#2679e8;stroke-width:3}.map-zoom{position:absolute;right:19px;top:19px;display:flex;flex-direction:column;background:#fff;border:1px solid #e4eaf0;border-radius:10px;overflow:hidden;box-shadow:0 3px 10px #27394b12}.map-zoom button{height:34px;width:34px;border:0;background:#fff;color:#6d7b89;font-size:20px}.map-zoom button+button{border-top:1px solid #edf0f3}.map-compass{position:absolute;right:23px;top:108px;width:27px;height:33px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#4e7eaf}.map-compass small{font-size:7px;font-weight:800}.map-scale{position:absolute;left:24px;bottom:68px;font-size:8px;color:#8d9aa7;display:flex;align-items:center;gap:5px}.map-scale span{height:4px;width:27px;border:1px solid #8191a0;border-top:0}.map-legend{position:absolute;bottom:16px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:17px;padding:9px 13px;border-radius:10px;background:#ffffffed;border:1px solid #e7edf2;box-shadow:0 3px 12px #26394c0c;color:#788694;font-size:9px;white-space:nowrap}.map-legend .green-dot,.map-legend .red-dot,.map-legend .blue-dot{width:7px;height:7px}.map-footer{height:34px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #edf0f3;color:#9aa5af;font-size:9px}.map-footer span:first-child{display:flex;align-items:center;gap:6px}.detail-panel{padding:20px 17px 15px;display:flex;flex-direction:column;min-height:700px;position:relative}.panel-handle{display:none}.detail-header{display:flex;align-items:flex-start;justify-content:space-between;margin:3px 0 20px}.detail-header h2{font:800 28px Manrope;letter-spacing:-1px;margin:0;color:#1d2b3a}.detail-header p:not(.eyebrow){margin:3px 0 0;color:#94a0ac;font-size:10px}.big-status{display:flex;align-items:center;gap:6px;padding:7px 9px;border-radius:8px;background:#eaf8f0;color:#239a64;font-size:9px;font-weight:700;margin-top:17px;white-space:nowrap}.big-status.busy{background:#fff0f0;color:#d45a62}.destination-preview{display:flex;align-items:center;gap:10px;padding:12px;background:#f8fafc;border:1px solid #edf1f4;border-radius:12px}.preview-icon{width:36px;height:36px;display:grid;place-items:center;background:#e9f2ff;color:#347fe4;border-radius:10px}.destination-preview>div:nth-child(2){flex:1;min-width:0}.destination-preview strong,.destination-preview small{display:block}.destination-preview strong{font-size:10px;color:#415164}.destination-preview small{font-size:8px;color:#9ba6b1;margin-top:3px}.preview-distance{display:flex;align-items:center;gap:3px;color:#6f8295;font-size:9px;font-weight:700}.route-summary{display:flex;gap:12px;margin:23px 3px 18px}.route-line{width:15px;display:flex;flex-direction:column;align-items:center;padding:4px 0}.route-origin{height:8px;width:8px;border-radius:50%;border:2px solid #2d83e8;background:#fff}.route-destination{height:8px;width:8px;border-radius:2px;background:#2d83e8}.route-line div{height:33px;width:2px;border-left:2px dashed #a8c7ec}.route-copy{display:flex;flex-direction:column;justify-content:space-between;gap:18px}.route-copy small,.instruction-card small{display:block;color:#a3adb7;font-size:8px;font-weight:800;letter-spacing:1px}.route-copy strong{display:block;color:#425264;font-size:10px;margin-top:4px}.instruction-card{display:flex;align-items:center;gap:10px;padding:12px;background:#f1f7ff;border:1px solid #e2efff;border-radius:11px;margin-bottom:14px}.instruction-icon{height:32px;width:32px;border-radius:9px;background:#fff;color:#337fdf;display:grid;place-items:center}.instruction-card strong{display:block;font-size:9px;color:#425d7a;margin:4px 0}.instruction-card small:last-child{font-size:8px;letter-spacing:0;font-weight:500}.notice{padding:10px 11px;background:#fff8e9;border:1px solid #f6e8c8;border-radius:9px;color:#98722e;font-size:9px;line-height:1.5;display:flex;align-items:flex-start;gap:8px;margin-bottom:13px}.notice span{flex:1}.notice button{border:0;background:none;color:#98722e;padding:0}.detail-actions{display:flex;flex-direction:column;gap:8px;margin-top:5px}.primary-action,.secondary-action{height:42px;border:0;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px;font-weight:700}.primary-action{background:#287bea;color:#fff;box-shadow:0 4px 10px #287bea24}.secondary-action{background:#f1f6fc;color:#3677c9;border:1px solid #e2ecf7}.secondary-action:disabled,.primary-action:disabled{opacity:.45;cursor:not-allowed}.unpark-action{height:36px;border:0;background:#fff5f4;color:#d05c5f;border-radius:9px;margin-top:9px;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:7px}.detail-meta{display:flex;justify-content:space-between;margin-top:20px;padding-top:13px;border-top:1px solid #edf0f3;color:#9aa6b1;font-size:8px}.detail-meta span{display:flex;align-items:center;gap:5px}.panel-bottom-note{margin-top:auto;text-align:center;padding-top:24px;color:#a7b1bb;font-size:8px}.panel-bottom-note span{padding:0 4px;color:#d1d7dd}.mobile-nav{display:none}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#1c2b3b66;z-index:20;display:grid;place-items:center;padding:20px}.settings-modal{width:min(420px,100%);background:#fff;border-radius:17px;padding:22px;box-shadow:0 20px 60px #1b2b3d35}.modal-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.modal-heading h3{margin:0;font:800 20px Manrope}.setting-line{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-top:1px solid #edf0f3}.setting-line strong,.setting-line small{display:block}.setting-line strong{font-size:11px;color:#3b4a59}.setting-line small{font-size:9px;color:#9aa6b2;margin-top:4px}.connection-state{font-size:9px;color:#d05b62;background:#fff0f0;padding:6px 8px;border-radius:7px}.connection-state.online{color:#239a64;background:#eaf8f0}.secondary-action.full{width:100%;margin-top:12px}@media(max-width:1250px){.workspace{grid-template-columns:270px minmax(390px,1fr)}.detail-panel{grid-column:1/-1;min-height:auto;display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding:18px}.detail-header,.destination-preview,.route-summary,.instruction-card,.notice,.detail-actions,.detail-meta,.panel-bottom-note,.unpark-action{grid-column:auto}.panel-bottom-note{display:none}.detail-actions{align-self:center}.detail-meta{align-self:end}}@media(max-width:850px){.topbar{height:62px;padding:0 15px}.brand{min-width:0}.topbar-center{display:none}.top-actions{min-width:0}.workspace{display:flex;flex-direction:column;padding:10px 10px 78px;gap:10px;min-height:calc(100vh - 62px)}.sidebar{order:2;min-height:0;padding:16px}.sidebar-heading{margin-bottom:12px}.availability-card{margin-top:12px}.section-title{margin-top:15px}.spot-list{display:grid;grid-template-columns:1fr 1fr}.spot-row{padding:8px 5px;gap:6px}.status-pill{font-size:7px}.row-chevron,.sidebar-divider,.sidebar-bottom{display:none}.nearest-button{margin-top:12px}.map-area{order:1;min-height:510px}.map-toolbar{height:58px;padding:0 13px}.map-canvas-wrap{min-height:390px;padding:5px}.parking-map{min-height:0;max-height:none;width:100%}.map-footer{height:30px}.detail-panel{order:3;display:flex;min-height:0;padding:16px}.panel-handle{display:flex;align-items:center;justify-content:center;position:absolute;top:5px;left:0;right:0;border:0;background:none;color:#a5b0ba;height:15px}.panel-handle span{height:3px;width:34px;background:#dce2e8;border-radius:3px}.panel-handle svg{display:none}.detail-header{margin-top:12px;margin-bottom:13px}.destination-preview{margin-bottom:0}.route-summary{margin:16px 3px}.detail-actions{display:flex}.detail-meta{margin-top:14px}.panel-bottom-note{display:block;padding-top:16px}.mobile-nav{position:fixed;z-index:10;bottom:0;left:0;right:0;height:64px;background:#ffffffed;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid #e8edf1;display:flex;justify-content:space-around;padding-bottom:env(safe-area-inset-bottom)}.mobile-nav button{border:0;background:none;color:#9ba7b2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:9px;font-weight:600;min-width:70px}.mobile-nav button.active{color:#287bea}.map-legend{gap:10px;padding:8px 10px;font-size:8px}.map-zoom{right:10px;top:10px}.map-compass{right:15px;top:92px}.map-scale{left:13px;bottom:60px}}@media(max-width:480px){.top-actions .icon-button:first-child{display:none}.brand strong{font-size:16px}.brand-mark{height:35px;width:35px}.workspace{padding:7px 7px 72px}.map-area{min-height:360px}.map-canvas-wrap{min-height:280px}.map-title strong{font-size:10px}.map-title small{font-size:8px}.map-live{font-size:7px}.map-tool{height:29px;width:29px}.map-legend{bottom:9px}.spot-list{grid-template-columns:1fr 1fr}.status-pill{font-size:7px}.availability-number{font-size:27px}}
