:root{--sky:#2bb3e6;--sky2:#c9eefc;--pine:#0e7c66;--pine2:#d6f3e8;--sun:#ffb703;--sun2:#fff1c9;--berry:#e8505b;--berry2:#fde2e4;--lav:#7b6cf6;--lav2:#ebe8ff;--ink:#1d2b36;--muted:#5d6d7a;--bg:#f6fbff;--card:#fff;--line:#e3edf3;--r:18px;--nav:68px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--pine);font-weight:600}a:hover{color:#095c4c}
h1,h2,h3{line-height:1.2;margin:0 0 .5rem}h2{font-size:1.45rem}h3{font-size:1.1rem}
p{margin:.4rem 0 .8rem}.muted{color:var(--muted)}.tiny{font-size:.78rem;color:var(--muted)}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer}
/* login */
.login-hero{min-height:100vh;min-height:100dvh;background:#5bb7d8 center/cover no-repeat;position:relative;display:flex;align-items:flex-end;justify-content:center;padding:1rem}
.login-sky{position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,179,230,.25),rgba(14,124,102,.15) 45%,rgba(29,43,54,.65))}
.login-card{position:relative;width:100%;max-width:420px;background:rgba(255,255,255,.96);border-radius:24px;padding:1.4rem 1.3rem 1.1rem;box-shadow:0 20px 50px rgba(0,0,0,.25);margin-bottom:max(1rem,env(safe-area-inset-bottom))}
.login-badge{display:inline-block;background:var(--sun2);color:#8a5a00;font-weight:700;border-radius:99px;padding:.2rem .7rem;font-size:.85rem;margin-bottom:.5rem}
.login-card h1{font-size:1.6rem}
.login-card label{display:block;font-weight:600;font-size:.9rem;margin:.6rem 0}
.login-card input{display:block;width:100%;margin-top:.25rem;font:inherit;font-size:16px;padding:.75rem .9rem;border:2px solid var(--line);border-radius:14px;background:#fbfdff}
.login-card input:focus{outline:none;border-color:var(--sky)}
#loginBtn{width:100%;margin-top:.6rem;padding:.85rem;border:0;border-radius:14px;background:linear-gradient(90deg,var(--pine),#18a383);color:#fff;font-weight:700;font-size:1.05rem}
#loginBtn:disabled{opacity:.6}
.login-msg{min-height:1.3em;color:var(--berry);font-weight:600;margin:.5rem 0 0}
/* app shell */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar .brand{font-weight:800;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .who{font-size:.85rem;color:var(--muted)}
.btn-ghost{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:.35rem .8rem;font-size:.85rem;font-weight:600;color:var(--ink)}
.hero{position:relative;color:#fff;min-height:300px;display:flex;align-items:flex-end;background:#3a9 center/cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(10,40,50,.75))}
.hero-in{position:relative;z-index:1;padding:1.2rem 1rem 1.4rem;max-width:1100px;margin:0 auto;width:100%}
.hero h1{font-size:1.9rem;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{display:inline-flex;align-items:center;gap:.3rem;border-radius:99px;padding:.2rem .65rem;font-size:.82rem;font-weight:700;background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.hero .chip{background:rgba(255,255,255,.9);border:0}
main{max-width:1100px;margin:0 auto;padding:1rem 1rem calc(var(--nav) + 1.5rem + env(safe-area-inset-bottom))}
.tab{display:none}.tab.on{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
.sec{margin:1.2rem 0 1.6rem}
.sec-h{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem}
.sec-h .ico{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:1.15rem;flex:none}
.card{background:var(--card);border-radius:var(--r);padding:1rem;box-shadow:0 2px 0 var(--line),0 6px 20px rgba(30,80,110,.06);margin-bottom:1rem}
.grid{display:grid;gap:1rem}
.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin:.8rem 0 1rem}
.metric{border-radius:16px;padding:.8rem;background:var(--sky2)}
.metric:nth-child(2){background:var(--pine2)}.metric:nth-child(3){background:var(--sun2)}.metric:nth-child(4){background:var(--berry2)}
.metric b{display:block;font-size:1.7rem;line-height:1.1}.metric span{font-weight:700}.metric small{display:block;color:var(--muted);font-size:.78rem}
dl.props{margin:0;display:grid;grid-template-columns:1fr;gap:.15rem .8rem}
dl.props dt{font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700;margin-top:.45rem}
dl.props dd{margin:0}
.rows>div{padding:.6rem 0;border-top:1px solid var(--line)}.rows>div:first-child{border-top:0}
.rows b{display:block}
.links{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.6rem}
.links a{display:inline-flex;flex-direction:column;text-decoration:none;background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:.4rem .7rem;font-size:.86rem;line-height:1.25;color:var(--ink)}
.links a small{color:var(--muted);font-weight:500}
.links a::after{content:" ↗";color:var(--pine)}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:.5rem .45rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.75rem;text-transform:uppercase;color:var(--muted);letter-spacing:.03em}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* segmented */
.seg{display:inline-flex;background:#eaf3f8;border-radius:99px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;border-radius:99px;padding:.4rem .8rem;font-size:.86rem;font-weight:700;color:var(--muted)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
/* timeline */
.timeline{list-style:none;margin:.8rem 0 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:15px;top:6px;bottom:6px;width:3px;background:linear-gradient(var(--sky),var(--pine),var(--sun));border-radius:3px}
.timeline li{position:relative;padding:0 0 1rem 44px}
.timeline li::before{content:attr(data-i);position:absolute;left:3px;top:0;width:27px;height:27px;border-radius:50%;background:#fff;border:3px solid var(--pine);display:grid;place-items:center;font-size:.75rem;font-weight:800}
.timeline .t{font-weight:800;color:var(--pine)}
/* filters */
.filters{background:#fff;border-radius:var(--r);padding:.5rem .8rem;margin:.6rem 0;box-shadow:0 2px 0 var(--line)}
.frow{display:flex;gap:.4rem;overflow-x:auto;padding:.2rem 0;scrollbar-width:none}.frow::-webkit-scrollbar{display:none}
.frow .lbl{font-size:.75rem;font-weight:800;text-transform:uppercase;color:var(--muted);align-self:center;flex:none;min-width:78px}
.fchip{flex:none;border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:.35rem .75rem;font-size:.85rem;font-weight:700;color:var(--ink)}
.fchip.on{background:var(--pine);border-color:var(--pine);color:#fff}
.count{font-size:.85rem;color:var(--muted);margin:.3rem 0 .6rem}
/* hike cards */
.hike{padding:0;overflow:hidden;scroll-margin-top:64px}
.gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;background:#dcecf3}
.gal figure{flex:0 0 100%;margin:0;scroll-snap-align:start;position:relative}
.gal img{display:block;width:100%;height:230px;object-fit:cover;background:#cfe6ef}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.2rem .7rem .45rem;font-size:.72rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.gal figcaption a{color:#fff;font-weight:600}
.gal-count{position:absolute;top:.6rem;right:.6rem;background:rgba(0,0,0,.55);color:#fff;border-radius:99px;font-size:.75rem;padding:.1rem .5rem;font-weight:700}
.nophoto{height:150px;display:grid;place-items:center;text-align:center;padding:1rem;color:#fff;font-weight:700;background:linear-gradient(135deg,var(--sky),var(--pine))}
.hike-b{padding:1rem}
.hike-n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sun);font-weight:800;font-size:.85rem;margin-right:.35rem}
.d-facile{background:var(--pine2);color:#075645;border-color:transparent}.d-media{background:var(--sun2);color:#7a4d00;border-color:transparent}.d-impegnativa{background:var(--berry2);color:#a1222c;border-color:transparent}.d-senza{background:var(--lav2);color:#4b3db8;border-color:transparent}
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin:.8rem 0}
.kv div{background:var(--bg);border-radius:12px;padding:.5rem .6rem;font-size:.85rem}
.kv b{display:block;font-size:.7rem;text-transform:uppercase;color:var(--muted);letter-spacing:.03em}
.price{background:var(--sun2);border-radius:14px;padding:.7rem .8rem;margin:.6rem 0;font-size:.92rem}
.price b{display:block;font-size:.75rem;text-transform:uppercase;color:#8a5a00}
details{border-top:1px solid var(--line);margin-top:.6rem}
summary{cursor:pointer;font-weight:800;padding:.7rem 0;color:var(--pine);list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"＋";float:right}details[open] summary::after{content:"－"}
.note{background:var(--lav2);border-radius:14px;padding:.7rem .8rem;font-size:.9rem}
/* scatter */
.scatter svg{width:100%;height:auto;display:block}
/* rooms */
.floor h3{display:flex;align-items:center;gap:.4rem}
.rooms{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.room{border-radius:14px;padding:.7rem;background:var(--sky2)}
.room.free{background:#f0f4f6;color:var(--muted)}
.room b{font-size:1.2rem}.room .f{font-weight:800}.room small{display:block;font-size:.78rem;color:var(--muted)}
.plan img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
/* calc */
.calc label{display:block;font-weight:600;font-size:.88rem;margin:.5rem 0}
.calc input[type=number]{width:100%;font:inherit;font-size:16px;padding:.6rem .7rem;border:2px solid var(--line);border-radius:12px}
.toggle{display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:.9rem;margin:.6rem 0}
.toggle input{width:22px;height:22px;accent-color:var(--pine)}
.total{font-size:1.4rem;font-weight:800;color:var(--pine)}
.check li{list-style:none;padding:.45rem 0;border-top:1px solid var(--line)}.check{padding:0;margin:0}
.check .ok{color:var(--pine)}.check .todo{color:var(--berry)}
.kids{display:flex;flex-wrap:wrap;gap:.4rem}
/* bottom nav */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -6px 20px rgba(30,80,110,.08)}
.nav button{flex:1;border:0;background:none;padding:.45rem .1rem .5rem;display:flex;flex-direction:column;align-items:center;gap:.1rem;font-size:.66rem;font-weight:700;color:var(--muted);min-height:var(--nav)}
.nav button .i{font-size:1.3rem;line-height:1.2;filter:grayscale(.6);transition:transform .15s}
.nav button.on{color:var(--pine)}.nav button.on .i{filter:none;transform:translateY(-2px) scale(1.12)}
@media (min-width:760px){
 .metrics{grid-template-columns:repeat(4,1fr)}
 .grid.two{grid-template-columns:1fr 1fr}
 .hikes{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
 .rooms{grid-template-columns:repeat(3,1fr)}
 .gal img{height:280px}
 .hero{min-height:380px}.hero h1{font-size:2.6rem}
 dl.props{grid-template-columns:170px 1fr}dl.props dt{margin-top:.5rem}dl.props dd{margin-top:.45rem}
 .nav{left:50%;right:auto;transform:translateX(-50%);bottom:14px;border-radius:22px;border:1px solid var(--line);width:min(720px,94vw)}
}
@media (min-width:1100px){.hikes{grid-template-columns:1fr 1fr 1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
#app:not(.home) .hero{display:none}
.grid>.card{margin-bottom:0}
.a2hs{position:fixed;left:.75rem;right:.75rem;bottom:calc(var(--nav) + .75rem + env(safe-area-inset-bottom));z-index:40;background:#fff;border-radius:20px;padding:1rem 1rem .8rem;box-shadow:0 12px 40px rgba(20,60,80,.28);border:2px solid var(--sun);font-size:.9rem;animation:fade .3s ease;max-width:520px;margin:0 auto}
.a2hs-h{display:flex;gap:.7rem;align-items:center;margin-bottom:.3rem;padding-right:1.6rem}.a2hs-h img{border-radius:10px}
.a2hs p{margin:.45rem 0}.kbd{display:inline-block;background:var(--sky2);border-radius:6px;padding:0 .35rem;font-weight:700}
.a2hs-x{position:absolute;top:.5rem;right:.6rem;border:0;background:none;font-size:1.1rem;color:var(--muted);padding:.3rem}
.a2hs-btn{width:100%;border:0;border-radius:12px;padding:.7rem;background:var(--pine);color:#fff;font-weight:800;margin-top:.3rem}
.a2hs-later{width:100%;border:0;background:none;color:var(--muted);font-weight:700;padding:.5rem;margin-top:.1rem}
@media (min-width:760px){.a2hs{bottom:100px}}