/* ============================================================
   真义三帮 · 小程序交互演示
   ============================================================ */

html, body { height: 100%; }

body {
  background:
    radial-gradient(1100px 680px at 20% 10%, #165b47 0%, transparent 58%),
    radial-gradient(900px 600px at 88% 92%, #123f34 0%, transparent 62%),
    linear-gradient(140deg, #082c23 0%, #0a352b 46%, #06271f 100%);
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(160, 220, 196, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 220, 196, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 78%);
}

.stage {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 6vw, 110px);
  padding: 28px 5vw;
  max-width: 1440px;
  margin: 0 auto;
}

/* ------------------------------- pitch ------------------------------- */
.pitch {
  width: min(560px, 47vw);
  color: #eaf6f0;
  position: relative;
}
.pitch-inner { display: flex; flex-direction: column; min-height: min(760px, calc(100vh - 90px)); }
.brand-lockup { display: flex; align-items: center; gap: 13px; }
.brand-mark {
  width: 43px;
  height: 43px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #f9d7a4, #e7a45d);
  color: #17392e;
  font-size: 24px;
  font-weight: 800;
  font-family: "STSong", "Songti SC", var(--font);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255,255,255,.55);
  flex: none;
}
.brand-name { font-size: 19px; font-weight: 750; letter-spacing: .06em; color: #f5fbf7; }
.brand-en { font-size: 8.5px; letter-spacing: .22em; color: #7fa999; margin-top: 2px; font-weight: 600; }

.pitch-copy { margin-top: clamp(44px, 7vh, 78px); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .08em;
  color: #a9c9bb;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .09);
  padding: 7px 12px;
  border-radius: 999px;
}
.pulse-dot { width: 6px; height: 6px; background: #66dbb1; border-radius: 50%; box-shadow: 0 0 0 4px rgba(102, 219, 177, .12); animation: breathe 2.2s infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 7px rgba(102, 219, 177, .04); } }
.pitch-copy h1 {
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1.18;
  letter-spacing: -.04em;
  margin: 26px 0 18px;
  font-weight: 760;
  color: #f7fbf8;
}
.pitch-copy h1 .hl {
  color: #f3c98e;
  position: relative;
  display: inline-block;
}
.pitch-copy h1 .hl::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 0;
  bottom: 3px;
  height: 8px;
  background: rgba(243, 201, 142, .18);
  border-radius: 4px;
  z-index: -1;
}
.pitch-copy p { font-size: 14px; line-height: 1.9; color: #a6c4b7; }

/* map art */
.map-art {
  position: relative;
  height: 220px;
  margin: 24px 0 8px;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 42% 52%, rgba(45, 126, 101, .28), transparent 42%),
    linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border: 1px solid rgba(183, 226, 208, .1);
}
.map-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(167, 213, 195, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 213, 195, .055) 1px, transparent 1px);
  background-size: 32px 32px;
  transform: perspective(500px) rotateX(42deg) scale(1.3);
  transform-origin: 50% 65%;
  opacity: .7;
}
.map-road { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-road path { fill: none; stroke: rgba(154, 209, 187, .18); stroke-width: 9; stroke-linecap: round; }
.map-road path:nth-child(2) { stroke-width: 5; opacity: .65; }
.map-road path:nth-child(3) { stroke-width: 3; opacity: .4; }
.map-road path:nth-child(4) { stroke-width: 1; stroke-dasharray: 5 10; opacity: .3; }
.map-center {
  position: absolute; left: 42%; top: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%; background: #f3c98e; color: #16352a;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800;
  z-index: 3; box-shadow: 0 0 0 7px rgba(243, 201, 142, .15), 0 0 0 15px rgba(243, 201, 142, .06);
}
.map-ripple { position: absolute; left: 42%; top: 50%; border-radius: 50%; border: 1px solid rgba(243, 201, 142, .2); transform: translate(-50%, -50%); }
.ripple-1 { width: 160px; height: 160px; }
.ripple-2 { width: 300px; height: 300px; border-color: rgba(243, 201, 142, .09); }
.map-pin {
  position: absolute;
  display: flex; align-items: center; gap: 7px;
  background: rgba(9, 43, 34, .86);
  border: 1px solid rgba(181, 225, 207, .14);
  padding: 5px 10px 5px 5px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  animation: float 5s ease-in-out infinite;
}
.map-pin b { font-size: 10.5px; font-weight: 600; color: #d3e8de; white-space: nowrap; }
.pin-avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #2b9677, #0f5f49); color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.pin-a { right: 8%; top: 22%; animation-delay: -.8s; }
.pin-b { left: 7%; top: 64%; animation-delay: -2.1s; }
.pin-c { right: 12%; bottom: 9%; animation-delay: -3.3s; }
@keyframes float { 50% { transform: translateY(-5px); } }
.map-chip {
  position: absolute; left: 14px; bottom: 12px;
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; color: #b7d3c7;
  background: rgba(8, 37, 29, .65);
  padding: 5px 9px; border-radius: 7px;
}
.live-dot { width: 5px; height: 5px; border-radius: 50%; background: #5fd4aa; box-shadow: 0 0 8px #5fd4aa; }

.pitch-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 20px;
}
.pitch-feature {
  border-left: 1px solid rgba(161, 209, 191, .17);
  padding-left: 14px;
}
.pitch-feature b { display: block; font-size: 23px; font-weight: 750; color: #f5fbf7; font-family: var(--num); letter-spacing: -.03em; }
.pitch-feature b span { font-size: 11px; font-weight: 500; color: #9fbdb0; margin-left: 1px; }
.pitch-feature > span { font-size: 10.5px; color: #88aa9b; }
.pitch-foot {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  color: #6d9183;
  border-top: 1px solid rgba(255,255,255,.06);
}
.pitch-foot a { color: #c0d9cf; display: inline-flex; align-items: center; gap: 5px; transition: color .2s; }
.pitch-foot a:hover { color: #f3c98e; }

/* ------------------------------- phone ------------------------------- */
.phone-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; flex: none; }
.phone {
  width: 400px;
  height: min(850px, calc(100vh - 110px));
  min-height: 620px;
  border-radius: 54px;
  padding: 9px;
  background: linear-gradient(160deg, #38433e, #111714 38%, #252d29 70%, #0d1210);
  box-shadow:
    0 60px 120px rgba(0, 0, 0, .48),
    0 18px 40px rgba(0, 0, 0, .3),
    inset 0 0 0 1px rgba(255,255,255,.18);
  position: relative;
}
.phone::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 51px;
  border: 1px solid rgba(255,255,255,.09);
  pointer-events: none;
}
.phone::after {
  content: "";
  position: absolute;
  left: -3px; top: 18%;
  width: 3px; height: 72px;
  background: linear-gradient(#59645f, #1c2420);
  border-radius: 2px 0 0 2px;
}
.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 46px;
  overflow: hidden;
  background: var(--bg);
  position: relative;
  display: flex;
  flex-direction: column;
}
.phone-island {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 104px;
  height: 26px;
  background: #080b09;
  border-radius: 999px;
  z-index: 60;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.phone-island::after {
  content: "";
  position: absolute; right: 8px; top: 8px;
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #243049, #090c0d 65%);
  box-shadow: inset 0 0 2px rgba(84, 136, 197, .6);
}
.phone-caption {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; color: #759a8b; letter-spacing: .03em;
}
.caption-dot { width: 5px; height: 5px; border-radius: 50%; background: #5fd4aa; box-shadow: 0 0 8px rgba(95,212,170,.65); }

.boot {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: linear-gradient(170deg, #0d493b, #0a352b);
}
.boot .brand-mark { width: 60px; height: 60px; border-radius: 20px; font-size: 34px; }
.boot-text { color: #a8c8ba; font-size: 12px; letter-spacing: .04em; }

/* ------------------------------- app shell ------------------------------- */
.miniapp { height: 100%; display: flex; flex-direction: column; position: relative; background: var(--bg); }
.miniapp .statusbar { background: var(--bg); color: var(--ink); position: relative; z-index: 20; flex: none; }
.miniapp.dark-top .statusbar { background: var(--green-900); color: #f4fbf7; }
.miniapp.dark-top .phone-island { background: #07110d; }
.miniapp .statusbar .capsule { display: none; }

.main-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  position: relative;
}
.main-scroll::-webkit-scrollbar { width: 0; }

.tabbar {
  flex: none;
  height: 67px;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  background: rgba(255,255,255,.96);
  border-top: 1px solid rgba(19, 72, 56, .07);
  backdrop-filter: blur(18px);
  padding: 7px 8px 0;
  z-index: 30;
}
.tabbar button {
  border: 0; background: transparent; color: #9aa6a0;
  width: 20%; height: 52px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 9.5px; font-weight: 550; position: relative;
  transition: color .16s ease;
}
.tabbar button .ic { width: 22px; height: 22px; transition: transform .18s ease; }
.tabbar button.on { color: var(--green-700); font-weight: 700; }
.tabbar button.on .ic { transform: translateY(-1px); }
.tabbar button.on::before {
  content: ""; position: absolute; top: -7px; width: 18px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--green-600);
}
.tab-badge {
  position: absolute; top: -1px; right: calc(50% - 18px);
  min-width: 14px; height: 14px; border-radius: 99px; background: #ec6a43; color: #fff;
  font-size: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px;
  border: 1.5px solid #fff; font-weight: 700;
}

/* 全网求助滚动公告（所有页面顶部） */
.broadcast-ticker {
  flex: none;
  width: 100%;
  height: 36px;
  border: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: linear-gradient(90deg, #f7e8c5, #f3c98e);
  color: #4e3a18;
  text-align: left;
  position: relative;
  z-index: 18;
  overflow: hidden;
  border-bottom: 1px solid rgba(120, 84, 28, .12);
}
.bt-label {
  flex: none;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: #b06a2b;
  border-radius: 999px;
  padding: 3px 7px;
  letter-spacing: .02em;
}
.bt-viewport { flex: 1; overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.bt-track { display: inline-flex; width: max-content; animation: broadcastScroll 22s linear infinite; }
.bt-track > span { display: inline-block; padding-right: 56px; font-size: 10.5px; font-weight: 650; }
.broadcast-ticker:hover .bt-track { animation-play-state: paused; }
.bt-arrow { flex: none; color: #8a642c; font-size: 16px; font-weight: 700; }
@keyframes broadcastScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 右侧竖排品牌动画 */
.edge-slogan {
  position: absolute;
  right: 4px;
  top: 29%;
  z-index: 19;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
  color: rgba(176, 106, 43, .75);
  font-family: "STSong", "Songti SC", "Microsoft YaHei", serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.edge-slogan::before {
  content: "";
  width: 1px;
  height: 30px;
  margin-bottom: 3px;
  background: linear-gradient(180deg, transparent, rgba(243, 201, 142, .85), transparent);
}
.edge-slogan span {
  line-height: 1.45;
  opacity: .32;
  animation: edgePulse 3.8s ease-in-out infinite;
}
.edge-slogan span:nth-child(5) { font-size: 8px; opacity: .45; }
@keyframes edgePulse {
  0%, 100% { opacity: .42; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-1px); }
}
@media (min-width: 901px) {
  .edge-slogan { right: 5px; font-size: 11px; }
}

/* page transitions */
.page-enter { animation: pageIn .24s cubic-bezier(.2,.8,.2,1); }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } }

/* ------------------------------- login ------------------------------- */
.login-screen {
  height: 100%; display: flex; flex-direction: column;
  background: #f5f7f3;
  position: relative;
}
.login-top {
  position: relative;
  flex: none;
  padding: 0 24px 34px;
  background:
    radial-gradient(560px 300px at 80% 8%, rgba(49, 143, 111, .4), transparent 64%),
    linear-gradient(160deg, #0d4d3e 0%, #09372c 62%, #07291f 100%);
  color: #f0faf5;
  border-radius: 0 0 30px 30px;
  overflow: hidden;
}
.login-top .statusbar { background: transparent; color: #eaf7f1; padding: 0; height: 28px; }
.login-top::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .18;
  mask-image: linear-gradient(#000, transparent 80%);
}
.login-orbit { position: absolute; right: -60px; top: -40px; width: 280px; height: 280px; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); }
.login-orbit::before { content: ""; position: absolute; inset: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); }
.login-orbit::after { content: ""; position: absolute; left: 44px; top: 72px; width: 7px; height: 7px; border-radius: 50%; background: #f3c98e; box-shadow: 0 0 0 5px rgba(243,201,142,.12); }
.login-brand { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.login-brand .brand-mark { width: 46px; height: 46px; border-radius: 15px; }
.login-brand h1 { font-size: 23px; font-weight: 760; letter-spacing: .04em; }
.login-brand p { font-size: 9.5px; color: #8eb5a6; letter-spacing: .18em; margin-top: 3px; }
.login-slogan { position: relative; margin-top: 30px; }
.login-slogan h2 { font-size: 28px; line-height: 1.35; letter-spacing: -.02em; font-weight: 730; }
.login-slogan h2 em { font-style: normal; color: #f3c98e; }
.login-slogan p { font-size: 11.5px; color: #9dc0b1; margin-top: 9px; letter-spacing: .02em; }
.login-tags { display: flex; gap: 7px; margin-top: 20px; }
.login-tags span {
  font-size: 9.5px; color: #c3e1d4;
  border: 1px solid rgba(179, 224, 205, .16);
  background: rgba(255,255,255,.035);
  border-radius: 999px; padding: 5px 9px;
}
.login-map { position: absolute; right: 20px; bottom: 23px; width: 150px; height: 94px; opacity: .55; }
.login-map path { fill: none; stroke: rgba(179, 224, 205, .24); stroke-width: 1.3; }
.login-map circle { fill: #f3c98e; }
.login-map .ring { fill: none; stroke: rgba(243, 201, 142, .2); }

.login-panel {
  flex: 1;
  margin-top: -22px;
  background: #f5f7f3;
  border-radius: 28px 28px 0 0;
  padding: 22px 24px 20px;
  overflow-y: auto;
  position: relative;
  z-index: 2;
}
.login-panel .segmented { margin-bottom: 18px; }
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-form .input { background: #fff; border-color: #e2e9e4; height: 48px; border-radius: 13px; }
.login-form .input-group .ic { color: #8ea099; }
.login-extras { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; color: #8b9a93; margin-top: -2px; }
.login-extras a { color: var(--green-700); }
.login-note { font-size: 9px; color: #a3aea8; line-height: 1.7; text-align: center; margin-top: 10px; }
.demo-block { margin-top: 16px; }
.demo-divider { display: flex; align-items: center; gap: 9px; color: #a7b2ac; font-size: 9.5px; margin: 14px 0 10px; }
.demo-divider::before, .demo-divider::after { content: ""; height: 1px; background: #e1e8e3; flex: 1; }
.demo-accounts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo-account {
  border: 1px solid #e2eae5; background: rgba(255,255,255,.7);
  border-radius: 12px; padding: 10px;
  display: flex; align-items: center; gap: 9px; text-align: left;
  transition: all .16s ease;
}
.demo-account:hover { border-color: var(--green-300, #9bd1bd); background: #fff; box-shadow: var(--shadow-sm); }
.demo-account .avatar { width: 33px; height: 33px; border-radius: 10px; font-size: 12px; }
.demo-account b { display: block; font-size: 11.5px; font-weight: 650; }
.demo-account span { display: block; font-size: 9px; color: #8d9c95; margin-top: 2px; }
.login-admin-link { text-align: center; font-size: 10px; color: #8b9a93; margin-top: 12px; }
.login-admin-link a { color: var(--green-700); font-weight: 600; }

/* ------------------------------- common page ------------------------------- */
.home-head {
  background:
    radial-gradient(440px 240px at 92% -10%, rgba(52, 151, 119, .35), transparent 70%),
    linear-gradient(158deg, #0d4d3e, #0a3a2f 60%, #09352a);
  color: #f4fbf7;
  padding: 0 18px 34px;
  border-radius: 0 0 28px 28px;
  position: relative;
  overflow: hidden;
}
.home-head::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.1) .8px, transparent .8px);
  background-size: 18px 18px;
  opacity: .16;
  pointer-events: none;
}
.home-nav { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; position: relative; z-index: 2; }
.location-btn {
  background: transparent; border: 0; color: #e8f5ee; display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; padding: 4px 0;
}
.location-btn .ic { color: #f3c98e; }
.location-btn .caret { color: #93b8a9; }
.home-actions { display: flex; align-items: center; gap: 5px; }
.home-actions .icon-btn { color: #e4f3ec; width: 33px; height: 33px; }
.home-actions .icon-btn:hover { background: rgba(255,255,255,.08); }
.home-actions .capsule { color: #e4f3ec; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.09); height: 29px; }
.home-greeting { position: relative; z-index: 2; margin-top: 18px; }
.home-greeting p { font-size: 11px; color: #9dc1b2; letter-spacing: .02em; }
.home-greeting h1 { font-size: 24px; font-weight: 730; letter-spacing: -.02em; margin-top: 5px; }
.home-greeting h1 span { color: #f3c98e; }
.home-search {
  position: relative; z-index: 2; margin-top: 18px;
  display: flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 6px 0 13px;
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  color: #cfe3d9;
}
.home-search .ph { font-size: 11.5px; flex: 1; color: #a9c8ba; }
.home-search button { border: 0; background: #f3c98e; color: #153b2e; border-radius: 8px; padding: 7px 12px; font-size: 10.5px; font-weight: 700; }
.home-radius { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; margin-top: 13px; }
.radius-pill {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #b2d0c2; border-radius: 999px;
  font-size: 9.5px; padding: 5px 10px;
  display: inline-flex; align-items: center; gap: 4px;
}
.radius-pill.on { background: #f3c98e; border-color: #f3c98e; color: #173b2e; font-weight: 700; }
.home-radius .hint { margin-left: auto; font-size: 9px; color: #7fa697; }

.home-body { padding: 0 16px 20px; position: relative; z-index: 3; margin-top: -22px; }
.quick-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  background: #fff; border-radius: 18px; padding: 14px 8px 12px;
  box-shadow: 0 10px 30px rgba(9, 52, 40, .1);
  border: 1px solid rgba(228, 235, 230, .7);
}
.quick-item { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 4px 0; }
.quick-icon {
  width: 43px; height: 43px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: transform .16s ease;
}
.quick-item:hover .quick-icon { transform: translateY(-2px); }
.quick-item span { font-size: 10px; color: #47584f; font-weight: 600; white-space: nowrap; }
.qi-green { background: #e8f5ee; color: #147257; }
.qi-orange { background: #fff0e6; color: #d96935; }
.qi-blue { background: #eaf2f8; color: #3d779e; }
.qi-gold { background: #faf0d9; color: #a77c31; }

.home-section { margin-top: 22px; }
.home-section .section-head h2 { font-size: 15.5px; }
.home-section .section-head { margin-bottom: 11px; }
.mine-entry {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; color: var(--green-700);
  border: 0; background: transparent; padding: 0;
}
.mine-entry .ic { width: 13px; height: 13px; }

.demand-list { display: flex; flex-direction: column; gap: 9px; }
.demand-card {
  background: #fff; border: 1px solid #edf1ed; border-radius: 15px;
  padding: 13px 13px 11px;
  box-shadow: 0 2px 9px rgba(12, 53, 41, .035);
  transition: all .17s ease;
  cursor: pointer;
}
.demand-card:hover { border-color: #d6e5dc; box-shadow: 0 8px 24px rgba(12, 53, 41, .07); transform: translateY(-1px); }
.demand-top { display: flex; align-items: center; gap: 6px; }
.demand-cat { font-size: 9.5px; color: var(--green-700); background: var(--green-50); padding: 3px 7px; border-radius: 5px; font-weight: 650; }
.demand-distance { font-size: 9px; color: #8b9a93; margin-left: auto; display: flex; align-items: center; gap: 3px; }
.demand-card h3 { font-size: 13.5px; font-weight: 680; margin-top: 8px; line-height: 1.45; letter-spacing: -.01em; }
.demand-card .desc { font-size: 10.5px; color: #87958e; line-height: 1.55; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.demand-foot { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding-top: 9px; border-top: 1px dashed #eef2ef; }
.demand-foot .avatar { width: 22px; height: 22px; border-radius: 7px; font-size: 9px; }
.demand-foot .who { font-size: 9.5px; color: #6f7f77; }
.demand-price { margin-left: auto; font-size: 13px; font-weight: 740; color: var(--orange-600); font-family: var(--num); }
.demand-price small { font-size: 8.5px; font-weight: 500; color: #a4afa9; margin-left: 2px; }
.demand-price.swap { color: var(--green-700); font-size: 11px; }
.demand-view { font-size: 9.5px; color: #8d9b94; display: flex; align-items: center; gap: 1px; }

.expert-scroll { display: flex; gap: 9px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 5px; scrollbar-width: none; }
.expert-scroll::-webkit-scrollbar { display: none; }
.expert-card {
  flex: none; width: 166px; background: #fff; border: 1px solid #edf1ed;
  border-radius: 15px; padding: 13px; position: relative; overflow: hidden;
  cursor: pointer; transition: all .17s ease;
}
.expert-card:hover { box-shadow: 0 8px 24px rgba(12, 53, 41, .08); transform: translateY(-2px); }
.expert-card::after { content: ""; position: absolute; right: -18px; top: -18px; width: 60px; height: 60px; border-radius: 50%; background: var(--green-50); opacity: .65; }
.expert-head { display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; }
.expert-head .avatar { width: 38px; height: 38px; border-radius: 12px; font-size: 14px; }
.expert-name { font-size: 12.5px; font-weight: 680; display: flex; align-items: center; gap: 4px; }
.verified { width: 13px; height: 13px; border-radius: 50%; background: #e8f5ee; color: #147257; display: inline-flex; align-items: center; justify-content: center; }
.verified .ic { width: 9px; height: 9px; }
.expert-meta { font-size: 8.5px; color: #8c9a93; margin-top: 2px; }
.expert-tags { display: flex; gap: 4px; margin-top: 9px; position: relative; z-index: 1; }
.expert-tags .tag { font-size: 8.5px; height: 19px; padding: 0 6px; }
.expert-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 9px; color: #8b9a93; }
.expert-bottom b { font-size: 12px; color: #d96935; font-family: var(--num); font-weight: 700; }
.expert-bottom b small { font-size: 8px; font-weight: 500; color: #a6b0aa; }
.expert-rating { display: flex; align-items: center; gap: 2px; color: #b88735; }
.expert-rating .ic { width: 10px; height: 10px; }

.promo {
  margin-top: 20px;
  border-radius: 17px;
  padding: 15px;
  background:
    radial-gradient(180px 100px at 92% 0%, rgba(243,201,142,.4), transparent 70%),
    linear-gradient(135deg, #fbf4e4, #f5e8ce);
  border: 1px solid #efe0c2;
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 10px;
}
.promo .promo-icon { width: 38px; height: 38px; border-radius: 12px; background: rgba(170, 121, 46, .13); color: #9b7130; display: flex; align-items: center; justify-content: center; flex: none; }
.promo h4 { font-size: 11.5px; font-weight: 700; color: #5e4824; }
.promo p { font-size: 9px; color: #967c55; margin-top: 2px; }
.promo button { margin-left: auto; border: 0; background: #84602b; color: #fff; border-radius: 8px; padding: 7px 10px; font-size: 9.5px; font-weight: 650; flex: none; }

.knowledge-mini { display: flex; flex-direction: column; gap: 8px; }
.km-item {
  display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid #edf1ed;
  border-radius: 13px; padding: 11px 12px; cursor: pointer;
}
.km-rank { font-family: var(--num); font-size: 14px; font-weight: 800; color: #d9e3dd; width: 17px; flex: none; }
.km-item:nth-child(1) .km-rank { color: #d9a957; }
.km-body { flex: 1; min-width: 0; }
.km-body h4 { font-size: 11.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-body p { font-size: 8.5px; color: #96a29c; margin-top: 3px; }
.km-arrow { color: #bdc8c2; }

.bottom-space { height: 10px; }

/* sub page nav */
.sub-nav {
  position: sticky; top: 0; z-index: 25;
  height: 51px; display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(19, 72, 56, .06);
}
.sub-nav h2 { font-size: 14px; font-weight: 700; flex: 1; text-align: center; padding-right: 38px; }
.sub-nav .icon-btn { width: 34px; height: 34px; color: #34453e; }
.sub-nav .nav-right { width: 38px; display: flex; justify-content: flex-end; }
.sub-nav .nav-right .icon-btn { width: 34px; }
.page { padding: 17px 16px 28px; }
.page.tight { padding-top: 12px; }
.page-title { font-size: 21px; font-weight: 750; letter-spacing: -.025em; }
.page-sub { font-size: 11px; color: #819089; line-height: 1.65; margin-top: 5px; }
.page-section { margin-top: 21px; }
.page-section > h3 { font-size: 13.5px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.page-section > h3 .badge { margin-left: auto; font-weight: 600; }

.form-card { background: #fff; border: 1px solid #e9efeb; border-radius: 16px; padding: 16px; }
.form-card + .form-card { margin-top: 11px; }
.form-card .field + .field { margin-top: 15px; }
.form-card .field > label { font-size: 11.5px; }
.form-card .input, .form-card .textarea { font-size: 12px; border-radius: 10px; }
.form-card .input { min-height: 41px; }
.form-card .textarea { min-height: 88px; }
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cat-option {
  border: 1px solid #e5ebe6; background: #fbfcfa; border-radius: 9px;
  padding: 8px 2px; font-size: 9.5px; color: #65756d; text-align: center;
  transition: all .15s ease;
}
.cat-option.on { border-color: var(--green-600); background: var(--green-50); color: var(--green-800); font-weight: 700; box-shadow: 0 0 0 1px var(--green-600) inset; }
.radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.radio-card {
  border: 1px solid #e5ebe6; border-radius: 10px; padding: 10px; text-align: left;
  background: #fbfcfa; transition: all .15s ease;
}
.radio-card.on { border-color: var(--green-600); background: var(--green-50); box-shadow: 0 0 0 1px var(--green-600) inset; }
.radio-card b { display: block; font-size: 11.5px; }
.radio-card span { display: block; font-size: 9px; color: #8a9891; margin-top: 3px; line-height: 1.4; }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.media-item { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #eef3f0; }
.media-item img, .media-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; text-shadow: 0 2px 8px rgba(0,0,0,.45); pointer-events: none; }
.media-del { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(12, 43, 34, .72); color: #fff; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.media-add { aspect-ratio: 1; border: 1px dashed #bcd4c7; border-radius: 10px; background: #fafcf9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #7d9187; font-size: 8.5px; text-align: center; cursor: pointer; }
.ma-plus { font-size: 22px; line-height: 1; color: #177a60; }
.demand-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.demand-media img, .demand-media video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #eef3f0; }

.form-tip { display: flex; gap: 7px; padding: 10px 11px; border-radius: 10px; background: #f7f6ef; color: #81734f; font-size: 9px; line-height: 1.65; }
.form-tip .ic { flex: none; margin-top: 1px; color: #b09050; }
.sticky-cta {
  position: sticky; bottom: 0; z-index: 15;
  margin: 16px -16px -28px; padding: 11px 16px calc(13px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(245,247,243,.92) 22%, #f5f7f3 48%);
}
.sticky-cta .btn { width: 100%; }

/* ------------------------------- orders ------------------------------- */
.order-tabs { display: flex; gap: 3px; padding: 3px; background: #eef2ef; border-radius: 10px; margin-bottom: 13px; }
.order-tabs button { flex: 1; border: 0; background: transparent; border-radius: 8px; height: 32px; font-size: 10.5px; font-weight: 600; color: #829089; }
.order-tabs button.on { background: #fff; color: var(--green-800); box-shadow: 0 2px 6px rgba(9,52,40,.08); }
.order-list { display: flex; flex-direction: column; gap: 10px; }
.order-card { background: #fff; border: 1px solid #e9efeb; border-radius: 16px; overflow: hidden; }
.order-head { padding: 11px 13px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid #f2f5f3; }
.order-head .ono { font-size: 8.5px; color: #a0aca6; font-family: var(--num); }
.order-head .badge { margin-left: auto; }
.order-body { padding: 13px; }
.order-body h3 { font-size: 13px; font-weight: 680; line-height: 1.45; }
.order-person { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.order-person .avatar { width: 30px; height: 30px; border-radius: 9px; font-size: 11px; }
.order-person .name { font-size: 10.5px; font-weight: 600; }
.order-person .role { font-size: 8.5px; color: #95a19b; margin-top: 1px; }
.order-meta { margin-left: auto; text-align: right; }
.order-meta b { display: block; font-size: 13px; color: #d96935; font-family: var(--num); }
.order-meta span { font-size: 8px; color: #a4aea8; }
.order-actions { display: flex; gap: 6px; justify-content: flex-end; padding: 0 13px 12px; }
.order-actions .btn { min-height: 30px; font-size: 10px; padding: 0 10px; border-radius: 8px; }
.order-state { display: flex; align-items: center; gap: 5px; font-size: 9.5px; color: #88958f; margin-top: 8px; }
.order-state .ic { width: 12px; height: 12px; }
.status-completed { color: #177a60; }
.status-pending { color: #c08a32; }
.status-cancelled { color: #a0aaa5; }
.status-in_progress { color: #3f7cac; }
.status-complaint { color: #d9534f; }

.detail-hero { background: #fff; border-radius: 16px; padding: 17px; border: 1px solid #e9efeb; }
.detail-status { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--green-700); font-weight: 650; }
.detail-hero h2 { font-size: 17px; font-weight: 730; margin-top: 8px; line-height: 1.4; }
.detail-hero .sub { font-size: 10px; color: #8b9a93; margin-top: 5px; }
.timeline { margin-top: 16px; padding-left: 5px; }
.timeline-item { display: flex; gap: 11px; position: relative; padding-bottom: 17px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 1px; background: #e3ebe6; }
.timeline-item:last-child::before { display: none; }
.timeline-dot { width: 11px; height: 11px; border-radius: 50%; background: #dce6e0; flex: none; margin-top: 3px; z-index: 1; border: 2px solid #fff; box-shadow: 0 0 0 1px #dce6e0; }
.timeline-item.done .timeline-dot { background: var(--green-600); box-shadow: 0 0 0 1px var(--green-600); }
.timeline-item b { display: block; font-size: 10.5px; font-weight: 600; }
.timeline-item span { display: block; font-size: 8.5px; color: #9aa69f; margin-top: 2px; }
.info-card { background: #fff; border: 1px solid #e9efeb; border-radius: 16px; padding: 15px; margin-top: 11px; }
.info-card h3 { font-size: 12px; font-weight: 700; margin-bottom: 10px; }
.info-row { display: flex; justify-content: space-between; gap: 20px; font-size: 10.5px; padding: 5px 0; }
.info-row span { color: #8f9c96; }
.info-row b { font-weight: 600; text-align: right; }

/* ------------------------------- credit ------------------------------- */
.credit-hero {
  border-radius: 20px;
  padding: 18px;
  color: #fff;
  background:
    radial-gradient(260px 150px at 100% 0%, rgba(243, 201, 142, .27), transparent 70%),
    linear-gradient(145deg, #0e4e3f, #0a352b);
  position: relative; overflow: hidden;
}
.credit-hero::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 170px; height: 170px; border-radius: 50%; border: 1px solid rgba(255,255,255,.07); }
.credit-main { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
.score-ring { width: 112px; height: 112px; flex: none; position: relative; }
.score-ring svg { transform: rotate(-90deg); width: 112px; height: 112px; }
.score-ring .ring-bg { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 9; }
.score-ring .ring-val { fill: none; stroke: #f3c98e; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.score-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score-center b { font-family: var(--num); font-size: 32px; line-height: 1; letter-spacing: -.04em; }
.score-center span { font-size: 8px; color: #a8c7b9; margin-top: 5px; letter-spacing: .06em; }
.credit-info h2 { font-size: 17px; font-weight: 720; }
.credit-info .level { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; color: #f3c98e; background: rgba(243,201,142,.11); border: 1px solid rgba(243,201,142,.16); border-radius: 999px; padding: 4px 8px; margin-top: 7px; }
.credit-info p { font-size: 9.5px; color: #9fc0b2; line-height: 1.65; margin-top: 9px; }
.credit-progress { margin-top: 14px; }
.credit-progress .bar-label { display: flex; justify-content: space-between; font-size: 8.5px; color: #a7c4b7; margin-bottom: 5px; }
.credit-progress .progress { background: rgba(255,255,255,.12); height: 5px; }
.credit-progress .progress > i { background: linear-gradient(90deg, #f3c98e, #f1b666); }
.credit-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 11px; }
.credit-stat { background: #fff; border: 1px solid #e9efeb; border-radius: 12px; padding: 10px; text-align: center; }
.credit-stat b { display: block; font-size: 17px; font-family: var(--num); font-weight: 750; color: var(--green-800); }
.credit-stat span { display: block; font-size: 8px; color: #96a29c; margin-top: 2px; }
.rule-box { background: #fff; border: 1px solid #e9efeb; border-radius: 14px; padding: 14px; }
.rule-box h4 { font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.rule-box ul { margin-top: 7px; display: flex; flex-direction: column; gap: 5px; }
.rule-box li { font-size: 9.5px; color: #7c8b84; line-height: 1.55; display: flex; gap: 5px; }
.rule-box li::before { content: "·"; color: var(--green-600); font-weight: 800; }
.log-list { display: flex; flex-direction: column; gap: 7px; }
.log-item { background: #fff; border: 1px solid #e9efeb; border-radius: 12px; padding: 11px 12px; display: flex; align-items: flex-start; gap: 9px; }
.log-sign { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-family: var(--num); font-weight: 700; flex: none; }
.log-sign.plus { background: #e8f5ee; color: #147257; }
.log-sign.minus { background: #fdeceb; color: #c44b47; }
.log-body { flex: 1; min-width: 0; }
.log-body h4 { font-size: 10.5px; font-weight: 600; line-height: 1.45; }
.log-body p { font-size: 8.5px; color: #9aa69f; margin-top: 3px; }
.log-time { font-size: 8px; color: #b0bab5; white-space: nowrap; margin-left: auto; }
.log-appeal { border: 0; background: transparent; color: #b88735; font-size: 8.5px; padding: 0; margin-top: 4px; }

/* ------------------------------- knowledge ------------------------------- */
.knowledge-hero {
  border-radius: 18px;
  padding: 17px;
  background:
    radial-gradient(180px 110px at 88% -10%, rgba(255,255,255,.5), transparent 60%),
    linear-gradient(135deg, #fbf3e1, #f5e7c8);
  border: 1px solid #eedfbf;
  color: #5e4824;
  position: relative; overflow: hidden;
}
.knowledge-hero::after {
  content: "知"; position: absolute; right: 14px; bottom: -22px;
  font-family: "STSong", serif; font-size: 94px; color: rgba(132, 96, 43, .07); font-weight: 800;
}
.knowledge-hero .eyebrow2 { font-size: 8.5px; letter-spacing: .1em; color: #a4854e; font-weight: 650; }
.knowledge-hero h2 { font-size: 18px; line-height: 1.42; font-weight: 730; margin-top: 7px; letter-spacing: -.02em; }
.knowledge-hero p { font-size: 9.5px; color: #957d58; margin-top: 6px; line-height: 1.6; }
.knowledge-hero .btn { margin-top: 12px; min-height: 31px; font-size: 10px; border-radius: 8px; background: #84602b; color: #fff; position: relative; z-index: 1; }
.search-bar {
  display: flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #e6ece7;
  border-radius: 11px; height: 39px; padding: 0 11px; margin-top: 12px;
}
.search-bar .ic { color: #9ba8a1; }
.search-bar input { border: 0; outline: 0; flex: 1; font-size: 10.5px; background: transparent; min-width: 0; }
.search-bar button { border: 0; background: var(--green-50); color: var(--green-700); font-size: 9px; padding: 5px 8px; border-radius: 6px; font-weight: 650; }
.cat-scroll { display: flex; gap: 6px; overflow-x: auto; margin: 12px -16px 0; padding: 0 16px; scrollbar-width: none; }
.cat-scroll::-webkit-scrollbar { display: none; }
.cat-scroll button { flex: none; border: 1px solid #e6ece7; background: #fff; color: #78877f; font-size: 9.5px; border-radius: 999px; padding: 5px 10px; }
.cat-scroll button.on { background: var(--green-800); border-color: var(--green-800); color: #fff; font-weight: 600; }
.featured-kn {
  margin-top: 14px; border-radius: 15px; padding: 15px; color: #fff;
  background:
    radial-gradient(220px 120px at 100% 0%, rgba(243,201,142,.25), transparent 70%),
    linear-gradient(140deg, #0f5544, #0b3c30);
  position: relative; overflow: hidden; cursor: pointer;
}
.featured-kn .fk-label { display: inline-flex; align-items: center; gap: 4px; font-size: 8px; color: #f3c98e; border: 1px solid rgba(243,201,142,.2); padding: 3px 7px; border-radius: 999px; }
.featured-kn h3 { font-size: 14.5px; font-weight: 700; line-height: 1.45; margin-top: 10px; max-width: 90%; }
.featured-kn p { font-size: 9px; color: #a9c8ba; line-height: 1.6; margin-top: 6px; max-width: 92%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.featured-kn .fk-meta { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 8.5px; color: #91b6a6; }
.featured-kn .fk-arrow { position: absolute; right: 14px; bottom: 14px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.09); display: flex; align-items: center; justify-content: center; color: #d7e9df; }
.kn-list { display: flex; flex-direction: column; gap: 8px; }
.kn-item { background: #fff; border: 1px solid #e9efeb; border-radius: 13px; padding: 12px; display: flex; gap: 10px; cursor: pointer; }
.kn-thumb { width: 48px; height: 48px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 750; font-family: "STSong", serif; background: var(--green-50); color: var(--green-700); }
.kn-thumb.c1 { background: #eef5f0; color: #2a7a61; }
.kn-thumb.c2 { background: #fbf1e6; color: #b1723c; }
.kn-thumb.c3 { background: #eef2f8; color: #4e7499; }
.kn-thumb.c4 { background: #f8eef1; color: #a65d70; }
.kn-content { flex: 1; min-width: 0; }
.kn-content h4 { font-size: 11.5px; font-weight: 650; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kn-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 8px; color: #9ca8a2; }
.kn-author { color: #7e8d86; }
.kn-stats { display: flex; align-items: center; gap: 7px; font-size: 8px; color: #a4afa9; margin-top: 4px; }
.kn-stats .ic { width: 10px; height: 10px; }
.mine-kn { display: flex; flex-direction: column; gap: 8px; }
.mine-kn-item { background: #fff; border: 1px solid #e9efeb; border-radius: 12px; padding: 12px; }
.mine-kn-item h4 { font-size: 11px; font-weight: 650; }
.mine-kn-item .row { margin-top: 6px; font-size: 8.5px; color: #96a29c; gap: 8px; }

.article { background: #fff; border-radius: 16px; border: 1px solid #e9efeb; padding: 18px 16px; }
.article-cat { display: inline-flex; font-size: 8.5px; color: var(--green-700); background: var(--green-50); border-radius: 5px; padding: 3px 7px; font-weight: 650; }
.article h1 { font-size: 19px; line-height: 1.48; letter-spacing: -.02em; font-weight: 750; margin-top: 9px; }
.article-sub { font-size: 9.5px; color: #93a099; margin-top: 7px; line-height: 1.6; }
.article-author { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-bottom: 14px; border-bottom: 1px solid #eef2ef; }
.article-author .avatar { width: 31px; height: 31px; border-radius: 9px; font-size: 11px; }
.article-author b { font-size: 10px; display: block; }
.article-author span { font-size: 8px; color: #98a59e; display: block; margin-top: 1px; }
.article-author .follow { margin-left: auto; font-size: 8.5px; border: 1px solid #dfe9e3; background: #fff; color: var(--green-700); border-radius: 999px; padding: 4px 9px; }
.article-content { padding-top: 15px; font-size: 11.5px; line-height: 2; color: #3c4d45; }
.article-content p { margin: 0 0 12px; }
.article-content h3 { font-size: 13px; margin: 18px 0 8px; color: var(--ink); }
.article-content blockquote { margin: 14px 0; padding: 10px 12px; border-left: 3px solid var(--green-300, #9bd1bd); background: var(--green-50); border-radius: 0 8px 8px 0; font-size: 10px; color: #567064; line-height: 1.8; }
.article-actions { display: flex; gap: 8px; margin-top: 17px; }
.article-action { flex: 1; border: 1px solid #e5ece7; background: #fff; border-radius: 10px; min-height: 39px; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 9.5px; color: #6d7e75; }
.article-action.on { color: #d96935; border-color: #f4d8c8; background: #fff8f3; }
.earning-note { margin-top: 11px; padding: 10px 12px; border-radius: 10px; background: #fbf6ea; border: 1px solid #f0e7d4; font-size: 8.5px; color: #8e7b52; line-height: 1.65; }

/* ------------------------------- wallet ------------------------------- */
.wallet-card {
  border-radius: 20px;
  padding: 18px;
  color: #fff;
  background:
    radial-gradient(220px 160px at 95% 0%, rgba(243,201,142,.3), transparent 65%),
    linear-gradient(150deg, #105947, #0a3c30);
  position: relative; overflow: hidden;
}
.wallet-card::before { content: ""; position: absolute; right: -36px; bottom: -60px; width: 170px; height: 170px; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); }
.wallet-card::after { content: ""; position: absolute; right: 15px; bottom: -95px; width: 230px; height: 230px; border-radius: 50%; border: 1px solid rgba(255,255,255,.05); }
.wallet-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.wallet-top span { font-size: 9.5px; color: #a9c8ba; letter-spacing: .04em; }
.wallet-top .badge { background: rgba(243,201,142,.12); color: #f3c98e; }
.wallet-points { display: flex; align-items: baseline; gap: 5px; margin-top: 9px; position: relative; z-index: 1; }
.wallet-points b { font-family: var(--num); font-size: 40px; line-height: 1; font-weight: 760; letter-spacing: -.04em; }
.wallet-points span { font-size: 10px; color: #a9c8ba; }
.wallet-convert { font-size: 9px; color: #9dbdaf; margin-top: 7px; position: relative; z-index: 1; }
.wallet-btns { display: flex; gap: 7px; margin-top: 15px; position: relative; z-index: 1; }
.wallet-btns .btn { flex: 1; min-height: 35px; font-size: 10px; border-radius: 9px; }
.wallet-btns .btn-accent { background: #f3c98e; color: #173b2e; box-shadow: none; }
.wallet-btns .btn-glass { background: rgba(255,255,255,.1); color: #e4f3ec; border: 1px solid rgba(255,255,255,.1); }
.wallet-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 10px; }
.wallet-stat { background: #fff; border: 1px solid #e9efeb; border-radius: 11px; padding: 9px; text-align: center; }
.wallet-stat b { display: block; font-size: 14px; font-weight: 750; font-family: var(--num); color: var(--green-800); }
.wallet-stat span { display: block; font-size: 8px; color: #96a29c; margin-top: 2px; }
.line-tabs { display: flex; gap: 17px; border-bottom: 1px solid #e9efeb; margin-top: 18px; }
.line-tabs button { border: 0; background: transparent; padding: 0 0 9px; font-size: 11px; color: #8b9992; position: relative; font-weight: 600; }
.line-tabs button.on { color: var(--green-800); font-weight: 700; }
.line-tabs button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--green-700); border-radius: 2px; }
.tx-list { margin-top: 4px; }
.tx-item { display: flex; align-items: center; gap: 9px; padding: 11px 0; border-bottom: 1px solid #f0f3f1; }
.tx-icon { width: 32px; height: 32px; border-radius: 10px; background: var(--green-50); color: var(--green-700); display: flex; align-items: center; justify-content: center; flex: none; }
.tx-icon.out { background: #fff1e8; color: #d96935; }
.tx-body { flex: 1; min-width: 0; }
.tx-body b { display: block; font-size: 10px; font-weight: 600; }
.tx-body span { display: block; font-size: 8px; color: #a0aba5; margin-top: 2px; }
.tx-value { font-size: 12px; font-weight: 700; font-family: var(--num); }
.tx-value.plus { color: var(--green-700); }
.tx-value.minus { color: #d96935; }
.withdraw-row { background: #fff; border: 1px solid #e9efeb; border-radius: 12px; padding: 12px; margin-top: 8px; }
.withdraw-row .top { display: flex; justify-content: space-between; align-items: center; }
.withdraw-row b { font-size: 11px; }
.withdraw-row .amt { font-size: 14px; font-family: var(--num); font-weight: 750; color: var(--green-800); }
.withdraw-row p { font-size: 8.5px; color: #97a39d; margin-top: 5px; }

/* ------------------------------- membership / expert ------------------------------- */
.member-hero {
  border-radius: 20px; padding: 19px; color: #4e3a18;
  background:
    radial-gradient(220px 140px at 92% 0%, rgba(255,255,255,.65), transparent 64%),
    linear-gradient(140deg, #f8e8c5, #efd49a);
  border: 1px solid #e7c887;
  position: relative; overflow: hidden;
}
.member-hero::after { content: "冠"; position: absolute; right: 12px; bottom: -32px; font-family: "STSong", serif; font-size: 100px; font-weight: 800; color: rgba(116, 81, 24, .06); }
.member-hero .mh-top { display: flex; align-items: center; gap: 7px; font-size: 9px; font-weight: 650; letter-spacing: .05em; color: #8a662c; }
.member-hero h2 { font-size: 19px; font-weight: 730; margin-top: 9px; }
.member-hero p { font-size: 9.5px; color: #8f713c; margin-top: 5px; }
.member-hero .mh-expire { display: inline-flex; align-items: center; gap: 5px; font-size: 8.5px; color: #7b5f2e; background: rgba(255,255,255,.42); border-radius: 999px; padding: 4px 9px; margin-top: 11px; }
.plan-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.plan-card {
  border: 1px solid #e6ece7; background: #fff; border-radius: 13px; padding: 13px;
  display: flex; align-items: center; gap: 11px; position: relative; text-align: left;
  transition: all .15s ease;
}
.plan-card.on { border-color: var(--green-600); background: #fbfffc; box-shadow: 0 0 0 1px var(--green-600) inset; }
.plan-radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #cdd8d1; flex: none; position: relative; }
.plan-card.on .plan-radio { border-color: var(--green-600); background: var(--green-600); }
.plan-card.on .plan-radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.plan-body { flex: 1; }
.plan-body b { font-size: 12px; }
.plan-body span { display: block; font-size: 8.5px; color: #8f9c96; margin-top: 3px; }
.plan-price { text-align: right; }
.plan-price b { font-size: 18px; color: #d96935; font-family: var(--num); font-weight: 760; }
.plan-price b small { font-size: 9px; font-weight: 500; }
.plan-price span { display: block; font-size: 7.5px; color: #a5afa9; }
.plan-rec { position: absolute; right: 11px; top: -1px; font-size: 7.5px; background: #d96935; color: #fff; padding: 2px 6px; border-radius: 0 0 5px 5px; }
.benefit-list { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.benefit-list li { display: flex; align-items: flex-start; gap: 7px; font-size: 10px; color: #61716a; line-height: 1.55; }
.benefit-list .bcheck { width: 14px; height: 14px; border-radius: 50%; background: var(--green-50); color: var(--green-700); display: flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }
.benefit-list .bcheck .ic { width: 9px; height: 9px; }
.pay-note { text-align: center; font-size: 8.5px; color: #a2ada7; margin-top: 8px; line-height: 1.6; }

.expert-hero {
  border-radius: 20px; padding: 18px; color: #fff;
  background:
    radial-gradient(220px 140px at 100% 0%, rgba(107, 176, 214, .26), transparent 65%),
    linear-gradient(145deg, #133f4f, #0b2f39);
  position: relative; overflow: hidden;
}
.expert-hero::after { content: ""; position: absolute; right: -25px; bottom: -50px; width: 140px; height: 140px; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); }
.expert-hero .eh-top { display: flex; align-items: center; gap: 8px; }
.expert-hero .avatar { background: linear-gradient(135deg, #3e8ba8, #1c5a71); width: 44px; height: 44px; border-radius: 14px; }
.expert-hero h2 { font-size: 16px; font-weight: 720; }
.expert-hero .eh-level { font-size: 8.5px; color: #a9d4e6; margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.expert-hero p { font-size: 9px; color: #9dc2d1; margin-top: 12px; line-height: 1.65; }
.expert-hero .eh-stats { display: flex; gap: 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.09); }
.expert-hero .eh-stats b { display: block; font-size: 17px; font-family: var(--num); }
.expert-hero .eh-stats span { font-size: 7.5px; color: #8fb6c6; }
.level-list { display: flex; flex-direction: column; gap: 7px; }
.level-item { background: #fff; border: 1px solid #e9efeb; border-radius: 12px; padding: 12px; display: flex; gap: 10px; align-items: flex-start; }
.level-seal { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; font-size: 14px; font-weight: 720; font-family: "STSong", serif; }
.seal-j { background: #eef5f0; color: #4f8b73; }
.seal-m { background: #eaf2f8; color: #4c7c9e; }
.seal-s { background: #faf0d9; color: #a57a2e; }
.level-item h4 { font-size: 11px; font-weight: 650; display: flex; align-items: center; gap: 5px; }
.level-item p { font-size: 8.5px; color: #94a19a; line-height: 1.55; margin-top: 3px; }
.deposit-card { background: #fff; border: 1px solid #e9efeb; border-radius: 14px; padding: 14px; }
.deposit-top { display: flex; align-items: center; gap: 8px; }
.deposit-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--green-50); color: var(--green-700); display: flex; align-items: center; justify-content: center; }
.deposit-card h4 { font-size: 11px; font-weight: 680; }
.deposit-card .sub { font-size: 8.5px; color: #93a099; margin-top: 2px; }
.deposit-amount { margin-left: auto; text-align: right; }
.deposit-amount b { display: block; font-size: 17px; font-family: var(--num); font-weight: 760; color: var(--green-800); }
.deposit-amount span { font-size: 7.5px; color: #a0aba5; }
.help-row { background: #fff; border: 1px solid #e9efeb; border-radius: 12px; padding: 11px 12px; margin-bottom: 7px; }
.help-row .top { display: flex; align-items: center; gap: 6px; font-size: 9px; color: #84938c; }
.help-row .top b { font-size: 10.5px; color: var(--ink); }
.help-row p { font-size: 9px; color: #7d8d85; line-height: 1.6; margin-top: 5px; }

/* application progress */
.apply-state { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 12px; background: #fbf6ea; border: 1px solid #efe3c9; }
.apply-state .as-icon { width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #b88735; display: flex; align-items: center; justify-content: center; flex: none; }
.apply-state h4 { font-size: 11px; font-weight: 680; color: #6f552b; }
.apply-state p { font-size: 8.5px; color: #9b8359; margin-top: 3px; line-height: 1.55; }

/* upload */
.upload-box { border: 1px dashed #cddcd4; background: #fafcf9; border-radius: 12px; padding: 20px 12px; text-align: center; color: #87968e; }
.upload-box .ic { color: var(--green-600); }
.upload-box b { display: block; font-size: 10.5px; color: #51645a; margin-top: 7px; }
.upload-box span { display: block; font-size: 8.5px; color: #9ca8a2; margin-top: 3px; }

/* ------------------------------- messages / settings ------------------------------- */
.msg-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; font-size: 9px; color: #8d9a93; }
.msg-list { display: flex; flex-direction: column; gap: 7px; }
.msg-item { display: flex; gap: 10px; background: #fff; border: 1px solid #e9efeb; border-radius: 13px; padding: 12px; position: relative; cursor: pointer; }
.msg-item.unread { border-color: #d9e9df; background: #fcfffd; }
.msg-item.unread::after { content: ""; position: absolute; right: 11px; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: #ec6a43; }
.msg-icon { width: 35px; height: 35px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; background: var(--green-50); color: var(--green-700); }
.msg-icon.order { background: #eaf2f8; color: #437e9f; }
.msg-icon.credit { background: #faf0d9; color: #a57a2e; }
.msg-icon.wallet { background: #fff0e6; color: #d96935; }
.msg-icon.expert { background: #eef2f8; color: #5d759c; }
.msg-body { flex: 1; min-width: 0; padding-right: 8px; }
.msg-body .top { display: flex; align-items: center; gap: 7px; }
.msg-body b { font-size: 10.5px; font-weight: 650; }
.msg-time { font-size: 7.5px; color: #acb6b1; margin-left: auto; }
.msg-body p { font-size: 8.5px; color: #8b9992; line-height: 1.6; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.profile-card { background: #fff; border: 1px solid #e9efeb; border-radius: 16px; padding: 16px; display: flex; align-items: center; gap: 11px; }
.profile-card .avatar { width: 50px; height: 50px; border-radius: 16px; font-size: 19px; }
.profile-card h2 { font-size: 16px; font-weight: 720; display: flex; align-items: center; gap: 5px; }
.profile-card p { font-size: 9px; color: #91a099; margin-top: 3px; }
.profile-card .edit-profile { margin-left: auto; border: 1px solid #e2eae5; background: #fff; color: #6f7f77; border-radius: 8px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.profile-badges { display: flex; gap: 5px; margin-top: 7px; }
.setting-group { background: #fff; border: 1px solid #e9efeb; border-radius: 14px; overflow: hidden; margin-top: 10px; }
.setting-row { display: flex; align-items: center; gap: 10px; padding: 12px 13px; border-bottom: 1px solid #f1f4f2; cursor: pointer; }
.setting-row:last-child { border-bottom: 0; }
.setting-row .sr-icon { width: 28px; height: 28px; border-radius: 8px; background: #f2f6f3; color: #5f7d6e; display: flex; align-items: center; justify-content: center; }
.setting-row b { flex: 1; font-size: 10.5px; font-weight: 550; color: #3b4c44; }
.setting-row .val { font-size: 9px; color: #a1aca6; }
.setting-row .ic.chev { color: #c1cbc6; width: 14px; height: 14px; }
.setting-note { font-size: 8px; color: #a9b3ae; text-align: center; line-height: 1.8; margin: 16px 0 4px; }
.legal { background: #fff; border-radius: 15px; border: 1px solid #e9efeb; padding: 18px 16px; font-size: 10.5px; line-height: 1.95; color: #53655c; }
.legal h1 { font-size: 17px; font-weight: 730; color: var(--ink); margin-bottom: 3px; }
.legal .updated { font-size: 8px; color: #a4aea8; margin-bottom: 14px; }
.legal h3 { font-size: 11.5px; margin: 16px 0 5px; color: var(--ink); }
.legal p { margin-bottom: 8px; }

/* ------------------------------- match result ------------------------------- */
.match-banner {
  border-radius: 16px; padding: 16px; color: #fff;
  background:
    radial-gradient(200px 110px at 100% 0%, rgba(243,201,142,.25), transparent 65%),
    linear-gradient(145deg, #105947, #0a3a2f);
}
.match-banner .mb-top { display: flex; align-items: center; gap: 6px; font-size: 9px; color: #a9c8ba; }
.match-banner h2 { font-size: 17px; font-weight: 720; margin-top: 8px; }
.match-banner p { font-size: 9px; color: #a5c5b6; line-height: 1.65; margin-top: 5px; }
.radius-track { display: flex; align-items: center; gap: 3px; margin-top: 13px; }
.radius-track span { font-size: 7px; color: #7fa697; flex: 1; text-align: center; padding: 4px 0; border-radius: 5px; background: rgba(255,255,255,.05); }
.radius-track span.on { background: #f3c98e; color: #183c2f; font-weight: 700; }
.match-card { background: #fff; border: 1px solid #e9efeb; border-radius: 15px; padding: 13px; margin-top: 9px; }
.match-head { display: flex; gap: 9px; align-items: flex-start; }
.match-head .avatar { width: 40px; height: 40px; border-radius: 12px; font-size: 15px; }
.match-head h4 { font-size: 12px; font-weight: 680; display: flex; align-items: center; gap: 4px; }
.match-head p { font-size: 8.5px; color: #8f9d96; margin-top: 3px; }
.match-score { margin-left: auto; text-align: center; }
.match-score b { display: block; font-size: 18px; font-family: var(--num); color: var(--green-700); font-weight: 760; line-height: 1; }
.match-score span { font-size: 6.5px; color: #a7b2ac; }
.match-reasons { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.match-reasons .tag { font-size: 8px; height: 19px; background: #f4f8f5; color: #628070; }
.match-service { background: #fafcf9; border-radius: 8px; padding: 8px 9px; font-size: 9px; color: #74857c; margin-top: 9px; display: flex; align-items: center; gap: 6px; }
.match-service b { color: #43564b; font-weight: 600; }
.match-service .price { margin-left: auto; color: #d96935; font-family: var(--num); font-weight: 700; }
.match-action { display: flex; gap: 6px; margin-top: 10px; }
.match-action .btn { flex: 1; min-height: 32px; font-size: 9.5px; border-radius: 8px; }
.privacy-note { display: flex; align-items: center; gap: 6px; font-size: 8px; color: #92a099; background: #f7faf8; border-radius: 8px; padding: 8px 10px; margin-top: 10px; line-height: 1.5; }

/* modal specifics */
.modal .option-list { display: flex; flex-direction: column; gap: 7px; }
.modal .option {
  border: 1px solid #e5ece7; border-radius: 10px; padding: 11px 12px; background: #fff;
  display: flex; align-items: center; gap: 9px; text-align: left;
}
.modal .option.on { border-color: var(--green-600); background: var(--green-50); }
.modal .option b { font-size: 11px; }
.modal .option span { font-size: 8.5px; color: #8f9c96; margin-left: auto; }
.modal .option .ic { color: var(--green-700); }
.star-picker { display: flex; gap: 8px; justify-content: center; padding: 4px 0 10px; }
.star-picker button { border: 0; background: transparent; color: #dce3df; padding: 0; transition: transform .15s ease; }
.star-picker button.on { color: #d9a957; transform: scale(1.06); }
.star-picker .ic { width: 30px; height: 30px; }
.modal .kv { display: flex; justify-content: space-between; font-size: 10.5px; padding: 5px 0; }
.modal .kv span { color: #8b9a93; }
.modal .kv b { font-weight: 650; }
.success-mark { width: 58px; height: 58px; border-radius: 50%; background: var(--green-50); color: var(--green-700); display: flex; align-items: center; justify-content: center; margin: 2px auto 12px; }

@media (max-width: 1080px) {
  .stage { gap: 40px; padding: 24px 40px; }
  .pitch { width: min(480px, 45vw); }
  .pitch-copy h1 { font-size: 44px; }
  .map-art { height: 190px; }
}

@media (max-width: 900px) {
  body { overflow: auto; background: var(--bg); }
  body::before { display: none; }
  .stage { display: block; padding: 0; min-height: 100dvh; max-width: none; }
  .pitch { display: none; }
  .phone-wrap { width: 100%; min-height: 100dvh; gap: 0; }
  .phone {
    width: 100%; height: 100dvh; min-height: 620px; border-radius: 0; padding: 0;
    background: var(--bg); box-shadow: none;
  }
  .phone::before, .phone::after { display: none; }
  .phone-screen { border-radius: 0; }
  .phone-island { display: none; }
  .phone-caption { display: none; }
  .statusbar { padding-top: env(safe-area-inset-top); height: calc(30px + env(safe-area-inset-top)); }
  .tabbar { height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar button { height: 52px; }
  .main-scroll { -webkit-overflow-scrolling: touch; }
}