*{box-sizing:border-box;margin:0;padding:0}
html{font-size:13px}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:#f1f5f9;color:#1e293b;line-height:1.55;font-size:13px}
a{color:#0f172a;text-decoration:none}
a:hover{color:#c2410c;text-decoration:underline}
img{display:none}

.x7-shell{max-width:1180px;margin:0 auto;background:#fff;box-shadow:0 0 0 1px #e2e8f0}

.x7-topbar{background:linear-gradient(180deg,#1e293b,#334155);color:#cbd5e1;padding:8px 14px;display:flex;align-items:center;gap:14px;font-size:12px;border-bottom:2px solid #c2410c}
.x7-topbar .x7-brand{font-weight:700;font-size:15px;color:#fff;letter-spacing:1px}
.x7-topbar .x7-brand b{color:#fb923c}
.x7-topbar a{color:#cbd5e1}
.x7-topbar a:hover{color:#fff;text-decoration:none}
.x7-topbar .x7-rail{display:flex;gap:10px;flex:1}
.x7-topbar .x7-srh{display:flex;background:#fff;border-radius:2px;overflow:hidden}
.x7-topbar .x7-srh input{border:0;outline:none;padding:5px 8px;font-size:12px;width:200px;color:#0f172a}
.x7-topbar .x7-srh button{border:0;background:#c2410c;color:#fff;padding:5px 14px;cursor:pointer;font-size:12px;font-weight:600}

.x7-catbar{background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:6px 14px;font-size:12px;color:#64748b}
.x7-catbar a{margin-right:14px;color:#475569}
.x7-catbar a:hover{color:#c2410c}
.x7-catbar a.on{color:#c2410c;font-weight:700;border-bottom:2px solid #c2410c;padding-bottom:4px}

.x7-crumb{padding:7px 14px;background:#fffbeb;border-bottom:1px solid #fde68a;font-size:11px;color:#78350f}
.x7-crumb a{color:#92400e}

.x7-grid{display:grid;grid-template-columns:240px minmax(0,1fr) 240px;gap:12px;padding:12px}
@media (max-width:1000px){.x7-grid{grid-template-columns:1fr;padding:8px}}

.x7-card{background:#fff;border:1px solid #e2e8f0;margin-bottom:12px}
.x7-card-hd{background:linear-gradient(180deg,#fff7ed,#ffedd5);border-bottom:1px solid #fed7aa;padding:7px 12px;font-size:13px;font-weight:700;color:#9a3412;display:flex;align-items:center;justify-content:space-between}
.x7-card-hd .x7-mark{display:inline-block;width:3px;height:14px;background:#c2410c;margin-right:8px;vertical-align:-2px}
.x7-card-hd .more{font-size:11px;font-weight:400;color:#64748b}
.x7-card-hd .more:hover{color:#c2410c}

.x7-rk{padding:6px 0;list-style:none}
.x7-rk li{display:flex;align-items:center;padding:5px 12px;font-size:12px;border-bottom:1px dotted #f1f5f9}
.x7-rk li:last-child{border:0}
.x7-rk li .x7-rkn{flex:0 0 22px;color:#94a3b8;font-family:Georgia,serif;font-weight:700;font-size:13px}
.x7-rk li:nth-child(1) .x7-rkn,.x7-rk li:nth-child(2) .x7-rkn,.x7-rk li:nth-child(3) .x7-rkn{color:#c2410c}
.x7-rk li .x7-rkt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.x7-rk li .x7-rkv{flex:0 0 50px;text-align:right;color:#94a3b8;font-size:10px}

.x7-tbl{width:100%;border-collapse:collapse;font-size:12px}
.x7-tbl th{background:#f8fafc;padding:6px 8px;border-bottom:1px solid #e2e8f0;text-align:left;color:#64748b;font-weight:600;font-size:11px;letter-spacing:0.5px}
.x7-tbl td{padding:7px 8px;border-bottom:1px dashed #f1f5f9}
.x7-tbl tr:hover td{background:#fffbeb}
.x7-tbl .x7-tg{display:inline-block;padding:1px 5px;background:#fed7aa;color:#9a3412;font-size:10px;border-radius:1px;margin-right:4px}
.x7-tbl .x7-bn b{color:#0f172a}
.x7-tbl .x7-bn a:hover b{color:#c2410c}
.x7-tbl .x7-au{color:#475569;font-size:11px}
.x7-tbl .x7-ch{color:#0369a1;font-size:11px}
.x7-tbl .x7-tm{color:#94a3b8;font-size:10px;font-family:Georgia,serif}

.x7-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px}
@media (max-width:700px){.x7-grid4{grid-template-columns:repeat(2,1fr)}}
.x7-cell{padding:6px 8px;border:1px solid #e2e8f0;font-size:11px}
.x7-cell h4{font-size:12px;font-weight:600;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.x7-cell .x7-meta{color:#94a3b8;font-size:10px;display:flex;justify-content:space-between}

.x7-bookhd{display:flex;gap:14px;padding:14px;background:linear-gradient(135deg,#fff7ed 0%,#fffbeb 100%);border-bottom:1px solid #fed7aa}
.x7-bookhd .x7-cov{flex:0 0 130px;height:175px;background:linear-gradient(135deg,#fed7aa,#fdba74);border:1px solid #fb923c;display:flex;align-items:center;justify-content:center;color:#7c2d12;font-weight:700;text-align:center;padding:6px;font-size:14px}
.x7-bookhd .x7-info h1{font-size:22px;font-weight:700;color:#0f172a;margin-bottom:6px;line-height:1.3}
.x7-bookhd .x7-info .x7-sub{color:#64748b;font-size:12px;margin-bottom:10px}
.x7-bookhd .x7-info .x7-sub b{color:#c2410c}
.x7-bookhd .x7-stats{display:grid;grid-template-columns:repeat(4,auto);gap:6px 16px;font-size:11px;color:#64748b;margin-bottom:10px}
.x7-bookhd .x7-stats span b{color:#0f172a;font-size:13px;display:block}
.x7-bookhd .x7-acts{display:flex;gap:6px}
.x7-btn{display:inline-block;padding:6px 14px;font-size:12px;border:0;cursor:pointer;font-weight:600;border-radius:1px}
.x7-btn.x7-pri{background:#c2410c;color:#fff}
.x7-btn.x7-pri:hover{background:#9a3412;text-decoration:none;color:#fff}
.x7-btn.x7-sec{background:#f1f5f9;color:#0f172a;border:1px solid #cbd5e1}
.x7-btn.x7-sec:hover{background:#e2e8f0;text-decoration:none}

.x7-abs{padding:12px 14px;background:#fff;border-bottom:1px solid #e2e8f0;font-size:12px;color:#475569;line-height:1.7}

.x7-chapgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0;font-size:12px}
@media (max-width:800px){.x7-chapgrid{grid-template-columns:repeat(2,1fr)}}
.x7-chapgrid a{display:block;padding:6px 10px;border-bottom:1px dashed #e2e8f0;border-right:1px dashed #e2e8f0;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.x7-chapgrid a:hover{background:#fff7ed;color:#c2410c;text-decoration:none}
.x7-chapgrid a.x7-pending{color:#cbd5e1;cursor:not-allowed}

.x7-readhd{padding:18px 14px 6px;text-align:center;background:#f8fafc;border-bottom:1px solid #e2e8f0}
.x7-readhd h1{font-size:22px;font-weight:700;color:#0f172a;margin-bottom:6px}
.x7-readhd .x7-rmeta{font-size:11px;color:#94a3b8}
.x7-readhd .x7-rmeta a{color:#475569}

.x7-readbody{max-width:760px;margin:0 auto;padding:14px 18px 24px;font-size:17px;line-height:2.0;color:#1e293b}
.x7-readbody p{margin-bottom:14px;text-indent:2em}

.x7-readnav{padding:14px;text-align:center;border-top:1px solid #e2e8f0;background:#f8fafc}
.x7-readnav a{display:inline-block;padding:7px 18px;margin:0 4px;background:#fff;border:1px solid #cbd5e1;font-size:12px;color:#0f172a}
.x7-readnav a:hover{background:#c2410c;color:#fff;border-color:#c2410c;text-decoration:none}
.x7-readnav a.x7-disabled{color:#cbd5e1;cursor:not-allowed;background:#f1f5f9}

.x7-pager{padding:12px;text-align:center;font-size:12px}
.x7-pager a,.x7-pager span{display:inline-block;padding:4px 10px;margin:0 2px;border:1px solid #e2e8f0;background:#fff;color:#475569}
.x7-pager .x7-on{background:#c2410c;color:#fff;border-color:#c2410c}
.x7-pager a:hover{background:#fff7ed;text-decoration:none;border-color:#fed7aa}

.x7-foot{padding:14px;background:#f8fafc;border-top:2px solid #c2410c;font-size:11px;color:#64748b;text-align:center;line-height:1.8}
.x7-foot a{color:#475569}

/* Shared reading UX layer. Appended to every family stylesheet at build time. */

/* Site names must remain legible even when a theme's brand and header colors
   happen to be close. A neutral badge works on both light and dark headers. */
.brand>a,
.x7-brand,
.v4-logo,
.tl-logo {
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  box-sizing:border-box;
  padding:7px 11px;
  border:1px solid rgba(15,23,42,.14);
  border-radius:8px;
  background:rgba(255,255,255,.94);
  color:#172033!important;
  text-shadow:none!important;
  box-shadow:0 1px 3px rgba(15,23,42,.10);
  line-height:1.2;
}
.brand>a:focus-visible,
.x7-brand:focus-visible,
.v4-logo:focus-visible,
.tl-logo:focus-visible {
  outline:3px solid rgba(37,99,235,.35);
  outline-offset:2px;
}

/* A comfortable desktop reading measure: long lines make Chinese prose harder
   to track. Keep surrounding site chrome wide while narrowing the actual text. */
@media (min-width:721px) {
  body.reader-mode { --cwidth:860px; }
  body.reader-mode .chapter-content,
  body.reader-mode .chapter-title,
  body.reader-mode .chapter-sub,
  body.reader-mode .lr-host-ending {
    width:min(100%,820px);
    margin-left:auto;
    margin-right:auto;
  }
  body.reader-mode .chapter-content p {
    font-size:max(var(--cfont,18px),18px);
    line-height:max(var(--cline,1.9),1.9);
  }
  .tl-reader { width:min(100%,860px); margin-left:auto; margin-right:auto; }
  .tl-reader-body { width:min(100%,800px); margin-left:auto; margin-right:auto; }
}

/* Desktop chapter navigation: next chapter is the primary reading action. */
@media (min-width:721px) {
  body.reader-mode .chapter-nav {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(105px,.42fr) 58px minmax(0,1fr);
    align-items:stretch;
    gap:12px;
    max-width:860px;
    margin:30px auto 12px;
  }
  body.reader-mode .chapter-nav>a {
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    font-size:15px;
    font-weight:600;
  }
  body.reader-mode .chapter-nav>a:last-child:not(.disabled) {
    color:#fff!important;
    background:var(--accent,#2563eb)!important;
    border-color:var(--accent,#2563eb)!important;
    box-shadow:0 5px 14px rgba(15,23,42,.16);
  }
  body.reader-mode .chapter-nav>a:last-child:not(.disabled):hover {
    filter:brightness(.92);
    transform:translateY(-1px);
  }
  body.reader-mode .chapter-topnav {
    display:grid!important;
    grid-template-columns:1fr minmax(130px,.55fr) 1fr;
    gap:10px!important;
    max-width:860px;
    margin-left:auto;
    margin-right:auto;
  }
  body.reader-mode .chapter-topnav>a {
    min-height:42px;
    justify-content:center;
    box-sizing:border-box;
  }
  body.reader-mode .chapter-topnav>a:last-child:not(.disabled) {
    color:#fff!important;
    background:var(--accent,#2563eb)!important;
    border-color:var(--accent,#2563eb)!important;
  }
  .tl-reader-nav>a:last-child {
    color:#fff;
    background:var(--forest,#143c35);
    border-color:var(--forest,#143c35);
  }
}

/* Touch targets and safe-area spacing for phones. */
@media (max-width:720px) {
  .brand>a,.x7-brand,.v4-logo,.tl-logo { padding:6px 9px; border-radius:7px; }
  body.reader-mode .chapter-nav>a,
  body.reader-mode .chapter-topnav>a,
  .tl-reader-nav>a,
  .tl-reader-nav>span,
  .tl-reader-nav .toc { min-height:44px; box-sizing:border-box; }
  body.reader-mode { padding-bottom:max(68px,calc(env(safe-area-inset-bottom) + 60px)); }
}

@media (prefers-reduced-motion:reduce) {
  body.reader-mode .chapter-nav>a { transition:none!important; transform:none!important; }
}

/* Book detail: make the primary reading action unmistakable while keeping
   secondary actions available without competing for attention. */
.book-actions,
.x7-acts,
.tl-actions {
  align-items:center;
  gap:10px;
}
#lr-read-btn,
.x7-btn.x7-pri,
.tl-actions>a:first-child {
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  padding-left:24px;
  padding-right:24px;
  font-size:16px;
  font-weight:700;
  box-shadow:0 5px 14px rgba(15,23,42,.16);
}
.book-actions .btn.ghost,
.x7-btn.x7-sec,
.tl-actions>a:not(:first-child),
.tl-actions>button {
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}

/* Home/list scanning: titles may use two lines instead of being cut off after
   one, and rows expose a clear hover/focus state. */
.cover-list .it .n {
  min-height:2.8em;
  white-space:normal!important;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.cover-list .it .c,
.tl-book-tile,
.x7-cell {
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
@media (hover:hover) {
  .cover-list .it:hover .c,
  .tl-book-tile:hover,
  .x7-cell:hover {
    transform:translateY(-2px);
    box-shadow:0 7px 18px rgba(15,23,42,.12);
  }
  .recent .row:hover,
  .x7-rk li:hover,
  .tl-update-row:hover { background:rgba(37,99,235,.045); }
}
.recent .row,
.x7-rk li,
.tl-update-row { min-height:40px; box-sizing:border-box; }

/* Keep the everyday reading controls visible; advanced typography controls
   remain unnecessary chrome for most readers and crowded the viewport. */
.reader-tools button[onclick*="setLine"],
.reader-tools button[onclick*="setWidth"],
.reader-tools button[onclick*="toggleIndent"],
.reader-tools button[onclick*="toggleWeight"] { display:none!important; }

/* Consistent keyboard accessibility across all visual families. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline:3px solid rgba(37,99,235,.38)!important;
  outline-offset:2px;
}

@media (max-width:720px) {
  .book-actions { display:grid!important; grid-template-columns:1fr 1fr; }
  #lr-read-btn { grid-column:1/-1; width:100%; }
  .book-actions .btn.ghost { width:100%; padding-left:8px; padding-right:8px; }
  .cover-list { gap:16px 10px; }
  .cover-list .it .n { font-size:14px; }

  /* Large catalogues stay usable with one thumb: chunk selectors scroll
     horizontally and remain available while the reader scans chapter names. */
  .chap-tabs,
  .tl-chunk-tabs {
    position:sticky;
    top:0;
    z-index:12;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:8px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:9px 2px;
    background:var(--card,#fff);
  }
  .chap-tabs::-webkit-scrollbar,
  .tl-chunk-tabs::-webkit-scrollbar { display:none; }
  .chap-tab,
  .tl-chunk-tabs button {
    flex:0 0 auto;
    min-height:40px;
    padding:8px 13px!important;
  }
  .chap-chunk.active,
  .chapters,
  .x7-chapgrid,
  .tl-chapter-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .chap-chunk>a,
  .chap-chunk>span,
  .chapters>a,
  .chapters>span,
  .x7-chapgrid>a,
  .tl-chapter-grid>a,
  .tl-chapter-grid>.pending {
    min-height:44px;
    display:flex!important;
    align-items:center;
    box-sizing:border-box;
    padding-top:8px!important;
    padding-bottom:8px!important;
  }
  #lr-chap-order,
  #tl-order { display:inline-flex; align-items:center; min-height:40px; padding:0 8px; }

  /* Search is a primary navigation action on a novel site. */
  .search,
  .x7-srh,
  .tl-search { min-height:44px; }
  .search input,
  .search button,
  .x7-srh input,
  .x7-srh button,
  .tl-search input,
  .tl-search button { min-height:44px; box-sizing:border-box; }
}