:root{
    --bg:#0b1220;
    --card:rgba(255,255,255,0.06);
    --card2:rgba(255,255,255,0.09);
    --text:rgba(255,255,255,0.92);
    --muted:rgba(255,255,255,0.65);
    --border:rgba(255,255,255,0.12);
    --shadow:0 14px 40px rgba(0,0,0,0.35);
    --btn:rgba(255,255,255,0.10);
    --btn2:rgba(255,255,255,0.14);
    --select-bg:#353d4a;
    --select-text:rgba(255,255,255,0.96);
    --highlight-purple:#c084fc;
    --vsa-head-bg:#182130;
}

/* ===== VSA review ===== */
.vsa-review-wrap{
    max-width:1800px;
}

.vsa-review-sticky{
    position:sticky;
    top:0;
    z-index:100;
    margin-top:-8px;
    padding-top:8px;
    padding-bottom:8px;
    background:var(--bg);
    box-shadow:0 1px 0 var(--border);
}

.vsa-review-sticky .header{
    margin-bottom:14px;
}

.vsa-summary{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    margin:0;
    color:var(--muted);
    font-size:13px;
}

.vsa-summary > span{
    padding:7px 11px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--card);
}

.vsa-summary .vsa-status{
    color:var(--text);
}

.vsa-summary .vsa-status.is-active{
    color:#4ade80;
    border-color:#4ade80;
}

.vsa-comparison-card{
    margin-top:8px;
    padding:0;
    overflow:visible;
    border-radius:0;
}

.vsa-table-scroll{
    max-height:none;
    overflow:visible;
}

.vsa-comparison-table{
    width:100%;
    min-width:0;
    max-width:100%;
    border-collapse:separate;
    border-spacing:0;
    table-layout:fixed;
}

.vsa-comparison-table th,
.vsa-comparison-table td{
    padding:12px 14px;
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
    text-align:left;
    vertical-align:top;
    line-height:1.55;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}

.vsa-comparison-table th{
    color:var(--muted);
    background:var(--vsa-head-bg);
    font-size:12px;
    letter-spacing:.03em;
}

.vsa-comparison-table th:nth-child(1){ width:5%; }
.vsa-comparison-table th:nth-child(2){ width:9%; }
.vsa-comparison-table th:nth-child(3){ width:25%; }
.vsa-comparison-table th:nth-child(4){ width:13%; }
.vsa-comparison-table th:nth-child(5){ width:26%; }
.vsa-comparison-table th:nth-child(6){ width:22%; }

.vsa-comparison-table td:last-child,
.vsa-comparison-table th:last-child{
    border-right:0;
}

.vsa-index,
.vsa-time{
    color:var(--muted);
    font-variant-numeric:tabular-nums;
}

.vsa-comparison-table .vsa-index{
    white-space:nowrap;
    overflow-wrap:normal;
    word-break:normal;
}

.vsa-replacement{
    background:rgba(192,132,252,.06);
}

.vsa-editable-cell{
    position:relative;
    padding-bottom:42px !important;
    transition:background .16s ease, box-shadow .16s ease;
}

.vsa-editable-cell:hover,
.vsa-editable-cell:focus-within{
    background:rgba(64,170,255,.08);
    box-shadow:inset 0 0 0 1px rgba(64,170,255,.35);
}

.vsa-cell-editor{
    min-height:30px;
    border-radius:7px;
    outline:none;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}

.vsa-cell-editor:focus{
    background:rgba(255,255,255,.04);
}

.vsa-cell-editor:empty::before{
    content:attr(data-placeholder);
    color:var(--muted);
    opacity:.55;
    pointer-events:none;
}

.vsa-row-actions{
    position:absolute;
    right:8px;
    bottom:7px;
    display:flex;
    gap:5px;
    opacity:0;
    transform:translateY(3px);
    pointer-events:none;
    transition:opacity .16s ease, transform .16s ease;
}

.vsa-editable-cell:hover .vsa-row-actions,
.vsa-editable-cell:focus-within .vsa-row-actions{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

.vsa-row-actions button{
    width:28px;
    height:26px;
    padding:0;
    border:1px solid var(--border);
    border-radius:7px;
    background:var(--vsa-head-bg);
    color:var(--text);
    font-size:15px;
    line-height:1;
    cursor:pointer;
}

.vsa-row-actions button:hover,
.vsa-row-actions button:focus-visible{
    border-color:var(--accent);
    color:var(--accent);
}

.vsa-row-actions button:disabled{
    opacity:.35;
    cursor:not-allowed;
    border-color:var(--border);
    color:var(--muted);
}

.vsa-row-unpaired td{
    box-shadow:inset 0 2px 0 #ef4444;
}

.vsa-empty{
    margin:18px;
    padding:18px;
    border:1px dashed var(--border);
    border-radius:12px;
    color:var(--muted);
    text-align:center;
}

@media (max-width: 1100px){
    .vsa-comparison-table th,
    .vsa-comparison-table td{
        padding:10px 9px;
        font-size:13px;
    }
}

@media (max-width: 820px){
    .vsa-comparison-card{
        border:0;
        background:transparent;
    }

    .vsa-comparison-table,
    .vsa-comparison-table tbody,
    .vsa-comparison-table tr,
    .vsa-comparison-table td{
        display:block;
        width:100%;
    }

    .vsa-comparison-table thead{
        display:none;
    }

    .vsa-comparison-table tbody{
        display:grid;
        gap:12px;
    }

    .vsa-comparison-table tr{
        border:1px solid var(--border);
        background:var(--card);
    }

    .vsa-comparison-table td{
        display:grid;
        grid-template-columns:120px minmax(0, 1fr);
        gap:12px;
        border-right:0;
        padding:10px 12px;
    }

    .vsa-comparison-table td::before{
        content:attr(data-label);
        color:var(--muted);
        font-size:12px;
        font-weight:700;
    }

    .vsa-comparison-table td:last-child{
        border-bottom:0;
    }

    .vsa-row-actions{
        opacity:1;
        transform:none;
        pointer-events:auto;
    }

    .vsa-comparison-table .vsa-index{
        background:var(--vsa-head-bg);
        color:var(--text);
        font-weight:700;
    }
}

@media (max-width: 520px){
    .vsa-comparison-table td{
        grid-template-columns:92px minmax(0, 1fr);
        gap:8px;
    }
}

[data-theme="light"]{
    --bg:#f6f7fb;
    --card:rgba(0,0,0,0.04);
    --card2:rgba(0,0,0,0.06);
    --text:rgba(10,12,16,0.92);
    --muted:rgba(10,12,16,0.6);
    --border:rgba(0,0,0,0.10);
    --shadow:0 14px 40px rgba(0,0,0,0.10);
    --btn:rgba(0,0,0,0.06);
    --btn2:rgba(0,0,0,0.10);
    --select-bg:#ffffff;
    --select-text:rgba(10,12,16,0.92);
    --highlight-purple:#7e22ce;
    --vsa-head-bg:#e7eaf0;
}

*{ box-sizing:border-box; }
body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC","Microsoft YaHei", Arial;
}

a{ color:inherit; text-decoration:none; }

.doc-highlight-word{
    color:var(--highlight-purple);
    background:transparent;
    border-radius:0;
    box-shadow:none;
    padding:0;
    text-decoration:none;
    cursor:help;
}

.wrap{
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px;
}

body[data-page="editor"] .wrap{
    max-width:none;
    width:min(3200px, calc(100vw - 24px));
    padding:12px;
}

body[data-page="vsa-review"] .wrap{
    max-width:none;
    width:min(1600px, calc(100vw - 24px));
    padding:12px;
}

.center{
    min-height: 80vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow:hidden;
}

.header{
    display:flex;
    gap:12px;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom: 14px;
}

.title{
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .2px;
}

