/* 方言语料库 —— 录音间专用样式，承接主站墨青+朱砂设计语言 */

.view { display: none; }
.view.active { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.steps { display: flex; gap: 8px; justify-content: center; margin: 4px 0 30px; flex-wrap: wrap; }
.steps .s {
  font-size: 13px; color: var(--ink-faint); padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--glass);
}
.steps .s.on { color: var(--cinnabar); border-color: var(--cinnabar); box-shadow: var(--glow-cinnabar); }
.steps .s.done { color: #7fd6ac; border-color: rgba(127,214,172,.35); }

.field { margin: 16px 0; }
.field label { display: block; font-size: 14px; color: var(--ink-soft); margin-bottom: 6px; }
.field input, .field select {
  width: 100%; padding: 11px 14px; font-size: 16px; font-family: inherit;
  color: var(--ink); background: var(--glass-strong); border: 1px solid var(--line-strong);
  border-radius: 9px; outline: none;
}
.field input:focus, .field select:focus { border-color: var(--cinnabar); box-shadow: var(--glow-cinnabar); }
.field select option { background: #0e1c23; color: var(--ink); }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn.sm { padding: 7px 14px; font-size: 14px; }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn.ok { background: linear-gradient(135deg,#3f9e73,#2f7d5b); box-shadow: 0 4px 14px rgba(0,0,0,.35),0 0 20px rgba(64,160,120,.28); }
.btn.danger { background: transparent; color: var(--cinnabar); border: 1px solid var(--cinnabar-dim); box-shadow: none; }

.msg { margin: 12px 0; font-size: 14.5px; min-height: 20px; }
.msg.ok { color: #7fd6ac; }
.msg.bad { color: var(--cinnabar-soft); }

/* 授权勾选 */
.consent-item {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin: 12px 0;
  background: var(--glass); border: 1px solid var(--line); border-radius: 10px;
}
.consent-item input[type=checkbox] { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--cinnabar); flex: none; }
.consent-item .ct { font-size: 15px; }
.consent-item .ct b { color: var(--ink); }
.consent-item .ct .d { color: var(--ink-soft); font-size: 14px; display: block; margin-top: 2px; }
.consent-item.required { border-left: 3px solid var(--cinnabar); }

/* 录音间 */
.script-card {
  text-align: center; padding: 34px 24px; margin: 20px 0;
  background: linear-gradient(160deg, var(--glass-strong), var(--glass));
  border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--shadow-card);
}
.script-card .stitle { color: var(--cinnabar); font-size: 13px; letter-spacing: .12em; margin-bottom: 12px; }
.script-card .stext { font-size: 27px; line-height: 1.7; color: var(--ink); letter-spacing: .03em; }
.script-card .smeta { margin-top: 14px; color: var(--ink-faint); font-size: 14px; }

.progress-wrap { margin: 10px 0 4px; }
.progress-bar { height: 6px; border-radius: 999px; background: var(--glass-strong); overflow: hidden; }
.progress-bar > i { display: block; height: 100%; background: linear-gradient(90deg,var(--cinnabar),var(--gold)); width: 0; transition: width .3s; }
.progress-txt { font-size: 13px; color: var(--ink-faint); margin-top: 6px; text-align: center; }

.mic-zone { text-align: center; margin: 22px 0; }
.mic-btn {
  width: 96px; height: 96px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg,var(--cinnabar),var(--cinnabar-dim));
  color: #fff; font-size: 15px; font-weight: 700; font-family: inherit;
  box-shadow: 0 6px 20px rgba(0,0,0,.4), var(--glow-cinnabar); transition: transform .12s, box-shadow .12s;
}
.mic-btn:hover { transform: translateY(-2px); }
.mic-btn.recording { animation: pulse 1.1s infinite; background: linear-gradient(135deg,#e0604f,#b04437); }
@keyframes pulse { 0%,100% { box-shadow: 0 6px 20px rgba(0,0,0,.4),0 0 0 0 rgba(224,96,79,.5);} 50% { box-shadow: 0 6px 20px rgba(0,0,0,.4),0 0 0 18px rgba(224,96,79,0);} }
.rec-timer { font-variant-numeric: tabular-nums; font-size: 22px; color: var(--cinnabar-soft); margin-top: 12px; min-height: 28px; }
.playback { margin: 16px auto; max-width: 420px; }
.playback audio { width: 100%; }

/* 我的语料 */
.rec-list { margin: 16px 0; }
.rec-item {
  display: flex; gap: 12px; align-items: center; padding: 12px 14px; margin: 8px 0;
  background: var(--glass); border: 1px solid var(--line); border-radius: 10px; flex-wrap: wrap;
}
.rec-item .rt { flex: 1; min-width: 180px; }
.rec-item .rt .txt { color: var(--ink); font-size: 15px; }
.rec-item .rt .sub { color: var(--ink-faint); font-size: 12.5px; margin-top: 2px; }
.rec-item audio { height: 34px; }
.tag { display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-faint); }

.hint-box {
  background: var(--glass); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 8px; padding: 12px 16px; margin: 16px 0; font-size: 14px; color: var(--ink-soft);
}
.spinner { display:inline-block; width:14px;height:14px;border:2px solid var(--line-strong);border-top-color:var(--cinnabar);border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;}
@keyframes spin { to { transform: rotate(360deg); } }

/* 山歌联句两行:块居中、行左对齐,开头对齐 */
.script-card .stext .twolines { display: inline-block; text-align: left; }