:root{--bg: #f4f4f6;--card: rgba(255, 255, 255, .72);--ink: #1d1d1f;--sub: #6e6e73;--line: rgba(0, 0, 0, .08);--accent: #000000;--danger: #ff3b30;--radius: 22px;--gold1: #f6d365;--gold2: #fda085;--violet1: #8e7cff;--violet2: #5f9dfb;--pink1: #ff9ad5;--green1: #5bd0a0}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,Microsoft YaHei,PingFang SC,Segoe UI,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-2;background:radial-gradient(46% 40% at 10% -5%,rgba(142,124,255,.26),transparent 70%),radial-gradient(40% 34% at 92% 4%,rgba(255,154,213,.22),transparent 70%),radial-gradient(50% 44% at 50% 105%,rgba(91,208,160,.18),transparent 74%),radial-gradient(30% 26% at 75% 45%,rgba(246,211,101,.12),transparent 70%),linear-gradient(180deg,#fbfbfd,#f1f1f6)}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 60%);mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 60%)}#app{max-width:920px;margin:0 auto;padding:0 20px 90px}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;padding:16px 6px;background:linear-gradient(180deg,#ffffffa8,#ffffff4d);backdrop-filter:saturate(200%) blur(22px);-webkit-backdrop-filter:saturate(200%) blur(22px);border-bottom:1px solid rgba(255,255,255,.55);box-shadow:0 4px 24px #0000000a;border-radius:0 0 20px 20px}.brand{font-size:21px;font-weight:800;letter-spacing:.6px;white-space:nowrap;background:linear-gradient(92deg,#1d1d1f 25%,#6e6e73,#1d1d1f 65%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s linear infinite}@keyframes shine{0%{background-position:200% 0}to{background-position:-200% 0}}.brand .dot{background:linear-gradient(120deg,#f6d365,#ff9ad5,#8e7cff,#5bd0a0);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 20px rgba(255,154,213,.5)}.nav{margin-left:auto;display:flex;gap:6px}.nav a{text-decoration:none;color:var(--ink);font-size:15px;font-weight:600;padding:9px 16px;border-radius:999px;white-space:nowrap;transition:all .18s ease;position:relative}.nav a:hover{background:#0000000e;transform:translateY(-1px)}.nav a.router-link-active{background:linear-gradient(120deg,#2b2b2f,#000);color:#fff;box-shadow:0 6px 18px #00000038,inset 0 1px #ffffff40,0 0 14px #8e7cff59}.card{position:relative;background:var(--card);border-radius:var(--radius);padding:30px;margin-top:22px;border:1px solid rgba(255,255,255,.85);box-shadow:0 1px 2px #00000008,0 12px 32px #0000000f,inset 0 1px #fffffff2;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);animation:cardIn .5s cubic-bezier(.2,.7,.3,1)}@keyframes cardIn{0%{transform:translateY(10px) scale(.99)}to{transform:none}}.card:before{content:"";position:absolute;top:0;left:5%;right:5%;height:2px;border-radius:0 0 6px 6px;background:linear-gradient(90deg,transparent,var(--gold1) 15%,var(--pink1) 40%,var(--violet1) 65%,var(--green1) 85%,transparent);opacity:.7}.card h1{font-size:30px;font-weight:800;letter-spacing:.3px;background:linear-gradient(180deg,#000 40%,#3a3a3e);-webkit-background-clip:text;background-clip:text;color:transparent}.card .sub{color:var(--sub);font-size:15px;margin-top:8px;line-height:1.7}.label{font-size:12px;font-weight:700;color:var(--sub);letter-spacing:1.2px;text-transform:uppercase;margin:20px 0 8px}textarea,input[type=text],input[type=number]{width:100%;border:1px solid rgba(0,0,0,.1);border-radius:14px;padding:15px 17px;font-size:16px;font-family:inherit;background:#ffffffe6;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s,transform .15s;box-shadow:inset 0 1px 2px #00000008}textarea:focus,input:focus{border-color:#0000008c;box-shadow:0 0 0 4px #0000000f,0 0 22px #8e7cff24;transform:translateY(-1px)}textarea{min-height:150px;resize:vertical;line-height:1.85}.seg{display:flex;gap:8px;flex-wrap:wrap}.seg button{border:1px solid rgba(0,0,0,.09);background:#ffffffd9;color:var(--ink);padding:10px 18px;border-radius:13px;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap;transition:all .16s ease;box-shadow:0 1px 2px #00000008}.seg button:hover{border-color:#00000059;transform:translateY(-1px)}.seg button.on{background:linear-gradient(135deg,#2b2b2f,#000);color:#fff;border-color:transparent;box-shadow:0 5px 16px #00000040,inset 0 1px #ffffff38}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:15px;padding:16px 28px;font-size:17px;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap;transition:transform .14s ease,box-shadow .2s ease,opacity .14s ease,background .2s}.btn:active{transform:scale(.965)}.btn.primary{background:linear-gradient(135deg,#2e2e33,#000 60%,#151518);color:#fff;box-shadow:0 8px 22px #00000047,inset 0 1px #ffffff47;position:relative;overflow:hidden}.btn.primary:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translate(-120%);transition:transform .6s ease}.btn.primary:hover:after{transform:translate(120%)}.btn.primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px #00000052}.btn.ghost{background:linear-gradient(180deg,#fff,#f2f2f5);color:#000;border:1.5px solid rgba(0,0,0,.85);box-shadow:0 4px 12px #00000014,inset 0 1px #fff}.btn.ghost:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00000024}.btn.soft{background:linear-gradient(180deg,#fff,#ececef);color:#000;border:1px solid rgba(0,0,0,.08);box-shadow:0 2px 8px #0000000f}.btn.soft:hover{transform:translateY(-2px)}.btn.danger{background:#fff;color:var(--danger);border:1.5px solid rgba(255,59,48,.65)}.btn.danger:hover{background:#ff3b300f;transform:translateY(-2px)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}.btn+.btn{margin-left:10px}.btn-row{margin-top:24px;display:flex;flex-wrap:wrap}.result-line{border-bottom:1px solid rgba(0,0,0,.06);padding:16px 2px;animation:lineIn .45s cubic-bezier(.2,.7,.3,1)}.result-line:nth-child(2){animation-delay:.06s}.result-line:nth-child(3){animation-delay:.12s}.result-line:nth-child(4){animation-delay:.18s}.result-line:nth-child(5){animation-delay:.24s}.result-line:nth-child(6){animation-delay:.3s}.result-line:nth-child(7){animation-delay:.36s}.result-line:nth-child(8){animation-delay:.42s}.result-line:nth-child(9){animation-delay:.48s}.result-line:nth-child(n+10){animation-delay:.54s}@keyframes lineIn{0%{transform:translate(8px)}to{transform:none}}.result-line:last-child{border-bottom:0}.rl-origin{font-size:15px;color:var(--sub);line-height:1.7}.rl-harm{font-size:24px;font-weight:800;line-height:1.6;margin-top:5px;letter-spacing:1px;background:linear-gradient(180deg,#1d1d1f 20%,#4b4b52);-webkit-background-clip:text;background-clip:text;color:transparent}.rl-pinyin{font-size:13px;color:var(--sub);margin-top:2px;line-height:1.6;letter-spacing:.5px}.tabs{display:flex;gap:6px;margin:20px 0 6px}.tab{border:1px solid rgba(0,0,0,.09);background:#ffffffd9;color:var(--ink);padding:10px 20px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .16s ease}.tab:hover{transform:translateY(-1px);border-color:#0000004d}.tab.on{background:linear-gradient(135deg,#2b2b2f,#000);color:#fff;border-color:transparent;box-shadow:0 5px 16px #00000038,inset 0 1px #fff3}.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:16px;margin-top:18px}.book-card{background:#ffffffd9;border-radius:18px;padding:20px;cursor:pointer;border:1px solid rgba(255,255,255,.9);box-shadow:0 2px 6px #0000000a,0 10px 26px #0000000d;transition:transform .18s ease,box-shadow .22s ease,border-color .18s;position:relative;overflow:hidden;animation:cardIn .5s cubic-bezier(.2,.7,.3,1)}.book-card:nth-child(2){animation-delay:.05s}.book-card:nth-child(3){animation-delay:.1s}.book-card:nth-child(4){animation-delay:.15s}.book-card:nth-child(5){animation-delay:.2s}.book-card:nth-child(6){animation-delay:.25s}.book-card:nth-child(7){animation-delay:.3s}.book-card:nth-child(8){animation-delay:.35s}.book-card:nth-child(n+9){animation-delay:.4s}.book-card:after{content:"";position:absolute;top:-60%;left:-20%;width:60%;height:200%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);transform:rotate(12deg) translate(-180%);transition:transform .55s ease}.book-card:hover:after{transform:rotate(12deg) translate(320%)}.book-card:hover{transform:translateY(-4px);border-color:#00000029;box-shadow:0 16px 40px #0000001f,0 0 0 1px #0000000a}.bc-title{font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:linear-gradient(180deg,#000 45%,#333);-webkit-background-clip:text;background-clip:text;color:transparent}.bc-meta{font-size:13px;color:var(--sub);margin-top:9px;display:flex;gap:12px;align-items:center}.bc-tag{display:inline-block;font-size:12px;font-weight:800;padding:4px 11px;border-radius:999px;background:#000;color:#fff;white-space:nowrap;box-shadow:0 2px 8px #0000002e}.bc-tag.ja{background:linear-gradient(135deg,#ff8fb1,#ff5c8a);color:#fff;box-shadow:0 2px 10px #ff5c8a59}.bc-tag.ko{background:linear-gradient(135deg,#7db9ff,#4a90e2);color:#fff;box-shadow:0 2px 10px #4a90e259}.lyric-block{margin-top:24px}.lyric-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:14px 2px;border-bottom:1px solid rgba(0,0,0,.06);animation:lineIn .4s cubic-bezier(.2,.7,.3,1)}.lyric-row:nth-child(n+2){animation-delay:.07s}.lyric-row:last-child{border-bottom:0}.lyric-origin{font-size:15px;line-height:1.7;color:var(--ink)}.lyric-harm{font-size:18px;font-weight:700;line-height:1.7;color:var(--ink);background:linear-gradient(180deg,#1d1d1f 25%,#555);-webkit-background-clip:text;background-clip:text;color:transparent}.lyric-col small{display:block;color:var(--sub);font-size:11px;margin-bottom:5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}table.tbl{width:100%;border-collapse:collapse;margin-top:12px}.tbl th,.tbl td{text-align:left;padding:13px 15px;border-bottom:1px solid rgba(0,0,0,.06);font-size:15px}.tbl th{font-size:12px;color:var(--sub);font-weight:800;letter-spacing:1px;white-space:nowrap}.tbl tr:hover td{background:#00000006}.empty{color:var(--sub);text-align:center;padding:48px 0;font-size:15px}.msg{margin-top:13px;font-size:14px;line-height:1.6;font-weight:500}.msg.err{color:var(--danger)}.msg.ok{color:#14854a;background:#14854a14;display:inline-block;padding:6px 14px;border-radius:10px}.loading{color:var(--sub);font-size:15px;padding:24px 0;text-align:center}.footer{text-align:center;color:var(--sub);font-size:12px;margin-top:44px;line-height:1.9}