/* =========================================================
   PROPNOOK MASTER UI
   Navy + Orange commercial product system
   ========================================================= */

:root {
    --pn-navy-950: #071523;
    --pn-navy-900: #092039;
    --pn-navy-850: #0d2945;
    --pn-navy-800: #123451;

    --pn-orange: #f58220;
    --pn-orange-hover: #e66f0b;
    --pn-orange-soft: rgba(245,130,32,.12);

    --pn-bg: #f5f7fa;
    --pn-surface: #ffffff;
    --pn-surface-2: #f8fafc;

    --pn-text: #172033;
    --pn-muted: #687386;
    --pn-border: #e2e7ee;

    --pn-success: #16835d;
    --pn-danger: #c94b4b;
    --pn-warning: #a96809;

    --pn-radius-sm: 10px;
    --pn-radius: 14px;
    --pn-radius-lg: 20px;

    --pn-shadow-sm: 0 2px 8px rgba(7,21,35,.06);
    --pn-shadow: 0 10px 30px rgba(7,21,35,.08);
    --pn-shadow-hover: 0 14px 36px rgba(7,21,35,.12);
}

/* ---------- FOUNDATION ---------- */

html {
    background: var(--pn-bg);
}

body.pn-app {
    background: var(--pn-bg);
    color: var(--pn-text);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body.pn-app *,
body.pn-app *::before,
body.pn-app *::after {
    box-sizing: border-box;
}

body.pn-app a {
    transition:
        color .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

/* ---------- BRAND ---------- */

.pn-app-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.pn-app-brand-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--pn-orange);
    color: #fff;
    font-weight: 900;
    box-shadow: 0 8px 20px rgba(245,130,32,.25);
}

.pn-app-brand-name {
    color: #fff;
    font-weight: 850;
    letter-spacing: -.02em;
}

.pn-app-brand-tier {
    color: rgba(255,255,255,.62);
}

/* ---------- NEW TIER SIDEBAR ---------- */

.pn-wave3-sidebar {
    background:
        linear-gradient(
            180deg,
            var(--pn-navy-900) 0%,
            var(--pn-navy-950) 100%
        );
    border-right: 1px solid rgba(255,255,255,.06);
}

.pn-tier-identity {
    margin: 20px 12px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--pn-radius);
    background: rgba(255,255,255,.045);
}

