:root{--primary:#4f46e5;--red:#ef4444;}

/* Shared styles for content-script + pages */
.vb-highlight-word{
  background: rgba(255, 230, 0, 0.45) !important;
  border-radius: 4px !important;
  padding: 0 2px !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.vb-highlight-word.vb-green{
  background: rgba(34, 197, 94, 0.28) !important;
}
.vb-highlight-word.vb-yellow{
  background: rgba(245, 158, 11, 0.28) !important;
}
.vb-highlight-word.vb-purple{
  background: rgba(124, 58, 237, 0.20) !important;
}

button{font-family:inherit;}
code{background:#f3f4f6;padding:2px 6px;border-radius:8px;}

/* ===== Test page (Ebbinghaus) ===== */
html.test-body, html.test-body body{height:100%;}
html.test-body body{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(1200px 800px at 15% 10%, rgba(59,130,246,.18), transparent 60%),
              radial-gradient(900px 600px at 85% 20%, rgba(124,58,237,.16), transparent 60%),
              linear-gradient(180deg, #0b1220 0%, #0b1220 100%);
}

.test-window{
  width:min(980px, calc(100vw - 40px));
  height:min(720px, calc(100vh - 40px));
  display:flex;
  flex-direction:column;
  background: rgba(255,255,255,.96);
  border-radius: 22px;
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  overflow:hidden;
}

.test-card-face{
  position:absolute;
  inset:0;
  padding:34px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  backface-visibility:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

@media (max-width: 560px){
  .test-window{width:calc(100vw - 24px); height:calc(100vh - 24px); border-radius:18px;}
  .test-card-face{padding:22px;}
}


/* Speak button press feedback */
.speak{border:none;background:transparent;cursor:pointer;font-size:14px;line-height:1;}
.speak.pressed{transform:scale(0.92);opacity:0.75;}
.speak:active{transform:scale(0.92);}


/* test-ui */
.test-body, .test-body body{height:100%;}
.test-window{width:min(1100px, calc(100vw - 64px)); height:min(820px, calc(100vh - 40px)); margin:20px auto; background:#fff; border-radius:22px; box-shadow:0 30px 80px rgba(0,0,0,.18); overflow:hidden; display:flex; flex-direction:column; position:relative;}
.test-card-face{position:absolute; inset:0; background:#fff; border-radius:22px; box-shadow:0 12px 35px rgba(0,0,0,.08); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:46px 60px; backface-visibility:hidden;}
.test-card-area{padding:28px !important}
.primary-btn:active{transform:scale(.98)}
.test-rate-btn:active{transform:scale(.98)}
.test-rate-btn{box-shadow:0 10px 24px rgba(0,0,0,.12);transition:filter .18s ease, opacity .18s ease, box-shadow .18s ease, transform .18s ease}
.test-rate-btn.is-last{box-shadow:0 0 0 3px rgba(79,70,229,.30), 0 14px 26px rgba(0,0,0,.22); transform:translateY(-1px)}
.test-card-back{
  overflow-y:auto;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:rgba(99,102,241,.45) rgba(0,0,0,0);
}
.test-card-back::-webkit-scrollbar{width:8px}
.test-card-back::-webkit-scrollbar-track{background:transparent}
.test-card-back::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(99,102,241,.42) 0%, rgba(79,70,229,.55) 100%);
  border-radius:999px;
  border:2px solid rgba(255,255,255,.75);
}
.test-card-back::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(79,70,229,.60) 0%, rgba(67,56,202,.70) 100%);
}
.test-watermark{
  position:absolute;
  right:56px;
  bottom:54px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(99,102,241,.16);
  background:rgba(255,255,255,.58);
  backdrop-filter: blur(2px);
  color:rgba(67,56,202,.48);
  font-weight:900;
  font-size:11px;
  letter-spacing:.08em;
  pointer-events:none;
  user-select:none;
  z-index:5;
}
.test-watermark img{
  width:18px;
  height:18px;
  border-radius:6px;
  opacity:.56;
}
#test-status-bar{
  margin:8px 30px 10px;
  min-height:38px;
  padding:0 14px;
  border:1px solid rgba(79,70,229,.18);
  border-radius:10px;
  background:#eef2ff;
  line-height:1.35;
  transition:background .18s ease, border-color .18s ease;
}
#test-status-bar > div{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) 320px;
  align-items:center;
  min-height:38px;
  gap:10px;
}
#test-status-text{font-size:12px;font-weight:800;color:#243166}
#test-status-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#test-hotkeys-inline{font-size:12px;color:#5f6890;white-space:nowrap;text-align:right;justify-self:end}
#test-status-bar.is-pending-flip{
  background:#e9f1ff;
  border-color:#b8caff;
}
#test-status-bar.is-pending-flip #test-status-text::before{
  content:"🔒 ";
}
.word-note-purple{
  background:rgba(109,40,217,.10);
  border:1px solid rgba(109,40,217,.25);
  border-radius:12px;
  color:#5b21b6;
  font-weight:700;
  line-height:1.55;
  padding:10px 12px;
}
#test-srs-controls.is-disabled{opacity:1}
#test-srs-controls.is-disabled .test-rate-btn{
  cursor:not-allowed;
  opacity:.72;
  filter:saturate(.42) contrast(.95) brightness(1.03);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
#test-config-summary{min-height:38px}
#cfg-summary-text{line-height:1.4}
#test-empty-overlay h2{font-weight:900}
#test-empty-overlay button:active{transform:scale(.98)}

