/* BKH ocean palette. Existing component selectors and semantic states retained. */
:root { --luyo-teal: #087e9a; --luyo-teal-2: #087e9a; --luyo-orange: #12b9c5; --luyo-ink: #16324f; }

.profile-hero { background: linear-gradient(145deg, #075777 0%, #087e9a 42%, #12b9c5 145%) !important; }
.settings-button { background: #fff !important; color: var(--luyo-teal) !important; border-radius: 16px !important; box-shadow: 0 6px 14px rgba(8, 40, 48, .16) !important; }

.quick-icon,
.service-item .round-icon,
.order-item .round-icon,
.trust-chip svg,
.ticket-icon {
  background: #fff !important;
  color: var(--luyo-teal) !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 14px rgba(12, 143, 152, .14) !important;
}
.order-item .round-icon::before,
.quick-icon::before { display: none !important; }
.quick-icon svg,
.service-item .svc-glyph,
.order-item .order-glyph { fill: none !important; stroke: currentColor !important; }
.quick-icon .main,
.round-icon .main,
.trust-chip .main,
.ticket-icon .main { fill: var(--luyo-teal) !important; stroke: none !important; }
.quick-icon .accent,
.round-icon .accent,
.trust-chip .accent,
.ticket-icon .accent { fill: var(--luyo-orange) !important; stroke: var(--luyo-orange) !important; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.trust-chip svg { width: 32px !important; height: 32px !important; padding: 4px; box-sizing: border-box; }
.service-item .round-icon,
.order-item .round-icon,
.quick-icon { border-radius: 16px !important; }

button.wheel-banner { border-color: #d7ebea !important; background: #fff !important; }
button.wheel-banner .wheel-gift {
  color: #fff !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(160deg, #12b9c5 0%, #087e9a 62%, #12b9c5 140%) !important;
  box-shadow: 0 8px 16px rgba(12, 143, 152, .28) !important;
}
.deal-band { background: linear-gradient(120deg, #087e9a 0%, #087e9a 55%, #12b9c5 130%) !important; }
.deal-band em { color: var(--luyo-orange) !important; }
.travel-more, .section-head button { color: var(--luyo-teal) !important; }

.home-search button[type="submit"],
button.primary,
a.primary,
a.button-link,
button.search-button,
button.search-submit,
button.confirm,
button.save,
button.add,
#apply,
#done-ok,
#submit-application,
#book-button,
.identity-submit,
.actions .ok,
.order-actions .pay,
.wallet-action,
.buy button,
.tier button,
.card-simple > button,
.layui-btn:not(.layui-btn-primary):not(.layui-btn-danger):not(.layui-btn-disabled) {
  color: #fff !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(100deg, #087e9a 0%, #087e9a 58%, #075777 100%) !important;
  box-shadow: 0 8px 18px rgba(12, 143, 152, .22) !important;
  font-weight: 800 !important;
}
.layui-btn-danger,
.order-actions .refund,
#service-logout strong { color: #c2410c !important; }

button.secondary,
button.reset-button,
button.text-button,
button.ghost,
button.cancel,
.order-actions button:not(.pay),
.plain-button {
  color: var(--luyo-teal) !important;
  border: 1px solid #b7e0e3 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}
.order-actions .pay { color: #fff !important; border: 0 !important; }

.tab.on,
.tab.is-on,
.filter-button.is-active,
.kinds button.is-on,
button.is-on {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(100deg, #087e9a 0%, #087e9a 70%, #12b9c5 150%) !important;
}
.order-tab { color: #5d7288 !important; background: transparent !important; }
.order-tab.is-active { color: var(--luyo-teal) !important; background: transparent !important; }
.order-tab.is-active::after { background: linear-gradient(90deg, #087e9a, #12b9c5) !important; }

.keys button { color: #0c6f76 !important; border-radius: 12px !important; background: #e7f6f6 !important; }
.keys button.ghost { color: var(--luyo-orange) !important; background: #fff4ec !important; }
.dots i.on, .dot.on { background: var(--luyo-teal) !important; }

#service-logout .round-icon { background: #fff !important; }

/* Keep transaction, destructive and disabled states distinct after branding. */
button.confirm,
.order-actions .pay {
  background: var(--luyo-orange) !important;
  box-shadow: 0 8px 18px rgba(224, 122, 47, .22) !important;
}
.layui-btn-danger { color: #fff !important; }
button:disabled,
.layui-btn-disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Active customer pages share the logo palette; warning/success states stay local. */
:root {
  --travel-blue: #087e9a;
  --travel-blue-dark: #075777;
  --travel-blue-light: #087e9a;
  --travel-teal: #087e9a;
  --luyo-soft: #edf8fa;
  --luyo-hero: linear-gradient(145deg, #075777, #087e9a);
}
.home-page { --travel-blue: #087e9a; --travel-blue-dark: #075777; }
.home-page .home-hero { background-color: var(--travel-blue-dark); }
.profile-hero,
.orders-hero,
.wallet-hero,
.notice-page .page-head,
main.page:has(#code) > .banner,
main.page:has(#goods) > .hero { background: var(--luyo-hero) !important; }
.orders-hero .travel-page-header { background: transparent !important; }
.profile-content .benefit-center-head strong,
.profile-content .benefit-more,
.profile-content .benefit-rate-chip { color: var(--travel-blue) !important; }
.profile-content .benefit-rate-chip { background: var(--luyo-soft) !important; }
.profile-content .benefit-center progress { accent-color: var(--travel-blue); }
.profile-content .benefit-center progress::-webkit-progress-value { background: var(--travel-blue); }
.profile-content .benefit-center progress::-moz-progress-bar { background: var(--travel-blue); }
.profile-app #wallet-balance { font-size: clamp(16px, 4.5vw, 20px); white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.profile-content .service-credit-score .credit-num { color: var(--travel-blue) !important; }
.profile-app .order-item strong,
.profile-app .service-item strong,
.profile-app .user-meta,
.wallet-page .asset-summary-card span,
.wallet-page .transaction-copy span,
.wallet-page .transaction-amount span,
.orders-page .stat > span,
.orders-page .order-no,
.orders-page .price small,
.orders-page .steps span,
.home-page .hero-kicker,
.home-page .hotel-card > span,
.home-page .guide-copy > span,
.home-page .ticket-copy > span,
.notice-page .page-copy { font-size: 12px !important; }
.home-page .hero-dot { width: 44px; height: 44px; }
.home-page .hero-dot::before { top: 19px; left: 19px; }
.home-page .hero-dot.is-active::before { left: 15px; }
.home-page .home-search button { min-height: 44px; }
.orders-page .order-actions { gap: 8px; }
.orders-page .order-actions button,
.orders-page .order-tab { min-height: 44px; }
.orders-page .tab-count { background: var(--travel-blue); }
.orders-page .order-actions .refund { color: #b45309 !important; }
#service-logout .round-icon { color: #b4233c !important; }
#service-logout strong { color: #b4233c !important; }
button.confirm, .order-actions .pay { color: #3a2417 !important; }

/* Notification header and footer must span the same mobile content width. */
.notice-page { --notice-gutter: 16px; }
.notice-page .page-head {
  width: calc(100% + var(--notice-gutter) * 2);
  max-width: none;
  margin-left: calc(-1 * var(--notice-gutter));
  margin-right: calc(-1 * var(--notice-gutter));
}
.notice-page .bottom-action { max-width: none; }
.notice-page .notice-card.is-unread { border-left-color: var(--travel-blue); }
.notice-page .dot { background: var(--travel-blue); box-shadow: 0 0 0 4px rgba(13,136,152,.1); }
.notice-page .empty button { color: var(--travel-blue); border-color: #b7e0e3; }
.notice-page .bottom-action button { background: var(--travel-blue); box-shadow: none; }
@media (max-width: 520px) { .notice-page { --notice-gutter: 12px; } }

/* These standalone pages lack travel-app.css's border-box reset. */
main.page:has(#pp-no), main.page:has(#pp-no) *,
main.page:has(#goods), main.page:has(#goods) *,
main.page:has(#valid), main.page:has(#valid) * { box-sizing: border-box; }
main.page:has(#pp-no) > header button,
main.page:has(#goods) > header button,
main.page:has(#valid) > header button { min-width: 44px; min-height: 44px; }
main.page:has(#pp-no) > header button,
main.page:has(#goods) > header .detail { color: var(--travel-blue); }
main.page:has(#pp-no) .mark { flex-shrink: 0; background: var(--travel-blue); }
main.page:has(#pp-no) .file:not(.done) { color: var(--travel-blue); background: var(--luyo-soft); }
main.page:has(#pp-no) .note { color: var(--travel-blue); }
main.page:has(#pp-no) input,
main.page:has(#pp-no) select { min-height: 44px; }
main.page:has(#valid) .filters button { min-height: 44px; }
main.page:has(#valid) .filters button.on { background: var(--travel-blue); }
main.page:has(#valid) .stat:first-child b { background: var(--travel-blue) !important; }
main.page:has(#valid) .item small { font-size: 12px; }

/* Sharing controls keep third-party brand marks and existing destinations. */
main.page:has(#code) .copy,
body:has(#code) .sheet button { background: var(--travel-blue); }
main.page:has(#code) .stat:first-child svg { stroke: var(--travel-blue); }
main.page:has(#code) details summary { display: flex; min-height: 44px; align-items: center; }

/* Points cards are display-only; redemption events and eligibility are untouched. */
main.page:has(#goods) h3::before { background: var(--travel-blue); }
main.page:has(#goods) .buy b { color: var(--travel-blue); }
main.page:has(#goods) .buy button { min-height: 44px; }
main.page:has(#goods) .goods .item > div:not(.buy) { min-width: 0; flex: 1; }
main.page:has(#goods) .buy { flex-shrink: 0; }
main.page:has(#goods) .earn .order {
  padding: 14px; color: #fff; border-radius: 16px;
  background: var(--luyo-hero); box-shadow: 0 8px 16px rgba(15,40,80,.12);
}
main.page:has(#goods) .earn .wheel { background: #075777; }
main.page:has(#goods) .earn .invite { background: #087e9a; }
main.page:has(#goods) .earn .tag { font-size: 12px; }
body:has(#goods) .dialog { box-sizing: border-box; }
body:has(#goods) .dialog .actions button { min-height: 44px; }
body:has(#goods) .dialog-ico { color: var(--travel-blue); background: var(--luyo-soft); }
body:has(#goods) .dialog .cost { color: var(--travel-blue); }

/* BKH shared identity: no runtime theme observers or additional script layer. */
:root {
  --bkh-ocean:#087e9a; --bkh-deep:#075777; --bkh-aqua:#12b9c5;
  --bkh-ink:#163947; --bkh-muted:#5e7580; --bkh-line:#d7e7ec; --bkh-paper:#f1f8fa;
  --travel-blue:var(--bkh-ocean); --travel-blue-dark:var(--bkh-deep); --travel-blue-light:#0a90a7;
  --travel-teal:var(--bkh-ocean); --travel-ink:var(--bkh-ink); --travel-muted:var(--bkh-muted); --travel-line:var(--bkh-line); --travel-page:var(--bkh-paper);
  --brand:var(--bkh-ocean); --brand-dark:var(--bkh-deep); --accent:var(--bkh-aqua);
  --hotel-blue:var(--bkh-ocean); --hotel-ink:var(--bkh-ink); --hotel-muted:var(--bkh-muted); --hotel-line:var(--bkh-line); --hotel-pale:var(--bkh-paper);
  --vip-green:var(--bkh-deep); --vip-focus:var(--bkh-ocean); --vip-mint:#8de5e7; --vip-ink:var(--bkh-ink); --vip-paper:var(--bkh-paper);
  --luyo-teal:var(--bkh-ocean); --luyo-teal-2:var(--bkh-deep); --luyo-orange:var(--bkh-aqua); --luyo-ink:var(--bkh-ink); --luyo-hero:linear-gradient(130deg,#075777,#087e9a); --luyo-soft:#edf8fa;
}
.bkh-logo-window { position:relative;display:inline-block;flex:none;width:144px;height:48px;overflow:visible;vertical-align:middle;border-radius:0;background:transparent; }
.bkh-logo-window > img { position:static!important;display:block!important;width:100%!important;height:100%!important;max-width:100%!important;transform:none;margin:0!important;padding:0!important;object-fit:contain!important; }
#header .nav-top .bkh-shell-logo { display:block;margin:0 auto; }
.app-shell #header .nav-top { border:0!important;border-bottom:2px solid var(--bkh-aqua)!important;background:#f8fcfd!important; }
.app-shell #header .nav-top::after { background:linear-gradient(90deg,var(--bkh-aqua),var(--bkh-ocean),var(--bkh-deep))!important; }
.app-shell.is-member-page #header .nav-top .bkh-shell-logo { width:96px;height:28px; }
.app-shell.is-member-page #header .nav-top .bkh-shell-logo > img { width:100%!important;height:100%!important; }
.app-shell #header .navs .tab-icon svg.tab-mark .accent { fill:var(--bkh-aqua); }
.app-shell #header .navs li.current .tab-icon { background:linear-gradient(145deg,#087e9a,#075777)!important;box-shadow:0 5px 12px #07577720; }
.app-shell #header .navs li.current .tab-icon svg.tab-mark .accent { fill:#fff; }
.home-page { --travel-blue:var(--bkh-ocean);--travel-blue-dark:var(--bkh-deep); }
.home-page .hero-action { background:var(--bkh-ocean);color:#fff; }
.profile-hero,.orders-hero,.wallet-hero { background:var(--luyo-hero)!important; }
button.confirm,.order-actions .pay { color:#fff!important;background:var(--bkh-deep)!important;box-shadow:0 5px 14px #07577725!important; }
.brandbar { background:#f8fcfd;border-bottom-color:var(--bkh-line); }
.brandbar .brand-home { display:inline-flex;align-items:center;min-height:52px; }
.auth-panel { background:#f8fbfc; }
.primary-button { background:linear-gradient(105deg,#087e9a,#075777);box-shadow:0 6px 16px #07577720; }
.switch-mode a,.switch-mode a:hover,.switch-mode a:active { color:var(--bkh-deep); }
.attractions-page .wordmark { display:inline-flex;align-items:center;line-height:1; }
.attractions-page .toolbar { gap:12px; }
.attractions-page .toolbar .bkh-logo-window { width:120px;height:40px; }
.attractions-page .toolbar .bkh-logo-window > img { width:100%!important;height:100%!important; }
.attractions-page { --ink:var(--bkh-ink);--muted:var(--bkh-muted);--line:var(--bkh-line);--surface:var(--bkh-paper); }
.attractions-page .notice { border-left-color:#de7728; }
.hotel-app .chip[aria-pressed="true"] { border-color:var(--bkh-ocean); }
.hotel-app .search-card,.hotel-app .hotel-card { border-color:var(--bkh-line); }
.vip-summary { border-color:var(--bkh-deep); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline-color:var(--bkh-ocean); }
@media(max-width:350px) { .auth-panel [data-auth-method] { font-size:13px;padding-inline:6px; } .attractions-page .toolbar { gap:8px; }.attractions-page .language { min-width:60px;padding-inline:8px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }