/* ============================================================
   Public site (ngodesk.net) — shared stylesheet
   Palette matches the DMS brand (see wwwroot/css/public.css)
   ============================================================ */
:root {
    --brand: #534AB7;
    --brand-dark: #3C3489;
    --brand-deep: #26215C;
    --ink: #111827;
    --muted: #6b7280;
    --line: #ece9f7;
    --field: #faf9ff;
    --ok: #16a34a;
    --danger: #ef4444;
    --wa: #25d366;
    --fb: #1877f2;
    --tw: #111111;
    --li: #0a66c2;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "DM Sans", system-ui, -apple-system, sans-serif;
    color: var(--ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: "Poppins", sans-serif; margin: 0 0 .5rem; }
a { color: var(--brand-dark); text-decoration: none; }
img { max-width: 100%; }

.ps-container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ---------- Header / nav ---------- */
.ps-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.ps-nav { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.ps-logo { display: flex; align-items: center; gap: 10px; font-family: "Poppins",sans-serif; font-weight: 800; font-size: 1.25rem; color: var(--brand-deep); }
.ps-logo img { height: 34px; width: 34px; object-fit: contain; }
.ps-logo em { font-style: normal; color: var(--brand); }
.ps-logo.footer { color: #fff; }
.ps-logo.footer em { color: #b9b2f2; }

.ps-menu { display: flex; align-items: center; gap: 26px; }
.ps-menu > a, .ps-drop-toggle {
    font-weight: 500; color: var(--ink); padding: 8px 0;
}
.ps-menu > a:hover, .ps-drop-toggle:hover { color: var(--brand); }

.ps-track-link { display: inline-flex; align-items: center; gap: 7px; }
.ps-track-link i { color: var(--brand); font-size: .85rem; }

.ps-login {
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #fff !important; padding: 8px 20px 8px 8px !important; border-radius: 999px;
    font-weight: 600; box-shadow: 0 4px 14px rgba(83,74,183,.35);
    transition: transform .2s ease, box-shadow .2s ease;
    animation: psLoginGlow 2.8s ease-in-out infinite;
}
.ps-login .ic {
    width: 25px; height: 25px; flex: 0 0 25px; border-radius: 50%;
    background: rgba(255,255,255,.22); display: inline-flex; align-items: center; justify-content: center;
    font-size: .74rem;
}
.ps-login::after {
    content: ""; position: absolute; inset: -5px; border-radius: 999px;
    border: 2px solid rgba(148,163,255,.55); animation: psLoginPulse 2.6s ease-in-out infinite;
    pointer-events: none;
}
.ps-login:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 26px rgba(83,74,183,.5); }
@keyframes psLoginGlow {
    0%, 100% { box-shadow: 0 4px 14px rgba(83,74,183,.35); }
    50% { box-shadow: 0 6px 22px rgba(94,84,200,.6); }
}
@keyframes psLoginPulse {
    0%, 100% { transform: scale(1); opacity: .6; }
    50% { transform: scale(1.1); opacity: 0; }
}

.ps-auth-actions { display: inline-flex; align-items: center; gap: 10px; }

.ps-logout {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #e9e6fb;
    padding: 8px 18px !important;
    border-radius: 999px;
    font-weight: 600;
    border: 1.5px solid var(--line);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ps-logout i { font-size: .85rem; }
.ps-logout { background: var(--field); border-color: var(--brand); color: var(--brand) !important; }

.ps-burger { display: none; background: none; border: none; font-size: 1.4rem; color: var(--brand-deep); cursor: pointer; }

/* Fancy blue circle accent, right before the Login button */
.ps-menu > a.ps-nav-circle {
    width: 38px; height: 38px; padding: 0; flex: 0 0 38px;
    border-radius: 50%; position: relative;
    background: linear-gradient(135deg, #60a5fa, #2563eb);
    color: #fff !important; display: inline-flex; align-items: center; justify-content: center;
    font-size: .95rem; box-shadow: 0 6px 16px rgba(37,99,235,.45);
    transition: transform .18s, box-shadow .18s;
}
.ps-menu > a.ps-nav-circle::after {
    content: ""; position: absolute; inset: -5px; border-radius: 50%;
    border: 2px solid rgba(96,165,250,.5); animation: psNavPulse 2.4s ease-in-out infinite;
    pointer-events: none;
}
.ps-menu > a.ps-nav-circle:hover { transform: scale(1.1); box-shadow: 0 8px 20px rgba(37,99,235,.55); }
@keyframes psNavPulse {
    0%, 100% { transform: scale(1); opacity: .7; }
    50% { transform: scale(1.22); opacity: 0; }
}
@media (max-width: 860px) {
    .ps-menu > a.ps-nav-circle { margin: 14px auto 0; }
}

/* dropdown */
.ps-dropdown { position: relative; }
.ps-drop-toggle i { font-size: .7rem; margin-left: 3px; }
.ps-drop-panel {
    position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 14px 40px rgba(38,33,92,.14);
    min-width: 210px; padding: 8px; display: none;
}
.ps-dropdown:hover .ps-drop-panel, .ps-dropdown.open .ps-drop-panel { display: block; }
.ps-drop-panel a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px; font-weight: 500; color: var(--ink);
}
.ps-drop-panel a:hover { background: var(--field); color: var(--brand); }
.ps-drop-panel i { color: var(--brand); width: 18px; text-align: center; }

@media (max-width: 860px) {
    .ps-burger { display: block; }
    .ps-menu {
        display: none; position: absolute; top: 66px; left: 0; right: 0;
        background: #fff; border-bottom: 1px solid var(--line);
        flex-direction: column; align-items: stretch; gap: 0; padding: 10px 20px 20px;
    }
    .ps-menu.open { display: flex; }
    .ps-menu > a, .ps-drop-toggle { padding: 12px 4px; border-bottom: 1px solid var(--line); display: block; }
    .ps-drop-panel { position: static; transform: none; box-shadow: none; border: none; display: none; padding-left: 14px; }
    .ps-login { margin-top: 14px; text-align: center; border-radius: 12px; }
    .ps-auth-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 14px; }
    .ps-auth-actions .ps-login { margin-top: 0; }
    .ps-logout { justify-content: center; border-radius: 12px; padding: 10px !important; }
}

/* ---------- Hero ---------- */
.ps-hero {
    background-image: url('/images/hero-bg/hero-pattern.svg');
    background-size: cover; background-position: center; background-repeat: no-repeat;
    background-color: var(--brand-dark);
    color: #fff; padding: 84px 0 96px; text-align: center; position: relative; overflow: hidden;
}
.ps-hero::after {
    content: ""; position: absolute; inset: auto -10% -60% -10%; height: 70%;
    background: rgba(255,255,255,.06); border-radius: 50% 50% 0 0;
}
.ps-hero h1 { position: relative; z-index: 1; font-size: clamp(1.9rem, 4.5vw, 3.1rem); font-weight: 800; margin-bottom: .8rem; }
.ps-hero p { position: relative; z-index: 1; max-width: 700px; margin: 0 auto 2rem; font-size: 1.12rem; color: #ded9ff; }
.ps-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }

/* large low-opacity icon watermark, unique per page — placed as the first child of .ps-hero */
.ps-hero-icon {
    position: absolute; z-index: 0; pointer-events: none;
    right: -30px; bottom: -50px; font-size: 260px; line-height: 1;
    color: rgba(255,255,255,.09); transform: rotate(-8deg);
}
@media (max-width: 700px) { .ps-hero-icon { font-size: 160px; right: -20px; bottom: -30px; } }

.ps-btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 26px; border-radius: 999px; font-weight: 600; font-size: 1rem;
    border: none; cursor: pointer; transition: .15s;
}
.ps-btn.primary { background: #fff; color: var(--brand-deep); }
.ps-btn.primary:hover { transform: translateY(-2px); }
.ps-btn.ghost { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.ps-btn.ghost:hover { background: rgba(255,255,255,.22); }
.ps-btn.brand { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; box-shadow: 0 6px 18px rgba(83,74,183,.35); }
.ps-btn.brand:hover { filter: brightness(1.07); }

/* ---------- Stats strip ---------- */
.ps-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: -46px auto 0; position: relative; z-index: 2; }
.ps-stat {
    background: #fff; border: 1px solid var(--line); border-radius: 18px;
    padding: 22px; text-align: center; box-shadow: 0 12px 34px rgba(38,33,92,.10);
}
.ps-stat b { display: block; font-family: "Poppins",sans-serif; font-size: 1.7rem; color: var(--brand-deep); }
.ps-stat span { color: var(--muted); font-size: .95rem; }
@media (max-width: 700px) { .ps-stats { grid-template-columns: 1fr; } }

/* ---------- Sections ---------- */
.ps-section { padding: 64px 0; }
.ps-section.alt { background: var(--field); }
.ps-section-head { text-align: center; margin-bottom: 38px; }
.ps-section-head h2 { font-size: 1.9rem; color: var(--brand-deep); }
.ps-section-head p { color: var(--muted); max-width: 560px; margin: 0 auto; }

/* ---------- Campaign cards ---------- */
.ps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 980px) { .ps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ps-grid { grid-template-columns: 1fr; } }

.ps-card {
    background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
    display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s, border-color .18s;
    box-shadow: 0 2px 10px -6px rgba(38,33,92,.10);
}
.ps-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -12px rgba(38,33,92,.18); border-color: transparent; }
.ps-card-img { height: 180px; background: linear-gradient(135deg, var(--brand), var(--brand-deep)); position: relative; overflow: hidden; }
.ps-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.ps-card:hover .ps-card-img img { transform: scale(1.05); }
.ps-card-img .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.75); font-size: 2.2rem; }
.ps-card-tag {
    position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.94); backdrop-filter: blur(3px);
    color: var(--brand-dark); font-size: .74rem; font-weight: 700; padding: 5px 12px; border-radius: 999px;
    box-shadow: 0 4px 10px -4px rgba(0,0,0,.2);
}
.ps-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.ps-card-body h3 { font-size: 1.08rem; line-height: 1.35; letter-spacing: -.1px; }
.ps-card-ngo { color: var(--muted); font-size: .85rem; margin-bottom: 10px; }
.ps-card-ngo i { color: var(--brand); margin-right: 5px; }
.ps-card-desc { color: var(--muted); font-size: .92rem; line-height: 1.55; margin: 0 0 16px; flex: 1; }

.ps-progress { height: 7px; background: var(--field); border-radius: 999px; overflow: hidden; }
.ps-progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-dark)); border-radius: 999px; }
.ps-amounts { display: flex; justify-content: space-between; font-size: .85rem; margin-top: 9px; color: var(--muted); }
.ps-amounts b { color: var(--brand-deep); font-weight: 700; }

.ps-card-link {
    margin-top: 16px; text-align: center; padding: 11px; border-radius: 12px;
    background: var(--field); color: var(--brand-dark); font-weight: 600; border: 1px solid var(--line);
    transition: background .15s, color .15s, transform .15s;
}
.ps-card-link:hover { background: var(--brand); color: #fff; transform: translateY(-1px); }

/* ---------- NGO directory cards ---------- */
.ps-ngo-grid { gap: 30px; }
.ps-ngo-card {
    background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 0 0 22px;
    text-align: center; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    overflow: hidden;
}
.ps-ngo-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(38,33,92,.16); border-color: transparent; }

/* Colored banner (the NGO's own brand color) with a "Verified" trust badge —
   replaces the old plain centered logo so cards read like a real profile card. */
.ps-ngo-cover { height: 76px; position: relative; }
.ps-ngo-verified {
    position: absolute; top: 10px; right: 10px;
    background: rgba(255,255,255,.95); backdrop-filter: blur(3px);
    color: #059669; font-size: .68rem; font-weight: 700; padding: 4px 10px 4px 8px;
    border-radius: 999px; display: inline-flex; align-items: center; gap: 4px;
    box-shadow: 0 4px 10px -4px rgba(0,0,0,.25);
}
.ps-ngo-verified i { font-size: .72rem; }

/* Logo overlaps the bottom edge of the banner, profile-card style. object-fit:
   contain (not cover) + padding so non-square/off-center uploaded logos never
   get cropped into an unrecognizable circle — they sit centered on white instead. */
