/*
|--------------------------------------------------------------------------
|  PrymACE Design System
|--------------------------------------------------------------------------
|
|  One token layer and one component layer shared by every surface of the
|  app: the public site (BeTheme/Bootstrap), the AdminLTE dashboards and the
|  auth (guest) pages.
|
|  Conventions
|  -----------
|  * Every class in this file is prefixed `pa-` so it can never collide with
|    BeTheme's very generic selectors (`.title`, `.section`, `.desc`, ...)
|    or with AdminLTE/Bootstrap component names.
|  * Colours, spacing, radii and shadows are CSS custom properties declared
|    once in :root. Views must not hard-code hex literals.
|
|  Load order (important): this file is a *layer*, not a reset. It is loaded
|  after the framework stylesheets so its components win without needing
|  !important.
|
*/

/* ======================================================================
   1. TOKENS
   ====================================================================== */

:root {
    /* --- Brand ------------------------------------------------------- */
    /* #017FE4 is the canonical PrymACE blue (was previously hard-coded
       inline in 22 places before it became this token). */
    --pa-brand:            #017FE4;
    --pa-brand-600:        #0169c4;
    --pa-brand-700:        #01539c;
    --pa-brand-050:        #e8f4fe;
    --pa-brand-100:        #cfe7fb;

    /* Legacy blue that was drifting through the codebase. Kept as a token so
       any remaining use is intentional and centrally changeable. */
    --pa-brand-deep:       #2a3b8f;
    --pa-brand-legacy:     #4e73df;

    /* --- Neutrals ---------------------------------------------------- */
    --pa-ink:              #1c2733;   /* headings, primary text */
    --pa-text:             #333333;   /* body copy */
    --pa-muted:            #6c757d;   /* secondary text */
    --pa-faint:            #98a2b3;   /* tertiary / captions */
    --pa-line:             #dee2e6;   /* borders */
    --pa-line-soft:        #eceff3;
    --pa-surface:          #ffffff;   /* cards, panels */
    --pa-surface-alt:      #f8f9fa;   /* page background bands */
    --pa-surface-sunken:   #f0f2f5;

    /* --- Semantic ---------------------------------------------------- */
    --pa-success:          #28a745;
    --pa-success-050:      #e7f6eb;
    --pa-warning:          #e0a800;
    --pa-warning-050:      #fdf6e3;
    --pa-danger:           #e74a3b;
    --pa-danger-050:       #fdecea;
    --pa-info:             #17a2b8;
    --pa-info-050:         #e6f6f9;

    /* --- Typography -------------------------------------------------- */
    --pa-font:             'Figtree', 'Inter', -apple-system, BlinkMacSystemFont,
                           'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --pa-font-mono:        ui-monospace, SFMono-Regular, 'SF Mono', Menlo,
                           Consolas, monospace;

    --pa-text-xs:          0.75rem;
    --pa-text-sm:          0.8125rem;
    --pa-text-base:        0.9375rem;
    --pa-text-md:          1.0625rem;
    --pa-text-lg:          1.375rem;
    --pa-text-xl:          1.75rem;
    --pa-text-2xl:         2.25rem;

    --pa-weight-normal:    400;
    --pa-weight-medium:    500;
    --pa-weight-semibold:  600;
    --pa-weight-bold:      700;

    /* --- Spacing scale (4px base) ------------------------------------ */
    --pa-space-1:          0.25rem;
    --pa-space-2:          0.5rem;
    --pa-space-3:          0.75rem;
    --pa-space-4:          1rem;
    --pa-space-5:          1.5rem;
    --pa-space-6:          2rem;
    --pa-space-7:          2.5rem;
    --pa-space-8:          3rem;

    /* --- Radii ------------------------------------------------------- */
    --pa-radius-sm:        6px;
    --pa-radius:           10px;
    --pa-radius-lg:        14px;
    --pa-radius-pill:      999px;

    /* --- Elevation --------------------------------------------------- */
    --pa-shadow-xs:        0 1px 2px rgba(16, 24, 40, 0.05);
    --pa-shadow-sm:        0 2px 6px rgba(16, 24, 40, 0.06);
    --pa-shadow:           0 4px 14px rgba(16, 24, 40, 0.07);
    --pa-shadow-lg:        0 12px 32px rgba(16, 24, 40, 0.12);

    /* --- Layout ------------------------------------------------------ */
    --pa-sidebar-w:        250px;
    --pa-navbar-h:         58px;
    --pa-content-max:      1320px;

    --pa-transition:       180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ======================================================================
   2. BASE / TYPOGRAPHY HELPERS
   ====================================================================== */

.pa-page-title {
    font-family: var(--pa-font);
    font-size: var(--pa-text-xl);
    font-weight: var(--pa-weight-bold);
    color: var(--pa-ink);
    line-height: 1.2;
    margin: 0 0 var(--pa-space-1);
}

.pa-page-subtitle {
    font-size: var(--pa-text-base);
    color: var(--pa-muted);
    margin: 0 0 var(--pa-space-5);
}

.pa-section-title {
    font-size: var(--pa-text-md);
    font-weight: var(--pa-weight-semibold);
    color: var(--pa-ink);
    margin: 0 0 var(--pa-space-3);
}

.pa-muted   { color: var(--pa-muted) !important; }
.pa-faint   { color: var(--pa-faint) !important; }
.pa-brand-text { color: var(--pa-brand) !important; }
.pa-strong  { font-weight: var(--pa-weight-semibold); color: var(--pa-ink); }

/* Small uppercase eyebrow used above headings site-wide. */
.pa-eyebrow {
    display: block;
    font-size: var(--pa-text-xs);
    font-weight: var(--pa-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pa-brand);
    margin-bottom: var(--pa-space-2);
}

/* --- Offsets & measurements --------------------------------------------- */

/* Clears the fixed BeTheme header on inner public pages. */
.pa-page-offset { margin-top: 100px; }

/* Constrains a block of copy to a comfortable reading measure. */
.pa-measure    { max-width: 640px; margin-left: auto; margin-right: auto; }
.pa-measure-sm { max-width: 520px; margin-left: auto; margin-right: auto; }

/* Token-based spacer for BeTheme's `hr.no_line` separators. */
.pa-hr-space   { margin: 0 auto var(--pa-space-6); }
.pa-hr-space-lg { margin: 0 auto var(--pa-space-8); }

/* Tighter vertical rhythm for inner public pages. */
.pa-band--inner { padding: var(--pa-space-8) 0; }
.pa-band--tight { padding: var(--pa-space-6) 0; }

/* --- Media -------------------------------------------------------------- */

.pa-figure {
    border-radius: var(--pa-radius-lg);
    overflow: hidden;
    box-shadow: var(--pa-shadow);
}

.pa-figure img,
.pa-figure video { display: block; width: 100%; }

.pa-figure--card  { height: 180px; }
.pa-figure--card img  { height: 180px; object-fit: cover; object-position: center; }
.pa-figure--wide  { height: 400px; }
.pa-figure--wide img  { height: 400px; object-fit: cover; }
.pa-figure--tall  { height: 220px; }
.pa-figure--tall img  { height: 220px; object-fit: cover; object-position: center; }

.pa-figure--zoom img { transition: transform 0.4s ease; }
.pa-figure--zoom:hover img { transform: scale(1.05); }

/* Leaflet needs an explicit height on its container. */
.pa-map {
    height: 420px;
    border-radius: var(--pa-radius);
    overflow: hidden;
    border: 1px solid var(--pa-line);
}

/* Short accent rule used under centred section headings. */
.pa-divider {
    width: 80px;
    height: 3px;
    margin: 0 auto var(--pa-space-4);
    border-radius: var(--pa-radius-pill);
    background: linear-gradient(90deg, var(--pa-brand) 0%, var(--pa-brand-100) 100%);
}

/* --- Small display helpers --------------------------------------------- */

.pa-text-2xs { font-size: 0.75rem; }
.pa-text-xs  { font-size: var(--pa-text-xs); }
.pa-text-sm2 { font-size: 0.85rem; }
.pa-text-md  { font-size: var(--pa-text-md); }
.pa-text-xl  { font-size: var(--pa-text-xl); }
.pa-text-2xl { font-size: var(--pa-text-2xl); }
.pa-justify  { text-align: justify; }
.pa-stack--sm { gap: var(--pa-space-2); }

/* Narrow numeric field (cart quantity). */
.pa-input--xs { width: 5rem; }

/* Recurring tiny display patterns used across dashboard pages. */
.pa-row--start { align-items: flex-start; }
.pa-fill       { flex: 1 1 auto; }
.pa-w-search   { min-width: 16rem; }
.pa-mt-1       { margin-top: var(--pa-space-1); }
.pa-space-sm   { margin-top: var(--pa-space-3); }

.pa-text-xs { font-size: var(--pa-text-xs); }
.pa-text-sm3 { font-size: var(--pa-text-sm); }

/* Circular tinted icon used in dashboard activity list items. */
.pa-icon-circle {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--pa-radius-pill);
    background: var(--pa-brand-050);
    color: var(--pa-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pa-no-underline { text-decoration: none; }
.pa-w-auto       { width: auto; }
.pa-align-baseline { vertical-align: baseline; }
.pa-chart-box    { position: relative; height: 260px; width: 100%; }
.pa-map--wide    { height: 400px; }

/* Sidebar group heading without the default side padding. */
.pa-sidebar__group--flush { color: var(--pa-muted); padding-left: 0; }

/* Long-form copy block (product/service descriptions). */
.pa-prose {
    font-size: var(--pa-text-md);
    line-height: 1.65;
    color: var(--pa-text);
}
.pa-prose p { margin-bottom: var(--pa-space-4); }
.pa-prose p:last-child { margin-bottom: 0; }

/* Page/card hero used by the product & service detail pages. */
.pa-hero {
    padding: var(--pa-space-8) 15% 6rem;
    text-align: center;
}

/* ======================================================================
   3. LAYOUT PRIMITIVES
   ====================================================================== */

.pa-stack       { display: flex; flex-direction: column; gap: var(--pa-space-4); }
.pa-row        { display: flex; align-items: center; gap: var(--pa-space-3); flex-wrap: wrap; }
.pa-row--end   { justify-content: flex-end; }
.pa-row-between{ display: flex; align-items: center; justify-content: space-between; gap: var(--pa-space-3); flex-wrap: wrap; }
.pa-spacer     { flex: 1 1 auto; }

/* Page header band: title on the left, actions on the right. */
.pa-pagehead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--pa-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--pa-space-5);
}

