/* ============================================================
   CLIB FDE · 设计标准 v3.0 统一令牌层
   加载顺序：所有 CSS 之后，最高优先级覆盖
   原则：不打破现有排版，只统一设计语言、去框化、对标 Apple
   ============================================================ */

/* ---------- 1. 权威令牌（v3.0 标准） ---------- */
:root{
  /* Indigo（v3.0 权威值；200/300/700 为同色系就近派生补足） */
  --indigo-50:#F2F4FF; --indigo-100:#E8EDFF; --indigo-200:#C9D4FF;
  --indigo-300:#9DB3FF; --indigo-400:#6B8AFF; --indigo-500:#4F6BED;
  --indigo-600:#3D55D4; --indigo-700:#3245A6;
  --indigo:var(--indigo-500); --primary:var(--indigo-500);

  /* Gray（v3.0 苹果灰阶，权威） */
  --gray-25:#FAFAFA; --gray-50:#F5F5F7; --gray-100:#E8E8ED;
  --gray-200:#D2D2D7; --gray-300:#B8B8BF; --gray-400:#8E8E93;
  --gray-500:#6E6E73; --gray-600:#48484A; --gray-700:#3A3A3C;
  --gray-800:#2C2C2E; --gray-900:#1D1D1F;
  --ink:var(--gray-900); --ink-2:var(--gray-500); --ink-3:var(--gray-400);
  --ink-4:var(--gray-300);
  --text:var(--gray-900); --text-2:var(--gray-500); --text-3:var(--gray-400);
  --canvas:var(--gray-50); --card:#FFFFFF; --bg-soft:var(--gray-100);
  --bg:var(--gray-50); --surface:#fff;
  --line:var(--gray-200); --line-2:var(--gray-100);

  /* Gold（v3.0 权威；100/200/600 为同色系派生） */
  --gold-50:#FAF6EE; --gold-100:#F0E6CE; --gold-200:#E3D2A8;
  --gold-300:#D4B98A; --gold-400:#C2A46B; --gold-500:#A88B52;
  --gold-600:#8E7343;
  --gold:var(--gold-400);

  /* 语义色：全部品牌色系（零红绿黄；v3.0：green/blue=indigo，orange=gold，red=gray） */
  --success:var(--indigo-500); --success-bg:var(--indigo-50);
  --warning:var(--gold-400); --warning-bg:var(--gold-50);
  --danger:var(--gray-400); --danger-bg:var(--gray-100);
  --info:var(--indigo-500); --info-bg:var(--indigo-50);
  --green:var(--indigo-500); --blue:var(--indigo-500);
  --orange:var(--gold-400); --red:var(--gray-400);

  /* 字号（v3.0 标准名） */
  --fs-d:64px; --fs-h1:56px; --fs-h2:40px; --fs-h3:32px; --fs-h4:22px;
  --fs-body:17px; --fs-call:16px; --fs-sub:15px; --fs-foot:13px; --fs-cap:12px;
  /* 字号（现有别名，映射 v3.0） */
  --fs-caption:12px; --fs-footnote:13px; --fs-callout:14px;
  --fs-headline:18px; --fs-title2:22px; --fs-title1:28px;
  --fs-display:clamp(40px,6vw,68px);

  /* 字重 */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;

  /* 间距 4px 基准 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  /* 圆角（v3.0 权威） */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px;
  --r-2xl:28px; --r-pill:999px; --r-full:999px; --r-card:var(--r-lg);

  /* 阴影（v3.0 权威，rgba(26,29,40)） */
  --sh-xs:0 1px 2px rgba(26,29,40,.04);
  --sh-sm:0 2px 8px rgba(26,29,40,.05);
  --sh-md:0 6px 20px rgba(26,29,40,.07);
  --sh-lg:0 16px 48px rgba(26,29,40,.10);

  /* 玻璃（v3.0 权威） */
  --glass-bg:rgba(255,255,255,.62);
  --glass-blur:blur(40px) saturate(180%);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.2);
  --glass-shadow:0 1px 2px rgba(26,29,40,.04),0 12px 40px rgba(26,29,40,.08);

  /* 动效 */
  --dur-fast:150ms; --dur-base:250ms; --dur-slow:400ms;
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);

  /* 导航栏硬规范（P1 已确认，保留） */
  --nav-h:64px;
  --nav-bg:rgba(255,255,255,.72);
  --nav-blur:blur(20px) saturate(180%);
}

