* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: radial-gradient(circle at top, #f4fff3 0%, #eef4f9 52%, #f6f8fb 100%);
  color: #16232f;
}
.client-wrap {
  max-width: 1120px;
  margin: 28px auto;
  padding: 0 16px 30px;
  display: grid;
  gap: 16px;
}
.card {
  background: #fff;
  border: 1px solid #e5ecf3;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 12px 32px rgba(14, 24, 39, 0.07);
}
.hero {
  background: linear-gradient(140deg, #0d2d1f, #13543e 45%, #167a57);
  color: #fff;
}
.kicker {
  margin: 0;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  opacity: 0.78;
}
h1, h2 { margin: 0 0 10px; }
.subtitle { margin-top: 0; opacity: 0.92; }
.quick-nav {
  margin: 16px 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.quick-nav a {
  color: #0b2b1d;
  background: #d6f4e2;
  padding: 9px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
}
.quick-nav a:hover {
  background: #c1efd4;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.ghost-link {
  display: inline-block;
  margin-top: 8px;
  color: #d8f8e7;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.ghost-btn {
  background: transparent;
  border: 1px solid #d8f8e7;
  color: #d8f8e7;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
}
.ghost-btn:hover {
  background: rgba(216, 248, 231, 0.12);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: end;
}
label { display: block; font-weight: 600; margin-bottom: 6px; }
input, select, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #cad6e4;
  border-radius: 8px;
}
button, .btn {
  border: 0;
  border-radius: 8px;
  background: #16c01f;
  color: #fff;
  padding: 10px 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
}
button:hover, .btn:hover { filter: brightness(0.95); }
.error { color: #c22c2c; min-height: 18px; }
.hidden { display: none; }
.result {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: #f8fbff;
  border: 1px solid #dfe8f4;
}
.result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.credentials-block {
  background: #f3f8ff;
  border: 1px solid #d8e5f4;
  border-radius: 10px;
  padding: 10px;
}
.badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.badge.ok { background: #dbf7e1; color: #0d6d2f; }
.badge.warn { background: #fff0cf; color: #9a5f00; }
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.installation-content {
  display: grid;
  gap: 18px;
}

.installation-intro ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.device-accordion {
  display: grid;
  gap: 12px;
}

.device-item {
  border: 1px solid #dfe8f4;
  border-radius: 14px;
  background: #fbfdff;
  overflow: hidden;
}

.device-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.device-item summary::-webkit-details-marker {
  display: none;
}

.device-item-title {
  font-weight: 700;
  color: #16314a;
}

.device-item-summary {
  color: #56708d;
  font-size: 14px;
}

.device-item summary::after {
  content: '+';
  font-size: 22px;
  line-height: 1;
  color: #167a57;
  flex: 0 0 auto;
}

.device-item[open] summary::after {
  content: '−';
}

.device-item-body {
  padding: 0 18px 18px;
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr;
  gap: 18px;
  align-items: start;
}

.device-figure {
  margin: 0;
  background: #fff;
  border: 1px solid #dfe8f4;
  border-radius: 12px;
  padding: 10px;
}

.device-figure img {
  display: block;
  width: 100%;
  border-radius: 8px;
}

.device-item-content {
  display: grid;
  gap: 12px;
}

.device-item-content ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.device-item-notes {
  display: grid;
  gap: 8px;
  color: #40596f;
}

.device-item-notes p {
  margin: 0;
}
.checkout-status {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #d9e7f5;
  background: #f7fbff;
  line-height: 1.5;
}
.checkout-status.success {
  background: #effcf2;
  border-color: #bce7c7;
  color: #0d6d2f;
}
.checkout-status.warn {
  background: #fff8e8;
  border-color: #f0d898;
  color: #9a5f00;
}
.checkout-status.error {
  background: #fff1f1;
  border-color: #f0c2c2;
  color: #af2222;
}
.pix-box {
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid #dbe7f3;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.pix-box-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}
.pix-box-header h3 {
  margin: 0;
}
.pix-grid {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 18px;
  align-items: start;
}
.pix-qr {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e4eef8;
  border-radius: 12px;
}
.pix-qr img {
  width: 100%;
  max-width: 220px;
  border-radius: 8px;
  border: 1px solid #e3eaf3;
}
.pix-copy-code {
  width: 100%;
  min-height: 110px;
  padding: 12px;
  border: 1px solid #cedaea;
  border-radius: 10px;
  background: #f6faff;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.5;
  word-break: break-all;
}
.pix-inline-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 12px;
}
.pix-meta {
  display: grid;
  gap: 10px;
}
.pix-meta-card {
  padding: 12px;
  border-radius: 10px;
  background: #f5fff0;
  border: 1px solid #d7efca;
}
.pix-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.plan-card {
  border: 2px solid #e5ecf3;
  border-radius: 16px;
  padding: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.plan-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #16c01f, #14a91b);
}
.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(22, 192, 31, 0.15);
  border-color: #16c01f;
}
.plan-card h3 {
  margin: 0 0 8px 0;
  color: #113a6b;
  font-size: 20px;
}
.plan-card p {
  margin: 0 0 8px 0;
  color: #5a6c7d;
  font-size: 14px;
  line-height: 1.5;
}
.plan-price {
  margin: 12px 0 !important;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.price-value {
  font-size: 32px;
  font-weight: 800;
  color: #16c01f;
  line-height: 1;
  white-space: nowrap;
}
.plan-cycle {
  font-size: 14px;
  color: #5a6c7d;
  font-weight: 600;
  white-space: nowrap;
}
.plan-card .btn {
  width: 100%;
  margin-top: 12px;
  background: linear-gradient(135deg, #16c01f, #14a91b);
  font-size: 15px;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(22, 192, 31, 0.2);
}
.plan-card .btn[disabled] {
  opacity: 0.65;
  cursor: wait;
}
.plan-meta {
  margin-top: 8px;
  color: #5a6c7d;
  font-size: 13px;
}
.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 16px;
}
.app-card {
  border: 1px solid #dde6f2;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.app-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.app-head img {
  width: 100%;
  max-width: 400px;
  height: 200px;
  border-radius: 12px;
  object-fit: contain;
  background: #edf4ff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.app-info {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.app-links {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.link-chip {
  font-size: 12px;
  border: 1px solid #d2deec;
  border-radius: 999px;
  padding: 6px 12px;
  text-decoration: none;
  color: #16304f;
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease;
}
.link-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.link-chip.link-orange {
  background: #ff8c00;
  color: #fff;
  border-color: #ff8c00;
  font-weight: 600;
}
.link-chip.link-orange:hover {
  background: #ff7700;
  border-color: #ff7700;
}
.link-chip.link-download {
  background: #16c01f;
  color: #fff;
  border-color: #16c01f;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 14px;
}
.link-chip.link-download:hover {
  background: #14a91b;
  border-color: #14a91b;
}
.downloader-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.downloader-label {
  font-size: 14px;
  color: #ff6600;
  margin: 0;
}
.downloader-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff5e6;
  border: 2px solid #ff8c00;
  border-radius: 10px;
  padding: 8px 12px;
  width: fit-content;
}
.downloader-code {
  font-size: 16px;
  font-weight: 700;
  color: #ff6600;
  letter-spacing: 1px;
  font-family: 'Courier New', monospace;
}
.copy-btn {
  background: #ff8c00;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.copy-btn:hover {
  background: #ff7700;
  transform: scale(1.05);
}
.category-section {
  margin-bottom: 24px;
}
.category-section:last-child {
  margin-bottom: 0;
}
.category-title {
  color: #113a6b;
  font-size: 20px;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #e5ecf3;
}
.support-box {
  margin-top: 16px;
  padding: 16px;
  border-radius: 10px;
  background: #f5ffef;
  border: 1px solid #d8f0cd;
  line-height: 1.6;
}
.support-box .btn {
  margin-top: 12px;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.section-head p {
  margin: 0;
  color: #5a6c7d;
}
.matches-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) repeat(2, minmax(160px, 220px)) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}
.matches-date-field {
  display: grid;
  gap: 6px;
}
.matches-competition-field {
  min-width: 0;
}
.matches-date-field label {
  margin-bottom: 0;
}
.secondary-btn {
  background: #16314a;
  color: #fff;
}
.secondary-btn:hover {
  background: #0f2639;
}
.matches-status {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #d9e7f5;
  background: #f7fbff;
  color: #29435c;
}
.matches-status.success {
  background: #effcf2;
  border-color: #bce7c7;
  color: #0d6d2f;
}
.matches-status.warn {
  background: #fff8e8;
  border-color: #f0d898;
  color: #9a5f00;
}
.matches-status.error {
  background: #fff1f1;
  border-color: #f0c2c2;
  color: #af2222;
}
.matches-meta {
  margin-top: 12px;
  color: #5a6c7d;
  font-size: 14px;
}
.matches-grid {
  margin-top: 16px;
  display: grid;
  gap: 16px;
}
.matches-group {
  display: grid;
  gap: 14px;
}
.matches-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.matches-group-head h3 {
  margin: 0;
  color: #16304f;
  font-size: 18px;
}
.matches-group-head span {
  min-width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #eef4ff;
  color: #2d5c8f;
  font-weight: 700;
}
.matches-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.match-card {
  border: 1px solid #dde6f2;
  border-radius: 16px;
  padding: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  display: grid;
  gap: 16px;
  box-shadow: 0 10px 24px rgba(17, 58, 107, 0.08);
}
.match-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.competition-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #16304f;
  font-weight: 700;
}
.competition-chip img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.match-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.match-status.scheduled {
  background: #eef4ff;
  color: #2d5c8f;
}
.match-status.live {
  background: #ffe7e7;
  color: #c23636;
}
.match-status.final {
  background: #ebf7ec;
  color: #21693a;
}
.match-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.team-block {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}
.team-crest {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #f0f6ff;
  border: 1px solid #d7e4f2;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.team-crest img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.team-crest-fallback {
  font-size: 11px;
  font-weight: 700;
  color: #4f6983;
  text-transform: uppercase;
}
.match-score {
  display: grid;
  gap: 6px;
  text-align: center;
}
.match-score strong {
  font-size: 20px;
  color: #113a6b;
}
.match-score span {
  color: #5a6c7d;
  font-size: 13px;
}
.match-card-bottom {
  display: grid;
  gap: 8px;
  color: #40596f;
  font-size: 14px;
}
.channels-row {
  display: grid;
  gap: 8px;
}
.channels-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.channel-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f4f8fd;
  border: 1px solid #dce8f5;
  color: #16304f;
  font-weight: 600;
}
.channel-pill img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 50%;
}
.channel-empty {
  color: #6a8096;
}
@media (max-width: 1024px) {
  .apps-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }
  .app-head img {
    max-width: 100%;
    height: auto;
    max-height: 220px;
  }
  .plans-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}
