:root{--navy:#071a2f;--ink:#10243c;--muted:#68788c;--paper:#f5f7f9;--white:#fff;--line:#dbe4ec;--green:#0fa47e;--green-soft:#e3f8f1;--yellow:#efa719;--yellow-soft:#fff5de;--red:#e75252;--red-soft:#ffebea;--shadow:0 18px 50px #071a2f26}*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--paper)}button,a{font:inherit}.topbar{height:68px;background:var(--navy);color:white;display:flex;align-items:center;justify-content:space-between;padding:0 24px}.brand{display:flex;align-items:center;gap:11px;color:white;text-decoration:none}.brand>span{width:40px;height:40px;border-radius:12px;background:var(--green);display:grid;place-items:center;font-size:21px;font-weight:900}.brand b,.brand small{display:block}.brand b{font-size:12px;letter-spacing:1.3px}.brand small{font-size:8px;color:#a9bacb;margin-top:3px}.top-actions{display:flex;gap:9px}.help-button,.traffic-button{border-radius:10px;padding:10px 14px;font-size:10px;font-weight:800;cursor:pointer;text-decoration:none}.help-button{border:1px solid #ffffff28;color:#e1eaf2;background:#ffffff0c}.traffic-button{border:1px solid #4bd5b3;background:var(--green);color:white}.layout{height:calc(100vh - 68px);display:grid;grid-template-columns:350px 1fr;overflow:hidden}.guide-panel{background:white;border-right:1px solid var(--line);padding:22px;overflow:auto;z-index:20}.intro>span{font-size:8px;letter-spacing:1.5px;font-weight:900;color:var(--green)}.intro h1{font-size:29px;line-height:1.04;margin:8px 0;color:var(--navy)}.intro h1 em{font-style:normal;color:var(--green)}.intro p{font-size:10px;line-height:1.45;color:var(--muted);margin:4px 0}.three-step-guide{display:flex;align-items:center;gap:6px;margin:17px 0}.three-step-guide>div{display:flex;align-items:center;gap:6px;min-width:0}.three-step-guide>div>b{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:white;font-size:10px}.three-step-guide strong,.three-step-guide small{display:block;white-space:nowrap}.three-step-guide strong{font-size:8px}.three-step-guide small{font-size:7px;color:var(--muted);margin-top:2px}.three-step-guide>i{height:1px;flex:1;background:var(--line)}.start-card{background:var(--green-soft);border:1px solid #9ee1cf;border-radius:13px;padding:14px;margin-bottom:13px}.start-label{font-size:7px;letter-spacing:1.1px;font-weight:900;color:#08745c}.start-card h2{font-size:16px;margin:6px 0}.start-card h2 span{display:block;color:#08745c;font-size:12px;margin-top:3px}.start-card p{font-size:9px;color:#45675f;margin:0}.area-groups{display:grid;gap:9px}.area-group{border:1px solid var(--line);border-radius:13px;padding:10px;background:#fbfcfd}.group-label{display:flex;align-items:center;gap:7px;margin-bottom:7px}.group-label i{width:10px;height:10px;border-radius:50%;background:var(--group);box-shadow:0 0 0 4px color-mix(in srgb,var(--group) 18%,transparent)}.group-label b,.group-label small{display:block}.group-label b{font-size:9px}.group-label small{font-size:7px;color:var(--muted);margin-top:2px}.group-buttons{display:grid;grid-template-columns:repeat(var(--columns),1fr);gap:6px}.area-button{border:1px solid var(--line);background:white;border-radius:10px;padding:9px;text-align:left;cursor:pointer;transition:.2s}.area-button:hover,.area-button.active{border-color:var(--group);box-shadow:0 5px 14px #071a2f10}.area-button b,.area-button span{display:block}.area-button b{font-size:10px}.area-button span{font-size:7px;color:var(--muted);margin-top:3px}.area-answer{margin-top:12px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}.answer-head{padding:13px 14px;background:var(--navy);color:white}.answer-head small{font-size:7px;letter-spacing:1px;color:#a7bacb}.answer-head h2{font-size:18px;margin:5px 0 3px}.answer-head p{font-size:8px;color:#c9d6e1;margin:0}.answer-stats{display:grid;grid-template-columns:repeat(3,1fr);background:white}.answer-stats div{text-align:center;padding:10px 5px;border-right:1px solid var(--line)}.answer-stats div:last-child{border:0}.answer-stats b,.answer-stats span{display:block}.answer-stats b{font-size:17px}.answer-stats span{font-size:7px;color:var(--muted);margin-top:2px}.answer-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:9px;background:var(--paper)}.answer-actions button,.answer-actions a{border:0;border-radius:9px;padding:10px 6px;text-align:center;text-decoration:none;font-size:8px;font-weight:900;cursor:pointer}.answer-actions button{background:var(--navy);color:white}.answer-actions a{background:var(--green);color:white}.map-wrap{position:relative;min-width:0;background:#dce3e7}.leaflet-container{height:100%;width:100%;font-family:inherit;background:#dce3e7}.leaflet-control-zoom{border:0!important;box-shadow:var(--shadow)!important}.leaflet-control-zoom a{border:0!important;color:var(--navy)!important}.leaflet-control-attribution{font-size:7px!important}.map-message{position:absolute;z-index:600;left:18px;top:18px;background:#071a2fea;color:white;border-radius:14px;padding:13px 16px;width:300px;box-shadow:var(--shadow)}.map-message small{font-size:7px;letter-spacing:1px;color:#aac0d2}.map-message h2{font-size:19px;margin:6px 0 3px}.map-message p{font-size:9px;color:#cfdae4;margin:0}.all-cafes-button{position:absolute;z-index:600;right:18px;top:18px;border:1px solid #d3dde5;background:white;color:var(--navy);border-radius:11px;padding:11px 14px;font-size:9px;font-weight:900;box-shadow:var(--shadow);cursor:pointer}.all-cafes-button.active{background:var(--navy);color:white}.simple-legend{position:absolute;z-index:600;left:18px;bottom:18px;display:flex;background:white;border-radius:12px;box-shadow:var(--shadow);overflow:hidden}.simple-legend>div{display:flex;align-items:center;gap:7px;padding:10px 13px;border-right:1px solid var(--line)}.simple-legend>div:last-child{border:0}.simple-legend i{width:10px;height:10px;border-radius:50%}.simple-legend i.green{background:var(--green)}.simple-legend i.yellow{background:var(--yellow)}.simple-legend i.red{background:var(--red)}.simple-legend b,.simple-legend small{display:block}.simple-legend b{font-size:8px}.simple-legend small{font-size:7px;color:var(--muted);margin-top:2px}.area-circle-label{background:transparent;border:0}.area-map-label{background:white;border-left:5px solid var(--area);border-radius:9px;padding:7px 9px;box-shadow:0 7px 18px #071a2f35;white-space:nowrap}.area-map-label b,.area-map-label small{display:block}.area-map-label b{font-size:10px}.area-map-label small{font-size:7px;color:var(--muted);margin-top:3px}.cafe-pin{width:25px;height:25px;border:3px solid white;border-radius:50% 50% 50% 5px;background:var(--pin);transform:rotate(-45deg);display:grid;place-items:center;box-shadow:0 4px 10px #071a2f55}.cafe-pin span{transform:rotate(45deg);font-size:10px;filter:grayscale(1) brightness(5)}.leaflet-tooltip.simple-tooltip{background:var(--navy);border:0;color:white;border-radius:9px;padding:8px 10px;box-shadow:var(--shadow)}.leaflet-tooltip.simple-tooltip:before{border-top-color:var(--navy)}.simple-tooltip b,.simple-tooltip span{display:block}.simple-tooltip b{font-size:10px}.simple-tooltip span{font-size:7px;color:#b9c9d7;margin-top:3px}.leaflet-popup-content-wrapper{border-radius:14px;box-shadow:var(--shadow)}.leaflet-popup-content{width:238px!important;margin:0}.popup{padding:14px}.popup>span{font-size:7px;letter-spacing:1px;color:var(--green);font-weight:900}.popup h3{font-size:15px;margin:5px 0}.popup p{font-size:8px;color:var(--muted);line-height:1.4}.popup-stats{display:flex;gap:8px;margin:10px 0}.popup-stats b{font-size:11px;background:var(--paper);padding:7px 8px;border-radius:7px}.popup-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.popup-actions a{text-align:center;text-decoration:none;padding:9px 5px;border-radius:8px;background:var(--navy);color:white;font-size:8px;font-weight:900}.popup-actions a:last-child{background:var(--green)}.help-modal{position:fixed;z-index:1100;inset:0;background:#071a2fba;display:none;place-items:center;padding:20px;backdrop-filter:blur(7px)}.help-modal.open{display:grid}.help-card{background:white;border-radius:20px;width:min(560px,100%);padding:28px;position:relative;box-shadow:var(--shadow)}.help-card>button:first-child{position:absolute;right:14px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:var(--paper);font-size:22px;cursor:pointer}.help-card>span{font-size:8px;letter-spacing:1.2px;color:var(--green);font-weight:900}.help-card h2{font-size:25px;margin:8px 0 18px}.help-steps{display:grid;gap:10px}.help-steps article{display:grid;grid-template-columns:34px 1fr;gap:12px;border:1px solid var(--line);border-radius:12px;padding:12px}.help-steps article>b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:white}.help-steps h3{font-size:12px;margin:0}.help-steps p{font-size:9px;line-height:1.4;color:var(--muted);margin:4px 0}.help-start{width:100%;border:0;border-radius:10px;padding:12px;background:var(--green);color:white;font-size:10px;font-weight:900;margin-top:14px;cursor:pointer}.mobile-guide{display:none}@media(max-width:850px){.topbar{height:62px;padding:0 12px}.brand small,.help-button{display:none}.traffic-button{font-size:8px;padding:9px}.layout{height:calc(100vh - 62px);display:block}.guide-panel{position:fixed;z-index:900;inset:62px 0 0;transform:translateY(102%);transition:.3s}.guide-panel.open{transform:translateY(0)}.map-wrap{height:100%}.map-message{left:10px;right:10px;top:10px;width:auto}.all-cafes-button{right:10px;top:102px}.simple-legend{left:10px;right:10px;bottom:65px;justify-content:center}.simple-legend>div{flex:1;padding:9px 7px}.mobile-guide{display:block;position:absolute;z-index:650;left:10px;right:10px;bottom:12px;border:0;border-radius:11px;padding:13px;background:var(--navy);color:white;font-size:10px;font-weight:900}}