/* ===== Minimal, scoped, high-contrast baseline ===== */
.bt-scope-root, .bt-scope { font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; }
.bt-scope body, .bt-scope-root { background: #0b0e16; color: #e9eefc; }

/* Layout */
.bt-scope .wrap{max-width:1100px;margin:0 auto;padding:0 18px}

/* Header */
.bt-scope header{position:sticky;top:0;z-index:50;background:#0b0e16;border-bottom:1px solid #2a3248}
.bt-scope #bt-header{display:flex;align-items:center;gap:12px;padding:12px 0}
.bt-scope #bt-header .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#e9eefc}
.bt-scope #bt-header .badge{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#1a57b0;color:#fff;font-weight:800}
.bt-scope #bt-header .title{font-weight:800}
.bt-scope #bt-header .spacer{flex:1}

/* Primary nav — simple dark pills */
.bt-scope nav.primary-nav{display:flex;gap:10px}
.bt-scope nav.primary-nav a{
  display:inline-block;padding:8px 10px;border-radius:10px;text-decoration:none;
  background:#131826;color:#e9eefc;border:1px solid #3a4664;line-height:1
}
.bt-scope nav.primary-nav a:hover{background:#1a2236}

/* CTA button (blue → red gradient) */
.bt-scope .cta{display:inline-block;text-decoration:none;color:#fff;background:linear-gradient(135deg,#0a3c7d,#c8102e);padding:10px 14px;border-radius:10px;font-weight:700}

/* Hero */
.bt-scope .hero{padding:24px 0 10px}
.bt-scope .hero h1{margin:0 0 6px;font-size:clamp(22px,3vw,34px)}
.bt-scope .hero p{margin:0;color:#b8c2dc}

/* Filter bar */
.bt-scope .bar{position:sticky;top:62px;z-index:45;background:#0f1424;border-bottom:1px solid #2a3248;padding:10px 0}
.bt-scope .filters{display:flex;gap:10px;align-items:center;overflow:auto}
.bt-scope .chip{white-space:nowrap;padding:8px 12px;border-radius:999px;font-weight:600;cursor:pointer;background:#131826;color:#e9eefc;border:1px solid #3a4664}
.bt-scope .chip.active{background:#1a57b0;border-color:#1a57b0}

/* Search */
.bt-scope .search{margin-left:auto;display:flex;align-items:center;gap:8px;background:#131826;border:1px solid #3a4664;padding:8px 10px;border-radius:10px}
.bt-scope .search input{border:0;outline:0;background:transparent;color:#e9eefc}

/* List items */
.bt-scope .list{display:grid;gap:14px;margin:16px 0 28px}
.bt-scope .item{
  display:grid;grid-template-columns:72px 160px 1fr auto;gap:14px;align-items:center;
  padding:12px;border-radius:14px;background:#151b2b;border:1px solid #2a3248;box-shadow:0 8px 18px rgba(0,0,0,.25)
}
@media (max-width:900px){ .bt-scope .item{grid-template-columns:56px 140px 1fr} }
@media (max-width:560px){ .bt-scope .item{grid-template-columns:56px 120px 1fr} }

.bt-scope .rank{display:grid;place-items:center;width:56px;height:56px;border-radius:12px;font-weight:900;font-size:18px;color:#fff;background:#c8102e}
.bt-scope .thumb{display:block;width:160px;height:100px;border-radius:10px;overflow:hidden;background:#0b0e13;border:1px solid #2a3248}
.bt-scope .thumb img{width:100%;height:100%;object-fit:cover;display:block}

.bt-scope .main{min-width:0}
.bt-scope .name{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.bt-scope .name h3{margin:0;font-size:18px}
.bt-scope .tag{font-size:12px;padding:4px 8px;border-radius:999px;background:#131826;border:1px solid #3a4664}
.bt-scope .desc{color:#b8c2dc;margin:0 0 10px}
.bt-scope .meta{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;color:#b8c2dc}
.bt-scope .score{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:#131826;border:1px solid #3a4664}

.bt-scope .badges{display:flex;gap:6px;flex-wrap:wrap}
.bt-scope .b{font-size:12px;padding:4px 8px;border-radius:999px;color:#fff;background:#1a57b0}
.bt-scope .b.sponsored{background:#ff5a76}

.bt-scope .aside{display:flex;flex-direction:column;gap:8px}
.bt-scope .btn{display:inline-block;text-align:center;font-weight:800;border-radius:10px;padding:10px 12px;background:#131826;color:#e9eefc;border:1px solid #3a4664}
.bt-scope .btn.primary{background:linear-gradient(135deg,#0a3c7d,#c8102e);color:#fff;border:0}

.bt-scope .toggle{appearance:none;border:0;background:transparent;color:#b8c2dc;cursor:pointer;text-decoration:underline;padding:0}

.bt-scope .details{display:none;grid-column:3/-1}
.bt-scope .split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){ .bt-scope .split{grid-template-columns:1fr} }
.bt-scope .panel{background:#131826;border:1px solid #3a4664;border-radius:10px;padding:12px}
.bt-scope .panel h4{margin:0 0 8px;font-size:14px}

.bt-scope footer{color:#b8c2dc;border-top:1px solid #2a3248;padding:20px 0 40px}
/* ===== Mobile responsiveness hard-fix (add at end) ===== */

/* 1) Make the header/nav mobile-friendly */
@media (max-width: 900px){
  .bt-scope #bt-header{ gap:8px }
  .bt-scope #bt-header .title{ font-size:16px }
  .bt-scope nav.primary-nav{
    display:flex; gap:8px; overflow-x:auto; padding-bottom:2px;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
  .bt-scope nav.primary-nav a{ white-space:nowrap }
  .bt-scope .cta{ padding:8px 12px; font-size:14px }
}

/* 2) Container padding + fluid text */
@media (max-width: 640px){
  .bt-scope .wrap{ padding:0 12px }
  .bt-scope .hero h1{ font-size:clamp(18px, 6vw, 28px) }
  .bt-scope .hero p{ font-size:14px }
}

/* 3) Filters: chips scrollable and tappable */
.bt-scope .filters{ gap:8px }
.bt-scope .chip{ font-size:14px; padding:8px 12px }
@media (max-width: 560px){
  .bt-scope .bar{ top:56px } /* account for shorter header on tiny viewports */
  .bt-scope .filters{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin }
  .bt-scope .search{ display:none } /* hide search on very small screens; optional */
}

/* 4) List grid: collapse columns on small screens */
@media (max-width: 900px){
  .bt-scope .item{
    grid-template-columns: 56px 140px 1fr; /* rank | thumb | content */
    align-items:start;
  }
}
@media (max-width: 560px){
  .bt-scope .item{
    grid-template-columns: 48px 1fr;        /* rank | main */
    grid-auto-rows: auto;
  }
  .bt-scope .thumb{ display:none }          /* hide thumb on very small screens (cleaner) */
  .bt-scope .rank{
    width:48px; height:48px; border-radius:10px; font-size:16px;
  }
  .bt-scope .name h3{ font-size:16px }
  .bt-scope .desc{ font-size:14px }
}

/* 5) Buttons area: stack on mobile, no overflow */
.bt-scope .aside{ gap:8px }
@media (max-width: 900px){
  .bt-scope .aside{ grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap }
  .bt-scope .btn{ flex:1 1 140px }      /* grow but not too tiny */
}
@media (max-width: 560px){
  .bt-scope .aside{ flex-direction: column }
  .bt-scope .btn{ width:100% }          /* full-width buttons on small phones */
}

/* 6) Details drawer fills full width under main content on mobile */
@media (max-width: 560px){
  .bt-scope .details{ grid-column: 1 / -1; margin-top:8px }
  .bt-scope .split{ grid-template-columns:1fr; gap:10px }
}

/* 7) Prevent long words/URLs from breaking layout */
.bt-scope .main, .bt-scope .desc, .bt-scope .panel, .bt-scope .meta{ 
  min-width:0; overflow-wrap:anywhere; word-break:normal;
}

/* 8) Images always shrink to container */
.bt-scope img{ max-width:100%; height:auto }

/* 9) Inputs shouldn’t trigger iOS zoom on tap */
.bt-scope input, .bt-scope button{ font-size:16px }

/* 10) Slightly tighter vertical rhythm on mobile */
@media (max-width: 560px){
  .bt-scope .item{ padding:10px; gap:10px; box-shadow: 0 6px 14px rgba(0,0,0,.25) }
  .bt-scope .score{ padding:6px 8px; font-size:13px }
  .bt-scope .tag{ padding:3px 7px; font-size:11px }
  .bt-scope .b{ padding:3px 7px; font-size:11px }
}
/* ===== Fix for giant "Read Review" / "Visit Site" buttons ===== */

/* 1. Ensure .aside behaves like a vertical stack, not stretched flex */
.bt-scope .aside{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
}

/* 2. Reset the buttons’ sizing */
.bt-scope .aside .btn{
  width: auto;
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  padding: 10px 14px;
  text-align: center;
}

/* 3. Mobile: stack full-width if needed, but keep proportionate text */
@media (max-width: 560px){
  .bt-scope .aside{ flex-direction: column; align-items: stretch; }
  .bt-scope .aside .btn{ width: 100%; font-size: 16px; }
}

/* 4. Optional – make them look balanced side-by-side on desktop */
@media (min-width: 561px){
  .bt-scope .aside .btn{
    min-width: 130px;
  }
}