/* ---------- 全局底色：苹果灰 #F5F5F7（灰底 + 白卡片） ---------- */
body{background:var(--gray-50) !important;}

/* ---------- 2. 导航栏标准化（64px / 玻璃态 / 零阴影） ---------- */
.nav{
  height:var(--nav-h) !important;
  background:var(--nav-bg) !important;
  backdrop-filter:var(--nav-blur) !important;
  -webkit-backdrop-filter:var(--nav-blur) !important;
  border-bottom:1px solid rgba(0,0,0,.06) !important;
  box-shadow:none !important;
  padding:0 var(--sp-6) !important;
}
.nav-inner{
  height:var(--nav-h) !important;
  padding:0 !important;
  gap:var(--sp-2) !important;
}
.nav-btn{
  padding:8px 16px !important;
  font-size:14px !important;
  font-weight:var(--fw-medium) !important;
  border-radius:var(--r-full) !important;
  color:var(--gray-500) !important;
  transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out) !important;
}
.nav-btn:hover{
  color:var(--gray-600) !important;
  background:var(--gray-100) !important;
}
.nav-btn.active{
  color:var(--indigo-600) !important;
  background:var(--indigo-50) !important;
  font-weight:var(--fw-semibold) !important;
}
.nav-logo.lockup{height:40px !important;}
.nav-lock{
  background:var(--indigo-50) !important;
  color:var(--indigo-600) !important;
}

/* ---------- 3. 自习室房间卡片：去框化（Apple 风格） ---------- */
#page-studyroom .hv-card{
  border-radius:var(--r-lg) !important;
  border:1px solid var(--gray-200) !important;
  box-shadow:var(--sh-xs) !important;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out) !important;
}
#page-studyroom .hv-card:hover{
  transform:translateY(-3px) !important;
  box-shadow:var(--sh-md) !important;
  border-color:var(--indigo-300) !important;
}

/* 状态标签：去绿底，变纯文字+左侧色点 */
#page-studyroom .hv-status{
  background:transparent !important;
  padding:0 !important;
  font-size:12px !important;
  font-weight:var(--fw-semibold) !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
}
#page-studyroom .hv-status:before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:var(--indigo-500);
  flex:none;
}
#page-studyroom .hv-status.open{color:var(--indigo-600) !important;}
#page-studyroom .hv-status.filling{color:var(--gray-400) !important;}
#page-studyroom .hv-status.filling:before{background:var(--gray-300);}

/* 标签组：去框，变纯文字分隔 */
#page-studyroom .hv-card-tags{gap:4px !important;}
#page-studyroom .hv-roomno{
  background:transparent !important;
  padding:0 !important;
  color:var(--indigo-600) !important;
  font-size:12px !important;
  font-weight:var(--fw-bold) !important;
}
#page-studyroom .hv-ind{
  background:transparent !important;
  padding:0 !important;
  color:var(--gray-400) !important;
  font-size:12px !important;
  font-weight:var(--fw-regular) !important;
}
#page-studyroom .hv-ind:before{content:"· ";color:var(--gray-300);}
#page-studyroom .hv-diff{
  background:transparent !important;
  padding:0 !important;
  color:var(--gray-400) !important;
  font-size:12px !important;
  font-weight:var(--fw-regular) !important;
}
#page-studyroom .hv-diff:before{content:"· ";color:var(--gray-300);}

/* 标题：纯文字，无背景框 */
#page-studyroom .hv-card-title{
  font-size:16px !important;
  font-weight:var(--fw-bold) !important;
  color:var(--gray-600) !important;
  line-height:1.4 !important;
  letter-spacing:-.01em !important;
  background:none !important;
  padding:0 !important;
  border:none !important;
}
/* 描述：纯文字，无背景框 */
#page-studyroom .hv-card-desc{
  font-size:13px !important;
  color:var(--gray-400) !important;
  line-height:1.6 !important;
  background:none !important;
  padding:0 !important;
  border:none !important;
}

/* 完成可得：去金框，变纯文字+金色图标 */
#page-studyroom .hv-reward{
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  font-size:12px !important;
  font-weight:var(--fw-medium) !important;
  color:var(--gold-500) !important;
}
#page-studyroom .hv-reward svg{color:var(--gold-400);}

/* body / bottom：恢复 V2.0.7 嵌套框（由 clib-design-system 通配 [class*=card] 统一提供
   白底+边框+圆角+轻阴影），不做去框；框内左右 16px 内边距已避开圆角，文字不挤压。 */
