/* ================= 後台:合集章節管理(2026-09-22 依用戶參考圖重排) =================
   通用「按 ID/網址加書 + 拖拽排序」組件,未來書單復用時只需換 data-api-*。
   一律加 .sm_wrap / .sr_ 前綴,不污染用戶中心其他頁面。 */
/* 外框:原生 .innercol 是直角灰邊 + 60px 底留白,這頁改成參考圖的圓角淺邊卡片 */
.sm_col{border-color:#e9ebef !important;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.05);padding:28px 32px 32px !important}
.sm_wrap{color:#111827;font-size:14px}
.sm_wrap *{box-sizing:border-box}

/* ---- 標題列 ---- */
.sm_head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 22px}
/* 站內 h2 是 18px,這裡 20px:還是一眼看得出是頁面標題,又不會比正文大太多 */
.sm_head .sm_title{margin:0;font-size:20px;line-height:28px;font-weight:700;color:#111827}
/* 合集名徽章:字級貼近站內正文(body 12px、常用 14px),長標題截斷成 … 不換行、不撐破標題列 */
.sm_head .sm_badge{flex:0 1 auto;min-width:0;max-width:min(460px,100%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 12px;border-radius:6px;background:#3b82f6;color:#fff !important;font-size:14px;font-weight:700;line-height:20px;text-decoration:none !important}
.sm_head .sm_badge:hover{background:#2563eb}
.sm_head .sm_count{color:#9ca3af;font-size:13px}
.sm_head .sm_back{margin-left:auto;padding:9px 18px;border-radius:6px;background:#3b82f6;color:#fff !important;font-size:14px;font-weight:700;line-height:18px;text-decoration:none !important}
.sm_head .sm_back:hover{background:#2563eb}

/* ---- 狀態列 ---- */
.sm_status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.sm_status .sm_label{font-size:14px;color:#374151;margin:0}
.sm_status .sm_select{position:relative;display:inline-block}
.sm_status .sm_select:after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;margin-top:-5px;border-right:2px solid #6b7280;border-bottom:2px solid #6b7280;transform:rotate(45deg);pointer-events:none}
.sm_status select{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:36px;min-width:132px;padding:0 32px 0 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:#111827;font-size:14px;line-height:34px;cursor:pointer;outline:0}
.sm_status select:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.sm_status .sm_desc{color:#9ca3af;font-size:13px}
.sm_msg{color:#6b7280;font-size:12px;margin-left:8px}
.sm_msg.ok{color:#16a34a;font-weight:700}
.sm_msg.err{color:#ef4444;font-weight:700}

/* ---- 加章節面板 ---- */
.sm_addbox{margin:0 0 18px;padding:16px;border:1px solid #e5e7eb;border-radius:12px;background:#f9fafb}
.sm_addrow{display:flex;align-items:center;gap:12px}
.sm_addrow .sm_input{flex:1;min-width:0;height:40px;padding:0 14px;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:#111827;font-size:14px;outline:0}
.sm_addrow .sm_input::-webkit-input-placeholder{color:#9ca3af}
.sm_addrow .sm_input::placeholder{color:#9ca3af}
.sm_addrow .sm_input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.sm_addbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;height:40px;padding:0 20px;border:0;border-radius:8px;background:#22c55e;color:#fff;font-size:14px;font-weight:700;cursor:pointer;line-height:1}
.sm_addbtn:hover{background:#16a34a}
.sm_addbtn:active{background:#15803d}
.sm_addbtn svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sm_hint{margin:10px 0 0;color:#9ca3af;font-size:13px;line-height:20px}
.sm_primary{background:#3b82f6}
.sm_primary:hover{background:#2563eb}
.sm_primary:active{background:#1d4ed8}
.sm_addbtn:disabled{background:#d1d5db;color:#f3f4f6;cursor:not-allowed}
.sm_bulkbtn{flex:none;height:40px;padding:0 14px;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:#374151;font-size:13px;cursor:pointer;line-height:1}
.sm_bulkbtn:hover{border-color:#9ca3af;background:#f9fafb}

/* ---- 批量加入 ---- */
.sm_bulk{margin:12px 0 0;padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}
.sm_bulkta{display:block;width:100%;box-sizing:border-box;min-height:120px;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:#111827;font-size:13px;line-height:20px;outline:0;resize:vertical;font-family:inherit}
.sm_bulkta:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.sm_bulkbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:10px 0 0}
.sm_bulklist{list-style:none;margin:12px 0 0;padding:0;max-height:300px;overflow-y:auto}
.sm_bulklist:empty{margin:0}
.sm_bulklist li{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;font-size:13px;line-height:18px;border-left:3px solid transparent}
.sm_bulklist li+li{margin-top:4px}
.sm_bulklist li.ok{background:#f0fdf4;border-left-color:#22c55e}
.sm_bulklist li.dup{background:#f8fafc;border-left-color:#cbd5e1}
.sm_bulklist li.err{background:#fef2f2;border-left-color:#ef4444}
.sm_bulklist .bl_tag{flex:none;width:64px;font-weight:700;font-size:12px}
.sm_bulklist .bl_why{flex:none;margin-left:10px;color:#ef4444;font-size:12px;white-space:nowrap}
.sm_bulklist li.ok .bl_tag{color:#16a34a}
.sm_bulklist li.dup .bl_tag{color:#94a3b8}
.sm_bulklist li.err .bl_tag{color:#ef4444}
.sm_bulklist .bl_title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#111827}
.sm_bulklist .bl_title i{color:#9ca3af;font-style:normal}
.sm_bulklist .bl_meta{flex:none;color:#9ca3af;font-size:12px}

/* ---- 章節列表 ---- */
.sr_list{list-style:none;margin:0;padding:0}
.sr_list li{display:flex;align-items:center;gap:14px;padding:12px 18px;border:1px solid #e5e7eb;border-radius:12px;margin:0 0 14px;background:#fff;cursor:grab;transition:box-shadow .15s,border-color .15s}
.sr_list li:hover{border-color:#d1d5db;box-shadow:0 1px 6px rgba(0,0,0,.06)}
.sr_list li.sortable-ghost{opacity:.4}
.sr_list li.sortable-chosen{box-shadow:0 4px 16px rgba(0,0,0,.14)}
.sr_list .sr_grip{flex:none;width:22px;height:22px;color:#b6bcc6;cursor:grab}
.sr_list .sr_grip svg{width:22px;height:22px;display:block;fill:currentColor;stroke:none}
.sr_list li:hover .sr_grip{color:#6b7280}
.sr_list .sr_idx{flex:none}
.sr_list .sr_idx input{width:50px;height:36px;text-align:center;padding:0;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:#111827;font-size:15px;font-weight:600;outline:0}
.sr_list .sr_idx input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.sr_list .sr_cover{flex:none;width:54px;height:70px;object-fit:cover;border-radius:6px;background:#f3f4f6;border:1px solid #eceef1}
.sr_list .sr_cover_ph{display:flex;align-items:center;justify-content:center;color:#c3c8d0}
.sr_list .sr_cover_ph svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sr_list .sr_title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:600}
.sr_list .sr_title a{color:#111827;text-decoration:none}
.sr_list .sr_title a:hover{color:#2563eb;text-decoration:underline}
.sr_list .sr_meta{flex:none;color:#9ca3af;font-size:13px;white-space:nowrap}
.sr_list .sr_rm{display:inline-flex;align-items:center;gap:5px;flex:none;padding:5px 9px;border-radius:6px;color:#ef4444;font-size:13px;cursor:pointer;white-space:nowrap;user-select:none}
.sr_list .sr_rm:hover{background:#fef2f2}
.sr_list .sr_rm svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sm_empty{padding:36px 0;text-align:center;color:#9ca3af;font-size:14px}
.sr_badge{display:inline-block;padding:0 6px;border-radius:4px;font-size:11px;line-height:18px;color:#fff;background:#2f7df6;margin-left:6px;vertical-align:middle;font-weight:400}
.sr_badge.gray{background:#9ca3af}.sr_badge.red{background:#ef4444}

/* 窄視窗:按鈕換行、隱藏次要信息,行不擠成一團 */
@media (max-width:900px){
  .sm_head .sm_back{margin-left:0}
  .sm_addrow{flex-wrap:wrap}
  .sm_addrow .sm_input{flex:1 1 100%}
  .sr_list li{gap:10px;padding:12px}
  .sr_list .sr_meta{display:none}
  .sm_bulklist .bl_meta{display:none}
  .sm_bulklist .bl_tag{width:56px}
  .sm_bulklist .bl_title{white-space:normal}
}

/* ================= 前台:合集詳情頁章節列表(只有緊湊模式;切換條沿用原生 selectlist,小塊沿用原生 tagshow) ================= */
.sr_filter{margin:12px 0 0;padding-bottom:10px;background:url(hr.png) 0 bottom repeat-x}
.sr_filter .sr_label{float:left;line-height:27px;font-size:14px;color:#333;margin-right:6px}
.sr_filter .selectlist li a{cursor:pointer}
/* 原生 .filter .btn 是為搜索框設計的負邊距浮動,這裡按鈕自己靠右成一排 */
.sr_filter .sr_actions{float:right}
.sr_filter .sr_actions .btn{float:none;position:static;margin:0 0 0 8px}
.bot_toolbar .sr_count{line-height:30px;color:#999;padding-right:5px}
.sr_compact{padding:10px 0 6px;overflow:hidden}
/* 章節目錄行(2026-09-22,和 App/PWA 同一套):縮略圖 + 第N話 原標題 + 時間·頁數 */
.sr_rows{padding:8px 0 4px}
.sr_row{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:8px;text-decoration:none !important;color:#333}
.sr_row:hover{background:#f2f6fb}
.sr_row_pic{flex:none;width:96px;height:72px;border-radius:6px;overflow:hidden;background:#eceef1;display:flex;align-items:center;justify-content:center}
.sr_row_pic img{width:100%;height:100%;object-fit:cover;display:block}
.sr_row_main{flex:1;min-width:0}
.sr_row_tt{display:block;font-size:14px;font-weight:600;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr_row:hover .sr_row_tt{color:#2b86bf}
.sr_row_sub{display:block;font-size:12px;color:#999;margin-top:5px}
/* 閱讀標註:上次讀到那話藍色加粗,讀過的轉淡(和 App/PWA 同一套) */
.sr_row.sr_cur{background:#eaf2fe}
.sr_row.sr_cur .sr_row_tt{color:#2f7df6;font-weight:700}
.sr_row.sr_read .sr_row_tt{color:#9ca3af}
.sr_tb .sr_cur .title a{color:#2f7df6;font-weight:700}
.sr_tb .sr_cur .pic_box{outline:2px solid #2f7df6;outline-offset:-2px}
.sr_tb .sr_read .title a{color:#9ca3af}
.sr_compact .tagshow{float:left;width:calc(25% - 8px);box-sizing:border-box;margin:4px;font-size:13px;line-height:24px;padding:2px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 文字塊的閱讀標註(和章節行同一套顏色);特異性要壓過原生 .tagshow:hover */
.sr_compact .tagshow.sr_cur{background:#eaf2fe;color:#2f7df6;font-weight:700}
.sr_compact .tagshow.sr_read{color:#9ca3af}
/* 縮略圖:沿用詳情頁原生 tb 縮略圖格;原生 style.css 在 .tb .pic_box img 後多了一個 } 導致標題 nowrap 規則失效,這裡補回 */
.sr_tb .info .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:180px}
.sr_tb .pic_box{position:relative}
.sr_tb .sr_ep{position:absolute;top:8px;left:8px;background:rgba(0,0,0,0.55);color:#fff;padding:2px 8px;border-radius:4px;font-size:12px;line-height:18px;backdrop-filter:blur(4px)}