.twg-widget {
    --twg-primary: #174f78;
    --twg-primary-dark: #103b5c;
    --twg-ink: #172b3a;
    --twg-muted: #687887;
    margin: 0 0 24px;
    padding: 18px;
    border: 1px solid #dce5ec;
    border-radius: 16px;
    background: linear-gradient(145deg, #fff 0%, #f5f9fc 100%);
    color: var(--twg-ink);
    box-shadow: 0 8px 24px rgba(25, 55, 78, .07);
    font: inherit;
}
.twg-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:11px; }
.twg-toolbar label { font-weight:700; color:var(--twg-ink); }
.twg-widget select, .twg-widget button { font:inherit; }
.twg-widget select {
    min-height:42px; padding:8px 36px 8px 12px; border:1px solid #ccd8e1;
    border-radius:10px; background:#fff; color:var(--twg-ink);
}
.twg-widget button { cursor:pointer; }
.twg-widget button:disabled { opacity:.42; cursor:not-allowed; }
.twg-widget .twg-translate {
    min-height:42px; padding:9px 18px; border:0; border-radius:10px;
    background:var(--twg-primary); color:#fff; font-weight:700;
    box-shadow:0 3px 9px rgba(23,79,120,.18); transition:background .2s,transform .2s;
}
.twg-widget .twg-translate:hover { background:var(--twg-primary-dark); transform:translateY(-1px); }
.twg-status { margin-top:11px; color:var(--twg-muted); font-size:.9em; }
.twg-player {
    margin-top:16px; padding:16px; border:1px solid #dce7ef; border-radius:14px;
    background:#fff;
}
.twg-player-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:13px; }
.twg-player-label { color:var(--twg-primary); font-size:.72rem; font-weight:800; letter-spacing:.09em; }
.twg-player-hint { color:var(--twg-muted); font-size:.78rem; }
.twg-controls { display:flex; align-items:center; gap:9px; }
.twg-control {
    display:grid; place-items:center; width:42px; height:42px; padding:0;
    border:1px solid #dce5ec; border-radius:12px; background:#f5f8fa; color:var(--twg-primary);
    transition:background .2s,border-color .2s,transform .2s;
}
.twg-control:hover:not(:disabled) { background:#e8f1f7; border-color:#b9cedd; transform:translateY(-1px); }
.twg-control svg { width:19px; height:19px; fill:currentColor; }
.twg-play { width:48px; height:48px; border:0; border-radius:15px; background:var(--twg-primary); color:#fff; }
.twg-play:hover:not(:disabled) { background:var(--twg-primary-dark); }
.twg-speed-label { display:flex; align-items:center; gap:9px; margin-left:auto; color:var(--twg-muted); font-size:.85rem; font-weight:600; }
.twg-speed-label select { min-height:38px; padding:6px 28px 6px 9px; border-radius:9px; }
.twg-translated { margin-top:18px; line-height:1.8; }
.twg-translated-title { margin:0 0 14px; color:var(--twg-ink); line-height:1.3; }
.twg-word { border-radius:3px; transition:background-color .12s,color .12s; }
.twg-current-word { background:#ffd86b; color:#17212a; box-shadow:0 0 0 2px #ffd86b; }
::highlight(twg-current-sentence) { background:rgba(48,139,190,.13); text-decoration:underline; text-decoration-color:rgba(23,79,120,.32); text-decoration-thickness:2px; text-underline-offset:3px; }
.twg-original-content[hidden], .twg-translated[hidden], .twg-player[hidden] { display:none !important; }
@media (max-width:600px) {
    .twg-widget { padding:14px; border-radius:13px; }
    .twg-toolbar { align-items:stretch; }
    .twg-toolbar label { align-self:center; }
    .twg-toolbar select { flex:1; min-width:130px; }
    .twg-toolbar .twg-translate { width:100%; }
    .twg-player { padding:13px; }
    .twg-player-heading { align-items:flex-start; flex-direction:column; gap:3px; }
    .twg-controls { gap:7px; }
    .twg-control { width:40px; height:40px; }
    .twg-play { width:46px; height:46px; }
    .twg-speed-label { gap:6px; font-size:.78rem; }
}