#page-studyroom .hv-avatar{
  width:24px !important;height:24px !important;
  font-size:10px !important;
}
#page-studyroom .hv-captain span{font-size:12px !important;color:var(--gray-500) !important;}
#page-studyroom .hv-meta{font-size:11px !important;color:var(--gray-400) !important;}

/* ---------- 4. 首页装饰：去框化 ---------- */
/* Hero 炫彩背景（严格 1:1 复刻 v3.0 hero：blur80 + opacity.5，通透不脏） */
#page-dashboard .hero{position:relative !important;overflow:hidden !important;background:#fff !important;border:1px solid var(--line) !important;border-radius:var(--r-2xl) !important;padding:88px 48px 84px !important;margin:6px 0 30px !important;box-shadow:var(--sh-md) !important;}
/* 恢复 hero 极淡网格纹理（线上质感，blob 之外的细节） */
#page-dashboard .hero:before{content:"";position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(26,29,40,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(26,29,40,.03) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(720px 420px at 50% 0,#000,transparent 78%);mask-image:radial-gradient(720px 420px at 50%0,#000,transparent 78%);pointer-events:none;}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hero-bg .blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;}
.hero-bg .b1{width:500px;height:500px;background:radial-gradient(circle,rgba(79,107,237,.25),transparent 70%);top:-100px;left:50%;transform:translateX(-50%);}
.hero-bg .b2{width:400px;height:400px;background:radial-gradient(circle,rgba(194,164,107,.15),transparent 70%);bottom:0;right:10%;}
.hero-bg .b3{width:300px;height:300px;background:radial-gradient(circle,rgba(107,138,255,.2),transparent 70%);top:30%;left:5%;}
.hero .wrap{position:relative;z-index:1;}
/* 标题渐变文字（严格 v3.0：135deg indigo-500→indigo-400→gold-400） */
.hero .grad{
  background:linear-gradient(135deg,var(--indigo-500),var(--indigo-400) 50%,var(--gold-400));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* Hero pill：去白底边框，变纯文字小标题 */
#page-dashboard .pill{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  font-size:14px !important;
  font-weight:var(--fw-medium) !important;
  color:var(--indigo-600) !important;
  letter-spacing:.02em !important;
}
/* card-cap：去边框，变纯文字 eyebrow */
#page-dashboard .card-cap{
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  font-size:12px !important;
  font-weight:var(--fw-semibold) !important;
  letter-spacing:.08em !important;
  color:var(--gray-400) !important;
  text-transform:uppercase !important;
}
/* diag dk：去框，变纯文字 eyebrow */
#page-dashboard .diag .dk{
  font-size:12px !important;
  font-weight:var(--fw-semibold) !important;
  letter-spacing:.1em !important;
  color:var(--indigo-600) !important;
}
/* ovr/cn 小标题：去框 */
#page-dashboard .ovr .cn{
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  font-size:13px !important;
  font-weight:var(--fw-medium) !important;
  color:var(--gray-400) !important;
  letter-spacing:.04em !important;
}

/* ---------- 5. 全局：减少文字换行，更整体 ---------- */
h1,h2,h3,h4,h5,h6{
  text-wrap:balance !important;
}
p{
  text-wrap:pretty !important;
}

