/* Customer portal pages (home, services, support). Mobile-first: single column at 360px, grids widen with min-width. */
.pp { max-width: 72rem; margin: 0 auto; color: var(--ss-text-primary, #e8ecf4); font-family: var(--ss-font-body, inherit); }
.pp { overflow-wrap: anywhere; }
.pp code { overflow-wrap: anywhere; word-break: break-all; }
.pp h1, .pp h2 { font-family: var(--ss-font-display, inherit); }
.pp-greet { font-size: 1.6rem; margin: .25rem 0 1rem; }
.pp-h2 { font-size: 1.15rem; margin: 1.5rem 0 .75rem; }
.pp-muted { color: var(--ss-text-muted, #8f9ab3); font-size: .85rem; }
.pp-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 576px) { .pp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .pp-grid { grid-template-columns: repeat(3, 1fr); } .pp-greet { font-size: 2rem; } }
.pp-card { display: flex; flex-direction: column; gap: .4rem; padding: 1rem; min-width: 0;
  background: var(--ss-bg-surface, #131c30); border: 1px solid var(--ss-border-subtle, #25304a); border-radius: 10px; color: inherit; text-decoration: none; }
.pp-card-name { font-weight: 600; font-size: 1.05rem; overflow-wrap: anywhere; }
.pp-card-big { font-size: 1.8rem; font-weight: 700; font-family: var(--ss-font-display, inherit); }
.pp-card-link { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--ss-border-subtle, #25304a); display: flex; align-items: center;
  min-height: 44px; color: var(--ss-accent, #aeb8cc); text-decoration: none; }
.pp-chip { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; }
.pp-chip::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: #3ecf6e; }
.pp-chip.warn::before { background: #f0b04a; }
.pp-chip.bad::before { background: #e5584f; }
.pp-attn { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .85rem 1rem; margin-bottom: .5rem;
  background: rgba(240,176,74,.08); border: 1px solid rgba(240,176,74,.5); border-radius: 10px; }
.pp-attn-title { color: #f0b04a; font-weight: 600; width: 100%; }
.pp-attn-text { flex: 1 1 12rem; min-width: 0; }
.pp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.1rem; border-radius: 8px;
  background: var(--ss-accent, #aeb8cc); color: #0d1424; font-weight: 600; text-decoration: none; border: 0; }
.pp-btn-ghost { background: transparent; color: inherit; border: 1px solid var(--ss-border-subtle, #25304a); }
.pp-actions { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 576px) { .pp-actions { grid-template-columns: repeat(3, 1fr); } }
.pp-action { display: flex; align-items: center; gap: .75rem; min-height: 64px; padding: .75rem 1rem; color: inherit; text-decoration: none;
  background: var(--ss-bg-surface, #131c30); border: 1px solid var(--ss-border-subtle, #25304a); border-radius: 10px; }
.pp-action .material-icons { font-size: 28px; color: var(--ss-accent, #aeb8cc); }
/* Tickets: stacked cards on phones, table from 768px. */
.pp-tickets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.pp-ticket { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; padding: .85rem 1rem; min-height: 44px; color: inherit; text-decoration: none;
  background: var(--ss-bg-surface, #131c30); border: 1px solid var(--ss-border-subtle, #25304a); border-radius: 10px; }
.pp-ticket-subject { font-weight: 600; overflow-wrap: anywhere; grid-column: 1 / -1; }
@media (min-width: 768px) {
  .pp-tickets { gap: 0; border: 1px solid var(--ss-border-subtle, #25304a); border-radius: 10px; overflow: hidden; }
  .pp-ticket { grid-template-columns: 8rem 1fr 10rem 9rem; align-items: center; border: 0; border-radius: 0;
    border-bottom: 1px solid var(--ss-border-subtle, #25304a); }
  .pp-ticket-subject { grid-column: auto; order: 2; }
  .pp-ticket-ref { order: 1; }
  .pp-ticket-status { order: 3; }
  .pp-ticket-date { order: 4; }
}
/* Service pages: tappable pick cards, toggles, collapsible mailbox cards. */
.pp-pick { text-align: left; cursor: pointer; min-height: 44px; font: inherit; }
.pp-pick-on { border-color: var(--ss-accent, #aeb8cc); }
.pp-toggle { display: flex; align-items: center; gap: .6rem; min-height: 44px; cursor: pointer; }
.pp-toggle input { width: 22px; height: 22px; }
.pp-box-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; min-height: 44px; cursor: pointer; }
.pp .pp-btn { margin-right: .5rem; margin-bottom: .5rem; }

/* Shared plan pieces: usage meter, at-limit callout, sheet (moved from MyVpn's myvpn-bar / aside). */
.pp-meter { margin: .5rem 0; }
.pp-meter-text { margin-bottom: .4rem; }
.pp-meter-bar { height: 8px; border-radius: 4px; background: var(--ss-bg-elevated, #243044); overflow: hidden; }
.pp-meter-bar span { display: block; height: 100%; background: var(--ss-accent, #aeb8cc); }
.pp-meter--full .pp-meter-bar span { background: #e0a43a; }
.pp-callout { border: 1px solid #e0a43a; border-radius: 10px; padding: .75rem 1rem; margin: .75rem 0; }
.pp-callout-text { margin: 0 0 .5rem; }
.pp-callout-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.pp-btn-ghost:disabled { opacity: .5; cursor: not-allowed; }
.pp-sheet-backdrop { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.5); }
.pp-sheet { position: fixed; inset: 0; z-index: 1000; background: var(--ss-bg-surface, #131c30); color: inherit; padding: 1rem;
  overflow-y: auto; display: flex; flex-direction: column; gap: .75rem; }
.pp-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.pp-sheet-title { margin: 0; font-size: 1.25rem; }
.pp-sheet-close { min-width: 44px; min-height: 44px; font-size: 1.5rem; background: transparent; border: 0; color: inherit; cursor: pointer; }
@media (min-width: 992px) {
  .pp-sheet-backdrop { display: none; }
  .pp-sheet { left: auto; width: 380px; border-left: 1px solid var(--ss-border-subtle, #25304a); }
}
/* The doubled selector outranks CustomerChrome's scoped ".pc-content img { max-width: 100% }" (0,2,1). */
.pp-empty-art,
.pc-content .pp img.pp-empty-art { max-width: 240px; width: 60%; height: auto; margin: 0 auto 1rem; display: block; border-radius: 12px; }
.pp-plan-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; }
.pp-rows { display: flex; flex-direction: column; gap: .75rem; }
.pp-row { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; background: var(--ss-bg-surface, #131c30);
  border: 1px solid var(--ss-border-subtle, #25304a); border-radius: 10px; }
.pp-row--soon { opacity: .55; }
.pp-row-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.pp-addons { margin: 0; padding-left: 1.2rem; }
.pp-advanced { margin-top: 1.5rem; }
.pp-h3 { font-size: 1rem; margin: 1.25rem 0 .5rem; }
.pp-form { display: flex; flex-direction: column; gap: .75rem; }
.pp-field { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; }
.pp-field input, .pp-field select { min-height: 44px; padding: 0 .75rem; font-size: 16px; border-radius: 8px; color: inherit;
  background: transparent; border: 1px solid var(--ss-border-input, #56658a); width: 100%; box-sizing: border-box; }
.pp-field select { background: var(--ss-bg-surface, #1a2333); color: inherit; }
.pp-field-row { display: flex; gap: .5rem; align-items: center; }
.pp-error { color: #e5584f; margin: 0; }
.pp-btn-danger { color: #e5584f; border-color: #e5584f; }
.pp-box .pp-btn, .pp-email-plan .pp-tickets .pp-btn { align-self: flex-start; }
.pp-field-row .pp-btn { white-space: nowrap; min-width: 4.5rem; margin: 0; flex: 0 0 auto; }
.pp-meter--capped .pp-meter-bar span { background: var(--ss-accent, #aeb8cc); }
.pp-btn-inline { align-self: flex-start; width: auto; }
.pp-btn-sm { min-height: 36px; padding: 0 .8rem; font-size: .85rem; }
.pp-card-domain { color: var(--ss-accent, #aeb8cc); overflow-wrap: anywhere; }
.pp-stepper-btn { min-width: 44px; padding: 0; margin: 0; }
.pp-stepper-value { min-width: 2.5rem; text-align: center; font-weight: 600; font-size: 1.1rem; }
.pp-addons li { margin-bottom: .5rem; }
.pp-inline-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; }