/* Minimal, rounded, frosted-glass cards for 汉语古音手册 */
:root{
	--bg:#eef2f7;
	--card-bg: rgba(255,255,255,0.52);
	--card-border: rgba(255,255,255,0.6);
	--accent: #2b6cb0;
	--muted:#6b7280;
	--glass-shadow: rgba(11,20,45,0.06);
}
html,body{height:100%;background:var(--bg);margin:0}
body{font-family:"Noto Sans CJK SC", 'Microsoft YaHei', system-ui, -apple-system, Roboto, 'Segoe UI', 'PingFang SC';color:#0f172a}

/* Header / search */
header.topbar{backdrop-filter: blur(6px) saturate(120%);background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(247,248,251,0.6));box-shadow:0 6px 18px rgba(11,20,45,0.06)}
.brand{letter-spacing:0.2px}
.search-wrap{max-width:880px;margin-left:auto}
#search-input{border-radius:14px;padding:10px 14px;border:1px solid rgba(255,255,255,0.5);background:linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.35));backdrop-filter: blur(8px) saturate(120%);box-shadow:0 6px 20px var(--glass-shadow);transition:box-shadow .18s,transform .12s}
#search-input:focus{outline:none;box-shadow:0 12px 36px rgba(43,108,176,0.16);transform:translateY(-2px)}
#search-btn{border-radius:12px;padding:9px 14px;border:none;background:var(--accent);color:#fff}

/* entries container */
#entries{max-width:980px;margin:18px auto;padding:12px}

/* Each word as a card */
h1{margin:0;font-size:22px}
.entry-card{background:var(--card-bg);border-radius:14px;padding:16px 18px;margin:14px 6px;box-shadow:0 10px 30px var(--glass-shadow);border:1px solid var(--card-border);backdrop-filter: blur(10px) saturate(120%);transition:transform .28s ease,box-shadow .28s ease,opacity .36s ease;opacity:0;transform:translateY(12px) scale(.998);}
.entry-card.show{opacity:1;transform:none}
.entry-card:hover{transform:translateY(-8px) scale(1.01);box-shadow:0 26px 54px rgba(11,20,45,0.10)}
.entry-meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-top:8px}
table{width:100%;border-radius:10px;overflow:hidden;margin-top:10px}
th,td{padding:8px 10px;font-size:14px}

.highlighted{animation:glow 1.6s ease;box-shadow:0 0 0 6px rgba(43,108,176,0.08)}
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(43,108,176,0.12)}50%{box-shadow:0 0 0 8px rgba(43,108,176,0.06)}100%{box-shadow:0 0 0 0 rgba(43,108,176,0.02)}}

/* frosted search */
#search-input.frost{box-shadow:0 8px 18px rgba(12,18,36,0.06);border:1px solid rgba(255,255,255,0.45);}

/* responsive */
@media (max-width:720px){
	.brand{font-size:14px}
	#entries{padding:6px}
	.entry-card{margin:10px 4px;padding:12px}
}

/* utility: animate entry cards on load */
.fade-in{animation:cardIn .42s cubic-bezier(.2,.9,.2,1) both}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* return to top button */
#back-to-top{position:fixed;right:20px;bottom:26px;width:46px;height:46px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.4));backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(11,20,45,0.12);border:1px solid rgba(255,255,255,0.6);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:translateY(8px);transition:opacity .22s,transform .22s}
#back-to-top.show{opacity:1;transform:none}
#back-to-top svg{width:20px;height:20px;fill:var(--accent)}

/* small helpers */
.muted{color:var(--muted)}