:root{
  /* Spec 2.2 简约蓝默认 */
  --spec-primary:#1677FF;
  --spec-success:#52C41A;
  --spec-warning:#FF4D4F;
  --spec-text:#1F2329;
  --spec-text2:#6E7191;
  --spec-bg:#F7F8FA;
  --spec-card:#FFFFFF;
  --bg:#f6f6f7;
  --panel:#ffffff;
  --card:#ffffff;
  --text:#1a1a1a;
  --muted:#6b7280;
  --primary:#374151;
  --primary2:#1677FF;
  --border:rgba(26,26,26,.08);
  --shadow:0 18px 40px rgba(0,0,0,.06);
  --radius:16px;
  --radius2:12px;
  --max:1400px;
  --font: ui-sans-serif, system-ui, -apple-system, "PingFang SC","Hiragino Sans GB","Microsoft YaHei", Arial, "Apple Color Emoji","Segoe UI Emoji";
  --ink:#1a1a1a;
  --gray-mid:#6b7280;
  --gray-light:#9ca3af;
  --surface:#f8f9fa;
  --text2:#6E7191;
  /* 前台主题变量 */
  --front-p1:#4b5563;
  --front-p2:#374151;
  --front-shadow:rgba(55,65,81,.25);
  --front-border:rgba(55,65,81,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(900px 480px at 20% -10%, rgba(55,65,81,.04), transparent 70%),
    radial-gradient(700px 420px at 90% 10%, rgba(107,114,128,.03), transparent 68%),
    var(--bg);
  color:var(--text);
}
a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding:22px 18px}
.muted{color:var(--muted)}
.small{font-size:12px}
.topbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(10px);
  background:rgba(246,246,247,.88);
  border-bottom:1px solid var(--border);
  padding-top:env(safe-area-inset-top, 0);
}
.topbar-inner{display:flex; align-items:center; gap:14px; padding:14px 18px; max-width:var(--max); margin:0 auto}
.topbar-menu-btn{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  color:var(--text);
  cursor:pointer;
}
.topbar-menu-btn:hover{background:rgba(55,65,81,.06)}
.topbar-menu-btn:focus{outline:none; box-shadow:0 0 0 2px rgba(55,65,81,.3)}
.search{flex:1; display:flex; align-items:center; gap:10px}
.search-input{
  flex:1;
  height:40px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#ffffff;
  color:var(--text);
  padding:0 12px;
  outline:none;
}
.search-input:focus{border-color:rgba(55,65,81,.4); box-shadow:0 0 0 4px rgba(55,65,81,.1)}
.top-actions{display:flex; align-items:center; gap:10px}
.locale{display:flex; align-items:center; gap:8px}
.select,.input{
  height:36px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#ffffff;
  color:var(--text);
  padding:0 10px;
  outline:none;
}
.input{width:100%}
.label{display:block; font-size:12px; color:var(--muted); margin:10px 0 6px}
.btn{
  height:36px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#ffffff;
  color:var(--text);
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:600;
}
.btn:hover{background:color-mix(in srgb, var(--front-p1) 6%, transparent)}
.btn-primary{
  border-color:var(--front-border);
  color:#ffffff;
  background:linear-gradient(180deg, var(--front-p1), var(--front-p2));
}
.btn-primary:hover{background:linear-gradient(180deg, var(--front-p1), var(--front-p2)); filter:brightness(1.08)}
.btn-ghost{background:transparent}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.94));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.card-title{font-weight:800; margin-bottom:12px}
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:stretch; margin-top:16px}
.hero h1{margin:0 0 10px; font-size:40px; line-height:1.08}
.hero-cta{display:flex; gap:10px; margin:16px 0}
.badge-row{display:flex; flex-wrap:wrap; gap:8px}
.badge{
  font-size:12px;
  color:rgba(8,43,43,.90);
  border:1px solid var(--border);
  background:rgba(55,65,81,.06);
  padding:6px 10px;
  border-radius:999px;
}
.tree{margin:0; padding-left:18px; color:rgba(8,43,43,.92)}
.tree ul{margin:6px 0; padding-left:18px}
.auth-page{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px; background:linear-gradient(160deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%)}
.auth-wrap{width:100%; max-width:520px}
.auth{margin:0; display:block}
.auth .card{width:100%; padding:40px 44px; box-shadow:0 25px 50px -12px rgba(0,0,0,.12); border-radius:20px}
.auth .card-title{font-size:22px; margin-bottom:24px; letter-spacing:-0.02em}
.auth-brand{display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:28px}
.auth-brand-icon{width:56px; height:56px; border-radius:16px; background:linear-gradient(135deg, var(--front-p1), var(--front-p2)); color:#fff; font-weight:900; font-size:26px; display:flex; align-items:center; justify-content:center}
.auth-brand-text{font-size:22px; font-weight:800; letter-spacing:-0.02em; color:#0f172a}
.auth .label{margin-top:14px}
.auth .input{height:44px; padding:0 16px; font-size:16px}
.auth .btn-primary{margin-top:8px; min-height:44px; padding:0 20px}
.demand-tabs{display:flex; flex-wrap:wrap; gap:8px}
.demand-tab{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  text-decoration:none;
  font-size:13px;
}
.demand-tab:hover{background:color-mix(in srgb, var(--front-p1) 6%, transparent); border-color:color-mix(in srgb, var(--front-p1) 20%, transparent)}
.demand-tab.active{background:color-mix(in srgb, var(--front-p1) 12%, transparent); border-color:transparent; color:var(--front-p1); font-weight:600}
.demand-list{display:flex; flex-direction:column; gap:12px}
.demand-card{
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
  background:var(--panel);
}
.demand-card-head{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.demand-card-title{font-weight:600; font-size:15px; color:var(--text)}
.demand-card-meta{font-size:12px; color:var(--text2)}
.demand-card-foot{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:8px; padding-top:8px; border-top:1px solid var(--border)}
.demand-budget{font-weight:500; color:var(--primary2)}
.form{display:block}
.form-row{margin-top:12px}
.form-row .label{display:block; margin-bottom:4px; font-size:13px; font-weight:500; color:var(--text2)}
.form-row .input{width:100%; max-width:400px}
.form-row input[type=number],.form-row input[type=datetime-local]{max-width:160px}
.alert{
  border-radius:12px;
  padding:10px 12px;
  border:1px solid var(--border);
  margin-bottom:10px;
}
.alert-error{border-color:rgba(255,95,95,.45); background:rgba(255,95,95,.08)}
.empty{
  border:1px dashed rgba(8,43,43,.18);
  border-radius:12px;
  padding:14px;
  color:rgba(8,43,43,.86);
}
.user-chip{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  line-height:1.1;
  padding:6px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(55,65,81,.06);
}
.user-name{font-weight:800; font-size:13px}
.user-role{font-size:11px; color:var(--muted)}
.footer{margin-top:18px; border-top:1px solid var(--border); background:rgba(255,255,255,.65)}
.footer-inner{display:flex; justify-content:space-between; gap:10px; padding:18px; max-width:var(--max); margin:0 auto}
.details{margin-top:12px}
.code{
  white-space:pre-wrap;
  background:rgba(55,65,81,.06);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
}
.grid2{display:grid; grid-template-columns:320px 1fr; gap:18px; margin-top:16px}
.cat-tree{list-style:none; margin:8px 0 0; padding-left:0}
.cat-tree ul{list-style:none; padding-left:14px; margin:8px 0}
.cat-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:10px;
  text-decoration:none;
  border:1px solid transparent;
  color:rgba(233,238,251,.95);
}
.cat-icon{
  display:inline-flex;
  align-items:center;
  color:rgba(233,238,251,.8);
}
.cat-link.active .cat-icon{color:white}
.item-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px}
.item-card{
  text-decoration:none;
  border-radius:14px;
  border:1px solid var(--border);
  background:#ffffff;
  padding:14px;
  transition: transform .12s ease, background .12s ease;
}
.item-card:hover{background:rgba(55,65,81,.04)}
.card-media{
  width:100%;
  height:180px;
  border-radius:12px;
  overflow:hidden;
  background:#f1f5f9;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(8,43,43,.55);
  margin-bottom:10px;
}
.card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.card-row{display:flex; align-items:baseline; gap:8px; margin-top:10px}
.dot{opacity:.6}
.item-type{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px}
.item-title{font-weight:850; margin-top:6px}
.item-price{margin-top:10px; display:flex; align-items:baseline; gap:6px}
.price{font-weight:900}
.split{display:grid; grid-template-columns:1.2fr .8fr; gap:14px}
.kv{display:grid; grid-template-columns:140px 1fr; gap:10px; align-items:start}
.kv .k{color:var(--muted); font-size:12px}
.kv .v{color:rgba(8,43,43,.95)}
.pill{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.04); font-size:12px}

/* 商品详情：商品=卡片布局，服务=列表行+icon */
.item-detail-card.split,.item-detail-list.split{display:grid; grid-template-columns:1.2fr .8fr; gap:20px; align-items:start}
.item-detail-main{min-width:0}
.item-detail-media{aspect-ratio:1; border-radius:var(--radius); overflow:hidden; background:var(--surface); margin-bottom:16px}
.item-detail-media img{width:100%; height:100%; object-fit:cover}
.item-detail-media-placeholder{width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--muted)}
.item-detail-media-placeholder svg{margin-bottom:8px}
.item-detail-info .pill{margin-bottom:10px}
.item-detail-title{font-size:22px; font-weight:800; margin:0 0 8px; line-height:1.25}
.item-detail-subtitle{margin-bottom:12px}
.item-detail-price-row{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.item-detail-price{font-size:24px}
.item-detail-desc{font-size:14px; line-height:1.6; color:var(--text); margin-bottom:16px}
.item-detail-desc br{margin:0}
.item-detail-actions{display:flex; gap:10px; flex-wrap:wrap}
.item-detail-side .card-title{margin-bottom:12px}
.item-detail-suppliers{display:grid; gap:10px; margin-top:12px}

/* 服务详情：列表行，一行一个，带 icon；可扩展一行几个 .service-rows--cols-2 / --cols-3 */
.service-rows{display:grid; gap:0}
.service-rows--cols-1{grid-template-columns:1fr}
.service-rows--cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
.service-rows--cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
.service-row{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:20px 0;
  border-bottom:1px solid var(--border);
}
.service-row:last-child{border-bottom:none}
.service-row-icon{
  flex-shrink:0;
  width:48px;
  height:48px;
  border-radius:14px;
  background:rgba(55,65,81,.08);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--primary);
}
.service-row-body{min-width:0; flex:1}
.service-row-body .pill{margin-bottom:8px}
.service-row-title{font-size:20px; font-weight:800; margin:0 0 6px; line-height:1.3}
.service-row-subtitle{margin-bottom:8px}
.service-row-desc{font-size:14px; line-height:1.6; color:var(--text); margin-bottom:12px}
.service-row-desc br{margin:0}
.service-row-meta{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.service-row-actions{display:flex; gap:10px; flex-wrap:wrap}

@media (max-width: 920px){
  .item-detail-card.split,.item-detail-list.split{grid-template-columns:1fr}
}

/* ── 服务详情页V2 ── */
.item-detail-v2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.item-info-card {
  padding: 20px;
}
.item-info-header {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}
.item-info-cover {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  flex-shrink: 0;
}
.item-info-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.item-info-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.item-info-main {
  flex: 1;
  min-width: 0;
}
.item-info-cat {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}
.item-info-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.3;
}
.item-info-subtitle {
  font-size: 13px;
  margin-bottom: 10px;
}
.item-info-price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}
.item-info-price {
  font-size: 22px;
  font-weight: 700;
  color: #059669;
}
.item-info-unit {
  font-size: 13px;
}
.item-info-rating {
  display: flex;
  align-items: center;
  gap: 6px;
}
.item-rating-stars {
  display: flex;
  gap: 2px;
}
.item-rating-stars .star {
  color: #d1d5db;
  font-size: 14px;
}
.item-rating-stars .star.filled {
  color: #fbbf24;
}
.item-rating-score {
  font-weight: 600;
  font-size: 14px;
}
.item-info-specs {
  padding: 14px;
  background: var(--surface);
  border-radius: 10px;
  margin-bottom: 14px;
}
.item-specs-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 10px;
}
.item-specs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.item-spec-item {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.item-spec-key {
  color: var(--muted);
}
.item-spec-val {
  font-weight: 500;
}
.item-info-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 16px;
}
.item-info-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.item-act-consult {
  flex: 1;
  min-width: 120px;
}
.item-act-book {
  flex: 1;
  min-width: 120px;
}

