/* ======================================================================
   TIAEW NEE HUR — DESKTOP V2
   Desktop-only presentation layer. Nothing in this file applies below
   1024px, so the existing mobile layout and interactions stay untouched.
   ====================================================================== */
@media (min-width:1024px) {
  :root {
    --d-rail:268px;
    --d-top:72px;
    --d-bg:#050b12;
    --d-panel:#0b1623;
    --d-panel-2:#101e2d;
    --d-line:rgba(154,184,214,.14);
    --d-line-strong:rgba(125,211,252,.28);
    --d-text:#f4f8fc;
    --d-sub:#a9bacb;
    --d-blue:#38bdf8;
    --d-blue-2:#087fb2;
    --d-green:#34d399;
    --d-gold:#e0bd76;
    --d-orange:#fb923c;
    --d-radius:22px;
    --d-shadow:0 22px 55px rgba(0,0,0,.34);
  }

  html { background:var(--d-bg); scrollbar-color:#29435a #07101a; }
  body {
    min-width:1024px;
    background:
      radial-gradient(900px 520px at 78% -8%,rgba(22,154,207,.12),transparent 64%),
      radial-gradient(760px 480px at 5% 92%,rgba(16,185,129,.07),transparent 64%),
      var(--d-bg);
    color:var(--d-text);
  }
  body::before {
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.12;
    background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(to bottom,black,transparent 80%);
  }
  .mobile-only { display:none!important; }
  .pc-only { display:flex!important; }

  /* ---------- App frame / desktop navigation ---------- */
  #appShell {
    min-height:100vh!important;
    padding-left:var(--d-rail)!important;
    background:transparent!important;
    color:var(--d-text);
  }
  #appShell .bnav {
    position:fixed!important;inset:0 auto 0 0!important;z-index:920!important;
    width:var(--d-rail)!important;height:100vh!important;min-height:0!important;
    padding:22px 18px 20px!important;margin:0!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:7px!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    border:0!important;border-right:1px solid rgba(215,233,249,.11)!important;
    background:linear-gradient(180deg,rgba(11,22,35,.985),rgba(5,11,19,.99))!important;
    box-shadow:18px 0 55px rgba(0,0,0,.3)!important;
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  }
  #appShell .pc-brand {
    order:0!important;display:grid!important;grid-template-columns:50px 1fr!important;grid-template-rows:auto auto!important;
    column-gap:12px!important;align-items:center!important;padding:0 5px 22px!important;margin:0 0 8px!important;
    border-bottom:1px solid var(--d-line)!important;
  }
  #appShell .pc-brand img { grid-row:1/3;width:50px!important;height:50px!important;border-radius:50%!important;box-shadow:0 0 0 4px rgba(56,189,248,.08),0 10px 25px rgba(0,0,0,.35)!important; }
  #appShell .pc-brand strong { font-size:20px!important;line-height:1.2!important;color:#fff!important;letter-spacing:.1px!important; }
  #appShell .pc-brand small { display:block!important;font-size:9px!important;color:#6f879b!important;letter-spacing:1.5px!important; }
  #appShell .bnav-item {
    order:1!important;flex:0 0 auto!important;width:100%!important;min-height:52px!important;margin:0!important;padding:11px 13px!important;
    display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:13px!important;
    border:1px solid transparent!important;border-radius:14px!important;background:transparent!important;color:#8fa6bb!important;cursor:pointer!important;
    transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s ease!important;
  }
  #appShell .bnav-item:hover { transform:translateX(3px)!important;background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.065)!important;color:#eaf4fc!important; }
  #appShell .bnav-item.active {
    background:linear-gradient(105deg,rgba(14,165,233,.19),rgba(16,185,129,.055))!important;
    border-color:rgba(56,189,248,.25)!important;color:#e9f8ff!important;
    box-shadow:inset 3px 0 0 var(--d-blue),0 9px 22px rgba(0,0,0,.16)!important;
  }
  #appShell .bnav-item .ico { width:26px!important;height:26px!important;min-width:26px!important;display:grid!important;place-items:center!important;color:inherit!important;font-size:22px!important; }
  #appShell .bnav-item .ico svg { width:23px!important;height:23px!important; }
  #appShell .bnav-item .lbl { font-size:15px!important;line-height:1.3!important;color:inherit!important;text-align:left!important;font-weight:650!important; }
  #appShell .nav-avatar { width:27px!important;height:27px!important;border:2px solid rgba(125,211,252,.55)!important; }
  #appShell .bnav-checkin-action .checkin-fab { position:static!important;width:30px!important;height:30px!important;min-width:30px!important;border-radius:10px!important;border:1px solid rgba(56,189,248,.32)!important;box-shadow:none!important;background:rgba(14,165,233,.12)!important; }
  #appShell .bnav-checkin-action .checkin-fab svg { width:20px!important;height:20px!important; }
  #appShell .pc-side-services {
    order:2!important;display:flex!important;flex-direction:column!important;gap:5px!important;margin:13px 0 0!important;padding:15px 0 0!important;border-top:1px solid var(--d-line)!important;
  }
  #appShell .pc-side-services::before { content:"บริการเพิ่มเติม";padding:0 12px 7px;color:#5e768b;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase; }
  #appShell .pc-side-services button {
    width:100%!important;padding:10px 13px!important;border:0!important;border-radius:11px!important;background:transparent!important;color:#9db0c2!important;
    font:inherit!important;font-size:13px!important;text-align:left!important;cursor:pointer!important;transition:.2s!important;
  }
  #appShell .pc-side-services button:hover { color:#dff5ff!important;background:rgba(56,189,248,.075)!important; }
  #appShell .pc-nav-contact {
    order:3!important;margin:14px 0 0!important;width:100%!important;padding:12px 15px!important;border:1px solid rgba(125,211,252,.3)!important;border-radius:13px!important;
    background:linear-gradient(135deg,#087ca9,#0c9fc2)!important;color:#fff!important;font-size:14px!important;font-weight:750!important;box-shadow:0 12px 24px rgba(3,105,145,.22)!important;
  }
  #appShell .pc-entry-return { order:4!important;margin-top:auto!important;min-height:40px!important;border:1px solid var(--d-line)!important;border-radius:11px!important;background:rgba(255,255,255,.025)!important;color:#71899e!important;font-size:11px!important;cursor:pointer!important; }

  #appShell .pc-top {
    position:fixed!important;top:0!important;left:var(--d-rail)!important;right:0!important;z-index:900!important;height:var(--d-top)!important;
    padding:0 30px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;
    border-bottom:1px solid var(--d-line)!important;background:rgba(5,11,18,.82)!important;
    backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;box-shadow:0 10px 35px rgba(0,0,0,.13)!important;
  }
  #appShell .pc-top > div:first-child { display:flex;flex-direction:column;gap:2px; }
  #appShell .pc-top strong { font-size:18px;color:#f5f9fc;line-height:1.2; }
  #appShell .pc-top small { font-size:10px;color:#698195;letter-spacing:.5px; }
  #appShell .pc-top-actions { display:flex;gap:9px; }
  #appShell .pc-top-actions button { height:38px;padding:0 15px;border:1px solid var(--d-line);border-radius:11px;background:rgba(255,255,255,.035);color:#b8cad9;font:inherit;font-size:12px;cursor:pointer; }
  #appShell .pc-top-actions button:last-child { border-color:rgba(56,189,248,.26);background:rgba(56,189,248,.09);color:#bfeaff; }

  /* ---------- Home hero ---------- */
  #appShell > .hdr { display:block!important;margin:0!important;padding:calc(var(--d-top) + 24px) 30px 0!important;background:transparent!important;border:0!important; }
  #appShell > .hdr.no-greet { display:none!important; }
  #appShell .home-banner {
    position:relative!important;width:min(100%,1500px)!important;height:clamp(340px,31vw,500px)!important;margin:0 auto!important;overflow:hidden!important;
    border:1px solid rgba(208,229,247,.14)!important;border-radius:28px!important;background:#08121d!important;box-shadow:var(--d-shadow)!important;
  }
  #appShell .home-banner > img { width:100%!important;height:100%!important;max-height:none!important;display:block!important;object-fit:cover!important;object-position:center!important;border-radius:0!important; }
  #appShell .home-banner::after { content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none!important;background:linear-gradient(90deg,rgba(3,9,16,.78),rgba(3,9,16,.12) 54%,rgba(3,9,16,.25)),linear-gradient(0deg,rgba(3,9,16,.86),transparent 50%)!important; }
  #appShell .home-banner-fade { display:none!important; }
  #appShell .home-banner-actions { display:none!important; }
  #appShell .home-booking-steps {
    position:absolute!important;right:28px!important;bottom:25px!important;z-index:3!important;width:390px!important;max-width:44%!important;padding:14px 16px!important;
    border:1px solid rgba(255,255,255,.12)!important;border-radius:17px!important;background:rgba(4,12,20,.62)!important;backdrop-filter:blur(14px)!important;
  }
  #appShell .home-step-icon { width:35px!important;height:35px!important;font-size:15px!important; }
  #appShell .home-step-label { font-size:9px!important;color:#b7c9d8!important; }
  #appShell .home-step-line { margin-top:17px!important; }
  #appShell .home-banner .hdr-greet {
    position:absolute!important;left:28px!important;bottom:25px!important;right:auto!important;z-index:3!important;width:min(540px,46%)!important;max-width:none!important;margin:0!important;padding:15px 17px!important;
    display:flex!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:18px!important;background:rgba(4,12,20,.64)!important;box-shadow:0 14px 38px rgba(0,0,0,.25)!important;
    backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;
  }
  #appShell .hdr-greet img { width:52px!important;height:52px!important; }
  #appShell .hdr-greet h2 { font-size:17px!important;color:#fff!important; }
  #appShell .hdr-greet p { font-size:12px!important;color:#b8c8d7!important; }
  #appShell .hdr-greet button { font-size:12px!important; }

  /* ---------- Main workspace ---------- */
  #appShell .view-page { min-height:calc(100vh - var(--d-top)); }
  #appShell .view-page > .main,
  #appShell .main { width:min(100%,1560px)!important;max-width:1560px!important;margin:0 auto!important;padding:36px 34px 88px!important; }
  #appShell #tab-home .main { padding-top:28px!important; }
  #appShell :is(#tab-trips,#tab-mytrips,#tab-notif) > .main { padding-top:calc(var(--d-top) + 34px)!important; }
  #appShell .pc-layout { display:grid!important;grid-template-columns:minmax(0,1fr) 330px!important;gap:28px!important;align-items:start!important; }
  #appShell .pc-intro { display:none!important; }
  #appShell .pc-toolbar { grid-column:1/-1!important;display:block!important;margin:0 0 2px!important;padding:0!important;border:0!important; }
  #appShell .pc-main { grid-column:1!important;min-width:0!important; }
  #appShell .pc-support { grid-column:2!important;display:flex!important;flex-direction:column!important;gap:14px!important;margin:0!important;padding:0!important;border:0!important;position:sticky!important;top:calc(var(--d-top) + 24px)!important; }
  #appShell .pc-footer { width:100%!important;margin:24px 0 0!important; }
  #appShell .home-quick-actions { display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:13px!important;margin:0 0 30px!important; }
  #appShell .home-quick-actions .qa-mini { min-height:72px!important;height:auto!important;padding:15px 18px!important;display:flex!important;flex-direction:row!important;justify-content:flex-start!important;gap:12px!important;border:1px solid var(--d-line)!important;border-radius:17px!important;background:linear-gradient(145deg,rgba(16,30,45,.9),rgba(9,20,31,.86))!important;box-shadow:0 13px 30px rgba(0,0,0,.18)!important;animation:none!important; }
  #appShell .home-quick-actions .qa-mini:hover { transform:translateY(-3px)!important;border-color:var(--d-line-strong)!important; }
  #appShell .qa-mini .qa-mini-ico { font-size:27px!important; }
  #appShell .qa-mini .qa-mini-label { font-size:14px!important;color:#edf6fd!important; }
  #appShell .qa-mini::after { margin-left:auto;font-size:15px!important;color:#7dd3fc!important; }
  #appShell .sec-hdr { margin:3px 0 17px!important;display:flex!important;align-items:center!important;justify-content:space-between!important; }
  #appShell .sec-hdr h3 { font-family:'Sarabun',sans-serif!important;font-size:22px!important;font-weight:800!important;color:#f5f9fc!important;letter-spacing:-.2px!important; }
  #appShell .sec-hdr h3::before { content:"";display:inline-block;width:4px;height:21px;margin-right:10px;border-radius:9px;background:linear-gradient(#38bdf8,#2dd4bf);vertical-align:-3px;box-shadow:0 0 16px rgba(56,189,248,.45); }
  #appShell .sec-hdr > *:last-child { font-size:12px!important;color:#7dd3fc!important; }
  #appShell .divider { height:1px!important;margin:33px 0!important;background:linear-gradient(90deg,transparent,var(--d-line),transparent)!important;border:0!important; }

  #appShell #upcomingList,
  #appShell #tripListFull { display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px!important; }
  #appShell #tripListFull { grid-template-columns:repeat(3,minmax(0,1fr))!important; }
  #appShell #tripListFull > p { grid-column:1/-1; }
  #appShell .trip-hcard2 {
    min-width:0!important;height:100%!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;
    border:1px solid var(--d-line)!important;border-radius:22px!important;background:linear-gradient(160deg,rgba(15,30,45,.96),rgba(7,17,27,.94))!important;
    box-shadow:0 16px 40px rgba(0,0,0,.24)!important;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease!important;
  }
  #appShell .trip-hcard2:hover { transform:translateY(-6px)!important;border-color:rgba(125,211,252,.34)!important;box-shadow:0 26px 56px rgba(0,0,0,.38)!important; }
  #appShell .trip-hcard2 .thc-photo { aspect-ratio:16/9!important;overflow:hidden!important; }
  #appShell .trip-hcard2 .thc-photo > img { width:100%!important;height:100%!important;object-fit:cover!important;transition:transform .55s ease!important; }
  #appShell .trip-hcard2:hover .thc-photo > img { transform:scale(1.04)!important; }
  #appShell .trip-hcard2 .thc-overlay { flex:1!important;padding:18px 19px 19px!important;display:flex!important;flex-direction:column!important; }
  #appShell .pc-card-caption { display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin:0 0 8px!important;color:#8196a9!important;font-size:11px!important; }
  #appShell .pc-card-caption > span:last-child { color:#7dd3fc!important; }
  #appShell .trip-hcard2 .thc-title { font-size:19px!important;line-height:1.45!important;color:#fff!important;margin-bottom:8px!important; }
  #appShell .trip-hcard2 .thc-meta-row { font-size:12px!important;line-height:1.65!important;color:#a9bacb!important; }
  #appShell .trip-hcard2 .thc-bottom-row { margin-top:auto!important;padding-top:14px!important;border-top:1px solid var(--d-line)!important; }
  #appShell .trip-hcard2 .thc-price strong { font-size:25px!important;color:#f7dfad!important; }
  #appShell .trip-hcard2 .thc-price > span { font-size:11px!important;color:#8ea3b6!important; }
  #appShell .trip-hcard2 .thc-seats-pill,#appShell .thc-status-pill { font-size:11px!important;padding:6px 10px!important; }

  #appShell .pc-support .stat-bar,
  #appShell .pc-support > a { width:100%!important;margin:0!important;padding:18px!important;border:1px solid var(--d-line)!important;border-radius:18px!important;background:linear-gradient(145deg,rgba(16,30,45,.9),rgba(8,18,29,.88))!important;box-shadow:0 12px 30px rgba(0,0,0,.17)!important;color:#eaf4fb!important; }
  #appShell .stat-bar .ico { font-size:27px!important; }
  #appShell .stat-bar .txt h4 { font-size:14px!important;color:#eef7fd!important; }
  #appShell .stat-bar .txt p { font-size:11px!important;line-height:1.6!important;color:#8298aa!important; }
  #appShell .past-grid { display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:15px!important; }
  #appShell .past-card { border-radius:18px!important;overflow:hidden!important;border:1px solid var(--d-line)!important; }

  /* ---------- Trips / profile ---------- */
  #appShell .search-wrap { max-width:none!important;margin:0 0 26px!important; }
  #appShell .search-wrap input { width:100%!important;height:54px!important;padding-left:48px!important;border:1px solid var(--d-line)!important;border-radius:15px!important;background:rgba(12,25,39,.88)!important;color:#eff7fd!important;font-size:14px!important;box-shadow:0 12px 30px rgba(0,0,0,.14)!important; }
  #appShell .my-profile { max-width:none!important;margin:0 0 24px!important;padding:25px 27px!important;border:1px solid var(--d-line)!important;border-radius:22px!important;background:linear-gradient(130deg,rgba(18,42,55,.93),rgba(9,21,33,.95))!important;box-shadow:var(--d-shadow)!important; }
  #appShell .my-ava { width:76px!important;height:76px!important;box-shadow:0 0 0 5px rgba(56,189,248,.08)!important; }
  #appShell .my-info h3 { font-size:24px!important;color:#fff!important; }
  #appShell .my-info > p { font-size:13px!important;color:#9fb1c1!important; }
  #appShell .my-stats { margin-top:18px!important;display:grid!important;grid-template-columns:repeat(3,minmax(120px,1fr))!important;gap:12px!important; }
  #appShell .my-stat { padding:14px!important;border:1px solid rgba(255,255,255,.075)!important;border-radius:14px!important;background:rgba(2,10,17,.25)!important;text-align:center!important; }
  #appShell .my-stat h4 { font-size:25px!important; }
  #appShell .my-stat p { font-size:10px!important;color:#7f94a6!important; }
  #appShell .my-profile-edit-btn { top:22px!important;right:24px!important;padding:9px 14px!important;font-size:12px!important; }
  #appShell .my-payment-filter { margin:0 0 29px!important;padding:6px!important;display:inline-flex!important;border:1px solid var(--d-line)!important;border-radius:14px!important;background:rgba(6,15,24,.72)!important; }
  #appShell .my-payment-filter-btn { min-width:130px!important;padding:10px 17px!important;font-size:12px!important;border-radius:10px!important; }
  #appShell #bookingUpcomingList,
  #appShell #bookingHistoryList { display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px!important; }
  #appShell #bookingHistoryList.my-past-fade-list > * { display:block!important;animation:none!important; }
  #appShell .hist-card { min-height:280px!important;border-radius:20px 20px 0 0!important;border:1px solid var(--d-line)!important;box-shadow:0 15px 38px rgba(0,0,0,.24)!important; }
  #appShell .hist-card-overlay h4 { font-size:19px!important; }
  #appShell .hist-card-overlay p { font-size:12px!important; }
  #appShell .pickup-manage-box { min-height:82px!important;padding:14px 15px!important;border-radius:0 0 20px 20px!important; }
  #appShell .pickup-manage-copy small { font-size:10px!important; }
  #appShell .pickup-manage-copy strong { font-size:13px!important; }
  #appShell .pickup-manage-btn { min-width:150px!important;padding:10px 13px!important;font-size:11px!important; }

  /* ---------- Learning / necessary ---------- */
  #appShell #notifContent { display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:15px!important;align-content:start!important; }
  #appShell #notifContent > :not(.prep-item-card) { grid-column:1/-1!important; }
  #appShell .learning-page-intro { padding:25px 27px!important;border-radius:22px!important; }
  #appShell .learning-page-intro h3 { font-size:25px!important; }
  #appShell .learning-page-intro p { font-size:13px!important; }
  #appShell .learning-summary-card { grid-template-columns:1fr 88px!important;padding:22px 24px!important;border-radius:20px!important; }
  #appShell .learning-score-ring { width:76px!important;height:76px!important; }
  #appShell .learning-summary-copy strong { font-size:26px!important; }
  #appShell .learning-summary-card p { font-size:12px!important; }
  #appShell .prep-item-card { min-height:108px!important;margin:0!important;padding:18px!important;border-radius:18px!important; }
  #appShell .prep-item-card:hover { transform:translateY(-3px)!important;border-color:rgba(251,146,60,.4)!important; }
  #appShell .prep-item-icon { width:48px!important;height:48px!important;font-size:23px!important; }
  #appShell .prep-item-title { font-size:14px!important; }
  #appShell .prep-item-copy small { font-size:10px!important; }
  .prep-detail-box { width:min(960px,calc(100vw - 100px))!important;max-width:960px!important;max-height:calc(100vh - 80px)!important;padding:34px 36px 38px!important;border-radius:26px!important; }
  .prep-detail-box h2 { font-size:26px!important; }
  .prep-detail-body { grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important; }
  .learning-row { min-height:92px!important; }
  .learning-row-title { font-size:14px!important; }

  /* ---------- Detail modal ---------- */
  #modalBg { padding:34px!important;align-items:center!important; }
  #modalBg .modal-sheet { width:min(1120px,calc(100vw - 100px))!important;max-width:1120px!important;max-height:calc(100vh - 68px)!important;padding:0!important;display:grid!important;grid-template-columns:46% 54%!important;grid-template-rows:1fr auto!important;overflow:hidden!important;border:1px solid rgba(199,220,240,.18)!important;border-radius:28px!important;background:linear-gradient(145deg,#122235,#09131f)!important;box-shadow:0 38px 100px rgba(0,0,0,.62)!important; }
  #modalBg .modal-img { grid-column:1!important;grid-row:1/3!important;width:100%!important;height:100%!important;min-height:610px!important;padding:0!important;object-fit:cover!important;border-right:1px solid var(--d-line)!important; }
  #modalBg .modal-body { grid-column:2!important;grid-row:1!important;min-width:0!important;padding:34px 35px 20px!important;overflow-y:auto!important; }
  #modalBg .modal-body h2 { font-size:29px!important;line-height:1.3!important;color:#fff!important; }
  #modalBg .modal-date { font-size:14px!important;color:#9fdfff!important; }
  #modalBg .modal-price { font-size:24px!important; }
  #modalBg .modal-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important; }
  #modalBg .modal-card { min-height:82px!important;padding:14px!important;border:1px solid var(--d-line)!important;border-radius:14px!important;background:rgba(255,255,255,.035)!important; }
  #modalBg .modal-card span { font-size:11px!important; }
  #modalBg .modal-card strong { font-size:15px!important; }
  #modalBg .modal-sheet > .btn-book { grid-column:2!important;grid-row:2!important;position:static!important;width:auto!important;max-width:none!important;height:54px!important;margin:0 35px 30px!important;border-radius:14px!important;font-size:15px!important; }

  /* ---------- Booking workspace ---------- */
  #bookingPage2,
  #equipPage,
  #reviewPage,
  #successPage2,
  #equipReceiptPage { background:linear-gradient(rgba(4,11,18,.92),rgba(4,11,18,.97)),url('../assets/optimized/hero-900.webp') center/cover fixed!important; }
  #bookingPage2 .bk-hdr,
  #equipPage .bk-hdr,
  #reviewPage .bk-hdr { position:sticky!important;top:0!important;z-index:20!important;height:72px!important;padding:0 max(32px,calc((100vw - 1480px)/2))!important;display:flex!important;align-items:center!important;justify-content:space-between!important;border-bottom:1px solid var(--d-line)!important;background:rgba(5,12,20,.84)!important;backdrop-filter:blur(18px)!important; }
  :is(#bookingPage2,#equipPage,#reviewPage) .btn-back { min-width:122px!important;height:40px!important;border:1px solid var(--d-line)!important;border-radius:11px!important;background:rgba(255,255,255,.035)!important;color:#d8e6f2!important;font-size:12px!important; }
  #bookingPage2 .bk-body { width:min(100%,1480px)!important;max-width:1480px!important;margin:0 auto!important;padding:32px 34px 130px!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(460px,600px)!important;grid-template-rows:auto!important;gap:16px 28px!important;align-items:start!important; }
  #bookingPage2 .bk-body > div:first-child { grid-column:1!important;grid-row:auto!important;text-align:left!important;margin:0 0 5px!important; }
  #bookingPage2 .bk-body > div:first-child h2 { font-size:27px!important;text-align:left!important; }
  #bookingPage2 .bk-body > div:first-child p { font-size:13px!important;text-align:left!important; }
  #bookingPage2 .bk-body > .ig { grid-column:1!important;margin:0!important; }
  #bookingPage2 .bk-body > label { grid-column:1!important;margin:6px 0 0!important;font-size:13px!important; }
  #bookingPage2 .bk-body > .seat-map-img { grid-column:2!important;grid-row:1/6!important;width:100%!important;max-height:440px!important;margin:0!important;padding:12px!important;object-fit:contain!important;border:1px solid var(--d-line)!important;border-radius:20px!important;background:rgba(8,19,30,.78)!important; }
  #bookingPage2 .seat-legend { grid-column:1!important;margin:5px 0 0!important;padding:12px 14px!important;border:1px solid var(--d-line)!important;border-radius:13px!important;background:rgba(8,19,30,.66)!important; }
  #bookingPage2 .van-blocks-row { grid-column:1/-1!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important;margin-top:18px!important; }
  #bookingPage2 .van-blocks-row .van-block { min-width:0!important;margin:0!important;padding:18px!important;border:1px solid var(--d-line)!important;border-radius:20px!important;background:linear-gradient(150deg,rgba(16,31,47,.9),rgba(8,18,29,.9))!important;box-shadow:0 15px 38px rgba(0,0,0,.22)!important; }
  #bookingPage2 .bk-body > .van-block { grid-column:1/-1!important;padding:19px!important;border:1px solid var(--d-line)!important;border-radius:20px!important;background:rgba(10,23,36,.84)!important; }
  #bookingPage2 .van-block-title { font-size:15px!important; }
  #bookingPage2 .van-grid-seats { gap:9px!important; }
  #bookingPage2 #formFieldsBox2 { grid-column:1/-1!important;margin-top:7px!important;padding:24px!important;border:1px solid var(--d-line)!important;border-radius:22px!important;background:rgba(9,21,33,.88)!important;box-shadow:0 18px 45px rgba(0,0,0,.2)!important; }
  #bookingPage2 #seatFormsContainer { display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important; }
  #bookingPage2 .seat-form-card { margin:0!important;padding:19px!important;border-radius:18px!important; }
  #bookingPage2 :is(.ig input,.ig select,.pickup-select,.pickup-other-input) { min-height:50px!important;font-size:14px!important; }
  #bookingPage2 .sticky-bar { left:0!important;right:0!important;bottom:0!important;z-index:40!important;padding:15px 34px!important;border-top:1px solid var(--d-line)!important;background:rgba(5,12,20,.88)!important;backdrop-filter:blur(18px)!important; }
  #bookingPage2 .sticky-bar .btn-confirm { max-width:720px!important;height:54px!important;margin:0 auto!important;border-radius:14px!important;font-size:15px!important; }

  /* ---------- Payment / receipt ---------- */
  .pay-modal { padding:32px!important;align-items:center!important; }
  .pay-modal .pay-box { width:min(560px,calc(100vw - 80px))!important;max-width:560px!important;max-height:calc(100vh - 64px)!important;padding:31px 32px!important;overflow-y:auto!important;border:1px solid rgba(193,218,239,.2)!important;border-radius:25px!important;background:linear-gradient(145deg,#13263a,#091521 68%)!important;box-shadow:0 35px 95px rgba(0,0,0,.58)!important; }
  #payModal .pay-box,
  #remainingPayModal .pay-box { width:min(980px,calc(100vw - 100px))!important;max-width:980px!important;display:grid!important;grid-template-columns:330px minmax(0,1fr)!important;gap:14px 24px!important;align-items:start!important; }
  :is(#payModal,#remainingPayModal) .pay-x { position:absolute!important; }
  :is(#payModal,#remainingPayModal) .pay-box > h3,
  :is(#payModal,#remainingPayModal) .pay-box > .sub,
  #payModal .pay-box > .chip { grid-column:1/-1!important; }
  :is(#payModal,#remainingPayModal) .qr-img { grid-column:1!important;grid-row:4/7!important;width:100%!important;max-width:310px!important;margin:0 auto!important; }
  :is(#payModal,#remainingPayModal) .deposit-summary-box { grid-column:2!important;margin:0!important;min-height:150px!important;padding:21px!important;border-radius:18px!important; }
  #payModal .bank-shortcut-box { grid-column:1/-1!important;margin-top:4px!important; }
  #payModal .bank-shortcut-list { display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:9px!important; }
  #payModal .bank-shortcut-item { min-width:0!important; }
  #payModal .seat-lock-timer,
  :is(#payModal,#remainingPayModal) .slip-upload,
  :is(#payModal,#remainingPayModal) .btn-confirm { grid-column:1/-1!important; }
  :is(#payModal,#remainingPayModal) .slip-drop { min-height:92px!important; }
  #paymentChoiceModal .pay-box { max-width:560px!important; }
  #equipPayModal { align-items:center!important;padding:32px!important; }
  #equipPayModal .eq-pay-box { width:min(700px,calc(100vw - 80px))!important;max-width:700px!important;max-height:calc(100vh - 64px)!important;padding:30px!important;overflow-y:auto!important;border-radius:25px!important; }
  :is(#successPage2,#equipReceiptPage) .succ-body { max-width:760px!important;padding:48px 32px 90px!important; }
  :is(#successPage2,#equipReceiptPage) .receipt { padding:28px!important;border-radius:22px!important; }
  :is(#successPage2,#equipReceiptPage) .r-row { font-size:14px!important;padding:9px 0!important; }

  /* ---------- Equipment / reviews ---------- */
  #equipPage .bk-body,
  #reviewPage .bk-body { width:min(100%,1280px)!important;max-width:1280px!important;margin:0 auto!important;padding:34px 34px 120px!important; }
  #equipPage .bk-body { display:grid!important;grid-template-columns:minmax(0,1fr) 420px!important;gap:0 30px!important;align-items:start!important; }
  #equipPage .bk-body > div:first-child,
  #equipPage .eq-sec-title,
  #equipPage #eqTripList { grid-column:1/-1!important; }
  #equipPage #eqItemList { grid-column:1!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:15px!important; }
  #equipPage .eq-summary-card { grid-column:2!important;grid-row:4!important;position:sticky!important;top:100px!important;margin:0!important;padding:22px!important;border-radius:20px!important; }
  #equipPage .eq-item-card { margin:0!important;padding:15px!important;border-radius:18px!important; }
  #equipPage .eq-item-img { width:92px!important;height:92px!important; }
  #equipPage .sticky-bar { padding:15px 34px!important; }
  #equipPage .sticky-bar .btn-confirm { max-width:720px!important;margin:0 auto!important; }
  #reviewPage .bk-body { display:grid!important;grid-template-columns:340px minmax(0,1fr)!important;gap:24px 30px!important; }
  #reviewPage .bk-body > div:first-child,
  #reviewPage #reviewSummary,
  #reviewPage .btn-login { grid-column:1!important; }
  #reviewPage #writeReviewBox { grid-column:1!important; }
  #reviewPage #reviewList { grid-column:2!important;grid-row:1/6!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;align-content:start!important; }
  #reviewPage .review-card { margin:0!important;padding:18px!important;border-radius:19px!important; }
  #reviewPage .review-photo { max-height:340px!important; }

  /* ---------- Drawer / secondary overlays ---------- */
  #drawer { align-items:stretch!important; }
  #drawer .drawer-box { width:min(520px,42vw)!important;max-width:520px!important;padding:30px!important; }
  :is(#tripCalendarModal,#vanLocationModal,#monthTripsModal) .calendar-box,
  :is(#tripCalendarModal,#vanLocationModal,#monthTripsModal) .van-location-box,
  :is(#tripCalendarModal,#vanLocationModal,#monthTripsModal) .month-trips-box { width:min(900px,calc(100vw - 100px))!important;max-width:900px!important;max-height:calc(100vh - 80px)!important;border-radius:26px!important; }
  #adminPopup > div { width:min(560px,calc(100vw - 80px))!important;max-width:560px!important;border-radius:24px!important; }
  .admin-tab { right:20px!important;bottom:22px!important; }

  /* ---------- Login / loading ---------- */
  #loginPage:not(.hidden) { display:grid!important;grid-template-columns:minmax(420px,1fr) minmax(460px,620px)!important;align-items:center!important;gap:70px!important;padding:70px max(70px,calc((100vw - 1400px)/2))!important;background:linear-gradient(90deg,rgba(3,10,17,.38),rgba(3,10,17,.88)),url('../assets/optimized/hero-900.webp') center/cover!important; }
  #loginPage .login-logo { text-align:left!important;align-items:flex-start!important; }
  #loginPage .login-logo img { width:130px!important;height:130px!important; }
  #loginPage .login-logo h1 { font-size:43px!important; }
  #loginPage .login-logo p { font-size:18px!important; }
  #loginPage .login-card { width:100%!important;max-width:620px!important;padding:38px!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:28px!important;background:rgba(7,17,27,.78)!important;box-shadow:0 36px 90px rgba(0,0,0,.48)!important;backdrop-filter:blur(18px)!important; }
  #loadingScreen > * { transform:scale(1.05); }

  /* ---------- Admin Center: desktop application ---------- */
  #adminGate .admin-gate-card { width:min(520px,calc(100vw - 80px))!important;max-width:520px!important;padding:38px!important;border-radius:28px!important; }
  #adminCenter.show { display:grid!important;grid-template-columns:260px minmax(0,1fr)!important;grid-template-rows:84px minmax(0,1fr)!important; }
  #adminCenter .admin-topbar { grid-column:1/-1!important;grid-row:1!important;height:84px!important;padding:0 24px!important;display:flex!important;flex-direction:row!important;align-items:center!important;border-right:0!important;border-bottom:1px solid var(--d-line)!important;background:rgba(5,12,20,.94)!important; }
  #adminCenter .admin-brand img { width:52px!important;height:52px!important; }
  #adminCenter .admin-brand strong { font-size:17px!important; }
  #adminCenter .admin-active-users { flex:1!important;margin:0 20px!important; }
  #adminCenter .admin-top-actions { margin:0 0 0 auto!important; }
  #adminCenter .admin-icon-btn { width:43px!important;height:43px!important;flex:none!important; }
  #adminCenter .admin-nav { grid-column:1!important;grid-row:2!important;width:260px!important;height:calc(100vh - 84px)!important;padding:20px 14px!important;display:flex!important;flex-direction:column!important;gap:7px!important;overflow-y:auto!important;border-right:1px solid var(--d-line)!important;border-bottom:0!important;background:rgba(7,16,26,.96)!important; }
  #adminCenter .admin-nav-btn { width:100%!important;min-height:49px!important;padding:10px 14px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;border-radius:12px!important;font-size:13px!important;text-align:left!important; }
  #adminCenter .admin-nav-btn span { display:inline-grid!important;place-items:center!important;width:24px!important;margin:0!important;font-size:17px!important; }
  #adminCenter .admin-body { grid-column:2!important;grid-row:2!important;width:100%!important;max-width:none!important;height:calc(100vh - 84px)!important;margin:0!important;padding:30px 34px 70px!important;overflow-y:auto!important; }
  #adminCenter .admin-view { width:min(100%,1500px)!important;max-width:1500px!important;margin:0 auto!important; }
  #adminCenter .admin-view-head h2 { font-size:26px!important; }
  #adminCenter .admin-view-head p { font-size:12px!important; }
  #adminCenter .admin-stats { grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:15px!important; }
  #adminCenter .admin-stat { min-height:126px!important;padding:20px!important;border-radius:18px!important; }
  #adminCenter .admin-stat strong { font-size:34px!important; }
  #adminCenter .admin-panel { padding:20px!important;border-radius:20px!important; }
  #adminCenter .admin-filterbar { grid-template-columns:2fr 1fr 1fr!important;gap:11px!important; }
  #adminCenter .admin-filterbar .wide { grid-column:auto!important; }
  #adminCenter .admin-field { height:48px!important;font-size:13px!important; }
  #adminCenter .admin-list { grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:13px!important; }
  #adminCenter .admin-row-card { padding:17px!important;border-radius:16px!important; }
  #adminCenter .admin-trip-grid { grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:15px!important; }
  #adminCenter .admin-trip-card,#adminCenter .admin-trip-copy { min-height:200px!important; }
  #adminCenter .admin-passenger-info-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  #adminSlipViewer .admin-slip-box { width:min(900px,calc(100vw - 100px))!important;max-width:900px!important;max-height:calc(100vh - 80px)!important; }

  /* Desktop interaction polish */
  :is(#appShell,#bookingPage2,#equipPage,#reviewPage,#adminCenter) :is(button,a,[role="button"]):focus-visible { outline:3px solid rgba(125,211,252,.75)!important;outline-offset:3px!important; }
  @media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; }
  }
}

@media (min-width:1024px) and (max-width:1279px) {
  :root { --d-rail:236px; }
  #appShell .pc-layout { grid-template-columns:1fr!important; }
  #appShell .pc-support { grid-column:1!important;position:static!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important; }
  #appShell #tripListFull { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  #appShell #notifContent { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  #bookingPage2 .bk-body { grid-template-columns:minmax(0,1fr) 440px!important; }
  #bookingPage2 .van-blocks-row { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  #reviewPage .bk-body { grid-template-columns:300px minmax(0,1fr)!important; }
  #reviewPage #reviewList { grid-template-columns:1fr!important; }
  #adminCenter .admin-list { grid-template-columns:1fr!important; }
}

@media (min-width:1600px) {
  #appShell #tripListFull { grid-template-columns:repeat(4,minmax(0,1fr))!important; }
  #appShell #upcomingList { grid-template-columns:repeat(3,minmax(0,1fr))!important; }
  #appShell #bookingUpcomingList,#appShell #bookingHistoryList { grid-template-columns:repeat(3,minmax(0,1fr))!important; }
  #appShell .past-grid { grid-template-columns:repeat(5,minmax(0,1fr))!important; }
  #adminCenter .admin-list { grid-template-columns:repeat(3,minmax(0,1fr))!important; }
  #adminCenter .admin-trip-grid { grid-template-columns:repeat(4,minmax(0,1fr))!important; }
}

/* ======================================================================
   DESKTOP V3 — native desktop workspace
   This deliberately changes proportions and information density instead
   of scaling the mobile cards. It is still completely isolated from phone.
   ====================================================================== */
@media (min-width:1024px) {
  :root { --d-rail:244px; --d-top:68px; --d-content:1540px; }

  /* True desktop entrance: editorial image left, navigation console right. */
  #appShell.pc-entry-active { padding-left:0!important; }
  #pcEntry {
    min-height:100vh!important;padding:28px!important;display:grid!important;
    grid-template-columns:minmax(0,1.5fr) minmax(390px,.68fr)!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;gap:22px 26px!important;
    background:#050b12!important;overflow:hidden!important;
  }
  #pcEntry .pc-entry-art {
    position:relative!important;inset:auto!important;z-index:0!important;grid-column:1!important;grid-row:1/4!important;
    width:100%!important;height:calc(100vh - 56px)!important;min-height:620px!important;object-fit:cover!important;object-position:center!important;
    border:1px solid rgba(195,219,239,.16)!important;border-radius:26px!important;filter:none!important;opacity:.88!important;
    box-shadow:0 28px 80px rgba(0,0,0,.42)!important;
  }
  #pcEntry::before {
    content:"";position:absolute;left:28px;top:28px;bottom:28px;width:calc((100% - 82px)*.676);z-index:1;pointer-events:none;
    border-radius:26px;background:linear-gradient(90deg,rgba(3,8,14,.08),transparent 54%),linear-gradient(0deg,rgba(3,8,14,.72),transparent 48%);
  }
  #pcEntry .pc-entry-top { grid-column:2!important;grid-row:1!important;position:relative!important;z-index:2!important;padding:10px 4px 20px!important;border-bottom:1px solid var(--d-line)!important; }
  #pcEntry .pc-entry-brand { font-size:22px!important; }
  #pcEntry .pc-entry-brand img { width:46px!important;height:46px!important; }
  #pcEntry .pc-entry-tag { max-width:170px!important;font-size:12px!important;line-height:1.5!important;text-align:right!important;color:#7890a5!important; }
  #pcEntry .pc-entry-space { display:none!important; }
  #pcEntry .pc-entry-menu {
    grid-column:2!important;grid-row:2!important;align-self:center!important;width:100%!important;max-width:none!important;margin:0!important;
    display:flex!important;flex-direction:column!important;gap:10px!important;
  }
  #pcEntry .pc-entry-menu::before { content:"เลือกพื้นที่ใช้งาน";display:block;margin:0 0 7px;color:#607b91;font-size:11px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase; }
  #pcEntry .pc-entry-button {
    min-height:78px!important;padding:14px 48px 14px 16px!important;display:grid!important;grid-template-columns:44px 1fr!important;grid-template-rows:auto auto!important;
    column-gap:14px!important;align-items:center!important;text-align:left!important;border:1px solid var(--d-line)!important;border-radius:15px!important;
    background:rgba(13,27,42,.72)!important;box-shadow:none!important;
  }
  #pcEntry .pc-entry-button:hover { transform:translateX(-4px)!important;border-color:rgba(125,211,252,.38)!important;background:rgba(17,38,58,.9)!important; }
  #pcEntry .pc-entry-button.primary { background:linear-gradient(110deg,rgba(4,105,150,.8),rgba(11,43,68,.86))!important;border-color:rgba(84,202,245,.48)!important; }
  #pcEntry .pc-entry-button svg { grid-column:1!important;grid-row:1/3!important;width:24px!important;height:24px!important;margin:0!important;padding:9px!important;box-sizing:content-box!important;border-radius:12px!important;background:rgba(125,211,252,.1)!important; }
  #pcEntry .pc-entry-button strong { grid-column:2!important;margin:0!important;font-size:17px!important;line-height:1.25!important; }
  #pcEntry .pc-entry-button small { grid-column:2!important;display:block!important;margin-top:3px!important;font-size:11px!important;color:#8299ad!important; }
  #pcEntry .pc-entry-button::after { top:50%!important;right:18px!important;transform:translateY(-50%)!important;font-size:18px!important; }
  #pcEntry .pc-entry-footer { grid-column:2!important;grid-row:3!important;display:block!important;padding:18px 4px 4px!important;border-top:1px solid var(--d-line)!important;font-size:10px!important;line-height:1.7!important;color:#587187!important; }
  #pcEntry .pc-entry-footer span { display:block!important; }

  /* Application chrome is intentionally compact; desktop space belongs to data. */
  #appShell .bnav { padding:18px 15px!important; }
  #appShell .pc-brand { grid-template-columns:44px 1fr!important;padding:0 4px 17px!important; }
  #appShell .pc-brand img { width:44px!important;height:44px!important; }
  #appShell .pc-brand strong { font-size:17px!important; }
  #appShell .bnav-item { min-height:47px!important;padding:9px 12px!important;border-radius:11px!important; }
  #appShell .bnav-item .lbl { font-size:13px!important; }
  #appShell .pc-top { padding:0 34px!important; }
  #appShell .pc-top strong { font-size:15px!important; }

  /* Compact desktop header, not a stretched mobile cover. */
  #appShell > .hdr { padding:calc(var(--d-top) + 20px) 34px 0!important; }
  #appShell .home-banner {
    width:min(100%,var(--d-content))!important;height:286px!important;display:grid!important;grid-template-columns:minmax(0,1fr) 430px!important;
    border-radius:20px!important;
  }
  #appShell .home-banner > img { position:absolute!important;inset:0!important; }
  #appShell .home-banner::after { background:linear-gradient(90deg,rgba(3,9,16,.88),rgba(3,9,16,.48) 45%,rgba(3,9,16,.78))!important; }
  #appShell .hdr-greet { left:30px!important;bottom:30px!important;right:auto!important;top:auto!important;width:min(560px,46%)!important;max-width:560px!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important; }
  #appShell .hdr-greet :is(h1,h2,.greet-title) { font-size:clamp(25px,2.1vw,34px)!important;line-height:1.25!important; }
  #appShell .home-booking-steps { right:26px!important;bottom:26px!important;width:390px!important;max-width:39%!important; }

  /* Every inner page gets a real desktop title bar outside mobile content. */
  #appShell .pc-page-heading {
    width:min(calc(100% - 68px),var(--d-content))!important;margin:0 auto!important;padding:calc(var(--d-top) + 32px) 0 22px!important;
    display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:30px!important;border-bottom:1px solid var(--d-line)!important;
  }
  #appShell .pc-page-heading small { display:block;margin-bottom:6px;color:#5dbde4;font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase; }
  #appShell .pc-page-heading h1 { margin:0;color:#f7fafc;font-size:30px;line-height:1.2;letter-spacing:-.5px; }
  #appShell .pc-page-heading p { margin:8px 0 0;color:#7f96aa;font-size:12px;line-height:1.55; }
  #appShell .pc-page-status { flex:none;padding:8px 12px;border:1px solid var(--d-line);border-radius:999px;background:rgba(255,255,255,.025);color:#8ea4b7;font-size:10px; }
  #appShell .pc-page-status i { display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#34d399;box-shadow:0 0 12px rgba(52,211,153,.75); }
  #appShell .view-page > .main,
  #appShell #tab-home > .main { width:min(calc(100% - 68px),var(--d-content))!important;max-width:var(--d-content)!important;padding:26px 0 72px!important; }
  #appShell #tab-home > .main { padding-top:22px!important; }
  #appShell .pc-layout { grid-template-columns:minmax(0,1fr) 286px!important;gap:22px!important; }

  /* Dashboard quick actions: restrained toolbar rather than giant phone buttons. */
  #appShell .home-quick-actions { grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important; }
  #appShell .qa-mini { min-height:74px!important;padding:13px 16px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;border-radius:14px!important;background:rgba(12,26,40,.9)!important; }
  #appShell .qa-mini-ico { width:38px!important;height:38px!important;font-size:20px!important; }
  #appShell .qa-mini-label { font-size:13px!important;text-align:left!important; }
  #appShell .sec-hdr { margin:24px 0 13px!important; }
  #appShell .sec-hdr h2,#appShell .sec-hdr > div:first-child { font-size:18px!important; }

  /* Home cards are horizontal editorial cards. */
  #appShell #upcomingList,
  #appShell #bookingUpcomingList { display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;overflow:visible!important;scroll-snap-type:none!important; }
  #appShell #upcomingList .trip-hcard2,
  #appShell #bookingUpcomingList .trip-hcard2 {
    min-width:0!important;height:218px!important;display:block!important;border-radius:16px!important;overflow:hidden!important;
  }
  #appShell #upcomingList .trip-hcard2 .thc-photo,
  #appShell #bookingUpcomingList .trip-hcard2 .thc-photo { height:100%!important;aspect-ratio:auto!important; }
  #appShell #upcomingList .trip-hcard2 .thc-overlay,
  #appShell #bookingUpcomingList .trip-hcard2 .thc-overlay { position:absolute!important;inset:0!important;justify-content:flex-end!important;padding:18px!important;background:linear-gradient(0deg,rgba(3,9,16,.94),rgba(3,9,16,.08) 72%)!important; }
  #appShell #upcomingList .trip-hcard2 .thc-title,
  #appShell #bookingUpcomingList .trip-hcard2 .thc-title { font-size:17px!important;margin:0 0 5px!important; }
  #appShell #upcomingList .trip-hcard2 .thc-meta-row,
  #appShell #bookingUpcomingList .trip-hcard2 .thc-meta-row { margin:0 0 8px!important;font-size:10px!important; }
  #appShell #upcomingList .trip-hcard2 .thc-bottom-row,
  #appShell #bookingUpcomingList .trip-hcard2 .thc-bottom-row { padding-top:8px!important; }
  #appShell #upcomingList .trip-hcard2 .thc-price strong,
  #appShell #bookingUpcomingList .trip-hcard2 .thc-price strong { font-size:20px!important; }

  /* All trips becomes a booking catalogue list, not a phone-card wall. */
  #appShell #tab-trips > .main { display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:18px!important; }
  #appShell #tab-trips .search-wrap { width:min(520px,100%)!important;height:46px!important;margin:0!important;border-radius:12px!important; }
  #appShell #tripListFull { display:flex!important;flex-direction:column!important;gap:12px!important; }
  #appShell #tripListFull .trip-hcard2 {
    width:100%!important;height:176px!important;min-height:176px!important;display:grid!important;grid-template-columns:276px minmax(0,1fr)!important;
    border-radius:16px!important;overflow:hidden!important;background:linear-gradient(120deg,rgba(14,29,44,.96),rgba(8,18,29,.94))!important;
  }
  #appShell #tripListFull .trip-hcard2:hover { transform:translateX(4px)!important; }
  #appShell #tripListFull .thc-photo { grid-column:1!important;height:100%!important;aspect-ratio:auto!important; }
  #appShell #tripListFull .thc-photo > img { height:100%!important; }
  #appShell #tripListFull .thc-overlay { grid-column:2!important;position:relative!important;padding:20px 24px!important;justify-content:center!important;background:transparent!important; }
  #appShell #tripListFull .pc-card-caption { position:absolute!important;right:22px!important;top:18px!important;width:auto!important;display:flex!important;gap:15px!important; }
  #appShell #tripListFull .thc-title { max-width:65%!important;font-size:20px!important;margin:0 0 8px!important; }
  #appShell #tripListFull .thc-meta-row { font-size:11px!important;margin-bottom:13px!important; }
  #appShell #tripListFull .thc-bottom-row { margin-top:0!important;padding-top:12px!important; }
  #appShell #tripListFull .thc-price strong { font-size:22px!important; }

  /* Profile becomes a dashboard with a wide account header and dense records. */
  #appShell #myContent { display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:18px!important; }
  #appShell #myContent .my-profile { min-height:190px!important;padding:24px 28px!important;display:grid!important;grid-template-columns:120px minmax(240px,1fr) minmax(420px,1.3fr)!important;align-items:center!important;gap:24px!important;border-radius:18px!important; }
  #appShell #myContent .my-ava-col { width:120px!important; }
  #appShell #myContent .my-ava { width:92px!important;height:92px!important; }
  #appShell #myContent .my-info { text-align:left!important; }
  #appShell #myContent .my-stats { margin:0!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important; }
  #appShell #myContent .my-stat { min-height:88px!important;padding:14px!important;border:1px solid var(--d-line)!important;border-radius:13px!important;background:rgba(255,255,255,.025)!important; }
  #appShell #myContent .my-payment-filter { width:max-content!important;max-width:100%!important;margin:0!important;padding:5px!important;border-radius:12px!important; }
  #appShell #myContent .hist-card { min-height:230px!important;border-radius:17px!important; }
  #appShell #myContent .hist-group-title { margin:20px 0 10px!important;font-size:18px!important; }
  #appShell #myContent :is(#bookingHistoryList,.my-past-fade-list) { display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important; }
  #appShell #myContent .my-past-fade-list > * { position:relative!important;opacity:1!important;transform:none!important; }

  /* Learning center uses a desktop course catalogue. */
  #appShell #notifContent { display:grid!important;grid-template-columns:320px minmax(0,1fr)!important;gap:18px 24px!important;align-items:start!important; }
  #appShell #notifContent .learning-page-intro,
  #appShell #notifContent .learning-summary-card { grid-column:1!important;position:sticky!important;top:calc(var(--d-top) + 22px)!important;margin:0!important; }
  #appShell #notifContent .learning-summary-card { top:calc(var(--d-top) + 170px)!important; }
  #appShell #notifContent .prep-item-card { grid-column:2!important;min-height:112px!important;margin:0!important;padding:18px 20px!important;display:grid!important;grid-template-columns:56px 1fr 38px!important;border-radius:16px!important; }
  #appShell #notifContent .prep-item-title { font-size:16px!important; }
  #appShell #notifContent .prep-item-icon { width:48px!important;height:48px!important; }
  #appShell #notifContent .learning-topic-heading { grid-column:2!important;margin:18px 0 0!important; }

  /* Detail/payment dialogs are work panels, never oversized phone sheets. */
  #modalBg .modal-sheet { width:min(1040px,calc(100vw - 90px))!important;max-height:min(720px,calc(100vh - 70px))!important;grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr)!important;border-radius:20px!important; }
  #modalBg .modal-img { min-height:0!important;height:100%!important; }
  .pay-modal .pay-box { border-radius:20px!important; }
  #bookingPage2 .bk-body { grid-template-columns:minmax(0,1fr) 520px!important; }
  #bookingPage2 .bk-body > .seat-map-img { max-height:330px!important; }

  /* Admin stays a dense back-office, not a stack of mobile cards. */
  #adminCenter.show { grid-template-columns:226px minmax(0,1fr)!important;grid-template-rows:70px minmax(0,1fr)!important; }
  #adminCenter .admin-topbar { height:70px!important; }
  #adminCenter .admin-nav { width:226px!important;height:calc(100vh - 70px)!important; }
  #adminCenter .admin-body { height:calc(100vh - 70px)!important;padding:25px 30px 60px!important; }
  #adminCenter .admin-stat { min-height:104px!important; }
  #adminCenter .admin-stat strong { font-size:28px!important; }
}

@media (min-width:1280px) and (max-width:1439px) {
  #appShell #upcomingList,#appShell #bookingUpcomingList { grid-template-columns:1fr!important; }
  #appShell #notifContent { grid-template-columns:280px minmax(0,1fr)!important; }
  #appShell #myContent .my-profile { grid-template-columns:100px minmax(220px,.8fr) minmax(360px,1.2fr)!important; }
}

@media (min-width:1024px) and (max-width:1279px) {
  :root { --d-rail:220px; }
  #pcEntry { grid-template-columns:minmax(0,1.25fr) 370px!important;padding:20px!important; }
  #pcEntry .pc-entry-art { height:calc(100vh - 40px)!important; }
  #pcEntry::before { left:20px;top:20px;bottom:20px;width:calc((100% - 66px)*.64); }
  #appShell .home-banner { grid-template-columns:1fr 340px!important;height:260px!important; }
  #appShell .home-booking-steps { width:330px!important; }
  #appShell .pc-layout { grid-template-columns:1fr!important; }
  #appShell .pc-support { position:static!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important; }
  #appShell #upcomingList,#appShell #bookingUpcomingList { grid-template-columns:1fr!important; }
  #appShell #myContent .my-profile { grid-template-columns:100px minmax(0,1fr)!important; }
  #appShell #myContent .my-stats { grid-column:1/-1!important; }
  #appShell #notifContent { grid-template-columns:1fr!important; }
  #appShell #notifContent :is(.learning-page-intro,.learning-summary-card,.prep-item-card,.learning-topic-heading) { grid-column:1!important;position:static!important; }
}