/* ==========================================================================
   润凯科技 · RUNKAI —— 色板层（原站变量 -> 设计令牌）
   --------------------------------------------------------------------------
   原站的 42KB 样式是按这套变量组织的，所以重构采用「变量重映射」而非重写：
   每一个旧变量都重新指向设计系统令牌，存量样式因此自动落进设计系统。
   新增样式请直接用 design-system 的令牌，不要再用这一层。
   ========================================================================== */
:root{
  --primary:       var(--accent);        /* 原深海军蓝 -> 品牌企业蓝 */
  --primary-light: var(--accent-hi);
  --primary-dark:  var(--accent-lo);
  --accent2:       var(--accent-line);   /* 原电光青/浅蓝辅助色 */

  --bg-card:       var(--surface);
  --bg-card2:      var(--surface-2);
  --bg-elevated:   var(--surface-inset);

  --text1:         var(--ink);
  --text2:         var(--muted);
  --text3:         var(--faint);
  --border:        var(--line);

  --safe-bottom:   var(--safe-b);

  /* 本站专属：门户网格区块的浅底 */
  --portal-tint:   var(--accent-soft);
}



*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-text);
  background:var(--bg);
  background-image:radial-gradient(ellipse at 50% 0%,color-mix(in srgb, var(--accent) 6%, transparent) 0%,transparent 60%),
                  radial-gradient(ellipse at 80% 80%,color-mix(in srgb, var(--accent) 4%, transparent) 0%,transparent 50%);
  color:var(--text1);
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* App Shell */
.app-shell{
  /* .app（components.css）已给出画布宽度与底色，这里只补本站装饰所需 */
  overflow-x:clip;   /* clip 不产生滚动容器，顶栏 sticky 才生效 */
}
.app-shell::before{
  content:'';
  position:absolute;
  top:-40px;right:-40px;
  width:120px;height:120px;
  border-radius: var(--r-full);
  background:radial-gradient(circle,color-mix(in srgb, var(--accent) 8%, transparent) 0%,transparent 70%);
  pointer-events:none;
  z-index:0;
}
.app-shell::after{
  content:'';
  position:absolute;
  bottom:-30px;left:-30px;
  width:100px;height:100px;
  border-radius: var(--r-full);
  background:radial-gradient(circle,color-mix(in srgb, var(--accent) 6%, transparent) 0%,transparent 70%);
  pointer-events:none;
  z-index:0;
}

/* 顶栏时间读数（原仿 iOS 状态栏降级为一条克制的读数）
   #statusTime 是业务脚本 updateTime() 的钩子，必须保留 */
.status-bar-time{
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:var(--t-xs);
  font-variant-numeric:tabular-nums;
  letter-spacing:var(--ls-num);
  color:var(--faint);
}

/* App Header */
/* .app-header 的吸顶/底色/内边距交给 design-system 的 .topbar */
.app-header-top{display:flex;align-items:center;gap:var(--s-3);width:100%;min-width:0}
.app-logo{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  min-width:0;
  font-family:var(--font-display);
  font-size:var(--t-h3);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-heading);
  color:var(--ink);
}
.app-logo img{height:26px;width:auto;flex:0 0 auto}


/* Tab Bar */
.tab-bar{
  display:flex;
  position:sticky;
  top:calc(var(--header-h) + var(--safe-t));
  z-index:var(--z-sticky);
  gap:0;
  margin:0 var(--gutter) var(--s-5);
  background:var(--surface-inset);
  border-radius:var(--r-md);
  padding:var(--s-1);
}
.tab-item{
  flex:1;
  text-align:center;
  min-height:var(--tap-min);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--t-sm);
  font-weight:var(--fw-medium);
  color:var(--muted);
  cursor:pointer;
  border-radius:var(--r-sm);
  transition:color var(--dur-2) var(--ease-soft);
  position:relative;
  z-index:1;
  user-select:none;
}
.tab-item.active{color:var(--on-accent);font-weight:var(--fw-semi)}
.tab-slider{
  position:absolute;
  top:var(--s-1);
  height:calc(100% - var(--s-2));
  background:var(--accent);            /* 单一强调底，白字对比度 8.6:1 */
  border-radius:var(--r-sm);
  transition:left var(--dur-3) var(--ease-soft),width var(--dur-3) var(--ease-soft);
  z-index:0;
  box-shadow:var(--shadow-sm);
}

/* Page Content */
.pages-wrapper{
  position:relative;
  overflow:hidden;
}
.page{
  display:none;
  animation:fadeSlide .4s ease;
  padding-bottom:var(--s-8);
}
.page.active{display:block}
@keyframes fadeSlide{
  from{opacity:0;transform:translateX(20px)}
  to{opacity:1;transform:translateX(0)}
}

/* ===== HONOR PAGE ===== */
/* Hero Banner */
.hero-banner{
  margin:0 var(--gutter) var(--s-5);
  border-radius: var(--r-lg);
  overflow:hidden;
  position:relative;
  height:220px;
}
.hero-banner-img{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-banner-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hero-banner-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(135deg,rgba(12,10,8,.78) 0%,rgba(12,10,8,.5) 40%,rgba(12,10,8,.12) 100%);
}
.hero-banner::after{
  content:'';
  position:absolute;
  top:-50%;right:-20%;
  width:220px;height:220px;
  border-radius: var(--r-full);
  background:radial-gradient(circle,rgba(30,76,138,.06) 0%,transparent 70%);
  animation:heroGlow 8s cubic-bezier(.45,0,.55,1) infinite alternate;
  z-index:1;
}
@keyframes heroGlow{
  0%{transform:translate(0,0) scale(1);opacity:.5}
  100%{transform:translate(-20px,20px) scale(1.2);opacity:1}
}
/* Shimmer line */
.hero-banner .hero-shimmer{
  position:absolute;
  top:0;left:-100%;
  width:50%;height:1.5px;
  background:linear-gradient(90deg,transparent,rgba(30,76,138,.35),transparent);
  animation:shimmerSweep 5s cubic-bezier(.45,0,.55,1) infinite;
  z-index:3;
  border-radius:var(--r-2xs);
}
@keyframes shimmerSweep{
  0%{left:-50%}
  50%{left:100%}
  100%{left:100%}
}
/* Gold dot decoration */
.hero-banner .hero-dots{
  position:absolute;
  top:16px;right:16px;
  display:flex;gap:var(--s-1);
  z-index:2;
}
.hero-banner .hero-dots span{
  width:4px;height:4px;
  border-radius: var(--r-full);
  background:rgba(30,76,138,.3);
}
.hero-banner .hero-dots span:nth-child(2){background:rgba(30,76,138,.16)}
.hero-banner .hero-dots span:nth-child(3){background:rgba(30,76,138,.08)}

.hero-content{
  position:relative;z-index:2;
  padding:var(--s-6) var(--s-6);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
}
.hero-badge {
  /* 外观交给共享 .badge--on-media：它会自带"照片上必须有暗底"这一层，
     并且底/边/字都走令牌 —— 原来写死的 rgba(255,255,255,.12) 换主题不会跟着走。
     这两条是本站的排版个性，保留。 */
  letter-spacing: 1px;
  width: fit-content;
}
.hero-badge-dot{
  width:5px;height:5px;
  border-radius: var(--r-full);
  background:var(--accent);
  animation:dotPulse 2s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes dotPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.7)}
}
.hero-title{
  font-family:var(--font-text);
  font-size: var(--t-h1);
  font-weight:900;
  line-height:1.35;
  color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.3);
}
.hero-title .hero-title-accent{
  color:var(--accent);
  text-shadow:0 0 20px rgba(30,76,138,.2);
}
.hero-bottom{
  display:flex;
  gap:var(--s-5);
}
.hero-stat{text-align:left}
.hero-stat-num{
  font-family:var(--font-text);
  font-size: var(--t-h2);
  font-weight:900;
  color:#fff;
}
.hero-stat-label{font-size: var(--t-micro);color:rgba(255,255,255,.6);margin-top:2px}