/* 首推技师 */
.item-top-tech {
  padding: 16px;
}
.section-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
}
.section-subtitle {
  margin-bottom: 12px;
}
.top-tech-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.top-tech-avatar-wrap {
  flex-shrink: 0;
}
.top-tech-avatar-link {
  text-decoration: none;
}
.top-tech-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #e5e7eb, #d1d5db);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 20px;
  font-weight: 700;
}
.top-tech-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.top-tech-info {
  flex: 1;
  min-width: 0;
}
.top-tech-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.top-tech-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
a.top-tech-name:hover {
  text-decoration: underline;
}
.top-tech-badge {
  font-size: 11px;
  padding: 2px 8px;
  background: #dcfce7;
  color: #15803d;
  border-radius: 10px;
}
.top-tech-meta {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}
.top-tech-rating {
  color: #fbbf24;
}
.top-tech-sep {
  margin: 0 4px;
}
.top-tech-bio {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}
.top-tech-quote {
  color: var(--front-p1);
  font-size: 18px;
  font-family: Georgia, serif;
  opacity: 0.5;
}

/* 其他技师列表 */
.item-other-techs {
  padding: 16px;
}
.other-techs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.other-tech-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.other-tech-item:last-child {
  border-bottom: none;
}
.other-tech-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.other-tech-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.other-tech-info {
  flex: 1;
  min-width: 0;
}
.other-tech-name {
  font-size: 14px;
  font-weight: 500;
}
.other-tech-name a {
  text-decoration: none;
  color: var(--text);
}
.other-tech-name a:hover {
  text-decoration: underline;
}
.other-tech-link {
  font-size: 12px;
  color: var(--front-p1);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--front-p1);
  border-radius: 6px;
}
.other-tech-link:hover {
  background: var(--front-p1);
  color: #fff;
}

/* SKU列表 */
.sku-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sku-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: 10px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s;
}
.sku-item:hover {
  border-color: var(--front-p1);
}
.sku-item-name {
  font-size: 14px;
  font-weight: 600;
}
.sku-item-desc {
  margin-top: 2px;
}
.sku-item-price {
  text-align: right;
}
.sku-price-now {
  font-size: 16px;
  font-weight: 700;
  color: #059669;
}
.sku-price-old {
  text-decoration: line-through;
}

/* 定价规则 */
.pricing-rules-list {
  display: flex;
  flex-direction: column;
}
.pricing-rule-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.pricing-rule-item:last-child {
  border-bottom: none;
}
.pricing-rule-name {
  font-size: 14px;
  font-weight: 500;
}
.pricing-rule-desc {
  margin-top: 2px;
}
.pricing-amount-value {
  font-size: 15px;
  font-weight: 600;
  color: #059669;
}

/* ---- 报价明细展示 ---- */
.pricing-bd-list { display: flex; flex-direction: column; gap: 0; }
.pricing-bd-group { border-bottom: 1px solid var(--border); }
.pricing-bd-group:last-child { border-bottom: none; }
.pricing-bd-group-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0 4px;
}
.pricing-bd-group-name { font-size: 14px; font-weight: 600; color: var(--text); }
.pricing-bd-group-sub { font-size: 14px; font-weight: 600; color: #059669; margin-left: auto; }
.pricing-bd-group-pct { font-size: 12px; }
.pricing-bd-group-items { padding: 0 0 8px 12px; }
.pricing-bd-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 0; font-size: 13px;
}
.pricing-bd-item-name { color: var(--muted); }
.pricing-bd-item-price { font-weight: 500; color: var(--text); }
.pricing-bd-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0 4px; border-top: 1px solid var(--border);
  font-size: 15px; font-weight: 700;
}
.pricing-bd-total { color: #059669; }
.sidebar-section-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  margin-bottom: 8px;
}
.sidebar-pricing-bd .pricing-bd-group-name { font-size: 13px; }
.sidebar-pricing-bd .pricing-bd-group-sub { font-size: 13px; }
.sidebar-pricing-bd .pricing-bd-item { font-size: 12px; }
.sidebar-pricing-bd .pricing-bd-footer { font-size: 13px; }
.sidebar-pricing-rules .pricing-rule-item { padding: 6px 0; }
.sidebar-pricing-rules .pricing-rule-name { font-size: 13px; }
.sidebar-pricing-rules .pricing-rule-desc { font-size: 12px; }
.sidebar-pricing-rules .pricing-amount-value { font-size: 13px; }

/* 配件 */
.parts-accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.parts-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.parts-group-header {
  padding: 10px 14px;
  background: var(--surface);
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.parts-group-body {
  padding: 8px 14px;
}
.part-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.part-item:last-child {
  border-bottom: none;
}
.part-item-name {
  font-size: 14px;
}
.part-item-price {
  text-align: right;
  white-space: nowrap;
}
.part-price-now {
  font-weight: 600;
  font-size: 14px;
  color: #059669;
}
.part-price-old {
  text-decoration: line-through;
  margin: 0 4px;
}

/* 订购须知 */
.order-notes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.order-note-item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid;
}
.order-note-general {
  background: #f8fafc;
  border-left-color: #64748b;
}
.order-note-warning {
  background: #fffbeb;
  border-left-color: #f59e0b;
}
.order-note-tip {
  background: #f0fdf4;
  border-left-color: #10b981;
}
.order-note-icon {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}
.order-note-general .order-note-icon {
  color: #64748b;
}
.order-note-warning .order-note-icon {
  color: #f59e0b;
}
.order-note-tip .order-note-icon {
  color: #10b981;
}
.order-note-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

/* 评价评论 */
.reviews-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--surface);
  border-radius: 10px;
  margin-bottom: 16px;
}
.reviews-avg {
  text-align: center;
}
.reviews-avg-score {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
}
.reviews-avg-stars {
  display: flex;
  gap: 2px;
  justify-content: center;
}
.reviews-avg-stars .star {
  color: #d1d5db;
  font-size: 14px;
}
.reviews-avg-stars .star.filled {
  color: #fbbf24;
}
.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.review-item {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.review-item:last-child {
  border-bottom: none;
}
.review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.review-user {
  display: flex;
  gap: 10px;
  align-items: center;
}
.review-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.review-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.review-user-name {
  font-size: 14px;
  font-weight: 500;
}
.review-rating {
  display: flex;
  gap: 2px;
}
.review-rating .star {
  color: #d1d5db;
  font-size: 12px;
}
.review-rating .star.filled {
  color: #fbbf24;
}
.review-content {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}

/* 留言表单 */
.review-form-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.review-form-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}
.review-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.review-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  resize: vertical;
  min-height: 80px;
}
.review-textarea:focus {
  outline: none;
  border-color: var(--front-p1);
}
.review-submit {
  align-self: flex-end;
}