.title-suffix{
    font-size:14px;
    font-weight:600;
    color:var(--muted);
    letter-spacing:0;
}
.meta{
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
    line-height: 1.4;
}

.tools{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
}

.user-menu,
.editor-action-menu{
    position:relative;
}

.user-menu-trigger,
.menu-icon-trigger{
    min-width:42px;
    padding-inline:13px;
    font-size:18px;
    line-height:1;
}

.editor-action-panel{
    width:190px;
}

.user-menu-panel{
    position:absolute;
    z-index:10020;
    top:calc(100% + 8px);
    right:0;
    display:grid;
    width:230px;
    padding:8px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--card2);
    box-shadow:var(--shadow);
    backdrop-filter:blur(18px);
}

.user-menu-panel[hidden],
.admin-edit-control[hidden]{
    display:none !important;
}

.user-menu-profile{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 9px 12px;
    border-bottom:1px solid var(--border);
    margin-bottom:5px;
}

.user-menu-avatar{
    display:grid;
    width:34px;
    height:34px;
    flex:0 0 34px;
    place-items:center;
    border-radius:999px;
    background:rgba(76,164,255,.18);
    color:#78a4ff;
    font-size:13px;
}

.user-menu-profile strong,
.user-menu-profile small{
    display:block;
}

.user-menu-profile small{
    margin-top:3px;
    color:var(--muted);
    font-size:11px;
}

.user-menu-item{
    width:100%;
    padding:9px 10px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:var(--text);
    cursor:pointer;
    font:inherit;
    font-size:13px;
    text-align:left;
}

.user-menu-item:hover{
    background:var(--btn);
}

.user-menu-item:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.user-menu-item.menu-save:not(:disabled){
    color:#72dfa3;
    background:rgba(80,220,140,.10);
}

.user-menu-item.danger{
    color:#ff8d8d;
}

.btn{
    border:1px solid var(--border);
    background: var(--btn);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 12px;
    cursor:pointer;
    user-select:none;
}
.btn:hover{ background: var(--btn2); }
.btn.primary{
    background: rgba(64,170,255,0.18);
    border-color: rgba(64,170,255,0.35);
}
.btn.save{
    background: rgba(80,220,140,0.18);
    border-color: rgba(80,220,140,0.35);
}
.btn.danger{
    background: rgba(255,90,90,0.18);
    border-color: rgba(255,90,90,0.35);
}
.btn:disabled{
    opacity: .5;
    cursor:not-allowed;
}

.pill{
    display:flex;
    align-items:center;
    gap:8px;
    border:1px solid var(--border);
    background:var(--btn);
    padding: 8px 10px;
    border-radius: 999px;
}
.pill input{
    border:none;
    outline:none;
    background:transparent;
    color:var(--text);
    width: 260px;
}

.grid2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    width: min(760px, 92vw);
}

.grid3{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    width: min(980px, 92vw);
}

.grid4{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:18px;
    width:min(1080px, 92vw);
}

.bigbtn{
    padding: 26px 18px;
    border-radius: 18px;
    font-size: 18px;
    text-align:center;
}

.form{
    padding: 18px;
}
.form label{
    display:block;
    margin-top: 10px;
    color: var(--muted);
    font-size: 13px;
}
.form input,
.form select{
    width: 100%;
    margin-top: 6px;
    padding: 12px 12px;
    border-radius: 12px;
    border:1px solid var(--border);
    background: var(--btn);
    color: var(--text);
    outline:none;
}
.form select option{
    background:var(--select-bg);
    color:var(--select-text);
}
.form textarea{
    width: 100%;
    margin-top: 6px;
    padding: 16px 18px;
    border-radius: 16px;
    border:1px solid var(--border);
    background: var(--btn);
    color: var(--text);
    resize: vertical;
    font: 500 14px/1.7 Consolas, "Courier New", monospace;
}
.form textarea::placeholder{
    color: var(--muted);
}
.form textarea:focus{
    outline:none;
    border-color: rgba(64,170,255,0.45);
    box-shadow: 0 0 0 3px rgba(64,170,255,0.10);
}
.upload-html-text{
    min-height: 420px;
}

.toast{
    position: fixed;
    right: 16px;
    bottom: 16px;
    padding: 10px 12px;
    border-radius: 12px;
    border:1px solid var(--border);
    background: rgba(0,0,0,0.45);
    color: white;
    opacity: 0;
    transform: translateY(10px);
    transition: all .18s ease;
    pointer-events:none;
    z-index: 999;
}
.toast.show{
    opacity: 1;
    transform: translateY(0);
}

.tablewrap{
    display:grid;
    grid-template-columns: 300px 1fr;
    gap: 12px;
}

.sidebar{
    padding: 12px;
}

.access-filter-row{
    display:flex;
    align-items:center;
    gap:8px;
}

.access-search{
    flex:0 1 150px;
    min-width:118px;
    padding:7px 9px;
}

.access-search span{
    color:var(--muted);
    font-size:11px;
}

.access-search input{
    width:76px;
    min-width:0;
}

.access-tag-filter{
    display:flex;
    flex:1 1 120px;
    min-width:0;
    align-items:center;
    gap:6px;
}

.access-tag-filter span{
    color:var(--muted);
    font-size:11px;
}

.access-tag-filter select{
    width:100%;
    min-width:0;
    padding:8px 9px;
    border:1px solid var(--border);
    border-radius:10px;
    outline:none;
    background:var(--select-bg);
    color:var(--select-text);
}
.list{
    margin-top: 10px;
    display:flex;
    flex-direction:column;
    gap:6px;
    max-height: 70vh;
    overflow:auto;
}
.item{
    padding: 10px 10px;
    border-radius: 12px;
    border:1px solid var(--border);
    background: var(--btn);
    cursor:pointer;
}
.item:hover{ background: var(--btn2); }
.access-item-title,
.access-selected-title{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}

.access-item-title b{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.access-selected-title a{
    min-width:0;
}

.access-selected-title #curTitle{
    overflow-wrap:anywhere;
}

.access-item-stats,
.access-selected-meta{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}