.pn-tier-identity-label {
    color: var(--pn-orange);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pn-tier-identity-name {
    color: #fff;
    font-weight: 800;
}

.pn-tier-identity-purpose {
    color: rgba(255,255,255,.6);
}

/* ---------- NAVIGATION ---------- */

.pn-app-nav-section {
    margin: 22px 14px 8px;
    color: rgba(255,255,255,.4);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.pn-app-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin: 3px 8px;
    padding: 10px 12px;
    border-radius: 11px;
    color: rgba(255,255,255,.74);
    text-decoration: none;
    font-size: .91rem;
    font-weight: 650;
}

.pn-app-nav-item:hover {
    color: #fff;
    background: rgba(255,255,255,.07);
    transform: translateX(2px);
}

.pn-app-nav-item.is-active {
    color: #fff;
    background: var(--pn-orange-soft);
    box-shadow: inset 3px 0 0 var(--pn-orange);
}

.pn-app-nav-icon {
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
}

.pn-app-nav-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- CARDS / PANELS ---------- */

.pn-free-panel,
.pn-free-kpi,
.pnsl-panel,
.pnsl-card,
.pnsl-kpi,
.pnpm4-card,
.pnpm-card,
.pn-card {
    border: 1px solid var(--pn-border) !important;
    border-radius: var(--pn-radius-lg) !important;
    background: var(--pn-surface) !important;
    box-shadow: var(--pn-shadow-sm);
}

.pn-free-kpi,
.pnsl-kpi {
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

a.pn-free-kpi:hover,
.pnsl-kpi:hover {
    transform: translateY(-2px);
    border-color: rgba(245,130,32,.35) !important;
    box-shadow: var(--pn-shadow-hover);
}

/* ---------- BUTTONS ---------- */

.pn-btn,
.pnsl-btn,
.pnpm4-btn,
button.pn-btn,
a.pn-btn {
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: 11px;
    padding: 10px 16px;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        background .16s ease,
        border-color .16s ease;
}

.pn-btn-primary,
.pnsl-btn:not(.pnsl-btn-secondary) {
    background: var(--pn-orange) !important;
    color: #fff !important;
    border-color: var(--pn-orange) !important;
    box-shadow: 0 7px 18px rgba(245,130,32,.2);
}

.pn-btn-primary:hover,
.pnsl-btn:not(.pnsl-btn-secondary):hover {
    background: var(--pn-orange-hover) !important;
    border-color: var(--pn-orange-hover) !important;
    transform: translateY(-1px);
}

.pnsl-btn-secondary {
    background: #fff !important;
    color: var(--pn-navy-900) !important;
    border-color: var(--pn-border) !important;
}

.pnsl-btn-secondary:hover {
    border-color: var(--pn-orange) !important;
    color: var(--pn-orange-hover) !important;
}

/* ---------- FORMS ---------- */

body.pn-app input:not([type="checkbox"]):not([type="radio"]),
body.pn-app select,
body.pn-app textarea {
    border: 1px solid #d9e0e8;
    border-radius: 11px;
    background: #fff;
    color: var(--pn-text);
    transition:
        border-color .16s ease,
        box-shadow .16s ease;
}

body.pn-app input:focus,
body.pn-app select:focus,
body.pn-app textarea:focus {
    outline: none;
    border-color: var(--pn-orange);
    box-shadow: 0 0 0 3px rgba(245,130,32,.12);
}

/* ---------- BADGES ---------- */

.pn-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 5px 9px;
    background: var(--pn-orange-soft);
    color: #a64c00;
    font-size: .75rem;
    font-weight: 750;
}

/* ---------- FREE DASHBOARD ---------- */

.pn-free-dashboard {
    max-width: 1500px;
    margin-inline: auto;
}

.pn-free-head h1,
.pnsl-hero h1 {
    color: var(--pn-navy-900);
    letter-spacing: -.035em;
}

.pn-free-eyebrow,
.pnsl-eyebrow,
.pn-free-section-label {
    color: var(--pn-orange) !important;
    font-weight: 850;
    letter-spacing: .08em;
}

.pn-free-property-row {
    border-radius: var(--pn-radius);
    transition:
        background .16s ease,
        transform .16s ease;
}

.pn-free-property-row:hover {
    background: var(--pn-surface-2);
}

/* ---------- SMALL LANDLORD ---------- */

.pnsl-page {
    color: var(--pn-text);
}

.pnsl-hero {
    border-radius: 22px;
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7f9fc 100%
        );
    border: 1px solid var(--pn-border);
    box-shadow: var(--pn-shadow-sm);
}

.pnsl-kpi strong {
    color: var(--pn-navy-900);
}

.pnsl-kpi-attention {
    border-color: rgba(245,130,32,.35) !important;
}

.pnsl-progress {
    overflow: hidden;
    border-radius: 999px;
    background: #e9edf2;
}

.pnsl-progress span {
    background: var(--pn-orange) !important;
}

/* ---------- PM SHELL ---------- */

.pnpm4-sidebar {
    background:
        linear-gradient(
            180deg,
            var(--pn-navy-900),
            var(--pn-navy-950)
        ) !important;
}

.pnpm4-brand strong {
    color: #fff;
}

.pnpm4-brand small,
.pnpm4-nav-label {
    color: rgba(255,255,255,.5);
}

.pnpm4-nav a {
    border-radius: 11px;
}

.pnpm4-nav a.active {
    background: var(--pn-orange-soft) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--pn-orange);
}

.pnpm4-topbar {
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid var(--pn-border);
    backdrop-filter: blur(12px);
}