/* ---------- 6. 按钮深度标准化（v3.0 组件2，对标 Apple） ---------- */
/* 基础 */
.btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  font-size:14px !important;
  font-weight:600 !important;
  letter-spacing:-.01em !important;
  line-height:1 !important;
  padding:12px 24px !important;
  border-radius:var(--r-full) !important;
  border:none !important;
  cursor:pointer !important;
  background:transparent !important;
  color:var(--gray-600) !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  font-family:inherit !important;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out) !important;
}
/* 主要按钮：纯色靛蓝，无渐变无阴影（Apple 风格） */
.btn-primary{
  background:var(--indigo-500) !important;
  color:#fff !important;
}
.btn-primary:hover{background:var(--indigo-600) !important;}
.btn-primary:active{background:var(--indigo-700) !important;}
/* 线框按钮 */
.btn-line{
  background:transparent !important;
  color:var(--gray-600) !important;
  border:1px solid var(--gray-300) !important;
}
.btn-line:hover{
  border-color:var(--gray-600) !important;
  background:var(--gray-50) !important;
}
/* 文字按钮 */
.btn-text,.btn-ghost{
  background:transparent !important;
  color:var(--indigo-500) !important;
  border:none !important;
}
.btn-text:hover,.btn-ghost:hover{
  color:var(--indigo-600) !important;
  background:var(--indigo-50) !important;
}
/* 尺寸 */
.btn-sm{padding:8px 16px !important;font-size:13px !important;}
.btn-lg{padding:14px 30px !important;font-size:16px !important;}
/* 禁用 */
.btn[disabled],.btn.disabled{
  opacity:.45 !important;
  cursor:not-allowed !important;
  pointer-events:none !important;
}
/* 兼容旧变体名 → 映射到标准 */
.btn-secondary,.btn-sec{
  background:transparent !important;
  color:var(--gray-600) !important;
  border:1px solid var(--gray-300) !important;
}
.btn-secondary:hover,.btn-sec:hover{
  border-color:var(--gray-600) !important;
  background:var(--gray-50) !important;
}
/* 金色荣誉按钮（仅稀缺场景） */
.btn-gold{
  background:var(--gold-400) !important;
  color:#fff !important;
}
.btn-gold:hover{background:var(--gold-500) !important;}
/* 危险按钮：深灰（非红） */
.btn-danger{
  background:var(--gray-400) !important;
  color:#fff !important;
}
.btn-danger:hover{background:var(--gray-500) !important;}
/* 复制按钮：线框小按钮 */
.btn-copy{
  background:transparent !important;
  color:var(--gray-500) !important;
  border:1px solid var(--gray-300) !important;
  padding:6px 12px !important;
  font-size:12px !important;
}
.btn-copy:hover{border-color:var(--indigo-500) !important;color:var(--indigo-600) !important;}

/* 统一自定义按钮 → 继承标准 */
.pj-btn{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  gap:6px !important;font-family:inherit !important;cursor:pointer !important;
  border-radius:var(--r-full) !important;font-size:14px !important;font-weight:600 !important;
  padding:12px 24px !important;border:none !important;white-space:nowrap !important;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out) !important;
}
.pj-btn.primary{background:var(--indigo-500) !important;color:#fff !important;}
.pj-btn.primary:hover{background:var(--indigo-600) !important;}
.pj-btn.line{background:transparent !important;color:var(--gray-600) !important;border:1px solid var(--gray-300) !important;}
.pj-btn.line:hover{border-color:var(--gray-600) !important;background:var(--gray-50) !important;}
.pj-btn.ghost{background:transparent !important;color:var(--indigo-500) !important;}
.pj-btn.ghost:hover{background:var(--indigo-50) !important;color:var(--indigo-600) !important;}
.pj-btn:disabled{opacity:.45 !important;cursor:not-allowed !important;pointer-events:none !important;}

/* 导航登录按钮 */
.login-btn{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  background:var(--indigo-500) !important;color:#fff !important;
  border:none !important;border-radius:var(--r-full) !important;
  padding:8px 18px !important;font-size:13px !important;font-weight:600 !important;
  cursor:pointer !important;font-family:inherit !important;white-space:nowrap !important;
  transition:background var(--dur-fast) var(--ease-out) !important;
}
.login-btn:hover{background:var(--indigo-600) !important;}

/* 找搭子添加按钮 */
.hv-bpadd{
  background:var(--indigo-500) !important;color:#fff !important;
  border:none !important;border-radius:var(--r-full) !important;
  padding:7px 14px !important;font-size:12px !important;font-weight:600 !important;
  cursor:pointer !important;font-family:inherit !important;white-space:nowrap !important;
}
.hv-bpadd:hover{background:var(--indigo-600) !important;}

/* 房间顶部操作按钮 → 线框小按钮 */
.room-action-btn{
  display:inline-flex !important;align-items:center !important;gap:6px !important;
  background:transparent !important;color:var(--gray-600) !important;
  border:1px solid var(--gray-300) !important;border-radius:var(--r-full) !important;
  padding:7px 14px !important;font-size:12px !important;font-weight:600 !important;
  cursor:pointer !important;font-family:inherit !important;white-space:nowrap !important;
}
.room-action-btn:hover{border-color:var(--gray-600) !important;background:var(--gray-50) !important;}

/* ---------- 7. 卡片深度标准化（v3.0 组件3，对标 Apple） ---------- */
/* 标准卡片 */
.card{
  background:#fff !important;
  border:1px solid var(--gray-200) !important;
  border-radius:var(--r-lg) !important;
  padding:28px 24px !important;
  box-shadow:var(--sh-xs) !important;
  transition:box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out) !important;
}
/* 小卡片 */
.card-sm{
  background:#fff !important;
  border:1px solid var(--gray-200) !important;
  border-radius:var(--r-md) !important;
  padding:16px !important;
  box-shadow:var(--sh-xs) !important;
}
/* 可点击卡片 hover：上浮2px + sh-md */
.card-hover,.card.clickable{
  cursor:pointer !important;
}
.card-hover:hover,.card.clickable:hover{
  box-shadow:var(--sh-md) !important;
  transform:translateY(-2px) !important;
  border-color:var(--gray-300) !important;
}
/* 卡片标题/正文 */
.card-title{
  font-size:16px !important;
  font-weight:600 !important;
  margin-bottom:8px !important;
  color:var(--gray-600) !important;
  letter-spacing:-.01em !important;
}
.card-text{
  font-size:14px !important;
  line-height:1.6 !important;
  color:var(--gray-500) !important;
}
/* 卡片头部 */
.card-h{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-bottom:16px !important;
}

