/* ATLAS BEATS — main-site Shop section (v7.4) */
.shop-sec { margin-top: 34px; padding: 26px 24px 28px; border-radius: 26px; border: 1px solid rgba(255, 255, 255, .08); position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(120% 90% at 0% 0%, rgba(124, 58, 237, .22), transparent 55%), radial-gradient(90% 80% at 100% 100%, rgba(231, 201, 138, .12), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); content-visibility: auto; contain-intrinsic-size: auto 900px; }
.shop-sec::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(231, 201, 138, .55), transparent); }
.shop-sec.flash { animation: shopFlash 1.1s ease; }
@keyframes shopFlash { 0% { box-shadow: 0 0 0 0 rgba(231, 201, 138, .55); } 100% { box-shadow: 0 0 0 18px rgba(231, 201, 138, 0); } }
.shop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.shop-head h2 { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 900; letter-spacing: .02em; margin: 0 0 6px; }
.shop-head h2 .i { width: 26px; height: 26px; color: #e7c98a; }
.shop-head p { margin: 0; color: var(--muted); font-size: 13.5px; max-width: 620px; line-height: 1.7; }
.shop-block { margin-top: 18px; padding: 18px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(0, 0, 0, .22); }
.shop-block h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; font-size: 16px; font-weight: 800; }
.shop-block h3 small { font-weight: 500; color: var(--muted); font-size: 12px; margin-inline-start: auto; }
.shop-dot { width: 8px; height: 8px; border-radius: 50%; background: #e7c98a; box-shadow: 0 0 12px #e7c98a; }
.shop-prem-grid { display: grid; grid-template-columns: minmax(200px, .8fr) 2fr; gap: 18px; align-items: start; }
.shop-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.shop-perks li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink); }
.shop-perks .i { width: 18px; height: 18px; color: #34d399; flex: none; }
.shop-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.shop-plan { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 16px 14px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .09); background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); transition: transform .25s var(--ease, ease), border-color .25s; }
.shop-plan:hover { transform: translateY(-3px); border-color: rgba(231, 201, 138, .4); }
.shop-plan.best { border-color: rgba(231, 201, 138, .5); background: linear-gradient(180deg, rgba(231, 201, 138, .16), rgba(231, 201, 138, .04)); }
.shop-ribbon { position: absolute; top: 10px; inset-inline-end: -30px; transform: rotate(35deg); background: #e7c98a; color: #1a1206; font-size: 10.5px; font-weight: 800; padding: 3px 34px; letter-spacing: .02em; }
[dir="rtl"] .shop-ribbon { transform: rotate(-35deg); }
.shop-plan-head { display: flex; flex-direction: column; gap: 2px; }
.shop-plan-name { font-weight: 800; font-size: 15px; }
.shop-plan-days { font-size: 12px; color: var(--muted); }
.shop-price { display: flex; align-items: baseline; gap: 6px; }
.shop-price b { font-size: 26px; font-weight: 900; letter-spacing: -.02em; color: #fff; }
.shop-price span { font-size: 12px; color: #e7c98a; font-weight: 700; }
.shop-price.sm b { font-size: 18px; }
.shop-pm { font-size: 11.5px; color: var(--muted); }
.shop-btn { appearance: none; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .07); color: var(--ink); border-radius: 12px; min-height: 40px; padding: 0 16px; font: inherit; font-weight: 800; font-size: 13.5px; cursor: pointer; transition: background .2s, transform .2s, border-color .2s; margin-top: auto; }
.shop-btn:hover { background: rgba(255, 255, 255, .13); transform: translateY(-1px); }
.shop-btn.primary { background: linear-gradient(135deg, #e7c98a, #c89b45); color: #1a1206; border-color: transparent; box-shadow: 0 10px 26px rgba(231, 201, 138, .25); }
.shop-btn.primary:hover { filter: brightness(1.05); }
.shop-btn.lg { min-height: 46px; padding: 0 22px; font-size: 14.5px; flex: none; }
.shop-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.shop-gift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.shop-gift { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px 12px; border-radius: 18px; text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 16%, transparent), rgba(255, 255, 255, .025)); border: 1px solid color-mix(in srgb, var(--tc) 35%, transparent); transition: transform .25s, box-shadow .25s; }
.shop-gift:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--tc) 70%, transparent); }
.shop-gift h4 { margin: 2px 0 0; font-size: 14px; font-weight: 800; }
.shop-gift-art { display: grid; place-items: center; width: 86px; height: 86px; border-radius: 24px; margin-bottom: 4px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--tc) 55%, #fff 10%), color-mix(in srgb, var(--tc) 40%, #000) 75%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), 0 10px 26px -12px color-mix(in srgb, var(--tc) 70%, transparent); }
.shop-gift-art svg { width: 68px; height: 68px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); transition: transform .3s var(--ease, ease); }
.shop-gift:hover .shop-gift-art svg { transform: scale(1.08) rotate(-3deg); }
.shop-tier { position: absolute; top: 10px; inset-inline-start: 10px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--tc) 30%, rgba(0, 0, 0, .4)); color: #fff; border: 1px solid color-mix(in srgb, var(--tc) 50%, transparent); }
.shop-left { font-size: 11.5px; color: var(--muted); }
.shop-gift .shop-btn { width: 100%; min-height: 36px; font-size: 13px; margin-top: 4px; }
.shop-gift.t-mythic { border-color: rgba(251, 191, 36, .35); }
.shop-gift.t-mythic .shop-gift-art { animation: shopGlow 3s ease-in-out infinite alternate; }
@keyframes shopGlow { from { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 12px 30px rgba(0, 0, 0, .4); } to { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 12px 40px color-mix(in srgb, var(--tc) 50%, transparent); } }
.side-pages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .shop-prem-grid { grid-template-columns: 1fr; } .shop-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .shop-sec { padding: 20px 14px 22px; border-radius: 20px; margin-top: 26px; }
  .shop-head { flex-direction: column; } .shop-head h2 { font-size: 21px; } .shop-btn.lg { width: 100%; }
  .shop-block { padding: 14px 12px; } .shop-block h3 small { margin-inline-start: 0; flex-basis: 100%; }
  .shop-perks { grid-template-columns: 1fr; }
  .shop-plans { grid-template-columns: 1fr; } .shop-plan { flex-direction: row; flex-wrap: wrap; align-items: center; } .shop-plan .shop-plan-head { flex: 1 1 100px; } .shop-plan .shop-btn { flex: 1 1 100%; }
  .shop-gift-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .shop-gift-art { width: 84px; height: 84px; } .shop-gift-art svg { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) { .shop-gift.t-mythic .shop-gift-art { animation: none; } }