/* Test page dark-mode overrides (fix inline light colors) */
html.test-body.vb-dark body,
html.test-body body.vb-force-dark{
  background:
    radial-gradient(1200px 800px at 10% 8%, rgba(59,130,246,.16), transparent 58%),
    radial-gradient(900px 600px at 90% 10%, rgba(124,58,237,.22), transparent 60%),
    linear-gradient(180deg, #09061a 0%, #0b0720 100%) !important;
}
html.test-body.vb-dark .test-window,
html.test-body body.vb-force-dark .test-window{
  background: rgba(26,20,48,.96) !important;
  border: 1px solid var(--vb-border) !important;
  box-shadow: 0 20px 55px rgba(0,0,0,.5) !important;
  color: var(--vb-text) !important;
}
html.test-body.vb-dark .test-header,
html.test-body.vb-dark .test-config,
html.test-body.vb-dark #test-srs-controls,
html.test-body body.vb-force-dark .test-header,
html.test-body body.vb-force-dark .test-config,
html.test-body body.vb-force-dark #test-srs-controls{
  border-color: var(--vb-border) !important;
}
html.test-body.vb-dark .test-header,
html.test-body body.vb-force-dark .test-header{
  background: rgba(20,15,40,.96) !important;
}
html.test-body.vb-dark .test-header > div[style*="height:8px"],
html.test-body body.vb-force-dark .test-header > div[style*="height:8px"]{
  background: rgba(167,139,250,.18) !important;
}
html.test-body.vb-dark #test-idx,
html.test-body body.vb-force-dark #test-idx{
  color: var(--vb-muted) !important;
}
html.test-body.vb-dark #test-close,
html.test-body body.vb-force-dark #test-close{
  color: #fca5a5 !important;
}
html.test-body.vb-dark .test-config > div > span,
html.test-body body.vb-force-dark .test-config > div > span{
  color: var(--vb-muted) !important;
}
html.test-body.vb-dark .test-config label,
html.test-body body.vb-force-dark .test-config label{
  background: rgba(167,139,250,.12) !important;
  border-color: var(--vb-border) !important;
}
html.test-body.vb-dark .test-config label span,
html.test-body body.vb-force-dark .test-config label span{
  color: var(--vb-text) !important;
}
html.test-body.vb-dark #cfg-limit,
html.test-body body.vb-force-dark #cfg-limit{
  background: rgba(15,23,42,.42) !important;
  border-color: var(--vb-border) !important;
  color: var(--vb-text) !important;
}
html.test-body.vb-dark #cfg-limit::placeholder,
html.test-body body.vb-force-dark #cfg-limit::placeholder{
  color: rgba(237,233,254,.55) !important;
}
html.test-body.vb-dark #test-config-summary,
html.test-body body.vb-force-dark #test-config-summary{
  color: var(--vb-text) !important;
}
html.test-body.vb-dark #cfg-summary-text,
html.test-body body.vb-force-dark #cfg-summary-text{
  color: var(--vb-muted) !important;
}
html.test-body.vb-dark #cfg-edit,
html.test-body.vb-dark #test-empty-back,
html.test-body.vb-dark #test-status-bar,
html.test-body body.vb-force-dark #cfg-edit,
html.test-body body.vb-force-dark #test-empty-back,
html.test-body body.vb-force-dark #test-status-bar{
  background: rgba(167,139,250,.14) !important;
  border-color: var(--vb-border) !important;
  color: var(--vb-text) !important;
}
html.test-body.vb-dark #test-status-bar.is-pending-flip,
html.test-body body.vb-force-dark #test-status-bar.is-pending-flip{
  background: rgba(99,102,241,.26) !important;
  border-color: rgba(167,139,250,.62) !important;
}
html.test-body.vb-dark #test-status-text,
html.test-body.vb-dark #test-hotkeys-inline,
html.test-body body.vb-force-dark #test-status-text,
html.test-body body.vb-force-dark #test-hotkeys-inline{
  color: var(--vb-text) !important;
}
html.test-body.vb-dark .test-card-back,
html.test-body body.vb-force-dark .test-card-back{
  scrollbar-color:rgba(167,139,250,.65) rgba(0,0,0,0);
}
html.test-body.vb-dark .test-card-back::-webkit-scrollbar-thumb,
html.test-body body.vb-force-dark .test-card-back::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(167,139,250,.62) 0%, rgba(139,92,246,.68) 100%);
  border-color:rgba(12,18,44,.75);
}
html.test-body.vb-dark .test-watermark,
html.test-body body.vb-force-dark .test-watermark{
  background:rgba(14,20,48,.42);
  border-color:rgba(167,139,250,.24);
  color:rgba(196,181,253,.56);
}
html.test-body.vb-dark .test-watermark img,
html.test-body body.vb-force-dark .test-watermark img{
  opacity:.5;
}
html.test-body.vb-dark .word-note-purple,
html.test-body body.vb-force-dark .word-note-purple{
  background:rgba(139,92,246,.22);
  border-color:rgba(167,139,250,.46);
  color:#ddd6fe;
}
html.test-body.vb-dark .test-card-face,
html.test-body body.vb-force-dark .test-card-face{
  background: rgba(12,18,44,.84) !important;
  border: 1px solid var(--vb-border) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.42) !important;
}
html.test-body.vb-dark #test-cloze-container,
html.test-body body.vb-force-dark #test-cloze-container{
  color: var(--vb-muted) !important;
}
html.test-body.vb-dark #test-q-word,
html.test-body.vb-dark #test-ans-word,
html.test-body body.vb-force-dark #test-q-word,
html.test-body body.vb-force-dark #test-ans-word{
  color: var(--vb-text) !important;
}
html.test-body.vb-dark #test-ans-def,
html.test-body.vb-dark #test-ans-def div,
html.test-body body.vb-force-dark #test-ans-def,
html.test-body body.vb-force-dark #test-ans-def div{
  color: var(--vb-text) !important;
}
html.test-body.vb-dark .test-card-face[style*="rotateY"] > div[style*="height:1px"],
html.test-body body.vb-force-dark .test-card-face[style*="rotateY"] > div[style*="height:1px"]{
  background: var(--vb-border) !important;
}
html.test-body.vb-dark .test-card-face p,
html.test-body body.vb-force-dark .test-card-face p{
  color: var(--vb-muted) !important;
}
html.test-body.vb-dark #test-srs-controls,
html.test-body body.vb-force-dark #test-srs-controls{
  background: rgba(20,15,40,.96) !important;
}
html.test-body.vb-dark #test-finish-overlay,
html.test-body body.vb-force-dark #test-finish-overlay{
  background: rgba(12,10,30,.98) !important;
}
html.test-body.vb-dark #test-empty-overlay,
html.test-body body.vb-force-dark #test-empty-overlay{
  background: rgba(12,10,30,.98) !important;
}
html.test-body.vb-dark #test-finish-overlay h2,
html.test-body.vb-dark #test-finish-overlay #test-encourage,
html.test-body body.vb-force-dark #test-finish-overlay h2,
html.test-body body.vb-force-dark #test-finish-overlay #test-encourage{
  color: var(--vb-text) !important;
}
html.test-body.vb-dark #test-empty-overlay h2,
html.test-body.vb-dark #test-empty-overlay #test-empty-desc,
html.test-body body.vb-force-dark #test-empty-overlay h2,
html.test-body body.vb-force-dark #test-empty-overlay #test-empty-desc{
  color: var(--vb-text) !important;
}
html.test-body.vb-dark #test-finish-overlay #test-summary,
html.test-body body.vb-force-dark #test-finish-overlay #test-summary{
  color: var(--vb-muted) !important;
}
html.test-body.vb-dark #test-report,
html.test-body body.vb-force-dark #test-report{
  background: rgba(19,15,38,.9) !important;
  border-color: var(--vb-border) !important;
}
html.test-body.vb-dark #test-report-mode,
html.test-body.vb-dark #test-report-weak,
html.test-body.vb-dark #test-report-next,
html.test-body.vb-dark #test-report-time,
html.test-body body.vb-force-dark #test-report-mode,
html.test-body body.vb-force-dark #test-report-weak,
html.test-body body.vb-force-dark #test-report-next,
html.test-body body.vb-force-dark #test-report-time{
  color: var(--vb-text) !important;
}


