/*
 * TradyBay — modern public site refresh.
 * - Site-wide overrides (header, footer, buttons) are unscoped so every public
 *   page benefits.
 * - Homepage-only rules are scoped to `.tb-home` so they can't leak into
 *   admin / trader / customer dashboards.
 */

/* ---------- Font + design tokens ---------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --tb-primary: #1e40af;
    --tb-primary-600: #1d4ed8;
    --tb-primary-700: #1e3a8a;
    --tb-primary-50: #eff6ff;
    --tb-accent: #f97316;
    --tb-accent-600: #ea580c;
    --tb-accent-50: #fff7ed;
    --tb-ink: #0b1220;
    --tb-ink-2: #334155;
    --tb-muted: #64748b;
    --tb-muted-2: #94a3b8;
    --tb-line: #e5e7eb;
    --tb-line-2: #f1f5f9;
    --tb-bg: #ffffff;
    --tb-bg-soft: #f7f8fb;
    --tb-radius-xs: 8px;
    --tb-radius-sm: 12px;
    --tb-radius: 18px;
    --tb-radius-lg: 24px;
    --tb-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --tb-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
    --tb-shadow-lg: 0 2px 4px rgba(15, 23, 42, 0.05), 0 20px 40px rgba(15, 23, 42, 0.09);
    --tb-shadow-primary: 0 12px 28px rgba(30, 64, 175, 0.22);
    --tb-shadow-accent: 0 12px 28px rgba(249, 115, 22, 0.28);
    --tb-font-sans: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Site-wide header (all public pages) ---------- */
.wrapper > nav.desktop-header,
nav.navbar.desktop-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--tb-line);
    padding: 0;
    min-height: auto;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
nav.navbar.desktop-header .navbar-brand img {
    height: auto;
    width: auto;
}
nav.navbar.desktop-header .navbar-nav .nav-link {
    color: var(--tb-ink-2) !important;
    font-family: var(--tb-font-sans);
    font-weight: 500;
    font-size: 15px;
    padding: 8px 14px !important;
    border-radius: 10px;
    transition: color 0.15s ease, background 0.15s ease;
}
nav.navbar.desktop-header .navbar-nav .nav-link:hover {
    color: var(--tb-primary) !important;
    background: var(--tb-primary-50);
}
nav.navbar.desktop-header .navbar-nav .nav-link.btn.btn-primary {
    background: var(--tb-accent) !important;
    border: 0 !important;
    color: #fff !important;
    padding: 10px 20px !important;
    border-radius: 999px !important;
    font-weight: 600;
    margin-left: 8px;
}
nav.navbar.desktop-header .navbar-nav .nav-link.btn.btn-primary:hover {
    background: var(--tb-accent-600) !important;
    transform: translateY(-1px);
}
nav.navbar.desktop-header .navbar-nav .tb-nav-secondary {
    font-size: 13px;
    color: var(--tb-muted) !important;
    padding: 7px 14px !important;
    border-radius: 999px;
    border: 1px solid var(--tb-line);
    background: transparent;
    display: inline-flex;
    align-items: center;
}
nav.navbar.desktop-header .navbar-nav .tb-nav-secondary:hover {
    color: var(--tb-primary) !important;
    border-color: var(--tb-primary);
    background: var(--tb-primary-50);
}
nav.navbar.desktop-header .tb-nav-right {
    display: flex;
    align-items: center;
    gap: 2px;
}
nav.navbar.desktop-header .tb-nav-divider {
    width: 1px;
    height: 22px;
    background: var(--tb-line);
    margin: 0 10px;
    align-self: center;
    padding: 0 !important;
}

/* Login dropdown (Customer / Trader split) */
nav.navbar.desktop-header .tb-nav-login .nav-link.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
nav.navbar.desktop-header .tb-nav-login .nav-link.dropdown-toggle::after {
    margin-left: 4px;
    vertical-align: middle;
}
nav.navbar.desktop-header .tb-nav-login-menu {
    min-width: 200px;
    padding: 6px;
    border: 1px solid var(--tb-line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(10, 15, 30, 0.14);
    margin-top: 8px;
}
nav.navbar.desktop-header .tb-nav-login-menu .dropdown-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tb-ink);
    white-space: nowrap;
}
nav.navbar.desktop-header .tb-nav-login-menu .dropdown-item:hover,
nav.navbar.desktop-header .tb-nav-login-menu .dropdown-item:focus {
    background: var(--tb-primary-50);
    color: var(--tb-primary);
}
nav.navbar.desktop-header .tb-nav-login-menu .dropdown-item i {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tb-primary-50);
    color: var(--tb-primary);
    border-radius: 50%;
    font-size: 11px;
}
/* Kill the site's launching banner spacing so the sticky header hugs the top */
.wrapper > p.launching {
    background: var(--tb-primary);
    color: #fff;
    text-align: center;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0;
}

/* ---------- Site-wide footer refresh ---------- */
footer.main-footer {
    background: #0b1220 !important;
    color: #cbd5e1;
    padding: 72px 0 32px !important;
    font-family: var(--tb-font-sans);
    margin-top: 0 !important;
}
footer.main-footer .footer-newsletter {
    background: var(--tb-primary);
    border-radius: var(--tb-radius);
    padding: 36px 40px;
    margin-bottom: 56px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 24px;
    align-items: center;
}
footer.main-footer .footer-newsletter h3 {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px;
}
footer.main-footer .footer-newsletter p {
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    font-size: 14.5px;
}
footer.main-footer .footer-newsletter form {
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    padding: 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
footer.main-footer .footer-newsletter input[type="email"] {
    flex: 1;
    background: transparent;
    border: 0;
    color: #fff;
    padding: 10px 16px;
    outline: none;
    font-size: 14.5px;
}
footer.main-footer .footer-newsletter input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.6);
}
footer.main-footer .footer-newsletter button {
    background: var(--tb-accent);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 10px 22px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
footer.main-footer .footer-newsletter button:hover {
    background: var(--tb-accent-600);
}
footer.main-footer h5 {
    color: #fff !important;
    font-family: var(--tb-font-sans);
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 18px !important;
}
footer.main-footer p {
    color: #94a3b8 !important;
    font-size: 14.5px;
    line-height: 1.6;
}
footer.main-footer ul li,
footer.main-footer ul li a {
    color: #cbd5e1 !important;
    font-size: 14.5px !important;
    padding: 4px 0;
    text-decoration: none;
    transition: color 0.15s ease;
}
footer.main-footer ul li a:hover {
    color: #fff !important;
    text-decoration: none;
}
footer.main-footer .followUs {
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0;
}
footer.main-footer .followUs li {
    padding: 0;
}
footer.main-footer .followUs a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    color: #cbd5e1 !important;
}
footer.main-footer .followUs a:hover {
    background: var(--tb-accent);
    border-color: var(--tb-accent);
    transform: translateY(-2px);
    color: #fff !important;
}
footer.main-footer .followUs a img {
    max-width: 16px;
    max-height: 16px;
    filter: brightness(0) invert(1);
}
footer.main-footer .followUs a svg {
    width: 16px;
    height: 16px;
}
footer.main-footer hr {
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.08) !important;
    margin: 40px 0 24px !important;
}
footer.main-footer .copyright {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
footer.main-footer .copyright p {
    margin: 0;
    color: #94a3b8 !important;
    font-size: 13.5px;
}
footer.main-footer .copyright ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
footer.main-footer .copyright ul li {
    padding: 0;
    color: #64748b !important;
    font-size: 13.5px !important;
}
footer.main-footer .copyright ul li a {
    color: #cbd5e1 !important;
    font-size: 13.5px !important;
}
footer.main-footer .footer-badges {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
}
footer.main-footer .footer-badges .badge-pill {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
footer.main-footer .footer-badges .badge-pill i {
    color: var(--tb-accent);
}

/* ---------- Buttons (site-wide friendly) ---------- */
.tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-family: var(--tb-font-sans);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}
.tb-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}
.tb-btn-primary {
    background: var(--tb-accent);
    color: #fff;
}
.tb-btn-primary:hover {
    background: var(--tb-accent-600);
    color: #fff;
}
.tb-btn-secondary {
    background: var(--tb-primary);
    color: #fff;
}
.tb-btn-secondary:hover {
    background: var(--tb-primary-700);
    color: #fff;
}
.tb-btn-outline {
    background: transparent;
    color: var(--tb-primary);
    border-color: var(--tb-line);
}
.tb-btn-outline:hover {
    background: var(--tb-primary-50);
    color: var(--tb-primary-700);
    border-color: var(--tb-primary);
}
.tb-btn-ghost-dark {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
}
.tb-btn-ghost-dark:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}
.tb-btn-lg {
    padding: 15px 30px;
    font-size: 16px;
}

/* =====================================================================
 * HOMEPAGE (.tb-home) — everything below is scoped
 * ===================================================================== */

.tb-home {
    font-family: var(--tb-font-sans);
    color: var(--tb-ink);
    background: #fff;
}
.tb-home h1,
.tb-home h2,
.tb-home h3,
.tb-home h4 {
    color: var(--tb-ink);
    font-family: var(--tb-font-sans);
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.15;
}
.tb-home p {
    color: var(--tb-ink-2);
    font-family: var(--tb-font-sans);
}
.tb-home .tb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 12px;
    font-weight: 700;
    color: var(--tb-primary);
    background: var(--tb-primary-50);
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 16px;
}
.tb-home .tb-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tb-primary);
}

/* Section wrapper */
.tb-section {
    padding: 96px 0;
    position: relative;
}
.tb-section.tb-tint {
    background: var(--tb-bg-soft);
}
.tb-section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}
.tb-section-head h2 {
    font-size: clamp(28px, 3.6vw, 44px);
    margin: 0 0 14px;
}
.tb-section-head p {
    font-size: 17px;
    color: var(--tb-muted);
    margin: 0;
    line-height: 1.55;
}

/* ---------- HERO ---------- */
.tb-hero {
    position: relative;
    padding: 56px 0 0;
    background: var(--tb-bg-soft);
    border-bottom: 1px solid var(--tb-line);
}
.tb-hero-headline {
    font-size: clamp(34px, 5vw, 58px);
    font-weight: 800;
    line-height: 1.06;
    margin: 0 0 22px;
    letter-spacing: -0.025em;
}
.tb-hero-headline .tb-accent {
    color: var(--tb-primary);
}
.tb-hero-sub {
    font-size: 18px;
    line-height: 1.6;
    max-width: 560px;
    margin-bottom: 32px;
    color: var(--tb-ink-2);
}
.tb-hero-search {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 8px;
    border-radius: 999px;
    box-shadow: var(--tb-shadow-lg);
    border: 1px solid var(--tb-line);
    max-width: 560px;
    margin-bottom: 20px;
}
.tb-hero-search .tb-search-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
}
.tb-hero-search .tb-search-field i {
    color: var(--tb-muted);
    font-size: 16px;
}
.tb-hero-search input {
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    font-family: var(--tb-font-sans);
    font-size: 15px;
    font-weight: 500;
    color: var(--tb-ink);
}
.tb-hero-search input::placeholder {
    color: var(--tb-muted-2);
    font-weight: 500;
}
.tb-hero-search button {
    background: var(--tb-accent);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 12px 22px;
    font-weight: 700;
    font-family: var(--tb-font-sans);
    font-size: 14.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, transform 0.15s ease;
}
.tb-hero-search button:hover {
    background: var(--tb-accent-600);
    transform: translateY(-1px);
}
.tb-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 13.5px;
    color: var(--tb-muted);
    font-weight: 500;
    margin-top: 6px;
}
.tb-hero-chips span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tb-hero-chips i {
    color: var(--tb-primary);
}
.tb-hero-visual {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}
.tb-hero > .container > .row {
    align-items: flex-end;
}
.tb-hero-visual .tb-hero-image {
    position: relative;
    z-index: 2;
    max-width: 380px;
    width: 100%;
}
.tb-hero-visual .tb-hero-image > img {
    width: 100%;
    height: auto;
    display: block;
}
.tb-hero-visual .tb-hero-badge {
    position: absolute;
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--tb-shadow-lg);
    z-index: 3;
    animation: tbFloat 6s ease-in-out infinite;
}
.tb-hero-visual .tb-hero-badge i {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.tb-hero-visual .tb-hero-badge strong {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--tb-ink);
    line-height: 1.2;
}
.tb-hero-visual .tb-hero-badge span {
    display: block;
    font-size: 11.5px;
    color: var(--tb-muted);
    margin-top: 2px;
}
.tb-hero-visual .tb-hero-badge-tl {
    top: 4%;
    left: -6%;
    animation-delay: 0s;
}
.tb-hero-visual .tb-hero-badge-tl i {
    background: var(--tb-primary-50);
    color: var(--tb-primary);
}
.tb-hero-visual .tb-hero-badge-br {
    bottom: 14%;
    right: -70px;
    animation-delay: -3s;
}
.tb-hero-visual .tb-hero-badge-br i {
    background: var(--tb-accent-50);
    color: var(--tb-accent);
}
@keyframes tbFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
/* hero decorative blobs removed — palette restraint */

/* ---------- STATS STRIP ---------- */
.tb-stats {
    background: #0b1220;
    color: #fff;
    padding: 48px 0;
    position: relative;
    overflow: hidden;
}
.tb-stats .container {
    position: relative;
}
.tb-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
}
.tb-stat .tb-stat-num {
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}
.tb-stat .tb-stat-label {
    font-size: 13.5px;
    color: #94a3b8;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ---------- HOW IT WORKS ---------- */
.tb-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    position: relative;
}
.tb-steps::before {
    content: "";
    position: absolute;
    top: 60px;
    left: 12%;
    right: 12%;
    height: 0;
    border-top: 2px dashed var(--tb-line);
    z-index: 0;
}
.tb-step {
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius);
    padding: 36px 30px;
    position: relative;
    z-index: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tb-step:hover {
    transform: translateY(-6px);
    box-shadow: var(--tb-shadow-lg);
    border-color: var(--tb-primary);
}
.tb-step-num {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--tb-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 22px;
    margin-bottom: 22px;
    box-shadow: var(--tb-shadow-primary);
}
.tb-step h4 {
    font-size: 20px;
    margin: 0 0 10px;
    font-weight: 700;
}
.tb-step p {
    font-size: 15px;
    margin: 0;
    line-height: 1.6;
    color: var(--tb-ink-2);
}

/* ---------- SERVICES GRID ---------- */
.tb-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.tb-service-card {
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--tb-ink);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
}
.tb-service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--tb-shadow-lg);
    border-color: var(--tb-primary);
    color: var(--tb-ink);
    text-decoration: none;
}
.tb-service-card .tb-service-img {
    aspect-ratio: 4 / 3;
    background: var(--tb-bg-soft);
    overflow: hidden;
    position: relative;
}
.tb-service-card .tb-service-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.tb-service-card:hover .tb-service-img img {
    transform: scale(1.08);
}
.tb-service-card .tb-service-body {
    padding: 20px 22px 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.tb-service-card .tb-service-body > div {
    flex: 1;
}
.tb-service-card h4 {
    font-size: 16px;
    margin: 0 0 6px;
    font-weight: 700;
}
.tb-service-card p {
    font-size: 13.5px;
    color: var(--tb-muted);
    margin: 0;
    line-height: 1.5;
}
.tb-service-card .tb-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--tb-primary-50);
    color: var(--tb-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.tb-service-card:hover .tb-arrow {
    background: var(--tb-accent);
    color: #fff;
    transform: rotate(-45deg);
}

/* ---------- CHIP CLOUD ---------- */
.tb-chip-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.tb-chip {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--tb-line);
    background: #fff;
    color: var(--tb-ink-2);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.tb-chip:hover {
    background: var(--tb-primary);
    color: #fff;
    border-color: var(--tb-primary);
    text-decoration: none;
    transform: translateY(-2px);
}

/* ---------- BENTO FEATURES ---------- */
.tb-bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: 20px;
}
.tb-bento-card {
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius);
    padding: 32px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tb-bento-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--tb-shadow-lg);
    border-color: var(--tb-primary);
}
.tb-bento-card .tb-bento-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--tb-primary-50);
    color: var(--tb-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 18px;
}
.tb-bento-card h4 {
    font-size: 19px;
    margin: 0 0 8px;
    font-weight: 700;
}
.tb-bento-card p {
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0;
    color: var(--tb-ink-2);
}
.tb-bento-card.tb-bento-lg {
    grid-column: span 4;
    grid-row: span 2;
    background: var(--tb-primary);
    color: #fff;
    border: 0;
}
.tb-bento-card.tb-bento-lg h4 { color: #fff; font-size: 22px; line-height: 1.25; }
.tb-bento-card.tb-bento-lg p { color: rgba(255, 255, 255, 0.9); font-size: 14.5px; line-height: 1.55; margin-bottom: 12px; }
.tb-bento-card.tb-bento-lg .tb-bento-icon {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.tb-bento-card.tb-bento-lg .tb-bento-mini-title {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px !important;
    opacity: 0.9;
}
.tb-bento-card.tb-bento-lg .tb-bento-list {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tb-bento-card.tb-bento-lg .tb-bento-list li {
    position: relative;
    padding: 8px 12px 8px 30px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    color: #fff;
    font-size: 13.5px;
    line-height: 1.5;
}
.tb-bento-card.tb-bento-lg .tb-bento-list li::before {
    content: "\f00c"; /* fa-check */
    font-family: "Font Awesome 6 Free", "FontAwesome";
    font-weight: 900;
    position: absolute;
    left: 10px;
    top: 10px;
    color: var(--tb-accent, #f97316);
    background: rgba(249, 115, 22, 0.16);
    width: 16px; height: 16px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 8px;
}
.tb-bento-card.tb-bento-lg .tb-bento-list li strong {
    color: #fff;
    font-weight: 800;
}
.tb-bento-card.tb-bento-lg .tb-bento-footnote {
    background: rgba(255, 255, 255, 0.08);
    border-left: 3px solid var(--tb-accent, #f97316);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    font-style: italic;
}
.tb-bento-card.tb-bento-md { grid-column: span 2; }
.tb-bento-card.tb-bento-sm { grid-column: span 2; }
.tb-bento-card .tb-bento-mini-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tb-bento-card .tb-bento-mini-list li {
    font-size: 12.5px;
    color: var(--tb-ink-2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.tb-bento-card .tb-bento-mini-list li i {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(30, 64, 175, 0.08);
    color: var(--tb-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    flex-shrink: 0;
}
.tb-bento-card.tb-bento-accent {
    background: #fff;
    border-color: var(--tb-accent);
}
.tb-bento-card.tb-bento-accent .tb-bento-icon {
    background: var(--tb-accent);
    color: #fff;
}

/* ---------- TESTIMONIALS (dual marquee) ---------- */
.tb-testimonials-section {
    padding-bottom: 96px;
}
.tb-marquee {
    overflow: hidden;
    padding: 6px 0;
}
.tb-marquee + .tb-marquee {
    margin-top: 22px;
}
.tb-marquee-track {
    display: flex;
    gap: 22px;
    width: max-content;
    padding-left: 22px;
    animation: tbMarqueeLeft 60s linear infinite;
    will-change: transform;
}
.tb-marquee-track.tb-marquee-reverse {
    animation-name: tbMarqueeRight;
}
.tb-marquee:hover .tb-marquee-track {
    animation-play-state: paused;
}
@keyframes tbMarqueeLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 11px)); }
}
@keyframes tbMarqueeRight {
    from { transform: translateX(calc(-50% - 11px)); }
    to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .tb-marquee-track { animation: none; }
}
.tb-testimonial {
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius);
    padding: 26px 26px 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 0 0 360px;
    width: 360px;
    min-height: 210px;
}
.tb-testimonial .tb-quote-mark {
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 60px;
    line-height: 1;
    color: var(--tb-primary-50);
    font-family: Georgia, serif;
    font-weight: 700;
    pointer-events: none;
}
.tb-testimonial .tb-stars {
    color: var(--tb-accent);
    font-size: 14px;
    margin-bottom: 14px;
    letter-spacing: 2px;
}
.tb-testimonial p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--tb-ink);
    margin: 0 0 22px;
    flex: 1;
}
.tb-testimonial .tb-t-person {
    display: flex;
    align-items: center;
    gap: 12px;
}
.tb-testimonial .tb-t-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--tb-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
}
.tb-testimonial .tb-t-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--tb-ink);
    margin: 0;
}
.tb-testimonial .tb-t-meta {
    font-size: 13px;
    color: var(--tb-muted);
    margin: 2px 0 0;
}

/* ---------- FAQ ---------- */
.tb-faq {
    max-width: 820px;
    margin: 0 auto;
    border-top: 1px solid var(--tb-line);
}
.tb-faq-item {
    border-bottom: 1px solid var(--tb-line);
}
.tb-faq-item > summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-family: var(--tb-font-sans);
    font-size: 16.5px;
    font-weight: 700;
    color: var(--tb-ink);
    transition: color 0.15s ease;
}
.tb-faq-item > summary::-webkit-details-marker { display: none; }
.tb-faq-item > summary:hover {
    color: var(--tb-primary);
}
.tb-faq-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--tb-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.tb-faq-icon::before,
.tb-faq-icon::after {
    content: "";
    position: absolute;
    background: var(--tb-ink-2);
    border-radius: 1px;
    transition: transform 0.25s ease, background 0.2s ease;
}
.tb-faq-icon::before { width: 12px; height: 2px; }
.tb-faq-icon::after  { width: 2px; height: 12px; }
.tb-faq-item[open] .tb-faq-icon {
    border-color: var(--tb-primary);
    background: var(--tb-primary);
}
.tb-faq-item[open] .tb-faq-icon::before,
.tb-faq-item[open] .tb-faq-icon::after {
    background: #fff;
}
.tb-faq-item[open] .tb-faq-icon::after {
    transform: rotate(90deg);
}
.tb-faq-body {
    padding: 0 8px 22px;
    max-width: 92%;
}
.tb-faq-body p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--tb-ink-2);
    margin: 0;
}

/* ---------- FINAL CTA ---------- */
.tb-final {
    padding: 96px 0;
    background: #fff;
}
.tb-final-card {
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-lg);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
}
.tb-final-copy {
    padding: 56px 56px 56px 56px;
    background: #fff;
}
.tb-final-copy h2 {
    font-size: clamp(26px, 3.2vw, 38px);
    margin: 0 0 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--tb-ink);
    line-height: 1.15;
}
.tb-final-copy p {
    font-size: 16px;
    line-height: 1.55;
    margin: 0 0 24px;
    color: var(--tb-ink-2);
    max-width: 440px;
}
.tb-final-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}
.tb-final-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14.5px;
    color: var(--tb-ink);
    font-weight: 500;
}
.tb-final-list li i {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--tb-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}
.tb-final-form {
    background: var(--tb-primary);
    color: #fff;
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tb-final-form form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tb-final-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}
.tb-final-form input[type="text"] {
    width: 100%;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    padding: 16px 18px;
    border-radius: 12px;
    font-family: var(--tb-font-sans);
    font-size: 15px;
    font-weight: 500;
    outline: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.tb-final-form input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.6);
}
.tb-final-form input[type="text"]:focus {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.55);
}
.tb-final-form .tb-btn {
    width: 100%;
    padding: 16px 24px;
    justify-content: center;
    font-size: 16px;
}
.tb-final-help {
    display: inline-block;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
}
.tb-final-help:hover {
    color: #fff;
    text-decoration: none;
}
.tb-trader-mention {
    margin: 32px 0 0;
    text-align: center;
    font-size: 14px;
    color: var(--tb-muted);
}
.tb-trader-mention a {
    color: var(--tb-primary);
    font-weight: 600;
    text-decoration: none;
    margin-left: 6px;
}
.tb-trader-mention a:hover {
    color: var(--tb-primary-700);
    text-decoration: underline;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) {
    .tb-services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .tb-marquee-track {
        animation-duration: 50s;
    }
    .tb-bento {
        grid-template-columns: repeat(4, 1fr);
    }
    .tb-bento-card.tb-bento-lg { grid-column: span 4; grid-row: auto; }
    .tb-bento-card.tb-bento-md { grid-column: span 2; }
    .tb-bento-card.tb-bento-sm { grid-column: span 2; }
    .tb-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .tb-final-card {
        grid-template-columns: 1fr;
    }
    .tb-final-copy { padding: 44px 40px; }
    .tb-final-form { padding: 40px; }
    footer.main-footer .footer-newsletter {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .tb-hero {
        padding: 56px 0 64px;
        overflow: hidden;
    }
    .tb-hero-visual {
        margin-top: 40px;
        min-height: auto;
    }
    .tb-hero-visual .tb-hero-badge-tl { left: 0; }
    .tb-hero-visual .tb-hero-badge-br { right: 0; }
    .tb-section {
        padding: 64px 0;
    }
    .tb-steps {
        grid-template-columns: 1fr;
    }
    .tb-steps::before { display: none; }
    .tb-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .tb-testimonial {
        flex: 0 0 300px;
        width: 300px;
        min-height: 220px;
        padding: 22px;
    }
    .tb-marquee-track {
        gap: 16px;
        padding-left: 16px;
        animation-duration: 40s;
    }
    @keyframes tbMarqueeLeft {
        from { transform: translateX(0); }
        to   { transform: translateX(calc(-50% - 8px)); }
    }
    @keyframes tbMarqueeRight {
        from { transform: translateX(calc(-50% - 8px)); }
        to   { transform: translateX(0); }
    }
    .tb-bento {
        grid-template-columns: 1fr;
    }
    .tb-bento-card.tb-bento-lg,
    .tb-bento-card.tb-bento-md,
    .tb-bento-card.tb-bento-sm { grid-column: 1; }
    .tb-final { padding: 64px 0; }
    .tb-final-copy { padding: 36px 28px; }
    .tb-final-form { padding: 32px 28px; }
    footer.main-footer .footer-newsletter {
        padding: 28px;
    }
    footer.main-footer .footer-newsletter form {
        flex-direction: column;
        padding: 8px;
        border-radius: 16px;
        gap: 8px;
    }
    footer.main-footer .footer-newsletter input[type="email"] {
        padding: 12px 14px;
    }
    footer.main-footer .footer-newsletter button {
        border-radius: 12px;
        padding: 12px 22px;
    }
}
@media (max-width: 480px) {
    .tb-services-grid {
        grid-template-columns: 1fr;
    }
    .tb-hero-search {
        flex-direction: column;
        border-radius: var(--tb-radius);
        padding: 12px;
        gap: 10px;
    }
    .tb-hero-search .tb-search-field {
        width: 100%;
        padding: 8px 12px;
    }
    .tb-hero-search button {
        width: 100%;
        padding: 14px 22px;
        justify-content: center;
    }
    .tb-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* =====================================================================
 * AUTH PAGES (login + register)
 * ===================================================================== */
.tb-auth-page {
    padding: 48px 0 64px;
    background: var(--tb-bg-soft);
    font-family: var(--tb-font-sans);
}
.tb-auth-page .container {
    max-width: 1080px;
}
.tb-auth-shell {
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-lg);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
}

/* Form side */
.tb-auth-form-side {
    padding: 56px 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tb-auth-title {
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight: 800;
    color: var(--tb-ink);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.tb-auth-sub {
    font-size: 15px;
    color: var(--tb-muted);
    margin: 0 0 28px;
    line-height: 1.5;
}
.tb-auth-field {
    margin-bottom: 16px;
}
.tb-auth-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}
.tb-auth-field-row .tb-auth-field { margin-bottom: 0; }
.tb-auth-field label,
.tb-auth-field > .form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--tb-ink-2);
    margin: 0 0 6px;
    letter-spacing: 0.01em;
}
.tb-auth-page .form-control,
.tb-auth-page input.form-control,
.tb-auth-page input[type="text"],
.tb-auth-page input[type="email"],
.tb-auth-page input[type="password"],
.tb-auth-page input[type="number"] {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--tb-line);
    border-radius: 12px;
    background: #fff;
    color: var(--tb-ink);
    font-family: var(--tb-font-sans);
    font-size: 15px;
    font-weight: 500;
    outline: none;
    height: auto;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.tb-auth-page .form-control:focus,
.tb-auth-page input:focus {
    border-color: var(--tb-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}
.tb-auth-page .form-control::placeholder,
.tb-auth-page input::placeholder {
    color: var(--tb-muted-2);
    font-weight: 500;
}
.tb-auth-page .is-invalid {
    border-color: var(--tb-accent);
}
.tb-auth-page .invalid-feedback,
.tb-auth-page code.text-danger {
    display: block;
    color: var(--tb-accent-600);
    font-size: 12.5px;
    font-weight: 500;
    margin-top: 6px;
    font-family: var(--tb-font-sans);
    background: transparent;
    padding: 0;
}

/* Password field with show/hide */
.tb-auth-pw {
    position: relative;
}
.tb-auth-pw .form-control {
    padding-right: 68px;
}
.tb-auth-pw-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    color: var(--tb-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background 0.15s ease;
}
.tb-auth-pw-toggle:hover {
    color: var(--tb-primary);
    background: var(--tb-primary-50);
}
.tb-auth-pw-toggle i {
    font-size: 15px;
    line-height: 1;
    pointer-events: none;
}

/* Remember / Forgot row */
.tb-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 6px 0 22px;
    gap: 12px;
    flex-wrap: wrap;
}
.tb-auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--tb-ink-2);
    cursor: pointer;
    margin: 0;
    font-weight: 500;
}
.tb-auth-remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--tb-primary);
    margin: 0;
}
.tb-auth-forgot {
    color: var(--tb-primary);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}
.tb-auth-forgot:hover {
    color: var(--tb-primary-700);
    text-decoration: underline;
}

/* Submit button */
.tb-auth-submit {
    width: 100%;
    padding: 14px 22px;
    background: var(--tb-accent);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-family: var(--tb-font-sans);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.tb-auth-submit:hover {
    background: var(--tb-accent-600);
    color: #fff;
}

/* Terms + reCAPTCHA */
.tb-auth-terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: var(--tb-ink-2);
    margin: 8px 0 18px;
    line-height: 1.5;
}
.tb-auth-terms input[type="checkbox"] {
    margin-top: 3px;
    accent-color: var(--tb-primary);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.tb-auth-terms .terms-link {
    color: var(--tb-primary);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}
.tb-auth-recaptcha {
    margin: 8px 0 20px;
    transform: scale(0.95);
    transform-origin: 0 0;
}

/* Cross-link (bottom) */
.tb-auth-crosslink {
    margin: 28px 0 0;
    text-align: center;
    font-size: 14px;
    color: var(--tb-muted);
    padding-top: 22px;
    border-top: 1px solid var(--tb-line);
}
.tb-auth-crosslink a {
    color: var(--tb-primary);
    font-weight: 700;
    text-decoration: none;
    margin-left: 4px;
}
.tb-auth-crosslink a:hover {
    color: var(--tb-primary-700);
    text-decoration: underline;
}

/* Brand side (solid primary, decorative circles at low opacity) */
.tb-auth-brand-side {
    background: var(--tb-primary);
    color: #fff;
    padding: 56px 52px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    gap: 32px;
}
.tb-auth-brand-side::before,
.tb-auth-brand-side::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}
.tb-auth-brand-side::before {
    width: 280px;
    height: 280px;
    background: rgba(255, 255, 255, 0.06);
    right: -110px;
    top: -110px;
}
.tb-auth-brand-side::after {
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.05);
    left: -70px;
    bottom: -70px;
}
.tb-auth-brand-side > * {
    position: relative;
    z-index: 1;
}
.tb-auth-brand-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 11.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.14);
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 20px;
    align-self: flex-start;
}
.tb-auth-brand-side h3 {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}
.tb-auth-brand-sub {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}
.tb-auth-perks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}
.tb-auth-perks li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.4;
}
.tb-auth-perks li i {
    width: 26px;
    height: 26px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #fff;
    flex-shrink: 0;
    margin-top: 1px;
}
.tb-auth-brand-footer {
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}
.tb-auth-brand-footer strong {
    color: #fff;
    font-weight: 700;
}

/* Flash / global alerts inside the form side keep readable */
.tb-auth-form-side .alert {
    border-radius: 12px;
    font-size: 14px;
}

@media (max-width: 992px) {
    .tb-auth-shell {
        grid-template-columns: 1fr;
    }
    .tb-auth-brand-side {
        order: -1;
        padding: 40px 40px;
    }
    .tb-auth-form-side {
        padding: 40px 40px;
    }
}
@media (max-width: 576px) {
    .tb-auth-page {
        padding: 24px 0 40px;
    }
    .tb-auth-form-side,
    .tb-auth-brand-side {
        padding: 32px 24px;
    }
    .tb-auth-field-row {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 0;
    }
    .tb-auth-field-row .tb-auth-field {
        margin-bottom: 16px;
    }
    .tb-auth-recaptcha {
        transform: scale(0.85);
    }
}

/* =====================================================================
 * WIZARD (multi-step forms — trader signup, etc.)
 * ===================================================================== */
.tb-wizard-page {
    padding: 40px 0 64px;
    background: var(--tb-bg-soft);
    font-family: var(--tb-font-sans);
}
.tb-wizard-page .container {
    max-width: 900px;
}
.tb-wizard-head {
    text-align: center;
    margin-bottom: 28px;
}
.tb-wizard-head h1 {
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 800;
    color: var(--tb-ink);
    letter-spacing: -0.02em;
    margin: 0 0 6px;
}
.tb-wizard-head p {
    color: var(--tb-muted);
    font-size: 15px;
    margin: 0;
}

/* Progress bar */
.tb-wizard-progress {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    max-width: 720px;
    margin: 0 auto 32px;
    gap: 12px;
}
.tb-wizard-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.tb-wizard-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--tb-line);
    color: var(--tb-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    font-family: var(--tb-font-sans);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.tb-wizard-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--tb-muted);
    transition: color 0.2s ease;
    letter-spacing: 0.01em;
}
.tb-wizard-step-indicator.is-active .tb-wizard-num {
    background: var(--tb-primary);
    border-color: var(--tb-primary);
    color: #fff;
}
.tb-wizard-step-indicator.is-active .tb-wizard-label {
    color: var(--tb-ink);
}
.tb-wizard-step-indicator.is-done .tb-wizard-num {
    background: var(--tb-primary);
    border-color: var(--tb-primary);
    color: #fff;
}
.tb-wizard-step-indicator.is-done .tb-wizard-num::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
}
.tb-wizard-step-indicator.is-done .tb-wizard-num-text { display: none; }
.tb-wizard-step-indicator.is-done .tb-wizard-label {
    color: var(--tb-ink-2);
}
.tb-wizard-line {
    height: 2px;
    background: var(--tb-line);
    border-radius: 2px;
    align-self: center;
    margin-top: -18px;
    min-width: 40px;
    transition: background 0.3s ease;
}
.tb-wizard-line.is-done {
    background: var(--tb-primary);
}

/* Steps */
.tb-wizard-shell {
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-lg);
    padding: 40px 48px 32px;
}
.tb-wizard-step {
    display: none;
}
.tb-wizard-step.is-active {
    display: block;
}
.tb-wizard-step-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--tb-ink);
    letter-spacing: -0.015em;
    margin: 0 0 6px;
}
.tb-wizard-step-sub {
    font-size: 14.5px;
    color: var(--tb-muted);
    margin: 0 0 28px;
}
.tb-wizard-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--tb-line);
}
.tb-wizard-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--tb-ink);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 6px;
}
.tb-wizard-section-sub {
    font-size: 13.5px;
    color: var(--tb-muted);
    margin: 0 0 18px;
}
.tb-wizard-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
.tb-wizard-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

/* Nav row */
.tb-wizard-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--tb-line);
    flex-wrap: wrap;
}
.tb-wizard-nav .tb-wizard-nav-left {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.tb-wizard-nav .tb-wizard-nav-right {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.tb-wizard-inline-link {
    font-size: 13.5px;
    color: var(--tb-muted);
    text-decoration: none;
    font-weight: 500;
}
.tb-wizard-inline-link a {
    color: var(--tb-primary);
    font-weight: 700;
    margin-left: 4px;
    text-decoration: none;
}
.tb-wizard-inline-link a:hover {
    text-decoration: underline;
}

/* Reuse .tb-auth-* input styles here */
.tb-wizard-page .form-control,
.tb-wizard-page input[type="text"],
.tb-wizard-page input[type="email"],
.tb-wizard-page input[type="password"],
.tb-wizard-page input[type="number"],
.tb-wizard-page input[type="date"],
.tb-wizard-page textarea,
.tb-wizard-page select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--tb-line);
    border-radius: 12px;
    background: #fff;
    color: var(--tb-ink);
    font-family: var(--tb-font-sans);
    font-size: 14.5px;
    font-weight: 500;
    outline: none;
    height: auto;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.tb-wizard-page .form-control:focus,
.tb-wizard-page input:focus,
.tb-wizard-page textarea:focus,
.tb-wizard-page select:focus {
    border-color: var(--tb-primary);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}
.tb-wizard-page input::placeholder,
.tb-wizard-page textarea::placeholder {
    color: var(--tb-muted-2);
    font-weight: 500;
}
.tb-wizard-page .form-group,
.tb-wizard-page .tb-wizard-field {
    margin-bottom: 16px;
}
.tb-wizard-page .form-group label,
.tb-wizard-page .tb-wizard-field label,
.tb-wizard-page .control-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--tb-ink-2);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
.tb-wizard-page .text-danger {
    color: var(--tb-accent-600) !important;
}
.tb-wizard-page code.text-danger {
    background: transparent;
    padding: 0;
    font-size: 12.5px;
    font-weight: 500;
    font-family: var(--tb-font-sans);
    display: block;
    margin-top: 6px;
}
.tb-wizard-page input.tb-invalid,
.tb-wizard-page textarea.tb-invalid,
.tb-wizard-page select.tb-invalid {
    border-color: var(--tb-accent);
    background: var(--tb-accent-50);
}

