.subscription-result-view {
  min-height: calc(100vh - 150px);
  box-sizing: border-box;
  padding: clamp(24px, 5vw, 62px) 20px 72px;
  color: #233956;
  background: radial-gradient(circle at 15% 12%, rgba(41, 123, 233, .16), transparent 31%), radial-gradient(circle at 88% 82%, rgba(82, 63, 195, .14), transparent 34%), #f1f5fb;
  font-family: 'Burotec Sans', ui-sans-serif, sans-serif;
}
.subscription-result-view[hidden] { display: none; }
.subscription-result-view .subscription-result-view__shell {
  width: min(760px, 100%);
  margin: 0 auto;
  box-sizing: border-box;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid #dce7f5;
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 28px 74px rgba(42, 67, 111, .12);
}
.subscription-result-view .subscription-result-view__intro { text-align: center; }
.subscription-result-view .subscription-result-view__symbol {
  display: grid;
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  place-items: center;
  border-radius: 23px;
  color: #fff;
  background: linear-gradient(135deg, #287ce4, #5844ca);
  box-shadow: 0 13px 29px rgba(49, 97, 198, .22);
}
.subscription-result-view .subscription-result-view__symbol .app-icon { width: 34px; height: 34px; }
.subscription-result-view[data-state="approved"] .subscription-result-view__symbol { background: linear-gradient(135deg, #008c81, #22bd9b); box-shadow: 0 13px 29px rgba(0, 137, 119, .2); }
.subscription-result-view[data-state="rejected"] .subscription-result-view__symbol { background: linear-gradient(135deg, #c3476b, #a93561); box-shadow: 0 13px 29px rgba(170, 55, 96, .17); }
.subscription-result-view[data-state="unavailable"] .subscription-result-view__symbol { background: linear-gradient(135deg, #4e6fb9, #6c56b5); }
.subscription-result-view .subscription-result-view__intro > p {
  margin: 0 0 10px;
  color: #3975bd;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .11em;
}
.subscription-result-view[data-state="approved"] .subscription-result-view__intro > p { color: #087e70; }
.subscription-result-view[data-state="rejected"] .subscription-result-view__intro > p { color: #af3c64; }
.subscription-result-view .subscription-result-view__intro h1 {
  margin: 0;
  color: #1f3654;
  font-size: clamp(28px, 4.3vw, 38px);
  line-height: 1.13;
}
.subscription-result-view .subscription-result-view__lead {
  display: block;
  max-width: 570px;
  margin: 15px auto 0;
  color: #61738a;
  font-size: 15px;
  line-height: 1.55;
}
.subscription-result-view .subscription-result-view__plan {
  margin-top: 31px;
  overflow: hidden;
  border-radius: 23px;
  color: #fff;
  background: radial-gradient(circle at 92% 8%, rgba(82, 166, 241, .2), transparent 34%), linear-gradient(130deg, #173e72, #172e59 70%, #2a2c65);
}
.subscription-result-view .subscription-result-view__plan[hidden] { display: none; }
.subscription-result-view .subscription-result-view__plan-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 25px 28px 0;
}
.subscription-result-view .subscription-result-view__plan-heading p { margin: 0 0 8px; color: #a9d7f6; font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.subscription-result-view .subscription-result-view__plan-heading h2 { margin: 0; font-size: 32px; line-height: 1.1; }
.subscription-result-view .subscription-result-view__plan-heading span { display: block; margin-top: 5px; color: #d8e7fb; font-size: 15px; }
.subscription-result-view .subscription-result-view__plan-heading > .app-icon { flex: none; width: 32px; height: 32px; color: #8fdad0; }
.subscription-result-view[data-tier="PREMIUM"] .subscription-result-view__plan-heading > .app-icon { color: #ffda55; }
.subscription-result-view .subscription-result-view__seats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  margin: 23px 28px 0;
  padding: 16px 0;
  border-top: 1px solid rgba(222, 239, 255, .2);
}
.subscription-result-view .subscription-result-view__seats > div { display: flex; flex-wrap: wrap; gap: 8px; }
.subscription-result-view .subscription-result-view__seats > div[hidden] { display: none; }
.subscription-result-view .subscription-result-view__seats > div > span {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  box-sizing: border-box;
  border-radius: 14px;
}
.subscription-result-view .subscription-result-view__seats > div > span .app-icon { width: 19px; height: 19px; }
.subscription-result-view .subscription-result-view__seats > div > .is-occupied { color: #fff; background: linear-gradient(145deg,#7357d1,#4f75d5); box-shadow: 0 7px 14px rgba(16,24,82,.3); }
.subscription-result-view .subscription-result-view__seats > div > .is-available { border: 2px dashed rgba(216,231,251,.66); color: #d8e7fb; background: rgba(255,255,255,.1); }
.subscription-result-view .subscription-result-view__seats strong { font-size: 15px; text-align: right; }
.subscription-result-view .subscription-result-view__plan-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(217, 235, 255, .2); }
.subscription-result-view .subscription-result-view__plan-facts > div { min-width: 0; padding: 18px 28px 20px; background: rgba(12, 32, 69, .45); }
.subscription-result-view .subscription-result-view__plan-facts span { display: block; color: #bbd3ec; font-size: 12px; }
.subscription-result-view .subscription-result-view__plan-facts b { display: block; margin-top: 5px; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.subscription-result-view .subscription-result-view__payment {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 24px;
  padding: 19px 22px;
  border: 1px solid #d9e6f4;
  border-radius: 17px;
  background: #f5f9fd;
}
.subscription-result-view .subscription-result-view__payment[hidden], .subscription-result-view .subscription-result-view__reference[hidden] { display: none; }
.subscription-result-view .subscription-result-view__payment span { color: #506e96; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.subscription-result-view .subscription-result-view__payment strong { color: #233c5d; font-size: clamp(22px, 4vw, 27px); white-space: nowrap; }
.subscription-result-view .subscription-result-view__reference { display: flex; justify-content: space-between; gap: 8px 16px; padding: 17px 3px 0; color: #667c96; font-size: 12px; }
.subscription-result-view .subscription-result-view__reference b { min-width: 0; color: #344f71; font-size: 12px; font-weight: 700; overflow-wrap: anywhere; text-align: right; }
.subscription-result-view .subscription-result-view__actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 29px; }
.subscription-result-view .subscription-result-view__actions button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 9px; padding: 13px 19px; border: 1px solid #c7d8ed; border-radius: 13px; color: #2a558e; background: #fff; font: 800 13px/1.2 'Burotec Sans', ui-sans-serif, sans-serif; cursor: pointer; }
.subscription-result-view .subscription-result-view__actions button:hover { border-color: #4b8ed8; }
.subscription-result-view .subscription-result-view__actions button:focus-visible { outline: 3px solid #7cb6f4; outline-offset: 3px; }
.subscription-result-view .subscription-result-view__actions button:disabled { opacity: .55; cursor: wait; }
.subscription-result-view .subscription-result-view__actions button[hidden] { display: none; }
.subscription-result-view .subscription-result-view__actions #subscriptionResultAccount { border-color: transparent; color: #fff; background: linear-gradient(115deg, #2779df, #5145ca); box-shadow: 0 9px 20px rgba(53, 83, 191, .2); }
.subscription-result-view .subscription-result-view__actions .app-icon { width: 17px; height: 17px; }
.subscription-result-view .subscription-result-view__footnote { margin: 24px 0 0; color: #71849a; font-size: 12px; line-height: 1.5; }
@media (max-width: 600px) {
  .subscription-result-view { padding: 19px 12px 50px; }
  .subscription-result-view .subscription-result-view__shell { padding: 25px 19px; border-radius: 24px; }
  .subscription-result-view .subscription-result-view__plan-heading { padding: 22px 19px 0; }
  .subscription-result-view .subscription-result-view__seats { margin: 20px 19px 0; }
  .subscription-result-view .subscription-result-view__plan-facts { grid-template-columns: 1fr; }
  .subscription-result-view .subscription-result-view__plan-facts > div { padding: 15px 19px; }
  .subscription-result-view .subscription-result-view__payment { padding: 17px; }
  .subscription-result-view .subscription-result-view__reference { display: block; }
  .subscription-result-view .subscription-result-view__reference b { display: block; margin-top: 5px; text-align: left; }
  .subscription-result-view .subscription-result-view__actions { display: grid; }
}