/* 自定义卡片统一圆角/边框/阴影（保留各自 padding） */
.v18-card,.group-card,.qa-card{
  background:#fff !important;
  border:1px solid var(--gray-200) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--sh-xs) !important;
}
/* 成长页卡片 */
.p9-card{
  background:#fff !important;
  border:1px solid var(--gray-200) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--sh-xs) !important;
}
/* 自习室小卡片：我的小组/搭子 */
.hv-mycard,.hv-bpcard{
  background:#fff !important;
  border:1px solid var(--gray-200) !important;
  border-radius:var(--r-md) !important;
  box-shadow:var(--sh-xs) !important;
  transition:box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out) !important;
}
.hv-mycard:hover,.hv-bpcard:hover{
  box-shadow:var(--sh-md) !important;
  transform:translateY(-2px) !important;
  border-color:var(--indigo-300) !important;
}
/* 首页模块卡 .mod / 诊断卡 .diag / 框架 .frame 统一圆角 */
#page-dashboard .mod{border-radius:var(--r-md) !important;}
#page-dashboard .diag{border-radius:var(--r-lg) !important;}
#page-dashboard .frame{border-radius:var(--r-lg) !important;}

/* ---------- 8. 输入框深度标准化（v3.0 组件4，对标 Apple） ---------- */
.input,input[type="text"],input[type="tel"],input[type="email"],input[type="password"],
input[type="search"],input[type="number"],input[type="url"],select,textarea{
  width:100% !important;
  padding:12px 16px !important;
  font-size:14px !important;
  color:var(--gray-600) !important;
  background:#fff !important;
  border:1px solid var(--gray-300) !important;
  border-radius:var(--r-md) !important;
  box-sizing:border-box !important;
  font-family:inherit !important;
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out) !important;
}
/* placeholder */
.input::placeholder,input::placeholder,textarea::placeholder{
  color:var(--gray-400) !important;
}
/* hover 边框变深 */
.input:hover,input:hover,select:hover,textarea:hover{
  border-color:var(--gray-400) !important;
}
/* focus 靛蓝边框 + 4px 光晕 */
.input:focus,input:focus,select:focus,textarea:focus{
  outline:none !important;
  border-color:var(--indigo-500) !important;
  box-shadow:0 0 0 4px rgba(79,107,237,.1) !important;
}
/* 错误态：深灰边框（非红）+ 灰色光晕 */
.input-error,input.error,input[aria-invalid="true"]{
  border-color:var(--gray-400) !important;
  box-shadow:0 0 0 4px rgba(134,134,139,.1) !important;
}
/* 禁用态 */
.input:disabled,input:disabled,select:disabled,textarea:disabled{
  background:var(--gray-50) !important;
  color:var(--gray-400) !important;
  cursor:not-allowed !important;
}
/* textarea 垂直调整 */
textarea{resize:vertical;min-height:80px;line-height:1.6;}
/* select 下拉箭头 */
select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8FA3' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right:14px center !important;
  padding-right:38px !important;
}
/* field 标签/提示 */
.field{margin-bottom:20px;}
.field-label,label{
  display:block;
  font-size:13px;
  font-weight:500;
  color:var(--gray-600);
  margin-bottom:8px;
}
.field-hint,.form-hint{
  font-size:12px;
  color:var(--gray-400);
  margin-top:6px;
}
.field-error,.form-error{
  font-size:12px;
  color:var(--gray-500);
  margin-top:6px;
}