/* Section Header */
.section-hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 var(--gutter);
  margin-bottom:var(--gutter);
}
.section-hd-title{
  font-family:var(--font-display);
  font-size: var(--t-h3);
  font-weight:700;
  color:var(--text1);
  position:relative;
  padding-left:var(--s-3);
}
.section-hd-title::before{
  content:'';
  position:absolute;
  left:0;top:50%;
  transform:translateY(-50%);
  width:3px;height:16px;
  border-radius: var(--r-2xs);
  background:linear-gradient(180deg,var(--primary),color-mix(in srgb, var(--accent) 40%, transparent));
}
.section-hd-more{
  font-size: var(--t-sm);
  color:var(--text3);
  display:flex;
  align-items:center;
  gap:2px;
  cursor:pointer;
}
.section-hd-more svg{width:14px;height:14px;stroke:var(--text3);fill:none;stroke-width:2}

/* Honor Card Carousel */
.honor-carousel{
  display:flex;
  gap:var(--s-3);
  overflow-x:auto;
  padding:0 var(--gutter) var(--s-2);
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.honor-carousel::-webkit-scrollbar{display:none}
.honor-card{
  min-width:240px;
  max-width:240px;
  scroll-snap-align:start;
  border-radius: var(--r-md);
  background:var(--bg-card);
  border:1px solid var(--border);
  overflow:hidden;
  flex-shrink:0;
  cursor:pointer;
  transition:transform .3s ease,box-shadow .3s ease;
  position:relative;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.honor-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.09)}
.honor-card:active{transform:scale(.97)}
.honor-card-top{
  height:64px;
  background:linear-gradient(135deg,color-mix(in srgb, var(--accent) 10%, transparent),color-mix(in srgb, var(--accent) 3%, transparent));
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:0;
}
.honor-card-top::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:24px;
  background:linear-gradient(to top,var(--bg-card),transparent);
}
.honor-card-avatar{
  width:50px;height:50px;
  border-radius: var(--r-full);
  border:2.5px solid var(--primary);
  overflow:hidden;
  position:relative;
  z-index:1;
  transform:translateY(25px);
  box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 15%, transparent);
}
.honor-card-avatar img{width:100%;height:100%;object-fit:cover}
.honor-card-body{
  padding:var(--s-7) var(--gutter) var(--s-3);
  text-align:center;
}
.honor-card-name{
  font-family:var(--font-display);
  font-size: var(--t-body);
  font-weight:700;
  margin-bottom:2px;
}
.honor-card-title{
  font-size: var(--t-xs);
  color:var(--primary);
  font-weight:500;
  margin-bottom:3px;
}
.honor-card-dept{
  font-size: var(--t-micro);
  color:var(--text3);
  margin-bottom:var(--s-2);
}
.honor-card-quote{
  font-size: var(--t-xs);
  color:var(--text2);
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.honor-card-actions{
  display:flex;
  border-top:1px solid var(--border);
}
.honor-card-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:var(--s-2) 0;
  font-size: var(--t-xs);
  color:var(--text3);
  cursor:pointer;
  transition:color .2s,background .2s;
  border:none;
  background:none;
}
.honor-card-btn:active{background:color-mix(in srgb, var(--accent) 8%, transparent)}
.honor-card-btn.liked{color:var(--primary)}
.honor-card-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.honor-card-btn.liked svg{fill:var(--primary);stroke:var(--primary)}

/* Featured Employee */
.featured-card{
  margin:0 var(--gutter) var(--s-5);
  border-radius: var(--r-lg);
  background:linear-gradient(145deg,var(--surface),var(--surface-2));
  border:1px solid var(--border);
  overflow:hidden;
  position:relative;
  box-shadow:0 4px 20px rgba(0,0,0,.06);
}
.featured-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-line),var(--accent));
}
.featured-top{
  display:flex;
  padding:var(--s-5) var(--s-5) 0;
  gap:var(--gutter);
}
.featured-avatar{
  width:72px;height:72px;
  border-radius: var(--r-md);
  overflow:hidden;
  border:2px solid var(--primary);
  flex-shrink:0;
}
.featured-avatar img{width:100%;height:100%;object-fit:cover}
.featured-info{flex:1;min-width:0}
.featured-crown{
  display:inline-flex;
  align-items:center;
  gap:var(--s-1);
  font-size: var(--t-micro);
  color:var(--primary);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  padding:2px var(--s-2);
  border-radius: var(--r-sm);
  margin-bottom:var(--s-2);
}
.featured-crown svg{width:12px;height:12px;fill:var(--primary)}
.featured-name{
  font-family:var(--font-display);
  font-size: var(--t-h3);
  font-weight:700;
  margin-bottom:2px;
}
.featured-dept{font-size: var(--t-sm);color:var(--text3)}
.featured-body{padding:var(--gutter) var(--s-5) var(--s-5)}
.featured-quote{
  font-size: var(--t-body);
  color:var(--text2);
  line-height:1.7;
  padding-left:var(--s-3);
  border-left:2px solid var(--primary);
  margin-bottom:var(--gutter);
}
.featured-stats{
  display:flex;
  gap:var(--s-3);
}
.featured-stat{
  flex:1;
  text-align:center;
  padding:var(--s-3) 0;
  background:color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: var(--r-sm);
}
.featured-stat-num{
  font-family:var(--font-display);
  font-size: var(--t-h3);
  font-weight:900;
  color:var(--primary);
}
.featured-stat-label{font-size: var(--t-micro);color:var(--text3);margin-top:2px}

/* Challenge Section */
.challenge-section{
  margin:0 var(--gutter);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius: var(--r-md);
  padding:var(--s-5);
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.challenge-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:var(--gutter);
}
.challenge-title{
  font-family:var(--font-display);
  font-size: var(--t-h3);
  font-weight:700;
}
.challenge-tag {
  /* 外观交给共享 .badge--accent */
  border-radius: var(--r-sm);
}
.challenge-list{display:flex;flex-direction:column;gap:var(--gutter)}
.challenge-row{
  display:flex;
  align-items:center;
  gap:var(--s-3);
}
.challenge-medal{
  width:28px;height:28px;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);font-weight:800;
  flex-shrink:0;
}
.medal-1{background:linear-gradient(135deg,var(--accent),var(--accent-line));color:var(--ink)}
.medal-2{background:linear-gradient(135deg,var(--accent-hi),var(--accent-line));color:var(--ink)}
.medal-3{background:linear-gradient(135deg,var(--accent-lo),var(--line-strong));color:var(--ink)}
.medal-n{background:var(--bg-elevated);color:var(--text3)}
.challenge-info{flex:1;min-width:0}
.challenge-team-name{font-size: var(--t-sm);font-weight:500;margin-bottom:var(--s-1)}
.challenge-bar {
  /* 高度 5px 是本站的密度选择（列表里 4 行并排），保留；
     其余（底色/圆角/裁剪）交给共享 .bar */
  height: 5px;
}
.challenge-fill{
  /* 外观（填充色/圆角/过渡）交给共享 .bar__fill；1.2s 是本站的入场节奏 */
  transition:width 1.2s var(--ease-soft);
}

.challenge-pct{
  font-size: var(--t-body);
  font-weight:700;
  color:var(--primary);
  min-width:40px;
  text-align:right;
}