.access-tag-badge{
    --access-tag-hue:145;
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    max-width:110px;
    padding:3px 8px;
    overflow:hidden;
    border:1px solid hsl(var(--access-tag-hue) 72% 62% / .42);
    border-radius:999px;
    background:hsl(var(--access-tag-hue) 72% 56% / .18);
    color:hsl(var(--access-tag-hue) 76% 72%);
    font-size:11px;
    font-weight:700;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.access-tag-badge[data-tag="news"]{ --access-tag-hue:0; }
.access-tag-badge[data-tag="lifestyle"]{ --access-tag-hue:325; }
.access-tag-badge[data-tag="education"]{ --access-tag-hue:220; }
.access-tag-badge[data-tag="technology"]{ --access-tag-hue:190; }
.access-tag-badge[data-tag="business"]{ --access-tag-hue:42; }
.access-tag-badge[data-tag="finance"]{ --access-tag-hue:150; }
.access-tag-badge[data-tag="science"]{ --access-tag-hue:255; }
.access-tag-badge[data-tag="health"]{ --access-tag-hue:345; }
.access-tag-badge[data-tag="travel"]{ --access-tag-hue:175; }
.access-tag-badge[data-tag="food"]{ --access-tag-hue:25; }
.access-tag-badge[data-tag="culture"]{ --access-tag-hue:280; }
.access-tag-badge[data-tag="entertainment"]{ --access-tag-hue:305; }
.access-tag-badge[data-tag="sports"]{ --access-tag-hue:88; }
.access-tag-badge[data-tag="history"]{ --access-tag-hue:32; }
.access-tag-badge[data-tag="politics"]{ --access-tag-hue:12; }
.access-tag-badge[data-tag="nature"]{ --access-tag-hue:125; }
.access-tag-badge[data-tag="interviews"]{ --access-tag-hue:205; }
.access-tag-badge[data-tag="speech"]{ --access-tag-hue:60; }

[data-theme="light"] .access-tag-badge{
    border-color:hsl(var(--access-tag-hue) 62% 42% / .36);
    background:hsl(var(--access-tag-hue) 72% 48% / .14);
    color:hsl(var(--access-tag-hue) 65% 30%);
}

.access-tag-badge[hidden]{
    display:none !important;
}
.item .small{
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}

.access-toolbar{
    margin-top:10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.access-page-size{
    display:flex;
    align-items:center;
    gap:8px;
}

.access-page-size select{
    padding:8px 10px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--select-bg);
    color:var(--select-text);
    outline:none;
}

.access-pagination{
    margin-top:12px;
    display:flex;
    gap:8px;
    justify-content:space-between;
}

.editor-table{
    table-layout:fixed;
}

.editor-table col.col-idx{
    width:52px;
}

.editor-table col.col-time{
    width:88px;
}

.editor-table col.col-merge{
    width:76px;
}

.editor-table col.col-en,
.editor-table col.col-zh{
    width:calc((100% - 52px - 88px - 76px) / 2);
}

.editor-table th:nth-child(3),
.editor-table th:nth-child(4),
.editor-table td:nth-child(3),
.editor-table td:nth-child(4){
    width:calc((100% - 52px - 88px - 76px) / 2);
}

body[data-editor-mode="view"] .editor-table col.col-en,
body[data-editor-mode="view"] .editor-table col.col-zh,
body[data-editor-mode="view"] .editor-table th:nth-child(3),
body[data-editor-mode="view"] .editor-table th:nth-child(4),
body[data-editor-mode="view"] .editor-table td:nth-child(3),
body[data-editor-mode="view"] .editor-table td:nth-child(4){
    width:calc((100% - 52px - 88px) / 2);
}

body[data-editor-mode="view"] .editor-table col.col-merge,
body[data-editor-mode="view"] .editor-table th.col-merge-header,
body[data-editor-mode="view"] .editor-table td.act{
    display:none;
}
table{
    width:100%;
    border-collapse: collapse;
}
th, td{
    border-bottom:1px solid var(--border);
    padding: 10px 10px;
    vertical-align: top;
}
th{
    text-align:left;
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
}
td.idx{ color: var(--muted); width:52px; }
td.tm{ width: 88px; color: var(--muted); }

.cell{
    min-height: 20px;
    outline:none;
    white-space: pre-wrap;
    word-break: break-word;
}
.merge{
    display:flex;
    flex-direction: column;
    gap: 6px;
}
.merge button{
    width: 56px;
    padding: 6px 8px;
    border-radius: 10px;
    border:1px solid var(--border);
    background: var(--btn);
    color: var(--text);
    cursor:pointer;
}
.merge button:disabled{
    opacity: .5;
    cursor:not-allowed;
}

.merge button.mtranslate{
    font-weight:700;
    letter-spacing:.02em;
}

.merge button.mtranslate.is-loading{
    color:var(--accent);
}

.dict-popup{
    color: var(--text);
}

.dict-audio-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:10px;
    flex-wrap:wrap;
}

.dict-audio-btn{
    border:1px solid var(--border);
    background: var(--btn);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 10px;
    cursor:pointer;
    font-size: 12px;
}

.dict-audio-btn:hover{
    background: var(--btn2);
}

.dict-audio-btn:disabled{
    opacity: .45;
    cursor:not-allowed;
}

.dict-audio-tip{
    font-size: 12px;
    color: var(--muted);
}

