/* ============================================================
   Interlove · Design System
   样式表：设计令牌 + 基础 + 组件 + 模式
   主色取自 Logo #FF3D8A
   ============================================================ */

/* ---- 英文：几何人文无衬线 Figtree ---- */
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root{
  /* ===== 品牌 Brand ===== */
  --primary:#FF3D8A;          /* 主色 · Logo 色 · 链接/强调/浅底按钮 */
  --primary-press:#E22E76;    /* 实心按钮/按下 · 白字达 AA */
  --primary-deep:#B81F5C;     /* 更深 · 用于浅底上的文字 */
  --primary-tint:#FFF0F6;     /* 浅底 · 选中/浅色面 */
  --primary-tint-2:#FFE0EE;   /* 次浅底 · 描边/分隔 */

  /* ===== 语义 Semantic ===== */
  --success:#2DB87A;  --success-tint:#E6F6EE;  --success-deep:#1B7A4D;
  --danger:#E5484D;   --danger-tint:#FDECEC;   --danger-deep:#C2383C;
  --gold:#FFC75A;     --gold-tint:#FFF6E5;     --gold-deep:#9A6B12;

  /* ===== 身份 Identity ===== */
  --male:#3D7BFF;     --male-tint:#EBF1FF;
  --female:#FF8FB8;   --female-tint:#FFF0F6;

  /* ===== 中性 Neutral（暖调） ===== */
  --text1:#2E2826;   /* 标题/正文 暖近黑 */
  --text2:#6E6663;   /* 次要文字 */
  --text3:#A39B98;   /* 辅助/占位 */
  --text4:#C7C0BC;   /* 禁用文字 */
  --border:#ECE6E4;  /* 默认描边/分隔 */
  --border-2:#DCD5D2;/* 强描边 */
  --surface:#FFFFFF; /* 卡面 */
  --bg:#FAF7F6;      /* 页面背景 */
  --bg-sunken:#F2EEEC;/* 凹陷面/代码块 */
  --overlay:rgba(46,40,38,.45);

  /* ===== VIP 金属渐变 · 方向 D（暖金属 + 顶级品红钻；仅女会员）===== */
  --rose-bronze:linear-gradient(140deg,#F0C2A0,#D08F6A 28%,#9A5640 52%,#D08F6A 72%,#6E3A2C); /* 玫瑰铜 Bronze */
  --pearl-silver:linear-gradient(140deg,#FBF3EE,#E0D2C8 28%,#A89A8E 52%,#E0D2C8 72%,#7C6F64); /* 暖珠银 Silver */
  --champagne-gold:linear-gradient(140deg,#FBE7B0,#E7C277 28%,#B98A3A 52%,#E7C277 72%,#856017); /* 香槟金 Gold */
  --warm-platinum:linear-gradient(140deg,#FAF6F4,#DBD4D2 28%,#A39A98 52%,#DBD4D2 72%,#786F6C); /* 暖铂 Platinum */
  --signature-diamond:linear-gradient(140deg,#FFE6DC,#FF9FC2 28%,#FF3D8A 52%,#FF9FC2 72%,#B81F5C); /* 品红钻 Signature */
  /* 等级文字色（钤印于徽章内）*/
  --rose-bronze-ink:#3A2018; --pearl-silver-ink:#2E2826; --champagne-gold-ink:#43300C; --warm-platinum-ink:#2E2826; --signature-diamond-ink:#5A1030;
  /* 等级外发光 */
  --rose-bronze-glow:rgba(208,143,106,.45); --pearl-silver-glow:rgba(224,210,200,.40); --champagne-gold-glow:rgba(231,194,119,.46); --warm-platinum-glow:rgba(219,212,210,.40); --signature-diamond-glow:rgba(255,61,138,.55);

  /* ===== 圆角 Radius ===== */
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* ===== 阴影 Elevation ===== */
  --e1:0 1px 2px rgba(46,40,38,.06);
  --e2:0 1px 2px rgba(46,40,38,.04), 0 8px 24px rgba(46,40,38,.06);
  --e3:0 4px 10px rgba(46,40,38,.07), 0 18px 44px rgba(46,40,38,.11);
  --e-primary:0 3px 9px rgba(226,46,118,.26);

  /* ===== 字体族 ===== */
  --font-sans:"Figtree","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
}

/* ============================================================
   Reset & 基础
   ============================================================ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:84px;}
html,body{margin:0;}
body{
  background:var(--bg);color:var(--text1);
  font-family:var(--font-sans);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
code,.mono{font-family:var(--font-mono);font-size:.86em;}
::selection{background:var(--primary-tint-2);color:var(--primary-deep);}

/* ============================================================
   顶部导航
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(250,247,246,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.topbar .inner{
  max-width:1080px;margin:0 auto;padding:0 28px;height:60px;
  display:flex;align-items:center;gap:22px;
}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;letter-spacing:-.01em;}
.topbar .brand .mark{width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex:none;}
.topbar .brand .mark img{width:100%;height:100%;display:block;}
.topbar nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;}
.topbar nav a{
  font-size:13px;font-weight:600;color:var(--text2);text-decoration:none;
  padding:7px 12px;border-radius:var(--r-pill);transition:.16s;white-space:nowrap;
}
.topbar nav a:hover{color:var(--primary-press);background:var(--primary-tint);}

/* ============================================================
   布局骨架
   ============================================================ */
.wrap{max-width:1080px;margin:0 auto;padding:0 28px;}
.part{padding:72px 0 8px;}
.part-eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--primary);}
.part-title{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:8px 0 6px;}
.part-lede{font-size:16px;color:var(--text2);margin:0;}
.part-rule{height:1px;background:linear-gradient(90deg,var(--border),transparent);border:0;margin:22px 0 0;}

section.block{margin:44px 0;scroll-margin-top:84px;}
.block-head{display:flex;align-items:baseline;gap:13px;margin-bottom:4px;}
.block-num{font-size:13px;font-weight:800;color:var(--primary);font-variant-numeric:tabular-nums;}
.block h3{font-size:21px;font-weight:700;letter-spacing:-.01em;margin:0;}
.block-sub{font-size:14px;color:var(--text3);margin:5px 0 22px;}

/* 通用面板/网格 */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--e2);}
.grid{display:grid;gap:14px;}
.eyebrow-mini{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text3);margin:0 0 12px;}
.group{margin-bottom:30px;}
.group-title{font-size:13px;font-weight:700;color:var(--text2);margin:0 0 13px;display:flex;align-items:center;gap:10px;letter-spacing:.01em;}
.group-title::after{content:"";flex:1;height:1px;background:var(--border);}

/* ============================================================
   Masthead 封面
   ============================================================ */
.masthead{padding:64px 0 8px;display:flex;gap:30px;align-items:flex-start;}
.masthead .logo-chip{flex:none;width:120px;height:120px;display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 1px 2px rgba(46,40,38,.04)) drop-shadow(0 8px 24px rgba(46,40,38,.06));}
.masthead .logo-chip img{width:100%;height:100%;object-fit:contain;display:block;}
.masthead h1{font-size:46px;line-height:1.05;font-weight:800;letter-spacing:-.03em;margin:6px 0 12px;}
.masthead h1 .pink{color:var(--primary);}
.masthead .lede{font-size:18px;color:var(--text2);margin:0 0 18px;line-height:1.55;}
.masthead .lede b{color:var(--text1);font-weight:600;}
.meta-row{display:flex;gap:10px;flex-wrap:wrap;}
.meta-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--text2);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:6px 13px;box-shadow:var(--e1);}
.meta-chip b{color:var(--primary-press);}