/* ======================================================================
   4. CARDS & PANELS
   ====================================================================== */

.pa-card {
    background: var(--pa-surface);
    border: 1px solid var(--pa-line-soft);
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-shadow-sm);
    overflow: hidden;
}

.pa-card + .pa-card { margin-top: var(--pa-space-4); }

.pa-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pa-space-3);
    padding: var(--pa-space-4) var(--pa-space-5);
    border-bottom: 1px solid var(--pa-line-soft);
    background: var(--pa-surface);
}

.pa-card__title {
    font-size: var(--pa-text-base);
    font-weight: var(--pa-weight-semibold);
    color: var(--pa-ink);
    margin: 0;
}

.pa-card__body   { padding: var(--pa-space-5); }
.pa-card__body--tight { padding: var(--pa-space-3) var(--pa-space-4); }
.pa-card__foot {
    padding: var(--pa-space-3) var(--pa-space-5);
    border-top: 1px solid var(--pa-line-soft);
    background: var(--pa-surface-alt);
}

/* Stat tile used on all four dashboards. */
.pa-stat {
    background: var(--pa-surface);
    border: 1px solid var(--pa-line-soft);
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-shadow-sm);
    padding: var(--pa-space-5);
    display: flex;
    align-items: center;
    gap: var(--pa-space-4);
    height: 100%;
    transition: box-shadow var(--pa-transition), transform var(--pa-transition);
}

