/* ════════════════════════════════════════════
   Light  —  jcp [data-bs-theme=light]
════════════════════════════════════════════ */
:root {
  --bg:         #fafdff;
  --surface2:   #f6f7fb;
  --border:     #e7e9eb;
  --border-h:   #ced4da;
  --text:       #4c4c5c;
  --text2:      #6e6e7e;
  --text3:      #9ba6b7;
  --accent:     #71b6d4;
  --accent-h:   #5aa3c4;
  --hdr-a:      #71b6d4;
  --hdr-b:      #783bff;
  --toolbar-bg: #ffffff;
  --pill-bg:    #f6f7fb;
  --pill-fg:    #4c4c5c;
  --pill-bdr:   #e7e9eb;
  --in-bg:      #f6f7fb;
  --in-bdr:     #e7e9eb;
  --rec-bg:     #eef2f7;
  --rec-fg:     #8a969c;
  --pg-bg:      #f6f7fb;
  --pg-bdr:     #e7e9eb;
  --pg-fg:      #4c4c5c;
  --modal-bg:   #ffffff;
  --modal-bdr:  #e7e9eb;
  --sh-sm:      0 .125rem .25rem rgba(76,76,92,.15);
  --sh-md:      0 0 35px rgba(104,134,177,.18);
  --subbar-bg:  #f6f7fb;
}

