/* ============================================================
   components.css —— 组件库（对应规范文档第 08 章）
   命名：BEM + is- 状态前缀（规范 10.2）
   ============================================================ */

/* ---------- 8.1 按钮 Button ---------- */
.ui-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  height:var(--btn-m-h);padding:0 var(--sp-5);
  font-size:var(--fs-body);font-weight:var(--fw-semibold);line-height:1;
  border:1px solid transparent;border-radius:var(--r-md);cursor:pointer;
  background:var(--n-100);color:var(--n-700);
  transition:background var(--motion-fast) var(--ease-standard),
             border-color var(--motion-fast) var(--ease-standard),
             transform var(--motion-instant) ease-out,
             color var(--motion-fast) var(--ease-standard);
  -webkit-tap-highlight-color:transparent;
}
.ui-btn--l{height:var(--btn-l-h);padding:0 var(--sp-6);font-size:var(--fs-h3);}
.ui-btn--s{height:var(--btn-s-h);padding:0 var(--sp-3);font-size:var(--fs-caption);border-radius:var(--r-sm);}
.ui-btn--block{display:flex;width:100%;}
.ui-btn--primary{background:var(--brand-700);color:var(--n-inverse);}
.ui-btn--secondary{background:var(--n-inverse);color:var(--brand-800);border-color:var(--brand-700);}
.ui-btn--ghost{background:transparent;color:var(--n-600);border-color:var(--n-200);}
.ui-btn--danger{background:var(--n-inverse);color:var(--err);border-color:var(--err);}
.ui-btn:active:not(:disabled){transform:scale(.98);}       /* 触感反馈 120ms */
.ui-btn:disabled,.ui-btn[aria-disabled="true"]{
  cursor:not-allowed;background:var(--n-100);color:var(--n-400);border-color:var(--n-200);
}
.ui-btn[aria-disabled="true"]{pointer-events:none;}
.ui-btn__icon{width:var(--icon-20);height:var(--icon-20);stroke:currentColor;fill:none;stroke-width:1.5;}

@media (hover:hover) and (pointer:fine){
  .ui-btn--primary:hover{background:var(--brand-800);}
  .ui-btn--secondary:hover{background:var(--brand-50);}
  .ui-btn--ghost:hover{background:var(--n-100);}
  .ui-btn--danger:hover{background:var(--err-soft);}
}
/* 按钮内 loading 态：文案替换为「发布中…」+ spinner */
.ui-btn__spinner{
  width:16px;height:16px;border-radius:var(--r-full);
  border:2px solid currentColor;border-right-color:transparent;opacity:.9;
  animation:ui-spin .7s linear infinite;
}
@keyframes ui-spin{to{transform:rotate(360deg);}}

/* ---------- 8.2 输入框 Input / 文本域 Textarea ---------- */
.ui-field{display:flex;flex-direction:column;gap:var(--sp-2);}   /* 标签在上，错误在下 */
.ui-field__label{
  font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--n-800);
  display:flex;align-items:center;gap:var(--sp-1);
}
.ui-field__req{color:var(--err);font-weight:var(--fw-regular);}
.ui-field__opt{font-size:var(--fs-micro);color:var(--n-500);font-weight:var(--fw-regular);}
.ui-inp,.ui-area,.ui-select{
  width:100%;height:var(--inp-h);padding:0 var(--sp-4);
  border:1px solid var(--n-200);border-radius:var(--r-md);background:var(--n-inverse);
  font-size:var(--fs-body-lg);color:var(--n-700);
  transition:border-color var(--motion-fast) var(--ease-standard),
             box-shadow var(--motion-fast) var(--ease-standard);
}
.ui-inp::placeholder,.ui-area::placeholder{color:var(--n-400);}   /* n-400 仅限 placeholder */
.ui-area{height:auto;min-height:120px;padding:var(--sp-4);line-height:var(--lh-body-lg);resize:vertical;}
.ui-inp:focus,.ui-area:focus,.ui-select:focus{
  outline:none;border-color:var(--brand-700);box-shadow:var(--focus-ring);
}
.ui-inp[aria-invalid="true"],.ui-area[aria-invalid="true"]{
  border-color:var(--err);box-shadow:var(--err-ring);
}
.ui-inp:disabled,.ui-area:disabled{background:var(--n-100);border-color:var(--n-200);color:var(--n-400);}
.ui-field__help{font-size:var(--fs-caption);color:var(--n-500);}
.ui-field__err{
  display:none;align-items:center;gap:var(--sp-1);
  font-size:var(--fs-caption);color:var(--err);
}
.ui-field.is-error .ui-field__err{display:flex;}
.ui-counter{
  font-size:var(--fs-caption);color:var(--n-400);text-align:right;
  font-variant-numeric:tabular-nums;
}
.ui-counter.is-near{color:var(--warn);}      /* 剩余 < 20% */
.ui-counter.is-over{color:var(--err);font-weight:var(--fw-semibold);}
.ui-field__row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);}
.ui-select{appearance:none;background-image:none;color:var(--n-400);cursor:pointer;}
.ui-select.has-value{color:var(--n-700);}