.pa-stat:hover { box-shadow: var(--pa-shadow); transform: translateY(-1px); }

.pa-stat__icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: var(--pa-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: var(--pa-brand-050);
    color: var(--pa-brand);
}

.pa-stat__label {
    font-size: var(--pa-text-xs);
    font-weight: var(--pa-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pa-muted);
    margin: 0 0 var(--pa-space-1);
}

.pa-stat__value {
    font-size: var(--pa-text-lg);
    font-weight: var(--pa-weight-bold);
    color: var(--pa-ink);
    line-height: 1.1;
    margin: 0;
}

.pa-stat__meta { font-size: var(--pa-text-xs); color: var(--pa-faint); margin: var(--pa-space-1) 0 0; }

/* Accent variants */
.pa-stat--success .pa-stat__icon { background: var(--pa-success-050); color: var(--pa-success); }
.pa-stat--warning .pa-stat__icon { background: var(--pa-warning-050); color: var(--pa-warning); }
.pa-stat--danger  .pa-stat__icon { background: var(--pa-danger-050);  color: var(--pa-danger); }
.pa-stat--info    .pa-stat__icon { background: var(--pa-info-050);    color: var(--pa-info); }

/* ======================================================================
   5. TABLES
   ====================================================================== */

.pa-table-wrap { width: 100%; overflow-x: auto; }

.pa-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--pa-text-sm);
    color: var(--pa-text);
}

.pa-table th {
    text-align: left;
    font-size: var(--pa-text-xs);
    font-weight: var(--pa-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pa-muted);
    padding: var(--pa-space-3) var(--pa-space-4);
    background: var(--pa-surface-alt);
    border-bottom: 1px solid var(--pa-line);
    white-space: nowrap;
}

.pa-table td {
    padding: var(--pa-space-3) var(--pa-space-4);
    border-bottom: 1px solid var(--pa-line-soft);
    vertical-align: middle;
}

.pa-table tbody tr:last-child td { border-bottom: 0; }
.pa-table tbody tr { transition: background var(--pa-transition); }
.pa-table tbody tr:hover { background: var(--pa-brand-050); }

/* Numeric / currency columns line up when tabular figures are available. */
.pa-table .pa-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.pa-empty {
    padding: var(--pa-space-8) var(--pa-space-5);
    text-align: center;
    color: var(--pa-muted);
}
.pa-empty i { display: block; font-size: 1.75rem; color: var(--pa-faint); margin-bottom: var(--pa-space-3); }

/* ======================================================================
   6. BUTTONS
   ====================================================================== */

.pa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pa-space-2);
    padding: 0.55rem 1.1rem;
    font-family: var(--pa-font);
    font-size: var(--pa-text-sm);
    font-weight: var(--pa-weight-semibold);
    line-height: 1.25;
    border: 1px solid transparent;
    border-radius: var(--pa-radius-sm);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--pa-transition), border-color var(--pa-transition),
                color var(--pa-transition), box-shadow var(--pa-transition);
}

.pa-btn:focus-visible { outline: 2px solid var(--pa-brand); outline-offset: 2px; }
.pa-btn[disabled], .pa-btn.is-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

