/* ========== Mobile Bottom Tab Bar ========== */
    .m-tab,.m-daypick,.m-subtab{display:none}

    @media(max-width:900px){
      /* ---- Header ---- */
      .header{padding:calc(env(safe-area-inset-top, 0px) + 8px) 16px 8px;
        justify-content:center;text-align:center}
      .header h1{font-size:16px}
      .header .sub{margin-left:0;font-size:10px}
      .header.m-hidden{display:none}

      /* ---- Hide desktop sidebar ---- */
      .sidebar{display:none!important}

      /* ---- App layout: single column ---- */
      .app{flex-direction:column;height:auto;min-height:calc(100vh - 46px)}

      /* ---- Panel left: full width ---- */
      .panel-left{padding:12px 14px;padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 80px);
        flex:1;min-height:0}

      /* ---- Panel right (map): hidden by default, full screen when active ---- */
      .panel-right{display:none;border-left:none}
      body.m-map-active .panel-right{
        display:block!important;
        position:fixed!important;top:0;left:0;right:0;
        bottom:calc(env(safe-area-inset-bottom, 0px) + 56px);
        z-index:90;border:none}
      body.m-map-active #mapWrap{position:absolute;top:0;left:0;right:0;bottom:0}
      body.m-map-active #mapContainer{width:100%!important;height:100%!important}
      body.m-map-active .header{display:none}
      body.m-map-active .sidebar{display:none!important}
      body.m-map-active .panel-left{display:none}

      /* Map overlay on mobile */
      body.m-map-active .map-overlay{bottom:10px;right:10px;left:10px;max-width:none}

      /* Drawer on mobile: bottom sheet style */
      .drawer{width:100%!important;height:0;border-left:none!important;
        position:fixed;bottom:calc(env(safe-area-inset-bottom, 0px) + 56px);left:0;right:0;
        z-index:95;transition:height .3s ease-out}
      .drawer.open{height:50vh!important;width:100%!important;
        border-top:2px solid var(--accent);
        box-shadow:0 -8px 24px rgba(0,0,0,0.6)}

      /* ---- Mobile Day Picker ---- */
      .m-daypick{display:none;position:fixed;top:0;left:0;right:0;z-index:95;
        background:rgba(18,18,32,0.95);backdrop-filter:blur(16px);
        padding:calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px;
        overflow-x:auto;white-space:nowrap;gap:8px;
        border-bottom:1px solid rgba(255,255,255,0.06);
        -webkit-overflow-scrolling:touch;scrollbar-width:none}
      .m-daypick::-webkit-scrollbar{display:none}
      .m-daypick.visible{display:flex}
      .m-daypick button{flex-shrink:0;width:56px;height:52px;border-radius:12px;
        border:1px solid rgba(255,255,255,0.08);background:var(--surface);
        color:var(--text-dim);font-family:var(--font);font-size:12px;font-weight:700;
        cursor:pointer;transition:all .2s;line-height:1.3;text-align:center;padding:4px}
      .m-daypick button small{font-size:9px;font-weight:400;opacity:0.7}
      .m-daypick button.active{background:linear-gradient(135deg,rgba(167,139,250,0.35),rgba(56,189,248,0.25));
        color:#fff;border-color:var(--accent);box-shadow:0 0 10px rgba(167,139,250,0.2)}

      /* When day picker is visible, push content down */
      .m-daypick.visible ~ .app .panel-left{padding-top:72px}

      /* ---- Mobile Sub-tabs (More) ---- */
      .m-subtab{display:none;position:fixed;top:0;left:0;right:0;z-index:95;
        background:rgba(18,18,32,0.95);backdrop-filter:blur(16px);
        padding:calc(env(safe-area-inset-top, 0px) + 8px) 16px 8px;
        gap:8px;border-bottom:1px solid rgba(255,255,255,0.06)}
      .m-subtab.visible{display:flex}
      .m-subtab button{flex:1;height:40px;border-radius:10px;
        border:1px solid rgba(255,255,255,0.08);background:var(--surface);
        color:var(--text-dim);font-family:var(--font);font-size:12px;font-weight:600;
        cursor:pointer;transition:all .2s}
      .m-subtab button.active{background:linear-gradient(135deg,rgba(167,139,250,0.35),rgba(56,189,248,0.25));
        color:#fff;border-color:var(--accent)}

      /* When sub-tab is visible, push content down */
      .m-subtab.visible ~ .app .panel-left{padding-top:60px}

      /* ---- Bottom Tab Bar ---- */
      .m-tab{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:200;
        background:rgba(18,18,32,0.92);backdrop-filter:blur(20px);
        border-top:1px solid rgba(255,255,255,0.08);
        padding:4px 0 calc(env(safe-area-inset-bottom, 0px) + 4px);
        justify-content:space-around;align-items:center}
      .m-tab button{flex:1;display:flex;flex-direction:column;align-items:center;
        gap:2px;padding:6px 0;border:none;background:none;
        color:var(--text-dim);font-family:var(--font);font-size:9px;font-weight:600;
        cursor:pointer;transition:color .2s;-webkit-tap-highlight-color:transparent}
      .m-tab button svg{width:22px;height:22px;stroke-width:1.5}
      .m-tab button.active{color:var(--accent)}
      .m-tab button.active svg{stroke:var(--accent)}
      .m-tab button:active{opacity:0.7}

      /* ---- Card optimizations for touch ---- */
      .ev{padding:14px;margin-bottom:10px}
      .ev:hover{transform:none}
      .ev:active{transform:translateX(2px);border-color:rgba(167,139,250,0.25)}
      .ev-h{font-size:15px}
      .ev-d{font-size:12px}
      .ev-det{grid-template-columns:1fr}
      .ev-det .di{font-size:11px}

      /* Transport bars */
      .tb{padding:10px 12px;font-size:12px}

      /* Food cards: single column */
      .fg{grid-template-columns:1fr}
      .fc{padding:14px}
      .fc .fn{font-size:14px}
      .fc .sb{padding:8px;font-size:11px;min-height:44px}

      /* Food detail cards: single column */
      .fd-grid{grid-template-columns:1fr}
      .fd-card{margin-bottom:4px}
      .fd-body{padding:16px}
      .fd-name{font-size:16px}
      .fd-desc{font-size:12px}
      .fd-info{font-size:11px}

      /* Hotel cards: stack vertically */
      .day-hdr{padding:14px}
      .day-hdr h2{font-size:18px}
      .htl{padding:14px}
      .htl h3{font-size:15px}

      /* Overview cards: stack */
      .ovg{grid-template-columns:1fr}
      .ovc{padding:16px}
      .ovc .odt{font-size:17px}
      .ovc:hover{transform:none}
      .ovc:active{transform:translateY(-1px);border-color:rgba(167,139,250,0.25)}

      /* Decision cards */
      .dp{padding:14px}
      .dl li{padding:8px 0;font-size:12px;min-height:44px;align-items:center}
      .ck{width:22px;height:22px;border-radius:6px}

      /* Float button position */
      .selfloat{bottom:calc(env(safe-area-inset-bottom, 0px) + 70px);right:14px}

      /* Checklist items touch-friendly */
      .badge{font-size:10px;padding:3px 8px}

      /* Remove hover effects on mobile */
      .fc:hover,.fd-card:hover,.tb:hover{transform:none}
      .fc:active,.fd-card:active{transform:translateY(-1px)}

      /* Section titles */
      .sec-t{font-size:15px;margin:18px 0 10px}

      /* Hotel grid: 1 col on mobile */
      .page#overview > div:nth-child(2){grid-template-columns:1fr!important}
    }

    @media(prefers-reduced-motion:reduce){
      body::before{animation:none}.header h1{animation:none}
      *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
    }