*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;}
html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;background:#f5f7fa;overflow:hidden;overscroll-behavior:none;}
body{display:flex;flex-direction:column;padding:env(safe-area-inset-top) 14px calc(env(safe-area-inset-bottom) + 6px);}
:root{--fs:22px;}
body.size-small{--fs:18px;}
body.size-medium{--fs:22px;}
body.size-large{--fs:28px;}

.header{display:flex;align-items:center;justify-content:space-between;padding:6px 2px 10px;flex-shrink:0;gap:6px;}
.title-wrap{display:flex;align-items:center;gap:6px;min-width:0;}
.title{font-size:var(--fs);font-weight:700;color:#1a1a1a;white-space:nowrap;}
.clear-btn{background:none;border:none;font-size:calc(var(--fs)*0.75);color:#888;padding:4px 8px;border-radius:6px;cursor:pointer;white-space:nowrap;}
.clear-btn:active{background:#eee;color:#d32f2f;}
.size-btns{display:flex;gap:4px;flex-shrink:0;}
.size-btn{padding:6px 9px;border:1px solid #d8dde3;border-radius:8px;background:#fff;font-size:14px;color:#555;cursor:pointer;font-weight:600;}
.size-btn.active{background:#4a90d9;color:#fff;border-color:#4a90d9;box-shadow:0 1px 3px rgba(74,144,217,.3);}

.speaker-indicator{display:flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;margin-bottom:10px;font-size:calc(var(--fs)*0.95);font-weight:600;transition:background-color .2s,color .2s,transform .15s;flex-shrink:0;min-height:54px;line-height:1.35;text-align:center;}
.speaker-indicator.idle{background:#eef0f3;color:#8a939c;}
.speaker-indicator.elderly{background:#e3f2fd;color:#1976d2;}
.speaker-indicator.other{background:#e8f5e9;color:#2e7d32;}
.speaker-indicator .icon{font-size:calc(var(--fs)*1.15);margin-right:8px;flex-shrink:0;}

.transcript{flex:1;background:#fff;border-radius:14px;padding:14px 15px;overflow-y:auto;-webkit-overflow-scrolling:touch;margin-bottom:10px;border:1px solid #e4e7eb;box-shadow:0 1px 3px rgba(0,0,0,.04);position:relative;}
.transcript::-webkit-scrollbar{width:4px;}
.transcript::-webkit-scrollbar-thumb{background:#d0d5da;border-radius:2px;}
.transcript p{font-size:var(--fs);line-height:1.6;margin-bottom:10px;color:#1a1a1a;word-break:break-word;padding:4px 0;}
.transcript p:last-child{margin-bottom:0;}
.transcript p.elderly-speech{color:#1976d2;margin-bottom:6px;}
.transcript p.interim{color:#7a8189;}
.transcript p.transcript-error{color:#d32f2f;font-size:calc(var(--fs)*0.8);background:#fff5f5;padding:8px 10px;border-radius:8px;margin:4px 0;}
.transcript p.transcript-empty{color:#b0b5bc;font-style:italic;font-size:calc(var(--fs)*0.8);}
.transcript p .timestamp{color:#b5bac0;font-size:60%;margin-right:8px;font-weight:400;}
.empty-hint{color:#c0c4ca;text-align:center;padding:30px 0;font-size:calc(var(--fs)*0.9);line-height:1.7;}
.empty-hint .big{font-size:150%;display:block;margin-bottom:10px;}

.status-bar{text-align:center;font-size:calc(var(--fs)*0.8);color:#8a939c;padding:2px 0 10px;flex-shrink:0;min-height:20px;line-height:1.4;}
.status-bar.recording{color:#d32f2f;font-weight:500;}
.status-bar.recording::before{content:'●';margin-right:5px;display:inline-block;animation:pulse 1s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.85);}}

.actions{display:flex;gap:9px;padding-bottom:4px;flex-shrink:0;}
.btn{flex:1;padding:16px 10px;border:none;border-radius:14px;font-size:calc(var(--fs)*1.02);font-weight:700;cursor:pointer;transition:transform .12s,filter .15s,opacity .15s;color:#fff;min-height:68px;display:flex;align-items:center;justify-content:center;flex-direction:column;line-height:1.25;user-select:none;}
.btn:active:not(:disabled){transform:scale(.97);filter:brightness(.95);}
.btn:disabled{opacity:.55;cursor:allowed;filter:grayscale(.3);}
.btn-main{background:linear-gradient(135deg,#5ba0e9,#4a90d9);box-shadow:0 3px 10px rgba(74,144,217,.28);}
.btn-main.recording{background:linear-gradient(135deg,#f05545,#e53935);box-shadow:0 3px 10px rgba(229,57,53,.28);}
.btn-secondary{background:linear-gradient(135deg,#90a4ae,#78909c);box-shadow:0 3px 10px rgba(120,144,156,.2);}
.btn-sub{font-size:62%;font-weight:400;opacity:.85;margin-top:4px;}
.btn-spinner::after{content:'';display:inline-block;width:14px;height:14px;margin-left:8px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;}
@keyframes spin{to{transform:rotate(360deg);}}

.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:flex-end;justify-content:center;z-index:9999;padding:0;backdrop-filter:blur(2px);}
@media (min-width:500px){.modal-mask{align-items:center;padding:20px;}}
.modal-mask.open{display:flex;}
.modal{background:#fff;border-radius:20px 20px 0 0;padding:22px 20px 24px;width:100%;max-width:460px;max-height:90vh;overflow-y:auto;box-shadow:0 -6px 30px rgba(0,0,0,.15);animation:slideUp .25s ease-out;}
@media (min-width:500px){.modal{border-radius:20px;animation:pop .2s ease-out;}}
@keyframes slideUp{from{transform:translateY(20px);opacity:.7;}to{transform:translateY(0);opacity:1;}}
@keyframes pop{from{transform:scale(.96);opacity:.7;}to{transform:scale(1);opacity:1;}}
.modal h3{font-size:22px;margin-bottom:12px;color:#1a1a1a;font-weight:700;}
.modal p{font-size:17px;line-height:1.6;color:#444;margin-bottom:10px;}
.modal .sentence{background:#f0f7ff;border:2px dashed #4a90d9;border-radius:12px;padding:14px 16px;font-size:19px;line-height:1.55;color:#1a1a1a;margin:14px 0;text-align:center;font-weight:500;}
.modal .progress{height:10px;background:#eef0f3;border-radius:5px;overflow:hidden;margin:14px 0;}
.modal .progress-fill{height:100%;background:linear-gradient(90deg,#4a90d9,#5ba0e9);width:0%;transition:width .08s linear;}
.modal .error-box{background:#fdecea;border:1px solid #f5c2c0;color:#c62828;border-radius:12px;padding:12px 14px;margin:12px 0;font-size:15.5px;line-height:1.55;}
.modal .error-box ul{margin-top:6px;padding-left:4px;}
.modal .error-box li{margin:4px 0 4px 20px;list-style:decimal;}
.modal-btns{display:flex;gap:10px;margin-top:18px;}
.modal-btns .btn{min-height:52px;font-size:17px;padding:12px 8px;}

.toast{position:fixed;top:22%;left:50%;transform:translate(-50%,0);background:rgba(20,24,30,.82);color:#fff;padding:12px 20px;border-radius:10px;font-size:16px;line-height:1.5;z-index:10000;opacity:0;transition:opacity .25s;pointer-events:none;max-width:85vw;text-align:center;white-space:pre-line;backdrop-filter:blur(6px);box-shadow:0 4px 20px rgba(0,0,0,.2);}
.toast.show{opacity:1;}

.confirm-box{background:#fff;border-radius:18px;padding:24px;width:100%;max-width:340px;box-shadow:0 10px 40px rgba(0,0,0,.2);animation:pop .2s ease-out;}
.confirm-box h4{font-size:20px;margin-bottom:10px;color:#1a1a1a;}
.confirm-box p{font-size:16px;color:#555;line-height:1.55;margin-bottom:20px;}
.confirm-btns{display:flex;gap:10px;}
.confirm-btns button{flex:1;padding:12px;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;}
.btn-confirm-cancel{background:#eef0f3;color:#444;}
.btn-confirm-ok{background:#e53935;color:#fff;}