.bonus-page[hidden]{display:none!important}

body.is-bonus-page .results-banner-wrap,
body.is-bonus-page .tools,
body.is-bonus-page #welcomePage,
body.is-bonus-page #welcomeDetailPage,
body.is-bonus-page #foreignPage,
body.is-bonus-page #commentPage,
body.is-bonus-page #rowWrap,
body.is-bonus-page #gridWrap,
body.is-bonus-page .home-modern-hero,
body.is-bonus-page .recent-comments-panel{display:none!important}

.bonus-nav-link{
  color:#eef4ff;
  text-decoration:none;
  transition:border-color .18s ease, transform .18s ease, color .18s ease;
}
.bonus-nav-link:hover{border-color:rgba(94,234,212,.48);color:#fff;transform:translateY(-1px)}

.bonus-page{margin:8px 0 28px}
.bonus-hero{
  position:relative;
  overflow:hidden;
  padding:22px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:20px;
  background:
    radial-gradient(560px 240px at 5% 0%, rgba(94,234,212,.20), transparent 65%),
    radial-gradient(500px 260px at 100% 0%, rgba(124,156,255,.20), transparent 65%),
    linear-gradient(145deg, rgba(17,30,51,.96), rgba(9,18,33,.88));
  box-shadow:var(--shadow);
}
.bonus-hero::after{
  content:"";
  position:absolute;
  width:230px;height:230px;border-radius:50%;
  right:-85px;bottom:-130px;
  border:42px solid rgba(250,204,21,.08);
}
.bonus-hero-copy{position:relative;z-index:1;max-width:780px}
.bonus-eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  margin-bottom:10px;padding:7px 11px;border-radius:999px;
  color:#bfffee;background:rgba(22,242,166,.10);
  border:1px solid rgba(22,242,166,.24);
  font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
}
.bonus-hero h2{margin:0;font-size:clamp(27px,4vw,44px);line-height:1.04;letter-spacing:-.035em}
.bonus-hero p{margin:13px 0 0;color:#b9c7e2;line-height:1.65;max-width:720px}
.bonus-route-tabs{
  position:relative;z-index:1;
  display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;
}
.bonus-route-tab{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:44px;padding:10px 15px;border-radius:14px;
  color:#c7d4ed;text-decoration:none;font-weight:800;font-size:13px;
  border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.055);
}
.bonus-route-tab.is-active{
  color:#07111f;background:linear-gradient(135deg,#5eead4,#16f2a6);
  border-color:transparent;box-shadow:0 10px 24px rgba(22,242,166,.18);
}