/* 首页信息流（问答平台式） */
.feed{display:flex; flex-direction:column; gap:14px}
.feed-head h1{font-size:30px; line-height:1.15}
.feed-body{display:grid; grid-template-columns:1fr 360px; gap:14px; align-items:start}
.feed-list{display:grid; gap:10px}
.feed-item{
  text-decoration:none;
  border:1px solid var(--border);
  background:#ffffff;
  border-radius:16px;
  padding:14px;
  display:flex;
  justify-content:space-between;
  gap:14px;
}
.thumb{
  width:120px;
  height:76px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border);
  background:rgba(55,65,81,.06);
  flex:0 0 auto;
}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.thumb-icon{display:flex; align-items:center; justify-content:center; color:rgba(8,43,43,.55)}
.feed-item:hover{background:rgba(55,65,81,.04)}
.feed-item-title{font-weight:950; margin-top:8px}
.feed-meta{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.meta{font-size:12px; color:var(--muted); border:1px solid var(--border); padding:5px 8px; border-radius:999px; background:rgba(55,65,81,.05)}
.feed-item-right{min-width:120px; text-align:right}
.feed-side{position:sticky; top:72px}

/* 左侧导航布局 */
.app-shell{display:grid; grid-template-columns: var(--sidebar-w, 280px) 10px 1fr; grid-template-rows: auto 1fr; min-height:100vh}
.sidebar{grid-column:1; grid-row:1 / -1; transition: width .25s ease, min-width .25s ease, padding .25s ease}
.sidebar-overlay{grid-column:3; grid-row:1 / -1}
.sidebar-resizer{grid-column:2; grid-row:1 / -1}
[data-layout="top-nav"] .top-category-nav{grid-column:1; grid-row:1}
.app-main{grid-column:3; grid-row:2; min-height:0; display:flex; flex-direction:column;}
.sidebar{
  position:sticky; top:0; height:100vh;
  background:rgba(255,255,255,.92);
  border-right:1px solid var(--border);
  backdrop-filter: blur(10px);
  padding:12px 10px;
  display:flex; flex-direction:column; gap:12px;
  overflow:hidden;
}
.side-top{display:flex; align-items:center; gap:10px}
.side-brand{display:flex; align-items:center; gap:10px; text-decoration:none; padding:10px 10px; border-radius:14px}
.side-brand:hover{background:rgba(55,65,81,.06)}
.logo{
  width:34px; height:34px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:#ffffff; font-weight:900;
  background:linear-gradient(180deg, var(--front-p1), var(--front-p2));
  box-shadow: 0 10px 26px var(--front-shadow);
}
.brand-text{display:flex; flex-direction:column; line-height:1.05}
.brand-name{font-weight:900}
.brand-sub{font-size:12px}
.side-nav-panels{position:relative; margin-top:10px;}
.side-nav-panel{
  position:absolute;
  top:0; left:0; right:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}
.side-nav-panel.visible{
  position:relative;
  opacity:1;
  pointer-events:auto;
}

.side-tree-flat{border-left:none !important; padding-left:0}
.side-tree-flat > li{margin:2px 0}

.side-section{border:none; background:rgba(255,255,255,.70); border-radius:12px; padding:10px; display:flex; flex-direction:column; flex:1 1 auto; min-height:0; max-height: calc(100vh - 200px);}
.side-title{font-weight:850; margin-bottom:10px}
.side-title{font-size:12px; letter-spacing:.3px; text-transform:uppercase}
.side-scroll{overflow:auto; padding-right:6px; flex:1; min-height:0;}
/* 树形分类：虚线连接，无箭头 */
.side-tree{list-style:none; margin:0; padding-left:0}
.side-tree ul{list-style:none; margin:4px 0; padding-left:16px}
.side-tree > li > a{margin-left:0}
.side-tree li{margin:1px 0}

/* 分类项缩进和间距 */
.side-tree ul li {
  margin: 4px 0;
}

/* 激活状态高亮更明显 */
.side-link.active {
  background: rgba(55, 65, 81, 0.12);
  font-weight: 700;
}

/* 悬停效果 */
.side-link:hover {
  background: rgba(55, 65, 81, 0.08);
}
.side-link{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  padding:6px 8px;
  border-radius:8px;
  border:none;
  font-size:12px;
}
.side-icon{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  color:var(--muted);
}
.side-link.active .side-icon{color:var(--text)}
.side-text{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:750;
}
.side-count{
  flex:0 0 auto;
  font-size:11px;
  color:var(--muted);
  border:none;
  background:rgba(55,65,81,.06);
  padding:2px 6px;
  border-radius:999px;
}
.side-link:hover{background:rgba(55,65,81,.06)}
.side-link.active{background:rgba(55,65,81,.10)}
.side-link.active:hover{background:rgba(55,65,81,.14)}
.side-link.active .side-text{color:var(--text); font-weight:800}
.side-link.active .side-icon{color:var(--front-p1)}
.side-actions{display:grid; gap:8px}
.side-btn{
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  height:36px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#ffffff;
  font-weight:700;
  cursor:pointer;
}
.side-btn:hover{background:rgba(55,65,81,.06)}
.side-btn-primary{
  border-color:var(--front-border);
  color:#ffffff;
  background:linear-gradient(180deg, var(--front-p1), var(--front-p2));
}
.side-btn-primary:hover{background:linear-gradient(180deg, var(--front-p1), var(--front-p2)); filter:brightness(1.08)}
.side-btn-sm{height:28px; font-size:12px; font-weight:600}
.side-btn-ghost{background:transparent}
.lang-row{display:flex; gap:8px; align-items:center}
.icon-btn{
  width:44px; height:36px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#ffffff;
  font-weight:900;
  cursor:pointer;
}
.icon-btn:hover{background:rgba(55,65,81,.06)}
.icon-btn.active{border-color:rgba(55,65,81,.45); background:rgba(55,65,81,.10)}
.side-foot{margin-top:auto; padding:6px 4px 4px; display:flex; align-items:center; flex-wrap:wrap; gap:4px}
.side-foot-sep{opacity:.6}
.side-foot-link{color:inherit; text-decoration:none}
.side-foot-link:hover{text-decoration:underline}

.app-main .content{flex:1 1 auto; min-height:0}
.content{
  max-width:var(--max);
  margin:0 auto;
  padding:16px 18px;
  padding-left:calc(18px + env(safe-area-inset-left, 0));
  padding-right:calc(18px + env(safe-area-inset-right, 0));
  padding-bottom:calc(16px + env(safe-area-inset-bottom, 0));
}

/* 侧栏拖拽分隔条 + 抽屉开关（收缩前后图标一致） */
.sidebar-resizer{
  position:relative;
  width:10px;
  border-right:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(55,65,81,.03));
  transition: width .25s ease, background .25s ease;
}
.resizer-handle{
  position:sticky;
  top:calc(50vh - 16px);
  left:50%;
  margin-left:-16px;
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#ffffff;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  font-size:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition: background .2s ease, color .2s ease, transform .25s ease, box-shadow .2s ease;
}
.resizer-handle:hover{
  background:var(--front-p1,#4E5969);
  color:#fff;
  border-color:var(--front-p1,#4E5969);
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.resizer-handle .collapse-icon{
  transition:transform .25s ease;
}

/* 抽屉收起时：侧栏显示迷你图标版，手柄箭头翻转 */
.app-shell.sidebar-drawer-closed{grid-template-columns:64px 10px 1fr}
.app-shell.sidebar-drawer-closed .sidebar{
  width:64px;
  min-width:64px;
  padding:12px 6px;
  overflow:visible;
  z-index:20;
}
.app-shell.sidebar-drawer-closed .sidebar-resizer{
  width:10px;
  cursor:pointer;
  background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(55,65,81,.03));
}
.app-shell.sidebar-drawer-closed .resizer-handle{
  cursor:pointer;
  z-index:1001;
  position:relative;
}
.app-shell.sidebar-drawer-closed .resizer-handle .collapse-icon{
  transform:rotate(180deg);
}

/* 折叠状态下隐藏文字内容 */
.app-shell.sidebar-drawer-closed .side-text,
.app-shell.sidebar-drawer-closed .side-count,
.app-shell.sidebar-drawer-closed .side-title,
.app-shell.sidebar-drawer-closed .side-search-container,
.app-shell.sidebar-drawer-closed .side-foot,
.app-shell.sidebar-drawer-closed .brand-text{
  display:none;
}
/* 折叠状态下图标居中，品牌logo居中 */
.app-shell.sidebar-drawer-closed .side-brand{
  justify-content:center;
  padding:0;
}
.app-shell.sidebar-drawer-closed .logo{
  margin:0;
}
.app-shell.sidebar-drawer-closed .side-link{
  justify-content:center;
  padding:8px 0;
  border-radius:8px;
}
.app-shell.sidebar-drawer-closed .side-icon{
  margin-right:0;
}
.app-shell.sidebar-drawer-closed .side-tree{
  padding-left:0;
}
.app-shell.sidebar-drawer-closed .side-tree ul{
  display:none;
}
.app-shell.sidebar-drawer-closed .side-section{
  padding:0;
  margin-top:12px;
}
.app-shell.sidebar-drawer-closed .side-scroll{
  padding:0 4px;
  overflow:visible;
}
.app-shell.sidebar-drawer-closed .side-top{
  justify-content:center;
  padding:0 4px;
}
.app-shell.sidebar-drawer-closed .front-theme-toggle{
  display:none;
}

/* 折叠状态下的弹出菜单 - 默认隐藏 */
.side-popup{
  display:none;
}
/* 折叠状态下悬停显示弹出菜单 */
.app-shell.sidebar-drawer-closed .side-root-item{
  position:relative;
}
.app-shell.sidebar-drawer-closed .side-popup{
  display:none;
  position:absolute;
  left:100%;
  top:0;
  margin-left:8px;
  min-width:180px;
  max-width:240px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  padding:8px 0;
  z-index:1000;
  animation:sidePopupIn .15s ease;
}
@keyframes sidePopupIn{
  from{opacity:0;transform:translateX(-8px)}
  to{opacity:1;transform:translateX(0)}
}
.app-shell.sidebar-drawer-closed .side-root-item:hover .side-popup,
.app-shell.sidebar-drawer-closed .side-popup.open{
  display:block;
}
.side-popup-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 14px 8px;
  border-bottom:1px solid var(--border);
  margin-bottom:4px;
}
.side-popup-header a{
  font-weight:600;
  font-size:14px;
  color:var(--text);
  text-decoration:none;
}
.side-popup-header a:hover{
  color:var(--front-p1,#4E5969);
}
.side-popup-count{
  font-size:12px;
  color:var(--muted);
  background:rgba(55,65,81,.08);
  padding:2px 8px;
  border-radius:10px;
}
.side-popup-list{
  max-height:280px;
  overflow-y:auto;
}
.side-popup-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:7px 14px;
  font-size:13px;
  color:var(--text);
  text-decoration:none;
  transition:background .15s;
}
.side-popup-item:hover{
  background:rgba(55,65,81,.06);
  color:var(--front-p1,#4E5969);
}
.side-popup-item-count{
  font-size:11px;
  color:var(--muted);
}
/* 黑色主题下的弹出菜单 */
[data-front-theme="black"] .app-shell.sidebar-drawer-closed .side-popup{
  background:#222;
  border-color:rgba(255,255,255,.15);
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
[data-front-theme="black"] .side-popup-header{
  border-bottom-color:rgba(255,255,255,.12);
}
[data-front-theme="black"] .side-popup-header a{
  color:#fff;
}
[data-front-theme="black"] .side-popup-count{
  background:rgba(255,255,255,.15);
  color:#bbb;
}
[data-front-theme="black"] .side-popup-item{
  color:#ddd;
}
[data-front-theme="black"] .side-popup-item:hover{
  background:rgba(255,255,255,.1);
  color:#fff;
}
[data-front-theme="black"] .side-popup-item-count{
  color:#999;
}

/* 悬浮在线咨询 FAB */
.fab-chat{
  position:fixed;
  right:calc(18px + env(safe-area-inset-right, 0));
  bottom:calc(18px + env(safe-area-inset-bottom, 0));
  z-index:50;
  width:54px;
  height:54px;
  min-width:54px;
  min-height:54px;
  border-radius:18px;
  background:linear-gradient(180deg, var(--front-p1), var(--front-p2));
  color:#fff;
  border:1px solid var(--front-border);
  box-shadow: 0 18px 40px var(--front-shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:filter .15s;
}
.fab-chat:hover{filter:brightness(1.04)}
.fab-icon{display:block}

/* 详情页/全站 toast */
.toast-stack{position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom, 0)); transform:translateX(-50%); z-index:80; display:grid; gap:8px; pointer-events:none}
.toast{background:rgba(17,24,39,.92); color:#fff; padding:10px 14px; border-radius:12px; font-size:13px; box-shadow:0 12px 30px rgba(0,0,0,.18); pointer-events:none; max-width:min(520px, 92vw); text-align:center}

/* 购物车页：批量 + 数量调整 */
.cart-bulk-bar{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap}
.cart-check{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted)}
.cart-lines{display:grid; gap:10px}
.cart-line{display:flex; gap:12px; align-items:flex-start}
.cart-line-main{flex:1; min-width:0}
.cart-line-side{display:flex; flex-direction:column; gap:8px; align-items:flex-end}
.cart-qty{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px}
.qty-btn{width:32px; height:32px; border-radius:10px; border:1px solid var(--border); background:#fff; cursor:pointer; font-size:18px; line-height:1}
.qty-btn:hover{background:rgba(55,65,81,.06)}
.qty-input{width:72px; height:32px; border-radius:10px; border:1px solid var(--border); padding:0 10px}
.link-danger{background:none; border:none; color:#b42318; cursor:pointer; font-size:12px; padding:0}
.link-danger:hover{text-decoration:underline}

/* 移动端侧栏遮罩 */
.sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:99;
  background:rgba(0,0,0,.4);
  -webkit-tap-highlight-color:transparent;
}
.app-shell.sidebar-open .sidebar-overlay{display:block}

/* 右上角用户区 */
.menu{position:relative}
.menu > summary{list-style:none}
.menu > summary::-webkit-details-marker{display:none}
.menu-btn{
  cursor:pointer;
  border:1px solid var(--border);
  background:#ffffff;
  height:40px;
  width:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.menu-btn:hover{background:color-mix(in srgb, var(--front-p1) 6%, transparent)}
.avatar-lite{
  width:28px; height:28px; border-radius:999px;
  background:rgba(55,65,81,.10);
  border:1px solid rgba(55,65,81,.25);
  color:rgba(8,43,43,.55);
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
}
.avatar-lite-img{
  width:28px; height:28px; border-radius:999px;
  object-fit:cover;
  border:1px solid rgba(55,65,81,.15);
}
.menu[open] .menu-btn{box-shadow:0 0 0 4px rgba(55,65,81,.1)}
.menu-panel{
  position:absolute;
  right:0;
  top:48px;
  width:260px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:20px !important;
  z-index:30;
}
.menu-title{font-weight:700; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.25px; margin:4px 0 6px}
.menu-section{margin-bottom:12px}
.menu-section:last-child{margin-bottom:0}
.menu-divider{height:1px; background:var(--border); margin:8px 0; opacity:0.5}
.menu-row{display:flex; gap:6px; flex-wrap:wrap}
.menu-item{
  height:28px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-weight:600;
  font-size:11px;
  color:rgba(8,43,43,.82);
}
.menu-item:hover{background:color-mix(in srgb, var(--front-p1) 6%, transparent)}
.menu-item.active{border-color:color-mix(in srgb, var(--front-p1) 35%, transparent); background:color-mix(in srgb, var(--front-p1) 10%, transparent)}
.menu-item.active:hover{background:color-mix(in srgb, var(--front-p1) 16%, transparent); color:var(--front-p1)}
.menu-sep{height:1px; background:var(--border); margin:6px 0}
.menu-link{
  display:block;
  text-decoration:none;
  padding:5px 8px;
  border-radius:8px;
  border:1px solid transparent;
  color:rgba(8,43,43,.88);
  font-size:12px;
  font-weight:600;
}
.menu-link:hover{background:color-mix(in srgb, var(--front-p1) 6%, transparent)}
.menu-link.danger{color:#b42318; font-size:12px}
/* 顶栏语言/国别：带图标的同排下拉 */
.locale-row{display:flex; align-items:center; gap:6px}
.icon-dropdown{position:relative}
.icon-dropdown-btn{
  display:flex; align-items:center; gap:6px;
  min-width:0; padding:0 10px;
  height:36px; border-radius:12px;
  border:1px solid var(--border); background:#fff;
  font-size:13px; font-weight:600; color:var(--text);
  cursor:pointer; list-style:none;
}
.icon-dropdown-btn::-webkit-details-marker{display:none}
.icon-dropdown-btn:hover{background:rgba(55,65,81,.06)}
.icon-dropdown-icon{flex-shrink:0; color:var(--muted)}
.icon-dropdown-label{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.menu[open].icon-dropdown .icon-dropdown-btn{box-shadow:0 0 0 4px rgba(55,65,81,.1)}
.icon-dropdown-panel{width:200px; padding:10px}

/* 订单支付方式选择 */
.pay-methods{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.pay-method-form{margin:0}
.pay-method-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px;
  border:1px solid var(--border); background:#fff;
  cursor:pointer; font-size:13px; font-weight:600;
}
.pay-method-btn:hover{background:rgba(55,65,81,.06); border-color:rgba(55,65,81,.25)}
.pay-method-icon{display:flex; align-items:center; flex-shrink:0}
.pay-method-icon svg{display:block}
.pay-method-label{white-space:nowrap}

.filters{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.card-head-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px}
.card-head-row .card-title{margin:0}

/* ── 后台搜索框（带清除按钮） ── */
.search-box-wrap{display:flex; align-items:center}
.search-box-form{display:flex; align-items:center; gap:8px}
.search-input-wrap{position:relative; display:flex; align-items:center}
.search-input-wrap .input{padding-right:28px}
.search-clear-btn{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%;
  background:var(--border); color:var(--text);
  font-size:14px; line-height:18px; text-align:center; text-decoration:none;
  display:flex; align-items:center; justify-content:center;
  opacity:0.6; transition:opacity .15s, background .15s;
}
.search-clear-btn:hover{opacity:1; background:var(--muted)}

.filters-inline{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.catalog-price-input{width:72px; min-width:72px}

/* ── 全品类搜索栏 ── */
/* 仅顶导布局显示，经典侧栏布局已有顶部搜索 */
.catalog-search-bar.topnav-only {
  display: none;
}
[data-layout="top-nav"] .catalog-search-bar.topnav-only {
  display: block;
  margin-bottom: 16px;
}
.catalog-search-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.catalog-search-icon {
  position: absolute;
  left: 14px;
  color: var(--muted);
  pointer-events: none;
  display: flex;
}
.catalog-search-input {
  flex: 1;
  padding: 10px 14px 10px 42px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
}
.catalog-search-input:focus {
  border-color: var(--front-p1);
}
.catalog-search-input::placeholder {
  color: var(--muted);
}
.catalog-search-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background: var(--front-p1);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.catalog-search-btn:hover {
  opacity: 0.85;
}

/* ── 筛选条件标签行 ── */
.catalog-filter-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.filter-tag-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.filter-tag-label {
  font-size: 12px;
  color: var(--muted);
}
.filter-tag-select {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  font-size: 12px;
  outline: none;
  cursor: pointer;
}
.filter-tag-input {
  width: 60px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  font-size: 12px;
  outline: none;
}
.filter-tag-input:focus {
  border-color: var(--front-p1);
}
.filter-tag-sep {
  color: var(--muted);
  font-size: 12px;
}
.filter-tag-go {
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  background: var(--front-p1);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
.filter-tag-go:hover {
  opacity: 0.85;
}
.filter-tag-clear {
  font-size: 16px;
  color: var(--muted);
  text-decoration: none;
  line-height: 1;
  margin-left: 2px;
}
.filter-tag-clear:hover {
  color: var(--text);
}
.filter-tag-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--front-p1) 8%, transparent);
  border-radius: 14px;
  font-size: 12px;
}
.filter-tag-name {
  color: var(--text);
}
.filter-tag-x {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  line-height: 1;
}
.filter-tag-x:hover {
  color: var(--text);
}

/* ── 横向日历条（火车票式） ── */
/* ── 服务卡片网格 (每行2个) ── */
.svc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.svc-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.svc-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.svc-card-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}
.svc-card-sales {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.svc-card-sub {
  line-height: 1.4;
}
/* 服务规格 - 轻量行内展示 */
.svc-card-specs {
  padding: 0;
}
.svc-specs-inline {
  line-height: 1.6;
  word-break: break-all;
}

.svc-card-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
/* 首推技师 - 无背景，用上边线分隔 */
.svc-card-recommend {
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.svc-card-rec-label {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}
.svc-card-rec-tech {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.svc-rec-avatar-link { text-decoration: none; flex-shrink: 0; }
.svc-rec-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #e5e7eb, #d1d5db);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.svc-rec-avatar img { width: 100%; height: 100%; object-fit: cover; }
.svc-rec-info { flex: 1; min-width: 0; }
.svc-rec-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.svc-rec-meta-inline {
  font-size: 11px;
  font-weight: 400;
}
.svc-rec-bio {
  margin-top: 3px;
  line-height: 1.5;
}
/* 首推技师 - 大头像版本 */
.svc-rec-avatar-lg {
  width: 52px;
  height: 52px;
  font-size: 18px;
}
.svc-rec-featured {
  align-items: flex-start;
}
/* 大引号bio展示 */
.svc-rec-bio-quote {
  margin-top: 6px;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.6;
}
.svc-quote-mark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 0.8;
  color: var(--front-p1);
  opacity: 0.4;
  flex-shrink: 0;
}
.svc-quote-text {
  font-size: 13px;
  color: var(--text);
  padding-top: 6px;
}

/* 可接单技师列表 */
.svc-card-techs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.svc-card-techs-label {
  padding-bottom: 4px;
}
.svc-tech-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.svc-tech-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  background: #e5e7eb;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.svc-tech-avatar img { width: 100%; height: 100%; object-fit: cover; }
.svc-tech-detail {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  flex-wrap: wrap;
}
.svc-tech-name { font-weight: 600; color: var(--text); }
.svc-tech-name a { text-decoration: none; }
.svc-tech-name a:hover { text-decoration: underline; }
.svc-tech-rating { font-size: 11px; }
.svc-tech-bio { font-size: 11px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-tech-more { padding-left: 32px; }

/* 底部操作按钮 - 右下角对齐 */
.svc-card-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.svc-card-footer-actions {
  display: flex;
  gap: 8px;
}
.svc-act-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 18px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.svc-act-btn:hover { opacity: 0.85; }
.svc-act-apply {
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--border);
}
.svc-act-book {
  background: color-mix(in srgb, var(--front-p1) 12%, transparent);
  color: var(--front-p1);
}

@media (max-width: 640px) {
  .svc-grid { grid-template-columns: 1fr; gap: 12px; }
  .svc-card { padding: 14px; }
}

/* ── 分页组件 ── */
.catalog-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.pagination-info {
  font-size: 13px;
  color: var(--muted);
}
.pagination-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  text-decoration: none;
  transition: all 0.15s;
}
.page-btn:hover {
  border-color: var(--front-p1);
  color: var(--front-p1);
}
.page-btn.active {
  background: var(--front-p1);
  border-color: var(--front-p1);
  color: #fff;
}
.page-ellipsis {
  padding: 0 4px;
  color: var(--muted);
  font-size: 12px;
}
.pagination-size {
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-size-select {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  font-size: 12px;
  outline: none;
  cursor: pointer;
}
@media (max-width: 640px) {
  .catalog-pagination {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .pagination-nav {
    justify-content: center;
  }
  .pagination-info,
  .pagination-size {
    justify-content: center;
    text-align: center;
  }
}

/* ── 服务列表行（catalog 页面） ── */
.svc-list {
  margin-top: 12px;
}
.svc-row {
  display: flex;
  align-items: stretch;
  gap: 16px;
  border-bottom: 1px solid var(--border);
}
.svc-row:last-child { border-bottom: none; }
.svc-row-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 14px 0;
}
.svc-row-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.svc-row-sub { margin-top: 2px; }
.svc-row-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.svc-tag {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--surface);
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border);
}
.svc-row-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
}
/* 服务人员列 */
.svc-row-staff {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 72px;
  padding: 8px 0;
}
.svc-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--spec-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.svc-avatar-more {
  font-size: 12px;
  color: var(--muted);
}
.svc-apply-form { display: flex; align-items: center; }
.svc-add-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px dashed var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.svc-add-btn:hover {
  border-color: var(--spec-primary);
  color: var(--spec-primary);
}
/* 订阅按钮 - 行高度充满 */
.svc-row-subscribe {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  background: linear-gradient(180deg, var(--front-p1), var(--front-p2));
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .5px;
  text-decoration: none;
  border-radius: 0 14px 14px 0;
  min-width: 60px;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.svc-row-subscribe:hover { opacity: .88; }

@media (max-width: 920px){
  .topbar-menu-btn{display:flex}
  .grid2{grid-template-columns:1fr}
  .item-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .split{grid-template-columns:1fr}
  .app-shell:not([data-layout="classic"]),.app-shell.sidebar-drawer-closed:not([data-layout="classic"]){grid-template-columns:1fr}
  .sidebar-resizer{display:none}
  .sidebar-overlay,.top-category-nav,.app-main{grid-column:1}
  .sidebar{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:min(320px, 85vw);
    max-width:100%;
    height:100vh;
    height:100dvh;
    z-index:100;
    transform:translateX(-100%);
    transition:transform .25s ease, visibility .25s;
    visibility:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    box-shadow:4px 0 24px rgba(0,0,0,.08);
  }
  .app-shell.sidebar-open .sidebar{
    transform:translateX(0);
    visibility:visible;
  }
  .side-scroll{flex:1; min-height:0;}
  .hero{grid-template-columns:1fr}
  .topbar-inner{flex-wrap:nowrap; gap:10px}
  .search{flex:1 1 0; min-width:0}
  .search .btn{flex-shrink:0}
  .top-actions{flex-shrink:0}
  .feed-body{grid-template-columns:1fr}
  .feed-side{position:relative; top:auto}
  .side-link{min-height:44px; padding:10px 12px}
  .side-tab{min-height:44px}
  .menu-btn{min-width:44px; min-height:44px}
  .staff-list{grid-template-columns:1fr}
  .svc-row{ flex-wrap: wrap; }
  .svc-row-info{ min-width: 100%; }
  .svc-row-subscribe{ border-radius: 10px; padding: 10px 22px; }
}
@media (max-width: 560px){
  .item-grid{grid-template-columns:1fr}
  .btn,.search-input{min-height:44px}
  .search-input,.input,.select{font-size:16px}
  .content{padding:12px 14px; padding-left:calc(14px + env(safe-area-inset-left, 0)); padding-right:calc(14px + env(safe-area-inset-right, 0)); padding-bottom:calc(12px + env(safe-area-inset-bottom, 0))}
  .fab-cart{right:calc(14px + env(safe-area-inset-right, 0)); bottom:calc(14px + env(safe-area-inset-bottom, 0))}
}

/* 服务人员卡片 */
.staff-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.staff-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.staff-card:hover {
  border-color: rgba(22,119,255,0.3);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.staff-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1677FF, #0d5dd9);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.staff-info { flex: 1; min-width: 0; }
.staff-name { font-weight: 700; font-size: 15px; color: var(--text); }
.staff-meta { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.staff-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: #d1fae5;
  color: #065f46;
}

/* 时间段选择 */
.time-slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.time-slot-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 80px;
}
.time-slot-item:hover {
  border-color: var(--spec-primary);
  background: rgba(22,119,255,0.04);
}
.time-slot-item.booked {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f8f8f8;
}
.time-slot-time { font-weight: 600; font-size: 14px; color: var(--text); }
.time-slot-status { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ========== 前台风格主题 ========== */
/* 简约蓝 */
[data-front-theme="blue"] {
  --front-p1:#1677FF;
  --front-p2:#0d5dd9;
  --front-shadow:rgba(22,119,255,.25);
  --front-border:rgba(22,119,255,.35);
}
/* 活力绿 */
[data-front-theme="green"] {
  --front-p1:#36CFC9;
  --front-p2:#0d9488;
  --front-shadow:rgba(54,207,201,.25);
  --front-border:rgba(54,207,201,.35);
}
/* 科技紫 */
[data-front-theme="purple"] {
  --front-p1:#7B1FA2;
  --front-p2:#6200EE;
  --front-shadow:rgba(98,0,238,.25);
  --front-border:rgba(98,0,238,.35);
}
/* 医疗青 */
[data-front-theme="cyan"] {
  --front-p1:#00B4D8;
  --front-p2:#0096C7;
  --front-shadow:rgba(0,180,216,.25);
  --front-border:rgba(0,180,216,.35);
}
/* 工业橙 */
[data-front-theme="orange"] {
  --front-p1:#FF7849;
  --front-p2:#FF6700;
  --front-shadow:rgba(255,103,0,.25);
  --front-border:rgba(255,103,0,.35);
}
/* 商务黑 */
[data-front-theme="black"] {
  --front-p1:#444;
  --front-p2:#222;
  --front-shadow:rgba(0,0,0,.5);
  --front-border:rgba(255,255,255,.12);
  --bg:#0a0a0a;
  --panel:#1a1a1a;
  --card:#1a1a1a;
  --text:#f5f5f5;
  --muted:#888;
  --border:rgba(255,255,255,.08);
  --surface:#1a1a1a;
  --ink:#f5f5f5;
  --gray-mid:#888;
  --gray-light:#666;
  --shadow:0 18px 40px rgba(0,0,0,.3);
  --text2:#999;
}
[data-front-theme="black"] body {
  background:#0a0a0a;
  color:#f5f5f5;
}
[data-front-theme="black"] .sidebar {
  background:rgba(26,26,26,.95);
  border-right-color:rgba(255,255,255,.06);
}
[data-front-theme="black"] .topbar {
  background:rgba(20,20,20,.92);
  border-bottom-color:rgba(255,255,255,.06);
}
[data-front-theme="black"] .card,
[data-front-theme="black"] .item-card,
[data-front-theme="black"] .demand-card,
[data-front-theme="black"] .feed-item {
  background:#1a1a1a;
  border-color:rgba(255,255,255,.08);
}
[data-front-theme="black"] .search-input,
[data-front-theme="black"] .select,
[data-front-theme="black"] .input {
  background:#1a1a1a;
  border-color:rgba(255,255,255,.1);
  color:#f5f5f5;
}
[data-front-theme="black"] .btn {
  background:#1a1a1a;
  border-color:rgba(255,255,255,.1);
  color:#ccc;
}
[data-front-theme="black"] .btn:hover {
  background:rgba(255,255,255,.06);
}
[data-front-theme="black"] .btn-primary {
  color:#fff;
  background:linear-gradient(180deg, var(--front-p1), var(--front-p2));
}
[data-front-theme="black"] .btn-primary:hover {
  background:linear-gradient(180deg, var(--front-p1), var(--front-p2));
  filter:brightness(1.2);
}
[data-front-theme="black"] .side-section {
  background:rgba(255,255,255,.04);
}
[data-front-theme="black"] .side-link {
  color:#bbb;
}
[data-front-theme="black"] .side-link .side-text {
  color:#bbb;
}
[data-front-theme="black"] .side-link .side-icon {
  color:#888;
}
[data-front-theme="black"] .side-link:hover {
  background:rgba(255,255,255,.06);
}
[data-front-theme="black"] .side-link:hover .side-text {
  color:#ddd;
}
[data-front-theme="black"] .side-link:hover .side-icon {
  color:#aaa;
}
[data-front-theme="black"] .side-link.active {
  background:rgba(255,255,255,.1);
}
[data-front-theme="black"] .side-link.active:hover {
  background:rgba(255,255,255,.14);
}
[data-front-theme="black"] .side-link.active .side-text,
[data-front-theme="black"] .side-link.active:hover .side-text {
  color:#fff;
}
[data-front-theme="black"] .side-link.active .side-icon,
[data-front-theme="black"] .side-link.active:hover .side-icon {
  color:#fff;
}
/* 子菜单项（非激活）保持可见 */
[data-front-theme="black"] .side-tree ul .side-link:not(.active) {
  color:#aaa;
}
[data-front-theme="black"] .side-tree ul .side-link:not(.active) .side-text {
  color:#aaa;
}
[data-front-theme="black"] .side-tree ul .side-link:not(.active):hover .side-text {
  color:#ddd;
}
[data-front-theme="black"] .side-count {
  background:rgba(255,255,255,.06);
  color:#888;
}
[data-front-theme="black"] .menu-panel {
  background:#1a1a1a;
  border-color:rgba(255,255,255,.08);
}
[data-front-theme="black"] .menu-item {
  background:#222;
  border-color:rgba(255,255,255,.08);
  color:#ccc;
}
[data-front-theme="black"] .menu-item:hover {
  background:rgba(255,255,255,.08);
}
[data-front-theme="black"] .menu-item.active {
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.2);
}
[data-front-theme="black"] .menu-item.active:hover {
  background:rgba(255,255,255,.16);
  color:#fff;
}
[data-front-theme="black"] .menu-link {
  color:#ccc;
}
[data-front-theme="black"] .menu-link:hover {
  background:rgba(255,255,255,.06);
  color:#fff;
}
/* 黑色主题下拉子菜单 */
[data-front-theme="black"] .top-submenu {
  background:#1a1a1a;
  border-color:rgba(255,255,255,.1);
  box-shadow:0 6px 20px rgba(0,0,0,.5);
}
[data-front-theme="black"] .top-submenu-item {
  color:#ccc !important;
}
[data-front-theme="black"] .top-submenu-item .top-menu-icon {
  color:#999 !important;
}
[data-front-theme="black"] .top-submenu-item .top-menu-name {
  color:#ccc !important;
}
[data-front-theme="black"] .top-submenu-item:hover {
  background:rgba(255,255,255,.12) !important;
  color:#fff !important;
}
[data-front-theme="black"] .top-submenu-item:hover .top-menu-icon,
[data-front-theme="black"] .top-submenu-item:hover .top-menu-name {
  color:#fff !important;
}
[data-front-theme="black"] .top-submenu-item.active {
  color:#fff !important;
  background:rgba(255,255,255,.15) !important;
}
[data-front-theme="black"] .top-submenu-item.active > .top-menu-icon,
[data-front-theme="black"] .top-submenu-item.active > .top-menu-name {
  color:#fff !important;
}
[data-front-theme="black"] .top-submenu-title {
  color:#888;
}
[data-front-theme="black"] .top-nested-submenu {
  background:#1a1a1a;
  border-color:rgba(255,255,255,.1);
  box-shadow:0 6px 20px rgba(0,0,0,.5);
}
/* 黑色主题：父菜单active状态下子菜单项保持可见 */
[data-front-theme="black"] .top-menu-item.active .top-submenu .top-submenu-item {
  color:#ccc !important;
}
[data-front-theme="black"] .top-menu-item.active .top-submenu .top-submenu-item:hover {
  color:#fff !important;
  background:rgba(255,255,255,.12) !important;
}
[data-front-theme="black"] .top-menu-item.active:hover {
  background:var(--front-p1);
}
/* 黑色主题：主菜单项样式 */
[data-front-theme="black"] .top-menu-item {
  color:#ccc;
}
[data-front-theme="black"] .top-menu-item .top-menu-icon {
  color:#888;
}
[data-front-theme="black"] .top-menu-item:hover {
  background:rgba(255,255,255,.08);
  color:#fff;
}
[data-front-theme="black"] .top-menu-item:hover .top-menu-icon {
  color:#bbb;
}
[data-front-theme="black"] .top-menu-item.active {
  background:var(--front-p1);
  color:#fff;
}
[data-front-theme="black"] .top-menu-item.active > .top-menu-icon,
[data-front-theme="black"] .top-menu-item.active > .top-menu-name {
  color:#fff;
}
[data-front-theme="black"] .staff-card {
  background:#1a1a1a;
  border-color:rgba(255,255,255,.08);
}
[data-front-theme="black"] .footer {
  background:rgba(26,26,26,.65);
  border-top-color:rgba(255,255,255,.06);
}
[data-front-theme="black"] .badge {
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.08);
  color:#ccc;
}
[data-front-theme="black"] .quick-cart-panel {
  background:#1a1a1a;
  border-color:rgba(255,255,255,.08);
}
[data-front-theme="black"] .auth-page {
  background:linear-gradient(160deg, #0a0a0a 0%, #111 50%, #1a1a1a 100%);
}
[data-front-theme="black"] .auth .card {
  background:#1a1a1a;
  border-color:rgba(255,255,255,.08);
}
[data-front-theme="black"] .auth-brand-text {
  color:#f5f5f5;
}
[data-front-theme="black"] .sidebar-resizer {
  border-right-color:rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(26,26,26,.65), rgba(26,26,26,.03));
}
[data-front-theme="black"] .resizer-handle {
  background:#222;
  border-color:rgba(255,255,255,.1);
  color:#666;
}
[data-front-theme="black"] .resizer-handle:hover {
  background:var(--front-p1,#4E5969);
  border-color:var(--front-p1,#4E5969);
  color:#fff;
}
/* 黑色主题：顶部导航栏样式 */
[data-front-theme="black"] .top-category-nav {
  background:#141414 !important;
  border-bottom-color:rgba(255,255,255,.08) !important;
}
[data-front-theme="black"] .top-brand-name {
  color:#f5f5f5;
}
[data-front-theme="black"] .top-brand-sub {
  color:#888;
}

/* ========== 前台布局样式 ========== */
/* 经典布局: 左侧导航+右侧内容（三列：侧栏 | 拖拽条 | 主区） */
[data-layout="classic"] .app-shell {
  grid-template-columns: 260px 10px 1fr;
  grid-template-rows: 1fr;
}
[data-layout="classic"] .app-shell.sidebar-drawer-closed {
  grid-template-columns: 64px 10px 1fr;
}

[data-layout="classic"] .sidebar {
  display: block;
  width: 260px;
  grid-row: 1;
}

[data-layout="classic"] .sidebar-overlay {
  display: none;
}

[data-layout="classic"] .sidebar-resizer {
  grid-column: 2;
  grid-row: 1;
  display: block;
}

[data-layout="classic"] .top-category-nav {
  display: none;
}

/* 经典布局下主内容区域占据剩余空间 */
[data-layout="classic"] .app-main {
  grid-column: 3;
  grid-row: 1;
}

/* 顶部导航布局: 顶部导航+下方内容区（单列） */
[data-layout="top-nav"] .app-shell {
  grid-template-columns: 1fr;
}

[data-layout="top-nav"] .sidebar {
  display: none;
}

[data-layout="top-nav"] .sidebar-resizer {
  display: none;
}

[data-layout="top-nav"] .sidebar-overlay {
  grid-column: 1;
}

[data-layout="top-nav"] .top-category-nav {
  grid-column: 1;
  grid-row: 1;
}

[data-layout="top-nav"] .app-main {
  grid-column: 1;
  grid-row: 2;
}

/* 顶部导航布局下隐藏 topbar（搜索栏） */
[data-layout="top-nav"] .topbar {
  display: none;
}

/* Logo区域风格选择器按钮在经典布局中隐藏 */
[data-layout="classic"] #frontThemeBtn2 {
  display: none;
}



/* ========== 顶部分类导航样式 ========== */
.top-category-nav {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.top-category-container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 18px;
}

.top-category-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  gap: 16px;
}

.top-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.top-header-right {
  display: flex;
  align-items: center;
}

/* 主菜单区域 */
.top-main-menu {
  min-width: 0;
}

.top-menu-items {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.top-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: var(--text);
  transition: all 0.2s;
  cursor: pointer;
  white-space: nowrap;
}

.top-menu-item:hover {
  background: var(--bg);
}

.top-menu-item.active {
  background: var(--front-p1, #3b82f6);
  color: #fff;
}
.top-menu-item.active > .top-menu-icon,
.top-menu-item.active > .top-menu-name {
  color: #fff;
}
.top-submenu-item.active {
  background: var(--front-p1, #3b82f6);
  color: #fff;
}
.top-submenu-item.active > .top-menu-icon,
.top-submenu-item.active > .top-menu-name {
  color: #fff;
}

.top-menu-item.has-children {
  cursor: pointer;
}

.top-menu-icon {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
}

.top-menu-item:hover > .top-menu-icon {
  color: var(--text);
}

.top-menu-name {
  font-size: 13px;
}

/* 子菜单样式 */
.top-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 0;
  margin-top: 4px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  z-index: 1000;
}

.top-menu-item.has-children:hover .top-submenu,
.top-menu-item.has-children:focus-within .top-submenu {
  display: block;
}

.top-submenu-section {
  padding: 0 12px 8px;
  border-bottom: 1px solid var(--border);
}

.top-submenu-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.top-submenu-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  padding: 4px 0;
}

.top-submenu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--text);
  border-radius: 4px;
  font-size: 12px;
  transition: background 0.2s;
}

.top-submenu-item:hover {
  background: var(--bg);
}

.top-submenu-item.has-children {
  position: relative;
}

.top-nested-submenu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 180px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 0;
  margin-left: 4px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  z-index: 1001;
}