.ps-ngo-logo {
    width: 78px; height: 78px; border-radius: 50%; margin: -39px auto 12px;
    background: #fff; border: 4px solid #fff; box-shadow: 0 0 0 1px var(--line), 0 12px 26px -6px rgba(38,33,92,.2);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative; z-index: 1;
}
.ps-ngo-logo img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }
.ps-ngo-logo span {
    width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-family: "Poppins",sans-serif; font-weight: 700; font-size: 1.5rem;
}
.ps-ngo-card h3 { font-size: 1.08rem; padding: 0 20px; margin-bottom: 4px; }
.ps-ngo-card .addr {
    color: var(--muted); font-size: .84rem; padding: 0 20px; min-height: 1.3em;
    display: flex; align-items: center; justify-content: center; gap: 5px;
}
.ps-ngo-card .addr i { color: var(--brand); font-size: .74rem; }
.ps-ngo-card .count {
    display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 16px;
    background: var(--field); border: 1px solid var(--line); color: var(--brand-dark);
    font-size: .8rem; font-weight: 600; padding: 5px 13px; border-radius: 999px;
}
.ps-ngo-card .count i { font-size: .72rem; }
.ps-ngo-cta.ps-btn { margin: 0 20px 14px; width: calc(100% - 40px); justify-content: center; }
.ps-ngo-links { display: flex; justify-content: center; gap: 6px; padding: 0 16px; flex-wrap: wrap; }
.ps-ngo-links a {
    flex: 1; min-width: 70px; font-size: .74rem; font-weight: 600; color: var(--brand-dark);
    background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 9px 6px;
    display: flex; flex-direction: column; align-items: center; gap: 4px; transition: .15s;
}
.ps-ngo-links a:hover { background: var(--brand); color: #fff; border-color: transparent; }
.ps-ngo-links a i { font-size: .82rem; }

/* ---------- Campaign detail page ---------- */
.ps-detail-hero { background: var(--field); border-bottom: 1px solid var(--line); padding: 40px 0; }
.ps-crumb { font-size: .87rem; color: var(--muted); margin-bottom: 12px; }
.ps-crumb a { color: var(--brand); }
.ps-detail-hero h1 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); color: var(--brand-deep); }
.ps-detail-meta { display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: .92rem; margin-top: 6px; }
.ps-detail-meta i { color: var(--brand); margin-right: 6px; }

.ps-detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 34px; padding: 44px 0; align-items: start; }
@media (max-width: 900px) { .ps-detail-grid { grid-template-columns: 1fr; } }

.ps-gallery-main { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(135deg, var(--brand), var(--brand-deep)); min-height: 280px; display:flex; align-items:center; justify-content:center; }
.ps-gallery-main img { width: 100%; max-height: 440px; object-fit: cover; display: block; }
.ps-gallery-main .ph { color: rgba(255,255,255,.75); font-size: 3rem; }
.ps-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.ps-thumbs img { width: 84px; height: 62px; object-fit: cover; border-radius: 10px; border: 2px solid var(--line); cursor: pointer; }
.ps-thumbs img.active { border-color: var(--brand); }

.ps-desc { margin-top: 26px; line-height: 1.7; color: #374151; white-space: pre-line; }

.ps-side { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px; box-shadow: 0 10px 30px rgba(38,33,92,.07); position: sticky; top: 86px; }
.ps-side .raised { font-family: "Poppins",sans-serif; font-size: 1.6rem; color: var(--brand-deep); font-weight: 700; }
.ps-side .of { color: var(--muted); font-size: .95rem; margin-bottom: 14px; }

/* ---------- Share buttons ---------- */
.ps-share { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; }
.ps-share h4 { font-size: .95rem; color: var(--muted); font-weight: 600; }
.ps-share-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ps-share-btn {
    width: 44px; height: 44px; border-radius: 12px; display: inline-flex;
    align-items: center; justify-content: center; color: #fff !important; font-size: 1.15rem;
    transition: .15s; border: none; cursor: pointer;
}
.ps-share-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.ps-share-btn.wa { background: var(--wa); }
.ps-share-btn.fb { background: var(--fb); }
.ps-share-btn.tw { background: var(--tw); }
.ps-share-btn.li { background: var(--li); }
.ps-share-btn.copy { background: var(--field); color: var(--brand-dark) !important; border: 1px solid var(--line); }
.ps-copy-note { font-size: .82rem; color: var(--ok); display: none; margin-top: 8px; }

/* ---------- Forms (Register NGO) ---------- */
.ps-form-wrap { max-width: 620px; margin: 0 auto; }
.ps-form-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 32px; box-shadow: 0 12px 34px rgba(38,33,92,.08); }
.ps-field { margin-bottom: 18px; }
.ps-field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .95rem; }
.ps-field label .star { color: var(--danger); }
.ps-field input, .ps-field textarea {
    width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--field); font: inherit; outline: none;
}
.ps-field input:focus, .ps-field textarea:focus { border-color: var(--brand); background: #fff; }
.ps-field input.input-validation-error, .ps-field textarea.input-validation-error { border-color: #f2a3a3; background: #fff; }
.ps-field input.input-validation-error:focus, .ps-field textarea.input-validation-error:focus {
    border-color: var(--danger); box-shadow: 0 0 0 3px rgba(239,68,68,.14); animation: psShake .32s ease;
}
.ps-error, .field-validation-error {
    color: var(--danger); font-size: .84rem; font-weight: 500; margin-top: 4px; display: block;
    animation: psFadeIn .15s ease;
}
.ps-error:empty, .field-validation-error:empty { display: none; }
.ps-error::before, .field-validation-error::before {
    content: "\f06a"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .78rem; margin-right: 5px;
}
.validation-summary-errors {
    display: block; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px;
    padding: 12px 16px; margin-bottom: 16px; color: #b91c1c; font-size: .84rem; animation: psFadeIn .2s ease;
}

/* ── CAPTCHA (RegisterNgo — donor/volunteer forms style this in public.css
   using the same class names) ── */
.captcha-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.captcha-img { height: 48px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); display: block; }
.captcha-refresh {
    width: 38px; height: 38px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); background: #fff; color: #6b7280; border-radius: 10px; cursor: pointer; transition: .15s;
}
.captcha-refresh:hover { background: var(--field); color: var(--brand); border-color: var(--brand); }
.captcha-refresh.spin i { animation: captchaSpin .5s ease; }
.captcha-input { flex: 1; min-width: 140px; }
@keyframes captchaSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── Password show/hide ── */
.pw-field { position: relative; }
.pw-field input { padding-right: 38px; }
.pw-eye-btn {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #9ca3af; cursor: pointer;
    padding: 2px; font-size: 14px; transition: color .15s;
}
.pw-eye-btn:hover { color: var(--brand); }
.validation-summary-errors::before { content: "\f06a"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 7px; }
.validation-summary-errors ul { margin: 6px 0 0; padding-left: 18px; }
.validation-summary-errors li { margin: 3px 0; }
.validation-summary-valid { display: none; }

@keyframes psFadeIn {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes psShake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-3px); }
    40%, 60% { transform: translateX(3px); }
}

.ps-success {
    text-align: center; background: #fff; border: 1px solid var(--line);
    border-radius: 18px; padding: 44px 30px; box-shadow: 0 12px 34px rgba(38,33,92,.08);
}
.ps-success .tick {
    width: 64px; height: 64px; border-radius: 50%; background: var(--ok); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto 16px;
}

/* ---------- Register chooser ---------- */
.ps-choose { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1020px; margin: 0 auto; }
@media (max-width: 900px) { .ps-choose { grid-template-columns: 1fr 1fr; max-width: 780px; } }
@media (max-width: 700px) { .ps-choose { grid-template-columns: 1fr; } }
.ps-choose-card {
    background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 34px 28px;
    text-align: center; transition: .18s; display: block;
}
.ps-choose-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(38,33,92,.14); border-color: var(--brand); }
.ps-choose-card .icon {
    width: 66px; height: 66px; border-radius: 18px; margin: 0 auto 16px;
    background: linear-gradient(135deg, var(--brand), var(--brand-deep));
    color: #fff; font-size: 1.6rem; display: flex; align-items: center; justify-content: center;
}
.ps-choose-card h3 { color: var(--brand-deep); }
.ps-choose-card p { color: var(--muted); font-size: .93rem; }