.pa-btn--primary   { background: var(--pa-brand); color: #fff; }
.pa-btn--primary:hover   { background: var(--pa-brand-600); color: #fff; }

.pa-btn--secondary { background: var(--pa-surface); color: var(--pa-ink); border-color: var(--pa-line); }
.pa-btn--secondary:hover { background: var(--pa-surface-alt); border-color: var(--pa-muted); color: var(--pa-ink); }

.pa-btn--success   { background: var(--pa-success); color: #fff; }
.pa-btn--success:hover   { filter: brightness(0.93); color: #fff; }

.pa-btn--danger    { background: var(--pa-danger); color: #fff; }
.pa-btn--danger:hover    { filter: brightness(0.93); color: #fff; }

.pa-btn--ghost     { background: transparent; color: var(--pa-brand); }
.pa-btn--ghost:hover     { background: var(--pa-brand-050); color: var(--pa-brand-700); }

.pa-btn--sm  { padding: 0.35rem 0.7rem; font-size: var(--pa-text-xs); }
.pa-btn--lg  { padding: 0.75rem 1.6rem; font-size: var(--pa-text-base); }
.pa-btn--block { width: 100%; }

/* ======================================================================
   7. FORMS
   ====================================================================== */

.pa-field { margin-bottom: var(--pa-space-4); }

.pa-label {
    display: block;
    font-size: var(--pa-text-sm);
    font-weight: var(--pa-weight-semibold);
    color: var(--pa-ink);
    margin-bottom: var(--pa-space-2);
}

.pa-hint  { font-size: var(--pa-text-xs); color: var(--pa-muted); margin-top: var(--pa-space-1); }

.pa-input,
.pa-select,
.pa-textarea {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-family: var(--pa-font);
    font-size: var(--pa-text-base);
    color: var(--pa-ink);
    background: var(--pa-surface);
    border: 1px solid var(--pa-line);
    border-radius: var(--pa-radius-sm);
    transition: border-color var(--pa-transition), box-shadow var(--pa-transition);
}

.pa-input::placeholder, .pa-textarea::placeholder { color: var(--pa-faint); }

.pa-input:focus,
.pa-select:focus,
.pa-textarea:focus {
    outline: none;
    border-color: var(--pa-brand);
    box-shadow: 0 0 0 3px var(--pa-brand-100);
}

.pa-input[disabled], .pa-select[disabled], .pa-textarea[disabled] {
    background: var(--pa-surface-sunken);
    color: var(--pa-muted);
    cursor: not-allowed;
}

.pa-input.is-invalid, .pa-select.is-invalid, .pa-textarea.is-invalid {
    border-color: var(--pa-danger);
}
.pa-input.is-invalid:focus { box-shadow: 0 0 0 3px var(--pa-danger-050); }

.pa-error { font-size: var(--pa-text-xs); color: var(--pa-danger); margin-top: var(--pa-space-1); }

/* Error list inside an alert (auth pages). */
.pa-error-list { margin: 0; padding-left: 1.1rem; }

.pa-check { display: inline-flex; align-items: center; gap: var(--pa-space-2); font-size: var(--pa-text-sm); color: var(--pa-text); }

/*
 * Bootstrap 4 input groups combined with .pa-input. Bootstrap's own rules
 * target `.form-control`, so pairing it with our input class needs these to
 * keep the addon and the field visually joined.
 */
.input-group > .pa-input { flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > .pa-input:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .pa-input:not(:last-child)  { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.input-group-prepend, .input-group-append { display: flex; }

.input-group-text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    padding: 0.55rem 0.75rem;
    font-size: var(--pa-text-sm);
    font-weight: var(--pa-weight-semibold);
    color: var(--pa-muted);
    background: var(--pa-surface-alt);
    border: 1px solid var(--pa-line);
}

.input-group-prepend .input-group-text {
    border-right: 0;
    border-radius: var(--pa-radius-sm) 0 0 var(--pa-radius-sm);
}
.input-group-append .input-group-text {
    border-left: 0;
    border-radius: 0 var(--pa-radius-sm) var(--pa-radius-sm) 0;
}

/* Grid helper for form fields */
.pa-grid { display: grid; gap: var(--pa-space-4); }
.pa-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pa-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pa-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 991.98px) {
    .pa-grid--3, .pa-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .pa-grid--2, .pa-grid--3, .pa-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================================================
   8. BADGES / PILLS / ALERTS
   ====================================================================== */

.pa-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    font-size: var(--pa-text-xs);
    font-weight: var(--pa-weight-semibold);
    line-height: 1.5;
    border-radius: var(--pa-radius-pill);
    white-space: nowrap;
}

.pa-badge--neutral { background: var(--pa-surface-sunken); color: var(--pa-muted); }
.pa-badge--brand   { background: var(--pa-brand-050);    color: var(--pa-brand-700); }
.pa-badge--success { background: var(--pa-success-050);  color: #1c7c33; }
.pa-badge--warning { background: var(--pa-warning-050);  color: #8a6800; }
.pa-badge--danger  { background: var(--pa-danger-050);   color: #b3342a; }
.pa-badge--info    { background: var(--pa-info-050);     color: #0f6f7f; }

.pa-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--pa-space-3);
    padding: var(--pa-space-3) var(--pa-space-4);
    border-radius: var(--pa-radius-sm);
    font-size: var(--pa-text-sm);
    border: 1px solid transparent;
    margin-bottom: var(--pa-space-4);
}
.pa-alert--success { background: var(--pa-success-050); border-color: #bfe6c9; color: #1c7c33; }
.pa-alert--warning { background: var(--pa-warning-050); border-color: #f0dfae; color: #8a6800; }
.pa-alert--danger  { background: var(--pa-danger-050);  border-color: #f5c6c0; color: #b3342a; }
.pa-alert--info    { background: var(--pa-info-050);    border-color: #b8e2ea; color: #0f6f7f; }
.pa-alert--brand   { background: var(--pa-brand-050);   border-color: var(--pa-brand-100); color: var(--pa-brand-700); }

/* Alert that shrinks to its content and sits centred in a text block. */
.pa-alert--inline { display: inline-flex; width: auto; text-align: left; }

/* ======================================================================
   9. DASHBOARD SHELL
   ====================================================================== */

/* --- Sidebar ------------------------------------------------------- */
.pa-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--pa-sidebar-w);
    background: linear-gradient(180deg, #182430 0%, #131c26 100%);
    color: #c3ccd8;
    display: flex;
    flex-direction: column;
    z-index: 1040;
    box-shadow: 4px 0 24px rgba(16, 24, 40, 0.1);
    transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

.pa-sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--pa-space-3);
    height: var(--pa-navbar-h);
    padding: 0 var(--pa-space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex: 0 0 auto;
    text-decoration: none;
}

.pa-sidebar__brand img { height: 30px; width: auto; transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1); }
.pa-sidebar__brand:hover img { transform: rotate(-10deg) scale(1.08); }

.pa-sidebar__brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.pa-sidebar__brand-name {
    font-size: var(--pa-text-base);
    font-weight: var(--pa-weight-bold);
    color: #fff;
    letter-spacing: 0.02em;
}
.pa-sidebar__brand-role {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #7f8fa3;
}

.pa-sidebar__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--pa-space-3) 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.pa-sidebar__scroll::-webkit-scrollbar { width: 6px; }
.pa-sidebar__scroll::-webkit-scrollbar-track { background: transparent; }
.pa-sidebar__scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: var(--pa-radius-pill); }
.pa-sidebar__scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }

.pa-sidebar__group {
    padding: var(--pa-space-4) var(--pa-space-4) var(--pa-space-2);
    font-size: 0.65rem;
    font-weight: var(--pa-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #667688;
}

.pa-nav { list-style: none; margin: 0; padding: 0; }

.pa-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--pa-space-3);
    margin: 2px var(--pa-space-2);
    padding: 0.6rem var(--pa-space-2);
    border-radius: var(--pa-radius-sm);
    color: #c3ccd8;
    font-size: var(--pa-text-sm);
    font-weight: var(--pa-weight-medium);
    text-decoration: none;
    transition: background 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.pa-nav__link i { width: 18px; text-align: center; font-size: 0.95rem; flex: 0 0 auto; transition: color 200ms ease, transform 200ms ease; }
.pa-nav__link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; text-decoration: none; transform: translateX(3px); }
.pa-nav__link:hover i { transform: scale(1.12); }

.pa-nav__link.is-active {
    background: linear-gradient(135deg, rgba(1, 127, 228, 0.24), rgba(1, 127, 228, 0.08));
    color: #fff;
    font-weight: var(--pa-weight-semibold);
    box-shadow: inset 3px 0 0 0 var(--pa-brand);
}
.pa-nav__link.is-active i { color: var(--pa-brand-100); }

.pa-nav__badge {
    margin-left: auto;
    font-size: 0.65rem;
    padding: 0.1rem 0.45rem;
    border-radius: var(--pa-radius-pill);
    background: var(--pa-brand);
    color: #fff;
    transition: transform 200ms ease;
}
.pa-nav__link:hover .pa-nav__badge { transform: scale(1.08); }

/* --- Topbar -------------------------------------------------------- */
.pa-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: var(--pa-sidebar-w);
    height: var(--pa-navbar-h);
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--pa-line-soft);
    display: flex;
    align-items: center;
    gap: var(--pa-space-4);
    padding: 0 var(--pa-space-5);
    z-index: 1030;
}

.pa-topbar__toggle {
    display: none;
    background: none;
    border: 0;
    font-size: 1.1rem;
    color: var(--pa-ink);
    cursor: pointer;
    padding: var(--pa-space-2);
    border-radius: var(--pa-radius-sm);
    transition: background var(--pa-transition), transform var(--pa-transition);
}
.pa-topbar__toggle:hover { background: var(--pa-surface-alt); transform: scale(1.06); }

.pa-topbar__title {
    font-size: var(--pa-text-base);
    font-weight: var(--pa-weight-semibold);
    color: var(--pa-ink);
    margin: 0;
}

.pa-topbar__user {
    display: inline-flex;
    align-items: center;
    gap: var(--pa-space-2);
    font-size: var(--pa-text-sm);
    font-weight: var(--pa-weight-medium);
    color: var(--pa-ink);
    text-decoration: none;
    padding: var(--pa-space-2) var(--pa-space-3);
    border-radius: var(--pa-radius-sm);
    transition: background var(--pa-transition), color var(--pa-transition);
}
.pa-topbar__user:hover { background: var(--pa-surface-alt); color: var(--pa-ink); text-decoration: none; }
.pa-topbar__user:hover .pa-avatar { box-shadow: 0 0 0 3px var(--pa-brand-050); }

.pa-avatar {
    width: 30px;
    height: 30px;
    border-radius: var(--pa-radius-pill);
    background: var(--pa-brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--pa-text-xs);
    font-weight: var(--pa-weight-bold);
    flex: 0 0 auto;
    transition: box-shadow 200ms ease;
}

.pa-topbar .dropdown-menu {
    border: 1px solid var(--pa-line-soft);
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-shadow-lg);
    padding: var(--pa-space-2);
    margin-top: var(--pa-space-2);
    font-family: var(--pa-font);
    animation: pa-dropdown-in 160ms ease;
}
.pa-topbar .dropdown-header { font-size: var(--pa-text-xs); color: var(--pa-muted); padding: 0.35rem 0.65rem; }
.pa-topbar .dropdown-divider { margin: var(--pa-space-2) 0; border-color: var(--pa-line-soft); }
.pa-topbar .dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.65rem;
    border-radius: var(--pa-radius-sm);
    font-size: var(--pa-text-sm);
    color: var(--pa-text);
    transition: background var(--pa-transition), color var(--pa-transition);
}
.pa-topbar .dropdown-item:hover, .pa-topbar .dropdown-item:focus { background: var(--pa-surface-alt); color: var(--pa-ink); }
.pa-topbar .dropdown-item i { color: var(--pa-muted); }

@keyframes pa-dropdown-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Content area -------------------------------------------------- */
.pa-shell { min-height: 100vh; background: var(--pa-surface-alt); }

.pa-main {
    margin-left: var(--pa-sidebar-w);
    padding-top: var(--pa-navbar-h);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.pa-content {
    flex: 1 1 auto;
    width: 100%;
    max-width: var(--pa-content-max);
    margin: 0 auto;
    padding: var(--pa-space-6) var(--pa-space-5);
}

.pa-footer {
    padding: var(--pa-space-4) var(--pa-space-5);
    border-top: 1px solid var(--pa-line-soft);
    background: var(--pa-surface);
    font-size: var(--pa-text-xs);
    color: var(--pa-muted);
}

/* Dimmer behind the mobile sidebar */
.pa-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, 0.45);
    z-index: 1035;
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.pa-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity 220ms ease, visibility 0s linear 0s; }

/* --- Responsive ---------------------------------------------------- */
@media (max-width: 991.98px) {
    .pa-sidebar { transform: translateX(-100%); box-shadow: var(--pa-shadow-lg); }
    .pa-sidebar.is-open { transform: translateX(0); }

    .pa-topbar { left: 0; }
    .pa-topbar__toggle { display: inline-flex; }
    .pa-main { margin-left: 0; }
    .pa-content { padding: var(--pa-space-5) var(--pa-space-4); }
}

/* ======================================================================
   10. PUBLIC / MARKETING SITE HELPERS
   ====================================================================== */

/* Applied on <body> of the public layout to scope overrides to BeTheme. */
.pa-public { font-family: var(--pa-font); color: var(--pa-text); }

/* A theme section that keeps BeTheme's banding but uses our rhythm. */
.pa-band { padding: var(--pa-space-7) 0; }
.pa-band--alt { background: var(--pa-surface-alt); }
.pa-band--brand { background: var(--pa-brand); color: #fff; }
.pa-band--ink { background: #16202c; color: #c3ccd8; }

.pa-band__title {
    font-size: var(--pa-text-xl);
    font-weight: var(--pa-weight-bold);
    color: var(--pa-ink);
    text-align: center;
    margin: 0 0 var(--pa-space-2);
}
.pa-band--brand .pa-band__title, .pa-band--ink .pa-band__title { color: #fff; }

.pa-band__lead {
    font-size: var(--pa-text-base);
    color: var(--pa-muted);
    text-align: center;
    max-width: 46rem;
    margin: 0 auto var(--pa-space-5);
}
.pa-band--brand .pa-band__lead, .pa-band--ink .pa-band__lead { color: rgba(255, 255, 255, 0.82); }

/* The five-Pool chain, reused on the home page and every Pool page. */
.pa-pools {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--pa-space-4);
}

@media (max-width: 991.98px) { .pa-pools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .pa-pools { grid-template-columns: minmax(0, 1fr); } }

.pa-pool {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--pa-space-5) var(--pa-space-4);
    background: var(--pa-surface);
    border: 1px solid var(--pa-line-soft);
    border-top: 3px solid var(--pa-brand);
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--pa-transition), transform var(--pa-transition);
}

.pa-pool:hover {
    box-shadow: var(--pa-shadow-lg);
    transform: translateY(-3px);
    text-decoration: none;
    color: inherit;
}

.pa-pool__step {
    font-size: var(--pa-text-xs);
    font-weight: var(--pa-weight-bold);
    letter-spacing: 0.1em;
    color: var(--pa-faint);
    margin-bottom: var(--pa-space-2);
}

.pa-pool__name {
    font-size: var(--pa-text-md);
    font-weight: var(--pa-weight-bold);
    color: var(--pa-brand);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 var(--pa-space-1);
}

.pa-pool__tag {
    font-size: var(--pa-text-sm);
    font-weight: var(--pa-weight-semibold);
    color: var(--pa-ink);
    margin: 0 0 var(--pa-space-2);
}

.pa-pool__desc { font-size: var(--pa-text-sm); color: var(--pa-muted); margin: 0; }

/* Generic marketing card (partners, economy, market, environment). */
.pa-tile {
    height: 100%;
    padding: var(--pa-space-5);
    background: var(--pa-surface);
    border: 1px solid var(--pa-line-soft);
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-shadow-sm);
    transition: box-shadow var(--pa-transition), transform var(--pa-transition);
}
.pa-tile:hover { box-shadow: var(--pa-shadow); transform: translateY(-2px); }