/* fix40: Manager header spacing */
.topbar{
  flex-wrap: wrap;
  row-gap: 10px;
}
.topbar .title{
  line-height: 1.1;
}
.topbar .sub{
  margin-top: 4px;
}



/* --- Manager stable UI helpers --- */
.iconBtn{border:1px solid rgba(0,0,0,.12);background:#fff;border-radius:12px;padding:8px 10px;font-weight:800;cursor:pointer}
.iconBtn:hover{filter:brightness(.98)}
.iconBtn.pressed{transform:scale(.97);filter:brightness(.95)}
.iconBtn.pron{background:#111827;color:#fff;border-color:#111827}
.iconBtn.danger{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.iconBtn.note{background:rgba(170,90,255,.18);color:#6d28d9;border-color:rgba(170,90,255,.35)}
.muted{color:rgba(17,24,39,.55);font-weight:700}
.st{display:inline-flex;align-items:center;justify-content:center;padding:8px 10px;border-radius:999px;font-weight:900;font-size:12px;width:max-content}
.st-red{background:#fee2e2;color:#991b1b}
.st-yellow{background:#fef3c7;color:#92400e}
.st-green{background:#dcfce7;color:#166534}
.st-note{background:rgba(170,90,255,.18);color:#6d28d9}

/* status pill is used as a button in manager */
.st{border:0;cursor:pointer}
.st:focus{outline:2px solid rgba(59,130,246,0.5);outline-offset:2px}
.meaning{line-height:1.35}
.center{text-align:center}
.right{text-align:right}

/* 2.50.2: Sentence operations padding fix */
#tblSent th:last-child, #tblSent td:last-child { padding-left: 0; padding-right: 12px; text-align: center; }

/* 2.50.4: sentence page padding match words page (no side strips) */
#sentWrap, #wordsWrap{padding-left:0 !important; padding-right:0 !important;}


/* === 2.50.5 Sentence Card UI === */
.sent-cards{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.word-cards{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:0;
}

.word-card{
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(0,0,0,0.06);
  border-radius:16px;
  padding:14px 18px;
  box-shadow:0 6px 18px rgba(0,0,0,0.05);
  overflow:visible;
  box-sizing:border-box;
  width:100%;
}

.word-card-row{
  display:flex;
  gap:12px;
  align-items:center;
  width:100%;
}

.word-check{
  width:44px;
  display:flex;
  justify-content:center;
  padding-top:4px;
}

.word-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

.word-left{
  flex:0 0 170px;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.word-meaning-col{
  flex:1 1 320px;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.word-title{
  font-weight:900;
  font-size:18px;
  line-height:1.2;
}

.word-phon{
  margin-top:6px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.pronRow{display:flex;gap:8px;align-items:center;}

.word-meaning{
  margin-top:8px;
  line-height:1.35;
  word-break:break-word;
}

.word-note{
  margin-top:6px;
  color:#7c3aed; /* Theme Purple */
  font-weight:700;
  word-break:break-word;
}

.word-meta{
  flex:0 0 110px;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
  justify-content:center;
}

.word-actions{
  width:72px;
  flex:0 0 72px;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
}

.word-actions .iconBtn,
.sentence-actions .iconBtn{
  width:44px;
  height:44px;
  padding:0;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  background:transparent;
  border-color:transparent;
  color:inherit;
  font-size:16px;
  line-height:1;
  font-weight:800;
  gap:4px;
}
.word-actions .iconBtn::before,
.sentence-actions .iconBtn::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:60%;
  height:60%;
  border-radius:10px;
  background:var(--icon-bg, #fff);
  border:1px solid var(--icon-bd, rgba(0,0,0,.12));
}
.word-actions .iconBtn > *,
.sentence-actions .iconBtn > *{
  position:relative;
  z-index:1;
}
.icon-emoji{font-size:16px;line-height:1}
.icon-text{font-size:12px;font-weight:900;line-height:1}
.word-actions .iconBtn.link,
.sentence-actions .iconBtn.link{--icon-bg:#dbeafe;--icon-bd:#bfdbfe;color:#1e3a8a}
.word-actions .iconBtn.link::before,
.sentence-actions .iconBtn.link::before{background:var(--icon-bg)}
.word-actions .iconBtn.note,
.sentence-actions .iconBtn.note{--icon-bg:rgba(170,90,255,.18);--icon-bd:rgba(170,90,255,.35);color:#6d28d9}
.word-actions .iconBtn.danger,
.sentence-actions .iconBtn.danger{--icon-bg:#fee2e2;--icon-bd:#fecaca;color:#991b1b}

.sentence-card{
  padding:14px 18px;
}

.sentence-actions{
  flex:0 0 108px;
  width:108px;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
}

#wordsWrap, #sentWrap{overflow:visible;}

.card-action{
  margin-top:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.08);
  background:rgba(255,255,255,0.7);
  font-size:11px;
  font-weight:800;
  color:#334155;
  cursor:pointer;
}

.note-editor{
  margin-top:8px;
  padding:8px;
  border:1px dashed rgba(0,0,0,0.12);
  border-radius:12px;
  background:rgba(255,255,255,0.9);
}
.note-input{
  width:100%;
  min-height:60px;
  resize:vertical;
  border:1px solid rgba(0,0,0,0.12);
  border-radius:10px;
  padding:8px 10px;
  font-size:13px;
  box-sizing:border-box;
}
.note-actions{
  margin-top:8px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.inline-confirm{
  margin-top:10px;
  padding:8px;
  border:1px solid rgba(220,38,38,0.25);
  border-radius:12px;
  background:rgba(254,226,226,0.6);
}
.inline-confirm-text{
  font-size:12px;
  font-weight:800;
  color:#991b1b;
}
.inline-confirm-actions{
  margin-top:8px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

@media (max-width: 1100px){
  .word-left{flex:0 0 150px;}
}
@media (max-width: 900px){
  .word-left{flex:0 0 140px;}
}
@media (max-width: 720px){
  .word-left{flex:1 1 100%;}
  .word-meta{flex:1 1 100%;flex-direction:row;align-items:center;gap:8px}
}

.word-en{
  margin-top:8px;
  padding:8px 10px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:10px;
  background:rgba(248,250,252,.9);
  font-size:12px;
  line-height:1.45;
}
.word-en-title{
  font-weight:900;
  font-size:11px;
  margin-bottom:4px;
  color:#475569;
}
.word-ai-ctx{
  margin-top:8px;
  padding:8px 10px;
  background:rgba(99,102,241,0.06);
  border:1px solid rgba(99,102,241,0.12);
  border-radius:10px;
  font-size:12px;
  line-height:1.6;
}
.word-ai-ctx-title{
  font-weight:900;
  font-size:11px;
  margin-bottom:6px;
  color:#4f46e5;
}
.ai-ctx-field{
  margin-bottom:4px;
  display:flex;
  gap:6px;
}
.ai-ctx-label{
  flex-shrink:0;
  font-weight:700;
  color:#6366f1;
  min-width:64px;
}
.ai-ctx-example{
  font-style:italic;
}
/* AI unified template — coreMeanings */
.ai-ctx-core-meanings{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.ai-ctx-pos-group{
  display:flex;
  align-items:flex-start;
  gap:4px;
}
.ai-ctx-pos{
  font-weight:700;
  color:#7c3aed;
  white-space:nowrap;
}
/* AI unified template — collocations */
.ai-ctx-coll-list{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.ai-ctx-coll-tag{
  display:inline-block;
  background:rgba(99,102,241,0.08);
  border-radius:4px;
  padding:1px 6px;
  font-size:11px;
}
/* AI unified template — examples */
.ai-ctx-examples{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.ai-ctx-example-item{
  font-style:italic;
  line-height:1.5;
}
.word-folds{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.fold-btn{
  border:1px solid rgba(0,0,0,0.08);
  background:rgba(255,255,255,0.7);
  color:#334155;
  font-weight:800;
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  cursor:pointer;
  transition:all 0.15s;
}
.fold-btn:hover{background:rgba(124,58,237,0.08);border-color:rgba(124,58,237,0.2);}
.en-toggle{
  margin-top:8px;
  border:1px solid rgba(59,130,246,0.18);
  background:rgba(219,234,254,0.6);
  color:#1e3a8a;
  font-weight:900;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
}
.en-toggle:hover{filter:brightness(0.98)}

.iconBtn.link{background:#e0f2fe;color:#075985;border-color:#bae6fd}

.sentence-card{
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(0,0,0,0.06);
  border-radius:16px;
  padding:14px 16px;
  box-shadow:0 6px 18px rgba(0,0,0,0.05);
}

.sentence-card-row{
  display:flex;
  gap:12px;
  align-items:center;
}

.sentence-check{
  width:44px;
  display:flex;
  justify-content:center;
  padding-top:4px;
}

.sentence-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.sentence-actions{
  width:92px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
}

.sentence-text{
  font-weight:800;
  line-height:1.3;
}

.sentence-translation{
  margin-top:6px;
  color:#6b7280;
  line-height:1.35;
}

/* Force notes to purple with high specificity to override manager.html */
#wordsWrap .word-note,
#sentCards .sentence-note,
.word-note,
.sentence-note {
  margin-top: 6px;
  color: #7c3aed !important; /* Theme Purple */
  font-weight: 700;
}

.sentence-source-link{
  margin-left:6px;
  font-size:12px;
  color:#2563eb;
  text-decoration:none;
  word-break:break-all;
}
.sentence-source-link:hover{ text-decoration:underline; }

.sentence-meta{
  margin-top:8px;
  font-size:12px;
}

/* Cross-platform flags (avoid emoji fallback on Windows) */
.flag{display:inline-block;width:18px;height:12px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.15);background-size:cover;background-position:center}
.flag-us{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'><rect width='18' height='12' fill='%23b91c1c'/><rect y='1' width='18' height='1' fill='%23ffffff'/><rect y='3' width='18' height='1' fill='%23ffffff'/><rect y='5' width='18' height='1' fill='%23ffffff'/><rect y='7' width='18' height='1' fill='%23ffffff'/><rect y='9' width='18' height='1' fill='%23ffffff'/><rect y='11' width='18' height='1' fill='%23ffffff'/><rect width='7' height='7' fill='%231e3a8a'/></svg>")}
.flag-uk{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'><rect width='18' height='12' fill='%231e3a8a'/><path d='M0 0 L18 12 M18 0 L0 12' stroke='%23ffffff' stroke-width='2'/><path d='M0 0 L18 12 M18 0 L0 12' stroke='%23b91c1c' stroke-width='1'/><rect x='7' width='4' height='12' fill='%23ffffff'/><rect y='4' width='18' height='4' fill='%23ffffff'/><rect x='7.6' width='2.8' height='12' fill='%23b91c1c'/><rect y='4.6' width='18' height='2.8' fill='%23b91c1c'/></svg>")}


/* === 2.50.6 Import modal overflow fix === */
.modal, .dialog, .vb-modal { overflow: hidden; }
.modal .content, .dialog .content, .vb-modal .content { overflow: hidden; }
#importText, #importTextarea, textarea.import-textarea, .import-textarea textarea{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: auto !important;
  white-space: pre !important;
}
.import-body, .import-panel, .import-right{
  min-width: 0 !important;
  overflow: hidden !important;
}


/* Import/Export modal: prevent right overflow */
.modal{max-width:calc(100vw - 48px);}
.modalBd{min-width:0;}
.ioRow{max-width:100%;}
#ioText{width:100%;max-width:100%;box-sizing:border-box;outline:none;border:2px solid #2563eb;}
#ioText:focus{box-shadow:0 0 0 2px rgba(37,99,235,.25);}
.ioBody{overflow:hidden;}

/* Import modal: file info & preview */
#fileInfo{color:#0f172a;}
#ioError{color:#b91c1c;}

/* === Bento Square Buttons (Vocabulary list styling) === */
.bento-sq-btn {
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.88)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  color: #475569;
  position: relative;
}
.bento-sq-btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(241, 245, 249, 0.96)) !important;
  border-color: rgba(148, 163, 184, 0.38) !important;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* Left Status Button inherited modifiers */
.bento-sq-btn.st-red {
  color: #dc2626 !important;
  border-color: rgba(248, 113, 113, 0.38) !important;
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.98), rgba(254, 226, 226, 0.86)) !important;
}
.bento-sq-btn.st-yellow {
  color: #b45309 !important;
  border-color: rgba(251, 191, 36, 0.42) !important;
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(254, 243, 199, 0.88)) !important;
}
.bento-sq-btn.st-green {
  color: #15803d !important;
  border-color: rgba(74, 222, 128, 0.42) !important;
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.98), rgba(220, 252, 231, 0.9)) !important;
}

/* Right Action Buttons (Trash/Pencil) Modifiers */
.bento-sq-btn.danger-act {
  color: #be123c !important; /* Rose-700 (Distinct from specific 'red' status color) */
  border-color: rgba(244, 63, 94, 0.3) !important;
  background: linear-gradient(180deg, rgba(255, 241, 242, 0.98), rgba(255, 228, 230, 0.86)) !important;
}
.bento-sq-btn.danger-act:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 228, 230, 0.96)) !important;
  border-color: rgba(244, 63, 94, 0.45) !important;
}
.bento-sq-btn.edit-act {
  color: #6d28d9 !important; /* Deeper Theme Purple */
  border-color: rgba(139, 92, 246, 0.45) !important;
  background: linear-gradient(180deg, rgba(245, 243, 255, 0.98), rgba(231, 229, 254, 0.9)) !important;
}
.bento-sq-btn.edit-act:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(221, 214, 254, 0.98)) !important;
  border-color: rgba(124, 58, 237, 0.6) !important;
}

/* Custom Status Dot */
.bento-st-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.56), 0 0 8px currentColor;
  margin-right: 5px;
  flex-shrink: 0;
}
.bento-st-dot.red { background: #ef4444; }
.bento-st-dot.yellow { background: #f59e0b; }
.bento-st-dot.green { background: #22c55e; }

/* Dark mode fallbacks */
body.vb-force-dark .bento-sq-btn,
body.vb-dark .bento-sq-btn {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.8)) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  color: #e2e8f0 !important;
}
body.vb-force-dark .bento-sq-btn:hover,
body.vb-dark .bento-sq-btn:hover {
  background: linear-gradient(180deg, rgba(51, 65, 85, 0.8), rgba(30, 41, 59, 0.9)) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
body.vb-force-dark .bento-sq-btn.st-red,
body.vb-dark .bento-sq-btn.st-red { color: #fca5a5 !important; }
body.vb-force-dark .bento-sq-btn.st-yellow,
body.vb-dark .bento-sq-btn.st-yellow { color: #fcd34d !important; }
body.vb-force-dark .bento-sq-btn.st-green,
body.vb-dark .bento-sq-btn.st-green { color: #86efac !important; }
body.vb-force-dark .bento-sq-btn.danger-act,
body.vb-dark .bento-sq-btn.danger-act { color: #fda4af !important; border-color: rgba(244, 63, 94, 0.18) !important; }
body.vb-force-dark .bento-sq-btn.edit-act,
body.vb-dark .bento-sq-btn.edit-act { color: #a5b4fc !important; border-color: rgba(99, 102, 241, 0.18) !important; }
body.vb-force-dark .bento-st-dot,
body.vb-dark .bento-st-dot { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06), 0 0 8px currentColor !important; }

/* AI Deep Analysis Drawer Premium Redesign */
.ai-analysis-drawer {
  margin-top: 16px;
  background: rgba(248, 250, 252, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
  transition: all 0.3s ease;
}

[data-theme="dark"] .ai-analysis-drawer {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255,255,255,0.06);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.ai-analysis-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.analysis-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.analysis-label {
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}
[data-theme="dark"] .analysis-label { color: #94a3b8; }

.analysis-label .emoji {
  font-size: 15px;
}

.skeleton-text {
  font-size: 15px;
  font-weight: 700;
  color: #4f46e5;
  background: rgba(99, 102, 241, 0.06);
  padding: 12px 16px;
  border-radius: 12px;
  border-left: 4px solid #6366f1;
}
[data-theme="dark"] .skeleton-text {
  color: #818cf8;
  background: rgba(99, 102, 241, 0.1);
}

.analysis-translation-text {
  font-size: 15px;
  font-weight: 600;
  color: #059669;
  background: rgba(5, 150, 105, 0.06);
  padding: 12px 16px;
  border-radius: 12px;
  border-left: 4px solid #10b981;
  line-height: 1.6;
}
[data-theme="dark"] .analysis-translation-text {
  color: #34d399;
  background: rgba(16, 185, 129, 0.1);
}
.adopt-ai-translation {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: #6366f1;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 8px;
  padding: 2px 10px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.adopt-ai-translation:hover {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.4);
}
[data-theme="dark"] .adopt-ai-translation {
  color: #818cf8;
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.3);
}
[data-theme="dark"] .adopt-ai-translation:hover {
  background: rgba(99, 102, 241, 0.25);
}

.chunk-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(148,163,184,0.15);
  border-radius: 12px;
  padding: 12px;
}

[data-theme="dark"] .chunk-list {
  background: rgba(0,0,0,0.2);
  border-color: rgba(255,255,255,0.05);
}

.chunk-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(148,163,184,0.3);
}

.chunk-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.chunk-type {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #6366f1;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

.chunk-text {
  font-weight: 600;
  color: #334155;
  flex: 1;
  line-height: 1.5;
}
[data-theme="dark"] .chunk-text { color: #cbd5e1; }

.chunk-meaning {
  color: #64748b;
  font-size: 13px;
  flex: 1;
  line-height: 1.5;
}
[data-theme="dark"] .chunk-meaning { color: #94a3b8; }

.analysis-phrases {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.phrase-item {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(148,163,184,0.15);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  transition: transform 0.2s, box-shadow 0.2s;
}

.phrase-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

[data-theme="dark"] .phrase-item {
  background: rgba(0,0,0,0.25);
  border-color: rgba(255,255,255,0.05);
}

.phrase-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.phrase-word {
  font-size: 16px;
  font-weight: 800;
  color: #1e293b;
  line-height: 1.2;
}
[data-theme="dark"] .phrase-word { color: #f1f5f9; }

.add-phrase-btn {
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  border-radius: 14px !important;
  height: auto !important;
  display: flex !important;
  align-items: center;
  gap: 4px;
  background: rgba(99,102,241,0.1) !important;
  color: #6366f1 !important;
  border: 1px solid transparent !important;
}

.add-phrase-btn:hover {
  background: #6366f1 !important;
  color: #fff !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 2px 6px rgba(99,102,241,0.3);
}

/* 收藏按钮 - 已收藏状态 */
.add-phrase-btn.is-collected {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #ef4444 !important;
  border-color: transparent !important;
}
.add-phrase-btn.is-collected:hover {
  background: rgba(239, 68, 68, 0.15) !important;
}
[data-theme="dark"] .add-phrase-btn.is-collected {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
}
[data-theme="dark"] .add-phrase-btn.is-collected:hover {
  background: rgba(239, 68, 68, 0.25) !important;
}

/* 收藏按钮 - 保存中 */
.add-phrase-btn.is-saving {
  opacity: 0.6;
  pointer-events: none;
}

/* 收藏按钮 - 闪烁反馈 */
.add-phrase-btn.flash {
  animation: phrase-btn-flash 0.2s ease;
}
@keyframes phrase-btn-flash {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); box-shadow: 0 0 8px rgba(239,68,68,0.3); }
}

/* 翻译区块 - 替换高亮 */
.analysis-translation-text.just-replaced,
.sentence-translation.just-replaced {
  animation: translation-highlight 0.3s ease;
}
@keyframes translation-highlight {
  0% { background: transparent; }
  40% { background: rgba(99,102,241,0.1); }
  100% { background: transparent; }
}
[data-theme="dark"] .analysis-translation-text.just-replaced,
[data-theme="dark"] .sentence-translation.just-replaced {
  animation: translation-highlight-dark 0.3s ease;
}
@keyframes translation-highlight-dark {
  0% { background: transparent; }
  40% { background: rgba(129,140,248,0.12); }
  100% { background: transparent; }
}

/* 解析错误 - 柔和卡片式提示 */
.ai-analysis-error {
  text-align: center;
  padding: 20px 16px;
  margin: 8px 0;
  border-radius: 10px;
  background: rgba(100, 116, 139, 0.06);
  color: #64748b;
}
.ai-analysis-error .error-icon {
  font-size: 24px;
  margin-bottom: 8px;
  line-height: 1;
}
.ai-analysis-error .error-msg {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
  color: #94a3b8;
  line-height: 1.5;
}
.ai-analysis-error.is-config-error .error-msg {
  color: #f59e0b;
}
.ai-analysis-error .retry-ai-analysis {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  border-radius: 14px;
  background: rgba(99,102,241,0.08);
  color: #6366f1;
  border: 1px solid rgba(99,102,241,0.15);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.ai-analysis-error .retry-ai-analysis:hover {
  background: rgba(99,102,241,0.15);
  border-color: rgba(99,102,241,0.25);
}
.ai-analysis-error .retry-ai-analysis.loading {
  opacity: 0.6;
  pointer-events: none;
}
[data-theme="dark"] .ai-analysis-error {
  background: rgba(148, 163, 184, 0.08);
  color: #94a3b8;
}
[data-theme="dark"] .ai-analysis-error .error-msg {
  color: #64748b;
}
[data-theme="dark"] .ai-analysis-error.is-config-error .error-msg {
  color: #fbbf24;
}
[data-theme="dark"] .ai-analysis-error .retry-ai-analysis {
  background: rgba(99,102,241,0.12);
  color: #818cf8;
  border-color: rgba(99,102,241,0.25);
}
[data-theme="dark"] .ai-analysis-error .retry-ai-analysis:hover {
  background: rgba(99,102,241,0.2);
  border-color: rgba(99,102,241,0.35);
}

.phrase-meaning {
  color: #475569;
  font-size: 14px;
  font-weight: 600;
}
[data-theme="dark"] .phrase-meaning { color: #cbd5e1; }

.phrase-note {
  color: #64748b;
  font-size: 12px;
  background: rgba(0,0,0,0.03);
  padding: 8px 10px;
  border-radius: 8px;
  line-height: 1.4;
}
[data-theme="dark"] .phrase-note { background: rgba(255,255,255,0.05); color: #94a3b8; }

.note-text {
  font-size: 13px;
  color: #334155;
  line-height: 1.6;
  background: rgba(245, 158, 11, 0.05);
  padding: 12px 16px;
  border-radius: 10px;
  border-left: 3px solid rgba(245, 158, 11, 0.5);
}
[data-theme="dark"] .note-text {
  color: #cbd5e1;
  background: rgba(245, 158, 11, 0.02);
}

/* Redesign toggle button */
.toggle-ai-analysis-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.2);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
  margin-left: 12px;
}
[data-theme="dark"] .toggle-ai-analysis-btn {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15));
  color: #818cf8;
}

.toggle-ai-analysis-btn:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15));
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(99, 102, 241, 0.15);
}
.toggle-ai-analysis-btn.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.8), rgba(168, 85, 247, 0.8));
  color: #fff;
  border-color: transparent;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.toggle-ai-analysis-btn.loading {
  opacity: 0.7;
  pointer-events: none;
}
.toggle-ai-analysis-btn.loading::before {
  content: " ";
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* --- AI Magic Button --- */
.btn.ai-magic-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(168, 85, 247, 0.08));
  color: #6366f1;
  border-color: rgba(99, 102, 241, 0.2);
  font-weight: 700;
  transition: all 0.3s ease;
  z-index: 1;
}
.btn.ai-magic-btn:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15));
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15);
  transform: translateY(-1px);
}
[data-theme="dark"] .btn.ai-magic-btn {
  color: #818cf8;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15));
  border-color: rgba(129, 140, 248, 0.3);
}

.btn.ai-magic-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--ai-progress, 0%);
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.3));
  z-index: -1;
  transition: width 0.3s ease-out;
}
[data-theme="dark"] .btn.ai-magic-btn::before {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.3), rgba(168, 85, 247, 0.4));
}
.btn.ai-magic-btn.is-working {
  pointer-events: none;
  border-color: rgba(168, 85, 247, 0.4);
  animation: magicPulse 2s infinite;
}
@keyframes magicPulse {
  0% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.2); }
  70% { box-shadow: 0 0 0 4px rgba(168, 85, 247, 0); }
  100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
}

