/* 公共基础与通用控件 */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-ui);font-size:15px;line-height:1.55;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
svg{display:block}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
.ic{width:20px;height:20px;flex:none}
.ic-sm{width:16px;height:16px}
.muted{color:var(--muted)}
.na{color:var(--muted);font-style:italic;font-size:.92em}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.spacer{flex:1}
.wrap{max-width:1280px;margin:0 auto;padding:16px}
h1{font-size:22px;margin:8px 0 12px;line-height:1.3}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 14px;border-radius:var(--r-btn);border:1px solid var(--line);background:var(--surface);font-weight:500;white-space:nowrap;text-decoration:none;transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.icon{width:40px;padding:0}
.btn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-btn);overflow:hidden;background:var(--surface)}
.seg button{border:0;background:transparent;min-height:34px;padding:0 12px;font-size:13px;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.chip{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:999px;font-size:12px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
button.chip{min-height:34px;padding:0 13px;font-size:13px;border:1px solid var(--line);transition:all var(--t-fast)}
button.chip[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent)}
.tag-pub,.tag-mine{display:inline-block;font-size:11px;font-weight:600;padding:1px 6px;border-radius:4px;vertical-align:middle}
.tag-pub{background:var(--pub-soft);color:var(--pub)}
.tag-mine{background:var(--mine-soft);color:var(--mine-ink)}
.input{width:100%;min-height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg)}
textarea.input{min-height:96px;resize:vertical}
.field{display:flex;flex-direction:column;gap:6px}
.prog{height:4px;background:var(--surface-3);border-radius:2px;overflow:hidden}
.prog>i{display:block;height:100%;background:var(--accent);border-radius:2px}

/* 字幕词语标记样式见 marks.css（多个模板可切换） */
.savebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;min-height:22px;margin-top:6px}
.st-saving{color:var(--muted)}.st-saved{color:var(--ok)}.st-failed,.st-conflict{color:var(--danger)}

/* 状态屏 */
.state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:48px 20px;color:var(--muted);animation:enter var(--t-slow) var(--ease) both}
.state h2{margin:0;font-size:18px;color:var(--fg)}
.state p{margin:0;max-width:34em}
.state .ic{width:36px;height:36px;opacity:.7}

/* 加载：延迟出现的骨架 + 柔和微光；内容淡入上移。偏好减少动态时全部关闭 */
.skel{position:relative;overflow:hidden;background:var(--surface);border-radius:var(--r-md)}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.045),transparent);animation:shine 1.6s var(--ease) infinite}
.skel-wrap{animation:fadein .3s ease both}
@keyframes shine{to{transform:translateX(100%)}}
@keyframes fadein{from{opacity:0}}
@keyframes enter{from{opacity:0;transform:translateY(8px)}}
.enter{animation:enter var(--t-slow) var(--ease) both}
.enter-stagger>*{animation:enter var(--t-slow) var(--ease) both}
.enter-stagger>*:nth-child(2){animation-delay:.03s}.enter-stagger>*:nth-child(3){animation-delay:.06s}.enter-stagger>*:nth-child(4){animation-delay:.09s}
.enter-stagger>*:nth-child(5){animation-delay:.12s}.enter-stagger>*:nth-child(6){animation-delay:.15s}.enter-stagger>*:nth-child(n+7){animation-delay:.18s}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--accent);animation:rot .9s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition:none!important}}
html.calm *,html.calm *::before,html.calm *::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition:none!important}