.pa-tile__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--pa-radius);
    background: var(--pa-brand-050);
    color: var(--pa-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: var(--pa-space-4);
}

.pa-tile__title {
    font-size: var(--pa-text-md);
    font-weight: var(--pa-weight-semibold);
    color: var(--pa-ink);
    margin: 0 0 var(--pa-space-2);
}
.pa-tile__text { font-size: var(--pa-text-sm); color: var(--pa-muted); margin: 0; }

/* Call-to-action strip */
.pa-cta {
    padding: var(--pa-space-7) var(--pa-space-5);
    text-align: center;
    border-radius: var(--pa-radius-lg);
    background: var(--pa-brand);
    color: #fff;
}
.pa-cta__title { font-size: var(--pa-text-xl); font-weight: var(--pa-weight-bold); margin: 0 0 var(--pa-space-2); }
.pa-cta__text  { font-size: var(--pa-text-base); color: rgba(255, 255, 255, 0.9); margin: 0 auto var(--pa-space-5); max-width: 42rem; }
.pa-cta .pa-btn--secondary { background: #fff; color: var(--pa-brand-700); border-color: #fff; }

/* Striped "process chain" used for WASTE → RESOURCE → VALUE. */
.pa-chain {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--pa-space-2);
    font-size: var(--pa-text-sm);
    font-weight: var(--pa-weight-semibold);
    color: var(--pa-ink);
}
.pa-chain__sep { color: var(--pa-brand); font-weight: var(--pa-weight-bold); }
.pa-chain__item {
    padding: 0.3rem 0.75rem;
    background: var(--pa-brand-050);
    border-radius: var(--pa-radius-pill);
    color: var(--pa-brand-700);
}

