:root{
    --bg:#eef2ec;
    --surface:#ffffff;
    --surface2:#f1f5f0;
    --text:#14201a;
    --muted:#62716a;
    --border:#e2e8e0;
    --primary:#1f8a5b;
    --on-primary:#ffffff;
    --accent:#e3f3ea;
    --accent-text:#1f6e4a;
}

*{box-sizing:border-box;}

html,body{margin:0;padding:0;height:100%;}
body{background:#d9e0d6;font-family:'Manrope',system-ui,sans-serif;color:var(--text);}

.app{width:100%;max-width:1240px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;}

.header{padding:24px 24px 18px;background:var(--bg);}
.header-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.kicker{font-size:11px;font-weight:800;letter-spacing:1.7px;text-transform:uppercase;color:var(--primary);}
.title{font-size:2.4rem;font-weight:800;line-height:1.05;margin-top:8px;}
.subtitle{font-size:0.95rem;color:var(--muted);margin-top:12px;max-width:860px;line-height:1.5;}
.brief{margin:14px 0 0;color:var(--text);max-width:880px;line-height:1.6;font-size:1rem;}
.disclaimer{margin:12px 0 0;color:var(--muted);font-size:0.94rem;}
.disclaimer a{color:var(--primary);text-decoration:none;font-weight:700;}
.disclaimer a:hover{text-decoration:underline;}
.visit-count{margin-top:10px;font-size:0.88rem;color:var(--muted);}

.selector{display:flex;align-items:flex-end;gap:16px;margin-top:20px;flex-wrap:wrap;}
.selector > div{flex:1;min-width:240px;}
.selector label{display:block;margin-bottom:10px;font-size:0.95rem;font-weight:700;letter-spacing:0.02em;}
.selector select{width:100%;padding:16px 18px;border-radius:16px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:1rem;outline:none;transition:border-color .2s ease;}
.selector select:focus{border-color:var(--primary);}
.note{font-size:0.95rem;color:var(--muted);line-height:1.5;}

.tabs{display:flex;gap:8px;margin-top:20px;background:var(--surface2);border-radius:16px;padding:6px;}
.tab{flex:1;border:0;background:transparent;color:var(--muted);padding:12px 0;font-size:0.95rem;font-weight:700;cursor:pointer;border-radius:12px;transition:background .2s,color .2s;}
.tab.active{background:var(--primary);color:var(--on-primary);box-shadow:0 8px 22px rgba(31,138,91,.18);}

.body{position:relative;flex:1;min-height:calc(100vh - 290px);}

.map-view{position:relative;min-height:540px;background:var(--surface2);border-radius:24px 24px 0 0;overflow:hidden;}
#map{position:absolute;inset:0;}
.count-chip{position:absolute;top:18px;left:18px;z-index:10;display:inline-flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px 14px;font-size:0.95rem;font-weight:700;box-shadow:0 16px 36px rgba(0,0,0,.14);}
.count-chip .dot{width:9px;height:9px;border-radius:50%;background:var(--primary);}

.sheet{position:absolute;left:16px;right:16px;bottom:16px;z-index:12;background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:16px 18px 22px;box-shadow:0 18px 48px rgba(0,0,0,.18);animation:sheetUp .24s ease forwards;}
@keyframes sheetUp{from{transform:translateY(14px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.grab{width:46px;height:4px;border-radius:999px;background:#dfe5dc;margin:0 auto 14px;}
.sheet-head{display:flex;align-items:flex-start;gap:13px;}
.pin{width:36px;height:36px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--primary);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(31,138,91,.25);}
.pin span{transform:rotate(45deg);color:var(--on-primary);font-size:13px;font-weight:800;}
.sheet-school{font-size:1.1rem;font-weight:800;line-height:1.2;}
.sheet-town{margin-top:4px;font-size:0.95rem;color:var(--muted);}
.badge{margin-left:auto;background:var(--accent);color:var(--accent-text);padding:6px 11px;border-radius:10px;font-size:0.82rem;font-weight:800;}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px;}
.chip{background:var(--surface2);border:1px solid var(--border);padding:8px 11px;border-radius:11px;font-size:0.86rem;font-weight:700;}
.chip.muted{color:var(--muted);}
.cta{display:inline-flex;align-items:center;justify-content:center;margin-top:15px;padding:13px 16px;border-radius:14px;background:var(--primary);color:var(--on-primary);text-decoration:none;font-size:0.95rem;font-weight:700;}
.hint{padding:18px 20px;font-size:0.96rem;color:var(--muted);text-align:center;}

.list-view{position:relative;min-height:540px;background:var(--bg);border-radius:0 0 24px 24px;padding:22px 20px 18px;overflow:auto;}
.list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;}
.list-count{font-size:1rem;font-weight:800;}
.list-count span{color:var(--muted);font-weight:600;}
.sort{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--border);font-size:0.88rem;font-weight:700;color:var(--muted);}
.sort .chev{width:6px;height:6px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);}
.cards{display:grid;gap:14px;}
.card{display:flex;align-items:center;gap:14px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:18px;cursor:pointer;transition:transform .2s,box-shadow .2s;}
.card:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(0,0,0,.08);}
.card-pin{width:42px;height:42px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;color:var(--on-primary);font-weight:800;font-size:15px;}
.card-body{flex:1;min-width:0;}
.card-school{font-size:1rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.card-town{margin-top:4px;font-size:0.92rem;color:var(--muted);}
.card-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.tag{background:var(--surface2);color:var(--muted);padding:6px 10px;border-radius:10px;font-size:0.82rem;font-weight:700;}
.card .chev{width:8px;height:8px;border-right:2px solid #c5d0c5;border-bottom:2px solid #c5d0c5;transform:rotate(-45deg);}

.hidden{display:none !important;}

@media (max-width: 900px){
    .header-top{flex-direction:column;}
    .selector{flex-direction:column;align-items:stretch;}
    .body{min-height:calc(100vh - 360px);}
}

@media (max-width: 720px){
    .app{max-width:100%;}
    .header{padding:18px 16px 14px;}
    .tabs{gap:6px;}
    .tab{padding:11px 0;font-size:0.9rem;}
    .map-view,.list-view{min-height:420px;border-radius:20px;}
    .count-chip{top:12px;left:12px;padding:9px 12px;}
    .sheet{left:12px;right:12px;bottom:12px;padding:14px 16px;}
    .list-view{padding:18px 16px 16px;}
}