/* ============================================================
 * COS 萌新指南 —— 样式表
 * ============================================================ */

/* 关键：全屏浮层一旦写了 display:flex，[hidden] 必须强制生效 */
[hidden] { display: none !important; }

:root {
  --pink:        #ff7fb6;
  --pink-soft:   #ffd3e6;
  --purple:      #a97bff;
  --purple-soft: #e3d7ff;
  --blue-soft:   #cfe4ff;
  --ink:         #2b2233;
  --ink-2:       #5c5268;
  --ink-3:       #8b8195;
  --line:        rgba(120, 90, 140, .14);
  --card:        rgba(255, 255, 255, .78);
  --card-solid:  #fffdfe;
  --bg:          #fdf7fb;
  --radius:      20px;
  --radius-sm:   14px;
  --shadow:      0 10px 30px -12px rgba(140, 90, 160, .28);
  --shadow-lg:   0 24px 60px -20px rgba(140, 90, 160, .38);
  --serif:       "Georgia", "Times New Roman", "Songti SC", "SimSun", serif;
  --sans:        -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- 背景光晕 ---------- */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60vw 50vw at 12% 8%,  rgba(255, 180, 214, .55), transparent 62%),
    radial-gradient(55vw 45vw at 92% 12%, rgba(186, 160, 255, .48), transparent 60%),
    radial-gradient(70vw 55vw at 50% 100%, rgba(168, 214, 255, .40), transparent 65%),
    linear-gradient(180deg, #fff8fc 0%, #fdf7fb 45%, #f7f4ff 100%);
}

/* ---------- 顶部导航 ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(255, 252, 254, .78);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  /* 二级行（导师组的小标题）要能折到第二排，所以允许换行；
     但行间距单独压掉，间距由 .nav-subrow 自己控制 */
  flex-wrap: wrap;
  row-gap: 0;
  gap: 18px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.brand-dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  box-shadow: 0 6px 16px -6px var(--pink);
  position: relative;
}
.brand-dot::after {
  content: "";
  position: absolute; inset: 9px;
  border-radius: 50%;
  background: #fff;
  opacity: .9;
}
.brand-txt { font-weight: 800; font-size: 17px; letter-spacing: .3px; }
.brand-txt small {
  display: block;
  font-family: var(--serif);
  font-size: 10px;
  letter-spacing: 1.6px;
  color: var(--ink-3);
  font-weight: 400;
  margin-top: -4px;
  text-transform: uppercase;
}
.nav-links {
  display: flex;
  gap: 4px;
  margin-left: auto;
  flex-wrap: wrap;
}
.nav-links button {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink-2);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: .18s;
  white-space: nowrap;
}
.nav-links button:hover { background: rgba(169, 123, 255, .10); color: var(--ink); }
.nav-links button.on {
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff;
  box-shadow: 0 8px 18px -8px var(--purple);
}

/* ---------- 二级导航：导师组的小标题 ----------
   一级是 .nav-links 里的大标题，这几条跟着排在第二排、字号小一档。
   只在停留在「导师 / 六步 / 装备 / 避坑」时由 js/app.js 把 hidden 摘掉。 */
.nav-subrow {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: flex-end;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.nav-subrow button {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--ink-3);
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: .18s;
  white-space: nowrap;
}
.nav-subrow button::before {
  content: "·";
  margin-right: 6px;
  opacity: .5;
}
.nav-subrow button:hover { background: rgba(169, 123, 255, .10); color: var(--ink); }
.nav-subrow button.on {
  background: rgba(169, 123, 255, .13);
  color: var(--purple);
  font-weight: 700;
  box-shadow: none;
}

/* ---------- 页面容器 ---------- */
.page { display: none; }
.page.on { display: block; animation: fadeUp .38s ease both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

/* ---------- 首页 HERO ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 54px 0 26px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-family: var(--serif);
  color: var(--purple);
  background: rgba(169, 123, 255, .12);
  border: 1px solid rgba(169, 123, 255, .22);
  padding: 7px 15px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.hero h1 {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.16;
  margin: 0 0 16px;
  letter-spacing: -1px;
  font-weight: 900;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--pink), var(--purple) 60%, #7cb8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lead {
  font-size: 17px;
  color: var(--ink-2);
  margin: 0 0 14px;
  max-width: 460px;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

.btn {
  border: 0;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 999px;
  cursor: pointer;
  transition: .2s;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
}
.btn-primary {
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(169, 123, 255, .85);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -14px rgba(169, 123, 255, .95); }
.btn-ghost {
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.btn-ghost:hover { transform: translateY(-2px); border-color: rgba(169, 123, 255, .45); }
.btn-sm { padding: 9px 16px; font-size: 13.5px; }

/* 看板娘 */
.mascot {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(150deg, #ffeaf5, #e9dcff 55%, #dbe9ff);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 3 / 2;
  border: 1px solid rgba(255, 255, 255, .7);
}
.mascot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 遮住生成图右下角的水印 */
.mascot::after {
  content: "小织 · 你的装备管家";
  position: absolute;
  right: 14px; bottom: 14px;
  font-size: 11.5px;
  letter-spacing: .6px;
  color: #fff;
  background: rgba(70, 40, 95, .55);
  backdrop-filter: blur(6px);
  padding: 6px 13px;
  border-radius: 999px;
  font-family: var(--serif);
}
.mascot-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: var(--ink-3);
  font-size: 14px;
}

.float-card {
  position: absolute;
  left: -14px;
  bottom: 26px;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, .9);
  animation: bob 4.2s ease-in-out infinite;
}
.float-card b { display: block; font-size: 15px; }
.float-card span { font-size: 12px; color: var(--ink-3); }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ---------- 区块标题 ---------- */
.sec { padding: 44px 0 10px; }
.sec-head { margin-bottom: 26px; }
.sec-head h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 8px;
  letter-spacing: -.5px;
  font-weight: 900;
}
.sec-head p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.sec-head .en {
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 2.4px;
  color: var(--purple);
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}

