/* ==========================================================================
   叮咚关系台 · 移动端 · 页面层样式
   每屏一节，按「资源 → 档案 → 话术 → 展示面 → 复盘 → 看板 → 我的 → 落地/注册」排列
   ========================================================================== */

/* --------------------------------------------------------------------------
   00 · 通用页头变体 / 段标题
   -------------------------------------------------------------------------- */
.hd-left { display: flex; align-items: center; gap: 2px; margin-left: -12px; }
.hd-name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.c-info { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.nowrap { white-space: nowrap; }

.page-lead { padding: 2px 2px 0; }
.page-lead .k {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--rose-ink);
}
.page-lead h1 { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -.01em; margin-top: 2px; }
.page-lead p { font-size: 12px; line-height: 18px; color: var(--ink-muted); margin-top: 2px; }

/* --------------------------------------------------------------------------
   01 · 资源管理（Resources）
   -------------------------------------------------------------------------- */
.search { position: relative; display: flex; align-items: center; }
.search .input { height: 44px; border-radius: 12px; background: var(--surface-container); padding-left: 40px; padding-right: 42px; font-size: 14px; }
.search .input:focus { background: var(--panel); }
.search .lead { position: absolute; left: 13px; display: flex; color: var(--ink-muted); pointer-events: none; }
.search .tail {
  position: absolute; right: 6px; width: 32px; height: 32px; border-radius: 9px;
  background: var(--surface); display: grid; place-items: center; color: var(--ink-secondary);
}
.search .tail:active { color: var(--ink); }

.rail-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.rail-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-secondary);
}
.rail { display: flex; gap: 10px; overflow-x: auto; padding: 3px 2px 5px; scroll-snap-type: x proximity; }
.rail-card {
  flex: none; position: relative; display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--sh-1);
  scroll-snap-align: start;
}
.rail-time {
  min-width: 34px; height: 26px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums; background: var(--rose-soft); color: var(--rose-solid);
}
.rail-time[data-stage="chatting"] { background: var(--stage-chatting-soft); color: var(--stage-chatting); }
.rail-time[data-stage="cooling"] { background: var(--surface-container-high); color: var(--ink-muted); }
.rail-body { display: flex; flex-direction: column; gap: 1px; }
.rail-t { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.rail-s { font-size: 10px; color: var(--ink-muted); white-space: nowrap; }
.rail-sub { font-size: 9px; padding: 1px 6px; border-radius: 999px; background: var(--rose-wash); color: var(--rose-solid); font-weight: 600; }
.rail-sub[data-stage="chatting"] { background: var(--stage-chatting-soft); color: var(--stage-chatting); }
.rail-sub[data-stage="cooling"] { background: var(--stage-cooling-soft); color: var(--stage-cooling); }
.rail-live {
  width: 7px; height: 7px; border-radius: 99px; background: var(--rose-solid); margin-left: 2px;
  position: relative;
}
.rail-live::after {
  content: ''; position: absolute; inset: 0; border-radius: 99px; background: var(--rose-solid);
  animation: ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}

.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.metric { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 11px 12px 12px; box-shadow: var(--sh-1); }
.metric .k { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 10px; color: var(--ink-muted); white-space: nowrap; }
.metric .v { display: flex; align-items: baseline; gap: 3px; margin-top: 3px; }
.metric .v b { font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -.02em; }
.metric .v s { font-size: 10px; font-weight: 600; text-decoration: none; }
.metric .meter { margin-top: 8px; }
.metric.warn .k { color: var(--stage-cooling); font-weight: 600; }
.metric.warn .v b { color: var(--stage-cooling); }

.contact {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--sh-1);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .16s;
}
.contact:active { transform: scale(.99); }
.contact.warn { border-left: 4px solid var(--stage-cooling); }
.c-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.c-id { display: flex; gap: 12px; min-width: 0; }
.c-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.c-name b { font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: -.01em; }
.c-sub { font-size: 10px; line-height: 15px; color: var(--ink-muted); margin-top: 1px; }
.c-jump {
  width: 36px; height: 36px; border-radius: 12px; flex: none;
  background: var(--surface-container); display: grid; place-items: center; color: var(--ink);
}
.c-mood {
  background: var(--panel-sunken); border: 1px solid rgba(231, 233, 239, .8);
  border-radius: 12px; padding: 9px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.c-mood .l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mood-chip {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  padding: 3px 7px; border-radius: 8px; background: var(--rose-wash);
  color: var(--rose-solid); font-size: 11px; font-weight: 700;
}
.mood-chip[data-tone="info"] { background: var(--stage-chatting-soft); color: var(--stage-chatting); }
.c-topic { font-size: 12px; line-height: 18px; color: var(--ink-secondary); }
.c-topic b { color: var(--ink); font-weight: 600; }
.c-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.c-advice { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--rose-ink); min-width: 0; }
.c-advice > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-advice[data-tone="info"] { color: var(--stage-chatting); }
.c-advice[data-tone="warn"] { color: var(--stage-cooling); }
.warn-note {
  background: rgba(253, 241, 224, .72); border-radius: 12px; padding: 9px 10px;
  display: flex; align-items: flex-start; gap: 6px;
  color: var(--stage-cooling); font-size: 10px; line-height: 15px; font-weight: 600;
}

/* --------------------------------------------------------------------------
   02 · 个人档案（Profile）
   -------------------------------------------------------------------------- */