/* ---------- 8.3 标签 Chip（可点击）/ Tag（只读） ---------- */
.ui-chip{
  display:inline-flex;align-items:center;gap:var(--sp-1);flex:0 0 auto;
  height:var(--chip-h);padding:0 var(--sp-3);border-radius:var(--r-full);
  border:1px solid var(--n-200);background:var(--n-inverse);color:var(--n-600);
  font-size:var(--fs-caption);cursor:pointer;white-space:nowrap;
  transition:all var(--motion-fast) var(--ease-standard);
}
.ui-chip--on{background:var(--brand-50);border-color:var(--brand-700);color:var(--brand-800);font-weight:var(--fw-semibold);}
.ui-chip:disabled,.ui-chip[aria-disabled="true"]{opacity:.45;cursor:not-allowed;}
.ui-chip__count{font-variant-numeric:tabular-nums;color:var(--n-400);font-weight:var(--fw-regular);}
.ui-chip--on .ui-chip__count{color:var(--brand-600);}
.ui-chip--cond{height:var(--chip-ro-h);padding:0 var(--sp-2) 0 var(--sp-2);gap:var(--sp-1);}
.ui-chip--cond .ui-chip__x{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;}
@media (hover:hover) and (pointer:fine){.ui-chip:hover:not(.ui-chip--on){border-color:var(--n-300);}}

.ui-tag{
  display:inline-flex;align-items:center;height:var(--chip-ro-h);padding:0 var(--sp-2);
  border-radius:var(--r-xs);background:var(--n-100);color:var(--n-600);
  font-size:var(--fs-micro);white-space:nowrap;
}
.ui-tag--more{background:var(--brand-50);color:var(--brand-800);}
.ui-tag--removable{padding-right:var(--sp-1);gap:var(--sp-1);}
.ui-tag__x{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;cursor:pointer;}
.ui-tag-row{display:flex;flex-wrap:wrap;gap:var(--sp-2);}

/* ---------- 8.3 状态徽章 Badge（颜色 + 文字双通道，不做纯色区分） ---------- */
.ui-badge{
  display:inline-flex;align-items:center;gap:var(--sp-1);
  height:22px;padding:0 var(--sp-2);border-radius:var(--r-xs);
  font-size:var(--fs-micro);font-weight:var(--fw-semibold);white-space:nowrap;
  border:1px solid transparent;
}
.ui-badge--open{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line);}          /* 招募中 */
.ui-badge--matched{background:var(--info-soft);color:var(--info);border-color:var(--info-line);} /* 审核中 */
.ui-badge--linked{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line);}  /* 已对接 */
.ui-badge--closed{background:var(--n-100);color:var(--n-600);border-color:var(--n-200);}         /* 已关闭 */
.ui-badge--expired{background:var(--err-soft);color:var(--err);border-color:var(--err-line);}    /* 已过期 */
.ui-badge--draft{background:var(--n-inverse);color:var(--n-600);border-color:var(--n-300);border-style:dashed;}/* 草稿 */

/* ---------- 分类角标（色 + 文字，色盲可用） ---------- */
.ui-cat{
  display:inline-flex;align-items:center;height:20px;padding:0 var(--sp-2);
  border-radius:var(--r-xs);font-size:var(--fs-micro);font-weight:var(--fw-semibold);
  background:var(--cat-8-soft);color:var(--cat-8);
}
.ui-cat--1{background:var(--cat-1-soft);color:var(--cat-1);}
.ui-cat--2{background:var(--cat-2-soft);color:var(--cat-2);}
.ui-cat--3{background:var(--cat-3-soft);color:var(--cat-3);}
.ui-cat--4{background:var(--cat-4-soft);color:var(--cat-4);}
.ui-cat--5{background:var(--cat-5-soft);color:var(--cat-5);}
.ui-cat--6{background:var(--cat-6-soft);color:var(--cat-6);}
.ui-cat--7{background:var(--cat-7-soft);color:var(--cat-7);}
.ui-cat--8{background:var(--cat-8-soft);color:var(--cat-8);}

