/* ==========================================================================
   PowerPHP — Account group pages (pp-dash-account.css)
   account-settings.html · account-credit-card.html · account-subscriptions.html
   Relies on tokens from pp-header-footer.css + pp-dashboard.css.
   Namespaces: .pp-acc-* (shared) · .pp-set-* (settings) · .pp-cc-* (cards) · .pp-sub-* (subscriptions)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared: card heads, fields, switches, chips, toast, modal
   -------------------------------------------------------------------------- */
.pp-acc-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.pp-acc-head__icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; color: var(--tone, var(--pp-teal-600)); background: var(--tone-bg, var(--pp-mint)); }
.pp-acc-head__icon .material-icons-outlined { font-size: 22px; }
.pp-acc-head__text { flex: 1 1 260px; min-width: 0; }
.pp-acc-head__text .pp-dcard__sub { margin-top: 4px; }
.pp-acc-head__aside { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-acc-head--cyan { --tone: #0b9daf; --tone-bg: #dff7fb; }
.pp-acc-head--cream { --tone: #a0712f; --tone-bg: #fbf1e3; }
.pp-acc-head--green { --tone: var(--pp-green); --tone-bg: var(--pp-green-bg); }
.pp-acc-head--rose { --tone: var(--pp-rose); --tone-bg: var(--pp-rose-bg); }

.pp-acc-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.pp-acc-grid2 > .is-full { grid-column: 1 / -1; }
.pp-acc-field { display: grid; gap: 8px; min-width: 0; align-content: start; }
.pp-acc-field > label, .pp-acc-label { font-size: 13px; font-weight: 500; color: var(--pp-ink); }
.pp-acc-label small, .pp-acc-field > label small { font-weight: 300; color: var(--pp-faint); margin-left: 4px; }
.pp-acc-control { position: relative; display: flex; align-items: center; }
.pp-acc-control > .material-icons-outlined:first-child { position: absolute; left: 14px; font-size: 19px; color: var(--pp-faint); pointer-events: none; }
.pp-acc-input {
  width: 100%; height: 50px; padding: 0 16px; border: 0; border-radius: 14px; outline: 0;
  background: var(--pp-bg-2); box-shadow: inset 0 0 0 1px rgba(17, 59, 62, .06);
  font: 300 14.5px/1 var(--font-heading, "Lexend Deca", sans-serif); letter-spacing: -.01em; color: var(--pp-ink);
  transition: box-shadow .2s, background .2s; -webkit-appearance: none; appearance: none;
}
.pp-acc-control > .material-icons-outlined:first-child ~ .pp-acc-input { padding-left: 44px; }
.pp-acc-input::placeholder { color: #a3a9b8; }
.pp-acc-input:hover { box-shadow: inset 0 0 0 1px rgba(17, 59, 62, .14); }
.pp-acc-input:focus { background: #fff; box-shadow: 0 0 0 1.5px rgba(0, 188, 212, .65), 0 0 0 5px rgba(0, 188, 212, .12); }
.pp-acc-control:focus-within > .material-icons-outlined:first-child { color: var(--pp-cyan); }
select.pp-acc-input { padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%235b6278' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4 5 6.5 7.5 4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; }
.pp-acc-prefix { position: absolute; left: 16px; font-size: 14.5px; font-weight: 500; color: var(--pp-teal-600); pointer-events: none; }
.pp-acc-prefix ~ .pp-acc-input { padding-left: 34px; }
.pp-acc-eye { position: absolute; right: 6px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 11px; background: transparent; color: var(--pp-faint); cursor: pointer; transition: background .2s, color .2s; }
.pp-acc-eye:hover { background: #fff; color: var(--pp-teal-600); }
.pp-acc-eye .material-icons-outlined { font-size: 19px; }
.pp-acc-control .pp-acc-eye ~ .pp-acc-input, .pp-acc-input.has-eye { padding-right: 50px; }
.pp-acc-hint { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 300; color: var(--pp-ink-2); }
.pp-acc-hint .material-icons-outlined { font-size: 15px; }
.pp-acc-hint.is-ok { color: var(--pp-green); }
.pp-acc-hint.is-bad { color: var(--pp-rose); }

.pp-acc-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--pp-line-2); }
.pp-acc-actions__note { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 300; color: var(--pp-ink-2); }
.pp-acc-actions__note .material-icons-outlined { font-size: 16px; color: var(--pp-teal-400); }

/* chips (status) */
.pp-acc-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; color: var(--pp-teal-800); background: var(--pp-bg-2); }
.pp-acc-chip .material-icons-outlined { font-size: 14px; }
.pp-acc-chip.is-green { color: var(--pp-green); background: var(--pp-green-bg); }
.pp-acc-chip.is-amber { color: var(--pp-amber); background: var(--pp-amber-bg); }
.pp-acc-chip.is-rose { color: var(--pp-rose); background: var(--pp-rose-bg); }
.pp-acc-chip.is-cyan { color: #0b8a9a; background: #dff7fb; }
.pp-acc-chip.is-cream { color: #8a5f22; background: var(--pp-cream); }
.pp-acc-chip.is-dark { color: var(--pp-cream); background: var(--pp-teal-800); }
.pp-acc-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }

/* switch */
.pp-acc-switch { position: relative; flex: none; display: inline-block; width: 46px; height: 28px; cursor: pointer; }
.pp-acc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.pp-acc-switch span { position: absolute; inset: 0; border-radius: 999px; background: #dfe5ea; transition: background .25s var(--pp-ease); }
.pp-acc-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(13, 48, 51, .25); transition: transform .25s var(--pp-ease); }
.pp-acc-switch input:checked + span { background: var(--pp-teal-600, #1d5f63); }
.pp-acc-switch input:checked + span::after { transform: translateX(18px); }
.pp-acc-switch input:focus-visible + span { box-shadow: 0 0 0 3px rgba(0, 188, 212, .35); }

/* option rows (toggles, sessions) */
.pp-acc-rows { display: grid; gap: 8px; }
.pp-acc-row { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: var(--pp-bg-2); transition: background .2s, opacity .3s, transform .3s var(--pp-ease); }
.pp-acc-row:hover { background: #edf2f5; }
.pp-acc-row__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 13px; color: var(--pp-teal-600); background: #fff; box-shadow: 0 0 0 1px rgba(17, 59, 62, .06); }
.pp-acc-row__icon .material-icons-outlined { font-size: 20px; }
.pp-acc-row__body { flex: 1; min-width: 0; }
.pp-acc-row__body b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 500; color: var(--pp-ink); }
.pp-acc-row__body small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 300; color: var(--pp-ink-2); }
.pp-acc-row.is-leaving { opacity: 0; transform: translateX(16px); }

.pp-acc-subtitle { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 26px 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--pp-ink); }
.pp-acc-subtitle::after { content: ""; flex: 1; height: 1px; background: var(--pp-line-2); order: 1; }
.pp-acc-subtitle > * { order: 2; }
.pp-acc-subtitle > span:first-child { order: 0; }

/* text button */
.pp-acc-tbtn { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border: 0; border-radius: 11px; cursor: pointer; background: #fff; font: 500 12.5px/1 var(--font-heading, "Lexend Deca", sans-serif); color: var(--pp-ink); box-shadow: inset 0 0 0 1px rgba(17, 59, 62, .1); transition: background .2s, color .2s, box-shadow .2s; white-space: nowrap; }
.pp-acc-tbtn .material-icons-outlined { font-size: 16px; }
.pp-acc-tbtn:hover { background: var(--pp-mint); color: var(--pp-teal-900); }
.pp-acc-tbtn.is-danger:hover { background: var(--pp-rose-bg); color: var(--pp-rose); box-shadow: inset 0 0 0 1px rgba(229, 72, 77, .25); }
.pp-dbtn--cream { color: var(--pp-teal-900, #0d3033) !important; background: var(--pp-cream); box-shadow: 0 14px 24px -14px rgba(138, 106, 61, .7); }
.pp-dbtn--cream:hover { background: #fff; }
.pp-dbtn--light { color: #fff !important; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.pp-dbtn--light:hover { background: rgba(255, 255, 255, .18); }

/* toast */
.pp-acc-toast { position: fixed; z-index: 1200; left: 50%; top: calc(var(--pp-sticky-top, 73px) + 16px); display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 12px 18px 12px 12px; border-radius: 16px; color: #fff; background: var(--pp-teal-800); box-shadow: 0 24px 40px -18px rgba(13, 48, 51, .8); font: 400 14px/1.3 var(--font-heading, "Lexend Deca", sans-serif); transform: translate(-50%, -16px); opacity: 0; visibility: hidden; transition: transform .35s var(--pp-ease), opacity .35s, visibility 0s .35s; }
.pp-acc-toast.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition-delay: 0s; }
.pp-acc-toast__icon { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--pp-teal-900, #0d3033); background: #b8f5d4; }
.pp-acc-toast__icon .material-icons-outlined { font-size: 18px; }

/* modal */
.pp-acc-modal { position: fixed; z-index: 1150; inset: 0; display: grid; place-items: center; padding: 20px; visibility: hidden; transition: visibility 0s .3s; font-family: var(--font-heading, "Lexend Deca", sans-serif); }
.pp-acc-modal.is-open { visibility: visible; transition-delay: 0s; }
.pp-acc-modal__scrim { position: absolute; inset: 0; background: rgba(10, 38, 40, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s; }
.pp-acc-modal.is-open .pp-acc-modal__scrim { opacity: 1; }
.pp-acc-modal__dialog { position: relative; width: min(880px, 100%); max-height: calc(100vh - 40px); overflow: auto; border-radius: 28px; background: #fff; box-shadow: 0 40px 80px -30px rgba(10, 38, 40, .6); transform: translateY(18px) scale(.98); opacity: 0; transition: transform .35s var(--pp-ease), opacity .3s; overscroll-behavior: contain; }
.pp-acc-modal.is-open .pp-acc-modal__dialog { transform: none; opacity: 1; }
.pp-acc-modal__close { position: absolute; z-index: 2; top: 16px; right: 16px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 13px; cursor: pointer; color: var(--pp-ink); background: var(--pp-bg-2); transition: background .2s, transform .2s; }
.pp-acc-modal__close:hover { background: var(--pp-rose-bg); color: var(--pp-rose); transform: rotate(90deg); }
html.pp-acc-lock { overflow: hidden; }

/* --------------------------------------------------------------------------
   SETTINGS
   -------------------------------------------------------------------------- */
.pp-set { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 22px; align-items: start; }
.pp-set__nav { position: sticky; top: calc(var(--pp-sticky-top, 124px) + 20px); display: grid; gap: 14px; transition: top .35s var(--pp-ease); }
.pp-set__body { display: grid; gap: 22px; min-width: 0; }
.pp-set__body > section { scroll-margin-top: calc(var(--pp-sticky-top, 124px) + 24px); }

.pp-set-navcard { padding: 14px; border-radius: 24px; background: #fff; box-shadow: var(--pp-dcard-ring), var(--pp-dcard-shadow); }
.pp-set-me { display: flex; align-items: center; gap: 12px; padding: 6px 6px 14px; border-bottom: 1px solid var(--pp-line-2); margin-bottom: 8px; }
.pp-set-me img { width: 44px; height: 44px; flex: none; border-radius: 14px; object-fit: cover; }
.pp-set-me b { display: block; font-size: 14.5px; font-weight: 600; color: var(--pp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-set-me small { display: block; margin-top: 2px; font-size: 12px; font-weight: 300; color: var(--pp-ink-2); }
.pp-set-links { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.pp-set-link { position: relative; display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 10px; border-radius: 14px; font-size: 14px; color: var(--pp-ink-2) !important; transition: background .2s, color .2s; }
.pp-set-link > .material-icons-outlined:first-child { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; font-size: 19px; transition: background .2s, color .2s; }
.pp-set-link span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-set-link em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--pp-faint); }
.pp-set-link em.is-warn { width: 8px; height: 8px; border-radius: 50%; background: var(--pp-amber); font-size: 0; }
.pp-set-link:hover { background: var(--pp-bg-2); color: var(--pp-ink) !important; }
.pp-set-link.is-active { background: var(--pp-mint); color: var(--pp-teal-900, #0d3033) !important; font-weight: 500; }
.pp-set-link.is-active > .material-icons-outlined:first-child { color: #fff; background: var(--pp-teal-800); box-shadow: 0 8px 14px -8px rgba(13, 48, 51, .8); }

.pp-set-progress { padding: 16px; border-radius: 22px; background: linear-gradient(150deg, #ebffd0, var(--pp-mint)); box-shadow: inset 0 0 0 1px rgba(31, 122, 77, .08); }
.pp-set-progress__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pp-set-progress__top b { font-size: 14px; font-weight: 600; color: var(--pp-ink); }
.pp-set-progress__top em { font-style: normal; font-size: 20px; font-weight: 700; letter-spacing: -.04em; color: var(--pp-teal-800); }
.pp-set-progress__bar { height: 8px; margin: 10px 0; border-radius: 8px; background: rgba(255, 255, 255, .8); overflow: hidden; }
.pp-set-progress__bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--pp-teal-400), var(--pp-cyan)); transform-origin: left; animation: ppBar 1.1s var(--pp-ease) both .2s; transition: width .5s var(--pp-ease); }
.pp-set-progress small { display: block; font-size: 12px; font-weight: 300; line-height: 1.45; color: var(--pp-ink-2); }
.pp-set-progress a { color: var(--pp-teal-600) !important; font-weight: 500; }

/* cover + avatar uploader */
.pp-set-cover { position: relative; overflow: hidden; border-radius: 20px; aspect-ratio: 590 / 160; min-height: 150px; background: var(--pp-teal-800); }
.pp-set-cover img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .6s var(--pp-ease); }
.pp-set-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 38, 40, 0) 40%, rgba(10, 38, 40, .55)); pointer-events: none; }
.pp-set-cover:hover img { transform: scale(1.03); }
.pp-set-upl { position: absolute; z-index: 1; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 15px; cursor: pointer; color: var(--pp-ink); background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 12px 24px -14px rgba(10, 38, 40, .7); transition: transform .2s var(--pp-ease), background .2s; }
.pp-set-upl:hover { transform: translateY(-2px); background: #fff; }
.pp-set-upl input, .pp-set-avatar__btn input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pp-set-upl:focus-within, .pp-set-avatar__btn:focus-within { outline: 2px solid var(--pp-cyan); outline-offset: 2px; }
.pp-set-upl__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: var(--pp-cyan); }
.pp-set-upl__icon .material-icons-outlined { font-size: 19px; }
.pp-set-upl b { display: block; font-size: 13px; font-weight: 600; }
.pp-set-upl small { display: block; font-size: 11px; font-weight: 300; color: var(--pp-ink-2); }

.pp-set-idrow { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: -46px 0 24px; padding: 0 18px; position: relative; z-index: 2; }
.pp-set-avatar { position: relative; flex: none; }
.pp-set-avatar img { width: 104px; height: 104px; display: block; border-radius: 30px; object-fit: cover; border: 5px solid #fff; box-shadow: 0 18px 30px -18px rgba(10, 38, 40, .8); background: #fff; }
.pp-set-avatar__btn { position: absolute; right: -4px; bottom: -4px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; cursor: pointer; color: var(--pp-cream); background: var(--pp-teal-800); box-shadow: 0 0 0 3px #fff; transition: transform .2s var(--pp-ease), background .2s; }
.pp-set-avatar__btn:hover { transform: scale(1.08); background: var(--pp-teal-600, #1d5f63); }
.pp-set-avatar__btn .material-icons-outlined { font-size: 18px; }
.pp-set-idrow__who { flex: 1 1 200px; min-width: 0; padding-bottom: 4px; }
.pp-set-idrow__who b { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--pp-ink); }
.pp-set-idrow__who b .material-icons-outlined { font-size: 18px; color: var(--pp-cyan); }
.pp-set-idrow__who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-top: 3px; font-size: 13px; font-weight: 300; color: var(--pp-ink-2); }
.pp-set-idrow__btns { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 4px; }
.pp-set-idrow__btns label { position: relative; }

/* rich text editor (jquery.richtext) */
.pp-set-editor .richText { border: 0 !important; border-radius: 16px; background: var(--pp-bg-2) !important; box-shadow: inset 0 0 0 1px rgba(17, 59, 62, .06); overflow: hidden; transition: box-shadow .2s, background .2s; }
.pp-set-editor .richText:focus-within { background: #fff !important; box-shadow: 0 0 0 1.5px rgba(0, 188, 212, .65), 0 0 0 5px rgba(0, 188, 212, .12); }
.pp-set-editor .richText .richText-toolbar { border-bottom: 1px solid var(--pp-line-2) !important; background: rgba(255, 255, 255, .7); }
.pp-set-editor .richText .richText-toolbar ul { display: flex; flex-wrap: wrap; padding: 4px 6px; }
.pp-set-editor .richText .richText-toolbar ul li a { border-right: 0 !important; border-radius: 9px; color: var(--pp-ink-2) !important; }
.pp-set-editor .richText .richText-toolbar ul li a:hover { background: var(--pp-mint) !important; color: var(--pp-teal-900) !important; }
.pp-set-editor .richText .richText-editor { min-height: 150px; height: auto !important; border-left: 0 !important; background: transparent !important; padding: 14px 16px !important; font: 300 14.5px/1.6 var(--font-heading, "Lexend Deca", sans-serif) !important; color: var(--pp-ink) !important; }
.pp-set-editor .richText .richText-editor:focus { border-left: 0 !important; outline: 0; }
.pp-set-editor .richText .richText-editor { overflow-y: auto !important; max-height: 320px; }
.pp-set-editor .richText .richText-toolbar:last-child { border-bottom: 0 !important; border-top: 1px solid var(--pp-line-2) !important; background: transparent; }
.pp-set-editor .richText .richText-toolbar:last-child ul { justify-content: flex-end; padding: 2px 6px; }
.pp-set-editor .richText .richText-toolbar ul li a { display: grid !important; place-items: center; width: 34px; height: 32px; padding: 0 !important; }
.pp-set-editor .richText .richText-toolbar a.is-disabled { opacity: .35; }
/* the plugin ships FontAwesome class names — render Material Icons instead */
.pp-set-editor .richText .richText-toolbar .fa { display: inline-block; width: auto; font: normal 19px/1 "Material Icons Outlined"; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; }
.pp-set-editor .richText .richText-toolbar:last-child .fa { font-size: 17px; }
.pp-set-editor .fa-bold::before { content: "format_bold"; }
.pp-set-editor .fa-italic::before { content: "format_italic"; }
.pp-set-editor .fa-underline::before { content: "format_underlined"; }
.pp-set-editor .fa-align-left::before { content: "format_align_left"; }
.pp-set-editor .fa-align-center::before { content: "format_align_center"; }
.pp-set-editor .fa-align-right::before { content: "format_align_right"; }
.pp-set-editor .fa-list::before { content: "format_list_bulleted"; }
.pp-set-editor .fa-link::before { content: "link"; }
.pp-set-editor .fa-undo::before { content: "undo"; }
.pp-set-editor .fa-redo::before { content: "redo"; }
.pp-set-editor .fa-question-circle::before { content: "help_outline"; }
.pp-set-editor textarea.pp-acc-input { height: 150px; padding: 14px 16px; line-height: 1.6; resize: vertical; }
.pp-set-editor__foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 2px; }

/* password strength */
.pp-set-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 2px; }
.pp-set-meter i { height: 5px; border-radius: 5px; background: var(--pp-line-2, #eef1f4); transition: background .3s; }
.pp-set-meter[data-s="1"] i:nth-child(-n+1) { background: var(--pp-rose); }
.pp-set-meter[data-s="2"] i:nth-child(-n+2) { background: var(--pp-amber); }
.pp-set-meter[data-s="3"] i:nth-child(-n+3) { background: var(--pp-teal-400); }
.pp-set-meter[data-s="4"] i { background: var(--pp-green); }
.pp-set-lockrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 18px; border-radius: 16px; background: var(--pp-amber-bg); color: #7a5600; font-size: 13px; font-weight: 300; line-height: 1.45; }
.pp-set-lockrow .material-icons-outlined { font-size: 20px; color: var(--pp-amber); }

/* payout method cards */
.pp-set-pays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pp-set-pay { --brand: #0070e0; position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 20px; cursor: pointer; background: #fff; box-shadow: inset 0 0 0 1.5px var(--pp-line, #e6eaee); transition: box-shadow .25s, transform .25s var(--pp-ease), background .25s; }
.pp-set-pay:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px rgba(17, 59, 62, .2), 0 18px 30px -24px rgba(13, 48, 51, .6); }
.pp-set-pay.is-selected { background: linear-gradient(160deg, #fff 30%, var(--pp-mint)); box-shadow: inset 0 0 0 2px var(--pp-teal-400), 0 20px 34px -26px rgba(13, 48, 51, .7); }
.pp-set-pay--payoneer { --brand: #ff4d00; }
.pp-set-pay > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.pp-set-pay__top { display: flex; align-items: flex-start; gap: 14px; }
.pp-set-pay__logo { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 15px; background: color-mix(in srgb, var(--brand) 9%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent); }
.pp-set-pay__logo svg { width: 26px; height: 26px; }
.pp-set-pay__text { flex: 1; min-width: 0; }
.pp-set-pay__text h5 { margin: 0; font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; color: var(--pp-ink); }
.pp-set-pay__text p { margin: 5px 0 0; font-size: 12.5px; font-weight: 300; line-height: 1.5; color: var(--pp-ink-2); }
.pp-set-pay__check { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--pp-line, #dfe5ea); color: transparent; transition: background .2s, box-shadow .2s, color .2s; }
.pp-set-pay__check .material-icons-outlined { font-size: 16px; }
.pp-set-pay.is-selected .pp-set-pay__check { color: #fff; background: var(--pp-teal-800); box-shadow: none; }
.pp-set-pay__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-set-pay .pp-set-pay__default { display: none; }
.pp-set-pay.is-selected .pp-set-pay__default { display: inline-flex; }
.pp-set-pay .pp-acc-input { background: var(--pp-bg-2); }
.pp-set-pay.is-selected .pp-acc-input { background: #fff; }
.pp-set-info { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px; border-radius: 16px; background: var(--pp-bg-2); font-size: 13px; font-weight: 300; line-height: 1.5; color: var(--pp-ink-2); }
.pp-set-info b { font-weight: 600; color: var(--pp-ink); }
.pp-set-info > .material-icons-outlined { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; font-size: 20px; color: #0b9daf; background: #dff7fb; }

/* save bar */
.pp-set-savebar { position: sticky; z-index: 30; bottom: 18px; display: none; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 12px 12px 18px; border-radius: 20px; color: #fff; background: var(--pp-teal-800); box-shadow: 0 26px 44px -22px rgba(13, 48, 51, .95); }
.pp-set-savebar.is-on { display: flex; animation: ppSetUp .45s var(--pp-ease) both; }
@keyframes ppSetUp { from { transform: translateY(18px); opacity: 0; } }
.pp-set-savebar__text { flex: 1 1 200px; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.pp-set-savebar__text small { display: block; font-size: 12px; font-weight: 300; color: rgba(255, 255, 255, .6); }
.pp-set-savebar__pulse { position: relative; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--pp-cream); }
.pp-set-savebar__pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pp-cream); animation: ppDPing 2s cubic-bezier(0, 0, .2, 1) infinite; }
.pp-set-savebar__btns { display: flex; gap: 8px; }

/* --------------------------------------------------------------------------
   CREDIT CARDS
   -------------------------------------------------------------------------- */
.pp-kpis--3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pp-cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 20px; }
.pp-cc-item { display: flex; flex-direction: column; gap: 14px; min-width: 0; transition: opacity .35s, transform .35s var(--pp-ease); }
.pp-cc-item.is-leaving { opacity: 0; transform: scale(.94); }
.pp-cc-item.is-new { animation: ppCcIn .5s var(--pp-ease) both; }
@keyframes ppCcIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }

.pp-cc-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 1.586; padding: 20px 22px; border-radius: 22px; color: #fff; container-type: inline-size;
  background: radial-gradient(120% 140% at 100% 0%, #3e8e93 0%, rgba(62, 142, 147, 0) 55%), linear-gradient(135deg, #1b5357 0%, #113b3e 55%, #0b2a2c 100%);
  box-shadow: 0 24px 40px -24px rgba(13, 48, 51, .9), inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: transform .35s var(--pp-ease), box-shadow .35s;
}
.pp-cc-card::before { content: ""; position: absolute; z-index: -1; width: 260px; height: 260px; right: -90px; bottom: -150px; border-radius: 50%; border: 36px solid rgba(255, 255, 255, .05); }
.pp-cc-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .14) 45%, transparent 60%); transform: translateX(-100%); transition: transform .9s var(--pp-ease); }
.pp-cc-item:hover .pp-cc-card { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 32px 50px -26px rgba(13, 48, 51, 1); }
.pp-cc-item:hover .pp-cc-card::after { transform: translateX(100%); }
.pp-cc-card--cream { color: var(--pp-teal-900, #0d3033); background: radial-gradient(120% 140% at 100% 0%, #fff 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(135deg, #fbf4ea 0%, #f4e6d3 60%, #e9d2b2 100%); box-shadow: 0 24px 40px -26px rgba(138, 106, 61, .8), inset 0 0 0 1px rgba(138, 106, 61, .12); }
.pp-cc-card--cream::before { border-color: rgba(138, 106, 61, .07); }
.pp-cc-card--ink { background: radial-gradient(120% 140% at 100% 0%, #3a4256 0%, rgba(58, 66, 86, 0) 55%), linear-gradient(135deg, #2a3142, #161c2d); }
.pp-cc-card--cyan { background: radial-gradient(120% 140% at 100% 0%, #5fe0ee 0%, rgba(95, 224, 238, 0) 55%), linear-gradient(135deg, #00bcd4, #0b8a9a 60%, #0d6670); }
.pp-cc-item.is-expired .pp-cc-card { filter: saturate(.4); }
.pp-cc-item.is-expired .pp-cc-card .pp-cc-card__num { opacity: .6; }
.pp-cc-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pp-cc-chipimg { width: 40px; height: 30px; border-radius: 7px; background: linear-gradient(135deg, #f6dfa8, #d7a25e 55%, #f3d79b); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); position: relative; overflow: hidden; }
.pp-cc-chipimg::before { content: ""; position: absolute; inset: 7px 0; border-top: 1px solid rgba(0, 0, 0, .18); border-bottom: 1px solid rgba(0, 0, 0, .18); }
.pp-cc-chipimg::after { content: ""; position: absolute; inset: 0 14px; border-left: 1px solid rgba(0, 0, 0, .18); border-right: 1px solid rgba(0, 0, 0, .18); }
.pp-cc-card__brand { height: 34px; min-width: 52px; padding: 0 8px; display: grid; place-items: center; border-radius: 10px; background: #fff; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5); }
.pp-cc-card__brand svg { height: 22px; width: auto; display: block; }
.pp-cc-card__contactless { font-size: 22px !important; opacity: .7; transform: rotate(90deg); }
.pp-cc-card__mid { display: flex; align-items: center; gap: 10px; }
.pp-cc-card__num { font-size: clamp(13px, 6.4cqw, 20px); font-weight: 500; letter-spacing: .1em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px rgba(0, 0, 0, .15); }
.pp-cc-card--cream .pp-cc-card__num { text-shadow: none; }
.pp-cc-card__bot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.pp-cc-card__bot small { display: block; font-size: 9.5px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.pp-cc-card__bot b { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.pp-cc-card__flag { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); display: none; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pp-teal-900, #0d3033); background: #b8f5d4; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .4); }
.pp-cc-card__flag .material-icons-outlined { font-size: 13px; }
.pp-cc-item.is-default .pp-cc-card__flag { display: inline-flex; }

.pp-cc-meta { display: flex; align-items: flex-start; gap: 10px; padding: 0 4px; }
.pp-cc-meta__body { flex: 1; min-width: 0; }
.pp-cc-meta__body h6 { margin: 0; font-family: inherit; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--pp-ink); }
.pp-cc-meta__body h6 small { margin-left: 6px; font-size: 12px; font-weight: 300; color: var(--pp-ink-2); }
.pp-cc-meta__body p { margin: 4px 0 10px; font-size: 12.5px; font-weight: 300; line-height: 1.5; color: var(--pp-ink-2); }
.pp-cc-meta__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-cc-meta__chips .pp-cc-defchip { display: none; }
.pp-cc-item.is-default .pp-cc-defchip { display: inline-flex; }

/* actions menu */
.pp-cc-menu { position: relative; flex: none; }
.pp-cc-menu__btn { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 12px; cursor: pointer; color: var(--pp-ink-2); background: var(--pp-bg-2); transition: background .2s, color .2s; }
.pp-cc-menu__btn:hover, .pp-cc-menu.is-open .pp-cc-menu__btn { background: var(--pp-teal-800); color: #fff; }
.pp-cc-menu__list { position: absolute; z-index: 20; right: 0; top: calc(100% + 6px); width: 200px; padding: 6px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 59, 62, .07), 0 24px 40px -18px rgba(13, 48, 51, .45); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s var(--pp-ease), visibility 0s .2s; }
.pp-cc-menu.is-open .pp-cc-menu__list { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pp-cc-menu__list button { width: 100%; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border: 0; border-radius: 11px; cursor: pointer; background: transparent; text-align: left; font: 400 13.5px/1 var(--font-heading, "Lexend Deca", sans-serif); color: var(--pp-ink); transition: background .2s, color .2s; }
.pp-cc-menu__list button .material-icons-outlined { font-size: 18px; color: var(--pp-ink-2); }
.pp-cc-menu__list button:hover { background: var(--pp-mint); color: var(--pp-teal-900); }
.pp-cc-menu__list button.is-danger:hover { background: var(--pp-rose-bg); color: var(--pp-rose); }
.pp-cc-menu__list button.is-danger:hover .material-icons-outlined { color: var(--pp-rose); }
.pp-cc-menu__list button:disabled { opacity: .45; cursor: default; background: transparent; color: var(--pp-ink); }

.pp-cc-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 1.586; padding: 20px; border: 1.5px dashed rgba(0, 188, 212, .5); border-radius: 22px; cursor: pointer; text-align: center; background: linear-gradient(120deg, rgba(0, 188, 212, .06), rgba(231, 251, 241, .7)); font-family: inherit; color: var(--pp-ink); transition: border-color .2s, background .2s, transform .25s var(--pp-ease); }
.pp-cc-add:hover { border-color: var(--pp-cyan); background: rgba(0, 188, 212, .09); transform: translateY(-3px); }
.pp-cc-add__icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 16px; color: #fff; background: var(--pp-cyan); box-shadow: 0 12px 20px -10px rgba(0, 188, 212, .95); transition: transform .3s var(--pp-ease); }
.pp-cc-add:hover .pp-cc-add__icon { transform: rotate(90deg); }
.pp-cc-add b { font-size: 15px; font-weight: 600; }
.pp-cc-add small { font-size: 12.5px; font-weight: 300; color: var(--pp-ink-2); }
.pp-cc-addwrap { display: flex; flex-direction: column; }

/* modal layout */
.pp-cc-form { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); }
.pp-cc-form__preview { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 18px; padding: 30px 26px; background: linear-gradient(171deg, #ebffd0 0%, #e8fff3 45%, #e7fbf1 100%); }
.pp-cc-form__preview::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(17, 59, 62, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 59, 62, .05) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent 75%); }
.pp-cc-form__preview h6 { margin: 0; font-family: inherit; font-size: 20px; font-weight: 600; letter-spacing: -.03em; color: var(--pp-ink); }
.pp-cc-form__preview p { margin: 4px 0 0; font-size: 13px; font-weight: 300; line-height: 1.5; color: var(--pp-ink-2); }
.pp-cc-form__preview .pp-cc-card { width: 100%; }
.pp-cc-secure { display: grid; gap: 8px; margin-top: auto; }
.pp-cc-secure span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 300; color: var(--pp-ink-2); }
.pp-cc-secure .material-icons-outlined { font-size: 17px; color: var(--pp-green); }
.pp-cc-form__fields { padding: 30px 28px 26px; display: grid; gap: 16px; align-content: start; }
.pp-cc-form__fields h6 { margin: 0 50px 4px 0; font-family: inherit; font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--pp-ink); }
.pp-cc-form__row3 { display: grid; grid-template-columns: 1fr 1.2fr .8fr; gap: 14px; }
.pp-cc-form__brandhint { position: absolute; right: 12px; height: 26px; padding: 0 8px; display: grid; place-items: center; border-radius: 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--pp-teal-800); background: #fff; box-shadow: 0 0 0 1px rgba(17, 59, 62, .08); pointer-events: none; }
.pp-cc-form__check { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 300; color: var(--pp-ink-2); cursor: pointer; }
.pp-cc-form__check input { width: 18px; height: 18px; accent-color: var(--pp-teal-800); }
.pp-cc-form__btns { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.pp-acc-input.is-invalid { box-shadow: 0 0 0 1.5px rgba(229, 72, 77, .7), 0 0 0 5px rgba(229, 72, 77, .1) !important; }

/* billing side card */
.pp-cc-addr { display: grid; gap: 10px; }
.pp-cc-addr__row { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 16px; background: var(--pp-bg-2); }
.pp-cc-addr__row > .material-icons-outlined { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px; font-size: 19px; color: var(--pp-teal-600); background: #fff; }
.pp-cc-addr__row small { display: block; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--pp-faint); }
.pp-cc-addr__row b { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--pp-ink); }
.pp-cc-secure-card { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 14px; border-radius: 18px; color: #fff; background: var(--pp-teal-800); position: relative; overflow: hidden; isolation: isolate; }
.pp-cc-secure-card::before { content: ""; position: absolute; z-index: -1; width: 180px; height: 180px; right: -70px; top: -90px; border-radius: 50%; background: radial-gradient(circle, rgba(62, 142, 147, .8), rgba(62, 142, 147, 0) 70%); }
.pp-cc-secure-card > .material-icons-outlined { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 13px; color: var(--pp-teal-900, #0d3033); background: var(--pp-cream); font-size: 20px; }
.pp-cc-secure-card b { display: block; font-size: 14px; font-weight: 600; }
.pp-cc-secure-card small { display: block; font-size: 12px; font-weight: 300; color: rgba(255, 255, 255, .7); }

.pp-cc-method { display: inline-flex; align-items: center; gap: 8px; }
.pp-cc-method i.pp-cc-mini { width: 30px; height: 20px; display: grid; place-items: center; border-radius: 5px; font-style: normal; font-size: 8px; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--pp-teal-800); }
.pp-cc-method i.pp-cc-mini.is-mc { background: #161c2d; }
.pp-cc-method i.pp-cc-mini.is-pp { background: #0070e0; }
.pp-cc-dl { width: 34px; height: 34px; display: inline-grid; place-items: center; border: 0; border-radius: 11px; cursor: pointer; color: var(--pp-teal-600); background: var(--pp-bg-2); transition: background .2s, color .2s; }
.pp-cc-dl:hover { color: #fff; background: var(--pp-teal-800); }
.pp-cc-dl .material-icons-outlined { font-size: 18px; }
.pp-table tr.is-hidden { display: none; }
.pp-acc-empty-row td { text-align: center; padding: 30px 24px !important; color: var(--pp-ink-2); font-weight: 300; }

/* --------------------------------------------------------------------------
   SUBSCRIPTIONS
   -------------------------------------------------------------------------- */
.pp-sub-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center;
  padding: 26px 28px; border-radius: 26px; color: #fff; background: var(--pp-teal-800);
  box-shadow: 0 30px 50px -30px rgba(13, 48, 51, .95);
}
.pp-sub-hero::before { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; right: -120px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(62, 142, 147, .85), rgba(62, 142, 147, 0) 70%); }
.pp-sub-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 16px 16px; -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000); mask-image: linear-gradient(100deg, transparent 30%, #000); }
.pp-sub-hero__eyebrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-sub-hero__eyebrow .pp-acc-chip { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.pp-sub-hero__eyebrow .pp-acc-chip.is-live { color: #0d3033; background: #b8f5d4; box-shadow: none; }
.pp-sub-hero h2 { margin: 14px 0 6px; font-family: inherit; font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -.035em; line-height: 1.2; color: #fff; }
.pp-sub-hero p { margin: 0; max-width: 520px; font-size: 14px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, .72); }
.pp-sub-hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 20px; }
.pp-sub-fact { min-width: 0; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.pp-sub-fact small { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.pp-sub-fact b { display: block; margin-top: 4px; font-size: 15px; font-weight: 600; color: #fff; }
.pp-sub-hero__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.pp-sub-ring { position: relative; width: 200px; height: 200px; flex: none; }
.pp-sub-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pp-sub-ring circle { fill: none; stroke-width: 14; stroke-linecap: round; }
.pp-sub-ring .bg { stroke: rgba(255, 255, 255, .1); }
.pp-sub-ring .fg { stroke: url(#ppSubGrad); stroke-dasharray: 502.65; stroke-dashoffset: 502.65; transition: stroke-dashoffset 1.4s var(--pp-ease) .2s; }
.pp-sub-ring.is-in .fg { stroke-dashoffset: var(--off, 186); }
.pp-sub-ring__c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.pp-sub-ring__c b { font-size: 40px; font-weight: 700; letter-spacing: -.05em; line-height: 1; color: #fff; }
.pp-sub-ring__c b span { font-size: 18px; font-weight: 400; color: rgba(255, 255, 255, .55); }
.pp-sub-ring__c small { margin-top: 6px; font-size: 12px; color: rgba(255, 255, 255, .65); }
.pp-sub-ring__c em { margin: 8px auto 0; font-style: normal; display: inline-flex; height: 22px; align-items: center; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #0d3033; background: var(--pp-cream); }

.pp-sub-meters { display: grid; gap: 14px; }
.pp-sub-meter__row { display: flex; align-items: center; gap: 10px; }
.pp-sub-meter__row .pp-rank__icon { width: 36px; height: 36px; }
.pp-sub-meter__body { flex: 1; min-width: 0; }
.pp-sub-meter__top { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.pp-sub-meter__top b { font-weight: 500; color: var(--pp-ink); }
.pp-sub-meter__top em { font-style: normal; font-weight: 700; color: var(--pp-ink); }
.pp-sub-meter__top em small { font-weight: 300; color: var(--pp-faint); }
.pp-sub-meter__bar { height: 7px; margin-top: 7px; border-radius: 7px; background: var(--pp-bg-2); overflow: hidden; }
.pp-sub-meter__bar i { display: block; height: 100%; border-radius: 7px; background: var(--c, var(--pp-teal-400)); transform-origin: left; animation: ppBar 1.1s var(--pp-ease) both .3s; }
.pp-sub-chart { height: 170px; overflow: hidden; margin: 6px -10px -12px -10px; }
.pp-sub-total { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; margin-bottom: 16px; border-radius: 16px; background: var(--pp-bg-2); }
.pp-sub-total small { display: block; font-size: 12px; font-weight: 300; color: var(--pp-ink-2); }
.pp-sub-total b { font-size: 22px; font-weight: 700; letter-spacing: -.04em; color: var(--pp-ink); }

/* plans */
.pp-sub-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pp-sub-plan { position: relative; display: flex; flex-direction: column; padding: 22px; border-radius: 22px; background: var(--pp-bg-2); box-shadow: inset 0 0 0 1px rgba(17, 59, 62, .05); transition: transform .3s var(--pp-ease), box-shadow .3s; }
.pp-sub-plan:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(17, 59, 62, .1), 0 24px 40px -30px rgba(13, 48, 51, .6); }
.pp-sub-plan.is-current { background: #fff; box-shadow: inset 0 0 0 2px var(--pp-teal-400); }
.pp-sub-plan--feat { background: linear-gradient(160deg, #fbf4ea, var(--pp-cream)); box-shadow: inset 0 0 0 1px rgba(138, 106, 61, .15), 0 26px 40px -30px rgba(138, 106, 61, .9); }
.pp-sub-plan__badge { position: absolute; top: -11px; right: 18px; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--pp-cream); background: var(--pp-teal-800); box-shadow: 0 8px 14px -8px rgba(13, 48, 51, .8); }
.pp-sub-plan__badge .material-icons-outlined { font-size: 14px; }
.pp-sub-plan__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--pp-teal-600); background: #fff; box-shadow: 0 0 0 1px rgba(17, 59, 62, .06); }
.pp-sub-plan--feat .pp-sub-plan__icon { color: var(--pp-cream); background: var(--pp-teal-800); box-shadow: none; }
.pp-sub-plan h4 { margin: 14px 0 2px; font-family: inherit; font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--pp-ink); }
.pp-sub-plan > p { margin: 0; font-size: 12.5px; font-weight: 300; color: var(--pp-ink-2); }
.pp-sub-plan__price { display: flex; align-items: baseline; gap: 4px; margin: 16px 0 4px; }
.pp-sub-plan__price b { font-size: 34px; font-weight: 700; letter-spacing: -.05em; color: var(--pp-ink); font-variant-numeric: tabular-nums; }
.pp-sub-plan__price span { font-size: 13px; font-weight: 300; color: var(--pp-ink-2); }
.pp-sub-plan__save { min-height: 18px; font-size: 12px; font-weight: 500; color: var(--pp-green); }
.pp-sub-plan ul { list-style: none; margin: 16px 0 20px; padding: 0; display: grid; gap: 9px; }
.pp-sub-plan li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 300; line-height: 1.4; color: var(--pp-ink); }
.pp-sub-plan li .material-icons-outlined { font-size: 17px; color: var(--pp-green); }
.pp-sub-plan li.is-off { color: var(--pp-faint); }
.pp-sub-plan li.is-off .material-icons-outlined { color: var(--pp-faint); }
.pp-sub-plan .pp-dbtn { margin-top: auto; width: 100%; }
.pp-sub-plan .pp-dbtn.is-current { color: var(--pp-teal-800) !important; background: var(--pp-mint); box-shadow: none; cursor: default; transform: none; }

/* history list */
.pp-sub-name { display: flex; align-items: center; gap: 12px; }
.pp-sub-name__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 13px; color: var(--pp-teal-600); background: var(--pp-mint); }
.pp-sub-name__icon.is-off { color: var(--pp-faint); background: var(--pp-bg-2); }
.pp-sub-name__icon .material-icons-outlined { font-size: 20px; }
.pp-sub-name b { display: block; font-weight: 500; white-space: normal; min-width: 220px; }
.pp-sub-name small { font-size: 12px; font-weight: 300; color: var(--pp-ink-2); }
.pp-sub-mini { display: block; width: 110px; height: 5px; margin-top: 6px; border-radius: 5px; background: var(--pp-bg-2); overflow: hidden; }
.pp-sub-mini i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--pp-teal-400), var(--pp-cyan)); }

/* empty state */
.pp-sub-empty { display: none; position: relative; isolation: isolate; overflow: hidden; padding: 40px 28px; border-radius: 26px; text-align: center; background: #fff; box-shadow: var(--pp-dcard-ring), var(--pp-dcard-shadow); }
.pp-sub-empty::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(500px 220px at 50% 0%, var(--pp-mint), transparent 70%); }
.pp-sub-empty.is-on { display: block; animation: ppCcIn .5s var(--pp-ease) both; }
.pp-sub-empty__art { position: relative; width: 92px; height: 92px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 28px; color: var(--pp-cream); background: var(--pp-teal-800); box-shadow: 0 22px 34px -18px rgba(13, 48, 51, .9); }
.pp-sub-empty__art .material-icons-outlined { font-size: 42px; }
.pp-sub-empty__art::after { content: ""; position: absolute; inset: -10px; border-radius: 34px; border: 1.5px dashed rgba(0, 188, 212, .45); }
.pp-sub-empty h3 { margin: 0; font-family: inherit; font-size: 22px; font-weight: 600; letter-spacing: -.03em; color: var(--pp-ink); }
.pp-sub-empty p { max-width: 440px; margin: 8px auto 20px; font-size: 14px; font-weight: 300; line-height: 1.55; color: var(--pp-ink-2); }
.pp-sub-empty__btns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pp-sub-hero.is-gone, .pp-sub-usage.is-gone { display: none; }

/* FAQ */
.pp-sub-faq { display: grid; gap: 8px; }
.pp-sub-faq details { border-radius: 16px; background: var(--pp-bg-2); transition: background .2s; }
.pp-sub-faq details[open] { background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 59, 62, .08); }
.pp-sub-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 500; color: var(--pp-ink); }
.pp-sub-faq summary::-webkit-details-marker { display: none; }
.pp-sub-faq summary .material-icons-outlined { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 9px; font-size: 18px; color: var(--pp-teal-600); background: #fff; transition: transform .25s var(--pp-ease), background .2s; }
.pp-sub-faq details[open] summary .material-icons-outlined { transform: rotate(45deg); background: var(--pp-mint); }
.pp-sub-faq details p { margin: 0; padding: 0 16px 16px; font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--pp-ink-2); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1399px) {
  .pp-kpis--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-sub-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .pp-sub-plan { padding: 18px; }
}
@media (max-width: 1199px) {
  .pp-set { grid-template-columns: minmax(0, 1fr); }
  .pp-set__nav { position: sticky; z-index: 25; top: calc(var(--pp-sticky-top, 124px) + 8px); }
  .pp-set-navcard { padding: 6px; border-radius: 18px; }
  .pp-set-me, .pp-set-progress { display: none; }
  .pp-set-links { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
  .pp-set-links::-webkit-scrollbar { display: none; }
  .pp-set-links li { flex: none; }
  .pp-set-link { height: 42px; padding: 0 14px 0 6px; gap: 8px; }
  .pp-set-link > .material-icons-outlined:first-child { width: 30px; height: 30px; font-size: 18px; }
  .pp-set__body > section { scroll-margin-top: calc(var(--pp-sticky-top, 124px) + 84px); }
  .pp-sub-plans { grid-template-columns: minmax(0, 1fr); }
  .pp-sub-plan { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 16px; align-items: start; }
  .pp-sub-plan__icon { grid-row: span 2; }
  .pp-sub-plan h4 { margin-top: 0; }
  .pp-sub-plan > p { grid-column: 2; }
  .pp-sub-plan__price { grid-column: 3; grid-row: 1 / span 2; margin: 0; justify-self: end; }
  .pp-sub-plan__save { grid-column: 3; text-align: right; }
  .pp-sub-plan ul { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 14px 0 16px; }
  .pp-sub-plan .pp-dbtn { grid-column: 1 / -1; }
}
@media (max-width: 991px) {
  .pp-set-savebar { bottom: calc(var(--pp-bnav-h, 68px) + 12px + env(safe-area-inset-bottom)); }
  .pp-cc-form { grid-template-columns: minmax(0, 1fr); }
  .pp-cc-form__preview { padding: 24px 22px 20px; }
  .pp-cc-form__preview .pp-cc-card { max-width: 340px; }
  .pp-cc-secure { display: none; }
  .pp-sub-hero { grid-template-columns: minmax(0, 1fr); }
  .pp-sub-ring { order: -1; width: 168px; height: 168px; justify-self: center; }
}
@media (max-width: 767px) {
  .pp-acc-grid2, .pp-set-pays { grid-template-columns: minmax(0, 1fr); }
  .pp-acc-head__icon { width: 40px; height: 40px; border-radius: 13px; }
  .pp-acc-head { gap: 12px; margin-bottom: 16px; }
  .pp-acc-actions { margin-top: 18px; }
  .pp-acc-actions .pp-dbtn { flex: 1 1 auto; }
  .pp-acc-actions__note { width: 100%; }
  .pp-set-cover { aspect-ratio: auto; height: 150px; min-height: 0; border-radius: 18px; }
  .pp-set-upl { right: 10px; bottom: auto; top: 10px; padding: 6px; }
  .pp-set-upl > span:last-child { display: none; }
  .pp-set-idrow { margin-top: -40px; padding: 0 6px; gap: 12px; }
  .pp-set-avatar img { width: 86px; height: 86px; border-radius: 26px; border-width: 4px; }
  .pp-set-idrow__btns { width: 100%; }
  .pp-set-idrow__btns > * { flex: 1 1 auto; }
  .pp-set-savebar { padding: 10px 10px 10px 14px; gap: 8px; border-radius: 18px; }
  .pp-set-savebar__text small { display: none; }
  .pp-set-idrow { align-items: flex-start; }
  .pp-set-idrow__who { margin-top: 46px; }
  .pp-set-savebar__btns { width: 100%; }
  .pp-set-savebar__btns .pp-dbtn { flex: 1; }
  .pp-acc-row { flex-wrap: wrap; }
  .pp-acc-row .pp-acc-tbtn { margin-left: 54px; }
  .pp-cc-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pp-cc-card { padding: 18px 20px; }
  .pp-cc-add { aspect-ratio: auto; min-height: 150px; }
  .pp-cc-form__fields { padding: 22px 18px 20px; }
  .pp-cc-form__row3 { grid-template-columns: 1fr 1fr; }
  .pp-cc-form__row3 > :last-child { grid-column: 1 / -1; }
  .pp-cc-form__btns .pp-dbtn { flex: 1; }
  .pp-acc-modal { padding: 10px; align-items: end; }
  .pp-acc-modal__dialog { max-height: calc(100vh - 20px); border-radius: 26px; }
  .pp-sub-hero { padding: 22px 18px; border-radius: 24px; }
  .pp-sub-hero__btns .pp-dbtn { flex: 1 1 auto; }
  .pp-sub-fact { flex: 1 1 calc(50% - 10px); min-width: 0; }
  .pp-sub-plan { grid-template-columns: auto minmax(0, 1fr); }
  .pp-sub-plan__price, .pp-sub-plan__save { grid-column: 1 / -1; grid-row: auto; justify-self: start; text-align: left; margin-top: 12px; }
  .pp-sub-plan__save { margin-top: 0; }
  .pp-sub-plan ul { grid-template-columns: minmax(0, 1fr); }
  .pp-sub-empty { padding: 32px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-set-progress__bar i, .pp-sub-meter__bar i, .pp-set-savebar.is-on, .pp-set-savebar__pulse::after, .pp-cc-item.is-new, .pp-sub-empty.is-on { animation: none !important; }
  .pp-sub-ring .fg { transition: none; }
  .pp-cc-card, .pp-cc-card::after, .pp-set-cover img, .pp-acc-modal__dialog, .pp-acc-toast { transition: none !important; }
  .pp-cc-item:hover .pp-cc-card, .pp-set-pay:hover, .pp-sub-plan:hover, .pp-cc-add:hover { transform: none; }
}

/* billing details card laid out horizontally on wide screens */
@media (min-width: 1200px) {
  .pp-cc-billing { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.1fr); column-gap: 16px; }
  .pp-cc-billing > .pp-dcard__head { grid-column: 1 / -1; }
  .pp-cc-billing .pp-cc-addr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-cc-billing .pp-cc-secure-card { margin-top: 0; }
}

.pp-kpis--3 .pp-kpi__foot small { white-space: normal; line-height: 1.35; }