/* ===== CULTURE PAGE ===== */
/* Timeline */
.culture-timeline{
  padding:var(--s-1) var(--gutter) var(--s-2);
  position:relative;
  max-height:320px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb, var(--accent) 20%, transparent) transparent;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12px,#000 88%,transparent 100%);
}
.culture-timeline::-webkit-scrollbar{width:4px}
.culture-timeline::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--accent) 20%, transparent);border-radius: var(--r-2xs)}
.culture-timeline::before{
  content:'';
  position:absolute;
  left:28px;
  top:12px;
  bottom:16px;
  width:2px;
  background:linear-gradient(to bottom,var(--primary),color-mix(in srgb, var(--accent) 6%, transparent));
}
.timeline-row{
  position:relative;
  padding:0 0 var(--gutter) var(--s-10);
  opacity:0;
  transform:translateY(16px);
  transition: all var(--dur-3) var(--ease-soft);
}
.timeline-row:last-child{padding-bottom:0}
.timeline-row.visible{opacity:1;transform:translateY(0)}
.timeline-row::before{
  content:'';
  position:absolute;
  left:21px;
  top:5px;
  width:16px;height:16px;
  border-radius: var(--r-full);
  background:var(--primary);
  border:3px solid var(--bg);
  box-shadow:0 0 0 2px var(--primary),0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
  z-index:1;
  box-sizing:border-box;
  transition:box-shadow .4s;
}
.timeline-row.visible::before{
  box-shadow:0 0 0 2px var(--primary),0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent);
}
.timeline-row-inner{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius: var(--r-sm);
  padding:var(--s-3) var(--gutter);
  position:relative;
  overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.03);
}
.timeline-row-inner::before{
  content:'';
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:linear-gradient(180deg,var(--primary),color-mix(in srgb, var(--accent) 30%, transparent));
  border-radius: var(--r-xs) 0 0 3px;
}
.timeline-row:hover .timeline-row-inner{
  transform:translateX(3px);
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.timeline-row:active .timeline-row-inner{transform:scale(.98)}
.timeline-year{
  font-family:var(--font-display);
  font-size: var(--t-body);
  font-weight:900;
  color:var(--primary);
  margin-bottom:var(--s-1);
  letter-spacing:1px;
}
.timeline-text{
  font-size: var(--t-sm);
  color:var(--text2);
  line-height:1.6;
}

/* Album */
.album-carousel{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:var(--s-3);
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 var(--gutter) var(--s-2);
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.album-carousel::-webkit-scrollbar{display:none}
.album-item{
  flex:0 0 auto;
  scroll-snap-align:start;
  border-radius: var(--r-md);
  overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--border);
  cursor:pointer;
  transition:transform .3s;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.album-item:active{transform:scale(.96)}
.album-item-img{
  height:120px;
  overflow:hidden;
  position:relative;
}
.album-item-img img{width:100%;height:100%;object-fit:cover}
.album-item-tag{
  position:absolute;
  top:8px;left:8px;
  font-size: var(--t-micro);
  color:#fff;
  background:rgba(12,10,8,.72);
  backdrop-filter:blur(8px);
  padding:2px var(--s-2);
  border-radius: var(--r-sm);
}
.album-item-body{padding:var(--s-3)}
.album-item-title{
  font-family:var(--font-display);
  font-size: var(--t-body);
  font-weight:700;
  margin-bottom:var(--s-1);
}
.album-item-desc{font-size: var(--t-xs);color:var(--text3);line-height:1.5}

/* Qualifications Wall */
.qual-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s-3);
  padding: 0 var(--gutter);
}
.qual-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius: var(--r-md);
  padding:var(--gutter) var(--s-3);
  display:flex;
  align-items:center;
  gap:var(--s-3);
  transition:transform .25s ease,box-shadow .25s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.03);
  cursor:default;
}
.qual-card:active{transform:scale(.96)}
.qual-icon{
  width:36px;height:36px;
  border-radius: var(--r-sm);
  background:color-mix(in srgb, var(--accent) 8%, transparent);
}
.qual-icon svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.8}
.qual-text{
  font-size: var(--t-sm);
  font-weight:500;
  color:var(--text1);
  line-height:1.4;
}

/* Patent Stats */
/* Product Card */
.product-card-wrap{
  min-width:210px;
  max-width:210px;
  scroll-snap-align:start;
  border-radius: var(--r-md);
  background:var(--bg-card);
  border:1px solid var(--border);
  overflow:hidden;
  flex-shrink:0;
  cursor:pointer;
  transition:transform .3s ease,box-shadow .3s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.product-card-wrap:active{transform:scale(.96)}
.product-card-top{
  height:140px;
  background:var(--surface-inset);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.product-card-top img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.product-card-body{padding:var(--s-3)}
.product-card-name{
  font-family:var(--font-display);
  font-size: var(--t-sm);
  font-weight:700;
  margin-bottom:3px;
}
.product-card-desc{
  font-size: var(--t-xs);
  color:var(--text3);
  line-height:1.5;
}

/* Capsule */
.capsule-list{
  padding: 0 var(--gutter);
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
}
.capsule-item{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius: var(--r-md);
  padding:var(--gutter);
  display:flex;
  align-items:center;
  gap:var(--gutter);
  position:relative;
  overflow:hidden;
  transition:border-color .3s;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.capsule-item:active{border-color:var(--primary)}
.capsule-icon{
  width:44px;height:44px;
  border-radius: var(--r-md);
  background:color-mix(in srgb, var(--accent) 8%, transparent);
}
.capsule-icon svg{width:22px;height:22px;stroke:var(--primary);fill:none;stroke-width:1.5}
.capsule-info{flex:1;min-width:0}
.capsule-name{font-size: var(--t-body);font-weight:600;margin-bottom:3px}
.capsule-desc{font-size: var(--t-xs);color:var(--text3)}
.capsule-right{text-align:right;flex-shrink:0}
.capsule-countdown{
  font-family:var(--font-display);
  font-size: var(--t-h3);
  font-weight:700;
  color:var(--primary);
}
.capsule-status{
  font-size: var(--t-micro);
  margin-top:2px;
}
.capsule-status.sealed{color:var(--primary)}
.capsule-status.opened{color:var(--success)}

/* Ambassador */
.ambassador-scroll{
  display:flex;
  gap:var(--s-3);
  overflow-x:auto;
  padding:0 var(--gutter) var(--s-2);
  scrollbar-width:none;
}
.ambassador-scroll::-webkit-scrollbar{display:none}
.ambassador-item{
  min-width:140px;
  max-width:140px;
  text-align:center;
  flex-shrink:0;
  cursor:pointer;
}
.ambassador-item:active .ambassador-pic{transform:scale(.94)}
.ambassador-pic{
  width:64px;height:64px;
  margin:0 auto var(--s-2);
  border-radius: var(--r-full);
  overflow:hidden;
  border:2px solid var(--primary);
}
.ambassador-pic img{
  width:100%;height:100%;
  border-radius: var(--r-full);
  object-fit:cover;
  display:block;
}
.ambassador-name{font-size: var(--t-sm);font-weight:500;margin-bottom:2px;color:var(--text1);text-shadow:none;-webkit-font-smoothing:subpixel-antialiased}
.ambassador-dept{font-size: var(--t-micro);color:var(--text3);margin-bottom:var(--s-1);text-shadow:none}
.ambassador-badge{
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-size: var(--t-micro);
  color:var(--primary);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  padding:2px var(--s-2);
  border-radius: var(--r-sm);
}
.ambassador-badge svg{width:10px;height:10px;fill:var(--primary)}

/* Create Capsule FAB */
.fab{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  border-radius: var(--r-sm);
  background:linear-gradient(135deg,var(--accent),var(--accent-line));
  border:none;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s;
  margin-left:auto;
  flex-shrink:0;
}
.fab:active{transform:scale(.88)}
.fab svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:2.5}

/* ===== DASHBOARD PAGE ===== */
.dash-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s-3);
  padding: 0 var(--gutter);
  margin-bottom:var(--s-5);
}
.dash-stat{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius: var(--r-md);
  padding:var(--gutter);
  position:relative;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  opacity:0;
  transform:translateY(12px);
  transition:opacity .45s ease,transform .45s ease,box-shadow .3s;
}
.dash-stat.visible{opacity:1;transform:translateY(0)}
.dash-stat:hover{box-shadow:0 4px 16px rgba(0,0,0,.08)}
.dash-stat::after{
  content:'';
  position:absolute;
  top:-20px;right:-20px;
  width:60px;height:60px;
  border-radius: var(--r-full);
  background:color-mix(in srgb, var(--accent) 4%, transparent);
}
.dash-stat-icon{
  /* 布局交给共享 .icon-box；这里只留本站的尺寸/底色/与下方文字的间距 */
  width:32px;height:32px;
  border-radius: var(--r-sm);
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  margin-bottom:var(--s-3);
}
.dash-stat-icon svg{width:16px;height:16px;stroke:var(--primary);fill:none;stroke-width:1.8}
.dash-stat-label{font-size: var(--t-xs);color:var(--text3);margin-bottom:var(--s-1)}
.dash-stat-value{
  font-family:var(--font-display);
  font-size: var(--t-h2);
  font-weight:900;
  color:var(--primary);
  /* 值里可能带后缀（20+）：要同排，且基线对齐 */
  display:flex;
  align-items:baseline;
  gap:1px;
  font-variant-numeric: tabular-nums;
}
/* 后缀：跟着数字走，不是独立一行。
   这一段此前完全没有样式，所以 "+" 会换行 —— 它一直是死代码，
   直到磁贴真的渲染出来才暴露。 */