.top-submenu-item.has-children:hover .top-nested-submenu {
  display: block;
}

/* 顶部导航菜单样式 */
.location-selector-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 2000;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}

.location-selector-modal.open {
  display: flex;
}

.location-selector-content {
  background: var(--panel);
  border-radius: 12px;
  width: 90%;
  max-width: 420px;
  max-height: 75vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.location-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.location-selector-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.location-selector-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}

.location-selector-close:hover {
  background: rgba(0,0,0,0.05);
  color: var(--text);
}

/* 位置Tab切换 */
.location-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  gap: 0;
  flex-shrink: 0;
}

.location-tab {
  padding: 12px 16px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  border: none;
  background: none;
  position: relative;
  font-weight: 500;
}

.location-tab:hover {
  color: var(--text);
}

.location-tab.active {
  color: var(--front-p1);
}

.location-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: var(--front-p1);
  border-radius: 1px;
}

.location-tab.disabled {
  color: var(--border);
  cursor: not-allowed;
}

/* 当前选择显示 */
.location-current {
  padding: 12px 20px;
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.location-current-label {
  font-size: 12px;
  color: var(--muted);
}

.location-current-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 13px;
  color: var(--text);
}

.location-current-item .remove {
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  margin-left: 2px;
}

.location-current-item .remove:hover {
  color: #ef4444;
}

