/* ═══════════════════════════════════════════════════════════════════
   PROFILE NOVA  —  Modern User Profile UI  |  MindStick 2026
   Depends on: ms-theme-nova.css  (CSS variables loaded first)
   Design ref: MindStick profile page screenshot (FlyFin style)
═══════════════════════════════════════════════════════════════════ */
:root{
    font-family: inherit;
}
/* ── 1. PAGE SCAFFOLD ─────────────────────────────────────────── */
.pn-page {
    padding: 16px 12px;
    background: var(--bg2);
    min-height: 80vh;
}

.pn-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

.pn-layout--full { grid-template-columns: 1fr; }
.pn-layout__main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pn-layout__aside { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* ── 2. BASE CARD ─────────────────────────────────────────────── */
.pn-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

/* ── 3. PROFILE HEADER CARD ───────────────────────────────────── */

/* 3a. Banner */
.pn-banner {
    position: relative;
    width: 100%;
    height: 150px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}

.pn-banner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Share icon — top right of banner */
.pn-banner__share {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
    border: none;
    backdrop-filter: brightness(0.5);
}
.pn-banner__share:hover { background: rgba(255,255,255,.32); }

/* Edit banner button — top right when owner */
.pn-banner__edit-btn {
    position: absolute;
    top: 10px;
    right: 48px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 15px 10px;
    border-radius: 20px;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    font-family: var(--f-sans);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
    backdrop-filter: brightness(0.5);
}
.pn-banner__edit-btn:hover { background: rgba(255,255,255,.30); color: #fff; }

/* 3b. Avatar — overlaps banner bottom-left */
.pn-avatar-wrap {
    position: relative;
    margin-top: -44px;
    margin-left: 20px;
    display: inline-block;
    z-index: 3;
}

.pn-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: var(--bg3);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    display: block;
    cursor: pointer;
    position: relative;
}

.pn-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Camera overlay for owner */
.pn-avatar__edit {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .18s;
}
.pn-avatar:hover .pn-avatar__edit { background: rgba(0,0,0,.38); }

.pn-avatar__edit-icon {
    opacity: 0;
    color: #fff;
    transition: opacity .18s;
}
.pn-avatar:hover .pn-avatar__edit-icon { opacity: 1; }

/* Premium ring */
.pn-avatar--premium {
    border-color: var(--violet);
    box-shadow: 0 0 0 2px rgba(249,115,22,.2), 0 2px 10px rgba(0,0,0,.15);
}

/* 3c. Profile info block */
.pn-info {
    padding: 8px 20px 16px;
}

.pn-info__name {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 2px;
    font-family: var(--f-display);
    text-transform: capitalize;
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pn-info__desc {
    font-size: .855rem;
    color: #4b5563;
    margin: 0 0 8px;
    line-height: 1.55;
}

/* Meta row: location · employees · followers */
.pn-info__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: .8rem;
    color: #6b7280;
    margin-bottom: 12px;
}

.pn-info__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pn-info__meta-item svg { flex-shrink: 0; }

.pn-info__followers-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    color: var(--violet);
    font-family: var(--f-sans);
    transition: color .15s;
}
.pn-info__followers-btn:hover { color: var(--violet-dk); text-decoration: underline; }

/* 3d. Action buttons row */
.pn-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* More dropdown wrapper — must be inline-flex so it sits in the button row */
.more-area {
    display: inline-flex;
    position: relative;
}

/* ── 4. BUTTON SYSTEM ─────────────────────────────────────────── */
.pn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 34px;
    padding: 0 16px;
    border-radius: 20px;
    font-size: .83rem;
    font-weight: 600;
    font-family: var(--f-sans);
    cursor: pointer;
    border: 1.5px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s, box-shadow .15s, transform 80ms;
    outline: none;
    line-height: 1;
    user-select: none;
    touch-action: manipulation;
    -webkit-appearance: none;
}
.pn-btn:active { transform: scale(.97); }

/* Primary — orange fill (Follow) */
.pn-btn--primary {
    background: var(--follow);
    color: #fff;
    border-color: var(--follow);
}
.pn-btn--primary:hover {
    background: var(--violet-dk);
    border-color: var(--violet-dk);
    box-shadow: 0 4px 14px rgba(249,115,22,.35);
    color: #fff;
}

/* Outline — ghost (Message, More) */
.pn-btn--outline {
    background: #fff;
    color: #374151;
    border-color: #d1d5db;
}
.pn-btn--outline:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #111827;
}

/* Warning / Upgrade */
.pn-btn--warning {
    background: #fef3c7;
    color: #92400e;
    border-color: #fcd34d;
}
.pn-btn--warning:hover { background: #fde68a; }

/* Small variant */
.pn-btn--sm {
    height: 28px;
    padding: 0 12px;
    font-size: .78rem;
}

/* Follow button active (Following) state */
.btn-fllow.active,
.pn-btn--primary.active {
    background: rgba(249,115,22,.1);
    color: var(--violet-dk);
    border-color: var(--violet);
}

/* ── 5. TAB BAR ───────────────────────────────────────────────── */
.pn-tabs {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid #f3f4f6;
    padding: 0 12px;
    gap: 0;
    background: #fff;
}
.pn-tabs::-webkit-scrollbar { display: none; }

/* Dynamically-created buttons from GetProfileButtons all get class "btn" */
    .pn-tabs .btn,
    .pn-tabs a.btn {
        display: inline-flex;
        align-items: center;
        height: 44px;
        padding: 0 14px;
        font-size: .845rem;
        font-weight: 500;
        color: #6b7280;
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        cursor: pointer;
        white-space: nowrap;
        text-decoration: none;
        font-family: var(--f-sans);
        transition: color .15s, border-color .15s;
        touch-action: manipulation;
        outline: none;
        margin-bottom: -1px;
        letter-spacing: .01em;
    }
.pn-tabs .btn:hover { color: #111827; }
.pn-tabs .btn.active,
.pn-tabs a.btn.active {
    color: var(--violet);
    border-bottom-color: var(--violet);
    font-weight: 700;
}
.pn-tabs .btn.btn-advance { color: #6b7280; }
.pn-tabs .btn.btn-advance:hover { color: #374151; }
.pn-tabs .btn.btn-advance.active { color: var(--violet); }

/* ── 6. CONTENT SECTIONS ─────────────────────────────────────── */
.pn-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

.pn-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px;
    border-bottom: 1px solid #f3f4f6;
}

.pn-section__title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    font-family: var(--f-display);
    text-transform: capitalize;
}

.pn-section__body {
    padding: 14px 18px;
}

/* Edit icon button */
.pn-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: none;
    color: #9ca3af;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.pn-icon-btn:hover { background: #f3f4f6; color: var(--violet); }

/* About text */
.pn-about__content {
    font-size: .875rem;
    color: #374151;
    line-height: 1.75;
}
.pn-about__content p { margin-bottom: .65em; }
.pn-about__content p:last-child { margin-bottom: 0; }

/* Show all toggle */
.pn-about__toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--violet);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: var(--f-sans);
    transition: color .15s;
}
.pn-about__toggle:hover { color: var(--violet-dk); }

/* ── 7. DYNAMIC SECTION CONTAINERS ───────────────────────────── */
#dynamic-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Lazy-loaded area skeleton while empty */
.side-bar-list:empty,
.pn-dynamic-area:empty {
    min-height: 120px;
    border-radius: 10px;
    background: linear-gradient(90deg, #f3f4f6 25%, #fafafa 50%, #f3f4f6 75%);
    background-size: 600px 100%;
    animation: pn-shimmer 1.4s infinite linear;
    border: 1px solid #e5e7eb;
}

@keyframes pn-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

/* ── 8. SETTINGS PANEL ───────────────────────────────────────── */
.pn-settings {
    padding: 16px 18px;
}
.pn-settings__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f3f4f6;
}
.pn-settings__title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    font-family: var(--f-display);
}

