
:root{
  --bg:#f4f0e7;--ink:#142438;--muted:#6d7680;--gold:#b8860b;--panel:#fff;
  --line:#ddd4c6;--accent:#c93f5b;--shadow:0 16px 40px rgba(24,35,49,.14)
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink)}
a{color:inherit}
.topbar{height:70px;display:flex;align-items:center;gap:18px;padding:0 22px;background:#fff;border-bottom:1px solid var(--line)}
.brand{font-weight:800;letter-spacing:.02em}.brand span{color:var(--gold)}
.tabs{display:flex;gap:8px;flex-wrap:wrap}.tabs a{padding:9px 12px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-size:13px;background:#fff}
.tabs a.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.metric{margin-left:auto;font-size:12px;color:var(--muted)}
.shell{height:calc(100% - 70px);display:grid;grid-template-columns:minmax(0,1fr) 370px}
.map-wrap{position:relative;min-width:0;background:#d9dde2}
#map,.map-host{width:100%;height:100%}
.side{background:#fff;border-left:1px solid var(--line);overflow:auto;padding:14px}
.side h2{margin:2px 0 4px;font-size:20px}.side p{margin:0 0 14px;color:var(--muted);font-size:13px;line-height:1.4}
.event-card{border:1px solid var(--line);border-radius:14px;padding:12px;margin:0 0 9px;background:#fff;cursor:pointer;transition:.15s}
.event-card:hover,.event-card.active{border-color:var(--gold);box-shadow:0 5px 18px rgba(184,134,11,.12);transform:translateY(-1px)}
.event-card .title{font-weight:750;font-size:14px}.event-card .meta{margin-top:5px;color:var(--muted);font-size:12px}
.pin{width:27px;height:27px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--accent);border:3px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.pin::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff;position:absolute;left:7px;top:7px}
.pin.selected{background:var(--gold);width:32px;height:32px}
.hero{max-width:980px;margin:46px auto;padding:0 22px}
.hero h1{font-size:42px;margin:0 0 10px}.hero h1 span{color:var(--gold)}
.hero p{font-size:18px;color:var(--muted);line-height:1.5;max-width:760px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.choice{display:block;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;text-decoration:none;box-shadow:var(--shadow)}
.choice h3{margin:0 0 8px}.choice p{font-size:14px;margin:0;color:var(--muted)}.choice b{display:inline-block;margin-top:16px;color:var(--gold)}
.key-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(20,36,56,.72);z-index:20}
.key-card{max-width:520px;background:#fff;border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.key-card h3{margin:0 0 7px}.key-card p{color:var(--muted);font-size:13px;line-height:1.45}
.key-row{display:flex;gap:8px}.key-row input{flex:1;padding:11px;border:1px solid var(--line);border-radius:10px}.key-row button{padding:11px 14px;border:0;border-radius:10px;background:var(--ink);color:#fff;font-weight:700}
.key-note{font-size:11px!important;margin-top:8px!important}
.google-error{position:absolute;left:18px;bottom:18px;right:18px;background:#fff5f5;color:#8a2435;padding:12px 14px;border-radius:12px;z-index:30;box-shadow:var(--shadow);display:none}
@media(max-width:760px){
 .topbar{height:auto;min-height:66px;padding:10px 12px;align-items:flex-start;flex-direction:column;gap:8px}.metric{position:absolute;right:12px;top:12px}
 .shell{height:auto;min-height:calc(100% - 80px);display:block}.map-wrap{height:58vh}.side{border-left:0;border-top:1px solid var(--line);overflow:visible;padding:11px}
 .event-list{display:flex;gap:9px;overflow-x:auto;padding-bottom:9px;scroll-snap-type:x mandatory}.event-card{min-width:260px;scroll-snap-align:start;margin:0}
 .side h2,.side>p{display:none}.grid{grid-template-columns:1fr}.hero{margin:26px auto}.hero h1{font-size:34px}
}