/* ============================================================
   Foundations · 色彩 swatch
   ============================================================ */
.sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:13px;}
.sw{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--e1);}
.sw .chip{height:74px;display:flex;align-items:flex-end;justify-content:flex-end;padding:9px;border-radius:0;cursor:default;border:none;}
.sw .meta{padding:11px 13px 13px;}
.sw .role{font-size:13.5px;font-weight:700;}
.sw .hex{font-size:12px;color:var(--text3);font-family:var(--font-mono);margin-top:3px;text-transform:uppercase;}
.sw .use{font-size:11.5px;color:var(--text3);margin-top:7px;line-height:1.45;}
.sw .var{font-size:10.5px;color:var(--text4);font-family:var(--font-mono);margin-top:4px;}
.pill-tag{font-size:10px;font-weight:700;padding:3px 8px;border-radius:var(--r-pill);background:rgba(255,255,255,.88);color:var(--text2);letter-spacing:.02em;}

/* 中性色阶横条 */
.ramp{display:flex;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--border);box-shadow:var(--e1);}
.ramp .step{flex:1;height:64px;display:flex;align-items:flex-end;padding:7px;font-size:10px;font-family:var(--font-mono);}

/* 对比度表 */
table.contrast{width:100%;border-collapse:collapse;font-size:14px;}
table.contrast th,table.contrast td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--border);}
table.contrast th{font-size:11px;letter-spacing:.05em;color:var(--text3);font-weight:700;text-transform:uppercase;}
table.contrast td.ratio{font-family:var(--font-mono);font-weight:600;font-variant-numeric:tabular-nums;}
.swatchword{display:inline-flex;align-items:center;gap:9px;}
.dot{width:18px;height:18px;border-radius:5px;flex:none;border:1px solid rgba(46,40,38,.1);}
.tag{font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--r-xs);}
.tag.pass{background:var(--success-tint);color:var(--success-deep);}
.tag.aa{background:var(--primary-tint);color:var(--primary-deep);}

/* ============================================================
   Foundations · 排版
   ============================================================ */
.type-row{display:grid;grid-template-columns:118px 1fr;gap:20px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--border);}
.type-row:last-child{border-bottom:0;}
.type-spec{font-size:12px;color:var(--text3);font-family:var(--font-mono);line-height:1.7;}
.type-spec b{display:block;color:var(--text2);font-family:var(--font-sans);font-size:12.5px;font-weight:700;margin-bottom:3px;}
.type-sample .en{color:var(--text1);}
.type-sample .cn{color:var(--text2);margin-top:4px;}
.t-display{font-size:44px;line-height:1.05;font-weight:800;letter-spacing:-.03em;}
.t-h1{font-size:34px;line-height:1.12;font-weight:800;letter-spacing:-.02em;}
.t-h2{font-size:24px;line-height:1.25;font-weight:700;letter-spacing:-.01em;}
.t-h3{font-size:19px;line-height:1.4;font-weight:700;}
.t-title{font-size:16px;line-height:1.5;font-weight:600;}
.t-body{font-size:16px;line-height:1.6;font-weight:400;}
.t-bodysm{font-size:14px;line-height:1.6;font-weight:400;}
.t-caption{font-size:13px;line-height:1.5;font-weight:500;color:var(--text2);}
.t-micro{font-size:11px;line-height:1.4;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);}

/* ============================================================
   Foundations · 间距 / 圆角 / 阴影
   ============================================================ */
.space-grid{display:flex;flex-direction:column;gap:11px;}
.space-row{display:flex;align-items:center;gap:16px;font-size:13px;}
.space-row .bar{height:18px;background:var(--primary-tint-2);border-radius:4px;border:1px solid var(--primary-tint);}
.space-row .lab{font-family:var(--font-mono);color:var(--text2);width:130px;flex:none;font-size:12px;}
.radius-grid,.shadow-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;}
.radius-cell{text-align:center;}
.radius-box{height:84px;background:var(--surface);border:1.5px solid var(--primary);}
.radius-cell .l{font-size:12.5px;font-weight:600;margin-top:9px;}
.radius-cell .v{font-size:11px;color:var(--text3);font-family:var(--font-mono);}
.shadow-cell{text-align:center;}
.shadow-box{height:88px;background:var(--surface);border-radius:var(--r-md);}
.shadow-cell .l{font-size:12.5px;font-weight:600;margin-top:11px;}
.shadow-cell .v{font-size:11px;color:var(--text3);font-family:var(--font-mono);}

/* ============================================================
   Iconography
   ============================================================ */
.ico-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:11px;}
.icell{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  box-shadow:var(--e1);padding:18px 8px 12px;text-align:center;}
.icell .glyph{width:28px;height:28px;margin:0 auto 10px;color:var(--text1);}
.icell .glyph svg{width:100%;height:100%;display:block;}
.icell .l{font-size:12px;color:var(--text2);font-weight:500;}
.icell.accent .glyph{color:var(--primary);}