/* ── 9. SIDEBAR WIDGETS ──────────────────────────────────────── */
.pn-widget {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

.pn-widget__header {
    padding: 13px 16px 10px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--ink);
    font-family: var(--f-display);
    border-bottom: 1px solid #f3f4f6;
}

.pn-widget__body {
    padding: 8px 0;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #e5e7eb transparent;
}
 

/* Remove scroll constraint when expanded via "See More" */
.pn-widget__body.expanded {
    max-height: none;
    overflow-y: visible;
}

/* "See More" is a direct sibling of .pn-widget__body so jQuery
   $button.siblings('.collapsible-content') resolves correctly */
.pn-widget__see-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 9px 16px;
    font-size: .82rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    background: #fafafa;
    border: none;
    border-top: 1px solid #f3f4f6;
    font-family: var(--f-sans);
    transition: color .15s, background .15s;
    border-radius: 0 0 10px 10px;
}
.pn-widget__see-more:hover { color: var(--violet); background: var(--bg3); }

/* Rotate chevron when expanded */
.pn-widget__see-more.expanded svg {
    transform: rotate(180deg);
}
.pn-widget__see-more svg {
    transition: transform .2s ease;
    flex-shrink: 0;
}

/* People card (inside side-bar-list content) */
.pn-people-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    transition: background .12s;
}
    .pn-people-card:hover {
        background: var(--violet-lt);
    }

.pn-people-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg3);
    border: 1px solid #e5e7eb;
}
.pn-people-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pn-people-card__info { flex: 1; min-width: 0; }