/* ======================================================================
   10b. PUBLIC NAVBAR & FOOTER
   ====================================================================== */

.pa-topnav {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--pa-surface);
    border-bottom: 1px solid transparent;
    font-family: var(--pa-font);
    transition: box-shadow var(--pa-transition), border-color var(--pa-transition), background var(--pa-transition);
}
.pa-topnav.is-scrolled {
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-color: var(--pa-line-soft);
    box-shadow: var(--pa-shadow-sm);
}

.pa-topnav__inner {
    max-width: var(--pa-content-max);
    margin: 0 auto;
    padding: 0 var(--pa-space-5);
    height: 68px;
    display: flex;
    align-items: center;
    gap: var(--pa-space-6);
}

.pa-topnav__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--pa-space-2);
    text-decoration: none;
    color: var(--pa-ink);
    font-weight: var(--pa-weight-bold);
    font-size: var(--pa-text-md);
    flex: 0 0 auto;
}
.pa-topnav__brand img { height: 32px; width: auto; transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1); }
.pa-topnav__brand:hover { color: var(--pa-ink); text-decoration: none; }
.pa-topnav__brand:hover img { transform: rotate(-10deg) scale(1.06); }

.pa-topnav__nav {
    display: flex;
    align-items: center;
    gap: var(--pa-space-1);
    flex: 1 1 auto;
}

