.vb-card { background:var(--card); border-radius:20px; padding:20px; margin-bottom:16px; box-shadow:0 2px 12px rgba(0,0,0,.03); border:1px solid var(--gl); }
.vb-streak-num { font-size:48px; font-weight:300; color:var(--orange); line-height:1; }
.vb-progress-bg { height:8px; background:var(--bg); border-radius:4px; overflow:hidden; margin-top:8px; }
.vb-progress-fill { height:100%; background:linear-gradient(90deg, #FF9500, #FFD60A); transition:width .4s ease; }
.vb-action-btn { display:flex; align-items:center; gap:16px; padding:16px 20px; background:var(--card); border-radius:20px; margin-bottom:12px; cursor:pointer; border:1px solid var(--gl); transition:transform .15s; box-shadow:0 2px 8px rgba(0,0,0,.02); }
.vb-action-btn:active { transform:scale(.97); }
.vb-action-icon { width:48px; height:48px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; }
.vb-word-card { background:var(--card); border-radius:24px; padding:32px 24px; text-align:center; box-shadow:0 8px 32px rgba(0,0,0,.06); border:1px solid var(--gl); min-height:280px; display:flex; flex-direction:column; justify-content:center; position:relative; transition:transform .4s; transform-style:preserve-3d; }
.vb-word-card.flipped { transform:rotateY(180deg); }
.vb-card-face { position:absolute; inset:0; padding:32px 24px; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; flex-direction:column; justify-content:center; align-items:center; background:var(--card); border-radius:24px; }
.vb-card-back { transform:rotateY(180deg); }
.vb-btn-group { display:flex; gap:12px; margin-top:24px; }
.vb-btn { flex:1; padding:16px; border-radius:16px; font-size:16px; font-weight:600; border:none; cursor:pointer; font-family:inherit; transition:transform .1s; }
.vb-btn:active { transform:scale(.95); }
.vb-btn-red { background:rgba(255,59,48,.1); color:var(--red); }
.vb-btn-green { background:rgba(52,199,89,.1); color:var(--green); }
.vb-speech { display:flex; align-items:flex-end; gap:10px; margin-bottom:24px; }
/* 1. 限制头像框的大小，绝对不准变大！ */
.vb-speech-av { 
    width: 40px !important; 
    height: 40px !important; 
    border-radius: 50%; 
    background: var(--gl); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 18px; 
    overflow: hidden; 
    flex-shrink: 0; 
}

/* 2. 限制里面的图片，必须塞进框里！ */
.vb-speech-av img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover; 
    display: block;
}
.vb-speech-bubble { background:var(--card); border:1px solid var(--gl); padding:12px 16px; border-radius:18px; border-bottom-left-radius:4px; font-size:14px; color:var(--b); box-shadow:0 2px 8px rgba(0,0,0,.03); max-width:75%; line-height:1.5; }