.pn-people-card__name {
    font-size: .855rem;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.pn-people-card__name:hover { color: var(--violet); }

.pn-people-card__role {
    font-size: .78rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    /*margin-bottom: 6px;*/
}

.pn-people-card__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

/* ── 10. SOCIAL LINKS ────────────────────────────────────────── */
.pn-social {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.pn-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #6b7280;
    text-decoration: none;
    transition: background .15s, color .15s, transform 80ms;
    border: none;
}
.pn-social__link:hover { transform: translateY(-1px); }
.pn-social__link--facebook:hover { background: #e7f0fd; color: #1877f2; }
.pn-social__link--twitter:hover  { background: #e6f4fb; color: #1da1f2; }
.pn-social__link--linkedin:hover { background: #e6f1f9; color: #0a66c2; }
.pn-social__link--web:hover      { background: var(--bg3); color: var(--violet); }
.pn-social__link--wiki:hover     { background: #f3f4f6; color: #333; }

/* ── 11. DIVIDER ─────────────────────────────────────────────── */
.pn-divider {
    height: 1px;
    background: #f3f4f6;
    border: none;
    margin: 0;
}

/* ── 12. UTILITY ─────────────────────────────────────────────── */
.pn-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

/* ── 13. FOCUS / ACCESSIBILITY ───────────────────────────────── */
.pn-btn:focus-visible,
.pn-icon-btn:focus-visible,
.pn-social__link:focus-visible {
    outline: 2px solid var(--violet);
    outline-offset: 2px;
}
.pn-tabs .btn:focus-visible {
    outline: 2px solid var(--violet);
    outline-offset: -2px;
}

/* ── 14. OVERRIDES — server-rendered Bootstrap classes ─────── */
/* Follow/Following buttons already have btn + btn-outline-primary from Razor */
.user-profile-base-area .btn-outline-primary {
    border-color: var(--violet);
    color: var(--violet);
    background: transparent;
    border-radius: 20px;
    font-size: .83rem;
    font-weight: 600;
    padding: 4px 14px;
    transition: background .15s, box-shadow .15s;
}
.user-profile-base-area .btn-outline-primary:hover,
.user-profile-base-area .btn-outline-primary:focus {
    background: var(--violet-lt);
    border-color: var(--violet-dk);
    color: var(--violet-dk);
    box-shadow: none;
}
.user-profile-base-area .btn-outline-primary.active {
    background: var(--violet-lt);
    color: var(--violet-dk);
    border-color: var(--violet);
}

.user-profile-base-area .btn-warning {
    background: var(--violet);
    color: #fff;
    border-color: var(--violet);
    border-radius: 20px;
    font-size: .83rem;
    font-weight: 600;
    padding: 4px 14px;
}
.user-profile-base-area .btn-warning:hover {
    background: var(--violet-dk);
    border-color: var(--violet-dk);
    color: #fff;
}

.user-profile-base-area .btn-outline-secondary {
    border-color: #d1d5db;
    color: #374151;
    background: #fff;
    border-radius: 20px;
    font-size: .83rem;
    font-weight: 600;
    padding: 4px 14px;
}
.user-profile-base-area .btn-outline-secondary:hover {
    background: #f9fafb;
    color: #111827;
}

/* Dropdown from Bootstrap still used for More */
.user-profile-base-area .dropdown-menu {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    padding: 4px 0;
    font-size: .85rem;
}
.user-profile-base-area .dropdown-item {
    padding: 8px 14px;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background .12s;
}
.user-profile-base-area .dropdown-item:hover { background: #f9fafb; }
.user-profile-base-area .dropdown-item.link-danger { color: #ef4444; }
.user-profile-base-area .dropdown-item.link-danger:hover { background: #fef2f2; }
.user-profile-base-area .dropdown-divider { border-color: #f3f4f6; margin: 4px 0; }

/* ── 15. RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .pn-layout { grid-template-columns: 1fr 280px; }
}

@media (max-width: 768px) {
    .pn-layout { grid-template-columns: 1fr; }
    .pn-layout__aside { order: 2; }
    .pn-banner { height: 120px; }
    .pn-avatar { width: 76px; height: 76px; }
    .pn-avatar-wrap { margin-top: -38px; margin-left: 14px; }
    .pn-info { padding: 6px 14px 14px; }
    .pn-info__name { font-size: 1.1rem; }
    .pn-tabs { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
    .pn-tabs .btn { padding: 0 10px; font-size: .8rem; scroll-snap-align: start; flex-shrink: 0; }
    .pn-page { padding: 10px 8px; }
}

@media (max-width: 480px) {
    .pn-banner { height: 100px; }
    .pn-avatar { width: 68px; height: 68px; }
    .pn-avatar-wrap { margin-top: -34px; }
    .pn-info__name { font-size: 1rem; }
    .pn-btn { height: 30px; padding: 0 12px; font-size: .78rem; }
    .pn-btn--sm { height: 26px; font-size: .74rem; padding: 0 9px; }
    .pn-actions { gap: 6px; }
    .pn-tabs .btn { padding: 0 9px; font-size: .78rem; }
}

#user-action-btn button, #user-action-btn a,
#user-post-status button, .setting-btn,
.userpost-pagination a, .userpost-pagination-list,
#user-posts-short button, #user-posts-filter button,
#user-posts-buttons button, .show-profile-biodata {
    touch-action: manipulation;
}

/* ── UTILITY ────────────────────────────────────────────────────── */
.pn-address { font-style: normal; display: inline; }
.pn-meta-link { color: inherit; text-decoration: none; }
/*.pn-about__footer {
    text-align: center;
    padding: 9px 16px;
}*/
.pn-dynamic-area--posts { min-height: 452px; }
.pn-dynamic-area--sidebar { 
    /*min-height: 541px;*/
    min-height: auto;
}
.pn-post-thumb { width: 80px; height: 80px; }
.pn-post-thumb__img { height: 75px; width: 75px; }
.pn-post-avatar { height: 45px; width: 45px; }
.pn-post-link { color: #1b6ead; }
.pn-text-sm { font-size: 14px; }

/* ── SKELETON TABS ─────────────────────────────────────────────── */
.pn-tabs-skeleton {
    display: inline-flex;
    align-items: center;
    height: 44px;
    gap: 8px;
    padding: 0 12px;
}
.pn-tabs-skeleton__bar {
    width: 52px;
    height: 10px;
    border-radius: 4px;
    display: block;
    background: linear-gradient(90deg, #f3f4f6 25%, #fafafa 50%, #f3f4f6 75%);
    background-size: 300px 100%;
    animation: pn-shimmer 1.2s infinite linear;
}

/* ═══════════════════════════════════════════════════════════════════
   ACCOUNT ABOUT  —  _AccountAbout.cshtml
   100% custom CSS — no Bootstrap
═══════════════════════════════════════════════════════════════════ */

.aab-wrap {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.aab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.aab-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1c0f00;
    font-family: 'Segoe UI', system-ui, sans-serif;
    text-transform: capitalize;
    margin: 0;
}

.aab-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #78614a;
    text-decoration: none;
    transition: background .14s, color .14s;
    flex-shrink: 0;
}

.aab-edit-btn:hover { background: #fff3e8; color: #f97316; }

.aab-about {
    font-size: .875rem;
    color: #3b1f00;
    line-height: 1.75;
}

.aab-about p { margin-bottom: .5em; }
.aab-about p:last-child { margin-bottom: 0; }

.aab-info-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aab-info-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.aab-info-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .8rem;
    font-weight: 700;
    color: #78614a;
    white-space: nowrap;
    min-width: 88px;
    flex-shrink: 0;
}

.aab-info-label svg { flex-shrink: 0; color: #b8977a; }

.aab-info-value {
    font-size: .84rem;
    color: #1c0f00;
    line-height: 1.5;
    word-break: break-word;
}

.aab-muted { font-style: italic; color: #78614a; font-size: .8rem; margin-left: 4px; }

.aab-link { color: #f97316; text-decoration: none; transition: color .14s; }
.aab-link:hover { color: #ea580c; text-decoration: underline; }
.aab-link--tel { margin-right: 6px; }

.aab-locations {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid #f5ede4;
    margin-top: 4px;
}

.aab-section-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .88rem;
    font-weight: 700;
    color: #1c0f00;
}

.aab-count {
    font-size: .72rem;
    font-weight: 600;
    background: #fff3e8;
    color: #f97316;
    border-radius: 20px;
    padding: 1px 7px;
}

.aab-location-card {
    background: #fffaf6;
    border: 1px solid #ece3d9;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aab-badge-primary {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    color: #78614a;
    background: #ffe4cc;
    border-radius: 20px;
    padding: 2px 8px;
    width: fit-content;
}

.aab-location-addr {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: .84rem;
    color: #1c0f00;
    font-weight: 500;
}

.aab-location-addr svg { flex-shrink: 0; margin-top: 2px; color: #f97316; }

.aab-map-link {
    font-size: .76rem;
    color: #f97316;
    text-decoration: none;
    white-space: nowrap;
    margin-left: 4px;
    transition: color .14s;
}

.aab-map-link:hover { color: #ea580c; text-decoration: underline; }

.aab-location-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 20px;
}

.aab-loc-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .78rem;
    color: #3b1f00;
}

.aab-loc-item svg { color: #b8977a; flex-shrink: 0; }

.aab-address {
    font-style: normal;
    font-size: .84rem;
    color: #3b1f00;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   USER POST TEMPLATE  —  _UserPostTemplate.cshtml
   100% custom CSS — no Bootstrap
═══════════════════════════════════════════════════════════════════ */

.upt-item {
    border-bottom: 1px solid #f5ede4;
    transition: background .12s;
}

.upt-item:last-child { border-bottom: none; }

.upt-item:hover { background: #fffaf6; }

.upt-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
}

/* Thumbnail */
.upt-thumb {
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5ede4;
}

.upt-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Body */
.upt-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Title link */
.upt-title-link {
    font-size: .9rem;
    font-weight: 700;
    color: #1c0f00;
    text-decoration: none;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .14s;
}

.upt-title-link:hover { color: #f97316; }

/* Description */
.upt-desc {
    font-size: .78rem;
    color: #78614a;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta row */
.upt-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}

.upt-meta-left {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.upt-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .74rem;
    color: #b8977a;
}

.upt-meta-sep {
    font-size: .74rem;
    color: #d9c4af;
    line-height: 1;
}

/* Rejected badge */
.upt-badge-rejected {
    display: inline-flex;
    align-items: center;
    font-size: .7rem;
    font-weight: 700;
    color: #dc2626;
    background: rgba(220,38,38,.08);
    border: 1px solid rgba(220,38,38,.2);
    border-radius: 20px;
    padding: 1px 8px;
    cursor: pointer;
    transition: background .14s;
}

.upt-badge-rejected:hover { background: rgba(220,38,38,.14); }

/* Share icon wrapper */
.upt-share { flex-shrink: 0; }

/* Responsive */
@media (max-width: 480px) {
    .upt-thumb { width: 60px; height: 60px; }
    .upt-title-link { font-size: .84rem; }
    .upt-desc { display: none; }
}

.icon-filter {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    display: inline-block;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════
   NEWEST POSTS  —  _NewestPosts.cshtml
   100% custom CSS — no Bootstrap dependency
═══════════════════════════════════════════════════════════════════ */

/* Card wrapper */
.np-posts-card {
    background: #fff;
    border: 1px solid #ece3d9;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.np-posts-body { min-height: 400px; }

/* ── Toolbar ──────────────────────────────────────────────────────── */
.np-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
}

.np-toolbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.np-search-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.np-divider {
    height: 1px;
    background: #f5ede4;
    margin: 0;
}

/* ── Custom dropdown ──────────────────────────────────────────────── */
.np-drop {
    position: relative;
    display: inline-block;
}

.np-drop-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: .88rem;
    font-weight: 700;
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: #1c0f00;
    background: #fff;
    border: 1.5px solid #ece3d9;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .14s, background .14s, color .14s;
    outline: none;
}

.np-drop-trigger:hover {
    border-color: #f97316;
    color: #f97316;
    background: rgba(249,115,22,.05);
}

.np-drop.np-open .np-drop-trigger {
    border-color: #f97316;
    color: #f97316;
    background: rgba(249,115,22,.06);
}

.np-drop-chevron {
    flex-shrink: 0;
    transition: transform .2s ease;
    color: #b8977a;
}

.np-drop.np-open .np-drop-chevron {
    transform: rotate(180deg);
    color: #f97316;
}

/* Status trigger — smaller variant */
.np-status-trigger {
    padding: 5px 10px;
    font-size: .82rem;
}

/* Dropdown menu */
.np-drop-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid #ece3d9;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    z-index: 500;
    padding: 6px 0;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #ece3d9 transparent;
    animation: np-fade-in .15s ease;
}

.np-drop-menu--right { left: auto; right: 0; }
.np-drop-menu--sm { min-width: 130px; }

.np-drop.np-open .np-drop-menu { display: block; }

@keyframes np-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.np-drop-header {
    padding: 6px 14px 4px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #b8977a;
}

.np-drop-divider {
    height: 1px;
    background: #f5ede4;
    margin: 4px 0;
}

.np-drop-item {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 7px 14px;
    font-size: .84rem;
    font-weight: 500;
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: #3b1f00;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background .12s, color .12s;
    outline: none;
    white-space: nowrap;
}

.np-drop-item:hover {
    background: #fff3e8;
    color: #1c0f00;
}

.np-drop-item.active {
    color: #f97316;
    background: rgba(249,115,22,.08);
    font-weight: 700;
}

/* ── Search ───────────────────────────────────────────────────────── */
.np-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.np-search-icon {
    position: absolute;
    left: 10px;
    color: #b8977a;
    pointer-events: none;
    flex-shrink: 0;
}

.np-search-input {
    padding: 6px 12px 6px 30px;
    font-size: .83rem;
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: #1c0f00;
    background: #fffaf6;
    border: 1.5px solid #ece3d9;
    border-radius: 20px;
    width: 180px;
    outline: none;
    transition: border-color .15s, box-shadow .15s, width .2s;
}

.np-search-input:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249,115,22,.10);
    background: #fff;
    width: 220px;
}

.np-search-input::placeholder { color: #b8977a; }

/* ── Icon buttons (filter, sort) ──────────────────────────────────── */
.np-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fffaf6;
    border: 1.5px solid #ece3d9;
    color: #78614a;
    cursor: pointer;
    transition: background .14s, border-color .14s, color .14s;
    outline: none;
    flex-shrink: 0;
}

.np-icon-btn:hover {
    background: #fff3e8;
    border-color: #f97316;
    color: #f97316;
}

.np-drop.np-open .np-icon-btn {
    background: rgba(249,115,22,.08);
    border-color: #f97316;
    color: #f97316;
}

/* ── Posts list area ──────────────────────────────────────────────── */
.np-list-area {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #ece3d9 transparent;
}

/* ── See more button ──────────────────────────────────────────────── */
.np-see-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    font-size: .82rem;
    font-weight: 600;
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: #78614a;
    background: #fffaf6;
    border: none;
    border-top: 1px solid #f5ede4;
    cursor: pointer;
    transition: color .14s, background .14s;
    outline: none;
}

.np-see-more-btn:hover {
    color: #f97316;
    background: #fff3e8;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 680px) {
    .np-toolbar { flex-direction: column; align-items: flex-start; }
    .np-search-input { width: 100%; }
    .np-search-input:focus { width: 100%; }
    .np-search-wrap { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════════
   ACTIVITY PAGE  —  IndexPartial.cshtml
   100% custom CSS. Uses only Nova CSS variables (--violet, --bg, etc.)
═══════════════════════════════════════════════════════════════════ */

/* ── Page wrapper: two columns ──────────────────────────────────── */
.ap-wrap {
    display: grid;
    grid-template-columns: 172px 1fr;
    gap: 16px;
    padding: 8px 0;
    align-items: start;
}

/* ── Sidebar ────────────────────────────────────────────────────── */
.ap-sidebar {
    position: sticky;
    top: 82px;
}

/* Nav card */
.ap-nav-card {
    background: #fff;
    border: 1px solid #ece3d9;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.ap-nav-heading {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: #b8977a;
    padding: 14px 14px 6px;
    margin: 0;
}

/* Nav list */
.ap-nav {
    display: flex;
    flex-direction: column;
}

.ap-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 14px;
    font-size: .84rem;
    font-weight: 500;
    color: #78614a;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background .14s, color .14s, border-color .14s;
}

.ap-nav-link:hover {
    background: #fff3e8;
    color: #1c0f00;
}

.ap-nav-item.active .ap-nav-link {
    background: rgba(249,115,22,.08);
    border-left-color: #f97316;
    color: #f97316;
    font-weight: 700;
}

/* Count badge */
.ap-nav-count {
    font-style: normal;
    font-size: .68rem;
    font-weight: 600;
    color: #b8977a;
    background: #fff3e8;
    border-radius: 20px;
    padding: 1px 7px;
    flex-shrink: 0;
    min-width: 20px;
    text-align: center;
}

.ap-nav-item.active .ap-nav-count {
    background: rgba(249,115,22,.15);
    color: #ea580c;
}

/* ── Mobile select (hidden on desktop) ──────────────────────────── */
.ap-mob-nav { display: none; }

.ap-mob-select {
    width: 100%;
    padding: 9px 36px 9px 12px;
    font-size: .84rem;
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: #3b1f00;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b8977a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    border: 1.5px solid #ece3d9;
    border-radius: 8px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: border-color .15s, box-shadow .15s;
}

.ap-mob-select:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249,115,22,.12);
}

/* ── Content column ─────────────────────────────────────────────── */
.ap-content { min-width: 0; }

.ap-content-card {
    background: #fff;
    border: 1px solid #ece3d9;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

/* Header row: title left, tabs right */
.ap-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px 12px;
    border-bottom: 1px solid #f5ede4;
}

.ap-content-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1c0f00;
    font-family: 'Segoe UI', system-ui, sans-serif;
    text-transform: capitalize;
    margin: 0;
    letter-spacing: -.2px;
}

/* Tab button group */
.ap-tab-group {
    display: inline-flex;
    border: 1.5px solid #ece3d9;
    border-radius: 20px;
    overflow: hidden;
    background: #fffaf6;
}

.ap-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    font-size: .8rem;
    font-weight: 600;
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: #78614a;
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background .14s, color .14s;
    outline: none;
    touch-action: manipulation;
}

.ap-tab + .ap-tab {
    border-left: 1.5px solid #ece3d9;
}

.ap-tab:hover {
    background: #fff3e8;
    color: #1c0f00;
}

.ap-tab.active {
    background: rgba(249,115,22,.1);
    color: #f97316;
}

.ap-tab svg { flex-shrink: 0; }

.ap-tab:focus-visible {
    outline: 2px solid #f97316;
    outline-offset: -2px;
}

/* Posts area */
.ap-posts-wrap {
    padding: 14px 18px;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .ap-wrap { grid-template-columns: 148px 1fr; gap: 12px; }
    .ap-nav-count { display: none; }
}

@media (max-width: 680px) {
    .ap-wrap { grid-template-columns: 1fr; }
    .ap-nav-card { display: none; }
    .ap-mob-nav { display: block; }
    .ap-sidebar { position: static; margin-bottom: 4px; }
}

@media (max-width: 480px) {
    .ap-content-header { flex-direction: column; align-items: flex-start; }
    .ap-content-title { font-size: 1rem; }
    .ap-tab { padding: 5px 10px; font-size: .76rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   FOLLOWERS / FOLLOWING LIST  —  fol-*
   Used by: _Followers.cshtml  |  _FollowersPager.cshtml
═══════════════════════════════════════════════════════════════════ */

/* ── Container ───────────────────────────────────────────────── */
.fol-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fol-list--full {
    background: var(--bg, #fff);
    border: 1px solid var(--bd, #ffe4cc);
    border-radius: 10px;
    padding: 18px 20px;
}

/* ── Header ──────────────────────────────────────────────────── */
.fol-list__header {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bd, #ffe4cc);
    margin-bottom: 4px;
}

.fol-list__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink, #1c0f00);
    margin: 0;
    font-family: var(--f-sans);
}

/* ── Grid ────────────────────────────────────────────────────── */
.fol-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

/* ── Card ────────────────────────────────────────────────────── */
.fol-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--bg, #fff);
    border: 1px solid var(--bd, #ffe4cc);
    border-radius: 10px;
    padding: 20px 14px 14px;
    gap: 8px;
    transition: box-shadow .18s, border-color .18s;
}

.fol-card:hover {
    box-shadow: var(--sh-sm);
    border-color: var(--bd2, #fcd4aa);
}

/* ── Avatar ──────────────────────────────────────────────────── */
.fol-card__avatar-link {
    display: block;
    flex-shrink: 0;
}

.fol-card__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bd, #ffe4cc);
    display: block;
    overflow: clip;
}

/* ── Body text ───────────────────────────────────────────────── */
.fol-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    width: 100%;
}

.fol-card__name {
    margin: 0;
    font-size: .92rem;
    font-weight: 700;
    color: var(--ink, #1c0f00);
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.fol-card__name-link {
    color: inherit;
    text-decoration: none;
}

.fol-card__name-link:hover { color: var(--violet, #f97316); }

.fol-card__designation {
    margin: 0;
    font-size: .78rem;
    color: var(--muted, #78614a);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.35;
}

.fol-card__country {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0;
    font-size: .78rem;
    color: var(--muted, #78614a);
}

.fol-card__flag {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.fol-card__date {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0;
    font-size: .76rem;
    color: var(--dim, #b8977a);
}

/* ── Action buttons ──────────────────────────────────────────── */
.fol-card__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    width: 100%;
}

/* Following state — ghost with orange border */
.fol-btn--following {
    border-color: var(--violet, #f97316);
    color: var(--violet, #f97316);
}

.fol-btn--following:hover {
    background: var(--violet-lt, rgba(249,115,22,.08));
}

/* ── Pagination area ─────────────────────────────────────────── */
/* Inner styles (.userpost-pagination-list, .pagination-container,
   .userpost-pagination, .page-item, .page-link) are defined in
   ms-theme-nova.css as common styles reused across all pages.   */
.fol-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid var(--bd, #ffe4cc);
}

    .fol-pagination select,
    .pagging-area select{
        padding: 6px 15px;
    }
    /* ── Load more (pager) ───────────────────────────────────────── */
    .fol-loadmore {
        grid-column: 1 / -1;
        margin-top: 4px;
    }

.fol-loadmore__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px 16px;
    border: 1.5px solid var(--bd2, #fcd4aa);
    border-radius: 8px;
    background: var(--bg2, #fffaf6);
    color: var(--ink2, #3b1f00);
    font-size: .85rem;
    font-weight: 600;
    font-family: var(--f-sans);
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}

.fol-loadmore__btn:hover {
    background: var(--violet-lt, rgba(249,115,22,.08));
    border-color: var(--violet, #f97316);
    color: var(--violet, #f97316);
    box-shadow: var(--sh-xs);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .fol-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
    .fol-list--full { padding: 14px; }
}

@media (max-width: 480px) {
    .fol-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .fol-card { padding: 14px 10px 10px; }
    .fol-card__avatar { width: 64px; height: 64px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PROFILE VIEW SECTIONS  —  pv-*
   Used by: _ViewAward, _viewEducation, _viewExperience,
            _ViewGallery, _ViewGalleryList, _ViewPortfolio, _viewTag
═══════════════════════════════════════════════════════════════════ */

/* ── Section icon (in pn-section__header) ────────────────────── */
.pn-section__icon {
    color: var(--violet, #f97316);
    flex-shrink: 0;
}

/* Suppress duplicate ::after chevron when pn-widget__see-more
   and collapsible-see-more-btn are combined (chevron is in SVG) */
.pn-widget__see-more.collapsible-see-more-btn::after { content: none; }

/* ── Timeline (Education & Experience) ───────────────────────── */
.pv-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pv-timeline__item {
    display: flex;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--bd, #ffe4cc);
    position: relative;
}

.pv-timeline__item:last-child { border-bottom: none; padding-bottom: 0; }
.pv-timeline__item:first-child { padding-top: 0; }

.pv-timeline__dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--violet, #f97316);
    border: 2px solid var(--violet-lt, rgba(249,115,22,.2));
    margin-top: 5px;
    box-shadow: 0 0 0 3px var(--violet-lt, rgba(249,115,22,.12));
}

.pv-timeline__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pv-timeline__title {
    font-size: .9rem;
    font-weight: 700;
    color: var(--ink, #1c0f00);
    line-height: 1.3;
    font-family: var(--f-sans);
}

.pv-timeline__sub {
    font-size: .83rem;
    color: var(--muted, #78614a);
    font-weight: 500;
}

.pv-timeline__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .78rem;
    color: var(--dim, #b8977a);
    margin-top: 1px;
}

.pv-timeline__badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 20px;
    background: var(--bg3, #fff3e8);
    border: 1px solid var(--bd, #ffe4cc);
    color: var(--ink2, #3b1f00);
    font-size: .73rem;
    font-weight: 600;
}

.pv-timeline__sep { color: var(--bd2, #fcd4aa); }

.pv-timeline__desc {
    font-size: .8rem;
    color: var(--muted, #78614a);
    line-height: 1.6;
    margin-top: 4px;
}

/* ── Awards ──────────────────────────────────────────────────── */
.pv-award-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pv-award {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    border-bottom: 1px solid var(--bd, #ffe4cc);
}

.pv-award:last-child { border-bottom: none; padding-bottom: 0; }
.pv-award:first-child { padding-top: 0; }

.pv-award__img-link { flex-shrink: 0; }

    .pv-award__img {
        width: 72px;
        height: 72px;
        object-fit: contain;
        border: 1px solid var(--bd, #ffe4cc);
        border-radius: 8px;
        background: var(--bg2, #fffaf6);
        display: block;
    }

.pv-award__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pv-award__title {
    font-size: .9rem;
    font-weight: 700;
    color: var(--ink, #1c0f00);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-transform: capitalize;
}

.pv-award__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    font-size: .78rem;
    color: var(--muted, #78614a);
}

.pv-award__sep { color: var(--dim, #b8977a); }

.pv-award__desc {
    font-size: .8rem;
    color: var(--muted, #78614a);
    line-height: 1.55;
    margin: 0;
}

/* ── Gallery (read-only view) ─────────────────pv-portfolio-list───────────────── */
.pv-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    padding: 0px 16px;
}

.pv-gallery__item {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--bd, #ffe4cc);
    cursor: pointer;
    aspect-ratio: 1;
}

.pv-gallery__link { display: block; width: 100%; height: 100%; }

.pv-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .2s ease;
}

.pv-gallery__item:hover .pv-gallery__img { transform: scale(1.05); }

/* ── Gallery List (edit view) ────────────────────────────────── */
.pv-gallist-wrap { margin-bottom: 12px; }

.pv-gallist-toolbar {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 12px;
}

.pv-gallist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.pv-gallist__item {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--bd, #ffe4cc);
    background: var(--bg2, #fffaf6);
    display: flex;
    flex-direction: column;
}

.pv-gallist__link { display: block; aspect-ratio: 1; overflow: hidden; }

.pv-gallist__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .2s ease;
}

.pv-gallist__item:hover .pv-gallist__img { transform: scale(1.04); }

.pv-gallist__actions {
    display: flex;
    gap: 4px;
    padding: 6px;
    justify-content: flex-end;
}

.pv-gallist__edit-btn {
    height: 28px;
    padding: 0 8px;
    font-size: .75rem;
    border-radius: 6px;
    color: var(--violet, #f97316);
    border-color: var(--bd2, #fcd4aa);
}

.pv-gallist__del-btn {
    height: 28px;
    padding: 0 8px;
    font-size: .75rem;
    border-radius: 6px;
    color: #dc2626;
    border: 1.5px solid #fca5a5;
    background: none;
    cursor: pointer;
    font-family: var(--f-sans);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background .15s, border-color .15s;
}

.pv-gallist__del-btn:hover {
    background: #fef2f2;
    border-color: #f87171;
}

/* ── Portfolio ───────────────────────────────────────────────── */
.pv-portfolio-list {
    list-style: none;
    margin: 0;
    padding: 0px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pv-portfolio__item {
    padding: 14px 0;
    border-bottom: 1px solid var(--bd, #ffe4cc);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pv-portfolio__item:last-child { border-bottom: none; padding-bottom: 0; }
.pv-portfolio__item:first-child { padding-top: 0; }

.pv-portfolio__title {
    font-size: .9rem;
    font-weight: 700;
    color: var(--ink, #1c0f00);
    margin: 0;
}

.pv-portfolio__desc {
    font-size: .82rem;
    color: var(--muted, #78614a);
    line-height: 1.6;
}

.pv-portfolio__url {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .78rem;
    color: var(--violet, #f97316);
    text-decoration: none;
    word-break: break-all;
}

.pv-portfolio__url:hover { text-decoration: underline; color: var(--violet-dk, #ea580c); }

/* ── Skills & Tags ───────────────────────────────────────────── */
.pv-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0 16px;
    margin-bottom: 14px;
}

.pv-skill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--bd, #ffe4cc);
    background: var(--bg3, #fff3e8);
    color: var(--ink2, #3b1f00);
    font-size: .8rem;
    font-weight: 500;
    font-family: var(--f-sans);
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}

.pv-skill:hover {
    background: var(--violet-lt, rgba(249,115,22,.12));
    border-color: var(--violet, #f97316);
    color: var(--violet-dk, #ea580c);
}

/* ── Languages ───────────────────────────────────────────────── */
.pv-lang-block { border-top: 1px solid var(--bd, #ffe4cc); padding : 12px 16px; }

.pv-lang-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--ink, #1c0f00);
    margin: 0 0 6px;
    font-family: var(--f-sans);
}

.pv-lang-title svg { color: var(--violet, #f97316); flex-shrink: 0; }

.pv-lang-list {
    font-size: .83rem;
    color: var(--muted, #78614a);
    margin: 0;
    line-height: 1.6;
}

/* ── Empty state ─────────────────────────────────────────────── */
.pv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
    gap: 8px;
    text-align: center;
}

.pv-empty__img { max-width: 120px; opacity: .7; }
.pv-empty__text { font-size: .88rem; color: var(--muted, #78614a); margin: 0; }
.pv-empty__hint { font-size: .82rem; color: var(--dim, #b8977a); margin: 0; }

/* ── FAQ — self-contained jQuery toggle (no Bootstrap accordion) ── */
.pv-faq-list {
    display: flex;
    flex-direction: column;
}

.pv-faq__item {
    border-bottom: 1px solid var(--bd, #ffe4cc);
}

.pv-faq__item:last-child { border-bottom: none; }

.pv-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 13px 0;
    background: none;
    border: none;
    text-align: left;
    font-size: .88rem;
    font-weight: 600;
    font-family: var(--f-sans);
    color: var(--ink, #1c0f00);
    cursor: pointer;
    transition: color .15s;
}

.pv-faq__question:hover { color: var(--violet, #f97316); }

.pv-faq--open .pv-faq__question { color: var(--violet, #f97316); }

.pv-faq__chevron {
    flex-shrink: 0;
    color: var(--dim, #b8977a);
    transition: transform .22s ease, color .15s;
}

.pv-faq--open .pv-faq__chevron {
    transform: rotate(180deg);
    color: var(--violet, #f97316);
}

/* Hidden by default; shown when parent has .pv-faq--open */
.pv-faq__answer {
    display: none;
    padding: 0 0 14px;
    font-size: .84rem;
    color: var(--muted, #78614a);
    line-height: 1.7;
}

.pv-faq--open .pv-faq__answer { display: block; }

/* ── Startup Timeline  (pv-stl-*) ───────────────────────────── */
.pv-stl {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Year group */
.pv-stl__year-block { display: flex; flex-direction: column; gap: 0; }

.pv-stl__year-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 24px;
    background: var(--violet, #f97316);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    font-family: var(--f-sans);
    border-radius: 20px;
    margin-bottom: 10px;
    letter-spacing: .5px;
}

/* List */
.pv-stl__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Vertical connecting line */
.pv-stl__list::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--bd, #ffe4cc);
    border-radius: 2px;
}

/* Each item */
.pv-stl__item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 0 0 14px;
    position: relative;
}

.pv-stl__item:last-child { padding-bottom: 0; }

/* Orange dot */
.pv-stl__dot {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--violet, #f97316);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--violet, #f97316);
    margin-top: 4px;
    z-index: 1;
}

/* Content card */
.pv-stl__content {
    flex: 1;
    min-width: 0;
    background: var(--bg2, #fffaf6);
    border: 1px solid var(--bd, #ffe4cc);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Header row: icon + month + name | date */
.pv-stl__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.pv-stl__event-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.pv-stl__icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.pv-stl__month {
    font-size: .75rem;
    font-weight: 700;
    color: var(--violet, #f97316);
    text-transform: uppercase;
    letter-spacing: .4px;
    flex-shrink: 0;
}

.pv-stl__event {
    font-size: .86rem;
    font-weight: 600;
    color: var(--ink, #1c0f00);
    font-family: var(--f-sans);
}

.pv-stl__date {
    font-size: .73rem;
    color: var(--dim, #b8977a);
    white-space: nowrap;
    flex-shrink: 0;
}

.pv-stl__desc {
    font-size: .8rem;
    color: var(--muted, #78614a);
    line-height: 1.6;
    margin: 0;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .pv-gallery { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; }
    .pv-gallist { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
    .pv-award__img { width: 56px; height: 56px; }
    .pv-stl__header { flex-direction: column; gap: 3px; }
    .pv-stl__date { align-self: flex-start; }
}

/* ── Startup Timeline (self-contained nova theme) ── */
.pn-widget .timeline {
    position: relative;
    margin: 12px auto;
    padding: 0;
    max-width: 900px;
}

.pn-widget .timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--bd, #ffe4cc);
    transform: translateX(-50%);
    z-index: 0;
}

.pn-widget .timeline-year {
    font-weight: 700;
    color: #fff;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 2px solid var(--violet, #f97316);
    align-self: center;
    background: var(--violet, #f97316);
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 1.5rem auto;
    font-size: .95rem;
    position: relative;
    z-index: 1;
}

.pn-widget .timeline-item {
    position: relative;
    margin-bottom: 2rem;
}

.pn-widget .timeline-icon {
    position: absolute;
    top: 50%;
    right: 60%;
    transform: translateY(-50%);
    color: var(--violet, #f97316);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border: 2px solid var(--bd, #ffe4cc);
    padding: 0.5rem;
    box-sizing: initial;
    background: #fff;
}

.pn-widget .timeline-icon.even { right: 60%; }
.pn-widget .timeline-icon.odd  { left: 60%; }

.pn-widget .timeline-icon img {
    width: inherit;
    height: inherit;
    padding: 0;
}

.pn-widget .timeline-line {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 2px;
    background: var(--bd, #ffe4cc);
    top: 50%;
    width: 20%;
    z-index: 0;
}

.pn-widget .timeline-line::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    border: 2px solid var(--violet, #f97316);
}

.pn-widget .timeline-content {
    padding: 0.75rem 0.6rem;
    border-radius: 0.5rem;
    position: relative;
    background: var(--bg2, #fffaf6);
    border: 1px solid var(--bd, #ffe4cc);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.07) !important;
    word-break: break-word;
}

.pn-widget .timeline-content :is(h1,h2,h3,h4,h5,h6) {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--bd, #ffe4cc);
    padding-bottom: 5px;
}

.pn-widget .timeline-item.left  .timeline-content { margin-right: auto; text-align: left;  margin-left: 55%; }
.pn-widget .timeline-item.right .timeline-content { margin-left: auto;  text-align: right; margin-right: 55%; }

.pn-widget .timeline-date { font-size: small; color: var(--dim, #b8977a) !important; }

.pn-widget .tl-month { color: var(--violet, #f97316); font-weight: 700; }
.pn-widget .tl-sep   { color: var(--bd, #ffe4cc); }
.pn-widget .tl-event { color: var(--ink, #1c0f00); }
.pn-widget .tl-desc  { color: var(--muted, #78614a); font-size: 0.875rem; }
/* ── Funding (pv-fund-*) ─────────────────────────────────────── */
.pv-fund { display: flex; flex-direction: column; gap: 20px; }

/* Total funding ring */
.pv-fund__total-ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 3px solid var(--violet, #f97316);
    background: var(--bg2, #fffaf6);
    text-align: center;
    gap: 4px;
}
.pv-fund__total-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--muted, #78614a);
}
.pv-fund__total-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink, #1c0f00);
}

/* Investor row layout — label left, content right */
.pv-fund__row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
@media (min-width: 768px) {
    .pv-fund__row { flex-direction: row; gap: 40px; }
}
.pv-fund__row-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink, #1c0f00);
    flex-shrink: 0;
    min-width: 80px;
}
.pv-fund__row-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pv-fund__investor-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: .875rem;
}
.pv-fund__investor-name { color: var(--violet, #f97316); }
.pv-fund__investor-links { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.pv-fund__link {
    color: var(--muted, #78614a);
    display: inline-flex;
    align-items: center;
    transition: color .15s;
}
.pv-fund__link:hover { color: var(--violet, #f97316); }

/* Section heading */
.pv-fund__breakdown-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink, #1c0f00);
    margin-bottom: 10px;
}

/* Round tabs — Bootstrap nav-tabs style */
.pv-fund__tabs-nav {
    list-style: none;
    margin: 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--bd, #ffe4cc);
    scrollbar-width: none;
}
.pv-fund__tabs-nav::-webkit-scrollbar { display: none; }
.pv-fund__tabs-nav li { flex-shrink: 0; }

.pv-fund__tab-btn {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: transparent;
    color: var(--violet, #f97316);
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
}
.pv-fund__tab-btn:hover {
    color: var(--violet, #f97316);
    border-color: var(--bd, #ffe4cc) var(--bd, #ffe4cc) transparent;
}
.pv-fund__tab-btn.active {
    color: var(--ink, #1c0f00);
    background: #fff;
    border-color: var(--bd, #ffe4cc) var(--bd, #ffe4cc) #fff;
    font-weight: 600;
}

/* Panels — hide all, show only active */
.pv-fund__panels { padding-top: 16px; }
.pv-fund__panel  { display: none; }
.pv-fund__panel--active { display: block; }

/* Round amount ring */
.pv-fund__round-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 3px solid var(--violet, #f97316);
    background: var(--bg2, #fffaf6);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink, #1c0f00);
    text-align: center;
    flex-shrink: 0;
}

/* Meta labels inside round */
.pv-fund__meta-label { font-weight: 600; color: var(--ink, #1c0f00); }
.pv-fund__meta-sep   { color: var(--muted, #78614a); }
.pv-fund__meta-val   { color: var(--ink, #1c0f00); }
.pv-fund__meta-date  { color: var(--violet, #f97316); }

/* Edit page styles */
.pv-fund__edit-tabs {
    border-bottom: 2px solid var(--bd, #ffe4cc);
    gap: 2px;
}
.pv-fund__edit-tab-btn {
    border-radius: 6px 6px 0 0 !important;
    border: 1px solid transparent !important;
    color: var(--muted, #78614a) !important;
    font-size: .85rem;
}
.pv-fund__edit-tab-btn:hover { color: var(--violet, #f97316) !important; }
.pv-fund__edit-tab-btn.active {
    background: var(--bg2, #fffaf6) !important;
    border-color: var(--bd, #ffe4cc) var(--bd, #ffe4cc) var(--bg2, #fffaf6) !important;
    color: var(--violet, #f97316) !important;
}
.pv-fund__edit-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}
.pv-fund__edit-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pv-fund__edit-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px;
    border: 1px solid var(--bd, #ffe4cc);
    border-radius: 8px;
    background: var(--bg2, #fffaf6);
    flex-wrap: wrap;
}
.pv-fund__edit-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.pv-fund__edit-name { font-weight: 600; color: var(--ink, #1c0f00); font-size: .9rem; }
.pv-fund__edit-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pv-fund__edit-amount { font-size: 1rem; font-weight: 700; color: var(--violet, #f97316); }
.pv-fund__edit-date { font-size: .8rem; color: var(--dim, #b8977a); }
.pv-fund__edit-urls { display: flex; flex-direction: column; gap: 2px; }
.pv-fund__edit-url { font-size: .75rem; color: var(--muted, #78614a); word-break: break-all; }
.pv-fund__edit-investors { margin: 4px 0 0 0; padding-left: 16px; font-size: .82rem; color: var(--muted, #78614a); }
.pv-fund__edit-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: flex-start; }

/* danger button */
.pn-btn--danger {
    background: transparent;
    color: #dc3545;
    border: 1px solid #dc3545;
}
.pn-btn--danger:hover { background: #dc3545; color: #fff; }


/* Setting page, contact list, and form styles → setting-nova.css */



/* ═══════════════════════════════════════════════════
   20. RESUME
═══════════════════════════════════════════════════ */

/* Upload zone */
.rsm-upload-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 2px dashed var(--bd, #ffe4cc);
    border-radius: 10px;
    padding: 32px 20px;
    background: var(--bg2, #fffaf6);
    cursor: pointer;
    transition: border-color .2s, background .2s;
    text-align: center;
}
.rsm-upload-zone:hover,
.rsm-upload-zone:focus-within {
    border-color: var(--violet, #f97316);
    background: #fff7f0;
}
.rsm-upload-zone svg { color: var(--violet, #f97316); opacity: .7; }
.rsm-upload-zone__title {
    font-size: .875rem;
    color: var(--ink, #1c0f00);
    margin: 0;
}
.rsm-upload-zone__title span {
    color: var(--violet, #f97316);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.rsm-upload-zone__hint {
    font-size: .78rem;
    color: var(--muted, #78614a);
    margin: 0;
}
.rsm-upload-zone__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/* Selected filename */
.rsm-filename {
    font-size: .8rem;
    color: var(--muted, #78614a);
    margin: 4px 0 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ── Resume doc preview ── */
.rsm-doc {
    background: #fff;
    border: 1px solid var(--bd, #ffe4cc);
    border-radius: 12px;
    padding: 28px 28px 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Header row */
.rsm-doc__header {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--violet, #f97316);
    margin-bottom: 4px;
}
.rsm-doc__identity { flex: 1; min-width: 0; }
.rsm-doc__name {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink, #1c0f00);
    margin: 0 0 10px;
}
.rsm-doc__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}
.rsm-doc__contact-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .8rem;
    color: var(--muted, #78614a);
}
.rsm-doc__contact-item svg { flex-shrink: 0; color: var(--violet, #f97316); }

/* Avatar photo */
.rsm-doc__photo {
    width: 90px;
    height: 90px;
    min-width: 90px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--bd, #ffe4cc);
    flex-shrink: 0;
}

/* Section */
.rsm-section {
    padding: 16px 0 4px;
    border-bottom: 1px solid var(--bd, #ffe4cc);
}
.rsm-section:last-child { border-bottom: none; }

.rsm-section__heading {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--violet, #f97316);
    margin-bottom: 10px;
}
.rsm-section__heading svg { flex-shrink: 0; }
.rsm-section__body {
    font-size: .875rem;
    color: var(--ink, #1c0f00);
    line-height: 1.6;
    margin: 0;
}

/* Item list (experience / education) */
.rsm-list,
.rsm-list li { list-style: none !important; }
.rsm-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.rsm-item { display: flex; flex-direction: column; gap: 3px; }
.rsm-item__title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink, #1c0f00);
}
.rsm-item__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: .8rem;
    color: var(--muted, #78614a);
}
.rsm-item__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--muted, #78614a);
    flex-shrink: 0;
}
.rsm-item__desc {
    font-size: .8rem;
    color: var(--muted, #78614a);
    line-height: 1.55;
    margin-top: 2px;
}

/* Skill / language tags */
.rsm-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 8px;
}
.rsm-tag {
    display: inline-block;
    padding: 3px 11px;
    background: var(--bg2, #fffaf6);
    border: 1px solid var(--bd, #ffe4cc);
    border-radius: 999px;
    font-size: .78rem;
    color: var(--ink, #1c0f00);
    text-transform: capitalize;
}
.rsm-tag--lang {
    background: #fff0e6;
    border-color: var(--violet, #f97316);
    color: var(--violet, #f97316);
    font-weight: 600;
}

/* Download bar */
.rsm-download {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg2, #fffaf6);
    border: 1px solid var(--bd, #ffe4cc);
    border-radius: 8px;
    margin-top: 10px;
    font-size: .82rem;
    color: var(--muted, #78614a);
    flex-wrap: wrap;
}
.rsm-download svg { flex-shrink: 0; color: var(--violet, #f97316); }
.rsm-download__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rsm-download__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--violet, #f97316);
    text-decoration: none;
    flex-shrink: 0;
}
.rsm-download__link:hover { text-decoration: underline; }

/* Print: keep it clean */
@media print {
    .rsm-doc {
        border: none;
        padding: 0;
        border-radius: 0;
    }
}

/* Responsive */
@media (max-width: 600px) {
    /*.rsm-doc { padding: 18px 14px; }*/
    /*.rsm-doc__photo { width: 70px; height: 70px; }*/
    .rsm-doc__name { font-size: 1.1rem; }
}

/* ═══════════════════════════════════════════════════
   CI HEADER — shared layout for resume section
═══════════════════════════════════════════════════ */

.ci-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ci-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 12px;
    gap: 12px;
}

.ci-header__title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--ink, #1c0f00);
}

.ci-header__title svg { color: var(--violet, #f97316); }


/* ═══════════════════════════════════════════════════
   SKELETON / PLACEHOLDER BARS  (unified loader style)
═══════════════════════════════════════════════════ */

/* Block skeleton — stacked bars (used in LoadElements + loadElement) */
.skel-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0;
    width: 100%;
}

/* Inline skeleton — horizontal bars (used in loader / scloader) */
.skel-inline {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    vertical-align: middle;
}

/* Bar base */
.skel-bar {
    display: block;
    height: 10px;
    border-radius: 5px;
    background-color: #e0e0e0;
}

/* Width variants */
.skel-bar--sm { width: 35%; }
.skel-bar--md { width: 55%; }
.skel-bar--lg { width: 100%; }

/* Heart SVG toggle — filled when liked */
.crayons-reaction__icon svg.heart-outline { display: block; }
.crayons-reaction__icon svg.heart-filled  { display: none; }

.crayons-reaction__icon.heart--liked svg.heart-outline { display: none; }
.crayons-reaction__icon.heart--liked svg.heart-filled  { display: block; }


/* ═══════════════════════════════════════════════════
   MORE AREA DROPDOWN
═══════════════════════════════════════════════════ */

.pn-dropdown-menu {
    min-width: 200px;
    padding: 6px;
    border: 1px solid var(--bd, #ffe4cc);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,.08) !important;
}

.pn-dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-radius: 7px;
    font-size: .875rem;
    color: var(--ink, #1c0f00);
    transition: background .15s, color .15s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.pn-dropdown-item svg {
    flex-shrink: 0;
    color: var(--muted, #78614a);
    transition: color .15s;
}
.pn-dropdown-item:hover,
.pn-dropdown-item:focus {
    background: var(--bg2, #fffaf6);
    color: var(--violet, #f97316);
}
.pn-dropdown-item:hover svg,
.pn-dropdown-item:focus svg {
    color: var(--violet, #f97316);
}

.pn-dropdown-item--danger { color: #c0392b; }
.pn-dropdown-item--danger svg { color: #c0392b; }
.pn-dropdown-item--danger:hover,
.pn-dropdown-item--danger:focus {
    background: #fff5f5;
    color: #c0392b;
}
.pn-dropdown-item--danger:hover svg,
.pn-dropdown-item--danger:focus svg { color: #c0392b; }

.pn-dropdown-divider {
    margin: 4px 0;
    border-color: var(--bd, #ffe4cc);
    opacity: 1;
}


/* ═══════════════════════════════════════════════════
   20. REJECTED REASON MODAL  (content only)
   Shell / header / body / footer → ms-modal.css
═══════════════════════════════════════════════════ */

/* ms-modal-body flex layout for this view */
.ms-modal-body { display: flex; flex-direction: column; gap: 16px; }

/* Rejection notice banner */
.rej-notice {
    display: flex;
    gap: 12px;
    background: #fff8f0;
    border: 1px solid var(--bd, #ffe4cc);
    border-left: 4px solid var(--violet, #f97316);
    border-radius: 8px;
    padding: 14px;
}
.rej-notice__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: #fff0e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--violet, #f97316);
}
.rej-notice__content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rej-notice__date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .75rem;
    color: var(--muted, #78614a);
}
.rej-notice__date svg { color: var(--violet, #f97316); }
.rej-notice__title {
    font-size: .9rem;
    font-weight: 700;
    color: var(--ink, #1c0f00);
    margin: 0;
}
.rej-notice__desc {
    font-size: .82rem;
    color: var(--muted, #78614a);
    line-height: 1.55;
    margin: 0;
}

/* Payment summary card */
.rej-summary {
    background: var(--bg2, #fffaf6);
    border: 1px solid var(--bd, #ffe4cc);
    border-radius: 8px;
    overflow: hidden;
}
.rej-summary__heading {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--violet, #f97316);
    padding: 10px 14px;
    border-bottom: 1px solid var(--bd, #ffe4cc);
    background: #fff;
}
.rej-summary__body { padding: 10px 14px; }

/* Price rows */
.rej-price-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.rej-price-list__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    font-size: .85rem;
    color: var(--ink, #1c0f00);
    border-bottom: 1px dashed var(--bd, #ffe4cc);
}
.rej-price-list__row:last-child { border-bottom: none; }
.rej-price-list__row--total {
    font-weight: 700;
    font-size: .9rem;
    color: var(--violet, #f97316);
    border-top: 2px solid var(--bd, #ffe4cc);
    margin-top: 4px;
    padding-top: 10px;
}

/* Calculating skeleton area */
.rej-calculating { padding: 6px 0; }
 

/* Gateway + Pay row */
.rej-pay-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.rej-pay-row__gateway { flex: 1; }
.rej-pay-row__gateway .form-select {
    height: 100%;
    border-color: var(--bd, #ffe4cc);
    border-radius: 8px;
    font-size: .875rem;
}
.rej-pay-row__gateway .form-select:focus {
    border-color: var(--violet, #f97316);
    box-shadow: 0 0 0 3px rgba(249,115,22,.12);
}
.rej-pay-row__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 20px;
    height: 42px;
    border-radius: 8px;
    font-size: .875rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Hint text */
.rej-pay-hint {
    font-size: .78rem;
    color: var(--muted, #78614a);
    text-align: center;
    margin: 0;
}

@media (max-width: 480px) {
    .rej-pay-row { flex-direction: column; }
    .rej-pay-row__btn { width: 100%; justify-content: center; }
}


/* ── Job List (_JobList) ──────────────────────────────────── */
.pn-job-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pn-job-item {
    border-bottom: 1px solid #f3f4f6;
}

    .pn-job-item:last-child { border-bottom: none; }

.pn-job-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    text-decoration: none;
    color: inherit;
    transition: background .12s;
}

    .pn-job-link:hover {
        background: #fff7ed;
    }

    .pn-job-link:hover .pn-job-arrow {
        color: var(--violet, #f97316);
        opacity: 1;
    }

.pn-job-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fff7ed;
    color: var(--violet, #f97316);
    flex-shrink: 0;
}

.pn-job-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pn-job-title {
    font-size: .88rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pn-job-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .78rem;
    color: #6b7280;
    flex-wrap: wrap;
}

.pn-job-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #d1d5db;
    flex-shrink: 0;
}

.pn-job-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .75rem;
    color: #9ca3af;
    flex-wrap: wrap;
}

.pn-job-applicants {
    margin-left: 6px;
    color: var(--violet, #f97316);
    font-weight: 500;
}

.pn-job-arrow {
    color: #d1d5db;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .12s, color .12s;
}

.pn-job-paging {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 18px;
    border-top: 1px solid #f3f4f6;
}