:root {
  --bg: #f8f6f2;
  --card: #ffffff;
  --card-hover: #faf8f4;
  --text: #2c2c2c;
  --text2: #888888;
  --accent: #b87333;
  --accent2: #9a5e2a;
  --accent-light: rgba(184,115,51,0.08);
  --border: rgba(0,0,0,0.06);
  --radius: 12px;
  --shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-hover: 0 4px 16px rgba(184,115,51,0.12);
}
@media(prefers-color-scheme:dark){
  :root {
    --bg: #14141e;
    --card: #1c1c2e;
    --card-hover: #222238;
    --text: #d8d8e6;
    --text2: #7a7a96;
    --accent: #d4945a;
    --accent2: #b87a42;
    --accent-light: rgba(212,148,90,0.1);
    --border: rgba(255,255,255,0.06);
    --shadow: 0 1px 3px rgba(0,0,0,0.2);
    --shadow-hover: 0 4px 20px rgba(212,148,90,0.15);
  }
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased}
.container{max-width:920px;margin:0 auto;padding:20px}

/* Header */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:20px 0 16px}
.topbar h1{font-size:22px;color:var(--accent);letter-spacing:4px;font-weight:700}
.topbar .slogan{font-size:12px;font-weight:400;letter-spacing:1px;color:var(--text2);opacity:0.6}
.topbar .user-area{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0}
.topbar .user-area .btn{background:var(--card);border:1px solid var(--border);padding:6px 14px;border-radius:8px;cursor:pointer;font-size:12px;color:var(--text);transition:.2s;box-shadow:var(--shadow);flex-shrink:0}
.topbar .user-area .btn:hover{border-color:var(--accent);color:var(--accent);box-shadow:var(--shadow-hover)}
.topbar .user-area .uname{font-size:13px;color:var(--accent);font-weight:600}

/* Upload area */
.upload-area{border:2px dashed var(--border);border-radius:16px;padding:24px;text-align:center;cursor:pointer;transition:.3s;background:var(--card);margin-bottom:16px;box-shadow:var(--shadow)}
.upload-area:hover{border-color:var(--accent);background:var(--accent-light)}
.upload-area .icon{font-size:34px;color:var(--accent)}
.upload-area .text{color:var(--text2);font-size:13px;margin-top:6px}
.upload-vis{display:flex;justify-content:center;gap:16px;margin-top:10px;font-size:12px;color:var(--text2)}
.upload-vis label{cursor:pointer;display:flex;align-items:center;gap:4px}

/* Tabs */
.tabs{display:flex;gap:6px;margin-bottom:12px}
.tabs span{padding:4px 16px;border-radius:8px;font-size:12px;cursor:pointer;transition:.2s;background:var(--card);color:var(--text2);border:1px solid var(--border);box-shadow:var(--shadow)}
.tabs span:hover{border-color:var(--accent);color:var(--accent)}
.tabs span.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 2px 8px rgba(184,115,51,0.2)}

/* Stats */
.stats-tag{font-size:11px;color:var(--text2);margin-bottom:12px;background:var(--card);padding:6px 14px;border-radius:8px;display:inline-block;border:1px solid var(--border);box-shadow:var(--shadow)}