/* 搜索框 */
.location-search-wrap {
  padding: 12px 20px;
  flex-shrink: 0;
}

.location-search-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
}

.location-search-input:focus {
  outline: none;
  border-color: var(--front-p1);
  box-shadow: 0 0 0 3px rgba(55,65,81,0.08);
}

/* 热门推荐 */
.location-hot {
  padding: 0 20px 12px;
  flex-shrink: 0;
}

.location-hot-title {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 500;
}

.location-hot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.location-hot-item {
  padding: 6px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
}

.location-hot-item:hover {
  border-color: var(--front-p1);
  color: var(--front-p1);
}

/* 列表区域 */
.location-list-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 20px;
  min-height: 180px;
}

.location-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.location-list-item {
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.location-list-item:hover {
  background: var(--bg);
}

.location-list-item.selected {
  background: rgba(55,65,81,0.08);
  color: var(--front-p1);
  font-weight: 500;
}

.location-list-item .arrow {
  color: var(--muted);
  font-size: 12px;
}

.location-list-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/* 底部确认 */
.location-selector-footer {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.location-selector-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.location-selector-cancel {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}

.location-selector-cancel:hover {
  background: rgba(0,0,0,0.05);
}

.location-selector-confirm {
  background: var(--front-p1);
  color: white;
}

.location-selector-confirm:hover {
  background: var(--front-p2);
}

/* 顶部导航菜单样式 */
.top-category-nav .menu {
  position: relative;
}

.top-category-nav .menu-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  background: none;
  color: var(--text);
}

.top-category-nav .menu-btn:hover {
  background: var(--bg);
}

.top-category-nav .menu-panel {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 200px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 0;
  margin-top: 4px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  z-index: 100;
  display: none;
}

.top-category-nav .menu[open] .menu-panel {
  display: block;
}

.top-category-nav .menu-link {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: var(--text);
  transition: background 0.2s;
}

.top-category-nav .menu-link:hover {
  background: var(--bg);
}

.top-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  font-weight: 700;
}