.pa-topnav .pa-topnav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    background: transparent;
    border-radius: var(--pa-radius-sm);
    font-family: var(--pa-font);
    font-size: var(--pa-text-sm);
    font-weight: var(--pa-weight-medium);
    color: var(--pa-text);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--pa-transition), color var(--pa-transition), transform var(--pa-transition);
}
.pa-topnav .pa-topnav__link:hover { background: var(--pa-brand-050); color: var(--pa-brand-700); text-decoration: none; transform: translateY(-1px); }
.pa-topnav .pa-topnav__link.is-active { background: var(--pa-brand-050); color: var(--pa-brand); font-weight: var(--pa-weight-semibold); box-shadow: inset 0 -2px 0 0 var(--pa-brand); }
.pa-topnav .pa-topnav__link i { font-size: 0.7rem; opacity: 0.7; transition: transform var(--pa-transition); }

.pa-topnav__dropdown { position: relative; }
.pa-topnav__dropdown.is-open .pa-topnav__dropdown-toggle i { transform: rotate(180deg); }
.pa-topnav__dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 220px;
    padding: var(--pa-space-2);
    background: var(--pa-surface);
    border: 1px solid var(--pa-line-soft);
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}
.pa-topnav__dropdown.is-open .pa-topnav__dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 0s;
}
.pa-topnav__dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--pa-radius-sm);
    font-size: var(--pa-text-sm);
    font-weight: var(--pa-weight-medium);
    color: var(--pa-text);
    text-decoration: none;
    transition: background var(--pa-transition), color var(--pa-transition), padding-left var(--pa-transition);
}
.pa-topnav__dropdown-menu a:hover { background: var(--pa-surface-alt); color: var(--pa-ink); text-decoration: none; padding-left: 0.85rem; }
.pa-topnav__dropdown-menu a i {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--pa-radius-sm);
    background: var(--pool-color, var(--pa-brand));
    color: #fff;
    font-size: 0.7rem;
}

.pa-topnav__actions {
    display: flex;
    align-items: center;
    gap: var(--pa-space-3);
    flex: 0 0 auto;
}

.pa-topnav .pa-topnav__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    width: 38px;
    height: 38px;
    border: 1px solid var(--pa-line);
    border-radius: var(--pa-radius-sm);
    background: var(--pa-surface);
    color: var(--pa-ink);
    cursor: pointer;
    transition: background var(--pa-transition), border-color var(--pa-transition);
}
.pa-topnav .pa-topnav__toggle:hover { background: var(--pa-surface-alt); }
.pa-topnav__toggle-bar {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--pa-ink);
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms ease;
}
.pa-topnav__toggle[aria-expanded="true"] .pa-topnav__toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.pa-topnav__toggle[aria-expanded="true"] .pa-topnav__toggle-bar:nth-child(2) { opacity: 0; }
.pa-topnav__toggle[aria-expanded="true"] .pa-topnav__toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.pa-topnav__mobile {
    display: grid;
    grid-template-rows: 0fr;
    border-top: 1px solid transparent;
    transition: grid-template-rows 240ms cubic-bezier(0.4, 0, 0.2, 1), border-color 240ms ease;
}
.pa-topnav__mobile.is-open { grid-template-rows: 1fr; border-top-color: var(--pa-line-soft); }
.pa-topnav__mobile-inner {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 var(--pa-space-5);
    transition: padding 240ms ease;
}
.pa-topnav__mobile.is-open .pa-topnav__mobile-inner { padding: var(--pa-space-3) var(--pa-space-5) var(--pa-space-5); }
.pa-topnav__mobile-link, .pa-topnav__mobile-sublink {
    padding: 0.65rem 0.5rem;
    font-size: var(--pa-text-base);
    font-weight: var(--pa-weight-medium);
    color: var(--pa-text);
    text-decoration: none;
    border-radius: var(--pa-radius-sm);
    transition: background var(--pa-transition), color var(--pa-transition), padding-left var(--pa-transition);
}
.pa-topnav__mobile-sublink { padding-left: var(--pa-space-5); font-size: var(--pa-text-sm); color: var(--pa-muted); }
.pa-topnav__mobile-link:hover, .pa-topnav__mobile-sublink:hover { background: var(--pa-surface-alt); color: var(--pa-ink); text-decoration: none; padding-left: 0.75rem; }
.pa-topnav__mobile-link.is-active { color: var(--pa-brand); background: var(--pa-brand-050); }
.pa-topnav__mobile-actions { display: flex; flex-direction: column; gap: var(--pa-space-2); margin-top: var(--pa-space-4); }

