main { width:min(1160px,calc(100% - 48px)); margin:auto; padding:34px 0 68px; } .top-actions,.chips,.goal-chips,.practice-actions { display:flex; gap:8px; align-items:center; } .quiet-button,.link-button,.back-button { border:0; background:transparent; color:var(--speak-mist); font-weight:720; cursor:pointer; } .quiet-button { min-height:38px; padding:0 11px; border:1px solid var(--speak-line); border-radius:6px; } .screen { display:none; } .screen.active { display:block; } .archive-head { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:start; margin-bottom:24px; } h1 { max-width:720px; margin:8px 0 10px; color:var(--speak-paper); font-family:var(--speak-serif); font-size:clamp(34px,5vw,52px); line-height:1.16; } .archive-head p:not(.speak-eyebrow),.toolkit p,.report-head p { color:var(--speak-mist); line-height:1.65; } .score-pocket { min-width:200px; padding:15px; border:1px solid var(--speak-line); border-radius:var(--speak-radius); } .score-pocket strong { display:block; font-family:var(--speak-mono); font-size:26px; } .score-pocket span,.score-pocket small { display:block; color:var(--speak-muted); font-size:11px; } .progress { height:5px; margin:9px 0 8px; overflow:hidden; border-radius:4px; background:rgba(244,246,241,.14); } .progress i { display:block; width:48%; height:100%; background:var(--speak-acid); } .mode-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--speak-line); border-bottom:1px solid var(--speak-line); margin-bottom:18px; } .mode-grid button { min-height:122px; padding:16px; border:0; border-right:1px solid var(--speak-line); color:var(--speak-mist); background:transparent; text-align:left; } .mode-grid button:last-child { border-right:0; } .mode-grid button.active { color:var(--speak-paper); background:rgba(200,255,69,.055); box-shadow:inset 0 -3px 0 var(--speak-acid); } .mode-grid span { display:block; margin-bottom:19px; color:var(--speak-acid); font-family:var(--speak-mono); font-size:10px; font-weight:800; } .mode-grid strong,.mode-grid small { display:block; } .mode-grid small { margin-top:6px; color:var(--speak-muted); font-size:12px; line-height:1.5; } .setup-grid,.practice-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(260px,.75fr); gap:16px; } .composer,.toolkit,.practice-stage,.focus-card,.report-card { padding:24px; } .label-row { display:flex; justify-content:space-between; gap:12px; } label,.link-button { color:var(--speak-muted); font-size:12px; } .link-button { color:var(--speak-acid); } #topic { min-height:95px; margin:11px 0 16px; padding:15px; resize:vertical; } .goal-chips { flex-wrap:wrap; margin-bottom:20px; } .goal-chips button { min-height:34px; padding:0 10px; border:1px solid var(--speak-line); border-radius:17px; color:var(--speak-mist); background:transparent; } .goal-chips button.active { color:var(--speak-acid-ink); border-color:var(--speak-acid); background:var(--speak-acid); font-weight:780; } .full-width { width:100%; } .toolkit h2,.focus-card h2 { margin:8px 0; font-size:20px; } .toolkit ol { margin:18px 0 0; padding:0; list-style:none; border-top:1px solid var(--speak-line); } .toolkit li { padding:12px 0; border-bottom:1px solid var(--speak-line); color:var(--speak-muted); font-size:13px; } .toolkit li b { color:var(--speak-acid); margin-right:8px; } .practice-stage { min-height:580px; } .chips { margin:24px 0 30px; } time { display:block; color:var(--speak-acid); font-family:var(--speak-mono); font-size:72px; font-weight:840; } .practice-stage h1 { max-width:760px; font-family:var(--speak-sans); font-size:clamp(25px,3.3vw,32px); } .practice-stage > p { color:var(--speak-muted); } .transcript { min-height:190px; margin-top:18px; padding:14px; resize:vertical; line-height:1.68; } .transcript-meta { display:flex; justify-content:space-between; gap:12px; margin-top:8px; color:var(--speak-muted); font-size:11px; } .practice-actions { margin-top:20px; } .practice-actions .speak-button--primary { flex:1; } .speak-button:disabled { cursor:wait; opacity:.66; } .privacy-note { font-size:11px; line-height:1.55; } .focus-list p { padding:10px 11px; border-left:3px solid var(--speak-acid); background:rgba(200,255,69,.065); color:var(--speak-muted); font-size:12px; } .focus-list b { display:block; color:var(--speak-paper); margin-bottom:3px; } .report-wrap { width:min(900px,100%); margin:auto; } .report-head { display:flex; justify-content:space-between; gap:22px; margin-bottom:20px; } .report-score { min-width:118px; padding:15px 12px; border-radius:var(--speak-radius); color:var(--speak-acid-ink); background:var(--speak-acid); text-align:center; } .report-score strong { display:block; font-family:var(--speak-mono); font-size:38px; } .report-score span { font-size:10px; font-weight:760; } .report-card h2 { margin-top:0; } .compass { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; } .compass div { padding:11px 7px; border:1px solid var(--speak-line); border-radius:6px; text-align:center; } .compass b { display:block; color:var(--speak-acid); font-family:var(--speak-mono); font-size:18px; } .compass span { color:var(--speak-muted); font-size:11px; } .rewrite { margin-top:18px; padding:18px; border:1px solid rgba(255,132,109,.48); border-radius:7px; background:rgba(255,132,109,.09); } .rewrite p { margin:0 0 8px; color:#ffc1b5; font-size:11px; font-weight:800; } blockquote { margin:0 0 8px; color:var(--speak-paper); font-size:15px; line-height:1.7; } .rewrite small { color:var(--speak-mist); line-height:1.6; } .dialog-backdrop { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.62); } .dialog { width:min(560px,100%); border:1px solid rgba(200,255,69,.44); border-radius:8px; background:var(--speak-ink-raised); box-shadow:var(--speak-shadow); } .dialog header { display:flex; align-items:center; justify-content:space-between; padding:18px 21px; border-bottom:1px solid var(--speak-line); } .dialog h2 { margin:0; font-size:20px; } .dialog header button { width:32px; height:32px; border:0; border-radius:5px; color:var(--speak-muted); background:transparent; font-size:24px; } .dialog > div { padding:21px; color:var(--speak-mist); line-height:1.65; } dl { display:grid; grid-template-columns:110px 1fr; gap:10px; margin:18px 0; } dt { color:var(--speak-muted); } dd { margin:0; color:var(--speak-paper); } .muted { color:var(--speak-muted); font-size:12px; } .badges { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .badges span { display:grid; gap:5px; padding:12px; border:1px solid var(--speak-line); border-radius:7px; color:var(--speak-acid); text-align:center; } .badges b,.badges small { color:var(--speak-paper); font-size:11px; } .badges small { color:var(--speak-muted); }
@media (max-width:860px) { .setup-grid,.practice-grid { grid-template-columns:1fr; } .focus-card { display:grid; grid-template-columns:.8fr 1.2fr; gap:18px; } } @media (max-width:560px) { main { width:min(100% - 28px,1160px); padding-top:24px; } .archive-head,.report-head { display:block; } .score-pocket { margin-top:20px; } .mode-grid { grid-template-columns:1fr 1fr; } .mode-grid button:nth-child(2) { border-right:0; } .mode-grid button:nth-child(-n+2) { border-bottom:1px solid var(--speak-line); } .mode-grid button { min-height:112px; } .setup-grid,.practice-grid { grid-template-columns:1fr; } .composer,.toolkit,.practice-stage,.focus-card,.report-card { padding:17px; } .focus-card { display:block; } time { font-size:58px; } .practice-actions { flex-direction:column; } .practice-actions .speak-button { width:100%; } .compass { grid-template-columns:repeat(3,1fr); } .report-score { width:118px; margin-top:18px; } }

/* 04 表达档案：让积分、档案索引与报告保持原提案的阅读节奏。 */
.archive-head { grid-template-columns: .82fr 1.18fr; }
.archive-head h1 { font-size: clamp(35px, 4.3vw, 48px); }
.score-pocket { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; min-width: 0; padding: 0; border: 0; }
.score-pocket strong { grid-row: span 2; margin: 0; color: var(--speak-acid); font-size: 40px; }
.score-pocket .progress { grid-column: 2; margin: 0; }
.score-pocket small { grid-column: 2; margin-top: 6px; }
.speak-card { box-shadow: none; }
.report-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 16px; }
.report-stats div { padding: 14px; border: 1px solid var(--speak-line); border-radius: var(--speak-radius); background: var(--speak-ink-raised); }
.report-stats span, .report-stats strong { display: block; }
.report-stats span { color: var(--speak-muted); font-size: 11px; }
.report-stats strong { margin-top: 4px; color: var(--speak-paper); font-family: var(--speak-mono); font-size: 18px; }
.settings-list { margin-bottom: 0; }

@media (max-width: 860px) { .archive-head { grid-template-columns: 1fr; } .score-pocket { max-width: 380px; } }
@media (max-width: 560px) { .report-stats { grid-template-columns: 1fr; } }