/* ---------- 8.4 需求卡片 DemandCard（业务核心组件，4 种 variant 复用） ---------- */
.demand-card{
  position:relative;display:flex;flex-direction:column;gap:var(--sp-3);
  background:var(--n-0);border:1px solid var(--n-200);border-radius:var(--r-md);
  padding:var(--sp-4);box-shadow:var(--sh-sm);
  transition:box-shadow var(--motion-fast) var(--ease-standard),
             border-color var(--motion-fast) var(--ease-standard),
             transform var(--motion-fast) var(--ease-standard);
  cursor:pointer;contain:layout style paint;
}
.demand-card__top{display:flex;align-items:center;gap:var(--sp-2);}
.demand-card__top-right{margin-left:auto;display:flex;align-items:center;}
.demand-card__title{
  font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-semibold);
  color:var(--n-900);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.demand-card__desc{
  font-size:var(--fs-caption);line-height:var(--lh-body);color:var(--n-500);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.demand-card__foot{
  display:flex;align-items:center;gap:var(--sp-2);
  padding-top:var(--sp-3);border-top:1px solid var(--n-100);
}
.demand-card__avatar{
  width:24px;height:24px;flex:0 0 auto;border-radius:var(--r-full);
  background:var(--brand-50);color:var(--brand-800);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-micro);font-weight:var(--fw-semibold);
}
.demand-card__name{font-size:var(--fs-caption);color:var(--n-600);}
.demand-card__credit{
  display:inline-flex;align-items:center;height:18px;padding:0 5px;border-radius:var(--r-xs);
  background:var(--brand-50);border:1px solid var(--brand-100);color:var(--brand-800);
  font-size:var(--fs-micro);font-variant-numeric:tabular-nums;
}
.demand-card__meta{
  margin-left:auto;display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-caption);color:var(--n-400);font-variant-numeric:tabular-nums;
}
.demand-card__fav-count{display:inline-flex;align-items:center;gap:3px;}
.demand-card__fav-count svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;}

@media (hover:hover) and (pointer:fine){
  .demand-card:hover{border-color:var(--n-300);box-shadow:var(--sh-md);transform:translateY(-2px);}
}
.demand-card:active{transform:scale(.98);}

/* 变体：已过期 / 已关闭 → 降透明度 72%，收藏与建联关闭 */
.demand-card--dim{opacity:.72;}
.demand-card--dim .demand-card__title{color:var(--n-700);}

/* 变体：收藏列表（隐藏标签行与收藏按钮，新增操作按钮组与备注块） */
.demand-card--fav .demand-card__ops{display:flex;gap:var(--sp-2);}
.demand-card--fav .demand-card__ops .ui-btn{flex:1;height:36px;}

/* 变体：我的发布（数据条替换时间；草稿左侧 3px 竖线） */
.demand-card--mine .demand-card__stat{
  display:flex;gap:var(--sp-4);font-size:var(--fs-caption);color:var(--n-500);
  font-variant-numeric:tabular-nums;
}
.demand-card--mine .demand-card__ops{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);}
.demand-card--mine .demand-card__ops .ui-btn{height:34px;}
.demand-card--draft{border-left:3px solid var(--n-300);}
.demand-card--draft .demand-card__title{color:var(--n-700);}
.demand-card--draft .demand-card__ops{grid-template-columns:1.4fr 1fr;}

/* 变体：管理（多选）模式 */
.demand-card__check{
  position:absolute;left:var(--sp-3);top:var(--sp-3);
  width:22px;height:22px;border-radius:var(--r-full);border:1.5px solid var(--n-300);
  background:var(--n-inverse);display:none;align-items:center;justify-content:center;
}
.demand-card__check svg{width:14px;height:14px;stroke:var(--n-inverse);fill:none;stroke-width:2.5;opacity:0;}
.demand-card.is-checked .demand-card__check{background:var(--brand-700);border-color:var(--brand-700);}
.demand-card.is-checked .demand-card__check svg{opacity:1;}
.demand-card.is-checked{border-color:var(--brand-700);}
.is-managing .demand-card__check{display:flex;}
.is-managing .demand-card{padding-left:var(--sp-8);}

/* 备注块（收藏列表独有） */
.demand-card__note{
  display:flex;align-items:center;gap:var(--sp-2);
  background:var(--warn-soft);border:1px dashed var(--warn-line);border-radius:var(--r-sm);
  padding:var(--sp-2) var(--sp-3);font-size:var(--fs-caption);color:var(--n-700);
}
.demand-card__note svg{width:14px;height:14px;flex:0 0 auto;stroke:var(--warn);fill:none;stroke-width:1.5;}
.demand-card__note-add{
  display:inline-flex;align-items:center;gap:var(--sp-1);
  font-size:var(--fs-caption);color:var(--n-500);cursor:pointer;
}