.fulltext-wrap{ max-width:960px; }
.fulltext-card{ padding:24px clamp(18px, 4vw, 48px); margin-bottom:18px; overflow:visible; }
.fulltext-section-head{ padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--border); }
.fulltext-language{ font-size:18px; font-weight:700; }
.fulltext-section-head .small{ margin-top:6px; color:var(--muted); font-size:12px; }
.fulltext-content{ white-space:pre-wrap; overflow-wrap:anywhere; }
.fulltext-en{ font-family:inherit; font-size:18px; font-weight:400; line-height:1.9; cursor:text; }
.fulltext-en::selection, .fulltext-en *::selection{ background:rgba(64,170,255,0.38); }
.fulltext-zh{ font-size:17px; line-height:2; }
.fulltext-empty{ color:var(--muted); font-family:ui-sans-serif, system-ui, sans-serif; font-size:14px; }
.fulltext-dict-popup{
    display:none; position:fixed; z-index:9999; width:min(420px, calc(100vw - 24px));
    min-width:min(260px, calc(100vw - 24px)); max-width:420px; padding:12px 14px;
    border:1px solid var(--border); border-radius:12px; background:var(--card2);
    box-shadow:var(--shadow); backdrop-filter:blur(12px);
}
.fulltext-dict-word{ font-size:16px; font-weight:700; line-height:1.4; }
.dict-word-title-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dict-word-star{
    flex:0 0 auto; width:34px; height:34px; padding:0; border:1px solid var(--border);
    border-radius:50%; color:var(--muted); background:transparent; font-size:24px;
    line-height:1; cursor:pointer; transition:color .15s ease, background .15s ease, transform .15s ease;
}
.dict-word-star:hover{ color:#f6c445; background:rgba(246,196,69,.12); transform:scale(1.06); }
.dict-word-star.is-active{ color:#f6c445; background:rgba(246,196,69,.12); }
.dict-word-star:disabled{ cursor:wait; opacity:.6; transform:none; }
.dict-word-star[hidden]{ display:none !important; }
.fulltext-dict-phonetic, .fulltext-dict-pos{ margin-top:6px; color:var(--muted); font-size:13px; line-height:1.4; }
.fulltext-dict-translation, .fulltext-dict-definition{ margin-top:8px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; }
.fulltext-dict-translation{ font-size:14px; }
.fulltext-dict-definition{ max-height:180px; overflow:auto; color:var(--muted); font-size:13px; }
.dict-pos-label{ color:#6cf; font-weight:700; }

.wordbook-toolbar{
    padding: 14px;
    margin-bottom: 14px;
}

.wordbook-toolbar-row{
    display:flex;
    gap:12px;
    align-items:end;
    flex-wrap:wrap;
}

.wordbook-field{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width: 240px;
    flex:1 1 240px;
}

.wordbook-field label{
    font-size:12px;
    color:var(--muted);
}

.wordbook-field select,
.wordbook-field input{
    width:100%;
    padding: 12px;
    border-radius: 12px;
    border:1px solid var(--border);
    background: var(--select-bg);
    color: var(--select-text);
    outline:none;
}

.wordbook-field select option{
    background: var(--select-bg);
    color: var(--select-text);
}

.wordbook-batch{
    max-width: 160px;
    min-width: 160px;
    flex:0 0 160px;
}

.wordbook-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.wordbook-empty{
    padding: 18px;
    margin-bottom: 14px;
}

.wordbook-setup-actions{
    margin-top: 14px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.wordbook-list{
    display:grid;
    gap:14px;
}

.wordbook-summary{
    padding: 16px;
    margin-bottom: 14px;
}

.wordbook-stage{
    margin-bottom: 18px;
}

.wordbook-stage-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
    margin-bottom:10px;
    flex-wrap:wrap;
}

.word-card{
    padding: 16px;
    cursor:pointer;
    transition: transform .14s ease, border-color .14s ease, background .14s ease;
}

.word-card:hover{
    transform: translateY(-1px);
}

.word-card.pending{
    border-color: rgba(64,170,255,0.35);
}

.word-card.done{
    border-color: rgba(80,220,140,0.40);
    background: rgba(80,220,140,0.08);
}

.word-card.locked{
    opacity: .65;
    cursor:not-allowed;
}

.word-card-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
    flex-wrap:wrap;
}

.word-card-title{
    font-size:20px;
    font-weight:700;
    line-height:1.3;
}

.word-card-sub{
    margin-top:6px;
    color:var(--muted);
    font-size:13px;
    line-height:1.6;
}

.word-card-section{
    margin-top:14px;
}

.word-card-actions{
    margin-top: 14px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.word-card-section-title{
    font-size:12px;
    color:var(--muted);
    margin-bottom:6px;
}

.word-card-text{
    white-space:pre-wrap;
    word-break:break-word;
    line-height:1.8;
}

.word-example{
    padding: 10px 12px;
    border:1px solid var(--border);
    background: var(--btn);
    border-radius: 12px;
    margin-top:8px;
}

.word-example:first-child{
    margin-top:0;
}

.word-example-en{
    line-height:1.8;
    white-space:pre-wrap;
    word-break:break-word;
}

.word-example-zh{
    margin-top:6px;
    color:var(--muted);
    line-height:1.8;
    white-space:pre-wrap;
    word-break:break-word;
}

.word-example-meta{
    margin-top:8px;
    font-size:12px;
    color:var(--muted);
}

.wordbook-view-wrap{
    max-width:1180px;
}

.wordbook-view-toolbar{
    display:flex;
    align-items:end;
    justify-content:flex-start;
    gap:18px;
    margin-bottom:14px;
    padding:16px;
}

.wordbook-view-toolbar-fields{
    display:flex;
    align-items:end;
    gap:12px;
    width:100%;
    flex-wrap:wrap;
}

.wordbook-view-filter,
.wordbook-view-tag,
.wordbook-view-sort{
    display:grid;
    gap:7px;
}

.wordbook-view-filter{
    flex:2 1 320px;
    min-width:240px;
}

.wordbook-view-tag{
    flex:1 1 140px;
    min-width:130px;
}

.wordbook-view-sort{
    flex:1 1 210px;
    min-width:190px;
}

.wordbook-view-filter span,
.wordbook-view-tag span,
.wordbook-view-sort span{
    color:var(--muted);
    font-size:12px;
}

.wordbook-view-filter select,
.wordbook-view-tag select,
.wordbook-view-sort select{
    width:100%;
    min-width:0;
    padding:12px;
    border:1px solid var(--border);
    border-radius:12px;
    outline:none;
    background:var(--select-bg);
    color:var(--select-text);
}

.wordbook-view-page-size{
    display:grid;
    flex:0 0 100px;
    gap:7px;
}

.wordbook-view-page-size span{
    color:var(--muted);
    font-size:12px;
}

.wordbook-view-page-size select{
    width:100%;
    padding:12px;
    border:1px solid var(--border);
    border-radius:12px;
    outline:none;
    background:var(--select-bg);
    color:var(--select-text);
}

.wordbook-view-table-card{
    padding:0;
    overflow:hidden;
}

.wordbook-view-table-wrap{
    overflow-x:auto;
}

.wordbook-view-table{
    width:100%;
    min-width:720px;
    border-collapse:collapse;
    table-layout:fixed;
}

.wordbook-view-table th{
    padding:13px 18px;
    border-bottom:1px solid var(--border);
    color:var(--muted);
    font-size:12px;
    font-weight:600;
    text-align:left;
}

.wordbook-view-table th:nth-child(1){ width:27%; }
.wordbook-view-table th:nth-child(2){ width:21%; }
.wordbook-view-table th:nth-child(3){ width:52%; }

.wordbook-view-row{
    cursor:pointer;
    transition:background .15s ease;
}

.wordbook-view-row:hover,
.wordbook-view-row:focus,
.wordbook-view-row.is-expanded{
    background:rgba(76,164,255,.08);
    outline:none;
}

.wordbook-view-row td{
    padding:17px 18px;
    border-bottom:1px solid var(--border);
    vertical-align:top;
}

.wordbook-view-word{
    display:flex;
    gap:9px;
    align-items:center;
    font-size:17px;
    font-weight:700;
    line-height:1.45;
    overflow-wrap:anywhere;
}

.wordbook-view-caret{
    flex:0 0 auto;
    color:var(--muted);
    font-size:22px;
    line-height:1;
    transform:rotate(0deg);
    transition:transform .15s ease;
}

.wordbook-view-row.is-expanded .wordbook-view-caret{
    transform:rotate(90deg);
}

.wordbook-view-source-count{
    margin:5px 0 0 25px;
    color:var(--muted);
    font-size:11px;
}

.wordbook-view-phonetic{
    color:var(--muted);
    overflow-wrap:anywhere;
}

.wordbook-view-translation{
    white-space:pre-line;
    overflow-wrap:anywhere;
    line-height:1.7;
}

.wordbook-view-detail-row td{
    padding:0;
    border-bottom:1px solid var(--border);
}

.wordbook-view-detail{
    padding:16px 20px 18px 43px;
    background:rgba(0,0,0,.10);
}

.wordbook-source-list{
    display:grid;
    gap:10px;
}

.wordbook-source-item{
    padding:13px 15px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--btn);
}

.wordbook-source-title{
    min-width:0;
    margin-bottom:9px;
    font-size:12px;
    font-weight:700;
}

.wordbook-source-title a{
    display:block;
    overflow:hidden;
    color:#78a4ff;
    text-decoration:none;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.wordbook-source-title a:hover{
    text-decoration:underline;
}

[data-theme="light"] .wordbook-source-title a{
    color:#2563eb;
}

.wordbook-source-en,
.wordbook-source-zh{
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    line-height:1.75;
}

.wordbook-source-zh{
    margin-top:6px;
    color:var(--muted);
}

.wordbook-source-pager{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    margin-top:13px;
}

.wordbook-source-page-summary{
    margin-right:auto;
    color:var(--muted);
    font-size:12px;
}

.wordbook-source-loading,
.wordbook-source-empty,
.wordbook-view-empty{
    padding:22px;
    color:var(--muted);
    text-align:center;
}

.wordbook-view-main-pager{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    padding:13px 16px;
    border-top:1px solid var(--border);
}

.wordbook-view-main-pager span{
    margin-right:auto;
    color:var(--muted);
    font-size:12px;
}

@media (max-width:720px){
    body[data-page="wordbook-view"] .wordbook-view-wrap{
        width:100%;
        padding:12px;
    }

    body[data-page="wordbook-view"] .header{
        flex-direction:column;
    }

    body[data-page="wordbook-view"] .tools{
        width:100%;
        justify-content:flex-start;
    }

    .wordbook-view-toolbar{
        align-items:stretch;
        flex-direction:column;
        gap:0;
        padding:14px;
    }

    .wordbook-view-toolbar-fields{
        align-items:stretch;
        flex-direction:column;
        gap:14px;
    }

    .wordbook-view-page-size{
        width:100%;
    }

    .wordbook-view-filter,
    .wordbook-view-tag,
    .wordbook-view-sort,
    .wordbook-view-page-size{
        flex:0 0 auto;
        width:100%;
        min-width:0;
    }

    .wordbook-view-filter select,
    .wordbook-view-tag select,
    .wordbook-view-sort select,
    .wordbook-view-page-size select{
        min-height:48px;
        font-size:16px;
    }

    .wordbook-view-table-wrap{
        overflow-x:visible;
    }

    .wordbook-view-table,
    .wordbook-view-table tbody{
        display:block;
        width:100%;
        min-width:0;
    }

    .wordbook-view-table thead{
        display:none;
    }

    .wordbook-view-row{
        display:grid;
        grid-template-columns:minmax(0, 1fr) minmax(88px, auto);
        width:100%;
        border-bottom:1px solid var(--border);
    }

    .wordbook-view-row td{
        display:block;
        min-width:0;
        padding:14px;
        border-bottom:0;
    }

    .wordbook-view-row td:nth-child(2){
        max-width:44vw;
        padding-left:6px;
        text-align:right;
    }

    .wordbook-view-row .wordbook-view-translation{
        grid-column:1 / -1;
        margin:0 14px;
        padding:11px 0 14px;
        border-top:1px solid var(--border);
    }

    .wordbook-view-word{
        font-size:16px;
    }

    .wordbook-view-source-count{
        margin-left:24px;
    }

    .wordbook-view-detail-row,
    .wordbook-view-detail-row td{
        display:block;
        width:100%;
    }

    .wordbook-view-detail-row[hidden]{
        display:none;
    }

    .wordbook-view-detail{
        padding:14px;
    }

    .wordbook-source-item{
        min-width:0;
        padding:12px;
    }

    .wordbook-source-pager{
        flex-wrap:wrap;
    }

    .wordbook-source-page-summary{
        width:100%;
    }

    .wordbook-view-main-pager{
        flex-wrap:wrap;
        padding:12px 14px calc(12px + env(safe-area-inset-bottom));
    }

    .wordbook-view-main-pager span{
        width:100%;
        margin-right:0;
    }

    .wordbook-view-main-pager .btn,
    .wordbook-source-pager .btn{
        flex:1 1 0;
    }
}

.editor-layout{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px;
    align-items:start;
}

body[data-page="editor"] .header{
    gap:16px;
}

body[data-page="editor"] .pill input{
    width:min(28vw, 360px);
}

.editor-left,
.editor-right{
    min-width:0;
}

.editor-left{
    display:grid;
    gap:14px;
}

.editor-right{
    min-height:0;
}

.editor-right > .card{
    height:100%;
}

.video-panel{
    padding:14px;
}

.video-shell{
    width:100%;
    aspect-ratio:16 / 9;
    border-radius:14px;
    overflow:hidden;
    background:#000;
}

.video-player{
    width:100%;
    height:100%;
    display:block;
    background:#000;
    border:0;
}

.video-empty{
    min-height: 220px;
    border:1px dashed var(--border);
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:var(--muted);
    padding:20px;
}

.video-empty.is-uploadable{
    cursor:pointer;
    transition:border-color .18s ease, background .18s ease, color .18s ease;
}

.video-empty.is-uploadable:hover{
    border-color:var(--accent);
    background:rgba(33, 150, 243, 0.08);
    color:var(--text);
}

.video-empty-content{
    display:grid;
    gap:8px;
    justify-items:center;
}

.video-empty-content.is-loading{
    gap:12px;
}

.video-loading-spinner{
    width:42px;
    height:42px;
    border-radius:999px;
    border:3px solid rgba(255,255,255,0.16);
    border-top-color:var(--accent);
    animation:video-spinner .9s linear infinite;
}

.video-loading-progress{
    font-size:14px;
    color:var(--muted);
}

.video-empty.is-loading{
    border-color:rgba(64,170,255,0.35);
    background:rgba(64,170,255,0.05);
    color:var(--text);
}

@keyframes video-spinner{
    to{ transform:rotate(360deg); }
}

.video-empty-title{
    font-size:18px;
    font-weight:600;
    line-height:1.5;
}

.video-empty-action{
    color:var(--accent);
    font-weight:700;
}

.focus-panel{
    padding:14px;
}

.focus-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    flex-wrap:wrap;
}

.focus-title{
    font-size:15px;
    font-weight:700;
}

.focus-time{
    margin-top:6px;
}

.focus-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.focus-subtitle{
    margin-top:14px;
    border:1px solid var(--border);
    background:var(--btn);
    border-radius:14px;
    padding:16px;
}

.focus-subtitle-en{
    font-size:19px;
    line-height:1.8;
    font-weight:600;
    white-space:pre-wrap;
    word-break:break-word;
}

.focus-subtitle-zh{
    margin-top:12px;
    font-size:16px;
    line-height:1.8;
    color:var(--muted);
    white-space:pre-wrap;
    word-break:break-word;
}

.focus-subtitle[data-mode="en"] .focus-subtitle-zh{
    display:none;
}

.focus-index{
    margin-top:12px;
}

.editor-row-active{
    background:rgba(64,170,255,0.10);
}

.editor-row-active td{
    background:transparent;
}

body[data-editor-mode="edit"] .focus-panel{
    display:none;
}

@media (max-width: 900px){
    .grid3{
        grid-template-columns: 1fr;
        width: min(520px, 92vw);
    }

    .tablewrap{
        grid-template-columns: 1fr;
    }

    .editor-layout{
        grid-template-columns: 1fr;
    }

    .editor-right{
        max-height:calc(100vh - 24px);
        overflow:auto;
        overscroll-behavior:contain;
    }

    .editor-right > .card{
        height:auto;
        overflow:visible;
    }

    body[data-page="editor"] .wrap{
        width:100%;
        padding:12px;
    }

    body[data-page="editor"] .pill{
        width:100%;
    }

    body[data-page="editor"] .pill input{
        width:100%;
        min-width:0;
    }
}

@media (min-width: 1400px){
    body[data-page="editor"] .wrap{
        width:min(3400px, calc(100vw - 32px));
        padding:14px 16px 18px;
    }

    .editor-layout{
        gap:16px;
    }
}

@media (min-width: 2200px){
    body[data-page="editor"] .wrap{
        width:min(3800px, calc(100vw - 40px));
        padding:16px 20px 22px;
    }

    .video-panel,
    .focus-panel{
        padding:16px;
    }
}

@media (min-width: 901px){
    .editor-right{
        position:sticky;
        top:12px;
        max-height:calc(100vh - 24px);
        overflow:auto;
        scrollbar-width:thin;
        scrollbar-color:rgba(255,255,255,0.28) transparent;
    }

    .editor-right > .card{
        height:auto;
        max-height:none;
        overflow:visible;
    }

    .editor-right::-webkit-scrollbar{
        width:10px;
    }

    .editor-right::-webkit-scrollbar-track{
        background:transparent;
    }

    .editor-right::-webkit-scrollbar-thumb{
        background:rgba(255,255,255,0.24);
        border-radius:999px;
        border:2px solid transparent;
        background-clip:padding-box;
    }

    .editor-right::-webkit-scrollbar-thumb:hover{
        background:rgba(255,255,255,0.36);
        background-clip:padding-box;
    }
}



.docwords-toolbar{
    padding:16px;
    margin-bottom:14px;
}

.docwords-top{
    position:sticky;
    top:0;
    z-index:30;
    padding-top:12px;
    margin-bottom:14px;
    background:linear-gradient(180deg, var(--bg) 0%, var(--bg) 82%, rgba(10,18,31,0) 100%);
}

.docwords-top .header{
    margin-bottom:14px;
}

.docwords-toolbar-row{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
}

.docwords-summary{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.docwords-filter-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--btn);
    color:var(--muted);
    cursor:pointer;
    transition:border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.docwords-filter-btn:hover{
    border-color:rgba(64,170,255,0.35);
    color:var(--text);
    transform:translateY(-1px);
}

.docwords-filter-btn.active{
    border-color:rgba(64,170,255,0.45);
    background:rgba(64,170,255,0.12);
    color:var(--text);
    box-shadow:0 10px 24px rgba(8, 18, 34, 0.22);
}

.docwords-filter-label{
    font-size:12px;
    white-space:nowrap;
}

.docwords-filter-value{
    min-width:26px;
    height:26px;
    padding:0 8px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.06);
    color:var(--text);
    font-size:12px;
    font-weight:700;
}

.docwords-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.docwords-page-size{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:12px;
    border:1px solid var(--border);
    background:var(--btn);
    color:var(--muted);
    font-size:13px;
}

.docwords-page-size select{
    border:1px solid var(--border);
    background:transparent;
    color:var(--text);
    border-radius:10px;
    padding:6px 10px;
    min-width:68px;
}

.docwords-page-size select option{
    background:var(--select-bg);
    color:var(--select-text);
}

.docwords-pager{
    display:inline-flex;
    align-items:center;
    gap:10px;
}

.docwords-page-info{
    min-width:64px;
    text-align:center;
    color:var(--muted);
    font-size:13px;
}

.docwords-list{
    display:grid;
    gap:14px;
}

.docwords-card-head{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:12px;
    align-items:flex-start;
}

.docwords-check{
    display:flex;
    align-items:flex-start;
    padding-top:4px;
}

.docwords-check input{
    width:18px;
    height:18px;
    accent-color:var(--accent);
}

.docwords-main{
    min-width:0;
}

.docwords-badges{
    margin-top:8px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.docwords-badge{
    display:inline-flex;
    align-items:center;
    padding:4px 10px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--btn);
    color:var(--muted);
    font-size:12px;
    line-height:1.2;
}

.docwords-badge.preferred{
    border-color:rgba(80,220,140,0.35);
    color:#9ae6b4;
}

.docwords-badge.added{
    border-color:rgba(255,200,90,0.35);
    color:#f6d365;
}

.docwords-badge.selectable{
    border-color:rgba(64,170,255,0.35);
    color:#8fd0ff;
}

.docwords-badge.hidden{
    border-color:rgba(255,120,120,0.35);
    color:#ffb4b4;
}

.word-card.hidden-card{
    border-color:rgba(255,120,120,0.24);
    background:rgba(255,120,120,0.05);
}

.word-card.static-card{
    opacity:1;
    cursor:default;
}

.word-card.hidden-card .docwords-check input{
    cursor:not-allowed;
}

.docwords-check input:disabled{
    opacity:.45;
    cursor:not-allowed;
}

@media (max-width: 900px){
    .docwords-top{
        position:sticky;
        top:0;
        padding-top:8px;
    }

    .docwords-card-head{
        grid-template-columns:1fr;
    }

    .docwords-check{
        padding-top:0;
    }

    .docwords-summary{
        width:100%;
    }

    .docwords-actions{
        width:100%;
    }
}



body.is-busy{
    overflow:hidden;
}

.upload-busy-overlay{
    position:fixed;
    inset:0;
    z-index:1200;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(5, 10, 18, 0.56);
    backdrop-filter: blur(3px);
}

.upload-busy-overlay[hidden]{
    display:none;
}

.upload-busy-dialog{
    min-width: 260px;
    max-width: min(92vw, 360px);
    padding: 24px 28px;
    border-radius: 18px;
    border:1px solid var(--border);
    background: color-mix(in srgb, var(--card2) 88%, #0b1220 12%);
    box-shadow: var(--shadow);
    text-align:center;
}

.upload-busy-spinner{
    width: 42px;
    height: 42px;
    margin: 0 auto 14px;
    border-radius: 999px;
    border: 3px solid rgba(255,255,255,0.18);
    border-top-color: var(--accent);
    animation: upload-busy-spin .8s linear infinite;
}

.upload-busy-text{
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
}

@keyframes upload-busy-spin{
    to{ transform:rotate(360deg); }
}

.video-upload-panel{
    margin-top:14px;
    padding:14px 16px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--card);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.video-upload-panel-title{
    font-size:14px;
    font-weight:700;
    margin-bottom:4px;
}

@media (max-width: 900px){
    .video-upload-panel{
        flex-direction:column;
        align-items:flex-start;
    }
}

body[data-page="editor"] .title-linkable{
    cursor:pointer;
    transition: color .16s ease, text-decoration-color .16s ease;
}

body[data-page="editor"] .title-linkable:hover{
    color:#8cc7ff;
    text-decoration:underline;
    text-decoration-color:rgba(140,199,255,0.45);
}

.btn.is-loading{
    position:relative;
    pointer-events:none;
    opacity:.9;
}

.btn.is-loading::before{
    content:"";
    display:inline-block;
    width:14px;
    height:14px;
    margin-right:8px;
    border-radius:999px;
    border:2px solid rgba(255,255,255,0.22);
    border-top-color:currentColor;
    animation:btn-spin .8s linear infinite;
    vertical-align:-2px;
}

@keyframes btn-spin{
    to{ transform:rotate(360deg); }
}

/* =========================================================
   Translation page
========================================================= */

body[data-page="translate"]{
    --translate-blue:#4f8cff;
    --translate-blue-strong:#2f6fec;
    --translate-surface:rgba(16, 25, 42, 0.82);
    --translate-panel:rgba(255,255,255,0.035);
    min-height:100vh;
    background:
        radial-gradient(circle at 14% 8%, rgba(69, 113, 255, 0.15), transparent 30%),
        radial-gradient(circle at 88% 82%, rgba(37, 206, 166, 0.08), transparent 28%),
        var(--bg);
}

body[data-page="translate"][data-theme="light"]{
    --translate-surface:rgba(255,255,255,0.9);
    --translate-panel:rgba(245,248,255,0.88);
}

.translate-wrap{
    max-width:1280px;
    padding-top:24px;
    padding-bottom:48px;
}

.translate-header{
    align-items:center;
    margin-bottom:0;
}

.translate-main{
    padding-top:52px;
}

.translate-intro{
    max-width:760px;
    margin:0 auto 30px;
    text-align:center;
}

.translate-kicker{
    color:#83adff;
    font-size:11px;
    font-weight:800;
    letter-spacing:.22em;
}

.translate-intro h1{
    margin:10px 0 8px;
    font-size:clamp(34px, 5vw, 56px);
    line-height:1.08;
    letter-spacing:-.05em;
}

.translate-intro p{
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.7;
}

.translate-intro kbd{
    display:inline-flex;
    min-width:24px;
    min-height:22px;
    align-items:center;
    justify-content:center;
    padding:1px 6px;
    border:1px solid var(--border);
    border-bottom-width:2px;
    border-radius:6px;
    background:var(--btn);
    color:var(--text);
    font:600 11px/1 ui-sans-serif, system-ui, sans-serif;
}

.translate-card{
    border:1px solid var(--border);
    border-radius:24px;
    background:var(--translate-surface);
    box-shadow:0 28px 80px rgba(0,0,0,.28);
    overflow:hidden;
    backdrop-filter:blur(18px);
}

.translate-language-row{
    display:grid;
    grid-template-columns:1fr 64px 1fr;
    align-items:stretch;
    min-height:78px;
    border-bottom:1px solid var(--border);
}

.translate-language-field{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    align-items:center;
    gap:14px;
    padding:16px 24px;
}

.translate-field-label{
    color:var(--muted);
    font-size:12px;
    white-space:nowrap;
}

.translate-language-field select{
    width:100%;
    min-width:0;
    padding:10px 34px 10px 12px;
    border:0;
    border-radius:10px;
    outline:none;
    background:var(--btn);
    color:var(--text);
    font:700 15px/1.2 ui-sans-serif, system-ui, sans-serif;
    cursor:pointer;
}

.translate-language-field select:focus{
    box-shadow:0 0 0 3px rgba(79,140,255,.18);
}

.translate-language-field select option{
    background:var(--select-bg);
    color:var(--select-text);
}

.translate-swap{
    place-self:center;
    width:42px;
    height:42px;
    border:1px solid var(--border);
    border-radius:50%;
    background:var(--btn);
    color:#91b5ff;
    font-size:21px;
    cursor:pointer;
    transition:transform .2s ease, background .2s ease, border-color .2s ease;
}

.translate-swap:hover{
    transform:rotate(180deg);
    border-color:rgba(79,140,255,.45);
    background:rgba(79,140,255,.14);
}

.translate-swap:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.translate-panels{
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:390px;
}

.translate-panel{
    min-width:0;
    padding:22px 24px 16px;
    display:flex;
    flex-direction:column;
}

.translate-source-panel{
    border-right:1px solid var(--border);
}

.translate-result-panel{
    background:var(--translate-panel);
}

.translate-panel-topline{
    min-height:28px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    color:var(--muted);
    font-size:12px;
}

.translate-icon-btn{
    width:28px;
    height:28px;
    padding:0;
    border:0;
    border-radius:50%;
    background:var(--btn);
    color:var(--muted);
    font-size:21px;
    line-height:1;
    cursor:pointer;
}

.translate-icon-btn:hover{
    background:var(--btn2);
    color:var(--text);
}

.translate-source-panel textarea{
    width:100%;
    flex:1;
    min-height:270px;
    padding:18px 0;
    border:0;
    outline:0;
    resize:none;
    background:transparent;
    color:var(--text);
    font:500 20px/1.7 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.translate-source-panel textarea::placeholder{
    color:color-mix(in srgb, var(--muted) 70%, transparent);
}

.translate-source-panel textarea:read-only{
    opacity:.8;
}

.translate-result{
    flex:1;
    min-height:270px;
    padding:18px 0;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    color:var(--text);
    font:500 20px/1.7 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.translate-empty{
    height:100%;
    min-height:240px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    color:var(--muted);
    font-size:14px;
}

.translate-empty-mark{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border:1px solid rgba(79,140,255,.24);
    border-radius:18px;
    background:rgba(79,140,255,.08);
    color:#91b5ff;
    font:800 22px/1 serif;
    transform:rotate(-4deg);
}

.translate-panel-footer{
    min-height:40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    color:var(--muted);
}

.translate-count{
    font-size:12px;
    font-variant-numeric:tabular-nums;
}

.translate-result-actions{
    justify-content:flex-end;
}

.translate-text-btn{
    padding:8px 10px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:var(--muted);
    font-size:12px;
    cursor:pointer;
}

.translate-text-btn:hover:not(:disabled){
    background:var(--btn);
    color:var(--text);
}

.translate-text-btn:disabled{
    opacity:.38;
    cursor:not-allowed;
}

.translate-ready-badge{
    padding:5px 9px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--btn);
    color:var(--muted);
    font-size:11px;
}

.translate-ready-badge.is-ready{
    border-color:rgba(47,209,157,.3);
    background:rgba(47,209,157,.1);
    color:#7ce5c0;
}

.translate-ready-badge.is-working{
    border-color:rgba(79,140,255,.35);
    background:rgba(79,140,255,.11);
    color:#99baff;
}

.translate-ready-badge.is-error{
    border-color:rgba(255,90,90,.35);
    background:rgba(255,90,90,.1);
    color:#ffaaaa;
}

.translate-action-row{
    min-height:84px;
    padding:16px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    border-top:1px solid var(--border);
}

.translate-action-meta{
    min-width:0;
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}

.translate-model-picker{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--muted);
    font-size:12px;
}

.translate-model-picker select{
    min-width:180px;
    padding:9px 32px 9px 11px;
    border:1px solid var(--border);
    border-radius:10px;
    outline:none;
    background:var(--select-bg);
    color:var(--select-text);
    font:600 12px/1.2 ui-sans-serif, system-ui, sans-serif;
    cursor:pointer;
}

.translate-model-picker select:focus{
    border-color:rgba(79,140,255,.45);
    box-shadow:0 0 0 3px rgba(79,140,255,.12);
}

.translate-model-picker select:disabled{
    opacity:.55;
    cursor:not-allowed;
}

.translate-api-note{
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--muted);
    font-size:12px;
}

.translate-note-dot{
    width:7px;
    height:7px;
    flex:0 0 auto;
    border-radius:50%;
    background:#f5b942;
    box-shadow:0 0 0 4px rgba(245,185,66,.1);
}

.translate-note-dot.is-online{
    background:#2fd19d;
    box-shadow:0 0 0 4px rgba(47,209,157,.1);
}

.translate-submit{
    min-width:148px;
    min-height:50px;
    padding:12px 22px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    border:0;
    border-radius:14px;
    background:linear-gradient(135deg, var(--translate-blue), var(--translate-blue-strong));
    box-shadow:0 12px 30px rgba(47,111,236,.26);
    color:#fff;
    font:700 15px/1 ui-sans-serif, system-ui, sans-serif;
    cursor:pointer;
    transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.translate-submit:hover:not(:disabled){
    transform:translateY(-1px);
    box-shadow:0 15px 34px rgba(47,111,236,.34);
}

.translate-submit:disabled{
    opacity:.45;
    box-shadow:none;
    cursor:not-allowed;
}

.translate-submit.is-loading span:last-child{
    animation:translate-arrow-pulse .8s ease-in-out infinite alternate;
}

@keyframes translate-arrow-pulse{
    to{ transform:translateX(5px); }
}

.translate-tips{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
    margin-top:20px;
}

.translate-tips article{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:13px;
    padding:16px 18px;
    border:1px solid var(--border);
    border-radius:16px;
    background:rgba(255,255,255,.025);
}

.translate-tip-index{
    color:#78a4ff;
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
}

.translate-tips strong{
    font-size:13px;
}

.translate-tips p{
    margin:5px 0 0;
    color:var(--muted);
    font-size:12px;
    line-height:1.55;
}

@media (max-width:900px){
    .grid4{
        grid-template-columns:repeat(2, 1fr);
    }

    .translate-main{
        padding-top:34px;
    }

    .translate-panels{
        grid-template-columns:1fr;
    }

    .translate-source-panel{
        border-right:0;
        border-bottom:1px solid var(--border);
    }

    .translate-tips{
        grid-template-columns:1fr;
    }
}

@media (max-width:640px){
    .translate-wrap{
        padding:14px 10px 34px;
    }

    .translate-header{
        align-items:flex-start;
    }

    .translate-header .meta{
        display:none;
    }

    .translate-header .tools{
        gap:5px;
    }

    .translate-header .tools .btn{
        padding:8px 9px;
        font-size:12px;
    }

    .translate-main{
        padding-top:28px;
    }

    .translate-intro{
        margin-bottom:22px;
    }

    .translate-intro h1{
        font-size:36px;
    }

    .translate-intro p{
        padding:0 14px;
    }

    .translate-card{
        border-radius:18px;
    }

    .translate-language-row{
        grid-template-columns:1fr 48px 1fr;
        min-height:72px;
    }

    .translate-language-field{
        display:block;
        padding:12px 10px;
    }

    .translate-field-label{
        display:block;
        margin:0 0 5px 3px;
        font-size:10px;
    }

    .translate-language-field select{
        padding:8px 24px 8px 8px;
        font-size:13px;
    }

    .translate-swap{
        width:34px;
        height:34px;
        font-size:17px;
    }

    .translate-panel{
        padding:17px 16px 12px;
    }

    .translate-panels{
        min-height:0;
    }

    .translate-source-panel textarea,
    .translate-result{
        min-height:210px;
        font-size:17px;
    }

    .translate-empty{
        min-height:180px;
    }

    .translate-action-row{
        padding:14px 16px;
        align-items:stretch;
        flex-direction:column;
    }

    .translate-action-meta{
        width:100%;
        align-items:stretch;
        flex-direction:column;
        gap:12px;
    }

    .translate-model-picker{
        justify-content:space-between;
    }

    .translate-model-picker select{
        min-width:0;
        flex:1;
    }

    .translate-submit{
        width:100%;
    }
}

/* =========================================================
   Public roadmap
========================================================= */

.roadmap-wrap{
    max-width:1040px;
    padding-top:32px;
    padding-bottom:42px;
}

.roadmap-header{
    align-items:flex-start;
    margin-bottom:30px;
}

.roadmap-kicker{
    margin-bottom:9px;
    color:#78a4ff;
    font-size:11px;
    font-weight:800;
    letter-spacing:.16em;
}

.roadmap-title{
    margin:0;
    font-size:clamp(42px, 7vw, 72px);
    line-height:1;
    letter-spacing:-.045em;
}

.roadmap-lead{
    max-width:560px;
    margin:14px 0 0;
    color:var(--muted);
    font-size:16px;
    line-height:1.7;
}

.roadmap-main{
    display:grid;
    gap:28px;
}

.roadmap-summary{
    display:grid;
    grid-template-columns:minmax(180px, .7fr) 2fr;
    gap:28px;
    align-items:center;
    padding:20px 22px;
    background:linear-gradient(135deg, rgba(64,170,255,.12), var(--card));
}

.roadmap-summary > div{
    display:grid;
    gap:5px;
}

.roadmap-summary-label{
    color:var(--muted);
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.roadmap-summary strong{
    font-size:17px;
}

.roadmap-summary p{
    margin:0;
    color:var(--muted);
    line-height:1.75;
}

.roadmap-timeline{
    position:relative;
    display:grid;
    gap:18px;
}

.roadmap-timeline::before{
    content:"";
    position:absolute;
    top:13px;
    bottom:28px;
    left:139px;
    width:1px;
    background:var(--border);
}

.roadmap-entry{
    position:relative;
    display:grid;
    grid-template-columns:116px minmax(0, 1fr);
    gap:48px;
    align-items:start;
}

.roadmap-entry::before{
    content:"";
    position:absolute;
    top:25px;
    left:134px;
    width:11px;
    height:11px;
    border:3px solid var(--bg);
    border-radius:999px;
    background:#73809a;
    box-shadow:0 0 0 1px var(--border);
}

.roadmap-entry.is-latest::before,
.roadmap-entry.is-today::before{
    background:#4ca4ff;
    box-shadow:0 0 0 5px rgba(76,164,255,.12);
}

.roadmap-date{
    padding-top:18px;
    text-align:right;
}

.roadmap-date time{
    display:block;
    font-size:13px;
    font-weight:700;
    letter-spacing:.02em;
}

.roadmap-date span{
    display:inline-block;
    margin-top:6px;
    padding:3px 7px;
    border-radius:999px;
    background:rgba(76,164,255,.13);
    color:#78a4ff;
    font-size:10px;
    font-weight:800;
}

.roadmap-card{
    padding:21px 24px 22px;
    overflow:visible;
    box-shadow:0 10px 30px rgba(0,0,0,.16);
}

.roadmap-card-head{
    display:flex;
    justify-content:space-between;
    gap:14px;
    align-items:center;
}

.roadmap-card h2{
    margin:0;
    font-size:18px;
    line-height:1.4;
}

.roadmap-badge{
    flex:0 0 auto;
    padding:5px 9px;
    border:1px solid rgba(76,164,255,.32);
    border-radius:999px;
    background:rgba(76,164,255,.10);
    color:#78a4ff;
    font-size:10px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.roadmap-card ul{
    margin:13px 0 0;
    padding-left:20px;
    color:var(--muted);
}

.roadmap-card li{
    padding-left:4px;
    line-height:1.75;
}

.roadmap-card li + li{
    margin-top:5px;
}

.roadmap-footer{
    display:flex;
    justify-content:space-between;
    gap:18px;
    margin-top:34px;
    padding-top:18px;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:12px;
}

@media (max-width:720px){
    .roadmap-wrap{
        padding:20px 14px 34px;
    }

    .roadmap-header{
        display:grid;
        gap:20px;
    }

    .roadmap-header .tools{
        justify-content:flex-start;
    }

    .roadmap-summary{
        grid-template-columns:1fr;
        gap:12px;
    }

    .roadmap-timeline::before{
        left:5px;
    }

    .roadmap-entry{
        grid-template-columns:1fr;
        gap:9px;
        padding-left:27px;
    }

    .roadmap-entry::before{
        top:7px;
        left:0;
    }

    .roadmap-date{
        padding-top:0;
        text-align:left;
    }

    .roadmap-date time{
        display:inline-block;
    }

    .roadmap-date span{
        margin:0 0 0 7px;
    }

    .roadmap-card{
        padding:18px;
    }

    .roadmap-footer{
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }
}

/* Long sentence splitter */
.sentence-split-wrap{max-width:1500px}
.split-control-card,.split-table-card{margin-top:16px}
.split-control-card{padding:22px 24px}
.split-table-card{padding:20px}
.split-help{margin:0 0 14px;color:var(--muted);line-height:1.55}
.split-toolbar{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
.split-toolbar label{display:grid;gap:5px;color:var(--muted);font-size:12px}
.split-toolbar select,.split-toolbar input,.split-control-card textarea{
    border:1px solid var(--border);border-radius:9px;background:var(--select-bg);
    color:var(--text);font:inherit;padding:9px 10px
}
.split-toolbar select{min-width:230px}
.split-toolbar input{width:110px}
.split-editor-label{display:block;margin:16px 0 6px;color:var(--muted);font-size:12px}
.split-control-card textarea{display:block;width:100%;box-sizing:border-box;resize:vertical;line-height:1.5}
.split-actions{margin-top:10px}
.split-status{margin-top:12px;color:var(--muted)}
.split-status.is-error{color:#ef4444}
.split-section-heading{display:flex;gap:10px;align-items:baseline;margin-bottom:10px;font-size:17px;font-weight:700}
.split-section-heading small{font-size:12px;font-weight:400;color:var(--muted)}
.split-table-scroll{overflow:auto;max-height:440px;padding:0 8px 8px;border:1px solid var(--border);border-radius:12px;background:rgba(0,0,0,.08)}
.split-table{width:100%;min-width:980px;border-collapse:separate;border-spacing:0;font-size:13px}
.split-table th,.split-table td{padding:12px 14px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;line-height:1.5}
.split-table th{position:sticky;top:0;z-index:1;background:var(--bg);white-space:nowrap}
.split-table th:first-child,.split-table td:first-child{padding-left:18px}
.split-table th:last-child,.split-table td:last-child{padding-right:18px}
.split-table tbody tr{cursor:pointer}
.split-table tbody tr:hover,.split-table tbody tr.is-selected{background:rgba(59,130,246,.14)}
.split-table td:last-child{min-width:360px;line-height:1.45}
.split-empty{text-align:center!important;color:var(--muted);padding:30px!important}
.split-notes{margin-top:10px;color:var(--muted);font-size:13px;line-height:1.5}
.smart-review{margin-top:16px;padding:16px;border:1px solid var(--border);border-radius:12px;background:rgba(59,130,246,.07)}
.smart-review-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.smart-review-head>div{display:grid;gap:4px}
.smart-review-head small{color:var(--muted)}
.smart-review-badge{padding:5px 9px;border-radius:999px;background:rgba(34,197,94,.14);color:#4ade80;font-size:12px;white-space:nowrap}
.smart-review-badge.needs-review{background:rgba(245,158,11,.14);color:#fbbf24}
.smart-review-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.smart-review-grid article{min-width:0;padding:14px;border:1px solid var(--border);border-radius:10px;background:var(--card)}
.smart-review-grid h3{margin:0 0 8px;color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.smart-review-grid p{margin:0;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.smart-review-actions{margin-top:12px}
.batch-plan-list{display:grid;gap:9px;margin-top:12px}
.batch-plan-item{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:12px;border:1px solid var(--border);border-radius:10px;cursor:pointer}
.batch-plan-item.needs-review{border-color:#d97706;background:rgba(217,119,6,.08)}
.batch-plan-item>span{display:grid;gap:5px}
.batch-plan-item small{color:var(--muted)}
.batch-comparison{display:grid;grid-template-columns:80px 1fr;gap:8px;line-height:1.4}
.batch-comparison em{color:var(--muted);font-style:normal}
@media (max-width:720px){
    .split-toolbar>*{width:100%}
    .split-toolbar select,.split-toolbar input{width:100%;box-sizing:border-box}
    .split-table td:last-child{min-width:260px}
    .split-control-card{padding:16px}
    .split-table-card{padding:14px}
    .smart-review-grid{grid-template-columns:1fr}
    .batch-comparison{grid-template-columns:1fr}
}