@font-face { font-family: "Aptos Display"; src: local("Aptos Display"); font-display: swap; }
:root { --pj-ink: #061b39; --pj-navy: #031a35; --pj-accent: #2fc9f2; }
.pj-header, .pj-menu, .pj-rosto, .pj-platform-ref, .pj-paid, .pj-notice {
  font-family: "Aptos Display", "Aptos", "Segoe UI", system-ui, sans-serif;
}
.pj-header { box-sizing: border-box; position: relative; z-index: 50; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; padding: .75rem clamp(.7rem, 2vw, 2rem); background: #fbfdff; color: var(--pj-ink); border-bottom: 1px solid #dce5ee; }
.pj-product { font-family: "Manrope", "Nunito Sans", "Avenir Next", "Segoe UI", sans-serif !important; font-weight: 770; font-size: clamp(1.1rem, 2.3vw, 1.65rem); letter-spacing: -.055em; color: var(--pj-ink); text-decoration: none; }
.pj-app-badge { font: 700 .7rem "Aptos Display", "Segoe UI", sans-serif; letter-spacing: .12em; border: 1px solid var(--pj-accent); border-radius: .4rem; padding: .18rem .35rem; vertical-align: middle; }
.pj-nav { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; flex: 1; min-width: 0; }
.pj-nav a, .pj-nav button { color: var(--pj-ink) !important; background: transparent; }
.pj-header button, .pj-header a { font-size: inherit; }
.pj-status { position: relative; margin-left: auto; max-width: 100%; }
.pj-status-plan { display: block; max-width: 30rem; margin-top: .25rem; font-size: .75rem; overflow-wrap: anywhere; }
.pj-status-trigger { display: flex; align-items: center; gap: .4rem; padding: .4rem .65rem; border: 1px solid currentColor; border-radius: .6rem; background: transparent; color: var(--pj-ink); cursor: pointer; font: inherit; text-transform: uppercase; text-decoration: none; max-width: 100%; overflow-wrap: anywhere; }
.pj-user-icon { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.7; flex-shrink: 0; }
.pj-menu { position: absolute; top: calc(100% + .5rem); right: 0; box-sizing: border-box; width: min(22rem, calc(100vw - 2rem)); max-height: 70vh; overflow: auto; border: 1px solid currentColor; border-radius: .7rem; background: #fbfdff; color: var(--pj-ink); padding: 1rem; box-shadow: 0 .6rem 1.5rem #031a352a; animation: pj-open .16s ease-out; overflow-wrap: anywhere; }
.pj-menu[hidden] { display: none; }
.pj-menu ul { list-style: none; padding: 0; }
.pj-menu li { margin: .4rem 0; }
.pj-menu a { color: inherit; }
.pj-menu button { padding: .4rem .65rem; color: inherit; border: 1px solid currentColor; border-radius: .4rem; cursor: pointer; background: transparent; }
.pj-menu button:disabled { cursor: default; opacity: .7; }
.pj-platform-ref { margin: 0; padding: .35rem 1rem; text-align: center; font-size: .78rem; color: var(--pj-ink); background: #edf4fa; }
.pj-platform-ref a { color: inherit; }
.sidebar-panel { background: #fbfdff; color: var(--pj-ink); --primary: #031a35; --secondary: #031a35; --accent: #2fc9f2; --text-muted: #36536e; }
body .menu-lateral { background: var(--pj-navy) !important; color: #fbfdff; }
body .menu-lateral .nav-tab { color: #fbfdff !important; }
body .menu-lateral .nav-tab:hover { background: #06315a !important; }
.pj-rosto { margin: 0; background: var(--pj-navy); color: white; min-height: 100vh; }
.pj-face { box-sizing: border-box; margin: clamp(1rem, 7vh, 5rem) auto; padding: clamp(1rem, 4vw, 2.5rem); width: min(48rem, calc(100% - 2rem)); border: 1px solid var(--pj-accent); border-radius: 1rem; overflow-wrap: anywhere; }
.pj-face h1 { font-size: clamp(1.75rem, 5vw, 3rem); }
.pj-face-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.pj-face-actions p, .pj-plan { flex-basis: 100%; }
.pj-primary, .pj-secondary { display: inline-block; font: inherit; padding: .65rem 1rem; text-decoration: none; border: 1px solid var(--pj-accent); border-radius: .5rem; color: inherit; background: transparent; cursor: pointer; }
.pj-primary { background: var(--pj-accent); color: var(--pj-ink); font-weight: 700; }
.pj-plan { padding: 1rem; border: 1px solid currentColor; border-radius: .6rem; }
.pj-plan a { color: inherit; }
.pj-paid { display: inline-block; font-size: .75rem; padding: .25rem .5rem; border: 1px solid currentColor; border-radius: .4rem; }
.pj-blocked { opacity: .7; cursor: not-allowed !important; }
.pj-notice { position: fixed; z-index: 10000; inset: auto 1rem 1rem; margin: auto; max-width: 40rem; padding: 1rem; background: #fbfdff; color: var(--pj-ink); border: 2px solid var(--pj-ink); border-radius: .6rem; box-shadow: 0 .5rem 2rem #0004; }
.pj-notice button { float: right; color: inherit; background: transparent; border: 1px solid currentColor; padding: .25rem; }
:where(.pj-header, .pj-face) :focus-visible { outline: 3px solid var(--pj-accent); outline-offset: 3px; }
@keyframes pj-open { from { opacity: 0; transform: translateY(-.5rem); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .pj-nav { order: 3; flex-basis: 100%; } .pj-product { max-width: 65%; } }
@media (prefers-reduced-motion: reduce) { .pj-menu { animation: none; } }
@media (forced-colors: active) {
  .pj-header, .pj-menu, .pj-rosto, .pj-face, .pj-platform-ref, .pj-notice, .sidebar-panel, body .menu-lateral { color: CanvasText; background: Canvas !important; border-color: CanvasText; box-shadow: none; }
  body .menu-lateral .nav-tab { color: ButtonText !important; background: ButtonFace !important; }
  .pj-header a, .pj-nav a, .pj-nav button, .pj-primary, .pj-secondary, .pj-status-trigger, .pj-menu button, .pj-product { color: ButtonText !important; background: ButtonFace; border-color: ButtonText; }
  .pj-app-badge, .pj-paid { border-color: ButtonText; }
  :focus-visible { outline-color: Highlight !important; }
}