/* ---------- 9. 标签/徽章深度标准化（v3.0 组件5，对标 Apple） ---------- */
/* 已实名 / 会员 标签：去绿，变靛蓝 */
.sr2-lv.real{color:var(--indigo-600) !important;background:var(--indigo-50) !important;}
/* 基础：tag 和 badge 统一 */
.tag,.badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  padding:4px 10px !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1.4 !important;
  border-radius:var(--r-full) !important;
  border:none !important;
  white-space:nowrap !important;
}
/* 靛蓝语义（primary/indigo/success 统一） */
.tag-primary,.tag-indigo,.tag-success,
.badge-indigo,.badge-success{
  background:var(--indigo-50) !important;
  color:var(--indigo-600) !important;
}
/* 钛金语义（gold/warning 统一） */
.tag-gold,.tag-warning,
.badge-gold,.badge-warning{
  background:var(--gold-50) !important;
  color:var(--gold-600) !important;
}
/* 灰色语义（gray/neutral/danger/error 统一） */
.tag-gray,.tag-neutral,.tag-danger,
.badge-gray,.badge-danger,.badge-error{
  background:var(--gray-100) !important;
  color:var(--gray-500) !important;
}
/* pj-chip 统一 */
.pj-chip{
  display:inline-flex !important;
  align-items:center !important;
  padding:3px 10px !important;
  font-size:12px !important;
  font-weight:600 !important;
  border-radius:var(--r-full) !important;
  border:none !important;
  background:var(--indigo-50) !important;
  color:var(--indigo-600) !important;
}
.pj-chip.gray,.pj-chip.closed{
  background:var(--gray-100) !important;
  color:var(--gray-500) !important;
}