.dash-stat-suffix{
  font-family:var(--font-display);
  font-size:var(--t-h3);
  font-weight:var(--fw-semi);
  color:var(--primary);
  line-height:1;
}
/* Partner Grid */
.partner-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s-3);
  padding: 0 var(--gutter);
}
.partner-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius: var(--r-md);
  padding:var(--gutter) var(--s-3);
  display:flex;
  align-items:center;
  gap:var(--s-3);
  transition:transform .25s ease,box-shadow .25s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.03);
}
.partner-card:active{transform:scale(.96)}
.partner-icon{
  width:36px;height:36px;
  border-radius: var(--r-sm);
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.partner-icon svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.8}
.partner-text{font-size: var(--t-sm);font-weight:500;color:var(--text1);line-height:1.4}

/* Scene Tags */
.scene-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2);
  padding:0 var(--gutter) var(--gutter);
}
.scene-tag{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius: var(--r-lg);
  padding:var(--s-2) var(--gutter);
  font-size: var(--t-sm);
  font-weight:500;
  color:var(--text1);
  transition:transform .2s,box-shadow .2s;
  box-shadow:0 1px 4px rgba(0,0,0,.03);
}
.scene-tag:active{transform:scale(.95)}
.scene-tag svg{width:14px;height:14px;stroke:var(--accent);fill:none;stroke-width:1.8;flex-shrink:0}

/* Profile Card (personal homepage style) */
.profile-card{
  background:var(--bg-card);
  border-radius: var(--r-md);
  margin:0 var(--gutter) var(--gutter);
  box-shadow:0 1px 8px rgba(0,0,0,.05);
  overflow:hidden;
  border:1px solid var(--border);
}
.profile-card::before{
  content:'';
  display:block;
  height:3px;
  background:linear-gradient(90deg,var(--primary),var(--primary-light),var(--accent));
}
.profile-header{
  text-align:center;
  padding:var(--s-5) var(--gutter) var(--s-2);
}
.profile-avatar-wrap{
  position:relative;
  display:inline-block;
}
.profile-avatar{
  width:60px;height:60px;
  border-radius: var(--r-full);
  object-fit:cover;
  border:2.5px solid var(--surface);
  box-shadow:0 3px 10px color-mix(in srgb, var(--accent) 18%, transparent);
  background:var(--bg-card2);
}
.profile-online{
  position:absolute;
  bottom:1px;right:1px;
  width:11px;height:11px;
  border-radius: var(--r-full);
  background:var(--success);
  border:2px solid var(--surface);
}
.profile-name{
  font-size: var(--t-h3);
  font-weight:700;
  color:var(--text1);
  margin-top:var(--s-3);
  line-height:1.3;
}
.profile-title-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  margin-top:3px;
}
.profile-title{
  font-size: var(--t-sm);
  /* --accent 而非 --primary-light：后者是装饰级令牌（浅底上 3.78:1），
     小字用它不合规；--accent 才是验证过的正文级强调色 */
  color:var(--accent);
  font-weight:500;
}
.profile-dept{
  font-size: var(--t-xs);
  color:var(--text3);
  padding:1px var(--s-2);
  background:var(--bg-card2);
  border-radius: var(--r-xs);
}
.profile-intro{
  font-size: var(--t-sm);
  color:var(--text2);
  line-height:1.5;
  text-align:center;
  padding:0 var(--gutter) var(--s-3);
  border-bottom:1px solid var(--border);
  margin:0 var(--s-3);
}
.profile-intro::before{content:'"';color:var(--text3);margin-right:2px}
.profile-intro::after{content:'"';color:var(--text3);margin-left:2px}
.profile-stats{
  display:flex;
  padding:var(--s-3) var(--gutter);
  gap:0;
}
.profile-stat{
  flex:1;
  text-align:center;
  position:relative;
}
.profile-stat+.profile-stat::before{
  content:'';
  position:absolute;
  left:0;top:50%;
  transform:translateY(-50%);
  width:1px;height:22px;
  background:var(--border);
}
.profile-stat-num{
  font-size: var(--t-h3);
  font-weight:700;
  color:var(--primary);
  line-height:1.2;
  font-family:var(--font-display);
}
.profile-stat-label{
  font-size: var(--t-micro);
  color:var(--text3);
  margin-top:2px;
}
.profile-tags{
  display:flex;
  gap:var(--s-1);
  flex-wrap:wrap;
  padding:0 var(--gutter) var(--gutter);
}
.profile-tag{
  font-size: var(--t-xs);
  /* --accent 而非 --primary-light：后者是装饰级令牌（浅底上 3.78:1），
     小字用它不合规；--accent 才是验证过的正文级强调色 */
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 6%, transparent);
  padding:3px var(--s-3);
  border-radius: var(--r-sm);
}

/* Team Members */
.team-members{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  padding: 0 var(--gutter);
}
.team-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius: var(--r-md);
  padding:var(--gutter);
  display:flex;
  gap:var(--s-3);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:transform .25s ease,box-shadow .25s ease;
}
.team-card:active{transform:scale(.98)}
.team-avatar{
  width:56px;height:56px;
  border-radius: var(--r-full);
  object-fit:cover;
  flex-shrink:0;
  background:var(--bg-card2);
  border:2px solid color-mix(in srgb, var(--accent) 10%, transparent);
}
.team-info{flex:1;min-width:0}
.team-name{
  font-size: var(--t-body);
  font-weight:600;
  color:var(--text1);
  line-height:1.4;
}
.team-dept{
  font-size: var(--t-xs);
  color:var(--text3);
  margin-bottom:var(--s-1);
}
.team-quote{
  font-size: var(--t-sm);
  color:var(--text2);
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.team-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:var(--s-2);
}
.team-tag{
  display:inline-flex;
  align-items:center;
  gap:var(--s-1);
  font-size: var(--t-micro);
  /* --accent 而非 --primary-light：后者是装饰级令牌（浅底上 3.78:1），
     小字用它不合规；--accent 才是验证过的正文级强调色 */
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 6%, transparent);
  padding:2px var(--s-2);
  border-radius: var(--r-sm);
  font-weight:500;
}
.team-likes{
  display:flex;
  align-items:center;
  gap:var(--s-1);
  font-size: var(--t-xs);
  color:var(--text3);
}
.team-likes svg{width:14px;height:14px;stroke:var(--text3);fill:none;stroke-width:1.8}

.lb-item:first-child .lb-rank{box-shadow:0 0 10px color-mix(in srgb, var(--accent) 30%, transparent)}

