/*! © 2569 เที่ยวนี่เหอะ (tiaewneehur.com) สงวนลิขสิทธิ์ · ห้ามคัดลอก ดัดแปลง หรือนำไปใช้โดยไม่ได้รับอนุญาต · TNH-ECAEB7B82022 */
/* ============================================================
   DESKTOP SIGNATURE UI — 2026 refresh
   กฎทั้งหมดอยู่ใน min-width:1024px เท่านั้น จึงไม่เปลี่ยนหน้าตามือถือ
   ============================================================ */
@media (min-width: 1024px) {
  body {
    background:
      radial-gradient(circle at 78% -10%, rgba(56,189,248,.13), transparent 32%),
      radial-gradient(circle at 18% 82%, rgba(16,185,129,.08), transparent 28%),
      #060b13;
  }

  /* Desktop navigation */
  #appShell { padding-left: 260px; min-height: 100vh; }
  .bnav {
    width: 260px;
    padding: 28px 18px 24px;
    gap: 8px;
    background: linear-gradient(180deg, rgba(10,20,34,.98), rgba(5,11,19,.98));
    border-right: 1px solid rgba(148,163,184,.12);
    box-shadow: 18px 0 50px rgba(0,0,0,.22);
  }
  .bnav::before {
    width: 70px;
    height: 70px;
    margin: 0 auto 34px;
    border: 3px solid rgba(56,189,248,.62);
    box-shadow: 0 0 0 7px rgba(56,189,248,.06), 0 14px 35px rgba(0,0,0,.42);
  }
  .bnav::after {
    content: 'เที่ยวนี่เหอะ  •  TRAVEL CLUB';
    order: -1;
    display: block;
    margin: 84px 0 -20px;
    color: #e2e8f0;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .35px;
    white-space: nowrap;
  }
  .bnav-item {
    min-height: 58px;
    margin: 0;
    padding: 0 16px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    border: 1px solid transparent;
    border-radius: 17px;
  }
  .bnav-item .ico { width: 28px; height: 28px; font-size: 25px; flex: 0 0 28px; }
  .bnav-item .ico svg { width: 25px; height: 25px; }
  .bnav-item .lbl { font-size: 14px; color: #94a3b8; text-align: left; }
  .bnav-item:hover { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.06); }
  .bnav-item.active {
    background: linear-gradient(135deg, rgba(14,165,233,.18), rgba(45,212,191,.08));
    border-color: rgba(56,189,248,.24);
    box-shadow: inset 3px 0 0 #38bdf8, 0 10px 24px rgba(0,0,0,.14);
  }
  .bnav-item.active .lbl { color: #e0f2fe; }
  .nav-avatar { width: 27px; height: 27px; }

  /* Hero header */
  .hdr {
    padding: 24px 34px 62px;
    margin: 0;
    background: transparent;
    border: 0;
  }
  .hdr.no-greet { padding-bottom: 24px; }
  .home-banner {
    width: 100%;
    max-width: 1400px;
    height: clamp(340px, 36vw, 520px);
    margin: 0 auto;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 28px 70px rgba(0,0,0,.42);
    isolation: isolate;
  }
  .home-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .home-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(3,8,15,.48), transparent 48%), linear-gradient(0deg, rgba(3,8,15,.82), transparent 55%);
  }
  .home-banner-fade { z-index: 1; height: 62%; background: linear-gradient(180deg, transparent, rgba(6,11,19,.82)); }
  .home-banner-actions { top: 24px; right: 24px; z-index: 3; gap: 10px; }
  .home-booking-steps {
    right:42px;
    bottom:34px;
    width:300px;
    max-width:300px;
    grid-template-columns:1fr 14px 1fr 14px 1fr 14px 1fr;
  }
  .home-step-icon { width:38px; height:38px; font-size:16px; }
  .home-step-label { font-size:9px; }
  .home-step-line { height:2px; margin-top:18px; }
  .home-banner-actions .hdr-btn { padding: 11px 18px; font-size: 13px; border-radius: 14px; }
  .hdr-greet {
    left: 34px;
    right: auto;
    bottom: 28px;
    transform: none;
    width: min(560px, calc(100% - 68px));
    max-width: none;
    z-index: 3;
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(4,10,18,.56);
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 18px 38px rgba(0,0,0,.28);
  }
  .hdr-greet img { width: 54px; height: 54px; }
  .hdr-greet h2 { font-size: 18px; }
  .hdr-greet p { font-size: 13px; }

  /* Main content */
  .main { width: 100%; max-width: 1400px; padding: 26px 34px 80px; }
  #tab-home .main { padding-top: 18px; }
  .home-quick-actions { max-width: none; gap: 14px; margin: 2px 0 34px; }
  .home-quick-actions .qa-mini {
    height: 84px;
    flex-direction: row;
    gap: 12px;
    border-radius: 20px;
    animation: none;
    box-shadow: 0 14px 32px rgba(0,0,0,.18);
  }
  .qa-mini .qa-mini-ico { font-size: 32px; }
  .qa-mini .qa-mini-label { font-size: 14px; }
  .home-quick-actions .qa-mini:hover { transform: translateY(-5px) scale(1.01); filter: saturate(1.08); }
  .sec-hdr { margin: 4px 0 20px; }
  .sec-hdr h3 { font-size: 22px; letter-spacing: -.2px; }
  .sec-hdr > *:last-child { font-size: 13px; }

  #upcomingList,
  .trip-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
  .trip-hcard2 { border-radius: 24px; border: 1px solid rgba(255,255,255,.08); }
  .trip-hcard2:hover { transform: translateY(-7px); box-shadow: 0 25px 55px rgba(0,0,0,.5); border-color: rgba(56,189,248,.3); }
  .trip-hcard2:hover .thc-bg { transform: scale(1.045); }
  .thc-bg { transition: transform .55s cubic-bezier(.2,.8,.2,1); }
  .stat-bar { padding: 20px 22px; border-radius: 20px; margin-top: 30px; }
  .stat-bar .ico { font-size: 30px; }
  .stat-bar .txt h4 { font-size: 15px; }
  .stat-bar .txt p { font-size: 13px; }
  .past-grid { grid-template-columns: repeat(8, minmax(0,1fr)); gap: 16px; }
  .search-wrap { max-width: 600px; margin-bottom: 26px; }
  .search-wrap input { height: 56px; border-radius: 17px; font-size: 15px; }
  .my-profile { max-width: 820px; }

  /* Desktop overlays and work pages */
  .modal-bg { align-items: center; padding: 34px; }
  .modal-sheet {
    width: min(940px, calc(100vw - 100px));
    max-width: 940px;
    max-height: calc(100vh - 68px);
    border-radius: 30px;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 35px 100px rgba(0,0,0,.66);
  }
  .modal-img { height: 360px; object-fit: cover; }
  .modal-body { padding: 26px 32px 34px; }
  .modal-grid { grid-template-columns: repeat(4, 1fr); }
  .bk-hdr { padding-left: max(28px, calc((100vw - 1240px) / 2)); padding-right: max(28px, calc((100vw - 1240px) / 2)); }
  .bk-body { max-width: 820px; padding-top: 34px; }
  #bookingPage2 .bk-body { max-width: 1240px; }
  .van-blocks-row { gap: 22px; }
  .van-blocks-row .van-block { border-radius: 22px; box-shadow: 0 16px 34px rgba(0,0,0,.2); }
  #eqItemList { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .mem-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .drawer { max-width: 520px; padding: 34px 30px; }
  #adminPopup > div { width: min(620px, calc(100vw - 80px)) !important; max-width: 620px !important; }
  .admin-tab { right: 24px; bottom: 24px; }

  /* Login becomes a polished desktop split screen */
  #loginPage {
    display: grid;
    grid-template-columns: minmax(0, 480px) minmax(0, 440px);
    gap: clamp(32px, 4vw, 64px);
    justify-content: center;
    align-items: center;
    align-content: center;
    align-content: safe center;
    max-width: 1080px;
    margin: 0 auto;
    padding: 48px clamp(24px, 4vw, 64px);
    overflow-y: auto;
    background:
      radial-gradient(circle at 20% 30%, rgba(45,212,191,.28), transparent 42%),
      radial-gradient(circle at 82% 15%, rgba(56,189,248,.24), transparent 40%),
      radial-gradient(circle at 60% 90%, rgba(2,132,199,.18), transparent 45%),
      #060b13;
  }
  /* เส้น/จุดตกแต่งเบาๆ เติมพื้นที่ว่างรอบข้าง ไม่ให้ดูเป็นความมืดเปล่าๆ
     ใช้ position:absolute (ไม่ใช่ fixed) เพราะ #loginPage เดิมเป็น position:fixed อยู่แล้ว
     ทำหน้าที่เป็น containing block ให้ชั้นนี้ครอบคลุมเต็มพื้นที่ได้เองโดยไม่ต้องแก้ position ของ #loginPage เอง
     (ห้ามตั้ง position:relative ให้ #loginPage เด็ดขาด เพราะจะไปทับ position:fixed ของมือถือ ทำให้จอล็อกอินไม่เต็มจอ) */
  #loginPage::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 75%);
    pointer-events: none;
    z-index: 0;
  }
  #loginPage .login-logo, #loginPage .login-card { position: relative; z-index: 1; }
  #loginPage .login-logo { grid-column: 1; grid-row: 1; min-height: 0; min-width: 0; margin: 0; }
  #loginPage .login-logo img { width: 150px; height: 150px; margin-bottom: 24px; }
  #loginPage .login-logo h1 { font-size: clamp(30px, 2.8vw, 42px); line-height: 1.35; }
  #loginPage .login-logo p { font-size: 16px; line-height: 1.6; margin-top: 12px; }
  #loginPage .login-logo::after {
    display: block;
    content: 'ออกเดินทาง • พบเพื่อนใหม่ • เก็บความทรงจำ\A 🚐 จองที่นั่งเรียลไทม์   📸 แนบสลิปในตัว   🏕️ เช่าอุปกรณ์ครบจบ';
    white-space: pre-line;
    color: #64748b;
    margin-top: 20px;
    font-size: 13px;
    line-height: 2.4;
    letter-spacing: .3px;
  }
  #loginPage .login-card {
    grid-column: 2; grid-row: 1; min-width: 0; width: 100%; max-width: 440px;
    border-radius: 30px; border-color: rgba(56,189,248,.28);
    box-shadow: 0 0 0 1px rgba(56,189,248,.08), 0 45px 110px rgba(0,0,0,.55), 0 0 90px rgba(56,189,248,.1);
    padding: 44px 38px;
  }

  /* ปุ่มปิดหน้าล็อกอิน — ย้ายไปมุมขวาบนแบบสากล ให้ดูเนียนเป็นส่วนหนึ่งของหน้า ไม่ใช่ลอยเดี่ยวๆ มุมซ้าย */
  #loginCloseBtn {
    top: 28px; left: auto; right: 28px;
    width: 42px; height: 42px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    transition: background .15s ease, transform .15s ease;
  }
  #loginCloseBtn:hover { background: rgba(255,255,255,.14); transform: scale(1.05); }

  /* ตัวหนังสือ/ช่องกรอก/ปุ่มภายในการ์ดล็อกอิน — เดิมกล่องขยายแล้วแต่ตัวอักษรข้างในยังเป็นไซซ์มือถือ ดูเล็กไม่สมส่วน */
  #loginPage .login-card h2,
  #loginPage #lineLoginStep h2,
  #loginPage #phoneStep h2 { font-size: 25px; margin-bottom: 14px; }
  #loginPage .login-desc { font-size: 16px; line-height: 1.75; margin-bottom: 30px; }
  #loginPage .inp-wrap { margin-bottom: 18px; }
  #loginPage .inp-pre { font-size: 18px; }
  #loginPage .inp { font-size: 17px; height: 56px; padding-left: 50px; border-radius: 16px; }
  #loginPage .btn-login { font-size: 17px; height: 56px; border-radius: 16px; }
  #loginPage .login-note { font-size: 13px; margin-top: 18px; }
  #loginPage .login-note-pill { font-size: 13px; padding: 10px 20px; }
  #loginPage .line-profile-card { padding: 16px 18px; margin-bottom: 26px; }
  #loginPage .line-profile-card img { width: 54px; height: 54px; }
  #loginPage .line-profile-card .name { font-size: 17px; }
  #loginPage .line-profile-card .status { font-size: 13px; }
}

/* Laptop ที่พื้นที่แคบ: ยังคงเป็น desktop แต่ลด sidebar/กริดให้พอดี */
@media (min-width: 1024px) and (max-width: 1199px) {
  #appShell { padding-left: 220px; }
  .bnav { width: 220px; padding-left: 14px; padding-right: 14px; }
  .bnav::after { font-size: 10.5px; }
  .hdr { padding-left: 24px; padding-right: 24px; }
  .main { padding-left: 24px; padding-right: 24px; }
  #upcomingList, .trip-list { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .past-grid { grid-template-columns: repeat(6, minmax(0,1fr)); }
  #eqItemList { grid-template-columns: repeat(2, 1fr); }
}