/* ---------- 10. 无障碍 ---------- */
:focus-visible{
  outline:2px solid var(--indigo-500) !important;
  outline-offset:2px !important;
  border-radius:var(--r-xs) !important;
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* ---------- 11. 反馈组件统一（Modal / Confirm / Alert / Toast，对标 Apple） ---------- */
/* 11.1 遮罩层：统一淡黑 + 强模糊（苹果风），收敛 5 套遮罩 */
.modal-overlay,
.pj-mask,
.v17-overlay,
.v17-onboard-mask,
.resource-modal{
  background:rgba(0,0,0,.32) !important;
  backdrop-filter:blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(150%) !important;
}
/* 11.2 弹窗本体：统一大圆角 + 柔和阴影（宽度按各自用途，不强改） */
.modal,
.pj-modal,
.v17-modal,
.v17-onboard-modal{
  border-radius:var(--r-xl) !important;
  box-shadow:var(--sh-lg) !important;
  border:1px solid var(--line) !important;
}
/* 11.3 统一确认框 UI.confirm（苹果风：标题 + 说明 + 并排按钮） */
.ui-dialog{
  background:var(--card);border-radius:var(--r-xl);
  width:100%;max-width:420px;overflow:hidden;
  box-shadow:var(--sh-lg);border:1px solid var(--line);
  animation:uiDialogIn var(--dur-base) var(--ease-out);
}
@keyframes uiDialogIn{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.ui-dialog-bd{padding:28px 28px 8px;text-align:center;}
.ui-dialog-ic{
  width:44px;height:44px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;background:var(--indigo-50);color:var(--indigo-500);
}
.ui-dialog-ic.danger{background:var(--gray-100);color:var(--gray-700);}
.ui-dialog-title{font-size:var(--fs-call);font-weight:var(--fw-bold);color:var(--ink);letter-spacing:-.01em;}
.ui-dialog-msg{margin-top:8px;font-size:var(--fs-cap);line-height:1.55;color:var(--ink-2);word-break:break-word;white-space:pre-line;}
.ui-dialog-ft{display:flex;gap:10px;padding:20px 28px 26px;}
.ui-dialog-ft button{flex:1;padding:11px 16px;border-radius:var(--r-pill);font-size:var(--fs-cap);font-weight:var(--fw-semibold);cursor:pointer;transition:background var(--dur-fast) var(--ease-out);}
.ui-dialog-ok{background:var(--indigo-500);color:#fff;border:1px solid var(--indigo-500);}
.ui-dialog-ok:hover{background:var(--indigo-600);}
.ui-dialog-ok.danger{background:var(--gray-900);border-color:var(--gray-900);}
.ui-dialog-ok.danger:hover{background:var(--gray-800);}
.ui-dialog-cancel{background:transparent;color:var(--indigo-500);border:1px solid var(--line);}
.ui-dialog-cancel:hover{background:var(--gray-50);}
/* 11.4 Alert 警示条（页面内，非弹窗） */
.ui-alert{
  display:flex;gap:10px;align-items:flex-start;
  border-radius:var(--r-md);padding:12px 16px;font-size:var(--fs-cap);line-height:1.5;
  border:1px solid transparent;margin:var(--sp-4) 0;
}
.ui-alert svg{flex:none;margin-top:1px;}
.ui-alert-info{background:var(--indigo-50);color:var(--indigo-700);border-color:var(--indigo-100);}
.ui-alert-warn{background:var(--gold-50);color:var(--gold-600);border-color:var(--gold-100);}
.ui-alert-danger{background:var(--gray-100);color:var(--gray-700);border-color:var(--gray-200);}
/* 11.5 Toast 视觉统一（无论哪个 showToast 生效，强制品牌化） */
#toast,
#globalToast{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",sans-serif !important;
  border-radius:var(--r-lg) !important;
}
#toast .v18-tbar{border-radius:var(--r-xs) !important;}
/* 11.6 板块说明区 / 工具条：统一白色卡片，灰底上不裸露 */
.tip-box{
  background:#fff !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--sh-sm) !important;
}
#baihuaBar.bh-bar{
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--sh-sm) !important;
  padding:12px 18px !important;
  margin-bottom:14px !important;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
@media(max-width:560px){
  .ui-dialog{max-width:calc(100vw - 40px);}
}

/* ============================================================
   第12节 · 自习室 / 成长 hero：白底 + 品牌炫彩光晕（去大色块）
   呼应 indigo + gold，柔和局部光晕，文字深色
   ============================================================ */
/* 12.1 自习室 hero */
.sr2-hero{
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--sh-md) !important;
  color:var(--gray-900) !important;
  padding:34px 36px !important;
  position:relative;overflow:hidden;
}
.sr2-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 92% at 0% 0%, rgba(79,107,237,.22), transparent 70%),
    radial-gradient(40% 82% at 100% 8%, rgba(194,164,107,.20), transparent 70%),
    radial-gradient(52% 104% at 76% 112%, rgba(124,108,240,.19), transparent 72%);
}
.sr2-hero-l,.sr2-live{position:relative;z-index:1;}
.sr2-kicker{color:var(--indigo-500) !important;}
.sr2-hero-t{color:var(--gray-900) !important;}
.sr2-hero-d{color:var(--gray-500) !important;}
.sr2-live{
  background:var(--indigo-50) !important;
  border:1px solid var(--indigo-100) !important;
  backdrop-filter:none !important;
}
.lv-slogan{color:var(--indigo-600,#3D55D4) !important;}
.lv-item b{color:var(--indigo-500) !important;}
.lv-item span{color:var(--gray-500) !important;}

/* 12.2 成长 hero */
#page-growth .p9-hero{
  background:#fff !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--sh-md) !important;
  color:var(--gray-900) !important;
  position:relative;overflow:hidden;
}
#page-growth .p9-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(44% 90% at 2% 0%, rgba(79,107,237,.21), transparent 70%),
    radial-gradient(38% 80% at 100% 6%, rgba(194,164,107,.22), transparent 70%),
    radial-gradient(50% 100% at 82% 116%, rgba(107,138,255,.18), transparent 72%);
}
#page-growth .p9-hero::after{display:none;}
#page-growth .p9-lvl-badge{
  background:var(--indigo-50) !important;
  border:1px solid var(--indigo-100) !important;
}
#page-growth .p9-lvl-badge svg{color:var(--indigo-500);}
#page-growth .p9-hero h1{color:var(--gray-900) !important;}
#page-growth .p9-hero .sub{color:var(--gray-500) !important;opacity:1 !important;}
#page-growth .p9-hero .p9-sid{color:var(--gray-500) !important;opacity:1 !important;}
#page-growth .p9-hero-right .gv{
  background:linear-gradient(135deg,var(--indigo-500),var(--indigo-400) 55%,var(--gold-400));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