/* ---------- 收藏按钮 FavoriteButton（热区 44×44，视觉 22） ---------- */
.fav-btn{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  margin:-11px -11px -11px 0;               /* 视觉对齐但不缩小热区 */
  border:none;background:transparent;cursor:pointer;border-radius:var(--r-full);
}
.fav-btn svg{width:22px;height:22px;stroke:var(--n-400);fill:none;stroke-width:1.5;
  transition:stroke var(--motion-fast) var(--ease-standard);}
.fav-btn[aria-pressed="true"] svg{stroke:var(--accent);fill:var(--accent);animation:fav-pop var(--motion-base) var(--ease-elastic);}
.fav-btn:disabled{cursor:not-allowed;}
.fav-btn:disabled svg{stroke:var(--n-300);}
@keyframes fav-pop{0%{transform:scale(1);}55%{transform:scale(1.25);}100%{transform:scale(1);}}

/* ---------- 8.5 推荐理由条 RecommendReason ---------- */
.reason-bar{
  display:flex;gap:var(--sp-2);align-items:flex-start;
  background:var(--info-soft);border:1px solid var(--info-line);border-bottom:none;
  border-radius:var(--r-md) var(--r-md) 0 0;padding:var(--sp-3);
  font-size:var(--fs-caption);line-height:var(--lh-body);color:var(--n-700);
}
.reason-bar svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;stroke:var(--info);fill:none;stroke-width:1.5;}
.reason-bar strong{font-weight:var(--fw-semibold);color:var(--n-900);}
.reason-bar__text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.match-item{display:flex;flex-direction:column;}
.match-item .demand-card{border-radius:0 0 var(--r-md) var(--r-md);border-top:none;cursor:pointer;}
.match-item__ops{display:flex;gap:var(--sp-3);padding:0 var(--sp-4) var(--sp-4);background:var(--n-inverse);
  border:1px solid var(--n-200);border-top:none;border-radius:0 0 var(--r-md) var(--r-md);
  margin-top:0;box-shadow:var(--sh-sm);}
.match-item__ops .ui-btn{flex:1;}
.match-item__ops .ui-btn--primary{flex:1.4;}
.match-item.is-removing{animation:slide-out var(--motion-base) var(--ease-exit) forwards;}
@keyframes slide-out{to{opacity:0;transform:translateX(-24px);}}

/* ---------- 额度条 / 提示条 ---------- */
.ui-notice{
  display:flex;gap:var(--sp-2);align-items:center;
  background:var(--brand-50);border:1px solid var(--brand-100);border-radius:var(--r-md);
  padding:var(--sp-3);font-size:var(--fs-caption);color:var(--brand-900);
}
.ui-notice svg{width:16px;height:16px;flex:0 0 auto;stroke:var(--brand-700);fill:none;stroke-width:1.5;}
.ui-notice--info{background:var(--info-soft);border-color:var(--info-line);color:var(--n-700);}
.ui-notice--info svg{stroke:var(--info);}
.ui-notice--warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--n-700);}
.ui-notice--warn svg{stroke:var(--warn);}
.ui-notice--err{background:var(--err-soft);border-color:var(--err-line);color:var(--n-700);}
.ui-notice--err svg{stroke:var(--err);}

/* ---------- 9.1 骨架屏 Skeleton ---------- */
.ui-skel{
  background:linear-gradient(90deg,var(--n-100) 25%,var(--n-200) 37%,var(--n-100) 63%);
  background-size:400% 100%;animation:ui-shimmer 1.4s ease infinite;border-radius:var(--r-xs);
}
@keyframes ui-shimmer{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
.skel-card{
  background:var(--n-inverse);border:1px solid var(--n-200);border-radius:var(--r-md);
  padding:var(--sp-4);box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:var(--sp-3);
}
.skel-card__line{height:14px;}
.skel-card__title{height:20px;width:72%;}

/* ---------- 9.2 空态 / 9.3 错误态 ---------- */
.ui-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);
  padding:var(--sp-10) var(--sp-6);text-align:center;
}
.ui-state__icon{width:72px;height:72px;stroke:var(--n-300);fill:none;stroke-width:1.2;}
.ui-state__title{font-size:var(--fs-h3);font-weight:var(--fw-semibold);color:var(--n-800);}
.ui-state__desc{font-size:var(--fs-caption);color:var(--n-500);max-width:32ch;}
.ui-state--error .ui-state__icon{stroke:var(--n-300);}
.ui-state--sm{padding:var(--sp-6) var(--sp-4);}
.ui-state--sm .ui-state__icon{width:40px;height:40px;}