/* ===== Bottom Sheet Modal ===== */
.sheet-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.4);
  z-index:100;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s;
}
.sheet-overlay.active{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;
  bottom:0;left:50%;
  transform:translateX(-50%) translateY(100%);
  width:100%;max-width: var(--app-max);
  background:var(--bg-card);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  z-index:101;
  transition:transform .4s var(--ease-soft);
  padding:0 var(--s-5) var(--s-6);
  padding-bottom:calc(var(--s-6) + var(--safe-bottom));
}
.sheet-overlay.active+.sheet,
.sheet.active{transform:translateX(-50%) translateY(0)}
.sheet-handle{
  width:36px;height:4px;
  background:var(--bg-elevated);
  border-radius: var(--r-2xs);
  margin:var(--s-3) auto var(--gutter);
}
.sheet h3{
  font-family:var(--font-display);
  font-size: var(--t-h3);
  font-weight:700;
  margin-bottom:var(--gutter);
  color:var(--text1);
}
.sheet textarea{
  width:100%;
  height:100px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius: var(--r-md);
  padding:var(--gutter);
  color:var(--text1);
  font-family:var(--font-text);
  font-size: var(--t-body);
  resize:none;
  margin-bottom:var(--gutter);
}
.sheet textarea::placeholder{color:var(--text3)}
.sheet textarea:focus{outline:none;border-color:var(--primary)}
.sheet-actions{display:flex;gap:var(--s-3)}
.sheet-btn{
  flex:1;
  padding:var(--s-3);
  border-radius: var(--r-md);
  font-size: var(--t-body);
  font-weight:600;
  cursor:pointer;
  border:none;
  transition: all var(--dur-2);
}
.sheet-btn:active{transform:scale(.97)}
.sheet-btn-cancel{background:var(--bg-elevated);color:var(--text2)}
.sheet-btn-confirm{background:linear-gradient(135deg,var(--accent),var(--accent-line));color:#fff}

/* Detail Sheet */
.detail-sheet{
  position:fixed;
  bottom:0;left:50%;
  transform:translateX(-50%) translateY(100%);
  width:100%;max-width: var(--app-max);
  background:var(--bg-card);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  z-index:101;
  transition:transform .4s var(--ease-soft);
  padding:0 var(--s-5) var(--s-6);
  padding-bottom:calc(var(--s-6) + var(--safe-bottom));
  max-height:80vh;
  overflow-y:auto;
}
.detail-sheet.active{transform:translateX(-50%) translateY(0)}
.detail-close{
  position:absolute;
  top:16px;right:16px;
  width:32px;height:32px;
  border-radius: var(--r-full);
  background:var(--bg-elevated);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  border:none;
}
.detail-close svg{width:16px;height:16px;stroke:var(--text2);fill:none;stroke-width:2}
.detail-header{text-align:center;padding:var(--s-5) 0 var(--gutter)}
.detail-avatar{
  width:72px;height:72px;
  border-radius: var(--r-full);
  border:2.5px solid var(--primary);
  overflow:hidden;
  margin:0 auto var(--s-3);
  box-shadow:0 4px 16px color-mix(in srgb, var(--accent) 20%, transparent);
}
.detail-avatar img{width:100%;height:100%;object-fit:cover}
.detail-name{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:700;
  margin-bottom:2px;
  color:var(--text1);
}
.detail-title-text{font-size: var(--t-sm);color:var(--primary);margin-bottom:var(--s-1)}
.detail-dept{font-size: var(--t-sm);color:var(--text3)}
.detail-body{padding-bottom:var(--s-2)}
.detail-section{
  margin-bottom:var(--gutter);
  padding:var(--gutter);
  background:var(--bg);
  border-radius: var(--r-md);
  border:1px solid var(--border);
}
.detail-section h4{
  font-size: var(--t-sm);
  color:var(--primary);
  letter-spacing:1px;
  margin-bottom:var(--s-2);
}
.detail-section p{font-size: var(--t-sm);color:var(--text2);line-height:1.7}
.detail-blessing{
  border-left:3px solid var(--primary);
  padding-left:var(--s-3);
  font-style:italic;
}

/* Album Modal */
.album-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  z-index:101;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s;
}
.album-overlay.active{opacity:1;pointer-events:auto}
.album-modal{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.85);
  width:calc(100% - 48px);
  max-width:380px;
  max-height:85vh;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius: var(--r-lg);
  overflow:hidden;
  z-index:102;
  opacity:0;
  pointer-events:none;
  transition: all var(--dur-3) var(--ease-soft);
  box-shadow:0 20px 60px rgba(0,0,0,.2);
}
.album-modal.active{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}
.album-modal-img{
  width:100%;
  height:180px;
  overflow:hidden;
  position:relative;
}
.album-modal-img img{width:100%;height:100%;object-fit:cover}
.album-modal-tag{
  position:absolute;
  top:12px;left:12px;
  font-size: var(--t-micro);
  color:#FFF;
  background:rgba(12,10,8,.8);
  backdrop-filter:blur(8px);
  padding:2px var(--s-2);
  border-radius: var(--r-sm);
}
.album-modal-close{
  position:absolute;
  top:12px;right:12px;
  width:30px;height:30px;
  border-radius: var(--r-full);
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  border:none;
  z-index:2;
}
.album-modal-close svg{width:16px;height:16px;stroke:#FFF;fill:none;stroke-width:2}
.album-modal-body{
  padding:var(--s-5);
  overflow-y:auto;
  max-height:calc(85vh - 180px);
}
.album-modal-title{
  font-family:var(--font-display);
  font-size: var(--t-h3);
  font-weight:700;
  margin-bottom:var(--s-1);
  color:var(--text1);
}
.album-modal-sub{
  font-size: var(--t-sm);
  color:var(--text3);
  margin-bottom:var(--gutter);
}
.album-modal-story{
  font-size: var(--t-body);
  color:var(--text2);
  line-height:1.9;
  white-space:pre-line;
}

/* 原站自造 toast：showToast() 仍写这个节点。
   app-shell.js 的 window.toast() 用 .toast-host，两者互不冲突。
   这里把自造 toast 也收敛成与设计系统一致的外观 */
.toast{
  position:fixed;
  bottom:calc(var(--safe-b) + var(--s-8));
  left:50%;
  transform:translateX(-50%) translateY(80px);
  /* 反色浮层：不能用 --ink/--bg（浅色主题下语义相反，会变成纯黑药丸） */
  background:var(--ink-surface);
  color:var(--on-ink-surface);
  padding:var(--s-3) var(--s-5);
  border-radius:var(--r-full);
  font-size:var(--t-sm);
  font-weight:var(--fw-medium);
  z-index:var(--z-toast);
  transition:transform var(--dur-3) var(--ease-spring);
  box-shadow:var(--shadow-lg);
  white-space:nowrap;
  pointer-events:none;
  max-width:calc(100vw - var(--s-8));
  overflow:hidden;
  text-overflow:ellipsis;
}
.toast.show{transform:translateX(-50%) translateY(0)}
/* 空 toast 不渲染 —— 原来靠 translateY(80px) 推出视口，
   但它是 fixed + bottom:64px，在 800px 视口里上移 80px 仍留在屏内。
   深色主题下与背景同色看不出来，浅色主题下就是一块黑斑。 */
.toast:empty{display:none}

/* Particle Canvas */
#particleBg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* 内容层必须明确压过粒子背景。
   玻璃层的 backdrop-filter 让 .app-shell 建立了自己的层叠上下文，
   它内部所有 z-index 都被关在这一层里；不显式给 .app-shell 一个 z-index，
   它就是 auto，会被同级的 #particleBg(z-index:0) 盖住 ——
   表现为粒子层连同累积画面糊在正文上。 */
.app-shell{
  position:relative;
  z-index:1;
}

/* Scrollbar */
::-webkit-scrollbar{width:0;height:0}

/* Count up */
.count-up{display:inline-block}

/* ===== Splash Screen ===== */
#splash{
  position:fixed;inset:0;
  z-index:999;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--accent-lo) 0%,var(--accent) 30%,var(--accent) 60%,var(--accent) 100%);
  overflow:hidden;
  transition:opacity .6s ease, transform .6s ease, visibility 0s linear;
}
#splash.hide{
  opacity:0;
  transform:scale(1.05);
  pointer-events:none;
  /* 退场走完后真正移出渲染：只写 opacity:0 会留下一个 z-index:999 的
     独立合成层，在模糊卡片上叠出鬼影。visibility 用延迟切换，
     不打断上面的 transition。 */
  visibility:hidden;
  transition:opacity .6s ease, transform .6s ease, visibility 0s linear .6s;
}
#splashCanvas{position:absolute;inset:0;pointer-events:none}
.splash-content{
  position:relative;z-index:1;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.splash-glow{
  position:absolute;
  top:50%;left:50%;
  width:320px;height:320px;
  transform:translate(-50%,-50%);
  border-radius: var(--r-full);
  background:radial-gradient(circle,color-mix(in srgb, var(--accent-hi) 12%, transparent) 0%,color-mix(in srgb, var(--accent) 6%, transparent) 30%,transparent 60%);
  animation:splashPulse 4s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes splashPulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.5}
  50%{transform:translate(-50%,-50%) scale(1.3);opacity:1}
}

/* Scanning line effect */
.splash-scanline{
  position:absolute;
  left:5%;right:5%;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(195,218,245,.6),transparent);
  animation:scanMove 3s cubic-bezier(.45,0,.55,1) infinite;
  opacity:.5;
}
@keyframes scanMove{
  0%{top:10%;opacity:0}
  20%{opacity:.6}
  80%{opacity:.6}
  100%{top:90%;opacity:0}
}
.splash-scanline::after{
  content:'';
  position:absolute;
  right:0;top:-3px;
  width:8px;height:8px;
  border-radius: var(--r-full);
  background:rgba(195,218,245,.8);
  box-shadow:0 0 12px rgba(195,218,245,.6);
}