#page-growth .p9-hero-right .gv span{color:var(--gray-500);-webkit-text-fill-color:var(--gray-500);}
#page-growth .p9-hero-bar{background:var(--gray-100) !important;}
#page-growth .p9-hero-bar i{background:linear-gradient(90deg,var(--indigo-500),var(--indigo-400) 60%,var(--gold-400)) !important;}
#page-growth .p9-hero-foot{color:var(--gray-500) !important;opacity:1 !important;}
/* 等级链 */
#page-growth .p9-rnode .dot{background:var(--indigo-50) !important;border:2px solid var(--indigo-100) !important;color:var(--indigo-500) !important;}
#page-growth .p9-rnode.done .dot{background:var(--indigo-500) !important;border-color:var(--indigo-500) !important;color:#fff !important;}
#page-growth .p9-rnode.cur .dot{background:var(--indigo-600) !important;border-color:var(--indigo-200) !important;color:#fff !important;box-shadow:0 0 0 4px var(--indigo-100) !important;}
#page-growth .p9-rnode .nm{color:var(--gray-900) !important;}
#page-growth .p9-rnode .th{color:var(--gray-500) !important;opacity:1 !important;}
#page-growth .p9-rnode:not(:last-child)::before{background:var(--gray-100) !important;}
#page-growth .p9-rnode.done:not(:last-child)::before{background:var(--indigo-200,#C9D4FF) !important;}
/* steps（备用同款） */
#page-growth .p9-step .sdot{background:var(--indigo-50) !important;border:2px solid var(--indigo-100) !important;color:var(--indigo-500) !important;}
#page-growth .p9-step.done .sdot{background:var(--indigo-500) !important;border-color:var(--indigo-500) !important;color:#fff !important;}
#page-growth .p9-step .snm{color:var(--gray-900) !important;opacity:1 !important;}
#page-growth .p9-step.locked .snm{color:var(--gray-500) !important;}
#page-growth .p9-step:not(:last-child)::after{background:var(--gray-100) !important;}
#page-growth .p9-step.done:not(:last-child)::after{background:var(--indigo-200,#C9D4FF) !important;}

/* ============================================================
   第13节 · P4 数据展示统一 —— 进度条（v3.0：gray-100 中性底 / pill / indigo 填充）
   ============================================================ */
.progress-bar,progress{
  width:100%;height:8px !important;
  background:var(--gray-100) !important;
  border-radius:999px !important;overflow:hidden !important;
}
.progress-bar .fill,.progress-bar .progress-fill,.progress-bar>div,.progress-bar>i,progress::-webkit-progress-value{
  height:100% !important;background:var(--indigo-500) !important;
  border-radius:999px !important;transition:width .4s cubic-bezier(.4,0,.2,1) !important;
}
progress::-webkit-progress-bar{background:var(--gray-100) !important;border-radius:999px !important;}
progress::-moz-progress-bar{background:var(--indigo-500) !important;border-radius:999px !important;}
.wallet-card-progress .progress-bar{height:6px !important;}
#page-growth .p9-hero-bar i{background:linear-gradient(90deg,var(--indigo-500),var(--indigo-400) 60%,var(--gold-400)) !important;}

/* ============================================================
   第14节 · P4 空状态 / 加载态 / 错误态（v3.0 组件12）
   ============================================================ */
.qa-empty{
  background:transparent !important;border:none !important;
  color:var(--gray-500) !important;font-size:13px !important;
  padding:28px 20px !important;line-height:1.7 !important;text-align:center;
}
.empty-state .es-icon,.empty .empty-icon{
  width:48px !important;height:48px !important;border-radius:50% !important;
  font-size:22px !important;margin-bottom:4px !important;
}
.empty-state .es-title,.empty .empty-title,.empty h3{font-size:15px !important;font-weight:600 !important;}
.empty-state .es-desc,.empty .empty-text,.empty p{font-size:13px !important;}
.p9-stat .p9-stat-num,.pm-stat .pm-stat-num,.pro-stat-card .psc-num,.stat .num{font-variant-numeric:tabular-nums !important;letter-spacing:-.02em;}


/* ===== v18 兼容层（从 v18-tokens 迁移，确保删除 v18 后变量不丢失）===== */
:root {
  --bg-1: var(--card);
  --bg-2: var(--bg-soft);
  --border: var(--line);
  --border-brand: var(--indigo-200);
  --brand-500: var(--indigo);
  --brand-600: var(--indigo-600);
  --container-max: 1440px;
  --container-pad: 20px;
  --dark-bg: #0B1020;
  --dark-line: #262E52;
  --dark-surface: #121830;
  --font: "Inter","Noto Sans SC",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  --fs-overline: 11px;
  --fs-title: 16px;
  --lh-body: 1.7;
  --lh-caption: 1.5;
  --lh-display: 1.15;
  --lh-h1: 1.25;
  --lh-h2: 1.4;
  --lh-title: 1.5;
  --r-capsule: 999px;
  --text-1: var(--ink);
  --text-4: var(--ink-4);
}