/* ---------- About ---------- */
.ps-about { max-width: 980px; margin: 0 auto; line-height: 1.75; color: #374151; font-size: 1.03rem; }
.ps-about h2 { color: var(--brand-deep); margin-top: 2rem; }

/* ---------- Footer ---------- */
.ps-footer { background: var(--brand-deep); color: #cfcaf2; margin-top: 40px; }
.ps-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; padding: 48px 20px 34px; }
@media (max-width: 900px) { .ps-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .ps-footer-grid { grid-template-columns: 1fr; } }
.ps-footer h3 { color: #fff; font-size: 1rem; margin-bottom: 12px; }
.ps-footer a { display: block; color: #cfcaf2; padding: 4px 0; }
.ps-footer a:hover { color: #fff; }
.ps-footer p { font-size: .93rem; }
.ps-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 16px 0; font-size: .85rem; }
.ps-footer-bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ps-footer-legal-links { display: flex; gap: 16px; }
.ps-footer-legal-links a { display: inline; padding: 0; color: #cfcaf2; text-decoration: none; }
.ps-footer-legal-links a:hover { color: #fff; text-decoration: underline; }

.ps-social { display: flex; gap: 10px; margin-top: 16px; }
.ps-social a {
    width: 36px; height: 36px; border-radius: 10px; padding: 0 !important;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
    display: inline-flex !important; align-items: center; justify-content: center;
    color: #cfcaf2 !important; font-size: .95rem; transition: .15s;
}
.ps-social a:hover { background: rgba(255,255,255,.22); color: #fff !important; transform: translateY(-2px); }

.ps-empty { text-align: center; color: var(--muted); padding: 60px 20px; }
.ps-empty i { font-size: 2.4rem; color: var(--brand); display: block; margin-bottom: 12px; }

/* ---------- Floating WhatsApp contact button ---------- */
/* Stacked above the support-chat bubble (#ngoChatBubble, _ChatWidget.cshtml)
   which anchors the same bottom-right corner — same right offset, bottom
   pushed up by the chat bubble's height (58px) plus a gap so the two never
   overlap. */
.ps-wa-float {
    position: fixed; right: 22px; bottom: 92px; z-index: 90;
    width: 58px; height: 58px; border-radius: 50%;
    background: var(--wa); color: #fff !important;
    display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
    box-shadow: 0 10px 28px rgba(37,211,102,.45);
    transition: transform .18s, box-shadow .18s;
    animation: psWaPulse 2.4s ease-in-out infinite;
}
.ps-wa-float:hover { transform: scale(1.08); box-shadow: 0 14px 34px rgba(37,211,102,.55); }
@keyframes psWaPulse {
    0%, 100% { box-shadow: 0 10px 28px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.45); }
    50% { box-shadow: 0 10px 28px rgba(37,211,102,.45), 0 0 0 12px rgba(37,211,102,0); }
}
@media (max-width: 640px) {
    .ps-wa-float { right: 16px; bottom: 84px; width: 52px; height: 52px; font-size: 1.5rem; }
}

/* ============================================================
   Home hero — headline + feature slider + dashboard mockup
   ============================================================ */
.ps-hero-home {
    background-image:
        radial-gradient(900px 480px at 85% 20%, rgba(122,114,214,.30) 0%, rgba(122,114,214,0) 60%),
        linear-gradient(150deg, rgba(38,33,92,.86) 0%, rgba(60,52,137,.78) 48%, rgba(83,74,183,.68) 100%),
        url('/images/hero-bg/home-hero-network.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #fff; position: relative; overflow: hidden; padding: 76px 0 90px;
}
@media (max-width: 860px) {
    /* background-attachment:fixed is unreliable on many mobile browsers — scroll normally there */
    .ps-hero-home { background-attachment: scroll; }
}
.ps-hero-home::after {
    content: ""; position: absolute; inset: auto -10% -55% -10%; height: 60%;
    background: rgba(255,255,255,.05); border-radius: 50% 50% 0 0; pointer-events: none;
}
.ps-hero-grid {
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
    position: relative; z-index: 1;
}
@media (max-width: 940px) { .ps-hero-grid { grid-template-columns: 1fr; gap: 40px; } }

.ps-hero-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px; padding: 6px 16px; font-size: .82rem; font-weight: 600;
    letter-spacing: .3px; margin-bottom: 18px;
}
.ps-hero-kicker i { color: #9ef0c0; }

.ps-hero-home h1, .ps-hero-home h2 {
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 14px;
    letter-spacing: -.5px;
}
    .ps-hero-home h1 em, .ps-hero-home h2 em {
        font-style: normal;
        color: #c9c2ff;
    }

/* rotating feature line */
.ps-rotator {
    display: flex; align-items: center; gap: 10px; min-height: 2.1em;
    font-size: 1.05rem; color: #ded9ff; margin-bottom: 26px;
}
.ps-rotator .ic {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px;
    background: rgba(255,255,255,.14); display: inline-flex; align-items: center;
    justify-content: center; font-size: .95rem; color: #fff;
}
.ps-rotator .txt { transition: opacity .35s, transform .35s; }
.ps-rotator .txt.out { opacity: 0; transform: translateY(8px); }

.ps-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }

.ps-hero-points { display: flex; gap: 22px; flex-wrap: wrap; font-size: .87rem; color: #cfc8ff; }
.ps-hero-points span { display: inline-flex; align-items: center; gap: 7px; }
.ps-hero-points i { color: #9ef0c0; font-size: .8rem; }

/* ---------- dashboard mockup ---------- */
.ps-mock-wrap { position: relative; perspective: 1400px; }
.ps-mock {
    background: #fff; border-radius: 16px; overflow: hidden; color: var(--ink);
    box-shadow: 0 40px 90px -20px rgba(10,6,40,.55), 0 0 0 1px rgba(255,255,255,.14);
    transform: rotateY(-7deg) rotateX(3deg);
    animation: psMockFloat 7s ease-in-out infinite;
}
@media (max-width: 940px) { .ps-mock { transform: none; animation: none; max-width: 560px; margin: 0 auto; } }
@keyframes psMockFloat {
    0%, 100% { transform: rotateY(-7deg) rotateX(3deg) translateY(0); }
    50% { transform: rotateY(-7deg) rotateX(3deg) translateY(-12px); }
}

.ps-mock-bar {
    display: flex; align-items: center; gap: 6px; padding: 10px 14px;
    background: #f4f3fb; border-bottom: 1px solid var(--line);
}
.ps-mock-bar span { width: 10px; height: 10px; border-radius: 50%; }
.ps-mock-bar span:nth-child(1) { background: #fc605c; }
.ps-mock-bar span:nth-child(2) { background: #fdbc40; }
.ps-mock-bar span:nth-child(3) { background: #34c749; }
.ps-mock-bar i {
    font-style: normal; margin-left: 12px; background: #fff; border: 1px solid var(--line);
    border-radius: 999px; padding: 3px 14px; font-size: .68rem; color: var(--muted);
}

.ps-mock-body { display: grid; grid-template-columns: 64px 1fr; min-height: 330px; }

.ps-mock-side { background: var(--brand-deep); padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ps-mock-side .logo { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--brand), #8d84e8); }
.ps-mock-side .nv { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.55); font-size: .72rem; }
.ps-mock-side .nv.on { background: rgba(255,255,255,.16); color: #fff; }

.ps-mock-main { padding: 16px 18px; background: #faf9ff; }
.ps-mock-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.ps-mock-head b { font-family: "Poppins", sans-serif; font-size: .82rem; color: var(--brand-deep); }
.ps-mock-head .av { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-deep)); }

.ps-mock-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.ps-mock-tile { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; }
.ps-mock-tile .mi { width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: .62rem; color: #fff; margin-bottom: 7px; }
.ps-mock-tile .mi.a { background: var(--brand); }
.ps-mock-tile .mi.b { background: #10b981; }
.ps-mock-tile .mi.c { background: #f59e0b; }
.ps-mock-tile b { display: block; font-size: .82rem; color: var(--ink); font-family: "Poppins", sans-serif; }
.ps-mock-tile small { font-size: .58rem; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }

.ps-mock-chart { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px 10px; margin-bottom: 12px; }
.ps-mock-chart small { font-size: .62rem; color: var(--muted); font-weight: 600; }
.ps-mock-bars { display: flex; align-items: flex-end; gap: 7px; height: 62px; margin-top: 8px; }
.ps-mock-bars i {
    flex: 1; border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--brand), var(--brand-dark));
    opacity: .85; transform-origin: bottom; animation: psBarGrow 1s ease both;
}
.ps-mock-bars i:nth-child(2n) { background: linear-gradient(180deg, #b9b2f2, #8d84e8); }
.ps-mock-bars i:nth-child(1) { height: 42%; animation-delay: .10s; }
.ps-mock-bars i:nth-child(2) { height: 58%; animation-delay: .18s; }
.ps-mock-bars i:nth-child(3) { height: 36%; animation-delay: .26s; }
.ps-mock-bars i:nth-child(4) { height: 72%; animation-delay: .34s; }
.ps-mock-bars i:nth-child(5) { height: 52%; animation-delay: .42s; }
.ps-mock-bars i:nth-child(6) { height: 84%; animation-delay: .50s; }
.ps-mock-bars i:nth-child(7) { height: 64%; animation-delay: .58s; }
.ps-mock-bars i:nth-child(8) { height: 94%; animation-delay: .66s; }
@keyframes psBarGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.ps-mock-rows { display: flex; flex-direction: column; gap: 7px; }
.ps-mock-row { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; }
.ps-mock-row .dot { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 18px; }
.ps-mock-row .ln { height: 6px; border-radius: 999px; background: #eceafb; flex: 1; }
.ps-mock-row .ln.s { max-width: 34%; }
.ps-mock-row .pill { font-size: .56rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.ps-mock-row .pill.ok { background: #ecfdf5; color: #059669; }
.ps-mock-row .pill.pend { background: #fffbeb; color: #d97706; }

/* floating badges around the mockup */
.ps-float {
    position: absolute; background: #fff; color: var(--ink); border-radius: 12px;
    box-shadow: 0 16px 40px rgba(10,6,40,.35); padding: 9px 14px;
    display: flex; align-items: center; gap: 9px; font-size: .78rem; font-weight: 600;
    animation: psMockFloat 6s ease-in-out infinite;
}
.ps-float .fi { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .72rem; }
.ps-float.f1 { top: -16px; right: 6px; animation-delay: .8s; }
.ps-float.f1 .fi { background: #10b981; }
.ps-float.f2 { bottom: -14px; left: -8px; animation-delay: 1.6s; }
.ps-float.f2 .fi { background: var(--brand); }
.ps-float small { display: block; font-weight: 500; color: var(--muted); font-size: .66rem; }
@media (max-width: 940px) { .ps-float { display: none; } }

/* feature marquee strip under the hero */
.ps-strip { background: var(--brand-deep); border-top: 1px solid rgba(255,255,255,.08); overflow: hidden; padding: 13px 0; }
.ps-strip-track { display: flex; gap: 40px; white-space: nowrap; animation: psMarquee 30s linear infinite; width: max-content; }
.ps-strip span { color: #cfc8ff; font-size: .85rem; display: inline-flex; align-items: center; gap: 9px; }
.ps-strip i { color: #9ef0c0; font-size: .72rem; }
@keyframes psMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* feature tiles on home */
.ps-home-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .ps-home-feats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ps-home-feats { grid-template-columns: 1fr; } }
.ps-home-feat { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; transition: .18s; }
.ps-home-feat:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(38,33,92,.12); }
.ps-home-feat .fic {
    width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; font-size: 1.05rem; margin-bottom: 14px;
}
.ps-home-feat h3 { font-size: 1.02rem; color: var(--brand-deep); }
.ps-home-feat p { color: var(--muted); font-size: .9rem; margin: 0; line-height: 1.55; }

/* CTA band */
.ps-cta-band {
    background:
        radial-gradient(560px 280px at 18% -15%, rgba(158,240,192,.22), transparent 60%),
        radial-gradient(460px 260px at 92% 115%, rgba(236,72,153,.2), transparent 60%),
        linear-gradient(135deg, var(--brand-deep), var(--brand-dark) 55%, var(--brand));
    border-radius: 26px; color: #fff; text-align: center; padding: 60px 26px;
    position: relative; overflow: hidden;
    box-shadow: 0 34px 80px -24px rgba(20,17,64,.65), inset 0 0 0 1px rgba(255,255,255,.08);
}
.ps-cta-band::after { content: ""; position: absolute; inset: auto -20% -70% -20%; height: 90%; background: rgba(255,255,255,.06); border-radius: 50% 50% 0 0; }
.ps-cta-band h2 { font-size: 1.9rem; margin-bottom: 8px; position: relative; z-index: 1; }
.ps-cta-band p { color: #d5cfff; margin: 0 auto 24px; max-width: 520px; position: relative; z-index: 1; }
.ps-cta-band .ps-hero-actions { position: relative; z-index: 1; }

/* ============================================================
   Home page dark theme — navy / purple / pink gradient
   Opt-in via <body class="home-dark"> (set from Index.cshtml only,
   so every other public page keeps the light theme untouched).
   ============================================================ */
body.home-dark {
    background:
        radial-gradient(760px 520px at 12% 4%, rgba(122,114,214,.28), transparent 62%),
        radial-gradient(680px 480px at 92% 18%, rgba(236,72,153,.14), transparent 60%),
        radial-gradient(620px 460px at 50% 78%, rgba(88,101,242,.14), transparent 60%),
        #0a0921;
    background-attachment: fixed;
}

body.home-dark .ps-header {
    background: rgba(10,9,33,.82);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
body.home-dark .ps-logo,
body.home-dark .ps-menu > a,
body.home-dark .ps-drop-toggle,
body.home-dark .ps-burger { color: #e9e6fb; }
body.home-dark .ps-logo em { color: #b9b2f2; }
body.home-dark .ps-menu > a:hover,
body.home-dark .ps-drop-toggle:hover { color: #fff; }
body.home-dark .ps-drop-panel { background: #14112e; border-color: rgba(255,255,255,.1); box-shadow: 0 14px 40px rgba(0,0,0,.45); }
body.home-dark .ps-drop-panel a { color: #d9d5f7; }
body.home-dark .ps-drop-panel a:hover { background: rgba(255,255,255,.07); color: #fff; }
@media (max-width: 860px) {
    body.home-dark .ps-menu { background: #100d29; border-bottom: 1px solid rgba(255,255,255,.08); }
    body.home-dark .ps-menu > a, body.home-dark .ps-drop-toggle { border-bottom: 1px solid rgba(255,255,255,.08); }
}

body.home-dark .ps-hero-home h1 em, body.home-dark .ps-hero-home h2 em {
    background: linear-gradient(90deg, #cdc6ff, #f3aee0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body.home-dark .ps-section-head h2 { color: #fff; }
body.home-dark .ps-section-head p { color: #aca5d6; }

body.home-dark .ps-stat {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
body.home-dark .ps-stat b { color: #fff; }
body.home-dark .ps-stat span { color: #aca5d6; }

body.home-dark .ps-how-col,
body.home-dark .ps-home-feat,
body.home-dark .ps-faq-item {
    background: linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.018));
    border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(10px);
    transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
body.home-dark .ps-how-col:hover,
body.home-dark .ps-home-feat:hover {
    transform: translateY(-6px);
    border-color: rgba(205,198,255,.45);
    background: linear-gradient(165deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
    box-shadow: 0 26px 60px rgba(0,0,0,.45), 0 0 44px rgba(122,114,214,.16);
}
body.home-dark .ps-how-head h3,
body.home-dark .ps-home-feat h3,
body.home-dark .ps-faq-item summary { color: #fff; }
body.home-dark .ps-how-steps li,
body.home-dark .ps-home-feat p,
body.home-dark .ps-faq-item p { color: #beb8e2; }
body.home-dark .ps-how-steps li::before { background: rgba(255,255,255,.09); color: #e9e6fb; }
body.home-dark .ps-card-link {
    background: rgba(255,255,255,.06); color: #e9e6fb; border: 1px solid rgba(255,255,255,.12);
}
body.home-dark .ps-card-link:hover { background: linear-gradient(135deg, var(--brand), #8d84e8); color: #fff; }

/* Icon badges (How-it-works / Feature / Why-choose) glow against the dark canvas
   and get a small lift + twist on card hover — reads as "alive" rather than static. */
body.home-dark .ps-how-head .ic,
body.home-dark .ps-home-feat .fic,
body.home-dark .ps-why-list .ic {
    box-shadow: 0 10px 26px rgba(122,114,214,.5), inset 0 0 0 1px rgba(255,255,255,.1);
    transition: transform .3s ease;
}
body.home-dark .ps-how-col:hover .ic,
body.home-dark .ps-home-feat:hover .fic {
    transform: scale(1.08) rotate(-4deg);
}

/* Section eyebrow — small uppercase label above each ps-section-head h2,
   visual sibling of the hero's ps-hero-kicker badge. */
.ps-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .76rem; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
    padding: 6px 15px; border-radius: 999px; margin-bottom: 14px;
}
.ps-eyebrow i { font-size: .68rem; }
body.home-dark .ps-eyebrow {
    color: #cdc6ff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
}
body.home-dark .ps-eyebrow i { color: #9ef0c0; }

/* Custom FAQ accordion marker — replaces the default browser triangle with a
   chevron that rotates on open. Applies site-wide (Terms/Privacy/About/Pricing
   all reuse .ps-faq-item), a plain visual upgrade with no layout risk. */
.ps-faq-item summary { list-style: none; position: relative; padding-right: 30px; }
.ps-faq-item summary::-webkit-details-marker { display: none; }
.ps-faq-item summary::after {
    content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .78rem;
    position: absolute; right: 2px; top: 3px; color: var(--brand); transition: transform .25s ease;
}
.ps-faq-item[open] summary::after { transform: rotate(180deg); }
.ps-faq-item { transition: border-color .25s ease, box-shadow .25s ease; }
body.home-dark .ps-faq-item summary::after { color: #cdc6ff; }
body.home-dark .ps-faq-item[open] { border-color: rgba(205,198,255,.45); box-shadow: 0 18px 44px rgba(0,0,0,.35); }

/* Get-started stepper — brighter glow on the numbered circles, gradient connector line */
body.home-dark .ps-step::before { box-shadow: 0 12px 32px rgba(122,114,214,.55), 0 0 0 6px rgba(122,114,214,.14); }
body.home-dark .ps-steps::after { background: linear-gradient(90deg, rgba(122,114,214,.06), rgba(190,182,255,.55) 50%, rgba(122,114,214,.06)); }

/* Primary/ghost CTA buttons get more lift + a soft glow on hover against the dark canvas */
body.home-dark .ps-btn.primary { box-shadow: 0 12px 32px rgba(0,0,0,.35); }
body.home-dark .ps-btn.primary:hover { box-shadow: 0 16px 38px rgba(0,0,0,.45), 0 0 0 4px rgba(255,255,255,.08); transform: translateY(-3px); }
body.home-dark .ps-btn.ghost:hover { transform: translateY(-3px); }
body.home-dark .ps-btn.brand:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(83,74,183,.5); }

/* Scroll-reveal — opt-in class added by Index.cshtml's script for elements below
   the fold; anything already in view on load is left alone (no flash-then-fade). */
.ps-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.ps-reveal.ps-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .ps-reveal { opacity: 1; transform: none; transition: none; }
}

body.home-dark .ps-strip { background: rgba(255,255,255,.04); border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); }
/* background-color (not the "background" shorthand) — a shorthand here would reset
   background-image to none and silently strip the .ps-section-fancy artwork+overlay
   off every alt section (Features, Get started), which is what was causing those
   sections to look flat/washed-out next to their non-alt neighbors. */
body.home-dark .ps-section.alt { background-color: rgba(255,255,255,.02); }

/* Home page only — each section gets its own themed background image, set inline
   via the --sec-bg custom property (see Index.cshtml). The image is pinned to the
   viewport (background-attachment: fixed) so it stays put while the page scrolls —
   only the content moves. A dark gradient layer on top keeps text readable. */
.ps-section-fancy {
    position: relative;
    background-image: linear-gradient(180deg, rgba(9,8,32,.87) 0%, rgba(9,8,32,.74) 100%), var(--sec-bg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.ps-section-fancy > .ps-container { position: relative; z-index: 1; }
/* Soft anchor-color fade at the top/bottom edge of every fancy section so adjacent
   sections (each with their own distinct SVG artwork) blend into one continuous
   canvas instead of showing a hard seam where one section's background stops and
   the next one's starts. #0a0921 matches body.home-dark's own base tone. */
.ps-section-fancy::before,
.ps-section-fancy::after {
    content: ""; position: absolute; left: 0; right: 0; height: 90px; pointer-events: none; z-index: 0;
}
.ps-section-fancy::before { top: 0; background: linear-gradient(to bottom, #0a0921 0%, transparent 100%); }
.ps-section-fancy::after { bottom: 0; background: linear-gradient(to top, #0a0921 0%, transparent 100%); }
@media (max-width: 860px) {
    /* background-attachment:fixed is unreliable on many mobile browsers — scroll normally there */
    .ps-section-fancy { background-attachment: scroll; }
}

/* feature filter tabs */
body.home-dark .ps-tab {
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #beb8e2;
}
body.home-dark .ps-tab:hover { border-color: rgba(205,198,255,.5); color: #fff; }
body.home-dark .ps-tab.active { background: linear-gradient(135deg, var(--brand), #8d84e8); color: #fff; border-color: transparent; }

/* why-choose split */
body.home-dark .ps-why-grid h2 { color: #fff; }
body.home-dark .ps-why-grid > div > p { color: #aca5d6; }
body.home-dark .ps-why-list b { color: #fff; }
body.home-dark .ps-why-list span { color: #beb8e2; }
body.home-dark .ps-why-card {
    background: linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.018));
    border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(10px);
    transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease;
}
body.home-dark .ps-why-card:hover {
    transform: translateY(-6px);
    border-color: rgba(205,198,255,.45);
    box-shadow: 0 26px 60px rgba(0,0,0,.45), 0 0 44px rgba(122,114,214,.16);
}
body.home-dark .ps-why-card b { color: #fff; }
body.home-dark .ps-why-card span { color: #aca5d6; }

/* get-started stepper */
body.home-dark .ps-step h3 { color: #fff; }
body.home-dark .ps-step p { color: #beb8e2; }


/* ---------- About page ---- Hero badge (light pill on the dark ps-hero) ---------- */
.ab-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .2px;
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.ab-badge i {
    color: #9ef0c0;
}

/* ---------- Stat icons (matches home page pattern) ---------- */
.ps-stat .stat-ic {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-deep));
}

/* ---------- Why transparency matters (split: list + stat panel) ---------- */
.ab-why-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center;
}

@media (max-width: 900px) {
    .ab-why-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.ab-why-list {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .ab-why-list li {
        display: flex;
        gap: 14px;
        align-items: flex-start;
    }

    .ab-why-list .ic {
        width: 38px;
        height: 38px;
        border-radius: 11px;
        flex: 0 0 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .9rem;
        color: #fff;
        background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    }

    .ab-why-list b {
        display: block;
        font-size: .96rem;
        color: var(--ink);
    }

    .ab-why-list span {
        display: block;
        font-size: .86rem;
        color: var(--muted);
        margin-top: 2px;
    }

.ab-why-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ab-why-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px 18px;
    text-align: center;
    box-shadow: 0 10px 26px rgba(38,33,92,.05);
}

    .ab-why-card i {
        font-size: 1.35rem;
        color: var(--brand);
        margin-bottom: 10px;
        display: block;
    }

    .ab-why-card b {
        display: block;
        font-size: 1.02rem;
        color: var(--brand-deep);
        font-family: "Poppins", sans-serif;
    }

    .ab-why-card span {
        display: block;
        font-size: .78rem;
        color: var(--muted);
        margin-top: 3px;
    }

/* ---------- Get involved CTA cards ---------- */
.ab-cta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

@media (max-width: 960px) {
    .ab-cta {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .ab-cta {
        grid-template-columns: 1fr;
    }
}

.ab-cta-card {
    border-radius: 20px;
    padding: 32px 28px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

    .ab-cta-card::after {
        content: "";
        position: absolute;
        inset: auto -30% -60% -10%;
        height: 70%;
        background: rgba(255,255,255,.06);
        border-radius: 50%;
        pointer-events: none;
    }

    .ab-cta-card.ngo {
        background: linear-gradient(135deg, var(--brand-deep), var(--brand-dark));
    }

    .ab-cta-card.donor {
        background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    }

    .ab-cta-card.volunteer {
        background: linear-gradient(135deg, #7F77DD, var(--brand-dark));
    }

    .ab-cta-card .cta-ic {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        background: rgba(255,255,255,.16);
        border: 1px solid rgba(255,255,255,.25);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
        margin-bottom: 18px;
        position: relative;
        z-index: 1;
    }

    .ab-cta-card h3 {
        font-family: "Poppins", sans-serif;
        font-size: 1.15rem;
        margin: 0 0 10px;
        position: relative;
        z-index: 1;
    }

    .ab-cta-card p {
        font-size: .9rem;
        opacity: .92;
        margin: 0 0 22px;
        line-height: 1.6;
        position: relative;
        z-index: 1;
    }

    .ab-cta-card .ps-btn {
        position: relative;
        z-index: 1;
        font-size: .92rem;
    }

/* ==================================================================
   Styles migrated out of individual view files' inline <style> blocks
   ================================================================== */

/* ==================== DMS.UI/Views/Site/Campaign.cshtml ==================== */
    .card-donate {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px dashed var(--line);
    }

    .cd-divider {
        text-align: center;
        font-size: .78rem;
        color: var(--muted);
        margin-bottom: 12px;
    }

    .cd-row {
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: 8px;
    }

        .cd-row select, .cd-row input {
            padding: 11px 12px;
            border: 1px solid var(--line);
            border-radius: 10px;
            font-family: inherit;
            font-size: .92rem;
            background: var(--field);
        }

        .cd-row select:focus, .cd-row input:focus {
            outline: none;
            border-color: var(--brand);
            background: #fff;
        }

    .ps-btn.brand.outline {
        background: #fff;
        color: var(--brand-dark);
        border: 1.5px solid var(--brand);
        box-shadow: none;
    }

        .ps-btn.brand.outline:hover {
            background: var(--field);
            filter: none;
        }

        .ps-btn.brand.outline:disabled {
            opacity: .6;
            cursor: default;
        }

    .cd-note {
        min-height: 18px;
        margin: 8px 0 0;
        font-size: .8rem;
        color: #dc2626;
        text-align: center;
    }


/* ==================== DMS.UI/Views/Site/Contact.cshtml ==================== */
    .contact-wrap {
        display: grid;
        grid-template-columns: 1fr 1.3fr;
        gap: 34px;
        align-items: start;
    }

    @media (max-width: 800px) {
        .contact-wrap {
            grid-template-columns: 1fr;
        }
    }

    .contact-info h3 {
        font-family: "Poppins", sans-serif;
        font-size: 1.15rem;
        margin: 0 0 10px;
        color: var(--brand-deep);
    }

    .contact-info p {
        color: var(--muted);
        font-size: .95rem;
        line-height: 1.65;
        margin: 0 0 22px;
    }

    .contact-tile {
        display: flex;
        gap: 14px;
        align-items: flex-start;
        padding: 16px 0;
        border-top: 1px solid var(--line);
    }

        .contact-tile:first-of-type {
            border-top: none;
        }

        .contact-tile .ic {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            background: var(--field);
            color: var(--brand);
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 42px;
            font-size: 1.05rem;
        }

        .contact-tile h4 {
            margin: 0 0 3px;
            font-size: .92rem;
            font-weight: 700;
        }

        .contact-tile span, .contact-tile a {
            font-size: .88rem;
            color: var(--muted);
        }

    .contact-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: 30px;
        box-shadow: 0 10px 30px rgba(38,33,92,.06);
    }

    .contact-field {
        margin-bottom: 16px;
    }

        .contact-field label {
            display: block;
            font-size: .85rem;
            font-weight: 600;
            color: var(--brand-deep);
            margin-bottom: 6px;
        }

        .contact-field input, .contact-field textarea {
            width: 100%;
            padding: 12px 14px;
            border: 1px solid var(--line);
            border-radius: 10px;
            font-family: inherit;
            font-size: .95rem;
            background: var(--field);
        }

            .contact-field input:focus, .contact-field textarea:focus {
                outline: none;
                border-color: var(--brand);
                background: #fff;
            }

        .contact-field textarea {
            resize: vertical;
            min-height: 130px;
        }

    .contact-grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    @media (max-width: 520px) {
        .contact-grid-2 {
            grid-template-columns: 1fr;
        }
    }


/* ==================== DMS.UI/Views/Site/Index.cshtml ==================== */
    /* ---------- How it works ---------- */
    .ps-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    @media (max-width: 900px) { .ps-how { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
    .ps-how-col {
        background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px 24px;
        transition: .18s;
    }
    .ps-how-col:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(38,33,92,.10); }
    .ps-how-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
    .ps-how-head .ic {
        width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: #fff;
    }
    .ps-how-col.donor .ic { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); }
    .ps-how-col.volunteer .ic { background: linear-gradient(135deg, #7F77DD, var(--brand-dark)); }
    .ps-how-col.ngo .ic { background: linear-gradient(135deg, var(--brand-deep), var(--brand-dark)); }
    .ps-how-head h3 { font-size: 1.08rem; color: var(--brand-deep); margin: 0; }
    .ps-how-steps { list-style: none; margin: 0 0 18px; padding: 0; counter-reset: ps-step; }
    .ps-how-steps li {
        counter-increment: ps-step;
        display: flex; gap: 12px; align-items: flex-start;
        font-size: .9rem; color: #374151; line-height: 1.5; margin-bottom: 14px;
    }
    .ps-how-steps li:last-child { margin-bottom: 0; }
    .ps-how-steps li::before {
        content: counter(ps-step);
        flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
        background: var(--field); color: var(--brand-dark); font-weight: 700; font-size: .78rem;
        display: flex; align-items: center; justify-content: center;
    }
    .ps-how-col .ps-card-link { font-weight: 600; }

    /* ---------- Stat icons ---------- */
    .ps-stat .stat-ic {
        width: 40px; height: 40px; border-radius: 12px; margin: 0 auto 10px;
        display: flex; align-items: center; justify-content: center; font-size: 1rem; color: #fff;
        background: linear-gradient(135deg, var(--brand), var(--brand-deep));
    }

    /* ---------- FAQ ---------- */
    .ps-faq-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; margin-bottom: 12px; }
    .ps-faq-item summary { font-weight: 600; cursor: pointer; color: var(--brand-deep); }
    .ps-faq-item p { color: var(--muted); margin: 10px 0 0; line-height: 1.6; }

    /* ---------- Feature filter tabs ---------- */
    .ps-tabs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
    .ps-tab {
        padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
        color: var(--muted); font-weight: 600; font-size: .86rem; cursor: pointer; transition: .15s;
    }
    .ps-tab:hover { border-color: var(--brand); color: var(--brand-dark); }
    .ps-tab.active { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; border-color: transparent; }
    .ps-home-feat.ps-feat-hidden { display: none; }

    /* ---------- Why choose us (split) ---------- */
    .ps-why-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
    @media (max-width: 900px) { .ps-why-grid { grid-template-columns: 1fr; gap: 32px; } }
    .ps-why-list { list-style: none; margin: 22px 0 26px; padding: 0; display: flex; flex-direction: column; gap: 18px; }
    .ps-why-list li { display: flex; gap: 14px; align-items: flex-start; }
    .ps-why-list .ic {
        width: 38px; height: 38px; border-radius: 11px; flex: 0 0 38px;
        display: flex; align-items: center; justify-content: center; font-size: .9rem; color: #fff;
        background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    }
    .ps-why-list b { display: block; font-size: .98rem; }
    .ps-why-list span { display: block; font-size: .87rem; margin-top: 2px; }
    .ps-why-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .ps-why-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 18px; text-align: center; }
    .ps-why-card i { font-size: 1.4rem; color: var(--brand); margin-bottom: 10px; display: block; }
    .ps-why-card b { display: block; font-size: 1.02rem; color: var(--brand-deep); font-family: "Poppins", sans-serif; }
    .ps-why-card span { display: block; font-size: .78rem; margin-top: 3px; }

    /* ---------- Get started stepper ---------- */
    .ps-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; position: relative; counter-reset: ps-getstep; }
    @media (max-width: 900px) { .ps-steps { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; gap: 30px; } }
    @media (min-width: 901px) {
        .ps-steps::after { content: ""; position: absolute; top: 23px; left: 12%; right: 12%; height: 2px; background: var(--line); z-index: 0; }
    }
    .ps-step { position: relative; text-align: center; padding: 0 10px; }
    .ps-step::before {
        counter-increment: ps-getstep; content: counter(ps-getstep);
        width: 46px; height: 46px; border-radius: 50%; position: relative; z-index: 1;
        background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff;
        font-weight: 700; font-family: "Poppins", sans-serif; font-size: 1.05rem;
        display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
        box-shadow: 0 8px 20px rgba(83,74,183,.35);
    }
    .ps-step h3 { font-size: 1rem; color: var(--brand-deep); margin-bottom: 6px; }
    .ps-step p { color: var(--muted); font-size: .85rem; margin: 0; line-height: 1.5; }

    /* ---------- Home hero — multi-slide (text left / animated mock right), synced ---------- */
    .ps-hero-text-stack { position: relative; }
    .ps-slide-text { display: none; }
    .ps-slide-text.active { display: block; animation: psSlideFadeIn .6s ease; }
    .ps-slide-sub-text { color: #ded9ff; font-size: 1.08rem; max-width: 560px; margin: 0 0 26px; line-height: 1.5; }
    @keyframes psSlideFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    .ps-hero-dots { margin: 4px 0 0; display: flex; align-items: center; gap: 2px; }
    .ps-dot {
        width: 9px; height: 9px; border-radius: 50%;
        background: rgba(255,255,255,.35); background-clip: content-box; box-sizing: content-box;
        border: none; cursor: pointer; padding: 8px; transition: .25s;
    }
    .ps-dot.active { background: #fff; width: 26px; border-radius: 999px; }
    .ps-mock-slide { display: none; }
    .ps-mock-slide.active { display: block; animation: psSlideFadeIn .6s ease; }


/* ==================== DMS.UI/Views/Site/Ngos.cshtml ==================== */
    .ngo-search-wrap { max-width: 480px; margin: 0 auto 34px; }
    .ngo-search { position: relative; }
    .ngo-search i {
        position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
        color: var(--muted); font-size: .92rem; pointer-events: none;
    }
    .ngo-search input {
        width: 100%; padding: 13px 16px 13px 44px; border: 1px solid var(--line); border-radius: 999px;
        background: #fff; font: inherit; outline: none; box-shadow: 0 8px 22px rgba(38,33,92,.06);
        transition: .15s;
    }
    .ngo-search input:focus { border-color: var(--brand); box-shadow: 0 8px 22px rgba(83,74,183,.14); }
    .ngo-result-count { text-align: center; color: var(--muted); font-size: .85rem; margin: -18px 0 26px; }


/* ==================== DMS.UI/Views/Site/Pricing.cshtml ==================== */
    .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1120px; margin: 0 auto; align-items: stretch; }
    @media (max-width: 860px) { .price-grid { grid-template-columns: 1fr; max-width: 420px; } }

    .price-card {
        background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 30px 15px;
        text-align: center; display: flex; flex-direction: column; position: relative; transition: .18s;
    }
    .price-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(38,33,92,.13); }
    .price-card.featured { border: 2px solid var(--brand); box-shadow: 0 18px 44px rgba(83,74,183,.16); }
    .price-flag {
        position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
        background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff;
        font-size: .75rem; font-weight: 700; padding: 5px 16px; border-radius: 999px; white-space: nowrap;
    }
    .price-card h3 { color: var(--brand-deep); font-size: 1.15rem; margin-bottom: 2px; }
    .price-card .amount { font-family: "Poppins", sans-serif; font-size: 2.6rem; font-weight: 800; color: var(--brand-deep); }
    .price-card .amount small { font-size: 1rem; font-weight: 600; color: var(--muted); }
    .price-card .was-price { font-size: 1.1rem; font-weight: 600; color: var(--muted); text-decoration: line-through; margin-right: 6px; }
    .price-card .discount-pill {
        display: inline-block; margin-bottom: 6px; background: #ecfdf5; color: #059669;
        font-size: .75rem; font-weight: 700; padding: 3px 11px; border-radius: 999px;
    }
    .price-card .per { color: var(--muted); font-size: .9rem; margin-bottom: 6px; }
    .price-card .save { color: var(--ok); font-weight: 600; font-size: .85rem; min-height: 1.2em; }
    .price-card .plan-desc { font-size: .85rem; color: var(--muted); line-height: 1.55; margin: 10px 0 0; }
    .price-card .cta { margin-top: 18px; }

    .feat-list { text-align: left; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); flex: 1; }
    .feat-list li { list-style: none; display: flex; gap: 9px; align-items: baseline; font-size: .9rem; padding: 4px 0; color: #374151; }
    .feat-list li i { color: var(--ok); font-size: .8rem; }

    .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 8px; }
    @media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 620px) { .feature-grid { grid-template-columns: 1fr; } }
    .feature-tile { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
    .feature-tile .fic {
        width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; font-size: 1rem; margin-bottom: 12px;
    }
    .feature-tile h3 { font-size: 1rem; color: var(--brand-deep); }
    .feature-tile p { color: var(--muted); font-size: .88rem; margin: 0; line-height: 1.55; }


/* ==================== DMS.UI/Views/Site/Privacy.cshtml ==================== */
    .legal-updated {
        font-size: .85rem;
        color: var(--muted);
        margin: -8px 0 0;
    }

    .legal-toc {
        background: var(--field);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 18px 22px;
        margin: 28px 0 36px;
    }

        .legal-toc h4 {
            margin: 0 0 10px;
            font-family: "Poppins", sans-serif;
            font-size: .95rem;
            color: var(--brand-deep);
        }

        .legal-toc ol {
            margin: 0;
            padding-left: 20px;
            columns: 2;
            font-size: .9rem;
        }

            .legal-toc ol li {
                margin-bottom: 6px;
            }

            .legal-toc a {
                color: var(--ink);
                text-decoration: none;
            }

                .legal-toc a:hover {
                    color: var(--brand);
                    text-decoration: underline;
                }

    .ps-about section + section {
        margin-top: 30px;
    }

    .ps-about h2 {
        display: flex;
        align-items: baseline;
        gap: 10px;
    }

        .ps-about h2 .num {
            color: var(--brand);
            font-family: "DM Mono", monospace;
            font-size: .85rem;
        }

    .priv-table {
        width: 100%;
        border-collapse: collapse;
        margin: 14px 0 6px;
        font-size: .92rem;
    }

        .priv-table th, .priv-table td {
            text-align: left;
            padding: 10px 14px;
            border: 1px solid var(--line);
            vertical-align: top;
        }

        .priv-table th {
            background: var(--field);
            font-family: "Poppins", sans-serif;
            font-weight: 600;
            color: var(--brand-deep);
            font-size: .82rem;
        }


/* ==================== DMS.UI/Views/Shared/_CountrySelect.cshtml (shared partial — RegisterNgo + RegisterVolunteer) ==================== */
    /* Searchable "Country" dropdown with flags. Visually modeled on the
       .ngo-select/.ngo-list pattern used by the same forms, but self-contained
       (its own box/list styling) so it renders consistently whether the page
       is on the .f-card/.f-group design (RegisterVolunteer/RegisterDonor) or
       the .ps-field design (RegisterNgo) — both load this stylesheet globally
       via _PublicLayout.cshtml. */
    .cty-select { position: relative; }

    .cty-box {
        display: flex;
        align-items: center;
        gap: 9px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--field);
        padding: 10px 14px;
        cursor: pointer;
        transition: border-color .15s;
    }
    .cty-box:hover, .cty-box.open { border-color: var(--brand); }
    .cty-box .cty-flag-current {
        width: 22px; height: 16px; border-radius: 3px; object-fit: cover;
        flex: 0 0 22px; box-shadow: 0 0 0 1px rgba(0,0,0,.08);
    }
    .cty-box input.cty-search {
        border: none; background: transparent; outline: none; flex: 1;
        font: inherit; color: inherit; cursor: pointer; padding: 0; min-width: 0;
    }
    .cty-box .cty-caret { color: var(--muted); font-size: .78rem; margin-left: auto; flex: 0 0 auto; }

    .cty-list {
        position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
        background: #fff; border: 1px solid var(--line); border-radius: 12px;
        box-shadow: 0 14px 36px rgba(38,33,92,.16);
        max-height: 280px; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
    }
    .cty-list li {
        padding: 9px 10px; border-radius: 9px; cursor: pointer;
        display: flex; align-items: center; gap: 10px; font-size: .92rem;
    }
    .cty-list li:hover, .cty-list li.sel { background: var(--field); color: var(--brand-dark); }
    .cty-list li img.cty-flag {
        width: 20px; height: 14px; border-radius: 2px; object-fit: cover;
        flex: 0 0 20px; box-shadow: 0 0 0 1px rgba(0,0,0,.08);
    }
    .cty-list li .cty-name { flex: 1; }
    .cty-list li .cty-currency { color: var(--muted); font-size: .78rem; font-weight: 600; }
    .cty-list li.none { color: var(--muted); cursor: default; }
    .cty-list li.none:hover { background: none; }


/* ==================== DMS.UI/Views/Site/RegisterDonor.cshtml ==================== */
    /* public.css was written for a standalone page — undo its body-level
       rules so they don't disturb the shared public-site layout. */
    body {
        padding: 0;
        background: #fff;
        user-select: auto;
        -webkit-user-select: auto;
        -moz-user-select: auto;
        -ms-user-select: auto;
        -webkit-touch-callout: default;
    }

    /* The form keeps its own soft background inside the layout instead. */
    .vca-page {
        background: radial-gradient(1100px 520px at 50% -8%, #e9e7fb 0%, rgba(233,231,251,0) 60%), #eef0fb;
        padding: 32px 16px 64px;
    }

    /* .f-card clips overflow, which hid the NGO dropdown — let this card overflow. */
    .f-card.ngo-pick {
        overflow: visible;
    }

    /* Searchable NGO dropdown (shown when no NGO slug is in the URL) */
    .ngo-select {
        position: relative;
    }

        .ngo-select .form-control {
            padding-left: 40px;
        }

    .ngo-list {
        position: absolute;
        z-index: 20;
        left: 0;
        right: 0;
        top: calc(100% + 6px);
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: 0 14px 36px rgba(38,33,92,.16);
        max-height: 260px;
        overflow-y: auto;
        margin: 0;
        padding: 6px;
        list-style: none;
    }

        .ngo-list li {
            padding: 10px 12px;
            border-radius: 9px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
        }

            .ngo-list li:hover, .ngo-list li.hl {
                background: var(--field);
                color: var(--brand-dark);
            }

            .ngo-list li .dot {
                width: 26px;
                height: 26px;
                border-radius: 50%;
                flex: 0 0 26px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: .8rem;
                font-weight: 700;
            }

            .ngo-list li.none {
                color: var(--muted);
                cursor: default;
            }

    .ngo-selected-note {
        margin-top: 8px;
        font-size: .88rem;
        color: var(--ok);
        display: none;
    }

    /* Terms & Conditions agreement checkbox */
    .agree-check {
        margin: 4px 0 18px;
        background: var(--field);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 13px 15px;
    }
        .agree-check label {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            cursor: pointer;
            font-size: .88rem;
            line-height: 1.55;
            color: var(--muted);
        }
        .agree-check input[type=checkbox] {
            width: 18px;
            height: 18px;
            flex: 0 0 18px;
            margin-top: 2px;
            accent-color: var(--brand);
            cursor: pointer;
        }
        .agree-check a {
            color: var(--brand-dark);
            text-decoration: underline;
        }
        .agree-check strong {
            color: #9a3412;
        }
        .agree-check .field-validation-error {
            display: block;
            margin-top: 6px;
        }


/* ==================== DMS.UI/Views/Site/RegisterNgo.cshtml ==================== */
    /* Wider card just for this page — .ps-form-wrap itself stays 620px
       (its default) for any other, single-column form that might use it. */
    .ps-form-wrap.ngo-wide { max-width: 900px; }
    .ngo-form-card { padding: 36px 40px; }
    @media (max-width: 600px) { .ngo-form-card { padding: 26px 22px; } }

    /* Organization info (left) / Admin account (right) side by side;
       Package & payment stays outside this grid, full width, below. */
    .ps-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
    @media (max-width: 760px) { .ps-form-grid { grid-template-columns: 1fr; gap: 0; } }
    .ps-form-col .ps-form-divider { margin-top: 0; }

    .plan-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    @media (max-width: 560px) { .plan-pick { grid-template-columns: 1fr; } }
    .plan-pick input[type=radio] { position: absolute; opacity: 0; }
    .plan-pick label {
        display: block; text-align: center; padding: 14px 10px; cursor: pointer;
        border: 2px solid var(--line); border-radius: 14px; background: var(--field);
        font-weight: 600; transition: .15s;
    }
    .plan-pick label small { display: block; font-weight: 500; color: var(--muted); margin-top: 3px; }
    .plan-pick input[type=radio]:checked + label {
        border-color: var(--brand); background: #fff; color: var(--brand-dark);
        box-shadow: 0 6px 18px rgba(83,74,183,.15);
    }
    .ps-form-note { font-size: .85rem; color: var(--muted); margin: -8px 0 16px; }

    /* City + Postal code side by side; Country (with its dropdown) stays a
       full-width .ps-field of its own, right below. */
    .ps-field-row { display: flex; gap: 14px; }
    .ps-field-row .ps-field { flex: 1; min-width: 0; }
    @media (max-width: 480px) { .ps-field-row { flex-direction: column; gap: 0; } }

    .ps-form-divider {
        display: flex; align-items: center; gap: 12px; margin: 0 18px 26px 0;
        font-weight: 700; color: var(--brand-deep); font-family: "Poppins", sans-serif;
    }
    .ps-form-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

    /* fee payment box */
    .fee-box { background: var(--field); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 18px; }
    .fee-box .fee-note { font-size: .87rem; color: var(--muted); margin: 0 0 12px; }
    .fee-acct { background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 10px 13px; margin-bottom: 8px; }
    .fee-acct .m { font-weight: 700; font-size: .85rem; color: var(--brand-deep); }
    .fee-acct .n { display: flex; align-items: center; gap: 8px; font-family: "DM Mono", monospace; font-size: .92rem; margin: 3px 0 2px; word-break: break-all; }
    .fee-acct .d { font-size: .78rem; color: var(--muted); }
    .fee-copy { border: 1px solid var(--line); background: var(--field); color: var(--brand-dark); border-radius: 8px; width: 28px; height: 28px; cursor: pointer; font-size: .8rem; flex: 0 0 28px; }
    .fee-copy:hover { background: var(--brand); color: #fff; }
    .fee-holder { font-size: .82rem; color: var(--muted); margin: 6px 0 0; }
    .fee-paylink { display: none; margin-top: 10px; }

    /* Terms & Conditions agreement checkbox */
    .agree-field { margin-bottom: 18px; }
    .agree-check {
        display: flex; align-items: flex-start; gap: 10px;
        cursor: pointer; font-size: .88rem; line-height: 1.55; color: var(--muted);
        background: var(--field); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px;
    }
    .agree-check input[type=checkbox] {
        width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; accent-color: var(--brand); cursor: pointer;
    }
    .agree-check a { color: var(--brand-dark); text-decoration: underline; }
    .agree-check strong { color: #9a3412; }

    /* Manual vs Online payment-method toggle — same visual language as
       .plan-pick above (hidden radio + styled label). */
    .pay-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    @media (max-width: 560px) { .pay-pick { grid-template-columns: 1fr; } }
    .pay-pick input[type=radio] { position: absolute; opacity: 0; }
    .pay-pick label {
        display: block; text-align: center; padding: 16px 12px; cursor: pointer;
        border: 2px solid var(--line); border-radius: 14px; background: var(--field);
        font-weight: 600; transition: .15s;
    }
    .pay-pick label i { display: block; font-size: 1.3rem; margin-bottom: 6px; color: var(--muted); }
    .pay-pick label small { display: block; font-weight: 500; color: var(--muted); margin-top: 4px; font-size: .78rem; }
    .pay-pick input[type=radio]:checked + label {
        border-color: var(--brand); background: #fff; color: var(--brand-dark);
        box-shadow: 0 6px 18px rgba(83,74,183,.15);
    }
    .pay-pick input[type=radio]:checked + label i { color: var(--brand); }

    /* "Pay Online" explainer — reuses the .fee-box look for consistency. */
    .online-pay-note { text-align: center; }
    .online-pay-note i { font-size: 1.6rem; color: var(--brand); margin-bottom: 8px; display: block; }

    /* "Card payment cancelled" resume banner */
    .resume-banner {
        display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
        background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
        border-radius: 14px; padding: 14px 18px; margin-bottom: 20px; font-size: .9rem;
    }
    .resume-banner i { font-size: 1.1rem; }
    .resume-banner a.ps-btn { padding: 8px 16px; font-size: .85rem; margin-left: auto; }


/* ==================== DMS.UI/Views/Site/RegisterVolunteer.cshtml ==================== */
    body {
        padding: 0;
        background: #fff;
    }

    .vca-page {
        background: radial-gradient(1100px 520px at 50% -8%, #e9e7fb 0%, rgba(233,231,251,0) 60%), #eef0fb;
        padding: 32px 16px 64px;
    }

    .f-card.ngo-pick {
        overflow: visible;
    }

    .ngo-select {
        position: relative;
    }

        .ngo-select .form-control {
            padding-left: 40px;
        }

    .ngo-list {
        position: absolute;
        z-index: 20;
        left: 0;
        right: 0;
        top: calc(100% + 6px);
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: 0 14px 36px rgba(38,33,92,.16);
        max-height: 260px;
        overflow-y: auto;
        margin: 0;
        padding: 6px;
        list-style: none;
    }

        .ngo-list li {
            padding: 10px 12px;
            border-radius: 9px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
        }

            .ngo-list li:hover, .ngo-list li.hl {
                background: var(--field);
                color: var(--brand-dark);
            }

            .ngo-list li .dot {
                width: 26px;
                height: 26px;
                border-radius: 50%;
                flex: 0 0 26px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: .8rem;
                font-weight: 700;
            }

            .ngo-list li.none {
                color: var(--muted);
                cursor: default;
            }

    .ngo-selected-note {
        margin-top: 8px;
        font-size: .88rem;
        color: var(--ok);
        display: none;
    }

    /* Terms & Conditions agreement checkbox */
    .agree-check {
        margin: 4px 0 18px;
        background: var(--field);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 13px 15px;
    }
        .agree-check label {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            cursor: pointer;
            font-size: .88rem;
            line-height: 1.55;
            color: var(--muted);
        }
        .agree-check input[type=checkbox] {
            width: 18px;
            height: 18px;
            flex: 0 0 18px;
            margin-top: 2px;
            accent-color: var(--brand);
            cursor: pointer;
        }
        .agree-check a {
            color: var(--brand-dark);
            text-decoration: underline;
        }
        .agree-check .field-validation-error {
            display: block;
            margin-top: 6px;
        }


/* ==================== DMS.UI/Views/Site/Terms.cshtml ==================== */
    .legal-updated {
        font-size: .85rem;
        color: var(--muted);
        margin: -8px 0 0;
    }

    .legal-toc {
        background: var(--field);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 18px 22px;
        margin: 28px 0 36px;
    }

        .legal-toc h4 {
            margin: 0 0 10px;
            font-family: "Poppins", sans-serif;
            font-size: .95rem;
            color: var(--brand-deep);
        }

        .legal-toc ol {
            margin: 0;
            padding-left: 20px;
            columns: 2;
            font-size: .9rem;
        }

            .legal-toc ol li {
                margin-bottom: 6px;
            }

            .legal-toc a {
                color: var(--ink);
                text-decoration: none;
            }

                .legal-toc a:hover {
                    color: var(--brand);
                    text-decoration: underline;
                }

    .legal-callout {
        display: flex;
        gap: 14px;
        background: #fff7ed;
        border: 1px solid #fed7aa;
        border-radius: 14px;
        padding: 18px 20px;
        margin: 18px 0 26px;
    }

        .legal-callout i {
            color: #c2410c;
            font-size: 1.3rem;
            flex: 0 0 auto;
            margin-top: 2px;
        }

        .legal-callout strong {
            display: block;
            color: #9a3412;
            margin-bottom: 4px;
        }

        .legal-callout p {
            margin: 0;
            color: #7c2d12;
            font-size: .92rem;
            line-height: 1.6;
        }

    .ps-about section + section {
        margin-top: 30px;
    }

    .ps-about h2 {
        display: flex;
        align-items: baseline;
        gap: 10px;
    }

        .ps-about h2 .num {
            color: var(--brand);
            font-family: "DM Mono", monospace;
            font-size: .85rem;
        }


/* ==================== DMS.UI/Views/Site/TrackDonation.cshtml ==================== */
    .td-table-wrap { overflow-x: auto; }
    .td-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 720px; }
    .td-table th {
        text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .4px;
        color: var(--muted); padding: 10px 12px; border-bottom: 2px solid var(--line);
    }
    .td-table td { padding: 13px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; color: #374151; }
    .td-table tr:last-child td { border-bottom: none; }
    .td-ngo { font-weight: 600; color: var(--brand-deep); }
    .td-amount { font-family: "Poppins", sans-serif; font-weight: 700; color: var(--brand-deep); white-space: nowrap; }
    .td-receipt-btn {
        display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
        background: var(--field); color: var(--brand-dark); font-weight: 600; font-size: .82rem;
        border: 1px solid var(--line); white-space: nowrap;
    }
    .td-receipt-btn:hover { background: var(--brand); color: #fff; }
    .td-no-receipt { color: var(--muted); font-size: .82rem; }
    .td-greeting { text-align: center; margin-bottom: 26px; }
    .td-greeting h2 { color: var(--brand-deep); font-size: 1.4rem; margin-bottom: 4px; }
    .td-greeting p { color: var(--muted); margin: 0; }


/* ==================== DMS.UI/Views/Shared/_ChatWidget.cshtml (shared partial — also in the other stylesheet) ==================== */
    #ngoChatBubble {
        position: fixed; right: 22px; bottom: 22px; z-index: 2000;
        width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
        background: linear-gradient(150deg, #6C5FD6 0%, #534AB7 55%, #3C3489 100%);
        color: #fff; font-size: 22px; box-shadow: 0 10px 28px rgba(38,33,92,.35);
        display: flex; align-items: center; justify-content: center; transition: transform .15s;
    }
    #ngoChatBubble:hover { transform: scale(1.06); }
    #ngoChatBubble .unread-dot {
        position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%;
        background: #ef4444; border: 2px solid #fff; display: none;
    }

    #ngoChatPanel {
        position: fixed; right: 22px; bottom: 92px; z-index: 2000;
        width: 350px; max-width: calc(100vw - 32px); height: 480px; max-height: calc(100vh - 130px);
        background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(15,12,41,.28);
        display: none; flex-direction: column; overflow: hidden;
        font-family: 'DM Sans', 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    }
    #ngoChatPanel.open { display: flex; }

    .ngo-chat-head {
        background: linear-gradient(150deg, #6C5FD6 0%, #534AB7 55%, #3C3489 100%);
        color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
    }
    .ngo-chat-head .t { font-weight: 700; font-size: 14px; }
    .ngo-chat-head .s { font-size: 11px; opacity: .85; display: flex; align-items: center; gap: 5px; }
    .ngo-chat-head .s .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #34d399; animation: ngoPulse 1.6s infinite; }
    @keyframes ngoPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
    .ngo-chat-head button {
        margin-left: auto; background: rgba(255,255,255,.15); border: none; color: #fff;
        width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font-size: 13px;
    }

    #ngoChatBody { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

    .ngo-chat-gate { flex: 1 1 auto; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
    .ngo-chat-gate .gate-intro { font-size: 12.5px; color: #374151; line-height: 1.5; margin-bottom: 4px; }
    .ngo-chat-gate input, .ngo-chat-gate textarea {
        border: 1px solid #e5e7eb; border-radius: 9px; padding: 9px 11px; font-size: 13px; font-family: inherit; width: 100%; box-sizing: border-box;
    }
    .ngo-chat-gate textarea { resize: none; height: 64px; }
    .ngo-chat-gate .gate-err { font-size: 11.5px; color: #dc2626; display: none; }
    .ngo-chat-gate button#ngoGateStart {
        background: #534AB7; color: #fff; border: none; border-radius: 10px; padding: 10px; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 4px;
    }
    .ngo-chat-gate button#ngoGateStart:disabled { opacity: .6; cursor: default; }

    .ngo-chat-log { flex: 1 1 auto; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #f9fafb; }
    .ngo-msg { max-width: 82%; padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
    .ngo-msg .who { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; opacity: .65; margin-bottom: 2px; }
    .ngo-msg.user { align-self: flex-end; background: #534AB7; color: #fff; border-bottom-right-radius: 4px; }
    .ngo-msg.agent { align-self: flex-start; background: #fff; color: #111827; border: 1px solid #eceef2; border-bottom-left-radius: 4px; }
    .ngo-msg.system { align-self: center; background: #f5f3ff; color: #6d28d9; font-size: 11.5px; text-align: center; border-radius: 10px; }

    .ngo-chat-human { align-self: center; margin: 2px 0; }
    .ngo-chat-human button {
        background: #fff; border: 1px solid #534AB7; color: #534AB7; font-size: 11.5px; font-weight: 600;
        border-radius: 999px; padding: 5px 12px; cursor: pointer;
    }
    .ngo-chat-human button:hover { background: #534AB7; color: #fff; }

    .ngo-contact-form { align-self: stretch; background: #fff; border: 1px solid #eceef2; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
    .ngo-contact-form input, .ngo-contact-form textarea {
        border: 1px solid #e5e7eb; border-radius: 8px; padding: 7px 9px; font-size: 12.5px; font-family: inherit; width: 100%; box-sizing: border-box;
    }
    .ngo-contact-form textarea { resize: none; height: 56px; }
    .ngo-contact-form .row { display: flex; gap: 6px; }
    .ngo-contact-form .row input { flex: 1; min-width: 0; }
    .ngo-contact-form button {
        background: #534AB7; color: #fff; border: none; border-radius: 8px; padding: 7px; font-size: 12px; font-weight: 600; cursor: pointer;
    }
    .ngo-contact-form button:disabled { opacity: .6; cursor: default; }
    .ngo-contact-form .cf-err { font-size: 11px; color: #dc2626; display: none; }

    .ngo-chat-input { flex: 0 0 auto; display: flex; gap: 8px; padding: 10px; border-top: 1px solid #eceef2; background: #fff; }
    .ngo-chat-input textarea {
        flex: 1; resize: none; border: 1px solid #e5e7eb; border-radius: 12px; padding: 9px 11px;
        font-size: 13px; font-family: inherit; height: 38px; max-height: 90px;
    }
    .ngo-chat-input button {
        background: #534AB7; color: #fff; border: none; border-radius: 10px; width: 38px; height: 38px; cursor: pointer; font-size: 14px; flex: 0 0 38px;
    }
    .ngo-chat-input button:disabled { opacity: .5; cursor: default; }
    .ngo-chat-closed-note { flex: 0 0 auto; padding: 12px; border-top: 1px solid #eceef2; background: #fafafa; font-size: 12px; color: #9ca3af; text-align: center; }

    @media (max-width: 480px) {
        #ngoChatPanel { right: 16px; bottom: 84px; width: calc(100vw - 32px); }
        #ngoChatBubble { right: 16px; bottom: 16px; }
    }


/* ==================== DMS.UI/Views/Site/NgoProfile.cshtml (static portion — --npf-brand set inline per-NGO) ==================== */
    .npf-banner {
        height: 210px;
        background: linear-gradient(120deg, var(--npf-brand), #1c1748 130%);
        position: relative; overflow: hidden;
    }
    .npf-banner::before {
        content: ""; position: absolute; inset: 0; opacity: .55; pointer-events: none;
        background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
        background-size: 24px 24px;
    }
    .npf-banner::after {
        content: ""; position: absolute; inset: 0;
        background-image: radial-gradient(circle at 12% 22%, rgba(255,255,255,.20), transparent 42%),
                           radial-gradient(circle at 88% 82%, rgba(255,255,255,.13), transparent 48%),
                           linear-gradient(180deg, rgba(15,12,41,0) 45%, rgba(15,12,41,.30) 100%);
    }

    .npf-card-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
    .npf-card {
        background: #fff; border-radius: 24px; margin-top: -84px; position: relative; z-index: 2;
        box-shadow: 0 28px 64px -22px rgba(28,23,72,.30), 0 1px 0 rgba(0,0,0,.03);
        padding: 34px 40px 38px;
    }
    .npf-card-top { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }

    .npf-logo {
        width: 92px; height: 92px; flex: none; border-radius: 20px; overflow: hidden;
        display: flex; align-items: center; justify-content: center;
        font-size: 32px; font-weight: 700; color: #fff;
        background: linear-gradient(145deg, var(--npf-brand), #1c1748);
        box-shadow: 0 10px 24px -6px rgba(28,23,72,.35);
        border: 4px solid #fff; margin-top: -18px;
    }
    .npf-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

    .npf-identity { flex: 1; min-width: 240px; padding-top: 4px; }
    .npf-identity h1 { margin: 0 0 10px; font-size: 1.8rem; font-weight: 800; letter-spacing: -.5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .npf-verified {
        font-size: .68rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #22c55e, #15803d);
        padding: 4px 12px 4px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px;
        letter-spacing: .2px; vertical-align: middle; box-shadow: 0 4px 12px -3px rgba(21,128,61,.55);
    }

    .npf-meta { display: flex; flex-wrap: wrap; gap: 8px; color: #4b5563; font-size: .84rem; margin-bottom: 18px; }
    .npf-meta span {
        display: inline-flex; align-items: center; gap: 7px; background: #f8f8fc; border: 1px solid #f0f0f7;
        padding: 5px 12px 5px 10px; border-radius: 999px;
    }
    .npf-meta i { color: var(--npf-brand); font-size: .78rem; width: 14px; text-align: center; }

    .npf-actions { display: flex; gap: 10px; flex-wrap: wrap; }
    .npf-btn {
        display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px;
        font-size: .87rem; font-weight: 700; text-decoration: none; transition: .15s; white-space: nowrap;
    }
    .npf-btn-primary { background: var(--npf-brand); color: #fff; box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--npf-brand) 60%, transparent); }
    .npf-btn-primary:hover { filter: brightness(1.08); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--npf-brand) 65%, transparent); }
    .npf-btn-outline { border: 1.5px solid var(--line); color: #374151; background: #fff; }
    .npf-btn-outline:hover { border-color: var(--npf-brand); color: var(--npf-brand); transform: translateY(-2px); }

    .npf-social { display: flex; gap: 8px; flex: none; }
    .npf-social a {
        width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        background: #f5f4ff; color: var(--npf-brand); text-decoration: none; font-size: 14px; transition: .15s;
    }
    .npf-social a:hover { background: var(--npf-brand); color: #fff; transform: translateY(-2px); }

    .npf-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
    .npf-stat {
        flex: 1; min-width: 150px; background: #f8f8fc; border: 1px solid #f0f0f7; border-radius: 16px;
        padding: 14px 18px; display: flex; align-items: center; gap: 13px; transition: .15s;
    }
    .npf-stat:hover { background: #fff; border-color: color-mix(in srgb, var(--npf-brand) 25%, var(--line)); box-shadow: 0 10px 24px -14px rgba(28,23,72,.22); }
    .npf-stat-ic {
        width: 42px; height: 42px; flex: none; border-radius: 12px;
        background: linear-gradient(145deg, var(--npf-brand), #1c1748); color: #fff;
        display: flex; align-items: center; justify-content: center; font-size: 16px;
    }
    .npf-stat b { display: block; font-size: 1.12rem; font-weight: 800; line-height: 1.15; color: #111827; }
    .npf-stat span { display: block; font-size: .75rem; color: var(--muted); margin-top: 1px; }

    .npf-mission-text {
        max-width: 1120px; margin: 0 auto; padding: 28px 34px;
        background: #f8f8fc; border: 1px solid #f0f0f7; border-radius: 16px;
        color: #4b5563; line-height: 1.8; font-size: .97rem;
    }
    /* Rich text authored in CKEditor — style the block elements it can produce. */
code {
    word-break: break-word;
    padding: 0.125rem 0.3125rem;
    border-radius: 0.1875rem;
    background: white;
    color: #FF5E5E;
}

[data-theme-version="dark"] code {
    background: rgba(255, 94, 94, 0.1);
}
    .npf-mission-text > *:first-child { margin-top: 0; }
    .npf-mission-text > *:last-child { margin-bottom: 0; }
    .npf-mission-text p { margin: 0 0 14px; }
    .npf-mission-text h1, .npf-mission-text h2, .npf-mission-text h3, .npf-mission-text h4 {
        color: #111827; font-weight: 800; line-height: 1.3; margin: 22px 0 10px;
    }
    .npf-mission-text h2 { font-size: 1.25rem; }
    .npf-mission-text h3 { font-size: 1.1rem; }
    .npf-mission-text h4 { font-size: 1rem; }
    .npf-mission-text ul, .npf-mission-text ol { margin: 0 0 14px; padding-left: 22px; }
    .npf-mission-text li { margin-bottom: 6px; }
    .npf-mission-text a { color: var(--npf-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
    .npf-mission-text strong {  }
    .npf-mission-text blockquote {
        margin: 0 0 14px; padding: 10px 18px; border-left: 3px solid var(--npf-brand);
        background: #fff; color: #374151; font-style: italic; border-radius: 0 10px 10px 0;
    }
    .npf-mission-text table { width: 100%; border-collapse: collapse; margin: 0 0 14px; }
    .npf-mission-text table td, .npf-mission-text table th { border: 1px solid #e5e7eb; padding: 8px 10px; }
    .npf-mission-text img { max-width: 100%; border-radius: 10px; }
    .npf-mission-text hr { border: none; border-top: 1px solid #e5e7eb; margin: 18px 0; }

    /* section nav */
    .npf-subnav {
        position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
        border-bottom: 1px solid var(--line); margin-top: 34px;
    }
    .npf-subnav-inner { max-width: 1120px; margin: 0 auto; padding: 0 20px; display: flex; gap: 4px; overflow-x: auto; }
    .npf-subnav a {
        padding: 15px 16px; font-size: .85rem; font-weight: 600; color: var(--muted); text-decoration: none;
        border-bottom: 2.5px solid transparent; white-space: nowrap; transition: .15s;
    }
    .npf-subnav a:hover { color: #111827; }
    .npf-subnav a.active { color: var(--npf-brand); border-bottom-color: var(--npf-brand); }

    .npf-section { padding: 54px 0; }
    .npf-section-head { text-align: center; max-width: 620px; margin: 0 auto 36px; }
    .npf-section-eyebrow {
        display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; letter-spacing: .5px;
        text-transform: uppercase; color: var(--npf-brand); background: #f5f4ff; padding: 5px 13px; border-radius: 999px; margin-bottom: 14px;
    }
    .npf-section-head h2 { margin: 0 0 8px; font-size: 1.55rem; }
    .npf-section-head p { color: var(--muted); margin: 0; font-size: .93rem; }

    .npf-empty {
        max-width: 420px; margin: 0 auto; text-align: center; padding: 42px 20px;
        background: #fafaff; border: 1px dashed #e3e1f5; border-radius: 18px;
    }
    .npf-empty .ic {
        width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 1px solid var(--line);
        display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; color: var(--npf-brand); font-size: 20px;
    }
    .npf-empty p { margin: 0; color: var(--muted); font-size: .9rem; }

    .npf-rating-summary {
        display: flex; align-items: center; justify-content: center; gap: 22px; margin: 0 auto 40px; max-width: 440px;
        background: linear-gradient(150deg, #fff, #fbfaff); border: 1px solid var(--line); border-radius: 18px; padding: 24px 30px;
        box-shadow: 0 18px 44px -26px rgba(28,23,72,.28);
    }
    .npf-rating-num { font-size: 2.5rem; font-weight: 800; line-height: 1; color: #111827; }
    .npf-rating-summary .stars { color: #f59e0b; font-size: 17px; letter-spacing: 2px; margin: 5px 0 3px; }
    .npf-rating-summary .stars i.empty { color: #e5e7eb; }
    .npf-rating-summary .count { font-size: .78rem; color: var(--muted); }

    .npf-review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; max-width: 1040px; margin: 0 auto; }
    .npf-review-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px; position: relative; transition: .18s; }
    .npf-review-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(28,23,72,.22); border-color: transparent; }
    .npf-review-card .quote-mark { position: absolute; top: 16px; right: 20px; font-size: 34px; color: #f0f0f7; line-height: 1; font-family: Georgia, serif; }
    .npf-review-card .stars { color: #f59e0b; font-size: 13px; margin-bottom: 12px; }
    .npf-review-card .stars i.empty { color: #e5e7eb; }
    .npf-review-card p { margin: 0 0 18px; color: #374151; font-size: .92rem; line-height: 1.65; }
    .npf-review-who { display: flex; align-items: center; gap: 10px; }
    .npf-review-avatar {
        width: 34px; height: 34px; border-radius: 50%; background: var(--npf-brand); color: #fff;
        display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; flex: none;
    }
    .npf-review-who b { display: block; font-size: .85rem; color: #111827; line-height: 1.3; }
    .npf-review-who span { display: block; font-size: .74rem; color: var(--muted); }

    .npf-fb-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 36px; max-width: 1120px; margin: 0 auto; align-items: flex-start; }
    @media (max-width: 800px) { .npf-fb-wrap { grid-template-columns: 1fr; } }
    .npf-fb-intro { padding-top: 8px; }
    .npf-fb-intro .ic {
        width: 52px; height: 52px; border-radius: 14px; background: #f5f4ff; color: var(--npf-brand);
        display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 16px;
    }
    .npf-fb-intro h3 { margin: 0 0 10px; font-size: 1.15rem; }
    .npf-fb-intro p { color: var(--muted); font-size: .89rem; line-height: 1.65; margin: 0 0 20px; }
    .npf-fb-intro ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
    .npf-fb-intro li { display: flex; gap: 9px; align-items: flex-start; font-size: .85rem; color: #4b5563; }
    .npf-fb-intro li i { color: #16a34a; margin-top: 3px; font-size: .8rem; }

    .npf-fb-form { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 30px 32px; box-shadow: 0 18px 46px -22px rgba(28,23,72,.18); }
    .npf-fb-form .f-group { margin-bottom: 18px; }
    .npf-fb-form .f-label { display: block; font-size: .8rem; font-weight: 700; color: #374151; margin-bottom: 7px; }
    .npf-fb-form .form-control {
        width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; font-size: .88rem;
        font-family: inherit; color: #111827; background: #fff; outline: none; transition: .15s;
    }
    .npf-fb-form .form-control:focus { border-color: var(--npf-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--npf-brand) 12%, transparent); }
    .npf-fb-form textarea.form-control { resize: vertical; }

    .npf-type-toggle { display: flex; gap: 8px; background: #f5f4f9; padding: 4px; border-radius: 12px; }
    .npf-type-toggle label {
        flex: 1; text-align: center; padding: 9px; border-radius: 9px; cursor: pointer;
        font-size: .85rem; font-weight: 700; color: #6b7280; transition: .15s;
    }
    .npf-type-toggle input { display: none; }
    .npf-type-toggle label:has(input:checked) { background: #fff; color: var(--npf-brand); box-shadow: 0 2px 6px rgba(0,0,0,.08); }

    .npf-star-picker { display: flex; gap: 6px; font-size: 28px; color: #e5e7eb; cursor: pointer; }
    .npf-star-picker i { transition: color .1s, transform .1s; }
    .npf-star-picker i.on { color: #f59e0b; }
    .npf-star-picker i:hover { transform: scale(1.1); }

    .npf-captcha-row {
        display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
        background: #f8f8fc; border: 1px solid #f0f0f7; border-radius: 12px; padding: 10px 12px;
    }
    .npf-captcha-row img { height: 44px; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
    .npf-captcha-refresh {
        width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line); background: #fff; cursor: pointer;
        display: flex; align-items: center; justify-content: center; color: #6b7280; flex: none; transition: .15s;
    }
    .npf-captcha-refresh:hover { border-color: var(--npf-brand); color: var(--npf-brand); background: #f5f4ff; }
    .npf-captcha-row input { flex: 1; min-width: 140px; background: #fff; }

    .npf-fb-submit {
        width: 100%; margin-top: 4px; padding: 14px; border: none; border-radius: 12px;
        background: linear-gradient(120deg, var(--npf-brand), #1c1748 160%); color: #fff;
        font-size: .92rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
        transition: .15s;
    }
    .npf-fb-submit:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(28,23,72,.5); }

    .npf-alert { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 12px 16px; border-radius: 10px; font-size: .87rem; }
    .npf-alert-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
    .npf-alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ==================================================================
   User Manual / documentation page ("How NGO Desk Works")
   Two-column docs layout: sticky left TOC sidebar + right content.
   Reuses brand tokens + .ps-how-steps (numbered list) + .legal-callout
   from elsewhere in this file rather than redefining them.
   ================================================================== */

.um-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35);
    color: #fff; font-size: .82rem; font-weight: 600;
    padding: 7px 16px; border-radius: 999px; margin-bottom: 18px;
    position: relative; z-index: 1;
}

/* ---------- Layout ---------- */
.um-docs-layout {
    display: grid;
    grid-template-columns: 272px 1fr;
    gap: 40px;
    /* Deliberately NOT align-items:start: the sidebar's sticky child needs its
       grid cell (aside) to stretch to the full row height (matching .um-content)
       so it has room to stick while scrolling — align-items:start would shrink
       aside down to its own content height and the sticky sidebar would run out
       of room after ~one screen of scroll instead of staying pinned. */
}
@media (max-width: 940px) {
    .um-docs-layout { grid-template-columns: 1fr; }
}

/* ---------- Sidebar / TOC ---------- */
.um-sidebar {
    position: sticky; top: 84px;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px 8px 20px 20px;
    box-shadow: 0 10px 30px rgba(38,33,92,.06);
}
.um-sidebar::-webkit-scrollbar { width: 6px; }
.um-sidebar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }

.um-sidebar-toggle {
    display: none;
    width: 100%; align-items: center; justify-content: space-between; gap: 10px;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: 13px 16px; font-weight: 600; color: var(--brand-deep); font-size: .95rem;
    cursor: pointer; margin-bottom: 14px;
}
.um-sidebar-toggle i.fa-chevron-down { transition: transform .18s; color: var(--muted); }
.um-sidebar-toggle[aria-expanded="true"] i.fa-chevron-down { transform: rotate(180deg); }

.um-toc { display: flex; flex-direction: column; gap: 22px; padding-right: 8px; }
.um-toc-group h4 {
    font-family: "Poppins", sans-serif; font-size: .74rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
    margin: 0 0 8px 10px;
}
.um-toc-group nav { display: flex; flex-direction: column; gap: 2px; }
.um-toc-group a {
    display: block; padding: 8px 10px; border-radius: 9px;
    color: #374151; font-size: .89rem; line-height: 1.35;
    border-left: 2px solid transparent; transition: .12s;
}
.um-toc-group a:hover { background: var(--field); color: var(--brand-deep); }
.um-toc-group a.active {
    background: var(--field); color: var(--brand-deep); font-weight: 600;
    border-left-color: var(--brand);
}

@media (max-width: 940px) {
    .um-sidebar-toggle { display: flex; }
    .um-sidebar {
        position: static; max-height: none; overflow: visible;
        padding: 10px; display: none;
    }
    .um-sidebar.open { display: block; }
    .um-toc { max-height: 60vh; overflow-y: auto; padding: 8px; }
}

/* ---------- Content ---------- */
.um-content { min-width: 0; display: flex; flex-direction: column; gap: 0; }

.um-topic {
    scroll-margin-top: 96px;
    padding: 0 0 44px;
    margin-bottom: 44px;
    border-bottom: 1px solid var(--line);
}
.um-topic:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.um-topic-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.um-icon-badge {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--brand), var(--brand-deep));
    color: #fff; font-size: 1.15rem;
}
.um-topic-head h2 { font-size: 1.5rem; color: var(--brand-deep); margin: 4px 0 0; flex: 1 1 auto; min-width: 200px; }

.um-audience {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .74rem; font-weight: 700; letter-spacing: .02em;
    padding: 5px 12px; border-radius: 999px; white-space: nowrap; margin-top: 6px;
}
.um-audience.ngo { background: #ece9f7; color: var(--brand-deep); }
.um-audience.volunteer { background: #eef2ff; color: #4338ca; }
.um-audience.donor { background: #fce7f3; color: #9d174d; }
.um-audience.everyone { background: #ecfdf5; color: #065f46; }

.um-lead { font-size: 1.03rem; color: #374151; line-height: 1.75; margin: 0 0 18px; }
.um-topic p { color: #4b5563; line-height: 1.75; }
.um-topic h3 { font-size: 1.08rem; color: var(--brand-deep); margin: 26px 0 10px; }
.um-topic ul.um-list { margin: 0 0 16px; padding-left: 20px; color: #4b5563; line-height: 1.7; }
.um-topic ul.um-list li { margin-bottom: 6px; }

/* Numbered step list — reuses .ps-how-steps counter styling defined above,
   just used outside its original .ps-how-col wrapper. */
.um-topic .ps-how-steps { margin: 0 0 18px; max-width: 720px; }

/* ---------- Tip / info callout (positive variant of .legal-callout) ---------- */
.um-tip {
    display: flex; gap: 14px; background: var(--field); border: 1px solid var(--line);
    border-radius: 14px; padding: 16px 20px; margin: 18px 0;
}
.um-tip i { color: var(--brand); font-size: 1.2rem; flex: 0 0 auto; margin-top: 2px; }
.um-tip strong { display: block; color: var(--brand-deep); margin-bottom: 3px; }
.um-tip p { margin: 0; color: #4b5563; font-size: .92rem; line-height: 1.6; }

/* ---------- Role/permission mini table ---------- */
.um-table { width: 100%; border-collapse: collapse; margin: 14px 0 20px; font-size: .89rem; }
.um-table th, .um-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.um-table th { color: var(--brand-deep); font-family: "Poppins", sans-serif; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; background: var(--field); }
.um-table td { color: #4b5563; }
.um-table tr:last-child td { border-bottom: none; }

/* ---------- Process flow diagram ---------- */
.um-flow { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin: 20px 0; }
.um-flow-step {
    flex: 1 1 160px; background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 16px; text-align: center; box-shadow: 0 8px 22px rgba(38,33,92,.06);
}
.um-flow-step .fs-ic {
    width: 38px; height: 38px; border-radius: 11px; margin: 0 auto 10px;
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: .95rem;
    background: linear-gradient(135deg, var(--brand), var(--brand-deep));
}
.um-flow-step b { display: block; color: var(--brand-deep); font-size: .88rem; margin-bottom: 3px; }
.um-flow-step span { color: var(--muted); font-size: .8rem; line-height: 1.4; display: block; }
.um-flow-arrow { align-self: center; color: var(--line); font-size: 1.2rem; flex: 0 0 auto; }
@media (max-width: 700px) { .um-flow-arrow { transform: rotate(90deg); margin: -2px 0; } }

/* ---------- CSS-drawn UI mockup frames ("visuals") ----------
   Illustrative previews of the actual screens, styled to match the
   brand — not literal screenshots. */
.um-mock {
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 16px 40px rgba(38,33,92,.10); overflow: hidden; margin: 20px 0 26px; max-width: 640px;
}
.um-mock-bar {
    display: flex; align-items: center; gap: 6px;
    background: var(--field); border-bottom: 1px solid var(--line); padding: 10px 14px;
}
.um-mock-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.um-mock-bar span:nth-child(1) { background: #fca5a5; }
.um-mock-bar span:nth-child(2) { background: #fcd34d; }
.um-mock-bar span:nth-child(3) { background: #86efac; }
.um-mock-bar em {
    font-style: normal; margin-left: 10px; font-size: .76rem; color: var(--muted);
    font-family: "DM Sans", sans-serif;
}
.um-mock-body { padding: 18px; }

/* stat tiles */
.um-mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.um-mock-stat { background: var(--field); border-radius: 12px; padding: 12px; }
.um-mock-stat i { color: var(--brand); font-size: .85rem; margin-bottom: 8px; display: block; }
.um-mock-stat .bar { height: 9px; border-radius: 6px; background: linear-gradient(90deg, var(--brand), var(--brand-deep)); margin-bottom: 6px; }
.um-mock-stat .bar.short { width: 55%; }
.um-mock-stat .lbl { height: 6px; width: 70%; border-radius: 4px; background: var(--line); }

/* table rows */
.um-mock-table .mrow {
    display: flex; align-items: center; gap: 10px; padding: 9px 4px;
    border-bottom: 1px dashed var(--line);
}
.um-mock-table .mrow:last-child { border-bottom: none; }
.um-mock-table .mavatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); flex: 0 0 auto; }
.um-mock-table .mbars { flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; }
.um-mock-table .mbars .b1 { height: 7px; width: 62%; background: #d7d2f2; border-radius: 4px; }
.um-mock-table .mbars .b2 { height: 6px; width: 40%; background: var(--line); border-radius: 4px; }
.um-mock-table .mpill { flex: 0 0 auto; font-size: .68rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.um-mock-table .mpill.ok { background: #dcfce7; color: #166534; }
.um-mock-table .mpill.pending { background: #fef3c7; color: #92400e; }
.um-mock-table .mpill.info { background: #ece9f7; color: var(--brand-deep); }

/* form fields */
.um-mock-form .mfield { margin-bottom: 12px; }
.um-mock-form .mlabel { height: 6px; width: 90px; background: var(--line); border-radius: 4px; margin-bottom: 7px; }
.um-mock-form .minput { height: 30px; border-radius: 8px; background: var(--field); border: 1px solid var(--line); }
.um-mock-form .mbtn {
    display: inline-block; margin-top: 4px; padding: 9px 22px; border-radius: 999px;
    background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff;
    font-size: .78rem; font-weight: 700;
}

/* card grid (campaigns) */
.um-mock-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.um-mock-card { background: var(--field); border-radius: 12px; padding: 10px; }
.um-mock-card .cimg { height: 46px; border-radius: 8px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); margin-bottom: 8px; }
.um-mock-card .clbl { height: 6px; width: 80%; background: var(--line); border-radius: 4px; margin-bottom: 6px; }
.um-mock-card .cprog { height: 6px; border-radius: 4px; background: #d7d2f2; overflow: hidden; }
.um-mock-card .cprog i { display: block; height: 100%; width: 62%; background: linear-gradient(90deg, var(--brand), var(--brand-deep)); }

/* mini bar chart */
.um-mock-chart { display: flex; align-items: flex-end; gap: 8px; height: 90px; padding-top: 10px; }
.um-mock-chart i { flex: 1 1 auto; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--brand), var(--brand-deep)); }

/* sidebar-nav preview (dashboard chrome) */
.um-mock-nav { display: flex; flex-direction: column; gap: 4px; }
.um-mock-nav .nitem { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; }
.um-mock-nav .nitem .nic { width: 16px; height: 16px; border-radius: 5px; background: var(--line); flex: 0 0 auto; }
.um-mock-nav .nitem .nlbl { height: 6px; width: 90px; background: var(--line); border-radius: 4px; }
.um-mock-nav .nitem.active { background: linear-gradient(135deg, var(--brand), var(--brand-deep)); }
.um-mock-nav .nitem.active .nic, .um-mock-nav .nitem.active .nlbl { background: rgba(255,255,255,.85); }

@media (max-width: 480px) {
    .um-mock-stats { grid-template-columns: repeat(2, 1fr); }
    .um-mock-cards { grid-template-columns: 1fr; }
}