/* ProvedorSMM theme
Coexists with Bootstrap 3 (used by the restyled inner templates); own components use the ps- prefix.
Poppins is loaded with in layout.twig (no render-blocking @import). */
/* ==========================================================================
1. Tokens & base
========================================================================== */
:root {
--ps-bg: #141523;
--ps-bg-2: #181a2b;
--ps-bg-deep: #0e0f1a;
--ps-surface: #1d1f33;
--ps-surface-2: #24263d;
--ps-field: #26283f;
--ps-line: rgba(255, 255, 255, .07);
--ps-line-2: rgba(255, 255, 255, .12);
--ps-text: #ffffff;
--ps-text-2: #c9cadb;
--ps-muted: #8f91ab;
--ps-green: #01d676;
--ps-green-hover: #12e384;
--ps-green-edge: #01a65c;
--ps-green-ink: #04140c;
--ps-r-lg: 20px;
--ps-r: 12px;
--ps-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 40px -24px rgba(0, 0, 0, .6);
--ps-font: "Poppins", -apple-system, "Segoe UI", sans-serif;
--ps-header-h: 66px;
}
html { -webkit-text-size-adjust: 100%; }
.ps-page *, .ps-page *::before, .ps-page *::after { box-sizing: border-box; }
body.ps-page { margin: 0; background: var(--ps-bg); color: var(--ps-text); font: 400 16px/1.65 var(--ps-font); -webkit-font-smoothing: antialiased; }
:where(.ps-page) a { color: inherit; }
.ps-page :focus-visible { outline: 2px solid var(--ps-green); outline-offset: 2px; border-radius: 6px; }
.ps-page [id] { scroll-margin-top: calc(var(--ps-header-h) + 16px); }
.ps-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ps-g { color: var(--ps-green); }
.ps-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .ps-wrap { padding: 0 16px; } }
.ps-skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--ps-green); color: var(--ps-green-ink); font-weight: 600; text-decoration: none; }
.ps-skip:focus { top: 12px; }
/* hue helpers (feature cards, service-kind stickers) */
.ps-hue--green { --hue: #01d676; }
.ps-hue--amber { --hue: #ffb547; }
.ps-hue--blue { --hue: #4c9bff; }
.ps-hue--pink { --hue: #ff5c93; }
.ps-hue--violet { --hue: #a57bff; }
.ps-hue--teal { --hue: #2fd3c4; }
/* speed: off-screen sections are not rendered until they approach the viewport */
.ps-section, .ps-devices-zone, .ps-footer { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* ==========================================================================
2. Buttons
========================================================================== */
.ps-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
height: 48px; padding: 0 24px; border: 0; border-radius: var(--ps-r);
font: 600 15px var(--ps-font); text-decoration: none; white-space: nowrap; cursor: pointer;
background: var(--ps-green); color: var(--ps-green-ink); box-shadow: 0 3px 0 var(--ps-green-edge);
transition: background .15s, transform .08s, box-shadow .08s;
}
.ps-btn:hover { background: var(--ps-green-hover); color: var(--ps-green-ink); text-decoration: none; }
.ps-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ps-green-edge); }
.ps-btn svg { width: 22px; height: 22px; flex: none; }
.ps-btn--block { width: 100%; }
.ps-btn--sm { height: 40px; padding: 0 18px; font-size: 14px; }
.ps-btn--lg { height: 56px; padding: 0 32px; font-size: 16px; }
.ps-btn--gray { background: #4b4d68; color: #fff; box-shadow: 0 3px 0 #33354b; }
.ps-btn--gray:hover { background: #57597a; color: #fff; }
.ps-btn--light { background: #fff; color: #1d1d27; box-shadow: 0 3px 0 #cfd0db; }
.ps-btn--light:hover { background: #f3f3f7; color: #1d1d27; }
.ps-btn--glow { box-shadow: 0 4px 0 var(--ps-green-edge), 0 0 0 6px rgba(1, 214, 118, .1), 0 18px 40px -12px rgba(1, 214, 118, .45); }
.ps-btn--glow:hover { box-shadow: 0 4px 0 var(--ps-green-edge), 0 0 0 9px rgba(1, 214, 118, .14), 0 18px 40px -12px rgba(1, 214, 118, .55); }
@media (max-width: 360px) { .ps-btn--lg { height: auto; min-height: 52px; padding: 12px 20px; font-size: 15px; white-space: normal; text-align: center; } }
/* ==========================================================================
3. Header & mobile tab bar
========================================================================== */
.ps-header { position: sticky; top: 0; z-index: 50; background: #161727; border-bottom: 1px solid #262839; }
.ps-bar { display: flex; align-items: center; height: var(--ps-header-h); padding: 0 28px; }
.ps-logo { display: inline-flex; align-items: center; gap: 10px; margin-right: 28px; font-weight: 700; font-size: 20px; text-decoration: none; }
.ps-logo img { display: block; max-height: none; }
.ps-logo picture { display: block; }
.ps-logo-full { width: auto; height: 52px; margin: -6px 0; }
.ps-side-head .ps-logo-full { height: 50px; }
.ps-logo-markimg { display: block; width: 36px; height: 36px; }
.ps-logo-mark { width: 28px; height: 28px; flex: none; }
.ps-logo b { font-weight: 700; color: var(--ps-green); }
.ps-menu { position: relative; display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 0 0 30px; list-style: none; }
.ps-menu::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 30px; margin-top: -15px; background: #34364d; }
.ps-menu a { display: flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; color: #8c8ea9; text-decoration: none; transition: color .15s; }
.ps-menu a:hover { color: var(--ps-text); }
.ps-menu svg { width: 18px; height: 18px; fill: currentColor; }
.ps-menu .is-active a { color: #fff; background: radial-gradient(70% 90% at 50% 50%, rgba(1, 214, 118, .16), transparent 75%); }
.ps-menu .is-active svg { color: var(--ps-green); }
.ps-header-actions { display: flex; gap: 12px; margin-left: auto; }
.ps-header-actions .ps-btn { height: 40px; padding: 0 20px; font-weight: 700; }
.ps-tabbar { display: none; }
@media (max-width: 860px) {
:root { --ps-header-h: 64px; }
.ps-bar { padding: 0 16px; }
.ps-menu { display: none; }
body.ps-page { padding-bottom: 68px; }
.ps-tabbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(4, 1fr);
height: 68px; padding-bottom: env(safe-area-inset-bottom); background: #181a2b; border-top: 1px solid var(--ps-line);
}
.ps-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--ps-muted); text-decoration: none; }
.ps-tabbar svg { width: 22px; height: 22px; fill: currentColor; }
.ps-tabbar .is-active { color: var(--ps-text); }
.ps-tabbar .is-active svg { color: var(--ps-green); }
}
@media (max-width: 420px) {
.ps-header .ps-logo-full { height: 50px; margin: -6px 0 -6px -6px; }
.ps-header .ps-logo { margin-right: 6px; }
.ps-app .ps-header .ps-btn--sm, .ps-header .ps-btn--sm { height: 34px; padding: 0 12px; border-radius: 9px; font-size: 13px; }
.ps-header .ps-btn--sm + .ps-btn--sm { margin-left: -2px; }
}
@media (max-width: 370px) {
.ps-header .ps-logo-full { height: 44px; }
.ps-header .ps-btn--sm { padding: 0 10px; }
}
/* ==========================================================================
4. Hero
========================================================================== */
.ps-hero { position: relative; overflow: hidden; padding-top: 36px; }
.ps-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px 384px; align-items: end; gap: 0 8px; min-height: 660px; }
.ps-hero-copy { align-self: center; padding: 64px 0 150px; }
.ps-hero h1 { margin: 0; font: 700 clamp(42px, 5.4vw, 64px)/1.02 var(--ps-font); letter-spacing: -.04em; }
.ps-hero h1 span { display: block; color: var(--ps-green); }
.ps-hero-lead { margin: 18px 0 0; font-size: 22px; font-weight: 600; line-height: 1.35; color: #fff; text-wrap: balance; }
.ps-hero-sub { margin: 12px 0 0; max-width: 27em; font-size: 18px; line-height: 1.6; color: var(--ps-text-2); }
/* photo + floating social icons */
.ps-art { position: relative; align-self: end; height: 600px; }
.ps-art::before { content: ""; position: absolute; left: 50%; top: 90px; width: 380px; height: 380px; margin-left: -190px; border-radius: 50%; background: radial-gradient(closest-side, rgba(1, 214, 118, .16), rgba(1, 214, 118, 0)); }
.ps-art img { position: absolute; left: 50%; top: 0; width: 400px; height: auto; margin-left: -200px; -webkit-mask-image: linear-gradient(#000 78%, transparent 100%); mask-image: linear-gradient(#000 78%, transparent 100%); }
.ps-soc { position: absolute; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; color: #fff; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .18); }
.ps-soc svg { width: 26px; height: 26px; fill: currentColor; }
.ps-soc--ig { background: radial-gradient(circle at 30% 110%, #ffdc80 0%, #fcaf45 15%, #f77737 30%, #f56040 42%, #fd1d1d 55%, #e1306c 68%, #c13584 80%, #833ab4 92%, #5851db 100%); }
.ps-soc--tt { background: #000; }
.ps-soc--tt svg { filter: drop-shadow(1.5px 0 0 #fe2c55) drop-shadow(-1.5px 0 0 #25f4ee); }
.ps-soc--yt { background: #ff0000; }
.ps-soc--fb { background: #0866ff; }
.ps-soc--x { background: #000; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ps-soc--x svg { width: 22px; height: 22px; }
.ps-soc--tg { background: #229ed9; }
.ps-art .ps-soc { opacity: .55; filter: saturate(.8); }
.ps-art .ps-soc--ig { left: 58px; top: 22px; transform: rotate(-10deg); }
.ps-art .ps-soc--tt { right: 6px; top: 36px; transform: rotate(9deg); }
.ps-art .ps-soc--yt { right: -6px; top: 236px; transform: rotate(-6deg); }
.ps-art .ps-soc--fb { left: -4px; top: 330px; transform: rotate(8deg); }
.ps-art .ps-soc--x { right: 26px; top: 410px; transform: rotate(-8deg); }
/* login card */
.ps-auth {
position: relative; z-index: 3; align-self: center; margin-bottom: 76px; padding: 34px 32px; border-radius: var(--ps-r-lg);
background: linear-gradient(180deg, #23253d 0%, #1e2036 100%);
border: 1px solid rgba(255, 255, 255, .1); border-top: 3px solid var(--ps-green);
box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .3), 0 0 60px -10px rgba(1, 214, 118, .18);
}
.ps-auth-title { margin: 0 0 22px; text-align: center; font-size: 24px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.ps-auth-brand { color: #c4c6dc; }
.ps-field { margin-bottom: 14px; }
.ps-input { position: relative; }
.ps-input svg { position: absolute; left: 17px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: #a3a5c2; pointer-events: none; }
.ps-input:focus-within svg { color: var(--ps-green); }
.ps-input input {
width: 100%; height: 54px; padding: 0 14px 0 48px; border-radius: var(--ps-r);
background: #2b2d48; color: var(--ps-text); border: 1.5px solid #3c3f62; font: 400 16px var(--ps-font);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25); transition: border-color .15s, background .15s, box-shadow .15s;
}
.ps-input input::placeholder { color: #a3a5c2; }
.ps-input input:hover { border-color: #4d507a; }
.ps-input input:focus { outline: none; background: #2f3150; border-color: var(--ps-green); box-shadow: 0 0 0 4px rgba(1, 214, 118, .16); }
.ps-auth .ps-btn { height: 54px; font-size: 16px; }
.ps-auth-row { display: flex; justify-content: flex-end; margin: -2px 0 16px; }
.ps-auth-row a { font-size: 13px; color: var(--ps-muted); text-decoration: none; }
.ps-auth-row a:hover { color: var(--ps-text); }
.ps-or { display: flex; align-items: center; gap: 14px; margin: 18px 0; font-size: 13px; color: var(--ps-muted); }
.ps-or::before, .ps-or::after { content: ""; flex: 1; height: 1px; background: var(--ps-line-2); }
.ps-auth-switch { margin: 20px 0 0; text-align: center; font-size: 14px; color: var(--ps-muted); }
.ps-auth-switch a { color: var(--ps-text); font-weight: 600; text-decoration: none; }
.ps-auth-switch a:hover { color: var(--ps-green); }
.ps-alert { margin-bottom: 14px; padding: 11px 14px; border-radius: var(--ps-r); font-size: 14px; }
.ps-alert--error { background: rgba(255, 92, 92, .12); color: #ff9b9b; }
.ps-alert--success { background: rgba(1, 214, 118, .12); color: var(--ps-green); }
/* stats band (overlaps the bottom of the hero) */
.ps-band-zone { position: relative; z-index: 2; margin-top: -76px; background: linear-gradient(transparent 50%, var(--ps-bg-2) 50%); }
.ps-band { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); align-items: center; padding: 34px 44px; border-radius: var(--ps-r-lg); background: var(--ps-surface); border: 1px solid var(--ps-line-2); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.ps-band > p { margin: 0; padding-right: 24px; font-size: 20px; font-weight: 600; line-height: 1.35; }
.ps-band dl { display: contents; }
.ps-band dl > div { padding: 2px 32px; border-left: 1px solid var(--ps-line-2); }
.ps-band dd { margin: 0; font-size: 34px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ps-band dt { margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--ps-green); }
/* tablet (1001-1180): smaller photo column */
@media (max-width: 1180px) {
.ps-hero-grid { grid-template-columns: minmax(0, 1fr) 280px 360px; min-height: 600px; }
.ps-art { height: 520px; }
.ps-art::before { top: 70px; width: 280px; height: 280px; margin-left: -140px; }
.ps-art img { width: 300px; margin-left: -150px; }
.ps-art .ps-soc { width: 46px; height: 46px; border-radius: 14px; }
.ps-art .ps-soc svg { width: 22px; height: 22px; }
.ps-art .ps-soc--x svg { width: 18px; height: 18px; }
.ps-art .ps-soc--ig { left: 30px; top: 16px; }
.ps-art .ps-soc--tt { right: -4px; top: 26px; }
.ps-art .ps-soc--yt { right: -14px; top: 180px; }
.ps-art .ps-soc--fb { left: -10px; top: 250px; }
.ps-art .ps-soc--x { right: 10px; top: 320px; }
.ps-auth { padding: 30px 26px; }
}
@media (max-width: 1100px) {
.ps-band { grid-template-columns: repeat(3, 1fr); gap: 22px 0; padding: 28px 32px; }
.ps-band > p { grid-column: 1 / -1; }
.ps-band dl > div:first-of-type { border-left: 0; padding-left: 0; }
}
/* stacked hero (<= 1000): copy, form, photo, stats - freecash mobile order */
@media (max-width: 1000px) {
.ps-hero { padding-top: 8px; }
.ps-hero-grid { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
.ps-hero-copy { order: 1; padding: 44px 0 28px; text-align: center; }
.ps-hero-sub { margin-left: auto; margin-right: auto; }
.ps-auth { order: 2; align-self: center; width: 100%; max-width: 460px; margin: 0; }
.ps-art { order: 3; display: block; width: 300px; height: 330px; margin: 28px auto 0; }
.ps-art::before { top: 30px; width: 260px; height: 260px; margin-left: -130px; }
.ps-art img { width: 260px; margin-left: -130px; }
.ps-art .ps-soc { width: 44px; height: 44px; border-radius: 13px; }
.ps-art .ps-soc svg { width: 21px; height: 21px; }
.ps-art .ps-soc--x svg { width: 17px; height: 17px; }
.ps-art .ps-soc--ig { left: 18px; top: 18px; }
.ps-art .ps-soc--tt { right: 14px; top: 6px; }
.ps-art .ps-soc--yt { right: 0; top: 130px; }
.ps-art .ps-soc--fb { left: 0; top: 170px; }
.ps-art .ps-soc--x { right: 30px; top: 206px; }
.ps-band-zone { margin-top: -60px; }
}
@media (max-width: 860px) {
.ps-hero h1 { font-size: 40px; }
.ps-hero-lead { font-size: 18px; }
.ps-hero-sub { font-size: 16px; }
.ps-band { grid-template-columns: 1fr; gap: 0; padding: 24px 22px; text-align: center; }
.ps-band > p { padding: 0 0 18px; font-size: 18px; }
.ps-band dl > div, .ps-band dl > div:first-of-type { padding: 16px 0; border-left: 0; border-top: 1px solid var(--ps-line-2); }
.ps-band dl > div:last-child { padding-bottom: 0; }
.ps-band dd { font-size: 26px; }
}
@media (max-width: 480px) {
.ps-auth { padding: 28px 20px; }
.ps-auth-title { font-size: min(24px, 6.2vw); }
}
/* ==========================================================================
5. Sections & cards
========================================================================== */
.ps-section { padding: 88px 0; }
@media (max-width: 860px) { .ps-section { padding: 72px 0; } }
.ps-section--alt { background: var(--ps-bg-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), inset 0 -1px 0 rgba(255, 255, 255, .035); }
.ps-section--dark { background: var(--ps-bg-deep); border-top: 1px solid var(--ps-line); border-bottom: 1px solid var(--ps-line); }
.ps-section--first { padding-top: 72px; }
.ps-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.ps-head:has(.ps-kinds) { max-width: 1000px; }
.ps-head h2, .ps-h2 { margin: 0; font: 700 clamp(28px, 3.4vw, 40px)/1.15 var(--ps-font); }
.ps-head > p { margin: 14px auto 0; max-width: 38em; font-size: 16px; color: var(--ps-muted); }
.ps-head > .ps-btn { margin-top: 28px; }
.ps-kicker { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--ps-green); }
.ps-card { position: relative; padding: 30px; border-radius: var(--ps-r-lg); background: linear-gradient(160deg, #24264a 0%, #1d1f33 55%); border: 1px solid var(--ps-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 44px -26px rgba(0, 0, 0, .7); }
.ps-card h3 { margin: 0 0 8px; font: 600 19px/1.3 var(--ps-font); }
.ps-card p { margin: 0; font-size: 15px; color: var(--ps-muted); }
.ps-section--dark .ps-card { background: #191a2c; }
@media (max-width: 620px) { .ps-card { padding: 24px; } }
@media (max-width: 360px) { .ps-card { padding: 22px 18px; } }
/* "O que é um painel SMM?" definition block */
.ps-define { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 40px; align-items: center; margin: 56px 0 0; padding: 34px 40px; border-radius: var(--ps-r-lg); background: var(--ps-surface); border: 1px solid var(--ps-line); border-left: 4px solid var(--ps-green); }
.ps-define h2 { margin: 0; font: 700 clamp(24px, 2.6vw, 30px)/1.2 var(--ps-font); }
.ps-define p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ps-text-2); }
@media (max-width: 860px) { .ps-define { grid-template-columns: 1fr; gap: 12px; margin-top: 44px; padding: 24px; } }
/* features */
.ps-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ps-feature { overflow: hidden; transition: transform .2s, border-color .2s; }
.ps-feature::before { content: ""; position: absolute; left: -30%; top: -60%; width: 90%; height: 120%; background: radial-gradient(closest-side, color-mix(in srgb, var(--hue) 16%, transparent), transparent); pointer-events: none; }
.ps-feature:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--hue) 40%, transparent); }
.ps-feature-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ps-feature-top h3 { margin: 0; }
.ps-ico { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--hue); color: #10111c; box-shadow: 0 3px 0 color-mix(in srgb, var(--hue) 60%, #000); transform: rotate(-6deg); transition: transform .2s; }
.ps-ico svg { width: 22px; height: 22px; }
.ps-feature:hover .ps-ico { transform: rotate(0) scale(1.06); }
.ps-feature p { position: relative; max-width: 30ch; }
.ps-feature-bg { position: absolute; right: -18px; bottom: -22px; width: 120px; height: 120px; color: var(--hue); opacity: .07; transform: rotate(-14deg); pointer-events: none; }
.ps-feature-bg svg { width: 100%; height: 100%; }
@media (max-width: 980px) { .ps-features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .ps-features { grid-template-columns: 1fr; } }
/* ==========================================================================
6. Steps 01 / 02 / 03
========================================================================== */
.ps-steps { position: relative; max-width: 1040px; margin: 0 auto; padding: 0; list-style: none; }
.ps-steps-line { position: absolute; left: 50%; top: 0; width: 140px; height: 100%; margin-left: -70px; overflow: visible; pointer-events: none; }
.ps-steps-line path { fill: none; stroke: var(--ps-green); stroke-width: 4; stroke-linecap: round; opacity: .55; }
.ps-step { position: relative; display: grid; grid-template-columns: 1fr 112px 1fr; align-items: center; margin-bottom: 56px; }
.ps-step:last-child { margin-bottom: 0; }
.ps-step > .ps-card { grid-column: 1; grid-row: 1; }
.ps-step > .ps-step-art { grid-column: 3; grid-row: 1; }
.ps-step:nth-child(even) > .ps-card { grid-column: 3; }
.ps-step:nth-child(even) > .ps-step-art { grid-column: 1; }
.ps-step-num { grid-column: 2; grid-row: 1; justify-self: center; position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ps-green); color: var(--ps-green-ink); font-size: 20px; font-weight: 700; box-shadow: 0 0 0 8px var(--ps-bg-deep), 0 10px 30px -6px rgba(1, 214, 118, .55); }
.ps-step-art { display: flex; justify-content: center; }
/* little product mock-ups next to each step */
.ps-play { position: relative; padding: 18px 26px; }
.ps-mini { width: 290px; padding: 20px; border-radius: 18px; background: var(--ps-surface); border: 1px solid var(--ps-line-2); box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .8); transform: rotate(-2.5deg); }
.ps-step:nth-child(even) .ps-mini { transform: rotate(2.5deg); }
.ps-mini-label { margin-bottom: 10px; font-size: 12px; font-weight: 500; color: var(--ps-muted); }
.ps-mini-field { display: flex; align-items: center; height: 40px; margin-bottom: 8px; padding: 0 12px; border-radius: 10px; background: var(--ps-field); font-size: 13px; color: var(--ps-text-2); }
.ps-mini-btn { display: grid; place-items: center; height: 40px; margin-top: 4px; border-radius: 10px; background: var(--ps-green); color: var(--ps-green-ink); font-size: 13px; font-weight: 500; }
.ps-pop { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: #fff; color: #15162a; font-size: 13px; font-weight: 500; box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .6); animation: ps-float 4s ease-in-out infinite; }
.ps-pop svg { width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: var(--ps-green); color: var(--ps-green-ink); box-sizing: content-box; }
.ps-pop--a { right: -10px; bottom: -6px; }
.ps-pop--b { left: -14px; bottom: 6px; animation-delay: -1.5s; }
.ps-pop--c { right: -6px; top: -4px; background: var(--ps-green); color: var(--ps-green-ink); animation-delay: -2.5s; }
.ps-pop-badge { position: absolute; left: 4px; top: 0; padding: 6px 12px; border-radius: 999px; background: #ffb547; color: #2b1a00; font-size: 12px; font-weight: 700; transform: rotate(-12deg); box-shadow: 0 3px 0 #c98417; }
.ps-play .ps-soc { left: -4px; bottom: 4px; width: 48px; height: 48px; border-radius: 14px; transform: rotate(-10deg); }
.ps-play .ps-soc svg { width: 24px; height: 24px; }
.ps-pix { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ps-pix b { display: block; font-size: 22px; font-weight: 700; }
.ps-pix span { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 6px; background: rgba(50, 188, 173, .14); color: #3cc6b6; font-size: 12px; font-weight: 500; }
.ps-qr { display: grid; grid-template-columns: repeat(11, 6px); gap: 1px; padding: 7px; border-radius: 10px; background: #fff; }
.ps-qr i, .ps-qr b { width: 6px; height: 6px; border-radius: 1px; }
.ps-qr i { background: #15162a; }
.ps-progress { height: 8px; margin: 12px 0 8px; border-radius: 999px; background: var(--ps-field); overflow: hidden; }
.ps-progress span { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #01a65c, var(--ps-green)); }
.ps-progress-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--ps-muted); }
.ps-progress-label b { color: var(--ps-green); }
@keyframes ps-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
/* "100% Compatível" box below the dark steps zone */
.ps-devices-zone { padding: 56px 0 88px; background: var(--ps-bg); }
@media (max-width: 860px) { .ps-devices-zone { padding: 44px 0 72px; } }
.ps-devices { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; border-left: 4px solid var(--ps-green); }
.ps-devices > div { flex: 1 1 420px; }
.ps-devices ul { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ps-devices li { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; padding: 14px 0; border-radius: var(--ps-r); background: var(--ps-field); font-size: 12px; color: var(--ps-muted); }
.ps-devices li svg { width: 22px; height: 22px; color: var(--ps-text-2); }
@media (max-width: 860px) {
.ps-steps-line { display: none; }
.ps-steps::before { content: ""; position: absolute; left: 28px; top: 34px; bottom: 34px; margin-left: -1px; border-left: 3px solid rgba(1, 214, 118, .35); }
.ps-step { grid-template-columns: 56px 1fr; gap: 0 18px; margin-bottom: 32px; }
.ps-step > .ps-card, .ps-step:nth-child(even) > .ps-card { grid-column: 2; }
.ps-step-num { grid-column: 1; align-self: start; width: 56px; height: 56px; font-size: 16px; }
.ps-step-art { display: none; }
}
/* ==========================================================================
7. Long SEO article (+ "Ler mais")
========================================================================== */
.ps-article { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 72px; align-items: start; }
.ps-article-side { position: sticky; top: calc(var(--ps-header-h) + 38px); }
.ps-article-side h2 { margin: 0 0 28px; font: 700 clamp(28px, 3vw, 34px)/1.2 var(--ps-font); }
.ps-prose { position: relative; max-width: 680px; font-size: 16px; color: var(--ps-text-2); }
.ps-prose h3 { margin: 48px 0 14px; font: 600 20px/1.35 var(--ps-font); color: var(--ps-text); }
.ps-prose h3:first-of-type { margin-top: 40px; }
.ps-prose p { margin: 0 0 16px; }
.ps-prose ul { margin: 0 0 16px; padding: 0; list-style: none; }
.ps-prose li { position: relative; margin-bottom: 10px; padding-left: 22px; }
.ps-prose li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--ps-green); }
.ps-prose strong { color: var(--ps-text); font-weight: 600; }
.ps-prose a { color: var(--ps-text); text-decoration-color: var(--ps-green); text-underline-offset: 3px; }
/* "Ler mais": JS adds .is-clamped; without JS the full text is shown. The text stays in the HTML. */
.ps-prose.is-clamped { max-height: 640px; overflow: hidden; }
.ps-prose.is-clamped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: linear-gradient(transparent, var(--ps-bg)); pointer-events: none; }
.ps-section--alt .ps-prose.is-clamped::after { background: linear-gradient(transparent, var(--ps-bg-2)); }
.ps-readmore { display: none; }
.ps-prose.is-clamped + .ps-readmore { display: inline-flex; margin-top: 16px; }
.ps-article > .ps-readmore { grid-column: 2; justify-self: start; }
@media (max-width: 960px) {
.ps-article { grid-template-columns: 1fr; gap: 8px; }
.ps-article-side { position: static; }
.ps-prose.is-clamped { max-height: 520px; }
.ps-article > .ps-readmore { grid-column: 1; }
}
/* ==========================================================================
8. CTA + counter
========================================================================== */
.ps-cta { text-align: center; }
.ps-cta--final { background: radial-gradient(700px 360px at 50% 100%, rgba(1, 214, 118, .10), transparent 70%), var(--ps-bg-2); }
.ps-cta h2 { margin: 0; font: 700 clamp(32px, 4vw, 48px)/1.1 var(--ps-font); }
.ps-cta p { margin: 16px auto 0; max-width: 34em; font-size: 16px; color: var(--ps-muted); }
.ps-counter { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin: 44px 0 0; }
.ps-counter span { display: grid; place-items: center; width: 52px; height: 72px; border-radius: 10px; background: var(--ps-surface-2); border: 1px solid var(--ps-line); font-size: 42px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ps-counter i { width: 12px; font-style: normal; font-size: 42px; font-weight: 700; line-height: 1; color: var(--ps-green); }
.ps-counter-label { margin-top: 14px; font-size: 14px; color: var(--ps-muted); }
.ps-cta .ps-btn { margin-top: 40px; }
@media (max-width: 560px) { .ps-counter { gap: 3px; } .ps-counter span { width: 30px; height: 44px; font-size: 24px; border-radius: 7px; } .ps-counter i { width: 8px; font-size: 24px; } }
/* ==========================================================================
9. Resellers
========================================================================== */
.ps-resell-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.ps-resell-head h2 { margin: 0; max-width: 18em; font: 700 clamp(28px, 3.2vw, 38px)/1.15 var(--ps-font); }
.ps-resell-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ps-resell { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; }
.ps-resell > * { min-width: 0; }
.ps-resell > .ps-card:first-child { grid-row: span 2; }
.ps-rtable { width: 100%; margin-top: 26px; border-collapse: collapse; font-size: 15px; }
.ps-rtable th, .ps-rtable td { padding: 15px 0; border-bottom: 1px solid var(--ps-line); text-align: left; font-weight: 500; }
.ps-rtable thead th { padding-top: 0; font-size: 12px; font-weight: 500; color: var(--ps-muted); }
.ps-rtable thead th:not(:first-child), .ps-rtable td { text-align: right; }
.ps-rtable td { color: var(--ps-text-2); }
.ps-rtable td:nth-child(2) { color: #ff7c9c; font-size: 14px; }
.ps-rtable td:last-child { width: 110px; font-weight: 600; color: var(--ps-text); }
.ps-rtable tbody tr:last-child > * { border-bottom: 0; }
.ps-status { margin: 22px 0 0; padding: 0; list-style: none; }
.ps-status li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--ps-line); font-size: 14px; color: var(--ps-text-2); }
.ps-status span { font-variant-numeric: tabular-nums; color: var(--ps-muted); }
.ps-status em { margin-left: auto; padding: 3px 10px; border-radius: 999px; font-style: normal; font-size: 12px; font-weight: 500; white-space: nowrap; }
.ps-status .is-done { background: rgba(1, 214, 118, .12); color: var(--ps-green); }
.ps-status .is-run { background: rgba(76, 155, 255, .14); color: #7db7ff; }
.ps-status .is-wait { background: rgba(255, 181, 71, .14); color: #ffc46e; }
.ps-api-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 20px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--ps-text-2); }
.ps-api-list li { display: flex; align-items: center; gap: 8px; }
.ps-api-list svg { width: 14px; height: 14px; color: var(--ps-green); flex: none; }
.ps-code { margin: 20px 0 0; padding: 16px 18px; border-radius: var(--ps-r); background: #0f1019; border: 1px solid var(--ps-line); font: 500 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; color: #b9bbd3; white-space: pre-wrap; word-break: break-all; }
.ps-code .k { color: var(--ps-green); font-weight: 700; }
.ps-code .s { color: #ffc46e; }
.ps-code .n { color: #7db7ff; }
@media (max-width: 860px) {
.ps-resell { grid-template-columns: 1fr; }
.ps-resell > .ps-card:first-child { grid-row: auto; }
.ps-resell-actions { width: 100%; }
.ps-resell-actions .ps-btn { flex: 1; }
}
@media (max-width: 480px) { .ps-api-list { grid-template-columns: 1fr; } }
@media (max-width: 360px) { .ps-rtable td:last-child { width: auto; } }
/* ==========================================================================
10. Platforms + service-kind stickers
========================================================================== */
.ps-kinds { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.ps-kind {
display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 999px;
background: var(--ps-surface); border: 1px solid color-mix(in srgb, var(--hue) 35%, transparent);
font-size: 15px; font-weight: 600; color: var(--ps-text); text-decoration: none;
box-shadow: 0 3px 0 color-mix(in srgb, var(--hue) 30%, #0c0d16); transition: transform .18s, background .18s;
}
.ps-kinds li:nth-child(odd) .ps-kind { transform: rotate(-2deg); }
.ps-kinds li:nth-child(even) .ps-kind { transform: rotate(2deg); }
.ps-kinds li .ps-kind:hover { transform: rotate(0) translateY(-3px); background: color-mix(in srgb, var(--hue) 14%, var(--ps-surface)); }
.ps-kind span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--hue); color: #10111c; }
.ps-kind svg { width: 17px; height: 17px; }
.ps-platforms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ps-platform { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; transition: border-color .15s, transform .2s; }
.ps-platform::after { content: ""; position: absolute; right: -25%; bottom: -55%; width: 80%; height: 110%; background: radial-gradient(closest-side, color-mix(in srgb, var(--hue, #01d676) 18%, transparent), transparent); pointer-events: none; }
.ps-platform:has(.ps-soc--ig) { --hue: #e1306c; }
.ps-platform:has(.ps-soc--tt) { --hue: #25f4ee; }
.ps-platform:has(.ps-soc--yt) { --hue: #ff0000; }
.ps-platform:has(.ps-soc--fb) { --hue: #0866ff; }
.ps-platform:has(.ps-soc--x) { --hue: #8c8ea9; }
.ps-platform:has(.ps-soc--tg) { --hue: #229ed9; }
.ps-platform > * { position: relative; z-index: 1; }
.ps-platform:hover { border-color: color-mix(in srgb, var(--hue) 45%, transparent); transform: translateY(-3px); }
.ps-platform h3 { margin-top: 2px; }
.ps-platform-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 22px; }
.ps-more { font-size: 14px; font-weight: 600; color: var(--ps-text); }
.ps-platform:hover .ps-more { color: var(--ps-green); }
.ps-platform-foot .ps-soc { position: static; flex: none; width: 42px; height: 42px; border-radius: 12px; box-shadow: none; transform: rotate(-6deg); transition: transform .2s; }
.ps-platform-foot .ps-soc svg { width: 22px; height: 22px; }
.ps-platform-foot .ps-soc--x svg, .ps-platform-foot .ps-soc--tt svg { width: 19px; height: 19px; }
.ps-platform:hover .ps-platform-foot .ps-soc { transform: rotate(0) scale(1.08); }
@media (max-width: 980px) { .ps-platforms { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .ps-platforms { grid-template-columns: 1fr; } }
/* ==========================================================================
11. FAQ
========================================================================== */
.ps-faq { max-width: 860px; margin: 0 auto; }
.ps-faq details { margin-bottom: 10px; border-radius: var(--ps-r); background: var(--ps-surface); border: 1px solid var(--ps-line); }
.ps-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; }
.ps-faq summary::-webkit-details-marker { display: none; }
.ps-faq summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-top: -4px; border-right: 2px solid var(--ps-muted); border-bottom: 2px solid var(--ps-muted); transform: rotate(45deg); transition: transform .2s; }
.ps-faq details[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.ps-faq details p { margin: 0; padding: 0 24px 22px; font-size: 15px; color: var(--ps-muted); }
/* ==========================================================================
12. Footer
========================================================================== */
.ps-footer { padding: 72px 0 32px; background: var(--ps-bg-deep); box-shadow: inset 0 1px 0 rgba(0, 0, 0, .5), inset 0 14px 24px -18px rgba(0, 0, 0, .8); }
.ps-footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.ps-footer-about p { margin: 16px 0 0; max-width: 28em; font-size: 14px; color: var(--ps-muted); }
.ps-footer-h { margin: 0 0 16px; font-size: 14px; font-weight: 600; color: var(--ps-text); }
.ps-footer ul { margin: 0; padding: 0; list-style: none; }
.ps-footer li { margin-bottom: 10px; }
.ps-footer li a { font-size: 14px; color: var(--ps-muted); text-decoration: none; }
.ps-footer li a:hover { color: var(--ps-text); }
.ps-footer .ps-footer-trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; }
.ps-footer-trust li { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 500; color: var(--ps-text-2); }
.ps-footer-trust svg { width: 15px; height: 15px; color: var(--ps-green); }
.ps-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .05); font-size: 13px; color: var(--ps-muted); }
.ps-pay b { margin-left: 4px; padding: 2px 8px; border-radius: 6px; background: rgba(50, 188, 173, .14); color: #3cc6b6; font-weight: 600; }
@media (max-width: 900px) { .ps-footer-grid { grid-template-columns: 1fr 1fr; } .ps-footer-about { grid-column: 1 / -1; } }
/* ==========================================================================
13. Cookie notice (LGPD)
========================================================================== */
.ps-cookie {
position: fixed; left: 50%; bottom: 20px; z-index: 70; display: flex; align-items: center; gap: 18px;
width: min(720px, calc(100% - 32px)); padding: 16px 18px 16px 22px; transform: translateX(-50%);
border-radius: 16px; background: #22243a; border: 1px solid var(--ps-line-2); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
font-size: 14px; color: var(--ps-text-2);
}
.ps-cookie[hidden] { display: none; }
.ps-cookie p { margin: 0; }
.ps-cookie a { color: var(--ps-text); text-underline-offset: 3px; }
.ps-cookie .ps-btn { flex: none; height: 40px; }
@media (max-width: 860px) { .ps-cookie { bottom: 80px; flex-direction: column; align-items: stretch; gap: 12px; text-align: center; } }
/* ==========================================================================
14. Social networks marquee
========================================================================== */
.ps-networks { padding: 44px 0 88px; background: var(--ps-bg-2); overflow: hidden; }
.ps-networks-title { margin: 22px 0 0; text-align: center; font-size: 20px; font-weight: 600; color: var(--ps-text-2); }
.ps-networks-title b { color: var(--ps-text); }
.ps-marquee { display: flex; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ps-marquee-row { display: flex; flex: none; align-items: center; gap: 56px; margin: 0; padding: 0 28px; list-style: none; animation: ps-marquee 100s linear infinite; }
.ps-marquee:hover .ps-marquee-row { animation-play-state: paused; }
/* monochrome wordmark style: no tiles, light grey, white on hover */
.ps-marquee-row li { display: flex; align-items: center; gap: 12px; font-size: 26px; font-weight: 700; white-space: nowrap; color: #b4b6cc; opacity: .75; transition: opacity .2s, color .2s; }
.ps-marquee-row li:hover { color: #fff; opacity: 1; }
.ps-marquee-row svg { display: block; width: 30px; height: 30px; fill: currentColor; }
@keyframes ps-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (max-width: 860px) { .ps-networks { padding: 40px 0 72px; } .ps-marquee-row { gap: 40px; } .ps-marquee-row li { font-size: 22px; } .ps-marquee-row svg { width: 24px; height: 24px; } }
/* sign-up CTA between the stats band and the marquee */
.ps-networks-cta { display: flex; justify-content: center; margin-top: 30px; }
@media (max-width: 860px) { .ps-networks-cta { margin-top: 24px; } .ps-networks-cta .ps-btn { width: 100%; } }
/* footer legal row */
.ps-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.ps-legal a, .ps-cookie-prefs { padding: 0; border: 0; background: none; font: inherit; color: var(--ps-muted); text-decoration: none; cursor: pointer; }
.ps-legal a:hover, .ps-cookie-prefs:hover { color: var(--ps-text); }
@media (max-width: 860px) { .ps-footer-bottom { flex-direction: column; } }
/* ==========================================================================
15. Inner public pages: page head, content, auth pages
========================================================================== */
.ps-pagehead { padding: 56px 0 40px; background: radial-gradient(700px 300px at 50% 0%, rgba(1, 214, 118, .07), transparent 70%), var(--ps-bg); border-bottom: 1px solid var(--ps-line); }
.ps-pagehead { text-align: center; }
.ps-pagehead h1 { margin: 0 auto; font: 700 clamp(30px, 4vw, 44px)/1.12 var(--ps-font); }
.ps-pagehead p, .ps-pagehead-text { margin: 12px auto 0; max-width: 46em; font-size: 16px; color: var(--ps-muted); }
.ps-pagehead-text p { margin: 0 0 10px; }
.ps-pagehead--post h1 { font-size: clamp(28px, 3.6vw, 40px); }
.ps-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--ps-muted); }
.ps-crumbs a { color: var(--ps-muted); text-decoration: none; }
.ps-crumbs a:hover { color: var(--ps-text); }
.ps-pagebody { padding: 40px 0 88px; }
.ps-pagebody--solo { padding-top: 48px; }
.ps-wrap--doc { max-width: 860px; }
@media (max-width: 860px) { .ps-pagehead { padding: 36px 0 28px; } .ps-pagebody { padding: 28px 0 64px; } }
/* rich text coming from the admin (terms, pages, blog posts) */
.ps-content { padding: 36px 40px; border-radius: var(--ps-r-lg); background: var(--ps-surface); border: 1px solid var(--ps-line); font-size: 16px; line-height: 1.75; color: var(--ps-text-2); overflow-wrap: anywhere; }
.ps-content > :first-child { margin-top: 0; }
.ps-content > :last-child { margin-bottom: 0; }
.ps-content h1, .ps-content h2, .ps-content h3, .ps-content h4 { margin: 1.6em 0 .6em; font-family: var(--ps-font); font-weight: 700; line-height: 1.3; color: var(--ps-text); }
.ps-content h1 { font-size: 30px; } .ps-content h2 { font-size: 24px; } .ps-content h3 { font-size: 20px; } .ps-content h4 { font-size: 16px; }
.ps-content p { margin: 0 0 1em; }
.ps-content a { color: var(--ps-green); text-underline-offset: 3px; }
.ps-content ul, .ps-content ol { margin: 0 0 1em; padding-left: 1.3em; }
.ps-content li { margin-bottom: .4em; }
.ps-content li::marker { color: var(--ps-green); }
.ps-content img { max-width: 100%; height: auto; border-radius: var(--ps-r); }
.ps-content blockquote { margin: 1.2em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--ps-green); color: var(--ps-text); }
.ps-content table { width: 100%; margin: 1em 0; border-collapse: collapse; font-size: 15px; }
.ps-content th, .ps-content td { padding: 10px 12px; border: 1px solid var(--ps-line-2); text-align: left; }
.ps-content hr { margin: 2em 0; border: 0; border-top: 1px solid var(--ps-line-2); }
.ps-content strong { color: var(--ps-text); }
.ps-content--below { margin-top: 32px; }
.ps-content--post { padding: 0; background: none; border: 0; font-size: 16px; }
@media (max-width: 620px) { .ps-content { padding: 24px 20px; } }
/* sign-up page: form on the left, heading + 3-step path on the right (stacks head, form, path on mobile) */
.ps-hero--signup .ps-signup-grid { display: grid; grid-template-columns: 440px minmax(0, 1fr); grid-template-areas: "form head" "form path"; grid-template-rows: auto 1fr; column-gap: 72px; padding: 56px 24px 88px; }
.ps-signup-head { grid-area: head; align-self: end; }
.ps-auth--signup { grid-area: form; align-self: start; }
.ps-signup-path { grid-area: path; }
.ps-hero--signup h1 { margin: 0; font-size: clamp(36px, 4.6vw, 56px); }
.ps-hero--signup .ps-hero-sub { max-width: 30em; }
.ps-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: -6px 0 22px; }
.ps-track i { height: 4px; border-radius: 4px; background: var(--ps-line-2); }
.ps-track .is-on { background: var(--ps-green); box-shadow: 0 0 12px rgba(1, 214, 118, .5); }
.ps-path { position: relative; display: grid; gap: 26px; margin: 40px 0 0; padding: 0; list-style: none; }
.ps-path::before { content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px; border-left: 2px dashed var(--ps-line-2); }
.ps-path li { position: relative; display: flex; align-items: flex-start; gap: 20px; }
.ps-path-dot { flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--ps-bg); border: 2px solid var(--ps-line-2); }
.ps-path .is-now .ps-path-dot { border-color: var(--ps-green); background: radial-gradient(circle, var(--ps-green) 0 4px, var(--ps-bg) 5px); box-shadow: 0 0 0 6px rgba(1, 214, 118, .14); }
.ps-path b { display: block; font-size: 16px; font-weight: 600; color: var(--ps-text-2); }
.ps-path .is-now b { color: var(--ps-text); }
.ps-path small { display: block; margin-top: 3px; font-size: 14px; color: var(--ps-muted); }
.ps-signup-nets { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 44px 0 0; padding: 22px 0 0; border-top: 1px solid var(--ps-line); list-style: none; color: var(--ps-muted); }
.ps-signup-nets svg { display: block; width: 20px; height: 20px; fill: currentColor; opacity: .75; }
.ps-signup-nets a { font-size: 14px; font-weight: 500; color: var(--ps-muted); text-decoration: underline; text-underline-offset: 3px; }
.ps-signup-nets a:hover { color: var(--ps-text); }
.ps-auth-note { margin: -10px 0 20px; text-align: center; font-size: 14px; color: var(--ps-muted); }
.ps-auth-note strong { color: var(--ps-text); }
.ps-auth--signup { margin: 0; }
.ps-check { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 16px; font-size: 14px; color: var(--ps-text-2); cursor: pointer; }
.ps-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ps-green); flex: none; }
.ps-check a { color: var(--ps-green); }
.ps-captcha { display: flex; justify-content: center; margin: 4px 0 16px; overflow: hidden; }
.ps-google { display: flex; justify-content: center; min-height: 44px; }
.ps-define-title { margin: 0; font: 700 clamp(22px, 2.4vw, 28px)/1.25 var(--ps-font); color: var(--ps-text); }
.ps-seo-block { max-width: 860px; }
.ps-seo-block h2 { margin: 0 0 18px; font: 700 clamp(26px, 3vw, 34px)/1.2 var(--ps-font); }
.ps-seo-block p { margin: 0 0 14px; color: var(--ps-text-2); }
.ps-seo-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 22px 0 0; padding: 0; list-style: none; }
.ps-seo-links a { font-weight: 600; color: var(--ps-green); text-decoration: none; }
.ps-seo-links a:hover { text-decoration: underline; }
@media (max-width: 1000px) {
.ps-hero--signup .ps-signup-grid { grid-template-columns: 1fr; grid-template-areas: "head" "form" "path"; row-gap: 32px; padding: 32px 24px 64px; }
.ps-signup-head { text-align: center; }
.ps-hero--signup .ps-hero-sub { margin-left: auto; margin-right: auto; }
.ps-auth--signup { width: 100%; max-width: 460px; justify-self: center; }
.ps-signup-path { width: 100%; max-width: 460px; justify-self: center; }
.ps-path { margin-top: 8px; }
.ps-signup-nets { justify-content: center; margin-top: 32px; }
}
@media (max-width: 600px) { .ps-hero--signup .ps-signup-grid { padding: 24px 16px 56px; } }
/* single-card auth pages (reset password, 2FA) */
.ps-authpage { padding: 72px 0 96px; background: radial-gradient(600px 320px at 50% 0%, rgba(1, 214, 118, .08), transparent 70%); }
.ps-auth--solo { max-width: 440px; margin: 0 auto; }
h1.ps-auth-title { white-space: normal; }
/* ==========================================================================
16. Services table
========================================================================== */
.ps-btn--xs { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.ps-btn .ps-caret { width: 14px; height: 14px; }
.ps-svc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.ps-svc-bar .ps-btn { height: 46px; }
.ps-svc-bar .ps-btn svg { width: 18px; height: 18px; }
.ps-svc-search { position: relative; flex: 1 1 260px; margin-left: auto; max-width: 420px; }
.ps-svc-search svg { position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--ps-muted); pointer-events: none; }
.ps-page .ps-svc-search input { width: 100%; height: 46px; padding: 0 14px 0 44px; border-radius: var(--ps-r); background: var(--ps-field); border: 1.5px solid #3c3f62; color: var(--ps-text); font: 400 15px var(--ps-font); box-shadow: none; }
.ps-page .ps-svc-search input:focus { outline: none; border-color: var(--ps-green); box-shadow: 0 0 0 4px rgba(1, 214, 118, .16); }
.ps-svc-wrap { border-radius: var(--ps-r-lg); background: var(--ps-surface); border: 1px solid var(--ps-line); overflow: hidden; }
.ps-svc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ps-svc-table thead th { padding: 14px 16px; background: var(--ps-surface-2); font-size: 12px; font-weight: 500; color: var(--ps-muted); text-align: left; white-space: nowrap; }
.ps-svc-table td { padding: 14px 16px; border-top: 1px solid var(--ps-line); color: var(--ps-text-2); vertical-align: middle; }
.ps-svc-cat td { padding: 18px 16px 10px; background: rgba(1, 214, 118, .04); }
.ps-svc-cat h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; color: var(--ps-text); }
.ps-svc-row:hover td { background: rgba(255, 255, 255, .02); }
.ps-svc-name { color: var(--ps-text) !important; font-weight: 500; }
.ps-svc-id { color: var(--ps-muted) !important; font-variant-numeric: tabular-nums; }
.ps-svc-rate { font-weight: 600; color: var(--ps-green) !important; white-space: nowrap; }
.ps-svc-time { white-space: nowrap; }
.ps-svc-more { text-align: right; }
.ps-svc-fav { width: 42px; }
.ps-svc-fav [role="button"] { cursor: pointer; color: var(--ps-muted); }
.ps-svc-fav .favorite-active { color: #ffb547; }
.ps-cat-img { width: 20px; height: 20px; border-radius: 4px; object-fit: contain; }
@media (max-width: 760px) {
.ps-svc-search { max-width: none; margin-left: 0; }
.ps-svc-table thead { display: none; }
.ps-svc-table, .ps-svc-table tbody, .ps-svc-table tr, .ps-svc-table td { display: block; width: 100%; }
.ps-svc-row { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px 12px; padding: 16px; border-top: 1px solid var(--ps-line); }
.ps-svc-row td { padding: 0; border: 0; }
.ps-svc-row .ps-svc-name { grid-column: 1 / -1; order: -2; font-size: 15px; }
.ps-svc-row .ps-svc-id { grid-column: 1 / -1; order: -3; font-size: 12px; }
.ps-svc-row .ps-svc-fav { position: absolute; right: 16px; width: auto; }
.ps-svc-row { position: relative; }
.ps-svc-row td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 500; color: var(--ps-muted); }
.ps-svc-row .ps-svc-id::before { display: none !important; }
.ps-svc-row .ps-svc-more { grid-column: 1 / -1; text-align: left; margin-top: 6px; }
.ps-svc-row .ps-svc-time { grid-column: 1 / -1; }
}
.ps-inline-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 32px; padding: 26px 30px; border-radius: var(--ps-r-lg); background: var(--ps-surface); border: 1px solid var(--ps-line); border-left: 4px solid var(--ps-green); }
.ps-inline-cta p { margin: 0; max-width: 36em; font-size: 16px; color: var(--ps-text-2); }
/* Bootstrap dropdowns used by panel scripts, dark */
.ps-page .dropdown-menu { min-width: 220px; max-height: 60vh; overflow-y: auto; margin-top: 6px; padding: 6px; border-radius: var(--ps-r); background: #23253d; border: 1px solid var(--ps-line-2); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8); }
.ps-page .dropdown-menu > li > a { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--ps-text-2); white-space: nowrap; }
.ps-page .dropdown-menu > li > a:hover, .ps-page .dropdown-menu > li > a:focus { background: rgba(255, 255, 255, .06); color: var(--ps-text); }
.ps-page .dropdown-menu > .active > a, .ps-page .dropdown-menu > .active > a:hover { background: rgba(1, 214, 118, .14); color: var(--ps-green); }
.ps-page .tooltip-inner { background: #2d2f4a; color: var(--ps-text); font-family: var(--ps-font); border-radius: 8px; }
/* description modal (panel script) */
.ps-page .modal-content { background: var(--ps-surface); color: var(--ps-text-2); border: 1px solid var(--ps-line-2); border-radius: var(--ps-r-lg); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.ps-page .modal-header, .ps-page .modal-footer { border-color: var(--ps-line); }
.ps-page .modal-title { font-family: var(--ps-font); font-weight: 600; color: var(--ps-text); }
.ps-page .modal-backdrop.in { opacity: .7; }
.ps-page .close { color: var(--ps-text); text-shadow: none; opacity: .6; }
/* ==========================================================================
17. API docs
========================================================================== */
.ps-wrap--doc > .ps-card + .ps-card { margin-top: 16px; }
.ps-api-info dl { display: grid; gap: 0; margin: 0; }
.ps-api-info dl > div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--ps-line); }
.ps-api-info dl > div:first-child { border-top: 0; padding-top: 0; }
.ps-api-info dt { font-size: 14px; color: var(--ps-muted); }
.ps-api-info dd { margin: 0; font-size: 15px; color: var(--ps-text); overflow-wrap: anywhere; }
.ps-api-info a { color: var(--ps-green); }
.ps-page code { padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .06); font: 500 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: #e7e8f3; }
.ps-api-method h2 { margin: 0 0 16px; font: 700 20px/1.3 var(--ps-font); }
.ps-api-type { margin: 0 0 14px; }
.ps-page .ps-api-type select { max-width: 320px; height: 44px; border-radius: var(--ps-r); background: var(--ps-field); border: 1.5px solid #3c3f62; color: var(--ps-text); font: 400 14px var(--ps-font); }
.ps-table-wrap { overflow-x: auto; border-radius: var(--ps-r); border: 1px solid var(--ps-line); }
.ps-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ps-table th { padding: 11px 14px; background: var(--ps-surface-2); font-size: 12px; font-weight: 500; color: var(--ps-muted); text-align: left; }
.ps-table td { padding: 11px 14px; border-top: 1px solid var(--ps-line); color: var(--ps-text-2); vertical-align: top; }
.ps-table td:first-child { width: 38%; }
.ps-api-ex { margin: 18px 0 8px; font-size: 13px; font-weight: 500; color: var(--ps-muted); }
.ps-wrap--doc > .ps-btn { margin-top: 20px; }
pre.ps-code { overflow-x: auto; max-height: 420px; white-space: pre; word-break: normal; }
@media (max-width: 600px) { .ps-api-info dl > div { grid-template-columns: 1fr; gap: 2px; } }
/* ==========================================================================
18. Blog
========================================================================== */
.ps-posts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ps-post { display: flex; min-width: 0; }
.ps-post-link { display: grid; grid-template-columns: 38% minmax(0, 1fr); width: 100%; overflow: hidden; border-radius: var(--ps-r-lg); background: var(--ps-surface); border: 1px solid var(--ps-line); text-decoration: none; transition: border-color .15s; }
.ps-post-link:hover { border-color: var(--ps-line-2); }
.ps-post-img { width: 100%; min-width: 0; min-height: 100%; overflow: hidden; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #23254a, #1a2a33); }
.ps-post-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ps-post-body { display: flex; flex-direction: column; min-width: 0; padding: 20px 22px; }
.ps-post--lead { grid-column: 1 / -1; }
.ps-post--lead .ps-post-link { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.ps-post--lead .ps-post-img { aspect-ratio: 16 / 9; }
.ps-post--lead .ps-post-body { justify-content: center; padding: 36px 40px; }
.ps-post--lead h2 { font-size: clamp(22px, 2.4vw, 30px) !important; line-height: 1.25 !important; }
.ps-post--lead .ps-post-excerpt { -webkit-line-clamp: 4; font-size: 15px; }
.ps-post-date { margin: 0 0 8px; font-size: 13px; color: var(--ps-muted); }
.ps-post-body h2 { margin: 0 0 8px; font: 600 17px/1.35 var(--ps-font); color: var(--ps-text); }
.ps-post-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 16px; font-size: 14px; color: var(--ps-muted); }
.ps-post-body .ps-more { margin-top: auto; }
.ps-post-link:hover .ps-more { color: var(--ps-green); }
.ps-pager ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 40px 0 0; padding: 0; list-style: none; }
.ps-pager a { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 10px; background: var(--ps-surface); border: 1px solid var(--ps-line); color: var(--ps-text-2); text-decoration: none; font-weight: 600; }
.ps-pager a:hover { color: var(--ps-text); border-color: var(--ps-line-2); }
.ps-pager .active a { background: var(--ps-green); border-color: var(--ps-green); color: var(--ps-green-ink); }
.ps-post-cover { display: block; width: 100%; height: auto; margin-bottom: 32px; border-radius: var(--ps-r-lg); }
.ps-post-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin: 48px 0 28px; padding: 26px 30px; border-radius: var(--ps-r-lg); background: var(--ps-surface); border: 1px solid var(--ps-line); border-left: 4px solid var(--ps-green); }
.ps-post-cta p { margin: 0; color: var(--ps-text-2); }
.ps-post-cta .ps-post-cta-title { margin-bottom: 4px; font-size: 18px; font-weight: 700; color: var(--ps-text); }
@media (max-width: 980px) { .ps-posts { grid-template-columns: 1fr; } .ps-post--lead .ps-post-body { padding: 28px; } }
@media (max-width: 620px) { .ps-post-link, .ps-post--lead .ps-post-link { grid-template-columns: 1fr; } .ps-post-img { aspect-ratio: 16 / 9; } .ps-post--lead .ps-post-body { padding: 20px 22px; } }
/* ==========================================================================
19. Logged-in app: shell (sidebar, top bar, bottom tabs) + level colours
========================================================================== */
.ps-app { --ps-side-w: 268px; --ps-top-h: 72px; --ps-field-line: #34375a; --lv: #9da0bd; }
/* level colours (Membro ... Imperador) */
.lv-membro { --lv: #9da0bd; --lv-2: #6c6f8c; }
.lv-bronze { --lv: #e3955a; --lv-2: #a85a28; }
.lv-prata { --lv: #cfd6e6; --lv-2: #8a93ab; }
.lv-ouro { --lv: #ffc84a; --lv-2: #d28a0e; }
.lv-platina { --lv: #67dbe9; --lv-2: #2a9fb0; }
.lv-diamante { --lv: #9d8cff; --lv-2: #5d45e0; }
.lv-supremo { --lv: #2fe39a; --lv-2: #01a65c; }
.lv-imperador { --lv: #ff7a7a; --lv-2: #d23b5a; }
/* menu tile hues */
.hue-green { --hue: #01d676; } .hue-blue { --hue: #5c9cff; } .hue-violet { --hue: #9d7dff; } .hue-cyan { --hue: #3fd0e8; }
.hue-teal { --hue: #2ad1b0; } .hue-amber { --hue: #ffb547; } .hue-pink { --hue: #ff6fae; } .hue-yellow { --hue: #ffd23f; }
.hue-orange { --hue: #ff8a4c; } .hue-indigo { --hue: #7c86ff; } .hue-slate { --hue: #9aa3c7; } .hue-red { --hue: #ff6b6b; }
.ps-shell { display: grid; grid-template-columns: var(--ps-side-w) minmax(0, 1fr); min-height: 100vh; }
.ps-side { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; overflow-y: auto; background: #0f101b; border-right: 1px solid var(--ps-line); scrollbar-width: thin; scrollbar-color: #2a2c45 transparent; }
.ps-side-head { display: flex; align-items: center; justify-content: space-between; flex: none; height: var(--ps-top-h); padding: 0 22px; }
.ps-side-head .ps-logo { font-size: 18px; }
.ps-side-close { display: none; }
/* profile + level card at the top of the sidebar */
.ps-app .ps-me { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; margin: 0 14px 14px; padding: 14px; border-radius: 16px; text-decoration: none; color: var(--ps-text);
background: linear-gradient(160deg, color-mix(in srgb, var(--lv) 16%, #1b1d30), #181a2b 70%); border: 1px solid color-mix(in srgb, var(--lv) 30%, transparent); transition: border-color .15s; }
.ps-app .ps-me:hover { border-color: color-mix(in srgb, var(--lv) 60%, transparent); text-decoration: none; }
.ps-me-av { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #262842; font-weight: 700; font-size: 18px; color: var(--ps-text); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lv) 70%, transparent); }
.ps-me-av svg { position: absolute; right: -7px; bottom: -7px; width: 22px; height: 22px; color: var(--lv); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.ps-me-txt { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.ps-me-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; }
.ps-me-lv { font-size: 13px; font-weight: 500; color: var(--lv); }
.ps-me-lv i { margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--lv) 18%, transparent); font-style: normal; font-size: 12px; }
.ps-me-bar { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ps-me-bar i { display: block; height: 100%; min-width: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--lv-2), var(--lv)); }
.ps-me-next { grid-column: 1 / -1; margin-top: -4px; font-size: 12px; color: var(--ps-muted); }
/* main menu: bold rows with a coloured icon tile */
.ps-side-nav { flex: 1; padding: 4px 14px 12px; }
.ps-side-nav ul, .ps-side-links { margin: 0; padding: 0; list-style: none; }
.ps-side-nav li + li { margin-top: 2px; }
.ps-app .ps-side-nav a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 10px; border-radius: 14px; font-size: 15px; font-weight: 600; color: #b9bbd2; text-decoration: none; transition: background-color .15s, color .15s; }
.ps-app .ps-side-nav a:hover { color: var(--ps-text); background: rgba(255, 255, 255, .045); }
.ps-nav-ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--hue) 15%, transparent); color: var(--hue); transition: transform .15s; }
.ps-nav-ico svg { width: 19px; height: 19px; fill: currentColor; }
.ps-side-nav li { --hue: #7c86ff; }
.ps-side-nav a:hover .ps-nav-ico { transform: rotate(-6deg) scale(1.06); }
.ps-app .ps-side-nav .is-active a { color: var(--ps-text); background: #1f2136; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.ps-side-nav .is-active a::before { content: ""; position: absolute; left: -14px; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--hue); }
.ps-side-nav .is-active .ps-nav-ico { background: var(--hue); color: #0f101b; box-shadow: 0 6px 16px -6px var(--hue); }
.ps-nav-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-side-ext { width: 14px; height: 14px; opacity: .5; fill: currentColor; }
.ps-count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: #ff6fae; color: #1a0612; font: 700 12px/22px var(--ps-font); text-align: center; font-style: normal; }
.ps-side-links { display: flex; gap: 6px; margin: 0 14px 16px; padding-top: 12px; border-top: 1px solid var(--ps-line); }
.ps-side-links li { flex: 1; }
.ps-app .ps-side-links a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--ps-muted); text-decoration: none; }
.ps-app .ps-side-links a:hover { color: var(--ps-text); background: rgba(255, 255, 255, .05); }
.ps-side-links svg { width: 17px; height: 17px; fill: currentColor; }
.ps-side a, .ps-side a:focus, .ps-side a:hover { text-decoration: none; }
.ps-scrim { display: none; }
/* top bar */
.ps-main { min-width: 0; display: flex; flex-direction: column; }
.ps-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; height: var(--ps-top-h); padding: 0 32px; background: rgba(20, 21, 35, .97); border-bottom: 1px solid var(--ps-line); }
.ps-top-menu, .ps-top-logo { display: none; }
.ps-top-hello { margin: 0; font-size: 15px; color: var(--ps-muted); }
.ps-top-hello b { color: var(--ps-text); font-weight: 600; }
.ps-top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ps-wallet { position: relative; }
.ps-wallet > a, span.ps-wallet { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 8px; border-radius: 10px; background: #1d1f33; border: 1px solid var(--ps-line-2); color: var(--ps-text); text-decoration: none; }
.ps-app .ps-wallet > a:hover { border-color: rgba(1, 214, 118, .5); text-decoration: none; color: var(--ps-text); }
.ps-coin { width: 24px; height: 24px; color: var(--ps-green); }
.ps-wallet b { white-space: nowrap; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ps-wallet .ps-caret { width: 12px; height: 12px; color: var(--ps-muted); fill: currentColor; }
.ps-wallet .dropdown-menu { min-width: 170px; margin-top: 8px; padding: 6px; border-radius: 14px; background: #23253d; border: 1px solid var(--ps-line-2); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8); }
.ps-wallet .dropdown-menu > li > a { padding: 9px 12px; border-radius: 9px; color: var(--ps-text-2) !important; }
.ps-wallet .dropdown-menu > li > a:hover, .ps-wallet .dropdown-menu > .active > a { background: rgba(255, 255, 255, .06); color: var(--ps-text) !important; }
.ps-app .ps-top-ico { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #1d1f33; border: 1px solid var(--ps-line-2); color: var(--ps-text-2); transition: color .15s, border-color .15s, background .15s; }
.ps-app .ps-top-ico:hover { color: var(--ps-text); border-color: rgba(139, 152, 255, .5); background: rgba(139, 152, 255, .1); text-decoration: none; }
.ps-app .ps-top-ico--out:hover { color: #ff8a8a; border-color: rgba(255, 107, 107, .45); background: rgba(255, 107, 107, .08); }
.ps-top-ico svg { width: 18px; height: 18px; fill: currentColor; }
.ps-top-dot { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff6fae; border: 2px solid #141523; color: #fff; font: 700 10px/1 var(--ps-font); font-style: normal; }
.ps-wallet + .ps-top-ico { margin-left: 4px; }
.ps-app-main { flex: 1; }
.ps-tabbar--app { display: none; }
@media (max-width: 1024px) {
.ps-shell { display: block; }
.ps-side { position: fixed; left: 0; top: 0; bottom: 0; z-index: 90; width: min(300px, 86vw); height: auto; transform: translateX(-102%); transition: transform .22s ease; }
.ps-side.is-open { transform: none; box-shadow: 24px 0 60px rgba(0, 0, 0, .5); }
.ps-side-close { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--ps-muted); cursor: pointer; }
.ps-side-close svg { width: 20px; height: 20px; fill: currentColor; }
.ps-scrim { position: fixed; inset: 0; z-index: 85; display: block; background: rgba(6, 7, 14, .65); }
.ps-scrim[hidden] { display: none; }
.ps-top { height: 64px; padding: 0 14px; gap: 8px; }
.ps-top-menu { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 12px; background: #1d1f33; color: var(--ps-text); cursor: pointer; }
.ps-top-menu svg { width: 22px; height: 22px; fill: currentColor; }
.ps-top-logo { display: inline-flex; }
.ps-top-hello { display: none; }
.ps-wallet > a, span.ps-wallet { height: 38px; padding-right: 12px; }
.ps-tabbar--app { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(5, 1fr); height: 66px; padding-bottom: env(safe-area-inset-bottom); background: #0f101b; border-top: 1px solid var(--ps-line); }
.ps-tabbar--app a, .ps-tabbar--app button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; font: 600 11px var(--ps-font); color: var(--ps-muted); text-decoration: none; cursor: pointer; }
.ps-tabbar--app svg { width: 22px; height: 22px; fill: currentColor; }
.ps-app .ps-tabbar--app .is-active { color: var(--ps-text); }
.ps-tabbar--app .is-active svg { color: var(--ps-green); }
.ps-app-main { padding-bottom: 74px; }
}
@media (max-width: 400px) { .ps-coin { width: 24px; height: 24px; } .ps-wallet b { font-size: 15px; } }
/* ==========================================================================
20. Logged-in app: shared parts (headings, panels, form controls, select2, tables)
========================================================================== */
.ps-app-wrap { max-width: 1360px; margin: 0 auto; padding: 32px 32px 72px; }
.ps-app-wrap--narrow { max-width: 860px; }
.ps-app-h1 { margin: 0 0 24px; font: 700 28px/1.2 var(--ps-font); color: var(--ps-text); }
.ps-app-h2 { margin: 0; font: 600 17px/1.3 var(--ps-font); color: var(--ps-text); }
.ps-app-wrap > .ps-app-h2 { margin: 40px 0 14px; }
.ps-app-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 20px; }
.ps-app-head .ps-app-h1 { margin: 0; }
.ps-panel { padding: 28px; border-radius: 20px; background: var(--ps-surface); border: 1px solid var(--ps-line); box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 40px -28px rgba(0, 0, 0, .7); }
.ps-panel--flush { padding: 0; overflow: hidden; overflow-x: auto; }
.ps-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--ps-line); }
.ps-app-text { margin-top: 24px; }
.ps-num { text-align: right; font-variant-numeric: tabular-nums; }
.ps-right { text-align: right; }
.ps-muted { color: var(--ps-muted) !important; }
.ps-strong { color: var(--ps-text) !important; font-weight: 600; }
.ps-break { overflow-wrap: anywhere; }
.ps-hint { display: block; margin-top: 8px; font-size: 13px; color: var(--ps-muted); }
.ps-app .ps-hint a { color: var(--ps-text-2); text-decoration: underline; text-underline-offset: 2px; }
/* form controls (also styles the fields the panel JS injects into #fields) */
.ps-app .form-group { margin-bottom: 20px; }
.ps-app .control-label, .ps-app .ps-panel label { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 500; color: var(--ps-text-2); }
.ps-app .ps-panel .form-control { height: 48px; padding: 0 14px; border-radius: 12px; background: var(--ps-field); border: 1.5px solid var(--ps-field-line); color: var(--ps-text); font: 400 15px var(--ps-font); box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.ps-app .ps-panel textarea.form-control { height: auto; min-height: 110px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
.ps-app .ps-panel .form-control::placeholder { color: #7f829e; }
.ps-app .ps-panel .form-control:focus { outline: none; border-color: var(--ps-green); box-shadow: 0 0 0 4px rgba(1, 214, 118, .14); }
.ps-app .ps-panel select.form-control { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238f91ab' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.ps-app .ps-panel select.form-control option, .ps-app .ps-panel select.form-control optgroup { background: #23253d; color: var(--ps-text); }
.ps-app .ps-panel .help-block, .ps-app #fields small, .ps-app #fields .text-muted { display: block; margin-top: 8px; font-size: 13px; color: var(--ps-muted); }
.ps-app .ps-panel .checkbox label, .ps-app .ps-panel .radio label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.ps-app .ps-panel input[type="checkbox"], .ps-app .ps-panel input[type="radio"] { accent-color: var(--ps-green); }
.ps-app .ps-panel .has-error .form-control { border-color: #ff6b6b; }
.ps-app .ps-panel .input-group { display: flex; }
.ps-app .ps-panel .input-group .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ps-app .ps-panel .input-group-addon, .ps-app .ps-panel .input-group-btn .btn { display: inline-flex; align-items: center; width: auto; height: 48px; padding: 0 14px; border-radius: 0 12px 12px 0; border: 1.5px solid var(--ps-field-line); border-left: 0; background: var(--ps-surface-2); color: var(--ps-text-2); }
/* select2 (the panel turns the category/service selects into select2 widgets) */
.ps-app .select2-container { width: 100% !important; font-family: var(--ps-font); }
.ps-app .select2-container--default .select2-selection--single { display: flex; align-items: center; height: 48px; border-radius: 12px; background: var(--ps-field); border: 1.5px solid var(--ps-field-line); outline: none; }
.ps-app .select2-container--default.select2-container--open .select2-selection--single, .ps-app .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--ps-green); box-shadow: 0 0 0 4px rgba(1, 214, 118, .14); }
.ps-app .select2-container--default .select2-selection--single .select2-selection__rendered { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 0 40px 0 14px; line-height: 1.4; color: var(--ps-text); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-app .select2-container--default .select2-selection--single .select2-selection__arrow { top: 0; right: 10px; height: 46px; }
.ps-app .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--ps-muted) transparent transparent; }
.ps-app .select2-selection__icon, .ps-app .select2-results__option img, .ps-app .select2-selection__rendered img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.ps-app .select2-dropdown { z-index: 1060; overflow: hidden; border-radius: 12px !important; background: #23253d; border: 1px solid var(--ps-line-2) !important; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .85); color: var(--ps-text-2); }
.ps-app .select2-dropdown--below { margin-top: 6px; }
.ps-app .select2-dropdown--above { margin-top: -6px; }
.ps-app .select2-search--dropdown { padding: 10px; }
.ps-app .select2-container--default .select2-search--dropdown .select2-search__field { height: 40px; padding: 0 12px; border-radius: 9px; background: var(--ps-field); border: 1px solid var(--ps-field-line); color: var(--ps-text); font: 400 14px var(--ps-font); outline: none; }
.ps-app .select2-container--default .select2-results > .select2-results__options { max-height: 340px; padding: 0 6px 6px; }
.ps-app .select2-results__option { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; font-size: 14px; line-height: 1.45; }
.ps-app .select2-container--default .select2-results__option[aria-selected="true"], .ps-app .select2-container--default .select2-results__option--selected { background: rgba(255, 255, 255, .05); color: var(--ps-text); }
.ps-app .select2-container--default .select2-results__option--highlighted[aria-selected], .ps-app .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: rgba(1, 214, 118, .14); color: var(--ps-text); }
.ps-app .select2-results__message { color: var(--ps-muted); }
/* the panel puts .form-control on the select2 box too: let select2 own the padding */
.ps-app .ps-panel .select2-selection.form-control { padding: 0; height: 48px; }
.ps-app .ps-panel .form-control[readonly]:not(#charge), .ps-app .ps-panel .form-control[disabled] { background: transparent; border-style: dashed; color: var(--ps-text-2); }
/* page title with the same coloured tile as the menu */
.ps-ptitle { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; }
.ps-ptitle .ps-nav-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--hue); color: #0f101b; box-shadow: 0 10px 24px -10px var(--hue); }
.ps-ptitle .ps-nav-ico svg { width: 24px; height: 24px; }
.ps-ptitle h1 { margin: 0; font: 700 26px/1.2 var(--ps-font); color: var(--ps-text); }
.ps-ptitle p { margin: 2px 0 0; font-size: 14px; color: var(--ps-muted); }
.ps-app-head .ps-ptitle { margin: 0; }
/* alerts inside app panels */
.ps-app .ps-note { position: relative; margin: 0 0 20px; padding: 14px 44px 14px 16px; border: 0; border-radius: 12px; font-size: 14px; background: rgba(1, 214, 118, .1); color: #b9f5d6; }
.ps-app .ps-note--error { background: rgba(255, 92, 92, .1); color: #ffb3b3; }
.ps-app .ps-note .close, .ps-app .ps-receipt .close { position: absolute; right: 14px; top: 12px; float: none; opacity: .6; color: inherit; text-shadow: none; font-size: 22px; font-weight: 400; }
/* search box + status tabs + small action buttons */
.ps-search { position: relative; width: 300px; max-width: 100%; margin: 0; }
.ps-search svg { position: absolute; left: 13px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px; color: var(--ps-muted); fill: currentColor; pointer-events: none; }
.ps-app .ps-search .form-control { width: 100%; height: 42px; padding: 0 12px 0 40px; border-radius: 10px; background: var(--ps-surface); border: 1px solid var(--ps-line-2); color: var(--ps-text); font: 400 14px var(--ps-font); box-shadow: none; }
.ps-app .ps-search .form-control:focus { outline: none; border-color: var(--ps-green); }
.ps-search--sm { width: 220px; }
.ps-tabs { display: flex; gap: 4px; margin: 0 0 20px; border-bottom: 1px solid var(--ps-line); overflow-x: auto; scrollbar-width: none; }
.ps-tabs::-webkit-scrollbar { display: none; }
.ps-app .ps-tabs a { position: relative; flex: none; padding: 10px 12px 12px; font-size: 14px; font-weight: 500; color: var(--ps-muted); text-decoration: none; white-space: nowrap; }
.ps-app .ps-tabs a:hover { color: var(--ps-text); }
.ps-app .ps-tabs a.is-on { color: var(--ps-text); }
.ps-tabs a.is-on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ps-green); }
.ps-app .ps-chip-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(1, 214, 118, .4); background: transparent; color: var(--ps-green); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; }
.ps-app .ps-chip-btn:hover { background: rgba(1, 214, 118, .1); text-decoration: none; }
.ps-app .ps-chip-btn--quiet { border-color: var(--ps-line-2); color: var(--ps-text-2); }
.ps-app .ps-chip-btn--quiet:hover { background: rgba(255, 255, 255, .05); color: var(--ps-text); }
.ps-app .ps-chip-btn.is-off { border-color: var(--ps-line); color: var(--ps-muted); cursor: default; }
.ps-app .ps-chip-btn.is-done { border-color: transparent; color: var(--ps-muted); pointer-events: none; }
.ps-pager--in { padding: 12px 18px 18px; }
/* status pills (colour by meaning, text comes from the panel) */
.ps-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; background: rgba(255, 255, 255, .07); color: #c3c5d8; }
.ps-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ps-pill--progress { background: rgba(92, 156, 255, .14); color: #8fb8ff; }
.ps-pill--done { background: rgba(1, 214, 118, .12); color: #34e08f; }
.ps-pill--partial { background: rgba(255, 181, 71, .13); color: #ffc46e; }
.ps-pill--canceled { background: rgba(255, 92, 92, .12); color: #ff9090; }
.ps-pill--plain::before { display: none; }
/* generic app table */
.ps-table-app, .ps-orders { width: 100%; border-collapse: collapse; font-size: 14px; }
.ps-table-app th, .ps-orders th { padding: 12px 18px; background: rgba(255, 255, 255, .02); border-bottom: 1px solid var(--ps-line); font-size: 12px; font-weight: 500; color: var(--ps-muted); text-align: left; white-space: nowrap; }
.ps-table-app td, .ps-orders td { padding: 16px 18px; border-bottom: 1px solid var(--ps-line); color: var(--ps-text-2); vertical-align: top; }
.ps-table-app tr:last-child td, .ps-orders tr:last-child td { border-bottom: 0; }
.ps-table-app th.ps-num, .ps-orders th.ps-num { text-align: right; }
/* empty states */
.ps-empty { padding: 48px 28px; text-align: center; }
.ps-empty p { margin: 0 0 6px; color: var(--ps-muted); }
.ps-empty .ps-empty-title { font-size: 16px; font-weight: 600; color: var(--ps-text); }
.ps-empty .ps-btn { margin-top: 14px; }
.ps-empty-line { margin: 0; padding: 28px 22px; color: var(--ps-muted); font-size: 14px; }
@media (max-width: 1024px) { .ps-app-wrap { padding: 24px 20px 40px; } }
@media (max-width: 600px) {
.ps-app-wrap { padding: 20px 16px 32px; }
.ps-app-h1 { font-size: 24px; margin-bottom: 18px; }
.ps-panel { padding: 20px 18px; border-radius: 14px; }
.ps-panel--flush { padding: 0; }
.ps-search, .ps-search--sm { width: 100%; }
}
/* ==========================================================================
21. New order: account tiles, level card, platform chips, stepped form
========================================================================== */
.ps-topline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 14px; margin: 0 0 18px; }
.ps-app .ps-topline > .ps-lvstrip { margin: 0; }
.ps-balcard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--ps-surface); border: 1px solid var(--ps-line); }
.ps-balcard-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(1, 214, 118, .12); color: var(--ps-green); }
.ps-balcard-ico svg { width: 24px; height: 24px; }
.ps-balcard-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ps-balcard-label { font-size: 12px; font-weight: 500; color: var(--ps-muted); }
.ps-balcard-txt b { font-size: 16px; font-weight: 700; color: var(--ps-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-app .ps-balcard-cta { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; height: 34px; padding: 0 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid var(--ps-line-2); color: var(--ps-text-2); font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.ps-app .ps-balcard-cta:hover { color: var(--ps-text); border-color: rgba(255, 255, 255, .25); text-decoration: none; }
.ps-balcard-cta svg { width: 14px; height: 14px; fill: currentColor; }
.ps-balcard.is-low { background: linear-gradient(90deg, rgba(255, 196, 70, .1), transparent 70%), var(--ps-surface); border-color: rgba(255, 196, 70, .3); }
.ps-balcard.is-low .ps-balcard-ico { background: rgba(255, 196, 70, .14); color: #ffc446; }
.ps-app .ps-balcard.is-low .ps-balcard-cta { background: rgba(255, 196, 70, .12); border-color: rgba(255, 196, 70, .35); color: #ffd27a; }
.ps-balcard.is-empty { background: linear-gradient(90deg, rgba(255, 107, 107, .1), transparent 70%), var(--ps-surface); border-color: rgba(255, 107, 107, .3); }
.ps-balcard.is-empty .ps-balcard-ico { background: rgba(255, 107, 107, .14); color: #ff8a8a; }
.ps-app .ps-balcard.is-empty .ps-balcard-cta { background: rgba(255, 107, 107, .12); border-color: rgba(255, 107, 107, .35); color: #ffa3a3; }
@media (max-width: 1100px) { .ps-topline { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
@media (max-width: 480px) { .ps-balcard { flex-wrap: wrap; } .ps-app .ps-balcard-cta { width: 100%; justify-content: center; margin-left: 0; } }
.ps-app .ps-lvstrip { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 18px; margin: 0 0 18px; padding: 12px 18px 12px 14px; border-radius: 16px; background: linear-gradient(90deg, color-mix(in srgb, var(--lv) 12%, transparent), transparent 55%), var(--ps-surface); border: 1px solid color-mix(in srgb, var(--lv) 30%, var(--ps-line)); color: var(--ps-text); text-decoration: none; transition: border-color .15s; }
.ps-app .ps-lvstrip:hover { border-color: color-mix(in srgb, var(--lv) 60%, transparent); color: var(--ps-text); text-decoration: none; }
.ps-lvstrip-badge { width: 40px; height: 40px; color: var(--lv); filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--lv) 35%, transparent)); }
.ps-lvstrip-badge svg { display: block; width: 100%; height: 100%; }
.ps-lvstrip-name { display: flex; flex-direction: column; line-height: 1.25; }
.ps-lvstrip-name b { font-size: 16px; font-weight: 700; color: var(--lv); }
.ps-lvstrip-name em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--ps-muted); }
.ps-lvstrip-prog { display: grid; gap: 7px; min-width: 0; }
.ps-lvstrip-bar { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ps-lvstrip-bar i { display: block; height: 100%; border-radius: inherit; background: var(--lv); }
.ps-lvstrip-next { font-size: 13px; color: var(--ps-text-2); }
.ps-lvstrip-next b { color: var(--ps-text); }
.ps-lvstrip-more { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--ps-muted); }
.ps-lvstrip-more svg { width: 14px; height: 14px; transform: rotate(-90deg); }
.ps-lvstrip:hover .ps-lvstrip-more { color: var(--ps-text); }
@media (max-width: 760px) {
.ps-app .ps-lvstrip { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px 14px; }
.ps-lvstrip-prog { grid-column: 1 / -1; }
.ps-lvstrip-more { grid-column: 3; grid-row: 1; }
}
.ps-plats-wrap { position: relative; margin: 0 0 18px; }
.ps-plats { display: flex; gap: 8px; padding: 2px 2px 4px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.ps-plats-wrap.can-next .ps-plats { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 90px), transparent calc(100% - 20px)); mask-image: linear-gradient(90deg, #000 calc(100% - 90px), transparent calc(100% - 20px)); }
.ps-plats-wrap.can-prev .ps-plats { -webkit-mask-image: linear-gradient(90deg, transparent 20px, #000 90px); mask-image: linear-gradient(90deg, transparent 20px, #000 90px); }
.ps-plats-wrap.can-prev.can-next .ps-plats { -webkit-mask-image: linear-gradient(90deg, transparent 20px, #000 90px, #000 calc(100% - 90px), transparent calc(100% - 20px)); mask-image: linear-gradient(90deg, transparent 20px, #000 90px, #000 calc(100% - 90px), transparent calc(100% - 20px)); }
.ps-plats-arrow { position: absolute; top: 50%; z-index: 2; display: none; place-items: center; width: 32px; height: 32px; margin-top: -18px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12); background: rgba(42, 44, 69, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--ps-text); box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .8); cursor: pointer; transition: background .15s; }
.ps-plats-arrow:hover { background: rgba(52, 55, 90, .85); }
.ps-plats-arrow svg { width: 15px; height: 15px; }
.ps-plats-arrow--next { right: 0; }
.ps-plats-arrow--next svg { transform: rotate(-90deg); }
.ps-plats-arrow--prev { left: 0; }
.ps-plats-arrow--prev svg { transform: rotate(90deg); }
.ps-plats-wrap.can-next .ps-plats-arrow--next, .ps-plats-wrap.can-prev .ps-plats-arrow--prev { display: grid; }
.ps-plats::-webkit-scrollbar { display: none; }
.ps-plat { display: inline-flex; align-items: center; gap: 9px; flex: none; height: 42px; padding: 0 14px 0 5px; border-radius: 12px; border: 1px solid var(--ps-line-2); background: #1a1c2e; color: var(--ps-text-2); font: 600 14px var(--ps-font); cursor: pointer; transition: border-color .15s, background-color .15s, transform .15s; }
.ps-plat:hover { border-color: rgba(255, 255, 255, .22); color: var(--ps-text); transform: translateY(-2px); }
.ps-plat-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--pc, #2a2c45); color: #fff; font-weight: 700; font-size: 15px; }
.ps-plat-ico svg { width: 18px; height: 18px; fill: currentColor; }
.pi-all { --pc: #2c2f4d; } .pi-more { --pc: #2c2f4d; }
.pi-ig { --pc: radial-gradient(circle at 30% 110%, #ffd776 0 18%, #f4583c 40%, #d12a8a 65%, #7a39d8); }
.pi-tt { --pc: #111; box-shadow: inset -2px 0 0 #25f4ee, inset 2px 0 0 #fe2c55; }
.pi-yt { --pc: #ff2d2d; } .pi-fb { --pc: #1877f2; } .pi-x { --pc: #000; box-shadow: inset 0 0 0 1px #3a3c55; } .pi-tg { --pc: #27a6e6; }
.pi-kw { --pc: #ff7a00; } .pi-tw { --pc: #9146ff; } .pi-dc { --pc: #5865f2; } .pi-sp { --pc: #1ed760; color: #062312 !important; }
.ps-plat.is-on { background: #fff; border-color: #fff; color: #141523; box-shadow: 0 10px 24px -12px rgba(255, 255, 255, .45); }
.ps-order { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 22px; align-items: start; }
.ps-order-side { position: sticky; top: calc(var(--ps-top-h) + 22px); display: grid; gap: 16px; }
.ps-desc-h { margin: 0 0 14px; font: 600 15px/1.3 var(--ps-font); color: var(--ps-text); }
.ps-desc-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: default; }
.ps-desc-ico { width: 18px; height: 18px; color: var(--ps-muted); fill: currentColor; fill-rule: evenodd; }
.ps-desc-chev { display: none; width: 16px; height: 16px; margin-left: auto; color: var(--ps-muted); transition: transform .2s; }
.ps-desc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.ps-desc-facts[hidden] { display: none; }
.ps-desc-facts > div { min-width: 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .035); border: 1px solid var(--ps-line); }
.ps-desc-facts > div[hidden] { display: none; }
.ps-desc-facts > [data-fact="time"] { grid-column: 1 / -1; }
.ps-desc-facts dt { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--ps-muted); }
.ps-desc-facts dt svg { width: 13px; height: 13px; }
.ps-desc-facts dd { margin: 3px 0 0; font-size: 14px; font-weight: 600; color: var(--ps-text); overflow-wrap: anywhere; }
.ps-app #order_average_time { display: none !important; }
.ps-desc .form-group { margin: 0; }
.ps-desc-empty { margin: 0; padding: 18px; border: 1px dashed var(--ps-line-2); border-radius: 14px; font-size: 14px; color: var(--ps-muted); }
.ps-desc:has(#service_description:not(.hidden)) .ps-desc-empty { display: none; }
.ps-step-h { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 600 15px/1.3 var(--ps-font); color: var(--ps-text); }
.ps-step-h span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(139, 152, 255, .14); color: #aab4ff; font-size: 13px; font-weight: 700; }
.ps-order-main .ps-step-h:not(:first-child) { margin-top: 30px; padding-top: 26px; border-top: 1px dashed var(--ps-line-2); }
.ps-order-main .alert + .ps-step-h, .ps-order-main .ps-receipt + .ps-step-h { margin-top: 0; padding-top: 0; border-top: 0; }
.ps-order-search .input-wrapper > button, .ps-order-search .input-wrapper__prepend { position: absolute; left: 14px; top: 50%; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; margin-top: -11px; padding: 0; border: 0; background: none; color: var(--ps-muted); }
.ps-order-search .input-wrapper > button svg { width: 18px; height: 18px; fill: currentColor; }
.ps-app .ps-panel .ps-order-search .form-control { padding-left: 42px; }
.ps-app .ps-order-main .form-group > .control-label, .ps-app .ps-sum-total > .control-label { display: flex; align-items: center; gap: 7px; }
.ps-lbl-ico { flex: none; width: 16px; height: 16px; color: var(--ps-muted); opacity: .75; fill: currentColor; fill-rule: evenodd; }
.ps-app #fields .help-block { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 500; color: rgba(255, 138, 138, .72); }
.ps-order-main .help-block .ps-lbl-ico { width: 14px; height: 14px; color: inherit; opacity: 1; }
.ps-order-foot { margin-top: 4px; }
.ps-app .ps-panel .ps-order-foot .ps-sum-total { display: flex; align-items: center; gap: 12px; height: 54px; margin: 0 0 14px; padding: 0 16px; border-radius: 12px; background: var(--ps-field); border: 1.5px solid var(--ps-field-line); }
.ps-app .ps-panel .ps-sum-total > .control-label { flex: none; margin: 0; padding-right: 14px; border-right: 1px solid var(--ps-line-2); }
.ps-sum-off { flex: none; display: inline-flex; align-items: center; gap: 6px; padding-left: 14px; border-left: 1px solid var(--ps-line-2); color: var(--ps-muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.ps-sum-off svg { width: 15px; height: 15px; color: #aab4ff; }
.ps-app .ps-order-send { width: 100%; height: 54px; font-size: 16px; }
.ps-order-send svg { width: 20px; height: 20px; fill: currentColor; }
.ps-sum-desc .panel-body { max-height: min(60vh, 520px); overflow-y: auto; padding: 14px 16px; border-radius: 14px; background: rgba(0, 0, 0, .18); border: 1px solid var(--ps-line); font-size: 14px; line-height: 1.6; color: var(--ps-text-2); white-space: pre-line; overflow-wrap: anywhere; }
.ps-app .ps-panel .ps-sum-total .form-control { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; text-align: left; font-size: 18px; font-weight: 700; color: var(--ps-text); pointer-events: none; }
.ps-app .ps-panel .ps-sum-total .form-control::placeholder { color: rgba(255, 255, 255, .25); }
.ps-sum-foot { margin: 4px 0 0; font-size: 13px; color: var(--ps-muted); }
.ps-sum-foot b { color: var(--ps-text-2); font-weight: 600; }
.ps-tips { padding: 18px 20px; border-radius: 20px; background: var(--ps-surface); border: 1px solid var(--ps-line); }
.ps-tips-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--ps-text); }
.ps-tips-h svg { width: 18px; height: 18px; fill: none; color: #ffc46e; }
.ps-tips ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ps-text-2); }
.ps-tips li + li { margin-top: 4px; }
.ps-tips b { color: var(--ps-text); }
.ps-receipt { position: relative; margin: 0 0 24px; padding: 20px 22px; border: 1px solid rgba(1, 214, 118, .35); border-radius: 18px; background: rgba(1, 214, 118, .08); color: var(--ps-text-2); }
.ps-receipt-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 16px; font-weight: 700; color: var(--ps-text); }
.ps-receipt-ok { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ps-green); color: var(--ps-green-ink); }
.ps-receipt-ok svg { width: 16px; height: 16px; fill: currentColor; }
.ps-receipt dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; margin: 0 0 14px; }
.ps-receipt dt { font-size: 12px; font-weight: 500; color: var(--ps-muted); }
.ps-receipt dd { margin: 0; font-size: 14px; color: var(--ps-text); }
.ps-receipt .ps-receipt-wide { grid-column: 1 / -1; }
.ps-app .ps-receipt > a { font-size: 14px; font-weight: 600; color: var(--ps-green); }
@media (max-width: 1280px) { .ps-order { grid-template-columns: minmax(0, 1fr) 360px; } }
@media (max-width: 1100px) { .ps-order { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 900px) {
.ps-order { grid-template-columns: minmax(0, 1fr); }
.ps-order-side { position: static; }
.ps-sum-desc .panel-body { max-height: 260px; }
}
@media (max-width: 520px) {
.ps-receipt dl { grid-template-columns: 1fr 1fr; }
.ps-plat { height: 40px; }
}
/* ==========================================================================
22. Orders
========================================================================== */
.ps-orders .ps-o-id { width: 120px; }
.ps-o-id b { display: block; color: var(--ps-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ps-o-id small, .ps-o-qty small { display: block; font-size: 12px; color: var(--ps-muted); white-space: nowrap; }
.ps-o-svc { min-width: 0; }
.ps-o-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ps-text); font-weight: 500; line-height: 1.45; }
.ps-o-link { display: block; max-width: 420px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ps-muted); }
.ps-app .ps-o-detail { margin-left: 6px; font-size: 12px; color: var(--ps-text-2); text-decoration: underline; }
.ps-o-qty b { display: block; color: var(--ps-text); font-weight: 600; }
.ps-o-charge { color: var(--ps-text) !important; font-weight: 600; white-space: nowrap; }
.ps-o-status { white-space: nowrap; }
.ps-o-status > .ps-pill { display: flex; width: max-content; }
.ps-o-reason { display: block; max-width: 200px; margin-top: 6px; font-size: 12px; color: var(--ps-muted); white-space: normal; }
.ps-o-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ps-o-act:empty { display: none; }
.ps-o-state { font-size: 13px; color: var(--ps-muted); }
@media (max-width: 760px) {
.ps-orders thead { display: none; }
.ps-orders, .ps-orders tbody, .ps-orders tr, .ps-orders td { display: block; width: auto !important; }
.ps-orders tr { display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; padding: 16px 18px; border-bottom: 1px solid var(--ps-line); }
.ps-orders tr:last-child { border-bottom: 0; }
.ps-orders td { padding: 0; border: 0; }
.ps-orders .ps-o-id { display: flex; align-items: baseline; gap: 10px; }
.ps-orders .ps-o-id small { order: 2; }
.ps-orders .ps-o-status { display: contents; }
.ps-orders .ps-o-status .ps-pill { grid-column: 2; grid-row: 1; justify-self: end; }
.ps-orders .ps-o-reason, .ps-orders .ps-o-status .ps-o-act { grid-column: 1 / -1; order: 10; margin-top: 0; }
.ps-orders .ps-o-svc { grid-column: 1 / -1; }
.ps-o-link { max-width: none; }
.ps-orders .ps-o-qty { text-align: left; display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; }
.ps-orders .ps-o-qty b::after { content: " un."; font-weight: 400; color: var(--ps-muted); }
.ps-orders .ps-o-charge { grid-column: 2; text-align: right; align-self: start; }
}
/* ==========================================================================
23. Add funds
========================================================================== */
.ps-funds { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.ps-app .ps-panel .ps-amount { height: 60px; font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ps-quick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 12px; }
.ps-quick button { position: relative; height: 42px; border-radius: 10px; border: 1px solid var(--ps-line-2); background: transparent; color: var(--ps-text-2); font: 600 14px var(--ps-font); cursor: pointer; transition: border-color .15s, color .15s; }
.ps-quick button:hover { border-color: rgba(255, 255, 255, .26); color: var(--ps-text); }
.ps-quick button.is-on { border-color: var(--ps-green); color: var(--ps-text); background: rgba(1, 214, 118, .08); }
.ps-quick i { position: absolute; right: -4px; top: -8px; padding: 1px 6px; border-radius: 6px; background: var(--ps-green); color: var(--ps-green-ink); font: 700 10px/16px var(--ps-font); font-style: normal; }
.ps-bonus { margin: 12px 0 0; font-size: 14px; color: #6ff0b0; }
.ps-funds-info { padding: 24px; border: 1px solid var(--ps-line); border-radius: 20px; background: var(--ps-surface); }
.ps-funds-balance { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--ps-line); }
.ps-funds-balance span { font-size: 14px; color: var(--ps-muted); }
.ps-funds-balance b { font-size: 24px; font-weight: 700; }
.ps-facts { margin: 0; padding: 0; list-style: none; }
.ps-facts li { padding: 12px 0; }
.ps-facts li + li { border-top: 1px dashed var(--ps-line-2); }
.ps-facts b { display: block; font-size: 14px; font-weight: 600; color: var(--ps-text); }
.ps-facts span { display: block; margin-top: 2px; font-size: 13px; color: var(--ps-muted); }
.ps-facts-hi b { color: var(--ps-green); }
.ps-funds-help { margin: 16px 0 0; font-size: 13px; color: var(--ps-muted); }
@media (max-width: 960px) { .ps-funds { grid-template-columns: minmax(0, 1fr); } .ps-funds-info { padding: 20px; } }
@media (max-width: 560px) { .ps-quick { grid-template-columns: repeat(3, 1fr); } }
/* ==========================================================================
24. Support (tickets list + conversation)
========================================================================== */
.ps-support { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; align-items: start; }
.ps-tkind { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 22px; }
.ps-tkind-opt > span { display: block; }
.ps-app .ps-panel .ps-tkind-opt { position: relative; display: block; margin: 0; padding: 14px 14px 14px 42px; border-radius: 12px; border: 1.5px solid var(--ps-field-line); cursor: pointer; font-weight: 400; transition: border-color .15s, background-color .15s; }
.ps-tkind-opt input { position: absolute; left: 14px; top: 17px; width: 17px; height: 17px; margin: 0; }
.ps-tkind-opt b { display: block; font-size: 15px; font-weight: 600; color: var(--ps-text); }
.ps-tkind-opt small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--ps-muted); }
.ps-app .ps-panel .ps-tkind-opt:has(input:checked) { border-color: var(--ps-green); background: rgba(1, 214, 118, .06); }
.ps-tickets { margin: 0; padding: 0; list-style: none; }
.ps-tickets li + li { border-top: 1px solid var(--ps-line); }
.ps-app .ps-tickets a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 16px 22px; color: inherit; text-decoration: none; }
.ps-tickets a:hover { background: rgba(255, 255, 255, .025); }
.ps-t-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--ps-text); }
.ps-tickets .is-new .ps-t-subject { font-weight: 700; }
.ps-t-meta { grid-column: 1; display: flex; gap: 12px; font-size: 12px; color: var(--ps-muted); }
.ps-tickets .ps-pill { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.ps-dot { position: absolute; left: 9px; top: 22px; width: 7px; height: 7px; border-radius: 50%; background: var(--ps-green); }
.ps-app .ps-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 14px; color: var(--ps-muted); text-decoration: none; }
.ps-app .ps-back:hover { color: var(--ps-text); }
.ps-back svg { width: 14px; height: 14px; transform: rotate(90deg); fill: currentColor; }
.ps-thread-title { margin-bottom: 4px; overflow-wrap: anywhere; }
.ps-thread-id { margin: 0 0 24px; font-size: 13px; color: var(--ps-muted); }
.ps-thread { display: flex; flex-direction: column; gap: 14px; margin: 0 0 24px; padding: 0; list-style: none; }
.ps-msg { max-width: 86%; padding: 14px 16px; border-radius: 14px; }
.ps-msg--me { align-self: flex-end; background: var(--ps-surface-2); border-bottom-right-radius: 4px; }
.ps-msg--staff { align-self: flex-start; background: var(--ps-surface); border: 1px solid var(--ps-line); border-bottom-left-radius: 4px; }
.ps-msg-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; font-size: 13px; }
.ps-msg-head b { color: var(--ps-text); font-weight: 600; }
.ps-msg--staff .ps-msg-head b { color: var(--ps-green); }
.ps-msg-head time { color: var(--ps-muted); font-size: 12px; }
.ps-msg-body { font-size: 15px; line-height: 1.6; color: var(--ps-text-2); white-space: pre-line; overflow-wrap: anywhere; }
.ps-msg-files { margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; }
.ps-app .ps-msg-files a { display: inline-flex; align-items: center; gap: 6px; color: var(--ps-text-2); }
.ps-msg-files svg { width: 15px; height: 15px; fill: currentColor; }
.ps-reply .form-group { margin-bottom: 14px; }
.ps-reply-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ps-thread-closed { padding: 18px 20px; border-radius: 12px; background: var(--ps-surface); font-size: 14px; color: var(--ps-muted); }
@media (max-width: 960px) { .ps-support { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .ps-table-app th, .ps-table-app td { padding: 12px 12px; } .ps-table-app:not(.ps-stack) td:first-child, .ps-table-app:not(.ps-stack) th:first-child { display: none; } }
@media (max-width: 520px) { .ps-tkind { grid-template-columns: 1fr; } .ps-msg { max-width: 100%; } }
/* ==========================================================================
24b. Levels page (userranks)
========================================================================== */
.ps-rank-hero { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) 320px; align-items: center; gap: 24px; margin-bottom: 26px; padding: 28px; border-radius: 24px; overflow: hidden;
background: radial-gradient(90% 160% at 0% 0%, color-mix(in srgb, var(--lv) 24%, transparent), transparent 55%), #1b1d31; border: 1px solid color-mix(in srgb, var(--lv) 35%, transparent); }
.ps-rank-badge { width: 92px; height: 92px; color: var(--lv); filter: drop-shadow(0 12px 22px color-mix(in srgb, var(--lv) 45%, transparent)); }
.ps-rank-badge svg { display: block; width: 100%; height: 100%; }
.ps-rank-copy h1 { margin: 0 0 6px; font: 700 30px/1.15 var(--ps-font); color: var(--ps-text); }
.ps-rank-copy p { margin: 0; max-width: 40em; color: var(--ps-text-2); }
.ps-rank-now { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 18px; background: rgba(0, 0, 0, .22); }
.ps-rank-now-label { font-size: 12px; color: var(--ps-muted); }
.ps-rank-now b { font-size: 26px; font-weight: 700; color: var(--lv); }
.ps-rank-now-off { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--lv) 18%, transparent); color: var(--lv); font-size: 12px; font-weight: 700; }
.ps-rank-bar { height: 8px; margin-top: 10px; border-radius: 8px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.ps-rank-bar i { display: block; height: 100%; min-width: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--lv-2), var(--lv)); }
.ps-rank-now-next { font-size: 13px; color: var(--ps-text-2); }
.ps-rank-now-next b { color: var(--ps-text); }
.ps-ranks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ps-rank { position: relative; display: flex; flex-direction: column; padding: 20px; border-radius: 20px; background: var(--ps-surface); border: 1px solid var(--ps-line); transition: transform .15s, border-color .15s; }
.ps-rank:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--lv) 45%, transparent); }
.ps-rank-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.ps-rank-mini { width: 44px; height: 44px; color: var(--lv); }
.ps-rank-mini svg { display: block; width: 100%; height: 100%; }
.ps-rank-tag { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: var(--lv); color: #0f101b; font-size: 12px; font-weight: 700; }
.ps-rank-tag--done { background: rgba(255, 255, 255, .07); color: var(--ps-text-2); }
.ps-rank-tag svg { width: 12px; height: 12px; fill: currentColor; }
.ps-rank h2 { margin: 0; font: 700 20px/1.2 var(--ps-font); color: var(--lv); }
.ps-rank-at { margin: 2px 0 14px; font-size: 13px; color: var(--ps-muted); }
.ps-rank-off { margin: 0 0 12px; font-size: 14px; color: var(--ps-text-2); }
.ps-rank-off b { font-size: 32px; font-weight: 700; color: var(--ps-text); }
.ps-rank ul { margin: auto 0 0; padding: 12px 0 0; border-top: 1px dashed var(--ps-line-2); list-style: none; font-size: 13px; color: var(--ps-text-2); }
.ps-rank li { position: relative; padding-left: 18px; }
.ps-rank li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 2px; background: var(--lv); transform: rotate(45deg); }
.ps-rank.is-now { border-color: var(--lv); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lv) 20%, transparent), 0 20px 40px -24px var(--lv); background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--lv) 14%, transparent), transparent 60%), var(--ps-surface); }
.ps-rank.is-next .ps-rank-mini { opacity: .55; }
.ps-rank.is-done { opacity: .78; }
.ps-rank-note { margin: 22px 0 0; font-size: 14px; color: var(--ps-muted); text-align: center; }
@media (max-width: 1100px) { .ps-rank-hero { grid-template-columns: auto minmax(0, 1fr); } .ps-rank-now { grid-column: 1 / -1; } .ps-ranks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ps-rank-hero { grid-template-columns: 1fr; padding: 22px; text-align: left; } .ps-rank-badge { width: 72px; height: 72px; } .ps-rank-copy h1 { font-size: 24px; } .ps-ranks { gap: 10px; } .ps-rank { padding: 16px; } .ps-rank-off b { font-size: 26px; } }
/* ==========================================================================
25. Interim dark layer for stock inner templates not redesigned yet
========================================================================== */
.ps-app main > .container, .ps-app main > .container-fluid { padding: 32px 40px 64px; max-width: 1200px; margin: 0; }
.ps-app .well { background: var(--ps-surface); border: 1px solid var(--ps-line); border-radius: 16px; box-shadow: none; color: var(--ps-text-2); }
.ps-app .well .form-control, .ps-app .container .form-control { height: 44px; background: var(--ps-field); border: 1.5px solid var(--ps-field-line); border-radius: 10px; color: var(--ps-text); box-shadow: none; }
.ps-app .container textarea.form-control { height: auto; }
.ps-app .container .form-control:focus { border-color: var(--ps-green); box-shadow: 0 0 0 3px rgba(1, 214, 118, .16); }
.ps-app .container .form-control[readonly], .ps-app .container .form-control[disabled] { background: #20223a; color: var(--ps-muted); }
.ps-app .btn { border-radius: 10px; font-weight: 600; }
.ps-app .btn-primary { background: var(--ps-green); border-color: var(--ps-green); color: var(--ps-green-ink); }
.ps-app .btn-primary:hover, .ps-app .btn-primary:focus { background: var(--ps-green-hover); border-color: var(--ps-green-hover); color: var(--ps-green-ink); }
.ps-app .btn-default { background: var(--ps-surface-2); border-color: var(--ps-line-2); color: var(--ps-text); }
.ps-app .table > thead > tr > th, .ps-app .table > tbody > tr > td { border-color: var(--ps-line); color: var(--ps-text-2); }
.ps-app .table > thead > tr > th { color: var(--ps-muted); font-weight: 600; }
.ps-app .nav-pills > li > a { border-radius: 10px; color: var(--ps-text-2); }
.ps-app .nav-pills > li.active > a, .ps-app .nav-pills > li.active > a:hover { background: var(--ps-green); color: var(--ps-green-ink); }
.ps-app .nav-pills > li > a:hover { background: var(--ps-surface-2); }
.ps-app .pagination > li > a { background: var(--ps-surface); border-color: var(--ps-line); color: var(--ps-text-2); }
.ps-app .pagination > .active > a { background: var(--ps-green); border-color: var(--ps-green); color: var(--ps-green-ink); }
.ps-app .container .alert-success { background: rgba(1, 214, 118, .12); border-color: transparent; color: var(--ps-green); }
.ps-app .container .alert-danger { background: rgba(255, 92, 92, .12); border-color: transparent; color: #ff9b9b; }
.ps-app .alert-info, .ps-app .alert-warning { background: rgba(255, 181, 71, .12); border-color: transparent; color: #ffc46e; }
.ps-app .container a:not(.btn) { color: var(--ps-green); }
.ps-app .input-group-addon { background: var(--ps-surface-2); border-color: var(--ps-field-line); color: var(--ps-text-2); }
.ps-app hr { border-color: var(--ps-line); }
.ps-app .modal-content { background: #23253d; border: 1px solid var(--ps-line-2); border-radius: 16px; color: var(--ps-text-2); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.ps-app .modal-header, .ps-app .modal-footer { border-color: var(--ps-line); }
.ps-app .modal-title { color: var(--ps-text); font-weight: 600; }
.ps-app .modal .close { color: var(--ps-text); text-shadow: none; opacity: .6; }
.ps-app .modal .form-control { height: auto; min-height: 44px; background: var(--ps-field); border: 1.5px solid var(--ps-field-line); border-radius: 10px; color: var(--ps-text); }
.ps-app .tooltip-inner { background: #2c2e4a; color: var(--ps-text); font-family: var(--ps-font); }
@media (max-width: 1024px) { .ps-app main > .container, .ps-app main > .container-fluid { padding: 24px 16px 40px; } }
@media (prefers-reduced-motion: reduce) { .ps-page * { transition: none !important; animation: none !important; } }
/* FAQ title is a (not a heading in the brsmm structure) - give it full H2 styling */
.ps-head > .ps-h2 { margin: 0; max-width: none; font: 700 clamp(30px, 3.8vw, 44px)/1.15 var(--ps-font); color: var(--ps-text); }
.ps-app .ps-panel label.ps-check { display: flex; font-weight: 500; }
.ps-side a, .ps-side a:focus, .ps-side a:hover { text-decoration: none; }
/* 21b. new order: drip-feed toggle, mobile description */
.ps-app #order-form .select2-selection__rendered { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 45px; }
.ps-app #order-form .select2-selection__rendered .select2-selection__icon, .ps-app #order-form .select2-selection__rendered img { display: inline-block; vertical-align: -4px; margin-right: 6px; }
.ps-app #fields .form-group__checkbox { display: flex; align-items: center; gap: 12px; }
.ps-app #fields .form-group__checkbox-label { position: relative; display: block; flex: none; width: 40px; height: 24px; margin: 0; cursor: pointer; }
.ps-app #fields .form-group__checkbox-label input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ps-app #fields .form-group__checkbox-label .checkmark { position: absolute; inset: 0; border-radius: 999px; background: var(--ps-field); border: 1.5px solid var(--ps-field-line); transition: background .15s, border-color .15s; }
.ps-app #fields .form-group__checkbox-label .checkmark::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--ps-muted); transition: transform .15s, background .15s; }
.ps-app #fields .form-group__checkbox-label input:checked + .checkmark { background: rgba(139, 152, 255, .25); border-color: #8b98ff; }
.ps-app #fields .form-group__checkbox-label input:checked + .checkmark::after { transform: translateX(16px); background: #fff; }
.ps-app #fields .form-group__checkbox-label input:focus-visible + .checkmark { box-shadow: 0 0 0 3px rgba(139, 152, 255, .35); }
.ps-app #fields .form-group__label-title { margin: 0; font-size: 14px; font-weight: 500; color: var(--ps-text-2); cursor: pointer; }
.ps-app .ps-order-main .ps-desc.ps-panel { margin: -6px 0 18px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ps-order-main .ps-desc-h { margin: 0; font-size: 13px; font-weight: 500; }
.ps-order-main .ps-desc-toggle { gap: 8px; padding: 10px 14px; border-radius: 12px; background: rgba(139, 152, 255, .08); border: 1px solid rgba(139, 152, 255, .28); color: #c9cfff; cursor: pointer; transition: background .15s, border-color .15s; }
.ps-order-main .ps-desc-toggle:hover, .ps-order-main .ps-desc.is-open .ps-desc-toggle { background: rgba(139, 152, 255, .14); border-color: rgba(139, 152, 255, .45); }
.ps-order-main .ps-desc-ico { width: 16px; height: 16px; color: #aab4ff; }
.ps-order-main .ps-desc-chev { display: block; color: #aab4ff; }
.ps-order-main .ps-desc-facts { display: block; margin: 8px 2px 0; }
.ps-order-main .ps-desc-facts[hidden], .ps-order-main .ps-desc-facts [data-fact="min"], .ps-order-main .ps-desc-facts [data-fact="max"], .ps-order-main .ps-desc-facts:not(:has([data-fact="time"]:not([hidden]))) { display: none; }
.ps-order-main .ps-desc-facts > div { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; }
.ps-order-main .ps-desc-facts dt { font-size: 12px; }
.ps-order-main .ps-desc-facts dt::after { content: ":"; }
.ps-order-main .ps-desc-facts dd { margin: 0; font-size: 12px; font-weight: 500; color: var(--ps-text-2); }
.ps-order-main .ps-desc-body { margin-top: 8px; }
.ps-order-main .ps-desc:not(.is-open) .ps-desc-body { display: none; }
.ps-order-main .ps-desc.is-open .ps-desc-chev { transform: rotate(180deg); }
@media (max-width: 480px) { .ps-app .ps-top-ico:not(:first-of-type) { display: none; } }
/* ==========================================================================
26. Order family lists (subscriptions, drip-feed, refills, refunds) + mass order
========================================================================== */
.ps-app .ps-note--info { padding-right: 16px; background: rgba(139, 152, 255, .1); color: #c9cfff; }
.ps-sub { display: block; margin-top: 3px; font-size: 12px; color: var(--ps-muted); white-space: nowrap; }
.ps-sub a, .ps-table-app td a.ps-strong { color: var(--ps-text); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: 3px; }
.ps-nowrap { white-space: nowrap; }
.ps-table-app .ps-o-id { width: 130px; }
.ps-table-app .ps-o-svc { max-width: 420px; }
.ps-table-app .ps-o-status { width: 1%; }
.ps-refund-amt { color: #6ff0b0 !important; }
@media (max-width: 760px) {
.ps-stack thead { display: none; }
.ps-stack, .ps-stack tbody, .ps-stack tr, .ps-stack td { display: block; width: auto !important; max-width: none !important; }
.ps-stack tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; padding: 16px 18px; border-bottom: 1px solid var(--ps-line); }
.ps-stack tr:last-child { border-bottom: 0; }
.ps-app .ps-stack td { padding: 0; border: 0; text-align: left; }
.ps-stack .ps-o-id { display: flex; align-items: baseline; gap: 10px; }
.ps-stack .ps-o-status { display: contents; }
.ps-stack .ps-o-status .ps-pill { grid-column: 2; grid-row: 1; justify-self: end; }
.ps-stack .ps-o-status .ps-o-act, .ps-stack .ps-o-reason { grid-column: 1 / -1; margin-top: 0; }
.ps-stack .ps-o-svc { grid-column: 1 / -1; }
.ps-stack td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 12px; font-weight: 500; color: var(--ps-muted); }
}
.ps-mass { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 22px; align-items: start; }
.ps-app .ps-panel textarea.ps-mono { height: auto; min-height: 320px; padding: 14px; line-height: 1.7; font: 400 14px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
.ps-app .ps-panel .form-group > .control-label:has(.ps-lbl-ico) { display: flex; align-items: center; gap: 7px; }
.ps-mass .ps-btn svg { width: 20px; height: 20px; fill: currentColor; }
.ps-mass-help p { margin: 12px 0 6px; font-size: 13px; color: var(--ps-text-2); }
.ps-mass-help a { color: var(--ps-text); text-decoration: underline; text-underline-offset: 3px; }
.ps-app .ps-mass-fmt { display: block; padding: 12px 14px; border: 0; border-radius: 12px; background: rgba(139, 152, 255, .1); color: #c9cfff; font: 600 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ps-mass-ex { margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--ps-line); background: rgba(0, 0, 0, .18); color: var(--ps-text-2); font: 12px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.ps-mass-help .ps-desc-toggle { cursor: default; }
@media (max-width: 1100px) { .ps-mass { grid-template-columns: minmax(0, 1fr) 320px; } }
@media (max-width: 900px) { .ps-mass { grid-template-columns: minmax(0, 1fr); } .ps-mass .ps-order-side { position: static; } }
/* ==========================================================================
27. Account, notifications, affiliates, updates
========================================================================== */
.ps-profile { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; padding: 18px 20px; border-radius: 20px; background: linear-gradient(90deg, color-mix(in srgb, var(--lv) 14%, transparent), transparent 60%), var(--ps-surface); border: 1px solid color-mix(in srgb, var(--lv) 28%, var(--ps-line)); }
.ps-profile-av { position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #2a2c45; border: 2px solid var(--lv); font-size: 22px; font-weight: 700; color: var(--ps-text); }
.ps-profile-badge { position: absolute; right: -8px; bottom: -8px; width: 24px; height: 24px; color: var(--lv); }
.ps-profile-badge svg { display: block; width: 100%; height: 100%; }
.ps-profile-id { display: flex; flex-direction: column; min-width: 0; }
.ps-profile-id b { font-size: 20px; font-weight: 700; color: var(--ps-text); }
.ps-profile-id span { font-size: 14px; color: var(--ps-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-app .ps-profile-lv { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; height: 36px; padding: 0 14px; border-radius: 10px; background: color-mix(in srgb, var(--lv) 14%, transparent); color: var(--lv); font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.ps-app .ps-profile-lv:hover { background: color-mix(in srgb, var(--lv) 22%, transparent); color: var(--lv); text-decoration: none; }
.ps-profile-lv svg { width: 16px; height: 16px; }
.ps-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; margin-bottom: 18px; }
.ps-set-h { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 600 15px/1.3 var(--ps-font); color: var(--ps-text); }
.ps-set-h > svg { flex: none; width: 18px; height: 18px; color: var(--ps-muted); fill: currentColor; fill-rule: evenodd; }
.ps-set-h .ps-pill { margin-left: auto; }
.ps-set-p { margin: 0 0 16px; font-size: 14px; color: var(--ps-text-2); }
.ps-set-p a { color: var(--ps-text); text-decoration: underline; text-underline-offset: 3px; }
.ps-copy { display: flex; gap: 8px; }
.ps-copy .form-control { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px !important; }
.ps-app .ps-copy-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--ps-line-2); background: #2a2c45; color: var(--ps-text); font: 600 14px var(--ps-font); cursor: pointer; transition: background .15s, border-color .15s; }
.ps-app .ps-copy-btn:hover { border-color: rgba(139, 152, 255, .5); background: rgba(139, 152, 255, .14); }
.ps-app .ps-copy-btn.is-done { border-color: rgba(1, 214, 118, .5); background: rgba(1, 214, 118, .14); color: #6ff0b0; }
.ps-copy-btn svg { width: 17px; height: 17px; }
.ps-aff { margin-bottom: 18px; background: radial-gradient(90% 140% at 100% 0%, rgba(255, 138, 76, .1), transparent 60%), var(--ps-surface); }
.ps-aff-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.ps-aff-top .ps-set-h { margin: 0; }
.ps-aff-terms { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ps-aff-terms span { padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--ps-line); font-size: 13px; color: var(--ps-text-2); }
.ps-aff-terms b { color: var(--ps-text); }
.ps-copy--lg .form-control { height: 52px !important; font-size: 14px !important; }
.ps-copy--lg .ps-copy-btn { height: 52px; padding: 0 20px; background: var(--ps-green); border-color: var(--ps-green); color: var(--ps-green-ink); }
.ps-app .ps-copy--lg .ps-copy-btn:hover { background: #12e283; border-color: #12e283; }
.ps-aff-share { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--ps-muted); }
.ps-aff-share span { margin-right: 4px; }
.ps-app .ps-aff-net { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--pc); color: #fff; transition: transform .15s; }
.ps-app .ps-aff-net:hover { transform: translateY(-2px); color: #fff; }
.ps-aff-net svg { width: 17px; height: 17px; fill: currentColor; }
.ps-aff-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.ps-stat { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 16px; background: var(--ps-surface); border: 1px solid var(--ps-line); }
.ps-stat span { font-size: 12px; font-weight: 500; color: var(--ps-muted); }
.ps-stat b { font-size: 22px; font-weight: 700; color: var(--ps-text); font-variant-numeric: tabular-nums; }
.ps-stat--hi { border-color: rgba(1, 214, 118, .35); background: linear-gradient(160deg, rgba(1, 214, 118, .12), transparent 70%), var(--ps-surface); }
.ps-stat--hi b { color: #6ff0b0; }
.ps-stat .ps-chip-btn { align-self: flex-start; margin-top: 6px; }
.ps-aff-how { margin-bottom: 18px; }
.ps-aff-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ps-aff-steps li { padding: 16px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--ps-line); }
.ps-aff-steps b { display: block; margin: 10px 0 4px; font-size: 15px; color: var(--ps-text); }
.ps-aff-steps p { margin: 0; font-size: 13px; color: var(--ps-text-2); }
.ps-step-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(139, 152, 255, .14); color: #aab4ff; font-size: 13px; font-weight: 700; }
.ps-notif .ps-note { margin: 16px 16px 0; }
.ps-notif-col { width: 1%; text-align: center !important; white-space: nowrap; }
.ps-notif-name { color: var(--ps-text) !important; font-weight: 500; }
.ps-notif-table td { vertical-align: middle; }
.ps-notif-foot { display: flex; justify-content: flex-end; padding: 16px 18px; border-top: 1px solid var(--ps-line); }
.ps-switch { position: relative; display: inline-block; width: 40px; height: 24px; margin: 0; vertical-align: middle; cursor: pointer; }
.ps-switch input[type="checkbox"] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ps-switch .checkmark { position: absolute; inset: 0; border-radius: 999px; background: var(--ps-field); border: 1.5px solid var(--ps-field-line); transition: background .15s, border-color .15s; }
.ps-switch .checkmark::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--ps-muted); transition: transform .15s, background .15s; }
.ps-switch input:checked + .checkmark { background: rgba(1, 214, 118, .22); border-color: var(--ps-green); }
.ps-switch input:checked + .checkmark::after { transform: translateX(16px); background: var(--ps-green); }
.ps-switch input:disabled { cursor: not-allowed; }
.ps-switch input:disabled + .checkmark { opacity: .4; }
.ps-switch input:focus-visible + .checkmark { box-shadow: 0 0 0 3px rgba(139, 152, 255, .35); }
.ps-upd-id { display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 6px; background: rgba(255, 255, 255, .06); font-size: 12px; font-weight: 500; color: var(--ps-muted); font-variant-numeric: tabular-nums; }
.ps-upd-what .ps-pill { white-space: normal; text-align: left; }
.ps-upd-date { width: 1%; color: var(--ps-muted) !important; }
@media (max-width: 1100px) { .ps-aff-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .ps-settings { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
.ps-profile { flex-wrap: wrap; }
.ps-app .ps-profile-lv { margin-left: 0; }
.ps-aff-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ps-aff-steps { grid-template-columns: minmax(0, 1fr); }
.ps-copy--lg { flex-direction: column; }
.ps-notif-table th, .ps-notif-table td { padding-left: 12px !important; padding-right: 12px !important; }
}
@media (max-width: 760px) {
.ps-stack .ps-upd-date { grid-column: 1; grid-row: 1; align-self: center; font-size: 12px; }
.ps-stack .ps-upd-date::before { display: none !important; }
}
/* ==========================================================================
28. Child panel, e-mail confirmation, content pages inside the app
========================================================================== */
.ps-ptitle .ps-ptitle-h { margin: 0; font: 700 26px/1.2 var(--ps-font); color: var(--ps-text); }
.ps-ptitle p:empty { display: none; }
.ps-page-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ps-page-cta .ps-btn svg { width: 18px; height: 18px; fill: currentColor; }
.ps-app .ps-note--act { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 16px; }
.ps-app .ps-note--act .ps-chip-btn { flex: none; border-color: rgba(255, 179, 179, .5); color: #ffd0d0; }
.ps-panels { display: grid; gap: 12px; margin: 0 0 18px; padding: 0; list-style: none; }
.ps-cp { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
.ps-cp-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(157, 125, 255, .14); color: #b9a2ff; }
.ps-cp-ico svg { width: 22px; height: 22px; fill: none; }
.ps-cp-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ps-cp-domain { font-size: 16px; font-weight: 600; color: var(--ps-text); overflow-wrap: anywhere; }
.ps-cp-dates { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--ps-muted); }
.ps-cp .ps-btn svg { width: 14px; height: 14px; margin-left: 4px; }
.ps-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.ps-ns { margin: -4px 0 18px; padding: 14px 16px; border-radius: 12px; background: rgba(139, 152, 255, .08); border: 1px solid rgba(139, 152, 255, .2); font-size: 13px; color: var(--ps-text-2); }
.ps-ns p { margin: 0 0 8px; }
.ps-ns ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ps-app .ps-ns code { padding: 4px 9px; border-radius: 8px; background: rgba(0, 0, 0, .25); color: #c9cfff; font-size: 13px; }
.ps-checks { margin: 0; padding: 0; list-style: none; }
.ps-checks li { position: relative; padding: 0 0 0 26px; font-size: 14px; color: var(--ps-text-2); }
.ps-checks li + li { margin-top: 10px; }
.ps-checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: rgba(1, 214, 118, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.8' fill='none' stroke='%2301d676' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.ps-confirm { margin-top: 24px; padding: 40px 32px; text-align: center; }
.ps-confirm-ico { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 16px; border-radius: 18px; background: rgba(139, 152, 255, .14); color: #aab4ff; }
.ps-confirm-ico svg { width: 30px; height: 30px; fill: currentColor; }
.ps-confirm-h { margin: 0 0 8px; font: 700 24px/1.25 var(--ps-font); color: var(--ps-text); }
.ps-confirm-p p { margin: 0 0 4px; color: var(--ps-text-2); }
.ps-confirm-p b { color: var(--ps-text); }
.ps-confirm-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px 0 14px; }
.ps-confirm-tip { margin: 0; font-size: 13px; color: var(--ps-muted); }
@media (max-width: 640px) {
.ps-cp { flex-wrap: wrap; }
.ps-cp .ps-btn { width: 100%; justify-content: center; }
.ps-pair { grid-template-columns: minmax(0, 1fr); }
.ps-confirm { padding: 28px 20px; }
}
@media (max-width: 350px) {
.ps-top { gap: 6px; }
.ps-top-logo { display: none !important; }
}
@media (max-width: 480px) {
.ps-app .ps-panel .ps-order-foot .ps-sum-total { gap: 10px; padding: 0 12px; }
.ps-app .ps-panel .ps-sum-total > .control-label { padding-right: 10px; }
.ps-sum-off { padding-left: 10px; }
.ps-sum-off .ps-off-long { display: none; }
}
@media (max-width: 350px) {
.ps-sum-total .ps-sum-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 480px) {
.ps-sum-total:has(.ps-sum-off) .ps-sum-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 350px) {
.ps-app .ps-panel .ps-sum-total:has(.ps-sum-off) .form-control { font-size: 16px; }
.ps-sum-off { font-size: 12px; }
.ps-sum-off svg { display: none; }
}
/* new order: the panel's Vue search replaces #new-order-search with div.search-dropdown > .input-wrapper */
#order-form .search-dropdown .input-wrapper { position: relative; }
#order-form .search-dropdown .input-wrapper__prepend { position: absolute; left: 14px; top: 50%; z-index: 2; display: grid; place-items: center; width: 22px; height: 22px; margin-top: -11px; padding: 0; border: 0; background: none; color: var(--ps-muted); font-size: 15px; pointer-events: none; }
#order-form .search-dropdown .input-wrapper__prepend svg { width: 18px; height: 18px; fill: currentColor; }
.ps-app .ps-panel #order-form .search-dropdown input.form-control, .ps-app #order-form .search-dropdown input.select2-selection { display: block; width: 100%; height: 48px; padding: 0 14px 0 44px; border-radius: 12px; background: var(--ps-field); border: 1.5px solid var(--ps-field-line); color: var(--ps-text); font: 400 15px var(--ps-font); box-shadow: none; }
.ps-app #order-form .search-dropdown input.select2-selection:focus { border-color: var(--ps-green); box-shadow: 0 0 0 4px rgba(1, 214, 118, .14); outline: 0; }
.ps-app #order-form .search-dropdown input.select2-selection::placeholder { color: var(--ps-muted); }
/* panel select2: the results
also carries .dropdown-menu and every option wraps an */
.ps-app .select2-results .select2-results__options.dropdown-menu { position: static; display: block; float: none; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ps-app .select2-dropdown.dropdown-menu { padding: 6px; }
.ps-app .select2-results__option > a { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; background: none !important; color: inherit !important; font: inherit; white-space: normal; text-decoration: none; }
.ps-app .select2-results__option .select2-selection__icon { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--ps-muted); }
.ps-app .select2-results__option--highlighted .select2-selection__icon, .ps-app .select2-results__option.active .select2-selection__icon { color: inherit; }
.ps-app .select2-results__option.active { background: rgba(255, 255, 255, .05); color: var(--ps-text); }
.ps-app .select2-results__option.select2-results__option--highlighted { background: rgba(1, 214, 118, .14); color: var(--ps-text); }
.ps-app .select2-search__field-wrapper { position: relative; }
.ps-app .select2-search__field-icon { position: absolute; left: 12px; top: 50%; margin: -8px 0 0; color: var(--ps-muted); font-size: 14px; line-height: 16px; }
.ps-app .select2-container--default .select2-search--dropdown .select2-search__field-wrapper .select2-search__field { padding-left: 36px; }
.ps-app .select2-results__option { color: var(--ps-text-2); }
.ps-page .select2-results .select2-results__options > li.select2-results__option > a { display: block; padding: 0; line-height: 1.5; }
.ps-page .select2-results .select2-results__options > li.select2-results__option { margin: 0; padding: 10px 12px; }
.ps-app .select2-results__option > a .select2-selection__icon { display: inline-grid; vertical-align: -4px; margin-right: 8px; }
.ps-app .select2-results__option > a .select2-selection__text { display: inline; }
.ps-app .select2-selection__id.badge { display: inline-block; margin-right: 2px; padding: 2px 7px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: var(--ps-muted); font-size: 12px; font-weight: 600; vertical-align: 1px; }
.ps-app .select2-selection__rendered .select2-selection__id.badge { margin-right: 6px; }
#order-form .search-dropdown .input-wrapper__prepend { top: 0; bottom: 0; height: auto; margin: 0; display: flex; align-items: center; justify-content: center; transform: none; }
#order-form .search-dropdown .input-wrapper__prepend .fas { line-height: 1; font-size: 15px; }
/* no focus ring after a mouse/touch click; keyboard focus keeps a visible ring */
.ps-page a, .ps-page button, .ps-page [role="button"], .ps-page summary { -webkit-tap-highlight-color: transparent; }
.ps-page a:focus:not(:focus-visible), .ps-page button:focus:not(:focus-visible), .ps-page [role="button"]:focus:not(:focus-visible), .ps-page summary:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.ps-page a:focus-visible, .ps-page button:focus-visible { outline: 2px solid rgba(139, 152, 255, .7); outline-offset: 2px; }
/* select2 lists: one box, one scrollbar, faint separators */
.ps-app .select2-results .select2-results__options.dropdown-menu { max-height: none; overflow: visible; }
.ps-app .select2-results > .select2-results__options.dropdown-menu { max-height: 340px; overflow-y: auto; }
.ps-app .select2-results .select2-results__options > li.select2-results__option + li.select2-results__option { border-top: 1px solid rgba(255, 255, 255, .06); }
.ps-app .select2-results .select2-results__options > li.select2-results__option--highlighted, .ps-app .select2-results .select2-results__options > li.select2-results__option--highlighted + li { border-top-color: transparent; }
.ps-app .select2-dropdown, .ps-app .select2-dropdown * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
#order-form .search-dropdown .input-wrapper__append { position: absolute; right: 10px; top: 0; bottom: 0; height: auto; margin: 0; transform: none; display: flex; align-items: center; padding: 0 6px; border: 0; background: none; color: var(--ps-muted); }
#order-form .search-dropdown .input-wrapper__append:hover { color: var(--ps-text); }
@media (max-width: 760px) {
.ps-plat { gap: 0; padding: 0 4px; font-size: 0; }
.ps-plat .ps-plat-ico { font-size: 15px; }
.ps-plats { gap: 6px; }
}
@media (max-width: 760px) {
.ps-pay-table tr { grid-template-columns: minmax(0, 1fr) auto; }
.ps-pay-table .ps-pay-id { grid-column: 1; grid-row: 1; font-size: 12px; }
.ps-pay-table .ps-pay-amt { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right !important; font-size: 16px; }
.ps-pay-table .ps-pay-date { grid-column: 1; font-size: 13px; color: var(--ps-text-2); }
.ps-pay-table .ps-pay-method { grid-column: 1; font-size: 13px; color: var(--ps-muted); }
.ps-pay-table td:last-child:not(.ps-pay-amt) { grid-column: 1 / -1; }
.ps-pay-table td:last-child:empty { display: none; }
}
/* panel-injected instruction blocks (add funds methods, etc.) */
.ps-app .form-group.instruction .panel-body, .ps-app .ps-panel .panel-body.border-solid:not(.ps-sum-desc .panel-body) { padding: 14px 16px; border-radius: 12px; background: rgba(139, 152, 255, .07); border: 1px solid rgba(139, 152, 255, .22); color: var(--ps-text-2); font-size: 14px; line-height: 1.6; text-align: left; }
.ps-app .form-group.instruction .panel-body p { margin: 0 0 8px; }
.ps-app .form-group.instruction .panel-body p:last-child { margin-bottom: 0; }
.ps-app .form-group.instruction .panel-body b, .ps-app .form-group.instruction .panel-body strong, .ps-app .form-group.instruction .panel-body [style*="font-weight: 700"] { color: var(--ps-text); }
.ps-app .form-group.instruction .panel-body a { color: var(--ps-green); }
.ps-app .form-group.instruction .panel-body img { max-width: 100%; height: auto; border-radius: 8px; }
/* support: AI guide + wrong-choice hint */
.ps-support-main { display: grid; gap: 18px; align-content: start; min-width: 0; }
.ps-hint--warn { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 500; color: rgba(255, 138, 138, .78); }
.ps-hint--warn[hidden] { display: none; }
.ps-hint--warn svg { width: 14px; height: 14px; flex: none; }
.ps-app .ps-guide.ps-panel { padding: 0; overflow: hidden; }
.ps-guide summary { display: flex; align-items: center; gap: 10px; padding: 16px 20px; list-style: none; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--ps-text); }
.ps-guide summary::-webkit-details-marker { display: none; }
.ps-guide summary:hover { background: rgba(255, 255, 255, .02); }
.ps-guide-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(139, 152, 255, .14); color: #aab4ff; }
.ps-guide-ico svg { width: 16px; height: 16px; fill: currentColor; }
.ps-guide-chev { width: 16px; height: 16px; margin-left: auto; color: var(--ps-muted); transition: transform .2s; }
.ps-guide[open] .ps-guide-chev { transform: rotate(180deg); }
.ps-guide-body { padding: 0 20px 18px; font-size: 14px; line-height: 1.6; color: var(--ps-text-2); }
.ps-guide-body p { margin: 0 0 12px; }
.ps-guide-body strong { color: var(--ps-text); font-weight: 600; }
.ps-guide-body ul, .ps-guide-body ol { margin: 0 0 14px; padding-left: 20px; }
.ps-guide-body li + li { margin-top: 6px; }
.ps-guide-sub { margin: 16px 0 6px !important; font-weight: 600; color: var(--ps-text); }
.ps-guide-foot { margin: 0 !important; padding-top: 12px; border-top: 1px solid var(--ps-line); font-size: 13px; color: var(--ps-muted); }