/**************** B Controller - Book Page **************/
/* Book Audit Alert */
.bl-audit-alert{display:flex;align-items:flex-start;gap:1rem;padding:1rem 1.25rem;border-radius:.5rem;margin-bottom:1rem}
.bl-audit-icon{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:.9rem}
.bl-audit-content{flex:1}
.bl-audit-title{font-size:.95rem;font-weight:600;margin-bottom:.25rem}
.bl-audit-desc{font-size:.875rem;color:var(--f-black-6);line-height:1.5}
.bl-audit-link{display:inline-flex;align-items:center;gap:.375rem;margin-top:.5rem;padding:.375rem .75rem;font-size:.8rem;color:#fff;border-radius:.25rem;text-decoration:none;transition:background .2s}
.bl-audit-link i{font-size:.75rem}
/* Red style - Book pending audit (new book) */
.bl-audit-author_pending,.bl-audit-admin_pending{border-left:4px solid #ef4444;background-color:rgba(239,68,68,.08)}
.bl-audit-author_pending .bl-audit-icon,.bl-audit-admin_pending .bl-audit-icon{background:rgba(239,68,68,.15);color:#ef4444}
.bl-audit-author_pending .bl-audit-link,.bl-audit-admin_pending .bl-audit-link{background:#ef4444}
.bl-audit-author_pending .bl-audit-link:hover,.bl-audit-admin_pending .bl-audit-link:hover{background:#dc2626;color:#fff}
/* Yellow style - Book pending update (has audited version) */
.bl-audit-author_pending_update,.bl-audit-admin_pending_update{border-left:4px solid #f59e0b;background-color:rgba(245,158,11,.08)}
.bl-audit-author_pending_update .bl-audit-icon,.bl-audit-admin_pending_update .bl-audit-icon{background:rgba(245,158,11,.15);color:#f59e0b}
.bl-audit-author_pending_update .bl-audit-link,.bl-audit-admin_pending_update .bl-audit-link{background:#f59e0b}
.bl-audit-author_pending_update .bl-audit-link:hover,.bl-audit-admin_pending_update .bl-audit-link:hover{background:#d97706;color:#fff}
/* Gray style - Book hidden (display=0) */
.bl-audit-hidden{border-left:4px solid #6b7280;background-color:rgba(107,114,128,.08)}
.bl-audit-hidden .bl-audit-icon{background:rgba(107,114,128,.15);color:#6b7280}
.bl-audit-btn{display:inline-flex;align-items:center;gap:.375rem;margin-top:.5rem;padding:.375rem .75rem;font-size:.8rem;color:#fff;background:#6b7280;border:none;border-radius:.25rem;cursor:pointer;transition:background .2s}
.bl-audit-btn:hover{background:#4b5563}

/* b/left - Book Detail */
.bl-wrap{width:100%}

/*.bl-card{display:flex;align-items:center;gap:1.25rem;padding:1.25rem;background:var(--f-white);border-radius:.75rem;margin-bottom:1rem;box-shadow:0 2px 8px rgba(0,0,0,.05)}*/
.bl-card{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--f-white);border-radius:.5rem;text-decoration:none;color:inherit;margin-bottom:1rem;box-shadow:0 2px 8px rgba(0,0,0,.05);transition:all .2s;cursor:pointer}

.bl-poster{width:clamp(80px,45%,160px);height:120px;flex-shrink:0;border-radius:.5rem;overflow:hidden;background:var(--f-white-c);box-shadow:0 4px 12px rgba(0,0,0,.15);position:relative}
.bl-poster img{width:100%;height:100%;object-fit:cover;background:var(--f-white-c)}
.bl-info{flex:1;min-width:0;display:flex;flex-direction:column}
.bl-name{margin:0 0 .75rem 0;font-size:1rem;font-weight:bold;line-height:1.3;word-wrap:break-word;overflow-wrap:break-word}
/*.bl-meta{display:flex;flex-wrap:wrap;gap:.75rem;font-size:.85rem;color:var(--f-black-9);margin-bottom:.75rem}*/
.bl-meta{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.75rem;color:var(--f-black-9);margin-top:.5rem}
.bl-meta span{display:flex;align-items:center}
.bl-meta i{margin-right:.3rem}
.bl-summary{font-size:.75rem;/*color:var(--f-black-9);*/line-height:1.6;word-wrap:break-word;overflow-wrap:anywhere}
/* Back Button */
.bl-back{margin-bottom:1rem}
.bl-back-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.75rem;background:var(--f-white);/*color:var(--f-black-9);*/border-radius:.5rem;font-size:.9rem;text-decoration:none;transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.bl-back-btn:hover{background:#f1f1f1;/*color:var(--f-black-3);*/box-shadow:0 2px 8px rgba(0,0,0,.1)}
.bl-back-btn i{font-size:.9rem}

/* 书籍统计 */
.bl-stats{display:flex;gap:.5rem;margin-bottom:1rem}
.bl-stat-item{flex:1;padding:.75rem;background:var(--f-white);border-radius:.5rem;text-align:center}
.bl-stat-num{font-size:1.25rem;font-weight:bold;color:var(--e-primary-color)}
.bl-stat-label{font-size:.75rem;color:var(--f-black-9);margin-top:.25rem}

/* 订阅按钮 */
.bl-subscribe{margin-bottom:1rem}
.bl-subscribe-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.75rem 1rem;background:var(--e-primary-color);color:#fff;border:1px solid var(--e-primary-color);border-radius:.5rem;font-size:.9rem;cursor:pointer;transition:all .2s}
.bl-subscribe-btn:hover{background:#0a5d6e;border-color:#0a5d6e;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.bl-subscribe-btn.subscribed{background:rgba(17,126,150,.1);color:var(--e-primary-color);border:1px solid var(--e-primary-color)}
.bl-subscribe-btn.subscribed:hover{background:rgba(17,126,150,.2);color:var(--e-primary-color)}

/* 推荐书籍 */
/*.bl-recommend{padding:1rem;background:var(--f-white);border-radius:.75rem}*/
.bl-rec-title{font-size:.9rem;font-weight:bold;margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}
.bl-rec-title i{color:var(--e-primary-color)}
.bl-rec-list{display:flex;flex-direction:column;gap:.5rem}
.bl-rec-item{display:flex;gap:.75rem;padding:.75rem;background:var(--f-white);border-radius:.5rem;text-decoration:none;color:inherit;transition:all .2s;align-items:center;overflow:hidden}
.bl-rec-item:hover{box-shadow:0 2px 8px rgba(0,0,0,.1);/*transform:translateY(-1px);*/background-color:#f1f1f1;}
.bl-rec-poster{width:clamp(80px,45%,160px);height:120px;flex-shrink:0;border-radius:.25rem;overflow:hidden;background:var(--f-white-c);position:relative}
.bl-rec-poster img{width:100%;height:100%;object-fit:cover;background:var(--f-white-c)}
.bl-rec-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.bl-rec-name{font-weight:600;font-size:.9rem;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-rec-summary{font-size:.8rem;/*color:var(--f-black-9);*/margin-bottom:.25rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;line-height:1.4}
.bl-rec-meta{display:flex;gap:.75rem;font-size:.75rem;color:var(--f-black-9)}
.bl-rec-meta i{margin-right:.2rem}
.bl-empty{padding:3rem 1rem;text-align:center;color:var(--f-black-9);background:var(--f-white);border-radius:.75rem}
.bl-empty i{font-size:2.5rem;margin-bottom:.75rem;display:block}
.bl-empty .bl-btn{margin-top:1rem}

/* b/right - Notes List */
.br-wrap{width:100%}
.br-header{padding:1rem 0;border-top:1px solid var(--f-white-c);}
.br-title{font-size:1rem;font-weight:bold}
.br-count{font-size:.875rem;color:var(--f-black-9)}
.br-list{display:flex;flex-direction:column;gap:.75rem}
.br-item{
    display:flex;
    align-items:center;
    gap:.75rem;padding:.75rem;background:var(--f-white);border-radius:.5rem;text-decoration:none;color:inherit;transition:all .2s;overflow:hidden
}
.br-item:hover{box-shadow:0 2px 8px rgba(0,0,0,.1);/*transform:translateY(-1px);*/background-color:#f1f1f1;}
.br-index{width:24px;height:24px;flex-shrink:0;border-radius:50%;background:var(--e-primary-color);color:var(--f-white);display:flex;justify-content:center;align-items:center;font-size:.75rem;font-weight:bold}
.br-poster{width:80px;height:55px;min-width:80px;min-height:55px;flex-shrink:0;border-radius:.25rem;overflow:hidden;background:var(--f-white-d)}
.br-poster img{width:100%;height:100%;object-fit:cover}
.br-info{flex:1;min-width:0;display:flex;flex-direction:column}
.br-title-text{font-weight:600;font-size:.95rem;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br-summary{font-size:.8rem;/*color:var(--f-white-b);*/margin-bottom:.5rem;overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis;line-height:1.4}
.br-meta{display:flex;gap:.75rem;font-size:.75rem;color:var(--f-black-9);margin-top:auto}
.br-meta i{margin-right:.2rem}
.br-empty{text-align:center;color:var(--f-black-9);display:flex;flex-direction:column;align-items:center;justify-content:center}
.br-empty i{font-size:1.5rem;margin-bottom:.75rem}
.br-posters{display:flex;gap:.25rem;width:clamp(60px,40%,120px);height:90px;flex-shrink:0;overflow:hidden;border-radius:.25rem;position:relative;background:var(--f-white-c)}
.br-posters img{width:100%;height:100%;object-fit:cover;background:var(--f-white-c)}
.js-home-poster-box .js-home-poster-img{position:relative;z-index:1;transition:opacity .18s ease;background:var(--f-white-c) url('/public/img/loading.svg') center center no-repeat;background-size:80% auto}
.js-home-poster-box .js-home-poster-img.is-loaded,.js-home-poster-box .js-home-poster-img.is-error{background-color:var(--f-white-c);background-image:none}
.js-home-poster-box.is-loading .js-home-poster-img{opacity:0}
.js-home-poster-box.is-loading::after{content:'';position:absolute;inset:0;z-index:2;background:var(--f-white-c) url('/public/img/loading.svg') center center no-repeat;background-size:80% auto;pointer-events:none}
.js-home-poster-box.is-loaded .js-home-poster-img{opacity:1}
.br-item-multi{flex-direction:row;align-items:center}
.br-item-multi .br-posters{width:clamp(196px,65%,376px);height:90px;overflow:hidden;border-radius:.25rem;gap:.5rem}
.br-item-multi .br-posters img{flex:none;width:clamp(60px,40%,120px);height:100%;min-width:0;border-radius:.25rem}
.br-item-multi .js-home-poster-box.is-loading::after{display:none}
.br-item-multi .js-home-poster-box.is-loading .js-home-poster-img{opacity:1}
.br-item-multi .br-info{width:auto;flex:1;min-width:0}

/* <=1200：右侧3海报改上图下文 */
@media(max-width:1200px){
    .br-item-multi{flex-direction:column;align-items:stretch}
    .br-item-multi .br-posters{width:100%;height:auto;overflow:visible;border-radius:0;justify-content:flex-start;gap:.5rem}
    .br-item-multi .br-posters img{width:calc((100% - 1rem)/3);height:auto;aspect-ratio:4/3;flex-shrink:0;flex:none}
    .br-item-multi .br-info{width:100%;text-align:left}
}

/* Tablet: 768-1200 左侧列表改上图下文 */
@media(min-width:768px) and (max-width:1200px){
    .bl-card{flex-direction:column;align-items:stretch;text-align:left}
    .bl-poster{width:100%;height:180px;min-width:unset;min-height:180px;aspect-ratio:unset}
    .bl-info{text-align:left}
    .bl-meta{justify-content:flex-start}
    .bl-rec-item{flex-direction:column;align-items:stretch}
    .bl-rec-poster{width:100%;height:180px;min-width:unset;min-height:180px;aspect-ratio:unset}
    .bl-rec-info{text-align:left}
    .bl-rec-meta{justify-content:flex-start}
}

/* Mobile */
@media(max-width:767px){
    /* 左侧顶部book卡片上图下文 */
    .bl-card{flex-direction:column;align-items:stretch;text-align:left}
    .bl-poster{width:100%;height:200px;min-width:unset;min-height:200px;aspect-ratio:unset}
    .bl-info{text-align:left}
    .bl-meta{justify-content:flex-start}
    /* 左侧recommended上图下文 */
    .bl-rec-item{flex-direction:column;align-items:stretch}
    .bl-rec-poster{width:100%;height:200px;min-width:unset;min-height:200px;aspect-ratio:unset}
    .bl-rec-info{text-align:left}
    .bl-rec-meta{justify-content:flex-start}
    /* 右侧列表 */
    .br-index{display:none}
    .br-item-multi{flex-direction:column;align-items:stretch}
    .br-item-multi .br-posters{width:100%;justify-content:flex-start;gap:.5rem}
    .br-item-multi .br-posters img{width:calc((100% - 1rem)/3);height:auto;aspect-ratio:4/3;flex-shrink:0}
    .br-item-multi .br-info{width:100%;text-align:left}
    .br-title-text{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}
    /* 左侧滑入面板：文本居左 */
    .slide-panel.sidebar-left .bl-card{text-align:left}
    .slide-panel.sidebar-left .bl-info{text-align:left}
    .slide-panel.sidebar-left .bl-meta{justify-content:flex-start}
    .slide-panel.sidebar-left .bl-rec-info{text-align:left}
    .slide-panel.sidebar-left .bl-rec-meta{justify-content:flex-start}
}

/**************** Dark Theme **************/
:root[app-theme='dark']{
    .bl-card,.bl-back-btn,.bl-stat-item{background:var(--f-black-2);}
    /*.bl-card,.bl-stats .bl-stat-item,.bl-recommend,.bl-empty,.bl-back-btn{background:var(--f-black-2);box-shadow:0 1px 3px rgba(0,0,0,.2)}*/
    .bl-back-btn:hover{background:var(--f-black-3)}
    .bl-rec-item,.br-item{background:var(--f-black-2);box-shadow:0 1px 3px rgba(0,0,0,.2)}
    .bl-rec-item:hover,.br-item:hover{background:var(--f-black-3);box-shadow:0 2px 8px rgba(0,0,0,.4)}
    .bl-poster,.bl-rec-poster,.br-poster{background-color:var(--f-black-9)}
    .bl-poster img,.bl-rec-poster img,.br-posters img{background-color:var(--f-black-9)}
    .js-home-poster-box .js-home-poster-img{background-color:var(--f-black-9)}
    .js-home-poster-box .js-home-poster-img.is-loaded,.js-home-poster-box .js-home-poster-img.is-error{background-color:var(--f-black-9)}
    .js-home-poster-box.is-loading::after{background-color:var(--f-black-9)}
    .br-header{border-color:var(--f-black-4)}
}