/* Expanding rings */
.splash-ring{
  position:absolute;
  top:50%;left:50%;
  border:1px solid rgba(195,218,245,.15);
  border-radius: var(--r-full);
  transform:translate(-50%,-50%) scale(0);
  animation:ringExpand 4s ease-out infinite;
  pointer-events:none;
}
.splash-ring:nth-child(3){animation-delay:1s}
.splash-ring:nth-child(4){animation-delay:2s}
@keyframes ringExpand{
  0%{width:0;height:0;opacity:.6;transform:translate(-50%,-50%) scale(0)}
  100%{width:500px;height:500px;opacity:0;transform:translate(-50%,-50%) scale(1)}
}

/* Corner dots */
.splash-corner{
  position:absolute;
  width:4px;height:4px;
  border-radius: var(--r-full);
  background:rgba(195,218,245,.4);
  box-shadow:0 0 6px rgba(195,218,245,.3);
  animation:cornerDot 2s cubic-bezier(.45,0,.55,1) infinite alternate;
}
.splash-corner:nth-child(6){top:15%;left:10%;animation-delay:0s}
.splash-corner:nth-child(7){top:15%;right:10%;animation-delay:.5s}
.splash-corner:nth-child(8){bottom:20%;left:8%;animation-delay:1s}
.splash-corner:nth-child(9){bottom:20%;right:8%;animation-delay:1.5s}
@keyframes cornerDot{
  0%{opacity:.2;transform:scale(.8)}
  100%{opacity:.8;transform:scale(1.3)}
}

/* Logo letter animation */
.splash-logo{
  font-family:var(--font-display);
  font-size: var(--t-display);
  font-weight:900;
  letter-spacing:6px;
  background:linear-gradient(135deg,var(--accent-line),var(--surface),var(--accent-line),var(--surface));
  background-size:300% 100%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer 3s cubic-bezier(.45,0,.55,1) infinite, logoReveal .8s cubic-bezier(.22,.68,.35,1.1) forwards;
  position:relative;
  opacity:0;
  transform:scale(.85);
}
@keyframes logoReveal{
  0%{opacity:0;transform:scale(.85) translateY(10px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes shimmer{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.splash-sub{
  font-family:var(--font-display);
  font-size: var(--t-h2);
  font-weight:600;
  color:rgba(195,218,245,0.9);
  letter-spacing:12px;
  margin-top:var(--s-2);
  margin-left:var(--s-2);
  opacity:0;
  animation:subReveal .6s ease .2s forwards;
}
@keyframes subReveal{
  from{opacity:0;transform:translateY(8px);letter-spacing:20px}
  to{opacity:1;transform:translateY(0);letter-spacing:12px}
}
.splash-tagline{
  font-size: var(--t-body);
  color:rgba(195,218,245,0.7);
  letter-spacing:4px;
  margin-top:var(--s-7);
  opacity:0;
  animation:tagReveal .8s ease .5s forwards;
}
@keyframes tagReveal{
  from{opacity:0;transform:translateY(12px);letter-spacing:8px}
  to{opacity:1;transform:translateY(0);letter-spacing:4px}
}
.splash-bar-track{
  width:200px;height:3px;
  background:rgba(195,218,245,.12);
  border-radius: var(--r-2xs);
  margin-top:var(--s-8);
  overflow:hidden;
  opacity:0;
  animation:barFadeIn .6s ease .7s forwards;
}
@keyframes barFadeIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
.splash-bar-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--accent-hi),var(--accent-line));
  border-radius: var(--r-2xs);
  transition:width .15s linear;
  box-shadow:0 0 10px rgba(12,10,8,.12);
}

/* Team Building */
.tb-section{
  margin-top:var(--s-5);
}
.tb-review-btn{
  position:relative;
  font-size: var(--t-sm);
  /* --accent 而非 --primary-light：后者是装饰级令牌（浅底上 3.78:1），
     小字用它不合规；--accent 才是验证过的正文级强调色 */
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 6%, transparent);
  padding:var(--s-1) var(--s-3);
  border-radius: var(--r-md);
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:3px;
  transition:background .2s;
  font-weight:500;
}
.tb-review-btn:active{background:color-mix(in srgb, var(--accent) 12%, transparent)}
.tb-review-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
/* 热区补到 44x44 —— 30px 高的文字按钮手指点不准 */
.tb-review-btn::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: max(100%, var(--tap-min, 44px));
  height: max(100%, var(--tap-min, 44px));
  transform: translate(-50%, -50%);
  border-radius: inherit;
}
.tb-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:var(--s-2);
  padding: 0 var(--gutter);
}
.tb-photo{
  border-radius: var(--r-sm);
  overflow:hidden;
  aspect-ratio:1;
  position:relative;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:transform .3s ease,box-shadow .3s ease;
  cursor:pointer;
}
.tb-photo img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.tb-photo-overlay{
  position:absolute;
  bottom:0;left:0;right:0;
  padding:var(--s-2);
  background:linear-gradient(transparent,rgba(0,0,0,.5));
  opacity:0;
  transition:opacity .25s;
}
.tb-photo:hover .tb-photo-overlay{opacity:1}
.tb-photo-caption{
  font-size: var(--t-micro);
  color:#fff;
  text-align:center;
  line-height:1.2;
}
.tb-photo.hidden{display:none}
.tb-toggle-wrap{text-align:center;margin-top:var(--s-3);padding: 0 var(--gutter)}
.tb-toggle-btn{
  position:relative;
  font-size: var(--t-sm);
  /* --accent 而非 --primary-light：后者是装饰级令牌（浅底上 3.78:1），
     小字用它不合规；--accent 才是验证过的正文级强调色 */
  color:var(--accent);
  background:var(--bg-card);
  border:1px solid var(--border);
  padding:var(--s-2) var(--s-5);
  border-radius: var(--r-md);
  cursor:pointer;
  transition: all var(--dur-2);
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.tb-toggle-btn:active{transform:scale(.95);background:var(--bg-card2)}
/* 热区补到 44x44 —— 40px 高，差一点点，手指就差很多 */
.tb-toggle-btn::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: max(100%, var(--tap-min, 44px));
  height: max(100%, var(--tap-min, 44px));
  transform: translate(-50%, -50%);
  border-radius: inherit;
}

/* Team Building Review Modal */
.tb-modal-overlay{
  position:fixed;
  inset:0;
  background:#000;
  z-index:200;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  animation:tbFadeIn .3s ease;
}
.tb-modal-overlay.active{display:flex}
@keyframes tbFadeIn{from{opacity:0}to{opacity:1}}
.tb-modal-close{
  position:absolute;
  top:20px;right:12px;
  width:36px;height:36px;
  border-radius: var(--r-full);
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:20;
  transition:background .2s,transform .2s;
}
.tb-modal-close:hover{background:rgba(0,0,0,.75)}
.tb-modal-close:active{transform:scale(.85)}
/* 虚化背景层 */
.tb-modal-bg{
  position:absolute;
  inset:-40px;
  background-size:cover;
  background-position:center;
  filter:blur(40px);
  opacity:.5;
  transition:opacity .4s ease;
  pointer-events:none;
}
.tb-modal-content{
  width:92%;
  max-width:400px;
  max-height:90vh;
  overflow-y:auto;
  border-radius: var(--r-md);
  position:relative;
  background:rgba(20,20,30,.3);
  backdrop-filter:blur(2px);
}
/* 顶部进度条 */
.tb-modal-progress{
  display:flex;
  gap:var(--s-1);
  padding:var(--gutter) var(--gutter) var(--s-2);
}
.tb-modal-progress .bar{
  flex:1;height:3px;
  border-radius: var(--r-xs);
  background:rgba(255,255,255,.2);
  overflow:hidden;
}
.tb-modal-progress .bar .fill{
  height:100%;width:0%;
  background:var(--accent);
  border-radius: var(--r-xs);
}
.tb-modal-progress .bar.done .fill{width:100%!important;animation:none}
.tb-modal-progress .bar.active .fill{animation:tbBarFill 4s linear forwards}
@keyframes tbBarFill{from{width:0%}to{width:100%}}
/* 图片容器 */
.tb-modal-img-wrap{
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tb-modal-img-wrap img{
  max-width:92%;
  max-height:92%;
  object-fit:contain;
  display:block;
  border-radius: var(--r-sm);
  box-shadow:0 4px 30px rgba(0,0,0,.5);
  transition:opacity .35s ease,transform .35s ease;
}
/* 计数器徽章 */
.tb-modal-counter{
  position:absolute;
  top:12px;right:16px;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(6px);
  padding:3px var(--s-3);
  border-radius: var(--r-md);
  font-size: var(--t-xs);
  color:#fff;
  font-weight:500;
  z-index:5;
  letter-spacing:.3px;
}
/* 文字区域 - 磨砂玻璃 */
.tb-modal-story{
  padding:var(--gutter) var(--s-5) var(--s-3);
  color:rgba(255,255,255,.9);
  font-size: var(--t-body);
  line-height:1.8;
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px);
  margin:0 var(--s-3) var(--s-3);
  border-radius: var(--r-md);
  border:1px solid rgba(255,255,255,.06);
}
.tb-modal-story-title{
  font-size: var(--t-h3);
  font-weight:600;
  color:#fff;
  margin-bottom:var(--s-2);
  letter-spacing:.3px;
}
/* 导航 */
.tb-modal-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-6);
  padding:var(--s-2) var(--gutter) var(--s-5);
}
.tb-modal-nav-btn{
  width:44px;height:44px;
  border-radius: var(--r-full);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s,transform .2s;
}
.tb-modal-nav-btn:active{background:rgba(255,255,255,.2);transform:scale(.9)}
.tb-modal-nav-btn svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.5}
.tb-modal-play-btn{
  width:46px;height:46px;
  border-radius: var(--r-full);
  background:var(--accent);
  border:none;
  color:var(--primary);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s,box-shadow .2s;
  box-shadow:0 0 20px color-mix(in srgb, var(--accent) 30%, transparent);
}
.tb-modal-play-btn:active{transform:scale(.85)}
.tb-modal-play-btn svg{width:20px;height:20px;fill:var(--primary);stroke:none}