.bonus-toolbar{
  position:relative;z-index:2;
  margin:14px 0;padding:13px;
  border:1px solid rgba(255,255,255,.13);border-radius:20px;
  background:rgba(10,21,38,.96);
  box-shadow:0 12px 34px rgba(0,0,0,.28);
}
.bonus-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}
.bonus-search{
  display:flex;align-items:center;gap:9px;min-height:48px;padding:0 14px;
  border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.055);
}
.bonus-search svg{width:19px;height:19px;color:#92a7ca;flex:0 0 auto}
.bonus-search input{
  width:100%;border:0;outline:0;background:transparent;color:#fff;
  font:inherit;font-size:15px;min-width:0;
}
.bonus-filter-toggle,.bonus-clear,.bonus-load-more{
  border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.07);
  color:#edf4ff;border-radius:14px;font:inherit;font-weight:800;cursor:pointer;
}
.bonus-filter-toggle{min-height:48px;padding:0 15px}
.bonus-filter-toggle.is-active{border-color:rgba(94,234,212,.55);color:#87f7df}
.bonus-quick-filters{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  margin-top:10px;padding-bottom:2px;
}
.bonus-quick-filters::-webkit-scrollbar{display:none}
.bonus-chip{
  flex:0 0 auto;border:1px solid rgba(255,255,255,.13);border-radius:999px;
  padding:8px 12px;background:rgba(255,255,255,.045);color:#b9c7e2;
  font:inherit;font-size:12px;font-weight:800;cursor:pointer;
}
.bonus-chip.is-active{background:rgba(94,234,212,.14);border-color:rgba(94,234,212,.46);color:#bfffee}
.bonus-filter-panel{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
  margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.10);
}
.bonus-filter-panel[hidden]{display:none}
.bonus-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.bonus-field span{color:#91a5c8;font-size:11px;font-weight:800}
.bonus-field select,.bonus-field input{
  width:100%;height:43px;border:1px solid rgba(255,255,255,.13);border-radius:12px;
  background:#0d192c;color:#eef4ff;padding:0 11px;font:inherit;font-size:13px;outline:0;
}
.bonus-field select:focus,.bonus-field input:focus{border-color:rgba(94,234,212,.56)}
.bonus-filter-actions{display:flex;align-items:flex-end}
.bonus-clear{height:43px;width:100%;padding:0 12px;color:#ffb4cf}

.bonus-summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:12px 0 14px;padding:12px 14px;color:#9fb0cf;font-size:13px;
  border:1px solid rgba(255,255,255,.13);border-radius:20px;
  background:linear-gradient(145deg,rgba(17,30,51,.9),rgba(9,18,33,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.bonus-summary strong{color:#fff}
.bonus-data-note{font-size:11px;text-align:right}

.bonus-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bonus-card{
  min-width:0;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);border-radius:18px;
  background:linear-gradient(155deg,rgba(17,28,48,.94),rgba(9,18,33,.96));
  box-shadow:0 14px 35px rgba(0,0,0,.22);
  content-visibility:auto;
  contain-intrinsic-size:330px;
}
.bonus-card.is-priority{border-color:rgba(250,204,21,.26)}
.bonus-card-head{
  display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:center;
  padding:13px 13px 9px;
}
.bonus-card-logo{
  width:48px;height:48px;display:block;object-fit:contain;padding:4px;
  border:1px solid rgba(255,255,255,.13);border-radius:13px;background:rgba(255,255,255,.94);
}
.bonus-card-site{min-width:0}
.bonus-card-site strong{display:block;color:#fff;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bonus-card-site span{display:block;margin-top:4px;color:#8497bb;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bonus-priority-badge{
  grid-column:1 / -1;width:max-content;margin-top:-2px;padding:4px 7px;border-radius:999px;background:rgba(250,204,21,.11);
  border:1px solid rgba(250,204,21,.25);color:#ffe777;font-size:10px;font-weight:900;
}
.bonus-card-body{padding:0 13px 13px}
.bonus-card h3{margin:0;min-height:42px;font-size:14px;line-height:1.38;color:#edf4ff}
.bonus-badges{display:flex;gap:6px;flex-wrap:wrap;margin:11px 0}
.bonus-badge{
  padding:6px 8px;border-radius:9px;background:rgba(124,156,255,.11);
  border:1px solid rgba(124,156,255,.22);color:#cbd7ff;font-size:10.5px;font-weight:850;
}
.bonus-badge.good{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.26);color:#9af0b4}
.bonus-badge.warn{background:rgba(250,204,21,.10);border-color:rgba(250,204,21,.24);color:#ffe777}
.bonus-badge.area{background:rgba(94,234,212,.12);border-color:rgba(94,234,212,.28);color:#bfffee}
.bonus-facts{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:11px 0;
}
.bonus-fact{
  min-width:0;padding:8px;border-radius:10px;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
}
.bonus-fact small{display:block;color:#8195b8;font-size:10px;margin-bottom:4px}
.bonus-fact strong{display:block;color:#f6f8ff;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bonus-card-actions{display:flex;gap:8px;margin-top:12px}
.bonus-site-link,.bonus-details-toggle{
  flex:1;display:flex;align-items:center;justify-content:center;min-height:38px;
  border-radius:12px;text-decoration:none;font-size:12px;font-weight:900;
}
.bonus-site-link{color:#06111d;background:linear-gradient(135deg,#5eead4,#16f2a6)}
.bonus-details-toggle{color:#dce6fa;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.055);cursor:pointer}
.bonus-details{display:none;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.09)}
.bonus-card.is-open .bonus-details{display:block}
.bonus-details h4{margin:12px 0 6px;font-size:12px;color:#bfffee}
.bonus-details p,.bonus-details li{color:#aebdda;font-size:12px;line-height:1.55}
.bonus-details p{margin:0}
.bonus-details ul{margin:0;padding-left:18px}
.bonus-details li+li{margin-top:5px}
.bonus-ambiguity{margin-top:10px;padding:10px;border-radius:12px;background:rgba(250,204,21,.075);border:1px solid rgba(250,204,21,.16)}
.bonus-load-wrap{text-align:center;margin:18px 0 4px}
.bonus-load-more{min-height:48px;padding:0 22px}
.bonus-empty{grid-column:1/-1;padding:28px;text-align:center;border:1px dashed rgba(255,255,255,.16);border-radius:20px;color:#9fb0cf}

@media(max-width:1080px) and (min-width:821px){
  .bonus-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:820px){
  .top-right{flex-wrap:wrap}
  .bonus-nav-link{display:none}
  .bonus-page{margin-top:2px}
  .bonus-hero{padding:20px 17px;border-radius:21px}
  .bonus-hero h2{font-size:29px}
  .bonus-hero p{font-size:13px;line-height:1.55}
  .bonus-route-tabs{display:grid;grid-template-columns:1fr 1fr}
  .bonus-route-tab{padding:9px 7px;font-size:12px}
  .bonus-toolbar{margin:10px -5px 12px;padding:10px;border-radius:17px}
  .bonus-search-row{grid-template-columns:minmax(0,1fr) 50px}
  .bonus-filter-toggle{width:50px;padding:0;font-size:0}
  .bonus-filter-toggle::before{content:"☰";font-size:18px}
  .bonus-filter-panel{grid-template-columns:repeat(2,minmax(0,1fr));max-height:56vh;overflow:auto}
  .bonus-summary{align-items:flex-start;margin-top:9px}
  .bonus-data-note{max-width:48%;font-size:10px}
  .bonus-grid{grid-template-columns:1fr;gap:10px}
  .bonus-card{border-radius:18px}
  .bonus-card-head{grid-template-columns:52px minmax(0,1fr) auto;padding:13px 13px 10px;gap:10px}
  .bonus-card-logo{width:52px;height:52px;border-radius:14px}
  .bonus-card-body{padding:0 13px 13px}
  .bonus-card h3{min-height:0;font-size:15px}
  .bonus-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bonus-card-actions{position:sticky;bottom:6px}
}

@media(max-width:390px){
  .bonus-filter-panel{grid-template-columns:1fr 1fr;gap:8px}
  .bonus-field span{font-size:10px}
  .bonus-facts{gap:6px}
  .bonus-fact{padding:9px 8px}
  .bonus-card-actions{gap:6px}
}
