@font-face{font-family:ListenLocal;src:local("Inter"),local("Arial");font-display:swap}
*{box-sizing:border-box}
:root{font-family:ListenLocal,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#292e2b;background:#f7f6f2;font-synthesis:none;--green:#325f4b;--muted:#767b73;--line:#e3e4dc;--paper:#fffefa}
body{margin:0}
button,input,textarea{font:inherit}
button,a,input,textarea{ -webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:wait;opacity:.55}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #719e83;outline-offset:4px}
button{color:inherit}
a{color:inherit}
[hidden]{display:none!important}
.skip-link{position:fixed;left:16px;top:-100px;z-index:10;background:white;padding:12px}
.skip-link:focus{top:12px}
.topbar{height:84px;display:flex;align-items:center;padding:0 4%;gap:22px;border-bottom:1px solid var(--line);background:var(--paper)}
.brand{text-decoration:none;display:flex;align-items:center;gap:14px;font-size:25px;font-weight:650;letter-spacing:2px}
.brand small{font-size:11px;letter-spacing:3px;margin-left:8px;vertical-align:middle;font-weight:500}
.brand-mark{font-family:serif;letter-spacing:-4px;color:var(--green);font-size:27px;transform:rotate(180deg);width:28px}
.preview-badge{font-size:11px;color:#6c725f;border:1px solid #d5dacb;border-radius:4px;padding:5px 8px;letter-spacing:1px}
.account{display:flex;align-items:center;gap:12px;margin-left:auto;font-size:13px;color:var(--muted)}
.text-button{border:0;background:none;min-height:44px;padding:8px 12px}
.disclaimer{font-size:12px;text-align:center;padding:10px 20px;color:#77775e;border-bottom:1px solid #e6e5d7;background:#eeeee3;line-height:1.6}
.notice{padding:12px 5%;background:#e7eee7;color:#31523e;font-size:13px;line-height:1.7}
.notice.warning{background:#fff0da;color:#74532b}
.login-screen{display:grid;grid-template-columns:1.2fr 1fr;gap:12%;max-width:1120px;margin:9vh auto;padding:25px 36px}
.eyebrow{font-size:10px;letter-spacing:2px;color:var(--muted);font-weight:600;margin:0 0 20px}
.welcome-copy h1{font-family:"Songti SC","STSong",Georgia,serif;font-size:clamp(42px,4.7vw,65px);line-height:1.5;letter-spacing:2px;font-weight:500;margin:18px 0 24px}
.welcome-copy>p:not(.eyebrow){font-size:16px;color:#73776e;line-height:2}
.welcome-line{width:40px;height:2px;background:#9aaa94;margin:35px 0}
.small{font-size:12px!important;line-height:1.7}
.muted{color:var(--muted)}
.login-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 50px #343a2610;padding:36px;align-self:center}
.card-index{font-size:11px;letter-spacing:1.2px;color:#899080}
.login-card h2{font-size:24px;font-weight:550;margin-top:26px}
.login-card>p{font-size:14px;line-height:1.8}
.login-card label{display:block;font-size:13px;margin-top:32px;margin-bottom:10px}
input[type=password],textarea{width:100%;border:1px solid #d7dbcf;border-radius:7px;background:#fbfcf8;padding:13px 14px;min-height:48px;color:#292e2b}
input[type=checkbox]{accent-color:var(--green);width:17px;height:17px;flex:0 0 auto;margin:2px 0}
.button{min-height:46px;border-radius:7px;border:1px solid transparent;padding:12px 20px;font-size:13px;font-weight:550;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:background .15s}
.primary{background:var(--green);color:#fff}
.primary:hover{background:#254b3a}
.secondary{background:transparent;border-color:#cfd6ca}
.secondary:hover{background:#edf0e8}
.login-card .primary{width:100%;justify-content:space-between;margin:3px 0 15px}
.error-text{color:#984a35;font-size:12px;line-height:1.6;min-height:12px}
.workspace{display:grid;grid-template-columns:235px minmax(0,1fr);max-width:1600px;margin:auto;height:calc(100dvh - 124px);min-height:620px}
.sidebar{border-right:1px solid var(--line);padding:35px 22px 20px;display:flex;flex-direction:column;min-height:0}
.sidebar h2{font-size:21px;font-weight:550;margin:0 0 25px}
.sidebar .eyebrow{margin-bottom:12px}
.sidebar .button{width:100%;font-size:12px}
.history-heading{font-size:11px;color:var(--muted);display:flex;justify-content:space-between;margin:34px 9px 12px}
#history-list{overflow:auto;flex:1;min-height:80px}
.history-item{display:block;text-align:left;width:100%;background:none;border:1px solid transparent;border-radius:7px;padding:13px 10px;min-height:65px;margin:3px 0}
.history-item:hover{background:#eeeee6}
.history-item[aria-current=true]{background:#e7ebe1;border-color:#dce2d4}
.history-item strong{font-size:12px;font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-item span{font-size:10px;color:var(--muted);display:block;margin-top:7px}
.local-note{display:flex;gap:9px;margin-top:25px;border-top:1px solid var(--line);padding-top:18px}
.local-dot{width:5px;height:5px;background:#76926b;border-radius:100%;margin-top:6px;flex:none}
.local-note p{font-size:10px;line-height:1.8;color:#6c7467;margin:0}
.local-note span{color:#8b8e83}
.main{min-width:0;display:flex;flex-direction:column;padding:36px clamp(24px,5vw,78px) 0;height:100%;position:relative}
.lecture-header{display:flex;justify-content:space-between;gap:20px;align-items:center}
.lecture-header .eyebrow{margin-bottom:13px}
.lecture-header h1{font-family:"Songti SC","STSong",Georgia,serif;font-size:29px;font-weight:500;letter-spacing:.8px;margin:0}
.lecture-header p{margin-bottom:0}
.record-actions{display:flex;gap:8px}
.icon-button{background:none;border:1px solid var(--line);border-radius:6px;min-height:44px;min-width:44px;padding:9px 12px;font-size:12px}
.icon-button:hover{background:#eeeee7}
.danger{color:#8f6658}
.capture-panel{border:1px solid #d9e0d2;background:#f0f3eb;border-radius:10px;margin:25px 0}
.capture-main{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px}
.capture-main strong{font-size:13px;font-weight:550}
.capture-main p{margin:6px 0 0 17px}
.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#99a28e;margin-right:10px;vertical-align:2px}
.status-dot.live{background:#3a7952;box-shadow:0 0 0 4px #d8e4d5}
.record-symbol{height:9px;width:9px;border-radius:50%;background:currentColor}
.is-recording .record-symbol{border-radius:1px}
.consent-area{padding:0 22px 17px}
.check-label{display:flex;gap:10px;font-size:11px;line-height:1.8;align-items:flex-start;cursor:pointer}
.capture-foot{border-top:1px solid #dde3d5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 22px;color:#79816f;font-size:10px}
.wake-label{font-size:10px;white-space:nowrap}
.wake-label input{width:14px;height:14px}
.reading-area{position:relative;display:flex;flex-direction:column;min-height:190px;flex:1}
.reading-top{display:flex;align-items:center;justify-content:space-between;padding:0 0 16px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.5px}
.reading-top #segment-count{font-size:10px;margin-left:8px}
.transcript-scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d0d5c8 transparent;padding:0 14px 40px 0;flex:1;min-height:0;overflow-anchor:none}
.segment{padding:26px 0 22px;border-bottom:1px solid var(--line)}
.segment-top{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.4px;color:#92978a;margin-bottom:12px}
.segment-index{font-variant-numeric:tabular-nums;color:#849079}
.segment-chinese{font-size:18px;line-height:1.95;letter-spacing:.2px;margin:0;color:#343a32;white-space:pre-wrap;overflow-wrap:anywhere}
.segment details{margin-top:13px;font-size:12px;color:#797f72}
.segment summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;list-style:none;width:max-content}
.segment summary:before{content:'＋';font-size:14px}
.segment details[open] summary:before{content:'−'}
.segment-english{font-family:Georgia,"Times New Roman",serif;font-size:14px;line-height:1.8;border-left:2px solid #d6ddce;padding:0 0 0 14px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:#737a6b}
.feedback-trigger{margin-left:auto;border:0;background:none;color:#818977;font-size:10px;padding:12px 6px;min-height:44px}
.gap{padding:17px 16px;background:#f3eadc;border:1px dashed #dbceb7;border-radius:5px;margin:22px 0;color:#897144;font-size:12px;line-height:1.8;overflow-wrap:anywhere}
.gap strong{display:block;font-weight:550;font-size:11px}
.empty-state{text-align:center;padding:55px 12px 35px;color:#8d9384}
.empty-mark{font-size:51px;color:#a8b3a0;font-family:serif;line-height:1}
.empty-state h2{font-size:18px;font-family:"Songti SC","STSong",Georgia,serif;font-weight:500;letter-spacing:1px;margin:25px 0 12px}
.empty-state p{font-size:12px;line-height:2}
.empty-state>span{font-size:10px;color:#a0a595;display:block;margin-top:25px}
.reading-footer{display:flex;justify-content:space-between;gap:10px;font-size:9px;color:#939887;border-top:1px solid var(--line);padding:13px 0 18px}
.back-live{position:absolute;left:50%;bottom:15px;transform:translateX(-50%);background:#fffefa;box-shadow:0 4px 20px #26342518;border:1px solid #c8d3bf;border-radius:25px;color:var(--green);padding:12px 22px;min-height:46px;font-size:12px;white-space:nowrap}
.load-earlier{display:block;margin:18px auto 0;background:none;border:1px solid var(--line);border-radius:5px;font-size:12px;color:var(--green);padding:12px;min-height:44px}
dialog{border:1px solid var(--line);border-radius:13px;padding:27px;max-width:560px;width:calc(100% - 30px);background:var(--paper);color:inherit;max-height:90dvh;overflow:auto;box-shadow:0 20px 80px #172a2526}
dialog::backdrop{background:#26332b65;backdrop-filter:blur(3px)}
.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}
.dialog-heading h2{font-size:20px;font-weight:550;margin:0}
.dialog-heading button{border:0}
dialog label:not(.check-label){display:block;font-size:12px;margin:20px 0 8px}
dialog textarea{font-size:14px;resize:vertical}
dialog .check-label{margin-top:20px}
dialog .primary{width:100%}
.export-options{display:flex;gap:12px;margin-top:25px}
.export-options button{flex:1}
@media(min-width:1600px){.workspace{border-left:1px solid var(--line);border-right:1px solid var(--line)}
}
@media(max-width:900px){.workspace{grid-template-columns:185px minmax(0,1fr)}
.sidebar{padding:28px 14px}
.main{padding:28px 24px 0}
.capture-main{padding:17px}
.capture-foot{padding:9px 17px;align-items:flex-start;flex-wrap:wrap}
.consent-area{padding:0 17px 15px}
.lecture-header h1{font-size:25px}
.record-actions{gap:4px}
.record-actions button{padding:7px}
.login-screen{gap:7%;padding:20px 30px}
.login-card{padding:28px}
.topbar{padding:0 26px}
.segment-chinese{font-size:17px}
}
@media(max-width:650px){.topbar{height:68px;padding:0 19px;gap:12px}
.brand{font-size:22px;gap:8px}
.brand small{font-size:9px;letter-spacing:2px;margin-left:4px}
.brand-mark{font-size:24px;width:24px}
.preview-badge{font-size:9px;padding:4px 6px}
.account{font-size:10px;gap:1px}
#account-label{max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.disclaimer{font-size:10px;padding:8px 12px}
.disclaimer span{display:none}
.login-screen{display:block;margin:35px auto;padding:10px 23px;max-width:470px}
.welcome-copy .eyebrow{font-size:9px}
.welcome-copy h1{font-size:38px;line-height:1.5;margin-bottom:16px}
.welcome-copy>p:not(.eyebrow){font-size:13px}
.welcome-copy br{display:none}
.welcome-copy h1 br{display:block}
.welcome-line,.welcome-copy>.small{display:none}
.login-card{margin-top:30px;padding:25px}
.workspace{height:auto;min-height:calc(100dvh - 102px);display:flex;flex-direction:column}
.sidebar{border-right:0;border-bottom:1px solid var(--line);padding:13px 19px;display:block}
.sidebar-top{display:flex;align-items:center;gap:10px}
.sidebar .eyebrow,.sidebar h2,.history-heading,.local-note{display:none}
.sidebar .button{width:auto;min-height:42px;padding:9px 13px;flex:none}
#history-list{display:flex;gap:6px;overflow-x:auto;max-height:95px;margin-top:9px;padding-bottom:3px}
#history-list:empty{display:none}
.history-item{min-width:150px;width:150px;padding:9px 12px;min-height:58px;margin:0}
.history-item strong{font-size:11px}
.history-item span{font-size:9px;margin-top:5px}
.main{height:calc(100dvh - 105px);min-height:630px;padding:24px 20px 0}
.lecture-header{gap:10px}
.lecture-header .eyebrow{font-size:9px;letter-spacing:1.5px;margin-bottom:10px}
.lecture-header h1{font-size:25px}
.lecture-header .small{font-size:10px!important;line-height:1.7;max-width:240px}
.record-actions{align-self:flex-start;padding-top:12px}
.record-actions button{font-size:10px;min-width:40px;padding:6px}
.capture-panel{margin:20px 0}
.capture-main{padding:16px 14px;gap:10px}
.capture-main strong{font-size:12px}
.capture-main p{font-size:10px!important;margin-left:16px;max-width:190px;line-height:1.65}
.capture-main>.button{padding:11px 13px;min-width:112px;font-size:12px;flex:none}
.consent-area{padding:0 14px 13px}
.check-label{font-size:10px;line-height:1.8;gap:8px}
.capture-foot{padding:9px 14px;font-size:9px;gap:8px}
.capture-foot>span{max-width:190px;line-height:1.6}
.wake-label{font-size:9px}
.reading-top{padding-bottom:13px;font-size:10px}
.reading-top>.small{font-size:9px!important}
.segment{padding:20px 0 15px}
.segment-chinese{font-size:17px;line-height:1.95}
.segment-top{font-size:9px;margin-bottom:7px}
.segment details{margin-top:8px;font-size:11px}
.reading-footer{font-size:8px;line-height:1.7;padding-bottom:max(13px,env(safe-area-inset-bottom))}
.reading-footer span:last-child{max-width:170px;text-align:right}
.empty-state{padding:40px 0 30px}
.empty-state h2{font-size:17px}
.empty-state p{font-size:11px}
.feedback-trigger{font-size:9px}
.notice{font-size:11px;padding:10px 20px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}