:root {
  color: #edf8f5;
  background: #05110f;
}

body { background: #05110f; }
button { font-family: inherit; }
.app-page {
  background:
    radial-gradient(circle at 14% 15%, rgba(13, 178, 153, .16), transparent 24rem),
    radial-gradient(circle at 90% 88%, rgba(43, 116, 234, .14), transparent 22rem),
    #05110f;
}
.phone-shell {
  background: #071513;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(129, 233, 211, .1);
}
.top-bar {
  height: 62px;
  justify-content: space-between;
  padding: 0 15px 0 18px;
  background: linear-gradient(112deg, #0e605b 0%, #116a7a 45%, #1f67a4 100%);
  border-bottom: 1px solid rgba(166, 250, 238, .18);
}
.brand-lockup { display: grid; gap: 1px; }
.top-bar b { color: #f9fffd; font-size: 20px; letter-spacing: .09em; }
.brand-lockup span { color: rgba(224, 255, 250, .7); font-size: 10px; letter-spacing: .13em; }
.top-bar button {
  position: static;
  width: 36px;
  height: 36px;
  color: #effffc;
  background: rgba(4, 28, 31, .28);
  border: 1px solid rgba(217, 255, 249, .22);
  border-radius: 12px;
}
.plain-header {
  height: 62px;
  color: #f0fbf8;
  background: #0a1b18;
  border-bottom-color: rgba(183, 247, 235, .12);
}
.plain-header b { font-size: 18px; letter-spacing: .08em; }
.app-content { background: #071513; }
.scroll-view { background: #071513; }
.home-view {
  height: calc(100dvh - 132px);
  max-height: 768px;
  padding: 13px 13px 34px;
  background:
    linear-gradient(180deg, rgba(16, 47, 43, .65), transparent 23rem),
    #071513;
}

/* 首页：横幅、公告、快捷入口 */
.hero-carousel {
  min-height: 206px;
  border: 1px solid rgba(121, 249, 226, .24);
  border-radius: 18px;
  background: #07120f;
  box-shadow: 0 14px 29px rgba(0, 0, 0, .36);
}
.hero-track { height: 206px; }
.hero-slide { min-height: 206px; }
.photo-slide { background-position: center; background-size: cover; }
.photo-slide::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  background: linear-gradient(transparent, rgba(2, 12, 10, .94));
  pointer-events: none;
}
.hero-photo-caption {
  position: absolute;
  z-index: 2;
  bottom: 19px;
  left: 17px;
  display: grid;
  gap: 3px;
}
.hero-photo-caption span { color: #8ff2db; font-size: 10px; letter-spacing: .14em; }
.hero-photo-caption b { color: #fff8e9; font-size: 16px; letter-spacing: .03em; }
.service-slide {
  min-height: 206px;
  padding: 23px 17px;
  color: #effffb;
}
.service-slide.cyan {
  background:
    radial-gradient(circle at 85% 20%, rgba(90, 255, 219, .32), transparent 11rem),
    linear-gradient(120deg, #063a38, #0d5870 62%, #315f92);
}
.service-slide.violet {
  background:
    radial-gradient(circle at 82% 20%, rgba(255, 207, 92, .24), transparent 10rem),
    linear-gradient(120deg, #20233e, #195462 60%, #0a7068);
}
.service-slide::before, .service-slide::after { border-color: rgba(159, 255, 236, .2); }
.service-banner-copy { width: 59%; }
.service-banner-copy > span { color: #9df5de; font-size: 9px; letter-spacing: .11em; }
.service-banner-copy h1 { margin-top: 5px; color: #fffaf0; font-size: 24px; }
.service-banner-copy p { color: rgba(239, 255, 251, .8); }
.service-banner-copy button {
  color: #062c2a;
  background: linear-gradient(100deg, #70f0d8, #b2e6ff);
  box-shadow: 0 7px 16px rgba(0, 0, 0, .25);
}
.service-banner-art { filter: drop-shadow(0 16px 15px rgba(0, 0, 0, .35)); }
.carousel-dots { bottom: 10px; }
.carousel-dots button { background: rgba(202, 255, 247, .55); }
.carousel-dots button.selected { background: #ecfffb; }
.notice-strip {
  width: 100%;
  display: grid;
  grid-template-columns: 28px auto minmax(0, 1fr) 16px;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  padding: 10px 10px;
  color: #dffaf3;
  text-align: left;
  background: linear-gradient(100deg, rgba(13, 93, 80, .9), rgba(18, 66, 92, .82));
  border: 1px solid rgba(110, 235, 211, .22);
  border-radius: 12px;
}
.notice-strip > span { display: grid; place-items: center; color: #fcce72; }
.notice-strip b { color: #fcf1cf; font-size: 11px; white-space: nowrap; }
.notice-strip em { overflow: hidden; color: rgba(229, 255, 248, .76); font-size: 11px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.notice-strip > svg { color: #8ce9da; }
.quick-row { padding: 18px 0 12px; }
.quick-link { gap: 5px; color: #e8f7f3; }
.quick-link small { color: rgba(208, 243, 235, .52); font-size: 9px; }
.quick-icon {
  width: 52px;
  height: 52px;
  color: #d9fffa;
  background: linear-gradient(145deg, #0d3d39, #0d2627);
  border: 1px solid rgba(129, 246, 225, .38);
  box-shadow: inset 0 1px 0 rgba(198, 255, 245, .18), 0 8px 17px rgba(0, 0, 0, .28);
}
.quick-icon.cyan { color: #79f9e2; border-color: rgba(98, 240, 215, .55); }
.quick-icon.gold { color: #ffcf72; border-color: rgba(255, 195, 91, .45); }
.quick-icon.blue { color: #86cfff; border-color: rgba(102, 192, 255, .5); }
.quick-icon.mint { color: #a0f5ce; border-color: rgba(114, 241, 185, .5); }
.quick-link em { font-size: 12px; font-weight: 700; font-style: normal; }
.home-service-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin: 9px 2px 0;
}
.home-service-head div { display: grid; gap: 2px; }
.home-service-head span { color: #58d9c4; font-size: 9px; letter-spacing: .12em; }
.home-service-head h1 { margin: 0; color: #f3fffc; font-size: 19px; letter-spacing: .03em; }
.home-service-head button, .section-title button {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 0;
  color: #8aeed8;
  background: none;
  font-size: 11px;
}
.category-tabs { gap: 8px; padding: 13px 0 14px; }
.category-tabs button {
  color: #9bb9b2;
  background: #0b2420;
  border: 1px solid rgba(151, 238, 218, .13);
  padding: 8px 13px;
}
.category-tabs button.selected {
  color: #06231f;
  background: linear-gradient(100deg, #59ead2, #79d2ff);
  box-shadow: 0 7px 15px rgba(33, 198, 166, .18);
}
.section-title { margin: 0 2px 10px; }
.section-title b { color: #eefef9; font-size: 15px; }
.section-title span { color: rgba(186, 229, 220, .5); font-size: 10px; }

/* 服务卡片 */
.product-grid { grid-template-columns: 1fr; gap: 11px; }
.product-card {
  display: grid;
  grid-template-columns: 42% 1fr;
  min-height: 142px;
  color: #ecfbf7;
  background: #0c211e;
  border: 1px solid rgba(138, 241, 220, .15);
  border-radius: 16px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .22);
}
.product-card:active { box-shadow: 0 5px 13px rgba(0,0,0,.28); }
.product-art {
  position: relative;
  height: 100%;
  min-height: 142px;
  background-size: 200% 200%;
  background-repeat: no-repeat;
}
.product-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 48%, #0c211e 100%);
}
.product-badge, .product-hot {
  position: absolute;
  z-index: 1;
  top: 9px;
  padding: 3px 7px;
  border-radius: 99px;
  font-size: 9px;
  line-height: 1.25;
}
.product-badge { left: 9px; color: #a0f9e5; background: rgba(2, 27, 25, .78); border: 1px solid rgba(132, 248, 224, .28); }
.product-hot { right: 8px; color: #ffe2a6; background: rgba(57, 39, 13, .62); }
.product-copy { display: flex; min-width: 0; flex-direction: column; align-items: stretch; justify-content: center; padding: 13px 13px 12px 1px; }
.product-title-line { gap: 6px; }
.product-title-line strong { overflow: hidden; color: #f4fffc; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.product-arrow { display: grid; flex: 0 0 auto; place-items: center; width: 24px; height: 24px; color: #8ff1dc; border: 1px solid rgba(114, 237, 212, .34); border-radius: 50%; }
.product-copy p { height: auto; margin: 7px 0 9px; color: rgba(207, 237, 230, .64); font-size: 11px; line-height: 1.5; }
.price-row { margin-top: auto; }
.price-row b, .detail-bottom b { color: #ffca69; font-size: 21px; }
.price-row small, .detail-bottom small { color: #a6c9c1; font-size: 10px; }
.price-row > span { color: #7debd4; font-size: 10px; }
.product-card .hot, .product-card .chip { display: none; }
.catalog-empty { padding: 30px 16px; color: #8ca9a2; text-align: center; border: 1px dashed rgba(126, 235, 214, .25); border-radius: 14px; font-size: 13px; }

/* 分类、订单、客服、我的 */
.catalog-layout { height: calc(100dvh - 132px); max-height: 768px; background: #071513; }
.catalog-side { background: #0a1c19; border-right: 1px solid rgba(151, 238, 218, .1); }
.catalog-side button { color: #8aa59f; }
.catalog-side button.selected { color: #80f3da; background: #102b27; }
.catalog-side button.selected::before { background: linear-gradient(#63efdc, #5fb6ff); }
.catalog-content { padding: 14px 12px 32px; background: #071513; }
.search-field, .order-search { color: #72928a; background: #0c2521; border: 1px solid rgba(132, 238, 216, .12); }
.search-field button { color: #8cebd7; }
.catalog-content h2 { color: #effffb; }
.catalog-grid { gap: 11px; }
.catalog-grid .product-card { grid-template-columns: 42% 1fr; }
.catalog-grid .product-art { height: 100%; min-height: 142px; }
.catalog-grid .product-copy { align-self: stretch; }
.catalog-grid .product-copy p { height: auto; }
.order-view, .service-view { min-height: 100%; padding: 14px; background: #071513; }
.order-tabs { padding-bottom: 1px; }
.order-tabs button { color: #8ba7a0; background: #0d2622; border: 1px solid rgba(125, 239, 216, .14); }
.order-tabs button.selected { color: #062622; background: linear-gradient(100deg, #63ecd4, #85cdff); }
.h5-order-list { display: grid; gap: 11px; }
.h5-order-card {
  padding: 14px;
  color: #eafbF7;
  background: #0c231f;
  border: 1px solid rgba(134, 241, 219, .15);
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
}
.h5-order-card h2 { color: #f2fefa; }
.h5-order-card p { color: #93afa8; }
.h5-order-card footer { border-top-color: rgba(159, 242, 222, .12); }
.h5-order-card footer b { color: #ffcc71; }
.h5-order-card footer span { color: #91ada5; }
.chip { color: #8ff2dc; background: rgba(23, 99, 85, .38); border: 1px solid rgba(117, 232, 209, .18); }
.order-status.waiting { color: #ffe1a1; background: rgba(142, 97, 22, .28); }
.order-status.running { color: #99e5ff; background: rgba(20, 85, 120, .3); }
.order-status.done { color: #8cf1c9; background: rgba(26, 116, 75, .3); }
.service-tabs { background: #0c2420; border: 1px solid rgba(132, 238, 216, .14); }
.service-tabs button { color: #8ba9a1; }
.service-tabs button.selected { color: #062824; background: linear-gradient(100deg, #5fe6d0, #8bcaff); }
.empty-state, .support-panel { color: #8ba9a1; }
.empty-state span, .support-mark { color: #83f0da; background: linear-gradient(145deg, #103f38, #0d2929); border: 1px solid rgba(121, 238, 215, .26); }
.empty-state b, .support-panel h2 { color: #effffb; }
.empty-state button { color: #062824; background: linear-gradient(100deg, #63ead2, #8acdff); }
.support-button { margin-top: 12px; padding: 10px 18px; color: #062824; background: linear-gradient(100deg, #62ead2, #86ccff); border-radius: 99px; font-size: 12px; font-weight: 800; box-shadow: 0 8px 16px rgba(0,0,0,.24); }
.profile-top {
  min-height: 190px;
  background:
    radial-gradient(circle at 78% 26%, rgba(50, 189, 179, .24), transparent 9rem),
    linear-gradient(125deg, #071d19, #0b3934 56%, #133963);
}
.avatar { color: #b5fff0; background: linear-gradient(130deg, #0e6b61, #165d8c); border-color: #7cf0d9; }
.profile-top p, .profile-top span { color: rgba(222, 255, 247, .72); }
.profile-top > button { color: #d3fff7; background: rgba(123, 243, 218, .12); }
.profile-view { height: calc(100dvh - 260px); max-height: 640px; background: #071513; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 14px 13px; position: relative; z-index: 1; }
.profile-stats button { display: grid; gap: 5px; padding: 13px 6px; text-align: center; border: 1px solid rgba(145, 241, 220, .16); border-radius: 14px; color: #b9d8d0; background: linear-gradient(145deg, #10352f, #0a2420); box-shadow: 0 9px 18px rgba(0,0,0,.2); }
.profile-stats b { color: #fff2c5; font-family: Georgia, serif; font-size: 21px; line-height: 1; }
.profile-stats span { font-size: 11px; }
.profile-tip { display: flex; align-items: center; gap: 8px; margin: 0 14px 17px; padding: 10px 11px; border-radius: 11px; color: #9ec4ba; background: rgba(17, 69, 60, .34); border: 1px solid rgba(113, 229, 203, .12); }
.profile-tip span { display: grid; place-items: center; color: #75ead2; }
.profile-tip p { margin: 0; font-size: 11px; line-height: 1.55; }
.profile-view > h2 { margin: 0 14px 9px; font-size: 16px; }
.profile-actions { margin: 0 14px 26px; overflow: hidden; border: 1px solid rgba(134, 241, 219, .14); border-radius: 15px; background: #0c231f; }
.profile-row { display: grid; grid-template-columns: 35px 1fr 18px; align-items: center; width: 100%; gap: 8px; padding: 12px; color: #a9c7bf; background: #0c231f; text-align: left; border-bottom: 1px solid rgba(134, 241, 219, .1); }
.profile-row:last-child { border-bottom: 0; }
.profile-row > svg { color: #679d91; }
.profile-row > span:nth-child(2) { display: grid; gap: 3px; }
.profile-row b { color: #eafff7; font-size: 13px; }
.profile-row small { color: #79a79d; font-size: 10px; }
.profile-action-icon { display: grid; place-items: center; width: 32px; height: 32px; color: #7ff0d9; border-radius: 10px; background: linear-gradient(145deg, #164a42, #12332e); }
.profile-hero { min-height: 196px; padding-top: 55px; overflow: hidden; background: radial-gradient(circle at 76% 22%, rgba(62, 225, 215, .26), transparent 9rem), linear-gradient(rgba(97, 231, 211, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(97, 231, 211, .06) 1px, transparent 1px), linear-gradient(125deg, #051b1a, #0d3b38 58%, #123963); background-size: auto, 22px 22px, 22px 22px, auto; }
.profile-hero::after { content: ''; position: absolute; right: -55px; top: 35px; width: 170px; height: 170px; border: 1px solid rgba(120, 242, 220, .23); border-radius: 50%; box-shadow: 0 0 0 20px rgba(83, 228, 210, .035), 0 0 0 42px rgba(83, 228, 210, .025); }
.profile-hero-title { position: absolute; top: 17px; left: 20px; display: flex; align-items: baseline; gap: 8px; color: #effffb; }
.profile-hero-title b { font-size: 16px; letter-spacing: .04em; }
.profile-hero-title span { color: #73e8d5; font-size: 10px; letter-spacing: .12em; }
.profile-hero .avatar, .profile-hero > div:not(.profile-hero-title), .profile-hero > button { position: relative; z-index: 1; }
.profile-hero > button { margin-top: 2px; }
.profile-view { padding: 0 14px 28px; }
.membership-card { display: grid; grid-template-columns: 42px 1fr 18px; align-items: center; width: 100%; gap: 10px; margin: 13px 0 12px; padding: 12px; color: #eafff8; border: 1px solid rgba(255, 203, 111, .28); border-radius: 15px; background: linear-gradient(115deg, #102f2d, #132c37 70%, #3b3421); text-align: left; box-shadow: 0 9px 20px rgba(0, 0, 0, .22); }
.membership-card > span:nth-child(2) { display: grid; gap: 4px; }
.membership-card b { color: #fff0bf; font-size: 14px; }
.membership-card small { color: #a9c7bf; font-size: 10px; }
.membership-card > svg { color: #edcc7a; }
.membership-emblem { display: grid; place-items: center; width: 40px; height: 40px; color: #ffd47d; border: 1px solid rgba(255, 213, 131, .22); border-radius: 12px; background: rgba(122, 88, 26, .23); }
.profile-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 0 0 18px; }
.profile-summary button { display: grid; gap: 5px; justify-items: center; padding: 11px 4px; color: #b7d6cf; border: 1px solid rgba(132, 238, 216, .13); border-radius: 11px; background: #0b2723; }
.profile-summary b { color: #fff0bd; font-family: Georgia, serif; font-size: 18px; line-height: 1; }
.profile-summary span { font-size: 10px; }
.profile-section-title { margin: 0 0 10px !important; padding-left: 8px; border-left: 3px solid #63e8d2; font-size: 16px !important; }
.profile-function-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px 6px; padding: 14px 7px 16px; border: 1px solid rgba(100, 230, 211, .16); border-radius: 17px; background: linear-gradient(145deg, rgba(11, 38, 34, .98), rgba(7, 27, 25, .98)); }
.profile-function { display: grid; justify-items: center; align-content: start; gap: 7px; min-height: 82px; padding: 5px 1px; color: #c7e2db; background: transparent; }
.profile-function-icon { display: grid; place-items: center; width: 39px; height: 39px; color: #79f1dc; border: 1px solid rgba(117, 239, 216, .16); border-radius: 12px; background: linear-gradient(145deg, #15483f, #102e2b); box-shadow: inset 0 1px 0 rgba(216, 255, 248, .07); }
.profile-function:nth-child(3n) .profile-function-icon, .profile-function .icon-level, .profile-function .icon-welfare { color: #ffd67e; border-color: rgba(255, 208, 112, .18); background: linear-gradient(145deg, #574728, #28372f); }
.profile-function em { display: block; max-width: 78px; overflow: hidden; color: #c7ded8; font-size: 10px; font-style: normal; line-height: 1.3; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.profile-device-note { margin: 13px 4px 0; color: #78a49a; font-size: 10px; line-height: 1.55; text-align: center; }
.level-panel { display: grid; justify-items: start; gap: 9px; margin-top: 14px; padding: 15px; border: 1px solid rgba(255, 209, 119, .18); border-radius: 13px; background: linear-gradient(125deg, #102c2b, #263229); }
.level-panel b { color: #ffe2a0; font-size: 18px; }
.level-panel strong { color: #d5eee8; font-size: 13px; }
.level-panel > div { width: 100%; height: 7px; overflow: hidden; border-radius: 99px; background: rgba(195, 240, 229, .11); }
.level-panel > div i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5be9d0, #ffcf71); }
.level-panel small { color: #9cbcb4; font-size: 11px; }
.profile-records { margin-top: 14px; }
.welfare-panel { margin-top: 14px; padding: 15px; border: 1px solid rgba(119, 236, 214, .15); border-radius: 13px; background: #0a211e; }
.welfare-panel b { color: #fff0bd; font-size: 15px; }
.welfare-panel p { margin: 8px 0 14px; }
.balance { color: #f2fffb; background: linear-gradient(105deg, #0f756b, #166082 55%, #2866ad); box-shadow: 0 12px 25px rgba(0,0,0,.27); }
.balance button { color: #06352e; background: #e7fff8; }
.profile-view h2 { color: #effffb; }
.action-grid { background: #0c231f; border: 1px solid rgba(134, 241, 219, .14); }
.action-grid button { color: #cce4df; }
.tone-0, .tone-1, .tone-2, .tone-3 { color: #91efd9; background: #123a34; }

/* 商品详情：参考移动商城的独立详情页结构，保留潜龙电竞品牌配色 */
.app-content.product-detail-mode { padding-bottom: 0; }
.product-detail-page {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #15211f;
  background: #f3f6f5;
}
.product-detail-header {
  position: relative;
  z-index: 4;
  height: 62px;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  padding: 0 13px;
  color: #effffb;
  background: #071513;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.product-detail-header button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: #effffb;
  background: transparent;
}
.product-detail-header button svg { transform: rotate(180deg); }
.product-detail-header span { display: grid; justify-items: center; gap: 1px; }
.product-detail-header b { font-size: 17px; line-height: 1.25; }
.product-detail-header small { color: #8eaaa3; font-size: 10px; letter-spacing: .08em; }
.product-detail-notice {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  min-height: 42px;
  margin: 0;
  padding: 10px 14px;
  color: #835e19;
  background: #fff8df;
  border-bottom: 1px solid #f5e8ba;
  font-size: 11px;
  line-height: 1.45;
}
.product-detail-notice svg { flex: 0 0 auto; margin-top: 1px; }
.product-detail-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 18px;
  scrollbar-width: none;
}
.product-detail-scroll::-webkit-scrollbar { display: none; }
.product-detail-art {
  width: 100%;
  aspect-ratio: 16 / 11;
  background-color: #0b2622;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .08);
}
.product-detail-summary {
  position: relative;
  margin: 12px 12px 0;
  padding: 18px 17px 17px;
  background: #fff;
  border: 1px solid #e8efed;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(7, 38, 32, .06);
}
.product-detail-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  color: #087267;
  background: #e7f8f4;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
}
.product-detail-summary h1 {
  margin: 10px 0 5px;
  color: #15211f;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.03em;
}
.product-detail-summary > p {
  margin: 0;
  color: #7b8986;
  font-size: 12px;
  line-height: 1.55;
}
.product-detail-price {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 17px;
  padding-top: 14px;
  border-top: 1px solid #eef2f1;
}
.product-detail-price > small { color: #8b9895; font-size: 11px; }
.product-detail-price b { color: #e04f54; font-size: 31px; line-height: 1; }
.product-detail-price em { margin-right: 2px; font-size: 15px; font-style: normal; }
.product-detail-price i { margin-left: 4px; color: #a46b6d; font-size: 11px; font-style: normal; font-weight: 500; }
.product-detail-attributes {
  margin: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e8efed;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(7, 38, 32, .05);
}
.product-detail-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  color: #effffb;
  background: linear-gradient(105deg, #0f4039, #14554b);
}
.product-detail-section-title b { font-size: 15px; }
.product-detail-section-title span { color: #a9d8ce; font-size: 10px; }
.product-detail-attributes dl { margin: 0; padding: 5px 16px; }
.product-detail-attributes dl > div {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #edf2f0;
  font-size: 12px;
}
.product-detail-attributes dl > div:last-child { border-bottom: 0; }
.product-detail-attributes dt { color: #8a9794; }
.product-detail-attributes dd { margin: 0; color: #263431; font-weight: 700; }
.product-detail-guarantee {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 12px;
  padding: 14px 15px;
  color: #176b60;
  background: #e9f8f4;
  border: 1px solid #cfece5;
  border-radius: 14px;
}
.product-detail-guarantee > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  color: #eafff9;
  background: #118777;
  border-radius: 11px;
}
.product-detail-guarantee b { display: block; font-size: 13px; }
.product-detail-guarantee p { margin: 3px 0 0; color: #6a8c84; font-size: 10px; line-height: 1.4; }
.product-detail-actions {
  position: relative;
  z-index: 5;
  flex: 0 0 72px;
  height: 72px;
  display: grid;
  grid-template-columns: 62px 62px 1fr;
  align-items: center;
  gap: 4px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .98);
  border-top: 1px solid #e6ecea;
  box-shadow: 0 -8px 24px rgba(7, 38, 32, .08);
}
.product-detail-actions > button { height: 54px; }
.product-detail-service,
.product-detail-save {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  padding: 0;
  color: #394744;
  background: transparent;
  font-size: 10px;
}
.product-detail-save.saved { color: #dc565a; }
.product-detail-save.saved svg { fill: currentColor; }
.product-detail-buy {
  margin-left: 4px;
  color: #f4fffc;
  background: linear-gradient(100deg, #0f766b, #209f8d);
  border-radius: 99px;
  box-shadow: 0 9px 20px rgba(18, 130, 114, .24);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .03em;
}
.product-detail-buy:active { transform: scale(.985); }
@media (max-width: 359px) {
  .product-detail-summary h1 { font-size: 20px; }
  .product-detail-actions { grid-template-columns: 54px 54px 1fr; padding-inline: 8px; }
}

/* 弹窗和底部导航 */
.bottom-nav {
  height: 70px;
  color: #9ebcb5;
  background: rgba(7, 22, 19, .97);
  border-top-color: rgba(145, 241, 220, .14);
  box-shadow: 0 -8px 25px rgba(0,0,0,.18);
}
.bottom-nav button { color: #809c95; }
.bottom-nav button.active { color: #81f2da; }
.bottom-nav button.active svg { fill: rgba(84, 234, 207, .23); stroke: #75efd7; }
.modal-backdrop { background: rgba(1, 10, 8, .74); backdrop-filter: blur(7px); }
.notice {
  color: #eafff9;
  background: linear-gradient(145deg, #0c2823, #102b37);
  border: 1px solid rgba(132, 246, 222, .3);
  box-shadow: 0 22px 48px rgba(0,0,0,.55);
}
.notice::after { background: rgba(50, 157, 140, .12); }
.close { color: #aff4e5; background: rgba(132, 243, 220, .12); }
.notice-dots i { background: #66f0d5; }
.notice-dots i:nth-child(2) { background: #84cbff; }
.notice-dots i:nth-child(3) { background: #ffd278; }
.notice h1 { color: #fff6dc; font-size: 26px; }
.notice-highlight { color: #8af1da; }
.notice ol { color: #bed9d2; }
.notice-cta, .order-submit, .detail-bottom button { color: #062723; background: linear-gradient(100deg, #61ebd1, #87ccff 58%, #ffd17b); box-shadow: 0 9px 16px rgba(0,0,0,.28); }
.detail-modal, .order-form { color: #eafff9; background: #0c2521; border: 1px solid rgba(139, 243, 221, .22); }
.detail-backdrop, .order-form-backdrop { display: flex; align-items: flex-end; justify-content: center; }
.detail-modal { position: absolute; right: 0; bottom: 70px; left: 0; max-height: calc(100% - 74px); margin: 0 auto; overflow-y: auto; padding: 14px 16px 13px; }
.order-form { position: absolute; right: 0; bottom: 70px; left: 0; max-height: calc(100% - 74px); margin: 0 auto; overflow-y: auto; }
.detail-art { height: min(150px, 23dvh); border: 1px solid rgba(145, 241, 220, .16); }
.detail-modal .chip { margin-top: 9px; }
.detail-modal p { margin-bottom: 10px; }
.detail-favorite { display: inline-flex; align-items: center; gap: 5px; margin: -1px 0 13px; padding: 7px 10px; color: #b8dbd3; border: 1px solid rgba(131, 237, 216, .18); border-radius: 99px; background: rgba(18, 72, 63, .44); font-size: 11px; }
.detail-favorite.saved { color: #ffe2a3; border-color: rgba(255, 203, 112, .34); background: rgba(127, 85, 24, .25); }
.detail-favorite.saved svg { fill: currentColor; }
.profile-sheet { min-height: 260px; }
.profile-sheet-list { display: grid; gap: 8px; margin-top: 13px; }
.ticket-item, .favorite-item { width: 100%; padding: 11px; border: 1px solid rgba(137, 236, 215, .13); border-radius: 12px; background: #0a1e1b; text-align: left; }
.ticket-item > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ticket-item b { color: #daf9f1; font-size: 12px; }
.ticket-item p { margin: 9px 0 5px; color: #b3cdc6; font-size: 12px; line-height: 1.55; }
.ticket-item small { color: #759d94; font-size: 10px; }
.favorite-item { display: grid; grid-template-columns: 48px 1fr 18px; align-items: center; gap: 10px; color: #d8f5ee; }
.favorite-item > span:nth-child(2) { display: grid; gap: 5px; }
.favorite-item b { font-size: 13px; }
.favorite-item small { color: #82aaa1; font-size: 10px; }
.favorite-item > svg { color: #71a99d; }
.favorite-thumb { width: 48px; height: 41px; border-radius: 8px; background-size: cover; background-position: center; }
.profile-sheet-empty { display: grid; justify-items: center; gap: 9px; padding: 30px 0 14px; color: #95b9b0; text-align: center; }
.profile-sheet-empty > span { display: grid; place-items: center; width: 54px; height: 54px; color: #86ecd6; border-radius: 50%; background: #103a33; }
.profile-sheet-empty p { margin: 0; }
.profile-sheet-empty button { padding: 9px 15px; color: #082722; border-radius: 99px; background: linear-gradient(100deg, #63ead2, #8acdff); font-size: 12px; font-weight: 800; }
.help-points { display: grid; gap: 9px; margin: 14px 0; }
.help-points div { display: flex; align-items: flex-start; gap: 8px; padding: 10px; color: #a8c5bd; border-radius: 10px; background: #0a1e1b; font-size: 11px; line-height: 1.55; }
.help-points svg { flex: 0 0 auto; color: #79ead4; }
.detail-bottom button { padding: 9px 14px; }
.detail-modal h2, .order-form h2 { color: #f2fffb; }
.detail-modal p, .order-form > p { color: #a8c5bd; }
.order-form label { color: #c5e1da; }
.order-form input:not([type=hidden]), .order-form select, .order-form textarea {
  color: #eafff9;
  background: #091b18;
  border-color: rgba(137, 236, 215, .2);
}
.order-form input:focus, .order-form select:focus, .order-form textarea:focus { border-color: #6debd3; box-shadow: 0 0 0 3px rgba(96, 235, 209, .13); }
.toast { color: #e9fffa; background: rgba(4, 31, 27, .92); border: 1px solid rgba(124, 238, 216, .25); }

@media (min-width: 600px) {
  .phone-shell { border-radius: 26px; }
  .home-view, .catalog-layout { height: calc(min(92vh, 900px) - 132px); }
  .profile-view { height: calc(min(92vh, 900px) - 260px); }
}

/* 首页参考版式：只调整模块顺序、比例和网格，不改品牌内容与功能 */
.home-titlebar {
  height: 50px;
  justify-content: center;
  padding: 0 50px;
}
.home-titlebar .brand-lockup {
  justify-items: center;
  text-align: center;
}
.home-titlebar .brand-lockup b { font-size: 17px; }
.home-titlebar .brand-lockup span { font-size: 8px; }
.home-titlebar > button {
  position: absolute;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.reference-home {
  height: calc(100dvh - 120px);
  max-height: 780px;
  padding: 0 12px 30px;
}
.reference-home .home-promo-strip {
  width: calc(100% + 24px);
  min-height: 36px;
  margin: 0 -12px;
  padding: 8px 13px;
  border-width: 0 0 1px;
  border-radius: 0;
}
.reference-home .home-quick-row {
  padding: 17px 0 16px;
}
.reference-home .quick-link { gap: 4px; }
.reference-home .quick-icon {
  width: 46px;
  height: 46px;
}
.reference-home .quick-link em { font-size: 11px; }
.reference-home .quick-link small { font-size: 8px; }
.reference-home .hero-carousel {
  min-height: 144px;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .3);
}
.reference-home .hero-track,
.reference-home .hero-slide {
  height: 144px;
  min-height: 144px;
}
.reference-home .hero-photo-caption { bottom: 16px; }
.reference-home .service-slide { min-height: 144px; padding: 16px; }
.reference-home .service-banner-copy h1 { font-size: 19px; }
.reference-home .service-banner-copy p { margin: 5px 0 9px; }
.reference-home .service-banner-copy button { padding: 6px 10px; font-size: 10px; }
.reference-home .home-category-tabs {
  margin: 0 -2px;
  padding: 11px 0 12px;
}
.reference-home .home-category-tabs button {
  flex: 0 0 auto;
  padding: 7px 12px;
  font-size: 10px;
}
.reference-home .home-service-head {
  margin: 2px 1px 10px;
}
.reference-home .home-service-head h1 { font-size: 18px; }
.reference-home .home-service-head span { font-size: 8px; }
.reference-home .section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 1px 9px;
}
.reference-home .section-title b {
  padding: 4px 8px;
  color: #06231f;
  background: linear-gradient(100deg, #59ead2, #79d2ff);
  border-radius: 99px;
  font-size: 10px;
}
.reference-home .home-product-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.reference-home .home-product-grid .product-card {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  border-radius: 13px;
}
.reference-home .home-product-grid .product-art {
  width: 100%;
  height: 104px;
  min-height: 104px;
}
.reference-home .home-product-grid .product-art::after {
  background: linear-gradient(180deg, transparent 68%, rgba(12, 33, 30, .5));
}
.reference-home .home-product-grid .product-copy {
  min-height: 116px;
  padding: 10px;
}
.reference-home .home-product-grid .product-title-line strong {
  font-size: 13px;
}
.reference-home .home-product-grid .product-arrow {
  width: 20px;
  height: 20px;
}
.reference-home .home-product-grid .product-copy p {
  display: -webkit-box;
  min-height: 32px;
  margin: 6px 0 8px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 10px;
}
.reference-home .home-product-grid .price-row b { font-size: 18px; }
.reference-home .home-product-grid .price-row > span { font-size: 9px; }
.reference-home .catalog-empty { grid-column: 1 / -1; }

@media (min-width: 600px) {
  .reference-home { height: calc(min(92vh, 900px) - 120px); }
}