/* 弹层：对话框、底部面板 / 右侧抽屉 */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:60;animation:fadein var(--t-mid) ease both}
.modal-bg{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:70;padding:16px;background:rgba(0,0,0,.5);animation:fadein var(--t-mid) ease both}
.modal{background:var(--surface);border-radius:var(--r-lg);max-width:440px;width:100%;max-height:90dvh;overflow:auto;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.4);animation:enter var(--t-mid) var(--ease) both}
.modal h2{margin:0 0 12px;font-size:18px}
.panel{position:fixed;z-index:65;background:var(--surface);display:flex;flex-direction:column;box-shadow:0 -10px 40px rgba(0,0,0,.45);left:0;right:0;bottom:0;max-height:78dvh;border-radius:var(--r-lg) var(--r-lg) 0 0;animation:up var(--t-mid) var(--ease) both}
.panel-h{display:flex;align-items:center;gap:8px;padding:10px 12px 6px 16px}
.panel-h strong{flex:1}
.panel-b{overflow:auto;padding:0 16px calc(16px + env(safe-area-inset-bottom));overscroll-behavior:contain}
@keyframes up{from{transform:translateY(100%)}}
@keyframes side{from{transform:translateX(100%)}}
@media (min-width:760px){
  .panel{left:auto;top:0;width:min(400px,92vw);max-height:none;border-radius:var(--r-lg) 0 0 var(--r-lg);animation-name:side;box-shadow:-10px 0 40px rgba(0,0,0,.45)}
}
.toast{position:fixed;left:50%;bottom:calc(24px + var(--toast-lift,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:12px;z-index:80;font-size:14px;max-width:90vw;animation:enter var(--t-mid) var(--ease) both}

/* 常驻提示（不自动消失）：顶部居中，在学习页的视频上方也可见 */
.notices{position:fixed;left:50%;top:calc(8px + env(safe-area-inset-top));transform:translateX(-50%);z-index:85;display:grid;gap:8px;width:min(560px,calc(100vw - 20px));pointer-events:none}
.notice{pointer-events:auto;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;border-radius:12px;background:#2a1d1d;border:1px solid rgba(255,123,123,.45);color:#ffd9d9;font-size:13px;line-height:1.45;box-shadow:0 10px 30px rgba(0,0,0,.45);animation:enter var(--t-mid) var(--ease) both}
.notice.info{background:#262116;border-color:rgba(242,184,75,.45);color:var(--accent-ink)}
.notice>span{flex:1;min-width:0}
.notice .btn.mini{min-height:30px;padding:0 12px;font-size:12px;flex:none}
.notice .btn.icon{width:30px;min-height:30px;flex:none;color:inherit}
/* 同步状态：只在离线或有记录没传上去时出现 */
.syncpill{position:fixed;left:12px;bottom:calc(12px + var(--demo-lift,0px));z-index:40;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(24,27,34,.95);color:var(--muted);font-size:12px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.syncpill.off{color:#ffd9d9;border-color:rgba(255,123,123,.45)}
.syncpill button{border:0;background:none;color:var(--accent-ink);padding:0 0 0 4px;font-size:12px}

/* 词卡、列表 */
.wc-w{font-size:22px;font-family:var(--font-sub)}
.wc-meta{font-size:13px;color:var(--muted);margin-top:2px}
.wc-def{margin-top:6px}
.wc-plain{margin-top:8px;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:14px}
.wc-plain p{margin:0}.wc-plain p+p{margin-top:4px;font-size:13px}
.wc-mynote{margin-top:8px;font-size:14px}
.wl h3{font-size:14px;margin:14px 0 4px;display:flex;align-items:center;gap:6px}
.wl ul{list-style:none;margin:0;padding:0}
.wl-item{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;width:100%;text-align:left;padding:10px 4px;border:0;border-bottom:1px solid var(--line);background:transparent}
.wl-item:hover{background:var(--surface-2)}
.wl-w{font-weight:600;font-family:var(--font-sub)}
.wl-d{flex-basis:100%;font-size:14px}
.wl-src{flex-basis:100%;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 演示控制（不属于正式界面） */
.demo{position:fixed;right:10px;bottom:calc(10px + var(--demo-lift,0px));z-index:90;font:12px/1.4 system-ui,sans-serif;color:#111}
.demo>button{background:#000;color:#fff;border:1px solid #444;border-radius:999px;padding:5px 11px;opacity:.75}
.demo .pnl{position:absolute;right:0;bottom:34px;width:240px;background:#fff;border-radius:10px;padding:10px;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.demo .pnl b{display:block;margin:6px 0 4px}
.demo .pnl button{margin:2px;padding:3px 7px;border:1px solid #bbb;border-radius:6px;background:#f3f3f3;color:#111}
.demo .pnl button.on{background:#111;color:#fff}
.demo .pnl a{color:#0b57d0}
.demo-flag{display:inline-block;font-size:11px;padding:1px 6px;border-radius:4px;background:#fff3c4;color:#6b4e00;border:1px dashed #c9a400;font-style:normal}