/* PC INTERIOR ONLY: light travel catalog; login and mobile stay unchanged. */
.pc-only { display: none; }
@media (min-width: 1024px) {
  #appShell { --bg:#fff; --bg2:#f6f8fa; --bg3:#eef2f5; --blue:#087e8b; --blue2:#086575; --green:#16805d; --sub:#536878; --muted:#72828f; --border:#e4eaee; color:#172f3d; background:#fff; padding:0; min-height:100vh; display:flex; flex-direction:column; }
  #appShell > .hdr, #appShell .pc-top { display:none; }
  #appShell > .view-page { order:2; }
  #appShell .bnav { order:0; position:sticky; top:0; bottom:auto; left:auto; width:100%; height:auto; min-height:78px; padding:16px max(32px,calc((100vw - 1400px)/2 + 36px)); gap:6px; flex-direction:row; align-items:center; justify-content:flex-start; border:0; border-bottom:1px solid #edf0f2; box-shadow:none; background:rgba(255,255,255,.96); }
  #appShell .bnav::before, #appShell .bnav::after { display:none; }
  #appShell .pc-brand { display:flex; order:0; flex-direction:row; align-items:center; gap:11px; margin-right:auto; padding:0 28px 0 0; white-space:nowrap; }
  #appShell .pc-brand img { width:42px; height:42px; border-radius:50%; object-fit:cover; }
  #appShell .pc-brand strong { font-size:21px; letter-spacing:-.5px; color:#102f3c; }
  #appShell .pc-brand small { display:none; }
  #appShell .bnav-item { order:1; flex:none; min-height:42px; padding:11px 18px; margin:0; flex-direction:row; gap:0; border:0; border-radius:999px; background:transparent; }
  #appShell .bnav-item .ico { display:none; }
  #appShell .bnav-item .lbl { font-size:14px; font-weight:600; color:#647582; }
  #appShell .bnav-item.active { background:#eaf6f5; box-shadow:none; }
  #appShell .bnav-item.active .lbl { color:#087b79; }
  #appShell .bnav-item:hover { background:#f0f4f6; }
  #appShell .pc-nav-contact { display:inline-flex; order:2; align-items:center; justify-content:center; margin-left:18px; border:0; border-radius:999px; padding:12px 21px; font:inherit; font-size:14px; font-weight:600; color:#fff; background:#112f40; cursor:pointer; white-space:nowrap; }
  #appShell .pc-nav-contact:hover { background:#086c78; }
  #appShell .main { width:100%; max-width:1400px; margin:auto; padding:32px 36px 72px; }
  #appShell #homeContent { padding-top:32px; }
  #appShell .pc-layout { display:flex; flex-direction:column; gap:0; }
  #appShell .pc-main { width:100%; min-width:0; }
  #appShell .pc-intro { display:flex; justify-content:space-between; align-items:center; gap:32px; margin-bottom:26px; padding:0; border:0; border-radius:0; background:none; min-height:106px; }
  #appShell .pc-intro-copy { padding:0; }
  #appShell .pc-intro-copy small { display:block; color:#087d87; font-size:12px; font-weight:600; margin-bottom:8px; letter-spacing:.2px; }
  #appShell .pc-intro h2 { color:#17303f; font-size:clamp(32px,3.1vw,44px); letter-spacing:-1.2px; font-weight:700; line-height:1.25; margin:0 0 10px; }
  #appShell .pc-intro p { color:#697d8b; font-size:16px; line-height:1.6; }
  #appShell .pc-welcome { display:flex; align-items:center; flex-wrap:wrap; gap:12px; max-width:360px; padding:0; background:none; border:0; }
  #appShell .pc-welcome > img { width:38px; height:38px; object-fit:cover; border-radius:50%; border:2px solid #e7efee; }
  #appShell .pc-welcome > div[style*="width:42px"] { display:none; }
  #appShell .pc-welcome h2 { font-size:14px; color:#34505c; line-height:1.55; margin:0; letter-spacing:0; font-weight:600; }
  #appShell .pc-welcome p { font-size:12px; color:#7b8b93; line-height:1.7; margin:3px 0 0; }
  #appShell .pc-welcome button { border-radius:999px; font-size:13px; padding:10px 16px; }
  #appShell .pc-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; padding:0 0 24px; border-bottom:1px solid #e7edef; }
  #appShell .home-quick-actions { display:flex; flex-direction:row; gap:10px; margin:0; padding:0; max-width:none; border:0; background:none; }
  #appShell .home-quick-actions .qa-mini { flex:none; width:auto; min-width:124px; min-height:44px; height:auto; flex-direction:row; gap:11px; padding:12px 19px; border:1px solid #e1e8ec; border-radius:999px; background:#fff; box-shadow:none; animation:none; }
  #appShell .home-quick-actions .qa-trip-mini { background:#173b48; border-color:#173b48; }
  #appShell .home-quick-actions .qa-mini:hover { transform:translateY(-2px); border-color:#7fb8bd; box-shadow:0 4px 12px #132d3910; }
  #appShell .qa-mini .qa-mini-ico { display:none; }
  #appShell .qa-mini .qa-mini-label { color:#425e6c; font-size:14px; font-weight:600; }
  #appShell .qa-trip-mini .qa-mini-label { color:#fff; }
  #appShell .qa-mini::after { content:'↗'; color:#6b8995; font-size:15px; }
  #appShell .qa-trip-mini::after { color:#bde7e6; }
  #appShell .sec-hdr { margin:0 0 20px; gap:16px; }
  #appShell .sec-hdr h3 { font-size:23px; font-weight:700; letter-spacing:-.4px; color:#213b48; }
  #appShell .sec-hdr > span { color:#087d8b !important; font-size:13px !important; font-weight:600; }
  #appShell .divider { height:1px; background:#edf0f3; margin:36px 0; }
  #appShell #upcomingList, #appShell .trip-list { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:24px !important; overflow:visible !important; scroll-snap-type:none; }
  #appShell #tripListFull { display:block !important; }
  #appShell .trip-hcard2 { height:100%; background:#fff; border:0; border-radius:0; box-shadow:none; overflow:visible; transition:transform .2s; }
  #appShell .trip-hcard2:hover { transform:translateY(-3px); box-shadow:none; }
  #appShell .trip-hcard2 .thc-photo { display:flex; flex-direction:column; aspect-ratio:auto; overflow:visible; height:100%; }
  #appShell .trip-hcard2 .thc-photo > img { width:100%; height:190px; flex:none; object-fit:cover; display:block; border-radius:18px; background:#eef2f5; }
  #appShell .thc-photo::after { display:none; }
  #appShell .trip-hcard2 .thc-overlay { position:static; flex:1; display:flex; flex-direction:column; padding:15px 2px 3px; }
  #appShell .trip-hcard2 .thc-title { color:#203744; font-size:20px; font-weight:700; line-height:1.4; margin-bottom:9px; text-shadow:none; overflow-wrap:anywhere; }
  #appShell .trip-hcard2 .thc-meta-row { color:#7b8b94; font-size:12px; flex-wrap:wrap; gap:5px 10px; margin-bottom:14px; }
  #appShell .thc-meta-row span { text-shadow:none; }
  #appShell .thc-bottom-row { margin-top:auto; padding-top:12px; border-top:1px solid #edf1f3; gap:8px; flex-wrap:wrap; }
  #appShell .trip-hcard2 .thc-price strong { color:#173746; font-size:25px; font-weight:800; text-shadow:none; }
  #appShell .trip-hcard2 .thc-price > span { color:#8a979e; font-size:11px; }
  #appShell .trip-hcard2 .thc-seats-pill { font-size:11px; border:0; padding:5px 8px; border-radius:6px; background:#eaf6f0; color:#29805c; }
  #appShell .trip-hcard2 .thc-seats-pill.low { color:#97641f; background:#fff5df; }
  #appShell .trip-hcard2 .thc-seats-pill.full { color:#9b6363; background:#fbefef; }
  #appShell .thc-status-pill { top:12px; left:12px; padding:6px 10px; border:0; border-radius:999px; background:rgba(255,255,255,.95); color:#30534a; font-size:11px; font-weight:600; box-shadow:0 2px 8px #102f3810; }
  #appShell .thc-status-pill.full { color:#9d5353; }
  #appShell .thc-status-pill.almost { color:#885c22; }
  #appShell .thc-status-pill.soon, #appShell .thc-status-pill.done { color:#647782; }
  #appShell .thc-status-pill::before { display:none; }
  #appShell .trip-hcard2 .lux-locked-ov { height:190px; bottom:auto; border-radius:18px; background:#0c253c35; backdrop-filter:blur(1px); }
  #appShell .pc-card-caption { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#70848e; font-size:11px; margin-bottom:8px; }
  #appShell .pc-card-caption > span:last-child { color:#0b8890; font-size:11px; white-space:nowrap; }
  #appShell .past-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; }
  #appShell .past-card { border-radius:16px; }
  #appShell .past-card-info h5 { font-size:14px; }
  #appShell .past-card-info p { color:#d6e5e9; font-size:11px; }
  #appShell .past-card-rating { font-size:11px; padding:4px 7px; }
  #appShell .pc-support { width:100%; display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; padding:28px 0 0; margin-top:36px; border-top:1px solid #e5ecef; }
  #appShell .stat-bar { margin:0; padding:20px; background:#f4f8f9; border:0; border-radius:14px; }
  #appShell .stat-bar .ico { font-size:26px; }
  #appShell .stat-bar .txt h4 { font-size:16px; color:#2c4855; line-height:1.55; }
  #appShell .stat-bar .txt p { font-size:12px; color:#81929c; line-height:1.7; }
  #appShell .pc-support > a { margin:0 !important; padding:20px !important; background:#f4f8f9 !important; border:0 !important; box-shadow:none !important; border-radius:14px !important; color:#294b57 !important; }
  #appShell .pc-support > a [style*="color:#fff"] { color:#294b57 !important; }
  #appShell .pc-support > a > div:first-child > div:first-child { display:none !important; }
  #appShell .pc-support > a > div:last-child { background:#e0eff0 !important; color:#317f85 !important; }
  #appShell .pc-footer { margin-top:12px; }
  #appShell .search-wrap { max-width:650px; margin:0 0 32px; }
  #appShell .search-wrap input { height:54px; background:#f4f7f9; border:1px solid #e0e8ee; border-radius:999px; font-size:16px; color:#23404e; }
  #appShell .my-profile { max-width:none; background:#f2f8f8; border:1px solid #e1eded; border-radius:20px; padding:30px; margin-bottom:32px; }
  #appShell .my-info h3 { color:#1b3c4a; font-size:25px; }
  #appShell .my-info p { color:#718895; font-size:14px; }
  #appShell .my-stats { gap:42px; margin-top:18px; }
  #appShell .my-stat h4 { font-size:27px; }
  #appShell .my-stat p { font-size:12px; }
  #appShell #bookingUpcomingList, #appShell #bookingHistoryList { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
  #appShell .hist-card-overlay h4 { font-size:18px; }
  #appShell .hist-card-overlay p { font-size:13px; }
  #appShell .h-item .hi h4 { color:#203e4b; }
  #appShell .pickup-note { color:#647d88; }
  #appShell .pickup-note strong { color:#24495a; }
  #appShell #notifContent { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
  #appShell #notifContent > div:not(.notif-item) { grid-column:1 / -1; }
  #appShell #notifContent h3 { color:#243f4d !important; }
  #appShell .notif-item { margin:0; padding:25px; border:1px solid #e5edef; border-radius:18px; background:#fafcfc; }
  #appShell .notif-info h4 { font-size:17px; color:#2d4a56; margin-bottom:12px; }
  #appShell .notif-info p { font-size:14px; line-height:1.85; color:#718590; }
  #appShell #gearSlider > div { flex-basis:24% !important; }
  #appShell :is(button,[tabindex="0"],a):focus-visible { outline:3px solid #169eab; outline-offset:5px; }
  #modalBg { --blue:#087e8b; --green:#16805d; --yellow:#a36b18; --red:#b94c4c; --sub:#647b88; --border:#e5ecef; }
  #modalBg .modal-sheet { display:grid; grid-template-columns:43% 57%; max-width:1080px; border-radius:24px; padding-bottom:0; background:#fff; color:#203d4b; }
  #modalBg .modal-img { grid-column:1; grid-row:1 / 3; height:100%; min-height:460px; object-fit:cover; }
  #modalBg .modal-body { grid-column:2; grid-row:1; padding:32px; }
  #modalBg .modal-body h2 { color:#193a47; font-size:29px; }
  #modalBg .modal-price { color:#1c665d; background:#edf8f4; border:0; }
  #modalBg .modal-payment { color:#916415; background:#fff7e6; border-color:#f5e8c8; }
  #modalBg .modal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #modalBg .modal-card { background:#f6f9fa; border:0; }
  #modalBg .modal-card strong { color:#2d4e5d; }
  #modalBg .modal-hl { color:#516c79; background:#f5f9fa; border:0; }
  #modalBg .modal-sheet > .btn-book { grid-column:2; grid-row:2; position:static; margin:0 32px 30px; width:auto; max-width:none; background:#087d89; border-radius:999px; box-shadow:none; animation:none; font-size:16px; }
  #modalBg .modal-sheet > .btn-book:disabled { background:#e5eaed; color:#91a0a8; cursor:not-allowed; }
}
@media (min-width:1024px) and (max-width:1199px) {
  #appShell .bnav { padding:15px 26px; gap:2px; }
  #appShell .pc-brand { padding-right:18px; gap:9px; }
  #appShell .pc-brand strong { font-size:19px; }
  #appShell .bnav-item { padding:10px 13px; }
  #appShell .pc-nav-contact { margin-left:10px; padding:11px 16px; }
  #appShell .main { padding-left:28px; padding-right:28px; }
  #appShell #upcomingList, #appShell .trip-list { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  #appShell .trip-hcard2 .thc-photo > img, #appShell .trip-hcard2 .lux-locked-ov { height:180px; }
  #appShell .pc-welcome { max-width:280px; }
  #appShell .past-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
  #appShell #notifContent { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce) {
  #appShell *, #appShell *::before, #appShell *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
/* READABILITY: laptop-first typography. Never scale/zoom the document. */
@media (min-width:1024px) {
  #appShell { font-size:18px; line-height:1.6; --sub:#405a69; --muted:#576e7b; }
  #appShell .bnav { min-height:72px; padding-top:12px; padding-bottom:12px; }
  #appShell .bnav-item .lbl { font-size:18px; color:#405b6b; }
  #appShell .pc-brand strong { font-size:24px; }
  #appShell .pc-nav-contact { font-size:18px; }
  #appShell .main { padding-top:18px; }
  #appShell #homeContent { padding-top:18px; }
  #appShell .pc-intro { min-height:80px; margin-bottom:16px; gap:24px; }
  #appShell .pc-intro-copy small { font-size:16px; margin-bottom:4px; }
  #appShell .pc-intro h2 { font-size:40px; margin-bottom:6px; line-height:1.2; }
  #appShell .pc-intro p { font-size:18px; color:#526e7e; }
  #appShell .pc-welcome { max-width:400px; }
  #appShell .pc-welcome h2 { font-size:18px; color:#2d4b5a; }
  #appShell .pc-welcome p { font-size:16px; color:#536f7b; }
  #appShell .pc-welcome button { font-size:18px !important; }
  #appShell .pc-toolbar { margin-bottom:22px; padding-bottom:16px; }
  #appShell .home-quick-actions .qa-mini { min-height:46px; padding:10px 21px; }
  #appShell .qa-mini .qa-mini-label { font-size:18px; }
  #appShell .qa-mini::after { font-size:18px; }
  #appShell .sec-hdr { margin-bottom:16px; }
  #appShell .sec-hdr h3 { font-size:27px; }
  #appShell .sec-hdr > span { font-size:18px !important; }
  #appShell #upcomingList, #appShell .trip-list { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:28px !important; }
  #appShell .trip-hcard2 .thc-photo > img, #appShell .trip-hcard2 .lux-locked-ov { height:220px; }
  #appShell .trip-hcard2 .thc-overlay { padding:16px 2px 6px; }
  #appShell .trip-hcard2 .thc-title { font-size:27px; line-height:1.4; margin-bottom:10px; }
  #appShell .trip-hcard2 .thc-meta-row { font-size:18px; color:#506c7b; line-height:1.6; margin-bottom:14px; gap:6px 18px; }
  #appShell .trip-hcard2 .thc-price strong { font-size:32px; }
  #appShell .trip-hcard2 .thc-price > span { font-size:17px; color:#536d7b; }
  #appShell .trip-hcard2 .thc-seats-pill { font-size:16px; padding:7px 11px; }
  #appShell .thc-status-pill { font-size:16px; padding:7px 13px; }
  #appShell .pc-card-caption { font-size:17px; color:#4b6878; flex-wrap:wrap; line-height:1.6; margin-bottom:9px; }
  #appShell .pc-card-caption > span:last-child { font-size:17px; }
  #appShell .thc-bottom-row { padding-top:14px; }
  #appShell #pastList, #appShell #tripListFull > .trip-list { opacity:1 !important; }
  #appShell .past-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  #appShell .past-card-info h5 { font-size:18px; }
  #appShell .past-card-info p, #appShell .past-card-rating { font-size:16px; }
  #appShell .stat-bar .txt h4 { font-size:20px; }
  #appShell .stat-bar .txt p { font-size:17px; color:#516d7b; }
  #appShell .pc-support { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #appShell .pc-support .stat-bar { grid-column:1 / -1; }
  #appShell .pc-support > a [style*="font-size"] { font-size:18px !important; }
  #appShell .pc-footer :is(p,span) { font-size:16px !important; }
  #appShell .search-wrap input { font-size:19px; height:58px; }
  #appShell .my-info h3 { font-size:29px; }
  #appShell .my-info p, #appShell .my-stat p { font-size:17px; }
  #appShell .hist-group-title { font-size:20px; }
  #appShell .hist-group-title > span { font-size:18px !important; }
  #appShell #bookingUpcomingList, #appShell #bookingHistoryList { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #appShell .hist-card-overlay h4 { font-size:23px; }
  #appShell .hist-card-overlay p { font-size:18px; }
  #appShell .h-item .hi h4 { font-size:21px; }
  #appShell .h-item .hi p, #appShell .pickup-note { font-size:17px; }
  #appShell #notifContent { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #appShell #notifContent h3 { font-size:26px !important; }
  #appShell .notif-info h4 { font-size:22px; }
  #appShell .notif-info p { font-size:18px; color:#496878; }
  #modalBg .modal-date, #modalBg .modal-price { font-size:18px; }
  #modalBg .modal-card span, #modalBg .modal-card strong { font-size:17px; }
  #modalBg .modal-payment, #modalBg .modal-hl { font-size:17px; }
  #modalBg .avail { font-size:19px; }
  #modalBg .modal-sheet > .btn-book { font-size:19px; height:54px; }
}
@media (min-width:1024px) and (max-width:1199px) {
  #appShell .bnav { flex-wrap:wrap; gap:4px; }
  #appShell .pc-brand strong { font-size:22px; }
  #appShell .bnav-item { padding:10px 12px; }
  #appShell .pc-welcome { max-width:300px; }
}
@media (min-width:1440px) {
  #appShell .main { max-width:1560px; }
  #appShell #upcomingList, #appShell .trip-list { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  #appShell #bookingUpcomingList, #appShell #bookingHistoryList, #appShell #notifContent { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #appShell .past-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
}
@media (min-width:1920px) {
  #appShell .main { max-width:1840px; }
  #appShell #upcomingList, #appShell .trip-list { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
  #appShell .past-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
}
/* DARK DESKTOP + ORIGINAL MOBILE HEADER IMAGE. All layout/font sizes stay intact. */
@media (min-width:1024px) {
  #appShell { --bg:#060b13; --bg2:#0c1524; --bg3:#111d2e; --blue:#38bdf8; --blue2:#0284c7; --green:#10b981; --red:#ef4444; --yellow:#f59e0b; --text:#f1f5f9; --sub:#b5c3d6; --muted:#94a3b8; --border:rgba(255,255,255,.09); --card:rgba(255,255,255,.03); background:var(--bg); color:var(--text); }
  #appShell .bnav { background:rgba(6,11,19,.96); border-bottom-color:var(--border); }
  #appShell .pc-brand strong { color:var(--text); }
  #appShell .bnav-item .lbl { color:#bac8da; }
  #appShell .bnav-item.active { background:rgba(56,189,248,.12); }
  #appShell .bnav-item.active .lbl { color:var(--blue); }
  #appShell .bnav-item:hover { background:var(--bg3); }
  #appShell .pc-nav-contact { background:linear-gradient(135deg,var(--blue2),var(--blue)); color:#fff; }
  #appShell .pc-nav-contact:hover { background:#0284c7; }
  /* Reuse the existing image element and source. No crop, stretching or substitute. */
  #appShell > .hdr { display:block; order:1; padding:0; margin:0; background:var(--bg); border:0; }
  #appShell > .hdr.no-greet { padding:0; }
  #appShell .home-banner { width:100%; max-width:1400px; height:auto; margin:0 auto; border:0; border-radius:0; background:var(--bg); box-shadow:none; overflow:visible; }
  #appShell .home-banner > img { width:100%; height:auto; max-height:none; display:block; object-fit:contain; border-radius:0; }
  #appShell .home-banner::after, #appShell .home-banner-fade { display:none; }
  #appShell .home-banner-actions { top:20px; right:36px; gap:12px; }
  #appShell .home-banner-actions .hdr-btn { font-size:18px; padding:11px 18px; border-radius:999px; }
  #appShell .home-banner-actions .hdr-btn-info { background:rgba(6,11,19,.8); border:1px solid rgba(56,189,248,.4); color:#7dd3fc; }
  #appShell .home-banner-actions .hdr-btn-contact { background:linear-gradient(135deg,var(--blue2),var(--blue)); color:#fff; }
  #appShell .home-banner .hdr-greet { position:static; left:auto; right:auto; bottom:auto; transform:none; width:auto; max-width:none; margin:12px 36px 0; padding:14px 18px; border:1px solid var(--border); border-radius:16px; background:var(--bg2); box-shadow:none; gap:14px; }
  #appShell .hdr-greet h2 { color:var(--text); font-size:20px; }
  #appShell .hdr-greet p { color:var(--sub); font-size:18px; }
  #appShell .hdr-greet img { width:48px; height:48px; }
  #appShell .hdr-greet button { font-size:18px; padding:11px 18px; }
  /* The image is now the header; remove the former text-only introduction. */
  #appShell .pc-intro { display:none; }
  #appShell .pc-toolbar { border-bottom-color:var(--border); }
  #appShell .home-quick-actions .qa-mini { background:var(--bg2); border-color:#27374b; }
  #appShell .home-quick-actions .qa-trip-mini { background:linear-gradient(135deg,var(--blue2),var(--blue)); border-color:transparent; }
  #appShell .home-quick-actions .qa-mini:hover { border-color:var(--blue); box-shadow:0 4px 18px rgba(0,0,0,.2); }
  #appShell .qa-mini .qa-mini-label { color:#dce7f5; }
  #appShell .qa-trip-mini .qa-mini-label, #appShell .qa-trip-mini::after { color:#fff; }
  #appShell .qa-mini::after { color:var(--blue); }
  #appShell .sec-hdr h3 { color:var(--text); }
  #appShell .sec-hdr > span { color:var(--blue) !important; }
  #appShell .divider { background:var(--border); }
  #appShell .trip-hcard2 { background:transparent; }
  #appShell .trip-hcard2 .thc-photo > img { background:var(--bg3); }
  #appShell .trip-hcard2 .thc-title { color:#f1f5f9; }
  #appShell .trip-hcard2 .thc-meta-row { color:#b5c5d9; }
  #appShell .trip-hcard2 .thc-price strong { color:#f1f5f9; }
  #appShell .trip-hcard2 .thc-price > span { color:#b0c0d4; }
  #appShell .trip-hcard2 .thc-seats-pill { color:#80e4b5; background:rgba(16,185,129,.14); }
  #appShell .trip-hcard2 .thc-seats-pill.low { color:#f7d383; background:rgba(245,158,11,.14); }
  #appShell .trip-hcard2 .thc-seats-pill.full { color:#f3b0b0; background:rgba(239,68,68,.13); }
  #appShell .thc-status-pill { background:rgba(6,11,19,.85); color:#a4ecc9; box-shadow:none; }
  #appShell .thc-status-pill.full { color:#f8b4b4; }
  #appShell .thc-status-pill.almost { color:#fde09c; }
  #appShell .thc-status-pill.soon, #appShell .thc-status-pill.done { color:#d0ddeb; }
  #appShell .pc-card-caption { color:#b0c3d7; }
  #appShell .pc-card-caption > span:last-child { color:#7dd3fc; }
  #appShell .thc-bottom-row { border-top-color:var(--border); }
  #appShell .pc-support { border-top-color:var(--border); }
  #appShell .stat-bar { background:var(--bg2); border:1px solid var(--border); }
  #appShell .stat-bar .txt h4 { color:var(--text); }
  #appShell .stat-bar .txt p { color:var(--sub); }
  #appShell .pc-support > a { background:var(--bg2) !important; border:1px solid var(--border) !important; color:#d7e5f5 !important; }
  #appShell .pc-support > a [style*="color:#fff"] { color:#f1f5f9 !important; }
  #appShell .pc-support > a > div:last-child { background:rgba(56,189,248,.12) !important; color:#7dd3fc !important; }
  #appShell .search-wrap input { background:var(--bg2); border-color:#304056; color:#edf4ff; }
  #appShell .my-profile { background:var(--bg2); border-color:#283b52; }
  #appShell .my-info h3 { color:var(--text); }
  #appShell .my-info p { color:var(--sub); }
  #appShell .h-item .hi h4 { color:var(--text); }
  #appShell .pickup-note { color:var(--sub); }
  #appShell .pickup-note strong { color:#d6e6fb; }
  #appShell #notifContent h3 { color:var(--text) !important; }
  #appShell .notif-item { background:var(--bg2); border-color:var(--border); }
  #appShell .notif-info h4 { color:#e3edf9; }
  #appShell .notif-info p { color:#b8c9de; }
  #appShell :is(button,[tabindex="0"],a):focus-visible { outline-color:#7dd3fc; }
  #modalBg { --blue:#38bdf8; --green:#10b981; --yellow:#f59e0b; --red:#ef4444; --sub:#b5c3d6; --border:rgba(255,255,255,.09); }
  #modalBg .modal-sheet { background:#0c1524; color:#f1f5f9; }
  #modalBg .modal-body h2 { color:#f1f5f9; }
  #modalBg .modal-price { color:#c4f4df; background:rgba(16,185,129,.13); }
  #modalBg .modal-payment { color:#f6d084; background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.22); }
  #modalBg .modal-card { background:#111d2e; }
  #modalBg .modal-card strong { color:#edf4ff; }
  #modalBg .modal-hl { color:#c3d3e6; background:#111d2e; }
  #modalBg .modal-sheet > .btn-book { color:#fff; background:linear-gradient(135deg,#0284c7,#38bdf8); }
  #modalBg .modal-sheet > .btn-book:disabled { background:#1e293b; color:#94a3b8; }
}
/* COMPACT PC: side navigation + bounded image header. Mobile/login are untouched. */
@media (min-width:1024px) {
  #appShell { --pc-rail:232px; padding-left:var(--pc-rail); }
  #appShell .bnav {
    position:fixed; inset:0 auto 0 0; order:0;
    width:var(--pc-rail); height:100vh; height:100dvh;
    min-height:0; padding:20px 16px; margin:0;
    flex-direction:column; flex-wrap:nowrap; align-items:stretch;
    justify-content:flex-start; gap:8px; overflow-y:auto;
    border:0; border-right:1px solid rgba(140,170,208,.13);
    background:linear-gradient(180deg,#0b1523,#07101b);
    box-shadow:8px 0 28px rgba(0,0,0,.12);
  }
  #appShell .pc-brand { flex:none; padding:0 5px 22px; margin:0 0 4px; gap:10px; border-bottom:1px solid var(--border); }
  #appShell .pc-brand img { width:42px; height:42px; }
  #appShell .pc-brand strong { font-size:22px; }
  #appShell .bnav-item {
    flex:none; width:100%; min-height:48px; padding:12px 14px;
    flex-direction:row; justify-content:flex-start; gap:12px;
    border:1px solid transparent; border-radius:12px;
  }
  #appShell .bnav-item .ico { display:flex; width:24px; height:24px; flex:0 0 24px; color:#8fa5bf; }
  #appShell .bnav-item .ico svg { width:23px; height:23px; }
  #appShell .bnav-item .lbl { font-size:18px; line-height:1.3; text-align:left; }
  #appShell .bnav-item.active { background:linear-gradient(100deg,rgba(56,189,248,.16),rgba(56,189,248,.05)); border-color:rgba(56,189,248,.24); box-shadow:inset 3px 0 0 #38bdf8; }
  #appShell .bnav-item.active .ico { color:#7dd3fc; filter:none; }
  #appShell .pc-side-services { display:flex; order:2; flex:none; flex-direction:column; gap:6px; margin-top:10px; padding-top:14px; border-top:1px solid var(--border); }
  #appShell .pc-side-services button { width:100%; padding:11px 14px; border:0; border-radius:10px; background:transparent; color:#bacde3; font:inherit; font-size:18px; text-align:left; cursor:pointer; }
  #appShell .pc-side-services button:hover { background:#122337; color:#7dd3fc; }
  #appShell .pc-nav-contact { order:3; width:100%; flex:none; margin:12px 0 0; padding:12px 14px; border-radius:12px; font-size:18px; }
  /* Remove the duplicate top/over-image actions on desktop only. */
  #appShell .home-banner-actions, #appShell .pc-toolbar { display:none; }
  #appShell > .hdr { padding:16px 24px 0; }
  #appShell > .hdr.no-greet { display:none; }
  #appShell .home-banner {
    display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,1fr);
    align-items:center; gap:18px; max-width:1400px; margin:0 auto;
    padding:12px; height:auto; overflow:hidden; border-radius:18px;
    background:linear-gradient(125deg,#0b1726,#0b1420);
    border:1px solid rgba(140,170,208,.12); box-shadow:none;
  }
  #appShell .home-banner > img {
    grid-column:1; grid-row:1; width:100%;
    height:clamp(150px,25vh,220px); max-height:220px;
    object-fit:contain; object-position:center; border-radius:10px;
    background:#060b13;
  }
  #appShell .home-banner .hdr-greet {
    grid-column:2; grid-row:1; position:static; transform:none;
    width:100%; max-width:none; margin:0; padding:14px;
    flex-wrap:wrap; gap:12px; border:0; border-radius:0;
    background:transparent; box-shadow:none; backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  #appShell .hdr-greet h2 { font-size:20px; line-height:1.5; }
  #appShell .hdr-greet p { font-size:18px; line-height:1.6; }
  #appShell .hdr-greet img { width:46px; height:46px; }
  #appShell .hdr-greet button { font-size:18px; width:100%; }
  #appShell .main, #appShell #homeContent { padding:20px 24px 64px; }
  #appShell .sec-hdr { margin-bottom:16px; }
  #appShell #upcomingList, #appShell .trip-list { gap:24px !important; }
  #appShell .trip-hcard2 .thc-photo > img,
  #appShell .trip-hcard2 .lux-locked-ov { height:clamp(150px,26vh,220px); }
  #appShell .trip-hcard2 .thc-overlay { padding-top:12px; }
}
@media (min-width:1024px) and (max-width:1199px) {
  #appShell { --pc-rail:206px; }
  #appShell .bnav { padding:16px 12px; gap:6px; }
  #appShell .pc-brand { padding-bottom:18px; }
  #appShell .pc-brand strong { font-size:20px; }
  #appShell .home-banner { grid-template-columns:minmax(0,1fr) minmax(240px,.8fr); gap:10px; }
  #appShell .home-banner .hdr-greet { padding:10px; }
  #appShell .main, #appShell #homeContent { padding-left:20px; padding-right:20px; }
  #appShell > .hdr { padding-left:20px; padding-right:20px; }
}
@media (min-width:1024px) and (max-height:650px) {
  #appShell .bnav { padding-top:14px; padding-bottom:14px; gap:5px; }
  #appShell .pc-brand { padding-bottom:14px; }
  #appShell .bnav-item { min-height:44px; padding-top:10px; padding-bottom:10px; }
  #appShell .pc-side-services { padding-top:10px; margin-top:6px; gap:2px; }
  #appShell .pc-side-services button { padding-top:9px; padding-bottom:9px; }
}
/* DESKTOP INTERIOR V9: component layouts only; mobile and login unchanged. */
@media (min-width:1024px) {
  #appShell .home-banner { padding:0; gap:0; overflow:hidden; }
  #appShell .home-banner > img { object-fit:cover; object-position:center; border-radius:0; height:clamp(160px,25vh,220px); }
  #appShell .hdr-greet { padding:20px 24px; }

  /* Full photograph, independently scrollable reading pane, always-visible CTA. */
  #modalBg { padding:24px; }
  #modalBg .modal-sheet {
    width:100%; max-width:1180px; height:min(760px,calc(100dvh - 48px));
    max-height:calc(100dvh - 48px); display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
    grid-template-rows:minmax(0,1fr) auto; overflow:hidden;
    border:1px solid #293a50; border-radius:22px;
  }
  #modalBg .modal-img {
    grid-column:1; grid-row:1 / 3; display:block; width:100%; height:100%;
    min-height:0; max-height:100%; object-fit:contain; object-position:center;
    background:#050a12; border-radius:0; margin:0; padding:12px;
  }
  #modalBg .modal-body {
    grid-column:2; grid-row:1; min-width:0; min-height:0; overflow-y:auto;
    overscroll-behavior:contain; scrollbar-gutter:stable; padding:28px 28px 18px;
    font-size:20px; line-height:1.65;
  }
  #modalBg .modal-body h2 { font-size:32px; line-height:1.3; padding-right:32px; margin-bottom:12px; }
  #modalBg .modal-date { font-size:20px; margin-bottom:14px; }
  #modalBg .modal-price { font-size:26px; padding:12px 16px; border-radius:12px; }
  #modalBg .modal-payment { font-size:19px; line-height:1.55; padding:12px 16px; }
  #modalBg .modal-grid { gap:10px; margin:18px 0; }
  #modalBg .modal-card { padding:12px 16px; border:1px solid #26354a; border-radius:12px; }
  #modalBg .modal-card span { font-size:18px; color:#b5c3d6; }
  #modalBg .modal-card strong { font-size:21px; line-height:1.5; }
  #modalBg .modal-hl { font-size:20px; line-height:1.75; padding:16px; overflow-wrap:anywhere; }
  #modalBg .modal-seat-row { margin-top:18px; padding-top:16px; border-top:1px solid #26354a; }
  #modalBg .modal-seat-row p, #modalBg .chip { font-size:18px !important; }
  #modalBg .modal-sheet > .btn-book {
    grid-column:2; grid-row:2; position:static; transform:none;
    width:auto; min-height:54px; height:auto; margin:14px 28px 22px;
    padding:12px 20px; font-size:22px; line-height:1.3; border-radius:12px;
  }
  #modalBg .modal-x { top:12px; right:12px; width:40px; height:40px; z-index:5; background:#1e3046; }

  /* Consistent full-page workspace and readable form controls. */
  :is(#bookingPage2,#equipPage,#reviewPage) { background:#060b13; --sub:#b5c3d6; --muted:#9aabc0; }
  :is(#bookingPage2,#equipPage,#reviewPage) .bk-hdr {
    padding:12px max(24px,calc((100% - 1160px)/2)); min-height:66px;
    background:rgba(12,21,36,.97); border-bottom:1px solid #243348;
  }
  :is(#bookingPage2,#equipPage,#reviewPage) .bk-body { width:100%; max-width:1208px; padding:24px 24px 116px; }
  :is(#bookingPage2,#equipPage,#reviewPage) .bk-body > div:first-child { text-align:left !important; }
  :is(#bookingPage2,#equipPage,#reviewPage) .bk-body > div:first-child h2 { font-size:30px !important; }
  :is(#bookingPage2,#equipPage,#reviewPage) .bk-body > div:first-child p { font-size:19px !important; color:#b5c3d6 !important; }
  :is(#bookingPage2,#equipPage,#reviewPage) :is(.btn-back,.chip) { font-size:18px !important; }
  :is(#bookingPage2,#equipPage,#reviewPage) .ig label { font-size:19px; color:#c7d4e5; }
  :is(#bookingPage2,#equipPage,#reviewPage) :is(.ig input,.ig select,.ig textarea) {
    font-size:20px !important; line-height:1.5; min-height:48px; border-radius:10px;
  }
  :is(#bookingPage2,#equipPage) .sticky-bar { padding:12px 24px; border-top:1px solid #293a50; background:rgba(12,21,36,.97); }
  :is(#bookingPage2,#equipPage,#reviewPage) .btn-confirm { max-width:560px; min-height:52px; height:auto; padding:12px 20px; font-size:21px; border-radius:12px; }
  :is(#bookingPage2,#equipPage,#reviewPage) .form-sec-title { font-size:24px; }
  :is(#bookingPage2,#equipPage,#reviewPage) .form-sec-sub { font-size:18px; }

  /* Keep actual seat positions/order and booking-state colors untouched. */
  #bookingPage2 .bk-body { display:grid; grid-template-columns:1fr 1fr; column-gap:20px; }
  #bookingPage2 .bk-body > * { grid-column:1 / -1; min-width:0; }
  #bookingPage2 .bk-body > .ig { grid-column:auto; }
  #bookingPage2 .bk-body > label { font-size:21px !important; margin:4px 0 12px; }
  #bookingPage2 .seat-map-img { width:100%; max-width:520px; max-height:180px; object-fit:contain; justify-self:center; margin:0 auto 10px; }
  #bookingPage2 .seat-legend { justify-content:flex-start; margin:10px 0 18px; gap:20px; padding:12px 16px; }
  #bookingPage2 .leg-item { font-size:18px; }
  #bookingPage2 .van-blocks-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:22px; }
  #bookingPage2 .van-block { min-width:0; padding:14px; border:1px solid #26384e; border-radius:16px; background:#0c1524; }
  #bookingPage2 .van-block-title { font-size:22px; text-align:left; background:none; box-shadow:none; padding:0 0 8px; border-radius:0; }
  #bookingPage2 .van-grid-header { font-size:16px; padding:0; margin-bottom:10px; }
  #bookingPage2 .van-grid-seats { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:0 0 6px; background:none; border:0; border-radius:0; box-shadow:none; }
  #bookingPage2 .seat { aspect-ratio:auto; height:66px; min-width:0; border-radius:10px; }
  #bookingPage2 .seat span:first-child { font-size:16px; line-height:1.1; }
  #bookingPage2 .seat span:last-child { font-size:21px; }
  #bookingPage2 .onsite-note { font-size:18px; text-align:left; color:#b5c3d6; margin:0 0 14px; }
  #bookingPage2 .onsite-grid { grid-template-columns:repeat(auto-fill,minmax(86px,100px)); gap:10px; justify-content:start; padding:0 0 6px; border:0; border-radius:0; box-shadow:none; background:none; }
  #bookingPage2 .onsite-slot { width:100%; height:62px; aspect-ratio:auto; border-radius:10px; }
  #bookingPage2 .onsite-slot span:first-child { font-size:16px; }
  #bookingPage2 .onsite-slot span:last-child { font-size:21px; }
  #bookingPage2 #formFieldsBox2 { scroll-margin-top:86px; padding:24px; border-radius:18px; }
  #bookingPage2 #seatFormsContainer { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  #bookingPage2 .seat-form-card { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 18px; padding:20px; }
  #bookingPage2 .seat-form-card-hdr { grid-column:1 / -1; }
  #bookingPage2 .seat-form-card-hdr span { font-size:18px; }
  #bookingPage2 .seat-form-badge { min-width:48px; height:40px; font-size:22px; }
  #bookingPage2 .seat-form-card .ig { min-width:0; margin:0; }
  #bookingPage2 #formFieldsBox2 > .ig { max-width:640px; }

  /* Payment: QR and amount at left; timer/upload/action at right. */
  #payModal { padding:24px; align-items:flex-start; }
  #payModal .pay-box { max-width:960px; padding:28px; display:grid; grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr); gap:12px 28px; border-radius:22px; }
  #payModal .pay-box > .chip { position:static !important; grid-column:1 / -1; justify-self:start; font-size:17px !important; }
  #payModal .pay-box > h3 { grid-column:1 / -1; margin:0 !important; text-align:left; font-size:28px; }
  #payModal .pay-box > .sub { grid-column:1; grid-row:3; font-size:18px; color:#b5c3d6; }
  #payModal .qr-img { grid-column:1; grid-row:4 / 6; width:240px; max-width:100%; height:auto; object-fit:contain; margin:4px auto; align-self:start; }
  #payModal #depositSummaryBox { grid-column:1; grid-row:6; margin:0; }
  #payModal #seatLockTimerBox { grid-column:2; grid-row:3; margin:0; }
  #payModal .slip-upload { grid-column:2; grid-row:4 / 7; margin:0; min-width:0; }
  #payModal .btn-pay-ok { grid-column:2; grid-row:7; height:52px; font-size:21px; }
  #payModal .pay-box > p:last-child { grid-column:1 / -1; font-size:18px !important; margin:0 !important; }
  #payModal :is(.ds-label,.ds-calc,.slip-title,.slip-name,.seat-lock-timer strong) { font-size:19px; }
  #payModal :is(.slip-sub,.seat-lock-timer p) { font-size:17px; color:#b5c3d6; }
  #payModal .ds-total { font-size:34px; }
  #payModal .slip-preview { max-height:230px; }
  #payModal .pay-x { width:40px; height:40px; }

  /* Rental catalog and reviews get their own desktop grids. */
  #equipPage :is(#eqTripList,#eqItemList) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  #equipPage .eq-sec-title { font-size:24px; margin:24px 0 14px; }
  #equipPage .eq-item-card { padding:20px; gap:18px; border-radius:16px; margin:0; }
  #equipPage .eq-item-img { width:112px; height:112px; }
  #equipPage .eq-item-info h4 { font-size:24px; }
  #equipPage .eq-item-info p.model { font-size:18px; }
  #equipPage .eq-item-info p.price { font-size:21px; }
  #equipPage :is(.eq-trip-card,.eq-summary-card) { padding:20px; border-radius:16px; }
  #equipPage :is(.eq-note,.eq-summary-row) { font-size:19px; line-height:1.6; }
  #equipPage .eq-step-btn { width:40px; height:40px; font-size:22px; }
  #equipPage .eq-step-val { font-size:22px; }
  #equipPage .eq-trip-info h4 { font-size:22px; }
  #equipPage .eq-trip-info p { font-size:18px; }
  #equipPage #eqSummaryBox { max-width:720px; margin:24px 0 0 auto; }
  #reviewPage #reviewSummary { max-width:560px; }
  #reviewPage .review-summary-card { padding:22px; }
  #reviewPage .review-summary-card .count { font-size:19px; }
  #reviewPage .bk-body > .btn-login { width:240px; font-size:21px; }
  #reviewPage #writeReviewBox { max-width:780px; padding:24px !important; scroll-margin-top:90px; }
  #reviewPage #reviewList { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:20px; }
  #reviewPage .review-card { padding:24px; margin:0; }
  #reviewPage .review-avatar { width:46px; height:46px; font-size:22px; }
  #reviewPage .review-name { font-size:22px; }
  #reviewPage .review-date { font-size:17px; color:#aabbd0; }
  #reviewPage .review-stars { font-size:20px; }
  #reviewPage .review-comment { font-size:20px; line-height:1.75; overflow-wrap:anywhere; }
  #reviewPage .review-photo { max-height:360px; object-fit:contain; background:#050a12; }

  /* Profile, trip history, notices, receipts and information surfaces. */
  #appShell #myContent { max-width:1400px; margin:0 auto; }
  #appShell :is(#bookingUpcomingList,#bookingHistoryList) { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  #appShell .my-profile { padding:24px; border-radius:18px; }
  #appShell .my-ava-hint { font-size:16px; max-width:110px; }
  #appShell .my-info h3 { font-size:28px; }
  #appShell .my-info p { font-size:20px; }
  #appShell .my-stat p { font-size:18px; }
  #appShell #notifContent { max-width:1280px; margin:auto; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  #appShell .notif-item { padding:22px; }
  #appShell .notif-info h4 { font-size:24px; }
  #appShell .notif-info p { font-size:20px; line-height:1.7; }
  :is(#successPage2,#equipReceiptPage) .succ-body { max-width:800px; padding:28px 24px 112px; }
  :is(#successPage2,#equipReceiptPage) .succ-body > h2 { font-size:30px !important; margin-bottom:18px !important; }
  :is(#successPage2,#equipReceiptPage) .receipt { padding:24px 28px; border-radius:16px; }
  :is(#successPage2,#equipReceiptPage) .r-row { font-size:21px; padding-bottom:12px; margin-bottom:12px; align-items:flex-start; }
  :is(#successPage2,#equipReceiptPage) .r-row strong { overflow-wrap:anywhere; }
  :is(#successPage2,#equipReceiptPage) .r-row span { color:#655c47; min-width:84px; }
  :is(#successPage2,#equipReceiptPage) .succ-body > p,
  :is(#successPage2,#equipReceiptPage) .succ-body > p span,
  :is(#successPage2,#equipReceiptPage) .succ-body > span { font-size:19px !important; line-height:1.6 !important; }
  #successPage2 .succ-line-btn { max-width:520px; font-size:21px; }
  #successPage2 .r-seat-label, #successPage2 .r-seat-box > p { font-size:18px; color:#655c47; }
  #successPage2 .r-seat-split { flex-wrap:wrap; }
  #modalBg .avail { font-size:22px; }
  #equipReceiptPage .r-item-row { font-size:20px; padding:12px 0; }
  #equipReceiptPage .r-total-row { font-size:26px; }
  #equipReceiptPage .btn-home { max-width:520px; font-size:21px; }
  #drawer { width:560px; max-width:560px; padding:28px; }
  #drawer h3 { font-size:24px !important; }
  #drawer :is(.info-block,p) { font-size:20px !important; line-height:1.75 !important; }
  #adminPopup > div { max-width:800px !important; padding:28px !important; border-radius:20px !important; }
  #adminPopup h3 { font-size:26px !important; }
  #adminPopup p, #adminPopup a { font-size:20px !important; }
  #adminPopup img[src="team.jpg"] { max-height:280px; object-fit:contain; background:#050a12; }
  :is(#modalBg,#bookingPage2,#payModal,#equipPage,#reviewPage,#successPage2,#equipReceiptPage,#drawer,#adminPopup) :is(button,a,input,select,textarea):focus-visible { outline:3px solid #7dd3fc; outline-offset:3px; }
}
@media (min-width:1024px) and (max-height:650px) {
  #modalBg { padding:14px; }
  #modalBg .modal-sheet { height:calc(100dvh - 28px); max-height:calc(100dvh - 28px); }
  #modalBg .modal-body { padding-top:20px; }
  #modalBg .modal-sheet > .btn-book { margin-top:10px; margin-bottom:14px; }
}
/* DESKTOP PREMIUM V10 — scoped visual refinement, no mobile/business-logic changes. */
@media (min-width:1024px) {
  #appShell {
    --border:rgba(161,184,214,.13);
    background:radial-gradient(ellipse at 82% 0,rgba(37,82,117,.12),transparent 52%),#070d16;
  }
  #appShell .bnav {
    background:linear-gradient(180deg,#0d1725,#080f1a 75%);
    border-right:1px solid rgba(159,182,212,.12); box-shadow:8px 0 32px rgba(0,0,0,.15);
  }
  #appShell .pc-brand { padding-bottom:22px; }
  #appShell .pc-brand img { width:46px; height:46px; box-shadow:0 0 0 4px rgba(125,211,252,.06); }
  #appShell .bnav-item { border-radius:13px; transition:background .18s,border-color .18s; }
  #appShell .bnav-item.active {
    background:linear-gradient(100deg,rgba(56,189,248,.13),rgba(56,189,248,.035));
    border-color:rgba(125,211,252,.19); box-shadow:inset 2px 0 #7dd3fc;
  }
  #appShell .bnav-item:hover { background-color:rgba(148,184,221,.06); }
  #appShell .bnav-item .lbl { font-size:19px; }
  #appShell .pc-side-services button { color:#b7c6da; border-radius:12px; }
  #appShell .pc-nav-contact {
    background:linear-gradient(120deg,#0369a1,#149bd2); color:#fff;
    border:1px solid rgba(125,211,252,.24); box-shadow:0 6px 20px rgba(2,132,199,.15);
    min-height:48px; font-weight:700;
  }
  /* Taller, not full-screen: expose more of the original banner artwork. */
  #appShell .home-banner {
    grid-template-columns:minmax(0,1.55fr) minmax(260px,1fr); gap:0;
    border-radius:22px; border:1px solid rgba(165,191,220,.16);
    background:linear-gradient(135deg,#102033,#0c1522);
    box-shadow:0 12px 38px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.035);
  }
  #appShell .home-banner > img {
    height:clamp(190px,30vh,280px); max-height:280px;
    object-fit:cover; object-position:center; border-radius:0;
  }
  #appShell .home-banner .hdr-greet { padding:24px; gap:14px; }
  #appShell .hdr-greet h2 { font-size:23px; line-height:1.4; }
  #appShell .hdr-greet p { font-size:19px; line-height:1.55; color:#b7c8dc; }
  #appShell .hdr-greet img { width:52px; height:52px; border:2px solid rgba(125,211,252,.35); }
  #appShell .sec-hdr { margin-top:4px; margin-bottom:18px; }
  #appShell .sec-hdr h3 { font-size:28px; letter-spacing:0; font-weight:700; }
  #appShell .trip-hcard2 {
    background:linear-gradient(150deg,#101d2d,#0c1522);
    border:1px solid rgba(155,182,214,.15); border-radius:20px; overflow:hidden;
    box-shadow:0 8px 28px rgba(0,0,0,.15);
    transition:transform .2s,border-color .2s,box-shadow .2s;
  }
  #appShell .trip-hcard2:hover {
    transform:translateY(-3px); border-color:rgba(125,211,252,.36);
    box-shadow:0 16px 36px rgba(0,0,0,.24);
  }
  #appShell .trip-hcard2 .thc-photo > img,
  #appShell .trip-hcard2 .lux-locked-ov {
    height:clamp(180px,29vh,260px); border-radius:0;
  }
  #appShell .trip-hcard2 .thc-photo > img { object-fit:cover; object-position:center; }
  #appShell .trip-hcard2 .thc-overlay { padding:18px 20px 20px; gap:0; }
  #appShell .trip-hcard2 .thc-title { font-size:27px; line-height:1.4; margin-bottom:10px; }
  #appShell .trip-hcard2 .thc-meta-row { font-size:19px; color:#b3c3d7; margin-bottom:18px; }
  #appShell .trip-hcard2 .thc-bottom-row { padding-top:16px; border-top:1px solid rgba(162,189,223,.13); }
  #appShell .trip-hcard2 .thc-price strong { font-size:32px; color:#f3f7fc; letter-spacing:.2px; }
  #appShell .trip-hcard2 .thc-price > span { color:#aebfd4; font-size:18px; }
  #appShell .trip-hcard2 .thc-seats-pill { border-radius:9px; padding:7px 11px; box-shadow:none; }
  #appShell .thc-status-pill { border-radius:9px; box-shadow:0 3px 12px rgba(0,0,0,.15); animation:none; }
  #appShell .pc-card-caption { margin-bottom:12px; color:#aebfd3; font-size:17px; }
  #appShell .pc-card-caption > span:last-child { color:#8ed8f9; font-size:17px; }
  #appShell :is(.my-profile,.notif-item,.stat-bar,.hist-card,.past-card) {
    border:1px solid rgba(159,185,216,.14); box-shadow:0 8px 24px rgba(0,0,0,.13);
  }
  #appShell .notif-item { background:linear-gradient(135deg,#101c2c,#0c1522); border-radius:18px; }
  #appShell .past-card { overflow:hidden; }
  /* Detail image gets more horizontal room and no crop. */
  #modalBg .modal-sheet {
    max-width:1240px; grid-template-columns:minmax(0,1.05fr) minmax(0,1.1fr);
    border-color:rgba(168,194,223,.2); border-radius:24px;
    box-shadow:0 30px 90px rgba(0,0,0,.48);
    background:linear-gradient(145deg,#102033,#0c1524 60%);
  }
  #modalBg .modal-img { padding:8px; object-fit:contain; background:#080f19; }
  #modalBg .modal-body { padding:30px 28px 20px; }
  #modalBg .modal-card {
    background:rgba(160,190,222,.045); border-color:rgba(159,185,216,.12);
    border-radius:14px; box-shadow:inset 0 1px rgba(255,255,255,.025);
  }
  #modalBg .modal-hl { background:rgba(160,190,222,.035); border:1px solid rgba(159,185,216,.09); border-radius:14px; }
  #modalBg .modal-price { border:1px solid rgba(52,211,153,.18); }
  #modalBg .modal-sheet > .btn-book {
    background:linear-gradient(120deg,#0369a1,#179bd2);
    border:1px solid rgba(125,211,252,.25); border-radius:13px;
    box-shadow:0 6px 20px rgba(2,132,199,.15); font-weight:700;
  }
  #modalBg .modal-sheet > .btn-book:disabled { background:#1e293b; border-color:#334155; color:#94a3b8; box-shadow:none; }
  :is(#bookingPage2,#equipPage,#reviewPage) {
    background:radial-gradient(ellipse at 80% 0,rgba(37,82,117,.12),transparent 55%),#070d16;
  }
  #bookingPage2 .van-block, #bookingPage2 .seat-form-card,
  #equipPage .eq-item-card, #reviewPage .review-card {
    background:linear-gradient(145deg,#111f30,#0c1523);
    border:1px solid rgba(160,186,218,.15); border-radius:18px;
    box-shadow:0 8px 24px rgba(0,0,0,.15);
  }
  #bookingPage2 .van-block-title { color:#d5e9f8; }
  #bookingPage2 .van-grid-header { color:#98afc9; }
  #bookingPage2 .seat.empty { background:linear-gradient(145deg,#19845f,#116749); box-shadow:0 2px 0 #094c36; }
  #bookingPage2 .seat.booked { background:linear-gradient(145deg,#bf4451,#98313e); box-shadow:0 2px 0 #6c2330; }
  #bookingPage2 :is(.seat.selected,.onsite-slot.selected) { background:linear-gradient(145deg,#f1d275,#e4b647); color:#241b06; animation:none; box-shadow:0 0 0 2px rgba(255,228,141,.6); transform:scale(.98); }
  #bookingPage2 .onsite-slot:not(.selected):not(.booked):not(.locking) { background:#162438; border:1px solid #30435c; box-shadow:0 2px 0 #0b1422; }
  :is(#bookingPage2,#equipPage,#reviewPage) :is(.ig input,.ig select,.ig textarea) {
    background:#0b1422; border:1px solid #2a3c53; color:#edf3fb;
    transition:border-color .18s,box-shadow .18s;
  }
  :is(#bookingPage2,#equipPage,#reviewPage) :is(.ig input,.ig select,.ig textarea):focus {
    border-color:#64bfe8; box-shadow:0 0 0 3px rgba(56,189,248,.09);
  }
  :is(#bookingPage2,#equipPage,#reviewPage) .ig input:disabled { color:#bdcde0; opacity:1; background:#101d2c; }
  :is(#bookingPage2,#equipPage,#reviewPage) .btn-confirm.ready,
  #payModal .btn-pay-ok:not(:disabled) {
    background:linear-gradient(120deg,#0369a1,#179bd2); color:#fff;
    border:1px solid rgba(125,211,252,.25); box-shadow:0 6px 20px rgba(2,132,199,.16);
  }
  #equipPage .eq-trip-card { transition:border-color .18s,background .18s; }
  #equipPage .eq-trip-card.selected { border-color:#69c4eb; background:#102b3d; box-shadow:inset 3px 0 #69c4eb; }
  #equipPage .eq-step-btn { background:#1a2d43; border:1px solid #324962; border-radius:11px; }
  #payModal .pay-box { background:linear-gradient(145deg,#102033,#0c1524); border:1px solid #2b4057; box-shadow:0 30px 90px rgba(0,0,0,.45); }
  #payModal .deposit-summary-box { border-style:solid; border-width:1px; }
  #payModal .slip-drop { background:#101e30; border-color:#405570; }
  #drawer { background:linear-gradient(160deg,#101c2d,#090f1a); border-left-color:#293c53; }
  #drawer .info-block { background:rgba(166,192,221,.04); border-radius:12px; padding:18px; }
  #adminPopup > div { border-color:rgba(162,188,218,.2) !important; box-shadow:0 30px 90px rgba(0,0,0,.45); }
}
@media (min-width:1024px) and (max-height:650px) {
  #appShell .home-banner > img { height:190px; max-height:190px; }
  #appShell .home-banner .hdr-greet { padding:18px; }
  #appShell .trip-hcard2 .thc-photo > img, #appShell .trip-hcard2 .lux-locked-ov { height:180px; }
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce) {
  #appShell .trip-hcard2, #appShell .bnav-item { transition:none; }
  #appShell .trip-hcard2:hover { transform:none; }
  #bookingPage2 :is(.seat,.onsite-slot) { animation:none; transition:none; }
}
/* DESKTOP ENTRANCE V11: existing header artwork, no mobile changes. */
@media (min-width:1024px) {
  #appShell.pc-entry-active { padding-left:0; }
  #appShell.pc-entry-active > :not(#pcEntry) { display:none !important; }
  #appShell #pcEntry {
    position:relative; isolation:isolate; display:flex; flex-direction:column;
    width:100%; min-height:640px; min-height:max(640px,100dvh); overflow:hidden;
    padding:28px clamp(28px,5vw,88px) 22px; background:#060b13; color:#f1f5f9;
  }
  #pcEntry .pc-entry-art { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center 35%; z-index:-3; }
  #pcEntry::before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(180deg,rgba(6,11,19,.2),transparent 25%,transparent 52%,rgba(6,11,19,.75) 82%,#060b13); pointer-events:none; }
  #pcEntry .pc-entry-top { display:flex; align-items:center; justify-content:space-between; gap:24px; }
  #pcEntry .pc-entry-brand { display:flex; align-items:center; gap:12px; font-size:25px; font-weight:700; }
  #pcEntry .pc-entry-brand img { width:48px; height:48px; object-fit:contain; border-radius:50%; }
  #pcEntry .pc-entry-tag { font-size:19px; color:#c4d3e4; }
  #pcEntry .pc-entry-space { flex:1; min-height:320px; }
  #pcEntry .pc-entry-menu { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; width:100%; max-width:1440px; margin:0 auto; }
  #pcEntry .pc-entry-button {
    position:relative; min-width:0; min-height:156px; padding:24px; text-align:left;
    color:#f1f5f9; font:inherit; cursor:pointer; border:1px solid rgba(186,208,233,.28); border-radius:20px;
    background:linear-gradient(135deg,rgba(18,34,53,.92),rgba(9,20,35,.9));
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    box-shadow:0 12px 34px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.05);
    transition:transform .2s,border-color .2s,background .2s;
  }
  #pcEntry .pc-entry-button.primary { background:linear-gradient(130deg,rgba(3,93,146,.9),rgba(12,39,66,.94)); border-color:rgba(87,202,251,.8); }
  #pcEntry .pc-entry-button svg { display:block; width:32px; height:32px; margin-bottom:16px; stroke:#bfe9fc; fill:none; stroke-width:1.6; }
  #pcEntry .pc-entry-button strong { display:block; font-size:26px; line-height:1.3; margin-bottom:6px; }
  #pcEntry .pc-entry-button small { display:block; font-size:18px; line-height:1.4; color:#b7c9dc; }
  #pcEntry .pc-entry-button::after { content:"↗"; position:absolute; top:22px; right:24px; font-size:26px; color:#d5eafa; }
  #pcEntry .pc-entry-button:hover { transform:translateY(-4px); border-color:#7dd3fc; }
  #pcEntry .pc-entry-button:focus-visible, #appShell .pc-entry-return:focus-visible { outline:3px solid #bae6fd; outline-offset:5px; }
  #pcEntry .pc-entry-footer { display:flex; justify-content:space-between; gap:20px; font-size:17px; color:#9bb0c9; padding-top:22px; }
  #appShell .pc-entry-return { order:4; margin-top:8px; padding:12px; width:100%; border:1px solid #2a4058; border-radius:12px; color:#bdd3e8; background:transparent; font:inherit; font-size:18px; cursor:pointer; }
}
@media (min-width:1024px) and (max-height:700px) {
  #appShell #pcEntry { min-height:max(560px,100dvh); padding-top:18px; }
  #pcEntry .pc-entry-space { min-height:260px; }
  #pcEntry .pc-entry-button { min-height:134px; padding:18px; }
  #pcEntry .pc-entry-button svg { width:28px; height:28px; margin-bottom:10px; }
  #pcEntry .pc-entry-button strong { font-size:24px; }
  #pcEntry .pc-entry-button small { font-size:17px; }
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce) {
  #pcEntry .pc-entry-button { transition:none; }
  #pcEntry .pc-entry-button:hover { transform:none; }
}
/* DESKTOP ENTRANCE V12: artwork and menu occupy separate normal-flow rows. */
@media (min-width:1024px) {
  #appShell #pcEntry {
    min-height:100vh; min-height:100dvh; padding:0;
    overflow:visible; background:#03060a;
  }
  #pcEntry::before { content:none; }
  #pcEntry .pc-entry-top {
    order:0; flex-shrink:0; padding:18px clamp(28px,5vw,88px);
    background:#060b13;
  }
  #pcEntry .pc-entry-art {
    order:1; position:static; inset:auto; z-index:auto; display:block; flex:none;
    width:100%; height:clamp(280px,calc(100dvh - 300px),680px);
    object-fit:contain; object-position:center; background:#060b13;
  }
  #pcEntry .pc-entry-space { display:none; }
  #pcEntry .pc-entry-menu {
    order:2; flex-shrink:0; position:relative; max-width:none; margin:0;
    padding:28px clamp(28px,5vw,88px) 20px;
    background:linear-gradient(180deg,#060b13 0%,#07101a 25%,#03060a 100%);
  }
  #pcEntry .pc-entry-button { min-height:140px; padding:20px; }
  #pcEntry .pc-entry-button svg { margin-bottom:12px; }
  #pcEntry .pc-entry-footer {
    order:3; flex:1; align-items:flex-end; flex-wrap:wrap; margin:0;
    padding:8px clamp(28px,5vw,88px) 22px; background:#03060a;
  }
}
/* DESKTOP ENTRANCE V13: full-bleed artwork and compact right-hand actions. */
@media (min-width:1024px) {
  #appShell #pcEntry {
    min-height:max(560px,100dvh); padding:0; overflow:hidden;
    background:#060b13; display:flex; flex-direction:column;
  }
  #pcEntry .pc-entry-art {
    position:absolute; inset:0; z-index:-3; width:100%; height:100%;
    object-fit:cover; object-position:center; margin:0;
  }
  #pcEntry::before {
    content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
    background:linear-gradient(180deg,rgba(6,11,19,.25),transparent 22%,transparent 62%,rgba(6,11,19,.48) 100%);
  }
  #pcEntry .pc-entry-top {
    background:transparent; padding:18px 5vw; min-height:76px;
  }
  #pcEntry .pc-entry-space {
    display:block; flex:1; min-height:calc(65dvh - 76px);
  }
  #pcEntry .pc-entry-menu {
    flex:none; width:51%; max-width:740px; margin:0 5% 0 44%;
    padding:0; background:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
  }
  #pcEntry .pc-entry-button {
    display:flex; align-items:center; gap:12px;
    min-height:56px; padding:12px 36px 12px 16px; border-radius:13px;
    background:rgba(10,24,40,.84); box-shadow:0 6px 20px rgba(0,0,0,.18);
  }
  #pcEntry .pc-entry-button svg { flex:0 0 23px; width:23px; height:23px; margin:0; }
  #pcEntry .pc-entry-button strong { font-size:21px; line-height:1.35; margin:0; }
  #pcEntry .pc-entry-button small { display:none; }
  #pcEntry .pc-entry-button::after { top:50%; right:13px; transform:translateY(-50%); font-size:20px; }
  #pcEntry .pc-entry-button.primary { background:linear-gradient(120deg,rgba(3,105,161,.94),rgba(11,63,98,.92)); }
  #pcEntry .pc-entry-footer {
    flex:none; padding:20px 5vw 16px; background:transparent; font-size:16px;
  }
}
/* DESKTOP ENTRANCE V14: raised button surfaces; approved layout unchanged. */
@media (min-width:1024px) {
  #pcEntry .pc-entry-button {
    isolation:isolate; overflow:hidden;
    border:1px solid rgba(149,184,219,.38);
    border-top-color:rgba(211,233,253,.55);
    border-bottom-color:rgba(31,62,94,.9);
    background:linear-gradient(170deg,rgba(48,72,100,.97) 0%,rgba(25,46,71,.96) 48%,rgba(14,30,51,.97) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.19),inset 0 -1px 0 rgba(0,0,0,.32),0 4px 0 #081423,0 9px 18px rgba(0,0,0,.36);
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,filter .16s ease;
    text-shadow:0 1px 2px rgba(0,0,0,.35);
  }
  #pcEntry .pc-entry-button::before {
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(110deg,rgba(255,255,255,.1),transparent 38%,transparent 70%,rgba(145,205,255,.04));
  }
  #pcEntry .pc-entry-button svg {
    color:#d4efff; stroke:currentColor; border-radius:6px;
    background:rgba(114,176,230,.1); box-shadow:0 0 0 5px rgba(114,176,230,.1);
    filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));
  }
  #pcEntry .pc-entry-button strong { color:#f5f9ff; font-weight:700; }
  #pcEntry .pc-entry-button::after { color:#bcd9ef; text-shadow:0 1px 2px #06111c; }
  #pcEntry .pc-entry-button.primary {
    border-color:rgba(106,211,255,.7); border-top-color:#abe8ff; border-bottom-color:#086190;
    background:linear-gradient(165deg,#209ed6 0%,#087fb9 44%,#075581 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.2),0 4px 0 #033a59,0 9px 22px rgba(0,57,95,.45);
  }
  #pcEntry .pc-entry-button.primary svg { background:rgba(215,245,255,.12); box-shadow:0 0 0 5px rgba(215,245,255,.12); }
  #pcEntry .pc-entry-button:hover {
    transform:translateY(-2px); filter:brightness(1.1); border-top-color:#c7ecff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.25),0 6px 0 #081423,0 13px 24px rgba(0,0,0,.4);
  }
  #pcEntry .pc-entry-button.primary:hover {
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 0 #033a59,0 13px 26px rgba(0,57,95,.5);
  }
  #pcEntry .pc-entry-button:active {
    transform:translateY(3px); filter:brightness(.98);
    box-shadow:inset 0 2px 5px rgba(0,0,0,.23),0 1px 0 #081423,0 3px 8px rgba(0,0,0,.25);
  }
  #pcEntry .pc-entry-button:focus-visible { outline:3px solid #c6eeff; outline-offset:5px; }
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce) {
  #pcEntry .pc-entry-button { transition:none; }
  #pcEntry .pc-entry-button:hover, #pcEntry .pc-entry-button:active { transform:none; }
}
/* DESKTOP BOOKING V15: trip/date stacked left, reference diagram right. */
@media (min-width:1024px) {
  #bookingPage2 .bk-body > div:first-child { grid-column:1 / -1; grid-row:1; }
  #bookingPage2 .bk-body > .ig:nth-child(2) {
    grid-column:1; grid-row:2; align-self:start; margin:0 0 14px;
  }
  #bookingPage2 .bk-body > .ig:nth-child(3) {
    grid-column:1; grid-row:3; align-self:start; margin:0 0 16px;
  }
  #bookingPage2 .bk-body > .seat-map-img {
    grid-column:2; grid-row:2 / 4; align-self:center; justify-self:center;
    display:block; width:100%; max-width:520px; height:190px; max-height:190px;
    object-fit:contain; margin:0 0 16px; padding:8px;
    background:rgba(12,21,36,.7); border:1px solid rgba(159,185,216,.16); border-radius:16px;
  }
  #bookingPage2 .bk-body > label { grid-column:1 / -1; grid-row:4; }
}
/* DESKTOP V16: enlarge the actual reference image, not only its frame. */
@media (min-width:1024px) {
  #bookingPage2 .bk-body { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
  #bookingPage2 .bk-body > .seat-map-img {
    width:100%; max-width:none; height:340px; max-height:340px;
    padding:4px; object-fit:contain;
  }
}
/* DESKTOP V17: compact booking metadata + unified premium interior surfaces. */
@media (min-width:1024px) {
  /* Extra image height belongs to a spare row, never between trip and date. */
  #bookingPage2 .bk-body { grid-template-rows:auto max-content max-content minmax(0,1fr) auto; }
  #bookingPage2 .bk-body > .ig:nth-child(2) { grid-row:2; margin-bottom:12px; }
  #bookingPage2 .bk-body > .ig:nth-child(3) { grid-row:3; margin-bottom:0; }
  #bookingPage2 .bk-body > .seat-map-img { grid-row:2 / 5; align-self:start; }
  #bookingPage2 .bk-body > label { grid-row:5; margin-top:18px; }

  /* Inset photography, satin navy frame, clear editorial hierarchy. */
  #appShell .trip-hcard2 {
    padding:10px; border-radius:24px;
    border:1px solid rgba(169,193,224,.23); border-top-color:rgba(211,229,250,.35);
    background:linear-gradient(145deg,#1b2a3e 0%,#101c2c 42%,#0b1522 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 5px 0 rgba(3,9,17,.55),0 18px 35px rgba(0,0,0,.22);
  }
  #appShell .trip-hcard2:hover {
    border-color:rgba(139,206,237,.55); transform:translateY(-3px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 5px 0 rgba(3,9,17,.5),0 24px 44px rgba(0,0,0,.3);
  }
  #appShell .trip-hcard2 .thc-photo > img,
  #appShell .trip-hcard2 .lux-locked-ov { border-radius:16px; }
  #appShell .trip-hcard2 .thc-overlay { padding:18px 12px 12px; }
  #appShell .trip-hcard2 .thc-title { font-size:28px; line-height:1.4; font-weight:700; color:#f4f7fc; }
  #appShell .pc-card-caption { align-items:center; margin-bottom:14px; }
  #appShell .pc-card-caption > span:first-child { color:#c1d0e2; }
  #appShell .pc-card-caption > span:last-child {
    padding:5px 10px; border:1px solid rgba(133,201,235,.22); border-radius:8px;
    background:rgba(111,184,225,.07); color:#b6e6fb;
  }
  #appShell .trip-hcard2 .thc-bottom-row {
    margin-top:auto; padding:14px 12px; border:1px solid rgba(160,190,222,.1);
    border-radius:13px; background:linear-gradient(120deg,rgba(1,8,16,.3),rgba(105,167,213,.06));
  }
  #appShell .trip-hcard2 .thc-price strong { color:#f1dfb7; font-size:32px; }
  #appShell .thc-status-pill {
    border:1px solid rgba(222,236,252,.2); box-shadow:0 3px 12px rgba(0,0,0,.28);
  }

  /* Detail remains readable and scrollable, with a separate visible CTA. */
  #modalBg .modal-sheet {
    border:1px solid rgba(177,201,228,.3); border-top-color:rgba(219,234,253,.45);
    background:linear-gradient(135deg,#192a40,#0d1726 65%);
    box-shadow:inset 0 1px rgba(255,255,255,.08),0 32px 90px rgba(0,0,0,.6);
  }
  #modalBg .modal-img {
    padding:18px; object-fit:contain;
    background:radial-gradient(ellipse at center,#17283a,#080f1a 75%);
    border-right:1px solid rgba(169,195,226,.12);
  }
  #modalBg .modal-body h2 { font-size:34px; font-weight:700; line-height:1.35; }
  #modalBg .modal-date { color:#a5dff8; }
  #modalBg .modal-price {
    display:flex; padding:16px 18px; border-radius:14px; font-size:28px;
    color:#f1dfb7; background:linear-gradient(120deg,rgba(189,155,93,.14),rgba(189,155,93,.03));
    border:1px solid rgba(213,185,132,.25);
  }
  #modalBg .modal-payment { border-radius:12px; background:rgba(245,158,11,.06); }
  #modalBg .modal-card {
    background:linear-gradient(145deg,rgba(134,172,214,.09),rgba(15,29,47,.45));
    border:1px solid rgba(172,195,224,.17); border-top-color:rgba(207,226,249,.24);
    box-shadow:inset 0 1px rgba(255,255,255,.04),0 4px 12px rgba(0,0,0,.12);
  }
  #modalBg .modal-card strong { font-size:23px; }
  #modalBg .modal-hl { border-left:2px solid #76b9d7; padding:18px 20px; }
  #modalBg .modal-seat-row { background:rgba(6,13,23,.35); border-color:rgba(167,193,222,.14); }
  #modalBg .modal-sheet > .btn-book:not(:disabled) {
    background:linear-gradient(165deg,#249fce,#0877a8 55%,#06517a);
    border-top-color:#a5e5ff;
    box-shadow:inset 0 1px rgba(255,255,255,.25),0 3px 0 #03334f,0 10px 22px rgba(0,35,60,.3);
  }

  /* The same frame treatment for every interior screen, not the entrance/login. */
  #appShell :is(.my-profile,.hist-card,.notif-item,.stat-bar),
  #bookingPage2 :is(.van-block,.seat-form-card),
  #equipPage :is(.eq-item-card,.eq-trip-card,.eq-summary-card),
  #reviewPage :is(.review-card,#writeReviewBox),
  #drawer .info-block {
    border:1px solid rgba(165,191,224,.19); border-top-color:rgba(206,226,247,.29);
    background:linear-gradient(145deg,#18283c,#0d1828 70%);
    box-shadow:inset 0 1px rgba(255,255,255,.05),0 10px 28px rgba(0,0,0,.17);
    border-radius:18px;
  }
  #equipPage .eq-trip-card.selected { border-color:#7dd3fc; background:linear-gradient(135deg,#123952,#102439); }
  #equipPage .eq-item-img { border:1px solid rgba(213,230,250,.3); border-radius:14px; }
  #reviewPage .review-photo { border-radius:14px; border:1px solid rgba(166,192,222,.16); }
  #payModal .pay-box, #adminPopup > div {
    border:1px solid rgba(178,203,232,.28) !important;
    background:linear-gradient(145deg,#192b41,#0c1625 65%) !important;
    box-shadow:inset 0 1px rgba(255,255,255,.08),0 28px 80px rgba(0,0,0,.5);
  }
  #payModal .slip-drop { border-radius:14px; background:#101e30; }
  #payModal .deposit-summary-box { border-radius:16px; background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(56,189,248,.04)); }
  :is(#successPage2,#equipReceiptPage) .receipt {
    background:linear-gradient(135deg,#fffdf7,#f3eddf); border:1px solid #d7c49b;
    box-shadow:inset 0 1px #fff,0 5px 0 rgba(182,155,102,.25),0 20px 44px rgba(0,0,0,.3);
    border-radius:18px;
  }
  :is(#bookingPage2,#equipPage,#reviewPage) .btn-confirm.ready,
  #payModal .btn-pay-ok:not(:disabled) {
    background:linear-gradient(165deg,#249fce,#0877a8 55%,#06517a);
    border:1px solid rgba(142,216,249,.5); border-top-color:#a5e5ff;
    box-shadow:inset 0 1px rgba(255,255,255,.24),0 3px 0 #03334f,0 8px 20px rgba(0,35,60,.3);
  }
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce) {
  #appShell .trip-hcard2:hover { transform:none; }
}
/* DESKTOP V18: align reference diagram with the booking heading. */
@media (min-width:1024px) {
  #bookingPage2 .bk-body { grid-template-rows:max-content max-content max-content minmax(0,1fr) auto; }
  #bookingPage2 .bk-body > div:first-child { grid-column:1; grid-row:1; align-self:start; }
  #bookingPage2 .bk-body > .seat-map-img { grid-column:2; grid-row:1 / 5; align-self:start; object-position:center top; }
}

/* ============================================================
   PREMIUM DESKTOP REFINEMENT — ยกระดับความหรูหรา ลดความรู้สึก "กล่องแข็งๆ"
   เป็นชั้นสุดท้ายที่ทับทุกอย่างก่อนหน้า (ต่อท้าย <style> ทั้งหมด) ใช้เฉพาะจอกว้าง 1024px+
   เท่านั้น ไม่กระทบมือถือแม้แต่บรรทัดเดียว — เพิ่มโทนทอง/แชมเปญ, เงาหลายชั้นให้มีมิติจริง,
   ฟอนต์เสริมแบบหรูสำหรับหัวข้อสำคัญ, และทรานสิชันที่นุ่มนวลขึ้นทั่วทั้งระบบ
   ============================================================ */
@media (min-width: 1024px) {
  #appShell {
    --gold: #d4b06a;
    --gold-soft: rgba(212, 176, 106, .16);
    --gold-line: rgba(212, 176, 106, .35);
    --luxury-font: 'Cormorant Garamond', Georgia, serif;
    background:
      radial-gradient(ellipse 900px 500px at 12% -8%, rgba(212, 176, 106, .05), transparent 55%),
      radial-gradient(ellipse 800px 600px at 100% 15%, rgba(56, 189, 248, .06), transparent 50%),
      #060b13;
  }

  /* ---------- หัวข้อสำคัญ: ฟอนต์เสริมทรงหรู + letter-spacing ที่ดูมีระดับ ---------- */
  #appShell .dt-section-hdr h2,
  #appShell .sec-hdr h3,
  #pcEntry .pc-entry-brand,
  #appShell .dt-hero-overlay h1 {
    font-family: var(--luxury-font);
    font-weight: 600;
    letter-spacing: .3px;
  }
  #appShell .dt-hero-overlay h1 { font-size: 46px; font-weight: 700; }
  #appShell .dt-section-hdr h2 { font-size: 25px; }
  #appShell .sec-hdr h3 { font-size: 21px; }
  #pcEntry .pc-entry-brand { font-size: 29px; }
  #pcEntry .pc-entry-button strong { font-family: var(--luxury-font); font-size: 28px; font-weight: 600; letter-spacing: .2px; }

  /* ---------- การ์ด/แผงหลัก: จากพื้นแบนเรียบ → มีมิติจริงด้วยเงาหลายชั้น + ไล่เฉดผิว ---------- */
  #appShell .dt-stat-card,
  #appShell .dt-quick-tile,
  #appShell .modal-grid,
  #pcEntry .pc-entry-button {
    background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012) 45%, rgba(0, 0, 0, .1));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .06) inset,
      0 4px 10px -4px rgba(0, 0, 0, .4),
      0 20px 44px -14px rgba(0, 0, 0, .6);
    border-radius: 22px;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1), border-color .35s ease;
  }
  #appShell .dt-stat-card:hover,
  #appShell .dt-quick-tile:hover,
  #pcEntry .pc-entry-button:hover {
    border-color: var(--gold-line);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .08) inset,
      0 4px 10px -4px rgba(0, 0, 0, .4),
      0 28px 56px -14px rgba(0, 0, 0, .65),
      0 0 40px -8px rgba(212, 176, 106, .25);
    transform: translateY(-4px);
  }

  /* ---------- ไอคอนวงกลมในการ์ด: จากพื้นเรียบ → มีแสงทองสะท้อนนุ่มๆ ---------- */
  #appShell .dt-stat-ico,
  #appShell .dt-quick-ico {
    background: linear-gradient(150deg, rgba(212, 176, 106, .22), rgba(212, 176, 106, .04));
    border: 1px solid var(--gold-line);
    box-shadow: 0 8px 20px -6px rgba(212, 176, 106, .25), inset 0 1px rgba(255, 255, 255, .15);
  }

  /* ---------- ปุ่มหลัก: เส้นขอบทองบางๆ + เงานุ่มแทนเงาแบนทึบ ---------- */
  #appShell .dt-btn-primary {
    border: 1px solid rgba(212, 176, 106, .4);
    box-shadow: 0 12px 28px -8px rgba(2, 132, 199, .5), inset 0 1px rgba(255, 255, 255, .2);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
  }
  #appShell .dt-btn-primary:hover {
    box-shadow: 0 16px 36px -8px rgba(2, 132, 199, .6), 0 0 0 1px var(--gold-soft), inset 0 1px rgba(255, 255, 255, .25);
  }

  /* ---------- แถบเมนูข้าง: จากแผงทึบสีเดียว → กระจกฝ้าหลายชั้นดูมีระดับ ---------- */
  #appShell .bnav {
    background: linear-gradient(180deg, rgba(10, 16, 26, .94), rgba(6, 11, 19, .98));
    border-right: 1px solid rgba(212, 176, 106, .12);
    box-shadow: 4px 0 40px rgba(0, 0, 0, .4);
  }
  #appShell .bnav-item.active {
    background: linear-gradient(135deg, rgba(212, 176, 106, .14), rgba(56, 189, 248, .08));
    box-shadow: inset 0 0 0 1px var(--gold-line);
  }

  /* ---------- การ์ดทริป: มุมโค้งมนขึ้น + เงาหลายชั้น + เส้นทองบางๆ ตอน hover ---------- */
  #appShell .trip-hcard2 {
    border-radius: 26px;
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .4), 0 20px 44px -14px rgba(0, 0, 0, .6);
  }
  #appShell .trip-hcard2:hover {
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .4), 0 28px 56px -14px rgba(0, 0, 0, .65), 0 0 0 1px var(--gold-line);
  }

  /* ---------- แท่นสายลุยตัวจริง: แสงทองรอบอันดับ 1 ให้ดูพิเศษกว่าเดิม ---------- */
  #appShell .podium-1st .podium-avatar {
    border-color: var(--gold);
    box-shadow: 0 0 30px -4px rgba(212, 176, 106, .5), 0 8px 24px rgba(0, 0, 0, .4);
  }

  /* ---------- เส้นแบ่งเนื้อหา: จากเส้นตรงแบนทึบ → ไล่เฉดจางที่ปลายทั้งสองข้าง ---------- */
  #appShell .divider { height: 1px; border: none; background: linear-gradient(90deg, transparent, rgba(212, 176, 106, .28) 20%, rgba(212, 176, 106, .28) 80%, transparent); }

  /* ---------- ปุ่มเมนู 4 ช่องหน้าแรกเดสก์ท็อป (pc-entry-menu): ย่อให้เล็กลง + ดูมีระดับขึ้น ---------- */
  #pcEntry .pc-entry-menu {
    max-width: 760px;
    gap: 12px;
  }
  #pcEntry .pc-entry-button {
    min-height: 0 !important;
    padding: 16px 18px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: left !important;
  }
  #pcEntry .pc-entry-button svg {
    flex: none !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 8px !important;
    box-sizing: content-box !important;
    border-radius: 50% !important;
    background: linear-gradient(150deg, rgba(212, 176, 106, .22), rgba(212, 176, 106, .04)) !important;
    border: 1px solid var(--gold-line);
  }
  #pcEntry .pc-entry-button strong {
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: .1px;
    margin: 0 !important;
  }
  #pcEntry .pc-entry-button small { display: none !important; }
  #pcEntry .pc-entry-button::after {
    content: "↗" !important;
    position: static !important;
    margin-left: auto !important;
    font-size: 16px !important;
    color: rgba(241, 245, 249, .5) !important;
  }
  #pcEntry .pc-entry-button:hover svg { border-color: var(--gold); }

  /* ---------- ป็อบอัพชำระเงิน (เลือกมัดจำ/เต็มจำนวน + ชำระส่วนที่เหลือ) — เดิมไม่มีการปรับสำหรับจอกว้างเลย ---------- */
  #appShell .pay-box { max-width: 480px; padding: 36px 34px; border-radius: 24px; border: 1px solid var(--gold-line); box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 1px var(--gold-soft); }
  #appShell .pay-box h3 { font-size: 22px; }
  #appShell .pay-box .sub { font-size: 14px; }
  #appShell .deposit-summary-box { padding: 18px 20px; }
  #appShell .ds-label { font-size: 13px; }
  #appShell .ds-calc { font-size: 13px; }
  #appShell .ds-total { font-size: 26px; }
  #appShell .slip-drop { padding: 22px; }
  #appShell .btn-confirm { height: 56px; font-size: 16px; }

  /* ---------- ถูกใจ + คอมเมนต์ใต้รีวิว ---------- */
  #appShell .review-action-btn { font-size: 13.5px; padding: 8px 14px; }
  #appShell .review-comment-bubble .rc-name { font-size: 13px; }
  #appShell .review-comment-bubble .rc-text { font-size: 14px; }
  #appShell .review-comment-input-row input { font-size: 14px; padding: 11px 16px; }

  /* ---------- หัวข้อ "เผื่อจำเป็น" — จัดเป็นกริดแทนเรียงคอลัมน์เดียวยาวๆ บนจอกว้าง ---------- */
  #appShell #notifContent .prep-item-card { grid-column: span 1; }
  #appShell #notifContent:has(.prep-item-card) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-content: start; }
  #appShell #notifContent:has(.prep-item-card) > h3,
  #appShell #notifContent:has(.prep-item-card) > div:not(.prep-item-card) { grid-column: 1 / -1; }
  #appShell .prep-item-card { padding: 20px 22px; border-radius: 18px; border-color: var(--gold-line); }
  #appShell .prep-item-title { font-size: 15px; }
  #appShell .prep-detail-box { max-width: 620px; border-radius: 28px; padding: 40px 38px 44px; }
  #appShell .prep-detail-box h2 { font-size: 24px; }
  #appShell .prep-detail-body { font-size: 15px; }
}

