/* ==== Карточки тарифов (единый вид для premium.html и shop.html) ====
   Перенесено из инлайн-стилей premium.html. Переменные с фолбэками,
   чтобы карточки выглядели одинаково на любой странице. */
.plans-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 22px; align-items: stretch; margin-top: 6px; }
.plan {
  position: relative; padding: 30px 26px 24px; border-radius: var(--r-lg, 20px);
  border: 1px solid rgba(201,179,236,.18);
  background:
    radial-gradient(140% 60% at 50% 0%, rgba(179,136,255,.14), transparent 70%),
    linear-gradient(180deg, rgba(30,18,58,.85) 0%, rgba(18,10,36,.95) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 60px -20px rgba(0,0,0,.6);
  display:flex; flex-direction:column;
  transition: transform .22s cubic-bezier(.2,.9,.3,1.2), box-shadow .22s, border-color .22s;
}
.plan::before { content:""; position:absolute; inset:0; border-radius:inherit; background: radial-gradient(80% 40% at 50% -10%, rgba(255,255,255,.06), transparent 60%); pointer-events:none; }
.plan:hover { transform: translateY(-6px); }
.plan--popular {
  border-color: rgba(255,214,102,.45);
  background:
    radial-gradient(160% 70% at 50% 0%, rgba(255,214,102,.16), transparent 65%),
    radial-gradient(140% 60% at 50% 100%, rgba(179,136,255,.14), transparent 70%),
    linear-gradient(180deg, rgba(38,25,58,.9) 0%, rgba(22,12,38,.95) 100%);
  box-shadow: inset 0 1px 0 rgba(255,214,102,.2), 0 0 0 1px rgba(255,214,102,.15) inset, 0 30px 70px -20px rgba(255,166,60,.28), 0 24px 60px -20px rgba(0,0,0,.6);
}
.plan--popular:hover { box-shadow: inset 0 1px 0 rgba(255,214,102,.28), 0 0 0 1px rgba(255,214,102,.25) inset, 0 40px 90px -20px rgba(255,166,60,.45), 0 24px 60px -20px rgba(0,0,0,.7); }
.plan--prem {
  border-color: rgba(179,136,255,.5);
  background:
    radial-gradient(160% 70% at 50% 0%, rgba(155,107,255,.22), transparent 65%),
    radial-gradient(120% 60% at 50% 100%, rgba(255,214,102,.08), transparent 70%),
    linear-gradient(180deg, rgba(48,26,88,.88) 0%, rgba(24,12,44,.95) 100%);
  box-shadow: inset 0 1px 0 rgba(179,136,255,.28), 0 30px 70px -20px rgba(122,68,200,.35), 0 24px 60px -20px rgba(0,0,0,.7);
}
.plan-badge {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  font-size:.66rem; font-weight:800; letter-spacing:.14em; padding:6px 16px; border-radius:999px;
  background: linear-gradient(135deg,#ffe6a8,#ffd166,#f5a25a); color:#2a1c05;
  box-shadow: 0 0 20px rgba(255,209,102,.5), 0 6px 18px rgba(255,166,60,.25); white-space:nowrap;
}
.plan-name { font-family: var(--font-display, "Cormorant Garamond", Georgia, serif); font-size: 1.75rem; font-weight: 700; text-align:center; color:#f7f2ff; margin: 8px 0 0; letter-spacing:.01em; text-shadow: 0 0 24px rgba(179,136,255,.35); }
.plan--popular .plan-name { text-shadow: 0 0 26px rgba(255,214,102,.4); color:#fff7e0; }
.plan--prem .plan-name { text-shadow: 0 0 28px rgba(179,136,255,.5); color:#f0e6ff; }
.plan-divider { height:1px; width:60px; margin:10px auto 16px; background: linear-gradient(90deg, transparent, rgba(201,179,236,.5), transparent); }
.plan--popular .plan-divider { background: linear-gradient(90deg, transparent, rgba(255,214,102,.7), transparent); }
.plan--prem .plan-divider { background: linear-gradient(90deg, transparent, rgba(179,136,255,.7), transparent); }
.plan-price {
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif); font-weight:700; font-size: 2.6rem; line-height:1;
  color:#ede2ff; text-align:center; margin: 4px 0 6px;
  display:flex; justify-content:center; align-items:baseline; gap:8px; flex-wrap:wrap;
  text-shadow: 0 0 24px rgba(255,214,102,.25);
}
.plan-price--gold { color:#ffe08a; text-shadow: 0 0 30px rgba(255,214,102,.5); }
.plan-price small { font-family:system-ui,sans-serif; font-size:.68rem; color: var(--text-muted, rgba(214,196,242,.8)); font-weight:500; }
.plan-price-old { font-family:system-ui,sans-serif; font-size:1.05rem; color: var(--text-faint, rgba(190,172,222,.5)); text-decoration:line-through; margin-right:2px; }
.plan-price-new { color:#ffe08a; }
.plan-discount-badge {
  font-family:system-ui,sans-serif; font-size:.7rem; font-weight:800;
  color:#231a00; letter-spacing:.02em;
  background: linear-gradient(135deg,#ffe6a8,#ffd166);
  padding:3px 9px; border-radius:8px;
  box-shadow: 0 4px 12px -2px rgba(255,166,60,.5); vertical-align:middle;
}
.plan-discount-label {
  display:block; margin:6px auto 0; width:fit-content;
  font-family:system-ui,sans-serif; font-size:.7rem; font-weight:600;
  color:#ffd7a3; text-align:center; letter-spacing:.03em;
  padding:2px 10px; border-radius:999px;
  background: rgba(255,214,102,.08); border: 1px solid rgba(255,214,102,.24);
}
.plan-next-price { color:rgba(233,222,255,.65); font-size:.78rem; margin: 8px 0 20px; line-height:1.3; font-family:system-ui,sans-serif; font-weight:500; text-align:center; }
.plan-next-price b { color:#ede2ff; font-weight:700; }
.plan-feat { list-style:none; padding:0; margin: 4px 0 22px; flex:1; }
.plan-feat li { position: relative; padding: 8px 0 8px 30px; font-size: .94rem; font-weight: 500; color:#ede2ff; line-height:1.4; }
.plan-feat li::before { content:""; position:absolute; left:4px; top:12px; width:14px; height:14px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #aef0e0, #4ec9a9); box-shadow: 0 0 10px rgba(126,233,208,.55); }
.plan-feat li::after { content:"\2713"; position:absolute; left:6px; top:9px; font-size:.7rem; color:#0e2a24; font-weight:900; }
.plan-feat li.no { color: var(--text-faint, rgba(190,172,222,.5)); }
.plan-feat li.no::before { background: rgba(120,110,150,.25); box-shadow:none; }
.plan-feat li.no::after { content:"\2715"; color:#6a5f8a; }
.plan-cta { width:100%; padding: 14px; border-radius: 12px; font-family: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; border: 1px solid rgba(201,179,236,.4); background: transparent; color:#f7f2ff; transition: .15s; }
.plan-cta:hover { border-color:#aef0e0; color:#aef0e0; box-shadow: 0 0 16px rgba(126,233,208,.25); }
.plan--popular .plan-cta { background: linear-gradient(135deg,#ffe6a8,#ffd166); color:#2a1c05; border:0; }
.plan--popular .plan-cta:hover { box-shadow: 0 0 22px rgba(255,209,102,.55); color:#2a1c05; }
.plan--prem .plan-cta { background: linear-gradient(135deg,#9b6bff,#7a3ec0); color:#fff; border:0; }
.plan-autorenew-note { font-size:.72rem; line-height:1.45; color:rgba(233,222,255,.55); margin-top:12px; padding:0 2px; text-align:center; letter-spacing:.01em; }
.plan-autorenew-note b { color:rgba(233,222,255,.8); font-weight:600; }
.plan-autorenew-note a { color:inherit; text-decoration:underline; text-underline-offset:2px; }