/* Keep the directory presentation in the app stylesheet: a route must not
   depend on a separately patched component CSS chunk to render its cards. */
.mall-page.live-directory-page { max-width:860px; padding-left:12px; padding-right:12px; }
.live-directory-page .live-directory-heading { margin-bottom:18px; }
.live-directory-page .live-directory-heading > uni-view { margin:6px 0; font-size:26px; line-height:1.4; font-weight:650; color:#284b40; }
.live-directory-page .live-directory-heading > uni-text:last-child { font-size:13px; color:#7d8379; }
.live-directory-page .live-banner { margin-bottom:16px; border-radius:12px; }
.mall-page.live-directory-page .live-tabs.qj-tabs.qj-tabs.qj-tabs { display:flex; gap:20px; align-items:center; flex-wrap:nowrap; margin:0 0 16px; padding:0 2px; box-sizing:border-box; }
.mall-page.live-directory-page .live-tabs.qj-tabs.qj-tabs.qj-tabs > uni-text { flex:0 0 auto; min-height:44px; box-sizing:border-box; margin:0; padding:8px 0; border:0; border-bottom:3px solid transparent; border-radius:0; background:transparent; color:#737b74; font-size:15px; line-height:1.6; font-weight:400; }
.mall-page.live-directory-page .live-tabs.qj-tabs.qj-tabs.qj-tabs > uni-text.active { color:#94713d; font-weight:650; border-bottom-color:#94713d; background:transparent; }
.live-directory-page .live-categories.qj-tabs { margin-bottom:14px; }
.live-directory-page .live-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:stretch; }
.live-directory-page .live-card { display:flex; flex-direction:column; min-width:0; border:1px solid #eee9df; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 3px 12px rgba(40,75,64,.035); }
.live-directory-page .live-cover { display:flex; align-items:center; justify-content:center; width:100%; height:auto; aspect-ratio:4/3; position:relative; overflow:hidden; background:linear-gradient(135deg,#e6ecdf,#f1eadb); cursor:pointer; }
.live-directory-page .live-cover uni-image { display:block; width:100%; height:100%; position:absolute; inset:0; }
.live-directory-page .live-symbol { padding:20px; color:#607768; font-size:15px; letter-spacing:2px; text-align:center; }
.live-directory-page .live-badge, .live-directory-page .live-replay { position:absolute; z-index:1; top:10px; left:10px; max-width:calc(100% - 20px); box-sizing:border-box; padding:4px 8px; border-radius:5px; background:rgba(38,52,45,.78); color:#fff; font-size:12px; line-height:1.5; font-weight:500; }
.live-directory-page .live-badge.on { background:#284b40; }
.live-directory-page .live-badge.on::before { content:''; display:inline-block; width:5px; height:5px; border-radius:50%; margin-right:5px; vertical-align:middle; background:#dbecd6; }
.live-directory-page .live-replay { top:auto; left:auto; right:10px; bottom:10px; background:rgba(255,253,248,.94); color:#765a31; }
.live-directory-page .live-body { display:flex; flex:1; flex-direction:column; min-width:0; padding:14px; box-sizing:border-box; }
.live-directory-page .live-body .m-kicker { display:block; font-size:12px; color:#94713d; line-height:1.5; letter-spacing:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.live-directory-page .live-body .m-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; margin:6px 0 8px; color:#263e36; font-size:17px; font-weight:600; line-height:1.5; min-height:51px; cursor:pointer; }
.live-directory-page .live-body > .m-muted { color:#7a817a; font-size:12px; line-height:1.6; }
.live-directory-page .live-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:14px; }
.live-directory-page .live-foot > .m-muted { font-size:12px; color:#7a817a; line-height:1.6; }
.mall-page.live-directory-page .live-foot uni-button.m-ghost { flex:0 0 auto; margin:0 0 0 auto; min-width:84px; padding:0 14px; line-height:36px; font-size:13px; font-weight:500; border:0; border-radius:7px; color:#fff; background:#284b40; }
.live-directory-page .live-foot uni-button::after { border:0; }
.live-directory-page .live-foot uni-button:active { opacity:.85; }
.live-directory-page .live-more { width:160px; margin:22px auto 0; font-size:14px; color:#765a31; background:#efeade; }
.live-directory-page .m-empty { padding:32px 18px; border-radius:12px; background:#fff; color:#7a817a; font-size:14px; }
@media(min-width:480px) {
  .live-directory-page .live-grid > .live-card:only-child { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
  .live-directory-page .live-grid > .live-card:only-child .live-cover { height:100%; min-height:210px; }
  .live-directory-page .live-grid > .live-card:only-child .live-body { padding:18px; }
}
@media(max-width:479px) {
  .live-directory-page .live-grid { grid-template-columns:minmax(0,1fr); gap:14px; }
  .live-directory-page .live-cover { aspect-ratio:16/9; }
  .live-directory-page .live-body { padding:14px 16px 16px; }
  .live-directory-page .live-body .m-title { min-height:0; font-size:18px; }
  .mall-page.live-directory-page .live-tabs.qj-tabs.qj-tabs.qj-tabs { gap:18px; }
  .mall-page.live-directory-page .live-tabs.qj-tabs.qj-tabs.qj-tabs > uni-text { font-size:14px; }
  .live-directory-page .live-foot { padding-top:14px; }
  .mall-page.live-directory-page .live-foot uni-button.m-ghost { min-width:96px; line-height:38px; font-size:14px; }
}