/* Layout and interactions for the portal. Shared surfaces, tokens and backdrop
   come from the main site's stylesheet rather than a second theme. */
.pp-portal { margin: 0; background: var(--background); color: var(--foreground); font: 400 16px/1.5 var(--font-sans); color-scheme: dark; }
.pp-portal *, .pp-portal *::before, .pp-portal *::after { box-sizing: border-box; }
.pp-portal [hidden] { display: none !important; }
.pp-portal :is(h1,h2,h3,p) { margin: 0; }
.pp-portal :is(h1,h2,h3) { color: #fff; }
.pp-portal p { color: var(--muted-foreground); }
.pp-portal a { text-decoration: none; }
.pp-portal :is(button,summary) { cursor: pointer; }
.pp-portal :is(a,button,input,textarea,select,summary):focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
.pp-portal :is(h1,main):focus { outline: none; }
.pp-portal button:disabled { opacity: .55; cursor: wait; transform: none; }
.pp-portal .container { margin-inline: auto; }
.pp-layout { min-height: 100dvh; }
.pp-icon { display: block; width: 20px; height: 20px; flex-shrink: 0; }
.pp-site-header { position: fixed; inset: 0 0 auto; z-index: 50; padding: 16px 0; background: color-mix(in srgb, var(--background) 80%, transparent); backdrop-filter: blur(4px); transition: padding 300ms, background 300ms; }
.pp-site-header.navbar-custom { background: #080b11c7; backdrop-filter: blur(24px) saturate(1.2); border-bottom: 1px solid #ffffff17; }
.pp-site-header.pp-scrolled { padding-block: 8px; }
.pp-site-nav { display: flex; align-items: center; gap: 12px; padding-inline: 16px; }
.pp-brand { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; color: var(--foreground); transition: color 180ms; }
.pp-brand:hover { color: var(--primary); }
.pp-brand img { width: 40px; height: 40px; border-radius: 12px; box-shadow: 0 0 30px #ff7b0026, 0 0 45px #a855f718; }
.pp-brand > span { font-size: 20px; font-weight: 700; line-height: 28px; }
.pp-navigation { display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; margin-left: auto; }
.pp-navigation a { display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 20px; border-radius: 999px; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; color: var(--muted-foreground); transition: background 180ms, color 180ms; }
.pp-navigation a > span { display: none; }
.pp-navigation a:hover { color: var(--foreground); }
.pp-navigation a[aria-current="page"] { background: linear-gradient(to right, var(--primary), #fb923c); color: #fff; }
.pp-home-button.pp-button { height: 44px; min-height: 44px; padding: 0 20px; border-radius: 999px; white-space: nowrap; }
.pp-account-mobile-trial { display: none !important; }
.pp-menu-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; }
.pp-menu-close { display: none; }
.pp-menu-toggle[aria-expanded="true"] .pp-menu-bars { display: none; }
.pp-menu-toggle[aria-expanded="true"] .pp-menu-close { display: block; }
.pp-main-wrap { min-width: 0; }
.pp-portal main { max-width: none; margin: 0; padding: 0; }
.pp-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1280px; padding: 112px 16px 12px; margin: auto; font-size: 12px; color: var(--muted-foreground); }
.pp-topbar-separator { margin-inline: 10px; opacity: .5; }
.pp-page-heading { margin: 24px 0 32px; }
.pp-page-heading h1 { font-size: 40px; font-weight: 600; line-height: 1.15; letter-spacing: normal; }
.pp-page-heading > p { font-size: 16px; line-height: 28px; margin-top: 16px; max-width: 672px; }
.pp-account-hero { position: relative; isolation: isolate; min-height: 100vh; padding: 96px 0 40px; overflow: clip; }
.pp-account-backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pp-account-backdrop > img { width: 100%; height: 100%; object-fit: cover; opacity: .2; filter: saturate(.75) contrast(1.08); }
.pp-account-backdrop > div { position: absolute; inset: 0; background: radial-gradient(circle at 92% 78%, #0ea5e926 0%, transparent 35%), radial-gradient(circle at 22% 75%, #7c3aed18 0%, transparent 34%), linear-gradient(90deg, #070a11f5 0%, #070a11e8 46%, #070a11c9 100%); }
.pp-account-container { padding: 28px 16px 48px; }
.pp-account-dashboard { --pp-dashboard-columns: minmax(0,1.55fr) minmax(340px,.85fr); scroll-margin-top: 96px; }
.pp-dashboard-top { display: grid; grid-template-columns: var(--pp-dashboard-columns); align-items: stretch; gap: 20px; }
.pp-auth-grid { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 40px; min-height: calc(92vh - 9rem); }
.pp-auth-intro { min-width: 0; max-width: none; }
.pp-auth-intro .pp-page-heading { margin: 10px 0 22px; }
.pp-auth-intro h1 { margin-top: 10px; font-size: clamp(48px,5vw,68px); line-height: .98; font-weight: 650; letter-spacing: -.035em; text-wrap: balance; }
.pp-auth-intro .pp-page-heading > p { color: #cbd5e1; font-size: 17px; line-height: 28px; margin-top: 14px; max-width: 620px; }
.pp-card { border-radius: 16px; }
.pp-auth-card { min-width: 0; min-height: 100%; padding: 20px; max-width: none; border-color: #ffffff24; background: linear-gradient(145deg,#171d29d9,#0b1018bd); box-shadow: inset 0 1px #ffffff0a, 0 22px 70px #0005; }
.pp-auth-label { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--primary); }
.pp-auth-label h2 { font-size: 14px; line-height: 20px; font-weight: 600; }
.pp-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px; border: 1px solid #ffffff21; border-radius: 12px; color: var(--foreground); background: linear-gradient(135deg, #1d232fb8, #1218216b); box-shadow: inset 0 1px #ffffff0f; font-size: 14px; line-height: 20px; font-weight: 600; transition: transform 180ms, border-color 180ms, box-shadow 180ms; }
.pp-button:hover { transform: translateY(-2px); border-color: #ff7b0070; }
.pp-button-primary { background: var(--gradient-primary); background-size: 200% 200%; border-color: transparent; color: #17100a; }
.pp-button-primary:hover { background-position: 100% 0; box-shadow: 0 10px 30px #ff791a4d; }
.pp-plex-button { width: 100%; }
.pp-plex-button > :last-child { margin-left: auto; }
.pp-plex-mark { margin-right: auto; flex-shrink: 0; }
.pp-small { margin-top: 12px !important; font-size: 12px; line-height: 20px; color: var(--muted-foreground); }
.pp-auth-card label, .pp-support-form label { display: block; margin: 20px 0 8px; font-size: 14px; font-weight: 500; }
.pp-portal :is(input,textarea,select) { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #0b1019; color: var(--foreground); font: inherit; font-size: 16px; }
.pp-portal :is(input,textarea)::placeholder { color: #8493aa; }
.pp-portal textarea { resize: vertical; min-height: 120px; }
#auth-status:empty { display: none; }
#auth-status:not(:empty) { margin-bottom: 16px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: #ffffff04; font-size: 13px; overflow-wrap: anywhere; }
#auth-status[data-error="true"] { color: #ffb5a5; }
#auth-retry { margin-bottom: 20px; }
.pp-plex-pending { padding: 16px; margin-bottom: 20px; border: 1px solid #ff7b003d; border-radius: 12px; font-size: 14px; }
#auth-user h2 { margin: 0 0 4px; font-size: 25px; line-height: 1.2; font-weight: 650; }
#auth-user :is(h2,p) { overflow-wrap: anywhere; }
.pp-profile-header { display: flex; align-items: center; gap: 18px; padding: 4px 4px 18px; }
.pp-profile-avatar { display: grid; place-items: center; width: 96px; height: 96px; flex: 0 0 96px; overflow: hidden; border: 2px solid #ff8a32b8; border-radius: 50%; background: radial-gradient(circle at 45% 35%,#422813,#111827 64%); box-shadow: 0 0 0 4px #ff7b0010, 0 12px 30px #0007, 0 0 30px #ff7b002c; }
.pp-profile-avatar img { width: 100%; height: 100%; padding: 17px; border-radius: inherit; object-fit: contain; filter: drop-shadow(0 8px 16px #0008); }
.pp-profile-avatar.has-plex-avatar img { padding: 0; object-fit: cover; filter: none; }
.pp-profile-copy { min-width: 0; }
.pp-profile-copy > p:not(.pp-small) { color: #a9b5c7; font-size: 13px; }
.pp-profile-copy .pp-small { margin-top: 3px !important; }
.pp-profile-active { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; padding: 4px 10px; border: 1px solid #22c55e40; border-radius: 999px; color: #7ee2a4; background: #22c55e17; font-size: 11px; font-weight: 600; }
.pp-profile-active > span { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 10px #22c55e; }
.pp-profile-membership { padding: 18px; border: 1px solid #f59e0b40; border-radius: 14px; background: radial-gradient(circle at 88% 12%,#ff9d2e1f,transparent 35%), linear-gradient(135deg,#3b260f8f,#131820b8 58%,#0b1119c9); }
.pp-profile-plan { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; }
.pp-profile-plan .pp-tier-icon { width: 42px; height: 42px; }
.pp-profile-plan strong { display: block; color: #fff; font-size: 16px; font-weight: 650; }
.pp-profile-plan small { display: block; margin-top: 2px; color: #aeb8c7; font-size: 11px; }
.pp-profile-membership dl { margin: 0; }
.pp-profile-membership dl > div { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 41px; border-top: 1px solid #ffffff10; }
.pp-profile-membership :is(dt,dd) { margin: 0; font-size: 12px; }
.pp-profile-membership dt { display: inline-flex; align-items: center; gap: 9px; color: #aab5c5; }
.pp-profile-membership dt .pp-icon { width: 16px; height: 16px; color: #d5dae2; }
.pp-profile-membership dd { color: #ecf0f6; font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.pp-profile-actions { gap: 8px; margin-top: 14px; }
.pp-profile-actions .pp-button { min-height: 40px; padding-inline: 11px; font-size: 11px; }
.pp-dashboard-detail-grid { display: grid; grid-template-columns: var(--pp-dashboard-columns); align-items: stretch; gap: 20px; margin-top: 20px; }
.pp-dashboard-detail-grid > .pp-card { height: 100%; }
.pp-dashboard-detail-grid .pp-viewing-heading { align-items: flex-start; flex-direction: column; }
.pp-dashboard-detail-grid .pp-range-picker { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.pp-dashboard-detail-grid .pp-viewing-grid { grid-template-columns: 1fr 1fr; }
.pp-dashboard-detail-grid .pp-watch-time { grid-column: 1 / -1; min-height: 110px; }
.pp-content-section { padding: 80px 16px 0; scroll-margin-top: 84px; }
.pp-content-heading { max-width: 720px; margin-bottom: 24px; }
.pp-content-heading h2 { margin-top: 8px; color: #fff; font-size: 30px; line-height: 1.2; font-weight: 600; }
.pp-content-heading > p:last-child { margin-top: 10px; font-size: 15px; line-height: 1.7; }
.pp-viewing-panel { margin-top: 0; padding: 22px; scroll-margin-top: 96px; }
.pp-viewing-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.pp-viewing-heading h2 { margin-top: 9px; font-size: 21px; }
.pp-viewing-heading p { margin-top: 6px; font-size: 14px; }
.pp-range-picker { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid #ffffff14; border-radius: 12px; background: #080c13a6; }
.pp-range-picker button { min-height: 40px; padding: 8px 12px; border-radius: 8px; color: var(--muted-foreground); font-size: 13px; white-space: nowrap; }
.pp-range-picker button:hover { color: #fff; }
.pp-range-picker button[aria-pressed="true"] { color: #17100a; background: var(--gradient-primary); font-weight: 600; }
.pp-viewing-grid { display: grid; grid-template-columns: .8fr 1.1fr 1.1fr; gap: 12px; margin-top: 16px; }
.pp-viewing-card { min-width: 0; padding: 20px; border: 1px solid #ffffff14; border-radius: 14px; background: linear-gradient(145deg,#131925a8,#0a0f17a8); }
.pp-viewing-card-title { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pp-viewing-card-title h3 { font-size: 15px; font-weight: 600; }
.pp-watch-time { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.pp-watch-time > p { margin-top: 20px; font-size: 13px; }
.pp-watch-time > strong { margin-top: 4px; color: #fff; font-size: 34px; line-height: 1.2; font-weight: 650; }
.pp-watch-time > small { margin-top: 8px; color: var(--muted-foreground); font-size: 12px; }
.pp-popular-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pp-popular-list li { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 43px; padding: 6px 0; border-bottom: 1px solid #ffffff0d; }
.pp-popular-list li:last-child { border-bottom: 0; }
.pp-popular-rank { color: #ff9b52; font-size: 12px; font-weight: 600; }
.pp-popular-list strong { display: block; overflow: hidden; color: #f8fafc; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pp-popular-list small { color: var(--muted-foreground); font-size: 11px; white-space: nowrap; }
.pp-popular-empty { grid-template-columns: 1fr !important; color: var(--muted-foreground); font-size: 13px; }
#activity-status[data-error="true"] { color: #ffb5a5; }
#activity-retry { margin-top: 12px; }
.pp-billing-panel { margin-top: 0; padding: 22px; scroll-margin-top: 96px; }
.pp-billing-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.pp-billing-heading h2 { margin-top: 9px; font-size: 21px; }
.pp-billing-heading p { margin-top: 6px; font-size: 14px; }
.pp-billing-state { display: inline-flex; align-items: center; width: max-content; padding: 5px 10px; border: 1px solid #ffffff1f; border-radius: 999px; color: #cbd5e1; background: #ffffff08; font-size: 11px; font-weight: 600; text-transform: capitalize; white-space: nowrap; }
.pp-billing-state[data-status="paid"], .pp-billing-state[data-status="confirmed"] { border-color: #67db9a55; color: #91edb8; background: #67db9a12; }
.pp-billing-state[data-status="due_soon"], .pp-billing-state[data-status="partially_paid"], .pp-billing-state[data-status="pending"] { border-color: #fbbf2455; color: #fbd278; background: #fbbf2412; }
.pp-billing-state[data-status="overdue"], .pp-billing-state[data-status="void"] { border-color: #fb718555; color: #fda4af; background: #fb718512; }
.pp-billing-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 16px; }
.pp-billing-summary article { min-width: 0; padding: 14px; border: 1px solid #ffffff14; border-radius: 12px; background: linear-gradient(145deg,#131925a8,#0a0f17a8); }
.pp-billing-summary span, .pp-billing-summary small { display: block; color: var(--muted-foreground); font-size: 12px; }
.pp-billing-summary strong { display: block; margin: 6px 0 4px; overflow-wrap: anywhere; color: #fff; font-size: 17px; font-weight: 600; }
.pp-billing-summary .pp-billing-plan-summary { display: flex; align-items: flex-start; gap: 11px; }
.pp-billing-plan-summary > div { min-width: 0; }
.pp-billing-summary .pp-tier-icon { display: inline-grid; flex: 0 0 auto; }
.pp-payment-history { margin-top: 18px; scroll-margin-top: 100px; }
.pp-payment-history :is(h3,h4) { font-size: 16px; font-weight: 600; }
.pp-payment-history > .pp-admin-table-wrap { margin-top: 12px; }
#billing-status[data-error="true"], #admin-billing-status[data-error="true"] { color: #ffb5a5; }
#billing-retry { margin-top: 12px; }
.pp-admin-panel { margin-top: 20px; padding: 24px; }
.pp-admin-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.pp-admin-heading h2 { margin-top: 12px; font-size: 24px; }
.pp-admin-heading p { margin-top: 6px; font-size: 14px; }
.pp-admin-summary { display: grid; grid-template-columns: repeat(4,minmax(82px,1fr)); gap: 10px; }
.pp-admin-summary > span { min-width: 0; padding: 12px 14px; border: 1px solid #ffffff16; border-radius: 12px; color: var(--muted-foreground); font-size: 11px; text-align: center; }
.pp-admin-summary strong { display: block; color: #fff; font-size: 20px; }
.pp-admin-table-wrap { margin-top: 20px; overflow-x: auto; border: 1px solid #ffffff14; border-radius: 12px; }
.pp-admin-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13px; }
.pp-admin-table :is(th,td) { padding: 14px 16px; border-bottom: 1px solid #ffffff10; text-align: left; vertical-align: middle; }
.pp-admin-table th { color: #94a3b8; background: #ffffff05; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.pp-admin-table tbody tr:last-child td { border-bottom: 0; }
.pp-admin-table td strong { display: block; color: #f8fafc; font-weight: 600; }
.pp-admin-table td small { display: block; margin-top: 3px; color: var(--muted-foreground); }
.pp-admin-table th:last-child, .pp-admin-table td:last-child { width: 104px; text-align: right; }
.pp-admin-user-cell { min-width: 220px; }
.pp-admin-user-identity { display: flex; align-items: center; gap: 11px; }
.pp-admin-user-identity > span:last-child { min-width: 0; }
.pp-admin-avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; overflow: hidden; border: 1px solid #ffffff1f; border-radius: 50%; background: #111722; }
.pp-admin-avatar img { width: 100%; height: 100%; padding: 8px; border-radius: inherit; object-fit: contain; }
.pp-admin-avatar.has-plex-avatar img { padding: 0; object-fit: cover; }
.pp-admin-tier { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.pp-admin-tier > span:last-child { min-width: 0; }
.pp-admin-role { display: inline-block; margin-left: 8px; padding: 2px 6px; border-radius: 999px; color: #ffbd8b; background: #ff7b0017; font-size: 9px; letter-spacing: .06em; vertical-align: 2px; }
.pp-account-status { display: inline-flex; align-items: center; gap: 7px; text-transform: capitalize; }
.pp-account-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #67db9a; box-shadow: 0 0 10px #67db9a66; }
.pp-account-status[data-status="disabled"]::before, .pp-account-status[data-status="suspended"]::before, .pp-account-status[data-status="cancelled"]::before { background: #fb7185; box-shadow: 0 0 10px #fb718566; }
.pp-account-status[data-status="pending"]::before { background: #fbbf24; box-shadow: 0 0 10px #fbbf2466; }
.pp-admin-payment-cell[data-status="paid"] > strong { color: #91edb8; }
.pp-admin-payment-cell[data-status="due_soon"], .pp-admin-payment-cell[data-status="partially_paid"] > strong { color: #fbd278; }
.pp-admin-payment-cell[data-status="overdue"] > strong { color: #fda4af; }
.pp-admin-manage.pp-button { min-height: 38px; padding-inline: 12px; font-size: 12px; }
.pp-tier-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid color-mix(in srgb,currentColor 35%,transparent); border-radius: 10px; color: #f59e0b; background: color-mix(in srgb,currentColor 10%,transparent); }
.pp-tier-icon svg { width: 20px; height: 20px; }
.pp-tier-icon-small { width: 32px; height: 32px; flex-basis: 32px; }
.pp-tier-icon[data-tier="none"] { color: #94a3b8; }
.pp-tier-icon[data-tier="bronze"] { color: #d88a50; }
.pp-tier-icon[data-tier="silver"] { color: #cbd5e1; }
.pp-tier-icon[data-tier="gold"] { color: #fbbf24; }
.pp-tier-icon[data-tier="diamond"] { color: #67e8f9; }
.pp-tier-icon[data-tier="ruby"] { color: #fb7185; }
.pp-tier-icon[data-tier="platinum"] { color: #c4b5fd; }
.pp-admin-billing-editor { margin-top: 24px; padding-top: 24px; border-top: 1px solid #ffffff17; scroll-margin-top: 110px; }
.pp-admin-editor-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.pp-admin-editor-heading h3 { margin-top: 10px; font-size: 21px; }
.pp-admin-editor-heading p { margin-top: 5px; font-size: 13px; overflow-wrap: anywhere; }
.pp-admin-editor-heading .pp-button { min-height: 40px; }
.pp-admin-billing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.pp-admin-billing-form { padding: 20px; border: 1px solid #ffffff14; border-radius: 14px; background: #080c1370; }
.pp-admin-billing-form h4 { color: #fff; font-size: 16px; font-weight: 600; }
.pp-admin-billing-form > p { margin-top: 6px; font-size: 12px; line-height: 1.6; }
.pp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.pp-form-grid label { display: grid; align-content: start; gap: 7px; color: #cbd5e1; font-size: 12px; font-weight: 500; }
.pp-form-grid :is(input,select) { min-height: 46px; padding: 9px 11px; font-size: 14px; }
.pp-admin-billing-form > .pp-button { width: 100%; }
.pp-void-payment { min-height: 36px; padding: 6px; }
#admin-status[data-error="true"] { color: #ffb5a5; }
#admin-retry { margin-top: 12px; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.pp-badge { display: inline-flex; align-items: center; padding: 5px 10px; border: 1px solid #ffffff1f; border-radius: 999px; background: #ffffff05; color: #cbd5e1; font-size: 11px; font-weight: 500; letter-spacing: .6px; }
.pp-eyebrow { font-size: 12px; color: var(--primary) !important; font-weight: 600; letter-spacing: .18em; }
.pp-muted { color: var(--muted-foreground); font-size: 12px; }
.pp-text-link { color: #ffad70; font-size: 13px; font-weight: 500; }
.pp-text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.pp-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 32px 0 16px; }
.pp-section-heading h2 { font-size: 20px; font-weight: 600; }
.pp-section-heading > a { color: #ffad70; font-size: 13px; white-space: nowrap; }
.pp-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding: 32px; border: 1px solid #ffffff21; border-radius: 24px; background: linear-gradient(145deg,#181d2ac2,#0e121b7a); overflow: hidden; }
.pp-hero h2 { font-size: 36px; line-height: 1.15; font-weight: 600; margin-top: 20px; }
.pp-hero p { margin-top: 16px; font-size: 15px; line-height: 1.8; }
.pp-overview-preview { width: 100%; border-radius: 16px; border: 1px solid #ffffff21; box-shadow: 0 24px 60px #0006; }
.pp-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.pp-metric { min-width: 0; min-height: 116px; padding: 16px; background: linear-gradient(145deg,#151b27c7,#0a0f17ad); }
.pp-icon-tile { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid #ff7b0026; border-radius: 11px; color: var(--primary); background: #ff7b000a; }
.pp-metric .pp-icon-tile { width: 30px; height: 30px; border: 0; background: transparent; }
.pp-metric .pp-tier-icon { width: 30px; height: 30px; border: 0; background: transparent; }
.pp-metric h3 { margin: 8px 0 2px; font-size: 12px; font-weight: 500; color: #aeb9ca; }
.pp-metric > strong { display: block; overflow: hidden; font-size: 21px; line-height: 1.2; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.pp-metric p { display: -webkit-box; margin-top: 4px; overflow: hidden; color: #8794a8; font-size: 11px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pp-services-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.pp-service { position: relative; display: block; padding: 24px; transition: border-color 180ms, transform 180ms; }
.pp-service:hover { transform: translateY(-3px); border-color: #ff7b0060; }
.pp-service-arrow { position: absolute; top: 24px; right: 24px; color: var(--muted-foreground); }
.pp-service h3 { font-size: 16px; font-weight: 600; margin: 16px 20px 8px 0; }
.pp-service p { font-size: 14px; line-height: 1.75; }
.pp-external-label { display: block; margin-top: 16px; color: var(--muted-foreground); font-size: 12px; }
.pp-lower-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; margin-top: 32px; }
.pp-activity, .pp-start { padding: 24px; }
.pp-activity .pp-section-heading { margin-top: 0; }
.pp-pill { padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 11px; color: var(--muted-foreground); white-space: nowrap; }
.pp-empty { padding: 32px 20px; text-align: center; }
.pp-empty-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--border); border-radius: 16px; margin-bottom: 20px; color: var(--muted-foreground); }
.pp-empty :is(h2,h3) { font-size: 18px; font-weight: 600; }
.pp-empty p { max-width: 400px; margin: 12px auto 20px; font-size: 14px; line-height: 1.8; }
.pp-start h2 { font-size: 24px; font-weight: 600; margin: 12px 0; }
.pp-start ol { margin: 0; padding: 0; list-style: none; }
.pp-start li + li { border-top: 1px solid var(--border); }
.pp-start li a { display: flex; align-items: center; gap: 14px; min-height: 80px; padding: 12px 0; font-size: 14px; }
.pp-start li a > span:first-child { color: var(--primary); font-size: 12px; }
.pp-start li a > span:last-child { margin-left: auto; }
.pp-start small { display: block; margin-top: 4px; font-size: 12px; color: var(--muted-foreground); }
.pp-inline-help { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px; margin-top: 32px; }
.pp-inline-help h2 { font-size: 20px; font-weight: 600; }
.pp-inline-help p { margin-top: 8px; font-size: 14px; }
.pp-inline-help .pp-button { flex-shrink: 0; }
.pp-search-box { padding: 24px; }
.pp-search-box label { display: block; font-size: 18px; font-weight: 600; margin-bottom: 16px; }
.pp-search-input { position: relative; }
.pp-search-input > span { position: absolute; top: 15px; left: 16px; color: var(--muted-foreground); }
.pp-search-input input { padding-left: 48px; min-height: 50px; }
.pp-categories { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pp-categories button { min-height: 40px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; color: #cbd5e1; font-size: 13px; }
.pp-categories button[aria-pressed="true"] { background: #ff7b001a; border-color: #ff7b0060; color: #ffc496; }
.pp-result-count { margin: 24px 0 16px !important; font-size: 14px; }
.pp-articles { display: grid; gap: 16px; }
.pp-article { overflow: hidden; scroll-margin-top: 100px; }
.pp-article summary { position: relative; padding: 24px 56px 24px 24px; list-style: none; }
.pp-article summary::-webkit-details-marker { display: none; }
.pp-article summary::after { content: "+"; position: absolute; top: 34px; right: 24px; color: var(--primary); font-size: 24px; }
.pp-article[open] summary::after { content: "?"; }
.pp-article summary > span { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: #ffad70; }
.pp-article summary h2 { margin: 8px 0; font-size: 18px; font-weight: 600; }
.pp-article summary p { font-size: 14px; }
.pp-article-body { padding: 0 24px 24px; border-top: 1px solid var(--border); }
.pp-article-body h3 { margin: 24px 0 12px; font-size: 16px; font-weight: 600; }
.pp-article-body p { margin: 16px 0; font-size: 14px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.pp-article-body :is(ul,ol) { padding-left: 24px; margin: 12px 0 20px; list-style: disc; color: #b4becf; font-size: 14px; line-height: 1.9; }
.pp-article-body ol { list-style: decimal; }
.pp-article-body li { margin: 8px 0; }
.pp-share-guide { margin-top: 12px; }
.pp-support-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; }
.pp-support-card, .pp-support-tip, .pp-support-form { padding: 28px; }
.pp-support-card h2, .pp-support-form h2 { margin: 16px 0 12px; font-size: 28px; line-height: 1.2; font-weight: 600; }
.pp-support-card > p, .pp-support-form > p { font-size: 14px; line-height: 1.8; }
.pp-support-card .pp-button { display: flex; margin-top: 16px; }
.pp-support-tip { margin-top: 24px; }
.pp-support-tip h3 { font-size: 16px; font-weight: 600; }
.pp-support-tip p { margin: 12px 0 16px; font-size: 14px; line-height: 1.8; }
.pp-prepared-email { padding: 16px; margin-top: 20px; border: 1px solid #ff7b0060; border-radius: 12px; }
.pp-prepared-email p { margin-bottom: 12px; font-size: 14px; }
.pp-content-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1248px; margin: 0 auto 24px; padding: 0 16px; color: #e4b986; font-size: 13px; }
.pp-content-notice button { min-height: 44px; padding: 8px 12px; border: 1px solid #e4b98640; border-radius: 8px; white-space: nowrap; }
.pp-notice-wrap { padding: 0 16px; margin-top: 32px; }
.pp-notice { display: flex; align-items: flex-start; gap: 12px; padding: 20px; border: 1px solid var(--border); border-radius: 16px; background: #ffffff02; }
.pp-notice > span { color: var(--muted-foreground); flex-shrink: 0; margin-top: 2px; }
.pp-notice p { font-size: 12px; line-height: 1.8; }
.pp-notice strong { color: #cbd5e1; font-weight: 500; }
.pp-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 48px; padding: 32px 16px; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 12px; }
.pp-footer-brand { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 16px; font-weight: 700; }
.pp-footer-brand img { border-radius: 8px; }
.pp-footer > div { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; }
.pp-footer a:hover { color: var(--primary); }
.pp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.pp-skip { position: fixed; z-index: 100; top: 12px; left: 12px; transform: translateY(-150%); padding: 12px 18px; border-radius: 8px; color: #17100a; background: #ffab64; }
.pp-skip:focus { transform: translateY(0); }
.pp-no-script { padding: 24px; background: #171c26; color: #fff; }
.pp-no-script a { text-decoration: underline; }
@media (max-width: 1279px) {
  .pp-navigation a { padding-inline: 16px; }
  .pp-dashboard-top, .pp-dashboard-detail-grid { grid-template-columns: minmax(0,1.25fr) minmax(320px,.75fr); }
}
@media (max-width: 1023px) {
  .pp-navigation a { padding-inline: 7px; font-size: 11px; }
  .pp-home-button.pp-button { padding-inline: 10px; font-size: 11px; }
  .pp-dashboard-top, .pp-dashboard-detail-grid { grid-template-columns: 1fr; }
  .pp-auth-grid { grid-template-columns: 1fr; }
  .pp-auth-intro { transform: none; }
  .pp-auth-intro h1 { font-size: 56px; }
  .pp-auth-card { min-height: auto; }
  .pp-account-art { display: none; }
  .pp-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pp-viewing-heading { align-items: flex-start; flex-direction: column; }
  .pp-viewing-grid { grid-template-columns: 1fr 1fr; }
  .pp-watch-time { grid-column: 1 / -1; }
  .pp-admin-heading { align-items: flex-start; flex-direction: column; }
  .pp-admin-billing-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .pp-site-header { padding-block: 12px; }
  .pp-site-nav { flex-wrap: wrap; justify-content: space-between; }
  .pp-brand img { width: 36px; height: 36px; }
  .pp-brand > span { font-size: 18px; }
  .pp-menu-toggle { display: inline-flex; }
  .pp-home-button { display: none; }
  .pp-account-mobile-trial { display: flex !important; align-items: center; justify-content: center !important; gap: 8px; margin-bottom: 8px; color: #17100a !important; background: var(--gradient-primary); font-weight: 600; }
  .pp-navigation.glass { display: none; order: 3; width: 100%; margin: 4px 0 0; padding: 16px 0 4px; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; max-height: calc(100dvh - 90px); overflow-y: auto; }
  .pp-site-header[data-menu-open="true"] .pp-navigation { display: grid; }
  .pp-navigation a { justify-content: flex-start; min-height: 48px; padding: 12px 16px; border-radius: 12px; font-size: 14px; }
  .pp-navigation a > span { display: block; margin-right: 12px; }
  .pp-navigation a[aria-current="page"] { color: var(--primary); background: #ff7b001a; }
  .pp-account-hero { padding-top: 76px; }
  .pp-account-container { padding-top: 22px; padding-bottom: 36px; }
  .pp-dashboard-top { display: flex; flex-direction: column; }
  .pp-auth-intro { display: contents; }
  #account-heading-slot { order: 1; }
  .pp-auth-card { order: 2; }
  .pp-metrics { order: 4; }
  .pp-auth-intro h1 { font-size: 46px; line-height: 1; }
  .pp-auth-intro .pp-page-heading > p { font-size: 16px; }
  .pp-viewing-panel { padding: 20px; }
  .pp-range-picker { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .pp-viewing-grid { grid-template-columns: 1fr; }
  .pp-watch-time { grid-column: auto; }
  .pp-admin-panel { padding: 20px; }
  .pp-billing-panel { padding: 20px; }
  .pp-billing-heading { flex-direction: column; }
  .pp-billing-summary { grid-template-columns: 1fr; }
  .pp-admin-summary { width: 100%; }
  .pp-admin-summary > span { flex: 1; min-width: 0; padding-inline: 8px; }
  .pp-admin-editor-heading { flex-direction: column; }
  .pp-form-grid { grid-template-columns: 1fr; }
  .pp-page-heading h1 { font-size: 32px; }
  .pp-content-section { padding-top: 56px; }
  .pp-content-heading h2 { font-size: 25px; }
  .pp-services-grid, .pp-lower-grid, .pp-support-grid { grid-template-columns: 1fr; }
  .pp-hero { grid-template-columns: 1fr; padding: 24px; }
  .pp-overview-preview { display: none; }
  .pp-inline-help { flex-direction: column; align-items: flex-start; }
  .pp-footer > div { width: 100%; margin-left: 0; }
}
@media (max-width: 639px) {
  .pp-auth-intro h1 { font-size: 40px; line-height: 1.02; }
  .pp-auth-card { padding: 20px; }
  .pp-profile-header { align-items: flex-start; }
  .pp-profile-avatar { width: 72px; height: 72px; flex-basis: 72px; }
  .pp-profile-avatar img { width: 100%; height: 100%; padding: 12px; }
  .pp-profile-avatar.has-plex-avatar img { padding: 0; }
  .pp-profile-membership { padding: 14px; }
  .pp-profile-actions .pp-button { flex: 1 1 120px; }
  .pp-metric { padding: 18px 16px; }
  .pp-metric > strong { font-size: 20px; }
  .pp-section-heading h2 { font-size: 18px; }
  .pp-support-card, .pp-support-tip, .pp-support-form { padding: 24px; }
}
@media (max-width: 479px) {
  .pp-metrics { grid-template-columns: 1fr 1fr; }
  .pp-dashboard-detail-grid .pp-viewing-grid { grid-template-columns: 1fr; }
  .pp-dashboard-detail-grid .pp-watch-time { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { .pp-portal *, .pp-portal *::before, .pp-portal *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }