/* UI 组件层 · T-39
 * 加载顺序：tokens → app → ui-refresh → components
 * 规则：只消费 tokens.css 变量；不写主题硬编码色；不用强制覆盖。
 */

/* 1 按钮 */
.btn-ghost{background:transparent;border-color:var(--bd);color:var(--tx2)}
.btn-ghost:hover{background:var(--ac-bg);border-color:var(--ac);color:var(--ac)}
.btn-icon{padding:6px;border-radius:999px;line-height:0}

/* 2 卡片 */
.card{background:var(--bg);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--bd)}
.card-bd{padding:16px}
.cover-card{display:block;background:var(--bg);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.cover-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--bd-h)}
.cover-card .cover{position:relative;aspect-ratio:2/3;background:var(--bg-e);overflow:hidden}
.cover-card .cover img{width:100%;height:100%;object-fit:cover}

/* 3 胶囊 / 徽标 */
.chip{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:999px;border:1px solid var(--bd);background:var(--bg);color:var(--tx2);font-size:.78em;line-height:1.2;white-space:nowrap;transition:var(--tr)}
.chip:hover{border-color:var(--ac);color:var(--ac)}
.chip.active{background:var(--ac);border-color:var(--ac);color:#fff;font-weight:600}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:.72em;line-height:1.6;border:1px solid var(--bd);background:var(--bg-c);color:var(--tx2)}
.badge-ac{color:var(--ac);border-color:var(--ac)}
.badge-ok{color:var(--ok);border-color:var(--ok)}
.badge-warn{color:var(--warn);border-color:var(--warn)}
.badge-err{color:var(--err);border-color:var(--err)}

/* 4 骨架屏 */
.skeleton{position:relative;overflow:hidden;background:var(--bg-c);border-radius:var(--rs)}
.skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--bg-e),transparent);animation:sk-wave 1.4s infinite}
.skeleton-line{height:12px;margin:8px 0;border-radius:6px}
@keyframes sk-wave{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* 5 空态 */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:48px 20px;text-align:center;color:var(--tx3);border:1px dashed var(--bd);border-radius:var(--r);background:var(--bg-s)}
.empty-icon{font-size:2em;line-height:1}

/* 6 弹层 */
.modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(9,12,20,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal.show{display:flex}
.modal-box{width:min(560px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--bg);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--shadow)}

/* 7 轻提示（覆盖 app.css 的深色专用配色） */
.toast{background:var(--bg);border-color:var(--bd);color:var(--tx);box-shadow:var(--shadow)}
.toast-success{border-color:var(--ok);color:var(--ok)}
.toast-error{border-color:var(--err);color:var(--err)}
.toast-info{border-color:var(--ac);color:var(--ac)}

/* 8 通用小件 */
.m0{margin:0}
.ico-inline{vertical-align:-2px}
.notice-stack{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.notice{padding:10px 14px;border-radius:var(--rs);border:1px solid var(--bd);background:var(--bg-s);color:var(--tx2);font-size:.88em}
.notice strong{color:var(--tx)}
.notice-info{border-color:var(--ac);background:var(--ac-bg)}
.notice-ok{border-color:var(--ok);color:var(--ok)}
.notice-warn{border-color:var(--warn);color:var(--warn)}
.notice-sub{opacity:.8}
.source-note{display:flex;align-items:center;gap:6px;margin-bottom:12px;padding:8px 14px;border-radius:var(--rs);border:1px solid var(--bd);background:var(--bg-s);font-size:.85em;color:var(--tx2)}
.source-note.accent{border-color:var(--ac);background:var(--ac-bg)}
.card-flag{position:absolute;top:6px;left:6px}

/* 9 详情页 */
.detail-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start}
.detail-cover-wrap{position:relative}
.detail-cover{width:100%;border-radius:12px;box-shadow:var(--shadow);border:1px solid var(--bd)}
.detail-flag{position:absolute;top:10px;left:10px;background:var(--bg);border:1px solid var(--bd);padding:4px 10px;border-radius:8px;font-size:.8em;color:var(--warn);box-shadow:var(--shadow-sm)}
.detail-flag-sub{position:absolute;bottom:10px;left:10px;background:var(--bg);border:1px solid var(--bd);padding:4px 10px;border-radius:8px;font-size:.75em;color:var(--ac2);box-shadow:var(--shadow-sm)}
.detail-title{margin:0 0 10px;font-size:1.7em;color:var(--tx);line-height:1.3}
.detail-meta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px;font-size:.9em;color:var(--tx2)}
.detail-desc{background:var(--bg-c);border:1px solid var(--bd);border-radius:10px;padding:14px;margin-bottom:14px;font-size:.88em;color:var(--tx2);line-height:1.8;max-height:140px;overflow-y:auto}
.detail-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;align-items:center}
.detail-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.detail-cta{padding:10px 22px;font-size:.95em}
.detail-panel{background:var(--bg-c);border:1px solid var(--bd);border-radius:10px;padding:14px;margin-bottom:14px;font-size:.88em;color:var(--tx2);line-height:1.8}
.detail-panel.hidden{display:none}
.inline-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%}
.inline-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.inline-gap{display:flex;gap:8px;margin-top:10px}
.autocomplete-wrap{position:relative}
.autocomplete-input{width:100%;padding:8px 12px;border-radius:8px;background:var(--bg);border:1px solid var(--bd);color:var(--tx);font-size:.9em;box-sizing:border-box}
.autocomplete-list{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg-c);border:1px solid var(--bd);border-radius:0 0 8px 8px;max-height:160px;overflow-y:auto;z-index:10;box-shadow:var(--shadow)}
.autocomplete-list.show{display:block}
.rating-row{display:flex;gap:4px;font-size:1.6em;line-height:1}
.rating-star{background:none;border:none;cursor:pointer;padding:2px;color:var(--tx3);font-size:1.1em}
.rating-star.on{color:var(--warn)}
.chapter-list-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.chapter-count{color:var(--tx2);font-weight:400;font-size:.85em}
.section-block{margin-top:24px}
.section-title{margin:0;font-size:1.05em}
.empty-block{padding:42px 20px}
.empty-emoji{font-size:2em;margin-bottom:10px}
.empty-hint{font-size:.85em;color:var(--tx3);margin-top:6px}
.state-on{background:var(--ac-bg);border-color:var(--ac);color:var(--ac)}

