/* Оформление по макету «Гуанчжоу — путеводитель». Акцентный цвет города меняется одной переменной --acc. */
:root{
  --bg:#F5F2EC; --surf:#fff; --surf2:#ECE8E0; --ink:#1A1815; --ink2:#55504A; --line:#DDD7CC;
  --acc:#C23A2B; --accInk:#fff; --accSoft:#F7DDD7;
  --ok:#17653A; --okBg:#DCEFE2; --warn:#9A4A00; --warnBg:#FBE9D2;
  --tab:68px; --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --font:-apple-system,system-ui,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  --zh:"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#121416;--surf:#1C1F22;--surf2:#2A2E33;--ink:#F3F0EA;--ink2:#BDB8AF;--line:#363B41;
    --acc:#FF7A66;--accInk:#1A0B08;--accSoft:#3E2420;--ok:#6FD39A;--okBg:#173323;--warn:#FFB066;--warnBg:#3A2A18}
  .leaflet-tile{filter:brightness(.88) saturate(.9)}
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{font:17px/1.4 var(--font);color:var(--ink);background:var(--bg);overscroll-behavior:none;-webkit-text-size-adjust:100%}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0;text-align:inherit}
a{color:inherit}
h1{font:700 32px/38px var(--font);letter-spacing:-.4px;margin:0}
h1 small{font:500 18px/1 var(--font);color:var(--ink2);letter-spacing:0}
h2,h3,p{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
svg{flex:none;display:block}
.zh{font-family:var(--zh)}

#app{height:100%;display:flex;flex-direction:column}
main{flex:1;position:relative;min-height:0}
.view{position:absolute;inset:0;display:none;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:28px}
.view.on{display:block}
#v-map{overflow:hidden;padding:0}
#map{position:absolute;inset:0;background:#EDE9E0}
.wrap{max-width:640px;margin:0 auto}

/* нижние вкладки */
.tabs{display:flex;gap:4px;background:var(--surf);border-top:1px solid var(--line);padding:6px 8px calc(6px + var(--safe-b));z-index:500}
.tabs button{flex:1;min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:14px;position:relative;color:var(--ink2);font:600 12px/14px var(--font)}
.tabs .on{color:var(--acc);background:var(--accSoft)}
.tabs b{position:absolute;top:2px;left:calc(50% + 6px);min-width:20px;height:20px;border-radius:10px;background:var(--acc);color:var(--accInk);font:700 12px/20px var(--font);text-align:center;padding:0 5px}

/* чипсы */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.chips.scroll::-webkit-scrollbar{display:none}
.chip{flex:none;white-space:nowrap;height:44px;padding:0 15px;border-radius:22px;display:inline-flex;align-items:center;gap:6px;background:var(--surf);color:var(--ink);border:1.5px solid var(--line);font:600 15px/1 var(--font)}
.chip small{font:500 15px/1 var(--font);opacity:.75}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip.soft{background:var(--surf2);border-color:transparent}
.chip.soft.on{background:var(--ink);color:var(--bg)}
.chip.cat{background:var(--surf2);border-color:transparent;padding:0 14px 0 10px;gap:8px}
.chip.cat.on{background:var(--accSoft);color:var(--acc)}

/* шапка карты */
.mapbar{position:absolute;left:0;right:0;top:0;z-index:450;padding:calc(var(--safe-t) + 10px) 14px 0;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.mapbar>*{pointer-events:auto}
.cityplate{height:48px;background:var(--surf);border-radius:16px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.cityplate b{font:700 19px/1 var(--font);white-space:nowrap}
.cityplate b span{font-family:var(--zh);font-weight:600;color:var(--ink2);margin-left:4px}
.cityplate em{font:600 15px/1 var(--font);font-style:normal;color:var(--acc);display:flex;align-items:center;gap:6px}
.mapbar .chips{margin:0 -14px;padding:0 14px 6px}
.mapbar .chip{border-color:transparent;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.fab{position:absolute;right:14px;bottom:20px;z-index:450;width:52px;height:52px;border-radius:26px;background:var(--surf);color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.fab.busy{animation:pulse 1s infinite}
.fab.up{bottom:104px}
.fab.layers{bottom:84px}
.fab.layers.up{bottom:168px}
.fab.food{bottom:148px}
.fab.food.up{bottom:232px}
.pin.did{opacity:.5;filter:grayscale(.35)}
.tstop.did,.pc.did{opacity:.55}
.donebtn{height:40px;padding:0 12px;border-radius:12px;background:var(--surf2);font:600 14px/1 var(--font);display:inline-flex;align-items:center;gap:6px}
.donebtn.on{background:var(--okBg);color:var(--ok)}
.foodcard{padding:12px 0;border-bottom:1px solid var(--line)}
.foodcard .zh{font:700 22px/28px var(--zh)}
.foodcard b{display:block;font:700 16px/22px var(--font);margin-top:2px}
.foodcard small{display:block;color:var(--ink2);margin:4px 0 8px}
.gate{min-height:100%;display:flex;align-items:center;justify-content:center;padding:32px 20px}
.gatebox{width:min(100%,420px);background:var(--surf);border-radius:24px;padding:28px 22px;box-shadow:0 8px 32px rgba(0,0,0,.12)}
.gatebox h1{font:700 28px/34px var(--font);margin:0 0 10px}
.gatebox p{color:var(--ink2);margin:0 0 16px}
.gatebox form{display:flex;gap:8px}
.gatebox input{flex:1;min-width:0;height:52px;border-radius:14px;border:1.5px solid var(--line);background:var(--surf);padding:0 14px;font:600 18px/1 var(--font)}
.gatebad{color:var(--acc);font-weight:600}
@keyframes pulse{50%{opacity:.4}}
.mapcard{position:absolute;left:14px;right:14px;z-index:460;background:var(--surf);border-radius:18px;padding:12px 14px 12px 18px;display:flex;align-items:center;gap:12px;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.mapcard.top{top:calc(var(--safe-t) + 10px)}
.mapcard.bottom{bottom:20px}
.mapcard .t{flex:1;min-width:0;font:600 17px/22px var(--font)}
.mapcard .t small{display:block;font:500 14px/19px var(--font);color:var(--ink2)}
.mapcard button{flex:none;min-height:44px;padding:0 16px;border-radius:12px;background:var(--surf2);font:600 15px/1 var(--font)}

/* метки */
.pin{width:34px;height:34px;border-radius:50%;background:var(--c);color:#fff;border:2.5px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;position:relative}
.pin.sel{width:42px;height:42px;border-width:3px;box-shadow:0 0 0 3px var(--acc),0 3px 8px rgba(0,0,0,.4)}
.pin.sel::after{content:"";position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:11px;background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px no-repeat;border:2px solid #fff}
.pin.num{width:36px;height:36px;background:var(--acc);color:var(--accInk);border-width:3px;font:700 17px/1 var(--font)}
.pin.hotel{width:38px;height:38px;border-radius:11px;background:#1A1815}
.pin.me{width:20px;height:20px;background:#1F6FEB;border-width:3px;box-shadow:0 0 0 9px rgba(31,111,235,.25)}
.z-far .pin:not(.num):not(.hotel):not(.me){transform:scale(.72)}
.leaflet-container{font:inherit;background:#EDE9E0}
.leaflet-control-attribution{font-size:10px}

/* фото и заглушка */
.ph{background:repeating-linear-gradient(135deg,var(--c),var(--c) 12px,var(--c2) 12px,var(--c2) 24px);color:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* кнопки */
.btn{flex:1;min-width:0;height:48px;border-radius:14px;border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 16px/1 var(--font);text-decoration:none;color:var(--ink);padding:0 14px;text-align:center}
.btn.pri{height:54px;border-radius:16px;background:var(--acc);color:var(--accInk);border:0;font:700 18px/1 var(--font)}
.btn.pri.sel{background:var(--accSoft);color:var(--acc);border:2px solid var(--acc)}
.btn.ink{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:700}
.btn.soft{background:var(--surf2);border-color:transparent}
.btn.danger{border-color:var(--warn);color:var(--warn);font-weight:700}
.btn.wide{width:100%;flex:none;display:flex}
.btnrow{display:flex;gap:8px;margin-top:8px}
.x{position:absolute;right:8px;top:8px;width:44px;height:44px;border-radius:22px;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;z-index:2}
.badges{display:flex;flex-wrap:wrap;gap:6px}
.badge{height:28px;padding:0 11px;border-radius:14px;font:600 13px/28px var(--font);white-space:nowrap;background:var(--surf2);color:var(--ink)}
.badge.cat{background:var(--c);color:#fff}
.badge.top{background:var(--ink);color:var(--bg)}
.badge.secret{background:var(--accSoft);color:var(--acc)}
.badge.ok{background:var(--okBg);color:var(--ok)}
.badge.warn{background:var(--warnBg);color:var(--warn)}
.badge.off{color:var(--ink2)}

/* шторка места */
.scrim{position:fixed;inset:0;z-index:590;background:rgba(0,0,0,.18)}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:600;background:var(--surf);border-radius:26px 26px 0 0;padding:8px 20px calc(14px + var(--safe-b));box-shadow:0 -6px 24px rgba(0,0,0,.25);max-height:88vh;overflow-y:auto;animation:up .22s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:0}}
@media (prefers-reduced-motion:reduce){.sheet,.detail{animation:none}}
.sheet .grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 10px}
.sheet .ph{height:140px;border-radius:16px}
.sheet .ttl{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:12px}
.sheet .ttl h2{font:700 24px/28px var(--font)}
.sheet .ttl .zh{font:600 20px/1 var(--zh);color:var(--ink2)}
.sheet .en{font:500 13px/18px var(--font);color:var(--ink2)}
.sheet .desc{font:400 17px/24px var(--font);margin-top:6px}
.sheet .badges{margin-top:10px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.facts div{background:var(--surf2);border-radius:12px;padding:8px 12px;min-width:0}
.facts dt{font:600 12px/16px var(--font);color:var(--ink2)}
.facts dd{margin:0;font:600 15px/19px var(--font);overflow-wrap:anywhere}
.sheet .btnrow.first{margin-top:14px}
.linkbtn{display:block;width:100%;text-align:center;font:500 14px/44px var(--font);color:var(--ink2);text-decoration:underline;margin-top:4px}

/* подробная страница */
.detail{position:fixed;inset:0;z-index:700;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch;animation:up .2s ease-out;padding-bottom:calc(92px + var(--safe-b))}
.detail .ph{height:250px}
.detail .x{position:fixed;right:14px;top:calc(var(--safe-t) + 12px);width:46px;height:46px;border-radius:23px}
.detail .body{padding:20px 20px 0;display:flex;flex-direction:column;gap:14px}
.detail h1{font:700 29px/34px var(--font);letter-spacing:-.3px}
.hancard{display:flex;align-items:center;gap:12px;background:var(--surf);border:1.5px solid var(--line);border-radius:18px;padding:12px 12px 12px 18px}
.hancard .l{flex:1;min-width:0}
.hancard .zh{font:600 32px/40px var(--zh);overflow-wrap:anywhere}
.hancard small{display:block;font:500 13px/18px var(--font);color:var(--ink2)}
.hancard button{flex:none;min-height:48px;padding:6px 14px;border-radius:14px;background:var(--ink);color:var(--bg);display:flex;align-items:center;gap:8px;font:700 15px/18px var(--font);text-align:center}
.detail .badge{height:30px;border-radius:15px;padding:0 12px;font:600 14px/30px var(--font)}
.listen{height:56px;border-radius:28px;background:var(--surf2);display:flex;align-items:center;gap:12px;padding:0 20px 0 6px;width:100%;font:700 17px/1 var(--font)}
.listen i{width:44px;height:44px;border-radius:22px;background:var(--acc);color:var(--accInk);display:flex;align-items:center;justify-content:center}
.listen.on i{background:var(--ink);color:var(--bg)}
.prose{display:flex;flex-direction:column;gap:14px;font:400 19px/30px var(--font)}
.tip{background:var(--accSoft);border-radius:18px;padding:16px 18px;display:flex;gap:12px}
.tip>svg{color:var(--acc)}
.tip b{display:block;font:700 15px/20px var(--font);color:var(--acc)}
.tip span{font:500 17px/25px var(--font)}
.cond{background:var(--surf);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:12px;border:1px solid var(--line)}
.cond h3{font:700 20px/1 var(--font)}
.cond .r{display:flex;gap:12px;align-items:flex-start}
.cond .r>svg{color:var(--ink2);margin-top:2px}
.cond .r small{display:block;font:600 13px/16px var(--font);color:var(--ink2)}
.cond .r span{font:600 17px/23px var(--font)}
.cond .btn{height:50px;font:700 15px/1.1 var(--font)}
.cond .btnrow{margin:0}
.note{font:400 13px/18px var(--font);color:var(--ink2)}
.detailbar{position:fixed;left:0;right:0;bottom:0;z-index:710;background:var(--bg);border-top:1px solid var(--line);padding:12px 16px calc(12px + var(--safe-b));display:flex}

/* карточка для таксиста */
.taxi{position:fixed;inset:0;z-index:800;background:#fff;color:#111;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(var(--safe-t) + 110px) 24px calc(var(--safe-b) + 50px);text-align:center}
.taxi .x{right:16px;top:calc(var(--safe-t) + 12px);width:48px;height:48px;border-radius:24px;background:#EEE;color:#111}
.taxi .ask{font:600 30px/40px var(--zh)}
.taxi .big{font:700 clamp(54px,24vw,104px)/1.15 var(--zh);letter-spacing:4px;word-break:break-all}
.taxi .ru{font:600 20px/26px var(--font);color:#444}
.taxi .lat{font:500 16px/22px var(--font);color:#555}

/* заголовки страниц */
.pagehead{padding:calc(var(--safe-t) + 18px) 16px 10px;position:sticky;top:0;background:var(--bg);z-index:5}
.pagehead .sum{font:500 16px/22px var(--font);color:var(--ink2)}
.pagehead .chips.scroll{margin:12px -16px 0;padding:0 16px 2px}
.search{margin-top:12px;height:48px;border-radius:14px;background:var(--surf);border:1.5px solid var(--line);display:flex;align-items:center;gap:10px;padding:0 14px;color:var(--ink2)}
.search input{flex:1;min-width:0;border:0;background:none;outline:0;font:500 17px/1 var(--font);color:var(--ink);height:100%}
.search input::placeholder{color:var(--ink2)}

/* список мест */
.list{padding:4px 16px 0;display:flex;flex-direction:column;gap:8px}
.pc{display:flex;gap:12px;align-items:center;padding:10px;border-radius:18px;background:var(--surf);border:2px solid transparent;cursor:pointer}
.pc.sel{background:var(--accSoft);border-color:var(--acc)}
.pc .ph{flex:none;width:76px;height:76px;border-radius:12px}
.pc .txt{flex:1;min-width:0}
.pc h3{font:700 17px/21px var(--font)}
.pc h3 span{font:500 14px/1 var(--zh);color:var(--ink2)}
.pc .meta{font:600 13px/18px var(--font);color:var(--ink2)}
.pc .s{font:400 14px/19px var(--font);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tgl{flex:none;width:46px;height:46px;border-radius:23px;display:flex;align-items:center;justify-content:center;background:var(--surf2);color:var(--ink)}
.tgl.sel{background:var(--acc);color:var(--accInk)}
.empty{margin-top:70px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 36px}
.empty .ic{width:76px;height:76px;border-radius:38px;background:var(--surf2);color:var(--ink2);display:flex;align-items:center;justify-content:center}
.empty b{font:700 23px/29px var(--font)}
.empty p{font:400 17px/24px var(--font);color:var(--ink2)}
.empty .btn{flex:none;margin-top:8px;padding:0 24px}
.empty .btn.soft{height:48px}

/* маршрут */
#plan{padding:4px 16px 0}
.daysum{background:var(--surf);border:1px solid var(--line);border-radius:16px;padding:12px 14px;font:600 15px/22px var(--font)}
.tl{margin-top:14px;display:flex;flex-direction:column}
.tr{display:flex;gap:10px}
.tr .tt{width:50px;flex:none;font:600 14px/20px var(--font);color:var(--ink2);padding-top:2px;font-variant-numeric:tabular-nums}
.tr .tt b{display:block;color:var(--ink);font-weight:700}
.tr .rail{width:34px;flex:none;display:flex;flex-direction:column;align-items:center}
.tr .dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--ink2);margin-top:6px}
.tr .dot.big{width:14px;height:14px}
.tr .dot.end{background:var(--ink)}
.tr .dot.n{width:30px;height:30px;margin-top:6px;background:var(--c);color:#fff;display:flex;align-items:center;justify-content:center;font:700 16px/1 var(--font)}
.tr .rail i{flex:1;width:0;border-left:3px solid var(--line);margin-top:2px;min-height:10px}
.tr.move .rail i{border-left-style:dashed}
.tr.last .rail i{display:none}
.tr .tc{flex:1;min-width:0;padding-bottom:12px}
.tnote{background:var(--surf2);border-radius:14px;padding:12px 14px;font:600 16px/22px var(--font);display:flex;align-items:center;gap:8px}
.tnote svg{color:var(--ink2)}
.tmove .h{display:flex;align-items:center;gap:8px;font:600 15px/20px var(--font)}
.tmove .h svg{color:var(--ink2)}
.tmove .m{font:500 14px/19px var(--font);color:var(--ink2);margin-top:2px}
.tmove a{display:inline-block;font:700 15px/40px var(--font);color:var(--acc);text-decoration:underline}
.tstop{background:var(--surf);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.tstop.bad{border:2px solid var(--acc)}
.tstop .top{padding:12px 4px 10px 14px;display:flex;gap:4px}
.tstop .b{flex:1;min-width:0;cursor:pointer}
.tstop h3{font:700 17px/22px var(--font)}
.tstop .zh{font:500 14px/18px var(--zh);color:var(--ink2)}
.tstop .meta{font:600 14px/20px var(--font);margin-top:4px}
.tstop .nt{font:500 13px/18px var(--font);color:var(--ink2);margin-top:3px}
.tstop .nt.warn{color:var(--warn);font-weight:600}
.tstop .nt.bad{color:var(--acc);font-weight:700}
.ctl{display:flex;gap:6px;padding:8px;background:var(--surf2);flex-wrap:wrap}
.ctl button,.ctl select{height:44px;border-radius:12px;background:var(--surf);border:0;padding:0 12px;font:600 14px/1 var(--font);color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.ctl select{flex:1;min-width:120px;-webkit-appearance:none;appearance:none;text-align:center}
.autobar{margin-bottom:12px}
.autobar .btn{height:52px}
.autobar .btn+.btn{margin-top:8px;height:48px}
.autobar .btn.pri{font-size:17px}
.autobar .mode{font:500 14px/19px var(--font);color:var(--ink2);margin-top:8px;text-align:center}
.why{border:0;background:var(--accSoft);border-radius:18px;margin-top:12px;padding:0 16px}
.why summary{min-height:52px;color:var(--acc);font:700 16px/22px var(--font);justify-content:flex-start}
.why summary span{flex:1}
.why summary svg{color:var(--acc)}
.why ul{margin:0;padding:0 0 14px 20px;display:flex;flex-direction:column;gap:8px;font:400 15px/22px var(--font)}
.why li b{font-weight:700}
.un{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;font:500 15px/20px var(--font)}
.un button{flex:none;height:40px;padding:0 12px;border-radius:12px;background:var(--surf);font:600 14px/1 var(--font)}
.tstop .rm{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ink2)}
.warnbox{background:var(--warnBg);border-radius:18px;padding:14px 16px;margin-bottom:12px}
.warnbox h3{display:flex;align-items:center;gap:8px;font:700 17px/22px var(--font);color:var(--warn)}
.warnbox p{font:500 15px/21px var(--font);margin-top:6px}
.warnbox p.note{font:400 13px/18px var(--font);color:var(--ink2)}
.freeday{border:1.5px dashed var(--line);border-radius:18px;padding:18px;color:var(--ink2);font:600 17px/24px var(--font);margin-top:14px}
.freeday small{display:block;font:400 15px/21px var(--font)}
.planbtns{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.planbtns .btnrow{margin:0}
.planbtns .btn{height:50px;font-size:15px}
.planbtns .btn.pri{height:54px;font-size:17px}
#plan .note{margin-top:12px}

/* настройки */
.settings{padding:4px 16px 0;display:flex;flex-direction:column;gap:12px}
.card{background:var(--surf);border-radius:20px;padding:16px}
.card h3{font:700 17px/1 var(--font);margin-bottom:12px}
.card .hint{font:400 15px/21px var(--font);color:var(--ink2);margin-top:10px}
.srow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;font:600 17px/1.2 var(--font)}
.srow+.srow{margin-top:8px}
.srow.sep{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.srow input{min-height:44px;padding:0 12px;border-radius:12px;background:var(--surf2);border:0;font:600 16px/1 var(--font);color:var(--ink);max-width:190px;-webkit-appearance:none;appearance:none}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:48px;height:48px;border-radius:24px;background:var(--surf2);display:flex;align-items:center;justify-content:center}
.stepper b{width:36px;text-align:center;font:700 24px/1 var(--font);font-variant-numeric:tabular-nums}
.stack{display:flex;flex-direction:column;gap:8px}
.opt{min-height:48px;padding:0 16px;border-radius:14px;display:flex;align-items:center;background:var(--surf2);font:600 16px/1.2 var(--font);width:100%}
.opt.on{background:var(--ink);color:var(--bg)}
.opt.two{min-height:58px;padding:8px 16px}
.opt.two small{display:block;font:500 13px/17px var(--font);opacity:.75}
.card .btn.pri{height:52px;font-size:17px;margin-top:14px}
.card .btn.out{height:50px;margin-top:12px}
.bar{margin-top:12px;height:10px;border-radius:5px;background:var(--surf2);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--acc);transition:width .2s}
.rowcard{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rowcard h3{margin:0;font:700 17px/22px var(--font)}
.rowcard small{font:500 15px/21px var(--font);color:var(--ink2)}
.rowcard .btn{flex:none;font-size:15px}
details{border-top:1px solid var(--line)}
details summary{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:10px;font:600 16px/22px var(--font);list-style:none;cursor:pointer}
details summary::-webkit-details-marker{display:none}
details summary svg:last-child{color:var(--ink2);transition:transform .15s}
details[open] summary svg:last-child{transform:rotate(90deg)}
details p{font:400 15px/22px var(--font);color:var(--ink2);padding:0 0 14px}
.card h3.tight{margin-bottom:6px}

.toast{position:fixed;left:50%;bottom:calc(var(--tab) + var(--safe-b) + 22px);transform:translateX(-50%);z-index:900;min-height:52px;border-radius:26px;background:var(--ink);color:var(--bg);display:flex;align-items:center;gap:10px;padding:10px 20px;font:600 16px/21px var(--font);max-width:90vw;box-shadow:0 4px 16px rgba(0,0,0,.3)}
@media (min-width:760px){.sheet{left:auto;right:16px;bottom:16px;width:420px;border-radius:26px}.scrim{display:none}}

/* выбор города */
.cityplate{width:100%;cursor:pointer;text-align:left}
.cityplate b{display:flex;align-items:center;gap:4px;min-width:0}
.cityplate b svg{color:var(--ink2);margin-left:2px}
.citylist{margin-top:14px}
.opt .zh{font-weight:600;opacity:.75;margin-left:4px}
.chip .zh{font-weight:500;opacity:.7}

/* время на месте и Apple Maps у каждой остановки */
.visitsw{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap}
.visitsw>span{font:600 15px/20px var(--font);color:var(--ink2)}
.seg{display:flex;flex-wrap:wrap;background:var(--surf2);border-radius:14px;padding:3px;gap:3px}
.seg button{height:40px;padding:0 12px;border-radius:11px;font:600 14px/1 var(--font);color:var(--ink)}
.seg button.on{background:var(--ink);color:var(--bg)}
.stopbar{display:flex;align-items:center;gap:8px;padding:0 10px 10px 14px;flex-wrap:wrap}
.durpick{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 4px 0 10px;border-radius:12px;background:var(--surf2);color:var(--ink2);font:600 14px/1 var(--font)}
.durpick.wide{display:flex;height:auto;min-height:48px;padding:6px 6px 6px 12px;flex-wrap:wrap}
.durpick.wide>span:first-of-type{flex:1}
.dursel{appearance:none;-webkit-appearance:none;border:0;background:var(--surf);color:var(--ink);font:700 15px/1 var(--font);height:32px;padding:0 10px;border-radius:9px;max-width:60vw}
.stopbar .amap{margin-left:auto;height:40px;display:inline-flex;align-items:center;padding:0 12px;border-radius:12px;border:1.5px solid var(--line);font:600 14px/1 var(--font);color:var(--ink);text-decoration:none}

/* отель */
.hotel{display:flex;gap:12px;align-items:flex-start;background:var(--accSoft);border-radius:14px;padding:12px 14px;margin-bottom:12px}
.hotel>svg{color:var(--acc);flex:none;margin-top:2px}
.hotel b{display:block;font:700 16px/21px var(--font)}
.hotel small{display:block;font:500 14px/19px var(--font);color:var(--ink2)}
.hotelform{display:flex;gap:8px}
.hotelform input{flex:1;min-width:0;height:54px;border-radius:14px;border:1.5px solid var(--line);background:var(--surf);color:var(--ink);font:500 16px/1 var(--font);padding:0 14px}
.hotelform .btn{flex:none;width:auto;padding:0 18px}
#hotelRes .stack{margin-top:10px}
.card .hint.bad{color:var(--acc);font-weight:600}
.card>.btn.out{margin-top:10px}

/* широкий экран: на всю ширину, сеткой */
@media (min-width:768px){
  .wrap{max-width:none;padding-left:32px;padding-right:32px}
  .pagehead{padding-left:0;padding-right:0}
  .pagehead .wrap{padding-left:32px;padding-right:32px}
  .pagehead .chips.scroll{margin:12px -32px 0;padding:0 32px 2px}
  .search{max-width:560px}
  .list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;padding-top:8px}
  .settings{display:block;columns:2 420px;column-gap:16px}
  .settings>.card{break-inside:avoid;margin-bottom:16px}
  #plan{padding-top:8px}
  .mapbar{flex-direction:row;align-items:flex-start;gap:12px;padding-right:80px}
  .mapbar .cityplate{flex:none;width:auto;min-width:300px;gap:18px}
  .mapbar .chips{flex:1;min-width:0;margin:0;padding:0 0 6px}
  .tabs{justify-content:center}
  .tabs button{flex:0 1 180px}
}
@media (min-width:1100px){
  #plan{display:grid;grid-template-columns:minmax(340px,440px) minmax(0,1fr);grid-template-rows:repeat(10,max-content) 1fr;column-gap:36px;align-items:start}
  #plan>*{grid-column:1;min-width:0}
  #plan>.tl{grid-column:2;grid-row:1/span 11;margin-top:0}
  #plan>.empty{grid-column:1/-1}
  .detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;padding-bottom:0}
  .detail>.ph{position:sticky;top:0;height:100vh}
  .detail .body{padding:36px 44px calc(110px + var(--safe-b));max-width:820px}
  .detail .x{right:24px}
  .detailbar{left:50%;padding-left:44px;padding-right:44px}
}

/* Основа стилей карты Leaflet — на случай, если её собственный файл стилей не загрузился */
.leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}
.leaflet-container{overflow:hidden;-webkit-tap-highlight-color:transparent;touch-action:none}
.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.leaflet-container .leaflet-tile{max-width:none!important;max-height:none!important;width:256px;height:256px;padding:0}
.leaflet-tile{visibility:hidden}.leaflet-tile-loaded{visibility:inherit}
.leaflet-pane{z-index:400}.leaflet-tile-pane{z-index:200}.leaflet-overlay-pane{z-index:400}.leaflet-shadow-pane{z-index:500}.leaflet-marker-pane{z-index:600}.leaflet-tooltip-pane{z-index:650}.leaflet-popup-pane{z-index:700}
.leaflet-map-pane canvas{z-index:100}.leaflet-map-pane svg{z-index:200}
.leaflet-control{position:relative;z-index:800;pointer-events:auto}
.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}
.leaflet-zoom-animated{transform-origin:0 0}.leaflet-zoom-anim .leaflet-zoom-animated{transition:transform .25s cubic-bezier(0,0,.25,1)}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}
.leaflet-interactive{cursor:pointer}.leaflet-marker-icon{display:block;pointer-events:auto}
.leaflet-pane>svg path{pointer-events:none}.leaflet-pane>svg path.leaflet-interactive{pointer-events:auto}
.leaflet-container .leaflet-control-attribution{background:rgba(255,255,255,.8);color:#333;margin:0;padding:0 5px}