:root { --ink:#17324d; --muted:#63778a; --line:#dfe8ee; --brand:#126b70; --soft:#dff1ef; --warm:#f6b85f; --danger:#c65353; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 10% 0%,rgba(246,184,95,.17),transparent 28rem),radial-gradient(circle at 100% 35%,rgba(18,107,112,.1),transparent 30rem),#f3f8f8; font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; }
button,input,textarea { font:inherit; }
button:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid rgba(18,107,112,.25); outline-offset:2px; }
.topbar,.main { width:min(980px,calc(100% - 32px)); margin:auto; }
.topbar { height:76px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; }
.brand-mark { width:35px; height:35px; display:grid; place-items:center; border-radius:11px; color:#fff; background:var(--brand); box-shadow:0 8px 22px rgba(18,107,112,.25); }
.text-btn { border:0; background:none; color:var(--muted); cursor:pointer; }
.main { padding:30px 0 72px; }
.hero { text-align:center; max-width:740px; margin:18px auto 32px; }
.slogan { margin-top:15px; color:var(--ink); font-size:clamp(21px,4vw,30px); font-weight:800; letter-spacing:-.03em; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--brand); font-size:13px; font-weight:700; letter-spacing:.08em; }
.eyebrow::before { content:""; width:22px; height:2px; background:var(--warm); }
h1 { font-size:clamp(36px,7vw,58px); line-height:1.12; letter-spacing:-.055em; margin:15px 0; }
.hero p { color:var(--muted); font-size:17px; line-height:1.8; max-width:640px; margin:auto; }
.web-benefits { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:23px 0 17px; }
.web-benefits span { padding:8px 13px; border:1px solid rgba(18,107,112,.16); border-radius:999px; color:var(--brand); background:rgba(223,241,239,.65); font-size:13px; font-weight:700; }
.hero-cta { border:0; border-radius:14px; padding:13px 22px; color:#fff; background:var(--brand); font-weight:800; cursor:pointer; box-shadow:0 12px 28px rgba(18,107,112,.2); }
.coach-card { width:min(720px,100%); margin:auto; padding:clamp(24px,5vw,42px); border:1px solid rgba(255,255,255,.9); border-radius:30px; background:rgba(255,255,255,.94); box-shadow:0 24px 70px rgba(23,50,77,.12); }
.setup-row { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.setup-row strong,.section-title strong { display:block; font-size:17px; }
.setup-row small,.section-title small { display:block; margin-top:6px; color:var(--muted); }
.setup-row input { width:60px; padding:9px 6px; border:1px solid var(--line); border-radius:10px; text-align:center; }
.training-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:22px 0; }
.training-card { display:grid; grid-template-columns:44px 1fr; column-gap:12px; padding:18px; border:1px solid var(--line); border-radius:18px; color:var(--ink); background:#fff; text-align:left; cursor:pointer; }
.training-card > span { grid-row:1/3; width:44px; height:44px; display:grid; place-items:center; border-radius:14px; color:#fff; background:var(--brand); font-weight:800; }
.training-card b,.training-card small { display:block; }
.training-card small { margin-top:5px; color:var(--muted); font-size:12px; }
.training-card.active { border-color:var(--brand); background:var(--soft); box-shadow:0 8px 24px rgba(18,107,112,.08); }
.simulation-panel { padding:21px; border-radius:20px; background:#f8fbfb; }
.field-grid,.time-presets { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.simulation-panel label { display:grid; gap:7px; color:var(--muted); font-size:13px; text-align:left; }
.simulation-panel select,.simulation-panel input { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:#fff; }
.topic-field { margin-top:13px; }
.topic-actions { display:flex; align-items:center; gap:12px; margin:11px 0 16px; }
.topic-actions .secondary { padding:9px 13px; }
.topic-actions span { color:var(--muted); font-size:12px; }
.wide { width:100%; margin-top:18px; }
.center { text-align:center; }
.prep-stage { min-height:440px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.prep-stage h2 { margin:18px 0 5px; font-size:32px; }
.prep-stage > p { color:var(--muted); }
.prep-timer { margin:30px 0 12px; font-size:clamp(55px,12vw,76px); font-weight:800; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
.flat { margin-top:10px; background:transparent; }
.context-badge { display:inline-block; margin-bottom:14px; padding:8px 12px; border-radius:999px; color:var(--brand); background:var(--soft); font-size:12px; font-weight:700; }
.card.score-card { color:#fff; background:linear-gradient(145deg,#17324d,#126b70); }
.card.score-card h3 { color:#fff; }
.card.score-card p,.card.score-card small { color:rgba(255,255,255,.72); }
.score-head { display:flex; justify-content:space-between; gap:20px; }
.score-head > strong { font-size:48px; line-height:1; }
.score-head > strong small { font-size:14px; font-weight:500; }
.dimension { margin-top:17px; }
.dimension > div:first-child { display:flex; justify-content:space-between; }
.score-track { height:7px; margin:8px 0; overflow:hidden; border-radius:7px; background:rgba(255,255,255,.17); }
.score-track i { display:block; height:100%; border-radius:7px; background:var(--warm); }
.next-action { border-color:rgba(18,107,112,.2); background:#eff9f7; }
.mode-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:24px 0; }
.mode-card { min-width:0; padding:17px 10px; border:1px solid var(--line); border-radius:16px; color:var(--ink); background:#fff; cursor:pointer; text-align:left; transition:.18s ease; }
.mode-card:hover,.mode-card.active { border-color:var(--brand); background:var(--soft); transform:translateY(-1px); }
.mode-card b,.mode-card small { display:block; }
.mode-card small { margin-top:5px; color:var(--muted); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mode-icon { width:30px; height:30px; margin-bottom:10px; border-radius:10px; display:grid; place-items:center; color:#fff; background:var(--brand); font-size:13px; font-weight:800; }
.mode-panel { min-height:250px; display:grid; align-content:center; justify-items:center; text-align:center; padding-top:8px; }
.mode-panel textarea { margin-top:0; }
.record-stage { min-height:270px; display:grid; place-items:center; text-align:center; }
.record-button { width:148px; height:148px; border:0; border-radius:50%; color:#fff; background:var(--brand); cursor:pointer; box-shadow:0 0 0 12px var(--soft),0 20px 42px rgba(18,107,112,.28); }
.record-button .dot { font-size:35px; display:block; }
.record-button b { display:block; margin-top:9px; }
.privacy { display:block; margin-top:35px; color:var(--muted); }
.upload-zone { width:100%; min-height:170px; padding:26px; border:1.5px dashed #9cc3c3; border-radius:20px; color:var(--ink); background:#f4fbfa; cursor:pointer; }
.upload-zone b,.upload-zone small { display:block; }
.upload-zone small { margin-top:8px; color:var(--muted); }
.upload-arrow { width:48px; height:48px; margin:0 auto 13px; border-radius:15px; display:grid; place-items:center; color:#fff; background:var(--brand); font-size:23px; }
.file-info { width:100%; display:flex; justify-content:space-between; gap:15px; margin-top:15px; padding:13px 15px; border-radius:12px; background:#f8fafb; text-align:left; }
.file-info b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-info small { color:var(--muted); white-space:nowrap; }
#uploadedPlayback { width:100%; margin-top:12px; }
.timer { font-size:clamp(52px,13vw,74px); font-weight:800; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
.timer.over { color:var(--danger); }
.target { color:var(--muted); }
.pulse { width:76px; height:76px; margin:28px auto; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--brand); animation:pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(18,107,112,.35); } 70% { box-shadow:0 0 0 28px rgba(18,107,112,0); } }
.stop-button,.primary,.secondary { border:0; border-radius:14px; padding:13px 20px; font-weight:700; cursor:pointer; }
.stop-button { color:#fff; background:var(--ink); min-width:150px; }
.primary { color:#fff; background:var(--brand); }
.secondary { color:var(--brand); background:var(--soft); }
.live { max-height:85px; overflow:hidden; margin-top:18px; padding:12px; text-align:left; color:var(--muted); background:#f7fafb; border-radius:12px; font-size:13px; line-height:1.6; }
audio { width:100%; margin:16px 0; }
textarea { width:100%; min-height:170px; margin-top:16px; padding:14px; border:1px solid var(--line); border-radius:14px; resize:vertical; color:var(--ink); background:#fbfdfd; }
.helper { color:var(--muted); font-size:12px; line-height:1.6; }
.buttons { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.error { width:100%; margin-top:12px; padding:13px; color:#8b3b3b; background:#fff1f1; border-radius:12px; }
.processing { text-align:center; padding:55px 0; }
.processing p { color:var(--muted); }
.spinner { width:54px; height:54px; margin:0 auto 20px; border:5px solid var(--soft); border-top-color:var(--brand); border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.results { width:min(840px,100%); margin:auto; }
.result-head { margin-bottom:24px; }
.result-head h2 { font-size:clamp(30px,6vw,45px); letter-spacing:-.04em; margin:8px 0; }
.result-head p,.card p { color:var(--muted); line-height:1.7; }
.card { margin-bottom:16px; padding:24px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 12px 36px rgba(23,50,77,.06); }
.card h3 { margin:0 0 18px; }
.strength { display:flex; gap:10px; margin:10px 0; line-height:1.7; }
.check { color:var(--brand); font-weight:900; }
.issues { display:grid; gap:14px; counter-reset:item; }
.issue { position:relative; padding:20px 20px 20px 58px; border-radius:16px; background:#f8fafb; }
.issue::before { counter-increment:item; content:counter(item); position:absolute; left:18px; top:18px; width:27px; height:27px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--brand); font-size:13px; font-weight:800; }
.issue h4 { margin:0 0 7px; }
.issue p { margin:5px 0; }
.issue .direction { color:var(--ink); }
.locked { margin-top:14px; padding:14px 0 0; border-top:1px dashed var(--line); filter:blur(4px); user-select:none; }
.results.logged-in .locked { filter:none; user-select:auto; }
.login-box { text-align:center; background:linear-gradient(145deg,#edf7f6,#fff); }
.login-box p { max-width:470px; margin:0 auto 18px; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.metric { padding:16px; text-align:center; border-radius:14px; background:#f8fafb; }
.metric b { display:block; font-size:22px; }
.metric small { color:var(--muted); }
.modal { position:fixed; inset:0; display:grid; place-items:center; padding:20px; background:rgba(13,31,45,.48); z-index:10; }
.modal-card { position:relative; width:min(430px,100%); padding:28px; border-radius:22px; background:#fff; box-shadow:0 30px 90px rgba(0,0,0,.25); }
.modal-card p { color:var(--muted); line-height:1.7; }
.auth-modal { max-height:min(720px,90vh); overflow:auto; }
.auth-fields { display:grid; gap:12px; margin:18px 0 12px; }
.auth-fields label { display:grid; gap:7px; color:var(--ink); font-size:13px; font-weight:700; }
.auth-fields input { width:100%; min-height:46px; padding:11px 13px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:#fbfdfd; font:inherit; }
.auth-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.history-list { display:grid; gap:10px; margin:18px 0; }
.history-item { padding:14px; border:1px solid var(--line); border-radius:14px; background:#f8fafb; }
.history-item div { display:flex; justify-content:space-between; gap:12px; margin-bottom:7px; }
.history-item b { color:var(--brand); }
.history-item small { color:var(--muted); }
.history-item p { margin:0; font-size:13px; }
.close { position:absolute; right:15px; top:12px; border:0; background:none; font-size:26px; color:var(--muted); cursor:pointer; }
[hidden] { display:none !important; }
@media (max-width:600px) {
  .topbar { height:64px; }
  .main { padding-top:8px; }
  .hero { margin-top:5px; }
  .hero p { font-size:15px; }
  .coach-card { border-radius:24px; }
  .setup-row small { max-width:195px; }
  .mode-grid { gap:7px; }
  .training-grid { grid-template-columns:1fr; }
  .field-grid,.time-presets { grid-template-columns:1fr 1fr; }
  .mode-card { padding:13px 8px; }
  .mode-card small { display:none; }
  .mode-icon { margin-bottom:7px; }
  .buttons > * { flex:1; }
  .metrics { grid-template-columns:1fr; }
  .metric { display:flex; justify-content:space-between; align-items:baseline; }
}