
.library-theme-game{--lp-ink:#80622e;--lp-line:#ddc98f;--lp-bg:#fff8df;--lp-selected:#f8e8b5;--lp-accent:#b48b39;--lp-shadow:#b7965633}
.library-theme-peidui{--lp-ink:#397b72;--lp-line:#a4cfc6;--lp-bg:#eefaf5;--lp-selected:#d4eee5;--lp-accent:#449c89;--lp-shadow:#3e8f8133}
.library-theme-gaoxiao{--lp-ink:#557044;--lp-line:#b3c89e;--lp-bg:#f5faea;--lp-selected:#e0edc9;--lp-accent:#709854;--lp-shadow:#667f4433}
.library-theme-yifan{--lp-ink:#95674f;--lp-line:#e2baa6;--lp-bg:#fff3e8;--lp-selected:#f9dfcf;--lp-accent:#c28564;--lp-shadow:#a8725033}
.library-dialog,.library-preview{box-sizing:border-box;color:var(--lp-ink);background:linear-gradient(145deg,#fff,var(--lp-bg));border:2px solid #ffffffdd;border-radius:24px;box-shadow:0 7px 0 var(--lp-line),0 20px 65px var(--lp-shadow);font-family:system-ui,'Microsoft YaHei',sans-serif}
.library-dialog{position:fixed;width:min(620px,calc(100vw - 28px));height:min(760px,88svh);max-height:88svh;padding:18px 0 0;overflow:hidden}
.library-dialog[open]{display:flex;flex-direction:column}
.library-dialog::backdrop,.library-preview::backdrop{background:#263e4c88;backdrop-filter:blur(6px)}
.library-close{position:absolute;z-index:2;right:7px;top:5px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--lp-ink);font:28px/1 system-ui;cursor:pointer}
.library-tabs{flex:0 0 auto;display:flex;gap:8px;overflow-x:auto;padding:8px 42px 16px 16px;border-bottom:1px solid var(--lp-line);scrollbar-width:thin}
.library-tab{flex:0 0 auto;border:1px solid var(--lp-line);border-radius:12px;background:#ffffffb3;color:var(--lp-ink);padding:10px 18px;font:700 16px system-ui;cursor:pointer}
.library-tab[aria-selected=true]{background:var(--lp-accent);color:#fff;box-shadow:0 3px 8px var(--lp-shadow)}
.library-list{flex:1;min-height:0;display:grid;align-content:start;gap:10px;overflow-y:auto;padding:14px 10px 18px;overscroll-behavior:contain;scrollbar-width:thin}
.library-row{display:flex;align-items:center;gap:15px;min-height:88px;padding:4px 16px;border:2px solid var(--lp-line);border-radius:17px;background:#ffffffd9;box-shadow:0 4px 0 var(--lp-line);cursor:pointer}
.library-row.selected{background:var(--lp-selected);outline:2px solid var(--lp-accent);outline-offset:2px}
.library-images{display:flex;align-items:center;gap:5px;flex:0 0 auto;max-width:46%}
.library-zoom{display:block;flex:0 1 auto;min-width:0;border:0;padding:0;background:transparent;cursor:zoom-in}
.library-zoom img{display:block;height:78px;width:auto;max-width:100%;object-fit:contain;border-radius:0}
.library-placeholder{display:grid;place-items:center;width:42px;height:78px;font-size:30px}
.library-choice{display:flex;align-items:center;justify-content:space-between;align-self:stretch;gap:8px;flex:1;min-width:0;padding:5px 0;border:0;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.library-copy{flex:1;min-width:0;overflow-wrap:anywhere}.library-copy strong{display:block;font-size:18px;line-height:1.35}.library-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 10px;margin-top:4px;font-size:11px;font-weight:400;line-height:1.4;opacity:.8}.library-count{white-space:nowrap}.library-check{flex:0 0 25px;color:var(--lp-accent);font-size:24px;font-weight:800}
.library-preview{position:fixed;width:fit-content;max-width:94vw;max-height:94svh;padding:44px 12px 16px;overflow:auto;text-align:center}.library-preview>img{display:block;margin:auto;max-width:88vw;max-height:calc(90svh - 130px);object-fit:contain}.library-preview-confirm{display:block;width:min(320px,100%);margin:16px auto 0;padding:15px 24px;border:0;border-radius:14px;background:var(--lp-accent);color:#fff;font:700 17px system-ui;cursor:pointer;box-shadow:0 4px 0 var(--lp-line)}
.library-dialog button:focus-visible,.library-preview button:focus-visible{outline:3px solid var(--lp-accent);outline-offset:2px}
@media(max-width:600px){.library-tab{padding:9px 13px;font-size:15px}.library-row{gap:12px;padding:4px 12px}.library-images{gap:4px}.library-zoom img,.library-placeholder{height:72px}.library-check{flex-basis:20px;font-size:22px}.library-copy strong{font-size:17px}}

.library-zoom{border-radius:5px;overflow:hidden}
.library-zoom img{border-radius:5px;object-fit:fill}

.word-order-dialog{width:min(360px,calc(100vw - 32px));padding:24px 22px;border:2px solid #fff;border-radius:22px;background:linear-gradient(145deg,#fff,var(--lp-bg));color:var(--lp-ink);box-shadow:0 7px 0 var(--lp-line),0 22px 60px var(--lp-shadow);text-align:center}
.word-order-dialog::backdrop{background:#263e4c88;backdrop-filter:blur(5px)}
.word-order-title{margin:0;font-size:22px;color:var(--lp-ink)}.word-order-hint{margin:7px 0 16px;font-size:13px;opacity:.72}
.word-order-option{display:block;width:100%;margin:9px 0;padding:13px 16px;border:2px solid var(--lp-line);border-radius:13px;background:#ffffffb3;color:var(--lp-ink);font:800 16px system-ui,'Microsoft YaHei',sans-serif;cursor:pointer;box-shadow:0 3px 0 var(--lp-line)}
.word-order-option:hover,.word-order-option.selected{border-color:var(--lp-accent);background:var(--lp-selected);color:var(--lp-ink)}
.word-order-cancel{margin-top:8px;padding:9px 20px;border:0;border-radius:10px;background:transparent;color:var(--lp-ink);font:600 13px system-ui;cursor:pointer}
.word-order-dialog button:focus-visible{outline:3px solid var(--lp-accent);outline-offset:2px}

/* Reserve a separate close row above the horizontally scrolling tabs. */
.library-dialog{padding-top:44px}
.library-dialog>.library-close{top:7px;right:10px;width:30px;height:30px;background:#ffffffa6;border:1px solid var(--lp-line);font-size:24px}
.library-dialog .library-tabs{padding:4px 14px 12px}