/* 顶部网络横幅 */
.net-banner{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  background:var(--warn-soft);border-bottom:1px solid var(--warn-line);color:var(--n-700);
  font-size:var(--fs-caption);padding:var(--sp-2) var(--sp-4);
}
.net-banner svg{width:16px;height:16px;stroke:var(--warn);fill:none;stroke-width:1.5;}

/* ---------- 9.4 全局 Toast ---------- */
#toast-root{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--tabbar-h) + 80px + env(safe-area-inset-bottom));
  z-index:var(--z-toast);display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
  pointer-events:none;width:max-content;max-width:calc(100vw - 32px);
}
@media (min-width:1024px){#toast-root{bottom:80px;}}
.ui-toast{
  display:flex;align-items:center;gap:var(--sp-3);
  background:var(--toast-bg);color:var(--n-inverse);border-radius:var(--r-sm);
  padding:10px var(--sp-4);font-size:var(--fs-caption);
  box-shadow:var(--sh-md);animation:toast-in var(--motion-base) var(--ease-enter);
  pointer-events:auto;backdrop-filter:blur(6px);
}
.ui-toast.is-out{animation:toast-out var(--motion-fast) var(--ease-exit) forwards;}
.ui-toast__undo{
  color:var(--brand-300);font-weight:var(--fw-semibold);cursor:pointer;
  background:none;border:none;padding:0 var(--sp-1);
}
@keyframes toast-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes toast-out{to{opacity:0;transform:translateY(6px);}}

/* ---------- 9.4 Dialog（居中确认弹窗） ---------- */
.ui-mask{
  position:fixed;inset:0;background:var(--mask-scrim);z-index:var(--z-mask);
  display:flex;align-items:center;justify-content:center;padding:var(--sp-4);
  animation:mask-in var(--motion-fast) var(--ease-standard);
}
@keyframes mask-in{from{opacity:0;}to{opacity:1;}}
.ui-mask--bottom{align-items:flex-end;padding:0;}
.ui-dialog{
  width:100%;max-width:320px;background:var(--n-inverse);border-radius:var(--r-xl);
  padding:var(--sp-6) var(--sp-5) var(--sp-5);
  box-shadow:var(--sh-lg);animation:dialog-in var(--motion-slow) var(--ease-enter);
  text-align:center;
}
@keyframes dialog-in{from{opacity:0;transform:scale(.94);}to{opacity:1;transform:none;}}
.ui-dialog__title{font-size:var(--fs-h3);font-weight:var(--fw-semibold);color:var(--n-900);}
.ui-dialog__desc{margin-top:var(--sp-2);font-size:var(--fs-caption);color:var(--n-500);line-height:var(--lh-body);}
.ui-dialog__ops{display:flex;gap:var(--sp-3);margin-top:var(--sp-5);}
.ui-dialog__ops .ui-btn{flex:1;}

/* ---------- 底部抽屉 BottomSheet（筛选 / ActionSheet / 登录拦截 / 备注编辑） ---------- */
.ui-sheet{
  width:100%;max-width:560px;margin:0 auto;background:var(--n-inverse);
  border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--sh-lg);
  animation:sheet-in var(--motion-base) var(--ease-enter);
  padding-bottom:env(safe-area-inset-bottom);
  max-height:88dvh;display:flex;flex-direction:column;
}
@keyframes sheet-in{from{transform:translateY(100%);}to{transform:none;}}
.ui-sheet__head{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-4) var(--sp-3);border-bottom:1px solid var(--n-100);
}
.ui-sheet__title{font-size:var(--fs-h3);font-weight:var(--fw-semibold);color:var(--n-900);}
.ui-sheet__close{
  margin-left:auto;width:44px;height:44px;margin-right:-12px;
  display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;
}
.ui-sheet__close svg{width:20px;height:20px;stroke:var(--n-500);fill:none;stroke-width:1.5;}
.ui-sheet__body{padding:var(--sp-4);overflow:auto;display:flex;flex-direction:column;gap:var(--sp-5);}
.ui-sheet__foot{
  padding:var(--sp-3) var(--sp-4) var(--sp-4);border-top:1px solid var(--n-100);
  display:flex;gap:var(--sp-3);
}
.ui-sheet__foot .ui-btn{flex:1;}
.ui-sheet__foot .ui-btn--primary{flex:1.6;}
.ui-sheet__grabber{
  width:36px;height:4px;border-radius:var(--r-full);background:var(--n-300);
  margin:var(--sp-2) auto 0;
}
.ui-sheet__group-title{
  font-size:var(--fs-caption);font-weight:var(--fw-semibold);color:var(--n-800);
  display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3);
}
.ui-sheet__group-title span{color:var(--n-400);font-weight:var(--fw-regular);}
/* ActionSheet 列表项 */
.ui-actionsheet{width:100%;max-width:560px;margin:0 auto;background:var(--n-inverse);
  border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;
  animation:sheet-in var(--motion-base) var(--ease-enter);padding-bottom:env(safe-area-inset-bottom);}