/* Filter row */
.filter-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.cat-filter{display:flex;gap:4px;flex-wrap:wrap}
.cf-btn{font-size:11px;padding:4px 12px;border-radius:6px;border:1px solid var(--border);background:var(--card);color:var(--text2);cursor:pointer;transition:all .15s}
.cf-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
.cf-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.search-bar{display:flex;gap:6px;max-width:280px;flex-shrink:0;margin-left:auto}
.search-bar input{flex:1;padding:7px 12px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:12px;outline:none;transition:.2s;box-shadow:var(--shadow)}
.search-bar input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}
.search-bar button{padding:7px 12px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text2);cursor:pointer;font-size:13px;transition:.2s;box-shadow:var(--shadow)}
.search-bar button:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Book list */
.book-list{display:grid;gap:6px}
.book-item{display:flex;align-items:center;padding:10px 14px;background:var(--card);border-radius:var(--radius);gap:12px;cursor:pointer;transition:.2s;border:1px solid transparent;box-shadow:var(--shadow)}
.book-item:hover{border-color:var(--accent);box-shadow:var(--shadow-hover);background:var(--card-hover)}
.book-item .emoji{font-size:26px;flex-shrink:0;width:36px;text-align:center}
.book-item .info{flex:1;min-width:0}
.book-item .title{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.book-item .meta{font-size:11px;color:var(--text2);margin-top:3px;display:flex;gap:4px;align-items:center;flex-wrap:nowrap;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.book-item .meta .dot{width:3px;height:3px;border-radius:50%;background:var(--text2);display:inline-block}
.book-item .actions{display:flex;gap:2px;flex-shrink:0}
.book-item .actions button{background:none;border:none;font-size:15px;cursor:pointer;padding:4px 6px;border-radius:6px;transition:.2s;color:var(--text2)}
.book-item .actions button:hover{color:var(--accent);background:var(--accent-light)}
.book-item .badge{font-size:9px;padding:2px 8px;border-radius:4px;background:var(--accent-light);color:var(--accent);font-weight:500}
.book-item .cat-badge{font-size:9px;padding:2px 8px;border-radius:4px;background:rgba(100,100,200,0.08);color:#667eea;font-weight:500}

/* Pagination */
.pagination{display:flex;justify-content:center;gap:6px;padding:20px 0;flex-wrap:wrap}
.pagination .page-btn{padding:6px 12px;border-radius:6px;border:1px solid var(--border);background:var(--card);color:var(--text2);cursor:pointer;font-size:12px;transition:.2s;min-width:34px;text-align:center;box-shadow:var(--shadow)}
.pagination .page-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
.pagination .page-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.pagination .page-btn:disabled{opacity:0.4;cursor:default}

/* Modal */
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:50;background:rgba(0,0,0,0.3);align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.modal-overlay.open{display:flex}
.modal{background:var(--card);border-radius:16px;padding:28px;width:360px;max-width:90vw;box-shadow:0 12px 48px rgba(0,0,0,0.12);border:1px solid var(--border)}
.modal h2{font-size:17px;margin-bottom:16px;color:var(--text)}
.modal input{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:8px;font-size:13px;margin-bottom:10px;outline:none;background:var(--bg);color:var(--text);transition:.2s}
.modal input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}
.modal .err{color:#c0392b;font-size:12px;margin-bottom:8px;display:none}
.modal .btn-row{display:flex;gap:8px;margin-top:8px}
.modal .btn-row button{flex:1;padding:9px;border-radius:8px;border:none;cursor:pointer;font-size:13px;transition:.2s;font-weight:500}
.modal .btn-row .primary{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(184,115,51,0.2)}
.modal .btn-row .primary:hover{background:var(--accent2)}
.modal .btn-row .secondary{background:var(--bg);color:var(--text2)}
.modal .btn-row .secondary:hover{background:rgba(0,0,0,0.04)}
.modal .switch-link{text-align:center;font-size:12px;color:var(--text2);margin-top:14px}
.modal .switch-link span{color:var(--accent);cursor:pointer;font-weight:500}
.modal .switch-link span:hover{text-decoration:underline}

/* Cat bar */
.cat-bar{text-align:center;margin:6px 0 14px}
.cat-bar-label{font-size:12px;color:var(--text2);margin-right:4px}
.cat-btn{font-size:11px;padding:4px 10px;border-radius:6px;border:1px solid var(--border);background:var(--card);color:var(--text2);cursor:pointer;margin:2px;transition:.15s}
.cat-btn:hover{border-color:var(--accent);color:var(--accent)}
.cat-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Header row */
.header-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin:0 0 6px 0}
.header-row .tabs{display:flex;gap:6px;margin:0}
.header-row .tabs span{padding:4px 14px;border-radius:10px;font-size:12px;cursor:pointer;transition:.2s;background:rgba(255,255,255,.3);color:var(--text2)}
.header-row .tabs span:hover{background:rgba(193,123,74,.1)}
.header-row .tabs span.active{background:var(--accent);color:#fff}
.header-row .stats-tag{font-size:11px;color:var(--text2);white-space:nowrap}

/* Footer */
footer{text-align:center;padding:30px 10px;color:var(--text2);font-size:10px;line-height:1.8}
footer a{color:var(--text2);text-decoration:underline;transition:.2s}
footer a:hover{color:var(--accent)}
.feedback-btn{padding:6px 16px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text2);cursor:pointer;font-size:11px;transition:.2s;box-shadow:var(--shadow)}
.feedback-btn:hover{border-color:var(--accent);color:var(--accent)}

/* Empty state */
.empty{text-align:center;padding:60px 20px;color:var(--text2);font-size:13px}
.empty .big{font-size:48px;margin-bottom:12px;display:block}

/* Upload vis */
.upload-vis input[type="radio"]{accent-color:var(--accent)}

/* Loading state */
.upload-area.loading{opacity:.5;pointer-events:none}

/* Scrollbar */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text2)}

