:root {
  --tw-font-name: 20px;
  --tw-font-bonus: 18px;
  --tw-font-bonus-small: 14px;
  --tw-font-rating: 16px;
  --tw-font-score: 18px;
  --tw-font-btn: 16px;

  --tw-align-name: left;
  --tw-align-bonus: left;
  --tw-align-rating: center;

  --tw-color-muted: #666;
  --tw-bg: #ffffff;
  --tw-text: #111827;
  --tw-muted: #6b7280;
  --tw-accent: #e11d48;
  --tw-accent-contrast: #ffffff;
  --tw-secondary: #0ea5e9;
  --tw-secondary-contrast: #ffffff;
  --tw-card-bg: #f9fafb;
  --tw-radius: 14px;
  --tw-border: #e5e7eb;
}

.tw-row {
  position: relative;
  display: grid;
  grid-template-columns: 110px 1.1fr 1.6fr 160px 230px;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--tw-bg);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius);
  transition: background .2s, box-shadow .2s, transform .12s;
  margin: 18px 0 12px;
  color: var(--tw-text) !important;
}
.tw-row:hover { background: var(--tw-card-bg); }

.tw-rank {
  position: absolute;
  left: -12px;
  top: -8px;
  width: 44px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  z-index: 2;
  pointer-events: none;
}
.tw-rank--1 { background: #dc2626; }
.tw-rank--2 { background: #16a34a; }
.tw-rank--3 { background: #2563eb; }

.tw-logo {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background: #fff;
  border: 1px dashed var(--tw-border);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.tw-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.tw-name {
  font-size: var(--tw-font-name);
  text-align: var(--tw-align-name);
  font-weight: 700;
  line-height: 1.3;
  color: var(--tw-text) !important;
}

.tw-bonus {
  font-size: var(--tw-font-bonus);
  text-align: var(--tw-align-bonus);
  font-weight: 600;
  line-height: 1.35;
  color: var(--tw-text) !important;
}
.tw-bonus small {
  display: block;
  font-size: var(--tw-font-bonus-small);
  color: var(--tw-muted) !important;
  font-weight: 500;
}

.tw-features {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--tw-text);
}
.tw-features li {
  margin: 4px 0;
  list-style: none;
}
.tw-features li::before {
  content: "✔ ";
  margin-right: 4px;
  color: #16a34a;
}

.tw-rating {
  font-size: var(--tw-font-rating);
  text-align: var(--tw-align-rating);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: var(--tw-text) !important;
}
.tw-score {
  font-size: var(--tw-font-score);
  font-weight: 700;
  color: var(--tw-text) !important;
}

.tw-stars {
  position: relative;
  display: inline-block;
  width: 110px;
  height: 18px;
  background: linear-gradient(90deg,#d1d5db 50%,#d1d5db 50%) left/100% 100% no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 110 20\'><g fill=\'%23000\'><path d=\'M10 1.5l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.9-5.4 2.9 1-6L1.3 7.9l6-.9z\'/><path d=\'M32 1.5l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.9-5.4 2.9 1-6-4.3-4.2 6-.9z\'/><path d=\'M54 1.5l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.9-5.4 2.9 1-6-4.3-4.2 6-.9z\'/><path d=\'M76 1.5l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.9-5.4 2.9 1-6-4.3-4.2 6-.9z\'/><path d=\'M98 1.5l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.9-5.4 2.9 1-6-4.3-4.2 6-.9z\'/></g></svg>') center/contain no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 110 20\'><g fill=\'%23000\'><path d=\'M10 1.5l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.9-5.4 2.9 1-6-4.3-4.2 6-.9z\'/><path d=\'M32 1.5l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.9-5.4 2.9 1-6-4.3-4.2 6-.9z\'/><path d=\'M54 1.5l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.9-5.4 2.9 1-6-4.3-4.2 6-.9z\'/><path d=\'M76 1.5l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.9-5.4 2.9 1-6-4.3-4.2 6-.9z\'/><path d=\'M98 1.5l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.9-5.4 2.9 1-6-4.3-4.2 6-.9z\'/></g></svg>') center/contain no-repeat;
  overflow: hidden;
}
.tw-stars::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,#f59e0b 0 100%);
  width: var(--fill,0%);
}

.tw-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tw-btn {
  appearance: none;
  border: none;
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 700;
  font-size: var(--tw-font-btn);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  transition: transform .06s, filter .15s, opacity .15s;
  color: inherit;
  text-decoration: none !important;
}
.tw-btn:active { transform: translateY(1px) scale(.99); }

.tw-btn--primary,
.tw-btn--primary:link,
.tw-btn--primary:visited,
.tw-btn--primary:hover,
.tw-btn--primary:focus,
.tw-btn--primary:active {
  background: var(--tw-accent) !important;
  color: var(--tw-accent-contrast) !important;
}
.tw-btn--secondary,
.tw-btn--secondary:link,
.tw-btn--secondary:visited,
.tw-btn--secondary:hover,
.tw-btn--secondary:focus,
.tw-btn--secondary:active {
  background: var(--tw-secondary) !important;
  color: var(--tw-secondary-contrast) !important;
}
.tw-actions .tw-btn *,
.tw-actions .tw-btn:hover *,
.tw-actions .tw-btn:focus *,
.tw-actions .tw-btn:active * {
  color: inherit !important;
}

.tw-btn--primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 16px rgba(225, 29, 72, .35);
}
.tw-btn--secondary:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 16px rgba(14, 165, 233, .35);
}

@media (max-width:860px){
  .tw-row {
    grid-template-columns: 92px 1fr;
    grid-template-areas:
      "logo name"
      "logo bonus"
      "rating rating"
      "actions actions";
    row-gap: 10px;
    padding: 14px;
    background: var(--tw-card-bg);
    border: 1px solid var(--tw-border);
    color: var(--tw-text) !important;
  }
  .tw-logo { grid-area: logo; width: 100px; height: 100px; }
  .tw-name { grid-area: name; font-size: calc(var(--tw-font-name) - 2px); }
  .tw-bonus { grid-area: bonus; font-size: calc(var(--tw-font-bonus) - 2px); }
  .tw-rating { grid-area: rating; }
  .tw-actions { grid-area: actions; }
  .tw-rank {
    left: -10px;
    top: -6px;
    width: 40px;
    height: 44px;
    border-radius: 12px;
  }
}