.prof-hero {
  position: relative; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--sh-1); padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.prof-hero::before {
  content: ''; position: absolute; right: -44px; top: -48px; width: 180px; height: 180px;
  border-radius: 999px; background: rgba(253, 238, 242, .75); filter: blur(30px);
}
.prof-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; }
.p-av { position: relative; width: 80px; height: 80px; border-radius: 999px; box-shadow: 0 6px 16px rgba(23, 26, 33, .14); }
.p-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; }
/* 真实模式没有头像图：居中显示姓氏首字 */
.p-av .init {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 999px;
  background: linear-gradient(140deg, #fbe4ea, #f3e7f7);
  color: var(--rose-deep); font-size: 30px; font-weight: 700; letter-spacing: 1px;
  user-select: none;
}
.p-av .fav {
  position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 999px;
  background: var(--rose-solid); color: #fff; display: grid; place-items: center; border: 2px solid var(--panel);
}
.p-tools { display: flex; align-items: center; gap: 8px; }
.mask-btn {
  height: 36px; padding: 0 11px; border-radius: 999px; background: var(--surface-container);
  display: inline-flex; align-items: center; gap: 5px; color: var(--ink-secondary);
  font-size: 11px; font-weight: 600;
}
.mask-btn.on { background: var(--rose-soft); color: var(--rose-deep); }
.round-btn { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; }
.round-btn.rose { background: var(--rose-soft); color: var(--rose-deep); }

.p-name { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p-name b { font-size: 26px; line-height: 34px; font-weight: 700; letter-spacing: -.02em; }
.p-nick { font-size: 13px; color: var(--ink-muted); font-weight: 500; }
.comp { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.comp .l { display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: var(--ink-muted); }
.comp .l b { color: var(--rose-deep); font-size: 11px; }
.comp .meter { height: 6px; }

.p-strip { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-1); padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.wechat {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: 12px; background: var(--surface-container);
}
.wechat .l { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wechat .k { font-size: 10px; color: var(--ink-muted); }
.wechat .v { font-size: 12px; font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); }
.btn.soft-rose { background: var(--panel); color: var(--rose-deep); box-shadow: 0 1px 3px rgba(23, 26, 33, .08); }
.btn.soft-rose.on { background: var(--stage-progressing-soft); color: var(--stage-progressing); box-shadow: none; }
.stage-stable { color: var(--stage-stable); }
.mini4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mini4 > div { background: var(--surface-container); border-radius: 10px; padding: 8px 4px; text-align: center; }
.mini4 .k { font-size: 9px; color: var(--ink-muted); }
.mini4 .v { font-size: 15px; line-height: 20px; font-weight: 700; margin-top: 1px; }
.mini4 .s { font-size: 9px; color: var(--ink-muted); margin-top: 1px; }

.acc { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-1); overflow: hidden; }
.acc > summary {
  list-style: none; cursor: pointer; padding: 12px; display: flex; align-items: center; justify-content: space-between;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary .l { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.acc > summary .ci { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; }
.acc > summary .chev { color: var(--ink-muted); transition: transform .22s; }
.acc[open] > summary .chev { transform: rotate(180deg); }
.acc .body { padding: 0 12px 12px; }
.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kv { background: var(--surface-container); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; }
.kv .k { font-size: 9px; color: var(--ink-muted); }
.kv .v { font-size: 13px; font-weight: 500; color: var(--ink); }
.kv-row { background: var(--surface-container); border-radius: 10px; padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kv-row .k { font-size: 10px; color: var(--ink-muted); }
.kv-row .v { font-size: 13px; font-weight: 500; }

.deep-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-1); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.deep-card > .h { display: flex; align-items: center; justify-content: space-between; }
.deep-card > .h .t { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; }
.deep-block { background: var(--surface-container); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.deep-block .t { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; }
.deep-block p { font-size: 11px; line-height: 17px; color: var(--ink-secondary); }

.danger-box {
  background: #ffdad6; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 2px 8px rgba(186, 26, 26, .08);
}
.danger-box .t { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #ba1a1a; }
.danger-box li { display: flex; gap: 8px; font-size: 11px; line-height: 17px; color: #2a1414; }
.danger-box li i { width: 5px; height: 5px; border-radius: 99px; background: #ba1a1a; margin-top: 6px; flex: none; }
.danger-box li b { color: #ba1a1a; font-weight: 700; }

.promise-item { display: flex; gap: 8px; padding: 12px; border-radius: 10px; background: var(--surface-container); }
.promise-item.over { background: var(--stage-cooling-soft); }
.promise-item .box {
  width: 17px; height: 17px; border-radius: 5px; border: 1.6px solid var(--line-soft);
  background: #fff; flex: none; margin-top: 1px; display: grid; place-items: center; color: transparent;
}
.promise-item .box.on { background: var(--rose-solid); border-color: var(--rose-solid); color: #fff; }
.promise-item .box.amber { border-color: var(--stage-cooling); }
.promise-item .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.promise-item .flag { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--stage-cooling); }
.promise-item .t { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 19px; }
.promise-item .s { font-size: 10px; color: var(--ink-muted); }
.promise-item.over .s { color: var(--stage-cooling); font-weight: 500; }
.promise-item.done .t { color: var(--ink-muted); text-decoration: line-through; }

.tl { position: relative; padding-left: 24px; display: flex; flex-direction: column; gap: 10px; }
.tl::before { content: ''; position: absolute; left: 8px; top: 8px; bottom: 0; width: 2px; background: var(--line-soft); }
.tl-node { position: absolute; left: -24px; top: 4px; width: 18px; height: 18px; border-radius: 99px; background: var(--rose-soft); display: grid; place-items: center; }
.tl-node i { width: 8px; height: 8px; border-radius: 99px; background: var(--rose-solid); }
.tl-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.tl-head .d { font-size: 13px; font-weight: 700; }
.tl-head .p { font-size: 10px; color: var(--ink-muted); }
.tl-body { background: var(--surface-container); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.tl-body p { font-size: 13px; line-height: 20px; color: var(--ink); }
.tl-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tl-photo { position: relative; height: 112px; border-radius: 10px; overflow: hidden; background: var(--preview-bg); }
.tl-photo img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.tl-photo .lk {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(11, 13, 18, .35); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.tl-photo .lk span {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px;
  background: rgba(23, 26, 33, .8); color: #fff; font-size: 10px;
}
.tl-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tl-meta .l { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--ink-muted); min-width: 0; }
.tl-meta .l span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.actionbar {
  position: fixed; left: calc(var(--edge) + var(--margin)); right: calc(var(--edge) + var(--margin));
  bottom: calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom, 0px)); z-index: 55;
  display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 999px;
  background: rgba(23, 26, 33, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px rgba(11, 13, 18, .3);
}
.actionbar .main {
  flex: 1; height: 46px; border-radius: 999px; background: var(--rose-solid); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 600;
}
.actionbar .side {
  height: 46px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff;
  display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600;
}
.actionbar .side .ic { color: var(--rose-solid); }

/* --------------------------------------------------------------------------
   03 · 极速记账浮层（Quick Log）
   -------------------------------------------------------------------------- */
.ql-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 18px 12px; }
.ql-title { display: flex; align-items: center; gap: 10px; }
.ql-title .ib { width: 36px; height: 36px; border-radius: 12px; background: rgba(212, 83, 111, .16); color: var(--rose-solid); display: grid; place-items: center; }
.ql-title h2 { font-size: 17px; font-weight: 700; color: #fff; line-height: 22px; }
.ql-title .who { display: flex; align-items: center; gap: 6px; font-size: 10px; color: rgba(255, 255, 255, .6); margin-top: 2px; }
.ql-close { width: 44px; height: 44px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; display: grid; place-items: center; }
.ql-body { padding: 0 16px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.ql-seg { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .07); }
.ql-seg button {
  flex: 1; height: 38px; border-radius: 999px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .55);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.ql-seg button.on { background: rgba(255, 255, 255, .14); color: #fff; }
.ql-seg button .n { width: 18px; height: 18px; border-radius: 99px; background: rgba(255, 255, 255, .18); display: grid; place-items: center; font-size: 10px; }
.ql-seg button.on .n { background: var(--rose-solid); }

.ql-label { display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: rgba(255, 255, 255, .5); margin-bottom: 6px; letter-spacing: .04em; }
.ql-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ql-chips { display: flex; gap: 6px; }
.ql-chip {
  flex: 1; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .72);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; font-weight: 600;
}
.ql-chip.on { background: rgba(14, 159, 154, .18); border-color: rgba(14, 159, 154, .5); color: #5fd9d4; }
.ql-chip.on.rose { background: rgba(212, 83, 111, .2); border-color: rgba(212, 83, 111, .55); color: #ff9bb0; }

.ql-mood { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; padding: 12px; }
.ql-mood .top { display: flex; align-items: center; justify-content: space-between; }
.ql-mood .top .l { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255, 255, 255, .8); font-weight: 600; }
.ql-mood .top .r { display: flex; align-items: baseline; gap: 3px; }
.ql-mood .top .r b { font-size: 24px; font-weight: 700; color: var(--rose-solid); }
.ql-mood .top .r span { font-size: 11px; color: rgba(255, 255, 255, .5); }
.ql-range { position: relative; margin-top: 12px; }
.ql-range input {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .18), var(--rose-solid)); outline: none;
}
.ql-range input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 99px;
  background: #fff; border: 3px solid var(--rose-solid); box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
.ql-scale { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255, 255, 255, .45); margin-top: 8px; }

.ql-field { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; padding: 10px 12px; }
.ql-field .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ql-field .top .l { font-size: 10px; color: rgba(255, 255, 255, .55); }
.ql-field textarea { width: 100%; background: none; border: 0; outline: none; color: #fff; font-size: 13px; line-height: 21px; resize: none; }
.ql-field .cnt { text-align: right; font-size: 10px; color: rgba(255, 255, 255, .35); }
.ql-tags { display: flex; gap: 6px; overflow-x: auto; padding-top: 8px; }
.ql-tag { flex: none; height: 26px; padding: 0 9px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .7); font-size: 10px; display: inline-flex; align-items: center; gap: 3px; }
.ql-divider { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.ql-divider span { flex: none; font-size: 10px; letter-spacing: .12em; color: rgba(255, 255, 255, .35); text-transform: uppercase; }
.ql-divider i { flex: 1; height: 1px; background: rgba(255, 255, 255, .09); }

.ql-card { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; padding: 12px; }
.ql-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ql-row + .ql-row { margin-top: 10px; }
.ql-row .l { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .85); min-width: 0; }
.ql-row .s { font-size: 10px; color: rgba(255, 255, 255, .4); font-weight: 400; }
.ql-toggle { width: 44px; height: 25px; border-radius: 99px; background: rgba(255, 255, 255, .16); position: relative; flex: none; transition: background .2s; }
.ql-toggle i { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 99px; background: #fff; transition: transform .2s; }
.ql-toggle.on { background: var(--rose-solid); }
.ql-toggle.on i { transform: translateX(19px); }
.ql-promise { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; background: rgba(212, 83, 111, .12); border: 1px solid rgba(212, 83, 111, .28); }
.ql-promise .t { font-size: 12px; color: #fff; flex: 1; }
.ql-when { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 10px; color: rgba(255, 255, 255, .8); }
.ql-foot { padding: 8px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255, 255, 255, .07); }
.ql-submit {
  width: 100%; height: 52px; border-radius: 999px; background: var(--rose-solid); color: #fff;
  font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 10px 24px -8px rgba(212, 83, 111, .7);
}
.ql-note { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 9px; color: rgba(255, 255, 255, .35); margin-top: 9px; }

/* --------------------------------------------------------------------------
   04 · 临场话术（Scripts）
   -------------------------------------------------------------------------- */
.hd-search { padding: 0 var(--margin) 8px; display: flex; align-items: center; gap: 8px; }
.hd-search .search { flex: 1; }
.hd-search .sq {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  background: var(--panel); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-secondary);
}

.focus-card {
  position: relative; overflow: hidden; border-radius: 18px; padding: 14px;
  background: linear-gradient(180deg, #fff9fb 0%, #ffffff 62%);
  border: 1px solid #f6dee4; box-shadow: var(--sh-2);
  display: flex; flex-direction: column; gap: 10px;
}
.focus-card::before {
  content: ''; position: absolute; right: -36px; top: -40px; width: 140px; height: 140px;
  border-radius: 999px; background: rgba(212, 83, 111, .09); filter: blur(22px);
}
.focus-head { position: relative; display: flex; align-items: center; justify-content: space-between; }
.focus-head .t { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--rose-ink); }
.match-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
  background: var(--rose-soft); color: var(--rose-ink); font-size: 10px; font-weight: 700;
}
.focus-who { display: flex; align-items: center; gap: 10px; position: relative; }
.focus-who .n { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; }
.focus-who .p { font-size: 10px; color: var(--ink-muted); margin-top: 1px; }
.trigger {
  display: flex; align-items: flex-start; gap: 6px; padding: 7px 9px; border-radius: 9px;
  background: rgba(22, 163, 74, .07); color: var(--stage-stable); font-size: 10px; font-weight: 600;
}
.trigger > .ic { margin-top: 1px; }
.trigger > .txt { flex: 1; min-width: 0; line-height: 15px; }
.trigger .r { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; color: var(--stage-stable); }
.quote-block {
  background: var(--panel); border: 1px solid #f2dde3; border-radius: 12px; padding: 11px 12px;
  font-size: 13px; line-height: 21px; color: var(--ink); position: relative;
}
.quote-block::before {
  content: '“'; position: absolute; left: 6px; top: 2px; font-size: 26px; color: rgba(212, 83, 111, .18);
  font-family: Georgia, serif;
}
.focus-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.focus-foot .l { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--ink-muted); }

.sc-head { display: flex; align-items: center; justify-content: space-between; padding: 2px; }
.sc-head .t { display: flex; align-items: baseline; gap: 6px; font-size: 14px; font-weight: 700; }
.sc-head .t s { font-size: 10px; color: var(--ink-muted); font-weight: 500; text-decoration: none; }
.sc-head .a { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--ink-secondary); }

.sc-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--sh-1); padding: 13px; display: flex; flex-direction: column; gap: 9px;
}
.sc-card.sel { border-color: rgba(212, 83, 111, .45); box-shadow: 0 6px 18px -6px rgba(212, 83, 111, .28); }
.sc-top { display: flex; align-items: center; gap: 6px; }
.sc-check {
  width: 18px; height: 18px; border-radius: 99px; background: var(--rose-solid); color: #fff;
  display: grid; place-items: center; flex: none;
}
.sc-title { font-size: 14px; font-weight: 700; letter-spacing: -.01em; flex: 1; min-width: 0; }
.sc-body { font-size: 12px; line-height: 20px; color: var(--ink-secondary); }
.sc-note { font-size: 10px; color: var(--ink-muted); display: flex; align-items: center; gap: 4px; }
.sc-meta { display: flex; align-items: center; gap: 10px; font-size: 10px; color: var(--ink-muted); }
.sc-meta .i { display: inline-flex; align-items: center; gap: 3px; }
.sc-act { display: flex; align-items: center; margin-left: auto; gap: 4px; }
.sc-icon { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; color: var(--ink-secondary); }
.sc-copy {
  height: 30px; padding: 0 11px; border-radius: 999px; background: var(--surface-container);
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--ink);
}

.batchbar {
  position: fixed; left: calc(var(--edge) + 12px); right: calc(var(--edge) + 12px);
  bottom: calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom, 0px)); z-index: 55;
  display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 999px;
  background: rgba(23, 26, 33, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px rgba(11, 13, 18, .3); color: #fff;
}
.batchbar[hidden] { display: none; }
.batchbar .l { display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; white-space: nowrap; flex: none; }
.batchbar .l .ic { color: var(--rose-solid); }
.batchbar .b {
  height: 30px; padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, .1);
  display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: #fff;
  white-space: nowrap; flex: none;
}
.batchbar .fab-inline { width: 36px; height: 36px; border-radius: 999px; background: var(--rose-solid); display: grid; place-items: center; flex: none; }

