/* Platform module: live-demo banner, read-only plan bar, plan-expiry modal, demo sign-in overlay,
   subscription plan cards and landing-page pricing. Theme tokens only (light + dark). */

/* thin bars above the top bar (signed-in layout) */
.sys-bars:empty { display: none; }
.sys-bar { display: flex; align-items: center; gap: .6rem; padding: .45rem 1rem; font-size: .85rem; line-height: 1.35; color: #fff; }
.sys-bar .grow { flex: 1; min-width: 0; }
.sys-bar .btn { padding: .15rem .65rem; font-size: .78rem; font-weight: 600; }
.sys-bar.demo { background: linear-gradient(90deg, var(--violet), var(--brand)); }
.sys-bar.expired { background: var(--bad); }
@media (max-width: 575.98px) { .sys-bar { font-size: .78rem; padding: .4rem .75rem; } }

/* "Opening the live demo…" overlay on the login page */
.demo-overlay { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(3px); animation: rise var(--dur, .2s) var(--ease, ease-out); }
.demo-overlay-card { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 1.6rem 2.2rem; border-radius: var(--radius-lg, 16px); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); text-align: center; }
.demo-overlay-card small { color: var(--muted); }

/* plan-expiry modal */
.plan-modal { text-align: center; }
.plan-modal .pm-ic { width: 56px; height: 56px; margin: 0 auto .75rem; border-radius: 50%; display: grid; place-items: center; }
.plan-modal .pm-ic.warn { background: var(--warn-soft); color: var(--warn); }
.plan-modal .pm-ic.bad { background: var(--bad-soft); color: var(--bad); }
.plan-modal .pm-ic .icon { width: 26px; height: 26px; }
.plan-modal .d-flex { justify-content: center !important; }

/* subscription page */
.plan-card { height: 100%; display: flex; flex-direction: column; }
.plan-card.featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-sm); }
.plan-price strong { font-size: 1.6rem; }
.plan-feat { list-style: none; padding: 0; margin: .75rem 0 1rem; flex: 1; font-size: .9rem; }
.plan-feat li { display: flex; gap: .45rem; align-items: flex-start; padding: .2rem 0; }
.plan-feat .icon { color: var(--ok); margin-top: 3px; flex-shrink: 0; }
.btn-group .btn.active { background: var(--brand); color: var(--brand-ink, #fff); border-color: var(--brand); }

/* landing page pricing */
.lp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; align-items: stretch; }
.lp-plan { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 16px); padding: 1.5rem; }
.lp-plan.featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow); }
.lp-plan-tag { position: absolute; top: -.7rem; left: 1.25rem; padding: .15rem .6rem; border-radius: 99px; background: var(--brand); color: var(--brand-ink, #fff); font-size: .72rem; font-weight: 700; letter-spacing: .03em; }
.lp-plan h3 { font-size: 1.2rem; margin-bottom: .2rem; }
.lp-plan-desc { color: var(--muted); font-size: .9rem; min-height: 2.6em; }
.lp-price strong { font-size: 2rem; }
.lp-price span, .lp-price-y { color: var(--muted); font-size: .88rem; }
.lp-plan ul { list-style: none; padding: 0; margin: 1rem 0 1.25rem; flex: 1; }
.lp-plan li { display: flex; gap: .45rem; padding: .22rem 0; font-size: .92rem; }
.lp-plan li .icon { color: var(--ok); margin-top: 3px; flex-shrink: 0; }