/* Selection */
::selection{background:rgba(184,115,51,0.2);color:var(--text)}

/* Responsive */
@media(max-width:600px){
  .container{padding:12px}
  .topbar{padding:14px 0 10px}
  .topbar h1{font-size:18px}
  .topbar .slogan{font-size:10px}
  .upload-area{padding:16px}
  .upload-area .icon{font-size:26px}
  .book-item{padding:8px 10px;gap:8px}
  .book-item .emoji{font-size:20px;width:28px}
  .book-item .title{font-size:13px}
  .book-item .meta{font-size:10px;gap:3px}
  .book-item .actions button{font-size:13px}
  .search-bar{max-width:none;width:100%;margin-left:0}
  .cat-filter{gap:2px}
  .filter-row{flex-direction:column;align-items:stretch;gap:4px}
  .search-bar input{font-size:11px}
  .modal{padding:20px;width:300px}
}

@media(max-width:400px){
  .container{padding:8px}
  .topbar h1{font-size:16px}
  .topbar .slogan{font-size:9px}
  .book-item{padding:6px 8px;gap:6px}
  .book-item .emoji{font-size:18px;width:22px}
  .book-item .title{font-size:12px}
  .book-item .meta{font-size:9px}
  .upload-area{padding:12px}
  .pagination .page-btn{padding:4px 8px;font-size:11px;min-width:30px}
}


/* 秋风落叶动画 */
.leaves-container {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.leaf {
  position: absolute;
  top: -40px;
  width: 20px;
  height: 20px;
  opacity: 0;
  animation: leafFall var(--dur) linear infinite;
  animation-delay: var(--delay);
}
.leaf svg {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes leafFall {
  0% {
    transform: translateY(-20px) rotate(0deg) translateX(0);
    opacity: 0;
  }
  5% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(110vh) rotate(720deg) translateX(var(--drift, 60px));
    opacity: 0;
  }
}



/* 推荐位 */
.recommend-section{margin-bottom:20px}
.recommend-title{font-size:14px;font-weight:600;color:var(--text2);margin-bottom:10px;padding-left:4px;letter-spacing:2px}
.recommend-scroll{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none;mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100%-24px),transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100%-24px),transparent 100%)}
.recommend-scroll::-webkit-scrollbar{display:none}
.recommend-card{flex:0 0 160px;scroll-snap-align:start;border-radius:8px;overflow:hidden;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);transition:.25s;cursor:pointer}
.recommend-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.recommend-card img{width:100%;height:85px;object-fit:cover;display:block}
.recommend-card .rec-info{padding:6px 8px 8px}
.recommend-card .rec-title{font-size:11px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recommend-card .rec-link{display:none}

@media(max-width:600px){
  .recommend-card{flex:0 0 130px}
  .recommend-card img{height:75px}
  .recommend-card .rec-title{font-size:12px}
}

@media(max-width:400px){
  .recommend-card{flex:0 0 110px}
  .recommend-card img{height:65px}
}

.book-count {
  font-size: 12px;
  color: #8a7e6e;
  margin-left: 8px;
  white-space: nowrap;
}