/* ═══════════════════════════════════════
   暗色模式覆盖 — 核心 UI 组件
   使用 body.vb-force-dark（用户手动选择）
   + @media prefers-color-scheme:dark（跟随系统）
   ═══════════════════════════════════════ */

/* -- 手动暗色模式 -- */
body.vb-force-dark .word-card,
body.vb-force-dark .sentence-card {
  background: rgba(26,20,48,.92);
  border-color: rgba(167,139,250,.28);
}
body.vb-force-dark .word-card:hover,
body.vb-force-dark .word-card:focus-within,
body.vb-force-dark .sentence-card:hover {
  border-color: rgba(167,139,250,.45);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
body.vb-force-dark .word-title,
body.vb-force-dark .sentence-en { color: #ede9fe; }
body.vb-force-dark .word-meaning,
body.vb-force-dark .sentence-translation { color: rgba(237,233,254,.70); }
body.vb-force-dark .word-note,
body.vb-force-dark .sentence-note { color: #a78bfa !important; }
body.vb-force-dark .word-en { background: rgba(20,15,40,.94); border-color: rgba(167,139,250,.20); }
body.vb-force-dark .word-en-title { color: rgba(237,233,254,.80); }
body.vb-force-dark .word-ai-ctx { background: rgba(99,102,241,.12); }
body.vb-force-dark .ai-ctx-label,
body.vb-force-dark .ai-ctx-pos { color: #a78bfa; }
body.vb-force-dark .word-ai-ctx-title { color: #818cf8; }
body.vb-force-dark .iconBtn { background: rgba(26,20,48,.85); border-color: rgba(167,139,250,.20); color: #c4b5fd; }
body.vb-force-dark .iconBtn:hover { background: rgba(167,139,250,.18); }
body.vb-force-dark .iconBtn.danger { background: rgba(239,68,68,.18); color: #fca5a5; }
body.vb-force-dark .iconBtn.note { background: rgba(167,139,250,.18); color: #c4b5fd; }
body.vb-force-dark .iconBtn.link { background: rgba(56,189,248,.14); color: #7dd3fc; }
body.vb-force-dark .fold-btn { background: rgba(26,20,48,.85); color: #c4b5fd; border-color: rgba(167,139,250,.20); }
body.vb-force-dark .fold-btn:hover { background: rgba(167,139,250,.18); }
body.vb-force-dark .card-action { background: rgba(26,20,48,.85); color: #c4b5fd; border-color: rgba(167,139,250,.20); }
body.vb-force-dark .card-action:hover { background: rgba(167,139,250,.18); }
body.vb-force-dark .note-editor { background: rgba(26,20,48,.92); border-color: rgba(167,139,250,.28); color: #ede9fe; }
body.vb-force-dark .en-toggle { background: rgba(56,189,248,.14); color: #7dd3fc; }
body.vb-force-dark .inline-confirm { background: rgba(239,68,68,.12); }
body.vb-force-dark .inline-confirm-text { color: #fca5a5; }
body.vb-force-dark .muted { color: rgba(237,233,254,.55); }
body.vb-force-dark .st-red { background: rgba(239,68,68,.18); color: #fca5a5; }
body.vb-force-dark .st-yellow { background: rgba(245,158,11,.18); color: #fde68a; }
body.vb-force-dark .st-green { background: rgba(34,197,94,.18); color: #bbf7d0; }
body.vb-force-dark .st-note { background: rgba(167,139,250,.18); color: #c4b5fd; }
body.vb-force-dark #fileInfo { color: #c4b5fd; }
body.vb-force-dark #ioError { color: #fca5a5; }
body.vb-force-dark code { background: rgba(167,139,250,.14); color: #c4b5fd; }
body.vb-force-dark .ai-ctx-coll-tag { background: rgba(99,102,241,.14); color: #818cf8; }
body.vb-force-dark .pron-flag { background: rgba(167,139,250,.14); color: #c4b5fd; }
body.vb-force-dark .sentence-source-link { color: #7dd3fc; }
body.vb-force-dark .word-actions .iconBtn,
body.vb-force-dark .sentence-actions .iconBtn { --icon-bg: rgba(26,20,48,.85); }

/* -- 系统暗色模式（用户未手动选择亮色时生效） -- */
@media (prefers-color-scheme: dark) {
  body:not(.vb-force-light) .word-card,
  body:not(.vb-force-light) .sentence-card {
    background: rgba(26,20,48,.92);
    border-color: rgba(167,139,250,.28);
  }
  body:not(.vb-force-light) .word-card:hover,
  body:not(.vb-force-light) .word-card:focus-within,
  body:not(.vb-force-light) .sentence-card:hover {
    border-color: rgba(167,139,250,.45);
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
  }
  body:not(.vb-force-light) .word-title,
  body:not(.vb-force-light) .sentence-en { color: #ede9fe; }
  body:not(.vb-force-light) .word-meaning,
  body:not(.vb-force-light) .sentence-translation { color: rgba(237,233,254,.70); }
  body:not(.vb-force-light) .word-note,
  body:not(.vb-force-light) .sentence-note { color: #a78bfa !important; }
  body:not(.vb-force-light) .word-en { background: rgba(20,15,40,.94); border-color: rgba(167,139,250,.20); }
  body:not(.vb-force-light) .word-en-title { color: rgba(237,233,254,.80); }
  body:not(.vb-force-light) .word-ai-ctx { background: rgba(99,102,241,.12); }
  body:not(.vb-force-light) .ai-ctx-label,
  body:not(.vb-force-light) .ai-ctx-pos { color: #a78bfa; }
  body:not(.vb-force-light) .word-ai-ctx-title { color: #818cf8; }
  body:not(.vb-force-light) .iconBtn { background: rgba(26,20,48,.85); border-color: rgba(167,139,250,.20); color: #c4b5fd; }
  body:not(.vb-force-light) .iconBtn:hover { background: rgba(167,139,250,.18); }
  body:not(.vb-force-light) .iconBtn.danger { background: rgba(239,68,68,.18); color: #fca5a5; }
  body:not(.vb-force-light) .iconBtn.note { background: rgba(167,139,250,.18); color: #c4b5fd; }
  body:not(.vb-force-light) .iconBtn.link { background: rgba(56,189,248,.14); color: #7dd3fc; }
  body:not(.vb-force-light) .fold-btn { background: rgba(26,20,48,.85); color: #c4b5fd; border-color: rgba(167,139,250,.20); }
  body:not(.vb-force-light) .fold-btn:hover { background: rgba(167,139,250,.18); }
  body:not(.vb-force-light) .card-action { background: rgba(26,20,48,.85); color: #c4b5fd; border-color: rgba(167,139,250,.20); }
  body:not(.vb-force-light) .card-action:hover { background: rgba(167,139,250,.18); }
  body:not(.vb-force-light) .note-editor { background: rgba(26,20,48,.92); border-color: rgba(167,139,250,.28); color: #ede9fe; }
  body:not(.vb-force-light) .en-toggle { background: rgba(56,189,248,.14); color: #7dd3fc; }
  body:not(.vb-force-light) .inline-confirm { background: rgba(239,68,68,.12); }
  body:not(.vb-force-light) .inline-confirm-text { color: #fca5a5; }
  body:not(.vb-force-light) .muted { color: rgba(237,233,254,.55); }
  body:not(.vb-force-light) .st-red { background: rgba(239,68,68,.18); color: #fca5a5; }
  body:not(.vb-force-light) .st-yellow { background: rgba(245,158,11,.18); color: #fde68a; }
  body:not(.vb-force-light) .st-green { background: rgba(34,197,94,.18); color: #bbf7d0; }
  body:not(.vb-force-light) .st-note { background: rgba(167,139,250,.18); color: #c4b5fd; }
  body:not(.vb-force-light) #fileInfo { color: #c4b5fd; }
  body:not(.vb-force-light) #ioError { color: #fca5a5; }
  body:not(.vb-force-light) code { background: rgba(167,139,250,.14); color: #c4b5fd; }
  body:not(.vb-force-light) .ai-ctx-coll-tag { background: rgba(99,102,241,.14); color: #818cf8; }
  body:not(.vb-force-light) .pron-flag { background: rgba(167,139,250,.14); color: #c4b5fd; }
  body:not(.vb-force-light) .sentence-source-link { color: #7dd3fc; }
  body:not(.vb-force-light) .word-actions .iconBtn,
  body:not(.vb-force-light) .sentence-actions .iconBtn { --icon-bg: rgba(26,20,48,.85); }
}

/* ========== hintBox（导入/导出模板提示，对齐 Manager） ========== */
.hintBox {
  margin-top: 10px;
  background: #f8fafc;
  border: 1px dashed #e5e7eb;
  border-radius: 14px;
  padding: 12px;
  color: #475569;
  font-size: 12px;
  line-height: 1.5;
}
.hintBox code { background: rgba(99,102,241,.08); padding: 1px 4px; border-radius: 4px; font-size: 11px; }
.hintBox .small { font-size: 11px; color: #94a3b8; margin-top: 4px; }

body.vb-force-dark .hintBox {
  background: rgba(26,20,48,.92);
  border-color: rgba(167,139,250,.20);
  color: rgba(237,233,254,.75);
}
body.vb-force-dark .hintBox code { background: rgba(167,139,250,.14); color: #c4b5fd; }
body.vb-force-dark .hintBox .small { color: rgba(237,233,254,.50); }

/* ========== 音标行（对齐 Manager pronRow） ========== */
.pronRow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.pronRow .pron-flag { flex-shrink: 0; }
.pronRow .muted { font-size: 13px; }

/* ========== 浮动操作按钮（对齐 Manager FAB 风格） ========== */
.words-fab-group {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 200;
}
.words-fab {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-weight: 600;
}