/* File upload zone — modern drop area */
.tb-wizard-file {
    position: relative;
    border: 1.5px dashed var(--tb-line);
    border-radius: 12px;
    padding: 20px 20px;
    background: var(--tb-bg-soft);
    transition: border-color 0.15s ease, background 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    cursor: pointer;
    min-height: 108px;
    overflow: hidden;
}
.tb-wizard-file:hover,
.tb-wizard-file.tb-drag-over {
    border-color: var(--tb-primary);
    background: var(--tb-primary-50);
}
.tb-wizard-file input[type="file"] {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    font-size: 0;
    box-shadow: none !important;
}
.tb-wizard-file .tb-file-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--tb-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tb-primary);
    font-size: 16px;
    flex-shrink: 0;
    z-index: 1;
    pointer-events: none;
}
.tb-wizard-file .tb-file-primary {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tb-ink);
    z-index: 1;
    pointer-events: none;
}
.tb-wizard-file .tb-file-primary strong {
    color: var(--tb-primary);
    font-weight: 700;
}
.tb-wizard-file .tb-file-hint {
    font-size: 11.5px;
    color: var(--tb-muted);
    z-index: 1;
    pointer-events: none;
}
/* Filled state (single-file inputs — after selection) */
.tb-wizard-file.tb-has-file {
    background: #fff;
    border-color: var(--tb-primary);
    border-style: solid;
    padding: 12px 16px;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    min-height: 0;
    gap: 12px;
}
.tb-wizard-file.tb-has-file .tb-file-icon {
    background: var(--tb-primary-50);
    border-color: var(--tb-primary-50);
}
.tb-wizard-file.tb-has-file .tb-file-hint {
    display: none;
}
.tb-wizard-file.tb-has-file .tb-file-primary {
    flex: 1;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    color: var(--tb-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.tb-wizard-file.tb-has-file .tb-file-primary strong {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tb-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}

/* Terms + recaptcha */
.tb-wizard-page .tb-auth-terms,
.tb-wizard-page .form-group.terms label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: var(--tb-ink-2);
    line-height: 1.5;
    cursor: pointer;
    margin: 8px 0;
}
.tb-wizard-page .form-group.terms input[type="checkbox"] {
    margin-top: 3px;
    accent-color: var(--tb-primary);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.tb-wizard-page .form-group.terms .terms-link {
    color: var(--tb-primary);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}
.tb-wizard-page .vat-alloted label {
    display: block;
    font-size: 13.5px;
    color: var(--tb-ink-2);
    margin-top: 12px;
    font-weight: 500;
}
.tb-wizard-page .vat-alloted input[type="checkbox"] {
    accent-color: var(--tb-primary);
    margin-right: 6px;
}
.tb-wizard-page .g-recaptcha {
    margin: 12px 0 20px;
}

/* Select2 override (keep readable inside wizard) */
.tb-wizard-page .select2-container .select2-selection--multiple {
    min-height: 46px;
    border: 1px solid var(--tb-line) !important;
    border-radius: 12px !important;
    padding: 4px 6px;
    background: #fff;
}
.tb-wizard-page .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--tb-primary) !important;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}
.tb-wizard-page .select2-selection__choice {
    background: var(--tb-primary-50) !important;
    border: 0 !important;
    color: var(--tb-primary) !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .tb-wizard-shell {
        padding: 28px 20px 24px;
    }
    .tb-wizard-progress {
        grid-template-columns: 1fr auto 1fr auto 1fr;
        gap: 6px;
    }
    .tb-wizard-num {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    .tb-wizard-label {
        font-size: 11.5px;
    }
    .tb-wizard-line {
        min-width: 16px;
    }
    .tb-wizard-grid-3,
    .tb-wizard-grid-2 {
        grid-template-columns: 1fr;
    }
    .tb-wizard-nav {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .tb-wizard-nav .tb-wizard-nav-left,
    .tb-wizard-nav .tb-wizard-nav-right {
        justify-content: center;
    }
    .tb-wizard-nav .tb-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================================
 * UNIFIED SIDEBAR — customer + trader (admin-style, TradyBay palette)
 * Scope: .tb-sidenav wrapper on the outer sidebar element.
 * ===================================================================== */
.tb-sidenav {
    background: #fff;
    border-radius: 14px;
    padding: 8px 0;
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
}
.tb-sidenav .side-nav {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.tb-sidenav .side-nav-item {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}
.tb-sidenav .side-nav-title {
    display: block;
    padding: 14px 20px 6px !important;
    color: var(--tb-muted, #64748b) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: transparent !important;
}
.tb-sidenav .side-nav-divider {
    height: 1px;
    background: var(--tb-line-2, #f1f5f9);
    margin: 10px 16px !important;
    list-style: none;
}
.tb-sidenav .side-nav-item > .side-nav-link,
.tb-sidenav .side-nav-item > a.side-nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 16px !important;
    margin: 2px 8px !important;
    color: var(--tb-ink-2, #334155) !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    position: relative;
    cursor: pointer;
    user-select: none;
}
.tb-sidenav .side-nav-item > .side-nav-link > i,
.tb-sidenav .side-nav-item > .side-nav-link > .side-nav-icon {
    width: 18px;
    text-align: center;
    font-size: 15px;
    flex-shrink: 0;
    color: inherit;
}
.tb-sidenav .side-nav-item > .side-nav-link > span:not(.side-nav-badge):not(.menu-arrow):not(.side-nav-count) {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tb-sidenav .side-nav-item > .side-nav-link:hover {
    background: var(--tb-primary-50, #eff6ff) !important;
    color: var(--tb-primary, #1e40af) !important;
}
.tb-sidenav .side-nav-item.is-active > .side-nav-link,
.tb-sidenav .side-nav-item > .side-nav-link.is-active {
    background: var(--tb-primary-50, #eff6ff) !important;
    color: var(--tb-primary, #1e40af) !important;
    font-weight: 700 !important;
    box-shadow: inset 3px 0 0 0 var(--tb-primary, #1e40af);
}
.tb-sidenav .side-nav-badge {
    background: var(--tb-primary, #1e40af);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    min-width: 22px;
    text-align: center;
    line-height: 1.5;
    margin-left: auto;
}
.tb-sidenav .side-nav-item > .side-nav-link .menu-arrow {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 10px;
    color: currentColor;
    opacity: 0.65;
    transition: transform 0.22s ease, opacity 0.22s ease;
}
.tb-sidenav .side-nav-item > .side-nav-link .menu-arrow::before {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}
.tb-sidenav .side-nav-item > .side-nav-link[aria-expanded="true"] .menu-arrow {
    transform: rotate(180deg);
    opacity: 1;
}
.tb-sidenav .side-nav-collapse {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.28s ease, opacity 0.2s ease;
}
.tb-sidenav .side-nav-collapse.is-shown {
    max-height: 400px;
    opacity: 1;
}
.tb-sidenav .side-nav-second-level {
    list-style: none !important;
    padding: 4px 0 8px !important;
    margin: 0 !important;
}
.tb-sidenav .side-nav-second-level > li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}
.tb-sidenav .side-nav-second-level > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 16px 8px 46px !important;
    margin: 1px 8px !important;
    color: var(--tb-ink-2, #334155) !important;
    text-decoration: none !important;
    background: transparent !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    position: relative;
}
.tb-sidenav .side-nav-second-level > li > a > i,
.tb-sidenav .side-nav-second-level > li > a > .side-nav-icon {
    width: 14px;
    text-align: center;
    font-size: 12px;
    color: var(--tb-muted, #64748b);
    flex-shrink: 0;
    transition: color 0.15s ease;
}
.tb-sidenav .side-nav-second-level > li > a > span:not(.side-nav-count):not(.side-nav-badge) {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tb-sidenav .side-nav-second-level > li > a:hover {
    background: var(--tb-primary-50, #eff6ff) !important;
    color: var(--tb-primary, #1e40af) !important;
}
.tb-sidenav .side-nav-second-level > li > a:hover > i {
    color: var(--tb-primary, #1e40af);
}
.tb-sidenav .side-nav-second-level > li > a.is-active,
.tb-sidenav .side-nav-second-level > li.is-active > a {
    background: var(--tb-primary, #1e40af) !important;
    color: #fff !important;
    font-weight: 700 !important;
}
.tb-sidenav .side-nav-second-level > li > a.is-active > i,
.tb-sidenav .side-nav-second-level > li.is-active > a > i {
    color: #fff;
}
.tb-sidenav .side-nav-count {
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-ink-2, #334155);
    font-size: 11.5px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
    min-width: 24px;
    text-align: center;
    line-height: 1.5;
    flex-shrink: 0;
    margin-left: auto;
}
.tb-sidenav .side-nav-second-level > li > a:hover .side-nav-count {
    background: #fff;
    color: var(--tb-primary, #1e40af);
}
.tb-sidenav .side-nav-second-level > li > a.is-active .side-nav-count,
.tb-sidenav .side-nav-second-level > li.is-active > a .side-nav-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* ---------- Project tables — icon-button actions + CSS tooltip ---------- */
.acct-icon-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.acct-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--tb-line, #e5e7eb);
    background: #fff;
    color: var(--tb-ink-2, #334155);
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.acct-icon-btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}
.acct-icon-btn > i {
    line-height: 1;
    pointer-events: none;
}

/* Primary variant — Payment options */
.acct-icon-btn--primary {
    color: var(--tb-primary, #1e40af);
    border-color: var(--tb-primary-50, #eff6ff);
    background: var(--tb-primary-50, #eff6ff);
}
.acct-icon-btn--primary:hover {
    background: var(--tb-primary, #1e40af);
    border-color: var(--tb-primary, #1e40af);
    color: #fff;
}

/* Neutral variant — Extra work */
.acct-icon-btn--neutral {
    color: var(--tb-ink-2, #334155);
    border-color: var(--tb-line, #e5e7eb);
    background: #fff;
}
.acct-icon-btn--neutral:hover {
    background: var(--tb-primary-50, #eff6ff);
    border-color: var(--tb-primary, #1e40af);
    color: var(--tb-primary, #1e40af);
}

/* Accent variant — Complete / Feedback (final actions) */
.acct-icon-btn--accent {
    color: var(--tb-accent, #f97316);
    border-color: var(--tb-accent-50, #fff7ed);
    background: var(--tb-accent-50, #fff7ed);
}
.acct-icon-btn--accent:hover {
    background: var(--tb-accent, #f97316);
    border-color: var(--tb-accent, #f97316);
    color: #fff;
}

/* CSS tooltip — appears above the button on hover / focus */
.acct-icon-btn[data-tooltip] {
    isolation: isolate;
}
.acct-icon-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    background: var(--tb-ink, #0b1220);
    color: #fff;
    padding: 5px 10px;
    border-radius: 6px;
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 1050;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}
.acct-icon-btn[data-tooltip]::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 3px);
    transform: translateX(-50%) translateY(4px);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--tb-ink, #0b1220);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 1050;
}
.acct-icon-btn[data-tooltip]:hover::after,
.acct-icon-btn[data-tooltip]:focus-visible::after,
.acct-icon-btn[data-tooltip]:hover::before,
.acct-icon-btn[data-tooltip]:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.acct-cell-muted {
    color: var(--tb-muted, #64748b);
    font-weight: 500;
}

/* Status pill (Past work "Status" column) */
.acct-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.01em;
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-ink-2, #334155);
}
.acct-status--completed,
.acct-status--complete,
.acct-status--released,
.acct-status--closed {
    background: #dcfce7;
    color: #15803d;
}
.acct-status--cancelled,
.acct-status--canceled,
.acct-status--refunded,
.acct-status--disputed {
    background: var(--tb-accent-50, #fff7ed);
    color: var(--tb-accent-600, #ea580c);
}

/* ---------- Contact page — Dropzone override ---------- */
.tb-contact-page .tb-contact-dropzone {
    padding: 0;
    background: transparent;
    border: 0;
    min-height: 0;
    display: block;
    cursor: default;
}
.tb-contact-page .tb-contact-dropzone .dropzone {
    position: relative;
    border: 1.5px dashed var(--tb-line);
    border-radius: 12px;
    padding: 24px 20px;
    background: var(--tb-bg-soft);
    min-height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.tb-contact-page .tb-contact-dropzone .dropzone:hover,
.tb-contact-page .tb-contact-dropzone .dropzone.dz-drag-hover {
    border-color: var(--tb-primary);
    background: var(--tb-primary-50);
}
.tb-contact-page .tb-contact-dropzone .dropzone .dz-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--tb-ink);
}
.tb-contact-page .tb-contact-dropzone .dropzone .dz-message h3 {
    display: none;
}
.tb-contact-page .tb-contact-dropzone .dropzone .fallback {
    display: none;
}
.tb-contact-page .tb-contact-dropzone .dropzone .dz-preview {
    margin: 10px !important;
}
.tb-contact-page .tb-contact-dropzone .dropzone-previews .card {
    border-radius: 12px;
    border: 1px solid var(--tb-line);
    background: #fff;
    box-shadow: none;
}
.tb-contact-page .tb-contact-dropzone .dropzone-previews .card [data-dz-name] {
    color: var(--tb-ink) !important;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}
.tb-contact-page .tb-contact-dropzone .dropzone-previews .card [data-dz-size] {
    color: var(--tb-muted);
    font-size: 12.5px;
    margin-top: 2px;
}
.tb-contact-page .tb-contact-dropzone .dropzone-previews .card [data-dz-remove] {
    color: var(--tb-accent);
    font-weight: 700;
    font-size: 18px;
}
.tb-contact-page .tb-contact-dropzone .dropzone-previews .card [data-dz-remove]:hover {
    color: var(--tb-accent-600);
}
.tb-contact-page select.form-control,
.tb-auth-page select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Explicit single-line height so Chromium doesn't fall back to
       list-box rendering (which was showing all 4 options stacked as
       tiny horizontal dashes under the "You are" label). */
    display: block !important;
    width: 100%;
    height: 48px !important;
    min-height: 48px;
    max-height: 48px;
    line-height: 1.4 !important;
    font-size: 15px;
    font-weight: 500;
    color: var(--tb-ink, #0b1220) !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'><path d='M1 1l6 6 6-6' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 14px 8px !important;
    padding: 13px 40px 13px 16px !important;
    box-sizing: border-box;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Make sure options render as readable text — some Chromium builds
   inherit transparent color from a parent rule, leaving them invisible. */
.tb-contact-page select.form-control option,
.tb-auth-page select.form-control option {
    color: var(--tb-ink, #0b1220);
    background: #fff;
    padding: 6px 10px;
    font-size: 14px;
    font-weight: 500;
}

/* =====================================================================
 * Customer + Trader dashboard header — match public site (glassy white)
 * .cust-navbar overrides (higher specificity than responsive.css)
 * ===================================================================== */
nav.navbar.navbar-dark.cust-navbar,
.wrapper > nav.navbar-dark.cust-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--tb-line, #e5e7eb);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
    padding: 0 !important;
    min-height: auto !important;
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
}
nav.navbar.navbar-dark.cust-navbar > .container {
    min-height: 68px;
    align-items: center;
    position: relative;
}

/* Center the primary nav menu (Dashboard / My projects / My properties) */
nav.navbar.navbar-dark.cust-navbar .cust-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
    flex-direction: row;
    gap: 4px;
    z-index: 1;
}
/* Narrow desktop fallback so centered nav doesn't collide with right cluster */
@media (max-width: 1199px) {
    nav.navbar.navbar-dark.cust-navbar .cust-nav {
        position: static;
        transform: none;
        margin-left: 24px !important;
    }
}
nav.navbar.navbar-dark.cust-navbar .cust-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    padding: 0;
}
nav.navbar.navbar-dark.cust-navbar .cust-logo-chip {
    display: inline-flex;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}
nav.navbar.navbar-dark.cust-navbar .cust-logo-chip img {
    height: auto;
    width: auto;
    max-height: 40px;
}

/* Left menu */
nav.navbar.navbar-dark.cust-navbar .cust-nav .nav-link {
    color: var(--tb-ink-2, #334155) !important;
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-weight: 500 !important;
    font-size: 15px !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: background 0.15s ease, color 0.15s ease;
}
nav.navbar.navbar-dark.cust-navbar .cust-nav .nav-link:hover {
    color: var(--tb-primary, #1e40af) !important;
    background: var(--tb-primary-50, #eff6ff) !important;
}
nav.navbar.navbar-dark.cust-navbar .cust-nav .nav-link.active {
    color: var(--tb-primary, #1e40af) !important;
    background: var(--tb-primary-50, #eff6ff) !important;
    font-weight: 700 !important;
}

/* Right cluster — icon buttons */
nav.navbar.navbar-dark.cust-navbar .cust-right {
    align-items: center;
    gap: 6px;
}
nav.navbar.navbar-dark.cust-navbar .cust-icon {
    position: relative;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--tb-ink-2, #334155) !important;
    border: 1px solid var(--tb-line, #e5e7eb);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
    font-size: 14px;
}
nav.navbar.navbar-dark.cust-navbar .cust-icon:hover {
    background: var(--tb-primary-50, #eff6ff) !important;
    color: var(--tb-primary, #1e40af) !important;
    border-color: var(--tb-primary, #1e40af);
}
nav.navbar.navbar-dark.cust-navbar .cust-icon-dot {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: var(--tb-accent, #f97316);
    border-radius: 50%;
    border: 2px solid #fff;
}

/* User dropdown pill */
nav.navbar.navbar-dark.cust-navbar .cust-user,
nav.navbar.navbar-dark.cust-navbar .cust-user:focus,
nav.navbar.navbar-dark.cust-navbar .cust-user:hover,
nav.navbar.navbar-dark.cust-navbar .cust-user.show {
    background: transparent !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 4px 12px 4px 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    margin-left: 6px;
    transition: background 0.15s ease;
}
nav.navbar.navbar-dark.cust-navbar .cust-user:hover {
    background: transparent !important;
}
nav.navbar.navbar-dark.cust-navbar .cust-user::after {
    display: none !important;
}
nav.navbar.navbar-dark.cust-navbar .cust-user .account-user-avatar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
}
/* Initials sit underneath; a real image (when present) overlays via z-index.
   If the image fails to load, `onerror="this.remove()"` drops it and the
   initials show through — no broken-image icon. */
nav.navbar.navbar-dark.cust-navbar .cust-user .account-user-avatar .avatar-initials {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    background: var(--tb-primary, #1e40af) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
}
nav.navbar.navbar-dark.cust-navbar .cust-user .account-user-avatar img {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 0 !important;
    display: block !important;
}
nav.navbar.navbar-dark.cust-navbar .cust-user-meta {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}
nav.navbar.navbar-dark.cust-navbar .cust-user .account-user-name {
    color: var(--tb-ink, #0b1220) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
}
nav.navbar.navbar-dark.cust-navbar .cust-user .account-position {
    color: var(--tb-muted, #64748b) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
}
nav.navbar.navbar-dark.cust-navbar .cust-user-caret {
    color: var(--tb-muted, #64748b) !important;
    font-size: 16px !important;
}

/* Dropdown menu — modern */
nav.navbar.navbar-dark.cust-navbar .profile-dropdown {
    background: #fff !important;
    border: 1px solid var(--tb-line, #e5e7eb) !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.05) !important;
    padding: 6px !important;
    margin-top: 8px !important;
    min-width: 220px !important;
}
nav.navbar.navbar-dark.cust-navbar .profile-dropdown .noti-title {
    padding: 8px 12px 6px !important;
    border-bottom: 1px solid var(--tb-line-2, #f1f5f9);
    margin-bottom: 6px;
}
nav.navbar.navbar-dark.cust-navbar .profile-dropdown .noti-title h6 {
    color: var(--tb-muted, #64748b) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 !important;
}
nav.navbar.navbar-dark.cust-navbar .profile-dropdown ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
}
nav.navbar.navbar-dark.cust-navbar .profile-dropdown .list-item {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    list-style: none;
}
nav.navbar.navbar-dark.cust-navbar .profile-dropdown .notify-item,
nav.navbar.navbar-dark.cust-navbar .profile-dropdown .dropdown-item {
    display: block !important;
    padding: 9px 12px !important;
    border-radius: 8px !important;
    color: var(--tb-ink, #0b1220) !important;
    background: transparent !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
nav.navbar.navbar-dark.cust-navbar .profile-dropdown .notify-item:hover,
nav.navbar.navbar-dark.cust-navbar .profile-dropdown .dropdown-item:hover {
    background: var(--tb-primary-50, #eff6ff) !important;
    color: var(--tb-primary, #1e40af) !important;
}

/* Mobile header */
header.mobile-menu.navbar-dark.cust-mobile-header {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--tb-line, #e5e7eb);
    padding: 12px 16px;
}
header.mobile-menu.navbar-dark.cust-mobile-header .cust-mheader-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
header.mobile-menu.navbar-dark.cust-mobile-header .cust-brand--mobile img {
    height: 34px;
    max-height: 34px;
    width: auto;
}
header.mobile-menu.navbar-dark.cust-mobile-header .cust-mheader-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
header.mobile-menu.navbar-dark.cust-mobile-header .cust-icon {
    background: transparent !important;
    color: var(--tb-ink-2, #334155) !important;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 10px !important;
    width: 36px;
    height: 36px;
}
header.mobile-menu.navbar-dark.cust-mobile-header .cust-icon:hover {
    background: var(--tb-primary-50, #eff6ff) !important;
    color: var(--tb-primary, #1e40af) !important;
    border-color: var(--tb-primary, #1e40af);
}
header.mobile-menu.navbar-dark.cust-mobile-header .cust-mheader-avatar {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tb-primary, #1e40af);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
    overflow: hidden;
}
header.mobile-menu.navbar-dark.cust-mobile-header .cust-mheader-avatar .cust-mheader-avatar-initials {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
}
header.mobile-menu.navbar-dark.cust-mobile-header .cust-mheader-avatar img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Navbar toggler icon — colour so it stays visible against the white bar */
nav.navbar.navbar-dark.cust-navbar .navbar-toggler {
    color: var(--tb-ink, #0b1220) !important;
    border: 1px solid var(--tb-line, #e5e7eb);
    background: transparent;
    padding: 6px 10px;
    border-radius: 8px;
}
nav.navbar.navbar-dark.cust-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15);
}

/* =====================================================================
 * SITE-WIDE PALETTE ENFORCEMENT
 * Overrides Bootstrap 4 utility colours + common components to the
 * TradyBay palette (Trust Blue + Warm Orange + neutrals) so pages we
 * haven't individually redesigned still read as on-brand.
 * ===================================================================== */

/* --- Button colour variants --- */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--tb-primary, #1e40af) !important;
    border-color: var(--tb-primary, #1e40af) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
    background-color: var(--tb-primary-700, #1e3a8a) !important;
    border-color: var(--tb-primary-700, #1e3a8a) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.btn-outline-primary {
    color: var(--tb-primary, #1e40af) !important;
    border-color: var(--tb-primary, #1e40af) !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover {
    background-color: var(--tb-primary, #1e40af) !important;
    color: #fff !important;
}

.btn-success,
.btn-success:not(:disabled):not(.disabled).active,
.btn-success:not(:disabled):not(.disabled):active {
    background-color: var(--tb-primary, #1e40af) !important;
    border-color: var(--tb-primary, #1e40af) !important;
    color: #fff !important;
}
.btn-success:hover,
.btn-success:focus {
    background-color: var(--tb-primary-700, #1e3a8a) !important;
    border-color: var(--tb-primary-700, #1e3a8a) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.btn-danger,
.btn-danger:not(:disabled):not(.disabled).active,
.btn-danger:not(:disabled):not(.disabled):active {
    background-color: var(--tb-accent, #f97316) !important;
    border-color: var(--tb-accent, #f97316) !important;
    color: #fff !important;
}
.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--tb-accent-600, #ea580c) !important;
    border-color: var(--tb-accent-600, #ea580c) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.btn-warning,
.btn-warning:not(:disabled):not(.disabled).active,
.btn-warning:not(:disabled):not(.disabled):active {
    background-color: var(--tb-accent, #f97316) !important;
    border-color: var(--tb-accent, #f97316) !important;
    color: #fff !important;
}
.btn-warning:hover,
.btn-warning:focus {
    background-color: var(--tb-accent-600, #ea580c) !important;
    border-color: var(--tb-accent-600, #ea580c) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.btn-info,
.btn-info:not(:disabled):not(.disabled).active,
.btn-info:not(:disabled):not(.disabled):active {
    background-color: var(--tb-primary, #1e40af) !important;
    border-color: var(--tb-primary, #1e40af) !important;
    color: #fff !important;
}
.btn-info:hover,
.btn-info:focus {
    background-color: var(--tb-primary-700, #1e3a8a) !important;
    border-color: var(--tb-primary-700, #1e3a8a) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.btn-secondary,
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active {
    background-color: var(--tb-ink-2, #334155) !important;
    border-color: var(--tb-ink-2, #334155) !important;
    color: #fff !important;
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--tb-ink, #0b1220) !important;
    border-color: var(--tb-ink, #0b1220) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* --- Text utility colours --- */
.text-primary { color: var(--tb-primary, #1e40af) !important; }
.text-success { color: var(--tb-primary, #1e40af) !important; }
.text-info    { color: var(--tb-primary, #1e40af) !important; }
.text-danger  { color: var(--tb-accent-600, #ea580c) !important; }
.text-warning { color: var(--tb-accent-600, #ea580c) !important; }
.text-muted   { color: var(--tb-muted, #64748b) !important; }

/* --- Background utility colours --- */
.bg-primary { background-color: var(--tb-primary, #1e40af) !important; color: #fff !important; }
.bg-success { background-color: var(--tb-primary, #1e40af) !important; color: #fff !important; }
.bg-info    { background-color: var(--tb-primary, #1e40af) !important; color: #fff !important; }
.bg-danger  { background-color: var(--tb-accent, #f97316) !important; color: #fff !important; }
.bg-warning { background-color: var(--tb-accent, #f97316) !important; color: #fff !important; }

/* --- Badges (Bootstrap 4 + 5) --- */
.badge-primary,
.badge.bg-primary,
.badge-info,
.badge.bg-info {
    background-color: var(--tb-primary, #1e40af) !important;
    color: #fff !important;
}
.badge-success,
.badge.bg-success {
    background-color: var(--tb-primary-50, #eff6ff) !important;
    color: var(--tb-primary, #1e40af) !important;
}
.badge-danger,
.badge.bg-danger {
    background-color: var(--tb-accent-50, #fff7ed) !important;
    color: var(--tb-accent-600, #ea580c) !important;
}
.badge-warning,
.badge.bg-warning {
    background-color: var(--tb-accent-50, #fff7ed) !important;
    color: var(--tb-accent-600, #ea580c) !important;
}
.badge-secondary,
.badge.bg-secondary {
    background-color: var(--tb-line-2, #f1f5f9) !important;
    color: var(--tb-ink-2, #334155) !important;
}
.badge-light,
.badge.bg-light {
    background-color: var(--tb-line-2, #f1f5f9) !important;
    color: var(--tb-ink-2, #334155) !important;
}

/* --- Alerts --- */
.alert-primary,
.alert-info {
    background-color: var(--tb-primary-50, #eff6ff) !important;
    color: var(--tb-primary-700, #1e3a8a) !important;
    border-color: var(--tb-primary, #1e40af) !important;
    border-radius: 12px !important;
}
.alert-success {
    background-color: var(--tb-primary-50, #eff6ff) !important;
    color: var(--tb-primary-700, #1e3a8a) !important;
    border-color: var(--tb-primary, #1e40af) !important;
    border-radius: 12px !important;
}
.alert-danger,
.alert-warning {
    background-color: var(--tb-accent-50, #fff7ed) !important;
    color: var(--tb-accent-600, #ea580c) !important;
    border-color: var(--tb-accent, #f97316) !important;
    border-radius: 12px !important;
}

/* --- Form control focus (Bootstrap 4 default is blue-ish; force ours) --- */
.form-control:focus,
.form-select:focus,
.custom-select:focus,
select.form-control:focus,
textarea.form-control:focus,
input.form-control:focus {
    border-color: var(--tb-primary, #1e40af) !important;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12) !important;
    outline: 0;
}
.form-check-input:checked,
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: var(--tb-primary, #1e40af);
}

/* --- Content links (excludes buttons / nav / anchors we already style) --- */
.card-body a:not(.btn):not(.nav-link):not(.dropdown-item):not(.acct-cell-link):not(.tb-mp-trigger):not(.side-nav-link):not(.acct-icon-btn):not(.acct-action-option) {
    color: var(--tb-primary, #1e40af);
    text-decoration: none;
}
.card-body a:not(.btn):not(.nav-link):not(.dropdown-item):not(.acct-cell-link):not(.tb-mp-trigger):not(.side-nav-link):not(.acct-icon-btn):not(.acct-action-option):hover {
    color: var(--tb-primary-700, #1e3a8a);
    text-decoration: underline;
}

/* --- Pagination --- */
.page-link {
    color: var(--tb-primary, #1e40af) !important;
    border-color: var(--tb-line, #e5e7eb) !important;
    background: #fff !important;
}
.page-link:hover {
    color: var(--tb-primary-700, #1e3a8a) !important;
    background: var(--tb-primary-50, #eff6ff) !important;
    border-color: var(--tb-line, #e5e7eb) !important;
}
.page-item.active .page-link {
    background: var(--tb-primary, #1e40af) !important;
    border-color: var(--tb-primary, #1e40af) !important;
    color: #fff !important;
}
.page-item.disabled .page-link {
    color: var(--tb-muted-2, #94a3b8) !important;
}
.page-link:focus {
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15) !important;
}

/* --- Modal buttons --- */
.modal .btn-close-btn {
    background: transparent;
    border: 1px solid var(--tb-line, #e5e7eb);
    color: var(--tb-ink-2, #334155);
}
.modal .btn-close-btn:hover {
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-ink, #0b1220);
}

/* --- Table default hover (unless overridden by more specific tables) --- */
.table-hover tbody tr:hover {
    background-color: var(--tb-primary-50, #eff6ff);
}

/* --- Progress bars --- */
.progress-bar {
    background-color: var(--tb-primary, #1e40af);
}
.progress-bar.bg-success { background-color: var(--tb-primary, #1e40af) !important; }
.progress-bar.bg-danger,
.progress-bar.bg-warning { background-color: var(--tb-accent, #f97316) !important; }

/* --- Nav tabs (leftover from pre-redesign) --- */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.active .nav-link {
    color: var(--tb-primary, #1e40af) !important;
    border-color: var(--tb-line, #e5e7eb) var(--tb-line, #e5e7eb) #fff !important;
    background: #fff !important;
    font-weight: 700;
}
.nav-tabs .nav-link:hover {
    color: var(--tb-primary, #1e40af) !important;
    border-color: var(--tb-line, #e5e7eb) var(--tb-line, #e5e7eb) var(--tb-line, #e5e7eb) !important;
}

/* --- Notification/badge counter (used site-wide on sidebar items) --- */
.notification-counter,
.badge.notification-counter {
    background-color: var(--tb-accent, #f97316) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 10.5px;
    padding: 2px 6px;
    border-radius: 999px;
    margin-left: 6px;
    min-width: 18px;
    text-align: center;
    display: inline-block;
    line-height: 1.5;
}

/* --- Common status colour classes leaking from admin templates --- */
.status-pending,
.status-open,
.status-active,
.status-in-progress { color: var(--tb-primary, #1e40af) !important; }
.status-completed,
.status-success,
.status-approved,
.status-released { color: var(--tb-primary, #1e40af) !important; }
.status-cancelled,
.status-canceled,
.status-rejected,
.status-failed,
.status-refunded { color: var(--tb-accent-600, #ea580c) !important; }

/* =====================================================================
 * PROPOSALS PAGE (/job/{id}/bids) — single-column redesign
 * ===================================================================== */
.prp-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.prp-jobline {
    background: var(--tb-bg-soft, #f7f8fb);
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 10px;
    padding: 12px 18px;
    margin: 6px 0 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 14px;
}
.prp-jobline-label {
    color: var(--tb-muted, #64748b);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--tb-line, #e5e7eb);
}
.prp-jobline-title {
    color: var(--tb-primary, #1e40af) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
.prp-jobline-title:hover {
    text-decoration: underline !important;
}
.prp-jobline-trade {
    color: var(--tb-muted, #64748b);
    font-size: 13px;
}

.prp-card {
    background: #fff !important;
    border: 1px solid var(--tb-line, #e5e7eb) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
    display: block;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}
.prp-card:hover {
    border-color: var(--tb-primary, #1e40af) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
}

/* Header row: avatar+name (left) + bid amount block (right) */
.prp-card .prp-card-head {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
}
.prp-card .prp-card-head-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.prp-card .prp-avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: var(--tb-primary, #1e40af) !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    flex-shrink: 0;
    overflow: hidden;
    line-height: 1;
}
.prp-card .prp-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.prp-card .prp-name {
    display: block;
    color: var(--tb-ink, #0b1220) !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    letter-spacing: -0.01em;
    margin-bottom: 2px;
    line-height: 1.2;
}
.prp-card .prp-name:hover {
    color: var(--tb-primary, #1e40af) !important;
}
.prp-card .prp-rating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--tb-ink-2, #334155);
    flex-wrap: wrap;
    line-height: 1.2;
}
.prp-card .prp-rating-badge {
    background: #dcfce7;
    color: #15803d;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
}
.prp-card .prp-rating .fa-star {
    color: var(--tb-accent, #f97316);
    font-size: 11px;
}
.prp-card .prp-reviews {
    color: var(--tb-muted, #64748b) !important;
    font-size: 11.5px;
    text-decoration: none !important;
    margin-left: 3px;
}
.prp-card .prp-reviews:hover {
    color: var(--tb-primary, #1e40af) !important;
    text-decoration: underline !important;
}

/* Trades chips */
.prp-card .prp-trades {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}
.prp-card .prp-trades .tp-skill {
    background: var(--tb-primary-50, #eff6ff) !important;
    color: var(--tb-primary, #1e40af) !important;
    padding: 2px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: inline-block;
    border: 0 !important;
    line-height: 1.6;
}

/* Bid block — now inside header row (grid column 3) */
.prp-card .prp-bid {
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
    gap: 4px;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    min-width: 110px;
    flex-shrink: 0;
}
.prp-card .prp-bid-amount {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--tb-primary, #1e40af) !important;
    letter-spacing: -0.02em;
    line-height: 1;
}
.prp-card .prp-bid-amount span {
    display: block !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    color: var(--tb-muted, #64748b) !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 2px;
}
.prp-card .prp-bid-time {
    text-align: right;
    font-size: 11px;
}
.prp-card .prp-bid-time span {
    display: block !important;
    font-size: 9.5px !important;
    color: var(--tb-muted, #64748b) !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}
.prp-card .prp-bid-time strong {
    font-size: 12px !important;
    color: var(--tb-ink, #0b1220) !important;
    font-weight: 700 !important;
}

/* Description */
.prp-card .prp-desc {
    color: var(--tb-ink-2, #334155) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 10px 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Attachment list */
.prp-card .prp-attach-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 10px;
}
.prp-card .prp-attach {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 8px;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--tb-ink, #0b1220);
    font-weight: 600;
    text-decoration: none;
    max-width: 100%;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.prp-card .prp-attach:hover {
    border-color: var(--tb-primary, #1e40af);
    background: var(--tb-primary-50, #eff6ff);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    text-decoration: none;
}
.prp-card .prp-attach-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    border-radius: 7px;
    font-size: 14px;
    flex-shrink: 0;
}
.prp-card .prp-attach:hover .prp-attach-icon {
    background: var(--tb-primary, #1e40af);
    color: #fff;
}
.prp-card .prp-attach-icon--image {
    background: var(--tb-accent-50, #fff7ed);
    color: var(--tb-accent, #f97316);
}
.prp-card .prp-attach:hover .prp-attach-icon--image {
    background: var(--tb-accent, #f97316);
    color: #fff;
}
.prp-card .prp-attach-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--tb-ink, #0b1220);
    font-weight: 600;
    font-size: 13px;
}
.prp-card .prp-attach-ext {
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-muted, #64748b);
    padding: 1px 7px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}
.prp-card .prp-attach:hover .prp-attach-ext {
    background: #fff;
    color: var(--tb-primary, #1e40af);
}
.prp-card .prp-attach-tool {
    color: var(--tb-muted, #64748b);
    font-size: 11px;
    flex-shrink: 0;
    margin-left: 2px;
    transition: color 0.15s ease;
}
.prp-card .prp-attach:hover .prp-attach-tool {
    color: var(--tb-primary, #1e40af);
}

/* Actions row */
.prp-card .prp-actions {
    display: flex !important;
    align-items: center;
    gap: 8px !important;
    flex-wrap: wrap;
    padding-top: 12px !important;
    border-top: 1px solid var(--tb-line-2, #f1f5f9) !important;
    margin-top: 4px !important;
}
.prp-card .prp-actions .btn {
    padding: 7px 16px !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.prp-card .prp-actions .btn-outline-secondary {
    background: #fff !important;
    border: 1px solid var(--tb-line, #e5e7eb) !important;
    color: var(--tb-ink-2, #334155) !important;
}
.prp-card .prp-actions .btn-outline-secondary:hover {
    background: var(--tb-primary-50, #eff6ff) !important;
    border-color: var(--tb-primary, #1e40af) !important;
    color: var(--tb-primary, #1e40af) !important;
}
.prp-card .prp-award {
    background: #15803d !important;
    color: #fff !important;
    border: 0 !important;
    margin-left: auto !important;
    padding: 7px 20px !important;
}
.prp-card .prp-award:hover {
    background: #14532d !important;
    color: #fff !important;
}
.prp-card .prp-award::after {
    content: " \f062";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    margin-left: 6px;
    transform: rotate(45deg);
    display: inline-block;
}

/* Waiting-for-more-bids row */
.prp-waiting {
    background: var(--tb-bg-soft, #f7f8fb) !important;
    border: 1.5px dashed var(--tb-line, #e5e7eb) !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    color: var(--tb-muted, #64748b) !important;
    font-size: 13.5px !important;
    text-align: center;
    font-weight: 500;
    margin-top: 4px;
}

/* Mobile responsive */
@media (max-width: 767px) {
    .prp-card .prp-card-head {
        grid-template-columns: auto 1fr;
        gap: 10px;
    }
    .prp-card .prp-bid {
        grid-column: 1 / -1;
        grid-row: auto;
        align-items: flex-start;
        text-align: left;
        margin-top: 10px !important;
        padding-top: 10px !important;
        border-top: 1px solid var(--tb-line-2, #f1f5f9) !important;
        min-width: 0;
        flex-direction: row;
        gap: 16px;
    }
    .prp-card .prp-bid-amount,
    .prp-card .prp-bid-time {
        text-align: left;
    }
    .prp-card .prp-actions .prp-award {
        margin-left: 0 !important;
    }
    .prp-waiting {
        display: block !important;
    }
}

/* Wider container on the bids page */
.job-review-page .container,
.acct-page.projects .container {
    max-width: 1240px;
}

/* =====================================================================
 * Sticky sidebar — customer + trader dashboards
 * ===================================================================== */
/* Fix html/body overflow that would break position: sticky.
   responsive.css sets html { overflow-x: hidden } which creates a scroll
   container and disables sticky on every descendant. `overflow-x: clip`
   still prevents horizontal scroll but does NOT create a scroll context. */
html,
body {
    overflow-x: clip !important;
}

@media (min-width: 992px) {
    .cust-sidebar.tb-sidenav,
    .Sidebar.cust-sidebar {
        position: sticky;
        top: 88px;
        max-height: calc(100vh - 108px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--tb-line, #e5e7eb) transparent;
    }
    .cust-sidebar.tb-sidenav::-webkit-scrollbar,
    .Sidebar.cust-sidebar::-webkit-scrollbar {
        width: 6px;
    }
    .cust-sidebar.tb-sidenav::-webkit-scrollbar-thumb,
    .Sidebar.cust-sidebar::-webkit-scrollbar-thumb {
        background: var(--tb-line, #e5e7eb);
        border-radius: 999px;
    }
    .cust-sidebar.tb-sidenav::-webkit-scrollbar-thumb:hover,
    .Sidebar.cust-sidebar::-webkit-scrollbar-thumb:hover {
        background: var(--tb-muted-2, #94a3b8);
    }
    .cust-sidebar.tb-sidenav::-webkit-scrollbar-track,
    .Sidebar.cust-sidebar::-webkit-scrollbar-track {
        background: transparent;
    }
}

/* =====================================================================
 * CUSTOMER DASHBOARD — Recent bids cards
 * ===================================================================== */
.dash-bid-wrap {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dash-bid-wrap:hover {
    border-color: var(--tb-primary, #1e40af);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
.dash-bid-wrap + .dash-bid-wrap {
    margin-top: 12px;
}
.dash-bid-wrap .dash-bid-job {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: var(--tb-bg-soft, #f7f8fb);
    border-bottom: 1px solid var(--tb-line-2, #f1f5f9);
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--tb-ink-2, #334155);
    flex-wrap: wrap;
    margin: 0 !important;
}
.dash-bid-wrap .dash-bid-job > i {
    color: var(--tb-primary, #1e40af);
    font-size: 13px;
    margin-right: 2px;
}
.dash-bid-wrap .dash-bid-job a {
    color: var(--tb-primary, #1e40af) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin: 0 2px;
}
.dash-bid-wrap .dash-bid-job a:hover {
    color: var(--tb-primary-700, #1e3a8a) !important;
    text-decoration: underline !important;
}
.dash-bid-wrap .dash-bid-ago {
    margin-left: auto;
    font-size: 12px;
    color: var(--tb-muted, #64748b);
    font-weight: 500;
    background: #fff;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--tb-line, #e5e7eb);
    white-space: nowrap;
}
.dash-bid-wrap .bid-card {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 18px 20px !important;
    background: #fff;
    display: flex;
    gap: 14px;
}
.dash-bid-wrap .bid-card-avatar {
    flex-shrink: 0;
}
.dash-bid-wrap .bid-card-avatar img {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 2px solid var(--tb-line-2, #f1f5f9);
    flex-shrink: 0;
}
/* Initials avatar (site-wide bid-card) */
.bid-card .bid-card-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--tb-primary, #1e40af);
    color: #fff;
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    line-height: 1;
    user-select: none;
}
.dash-bid-wrap .bid-card-body {
    flex: 1;
    min-width: 0;
}
.dash-bid-wrap .bid-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.dash-bid-wrap .bid-card-name {
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif) !important;
    font-weight: 700 !important;
    font-size: 15.5px !important;
    color: var(--tb-ink, #0b1220) !important;
    text-decoration: none !important;
    margin-right: 6px;
}
.dash-bid-wrap .bid-card-name:hover {
    color: var(--tb-primary, #1e40af) !important;
}
.dash-bid-wrap .bid-card-rating {
    font-size: 13px;
    color: var(--tb-ink-2, #334155);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.dash-bid-wrap .bid-card-rating .fa-star {
    color: var(--tb-accent, #f97316) !important;
    font-size: 11px;
}
.dash-bid-wrap .bid-card-review-count {
    font-size: 12px;
    color: var(--tb-muted, #64748b);
    font-weight: 500;
}
.dash-bid-wrap .bid-card-amount {
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--tb-primary, #1e40af) !important;
    text-align: right;
    white-space: nowrap;
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.dash-bid-wrap .bid-card-completion {
    display: block;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: var(--tb-muted, #64748b) !important;
    margin-top: 2px;
}
.dash-bid-wrap .bid-card-excerpt {
    font-size: 13.5px !important;
    color: var(--tb-ink-2, #334155) !important;
    margin: 8px 0 0 !important;
    line-height: 1.55;
}

@media (max-width: 575px) {
    .dash-bid-wrap .bid-card {
        flex-direction: column;
    }
    .dash-bid-wrap .bid-card-head {
        flex-direction: column;
    }
    .dash-bid-wrap .bid-card-amount {
        text-align: left;
    }
    .dash-bid-wrap .dash-bid-ago {
        margin-left: 0;
    }
}

/* =====================================================================
 * JOB DETAIL PAGE (/job/{id}) — .jobd-clean scoped modern rewrite
 * palette-safe (Trust Blue + Warm Orange + neutrals only, no gradients)
 * ===================================================================== */

/* ---------- Attachment gallery (images + files) ---------- */
.job-attach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 8px;
}
.job-attach-item {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: var(--tb-ink, #0b1220);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    position: relative;
}
.job-attach-item:hover {
    transform: translateY(-2px);
    border-color: var(--tb-primary, #1e40af);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    text-decoration: none;
    color: var(--tb-ink, #0b1220);
}
.job-attach-thumb {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 75%;
    background: var(--tb-bg-soft, #f7f8fb);
    overflow: hidden;
    min-height: 120px;
}
.job-attach-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.job-attach-item:hover .job-attach-thumb img {
    transform: scale(1.05);
}
.job-attach-thumb--icon {
    color: var(--tb-primary, #1e40af);
    font-size: 36px;
    background: var(--tb-primary-50, #eff6ff);
}
.job-attach-thumb--icon i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
}
.job-attach-item:hover .job-attach-thumb--icon {
    background: var(--tb-primary, #1e40af);
    color: #fff;
}
.job-attach-thumb--broken {
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    font-size: 32px;
}
.job-attach-thumb--broken::before {
    content: "\f03e";
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
}
.job-attach-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.5);
    color: #fff;
    font-size: 22px;
    opacity: 0;
    transition: opacity 0.2s ease;
    backdrop-filter: blur(2px);
}
.job-attach-item:hover .job-attach-overlay {
    opacity: 1;
}
.job-attach-meta {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}
.job-attach-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--tb-ink, #0b1220);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 34px;
    word-break: break-all;
}
.job-attach-ext {
    font-size: 10px;
    font-weight: 700;
    color: var(--tb-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.job-attach-dl {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--tb-primary, #1e40af);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.job-attach-item--file:hover .job-attach-dl {
    opacity: 1;
    transform: translateY(0);
}
.job-attach-empty {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--tb-bg-soft, #f7f8fb);
    border: 1.5px dashed var(--tb-line, #e5e7eb);
    border-radius: 12px;
    color: var(--tb-muted, #64748b);
    font-size: 13.5px;
    font-weight: 500;
    margin-top: 8px;
}
.job-attach-empty i {
    color: var(--tb-muted-2, #94a3b8);
    font-size: 18px;
}

/* ---------- .jobd-clean scoped page rewrite ---------- */
.jobd-clean {
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
    color: var(--tb-ink, #0b1220);
}

/* Neutralise old inline red/green sprinkled through the file */
.jobd-clean [style*="color: red"],
.jobd-clean [style*="color:red"] { color: var(--tb-accent-600, #ea580c) !important; }
.jobd-clean [style*="color: green"],
.jobd-clean [style*="color:green"] { color: var(--tb-primary, #1e40af) !important; }
.jobd-clean [style*="color: #0657bb"],
.jobd-clean [style*="color:#0657bb"] { color: var(--tb-primary, #1e40af) !important; }
.jobd-clean .text-green { color: var(--tb-primary, #1e40af) !important; }

/* ---------- Header ---------- */
.jobd-clean .jobd-crumb {
    font-size: 13px;
    color: var(--tb-muted, #64748b);
    margin-bottom: 12px;
}
.jobd-clean .jobd-crumb a {
    color: var(--tb-primary, #1e40af);
    text-decoration: none;
    font-weight: 600;
}
.jobd-clean .jobd-crumb a:hover {
    color: var(--tb-primary-700, #1e3a8a);
    text-decoration: underline;
}
.jobd-clean .jobd-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.jobd-clean .jobd-title {
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.2;
}
.jobd-clean .jobd-sub {
    color: var(--tb-muted, #64748b);
    font-size: 13.5px;
    margin-top: 4px;
}
.jobd-clean .proj-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-ink-2, #334155);
}
.jobd-clean .proj-badge--success {
    background: #dcfce7;
    color: #15803d;
}
.jobd-clean .proj-badge--muted {
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-muted, #64748b);
}
.jobd-clean .proj-badge--danger,
.jobd-clean .proj-badge--warning {
    background: var(--tb-accent-50, #fff7ed);
    color: var(--tb-accent-600, #ea580c);
}

/* ---------- Tabs (segmented control) ---------- */
.jobd-clean .jobd-tabs {
    border: 0 !important;
    background: var(--tb-line-2, #f1f5f9);
    padding: 4px !important;
    border-radius: 12px !important;
    display: inline-flex;
    gap: 4px;
    margin-bottom: 20px;
    list-style: none;
    width: fit-content;
}
.jobd-clean .jobd-tabs .nav-item {
    list-style: none;
}
.jobd-clean .jobd-tabs .nav-link {
    border: 0 !important;
    border-radius: 8px !important;
    padding: 9px 20px !important;
    color: var(--tb-ink-2, #334155) !important;
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-weight: 600 !important;
    font-size: 14px !important;
    background: transparent !important;
}
.jobd-clean .jobd-tabs .nav-link:hover {
    background: rgba(15, 23, 42, 0.05) !important;
    color: var(--tb-ink, #0b1220) !important;
}
.jobd-clean .jobd-tabs .nav-link.active {
    background: #fff !important;
    color: var(--tb-primary, #1e40af) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
}

/* ---------- Cards ---------- */
.jobd-clean .jobd-card {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    padding: 24px 26px;
    margin-bottom: 16px;
}
.jobd-clean .jobd-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--tb-line-2, #f1f5f9);
}
.jobd-clean .jobd-card-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--tb-ink, #0b1220);
    margin: 0;
    letter-spacing: -0.01em;
    border: 0 !important;
    padding: 0 !important;
}

/* Header CTA button (Add extra work) */
.jobd-clean .jobd-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--tb-accent, #f97316);
    color: #fff;
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
    transition: background 0.15s ease;
    text-decoration: none;
}
.jobd-clean .jobd-cta-btn:hover {
    background: var(--tb-accent-600, #ea580c);
    color: #fff;
}
.jobd-clean .jobd-cta-btn i {
    font-size: 11px;
}

/* ---------- Info grid ---------- */
.jobd-clean .jobd-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 28px;
    margin-bottom: 4px;
}
.jobd-clean .jobd-info-item--full {
    grid-column: 1 / -1;
}
.jobd-clean .jobd-info-label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--tb-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin-bottom: 6px;
}
.jobd-clean .jobd-info-value {
    display: block;
    font-size: 14.5px;
    color: var(--tb-ink, #0b1220);
    font-weight: 500;
    line-height: 1.55;
}
.jobd-clean .jobd-info-value--rich {
    line-height: 1.6;
}
.jobd-clean .jobd-info-value--rich p {
    margin: 0 0 8px;
}
.jobd-clean .jobd-info-value--rich p:last-child {
    margin-bottom: 0;
}
.jobd-clean .jobd-info-empty {
    color: var(--tb-muted-2, #94a3b8);
}

/* ---------- Sections inside card ---------- */
.jobd-clean .jobd-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--tb-line-2, #f1f5f9);
}
.jobd-clean .jobd-section--last {
    padding-bottom: 4px;
}
.jobd-clean .jobd-section-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--tb-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 14px;
}

/* ---------- Extra work items ---------- */
.jobd-clean .jobd-extra-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.jobd-clean .jobd-extra {
    background: var(--tb-bg-soft, #f7f8fb);
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 12px;
    padding: 18px 20px;
}
.jobd-clean .jobd-extra-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
}
.jobd-clean .jobd-extra-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--tb-ink, #0b1220);
}
.jobd-clean .jobd-extra-title i {
    color: var(--tb-primary, #1e40af);
    font-size: 14px;
}
.jobd-clean .jobd-extra-amount {
    font-size: 18px;
    font-weight: 800;
    color: var(--tb-primary, #1e40af);
    letter-spacing: -0.01em;
    flex-shrink: 0;
}
.jobd-clean .jobd-extra-desc {
    color: var(--tb-ink-2, #334155);
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0 0 14px;
}
.jobd-clean .jobd-extra-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.jobd-clean .jobd-extra-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}
.jobd-clean .jobd-extra-pill i { font-size: 11px; }
.jobd-clean .jobd-extra-pill--pending {
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-ink-2, #334155);
}
.jobd-clean .jobd-extra-pill--quoted {
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
}
.jobd-clean .jobd-extra-pill--accepted {
    background: var(--tb-primary, #1e40af);
    color: #fff;
}
.jobd-clean .jobd-extra-pill--rejected {
    background: var(--tb-accent-50, #fff7ed);
    color: var(--tb-accent-600, #ea580c);
}
.jobd-clean .jobd-extra-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ---------- Buttons (jobd-btn) ---------- */
.jobd-clean .jobd-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.jobd-clean .jobd-btn i {
    font-size: 11px;
}
.jobd-clean .jobd-btn--primary {
    background: var(--tb-accent, #f97316);
    color: #fff;
}
.jobd-clean .jobd-btn--primary:hover {
    background: var(--tb-accent-600, #ea580c);
    color: #fff;
    text-decoration: none;
}
.jobd-clean .jobd-btn--outline {
    background: transparent;
    border: 1px solid var(--tb-line, #e5e7eb);
    color: var(--tb-ink-2, #334155);
}
.jobd-clean .jobd-btn--outline:hover {
    border-color: var(--tb-accent, #f97316);
    color: var(--tb-accent-600, #ea580c);
    background: var(--tb-accent-50, #fff7ed);
    text-decoration: none;
}
.jobd-clean .jobd-btn--block {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Secondary collapse trigger (Amend job) */
.jobd-clean .jobd-secondary-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: var(--tb-bg-soft, #f7f8fb);
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 10px;
    color: var(--tb-ink, #0b1220);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    width: 100%;
    justify-content: flex-start;
}
.jobd-clean .jobd-secondary-btn:hover {
    background: var(--tb-primary-50, #eff6ff);
    border-color: var(--tb-primary, #1e40af);
    color: var(--tb-primary, #1e40af);
    text-decoration: none;
}
.jobd-clean .jobd-secondary-btn > i:first-child {
    color: var(--tb-primary, #1e40af);
    font-size: 14px;
    flex-shrink: 0;
}
.jobd-clean .jobd-secondary-btn-caret {
    margin-left: auto;
    font-size: 11px;
    color: var(--tb-muted, #64748b);
    transition: transform 0.2s ease;
}
.jobd-clean .jobd-secondary-btn[aria-expanded="true"] .jobd-secondary-btn-caret {
    transform: rotate(180deg);
    color: var(--tb-primary, #1e40af);
}

/* Amendment form + amend items */
.jobd-clean .jobd-amend-form .form-group {
    margin-bottom: 16px;
}
.jobd-clean .jobd-amend-form .control-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--tb-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}
.jobd-clean .jobd-amend-form .form-control {
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--tb-ink, #0b1220);
    outline: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.jobd-clean .jobd-amend-form .form-control:focus {
    border-color: var(--tb-primary, #1e40af);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}
.jobd-clean .jobd-amend {
    background: var(--tb-bg-soft, #f7f8fb);
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 10px;
}
.jobd-clean .jobd-amend p {
    color: var(--tb-ink, #0b1220);
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 6px;
}
.jobd-clean .jobd-amend small {
    color: var(--tb-muted, #64748b);
    font-size: 12px;
    font-weight: 500;
}

/* ---------- Q&A ---------- */
.jobd-clean .jobd-qna-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--tb-line-2, #f1f5f9);
    border-radius: 10px;
    margin-bottom: 20px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}
.jobd-clean .jobd-qna-tab {
    padding: 8px 16px;
    border-radius: 8px;
    color: var(--tb-ink-2, #334155);
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.jobd-clean .jobd-qna-tab:hover {
    background: rgba(15, 23, 42, 0.05);
    color: var(--tb-ink, #0b1220);
    text-decoration: none;
}
.jobd-clean .jobd-qna-tab.active {
    background: #fff;
    color: var(--tb-primary, #1e40af);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.jobd-clean .jobd-qna-block {
    margin-bottom: 20px;
}
.jobd-clean .jobd-qna-service {
    font-size: 15px;
    font-weight: 800;
    color: var(--tb-ink, #0b1220);
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}
.jobd-clean .jobd-qna-note {
    color: var(--tb-muted, #64748b);
    font-size: 13px;
    margin: 0 0 12px;
}
.jobd-clean .jobd-qna-accordion {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.jobd-clean .jobd-qna-item {
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.jobd-clean .jobd-qna-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    color: var(--tb-ink, #0b1220);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.jobd-clean .jobd-qna-q:hover {
    background: var(--tb-bg-soft, #f7f8fb);
    color: var(--tb-primary, #1e40af);
    text-decoration: none;
}
.jobd-clean .jobd-qna-caret {
    font-size: 11px;
    color: var(--tb-muted, #64748b);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.jobd-clean .jobd-qna-q[aria-expanded="true"] .jobd-qna-caret {
    transform: rotate(180deg);
    color: var(--tb-primary, #1e40af);
}
.jobd-clean .jobd-qna-a {
    padding: 4px 18px 16px;
    background: var(--tb-bg-soft, #f7f8fb);
    border-top: 1px solid var(--tb-line-2, #f1f5f9);
}
.jobd-clean .jobd-qna-a p {
    color: var(--tb-ink-2, #334155);
    font-size: 14px;
    line-height: 1.6;
    margin: 8px 0 0;
}
.jobd-clean .jobd-qna-a p i {
    color: var(--tb-primary, #1e40af);
    margin-right: 6px;
}
.jobd-clean .jobd-qna-empty {
    text-align: center;
    padding: 28px 20px;
    color: var(--tb-muted, #64748b);
}
.jobd-clean .jobd-qna-empty i {
    font-size: 32px;
    color: var(--tb-muted-2, #94a3b8);
    margin-bottom: 10px;
    display: block;
}

/* ---------- Bids banner ---------- */
.jobd-clean .jobd-bids-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    background: var(--tb-primary, #1e40af);
    color: #fff;
    border-radius: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.jobd-clean .jobd-bids-banner-count {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
}
.jobd-clean .jobd-bids-banner-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 2px;
}
.jobd-clean .jobd-bids-banner-btn {
    background: #fff;
    color: var(--tb-primary, #1e40af);
    padding: 10px 20px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    transition: background 0.15s ease;
}
.jobd-clean .jobd-bids-banner-btn:hover {
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary-700, #1e3a8a);
    text-decoration: none;
}

/* ---------- Payment stats ---------- */
.jobd-clean .jobd-pay-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}
.jobd-clean .jobd-pay-stat {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.jobd-clean .jobd-pay-stat .jobd-pay-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.02em;
}
.jobd-clean .jobd-pay-stat .jobd-pay-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--tb-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ---------- Milestones ---------- */
.jobd-clean .jobd-milestone-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.jobd-clean .jobd-milestone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 18px;
    background: var(--tb-bg-soft, #f7f8fb);
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 12px;
    flex-wrap: wrap;
}
.jobd-clean .jobd-milestone-main {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.jobd-clean .jobd-milestone-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.jobd-clean .jobd-milestone-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--tb-ink, #0b1220);
    margin: 0;
}
.jobd-clean .jobd-milestone-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.5;
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-ink-2, #334155);
}
.jobd-clean .jobd-milestone-status--progress   { background: var(--tb-primary-50, #eff6ff); color: var(--tb-primary, #1e40af); }
.jobd-clean .jobd-milestone-status--requested  { background: var(--tb-primary-50, #eff6ff); color: var(--tb-primary, #1e40af); }
.jobd-clean .jobd-milestone-status--pending    { background: var(--tb-line-2, #f1f5f9); color: var(--tb-muted, #64748b); }
.jobd-clean .jobd-milestone-status--released   { background: var(--tb-primary, #1e40af); color: #fff; }
.jobd-clean .jobd-milestone-status--disputed   { background: var(--tb-accent-50, #fff7ed); color: var(--tb-accent-600, #ea580c); }
.jobd-clean .jobd-milestone-amount {
    font-size: 17px;
    font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.01em;
}
.jobd-clean .jobd-milestone-action {
    flex-shrink: 0;
}
.jobd-clean .jobd-milestone-select {
    min-width: 220px;
    padding: 9px 34px 9px 14px;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 8px;
    background: #fff;
    color: var(--tb-ink, #0b1220);
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 13.5px;
    font-weight: 600;
    outline: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.jobd-clean .jobd-milestone-select:hover {
    border-color: var(--tb-primary, #1e40af);
}
.jobd-clean .jobd-milestone-select:focus {
    border-color: var(--tb-primary, #1e40af);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}

/* No-payments placeholder */
.jobd-clean .jobd-nopay {
    text-align: center;
    padding: 44px 20px;
}
.jobd-clean .jobd-nopay--small {
    padding: 32px 20px;
}
.jobd-clean .jobd-nopay i {
    font-size: 42px;
    color: var(--tb-muted-2, #94a3b8);
    margin-bottom: 12px;
    display: block;
}
.jobd-clean .jobd-nopay h4 {
    color: var(--tb-ink, #0b1220);
    font-weight: 800;
    font-size: 17px;
    margin: 8px 0 6px;
}
.jobd-clean .jobd-nopay p {
    color: var(--tb-muted, #64748b);
    font-size: 13.5px;
    max-width: 380px;
    margin: 0 auto 16px;
}

/* ---------- Right rail ---------- */
.jobd-clean .jobd-rail-card {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    padding: 20px 22px;
}
.jobd-clean .jobd-rail-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--tb-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 16px;
    padding: 0;
}
.jobd-clean .jobd-rail-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 13.5px;
    border-top: 1px solid var(--tb-line-2, #f1f5f9);
}
.jobd-clean .jobd-rail-field:first-of-type {
    border-top: 0;
    padding-top: 0;
}
.jobd-clean .jobd-rail-label {
    color: var(--tb-muted, #64748b);
    font-weight: 500;
}
.jobd-clean .jobd-rail-value {
    color: var(--tb-ink, #0b1220);
    font-weight: 700;
}
.jobd-clean .jobd-rail-cta {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--tb-line-2, #f1f5f9);
}
.jobd-clean .jobd-trader {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}
.jobd-clean .jobd-trader-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--tb-primary, #1e40af);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.jobd-clean .jobd-trader-info {
    flex: 1;
    min-width: 0;
}
.jobd-clean .jobd-trader-name {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--tb-ink, #0b1220);
    text-decoration: none;
}
.jobd-clean .jobd-trader-name:hover {
    color: var(--tb-primary, #1e40af);
    text-decoration: none;
}
.jobd-clean .jobd-trader-sub {
    font-size: 12.5px;
    color: var(--tb-muted, #64748b);
    margin-top: 2px;
}
.jobd-clean .jobd-trader-sub .fa-star {
    color: var(--tb-accent, #f97316);
    font-size: 11px;
    margin-right: 2px;
}

/* Right rail alignment (offset by tabs height, desktop only) */
@media (min-width: 992px) {
    .jobd-clean .row > .col-lg-4 > .jobd-rail-card:first-child {
        margin-top: 60px;
    }
}

/* ---------- Modal polish ---------- */
.jobd-clean .modal-content {
    border: 0;
    border-radius: 16px;
    overflow: hidden;
}
.jobd-clean .modal-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--tb-line-2, #f1f5f9);
}
.jobd-clean .modal-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.01em;
    border: 0 !important;
}
.jobd-clean .modal-body {
    padding: 22px;
}
.jobd-clean .modal-body .form-group { margin-bottom: 14px; }
.jobd-clean .modal-body .control-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--tb-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}
.jobd-clean .modal-body .form-control {
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--tb-ink, #0b1220);
    outline: 0;
}
.jobd-clean .modal-body .form-control:focus {
    border-color: var(--tb-primary, #1e40af);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}
.jobd-clean .modal-footer {
    padding: 16px 22px;
    border-top: 1px solid var(--tb-line-2, #f1f5f9);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .jobd-clean .jobd-card { padding: 20px; }
    .jobd-clean .jobd-info-grid { grid-template-columns: 1fr; }
    .jobd-clean .jobd-pay-stats { grid-template-columns: 1fr; }
    .jobd-clean .jobd-title { font-size: 22px; }
    .jobd-clean .jobd-milestone { flex-direction: column; align-items: stretch; }
    .jobd-clean .jobd-milestone-select { width: 100%; }
    .job-attach-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* =====================================================================
 * EDIT PROPERTY / EDIT JOB — shared modern form styles (.prop-edit-page, .job-edit-page)
 * ===================================================================== */
.prop-edit-page,
.job-edit-page {
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
}
.prop-edit-page .prp-back,
.job-edit-page .prp-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tb-muted, #64748b) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    margin-bottom: 8px;
}
.prop-edit-page .prp-back:hover,
.job-edit-page .prp-back:hover {
    color: var(--tb-primary, #1e40af) !important;
}
.prop-edit-page .acct-head h1,
.job-edit-page .acct-head h1 {
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.02em;
    margin: 0;
}
.prop-edit-page .prop-edit-sub,
.job-edit-page .job-edit-sub {
    color: var(--tb-muted, #64748b);
    font-size: 14px;
    margin: 4px 0 20px;
}

.prop-card {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    padding: 24px 26px;
    margin-bottom: 16px;
}
.prop-card-head {
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--tb-line-2, #f1f5f9);
}
.prop-card-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 800;
    color: var(--tb-ink, #0b1220);
    margin: 0;
    letter-spacing: -0.01em;
}
.prop-card-title i {
    color: var(--tb-primary, #1e40af);
    font-size: 15px;
}
.prop-card-sub {
    color: var(--tb-muted, #64748b);
    font-size: 13px;
    margin: 6px 0 0;
}

.prop-fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.prop-fields--grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
}
@media (max-width: 767px) {
    .prop-fields--grid-2 { grid-template-columns: 1fr; }
}
.prop-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.prop-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--tb-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
}
.prop-help {
    font-size: 12.5px;
    color: var(--tb-muted, #64748b);
    margin: -2px 0 4px;
    font-weight: 500;
}
.prop-input,
.prop-edit-page .form-control,
.job-edit-page .form-control {
    width: 100%;
    padding: 12px 14px !important;
    background: #fff !important;
    border: 1px solid var(--tb-line, #e5e7eb) !important;
    border-radius: 10px !important;
    color: var(--tb-ink, #0b1220) !important;
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 14px !important;
    font-weight: 500 !important;
    outline: 0 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    box-sizing: border-box;
    height: auto !important;
}
.prop-input:focus,
.prop-edit-page .form-control:focus,
.job-edit-page .form-control:focus {
    border-color: var(--tb-primary, #1e40af) !important;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12) !important;
}
.prop-input::placeholder,
.prop-edit-page .form-control::placeholder,
.job-edit-page .form-control::placeholder {
    color: var(--tb-muted-2, #94a3b8);
}
.prop-input--area {
    resize: vertical;
    min-height: 90px;
    line-height: 1.55;
}
.prop-input-with-icon {
    position: relative;
}
.prop-input-with-icon > i {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--tb-muted, #64748b);
    font-size: 13px;
    pointer-events: none;
}
.prop-input--icon {
    padding-left: 38px !important;
}
.prop-select-wrap {
    position: relative;
}
.prop-select-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
    pointer-events: none;
}
.prop-input--select,
.prop-edit-page select.form-select,
.job-edit-page select.form-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-right: 40px !important;
    cursor: pointer;
}

/* Radio + checkbox choices */
.prop-choice-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.prop-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    margin: 0;
}
.prop-choice:hover {
    border-color: var(--tb-primary, #1e40af);
    background: var(--tb-primary-50, #eff6ff);
}
.prop-choice input[type="radio"],
.prop-choice input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.prop-choice-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--tb-line, #e5e7eb);
    background: #fff;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.prop-choice input[type="radio"]:checked + .prop-choice-dot {
    border-color: var(--tb-primary, #1e40af);
    background: var(--tb-primary, #1e40af);
    box-shadow: inset 0 0 0 3px #fff;
}
.prop-choice-box {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--tb-line, #e5e7eb);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.15s ease, background 0.15s ease;
    color: transparent;
    font-size: 10px;
}
.prop-choice input[type="checkbox"]:checked + .prop-choice-box {
    border-color: var(--tb-primary, #1e40af);
    background: var(--tb-primary, #1e40af);
    color: #fff;
}
.prop-choice-label {
    color: var(--tb-ink, #0b1220);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
}
.prop-choice:has(input:checked) {
    border-color: var(--tb-primary, #1e40af);
    background: var(--tb-primary-50, #eff6ff);
}

/* Save bar */
.prop-savebar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 14px;
    position: sticky;
    bottom: 16px;
    box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.05);
    margin-top: 16px;
    flex-wrap: wrap;
}
.prop-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 999px;
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.prop-btn i {
    font-size: 11px;
}
.prop-btn--primary {
    background: var(--tb-accent, #f97316);
    color: #fff;
    border-color: var(--tb-accent, #f97316);
}
.prop-btn--primary:hover {
    background: var(--tb-accent-600, #ea580c);
    border-color: var(--tb-accent-600, #ea580c);
    color: #fff;
    text-decoration: none;
}
.prop-btn--outline {
    background: #fff;
    color: var(--tb-ink-2, #334155);
    border-color: var(--tb-line, #e5e7eb);
}
.prop-btn--outline:hover {
    border-color: var(--tb-primary, #1e40af);
    color: var(--tb-primary, #1e40af);
    background: var(--tb-primary-50, #eff6ff);
    text-decoration: none;
}

@media (max-width: 767px) {
    .prop-card { padding: 20px; }
    .prop-savebar { padding: 14px 16px; }
    .prop-btn { flex: 1; justify-content: center; }
}

/* ------- Required / optional label markers ------- */
.prop-req {
    color: var(--tb-accent, #f97316);
    font-weight: 700;
    margin-left: 2px;
}
.prop-optional {
    color: var(--tb-muted, #64748b);
    font-weight: 500;
    font-size: 12px;
    margin-left: 4px;
}

/* ------- Attachment shell + delete button (job edit) ------- */
.job-edit-page .job-attach-shell {
    position: relative;
}
.job-edit-page .job-attach-del {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #b91c1c;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 999px;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, color 0.15s ease;
    z-index: 3;
    text-decoration: none;
}
.job-edit-page .job-attach-shell:hover .job-attach-del,
.job-edit-page .job-attach-del:focus {
    opacity: 1;
    transform: translateY(0);
}
.job-edit-page .job-attach-del:hover {
    background: #b91c1c;
    color: #fff;
    border-color: #b91c1c;
}

/* ------- Dropzone (job edit) ------- */
.job-edit-page .job-dropzone {
    background: var(--tb-primary-50, #eff6ff);
    border: 2px dashed var(--tb-primary, #1e40af);
    border-radius: 14px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    min-height: auto;
}
.job-edit-page .job-dropzone:hover {
    background: #dbeafe;
    border-color: var(--tb-accent, #f97316);
}
.job-edit-page .job-dropzone .dz-message {
    margin: 0;
}
.job-edit-page .job-drop-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 999px;
    color: var(--tb-primary, #1e40af);
    font-size: 22px;
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.14);
}
.job-edit-page .job-drop-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--tb-ink, #0b1220);
    margin-bottom: 4px;
}
.job-edit-page .job-drop-hint {
    font-size: 13px;
    color: var(--tb-muted, #64748b);
}

@media (max-width: 767px) {
    .job-edit-page .job-attach-del {
        opacity: 1;
        transform: translateY(0);
    }
    .job-edit-page .job-dropzone {
        padding: 24px 16px;
    }
}

/* ============================================================================
   Job edit — compact form density
   Scoped tighter spacing so the whole form fits above the fold.
   ========================================================================= */
.job-edit-page .job-edit-sub { display: none; }
.job-edit-page .acct-head { margin-bottom: 10px; }
.job-edit-page .acct-head h1 { font-size: 20px; margin-bottom: 0; line-height: 1.2; }
.job-edit-page .prp-back { font-size: 12.5px; margin-bottom: 4px; }

.job-edit-page .prop-card {
    padding: 14px 18px;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: none;
}
.job-edit-page .prop-card-head--slim {
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--tb-line-2, #f1f5f9);
}
.job-edit-page .prop-card-title { font-size: 13.5px; gap: 8px; }
.job-edit-page .prop-card-title i { font-size: 12px; }
.job-edit-page .prop-card-sub { display: none; }

.job-edit-page .prop-fields { gap: 10px; }
.job-edit-page .prop-fields--grid-2 { gap: 10px 14px; }
.job-edit-page .prop-field { gap: 3px; }
.job-edit-page .prop-label {
    font-size: 10.5px;
    letter-spacing: 0.05em;
}
.job-edit-page .prop-optional { font-size: 10.5px; }
.job-edit-page .prop-req { font-size: 12px; }

.job-edit-page .form-control,
.job-edit-page .prop-input {
    padding: 8px 12px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    line-height: 1.35 !important;
}
.job-edit-page .prop-input--area,
.job-edit-page textarea.form-control {
    min-height: 62px;
    line-height: 1.4 !important;
}
.job-edit-page .prop-input--select { padding-right: 32px !important; }
.job-edit-page .prop-select-wrap::after { right: 12px; }

/* Attachment grid — smaller thumbs */
.job-edit-page .job-attach-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin: 0;
}
.job-edit-page .job-attach-thumb { padding-bottom: 60%; min-height: 72px; }
.job-edit-page .job-attach-thumb--icon { font-size: 22px; padding: 12px 0; min-height: auto; }
.job-edit-page .job-attach-meta { padding: 6px 8px; gap: 1px; }
.job-edit-page .job-attach-name { font-size: 11.5px; }
.job-edit-page .job-attach-ext { font-size: 9.5px; }
.job-edit-page .job-attach-del {
    width: 22px;
    height: 22px;
    font-size: 9.5px;
    top: 5px;
    right: 5px;
}

/* Dropzone — inline row, not a big box */
.job-edit-page .job-dropzone {
    padding: 10px 14px;
    border-radius: 10px;
    border-width: 1.5px;
    min-height: 0;
    display: flex;
    align-items: center;
    background: var(--tb-primary-50, #eff6ff);
    border: 1.5px dashed var(--tb-primary, #1e40af);
}
.job-edit-page .job-dropzone .dz-message {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    text-align: left;
    width: 100%;
}
.job-edit-page .job-drop-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
    margin: 0;
    flex-shrink: 0;
}
.job-edit-page .job-drop-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.job-edit-page .job-drop-title { font-size: 13px; margin: 0; }
.job-edit-page .job-drop-hint { font-size: 11.5px; margin: 0; }
.job-edit-page .dropzone-previews:empty { display: none; }
.job-edit-page .dropzone-previews:not(:empty) { margin-top: 8px; }

/* Save bar — tighter */
.job-edit-page .prop-savebar {
    padding: 10px 16px;
    margin-top: 10px;
    border-radius: 10px;
}
.job-edit-page .prop-btn {
    padding: 8px 18px;
    font-size: 12.5px;
}

/* Select2 compact */
.job-edit-page .select2-container--default .select2-selection--multiple {
    min-height: 34px !important;
    padding: 2px 8px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
}
.job-edit-page .showMultipleTrade { margin-top: 8px !important; }

@media (max-width: 767px) {
    .job-edit-page .prop-card { padding: 12px 14px; }
    .job-edit-page .prop-fields--grid-2 { grid-template-columns: 1fr; }
    .job-edit-page .job-dropzone { padding: 10px 12px; }
}

/* ============================================================================
   Inbox / Chat v2 — full-width two-panel layout
   Palette: Trust Blue (#1E40AF) + Warm Orange (#F97316) + neutral grays.
   Reference layout inspired by dark chat UI; recolored to TradyBay theme.
   ========================================================================= */
.inbox-v2 {
    background: #f6f7fb;
    padding: 24px 0;
    min-height: calc(100vh - 90px);
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
}
.inbox-v2-container {
    max-width: 1400px;
    padding: 0 20px;
}
.inbox-v2-shell {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 16px;
    height: calc(100vh - 138px);
    min-height: 560px;
}

/* ---- Left list ---- */
.inbox-v2-list {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.inbox-v2-list-head {
    padding: 18px 20px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--tb-line-2, #f1f5f9);
}
.inbox-v2-list-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--tb-ink, #0b1220);
    margin: 0;
    letter-spacing: -0.02em;
}
.inbox-v2-list-count {
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}
.inbox-v2-search {
    position: relative;
    padding: 12px 16px;
    border-bottom: 1px solid var(--tb-line-2, #f1f5f9);
}
.inbox-v2-search i {
    position: absolute;
    top: 50%;
    left: 28px;
    transform: translateY(-50%);
    color: var(--tb-muted-2, #94a3b8);
    font-size: 12px;
    pointer-events: none;
}
.inbox-v2-search input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 10px;
    font-size: 13.5px;
    font-family: inherit;
    background: #fff;
    color: var(--tb-ink, #0b1220);
    outline: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.inbox-v2-search input:focus {
    border-color: var(--tb-primary, #1e40af);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}
.inbox-v2-search input::placeholder { color: var(--tb-muted-2, #94a3b8); }

.inbox-v2-conv-list {
    overflow-y: auto;
    flex: 1;
}
.inbox-v2-conv-list::-webkit-scrollbar { width: 6px; }
.inbox-v2-conv-list::-webkit-scrollbar-thumb { background: var(--tb-line, #e5e7eb); border-radius: 3px; }

.inbox-v2-conv {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    text-decoration: none;
    border-bottom: 1px solid var(--tb-line-2, #f1f5f9);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.inbox-v2-conv:hover {
    background: var(--tb-primary-50, #eff6ff);
    text-decoration: none;
}
.inbox-v2-conv.is-active {
    background: var(--tb-primary, #1e40af);
    border-color: var(--tb-primary, #1e40af);
}
.inbox-v2-conv-avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--tb-line-2, #f1f5f9);
}
.inbox-v2-conv-avatar-initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.inbox-v2-conv-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.inbox-v2-conv.is-active .inbox-v2-conv-avatar {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}
.inbox-v2-conv-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.inbox-v2-conv-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.inbox-v2-conv-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--tb-ink, #0b1220);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}
.inbox-v2-conv-time {
    font-size: 11.5px;
    color: var(--tb-muted, #64748b);
    flex-shrink: 0;
    font-weight: 600;
}
.inbox-v2-conv-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.inbox-v2-conv-snippet {
    font-size: 13px;
    color: var(--tb-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}
.inbox-v2-conv-badge {
    background: var(--tb-accent, #f97316);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.inbox-v2-conv.is-active .inbox-v2-conv-name,
.inbox-v2-conv.is-active .inbox-v2-conv-time,
.inbox-v2-conv.is-active .inbox-v2-conv-snippet {
    color: #fff;
}
.inbox-v2-conv.is-active .inbox-v2-conv-time,
.inbox-v2-conv.is-active .inbox-v2-conv-snippet {
    color: rgba(255, 255, 255, 0.85);
}

/* ---- Right chat pane ---- */
.inbox-v2-chat {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    min-width: 0;
}
.inbox-v2-chat-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--tb-primary, #1e40af);
    color: #fff;
}
.inbox-v2-chat-back {
    display: none;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    font-size: 13px;
    text-decoration: none;
    flex-shrink: 0;
}
.inbox-v2-chat-avatar {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.28);
}
.inbox-v2-chat-avatar-initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
}
.inbox-v2-chat-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.inbox-v2-chat-meta {
    flex: 1;
    min-width: 0;
}
.inbox-v2-chat-name {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inbox-v2-chat-sub {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.inbox-v2-chat-sub .fa-star { color: #fbbf24; font-size: 10px; }
.inbox-v2-dot { opacity: 0.6; }
.inbox-v2-chat-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.inbox-v2-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    transition: background 0.15s ease;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.inbox-v2-icon-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.inbox-v2-jobbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    background: var(--tb-primary-50, #eff6ff);
    border-bottom: 1px solid #dbeafe;
}
.inbox-v2-jobbar-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.inbox-v2-jobbar-label {
    background: var(--tb-primary, #1e40af);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 5px;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.inbox-v2-jobbar-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--tb-ink, #0b1220);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inbox-v2-jobbar-sub {
    font-size: 12px;
    color: var(--tb-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inbox-v2-jobbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--tb-primary, #1e40af);
    border: 1px solid var(--tb-primary, #1e40af);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.inbox-v2-jobbar-btn:hover {
    background: var(--tb-primary, #1e40af);
    color: #fff;
}
.inbox-v2-jobbar-btn i { font-size: 10px; }

.inbox-v2-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    background: #fafbfd;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.inbox-v2-body::-webkit-scrollbar { width: 6px; }
.inbox-v2-body::-webkit-scrollbar-thumb { background: var(--tb-line, #e5e7eb); border-radius: 3px; }

.inbox-v2-daysep {
    text-align: center;
    margin: 6px 0 4px;
    position: relative;
}
.inbox-v2-daysep::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--tb-line, #e5e7eb);
    z-index: 0;
}
.inbox-v2-daysep span {
    position: relative;
    z-index: 1;
    background: #fafbfd;
    padding: 0 12px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--tb-muted, #64748b);
    letter-spacing: 0.03em;
}

/* Bubble styling — override the existing .chat-msg / .chat-event so
   the msg.blade.php partial continues to work without modification. */
.inbox-v2-body .chat-msg {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    max-width: 72%;
    margin-bottom: 4px;
}
.inbox-v2-body .chat-msg--in { align-self: flex-start; }
.inbox-v2-body .chat-msg--out { align-self: flex-end; flex-direction: row-reverse; }
.inbox-v2-body .chat-msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--tb-line-2, #f1f5f9);
}
.inbox-v2-body .chat-msg-avatar-initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.inbox-v2-body .chat-msg-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.inbox-v2-body .chat-msg-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.inbox-v2-body .chat-msg--out .chat-msg-col { align-items: flex-end; }
.inbox-v2-body .chat-msg-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.inbox-v2-body .chat-msg--in .chat-msg-bubble {
    background: #fff;
    color: var(--tb-ink, #0b1220);
    border: 1px solid var(--tb-line, #e5e7eb);
    border-bottom-left-radius: 4px;
}
.inbox-v2-body .chat-msg--out .chat-msg-bubble {
    background: var(--tb-primary, #1e40af);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.inbox-v2-body .chat-msg--out .chat-msg-bubble a { color: #fff; text-decoration: underline; }
.inbox-v2-body .chat-msg--in .chat-msg-bubble a { color: var(--tb-primary, #1e40af); text-decoration: underline; }
.inbox-v2-body .chat-msg-time {
    font-size: 11px;
    color: var(--tb-muted-2, #94a3b8);
    margin-top: 4px;
    font-weight: 600;
}

/* Centered system/event notices */
.inbox-v2-body .chat-event {
    align-self: center;
    max-width: 80%;
    background: var(--tb-accent-50, #fff7ed);
    border: 1px solid #fed7aa;
    color: var(--tb-ink-2, #334155);
    text-align: center;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
}
.inbox-v2-body .chat-event a {
    color: var(--tb-primary, #1e40af);
    font-weight: 700;
    text-decoration: none;
}
.inbox-v2-body .chat-event a:hover { text-decoration: underline; }

.inbox-v2-empty {
    margin: auto;
    text-align: center;
    color: var(--tb-muted, #64748b);
    padding: 40px 20px;
}
.inbox-v2-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    font-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.inbox-v2-empty h4 {
    font-size: 15px;
    font-weight: 800;
    color: var(--tb-ink, #0b1220);
    margin-bottom: 4px;
}
.inbox-v2-empty p {
    font-size: 13.5px;
    color: var(--tb-muted, #64748b);
    margin: 0 auto;
    max-width: 320px;
    line-height: 1.5;
}

/* Chat pane in "no conversation selected" state — center the empty message
   inside the pane using flex so it sits in the middle vertically. */
.inbox-v2-chat--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
}
.inbox-v2-chat--empty .inbox-v2-empty { padding: 40px 24px; }

/* Empty conversation list message */
.inbox-v2-conv-empty {
    padding: 28px 18px;
    text-align: center;
    color: var(--tb-muted, #64748b);
}
.inbox-v2-conv-empty p {
    margin: 0;
    font-size: 13px;
    font-style: italic;
}

/* Composer */
.inbox-v2-composer-wrap {
    background: #fff;
    border-top: 1px solid var(--tb-line, #e5e7eb);
}
.inbox-v2-composer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #fff;
    position: relative;
}
.inbox-v2-attach-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.inbox-v2-attach {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    flex-shrink: 0;
    margin: 0;
    transition: background 0.15s ease;
}
.inbox-v2-attach:hover { background: #dbeafe; }

/* Attachment preview strip (above composer) */
.inbox-v2-attach-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 20px 0;
    padding: 8px 12px;
    background: var(--tb-primary-50, #eff6ff);
    border: 1px solid #dbeafe;
    border-radius: 10px;
    font-size: 13px;
    color: var(--tb-ink-2, #334155);
}
.inbox-v2-attach-preview > i {
    color: var(--tb-primary, #1e40af);
    font-size: 13px;
}
.inbox-v2-attach-preview-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}
.inbox-v2-attach-preview-remove {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #fff;
    color: var(--tb-muted, #64748b);
    border: 1px solid var(--tb-line, #e5e7eb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.inbox-v2-attach-preview-remove:hover {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}

/* Bubble attachments (image + file) */
.inbox-v2-body .chat-msg-attach {
    display: flex;
    text-decoration: none;
    border-radius: 12px;
    overflow: hidden;
    max-width: 260px;
    margin-bottom: 4px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.inbox-v2-body .chat-msg-attach:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
    text-decoration: none;
}
.inbox-v2-body .chat-msg-attach--image {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    padding: 4px;
    max-width: 240px;
}
.inbox-v2-body .chat-msg-attach--image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: cover;
    border-radius: 8px;
}
.inbox-v2-body .chat-msg--out .chat-msg-attach--image {
    background: var(--tb-primary, #1e40af);
    border-color: var(--tb-primary, #1e40af);
}
.inbox-v2-body .chat-msg-attach--file {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    padding: 10px 12px;
    align-items: center;
    gap: 10px;
    color: var(--tb-ink, #0b1220);
    min-width: 220px;
}
.inbox-v2-body .chat-msg--out .chat-msg-attach--file {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}
.inbox-v2-body .chat-msg-attach-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.inbox-v2-body .chat-msg--out .chat-msg-attach-icon {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.inbox-v2-body .chat-msg-attach-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    gap: 2px;
}
.inbox-v2-body .chat-msg-attach-name {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
}
.inbox-v2-body .chat-msg-attach-ext {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.7;
    letter-spacing: 0.03em;
}
.inbox-v2-body .chat-msg-attach-dl {
    color: inherit;
    opacity: 0.7;
    font-size: 12px;
    flex-shrink: 0;
}
.inbox-v2-input {
    flex: 1;
    background: #f6f7fb;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 14px;
    font-family: inherit;
    color: var(--tb-ink, #0b1220);
    outline: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.inbox-v2-input:focus {
    background: #fff;
    border-color: var(--tb-primary, #1e40af);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}
.inbox-v2-input::placeholder { color: var(--tb-muted-2, #94a3b8); }
.inbox-v2-send {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--tb-accent, #f97316);
    color: #fff;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.28);
    transition: background 0.15s ease, transform 0.15s ease;
}
.inbox-v2-send:hover {
    background: var(--tb-accent-600, #ea580c);
    transform: translateY(-1px);
}
.inbox-v2-send:active { transform: translateY(0); }

/* Responsive */
@media (max-width: 991px) {
    .inbox-v2-shell {
        grid-template-columns: 1fr;
        height: auto;
        min-height: auto;
    }
    .inbox-v2-list {
        max-height: 320px;
    }
    .inbox-v2-chat {
        height: calc(100vh - 200px);
        min-height: 480px;
    }
    .inbox-v2-chat-back { display: inline-flex; }
}
@media (max-width: 575px) {
    .inbox-v2 { padding: 12px 0; }
    .inbox-v2-container { padding: 0 10px; }
    .inbox-v2-chat-head { padding: 12px 14px; gap: 10px; }
    .inbox-v2-chat-actions .inbox-v2-icon-btn:not(:first-child) { display: none; }
    .inbox-v2-jobbar { padding: 10px 14px; }
    .inbox-v2-jobbar-btn span { display: none; }
    .inbox-v2-body { padding: 14px 14px; }
    .inbox-v2-body .chat-msg { max-width: 86%; }
    .inbox-v2-composer { padding: 10px 14px; }
}

/* ============================================================================
   Property view page — palette overrides (customer/properties/show)
   Trust Blue (#1E40AF) + Warm Orange (#F97316) + neutral grays.
   ========================================================================= */
.acct-page .jobd-crumb {
    font-size: 13px;
    color: var(--tb-muted, #64748b);
    margin-bottom: 10px;
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
}
.acct-page .jobd-crumb a {
    color: var(--tb-primary, #1e40af);
    font-weight: 600;
    text-decoration: none;
}
.acct-page .jobd-crumb a:hover {
    color: var(--tb-primary-600, #1d4ed8);
    text-decoration: underline;
}
.acct-page .jobd-crumb span {
    color: var(--tb-muted-2, #94a3b8);
    margin: 0 6px;
}

.acct-page .pv-header {
    background: var(--tb-primary, #1e40af);
    border-radius: 16px;
    padding: 28px 30px;
    box-shadow: 0 8px 24px rgba(30, 64, 175, 0.16);
}
.acct-page .pv-header .pv-name {
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}
.acct-page .pv-location {
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.acct-page .pv-chip {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.acct-page .pv-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 13.5px;
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.acct-page .pv-btn-ghost {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.acct-page .pv-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}
.acct-page .pv-btn-primary {
    background: var(--tb-accent, #f97316);
    color: #fff;
    border: 1px solid var(--tb-accent, #f97316);
}
.acct-page .pv-btn-primary:hover {
    background: var(--tb-accent-600, #ea580c);
    border-color: var(--tb-accent-600, #ea580c);
    color: #fff;
}

.acct-page .pv-card {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.acct-page .pv-section-head {
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--tb-primary, #1e40af);
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--tb-line-2, #f1f5f9);
}
.acct-page .pv-item-q {
    font-size: 12.5px;
    color: var(--tb-muted, #64748b);
    font-weight: 500;
    margin-bottom: 4px;
}
.acct-page .pv-item-a {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--tb-ink, #0b1220);
}
.acct-page .pv-empty {
    color: var(--tb-muted-2, #94a3b8);
    font-style: italic;
    font-weight: 500;
}

.acct-page .pv-rail-head {
    padding-bottom: 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--tb-line-2, #f1f5f9);
}
.acct-page .pv-rail-head h3 {
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 15px;
    font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.01em;
}
.acct-page .pv-jobs-count {
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
}
.acct-page .pv-job {
    padding: 12px 0;
    border-top: 1px solid var(--tb-line-2, #f1f5f9);
    transition: padding-left 0.15s ease;
}
.acct-page .pv-job:first-of-type {
    border-top: 0;
}
.acct-page .pv-job:hover {
    padding-left: 4px;
}
.acct-page .pv-job-title {
    color: var(--tb-primary, #1e40af);
    font-weight: 700;
    font-size: 14px;
}
.acct-page .pv-empty-jobs {
    color: var(--tb-muted, #64748b);
    font-size: 13.5px;
    margin: 8px 0 0;
}

/* Palette-safe status pills used inside the jobs rail */
.acct-page .pv-job .proj-badge {
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    border: 1px solid transparent;
}
.acct-page .pv-job .proj-badge--success {
    background: #dcfce7;
    color: #15803d;
    border-color: #bbf7d0;
}
.acct-page .pv-job .proj-badge--info {
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    border-color: #dbeafe;
}
.acct-page .pv-job .proj-badge--warning {
    background: var(--tb-accent-50, #fff7ed);
    color: var(--tb-accent-600, #ea580c);
    border-color: #fed7aa;
}
.acct-page .pv-job .proj-badge--muted {
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-muted, #64748b);
    border-color: var(--tb-line, #e5e7eb);
}

@media (max-width: 991px) {
    .acct-page .pv-header { padding: 22px 20px; }
}
@media (max-width: 575px) {
    .acct-page .pv-header .pv-name { font-size: 20px; }
    .acct-page .pv-btn { justify-content: center; padding: 10px 16px; }
}

/* ============================================================================
   Public trader profile (customer/profile/trader-profile) — palette refresh
   Trust Blue (#1E40AF) + Warm Orange (#F97316) + neutral grays. No gradients.
   ========================================================================= */
.tprof-page {
    background: var(--tb-bg-soft, #f7f8fb);
    padding: 22px 0 60px;
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
}
.tprof-container { max-width: 1160px; }

/* Back link */
.tprof-back {
    display: inline-flex; align-items: center; gap: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13.5px; font-weight: 600; text-decoration: none;
    margin-bottom: 14px;
}
.tprof-back:hover { color: #fff; text-decoration: underline; }

/* Hero */
.tprof-hero {
    background: var(--tb-primary, #1e40af);
    border-radius: 18px;
    padding: 22px 26px 24px;
    box-shadow: 0 10px 24px rgba(30, 64, 175, 0.16);
    margin-bottom: 18px;
    color: #fff;
}
.tprof-hero-main {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
}
.tprof-hero-avatar {
    position: relative;
    width: 82px; height: 82px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff; font-size: 26px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.35);
}
.tprof-hero-avatar-initials {
    position: absolute; inset: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; letter-spacing: 0.5px;
}
.tprof-hero-avatar img {
    position: relative; z-index: 1;
    width: 100%; height: 100%; object-fit: cover;
}
.tprof-hero-info { min-width: 0; }
.tprof-hero-name {
    font-size: 24px; font-weight: 800; margin: 0;
    color: #fff; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    letter-spacing: -0.2px;
}
.tprof-hero-meta {
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px; margin-top: 4px;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.tprof-hero-meta .fa-location-dot { color: var(--tb-accent, #f97316); }
.tprof-dot { color: rgba(255, 255, 255, 0.55); }

.tprof-hero-chips {
    display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;
}
.tprof-chip {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12.5px; font-weight: 700;
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.tprof-chip .fa-star { color: #fbbf24; }

.tprof-hero-side {
    display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
    min-width: 200px;
}
.tprof-rate {
    color: #fff; font-size: 26px; font-weight: 800; line-height: 1;
    white-space: nowrap;
}
.tprof-rate span { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.75); }
.tprof-rate.tprof-rate--none { font-size: 16px; font-weight: 700; color: rgba(255, 255, 255, 0.9); }
.tprof-rate.tprof-rate--none span { color: rgba(255, 255, 255, 0.9); font-size: 16px; }

.tprof-hero-actions { display: flex; gap: 8px; }
.tprof-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 13.5px; font-weight: 700;
    text-decoration: none;
    transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}
.tprof-btn--accent {
    background: var(--tb-accent, #f97316);
    color: #fff;
    box-shadow: 0 6px 14px rgba(249, 115, 22, 0.28);
}
.tprof-btn--accent:hover {
    background: var(--tb-accent-600, #ea580c);
    color: #fff;
    transform: translateY(-1px);
}
.tprof-btn--ghost {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
}
.tprof-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Two-column grid */
.tprof-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}
.tprof-main, .tprof-rail { display: flex; flex-direction: column; gap: 16px; }

/* Cards */
.tprof-card {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.tprof-card-title {
    font-size: 15.5px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    margin: 0 0 14px;
    letter-spacing: -0.1px;
}
.tprof-desc { margin: 0; font-size: 14px; color: var(--tb-ink-2, #334155); line-height: 1.55; }

/* Ratings */
.tprof-rating-row {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px; font-size: 13.5px;
}
.tprof-rating-row:last-child { margin-bottom: 0; }
.tprof-rating-name { flex: 1; color: var(--tb-ink, #0b1220); }
.tprof-rating-bar {
    width: 110px; height: 7px;
    background: var(--tb-line-2, #f1f5f9); border-radius: 999px;
    overflow: hidden; flex-shrink: 0;
}
.tprof-rating-bar span {
    display: block; height: 100%;
    background: var(--tb-accent, #f97316); border-radius: 999px;
}
.tprof-rating-score { width: 32px; text-align: right; color: var(--tb-ink, #0b1220); font-weight: 700; }

/* Muted helpers */
.tprof-muted-center { text-align: center; color: var(--tb-muted, #64748b); font-size: 13.5px; margin: 8px 0 0; }
.tprof-muted { color: var(--tb-muted, #64748b); font-size: 13.5px; margin: 0; }

/* Portfolio */
.tprof-portfolio {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}
.tprof-portfolio-item {
    display: block; border-radius: 10px; overflow: hidden;
    background: var(--tb-line-2, #f1f5f9);
    aspect-ratio: 1 / 1;
    transition: transform 0.12s ease;
}
.tprof-portfolio-item:hover { transform: translateY(-2px); }
.tprof-portfolio-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Videos */
.tprof-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.tprof-video {
    position: relative; padding-top: 56.25%;
    border-radius: 10px; overflow: hidden;
    background: var(--tb-line-2, #f1f5f9);
}
.tprof-video iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%; border: 0;
}

/* Timeline (education / experience) */
.tprof-timeline-item { padding: 12px 0; border-top: 1px solid var(--tb-line-2, #f1f5f9); }
.tprof-timeline-item:first-child { border-top: 0; padding-top: 0; }
.tprof-timeline-item:last-child { padding-bottom: 0; }
.tprof-timeline-title { font-size: 14.5px; font-weight: 700; color: var(--tb-ink, #0b1220); }
.tprof-timeline-sub { font-size: 12.5px; color: var(--tb-muted, #64748b); margin-top: 2px; }
.tprof-timeline-desc { font-size: 13px; color: var(--tb-ink-2, #334155); margin: 6px 0 0; line-height: 1.5; }

/* Reviews */
.tprof-review { padding: 14px 0; }
.tprof-review:first-child { padding-top: 0; }
.tprof-review:last-child { padding-bottom: 0; }
.tprof-review--bordered { border-top: 1px solid var(--tb-line-2, #f1f5f9); }
.tprof-review-head {
    display: flex; justify-content: space-between;
    gap: 12px; align-items: flex-start;
}
.tprof-review-job { font-size: 15px; font-weight: 700; color: var(--tb-ink, #0b1220); }
.tprof-review-meta { font-size: 12.5px; color: var(--tb-muted, #64748b); margin-top: 2px; }
.tprof-review-stars {
    font-size: 13px; font-weight: 700; color: var(--tb-ink, #0b1220);
    white-space: nowrap; background: var(--tb-line-2, #f1f5f9);
    padding: 4px 10px; border-radius: 8px;
}
.tprof-review-stars .fa-star { color: #f4b400; }
.tprof-review-text { font-size: 13.5px; color: var(--tb-ink-2, #334155); margin: 8px 0 0; line-height: 1.55; }

.tprof-noreviews { text-align: center; padding: 26px 10px; }
.tprof-noreviews .fa-star { font-size: 28px; color: var(--tb-muted-2, #94a3b8); }
.tprof-noreviews h4 { font-size: 16px; font-weight: 800; color: var(--tb-ink, #0b1220); margin: 12px 0 4px; }
.tprof-noreviews p { font-size: 13.5px; color: var(--tb-muted, #64748b); margin: 0; }

/* Skills */
.tprof-skills { display: flex; flex-wrap: wrap; gap: 8px; }
.tprof-skill {
    background: var(--tb-accent-50, #fff7ed);
    color: var(--tb-accent-600, #ea580c);
    font-size: 12.5px; font-weight: 700;
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid rgba(249, 115, 22, 0.2);
}

/* Credentials */
.tprof-cred-list { list-style: none; margin: 0; padding: 0; }
.tprof-cred {
    display: flex; gap: 12px; padding: 12px 0;
    border-top: 1px solid var(--tb-line-2, #f1f5f9);
}
.tprof-cred:first-child { border-top: 0; padding-top: 0; }
.tprof-cred:last-child { padding-bottom: 0; }
.tprof-cred-icon {
    width: 36px; height: 36px; border-radius: 9px;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.tprof-cred-body { display: flex; flex-direction: column; min-width: 0; }
.tprof-cred-label { font-size: 13.5px; font-weight: 700; color: var(--tb-ink, #0b1220); }
.tprof-cred-value { font-size: 12.5px; color: var(--tb-muted, #64748b); word-break: break-word; }
.tprof-cred-empty { font-style: italic; }

/* Social */
.tprof-social { display: flex; gap: 8px; }
.tprof-social-btn {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; font-size: 14px;
    transition: background 0.12s ease, color 0.12s ease;
}
.tprof-social-btn:hover {
    background: var(--tb-primary, #1e40af);
    color: #fff;
}

/* Responsive */
@media (max-width: 991px) {
    .tprof-grid { grid-template-columns: 1fr; }
    .tprof-hero-main { grid-template-columns: auto 1fr; }
    .tprof-hero-side {
        grid-column: 1 / -1;
        flex-direction: row; align-items: center; justify-content: space-between;
        min-width: 0; padding-top: 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.18); margin-top: 4px;
    }
}
@media (max-width: 575px) {
    .tprof-page { padding: 14px 0 40px; }
    .tprof-hero { padding: 18px 18px 20px; border-radius: 14px; }
    .tprof-hero-main { gap: 14px; }
    .tprof-hero-avatar { width: 68px; height: 68px; font-size: 22px; }
    .tprof-hero-name { font-size: 20px; }
    .tprof-hero-side {
        flex-direction: column; align-items: flex-start; gap: 10px;
        padding-top: 10px; margin-top: 10px;
    }
    .tprof-hero-actions { width: 100%; }
    .tprof-hero-actions .tprof-btn { flex: 1; justify-content: center; }
    .tprof-card { padding: 16px; }
    .tprof-review-head { flex-wrap: wrap; }
}

/* ============================================================================
   tb-upload — reusable file upload widget with live preview + remove.
   Any Blade file with `<div class="tb-upl" data-tb-upload>` gets the widget
   auto-initialised by public/assets/js/tb-upload.js.
   Palette-safe: Trust Blue + Warm Orange + neutrals only, no gradients.
   ========================================================================= */
.tb-upl {
    display: block;
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
}
.tb-upl input[type="file"] {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); border: 0;
}
.tb-upl-drop {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 18px 16px;
    border: 1.5px dashed var(--tb-line, #e5e7eb);
    background: var(--tb-bg-soft, #f7f8fb);
    border-radius: 12px;
    color: var(--tb-muted, #64748b);
    font-size: 13.5px; font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    text-align: center;
    margin: 0;
}
.tb-upl-drop i {
    font-size: 18px;
    color: var(--tb-primary, #1e40af);
}
.tb-upl-drop:hover,
.tb-upl-drop.is-dragover {
    border-color: var(--tb-primary, #1e40af);
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
}
.tb-upl-drop.is-dragover { border-style: solid; }

.tb-upl-list,
.tb-upl-existing {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 10px;
}
.tb-upl-list:empty,
.tb-upl-existing:empty { display: none; }

.tb-upl-item {
    position: relative;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 32px 8px 8px;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    max-width: 100%;
}
.tb-upl-thumb {
    width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; overflow: hidden;
}
.tb-upl-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.tb-upl-meta {
    display: flex; flex-direction: column; min-width: 0; max-width: 180px;
}
.tb-upl-name {
    font-size: 13px; font-weight: 700; color: var(--tb-ink, #0b1220);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-upl-size {
    font-size: 11.5px; color: var(--tb-muted, #64748b);
}
.tb-upl-remove {
    position: absolute; top: 4px; right: 4px;
    width: 22px; height: 22px; border-radius: 50%;
    border: 0; background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-ink-2, #334155);
    font-size: 16px; line-height: 1; font-weight: 700;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    transition: background 0.12s ease, color 0.12s ease;
}
.tb-upl-remove:hover {
    background: var(--tb-accent, #f97316);
    color: #fff;
}

/* Existing-file items on EDIT screens: larger image thumb + solid label */
.tb-upl-existing .tb-upl-item {
    padding: 0;
    width: 96px; height: 96px;
    border-radius: 12px;
    background: var(--tb-line-2, #f1f5f9);
    overflow: hidden;
}
.tb-upl-existing .tb-upl-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.tb-upl-existing .tb-upl-item .tb-upl-file-badge {
    position: absolute; inset: auto 0 0 0;
    background: rgba(11, 18, 32, 0.72);
    color: #fff;
    font-size: 11px; font-weight: 600;
    padding: 4px 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-upl-existing .tb-upl-item .tb-upl-file-icon {
    position: absolute; inset: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 26px; color: var(--tb-primary, #1e40af);
}
.tb-upl-existing .tb-upl-remove {
    top: 6px; right: 6px;
    background: rgba(11, 18, 32, 0.78);
    color: #fff;
}
.tb-upl-existing .tb-upl-remove:hover {
    background: var(--tb-accent, #f97316);
}

/* ============================================================================
   Customer financial dashboard (/financial/dashboard) — palette refresh.
   Trust Blue (#1E40AF) + Warm Orange (#F97316) + neutral grays. No gradients.
   ========================================================================= */
.fin-page {
    background: var(--tb-bg-soft, #f7f8fb);
    padding: 22px 0 60px;
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
}
.fin-container { max-width: 1200px; }

/* --- Hero --- */
.fin-hero {
    position: relative;
    background: var(--tb-primary, #1e40af);
    color: #fff;
    border-radius: 16px;
    padding: 16px 22px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px;
    gap: 16px;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(30, 64, 175, 0.14);
    margin-bottom: 16px;
}
.fin-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.2px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.fin-hero-eyebrow i { color: var(--tb-accent, #f97316); font-size: 10px; }
.fin-hero-title {
    margin: 6px 0 0;
    font-size: 13px; font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.1px;
}
.fin-hero-amount {
    margin-top: 2px;
    display: flex; align-items: baseline; gap: 4px;
    font-size: 34px; font-weight: 800; line-height: 1;
    letter-spacing: -0.6px;
    color: #fff;
}
.fin-hero-currency {
    font-size: 20px; font-weight: 700; color: rgba(255, 255, 255, 0.75);
    margin-right: 2px;
}
.fin-hero-sub {
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 12.5px; line-height: 1.45;
    max-width: 520px;
}
.fin-hero-sub strong { color: #fff; font-weight: 700; }
.fin-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fin-hero-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    background: var(--tb-accent, #f97316);
    color: #fff;
    font-size: 12.5px; font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.28);
}
.fin-hero-btn:hover {
    background: var(--tb-accent-600, #ea580c);
    color: #fff;
    transform: translateY(-1px);
}
.fin-hero-btn--ghost {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: none;
}
.fin-hero-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* Decorative visual on the right of the hero */
.fin-hero-visual {
    position: relative;
    justify-self: end;
    width: 130px; height: 96px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, 0.28);
}
.fin-hero-visual i { font-size: 48px; }
.fin-hero-orb {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}
.fin-hero-orb--1 { width: 110px; height: 110px; top: -6px; right: 0; }
.fin-hero-orb--2 {
    width: 60px; height: 60px; bottom: -10px; right: 74px;
    background: rgba(249, 115, 22, 0.28);
}

/* --- Metric cards --- */
.fin-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.fin-metric {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 16px;
    padding: 18px;
    display: flex; align-items: flex-start; gap: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.fin-metric:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    border-color: rgba(30, 64, 175, 0.18);
}
.fin-metric-icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.fin-metric-icon--blue {
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
}
.fin-metric-icon--accent {
    background: var(--tb-accent-50, #fff7ed);
    color: var(--tb-accent-600, #ea580c);
}
.fin-metric-icon--muted {
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-muted, #64748b);
}
.fin-metric-body { min-width: 0; }
.fin-metric-value {
    font-size: 28px; font-weight: 800; color: var(--tb-ink, #0b1220);
    line-height: 1.05;
    letter-spacing: -0.5px;
}
.fin-metric-label {
    font-size: 14px; font-weight: 700; color: var(--tb-ink, #0b1220);
    margin-top: 4px;
}
.fin-metric-sub {
    font-size: 12.5px; color: var(--tb-muted, #64748b); margin-top: 2px;
}

/* --- Section head + filters --- */
.fin-section {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.fin-section-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.fin-section-title {
    font-size: 20px; font-weight: 800; color: var(--tb-ink, #0b1220);
    margin: 0;
    letter-spacing: -0.3px;
}
.fin-section-sub {
    font-size: 13.5px; color: var(--tb-muted, #64748b);
    margin: 4px 0 0;
}
.fin-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.fin-filter {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    color: var(--tb-ink-2, #334155);
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    /* Filters were <button>s (client-side JS row-hide) and are now <a href="?status=…">
       anchors (server-side filter that works across all paginated pages). Reset
       default anchor styling so anchors and buttons look identical. */
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
a.fin-filter,
a.fin-filter:hover,
a.fin-filter:focus {
    text-decoration: none;
}
.fin-filter:hover {
    border-color: var(--tb-primary, #1e40af);
    color: var(--tb-primary, #1e40af);
}
.fin-filter-count {
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-muted, #64748b);
    font-size: 11.5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    transition: inherit;
}
.fin-filter.is-active {
    background: var(--tb-primary, #1e40af);
    color: #fff;
    border-color: var(--tb-primary, #1e40af);
}
.fin-filter.is-active .fin-filter-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* --- Project list rows --- */
.fin-list { display: flex; flex-direction: column; }
.fin-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto auto 20px;
    gap: 14px;
    align-items: center;
    padding: 14px 12px;
    border-top: 1px solid var(--tb-line-2, #f1f5f9);
    text-decoration: none;
    color: inherit;
    transition: background 0.12s ease;
    border-radius: 10px;
}
.fin-row:first-child { border-top: 0; }
.fin-row:hover { background: var(--tb-bg-soft, #f7f8fb); }
.fin-row-avatar {
    position: relative;
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 15px;
    overflow: hidden;
    flex-shrink: 0;
}
.fin-row-avatar-initials {
    position: absolute; inset: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.fin-row-avatar img {
    position: relative; z-index: 1;
    width: 100%; height: 100%; object-fit: cover;
}
.fin-row-body { min-width: 0; }
.fin-row-title {
    display: block;
    font-size: 15px; font-weight: 700; color: var(--tb-ink, #0b1220);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fin-row:hover .fin-row-title { color: var(--tb-primary, #1e40af); }
.fin-row-meta {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--tb-muted, #64748b);
    margin-top: 2px;
}
.fin-row-meta i { color: var(--tb-muted-2, #94a3b8); }
.fin-row-dot { color: var(--tb-line, #e5e7eb); }

.fin-row-amount { text-align: right; white-space: nowrap; }
.fin-row-amount-value {
    display: block;
    font-size: 16px; font-weight: 800; color: var(--tb-ink, #0b1220);
    letter-spacing: -0.3px;
}
.fin-row-amount-label {
    display: block;
    font-size: 11px; font-weight: 700;
    color: var(--tb-muted-2, #94a3b8);
    text-transform: uppercase; letter-spacing: 0.6px;
}
.fin-row-amount-dash { color: var(--tb-muted-2, #94a3b8); }

.fin-badge {
    display: inline-flex; align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
    border: 1px solid transparent;
}
.fin-badge--hired {
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    border-color: rgba(30, 64, 175, 0.2);
}
.fin-badge--posted {
    background: var(--tb-accent-50, #fff7ed);
    color: var(--tb-accent-600, #ea580c);
    border-color: rgba(249, 115, 22, 0.24);
}
.fin-badge--pending {
    background: #fef3c7;
    color: #92400e;
    border-color: rgba(217, 119, 6, 0.24);
}
.fin-badge--completed {
    background: #ecfdf5;
    color: #047857;
    border-color: rgba(16, 185, 129, 0.24);
}
.fin-badge--muted {
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-muted, #64748b);
    border-color: var(--tb-line, #e5e7eb);
}

.fin-row-arrow { color: var(--tb-muted-2, #94a3b8); font-size: 12px; }
.fin-row:hover .fin-row-arrow { color: var(--tb-primary, #1e40af); }

/* --- Empty states --- */
.fin-empty {
    text-align: center;
    padding: 40px 20px;
}
.fin-empty i {
    font-size: 40px;
    color: var(--tb-muted-2, #94a3b8);
}
.fin-empty h4 {
    font-size: 17px; font-weight: 800; color: var(--tb-ink, #0b1220);
    margin: 14px 0 6px;
}
.fin-empty p {
    font-size: 14px; color: var(--tb-muted, #64748b);
    margin: 0 auto 18px; max-width: 380px;
}

.fin-pagination { margin-top: 18px; }
.fin-pagination .pagination { justify-content: flex-end; margin: 0; }

/* --- Responsive --- */
@media (max-width: 991px) {
    .fin-metrics { grid-template-columns: 1fr 1fr; }
    .fin-hero { grid-template-columns: 1fr; padding: 14px 18px; }
    .fin-hero-visual { display: none; }
    .fin-hero-amount { font-size: 30px; }
}
@media (max-width: 767px) {
    .fin-metrics { grid-template-columns: 1fr; }
    .fin-section { padding: 16px; }
    .fin-row {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        row-gap: 6px;
    }
    .fin-row-avatar { width: 40px; height: 40px; font-size: 14px; }
    .fin-row-amount { grid-column: 3; grid-row: 1; }
    .fin-badge { grid-column: 2 / -1; grid-row: 2; justify-self: start; }
    .fin-row-arrow { display: none; }
}
@media (max-width: 575px) {
    .fin-page { padding: 14px 0 40px; }
    .fin-hero { padding: 14px 16px; border-radius: 14px; }
    .fin-hero-amount { font-size: 28px; }
    .fin-hero-currency { font-size: 18px; }
    .fin-hero-actions .fin-hero-btn { flex: 1; justify-content: center; }
    .fin-section-head { flex-direction: column; align-items: stretch; }
}

/* ============================================================================
   Change password (/change-password) — compact security page.
   Trust Blue + Warm Orange + neutrals only, no gradients.
   ========================================================================= */
.chpwd-page {
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
}
.chpwd-head {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 16px;
}
.chpwd-head-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.chpwd-title {
    margin: 0;
    font-size: 22px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.3px;
}
.chpwd-sub {
    margin: 2px 0 0;
    font-size: 13px; color: var(--tb-muted, #64748b);
}

.chpwd-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.chpwd-card {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.chpwd-field { margin-bottom: 12px; }
.chpwd-field:last-of-type { margin-bottom: 16px; }
.chpwd-field label {
    display: block;
    font-size: 12.5px; font-weight: 700;
    color: var(--tb-ink, #0b1220);
    margin-bottom: 5px;
    letter-spacing: 0.1px;
}
.chpwd-input {
    position: relative;
    display: flex; align-items: center;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 10px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.chpwd-input:focus-within {
    border-color: var(--tb-primary, #1e40af);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}
.chpwd-input input {
    flex: 1;
    padding: 9px 12px;
    border: 0; background: transparent;
    outline: none;
    font-size: 14px; font-family: inherit;
    color: var(--tb-ink, #0b1220);
    border-radius: 10px;
}
.chpwd-eye {
    border: 0; background: transparent;
    color: var(--tb-muted, #64748b);
    font-size: 14px;
    padding: 8px 12px;
    cursor: pointer;
    transition: color 0.12s ease;
}
.chpwd-eye:hover { color: var(--tb-primary, #1e40af); }
.chpwd-field.has-error .chpwd-input { border-color: #dc2626; }
.chpwd-error {
    display: block;
    font-size: 12px; color: #dc2626;
    margin-top: 4px;
}

.chpwd-strength { margin-top: 6px; display: flex; align-items: center; gap: 10px; }
.chpwd-strength-bar {
    flex: 1; height: 5px;
    background: var(--tb-line-2, #f1f5f9);
    border-radius: 999px; overflow: hidden;
}
.chpwd-strength-bar span {
    display: block; height: 100%;
    background: var(--tb-muted-2, #94a3b8);
    border-radius: 999px;
    transition: width 0.18s ease, background 0.18s ease;
    width: 0;
}
.chpwd-strength-label {
    font-size: 11.5px; font-weight: 700;
    color: var(--tb-muted, #64748b);
    min-width: 66px; text-align: right;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.chpwd-strength--l0 .chpwd-strength-bar span,
.chpwd-strength--l1 .chpwd-strength-bar span { background: #dc2626; }
.chpwd-strength--l2 .chpwd-strength-bar span { background: var(--tb-accent, #f97316); }
.chpwd-strength--l3 .chpwd-strength-bar span { background: #eab308; }
.chpwd-strength--l4 .chpwd-strength-bar span { background: #10b981; }
.chpwd-strength--l0 .chpwd-strength-label,
.chpwd-strength--l1 .chpwd-strength-label { color: #dc2626; }
.chpwd-strength--l2 .chpwd-strength-label { color: var(--tb-accent-600, #ea580c); }
.chpwd-strength--l3 .chpwd-strength-label { color: #a16207; }
.chpwd-strength--l4 .chpwd-strength-label { color: #059669; }

.chpwd-match {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 6px;
    font-size: 12px; font-weight: 700;
}
.chpwd-match--ok { color: #059669; }
.chpwd-match--no { color: #dc2626; }

.chpwd-save {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--tb-primary, #1e40af);
    color: #fff;
    border: 0;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 13.5px; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(30, 64, 175, 0.22);
    transition: background 0.12s ease, transform 0.08s ease;
}
.chpwd-save:hover { background: var(--tb-primary-700, #1e3a8a); transform: translateY(-1px); }

.chpwd-tips {
    background: var(--tb-primary-50, #eff6ff);
    border: 1px solid rgba(30, 64, 175, 0.14);
    border-radius: 14px;
    padding: 16px 18px;
}
.chpwd-tips h3 {
    margin: 0 0 10px;
    font-size: 13.5px; font-weight: 800;
    color: var(--tb-primary-700, #1e3a8a);
    display: inline-flex; align-items: center; gap: 8px;
}
.chpwd-tips ul { margin: 0; padding: 0; list-style: none; }
.chpwd-tips li {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 0;
    font-size: 13px; color: var(--tb-ink-2, #334155);
}
.chpwd-tips li i { color: var(--tb-accent, #f97316); font-size: 11px; }

@media (max-width: 767px) {
    .chpwd-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   Transaction history (/financial/transaction) — compact list.
   ========================================================================= */
.txn-page { font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif); }

.txn-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px;
}
.txn-head-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.txn-title {
    margin: 0;
    font-size: 22px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.3px;
}
.txn-count {
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    font-size: 11.5px; font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.1px;
}
.txn-export {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--tb-accent, #f97316);
    color: #fff;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px; font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.24);
    transition: background 0.12s ease, transform 0.08s ease;
}
.txn-export:hover {
    background: var(--tb-accent-600, #ea580c);
    color: #fff; transform: translateY(-1px);
}

.txn-totals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 6px;
}
.txn-totals-note {
    font-size: 12.5px;
    color: var(--tb-ink-3, #6b7280);
    margin: 0 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-style: italic;
}
.txn-totals-note i {
    color: var(--tb-accent, #f97316);
    font-size: 12px;
}
.txn-total {
    display: flex; align-items: center; gap: 12px;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.txn-total-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.txn-total--in .txn-total-icon {
    background: #ecfdf5;
    color: #059669;
}
.txn-total--out .txn-total-icon {
    background: var(--tb-accent-50, #fff7ed);
    color: var(--tb-accent-600, #ea580c);
}
.txn-total-body { display: flex; flex-direction: column; min-width: 0; }
.txn-total-label {
    font-size: 11.5px; font-weight: 700;
    color: var(--tb-muted, #64748b);
    text-transform: uppercase; letter-spacing: 0.3px;
}
.txn-total-value {
    font-size: 18px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.3px;
    margin-top: 1px;
}

.txn-filters {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr auto;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    align-items: end;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.txn-filter { display: flex; flex-direction: column; min-width: 0; }
.txn-filter label {
    font-size: 11.5px; font-weight: 700;
    color: var(--tb-muted, #64748b);
    text-transform: uppercase; letter-spacing: 0.3px;
    margin-bottom: 4px;
}
.txn-input {
    padding: 8px 10px;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 8px;
    font-size: 13.5px; font-family: inherit;
    color: var(--tb-ink, #0b1220);
    background: #fff;
    outline: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.txn-input:focus {
    border-color: var(--tb-primary, #1e40af);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}
.txn-filter-actions { display: flex; gap: 6px; }
.txn-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px; font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.txn-btn--primary {
    background: var(--tb-primary, #1e40af);
    color: #fff;
}
.txn-btn--primary:hover { background: var(--tb-primary-700, #1e3a8a); color: #fff; }
.txn-btn--reset {
    background: #fff;
    color: var(--tb-muted, #64748b);
    border-color: var(--tb-line, #e5e7eb);
}
.txn-btn--reset:hover {
    color: var(--tb-primary, #1e40af);
    border-color: var(--tb-primary, #1e40af);
}

.txn-list {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 14px;
    padding: 4px 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.txn-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 8px;
    border-top: 1px solid var(--tb-line-2, #f1f5f9);
}
.txn-row:first-child { border-top: 0; }
.txn-row-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.txn-row-icon.is-in { background: #ecfdf5; color: #059669; }
.txn-row-icon.is-out { background: var(--tb-accent-50, #fff7ed); color: var(--tb-accent-600, #ea580c); }

.txn-row-body { min-width: 0; }
.txn-row-top {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 2px;
}
.txn-row-type {
    font-size: 14px; font-weight: 700; color: var(--tb-ink, #0b1220);
}
.txn-row-job {
    font-size: 11.5px; font-weight: 700;
    color: var(--tb-primary, #1e40af);
    background: var(--tb-primary-50, #eff6ff);
    padding: 2px 8px;
    border-radius: 999px;
    text-decoration: none;
}
.txn-row-job:hover { background: var(--tb-primary, #1e40af); color: #fff; }
.txn-row-desc {
    font-size: 12.5px;
    color: var(--tb-muted, #64748b);
    line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.txn-row-side { text-align: right; white-space: nowrap; }
.txn-row-amount {
    display: block;
    font-size: 15px; font-weight: 800;
    letter-spacing: -0.2px;
}
.txn-row-amount.is-in { color: #059669; }
.txn-row-amount.is-out { color: var(--tb-accent-600, #ea580c); }
.txn-row-date {
    display: block;
    font-size: 11.5px; color: var(--tb-muted-2, #94a3b8);
    margin-top: 1px;
    text-transform: uppercase; letter-spacing: 0.3px;
}

.txn-empty {
    text-align: center;
    padding: 32px 20px;
}
.txn-empty i {
    font-size: 34px;
    color: var(--tb-muted-2, #94a3b8);
}
.txn-empty h4 {
    font-size: 15.5px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    margin: 10px 0 4px;
}
.txn-empty p {
    font-size: 13px; color: var(--tb-muted, #64748b); margin: 0;
}

.txn-pagination { margin-top: 14px; }
.txn-pagination .pagination { margin: 0; justify-content: flex-end; }

@media (max-width: 767px) {
    .txn-totals { grid-template-columns: 1fr; }
    .txn-filters {
        grid-template-columns: 1fr 1fr;
    }
    .txn-filter-actions { grid-column: 1 / -1; justify-content: flex-end; }
    .txn-row {
        grid-template-columns: 36px minmax(0, 1fr);
        grid-template-rows: auto auto;
    }
    .txn-row-side { grid-column: 2; text-align: left; }
    .txn-row-body { grid-column: 2; }
    .txn-row-icon { grid-row: 1 / span 2; }
}
@media (max-width: 575px) {
    .txn-filters { grid-template-columns: 1fr; }
}

/* ============================================================================
   My Account (/my-account/{id}/edit) — compact settings page.
   ========================================================================= */
.myacct-page { font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif); }

.myacct-identity {
    display: flex; align-items: center; gap: 14px;
    background: var(--tb-primary, #1e40af);
    color: #fff;
    padding: 16px 20px;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(30, 64, 175, 0.16);
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.myacct-identity-avatar {
    position: relative;
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 800;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.28);
}
.myacct-identity-initials {
    position: absolute; inset: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.myacct-identity-avatar img {
    position: relative; z-index: 1;
    width: 100%; height: 100%; object-fit: cover;
}
.myacct-identity-meta { flex: 1; min-width: 0; }
.myacct-identity-name {
    font-size: 17px; font-weight: 800; color: #fff; letter-spacing: -0.2px;
}
.myacct-identity-sub {
    font-size: 12.5px; color: rgba(255, 255, 255, 0.82);
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.myacct-danger-link {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12.5px; font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.22);
    transition: background 0.12s ease, color 0.12s ease;
}
.myacct-danger-link:hover {
    background: #fff;
    color: #dc2626;
}

.myacct-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}
.myacct-card {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.myacct-card-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.myacct-card-head h3 {
    margin: 0;
    font-size: 13.5px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    display: inline-flex; align-items: center; gap: 8px;
    letter-spacing: 0.1px;
    text-transform: uppercase;
}
.myacct-card-head h3 i {
    color: var(--tb-primary, #1e40af);
    font-size: 13px;
}

.myacct-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
}
.myacct-field { margin-bottom: 10px; }
.myacct-field:last-child { margin-bottom: 0; }
.myacct-row2 .myacct-field { margin-bottom: 0; }
.myacct-field label {
    display: block;
    font-size: 12px; font-weight: 700;
    color: var(--tb-ink, #0b1220);
    margin-bottom: 4px;
}
.myacct-field input,
.myacct-field select {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 9px;
    font-size: 13.5px; font-family: inherit;
    color: var(--tb-ink, #0b1220);
    background: #fff;
    outline: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.myacct-field input:focus,
.myacct-field select:focus {
    border-color: var(--tb-primary, #1e40af);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}
.myacct-field.has-error input { border-color: #dc2626; }
.myacct-error {
    display: block;
    font-size: 12px; color: #dc2626; margin-top: 3px;
}

/* Avatar card */
.myacct-card--avatar { }
.myacct-avatar-block {
    display: flex; align-items: center; gap: 14px;
}
.myacct-avatar-preview {
    position: relative;
    width: 84px; height: 84px; border-radius: 14px;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 26px; font-weight: 800;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--tb-line, #e5e7eb);
}
.myacct-avatar-initials {
    position: absolute; inset: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.myacct-avatar-preview img {
    position: relative; z-index: 1;
    width: 100%; height: 100%; object-fit: cover;
}
.myacct-avatar-actions {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.myacct-avatar-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer;
    border: 1px dashed rgba(30, 64, 175, 0.35);
    align-self: flex-start;
    transition: background 0.12s ease, color 0.12s ease;
    margin: 0;
}
.myacct-avatar-btn:hover {
    background: var(--tb-primary, #1e40af);
    color: #fff;
    border-color: var(--tb-primary, #1e40af);
}
.myacct-avatar-remove {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent;
    color: #dc2626;
    padding: 4px 8px;
    border: 0;
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    align-self: flex-start;
    border-radius: 6px;
    transition: background 0.12s ease;
}
.myacct-avatar-remove:hover { background: #fef2f2; }
.myacct-avatar-hint {
    font-size: 11.5px; color: var(--tb-muted, #64748b);
    margin: 4px 0 0;
}

/* Comm card */
.myacct-card--comm { }
.myacct-comm-inline {
    padding-bottom: 4px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--tb-line-2, #f1f5f9);
}

.myacct-actions {
    display: flex; justify-content: flex-end;
    margin-top: 4px;
}
.myacct-save {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--tb-primary, #1e40af);
    color: #fff;
    border: 0;
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 13.5px; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(30, 64, 175, 0.22);
    transition: background 0.12s ease, transform 0.08s ease;
}
.myacct-save:hover { background: var(--tb-primary-700, #1e3a8a); transform: translateY(-1px); }

@media (max-width: 991px) {
    .myacct-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .myacct-row2 { grid-template-columns: 1fr; }
    .myacct-identity { padding: 14px 16px; }
    .myacct-identity-name { font-size: 15.5px; }
    .myacct-avatar-block { flex-direction: column; align-items: flex-start; }
    .myacct-avatar-preview { width: 72px; height: 72px; }
}

/* ============================================================================
   Trader — Browse jobs (/trader/job-opportunities) — modern redesign.
   Trust Blue + Warm Orange + neutral grays. No gradients.
   Scoped under .jo-page so it overrides the older .jo-* rules in responsive.css
   without touching pages that reuse those classes.
   ========================================================================= */
.jo-page {
    background: var(--tb-bg-soft, #f7f8fb);
    padding: 20px 0 60px;
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
}

/* --- Page head --- */
.jo-page .jo-page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.jo-page-title {
    margin: 0;
    font-size: 24px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.4px;
}
.jo-page-sub {
    margin: 3px 0 0;
    font-size: 13.5px; color: var(--tb-muted, #64748b);
    max-width: 620px;
}
.jo-page-count {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 999px;
    padding: 6px 14px 6px 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    white-space: nowrap;
}
.jo-page-count-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
    display: inline-block;
}
.jo-page-count-num {
    font-size: 15px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
}
.jo-page-count-label {
    font-size: 12.5px; color: var(--tb-muted, #64748b);
    font-weight: 600;
}

/* --- Filter card (sticky sidebar) --- */
/* Filter form + SMS alerts panel share one sticky wrapper so both stay
   visible together — otherwise the SMS panel scrolled independently and
   ducked behind the sticky filter card. */
.jo-page .jo-filter-sticky {
    position: sticky;
    top: 16px;
}
.jo-page .jo-filter-card {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* --- SMS Job Alerts panel (sits under the filter card) --- */
.jo-page .jo-sms-alerts {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 16px;
    padding: 14px 16px;
    margin-top: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.jo-page .jo-sms-head {
    display: flex; align-items: center; gap: 10px;
}
.jo-page .jo-sms-icon {
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.jo-page .jo-sms-title {
    display: flex; flex-direction: column; gap: 2px;
    flex: 1; min-width: 0;
}
.jo-page .jo-sms-title strong {
    font-size: 13.5px; color: var(--tb-ink, #0b1220);
    font-weight: 800;
    line-height: 1.15;
}
.jo-page .jo-sms-sub {
    font-size: 11.5px; color: var(--tb-muted, #64748b);
    font-weight: 600;
    line-height: 1.35;
}
.jo-page .jo-sms-switch {
    position: relative;
    display: inline-block;
    width: 40px; height: 22px;
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
}
.jo-page .jo-sms-switch input { opacity: 0; width: 0; height: 0; }
.jo-page .jo-sms-slider {
    position: absolute; inset: 0;
    background: #cbd5e1;
    border-radius: 22px;
    transition: background 0.15s ease;
}
.jo-page .jo-sms-slider::before {
    content: '';
    position: absolute;
    height: 16px; width: 16px;
    left: 3px; top: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
    transition: transform 0.15s ease;
}
.jo-page .jo-sms-switch input:checked + .jo-sms-slider {
    background: var(--tb-primary, #1e40af);
}
.jo-page .jo-sms-switch input:checked + .jo-sms-slider::before {
    transform: translateX(18px);
}
.jo-page .jo-sms-duration {
    display: flex; align-items: center; gap: 8px;
    margin-top: 12px;
}
.jo-page .jo-sms-dur-label {
    font-size: 11.5px;
    color: var(--tb-muted, #64748b);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0;
    white-space: nowrap;
}
.jo-page .jo-sms-select {
    flex: 1;
    font-size: 12.5px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--tb-line, #e5e7eb);
    background: #fff;
    color: var(--tb-ink, #0b1220);
    font-weight: 600;
}
.jo-page .jo-sms-hint {
    margin: 10px 0 0;
    font-size: 11px; color: var(--tb-muted, #64748b);
    line-height: 1.45;
}
.jo-page .jo-sms-hint i { color: var(--tb-primary, #1e40af); margin-right: 3px; }
.jo-page .jo-sms-status {
    margin: 6px 0 0;
    min-height: 14px;
    font-size: 11px;
    font-weight: 700;
}
.jo-page .jo-sms-status--saving { color: var(--tb-muted, #64748b); }
.jo-page .jo-sms-status--ok { color: #059669; }
.jo-page .jo-sms-status--err { color: #b91c1c; }
.jo-page .jo-filter-titlebar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.jo-page .jo-filter-title {
    margin: 0;
    font-size: 14px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    display: inline-flex; align-items: center; gap: 8px;
    letter-spacing: 0.1px;
    text-transform: uppercase;
}
.jo-page .jo-filter-title i { color: var(--tb-primary, #1e40af); font-size: 13px; }
.jo-page .jo-filter-group { margin-bottom: 14px; }
.jo-page .jo-filter-group:last-child { margin-bottom: 0; }
.jo-page .jo-filter-group > label {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 12px; font-weight: 700;
    color: var(--tb-ink, #0b1220);
    margin-bottom: 6px;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.jo-page .jo-filter-group > label i { color: var(--tb-primary, #1e40af); }

/* Search input with icon */
.jo-page .jo-search {
    position: relative;
}
.jo-page .jo-search input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 10px;
    font-size: 13.5px; font-family: inherit;
    color: var(--tb-ink, #0b1220);
    background: #fff;
    outline: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.jo-page .jo-search input:focus {
    border-color: var(--tb-primary, #1e40af);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}
.jo-page .jo-search-icon {
    position: absolute; left: 6px; top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--tb-muted, #64748b);
    font-size: 12.5px;
    cursor: pointer;
    line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
}
.jo-page .jo-search-icon:hover {
    background: var(--tb-primary, #1e40af);
    color: #fff;
}
.jo-page .jo-search input { padding-left: 38px; }
.jo-page .jo-search--sm input { padding: 7px 10px 7px 34px; font-size: 12.5px; }
.jo-page .jo-search--sm .jo-search-icon { left: 4px; font-size: 11px; padding: 5px 7px; }

/* Categories */
.jo-page .jo-categories {
    max-height: 200px; overflow-y: auto;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 10px;
    padding: 6px;
    margin-top: 8px;
    background: var(--tb-bg-soft, #f7f8fb);
    scrollbar-width: thin;
    scrollbar-color: var(--tb-muted-2, #94a3b8) transparent;
}
.jo-page .jo-categories::-webkit-scrollbar { width: 6px; }
.jo-page .jo-categories::-webkit-scrollbar-thumb {
    background: var(--tb-muted-2, #94a3b8); border-radius: 999px;
}
.jo-page .jo-cat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.1s ease;
    font-size: 12.5px;
}
.jo-page .jo-cat-item:hover { background: rgba(30, 64, 175, 0.06); }

/* Native checkbox with Trust Blue accent — Bootstrap's .form-check-input class
   has been removed from the input so nothing hijacks the rendering. */
.jo-page .jo-cat-check {
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    accent-color: var(--tb-primary, #1e40af);
    vertical-align: middle;
    cursor: pointer;
}
.jo-page .jo-cat-label {
    font-size: 12.5px;
    color: var(--tb-ink-2, #334155);
    font-weight: 600;
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}
.jo-page .jo-cat-check:checked ~ .jo-cat-label { color: var(--tb-primary, #1e40af); }

/* Radius controls */
.jo-page .jo-radius-label { font-size: 12px; }
.jo-page .jo-radius-controls {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700;
    color: var(--tb-primary, #1e40af);
    background: var(--tb-primary-50, #eff6ff);
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: none;
    letter-spacing: 0;
}
.jo-page .jo-radius-btn {
    border: 0; background: #fff;
    color: var(--tb-primary, #1e40af);
    border-radius: 50%;
    width: 22px; height: 22px;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; line-height: 1;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.jo-page .jo-radius-btn:hover { background: var(--tb-primary, #1e40af); color: #fff; }
.jo-page .jo-map {
    height: 190px; width: 100%;
    border-radius: 12px;
    margin-top: 6px;
    border: 1px solid var(--tb-line, #e5e7eb);
    overflow: hidden;
}
.jo-page .jo-address {
    font-size: 11.5px; color: var(--tb-muted, #64748b);
    margin: 8px 0 10px;
    word-break: break-word;
    line-height: 1.4;
}
.jo-page .jo-address-label {
    font-weight: 700; color: var(--tb-ink-2, #334155);
    text-transform: uppercase; letter-spacing: 0.3px;
    font-size: 10.5px;
}

.jo-page .jo-apply-row {
    display: flex; gap: 8px;
    margin-top: 4px;
}
.jo-page .jo-apply-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    flex: 1;
    background: var(--tb-primary, #1e40af);
    color: #fff;
    border: 0;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(30, 64, 175, 0.22);
    transition: background 0.12s ease, transform 0.08s ease;
}
.jo-page .jo-apply-btn:hover { background: var(--tb-primary-700, #1e3a8a); transform: translateY(-1px); }
.jo-page .jo-reset-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: #fff;
    color: var(--tb-muted, #64748b);
    border: 1px solid var(--tb-line, #e5e7eb);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px; font-weight: 700;
    text-decoration: none;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
    flex-shrink: 0;
}
.jo-page .jo-reset-btn:hover {
    color: var(--tb-accent-600, #ea580c);
    border-color: var(--tb-accent, #f97316);
    background: var(--tb-accent-50, #fff7ed);
}

/* "Clear all" link inline with the "Filter jobs" title (desktop-only). */
.jo-page .jo-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--tb-accent-600, #ea580c);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.12s ease;
}
.jo-page .jo-filter-clear:hover {
    background: var(--tb-accent-50, #fff7ed);
    color: var(--tb-accent-600, #ea580c);
    text-decoration: none;
}
.jo-page .jo-filter-clear i { font-size: 10.5px; }

/* --- Applied filter chip bar --- */
.jo-page .jo-applied {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--tb-primary-50, #eff6ff);
    border: 1px solid rgba(30, 64, 175, 0.16);
    border-radius: 12px;
    margin-bottom: 12px;
}
.jo-page .jo-applied-label {
    font-size: 11.5px; font-weight: 700;
    color: var(--tb-primary-700, #1e3a8a);
    text-transform: uppercase; letter-spacing: 0.3px;
}
.jo-page .jo-applied-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: #fff;
    color: var(--tb-primary, #1e40af);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px; font-weight: 700;
    border: 1px solid rgba(30, 64, 175, 0.18);
}
.jo-page .jo-applied-clear {
    margin-left: auto;
    color: var(--tb-accent-600, #ea580c);
    font-size: 12px; font-weight: 700;
    text-decoration: none;
}
.jo-page .jo-applied-clear:hover { text-decoration: underline; }

/* --- Job cards --- */
.jo-page .jo-job {
    display: block;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    position: relative;
}
.jo-page .jo-job:hover {
    border-color: rgba(30, 64, 175, 0.35);
    box-shadow: 0 8px 24px rgba(30, 64, 175, 0.09);
    transform: translateY(-1px);
}
.jo-page .jo-job-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin-bottom: 10px;
}
.jo-page .jo-job-header-left { min-width: 0; }
.jo-page .jo-job-title {
    margin: 0;
    font-size: 17.5px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.2px;
    line-height: 1.3;
}
.jo-page .jo-job-title a {
    color: inherit; text-decoration: none;
}
.jo-page .jo-job:hover .jo-job-title a { color: var(--tb-primary, #1e40af); }
.jo-page .jo-job-meta {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--tb-muted, #64748b);
    margin-top: 4px;
}
.jo-page .jo-job-meta i { color: var(--tb-muted-2, #94a3b8); font-size: 11px; }
.jo-page .jo-job-code {
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-ink-2, #334155);
    font-size: 11px; font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.2px;
}
.jo-page .jo-dot { color: var(--tb-line, #e5e7eb); }

.jo-page .jo-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    flex-shrink: 0;
    white-space: nowrap;
}
.jo-page .jo-status--open {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.24);
}
.jo-page .jo-status-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
    display: inline-block;
}

.jo-page .jo-job-trades {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 12px;
}
.jo-page .jo-chip {
    background: var(--tb-accent-50, #fff7ed);
    color: var(--tb-accent-600, #ea580c);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
    border: 1px solid rgba(249, 115, 22, 0.2);
    letter-spacing: 0.1px;
}

.jo-page .jo-job-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px dashed var(--tb-line, #e5e7eb);
    margin-top: 4px;
}
.jo-page .jo-job-customer {
    display: flex; align-items: center; gap: 10px;
    min-width: 0;
}
.jo-page .jo-job-customer--empty { min-height: 32px; }
.jo-page .jo-customer-avatar {
    width: 32px; height: 32px; border-radius: 10px;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
    flex-shrink: 0;
}
.jo-page .jo-customer-name {
    font-size: 13px; font-weight: 700;
    color: var(--tb-ink, #0b1220);
    line-height: 1.2;
}
.jo-page .jo-customer-sub {
    font-size: 11.5px; color: var(--tb-muted, #64748b);
    line-height: 1.2;
    margin-top: 2px;
}
.jo-page .jo-customer-sub .fa-circle-check { color: #10b981; }
.jo-page .jo-customer-sub .fa-star { color: var(--tb-accent, #f97316); }

.jo-page .jo-job-actions { display: flex; gap: 8px; flex-shrink: 0; }
.jo-page .jo-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 13px; font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease, border-color 0.12s ease;
}
.jo-page .jo-btn--primary {
    background: var(--tb-accent, #f97316);
    color: #fff;
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.28);
}
.jo-page .jo-btn--primary:hover {
    background: var(--tb-accent-600, #ea580c);
    color: #fff;
    transform: translateY(-1px);
}
.jo-page .jo-btn--ghost {
    background: #fff;
    color: var(--tb-primary, #1e40af);
    border-color: var(--tb-line, #e5e7eb);
}
.jo-page .jo-btn--ghost:hover {
    background: var(--tb-primary-50, #eff6ff);
    border-color: rgba(30, 64, 175, 0.28);
    color: var(--tb-primary, #1e40af);
}

/* Empty state */
.jo-page .jo-empty {
    text-align: center;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 16px;
    padding: 40px 24px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.jo-page .jo-empty-icon {
    width: 68px; height: 68px; border-radius: 50%;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 32px;
    margin-bottom: 14px;
}
.jo-page .jo-empty h3 {
    margin: 0 0 6px;
    font-size: 17px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
}
.jo-page .jo-empty p {
    font-size: 13.5px; color: var(--tb-muted, #64748b);
    margin: 0 auto 16px; max-width: 400px;
}
.jo-page .jo-empty .jo-btn { justify-content: center; }

.jo-page .jo-pagination { margin-top: 14px; }
.jo-page .jo-pagination .pagination { margin: 0; justify-content: center; }

/* Mobile bar */
.jo-page .jo-mobile-bar {
    display: flex; gap: 8px;
    margin-bottom: 12px;
}
.jo-page .jo-mobile-search {
    flex: 1;
    position: relative;
}
.jo-page .jo-mobile-search-btn {
    position: absolute; left: 4px; top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--tb-muted, #64748b);
    font-size: 13px;
    cursor: pointer;
    line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
}
.jo-page .jo-mobile-search-btn:hover {
    background: var(--tb-primary, #1e40af);
    color: #fff;
}
.jo-page .jo-mobile-search input {
    width: 100%;
    padding: 10px 12px 10px 38px;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 10px;
    font-size: 13.5px;
    background: #fff;
    outline: none;
}
.jo-page .jo-mobile-filter-btn {
    position: relative;
    padding: 10px 14px;
    border: 1px solid var(--tb-line, #e5e7eb);
    background: #fff;
    color: var(--tb-primary, #1e40af);
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
}
.jo-page .jo-filter-badge {
    position: absolute; top: -6px; right: -6px;
    background: var(--tb-accent, #f97316);
    color: #fff;
    font-size: 10px; font-weight: 800;
    border-radius: 999px;
    min-width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 5px;
}

/* --- Responsive --- */
@media (max-width: 991px) {
    .jo-page .jo-filter-sticky { position: static; }
    .jo-page .jo-filter-card { position: static; }
}
@media (max-width: 767px) {
    .jo-page .jo-job-footer { flex-direction: column; align-items: stretch; }
    .jo-page .jo-job-actions { justify-content: flex-end; }
    .jo-page .jo-page-head { flex-direction: column; align-items: stretch; }
    .jo-page .jo-page-count { align-self: flex-start; }
    /* Bottom sheet on mobile */
    .jo-page .jo-filter-col {
        position: fixed; bottom: 0; left: 0; right: 0;
        transform: translateY(100%);
        transition: transform 0.25s ease;
        z-index: 1055;
        max-height: 88vh; overflow-y: auto;
        background: #fff;
        border-radius: 18px 18px 0 0;
        padding: 8px 12px 20px;
    }
    .jo-page .jo-filter-col.open { transform: translateY(0); }
    .jo-page .jo-filter-card { border: 0; box-shadow: none; padding: 8px; border-radius: 0; }
    .jo-page .jo-sheet-handle {
        width: 44px; height: 4px; border-radius: 999px;
        background: var(--tb-line, #e5e7eb);
        margin: 4px auto 8px;
    }
    .jo-page .jo-sheet-close {
        background: transparent; border: 0;
        font-size: 24px; color: var(--tb-muted, #64748b);
        cursor: pointer;
        line-height: 1;
    }
    .jo-page .jo-sheet-footer {
        display: flex; gap: 8px; margin-top: 12px;
        position: sticky; bottom: -20px;
        background: #fff;
        padding: 10px 0 0;
    }
    .jo-page .jo-sheet-clear {
        flex: 0 0 auto;
        color: var(--tb-muted, #64748b);
        font-size: 13px; font-weight: 700;
        padding: 10px 16px;
        border-radius: 10px;
        text-decoration: none;
        background: var(--tb-line-2, #f1f5f9);
    }
    .jo-page .jo-sheet-apply {
        flex: 1;
        background: var(--tb-primary, #1e40af);
        color: #fff;
        border: 0;
        padding: 10px 16px;
        border-radius: 10px;
        font-size: 13px; font-weight: 700;
        cursor: pointer;
    }
    .jo-backdrop {
        position: fixed; inset: 0;
        background: rgba(11, 18, 32, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 1054;
    }
    .jo-backdrop.open { opacity: 1; pointer-events: auto; }
    body.jo-sheet-lock { overflow: hidden; }
}
@media (max-width: 575px) {
    .jo-page { padding: 14px 0 40px; }
    .jo-page .jo-job { padding: 14px 16px; }
    .jo-page .jo-job-title { font-size: 15.5px; }
    .jo-page .jo-btn { padding: 8px 12px; font-size: 12.5px; }
    .jo-page .jo-job-actions { flex-wrap: wrap; }
    .jo-page .jo-job-actions .jo-btn { flex: 1; justify-content: center; }
}

/* ============================================================================
   Trader — Job details (/trader/job/{id}) — modern redesign.
   Trust Blue + Warm Orange + neutral grays. No gradients.
   ========================================================================= */
.tjob-page {
    background: var(--tb-bg-soft, #f7f8fb);
    padding: 20px 0 60px;
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
}

/* Breadcrumb */
.tjob-page .tjob-crumb {
    font-size: 13px;
    color: var(--tb-muted, #64748b);
    margin-bottom: 12px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tjob-page .tjob-crumb a {
    color: var(--tb-primary, #1e40af);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
}
.tjob-page .tjob-crumb a:hover { text-decoration: underline; }
.tjob-page .tjob-crumb-sep { color: var(--tb-muted-2, #94a3b8); }
.tjob-page .tjob-crumb-cur { color: var(--tb-ink-2, #334155); font-weight: 600; }

/* Hero */
.tjob-page .tjob-hero {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-left: 4px solid var(--tb-primary, #1e40af);
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.tjob-page .tjob-hero-header {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.tjob-page .tjob-hero-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tjob-page .tjob-hero-code {
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-ink-2, #334155);
    font-size: 11.5px; font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.2px;
}
.tjob-page .tjob-hero-awarded {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-muted, #64748b);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px; font-weight: 700;
    border: 1px solid var(--tb-line, #e5e7eb);
}
.tjob-page .tjob-hero-awarded--mine {
    background: #ecfdf5;
    color: #059669;
    border-color: rgba(16, 185, 129, 0.24);
}

.tjob-page .tjob-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border: 1px solid transparent;
}
.tjob-page .tjob-status-dot {
    width: 6px; height: 6px; border-radius: 50%; display: inline-block;
}
.tjob-page .tjob-status--open {
    background: #ecfdf5;
    color: #059669;
    border-color: rgba(16, 185, 129, 0.24);
}
.tjob-page .tjob-status--open .tjob-status-dot { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }
.tjob-page .tjob-status--pending {
    background: #fef3c7; color: #92400e; border-color: rgba(217, 119, 6, 0.24);
}
.tjob-page .tjob-status--pending .tjob-status-dot { background: #d97706; }
.tjob-page .tjob-status--hired {
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    border-color: rgba(30, 64, 175, 0.2);
}
.tjob-page .tjob-status--hired .tjob-status-dot { background: var(--tb-primary, #1e40af); }
.tjob-page .tjob-status--completed {
    background: #ecfdf5; color: #059669; border-color: rgba(16, 185, 129, 0.24);
}
.tjob-page .tjob-status--completed .tjob-status-dot { background: #10b981; }
.tjob-page .tjob-status--muted {
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-muted, #64748b);
    border-color: var(--tb-line, #e5e7eb);
}
.tjob-page .tjob-status--muted .tjob-status-dot { background: var(--tb-muted-2, #94a3b8); }

.tjob-page .tjob-hero-title {
    font-size: 24px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    margin: 4px 0 8px;
    letter-spacing: -0.4px;
    line-height: 1.2;
}
.tjob-page .tjob-hero-sub {
    display: flex; flex-wrap: wrap; gap: 12px;
    font-size: 13px; color: var(--tb-muted, #64748b);
    margin-bottom: 12px;
}
.tjob-page .tjob-hero-sub i {
    color: var(--tb-muted-2, #94a3b8); margin-right: 4px; font-size: 11.5px;
}
.tjob-page .tjob-hero-sub .fa-location-dot { color: var(--tb-accent, #f97316); }

.tjob-page .tjob-hero-trades {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.tjob-page .tjob-chip {
    background: var(--tb-accent-50, #fff7ed);
    color: var(--tb-accent-600, #ea580c);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
    border: 1px solid rgba(249, 115, 22, 0.2);
    letter-spacing: 0.1px;
}

/* Tabs */
.tjob-page .tjob-tabs {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    margin-bottom: 14px;
    display: inline-flex;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.tjob-page .tjob-tabs .nav-link {
    background: transparent;
    color: var(--tb-muted, #64748b);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px; font-weight: 700;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background 0.12s ease, color 0.12s ease;
}
.tjob-page .tjob-tabs .nav-link:hover { color: var(--tb-primary, #1e40af); }
.tjob-page .tjob-tabs .nav-link.active {
    background: var(--tb-primary, #1e40af) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(30, 64, 175, 0.22);
}

/* Cards */
.tjob-page .tjob-card {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.tjob-page .tjob-card-title {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    margin: 0 0 14px;
    letter-spacing: -0.1px;
}
.tjob-page .tjob-card-title i { color: var(--tb-primary, #1e40af); font-size: 14px; }
.tjob-page .tjob-card-title-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.tjob-page .tjob-card-title-row .tjob-card-title { margin-bottom: 0; }

/* Job info grid */
.tjob-page .tjob-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
}
.tjob-page .tjob-info-item--full { grid-column: 1 / -1; }
.tjob-page .tjob-info-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 700;
    color: var(--tb-muted, #64748b);
    text-transform: uppercase; letter-spacing: 0.3px;
    margin-bottom: 4px;
}
.tjob-page .tjob-info-label i { color: var(--tb-primary, #1e40af); font-size: 11px; }
.tjob-page .tjob-info-value {
    font-size: 14px; color: var(--tb-ink, #0b1220);
    font-weight: 600;
    line-height: 1.5;
    word-break: break-word;
}
.tjob-page .tjob-info-desc {
    font-weight: 400;
    color: var(--tb-ink-2, #334155);
}
.tjob-page .tjob-info-desc p { margin-bottom: 8px; }
.tjob-page .tjob-info-desc p:last-child { margin-bottom: 0; }
.tjob-page .tjob-empty { color: var(--tb-muted, #64748b); font-style: italic; font-weight: 400; }
.tjob-page .tjob-empty-center {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 22px 12px;
    text-align: center;
    color: var(--tb-muted, #64748b);
    font-size: 13px;
    margin: 0;
    background: var(--tb-bg-soft, #f7f8fb);
    border-radius: 10px;
}
.tjob-page .tjob-empty-center i { color: var(--tb-muted-2, #94a3b8); font-size: 15px; }

/* Amendments */
.tjob-page .tjob-card--amendments {
    border-left: 3px solid var(--tb-accent, #f97316);
}
.tjob-page .tjob-amend {
    padding: 10px 0;
    border-bottom: 1px dashed var(--tb-line, #e5e7eb);
}
.tjob-page .tjob-amend:last-of-type { border-bottom: 0; }
.tjob-page .tjob-amend p { margin: 0 0 4px; font-size: 14px; color: var(--tb-ink, #0b1220); }
.tjob-page .tjob-amend-date {
    font-size: 12px; color: var(--tb-muted, #64748b); font-weight: 600;
}
.tjob-page .tjob-amend-files {
    margin: 12px 0 0;
}
.tjob-page .tjob-amend-files a {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--tb-primary, #1e40af);
    font-size: 13px; font-weight: 700;
    text-decoration: none;
    background: var(--tb-primary-50, #eff6ff);
    padding: 5px 12px;
    border-radius: 8px;
}
.tjob-page .tjob-amend-files a:hover { background: var(--tb-primary, #1e40af); color: #fff; }

/* Extra work */
.tjob-page .tjob-extra {
    background: var(--tb-bg-soft, #f7f8fb);
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
}
.tjob-page .tjob-extra-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px; font-weight: 700;
    margin-bottom: 10px;
}
.tjob-page .tjob-extra-status--red { background: #fef2f2; color: #dc2626; border: 1px solid rgba(220, 38, 38, 0.22); }
.tjob-page .tjob-extra-status--green { background: #ecfdf5; color: #059669; border: 1px solid rgba(16, 185, 129, 0.22); }
.tjob-page .tjob-extra-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.tjob-page .tjob-extra-head h5 {
    margin: 0; font-size: 15px; font-weight: 800; color: var(--tb-ink, #0b1220);
    display: inline-flex; align-items: center; gap: 8px;
}
.tjob-page .tjob-extra-head h5 i { color: var(--tb-primary, #1e40af); font-size: 13px; }
.tjob-page .tjob-extra-amount {
    font-size: 18px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.2px;
}
.tjob-page .tjob-extra-desc {
    margin: 8px 0;
    font-size: 13.5px; color: var(--tb-ink-2, #334155); line-height: 1.5;
}
.tjob-page .tjob-extra-actions {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.tjob-page .tjob-extra-quote {
    width: 100%;
    max-width: 360px;
    margin-top: 8px;
}

/* Q&A */
.tjob-page .tjob-qna-tabs {
    background: var(--tb-bg-soft, #f7f8fb);
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
    display: flex;
}
.tjob-page .tjob-qna-tabs .nav-link {
    background: transparent;
    color: var(--tb-muted, #64748b);
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12.5px; font-weight: 700;
    border: 0;
    flex: 1;
    text-align: center;
}
.tjob-page .tjob-qna-tabs .nav-link.active {
    background: #fff !important;
    color: var(--tb-primary, #1e40af) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.tjob-page .tjob-qna-block h5 {
    font-size: 13.5px; font-weight: 800;
    color: var(--tb-ink-2, #334155);
    margin: 0 0 10px;
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.tjob-page .tjob-qna-block h5 span {
    font-size: 11.5px; font-weight: 600;
    color: var(--tb-muted, #64748b);
}
.tjob-page .tjob-accordion .card {
    background: transparent;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 10px !important;
    margin-bottom: 6px !important;
    overflow: hidden;
}
.tjob-page .tjob-accordion .card-header {
    background: #fff;
    border: 0;
    padding: 0;
}
.tjob-page .tjob-accordion .custom-accordion-title {
    padding: 10px 14px !important;
    font-size: 13.5px; font-weight: 700;
    color: var(--tb-ink, #0b1220);
    text-decoration: none;
    display: flex !important; align-items: center; justify-content: space-between; gap: 10px;
}
.tjob-page .tjob-accordion .custom-accordion-title:hover { color: var(--tb-primary, #1e40af); }
.tjob-page .tjob-accordion .card-body {
    background: var(--tb-bg-soft, #f7f8fb);
    padding: 12px 14px;
    font-size: 13.5px;
    color: var(--tb-ink-2, #334155);
    border-top: 1px solid var(--tb-line, #e5e7eb);
    line-height: 1.55;
}
.tjob-page .tjob-accordion .accordion-arrow {
    color: var(--tb-primary, #1e40af);
    font-size: 20px;
}

/* Payment totals */
.tjob-page .tjob-pay-totals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.tjob-page .tjob-pay-total {
    background: var(--tb-bg-soft, #f7f8fb);
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex; flex-direction: column;
}
.tjob-page .tjob-pay-total--released {
    background: #ecfdf5;
    border-color: rgba(16, 185, 129, 0.24);
}
.tjob-page .tjob-pay-total-label {
    font-size: 11.5px; font-weight: 700;
    color: var(--tb-muted, #64748b);
    text-transform: uppercase; letter-spacing: 0.3px;
}
.tjob-page .tjob-pay-total--released .tjob-pay-total-label { color: #047857; }
.tjob-page .tjob-pay-total-value {
    font-size: 20px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.3px;
    margin-top: 2px;
}
.tjob-page .tjob-pay-total--released .tjob-pay-total-value { color: #047857; }

/* Payment table */
.tjob-page .tjob-pay-table thead td {
    background: var(--tb-bg-soft, #f7f8fb);
    color: var(--tb-muted, #64748b);
    font-size: 11.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.3px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--tb-line, #e5e7eb);
    border-top: 0;
}
.tjob-page .tjob-pay-table tbody td {
    padding: 12px;
    font-size: 13.5px;
    color: var(--tb-ink, #0b1220);
    border-top: 1px solid var(--tb-line-2, #f1f5f9);
    vertical-align: middle;
}
.tjob-page .tjob-pay-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
    border: 1px solid transparent;
}
.tjob-page .tjob-pay-pill--progress { background: #fef3c7; color: #92400e; border-color: rgba(217, 119, 6, 0.24); }
.tjob-page .tjob-pay-pill--requested { background: var(--tb-primary-50, #eff6ff); color: var(--tb-primary, #1e40af); border-color: rgba(30, 64, 175, 0.2); }
.tjob-page .tjob-pay-pill--pending { background: #fef2f2; color: #dc2626; border-color: rgba(220, 38, 38, 0.24); }
.tjob-page .tjob-pay-pill--released { background: #ecfdf5; color: #059669; border-color: rgba(16, 185, 129, 0.24); }
.tjob-page .tjob-pay-pill--muted { background: var(--tb-line-2, #f1f5f9); color: var(--tb-muted, #64748b); border-color: var(--tb-line, #e5e7eb); }

/* Static "no dropdown" label for terminal payment states (released, pending).
   Replaces a useless <select> whose only option was the current status. */
.tjob-page .tjob-pay-done {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--tb-muted, #64748b);
    font-size: 12.5px;
    font-weight: 600;
    font-style: italic;
    letter-spacing: 0.1px;
}
.tjob-page .tjob-pay-done i {
    color: var(--tb-muted-2, #94a3b8);
    font-size: 12px;
    font-style: normal;
}
.tjob-page .tjob-pay-done--ok { color: #059669; font-style: normal; font-weight: 700; }
.tjob-page .tjob-pay-done--ok i { color: #10b981; }

/* Rail */
.tjob-page .tjob-rail {
    position: sticky; top: 16px;
    display: flex; flex-direction: column; gap: 12px;
}
.tjob-page .tjob-rail-card {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.tjob-page .tjob-rail-title {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    margin: 0 0 12px;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.tjob-page .tjob-rail-title i { color: var(--tb-primary, #1e40af); font-size: 12.5px; }
.tjob-page .tjob-rail-field {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--tb-line-2, #f1f5f9);
}
.tjob-page .tjob-rail-field:first-of-type { border-top: 0; padding-top: 0; }
.tjob-page .tjob-rail-field:last-of-type { padding-bottom: 0; }
.tjob-page .tjob-rail-label {
    font-size: 12px; color: var(--tb-muted, #64748b); font-weight: 600;
}
.tjob-page .tjob-rail-value {
    font-size: 13px; color: var(--tb-ink, #0b1220); font-weight: 700;
    text-align: right;
}

/* CTA rail card */
.tjob-page .tjob-cta {
    text-align: center;
    padding: 20px 18px;
}
.tjob-page .tjob-cta-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
    margin-bottom: 12px;
}
.tjob-page .tjob-cta-icon--success {
    background: #ecfdf5;
    color: #059669;
}
.tjob-page .tjob-cta-icon--muted {
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-muted, #64748b);
}
.tjob-page .tjob-cta-title {
    font-size: 16px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    margin: 0 0 6px;
}
.tjob-page .tjob-cta-sub {
    font-size: 13px; color: var(--tb-muted, #64748b);
    margin: 0 0 14px; line-height: 1.5;
}

/* Buttons */
.tjob-page .tjob-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13px; font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease, border-color 0.12s ease;
    line-height: 1;
}
.tjob-page .tjob-btn--primary {
    background: var(--tb-accent, #f97316);
    color: #fff;
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.28);
}
.tjob-page .tjob-btn--primary:hover {
    background: var(--tb-accent-600, #ea580c);
    color: #fff;
    transform: translateY(-1px);
}
.tjob-page .tjob-btn--ghost {
    background: #fff;
    color: var(--tb-primary, #1e40af);
    border-color: var(--tb-line, #e5e7eb);
}
.tjob-page .tjob-btn--ghost:hover {
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    border-color: rgba(30, 64, 175, 0.28);
}
.tjob-page .tjob-btn--danger {
    background: #fff;
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.28);
}
.tjob-page .tjob-btn--danger:hover {
    background: #fef2f2;
    color: #dc2626;
}
.tjob-page .tjob-btn--block { width: 100%; }
.tjob-page .tjob-btn--sm { padding: 7px 14px; font-size: 12.5px; }

/* Customer chip */
.tjob-page .tjob-customer {
    display: flex; align-items: center; gap: 12px;
}
.tjob-page .tjob-customer-avatar {
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 800;
    flex-shrink: 0;
}
.tjob-page .tjob-customer-body { min-width: 0; }
.tjob-page .tjob-customer-name {
    font-size: 14px; font-weight: 700;
    color: var(--tb-ink, #0b1220);
}
.tjob-page .tjob-customer-sub {
    font-size: 12px; color: var(--tb-muted, #64748b);
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 2px;
}
.tjob-page .tjob-customer-sub .fa-circle-check { color: #10b981; }

/* Responsive */
@media (max-width: 991px) {
    .tjob-page .tjob-rail { position: static; }
    .tjob-page .tjob-info-grid { grid-template-columns: 1fr; }
    .tjob-page .tjob-pay-totals { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .tjob-page { padding: 14px 0 40px; }
    .tjob-page .tjob-hero { padding: 14px 16px; border-radius: 12px; }
    .tjob-page .tjob-hero-title { font-size: 20px; }
    .tjob-page .tjob-card { padding: 16px; }
    .tjob-page .tjob-tabs { display: flex; width: 100%; }
    .tjob-page .tjob-tabs .nav-item { flex: 1; }
    .tjob-page .tjob-tabs .nav-link { width: 100%; justify-content: center; }
    .tjob-page .tjob-qna-tabs { flex-direction: column; }
}

/* ============================================================================
   Trader — Send Proposal (/trader/proposals/create) — modern redesign.
   Trust Blue + Warm Orange + neutral grays. No gradients.
   Preserves all existing form/JS hooks (.proposalBox, .payment_type, .amount,
   .stageBox, .stageItem, .stage-amount, .file-preview, #PageForm, etc.) — the
   .tprop-* classes are a visual layer on top.
   ========================================================================= */
.tprop-page {
    background: var(--tb-bg-soft, #f7f8fb);
    padding: 18px 0 60px;
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
}
.tprop-container { max-width: 900px; }

/* Back link */
.tprop-page .tprop-back-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--tb-primary, #1e40af);
    font-size: 13px; font-weight: 700;
    text-decoration: none;
    margin-bottom: 12px;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(30, 64, 175, 0.06);
    transition: background 0.12s ease, color 0.12s ease;
}
.tprop-page .tprop-back-link:hover {
    background: var(--tb-primary, #1e40af);
    color: #fff;
}

/* Header */
.tprop-page .tprop-head {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-left: 4px solid var(--tb-accent, #f97316);
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    flex-wrap: wrap;
}
.tprop-page .tprop-head-left { min-width: 0; flex: 1; }
.tprop-page .tprop-head-eyebrow {
    font-size: 11.5px; font-weight: 700;
    color: var(--tb-accent-600, #ea580c);
    text-transform: uppercase; letter-spacing: 0.4px;
    margin-bottom: 4px;
}
.tprop-page .tprop-head-title {
    font-size: 22px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    margin: 0 0 8px;
    letter-spacing: -0.3px;
    line-height: 1.25;
}
.tprop-page .tprop-head-meta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tprop-page .tprop-head-code {
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-ink-2, #334155);
    font-size: 11.5px; font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.2px;
}
.tprop-page .tprop-chip {
    background: var(--tb-accent-50, #fff7ed);
    color: var(--tb-accent-600, #ea580c);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
    border: 1px solid rgba(249, 115, 22, 0.2);
}
.tprop-page .tprop-chip--more {
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    border-color: rgba(30, 64, 175, 0.2);
}

.tprop-page .tprop-head-right {
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.tprop-page .tprop-credits {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--tb-accent-50, #fff7ed);
    color: var(--tb-accent-600, #ea580c);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px; font-weight: 800;
    border: 1px solid rgba(249, 115, 22, 0.28);
}
.tprop-page .tprop-credits i { font-size: 13px; }
.tprop-page .tprop-credits-num { font-weight: 800; }
.tprop-page .tprop-credits-label { font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.3px; }
.tprop-page .tprop-credits--empty {
    background: #fef2f2;
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.28);
}
.tprop-page .tprop-how {
    font-size: 12px; font-weight: 700;
    color: var(--tb-muted, #64748b);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px;
}
.tprop-page .tprop-how:hover { color: var(--tb-primary, #1e40af); }

/* Low credits warning */
.tprop-page .tprop-warning {
    display: flex; align-items: flex-start; gap: 12px;
    background: #fef2f2;
    border: 1px solid rgba(220, 38, 38, 0.24);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 14px;
    color: #991b1b;
}
.tprop-page .tprop-warning i {
    color: #dc2626; font-size: 18px; margin-top: 1px;
}
.tprop-page .tprop-warning strong {
    display: block; font-size: 14px; font-weight: 800; margin-bottom: 2px;
    color: #991b1b;
}
.tprop-page .tprop-warning span { font-size: 13px; }
.tprop-page .tprop-warning a { color: #dc2626; font-weight: 700; text-decoration: underline; }

/* Card — override the older .tprop-card in responsive.css which sets
   display:grid + 3-column template for the proposal LISTING page. Force
   block on the CREATE page. */
.tprop-page .tprop-card {
    display: block !important;
    grid-template-columns: none !important;
    background: #fff !important;
    border: 1px solid var(--tb-line, #e5e7eb) !important;
    border-radius: 16px !important;
    padding: 22px !important;
    margin-bottom: 14px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    gap: 0 !important;
}
/* Zebra striping from original CSS - override */
.tprop-page #proposalContainer .proposalBox:nth-child(even),
.tprop-page #proposalContainer .proposalBox:nth-child(odd) {
    background-color: #fff !important;
}
.tprop-page .tprop-card-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.tprop-page .tprop-card-num {
    font-size: 11.5px; font-weight: 800;
    color: var(--tb-primary, #1e40af);
    background: var(--tb-primary-50, #eff6ff);
    padding: 4px 12px;
    border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.tprop-page .tprop-remove-btn {
    background: transparent;
    border: 0;
    color: #dc2626;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.tprop-page .tprop-remove-btn:hover { background: #fef2f2; }

/* Sections */
.tprop-page .tprop-section {
    margin-bottom: 16px;
}
.tprop-page .tprop-section:last-child { margin-bottom: 0; }
.tprop-page .tprop-section-label {
    font-size: 11.5px; font-weight: 800;
    color: var(--tb-muted, #64748b);
    text-transform: uppercase; letter-spacing: 0.3px;
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 8px;
}

/* Payment type toggle */
.tprop-page .tprop-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.tprop-page .tprop-toggle-opt {
    position: relative;
    display: block;
    cursor: pointer;
    margin: 0;
}
.tprop-page .tprop-toggle-opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.tprop-page .tprop-toggle-body {
    display: flex; align-items: center; gap: 12px;
    background: #fff;
    border: 1.5px solid var(--tb-line, #e5e7eb);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.tprop-page .tprop-toggle-opt:hover .tprop-toggle-body {
    border-color: var(--tb-primary, #1e40af);
    background: var(--tb-primary-50, #eff6ff);
}
.tprop-page .tprop-toggle-opt input:checked ~ .tprop-toggle-body {
    border-color: var(--tb-primary, #1e40af);
    background: var(--tb-primary-50, #eff6ff);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.14);
}
.tprop-page .tprop-toggle-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.tprop-page .tprop-toggle-opt input:checked ~ .tprop-toggle-body .tprop-toggle-icon {
    background: var(--tb-primary, #1e40af);
    color: #fff;
}
.tprop-page .tprop-toggle-text { display: flex; flex-direction: column; min-width: 0; }
.tprop-page .tprop-toggle-text strong {
    font-size: 14px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    line-height: 1.25;
}
.tprop-page .tprop-toggle-text small {
    font-size: 12px; color: var(--tb-muted, #64748b);
    margin-top: 2px;
    line-height: 1.35;
}

/* Amount input */
.tprop-page .tprop-amount-wrap {
    position: relative;
    display: flex; align-items: center;
    background: #fff;
    border: 1.5px solid var(--tb-line, #e5e7eb);
    border-radius: 12px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    margin-bottom: 12px;
}
.tprop-page .tprop-amount-wrap:focus-within {
    border-color: var(--tb-primary, #1e40af);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}
.tprop-page .tprop-amount-symbol {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 100%;
    font-size: 20px; font-weight: 800;
    color: var(--tb-primary, #1e40af);
    background: var(--tb-primary-50, #eff6ff);
    border-radius: 12px 0 0 12px;
    border-right: 1px solid var(--tb-line, #e5e7eb);
    padding: 12px 0;
}
.tprop-page .tprop-amount {
    flex: 1;
    padding: 14px 16px;
    border: 0 !important;
    background: transparent !important;
    outline: none !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--tb-ink, #0b1220) !important;
    letter-spacing: -0.3px;
    box-shadow: none !important;
}

/* Breakdown */
.tprop-page .tprop-breakdown {
    background: var(--tb-bg-soft, #f7f8fb);
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 12px;
    padding: 10px 14px;
}
.tprop-page .tprop-break-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0;
    font-size: 13.5px;
    color: var(--tb-ink-2, #334155);
    border-bottom: 1px dashed var(--tb-line, #e5e7eb);
}
.tprop-page .tprop-break-row:last-child { border-bottom: 0; }
.tprop-page .tprop-break-row i { color: var(--tb-muted-2, #94a3b8); margin-right: 6px; font-size: 12px; }
.tprop-page .tprop-break-value {
    font-weight: 700; color: var(--tb-ink, #0b1220);
}
.tprop-page .tprop-break-fee {
    font-weight: 700; color: var(--tb-accent-600, #ea580c);
}
.tprop-page .tprop-break-total {
    padding-top: 12px; margin-top: 2px;
    border-top: 2px solid var(--tb-ink, #0b1220);
    border-bottom: 0;
}
.tprop-page .tprop-break-total span:first-child {
    font-size: 14px; font-weight: 800; color: var(--tb-ink, #0b1220);
}
.tprop-page .tprop-break-final {
    font-size: 20px !important; font-weight: 800; color: #059669 !important;
    letter-spacing: -0.3px;
}
/* Override sp-break-green so it doesn't fight */
.tprop-page .sp-break-green { color: inherit !important; }
.tprop-page .tprop-break-final.sp-break-green { color: #059669 !important; }

/* Stages */
.tprop-page .tprop-stage-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 10px;
}
.tprop-page .tprop-add-stage-btn {
    background: var(--tb-primary, #1e40af) !important;
    border: 0 !important;
    color: #fff !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    display: inline-flex; align-items: center; gap: 6px;
}
.tprop-page .tprop-add-stage-btn:hover {
    background: var(--tb-primary-700, #1e3a8a) !important;
}
.tprop-page .tprop-stage {
    background: var(--tb-bg-soft, #f7f8fb);
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 12px;
    padding: 10px 12px !important;
    margin: 0 0 8px !important;
    align-items: end;
}
.tprop-page .tprop-stage-label {
    display: block;
    font-size: 10.5px; font-weight: 800;
    color: var(--tb-muted, #64748b);
    text-transform: uppercase; letter-spacing: 0.3px;
    margin-bottom: 4px;
}
.tprop-page .tprop-stage input.form-control {
    padding: 8px 10px !important;
    border: 1px solid var(--tb-line, #e5e7eb) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    background: #fff !important;
}
.tprop-page .tprop-stage input.form-control:disabled {
    background: #f8fafc !important;
    color: var(--tb-ink-2, #334155) !important;
    font-weight: 700 !important;
}
.tprop-page .tprop-stage-remove {
    display: flex; align-items: flex-end; justify-content: center;
    padding-bottom: 4px;
}

/* Form fields */
.tprop-page .tprop-field {
    margin-bottom: 14px !important;
}
.tprop-page .tprop-field-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    margin-bottom: 6px;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.tprop-page .tprop-field-label i { color: var(--tb-primary, #1e40af); font-size: 12px; }
.tprop-page .tprop-optional {
    font-size: 11px; font-weight: 600;
    color: var(--tb-muted-2, #94a3b8);
    text-transform: none;
    letter-spacing: 0;
}
.tprop-page .tprop-input {
    padding: 10px 14px !important;
    border: 1.5px solid var(--tb-line, #e5e7eb) !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: var(--tb-ink, #0b1220) !important;
    background: #fff !important;
    outline: none !important;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    width: 100%;
}
.tprop-page .tprop-input:focus {
    border-color: var(--tb-primary, #1e40af) !important;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1) !important;
}
.tprop-page .tprop-textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
}

/* File upload */
.tprop-page .tprop-file {
    position: relative;
}
.tprop-page .tprop-file-input {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); border: 0;
    opacity: 0;
    pointer-events: none;
}
.tprop-page .tprop-file-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 20px 16px;
    border: 1.5px dashed var(--tb-line, #e5e7eb);
    background: var(--tb-bg-soft, #f7f8fb);
    border-radius: 12px;
    color: var(--tb-muted, #64748b);
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    text-align: center;
    margin: 0;
}
.tprop-page .tprop-file-drop i {
    font-size: 22px;
    color: var(--tb-primary, #1e40af);
    margin-bottom: 2px;
}
.tprop-page .tprop-file-drop small {
    font-size: 11.5px; font-weight: 600;
    color: var(--tb-muted-2, #94a3b8);
}
.tprop-page .tprop-file-drop:hover {
    border-color: var(--tb-primary, #1e40af);
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
}
.tprop-page .file-preview,
.tprop-page .tprop-file-preview {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 10px;
}
.tprop-page .tprop-file-item {
    position: relative;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 30px 8px 8px;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 10px;
    max-width: 260px;
    text-align: left;
}
.tprop-page .tprop-file-thumb {
    width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; overflow: hidden;
}
.tprop-page .tprop-file-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.tprop-page .tprop-file-name {
    font-size: 12.5px; font-weight: 700;
    color: var(--tb-ink, #0b1220);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 160px;
    margin: 0;
}
.tprop-page .tprop-file-remove {
    position: absolute; top: 4px; right: 4px;
    width: 22px; height: 22px; border-radius: 50%;
    border: 0; background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-ink-2, #334155);
    font-size: 16px; line-height: 1; font-weight: 700;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    transition: background 0.12s ease, color 0.12s ease;
}
.tprop-page .tprop-file-remove:hover {
    background: var(--tb-accent, #f97316);
    color: #fff;
}

/* Info note */
.tprop-page .tprop-note {
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--tb-primary-50, #eff6ff);
    border: 1px solid rgba(30, 64, 175, 0.14);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--tb-primary-700, #1e3a8a);
    line-height: 1.45;
}
.tprop-page .tprop-note i { color: var(--tb-primary, #1e40af); font-size: 15px; margin-top: 1px; }

/* Actions */
.tprop-page .tprop-actions {
    display: flex; justify-content: space-between; gap: 10px;
    padding-top: 6px;
    flex-wrap: wrap;
}
.tprop-page .tprop-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 14px; font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease, border-color 0.12s ease;
    line-height: 1;
}
.tprop-page .tprop-btn--primary {
    background: var(--tb-accent, #f97316);
    color: #fff;
    box-shadow: 0 6px 14px rgba(249, 115, 22, 0.28);
}
.tprop-page .tprop-btn--primary:hover {
    background: var(--tb-accent-600, #ea580c);
    color: #fff;
    transform: translateY(-1px);
}
.tprop-page .tprop-btn--ghost {
    background: #fff;
    color: var(--tb-primary, #1e40af);
    border-color: var(--tb-line, #e5e7eb);
}
.tprop-page .tprop-btn--ghost:hover {
    background: var(--tb-primary-50, #eff6ff);
    border-color: rgba(30, 64, 175, 0.28);
}

/* Responsive */
@media (max-width: 767px) {
    .tprop-page .tprop-head { flex-direction: column; align-items: stretch; padding: 14px 16px; }
    .tprop-page .tprop-head-right { flex-direction: row; align-items: center; justify-content: space-between; }
    .tprop-page .tprop-head-title { font-size: 18px; }
    .tprop-page .tprop-toggle { grid-template-columns: 1fr; }
    .tprop-page .tprop-card { padding: 16px !important; }
    .tprop-page .tprop-stage .col-sm-4,
    .tprop-page .tprop-stage .col-sm-3,
    .tprop-page .tprop-stage .col-sm-2,
    .tprop-page .tprop-stage .col-sm-1 {
        margin-bottom: 8px;
    }
    .tprop-page .tprop-actions { flex-direction: column; }
    .tprop-page .tprop-actions .tprop-btn { width: 100%; }
}
@media (max-width: 575px) {
    .tprop-page { padding: 12px 0 40px; }
    .tprop-page .tprop-amount { font-size: 18px !important; }
    .tprop-page .tprop-amount-symbol { font-size: 16px; width: 38px; }
}

/* ============================================================================
   Trader — Current work (/trader/current-work) — modern list + icon actions.
   Trust Blue + Warm Orange + neutrals only. No gradients.
   ========================================================================= */
.trwork-page {
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
}

/* Header */
.trwork-page .trwork-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.trwork-page .trwork-title {
    margin: 0;
    font-size: 22px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.3px;
}
.trwork-page .trwork-sub {
    margin: 3px 0 0;
    font-size: 13px; color: var(--tb-muted, #64748b);
    max-width: 520px;
}
.trwork-page .trwork-count {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 999px;
    padding: 6px 14px 6px 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    white-space: nowrap;
    font-size: 12.5px; color: var(--tb-muted, #64748b);
    font-weight: 600;
}
.trwork-page .trwork-count strong { color: var(--tb-ink, #0b1220); font-weight: 800; }
.trwork-page .trwork-count-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--tb-primary, #1e40af);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.18);
    display: inline-block;
}

/* List */
.trwork-page .trwork-list {
    display: flex; flex-direction: column; gap: 10px;
}
.trwork-page .trwork-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 18px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 14px;
    padding: 16px 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.trwork-page .trwork-row:hover {
    border-color: rgba(30, 64, 175, 0.24);
    box-shadow: 0 6px 18px rgba(30, 64, 175, 0.07);
    transform: translateY(-1px);
}
.trwork-page .trwork-row-body { min-width: 0; }
.trwork-page .trwork-row-title {
    display: block;
    font-size: 16px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    text-decoration: none;
    letter-spacing: -0.2px;
    line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trwork-page .trwork-row-title:hover { color: var(--tb-primary, #1e40af); }
.trwork-page .trwork-row-meta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 6px;
    font-size: 12.5px; color: var(--tb-muted, #64748b);
}

/* Customer chip */
.trwork-page .trwork-cust {
    display: inline-flex; align-items: center; gap: 6px;
}
.trwork-page .trwork-cust-avatar {
    width: 22px; height: 22px; border-radius: 6px;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 800;
    flex-shrink: 0;
}
.trwork-page .trwork-cust-name {
    color: var(--tb-ink-2, #334155);
    font-weight: 700;
    text-decoration: none;
    font-size: 13px;
}
.trwork-page .trwork-cust-name:hover { color: var(--tb-primary, #1e40af); }
.trwork-page .trwork-cust-muted { color: var(--tb-muted-2, #94a3b8); font-style: italic; font-size: 12.5px; }
.trwork-page .trwork-dot { color: var(--tb-line, #e5e7eb); }

/* Deadline */
.trwork-page .trwork-deadline {
    display: inline-flex; align-items: center; gap: 5px;
}
.trwork-page .trwork-deadline i {
    color: var(--tb-muted-2, #94a3b8); font-size: 11px;
}
.trwork-page .trwork-deadline--overdue { color: #dc2626; font-weight: 700; }
.trwork-page .trwork-deadline--overdue i { color: #dc2626; }
.trwork-page .trwork-deadline-badge {
    display: inline-flex; align-items: center;
    background: #fef2f2;
    color: #dc2626;
    font-size: 10.5px; font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.3px;
    margin-left: 3px;
    border: 1px solid rgba(220, 38, 38, 0.22);
}
.trwork-page .trwork-deadline-badge--warn {
    background: #fef3c7;
    color: #92400e;
    border-color: rgba(217, 119, 6, 0.24);
}

/* Amount */
.trwork-page .trwork-row-amount {
    text-align: right;
    white-space: nowrap;
    padding-right: 4px;
}
.trwork-page .trwork-row-amount-value {
    display: block;
    font-size: 18px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.3px;
}
.trwork-page .trwork-row-amount-label {
    display: block;
    font-size: 10.5px; font-weight: 800;
    color: var(--tb-muted-2, #94a3b8);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-top: 1px;
}

/* Action icons with CSS-only tooltip */
.trwork-page .trwork-actions {
    display: flex; gap: 6px;
}
.trwork-page .trwork-action {
    position: relative;
    width: 36px; height: 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    text-decoration: none;
    border: 1px solid var(--tb-line, #e5e7eb);
    background: #fff;
    color: var(--tb-muted, #64748b);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
    padding: 0;
    line-height: 1;
}
.trwork-page .trwork-action:hover {
    transform: translateY(-1px);
}
.trwork-page .trwork-action--pay {
    color: var(--tb-primary, #1e40af);
    background: var(--tb-primary-50, #eff6ff);
    border-color: rgba(30, 64, 175, 0.2);
}
.trwork-page .trwork-action--pay:hover {
    background: var(--tb-primary, #1e40af);
    color: #fff;
    border-color: var(--tb-primary, #1e40af);
}
.trwork-page .trwork-action--extra {
    color: var(--tb-accent-600, #ea580c);
    background: var(--tb-accent-50, #fff7ed);
    border-color: rgba(249, 115, 22, 0.24);
}
.trwork-page .trwork-action--extra:hover {
    background: var(--tb-accent, #f97316);
    color: #fff;
    border-color: var(--tb-accent, #f97316);
}
.trwork-page .trwork-action--add {
    color: #059669;
    background: #ecfdf5;
    border-color: rgba(16, 185, 129, 0.24);
}
.trwork-page .trwork-action--add:hover {
    background: #059669;
    color: #fff;
    border-color: #059669;
}
.trwork-page .trwork-action--cancel {
    color: #dc2626;
    background: #fef2f2;
    border-color: rgba(220, 38, 38, 0.22);
}
.trwork-page .trwork-action--cancel:hover {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}

/* CSS-only tooltip via data-tip="…" */
.trwork-page .trwork-action[data-tip]::before,
.trwork-page .trwork-action[data-tip]::after {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
    transform: translateY(4px);
}
.trwork-page .trwork-action[data-tip]::before {
    content: attr(data-tip);
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, 4px);
    background: var(--tb-ink, #0b1220);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 20;
    letter-spacing: 0.1px;
}
.trwork-page .trwork-action[data-tip]::after {
    content: '';
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translate(-50%, 4px);
    border: 5px solid transparent;
    border-top-color: var(--tb-ink, #0b1220);
    z-index: 20;
}
.trwork-page .trwork-action[data-tip]:hover::before {
    opacity: 1;
    transform: translate(-50%, 0);
}
.trwork-page .trwork-action[data-tip]:hover::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Empty state */
.trwork-page .trwork-empty {
    text-align: center;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 14px;
    padding: 36px 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.trwork-page .trwork-empty-icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px;
    margin-bottom: 12px;
}
.trwork-page .trwork-empty h4 {
    margin: 6px 0;
    font-size: 16px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
}
.trwork-page .trwork-empty p {
    font-size: 13px; color: var(--tb-muted, #64748b);
    margin: 0 auto 14px; max-width: 340px;
}
.trwork-page .trwork-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13px; font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
}
.trwork-page .trwork-btn--primary {
    background: var(--tb-accent, #f97316);
    color: #fff;
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.28);
}
.trwork-page .trwork-btn--primary:hover {
    background: var(--tb-accent-600, #ea580c);
    color: #fff;
}

/* Pagination */
.trwork-page .trwork-pagination { margin-top: 14px; }
.trwork-page .trwork-pagination .pagination { justify-content: flex-end; margin: 0; }

/* Responsive */
@media (max-width: 767px) {
    .trwork-page .trwork-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .trwork-page .trwork-row-amount { text-align: left; padding-right: 0; }
    .trwork-page .trwork-actions { justify-content: flex-start; flex-wrap: wrap; }
    .trwork-page .trwork-head { flex-direction: column; align-items: stretch; }
    .trwork-page .trwork-count { align-self: flex-start; }
    /* Tooltips get cramped on mobile — hide them, native title still works. */
    .trwork-page .trwork-action[data-tip]::before,
    .trwork-page .trwork-action[data-tip]::after { display: none; }
}

/* ============================================================================
   Notifications (/notification, /trader/notification) — modern feed.
   Trust Blue + Warm Orange + neutrals only. No gradients.
   Fresh .notify-* prefix so admin's existing .notif-* styles stay isolated.
   ========================================================================= */
.notify-page {
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
}

/* Header */
.notify-page .notify-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-left: 4px solid var(--tb-primary, #1e40af);
    border-radius: 14px;
    padding: 18px 22px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    margin-bottom: 16px;
}
.notify-page .notify-head-left { min-width: 0; flex: 1; }
.notify-page .notify-head-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 800;
    color: var(--tb-primary, #1e40af);
    background: var(--tb-primary-50, #eff6ff);
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.3px;
    margin-bottom: 6px;
}
.notify-page .notify-head-eyebrow i { font-size: 11px; }
.notify-page .notify-title {
    margin: 0;
    font-size: 22px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.3px;
}
.notify-page .notify-sub {
    margin: 3px 0 0;
    font-size: 13px; color: var(--tb-muted, #64748b);
    max-width: 480px;
}

.notify-page .notify-head-right {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
}
.notify-page .notify-unread-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--tb-accent-50, #fff7ed);
    color: var(--tb-accent-600, #ea580c);
    border: 1px solid rgba(249, 115, 22, 0.28);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12.5px; font-weight: 800;
}
.notify-page .notify-unread-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--tb-accent, #f97316);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
    display: inline-block;
}
.notify-page .notify-mark-all {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--tb-primary, #1e40af);
    color: #fff;
    border: 0;
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(30, 64, 175, 0.22);
    transition: background 0.12s ease, transform 0.08s ease;
    text-decoration: none;
}
.notify-page .notify-mark-all:hover {
    background: var(--tb-primary-700, #1e3a8a);
    color: #fff;
    transform: translateY(-1px);
}
.notify-page .notify-caught-up {
    display: inline-flex; align-items: center; gap: 6px;
    background: #ecfdf5;
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.24);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12.5px; font-weight: 800;
}

/* Groups */
.notify-page .notify-group { margin-bottom: 14px; }
.notify-page .notify-group:last-of-type { margin-bottom: 0; }
.notify-page .notify-group-label {
    display: flex; align-items: center; gap: 8px;
    padding: 0 4px;
    margin-bottom: 8px;
    font-size: 11px; font-weight: 800;
    color: var(--tb-muted, #64748b);
    letter-spacing: 0.5px;
}
.notify-page .notify-group-label span:first-child {
    color: var(--tb-ink-2, #334155);
}
.notify-page .notify-group-count {
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-muted, #64748b);
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
}

/* Card */
.notify-page .notify-card {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

/* Item */
.notify-page .notify-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
    border-top: 1px solid var(--tb-line-2, #f1f5f9);
    text-decoration: none;
    color: inherit;
    transition: background 0.12s ease;
    position: relative;
}
.notify-page .notify-item:first-child { border-top: 0; }
.notify-page .notify-item:hover { background: var(--tb-bg-soft, #f7f8fb); }
.notify-page .notify-item--unread {
    background: var(--tb-primary-50, #eff6ff);
}
.notify-page .notify-item--unread:hover {
    background: rgba(30, 64, 175, 0.08);
}
.notify-page .notify-item--unread::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--tb-primary, #1e40af);
}

/* Icon */
.notify-page .notify-icon {
    width: 40px; height: 40px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.notify-page .notify-icon--proposal {
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
}
.notify-page .notify-icon--payment {
    background: #ecfdf5;
    color: #059669;
}
.notify-page .notify-icon--message {
    background: var(--tb-accent-50, #fff7ed);
    color: var(--tb-accent-600, #ea580c);
}
.notify-page .notify-icon--check {
    background: #ecfdf5;
    color: #059669;
}
.notify-page .notify-icon--default {
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-muted, #64748b);
}

/* Body */
.notify-page .notify-body {
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0;
}
.notify-page .notify-text {
    font-size: 14px; color: var(--tb-ink, #0b1220);
    line-height: 1.5;
    font-weight: 500;
    word-break: break-word;
}
.notify-page .notify-item--unread .notify-text { font-weight: 700; }
.notify-page .notify-text strong {
    font-weight: 800;
    color: var(--tb-primary, #1e40af);
}
.notify-page .notify-meta {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; color: var(--tb-muted, #64748b);
    font-weight: 600;
}
.notify-page .notify-meta i { color: var(--tb-muted-2, #94a3b8); font-size: 10.5px; }

/* Right side indicators */
.notify-page .notify-row-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--tb-accent, #f97316);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
    display: inline-block;
    flex-shrink: 0;
}
.notify-page .notify-chevron {
    color: var(--tb-muted-2, #94a3b8);
    font-size: 11px;
    flex-shrink: 0;
    transition: color 0.12s ease, transform 0.12s ease;
}
.notify-page .notify-item:hover .notify-chevron {
    color: var(--tb-primary, #1e40af);
    transform: translateX(2px);
}

/* Icon and body links inside the row shouldn't look like plain links */
.notify-page .notify-item .notify-icon,
.notify-page .notify-item .notify-body {
    text-decoration: none;
    color: inherit;
}

/* Dispute notifications: gavel-themed icon + action button */
.notify-page .notify-icon--dispute {
    background: #fef2f2;
    color: #b91c1c;
}
.notify-page .notify-action {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12.5px; font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.12s ease, transform 0.12s ease;
}
.notify-page .notify-action--dispute {
    background: var(--tb-primary, #1e40af);
    color: #fff;
}
.notify-page .notify-action--dispute:hover {
    background: #1e3a8a;
    color: #fff;
    transform: translateY(-1px);
}
.notify-page .notify-action--dispute i { font-size: 11px; }

/* Pagination */
.notify-page .notify-pagination { margin-top: 16px; }
.notify-page .notify-pagination .pagination { justify-content: center; margin: 0; }

/* Empty state */
.notify-page .notify-empty {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 14px;
    padding: 46px 24px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.notify-page .notify-empty-icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 30px;
    margin-bottom: 14px;
}
.notify-page .notify-empty h3 {
    margin: 0 0 6px;
    font-size: 17px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
}
.notify-page .notify-empty p {
    font-size: 13.5px; color: var(--tb-muted, #64748b);
    margin: 0 auto; max-width: 380px;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 767px) {
    .notify-page .notify-head { flex-direction: column; align-items: stretch; padding: 14px 16px; }
    .notify-page .notify-head-right { justify-content: space-between; }
    .notify-page .notify-item {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        padding: 12px 14px;
    }
    .notify-page .notify-chevron { display: none; }
}

/* ============================================================================
   Trader dashboard (/trader/dashboard) — palette consistency layer.
   The .dash-* classes in responsive.css use the older --dash-blue/--dash-orange
   values (#1f4e8c / #e8590c). Rebind those variables inside .dash-v2 so every
   dash-* rule cascades onto the TradyBay palette without needing per-rule
   overrides. Adds targeted overrides for the couple of places that use
   hard-coded off-palette hex values.
   ========================================================================= */
.dash-v2 {
    --dash-ink: #0b1220;
    --dash-navy: #0b1220;
    --dash-muted: #64748b;
    --dash-muted-2: #94a3b8;
    --dash-line: #e5e7eb;
    --dash-orange: #f97316;      /* Warm Orange */
    --dash-blue: #1e40af;        /* Trust Blue */
}

/* Guide banner used --dash-orange-tinted hex values that don't match #f97316. */
.dash-v2 .dash-guide-banner {
    background: var(--tb-accent-50, #fff7ed);
    border-color: rgba(249, 115, 22, 0.24);
}
.dash-v2 .dash-guide-banner > i,
.dash-v2 .dash-guide-links .guide-video-button {
    color: var(--tb-accent-600, #ea580c);
}

/* Promo card: keep it Warm Orange, but tighten hover to palette. */
.dash-v2 .dash-promo {
    background: var(--tb-accent, #f97316);
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.22);
}
.dash-v2 .dash-promo-btn {
    color: var(--tb-accent-600, #ea580c);
}
.dash-v2 .dash-promo-btn:hover {
    color: var(--tb-accent-600, #ea580c);
    background: var(--tb-accent-50, #fff7ed);
}

/* Section titles, activity list, quick links — pick up the rebound vars. */
.dash-v2 .dash-section-link,
.dash-v2 .dash-activity-text a,
.dash-v2 .trd-quicklinks a:hover,
.dash-v2 .trd-quicklinks a:hover i {
    color: var(--tb-primary, #1e40af);
}
.dash-v2 .dash-section-link:hover { color: var(--tb-primary-700, #1e3a8a); }

/* Recent activity dots — the accent color pop. */
.dash-v2 .dash-activity-dot {
    background: var(--tb-accent, #f97316);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}

/* Stat card hover ring — Trust Blue instead of the old dash-blue tint. */
.dash-v2 .dash-stat:hover {
    border-color: rgba(30, 64, 175, 0.28);
    box-shadow: 0 6px 16px rgba(30, 64, 175, 0.08);
}

/* Bootstrap outline buttons on project cards — palette variants. */
.dash-v2 .proj-card-actions .btn-outline-primary {
    color: var(--tb-primary, #1e40af) !important;
    border-color: var(--tb-primary, #1e40af) !important;
    background: #fff !important;
}
.dash-v2 .proj-card-actions .btn-outline-primary:hover {
    background: var(--tb-primary, #1e40af) !important;
    color: #fff !important;
}
.dash-v2 .proj-card-actions .btn-outline-secondary {
    color: var(--tb-ink-2, #334155) !important;
    border-color: var(--tb-line, #e5e7eb) !important;
    background: #fff !important;
}
.dash-v2 .proj-card-actions .btn-outline-secondary:hover {
    color: var(--tb-primary, #1e40af) !important;
    border-color: var(--tb-primary, #1e40af) !important;
    background: var(--tb-primary-50, #eff6ff) !important;
}

/* Credits rail card values in palette ink. */
.dash-v2 .trd-credit-value { color: var(--tb-ink, #0b1220); }
.dash-v2 .trd-credit-label { color: var(--tb-muted, #64748b); }
.dash-v2 .dash-rail-head h3 { color: var(--tb-ink, #0b1220); }

/* Add-credits button — palette primary. */
.dash-v2 .acct-save {
    background: var(--tb-primary, #1e40af) !important;
    border-color: var(--tb-primary, #1e40af) !important;
    color: #fff !important;
}
.dash-v2 .acct-save:hover {
    background: var(--tb-primary-700, #1e3a8a) !important;
    border-color: var(--tb-primary-700, #1e3a8a) !important;
}

/* Project badges: Hired = Trust Blue tone. */
.dash-v2 .proj-badge--info {
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    border: 1px solid rgba(30, 64, 175, 0.2);
}

/* ============================================================================
   Trader — My profile / portfolio (/trader/portfolio) — modern redesign.
   Trust Blue + Warm Orange + neutrals only. No gradients.
   Preserves all existing .pf-* JS/blade hooks (used by the tab switcher,
   video row add/remove, and image upload preview).
   ========================================================================= */
.tpf-page {
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
}

/* Identity strip (hero) */
.tpf-page .tpf-identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-left: 4px solid var(--tb-primary, #1e40af);
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.tpf-page .tpf-identity-avatar {
    position: relative;
    width: 64px; height: 64px; border-radius: 16px;
    background: var(--tb-primary, #1e40af);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 800;
    overflow: hidden; flex-shrink: 0;
}
.tpf-page .tpf-identity-initials {
    position: absolute; inset: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; letter-spacing: 0.5px;
}
.tpf-page .tpf-identity-avatar img {
    position: relative; z-index: 1;
    width: 100%; height: 100%; object-fit: cover;
}
.tpf-page .tpf-identity-meta { min-width: 0; }
.tpf-page .tpf-identity-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--tb-accent-50, #fff7ed);
    color: var(--tb-accent-600, #ea580c);
    font-size: 11px; font-weight: 800;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.4px;
    margin-bottom: 4px;
}
.tpf-page .tpf-identity-name {
    margin: 0;
    font-size: 22px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.3px;
    line-height: 1.2;
}
.tpf-page .tpf-identity-sub {
    margin: 3px 0 0;
    font-size: 13px; color: var(--tb-muted, #64748b);
    max-width: 460px;
    line-height: 1.5;
}
.tpf-page .tpf-identity-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(64px, auto));
    gap: 8px;
    text-align: center;
}
.tpf-page .tpf-identity-stat {
    background: var(--tb-bg-soft, #f7f8fb);
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 10px;
    padding: 8px 10px;
}
.tpf-page .tpf-identity-stat-value {
    display: block;
    font-size: 18px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.3px;
    line-height: 1;
}
.tpf-page .tpf-identity-stat-label {
    display: block;
    font-size: 10.5px; font-weight: 700;
    color: var(--tb-muted, #64748b);
    text-transform: uppercase; letter-spacing: 0.4px;
    margin-top: 3px;
}

/* Tabs */
.tpf-page .pf-tabs {
    display: flex; gap: 6px; flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 14px;
    padding: 6px;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.tpf-page .pf-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    background: transparent;
    border: 0;
    border-radius: 9px;
    color: var(--tb-muted, #64748b);
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.tpf-page .pf-tab i { font-size: 13px; }
.tpf-page .pf-tab:hover { color: var(--tb-primary, #1e40af); }
.tpf-page .pf-tab.active {
    background: var(--tb-primary, #1e40af);
    color: #fff;
    box-shadow: 0 4px 10px rgba(30, 64, 175, 0.22);
}
.tpf-page .pf-pane { display: none; }
.tpf-page .pf-pane.active { display: block; }

/* Card + title */
.tpf-page .acct-card {
    background: #fff !important;
    border: 1px solid var(--tb-line, #e5e7eb) !important;
    border-radius: 14px !important;
    padding: 20px 22px !important;
    margin-bottom: 14px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.tpf-page .pf-card-title {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    margin: 0 0 4px;
    letter-spacing: -0.1px;
}
.tpf-page .pf-card-title i { color: var(--tb-primary, #1e40af); font-size: 14px; }
.tpf-page .pf-card-title .fa-youtube { color: #dc2626; }
.tpf-page .pf-card-sub {
    margin: 0 0 14px;
    font-size: 13px; color: var(--tb-muted, #64748b);
    line-height: 1.5;
}
.tpf-page .pf-note {
    font-size: 11.5px; color: var(--tb-muted, #64748b);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
.tpf-page .pf-card-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.tpf-page .pf-add-inline {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    padding: 6px 12px;
    border-radius: 9px;
    font-size: 12.5px; font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(30, 64, 175, 0.18);
    transition: background 0.12s ease, color 0.12s ease;
}
.tpf-page .pf-add-inline:hover {
    background: var(--tb-primary, #1e40af);
    color: #fff;
}

/* Existing photo grid */
.tpf-page .pf-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.tpf-page .pf-photo {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--tb-line-2, #f1f5f9);
    border: 1px solid var(--tb-line, #e5e7eb);
    transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.tpf-page .pf-photo:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.09);
}
.tpf-page .pf-photo img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.tpf-page .pf-photo-remove {
    position: absolute; top: 6px; right: 6px;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(11, 18, 32, 0.72);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.12s ease;
}
.tpf-page .pf-photo-remove:hover {
    background: var(--tb-accent, #f97316);
    color: #fff;
}

/* Dropzone */
.tpf-page .pf-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px;
    padding: 26px 20px;
    border: 1.5px dashed var(--tb-line, #e5e7eb);
    background: var(--tb-bg-soft, #f7f8fb);
    border-radius: 14px;
    color: var(--tb-muted, #64748b);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    margin: 0;
}
.tpf-page .pf-drop i {
    font-size: 26px;
    color: var(--tb-primary, #1e40af);
    margin-bottom: 4px;
}
.tpf-page .pf-drop-title {
    font-size: 13.5px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
}
.tpf-page .pf-drop-hint {
    font-size: 11.5px; font-weight: 600;
    color: var(--tb-muted-2, #94a3b8);
}
.tpf-page .pf-drop input[type="file"] { display: none; }
.tpf-page .pf-drop:hover {
    border-color: var(--tb-primary, #1e40af);
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
}
.tpf-page .pf-drop-names {
    font-size: 11.5px;
    color: var(--tb-muted, #64748b);
    margin-top: 4px;
    word-break: break-word;
}

/* Preview (new files with × remove) */
.tpf-page .pf-preview {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 10px;
}
.tpf-page .pf-preview-item {
    position: relative;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 30px 6px 6px;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 10px;
    max-width: 230px;
}
.tpf-page .pf-preview-item img,
.tpf-page .pf-preview-icon {
    width: 40px; height: 40px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    object-fit: cover;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    flex-shrink: 0;
    overflow: hidden;
}
.tpf-page .pf-preview-name {
    font-size: 12px; font-weight: 700;
    color: var(--tb-ink, #0b1220);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 130px;
}
.tpf-page .pf-preview-remove {
    position: absolute; top: 4px; right: 4px;
    width: 22px; height: 22px; border-radius: 50%;
    border: 0; background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-ink-2, #334155);
    font-size: 16px; font-weight: 700; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.12s ease, color 0.12s ease;
}
.tpf-page .pf-preview-remove:hover {
    background: var(--tb-accent, #f97316);
    color: #fff;
}

/* Save button */
.tpf-page .pf-actions { display: flex; justify-content: flex-end; }
.tpf-page .acct-save {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--tb-primary, #1e40af) !important;
    border: 0 !important;
    color: #fff !important;
    padding: 9px 20px !important;
    border-radius: 10px !important;
    font-size: 13px !important; font-weight: 700 !important;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(30, 64, 175, 0.22);
    transition: background 0.12s ease, transform 0.08s ease;
}
.tpf-page .acct-save:hover {
    background: var(--tb-primary-700, #1e3a8a) !important;
    transform: translateY(-1px);
}

/* Video URL rows */
.tpf-page .pf-video-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
}
.tpf-page .pf-video-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: #fef2f2;
    color: #dc2626;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}
.tpf-page .pf-video-row .form-control,
.tpf-page .pf-video-row .acct-input {
    flex: 1;
    padding: 10px 14px !important;
    border: 1.5px solid var(--tb-line, #e5e7eb) !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    color: var(--tb-ink, #0b1220) !important;
    background: #fff !important;
    outline: none !important;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.tpf-page .pf-video-row .form-control:focus,
.tpf-page .pf-video-row .acct-input:focus {
    border-color: var(--tb-primary, #1e40af) !important;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1) !important;
}
.tpf-page .pf-iconbtn {
    width: 40px; height: 40px; border-radius: 10px;
    border: 1px solid var(--tb-line, #e5e7eb);
    background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    flex-shrink: 0;
    padding: 0;
}
.tpf-page .pf-iconbtn--add {
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    border-color: rgba(30, 64, 175, 0.24);
}
.tpf-page .pf-iconbtn--add:hover {
    background: var(--tb-primary, #1e40af);
    color: #fff;
}
.tpf-page .pf-iconbtn--del {
    background: #fef2f2;
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.24);
}
.tpf-page .pf-iconbtn--del:hover {
    background: #dc2626;
    color: #fff;
}

/* Education / Experience list */
.tpf-page .pf-list {
    display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 12px;
}
.tpf-page .pf-list-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    background: var(--tb-bg-soft, #f7f8fb);
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 12px;
    padding: 12px 14px;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.tpf-page .pf-list-item:hover {
    border-color: rgba(30, 64, 175, 0.24);
    background: #fff;
}
.tpf-page .pf-list-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.tpf-page .pf-list-icon--edu {
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
}
.tpf-page .pf-list-icon--exp {
    background: var(--tb-accent-50, #fff7ed);
    color: var(--tb-accent-600, #ea580c);
}
.tpf-page .pf-list-body { min-width: 0; }
.tpf-page .pf-list-title {
    font-size: 14px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.1px;
    line-height: 1.3;
}
.tpf-page .pf-list-sub {
    font-size: 12.5px; color: var(--tb-muted, #64748b);
    margin-top: 3px;
}
.tpf-page .pf-list-dot { color: var(--tb-line, #e5e7eb); margin: 0 3px; }
.tpf-page .pf-list-actions { display: flex; gap: 6px; }
.tpf-page .pf-link-edit,
.tpf-page .pf-link-remove {
    width: 32px; height: 32px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    border: 1px solid var(--tb-line, #e5e7eb);
    background: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    padding: 0;
}
.tpf-page .pf-link-edit {
    color: var(--tb-primary, #1e40af);
}
.tpf-page .pf-link-edit:hover {
    background: var(--tb-primary, #1e40af);
    color: #fff;
    border-color: var(--tb-primary, #1e40af);
}
.tpf-page .pf-link-remove {
    color: #dc2626;
}
.tpf-page .pf-link-remove:hover {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}

/* Add button (below list) */
.tpf-page .pf-add {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    border: 1.5px dashed var(--tb-line, #e5e7eb);
    border-radius: 10px;
    background: transparent;
    color: var(--tb-muted, #64748b);
    font-size: 13px; font-weight: 700;
    text-decoration: none;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.tpf-page .pf-add:hover {
    border-color: var(--tb-primary, #1e40af);
    color: var(--tb-primary, #1e40af);
    background: var(--tb-primary-50, #eff6ff);
}

/* Empty state (per pane) */
.tpf-page .pf-empty-state {
    text-align: center;
    padding: 28px 12px;
    background: var(--tb-bg-soft, #f7f8fb);
    border: 1px dashed var(--tb-line, #e5e7eb);
    border-radius: 12px;
    margin-bottom: 12px;
}
.tpf-page .pf-empty-icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: #fff;
    color: var(--tb-primary, #1e40af);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
    margin-bottom: 10px;
    border: 1px solid var(--tb-line, #e5e7eb);
}
.tpf-page .pf-empty-state p {
    font-size: 13.5px; color: var(--tb-muted, #64748b);
    margin: 0;
}

/* Social links */
.tpf-page .pf-social-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.tpf-page .pf-social-field label {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    margin-bottom: 5px;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.tpf-page .pf-social-brand { font-size: 13px; }
.tpf-page .pf-social-brand--fb { color: #1877f2; }
.tpf-page .pf-social-brand--x { color: #0b1220; }
.tpf-page .pf-social-brand--ig { color: #e4405f; }
.tpf-page .pf-social-brand--yt { color: #dc2626; }
.tpf-page .pf-social-field .form-control {
    padding: 10px 14px;
    border: 1.5px solid var(--tb-line, #e5e7eb);
    border-radius: 10px;
    font-size: 13.5px;
    color: var(--tb-ink, #0b1220);
    background: #fff;
    outline: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    width: 100%;
}
.tpf-page .pf-social-field .form-control:focus {
    border-color: var(--tb-primary, #1e40af);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

/* Responsive */
@media (max-width: 991px) {
    .tpf-page .tpf-identity {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .tpf-page .tpf-identity-stats {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 767px) {
    .tpf-page .pf-social-grid { grid-template-columns: 1fr; }
    .tpf-page .pf-card-head { flex-direction: column; align-items: stretch; }
    .tpf-page .pf-tabs { padding: 4px; }
    .tpf-page .pf-tab { padding: 8px 12px; font-size: 12.5px; }
    .tpf-page .pf-tab span { display: none; }
    .tpf-page .pf-tab i { font-size: 14px; }
    .tpf-page .tpf-identity {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .tpf-page .tpf-identity-avatar { justify-self: center; }
    .tpf-page .tpf-identity-eyebrow { align-self: center; }
    .tpf-page .tpf-identity-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   Trader panel — palette-consistency layer (.trd-panel-page).
   Wraps: financial-dashboard, transaction, commission, credits, proposals.
   Rebinds --dash-* to --tb-* and overrides component classes that used
   off-palette hex values, so every existing .fin-*/.txn-*/.cr-*/.tprop-* rule
   picks up the TradyBay palette without needing rule-by-rule edits.
   ========================================================================= */
.trd-panel-page {
    --dash-ink: #0b1220;
    --dash-navy: #0b1220;
    --dash-muted: #64748b;
    --dash-muted-2: #94a3b8;
    --dash-line: #e5e7eb;
    --dash-orange: #f97316;
    --dash-blue: #1e40af;
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
}

/* Section head + subtitle */
.trd-panel-page .acct-head { margin-bottom: 16px; }
.trd-panel-page .acct-head h1 {
    font-size: 22px;
    font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.3px;
    margin: 0 0 4px;
}
.trd-panel-page .acct-head-sub {
    font-size: 13px;
    color: var(--tb-muted, #64748b);
    margin: 0;
    max-width: 560px;
}
.trd-panel-page .acct-head-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}

/* Financial dashboard stat cards */
.trd-panel-page .fin-stat {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    padding: 18px 20px;
    transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.12s ease;
}
.trd-panel-page .fin-stat:hover {
    transform: translateY(-1px);
    border-color: rgba(30, 64, 175, 0.24);
    box-shadow: 0 6px 16px rgba(30, 64, 175, 0.08);
}
.trd-panel-page .fin-stat--navy {
    background: var(--tb-primary, #1e40af);
    border-color: var(--tb-primary, #1e40af);
    color: #fff;
    box-shadow: 0 10px 22px rgba(30, 64, 175, 0.22);
}
.trd-panel-page .fin-stat-value {
    color: var(--tb-ink, #0b1220);
    font-size: 26px; font-weight: 800;
    letter-spacing: -0.4px;
    line-height: 1.1;
}
.trd-panel-page .fin-stat--navy .fin-stat-value { color: #fff; }
.trd-panel-page .fin-stat-label {
    color: var(--tb-ink, #0b1220);
    font-size: 13px; font-weight: 800;
    margin-top: 4px;
    display: block;
}
.trd-panel-page .fin-stat--navy .fin-stat-label { color: #fff; }
.trd-panel-page .fin-stat-sub {
    color: var(--tb-muted, #64748b);
    font-size: 12px;
    margin-top: 2px;
    display: block;
}
.trd-panel-page .fin-stat--navy .fin-stat-sub { color: rgba(255, 255, 255, 0.78); }

.trd-panel-page .fin-projects-head {
    display: flex; align-items: center; justify-content: space-between;
    margin: 20px 0 10px;
}
.trd-panel-page .fin-projects-head h2 {
    font-size: 16px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.2px;
    margin: 0;
}
.trd-panel-page .dash-section-link {
    font-size: 12.5px; font-weight: 800;
    color: var(--tb-primary, #1e40af);
    text-transform: uppercase; letter-spacing: 0.3px;
    text-decoration: none;
}
.trd-panel-page .dash-section-link:hover { color: var(--tb-primary-700, #1e3a8a); }

/* Table card + table */
.trd-panel-page .acct-table-card {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.trd-panel-page .acct-table thead th {
    background: var(--tb-bg-soft, #f7f8fb);
    color: var(--tb-muted, #64748b);
    font-size: 11.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.3px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--tb-line, #e5e7eb);
    border-top: 0;
}
.trd-panel-page .acct-table tbody td {
    padding: 12px 16px;
    font-size: 13.5px;
    color: var(--tb-ink, #0b1220);
    border-top: 1px solid var(--tb-line-2, #f1f5f9);
    vertical-align: middle;
}
.trd-panel-page .acct-cell-link,
.trd-panel-page .fin-project {
    color: var(--tb-primary, #1e40af);
    font-weight: 700;
    text-decoration: none;
}
.trd-panel-page .acct-cell-link:hover,
.trd-panel-page .fin-project:hover { color: var(--tb-primary-700, #1e3a8a); }
.trd-panel-page .fin-muted { color: var(--tb-muted-2, #94a3b8); font-style: italic; }

/* Status badges */
.trd-panel-page .proj-badge {
    display: inline-flex; align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.2px;
    border: 1px solid transparent;
}
.trd-panel-page .proj-badge--info {
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    border-color: rgba(30, 64, 175, 0.2);
}
.trd-panel-page .proj-badge--success {
    background: #ecfdf5;
    color: #059669;
    border-color: rgba(16, 185, 129, 0.24);
}
.trd-panel-page .proj-badge--muted {
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-muted, #64748b);
    border-color: var(--tb-line, #e5e7eb);
}

/* Transaction / commission filter bar */
.trd-panel-page .txn-filterbar {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    align-items: end;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.trd-panel-page .txn-filter-field label {
    display: block;
    font-size: 11px; font-weight: 800;
    color: var(--tb-muted, #64748b);
    text-transform: uppercase; letter-spacing: 0.3px;
    margin-bottom: 4px;
}
.trd-panel-page .txn-filter-field .form-control {
    padding: 8px 10px;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--tb-ink, #0b1220);
    background: #fff;
    outline: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.trd-panel-page .txn-filter-field .form-control:focus {
    border-color: var(--tb-primary, #1e40af);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}
.trd-panel-page .txn-filter-actions { display: flex; gap: 6px; }
.trd-panel-page .txn-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px; font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.trd-panel-page .txn-btn-filter {
    background: var(--tb-primary, #1e40af);
    color: #fff;
    border: 0;
}
.trd-panel-page .txn-btn-filter:hover { background: var(--tb-primary-700, #1e3a8a); color: #fff; }
.trd-panel-page .txn-btn-reset {
    background: #fff;
    color: var(--tb-muted, #64748b);
    border-color: var(--tb-line, #e5e7eb);
}
.trd-panel-page .txn-btn-reset:hover {
    color: var(--tb-primary, #1e40af);
    border-color: var(--tb-primary, #1e40af);
}
.trd-panel-page .txn-btn-export {
    background: var(--tb-accent, #f97316);
    color: #fff;
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.24);
}
.trd-panel-page .txn-btn-export:hover { background: var(--tb-accent-600, #ea580c); color: #fff; }

/* Transaction type icon + amount colors */
.trd-panel-page .txn-type {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700;
    color: var(--tb-ink, #0b1220);
}
.trd-panel-page .txn-type-icon {
    width: 26px; height: 26px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}
.trd-panel-page .txn-type-icon.txn-in { background: #ecfdf5; color: #059669; }
.trd-panel-page .txn-type-icon.txn-out { background: var(--tb-accent-50, #fff7ed); color: var(--tb-accent-600, #ea580c); }
.trd-panel-page .txn-amount { font-weight: 800; font-size: 14px; }
.trd-panel-page .txn-amount-in { color: #059669; }
.trd-panel-page .txn-amount-out { color: var(--tb-accent-600, #ea580c); }
.trd-panel-page .txn-desc { color: var(--tb-ink-2, #334155); font-size: 13px; }

/* Credit balance + package cards */
.trd-panel-page .cr-balance {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--tb-accent-50, #fff7ed);
    color: var(--tb-accent-600, #ea580c);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px; font-weight: 800;
    border: 1px solid rgba(249, 115, 22, 0.28);
}
.trd-panel-page .cr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.trd-panel-page .cr-card {
    position: relative;
    background: #fff;
    border: 1.5px solid var(--tb-line, #e5e7eb);
    border-radius: 16px;
    padding: 22px 20px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.trd-panel-page .cr-card:hover {
    transform: translateY(-2px);
    border-color: rgba(30, 64, 175, 0.24);
    box-shadow: 0 10px 24px rgba(30, 64, 175, 0.08);
}
.trd-panel-page .cr-card--featured {
    border-color: var(--tb-primary, #1e40af);
    box-shadow: 0 8px 20px rgba(30, 64, 175, 0.14);
}
.trd-panel-page .cr-badge {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: var(--tb-accent, #f97316);
    color: #fff;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.4px;
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.28);
}
.trd-panel-page .cr-title {
    font-size: 13.5px; font-weight: 800;
    color: var(--tb-muted, #64748b);
    text-transform: uppercase; letter-spacing: 0.4px;
    margin-bottom: 8px;
}
.trd-panel-page .cr-price {
    font-size: 34px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.6px;
    line-height: 1;
    margin-bottom: 6px;
}
.trd-panel-page .cr-credits {
    font-size: 13px; color: var(--tb-muted, #64748b);
    margin-bottom: 14px;
}
.trd-panel-page .cr-credits strong { color: var(--tb-primary, #1e40af); font-weight: 800; }
.trd-panel-page .cr-btn {
    display: inline-block;
    background: var(--tb-primary, #1e40af);
    color: #fff;
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 13px; font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(30, 64, 175, 0.24);
    transition: background 0.12s ease, transform 0.08s ease;
}
.trd-panel-page .cr-btn:hover {
    background: var(--tb-primary-700, #1e3a8a);
    color: #fff;
    transform: translateY(-1px);
}
.trd-panel-page .cr-card--featured .cr-btn { background: var(--tb-accent, #f97316); box-shadow: 0 4px 10px rgba(249, 115, 22, 0.28); }
.trd-panel-page .cr-card--featured .cr-btn:hover { background: var(--tb-accent-600, #ea580c); }

/* Proposals page palette overrides for the .tprop-* listing classes */
.trd-panel-page .tprop-head h1 {
    font-size: 22px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.3px;
    margin: 0;
}
.trd-panel-page .tprop-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.trd-panel-page .tprop-pill {
    display: inline-flex; align-items: center;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    color: var(--tb-ink-2, #334155);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12.5px; font-weight: 700;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.trd-panel-page .tprop-pill:hover {
    color: var(--tb-primary, #1e40af);
    border-color: var(--tb-primary, #1e40af);
}
.trd-panel-page .tprop-pill.is-active {
    background: var(--tb-primary, #1e40af);
    color: #fff;
    border-color: var(--tb-primary, #1e40af);
}
.trd-panel-page .tprop-group {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.trd-panel-page .tprop-group-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--tb-line-2, #f1f5f9);
}
.trd-panel-page .tprop-group-eyebrow {
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-ink-2, #334155);
    font-size: 10.5px; font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.3px;
}
.trd-panel-page .tprop-group-title {
    font-size: 15px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    text-decoration: none;
    letter-spacing: -0.2px;
}
.trd-panel-page .tprop-group-title:hover { color: var(--tb-primary, #1e40af); }
.trd-panel-page .tprop-group-cat {
    font-size: 12.5px; color: var(--tb-muted, #64748b);
}
/* Ultra-compact listing card. Every column pinned to the TOP of its cell so
   the shorter columns (avatar/bid) don't sit vertically centered inside the
   taller middle column — that's what was leaving ~60px of dead space above
   the £amount stack. */
.trd-panel-page .tprop-card {
    background: var(--tb-bg-soft, #f7f8fb) !important;
    border-color: var(--tb-line, #e5e7eb) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    border-radius: 10px !important;
    padding: 8px 12px !important;
    margin-bottom: 6px !important;
    grid-template-columns: 180px minmax(0, 1fr) 130px !important;
    gap: 12px !important;
    align-items: start !important;
    align-content: start !important;
}
.trd-panel-page .tprop-card > .tprop-cust,
.trd-panel-page .tprop-card > .tprop-main,
.trd-panel-page .tprop-card > .tprop-bid {
    align-self: start !important;
}
.trd-panel-page .tprop-cust { align-items: center !important; gap: 10px !important; }
.trd-panel-page .tprop-avatar {
    width: 34px !important; height: 34px !important; flex: 0 0 34px !important;
    border-radius: 9px !important;
    font-size: 11.5px !important;
}
.trd-panel-page .tprop-cust-name {
    color: var(--tb-ink, #0b1220);
    font-weight: 800;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
}
.trd-panel-page .tprop-cust-name:hover { color: var(--tb-primary, #1e40af); }
.trd-panel-page .tprop-cust-info { gap: 0 !important; }
.trd-panel-page .tprop-cust-sub {
    color: var(--tb-muted, #64748b);
    font-size: 11px !important;
    line-height: 1.3 !important;
}
/* Drop the second "Job code" sub — it's already visible in the group header. */
.trd-panel-page .tprop-cust-info .tprop-cust-sub + .tprop-cust-sub { display: none !important; }

/* Body: single-line quote clip, tiny gaps. */
.trd-panel-page .tprop-main { gap: 4px !important; }
.trd-panel-page .tprop-quote {
    color: var(--tb-ink-2, #334155);
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    -webkit-line-clamp: 1 !important;
}
.trd-panel-page .tprop-attachments { gap: 5px !important; }
.trd-panel-page .tprop-chip {
    background: var(--tb-primary-50, #eff6ff) !important;
    color: var(--tb-primary, #1e40af) !important;
    border-radius: 8px !important;
    font-weight: 700;
    font-size: 11px !important;
    padding: 3px 8px 3px 3px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px !important;
    max-width: 180px;
    border: 1px solid rgba(30, 64, 175, 0.14);
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.trd-panel-page .tprop-chip:hover {
    background: var(--tb-primary, #1e40af) !important;
    color: #fff !important;
    border-color: var(--tb-primary, #1e40af);
}
.trd-panel-page .tprop-chip-thumb {
    width: 22px; height: 22px; border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    background: #fff;
}
.trd-panel-page .tprop-chip-thumb--img { background: var(--tb-line-2, #f1f5f9); }
.trd-panel-page .tprop-chip-thumb--file { color: var(--tb-primary, #1e40af); font-size: 12px; }
.trd-panel-page .tprop-chip:hover .tprop-chip-thumb--file { color: var(--tb-primary, #1e40af); background: #fff; }
.trd-panel-page .tprop-chip-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.trd-panel-page .tprop-chip-name {
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.trd-panel-page .tprop-actions { gap: 6px !important; }
.trd-panel-page .tprop-btn {
    background: #fff;
    color: var(--tb-primary, #1e40af);
    border-color: var(--tb-line, #e5e7eb);
    border-radius: 6px;
    padding: 4px 10px !important;
    font-size: 11.5px !important;
    line-height: 1.2;
}
.trd-panel-page .tprop-btn:hover {
    background: var(--tb-primary, #1e40af);
    color: #fff;
    border-color: var(--tb-primary, #1e40af);
}

/* Bid column: hide the "YOUR BID" and "COMPLETION TIME" descriptor labels —
   they added ~30px of vertical space for no info. Content hugs the TOP so
   the £amount lines up with the customer name / quote on the left. */
.trd-panel-page .tprop-bid {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
}
.trd-panel-page .tprop-amount { gap: 0 !important; }
.trd-panel-page .tprop-amount-value {
    color: var(--tb-ink, #0b1220);
    font-size: 16px !important;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.1 !important;
}
.trd-panel-page .tprop-amount-label,
.trd-panel-page .tprop-meta-label {
    display: none !important;
}
.trd-panel-page .tprop-meta {
    gap: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}
.trd-panel-page .tprop-meta-value {
    color: var(--tb-muted, #64748b);
    font-weight: 600;
    font-size: 11px !important;
    line-height: 1.25 !important;
}
.trd-panel-page .tprop-badge {
    padding: 2px 8px !important;
    font-size: 10px !important;
    margin-top: 3px !important;
    line-height: 1.2;
}
.trd-panel-page .tprop-badge--green {
    background: #ecfdf5; color: #059669; border: 1px solid rgba(16, 185, 129, 0.24);
}
.trd-panel-page .tprop-badge--amber {
    background: #fef3c7; color: #92400e; border: 1px solid rgba(217, 119, 6, 0.24);
}
.trd-panel-page .tprop-badge--blue {
    background: var(--tb-primary-50, #eff6ff); color: var(--tb-primary, #1e40af); border: 1px solid rgba(30, 64, 175, 0.24);
}
.trd-panel-page .tprop-badge--grey {
    background: var(--tb-line-2, #f1f5f9); color: var(--tb-muted, #64748b); border: 1px solid var(--tb-line, #e5e7eb);
}
.trd-panel-page .tprop-empty {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 14px;
    padding: 40px 20px;
    text-align: center;
    color: var(--tb-muted, #64748b);
}

/* Guide banner reused inside these pages — palette rebind */
.trd-panel-page .dash-guide-banner {
    background: var(--tb-accent-50, #fff7ed);
    border: 1px solid rgba(249, 115, 22, 0.24);
    color: var(--tb-accent-600, #ea580c);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 14px;
}
.trd-panel-page .dash-guide-banner > i { color: var(--tb-accent-600, #ea580c); }
.trd-panel-page .dash-guide-links .guide-video-button { color: var(--tb-accent-600, #ea580c); font-weight: 700; }

/* Empty state used in tables */
.trd-panel-page .no-data,
.trd-panel-page .NoRecordFound {
    padding: 30px 20px;
    text-align: center;
    color: var(--tb-muted, #64748b);
}
.trd-panel-page .no-data h3 {
    color: var(--tb-ink, #0b1220);
    font-size: 15.5px; font-weight: 800;
    margin: 10px 0 4px;
}

@media (max-width: 767px) {
    .trd-panel-page .txn-filterbar { grid-template-columns: 1fr 1fr; }
    .trd-panel-page .txn-filter-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ============================================================================
   Trader — Payment method (/trader/payment-method) — modern redesign.
   ========================================================================= */
.paym-page {
    background: var(--tb-bg-soft, #f7f8fb);
    padding: 22px 0 60px;
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
}
.paym-container { max-width: 960px; }
.paym-page .paym-back {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--tb-primary, #1e40af);
    font-size: 13px; font-weight: 700;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(30, 64, 175, 0.06);
    margin-bottom: 14px;
    transition: background 0.12s ease, color 0.12s ease;
}
.paym-page .paym-back:hover { background: var(--tb-primary, #1e40af); color: #fff; }

/* Hero */
.paym-page .paym-hero {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-left: 4px solid var(--tb-primary, #1e40af);
    border-radius: 16px;
    padding: 22px 24px;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, auto);
    gap: 22px;
    align-items: center;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    margin-bottom: 16px;
}
.paym-page .paym-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    font-size: 11px; font-weight: 800;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.4px;
    margin-bottom: 8px;
}
.paym-page .paym-hero-title {
    margin: 0;
    font-size: 22px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.3px;
    line-height: 1.25;
}
.paym-page .paym-hero-sub {
    margin: 6px 0 0;
    font-size: 13.5px; color: var(--tb-muted, #64748b);
    max-width: 440px;
    line-height: 1.5;
}
.paym-page .paym-order {
    background: var(--tb-bg-soft, #f7f8fb);
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 12px;
    padding: 14px 16px;
    text-align: right;
    min-width: 200px;
}
.paym-page .paym-order-label {
    font-size: 11px; font-weight: 800;
    color: var(--tb-muted, #64748b);
    text-transform: uppercase; letter-spacing: 0.4px;
}
.paym-page .paym-order-title {
    font-size: 14px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    margin-top: 4px;
}
.paym-page .paym-order-credits {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12.5px; font-weight: 700;
    color: var(--tb-accent-600, #ea580c);
    background: var(--tb-accent-50, #fff7ed);
    padding: 3px 10px;
    border-radius: 999px;
    margin-top: 6px;
    border: 1px solid rgba(249, 115, 22, 0.2);
}
.paym-page .paym-order-price {
    margin-top: 8px;
    font-size: 28px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.4px;
    line-height: 1;
}
.paym-page .paym-order-price-currency {
    font-size: 18px; font-weight: 700; color: var(--tb-muted, #64748b);
}

/* Payment options */
.paym-page .paym-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}
.paym-page .paym-option {
    background: #fff;
    border: 1.5px solid var(--tb-line, #e5e7eb);
    border-radius: 16px;
    padding: 22px 22px;
    display: flex; flex-direction: column; gap: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
    margin: 0;
}
.paym-page .paym-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}
.paym-page .paym-option--stripe:hover { border-color: rgba(30, 64, 175, 0.35); }
.paym-page .paym-option--paypal:hover { border-color: rgba(0, 48, 135, 0.35); }
.paym-page .paym-option-head { display: flex; align-items: center; gap: 12px; }
.paym-page .paym-option-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}
.paym-page .paym-option-icon--stripe {
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
}
.paym-page .paym-option-icon--paypal {
    background: #eff2f8;
    color: #003087;
}
.paym-page .paym-option-title {
    font-size: 16px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.2px;
}
.paym-page .paym-option-sub {
    font-size: 12.5px; color: var(--tb-muted, #64748b);
    margin-top: 2px;
}
.paym-page .paym-option-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.paym-page .paym-badge {
    display: inline-flex; align-items: center;
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-ink-2, #334155);
    font-size: 11.5px; font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
}
.paym-page .paym-badge i { font-size: 15px; }
.paym-page .paym-option-btn {
    display: block; width: 100%;
    padding: 12px 18px;
    border: 0;
    border-radius: 10px;
    font-size: 14px; font-weight: 800;
    color: #fff;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.08s ease;
    letter-spacing: 0.1px;
}
.paym-page .paym-option-btn--stripe {
    background: var(--tb-primary, #1e40af);
    box-shadow: 0 6px 14px rgba(30, 64, 175, 0.22);
}
.paym-page .paym-option-btn--stripe:hover {
    background: var(--tb-primary-700, #1e3a8a);
    transform: translateY(-1px);
}
.paym-page .paym-option-btn--paypal {
    background: #ffc439;
    color: #003087;
    box-shadow: 0 6px 14px rgba(0, 48, 135, 0.14);
}
.paym-page .paym-option-btn--paypal:hover {
    background: #ffb800;
    color: #003087;
    transform: translateY(-1px);
}
.paym-page .paym-option-note {
    font-size: 11.5px;
    color: var(--tb-muted, #64748b);
    display: inline-flex; align-items: center; gap: 5px;
    justify-content: center;
}
.paym-page .paym-option-note i { color: #059669; }

/* Trust row */
.paym-page .paym-trust {
    display: flex; align-items: center; justify-content: center;
    gap: 20px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--tb-muted, #64748b);
    font-weight: 600;
}
.paym-page .paym-trust i { color: #059669; margin-right: 4px; }

/* Responsive */
@media (max-width: 767px) {
    .paym-page .paym-hero { grid-template-columns: 1fr; }
    .paym-page .paym-order { text-align: left; }
    .paym-page .paym-options { grid-template-columns: 1fr; }
}

/* ============================================================================
   Trader — My Account (/trader/my-account/{id}/edit) — compact view/edit UI.
   Values are shown read-only by default, packed into a dense definition-list
   grid. Each section has an Edit toggle that reveals the editable inputs
   for that section only. Form submits every field so the trader can edit
   several sections at once and save at the bottom.
   ========================================================================= */
.tacc-page {
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
}

/* Identity strip */
.tacc-page .tacc-identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-left: 4px solid var(--tb-primary, #1e40af);
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.tacc-page .tacc-identity-avatar {
    position: relative;
    width: 52px; height: 52px; border-radius: 14px;
    background: var(--tb-primary, #1e40af);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 800;
    overflow: hidden;
    flex-shrink: 0;
}
.tacc-page .tacc-identity-initials {
    position: absolute; inset: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.tacc-page .tacc-identity-avatar img {
    position: relative; z-index: 1;
    width: 100%; height: 100%; object-fit: cover;
}
.tacc-page .tacc-identity-eyebrow {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 800;
    color: var(--tb-primary, #1e40af);
    background: var(--tb-primary-50, #eff6ff);
    padding: 2px 9px;
    border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.4px;
    margin-bottom: 4px;
}
.tacc-page .tacc-identity-name {
    margin: 0;
    font-size: 19px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.3px;
    line-height: 1.2;
}
.tacc-page .tacc-identity-sub {
    font-size: 12.5px; color: var(--tb-muted, #64748b);
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tacc-page .tacc-delete-link {
    width: 38px; height: 38px; border-radius: 10px;
    background: #fef2f2;
    color: #dc2626;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    border: 1px solid rgba(220, 38, 38, 0.2);
    transition: background 0.12s ease, color 0.12s ease;
    font-size: 14px;
}
.tacc-page .tacc-delete-link:hover {
    background: #dc2626;
    color: #fff;
}

.tacc-page .tacc-page-note {
    display: flex; align-items: center; gap: 8px;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary-700, #1e3a8a);
    border: 1px solid rgba(30, 64, 175, 0.16);
    border-radius: 10px;
    padding: 8px 14px;
    margin-bottom: 12px;
    font-size: 12.5px;
    line-height: 1.4;
}
.tacc-page .tacc-page-note i { color: var(--tb-primary, #1e40af); font-size: 13px; }

/* Section card */
.tacc-page .tacc-section {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}
.tacc-page .tacc-section-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    gap: 12px;
    border-bottom: 1px solid var(--tb-line-2, #f1f5f9);
    background: var(--tb-bg-soft, #f7f8fb);
}
.tacc-page .tacc-section-title {
    display: flex; align-items: center; gap: 12px;
    min-width: 0;
}
.tacc-page .tacc-section-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.tacc-page .tacc-section-icon--blue {
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
}
.tacc-page .tacc-section-icon--accent {
    background: var(--tb-accent-50, #fff7ed);
    color: var(--tb-accent-600, #ea580c);
}
.tacc-page .tacc-section-icon--muted {
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-muted, #64748b);
}
.tacc-page .tacc-section-title h3 {
    margin: 0;
    font-size: 14.5px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.1px;
    display: inline-flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.tacc-page .tacc-section-title p {
    margin: 2px 0 0;
    font-size: 12px; color: var(--tb-muted, #64748b);
    line-height: 1.35;
}
.tacc-page .tacc-optional {
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-muted, #64748b);
    font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.tacc-page .tacc-secure {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    font-size: 10.5px; font-weight: 800;
    padding: 2px 8px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.tacc-page .tacc-secure i { font-size: 9px; }

/* Edit toggle */
.tacc-page .tacc-edit-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    color: var(--tb-primary, #1e40af);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    flex-shrink: 0;
}
.tacc-page .tacc-edit-btn:hover {
    background: var(--tb-primary, #1e40af);
    color: #fff;
    border-color: var(--tb-primary, #1e40af);
}
.tacc-page .tacc-section.is-editing .tacc-edit-btn {
    background: #fef2f2;
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.24);
}
.tacc-page .tacc-section.is-editing .tacc-edit-btn:hover {
    background: #dc2626; color: #fff; border-color: #dc2626;
}

/* Section body */
.tacc-page .tacc-section-body {
    padding: 12px 18px 14px;
}

/* Compact 2-col grid (default) */
.tacc-page .tacc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 22px;
}
.tacc-page .tacc-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.tacc-page .tacc-field { min-width: 0; }
.tacc-page .tacc-field--full { grid-column: 1 / -1; }

.tacc-page .tacc-label {
    font-size: 11px; font-weight: 800;
    color: var(--tb-muted, #64748b);
    text-transform: uppercase; letter-spacing: 0.3px;
    margin-bottom: 3px;
    display: flex; align-items: center; gap: 6px;
}
.tacc-page .tacc-hint {
    font-weight: 500; font-size: 10.5px;
    color: var(--tb-muted-2, #94a3b8);
    text-transform: none; letter-spacing: 0;
}
.tacc-page .tacc-lock {
    color: var(--tb-muted-2, #94a3b8);
    cursor: help;
    font-size: 9px;
}

/* Value display (read-only mode) */
.tacc-page .tacc-value {
    font-size: 13.5px; font-weight: 700;
    color: var(--tb-ink, #0b1220);
    line-height: 1.35;
    word-break: break-word;
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
    min-height: 20px;
}
.tacc-page .tacc-value--multiline {
    display: block;
    font-weight: 500;
    color: var(--tb-ink-2, #334155);
}
.tacc-page .tacc-value--mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.4px; }
.tacc-page .tacc-empty {
    font-style: italic;
    color: var(--tb-muted-2, #94a3b8);
    font-weight: 500;
    font-size: 12.5px;
}

/* Trades chip cluster */
.tacc-page .tacc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tacc-page .tacc-chip {
    background: var(--tb-accent-50, #fff7ed);
    color: var(--tb-accent-600, #ea580c);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
    border: 1px solid rgba(249, 115, 22, 0.2);
}

/* Existing file link */
.tacc-page .tacc-files { display: flex; flex-wrap: wrap; gap: 5px; }
.tacc-page .tacc-files--sm { margin-top: 6px; }
.tacc-page .tacc-file {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    padding: 3px 9px;
    border-radius: 8px;
    font-size: 11.5px; font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(30, 64, 175, 0.14);
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tacc-page .tacc-file:hover { background: var(--tb-primary, #1e40af); color: #fff; }

/* VAT status badge in-line */
.tacc-page .tacc-badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.3px;
    border: 1px solid transparent;
}
.tacc-page .tacc-badge--ok {
    background: #ecfdf5; color: #059669; border-color: rgba(16, 185, 129, 0.24);
}

/* Avatar preview */
.tacc-page .tacc-avatar-preview {
    border-radius: 12px !important;
    object-fit: cover;
    border: 1px solid var(--tb-line, #e5e7eb);
}

/* Edit-mode inputs (hidden by default, revealed via .is-editing) */
.tacc-page .tacc-input { display: none; }
.tacc-page .tacc-section.is-editing .tacc-value { display: none !important; }
.tacc-page .tacc-section.is-editing .tacc-input { display: block; }

.tacc-page .tacc-input .form-control,
.tacc-page .tacc-input input.form-control,
.tacc-page .tacc-input select.form-control,
.tacc-page .tacc-input textarea.form-control {
    padding: 8px 12px !important;
    border: 1.5px solid var(--tb-line, #e5e7eb) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    color: var(--tb-ink, #0b1220) !important;
    background: #fff !important;
    outline: none !important;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    width: 100%;
}
.tacc-page .tacc-input .form-control:focus {
    border-color: var(--tb-primary, #1e40af) !important;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1) !important;
}
.tacc-page .tacc-input input[readonly] {
    background: var(--tb-bg-soft, #f7f8fb) !important;
    color: var(--tb-muted, #64748b) !important;
    cursor: not-allowed;
}
.tacc-page .tacc-input textarea { min-height: 60px; resize: vertical; }
.tacc-page .tacc-error {
    display: block; font-size: 11.5px; color: #dc2626; margin-top: 3px;
}
.tacc-page .tacc-check {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--tb-ink, #0b1220);
    font-weight: 600;
    cursor: pointer;
    margin: 0;
}
.tacc-page .tacc-check input[type="checkbox"] {
    width: 15px; height: 15px;
    accent-color: var(--tb-primary, #1e40af);
    margin: 0;
}
.tacc-page .has-error .tacc-input .form-control { border-color: #dc2626 !important; }

/* Save bar */
.tacc-page .tacc-save-bar {
    display: flex; justify-content: flex-end;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--tb-line, #e5e7eb);
}
.tacc-page .tacc-save-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--tb-primary, #1e40af);
    color: #fff;
    border: 0;
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 14px; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(30, 64, 175, 0.22);
    transition: background 0.12s ease, transform 0.08s ease;
}
.tacc-page .tacc-save-btn:hover {
    background: var(--tb-primary-700, #1e3a8a);
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 991px) {
    .tacc-page .tacc-grid--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .tacc-page .tacc-identity {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .tacc-page .tacc-delete-link {
        grid-column: 1 / -1;
        justify-self: flex-end;
    }
    .tacc-page .tacc-grid,
    .tacc-page .tacc-grid--3 { grid-template-columns: 1fr; gap: 8px; }
    .tacc-page .tacc-section-head { flex-direction: column; align-items: stretch; gap: 8px; }
    .tacc-page .tacc-edit-btn { align-self: flex-end; }
}

/* ============================================================================
   .dispute-alert — prominent red banner shown at the top of job details pages
   (trader + customer) when at least one dispute exists on the job. Client
   feedback: notifications about disputes land the user on job details;
   this banner lets them jump straight to the dispute page from there.
   ========================================================================= */
.dispute-alert {
    display: flex; align-items: center; gap: 14px;
    background: #fef2f2;
    border: 1px solid rgba(220, 38, 38, 0.24);
    border-left: 4px solid #dc2626;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 14px;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.08);
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
}
.dispute-alert-icon {
    width: 42px; height: 42px; border-radius: 12px;
    background: #dc2626;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.dispute-alert-body { flex: 1; min-width: 0; }
.dispute-alert-title {
    font-size: 14.5px; font-weight: 800;
    color: #7f1d1d;
    letter-spacing: -0.1px;
    line-height: 1.3;
}
.dispute-alert-sub {
    font-size: 12.5px;
    color: #991b1b;
    margin-top: 3px;
    line-height: 1.4;
}
.dispute-alert-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: #dc2626;
    color: #fff;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13.5px; font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.28);
    transition: background 0.12s ease, transform 0.08s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
    white-space: nowrap;
}
.dispute-alert-btn:hover {
    background: #b91c1c;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(220, 38, 38, 0.34);
}
.dispute-alert-btn i { font-size: 11px; }

@media (max-width: 575px) {
    .dispute-alert { flex-direction: column; align-items: stretch; text-align: left; }
    .dispute-alert-icon { align-self: flex-start; }
    .dispute-alert-btn { justify-content: center; }
}

/* Direct "View dispute" pill shown in the Payments tab Action column on
   disputed rows — replaces the multi-step dropdown so it's one click. Used
   on both trader (.tjob-page) and customer (.jobd-v2) job details pages. */
.tjob-dispute-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: #dc2626;
    color: #fff !important;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12.5px; font-weight: 700;
    text-decoration: none;
    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.24);
    transition: background 0.12s ease, transform 0.08s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}
.tjob-dispute-pill:hover {
    background: #b91c1c;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(220, 38, 38, 0.32);
}
.tjob-dispute-pill i { font-size: 11px; }

.tjob-dispute-undo {
    display: inline-flex; align-items: center;
    margin-left: 8px;
    color: var(--tb-muted, #64748b);
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}
.tjob-dispute-undo:hover {
    color: var(--tb-primary, #1e40af);
}

/* ============================================================================
   .judgement-panel — rail card shown on job details (trader + customer) once
   an admin has issued a final arbitration judgement. Records the winner side,
   amount, and admin's comment so the losing party has the reason on hand.
   Two shades:
   - .judgement-panel--loss (red border+bg) for the side that lost
   - .judgement-panel--win  (green border+bg) for the side that won
   ========================================================================= */
.judgement-panel {
    background: #fef2f2;
    border: 1px solid rgba(220, 38, 38, 0.24);
    border-left: 4px solid #dc2626;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 3px 10px rgba(220, 38, 38, 0.08);
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
}
.judgement-panel--win {
    background: #ecfdf5;
    border-color: rgba(16, 185, 129, 0.28);
    border-left-color: #059669;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.10);
}
.judgement-panel-head {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 10px;
}
.judgement-panel-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: #dc2626;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.judgement-panel--win .judgement-panel-icon { background: #059669; }
.judgement-panel-eyebrow {
    font-size: 10.5px; font-weight: 800;
    color: #7f1d1d;
    text-transform: uppercase; letter-spacing: 0.4px;
    line-height: 1.2;
}
.judgement-panel--win .judgement-panel-eyebrow { color: #065f46; }
.judgement-panel-verdict {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 15px; font-weight: 800;
    color: #7f1d1d;
    margin-top: 2px;
    letter-spacing: -0.1px;
}
.judgement-panel--win .judgement-panel-verdict { color: #065f46; }
.judgement-panel-flag {
    display: inline-flex; align-items: center;
    background: #dc2626;
    color: #fff;
    font-size: 10.5px; font-weight: 800;
    padding: 2px 9px;
    border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.judgement-panel-flag--ok { background: #059669; }
.judgement-panel-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-top: 1px dashed rgba(220, 38, 38, 0.22);
    font-size: 12.5px;
}
.judgement-panel--win .judgement-panel-row {
    border-top-color: rgba(16, 185, 129, 0.24);
}
.judgement-panel-k {
    color: #991b1b;
    font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.3px;
    font-size: 10.5px;
}
.judgement-panel--win .judgement-panel-k { color: #065f46; }
.judgement-panel-v {
    color: #7f1d1d;
    font-weight: 800;
    font-size: 13.5px;
}
.judgement-panel--win .judgement-panel-v { color: #065f46; }
.judgement-panel-comment {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(220, 38, 38, 0.22);
}
.judgement-panel--win .judgement-panel-comment {
    border-top-color: rgba(16, 185, 129, 0.24);
}
.judgement-panel-comment-label {
    display: block;
    font-size: 10.5px; font-weight: 800;
    color: #991b1b;
    text-transform: uppercase; letter-spacing: 0.3px;
    margin-bottom: 4px;
}
.judgement-panel--win .judgement-panel-comment-label { color: #065f46; }
.judgement-panel-comment-text {
    font-size: 13px;
    color: #7f1d1d;
    line-height: 1.5;
    white-space: pre-line;
    word-break: break-word;
}
.judgement-panel--win .judgement-panel-comment-text { color: #064e3b; }
.judgement-panel-link {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 10px;
    font-size: 12px; font-weight: 800;
    color: #dc2626;
    text-decoration: none;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.judgement-panel--win .judgement-panel-link { color: #059669; }
.judgement-panel-link:hover { text-decoration: underline; }
.judgement-panel-link i { font-size: 10px; }

/* ============================================================================
   .dispv-page — Modern dispute view (customer edit_dispute + trader mirror).
   Preserves every existing JS hook and form action; layers a compact
   3-tab experience with hero, progress strip, chat, and action panel.
   ========================================================================= */
.dispv-page {
    background: var(--tb-bg-soft, #f7f8fb);
    padding: 20px 0 60px;
    font-family: var(--tb-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
}
.dispv-container { max-width: 1180px; }

/* Hero */
.dispv-page .dispv-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-left: 4px solid var(--tb-primary, #1e40af);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.dispv-page .dispv-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 12px; font-weight: 700;
    color: var(--tb-muted, #64748b);
    margin-bottom: 4px;
}
.dispv-page .dispv-hero-eyebrow i {
    color: #dc2626; font-size: 12px;
    background: #fef2f2;
    padding: 4px 6px;
    border-radius: 6px;
}
.dispv-page .dispv-hero-dot { color: var(--tb-line, #e5e7eb); }
.dispv-page .dispv-hero-title {
    margin: 0;
    font-size: 22px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.4px;
    line-height: 1.25;
}
.dispv-page .dispv-hero-sub {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    font-size: 12.5px; color: var(--tb-muted, #64748b);
    margin-top: 6px;
}
.dispv-page .dispv-hero-sub i { color: var(--tb-muted-2, #94a3b8); font-size: 11px; }
.dispv-page .dispv-hero-side {
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
    min-width: 180px;
}
.dispv-page .dispv-hero-amount {
    text-align: right;
}
.dispv-page .dispv-hero-amount-value {
    display: block;
    font-size: 26px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    line-height: 1;
    letter-spacing: -0.4px;
}
.dispv-page .dispv-hero-amount-label {
    display: block;
    font-size: 10.5px; font-weight: 800;
    color: var(--tb-muted, #64748b);
    text-transform: uppercase; letter-spacing: 0.3px;
    margin-top: 3px;
}

/* Status pill */
.dispv-page .dispv-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.3px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.dispv-page .dispv-status-dot {
    width: 6px; height: 6px; border-radius: 50%; display: inline-block;
}
.dispv-page .dispv-status--active {
    background: #fef3c7; color: #92400e; border-color: rgba(217, 119, 6, 0.24);
}
.dispv-page .dispv-status--active .dispv-status-dot {
    background: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18);
}
.dispv-page .dispv-status--wait {
    background: var(--tb-accent-50, #fff7ed); color: var(--tb-accent-600, #ea580c); border-color: rgba(249, 115, 22, 0.24);
}
.dispv-page .dispv-status--wait .dispv-status-dot {
    background: var(--tb-accent, #f97316); box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}
.dispv-page .dispv-status--ok {
    background: #ecfdf5; color: #059669; border-color: rgba(16, 185, 129, 0.24);
}
.dispv-page .dispv-status--ok .dispv-status-dot {
    background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
.dispv-page .dispv-status--inline { font-size: 10.5px; padding: 3px 9px; }

/* Progress strip */
.dispv-page .dispv-progress {
    display: flex; align-items: center; gap: 8px;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 12px;
    padding: 10px 20px;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.dispv-page .dispv-step {
    display: flex; align-items: center; gap: 8px;
    color: var(--tb-muted, #64748b);
    font-size: 12.5px; font-weight: 700;
    flex-shrink: 0;
}
.dispv-page .dispv-step-num {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--tb-line-2, #f1f5f9);
    color: var(--tb-muted, #64748b);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
    flex-shrink: 0;
}
.dispv-page .dispv-step.is-active {
    color: var(--tb-primary, #1e40af);
}
.dispv-page .dispv-step.is-active .dispv-step-num {
    background: var(--tb-primary, #1e40af);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(30, 64, 175, 0.16);
}
.dispv-page .dispv-step.is-done {
    color: var(--tb-primary-700, #1e3a8a);
}
.dispv-page .dispv-step.is-done .dispv-step-num {
    background: var(--tb-primary, #1e40af);
    color: #fff;
}
.dispv-page .dispv-step-line {
    flex: 1; height: 2px;
    background: var(--tb-line-2, #f1f5f9);
    border-radius: 999px;
    min-width: 10px;
}
.dispv-page .dispv-step-line.is-done { background: var(--tb-primary, #1e40af); }

/* Tabs */
.dispv-page .dispv-tabs {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 12px;
    padding: 5px !important;
    gap: 4px !important;
    display: inline-flex !important;
    flex-wrap: wrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    margin-bottom: 14px !important;
}
.dispv-page .dispv-tab {
    display: inline-flex !important; align-items: center; gap: 8px;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--tb-muted, #64748b) !important;
    font-size: 13px !important; font-weight: 700 !important;
    border: 0 !important;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}
.dispv-page .dispv-tab i { font-size: 13px; }
.dispv-page .dispv-tab:hover {
    color: var(--tb-primary, #1e40af) !important;
}
.dispv-page .dispv-tab.active {
    background: var(--tb-primary, #1e40af) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(30, 64, 175, 0.22);
}
.dispv-page .dispv-tab--disabled {
    opacity: 0.5;
    pointer-events: none;
}
.dispv-page .dispv-tab-badge {
    background: var(--tb-accent, #f97316);
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-left: 4px;
}
.dispv-page .dispv-tab.active .dispv-tab-badge {
    background: #fff;
    color: var(--tb-accent-600, #ea580c);
}

/* Grid layout */
.dispv-page .dispv-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}
.dispv-page .dispv-col-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dispv-page .dispv-col-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }

/* Cards */
.dispv-page .dispv-card {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.dispv-page .dispv-card-title {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14.5px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    margin: 0 0 14px;
    letter-spacing: -0.1px;
}
.dispv-page .dispv-card-title i { color: var(--tb-primary, #1e40af); font-size: 13px; }

/* Form fields */
.dispv-page .dispv-field { margin-bottom: 14px; }
.dispv-page .dispv-field:last-child { margin-bottom: 0; }
.dispv-page .dispv-label {
    display: block;
    font-size: 11.5px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    margin-bottom: 5px;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.dispv-page .dispv-input {
    width: 100%;
    padding: 9px 12px !important;
    border: 1.5px solid var(--tb-line, #e5e7eb) !important;
    border-radius: 9px !important;
    font-size: 13.5px !important;
    color: var(--tb-ink, #0b1220) !important;
    background: #fff !important;
    outline: none !important;
    font-family: inherit;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.dispv-page .dispv-input:focus {
    border-color: var(--tb-primary, #1e40af) !important;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1) !important;
}
.dispv-page .dispv-textarea { min-height: 90px; line-height: 1.5; resize: vertical; }
.dispv-page .dispv-error {
    display: block;
    font-size: 12px; color: #dc2626;
    margin-top: 4px;
    font-weight: 600;
}
.dispv-page .dispv-project-link {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    padding: 8px 14px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 13.5px; font-weight: 700;
    border: 1px solid rgba(30, 64, 175, 0.18);
}
.dispv-page .dispv-project-link:hover { background: var(--tb-primary, #1e40af); color: #fff; }
.dispv-page .dispv-milestone-radio {
    display: flex; align-items: center; gap: 10px;
    background: var(--tb-bg-soft, #f7f8fb);
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 500;
}
.dispv-page .dispv-milestone-radio input[type="radio"] {
    accent-color: var(--tb-primary, #1e40af);
    width: 16px; height: 16px;
}
.dispv-page .dispv-milestone-body { display: flex; flex-direction: column; }
.dispv-page .dispv-milestone-body strong {
    font-size: 15px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
}
.dispv-page .dispv-milestone-body small {
    font-size: 11.5px; color: var(--tb-muted, #64748b);
    margin-top: 2px;
}

/* Total card */
.dispv-page .dispv-total-card {
    background: var(--tb-accent-50, #fff7ed);
    border: 1px solid rgba(249, 115, 22, 0.24);
    border-radius: 12px;
    padding: 16px 18px;
    margin-top: 16px;
}
.dispv-page .dispv-total-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px;
}
.dispv-page .dispv-total-label {
    font-size: 12px; font-weight: 800;
    color: var(--tb-accent-600, #ea580c);
    text-transform: uppercase; letter-spacing: 0.3px;
}
.dispv-page .dispv-total-value {
    font-size: 22px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    letter-spacing: -0.3px;
}
.dispv-page .dispv-total-note {
    font-size: 12px; color: var(--tb-ink-2, #334155);
    margin: 6px 0 10px; line-height: 1.4;
}
.dispv-page .dispv-total-caution {
    display: flex; align-items: flex-start; gap: 6px;
    margin-top: 8px;
    padding: 8px 12px;
    background: #fff;
    border-radius: 8px;
    font-size: 11.5px; font-weight: 700;
    color: #7f1d1d;
    border: 1px solid rgba(220, 38, 38, 0.22);
}
.dispv-page .dispv-total-caution i { color: #dc2626; font-size: 12px; margin-top: 1px; }

.dispv-page .dispv-form-actions {
    display: flex; justify-content: flex-end;
    margin-top: 14px;
}

/* Guidance card */
.dispv-page .dispv-guide {
    background: var(--tb-primary-50, #eff6ff);
    border: 1px solid rgba(30, 64, 175, 0.16);
    border-radius: 12px;
    padding: 16px 18px;
}
.dispv-page .dispv-guide-icon {
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--tb-primary, #1e40af);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    margin-bottom: 10px;
}
.dispv-page .dispv-guide h3 {
    margin: 0 0 8px;
    font-size: 13.5px; font-weight: 800;
    color: var(--tb-primary-700, #1e3a8a);
    text-transform: uppercase; letter-spacing: 0.3px;
}
.dispv-page .dispv-guide ul {
    margin: 0; padding: 0; list-style: none;
}
.dispv-page .dispv-guide li {
    font-size: 12.5px; color: var(--tb-ink-2, #334155);
    line-height: 1.5;
    padding: 5px 0;
    border-top: 1px dashed rgba(30, 64, 175, 0.14);
}
.dispv-page .dispv-guide li:first-child { border-top: 0; padding-top: 0; }

/* Info tiles */
.dispv-page .dispv-info-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.dispv-page .dispv-info-tile {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.dispv-page .dispv-info-tile--accent {
    background: var(--tb-accent-50, #fff7ed);
    border-color: rgba(249, 115, 22, 0.24);
}
.dispv-page .dispv-info-k {
    display: block;
    font-size: 10.5px; font-weight: 800;
    color: var(--tb-muted, #64748b);
    text-transform: uppercase; letter-spacing: 0.3px;
}
.dispv-page .dispv-info-tile--accent .dispv-info-k { color: var(--tb-accent-600, #ea580c); }
.dispv-page .dispv-info-v {
    display: block;
    font-size: 15px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    margin-top: 3px;
    line-height: 1.3;
}

/* Description grid */
.dispv-page .dispv-desc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.dispv-page .dispv-desc-card {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.dispv-page .dispv-desc-card--accent {
    border-color: rgba(30, 64, 175, 0.2);
    background: var(--tb-primary-50, #eff6ff);
}
.dispv-page .dispv-desc-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 800;
    color: #7f1d1d;
    text-transform: uppercase; letter-spacing: 0.3px;
    margin-bottom: 6px;
}
.dispv-page .dispv-desc-card--accent .dispv-desc-label {
    color: var(--tb-primary-700, #1e3a8a);
}
.dispv-page .dispv-desc-body {
    font-size: 13px; color: var(--tb-ink-2, #334155);
    line-height: 1.5;
    margin: 0;
    white-space: pre-line;
}

/* Evidence grid */
.dispv-page .dispv-evidence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}
.dispv-page .dispv-evidence-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    display: block;
    background: var(--tb-line-2, #f1f5f9);
    border: 1px solid var(--tb-line, #e5e7eb);
    transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.dispv-page .dispv-evidence-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.09);
}
.dispv-page .dispv-evidence-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.dispv-page .dispv-evidence-download {
    position: absolute; bottom: 6px; right: 6px;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(11, 18, 32, 0.72);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px;
}

/* Chat card */
.dispv-page .dispv-chat-card { padding-top: 16px; }
.dispv-page .dispv-chat-note {
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary-700, #1e3a8a);
    border: 1px solid rgba(30, 64, 175, 0.14);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12.5px;
    line-height: 1.5;
    margin: 0 0 12px;
}
.dispv-page .dispv-chat-composer {
    background: var(--tb-bg-soft, #f7f8fb);
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 12px;
    padding: 8px;
    margin-bottom: 12px;
}
.dispv-page .dispv-chat-composer-row {
    display: flex; align-items: center; gap: 6px;
}
.dispv-page .dispv-chat-input {
    flex: 1;
    padding: 9px 14px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    font-size: 13.5px;
    color: var(--tb-ink, #0b1220);
    outline: none;
}
.dispv-page .dispv-chat-attach {
    width: 38px; height: 38px; border-radius: 10px;
    background: #fff;
    color: var(--tb-primary, #1e40af);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 14px;
    border: 1px solid var(--tb-line, #e5e7eb);
    margin: 0;
    position: relative;
}
.dispv-page .dispv-chat-attach input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%; height: 100%;
}
.dispv-page .dispv-chat-send {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--tb-primary, #1e40af);
    color: #fff;
    border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(30, 64, 175, 0.22);
}
.dispv-page .dispv-chat-send:hover { background: var(--tb-primary-700, #1e3a8a); }

.dispv-page .dispv-chat-list {
    display: flex; flex-direction: column-reverse; gap: 10px;
    max-height: 560px;
    overflow-y: auto;
    padding-right: 4px;
}
.dispv-page .dispv-chat-msg {
    display: flex; align-items: flex-start; gap: 10px;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
}
.dispv-page .dispv-chat-msg--out { flex-direction: row-reverse; }
.dispv-page .dispv-chat-msg-avatar {
    position: relative;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    font-size: 12px; font-weight: 800;
    margin: 0 !important;
}
.dispv-page .dispv-chat-msg-initials {
    position: absolute; inset: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
}
.dispv-page .dispv-chat-msg-avatar img {
    position: relative; z-index: 1;
    width: 100%; height: 100%; object-fit: cover;
}
.dispv-page .dispv-chat-msg-body {
    max-width: 70%;
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.dispv-page .dispv-chat-msg--out .dispv-chat-msg-body {
    background: var(--tb-primary, #1e40af);
    border-color: var(--tb-primary, #1e40af);
    color: #fff;
}
.dispv-page .dispv-chat-msg-name {
    display: block;
    font-size: 12px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    text-decoration: none;
    margin-bottom: 3px;
}
.dispv-page .dispv-chat-msg--out .dispv-chat-msg-name { color: rgba(255, 255, 255, 0.9); }
.dispv-page .dispv-chat-msg-text {
    margin: 0;
    font-size: 13.5px; line-height: 1.45;
    color: var(--tb-ink-2, #334155);
    word-break: break-word;
}
.dispv-page .dispv-chat-msg--out .dispv-chat-msg-text { color: #fff; }
.dispv-page .dispv-chat-msg-attach {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 5px;
    padding: 4px 10px;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    border-radius: 6px;
    font-size: 11.5px; font-weight: 700;
    text-decoration: none;
}
.dispv-page .dispv-chat-msg--out .dispv-chat-msg-attach {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}
.dispv-page .dispv-chat-msg-time {
    display: block;
    font-size: 10.5px; font-weight: 600;
    color: var(--tb-muted-2, #94a3b8);
    margin-top: 4px;
    background: transparent !important;
}
.dispv-page .dispv-chat-msg--out .dispv-chat-msg-time {
    color: rgba(255, 255, 255, 0.7);
    text-align: right;
}
.dispv-page .dispv-chat-empty {
    text-align: center;
    padding: 30px 20px;
    color: var(--tb-muted, #64748b);
}
.dispv-page .dispv-chat-empty i { font-size: 30px; color: var(--tb-muted-2, #94a3b8); }
.dispv-page .dispv-chat-empty p { font-size: 13px; margin: 10px 0 0; }

/* Side actions */
.dispv-page .dispv-actions-card,
.dispv-page .dispv-side-card {
    background: #fff;
    border: 1px solid var(--tb-line, #e5e7eb);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    display: flex; flex-direction: column; gap: 8px;
}
.dispv-page .dispv-actions-head,
.dispv-page .dispv-side-title {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
    text-transform: uppercase; letter-spacing: 0.3px;
    margin-bottom: 4px;
}
.dispv-page .dispv-actions-head i,
.dispv-page .dispv-side-title i { color: var(--tb-primary, #1e40af); font-size: 12px; }

.dispv-page .dispv-side-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 0;
    border-top: 1px dashed var(--tb-line-2, #f1f5f9);
    font-size: 12.5px;
}
.dispv-page .dispv-side-row:first-of-type { border-top: 0; padding-top: 4px; }
.dispv-page .dispv-side-k {
    color: var(--tb-muted, #64748b);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.dispv-page .dispv-side-v {
    color: var(--tb-ink, #0b1220);
    font-weight: 700;
    font-size: 12.5px;
}
.dispv-page .dispv-actions-hint {
    margin: 4px 0 0;
    font-size: 11px; color: var(--tb-muted, #64748b);
    font-style: italic;
    text-align: center;
}

/* Buttons */
.dispv-page .dispv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease;
    background: transparent;
    line-height: 1.2;
}
.dispv-page .dispv-btn--block { width: 100%; }
.dispv-page .dispv-btn--static { cursor: default; pointer-events: none; }
.dispv-page .dispv-btn--primary {
    background: var(--tb-primary, #1e40af);
    color: #fff;
    box-shadow: 0 4px 10px rgba(30, 64, 175, 0.22);
}
.dispv-page .dispv-btn--primary:hover { background: var(--tb-primary-700, #1e3a8a); color: #fff; transform: translateY(-1px); }
.dispv-page .dispv-btn--warning {
    background: var(--tb-accent, #f97316);
    color: #fff;
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.24);
}
.dispv-page .dispv-btn--warning:hover { background: var(--tb-accent-600, #ea580c); color: #fff; transform: translateY(-1px); }
.dispv-page .dispv-btn--ghost {
    background: #fff;
    color: var(--tb-ink-2, #334155);
    border-color: var(--tb-line, #e5e7eb);
}
.dispv-page .dispv-btn--ghost:hover {
    background: var(--tb-bg-soft, #f7f8fb);
    color: var(--tb-primary, #1e40af);
    border-color: var(--tb-primary, #1e40af);
}
.dispv-page .dispv-btn--ok {
    background: #ecfdf5;
    color: #059669;
    border-color: rgba(16, 185, 129, 0.24);
}
.dispv-page .dispv-btn:disabled,
.dispv-page .dispv-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}
.dispv-page .dispv-change-amount { margin-top: 4px; }

/* Arbitration panel */
.dispv-page .dispv-arb {
    padding: 22px 24px;
}
.dispv-page .dispv-arb-head {
    display: flex; align-items: flex-start; gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--tb-line-2, #f1f5f9);
    margin-bottom: 14px;
}
.dispv-page .dispv-arb-icon {
    width: 48px; height: 48px; border-radius: 14px;
    background: #dc2626;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.dispv-page .dispv-arb-head--win .dispv-arb-icon { background: #059669; }
.dispv-page .dispv-arb-eyebrow {
    font-size: 11px; font-weight: 800;
    color: #7f1d1d;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.dispv-page .dispv-arb-head--win .dispv-arb-eyebrow { color: #065f46; }
.dispv-page .dispv-arb-title {
    margin: 3px 0 0;
    font-size: 22px; font-weight: 800;
    color: #7f1d1d;
    letter-spacing: -0.3px;
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
}
.dispv-page .dispv-arb-head--win .dispv-arb-title { color: #065f46; }
.dispv-page .dispv-arb-flag {
    background: #dc2626;
    color: #fff;
    font-size: 11px; font-weight: 800;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.dispv-page .dispv-arb-flag--ok { background: #059669; }
.dispv-page .dispv-arb-comment-label {
    display: block;
    font-size: 11px; font-weight: 800;
    color: var(--tb-muted, #64748b);
    text-transform: uppercase; letter-spacing: 0.3px;
    margin-bottom: 6px;
}
.dispv-page .dispv-arb-comment-text {
    font-size: 14px; color: var(--tb-ink, #0b1220);
    line-height: 1.55;
    white-space: pre-line;
    margin: 0;
}
.dispv-page .dispv-arb-waiting {
    text-align: center;
    padding: 30px 20px;
}
.dispv-page .dispv-arb-waiting-icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--tb-primary-50, #eff6ff);
    color: var(--tb-primary, #1e40af);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 26px;
    margin-bottom: 12px;
}
.dispv-page .dispv-arb-waiting h3 {
    margin: 0 0 6px;
    font-size: 16px; font-weight: 800;
    color: var(--tb-ink, #0b1220);
}
.dispv-page .dispv-arb-waiting p {
    font-size: 13.5px; color: var(--tb-muted, #64748b);
    margin: 0 auto;
    max-width: 380px;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 991px) {
    .dispv-page .dispv-grid { grid-template-columns: 1fr; }
    .dispv-page .dispv-col-side { position: static; }
    .dispv-page .dispv-desc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .dispv-page .dispv-hero { grid-template-columns: 1fr; }
    .dispv-page .dispv-hero-side { flex-direction: row; align-items: center; justify-content: space-between; min-width: 0; }
    .dispv-page .dispv-progress { flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
    .dispv-page .dispv-step-label { display: none; }
    .dispv-page .dispv-tab span { display: none; }
    .dispv-page .dispv-tab i { font-size: 15px; }
    .dispv-page .dispv-tabs { display: flex !important; width: 100%; }
    .dispv-page .dispv-tab { flex: 1; justify-content: center; }
}