@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url("./fonts/inter-vietnamese-wght-normal.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url("./fonts/inter-latin-ext-wght-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url("./fonts/inter-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{color-scheme:light dark;--bg:#fafafa;--surface:#fff;--rail:#f4f4f5;--ink:#18181b;--muted:#52525b;--line:#dedee2;--hover:#eeeef0;--accent:#225a47;--accent-bg:#deeee6;--danger:#a72535;--font:"Inter","Segoe UI","Leelawadee UI","Microsoft YaHei",system-ui,sans-serif}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#18181b;--surface:#212124;--rail:#141416;--ink:#f4f4f5;--muted:#b3b3bc;--line:#3c3c43;--hover:#2d2d33;--accent:#a4dec4;--accent-bg:#233b30;--danger:#ff9aa4}}
:root[data-theme=dark]{color-scheme:dark;--bg:#18181b;--surface:#212124;--rail:#141416;--ink:#f4f4f5;--muted:#b3b3bc;--line:#3c3c43;--hover:#2d2d33;--accent:#a4dec4;--accent-bg:#233b30;--danger:#ff9aa4}
:root[data-theme=light]{color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:13px/1.5 var(--font)}
[hidden]{display:none!important}
h1,h2,p{margin:0} h1{font-size:30px;line-height:1.15;font-weight:650;letter-spacing:-.045em} h2{font-size:17px;font-weight:650}
.muted{color:var(--muted)} .error{color:var(--danger)} .notice{padding:8px 0;color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
button,input,select,textarea{border:1px solid var(--line);border-radius:7px;background:var(--surface)}
button{display:inline-flex;gap:7px;align-items:center;justify-content:center;white-space:nowrap;min-height:34px;padding:0 10px;cursor:pointer;font-weight:550}
button:hover{background:var(--hover)} button:disabled{opacity:.45;cursor:default}
button.primary{background:#235c49;border-color:#235c49;color:#fff} button.primary:hover{background:#194737}
button.plain{border-color:transparent;background:transparent} button.plain:hover{background:var(--hover)}
input,select,textarea{width:100%;min-width:0;padding:0 9px}
input:not([type=checkbox]){height:var(--input-height,35px);font-size:13px}
input[type=checkbox]{width:auto;accent-color:var(--accent)}
select{height:34px;font-size:12px}
textarea{padding:7px 9px;resize:vertical}
label{display:grid;gap:4px;font-weight:550}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
svg{width:16px;height:16px;flex:none}
.brand{display:flex;gap:9px;align-items:center;font-size:19px;font-weight:700;letter-spacing:-.04em}
.mark{display:block;flex:none}
.auth{min-height:100dvh;display:grid;grid-template-columns:minmax(320px,42%) 1fr}
.auth-art{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(26px,5vw,72px);background:#202023;color:#f4f4f5;overflow:hidden}
.type-specimen{display:grid;gap:8px;font-size:clamp(48px,8vw,128px);line-height:1.02;letter-spacing:-.075em}
.type-specimen span:nth-child(2){color:#a1a1aa}
.auth-art p{color:#c4c4cc}.auth-art p span{padding:0 7px}
.auth-panel{display:grid;place-items:center;padding:24px}
.auth-panel form{width:min(100%,340px);display:grid;gap:16px}.auth-panel h1{margin-bottom:6px}.mobile-brand{display:none}
.auth-panel .remember-choice{display:flex;align-items:center;gap:7px;width:fit-content}
.workspace{display:grid;grid-template-columns:204px minmax(0,1fr);min-height:100dvh}
.sidebar{position:sticky;top:0;height:100dvh;background:var(--rail);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 12px;gap:28px}
.sidebar .brand{margin:0 7px}.sidebar nav{display:grid;gap:3px}.sidebar button{justify-content:flex-start;background:transparent;border-color:transparent;color:var(--muted)}
.sidebar button:hover{background:var(--hover)}.sidebar [aria-current=page]{background:var(--accent-bg);color:var(--accent)}.logout{margin-top:auto}
.topbar{height:53px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;color:var(--muted)}
.topbar strong{color:var(--ink)}.slash{margin:0 6px;opacity:.65}
.breadcrumb{display:flex;align-items:center}
.topbar-actions{display:flex;align-items:center;gap:3px}
#password-dialog{width:min(400px,calc(100% - 24px))}
.password-fields{display:grid;gap:10px}
.topbar-brand{display:none}
.content{max-width:1440px;margin:auto;padding:22px 24px}.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.page-head p{margin-top:3px}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:8px}.toolbar select{width:auto;max-width:100%}
.language-view{display:inline-flex;gap:2px;margin-bottom:8px;padding:2px;border:1px solid var(--line);border-radius:7px;background:var(--rail)}
.language-view button{padding:0 8px;border-color:transparent;background:transparent;font-size:12px}
.language-view button:hover{background:var(--hover)}
.language-view button[aria-pressed=true]{background:var(--accent-bg);color:var(--accent)}
.library[data-language-view="th-TH"] [data-translation-column="vi-VN"],
.library[data-language-view="vi-VN"] [data-translation-column="th-TH"]{display:none}
@media(min-width:851px){
    .library:is([data-language-view="th-TH"],[data-language-view="vi-VN"]) :is(.entry,.columns){grid-template-columns:29px minmax(100px,1.05fr) minmax(100px,1.65fr) minmax(60px,.55fr) 32px}
}
.search{flex:1;min-width:min(100%,215px);position:relative}.search svg{position:absolute;left:10px;top:9px;color:var(--muted)}.search input{padding-left:32px}
.library{background:var(--surface);border:1px solid var(--line);border-radius:9px}
.columns,.entry{display:grid;grid-template-columns:29px minmax(100px,1.05fr) minmax(100px,1fr) minmax(100px,1fr) minmax(60px,.55fr) 32px;gap:8px;align-items:start;padding:5px 9px}
.columns{background:var(--rail);border-radius:9px 9px 0 0;font-size:11px;font-weight:650;color:var(--muted)}
.entry{border-top:1px solid var(--line);line-height:1.35;overflow-wrap:anywhere}.entry:hover{background:var(--bg)}.entry strong{font-size:13px}.entry small{display:block;color:var(--muted);font-size:11px}.entry details{margin:0}.entry summary{cursor:pointer}.entry summary strong{font-size:13px}.language-label{display:none}
.entry>button{min-height:29px;padding:0}
.translation{display:flex;align-items:flex-start;gap:4px}.translation details{flex:1;min-width:0}.translation button{min-height:28px;padding:0 5px}.entry button[aria-pressed=true]{color:var(--accent);background:var(--accent-bg)}.entry button[aria-pressed=true] svg{fill:currentColor}
.chip{display:inline-block;padding:1px 6px;background:var(--accent-bg);color:var(--accent);border-radius:5px;margin:0 3px 3px 0;font-size:11px}
.actions{position:relative}.actions summary{list-style:none;text-align:center;border:1px solid var(--line);border-radius:6px;padding:4px}.actions summary::-webkit-details-marker{display:none}
.action-menu{position:absolute;right:0;z-index:2;display:grid;min-width:132px;background:var(--surface);padding:4px;border:1px solid var(--line);border-radius:7px}.action-menu button{justify-content:flex-start;border:0}
.empty{padding:48px 16px;text-align:center;color:var(--muted)}
.pager{display:flex;align-items:center;justify-content:space-between;margin-top:12px}.pager div{display:flex;gap:6px}
dialog{margin:auto;padding:0;width:min(600px,calc(100% - 24px));max-height:calc(100dvh - 24px);border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
dialog::backdrop{background:#101b17a6}
.dialog-head,.dialog-foot{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:5px 12px;background:var(--surface);position:sticky;z-index:1}
.dialog-head h2{font-size:15px}
.dialog-head button,.dialog-foot button{min-height:30px}
.dialog-head button{width:30px;padding:0}
.dialog-head{top:0;border-bottom:1px solid var(--line)}.dialog-foot{bottom:0;justify-content:flex-end;border-top:1px solid var(--line)}
.dialog-body{padding:16px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.dialog-body summary{cursor:pointer;font-weight:650;margin-bottom:7px}
.tag-options{display:flex;flex-wrap:wrap;gap:9px}.tag-options label{display:flex;align-items:center}.tag-row{display:flex;gap:7px;align-items:center;margin-bottom:8px}.tag-row input{flex:1}.tag-row span{white-space:nowrap}
@media(max-width:850px){
    .topbar .workspace-label{display:none}
    .topbar-brand{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:650}
    .language-view button{padding-inline:12px}
.workspace{display:block;padding-bottom:calc(62px + env(safe-area-inset-bottom))}.sidebar{position:fixed;inset:auto 0 0;height:auto;z-index:4;padding:5px 6px calc(5px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--line);display:flex;flex-direction:row;gap:3px}.sidebar .brand{display:none}.sidebar nav{display:flex;flex:4;gap:3px}.sidebar button{flex:1;display:grid;justify-items:center;justify-content:center;font-size:10px;gap:2px;padding:3px;min-height:44px}.logout{margin:0}.content{padding:22px 14px}.topbar{padding:0 14px}.page-head{margin-bottom:16px}.page-head p{font-size:12px}.columns{display:none}
.library{border:0;background:transparent}.entry{background:var(--surface);border:1px solid var(--line);border-radius:8px;margin-bottom:8px;grid-template-columns:36px minmax(0,1fr) 40px;gap:9px}.meaning{grid-column:2}.actions{grid-column:3;grid-row:1}.translation,.entry-tags{grid-column:2/-1}.translation:empty,.entry-tags:empty{display:none}.translation button{min-height:44px;min-width:44px}.language-label{display:block}.search{flex-basis:100%}
:root{--input-height:36px}
input:not([type=checkbox]),select{height:var(--input-height);font-size:14px}
}
@media(max-width:560px){.auth{display:block}.auth-art{display:none}.auth-panel{min-height:100dvh}.mobile-brand{display:flex;margin-bottom:16px}.form-grid{grid-template-columns:1fr}.toolbar select{flex:1 1 40%}.page-head h1{font-size:25px}}
.translation{display:block;min-width:0}
.entry .language-label{display:none}
.translation-head{display:flex;align-items:center;gap:5px;min-height:23px}
.translation-head strong{line-height:1.35}
.translation-head button{flex:none;min-width:23px;min-height:23px;padding:0;border-color:transparent;background:var(--accent-bg);color:var(--accent)}
.translation-head button:hover{border-color:var(--accent)}
.translation-head button svg{width:14px;height:14px}
.phonetic{color:var(--muted);font-size:12px;line-height:1.3}
.phonetic-zh{letter-spacing:.025em}
.learning-status{width:auto;max-width:100%;height:23px;margin-top:3px;padding:0 4px;font-size:11px;vertical-align:middle}
.status-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(76px,96px) auto auto;gap:5px;align-items:center;margin-bottom:7px}
#status-form{grid-template-columns:minmax(0,1fr) minmax(76px,96px) auto}
.status-row select,.learning-status{background:var(--status-bg,var(--surface));color:var(--status-ink,var(--ink));color-scheme:light}
[data-color=gray],.status-row option[value=gray]{--status-bg:#e4e4e7;--status-ink:#27272a}
[data-color=red],.status-row option[value=red]{--status-bg:#fee2e2;--status-ink:#7f1d1d}
[data-color=orange],.status-row option[value=orange]{--status-bg:#ffedd5;--status-ink:#7c2d12}
[data-color=yellow],.status-row option[value=yellow]{--status-bg:#fef9c3;--status-ink:#713f12}
[data-color=green],.status-row option[value=green]{--status-bg:#dcfce7;--status-ink:#14532d}
[data-color=blue],.status-row option[value=blue]{--status-bg:#dbeafe;--status-ink:#1e3a8a}
[data-color=purple],.status-row option[value=purple]{--status-bg:#f3e8ff;--status-ink:#581c87}
[data-color=pink],.status-row option[value=pink]{--status-bg:#fce7f3;--status-ink:#831843}
.status-row option{background:var(--status-bg);color:var(--status-ink)}
.voice-toast{position:fixed;right:18px;bottom:18px;z-index:10;width:max-content;max-width:min(390px,calc(100% - 36px));padding:10px 12px;border:1px solid #cbd7e7;border-inline-start:3px solid #7694bc;background:#edf3fa;color:#20344e;box-shadow:0 4px 14px #0002;overflow-wrap:anywhere;pointer-events:none;animation:toast-in .16s ease-out}
.voice-toast[data-tone="vi-VN"]{background:#faf2e7;color:#533921;border-color:#e6d4bd;border-inline-start-color:#bc956a}
.voice-toast[data-tone="error"]{background:#fbecef;color:#742538;border-color:#edcbd3;border-inline-start-color:#bd697c}
@keyframes toast-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.voice-toast{animation:none}}
.tag-picker{min-width:0}
.editor-body{display:grid;gap:8px;padding:12px 14px}
.editor-body label{gap:2px}
.editor-body .form-grid{gap:6px 8px}
.editor-body .meaning-fields{grid-template-columns:minmax(82px,.65fr) repeat(2,minmax(0,1fr))}
.editor-body .translation-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
.translation-field-wide{grid-column:1/-1}
.editor-body details>summary{margin-bottom:4px}
.editor-body textarea{min-height:36px;padding:4px 8px}
.editor-body :is(input:not([type=checkbox]),select,textarea):focus-visible{outline:1px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.tag-picker summary{padding:5px 8px;border:1px solid var(--line);border-radius:7px;margin:0;background:var(--surface);font-weight:500;overflow-wrap:anywhere}
.editor-body .tag-picker summary{margin:0}
.tag-picker summary .chip{margin-bottom:0}
.tag-popover{margin-top:3px;padding:5px;border:1px solid var(--line);border-radius:7px;background:var(--bg);display:grid;gap:3px;scroll-margin-bottom:70px}
.tag-popover input[type=search]{appearance:none;height:var(--input-height,35px)}
.tag-popover #tag-search:focus-visible{outline-color:var(--muted);border-color:var(--line)}
.tag-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px}
.tag-choices{max-height:98px;overflow:auto}
.tag-choices label{display:flex;align-items:center;gap:6px;padding:2px 5px;min-height:24px;cursor:pointer;overflow-wrap:anywhere}
.tag-choices label:hover{background:var(--hover)}
.tag-choices p{padding:4px 6px}
.tag-popover button{justify-self:start;min-height:27px;white-space:normal;overflow-wrap:anywhere;max-width:100%;text-align:left}
.tag-popover #tag-clear{min-height:var(--input-height,35px)}
.entry .translation-more{margin-top:3px}
.entry .translation-more:not([open]){display:inline-block;margin-inline-start:6px;vertical-align:middle}
.translation-more summary{width:fit-content;color:var(--accent);font-size:11px;font-weight:600}
.translation-more dl{margin:3px 0 5px;color:var(--muted)}
.translation-more dt{font-size:11px;font-weight:650;color:var(--ink);margin-top:4px}
.translation-more dd{margin:0}
.translation-more .voice-control{gap:2px;font-size:11px;color:var(--muted)}
@media(max-width:850px){
    .voice-toast{bottom:calc(69px + env(safe-area-inset-bottom))}
    .content{padding:15px 10px}
    .page-head{margin-bottom:10px}
    .entry{padding:8px;gap:7px 8px;margin-bottom:8px;grid-template-columns:44px minmax(0,1fr) 44px}
    .entry>button,.entry .actions summary,.entry .action-menu button{min-height:34px}
    .entry .actions summary{display:grid;place-items:center;padding:0}
    .translation:not(:empty){padding:4px 6px 0;border-top:1px solid var(--line);grid-column:1/-1}
    .entry .language-label{display:block;color:var(--language-accent);font-weight:650}
    .translation-head{min-height:34px;justify-content:space-between}
    .translation-head button{min-width:44px;min-height:34px;background:var(--language-bg);color:var(--language-accent)}
    .translation-head button svg{width:17px;height:17px}
    .tag-choices label{min-height:32px}
    .learning-status{height:34px;font-size:14px;padding-inline:8px}
    .translation-more summary{display:flex;align-items:center;justify-content:center;min-width:52px;min-height:34px;padding:0 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);font-size:13px}
    .translation-more .voice-control select{height:34px}
}
@media(min-width:480px) and (max-width:850px){
    .entry{grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) 44px}
    .entry .meaning{grid-column:2/4}
    .entry .actions{grid-column:4}
    .entry .translation:nth-child(3){grid-column:1/3}
    .entry .translation:nth-child(4){grid-column:3/5}
    .entry .entry-tags{grid-column:1/-1}
    .library:is([data-language-view="th-TH"],[data-language-view="vi-VN"]) .entry .translation{grid-column:1/-1}
}
@media(max-width:560px){
    .editor-body .meaning-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
    .editor-body .meaning-fields label:first-child{grid-column:1/-1;max-width:120px}
    .status-row button{padding-inline:6px}
}
dialog,.voice-toast{border-radius:0}
#editor{width:min(660px,calc(100% - 24px))}
#entry-form{display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-height:calc(100dvh - 26px)}
#editor .editor-body{overflow:auto;overscroll-behavior:contain;gap:12px;padding:14px 16px}
#editor .tag-popover{scroll-margin-bottom:8px}
:is(.language-section,.translation)[data-language="th-TH"]{--language-accent:#2459a5;--language-bg:#edf3ff}
:is(.language-section,.translation)[data-language="vi-VN"]{--language-accent:#87501d;--language-bg:#fbf1e4}
:root[data-theme="dark"] :is(.language-section,.translation)[data-language="th-TH"]{--language-accent:#b5ceff;--language-bg:#24344d}
:root[data-theme="dark"] :is(.language-section,.translation)[data-language="vi-VN"]{--language-accent:#ffd0a1;--language-bg:#3c2e23}
@media(prefers-color-scheme:dark){
    :root:not([data-theme="light"]) :is(.language-section,.translation)[data-language="th-TH"]{--language-accent:#b5ceff;--language-bg:#24344d}
    :root:not([data-theme="light"]) :is(.language-section,.translation)[data-language="vi-VN"]{--language-accent:#ffd0a1;--language-bg:#3c2e23}
}
.language-section{min-width:0;border:1px solid var(--line);border-inline-start:3px solid var(--language-accent)}
.editor-body .language-section>summary{display:flex;align-items:center;gap:8px;min-height:36px;margin:0;padding:5px 11px;list-style:none;background:var(--language-bg);color:var(--language-accent)}
.language-section>summary::-webkit-details-marker{display:none}
.language-section>summary::after{content:"";width:6px;height:6px;margin:0 2px 3px auto;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg)}
.language-section[open]>summary::after{margin-bottom:-3px;transform:rotate(225deg)}
.language-section-name{font-size:13px;font-weight:700}
.language-section-native{font-size:12px;font-weight:500}
.language-section .translation-fields{padding:9px 11px 11px}
@media(max-width:560px){
    .dialog-head,.dialog-foot{padding-inline:10px}
    .dialog-head button,.dialog-foot button{min-height:36px}
    .dialog-head button{width:36px}
    #editor .editor-body{padding:10px;gap:10px}
    .language-section .translation-fields{padding:8px}
}