.ui-actionsheet__item{
  display:flex;align-items:center;gap:var(--sp-3);width:100%;
  height:52px;padding:0 var(--sp-5);background:var(--n-inverse);border:none;
  border-bottom:1px solid var(--n-100);font-size:var(--fs-body-lg);color:var(--n-700);
  cursor:pointer;text-align:left;
}
.ui-actionsheet__item:last-of-type{border-bottom:none;}
.ui-actionsheet__item svg{width:18px;height:18px;stroke:var(--brand-700);fill:none;stroke-width:2;opacity:0;}
.ui-actionsheet__item.is-on{color:var(--brand-800);font-weight:var(--fw-semibold);}
.ui-actionsheet__item.is-on svg{opacity:1;}
.ui-actionsheet__cancel{
  height:52px;display:flex;align-items:center;justify-content:center;width:100%;
  border:none;border-top:8px solid var(--n-50);background:var(--n-inverse);
  font-size:var(--fs-body-lg);color:var(--n-600);cursor:pointer;
}

/* ---------- 顶部导航栏（移动 44px / 桌面 64px） ---------- */
.app-header{
  position:sticky;top:0;z-index:var(--z-header);background:var(--glass-header);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--n-200);
  padding-top:env(safe-area-inset-top);
}
.app-header__inner{
  display:flex;align-items:center;gap:var(--sp-3);
  height:var(--topbar-m-h);padding:0 var(--sp-4);
}
.app-header__title{font-size:var(--fs-h3);font-weight:var(--fw-semibold);color:var(--n-900);}
.app-header__back{
  width:44px;height:44px;margin-left:-12px;display:flex;align-items:center;justify-content:center;
  border:none;background:none;cursor:pointer;border-radius:var(--r-full);
}
.app-header__back svg{width:20px;height:20px;stroke:var(--n-700);fill:none;stroke-width:1.8;}
.app-header__actions{margin-left:auto;display:flex;align-items:center;gap:var(--sp-1);}
.icon-btn{
  position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:none;background:none;cursor:pointer;border-radius:var(--r-full);
}
.icon-btn svg{width:20px;height:20px;stroke:var(--n-600);fill:none;stroke-width:1.5;}
.icon-btn__dot{position:absolute;right:11px;top:11px;width:8px;height:8px;border-radius:var(--r-full);background:var(--err);}
@media (hover:hover) and (pointer:fine){.icon-btn:hover{background:var(--n-100);}}

/* 桌面端导航：文字 Logo + 导航项 + 发布需求主按钮 */
@media (min-width:1024px){
  .app-header__inner{height:var(--topbar-d-h);padding:0 var(--sp-6);max-width:var(--container);margin:0 auto;}
  .app-header__title{display:none;}
  .app-header__brand{
    display:flex;align-items:center;gap:var(--sp-2);
    font-size:var(--fs-h3);font-weight:var(--fw-semibold);color:var(--brand-800);margin-right:var(--sp-6);
  }
  .app-header__nav{display:flex;align-items:center;gap:var(--sp-5);}
}
.app-header__brand,.app-header__nav{display:none;}
@media (min-width:1024px){.app-header__brand,.app-header__nav{display:flex;}}
.nav-link{
  position:relative;height:var(--topbar-d-h);display:inline-flex;align-items:center;
  font-size:var(--fs-body);color:var(--n-600);padding:0 2px;
}
.nav-link.is-on{color:var(--brand-800);font-weight:var(--fw-semibold);}
.nav-link.is-on::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brand-700);border-radius:2px;
}
.nav-link:hover{color:var(--brand-700);}

/* ---------- 底部 TabBar（移动端） ---------- */
.app-tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-tabbar);
  display:flex;background:var(--glass-bar);backdrop-filter:blur(10px);
  border-top:1px solid var(--n-200);padding-bottom:env(safe-area-inset-bottom);
}
.app-tabbar__item{
  flex:1;height:var(--tabbar-h);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;border:none;background:none;cursor:pointer;position:relative;color:var(--n-400);
}
.app-tabbar__item svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;}
.app-tabbar__label{font-size:var(--fs-micro);line-height:var(--lh-micro);}
.app-tabbar__item.is-on{color:var(--brand-700);font-weight:var(--fw-semibold);}
.app-tabbar__badge{
  position:absolute;top:8px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;
  border-radius:var(--r-full);background:var(--err);color:var(--n-inverse);font-size:10px;line-height:16px;
  font-variant-numeric:tabular-nums;text-align:center;
}
.app-tabbar__dot{position:absolute;top:10px;left:calc(50% + 8px);width:8px;height:8px;border-radius:var(--r-full);background:var(--err);}
@media (min-width:1024px){.app-tabbar{display:none;}}

