:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: #1d2333;
  background: #f7f8fc;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 20% 0%, #eef2ff 0, transparent 30rem), #f7f8fc; }
button, textarea { font: inherit; }
button { cursor: pointer; border: 0; }
.app-shell { width: min(100%, 760px); min-height: 100vh; margin: auto; padding: 34px 24px 48px; }
.topbar, .card-heading, .controls, .sheet-actions, .history-item { display: flex; align-items: center; }
.topbar { justify-content: space-between; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(1.65rem, 4vw, 2rem); letter-spacing: -.05em; }
.eyebrow, .card-kicker { color: #7c8497; font-size: .7rem; font-weight: 750; letter-spacing: .14em; }
.history-button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 13px; border: 1px solid #e3e7f1; border-radius: 14px; background: #fff; color: #4b556d; font-size: .86rem; font-weight: 700; box-shadow: 0 5px 18px #52648312; }.history-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.region-picker { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 25px 0 -8px; padding: 14px 16px; border: 1px solid #e2e6f1; border-radius: 18px; background: #ffffffb8; box-shadow: 0 7px 20px #5264830b; }.region-picker-title { margin-top: 3px; color: #536078; font-size: .88rem; font-weight: 700; }.region-segment { display: inline-flex; padding: 3px; border-radius: 12px; background: #edf0f7; }.region-button { min-height: 34px; padding: 0 11px; border-radius: 9px; background: transparent; color: #69758c; font-size: .78rem; font-weight: 720; transition: background .2s, color .2s, box-shadow .2s; }.region-button[aria-pressed="true"] { background: #fff; color: #4c65ca; box-shadow: 0 2px 7px #53648322; }
.timer-panel { display: grid; justify-items: center; margin: 34px 0 25px; }
.phase-label { font-weight: 700; color: #53617a; margin-bottom: 13px; }
.timer-ring { --progress: 0deg; width: min(62vw, 286px); aspect-ratio: 1; padding: 12px; border-radius: 50%; background: conic-gradient(#7892ff var(--progress), #e5e9f3 0); box-shadow: 0 20px 40px #5364831a; transition: background .35s linear; }
.timer-ring.speaking { background: conic-gradient(#39b991 var(--progress), #e5e9f3 0); }
.timer-ring.warning { background: conic-gradient(#f4a34e var(--progress), #e5e9f3 0); }
.timer-ring.overtime { background: conic-gradient(#e96c6c var(--progress), #fbe9e9 0); }
.timer-center { height: 100%; display: grid; place-content: center; gap: 5px; text-align: center; border-radius: inherit; background: #fdfdff; }
time { font-size: clamp(3.2rem, 12vw, 4.8rem); font-weight: 750; letter-spacing: -.075em; font-variant-numeric: tabular-nums; }
.timer-center span, .phase-note { color: #798399; font-size: .87rem; }
.phase-note { margin-top: 15px; }
.recording-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: #7b8496; font-size: .76rem; font-weight: 650; }.recording-status span { width: 7px; height: 7px; border-radius: 50%; background: #df6464; box-shadow: 0 0 0 3px #df646420; }.recording-status.error { color: #b25d54; }.recording-status.error span { background: #c9863f; box-shadow: 0 0 0 3px #c9863f20; }
.question-card { border: 1px solid #e7eaf2; background: #fff; box-shadow: 0 8px 30px #4b5c7810; }
.prepared-notes { margin: 0 0 18px; padding: 18px 20px; border: 1px solid #e6dfb9; border-radius: 20px; background: #fffdf6; box-shadow: 0 8px 30px #786f3b0c; }.prepared-notes h2 { margin-top: 4px; font-size: 1rem; }.prepared-notes > p { margin: 13px 0 0; white-space: pre-wrap; color: #596274; font-size: .9rem; line-height: 1.55; text-align: left; }
.question-card { padding: 24px; border-radius: 24px; }
.card-heading { justify-content: space-between; }
.text-button { color: #526bd3; background: transparent; font-weight: 650; font-size: .9rem; }
.question-card h2 { margin: 17px 0 15px; max-width: 600px; font-size: clamp(1.2rem, 3vw, 1.45rem); line-height: 1.36; letter-spacing: -.025em; }
ul { margin: 0; padding-left: 20px; color: #69748b; line-height: 1.65; font-size: .93rem; }
.controls { gap: 10px; margin-top: 20px; }
.controls .secondary-button { flex: 1; }
.primary-button, .secondary-button { min-height: 52px; padding: 0 22px; border-radius: 16px; font-weight: 720; transition: transform .15s, opacity .15s; }
.primary-button { flex: 1; background: #516ad8; color: #fff; box-shadow: 0 7px 18px #516ad844; }
.secondary-button { background: #e9edf6; color: #49546a; }
button:active { transform: scale(.97); }
.is-hidden { display: none; }
.prep-guide { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px; border: 1px solid #e0e5fa; border-radius: 18px; background: #f5f7ff; color: #66718a; font-size: .83rem; line-height: 1.45; animation: reveal .25s ease-out; }.prep-guide p { margin: 0; }.prep-guide-title { color: #3f4f75; font-weight: 750; }.prep-guide-icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 11px; background: #e2e8ff; color: #6078df; }.skip-choice { display: inline-flex; align-items: center; gap: 9px; color: #5366ba; font-size: .78rem; font-weight: 750; white-space: nowrap; cursor: pointer; }.skip-choice input { position: absolute; opacity: 0; pointer-events: none; }.ios-switch { position: relative; width: 42px; height: 25px; flex: 0 0 auto; border-radius: 99px; background: #c8cfdf; transition: background .2s; }.ios-switch::after { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #23305633; content: ""; transition: transform .2s; }.skip-choice input:checked + .ios-switch { background: #4f7dea; }.skip-choice input:checked + .ios-switch::after { transform: translateX(17px); }.skip-choice input:focus-visible + .ios-switch { outline: 3px solid #9eaff4; outline-offset: 2px; }
.sheet { width: min(calc(100% - 32px), 570px); max-height: min(80vh, 650px); padding: 0; border: 0; border-radius: 26px; color: #1d2333; box-shadow: 0 30px 70px #17203f50; }
.sheet::backdrop { background: #1c254366; backdrop-filter: blur(3px); }
.sheet-content { position: relative; padding: 30px; }.sheet h2 { margin-top: 8px; font-size: 1.65rem; letter-spacing: -.04em; }
.close-button { position: absolute; right: 20px; top: 16px; width: 34px; height: 34px; background: #f0f2f7; color: #59647a; border-radius: 50%; font-size: 1.5rem; }
.result-time { margin: 22px 0 5px; font-size: 3rem; font-weight: 750; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }.result-summary { color: #6e788d; margin-bottom: 25px; }
label { display: block; color: #556076; font-size: .88rem; font-weight: 650; margin-bottom: 8px; }textarea { width: 100%; resize: vertical; padding: 13px; border: 1px solid #dde2ed; border-radius: 13px; outline-color: #7188e8; color: #313b50; }.sheet-actions { gap: 10px; margin-top: 17px; }.sheet-actions button { flex: 1; }
.cue-note-description, .cue-note-status { color: #707b90; font-size: .9rem; line-height: 1.5; }.cue-note-description { margin: 10px 0 16px; }.cue-note-status { margin-top: 8px; }.cue-note-count { margin: 6px 1px 0; color: #8992a4; font-size: .75rem; text-align: right; font-variant-numeric: tabular-nums; }.cue-note-skip-button { width: 100%; margin-top: 15px; }.cue-note-content textarea { background: #fffdf7; border-color: #eee4bd; line-height: 1.55; }.cue-note-content textarea:read-only { color: #555c6b; background: #f5f6f8; border-color: #e3e6ec; }
.cue-card-preview { margin: 18px 0 14px; padding: 16px; border-radius: 16px; background: #f6f8ff; border: 1px solid #e4e8f8; }.cue-card-label { color: #6379d8; font-size: .68rem; font-weight: 750; letter-spacing: .14em; }.cue-card-preview h3 { margin: 8px 0 9px; font-size: 1rem; line-height: 1.38; }.cue-card-preview ul { font-size: .84rem; line-height: 1.55; }
.history-list { margin-top: 22px; }.empty-history { color: #758096; padding: 24px 0; text-align: center; }.history-item { justify-content: space-between; gap: 15px; padding: 17px 0; border-bottom: 1px solid #edf0f5; }.history-date, .history-note { color: #7b8598; font-size: .8rem; }.history-question { max-width: 360px; margin: 4px 0; font-size: .96rem; line-height: 1.35; }.history-status { flex: 0 0 auto; padding: 6px 9px; border-radius: 9px; background: #ecf7f2; color: #278465; font-size: .78rem; font-weight: 700; }.history-status.over { background: #fff0ee; color: #bc5c51; }.history-status.short { background: #fff7e8; color: #a76f1c; }.history-status.incomplete { background: #edf0f5; color: #667085; }
@keyframes reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 480px) { .app-shell { padding: 24px 16px 36px; }.region-picker { align-items: stretch; flex-direction: column; gap: 10px; }.region-segment { width: 100%; }.region-button { flex: 1; }.question-card { padding: 20px; }.sheet-content { padding: 26px 20px; }.sheet-actions { align-items: stretch; flex-direction: column-reverse; }.controls { flex-wrap: wrap; }.controls .primary-button { flex-basis: 100%; }.prep-guide { grid-template-columns: auto 1fr; }.skip-choice { grid-column: 2; justify-self: start; margin-left: -10px; }.prepared-notes { display: block; }.prepared-notes > p { max-width: none; margin-top: 13px; text-align: left; }.timer-ring { width: min(72vw, 280px); } }