/* plans-ui.css — карточки тарифов (public/plans-ui.js), общие для главной и кабинета. Подключается в конце <head>. */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:14px;align-items:stretch;}
.plan{position:relative;background:var(--bg-elev-2,#191f28);border:1px solid var(--border,#262e3a);border-radius:14px;padding:24px 20px 20px;display:flex;flex-direction:column;gap:11px;transition:transform .15s,border-color .15s,box-shadow .15s;}
.plan:hover{transform:translateY(-3px);border-color:#3a4558;box-shadow:0 12px 30px rgba(0,0,0,.35);}
.plan.featured{border-color:rgba(255,154,77,.6);background:linear-gradient(180deg,rgba(255,154,77,.10),var(--bg-elev-2,#191f28) 55%);}
.plan .badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,var(--accent-strong,#ffb066),var(--accent,#ff9a4d));color:#1a1005;font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:3px 12px;border-radius:100px;white-space:nowrap;}
.plan .ribbon{position:absolute;top:12px;right:12px;background:var(--danger,#ff5c72);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:100px;}
.plan .p-title{font-family:var(--font-display,inherit);font-size:17px;font-weight:600;text-align:center;}
.plan .p-price{text-align:center;line-height:1.15;}
.plan .p-price .old{display:block;font-size:13px;color:var(--text-faint,#7d889a);text-decoration:line-through;margin-bottom:2px;}
.plan .p-price .amount{font-family:var(--font-display,inherit);font-size:31px;font-weight:700;}
.plan .p-permonth{text-align:center;font-size:12px;color:var(--text-dim,#8a93a5);min-height:18px;}
.plan .p-permonth .save{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:100px;background:var(--success-bg,rgba(87,224,138,.10));color:var(--success,#57e08a);font-weight:600;}
.plan .p-study{text-align:center;font-size:12.5px;color:var(--text,#e6ebf2);background:var(--bg,#0b0e13);border:1px solid var(--border-soft,#1a2029);border-radius:8px;padding:7px 8px;}
.plan .p-study b{color:var(--accent-strong,#ffb066);font-weight:700;}
.plan .p-timer{text-align:center;font-size:11.5px;color:var(--warn,#ffcf5c);background:var(--warn-bg,rgba(255,207,92,.10));border-radius:8px;padding:6px 8px;line-height:1.4;}
.plan .p-timer b{font-family:var(--font-mono,ui-monospace,monospace);font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;}
.plan ul{list-style:none;margin:0;padding:11px 0 0;border-top:1px dashed var(--border,#262e3a);display:flex;flex-direction:column;gap:7px;font-size:12.5px;color:var(--text-dim,#8a93a5);}
.plan li{display:flex;gap:8px;align-items:flex-start;}
.plan li::before{content:"✓";color:var(--success,#57e08a);font-weight:700;flex:none;}
.plan li b{color:var(--text,#e6ebf2);font-weight:600;}
.plan .p-effect{font-size:11.5px;color:var(--text-dim,#8a93a5);background:var(--bg,#0b0e13);border:1px solid var(--border-soft,#1a2029);border-radius:8px;padding:8px 10px;line-height:1.45;margin-top:auto;}
.plan .p-effect b{color:var(--accent-strong,#ffb066);font-weight:600;}
.plan .p-extra{margin-top:auto;display:flex;flex-direction:column;gap:11px;}
.plan .p-effect + button, .plan button.primary{width:100%;}
@media (max-width:900px) {
  .plans{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto;}
}