/* ===== หน้าเช่าอุปกรณ์: พื้นหลังป่า + กล่องโปร่งใส ===== */
#equipPage{
  background:
    linear-gradient(rgba(3,10,16,.88),rgba(3,10,16,.95)),
    url('https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=1200&q=82')
    center/cover no-repeat fixed;
}
#equipPage .bk-hdr{
  background:rgba(4,12,20,.68);
  border-bottom:1px solid rgba(148,163,184,.11);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
#equipPage .bk-body > div:first-child{
  padding:15px 14px;
  border:1px solid rgba(148,163,184,.12);
  border-radius:18px;
  background:rgba(6,17,27,.42);
  box-shadow:0 12px 28px rgba(0,0,0,.14);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
#equipPage .eq-sec-title{color:#7dd3fc}

/* เลือกทริปแบบ dropdown เดียว */
#equipPage #eqTripList{
  display:block !important;
  grid-template-columns:none !important;
  gap:0 !important;
}
#equipPage .eq-trip-select-wrap{
  position:relative;
  padding:12px;
  border:1px solid rgba(148,163,184,.15);
  border-radius:18px;
  background:rgba(8,22,34,.48);
  box-shadow:0 12px 28px rgba(0,0,0,.15);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  animation:eqGlassIn .28s ease both;
}
#equipPage .eq-trip-select-label{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 8px 2px;
  color:#b9c9d8;
  font-size:10px;
  font-weight:700;
}
#equipPage .eq-trip-select-label .dot{
  width:7px;height:7px;border-radius:50%;
  background:#38bdf8;
  box-shadow:0 0 10px rgba(56,189,248,.55);
}
#equipPage .eq-trip-select{
  width:100%;
  height:50px;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(125,211,252,.18);
  border-radius:14px;
  outline:none;
  padding:0 42px 0 13px;
  background:linear-gradient(180deg,rgba(13,30,45,.78),rgba(8,21,33,.78));
  color:#eef7ff;
  font-family:inherit;
  font-size:12px;
  font-weight:700;
}
#equipPage .eq-trip-select:focus{
  border-color:rgba(125,211,252,.58);
  box-shadow:0 0 0 3px rgba(56,189,248,.075);
}
#equipPage .eq-trip-select-arrow{
  position:absolute;
  right:28px;
  bottom:26px;
  width:9px;height:9px;
  border-right:2px solid #7dd3fc;
  border-bottom:2px solid #7dd3fc;
  transform:rotate(45deg);
  pointer-events:none;
  animation:eqArrowFloat 1.8s ease-in-out infinite;
}
@keyframes eqArrowFloat{
  0%,100%{transform:translateY(-2px) rotate(45deg)}
  50%{transform:translateY(2px) rotate(45deg)}
}
#equipPage .eq-trip-selected-preview{
  margin-top:9px;
  padding:9px 11px;
  border-radius:12px;
  border:1px solid rgba(125,211,252,.11);
  background:rgba(3,12,20,.34);
  color:#90a8bb;
  font-size:10px;
  line-height:1.45;
  animation:eqGlassIn .24s ease both;
}
#equipPage .eq-trip-selected-preview strong{color:#e9f7ff}