/* --------------------------------------------------------------------------
   05 · 展示面（Showcase）
   -------------------------------------------------------------------------- */
.pipe {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-1);
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.pipe-head { display: flex; align-items: center; justify-content: space-between; }
.pipe-head .t { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; }
.pipe-head .s { display: flex; align-items: center; gap: 4px; font-size: 9px; color: var(--ink-muted); }
.pipe-row { display: flex; flex-direction: column; gap: 5px; }
.pipe-row .l { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 10px; }
.pipe-row .l .n { display: flex; align-items: center; gap: 5px; color: var(--ink); font-weight: 500; }
.pipe-row .l .m { display: flex; align-items: center; gap: 4px; font-size: 9px; color: var(--ink-muted); }
.pipe-row .l .m b { color: var(--stage-stable); font-weight: 600; }
.pipe-row .l .m .pillp { padding: 1px 4px; border-radius: 4px; background: var(--stage-stable-soft); color: var(--stage-stable); font-weight: 700; }

.wall-head { display: flex; align-items: center; justify-content: space-between; padding: 2px; }
.wall-head .t { display: flex; flex-direction: column; gap: 1px; }
.wall-head .t b { font-size: 14px; font-weight: 700; }
.wall-head .t s { font-size: 9px; color: var(--ink-muted); text-decoration: none; }
.wall-tools { display: flex; align-items: center; gap: 2px; }
.wall-tools button { width: 32px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-muted); }
.wall-tools button.on { color: var(--rose-solid); background: var(--rose-soft); }