.top-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--front-p1), var(--front-p2));
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-brand-text {
  display: flex;
  flex-direction: column;
}

.top-brand-name {
  font-size: 16px;
  font-weight: 700;
}

.top-brand-sub {
  font-size: 11px;
  margin-top: -2px;
}

.top-category-tabs {
  border-top: 1px solid var(--border);
}



/* ========== 前台风格选择器 ========== */
.front-theme-toggle {
  width:20px;
  height:20px;
  padding: 0;
  min-width: unset;
  border:none;
  background:transparent;
  color:var(--gray-light);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  flex-shrink:0;
  transition:color .15s;
  padding:0;
  opacity:0.5;
}
.front-theme-toggle:hover {
  color:var(--ink);
  opacity:1;
}
.front-theme-panel {
  display:none;
  position:fixed;
  top:52px;
  left:16px;
  width:300px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06);
  padding:14px;
  z-index:1000;
}
.front-theme-panel.open { display:block; }
.front-theme-section { margin-bottom:10px; }
.front-theme-section:last-child { margin-bottom:0; }
.front-theme-label {
  font-size:12px;
  font-weight:600;
  color:#6b7280;
  margin-bottom:8px;
}
.front-theme-grid { display:flex; gap:6px; flex-wrap:wrap; }
.front-theme-chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:6px;
  border:1px solid #e5e7eb;
  background:#fff;
  font-size:12px;
  font-weight:500;
  color:#374151;
  cursor:pointer;
  transition:all .15s;
  line-height:1.4;
  min-width:70px;
  justify-content:center;
}
.front-theme-chip:hover {
  border-color:#d1d5db;
  background:#f9fafb;
}
.front-theme-chip.active {
  border-color:var(--front-p1);
  background:#f3f4f6;
  font-weight:600;
}
.front-theme-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
  flex-shrink:0;
}

/* ========== 年轻活力配色方案 ========== */
/* 活力粉 */
[data-front-theme="pink"] {
  --front-p1:#EC4899;
  --front-p2:#DB2777;
  --front-shadow:rgba(236,72,153,.25);
  --front-border:rgba(236,72,153,.35);
}

/* 阳光黄 */
[data-front-theme="yellow"] {
  --front-p1:#F59E0B;
  --front-p2:#D97706;
  --front-shadow:rgba(245,158,11,.25);
  --front-border:rgba(245,158,11,.35);
}

/* 清新薄荷 */
[data-front-theme="mint"] {
  --front-p1:#10B981;
  --front-p2:#059669;
  --front-shadow:rgba(16,185,129,.25);
  --front-border:rgba(16,185,129,.35);
}

/* 活力橙 */
[data-front-theme="orange"] {
  --front-p1:#F97316;
  --front-p2:#EA580C;
  --front-shadow:rgba(249,115,22,.25);
  --front-border:rgba(249,115,22,.35);
}

/* 热情红 */
[data-front-theme="red"] {
  --front-p1:#EF4444;
  --front-p2:#DC2626;
  --front-shadow:rgba(239,68,68,.25);
  --front-border:rgba(239,68,68,.35);
}

/* 珊瑚橙 */
[data-front-theme="coral"] {
  --front-p1:#F97316;
  --front-p2:#EA580C;
  --front-shadow:rgba(249,115,22,.25);
  --front-border:rgba(249,115,22,.35);
}

/* ========== 侧边栏搜索功能样式 ========== */
/* 侧边栏搜索框样式 */
.side-search-container {
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.side-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.side-search-icon {
  position: absolute;
  left: 10px;
  color: var(--muted);
  pointer-events: none;
  z-index: 2;
}

.side-search-input {
  width: 100%;
  padding: 8px 32px 8px 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  transition: all 0.2s;
}

.side-search-input:focus {
  outline: none;
  border-color: var(--front-p1);
  box-shadow: 0 0 0 3px rgba(55,65,81,0.1);
}

.side-search-clear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 2;
}

.side-search-input:not(:placeholder-shown) + .side-search-clear,
.side-search-input:focus + .side-search-clear {
  opacity: 1;
}

