/* ─── BIMEX DESIGN SYSTEM ─────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

:root {
    --bx-bg: #090D14;
    --bx-surface: #111318;
    --bx-surface2: #181C24;
    --bx-border: rgba(255,255,255,0.07);
    --bx-border-hi: rgba(255,255,255,0.14);
    --bx-text: #E8EAF0;
    --bx-muted: whitesmoke;
    --bx-accent: #4FA3D1;
    --bx-accent-dim: rgba(79, 163, 209, 0.12);
    --bx-accent-glow: rgba(79, 163, 209, 0.25);
    --bx-accent-hover: #6BBEFF;
    --bx-amber: #F5A623;
    --bx-amber-dim: rgba(245,166,35,0.12);
    --bx-blue: #4D8EFF;
    --bx-blue-dim: rgba(77,142,255,0.12);
    --bx-red: #FF5B5B;
    --bx-red-dim: rgba(255,91,91,0.12);
    --bx-purple: #A78BFA;
    --bx-purple-dim: rgba(167,139,250,0.12);
    --font-display: 'Archivo', sans-serif;
    --font-body: 'Archivo', sans-serif;
    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 18px;
    --shadow: 0 2px 24px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 48px rgba(0,0,0,0.6);
    --transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
}

#google_translate_element {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
    #google_translate_element .skiptranslate {
        display: flex !important;
        align-items: center;
    }

    #google_translate_element select {
        margin: 0 !important;
    }


input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px none inset !important;
    -webkit-text-fill-color: white !important;
    caret-color: #1a1a2e;
    transition: background-color 5000s ease-in-out 0s;
}

/* 1. PREVENT THE LAYOUT SHIFT FLICKER */
font, font font, [class*="goog-text-highlight"] {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
   
    /* Crucial: Disables animations/fades during Google's DOM updates */
    transition: none !important;
    transform: none !important;
    pointer-events: none !important;
}

/* 2. COMPLETELY SHIELD THE USER FROM GOOGLE'S HOVER OVERLAYS */
#goog-gt-tt,
.goog-te-balloon-frame,
#goog-gt-tt.vi-template,
.goog-tooltip,
.goog-tooltip:hover,
.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
}

/* 3. CLEAN UP BASE IFRAME BAR AND BODY POSITION */
.goog-te-banner-frame,
.goog-te-banner,
.skiptranslate > iframe,
.VIpgJd-ZVi9od-ORHb-OEVmcd {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;

}


.lang-switch {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    direction: ltr; /* keep switch orientation stable even in RTL mode */
    outline: none;
}

.lang-switch-track {
    position: relative;
    display: flex;
    align-items: center;
    width: 72px;
    height: 32px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    padding: 3px;
    transition: background 0.25s ease;
}

.lang-switch:hover .lang-switch-track,
.lang-switch:focus-visible .lang-switch-track {
    background: rgba(255, 255, 255, 0.14);
}

.lang-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 32px;
    height: 24px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

    .lang-switch-thumb.ar {
        transform: translateX(34px);
    }

.lang-switch-label {
    position: relative;
    z-index: 2;
    flex: 1;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.25s ease;
    pointer-events: none;
}

.lang-switch-thumb.en ~ .lang-switch-label.en,
.lang-switch-thumb.ar ~ .lang-switch-label.ar {
    color: #fff;
}
/* Dark mode adjustment support (Optional) */
/*[dir="rtl"] .custom-lang-switch {
    flex-direction: row-reverse;*/ /* Keeps button directions intuitive when page flips to RTL */
/*}*/

body {
    top: 0px !important;
    position: static !important;
}

/* 4. KEEP ORIGINAL NAIVGATION HOVER STYLES WORKING */
.lnav-link:hover font {
    color: inherit !important;
}
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    background: var(--bx-bg);
    color: var(--bx-text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

.validation-message{
    color:red;
}

/* ─── LAYOUT ─── */
.bx-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-template-rows: 1fr;
    min-height: 100vh;
}

.bx-sidebar {
    background: var(--bx-surface);
    border-right: 1px solid var(--bx-border);
    display: flex;
    flex-direction: column;
    padding: 28px 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index:2000;
}

.bx-main {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    background-color:white;
}

/* ─── SIDEBAR ─── */
.bx-logo {
    padding: 0 24px 32px;
    display: flex;
    align-items: center;
}

.bx-logo-img {
    height: 65px; /* Adjust as needed */
    width: 250px;
    display: block;
}

.bx-logo-mark {
    width: 36px;
    height: 36px;
    background: var(--bx-accent);
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16px;
    color: #000;
    letter-spacing: -0.5px;
    box-shadow: 0 0 20px var(--bx-accent-glow);
}

.bx-logo-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--bx-text);
    letter-spacing: -0.3px;
}

    .bx-logo-text span {
        color: var(--bx-accent);
    }

.bx-nav-section {
    padding: 0 14px;
    margin-bottom: 8px;
}

.bx-nav-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--bx-muted);
    padding: 0 10px;
    margin-bottom: 6px;
}

.bx-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    color: var(--bx-muted);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

    .bx-nav-item:hover {
        background: var(--bx-surface2);
        color: var(--bx-text);
        opacity: 1;
        transform: translateX(2px);
    }

    .bx-nav-item.active {
        background: var(--bx-accent-dim);
        color: var(--bx-accent);
        font-weight: 500;
    }

    .bx-nav-item .nav-icon {
        font-size: 16px;
        width: 20px;
        text-align: center;
        flex-shrink: 0;
        opacity: 0.8;
        transition: all 0.2s ease;
    }

.bx-nav-badge {
    margin-left: auto;
    background: var(--bx-accent);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 20px;
}

.bx-sidebar-footer {
    margin-top: auto;
    padding: 16px 14px 0;
    border-top: 1px solid var(--bx-border);
}

.bx-avatar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}

/*    .bx-avatar-row:hover {
        background: var(--bx-surface2);
    }*/

.bx-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bx-accent), var(--bx-blue));
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    flex-shrink: 0;
}

.bx-avatar-info strong {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--bx-text);
    line-height: 1.2;
    margin-bottom:3px;
    white-space:nowrap;
}

.bx-avatar-info span {
    font-size: 11px;
    color: var(--bx-muted);
}

/* ─── TOPBAR ─── */
.bx-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 36px;
    border-bottom: 1px solid var(--bx-border);
    background: var(--bx-bg);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(12px);
}

.bx-topbar-left h1 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.bx-topbar-left p {
    font-size: 13px;
    color: var(--bx-muted);
    margin-top: 1px;
}

.bx-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ─── BUTTONS ─── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: var(--transition);
    text-decoration: none;
}

.btn-primary {
    background: var(--bx-accent);
    color: #000;
    font-weight: 600;
}

    .btn-primary:hover {
        background: #00ddb5;
        box-shadow: 0 0 20px var(--bx-accent-glow);
        transform: translateY(-1px);
    }

.btn-ghost {
    background: var(--bx-surface2);
    color: var(--bx-text);
    border: 1px solid var(--bx-border);
}

    .btn-ghost:hover {
        border-color: var(--bx-border-hi);
        background-color:black;
        color: aquamarine; /* or a stronger color like #fff */
    }

.btn-icon {
    background: var(--bx-surface2);
    border: 1px solid var(--bx-border);
    color: var(--bx-muted);
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    border-radius: var(--radius-sm);
}

    .btn-icon:hover {
        color: var(--bx-text);
        border-color: var(--bx-border-hi);
    }

/* ─── CONTENT AREA ─── */
.bx-content {
    padding: 32px 36px;
    flex: 1;
    /*background: radial-gradient(1100px 520px at 78% -8%, rgba(45, 212, 191, .07), transparent 60%), #090D14;*/
}

/* ─── STAT CARDS ─── */
.bx-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.bx-stat-card {
    background: var(--bx-surface);
    border: 1px solid var(--bx-border);
    border-radius: var(--radius);
    padding: 20px 22px;
    transition: var(--transition);
}

    .bx-stat-card:hover {
        border-color: var(--bx-border-hi);
        transform: translateY(-1px);
        box-shadow: var(--shadow);
    }

.bx-stat-label {
    font-size: 12px;
    color: var(--bx-muted);
    font-weight: 500;
    letter-spacing: 0.3px;
    margin-bottom: 10px;
}

.bx-stat-val {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 6px;
    color: whitesmoke;
}



.bx-stat-icon {
    float: right;
    margin-top: -2px;
    font-size: 22px;
    opacity: 0.6;
}

/* ─── SECTION HEADER ─── */
.bx-section-header, .bx-section-header-light {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}


.bx-section-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.bx-section-header-light .bx-section-title {
    color:black;
}

/* ─── PROJECT CARDS ─── */
/* ── LIST CARD ── */
.pcard-list {
    display: flex;
    background: #f8f8f8;
    border: 1px solid var(--bx-border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
}

    .pcard-list:hover {
        border-color: var(--sc);
        box-shadow: 0 0 0 1px var(--sc),0 8px 32px rgba(0,0,0,.4);
        transform: translateY(-2px);
    }

.pcard-stripe {
    width: 4px;
    flex-shrink: 0;
    background: var(--sc,#5C6070);
    box-shadow: 0 0 14px var(--sc);
}

.pcard-body {
    flex: 1;
    padding: 18px 22px;
    min-width: 0;
}

.pcard-row1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.pcard-id {
    font-size: 10px;
    font-family: monospace;
    color: #3D3C3C;
    letter-spacing: .5px;
    margin-bottom: 3px;
}

.pcard-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.3px;
    line-height: 1.3;
}

.pcard-cat {
    font-size: 12px;
    color: #3D3C3C;
    margin-top: 3px;
}

/* Bid pulse */
.bid-pulse {
    font-size: 10px;
    font-weight: 700;
    color: var(--bx-blue);
    background: var(--bx-blue-dim);
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
    animation: bid-anim 1.5s ease infinite;
}

@keyframes bid-anim {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: .55
    }
}

/* Meta pills */
.pcard-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.pcard-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    background: var(--bx-surface2);
    border: 1px solid var(--bx-border);
    border-radius: 20px;
    font-size: 11px;
    color: var(--bx-muted);
    font-weight: 500;
}

.pcard-pill-green {
    border-color: rgba(0,198,162,.3);
    color: var(--bx-accent);
    background: var(--bx-accent-dim);
}

.pcard-pill-blue {
    border-color: rgba(77,142,255,.3);
    color: var(--bx-blue);
    background: var(--bx-blue-dim);
}

.pcard-pill-red {
    border-color: rgba(255,91,91,.3);
    color: var(--bx-red);
    background: var(--bx-red-dim);
}

.pill-icon {
    font-size: 10px;
    opacity: .7;
}

/* Reviewer note */
.pcard-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    margin-bottom: 10px;
}

.pcard-note-err {
    background: var(--bx-red-dim);
    color: red;
    font-weight:bold;
    border: 1px solid rgba(255,91,91,.2);
}

/* Progress */
.pcard-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.pcard-progress-track {
    flex: 1;
    height: 4px;
    background: var(--bx-surface2);
    border-radius: 4px;
    overflow: hidden;
}

.pcard-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width .6s ease;
    box-shadow: 0 0 8px currentColor;
}

.pcard-progress-pct {
    font-size: 11px;
    font-weight: 700;
    color: var(--bx-muted);
    flex-shrink: 0;
    min-width: 30px;
    text-align: right;
}

/* Milestone dots */
.pcard-milestones {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
}
.pcard-grid {
    background: color-mix(in srgb, var(--sc) 15%, transparent);
    border: 1px solid var(--bx-border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
}

    .pcard-grid:hover {
        border-color: var(--sc);
        box-shadow: 0 0 0 1px var(--sc),0 8px 32px rgba(0,0,0,.4);
        transform: translateY(-2px);
    }

.pcard-grid-band {
    height: 3px;
    background: var(--sc,#5C6070);
    box-shadow: 0 0 10px var(--sc);
}

.milestone-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bx-surface2);
    border: 1.5px solid var(--bx-border);
    flex-shrink: 0;
}

    .milestone-dot.done {
        background: var(--bx-accent);
        border-color: var(--bx-accent);
        box-shadow: 0 0 6px var(--bx-accent-glow);
    }

/* Actions */
.grid-pcard-actions {
    display: grid;
    grid-template-columns:1fr 1fr;
    column-gap:10px;
    margin-top: auto;
    white-space:nowrap;
}
.pcard-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.pcard-btn {
    font-size: 12px !important;
    padding: 7px 14px !important;
}




/* ── Grid View ── */


/* ── Grid layout ─────────────────────────────────────── */
.pg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(375px, 0.5fr));
    gap: 16px;
    align-items: stretch; /* 🔥 important */
}

/* ── Card shell ──────────────────────────────────────── */
.pg-card {
    border: 0.5px solid var(--bx-border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.18s, transform 0.18s;
    display: flex;
    flex-direction: column;
    height: 100%;

}

    .pg-card:hover {
        border-color: var(--bx-border-hover, rgba(0,0,0,0.25));
        transform: translateY(-2px);
    }


/* ── Accent bar ──────────────────────────────────────── */
.pg-card-accent {
    height: 3px;
    width: 100%;
}

/* ── Card body ───────────────────────────────────────── */
.pg-card-body {
    padding: 18px 20px 16px;
    background: #f8f8f8;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ── Top row: badge + budget ─────────────────────────── */
.pg-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

/* ── Status badge ────────────────────────────────────── */
.pg-badge {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 99px;
}

.pg-badge--inprogress {
    background: #a78bfa4f;
    color: #5b2fdd;
}

.pg-badge--underreview {
    background: rgba(245,158,11,.15);
    color: #ff6707;
    border: 1px solid rgba(245, 158, 11, .4);
}

.pg-badge--completed {
    background: #E6F1FB;
    color: #185FA5;
}

.pg-badge--draft {
    background: #F1EFE8;
    color: #5F5E5A;
}
.pg-badge--bidding {
    background: #a0b9dd;
    color: #0453c7;
}
.pg-badge--rejected {
    background: #d933338f;
    color: #9f0404;
}
.pg-badge--approved {
    background: #00C6A210;
    color: #00C6A2;
    border: 1px solid rgba(39, 80, 245, 0.28);
}
.pg-badge--pendingcancellation {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
}
/* ── Budget ──────────────────────────────────────────── */
/* Budget Area */

.pg-budget-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

.pg-budget {
    font-size: 15px;
    font-weight: 700;
    color: var(--bx-accent);
}

.pg-budget-type {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--bx-accent);
}

/* ── ID / title / category ───────────────────────────── */
.pg-id {
    font-size: 15px;
    color: #3D3C3C;
    font-family: monospace;
  
    margin-bottom: 3px;
}

.pg-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.3px;
    line-height: 1.3;
    color: #3D3C3C;
    
}

.pg-category {
    font-size: 12px;
    color: #3D3C3C;
    margin-top: 3px;
    margin-bottom: 14px;
}

/* ── Divider ─────────────────────────────────────────── */
.pg-divider {
    height: 0.5px;
    background: var(--bx-border);
    margin-bottom: 14px;
}

/* ── Progress ────────────────────────────────────────── */
.pg-progress-section {
    margin-bottom: 14px;
}

.pg-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--bx-muted);
    margin-bottom: 5px;
}

.pg-progress-pct {
    font-weight: 500;
    color: var(--bx-text, inherit);
}

.pg-track {
    height: 3px;
    background: var(--bx-border);
    border-radius: 99px;
    overflow: hidden;
}

.pg-fill {
    height: 100%;
    border-radius: 99px;
}

/* ── Meta row ────────────────────────────────────────── */
.pg-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--bx-muted);
}

.pg-meta--empty {
    opacity: 0.4;
}

/* ── Action buttons ──────────────────────────────────── */
.grid-btn {
    flex: 1; 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; 
    text-align: center;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: var(--radius);
}

    .grid-btn:hover {
        box-shadow: 0 0 20px var(--bx-accent-glow);
        transform: translateY(-1px);
    }

.pg-btn--draft {
    background: #F1EFE8;
    color: #5F5E5A;
    border-color: rgba(136,135,128,0.3);
}

.pg-btn--bidding {
    background: #a0b9dd;
    color: #0453c7;
    border-color: rgba(186,117,23,0.3);
}

/* ── Bid count pill ──────────────────────────────────── */
.pg-bid-pill {
    font-size: 10px;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 99px;
    background: #396dbb;
    color: #fff;
}












/* ── MODAL STEPPER ── */
.modal-steps {
    display: flex;
    border-bottom: 1px solid var(--bx-border);
    padding: 0 28px;
}

.modal-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: 13px;
    color: var(--bx-muted);
    transition: var(--transition);
    white-space: nowrap;
}

    .modal-step:hover {
        color: var(--bx-text);
    }

    .modal-step.active {
        color: var(--bx-accent);
        border-bottom-color: var(--bx-accent);
    }

    .modal-step.done {
        color: var(--bx-accent);
    }

.step-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bx-surface2);
    border: 1.5px solid var(--bx-border);
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

.modal-step.active .step-num {
    background: var(--bx-accent);
    border-color: var(--bx-accent);
    color: #000;
}

.modal-step.done .step-num {
    background: var(--bx-accent-dim);
    border-color: var(--bx-accent);
    color: var(--bx-accent);
}

.step-label {
    font-weight: 500;
}

/* ─── TIMELINE / TRACKER ─── */
.bx-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 28px;
}

.bx-timeline-step {
    position: relative;
    padding-bottom: 28px;
}

    .bx-timeline-step:last-child {
        padding-bottom: 0;
    }

    .bx-timeline-step::before {
        content: '';
        position: absolute;
        left: -20px;
        top: 16px;
        bottom: 0;
        width: 1px;
        background: var(--bx-border);
    }

    .bx-timeline-step:last-child::before {
        display: none;
    }

.bx-tl-dot {
    position: absolute;
    left: -25px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bx-surface2);
    border: 2px solid var(--bx-border);
    display: grid;
    place-items: center;
}

    .bx-tl-dot.done {
        background: var(--bx-accent);
        border-color: var(--bx-accent);
        box-shadow: 0 0 8px var(--bx-accent-glow);
    }

    .bx-tl-dot.active {
        background: var(--bx-amber);
        border-color: var(--bx-amber);
        box-shadow: 0 0 8px rgba(245,166,35,0.4);
        animation: pulse 1.8s ease infinite;
    }

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 6px rgba(245,166,35,0.4);
    }

    50% {
        box-shadow: 0 0 14px rgba(245,166,35,0.7);
    }
}
.bx-lifecycle-status {
    margin-bottom: 18px;
}

.bx-status-alert {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.bx-status-alert-danger {
    background: rgba(239,68,68,.12);
    color: #ff7b7b;
    border: 1px solid rgba(239,68,68,.25);
    box-shadow: 0 0 12px rgba(239,68,68,.08);
}

    .bx-status-alert-danger::before {
        content: "⚠";
        font-size: 12px;
    }
.bx-tl-dot.rejected,
.bx-tl-dot.cancelled {
    background: #EF4444;
    border-color: #EF4444;
    box-shadow: 0 0 12px rgba(239,68,68,.4);
}

.bx-tl-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--bx-text);
    line-height: 1.3;
}

.bx-tl-sub {
    font-size: 11px;
    color: var(--bx-muted);
    margin-top: 2px;
}

/* ─── FILE UPLOAD ZONE ─── */
.bx-dropzone {
    border: 2px dashed var(--bx-border);
    border-radius: var(--radius);
    padding: 14px 24px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    background: rgba(0,198,162,0.02);
    position: relative;
}

    .bx-dropzone:hover, .bx-dropzone.dragover {
        border-color: var(--bx-accent);
        background: var(--bx-accent-dim);
    }

.bx-dropzone-icon {
    font-size: 32px;
    margin-bottom: 10px;
    opacity: 0.5;
    color:whitesmoke;
}

.bx-dropzone-text {
    font-size: 14px;
    color: whitesmoke;

}

    .bx-dropzone-text strong {
        color: var(--bx-accent);
    }

/* ─── FILE LIST ─── */
.bx-file-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.bx-file-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bx-surface2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--bx-border);
    font-size: 13px;
}

.bx-file-ext {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.ext-rvt {
    background: rgba(77,142,255,0.2);
    color: var(--bx-blue);
}

.ext-ifc {
    background: rgba(0,198,162,0.2);
    color: var(--bx-accent);
}

.ext-dwg {
    background: rgba(245,166,35,0.2);
    color: var(--bx-amber);
}

.ext-pdf {
    background: rgba(255,91,91,0.2);
    color: var(--bx-red);
}

.ext-other {
    background: var(--bx-surface);
    color: #00c6a2;
    align-self: baseline;
    margin-top: 4px;
}

.bx-ck {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

    .bx-ck > span {
        font-size: 13px;
        color: whitesmoke;
    }

.bx-file-info {
    flex: 1;
    min-width: 0;
}

.bx-file-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color:whitesmoke;
}

.bx-file-size {
    font-size: 12px;
    color: var(--bx-muted);
    margin-top: 4px;
}

/* ─── MODAL / DRAWER ─── */
.bx-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.bx-modal {
    background: var(--bx-surface) !important;
    border: 1px solid var(--bx-border) !important;
    border-radius: var(--radius-lg) !important;
    width: 100% !important;
    max-width: 700px !important;
    height: 85.5vh !important; /* FIXED HEIGHT */
    display: flex !important; /* KEY */
    flex-direction !important : column;
    overflow: hidden !important; /* IMPORTANT (no scrolling here) */
    box-shadow: var(--shadow-lg) !important;
    animation: slideUp 0.25s cubic-bezier(0.4,0,0.2,1) !important;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.bx-modal-header {
    padding: 24px 28px 20px;
    border-bottom: 1px solid var(--bx-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bx-modal-title {
    padding:0 !important;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    color: whitesmoke;
}

.bx-modal-container {
    padding: 0 !important;
    flex: 1; /* IMPORTANT: fills available space */
    min-height: 0; /* CRITICAL for flex overflow */

    display: flex !important; /* allows inner stretching */
    flex-direction: column !important;
}

.bx-modal-body {
    padding: 24px 28px !important;
    flex: 1; /* IMPORTANT: fills available space */
    min-height: 0; /* CRITICAL for flex overflow */

    overflow-y: auto !important; /* scroll only here */
    display: flex !important; /* allows inner stretching */
    flex-direction: column !important;
}

.bx-modal-footer {
    padding: 18px 28px !important;
    border-top: 1px solid var(--bx-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}
.bx-modal-header,
.bx-modal-footer {
    flex-shrink: 0 !important; /* prevents shrinking */
    background: var(--bx-surface) !important;
    z-index: 2 !important;
}

/* ─── FORM ─── */
.bx-form-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .bx-form-grid h6 {
        display: block;
        font-size: 15px;
        font-weight: 500;      
        margin-bottom: 6px;
        letter-spacing: 0.2px;
        color: whitesmoke;
    }
.bx-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
/* Target MudBlazor input inside your custom wrapper */
.bx-mud .mud-input-root {
    background: var(--bx-surface2);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 14px;
    color: whitesmoke !important;
}

/* Outlined variant border */
.bx-mud .mud-input-outlined-border {
    border: 1px solid white !important;
}
.bx-mud .mud-input-control:hover .mud-input-outlined-border {
    border-color: #00ffd0 !important;
}


/* Label styling */
.bx-mud .mud-input-label {
    color: whitesmoke !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}
.bx-input::-webkit-outer-spin-button,
.bx-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bx-field label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 6px;
    letter-spacing: 0.2px;
    color:whitesmoke;
}

.bx-input, .bx-select, .bx-textarea {
    width: 100%;
    background: var(--bx-surface2) !important;
    border: 1px solid var(--bx-border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--bx-text) !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    padding: 10px 12px;
    transition: var(--transition);
    outline: none;
}

    .bx-input:focus, .bx-select:focus, .bx-textarea:focus {
        border-color: var(--bx-accent);
        box-shadow: 0 0 0 3px var(--bx-accent-dim);
    }

.bx-textarea {
    resize: vertical;
    min-height: 90px;
    height: 90px;
}

.bx-select option {
    background: var(--bx-surface2);
}

/* ─── LANG TOGGLE ─── */
.bx-lang-toggle {
    display: flex;
    background: var(--bx-surface2);
    border: 1px solid var(--bx-border);
    border-radius: var(--radius-sm);
    padding: 2px;
    gap: 2px;
}

.bx-lang-btn {
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: none;
    color: var(--bx-muted);
    transition: var(--transition);
}

    .bx-lang-btn.active {
        background: var(--bx-accent);
        color: #000;
    }



/* ─── REVIEW BANNER ─── */
.bx-banner {
    border-radius: var(--radius);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    margin-bottom: 16px;
}

.bx-banner-warn {
    background: var(--bx-amber-dim);
    border: 1px solid rgba(245,166,35,0.25);
    color: var(--bx-amber);
}

.bx-banner-info {
    background: var(--bx-blue-dim);
    border: 1px solid rgba(77,142,255,0.25);
    color: var(--bx-blue);
}

.bx-banner-ok {
    background: var(--bx-accent-dim);
    border: 1px solid rgba(0,198,162,0.25);
    color: var(--bx-accent);
}

.bx-banner-err {
    background: var(--bx-red-dim);
    border: 1px solid rgba(255,91,91,0.25);
    color: var(--bx-red);
}

/* ─── UTILITIES ─── */
.text-accent {
    color: var(--bx-accent);
}

.text-amber {
    color: var(--bx-amber);
}

.text-blue {
    color: var(--bx-blue);
}

.text-red {
    color: var(--bx-red);
}

.text-muted {
    color: var(--bx-muted);
}

.font-display {
    font-family: var(--font-display);
}

.mt-0 {
    margin-top: 0;
}

.mb-0 {
    margin-bottom: 0;
}

/* ─── RTL Arabic Support ─── */
[dir="rtl"] .bx-sidebar {
    border-right: none;
    border-left: 1px solid var(--bx-border);
}

[dir="rtl"] .bx-project-card::before {
    left: auto;
    right: 0;
    border-radius: 0 3px 3px 0;
}

[dir="rtl"] .bx-timeline {
    padding-left: 0;
    padding-right: 28px;
}

[dir="rtl"] .bx-timeline-step::before {
    left: auto;
    right: -20px;
}

[dir="rtl"] .bx-tl-dot {
    left: auto;
    right: -25px;
}

.bx-view-toggle {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    gap: 4px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--bx-border);
    border-radius: 10px;
}
.btn-view-toggle {
    width: 34px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: gray;
    cursor: pointer;
    transition: all 0.2s ease;
}

    /* icon size */
    .btn-view-toggle .mud-icon-root {
        font-size: 25px;
    }
    .btn-view-toggle.active {
        background: color-mix(in srgb, var(--bx-accent) 20%, transparent);
        color: var(--bx-accent);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--bx-accent) 40%, transparent), 0 2px 8px rgba(0,0,0,0.4);
    }
    .btn-view-toggle:hover {
        background: rgba(255,255,255,0.06);
      color:aquamarine
    }

.btn.btn-ghost.pcard-btn:hover {
    background-color: black;
    color: whitesmoke;
}





/*Reviwer Dashboard Css*/
/* ── Token overrides specific to reviewer page ── */
:root {
    --rv-bg: #080A0F;
    --rv-surf: #0F1117;
    --rv-surf2: #161B24;
    --rv-surf3: #1D2333;
    --rv-border: rgba(255,255,255,0.07);
    --rv-border-h: rgba(255,255,255,0.13);
    --rv-text: #E4E8F2;
    --rv-muted: #4A5168;
    --rv-accent: #00C6A2;
    --rv-amber: #F59E0B;
    --rv-blue: #3B82F6;
    --rv-red: #EF4444;
    --rv-green: #10B981;
    --rv-purple: #8B5CF6;
    --rv-amber-d: rgba(245,158,11,0.13);
    --rv-blue-d: rgba(59,130,246,0.13);
    --rv-red-d: rgba(239,68,68,0.13);
    --rv-green-d: rgba(16,185,129,0.13);
    --rv-tr: all 0.18s cubic-bezier(0.4,0,0.2,1);
    --rv-r: 11px;
    --rv-rsm: 7px;
}

/* ─── TOPBAR ─── */
.rv-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 30px;
    border-bottom: 1px solid var(--rv-border);
    background: var(--rv-bg);
    position: sticky;
    top: 0;
   
    backdrop-filter: blur(16px);
    gap: 20px;
}

.rv-topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rv-topbar-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg,rgba(0,198,162,.18),rgba(59,130,246,.18));
    border: 1px solid rgba(0,198,162,.3);
    display: grid;
    place-items: center;
    font-size: 18px;
    color: var(--rv-accent);
    flex-shrink: 0;
}

.rv-topbar-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.rv-topbar-sub {
    font-size: 14px;
    color: var(--rv-amber);
    margin-top: 1px;
}

.rv-topbar-right {
    display: flex;
}

/* Filter bar */
.rv-filter-bar {
    display: flex;
    background: var(--rv-surf2);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-rsm);
    padding: 6px;
    gap: 2px;
}

.rv-filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 5px;
    border: none;
    background: none;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: whitesmoke;
    cursor: pointer;
    transition: var(--rv-tr);
    white-space: nowrap;
}

    .rv-filter-btn:hover {
        color: var(--rv-text);
        background: rgba(255,255,255,.04);
    }

    .rv-filter-btn.active {
        background: var(--rv-surf3);
        color: var(--rv-text);
    }

.rv-filter-count {
    font-size: 10px;
    font-weight: 700;
    background: rgba(255,255,255,.08);
    padding: 1px 6px;
    border-radius: 20px;
}

.rv-count-purple {
    background: #4c1d95; /* Dark violet (--rv-violet-d) */
    color: #ddd6fe; /* Light violet (--rv-violet) */
}


.rv-count-amber {
    background: var(--rv-amber-d);
    color: var(--rv-amber);
}

.rv-count-green {
    background: var(--rv-green-d);
    color: var(--rv-green);
}

.rv-count-red {
    background: var(--rv-red-d);
    color: var(--rv-red);
}
.rv-count-canc {
    background: #f52e2e;
    color: #fff;
}

/* ─── CONTENT ─── */
.rv-content {
    padding: 22px 30px;
    display: flex;
    flex-direction: column;
    gap: 22px;
   
}

/* ─── STATS ─── */
.rv-stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px;
}

.rv-stat {
    background: var(--rv-surf);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-r);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
    transition: var(--rv-tr);
}

    .rv-stat::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--rv-stat-c, var(--rv-muted));
        box-shadow: 0 0 12px var(--rv-stat-c, transparent);
    }

    .rv-stat:hover {
        transform: translateY(-2px);
        border-color: var(--rv-border-h);
    }

.rv-stat-icon-badge {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--rv-stat-c, #fff) 15%, transparent 85%);
    border: 1px solid color-mix(in srgb, var(--rv-stat-c, #fff) 25%, transparent 75%);
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 900;
    color: var(--rv-stat-c, var(--rv-muted));
    flex-shrink: 0;
}

.rv-stat-val {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
    color: var(--rv-stat-c, var(--rv-text));
}

.rv-stat-label {
    font-size: 13px;
    color: whitesmoke;
    margin-top: 3px;
    font-weight: 500;
}

.rv-stat-amber {
    --rv-stat-c: var(--rv-amber);
}

.rv-stat-green {
    --rv-stat-c: var(--rv-green);
}

.rv-stat-red {
    --rv-stat-c: var(--rv-red);
}

.rv-stat-blue {
    --rv-stat-c: var(--rv-blue);
}

/* ─── WORKSPACE ─── */
.rv-workspace {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 20px;
    align-items: start;
    align-items: stretch;
}

/* ─── QUEUE PANEL ─── */
.rv-queue-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: calc(100vh - 145px); /* adjust to your header */
    overflow-y: auto;
    padding-right: 4px;
}


    .rv-queue-panel::-webkit-scrollbar {
        width: 3px;
    }

    .rv-queue-panel::-webkit-scrollbar-thumb {
        background: var(--rv-border);
        border-radius: 3px;
    }

/* ─── QUEUE CARD ─── */
.rv-qcard {
    /* background: var(--rv-surf);*/
    background: #f8f8f8;
    border: 2px solid var(--rv-border);
    border-radius: var(--rv-r);
    overflow: hidden;
    cursor: pointer;
    transition: var(--rv-tr);
    flex-shrink: 0;
}

    .rv-qcard:hover {
        border-color: color-mix(in srgb, var(--qsc) 55%, transparent);
        transform: translateX(4px);
        box-shadow: -4px 0 0 var(--qsc), 0 6px 24px rgba(0,0,0,.35);
    }

.rv-qcard-selected {
    border-color: var(--qsc);
    background: color-mix(in srgb, var(--qsc) 7%, var(--rv-surf) 93%);
    box-shadow: -4px 0 0 var(--qsc), 0 0 0 1px color-mix(in srgb, var(--qsc) 25%, transparent);
   
}
    .rv-qcard-selected .rv-qcard-inner,
    .rv-qcard-selected .rv-qcard-inner * {
        color: white;
    }

.rv-qcard-bar {
    height: 3px;
    background: linear-gradient(90deg, var(--qsc), color-mix(in srgb, var(--qsc) 30%, transparent));
}

.rv-qcard-inner {
    padding: 13px 16px;
}

.rv-qcard-row1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 7px;
}
.rv-qcard-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

/* Mini lock button */
.rv-qcard-lock-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(245,158,11,.10);
    border: 1px solid rgba(245,158,11,.22);
    color: #F59E0B;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--rv-tr);
    white-space: nowrap;
}

    /* Hover */
    .rv-qcard-lock-btn:hover {
        background: rgba(245,158,11,.18);
        border-color: rgba(245,158,11,.45);
        transform: translateY(-1px);
    }

    /* Press */
    .rv-qcard-lock-btn:active {
        transform: scale(.96);
    }

/* Icon */
.rv-qcard-lock-icon {
    font-size: 11px;
    line-height: 1;
}

/* Text */
.rv-qcard-lock-text {
    letter-spacing: .2px;
}

.rv-qcard-uid {
    font-size: 15px;
    font-family: monospace;
    color: var(--qsc);
    letter-spacing: 1px;
    opacity: .9;
}

.rv-qcard-title {
   font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.2px;
    line-height: 1.3;
    margin-bottom: 3px;
    color: #3D3C3C;
}

.rv-qcard-cat {
    font-size: 12px;
    font-weight: 500;
    color: #3D3C3C;
    margin-bottom: 10px;
}

.rv-qcard-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

.rv-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--rv-border);
    border-radius: 20px;
    font-size: 12px;
    color: var(--rv-muted);
    font-weight: 500;
}

.rv-pill-green {
    border-color: rgba(16,185,129,.3);
    color: var(--rv-green);
    background: var(--rv-green-d);
    font-weight: 700;
}

.rv-pill-red {
    border-color: rgba(239,68,68,.3);
    color: var(--rv-red);
    background: var(--rv-red-d);
}

.rv-qcard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #3D3C3C;
}

.rv-urgent-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rv-amber);
    box-shadow: 0 0 7px var(--rv-amber);
    animation: udot 1.6s ease infinite;
}

@keyframes udot {
    0%,100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .5;
        transform: scale(1.4)
    }
}
/* =====================================================
   ACTION REQUIRED - PREMIUM DARK CARD
===================================================== */
/* ─────────────────────────────
   CARD
───────────────────────────── */
.arx-card {
    position: relative;
    display: flex;
    overflow: hidden;
    margin-bottom: 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    flex: 0 0 auto !important;
    min-height: fit-content;
    isolation: isolate;
}

    /* Hover glow */
    .arx-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top right, color-mix(in srgb, var(--qsc) 10%, transparent), transparent 45%);
        opacity: 0;
        transition: opacity .25s ease;
        pointer-events: none;
    }

    .arx-card:hover::before {
        opacity: 1;
    }

    .arx-card:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--qsc) 40%, rgba(255,255,255,.1));
        box-shadow: 0 12px 30px rgba(0,0,0,.35), 0 0 24px color-mix(in srgb, var(--qsc) 20%, transparent), 0 0 0 1px color-mix(in srgb, var(--qsc) 18%, transparent);
    }

/* ─────────────────────────────
   ACCENT STRIP
───────────────────────────── */
.arx-accent {
    width: 4px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--qsc), color-mix(in srgb, var(--qsc) 55%, white));
}

/* ─────────────────────────────
   CONTENT
───────────────────────────── */
.arx-content {
    flex: 1;
    min-width: 0;
    padding: 18px 20px;
}

/* ROW 1: number · main · resolve */
.arx-header {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

/* Number badge */
.arx-number {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, var(--qsc), color-mix(in srgb, var(--qsc) 60%, black));
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

/* Main column */
.arx-main {
    flex: 1;
    min-width: 0;
}

/* ─────────────────────────────
   LABEL ROW (label + type tag)
───────────────────────────── */
.arx-label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--qsc);
    margin-bottom: 8px;
}

/* Type tag */
.act-tag {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 5px;
    line-height: 1.5;
}

    .act-tag.payment {
        color: var(--amber);
        background: var(--amber-dim);
        border: 1px solid var(--amber-line);
    }

    .act-tag.files {
        color: var(--teal);
        background: var(--teal-dim);
        border: 1px solid var(--teal-line);
    }

    .act-tag.agreement {
        color: var(--indigo);
        background: var(--indigo-dim);
        border: 1px solid var(--indigo-line);
    }

/* ─────────────────────────────
   TITLE
───────────────────────────── */
.arx-title {
    color: whitesmoke;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* ─────────────────────────────
   BUDGET
───────────────────────────── */
.arx-budget-block {
    margin-top: 12px;
}

.arx-budget-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: whitesmoke;
    margin-bottom: 4px;
}

.arx-budget-value {
    font-size: 18px;
    font-weight: 700;
    color: #34d399;
    line-height: 1.2;
}

/* ─────────────────────────────
   RESOLVE INDICATOR
   (last child inside .arx-header — in flow, NOT absolute)
───────────────────────────── */
.arx-resolve-wrap {
    flex-shrink: 0;
    align-self: flex-start;
}

.arx-resolve {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: default;
    user-select: none;
}

    .arx-resolve input {
        display: none;
    }

.arx-resolve-check {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1.5px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.04);
    position: relative;
    transition: all .25s ease;
}

.arx-resolve input:checked + .arx-resolve-check {
    background: #22c55e;
    border-color: #22c55e;
    box-shadow: 0 0 14px rgba(34,197,94,.35);
}

    .arx-resolve input:checked + .arx-resolve-check::after {
        content: "✓";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 11px;
        font-weight: 700;
    }

.arx-resolve-text {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,.65);
}

.arx-resolve input:checked ~ .arx-resolve-text {
    color: #22c55e;
}

/* ─────────────────────────────
   RESOLVED STATE
───────────────────────────── */
.arx-card-resolved {
    border-color: rgba(34,197,94,.18);
}

    .arx-card-resolved .arx-accent {
        background: linear-gradient(180deg, #22c55e, #16a34a);
    }

    .arx-card-resolved .arx-number {
        background: linear-gradient(135deg, #22c55e, #15803d);
    }

    .arx-card-resolved .arx-title {
        opacity: .75;
    }

/* ─────────────────────────────
   ACTIONS ROW
   (sibling AFTER .arx-header, inside .arx-content)
───────────────────────────── */
.arx-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    padding: 5px 11px;
    border-radius: 20px;
    white-space: nowrap;
}

    .status-pill.pending {
        color: var(--amber);
        background: var(--amber-dim);
        border: 1px solid var(--amber-line);
    }

    .status-pill.review {
        color: var(--teal);
        background: var(--teal-dim);
        border: 1px solid var(--teal-line);
    }

    .status-pill.resolved {
        color: var(--teal);
        background: var(--teal-dim);
        border: 1px solid var(--teal-line);
    }

    .status-pill svg {
        width: 12px;
        height: 12px;
    }

.act-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter';
    font-weight: 600;
    font-size: 13px;
    border-radius: 9px;
    padding: 8px 14px;
    border: none;
    cursor: pointer;
    transition: filter .15s ease;
}

    .act-cta.amber {
        color: #0A0E14;
        background: var(--amber);
    }

        .act-cta.amber:hover {
            filter: brightness(1.07);
        }

    .act-cta.ghost {
        color: var(--text-dim);
        background: transparent;
        border: 1px solid var(--border);
    }

        .act-cta.ghost:hover {
            color: var(--text);
            border-color: var(--text-faint);
        }

    .act-cta svg {
        width: 14px;
        height: 14px;
    }


/* ─────────────────────────────
   BUDGET
/* ─── STATUS CHIPS ─── */
.rv-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

    .rv-chip::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
        flex-shrink: 0;
    }

.rv-chip-lg {
    font-size: 11px;
    padding: 4px 12px;
}

.rv-chip-draft {
    background: rgba(74,81,104,.2);
    color: #8892A4;
    border: 1px solid rgba(74,81,104,.3);
}

.rv-chip-review {
    background: rgba(245,158,11,.15);
    color: #F59E0B;
    border: 1px solid rgba(245,158,11,.4);
}

.rv-chip-rejected {
    background: rgba(239,68,68,.15);
    color: #EF4444;
    border: 1px solid rgba(239,68,68,.4);
}

.rv-chip-bidding {
    background: rgba(59,130,246,.15);
    color: #3B82F6;
    border: 1px solid rgba(59,130,246,.4);
}

.rv-chip-inprogress {
    background: rgba(139,92,246,.15);
    color: #8B5CF6;
    border: 1px solid rgba(139,92,246,.4);
}

.rv-chip-completed {
    background: rgba(0,198,162,.15);
    color: #00C6A2;
    border: 1px solid rgba(0,198,162,.4);
}
.rv-chip-approved {
    background: rgba(39,80,245,.15);
    color: #00C6A2;
    border: 1px solid rgba(39,80,245,.4);
}
.rv-chip-pendingcancellation {
    background: rgba(239,68,68,.12);
    color: #FF7A7A;
    border: 1px solid rgba(239,68,68,.30);
}

/* Header right actions */
.rv-dh-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Modern lock button */
.rv-review-lock-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    background: rgba(245,158,11,.10);
    border: 1px solid rgba(245,158,11,.25);
    color: #F59E0B;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--rv-tr);
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

    /* subtle glow */
    .rv-review-lock-btn::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient( 135deg, rgba(255,255,255,.08), transparent 60% );
        opacity: 0;
        transition: .25s;
    }

    /* hover */
    .rv-review-lock-btn:hover {
        background: rgba(245,158,11,.16);
        border-color: rgba(245,158,11,.45);
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(245,158,11,.18);
    }


        .rv-review-lock-btn:hover::before {
            opacity: 1;
        }

    /* Press */
    .rv-review-lock-btn:active {
        transform: scale(.98);
    }

/* icon */
.rv-lock-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}
/* Text */
.rv-lock-text {
    letter-spacing: .2px;
}


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

.rv-action-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 15px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

    .rv-action-btn:hover {
        transform: translateY(-2px);
    }

    .rv-action-btn:active {
        transform: scale(.98);
    }

.rv-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 16px;
}

.rv-action-text {
    letter-spacing: .3px;
}

/* =====================================================
   REQUIRE ACTION
===================================================== */

.rv-action-btn-warning {
    color: #F59E0B;
    background: linear-gradient( 180deg, rgba(245,158,11,.12), rgba(245,158,11,.06) );
    border-color: rgba(245,158,11,.25);
}

    .rv-action-btn-warning:hover {
        background: linear-gradient( 180deg, rgba(245,158,11,.18), rgba(245,158,11,.10) );
        border-color: rgba(245,158,11,.45);
        box-shadow: 0 8px 24px rgba(245,158,11,.20), 0 0 18px rgba(245,158,11,.15);
    }

/* =====================================================
   PUBLISH POST
===================================================== */

.rv-action-btn-publish {
    color: #34D399;
    background: linear-gradient( 180deg, rgba(52,211,153,.12), rgba(52,211,153,.06) );
    border-color: rgba(52,211,153,.25);
}

    .rv-action-btn-publish:hover {
        background: linear-gradient( 180deg, rgba(52,211,153,.18), rgba(52,211,153,.10) );
        border-color: rgba(52,211,153,.45);
        box-shadow: 0 8px 24px rgba(52,211,153,.20), 0 0 18px rgba(52,211,153,.15);
    }

/* ─── DETAIL PANEL ─── */
.rv-detail {
    background: var(--rv-surf);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-r);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 145px);
}

/* Empty state with decorative rings */
.rv-detail-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 40px;
    text-align: center;
    background-color:whitesmoke;
}

.rv-detail-empty-graphic {
    position: relative;
    width: 140px;
    height: 140px;
    display: grid;
    place-items: center;
}




/*bigger rings*/
/*.rv-deg-ring {
    position: absolute;
    border-radius: 50%;
    border: 2.5px solid rgba(0,198,162,.28);
    animation: ring-pulse 3s ease infinite;
}*/

/* Outer ring */
/*.rv-deg-ring1 {
    width: 140px;
    height: 140px;
    border-width: 3px;
}*/

/* Middle ring */
/*.rv-deg-ring2 {
    width: 100px;
    height: 100px;
    animation-delay: .4s;
    border-color: rgba(59,130,246,.28);
    border-width: 2.5px;
}*/

/* Inner ring */
/*.rv-deg-ring3 {
    width: 70px;
    height: 70px;
    animation-delay: .8s;
    border-color: rgba(139,92,246,.32);
    border-width: 2.5px;
}*/







/* Base ring */
.rv-deg-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(0,198,162,.18);
    animation: ring-pulse 3s ease infinite;
}

/* Outer ring */
.rv-deg-ring1 {
    width: 140px;
    height: 140px;
}

/* Middle ring */
.rv-deg-ring2 {
    width: 100px;
    height: 100px;
    animation-delay: .4s;
    border-color: rgba(59,130,246,.18);
}

/* Inner ring */
.rv-deg-ring3 {
    width: 70px;
    height: 70px;
    animation-delay: .8s;
    border-color: rgba(139,92,246,.22);
}



@keyframes ring-pulse {
    0%, 100% {
        opacity: .35;
        transform: scale(1);
    }

    50% {
        opacity: .9;
        transform: scale(1.08);
    }
}

.rv-deg-icon {
    font-size: 22px;
    opacity: .3;
    position: relative;
    z-index: 1;
}

.rv-detail-empty-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--rv-muted);
}

.rv-detail-empty-sub {
    font-size: 12px;
    color: var(--rv-muted);
    max-width: 260px;
    line-height: 1.6;
}

/* Detail header */
.rv-dh {
    overflow: hidden;
    flex-shrink: 0;
}

.rv-dh-band {
    height: 4px;
    background: linear-gradient(90deg, var(--qsc, var(--rv-accent)), transparent 70%);
}

.rv-dh-body {
    padding: 18px 22px 16px;
    background: color-mix(in srgb, var(--qsc, var(--rv-accent)) 7%, var(--rv-surf2) 93%);
    border-bottom: 1px solid var(--rv-border);
}

.rv-dh-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.rv-dh-uid {
    font-size: 14px;
    font-family: monospace;
    color: var(--qsc,var(--rv-accent));
    letter-spacing: 1.2px;
    margin-bottom: 4px;
}

.rv-dh-title {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.4px;
    line-height: 1.2;
    margin-bottom: 4px;
}

.rv-dh-cat {
    font-size: 12px;
   
}

.rv-dh-metrics {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.rv-metric {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--rv-border);
    border-radius: 8px;
    padding: 9px 13px;
    min-width: 90px;
}

.rv-metric-lbl {
    font-size: 9px;
    
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 4px;
}

.rv-metric-val {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
}

.rv-metric-green {
    border-color: rgba(16,185,129,.3);
    background: var(--rv-green-d);
}

    .rv-metric-green .rv-metric-val {
        color: var(--rv-green);
    }

.rv-metric-red {
    border-color: rgba(239,68,68,.3);
    background: var(--rv-red-d);
}

    .rv-metric-red .rv-metric-val {
        color: var(--rv-red);
    }

/* Tabs */
.rv-tabs {
    display: flex;
    border-bottom: 1px solid var(--rv-border);
    padding: 0 22px;
    flex-shrink: 0;
    background: var(--rv-surf);
}

.rv-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: none;
    background: none;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
   
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: var(--rv-tr);
    white-space: nowrap;

    color:white !important;
}

    .rv-tab:hover {
        color: var(--rv-text);
    }

    .rv-tab.active {
        color: var(--rv-accent);
        border-bottom-color: var(--rv-accent);
    }

.rv-tab-count {
    font-size: 9px;
    font-weight: 700;
    background: rgba(255,255,255,.08);
    padding: 1px 5px;
    border-radius: 20px;
}

.rv-tab-decision {
    position: relative;
}

.rv-tab-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rv-amber);
    box-shadow: 0 0 6px var(--rv-amber);
    animation: udot 1.6s ease infinite;
}

.rv-canc-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rv-red);
    box-shadow: 0 0 6px var(--rv-amber);
    animation: udot 1.6s ease infinite;
}
/* Tab body */
.rv-db {
    flex: 1;
    min-height: 0; /* 🔥 CRITICAL FIX */
    padding: 20px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;

}

    .rv-db::-webkit-scrollbar {
        width: 3px;
    }

    .rv-db::-webkit-scrollbar-thumb {
        background: var(--rv-border);
        border-radius: 3px;
    }

.rv-db-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.rv-db-label {
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    margin-bottom: 5px !important;
}

body{
    color:white !important;
}

.rv-db-text {
    font-size: 13px !important;
    line-height: 1.75 !important;
    color: var(--rv-text) !important;
    background: var(--rv-surf2 !important);
    border: 1px solid var(--rv-border) !important;
    border-radius: var(--rv-rsm) !important;
    padding: 13px 15px !important;
}

.rv-db-text-plain {
    background: none;
    border: none;
    padding: 0;
}

.rv-no-content {
    color: var(--rv-muted);
    font-style: italic;
}

.rv-deliverables {
    display: flex;
    gap: 12px;
    background: rgba(0,198,162,.06);
    border: 1px solid rgba(0,198,162,.2);
    border-radius: var(--rv-rsm);
    padding: 13px 15px;
}

.rv-deliv-icon {
    font-size: 16px;
    color: var(--rv-accent);
    flex-shrink: 0;
    margin-top: 1px;
}

/* Mini timeline */
.rv-mini-tl {
    display: flex;
    flex-direction: column;
    padding-left: 6px;
}

.rv-mtl-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 18px;
    position: relative;
}

.rv-mtl-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--rv-border);
    background: var(--rv-surf2);
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
    z-index: 1;
}

.rv-mtl-done {
    background: var(--rv-accent);
    border-color: var(--rv-accent);
    box-shadow: 0 0 8px rgba(0,198,162,.4);
}

.rv-mtl-active {
    background: var(--rv-amber);
    border-color: var(--rv-amber);
    animation: udot 1.5s ease infinite;
}

.rv-mtl-connector {
    position: absolute;
    left: 5px;
    top: 13px;
    bottom: -2px;
    width: 1px;
    background: var(--rv-border);
    border-radius: 1px;
}

.rv-mtl-label {
    font-size: 15px;
    font-weight: 500;
}

.rv-mtl-date {
    font-size: 15px;
    color: #f8f9fa;
    margin-top: 2px;
}

.rv-mtl-pending {
    color: var(--rv-amber) !important;
}

/* Note display */
.rv-note-display {
    background: rgba(239,68,68,.07);
    border: 1px solid rgba(239,68,68,.25);
    border-radius: var(--rv-rsm);
    padding: 13px 15px;
}

.rv-note-display-header {
    font-size: 10px;
    font-weight: 700;
    color: var(--rv-red);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.rv-note-display-text {
    font-size: 13px;
    line-height: 1.6;
}

/* Files */
.rv-files {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rv-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: var(--rv-surf2);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-rsm);
    transition: var(--rv-tr);
    margin-top:5px;
}

    .rv-file:hover {
        border-color: var(--rv-border-h);
    }

.rv-file-ext {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .5px;
    flex-shrink: 0;
}

.ext-rvt {
    background: rgba(59,130,246,.18);
    color: #3B82F6;
}

.ext-ifc {
    background: rgba(0,198,162,.18);
    color: #00C6A2;
}

.ext-dwg {
    background: rgba(245,158,11,.18);
    color: #F59E0B;
}

.ext-pdf {
    background: rgba(239,68,68,.18);
    color: #EF4444;
}
.rv-project-info {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 14px;
}

.rv-info-card {
    background: linear-gradient( 180deg, rgba(255,255,255,.03), rgba(255,255,255,.015) );
    border: 1px solid var(--rv-border);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: .25s ease;
    position: relative;
    overflow: hidden;
}

    .rv-info-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient( 90deg, var(--rv-accent), rgba(0,198,162,.25) );
        opacity: 0;
        transition: .25s ease;
    }

    .rv-info-card:hover {
        transform: translateY(-2px);
        border-color: var(--rv-border-h);
        box-shadow: 0 12px 28px rgba(0,0,0,.18);
    }

        .rv-info-card:hover::before {
            opacity: 1;
        }

.rv-info-card-wide {
    grid-column: span 2;
}

.rv-info-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: whitesmoke;
}

.rv-info-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--rv-text);
    line-height: 1.4;
}

.rv-status-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0,198,162,.12);
    border: 1px solid rgba(0,198,162,.25);
    color: var(--rv-accent);
    font-size: 12px;
    font-weight: 700;
    align-self:center;
}

.rv-file-info {
    flex: 1;
    min-width: 0;
}

.rv-file-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv-file-meta {
    font-size: 12px;
    margin-top: 2px;
}

.rv-file-type {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--rv-border);
    flex-shrink: 0;
}
.rv-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    border: 1px solid transparent;
    transition: .2s ease;
}


/* Approved */
.rv-status-success {
    background: rgba(16,185,129,.12);
    color: #10B981;
    border-color: rgba(16,185,129,.25);
}

/* Under Review */
.rv-status-warning {
    background: rgba(245,158,11,.12);
    color: #F59E0B;
    border-color: rgba(245,158,11,.25);
}

/* Rejected */
.rv-status-danger {
    background: rgba(239,68,68,.12);
    color: #EF4444;
    border-color: rgba(239,68,68,.25);
}

/* Default */
.rv-status-neutral {
    background: rgba(148,163,184,.12);
    color: #94A3B8;
    border-color: rgba(148,163,184,.25);
}


/* Milestones */
.rv-ms-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rv-ms-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--rv-surf2);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-rsm);
    transition: var(--rv-tr);
}

.rv-ms-done {
    border-color: rgba(0,198,162,.25);
    background: rgba(0,198,162,.05);
}

.rv-ms-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--rv-surf3);
    border: 1.5px solid var(--rv-border);
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
   
    flex-shrink: 0;
}

.rv-ms-done .rv-ms-num {
    background: var(--rv-accent);
    border-color: var(--rv-accent);
    color: #000;
}

.rv-ms-info {
    flex: 1;
}

.rv-ms-title {
    font-size: 13px;
    font-weight: 500;
}

.rv-ms-sub {
    font-size: 11px;
    color: var(--rv-muted);
    margin-top: 2px;
}

.rv-ms-done .rv-ms-sub {
    color: var(--rv-accent);
}

.rv-ms-check {
    font-size: 16px;
    color: var(--rv-muted);
}

.rv-ms-done .rv-ms-check {
    color: var(--rv-accent);
}

/* Decision card */
.rv-decision-card {
    background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(59,130,246,.05));
    border: 1px solid rgba(245,158,11,.25);
    border-radius: var(--rv-rsm);
    padding: 18px 20px;
}

.rv-dc-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--rv-amber);
    background: var(--rv-amber-d);
    border: 1px solid rgba(245,158,11,.3);
    padding: 3px 9px;
    border-radius: 20px;
    margin-bottom: 10px;
}
.rv-canc-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--rv-red);
    border: 1px solid rgba(245,158,11,.3);
    padding: 3px 9px;
    border-radius: 20px;
    margin-bottom: 10px;
}
.rv-cancel-date {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.75);
    font-size: .9rem;
    white-space: nowrap;
    margin-bottom:10px;
}


    .rv-cancel-date::before {
        content: "🗓";
        font-size: 1rem;
    }

.rv-cancel-badge {
    display: inline-block;
    padding: 10px 5px;
  
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.rv-dc-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
}

.rv-dc-sub {
    font-size: 15px;
    color: lightgray;
    line-height: 1.65;
}

/* Checklist */
.rv-checklist {
    background: var(--rv-surf2);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-rsm);
    overflow: auto;
    min-height:150px;

}

.rv-checklist-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 15px;
    border-bottom: 1px solid var(--rv-border);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--rv-accent);
}

.rv-cl-icon {
    font-size: 14px;
}

.rv-cl-score {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    color: var(--rv-accent);
    background: rgba(0,198,162,.1);
    padding: 1px 7px;
    border-radius: 20px;
}

.rv-cl-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 15px;
    border-bottom: 1px solid var(--rv-border);
    cursor: pointer;
    transition: var(--rv-tr);
}

    .rv-cl-row:last-child {
        border-bottom: none;
    }

    .rv-cl-row:hover {
        background: rgba(255,255,255,.03);
    }

.rv-cl-checked {
    background: rgba(0,198,162,.04);
}

.rv-cl-box {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--rv-accent);
    flex-shrink: 0;
    margin-top: 2px;
}

.rv-cl-label {
    font-size: 12px;
    line-height: 1.45;
}

.rv-cl-checked .rv-cl-label {
    color: var(--rv-muted);
    text-decoration: line-through;
}

/* Textarea */
.rv-textarea {
    width: 100%;
    background: var(--rv-surf2);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-rsm);
    color: var(--rv-text);
    font-family: var(--font-body);
    font-size: 13px;
    padding: 12px 14px;
    resize: vertical;
    outline: none;
    transition: var(--rv-tr);
    min-height: 100px;
    
}

    .rv-textarea:focus {
        border-color: var(--rv-accent);
        box-shadow: 0 0 0 3px rgba(0,198,162,.1);
    }

    .rv-textarea::placeholder {
        color: var(--rv-muted);
    }

.rv-reject-hint {
    font-size: 11px;
    color: var(--rv-muted);
    margin-top: 6px;
}

/* Action buttons */
.rv-action-row {
    display: flex;
    gap: 25px;
    width: 100%;
    flex-shrink: 0;
    justify-content: center; /* center buttons */
    align-items: center;
    padding-top: 5px;
}


.rv-milestone-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--rv-rsm);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: var(--rv-tr);
    width:150px;
}




.rv-quick-bar {
    position: sticky;
    bottom: 0;
    padding: 13px 22px;
    border-top: 1px solid var(--rv-border);
    background: color-mix(in srgb, var(--rv-amber) 5%, var(--rv-surf) 95%);
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 0;
    z-index: 100;
}
.rv-quick-actions {
    display: flex;
    gap: 25px;
    width: 100%;
    max-width: 500px;
}
.rv-action-btn {
    width: 180px; /* equal width */
    height: 44px; /* equal height */

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: var(--rv-rsm);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--rv-tr);
    border: none;
}
    .rv-action-btn:disabled {
        opacity: .3;
        cursor: not-allowed;
        pointer-events: none;
    }

.rv-btn-reject {
    flex: 1;
    background: rgba(239,68,68,.1);
    color: var(--rv-red);
    border: 1px solid rgba(239,68,68,.35);
}

    .rv-btn-reject:hover:not(:disabled) {
        background: rgba(239,68,68,.2);
        box-shadow: 0 0 20px rgba(239,68,68,.18);
    }

.rv-btn-approve {
    flex: 1;
    background: var(--rv-accent);
    color: #000;
}

    .rv-btn-approve:hover {
        background: #00ddb5;
        box-shadow: 0 0 20px rgba(0,198,162,.35);
        transform: translateY(-1px);
    }

.rv-btn-approve-sm {
    background: var(--rv-accent);
    color: #000;
    padding: 7px 16px;
    border-radius: var(--rv-rsm);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: var(--rv-tr);
}

    .rv-btn-approve-sm:hover {
        background: #00ddb5;
    }

.rv-btn-ghost {
    background: var(--rv-surf2);
    color: var(--rv-text);
    border: 1px solid var(--rv-border);
}

    .rv-btn-ghost:hover {
        border-color: var(--rv-border-h);
        color: var(--rv-accent);
    }

.rv-btn-ghost-sm {
    background: var(--rv-surf2);
   
    border: 1px solid var(--rv-border);
    padding: 7px 14px;
    border-radius: var(--rv-rsm);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--rv-tr);
}

    .rv-btn-ghost-sm:hover {
        color: var(--rv-text);
        border-color: var(--rv-border-h);
    }

.rv-btn-primary {
    background: var(--rv-accent);
    color: #000;
}

    .rv-btn-primary:hover {
        background: #00ddb5;
    }

/* Already decided banner */
.rv-decided {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--rv-rsm);
}

.rv-decided-green {
    background: rgba(0,198,162,.07);
    border: 1px solid rgba(0,198,162,.3);
}

.rv-decided-red {
    background: rgba(239,68,68,.07);
    border: 1px solid rgba(239,68,68,.3);
}

.rv-decided-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 900;
    flex-shrink: 0;
}

.rv-decided-green .rv-decided-icon {
    background: rgba(0,198,162,.2);
    color: var(--rv-accent);
}

.rv-decided-red .rv-decided-icon {
    background: rgba(239,68,68,.2);
    color: var(--rv-red);
}

.rv-decided-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
}

.rv-decided-note {
    font-size: 15px;
    color: #FF5B5B;
    line-height: 1.55;
}

/* Quick action bar */
.rv-quick-bar {
    padding: 13px 22px;
    border-top: 1px solid var(--rv-border);
    background: color-mix(in srgb, var(--rv-amber) 5%, var(--rv-surf) 95%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-shrink: 0;
    margin-bottom:0;
}


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

.rv-empty-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--rv-muted);
}

.rv-empty-sub {
    font-size: 12px;
    color: var(--rv-muted);
}

.rv-tab-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 24px;
    font-size: 13px;
    color: var(--rv-muted);
    text-align: center;
}

    .rv-tab-empty > div:first-child {
        font-size: 28px;
        opacity: .3;
    }

/* ─── TOAST ─── */
.rv-toast {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9999;
    background: var(--rv-surf);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-r);
    padding: 14px 18px;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
    min-width: 300px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    animation: toast-in .25s cubic-bezier(.4,0,.2,1);
}

@keyframes toast-in {
    from {
        transform: translateY(20px);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

.rv-toast-green {
    border-color: rgba(16,185,129,.35);
}

.rv-toast-red {
    border-color: rgba(239,68,68,.35);
}

.rv-toast-blue {
    border-color: rgba(59,130,246,.35);
}

.rv-toast-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.rv-toast-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}

.rv-toast-msg {
    font-size: 15px;
    color:whitesmoke;
}


/* ── Edit tab button ─────────────────────────────── */
.rv-tab-edit {
    color: var(--rv-blue);
}

    .rv-tab-edit.active {
        border-bottom-color: var(--rv-blue);
    }

/* ── Edit section layout ─────────────────────────── */
.rv-edit-section {
    margin-bottom: 28px;
}

.rv-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 10px;
}

.rv-edit-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rv-edit-field-full {
    grid-column: 1 / -1;
}

.rv-edit-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: lightgrey;
}

.rv-edit-input {
    background: var(--rv-surface2, #181C24);
    border: 1px solid var(--rv-border, rgba(255,255,255,.08));
    border-radius: 8px;
    color: var(--rv-text, #E8EAF0);
    font-family: inherit;
    font-size: 14px;
    padding: 9px 12px;
    outline: none;
    transition: border-color .15s;
}

    .rv-edit-input:focus {
        border-color: var(--rv-blue, #4D8EFF);
    }

.rv-edit-textarea {
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
}

/* ── Milestone editor row ────────────────────────── */
.rv-edit-ms-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

    .rv-edit-ms-row .rv-edit-input {
        flex: 1;
    }

.rv-edit-ms-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--rv-muted);
    white-space: nowrap;
}

.rv-edit-ms-del {
    background: none;
    border: none;
    color: var(--rv-red, #FF5B5B);
    cursor: pointer;
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background .15s;
}

    .rv-edit-ms-del:hover {
        background: rgba(255,91,91,.12);
    }
.rv-ms-edit-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .rv-ms-edit-row .rv-ms-num {
        flex-shrink: 0;
    }

    .rv-ms-edit-row .rv-edit-input {
        min-width: 0;
    }

.rv-ms-amount {
    width: 140px;
    flex-shrink: 0;
   text-align:center;
}

/* ── Read-only meta grid ─────────────────────────── */
.rv-edit-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 10px;
}

.rv-edit-meta-item {
    background: var(--rv-surface2, #181C24);
    border: 1px solid var(--rv-border, rgba(255,255,255,.07));
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rv-edit-meta-lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: lightgray;
}

.rv-edit-meta-val {
    font-size: 14px;
    color: var(--rv-text);
}

.rv-uid-mono {
    font-family: monospace;
    color: var(--rv-blue);
}

/* ── Unsaved / saved banners ─────────────────────── */
.rv-edit-unsaved-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(245,166,35,.08);
    border: 1px solid rgba(245,166,35,.25);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #F5A623;
}

    .rv-edit-unsaved-banner > span {
        flex: 1;
    }

.rv-edit-saved-banner {
    background: rgba(0,198,162,.08);
    border: 1px solid rgba(0,198,162,.25);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: #00C6A2;
    margin-bottom: 16px;
}

.rv-edit-tip-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(77,142,255,.07);
    border: 1px solid rgba(77,142,255,.2);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: lightgrey;
    margin-bottom: 16px;
}

.rv-inline-link {
    background: none;
    border: none;
    color: var(--rv-blue, #4D8EFF);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    padding: 0;
    text-decoration: underline;
}

/* ── File download button ────────────────────────── */


.rv-file-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.rv-file-dl-btn,
.rv-file-del-btn {
    border: 1px solid var(--rv-border);
    background: rgba(255,255,255,.04);
    color: #71d9fb;
    padding: 5px 8px;
    font-size: 11px;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--rv-tr);
}

    /* Download hover */
    .rv-file-dl-btn:hover {
        color: #3B82F6;
        border-color: #3B82F6;
        background: rgba(59,130,246,.1);
    }

/* Delete button (danger style) */
.rv-file-del-btn {
    color: #EF4444;
    border-color: rgba(239,68,68,.3);
}

    .rv-file-del-btn:hover {
        background: rgba(239,68,68,.1);
        border-color: #EF4444;
        color: #EF4444;
    }


/* ── Reviwer Client Modal ── */
.rvm-client-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-align: left;
    width: 100%;
    transition: opacity .15s;
}

    .rvm-client-trigger:hover {
        opacity: .8;
    }

.rvm-ct-av {
    width: 40px;
    height: 35px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rv-accent), var(--rv-blue));
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 12px;
    color: #fff;
    flex-shrink: 0;
}

.rvm-ct-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--rv-text);
}

.rvm-ct-hint {
    font-size: 13px;
    color: var(--rv-accent);
    margin-top: 2px;
}

.rvm-eng-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(77,142,255,.08);
    border: 1px solid rgba(77,142,255,.22);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--rv-blue);
    cursor: pointer;
    transition: var(--rv-tr);
    margin-top: 5px;
}

    .rvm-eng-trigger:hover {
        background: rgba(77,142,255,.15);
        border-color: rgba(77,142,255,.38);
    }

/* ── Modal shell ── */
.rvm-modal {
    background: var(--rv-surf);
    border: 1px solid var(--rv-border);
    border-radius: 18px;
    width: 100%;
    max-width: 520px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05);
    animation: rvm-rise .26s cubic-bezier(.4,0,.2,1) both;
}

@keyframes rvm-rise {
    from {
        opacity: 0;
        transform: translateY(16px) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ── Header ── */
.rvm-header {
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    padding: 22px 22px 18px;
    border-bottom: 1px solid var(--rv-border);
}

.rvm-header-client {
    background: linear-gradient(135deg, rgba(0,198,162,.1) 0%, var(--rv-surf2) 100%);
}

.rvm-header-engineer {
    background: linear-gradient(135deg, rgba(77,142,255,.1) 0%, var(--rv-surf2) 100%);
}

.rvm-header-glow {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0,198,162,.2) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
}

.rvm-header-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.rvm-header-av {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 19px;
    color: #fff;
    flex-shrink: 0;
}

.rvm-av-client {
    background: linear-gradient(135deg, var(--rv-accent), var(--rv-blue));
    box-shadow: 0 0 20px rgba(0,198,162,.3);
}

.rvm-av-engineer {
    background: linear-gradient(135deg, var(--rv-blue), var(--rv-purple));
    box-shadow: 0 0 20px rgba(77,142,255,.3);
}

.rvm-role-chip {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 5px;
}

.rvm-chip-client {
    background: rgba(0,198,162,.15);
    color: var(--rv-accent);
    border: 1px solid rgba(0,198,162,.3);
}

.rvm-chip-engineer {
    background: rgba(77,142,255,.15);
    color: var(--rv-blue);
    border: 1px solid rgba(77,142,255,.3);
}

.rvm-modal-name {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.4px;
    margin-bottom: 3px;
}

.rvm-modal-sub {
    font-size: 13px;
  
    margin-bottom: 5px;
}

.rvm-modal-meta-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}

.rvm-close {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--rv-border);
    color: var(--rv-muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: var(--rv-tr);
    flex-shrink: 0;
}

    .rvm-close:hover {
        color: var(--rv-text);
        border-color: var(--rv-border-h);
    }

/* ── Body ── */
.rvm-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .rvm-body::-webkit-scrollbar {
        width: 3px;
    }

    .rvm-body::-webkit-scrollbar-thumb {
        background: var(--rv-border);
        border-radius: 3px;
    }

/* ── Stats row ── */
.rvm-stats-row {
    display: flex;
    align-items: center;
    background: var(--rv-surf2);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-r);
    padding: 14px 18px;
    gap: 0;
}

.rvm-stat {
    flex: 1;
    text-align: center;
}

.rvm-stat-sep {
    width: 1px;
    height: 32px;
    background: var(--rv-border);
    flex-shrink: 0;
}

.rvm-stat-val {
   
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.8px;
    line-height: 1;
}

.rvm-stat-lbl {
    font-size: 13px;
    margin-top: 4px;
    font-weight: 500;
}

/* ── Win rate bar ── */
.rvm-win-bar-wrap {
    margin-top: -4px;
}

.rvm-win-track {
    height: 5px;
    background: rgba(255,255,255,.06);
    border-radius: 5px;
    overflow: hidden;
}

.rvm-win-fill {
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--rv-accent), var(--rv-blue));
    box-shadow: 0 0 8px rgba(0,198,162,.4);
    transition: width .5s ease;
}

/* ── Section ── */
.rvm-section {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.rvm-section-lbl {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
   
    display: flex;
    align-items: center;
    gap: 8px;
}

    .rvm-section-lbl::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--rv-border);
    }

/* ── Info grid ── */
.rvm-info-grid {
    background: var(--rv-surf2);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-r);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.rvm-ig-row {
    display: flex;
    align-items: center;
    padding: 9px 14px;
    border-bottom: 1px solid var(--rv-border);
    gap: 12px;
}

    .rvm-ig-row:last-child {
        border-bottom: none;
    }

.rvm-ig-lbl {
    font-size: 13px;
    min-width: 110px;
    flex-shrink: 0;
}

.rvm-ig-val {
    font-size: 13px;
    font-weight: 500;
}

/* ── Skills ── */
.rvm-skills-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rvm-skill-tag {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--rv-border);
    border-radius: 20px;
  
}

/* ── Current project card ── */
.rvm-project-card {
    background: linear-gradient(135deg, rgba(0,198,162,.06), var(--rv-surf2));
    border: 1px solid rgba(0,198,162,.2);
    border-radius: var(--rv-r);
    overflow: hidden;
}

.rvm-project-card-inner {
    padding: 13px 15px;
}

.rvm-project-uid {
    font-size: 12px;
    color: var(--rv-accent);
    letter-spacing: .8px;
    margin-bottom: 4px;
    opacity: .8;
}

.rvm-project-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.2px;
}

/* ── Bid snapshot ── */
.rvm-bid-snapshot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--rv-border);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-r);
    overflow: hidden;
}

.rvm-bs-item {
    background: var(--rv-surf2);
    padding: 10px 13px;
}

.rvm-bs-lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.rvm-bs-val {
  
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.4px;
}

/* ── Note box ── */
.rvm-note-box {
    font-size: 15px;
    line-height: 1.65;
    background: var(--rv-surf2);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-rsm);
    padding: 11px 13px;
}

/* ── Footer ── */
.rvm-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 22px;
    border-top: 1px solid var(--rv-border);
    background: var(--rv-surf);
}

/* ── Progress RV Tab ── */
.prv-bar-card {
    background: var(--rv-surf2);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-r);
    padding: 14px 16px;
}

.prv-bar-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.prv-bar-title {
    font-size: 13px;
    font-weight: 700;
}

.prv-bar-sub {
    font-size: 13px;
   
    margin-top: 2px;
}

.prv-bar-pct {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--rv-accent);
    letter-spacing: -1px;
    flex-shrink: 0;
}

.prv-track {
    height: 6px;
    background: rgba(255,255,255,.06);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.prv-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--rv-accent), var(--rv-blue));
    transition: width .6s ease;
}

.prv-fill-glow {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(0,198,162,.5), rgba(59,130,246,.5));
    filter: blur(4px);
    transition: width .6s ease;
}

.prv-tick-row {
    position: relative;
    height: 10px;
    margin-top: 4px;
}

.prv-tick {
    position: absolute;
    transform: translateX(-50%);
    width: 2px;
    height: 6px;
    background: rgba(255,255,255,.15);
    border-radius: 2px;
    top: 2px;
    transition: background .2s;
}

.prv-tick-done {
    background: var(--rv-accent);
    box-shadow: 0 0 5px rgba(0,198,162,.5);
}

/* ── Milestone status grid ── */
.prv-ms-status-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.prv-ms-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--rv-surf2);
    border: 1px solid var(--rv-border);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    color: var(--rv-muted);
    transition: var(--rv-tr);
}

    .prv-ms-status-pill.prv-ms-done {
        border-color: rgba(0,198,162,.3);
        background: rgba(0,198,162,.07);
        color: var(--rv-accent);
    }

.prv-ms-status-num {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    display: grid;
    place-items: center;
    font-size: 9px;
    font-weight: 800;
    flex-shrink: 0;
    font-family: var(--font-display);
}

.prv-ms-done .prv-ms-status-num {
    background: rgba(0,198,162,.2);
    color: var(--rv-accent);
}

.prv-ms-status-txt {
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prv-ms-status-ic {
    font-size: 10px;
    flex-shrink: 0;
}

/* ── Update cards ── */
.prv-update-card {
    display: flex;
    background: var(--rv-surf);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-r);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}

    .prv-update-card:hover {
        border-color: color-mix(in srgb, var(--utc) 45%, transparent 55%);
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(0,0,0,.4), 0 0 0 1px color-mix(in srgb, var(--utc) 28%, transparent 72%);
    }

.prv-update-stripe {
    width: 4px;
    flex-shrink: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--utc) 75%, white 25%) 0%, var(--utc) 50%, color-mix(in srgb, var(--utc) 55%, black 45%) 100% );
    box-shadow: 2px 0 10px color-mix(in srgb, var(--utc) 35%, transparent 65%);
}

.prv-update-inner {
    flex: 1;
    padding: 13px 16px;
    min-width: 0;
    background: linear-gradient( 135deg, color-mix(in srgb, var(--utc) 5%, var(--rv-surf) 95%) 0%, var(--rv-surf) 65% );
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.prv-update-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.prv-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.prv-update-time {
    font-size: 13px;
   
}

.prv-badge-pill {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
}

.prv-badge-blue {
    background: rgba(59,130,246,.1);
    color: var(--rv-blue);
    border: 1px solid rgba(59,130,246,.25);
}

.prv-badge-green {
    background: rgba(0,198,162,.1);
    color: var(--rv-accent);
    border: 1px solid rgba(0,198,162,.25);
}

.prv-update-desc {
    font-size: 14px;
    line-height: 1.65;
    border-left: 2px solid var(--rv-border);
    padding-left: 10px;
}

.prv-mini-ring {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.prv-mini-ring-inner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rv-surf);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 800;
    color: var(--rv-accent);
}

/* ── Milestone pills in card ── */
.prv-ms-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.prv-ms-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    background: var(--rv-surf2);
    border: 1px solid var(--rv-border);
    border-radius: 7px;
    min-width: 140px;
    flex: 1;
}

.prv-ms-pill-bar {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,.06);
    border-radius: 4px;
    overflow: hidden;
}

.prv-ms-pill-lbl {
    font-size: 12px;
    font-weight: 500;
   
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
}

/* Update footer */
.prv-update-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid var(--rv-border);
}

.prv-eng-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.prv-eng-av {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rv-blue), var(--rv-purple));
    display: grid;
    place-items: center;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    font-family: var(--font-display);
}

.prv-eng-name {
    font-size: 12px;
    font-weight: 500;
}

.prv-view-cta {
    font-size: 11px;
    color: var(--rv-muted);
    transition: color .15s;
}

.prv-update-card:hover .prv-view-cta {
    color: var(--rv-accent);
}

/* ════════════════════════
   PROGRESS DETAIL MODAL
════════════════════════ */
.prv-modal {
    background: var(--rv-surf);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-r);
    width: 100%;
    max-width: 660px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
    animation: prv-rise .26s cubic-bezier(.4,0,.2,1) both;
}

@keyframes prv-rise {
    from {
        opacity: 0;
        transform: translateY(16px) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.prv-modal-header {
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    padding: 20px 22px 16px;
    background: linear-gradient( 135deg, color-mix(in srgb, var(--utc) 14%, var(--rv-surf2) 86%) 0%, var(--rv-surf2) 100% );
    border-bottom: 1px solid var(--rv-border);
}

.prv-modal-header-glow {
    position: absolute;
    right: -50px;
    top: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--utc) 18%, transparent 82%);
    filter: blur(40px);
    pointer-events: none;
}

.prv-modal-header-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.prv-modal-eng-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.prv-modal-av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rv-blue), var(--rv-purple));
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 13px;
    color: #fff;
    flex-shrink: 0;
}

.prv-modal-eng-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
}

.prv-modal-ring {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.prv-modal-ring-inner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--rv-surf);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 800;
    color: var(--rv-accent);
}

.prv-modal-bar-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.prv-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .prv-modal-body::-webkit-scrollbar {
        width: 3px;
    }

    .prv-modal-body::-webkit-scrollbar-thumb {
        background: var(--rv-border);
        border-radius: 3px;
    }

.prv-modal-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 22px;
    border-top: 1px solid var(--rv-border);
    background: var(--rv-surf);
}

/* Milestone cards inside modal */
.prv-modal-ms-card {
    background: var(--rv-surf2);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-rsm);
    padding: 12px 14px;
    transition: var(--rv-tr);
}

.prv-modal-ms-done {
    border-color: rgba(0,198,162,.3);
    background: rgba(0,198,162,.04);
}

.prv-modal-ms-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.prv-modal-ms-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
    font-family: var(--font-display);
}

/* Link cards */
.prv-link-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-rsm);
}

.prv-link-autodesk {
    border-color: rgba(0,198,162,.25);
    background: rgba(0,198,162,.04);
}

.prv-link-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(0,198,162,.08);
    border: 1px solid rgba(0,198,162,.2);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}




.lp-shell {
    min-height: 100vh;
    background: #080A10;
    color: #E8EAF0;
    font-family: 'DM Sans',sans-serif;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Canvas */
.lp-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.lp-mesh {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.lp-dots {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 10px;
    padding: 20px;
}

.lp-dots-tl {
    top: 0;
    left: 0;
}

.lp-dots-br {
    bottom: 0;
    right: 0;
}

.lp-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(0,198,162,.2);
}

.lp-dot-blue {
    background: rgba(77,142,255,.18);
}

/* Layout */
.lp-layout {
    position: relative;
    z-index: 1;
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: 1160px;
    margin: 0 auto;
    padding: 52px 48px;
    gap: 72px;
    width: 100%;
}

/* ── LEFT ── */
.lp-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lp-left-body {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* Logo */
.lp-logo {
    display: flex;
    align-items: center;
    margin-left: -130px;
}

.lp-logo-img {
    height: auto; /* Adjust as needed */
    width: auto;
    display: block;
}
/* Headline */
.lp-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(0,198,162,.75);
    margin-bottom: 14px;
}

.lp-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00C6A2;
    flex-shrink: 0;
    animation: lp-pulse 2s ease infinite;
}

.lp-dot-blue-pulse {
    background: #4D8EFF;
}

@keyframes lp-pulse {
    0%,100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .4;
        transform: scale(.7)
    }
}

.lp-h1 {
    
    font-size: clamp(32px,3.8vw,50px);
   
    line-height: 1.1;
    letter-spacing: -2px;
    color: #E8EAF0;
    margin-bottom: 18px;
}

.lp-h1-outline {
    display: block;
    color: white;
    -webkit-text-stroke: 1.5px rgba(255,255,255,.32);
}

.lp-h1-grad {
    display: block;
    background: linear-gradient(100deg,#00C6A2 20%,#4D8EFF 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lp-h1-grad-blue {
    display: block;
    background: linear-gradient(100deg,#4D8EFF 20%,#A78BFA 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lp-tagline {
    font-size: 14px;
    color: whitesmoke;
    line-height: 1.75;
    max-width: 380px;
}

/* Stats */
.lp-stats {
    display: flex;
    align-items: center;
    gap: 24px;
}

.lp-stat-sep {
    width: 1px;
    height: 34px;
    background: rgba(255,255,255,.1);
    flex-shrink: 0;
}

.lp-stat-num {
    font-family: 'Syne',sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #E8EAF0;
    letter-spacing: -1px;
    line-height: 1;
}

    .lp-stat-num span {
        font-size: 16px;
        color: #00C6A2;
    }

.lp-stat-lbl {
    font-size: 11px;
    color: rgba(255,255,255,.35);
    margin-top: 3px;
    font-weight: 500;
}

/* Testimonial */
.lp-testimonial {
    padding: 20px 22px;
    background: rgba(255,255,255,.026);
    border: 1px solid rgba(255,255,255,.065);
    border-left: 2px solid #00C6A2;
    border-radius: 12px;
    position: relative;
}

    .lp-testimonial::before {
        content: '"';
        position: absolute;
        top: -4px;
        left: 16px;
        font-family: 'Syne',sans-serif;
        font-size: 48px;
        font-weight: 800;
        color: rgba(0,198,162,.18);
        line-height: 1;
        pointer-events: none;
    }

.lp-tq {
    font-size: 13px;
    color: rgba(255,255,255,.5);
    line-height: 1.7;
    margin-bottom: 14px;
    padding-top: 8px;
}

.lp-ta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lp-ta-av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg,#00C6A2,#4D8EFF);
    display: grid;
    place-items: center;
    font-family: 'Syne',sans-serif;
    font-weight: 700;
    font-size: 10px;
    color: #fff;
    flex-shrink: 0;
}

.lp-ta-name {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.7);
}

.lp-ta-role {
    font-size: 11px;
    color: rgba(255,255,255,.3);
    margin-top: 1px;
}

/* Steps (register panel) */
.lp-steps {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.lp-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.lp-step-num {
    font-family: 'Syne',sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: #4D8EFF;
    background: rgba(77,142,255,.12);
    border: 1px solid rgba(77,142,255,.25);
    border-radius: 6px;
    padding: 4px 8px;
    flex-shrink: 0;
    letter-spacing: .5px;
}

.lp-step-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.75);
    margin-bottom: 2px;
}

.lp-step-sub {
    font-size: 12px;
    background: linear-gradient(100deg, #4D8EFF 20%, #A78BFA 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lp-trust-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lp-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(0,198,162,.7);
    font-weight: 500;
}

    .lp-trust-item svg {
        flex-shrink: 0;
    }

/* ── CARD WRAP & TRANSITIONS ── */
.lp-right {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.lp-card-wrap {
    width: 100%;
    max-width: 500px;
    position: relative;
    min-height: 500px;
}

.lp-card {
    width: 100%;
    max-width: 500px;
    background: rgba(17,19,24,.85);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 20px;
    padding: 32px;
    position: absolute;
    top: 0;
    left: 0;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transition: opacity 0.32s cubic-bezier(.4,0,.2,1), transform 0.32s cubic-bezier(.4,0,.2,1);
    will-change: opacity, transform;
}

.lp-card-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: all;
    position: relative;
}
/* Hidden: exiting to LEFT (login → behind) */
.lp-card-hidden.lp-card-exit-left {
    opacity: 0;
    transform: translateX(-28px) scale(0.97);
    pointer-events: none;
    position: absolute;
}

/* Hidden: exiting to RIGHT (register → behind) */
.lp-card-hidden.lp-card-exit-right {
    opacity: 0;
    transform: translateX(28px) scale(0.97);
    pointer-events: none;
    position: absolute;
}

/* Left panel animation */
.lp-anim-enter {
    animation: lp-panel-in .36s cubic-bezier(.4,0,.2,1) both;
}

@keyframes lp-panel-in {
    from {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

/* Top glow bar */
.lp-card-topglow {
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,transparent,#00C6A2,#4D8EFF,transparent);
    border-radius: 1px;
}

.lp-card-topglow-blue {
    background: linear-gradient(90deg,transparent,#4D8EFF,#A78BFA,transparent);
}

/* Card header */
.lp-card-header {
    margin-bottom: 20px;
}

.lp-card-title {
    font-family: 'Syne',sans-serif;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: .5px;
    margin-bottom: 10px;
    text-align:center;
}

.lp-card-sub {
    font-size: 14px;
    color: whitesmoke;
    text-align:center;
}
.regspan {
    font-size: 14px;
    color: whitesmoke;
}
/* Role pills */
.lp-role-wrap {
    margin-bottom: 22px;
}

.lp-role-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
    color: whitesmoke;
    text-transform: uppercase;
    margin-bottom: 7px;
}

.lp-role-pills {
    display: flex;
    gap: 5px;
    padding: 3px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 9px;
}

.lp-role {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 6px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: none;
    font-family: 'DM Sans',sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: whitesmoke;
    cursor: pointer;
    transition: all .18s ease;
}

    .lp-role:hover {
        color: rgba(255,255,255,.6);
        background: rgba(255,255,255,.05);
    }

.lp-role-active {
    background: var(--bx-accent-dim) !important;
    border-color: var(--bx-accent-glow) !important;
    color: var(--bx-accent) !important;
    box-shadow: 0 0 12px var(--bx-accent-glow);
}
/* Form */
.lp-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lp-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.lp-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.lp-flabel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom:3px;
}

.lp-flabel {
    font-size: 15px;
    font-weight: 600;
    color: whitesmoke;
    letter-spacing: .2px;
}

.lp-forgot {
    font-size: 13px;
    color: var(--bx-accent);
    text-decoration: none;
    transition: color .15s;
}

    .lp-forgot:hover {
        color: var(--bx-accent-hover);
        
    }

.lp-link {
    color: var(--bx-accent);
    text-decoration: none;
    font-weight: 600;
}

    .lp-link:hover {
        color: var(--bx-accent);
    }

.lp-finput-wrap {
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.076);
    border-radius: 9px;
    padding: 0 13px;
    transition: border-color .18s,box-shadow .18s,background .18s;
    margin-bottom:5px;
}

.lp-field-focused .lp-finput-wrap {
    background: var(--bx-accent-dim) !important;
    border-color: var(--bx-accent-glow) !important;
    color: var(--bx-accent) !important;
    box-shadow: 0 0 12px var(--bx-accent-glow);
}

.lp-field-error .lp-finput-wrap {
    border-color: rgba(255,91,91,.5);
    box-shadow: 0 0 0 3px rgba(255,91,91,.07);
}

.lp-ficon {
    color: var(--bx-accent);
    flex-shrink: 0;
    transition: color .18s;
}

.lp-field-focused .lp-ficon {
    color: var(--bx-accent);
}

.lp-finput {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-family: 'DM Sans',sans-serif;
    font-size: 13px;
    color: #E8EAF0;
    padding: 12px 0;
}

    .lp-finput::placeholder {
        color: rgba(255,255,255,.18);
    }

.lp-fselect {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-family: 'DM Sans',sans-serif;
    font-size: 13px;
    color: #E8EAF0;
    padding: 12px 0;
    cursor: pointer;
}

    .lp-fselect option {
        background: #111318;
    }

.lp-eye {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,.22);
    padding: 3px;
    border-radius: 4px;
    transition: color .15s;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

    .lp-eye:hover {
        color: rgba(255,255,255,.55);
    }

.lp-ferr {
    font-size: 11px;
    color: #FF5B5B;
}

/* Password strength */
.lp-strength-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

.lp-strength-bar {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,.08);
    border-radius: 3px;
    overflow: hidden;
}

.lp-strength-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .3s ease,background .3s ease;
}

.lp-str-weak .lp-strength-fill, .lp-str-weak {
    background: #FF5B5B;
    color: #FF5B5B;
}

.lp-str-fair .lp-strength-fill, .lp-str-fair {
    background: #F5A623;
    color: #F5A623;
}

.lp-str-good .lp-strength-fill, .lp-str-good {
    background: #4D8EFF;
    color: #4D8EFF;
}

.lp-str-strong.lp-strength-fill, .lp-str-strong {
    background: #00C6A2;
    color: #00C6A2;
}

.lp-strength-lbl {
    font-size: 10px;
    font-weight: 700;
    min-width: 36px;
    text-align: right;
    letter-spacing: .3px;
}

.lp-str-lbl-weak {
    color: #FF5B5B !important;
}

.lp-str-lbl-fair {
    color: #F5A623 !important;
}

.lp-str-lbl-good {
    color: #4D8EFF !important;
}

.lp-str-lbl-strong {
    color: #00C6A2 !important;
}

/* Remember / Terms */
.lp-remember {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
    user-select: none;
}

.lp-terms {
    align-items: flex-start;
}

.lp-cb {
    appearance: none; /* Removes native browser styling */
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid rgba(255,255,255,.14);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: all .15s;
    margin-top: 3px;
    accent-color: transparent !important;
}

.lp-cb:checked {
    accent-color: #00C6A2 !important;
    background: #00C6A2 !important;
    border-color: #00C6A2 !important;
    box-shadow: 0 0 8px rgba(0,198,162,.3);
}


/* 3. Build custom checkmark icon */
    .lp-cb::before {
        content: "";
        width: 10px;
        height: 6px;
        border-left: 2px solid white;
        border-bottom: 2px solid white;
        transform: rotate(-45deg) translate(1px, -1px);
        /* Hide checkmark icon by default */
        transform-origin: center;
        display: none;
    }

/* Show checkmark icon when checked */
    .lp-cb:checked::before {
        display: block;
    }

    .lp-cb:disabled {
        opacity:.8;
    }
.lp-cb-err {
    border-color: rgba(255,91,91,.6) !important;
}

.lp-remember-txt {
    font-size: 15px;
    color: whitesmoke;
    line-height: 1.5;
}

/* Error banner */
.lp-auth-err {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    background: rgba(255,91,91,.07);
    border: 1px solid rgba(255,91,91,.2);
    border-radius: 8px;
    font-size: 12px;
    color: #FF5B5B;
}
.lp-auth-success {
    background: var(--bx-accent-dim) !important;
    border-color: var(--bx-accent-glow) !important;
    color: var(--bx-accent) !important;
    box-shadow: 0 0 12px var(--bx-accent-glow);
}

/* CTA */
.lp-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 18px;
    background:var(--bx-accent);
    border: none;
    border-radius: 10px;
    font-family: 'DM Sans',sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    cursor: pointer;
    transition: all .18s ease;
    position: relative;
    overflow: hidden;
    margin-top: 2px;
}

    .lp-cta::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 60%);
        opacity: 0;
        transition: opacity .2s;
    }

    .lp-cta:hover:not(:disabled) {
        background: var(--bx-accent-hover);
        transform: translateY(-1px);
        box-shadow: 0 8px 28px rgba(0,198,162,.38);
    }

        .lp-cta:hover:not(:disabled)::after {
            opacity: 1;
        }

    .lp-cta:disabled {
        opacity: .6;
        cursor: not-allowed;
    }

.lp-cta-register {
    background: var(--bx-accent);
}

    .lp-cta-register:hover:not(:disabled) {
        background: var(--bx-accent-hover);
        transform: translateY(-1px);
        box-shadow: 0 8px 28px rgba(0,198,162,.38);
    }

.lp-cta-arrow {
    display: flex;
    align-items: center;
    transition: transform .18s;
}

.lp-cta:hover .lp-cta-arrow {
    transform: translateX(3px);
}

.lp-cta-spinner {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,.2);
    border-top-color: #000;
    animation: lp-spin .65s linear infinite;
    flex-shrink: 0;
}

.lp-spinner-dark {
    border-color: rgba(255,255,255,.2) !important;
    border-top-color: #fff !important;
}

@keyframes lp-spin {
    to {
        transform: rotate(360deg)
    }
}

/* Divider */
.lp-div {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: rgba(255,255,255,.2);
    margin: 18px 0;
}

    .lp-div::before, .lp-div::after {
        content: '';
        flex: 1;
        height: 1px;
        background: rgba(255,255,255,.06);
    }

/* SSO */
.lp-sso {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.lp-sso-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.076);
    border-radius: 9px;
    font-family: 'DM Sans',sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,.5);
    cursor: pointer;
    transition: all .18s;
}

    .lp-sso-btn:hover {
        background: rgba(255,255,255,.07);
        border-color: rgba(255,255,255,.13);
        color: rgba(255,255,255,.78);
        transform: translateY(-1px);
    }

/* Switch row */
.lp-switch-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,.3);
    margin-top: 16px;
}

.lp-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    font-family: 'DM Sans',sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--bx-accent);
    cursor: pointer;
    transition: color .15s;
    padding: 0;
}

    .lp-switch-btn:hover {
        color: var(--bx-accent-hover);
    }

/* Footer */
.lp-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 48px;
    border-top: 1px solid rgba(255,255,255,.05);
    font-size: 12px;
    color: whitesmoke;
}

.lp-footer-links {
    display: flex;
    gap: 2px;
}

    .lp-footer-links a {
        color: rgba(255,255,255,.2);
        text-decoration: none;
        transition: color .15s;
    }

        .lp-footer-links a:hover {
            color: rgba(255,255,255,.5);
        }

/* Responsive */
@media(max-width:860px) {
    .lp-layout {
        grid-template-columns: 1fr;
        padding: 36px 24px;
        gap: 32px;
    }

    .lp-left {
        gap: 24px;
    }

    .lp-card {
        position: relative !important;
    }

    .lp-card-wrap {
        min-height: auto;
    }

    .lp-footer {
        padding: 14px 24px;
    }
}

@media (max-width: 1100px) {

    .lp-layout {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
        padding-left: 30px;
        padding-right: 30px;
        gap: 40px;
    }

    .lp-h1 {
        font-size: clamp(32px, 4vw, 44px);
        letter-spacing: -1.5px;
    }

    .lp-tagline {
        max-width: 420px;
    }

    .lp-card {
        padding: 28px 26px 24px;
    }

    .lp-logo-img {
        width: 280px;
        
    }
    .lp-logo{
        margin-left:-50px;
    }
}
@media (max-width: 860px) {

    .lp-shell {
        min-height: 100dvh;
    }

    .lp-layout {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 720px;
        padding: 32px 24px 40px;
        gap: 36px;
        align-items: stretch;
    }

    /* -------------------------
       LEFT / BRANDING
       ------------------------- */

    .lp-left {
        width: 100%;
        gap: 22px;
    }

    .lp-logo {
        justify-content: center;
    }

    .lp-logo-img {
        width: 280px;
    }

    .lp-logo {
        margin-left: 0px;
    }
    .lp-left-body {
        gap: 24px;
    }

    .lp-headline {
        text-align: center;
    }

    .lp-eyebrow {
        justify-content: center;
    }

    .lp-h1 {
        font-size: clamp(32px, 7vw, 44px);
        line-height: 1.08;
        letter-spacing: -1.5px;
    }

    .lp-tagline {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        font-size: 14px;
    }

    /* -------------------------
       LOGIN STATS
       ------------------------- */

    .lp-stats {
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
    }

    /* -------------------------
       REGISTER STEPS
       ------------------------- */

    .lp-steps {
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
    }

    .lp-trust-row {
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
    }

    /* -------------------------
       CARD
       ------------------------- */

    .lp-right {
        width: 100%;
        align-items: stretch;
    }

    .lp-card-wrap {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        min-height: auto;
    }

    /*
       IMPORTANT:
       On mobile the cards should participate in normal
       document flow instead of relying on absolute positioning.
    */

    .lp-card {
        position: absolute;
        width: 100%;
        margin-top: 0;
        padding: 28px 26px 24px;
    }

    .lp-card-visible {
        position: relative;
    }

    .lp-card-hidden {
        position: absolute !important;
    }

    /* Footer */

    .lp-footer {
        padding: 14px 24px;
    }
}
@media (max-width: 600px) {

    .lp-layout {
        padding: 24px 16px 32px;
        gap: 28px;
    }

    /* Background */

    .lp-mesh {
        opacity: .7;
    }

    .lp-dots {
        transform: scale(.75);
        transform-origin: top left;
    }

    .lp-dots-br {
        transform-origin: bottom right;
    }

    /* Logo */

    .lp-logo {
        justify-content: center;
    }

    .lp-logo-img {
        width: 200px;
    }

    /* Branding */

    .lp-left-body {
        gap: 20px;
    }

    .lp-eyebrow {
        font-size: 9px;
        letter-spacing: 1.4px;
    }

    .lp-h1 {
        font-size: clamp(29px, 9vw, 38px);
        line-height: 1.08;
        letter-spacing: -1.2px;
        margin-bottom: 14px;
    }

    .lp-tagline {
        font-size: 13px;
        line-height: 1.65;
    }

    /* Stats */

    .lp-stats {
        width: 100%;
        gap: 12px;
        justify-content: space-between;
    }

    .lp-stat {
        flex: 1;
        min-width: 0;
        text-align: center;
    }

    .lp-stat-num {
        font-size: 22px;
    }

    .lp-stat-lbl {
        font-size: 9px;
        white-space: normal;
    }

    .lp-stat-sep {
        height: 28px;
    }

    /* Register steps */

    .lp-steps {
        gap: 14px;
    }

    .lp-step {
        gap: 11px;
    }

    .lp-step-title {
        font-size: 12px;
    }

    .lp-step-sub {
        font-size: 11px;
        line-height: 1.4;
    }

    .lp-trust-item {
        font-size: 11px;
    }

    /* Card */

    .lp-card {
        border-radius: 16px;
        padding: 24px 18px 20px;
    }

    .lp-card-header {
        margin-bottom: 18px;
    }

    .lp-card-title {
        font-size: 19px;
    }

    .lp-card-sub {
        font-size: 13px;
    }

    /* Fields */

    .lp-fields {
        gap: 12px;
    }

    .lp-field-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

        /*
       Your validation row is currently hardcoded
       to two columns inline. Override it on mobile.
    */

        .lp-field-row + div[style*="grid-template-columns"] {
            grid-template-columns: 1fr !important;
        }

    .lp-flabel {
        font-size: 13px;
    }

    .lp-finput-wrap {
        padding-left: 11px;
        padding-right: 11px;
    }

    .lp-finput {
        font-size: 14px;
        padding: 11px 0;
    }

    .lp-remember-txt {
        font-size: 13px;
    }

    .lp-auth-err {
        font-size: 11px;
        padding: 9px 10px;
    }

    .lp-cta {
        padding: 13px 16px;
        min-height: 46px;
    }

    .lp-switch-row {
        flex-wrap: wrap;
        text-align: center;
    }

    .lp-switch-btn {
        font-size: 13px;
    }

    /* Role selector */

    .lp-role {
        padding: 9px 5px;
        font-size: 11px;
    }

    /* Footer */

    .lp-footer {
        padding: 13px 16px;
        justify-content: center;
        text-align: center;
    }

    .lp-footer-links {
        display: none;
    }
}
@media (max-width: 480px) {
    .lp-trust-row{
        display:none;
    }
}

    @media (max-width: 400px) {

        .lp-layout {
            padding: 18px 12px 26px;
            gap: 22px;
        }

        .lp-logo-img {
            width: 180px;
        }


        .lp-h1 {
            font-size: 28px;
            letter-spacing: -1px;
        }

        .lp-tagline {
            font-size: 12px;
        }

        .lp-card {
            padding: 20px 14px 18px;
            border-radius: 14px;
        }

        .lp-card-title {
            font-size: 18px;
        }

        .lp-card-sub {
            font-size: 12px;
        }

        .lp-role-pills {
            gap: 3px;
        }

        .lp-role {
            font-size: 10px;
            padding: 8px 3px;
        }

        .lp-flabel {
            font-size: 12px;
        }

        .lp-finput {
            font-size: 13px;
        }

        .lp-forgot {
            font-size: 11px;
        }

        .lp-cta {
            font-size: 13px;
        }

        .lp-stat-num {
            font-size: 19px;
        }

        .lp-stat-lbl {
            font-size: 8px;
        }

        .lp-footer {
            font-size: 10px;
        }
    }

    .lp-validation-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    @media (max-width: 600px) {
        .lp-validation-row {
            grid-template-columns: 1fr;
        }
    }
    /* =========================================================
   BIMEX TERMS MODAL
   ========================================================= */

    .bimex-terms-overlay {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 32px;
        background: radial-gradient( circle at 50% 40%, rgba(55, 145, 205, 0.08), transparent 45% ), rgba(3, 7, 12, 0.82);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        animation: bimexOverlayIn 0.2s ease-out;
    }


    /* =========================================================
   MODAL
   ========================================================= */

    .bimex-terms-modal {
        position: relative;
        width: min(900px, 100%);
        max-height: min(850px, 92vh);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: radial-gradient( circle at 85% 0%, rgba(67, 150, 210, 0.07), transparent 35% ), radial-gradient( circle at 0% 100%, rgba(108, 88, 220, 0.05), transparent 30% ), #0d1117;
        border: 1px solid rgba(83, 151, 194, 0.28);
        border-radius: 18px;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.02), 0 0 50px rgba(50, 150, 210, 0.06);
        color: #e8edf2;
        animation: bimexModalIn 0.25s cubic-bezier(.2, .8, .2, 1);
    }


        /* Subtle top blue glow */

        .bimex-terms-modal::before {
            content: "";
            position: absolute;
            top: -1px;
            left: 8%;
            right: 8%;
            height: 1px;
            background: linear-gradient( 90deg, transparent, rgba(78, 168, 216, 0.8), transparent );
            pointer-events: none;
        }


    /* =========================================================
   HEADER
   ========================================================= */

    .bimex-terms-header {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24px 28px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        background: linear-gradient( 180deg, rgba(255, 255, 255, 0.018), transparent );
    }


    .bimex-terms-header-left {
        display: flex;
        align-items: center;
        gap: 16px;
    }


    /* =========================================================
   BIMEX-STYLE ICON
   ========================================================= */

    .bimex-terms-icon {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: 1px solid rgba(76, 169, 218, 0.4);
        border-radius: 10px;
        background: rgba(50, 147, 199, 0.08);
        box-shadow: inset 0 0 20px rgba(52, 154, 210, 0.05), 0 0 18px rgba(52, 154, 210, 0.08);
    }


        .bimex-terms-icon span {
            display: block;
            width: 5px;
            height: 17px;
            border: 1px solid #4da7d7;
            border-radius: 1px;
            background: rgba(77, 167, 215, 0.08);
        }


            .bimex-terms-icon span:nth-child(2) {
                height: 23px;
                border-color: #63b9e6;
            }


    /* =========================================================
   HEADER TEXT
   ========================================================= */

    .bimex-terms-eyebrow {
        margin-bottom: 4px;
        color: #35a9bd;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.8px;
        text-transform: uppercase;
    }


    .bimex-terms-header h2 {
        margin: 0;
        color: #f1f5f8;
        font-size: 24px;
        font-weight: 700;
        letter-spacing: -0.5px;
    }




    /* =========================================================
   CLOSE BUTTON
   ========================================================= */

    .bimex-terms-close {
        position: relative;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.025);
        cursor: pointer;
        transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }


        .bimex-terms-close:hover {
            background: rgba(77, 167, 215, 0.09);
            border-color: rgba(77, 167, 215, 0.35);
            transform: rotate(3deg);
        }


        .bimex-terms-close span {
            position: absolute;
            width: 15px;
            height: 1px;
            background: #9aa6b2;
        }


            .bimex-terms-close span:first-child {
                transform: rotate(45deg);
            }


            .bimex-terms-close span:last-child {
                transform: rotate(-45deg);
            }


    /* =========================================================
   BODY
   ========================================================= */

    .bimex-terms-body {
        flex: 1;
        overflow-y: auto;
        padding: 26px 30px 32px;
        scrollbar-width: thin;
        scrollbar-color: rgba(77, 167, 215, 0.4) transparent;
    }


        .bimex-terms-body::-webkit-scrollbar {
            width: 6px;
        }


        .bimex-terms-body::-webkit-scrollbar-track {
            background: transparent;
        }


        .bimex-terms-body::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: rgba(77, 167, 215, 0.35);
        }


            .bimex-terms-body::-webkit-scrollbar-thumb:hover {
                background: rgba(77, 167, 215, 0.55);
            }


    /* =========================================================
   INTRO
   ========================================================= */

    .bimex-terms-intro {
        position: relative;
        margin-bottom: 32px;
        padding: 18px 20px 18px 24px;
        border: 1px solid rgba(77, 167, 215, 0.12);
        border-radius: 10px;
        background: linear-gradient( 100deg, rgba(53, 153, 202, 0.06), rgba(100, 80, 200, 0.025) );
    }


    .bimex-terms-intro-line {
        position: absolute;
        left: 0;
        top: 14px;
        bottom: 14px;
        width: 2px;
        border-radius: 4px;
        background: linear-gradient( 180deg, #39b5c7, #4d8ed7, #7665dc );
    }


    .bimex-terms-intro p {
        margin: 0;
        color: #aeb8c1;
        font-size: 13px;
        line-height: 1.7;
    }


    .bimex-terms-intro strong {
        color: #e6edf2;
    }


    /* =========================================================
   TERM SECTION
   ========================================================= */

    .bimex-term-section {
        display: grid;
        grid-template-columns: 58px 1fr;
        gap: 18px;
        margin-bottom: 34px;
    }


    .bimex-term-number {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(77, 167, 215, 0.28);
        border-radius: 9px;
        background: linear-gradient( 135deg, rgba(77, 167, 215, 0.11), rgba(111, 86, 208, 0.06) );
        color: #4da7d7;
        font-family: "Inter", sans-serif;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.5px;
        box-shadow: inset 0 0 15px rgba(77, 167, 215, 0.04);
    }


    .bimex-term-content {
        min-width: 0;
    }


        .bimex-term-content h3 {
            margin: 0 0 18px;
            color: #4da7d7;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: -0.15px;
        }


    /* =========================================================
   INDIVIDUAL TERM
   ========================================================= */

    .bimex-term-item {
        position: relative;
        margin-bottom: 17px;
        padding-left: 16px;
    }


        .bimex-term-item::before {
            content: "";
            position: absolute;
            left: 0;
            top: 7px;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #4da7d7;
            box-shadow: 0 0 8px rgba(77, 167, 215, 0.45);
        }


        .bimex-term-item h4 {
            margin: 0 0 5px;
            color: #9ec7dd;
            font-size: 16px;
            font-weight: 700;
        }


        .bimex-term-item p {
            margin: 0;
            color: whitesmoke;
            font-size: 14px;
            line-height: 1.75;
        }

    .terms-intro {
        margin: 0;
        color: whitesmoke;
        font-size: 14px;
        line-height: 1.5;
    }
    /* =========================================================
   WARNING / IMPORTANT CLAUSES
   ========================================================= */
    .bimex-term-warning {
        margin-top: 8px;
        padding: 13px 15px 13px 17px;
        border: 1px solid rgba(214, 151, 74, 0.12);
        border-radius: 8px;
        background: rgba(180, 120, 40, 0.035);
    }


        .bimex-term-warning::before {
            left: 7px;
            background: #d49a4d;
            box-shadow: 0 0 8px rgba(212, 154, 77, 0.4);
        }


        .bimex-term-warning h4 {
            color: #d6b27e;
        }

        .bimex-term-warning p {
            color: #e37474;
        }


    /* =========================================================
   FOOTER
   ========================================================= */

    .bimex-terms-footer {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 16px 28px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        background: rgba(7, 11, 16, 0.7);
    }


    .bimex-terms-footer-status {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #687580;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.4px;
    }

        .bimex-terms-footer-status span {
            color: whitesmoke;
        }


    .bimex-status-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #18bfa4;
        box-shadow: 0 0 8px rgba(24, 191, 164, 0.65);
    }


    /* =========================================================
   DONE BUTTON
   ========================================================= */

    .bimex-terms-done {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 17px;
        border: 1px solid rgba(77, 167, 215, 0.35);
        border-radius: 8px;
        background: linear-gradient( 135deg, #4ca6d4, #438fc6 );
        color: #071017;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 4px 18px rgba(57, 145, 199, 0.16);
        transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    }


        .bimex-terms-done:hover {
            transform: translateY(-1px);
            filter: brightness(1.08);
            box-shadow: 0 7px 24px rgba(57, 145, 199, 0.25);
        }


    .bimex-arrow {
        font-size: 16px;
        line-height: 1;
    }


    /* =========================================================
   ANIMATIONS
   ========================================================= */

    @keyframes bimexOverlayIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }


    @keyframes bimexModalIn {
        from {
            opacity: 0;
            transform: translateY(12px) scale(0.985);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }


    /* =========================================================
   RESPONSIVE
   ========================================================= */

    @media (max-width: 700px) {

        .bimex-terms-overlay {
            padding: 12px;
        }

        .bimex-terms-modal {
            max-height: 94vh;
            border-radius: 14px;
        }

        .bimex-terms-header {
            padding: 18px;
        }

            .bimex-terms-header h2 {
                font-size: 20px;
            }

        .bimex-terms-icon {
            width: 38px;
            height: 38px;
        }

        .bimex-terms-body {
            padding: 20px 18px 25px;
        }

        .bimex-term-section {
            grid-template-columns: 42px 1fr;
            gap: 12px;
        }

        .bimex-term-number {
            width: 36px;
            height: 36px;
        }

        .bimex-terms-footer {
            padding: 13px 18px;
        }

        .bimex-terms-footer-status {
            display: none;
        }

        .bimex-terms-done {
            width: 100%;
            justify-content: center;
        }
    }





    /* ════════════════════════
   BIDDING TAB
════════════════════════ */
    /* locked / empty state */
    .bid-locked {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 44px 24px;
        text-align: center;
    }

    .bid-locked-icon {
        font-size: 32px;
        opacity: .3;
    }

    .bid-locked-title {
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 700;
    }

    .bid-locked-sub {
        font-size: 12px;
        line-height: 1.65;
        max-width: 300px;
    }

    /* summary bar */
    .bid-summary {
        display: flex;
        align-items: center;
        background: var(--rv-surf2);
        border: 1px solid var(--rv-border);
        border-radius: var(--rv-r);
        padding: 13px 18px;
        gap: 0;
        margin-bottom: 14px;
    }

    .bid-sum-item {
        flex: 1;
        text-align: center;
    }

    .bid-sum-div {
        width: 1px;
        height: 32px;
        background: var(--rv-border);
        flex-shrink: 0;
    }

    .bid-sum-val {
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -.8px;
        line-height: 1;
    }

    .bid-sum-lbl {
        font-size: 13px;
        margin-top: 3px;
        font-weight: 500;
    }

    .bid-card.is-collapsed .bid-cover-note,
    .bid-card.is-collapsed .bid-approach,
    .bid-card.is-collapsed .bid-ms-row {
        display: none;
    }
    /* toolbar */
    .bid-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        gap: 10px;
    }

    .bid-filter-tabs {
        display: flex;
        background: var(--rv-surf2);
        border: 1px solid var(--rv-border);
        border-radius: var(--rv-rsm);
        padding: 3px;
        gap: 2px;
    }

    .bid-ftab {
        padding: 5px 13px;
        border: none;
        background: none;
        font-family: var(--font-body);
        font-size: 11px;
        font-weight: 500;
        color: var(--rv-muted);
        cursor: pointer;
        border-radius: 4px;
        transition: var(--rv-tr);
    }

        .bid-ftab:hover {
            color: var(--rv-text);
        }

        .bid-ftab.active {
            background: var(--rv-surf3);
            color: var(--rv-text);
        }
    /* bid card */
    .bid-card {
        display: flex;
        background: var(--rv-surf);
        border: 1px solid var(--rv-border);
        border-radius: var(--rv-r);
        overflow: hidden;
        transition: var(--rv-tr);
    }

        .bid-card:hover {
            border-color: color-mix(in srgb,var(--bcc) 45%,transparent 55%);
            box-shadow: 0 4px 20px rgba(0,0,0,.35);
        }

    .bid-card-shortlisted {
        border-color: rgba(0,198,162,.35) !important;
        background: rgba(0,198,162,.02) !important;
    }

    .bid-card-stripe {
        width: 4px;
        flex-shrink: 0;
        background: linear-gradient(180deg,color-mix(in srgb,var(--bcc) 75%,white 25%) 0%,var(--bcc) 50%,color-mix(in srgb,var(--bcc) 55%,black 45%) 100%);
        box-shadow: 2px 0 10px color-mix(in srgb,var(--bcc) 35%,transparent 65%);
    }

    .bid-card-container {
        flex: 1;
        min-width: 0;
        background: linear-gradient(135deg,color-mix(in srgb,var(--bcc) 5%,var(--rv-surf) 95%) 0%,var(--rv-surf) 65%);
    }

    .bid-card-inner {
        padding: 14px 18px;
    }
    /* bid card header */
    .bid-card-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 10px;
    }

    .bid-anon-av {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: linear-gradient(135deg,var(--bcc,#4A5168),color-mix(in srgb,var(--bcc,#4A5168) 60%,#000 40%));
        display: grid;
        place-items: center;
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 12px;
        color: #fff;
        flex-shrink: 0;
        opacity: .8;
    }

    .bid-card-shortlisted .bid-anon-av {
        opacity: 1;
        box-shadow: 0 0 10px rgba(0,198,162,.35);
    }

    .bid-eng-name {
        font-size: 13px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .bid-eng-disc {
        font-size: 13px;
        margin-top: 2px;
    }

    .bid-shortlist-tag {
        font-size: 11px;
        font-weight: 800;
        background: rgba(0,198,162,.15);
        color: var(--rv-accent);
        border: 1px solid rgba(0,198,162,.3);
        padding: 2px 6px;
        border-radius: 4px;
        letter-spacing: .3px;
    }

    .bid-price {
        font-size: 18px;
        font-weight: 800;
        color: var(--rv-accent);
        letter-spacing: -.5px;
    }

    .bid-vs-budget {
        font-size: 12px;
        font-weight: 700;
    }
    /* metrics row */
    .bid-metrics {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 10px;
    }

    .bid-metric-item {
        display: flex;
        align-items: center;
        gap: 4px;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--rv-border);
        border-radius: 6px;
        padding: 4px 9px;
    }

    .bid-metric-wide {
        flex: 1;
    }

    .bid-metric-ic {
        font-size: 13px;
    }

    .bid-metric-val {
        font-size: 11px;
        font-weight: 600;
    }

    .bid-metric-lbl {
        font-size: 13px;
        margin-left: 2px;
        color: var(--rv-accent);
    }
    /* cover note */
    .bid-cover-note {
        font-size: 15px;
        line-height: 1.85;
        border-left: 2px solid var(--rv-border);
        padding-left: 10px;
        margin-bottom: 12px;
        margin-top: 12px;
    }
    /* expanded sections */
    .bid-section-lbl {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .9px;
        text-transform: uppercase;
        margin-bottom: 7px;
        margin-top: 4px;
    }

    .milestone-desc {
        font-size: 12px;
    }

    .bid-approach {
        font-size: 13px;
        color: var(--rv-text);
        line-height: 1.7;
        background: var(--rv-surf2);
        border: 1px solid var(--rv-border);
        border-radius: 7px;
        padding: 11px 13px;
        margin-bottom: 10px;
    }

    .bid-ms-row {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 8px 12px;
        background: var(--rv-surf2);
        border: 1px solid var(--rv-border);
        border-radius: 6px;
        margin-bottom: 5px;
    }

    .bid-ms-num {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: rgba(59,130,246,.14);
        border: 1px solid rgba(59,130,246,.3);
        color: var(--rv-blue);
        font-size: 9px;
        font-weight: 800;
        display: grid;
        place-items: center;
        flex-shrink: 0;
        font-family: var(--font-display);
    }
    /* action row */
    .bid-action-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 8px;
        padding: 14px 18px;
        border-top: 1px solid var(--rv-border);
    }

    .bid-expand-btn {
        font-family: var(--font-body);
        font-size: 15px;
        cursor: pointer;
        transition: color .15s;
        padding: 0;
    }

        .bid-expand-btn:hover {
            color: var(--rv-text);
        }
    /* awarded banner */
    .bid-awarded-banner {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 18px;
        background: linear-gradient(135deg,rgba(0,198,162,.1),rgba(0,198,162,.04));
        border: 1px solid rgba(0,198,162,.3);
        border-radius: var(--rv-r);
        margin-top: 10px;
    }
    /* ROOT CENTERED LAYOUT */
    .lg-root.single {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        /* Background image */
        background: linear-gradient(rgba(8,11,17,0.75), rgba(8,11,17,0.85)), /* dark overlay */
        url("/images/login-bg.jpg"); /* <-- CHANGE THIS */

        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    /* Background layer */
    .lg-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
    }
    /* Center content */
    .lg-center {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 460px;
        padding: 25px 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    /* Center content */
    /*.lg-center {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 460px;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

.lg-card {
    background: rgba(15, 18, 25, 0.45);*/ /* slightly more transparent */
    /*backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}


.lg-root.single::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(0,198,162,0.15), transparent 40%), radial-gradient(circle at 80% 80%, rgba(77,142,255,0.12), transparent 50%);
    z-index: 1;
}*/
    /* Centered brand */
    .lg-brand.center {
        justify-content: center;
        margin-bottom: 18px;
    }
    /* Center hero */
    .lg-hero.center {
        margin-bottom: 15px;
    }

        .lg-hero.center .lg-hero-sub {
            max-width: 100%;
        }
    /* Card spacing */
    .lg-card {
        width: 100%;
        margin-bottom: 24px;
        /* Glass effect */
        background: rgba(15, 18, 25, 0.55);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        /* Border + glow */
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        /* Depth */
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
        padding: 28px;
        position: relative;
        overflow: hidden;
    }

        .lg-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient( 120deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 30%, transparent 60% );
            opacity: 0.6;
            pointer-events: none;
        }
    /* Pills bottom */
    .lg-pills.center {
        justify-content: center;
        margin-top: 10px;
    }
    /* Remove old split layout */
    .lg-root:not(.single) {
        display: none;
    }
    /* ── Root layout ── */
    .lg-root {
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-height: 100vh;
        background: var(--bx-bg);
        font-family: var(--font-body);
    }
    /* ══════════════════════════════════
   LEFT PANEL
══════════════════════════════════ */
    .lg-left {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 44px 52px;
        overflow: hidden;
        background: radial-gradient(ellipse 60% 50% at 30% 20%, rgba(0,198,162,0.12) 0%, transparent 70%), radial-gradient(ellipse 50% 60% at 80% 80%, rgba(77,142,255,0.08) 0%, transparent 70%), linear-gradient(180deg, #080B11 0%, #0A0C10 100%);
    }
    /* Subtle grid overlay */
    .lg-grid-overlay {
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
        background-size: 48px 48px;
        mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
    }
    /* Decorative rings */
    .lg-ring {
        position: absolute;
        border-radius: 50%;
        border: 1px solid rgba(0,198,162,0.1);
        pointer-events: none;
    }

    .lg-ring-1 {
        width: 420px;
        height: 420px;
        right: -140px;
        bottom: -100px;
        animation: lg-spin 20s linear infinite;
    }

    .lg-ring-2 {
        width: 280px;
        height: 280px;
        right: -60px;
        bottom: -20px;
        animation: lg-spin 15s linear infinite reverse;
        border-color: rgba(77,142,255,0.08);
    }

    .lg-ring-3 {
        width: 160px;
        height: 160px;
        right: 20px;
        bottom: 80px;
        border-style: dashed;
        border-color: rgba(167,139,250,0.07);
        animation: lg-spin 25s linear infinite;
    }

    @keyframes lg-spin {
        to {
            transform: rotate(360deg);
        }
    }
    /* Brand */
    .lg-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        position: relative;
        z-index: 1;
    }

    .lg-logo-mark {
        width: 38px;
        height: 38px;
        background: var(--bx-accent);
        border-radius: 9px;
        display: grid;
        place-items: center;
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 15px;
        color: #000;
        box-shadow: 0 0 24px rgba(0,198,162,0.4);
    }

    .lg-logo-text {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 22px;
        color: var(--bx-text);
        letter-spacing: -0.3px;
    }

        .lg-logo-text span {
            color: var(--bx-accent);
        }
    /* Hero */
    .lg-hero {
        position: relative;
        z-index: 1;
    }

    .lg-hero-eyebrow {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--bx-accent);
        margin-bottom: 18px;
        opacity: 0.8;
    }

    .lg-hero-title {
        font-size: 25px;
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: -1.5px;
        color: var(--bx-text);
        margin-bottom: 18px;
    }

    .lg-hero-accent {
        background: linear-gradient(135deg, var(--bx-accent), var(--bx-blue));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .lg-hero-sub {
        font-size: 14px;
        color: var(--bx-muted);
        line-height: 1.75;
        max-width: 360px;
    }
    /* Feature pills */
    .lg-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        position: relative;
        z-index: 1;
    }

    .lg-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 20px;
        font-size: 11px;
        color: var(--bx-muted);
        font-weight: 500;
        backdrop-filter: blur(8px);
    }
    /* ══════════════════════════════════
   RIGHT PANEL
══════════════════════════════════ */
    .lg-right {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 48px;
        background: radial-gradient(ellipse 60% 40% at 70% 10%, rgba(0,198,162,0.04) 0%, transparent 70%), var(--bx-bg);
        border-left: 1px solid var(--bx-border);
    }
    /* Login card */
    .lg-card {
        width: 100%;
        max-width: 400px;
        animation: lg-fadein 0.35s ease;
    }

    @keyframes lg-fadein {
        from {
            opacity: 0;
            transform: translateY(14px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    .lg-card-head {
        margin-bottom: 28px;
    }

    .lg-card-title {
        font-family: var(--font-display);
        font-size: 24px;
        font-weight: 800;
        letter-spacing: -0.5px;
        margin-bottom: 5px;
        color: whitesmoke;
    }

    .lg-card-sub {
        font-size: 13px;
        color: var(--bx-muted);
    }
    /* Role toggle */
    .lg-role-toggle {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin-bottom: 28px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius-sm);
        padding: 4px;
    }

    .lg-role-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 9px 6px;
        border-radius: 5px;
        border: none;
        background: none;
        cursor: pointer;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 500;
        color: var(--bx-muted);
        transition: var(--transition);
    }

        .lg-role-btn:hover {
            color: var(--bx-text);
            background: rgba(255,255,255,0.04);
        }

        .lg-role-btn.active {
            background: var(--bx-surface);
            color: var(--bx-accent);
            border: 1px solid rgba(0,198,162,0.25);
            box-shadow: 0 0 12px rgba(0,198,162,0.1);
        }

    .lg-role-icon {
        font-size: 16px;
    }
    /* Form */
    .lg-form {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .lg-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .lg-label-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .lg-label {
        align-self: start;
        font-size: 12px;
        font-weight: 600;
        color: whitesmoke;
        letter-spacing: 0.2px;
    }

    .lg-forgot {
        font-size: 12px;
        color: var(--bx-accent);
        text-decoration: none;
        opacity: 0.8;
        transition: var(--transition);
    }

        .lg-forgot:hover {
            opacity: 1;
        }

    .lg-input-wrap {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius-sm);
        padding: 0 14px;
        transition: var(--transition);
    }

        .lg-input-wrap.focused {
            border-color: var(--bx-accent);
            box-shadow: 0 0 0 3px rgba(0,198,162,0.12);
            background: rgba(0,198,162,0.03);
        }

        .lg-input-wrap.error {
            border-color: var(--bx-red);
            box-shadow: 0 0 0 3px rgba(255,91,91,0.10);
        }

    .lg-input-icon {
        font-size: 14px;
        color: var(--bx-muted);
        flex-shrink: 0;
        user-select: none;
    }

    .lg-input {
        flex: 1;
        background: none;
        border: none;
        outline: none;
        font-family: var(--font-body);
        font-size: 14px;
        color: var(--bx-text);
        padding: 12px 0;
    }

        .lg-input::placeholder {
            color: var(--bx-muted);
            opacity: 0.6;
        }

    .lg-pass-toggle {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--bx-muted);
        font-size: 14px;
        padding: 4px;
        border-radius: 4px;
        transition: var(--transition);
        flex-shrink: 0;
    }

        .lg-pass-toggle:hover {
            color: var(--bx-text);
        }

    .lg-field-err {
        font-size: 11px;
        color: var(--bx-red);
        margin-top: -2px;
    }
    /* Remember me */
    .lg-remember {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        user-select: none;
    }

    .lg-checkbox {
        width: 18px;
        height: 18px;
        border-radius: 4px;
        border: 1.5px solid var(--bx-border);
        display: grid;
        place-items: center;
        font-size: 10px;
        color: #000;
        flex-shrink: 0;
        transition: var(--transition);
        background: var(--bx-surface2);
    }

        .lg-checkbox.checked {
            background: var(--bx-accent);
            border-color: var(--bx-accent);
            box-shadow: 0 0 8px rgba(0,198,162,0.3);
        }

    .lg-remember-text {
        font-size: 12px;
        color: var(--bx-muted);
    }
    /* Error banner */
    .lg-error-banner {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 10px 14px;
        background: rgba(255,91,91,0.08);
        border: 1px solid rgba(255,91,91,0.25);
        border-radius: var(--radius-sm);
        font-size: 13px;
        color: var(--bx-red);
        animation: lg-fadein 0.2s ease;
    }
    /* Submit button */
    .lg-submit {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 13px 20px;
        background: var(--bx-accent);
        border: none;
        border-radius: var(--radius-sm);
        font-family: var(--font-body);
        font-size: 14px;
        font-weight: 700;
        color: #000;
        cursor: pointer;
        transition: var(--transition);
        position: relative;
        overflow: hidden;
    }

        .lg-submit::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
            opacity: 0;
            transition: opacity 0.2s;
        }

        .lg-submit:hover:not(:disabled) {
            background: #00ddb5;
            box-shadow: 0 0 24px rgba(0,198,162,0.45);
            transform: translateY(-1px);
        }

            .lg-submit:hover:not(:disabled)::before {
                opacity: 1;
            }

        .lg-submit:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }

    .lg-submit-arrow {
        font-size: 16px;
        transition: transform 0.2s;
    }

    .lg-submit:hover .lg-submit-arrow {
        transform: translateX(3px);
    }

    .lg-spinner {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 2px solid rgba(0,0,0,0.3);
        border-top-color: #000;
        animation: lg-spin2 0.7s linear infinite;
        flex-shrink: 0;
    }

    @keyframes lg-spin2 {
        to {
            transform: rotate(360deg);
        }
    }
    /* Divider */
    .lg-divider {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 22px 0;
        font-size: 11px;
        color: var(--bx-muted);
    }

        .lg-divider::before, .lg-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--bx-border);
        }
    /* SSO buttons */
    .lg-sso {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .lg-sso-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 14px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius-sm);
        font-family: var(--font-body);
        font-size: 13px;
        font-weight: 500;
        color: var(--bx-text);
        cursor: pointer;
        transition: var(--transition);
    }

        .lg-sso-btn:hover {
            border-color: var(--bx-border-hi);
            background: rgba(255,255,255,0.05);
            transform: translateY(-1px);
        }
    /* Sign up row */
    .lg-signup-row {
        text-align: center;
        font-size: 13px;
        color: var(--bx-muted);
        margin-top: 22px;
    }

    .lg-signup-link {
        color: var(--bx-accent);
        text-decoration: none;
        font-weight: 600;
        margin-left: 4px;
        transition: var(--transition);
    }

        .lg-signup-link:hover {
            opacity: 0.8;
        }
    /* ── Responsive: stack on narrow screens ── */
    @media (max-width: 860px) {
        .lg-root {
            grid-template-columns: 1fr;
        }

        .lg-left {
            display: none;
        }

        .lg-right {
            border-left: none;
            padding: 32px 24px;
        }
    }


    /* ── LANDING ONLY ── */
    .lnd {
        background: var(--bx-bg);
        color: var(--bx-text);
        font-family: var(--font-body);
        overflow-x: hidden;
    }

        .lnd * {
            box-sizing: border-box;
        }

    /* NAV */
    .lnav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        gap: 6px;
        height: 68px;
        background: rgba(10,12,16,.82);
        border-bottom: 1px solid var(--bx-border);
        backdrop-filter: blur(18px);
    }

    .lnav-logo {
        display: flex;
        align-items: center;
    }

    .lnav-logo-img {
        height: 60px;
        width: auto;
        object-fit: contain;
        display: block;
    }

    .lnav-links {
        display: flex;
        align-items: center;
        gap: 32px;
    }

    .lnav-link {
        font-size: 13px;
        color: var(--bx-muted);
        text-decoration: none;
        font-weight: 500;
        transition: var(--transition);
        text-wrap-mode: nowrap;
    }

        .lnav-link:hover {
            color: var(--bx-text);
        }

    .lnav-ctas {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .account-type {
        display: block;
        font-size: 10px;
        font-weight: 500;
        color: var(--bx-text);
        line-height: 1.1;
        margin-top: 3px;
    }

    .lnav-btn-cta {
        padding: 8px 20px;
        border-radius: var(--radius-sm);
        font-size: 13px;
        font-weight: 700;
        font-family: var(--font-body);
        background: var(--bx-accent);
        border: none;
        color: #000;
        cursor: pointer;
        transition: var(--transition);
    }

        .lnav-btn-cta:hover {
            background: #00ddb5;
            box-shadow: 0 0 20px var(--bx-accent-glow);
        }


    /* NAV CTA RESPONSIVE */
    @media (max-width: 1024px) {
        .lnav-ctas {
            gap: 7px;
        }

        .bx-avatar-row {
            gap: 6px;
        }

        .bx-avatar-info strong {
            font-size: 11px;
            line-height: 1.05;
        }



        .lnav-btn-cta {
            padding: 10px 12px;
            font-size: 12px;
            line-height: 1.1;
        }

        .lnav-link {
            font-size: 12px
        }

        .lnav-links {
            gap: 20px;
        }
    }

    @media (max-width: 880px) {

        .lnav-ctas {
            gap: 6px;
        }

        .bx-avatar-row {
            gap: 4px;
        }

        .lnav {
            gap: 4px;
            padding: 0 5px;
        }

        .bx-avatar-info strong {
            font-size: 10px;
            line-height: 1.05;
        }

        .lnav-link {
            font-size: 11px
        }

        .lnav-links {
            gap: 15px;
        }

        .lang-switch-track {
            width: 62px;
            height: 30px;
        }

        .lnav-logo-img {
            height: 45px;
        }

        .lnav-btn-cta {
            padding: 9px 11px;
            font-size: 11px;
            line-height: 1.1;
        }
    }



    @media (max-width: 768px) {
        .lnav-ctas {
            gap: 6px;
        }

        .bx-avatar-row {
            gap: 5px;
        }

        .bx-avatar-info strong {
            font-size: 11px;
            line-height: 1;
        }

        .bx-avatar-row {
            padding: 8px 8px;
        }

        .lnav-btn-cta {
            padding: 10px 12px;
            font-size: 11px;
            line-height: 1;
        }
    }

    @media (max-width: 480px) {
        .lnav-ctas {
            gap: 5px;
        }

        .bx-avatar-info strong {
            font-size: 11px;
            line-height: 1;
            margin: 5px;
        }

        .bx-avatar-row {
            padding: 4px 6px;
        }

        .lnav-btn-cta {
            padding: 9px 10px;
            font-size: 10px;
            line-height: 1;
        }
    }

    @media (max-width: 1024px) {
        .lnav-logo-img {
            height: 50px;
        }
    }

    @media (max-width: 768px) {
        .lnav-logo-img {
            height: 45px;
        }
    }

    @media (max-width: 480px) {
        .lnav-logo-img {
            height: 40px;
        }
    }

    .lnav-btn-ghost {
        padding: 8px 18px;
        border-radius: var(--radius-sm);
        font-size: 13px;
        font-weight: 600;
        font-family: var(--font-body);
        background: none;
        border: 1px solid var(--bx-border);
        color: var(--bx-text);
        cursor: pointer;
        transition: var(--transition);
    }

        .lnav-btn-ghost:hover {
            border-color: var(--bx-border-hi);
        }



    /* HERO */
    .lhero {
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 100px 60px 80px;
        overflow: hidden;
    }

    .lhero-bg {
        position: absolute;
        inset: 0;
        background: url('https://images.unsplash.com/photo-1486325212027-8081e485255e?w=1800&q=80&auto=format') center/cover no-repeat;
        opacity: .1;
        filter: grayscale(.3);
    }



    .lhero-glow1 {
        position: absolute;
        width: 600px;
        height: 500px;
        border-radius: 50%;
        background: radial-gradient(ellipse,rgba(0,198,162,.15) 0%,transparent 70%);
        top: -100px;
        left: -80px;
        filter: blur(70px);
        pointer-events: none;
    }

    .lhero-glow2 {
        position: absolute;
        width: 500px;
        height: 400px;
        border-radius: 50%;
        background: radial-gradient(ellipse,rgba(77,142,255,.1) 0%,transparent 70%);
        bottom: -80px;
        right: -60px;
        filter: blur(70px);
        pointer-events: none;
    }

    .lhero-grid {
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
        background-size: 60px 60px;
        mask-image: radial-gradient(ellipse 80% 80% at 50% 50%,black 20%,transparent 100%);
    }

    .lhero-inner {
        position: relative;
        z-index: 1;
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
    }

    .lhero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1.8px;
        text-transform: uppercase;
        color: var(--bx-accent);
        background: rgba(0,198,162,.08);
        border: 1px solid rgba(0,198,162,.2);
        padding: 6px 14px;
        border-radius: 20px;
        margin-bottom: 28px;
    }

    .lhero-eyebrow-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--bx-accent);
        animation: ldot 2s ease infinite;
    }

    @keyframes ldot {
        0%,100% {
            opacity: 1;
            transform: scale(1)
        }

        50% {
            opacity: .4;
            transform: scale(.7)
        }
    }

    .lhero-h1 {
        font-size: clamp(40px,5.5vw,72px);
        font-weight: 800;
        line-height: 1.05;
        letter-spacing: -2.5px;
        margin-bottom: 24px;
    }

    .lhero-h1-outline {
        -webkit-text-stroke: 1.5px rgba(255,255,255,.3);
    }

    .lhero-h1-grad {
        background: linear-gradient(100deg,var(--bx-accent) 0%,var(--bx-blue) 60%,var(--bx-purple) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .lhero-sub {
        font-size: 17px;
        color: white;
        line-height: 1.75;
        max-width: 600px;
        margin: 0 auto 40px;
    }

    .lhero-ctas {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .lhero-cta-primary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 14px 28px;
        background: var(--bx-accent);
        border: none;
        border-radius: var(--radius-sm);
        font-family: var(--font-body);
        font-size: 14px;
        font-weight: 700;
        color: #000;
        cursor: pointer;
        transition: var(--transition);
    }

        .lhero-cta-primary:hover {
            background: #00ddb5;
            box-shadow: 0 0 28px var(--bx-accent-glow);
            transform: translateY(-1px);
        }

    .lhero-cta-secondary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 14px 28px;
        background: none;
        border: 1px solid var(--bx-border);
        border-radius: var(--radius-sm);
        font-family: var(--font-body);
        font-size: 14px;
        font-weight: 500;
        color: var(--bx-text);
        cursor: pointer;
        transition: var(--transition);
    }

        .lhero-cta-secondary:hover {
            border-color: var(--bx-border-hi);
            background: rgba(255,255,255,.04);
        }

    .lhero-stats {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 40px;
        margin-top: 64px;
        padding-top: 48px;
        border-top: 1px solid var(--bx-border);
    }

    .lhero-stat-val {
        font-family: var(--font-display);
        font-size: 32px;
        font-weight: 800;
        letter-spacing: -1.5px;
        line-height: 1;
    }

        .lhero-stat-val span {
            color: var(--bx-accent);
        }

    .lhero-stat-lbl {
        font-size: 12px;
        color: var(--bx-muted);
        margin-top: 4px;
        font-weight: 500;
    }

    .lhero-stat-sep {
        width: 1px;
        height: 40px;
        background: var(--bx-border);
    }

    /* SECTION SHARED */
    .lsection {
        padding: 96px 60px;
    }

    .lsection-inner {
        max-width: 1160px;
        margin: 0 auto;
    }

    .lsection-eyebrow {
        font-size: 25px;
        font-weight: 700;
        letter-spacing: 1.8px;
        text-transform: uppercase;
        color: var(--bx-accent);
        margin-bottom: 14px;
    }

    .lsection-title {
        font-size: clamp(24px,3.1vw,35px);
        font-weight: 800;
        letter-spacing: -1.5px;
        line-height: 1.1;
        margin-bottom: 18px;
    }

    .lsection-sub {
        font-size: 15px;
        color: whitesmoke;
        line-height: 1.75;
        max-width: 560px;
    }
    /* ── PHOTO BAND (between How & Services) ── */
    .lphoto-band {
        position: relative;
        height: 480px;
        overflow: hidden;
    }

    .lphoto-band-bg {
        position: absolute;
        inset: 0;
        background: url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=1800&q=80&auto=format') center/cover no-repeat;
        transform: scale(1.04);
        transition: transform 6s ease;
    }

    .lphoto-band:hover .lphoto-band-bg {
        transform: scale(1);
    }

    .lphoto-band-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,#080A10 0%,rgba(8,10,16,.55) 40%,rgba(8,10,16,.55) 60%,#080A10 100%);
    }

    .lphoto-band-inner {
        position: relative;
        z-index: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 60px;
    }

    .lphoto-band-content {
        max-width: 700px;
        text-align: center;
    }

    .lphoto-band-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1.8px;
        text-transform: uppercase;
        color: #00C6A2;
        background: rgba(0,198,162,.1);
        border: 1px solid rgba(0,198,162,.22);
        padding: 5px 14px;
        border-radius: 20px;
        margin-bottom: 20px;
    }

    .lphoto-band-title {
        font-size: clamp(28px,4vw,40px);
        font-weight: 800;
        letter-spacing: -1.5px;
        line-height: 1.1;
        margin-bottom: 14px;
    }

    .lphoto-band-sub {
        font-size: 16px;
        color: rgb(255 255 255 / 93%);
        line-height: 1.7;
    }


    /* HOW IT WORKS */
    .lhow-grid {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 2px;
        background: var(--bx-border);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        margin-top: 56px;
    }

    .lhow-card {
        background: var(--bx-surface);
        padding: 36px 32px;
        position: relative;
        transition: var(--transition);
    }

        .lhow-card:hover {
            background: var(--bx-surface2);
        }

        .lhow-card::before {
            content: attr(data-n);
            position: absolute;
            top: 28px;
            right: 28px;
            font-family: var(--font-display);
            font-size: 52px;
            font-weight: 800;
            color: whitesmoke;
            line-height: 1;
        }

    .lhow-icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        font-size: 20px;
        margin-bottom: 20px;
    }

    .lhow-title {
        font-family: var(--font-display);
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 10px;
        letter-spacing: -.2px;
    }

    .lhow-desc {
        font-size: 13px;
        color: var(--bx-muted);
        line-height: 1.7;
    }

    .lhow-connector {
        position: absolute;
        top: 50%;
        right: -1px;
        width: 20px;
        height: 2px;
        background: linear-gradient(90deg,var(--bx-accent),transparent);
    }

    /* SERVICES */
    .lserv-grid {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 16px;
        margin-top: 56px;
    }

    .lserv-card {
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius);
        padding: 28px 26px;
        transition: var(--transition);
        cursor: default;
        position: relative;
        overflow: hidden;
    }

        .lserv-card::after {
            content: '';
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity .25s;
            background: linear-gradient(135deg,var(--svc) 0%,transparent 60%);
            border-radius: var(--radius);
        }

        .lserv-card:hover {
            border-color: var(--svc);
            transform: translateY(-3px);
            box-shadow: 0 12px 40px rgba(0,0,0,.4),0 0 0 1px var(--svc);
        }

            .lserv-card:hover::after {
                opacity: .06;
            }

    .lserv-ic {
        width: 46px;
        height: 46px;
        border-radius: 11px;
        display: grid;
        place-items: center;
        font-size: 22px;
        margin-bottom: 18px;
        position: relative;
        z-index: 1;
    }

    .lserv-title {
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -.2px;
        margin-bottom: 8px;
        position: relative;
        z-index: 1;
    }

    .lserv-desc {
        font-size: 12px;
        color: var(--bx-muted);
        line-height: 1.7;
        position: relative;
        z-index: 1;
    }

    .lserv-tag {
        display: inline-block;
        margin-top: 14px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .5px;
        padding: 3px 9px;
        border-radius: 20px;
        position: relative;
        z-index: 1;
    }

    /* FEATURES BENTO */
    .lbento {
        display: grid;
        grid-template-columns: repeat(12,1fr);
        grid-template-rows: auto;
        gap: 14px;
        margin-top: 56px;
    }

    .lbento-card {
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius);
        padding: 26px 28px;
        transition: var(--transition);
        overflow: hidden;
        position: relative;
    }

        .lbento-card:hover {
            border-color: var(--bx-border-hi);
            box-shadow: var(--shadow);
        }

    .lbento-1 {
        grid-column: span 7;
    }

    .lbento-2 {
        grid-column: span 5;
    }

    .lbento-3 {
        grid-column: span 4;
    }

    .lbento-4 {
        grid-column: span 4;
    }

    .lbento-5 {
        grid-column: span 4;
    }

    .lbento-6 {
        grid-column: span 12;
    }

    .lbento-label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--bx-muted);
        margin-bottom: 10px;
    }

    .lbento-title {
        font-family: var(--font-display);
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -.3px;
        line-height: 1.25;
        margin-bottom: 8px;
    }

    .lbento-sub {
        font-size: 13px;
        color: var(--bx-muted);
        line-height: 1.65;
    }
    /* bento visual accents */
    .lbento-vis {
        margin-top: 20px;
    }

    .lbento-bar-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
    }

    .lbento-bar-lbl {
        font-size: 11px;
        color: var(--bx-muted);
        min-width: 90px;
    }

    .lbento-bar-track {
        flex: 1;
        height: 6px;
        background: rgba(255,255,255,.06);
        border-radius: 6px;
        overflow: hidden;
    }

    .lbento-bar-fill {
        height: 100%;
        border-radius: 6px;
        transition: width .6s ease;
    }

    .lbento-pill-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 14px;
    }

    .lbento-pill {
        font-size: 11px;
        font-weight: 500;
        padding: 5px 11px;
        border-radius: 20px;
        border: 1px solid var(--bx-border);
        background: rgba(255,255,255,.04);
        color: var(--bx-muted);
    }

    .lbento-flow {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 14px;
    }

    .lbento-flow-step {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        background: var(--bx-surface2);
        border-radius: 7px;
        border: 1px solid var(--bx-border);
        font-size: 12px;
    }

    .lbento-flow-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    /* wide bento row of platform logos */
    .lbento-logos {
        display: flex;
        align-items: center;
        gap: 24px;
        flex-wrap: wrap;
        margin-top: 16px;
    }

    .lbento-logo-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: 500;
        color: var(--bx-muted);
    }

    .lbento-logo-ic {
        width: 32px;
        height: 32px;
        border-radius: 7px;
        display: grid;
        place-items: center;
        font-size: 16px;
        border: 1px solid var(--bx-border);
        background: var(--bx-surface2);
    }

    /* SOCIAL PROOF */
    .ltestimonials {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 16px;
        margin-top: 56px;
    }

    .ltesti {
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius);
        padding: 26px 24px;
        transition: var(--transition);
    }

        .ltesti:hover {
            border-color: var(--bx-border-hi);
            transform: translateY(-2px);
        }

    .ltesti-quote {
        font-size: 13px;
        color: rgba(255,255,255,.55);
        line-height: 1.75;
        margin-bottom: 18px;
        position: relative;
        padding-top: 8px;
    }

        .ltesti-quote::before {
            content: '"';
            position: absolute;
            top: -8px;
            left: -4px;
            font-family: var(--font-display);
            font-size: 44px;
            font-weight: 800;
            color: rgba(0,198,162,.15);
            line-height: 1;
        }

    .ltesti-author {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .ltesti-av {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg,var(--bx-accent),var(--bx-blue));
        display: grid;
        place-items: center;
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 13px;
        color: #fff;
        flex-shrink: 0;
    }

    .ltesti-name {
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
    }

    .ltesti-role {
        font-size: 11px;
        color: var(--bx-muted);
        margin-top: 2px;
    }

    .lsplit {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        min-height: 520px;
        overflow: hidden;
    }

    .lsplit-photo {
        position: relative;
        overflow: hidden;
    }

        .lsplit-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 6s ease;
        }

        .lsplit-photo:hover img {
            transform: scale(1.04);
        }

    .lsplit-photo-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,rgba(8,10,16,.0) 0%,rgba(8,10,16,.55) 100%);
    }

    .lsplit-content {
        background: #0D0F14;
        padding: 80px 64px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

        .lsplit-content.lsplit-left {
            background: #0D0F14;
            padding: 80px 64px 80px 80px;
        }

        .lsplit-content .lsection-eyebrow {
            margin-bottom: 12px;
        }

        .lsplit-content .lsection-title {
            font-size: clamp(26px,3vw,38px);
            margin-bottom: 16px;
        }

        .lsplit-content .lsection-sub {
            font-size: 14px;
            margin-bottom: 28px;
        }

    .lsplit-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .lsplit-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 13px;
        line-height: 1.55;
    }

    .lsplit-item-dot {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: rgba(0,198,162,.15);
        border: 1px solid rgba(0,198,162,.3);
        display: grid;
        place-items: center;
        flex-shrink: 0;
        margin-top: 1px;
    }

        .lsplit-item-dot svg {
            color: #00C6A2;
        }

    @media(max-width:1024px) {


        .lsplit {
            grid-template-columns: 1fr;
        }

        .lsplit-photo {
            height: 320px;
        }
    }
    /* FINAL CTA */
    .lfinal {
        position: relative;
        padding: 0;
        overflow: hidden;
        min-height: 480px;
        display: flex;
        align-items: center;
    }

    .lfinal-bg {
        position: absolute;
        inset: 0;
        background: url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=1800&q=80&auto=format') center/cover no-repeat;
        opacity: .12;
        filter: grayscale(.4);
    }

    .lfinal-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg,rgba(0,198,162,.12) 0%,rgba(77,142,255,.08) 100%);
    }

    .lfinal-glow {
        position: absolute;
        width: 700px;
        height: 500px;
        border-radius: 50%;
        background: radial-gradient(ellipse,rgba(0,198,162,.12) 0%,transparent 70%);
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        filter: blur(70px);
        pointer-events: none;
    }


    .lfinal-inner {
        position: relative;
        z-index: 1;
        max-width: 720px;
        margin: 0 auto;
        text-align: center;
        padding: 80px 60px;
    }

    .lfinal-h2 {
        font-size: clamp(32px,4vw,52px);
        font-weight: 800;
        letter-spacing: -2px;
        line-height: 1.1;
        margin-bottom: 18px;
    }

    .lfinal-sub {
        font-size: 15px;
        color: white;
        line-height: 1.7;
        margin-bottom: 36px;
    }

    .lfinal-ctas {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    /* FOOTER */
    .lfooter {
        border-top: 1px solid var(--bx-border);
        padding: 48px 60px 32px;
    }

    .lfooter-inner {
        max-width: 1160px;
        margin: 0 auto;
    }

    .lfooter-top {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 40px;
        margin-bottom: 48px;
    }

    .lfooter-brand-desc {
        font-size: 13px;
        color: var(--bx-muted);
        line-height: 1.7;
        margin-top: 14px;
        max-width: 260px;
    }

    .lfooter-col-title {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--bx-muted);
        margin-bottom: 14px;
    }

    .lfooter-links {
        display: flex;
        flex-direction: column;
        gap: 9px;
    }

    .lfooter-link {
        font-size: 13px;
        color: rgba(255,255,255,.4);
        text-decoration: none;
        transition: var(--transition);
    }

        .lfooter-link:hover {
            color: var(--bx-text);
        }

    .lfooter-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 28px;
        border-top: 1px solid var(--bx-border);
        font-size: 12px;
        color: var(--bx-muted);
    }

    .lfooter-socials {
        display: flex;
        gap: 10px;
    }

    .lfooter-soc {
        width: 32px;
        height: 32px;
        border-radius: 7px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        display: grid;
        place-items: center;
        font-size: 14px;
        cursor: pointer;
        transition: var(--transition);
    }

        .lfooter-soc:hover {
            border-color: var(--bx-border-hi);
        }

    /* RESPONSIVE */
    @media(max-width:1024px) {
        .lserv-grid {
            grid-template-columns: repeat(2,1fr);
        }

        .lhow-grid {
            grid-template-columns: 1fr;
        }

        .lbento-1, .lbento-2 {
            grid-column: span 12;
        }

        .lbento-3, .lbento-4, .lbento-5 {
            grid-column: span 6;
        }

        .lbento-6 {
            grid-column: span 12;
        }

        .lfooter-top {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media(max-width:768px) {
        .lnav {
            padding: 0 20px;
        }

        .lnav-links {
            display: none;
        }

        .lhero, .lsection, .lfinal, .lfooter {
            padding-left: 20px;
            padding-right: 20px;
        }

        .lhero-stats {
            flex-direction: column;
            gap: 20px;
        }

        .lhero-stat-sep {
            display: none;
        }

        .ltestimonials, .lpricing-grid {
            grid-template-columns: 1fr;
        }

        .lserv-grid {
            grid-template-columns: 1fr;
        }

        .lbento-3, .lbento-4, .lbento-5 {
            grid-column: span 12;
        }

        .lfooter-top {
            grid-template-columns: 1fr;
        }
    }


    /*Project Feed */



    /* Role badge */
    .pf-role-badge {
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1.2px;
        background: linear-gradient(135deg,#4D8EFF,#A78BFA);
        color: #fff;
        padding: 3px 8px;
        border-radius: 4px;
        font-family: var(--font-display);
    }

    /* Live indicator */
    .pf-live-dot-wrap {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        background: rgba(0,198,162,.08);
        border: 1px solid rgba(0,198,162,.25);
        border-radius: 20px;
    }

    .pf-live-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--bx-accent);
        animation: pfpulse 1.8s ease infinite;
        flex-shrink: 0;
    }

    @keyframes pfpulse {
        0%,100% {
            opacity: 1;
            transform: scale(1)
        }

        50% {
            opacity: .35;
            transform: scale(.65)
        }
    }

    /* Shell layout */
    .pf-shell {
        display: grid;
        grid-template-columns: 248px 1fr;
        gap: 0;
        min-height: calc(100vh - 68px);
    }

    /* Sidebar */
    .pf-sidebar {
        background: var(--bx-surface);
        border-right: 1px solid var(--bx-border);
        padding: 20px 16px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        position: sticky;
        top: 68px;
        height: auto;
        overflow-y: auto;
    }

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

    .pf-search-ic {
        position: absolute;
        left: 11px;
        color: var(--bx-muted);
        pointer-events: none;
    }

    .pf-search {
        width: 100%;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius-sm);
        color: var(--bx-text);
        font-family: var(--font-body);
        font-size: 13px;
        padding: 9px 32px 9px 34px;
        outline: none;
        transition: var(--transition);
    }

        .pf-search:focus {
            border-color: var(--bx-accent);
            box-shadow: 0 0 0 3px var(--bx-accent-dim);
        }

        .pf-search::placeholder {
            color: var(--bx-muted);
            opacity: .6;
        }

    .pf-search-clear {
        position: absolute;
        right: 9px;
        background: none;
        border: none;
        color: var(--bx-muted);
        cursor: pointer;
        font-size: 12px;
        padding: 3px;
    }

        .pf-search-clear:hover {
            color: var(--bx-text);
        }

    /* Filter summary */
    .pf-filter-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .pf-clear-all {
        background: none;
        border: none;
        font-family: var(--font-body);
        font-size: 11px;
        color: var(--bx-red);
        cursor: pointer;
        padding: 0;
        font-weight: 600;
    }

        .pf-clear-all:hover {
            opacity: .75;
        }

    /* Filter group */
    .pf-filter-group {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .pf-filter-label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .8px;
        text-transform: uppercase;
        color: var(--bx-muted);
        margin-bottom: 6px;
    }

    .pf-filter-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 8px;
        border-radius: 6px;
        cursor: pointer;
        transition: var(--transition);
    }

        .pf-filter-row:hover {
            background: rgba(255,255,255,.04);
        }

    .pf-filter-row-on {
        background: rgba(255,255,255,.04);
    }

    .pf-filter-check {
        width: 16px;
        height: 16px;
        border-radius: 4px;
        border: 1.5px solid var(--bx-border);
        display: grid;
        place-items: center;
        flex-shrink: 0;
        transition: var(--transition);
        background: var(--bx-surface2);
    }

        .pf-filter-check.on {
            background: var(--fc,var(--bx-accent));
            border-color: var(--fc,var(--bx-accent));
            box-shadow: 0 0 7px rgba(0,198,162,.3);
        }

    .pf-filter-ic {
        width: 22px;
        height: 22px;
        border-radius: 5px;
        display: grid;
        place-items: center;
        font-size: 12px;
        flex-shrink: 0;
    }

    .pf-filter-txt {
        flex: 1;
        font-size: 12px;
        color: var(--bx-text);
    }

    .pf-filter-count {
        font-size: 10px;
        color: var(--bx-muted);
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        padding: 1px 6px;
        border-radius: 10px;
    }

    /* Radio */
    .pf-radio {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: 1.5px solid var(--bx-border);
        flex-shrink: 0;
        position: relative;
        transition: var(--transition);
    }

        .pf-radio.on {
            border-color: var(--bx-accent);
            background: rgba(0,198,162,.15);
        }

            .pf-radio.on::after {
                content: '';
                position: absolute;
                inset: 3px;
                border-radius: 50%;
                background: var(--bx-accent);
            }

    .pf-radio-blue.on {
        border-color: var(--bx-blue);
    }

        .pf-radio-blue.on::after {
            background: var(--bx-blue);
        }

    /* Sort pills */
    .pf-sort-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    .pf-sort-pill {
        padding: 5px 10px;
        border-radius: 20px;
        border: 1px solid var(--bx-border);
        background: none;
        font-family: var(--font-body);
        font-size: 11px;
        font-weight: 500;
        color: var(--bx-muted);
        cursor: pointer;
        transition: var(--transition);
    }

        .pf-sort-pill:hover {
            color: var(--bx-text);
            border-color: var(--bx-border-hi);
        }

        .pf-sort-pill.active {
            background: rgba(0,198,162,.1);
            color: var(--bx-accent);
            border-color: rgba(0,198,162,.35);
        }

    /* Toggle */
    .pf-toggle-row {
        display: flex;
        align-items: center;
        gap: 9px;
        cursor: pointer;
        user-select: none;
    }

    .pf-toggle {
        width: 36px;
        height: 20px;
        border-radius: 20px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        position: relative;
        transition: var(--transition);
        flex-shrink: 0;
    }

        .pf-toggle.on {
            background: var(--bx-accent);
            border-color: var(--bx-accent);
        }

    .pf-toggle-knob {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        top: 2px;
        left: 2px;
        transition: transform .18s;
    }

    .pf-toggle.on .pf-toggle-knob {
        transform: translateX(16px);
    }

    .pf-toggle-lbl {
        font-size: 12px;
        color: var(--bx-muted);
    }

    /* Main area */
    .pf-main {
        padding: 18px 24px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    /* Toolbar */
    .pf-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .pf-result-count {
        font-size: 15px;
        color: #1ebda0
    }

        .pf-result-count strong {
            font-size: 15px;
            color: rgb();
        }





    /* Empty */
    .pf-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 80px 24px;
        text-align: center;
    }

    .pf-empty-graphic {
        position: relative;
        width: 120px;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 4px;
    }

    .pf-empty-ring {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 2px solid rgba(0,198,162,.12);
    }

        .pf-empty-ring.r1 {
            animation: pfspin 10s linear infinite;
        }

        .pf-empty-ring.r2 {
            inset: 12px;
            border-color: rgba(77,142,255,.1);
            animation: pfspin 7s linear infinite reverse;
        }

    @keyframes pfspin {
        to {
            transform: rotate(360deg)
        }
    }


    .pf-empty-title {
        font-family: var(--font-display);
        font-size: 16px;
        font-weight: 700;
        color: black;
    }

    .pf-empty-sub {
        font-size: 13px;
        color: black;
    }

    /* LIST cards */
    .pf-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .pf-list-card {
        display: flex;
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius);
        overflow: hidden;
        transition: border-color .2s,transform .2s,box-shadow .2s;
    }

        .pf-list-card:hover {
            border-color: color-mix(in srgb,var(--cc) 50%,transparent 50%);
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0,0,0,.4),0 0 0 1px color-mix(in srgb,var(--cc) 30%,transparent 70%);
        }

    .pf-bid-done {
        border-color: rgba(0,198,162,.25) !important;
    }

    .pf-lcard-stripe {
        width: 4px;
        flex-shrink: 0;
        background: linear-gradient(180deg,color-mix(in srgb,var(--cc) 80%,white 20%) 0%,var(--cc) 50%,color-mix(in srgb,var(--cc) 55%,black 45%) 100%);
        box-shadow: 2px 0 10px color-mix(in srgb,var(--cc) 35%,transparent 65%);
    }

    .pf-lcard-body {
        flex: 1;
        padding: 16px 20px;
        min-width: 0;
        background: linear-gradient(135deg,color-mix(in srgb,var(--cc) 5%,var(--bx-surface) 95%) 0%,var(--bx-surface) 65%);
    }

    .pf-lcard-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 8px;
    }

    .pf-lcard-uid-row {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        margin-bottom: 4px;
    }

    .pf-lcard-uid {
        font-size: 16px;
        font-family: monospace;
        color: var(--cc);
        letter-spacing: .8px;
        opacity: .85;
    }

    .pf-lcard-title {
        font-family: var(--font-display);
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -.3px;
        line-height: 1.3;
        margin-bottom: 6px;
    }

    .pf-lcard-desc {
        font-size: 15px;
        color: var(--bx-muted);
        line-height: 1.65;
        border-left: 2px solid var(--bx-border);
        padding-left: 10px;
        margin-bottom: 8px;
    }

    .pf-lcard-budget-block {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
        flex-shrink: 0;
    }

    .pf-lcard-budget {
        font-family: var(--font-display);
        font-size: 20px;
        font-weight: 800;
        color: var(--bx-accent);
        letter-spacing: -.8px;
    }

    .pf-lcard-budget-lbl {
        font-size: 12px;
        color: var(--bx-muted);
    }

    .pf-bids-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 11px;
        font-weight: 600;
        color: var(--bx-blue);
        background: var(--bx-blue-dim);
        border: 1px solid rgba(77,142,255,.3);
        padding: 3px 9px;
        border-radius: 20px;
        white-space: nowrap;
    }

    .pf-bids-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--bx-blue);
        animation: pfpulse 1.8s ease infinite;
    }

    /* Tags */
    .pf-tag {
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .5px;
        text-transform: uppercase;
        padding: 2px 7px;
        border-radius: 3px;
    }

    .pf-tag-new {
        background: linear-gradient(135deg,var(--bx-accent),var(--bx-blue));
        color: #000;
    }

    .pf-tag-bid {
        background: rgba(0,198,162,.15);
        color: var(--bx-accent);
        border: 1px solid rgba(0,198,162,.3);
    }

    .pf-cat-chip {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .3px;
        padding: 3px 9px;
        border-radius: 20px;
        border: 1px solid;
    }

    /* Meta pills */
    .pf-meta-row {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-bottom: 10px;
    }

    .pf-meta-pill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        color: var(--bx-muted);
        background: rgba(255,255,255,.04);
        border: 1px solid var(--bx-border);
        padding: 3px 8px;
        border-radius: 10px;
    }

    .pf-pill-red {
        color: var(--bx-red) !important;
        border-color: rgba(255,91,91,.3) !important;
        background: rgba(255,91,91,.07) !important;
    }

    .pf-pill-accent {
        color: var(--bx-accent) !important;
        border-color: rgba(0,198,162,.3) !important;
        background: rgba(0,198,162,.07) !important;
    }

    .pf-meta-pill-time {
        color: white !important;
        border-color: transparent !important;
        background: none !important;
    }

    /* Expanded section */
    .pf-expanded {
        padding: 14px 0 6px;
        border-top: 1px dashed var(--bx-border);
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .pf-exp-label {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .8px;
        text-transform: uppercase;
        color: var(--bx-muted);
    }

    .pf-ms-strip {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .pf-ms-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 500;
        color: var(--bx-text);
    }

    .pf-ms-num {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 1px solid;
        display: grid;
        place-items: center;
        font-size: 9px;
        font-weight: 800;
        flex-shrink: 0;
        font-family: var(--font-display);
    }

    .pf-exp-deliv {
        display: flex;
        gap: 9px;
        padding: 10px 13px;
        background: rgba(0,198,162,.04);
        border: 1px solid rgba(0,198,162,.18);
        border-radius: 7px;
        font-size: 12px;
        color: var(--bx-text);
        line-height: 1.65;
    }

    .pf-file-strip {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
    }

    .pf-file-chip {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 5px 10px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
    }

    .pf-file-ext {
        font-size: 9px;
        font-weight: 800;
        padding: 2px 6px;
        border-radius: 4px;
    }

    .pf-file-name {
        font-size: 11px;
        font-weight: 500;
        max-width: 160px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pf-file-size {
        font-size: 10px;
        color: var(--bx-muted);
    }

    /* Card actions */
    .pf-lcard-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .pf-expand-btn {
        background: none;
        border: none;
        font-family: var(--font-body);
        font-size: 11px;
        color: var(--bx-muted);
        cursor: pointer;
        padding: 0;
        flex: 1;
    }

        .pf-expand-btn:hover {
            color: var(--bx-text);
        }

    .pf-action-sm {
        font-size: 12px !important;
        padding: 7px 14px !important;
    }

    /* GRID */
    .pf-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
        gap: 14px;
    }

    .pf-grid-card {
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius);
        overflow: hidden;
        transition: border-color .2s,transform .2s,box-shadow .2s;
        display: flex;
        flex-direction: column;
    }

        .pf-grid-card:hover {
            border-color: color-mix(in srgb,var(--cc) 50%,transparent 50%);
            transform: translateY(-3px);
            box-shadow: 0 12px 36px rgba(0,0,0,.45),0 0 0 1px color-mix(in srgb,var(--cc) 30%,transparent 70%);
        }

    .pf-gcard-band {
        height: 3px;
        background: linear-gradient(90deg,var(--cc),transparent);
        box-shadow: 0 0 10px var(--cc);
    }

    .pf-gcard-inner {
        padding: 16px 18px;
        display: flex;
        flex-direction: column;
        gap: 0;
        flex: 1;
    }

    .pf-gcard-tags {
        display: flex;
        align-items: center;
        gap: 5px;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }

    .pf-gcard-uid {
        font-size: 9px;
        font-family: monospace;
        color: var(--cc);
        letter-spacing: .8px;
        margin-bottom: 4px;
        opacity: .85;
    }

    .pf-gcard-title {
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -.2px;
        line-height: 1.3;
        margin-bottom: 6px;
    }

    .pf-gcard-desc {
        font-size: 13px;
        color: var(--bx-muted);
        line-height: 1.6;
        margin-bottom: 12px;
    }

    .pf-gcard-meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        background: var(--bx-border);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
        overflow: hidden;
        margin-bottom: 10px;
    }

    .pf-gm-item {
        background: var(--bx-surface2);
        padding: 7px 10px;
    }

    .pf-gm-lbl {
        font-size: 9px;
        color: var(--bx-muted);
        font-weight: 600;
        letter-spacing: .4px;
        text-transform: uppercase;
        margin-bottom: 3px;
    }

    .pf-gm-val {
        font-size: 13px;
        font-weight: 700;
    }

    .pf-gcard-footer-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        font-size: 10px;
        color: var(--bx-muted);
        margin-bottom: 12px;
        flex: 1;
        align-items: flex-end;
    }

    .pf-gcard-cta {
        margin-top: auto;
    }

    .pf-red {
        color: var(--bx-red) !important;
    }

    /* FILE ext colours (reuse global) */
    .ext-rvt {
        background: rgba(77,142,255,.2);
        color: var(--bx-blue);
    }

    .ext-ifc {
        background: rgba(0,198,162,.2);
        color: var(--bx-accent);
    }

    .ext-dwg, .ext-dxf {
        background: rgba(245,166,35,.2);
        color: var(--bx-amber);
    }

    .ext-pdf {
        background: rgba(255,91,91,.2);
        color: var(--bx-red);
    }

    .ext-other {
        background: var(--bx-surface);
        color: var(--bx-muted);
    }

    .pf-file-ext-lg {
        width: 34px;
        height: 34px;
        border-radius: 7px;
        display: grid;
        place-items: center;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .4px;
        flex-shrink: 0;
    }

    /* ── Project Feed Bid Modal ── */
    .pbm-modal {
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        border-radius: 20px;
        width: 100%;
        max-width: 660px;
        max-height: 90vh;
        min-height: 70vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 24px 64px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.05);
        animation: pbm-rise .28s cubic-bezier(.4,0,.2,1) both;
    }

    @keyframes pbm-rise {
        from {
            opacity: 0;
            transform: translateY(18px) scale(.98);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    /* ── Header ── */
    .pbm-header {
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
        padding: 22px 24px 16px;
        background: linear-gradient( 135deg, color-mix(in srgb, var(--phc) 13%, var(--bx-surface2) 87%) 0%, var(--bx-surface2) 100% );
        border-bottom: 1px solid var(--bx-border);
    }

    .pbm-header-glow {
        position: absolute;
        top: -60px;
        right: -60px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--phc) 18%, transparent 82%);
        filter: blur(50px);
        pointer-events: none;
    }

    .pbm-header-inner {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 12px;
    }

    .pbm-header-tags {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-bottom: 8px;
        flex-wrap: wrap;
    }

    .pbm-cat-chip {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .4px;
        padding: 3px 10px;
        border-radius: 20px;
        white-space: nowrap;
    }



    .pbm-project-title {
        font-family: var(--font-display);
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -.4px;
        line-height: 1.2;
        margin-bottom: 4px;
    }

    .pbm-project-uid {
        font-size: 10px;
        font-family: monospace;
        color: var(--phc);
        letter-spacing: .8px;
        opacity: .75;
    }

    .pbm-close-btn {
        width: 28px;
        height: 28px;
        border-radius: 7px;
        background: rgba(255,255,255,.06);
        border: 1px solid var(--bx-border);
        color: var(--bx-muted);
        display: grid;
        place-items: center;
        cursor: pointer;
        transition: var(--transition);
        flex-shrink: 0;
    }

        .pbm-close-btn:hover {
            color: var(--bx-text);
            border-color: var(--bx-border-hi);
        }

    .pbm-budget-block {
        text-align: right;
    }

    .pbm-budget-lbl {
        font-size: 9px;
        color: var(--bx-muted);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .5px;
        margin-bottom: 2px;
    }

    .pbm-budget-val {
        font-family: var(--font-display);
        font-size: 22px;
        font-weight: 800;
        color: var(--bx-accent);
        letter-spacing: -1px;
    }


    .pbm-meta-strip {
        position: relative;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .pbm-meta-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 11px;
        color: var(--bx-muted);
        background: rgba(255,255,255,.04);
        border: 1px solid var(--bx-border);
        padding: 4px 10px;
        border-radius: 20px;
    }

    .pbm-bids-pill {
        color: var(--bx-blue) !important;
        border-color: rgba(77,142,255,.3) !important;
        background: rgba(77,142,255,.07) !important;
    }

    .pbm-bids-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--bx-blue);
        animation: pbmpulse 1.8s ease infinite;
    }

    @keyframes pbmpulse {
        0%,100% {
            opacity: 1;
            transform: scale(1)
        }

        50% {
            opacity: .3;
            transform: scale(.6)
        }
    }

    /* ── Tabs ── */
    .pbm-tabs {
        display: flex;
        border-bottom: 1px solid var(--bx-border);
        padding: 0 24px;
        flex-shrink: 0;
        background: var(--bx-surface);
    }

    .pbm-tab {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 11px 14px;
        border: none;
        background: none;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 500;
        color: var(--bx-muted);
        cursor: pointer;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        transition: var(--transition);
        white-space: nowrap;
    }

        .pbm-tab:hover {
            color: var(--bx-text);
        }

        .pbm-tab.active {
            color: var(--bx-accent);
            border-bottom-color: var(--bx-accent);
        }

    .pbm-tab-cnt {
        font-size: 9px;
        font-weight: 700;
        background: rgba(255,255,255,.08);
        color: var(--bx-muted);
        padding: 1px 5px;
        border-radius: 20px;
    }

    .pbm-tab-done {
        font-size: 10px;
        color: var(--bx-accent);
        font-weight: 700;
    }

    /* ── Scrollable body ── */
    .pbm-body {
        flex: 1;
        overflow-y: auto;
        padding: 20px 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

        .pbm-body::-webkit-scrollbar {
            width: 3px;
        }

        .pbm-body::-webkit-scrollbar-thumb {
            background: var(--bx-border);
            border-radius: 3px;
        }

    /* ── Sections ── */
    .pbm-section {
        display: flex;
        flex-direction: column;
        gap: 9px;
    }

    .pbm-section-lbl {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .9px;
        text-transform: uppercase;
        color: var(--bx-muted);
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .pbm-section-lbl::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--bx-border);
        }

    .pbm-text-block {
        font-size: 13px;
        color: var(--bx-text);
        line-height: 1.75;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 8px;
        padding: 12px 14px;
    }

    .pbm-deliv-block {
        display: flex;
        gap: 10px;
        padding: 12px 14px;
        background: rgba(0,198,162,.04);
        border: 1px solid rgba(0,198,162,.18);
        border-radius: 8px;
        font-size: 13px;
        color: var(--bx-text);
        line-height: 1.7;
    }

    .pbm-empty-hint {
        font-size: 13px;
        color: var(--bx-muted);
        font-style: italic;
    }

    /* Info grid */
    .pbm-info-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1px;
        background: var(--bx-border);
        border: 1px solid var(--bx-border);
        border-radius: 9px;
        overflow: hidden;
    }

    .pbm-ig-cell {
        background: var(--bx-surface2);
        padding: 10px 13px;
    }

    .pbm-ig-lbl {
        font-size: 11px;
        color: var(--bx-muted);
        font-weight: 700;
        letter-spacing: .5px;
        text-transform: uppercase;
        margin-bottom: 5px;
    }

    .pbm-ig-val {
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 800;
        letter-spacing: -.5px;
    }

    .pbm-ig-hr {
        font-size: 14px;
        color: var(--bx-accent);
    }
    /* Milestone list */
    .pbm-ms-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .pbm-ms-row {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 9px 12px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
    }

    .pbm-ms-num {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 1px solid;
        display: grid;
        place-items: center;
        font-size: 10px;
        font-weight: 800;
        flex-shrink: 0;
        font-family: var(--font-display);
    }

    .pbm-ms-title {
        flex: 1;
        font-size: 12px;
        font-weight: 500;
    }

    .pbm-ms-amount {
        font-size: 12px;
        font-weight: 700;
        color: var(--bx-accent);
        flex-shrink: 0;
    }

    /* File list */
    .pbm-file-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .pbm-file-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 13px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
        transition: var(--transition);
    }

        .pbm-file-row:hover {
            border-color: var(--bx-border-hi);
        }

    .pbm-file-ext {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        display: grid;
        place-items: center;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .3px;
        flex-shrink: 0;
    }

    .pbm-file-info {
        flex: 1;
        min-width: 0;
    }

    .pbm-file-name {
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pbm-file-meta {
        font-size: 10px;
        color: var(--bx-muted);
        margin-top: 1px;
    }

    .pbm-view-only-badge {
        font-size: 10px;
        color: var(--bx-muted);
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        padding: 3px 8px;
        border-radius: 5px;
        flex-shrink: 0;
    }

    /* ── Bid form ── */
    .pbm-form {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }



    .pbm-form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .pbm-field {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .pbm-label {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .2px;
        display: flex;
        align-items: center;
        gap: 5px;
        flex-wrap: wrap;
    }

    .pbm-label-hint {
        font-weight: 400;
        color: var(--bx-muted);
    }

    .pbm-required {
        color: var(--bx-red);
    }

    .pbm-input-wrap {
        display: flex;
        align-items: center;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--bx-border);
        border-radius: 8px;
        padding: 0 13px;
        transition: var(--transition);
    }

        .pbm-input-wrap:focus-within {
            border-color: rgba(0,198,162,.5);
            box-shadow: 0 0 0 3px rgba(0,198,162,.1);
        }

        .pbm-input-wrap.pbm-input-err {
            border-color: rgba(255,91,91,.5) !important;
            box-shadow: 0 0 0 3px rgba(255,91,91,.08) !important;
        }

    .pbm-input-pre, .pbm-input-suf {
        font-size: 13px;
        color: var(--bx-muted);
        flex-shrink: 0;
    }

    .pbm-input {
        flex: 1;
        background: none;
        border: none;
        outline: none;
        font-family: var(--font-body);
        font-size: 13px;
        color: var(--bx-text);
        padding: 11px 4px;
    }

        .pbm-input::placeholder {
            color: rgba(255,255,255,.2);
        }

    .pbm-plain-input {
        width: 100%;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--bx-border);
        border-radius: 8px;
        color: var(--bx-text);
        font-family: var(--font-body);
        font-size: 13px;
        padding: 11px 13px;
        outline: none;
        transition: var(--transition);
    }

        .pbm-plain-input:focus {
            border-color: rgba(0,198,162,.5);
            box-shadow: 0 0 0 3px rgba(0,198,162,.1);
        }

        .pbm-plain-input::placeholder {
            color: rgba(255,255,255,.2);
        }

    .pbm-textarea {
        width: 100%;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--bx-border);
        border-radius: 8px;
        color: var(--bx-text);
        font-family: var(--font-body);
        font-size: 13px;
        padding: 11px 13px;
        resize: vertical;
        outline: none;
        transition: var(--transition);
        min-height: 88px;
    }

        .pbm-textarea:focus {
            border-color: rgba(0,198,162,.5);
            box-shadow: 0 0 0 3px rgba(0,198,162,.1);
        }

        .pbm-textarea::placeholder {
            color: rgba(255,255,255,.2);
        }

        .pbm-textarea.pbm-input-err {
            border-color: rgba(255,91,91,.5) !important;
            box-shadow: 0 0 0 3px rgba(255,91,91,.08) !important;
        }

    .pbm-diff-hint {
        font-size: 12px;
        font-weight: 600;
        margin-top: 3px;
    }

    .pbm-hint {
        font-size: 12px;
        color: var(--bx-muted);
        margin-top: 2px;
    }

    .pbm-hint-right {
        text-align: right;
    }

    .pbm-err-txt {
        font-size: 11px;
        color: var(--bx-red);
    }


    /* Completeness */
    .pbm-completeness {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .pbm-comp-header {
        display: flex;
        justify-content: space-between;
    }

    .pbm-comp-lbl {
        font-size: 11px;
        color: var(--bx-muted);
    }

    .pbm-comp-status {
        font-size: 11px;
        font-weight: 700;
    }

    .pbm-comp-track {
        height: 4px;
        background: rgba(255,255,255,.06);
        border-radius: 4px;
        overflow: hidden;
    }

    .pbm-comp-fill {
        height: 100%;
        border-radius: 4px;
        transition: width .35s ease;
    }

    /* ── Footer ── */
    .pbm-footer {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 24px;
        border-top: 1px solid var(--bx-border);
        background: var(--bx-surface);
        gap: 12px;
    }

    .pbm-footer-chips {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 1;
        justify-content: center;
        flex-wrap: wrap;
    }

    .pbm-fchip {
        font-size: 10px;
        font-weight: 700;
        padding: 3px 9px;
        border-radius: 20px;
    }

    .pbm-fchip-green {
        background: rgba(0,198,162,.12);
        color: var(--bx-accent);
        border: 1px solid rgba(0,198,162,.3);
    }

    .pbm-fchip-blue {
        background: rgba(77,142,255,.12);
        color: var(--bx-blue);
        border: 1px solid rgba(77,142,255,.3);
    }

    .pbm-fchip-purple {
        background: rgba(167,139,250,.12);
        color: var(--bx-purple);
        border: 1px solid rgba(167,139,250,.3);
    }

    /* ── Buttons ── */
    .pbm-primary-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 22px;
        background: var(--bx-accent);
        border: none;
        border-radius: 9px;
        font-family: var(--font-body);
        font-size: 13px;
        font-weight: 700;
        color: #000;
        cursor: pointer;
        transition: var(--transition);
        white-space: nowrap;
    }

        .pbm-primary-btn:hover:not(:disabled) {
            background: #00ddb5;
            box-shadow: 0 0 20px rgba(0,198,162,.4);
            transform: translateY(-1px);
        }

        .pbm-primary-btn:disabled {
            opacity: .6;
            cursor: not-allowed;
        }

    .pbm-ghost-btn {
        padding: 10px 16px;
        background: none;
        border: 1px solid var(--bx-border);
        border-radius: 9px;
        font-family: var(--font-body);
        font-size: 13px;
        font-weight: 500;
        color: var(--bx-muted);
        cursor: pointer;
        transition: var(--transition);
    }

        .pbm-ghost-btn:hover {
            border-color: var(--bx-border-hi);
            color: var(--bx-text);
        }

    /* Spinner */
    .pbm-spinner {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 2px solid rgba(0,0,0,.2);
        border-top-color: #000;
        animation: pbmspin .65s linear infinite;
        flex-shrink: 0;
    }

    @keyframes pbmspin {
        to {
            transform: rotate(360deg);
        }
    }

    /* ── Toast ── */
    .pbm-toast {
        position: fixed;
        bottom: 28px;
        right: 28px;
        z-index: 1000;
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius);
        padding: 14px 18px;
        box-shadow: var(--shadow-lg);
        min-width: 290px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        animation: pbm-rise .25s ease;
    }

    .pbm-toast-green {
        border-color: rgba(0,198,162,.35);
    }

    .pbm-toast-red {
        border-color: rgba(255,91,91,.35);
    }

    /* ── Responsive ── */
    @media(max-width: 640px) {
        .pbm-modal {
            border-radius: 16px 16px 0 0;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            max-width: 100%;
            max-height: 95vh;
        }

        .pbm-info-grid {
            grid-template-columns: 1fr 1fr;
        }

        .pbm-form-row {
            grid-template-columns: 1fr;
        }
    }




    /* MODAL */
    .pf-modal {
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius-lg);
        width: 100%;
        max-width: 640px;
        max-height: 88vh;
        overflow-y: auto;
        box-shadow: var(--shadow-lg);
        animation: slideUp .25s cubic-bezier(.4,0,.2,1);
        display: grid;
        grid-template-rows: auto auto 1fr auto;
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(18px)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

    .pf-modal-header {
        padding: 22px 26px 18px;
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg,color-mix(in srgb,var(--cc) 14%,var(--bx-surface2) 86%) 0%,var(--bx-surface2) 100%);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .pf-modal-header-glow {
        position: absolute;
        right: -50px;
        top: -50px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: color-mix(in srgb,var(--cc) 18%,transparent 82%);
        filter: blur(40px);
    }

    .pf-modal-uid {
        font-size: 14px;
        font-family: monospace;
        color: var(--cc);
        letter-spacing: .8px;
        margin-bottom: 5px;
        opacity: .85;
    }

    .pf-modal-title {
        font-family: var(--font-display);
        font-size: 17px;
        font-weight: 800;
        letter-spacing: -.4px;
        margin-bottom: 6px;
        color: white;
    }

    .pf-modal-desc {
        font-size: 15px;
        color: whitesmoke;
        line-height: 1.7;
    }

    .pf-modal-tabs {
        display: flex;
        border-bottom: 1px solid var(--bx-border);
    }

    .pf-mtab {
        flex: 1;
        padding: 11px 14px;
        border: none;
        background: none;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 500;
        color: var(--bx-muted);
        cursor: pointer;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        transition: var(--transition);
    }

        .pf-mtab:hover {
            color: var(--bx-text);
        }

        .pf-mtab.active {
            color: var(--bx-accent);
            border-bottom-color: var(--bx-accent);
        }

    .pf-modal-body {
        padding: 20px 26px;
        min-height: 200px;
    }

    .pf-modal-info-grid {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 1px;
        background: var(--bx-border);
        border: 1px solid var(--bx-border);
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 16px;
    }

    .pf-mig-cell {
        background: var(--bx-surface2);
        padding: 10px 13px;
    }

    .pf-mig-lbl {
        font-size: 9px;
        color: var(--bx-muted);
        font-weight: 700;
        letter-spacing: .5px;
        text-transform: uppercase;
        margin-bottom: 4px;
    }

    .pf-mig-val {
        font-size: 13px;
        font-weight: 600;
    }

    .pf-modal-section-lbl {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .8px;
        text-transform: uppercase;
        color: var(--bx-muted);
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .pf-modal-section-lbl::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--bx-border);
        }

    .pf-modal-ms-row {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 8px 12px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 6px;
    }

    .pf-modal-ms-num {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1px solid;
        display: grid;
        place-items: center;
        font-size: 9px;
        font-weight: 800;
        flex-shrink: 0;
        font-family: var(--font-display);
    }

    .pf-modal-deliv {
        display: flex;
        gap: 10px;
        padding: 11px 14px;
        background: rgba(0,198,162,.04);
        border: 1px solid rgba(0,198,162,.18);
        border-radius: 8px;
    }

    .pf-modal-file {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 13px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
    }

    .pf-modal-footer {
        padding: 16px 26px;
        border-top: 1px solid var(--bx-border);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Bid form in modal */
    .pf-bid-field {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .pf-bid-label {
        font-size: 11px;
        font-weight: 600;
        color: rgba(232,234,240,.5);
    }

    .pf-bid-input-wrap {
        display: flex;
        align-items: center;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
        padding: 0 12px;
        transition: var(--transition);
    }

        .pf-bid-input-wrap:focus-within {
            border-color: rgba(77,142,255,.5);
            box-shadow: 0 0 0 3px rgba(77,142,255,.1);
        }

    .pf-field-err {
        border-color: rgba(255,91,91,.5) !important;
        box-shadow: 0 0 0 3px rgba(255,91,91,.08) !important;
    }

    .pf-bid-pre, .pf-bid-suf {
        font-size: 13px;
        color: var(--bx-muted);
        flex-shrink: 0;
    }

    .pf-bid-input {
        flex: 1;
        background: none;
        border: none;
        outline: none;
        font-family: var(--font-body);
        font-size: 13px;
        color: var(--bx-text);
        padding: 10px 4px;
    }

    .pf-bid-plain-input {
        width: 100%;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
        color: var(--bx-text);
        font-family: var(--font-body);
        font-size: 13px;
        padding: 10px 12px;
        outline: none;
        transition: var(--transition);
    }

        .pf-bid-plain-input:focus {
            border-color: rgba(77,142,255,.5);
            box-shadow: 0 0 0 3px rgba(77,142,255,.1);
        }

        .pf-bid-plain-input::placeholder {
            color: rgba(255,255,255,.2);
        }

    .pf-bid-textarea {
        width: 100%;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
        color: var(--bx-text);
        font-family: var(--font-body);
        font-size: 13px;
        padding: 10px 12px;
        resize: vertical;
        outline: none;
        transition: var(--transition);
    }

        .pf-bid-textarea:focus {
            border-color: rgba(77,142,255,.5);
            box-shadow: 0 0 0 3px rgba(77,142,255,.1);
        }

        .pf-bid-textarea::placeholder {
            color: rgba(255,255,255,.2);
        }

    .pf-bid-err {
        font-size: 11px;
        color: var(--bx-red);
    }

    /* Spinner */
    .pf-spinner {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 2px solid rgba(0,0,0,.2);
        border-top-color: #000;
        animation: pfspin2 .65s linear infinite;
        flex-shrink: 0;
    }

    @keyframes pfspin2 {
        to {
            transform: rotate(360deg)
        }
    }

    /* Toast */
    .pf-toast {
        position: fixed;
        bottom: 28px;
        right: 28px;
        z-index: 999;
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius);
        padding: 14px 18px;
        box-shadow: var(--shadow-lg);
        min-width: 290px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        animation: slideUp .25s ease;
    }

    .pf-toast-green {
        border-color: rgba(0,198,162,.35);
    }

    .pf-toast-red {
        border-color: rgba(255,91,91,.35);
    }

    .pf-toast-amber {
        border-color: rgba(245,166,35,.3);
    }

    .pf-toast-ic {
        font-size: 18px;
        flex-shrink: 0;
    }

    .pf-toast-title {
        display: block;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 2px;
    }

    .pf-toast-msg {
        font-size: 12px;
        color: var(--bx-muted);
    }

    /* Responsive */
    @media(max-width:900px) {
        .pf-shell {
            grid-template-columns: 1fr;
        }

        .pf-sidebar {
            position: static;
            height: auto;
            border-right: none;
            border-bottom: 1px solid var(--bx-border);
        }

        .pf-grid {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media(max-width:600px) {
        .pf-grid {
            grid-template-columns: 1fr;
        }

        .pf-modal-info-grid {
            grid-template-columns: 1fr 1fr;
        }
    }



    /*Engineer Dash */

    /* ─── BADGE ─── */
    .ed2-badge-eng {
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1.2px;
        background: linear-gradient(135deg,#4D8EFF,#A78BFA);
        color: #fff;
        padding: 3px 9px;
        border-radius: 4px;
        font-family: var(--font-display);
    }

    /* ─── PAGE SHELL ─── */
    .ed2-page {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* ─── HERO ─── */
    .ed2-hero {
        position: relative;
        overflow: hidden;
        padding: 36px 36px 32px;
        border-bottom: 1px solid var(--bx-border);
    }

    .ed2-hero-bg {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg,rgba(77,142,255,.07) 0%,rgba(167,139,250,.05) 50%,transparent 100%);
    }

    .ed2-hero-grid {
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
        background-size: 48px 48px;
        background-color: black;
    }

    .ed2-hero-inner {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
    }

    .ed2-hero-left {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .ed2-avatar-ring {
        position: relative;
        flex-shrink: 0;
    }

    .ed2-avatar {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: linear-gradient(135deg,var(--bx-blue),var(--bx-purple));
        display: grid;
        place-items: center;
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 22px;
        color: #fff;
        border: 3px solid rgba(77,142,255,.3);
        box-shadow: 0 0 28px rgba(77,142,255,.25);
    }

    .ed2-avatar-online {
        position: absolute;
        bottom: 2px;
        right: 2px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: var(--bx-accent);
        border: 2px solid var(--bx-bg);
        box-shadow: 0 0 8px rgba(0,198,162,.6);
    }

    .ed2-hero-name {
        font-family: var(--font-display);
        font-size: 22px;
        font-weight: 800;
        letter-spacing: -.5px;
        margin-bottom: 6px;
    }

    .ed2-hero-disc {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
    }

    .ed2-disc-chip {
        font-size: 11px;
        font-weight: 700;
        background: rgba(77,142,255,.14);
        color: var(--bx-blue);
        border: 1px solid rgba(77,142,255,.3);
        padding: 3px 10px;
        border-radius: 20px;
    }

    .ed2-hero-loc {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        color: var(--bx-muted);
    }

    .ed2-skill-row {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    .ed2-skill-tag {
        font-size: 10px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--bx-border);
        border-radius: 20px;
        padding: 3px 9px;
        color: var(--bx-muted);
    }

    .ed2-hero-kpis {
        display: flex;
        align-items: center;
        gap: 0;
        background: rgba(255,255,255,.03);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius);
        padding: 14px 22px;
    }

    .ed2-kpi {
        text-align: center;
        padding: 0 20px;
    }

    .ed2-kpi-val {
        font-family: var(--font-display);
        font-size: 22px;
        font-weight: 800;
        letter-spacing: -1px;
        line-height: 1;
    }

    .ed2-kpi-lbl {
        font-size: 10px;
        color: var(--bx-muted);
        margin-top: 3px;
        font-weight: 500;
    }

    .ed2-kpi-sep {
        width: 1px;
        height: 36px;
        background: var(--bx-border);
    }

    /* ─── STATS ROW ─── */
    .ed2-stats {
        display: grid;
        grid-template-columns: repeat(5,1fr);
        gap: 1px;
        background: var(--bx-border);
        border-bottom: 1px solid var(--bx-border);
    }

    .ed2-stat-card {
        background: var(--bx-surface);
        padding: 18px 20px;
        display: flex;
        align-items: center;
        gap: 13px;
        transition: var(--transition);
        cursor: default;
    }

        .ed2-stat-card:hover {
            background: var(--bx-surface2);
        }

    .ed2-stat-icon-wrap {
        width: 38px;
        height: 38px;
        border-radius: 9px;
        display: grid;
        place-items: center;
        font-size: 16px;
        flex-shrink: 0;
        transition: var(--transition);
    }

    .ed2-stat-card:hover .ed2-stat-icon-wrap {
        box-shadow: 0 0 14px color-mix(in srgb,var(--sc) 35%,transparent 65%);
    }

    .ed2-stat-val {
        font-family: var(--font-display);
        font-size: 20px;
        font-weight: 800;
        letter-spacing: -.8px;
        line-height: 1;
    }

    .ed2-stat-lbl {
        font-size: 11px;
        color: var(--bx-muted);
        margin-top: 2px;
    }

    .ed2-stat-sub {
        font-size: 10px;
        color: var(--bx-muted);
        margin-top: 1px;
        opacity: .7;
    }

    /* ─── CONTENT GRID ─── */
    .ed2-content {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 0;
        align-items: start;
    }

    .ed2-col-main {
        padding: 24px 28px;
        border-right: 1px solid var(--bx-border);
        min-height: 600px;
    }

    .ed2-col-side {
        padding: 24px 20px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        position: sticky;
        top: 68px;
        max-height: calc(100vh - 68px);
    }

    /* ─── TABS ─── */
    .ed2-tabs-bar {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        border-bottom: 1px solid var(--bx-border);
        padding-bottom: 0;
        gap: 2px;
        background: var(--bx-surface);
        padding: 10px;
        border-radius: 12px;
    }

    .ed2-tab {
        padding: 9px 16px;
        border: none;
        background: none;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 500;
        color: var(--bx-muted);
        cursor: pointer;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        transition: var(--transition);
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }

        .ed2-tab:hover {
            color: var(--bx-text);
        }

        .ed2-tab.active {
            color: var(--bx-text);
            border-bottom-color: var(--bx-blue);
        }

    .ed2-tab-spacer {
        flex: 1;
    }

    .ed2-tab-cnt {
        font-size: 10px;
        font-weight: 700;
        padding: 1px 6px;
        border-radius: 20px;
        background: rgba(255,255,255,.08);
        color: var(--bx-muted);
    }

    .ed2-cnt-accent {
        background: rgba(0,198,162,.15) !important;
        color: var(--bx-accent) !important;
    }

    .ed2-cnt-blue {
        background: rgba(77,142,255,.15) !important;
        color: var(--bx-blue) !important;
    }

    .ed2-sort-sel {
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius-sm);
        color: var(--bx-text);
        font-family: var(--font-body);
        font-size: 11px;
        padding: 5px 10px;
        outline: none;
        cursor: pointer;
        margin-bottom: 2px;
    }

    /* ─── EMPTY ─── */
    .ed2-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 72px 24px;
        text-align: center;
    }

    .ed2-empty-rings {
        position: relative;
        width: 90px;
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 4px;
    }

    .ed2-er {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 3px solid rgba(77, 142, 255, .20);
    }

        .ed2-er.ed2-er1 {
            animation: edspin 10s linear infinite;
        }

        .ed2-er.ed2-er2 {
            inset: 15px;
            border-color: rgba(0, 198, 162, .17);
            animation: edspin 7s linear infinite reverse;
        }

    @keyframes edspin {
        to {
            transform: rotate(360deg)
        }
    }

    .ed2-empty-ic {
        font-size: 22px;
        opacity: .22;
        position: relative;
        z-index: 1;
    }

    .ed2-empty-title {
        font-family: var(--font-display);
        font-size: 16px;
        font-weight: 700;
        color: black;
    }

    .ed2-empty-sub {
        font-size: 13px;
        color: black;
    }

    /* ─── BID LIST ─── */
    .ed2-bid-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .ed2-bid-card {
        display: flex;
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius);
        overflow: hidden;
        transition: border-color .2s,box-shadow .2s,transform .2s;
    }

        .ed2-bid-card:hover {
            border-color: color-mix(in srgb,var(--cc) 45%,transparent 55%);
            box-shadow: 0 6px 28px rgba(0,0,0,.38),0 0 0 1px color-mix(in srgb,var(--cc) 28%,transparent 72%);
            transform: translateY(-1px);
        }

    .ed2-bid-expanded {
        border-color: var(--bcc) !important;
        box-shadow: 0 0 0 1px var(--bcc),0 10px 40px rgba(0,0,0,.45) !important;
    }

    .ed2-bid-stripe {
        width: 4px;
        flex-shrink: 0;
        background: linear-gradient(180deg,color-mix(in srgb,var(--cc) 75%,white 25%) 0%,var(--cc) 50%,color-mix(in srgb,var(--cc) 55%,black 45%) 100%);
        box-shadow: 2px 0 12px color-mix(in srgb,var(--cc) 35%,transparent 65%);
    }

    .ed2-bid-body {
        flex: 1;
        padding: 16px 20px;
        min-width: 0;
        background: linear-gradient(135deg,color-mix(in srgb,var(--cc) 4%,var(--bx-surface) 96%) 0%,var(--bx-surface) 60%);
    }

    .ed2-bid-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 12px;
    }

    .ed2-bid-meta-top {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        margin-bottom: 5px;
    }

    .ed2-bid-uid {
        font-size: 16px;
        font-family: monospace;
        color: var(--bcc);
        letter-spacing: .8px;
        opacity: .85;
    }

    .ed2-bid-cat-chip {
        font-size: 10px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 20px;
        border: 1px solid;
    }

    .ed2-urgent-tag {
        font-size: 9px;
        font-weight: 800;
        color: var(--bx-amber);
        background: rgba(245,166,35,.12);
        border: 1px solid rgba(245,166,35,.3);
        padding: 2px 7px;
        border-radius: 4px;
        letter-spacing: .3px;
    }

    .ed2-bid-title {
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -.3px;
        line-height: 1.3;
    }

    .ed2-bid-price-block {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
        flex-shrink: 0;
    }

    .ed2-bid-price {
        font-size: 20px;
        font-weight: 800;
        color: var(--bx-accent);
        letter-spacing: -1px;
    }

    .ed2-bid-vs {
        font-size: 11px;
        font-weight: 600;
    }

    /* Status chips */
    .ed2-status-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 9px;
        border-radius: 20px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .3px;
        text-transform: uppercase;
    }

        .ed2-status-chip::before {
            content: '';
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: currentColor;
            flex-shrink: 0;
        }

    .chip-draft {
        background: rgba(92,96,112,.18);
        color: #8892A4;
        border: 1px solid rgba(92,96,112,.28);
    }

    .chip-submitted {
        background: rgba(77,142,255,.14);
        color: var(--bx-blue);
        border: 1px solid rgba(77,142,255,.32);
    }

    .chip-shortlisted {
        background: rgba(0,198,162,.14);
        color: var(--bx-accent);
        border: 1px solid rgba(0,198,162,.32);
    }

    .chip-accepted {
        background: rgba(0,198,162,.22);
        color: var(--bx-accent);
        border: 1px solid rgba(0,198,162,.45);
    }

    .chip-rejected {
        background: rgba(255,91,91,.12);
        color: var(--bx-red);
        border: 1px solid rgba(255,91,91,.28);
    }

    /* Status banners */
    .ed2-status-banner {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 9px 12px;
        border-radius: 7px;
        font-size: 12px;
        margin-bottom: 12px;
        font-weight: 500;
    }

    .ed2-banner-shortlisted {
        background: rgba(0,198,162,.08);
        border: 1px solid rgba(0,198,162,.28);
        color: var(--bx-accent);
    }

    .ed2-banner-accepted {
        background: linear-gradient(135deg,rgba(0,198,162,.12),rgba(77,142,255,.08));
        border: 1px solid rgba(0,198,162,.35);
        color: var(--bx-accent);
    }

    .ed2-banner-rejected {
        background: rgba(255,91,91,.07);
        border: 1px solid rgba(255,91,91,.22);
        color: var(--bx-red);
    }

    /* Metrics */
    .ed2-bid-metrics {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
        gap: 1px;
        background: var(--bx-border);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
        overflow: hidden;
        margin-bottom: 10px;
        text-align: center;
    }

    .ed2-bm {
        background: var(--bx-surface2);
        padding: 8px 10px;
    }

    .ed2-bm-lbl {
        font-size: 9px;
        color: var(--bx-muted);
        font-weight: 600;
        letter-spacing: .4px;
        text-transform: uppercase;
        margin-bottom: 3px;
    }

    .ed2-bm-val {
        font-size: 13px;
        font-weight: 600;
    }

    .ed2-bm-red .ed2-bm-val {
        color: var(--bx-red);
    }

    /* Tools */
    .ed2-tools-row {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 12px;
        color: var(--bx-muted);
        margin-bottom: 8px;
    }

    .ed2-cover-preview {
        font-size: 14px;
        color: var(--bx-muted);
        line-height: 1.65;
        border-left: 2px solid var(--bx-border);
        padding-left: 10px;
        margin-bottom: 8px;
    }

    /* Expanded sections */
    .ed2-exp-section {
        margin-bottom: 14px;
    }

    .ed2-exp-label {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .9px;
        text-transform: uppercase;
        color: var(--bx-muted);
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .ed2-exp-label::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--bx-border);
        }

    .ed2-exp-text {
        font-size: 12px;
        color: var(--bx-text);
        line-height: 1.7;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
        padding: 10px 13px;
    }

    .ed2-ms-grid {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .ed2-ms-card {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
    }

    .ed2-ms-num {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: rgba(77,142,255,.14);
        border: 1px solid rgba(77,142,255,.3);
        color: var(--bx-blue);
        font-size: 10px;
        font-weight: 800;
        display: grid;
        place-items: center;
        flex-shrink: 0;
        font-family: var(--font-display);
    }

    .ed2-ms-info {
        flex: 1;
        min-width: 0;
    }

    .ed2-ms-title {
        font-size: 12px;
        font-weight: 500;
    }

    .ed2-ms-deliv {
        font-size: 10px;
        color: var(--bx-muted);
        margin-top: 1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ed2-ms-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        flex-shrink: 0;
    }

    .ed2-ms-days {
        font-size: 11px;
        color: var(--bx-muted);
    }

    .ed2-ms-price {
        font-size: 12px;
        font-weight: 700;
        color: var(--bx-accent);
    }

    .ed2-ms-total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 9px 12px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 6px;
        margin-top: 6px;
    }

    .ed2-brief-box {
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
        padding: 12px 14px;
    }

    .ed2-brief-deliv {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 12px;
        color: var(--bx-text);
        line-height: 1.65;
        margin-top: 6px;
        padding: 8px 10px;
        background: rgba(0,198,162,.04);
        border: 1px solid rgba(0,198,162,.18);
        border-radius: 6px;
    }

    /* Actions */
    .ed2-bid-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        padding-top: 10px;
        border-top: 1px solid var(--bx-border);
        margin-top: 6px;
    }

    .ed2-expand-btn {
        background: none;
        border: none;
        font-family: var(--font-body);
        font-size: 11px;
        color: var(--bx-muted);
        cursor: pointer;
        flex: 1;
        text-align: left;
        transition: color .15s;
    }

        .ed2-expand-btn:hover {
            color: var(--bx-text);
        }

    .ed2-action-btns {
        display: flex;
        gap: 7px;
    }

    .ed2-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        border-radius: 6px;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        border: 1px solid transparent;
        transition: var(--transition);
    }

    .ed2-btn-primary {
        background: var(--bx-accent);
        color: #000;
        border-color: var(--bx-accent);
    }

        .ed2-btn-primary:hover {
            background: #00ddb5;
            box-shadow: 0 0 14px rgba(0,198,162,.35);
        }

    .ed2-btn-ghost {
        background: var(--bx-surface2);
        color: var(--bx-text);
        border-color: var(--bx-border);
    }

        .ed2-btn-ghost:hover {
            border-color: var(--bx-border-hi);
        }

    .ed2-btn-shortlisted {
        background: rgba(0,198,162,.12);
        color: var(--bx-accent);
        border-color: rgba(0,198,162,.3);
    }

    .ed2-btn-accepted {
        background: linear-gradient(135deg,rgba(0,198,162,.18),rgba(77,142,255,.14));
        color: var(--bx-accent);
        border-color: rgba(0,198,162,.4);
    }

        .ed2-btn-accepted:hover {
            box-shadow: 0 0 14px rgba(0,198,162,.25);
        }

    /* ─── SIDEBAR ─── */
    .ed2-side-card {
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius);
    }

    .ed2-side-card-head {
        padding: 14px 16px 12px;
        border-bottom: 1px solid var(--bx-border);
    }

    .ed2-side-title {
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: -.1px;
    }

    /* Earnings */
    .ed2-earnings-card {
        background: linear-gradient(135deg,rgba(0,198,162,1.07),var(--bx-surface));
        border-color: rgba(0,198,162,.22);
    }

    .ed2-earnings-body {
        padding: 16px 18px;
    }

    .ed2-earn-main {
        margin-bottom: 14px;
    }

    .ed2-earn-lbl {
        font-size: 10px;
        color: var(--bx-muted);
        font-weight: 600;
        letter-spacing: .5px;
        text-transform: uppercase;
        margin-bottom: 4px;
    }

    .ed2-earn-val {
        font-size: 28px;
        font-weight: 800;
        letter-spacing: -1.5px;
        color: var(--bx-accent);
    }

    .ed2-earn-row {
        display: flex;
        align-items: center;
        gap: 0;
    }

    .ed2-earn-item {
        flex: 1;
        padding: 8px 0;
    }

    .ed2-earn-div {
        width: 1px;
        height: 32px;
        background: var(--bx-border);
    }

    .ed2-earn-item-lbl {
        font-size: 9px;
        color: var(--bx-muted);
        font-weight: 600;
        letter-spacing: .4px;
        text-transform: uppercase;
        margin-bottom: 3px;
    }

    .ed2-earn-item-val {
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 800;
        letter-spacing: -.5px;
    }

    .ed2-earn-bar-wrap {
        padding: 12px 18px 16px;
        border-top: 1px solid rgba(0,198,162,.15);
    }

    .ed2-earn-bar-lbl {
        display: flex;
        justify-content: space-between;
        margin-bottom: 7px;
    }

    .ed2-earn-track {
        height: 4px;
        background: rgba(255,255,255,.07);
        border-radius: 4px;
        overflow: hidden;
    }

    .ed2-earn-fill {
        height: 100%;
        border-radius: 4px;
        background: linear-gradient(90deg,var(--bx-accent),var(--bx-blue));
        box-shadow: 0 0 8px rgba(0,198,162,.4);
        transition: width .5s ease;
    }

    /* Timeline */
    .ed2-timeline {
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .ed2-tl-row {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        padding-bottom: 14px;
        position: relative;
    }

        .ed2-tl-row:last-child {
            padding-bottom: 0;
        }

        .ed2-tl-row::before {
            content: '';
            position: absolute;
            left: 5px;
            top: 14px;
            bottom: 0;
            width: 1px;
            background: var(--bx-border);
        }

        .ed2-tl-row:last-child::before {
            display: none;
        }

    .ed2-tl-dot {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        flex-shrink: 0;
        margin-top: 3px;
    }

    .ed2-tl-content {
        flex: 1;
        min-width: 0;
    }

    .ed2-tl-text {
        font-size: 12px;
        color: var(--bx-text);
        line-height: 1.5;
    }

    .ed2-tl-time {
        font-size: 10px;
        color: var(--bx-muted);
        margin-top: 2px;
    }

    /* Tips */
    .ed2-tips {
        padding: 12px 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .ed2-tip-row {
        display: flex;
        align-items: flex-start;
        gap: 9px;
    }

    .ed2-tip-ic {
        font-size: 13px;
        flex-shrink: 0;
        margin-top: 1px;
    }

    .ed2-tip-txt {
        font-size: 12px;
        color: var(--bx-muted);
        line-height: 1.55;
    }

    /* ─── MODAL ─── */
    .ed2-modal {
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius-lg);
        width: 100%;
        max-width: 580px;
        max-height: 88vh;
        overflow-y: auto;
        box-shadow: var(--shadow-lg);
        animation: slideUp .24s cubic-bezier(.4,0,.2,1);
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(14px)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

    .ed2-modal-header {
        padding: 20px 24px 16px;
        border-bottom: 1px solid var(--bx-border);
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        background: linear-gradient(135deg,rgba(77,142,255,.07),transparent);
    }

    .ed2-modal-uid {
        font-size: 10px;
        font-family: monospace;
        color: var(--bx-blue);
        letter-spacing: .8px;
        margin-bottom: 4px;
    }

    .ed2-modal-title {
        font-family: var(--font-display);
        font-size: 16px;
        font-weight: 800;
        letter-spacing: -.3px;
    }

    .ed2-modal-body {
        padding: 20px 24px;
    }

    .ed2-modal-footer {
        padding: 14px 24px;
        border-top: 1px solid var(--bx-border);
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }

    .ed2-edit-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .ed2-edit-row {
        display: contents;
    }

    .ed2-edit-field {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .ed2-edit-lbl {
        font-size: 11px;
        font-weight: 600;
        color: rgba(232,234,240,.5);
    }

    .ed2-edit-wrap {
        display: flex;
        align-items: center;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
        padding: 0 12px;
        transition: var(--transition);
    }

        .ed2-edit-wrap:focus-within {
            border-color: rgba(77,142,255,.5);
            box-shadow: 0 0 0 3px rgba(77,142,255,.1);
        }

    .ed2-edit-pre, .ed2-edit-suf {
        font-size: 13px;
        color: var(--bx-muted);
        flex-shrink: 0;
    }

    .ed2-edit-input {
        flex: 1;
        background: none;
        border: none;
        outline: none;
        font-family: var(--font-body);
        font-size: 13px;
        color: var(--bx-text);
        padding: 10px 4px;
    }

    .ed2-edit-plain {
        width: 100%;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
        color: var(--bx-text);
        font-family: var(--font-body);
        font-size: 13px;
        padding: 10px 12px;
        outline: none;
        transition: var(--transition);
    }

        .ed2-edit-plain:focus {
            border-color: rgba(77,142,255,.5);
            box-shadow: 0 0 0 3px rgba(77,142,255,.1);
        }

    .ed2-edit-textarea {
        width: 100%;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
        color: var(--bx-text);
        font-family: var(--font-body);
        font-size: 13px;
        padding: 10px 12px;
        resize: vertical;
        outline: none;
        transition: var(--transition);
    }

        .ed2-edit-textarea:focus {
            border-color: rgba(77,142,255,.5);
            box-shadow: 0 0 0 3px rgba(77,142,255,.1);
        }

    .ph-empty {
        position: relative;
        padding: 68px 40px;
        text-align: center;
        background: linear-gradient(160deg, rgba(77,142,255,.05) 0%, rgba(167,139,250,.04) 50%, transparent 100%);
        border: 1px solid var(--bx-border);
        border-radius: 16px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .ph-empty-rings {
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    .ph-ring {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        border: 1px solid rgba(77,142,255,.1);
        animation: phring 4s ease-in-out infinite;
    }

    .ph-ring1 {
        width: 180px;
        height: 180px;
    }

    .ph-ring2 {
        width: 130px;
        height: 130px;
        border-color: rgba(0,198,162,.1);
        animation-delay: .5s;
    }

    .ph-ring3 {
        width: 80px;
        height: 80px;
        border-color: rgba(167,139,250,.12);
        animation-delay: 1s;
    }

    @keyframes phring {
        0%,100% {
            opacity: .3;
            transform: translate(-50%,-50%) scale(1)
        }

        50% {
            opacity: .9;
            transform: translate(-50%,-50%) scale(1.07)
        }
    }

    .ph-empty-icon {
        font-size: 34px;
        position: relative;
        z-index: 1;
        opacity: .45;
        margin-bottom: 16px;
    }

    .ph-empty-title {
        font-family: var(--font-display);
        font-size: 17px;
        font-weight: 800;
        letter-spacing: -.3px;
        margin-bottom: 10px;
        position: relative;
        z-index: 1;
    }

    .ph-empty-sub {
        font-size: 13px;
        color: var(--bx-muted);
        line-height: 1.7;
        max-width: 360px;
        margin-bottom: 22px;
        position: relative;
        z-index: 1;
    }

    .ph-start-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 10px 22px;
        background: var(--bx-accent);
        border: none;
        border-radius: 8px;
        font-family: var(--font-body);
        font-size: 13px;
        font-weight: 700;
        color: #000;
        cursor: pointer;
        transition: var(--transition);
        position: relative;
        z-index: 1;
    }

        .ph-start-btn:hover {
            background: #00ddb5;
            box-shadow: 0 0 20px rgba(0,198,162,.4);
            transform: translateY(-1px);
        }

    /* ── Header ── */
    .ph-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 4px;
    }

    .ph-header-title {
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: -.2px;
        margin-bottom: 3px;
    }

    .ph-header-sub {
        font-size: 11px;
        color: var(--bx-muted);
    }

    .ph-new-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        background: rgba(0,198,162,.12);
        border: 1px solid rgba(0,198,162,.3);
        border-radius: 7px;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 700;
        color: var(--bx-accent);
        cursor: pointer;
        transition: var(--transition);
        white-space: nowrap;
        flex-shrink: 0;
    }

        .ph-new-btn:hover {
            background: rgba(0,198,162,.2);
            box-shadow: 0 0 12px rgba(0,198,162,.25);
        }

    /* ── Overall bar ── */
    .ph-overall-bar-card {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 13px 16px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 10px;
        margin-bottom: 4px;
    }

    .ph-ob-left {
        flex: 1;
        min-width: 0;
    }

    .ph-ob-label {
        font-size: 11px;
        color: var(--bx-muted);
        font-weight: 600;
        margin-bottom: 7px;
        letter-spacing: .3px;
    }

    .ph-ob-track {
        position: relative;
        height: 7px;
        background: rgba(255,255,255,.06);
        border-radius: 7px;
        overflow: visible;
    }

    .ph-ob-fill {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        border-radius: 7px;
        background: linear-gradient(90deg, var(--bx-accent), var(--bx-blue));
        transition: width .6s ease;
        overflow: hidden;
    }

    .ph-ob-glow {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        border-radius: 7px;
        background: linear-gradient(90deg, rgba(0,198,162,.4), rgba(77,142,255,.4));
        filter: blur(4px);
        transition: width .6s ease;
    }

    .ph-ob-tick {
        position: absolute;
        top: -2px;
        bottom: -2px;
        width: 2px;
        background: rgba(255,255,255,.15);
        border-radius: 2px;
        transform: translateX(-50%);
    }

    .ph-ob-tick-done {
        background: var(--bx-accent);
        box-shadow: 0 0 5px rgba(0,198,162,.5);
    }

    .ph-ob-pct {
        font-family: var(--font-display);
        font-size: 24px;
        font-weight: 800;
        color: var(--bx-accent);
        letter-spacing: -1px;
        flex-shrink: 0;
    }

    /* ── Card list ── */
    .ph-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* ── Individual card ── */
    .ph-card {
        display: flex;
        flex-direction: column;
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        border-radius: 12px;
        overflow: hidden;
        transition: border-color .2s, box-shadow .2s;
    }

        .ph-card:hover {
            border-color: color-mix(in srgb, var(--phc) 45%, transparent 55%);
        }

    .ph-card-open {
        border-color: var(--phc) !important;
        box-shadow: 0 0 0 1px var(--phc), 0 8px 32px rgba(0,0,0,.35) !important;
    }

    .ph-card-stripe {
        height: 3px;
        flex-shrink: 0;
        background: linear-gradient(90deg, var(--phc), color-mix(in srgb, var(--phc) 40%, transparent 60%));
        box-shadow: 0 1px 8px color-mix(in srgb, var(--phc) 35%, transparent 65%);
    }

    /* ── Card header (clickable) ── */
    .ph-card-header {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 18px;
        background: none;
        border: none;
        cursor: pointer;
        transition: background .15s;
    }

        .ph-card-header:hover {
            background: rgba(255,255,255,.02);
        }

    .ph-card-open .ph-card-header {
        background: linear-gradient(135deg, color-mix(in srgb, var(--phc) 6%, var(--bx-surface) 94%) 0%, var(--bx-surface) 100%);
    }

    .ph-card-left {
        display: flex;
        align-items: center;
        gap: 13px;
        text-align: left;
    }

    .ph-card-num {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 1.5px solid;
        display: grid;
        place-items: center;
        font-size: 14px;
        font-weight: 800;
        flex-shrink: 0;
        letter-spacing: -.5px;
    }

    .ph-card-type {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 700;
        color: var(--bx-text);
        margin-bottom: 4px;
        flex-wrap: wrap;
    }

    .ph-type-pill {
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .5px;
        text-transform: uppercase;
        padding: 2px 7px;
        border-radius: 20px;
        border: 1px solid;
    }

    .ph-card-date {
        font-size: 11px;
        color: var(--bx-muted);
    }

    .ph-card-right {
        display: flex;
        align-items: center;
        gap: 7px;
        flex-shrink: 0;
    }

    .ph-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 10px;
        font-weight: 600;
        padding: 3px 9px;
        border-radius: 20px;
        white-space: nowrap;
    }

    .ph-badge-blue {
        background: rgba(77,142,255,.12);
        color: var(--bx-blue);
        border: 1px solid rgba(77,142,255,.25);
    }

    .ph-badge-purple {
        background: rgba(167,139,250,.12);
        color: var(--bx-purple);
        border: 1px solid rgba(167,139,250,.25);
    }

    .ph-badge-green {
        background: rgba(0,198,162,.12);
        color: var(--bx-accent);
        border: 1px solid rgba(0,198,162,.25);
    }

    .ph-chevron {
        color: var(--bx-muted);
        transition: transform .25s cubic-bezier(.4,0,.2,1);
        display: flex;
        align-items: center;
    }

    .ph-chevron-open {
        transform: rotate(180deg);
        color: var(--bx-text);
    }

    /* ── Card expanded body ── */
    .ph-card-body {
        padding: 18px 20px;
        border-top: 1px solid var(--bx-border);
        background: linear-gradient(180deg, rgba(255,255,255,.01) 0%, transparent 100%);
        display: flex;
        flex-direction: column;
        gap: 18px;
        animation: phexpand .22s ease;
    }

    @keyframes phexpand {
        from {
            opacity: 0;
            transform: translateY(-6px)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

    /* ── Blocks inside expanded ── */
    .ph-block {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .ph-block-label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .9px;
        text-transform: uppercase;
    }

        .ph-block-label::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--bx-border);
        }

    .ph-block-text {
        font-size: 13px;
        color: var(--bx-text);
        line-height: 1.75;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 8px;
        padding: 12px 14px;
    }

    /* ── Milestone list ── */
    .ph-ms-list {
        display: flex;
        flex-direction: column;
        gap: 9px;
    }

    .ph-ms-row {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .ph-ms-row-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .ph-ms-name {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 500;
        color: var(--bx-text);
    }

    .ph-ms-pct {
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 800;
        letter-spacing: -.5px;
        flex-shrink: 0;
    }

    .ph-ms-track {
        height: 5px;
        background: rgba(255,255,255,.06);
        border-radius: 5px;
        overflow: hidden;
    }

    .ph-ms-fill {
        height: 100%;
        border-radius: 5px;
        transition: width .5s ease;
    }

    /* ── File grid ── */
    .ph-file-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
    }

    .ph-file-chip {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 7px 12px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 8px;
        transition: var(--transition);
    }

        .ph-file-chip:hover {
            border-color: var(--bx-border-hi);
        }

    .ph-file-ext {
        width: 26px;
        height: 26px;
        border-radius: 5px;
        display: grid;
        place-items: center;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: .3px;
        flex-shrink: 0;
    }

    .ph-file-name {
        font-size: 12px;
        font-weight: 500;
        color: var(--bx-text);
        max-width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ext colours (local — safe to duplicate) */
    .ext-rvt {
        background: rgba(77,142,255,.2);
        color: var(--bx-blue);
    }

    .ext-ifc {
        background: rgba(0,198,162,.2);
        color: var(--bx-accent);
    }

    .ext-dwg, .ext-dxf {
        background: rgba(245,166,35,.2);
        color: var(--bx-amber);
    }

    .ext-pdf {
        background: rgba(255,91,91,.2);
        color: var(--bx-red);
    }

    .ext-nwc, .ext-nwd {
        background: rgba(167,139,250,.2);
        color: var(--bx-purple);
    }

    .ext-other {
        background: var(--bx-surface);
        color: var(--bx-muted);
    }

    /* ── Link buttons ── */
    .ph-links-row {
        display: flex;
        gap: 9px;
        flex-wrap: wrap;
    }

    .ph-link-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 9px 16px;
        border-radius: 8px;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        transition: var(--transition);
    }

    .ph-link-autodesk {
        background: rgba(0,198,162,.12);
        color: var(--bx-accent);
        border: 1px solid rgba(0,198,162,.3);
    }

        .ph-link-autodesk:hover {
            background: rgba(0,198,162,.22);
            box-shadow: 0 0 12px rgba(0,198,162,.3);
        }

    .ph-link-extra {
        background: rgba(77,142,255,.1);
        color: var(--bx-blue);
        border: 1px solid rgba(77,142,255,.25);
    }

        .ph-link-extra:hover {
            background: rgba(77,142,255,.18);
            box-shadow: 0 0 12px rgba(77,142,255,.25);
        }

    .auto-desk-link {
        color: whitesmoke;
    }
    /* ─── MODAL progress ─── */
    /* ─── TOAST ─── */
    .ed2-toast {
        position: fixed;
        bottom: 28px;
        right: 28px;
        z-index: 999;
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius);
        padding: 14px 18px;
        box-shadow: var(--shadow-lg);
        min-width: 290px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        animation: slideUp .25s ease;
    }

    .ed2-toast-green {
        border-color: rgba(0,198,162,.35);
    }

    .ed2-toast-red {
        border-color: rgba(255,91,91,.35);
    }

    .ed2-toast-amber {
        border-color: rgba(245,166,35,.3);
    }

    /* ─── RESPONSIVE ─── */
    @media(max-width:1100px) {
        .ed2-stats {
            grid-template-columns: repeat(3,1fr);
        }

        .ed2-hero-kpis {
            flex-wrap: wrap;
            gap: 8px;
        }
    }

    @media(max-width:900px) {
        .ed2-content {
            grid-template-columns: 1fr;
        }

        .ed2-col-side {
            position: static;
            max-height: none;
            border-top: 1px solid var(--bx-border);
        }

        .ed2-col-main {
            border-right: none;
        }

        .ed2-stats {
            grid-template-columns: repeat(2,1fr);
        }
    }

    @media(max-width:600px) {
        .ed2-hero-inner {
            flex-direction: column;
            align-items: flex-start;
        }

        .ed2-stats {
            grid-template-columns: 1fr 1fr;
        }

        .ed2-bid-header {
            flex-direction: column;
        }
    }




    .feed-subtitle {
        /* Scale down slightly smaller than the main heading */
        font-size: 0.875rem; /* ~14px on a 16px root */
        /* Mute the color by using a dark gray instead of solid black */
        color: #6c757d;
        /* Slightly tighten letter spacing for better readability */
        letter-spacing: 0.02em;
        /* Reduce line height to keep it snug under the main title */
        line-height: 1.25;
    }


    /* ── ROLE BADGE ── */
    .ep-role-badge {
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1.2px;
        background: linear-gradient(135deg,#4D8EFF,#A78BFA);
        color: #fff;
        padding: 3px 9px;
        border-radius: 4px;
        font-family: var(--font-display);
    }

    /* ── PAGE ── */
    .ep-page {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* ── HERO ── */




    .ep-avatar {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        background: linear-gradient(135deg,var(--bx-blue),var(--bx-purple));
        display: grid;
        place-items: center;
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 26px;
        color: #fff;
        border: 3px solid var(--bx-surface);
        box-shadow: 0 0 0 2px rgba(77,142,255,.35),0 0 24px rgba(77,142,255,.2);
    }










    /* ── CONTENT GRID ── */
    .ep-content {
        display: grid;
        grid-template-columns: 1fr 350px;
        gap: 0;
        align-items: start;
    }

    .ep-col-main {
        padding: 24px 28px;
        border-right: 1px solid var(--bx-border);
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .ep-col-side {
        padding: 20px 18px 20px 0px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        position: sticky;
        top: 68px;
        max-height: calc(100vh - 68px);
    }

    /* ── CARDS ── */
    .ep-card {
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius);
    }

    .ep-card-head {
        padding: 14px 18px 12px;
        border-bottom: 1px solid var(--bx-border);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .ep-card-title {
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: -.1px;
    }

    .ep-card-body {
        padding: 18px;
    }

    .ep-edit-link {
        background: none;
        border: none;
        font-family: var(--font-body);
        font-size: 15px;
        color: var(--bx-muted);
        cursor: pointer;
        transition: color .15s;
    }

        .ep-edit-link:hover {
            color: var(--bx-accent);
        }

    .ep-add-section-btn {
        padding: 5px 17px;
        border-radius: 5px;
        border: 1px dashed var(--bx-border);
        background: none;
        font-family: var(--font-body);
        font-size: 14px;
        font-weight: 600;
        color: var(--bx-accent);
        cursor: pointer;
        transition: var(--transition);
    }

        .ep-add-section-btn:hover {
            border-color: var(--bx-accent);
            background: var(--bx-accent-dim);
        }

    /* ── BIO ── */
    .ep-bio-text {
        font-size: 13px;
        line-height: 1.8;
        color: var(--bx-text);
    }

    .ep-empty-hint {
        font-size: 13px;
        color: var(--bx-muted);
        font-style: italic;
    }

    .ep-hint {
        font-size: 11px;
        color: var(--bx-muted);
    }

    .ep-char-count {
        font-size: 11px;
        color: var(--bx-muted);
        text-align: right;
        margin-top: 5px;
    }

    /* ── DISCIPLINES ── */
    .ep-discipline-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .ep-disc-card {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 14px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 8px;
        cursor: pointer;
        transition: var(--transition);
        position: relative;
    }

        .ep-disc-card:hover {
            border-color: color-mix(in srgb,var(--dc) 40%,transparent 60%);
        }

    .ep-disc-active {
        border-color: var(--dc) !important;
        background: linear-gradient(135deg,color-mix(in srgb,var(--dc) 8%,var(--bx-surface2) 92%) 0%,var(--bx-surface2) 100%) !important;
        box-shadow: 0 0 0 1px var(--dc);
    }

    .ep-disc-check {
        width: 16px;
        height: 16px;
        border-radius: 4px;
        border: 1.5px solid var(--bx-border);
        display: grid;
        place-items: center;
        flex-shrink: 0;
        margin-top: 2px;
        background: var(--bx-surface);
        transition: var(--transition);
    }

    .ep-disc-check-on {
        background: var(--dc,var(--bx-accent)) !important;
        border-color: var(--dc,var(--bx-accent)) !important;
    }

    .ep-disc-icon {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        display: grid;
        place-items: center;
        font-size: 14px;
        flex-shrink: 0;
    }

    .ep-disc-name {
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 2px;
        color: white;
    }

    .ep-disc-desc {
        font-size: 10px;
        color: var(--bx-muted);
        line-height: 1.4;
    }

    .ep-disc-display {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .ep-disc-badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 6px 12px;
        background: color-mix(in srgb,var(--dc) 10%,var(--bx-surface2) 90%);
        border: 1px solid color-mix(in srgb,var(--dc) 30%,transparent 70%);
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
    }

    /* ── SKILLS ── */
    .ep-skill-input-row {
        display: flex;
        gap: 8px;
        margin-bottom: 8px;
    }

    .ep-add-btn {
        padding: 8px 16px;
        border-radius: 6px;
        background: var(--bx-accent);
        border: none;
        color: #000;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition);
        white-space: nowrap;
    }

        .ep-add-btn:hover {
            background: #00ddb5;
            box-shadow: 0 0 12px var(--bx-accent-glow);
        }

    .ep-skills-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
    }

    .ep-skill-tag {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--bx-border);
        border-radius: 20px;
        padding: 5px 12px;
        color: var(--bx-text);
        font-weight: 500;
        transition: var(--transition);
    }

    .ep-skill-removable {
        cursor: pointer;
    }

        .ep-skill-removable:hover {
            border-color: var(--bx-red);
            color: var(--bx-red);
        }

    .ep-skill-x {
        font-size: 13px;
        color: var(--bx-muted);
        line-height: 1;
    }

    /* ── TIMELINE (exp/edu) ── */
    .ep-timeline-list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .ep-tl-item {
        display: flex;
        gap: 14px;
    }

    .ep-tl-dot-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
        padding-top: 3px;
    }

    .ep-tl-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .ep-tl-line {
        width: 2px;
        flex: 1;
        background: var(--bx-border);
        margin: 4px 0;
    }

    .ep-tl-content {
        flex: 1;
        padding-bottom: 22px;
        min-width: 0;
    }

    .ep-tl-item:last-child .ep-tl-content {
        padding-bottom: 0;
    }

    .ep-tl-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 4px;
    }

    .ep-tl-title {
        font-size: 13px;
        font-weight: 700;
    }

    .ep-tl-sub {
        font-size: 12px;
        color: var(--bx-muted);
        margin-top: 2px;
    }

    .ep-tl-dates {
        font-size: 11px;
        color: var(--bx-muted);
        flex-shrink: 0;
        white-space: nowrap;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        padding: 3px 9px;
        border-radius: 20px;
    }

    .ep-tl-desc {
        font-size: 12px;
        color: var(--bx-muted);
        line-height: 1.65;
        margin-top: 4px;
    }

    /* ── EXP EDIT GRID ── */
    .ep-exp-edit-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 8px;
        padding: 14px;
        margin-bottom: 4px;
    }

    .ep-edit-field {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .ep-edit-lbl {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .5px;
        text-transform: uppercase;
        color: var(--bx-muted);
    }

    .ep-remove-btn {
        background: none;
        border: 1px solid rgba(255,91,91,.3);
        border-radius: 5px;
        color: var(--bx-red);
        font-family: var(--font-body);
        font-size: 11px;
        font-weight: 600;
        padding: 5px 12px;
        cursor: pointer;
        transition: var(--transition);
    }

        .ep-remove-btn:hover {
            background: var(--bx-red-dim);
        }

    .ep-info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 14px;
        width: 100%;
    }

    .ep-info-item {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        padding: 16px;
        border-radius: 14px;
        background: rgba(255,255,255,.02);
        border: 1px solid var(--bx-border);
        transition: var(--transition);
    }

        .ep-info-item:hover {
            border-color: rgba(255,255,255,.12);
            transform: translateY(-1px);
        }

    .ep-info-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px;
        background: rgba(255,255,255,.02);
        border: 1px solid var(--bx-border);
        border-radius: 12px;
        transition: var(--transition);
    }

        .ep-info-card:hover {
            border-color: rgba(77,142,255,.25);
            background: rgba(77,142,255,.03);
        }


    .ep-info-icon {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bx-accent-dim);
        font-size: 18px;
        flex-shrink: 0;
    }

    .ep-info-label {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--bx-muted);
        margin-bottom: 4px;
    }

    .ep-info-value {
        font-size: 14px;
        font-weight: 600;
        color: var(--bx-text);
        word-break: break-word;
    }

    /* ── CERTIFICATIONS ── */
    .ep-cert-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .ep-cert-card {
        display: flex;
        gap: 10px;
        padding: 12px 14px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 8px;
    }

    .ep-cert-icon {
        font-size: 22px;
        flex-shrink: 0;
        margin-top: 1px;
    }

    .ep-cert-info {
        flex: 1;
        min-width: 0;
    }

    .ep-cert-name {
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 2px;
    }

    .ep-cert-issuer {
        font-size: 11px;
        color: var(--bx-muted);
    }

    .ep-cert-input {
        font-size: 12px !important;
    }

    /* ── PORTFOLIO ── */
    .ep-portfolio-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .ep-portfolio-card {
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 8px;
        overflow: hidden;
        transition: var(--transition);
    }

        .ep-portfolio-card:hover {
            border-color: color-mix(in srgb,var(--pc) 45%,transparent 55%);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0,0,0,.4);
        }

    .ep-portfolio-band {
        height: 3px;
        background: var(--pc,#5C6070);
        box-shadow: 0 0 8px var(--pc);
    }

    .ep-portfolio-inner {
        padding: 13px 14px;
    }

    .ep-port-uid {
        font-size: 9px;
        color: var(--pc,var(--bx-muted));
        letter-spacing: .5px;
        margin-bottom: 4px;
        font-weight: 600;
    }

    .ep-port-title {
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 3px;
    }

    .ep-port-client {
        font-size: 11px;
        color: var(--bx-muted);
        margin-bottom: 4px;
    }

    .ep-port-desc {
        font-size: 11px;
        color: var(--bx-muted);
        line-height: 1.55;
        margin-bottom: 8px;
    }

    .ep-port-link {
        font-size: 11px;
        color: var(--bx-accent);
        text-decoration: none;
        font-weight: 600;
    }

        .ep-port-link:hover {
            opacity: .75;
        }

    /* ── SIDE WIDGETS ── */
    .ep-toggle-row {
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        user-select: none;
    }

    .ep-toggle {
        width: 40px;
        height: 22px;
        border-radius: 22px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        position: relative;
        transition: var(--transition);
        flex-shrink: 0;
    }

    .ep-toggle-on {
        background: var(--bx-accent);
        border-color: var(--bx-accent);
        box-shadow: 0 0 10px rgba(0,198,162,.3);
    }

    .ep-toggle-knob {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        top: 2px;
        left: 2px;
        transition: transform .18s;
    }

    .ep-toggle-on .ep-toggle-knob {
        transform: translateX(18px);
    }

    .ep-toggle-lbl {
        font-size: 13px;
        font-weight: 500;
    }

    .ep-toggle-sub {
        font-size: 11px;
        color: var(--bx-muted);
        margin-top: 2px;
    }

    .ep-side-stat {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: var(--bx-muted);
    }

    .ep-lang-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .ep-lang-badge {
        font-size: 10px;
        font-weight: 600;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 20px;
        padding: 2px 8px;
        color: var(--bx-muted);
        margin-left: auto;
    }

    /* ── CV / DOCS ── */
    .ep-cv-card {
        border-color: rgba(0,198,162,.18);
    }

    .ep-upload-zone {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 20px;
        border: 2px dashed var(--bx-border);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: var(--transition);
        text-align: center;
        background: rgba(0,198,162,.02);
        position: relative;
    }

        .ep-upload-zone:hover {
            border-color: var(--bx-accent);
            background: var(--bx-accent-dim);
        }

    .ep-upload-icon {
        font-size: 22px;
        opacity: .5;
    }

    .ep-upload-title {
        font-size: 13px;
        color: var(--bx-text);
    }

        .ep-upload-title strong {
            color: var(--bx-accent);
        }

    .ep-upload-sub {
        font-size: 11px;
        color: var(--bx-muted);
    }

    .ep-doc-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
    }

    .ep-doc-ext {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        display: grid;
        place-items: center;
        font-size: 9px;
        font-weight: 800;
        flex-shrink: 0;
    }

    .ep-doc-type-badge {
        font-size: 9px;
        font-weight: 700;
        background: var(--bx-accent-dim);
        color: var(--bx-accent);
        border: 1px solid rgba(0,198,162,.3);
        padding: 2px 7px;
        border-radius: 4px;
        white-space: nowrap;
    }

    /* ── SOCIAL ── */
    .ep-social-ic {
        font-size: 15px;
        flex-shrink: 0;
    }

    .ep-social-edit-row {
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .ep-social-input {
        flex: 1;
        font-size: 12px !important;
    }

    .ep-social-row {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
    }

    .ep-social-val {
        margin-left: auto;
        color: var(--bx-blue);
        text-decoration: none;
        font-size: 12px;
        min-width: 0;
        max-width: 60%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .ep-social-val:hover {
            opacity: .75;
        }

    /* ── COMPLETENESS ── */
    .ep-completeness-card {
        border-color: rgba(0,198,162,.18);
    }

    .ep-comp-bar-track {
        height: 5px;
        background: rgba(255,255,255,.06);
        border-radius: 5px;
        overflow: hidden;
        margin-bottom: 4px;
    }

    .ep-comp-bar-fill {
        height: 100%;
        border-radius: 5px;
        transition: width .5s ease;
        box-shadow: 0 0 8px currentColor;
    }

    .ep-comp-row {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 12px;
        color: var(--bx-muted);
    }

    .ep-comp-done {
        color: var(--bx-text) !important;
    }

    .ep-comp-ic {
        font-size: 11px;
        width: 16px;
        text-align: center;
        flex-shrink: 0;
        color: var(--bx-muted);
    }

    .ep-comp-done .ep-comp-ic {
        color: var(--bx-accent);
    }

    /* ── SHARED INPUTS ── */
    .ep-input {
        width: 100%;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
        color: var(--bx-text);
        font-family: var(--font-body);
        font-size: 13px;
        padding: 9px 11px;
        outline: none;
        transition: var(--transition);
    }

        .ep-input:focus {
            border-color: rgba(77,142,255,.5);
            box-shadow: 0 0 0 3px rgba(77,142,255,.1);
        }

        .ep-input::placeholder {
            color: rgba(255,255,255,.22);
        }

    .ep-select {
        width: 100%;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
        color: var(--bx-text);
        font-family: var(--font-body);
        font-size: 13px;
        padding: 9px 11px;
        outline: none;
        cursor: pointer;
    }

        .ep-select option {
            background: #111318;
        }

    .ep-textarea {
        width: 100%;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
        color: var(--bx-text);
        font-family: var(--font-body);
        font-size: 13px;
        padding: 10px 11px;
        resize: vertical;
        outline: none;
        transition: var(--transition);
    }

        .ep-textarea:focus {
            border-color: rgba(77,142,255,.5);
            box-shadow: 0 0 0 3px rgba(77,142,255,.1);
        }

        .ep-textarea::placeholder {
            color: rgba(255,255,255,.22);
        }

    .ep-bio-textarea {
        min-height: 110px;
    }


    /* ── Card shell ── */
    .pmd-card {
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius);
        overflow: hidden;
    }

    /* ── Header ── */
    .pmd-head {
        padding: 16px 20px;
        border-bottom: 1px solid var(--bx-border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: linear-gradient(135deg, rgba(77,142,255,.04) 0%, transparent 100%);
    }

    .pmd-head-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .pmd-head-icon {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: rgba(77,142,255,.1);
        border: 1px solid rgba(77,142,255,.2);
        display: grid;
        place-items: center;
        color: var(--bx-blue);
        flex-shrink: 0;
    }

    .pmd-head-title {
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: -.1px;
        margin-bottom: 2px;
    }

    .pmd-head-sub {
        font-size: 11px;
        color: var(--bx-muted);
    }

    .pmd-head-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    /* ── Buttons ── */
    .pmd-edit-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 600;
        color: var(--bx-muted);
        cursor: pointer;
        transition: var(--transition);
    }

        .pmd-edit-btn:hover {
            border-color: var(--bx-border-hi);
            color: var(--bx-text);
        }

    .pmd-add-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        background: rgba(0,198,162,.08);
        border: 1px dashed rgba(0,198,162,.4);
        border-radius: 7px;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 600;
        color: var(--bx-accent);
        cursor: pointer;
        transition: var(--transition);
    }

        .pmd-add-btn:hover {
            background: rgba(0,198,162,.14);
            border-color: rgba(0,198,162,.65);
        }

    .pmd-ghost-btn {
        padding: 7px 14px;
        background: none;
        border: 1px solid var(--bx-border);
        border-radius: 7px;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 500;
        color: var(--bx-muted);
        cursor: pointer;
        transition: var(--transition);
    }

        .pmd-ghost-btn:hover {
            border-color: var(--bx-border-hi);
            color: var(--bx-text);
        }

    .pmd-save-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 16px;
        background: var(--bx-accent);
        border: none;
        border-radius: 7px;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 700;
        color: #000;
        cursor: pointer;
        transition: var(--transition);
    }

        .pmd-save-btn:hover {
            background: #00ddb5;
            box-shadow: 0 0 14px rgba(0,198,162,.4);
        }

    /* ── Body ── */
    .pmd-body {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    /* ── Empty state ── */
    .pmd-empty {
        position: relative;
        padding: 52px 32px;
        text-align: center;
        border: 1px dashed var(--bx-border);
        border-radius: 12px;
        background: rgba(255,255,255,.01);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        overflow: hidden;
    }

    .pmd-empty-ring {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        border-radius: 50%;
        border: 1px solid rgba(77,142,255,.1);
        animation: pmdring 3s ease infinite;
    }

    .pmd-r1 {
        width: 140px;
        height: 140px;
    }

    .pmd-r2 {
        width: 90px;
        height: 90px;
        border-color: rgba(0,198,162,.1);
        animation-delay: .5s;
    }

    @keyframes pmdring {
        0%,100% {
            opacity: .3;
            transform: translate(-50%,-50%) scale(1)
        }

        50% {
            opacity: .8;
            transform: translate(-50%,-50%) scale(1.06)
        }
    }

    .pmd-empty-icon {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: rgba(77,142,255,.08);
        border: 1px solid rgba(77,142,255,.18);
        display: grid;
        place-items: center;
        color: var(--bx-blue);
        position: relative;
        z-index: 1;
    }

    .pmd-empty-title {
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 700;
        position: relative;
        z-index: 1;
    }

    .pmd-empty-sub {
        font-size: 12px;
        color: var(--bx-muted);
        line-height: 1.6;
        max-width: 280px;
        position: relative;
        z-index: 1;
    }

    .pmd-empty-cta {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 9px 20px;
        background: var(--bx-accent);
        border: none;
        border-radius: 8px;
        font-family: var(--font-body);
        font-size: 13px;
        font-weight: 700;
        color: #000;
        cursor: pointer;
        transition: var(--transition);
        position: relative;
        z-index: 1;
        margin-top: 4px;
    }

        .pmd-empty-cta:hover {
            background: #00ddb5;
            box-shadow: 0 0 18px rgba(0,198,162,.4);
        }

    /* ── Methods list ── */
    .pmd-methods-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* ── View card (premium card style) ── */
    .pmd-view-card {
        position: relative;
        border-radius: 14px;
        background: linear-gradient( 135deg, color-mix(in srgb, var(--pmc) 20%, #1a1e28 80%) 0%, #141922 55%, color-mix(in srgb, var(--pmc) 7%, #141922 93%) 100% );
        border: 1px solid color-mix(in srgb, var(--pmc) 38%, var(--bx-border) 62%);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--pmc) 12%, transparent 88%), 0 12px 36px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
        overflow: hidden;
        transition: transform .2s, box-shadow .2s;
    }

        .pmd-view-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--pmc) 22%, transparent 78%), 0 20px 48px rgba(0,0,0,.55);
        }

    .pmd-vc-shine {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 45%;
        background: linear-gradient(180deg, rgba(255,255,255,.045) 0%, transparent 100%);
        pointer-events: none;
    }

    .pmd-vc-inner {
        padding: 20px 22px;
        position: relative;
        z-index: 1;
    }

    .pmd-vc-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 18px;
    }

    .pmd-vc-method {
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .pmd-vc-method-icon {
        font-size: 20px;
    }

    .pmd-vc-method-name {
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -.2px;
    }

    .pmd-primary-badge {
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .5px;
        text-transform: uppercase;
        background: var(--pmc);
        color: #000;
        padding: 2px 8px;
        border-radius: 4px;
    }

    .pmd-vc-verified {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .4px;
        text-transform: uppercase;
        color: var(--bx-accent);
        background: rgba(0,198,162,.1);
        border: 1px solid rgba(0,198,162,.25);
        padding: 4px 10px;
        border-radius: 20px;
    }

    .pmd-vc-fields {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-bottom: 20px;
    }

    .pmd-vcf-lbl {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .7px;
        text-transform: uppercase;
        color: rgba(255,255,255,.32);
        margin-bottom: 3px;
    }

    .pmd-vcf-val {
        font-size: 13px;
        font-weight: 600;
        color: #E8EAF0;
    }

    .pmd-vcf-accent {
        color: var(--pmc);
        font-size: 14px;
        font-weight: 700;
    }

    .pmd-vcf-mono {
        font-family: monospace;
        font-size: 13px;
        letter-spacing: .5px;
    }

    .pmd-vc-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 14px;
        border-top: 1px solid rgba(255,255,255,.07);
    }

    .pmd-vc-dots {
        display: flex;
        gap: 4px;
    }

        .pmd-vc-dots span {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: rgba(255,255,255,.18);
        }

    .pmd-vc-index {
        font-size: 11px;
        font-weight: 600;
        color: rgba(255,255,255,.3);
    }

    /* ── Edit card ── */
    .pmd-edit-card {
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 12px;
        overflow: hidden;
        transition: border-color .2s;
    }

        .pmd-edit-card:hover {
            border-color: color-mix(in srgb, var(--pmc) 38%, var(--bx-border) 62%);
        }

    .pmd-edit-card-bar {
        height: 2px;
        background: linear-gradient(90deg, var(--pmc), color-mix(in srgb, var(--pmc) 30%, transparent 70%));
    }

    .pmd-edit-card-inner {
        padding: 18px 20px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* Method type selector */
    .pmd-method-type-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .pmd-mtr-label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .6px;
        text-transform: uppercase;
        color: var(--bx-muted);
    }

    .pmd-mtr-tabs {
        display: flex;
        gap: 8px;
    }

    .pmd-mtype-tab {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 9px 16px;
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        border-radius: 8px;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 600;
        color: var(--bx-muted);
        cursor: pointer;
        transition: var(--transition);
        position: relative;
    }

        .pmd-mtype-tab:hover {
            border-color: var(--bx-border-hi);
            color: var(--bx-text);
        }

        .pmd-mtype-tab.active {
            background: rgba(0,198,162,.07);
            border-color: rgba(0,198,162,.4);
            color: var(--bx-accent);
            box-shadow: 0 0 0 1px rgba(0,198,162,.2);
        }

    .pmd-mtype-check {
        position: absolute;
        top: -5px;
        right: -5px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--bx-accent);
        display: grid;
        place-items: center;
    }

    /* Fields */
    .pmd-fields-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .pmd-field {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .pmd-field-lbl {
        font-size: 11px;
        font-weight: 600;
        color: rgba(232,234,240,.5);
        letter-spacing: .2px;
    }

    .pmd-input-wrap {
        display: flex;
        align-items: center;
        gap: 9px;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--bx-border);
        border-radius: 8px;
        padding: 0 12px;
        transition: var(--transition);
    }

        .pmd-input-wrap:focus-within {
            border-color: rgba(0,198,162,.5);
            box-shadow: 0 0 0 3px rgba(0,198,162,.1);
            background: rgba(0,198,162,.025);
        }

    .pmd-input-ic {
        color: rgba(255,255,255,.22);
        flex-shrink: 0;
        transition: color .15s;
    }

    .pmd-input-wrap:focus-within .pmd-input-ic {
        color: rgba(0,198,162,.65);
    }

    .pmd-input {
        flex: 1;
        background: none;
        border: none;
        outline: none;
        font-family: var(--font-body);
        font-size: 13px;
        color: var(--bx-text);
        padding: 10px 0;
    }

        .pmd-input::placeholder {
            color: rgba(255,255,255,.2);
        }

    /* Remove footer */
    .pmd-edit-card-footer {
        display: flex;
        justify-content: flex-end;
        padding-top: 10px;
        border-top: 1px solid var(--bx-border);
    }

    .pmd-remove-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: none;
        border: 1px solid rgba(255,91,91,.25);
        border-radius: 7px;
        color: var(--bx-red);
        font-family: var(--font-body);
        font-size: 11px;
        font-weight: 600;
        padding: 6px 14px;
        cursor: pointer;
        transition: var(--transition);
    }

        .pmd-remove-btn:hover {
            background: rgba(255,91,91,.07);
            border-color: rgba(255,91,91,.5);
        }

    /* ── Info strip ── */
    /*.pmd-info-strip {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--bx-surface2);
    border: 1px solid var(--bx-border);
    border-radius: 10px;
    overflow: hidden;
}

.pmd-is-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
}

.pmd-is-sep {
    width: 1px;
    background: var(--bx-border);
    flex-shrink: 0;
}

.pmd-is-ic {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.pmd-is-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--bx-muted);
    margin-bottom: 3px;
}

.pmd-is-val {
    font-size: 12px;
    font-weight: 500;
    color: var(--bx-text);
    line-height: 1.4;
}*/

    /* Responsive */
    @media(max-width:768px) {
        .pmd-fields-grid {
            grid-template-columns: 1fr;
        }

        .pmd-vc-fields {
            grid-template-columns: 1fr;
        }

        .pmd-info-strip {
            flex-direction: column;
        }

        .pmd-is-sep {
            width: 100%;
            height: 1px;
        }

        .pmd-mtr-tabs {
            flex-wrap: wrap;
        }
    }

    /* ── TOAST ── */
    .ep-toast {
        position: fixed;
        bottom: 28px;
        right: 28px;
        z-index: 999;
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius);
        padding: 14px 18px;
        box-shadow: var(--shadow-lg);
        min-width: 290px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        animation: epslideup .25s ease;
    }

    @keyframes epslideup {
        from {
            opacity: 0;
            transform: translateY(12px)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

    .ep-toast-green {
        border-color: rgba(0,198,162,.35);
    }

    .ep-toast-red {
        border-color: rgba(255,91,91,.35);
    }

    /* ── RESPONSIVE ── */
    @media(max-width:1024px) {
        .ep-discipline-grid {
            grid-template-columns: 1fr;
        }

        .ep-cert-grid, .ep-portfolio-grid {
            grid-template-columns: 1fr;
        }
    }

    @media(max-width:900px) {
        .ep-content {
            grid-template-columns: 1fr;
        }

        .ep-col-side {
            position: static;
            max-height: none;
            border-top: 1px solid var(--bx-border);
        }

        .ep-col-main {
            border-right: none;
        }

        .ep-hero-info {
            flex-direction: column;
            align-items: flex-start;
        }

        .ep-hero-kpis {
            width: 100%;
        }
    }

    @media(max-width:600px) {
        .ep-hero-body {
            padding: 0 16px 20px;
        }

        .ep-col-main {
            padding: 16px;
        }

        .ep-cert-grid, .ep-portfolio-grid, .ep-discipline-grid {
            grid-template-columns: 1fr;
        }

        .ep-exp-edit-grid {
            grid-template-columns: 1fr;
        }
    }


    /* ══════════════════════════════════════════
   BIMEX — Client Profile Styles
   ClientProfile.razor.css
   ══════════════════════════════════════════ */

    /* ── ROLE BADGE ── */
    .cl-role-badge {
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1.2px;
        background: linear-gradient(135deg, #F5A623, #EC4899);
        color: #fff;
        padding: 3px 9px;
        border-radius: 4px;
        font-family: var(--font-display);
    }

    /* ── PAGE ── */
    .cp-page {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .cp-card-head {
        padding: 14px 18px 12px;
        border-bottom: 1px solid var(--bx-border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }



    .cp-card-title {
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: -.1px;
    }



    .cp-card-body {
        padding: 18px;
    }

    /* ── HERO ── */
    /* ─────────────────────────────
   HERO BASE (MATCH SECOND DESIGN)
───────────────────────────── */

    .cp-hero {
        position: relative;
        border: 1px solid var(--bx-border);
        overflow: hidden;
        /* aurora background like the 2nd design */
        background: radial-gradient(520px 240px at 9% -10%, rgba(245,166,35,.10), transparent 60%), radial-gradient(720px 320px at 88% 0%, rgba(0,198,162,.12), transparent 62%), radial-gradient(640px 360px at 60% 130%, rgba(77,142,255,.10), transparent 64%), linear-gradient(180deg, var(--bx-surface) 0%, #0b0f18 100%);
    }

        /* top subtle highlight line */
        .cp-hero::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient( 90deg, transparent, rgba(0, 198, 162, .25), transparent );
        }

    /* ─────────────────────────────
   LAYOUT
───────────────────────────── */

    .cp-hero-header {
        padding: 30px 34px;
    }

    .cp-hero-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 28px;
        align-items: center;
    }

    /* ─────────────────────────────
   LEFT SIDE (IDENTITY)
───────────────────────────── */

    .cp-hero-id {
        display: flex;
        gap: 20px;
        align-items: center;
        min-width: 0;
    }

    /* ─────────────────────────────
   AVATAR
───────────────────────────── */

    .cp-avatar-shell {
        position: relative;
        flex-shrink: 0;
    }

    .cp-avatar {
        width: 84px;
        height: 84px;
        border-radius: 22px; /* IMPORTANT: not circle anymore */
        display: grid;
        place-items: center;
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 30px;
        color: #fff;
        background: linear-gradient(150deg, #F5A623 0%, #EC4899 55%, #7C3AED 120%);
        box-shadow: 0 14px 34px -12px rgba(236,72,153,.45), inset 0 1px 0 rgba(255,255,255,.25);
    }

    /* edit button */
    .cp-avatar-edit {
        position: absolute;
        right: -4px;
        bottom: -4px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--bx-amber);
        border: 2px solid var(--bx-surface);
        display: grid;
        place-items: center;
        cursor: pointer;
        color: #000;
    }

    /* verified dot */
    .cp-verified-dot {
        position: absolute;
        top: -4px;
        right: -4px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--bx-blue);
        border: 2px solid var(--bx-surface);
        display: grid;
        place-items: center;
        font-size: 10px;
        font-weight: 800;
        color: #fff;
    }

    /* ─────────────────────────────
   TEXT AREA
───────────────────────────── */

    .cp-hero-main {
        min-width: 0;
    }

    .cp-hero-name {
        font-family: var(--font-display);
        font-size: 30px;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.05;
    }

    .cp-hero-title {
        margin-top: 6px;
        font-size: 14.5px;
        color: var(--bx-muted);
    }

    /* edit layout */
    .cp-name-edit {
        display: flex;
        gap: 10px;
        margin-bottom: 6px;
    }

    /* ─────────────────────────────
   CHIPS (MATCH 2ND DESIGN)
───────────────────────────── */

    .cp-chip-row {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 14px;
    }

    .cp-chip {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 6px 12px;
        border-radius: 9px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--bx-muted);
        background: rgba(8,13,21,.55);
        border: 1px solid var(--bx-border);
        text-decoration: none;
    }

    /* website chip */
    .cp-chip-link {
        color: var(--bx-accent);
        border-color: rgba(0,198,162,.25);
        background: rgba(0,198,162,.10);
    }

        .cp-chip-link:hover {
            border-color: var(--bx-accent);
        }

    /* verified chip */
    .cp-chip-verified {
        color: var(--bx-blue);
        border-color: rgba(77,142,255,.25);
        background: rgba(77,142,255,.10);
    }

    /* active hiring */
    .cp-chip-active {
        color: #34D399;
        border-color: rgba(52,211,153,.25);
        background: rgba(52,211,153,.10);
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    /* blinking dot */
    .cp-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #34D399;
        box-shadow: 0 0 10px rgba(52,211,153,.6);
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0%, 100% {
            opacity: 1;
        }

        50% {
            opacity: .35;
        }
    }

    /* ─────────────────────────────
   RIGHT SIDE KPI PANEL
───────────────────────────── */

    .cp-stats {
        display: flex;
        align-items: center;
        background: rgba(8,13,21,.55);
        border: 1px solid var(--bx-border);
        border-radius: 14px;
        padding: 6px;
        flex-shrink: 0;
    }

    .cp-stat {
        padding: 12px 22px;
        text-align: center;
    }

    .cp-stat-value {
        font-family: var(--font-display);
        font-size: 22px;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1;
    }

    .cp-stat-label {
        margin-top: 7px;
        font-size: 9.5px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--bx-muted);
        font-family: var(--font-mono, monospace);
    }

    /* separators */
    .cp-stat-sep {
        width: 1px;
        height: 34px;
        background: var(--bx-border);
    }

    /* ─────────────────────────────
   INLINE INPUTS (KEEP YOUR STYLE)
───────────────────────────── */

    .cp-inline-input {
        background: rgba(255,255,255,.05);
        border: 1px solid var(--bx-border);
        border-radius: 6px;
        color: var(--bx-text);
        font-family: var(--font-display);
        font-weight: 700;
        padding: 6px 10px;
        outline: none;
    }

    .cp-title-input {
        font-size: 14px !important;
        font-family: var(--font-body) !important;
        font-weight: 400 !important;
        width: 100%;
    }

    .cp-name-input {
        font-size: 18px !important;
    }

    /* ─────────────────────────────
   RESPONSIVE
───────────────────────────── */

    @media (max-width: 900px) {
        .cp-hero-row {
            grid-template-columns: 1fr;
            gap: 22px;
        }

        .cp-stats {
            justify-self: start;
        }
    }

    @media (max-width: 600px) {
        .cp-hero-header {
            padding: 22px 18px;
        }

        .cp-hero-id {
            flex-direction: column;
            align-items: flex-start;
        }

        .cp-hero-name {
            font-size: 24px;
        }

        .cp-stats {
            width: 100%;
            overflow-x: auto;
        }
    }
    /* ── HERO KPIs ── */
    .cp-hero-kpis {
        display: flex;
        align-items: center;
        gap: 0;
        background: rgba(255, 255, 255, .03);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius);
        padding: 12px 20px;
        flex-shrink: 0;
    }

    .cp-kpi {
        text-align: center;
        padding: 0 18px;
    }

    .cp-kpi-val {
        font-family: var(--font-display);
        font-size: 20px;
        font-weight: 800;
        letter-spacing: -1px;
        line-height: 1;
    }

    .cp-kpi-lbl {
        font-size: 10px;
        color: var(--bx-muted);
        margin-top: 3px;
    }

    .cp-kpi-sep {
        width: 1px;
        height: 32px;
        background: var(--bx-border);
    }

    /* ── INLINE EDIT INPUTS ── */
    .cp-inline-input {
        background: rgba(255, 255, 255, .06);
        border: 1px solid var(--bx-border);
        border-radius: 6px;
        color: var(--bx-text);
        font-family: var(--font-display);
        font-size: 22px;
        font-weight: 700;
        padding: 6px 10px;
        outline: none;
        transition: var(--transition);
    }

        .cp-inline-input:focus {
            border-color: var(--bx-amber);
            box-shadow: 0 0 0 3px rgba(245, 166, 35, .15);
        }

    .cp-name-input {
        font-size: 18px !important;
    }

    .cp-title-input {
        width: 100%;
        font-family: var(--font-body) !important;
        font-size: 14px !important;
        font-weight: 400 !important;
    }

    .cp-meta-edit-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .cp-meta-edit-item {
        display: flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, .04);
        border: 1px solid var(--bx-border);
        border-radius: 20px;
        padding: 4px 12px;
    }

    .cp-meta-input {
        background: none;
        border: none;
        outline: none;
        font-family: var(--font-body);
        font-size: 12px;
        color: var(--bx-muted);
        width: 160px;
    }

    /* ── CONTENT GRID ── */
    .cp-content {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 0;
        align-items: start;
    }

    .cp-col-main {
        padding: 24px 28px;
        border-right: 1px solid var(--bx-border);
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .cp-col-side {
        padding: 20px 18px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        position: sticky;
        top: 68px;
        max-height: calc(100vh - 68px);
        overflow-y: auto;
    }

    /* ── CARDS ── */
    .cp-card {
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius);
    }

    .cp-card-head {
        padding: 14px 18px 12px;
        border-bottom: 1px solid var(--bx-border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .cp-card-title {
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: -.1px;
    }

    .cp-card-body {
        padding: 18px;
    }

    /* ── SHARED BUTTON STYLES (reused from engineer) ── */
    .ep-edit-link {
        background: none;
        border: none;
        font-family: var(--font-body);
        font-size: 15px;
        color: var(--bx-muted);
        cursor: pointer;
        transition: color .15s;
    }

        .ep-edit-link:hover {
            color: var(--bx-accent);
        }

    .ep-save-btn {
        padding: 5px 17px;
        border-radius: 5px;
        background: var(--bx-accent);
        border: none;
        color: #000;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition);
    }

        .ep-save-btn:hover {
            background: #00ddb5;
        }

    .ep-ghost-btn {
        padding: 5px 17px;
        border-radius: 5px;
        background: var(--bx-surface2);
        color: var(--bx-text);
        border: 1px solid var(--bx-border);
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition);
    }

        .ep-ghost-btn:hover {
            border-color: var(--bx-border-hi);
            background-color: black;
            color: aquamarine; /* or a stronger color like #fff */
        }

    .ep-add-section-btn {
        padding: 5px 17px;
        border-radius: 5px;
        border: 1px dashed var(--bx-border);
        background: none;
        font-family: var(--font-body);
        font-size: 14px;
        font-weight: 600;
        color: var(--bx-accent);
        cursor: pointer;
        transition: var(--transition);
    }

        .ep-add-section-btn:hover {
            border-color: var(--bx-accent);
            background: var(--bx-accent-dim);
        }

    .ep-info-link {
        color: white;
        text-decoration: none;
    }

        .ep-info-link:hover {
            color: white;
        }

        .ep-info-link:visited {
            color: white;
        }
    /* ── BIO ── */
    .cp-bio-text {
        font-size: 13px;
        line-height: 1.8;
        color: var(--bx-text);
    }

    .ep-empty-hint {
        font-size: 13px;
        color: var(--bx-muted);
        font-style: italic;
    }

    .ep-hint {
        font-size: 11px;
        color: var(--bx-muted);
    }

    .ep-char-count {
        font-size: 11px;
        color: var(--bx-muted);
        text-align: right;
        margin-top: 5px;
    }

    /* ── INDUSTRIES ── */
    .cp-industry-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .cp-ind-card {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 14px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 8px;
        cursor: pointer;
        transition: var(--transition);
    }

        .cp-ind-card:hover {
            border-color: color-mix(in srgb, var(--dc) 40%, transparent 60%);
        }

    .cp-ind-active {
        border-color: var(--dc) !important;
        background: linear-gradient(135deg, color-mix(in srgb, var(--dc) 8%, var(--bx-surface2) 92%) 0%, var(--bx-surface2) 100%) !important;
        box-shadow: 0 0 0 1px var(--dc);
    }

    .cp-ind-check {
        width: 16px;
        height: 16px;
        border-radius: 4px;
        border: 1.5px solid var(--bx-border);
        display: grid;
        place-items: center;
        flex-shrink: 0;
        margin-top: 2px;
        background: var(--bx-surface);
        transition: var(--transition);
    }

    .cp-ind-check-on {
        background: var(--dc, var(--bx-accent)) !important;
        border-color: var(--dc, var(--bx-accent)) !important;
    }

    .cp-ind-icon {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        display: grid;
        place-items: center;
        font-size: 14px;
        flex-shrink: 0;
    }

    .cp-ind-name {
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 2px;
    }

    .cp-ind-desc {
        font-size: 10px;
        color: var(--bx-muted);
        line-height: 1.4;
    }

    .cp-ind-display {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .cp-ind-badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
    }

    /* ── PROJECT NEEDS (skills) ── */
    .cp-skill-input-row {
        display: flex;
        gap: 8px;
        margin-bottom: 8px;
    }

    .cp-add-btn {
        padding: 8px 16px;
        border-radius: 6px;
        background: var(--bx-accent);
        border: none;
        color: #000;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition);
        white-space: nowrap;
    }

        .cp-add-btn:hover {
            background: #00ddb5;
            box-shadow: 0 0 12px var(--bx-accent-glow);
        }

    .cp-skills-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
    }

    .cp-skill-tag {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        background: rgba(255, 255, 255, .05);
        border: 1px solid var(--bx-border);
        border-radius: 20px;
        padding: 5px 12px;
        color: var(--bx-text);
        font-weight: 500;
        transition: var(--transition);
    }

    .cp-skill-removable {
        cursor: pointer;
    }

        .cp-skill-removable:hover {
            border-color: var(--bx-red);
            color: var(--bx-red);
        }

    .cp-skill-x {
        font-size: 13px;
        color: var(--bx-muted);
        line-height: 1;
    }

    /* ── PROJECT HISTORY GRID ── */
    .cp-project-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .cp-proj-card {
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 8px;
        overflow: hidden;
        transition: var(--transition);
    }

        .cp-proj-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
        }

    .cp-proj-band {
        height: 3px;
    }

    .cp-proj-inner {
        padding: 12px 14px;
    }

    .cp-proj-cat {
        font-size: 9px;
        font-weight: 600;
        letter-spacing: .4px;
        margin-bottom: 4px;
    }

    .cp-proj-title {
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 3px;
    }

    .cp-proj-meta {
        font-size: 11px;
        color: var(--bx-muted);
    }

    .cp-proj-status {
        font-size: 9px;
        font-weight: 700;
        padding: 2px 7px;
        border-radius: 4px;
        margin-top: 6px;
        display: inline-block;
    }

    .status-active {
        background: rgba(0, 198, 162, .12);
        color: var(--bx-accent);
        border: 1px solid rgba(0, 198, 162, .25);
    }

    .status-completed {
        background: rgba(77, 142, 255, .12);
        color: var(--bx-blue);
        border: 1px solid rgba(77, 142, 255, .25);
    }

    .status-draft {
        background: rgba(245, 166, 35, .12);
        color: var(--bx-amber);
        border: 1px solid rgba(245, 166, 35, .25);
    }

    /* ── TIMELINE (org contacts) ── */
    .ep-timeline-list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .ep-tl-item {
        display: flex;
        gap: 14px;
    }

    .ep-tl-dot-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
        padding-top: 3px;
    }

    .ep-tl-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .ep-tl-line {
        width: 2px;
        flex: 1;
        background: var(--bx-border);
        margin: 4px 0;
    }

    .ep-tl-content {
        flex: 1;
        padding-bottom: 22px;
        min-width: 0;
    }

    .ep-tl-item:last-child .ep-tl-content {
        padding-bottom: 0;
    }

    .ep-tl-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 4px;
    }

    .ep-tl-title {
        font-size: 13px;
        font-weight: 700;
    }

    .ep-tl-sub {
        font-size: 12px;
        color: var(--bx-muted);
        margin-top: 2px;
    }

    .ep-tl-dates {
        font-size: 11px;
        color: var(--bx-muted);
        flex-shrink: 0;
        white-space: nowrap;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        padding: 3px 9px;
        border-radius: 20px;
    }

    /* ── EDIT GRIDS ── */
    .ep-exp-edit-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 8px;
        padding: 14px;
        margin-bottom: 4px;
    }

    .ep-edit-field {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .ep-edit-lbl {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .5px;
        text-transform: uppercase;
        color: var(--bx-muted);
    }

    .ep-remove-btn {
        background: none;
        border: 1px solid rgba(255, 91, 91, .3);
        border-radius: 5px;
        color: var(--bx-red);
        font-family: var(--font-body);
        font-size: 11px;
        font-weight: 600;
        padding: 5px 12px;
        cursor: pointer;
        transition: var(--transition);
    }

        .ep-remove-btn:hover {
            background: var(--bx-red-dim);
        }

    /* ── REGISTRATION INFO GRID ── */
    .ep-info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 12px;
        width: 100%;
    }

    .ep-info-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px;
        background: rgba(255, 255, 255, .02);
        border: 1px solid var(--bx-border);
        border-radius: 12px;
        transition: var(--transition);
    }

        .ep-info-card:hover {
            border-color: rgba(245, 166, 35, .25);
            background: rgba(245, 166, 35, .03);
        }

    .ep-info-icon {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(245, 166, 35, .1);
        font-size: 18px;
        flex-shrink: 0;
    }

    .ep-info-label {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--bx-muted);
        margin-bottom: 4px;
    }

    .ep-info-value {
        font-size: 14px;
        font-weight: 600;
        color: var(--bx-text);
        word-break: break-word;
    }

    /* ── DOCUMENTS ── */
    .cp-upload-zone {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 20px;
        border: 2px dashed var(--bx-border);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: var(--transition);
        text-align: center;
        background: rgba(0, 198, 162, .02);
        position: relative;
    }

        .cp-upload-zone:hover {
            border-color: var(--bx-accent);
            background: var(--bx-accent-dim);
        }

    .cp-upload-icon {
        font-size: 22px;
        opacity: .5;
    }

    .cp-upload-title {
        font-size: 13px;
        color: var(--bx-text);
    }

        .cp-upload-title strong {
            color: var(--bx-accent);
        }

    .cp-upload-sub {
        font-size: 11px;
        color: var(--bx-muted);
    }

    .cp-doc-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
    }

    .cp-doc-ext {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        display: grid;
        place-items: center;
        font-size: 9px;
        font-weight: 800;
        flex-shrink: 0;
    }

    .ext-pdf {
        background: rgba(255, 91, 91, .15);
        color: var(--bx-red);
    }

    .ext-doc {
        background: rgba(77, 142, 255, .15);
        color: var(--bx-blue);
    }

    .ext-other {
        background: rgba(255, 255, 255, .08);
        color: var(--bx-muted);
    }

    .cp-doc-type-badge {
        font-size: 9px;
        font-weight: 700;
        background: var(--bx-accent-dim);
        color: var(--bx-accent);
        border: 1px solid rgba(0, 198, 162, .3);
        padding: 2px 7px;
        border-radius: 4px;
        white-space: nowrap;
    }

    /* ── LANGUAGES ── */
    .cp-lang-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .cp-lang-badge {
        font-size: 10px;
        font-weight: 600;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 20px;
        padding: 2px 8px;
        color: var(--bx-muted);
        margin-left: auto;
    }

    /* ── SOCIAL ── */
    .cp-social-ic {
        font-size: 15px;
        flex-shrink: 0;
    }

    .cp-social-edit-row {
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .cp-social-input {
        flex: 1;
        font-size: 12px !important;
    }

    .cp-social-row {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
    }

    .cp-social-val {
        margin-left: auto;
        color: var(--bx-blue);
        text-decoration: none;
        font-size: 12px;
        min-width: 0;
        max-width: 60%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .cp-social-val:hover {
            opacity: .75;
        }

    /* ── PROFILE STRENGTH ── */
    .cp-completeness-card {
        border-color: rgba(0, 198, 162, .18);
    }

    .cp-comp-bar-track {
        height: 5px;
        background: rgba(255, 255, 255, .06);
        border-radius: 5px;
        overflow: hidden;
        margin-bottom: 4px;
    }

    .cp-comp-bar-fill {
        height: 100%;
        border-radius: 5px;
        transition: width .5s ease;
    }

    .cp-comp-row {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 12px;
        color: var(--bx-muted);
    }

    .cp-comp-done {
        color: var(--bx-text) !important;
    }

    .cp-comp-ic {
        font-size: 11px;
        width: 16px;
        text-align: center;
        flex-shrink: 0;
        color: var(--bx-muted);
    }

    .cp-comp-done .cp-comp-ic {
        color: var(--bx-accent);
    }

    /* ── SHARED INPUTS ── */
    .ep-input {
        width: 100%;
        background: rgba(255, 255, 255, .04);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
        color: var(--bx-text);
        font-family: var(--font-body);
        font-size: 13px;
        padding: 9px 11px;
        outline: none;
        transition: var(--transition);
    }

        .ep-input:focus {
            border-color: rgba(245, 166, 35, .5);
            box-shadow: 0 0 0 3px rgba(245, 166, 35, .1);
        }

        .ep-input::placeholder {
            color: rgba(255, 255, 255, .22);
        }

    .ep-select {
        width: 100%;
        background: rgba(255, 255, 255, .04);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
        color: var(--bx-text);
        font-family: var(--font-body);
        font-size: 13px;
        padding: 9px 11px;
        outline: none;
        cursor: pointer;
    }

        .ep-select option {
            background: #111318;
        }

    .ep-textarea {
        width: 100%;
        background: rgba(255, 255, 255, .04);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
        color: var(--bx-text);
        font-family: var(--font-body);
        font-size: 13px;
        padding: 10px 11px;
        resize: vertical;
        outline: none;
        transition: var(--transition);
    }

        .ep-textarea:focus {
            border-color: rgba(245, 166, 35, .5);
            box-shadow: 0 0 0 3px rgba(245, 166, 35, .1);
        }

        .ep-textarea::placeholder {
            color: rgba(255, 255, 255, .22);
        }

    .cp-bio-textarea {
        min-height: 110px;
    }

    /* ── TOAST ── */
    .ep-toast {
        position: fixed;
        bottom: 28px;
        right: 28px;
        z-index: 999;
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius);
        padding: 14px 18px;
        box-shadow: var(--shadow-lg);
        min-width: 290px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        animation: epslideup .25s ease;
    }

    @keyframes epslideup {
        from {
            opacity: 0;
            transform: translateY(12px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    .ep-toast-green {
        border-color: rgba(0, 198, 162, .35);
    }

    .ep-toast-red {
        border-color: rgba(255, 91, 91, .35);
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 1024px) {
        .cp-industry-grid,
        .cp-project-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 900px) {
        .cp-content {
            grid-template-columns: 1fr;
        }

        .cp-col-side {
            position: static;
            max-height: none;
            border-top: 1px solid var(--bx-border);
        }

        .cp-col-main {
            border-right: none;
        }

        .cp-hero-info {
            flex-direction: column;
            align-items: flex-start;
        }

        .cp-hero-kpis {
            width: 100%;
        }
    }

    @media (max-width: 600px) {
        .cp-hero-body {
            padding: 0 16px 20px;
        }

        .cp-col-main {
            padding: 16px;
        }

        .cp-industry-grid,
        .cp-project-grid,
        .ep-exp-edit-grid {
            grid-template-columns: 1fr;
        }
    }



    .file-icon {
        width: 28px;
        height: 28px;
        background: rgba(110,231,199,0.08);
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-top: 1px;
    }

        .file-icon svg {
            width: 14px;
            height: 14px;
            stroke: #6ee7c7;
            fill: none;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .file-item textarea {
        flex: 1;
        resize: vertical;
        min-height: 54px;
        line-height: 1.5;
    }

    .file-status-required {
        font-size: 11.5px;
        color: #f87171;
        margin-top: 3px;
        display: flex;
        align-items: center;
        gap: 4px;
        line-height: 1;
    }

    .choose-btn {
        padding: 8px 16px;
        font-size: 12px;
        background: rgba(38, 38, 36, 1);
        color: rgba(250, 249, 245, 1);
        border: 0.5px solid rgba(222, 220, 209, 0.3);
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.15s, transform 0.1s;
    }

    .ms-block {
        --ms-bg: #0f1420;
        --ms-field: #161b27;
        --ms-border: #222b3a;
        --ms-border-hi: #2c3850;
        --ms-text: #e6edf3;
        --ms-muted: #6b7689;
        --ms-placeholder: #5a6678;
        --ms-teal: #2dd4bf;
        --ms-red: #f47171;
        --ms-amber: #e0b54a;
        --ms-list-max: 340px; /* tune: how tall the scrolling area gets before it scrolls */

        background: var(--ms-bg);
        color: var(--ms-text);
        padding: 18px;
        border-radius: 10px;
        font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
        display: flex;
        flex-direction: column;
        max-height: 100%; /* lets it fill a height-constrained modal body */
        min-height: 0;
    }

    .ms-header {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 14px;
        flex: 0 0 auto;
    }

    /* Only this region scrolls; header above and footer below stay put. */
    .ms-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: var(--ms-list-max);
        overflow-y: auto;
        /* keep the scrollbar off the content edge */
        padding-right: 6px;
        margin-right: -6px;
        scrollbar-width: thin;
        scrollbar-color: var(--ms-border-hi) transparent;
    }

        .ms-list::-webkit-scrollbar {
            width: 8px;
        }

        .ms-list::-webkit-scrollbar-thumb {
            background: var(--ms-border-hi);
            border-radius: 8px;
        }

        .ms-list::-webkit-scrollbar-track {
            background: transparent;
        }

    /* Pinned: Add button + running total, always on screen. */
    .ms-footer {
        flex: 0 0 auto;
        padding-top: 4px;
    }

    .ms-optional {
        color: var(--ms-muted);
        font-weight: 500;
    }

    .ms-row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: start;
        gap: 12px;
        margin-bottom: 12px;
    }

    .ms-radio {
        display: flex;
        align-items: center;
        height: 38px;
        margin-top: 20px;
    }

        .ms-radio input[type="radio"] {
            appearance: none;
            width: 16px;
            height: 16px;
            border: 2px solid var(--ms-teal);
            border-radius: 50%;
            background: transparent;
            cursor: pointer;
            position: relative;
        }

            .ms-radio input[type="radio"]:checked::after {
                content: "";
                position: absolute;
                inset: 3px;
                border-radius: 50%;
                background: var(--ms-teal);
            }

    .ms-fields {
        display: grid;
        grid-template-columns: 1fr 160px;
        gap: 8px 12px;
    }

    .ms-field {
        display: flex;
        flex-direction: column;
    }

    .ms-field-desc {
        grid-column: 1 / -1;
    }

    .field-label {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .02em;
        color: var(--ms-muted);
        margin-bottom: 5px;
    }

    .field-label-hint {
        font-weight: 500;
        color: var(--ms-muted);
        opacity: .8;
    }

    .ms-desc-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .ms-desc-toggle {
        background: none;
        border: none;
        padding: 2px 0;
        color: var(--ms-teal);
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }

        .ms-desc-toggle:hover {
            text-decoration: underline;
        }

    .ms-desc-add {
        margin-top: 2px;
        align-self: flex-start;
    }

    /* Animated reveal: the grid 0fr -> 1fr trick lets height ease from 0 to auto.
               The textarea is always mounted (so binding survives), just collapsed. */
    .ms-desc-wrap {
        display: grid;
        grid-template-rows: 0fr;
        margin-top: 0;
        transition: grid-template-rows .22s ease, opacity .2s ease, margin-top .22s ease;
    }

        .ms-desc-wrap.is-open {
            grid-template-rows: 1fr;
            opacity: 1;
            margin-top: 6px;
        }

    .ms-desc-inner {
        overflow: hidden;
        min-height: 0;
    }

    .ms-input {
        background: var(--ms-field);
        border: 1px solid var(--ms-border);
        border-radius: 7px;
        color: var(--ms-text);
        padding: 9px 12px;
        font-size: 13px;
        outline: none;
        width: 100%;
        box-sizing: border-box;
        transition: border-color .15s ease;
    }

        .ms-input::placeholder {
            color: var(--ms-placeholder);
        }

        .ms-input:focus {
            border-color: var(--ms-border-hi);
        }

    .ms-textarea {
        resize: vertical;
        min-height: 38px;
        line-height: 1.4;
    }

    .ms-remove {
        height: 38px;
        width: 38px;
        margin-top: 20px;
        background: var(--ms-field);
        border: 1px solid var(--ms-border);
        border-radius: 7px;
        color: var(--ms-muted);
        cursor: pointer;
        font-size: 13px;
        transition: color .15s ease, border-color .15s ease;
    }

        .ms-remove:hover {
            color: var(--ms-text);
            border-color: var(--ms-border-hi);
        }

    .ms-add {
        width: 100%;
        background: var(--ms-field);
        border: 1px solid var(--ms-border);
        border-radius: 7px;
        color: var(--ms-text);
        padding: 11px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: border-color .15s ease;
    }

        .ms-add:hover {
            border-color: var(--ms-border-hi);
        }

    /* Running total */
    .ms-total {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--ms-border);
        font-size: 13px;
    }

    .ms-total-label {
        color: var(--ms-muted);
        margin-right: auto;
    }

    .ms-total-value {
        font-weight: 700;
        font-size: 15px;
    }

    .ms-total-sep {
        color: var(--ms-muted);
    }

    .ms-total-budget {
        color: var(--ms-muted);
    }

    .ms-total-status {
        margin-left: 8px;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
    }

        .ms-total-status.is-balanced {
            color: var(--ms-teal);
            background: rgba(45,212,191,.12);
        }

        .ms-total-status.is-over {
            color: var(--ms-red);
            background: rgba(244,113,113,.12);
        }

        .ms-total-status.is-under {
            color: var(--ms-amber);
            background: rgba(224,181,74,.12);
        }

    @media (prefers-reduced-motion: reduce) {
        .ms-desc-wrap {
            transition: none;
        }
    }
    /* ── Modal shell ── */
    .prg-modal {
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius-lg);
        width: 100%;
        max-width: 680px;
        max-height: 90vh;
        min-height: 75vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: var(--shadow-lg);
        animation: prg-rise .28s cubic-bezier(.4,0,.2,1) both;
    }

    @keyframes prg-rise {
        from {
            opacity: 0;
            transform: translateY(18px) scale(.98);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    /* ── Header ── */
    .prg-header {
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
        padding: 20px 24px 16px;
        background: linear-gradient(135deg, rgba(167,139,250,.12) 0%, rgba(77,142,255,.07) 50%, var(--bx-surface2) 100% );
        border-bottom: 1px solid var(--bx-border);
    }

    .prg-header-glow {
        position: absolute;
        right: -60px;
        top: -60px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: radial-gradient(ellipse, rgba(167,139,250,.2) 0%, transparent 70%);
        pointer-events: none;
    }

    .prg-header-inner {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 14px;
    }

    .prg-uid {
        font-size: 10px;
        font-family: monospace;
        color: var(--bx-purple);
        letter-spacing: .8px;
        margin-bottom: 4px;
        opacity: .85;
    }

    .prg-title {
        font-family: var(--font-display);
        font-size: 17px;
        font-weight: 800;
        letter-spacing: -.4px;
        margin-bottom: 3px;
    }

    .prg-cat {
        font-size: 12px;
        color: var(--bx-muted);
    }

    /* Overall ring badge */
    .prg-overall-badge {
        display: flex;
        align-items: center;
        gap: 9px;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--bx-border);
        border-radius: 10px;
        padding: 8px 12px;
    }

    .prg-overall-ring {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        position: relative;
    }

    .prg-overall-ring-inner {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--bx-surface);
        display: grid;
        place-items: center;
        font-family: var(--font-display);
        font-size: 10px;
        font-weight: 800;
        color: var(--bx-accent);
    }

    /* Master bar */
    .prg-master-bar-wrap {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        z-index: 1;
    }

    .prg-master-bar {
        flex: 1;
        height: 6px;
        background: rgba(255,255,255,.07);
        border-radius: 6px;
        overflow: hidden;
        position: relative;
    }

    .prg-master-fill {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        border-radius: 6px;
        background: linear-gradient(90deg, var(--bx-accent), var(--bx-blue));
        transition: width .6s ease;
    }

    .prg-master-fill-glow {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        border-radius: 6px;
        background: linear-gradient(90deg, rgba(0,198,162,.4), rgba(77,142,255,.4));
        filter: blur(4px);
        transition: width .6s ease;
    }

    .prg-master-pct {
        font-size: 11px;
        font-weight: 700;
        color: var(--bx-accent);
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* ── Tabs ── */
    .prg-tabs {
        display: flex;
        align-items: center;
        padding: 0 24px;
        border-bottom: 1px solid var(--bx-border);
        flex-shrink: 0;
        background: var(--bx-surface);
    }

    .prg-tab {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 12px 14px;
        border: none;
        background: none;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 500;
        color: var(--bx-muted);
        cursor: pointer;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        transition: var(--transition);
        white-space: nowrap;
    }

        .prg-tab:hover {
            color: var(--bx-text);
        }

        .prg-tab.active {
            color: var(--bx-purple);
            border-bottom-color: var(--bx-purple);
        }

    .prg-tab-num {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--bx-surface2);
        border: 1.5px solid var(--bx-border);
        display: grid;
        place-items: center;
        font-size: 9px;
        font-weight: 800;
        flex-shrink: 0;
        transition: var(--transition);
    }

    .prg-tab.active .prg-tab-num {
        background: var(--bx-purple);
        border-color: var(--bx-purple);
        color: #fff;
    }

    .prg-tab-num.done {
        background: rgba(0,198,162,.15);
        border-color: var(--bx-accent);
        color: var(--bx-accent);
    }

    .prg-tab-connector {
        flex: 1;
        height: 1px;
        background: var(--bx-border);
        max-width: 32px;
        margin: 0 2px;
    }

    .prg-tab-badge {
        font-size: 9px;
        font-weight: 800;
        background: rgba(245,166,35,.18);
        color: var(--bx-amber);
        padding: 1px 5px;
        border-radius: 20px;
    }

    /* ── Body (scrollable) ── */
    .prg-body {
        flex: 1;
        overflow-y: auto;
        padding: 20px 24px;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    /* ── Section ── */
    .prg-section {
        display: flex;
        flex-direction: column;
        gap: 7px;
    }

    .prg-section-label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .9px;
        text-transform: uppercase;
        color: var(--bx-muted);
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .prg-section-label::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--bx-border);
        }

    .prg-section-hint {
        font-size: 12px;
        color: var(--bx-muted);
        line-height: 1.55;
    }

    .prg-label-badge {
        font-size: 9px;
        font-weight: 700;
        background: rgba(255,255,255,.06);
        color: var(--bx-muted);
        padding: 2px 6px;
        border-radius: 4px;
        text-transform: uppercase;
        letter-spacing: .4px;
        flex-shrink: 0;
    }

    /* ── Textarea ── */
    .prg-textarea {
        width: 100%;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--bx-border);
        border-radius: 8px;
        color: var(--bx-text);
        font-family: var(--font-body);
        font-size: 13px;
        line-height: 1.65;
        padding: 11px 13px;
        resize: vertical;
        outline: none;
        transition: var(--transition);
    }

        .prg-textarea:focus {
            border-color: rgba(167,139,250,.55);
            box-shadow: 0 0 0 3px rgba(167,139,250,.1);
        }

        .prg-textarea::placeholder {
            color: rgba(255,255,255,.2);
        }

        .prg-textarea.prg-err {
            border-color: rgba(255,91,91,.5);
            box-shadow: 0 0 0 3px rgba(255,91,91,.08);
        }

    .prg-textarea-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .prg-err-txt {
        font-size: 11px;
        color: var(--bx-red);
    }

    .prg-char {
        font-size: 11px;
        color: var(--bx-muted);
    }

    /* ── Update type grid ── */
    .prg-type-grid {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 8px;
    }

    .prg-type-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        padding: 12px 8px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 9px;
        cursor: pointer;
        transition: var(--transition);
        position: relative;
        text-align: center;
    }

        .prg-type-card:hover {
            border-color: var(--utc);
        }

    .prg-type-active {
        border-color: var(--utc) !important;
        background: color-mix(in srgb, var(--utc) 10%, var(--bx-surface2) 90%) !important;
        box-shadow: 0 0 0 1px var(--utc);
    }

    .prg-type-ic {
        font-size: 18px;
        line-height: 1;
    }

    .prg-type-lbl {
        font-size: 10px;
        font-weight: 600;
        color: var(--bx-muted);
        line-height: 1.3;
    }

    .prg-type-active .prg-type-lbl {
        color: var(--utc);
    }

    .prg-type-check {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: var(--utc);
        display: grid;
        place-items: center;
    }

    /* ── Milestones ── */
    .prg-ms-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .prg-ms-card {
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 10px;
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        transition: var(--transition);
    }

        .prg-ms-card:hover {
            border-color: var(--bx-border-hi);
        }

    .prg-ms-done {
        border-color: rgba(0,198,162,.35) !important;
        background: rgba(0,198,162,.04) !important;
    }

    .prg-ms-header {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .prg-ms-num-badge {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: rgba(167,139,250,.14);
        border: 1px solid rgba(167,139,250,.3);
        color: var(--bx-purple);
        font-size: 11px;
        font-weight: 800;
        display: grid;
        place-items: center;
        flex-shrink: 0;
        font-family: var(--font-display);
    }

    .prg-ms-done .prg-ms-num-badge {
        background: rgba(0,198,162,.15);
        border-color: rgba(0,198,162,.4);
        color: var(--bx-accent);
    }

    .prg-ms-title {
        font-size: 13px;
        font-weight: 600;
    }

    .prg-ms-sub {
        font-size: 11px;
        color: var(--bx-muted);
        margin-top: 2px;
    }

    .prg-ms-done-toggle {
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        user-select: none;
        margin-left: auto;
        flex-shrink: 0;
    }

    .prg-ms-check {
        width: 18px;
        height: 18px;
        border-radius: 5px;
        border: 1.5px solid var(--bx-border);
        background: var(--bx-surface);
        display: grid;
        place-items: center;
        transition: var(--transition);
        flex-shrink: 0;
    }

    .prg-ms-check-done {
        background: var(--bx-accent) !important;
        border-color: var(--bx-accent) !important;
        box-shadow: 0 0 8px rgba(0,198,162,.35);
    }

    .prg-ms-done-lbl {
        font-size: 11px;
        font-weight: 600;
        color: var(--bx-muted);
    }

    /* Pct row */
    .prg-ms-pct-row {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .prg-ms-pct-display {
        font-family: var(--font-display);
        font-size: 20px;
        font-weight: 800;
        letter-spacing: -1px;
        min-width: 48px;
        text-align: center;
        flex-shrink: 0;
    }

    .prg-ms-select {
        flex: 1;
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
        color: var(--bx-text);
        font-family: var(--font-body);
        font-size: 12px;
        padding: 8px 11px;
        outline: none;
        cursor: pointer;
        transition: var(--transition);
    }

        .prg-ms-select:focus {
            border-color: rgba(167,139,250,.5);
            box-shadow: 0 0 0 3px rgba(167,139,250,.1);
        }

        .prg-ms-select option {
            background: #111318;
        }

    .prg-ms-track {
        height: 5px;
        background: rgba(255,255,255,.06);
        border-radius: 5px;
        overflow: hidden;
        position: relative;
    }

    .prg-ms-fill {
        height: 100%;
        border-radius: 5px;
        transition: width .4s ease;
    }

    .prg-ms-note {
        width: 100%;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--bx-border);
        border-radius: 6px;
        color: var(--bx-text);
        font-family: var(--font-body);
        font-size: 12px;
        padding: 8px 10px;
        resize: none;
        outline: none;
        transition: var(--transition);
    }

        .prg-ms-note:focus {
            border-color: rgba(167,139,250,.4);
        }

        .prg-ms-note::placeholder {
            color: rgba(255,255,255,.2);
        }

    .prg-ms-note-wrap {
        margin-top: -2px;
    }

    /* Done milestones collapsed section */
    .prg-done-section {
        border-top: 1px dashed var(--bx-border);
        padding-top: 12px;
    }

    .prg-done-toggle {
        display: flex;
        align-items: center;
        gap: 7px;
        background: none;
        border: none;
        font-family: var(--font-body);
        font-size: 12px;
        color: var(--bx-muted);
        cursor: pointer;
        transition: color .15s;
        padding: 0;
    }

        .prg-done-toggle:hover {
            color: var(--bx-text);
        }

    .prg-done-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 10px;
    }

    .prg-done-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: var(--bx-muted);
    }

    .prg-done-date {
        margin-left: auto;
        font-size: 10px;
    }

    /* Empty state */
    .prg-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 40px 24px;
        text-align: center;
    }

    .prg-empty-title {
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 700;
    }

    .prg-empty-sub {
        font-size: 13px;
        color: var(--bx-muted);
    }

    /* ── Dropzone ── */
    .prg-dropzone {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 28px 20px;
        border: 2px dashed var(--bx-border);
        border-radius: 10px;
        cursor: pointer;
        transition: var(--transition);
        background: rgba(0,198,162,.02);
        text-align: center;
        position: relative;
    }

        .prg-dropzone:hover {
            border-color: var(--bx-accent);
            background: var(--bx-accent-dim);
        }

    .prg-dz-icon {
        font-size: 26px;
        opacity: .45;
    }

    .prg-dz-text {
        font-size: 13px;
        color: var(--bx-text);
    }

        .prg-dz-text strong {
            color: var(--bx-accent);
        }

    .prg-dz-hint {
        font-size: 11px;
        color: var(--bx-muted);
    }

    /* File list */
    .prg-file-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 10px;
    }

    .prg-file-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 13px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 8px;
        transition: var(--transition);
    }

        .prg-file-row:hover {
            border-color: var(--bx-border-hi);
        }

    .prg-file-ext {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        display: grid;
        place-items: center;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .4px;
        flex-shrink: 0;
    }

    .prg-file-info {
        flex: 1;
        min-width: 0;
    }

    .prg-file-name {
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .prg-file-meta {
        font-size: 10px;
        color: var(--bx-muted);
        margin-top: 1px;
    }

    .prg-file-del {
        background: none;
        border: none;
        color: var(--bx-muted);
        cursor: pointer;
        font-size: 14px;
        padding: 3px 6px;
        border-radius: 4px;
        transition: var(--transition);
    }

        .prg-file-del:hover {
            color: var(--bx-red);
        }

    /* File ext colours */
    .ext-rvt {
        background: rgba(77,142,255,.2);
        color: var(--bx-blue);
    }

    .ext-ifc {
        background: rgba(0,198,162,.2);
        color: var(--bx-accent);
    }

    .ext-dwg, .ext-dxf {
        background: rgba(245,166,35,.2);
        color: var(--bx-amber);
    }

    .ext-pdf {
        background: rgba(255,91,91,.2);
        color: var(--bx-red);
    }

    .ext-nwc, .ext-nwd {
        background: rgba(167,139,250,.2);
        color: var(--bx-purple);
    }

    .ext-other {
        background: var(--bx-surface);
        color: var(--bx-muted);
    }

    /* ── Link input ── */
    .prg-link-input-wrap {
        display: flex;
        align-items: center;
        gap: 10px;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--bx-border);
        border-radius: 8px;
        padding: 0 13px;
        transition: var(--transition);
    }

        .prg-link-input-wrap:focus-within {
            border-color: rgba(77,142,255,.5);
            box-shadow: 0 0 0 3px rgba(77,142,255,.1);
        }

        .prg-link-input-wrap.prg-err {
            border-color: rgba(255,91,91,.5) !important;
        }

        .prg-link-input-wrap.prg-valid {
            border-color: rgba(0,198,162,.4);
        }

    .prg-link-icon {
        color: var(--bx-muted);
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }

    .prg-link-input {
        flex: 1;
        background: none;
        border: none;
        outline: none;
        font-family: var(--font-body);
        font-size: 13px;
        color: var(--bx-text);
        padding: 11px 0;
    }

        .prg-link-input::placeholder {
            color: rgba(255,255,255,.22);
        }

    .prg-link-valid {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: rgba(0,198,162,.15);
        border: 1px solid rgba(0,198,162,.3);
        display: grid;
        place-items: center;
        flex-shrink: 0;
    }

    .prg-platform-row {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-top: 6px;
        flex-wrap: wrap;
    }

    .prg-platform-chip {
        padding: 4px 10px;
        border-radius: 20px;
        border: 1px solid var(--bx-border);
        background: rgba(255,255,255,.04);
        font-family: var(--font-body);
        font-size: 11px;
        font-weight: 500;
        color: var(--bx-muted);
        cursor: pointer;
        transition: var(--transition);
    }

        .prg-platform-chip:hover {
            border-color: var(--bx-blue);
            color: var(--bx-blue);
            background: var(--bx-blue-dim);
        }

    /* ── Footer ── */
    .prg-footer {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 24px;
        border-top: 1px solid var(--bx-border);
        background: var(--bx-surface);
        gap: 12px;
    }

    .prg-footer-summary {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        flex: 1;
        justify-content: center;
    }

    .prg-footer-chip {
        font-size: 10px;
        font-weight: 700;
        padding: 3px 9px;
        border-radius: 20px;
        letter-spacing: .2px;
    }

    .prg-fc-green {
        background: rgba(0,198,162,.12);
        color: var(--bx-accent);
        border: 1px solid rgba(0,198,162,.3);
    }

    .prg-fc-blue {
        background: rgba(77,142,255,.12);
        color: var(--bx-blue);
        border: 1px solid rgba(77,142,255,.3);
    }

    .prg-fc-purple {
        background: rgba(167,139,250,.12);
        color: var(--bx-purple);
        border: 1px solid rgba(167,139,250,.3);
    }

    /* ── Spinner ── */
    .prg-spinner {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 2px solid rgba(0,0,0,.2);
        border-top-color: #000;
        animation: prgspin .65s linear infinite;
        flex-shrink: 0;
    }

    @keyframes prgspin {
        to {
            transform: rotate(360deg);
        }
    }


    [tabindex="-1"]:focus {
        outline: none;
    }






























    /* =================================================================
     1) PRODUCTION CSS  — copy from here ↓ to the end of this <style>
     ================================================================= */
    #components-reconnect-modal {
        --bx-scrim: rgba(8, 12, 20, 0.86);
        --bx-card: #15212f;
        --bx-card-border: rgba(94, 234, 212, 0.14);
        --bx-teal: #2dd4bf;
        --bx-teal-2: #5eead4;
        --bx-teal-soft: rgba(45, 212, 191, 0.12);
        --bx-teal-ring: rgba(45, 212, 191, 0.30);
        --bx-ink: #f1f5f9;
        --bx-muted: #93a4bb;
        --bx-danger: #f87171;
        --bx-danger-soft: rgba(248, 113, 113, 0.12);
        --bx-warning: #fbbf24;
        --bx-warning-soft: rgba(251, 191, 36, 0.12);
        /* hidden by default; Blazor toggles the state classes to reveal it */
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1000;
        align-items: center;
        justify-content: center;
        background-color: var(--bx-scrim);
        background-image: linear-gradient(rgba(94, 234, 212, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 234, 212, 0.045) 1px, transparent 1px);
        background-size: 34px 34px;
    }

        /* state classes set/unset by Blazor on #components-reconnect-modal */
        #components-reconnect-modal.components-reconnect-show,
        #components-reconnect-modal.components-reconnect-failed,
        #components-reconnect-modal.components-reconnect-rejected {
            display: flex;
        }

        #components-reconnect-modal.components-reconnect-hide {
            display: none;
        }

    .bx-card {
        width: min(92vw, 380px);
        padding: 2rem 2rem 2.1rem;
        background: var(--bx-card);
        border: 1px solid var(--bx-card-border);
        border-radius: 18px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
        text-align: center;
    }

    /* --- logo lockup --- */
    .bx-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        margin-bottom: 1.75rem;
    }

    .bx-logo-mark {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        background: var(--bx-teal);
        color: #06231f;
        border-radius: 9px;
        font-family: 'Archivo', sans-serif;
        font-weight: 800;
        font-size: 0.8rem;
        letter-spacing: 0.02em;
    }

    .bx-logo-word {
        font-family: 'Archivo', sans-serif;
        font-weight: 800;
        font-size: 1.15rem;
        letter-spacing: 0.04em;
        color: var(--bx-ink);
    }

        .bx-logo-word em {
            font-style: normal;
            color: var(--bx-teal);
        }

    /* --- badge with activity ring (the signature element) --- */
    .bx-badge {
        position: relative;
        width: 76px;
        height: 76px;
        margin: 0 auto 1.4rem;
    }

    .bx-badge-fill {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--bx-teal-soft);
        border: 1px solid var(--bx-teal-ring);
        color: var(--bx-teal);
    }

        .bx-badge-fill svg {
            width: 30px;
            height: 30px;
        }

    .bx-badge-ring {
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 2px solid transparent;
        border-top-color: var(--bx-teal);
        animation: bx-spin 1.1s linear infinite;
    }

    /* --- text --- */
    .bx-title {
        margin: 0 0 0.5rem;
        font-family: 'Archivo', sans-serif;
        font-weight: 700;
        font-size: 1.5rem;
        letter-spacing: -0.01em;
        color: var(--bx-ink);
    }

    .bx-subtitle {
        margin: 0;
        font-family: 'Inter', sans-serif;
        font-size: 0.92rem;
        line-height: 1.55;
        color: var(--bx-muted);
    }

    /* --- retry detail --- */
    .bx-meta {
        margin-top: 1.4rem;
    }

    .bx-attempt {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.8rem;
        letter-spacing: 0.04em;
        color: var(--bx-teal-2);
    }

        .bx-attempt span {
            color: var(--bx-ink);
        }

    .bx-track {
        height: 4px;
        margin-top: 0.7rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        overflow: hidden;
    }

    .bx-bar {
        height: 100%;
        width: 0;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--bx-teal), var(--bx-teal-2));
    }

    /* --- action button (failed / rejected states) --- */
    .bx-btn {
        margin-top: 1.3rem;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.7rem 1.5rem;
        background: var(--bx-teal);
        color: #06231f;
        border: none;
        border-radius: 10px;
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 0.92rem;
        cursor: pointer;
        transition: background 0.15s ease;
    }

        .bx-btn:hover {
            background: var(--bx-teal-2);
        }

        .bx-btn:focus-visible {
            outline: 2px solid var(--bx-teal-2);
            outline-offset: 2px;
        }

    /* --- per-state content swap --- */
    .bx-state {
        display: none;
    }

    #components-reconnect-modal.components-reconnect-show .bx-state-retrying {
        display: block;
    }

    #components-reconnect-modal.components-reconnect-failed .bx-state-failed {
        display: block;
    }

    #components-reconnect-modal.components-reconnect-rejected .bx-state-rejected {
        display: block;
    }

    /* failed/rejected recolor the badge */
    .bx-state-failed .bx-badge-fill {
        background: var(--bx-danger-soft);
        border-color: var(--bx-danger);
        color: var(--bx-danger);
    }

    .bx-state-rejected .bx-badge-fill {
        background: var(--bx-warning-soft);
        border-color: var(--bx-warning);
        color: var(--bx-warning);
    }

    .bx-state-failed .bx-title {
        color: var(--bx-danger);
    }

    .bx-state-rejected .bx-title {
        color: var(--bx-warning);
    }

    @keyframes bx-spin {
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes bx-retry-fill {
        from {
            width: 0;
        }

        to {
            width: 100%;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .bx-badge-ring {
            animation: none;
            opacity: 0.5;
        }

        .bx-bar {
            transition: none;
        }
    }




    /* Moderator Page */
    /* Badge */
    .adm-badge {
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1.2px;
        background: linear-gradient(135deg,#FF5B5B,#F5A623);
        color: #fff;
        padding: 3px 9px;
        border-radius: 4px;
        font-family: var(--font-display);
    }

    /* Page */
    .adm-page {
        position: relative;
        height: calc(100vh - 90px);
        display: flex;
        flex-direction: column;
    }

    .adm-loading-overlay {
        position: absolute;
        inset: 0;
        background: rgba(255,255,255,.7);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    /* Stats */
    .adm-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: 1px;
        background: var(--bx-border);
        border-bottom: 1px solid var(--bx-border);
    }

    .adm-stat {
        background: var(--bx-surface);
        padding: 16px 18px;
        display: flex;
        align-items: center;
        gap: 12px;
        transition: var(--transition);
    }

        .adm-stat:hover {
            background: var(--bx-surface2);
        }

    .adm-stat-ic {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        display: grid;
        place-items: center;
        font-size: 16px;
        flex-shrink: 0;
    }

    .adm-stat-val {
        font-family: var(--font-display);
        font-size: 20px;
        font-weight: 800;
        letter-spacing: -1px;
        line-height: 1;
    }

    .adm-stat-lbl {
        font-size: 11px;
        color: var(--bx-muted);
        margin-top: 2px;
    }

    /* Toolbar */
    .adm-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 24px;
        border-bottom: 1px solid var(--bx-border);
        background: var(--bx-surface);
        flex-wrap: wrap;
    }

    .adm-search-wrap {
        position: relative;
        display: flex;
        align-items: center;
        min-width: 220px;
    }

    .adm-search-ic {
        position: absolute;
        left: 11px;
        color: var(--bx-muted);
        pointer-events: none;
    }

    .adm-search {
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius-sm);
        color: var(--bx-text);
        font-family: var(--font-body);
        font-size: 13px;
        padding: 8px 30px 8px 34px;
        outline: none;
        transition: var(--transition);
        width: 100%;
    }

        .adm-search:focus {
            border-color: var(--bx-accent);
            box-shadow: 0 0 0 3px var(--bx-accent-dim);
        }

        .adm-search::placeholder {
            color: rgba(255,255,255,.22);
        }

    .adm-search-clear {
        position: absolute;
        right: 9px;
        background: none;
        border: none;
        color: var(--bx-muted);
        cursor: pointer;
        font-size: 12px;
    }

        .adm-search-clear:hover {
            color: var(--bx-text);
        }

    .adm-role-tabs {
        display: flex;
        gap: 2px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius-sm);
        padding: 3px;
    }

    .adm-rtab {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 6px 12px;
        border-radius: 4px;
        border: 1px solid transparent;
        background: none;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 500;
        color: whitesmoke;
        cursor: pointer;
        transition: var(--transition);
        white-space: nowrap;
    }

        .adm-rtab:hover {
            color: var(--bx-text);
        }

    .adm-rtab-active {
        background: rgba(255,255,255,.06) !important;
        color: var(--bx-text) !important;
        border-color: var(--bx-border) !important;
    }

    .adm-rtab-cnt {
        font-size: 10px;
        font-weight: 700;
        background: rgba(255,255,255,.07);
        padding: 1px 6px;
        border-radius: 20px;
    }

    .adm-select {
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius-sm);
        color: var(--bx-text);
        font-family: var(--font-body);
        font-size: 12px;
        padding: 7px 10px;
        outline: none;
        cursor: pointer;
    }

        .adm-select option {
            background: #111318;
        }

    /* Table */
    .adm-table-wrap {
        flex: 1;
        overflow-y: auto;
        overflow-x: auto;
        background-color: #0f172a;
    }

    .adm-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }

        .adm-table th {
            padding: 11px 16px;
            text-align: left;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .8px;
            text-transform: uppercase;
            color: #cbd5e1;
            border-bottom: 1px solid var(--bx-border);
            background: #0f172a;
            white-space: nowrap;
        }

        .adm-table td {
            padding: 13px 16px;
            border-bottom: 1px solid var(--bx-border);
            vertical-align: middle;
            background: #1e293b;
            color: #f8fafc;
        }

    .adm-tr {
        transition: background .15s;
    }

        .adm-tr:hover {
            background: rgba(255,255,255,.025);
        }

    .adm-tr-sel {
        background: rgba(77,142,255,.06) !important;
    }

    .adm-tr-suspended td {
        background: #472a2d !important; /* dark red */
        color: #f8d7da !important;
    }

    .adm-tr-suspended:hover td {
        background: #5a3135 !important;
    }

    .adm-tr-suspended td:not(:first-child):not(:last-child) {
        text-decoration: line-through;
        text-decoration-color: rgba(255,255,255,.2);
    }

    .adm-table tbody tr:nth-child(even) td {
        background: #233248;
    }

    .adm-table tbody tr:nth-child(odd) td {
        background: #1e293b;
    }

    /* Checkbox */
    .adm-checkbox {
        width: 15px;
        height: 15px;
        cursor: pointer;
        accent-color: var(--bx-blue);
    }

    .email-confirmed {
        color: #22c55e;
        background: rgba(34, 197, 94, 0.10);
        border: 1px solid rgba(34, 197, 94, 0.25);
    }

    .email-not-confirmed {
        color: #f59e0b;
        background: rgba(245, 158, 11, 0.10);
        border: 1px solid rgba(245, 158, 11, 0.25);
    }

    .adm-act-email {
        color: #3b82f6;
    }

        .adm-act-email:hover {
            background: rgba(59, 130, 246, 0.12);
            color: #2563eb;
        }
    /* User cell */
    .adm-user-cell {
        display: flex;
        align-items: center;
        gap: 11px;
    }

    .adm-avatar {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: linear-gradient(135deg,var(--avc),color-mix(in srgb,var(--avc) 60%,#000 40%));
        display: grid;
        place-items: center;
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 13px;
        color: #fff;
        flex-shrink: 0;
        position: relative;
    }

    .adm-online {
        position: absolute;
        bottom: 1px;
        right: 1px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--bx-accent);
        border: 1.5px solid var(--bx-surface);
        box-shadow: 0 0 5px rgba(0,198,162,.5);
    }

    .adm-user-name {
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
    }

    .adm-user-email {
        font-size: 12px;
        white-space: nowrap;
    }

    .adm-user-id {
        font-size: 12px;
        color: var(--bx-accent);
        font-family: monospace;
        letter-spacing: .4px;
        margin-top: 1px;
    }

    /* Role chip */
    .adm-role-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        font-weight: 700;
        padding: 3px 9px;
        border-radius: 20px;
        border: 1px solid;
        white-space: nowrap;
    }

    /* Status chip */
    .adm-status-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        font-weight: 700;
        padding: 3px 9px;
        border-radius: 20px;
        letter-spacing: .3px;
        text-transform: capitalize;
    }

        .adm-status-chip::before {
            content: '';
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: currentColor;
            flex-shrink: 0;
        }

    .status-active {
        background: rgba(0,198,162,.12);
        color: var(--bx-accent);
        border: 1px solid rgba(0,198,162,.3);
    }

    .status-suspended {
        background: rgba(255,91,91,.1);
        color: var(--bx-red);
        border: 1px solid rgba(255,91,91,.25);
    }

    .status-pending {
        background: rgba(245,166,35,.12);
        color: var(--bx-amber);
        border: 1px solid rgba(245,166,35,.28);
    }

    .adm-td-muted {
        font-size: 12px;
        color: var(--bx-muted);
        white-space: nowrap;
    }

    /* Activity pills */
    .adm-activity-cell {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
    }

    .adm-act-pill {
        font-size: 13px;
        font-weight: 600;
        padding: 3px 8px;
        border-radius: 20px;
    }

    .adm-act-blue {
        background: var(--bx-blue-dim);
        color: var(--bx-blue);
    }

    .adm-act-accent {
        background: var(--bx-accent-dim);
        color: var(--bx-accent);
    }

    .adm-act-purple {
        background: var(--bx-purple-dim);
        color: var(--bx-purple);
    }

    .adm-act-amber {
        background: var(--bx-amber-dim);
        color: var(--bx-amber);
    }

    /* Table action buttons */
    .adm-actions-cell {
        display: flex;
        align-items: center;
        gap: 4px;
        justify-content: flex-end;
    }

    .adm-act-btn {
        width: 35px;
        height: 35px;
        font-size: 20px;
        border-radius: 6px;
        border: 1px solid var(--bx-border);
        background: var(--bx-surface2);
        color: var(--bx-muted);
        display: grid;
        place-items: center;
        cursor: pointer;
        transition: var(--transition);
    }

        .adm-act-btn:hover {
            border-color: var(--bx-border-hi);
            color: var(--bx-text);
        }

    .adm-act-warn:hover {
        border-color: rgba(245,166,35,.45);
        color: var(--bx-amber);
        background: var(--bx-amber-dim);
    }

    .adm-act-green:hover {
        border-color: rgba(0,198,162,.4);
        color: var(--bx-accent);
        background: var(--bx-accent-dim);
    }

    .adm-act-del:hover {
        border-color: rgba(255,91,91,.4);
        color: var(--bx-red);
        background: var(--bx-red-dim);
    }

    /* Bulk bar */
    .adm-bulk-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        background: #1e293b;
        border-top: 1px solid #334155;
    }

    .adm-bulk-count {
        margin-left: 15px;
        left: 16px;
        font-size: 15px;
        font-weight: 700;
        color: var(--bx-blue);
    }

    .adm-bulk-actions {
        display: flex;
        justify-content: center;
        gap: 7px;
    }

    .adm-bulk-btn {
        padding: 10px 14px;
        border-radius: 6px;
        border: 1px solid var(--bx-border);
        background: var(--bx-surface2);
        font-family: var(--font-body);
        font-size: 13px;
        font-weight: 600;
        color: var(--bx-muted);
        cursor: pointer;
        transition: var(--transition);
    }

        .adm-bulk-btn:hover {
            border-color: var(--bx-border-hi);
            color: var(--bx-text);
        }

    .adm-bulk-warn {
        color: var(--bx-amber) !important;
        border-color: rgba(245,166,35,.3) !important;
    }

    .adm-bulk-green {
        color: var(--bx-accent) !important;
        border-color: rgba(0,198,162,.3) !important;
    }

    .adm-bulk-del {
        color: var(--bx-red) !important;
        border-color: rgba(255,91,91,.3) !important;
    }

    /* Empty */
    .adm-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 72px 24px;
        text-align: center;
    }

    .adm-empty-icon {
        font-size: 32px;
        opacity: .18;
    }

    .adm-empty-title {
        font-family: var(--font-display);
        font-size: 16px;
        font-weight: 700;
    }

    .adm-empty-sub {
        font-size: 13px;
        color: var(--bx-muted);
    }

    /* ═══ CREATE/EDIT MODAL ═══ */
    .adm-modal {
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius-lg);
        width: 100%;
        max-width: 640px;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: var(--shadow-lg);
        animation: admrise .26s cubic-bezier(.4,0,.2,1);
    }

    keyframes admrise {
        from {
            opacity: 0;
            transform: translateY(16px) scale(.98)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

    .adm-modal-header {
        padding: 20px 24px 16px;
        border-bottom: 1px solid var(--bx-border);
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        background: linear-gradient(135deg,rgba(255,91,91,.05),transparent);
    }

    .adm-modal-title {
        font-size: 16px;
        font-weight: 800;
        letter-spacing: -.3px;
        margin-bottom: 3px;
    }

    .adm-modal-sub {
        font-size: 12px;
        color: var(--bx-muted);
    }

    .adm-modal-body {
        flex: 1;
        overflow-y: auto;
        padding: 20px 24px;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

        .adm-modal-body::-webkit-scrollbar {
            width: 3px;
        }

        .adm-modal-body::-webkit-scrollbar-thumb {
            background: var(--bx-border);
            border-radius: 3px;
        }

    .adm-modal-footer {
        padding: 14px 24px;
        border-top: 1px solid var(--bx-border);
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }

    .spinner-small {
        width: 13px;
        height: 13px;
        border: 2px solid rgba(255,255,255,0.5);
        border-top-color: white;
        border-radius: 50%;
        display: inline-block;
        margin-right: 6px;
        animation: spin 0.7s linear infinite;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    /* Form sections */
    .adm-form-section {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .adm-fs-label {
        font-size: 14px;
        font-weight: 700;
        letter-spacing: .9px;
        text-transform: uppercase;
        color: var(--bx-muted);
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .adm-fs-label::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--bx-border);
        }

    .adm-form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .adm-field {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .adm-label {
        font-size: 13px;
        font-weight: 600;
    }

    .adm-input {
        background: rgba(255,255,255,.04);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
        color: var(--bx-text);
        font-family: var(--font-body);
        font-size: 13px;
        padding: 9px 11px;
        outline: none;
        transition: var(--transition);
        width: 100%;
    }

        .adm-input:focus {
            border-color: rgba(77,142,255,.5);
            box-shadow: 0 0 0 3px rgba(77,142,255,.1);
        }

        .adm-input::placeholder {
            color: rgba(255,255,255,.2);
        }

    .adm-input-err {
        border-color: rgba(255,91,91,.5) !important;
        box-shadow: 0 0 0 3px rgba(255,91,91,.08) !important;
    }

    .adm-err-txt {
        font-size: 11px;
        color: var(--bx-red);
    }

    .adm-input-wrap {
        display: flex;
        align-items: center;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
        padding: 0 11px;
        transition: var(--transition);
    }

        .adm-input-wrap:focus-within {
            border-color: rgba(77,142,255,.5);
            box-shadow: 0 0 0 3px rgba(77,142,255,.1);
        }

    .adm-input-pre, .adm-input-suf {
        font-size: 13px;
        color: var(--bx-muted);
        flex-shrink: 0;
    }

    .adm-input-inner {
        flex: 1;
        background: none;
        border: none;
        outline: none;
        font-family: var(--font-body);
        font-size: 13px;
        color: var(--bx-text);
        padding: 9px 4px;
    }

    .adm-select-full {
        width: 100%;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
        color: var(--bx-text);
        font-family: var(--font-body);
        font-size: 13px;
        padding: 9px 11px;
        outline: none;
        cursor: pointer;
    }

        .adm-select-full option {
            background: #111318;
        }

    .adm-textarea {
        width: 100%;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
        color: var(--bx-text);
        font-family: var(--font-body);
        font-size: 13px;
        padding: 10px 11px;
        resize: vertical;
        outline: none;
        transition: var(--transition);
    }

        .adm-textarea:focus {
            border-color: rgba(77,142,255,.5);
            box-shadow: 0 0 0 3px rgba(77,142,255,.1);
        }

        .adm-textarea::placeholder {
            color: rgba(255,255,255,.2);
        }

    /* Role option cards */
    .adm-role-grid {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 8px;
    }

    .adm-role-option {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        padding: 11px 12px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 8px;
        cursor: pointer;
        transition: var(--transition);
        position: relative;
    }

        .adm-role-option:hover {
            border-color: color-mix(in srgb,var(--rc) 40%,transparent 60%);
        }

    .adm-role-option-active {
        border-color: var(--rc) !important;
        background: color-mix(in srgb,var(--rc) 8%,var(--bx-surface2) 92%) !important;
        box-shadow: 0 0 0 1px var(--rc);
    }

    .adm-role-opt-check {
        width: 16px;
        height: 16px;
        border-radius: 4px;
        border: 1.5px solid var(--bx-border);
        background: var(--bx-surface);
        display: grid;
        place-items: center;
        flex-shrink: 0;
        margin-top: 1px;
        transition: var(--transition);
    }

        .adm-role-opt-check.on {
            background: var(--rc) !important;
            border-color: var(--rc) !important;
        }

    .adm-role-opt-name {
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 2px;
    }

    .adm-role-opt-desc {
        font-size: 12px;
        color: var(--bx-muted);
        line-height: 1.4;
    }

    /* Permissions grid */
    .adm-perm-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .adm-perm-row {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 7px 10px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 6px;
        cursor: pointer;
        transition: var(--transition);
    }

        .adm-perm-row:hover {
            border-color: var(--bx-border-hi);
        }

    .adm-perm-check {
        width: 16px;
        height: 16px;
        border-radius: 4px;
        border: 1.5px solid var(--bx-border);
        background: var(--bx-surface);
        display: grid;
        place-items: center;
        flex-shrink: 0;
        transition: var(--transition);
    }

        .adm-perm-check.on {
            background: var(--bx-accent);
            border-color: var(--bx-purple);
        }

    .adm-perm-lbl {
        font-size: 12px;
    }

    .adm-perm-tag {
        font-size: 10px;
        font-weight: 600;
        background: var(--bx-purple-dim);
        color: var(--bx-purple);
        border: 1px solid rgba(167,139,250,.3);
        padding: 3px 9px;
        border-radius: 20px;
    }

    /* Toggles */
    .adm-toggle-row {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        user-select: none;
    }

    .adm-toggle {
        width: 38px;
        height: 21px;
        border-radius: 21px;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        position: relative;
        transition: var(--transition);
        flex-shrink: 0;
    }

        .adm-toggle.on {
            background: var(--bx-accent);
            border-color: var(--bx-accent);
            box-shadow: 0 0 8px rgba(0,198,162,.3);
        }

    .adm-toggle-knob {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        top: 2px;
        left: 2px;
        transition: transform .18s;
    }

    .adm-toggle.on .adm-toggle-knob {
        transform: translateX(17px);
    }

    .adm-toggle-lbl {
        font-size: 12px;
        font-weight: 500;
        color: var(--bx-text);
    }

    /* ═══ VIEW DRAWER ═══ */
    .adm-drawer {
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius-lg);
        width: 100%;
        max-width: 400px;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: var(--shadow-lg);
        animation: admrise .26s cubic-bezier(.4,0,.2,1);
        margin-left: auto;
    }

    .adm-drawer-header {
        padding: 20px 20px 16px;
        border-bottom: 1px solid var(--bx-border);
        display: flex;
        align-items: flex-start;
        gap: 13px;
        background: linear-gradient(135deg,rgba(255,255,255,.025),transparent);
    }

    .adm-drawer-av {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: linear-gradient(135deg,var(--avc),color-mix(in srgb,var(--avc) 60%,#000 40%));
        display: grid;
        place-items: center;
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 17px;
        color: #fff;
        flex-shrink: 0;
    }

    .adm-drawer-name {
        font-family: var(--font-display);
        font-size: 16px;
        font-weight: 800;
        letter-spacing: -.3px;
        margin-bottom: 3px;
    }

    .adm-drawer-email {
        font-size: 12px;
        color: var(--bx-muted);
    }

    .adm-drawer-body {
        flex: 1;
        overflow-y: auto;
        padding: 16px 20px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .adm-drawer-section-lbl {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .9px;
        text-transform: uppercase;
        color: var(--bx-muted);
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .adm-drawer-section-lbl::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--bx-border);
        }

    .adm-info-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 8px;
        overflow: hidden;
    }

    .adm-ig-row {
        display: flex;
        align-items: center;
        padding: 9px 13px;
        border-bottom: 1px solid var(--bx-border);
    }

        .adm-ig-row:last-child {
            border-bottom: none;
        }

    .adm-ig-lbl {
        font-size: 12px;
        color: var(--bx-muted);
        min-width: 110px;
        flex-shrink: 0;
    }

    .adm-ig-val {
        font-size: 12px;
        font-weight: 500;
    }

    .adm-drawer-note {
        font-size: 12px;
        color: var(--bx-muted);
        line-height: 1.65;
        background: var(--bx-surface2);
        border: 1px solid var(--bx-border);
        border-radius: 7px;
        padding: 10px 12px;
    }

    .adm-activity-grid {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 1px;
        background: var(--bx-border);
        border: 1px solid var(--bx-border);
        border-radius: 8px;
        overflow: hidden;
    }

    .adm-ag-item {
        background: var(--bx-surface2);
        padding: 10px 13px;
    }

    .adm-ag-val {
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -.5px;
        line-height: 1;
    }

    .adm-ag-lbl {
        font-size: 10px;
        color: var(--bx-muted);
        margin-top: 3px;
    }

    .adm-drawer-footer {
        padding: 13px 20px;
        border-top: 1px solid var(--bx-border);
        display: flex;
        gap: 8px;
    }

    /* ═══ CONFIRM MODAL ═══ */
    .adm-confirm {
        background: var(--bx-surface);
        border: 1px solid rgba(255,91,91,.3);
        border-radius: var(--radius);
        max-width: 400px;
        width: 100%;
        padding: 28px 28px 22px;
        text-align: center;
        box-shadow: var(--shadow-lg);
        animation: admrise .22s ease;
    }

    .adm-confirm-icon {
        font-size: 32px;
        margin-bottom: 12px;
        color: var(--bx-amber);
    }

    .adm-confirm-title {
        font-family: var(--font-display);
        font-size: 17px;
        font-weight: 800;
        margin-bottom: 10px;
    }

    .adm-confirm-sub {
        font-size: 13px;
        color: var(--bx-muted);
        line-height: 1.65;
        margin-bottom: 20px;
    }

    .adm-confirm-footer {
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    /* Spinner */
    .adm-spinner {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 2px solid rgba(0,0,0,.2);
        border-top-color: #000;
        animation: admspin .65s linear infinite;
        flex-shrink: 0;
    }

    keyframes admspin {
        to {
            transform: rotate(360deg)
        }
    }

    .custom-rev-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        font-size: 12px;
        font-weight: 500;
        border-radius: 4px;
        cursor: pointer;
        background-color: #1e293b;
        border: 1px solid #334155;
        color: #f8fafc;
        transition: background-color 0.2s, border-color 0.2s;
    }

    .custom-rev-enable {
        border-color: #475569;
    }

        .custom-rev-enable:hover {
            background-color: #334155;
            border-color: #64748b;
        }

    .custom-rev-disable {
        border-color: #7f1d1d;
    }

        .custom-rev-disable:hover {
            background-color: #7f1d1d;
            border-color: #991b1b;
        }
    /* Toast */
    .adm-toast {
        position: fixed;
        bottom: 28px;
        align-self: center;
        z-index: 999;
        background: var(--bx-surface);
        border: 1px solid var(--bx-border);
        border-radius: var(--radius);
        padding: 14px 18px;
        box-shadow: var(--shadow-lg);
        min-width: 290px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        animation: admrise .25s ease;
    }

    .adm-toast-green {
        border-color: rgba(0,198,162,.35);
    }

    .adm-toast-red {
        border-color: rgba(255,91,91,.35);
    }

    .adm-toast-amber {
        border-color: rgba(245,166,35,.3);
    }

    /* Responsive */
    media(max-width:1100px) {
        .adm-stats {
            grid-template-columns: repeat(3,1fr);
        }
    }

    media(max-width:860px) {
        .adm-toolbar {
            flex-wrap: wrap;
        }

        .adm-role-tabs {
            width: 100%;
            overflow-x: auto;
        }

        .adm-role-grid {
            grid-template-columns: 1fr 1fr;
        }

        .adm-stats {
            grid-template-columns: repeat(2,1fr);
        }

        .adm-form-grid {
            grid-template-columns: 1fr;
        }

        .adm-perm-grid {
            grid-template-columns: 1fr;
        }

        .adm-modal, .adm-drawer {
            max-width: 100%;
            border-radius: var(--radius) var(--radius) 0 0;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            max-height: 95vh;
        }
    }




    .mud-table-root .mud-table-head {
        color: whitesmoke;
    }

    .mud-table-root .mud-table-cell {
        text-align: center;
    }


    .hero {
        padding: 36px 40px 30px;
        background: radial-gradient(700px 220px at 10% 0%, rgba(53,194,224,.10), transparent 60%), linear-gradient(180deg, #0d1219, #0a0d13 90%);
        border-bottom: 1px solid var(--border);
    }

    .hero-row {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .avatar-shell {
        position: relative;
        flex-shrink: 0;
    }

    .avatar {
        width: 64px;
        height: 64px;
        border-radius: 18px;
        background: linear-gradient(135deg,#7c8cf8,#5b7cfa);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 20px;
        color: #fff;
        box-shadow: 0 0 0 1px var(--border-strong), 0 8px 24px rgba(92,110,255,.18);
    }

    .verified-dot {
        position: absolute;
        bottom: -3px;
        right: -3px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--cyan);
        color: #04070c;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 800;
        border: 3px solid var(--bg);
    }

    .hero-name {
        font-size: 21px;
        font-weight: 800;
        letter-spacing: -.01em;
    }

    .status-verified {
        color: #22c55e;
        border-color: rgba(34, 197, 94, 0.25);
        background: rgba(34, 197, 94, 0.1);
    }

        .status-verified::before {
            background: var(--green);
            box-shadow: 0 0 0 3px var(--amber-dim);
            animation: pulse 1.6s infinite;
        }

    .hero-title {
        font-size: 13px;
        color: var(--text-dim);
        margin-top: 2px;
        font-weight: 500;
    }

    .chip-row {
        display: flex;
        gap: 8px;
        margin-top: 12px;
        flex-wrap: wrap;
    }

    .chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11.5px;
        font-weight: 600;
        padding: 5px 11px;
        border-radius: 999px;
        border: 1px solid var(--border-strong);
        color: var(--text-dim);
        background: rgba(255,255,255,.02);
    }

        .chip svg {
            width: 11px;
            height: 11px;
        }

    .chip-verified {
        color: var(--cyan);
        border-color: rgba(53,194,224,.3);
        background: var(--cyan-dim);
    }

    .chip-active {
        color: var(--green);
        border-color: rgba(47,208,122,.3);
        background: var(--green-dim);
    }

    .chip-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--green);
        box-shadow: 0 0 0 3px var(--green-dim);
    }

    /* ============ CONTENT / TABLE CARD ============ */
    .content {
        padding: 28px 40px 40px;
    }

    .card {
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 18px;
        overflow: hidden;
    }

    .card-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 24px;
        border-bottom: 1px solid var(--border);
    }

    .card-title-wrap {
        display: flex;
        align-items: baseline;
        gap: 10px;
    }

    .card-title {
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -.01em;
        color: #bdbdbd;
    }

    .card-subtitle {
        font-size: 12px;
        color: #8e95a2;
    }

    .search {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--bg);
        border: 1px solid var(--border-strong);
        border-radius: 10px;
        padding: 8px 12px;
        width: 270px;
        transition: border-color .15s, box-shadow .15s;
    }

        .search:focus-within {
            border-color: var(--cyan);
            box-shadow: 0 0 0 3px var(--cyan-dim);
        }

        .search svg {
            width: 14px;
            height: 14px;
            color: var(--text-faint);
            flex-shrink: 0;
        }

        .search input {
            background: none;
            border: none;
            outline: none;
            color: var(--text);
            font-size: 12.5px;
            font-family: inherit;
            width: 100%;
        }

            .search input::placeholder {
                color: var(--text-faint);
            }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    thead th {
        text-align: left;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #9da1a9;
        background: var(--panel-alt);
        padding: 12px 24px;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }

        thead th:last-child {
            text-align: right;
        }

    tbody tr {
        border-bottom: 1px solid var(--border);
        transition: background .12s;
    }

        tbody tr:last-child {
            border-bottom: none;
        }

        tbody tr:hover {
            background: rgba(255,255,255,.018);
        }

    tbody td {
        padding: 15px 24px;
        font-size: 13px;
        vertical-align: middle;
    }

        tbody td:last-child {
            text-align: right;
        }

    .pid {
        color: var(--cyan);
        font-family: 'JetBrains Mono', monospace;
        font-weight: 600;
        font-size: 12.5px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

        .pid:hover {
            text-underline-offset: 3px;
        }

    .txn {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--text-dim);
        font-weight: 500;
    }

    .txn-icon {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--border);
        font-size: 11px;
        flex-shrink: 0;
    }

    .amount {
        color: var(--green);
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        font-size: 16px;
    }

    .date {
        color: var(--text-dim);
        font-variant-numeric: tabular-nums;
    }

    .status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 12px 5px 9px;
        border-radius: 999px;
        font-size: 11.5px;
        font-weight: 700;
        border: 1px solid transparent;
        white-space: nowrap;
    }

        .status::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
        }

    .status-received {
        color: var(--green);
        background: var(--green-dim);
        border-color: rgba(47,208,122,.28);
    }

        .status-received::before {
            background: var(--green);
        }

    .status-verifying {
        color: var(--amber);
        background: var(--amber-dim);
        border-color: rgba(242,171,61,.28);
    }

        .status-verifying::before {
            background: var(--amber);
            box-shadow: 0 0 0 3px var(--amber-dim);
            animation: pulse 1.6s infinite;
        }

    @keyframes pulse {
        0%,100% {
            box-shadow: 0 0 0 3px var(--amber-dim);
        }

        50% {
            box-shadow: 0 0 0 5px var(--amber-dim);
        }
    }

    .card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 24px;
        border-top: 1px solid var(--border);
        font-size: 11.5px;
        color: var(--text-faint);
    }

    .footer-pager {
        display: flex;
        gap: 6px;
    }

    .pg-btn {
        width: 26px;
        height: 26px;
        border-radius: 7px;
        border: 1px solid var(--border-strong);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-dim);
        font-size: 11px;
        cursor: pointer;
        background: transparent;
    }

        .pg-btn.active {
            background: var(--cyan-dim);
            border-color: rgba(53,194,224,.35);
            color: var(--cyan);
        }

    ::selection {
        background: rgba(53,194,224,.25);
    }



    /* Container must have a position set so the overlay anchors to it */
    .form-container {
        position: relative;
        width: 100%;
    }

    /* The Overlay Layer */
    .loading-overlay {
        /* Positioning */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Semi-transparent background (Black at 50% opacity) */
        background-color: rgba(0, 0, 0, 0.5);
        /* Flexbox to center the inner text perfectly */
        display: flex;
        justify-content: center;
        align-items: center;
        /* Stacking */
        z-index: 10;
    }

    /* Styling for the text */
    .loading-text {
        color: #ffffff;
        font-family: sans-serif;
        font-size: 1.25rem;
        font-weight: bold;
    }


    input[type="date"]::-webkit-calendar-picker-indicator {
        /* Transforms the default black icon into #e8eaf0 */
        filter: invert(98%) sepia(10%) saturate(191%) hue-rotate(188deg) brightness(101%) contrast(93%);
        cursor: pointer;
    }

    .btn-danger {
        background: rgba(239, 68, 68, .1);
        color: var(--rv-red);
        border: 1px solid rgba(239, 68, 68, .35) !important;
    }

    /* ============ end production CSS ============ */