/* Scoped copy of the H5 home card styles for the admin's instant preview. */
.home-layout-phone__screen { position:relative; --ink:#1d2b3e; --muted:#6c7d91; --line:#dce5ed; --canvas:#edf3f8; --blue:#176bca; --teal:#177d74; }
.home-layout-phone__screen .h5-app { width:100%; min-height:100%; padding:0 16px 88px; color:var(--ink); background:var(--canvas); font-family:"PingFang SC","Microsoft YaHei",sans-serif; }
.home-layout-phone__screen button,.home-layout-phone__screen input { font:inherit; }.home-layout-phone__screen button { cursor:default; }
.home-layout-phone__screen .h5-top { margin:0 -16px; padding:22px 16px 14px; border-bottom:1px solid var(--line); background:#fff; }.home-layout-phone__screen .h5-brand { display:flex; justify-content:space-between; align-items:center; }.home-layout-phone__screen .h5-brand-left { display:flex; align-items:center; gap:9px; min-width:0; }.home-layout-phone__screen .h5-brand img { width:42px; height:42px; object-fit:cover; object-position:left; }.home-layout-phone__screen .h5-brand strong { display:block; font-size:20px; line-height:1.1; }.home-layout-phone__screen .h5-brand small,.home-layout-phone__screen .h5-city { display:block; margin-top:4px; color:var(--muted); font-size:10px; }.home-layout-phone__screen .h5-city { margin:0; font-size:11px; white-space:nowrap; }
.home-layout-phone__screen .h5-search { display:grid; grid-template-columns:1fr 46px; gap:8px; margin-top:14px; padding:7px 8px 7px 12px; border:1px solid #cad9e6; border-radius:22px; background:#fff; }.home-layout-phone__screen .h5-search input { min-width:0; border:0; outline:0; background:transparent; }.home-layout-phone__screen .h5-search button { border:0; border-radius:17px; color:#fff; background:var(--blue); font-size:12px; font-weight:700; }
.home-layout-phone__screen .h5-carousel { position:relative; margin-top:14px; overflow:hidden; border-radius:8px; background:#174867; }.home-layout-phone__screen .h5-carousel-stage { position:relative; width:100%; aspect-ratio:2.1 / 1; display:block; overflow:hidden; padding:0; border:0; color:#fff; background:#174867; text-align:left; }.home-layout-phone__screen .h5-carousel-stage img { width:100%; height:100%; display:block; object-fit:cover; }.home-layout-phone__screen .h5-carousel-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(9,34,53,.76),rgba(9,34,53,.12) 70%); }.home-layout-phone__screen .h5-carousel-copy { position:absolute; right:44px; bottom:20px; left:18px; }.home-layout-phone__screen .h5-carousel-copy small { display:block; margin-bottom:5px; color:#e6f2fa; font-size:10px; }.home-layout-phone__screen .h5-carousel-copy strong { display:-webkit-box; overflow:hidden; font-size:17px; line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.home-layout-phone__screen .h5-carousel-dots { position:absolute; right:12px; bottom:12px; display:flex; gap:6px; }.home-layout-phone__screen .h5-carousel-dots button { width:7px; height:7px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.52); }.home-layout-phone__screen .h5-carousel-dots button.active { width:18px; border-radius:5px; background:#fff; }
.home-layout-phone__screen .h5-section { margin-top:24px; }.home-layout-phone__screen .h5-head { display:flex; align-items:center; justify-content:space-between; margin:0 2px 10px; }.home-layout-phone__screen .h5-head h2 { margin:0; font-size:17px; }.home-layout-phone__screen .h5-hot,.home-layout-phone__screen .h5-feed { border:1px solid var(--line); background:#fff; }.home-layout-phone__screen .h5-hot button { width:100%; padding:13px 14px; border:0; border-bottom:1px solid var(--line); color:inherit; background:#fff; text-align:left; }.home-layout-phone__screen .h5-hot button:last-child { border-bottom:0; }.home-layout-phone__screen .h5-hot b { display:block; overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.home-layout-phone__screen .h5-hot span { display:block; margin-top:4px; color:var(--muted); font-size:10px; }
.home-layout-phone__screen .h5-video-card,.home-layout-phone__screen .h5-short-video-card,.home-layout-phone__screen .h5-triple-card { width:100%; border:0; color:var(--ink); background:#fff; text-align:left; }.home-layout-phone__screen .h5-video-card { padding:12px; overflow:hidden; border-radius:8px; box-shadow:0 1px 0 rgba(31,66,93,.08); }.home-layout-phone__screen .h5-video-title { overflow:hidden; margin:0 0 10px; font-size:15px; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }.home-layout-phone__screen .h5-video { position:relative; overflow:hidden; background:#173d59; }.home-layout-phone__screen .h5-video img { width:100%; height:205px; display:block; object-fit:cover; opacity:.84; }.home-layout-phone__screen .h5-video i,.home-layout-phone__screen .h5-short-video-cover i { position:absolute; top:50%; left:50%; width:42px; height:42px; display:grid; place-items:center; transform:translate(-50%,-50%); border-radius:50%; color:#fff; background:rgba(13,43,67,.75); font-size:16px; font-style:normal; }.home-layout-phone__screen .h5-video-duration,.home-layout-phone__screen .h5-short-video-cover span { position:absolute; right:9px; bottom:8px; padding:3px 5px; border-radius:3px; color:#fff; background:rgba(10,27,42,.76); font-size:10px; }.home-layout-phone__screen .h5-video-meta,.home-layout-phone__screen .h5-content-author { overflow:hidden; margin-top:7px; color:#8392a1; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.home-layout-phone__screen .h5-short-video-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:10px; border:1px solid var(--line); background:#fff; }.home-layout-phone__screen .h5-short-video-card { min-width:0; }.home-layout-phone__screen .h5-short-video-cover { position:relative; aspect-ratio:3 / 4; overflow:hidden; background:#236783; }.home-layout-phone__screen .h5-short-video-cover img { width:100%; height:100%; display:block; object-fit:cover; opacity:.83; }.home-layout-phone__screen .h5-short-video-cover i { width:31px; height:31px; font-size:12px; }.home-layout-phone__screen .h5-short-video-card b,.home-layout-phone__screen .h5-short-video-card small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.home-layout-phone__screen .h5-short-video-card b { margin-top:7px; font-size:12px; line-height:1.4; }.home-layout-phone__screen .h5-short-video-card small { margin-top:4px; color:#8392a1; font-size:10px; line-height:1.4; }
.home-layout-phone__screen .h5-triple-card,.home-layout-phone__screen .h5-double-card { padding:12px; border:1px solid var(--line); color:var(--ink); background:#fff; text-align:left; }.home-layout-phone__screen .h5-triple-card h3,.home-layout-phone__screen .h5-double-card h3 { overflow:hidden; margin:0; font-size:15px; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }.home-layout-phone__screen .h5-triple-images { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin-top:10px; }.home-layout-phone__screen .h5-double-images { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:10px; }.home-layout-phone__screen .h5-triple-images img { width:100%; aspect-ratio:1 / .72; object-fit:cover; background:#dce7ee; }.home-layout-phone__screen .h5-double-images img { width:100%; aspect-ratio:1.36 / 1; object-fit:cover; background:#dce7ee; }
.home-layout-phone__screen .h5-club-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.home-layout-phone__screen .h5-club-card { min-height:119px; padding:16px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; border-radius:12px; color:#fff; background:#1f777f; }.home-layout-phone__screen .h5-club-card strong,.home-layout-phone__screen .h5-club-card small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.home-layout-phone__screen .h5-club-card strong { font-size:15px; line-height:1.4; }.home-layout-phone__screen .h5-club-card small { display:block; margin-top:6px; color:rgba(255,255,255,.88); font-size:11px; line-height:1.4; }.home-layout-phone__screen .h5-club-card--1 { background:#c98437; }.home-layout-phone__screen .h5-club-card--2 { background:#4276a8; }.home-layout-phone__screen .h5-club-card--3 { background:#9c687d; }
.home-layout-phone__screen .h5-horizontal-card { width:100%; min-height:92px; padding:12px; display:grid; grid-template-columns:minmax(0,1fr) 82px; gap:12px; align-items:center; border:0; border-bottom:1px solid var(--line); color:var(--ink); background:#fff; text-align:left; }.home-layout-phone__screen .h5-horizontal-card:last-child { border-bottom:0; }.home-layout-phone__screen .h5-horizontal-copy { min-width:0; }.home-layout-phone__screen .h5-horizontal-card h3 { display:-webkit-box; overflow:hidden; margin:0; font-size:14px; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.home-layout-phone__screen .h5-horizontal-meta { overflow:hidden; margin-top:7px; color:#8292a1; font-size:10px; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; }.home-layout-phone__screen .h5-horizontal-card img,.home-layout-phone__screen .h5-horizontal-placeholder { width:82px; height:62px; display:block; border-radius:8px; object-fit:cover; background:linear-gradient(135deg,#d8ae67,#1e5d79); }
.home-layout-phone__screen .h5-empty { padding:38px 18px; color:var(--muted); border:1px dashed #cbd8e3; background:#fff; text-align:center; font-size:13px; }.home-layout-phone__nav-layer .h5-bottom-nav { height:68px; display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); background:#fff; }.home-layout-phone__nav-layer .h5-bottom-nav button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:0; color:#758398; background:transparent; font-size:10px; }.home-layout-phone__nav-layer .h5-bottom-nav i { height:18px; font-style:normal; font-size:17px; }.home-layout-phone__nav-layer .h5-bottom-nav button.active { color:var(--blue); font-weight:700; }.home-layout-phone__nav-layer .h5-bottom-nav button.active:after { content:""; width:4px; height:4px; border-radius:50%; background:var(--blue); }