/* 标题行右侧：当前音效小卡片 */
.snd-card{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;
  padding:8px 11px;border-radius:13px;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line-2);
  transition:background .18s,border-color .18s;
}
.snd-card:active{background:#f0f0f2;}
.snd-card .ic{flex:0 0 15px;width:15px;height:15px;color:var(--gold-dark);}
.snd-card b{font-size:11.5px;font-weight:500;color:var(--ink-2);white-space:nowrap;letter-spacing:.02em;}

/* 音效列表（叠在弹窗之上再拉一层） */
.snd-mask{z-index:340;}
.snd-now{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:18px 0 14px;padding:13px 15px;border-radius:15px;
  background:linear-gradient(135deg,rgba(196,161,90,.15),rgba(196,161,90,.04));
  border:1px solid rgba(196,161,90,.34);
}
.snd-now span{font-size:10px;letter-spacing:.18em;color:var(--gold-dark);}
.snd-now b{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--ink);letter-spacing:.05em;}
.snd-list{display:flex;flex-direction:column;gap:8px;margin-bottom:22px;}
.snd-item{
  display:flex;align-items:center;gap:11px;
  padding:12px 14px;border-radius:15px;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line-2);
  transition:background .16s,border-color .16s;
}
.snd-item:active{background:#f0f0f2;}
.snd-item.on{background:#fff;border-color:var(--gold);box-shadow:0 8px 20px -16px rgba(160,130,70,1);}
.snd-item .meta{flex:1;min-width:0;}
.snd-item .nm{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-2);letter-spacing:.04em;}
.snd-item .nm .rec{
  font-style:normal;font-size:9px;letter-spacing:.06em;
  padding:1.5px 6px;border-radius:999px;
  color:var(--gold-dark);background:rgba(196,161,90,.16);
  border:1px solid rgba(196,161,90,.28);
}
.snd-item .ds{display:block;margin-top:3px;font-size:11px;color:var(--muted);letter-spacing:.02em;}
.snd-item .tick{
  flex:0 0 18px;width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
}
.snd-item .tick svg{width:11px;height:11px;color:transparent;transition:color .16s;}
.snd-item.on .tick{border-color:var(--gold);background:var(--gold);}
.snd-item.on .tick svg{color:#fff;}

/* ===== 音效面板的高度（R57 站长要求）=====
   站长：这个面板**不要拉满全屏**、**比半屏略高一点**就行。
   只改 .snd-mask 这一层 —— .sheet 是手围 / 珠宝详情 / 确认弹窗共用的皮，公共尺寸不动。
   用 % 不用 vh：.sheet-mask 是铺满手机壳的那层（position:absolute;inset:0），
   百分比高度才对得上「半屏」的观感（手机壳 ≈ 屏幕高）。
   58% ≈ 半屏再高一点点；9 个音效排下来装不下，所以改成「头 / 正在使用中 / 完成」都钉住、
   只有中间那列音效自己在面板里滚 —— 不会再把「完成」按钮顶到屏幕外（原来整张 .sheet 一起滚）。 */
.snd-mask .sheet{
  height:58%;max-height:58%;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.snd-mask .sheet-hd,
.snd-mask .snd-now,
.snd-mask .sheet-ft{flex:0 0 auto;}
.snd-mask .snd-list{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  margin-bottom:12px;
  padding-right:2px;                             /* 给「使用中」那圈选中描边留一点余量，免得贴着滚动边缘 */
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.snd-mask .snd-list::-webkit-scrollbar{display:none;}
.sheet-body{margin:20px 0 22px;display:flex;flex-direction:column;gap:13px;}
.grp{display:flex;flex-direction:column;gap:7px;}
.glab{font-size:11px;color:var(--muted);letter-spacing:.14em;padding-left:2px;}
.fld{
  display:flex;align-items:center;gap:10px;
  padding:13px 16px;border-radius:15px;
  background:var(--bg-2);border:1px solid var(--line-2);
}
.fld > span{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;
  font-size:13px;color:var(--ink-2);letter-spacing:.06em;
}
.fld.hl{background:#fff;border-color:rgba(196,161,90,.42);box-shadow:0 10px 24px -18px rgba(160,130,70,.9);}
.fld .auto{
  font-style:normal;font-size:9.5px;white-space:nowrap;
  padding:2px 7px;border-radius:999px;
  color:var(--gold-dark);background:rgba(196,161,90,.15);
}
.fld .auto.manual{color:var(--muted);background:rgba(0,0,0,.05);}
.fld .inp{flex:1;display:flex;align-items:baseline;gap:5px;justify-content:flex-end;}
.fld input{
  width:80px;border:none;outline:none;background:none;text-align:right;
  font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);
}