/* ---------- 首页入口卡 ---------- */
.entry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.entry {
  background: var(--card);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: var(--radius);
  padding: 22px;
  cursor: pointer;
  transition: .22s;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  text-align: left;
  font: inherit;
  color: inherit;
}
.entry:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.entry:hover .entry-ico { transform: rotate(-8deg) scale(1.06); }
.entry-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.entry-ico {
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--pink-soft), var(--purple-soft));
  transition: .25s;
  flex-shrink: 0;
}
.entry-ico svg { width: 23px; height: 23px; stroke: #7b4d99; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.entry-tag {
  margin-left: auto;
  font-size: 11px;
  font-family: var(--serif);
  color: var(--purple);
  background: rgba(169, 123, 255, .12);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.entry h3 { margin: 0 0 5px; font-size: 17px; }
.entry p { margin: 0; font-size: 13.5px; color: var(--ink-3); }

/* ---------- 通用卡片 ---------- */
.card {
  background: var(--card-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

/* ---------- 步骤页 ---------- */
.stepbar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 16px 0 22px;
  scrollbar-width: thin;
}
.stepbar button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .82);
  font: inherit;
  font-size: 13.5px;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--ink-2);
  transition: .18s;
  flex-shrink: 0;
}
.stepbar button:hover { border-color: rgba(169, 123, 255, .5); color: var(--ink); }
.stepbar button.on {
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 20px -10px var(--purple);
}