/* การ์ดอุปกรณ์เดิม แค่โปร่งใสขึ้น */
#equipPage .eq-item-card{
  background:linear-gradient(145deg,rgba(11,27,41,.58),rgba(7,19,30,.44));
  border:1px solid rgba(148,163,184,.13);
  box-shadow:0 10px 26px rgba(0,0,0,.13);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
#equipPage .eq-step-btn{
  background:rgba(23,43,63,.58);
  border:1px solid rgba(148,163,184,.12);
}
#equipPage .eq-summary-card{
  background:linear-gradient(180deg,rgba(18,54,74,.45),rgba(6,20,31,.40));
  border:1px solid rgba(125,211,252,.16);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
#equipPage .eq-note{
  background:rgba(245,158,11,.055);
  border-color:rgba(245,158,11,.18);
}
#equipPage .sticky-bar{
  background:linear-gradient(180deg,rgba(4,12,20,.08),rgba(4,12,20,.92) 34%);
  border-top:1px solid rgba(148,163,184,.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
#equipPage .eq-empty-trip{
  padding:18px 14px;
  text-align:center;
  border:1px solid rgba(148,163,184,.14);
  border-radius:16px;
  background:rgba(8,22,34,.45);
  color:#8499ab;
  font-size:11px;
  line-height:1.6;
}
@keyframes eqGlassIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}
@media (min-width:900px){
  #equipPage #eqTripList{display:block !important;max-width:760px}
  #equipPage .eq-trip-select{height:58px;font-size:18px;padding-left:16px}
  #equipPage .eq-trip-select-label{font-size:15px}
  #equipPage .eq-trip-selected-preview{font-size:15px}
}