/* ---------- FAB 悬浮发布按钮（仅移动端 / 广场） ---------- */
.app-fab{
  position:fixed;right:var(--sp-4);bottom:calc(var(--tabbar-h) + var(--sp-4) + env(safe-area-inset-bottom));
  width:var(--fab-size);height:var(--fab-size);border-radius:var(--r-full);border:none;
  background:var(--brand-700);color:var(--n-inverse);box-shadow:var(--fab-shadow);
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:var(--z-fab);
  transition:transform var(--motion-instant) ease-out;
}
.app-fab svg{width:26px;height:26px;stroke:var(--n-inverse);fill:none;stroke-width:1.8;}
.app-fab:active{transform:scale(.94);}
@media (min-width:1024px){.app-fab{display:none;}}

/* ---------- 分段 Tab / 状态 Tab ---------- */
.ui-tabs{display:flex;gap:var(--sp-5);border-bottom:1px solid var(--n-200);overflow-x:auto;scrollbar-width:none;}
.ui-tabs::-webkit-scrollbar{display:none;}
.ui-tab{
  position:relative;flex:0 0 auto;height:44px;display:inline-flex;align-items:center;gap:var(--sp-1);
  border:none;background:none;cursor:pointer;font-size:var(--fs-body);color:var(--n-600);
  padding:0 2px;white-space:nowrap;
}
.ui-tab.is-on{color:var(--brand-800);font-weight:var(--fw-semibold);}
.ui-tab.is-on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brand-700);}
.ui-tab__count{font-variant-numeric:tabular-nums;color:var(--n-400);font-weight:var(--fw-regular);}
.ui-tab.is-on .ui-tab__count{color:var(--brand-600);}

/* ---------- 统计条（P5 三宫格） ---------- */
.stat-bar{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);
  background:var(--n-inverse);border:1px solid var(--n-200);border-radius:var(--r-md);
  padding:var(--sp-4) 0;box-shadow:var(--sh-sm);
}
.stat-bar__item{text-align:center;position:relative;}
.stat-bar__item+.stat-bar__item::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:var(--n-100);
}
.stat-bar__num{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:var(--fw-semibold);color:var(--brand-700);font-variant-numeric:tabular-nums;}
.stat-bar__label{font-size:var(--fs-caption);color:var(--n-500);margin-top:2px;}

/* ---------- 底部固定操作栏 ---------- */
.action-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-tabbar);
  background:var(--glass-bar);backdrop-filter:blur(10px);
  border-top:1px solid var(--n-200);box-shadow:var(--bar-shadow);
  padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:var(--sp-3);
}
.action-bar__hint{font-size:var(--fs-caption);color:var(--warn);padding:0 var(--sp-4) var(--sp-3);text-align:center;}
.action-bar .ui-btn--secondary{width:104px;flex:0 0 auto;}
.action-bar .ui-btn--primary{flex:1;}
@media (min-width:1024px){.action-bar{display:none;}}

/* ---------- 筛选栏 FilterBar ---------- */
.filter-bar{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4);background:var(--n-50);
  position:sticky;top:var(--topbar-m-h);z-index:40;
  border-bottom:1px solid var(--n-200);
}
.filter-bar__spacer{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2);}
.filter-bar__sort{
  display:inline-flex;align-items:center;gap:var(--sp-1);flex:0 0 auto;
  height:var(--chip-h);padding:0 var(--sp-2);border-radius:var(--r-full);
  border:1px solid var(--n-200);background:var(--n-inverse);font-size:var(--fs-caption);color:var(--n-600);cursor:pointer;
}
.filter-bar__sort svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;}
.filter-bar__sort.is-on{color:var(--brand-800);border-color:var(--brand-700);background:var(--brand-50);}
.cond-row{
  display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  padding:var(--sp-2) var(--sp-4);background:var(--n-50);border-bottom:1px solid var(--n-200);
}
.cond-row__clear{margin-left:auto;font-size:var(--fs-caption);color:var(--n-500);background:none;border:none;cursor:pointer;padding:0 var(--sp-1);}
@media (min-width:1024px){
  .filter-bar,.cond-row{display:none;}     /* 桌面端由左侧常驻筛选栏替代 */
}