.step-hero {
  border-radius: var(--radius);
  padding: 30px 32px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  margin-bottom: 22px;
}
.step-hero .no {
  font-family: var(--serif);
  letter-spacing: 3px;
  font-size: 12px;
  opacity: .85;
}
.step-hero h2 { margin: 6px 0 8px; font-size: clamp(24px, 3.4vw, 34px); font-weight: 900; letter-spacing: -.5px; }
.step-hero p { margin: 0; opacity: .92; font-size: 15.5px; }
.step-hero::after {
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
}
.c-a { background: linear-gradient(135deg, #ff8fbb, #d18bff); }
.c-b { background: linear-gradient(135deg, #b18bff, #7fa8ff); }
.c-c { background: linear-gradient(135deg, #ffa06b, #ff7fa8); }
.c-d { background: linear-gradient(135deg, #ff7fa8, #b06bff); }
.c-e { background: linear-gradient(135deg, #6bc4ff, #a97bff); }
.c-f { background: linear-gradient(135deg, #7fd4b0, #57b8e8); }

.step-body { display: grid; gap: 16px; }

/* 对比：能做 / 别做 */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.duo .col { border-radius: var(--radius); padding: 22px; border: 1px solid var(--line); background: var(--card-solid); box-shadow: var(--shadow); }
.duo .col h4 { margin: 0 0 14px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.duo .col.good { background: linear-gradient(180deg, #f2fff8, #fff); border-color: rgba(80, 190, 140, .3); }
.duo .col.bad  { background: linear-gradient(180deg, #fff4f6, #fff); border-color: rgba(240, 120, 150, .3); }
.chk { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.chk li { position: relative; padding-left: 28px; font-size: 14.5px; color: var(--ink-2); }
.chk li::before {
  position: absolute; left: 0; top: 0;
  width: 19px; height: 19px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
.good .chk li::before { content: "✓"; background: linear-gradient(135deg, #5fd39b, #38b98a); }
.bad  .chk li::before { content: "✕"; background: linear-gradient(135deg, #ffa1b8, #ef6b95); }

/* 路线条 */
.route { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.route .node {
  background: linear-gradient(135deg, var(--pink-soft), var(--purple-soft));
  border-radius: 999px;
  padding: 9px 20px;
  font-weight: 700;
  font-size: 14.5px;
  color: #6b3d8f;
}
.route .arrow { color: var(--ink-3); font-size: 15px; }

/* 明细清单 */
.dlist { display: grid; gap: 2px; }
.dlist .row {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 13px 4px;
  border-bottom: 1px dashed var(--line);
  font-size: 14.5px;
}
.dlist .row:last-child { border-bottom: 0; }
.dlist .k { font-weight: 700; }
.dlist .v { color: var(--ink-2); }
.dlist .n {
  font-size: 11.5px;
  color: var(--purple);
  background: rgba(169, 123, 255, .12);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

/* 提示条 */
.tipbar {
  border-left: 4px solid var(--purple);
  background: linear-gradient(90deg, rgba(169, 123, 255, .10), transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 20px;
  font-size: 14.5px;
  color: var(--ink-2);
}
.warnbar {
  border-left: 4px solid #ff9a6b;
  background: linear-gradient(90deg, rgba(255, 154, 107, .12), transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 20px;
}
.warnbar h4 { margin: 0 0 10px; font-size: 15px; }
.warnbar ul { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 14.5px; }

.packgrid { display: flex; flex-wrap: wrap; gap: 9px; }
.packgrid span {
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 13.5px;
  color: var(--ink-2);
}

/* 预算 */
.bud-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bud {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  background: var(--card-solid);
  box-shadow: var(--shadow);
  position: relative;
  transition: .22s;
}
.bud:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.bud.hot { border-color: rgba(169, 123, 255, .55); background: linear-gradient(180deg, #fdf6ff, #fff); }
.bud.hot::before {
  content: "最多人选";
  position: absolute; top: -11px; right: 18px;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff;
  font-size: 11.5px;
  padding: 4px 12px;
  border-radius: 999px;
}
.bud .tier { font-weight: 800; font-size: 17px; }
.bud .price {
  font-family: var(--serif);
  font-size: 30px;
  margin: 8px 0 4px;
  background: linear-gradient(120deg, var(--pink), var(--purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bud .price small { font-size: 14px; color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }
.bud ul { margin: 14px 0 0; padding-left: 19px; font-size: 14px; color: var(--ink-2); }
.bud .fit { margin-top: 14px; font-size: 13px; color: var(--ink-3); border-top: 1px dashed var(--line); padding-top: 12px; }

/* 避坑 */
.pit { display: grid; gap: 12px; }
.pit .it {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  background: var(--card-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}
.pit .num {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #ffc2d8, #d9c2ff);
  color: #7b3f8f;
  font-weight: 800;
  font-size: 14px;
}
.pit h4 { margin: 0 0 5px; font-size: 15.5px; }
.pit p { margin: 0; font-size: 14px; color: var(--ink-2); }

/* ---------- 老师图鉴 ---------- */
.t-search {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.t-search input {
  flex: 1;
  min-width: 220px;
  font: inherit;
  padding: 13px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .9);
  outline: none;
  transition: .2s;
}
.t-search input:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(169, 123, 255, .14); }

.tagrow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.tagrow button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .85);
  font: inherit;
  font-size: 13px;
  padding: 7px 15px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink-2);
  transition: .18s;
}
.tagrow button:hover { border-color: var(--purple); color: var(--purple); transform: translateY(-1px); }

.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tcard {
  background: var(--card-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: .22s;
  display: flex;
  flex-direction: column;
}
.tcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.tphoto {
  aspect-ratio: 4 / 5;
  background: linear-gradient(150deg, #ffeaf5, #e9dcff 60%, #dbe9ff);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.tphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tph-empty {
  text-align: center;
  color: #8a6ba8;
  padding: 16px;
}
.tph-empty svg { width: 46px; height: 46px; stroke: #a583c9; fill: none; stroke-width: 1.6; opacity: .8; }
.tph-empty span { display: block; font-size: 12.5px; margin-top: 8px; opacity: .85; }
.tphoto .role-chip {
  position: absolute;
  left: 12px; top: 12px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  font-size: 11.5px;
  padding: 5px 12px;
  border-radius: 999px;
  color: #7b3f8f;
  font-weight: 700;
}
.tinfo { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.tinfo h3 { margin: 0 0 6px; font-size: 16.5px; }
.tinfo .role { font-size: 13px; color: var(--ink-3); margin: 0 0 12px; }
.tstyles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tstyles span {
  font-size: 11.5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(169, 123, 255, .11);
  color: #7b4d99;
}
.tbtns { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.tbtns .btn { padding: 9px 15px; font-size: 13px; flex: 1; justify-content: center; min-width: 0; }

.empty-note {
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--ink-3);
  background: rgba(255, 255, 255, .7);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
}
.empty-note code {
  font-family: var(--serif);
  background: rgba(169, 123, 255, .12);
  padding: 2px 7px;
  border-radius: 5px;
  color: #7b4d99;
}

/* ---------- 装备 / 链接 ---------- */
.gear-group { margin-bottom: 34px; }
.gear-group > h3 {
  font-size: 18px;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.gear-group > h3 .gi {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--pink-soft), var(--purple-soft));
}
.gear-group > h3 .gi svg { width: 18px; height: 18px; stroke: #7b4d99; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.gear-list { display: grid; gap: 12px; }
.gitem {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  background: var(--card-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  box-shadow: var(--shadow);
  transition: .2s;
}
.gitem:hover { border-color: rgba(169, 123, 255, .4); }
.gitem h4 { margin: 0 0 5px; font-size: 15.5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gitem .price {
  font-family: var(--serif);
  font-size: 13px;
  color: #7b4d99;
  background: rgba(169, 123, 255, .11);
  padding: 3px 11px;
  border-radius: 999px;
}
.gitem p { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.gact { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.link-state {
  font-size: 12px;
  color: var(--ink-3);
  display: block;
  margin-top: 6px;
}
.link-state.ok { color: #2f9d6e; }

/* ---------- 自定义弹窗 ---------- */
.mask {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(50, 30, 70, .38);
  backdrop-filter: blur(5px);
  padding: 20px;
  animation: fadeIn .18s ease both;
  /* 申请角色那张表单比手机屏高，遮罩要能滚，否则底部按钮点不到 */
  overflow-y: auto;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.dlg {
  width: 100%;
  max-width: 470px;
  background: #fff;
  border-radius: 22px;
  padding: 26px;
  box-shadow: 0 30px 70px -20px rgba(60, 30, 90, .5);
  animation: pop .22s cubic-bezier(.2, .9, .3, 1.3) both;
}
@keyframes pop { from { transform: scale(.94) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.dlg h3 { margin: 0 0 8px; font-size: 18px; }
.dlg .sub { margin: 0 0 18px; font-size: 13.5px; color: var(--ink-3); }
.dlg label { display: block; font-size: 13px; font-weight: 700; margin: 14px 0 7px; color: var(--ink-2); }
.dlg input, .dlg textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 12px 15px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fbf8fd;
  outline: none;
  resize: vertical;
}
.dlg input:focus, .dlg textarea:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(169, 123, 255, .14); }
.dlg select {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 12px 15px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fbf8fd;
  outline: none;
}
.dlg select:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(169, 123, 255, .14); }
.dlg label b { color: #d94f8a; font-weight: 700; }
.dlg-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dlg-2col label { margin-top: 14px; }
.dlg-actions { display: flex; gap: 10px; margin-top: 24px; justify-content: flex-end; }
.dlg-actions .btn { padding: 11px 22px; font-size: 14px; }

/* 角色墙搜索框右边的「添加角色」按钮 */
.btn-addrole {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #a97bff, #7b5bff);
  border: none;
  border-radius: 999px;
  padding: 11px 18px;
  cursor: pointer;
  box-shadow: 0 8px 18px -8px rgba(123, 91, 255, .8);
  transition: transform .16s ease, box-shadow .16s ease;
}
.btn-addrole svg { width: 16px; height: 16px; }
.btn-addrole:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -8px rgba(123, 91, 255, .9); }
.btn-addrole:active { transform: translateY(0); }

/* toast */
#toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%) translateY(20px);
  background: rgba(45, 28, 62, .92);
  color: #fff;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: .28s;
  z-index: 300;
  backdrop-filter: blur(8px);
  max-width: 88vw;
  text-align: center;
}
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 页脚 ---------- */
footer {
  margin-top: 70px;
  border-top: 1px solid var(--line);
  padding: 34px 0 44px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
}
footer .fs {
  font-family: var(--serif);
  letter-spacing: 2px;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 8px;
}

/* ---------- 页脚：合规三件套的入口（2026-09-23）---------- */
.foot-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.foot-links button {
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--purple);
  cursor: pointer;
  padding: 4px 2px;
}
.foot-links button:hover { text-decoration: underline; }
.foot-dot { color: var(--line-2, #d9cfe6); }
.foot-note {
  margin: 10px auto 0;
  max-width: 560px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-3);
}

/* 通用弹窗要压过详情浮层：两者都是 .mask（z-index 200），而 postMask 在 DOM 里
   排在 modalMask 后面，同层级下会盖住它 —— 举报弹窗正是从详情浮层里打开的，
   不抬上来就点不到「提交」。 */
#modalMask { z-index: 250; }

/* ---------- 用户协议 / 隐私政策正文 ---------- */
.legal {
  max-width: 760px;
  margin: 0 auto;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-2);
}
.legal h3 {
  font-size: 16px;
  margin: 26px 0 8px;
  color: var(--ink);
}
.legal h3:first-child { margin-top: 0; }
.legal p { margin: 0 0 10px; }
.legal ul { margin: 0 0 10px; padding-left: 22px; }
.legal li { margin-bottom: 5px; }
.legal b { color: var(--ink); }

@media (max-width: 640px) {
  .legal { font-size: 14px; }
}

/* ============================================================
 * 角色墙（淘宝商品列表那味儿）
 * ============================================================ */

.rfilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.rfilter button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .85);
  font: inherit;
  font-size: 13.5px;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink-2);
  transition: .18s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.rfilter button i {
  font-style: normal;
  font-size: 11px;
  background: rgba(140, 110, 170, .14);
  padding: 1px 7px;
  border-radius: 999px;
}
.rfilter button:hover { border-color: var(--purple); color: var(--purple); }
.rfilter button.on {
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px -8px var(--purple);
}
.rfilter button.on i { background: rgba(255, 255, 255, .3); color: #fff; }

/* 搜索框 + 计数（角色墙顶部工具条） */
.wall-tools {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 22px 0 14px;
}
.rsearch {
  position: relative; display: flex; align-items: center;
  flex: 1 1 320px; max-width: 460px;
}
.rsearch svg {
  position: absolute; left: 14px; width: 17px; height: 17px;
  color: #a583c9; pointer-events: none;
}
.rsearch input {
  width: 100%; font: inherit; font-size: 14px;
  padding: 11px 38px 11px 40px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: var(--ink); outline: none; transition: .18s;
}
.rsearch input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(169, 123, 255, .16); }
.rsearch input::placeholder { color: #b3a0c4; }
.rclear {
  position: absolute; right: 10px;
  width: 22px; height: 22px; line-height: 20px;
  border: 0; border-radius: 50%;
  background: rgba(140, 110, 170, .16);
  color: var(--ink-2); font-size: 15px; cursor: pointer;
}
.rclear:hover { background: rgba(140, 110, 170, .3); }
.rcount { font-size: 13px; color: var(--ink-3); }

/* 题材分类按钮（第二排） */
.rcat { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.rcat button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .8);
  font: inherit; font-size: 13px;
  padding: 7px 14px; border-radius: 999px;
  cursor: pointer; color: var(--ink-2); transition: .18s;
  display: inline-flex; align-items: center; gap: 6px;
}
.rcat button i {
  font-style: normal; font-size: 11px;
  background: rgba(140, 110, 170, .12);
  padding: 1px 6px; border-radius: 999px;
}
.rcat button:hover { border-color: var(--pink); color: var(--pink); }
.rcat button.on {
  background: linear-gradient(135deg, var(--purple), var(--pink));
  color: #fff; border-color: transparent;
  box-shadow: 0 8px 18px -9px var(--purple);
}
.rcat button.on i { background: rgba(255, 255, 255, .3); color: #fff; }

.rempty {
  padding: 40px 20px; text-align: center;
  color: var(--ink-3); font-size: 14.5px;
  border: 1px dashed var(--line); border-radius: 16px;
  background: rgba(255, 255, 255, .6);
}

.rgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.rcard {
  padding: 0;
  border: 1px solid var(--line);
  background: var(--card-solid);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  transition: .22s;
}
.rcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(169, 123, 255, .45); }
.rcard:hover .rphoto img { transform: scale(1.04); }
.rphoto {
  aspect-ratio: 3 / 4;
  position: relative;
  background: linear-gradient(150deg, #ffeaf5, #e9dcff 55%, #dbe9ff);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.rphoto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: .4s; }
.rph { text-align: center; color: #8a6ba8; }
.rph svg { width: 54px; height: 54px; stroke: #a583c9; fill: none; stroke-width: 1.5; stroke-linecap: round; }
.rph span { display: block; font-size: 12.5px; margin-top: 6px; opacity: .85; }
.rlv {
  position: absolute;
  left: 10px; top: 10px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  color: #fff;
  letter-spacing: .4px;
}
.lv-a { background: linear-gradient(135deg, #5fd39b, #38b98a); }
.lv-b { background: linear-gradient(135deg, #ffa63d, #ff7a59); }
.lv-c { background: linear-gradient(135deg, #a97bff, #7b5bff); }
/* 社区申请、后台审核通过才上的角色，标一下来源 */
.rnew {
  position: absolute;
  right: 10px; top: 10px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #ff7ab8, #d94f8a);
}

.rbody { padding: 15px 16px 17px; display: flex; flex-direction: column; flex: 1; }
.rbody h3 { margin: 0 0 4px; font-size: 16px; letter-spacing: -.2px; }
.rfrom { margin: 0 0 11px; font-size: 12.5px; color: var(--ink-3); }
.rtags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 13px; }
.rtags span {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(169, 123, 255, .11);
  color: #7b4d99;
}
.rfoot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 11px;
  border-top: 1px dashed var(--line);
}
.rprice { font-family: var(--serif); font-size: 14px; color: #d94f8a; font-weight: 700; }
.rdiff { font-size: 11.5px; color: #f0a13c; letter-spacing: 1px; }

/* 角色卡片上的「人物名言」：取代原来的价格位，两行截断，完整内容走 title */
.rquote {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.55;
  color: #6b5b7b;
  margin: 0 0 12px;
  padding: 8px 11px;
  border-left: 2px solid rgba(169, 123, 255, .45);
  background: rgba(169, 123, 255, .055);
  border-radius: 0 8px 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 40px;
}
.rquote i { color: var(--ink-3); font-style: normal; font-size: 12px; }
/* 分档小标签（入门 / 进阶 / 挑战），占原来价格那个位 */
.rfrom2 {
  font-size: 11.5px;
  color: var(--ink-3);
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .045);
}

/* ---------- 角色详情页 ---------- */
.rd-hero {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 34px;
  align-items: start;
  padding: 18px 0 10px;
}
.rd-figure {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: linear-gradient(150deg, #ffeaf5, #e9dcff 55%, #dbe9ff);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, .7);
}
.rd-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-figbtn { position: absolute; right: 12px; bottom: 12px; }

.rd-info { padding-top: 6px; }
.rd-info > .en {
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 2.4px;
  color: var(--purple);
  text-transform: uppercase;
}
.rd-info h1 { margin: 6px 0 4px; font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -1px; font-weight: 900; }
.rd-from { margin: 0 0 20px; color: var(--ink-3); font-size: 14.5px; }
.rd-quote {
  margin: -6px 0 20px;
  padding: 13px 18px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  color: #5c4a6e;
  background: rgba(169, 123, 255, .09);
  border-left: 3px solid #a97bff;
  border-radius: 0 12px 12px 0;
}
.rd-meta { display: grid; gap: 10px; margin-bottom: 18px; }
.rd-meta > div {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  padding: 11px 16px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.rd-meta b { color: var(--ink-2); font-weight: 700; min-width: 74px; }
.rd-meta .stars { color: #f0a13c; letter-spacing: 2px; font-size: 13px; }
.rd-look {
  margin: 0 0 22px;
  font-size: 14.5px;
  color: var(--ink-2);
  background: rgba(169, 123, 255, .09);
  border-radius: var(--radius-sm);
  padding: 15px 18px;
}
.rd-look b { color: var(--ink); }
.rd-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* 参考图格 */
.refgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.refslot {
  padding: 0;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  border: 1px dashed rgba(169, 123, 255, .45);
  background: rgba(255, 255, 255, .6);
  cursor: pointer;
  font: inherit;
  color: var(--ink-3);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  overflow: hidden;
  transition: .2s;
}
.refslot:hover { border-color: var(--purple); background: rgba(169, 123, 255, .09); }
.refslot span { font-size: 26px; color: var(--purple); line-height: 1; }
.refslot em { font-style: normal; font-size: 12.5px; }
.refslot.has { border-style: solid; border-color: var(--line); }
.refslot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 参考图：不再放大图格子，改成跳社区该角色筛选页的入口条 */
.refjump {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 20px 22px;
  border-radius: var(--radius);
  border: 1px dashed rgba(169, 123, 255, .45);
  background: rgba(169, 123, 255, .05);
}
.refjump-i { display: grid; gap: 5px; min-width: 240px; flex: 1 1 260px; }
.refjump-i b { font-size: 19px; color: var(--ink); }
.refjump-i span { font-size: 13.2px; color: var(--ink-3); line-height: 1.6; }
.refjump-a { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* 社区页：从角色详情页跳过来时的筛选提示条 */
.rolebar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 11px 15px;
  border-radius: var(--radius);
  border: 1px solid rgba(169, 123, 255, .32);
  background: rgba(169, 123, 255, .08);
}
.rolebar-t { font-size: 13.5px; color: var(--ink-3); }
.rolebar-t b { color: var(--purple); }
.rolebar-x {
  font: inherit; font-size: 12.5px; color: var(--ink-3);
  background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px; cursor: pointer; transition: .2s;
}
.rolebar-x:hover { border-color: var(--purple); color: var(--purple); }

.linklike { color: var(--purple); cursor: pointer; text-decoration: underline dotted; margin-left: 6px; }

/* ---------- 相关链接（平台搜索直达） ---------- */
.lnkrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.lnkrow-t { font-size: 12px; color: var(--ink-3); margin-right: 2px; }
.lnk {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--ink-2); text-decoration: none;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .72);
  transition: .18s;
}
.lnk i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.lnk:hover { border-color: var(--purple); color: var(--purple); background: #fff; transform: translateY(-1px); }

.relsub {
  font-size: 15px; margin: 24px 0 12px; padding-left: 11px;
  border-left: 3px solid var(--purple); color: var(--ink);
}
.relgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 11px; }
.relcard {
  display: flex; flex-direction: column; gap: 5px;
  padding: 13px 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card-solid);
  box-shadow: var(--shadow); text-decoration: none; color: var(--ink);
  transition: .2s;
}
.relcard:hover { border-color: var(--purple); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.relcard-h { display: flex; align-items: center; gap: 7px; }
.relcard-h i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.relcard-h b { font-size: 14.5px; }
.relcard-k { font-size: 12.5px; color: var(--purple); word-break: break-all; line-height: 1.5; }
.relcard-t { font-size: 12px; color: var(--ink-3); }

/* ---------- COS 社区（由 js/community.js 驱动） ---------- */
.cbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 16px;
  background: var(--card-solid); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.cuser-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cuser-r { display: flex; align-items: center; gap: 8px; }
.cuser-n { font-weight: 800; font-size: 15.5px; }
.cuser-t { font-size: 12.5px; color: var(--ink-3); }
.cavatar {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff; font-weight: 800; font-size: 16px;
}
.cavatar.sm { width: 30px; height: 30px; font-size: 13.5px; }
.cavatar.xs { width: 26px; height: 26px; font-size: 12px; }

.ctools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.csearch {
  position: relative; flex: 1 1 220px; min-width: 180px;
}
.csearch svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--ink-3); }
.csearch input {
  width: 100%; padding: 10px 14px 10px 38px; font: inherit; font-size: 14.5px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card-solid);
  color: var(--ink); outline: none;
}
.csearch input:focus { border-color: var(--purple); }
.cswitch { display: inline-flex; background: rgba(255,255,255,.72); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.cswitch button {
  border: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--ink-2);
  padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: .18s;
}
.cswitch button.on { background: var(--purple); color: #fff; }
#cMineBtn.on { color: var(--purple); border-color: var(--purple); }

.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 16px; }
.ccard {
  display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card-solid); box-shadow: var(--shadow);
  cursor: pointer; font: inherit; color: inherit; transition: .2s;
}
.ccard:hover { transform: translateY(-3px); border-color: var(--purple); box-shadow: var(--shadow-lg); }
.ccard-img { position: relative; aspect-ratio: 3 / 4; background: rgba(169,123,255,.08); overflow: hidden; }
.ccard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cst {
  position: absolute; left: 8px; top: 8px; font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,.94); color: var(--ink-2); font-weight: 700;
}
.cst.pending { background: #fff4d6; color: #8a6100; }
.cst.rejected { background: #ffe0e6; color: #a3263f; }
.ccard-b { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 6px; }
.ccard-t { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.ccard-t b { font-size: 14.5px; }
.ccard-a { font-size: 12px; color: var(--purple); }
/* 作者身份 + 所在位置：跟着人走，作者改了这里立刻跟着变 */
.cauth { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.cauth .idtag { margin-left: 0; }
.cplace {
  font-size: 11.5px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 3px;
}
.cplace::before { content: "📍"; font-size: 11px; }
.pdlg-head .cauth { margin-top: 6px; }
.ccard-n { margin: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }
.ccard-m { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ink-3); }
.ccard-m .lk.on { color: var(--pink); font-weight: 700; }
.ccard-m .cd { margin-left: auto; }
.ctags { display: flex; gap: 5px; flex-wrap: wrap; }
.ctags i {
  font-style: normal; font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
  background: rgba(169,123,255,.12); color: #7b4d99;
}
.ctags.big i { font-size: 12.5px; padding: 4px 11px; }
.cstate {
  text-align: center; color: var(--ink-3); font-size: 14.5px;
  padding: 46px 20px; border: 1px dashed var(--line); border-radius: var(--radius-sm);
  margin-top: 18px; background: rgba(255,255,255,.5);
}

/* 详情浮层 */
.pmask { padding: 18px; }
.pdlg {
  width: min(1040px, 100%); max-height: 92vh; overflow: auto;
  background: var(--card-solid); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); position: relative;
}
.pdlg-loading { padding: 60px; text-align: center; color: var(--ink-3); }
.pdlg-in { display: grid; grid-template-columns: 1.35fr 1fr; min-height: 420px; position: relative; }
.pdlg-x {
  position: absolute; right: 12px; top: 10px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.9); color: var(--ink-2); font-size: 22px; line-height: 1;
}
.pdlg-img { background: #2b2233; display: grid; place-items: center; }
.pdlg-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pdlg-side { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.pdlg-head h3 { margin: 0 0 6px; font-size: 21px; }
.pdlg-who { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.pdlg-who b { font-size: 14px; color: var(--ink); }
.pdlg-who i { font-style: normal; color: var(--ink-3); font-size: 12.5px; }
.pdlg-status { font-size: 12.5px; padding: 7px 12px; border-radius: 10px; background: #fff4d6; color: #8a6100; }
.pdlg-status.rejected { background: #ffe0e6; color: #a3263f; }
.pdlg-note { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.pdlg-act { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.pdlg-cm { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }
.pdlg-cm h4 { margin: 0; font-size: 14.5px; }
.pdlg-cm h4 i { font-style: normal; color: var(--purple); }
.cmlist { display: flex; flex-direction: column; gap: 11px; overflow: auto; max-height: 30vh; padding-right: 4px; }
.cm { display: flex; gap: 9px; }
.cm-b { min-width: 0; }
.cm-b b { font-size: 13.5px; }
.cm-b p { margin: 1px 0 2px; font-size: 13.5px; color: var(--ink-2); word-break: break-word; line-height: 1.6; }
.cm-b i { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.cm-del { cursor: pointer; color: var(--pink); }
.cm-empty { font-size: 13px; color: var(--ink-3); padding: 8px 0; }
.cminput { display: flex; gap: 8px; }
.cminput input {
  flex: 1; padding: 9px 13px; font: inherit; font-size: 14px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); outline: none;
}
.cminput input:focus { border-color: var(--purple); }

/* 投稿弹窗里的选图位 */
.up-pick {
  border: 2px dashed var(--line); border-radius: var(--radius-sm);
  padding: 12px; text-align: center; cursor: pointer; margin-bottom: 6px;
  background: rgba(255,255,255,.6); transition: .2s;
}
.up-pick:hover { border-color: var(--purple); background: rgba(169,123,255,.06); }
.up-empty { padding: 22px 0; color: var(--ink-3); }
.up-empty span { display: block; font-size: 30px; color: var(--purple); line-height: 1; }
.up-empty em { display: block; font-style: normal; font-size: 14px; margin-top: 6px; color: var(--ink-2); }
.up-empty i { display: block; font-style: normal; font-size: 12px; margin-top: 3px; }
.up-pick img { max-width: 100%; max-height: 260px; border-radius: 10px; display: block; margin: 0 auto; }
.dlg-switch { margin-top: 12px; font-size: 13.5px; color: var(--ink-3); text-align: center; }
.dlg-switch a { color: var(--purple); cursor: pointer; text-decoration: underline dotted; }

/* ============================================================
 * 同游 · 个人信息 · 物品栏
 * ========================================================== */
.cavatar.xl { width: 54px; height: 54px; font-size: 22px; }
.btn-xs { padding: 6px 12px; font-size: 12.5px; }
.btn-danger { color: #a3263f; border-color: rgba(163,38,63,.3); background: rgba(255,224,230,.5); }
.btn-danger:hover { background: #ffe0e6; border-color: #a3263f; }
.tagrow button i { font-style: normal; margin-left: 5px; font-size: 11px; color: var(--ink-3); }

/* ---------- 同游 ---------- */
.teamgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; }
.teamcard {
  display: flex; flex-direction: column; gap: 8px; padding: 15px 16px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card-solid); box-shadow: var(--shadow); transition: .2s;
}
.teamcard:hover { transform: translateY(-3px); border-color: var(--purple); box-shadow: var(--shadow-lg); }
.teamcard.closed { opacity: .72; }
.teamcard-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tk {
  font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px;
  background: rgba(169,123,255,.13); color: #7b4d99;
}
.tk.event { background: rgba(255,127,182,.16); color: #b8447c; }
.tbadge {
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  background: rgba(120,90,140,.09); color: var(--ink-3);
}
.tbadge.full { background: #fff4d6; color: #8a6100; }
.tbadge.joined { background: rgba(169,123,255,.18); color: #6b3fa0; }
.tbadge.mine { background: rgba(255,127,182,.18); color: #b8447c; }
.tbadge.closed { background: rgba(120,90,140,.12); }
.teamcard h4 { margin: 0; font-size: 16.5px; line-height: 1.4; }
.teamcard .tplace { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.teamcard .tat { margin: 0; font-size: 12.5px; color: #b8447c; }
.teamcard .tnote {
  margin: 0; font-size: 12.8px; color: var(--ink-3); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.teamcard-m { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.tav {
  width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff; font-weight: 800; font-size: 11.5px;
}
.tauthor { font-weight: 700; color: var(--ink-2); font-size: 12.5px; }
.tn { margin-left: auto; }
.tn b { color: var(--purple); }
.teamcard-a { display: flex; gap: 8px; margin-top: 4px; }
.teamcard-a .btn { flex: 1; justify-content: center; }

.tm-mheads { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 8px; }
.tm-mheads h4 { margin: 0; font-size: 14.5px; }
.tm-mheads h4 i { font-style: normal; color: var(--purple); }
.tm-members { display: flex; flex-direction: column; gap: 10px; max-height: 42vh; overflow: auto; padding-right: 4px; }
.tm-m { display: flex; gap: 9px; }
.tm-mb { min-width: 0; }
.tm-mb b { font-size: 13.5px; }
.tm-mb .lead {
  font-style: normal; font-size: 11px; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: rgba(255,127,182,.2); color: #b8447c; font-weight: 700;
}
.tm-mb p { margin: 1px 0 2px; font-size: 13.5px; color: var(--ink-2); word-break: break-word; line-height: 1.6; }
.tm-mb i { font-style: normal; font-size: 11.5px; color: var(--ink-3); }

.dlg-seg { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.72); border: 1px solid var(--line); }
.dlg-seg button {
  border: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--ink-2);
  padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: .18s;
}
.dlg-seg button.on { background: linear-gradient(135deg, var(--pink), var(--purple)); color: #fff; }

/* ---------- 个人信息 ---------- */
.me-card { padding: 22px 24px; }
.me-top { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.me-top-t { min-width: 0; flex: 1; }
.me-top-t h3 { margin: 0 0 4px; font-size: 20px; }
.me-top-t p { margin: 0; font-size: 13px; color: var(--ink-3); }
.merow {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.merow-t { min-width: 0; }
.merow-t b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.merow-t span { font-size: 12.5px; color: var(--ink-3); }
.merow-v {
  font-size: 14px; font-weight: 700; color: var(--ink-2); max-width: 240px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.me-foot { padding-top: 16px; display: flex; justify-content: flex-end; }
.me-empty { text-align: center; padding: 54px 22px; }
.me-empty-i { font-size: 44px; line-height: 1; margin-bottom: 10px; }
.me-empty h3 { margin: 0 0 6px; font-size: 18px; }
.me-empty p { margin: 0 0 16px; font-size: 13.5px; color: var(--ink-3); }
.me-empty-a { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* 身份标签：个人信息页 + 社区每张图上都是这一个 */
.idtag {
  display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px;
  font-size: 11px; font-style: normal; font-weight: 700; line-height: 1.7;
  letter-spacing: .3px; vertical-align: middle; white-space: nowrap;
}
.idtag.t-visitor       { background: rgba(140, 130, 150, .14); color: var(--ink-3); }
.idtag.t-coser         { background: linear-gradient(135deg, var(--pink-soft), var(--purple-soft)); color: #7a48b8; }
.idtag.t-photographer  { background: var(--blue-soft); color: #2f5fa8; }
.idtag.t-makeup        { background: var(--pink-soft); color: #c34a80; }
/* 顶部资料里那个：昵称后面跟着，别把标题撑歪 */
.me-top-t h3 .idtag { font-size: 11.5px; }
.me-pl { color: var(--ink-2); }
.me-v-off { color: var(--ink-3); font-weight: 500; }

/* 设置入口：账号 / 密码收在里面，外头只留一个按钮 */
.me-set {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 0 4px; flex-wrap: wrap;
}
.me-set-t { min-width: 0; flex: 1; }
.me-set-t b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.me-set-t span { font-size: 12.5px; color: var(--ink-3); }

.setrow {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; margin-bottom: 10px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .6);
}
.setrow-t { min-width: 0; flex: 1; }
.setrow-t b { display: block; font-size: 14px; margin-bottom: 2px; }
.setrow-t span { font-size: 13px; color: var(--ink-3); word-break: break-all; }

/* 身份标签四选一 */
.tagpick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 4px; }
.tagopt {
  text-align: left; cursor: pointer; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: rgba(255, 255, 255, .66); transition: .18s;
}
.tagopt:hover { border-color: var(--purple); transform: translateY(-1px); }
.tagopt.on { border-color: var(--purple); background: rgba(169, 123, 255, .1); }
.tagopt b { display: block; font-size: 14.5px; }
.tagopt b em { font-style: normal; font-size: 11.5px; color: var(--purple); margin-left: 6px; }
.tagopt i { font-style: normal; font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
@media (max-width: 560px) { .tagpick { grid-template-columns: 1fr; } }

/* ---------- 物品栏 ---------- */
.inv-card { padding: 18px 20px; margin-bottom: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.inv-head { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.inv-head-t h3 { margin: 0 0 4px; font-size: 17px; }
.inv-head-t p { margin: 0; font-size: 13px; color: var(--ink-3); }
.inv-head-a { display: flex; align-items: center; gap: 10px; }
.inv-count { font-size: 13px; color: var(--ink-3); }
.inv-ph { text-align: center; padding: 26px 12px; font-size: 13.5px; color: var(--ink-3); line-height: 1.8; }
.invgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.invcard {
  padding: 0; overflow: hidden; text-align: left; font: inherit; color: inherit; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card-solid);
  transition: .2s;
}
.invcard:hover { transform: translateY(-3px); border-color: var(--purple); box-shadow: var(--shadow-lg); }
.invcard-img { position: relative; aspect-ratio: 1 / 1; background: rgba(169,123,255,.08); overflow: hidden; }
.invcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.invcat {
  position: absolute; left: 6px; top: 6px; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.94); color: #7b4d99;
}
.invcard-b { padding: 9px 11px 11px; }
.invcard-b b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invcard-b i { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.invcard-b .invrole { color: #b8447c; }
.inv-dlg { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 300px; }
.inv-dlg-img { background: #2b2233; display: grid; place-items: center; }
.inv-dlg-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.inv-dlg-s { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.inv-dlg-s h3 { margin: 0; font-size: 19px; }
.inv-dlg-p { margin: 0; font-size: 14px; color: var(--pink); font-weight: 700; }
.inv-dlg-n { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.inv-dlg-s .dlg-actions { margin-top: auto; }

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 26px; padding-top: 34px; }
  .mascot { order: -1; }
  .entry-grid { grid-template-columns: repeat(2, 1fr); }
  .tgrid { grid-template-columns: repeat(2, 1fr); }
  .rgrid { grid-template-columns: repeat(3, 1fr); }
  .teamgrid { grid-template-columns: repeat(2, 1fr); }
  .invgrid { grid-template-columns: repeat(4, 1fr); }
  .rd-hero { grid-template-columns: 1fr; gap: 24px; }
  .rd-figure { max-width: 380px; }
  .bud-grid { grid-template-columns: 1fr; }
  .float-card { left: 12px; }
}
@media (max-width: 680px) {
  .wrap { padding: 0 16px; }
  .nav-in { padding: 8px 14px; gap: 10px; row-gap: 0; }
  /* 移动端一级还是横向滑动，二级小标题单独占一整排，跟着右对齐改成左对齐 */
  .nav-subrow { justify-content: flex-start; margin-top: 6px; padding-top: 6px; }
  .brand { gap: 7px; }
  .brand-dot { width: 26px; height: 26px; }
  .brand-dot::after { inset: 8px; }
  .brand-txt { font-size: 15px; }
  .brand-txt small { display: none; }
  /* 导航项较多，移动端改为横向滑动，避免挤成两行 */
  .nav-links {
    flex-wrap: nowrap;
    overflow-x: auto;
    min-width: 0;
    margin-left: auto;
    padding: 2px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 86%, transparent 100%);
  }
  .nav-links::-webkit-scrollbar { display: none; height: 0; }
  .nav-links button { padding: 7px 12px; font-size: 13.5px; }
  .entry-grid, .tgrid, .duo { grid-template-columns: 1fr; }
  .rgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .refgrid, .relgrid, .cgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .teamgrid { grid-template-columns: 1fr; }
  .invgrid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .merow { grid-template-columns: 1fr auto; row-gap: 8px; }
  .merow-v { max-width: 100%; }
  .me-card { padding: 18px 16px; }
  .inv-dlg { grid-template-columns: 1fr; }
  .pdlg-in { grid-template-columns: 1fr; }
  .pdlg-img img { max-height: 46vh; }
  .pdlg-side { padding: 16px 17px; }
  .cmlist { max-height: 26vh; }
  .pdlg-x { right: 8px; top: 6px; }
  .rbody { padding: 12px 13px 14px; }
  .rbody h3 { font-size: 15px; }
  .rd-figure { max-width: none; }
  .rd-meta > div { font-size: 13px; padding: 10px 13px; }
  .rd-meta b { min-width: 66px; }
  .rd-actions .btn { flex: 1; justify-content: center; }
  .gitem { grid-template-columns: 1fr; gap: 12px; }
  .gact { justify-content: flex-start; }
  .float-card { left: 10px; bottom: 16px; padding: 9px 13px; }
  .float-card b { font-size: 13.5px; }
  .float-card span { font-size: 11px; }
  .mascot::after { font-size: 10.5px; padding: 5px 11px; right: 10px; bottom: 10px; }
  .step-hero { padding: 24px 22px; }
  .dlist .row { grid-template-columns: 80px 1fr; }
  .dlist .row .n { grid-column: 2; justify-self: start; margin-top: 4px; }
}

/* ============================================================
 * 设备租（#page-rental）—— 数据来自 camrent，经 /api/rent/* 代理
 * ============================================================ */

/* 营业状态条 */
.rtbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 16px 0 2px; padding: 11px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .72); box-shadow: var(--shadow);
}
.rtbar .rtdot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #31c76a; box-shadow: 0 0 0 4px rgba(49, 199, 106, .16);
}
.rtbar.off .rtdot { background: #d9d2df; box-shadow: 0 0 0 4px rgba(217, 210, 223, .32); }
.rtbar b { font-size: 14.5px; }
.rtbar-t { flex: 1; min-width: 200px; font-size: 13.5px; color: var(--ink-2); }
.rtbar-c { font-size: 13px; color: var(--ink-3); }

/* 设备卡 */
.rentgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 16px; margin-top: 16px; }
.rtcard {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card-solid); box-shadow: var(--shadow); transition: .2s;
}
.rtcard:hover { transform: translateY(-3px); border-color: var(--purple); box-shadow: var(--shadow-lg); }
.rtcov {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(150deg, #ffeaf5, #e9dcff 55%, #dbe9ff);
}
.rtcov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rtcov-ph { font-size: 40px; opacity: .5; }
.rtbadge {
  position: absolute; left: 10px; top: 10px;
  padding: 3px 9px; border-radius: 99px;
  font-size: 11.5px; font-weight: 700; color: #fff;
}
.rtbadge.b-ok { background: rgba(49, 199, 106, .92); }
.rtbadge.b-no { background: rgba(139, 129, 149, .92); }
.rtbody { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.rtname { margin: 0; font-size: 16px; }
.rtmodel { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.rtprice { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.rtprice b { font-size: 21px; color: var(--pink); }
.rtprice small { font-size: 12.5px; color: var(--ink-3); }
.rtprice .rtdep {
  margin-left: auto; padding: 2px 9px; border-radius: 99px;
  font-size: 12px; color: var(--ink-3); background: rgba(169, 123, 255, .1);
}
.rtnote { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.rtacts { display: flex; gap: 8px; margin-top: 6px; }
.rtacts .btn { flex: 1; justify-content: center; }
.rtacts .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* 下单弹窗里的表单 */
.rtform { display: flex; flex-direction: column; gap: 10px; }
.rtfrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rtradio { display: flex; gap: 8px; }
.rtradio button {
  flex: 1; padding: 9px 10px; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .7); transition: .2s;
}
.rtradio button.on {
  border-color: var(--purple); color: var(--purple);
  background: rgba(169, 123, 255, .1); font-weight: 600;
}
.rtsum {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; padding: 10px 13px;
  border: 1px dashed rgba(169, 123, 255, .4); border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(255, 127, 182, .1), rgba(169, 123, 255, .12));
}
.rtsum-t { font-size: 14px; }
.rtsum-p { font-size: 13.5px; color: var(--ink-2); }
.rtsum-p b { color: var(--pink); font-size: 17px; }
.rtip {
  margin: 12px 0 0; padding: 10px 13px; border-radius: var(--radius-sm);
  font-size: 13.5px; color: var(--ink-2); line-height: 1.75;
  background: rgba(169, 123, 255, .08);
}
.rtph { padding: 14px 10px; text-align: center; font-size: 13.5px; color: var(--ink-3); }

/* 档期 / 订单列表 */
.rtbusy { max-height: 42vh; overflow-y: auto; }
.rtbusy-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .7); font-size: 13.5px;
}
.rtbusy-row span { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.rtorders { display: flex; flex-direction: column; gap: 10px; max-height: 44vh; overflow-y: auto; }
.rtorder {
  padding: 11px 13px; border: 1px solid var(--line); border-left: 4px solid var(--purple);
  border-radius: var(--radius-sm); background: rgba(255, 255, 255, .75);
}
.rtorder.wait { border-left-color: #f0a92a; }
.rtorder.go { border-left-color: #31c76a; }
.rtorder.done { border-left-color: #8b8195; }
.rtorder.off { border-left-color: #d9d2df; }
.rto-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rto-top b { font-size: 14.5px; }
.rto-st {
  padding: 2px 9px; border-radius: 99px;
  font-size: 12px; color: var(--purple); background: rgba(169, 123, 255, .12);
}
.rto-mid { margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.rto-bot { font-size: 12.5px; color: var(--ink-3); }
.rto-ups {
  display: inline-block; margin-top: 5px; padding: 3px 8px; border-radius: 6px;
  font-size: 12px; color: #b4741a; background: rgba(240, 169, 42, .12);
}

/* 怎么租 */
.rtfaq p { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); line-height: 1.8; }
.rtfaq b { color: var(--ink); }
.rtfaq-w {
  padding: 9px 12px; border-radius: 8px; border-left: 3px solid var(--pink);
  background: rgba(255, 127, 182, .1);
}
.rtfaq-c { font-size: 13.5px; color: var(--ink-3); }

@media (max-width: 980px) {
  .rentgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .rentgrid { grid-template-columns: 1fr; gap: 12px; }
  .rtfrow { grid-template-columns: 1fr; }
  .rtbar { padding: 10px 13px; }
  .rtbar-t { min-width: 100%; }
  .rtbusy { max-height: 34vh; }
  .rtorders { max-height: 38vh; }
}