@media (max-width: 780px) {
  .form-grid { grid-template-columns: 1fr; }
  .result-grid { grid-template-columns: 1fr; }
  .pix-inline-form { grid-template-columns: 1fr; }
  .pix-grid { grid-template-columns: 1fr; }
  .section-head {
    flex-direction: column;
    align-items: stretch;
  }
  .matches-toolbar {
    grid-template-columns: 1fr;
  }
  .device-item summary {
    flex-direction: column;
    align-items: flex-start;
  }
  .device-item-body {
    grid-template-columns: 1fr;
  }
  .match-teams {
    grid-template-columns: 1fr;
  }
  .apps-grid { 
    grid-template-columns: 1fr; 
  }
  .plans-grid {
    grid-template-columns: 1fr;
  }
  .app-head img { 
    max-width: 100%; 
    height: auto;
    min-height: 180px;
    max-height: 250px;
  }
  .app-card {
    padding: 12px;
  }
  .plan-card {
    padding: 16px;
  }
  .downloader-wrapper {
    width: 100%;
  }
  .downloader-box {
    width: 100%;
    justify-content: space-between;
  }
  .link-chip.link-download {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .client-wrap {
    padding: 0 12px 20px;
    gap: 12px;
  }
  h1 {
    font-size: 1.5rem;
  }
  h2 {
    font-size: 1.3rem;
  }
  .app-head img {
    height: auto;
    min-height: 150px;
    max-height: 200px;
  }
  .downloader-code {
    font-size: 14px;
  }
  .copy-btn {
    font-size: 11px;
    padding: 5px 10px;
  }
  .price-value {
    font-size: 28px;
  }
  .plan-card h3 {
    font-size: 18px;
  }
}