/* ---------- 桌面端左侧筛选栏 ---------- */
.side-filter{display:none;}
@media (min-width:1024px){
  .side-filter{
    display:flex;flex-direction:column;gap:var(--sp-6);
    width:var(--side-w);flex:0 0 var(--side-w);
    background:var(--n-inverse);border:1px solid var(--n-200);border-radius:var(--r-md);
    padding:var(--sp-4);box-shadow:var(--sh-sm);align-self:start;position:sticky;top:calc(var(--topbar-d-h) + var(--sp-6));
  }
}
.side-filter__group{}
.side-filter__title{font-size:var(--fs-caption);font-weight:var(--fw-semibold);color:var(--n-800);margin-bottom:var(--sp-2);}
.side-filter__item{
  display:flex;align-items:center;gap:var(--sp-2);width:100%;
  height:36px;padding:0 var(--sp-3);border:none;border-radius:var(--r-sm);
  background:none;font-size:var(--fs-body);color:var(--n-700);cursor:pointer;text-align:left;
}
.side-filter__item.is-on{background:var(--brand-50);color:var(--brand-800);font-weight:var(--fw-semibold);}
.side-filter__dot{width:8px;height:8px;border-radius:2px;flex:0 0 auto;}
.side-filter__count{margin-left:auto;font-size:var(--fs-caption);color:var(--n-400);font-variant-numeric:tabular-nums;}
.side-filter__tags{display:flex;flex-wrap:wrap;gap:var(--sp-2);}
.side-filter__tags .ui-chip{height:28px;}

/* ---------- 结果统计行 ---------- */
.result-row{
  display:none;align-items:center;justify-content:space-between;
  padding:0 var(--sp-1) var(--sp-4);
}
@media (min-width:1024px){.result-row{display:flex;}}
.result-row__count{font-size:var(--fs-caption);color:var(--n-500);}
.result-row__count b{color:var(--n-800);font-variant-numeric:tabular-nums;}
.result-row select{
  height:36px;border-radius:var(--r-sm);border:1px solid var(--n-200);background:var(--n-inverse);
  padding:0 var(--sp-3);font-size:var(--fs-caption);color:var(--n-600);cursor:pointer;
}

/* ---------- 列表容器（移动端 1 列 / 桌面 2 列） ---------- */
.list-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-3);}
@media (min-width:768px){.list-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);}}
@media (min-width:1440px){.list-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.list-foot{display:flex;align-items:center;justify-content:center;padding:var(--sp-5) 0 var(--sp-8);font-size:var(--fs-caption);color:var(--n-400);}
.list-foot--err{color:var(--n-500);gap:var(--sp-2);}
.list-foot__retry{color:var(--brand-700);background:none;border:none;cursor:pointer;font-size:var(--fs-caption);}

/* 卡片进场上浮淡入，间隔 60ms */
.list-grid > *{animation:card-in var(--motion-fast) var(--ease-enter) both;animation-delay:calc(var(--i,0) * 60ms);}
@keyframes card-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ---------- 状态调试器（演示四态用，非产品界面） ---------- */
#state-debug{
  position:fixed;right:var(--sp-3);bottom:calc(var(--tabbar-h) + 84px + env(safe-area-inset-bottom));
  z-index:var(--z-debug);font-size:var(--fs-micro);
}
@media (min-width:1024px){#state-debug{bottom:var(--sp-4);}}
#state-debug .dbg-toggle{
  display:flex;align-items:center;gap:var(--sp-1);height:30px;padding:0 var(--sp-3);
  border-radius:var(--r-full);background:var(--n-900);color:var(--n-inverse);border:none;cursor:pointer;
  box-shadow:var(--sh-md);font-size:var(--fs-micro);
}
#state-debug .dbg-panel{
  display:none;margin-top:var(--sp-2);background:var(--n-inverse);border:1px solid var(--n-200);
  border-radius:var(--r-md);box-shadow:var(--sh-lg);padding:var(--sp-3);width:216px;
}
#state-debug.is-open .dbg-panel{display:block;}
.dbg-title{font-size:var(--fs-micro);color:var(--n-500);margin-bottom:var(--sp-2);}
.dbg-row{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-bottom:var(--sp-3);}
.dbg-btn{
  height:24px;padding:0 var(--sp-2);border-radius:var(--r-xs);border:1px solid var(--n-200);
  background:var(--n-inverse);color:var(--n-600);font-size:var(--fs-micro);cursor:pointer;
}
.dbg-btn.is-on{background:var(--brand-700);border-color:var(--brand-700);color:var(--n-inverse);font-weight:var(--fw-semibold);}