.detail-level-dialog {
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 20px;
  border: 1px solid rgba(167, 109, 242, .35);
  border-radius: 20px;
  background: #0c1222;
  color: #f8fafc;
  box-shadow: 0 24px 80px #0008;
}
.detail-level-dialog::backdrop { background: rgba(2, 6, 23, .75); backdrop-filter: blur(5px); }
.level-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.level-dialog-heading h2 { margin: 0; font-size: 20px; }
.level-dialog-heading button { width: 36px; height: 36px; border: 1px solid #ffffff20; border-radius: 50%; background: #ffffff08; color: #fff; font-size: 24px; cursor: pointer; }
.detail-level-dialog .detail-level { box-shadow: none; }
.detail-level-trigger:focus-visible, .level-dialog-heading button:focus-visible { outline: 2px solid #bb86ee; outline-offset: 3px; }

.detail-level { box-shadow: none; }
.detail-level-trigger:focus-visible, .level-dialog-heading button:focus-visible { outline: 2px solid #bb86ee; outline-offset: 3px; }

.detail-review-options {
  margin-top: 13px;
  padding: 17px 14px 14px;
  border-radius: 16px;
  border-color: rgba(139, 92, 246, .38);
  background: linear-gradient(145deg, rgba(30, 20, 61, .98), rgba(8, 14, 27, .98));
}

.review-title-row {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.review-title-row h2 { margin: 4px 0 0; font-size: 19px; letter-spacing: -.35px; }
.review-eyebrow { color: #b78aff; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; }
.review-reward { flex: none; padding: 7px 9px; border: 1px solid rgba(250, 184, 57, .4); border-radius: 999px; background: rgba(245, 158, 11, .12); color: #ffc44d; font-size: 11px; }
.review-instruction { margin: 9px 0 14px; color: #aeb5c4; font-size: 11px; line-height: 1.45; }
.detail-review-options > div:last-of-type { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.detail-review-options button { height: 54px; transition: border-color .2s, transform .2s, background .2s; }
.detail-review-options button:active { transform: scale(.97); }
.detail-review-options button:nth-child(1) { border-color: rgba(34, 197, 94, .4); background: rgba(22, 101, 52, .12); }
.detail-review-options button:nth-child(2) { border-color: rgba(245, 158, 11, .4); background: rgba(146, 87, 0, .12); }
.detail-review-options button:nth-child(3) { border-color: rgba(239, 68, 68, .4); background: rgba(127, 29, 29, .12); }
.detail-review-options.is-loading { pointer-events: none; opacity: .7; }
.review-feedback { min-height: 14px; margin: 10px 0 0; color: #838ca0; font-size: 9px; text-align: center; }
.review-feedback.has-error { color: #ff7b82; }

.detail-level { margin-top: 13px; padding: 14px; border: 1px solid rgba(148, 163, 184, .18); border-radius: 15px; background: linear-gradient(145deg, rgba(15, 23, 40, .98), rgba(8, 14, 27, .98)); box-shadow: 0 16px 32px rgba(0, 0, 0, .25); }
.level-heading { display: flex; align-items: center; justify-content: space-between; }
.level-heading div { display: flex; flex-direction: column; gap: 3px; }
.level-heading span { color: #8e97a9; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }
.level-heading strong { font-size: 15px; }
.level-heading b { color: #c9a7ff; font-size: 12px; }
.level-progress { height: 6px; margin: 11px 0 8px; overflow: hidden; border-radius: 99px; background: #1c2537; }
.level-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7c3aed, #d25cff); box-shadow: 0 0 12px rgba(168, 85, 247, .65); transition: width .45s ease; }
.detail-level small { color: #8992a4; font-size: 9px; }

.home-level-trigger { display:grid; place-items:center; width:44px; height:44px; padding:6px; border:1px solid #e6a52340; border-radius:50%; background:#ffc83d0c; cursor:pointer; }
.home-level-trigger svg { width:30px; height:30px; }
.home-level-trigger:hover { background:#ffc83d22; }
.home-level-trigger:focus-visible { outline:2px solid #ffc83d; outline-offset:4px; }
@media(min-width:1024px) { .home-page .mobile-search { right:calc(var(--desktop-gutter) + 64px); } }