:root {
  --rpx: calc(100vw / 750);
}

.page {
  --primary: #0f9d6e;
  --primary-dark: #0b7d57;
  --primary-soft: #e7f6ef;
  --text-primary: #1c2421;
  --text-secondary: #5d6b66;
  --text-tertiary: #8fa099;
  --line: #e3ece8;
  --radius-sm: calc(var(--rpx) * 16);
  --radius-md: calc(var(--rpx) * 20);
  --radius-lg: calc(var(--rpx) * 28);
  min-height: 100vh;
  padding: calc(var(--rpx) * 24) calc(var(--rpx) * 32) calc(var(--rpx) * 48);
  box-sizing: border-box;
  background: linear-gradient(180deg, #eef7f2 0%, #f6faf8 45%, #ffffff 100%);
}

.page-header { padding: calc(var(--rpx) * 16) calc(var(--rpx) * 8) calc(var(--rpx) * 28); }
.title { font-size: calc(var(--rpx) * 40); font-weight: 800; color: var(--text-primary); letter-spacing: 0.02em; }
.subtitle { font-size: calc(var(--rpx) * 24); color: var(--text-tertiary); margin-top: calc(var(--rpx) * 6); }

.voice-settings { display:flex; align-items:center; justify-content:space-between; padding:calc(var(--rpx) * 16) calc(var(--rpx) * 24); margin-bottom:calc(var(--rpx) * 24); border-radius:var(--radius-md); background:#fff; border:calc(var(--rpx) * 1) solid var(--line); box-shadow:0 calc(var(--rpx) * 4) calc(var(--rpx) * 24) rgba(31,35,64,.06); }
.voice-settings .settings-item { display:flex; align-items:center; }
.voice-settings .settings-item:last-child { margin-left:calc(var(--rpx) * 24); }
.voice-settings .settings-label { font-size:calc(var(--rpx) * 26); font-weight:600; color:var(--text-secondary); margin-right:calc(var(--rpx) * 12); white-space:nowrap; }
.voice-settings .settings-picker { font-size:calc(var(--rpx) * 26); font-weight:700; color:var(--primary); }
.voice-settings .picker-arrow { font-size:calc(var(--rpx) * 20); color:var(--text-tertiary); margin-left:calc(var(--rpx) * 8); }

.weui-uploader { margin:0 0 calc(var(--rpx) * 24); padding:calc(var(--rpx) * 32); border-radius:var(--radius-md); background:#fff; box-shadow:0 calc(var(--rpx) * 4) calc(var(--rpx) * 24) rgba(31,35,64,.06); }
.weui-uploader__hd { display:flex; align-items:center; justify-content:space-between; }
.uploader-fold { min-width:calc(var(--rpx) * 88); padding:calc(var(--rpx) * 8) calc(var(--rpx) * 18); font-size:calc(var(--rpx) * 24); font-weight:600; text-align:center; color:var(--primary-dark); background:var(--primary-soft); border-radius:calc(var(--rpx) * 999); }
.weui-uploader__title { font-size:calc(var(--rpx) * 32); line-height:1.4; font-weight:650; color:var(--text-primary); }
.weui-uploader__subtitle { margin-top:calc(var(--rpx) * 6); font-size:calc(var(--rpx) * 24); line-height:1.5; color:var(--text-tertiary); }
.weui-uploader__info { min-width:calc(var(--rpx) * 72); padding:calc(var(--rpx) * 8) calc(var(--rpx) * 14); font-size:calc(var(--rpx) * 24); text-align:center; color:var(--primary-dark); background:var(--primary-soft); border-radius:calc(var(--rpx) * 999); }
.weui-uploader__bd { display:flex; gap:calc(var(--rpx) * 20); justify-content:flex-start; }
.weui-uploader__file { width:calc(var(--rpx) * 196); height:calc(var(--rpx) * 196); margin:0; box-sizing:border-box; border-radius:calc(var(--rpx) * 22); border:calc(var(--rpx) * 2) solid var(--line); overflow:hidden; }
.weui-uploader__img { width:100%; height:100%; }
.upload-example-row { display:flex; width:100%; gap:calc(var(--rpx) * 24); }
.upload-example-row .weui-uploader__input-box { flex:1; min-width:0; }
.weui-uploader__input-box { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; height:calc(var(--rpx) * 196); box-sizing:border-box; border-radius:calc(var(--rpx) * 28); border:calc(var(--rpx) * 2) dashed #8fcdB4; background:var(--primary-soft); }
.weui-uploader__input-box:active { border-color:var(--primary-dark); background:#d8f0e4; }
.weui-uploader__input { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; }
.upload-symbol { font-size:calc(var(--rpx) * 54); line-height:1; font-weight:300; color:var(--primary-dark); }
.upload-label { margin-top:calc(var(--rpx) * 14); font-size:calc(var(--rpx) * 25); font-weight:600; color:var(--primary-dark); }
.example-link { display:flex; align-items:center; justify-content:center; min-width:calc(var(--rpx) * 88); padding:0 calc(var(--rpx) * 8); color:var(--primary-dark); font-size:calc(var(--rpx) * 26); font-weight:600; background:var(--primary-soft); border-radius:calc(var(--rpx) * 18); }
.example-link:active { opacity:.7; }

.sentence-card { background:#fff; border-radius:var(--radius-md); padding:calc(var(--rpx) * 28) calc(var(--rpx) * 24); margin-bottom:calc(var(--rpx) * 20); box-shadow:0 calc(var(--rpx) * 4) calc(var(--rpx) * 24) rgba(31,35,64,.06); }
.sentence-en { font-size:calc(var(--rpx) * 40); font-weight:800; color:var(--text-primary); line-height:1.5; }
.sentence-zh { font-size:calc(var(--rpx) * 28); font-weight:400; color:var(--text-secondary); line-height:1.6; margin-top:calc(var(--rpx) * 16); padding-top:calc(var(--rpx) * 16); border-top:calc(var(--rpx) * 1) solid var(--line); }
.sentence-list { height:calc(100vh - calc(var(--rpx) * 460)); }
.sentence-card.playing { border:calc(var(--rpx) * 2) solid var(--primary); box-shadow:0 calc(var(--rpx) * 6) calc(var(--rpx) * 28) rgba(15,157,110,.22); background:linear-gradient(180deg,var(--primary-soft) 0%,#ffffff 60%); }

.play-all { display:flex; align-items:center; justify-content:center; height:calc(var(--rpx) * 88); margin-top:calc(var(--rpx) * 8); margin-bottom:calc(var(--rpx) * 24); border-radius:calc(var(--rpx) * 999); color:#fff; font-size:calc(var(--rpx) * 28); font-weight:700; background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%); box-shadow:0 calc(var(--rpx) * 8) calc(var(--rpx) * 22) rgba(15,157,110,.28); }
.play-all:active { opacity:.85; }
.stop-square { width:calc(var(--rpx) * 22); height:calc(var(--rpx) * 22); margin-right:calc(var(--rpx) * 12); border-radius:calc(var(--rpx) * 4); background:#fff; }