/* ==========================================================================
   ===== 站点皮肤层 · 针对性调整 =====
   以下是在「变量重映射」之外，针对视觉上明显不合设计系统的部分做的定点修正。
   每条都说明改了什么、为什么。
   ========================================================================== */

/* --- 1. 顶栏：设计系统 .topbar 接管，本站只是往里放品牌与时间读数 --- */
.app-header-top{ width:100%; min-width:0; }
.status-bar-time{ margin-left:auto; }
.app-logo{ min-width:0; }
.app-logo > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* --- 1b. 页面容器不做裁剪：页内没有绝对定位层，
       而 overflow:hidden 会拦掉粘性定位（标签栏正依赖它） --- */
.pages-wrapper{ overflow:visible; }

/* --- 1c. 区块标题回到设计系统的字阶（原站 18px，脱离 --t-* 栅格） --- */
.section-hd-title{ font-size:var(--t-h2); }

/* --- 1d. 原站自造 toast 内只有一个文本节点，需块级排版才能截断超长文案 --- */
.toast{ display:block; }

/* --- 2. 深底上的强调色 ---
   原站 hero 标题的「润天下 · 兴万业」是金色（#D4AF37），压深色照片上很跳。
   直接换成 var(--accent)（#1E4C8A）后，深蓝压深照片几乎看不见 —— 实测对比度不足 2:1。
   深底场景要用强调色的亮档：--accent-line (#B9CCE4) 在 rgba(12,10,8,.5) 遮罩上约 7:1。
   （这也是「用色纪律」里那条「不要用强调色给标题上色」的反面教材：
     一旦底不是 --surface，就必须换档，而不是照搬。同样适用于 hero 的强调描边。） */
