*{margin:0;padding:0;box-sizing:border-box}
body{height:100vh;display:flex;flex-direction:column;overflow:hidden;font-family:system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:#eef0f6;color:#1f2937}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}
::-webkit-scrollbar-track{background:transparent}
.hd{flex-shrink:0;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;padding:16px 28px;box-shadow:0 2px 12px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hd h1{font-size:18px;font-weight:800}
.hd p{font-size:12px;opacity:.85;margin-top:2px}
.sch{flex-shrink:0;background:#fff;padding:10px 28px;box-shadow:0 1px 6px rgba(0,0,0,.06);display:flex;align-items:center;gap:10px}
.sch input{flex:1;max-width:520px;border:2px solid #e5e7eb;border-radius:999px;padding:9px 20px;font-size:14px;outline:none;transition:.2s;background:#f8fafc;color:#1f2937}
.sch input:focus{border-color:#6366f1;background:#fff;box-shadow:0 0 0 4px #f0f0ff}
.sch .hint{font-size:11px;color:#9ca3af;white-space:nowrap}
.lay{flex:1;display:flex;overflow:hidden}
.sb{width:210px;flex-shrink:0;overflow-y:auto;background:#fff;border-right:1px solid #e5e7eb;padding:10px 8px}
.sb .ch{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;font-size:12px;color:#4b5563;cursor:pointer;border-radius:10px;margin-bottom:2px;transition:.15s;overflow-wrap:anywhere}
.sb .ch:hover{background:#f0f0ff;color:#6366f1}
.sb .ch.ac{background:#eef0ff;color:#6366f1;font-weight:700}
.sb .ch .bdg{background:#f3f4f6;color:#6b7280;border-radius:999px;padding:1px 8px;font-size:10px;flex-shrink:0}
.sb .ch.ac .bdg{background:#6366f1;color:#fff}
.mn{flex:1;display:flex;flex-direction:column;overflow:hidden}
.navbar{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:16px;padding:10px 24px;background:#fff;border-bottom:1px solid #e5e7eb}
.pg{display:flex;align-items:center;gap:16px}
.mbtn{display:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid #e5e7eb;background:#fff;color:#6366f1;font-size:15px;cursor:pointer;transition:.15s}
.mbtn:hover{background:#f0f0ff}
.pos{font-size:12px;color:#6b7280;min-width:90px;text-align:center;font-variant-numeric:tabular-nums}
.navbtn{width:36px;height:36px;border-radius:50%;border:1px solid #e5e7eb;background:#fff;color:#6366f1;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;line-height:1}
.navbtn:hover:not(:disabled){background:#6366f1;color:#fff;border-color:#6366f1}
.navbtn:disabled{opacity:.3;cursor:not-allowed}
.stage{flex:1;overflow-y:auto;padding:22px 28px 40px}
.card{max-width:780px;margin:0 auto;background:#fff;border-radius:18px;box-shadow:0 6px 28px rgba(31,41,55,.10);overflow:hidden;animation:fade .28s ease}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.chead{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;padding:24px 28px}
.cn{font-size:11px;background:rgba(255,255,255,.22);display:inline-block;padding:2px 12px;border-radius:999px;margin-bottom:12px;letter-spacing:.3px;overflow-wrap:anywhere}
.wrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.word{font-size:36px;font-weight:800;letter-spacing:.5px;line-height:1.2;overflow-wrap:anywhere;word-break:break-all}
.oc{font-size:12px;font-weight:800;background:#fff;color:#ea580c;padding:4px 14px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.18);flex-shrink:0}
.pho{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.ph{font-size:16px;opacity:.92;overflow-wrap:anywhere}
.ab{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.45);color:#fff;border-radius:999px;padding:5px 14px;font-size:11px;cursor:pointer;transition:.15s;font-weight:600;flex-shrink:0}
.ab:hover{background:#fff;color:#6366f1}
.trans{margin-top:12px;font-size:15px;line-height:1.6;background:rgba(255,255,255,.18);border-radius:12px;padding:9px 16px;display:inline-block;max-width:100%;overflow-wrap:anywhere}
.cbody{padding:20px 28px 26px}
.sec{margin-bottom:14px;background:#f8fafc;border:1px solid #eef0f4;border-radius:12px;padding:12px 16px}
.sname{font-size:11px;font-weight:700;color:#6366f1;letter-spacing:1px;margin-bottom:6px}
.sex{font-size:14px;line-height:1.75;color:#374151;overflow-wrap:anywhere}
.secn{font-size:12px;color:#6b7280;margin-top:5px;line-height:1.6;overflow-wrap:anywhere}
.sr{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.stats{display:inline-block;background:#f0f0ff;color:#6366f1;border-radius:999px;padding:4px 12px;font-size:11px;font-weight:600}
.stats b{color:#f97316;font-size:12px}
.dr{display:flex;flex-wrap:wrap;gap:6px}
.dt{font-size:11px;padding:3px 10px;background:#f0f0ff;color:#6366f1;border-radius:999px}
.hr{display:flex;align-items:center;gap:3px;margin:4px 0}
.hname{width:72px;font-size:10px;color:#9ca3af;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdot{width:13px;height:13px;border-radius:3px;flex-shrink:0}
.zi{font-size:13px;color:#4b5563;padding:9px 12px;border-left:3px solid #8b5cf6;background:#fff;border-radius:0 10px 10px 0;margin-bottom:8px;line-height:1.7;box-shadow:0 1px 3px rgba(0,0,0,.04);overflow-wrap:anywhere}
.zi b{color:#f97316}
.zsrc{font-size:10px;color:#9ca3af;margin-top:4px}
.emp{text-align:center;padding:60px 20px;color:#9ca3af;font-size:14px}
.snav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.sbtn{border:1px solid #e5e7eb;background:#fff;color:#6366f1;border-radius:999px;padding:4px 12px;font-size:11px;cursor:pointer;transition:.15s;font-weight:600}
.sbtn:hover:not(:disabled){background:#6366f1;color:#fff;border-color:#6366f1}
.sbtn:disabled{opacity:.35;cursor:not-allowed}
.spos{font-size:11px;color:#6b7280}
.loading{position:fixed;inset:0;z-index:9999;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .5s}
.loading.hide{opacity:0;pointer-events:none}
.spin{width:56px;height:56px;border:4px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ltxt{color:#fff;font-size:20px;font-weight:800;letter-spacing:6px;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
.backdrop{position:fixed;inset:0;z-index:880;background:rgba(17,24,39,.4);opacity:0;pointer-events:none;transition:opacity .25s}
.backdrop.on{opacity:1;pointer-events:auto}
.ft{flex-shrink:0;text-align:center;padding:10px 16px;background:#fff;border-top:1px solid #e5e7eb;font-size:12px}
.ft a{color:#6366f1;text-decoration:none;font-weight:700;cursor:default}
.ft a:hover{text-decoration:none}
@media(max-width:768px){
.mbtn{display:flex}
.navbar{justify-content:space-between;padding:8px 12px}
.pg{gap:10px}
.pos{min-width:70px;font-size:11px}
.sb{position:fixed;left:0;top:0;bottom:0;z-index:900;width:250px;transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 0 30px rgba(0,0,0,.25)}
.sb.open{transform:none}
.hd{padding:12px 16px}
.hd h1{font-size:15px}
.hd p{font-size:10px}
.sch{padding:8px 12px}
.sch input{font-size:13px;padding:8px 14px}
.sch .hint{display:none}
.stage{padding:12px 10px 26px}
.card{border-radius:14px}
.chead{padding:16px 16px}
.word{font-size:28px}
.cbody{padding:12px 14px 18px}
.trans{font-size:13px}
.sname{letter-spacing:.5px}
.hname{width:52px}
.snav{flex-wrap:wrap}
}