/* ════════════════════════════════════════════
   Dark  —  jcp [theme=dark]  (system pref)
════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:         #17181e;
    --surface2:   #252630;
    --border:     #37394d;
    --border-h:   #404954;
    --text:       #dee2e6;
    --text2:      #aab8c5;
    --text3:      #8391a2;
    --accent:     #71b6d4;
    --accent-h:   #5aa3c4;
    --hdr-a:      #12131a;
    --hdr-b:      #1c1d2c;
    --toolbar-bg: #1e1f27;
    --pill-bg:    #252630;
    --pill-fg:    #aab8c5;
    --pill-bdr:   #37394d;
    --in-bg:      #252630;
    --in-bdr:     #37394d;
    --rec-bg:     #404954;
    --rec-fg:     #aab8c5;
    --pg-bg:      #1e1f27;
    --pg-bdr:     #37394d;
    --pg-fg:      #aab8c5;
    --modal-bg:   #1e1f27;
    --modal-bdr:  #37394d;
    --sh-sm:      0 2px 8px rgba(0,0,0,.4);
    --sh-md:      0 10px 28px rgba(0,0,0,.55);
    --subbar-bg:  #1e1f27;
  }
}

/* ════════════════════════════════════════════
   Manual overrides  (beat media query)
════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:         #17181e;
  --surface2:   #252630;
  --border:     #37394d;
  --border-h:   #404954;
  --text:       #dee2e6;
  --text2:      #aab8c5;
  --text3:      #8391a2;
  --accent:     #71b6d4;
  --accent-h:   #5aa3c4;
  --hdr-a:      #12131a;
  --hdr-b:      #1c1d2c;
  --toolbar-bg: #1e1f27;
  --pill-bg:    #252630;
  --pill-fg:    #aab8c5;
  --pill-bdr:   #37394d;
  --in-bg:      #252630;
  --in-bdr:     #37394d;
  --rec-bg:     #404954;
  --rec-fg:     #aab8c5;
  --pg-bg:      #1e1f27;
  --pg-bdr:     #37394d;
  --pg-fg:      #aab8c5;
  --modal-bg:   #1e1f27;
  --modal-bdr:  #37394d;
  --sh-sm:      0 2px 8px rgba(0,0,0,.4);
  --sh-md:      0 10px 28px rgba(0,0,0,.55);
  --subbar-bg:  #1e1f27;
}
[data-theme="light"] {
  --bg:         #fafdff;
  --surface2:   #f6f7fb;
  --border:     #e7e9eb;
  --border-h:   #ced4da;
  --text:       #4c4c5c;
  --text2:      #6e6e7e;
  --text3:      #9ba6b7;
  --accent:     #71b6d4;
  --accent-h:   #5aa3c4;
  --hdr-a:      #71b6d4;
  --hdr-b:      #783bff;
  --toolbar-bg: #ffffff;
  --pill-bg:    #f6f7fb;
  --pill-fg:    #4c4c5c;
  --pill-bdr:   #e7e9eb;
  --in-bg:      #f6f7fb;
  --in-bdr:     #e7e9eb;
  --rec-bg:     #eef2f7;
  --rec-fg:     #8a969c;
  --pg-bg:      #f6f7fb;
  --pg-bdr:     #e7e9eb;
  --pg-fg:      #4c4c5c;
  --modal-bg:   #ffffff;
  --modal-bdr:  #e7e9eb;
  --sh-sm:      0 .125rem .25rem rgba(76,76,92,.15);
  --sh-md:      0 0 35px rgba(104,134,177,.18);
  --subbar-bg:  #f6f7fb;
}

/* ════════════════════════════════════════════
   Base
════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── Nav bar ─────────────────────────────── */
.l-nav {
  background: linear-gradient(135deg, var(--hdr-a), var(--hdr-b));
  padding: 12px 20px;
  display: flex; align-items: center; gap: 16px;
}
.l-brand { font-size: 1.05rem; font-weight: 700; color: #fff; white-space: nowrap; }
.l-nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.l-nav-links a {
  font-size: .8rem; color: #fff; text-decoration: none;
  padding: 5px 12px; border-radius: 7px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  white-space: nowrap; transition: background .14s;
}
.l-nav-links a:hover { background: rgba(255,255,255,.28); }

.l-nav-theme {
  margin-left: auto;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px; color: #fff; font-size: .88rem;
  width: 36px; height: 36px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.l-nav-theme:hover { background: rgba(255,255,255,.26); }

/* ── Toolbar ────────────────────────────── */
.l-bar {
  background: var(--toolbar-bg);
  border-bottom: 1px solid var(--border);
  padding: 9px 20px;
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
/* 同组按钮更紧凑，组间用 sep / gap 区隔 */
.grp { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.pill {
  padding: 5px 14px; border-radius: 20px;
  font-size: .76rem; font-weight: 500;
  border: 1px solid var(--pill-bdr);
  background: var(--pill-bg); color: var(--pill-fg);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.pill:hover    { border-color: var(--border-h); color: var(--text); }
.pill.on       { background: var(--accent); border-color: var(--accent); color: #fff; }
.pill.on:hover { background: var(--accent-h); border-color: var(--accent-h); }

.sep      { width: 1px; height: 18px; background: var(--border); margin: 0 2px; flex-shrink: 0; }
.sort-lbl { font-size: .72rem; color: var(--text3); white-space: nowrap; }

.l-srch { margin-left: auto; }
.l-srch input {
  background: var(--in-bg); border: 1px solid var(--in-bdr);
  border-radius: 8px; padding: 6px 13px;
  color: var(--text); font-size: .77rem; width: 196px;
  outline: none; transition: border-color .14s;
}
.l-srch input:focus        { border-color: var(--accent); }
.l-srch input::placeholder { color: var(--text3); }

/* ── Sub-bar ────────────────────────────── */
.l-sub {
  background: var(--subbar-bg);
  border-bottom: 1px solid var(--border);
  padding: 6px 20px;
  font-size: .74rem; color: var(--text3);
  display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center;
}

/* ── Grid wrapper ───────────────────────── */
.l-grid { padding: 20px; }

/* ── Card media  (own classes, 16:9) ────── */
.c-media {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;   /* 比 16:9 更扁，降低图片高度 */
  overflow: hidden;
  background: var(--surface2);
}
.c-media .lazy-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* 图片链接 + hover 播放按钮 */
.c-media-link {
  position: absolute; inset: 0; z-index: 1;
  display: block; cursor: pointer;
}
.c-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.8);
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(113, 182, 212, .85); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .18s, transform .18s;
  pointer-events: none;
}
.c-play svg { margin-left: 3px; }   /* 视觉居中三角 */
.c-media:hover .c-play {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
}
.c-media:hover .lazy-img { filter: brightness(.82); transition: filter .18s; }

/* ── Lazy-load fade  (own class) ────────── */
.lazy-img        { opacity: 0; transition: opacity .3s; }
.lazy-img.loaded { opacity: 1; }

/* ── Card badge overlays  (own classes) ─── */
.c-badge       { font-size: .61rem; font-weight: 700; padding: 2px 7px;
                 border-radius: 5px; letter-spacing: .05em; line-height: 1.6; }
.c-badge-live  { background: #e91e63; color: #fff; }
.c-badge-rec   { background: var(--rec-bg); color: var(--rec-fg); }
.c-badge-adult { background: #ff6f00; color: #fff; }
.c-badge-fan   { background: #783bff; color: #fff; }
.c-badge-pw    { background: #02bc9c; color: #fff; }

.c-viewers {
  background: rgba(0,0,0,.62); border-radius: 5px;
  padding: 2px 8px; font-size: .68rem; color: #ddd;
  display: flex; align-items: center; gap: 4px;
}

/* ── Card body content  (own classes) ────── */
.c-title {
  font-size: .95rem; font-weight: 600; color: var(--text);
  line-height: 1.4; margin: 0 0 10px;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  min-height: 2.3em;
}
.c-bj    { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.c-avatar{ width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.c-nick  { font-size: .75rem; color: var(--text2); text-decoration: none;
           overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
           transition: color .12s; }
.c-nick:hover { color: var(--accent); }
.c-uid   { margin-left: 5px; font-size: .72rem; color: var(--text2); }
.c-nick:hover .c-uid { color: var(--accent); }

.c-meta    { display: flex; flex-wrap: wrap; gap: 4px 10px;
             font-size: .68rem; color: var(--text3);
             margin: 0; padding: 0; list-style: none; }
.c-meta li { display: flex; align-items: center; gap: 3px; }
.c-meta svg{ opacity: .65; }

/* ── Pagination  (own classes) ──────────── */
.l-pgr {
  display: flex; justify-content: center; align-items: center;
  padding: 16px 20px 36px; gap: 4px; flex-wrap: wrap;
}
.pg {
  min-width: 34px; height: 34px; padding: 0 8px;
  border-radius: 7px; border: 1px solid var(--pg-bdr);
  background: var(--pg-bg); color: var(--pg-fg);
  font-size: .8rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  user-select: none; transition: all .12s;
}
.pg:hover:not([disabled]) { border-color: var(--border-h); color: var(--text); }
.pg.on        { background: var(--accent); border-color: var(--accent); color: #fff; }
.pg[disabled] { opacity: .3; cursor: default; pointer-events: none; }
.pg-dot       { color: var(--text3); padding: 0 3px; font-size: .8rem; line-height: 34px; }

/* ── Empty / error state ────────────────── */
.l-empty { text-align: center; color: var(--text3); padding: 64px 20px; font-size: .95rem; }

/* ── Age-gate modal content  (own classes) ─ */
.age-box   { background: var(--modal-bg); border: 1px solid var(--modal-bdr);
             border-radius: 16px; padding: 36px 30px;
             text-align: center; box-shadow: var(--sh-md); }
.age-icon  { font-size: 2.6rem; margin-bottom: 10px; }
.age-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.age-desc  { font-size: .83rem; color: var(--text2); line-height: 1.7; margin-bottom: 22px; }
.age-desc strong { color: #ff6f00; }
.age-btns  { display: flex; gap: 10px; justify-content: center; }
.age-ok {
  padding: 9px 24px; border-radius: 8px;
  background: var(--accent); border: none; color: #fff;
  font-size: .85rem; font-weight: 600; cursor: pointer; transition: background .13s;
}
.age-ok:hover { background: var(--accent-h); }
.age-no {
  padding: 9px 20px; border-radius: 8px;
  background: transparent; border: 1px solid var(--border-h);
  color: var(--text2); font-size: .85rem; cursor: pointer; transition: all .13s;
}
.age-no:hover { background: var(--surface2); color: var(--text); }

/* ════════════════════════════════════════════
   Help modal
════════════════════════════════════════════ */
.h-dialog {
  background: var(--surface2); border-radius: 14px;
  padding: 28px 32px; max-width: 720px;
}
.h-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.h-icon   { font-size: 2rem; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.h-title  { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0 0 3px; }
.h-sub    { font-size: .8rem; color: var(--text2); margin: 0; }

.h-why {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 8px;
  padding: 11px 14px; font-size: .9rem; color: var(--text2);
  line-height: 1.65; margin-bottom: 20px;
}
.h-why .fa-circle-info { color: var(--accent); flex-shrink: 0; margin-top: 2px; }

.h-tabs { margin-bottom: 0; }
.h-tabs > li > a { font-size: .9rem; color: var(--text2); }
/* 暗黑模式下 UIkit active tab 颜色太淡，强制覆写 */
.h-tabs > li.uk-active > a {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}
.h-panes { margin-top: 14px; }

/* Steps */
.h-steps { margin: 0; }
.h-step  { display: flex; gap: 12px; margin-bottom: 16px; font-size: 1rem; color: var(--text); line-height: 1.7; }
.h-num   {
  min-width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: .75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 3px;
}
.h-body  { flex: 1; min-width: 0; }
.h-body strong { display: block; margin-bottom: 5px; font-size: 1rem; }

/* Horizontal field row with copy */
.h-row  { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.h-field {
  display: flex; align-items: stretch;
  border: 1px solid var(--border); border-radius: 7px; overflow: hidden;
  font-size: .76rem;
}
.h-label {
  background: var(--surface2); color: var(--text3);
  padding: 5px 10px; border-right: 1px solid var(--border);
  display: flex; align-items: center; white-space: nowrap;
}
.h-val {
  background: var(--surface); color: var(--text);
  padding: 5px 10px; font-family: SFMono-Regular, Consolas, monospace;
  display: flex; align-items: center;
}
.h-copy {
  background: var(--surface2); border: none; border-left: 1px solid var(--border);
  color: var(--text3); padding: 5px 9px; cursor: pointer;
  display: flex; align-items: center; transition: color .12s, background .12s;
}
.h-copy:hover { background: var(--border); color: var(--text); }

/* Note box */
.h-note {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
  font-size: .9rem; color: var(--text2); margin-bottom: 14px;
}
.h-note .fa-triangle-exclamation { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.h-note-warn .fa-circle-xmark    { color: #ff6d43; flex-shrink: 0; margin-top: 2px; }

.h-list    { margin: 6px 0 0 16px; padding: 0; font-size: .9rem; color: var(--text2); }
.h-list li { margin-bottom: 5px; }

/* Example image */
.h-img-wrap { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 16px; }
.h-img-label { font-size: .78rem; font-weight: 600; color: var(--text2); margin: 0 0 8px; }
.h-img-label .fa-image { color: var(--accent); margin-right: 5px; }
.h-img {
  width: 100%; max-width: 100%;
  border: 1px solid var(--border); border-radius: 8px;
  display: block; cursor: zoom-in;
  transition: opacity .15s;
}
.h-img:hover { opacity: .9; }
.h-img-hint { font-size: .72rem; color: var(--text3); margin: 5px 0 0; }

.h-footer {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: .88rem; color: var(--text3);
}
.h-footer .fa-lightbulb { color: #f9c45c; flex-shrink: 0; margin-top: 2px; }

kbd {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 6px; font-size: .74rem;
  color: var(--text); font-family: inherit;
}

/* Nav help button */
.l-nav-help {
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px; color: #fff; font-size: 1rem;
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s; text-decoration: none;
}
.l-nav-help:hover { background: rgba(255,255,255,.26); color: #fff; }

/* ════════════════════════════════════════════
   UIkit 组件主题覆写
   让 button-default / heading / text 跟随
   我们的 CSS 变量，正确响应日/夜模式
════════════════════════════════════════════ */

/* 标题 */
h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
.uk-heading-small, .uk-heading-medium,
.uk-heading-large, .uk-heading-xlarge {
  color: var(--text);
}

/* 正文与辅助文字 */
.uk-text-muted   { color: var(--text3) !important; }
.uk-text-emphasis { color: var(--text) !important; }
.uk-link-muted,
.uk-link-muted:hover { color: var(--text2); }

/* Default 按钮 */
.uk-button-default {
  background-color: var(--surface2);
  border-color:     var(--border);
  color:            var(--text);
}
.uk-button-default:hover,
.uk-button-default:focus {
  background-color: var(--surface2);
  border-color:     var(--border-h);
  color:            var(--text);
}
.uk-button-default:active {
  background-color: var(--border);
  border-color:     var(--border-h);
  color:            var(--text);
}