.side-search-clear:hover {
  color: var(--text);
  background: rgba(0,0,0,0.05);
}

/* 分类过滤隐藏效果 */
.side-tree li.filtered-out {
  display: none;
}

/* ========== 首页重设计样式 V3 ========== */
.hp {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* Hero 精简 */
.hp-hero-slim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 8px;
}
.hp-hero-tagline {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.5px;
}
.hp-hero-link {
  font-size: 13px;
  color: var(--front-p1);
  font-weight: 600;
  text-decoration: none;
}
.hp-hero-link:hover { text-decoration: underline; }

/* Section 通用 */
.hp-section {
  margin-bottom: 24px;
  padding: 20px;
}
.hp-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.hp-section-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hp-section-title svg { color: var(--front-p1); }

/* ---- 轮播 V4 (每页2技师) ---- */
.hp-featured-carousel {
  position: relative;
  overflow: hidden;
}
.hp-carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}
.hp-carousel-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  min-width: 0;
}

/* 单张技师+好评合一卡片 */
.hp-feat-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.hp-feat-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.07);
  transform: translateY(-2px);
}

/* 技师信息区 */
.hp-feat-tech {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hp-feat-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--border);
  background: linear-gradient(135deg, var(--front-p1), var(--front-p2));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.2s;
}
.hp-feat-avatar:hover { border-color: var(--front-p1); }
.hp-feat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hp-feat-info { flex: 1; min-width: 0; }
.hp-feat-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.hp-feat-name-link { text-decoration: none; color: inherit; }
.hp-feat-name-link:hover { color: var(--front-p1); }
.hp-feat-rating { font-size: 12px; }
.hp-star { color: var(--front-p1); font-weight: 600; }
.hp-feat-bio { margin-top: 3px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 评价区 - 大引号 */
.hp-feat-review {
  flex: 1;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.hp-review-quoted {
  position: relative;
  padding: 0 28px;
}
.hp-quote-mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 48px;
  line-height: 1;
  color: var(--front-p1);
  opacity: 0.22;
  user-select: none;
  position: absolute;
}
.hp-quote-open {
  top: -6px;
  left: -4px;
}
.hp-quote-close {
  bottom: -24px;
  right: -4px;
}
.hp-feat-review-body {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 8px;
}
.hp-feat-stars { color: #F59E0B; font-size: 13px; letter-spacing: 1px; }
.hp-feat-review-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* 导航点 */
.hp-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}
.hp-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: all 0.25s ease;
  border: none;
  padding: 0;
}
.hp-carousel-dot.active {
  width: 22px;
  border-radius: 4px;
  background: var(--front-p1);
}

/* ---- 需求 Tag 云 ---- */
.hp-demand-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.hp-cloud-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  cursor: default;
  transition: transform 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.hp-cloud-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}
.hp-cloud-icon { display: inline-flex; align-items: center; flex-shrink: 0; }
.hp-cloud-name { font-weight: 600; }
.hp-cloud-val { font-weight: 700; }
.hp-cloud-opps { font-weight: 500; opacity: 0.7; }

/* 尺寸变化 */
.hp-cloud-sm { padding: 8px 14px; font-size: 12px; }
.hp-cloud-md { padding: 10px 18px; font-size: 14px; }
.hp-cloud-lg { padding: 12px 22px; font-size: 16px; }

/* 10 种彩色方案 - 柔和背景 + 深色文字 */
.hp-cloud-c1  { background: #EEF2FF; color: #3730A3; }  /* 靛蓝 */
.hp-cloud-c2  { background: #FEF3C7; color: #92400E; }  /* 琥珀 */
.hp-cloud-c3  { background: #D1FAE5; color: #065F46; }  /* 翡翠 */
.hp-cloud-c4  { background: #FCE7F3; color: #9D174D; }  /* 粉色 */
.hp-cloud-c5  { background: #E0E7FF; color: #3B82F6; }  /* 蓝色 */
.hp-cloud-c6  { background: #FEE2E2; color: #991B1B; }  /* 红色 */
.hp-cloud-c7  { background: #CCFBF1; color: #115E59; }  /* 青色 */
.hp-cloud-c8  { background: #FEF9C3; color: #854D0E; }  /* 黄色 */
.hp-cloud-c9  { background: #EDE9FE; color: #5B21B6; }  /* 紫色 */
.hp-cloud-c10 { background: #FFEDD5; color: #9A3412; }  /* 橙色 */

/* ---- 薪资柱状图 V3 ---- */
.hp-salary-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hp-bar-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hp-bar-label {
  width: 120px;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.hp-bar-label svg { color: var(--muted); flex-shrink: 0; }
.hp-bar-track {
  flex: 1;
  height: 24px;
  background: color-mix(in srgb, var(--border) 40%, var(--panel));
  border-radius: 6px;
  overflow: hidden;
}
.hp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--front-p1), var(--front-p2));
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 10px;
  min-width: 60px;
  transition: width 0.6s ease;
}
.hp-bar-val {
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* ---- 故事列表 ---- */
.hp-avatar-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--front-p1), var(--front-p2));
  color: #fff;
  font-size: 24px;
  font-weight: 700;
}
.hp-story-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
a.hp-story-card {
  text-decoration: none;
  color: inherit;
}
.hp-story-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  transition: box-shadow 0.2s, transform 0.2s;
}
.hp-story-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transform: translateX(3px);
}
.hp-story-avatar {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg);
}
.hp-story-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hp-story-featured {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--front-p1);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}
.hp-story-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hp-story-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text);
}
.hp-story-excerpt {
  font-size: 13px;
  line-height: 1.6;
  flex: 1;
  margin-bottom: 8px;
}
.hp-story-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hp-story-tags { display: flex; gap: 6px; }
.hp-story-meta { display: flex; gap: 14px; }

/* ---- 故事详情页 V4 (大气版) ---- */
.story-detail-v4 {
  max-width: 860px;
  padding: 40px 24px;
}
.story-hero {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.story-hero-badge {
  margin-bottom: 12px;
  display: inline-block;
}
.story-detail-v4 .story-title {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.story-detail-v4 .story-author-avatar {
  width: 48px;
  height: 48px;
}
.story-detail-v4 .story-author-name { font-size: 16px; }

/* 前言引述块 */
.story-foreword {
  position: relative;
  margin: 0 0 36px;
  padding: 28px 40px;
  background: linear-gradient(135deg, rgba(55,65,81,0.04), rgba(55,65,81,0.02));
  border-radius: 16px;
  border-left: 4px solid var(--front-p1);
}
.story-fw-quote {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 64px;
  line-height: 1;
  color: var(--front-p1);
  opacity: 0.2;
  user-select: none;
  position: absolute;
}
.story-fw-open {
  top: 8px;
  left: 8px;
}
.story-fw-close {
  bottom: -12px;
  right: 12px;
}
.story-fw-text {
  font-size: 16px;
  line-height: 2;
  color: var(--text);
  font-style: italic;
  margin: 0;
}

/* 正文增强 */
.story-detail-v4 .story-content {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.01em;
  margin-bottom: 28px;
}

.story-detail-v4 .story-more-title {
  font-size: 18px;
}

@media (max-width: 600px) {
  .story-detail-v4 { padding: 24px 14px; }
  .story-detail-v4 .story-title { font-size: 22px; }
  .story-foreword { padding: 20px 24px; }
  .story-fw-quote { font-size: 48px; }
  .story-fw-text { font-size: 14px; }
}
.story-detail {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 16px;
}
.story-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 20px;
}
.story-back:hover { color: var(--front-p1); }
.story-header {
  margin-bottom: 24px;
}
.story-title {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 16px;
  line-height: 1.4;
}
.story-author-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.story-author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--front-p1), var(--front-p2));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
.story-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.story-author-name { font-weight: 600; font-size: 15px; }
.story-author-meta { font-size: 12px; color: var(--muted); }
.story-content {
  font-size: 15px;
  line-height: 1.9;
  color: var(--text);
  margin-bottom: 24px;
}
.story-tags-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.story-stats-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.story-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--muted);
}
.story-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.story-like-btn:hover {
  border-color: var(--front-p1);
  color: var(--front-p1);
}
.story-like-btn.liked {
  background: var(--front-p1);
  color: #fff;
  border-color: var(--front-p1);
}
.story-more {
  margin-top: 32px;
}
.story-more-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}

/* ---- 气泡通知 ---- */
.hp-bubble-stack {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 60;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
  max-width: 280px;
}
.hp-bubble {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: hpSlideIn 0.3s ease, hpFadeOut 0.5s ease 2.5s forwards;
  pointer-events: auto;
}
@keyframes hpSlideIn {
  from { transform: translateX(300px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes hpFadeOut {
  to { opacity: 0; transform: translateX(20px); }
}
.hp-bubble-ava {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--front-p1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.hp-bubble-text {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}

/* ---- 响应式 ---- */
@media (max-width: 900px) {
  .hp-carousel-slide { grid-template-columns: 1fr; }
  .hp-bar-label { width: 100px; font-size: 12px; }
}

@media (max-width: 600px) {
  .hp-bubble-stack {
    right: 12px;
    bottom: 70px;
    max-width: 220px;
  }
  .hp-bar-label { width: 80px; }
  .hp-story-card { flex-direction: column; }
  .hp-story-avatar {
    width: 100%;
    height: 140px;
    border-radius: 8px;
  }
  .story-detail { padding: 20px 12px; }
  .story-title { font-size: 20px; }
  .hp-cloud-tag { gap: 4px; }
  .hp-cloud-sm { padding: 6px 10px; font-size: 11px; }
  .hp-cloud-md { padding: 8px 14px; font-size: 12px; }
  .hp-cloud-lg { padding: 10px 16px; font-size: 14px; }
}

/* ---- 前台底部版权 ---- */
.site-footer {
  padding: 20px 16px;
  border-top: 1px solid var(--border);
  text-align: center;
  margin-top: 32px;
}
.site-footer-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}
.site-footer-inner a {
  color: var(--muted);
  text-decoration: none;
}
.site-footer-inner a:hover {
  color: var(--front-p1);
  text-decoration: underline;
}

/* ---- 技师公开资料页 (大气版) ---- */
.tp-public {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 16px;
}
.tp-hero {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 36px 32px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  margin-bottom: 28px;
}
.tp-hero-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--front-p1), var(--front-p2));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  border: 4px solid #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.tp-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tp-hero-info { flex: 1; min-width: 0; }
.tp-hero-name {
  font-size: 26px;
  font-weight: 900;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  letter-spacing: -0.01em;
}
.tp-verified-badge {
  font-size: 12px;
  font-weight: 600;
  color: #065f46;
  background: #d1fae5;
  padding: 3px 10px;
  border-radius: 999px;
}
.tp-hero-bio {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 14px;
}
.tp-hero-stats {
  display: flex;
  align-items: center;
  gap: 20px;
}
.tp-hero-stat { text-align: center; }
.tp-hero-stat-num {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--front-p1);
  line-height: 1.2;
}
.tp-hero-stat-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.tp-hero-stat-divider {
  width: 1px;
  height: 30px;
  background: var(--border);
}

/* 内容区 */
.tp-body { display: flex; flex-direction: column; gap: 16px; }
.tp-card { padding: 20px 24px; }
.tp-card-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.tp-bio-text {
  font-size: 15px;
  line-height: 1.9;
  color: var(--text);
}
.tp-tags-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.tp-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tp-skill-tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--front-p1), var(--front-p2));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

