/* LuaQuest Premium: original cloud stage and a readable, compact offer. */
.premium-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.premium-wordmark { display: inline-flex; align-items: center; gap: 9px; color: #f4f5ff; font-size: 17px; line-height: 1.25; white-space: nowrap; }
.premium-wordmark > svg { width: 23px; height: 23px; color: #8beaff; filter: drop-shadow(0 0 7px #76d5ff50); }
.premium-wordmark b { display: block; color: #c2b5ff; font-size: 24px; font-weight: 400; }
.premium-button { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 52px; padding: 13px 20px; border: 1px solid #9180ff; border-radius: 15px; background: #6244dc; box-shadow: 0 5px 0 #3e258e, inset 0 1px 0 #b5a4ff45; color: #fff; font-family: inherit; font-size: 15px; font-weight: 400; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; transition: background .16s, transform .16s, box-shadow .16s; }
.premium-button:hover { background: #6d4de5; }
.premium-button:active { transform: translateY(3px); box-shadow: 0 2px 0 #3e258e; }
.premium-button > svg { width: 19px; height: 19px; color: #b8f5ff; }
.premium-button:focus-visible { outline: 3px solid #24a6e5; outline-offset: 5px; }
.premium-card { position: relative; isolation: isolate; overflow: hidden; margin-top: 18px; padding: 22px; border: 2px solid #51508d; border-radius: 20px; background: radial-gradient(ellipse at 100% 5%, #433276 0%, #201e43 46%, #192c3b 100%); }
.premium-card::before { content: ''; position: absolute; z-index: -1; width: 200px; height: 200px; top: -95px; right: -90px; border: 1px solid #9280cc45; border-radius: 50%; box-shadow: 0 0 0 32px #7b6bb011, 0 0 0 64px #7b6bb011; }
.premium-card-heading { position: relative; display: flex; align-items: center; min-height: 90px; margin: -8px 0 8px; }
.premium-card h2 { position: relative; z-index: 2; margin: 0; padding-right: 95px; }
.premium-card .premium-wordmark { gap: 7px; font-size: 15px; }
.premium-card .premium-wordmark > svg { width: 18px; height: 18px; }
.premium-card .premium-wordmark b { font-size: 25px; }
.premium-card-echo { position: absolute; z-index: 1; width: 130px; height: 130px; right: -21px; top: -17px; object-fit: contain; transform: rotate(9deg); filter: drop-shadow(0 9px 10px #080b2d50); animation: premiumCardFloat 5s ease-in-out infinite; }
.premium-card-orbit { position: absolute; width: 100px; height: 24px; right: -3px; bottom: 5px; border: 1px solid #9ad5ff65; border-radius: 50%; background: #6278de22; transform: rotate(-9deg); }
.premium-card ul { display: grid; gap: 12px; margin: 0 0 22px; padding: 0; list-style: none; }
.premium-card li { display: flex; align-items: center; gap: 10px; color: #e0e5fc; font-size: 14px; line-height: 1.45; }
.premium-card li svg { flex: 0 0 18px; width: 18px; height: 18px; color: #94dff0; }
.premium-card .premium-button { font-size: 14px; }

body[data-route="premium"] { background: #f8f7ff; color: #242540; }
body[data-route="premium"]::before, body[data-route="premium"]::after { display: none; }
.premium-page { min-height: 100dvh; background: #f8f7ff; color: #242540; }
.premium-hero { position: relative; isolation: isolate; min-height: 0; padding: 42px 24px 0; overflow: visible; background: linear-gradient(#101d43 0 75%, #f8f7ff 75%); text-align: center; }
.premium-sky { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; pointer-events: none; }
.premium-close { position: absolute; top: 22px; left: max(24px, calc((100% - 1280px)/2)); display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #657ba159; border-radius: 50%; background: #ffffff08; color: #c6d4ef; transition: background .18s; }
.premium-close svg { width: 24px; height: 24px; }
.premium-close:hover { background: #ffffff18; color: white; }
.premium-close:focus-visible { outline: 3px solid #a0eaff; outline-offset: 4px; }
.premium-hero-copy { position: relative; z-index: 2; }
.premium-hero h1 { margin: 0 auto; max-width: 720px; color: #fff; font-size: clamp(28px, 3.2vw, 36px); font-weight: 400; line-height: 1.24; letter-spacing: -.5px; text-wrap: balance; }
.premium-hero h1 > span { display: block; color: #b9dfff; }
.premium-stage { position: relative; width: 300px; height: 208px; margin: 0 auto; }
.premium-echo { position: absolute; z-index: 2; width: 300px; height: 300px; left: 0; top: -42px; pointer-events: none; filter: drop-shadow(0 10px 12px #25376935); }
.premium-echo-poster { display: none; position: absolute; z-index: 2; width: 300px; height: 300px; left: 0; top: -42px; pointer-events: none; }
.premium-stage.is-echo-loading .premium-echo { opacity: 0; }
.premium-stage.is-echo-loading .premium-echo-poster { display: block; }
.premium-offer { width: min(660px, calc(100% - 40px)); margin: 14px auto 0; padding-bottom: 18px; }
.premium-comparison { width: 100%; border-spacing: 0; border-collapse: separate; table-layout: fixed; color: #30334d; text-align: center; font-size: 16px; line-height: 1.35; }
.premium-free-column { width: 100px; }
.premium-paid-column { width: 116px; }
.premium-comparison thead th { height: 45px; padding: 8px; font-weight: 400; font-size: 14px; }
.premium-comparison thead th:last-child { border-radius: 17px 17px 0 0; color: #5337ab; background: #e9e3fc; }
.premium-comparison tbody th { padding: 13px 12px 13px 2px; text-align: left; font-weight: 400; }
.premium-comparison tbody td { padding: 10px; }
.premium-comparison tbody td:last-child { background: #e9e3fc; }
.premium-comparison tbody tr:last-child td:last-child { border-radius: 0 0 17px 17px; padding-bottom: 15px; }
.premium-comparison tbody tr:not(:last-child) th, .premium-comparison tbody tr:not(:last-child) td:not(:last-child) { border-bottom: 1px solid #e8e6f0; }
.premium-check { display: inline-grid; place-items: center; vertical-align: middle; width: 25px; height: 25px; color: #4e6574; }
.premium-check svg { width: 25px; height: 25px; }
.premium-check.is-premium { color: #6844cc; }
.premium-dash { color: #76748a; font-size: 21px; }
.premium-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 0; padding: 0; border: 0; }
.premium-plan { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 15px; border: 2px solid #dcd9e9; border-radius: 17px; background: #fff; cursor: pointer; transition: border-color .18s, background .18s; }
.premium-plan:has(input:checked) { border-color: #7851df; background: #f0eaff; box-shadow: 0 3px 0 #dfd3f7; }
.premium-plan:has(input:focus-visible) { outline: 3px solid #187fad; outline-offset: 4px; }
.premium-plan input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.premium-plan-indicator { flex: 0 0 21px; width: 21px; height: 21px; border: 2px solid #c0bdcf; border-radius: 50%; background: #fff; }
.premium-plan:has(input:checked) .premium-plan-indicator { border: 6px solid #7550d6; }
.premium-plan-copy { display: grid; min-width: 0; gap: 4px; }
.premium-plan-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: #51516c; }
.premium-saving { padding: 3px 6px; border-radius: 6px; background: #e0d4fc; color: #5130a4; font-size: 10px; line-height: 1.4; }
.premium-plan-price { color: #252b4b; font-size: 24px; white-space: nowrap; }
.premium-plan-price small { margin-left: 3px; font-size: 12px; color: #595b70; }
.premium-plan-detail { color: #64647b; font-size: 11px; line-height: 1.5; }
.premium-availability { margin: 16px 0 0; color: #6b687e; font-size: 12px; text-align: center; }
.premium-actions { position: sticky; z-index: 10; bottom: 0; padding: 10px 20px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid #e5e1f1; background: #f8f7fff5; backdrop-filter: blur(12px); }
.premium-actions-inner { width: min(660px, 100%); margin: auto; }
.premium-subscribe { min-height: 54px; font-size: 16px; }
.premium-free-return { display: flex; align-items: center; justify-content: center; width: max-content; min-height: 44px; margin: 5px auto -5px; padding: 8px 15px; color: #5e4a9b; font-size: 13px; text-decoration: none; }
.premium-free-return:hover { text-decoration: underline; text-underline-offset: 4px; }
.premium-free-return:focus-visible { outline: 3px solid #187fad; border-radius: 6px; }
.premium-dialog { width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 30px; border: 2px solid #d9d0f0; border-radius: 26px; background: #f8f7ff; color: #272442; text-align: center; box-shadow: 0 28px 100px #040e3660; }
.premium-dialog::backdrop { background: #070f35ba; backdrop-filter: blur(6px); }
.premium-dialog-emblem { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 21px; background: #e9e0ff; color: #7950dc; transform: rotate(-7deg); }
.premium-dialog-emblem svg { width: 32px; height: 32px; }
.premium-dialog h2 { margin: 0 0 12px; font-size: 25px; font-weight: 400; }
.premium-dialog p { margin: 0; color: #66607d; font-size: 15px; line-height: 1.6; }
.premium-dialog-plan { margin: 20px 0; padding: 12px; border-radius: 10px; color: #513a88; background: #eeebf7; font-size: 15px; }
@keyframes premiumCardFloat { 0%,100% { transform: translateY(0) rotate(9deg); } 50% { transform: translateY(-5px) rotate(5deg); } }
@media (max-width: 767px) {
  .premium-hero { padding: 68px 20px 0; }
  .premium-close { left: 16px; top: 16px; }
  .premium-hero h1 { max-width: 400px; font-size: 27px; line-height: 1.25; letter-spacing: -.3px; }
  .premium-stage { width: 270px; height: 184px; margin-top: 0; }
  .premium-echo, .premium-echo-poster { width: 270px; height: 270px; top: -38px; }
  .premium-offer { width: calc(100% - 36px); margin-top: 12px; }
  .premium-comparison { font-size: 13px; }
  .premium-free-column { width: 67px; }
  .premium-paid-column { width: 83px; }
  .premium-comparison thead th { font-size: 12px; }
  .premium-comparison tbody th { padding-block: 12px; }
  .premium-comparison tbody td { padding: 10px 5px; }
  .premium-plans { gap: 10px; }
  .premium-plan { padding: 12px 10px; gap: 8px; align-items: flex-start; }
  .premium-plan-indicator { flex-basis: 18px; width: 18px; height: 18px; margin-top: 2px; }
  .premium-plan:has(input:checked) .premium-plan-indicator { border-width: 5px; }
  .premium-plan-title { min-height: 22px; font-size: 12px; }
  .premium-plan-price { font-size: 20px; }
  .premium-plan-price small { font-size: 10px; }
  .premium-plan-detail { font-size: 10px; }
  .premium-saving { font-size: 9px; }
  .premium-actions { padding-inline: 18px; }
  .premium-subscribe { font-size: 15px; }
}
@media (max-width: 360px) {
  .premium-hero h1 { font-size: 24px; }
  .premium-free-column { width: 56px; }
  .premium-paid-column { width: 73px; }
  .premium-plan-indicator { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .premium-card-echo { animation: none; }
  .premium-page *, .premium-card * { transition: none !important; }
}