/* 10 移动端底部 tab */
.mobile-tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:45;height:calc(58px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--bg);border-top:1px solid var(--bd);box-shadow:0 -8px 24px rgba(0,0,0,.12)}
.mobile-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--tx3);font-size:.68em;text-decoration:none}
.mobile-tabbar a.active{color:var(--nav-active-tx);font-weight:600}
.mobile-tabbar svg{width:20px;height:20px}

@media(max-width:640px){
  .mobile-tabbar{display:flex}
  .content-body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .detail-grid{grid-template-columns:1fr}
  .comic-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media(min-width:641px) and (max-width:1024px){
  .comic-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* 11 详情页补充 / 既有视图类 */
.detail-cover-wrap{position:relative}
.detail-cover-img{width:100%;border-radius:12px;box-shadow:var(--shadow);border:1px solid var(--bd)}
.tag-ok{color:var(--ok);border-color:var(--ok)}
.btn-chip{padding:2px 10px;font-size:.78em;border-radius:999px}
.btn-lg{padding:10px 16px}
.btn-warn{background:var(--bg-c);color:var(--warn);border-color:var(--warn)}
.select-inline{padding:8px 12px;border-radius:6px;background:var(--bg-c);border:1px solid var(--bd);color:var(--tx);font-size:.85em}
.detail-panel-title{font-size:.85em;color:var(--tx2);margin-bottom:8px}
.detail-hint{color:var(--tx3);font-size:.85em}
.tag-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;min-height:28px}
.detail-submeta{display:flex;flex-wrap:wrap;gap:12px;font-size:.82em;color:var(--tx3);margin-bottom:16px}
.detail-note{background:var(--bg-c);padding:12px 14px;border-radius:8px;border:1px solid var(--bd);font-size:.88em;color:var(--tx2)}
.chapter-btn.bookmarked{background:var(--ac-bg);border-color:var(--ac);color:var(--ac)}
.tag-pill{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:14px;font-size:.82em;background:var(--ac-bg);color:var(--ac);border:1px solid var(--bd)}
.tag-pill .tag-rm{cursor:pointer;opacity:.6;font-size:1.1em;line-height:1}
.tag-pill .tag-rm:hover{opacity:1;color:var(--err)}
#tagSuggest .sug-item{padding:8px 12px;cursor:pointer;font-size:.88em;color:var(--tx);border-bottom:1px solid var(--bd);display:flex;justify-content:space-between}
#tagSuggest .sug-item:hover{background:var(--ac-bg)}
#tagSuggest .sug-item:last-child{border-bottom:none}
#tagSuggest .sug-count{color:var(--tx3);font-size:.8em}
.detail-header{animation:fadeIn .4s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.chapter-btn{transition:transform .15s,box-shadow .15s;position:relative}
.chapter-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.25)}
.chapter-btn.bookmarked::after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:2px;background:var(--ac);border-radius:1px}

/* T-40: 夜模式标签胶囊改浅色文字，保证正文对比度 ≥ 4.5:1 */
[data-theme="dark"] .tag-pill{color:var(--nav-active-tx)}