/* เช่าของ: เลือกทริปแบบการ์ด (แทน <select> ที่บาง iPhone แตะเลือกไม่ได้) */
#equipPage .eq-trip-picks{display:flex;flex-direction:column;gap:8px}
#equipPage .eq-trip-pick{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px 9px 9px;border-radius:14px;text-align:left;cursor:pointer;
  font-family:inherit;color:#eef7ff;border:1.5px solid rgba(125,211,252,.18);background:linear-gradient(180deg,rgba(13,30,45,.78),rgba(8,21,33,.78));
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:border-color .15s,background .15s}
#equipPage .eq-trip-pick img,#equipPage .eq-trip-pick-ic{flex:none;width:46px;height:46px;border-radius:11px;object-fit:cover;display:grid;place-items:center;background:rgba(5,46,62,.7);font-size:20px}
#equipPage .eq-trip-pick-x{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#equipPage .eq-trip-pick-x b{font-size:13.5px;line-height:1.3}
#equipPage .eq-trip-pick-x small{font-size:11.5px;color:#9fb3c0}
#equipPage .eq-trip-pick-check{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid rgba(125,211,252,.35);font-size:13px;font-weight:900;color:#04212b}
#equipPage .eq-trip-pick.on{border-color:#38bdf8;background:linear-gradient(180deg,rgba(14,165,233,.22),rgba(8,47,73,.55));box-shadow:0 0 0 3px rgba(56,189,248,.12)}
#equipPage .eq-trip-pick.on .eq-trip-pick-check{background:#38bdf8;border-color:#38bdf8}
#equipPage .eq-trip-pick:active{transform:scale(.985)}