:root{
    --bg-a:#fff7fb;
    --bg-b:#f1fff7;
    --bg-c:#eef7ff;
    --ink:#31405f;
    --muted:#7280a4;
    --pink:#ff78b8;
    --blue:#76c9ff;
    --mint:#65d6a4;
    --sun:#ffd166;
    --line:#e9eefc;
}
body{
    color:var(--ink);
    background:
        radial-gradient(circle at 8% 9%, #ffd7ec 0 5.5%, transparent 6%),
        radial-gradient(circle at 91% 13%, #ccecff 0 6.5%, transparent 7.2%),
        radial-gradient(circle at 84% 88%, #d6ffe7 0 6%, transparent 6.8%),
        linear-gradient(135deg,var(--bg-a),var(--bg-b) 46%,var(--bg-c));
}
.page-shell{max-width:1180px;margin:0 auto;padding:10px 14px 28px}
.hero{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    padding:26px 22px;
    background:linear-gradient(120deg,#ffffffd9,#fff0f8d9,#ecf9ffd9);
    border:1px solid rgba(255,255,255,.94);
    box-shadow:0 16px 36px rgba(84,105,155,.15);
    backdrop-filter:blur(7px);
}
.hero::before,.hero::after{
    content:"";
    position:absolute;
    border-radius:999px;
    opacity:.38;
    background:linear-gradient(135deg,#ffc3e4,#bfeaff);
    z-index:0;
}
.hero::before{width:190px;height:190px;right:-52px;top:-52px}
.hero::after{width:125px;height:125px;left:-34px;bottom:-38px}
.hero h1,.hero p,.hero .chips{position:relative;z-index:1}
.hero h1{margin:0 0 10px;font-size:32px;line-height:1.25;font-weight:900;letter-spacing:0;color:#2f3c5a}
.hero p{margin:0;color:var(--muted);line-height:1.8}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.chip{
    border-radius:999px;
    border:1px solid #ffd4e9;
    background:linear-gradient(90deg,#fff,#f5fbff);
    color:#e2589f;
    padding:7px 13px;
    font-size:13px;
    font-weight:800;
}
.toolbar{
    margin-top:16px;
    display:grid;
    grid-template-columns:minmax(220px,1fr) 170px 170px 160px;
    gap:10px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#ffffffd6;
    box-shadow:0 10px 24px rgba(76,100,151,.1);
}
.toolbar input,.toolbar select{
    min-height:40px;
    width:100%;
    border:1px solid #dde6fb;
    border-radius:13px;
    background:#fff;
    color:#516286;
    padding:9px 12px;
    box-sizing:border-box;
}
.source-tip{
    display:none;
    margin:14px 0 0;
    padding:11px 14px;
    text-align:center;
    color:#7b88a8;
    background:#ffffffc8;
    border:1px solid var(--line);
    border-radius:16px;
}
.card-grid{
    margin-top:16px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:15px;
}
.novel-card{
    position:relative;
    min-height:220px;
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:15px;
    color:inherit;
    text-decoration:none;
    border:1px solid #e8eefb;
    border-radius:20px;
    background:
        linear-gradient(135deg,#fff,#fff8fc 48%,#f1f8ff),
        #fff;
    box-shadow:0 12px 26px rgba(73,96,143,.11);
    overflow:hidden;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.novel-card::before{
    content:"";
    position:absolute;
    width:88px;
    height:88px;
    right:-26px;
    top:-26px;
    border-radius:999px;
    background:linear-gradient(135deg,#ffd5eb,#cceeff);
    opacity:.7;
}
.novel-card:hover{
    transform:translateY(-6px) rotate(-.35deg);
    border-color:#ffb8dc;
    box-shadow:0 20px 38px rgba(73,96,143,.18);
}
.card-top{position:relative;display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.novel-title{margin:0;font-size:18px;line-height:1.35;font-weight:900;color:#2f3c5a}
.rank-badge{
    flex:0 0 auto;
    min-width:42px;
    border-radius:999px;
    padding:5px 9px;
    text-align:center;
    color:#fff;
    background:linear-gradient(90deg,var(--pink),var(--blue));
    font-size:12px;
    font-weight:900;
}
.meta{color:#6f7fa1;font-size:13px;line-height:1.55}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{
    border-radius:999px;
    padding:4px 9px;
    background:#fff;
    border:1px solid #ffd4e9;
    color:#e2589f;
    font-size:12px;
    line-height:1.3;
}
.queries{margin:auto 0 0;padding:0;list-style:none;display:grid;gap:5px}
.queries li{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#7b88a8;
    font-size:13px;
}
.open-line{
    margin-top:3px;
    color:#3687f7;
    font-size:13px;
    font-weight:800;
}
.empty-tip{
    display:none;
    margin-top:16px;
    text-align:center;
    padding:24px;
    color:#7b88a8;
    background:#ffffffd6;
    border:1px solid var(--line);
    border-radius:18px;
}
#friend-links{
    margin-top:18px;
    border-radius:16px;
    border:1px solid #e8eefb;
    background:#ffffffcf;
    box-shadow:0 10px 24px rgba(82,103,148,.08);
    padding:12px 14px;
}
#friend-links h3{margin:0 0 8px;color:#2f3c5a;font-weight:800}
@media (max-width:980px){
    .toolbar{grid-template-columns:1fr 1fr}
    .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
    .page-shell{padding-left:10px;padding-right:10px}
    .hero{padding:18px 14px;border-radius:18px}
    .hero h1{font-size:24px}
    .toolbar,.card-grid{grid-template-columns:1fr}
    .novel-card{min-height:0}
}