/* ---------- TABLES ---------- */

body.pn-app table {
    border-collapse: separate;
    border-spacing: 0;
}

body.pn-app th {
    color: var(--pn-muted);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body.pn-app td,
body.pn-app th {
    border-color: var(--pn-border);
}

/* ---------- MOBILE ---------- */

@media (max-width: 900px) {
    .pn-free-head,
    .pnsl-hero {
        gap: 18px;
    }

    .pn-free-kpis,
    .pnsl-kpis {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .pn-free-main-grid,
    .pnsl-grid {
        grid-template-columns: 1fr !important;
    }

    .pnsl-rail {
        width: 100%;
    }

    .pn-btn,
    .pnsl-btn {
        min-height: 46px;
    }
}

@media (max-width: 560px) {
    .pn-free-kpis,
    .pnsl-kpis {
        grid-template-columns: 1fr !important;
    }

    .pn-free-head h1,
    .pnsl-hero h1 {
        font-size: clamp(1.65rem, 8vw, 2.1rem);
    }

    .pn-free-panel,
    .pnsl-panel,
    .pnsl-card {
        border-radius: 15px !important;
    }
}

/* =========================================================
   PROPNOOK MASTER UI — PASS 2
   Approved product direction
   ========================================================= */

:root {
    --pn2-bg: #071827;
    --pn2-bg-deep: #05131f;
    --pn2-sidebar: #061a2b;
    --pn2-panel: #0d2639;
    --pn2-panel-2: #102d43;
    --pn2-panel-soft: #15344a;

    --pn2-orange: #ff7417;
    --pn2-orange-2: #ff8a2b;

    --pn2-white: #f8fbff;
    --pn2-text: #eef5fb;
    --pn2-muted: #9cafc0;
    --pn2-line: rgba(255,255,255,.105);

    --pn2-green: #2bd58b;
    --pn2-blue: #368df7;
    --pn2-red: #ff6c63;

    --pn2-radius: 15px;
    --pn2-radius-lg: 19px;

    --pn2-shadow:
        0 14px 34px rgba(0,0,0,.20);
}

/* =========================================================
   GLOBAL PRODUCT CANVAS
   ========================================================= */

html,
body.pn-app {
    min-height: 100%;
    background:
        radial-gradient(
            circle at 65% 0%,
            rgba(26,67,96,.28),
            transparent 34%
        ),
        var(--pn2-bg-deep) !important;
}

body.pn-app {
    color: var(--pn2-text);
}

/* =========================================================
   HIDE LEGACY DUPLICATE VISUAL CHROME

   Keep the DOM temporarily so old JS/routes are not broken.
   The Wave 3 navigation becomes the visible shell.
   ========================================================= */

body.pn-app > .app-layout > .sidebar {
    display: none !important;
}

body.pn-app .propnook-public-footer {
    display: none !important;
}

/* old footer inside legacy shell */
body.pn-app .footer {
    display: none !important;
}

/* =========================================================
   MASTER SHELL
   ========================================================= */

.pn-wave3-shell {
    position: fixed !important;
    inset: 0 auto 0 0;
    width: 236px !important;
    z-index: 100;
    pointer-events: none;
}

.pn-wave3-sidebar {
    pointer-events: auto;
    position: absolute !important;
    inset: 0;
    width: 236px !important;
    min-height: 100vh;

    padding: 18px 10px 22px;

    overflow-y: auto;

    background:
        radial-gradient(
            circle at 30% 0%,
            rgba(38,92,128,.20),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #071e31 0%,
            #061827 55%,
            #04131f 100%
        ) !important;

    border-right:
        1px solid rgba(255,255,255,.08) !important;

    box-shadow:
        16px 0 40px rgba(0,0,0,.14);
}

/* =========================================================
   BRAND
   ========================================================= */

.pn-app-brand {
    padding: 5px 8px 13px;
}

.pn-app-brand-mark {
    width: 38px;
    height: 38px;

    background:
        linear-gradient(
            145deg,
            var(--pn2-orange-2),
            var(--pn2-orange)
        ) !important;

    border-radius: 11px;

    box-shadow:
        0 8px 22px rgba(255,116,23,.24);
}

.pn-app-brand-name {
    font-size: 1.03rem;
}

.pn-app-brand-tier {
    display: block;
    margin-top: 2px;

    color: #8fa5b8 !important;
    font-size: .69rem;
}

/* =========================================================
   CURRENT WORKSPACE
   ========================================================= */

.pn-tier-identity {
    margin: 7px 0 18px !important;
    padding: 12px 13px !important;

    background:
        rgba(255,255,255,.035) !important;

    border:
        1px solid rgba(255,255,255,.075) !important;

    border-radius: 11px !important;
}

.pn-tier-identity-label {
    color: #7890a4 !important;
    font-size: .60rem !important;
}

.pn-tier-identity-name {
    display: block;

    margin-top: 4px;

    color: #fff !important;

    font-size: .82rem;
    font-weight: 800;
}

.pn-tier-identity-purpose {
    display: block;

    margin-top: 3px;

    color: #879bae !important;

    font-size: .65rem;
    line-height: 1.35;
}

/* =========================================================
   MASTER NAV
   ========================================================= */

.pn-app-nav-section {
    margin: 19px 10px 7px !important;

    color: #63798d !important;

    font-size: .58rem !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
}

.pn-app-nav-item {
    position: relative;

    min-height: 42px !important;

    margin: 2px 0 !important;
    padding: 9px 11px !important;

    color: #c2d0dc !important;

    border:
        1px solid transparent;

    border-radius: 10px !important;

    font-size: .78rem !important;
    font-weight: 650 !important;
}

.pn-app-nav-item:hover {
    color: #fff !important;

    background:
        rgba(255,255,255,.055) !important;

    transform: none !important;
}

.pn-app-nav-item.is-active {
    color: #fff !important;

    background:
        linear-gradient(
            90deg,
            rgba(255,116,23,.17),
            rgba(255,255,255,.045)
        ) !important;

    border-color:
        rgba(255,116,23,.08) !important;

    box-shadow:
        inset 3px 0 0 var(--pn2-orange) !important;
}

.pn-app-nav-item.is-active .pn-app-nav-icon {
    color: var(--pn2-orange) !important;
}

/* =========================================================
   MOVE LEGACY CONTENT INTO NEW SHELL

   Existing content/forms/routes remain untouched.
   ========================================================= */

body.pn-app > .app-layout {
    display: block !important;

    width: auto !important;
    min-height: 100vh;

    margin-left: 236px !important;

    background:
        radial-gradient(
            circle at 55% 0%,
            rgba(28,72,101,.22),
            transparent 30%
        ),
        var(--pn2-bg) !important;
}

body.pn-app > .app-layout > .main-area {
    width: 100% !important;
    min-height: 100vh !important;

    background: transparent !important;
}

/* =========================================================
   MAIN CONTENT
   ========================================================= */

body.pn-app .main-area > main {
    width: min(1480px, calc(100% - 34px));

    margin: 0 auto !important;
    padding: 26px 0 42px !important;
}

body.pn-app main {
    color: var(--pn2-text);
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

body.pn-app main h1,
body.pn-app main h2,
body.pn-app main h3,
body.pn-app main h4 {
    color: var(--pn2-white) !important;
}

body.pn-app main p,
body.pn-app main small {
    color: var(--pn2-muted);
}

/* =========================================================
   UNIVERSAL DARK PANELS
   ========================================================= */

body.pn-app .pn-free-panel,
body.pn-app .pn-free-kpi,
body.pn-app .pnsl-panel,
body.pn-app .pnsl-card,
body.pn-app .pnsl-kpi,
body.pn-app .pn-card {
    background:
        linear-gradient(
            145deg,
            rgba(17,47,68,.97),
            rgba(10,35,53,.97)
        ) !important;

    color: var(--pn2-text) !important;

    border:
        1px solid var(--pn2-line) !important;

    box-shadow:
        var(--pn2-shadow) !important;
}

/* =========================================================
   FREE / SEARCH / NAVIGATOR / KEEPER
   ========================================================= */

.pn-free-dashboard,
.pn-free-dashboard * {
    border-color: var(--pn2-line);
}

.pn-free-head {
    padding:
        24px 26px !important;

    border:
        1px solid var(--pn2-line);

    border-radius:
        var(--pn2-radius-lg);

    background:
        linear-gradient(
            120deg,
            rgba(17,48,70,.98),
            rgba(8,30,47,.98)
        );

    box-shadow:
        var(--pn2-shadow);
}

.pn-free-head h1 {
    margin-bottom: 5px;
}

.pn-free-eyebrow,
.pn-free-section-label,
.pnsl-eyebrow {
    color:
        var(--pn2-orange) !important;
}

.pn-free-property-row {
    background:
        rgba(255,255,255,.025) !important;

    border:
        1px solid rgba(255,255,255,.07) !important;
}

.pn-free-property-row:hover {
    background:
        rgba(255,255,255,.055) !important;
}

/* =========================================================
   INPUTS
   ========================================================= */

body.pn-app main input:not([type="checkbox"]):not([type="radio"]),
body.pn-app main select,
body.pn-app main textarea {
    background:
        rgba(255,255,255,.055) !important;

    color:
        var(--pn2-white) !important;

    border:
        1px solid rgba(255,255,255,.12) !important;

    border-radius:
        10px !important;
}

body.pn-app main input::placeholder,
body.pn-app main textarea::placeholder {
    color:
        #7f94a6 !important;
}

body.pn-app main input:focus,
body.pn-app main select:focus,
body.pn-app main textarea:focus {
    border-color:
        var(--pn2-orange) !important;

    box-shadow:
        0 0 0 3px rgba(255,116,23,.12) !important;
}

/* =========================================================
   BUTTONS
   ========================================================= */

body.pn-app .pn-btn-primary,
body.pn-app .pnsl-btn:not(.pnsl-btn-secondary) {
    background:
        linear-gradient(
            135deg,
            var(--pn2-orange-2),
            var(--pn2-orange)
        ) !important;

    color: #fff !important;

    border-color:
        transparent !important;

    box-shadow:
        0 8px 20px rgba(255,116,23,.20) !important;
}

body.pn-app .pn-btn-primary:hover,
body.pn-app .pnsl-btn:not(.pnsl-btn-secondary):hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 12px 26px rgba(255,116,23,.27) !important;
}

/* PURPLE IS NOT A PROPNOOK PRIMARY COLOR */

body.pn-app main a[class*="purple"],
body.pn-app main button[class*="purple"] {
    background:
        var(--pn2-orange) !important;
}

/* =========================================================
   SMALL LANDLORD
   ========================================================= */

body.pn-app .pnsl-page {
    color:
        var(--pn2-text) !important;
}

body.pn-app .pnsl-hero {
    background:
        linear-gradient(
            135deg,
            #102e44,
            #0a2235
        ) !important;

    border:
        1px solid var(--pn2-line) !important;

    box-shadow:
        var(--pn2-shadow) !important;
}

body.pn-app .pnsl-hero h1 {
    color:
        #fff !important;
}

body.pn-app .pnsl-kpi strong {
    color:
        #fff !important;
}

body.pn-app .pnsl-property {
    background:
        rgba(255,255,255,.025) !important;

    border-color:
        rgba(255,255,255,.08) !important;
}

/* =========================================================
   PROPERTY MANAGEMENT
   Override the old white/purple PM product skin.
   Keep its advanced layout.
   ========================================================= */

body.pn-role-pm .pnpm4-workspace {
    background:
        var(--pn2-bg) !important;

    color:
        var(--pn2-text) !important;
}

body.pn-role-pm .pnpm4-sidebar {
    display: none !important;
}

body.pn-role-pm .pnpm4-stage {
    width: 100% !important;
    margin: 0 !important;

    background:
        transparent !important;
}

body.pn-role-pm .pnpm4-topbar {
    margin:
        0 0 18px !important;

    background:
        rgba(9,31,48,.94) !important;

    border:
        1px solid var(--pn2-line) !important;

    border-radius:
        14px !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.15) !important;

    backdrop-filter:
        blur(14px);
}

body.pn-role-pm .pnpm4-topbar *,
body.pn-role-pm .pnpm4-stage h1,
body.pn-role-pm .pnpm4-stage h2,
body.pn-role-pm .pnpm4-stage h3 {
    color:
        var(--pn2-text);
}

/* neutralize obvious PM purple controls */

body.pn-role-pm .pnpm4-stage button,
body.pn-role-pm .pnpm4-stage .btn-primary {
    border-radius:
        10px;
}

body.pn-role-pm .pnpm4-stage .btn-primary {
    background:
        var(--pn2-orange) !important;

    border-color:
        var(--pn2-orange) !important;

    color:
        #fff !important;
}

/* =========================================================
   TABLES / ROWS
   ========================================================= */

body.pn-app main table {
    color:
        var(--pn2-text);
}

body.pn-app main th {
    color:
        #8398aa !important;
}

body.pn-app main td {
    color:
        #dbe6ef;
}

body.pn-app main tr {
    border-color:
        var(--pn2-line) !important;
}

/* =========================================================
   TEST / DEVELOPER PREVIEW
   ========================================================= */

.global-test-tier-badge {
    position: fixed !important;

    right: 14px !important;
    bottom: 14px !important;
    top: auto !important;

    z-index: 900;

    max-width: 255px;

    background:
        #071a2b !important;

    color:
        #fff !important;

    border:
        1px solid rgba(255,255,255,.14) !important;

    border-radius:
        11px !important;

    box-shadow:
        0 14px 35px rgba(0,0,0,.28) !important;
}

/* =========================================================
   LOGOUT
   ========================================================= */

.pn-logout-button {
    position:
        fixed !important;

    top: 15px !important;
    right: 16px !important;

    z-index:
        950;

    padding:
        8px 12px !important;

    background:
        #102a3e !important;

    color:
        #fff !important;

    border:
        1px solid rgba(255,255,255,.12) !important;

    border-radius:
        9px !important;

    box-shadow:
        0 8px 22px rgba(0,0,0,.15) !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (min-width: 901px) {
    body.pn-app .mobile-bar {
        display:
            none !important;
    }
}

@media (max-width: 900px) {

    .pn-wave3-shell {
        display:
            none !important;
    }

    body.pn-app > .app-layout {
        margin-left:
            0 !important;
    }

    body.pn-app .mobile-bar {
        display:
            flex !important;

        position:
            sticky;

        top:
            0;

        z-index:
            800;

        background:
            rgba(5,20,32,.96) !important;

        border-bottom:
            1px solid var(--pn2-line) !important;

        backdrop-filter:
            blur(14px);
    }

    body.pn-app .main-area > main {
        width:
            min(100% - 22px, 760px);

        padding-top:
            14px !important;
    }

    body.pn-app .mobile-nav-drawer {
        background:
            #061a2b !important;

        color:
            #fff !important;
    }

    body.pn-app .pn-logout-button {
        display:
            none !important;
    }

    .pn-free-head,
    .pnsl-hero {
        padding:
            18px !important;
    }
}

@media (max-width: 560px) {

    body.pn-app .main-area > main {
        width:
            calc(100% - 16px);
    }

    .pn-free-kpis,
    .pnsl-kpis {
        gap:
            9px !important;
    }

    .pn-free-panel,
    .pnsl-panel,
    .pnsl-card {
        border-radius:
            13px !important;
    }
}