/* v7.5 — specials (supporter tiers + titles teaser) */
.shop-sp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.shop-sup { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 12px 12px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .09); background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); text-align: center; transition: transform .25s, border-color .25s; }
.shop-sup:hover { transform: translateY(-3px); }
.shop-sup b { font-size: 14px; } .shop-sup small { color: var(--muted); font-size: 12px; line-height: 1.5; min-height: 36px; } .shop-sup .shop-btn { width: 100%; min-height: 36px; font-size: 13px; margin-top: auto; }
.shop-sup-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: #e7c98a; background: rgba(231, 201, 138, .14); }
.shop-sup-ic .i { width: 22px; height: 22px; }
.shop-sup.s-bronze .shop-sup-ic { color: #f0b48a; background: rgba(205, 127, 50, .2); } .shop-sup.s-silver .shop-sup-ic { color: #e5e7eb; background: rgba(203, 213, 225, .18); } .shop-sup.s-gold .shop-sup-ic { color: #ffe9a8; background: rgba(251, 191, 36, .2); box-shadow: 0 0 18px rgba(251, 191, 36, .3); }
.shop-sup.s-gold { border-color: rgba(251, 191, 36, .4); } .shop-titles { border-color: rgba(231, 201, 138, .3); }
@media (max-width: 720px) { .shop-sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .shop-sup small { min-height: 0; } }
/* v7.5 — floating feedback widget */
.fbw-btn { position: fixed; z-index: 60; inset-inline-end: 18px; bottom: calc(var(--player-h, 92px) + 18px); display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid rgba(231, 201, 138, .45); background: linear-gradient(135deg, rgba(124, 58, 237, .85), rgba(59, 130, 246, .75)); color: #fff; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 12px 30px -10px rgba(124, 58, 237, .7); backdrop-filter: blur(10px); transition: transform .25s, opacity .25s; }
.fbw-btn .i { width: 16px; height: 16px; } .fbw-btn:hover { transform: translateY(-2px); }
body.fs-mode .fbw-btn, body.page-open .fbw-btn { opacity: 0; pointer-events: none; }
.fbw-pop { position: fixed; z-index: 61; inset-inline-end: 18px; bottom: calc(var(--player-h, 92px) + 70px); width: min(360px, calc(100vw - 36px)); padding: 18px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(14, 12, 26, .96); color: var(--ink, #fff); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8); backdrop-filter: blur(18px); transform-origin: bottom right; animation: fbwIn .3s cubic-bezier(.2, .9, .3, 1.2); }
[dir=rtl] .fbw-pop { transform-origin: bottom left; }
@keyframes fbwIn { from { opacity: 0; transform: translateY(12px) scale(.94); } }
.fbw-pop[hidden] { display: none; }
.fbw-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .fbw-head b { font-size: 16px; }
.fbw-x { appearance: none; border: 0; background: rgba(255, 255, 255, .08); color: inherit; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 16px; }
.fbw-sub { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.fbw-stars { display: flex; justify-content: center; gap: 4px; direction: ltr; margin: 4px 0 10px; }
.fbw-stars button { appearance: none; background: none; border: 0; font-size: 32px; line-height: 1; padding: 0 2px; color: rgba(255, 255, 255, .22); cursor: pointer; transition: color .15s, transform .15s; }
.fbw-stars button.on, .fbw-stars button:hover { color: #fbbf24; text-shadow: 0 0 14px rgba(251, 191, 36, .6); } .fbw-stars button:hover { transform: scale(1.15); }
.fbw-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.fbw-topics label { position: relative; } .fbw-topics input { position: absolute; opacity: 0; inset: 0; pointer-events: none; }
.fbw-topics span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); font-size: 12px; cursor: pointer; color: var(--muted); }
.fbw-topics input:checked + span { background: rgba(231, 201, 138, .16); border-color: rgba(231, 201, 138, .55); color: #f5e6c4; }
.fbw-pop textarea, .fbw-pop input { width: 100%; box-sizing: border-box; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); color: inherit; font: inherit; font-size: 14px; margin-bottom: 8px; }
.fbw-pop textarea { min-height: 84px; resize: vertical; }
.fbw-acts { display: flex; align-items: center; gap: 8px; }
.fbw-send { flex: 1; min-height: 40px; border-radius: 12px; border: 0; background: linear-gradient(135deg, #7c3aed, #3b82f6); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.fbw-send:disabled { opacity: .6; cursor: default; }
.fbw-link { min-height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: transparent; color: inherit; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.fbw-ok { text-align: center; padding: 18px 6px 8px; } .fbw-ok .big { font-size: 42px; margin-bottom: 6px; } .fbw-ok b { display: block; font-size: 16px; margin-bottom: 4px; } .fbw-ok p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.fbw-err { color: #fb7185; font-size: 12.5px; margin: -2px 0 8px; min-height: 1em; }
@media (max-width: 720px) { .fbw-btn { padding: 0; width: 44px; justify-content: center; } .fbw-btn span { display: none; } .fbw-pop { inset-inline: 12px; width: auto; bottom: calc(var(--player-h, 92px) + 66px); } }