/* 封缄认证徽章 */
.seal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:16px;}
.seal-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--e1);padding:24px 12px 18px;text-align:center;}
.seal{position:relative;width:80px;height:80px;margin:0 auto 14px;filter:drop-shadow(0 5px 10px rgba(46,40,38,.18));}
.seal .fill{position:absolute;inset:0;clip-path:url(#sealClip);-webkit-clip-path:url(#sealClip);}
.seal .ico,.seal .vipwrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.seal .ico svg{width:38px;height:38px;}
.seal .vipwrap{flex-direction:column;gap:1px;}
.seal .vipwrap svg{width:28px;height:28px;}
.seal .vipwrap .lv{font-size:10.5px;font-weight:800;letter-spacing:.03em;line-height:1;}

/* VIP 奖章 · 方向 D（多层金属：底 + 内层高光面 + 对角反光 + 同色外发光）*/
.seal.vip{filter:drop-shadow(0 5px 10px rgba(46,40,38,.18)) drop-shadow(0 0 11px var(--glow,transparent));}
.seal.vip .base,.seal.vip .face,.seal.vip .sheen{position:absolute;clip-path:url(#sealClip);-webkit-clip-path:url(#sealClip);}
.seal.vip .base{inset:0;background:var(--g);}
.seal.vip .face{inset:9%;background:var(--gface);}
.seal.vip .sheen{inset:0;background:linear-gradient(118deg,transparent 33%,rgba(255,255,255,.6) 47%,transparent 54%);mix-blend-mode:screen;opacity:.85;}
.seal.vip .vipwrap{color:var(--ink);filter:drop-shadow(0 1px 0 rgba(255,255,255,.35));}
.seal.vip .vipwrap svg{width:37.5%;height:37.5%;}
/* 小尺寸封缄（用于卡片/信息流内联） */
.seal.xs{width:19px;height:19px;margin:0;filter:drop-shadow(0 1px 2px rgba(46,40,38,.22));flex:none;}
.seal.xs .ico svg{width:11px;height:11px;}
.seal.vip.xs{width:19px;height:19px;margin:0;flex:none;}
.seal.vip.xs .vipwrap svg{width:11px;height:11px;}
.seal.vip.xs .vipwrap .lv{display:none;}
.seal.v1{--g:var(--rose-bronze);--gface:linear-gradient(320deg,#6E3A2C,#D08F6A 46%,#F0C2A0);--glow:var(--rose-bronze-glow);--ink:var(--rose-bronze-ink);}
.seal.v2{--g:var(--pearl-silver);--gface:linear-gradient(320deg,#7C6F64,#E0D2C8 46%,#FBF3EE);--glow:var(--pearl-silver-glow);--ink:var(--pearl-silver-ink);}
.seal.v3{--g:var(--champagne-gold);--gface:linear-gradient(320deg,#856017,#E7C277 46%,#FBE7B0);--glow:var(--champagne-gold-glow);--ink:var(--champagne-gold-ink);}
.seal.v4{--g:var(--warm-platinum);--gface:linear-gradient(320deg,#786F6C,#DBD4D2 46%,#FAF6F4);--glow:var(--warm-platinum-glow);--ink:var(--warm-platinum-ink);}
.seal.v5{--g:var(--signature-diamond);--gface:linear-gradient(320deg,#B81F5C,#FF9FC2 46%,#FFE6DC);--glow:var(--signature-diamond-glow);--ink:var(--signature-diamond-ink);}
.g-pink{background:linear-gradient(180deg,#FF5C9E,#FF3D8A);}
.g-teal{background:linear-gradient(180deg,#3AD2CD,#22B3AE);}
.g-blue{background:linear-gradient(180deg,#5C92FF,#3D7BFF);}
.g-green{background:linear-gradient(180deg,#46C98C,#23A86C);}
.g-bronze{background:radial-gradient(circle at 36% 26%,rgba(255,255,255,.45),transparent 56%),linear-gradient(135deg,#C98A52,#9A5A2C);}
.g-silver{background:radial-gradient(circle at 36% 26%,rgba(255,255,255,.6),transparent 56%),linear-gradient(135deg,#D8D2CA,#9C948B);}
.g-gold{background:radial-gradient(circle at 36% 26%,rgba(255,255,255,.5),transparent 56%),linear-gradient(135deg,#F0C766,#C88E2C);}
.g-plat{background:radial-gradient(circle at 36% 26%,rgba(255,255,255,.6),transparent 56%),linear-gradient(135deg,#CFD6DC,#959FA9);}
.g-diamond{background:radial-gradient(circle at 36% 26%,rgba(255,255,255,.65),transparent 56%),linear-gradient(135deg,#C9EAF2,#5FB8D6);}
.seal-card .nm{font-size:15px;font-weight:700;}
.seal-card .nm small{display:block;font-weight:500;color:var(--text3);font-size:10px;letter-spacing:.12em;margin-top:3px;}
.seal-card .hex{font-size:10.5px;color:var(--text3);font-family:var(--font-mono);margin-top:7px;}

/* 2.2/2.3 自包含 SVG 徽章 */
.seal-svg,.vip-svg{width:80px;height:80px;display:block;margin:0 auto 14px;}
.seal-svg{filter:drop-shadow(0 5px 10px rgba(46,40,38,.18));}
.vip-svg{filter:drop-shadow(0 5px 10px rgba(46,40,38,.18));}
.vip-svg.v1{filter:drop-shadow(0 5px 10px rgba(46,40,38,.18)) drop-shadow(0 0 11px var(--rose-bronze-glow));}
.vip-svg.v2{filter:drop-shadow(0 5px 10px rgba(46,40,38,.18)) drop-shadow(0 0 11px var(--pearl-silver-glow));}
.vip-svg.v3{filter:drop-shadow(0 5px 10px rgba(46,40,38,.18)) drop-shadow(0 0 11px var(--champagne-gold-glow));}
.vip-svg.v4{filter:drop-shadow(0 5px 10px rgba(46,40,38,.18)) drop-shadow(0 0 11px var(--warm-platinum-glow));}
.vip-svg.v5{filter:drop-shadow(0 5px 10px rgba(46,40,38,.18)) drop-shadow(0 0 11px var(--signature-diamond-glow));}


/* spec callout */
.spec{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px;}
.spec .item{flex:1;min-width:180px;background:var(--bg-sunken);border-radius:var(--r-sm);padding:14px 16px;}
.spec .item .k{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);}
.spec .item .v{font-size:14px;font-weight:600;margin-top:5px;}

/* ============================================================
   Components 通用展示容器
   ============================================================ */
.demo{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--e2);padding:26px;}
.demo + .demo{margin-top:14px;}
.demo-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin:0 0 16px;}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.row.tight{gap:9px;}
.col{display:flex;flex-direction:column;gap:13px;}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:720px){.cols2{grid-template-columns:1fr;}}

/* ---- 按钮 ---- */
.btn{height:48px;padding:0 26px;border-radius:var(--r-pill);border:none;font-family:inherit;
  font-size:16px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:.16s;white-space:nowrap;}
.btn svg{width:18px;height:18px;}
.btn.primary{background:var(--primary-press);color:#fff;box-shadow:var(--e-primary);}
.btn.primary:hover{background:var(--primary-deep);}
.btn.ghost{background:var(--primary-tint);color:var(--primary-press);}
.btn.ghost:hover{background:var(--primary-tint-2);}
.btn.outline{background:transparent;color:var(--primary-press);border:1.5px solid var(--primary);}
.btn.outline:hover{background:var(--primary-tint);}
.btn.neutral{background:var(--bg-sunken);color:var(--text1);}
.btn.neutral:hover{background:#E9E4E1;}
.btn.danger{background:transparent;color:var(--danger-deep);border:1.5px solid var(--danger);}
.btn.danger:hover{background:var(--danger-tint);}
.btn.success{background:var(--success);color:#fff;}
.btn:disabled,.btn.disabled{background:var(--bg-sunken);color:var(--text4);box-shadow:none;cursor:not-allowed;border-color:var(--border);}
.btn.sm{height:38px;padding:0 18px;font-size:14px;}
.btn.lg{height:54px;padding:0 32px;font-size:17px;}
.btn.block{display:flex;width:100%;}
.btn.icon{width:48px;height:48px;padding:0;border-radius:var(--r-pill);}
.fab{width:60px;height:60px;border-radius:var(--r-pill);background:var(--primary-press);color:#fff;border:none;
  box-shadow:var(--e-primary);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.fab svg{width:26px;height:26px;}

/* ---- 输入 ---- */
.field{display:flex;flex-direction:column;gap:7px;max-width:340px;}
.field .lab{font-size:13px;font-weight:600;color:var(--text2);}
.field .lab .req{color:var(--danger);}
.input{height:50px;padding:0 16px;border-radius:var(--r-sm);border:1.5px solid var(--border-2);
  background:var(--surface);font-family:inherit;font-size:15px;color:var(--text1);transition:.16s;width:100%;}
.input::placeholder{color:var(--text3);}
.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tint);}
.input.err{border-color:var(--danger);}
.input.err:focus{box-shadow:0 0 0 3px var(--danger-tint);}
textarea.input{height:auto;padding:13px 16px;resize:vertical;min-height:92px;line-height:1.55;}
.field .help{font-size:12px;color:var(--text3);}
.field .help.err{color:var(--danger-deep);}
.search{display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;border-radius:var(--r-pill);
  background:var(--bg-sunken);border:1px solid var(--border);max-width:340px;}
.search svg{width:18px;height:18px;color:var(--text3);flex:none;}
.search input{border:none;background:none;font-family:inherit;font-size:15px;color:var(--text1);width:100%;}
.search input:focus{outline:none;}
.search input::placeholder{color:var(--text3);}
/* 验证码格子 */
.otp{display:flex;gap:10px;}
.otp .cell{width:46px;height:56px;border-radius:var(--r-sm);border:1.5px solid var(--border-2);
  display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:var(--text1);background:var(--surface);}
.otp .cell.filled{border-color:var(--primary);}
.otp .cell.active{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tint);}

/* ---- 选择控件 ---- */
.chip{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;border-radius:var(--r-pill);
  font-size:14px;font-weight:600;cursor:pointer;border:1.5px solid var(--border-2);background:var(--surface);color:var(--text2);transition:.16s;}
.chip:hover{border-color:var(--primary);color:var(--primary-press);}
.chip.on{background:var(--primary-tint);border-color:var(--primary);color:var(--primary-press);}
.chip.on::before{content:"✓";font-weight:800;}
.seg{display:inline-flex;background:var(--bg-sunken);border-radius:var(--r-pill);padding:4px;gap:2px;}
.seg button{border:none;background:none;font-family:inherit;font-size:14px;font-weight:600;color:var(--text2);
  padding:8px 18px;border-radius:var(--r-pill);cursor:pointer;transition:.16s;}
.seg button.on{background:var(--surface);color:var(--primary-press);box-shadow:var(--e1);}
.switch{position:relative;width:50px;height:30px;border-radius:var(--r-pill);background:var(--border-2);cursor:pointer;transition:.18s;flex:none;}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:var(--e1);transition:.18s;}
.switch.on{background:var(--success);}
.switch.on::after{left:23px;}
.radio,.checkbox{width:22px;height:22px;border-radius:50%;border:2px solid var(--border-2);flex:none;display:inline-flex;align-items:center;justify-content:center;}
.checkbox{border-radius:6px;}
.radio.on{border-color:var(--primary);}
.radio.on::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--primary);}
.checkbox.on{border-color:var(--primary);background:var(--primary);color:#fff;}
.checkbox.on svg{width:14px;height:14px;}
.opt-line{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:500;}

/* ---- 标签 / 徽标 ---- */
.badge{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:var(--r-pill);
  font-size:12px;font-weight:700;letter-spacing:.01em;}
.badge svg{width:13px;height:13px;}
.badge.male{background:var(--male-tint);color:var(--male);}
.badge.female{background:var(--female-tint);color:#D9568A;}
.badge.verified{background:var(--male-tint);color:var(--male);}
.badge.match{background:var(--primary-tint);color:var(--primary-press);}
.badge.like{background:var(--primary-tint);color:var(--primary-press);}
.badge.online{background:var(--success-tint);color:var(--success-deep);}
.badge.system{background:var(--bg-sunken);color:var(--text2);}
.badge.solid-male{background:var(--male);color:#fff;}
.badge.solid-female{background:var(--female);color:#fff;}
/* gender pill（图标库风格 实心胶囊） */
.gpill{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 14px 0 10px;border-radius:var(--r-pill);font-size:13px;font-weight:600;color:#fff;}
.gpill svg{width:15px;height:15px;}
.dot-online{width:11px;height:11px;border-radius:50%;background:var(--success);border:2px solid #fff;box-shadow:0 0 0 1px var(--border);}

/* ---- 头像 + 徽标叠加 ---- */
.avatar{position:relative;border-radius:50%;overflow:visible;flex:none;}
.avatar .pic{width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--bg-sunken);display:block;}
.avatar .ph{width:100%;height:100%;border-radius:50%;background:
  repeating-linear-gradient(135deg,#F0EAE7,#F0EAE7 7px,#E8E0DC 7px,#E8E0DC 14px);
  display:flex;align-items:center;justify-content:center;color:var(--text3);}
.avatar .ph svg{width:48%;height:48%;}
/* 性别徽标：右下角，强制 */
.av-gender{position:absolute;right:-2px;bottom:-2px;border-radius:50%;border:2.5px solid #fff;
  display:flex;align-items:center;justify-content:center;color:#fff;}
.av-gender.male{background:var(--male);}
.av-gender.female{background:var(--female);}
.av-gender svg{width:62%;height:62%;}
/* 实名认证封缄：左下错位（扇贝封缄造型，与 2.2 认证体系一致）*/
.av-verified{position:absolute;left:-3px;bottom:-3px;filter:drop-shadow(0 2px 4px rgba(46,40,38,.28));}
.av-verified .fill{clip-path:url(#sealClip);-webkit-clip-path:url(#sealClip);width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;color:#fff;}
.av-verified .fill svg{width:56%;height:56%;}
/* VIP 徽标：右上 封缄小盾 */
.av-vip{position:absolute;right:-4px;top:-4px;filter:drop-shadow(0 2px 4px rgba(46,40,38,.25));}
.av-vip .fill{clip-path:url(#sealClip);-webkit-clip-path:url(#sealClip);width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;color:#fff;}
.av-vip .fill svg{width:54%;height:54%;}
/* 尺寸 */
.avatar.s40{width:40px;height:40px;} .avatar.s40 .av-gender{width:16px;height:16px;}
.avatar.s56{width:56px;height:56px;} .avatar.s56 .av-gender{width:20px;height:20px;} .avatar.s56 .av-verified{width:21px;height:21px;} .avatar.s56 .av-vip{width:24px;height:24px;}
.avatar.s72{width:72px;height:72px;} .avatar.s72 .av-gender{width:24px;height:24px;} .avatar.s72 .av-verified{width:25px;height:25px;} .avatar.s72 .av-vip{width:28px;height:28px;}
.avatar.s96{width:96px;height:96px;} .avatar.s96 .av-gender{width:30px;height:30px;} .avatar.s96 .av-verified{width:31px;height:31px;} .avatar.s96 .av-vip{width:34px;height:34px;}
.avatar.off .pic,.avatar.off .ph{filter:grayscale(1);opacity:.55;}

/* ---- 列表项 ---- */
.list{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--e2);overflow:hidden;max-width:440px;}
.li{display:flex;align-items:center;gap:13px;padding:14px 16px;border-bottom:1px solid var(--border);}
.li:last-child{border-bottom:0;}
.li .tx{flex:1;min-width:0;}
.li .tx .nm{font-size:15px;font-weight:600;display:flex;align-items:center;gap:7px;}
.li .tx .last{font-size:13px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.li .meta{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none;}
.li .time{font-size:11.5px;color:var(--text3);}
.li .unread{min-width:19px;height:19px;padding:0 5px;border-radius:var(--r-pill);background:var(--primary-press);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;}

/* ---- Tab Bar ---- */
.tabbar{display:flex;background:var(--surface);border-top:1px solid var(--border);border-radius:0 0 var(--r-lg) var(--r-lg);
  max-width:380px;box-shadow:var(--e2);overflow:hidden;}
.tabbar .tab{flex:1;padding:10px 0 9px;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--text3);cursor:pointer;position:relative;}
.tabbar .tab svg{width:25px;height:25px;}
.tabbar .tab .tl{font-size:10.5px;font-weight:600;}
.tabbar .tab.on{color:var(--primary-press);}
.tabbar .tab .rd{position:absolute;top:7px;right:50%;margin-right:-18px;width:8px;height:8px;border-radius:50%;background:var(--primary);border:1.5px solid #fff;}

/* ---- 弹窗 / Toast / Banner ---- */
.modal{max-width:340px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--e3);overflow:hidden;}
.modal .body{padding:24px 22px;}
.modal .title{font-size:18px;font-weight:700;}
.modal .desc{font-size:14px;color:var(--text2);margin-top:8px;line-height:1.55;}
.modal .actions{display:flex;gap:10px;padding:0 22px 22px;}
.modal .actions .btn{flex:1;}
.toast{display:inline-flex;align-items:center;gap:10px;background:#2E2826;color:#fff;border-radius:var(--r-pill);
  padding:12px 20px;font-size:14px;font-weight:600;box-shadow:var(--e3);}
.toast svg{width:18px;height:18px;}
.toast .ic-ok{color:#5FE0A6;}
.banner{display:flex;align-items:center;gap:12px;border-radius:var(--r-md);padding:14px 16px;font-size:14px;max-width:440px;}
.banner svg{width:20px;height:20px;flex:none;}
.banner .bx{flex:1;}
.banner .bx b{font-weight:700;}
.banner.warn{background:var(--gold-tint);color:var(--gold-deep);border:1px solid #F4E2B8;}
.banner.info{background:var(--primary-tint);color:var(--primary-deep);border:1px solid var(--primary-tint-2);}
.banner.danger{background:var(--danger-tint);color:var(--danger-deep);border:1px solid #F6CFCF;}

/* ---- Toast 变体（深底胶囊；图标色区分语义；支持双行 + 关闭 + 加载）---- */
.toast-stack{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.toast.block{align-items:flex-start;border-radius:var(--r-md);padding:13px 15px;max-width:330px;}
.toast .tbody{display:flex;flex-direction:column;gap:2px;text-align:left;}
.toast .tt{font-weight:700;}
.toast .ts{font-weight:500;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.72);}
.toast .ic-ok{color:#5FE0A6;}
.toast .ic-info{color:#7FB4FF;}
.toast .ic-warn{color:#FFD27A;}
.toast .ic-err{color:#FF8A9B;}
.toast .tclose{margin-left:4px;width:16px;height:16px;color:rgba(255,255,255,.5);cursor:pointer;flex:none;}
.toast .tclose:hover{color:#fff;}
.toast .tspin{width:18px;height:18px;border-radius:50%;flex:none;
  border:2.4px solid rgba(255,255,255,.22);border-top-color:#fff;animation:tspin .8s linear infinite;}
@keyframes tspin{to{transform:rotate(360deg);}}

/* ---- 下拉筛选 Dropdown filter（可多选 · 可搜索 · 可输入新值）---- */
.dd{position:relative;max-width:360px;width:100%;}
.dd-trigger{width:100%;min-height:50px;display:flex;align-items:center;gap:10px;padding:7px 13px;
  border-radius:var(--r-sm);border:1.5px solid var(--border-2);background:var(--surface);
  cursor:pointer;font-family:inherit;font-size:15px;color:var(--text1);transition:.16s;text-align:left;}
.dd-trigger:hover{border-color:var(--primary);}
.dd.open .dd-trigger{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tint);}
.dd-val{flex:1;display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0;}
.dd-ph{color:var(--text3);}
.dd-tag{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 5px 0 11px;border-radius:var(--r-pill);
  background:var(--primary-tint);color:var(--primary-deep);font-size:13px;font-weight:600;}
.dd-tag .x{width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(184,31,92,.13);cursor:pointer;flex:none;}
.dd-tag .x svg{width:9px;height:9px;}
.dd-chev{width:18px;height:18px;color:var(--text3);flex:none;transition:.2s;}
.dd.open .dd-chev{transform:rotate(180deg);color:var(--primary);}
.dd-panel{margin-top:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--e3);overflow:hidden;display:none;}
.dd.open .dd-panel{display:block;}
.dd-srch{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--border);}
.dd-srch svg{width:17px;height:17px;color:var(--text3);flex:none;}
.dd-srch input{border:none;background:none;font-family:inherit;font-size:14.5px;color:var(--text1);width:100%;}
.dd-srch input:focus{outline:none;}
.dd-srch input::placeholder{color:var(--text3);}
.dd-list{max-height:222px;overflow:auto;padding:6px;}
.dd-opt{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-sm);cursor:pointer;
  font-size:14.5px;font-weight:500;color:var(--text1);}
.dd-opt:hover{background:var(--bg-sunken);}
.dd-opt .checkbox{width:20px;height:20px;border-width:2px;}
.dd-opt .checkbox svg{width:12px;height:12px;}
.dd-opt .cap{flex:1;}
.dd-opt .sub{font-size:12px;color:var(--text3);font-weight:500;}
.dd-add{display:flex;align-items:center;gap:9px;padding:10px 11px;border-radius:var(--r-sm);cursor:pointer;
  font-size:14px;font-weight:600;color:var(--primary-press);}
.dd-add:hover{background:var(--primary-tint);}
.dd-add svg{width:18px;height:18px;flex:none;}
.dd-add b{font-weight:700;}
.dd-none{padding:18px 12px;text-align:center;font-size:13px;color:var(--text3);}
.dd-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;border-top:1px solid var(--border);}
.dd-foot .lnk{font-size:13px;font-weight:600;color:var(--text2);cursor:pointer;background:none;border:none;font-family:inherit;padding:4px;}
.dd-foot .lnk:hover{color:var(--primary-press);}
.dd-foot .btn{height:38px;padding:0 18px;font-size:14px;}

/* ---- 多级联动 Cascader（国→省→市 · 叶层多选 · 可搜索）---- */
.casc{position:relative;max-width:520px;width:100%;}
.casc .dd-trigger{min-height:50px;}
.casc-panel{margin-top:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--e3);overflow:hidden;display:none;}
.casc.open .casc-panel{display:block;}
.casc-cols{display:grid;grid-template-columns:1fr 1fr 1.25fr;}
.casc-col{max-height:248px;overflow:auto;padding:6px;border-right:1px solid var(--border);}
.casc-col:last-child{border-right:none;}
.casc-colh{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);padding:9px 11px 7px;}
.casc-node{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:var(--r-sm);cursor:pointer;
  font-size:14px;font-weight:500;color:var(--text1);}
.casc-node:hover{background:var(--bg-sunken);}
.casc-node.active{background:var(--primary-tint);color:var(--primary-press);font-weight:600;}
.casc-node .cap{flex:1;}
.casc-node .chev{width:15px;height:15px;color:var(--text3);flex:none;}
.casc-node.active .chev{color:var(--primary);}
.casc-node .checkbox{width:19px;height:19px;border-width:2px;flex:none;}
.casc-node .checkbox svg{width:11px;height:11px;}
.casc-results{max-height:248px;overflow:auto;padding:6px;}
.casc-pathrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);cursor:pointer;font-size:14px;font-weight:500;}
.casc-pathrow:hover{background:var(--bg-sunken);}
.casc-pathrow .checkbox{width:19px;height:19px;border-width:2px;flex:none;}
.casc-pathrow .checkbox svg{width:11px;height:11px;}
.casc-pathrow .pdim{color:var(--text3);}
.casc-pathrow .pcur{color:var(--text1);font-weight:600;}
.casc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;border-top:1px solid var(--border);}
.casc-foot .cnt{font-size:13px;color:var(--text3);}
.casc-foot .cnt b{color:var(--primary-press);font-weight:700;}
.casc-foot .btn{height:38px;padding:0 18px;font-size:14px;}

/* ============================================================
   移动端底部弹层（下拉筛选 / 多级联动 · 触点 ≥44px）
   ============================================================ */
.mframe{position:relative;width:390px;height:660px;border-radius:36px;overflow:hidden;flex:none;
  background:var(--bg);border:1px solid var(--border);box-shadow:var(--e3);}
.mframe .mtop{height:50px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:7px;
  font-size:14px;font-weight:700;color:var(--text1);font-variant-numeric:tabular-nums;}
.mscreen{position:absolute;top:50px;left:0;right:0;bottom:0;}
.mscreen .mbody{padding:20px;}
.mfield-lab{font-size:13.5px;font-weight:600;color:var(--text2);margin-bottom:9px;}
.mfield{min-height:54px;display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:var(--r-sm);
  border:1.5px solid var(--border-2);background:var(--surface);cursor:pointer;transition:.16s;}
.mframe.open .mfield{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tint);}
.mfield .mval{flex:1;display:flex;flex-wrap:wrap;gap:7px;align-items:center;min-width:0;}
.mfield .dd-chev{width:20px;height:20px;color:var(--text3);flex:none;}
.mfield .dd-tag{height:32px;font-size:13.5px;}
.mfield .dd-tag .x{width:20px;height:20px;}
.mfield .dd-tag .x svg{width:10px;height:10px;}

.msheet-scrim{position:absolute;inset:0;background:var(--overlay);opacity:0;pointer-events:none;transition:opacity .22s;}
.mframe.open .msheet-scrim{opacity:1;pointer-events:auto;}
.msheet{position:absolute;left:0;right:0;bottom:0;background:var(--surface);
  border-radius:24px 24px 0 0;box-shadow:0 -12px 34px rgba(46,40,38,.18);
  display:flex;flex-direction:column;max-height:80%;
  transform:translateY(101%);transition:transform .28s cubic-bezier(.22,1,.36,1);}
.mframe.open .msheet{transform:translateY(0);}
.msheet .grab{width:42px;height:4px;border-radius:2px;background:var(--border-2);margin:10px auto 2px;flex:none;}
.sh-head{display:flex;align-items:center;justify-content:space-between;padding:10px 18px 12px;flex:none;}
.sh-title{font-size:17px;font-weight:700;}
.sh-x{width:34px;height:34px;border-radius:50%;background:var(--bg-sunken);display:flex;align-items:center;justify-content:center;color:var(--text2);cursor:pointer;flex:none;}
.sh-x svg{width:17px;height:17px;}
.sh-srch{display:flex;align-items:center;gap:10px;height:48px;margin:0 18px 6px;padding:0 16px;border-radius:var(--r-pill);
  background:var(--bg-sunken);border:1px solid var(--border);flex:none;}
.sh-srch svg{width:18px;height:18px;color:var(--text3);flex:none;}
.sh-srch input{border:none;background:none;font-family:inherit;font-size:15px;color:var(--text1);width:100%;}
.sh-srch input:focus{outline:none;}
.sh-srch input::placeholder{color:var(--text3);}
.sh-crumbs{display:flex;align-items:center;gap:4px;padding:8px 18px 6px;flex-wrap:wrap;flex:none;}
.sh-crumb{font-size:14px;font-weight:600;color:var(--text3);cursor:pointer;padding:4px 2px;}
.sh-crumb.cur{color:var(--primary-press);}
.sh-crumbs .sep{color:var(--text4);font-size:13px;}
.sh-list{overflow:auto;padding:2px 10px 6px;flex:1;-webkit-overflow-scrolling:touch;}
.sh-opt{display:flex;align-items:center;gap:13px;min-height:52px;padding:7px 12px;border-radius:var(--r-sm);cursor:pointer;
  font-size:15.5px;font-weight:500;color:var(--text1);}
.sh-opt:active{background:var(--bg-sunken);}
.sh-opt.active{background:var(--primary-tint);color:var(--primary-press);font-weight:600;}
.sh-opt .checkbox{width:24px;height:24px;border-width:2px;flex:none;}
.sh-opt .checkbox svg{width:14px;height:14px;}
.sh-opt .cap{flex:1;}
.sh-opt .sub{font-size:13px;color:var(--text3);font-weight:500;}
.sh-opt.active .sub{color:var(--primary-press);opacity:.7;}
.sh-opt .ch{width:19px;height:19px;color:var(--text3);flex:none;}
.sh-opt.active .ch{color:var(--primary);}
.sh-add{display:flex;align-items:center;gap:12px;min-height:52px;padding:7px 12px;border-radius:var(--r-sm);cursor:pointer;
  font-size:15px;font-weight:600;color:var(--primary-press);}
.sh-add:active{background:var(--primary-tint);}
.sh-add svg{width:22px;height:22px;flex:none;}
.sh-none{padding:26px 12px;text-align:center;font-size:14px;color:var(--text3);}
.sh-foot{display:flex;align-items:center;gap:14px;padding:12px 18px 18px;border-top:1px solid var(--border);flex:none;}
.sh-foot .lnk{font-size:14.5px;font-weight:600;color:var(--text2);cursor:pointer;background:none;border:none;font-family:inherit;padding:8px 4px;}
.sh-foot .cnt{font-size:14px;color:var(--text2);}
.sh-foot .cnt b{color:var(--primary-press);font-weight:700;}
.sh-foot .btn{flex:1;height:50px;}

/* ---- 进度 / 倒计时 ---- */
.prog{height:9px;border-radius:var(--r-pill);background:var(--bg-sunken);overflow:hidden;max-width:340px;}
.prog .fill{height:100%;border-radius:var(--r-pill);background:var(--primary);}
.prog.gold .fill{background:linear-gradient(90deg,var(--gold),#F5A623);}
.countdown{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-weight:700;font-size:15px;color:var(--primary-press);
  background:var(--primary-tint);padding:8px 14px;border-radius:var(--r-sm);}
.countdown svg{width:16px;height:16px;}

/* ---- 空状态 ---- */
.empty{text-align:center;padding:40px 20px;max-width:300px;}
.empty .ill{width:88px;height:88px;border-radius:50%;background:var(--primary-tint);margin:0 auto 16px;display:flex;align-items:center;justify-content:center;color:var(--primary);}
.empty .ill svg{width:40px;height:40px;}
.empty .et{font-size:16px;font-weight:700;}
.empty .es{font-size:13.5px;color:var(--text3);margin-top:6px;}

/* ============================================================
   Patterns 产品特有
   ============================================================ */
.canvas{background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--r-lg);padding:30px;
  display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start;justify-content:center;}
.phone{width:300px;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--e3);overflow:hidden;border:1px solid var(--border);}
.phone-cap{font-size:12px;font-weight:700;color:var(--text3);text-align:center;margin-top:12px;letter-spacing:.02em;}

/* 用户信息流卡片 */
.ucard{width:230px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--e2);overflow:hidden;border:1px solid var(--border);}
.ucard.vip3{border:2px solid transparent;background:
  linear-gradient(var(--surface),var(--surface)) padding-box,
  var(--champagne-gold) border-box;box-shadow:var(--e2),0 0 0 1px rgba(231,194,119,.34);}
.ucard.vip5{border:2px solid transparent;background:
  linear-gradient(var(--surface),var(--surface)) padding-box,
  var(--signature-diamond) border-box;box-shadow:var(--e2),0 0 0 1px rgba(255,61,138,.34);}
.ucard .cover{height:230px;position:relative;background:
  repeating-linear-gradient(135deg,#F0EAE7,#F0EAE7 9px,#E8E0DC 9px,#E8E0DC 18px);}
.ucard .cover .mono-note{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11px;color:var(--text3);}
.ucard .cover .topbadges{position:absolute;top:11px;left:11px;right:11px;display:flex;gap:6px;}
.ucard .cover .heart{position:absolute;right:12px;bottom:12px;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.92);box-shadow:var(--e2);display:flex;align-items:center;justify-content:center;color:var(--primary);cursor:pointer;}
.ucard .cover .heart svg{width:22px;height:22px;}
.ucard .info{padding:13px 15px 16px;}
.ucard .info .nmline{display:flex;align-items:center;gap:7px;}
.ucard .info .nm{font-size:17px;font-weight:700;}
.ucard .info .age{font-size:16px;color:var(--text2);font-weight:500;}
.ucard .info .sub{font-size:13px;color:var(--text3);margin-top:3px;}
.ucard .info .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px;}
.minitag{font-size:11px;font-weight:600;color:var(--text2);background:var(--bg-sunken);padding:4px 9px;border-radius:var(--r-pill);}

/* 聊天气泡 */
.chat{background:var(--bg);padding:18px;display:flex;flex-direction:column;gap:12px;}
.bubble-row{display:flex;gap:9px;max-width:84%;}
.bubble-row.me{align-self:flex-end;flex-direction:row-reverse;}
.bubble{padding:10px 14px;border-radius:18px;font-size:14.5px;line-height:1.5;position:relative;}
.bubble.them{background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:5px;color:var(--text1);}
.bubble.me{background:var(--primary-press);color:#fff;border-bottom-right-radius:5px;}
.bubble.orig{border-bottom-left-radius:18px;}
.bubble.me.orig{border-bottom-right-radius:18px;}
.bubble-col{display:flex;flex-direction:column;gap:4px;align-items:flex-start;min-width:0;}
.bubble-row.me .bubble-col{align-items:flex-end;}
.transby{display:flex;align-items:center;gap:5px;margin-top:6px;font-size:11px;line-height:1.3;color:var(--text3);}
.transby svg{width:13px;height:13px;flex:none;opacity:.85;}
.bubble.me .transby{color:rgba(255,255,255,.72);}
.bubble .flag{flex:none;}
.btime{font-size:10.5px;color:var(--text3);margin-top:4px;}
.btime .tz{color:var(--text4);}
.sysmsg{align-self:center;font-size:12px;color:var(--text3);text-align:center;max-width:80%;}
.sysmsg.recall{font-style:italic;}
.sysmsg.recall .warn{color:var(--danger);}

/* 配对邀请卡 P-049 */
.invite{width:320px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--e3);overflow:hidden;}
.invite .hd{background:linear-gradient(135deg,#FF5C9E,#E22E76);color:#fff;padding:20px 20px 18px;text-align:center;position:relative;}
.invite .hd .kk{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.9;}
.invite .hd .tt{font-size:19px;font-weight:800;margin-top:5px;}
.invite .bd{padding:18px 20px 20px;}
.invite .who{display:flex;align-items:center;gap:13px;}
.invite .who .nm{font-size:16px;font-weight:700;display:flex;align-items:center;gap:6px;}
.invite .who .meta{font-size:13px;color:var(--text3);margin-top:2px;}
.invite .reason{background:var(--primary-tint);border-radius:var(--r-sm);padding:12px 14px;margin:14px 0;font-size:13.5px;color:var(--primary-deep);line-height:1.5;}
.invite .warn-row{display:flex;gap:9px;background:var(--gold-tint);border:1px solid #F4E2B8;border-radius:var(--r-sm);padding:11px 13px;font-size:12.5px;color:var(--gold-deep);line-height:1.45;}
.invite .warn-row svg{width:17px;height:17px;flex:none;margin-top:1px;}
.invite .cd-row{display:flex;align-items:center;justify-content:center;margin:15px 0 16px;}
.invite .acts{display:flex;flex-direction:column;gap:9px;}
.invite .later{text-align:center;font-size:13px;font-weight:600;color:var(--text3);cursor:pointer;padding:4px;}

/* 配对成功 P-059 */
.matched{width:300px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e3);
  background:linear-gradient(165deg,#FF8FB8,#FF3D8A 45%,#F0C766);color:#fff;text-align:center;padding:30px 24px 26px;}
.matched .av2{display:flex;justify-content:center;margin-bottom:18px;}
.matched .av2 .avatar{border:3px solid rgba(255,255,255,.9);}
.matched .av2 .avatar:last-child{margin-left:-18px;}
.matched .heart-c{width:38px;height:38px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;
  color:var(--primary);position:relative;z-index:2;margin:0 -8px;align-self:center;box-shadow:var(--e2);}
.matched .mt{font-size:23px;font-weight:800;}
.matched .ms{font-size:14px;opacity:.92;margin-top:7px;line-height:1.5;}
.matched .btn{margin-top:20px;background:#fff;color:var(--primary-press);box-shadow:none;}

/* VIP 状态卡 P-080 */
.vipcard{width:340px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e2);background:var(--surface);border:1px solid var(--border);}
.vipcard .strip{height:8px;}
.vipcard .strip.v1{background:var(--rose-bronze);} .vipcard .strip.v2{background:var(--pearl-silver);}
.vipcard .strip.v3{background:var(--champagne-gold);} .vipcard .strip.v4{background:var(--warm-platinum);} .vipcard .strip.v5{background:var(--signature-diamond);}
.vipcard .vbody{padding:18px 20px 20px;}
.vipcard .vtop{display:flex;align-items:center;gap:12px;}
.vipcard .vseal{width:46px;height:46px;position:relative;flex:none;filter:drop-shadow(0 3px 6px rgba(46,40,38,.2));}
.vipcard .vseal .fill{position:absolute;inset:0;clip-path:url(#sealClip);-webkit-clip-path:url(#sealClip);display:flex;align-items:center;justify-content:center;}
.vipcard .vseal .fill svg{width:46%;height:46%;}
.vipcard .vname{font-size:17px;font-weight:800;}
.vipcard .vsub{font-size:12.5px;color:var(--text3);margin-top:2px;}
.vipcard .vquota{margin-top:16px;}
.vipcard .vquota .ql{display:flex;justify-content:space-between;font-size:12.5px;color:var(--text2);margin-bottom:7px;}
.vipcard .vquota .ql b{color:var(--text1);}

/* 爱豆充值档位 */
.coin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-width:520px;}
.coin{background:var(--surface);border:1.5px solid var(--border-2);border-radius:var(--r-md);padding:16px 14px;text-align:center;position:relative;cursor:pointer;transition:.16s;}
.coin:hover{border-color:var(--primary);}
.coin.rec{border-color:var(--primary);background:var(--primary-tint);}
.coin .amt{font-size:22px;font-weight:800;color:var(--primary-press);display:flex;align-items:center;justify-content:center;gap:5px;}
.coin .amt svg{width:20px;height:20px;}
.coin .price{font-size:15px;font-weight:700;margin-top:8px;}
.coin .unit{font-size:11px;color:var(--text3);margin-top:4px;font-family:var(--font-mono);}
.coin .ribbon{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--primary-press);color:#fff;
  font-size:10px;font-weight:700;padding:3px 10px;border-radius:var(--r-pill);white-space:nowrap;box-shadow:var(--e-primary);}
.coin .ribbon.gold{background:var(--gold-deep);}

/* 叠加层级说明图 */
.layer-demo{display:flex;gap:30px;flex-wrap:wrap;align-items:center;}
.layer-note{font-size:13px;color:var(--text2);line-height:1.7;}
.layer-note b{color:var(--text1);}
.layer-note .k{display:inline-flex;align-items:center;gap:6px;font-weight:600;}
.swatch-inline{width:13px;height:13px;border-radius:4px;display:inline-block;vertical-align:-2px;}

/* ============================================================
   3.10 双滑块 Range slider（年龄 / 身高 / 几岁到现驻国 · 仅整数）
   ============================================================ */
.rng{max-width:360px;width:100%;}
.rng-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;}
.rng-head .rl{font-size:13.5px;font-weight:600;color:var(--text2);}
.rng-head .rv{font-size:16px;font-weight:700;color:var(--primary-press);font-variant-numeric:tabular-nums;letter-spacing:.01em;}
.rng-track{position:relative;height:30px;display:flex;align-items:center;touch-action:none;user-select:none;}
.rng-rail{position:absolute;left:0;right:0;height:6px;border-radius:var(--r-pill);background:var(--bg-sunken);}
.rng-fill{position:absolute;height:6px;border-radius:var(--r-pill);background:var(--primary);}
.rng-thumb{position:absolute;top:50%;width:28px;height:28px;border-radius:50%;background:#fff;
  border:2.5px solid var(--primary);box-shadow:var(--e2);transform:translate(-50%,-50%);cursor:grab;z-index:2;}
.rng-thumb::after{content:"";position:absolute;inset:-9px;}            /* 扩大触点 ≥46px */
.rng-thumb:active,.rng-thumb.drag{cursor:grabbing;box-shadow:var(--e2),0 0 0 7px var(--primary-tint);}
.rng-ticks{display:flex;justify-content:space-between;margin-top:9px;font-size:11px;color:var(--text3);font-family:var(--font-mono);}
.rng.single .rng-thumb.lo{display:none;}                              /* 单滑块模式（几岁到现驻国）*/

/* ============================================================
   3.11 币种前置联动区间 Currency-linked range（年收入）
   ============================================================ */
.curr{max-width:360px;width:100%;}
.curr-seg{display:inline-flex;background:var(--bg-sunken);border-radius:var(--r-pill);padding:4px;gap:2px;margin-bottom:16px;}
.curr-seg button{border:none;background:none;font-family:inherit;font-size:14px;font-weight:600;color:var(--text2);
  padding:9px 22px;border-radius:var(--r-pill);cursor:pointer;transition:.16s;display:inline-flex;align-items:center;gap:6px;}
.curr-seg button .sym{font-weight:800;}
.curr-seg button.on{background:var(--surface);color:var(--primary-press);box-shadow:var(--e1);}
.tier-list{display:flex;flex-direction:column;gap:9px;}
.tier{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;border-radius:var(--r-sm);
  border:1.5px solid var(--border-2);background:var(--surface);cursor:pointer;transition:.14s;font-size:15px;font-weight:600;color:var(--text1);}
.tier:hover{border-color:var(--primary);}
.tier.on{border-color:var(--primary);background:var(--primary-tint);color:var(--primary-deep);}
.tier .radio{margin-left:auto;}

/* ============================================================
   3.12 可搜索单选列表 Searchable single-select（职业 26 项）
   —— 复用 3.8 底部弹层骨架，列表行用单选 radio；选定即回填并关闭
   ============================================================ */
.sh-opt .radio{width:22px;height:22px;border-width:2px;flex:none;}
.sh-opt.active .radio{border-color:var(--primary);}
.sh-opt.active .radio::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--primary);}
.mfield .mval .dd-single{font-size:15px;font-weight:600;color:var(--text1);}

/* ============================================================
   3.13 带字数计数多行输入 Counter textarea（自我介绍 5 段 · ≤2000）
   ============================================================ */
.tac{max-width:480px;width:100%;}
.tac textarea.input{min-height:120px;padding-bottom:30px;}
.tac .tac-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:-26px;
  padding:0 14px 8px;position:relative;pointer-events:none;}
.tac .tac-hint{font-size:12px;color:var(--text3);}
.tac .tac-num{font-size:12px;color:var(--text3);font-family:var(--font-mono);font-variant-numeric:tabular-nums;margin-left:auto;}
.tac .tac-num b{color:var(--text2);font-weight:700;}
.tac.over textarea.input{border-color:var(--danger);}
.tac.over .tac-num{color:var(--danger-deep);}
.tac.over .tac-num b{color:var(--danger-deep);}

/* ============================================================
   3.14 筛选「不限」首项模式 Filter with pinned “Any”
   —— 单选 / 多选筛选项首项固定「不限」；选「不限」清空其余，选其余则取消「不限」
   ============================================================ */
.filt{max-width:440px;width:100%;}
.filt-row{padding:16px 0;border-bottom:1px solid var(--border);}
.filt-row:last-child{border-bottom:0;}
.filt-lab{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--text1);margin-bottom:12px;}
.filt-lab .mode{font-size:11px;font-weight:600;color:var(--text3);background:var(--bg-sunken);padding:2px 8px;border-radius:var(--r-pill);}
.filt-chips{display:flex;flex-wrap:wrap;gap:9px;}
.filt-chips .chip.any{border-style:dashed;}
.filt-chips .chip.any.on{border-style:solid;}

/* ============================================================
   FC · React 字段控件宿主（复用 DS 弹层 / 滑块 / 区间 / chips 类）
   —— 用于 profile-screens / home-screens / center-screens 内的 .scr 屏内弹层
   ============================================================ */
.fc-host{position:absolute;inset:0;z-index:70;}
.fc-host:not(.open){pointer-events:none;}
.fc-host.open .msheet-scrim{opacity:1;pointer-events:auto;}
.fc-host.open .msheet{transform:translateY(0);}
/* 屏内字段触发器（与 .mfield 同款，紧凑） */
.fc-field{min-height:50px;display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:var(--r-sm);
  border:1.5px solid var(--border-2);background:var(--surface);cursor:pointer;transition:.16s;width:100%;text-align:left;font-family:inherit;}
.fc-field:hover{border-color:var(--primary);}
.fc-field .fcv{flex:1;display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0;font-size:15px;font-weight:600;color:var(--text1);}
.fc-field .fcv .ph{color:var(--text3);font-weight:500;}
.fc-field .fcchev{width:18px;height:18px;color:var(--text3);flex:none;}
/* 屏内双滑块缩进微调（复用 .rng） */
.fc-host .sh-list{max-height:none;}

/* 单选列表：去 radio，点击即选中。选中＝内嵌圆角浅粉胶囊 + 右侧勾选；选项间细分割线（内缩） */
.sh-list .sh-opt{position:relative;margin:0 6px;border-radius:12px;border-bottom:none;transition:background .14s,color .14s;}
.sh-list .sh-opt::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:1px;background:var(--border);}
.sh-list .sh-opt:last-child::after{display:none;}
.sh-list .sh-opt:hover{background:var(--bg-sunken);}
.sh-list .sh-opt:hover::after,.sh-list .sh-opt:has(+ .sh-opt:hover)::after{display:none;}
.sh-list .sh-opt.active{background:var(--primary-tint);color:var(--primary-press);
  box-shadow:inset 0 0 0 1px var(--primary-tint-2);padding-right:44px;}
.sh-list .sh-opt.active .cap{font-weight:700;}
.sh-list .sh-opt.active .sub{color:var(--primary-deep);opacity:.7;}
.sh-list .sh-opt.active::after,.sh-list .sh-opt:has(+ .sh-opt.active)::after{display:none;}
.sh-list .sh-opt.active::before{content:"";position:absolute;right:15px;top:50%;width:19px;height:19px;transform:translateY(-50%);
  background:no-repeat center/100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E22E76' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");}

/* footer */
footer.ds-foot{margin-top:80px;padding:34px 0 80px;border-top:1px solid var(--border);
  font-size:13px;color:var(--text3);text-align:center;line-height:1.8;}
footer.ds-foot b{color:var(--text2);}

@media(max-width:720px){
  .masthead{flex-direction:column;gap:20px;}
  .masthead h1{font-size:34px;}
  .topbar nav{display:none;}
  .type-row{grid-template-columns:1fr;gap:8px;}
}