/* 好评列表 */
.tp-review-list { display: flex; flex-direction: column; gap: 0; }
.tp-rv {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.tp-rv:last-child { border-bottom: none; padding-bottom: 0; }
.tp-rv:first-child { padding-top: 0; }
.tp-rv-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.tp-rv-stars { color: #F59E0B; font-size: 14px; }
.tp-rv-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

@media (max-width: 700px) {
  .tp-hero { flex-direction: column; text-align: center; padding: 28px 20px; }
  .tp-hero-name { justify-content: center; }
  .tp-hero-avatar { width: 80px; height: 80px; font-size: 32px; }
  .tp-hero-stats { justify-content: center; }
  .tp-tags-grid { grid-template-columns: 1fr; }
  .tp-public { padding: 20px 12px; }
  .tp-hero-name { font-size: 22px; }
}

/* ── anchor-nav 标签导航（全局复用） ── */
.anchor-nav-wrapper {
  position: sticky; top: 60px; z-index: 90;
  background: var(--bg); padding: 28px 0 12px;
  margin: -24px -20px 24px; padding-left: 20px; padding-right: 20px;
  border-bottom: 1px solid var(--border);
}
.anchor-nav {
  display: flex; gap: 0; background: var(--panel);
  border-radius: 8px; overflow: visible;
  border: 1px solid var(--border); position: relative;
}
.anchor-nav-item {
  flex: 1; height: 6px;
  background: color-mix(in srgb, var(--front-p1) 12%, transparent);
  cursor: pointer; transition: background 0.2s;
  position: relative; text-decoration: none; display: block;
}
.anchor-nav-item:not(:last-child) { border-right: 1px solid var(--panel); }
.anchor-nav-item:hover { background: color-mix(in srgb, var(--front-p1) 28%, transparent); }
.anchor-nav-item.active { background: var(--front-p1); }
.anchor-nav-label {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: var(--muted); white-space: nowrap;
  padding-bottom: 6px; transition: color 0.2s;
}
.anchor-nav-item:hover .anchor-nav-label { color: var(--front-p1); }
.anchor-nav-item.active .anchor-nav-label { color: var(--front-p1); font-weight: 600; }
.anchor-nav-count { font-size: 11px; color: var(--muted); margin-left: 2px; }
.anchor-nav-item.active .anchor-nav-count { color: var(--front-p1); }

/* ── 技师分配弹窗 ── */
.tech-candidate-card {
  display: flex; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  margin-bottom: 8px; cursor: pointer; transition: border-color .15s, background .15s;
}
.tech-candidate-card:hover { border-color: var(--front-p1); background: rgba(22,119,255,0.02); }
.tech-candidate-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #e5e7eb, #d1d5db); flex-shrink: 0; overflow: hidden;
}
.tech-candidate-info { flex: 1; min-width: 0; }

/* ========== 留言评论系统 ========== */
.comment-threads {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.comment-section-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}
.comment-thread {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.comment-thread:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.comment-item {
  display: flex;
  gap: 10px;
}
.comment-item.reply {
  margin-left: 42px;
  margin-top: 12px;
}
.comment-item.is-admin .comment-main {
  background: linear-gradient(135deg, rgba(22,119,255,0.04), rgba(22,119,255,0.08));
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--front-p1);
}
.comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--muted-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--muted);
  flex-shrink: 0;
}
.comment-avatar.small {
  width: 26px;
  height: 26px;
  font-size: 11px;
}
.comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comment-main {
  flex: 1;
  min-width: 0;
}
.comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.comment-author {
  font-size: 13px;
  font-weight: 500;
}
.comment-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}
.comment-badge.admin {
  background: var(--front-p1);
  color: #fff;
}
.comment-time {
  font-size: 12px;
}
.comment-content {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  word-break: break-word;
}
.comment-images {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.comment-image {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.comment-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comment-actions {
  margin-top: 6px;
}
.comment-reply-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 0;
}
.comment-reply-btn:hover {
  color: var(--front-p1);
}

/* 回复列表折叠 */
.comment-replies {
  margin-top: 8px;
}
.comment-replies.collapsible.collapsed .replies-list {
  display: none;
}
.comment-replies.collapsible.collapsed .replies-toggle {
  display: block;
}
.comment-replies .replies-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--front-p1);
  font-size: 12px;
  cursor: pointer;
  padding: 6px 0;
  margin-left: 42px;
}
.comment-replies .replies-toggle:hover {
  text-decoration: underline;
}

/* 回复表单 */
.reply-form-wrap {
  margin-top: 12px;
  margin-left: 42px;
}
.reply-form {
  background: var(--muted-bg);
  border-radius: 8px;
  padding: 12px;
}
.reply-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

/* 评论表单 */
.comment-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.comment-input-wrap {
  position: relative;
}
.comment-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  background: var(--panel);
  color: var(--text);
}
.comment-textarea.small {
  min-height: 60px;
  padding: 8px 10px;
  font-size: 13px;
}
.comment-textarea:focus {
  outline: none;
  border-color: var(--front-p1);
}
.comment-toolbar {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.comment-tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.comment-tool-btn:hover {
  border-color: var(--front-p1);
  color: var(--front-p1);
  background: rgba(22,119,255,0.04);
}
.comment-image-preview {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.comment-image-preview:empty {
  display: none;
}
.comment-preview-item {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.comment-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comment-preview-item .remove-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.comment-submit {
  align-self: flex-end;
}

/* 表情选择器 */
.emoji-picker-panel {
  position: fixed;
  z-index: 1000;
  width: 320px;
  max-height: 300px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  overflow: hidden;
}
.emoji-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--muted-bg);
}
.emoji-tab {
  flex: 1;
  padding: 8px 4px;
  border: none;
  background: none;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.emoji-tab:hover {
  color: var(--text);
}
.emoji-tab.active {
  color: var(--front-p1);
  font-weight: 600;
  background: var(--panel);
}
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 8px;
  max-height: 240px;
  overflow-y: auto;
}
.emoji-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s;
}
.emoji-item:hover {
  background: var(--muted-bg);
}

/* ========================================
   左右分栏布局
   ======================================== */
.item-detail-wrapper {
  display: flex;
  gap: 24px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px 18px;
  align-items: flex-start;
}
.item-detail-left {
  flex: 1;
  min-width: 0;
}
.item-detail-sidebar {
  width: 340px;
  flex-shrink: 0;
}
.sidebar-sticky {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 侧边栏价格卡片 */
.sidebar-price-card {
  padding: 20px;
}
.sidebar-price-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.sidebar-price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}
.sidebar-price {
  font-size: 28px;
  font-weight: 700;
  color: #059669;
}
.sidebar-price-unit {
  font-size: 14px;
}
.sidebar-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}
.sidebar-rating .star {
  color: #d1d5db;
  font-size: 13px;
}
.sidebar-rating .star.filled {
  color: #fbbf24;
}
.sidebar-rating-text {
  margin-left: 4px;
  font-size: 12px;
}
.sidebar-price-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.sidebar-chat-btn-inline {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; padding: 6px 12px;
}
.sidebar-book-btn-inline {
  font-size: 13px; padding: 6px 16px;
}

/* 侧边栏操作按钮 */
.sidebar-action-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sidebar-book-btn {
  width: 100%;
  height: 44px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
}
.sidebar-chat-btn {
  width: 100%;
  height: 40px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
}

/* 侧边栏服务保障 */
.sidebar-guarantee {
  padding: 16px;
}
.sidebar-guarantee-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 10px;
}
.sidebar-guarantee-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar-guarantee-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}

/* 移动端底部操作栏 */
.mobile-action-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
  gap: 10px;
}
.mobile-action-chat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 11px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 16px;
  min-width: 56px;
}
.mobile-action-chat svg {
  color: var(--front-p1);
}
.mobile-action-book {
  flex: 1;
  height: 42px;
  background: var(--front-p1);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.mobile-action-book:active {
  opacity: 0.85;
}

/* ========================================
   预约弹窗
   ======================================== */
.booking-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.booking-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.booking-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.booking-modal-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}
.booking-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--surface);
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.booking-modal-close:hover {
  background: #e5e7eb;
}
.booking-modal-body {
  padding: 20px;
}
.booking-item-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: 10px;
  margin-bottom: 20px;
}
.booking-item-name {
  font-size: 14px;
  font-weight: 600;
}
.booking-item-price {
  font-size: 16px;
  font-weight: 700;
  color: #059669;
}
.booking-field {
  margin-bottom: 16px;
}
.booking-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}
.booking-label .required {
  color: #ef4444;
}
.booking-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  background: #fff;
  outline: none;
  font-family: var(--font);
}
.booking-input:focus {
  border-color: var(--front-p1);
  box-shadow: 0 0 0 3px rgba(55,65,81,0.1);
}
.booking-textarea {
  height: auto;
  padding: 10px 12px;
  resize: vertical;
}
.booking-submit-btn {
  width: 100%;
  height: 44px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  margin-top: 8px;
}
.booking-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 合同条款展示 */
.contract-display {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 14px 16px;
  background: #f8fafc;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  color: #334155;
}
.contract-agree-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
  line-height: 1.5;
}
.contract-agree-label input[type=checkbox] {
  margin-top: 3px;
  flex-shrink: 0;
  cursor: pointer;
}

/* ========================================
   聊天窗口
   ======================================== */
.chat-window {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 380px;
  height: 520px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
  z-index: 999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--front-p1);
  color: #fff;
}
.chat-header-title {
  font-size: 15px;
  font-weight: 600;
}
.chat-header-close {
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255,255,255,0.15);
  border-radius: 6px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.chat-header-close:hover {
  background: rgba(255,255,255,0.25);
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-welcome {
  text-align: center;
  padding: 20px 0;
}
.chat-welcome-text {
  display: inline-block;
  padding: 8px 16px;
  background: var(--surface);
  border-radius: 16px;
  font-size: 13px;
  color: var(--muted);
}
.chat-msg {
  display: flex;
  gap: 8px;
  max-width: 85%;
}
.chat-msg.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.chat-msg.admin,
.chat-msg.system {
  align-self: flex-start;
}
.chat-msg-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}
.chat-msg.user .chat-msg-avatar {
  background: var(--front-p1);
  color: #fff;
}
.chat-msg-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}
.chat-msg.user .chat-msg-bubble {
  background: var(--front-p1);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg.admin .chat-msg-bubble,
.chat-msg.system .chat-msg-bubble {
  background: var(--surface);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.chat-msg-time {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  padding: 4px 0;
}
.chat-input-area {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  align-items: flex-end;
}
.chat-input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  resize: none;
  outline: none;
  max-height: 80px;
  font-family: var(--font);
  line-height: 1.4;
}
.chat-input:focus {
  border-color: var(--front-p1);
}
.chat-send-btn {
  width: 38px;
  height: 38px;
  border: none;
  background: var(--front-p1);
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-send-btn:hover {
  opacity: 0.85;
}
.chat-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ========================================
   响应式：移动端适配
   ======================================== */
@media (max-width: 1024px) {
  .item-detail-wrapper {
    flex-direction: column;
    padding: 16px 12px;
  }
  .item-detail-sidebar {
    width: 100%;
    display: none;
  }
  .mobile-action-bar {
    display: flex;
  }
  /* 留出底部操作栏空间 */
  .item-detail-left {
    padding-bottom: 70px;
  }
  .chat-window {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    max-height: 100vh;
  }
}