:root{--sx-app-height:54px}

/* Portrait cards share one layout on the home recommendation and its categories. */
body.sx-page .sx-drama-masonry{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px;width:100%}
body.sx-page .sx-drama-masonry .sx-drama-column{display:flex;flex-direction:column;min-width:0;gap:12px}
body.sx-page .sx-drama-masonry .sx-drama-card{display:block;min-width:0;text-decoration:none}
body.sx-page .sx-drama-masonry .sx-drama-cover{position:relative;width:100%;height:auto;aspect-ratio:3/4;overflow:hidden;border-radius:9px;background:#24231f}
body.sx-page .sx-drama-masonry .sx-drama-cover img{display:block;width:100%;height:100%;object-fit:cover}
body.sx-page .sx-drama-masonry .sx-cover-badge{top:6px;right:auto;left:6px;z-index:1;padding:3px 7px;border-radius:12px;background:#ffda13;color:#16130a;font-size:10px;font-weight:800;line-height:1.2;box-shadow:0 2px 7px #0007}
body.sx-page .sx-drama-masonry .sx-cover-meta{display:flex;align-items:end;justify-content:space-between;gap:4px;min-width:0;padding:24px 7px 6px;background:linear-gradient(transparent,#050505d9);color:#fff;font-size:10px;font-weight:700;line-height:1.2;text-shadow:0 1px 3px #000}
body.sx-page .sx-drama-masonry .sx-cover-meta span{min-width:0;white-space:nowrap}
body.sx-page .sx-drama-masonry .sx-cover-meta span:first-child{overflow:hidden;text-overflow:ellipsis}
body.sx-page .sx-drama-masonry .sx-cover-meta i{font-size:9px;font-style:normal}
body.sx-page .sx-drama-masonry .sx-drama-card h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:0;margin:6px 0 2px;color:#f7f7f4;font-size:13px;font-weight:800;line-height:1.38;white-space:normal;text-overflow:ellipsis}
body.sx-page .sx-drama-masonry .sx-drama-card small{display:block;margin:0;color:#aaa9a2;font-size:10px;line-height:1.3}

/* The download prompt remains readable without covering the fixed navigation. */
body .sx-bottom .sx-app{box-sizing:border-box;display:flex;align-items:center;gap:8px;height:var(--sx-app-height);padding:5px 10px;background:#1b1b18;border-top:1px solid #343126;color:#f7f7f4}
body .sx-bottom .sx-app-close{display:grid;place-items:center;flex:0 0 18px;width:18px;height:28px;padding:0;border:0;background:none;color:#b9b9af;font-size:20px;line-height:1;cursor:pointer}
body .sx-bottom .sx-app img{flex:0 0 36px;width:36px;height:36px;border-radius:9px;object-fit:contain}
body .sx-bottom .sx-app span{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0;line-height:1.2}
body .sx-bottom .sx-app strong{overflow:hidden;color:#f7f7f4;font-size:12px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
body .sx-bottom .sx-app small{overflow:hidden;color:#aaa99f;font-size:10px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
body .sx-bottom .sx-app>a{box-sizing:border-box;display:grid;place-items:center;flex:0 0 auto;min-width:72px;min-height:31px;padding:6px 9px;border-radius:17px;background:#ffe77b;color:#15130c!important;font-size:11px;font-weight:800;text-decoration:none;white-space:nowrap}
body.sx-browse-page:has(.sx-app) .sx-shell{padding-bottom:calc(var(--sx-nav-height) + var(--sx-app-height))}
body.sx-browse-page:not(:has(.sx-app)) .sx-shell{padding-bottom:var(--sx-nav-height)}
body.sx-detail-page:has(.sx-app) .sx-detail-bottom{bottom:calc(var(--sx-nav-height) + var(--sx-app-height))}
body.sx-detail-page:not(:has(.sx-app)) .sx-detail-bottom{bottom:var(--sx-nav-height)}
body.sx-page.sx-feed-page:has(.sx-app) .sx-feed-frame{height:calc(100dvh - var(--sx-nav-height) - var(--sx-app-height))}
body.sx-page.sx-feed-page:not(:has(.sx-app)) .sx-feed-frame{height:calc(100dvh - var(--sx-nav-height))}

@media(max-width:340px){body .sx-bottom .sx-app{gap:6px;padding-inline:7px}body .sx-bottom .sx-app>a{min-width:66px;padding-inline:7px}body.sx-page .sx-drama-masonry{gap:8px}}