.hero-title .hero-title-accent{
  color:var(--accent-line);
  text-shadow:0 0 20px color-mix(in srgb, var(--accent-line) 30%, transparent);
}
.hero-banner .hero-badge{ border-color: color-mix(in srgb, var(--accent-line) 55%, transparent); }
.hero-banner .hero-dots span{ background: color-mix(in srgb, #fff 45%, transparent); }
.hero-banner .hero-dots span:nth-child(2){ background: color-mix(in srgb, #fff 26%, transparent); }
.hero-banner .hero-dots span:nth-child(3){ background: color-mix(in srgb, #fff 14%, transparent); }

/* --- 3. 徽章/奖牌：原为「深蓝->浅蓝」渐变，浅端配深字对比不足，改双档深色 --- */
.medal-1{ background:linear-gradient(135deg,var(--accent),var(--accent-hi)); color:var(--on-accent); }
.medal-2{ background:linear-gradient(135deg,var(--accent-lo),var(--accent)); color:var(--on-accent); }
.medal-3{ background:linear-gradient(135deg,var(--line-strong),var(--accent-lo)); color:var(--on-accent); }
.medal-n{ background:var(--surface-inset); color:var(--muted); }


/* --- 5. 主按钮：原为渐变 + 白字，改实心强调色（渐变压字重，且不符合本站的克制基调）--- */
.fab{ background:var(--accent); }
.fab svg{ stroke:var(--on-accent); }
.sheet-btn-confirm{ background:var(--accent); color:var(--on-accent); }
.sheet-btn-confirm:hover{ background:var(--accent-hi); }
.sheet-btn-cancel{ background:var(--surface-inset); color:var(--ink-2); }
.sheet-btn-cancel:hover{ background:var(--surface-2); }

/* --- 6. 团队合影播放键：原为电光青底 + 深蓝图标，改为强调色底 --- */
.tb-modal-play-btn{ background:var(--accent-line); color:var(--ink); }
.tb-modal-play-btn svg{ fill:var(--ink); }
#tbModalProgress .bar .fill{ background:var(--accent-line); }

/* --- 7. 圆角收敛：原站 2/3/4/6/8/10/12/14/16/20/50% 共 11 档，收到设计系统的 6 档 --- */
.product-card-wrap,
.album-item,
.team-card,
.capsule-item,
.profile-card,
.dash-stat{ border-radius:var(--r-md); }
.qual-card,
.partner-card,
.scene-tag,
.tb-photo{ border-radius:var(--r-md); }
.tb-modal-content{ border-radius:var(--r-lg); }

/* --- 8. 中文标题字距与前缀装饰条 --- */
.section-hd-title{
  font-family:var(--font-display);
  letter-spacing:var(--ls-heading);
  line-height:var(--lh-heading);
}
.section-hd-title::before{ background:var(--accent); }
.timeline-year,
.product-card-name,
.album-item-title,
.detail-name,
.album-modal-title,
.profile-stat-num,
.dash-stat-value,
.capsule-countdown,
.challenge-title,
.sheet h3{ letter-spacing:var(--ls-heading); }

/* --- 9. 正文行长：中文正文控制在 34 字以内 --- */
.album-modal-story{ max-width:34ch; }
.team-quote{ max-width:34ch; }
.detail-section p{ max-width:34ch; }

/* --- 10. 门户区块：作品集入口（本站最显眼的一块增量）--- */
.portal{ padding:var(--s-6) var(--gutter) var(--s-7); }
.portal__eyebrow{
  font-size:var(--t-micro);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-caps);
  color:var(--accent);
  margin-bottom:var(--s-3);
}
.portal__title{
  font-family:var(--font-display);
  font-size:var(--t-h1);
  font-weight:var(--fw-semi);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-display);
  color:var(--ink);
}
.portal__desc{
  margin-top:var(--s-4);
  max-width:34ch;
  font-size:var(--t-body);
  line-height:var(--lh-body);
  color:var(--ink-2);
}
.portal__meta{
  margin-top:var(--s-4);
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2) var(--s-4);
  font-size:var(--t-xs);
  color:var(--muted);
}
.portal__meta b{
  font-family:var(--font-display);
  font-size:var(--t-sm);
  font-weight:var(--fw-semi);
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.portal__grid{ margin-top:var(--s-6); }

/* --- 11. 页脚作品集导航：本站是门户，导航紧接内容，去掉重复的分隔感 --- */
.portfolio-nav{ margin-top:var(--s-7); }

/* --- 12. 弹层与遮罩：设计系统给的是 .sheet + .scrim，本站既有 .sheet/.detail-sheet
       类名被业务 JS 依赖（classList.add('active')），故保留类名、只对齐视觉 --- */
.sheet,
.detail-sheet{
  background:var(--surface);
  border-top:1px solid var(--line);
  box-shadow:var(--shadow-xl);
}
.sheet-overlay,
.album-overlay{ background:color-mix(in srgb, var(--ink) 46%, transparent); }
.sheet-handle{ background:var(--line-strong); }
.detail-close,
.album-modal-close{ background:var(--surface-inset); }
.detail-close svg{ stroke:var(--ink-2); }
.album-modal-close{ background:color-mix(in srgb, var(--ink) 45%, transparent); }

/* --- 13. 团建全屏回顾：这是刻意的沉浸式深底场景，保留深底，但底色改用品牌深档 --- */
.tb-modal-overlay{ background:color-mix(in srgb, var(--accent-lo) 92%, #000); }
.tb-modal-story{ background:color-mix(in srgb, #fff 6%, transparent); }
.tb-modal-content{ background:color-mix(in srgb, #fff 4%, transparent); }

/* --- 14. 图片兜底：本站 21 张图已内联为 base64，但布局仍必须能在无图下成立 --- */
.hero-banner-img{ background:var(--accent-lo); }
.hero-banner-img img.is-broken{ opacity:0; }

/* 员工头像壳：让 .img-fallback 落在这层，而不是整张 .team-card 上。
   尺寸与 .team-avatar 一致，纯定位容器，不改变原有排版。 */
.team-avatar-box{
  display:block;
  width:56px;
  height:56px;
  flex:0 0 auto;
  border-radius:var(--r-full);
  overflow:hidden;
}
.team-avatar-box.img-fallback{ min-height:0; border-radius:var(--r-full); }
.team-avatar-box.img-fallback::after{ content:none; }

/* 顶栏标识：img 失效时 app-shell.js 会给父元素加 .img-fallback，
   而 .img-fallback 的默认 min-height 是 80px —— 会把整条顶栏撑高。
   品牌名「RUNKAI」本来就以文字紧跟其后，占位文案在这里是冗余的，
   所以把兜底盒收回图标本身的尺寸，并隐掉 ::after 文案。 */
.app-logo.img-fallback{
  min-height:0;
  width:26px;
  height:26px;
  flex:0 0 auto;
  border-radius:var(--r-xs);
}
.app-logo.img-fallback::after{ content:none; }
.product-card-top,
.album-item-img,
.album-modal-img{ background:var(--surface-inset); }
.tb-modal-img-wrap{ background:color-mix(in srgb, #fff 4%, transparent); }

/* --- 15. 无障碍：原站去掉了 textarea 焦点轮廓，这里补回可见焦点 --- */
.tab-item:focus-visible,
.album-item:focus-visible,
.product-card-wrap:focus-visible,
.capsule-item:focus-visible,
.ambassador-item:focus-visible,
.tb-photo:focus-visible{ outline:2px solid var(--line-focus); outline-offset:2px; }

/* --- 16. 动效纪律：hero 上的常驻动画在降低动效偏好下停止 --- */
@media (prefers-reduced-motion: reduce){
  .hero-banner::after,
  .hero-banner .hero-shimmer,
  .hero-badge-dot,
  .splash-glow,
  .splash-scanline,
  .splash-ring,
  .splash-corner,
  .splash-logo,
  .splash-sub,
  .splash-tagline,
  .splash-bar-track{ animation:none !important; opacity:1 !important; }
  #splash{ transition:none; }
}


/* ==========================================================================
   重构层 —— 按 xiao9qianduan 规范收口（精确命中版）
   --------------------------------------------------------------------------
   为什么写在各站自己的 CSS 里、不动共享层：
     共享层 7 站同步，改它会连带改到音纪（不在本次范围内）。
     各站 CSS 在 components.css 之后加载，覆盖一定生效。

   ⚠ 上一版我用了 `[class*='-card']` `[class*='__item']` `[class*='stat']`
     这类通配选择器，闯了三个祸，记录在此以免重蹈：
       1. `.glass` 命中了珠语首屏的 `<div class="glass hero-tag">`，
          把半透明标签刷成实色白块 —— 首屏大图上糊了一块白。
       2. `[class*='__item']` 命中润凯的 `.tab-item` / `.slider-item`，
          给它们强制加过渡，搅乱了它自己的跑马灯时序。
       3. `p, .desc, [class*='-desc'] { font-size: max(16px,1em) }` 一次性放大了
          大量本该更小的文字，各处换行崩坏。
     结论：**这个项目的类名体系没有统一命名法，通配选择器必然误伤。**
     改样式只能逐个类名精确写，改一条验一条。

   本文件只做三件低风险、可验证的事，都用精确类名。
   ========================================================================== */

:root {
  /* expo-out：前快后慢的减速。规范里所有 reveal / hover 都用它。 */
  --rf-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 1. 缓动统一到 expo-out --------------------------------------
   只挑语义明确的"交互反馈"类名，不碰动画容器和列表项。 */
.btn,
.cta,
.chip,
.tab-btn,
.el-tab,
.sz-btn,
.ws-item,
.ws-rope,
.rope-swatch,
.ci,
.bc,
.stone-cat-ci,
.stone-cat-item {
  transition-timing-function: var(--rf-ease) !important;
}

/* ---------- 2. 数字等宽 -------------------------------------------------
   金额/颗数/百分比一变就左右跳，显业余。只命中数值语义的类。 */
.bp,
.bp *,
.bsz,
#sub,
#cnt,
.hero-stat-num,
.hero-stat-label,
.ring__num,
.progress__val,
.price,
.price *,
.amount,
.pay-num,
.order-num,
.stat-num,
.score,
.score-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ---------- 3. 键盘焦点可见 ---------------------------------------------
   规范：focus 环必须即时出现，不做出现动画。 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- 4. 【已移除】毛玻璃收口 ----------
   这里原先有一组规则，把 .glass-card / .feature-card / .poster-card 等 10 个类名
   强制刷成实色 + 细边框，依据是规范里"只有导航栏可以用毛玻璃"。

   删掉的原因 —— 实机量完之后，它在**这一站里一个正确目标都没有**：
     · 全站真正带 backdrop-filter 的元素共 13~19 个，逐个看过，全是
       顶栏 / 底栏 / 模态遮罩 / 悬浮在照片上的标签 —— 正是规范允许的那类"表层"。
     · 唯一被它刷实的 5 个 .glass-card 全是压在图上的叠层
       （.gallery-item-bottom、.cs-image-overlay），背后是照片，模糊是必要的。
     · 9033 的 .feature-card--dark（九宫格唯一的深色落点）被刷成白底白字。
     · !important 不看特异性，会连变体自己的 background/border/box-shadow
       一起压掉 —— 用一个没上过实机的猜想覆盖了 8 个类名的真实样式。

   教训：**"某个属性在 CSS 里出现 N 次"不等于"N 处滥用"**。
   前者是数声明，后者得数**真的渲染出来的元素**，还得看它背后是什么。
   -------------------------------------------------------------------------- */

/* ---------- 5. 【已移除】触控目标下限 ----------
   这里原先强制 .btn / .chip / .sz-btn 等类 min-height:44px，依据是规范里
   "可点击区域 ≥ 44px"。

   删掉的原因 —— 实测它同时抬高和压低，而且压过的是作者**显式写死**的值：
     · 珠语 .sz-btn 34 -> 44：尺码条是 44 宽 x 34 高的竖排，撑高后整条
       从 186px 变 236px，把珠子网格往下推。
     · 珠语 .chip 32 -> 44：色系药丸行 40 -> 69px。
     · 礼续 .chip--sm 26 -> 44：那是**非交互**的 <span> 标签，撑高纯属破坏。
     · 归家 .btn--lg 52 -> 44、礼续 .gen-btn 54 -> 44：主 CTA 被**压扁**。
   而在多数站点它根本是空操作 —— 共享层
       .btn { min-height: var(--tap-min) }      // tokens.css: --tap-min: 44px
   和各站的 .el-tab { min-height: var(--tap-min) } 早已满足 44px。

   根因：带 !important 的 min-height 会**双向**覆盖，不管作者写的值
   是比 44 大还是比 44 小。而这里每个小于 44 的元素都是有意为之
   （尺码条 44x34、药丸 32 高），不是没设计过。
   真要兜底，该用 `min-height: max(44px, <作者值>)` 这类"只抬高不压低"的写法 ——
   但 CSS 取不到"元素自己的原值"，所以宁可交给作者。
   -------------------------------------------------------------------------- */