static/fm_fix.css

/* v2 - Force override broken inline CSS (.fm-league missing } + -wall-img-count bad selector) */
.featured-match{margin:6px 4px!important;background:linear-gradient(135deg,#1a2a1f,#0d1117)!important;border:1px solid #2d8659!important;border-radius:10px!important;padding:12px!important;cursor:pointer!important}
.fm-league{text-align:center!important;color:#5cb87a!important;font-size:9px!important;font-weight:700!important;text-transform:uppercase!important;display:block!important}
.fm-teams{display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;margin-top:6px!important}
.fm-team{flex:1!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:4px!important}
.fm-team img{width:32px!important;height:32px!important;object-fit:contain!important}
.fm-team span{font-size:10px!important;color:#ccc!important;text-align:center!important}
.fm-score{font-size:22px!important;font-weight:900!important;min-width:60px!important;text-align:center!important;color:#fff!important}
.fm-status{text-align:center!important;margin-top:6px!important;font-size:9px!important;color:#e74c3c!important;font-weight:700!important}
.fm-status.upcoming{color:#f0c040!important}
.ai-compose{margin:6px 4px!important;background:#141414!important;border:1px solid #2a2a2a!important;border-radius:10px!important;padding:10px!important}
.ai-compose-title{font-size:13px!important;font-weight:800!important;color:#5cb87a!important;margin-bottom:8px!important}
.ai-compose-row{display:flex!important;gap:6px!important;margin-top:6px!important}
.ai-compose input{flex:1!important;background:#222!important;border:1px solid #333!important;color:#eee!important;border-radius:18px!important;padding:9px 12px!important;font-size:12px!important;min-width:0!important}
.ai-compose button{background:#2d8659!important;border:0!important;color:#fff!important;border-radius:18px!important;padding:9px 12px!important;font-size:11px!important;font-weight:700!important;cursor:pointer!important;white-space:nowrap!important}
.ai-compose button.secondary{background:#333!important}
.hot-topic-row{display:flex!important;gap:6px!important;overflow-x:auto!important;padding:4px 0!important}
.hot-chip{flex:0 0 auto!important;background:#222!important;border:1px solid #333!important;color:#ddd!important;border-radius:16px!important;padding:5px 10px!important;font-size:11px!important;cursor:pointer!important;white-space:nowrap!important}
.hashtag-sources{margin:8px 4px!important;background:#1a1a1a!important;border:1px solid #2a2a2a!important;border-radius:10px!important;padding:10px!important}
.hashtag-sources h3{font-size:13px!important;color:#5cb87a!important;margin-bottom:8px!important}
.hashtag-src-item{display:flex!important;gap:8px!important;padding:8px!important;background:#202020!important;border-radius:8px!important;margin:6px 0!important;cursor:pointer!important}
.hashtag-src-img{flex:0 0 80px!important;aspect-ratio:16/9!important;background:#333!important;border-radius:6px!important;overflow:hidden!important}
.hashtag-src-img img{width:100%!important;height:100%!important;object-fit:cover!important}
.hashtag-src-text{flex:1!important;min-width:0!important}
.hashtag-src-title{font-size:12px!important;font-weight:700!important;color:#eee!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
.hashtag-src-via{font-size:10px!important;color:#888!important;margin-top:2px!important}
.hashtag-rewrite-btn{width:100%!important;margin-top:8px!important;background:#2d8659!important;border:0!important;color:#fff!important;padding:9px!important;border-radius:10px!important;font-size:12px!important;font-weight:700!important;cursor:pointer!important}
.hashtag-load-more{width:100%!important;margin-top:8px!important;background:#222!important;border:1px solid #333!important;color:#ccc!important;padding:9px!important;border-radius:10px!important;font-size:12px!important;cursor:pointer!important}
.hashtag-loading{display:flex!important;align-items:center!important;gap:8px!important;padding:12px!important;color:#888!important;font-size:12px!important}
.hashtag-spinner{width:16px!important;height:16px!important;border:2px solid #333!important;border-top-color:#5cb87a!important;border-radius:50%!important;animation:ht-spin .8s linear infinite!important}
@keyframes ht-spin{to{transform:rotate(360deg)}}
.wall-img-count{position:absolute;bottom:4px;left:4px;background:rgba(0,0,0,.7);color:#fff;font-size:9px;padding:1px 5px;border-radius:4px}
#progress-toast{position:fixed!important;bottom:70px!important;left:50%!important;transform:translateX(-50%)!important;background:#2d8659!important;color:#fff!important;padding:10px 20px!important;border-radius:20px!important;font-size:12px!important;z-index:99998!important;box-shadow:0 4px 12px rgba(0,0,0,.4)!important;display:none;white-space:nowrap!important}
/* === ARTICLE / REWRITE VIEW FIX === */
.article-view{padding:12px 8px 40px!important;max-width:760px!important;margin:0 auto!important}
.article-title{font-size:18px!important;font-weight:800!important;line-height:1.3!important;margin-bottom:8px!important;color:#fff!important}
.article-p{font-size:14px!important;line-height:1.7!important;color:#ccc!important;margin-bottom:10px!important}
.article-img{width:100%!important;border-radius:6px!important;margin:10px 0!important}
.article-actions{display:flex!important;gap:8px!important;flex-wrap:wrap!important;border-top:1px solid #333!important;margin-top:16px!important;padding-top:10px!important}
.article-actions button{background:#1a1a1a!important;border:1px solid #333!important;color:#ccc!important;padding:7px 12px!important;border-radius:14px!important;font-size:11px!important;cursor:pointer!important}
.article-actions button.primary{background:#2d8659!important;border-color:#2d8659!important;color:#fff!important}
.badge-ai{background:#2d8659!important;color:#fff!important;font-size:8px!important;padding:1px 5px!important;border-radius:3px!important;font-weight:700!important;display:inline-block!important}
/* TTS voice selector */
.tts-selector{margin:12px 0!important;padding:10px!important;background:#1a1a1a!important;border:1px solid #2a2a2a!important;border-radius:10px!important;width:100%!important}
.tts-selector-label{font-size:12px!important;font-weight:700!important;color:#5cb87a!important;margin-bottom:8px!important}
.tts-voice-groups{display:flex!important;flex-direction:column!important;gap:8px!important;max-height:280px!important;overflow-y:auto!important}
.tts-voice-group{background:#1e1e1e!important;border:1px solid #2a2a2a!important;border-radius:8px!important;padding:6px 8px!important}
.tts-voice-group-label{font-size:10px!important;font-weight:700!important;color:#888!important;margin-bottom:4px!important;text-transform:uppercase!important}
.tts-voice-btns{display:flex!important;gap:6px!important;flex-wrap:wrap!important}
.tts-voice-btn{background:#222!important;border:1px solid #333!important;color:#ddd!important;border-radius:12px!important;padding:6px 10px!important;font-size:10px!important;cursor:pointer!important;white-space:nowrap!important}
.tts-voice-btn.active{background:#2d8659!important;border-color:#2d8659!important;color:#fff!important;font-weight:700!important}
.tts-speed-row{display:flex!important;align-items:center!important;gap:8px!important;font-size:12px!important;color:#aaa!important;margin-top:10px!important}
.tts-speed-row select{flex:1!important;background:#222!important;border:1px solid #333!important;color:#eee!important;border-radius:14px!important;padding:6px 10px!important;font-size:11px!important}
/* Image gallery */
.article-image-gallery{margin:10px 0!important}
.article-hero-img{width:100%!important;border-radius:8px!important;margin-bottom:6px!important}
.gallery-thumbs{display:flex!important;gap:6px!important;overflow-x:auto!important;padding-bottom:4px!important}
.gallery-thumb{flex:0 0 100px!important;aspect-ratio:16/9!important;border-radius:6px!important;overflow:hidden!important;background:#222!important;cursor:pointer!important}
.gallery-thumb img{width:100%!important;height:100%!important;object-fit:cover!important}
/* === BADGE FIX (article AI badge) === */
.badge{display:inline-block!important;font-size:8px!important;padding:1px 5px!important;border-radius:3px!important;font-weight:700!important;vertical-align:middle!important}
.badge.badge-ai,.badge-ai{background:#2d8659!important;color:#fff!important}
/* article-view top spacing so badge+title not clipped */
.article-view .badge{margin-bottom:6px!important}
.article-view .tts-selector{width:auto!important;display:block!important}

/* ============================================================
   1:1 ("ratio-square") view for normal horizontal Dan tri / SKDS videos.
   Spec: fill 100% of the slide HEIGHT, crop the excess WIDTH (cut left/right).
   A YouTube <iframe> ignores object-fit, so instead of letterboxing we size the
   iframe to FULL slide height and 16:9 width (177.78vh -> wider than a phone),
   center it, and let the slide's overflow:hidden clip the sides.
   The #tiktok-feed ancestor raises specificity above app_v2.js's injected
   `.tiktok-slide.ratio-square>iframe` rule, so this wins regardless of CSS
   load order (not just !important + source order).
   ============================================================ */
#tiktok-feed .tiktok-slide.ratio-square{position:relative!important;overflow:hidden!important;display:block!important;background:#000!important}
#tiktok-feed .tiktok-slide.ratio-square>iframe,
#tiktok-feed .tiktok-slide.ratio-square>video{
  position:absolute!important;
  top:50%!important;
  left:50%!important;
  transform:translate(-50%,-50%)!important;
  height:100%!important;          /* 100% full height */
  width:177.78vh!important;       /* 16/9 of the height -> overflow on the sides */
  min-width:100%!important;       /* never narrower than the screen */
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;     /* affects <video>; harmless for <iframe> */
}
/* Fallback copy at plain specificity too (in case the feed id ever differs) */
.tiktok-slide.ratio-square{position:relative!important;overflow:hidden!important;display:block!important;background:#000!important}
.tiktok-slide.ratio-square>iframe,
.tiktok-slide.ratio-square>video{
  position:absolute!important;top:50%!important;left:50%!important;
  transform:translate(-50%,-50%)!important;
  height:100%!important;width:177.78vh!important;
  min-width:100%!important;max-width:none!important;max-height:none!important;
  object-fit:cover!important;
}