.wall { column-count: 2; column-gap: 10px; }
.wall-item {
  break-inside: avoid; margin-bottom: 10px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; box-shadow: var(--sh-1); display: block; width: 100%;
}
.wall-item.sel { border-color: rgba(212, 83, 111, .5); box-shadow: 0 6px 18px -6px rgba(212, 83, 111, .3); }
.wall-img { position: relative; overflow: hidden; background: var(--surface-container); }
.wall-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wall-img .chk {
  position: absolute; left: 7px; top: 7px; width: 20px; height: 20px; border-radius: 99px;
  background: rgba(255, 255, 255, .9); border: 1px solid rgba(23, 26, 33, .12); display: grid; place-items: center;
  color: transparent; box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.wall-item.sel .chk { background: var(--rose-solid); border-color: var(--rose-solid); color: #fff; }
.wall-img .rt { position: absolute; right: 7px; top: 7px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px; border-radius: 6px; background: rgba(11, 13, 18, .6); color: #fff; font-size: 9px; font-weight: 600; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.wall-img .rt.gold { background: rgba(23, 26, 33, .55); color: #ffd9a0; }
.wall-img .bt { position: absolute; left: 7px; bottom: 7px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px; border-radius: 6px; background: rgba(11, 13, 18, .55); color: #fff; font-size: 9px; font-weight: 600; }
.wall-body { padding: 8px 9px 9px; display: flex; flex-direction: column; gap: 3px; }
.wall-meta { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 9px; color: var(--ink-muted); }
.wall-meta .d { display: inline-flex; align-items: center; gap: 3px; }
.wall-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.wall-tags span { font-size: 9px; color: var(--ink-secondary); }
.wall-warn { font-size: 9px; color: var(--stage-cooling); font-weight: 600; }

/* 邀约转化概览 */
.conv { display: flex; align-items: center; gap: 12px; }
.conv-l { flex: none; width: 96px; }
.conv-l .v { display: flex; align-items: baseline; gap: 1px; }
.conv-l .v b { font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -.03em; }
.conv-l .v span { font-size: 13px; font-weight: 700; }
.conv-r { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.conv-cell { background: var(--surface-container); border-radius: 8px; padding: 6px 8px; }
.conv-cell b { display: block; font-size: 15px; font-weight: 700; line-height: 19px; }
.conv-cell span { font-size: 9px; color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   06 · 复盘看板（Review）
   -------------------------------------------------------------------------- */
.rev-board {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-1);
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.rev-board .h { display: flex; align-items: center; justify-content: space-between; }
.rev-board .h .t { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.rev-board .h .s { font-size: 9px; color: var(--ink-muted); }
.board-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.board-cell { background: var(--surface-container); border-radius: 12px; padding: 11px; position: relative; overflow: hidden; }
.board-cell .k { font-size: 10px; color: var(--ink-muted); }
.board-cell .v { display: flex; align-items: baseline; gap: 4px; margin-top: 3px; }
.board-cell .v b { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.02em; }
.board-cell .v s { font-size: 10px; color: var(--ink-muted); text-decoration: none; }
.board-cell.warn { background: var(--stage-cooling-soft); }
.board-cell.warn .k, .board-cell.warn .v b, .board-cell.warn .v s { color: #8a4b06; }
.board-cell.warn .wm { position: absolute; right: 6px; bottom: 2px; color: rgba(217, 119, 6, .18); }

.p-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--sh-1); padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.p-card.over { border-top: 3px solid var(--stage-cooling); box-shadow: 0 10px 26px -12px rgba(217, 119, 6, .35); }
.p-head { display: flex; align-items: center; gap: 10px; }
.p-avn {
  width: 40px; height: 40px; border-radius: 999px; flex: none; display: grid; place-items: center;
  font-size: 15px; font-weight: 700; background: var(--rose-soft); color: var(--rose-deep);
}
.p-avn.amber { background: var(--stage-cooling-soft); color: #8a4b06; }
.p-head .n { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.p-head .s { font-size: 10px; color: var(--ink-muted); margin-top: 1px; }
.p-body { display: flex; flex-direction: column; gap: 6px; }
.p-body .tt { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; line-height: 20px; }
.p-body .dd { font-size: 11px; line-height: 18px; color: var(--ink-secondary); }
.p-meta { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--ink-muted); flex-wrap: wrap; }
.p-meta .warn { color: var(--stage-cooling); font-weight: 600; }
.p-actions { display: flex; align-items: center; gap: 8px; }
.p-actions .main { flex: 1; height: 44px; border-radius: 999px; background: var(--stage-cooling); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 700; box-shadow: 0 8px 18px -8px rgba(217, 119, 6, .6); }
.p-actions .ghost { width: 44px; height: 44px; border-radius: 999px; background: var(--surface-container); color: var(--ink-secondary); display: grid; place-items: center; flex: none; }
.hint { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--stage-stable); font-weight: 500; }
.hint.amber { color: #8a4b06; }

.mood30 { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-1); padding: 14px; display: flex; align-items: center; gap: 12px; }
.mood30 .v { display: flex; align-items: baseline; gap: 2px; }
.mood30 .v b { font-size: 30px; line-height: 34px; font-weight: 700; letter-spacing: -.02em; }
.mood30 .v s { font-size: 11px; color: var(--ink-muted); text-decoration: none; }
.spark { flex: 1; height: 34px; }
.spark svg { width: 100%; height: 100%; overflow: visible; }

.funnel { display: flex; flex-direction: column; gap: 7px; }
.funnel-row { display: flex; align-items: center; gap: 8px; }
.funnel-row .lb { width: 54px; font-size: 10px; color: var(--ink-secondary); flex: none; }
.funnel-row .bar { flex: 1; height: 22px; border-radius: 6px; background: var(--surface-container); overflow: hidden; }
.funnel-row .bar i { display: block; height: 100%; border-radius: 6px; }
.funnel-row .n { width: 30px; text-align: right; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.funnel-row .pc { width: 42px; text-align: right; font-size: 10px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.insight {
  border-radius: 14px; padding: 12px; background: linear-gradient(180deg, #fff8fa, #ffffff);
  border: 1px solid #f4dde3; display: flex; flex-direction: column; gap: 6px;
}
.insight .t { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--rose-ink); }
.insight p { font-size: 11px; line-height: 18px; color: var(--ink-secondary); }

/* --------------------------------------------------------------------------
   07 · 数据看板（Insights）
   -------------------------------------------------------------------------- */
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-1); padding: 12px; }
.kpi .k { display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: var(--ink-muted); }
.kpi .v { display: flex; align-items: baseline; gap: 3px; margin-top: 4px; }
.kpi .v b { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.02em; }
.kpi .v s { font-size: 10px; color: var(--ink-muted); text-decoration: none; }
.kpi .d { display: flex; align-items: center; gap: 3px; font-size: 9px; margin-top: 3px; color: var(--stage-stable); font-weight: 600; }
.kpi .d.muted { color: var(--ink-muted); }

.radar-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.radar-svg { width: 232px; height: 216px; display: block; }
.radar-wrap svg.ic { width: 12px; height: 12px; }
.galaxy { width: 100%; }
.galaxy svg { width: 100%; height: auto; display: block; }
.legend { display: flex; align-items: center; gap: 8px; font-size: 9px; color: var(--ink-muted); flex-wrap: wrap; justify-content: center; text-align: center; line-height: 16px; }

.matrix-row { display: flex; flex-direction: column; gap: 5px; }
.matrix-row .l { display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.matrix-row .l .k { display: flex; align-items: center; gap: 4px; color: var(--ink); font-weight: 500; }
.matrix-row .l .p { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.matrix-row .bar { height: 7px; border-radius: 99px; background: var(--surface-container); overflow: hidden; }
.matrix-row .bar i { display: block; height: 100%; border-radius: 99px; }
.tone-rose i { background: var(--rose-solid); }
.tone-ink i { background: var(--ink-secondary); }
.tone-cooling i { background: var(--stage-cooling); }
.tone-muted i { background: var(--line-soft); }

/* --------------------------------------------------------------------------
   08 · 系统设置（Me）
   -------------------------------------------------------------------------- */
.me-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-1); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.me-card > .h { display: flex; align-items: center; justify-content: space-between; }
.me-card > .h .t { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.me-card > .h .r { font-size: 9px; color: var(--ink-muted); }

.me-head { display: flex; align-items: center; gap: 12px; }
.me-head .n { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 700; }
.me-head .e { font-size: 10px; color: var(--ink-muted); }
.me-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 10px; background: var(--surface-container); }
.me-line .l { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; }
.me-line .l .sub { font-size: 9px; color: var(--ink-muted); font-weight: 400; }
.me-line .r { display: flex; align-items: center; gap: 3px; font-size: 10px; color: var(--ink-muted); }

.switch { width: 46px; height: 27px; border-radius: 99px; background: var(--surface-variant); position: relative; flex: none; transition: background .2s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 99px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.switch.on { background: var(--rose-solid); }
.switch.on i { transform: translateX(19px); }

.opt-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.opt-seg button {
  height: 52px; border-radius: 10px; background: var(--surface-container); border: 1px solid transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 10px; font-weight: 600; color: var(--ink-secondary);
}
.opt-seg button .ic { color: var(--ink-muted); }
.opt-seg button.on { background: var(--rose-wash); border-color: rgba(212, 83, 111, .45); color: var(--rose-deep); }
.opt-seg button.on .ic { color: var(--rose-deep); }
.opt-seg button s { font-size: 8px; color: var(--ink-muted); text-decoration: none; font-weight: 500; }

.opt-list { display: flex; flex-direction: column; gap: 6px; }
.opt-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px; border-radius: 10px; background: var(--surface-container); border: 1px solid transparent;
  font-size: 12px; font-weight: 600; color: var(--ink-secondary);
}
.opt-row.on { background: var(--rose-wash); border-color: rgba(212, 83, 111, .4); color: var(--rose-deep); }
.opt-row .l { display: flex; align-items: center; gap: 6px; }
.opt-row .dot { width: 14px; height: 14px; border-radius: 99px; border: 1.6px solid var(--line-soft); background: #fff; display: grid; place-items: center; }
.opt-row.on .dot { border-color: var(--rose-solid); background: var(--rose-solid); color: #fff; }

.stackbar { display: flex; height: 7px; border-radius: 99px; overflow: hidden; gap: 1px; }
.stackbar i { height: 100%; }
.stor-legend { display: flex; align-items: center; gap: 10px; font-size: 9px; color: var(--ink-muted); flex-wrap: wrap; }
.stor-legend span { display: inline-flex; align-items: center; gap: 4px; }
.stor-legend i { width: 6px; height: 6px; border-radius: 99px; }

.link-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line);
}
.link-row:last-child { border-bottom: 0; }
.link-row .ci { width: 32px; height: 32px; border-radius: 9px; background: var(--surface-container); display: grid; place-items: center; color: var(--ink-secondary); flex: none; }
.link-row .b { flex: 1; min-width: 0; }
.link-row .b b { display: block; font-size: 12px; font-weight: 600; }
.link-row .b s { display: block; font-size: 9px; color: var(--ink-muted); text-decoration: none; margin-top: 1px; }
.link-row .go { color: var(--ink-muted); }

.logout {
  height: 48px; border-radius: 999px; background: var(--rose-soft); color: var(--rose-deep);
  display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 600;
  width: 100%; border: 0; font-family: inherit; cursor: pointer;
}
.logout:disabled { opacity: .6; }
.ver-foot { text-align: center; font-size: 9px; color: var(--ink-muted); line-height: 15px; }
.ver-foot b { font-weight: 600; }

/* --------------------------------------------------------------------------
   09 · 移动端落地页（Landing）
   -------------------------------------------------------------------------- */
.lp { padding: calc(env(safe-area-inset-top, 0px) + 8px) var(--margin) calc(28px + env(safe-area-inset-bottom, 0px)); }
.lp-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 10px; }
.lp-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--rose-soft); color: var(--rose-deep); font-size: 10px; font-weight: 600;
  box-shadow: 0 1px 3px rgba(212, 83, 111, .12);
}
.lp-badge i { width: 6px; height: 6px; border-radius: 99px; background: var(--rose-solid); animation: pulse 2s infinite; }
.lp-zk { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; letter-spacing: .1em; color: var(--ink-muted); text-transform: uppercase; }

.lp-hero {
  position: relative; overflow: hidden; border-radius: 18px; padding: 18px;
  background: #f2f3fd; box-shadow: var(--sh-1); margin-bottom: 16px;
}
.lp-hero::before { content: ''; position: absolute; right: -40px; top: -46px; width: 180px; height: 180px; border-radius: 999px; background: rgba(253, 238, 242, .8); filter: blur(30px); }
.lp-hero::after { content: ''; position: absolute; left: -30px; bottom: -20px; width: 150px; height: 150px; border-radius: 999px; background: rgba(127, 242, 236, .28); filter: blur(28px); }
.lp-hero > * { position: relative; z-index: 1; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--rose-ink); }
.lp-h1 { font-size: 26px; line-height: 34px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin-top: 8px; }
.lp-h1 em {
  font-style: normal; display: block;
  background: linear-gradient(90deg, #a5304d, #b23c57, #d97706);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-p { font-size: 13px; line-height: 21px; color: var(--ink-secondary); margin-top: 8px; }
.lp-pulse {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 10px;
  border-radius: 12px; background: rgba(255, 255, 255, .8); box-shadow: 0 1px 3px rgba(23, 26, 33, .04);
}
.lp-pulse .l { display: flex; align-items: center; justify-content: space-between; flex: 1; font-size: 9px; color: var(--ink-muted); }
.lp-pulse .l b { color: var(--rose-deep); font-weight: 600; }

.lp-pills { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 2px; }
.lp-pill {
  flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px; border-radius: 999px;
  background: var(--panel); color: var(--ink-secondary); font-size: 11px; font-weight: 600;
  box-shadow: 0 1px 2px rgba(23, 26, 33, .05);
}
.lp-pill.on { background: var(--ink); color: #fff; box-shadow: 0 3px 10px rgba(23, 26, 33, .25); }
.lp-pill.on i { width: 6px; height: 6px; border-radius: 99px; background: var(--rose-solid); }

.lp-mod { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-1); padding: 15px; margin-bottom: 12px; }
.lp-mod .hd { display: flex; align-items: flex-start; justify-content: space-between; }
.lp-mod .ic-box { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; margin-right: 10px; }
.lp-mod .tt { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.lp-mod .sub { font-size: 9px; color: var(--ink-muted); margin-top: 2px; }
.lp-mod .go { width: 32px; height: 32px; border-radius: 999px; background: var(--surface-container); display: grid; place-items: center; color: var(--ink-secondary); flex: none; }
.lp-fact { margin-top: 12px; padding: 11px; border-radius: 12px; background: var(--panel-sunken); border: 1px solid rgba(231, 233, 239, .6); }
.lp-fact .who { display: flex; align-items: center; justify-content: space-between; font-size: 10px; }
.lp-fact .who .n { display: flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ink); }
.lp-fact .who .n i { width: 7px; height: 7px; border-radius: 99px; background: var(--stage-chatting); }
.lp-fact p { font-size: 11px; line-height: 17px; color: var(--ink-secondary); margin-top: 5px; }
.lp-fact .tags { display: flex; gap: 4px; margin-top: 7px; flex-wrap: wrap; }
.lp-fact .tags span { padding: 2px 6px; border-radius: 5px; font-size: 9px; }
.lp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.lp-quote { padding: 10px; border-radius: 10px; background: var(--panel-sunken); display: flex; flex-direction: column; gap: 4px; }
.lp-quote .k { display: flex; align-items: center; gap: 4px; font-size: 9px; color: var(--ink-muted); }
.lp-quote .b { font-size: 11px; line-height: 16px; font-weight: 600; color: var(--ink); }
.lp-quote .m { font-size: 9px; }
.lp-photo-note { margin-top: 12px; padding: 11px; border-radius: 12px; background: var(--rose-wash); }
.lp-photo-note p { font-size: 11px; line-height: 18px; color: var(--ink); font-weight: 500; }
.lp-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.lp-thumbs .t { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--surface-container); }
.lp-thumbs .t img { width: 100%; height: 100%; object-fit: cover; }
.lp-thumbs .t span { position: absolute; left: 4px; bottom: 4px; padding: 1px 5px; border-radius: 4px; background: rgba(23, 26, 33, .68); color: #fff; font-size: 8px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

.lp-sec-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 8px; }
.lp-sec-head .l { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; }
.lp-caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
.lp-cap { background: var(--panel); border-radius: 12px; box-shadow: 0 1px 3px rgba(23, 26, 33, .05); padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.lp-cap .i { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 2px; }
.lp-cap .t { font-size: 11px; font-weight: 600; color: var(--ink); }
.lp-cap .s { font-size: 9px; color: var(--ink-muted); }

.lp-cta { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.lp-cta .prim {
  height: 50px; border-radius: 999px; background: var(--rose-solid); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 600;
  box-shadow: 0 10px 24px -10px rgba(212, 83, 111, .8);
}
.lp-cta .ghost {
  height: 44px; border-radius: 999px; background: var(--panel); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600;
  box-shadow: 0 1px 3px rgba(23, 26, 33, .06);
}
.lp-foot { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 9px; color: var(--ink-muted); padding-top: 6px; }
.lp-foot a.pc { color: var(--rose-deep); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(212,83,111,.35); }

/* --------------------------------------------------------------------------
   10 · 注册 / 登录（Auth）
   -------------------------------------------------------------------------- */
.auth {
  min-height: 100dvh; padding: calc(env(safe-area-inset-top, 0px) + 28px) 20px calc(24px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(212, 83, 111, .16) 0%, rgba(249, 249, 255, 0) 62%),
    radial-gradient(80% 40% at 90% 8%, rgba(127, 242, 236, .18) 0%, rgba(249, 249, 255, 0) 60%),
    var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.auth-logo {
  position: relative; width: 76px; height: 76px; border-radius: 22px;
  background: linear-gradient(160deg, #23262e, #0b0d12);
  display: grid; place-items: center; color: var(--rose-solid);
  box-shadow: 0 16px 32px -14px rgba(11, 13, 18, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.auth-logo .dot { position: absolute; right: -3px; top: -3px; width: 12px; height: 12px; border-radius: 99px; background: var(--rose-solid); border: 2.5px solid var(--surface); }
.auth-h1 { font-size: 25px; line-height: 33px; font-weight: 700; letter-spacing: -.02em; margin-top: 18px; text-align: center; }
.auth-sub { font-size: 13px; line-height: 20px; color: var(--ink-muted); margin-top: 4px; text-align: center; }
.auth-card {
  width: 100%; margin-top: 22px; background: var(--panel); border-radius: 20px;
  border: 1px solid var(--line); box-shadow: 0 14px 40px -24px rgba(23, 26, 33, .35);
  padding: 18px; display: flex; flex-direction: column; gap: 13px;
}
.auth-card .field > label { font-size: 12px; font-weight: 600; color: var(--ink); }
.auth-card .input { height: 48px; border-radius: 12px; background: #f0f1fa; }
.auth-code { display: flex; gap: 8px; }
.auth-code .input { flex: 1; letter-spacing: .12em; }
.auth-resend {
  width: 100px; flex: none; border-radius: 12px; background: #f0f1fa; color: var(--ink-muted);
  font-size: 11px; font-weight: 600; display: grid; place-items: center;
}
.auth-invite { background: var(--rose-wash); border: 1px solid #f7dfe5; }
.auth-invite .input { background: transparent; padding-left: 38px; font-family: ui-monospace, monospace; font-weight: 600; }
.auth-ok {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px;
  background: #e9f7ee; color: #16794a;
}
.auth-ok .b { font-size: 11px; font-weight: 700; }
.auth-ok .s { font-size: 9px; color: #4b8c6d; }
.auth-turn { position: relative; }
.auth-turn .ic { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #8bb9a2; }
.auth-terms { display: flex; align-items: flex-start; gap: 8px; font-size: 10px; line-height: 16px; color: var(--ink-secondary); }
.auth-terms .box {
  width: 18px; height: 18px; border-radius: 5px; background: var(--rose-solid); color: #fff;
  display: grid; place-items: center; flex: none; margin-top: 1px;
}
.auth-terms a { color: var(--rose-deep); font-weight: 600; }
.auth-submit {
  height: 50px; border-radius: 999px; background: var(--rose-solid); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 600; box-shadow: 0 12px 26px -12px rgba(212, 83, 111, .8);
}
.auth-submit:active { background: var(--rose-deep); transform: scale(.99); }
.auth-foot { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--ink-secondary); }
.auth-foot a { color: var(--rose-deep); font-weight: 700; display: inline-flex; align-items: center; gap: 2px; }
.auth-safe { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .7); font-size: 10px; color: var(--ink-muted); }
.auth-note { display: flex; align-items: flex-start; gap: 6px; font-size: 10px; line-height: 16px; color: var(--ink-muted); }

.spin { width: 16px; height: 16px; border-radius: 99px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   99 · 占位（后续屏在此之后追加）
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   12 · 真实功能补充（v2.3.3）
   底部抽屉 / 迷你列表 / 展示面列表视图 / 电脑版专属提示
   -------------------------------------------------------------------------- */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--panel);
  border-radius: 20px 20px 0 0; padding: 10px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -14px 44px rgba(18, 18, 34, .22); animation: sheetUp .2s ease-out;
  max-height: 74vh; overflow: auto;
}
.sheet-grip { width: 38px; height: 4px; border-radius: 99px; background: var(--line-soft); margin: 2px auto 10px; }
.sheet-head { display: flex; align-items: baseline; gap: 8px; padding: 0 2px 10px; }
.sheet-head b { font-size: 13px; }
.sheet-head s { font-size: 10px; color: var(--ink-muted); text-decoration: none; }
.sheet .opt-row { width: 100%; }
@keyframes sheetUp { from { transform: translateY(16px); opacity: .5; } to { transform: none; opacity: 1; } }

button.link-row { width: 100%; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; color: inherit; }
.link-row:active { background: var(--surface-container); }

.mini-list { display: flex; flex-direction: column; gap: 8px; }
.mini-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px; background: var(--surface-container); }
.mini-main { flex: 1; min-width: 0; display: block; }
.mini-main b { display: block; font-size: 12px; font-weight: 600; }
.mini-main s { display: block; font-size: 9px; color: var(--ink-muted); text-decoration: none; margin-top: 2px; }
.mini-item .btn.xs { flex: none; }

/* 展示面：列表视图 */
.wall.list { column-count: 1; display: flex; flex-direction: column; gap: 10px; }
.wall.list .wall-item { display: flex; gap: 10px; margin: 0; align-items: stretch; }
.wall.list .wall-img { width: 88px; flex: none; aspect-ratio: 1 / 1 !important; border-radius: 12px; }
.wall.list .wall-body { padding: 2px 0; flex: 1; min-width: 0; justify-content: center; }

/* 话术：已收藏心形 + 只看收藏按钮态 */
.sc-icon.fav { color: var(--rose-solid); }
.sc-icon.fav .ic { fill: currentColor; }
.hd-search .sq.on { color: var(--rose-deep); background: var(--rose-wash); }

/* 素材卡日期不换行（11月4日 会被挤成两行） */
.wall-meta .d { white-space: nowrap; }
.wall-meta span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 电脑版专属功能标签 */
.pc-only { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 10px; }
.pc-only span {
  font-size: 10px; padding: 4px 8px; border-radius: 8px;
  background: var(--surface-container); color: var(--ink-secondary);
}