@media (max-width: 991.98px) {
    .pa-topnav .pa-topnav__nav { display: none; }
    .pa-topnav .pa-topnav__toggle { display: inline-flex; }
    .pa-topnav__inner { padding: 0 var(--pa-space-4); gap: var(--pa-space-3); }
    .pa-topnav__actions { gap: var(--pa-space-2); }
    .pa-topnav__actions > a { display: none; }
}

.pa-pubfooter {
    background: var(--pa-surface-alt);
    border-top: 1px solid var(--pa-line-soft);
    font-family: var(--pa-font);
    color: var(--pa-text);
}

.pa-pubfooter__inner {
    max-width: var(--pa-content-max);
    margin: 0 auto;
    padding: var(--pa-space-8) var(--pa-space-5) var(--pa-space-6);
}

.pa-pubfooter__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--pa-space-6);
}

.pa-pubfooter__logo { height: 40px; width: auto; margin-bottom: var(--pa-space-3); }
.pa-pubfooter__tagline { font-size: var(--pa-text-sm); color: var(--pa-muted); margin: 0 0 var(--pa-space-3); max-width: 32rem; }
.pa-pubfooter__readmore { font-size: var(--pa-text-sm); font-weight: var(--pa-weight-semibold); color: var(--pa-brand); text-decoration: none; }
.pa-pubfooter__readmore:hover { color: var(--pa-brand-700); text-decoration: none; }

.pa-pubfooter__heading {
    font-size: var(--pa-text-xs);
    font-weight: var(--pa-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pa-faint);
    margin: 0 0 var(--pa-space-3);
}

.pa-pubfooter__col { display: flex; flex-direction: column; gap: var(--pa-space-2); }
.pa-pubfooter__col a { font-size: var(--pa-text-sm); color: var(--pa-text); text-decoration: none; }
.pa-pubfooter__col a:hover { color: var(--pa-brand); text-decoration: none; }

.pa-pubfooter__bottom { border-top: 1px solid var(--pa-line-soft); }
.pa-pubfooter__bottom-inner {
    max-width: var(--pa-content-max);
    margin: 0 auto;
    padding: var(--pa-space-4) var(--pa-space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pa-space-4);
    flex-wrap: wrap;
    font-size: var(--pa-text-xs);
    color: var(--pa-faint);
}

.pa-pubfooter__portals { display: flex; align-items: center; gap: var(--pa-space-2); }
.pa-pubfooter__portals a { color: var(--pa-faint); text-decoration: none; }
.pa-pubfooter__portals a:hover { color: var(--pa-brand); text-decoration: none; }

.pa-pubfooter .pa-pubfooter__totop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--pa-line);
    border-radius: var(--pa-radius-pill);
    background: var(--pa-surface);
    color: var(--pa-muted);
    cursor: pointer;
}
.pa-pubfooter .pa-pubfooter__totop:hover { color: var(--pa-brand); border-color: var(--pa-brand); }

@media (max-width: 767.98px) {
    .pa-pubfooter__grid { grid-template-columns: 1fr 1fr; }
    .pa-pubfooter__brand { grid-column: 1 / -1; }
}

/* ======================================================================
   11. AUTH (GUEST) PAGES
   ====================================================================== */

.pa-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pa-space-6) var(--pa-space-4);
    background: var(--pa-surface-sunken);
    font-family: var(--pa-font);
}

.pa-auth__card {
    width: 100%;
    max-width: 26rem;
    background: var(--pa-surface);
    border-radius: var(--pa-radius-lg);
    box-shadow: var(--pa-shadow-lg);
    padding: var(--pa-space-6);
}

.pa-auth__logo { display: block; text-align: center; margin-bottom: var(--pa-space-4); }
.pa-auth__logo img { height: 54px; width: auto; }

.pa-auth__title {
    font-size: var(--pa-text-lg);
    font-weight: var(--pa-weight-bold);
    color: var(--pa-ink);
    text-align: center;
    margin: 0 0 var(--pa-space-1);
}

.pa-auth__sub {
    font-size: var(--pa-text-sm);
    color: var(--pa-muted);
    text-align: center;
    margin: 0 0 var(--pa-space-5);
}

.pa-auth__meta {
    margin-top: var(--pa-space-5);
    padding-top: var(--pa-space-4);
    border-top: 1px solid var(--pa-line-soft);
    font-size: var(--pa-text-sm);
    color: var(--pa-muted);
    text-align: center;
}
.pa-auth__meta a { color: var(--pa-brand); font-weight: var(--pa-weight-semibold); }