/* TrinityFinances · brand stylesheet
 * Palette: deep navy + muted gold + soft surface tones
 */

:root {
    --tf-navy:        #0B1E3F;
    --tf-navy-2:      #0F2A57;
    --tf-gold:        #C9A96E;
    --tf-gold-2:      #B89456;
    --tf-surface:     #F5F7FA;
    --tf-dark:        #0F172A;
    --tf-text:        #0B1E3F;
    --tf-text-muted:  #475569;
    --tf-text-on-dark:#E5E7EB;
    --tf-border:      #E2E8F0;
}

/* Bootstrap overrides */
.btn-primary,
.bg-primary       { background-color: var(--tf-navy) !important; border-color: var(--tf-navy) !important; }
.btn-primary:hover{ background-color: var(--tf-navy-2) !important; border-color: var(--tf-navy-2) !important; }
.btn-outline-primary { color: var(--tf-navy); border-color: var(--tf-navy); }
.btn-outline-primary:hover { background: var(--tf-navy); color:#fff; }
.text-primary     { color: var(--tf-navy) !important; }
a                 { color: var(--tf-navy); text-decoration: none; }
a:hover           { color: var(--tf-gold-2); text-decoration: underline; }

/* Global button styling — sharp, compact, never underlined */
.btn {
    border-radius: 0;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.7rem 1.2rem;
    text-decoration: none !important;
    transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn:hover, .btn:focus, .btn:active { text-decoration: none !important; }
.btn-lg { font-size: 0.95rem; padding: 0.85rem 1.55rem; }
.btn-sm { font-size: 0.78rem; padding: 0.4rem 0.85rem; }

/* Hero CTA buttons — borderless with smooth left→right hover wipe.
   The ::before sits behind the label; on hover it scales from 0 to full width
   along the X axis, anchored to the left. */
.btn-gold,
.btn-light-solid {
    border: 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    z-index: 0;
    transition: color .35s ease, box-shadow .35s ease;
}
.btn-gold::before,
.btn-light-solid::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Gold default → white-bg/gold-text on hover */
.btn-gold {
    background: linear-gradient(135deg, #DCBE82 0%, #C9A96E 50%, #A98847 100%);
    color: var(--tf-navy);
}
.btn-gold::before { background: #fff; }
.btn-gold:hover, .btn-gold:focus {
    color: var(--tf-gold-2);
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.btn-gold:hover::before, .btn-gold:focus::before { transform: scaleX(1); }

/* White default → gold-gradient/white-text on hover */
.btn-light-solid {
    background: #fff;
    color: var(--tf-navy);
}
.btn-light-solid::before {
    background: linear-gradient(135deg, #DCBE82 0%, #C9A96E 50%, #A98847 100%);
}
.btn-light-solid:hover, .btn-light-solid:focus {
    color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}
.btn-light-solid:hover::before, .btn-light-solid:focus::before { transform: scaleX(1); }

/* Typography */
body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: var(--tf-text);
    background: #fff;
}
h1, h2, h3, h4, .display-1, .display-2, .display-3, .display-4 {
    font-family: 'Manrope', 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--tf-navy);
}

/* Navbar (public) */
.tf-navbar {
    background: #fff;
    border-bottom: 1px solid var(--tf-border);
    padding: 0.65rem 0;
    z-index: 1030;
    box-shadow: 0 1px 0 rgba(11,30,63,0.02);
}
.tf-navbar .navbar-brand {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    color: var(--tf-navy);
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    padding: 0;
    margin-right: 1.5rem;
}
.tf-navbar .navbar-brand .brand-text { color: var(--tf-navy); }
.tf-navbar .navbar-brand .brand-accent { color: var(--tf-gold-2); }
.tf-navbar .navbar-brand .glyph {
    display: inline-block;
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 13px solid var(--tf-gold);
    margin-right: 9px;
    vertical-align: middle;
    transform: translateY(-1px);
}
.tf-navbar .nav-link {
    color: var(--tf-text);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.5rem 0.9rem !important;
    position: relative;
    text-decoration: none;
}
.tf-navbar .nav-link:hover,
.tf-navbar .nav-link:focus,
.tf-navbar .nav-link:active { color: var(--tf-gold-2); text-decoration: none; }
.tf-navbar .nav-link.active {
    color: var(--tf-navy);
    font-weight: 600;
}
.tf-navbar .nav-link.active::after {
    content: '';
    position: absolute;
    left: 0.9rem; right: 0.9rem; bottom: 2px;
    height: 2px;
    background: var(--tf-gold);
    border-radius: 2px;
}
.tf-navbar .navbar-toggler {
    border: 1px solid var(--tf-border);
    padding: 0.35rem 0.55rem;
}
.tf-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.15rem rgba(201,169,110,0.25);
}
.tf-navbar .btn-sm { padding: 0.35rem 0.85rem; font-size: 0.88rem; }

/* Language switcher (EN | DE) */
.tf-lang {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding-left: 0.6rem;
    margin-left: 0.4rem;
    border-left: 1px solid var(--tf-border);
}
.tf-lang__btn {
    font-family: 'Manrope', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--tf-text-muted);
    padding: 0.35rem 0.55rem;
    text-decoration: none;
    border-radius: 4px;
    transition: color .15s ease, background .15s ease;
}
.tf-lang__btn:hover { color: var(--tf-gold-2); text-decoration: none; }
.tf-lang__btn.is-active {
    color: var(--tf-navy);
    background: rgba(201,169,110,0.10);
}

/* Mobile collapsed menu spacing */
@media (max-width: 991.98px) {
    .tf-navbar .navbar-collapse {
        padding-top: 0.75rem;
        margin-top: 0.5rem;
        border-top: 1px solid var(--tf-border);
    }
    .tf-navbar .nav-link.active::after { display: none; }
    .tf-navbar .nav-link.active {
        background: rgba(201,169,110,0.08);
        border-radius: 6px;
    }
}

/* Hero */
.tf-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 6rem 0 5rem;
    background-color: var(--tf-dark);
    background-image:
        linear-gradient(125deg, rgba(11,30,63,0.92) 0%, rgba(15,42,87,0.78) 45%, rgba(15,23,42,0.85) 100%),
        url('../img/hero-background.jpg');
    background-size: cover;
    background-position: center 35%;
    background-repeat: no-repeat;
}
/* Soft vignette + gold glow on top of the photo */
.tf-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 20% 100%, rgba(201,169,110,0.10), transparent 55%),
        linear-gradient(180deg, transparent 60%, rgba(11,30,63,0.55) 100%);
    pointer-events: none;
}
.tf-hero::after {
    content: '';
    position: absolute;
    right: -120px; top: -120px;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(201,169,110,0.22), transparent 70%);
    pointer-events: none;
}
.tf-hero > .container { position: relative; z-index: 1; }
.tf-hero h1 {
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.5rem);
    text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.tf-hero p.lead {
    color: var(--tf-text-on-dark);
    max-width: 640px;
    text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}
.tf-hero .tf-badge {
    display: inline-block;
    background: rgba(11,30,63,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--tf-gold);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid rgba(201,169,110,0.45);
    margin-bottom: 1.5rem;
}

/* Sections */
.tf-section { padding: 5rem 0; }
.tf-section.alt { background: var(--tf-surface); }
.tf-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--tf-gold-2);
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

/* Service cards */
.tf-card {
    background: #fff;
    border: 1px solid var(--tf-border);
    border-radius: 14px;
    padding: 2rem;
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tf-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(11,30,63,0.10);
    border-color: var(--tf-gold);
}
.tf-card .icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--tf-navy), var(--tf-navy-2));
    color: var(--tf-gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1.2rem;
}
.tf-card h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.tf-card p  { color: var(--tf-text-muted); margin-bottom: 0; }

/* Horizontal scroll-snap slider (used for testimonials) */
.tf-slider {
    position: relative;
    margin: 0 -1rem;
}
.tf-slider__track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding: 1rem;
    padding: 0.5rem 1rem 1.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;        /* Firefox */
}
.tf-slider__track::-webkit-scrollbar { display: none; }   /* Chrome/Safari */
.tf-slider__slide {
    scroll-snap-align: start;
    flex: 0 0 calc((100% - 3rem) / 3);  /* 3 cards visible at desktop */
    min-height: 100%;
}
@media (max-width: 991.98px) {
    .tf-slider__slide { flex-basis: calc((100% - 1.5rem) / 2); }
}
@media (max-width: 575.98px) {
    .tf-slider__slide { flex-basis: 86%; }
}
/* Soft right-edge fade hints there's more to scroll */
.tf-slider::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 60px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, #fff);
    opacity: 0;
    transition: opacity .3s ease;
}
.tf-slider[data-can-scroll-right="true"]::after { opacity: 1; }

/* Slider controls (chevron buttons) */
.tf-slider-controls {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
}
.tf-slider-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--tf-border);
    background: #fff;
    color: var(--tf-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .15s ease, opacity .25s ease;
    padding: 0;
}
.tf-slider-btn:hover:not(:disabled) {
    background: var(--tf-navy);
    border-color: var(--tf-navy);
    color: var(--tf-gold);
}
.tf-slider-btn:active:not(:disabled) { transform: scale(0.94); }
.tf-slider-btn:disabled { opacity: 0.30; cursor: not-allowed; }

/* Testimonials — modern editorial card with stylized quote glyph + initials avatar */
.tf-testimonial {
    position: relative;
    background: #fff;
    border: 1px solid var(--tf-border);
    border-radius: 14px;
    padding: 2.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tf-testimonial:hover {
    transform: translateY(-3px);
    border-color: var(--tf-gold);
    box-shadow: 0 12px 30px rgba(11,30,63,0.10);
}
.tf-testimonial__mark {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    color: var(--tf-gold);
    opacity: 0.32;
    transition: opacity .25s ease, transform .35s ease;
    pointer-events: none;
}
.tf-testimonial:hover .tf-testimonial__mark {
    opacity: 0.55;
    transform: translateY(-2px);
}
.tf-testimonial__quote {
    color: var(--tf-text);
    font-size: 0.98rem;
    line-height: 1.7;
    margin: 0 0 1.5rem;
    flex: 1;
    position: relative;
    z-index: 1;
    padding-right: 1.5rem; /* keep text clear of the quote glyph */
}
.tf-testimonial__rule {
    width: 36px;
    height: 2px;
    background: var(--tf-gold);
    margin-bottom: 1.25rem;
    transition: width .35s cubic-bezier(0.65, 0, 0.35, 1);
}
.tf-testimonial:hover .tf-testimonial__rule { width: 64px; }
.tf-testimonial__author {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.tf-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tf-navy), var(--tf-navy-2));
    color: var(--tf-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(201,169,110,0.30);
}
.tf-testimonial__name {
    font-weight: 700;
    color: var(--tf-navy);
    font-size: 0.95rem;
    line-height: 1.2;
}
.tf-testimonial__meta {
    color: var(--tf-text-muted);
    font-size: 0.8rem;
    margin-top: 3px;
    letter-spacing: 0.01em;
}

/* Wide variant — horizontal layout (icon | text), used for the bottom-left card */
.tf-card--wide {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.75rem 2rem;
}
.tf-card--wide .icon { margin-bottom: 0; flex-shrink: 0; }
.tf-card--wide h3    { margin-bottom: 0.35rem; }
.tf-card--wide p     { margin-bottom: 0; }

/* Feature card — image background with dark navy overlay, light content on top */
.tf-card-feature {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    color: #fff;
    background-color: var(--tf-navy);
    background-image: url('../img/security-wallet/security-wallet.jpg');
    background-size: cover;
    background-position: center;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    isolation: isolate;
    min-height: 480px;
    transition: transform .25s ease, box-shadow .25s ease;
}
.tf-card-feature::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(11,30,63,0.45) 0%, rgba(11,30,63,0.85) 55%, rgba(15,23,42,0.96) 100%),
        radial-gradient(ellipse at 80% 0%, rgba(201,169,110,0.18), transparent 55%);
}
.tf-card-feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(11,30,63,0.30);
}
.tf-card-feature__content {
    position: relative;
    z-index: 1;
}
.tf-card-feature .tf-eyebrow--gold {
    color: var(--tf-gold);
    margin-bottom: 1rem;
    display: block;
}
.tf-card-feature .icon {
    width: 56px; height: 56px;
    border-radius: 12px;
    background: rgba(201,169,110,0.15);
    border: 1px solid rgba(201,169,110,0.45);
    color: var(--tf-gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.4rem;
}
.tf-card-feature h3 {
    color: #fff;
    font-size: 1.65rem;
    margin: 0 0 0.85rem;
    text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.tf-card-feature p {
    color: var(--tf-text-on-dark);
    margin: 0 0 1.25rem;
    line-height: 1.55;
}
.tf-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
}
.tf-feature-list li {
    color: var(--tf-text-on-dark);
    font-size: 0.92rem;
    padding: 0.4rem 0 0.4rem 1.5rem;
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.tf-feature-list li:first-child { border-top: 0; }
.tf-feature-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 8px; height: 8px;
    transform: translateY(-50%) rotate(45deg);
    border-right: 2px solid var(--tf-gold);
    border-bottom: 2px solid var(--tf-gold);
}

/* Process steps — original card variant (still used on /process.php) */
.tf-step {
    position: relative;
    padding: 1.8rem 1.5rem 1.8rem 4.5rem;
    background: #fff;
    border: 1px solid var(--tf-border);
    border-radius: 12px;
    height: 100%;
}
.tf-step .num {
    position: absolute;
    left: 1.2rem; top: 1.6rem;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--tf-gold);
    color: var(--tf-navy);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    font-family: 'Manrope';
}
.tf-step h4 { font-size: 1.05rem; margin: 0 0 0.4rem; }
.tf-step p  { color: var(--tf-text-muted); margin: 0; font-size: 0.95rem; }

/* Editorial / ghost-numeral process layout (homepage) */
.tf-step-modern {
    position: relative;
    padding: 1.5rem 0 0.5rem;
    isolation: isolate;
    height: 100%;
}
.tf-step-num {
    position: absolute;
    top: -2.4rem;
    left: -0.8rem;
    z-index: 0;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 9.5rem;
    line-height: 1;
    letter-spacing: -0.06em;
    color: var(--tf-navy);
    opacity: 0.07;
    user-select: none;
    pointer-events: none;
    transition: opacity .25s ease, color .25s ease;
}
.tf-step-body {
    position: relative;
    z-index: 1;
    padding-top: 4.5rem;
}
.tf-step-body h4 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.7rem;
    color: var(--tf-navy);
    position: relative;
}
.tf-step-body h4::before {
    content: '';
    display: block;
    width: 32px;
    height: 2px;
    background: var(--tf-gold);
    margin-bottom: 1rem;
}
.tf-step-body p {
    color: var(--tf-text-muted);
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0;
}
.tf-step-modern:hover .tf-step-num {
    color: var(--tf-gold);
    opacity: 0.18;
}

/* Hairline column dividers between steps at desktop, gives it a magazine-grid feel */
@media (min-width: 992px) {
    .tf-process > [class*="col-lg-"] + [class*="col-lg-"] .tf-step-modern {
        border-left: 1px solid var(--tf-border);
        padding-left: 1.75rem;
    }
    .tf-process > [class*="col-lg-"] + [class*="col-lg-"] .tf-step-num {
        left: 0.95rem;
    }
}

/* Stats band — editorial split layout with ghost gold glows + dot-grid texture */
.tf-stats {
    position: relative;
    background: var(--tf-navy);
    color: #fff;
    padding: 5rem 0;
    overflow: hidden;
}
.tf-stats-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 50% 60% at 0% 50%,   rgba(201,169,110,0.12), transparent 60%),
        radial-gradient(ellipse 60% 80% at 100% 100%, rgba(201,169,110,0.08), transparent 60%);
}
.tf-stats-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.55;
    mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

.tf-stats .tf-eyebrow--gold { color: var(--tf-gold); margin-bottom: 0.6rem; }
.tf-stats-heading {
    color: #fff;
    font-size: 1.85rem;
    line-height: 1.2;
    margin-bottom: 0.85rem;
    letter-spacing: -0.01em;
}
.tf-stats-intro {
    color: var(--tf-text-on-dark);
    font-size: 0.95rem;
    line-height: 1.65;
    max-width: 32ch;
    margin: 0;
}

.tf-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.tf-stat {
    padding: 1.75rem 2rem;
    position: relative;
}
/* Hairline dividers — only between cells, never on outer edges */
.tf-stat:nth-child(odd)                              { border-right:  1px solid rgba(255,255,255,0.10); }
.tf-stat:nth-child(1), .tf-stat:nth-child(2)         { border-bottom: 1px solid rgba(255,255,255,0.10); }

.tf-stat-num {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(2.2rem, 3vw, 3.1rem);
    font-weight: 800;
    color: var(--tf-gold);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 0.95rem;
    font-variant-numeric: tabular-nums;
}
.tf-stat-rule {
    width: 36px;
    height: 2px;
    background: var(--tf-gold);
    margin-bottom: 0.95rem;
    transition: width .4s cubic-bezier(0.65, 0, 0.35, 1);
}
.tf-stat:hover .tf-stat-rule { width: 64px; }
.tf-stat-label {
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 0.35rem;
}
.tf-stat-sub {
    color: rgba(229,231,235,0.65);
    font-size: 0.85rem;
    line-height: 1.5;
}

@media (max-width: 767.98px) {
    .tf-stats { padding: 3.5rem 0; }
    .tf-stats-grid { grid-template-columns: 1fr; }
    .tf-stat { padding: 1.5rem 1rem; }
    .tf-stat:nth-child(odd) { border-right: 0; }
    .tf-stat:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.10); }
    .tf-stat:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.10); }
}

/* Trust strip */
.tf-trust {
    background: var(--tf-surface);
    padding: 2.5rem 0;
    border-top: 1px solid var(--tf-border);
    border-bottom: 1px solid var(--tf-border);
}
.tf-trust .label {
    color: var(--tf-text-muted);
    font-size: 0.82rem;
    text-align: center;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.tf-partners {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2.5rem 3.5rem;
}
.tf-partner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    min-width: 80px;
}
/* Icon-only logos (no wordmark): bump height so they read at the same visual weight as wordmarks */
.tf-partner--icon    { height: 60px;  }
.tf-partner--icon-xl { height: 120px; max-width: 130px; }
.tf-partner--icon-xl img { max-width: 130px; }
.tf-partner img {
    height: 100%;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.55;
    transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}
.tf-partner:hover img {
    filter: grayscale(0);
    opacity: 1;
    transform: translateY(-1px);
}
@media (max-width: 575.98px) {
    .tf-partners { gap: 1.75rem 2rem; }
    .tf-partner { height: 28px; }
    .tf-partner img { max-width: 120px; }
}

/* Footer */
.tf-footer {
    background: var(--tf-dark);
    color: var(--tf-text-on-dark);
    padding: 3.5rem 0 1.5rem;
}
.tf-footer h5 { color: #fff; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; }
.tf-footer a { color: var(--tf-text-on-dark); }
.tf-footer a:hover { color: var(--tf-gold); }
.tf-footer .small { color: #94a3b8; }
.tf-footer .disclaimer { font-size: 0.78rem; color: #94a3b8; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #1e293b; }

/* ---------------------------------------------------------------------- */
/* Admin shell (rebuilt: CSS Grid, no Bootstrap row gutters)              */
/* ---------------------------------------------------------------------- */
.tf-admin-body { background: var(--tf-surface); }

.tf-admin {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}

/* Sidebar */
.tf-admin__sidebar {
    background: var(--tf-navy);
    color: #fff;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 5;
}
.tf-admin__sidebar::-webkit-scrollbar { width: 6px; }
.tf-admin__sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 6px; }

.tf-admin__brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.4rem 1.5rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    text-decoration: none;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}
.tf-admin__brand:hover { color: #fff; text-decoration: none; }
.tf-admin__brand .glyph {
    display: inline-block;
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 13px solid var(--tf-gold);
    transform: translateY(-1px);
    flex-shrink: 0;
}
.tf-admin__brand .brand-tag {
    margin-left: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tf-gold);
    padding: 0.2rem 0.45rem;
    border: 1px solid rgba(201,169,110,0.40);
    border-radius: 4px;
}

.tf-admin__nav {
    padding: 1rem 0.75rem;
    flex-grow: 1;
}
.tf-admin__navlabel {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(229,231,235,0.45);
    padding: 0.5rem 0.75rem 0.4rem;
    margin: 1rem 0 0;
}
.tf-admin__navlabel:first-of-type { margin-top: 0; }
.tf-admin__navitem {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    color: rgba(229,231,235,0.78);
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
    position: relative;
}
.tf-admin__navitem .ic { flex-shrink: 0; opacity: 0.85; }
.tf-admin__navitem span { flex-grow: 1; }
.tf-admin__navitem:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
    text-decoration: none;
}
.tf-admin__navitem.is-active {
    background: rgba(201,169,110,0.12);
    color: var(--tf-gold);
}
.tf-admin__navitem.is-active::before {
    content: '';
    position: absolute;
    left: -0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 22px;
    background: var(--tf-gold);
    border-radius: 0 2px 2px 0;
}
.tf-admin__navitem.is-active .ic { opacity: 1; color: var(--tf-gold); }

.tf-admin__badge {
    background: var(--tf-gold);
    color: var(--tf-navy);
    font-style: normal;
    font-weight: 800;
    font-size: 0.7rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    line-height: 1.4;
}

/* Sidebar foot: user card + quick links */
.tf-admin__sidebar-foot {
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 1rem 0.75rem;
}
.tf-admin__user {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.5rem 0.85rem;
}
.tf-admin__avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tf-gold), var(--tf-gold-2));
    color: var(--tf-navy);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.tf-admin__user-info {
    min-width: 0;
    flex-grow: 1;
}
.tf-admin__user-info strong {
    display: block;
    color: #fff;
    font-size: 0.85rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tf-admin__user-info span {
    display: block;
    color: rgba(229,231,235,0.55);
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tf-admin__quicklinks {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 0.5rem;
}
.tf-admin__quicklinks a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.6rem;
    color: rgba(229,231,235,0.65);
    text-decoration: none;
    font-size: 0.8rem;
    border-radius: 6px;
    transition: background .15s ease, color .15s ease;
}
.tf-admin__quicklinks a:hover { background: rgba(255,255,255,0.05); color: #fff; text-decoration: none; }
.tf-admin__quicklinks a.is-danger:hover { color: #FCA5A5; }

/* Main content column */
.tf-admin__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Topbar */
.tf-admin__topbar {
    background: #fff;
    border-bottom: 1px solid var(--tf-border);
    padding: 1rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 4;
}
.tf-admin__crumb {
    color: var(--tf-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0;
    letter-spacing: 0.01em;
}
.tf-admin__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    background: rgba(16,185,129,0.10);
    border: 1px solid rgba(16,185,129,0.30);
    color: #047857;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}
.tf-admin__pill .dot {
    width: 6px; height: 6px;
    background: #10B981;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.20);
    animation: tf-pulse 2.4s ease-in-out infinite;
}
@keyframes tf-pulse {
    0%,100% { box-shadow: 0 0 0 3px rgba(16,185,129,0.20); }
    50%     { box-shadow: 0 0 0 6px rgba(16,185,129,0.05); }
}
.tf-admin__pill:hover { color: #047857; text-decoration: none; }

/* Content area */
.tf-admin__content { padding: 1.75rem; flex: 1; }

/* Page-title block */
.tf-page-title {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.tf-page-title h1 {
    font-size: 1.6rem;
    margin: 0;
    color: var(--tf-navy);
}
.tf-page-subtitle {
    color: var(--tf-text-muted);
    font-size: 0.92rem;
    margin: 0.25rem 0 0;
}

/* KPI cards (modern, gold accent rule on top) */
.tf-kpi-grid { margin-top: 0.25rem; }
.tf-kpi {
    background: #fff;
    border: 1px solid var(--tf-border);
    border-radius: 14px;
    padding: 1.1rem 1.25rem 1.1rem;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tf-kpi:hover {
    transform: translateY(-2px);
    border-color: var(--tf-gold);
    box-shadow: 0 8px 22px rgba(11,30,63,0.08);
}
.tf-kpi__rule {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--tone, var(--tf-gold));
}
.tf-kpi__label {
    color: var(--tf-text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    margin-top: 0.5rem;
}
.tf-kpi__value {
    font-family: 'Manrope', sans-serif;
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--tf-navy);
    line-height: 1;
    margin: 0.55rem 0 0.55rem;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.tf-kpi__link {
    display: inline-flex;
    align-items: center;
    color: var(--tf-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.tf-kpi__link:hover { color: var(--tf-gold-2); text-decoration: none; }
.tf-kpi.is-actionable .tf-kpi__value { color: var(--tf-gold-2); }

/* Data panels (recent cases / inquiries) */
.tf-data-panel { padding: 0; overflow: hidden; }
.tf-data-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--tf-border);
}
.tf-data-panel__head h3 {
    font-size: 1.05rem;
    margin: 0;
    color: var(--tf-navy);
}
.tf-data-panel .table { margin: 0; }
.tf-data-panel .tf-table th {
    background: var(--tf-surface);
    color: var(--tf-text-muted);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    border-bottom: 1px solid var(--tf-border);
    padding: 0.7rem 1.5rem;
}
.tf-data-panel .tf-table td {
    padding: 0.85rem 1.5rem;
    border-bottom: 1px solid var(--tf-border);
    font-size: 0.92rem;
}
.tf-data-panel .tf-table tr:last-child td { border-bottom: 0; }
.tf-code {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    color: var(--tf-navy);
    text-decoration: none;
    letter-spacing: 0.02em;
}
.tf-code:hover { color: var(--tf-gold-2); }

/* Inline client cell — small avatar + name */
.tf-client-cell {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.tf-client-cell__avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tf-navy), var(--tf-navy-2));
    color: var(--tf-gold);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 0.7rem;
    flex-shrink: 0;
}

/* Activity-style feed (recent inquiries) */
.tf-feed {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tf-feed__item {
    display: flex;
    gap: 0.85rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--tf-border);
}
.tf-feed__item:last-child { border-bottom: 0; }
.tf-feed__avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tf-navy), var(--tf-navy-2));
    color: var(--tf-gold);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.tf-feed__body { flex-grow: 1; min-width: 0; }
.tf-feed__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}
.tf-feed__top strong { color: var(--tf-navy); font-size: 0.95rem; }
.tf-feed__meta {
    color: var(--tf-text-muted);
    font-size: 0.78rem;
    margin-top: 0.3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.tf-empty {
    padding: 2rem 1.5rem;
    color: var(--tf-text-muted);
    text-align: center;
    font-size: 0.92rem;
}

/* Settings avatar (admin/settings.php) */
.tf-settings-avatar {
    width: 96px; height: 96px;
    border-radius: 50%;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--tf-navy), var(--tf-navy-2));
    color: var(--tf-gold);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 0 4px rgba(201,169,110,0.18);
}
.tf-settings-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tf-settings-avatar__initials { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.85rem; letter-spacing: 0.04em; }

/* Portfolio header strip (client wallet) */
.tf-portfolio {
    background: linear-gradient(135deg, var(--tf-navy), var(--tf-navy-2));
    color: #fff;
    border-radius: 16px;
    padding: 1.85rem 2rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    position: relative;
    overflow: hidden;
}
.tf-portfolio::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 100% 0%, rgba(201,169,110,0.18), transparent 60%),
        radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: auto, 22px 22px;
    pointer-events: none;
}
.tf-portfolio > * { position: relative; z-index: 1; }
.tf-portfolio__label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(229,231,235,0.7);
    margin: 0 0 0.4rem;
}
.tf-portfolio__value {
    font-family: 'Manrope', sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--tf-gold);
    line-height: 1;
    margin: 0;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.tf-portfolio__sub {
    color: rgba(229,231,235,0.65);
    font-size: 0.85rem;
    margin: 0.45rem 0 0;
}
.tf-portfolio__legend { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tf-portfolio__chip {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--ctone, var(--tf-gold));
    color: #fff;
}

/* Wallet cards — colored per currency (BTC orange, ETH light blue, USDC blue) */
.tf-wallet {
    background: #fff;
    border: 1px solid var(--tf-border);
    border-radius: 16px;
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-top: 4px solid var(--ctone, var(--tf-gold));
    transition: transform .2s ease, box-shadow .2s ease;
    position: relative;
}
.tf-wallet:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(11,30,63,0.10);
}

.tf-wallet__head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.tf-wallet__sym {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--ctone, var(--tf-gold));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}
.tf-wallet__name { flex-grow: 1; min-width: 0; }
.tf-wallet__name strong {
    display: block;
    color: var(--tf-navy);
    font-size: 1rem;
    line-height: 1.2;
}
.tf-wallet__name span {
    display: block;
    font-size: 0.75rem;
    color: var(--tf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 2px;
}
.tf-wallet__frozen {
    color: #2563EB;
    font-size: 1.1rem;
    cursor: help;
}

.tf-wallet__balance { padding: 0.5rem 0; }
.tf-wallet__native {
    font-family: 'Manrope', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--tf-navy);
    letter-spacing: -0.02em;
    line-height: 1.1;
    word-break: break-all;
    font-variant-numeric: tabular-nums;
}
.tf-wallet__native span { color: var(--ctone, var(--tf-gold)); font-size: 0.85rem; margin-left: 0.3rem; }
.tf-wallet__eur {
    color: var(--tf-text-muted);
    font-size: 0.92rem;
    margin-top: 0.25rem;
    font-variant-numeric: tabular-nums;
}

.tf-wallet__actions { display: flex; gap: 0.5rem; }

.tf-wallet__tx {
    border-top: 1px solid var(--tf-border);
    padding-top: 0.85rem;
    margin-top: 0.25rem;
}
.tf-wallet__tx-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--tf-text-muted);
    margin: 0 0 0.6rem;
}
.tf-wallet__tx-empty { color: var(--tf-text-muted); font-size: 0.85rem; margin: 0; }
.tf-wallet__tx-list { list-style: none; padding: 0; margin: 0; }
.tf-wallet__tx-list li {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--tf-border);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.tf-wallet__tx-list li:first-child { border-top: 0; }
.tf-wallet__tx-dir {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
}
.tf-wallet__tx-dir.is-in  { background: rgba(16,185,129,0.10); color: #047857; }
.tf-wallet__tx-dir.is-out { background: rgba(220,38,38,0.10); color: #B91C1C; }
.tf-wallet__tx-amt { color: var(--tf-navy); font-weight: 600; }
.tf-wallet__tx-meta { color: var(--tf-text-muted); font-size: 0.75rem; text-align: right; }

/* Frozen alert + guarantee alert styling */
.tf-frozen-alert { border-left: 4px solid #F59E0B; }
.tf-guarantee-alert { border-left: 4px solid #2563EB; }

/* Admin firm-wallets panel (deposit addresses) */
.tf-fwallet { border-top: 4px solid var(--ctone, var(--tf-gold)); }
.tf-fwallet__head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
}
.tf-fwallet__sym {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--ctone, var(--tf-gold));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}
.tf-fwallet__qr {
    background: #fff;
    border: 1px solid var(--tf-border);
    border-radius: 10px;
    padding: 0.5rem;
    text-align: center;
    margin-bottom: 0.5rem;
}
.tf-fwallet__qr img { display: block; margin: 0 auto; }
.tf-fwallet-addr { font-family: 'Inter', monospace; }

/* Deposit-guarantee modal */
.tf-deposit-modal .modal-content {
    border-radius: 14px;
    border: 0;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(11,30,63,0.35);
}
.tf-deposit-modal .modal-header {
    align-items: center;
    background: linear-gradient(135deg, var(--tf-navy), var(--tf-navy-2));
    color: #fff;
    border-bottom: 0;
    padding: 1.25rem 1.5rem;
}
.tf-deposit-modal .modal-header .modal-title { color: #fff; font-size: 1.1rem; }
.tf-deposit-modal .modal-header .small { color: rgba(229,231,235,0.7); }
.tf-deposit-modal .btn-close {
    filter: invert(1) opacity(0.6);
    transition: filter .2s ease;
}
.tf-deposit-modal .btn-close:hover { filter: invert(1) opacity(1); }
.tf-deposit-modal__sym {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--tf-gold);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.18);
}

.tf-deposit-modal .modal-body { padding: 1.75rem 1.75rem 1.5rem; }

.tf-deposit-modal__qr {
    background: #fff;
    border: 1px solid var(--tf-border);
    border-radius: 14px;
    padding: 0.75rem;
    display: inline-block;
    box-shadow: 0 2px 6px rgba(11,30,63,0.06);
}
.tf-deposit-modal__qr img { display: block; max-width: 100%; height: auto; }

.tf-deposit-modal__dl {
    margin: 0;
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 0.4rem 1rem;
    font-size: 0.92rem;
}
.tf-deposit-modal__dl dt {
    color: var(--tf-text-muted);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    padding-top: 0.25rem;
}
.tf-deposit-modal__dl dd {
    margin: 0;
    color: var(--tf-navy);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--tf-border);
}
.tf-deposit-modal__dl dd:last-of-type { border-bottom: 0; padding-bottom: 0; }
.tf-deposit-modal__dl dd strong {
    font-family: 'Manrope', sans-serif;
    font-size: 1.15rem;
    color: var(--tf-navy);
    letter-spacing: -0.01em;
    display: block;
    margin-bottom: 0.2rem;
}
.tf-deposit-modal__dl input.form-control { font-family: 'Inter', 'SFMono-Regular', monospace; font-size: 0.82rem; }

.tf-deposit-modal__notes {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--tf-border);
    color: var(--tf-text-muted);
}
.tf-deposit-modal__notes p { margin-bottom: 0.4rem; }
.tf-deposit-modal__notes p:last-child { margin-bottom: 0; }

.tf-deposit-modal .modal-footer {
    border-top: 1px solid var(--tf-border);
    padding: 1rem 1.5rem;
    background: var(--tf-surface);
}

@media (max-width: 575.98px) {
    .tf-deposit-modal__dl { grid-template-columns: 1fr; }
    .tf-deposit-modal__dl dd { padding-bottom: 0.85rem; }
}

/* ─────────────────────────────────────────────────────────────────────
   Refined status pills — replaces solid Bootstrap text-bg-* badges
   ───────────────────────────────────────────────────────────────────── */
.tf-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 9px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid transparent;
    background: rgba(11,30,63,0.05);
    color: #4B5563;
    vertical-align: middle;
}
.tf-pill__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    opacity: 0.85;
}
.tf-pill--success { background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.22); color: #047857; }
.tf-pill--warning { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.25); color: #92400E; }
.tf-pill--danger  { background: rgba(220,38,38,0.09);  border-color: rgba(220,38,38,0.22); color: #B91C1C; }
.tf-pill--info    { background: rgba(37,99,235,0.08);  border-color: rgba(37,99,235,0.22); color: #1D4ED8; }
.tf-pill--accent  { background: rgba(201,169,110,0.12); border-color: rgba(201,169,110,0.30); color: #8A6A2C; }
.tf-pill--neutral { background: rgba(11,30,63,0.05);  border-color: rgba(11,30,63,0.10);  color: #4B5563; }

/* ─────────────────────────────────────────────────────────────────────
   Per-wallet admin card (refined layout)
   ───────────────────────────────────────────────────────────────────── */
.tf-wallet-admin {
    border-left: 4px solid var(--ctone, var(--tf-gold));
    padding: 1.1rem 1.2rem 1.2rem;
}
.tf-wallet-admin__head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.tf-wallet-admin__sym {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--ctone, var(--tf-gold));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 10px rgba(0,0,0,0.10);
}
.tf-wallet-admin__title { line-height: 1.25; }
.tf-wallet-admin__title strong {
    display: block;
    color: var(--tf-navy);
    font-family: 'Manrope', sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
}
.tf-wallet-admin__sub {
    display: block;
    font-size: 0.75rem;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 1px;
}

.tf-wallet-admin__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0.85rem;
    padding-bottom: 0.95rem;
    border-bottom: 1px solid rgba(11,30,63,0.08);
}

.tf-wallet-admin__section {
    padding: 0.95rem 0 0.25rem;
    border-bottom: 1px dashed rgba(11,30,63,0.08);
}
.tf-wallet-admin__section:last-child { border-bottom: 0; padding-bottom: 0; }

.tf-wallet-admin__sec-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.65rem;
    gap: 0.5rem;
}
.tf-wallet-admin__sec-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--tf-navy);
}
.tf-wallet-admin__sec-state {
    font-size: 0.72rem;
    color: #6B7280;
    text-align: right;
}

.tf-wallet-admin__field-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #6B7280;
    margin-bottom: 0.3rem;
}

.tf-wallet-admin__textarea {
    margin-bottom: 0.6rem;
    border-radius: 6px;
    font-size: 0.85rem;
}

.tf-wallet-admin__ig .input-group-text {
    background: #F5F7FA;
    border-color: rgba(11,30,63,0.12);
    color: var(--tf-navy);
    font-weight: 600;
    font-size: 0.85rem;
}
.tf-wallet-admin__ig .form-control {
    border-color: rgba(11,30,63,0.12);
    font-variant-numeric: tabular-nums;
}
.tf-wallet-admin__ig .form-control:focus {
    border-color: var(--tf-gold);
    box-shadow: 0 0 0 0.15rem rgba(201,169,110,0.25);
    z-index: 3;
}

.tf-wallet-admin__hint {
    font-size: 0.7rem;
    color: #9CA3AF;
    margin: 0.4rem 0 0;
    text-align: right;
}
.tf-wallet-admin__hint code {
    background: #F3F4F6;
    color: #4B5563;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.85em;
}

.tf-wallet-admin__note {
    background: #F5F7FA;
    border: 1px solid rgba(11,30,63,0.08);
    border-radius: 6px;
    padding: 0.55rem 0.7rem;
    font-size: 0.8rem;
    color: #4B5563;
    margin-bottom: 0.65rem;
    line-height: 1.45;
}
.tf-wallet-admin__note--info {
    background: rgba(201,169,110,0.08);
    border-color: rgba(201,169,110,0.25);
    color: #6B5226;
}
.tf-wallet-admin__note--info strong { color: var(--tf-navy); }

/* ─────────────────────────────────────────────────────────────────────
   Credit-account confirm modal (admin balances)
   ───────────────────────────────────────────────────────────────────── */
.tf-credit-modal { border: 0; border-radius: 14px; overflow: hidden; }
.tf-credit-modal__head {
    background: linear-gradient(135deg, #0B1E3F 0%, #142a55 100%);
    color: #fff;
    border-bottom: 0;
    padding: 1.2rem 1.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.tf-credit-modal__head .modal-title {
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 1.15rem;
}
.tf-credit-modal__head .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: 0.7;
}
.tf-credit-modal__head .btn-close:hover { opacity: 1; }
.tf-credit-modal__eyebrow {
    margin: 0 0 4px;
    font-size: 0.7rem;
    color: var(--tf-gold);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
}

.tf-credit-modal .modal-body { padding: 1.5rem; background: #fff; }

.tf-credit-modal__amount {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #F5F7FA 0%, #EFF3F8 100%);
    border: 1px solid rgba(11,30,63,0.10);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.1rem;
}
.tf-credit-modal__amount-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: #6B7280;
}
.tf-credit-modal__amount-value {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--tf-navy);
    line-height: 1;
}
.tf-credit-modal__amount-cur {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    color: var(--tf-gold);
    font-size: 1.05rem;
    margin-left: 4px;
}

.tf-credit-modal__dl {
    display: grid;
    grid-template-columns: 130px 1fr;
    row-gap: 0.55rem;
    column-gap: 1rem;
    margin: 0;
    padding: 0.5rem 0 0;
}
.tf-credit-modal__dl dt {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6B7280;
    padding-top: 2px;
}
.tf-credit-modal__dl dd {
    margin: 0;
    color: var(--tf-navy);
    font-weight: 600;
    font-size: 0.92rem;
    word-break: break-word;
}

.tf-credit-modal__foot {
    background: #F5F7FA;
    border-top: 1px solid rgba(11,30,63,0.08);
    padding: 1.1rem 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.tf-credit-modal__foot > .btn {
    width: 100%;
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    padding: 0.65rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
}
.tf-credit-modal__primary {
    box-shadow: 0 6px 14px rgba(201,169,110,0.30);
}
.tf-credit-modal__secondary {
    background: #fff;
}
.tf-credit-modal__cancel {
    background: transparent;
    color: #6B7280;
    font-weight: 500;
    font-size: 0.85rem !important;
    border: 0;
    padding: 0.55rem 1rem !important;
    margin-top: 0.15rem !important;
}
.tf-credit-modal__cancel:hover {
    background: rgba(11,30,63,0.04);
    color: var(--tf-navy);
}

@media (max-width: 575.98px) {
    .tf-credit-modal__dl { grid-template-columns: 1fr; row-gap: 0.85rem; }
    .tf-credit-modal__dl dd { padding-bottom: 0.35rem; border-bottom: 1px dashed rgba(11,30,63,0.08); }
    .tf-credit-modal__dl dd:last-child { border-bottom: 0; }
}

/* ─────────────────────────────────────────────────────────────────────
   Legal pages (Privacy, Terms, Imprint)
   ───────────────────────────────────────────────────────────────────── */
.tf-legal__updated {
    background: #F5F7FA;
    border-bottom: 1px solid rgba(11,30,63,0.08);
    padding: 0.95rem 0;
}
.tf-legal__updated-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: #6B7280;
}
.tf-legal__updated-date {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tf-navy);
    font-variant-numeric: tabular-nums;
}

.tf-legal {
    background: #fff;
}
.tf-legal__section {
    padding: 2.4rem 0;
    border-bottom: 1px solid rgba(11,30,63,0.06);
}
.tf-legal__section:first-child { padding-top: 1rem; }
.tf-legal__section:last-child  { border-bottom: 0; }

.tf-legal__heading {
    margin: 0.4rem 0 1rem;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    color: var(--tf-navy);
    font-size: 1.55rem;
    line-height: 1.3;
    scroll-margin-top: 80px;
}

.tf-legal__body {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.78;
    color: #475569;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

.tf-legal__address {
    margin: 0;
    font-style: normal;
    background: #F5F7FA;
    border-left: 3px solid var(--tf-gold);
    padding: 1rem 1.25rem;
    border-radius: 0 8px 8px 0;
}
.tf-legal__line {
    display: block;
    color: #475569;
    font-size: 0.98rem;
    line-height: 1.65;
}
.tf-legal__line--strong {
    color: var(--tf-navy);
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 2px;
}

.tf-legal__contact-strip {
    background: linear-gradient(135deg, #0B1E3F 0%, #142a55 100%);
    color: #fff;
    padding: 2.5rem 0;
}
.tf-legal__contact-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: #fff;
    margin: 0 0 0.4rem;
}
.tf-legal__contact-body {
    color: rgba(255,255,255,0.78);
    font-size: 0.96rem;
}

@media (max-width: 768px) {
    .tf-legal__section { padding: 1.8rem 0; }
    .tf-legal__heading { font-size: 1.3rem; }
    .tf-legal__body { font-size: 0.96rem; line-height: 1.7; text-align: left; }
}

/* ─────────────────────────────────────────────────────────────────────
   Deliverability tips panel (admin/settings.php)
   ───────────────────────────────────────────────────────────────────── */
.tf-mail-tips__list {
    margin: 0;
    padding-left: 1.2rem;
    color: #475569;
    line-height: 1.65;
    font-size: 0.92rem;
}
.tf-mail-tips__list li {
    margin-bottom: 0.6rem;
    padding-left: 0.3rem;
}
.tf-mail-tips__list li::marker { color: var(--tf-gold); font-weight: 700; }
.tf-mail-tips__list strong { color: var(--tf-navy); }
.tf-mail-tips code {
    background: #F3F4F6;
    color: #4B5563;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.9em;
}

/* Per-wallet inline notice (frozen / guarantee / paid) on client wallet card */
.tf-wallet__notice {
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    line-height: 1.45;
}
.tf-wallet__notice strong { display: block; margin-bottom: 2px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.tf-wallet__notice span { color: inherit; opacity: 0.9; }
.tf-wallet__notice--frozen {
    background: rgba(245,158,11,0.10);
    border: 1px solid rgba(245,158,11,0.35);
    color: #92400E;
}
.tf-wallet__notice--guarantee {
    background: rgba(37,99,235,0.08);
    border: 1px solid rgba(37,99,235,0.30);
    color: #1E40AF;
}
.tf-wallet__notice--paid {
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.28);
    color: #047857;
}
.tf-wallet__notice--pending {
    background: rgba(59,130,246,0.08);
    border: 1px solid rgba(59,130,246,0.30);
    color: #1D4ED8;
}
.tf-wallet__notice--rejected {
    background: rgba(220,38,38,0.08);
    border: 1px solid rgba(220,38,38,0.30);
    color: #B91C1C;
}
.tf-rejected-alert { border-left: 4px solid #B91C1C; }

/* Admin deposit-filter pills */
.tf-deposit-filter {
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--tf-border);
    border-radius: 10px;
    padding: 0.25rem;
    gap: 0.15rem;
    flex-wrap: wrap;
}
.tf-deposit-filter__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    color: var(--tf-text-muted);
    text-decoration: none;
    border-radius: 7px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background .15s ease, color .15s ease;
}
.tf-deposit-filter__pill:hover { background: rgba(11,30,63,0.04); color: var(--tf-navy); text-decoration: none; }
.tf-deposit-filter__pill.is-active {
    background: var(--tf-navy);
    color: var(--tf-gold);
}
.tf-deposit-filter__pill em {
    font-style: normal;
    font-weight: 800;
    font-size: 0.72rem;
    background: rgba(0,0,0,0.06);
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    min-width: 22px;
    text-align: center;
}
.tf-deposit-filter__pill.is-active em { background: rgba(201,169,110,0.20); color: var(--tf-gold); }

/* Animated progress steps (admin → create-client modal) */
.tf-progress {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: tfp;
}
.tf-progress li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0.25rem;
    color: var(--tf-text-muted);
    border-top: 1px solid var(--tf-border);
    font-size: 0.95rem;
}
.tf-progress li:first-child { border-top: 0; }
.tf-progress__dot {
    flex-shrink: 0;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid var(--tf-border);
    background: #fff;
    position: relative;
    transition: border-color .25s ease, background .25s ease;
}
.tf-progress li.is-active .tf-progress__dot {
    border-color: var(--tf-gold);
    animation: tf-progress-spin 1s linear infinite;
}
.tf-progress li.is-active .tf-progress__dot::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--tf-gold);
}
@keyframes tf-progress-spin { to { transform: rotate(360deg); } }
.tf-progress li.is-active { color: var(--tf-navy); font-weight: 600; }
.tf-progress li.is-done { color: #047857; }
.tf-progress li.is-done .tf-progress__dot {
    border-color: #10B981;
    background: #10B981;
}
.tf-progress li.is-done .tf-progress__dot::after {
    content: '✓';
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.tf-progress li.is-fail { color: #B91C1C; }
.tf-progress li.is-fail .tf-progress__dot {
    border-color: #DC2626;
    background: #DC2626;
}
.tf-progress li.is-fail .tf-progress__dot::after {
    content: '!';
    color: #fff;
    font-weight: 800;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Currency chip in deposits table */
.tf-deposit-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--ctone, var(--tf-gold));
    color: #fff;
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

/* Frozen overlay corner indicator on the wallet card */
.tf-wallet.is-frozen { box-shadow: inset 0 0 0 1px rgba(245,158,11,0.45); }
.tf-wallet__badge--paid {
    color: #047857;
    background: rgba(16,185,129,0.10);
    border: 1px solid rgba(16,185,129,0.30);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    margin-left: 0.4rem;
}

/* IBAN status pill inside input group */
#tf-iban-status {
    font-weight: 600;
    font-size: 0.85rem;
    transition: background .2s ease, color .2s ease;
    min-width: 88px;
    justify-content: center;
}

/* Backdrop is position:fixed unconditionally so it never claims a CSS-grid
   cell on desktop (which would push the sidebar / main content out of place). */
.tf-admin__backdrop {
    position: fixed; inset: 0;
    background: rgba(11,30,63,.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1050;
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    pointer-events: none;
}
.tf-admin.is-menu-open .tf-admin__backdrop {
    opacity: 1; visibility: visible; pointer-events: auto;
}
@media (min-width: 992px) {
    .tf-admin__backdrop { display: none; }   /* never used on desktop */
}

/* Mobile (≤991.98px): slide-out sidebar drawer */
@media (max-width: 991.98px) {
    .tf-admin { grid-template-columns: 1fr; }
    .tf-admin__sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 280px; max-width: 86vw;
        height: 100vh; max-height: none;
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.16,1,.3,1);
        z-index: 1055;
        overflow-y: auto;
        box-shadow: none;
    }
    .tf-admin.is-menu-open .tf-admin__sidebar {
        transform: translateX(0);
        box-shadow: 4px 0 28px rgba(0,0,0,.28);
    }
    body.tf-noscroll { overflow: hidden; }
}
.tf-admin__menubtn {
    display: none;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: 0; border-radius: 9px;
    background: var(--tf-navy); color: #fff; cursor: pointer;
    margin-right: 12px;
    transition: background .15s, transform .15s;
}
.tf-admin__menubtn:hover { background: var(--tf-navy-2, #0F2A57); }
.tf-admin__menubtn:active { transform: scale(.95); }
@media (max-width: 991.98px) {
    .tf-admin__menubtn { display: inline-flex; }
    .tf-admin__topbar-left { display: flex; align-items: center; }
}

/* Portal/Admin layout */
.tf-app-shell { background: var(--tf-surface); min-height: 100vh; }
.tf-sidebar {
    background: var(--tf-navy);
    color: #fff;
    min-height: 100vh;
    padding: 1.5rem 0;
}
.tf-sidebar .brand {
    font-family: 'Manrope';
    font-weight: 800;
    color: #fff;
    font-size: 1.25rem;
    padding: 0 1.5rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 1rem;
    display: block;
    text-decoration: none;
}
.tf-sidebar .brand .glyph {
    display: inline-block;
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 12px solid var(--tf-gold);
    margin-right: 8px;
}
.tf-sidebar a.nav-item {
    display: flex; align-items: center;
    color: var(--tf-text-on-dark);
    padding: 0.7rem 1.5rem;
    text-decoration: none;
    font-weight: 500;
    border-left: 3px solid transparent;
}
.tf-sidebar a.nav-item:hover {
    background: rgba(255,255,255,0.05);
    color: #fff;
}
.tf-sidebar a.nav-item.active {
    background: rgba(201,169,110,0.10);
    color: var(--tf-gold);
    border-left-color: var(--tf-gold);
}
.tf-sidebar a.nav-item .ic { margin-right: 10px; opacity: 0.85; }

.tf-topbar {
    background: #fff;
    border-bottom: 1px solid var(--tf-border);
    padding: 0.85rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between;
}
.tf-content { padding: 1.5rem; }

.tf-page-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.tf-page-title h1 { font-size: 1.5rem; margin: 0; }

.tf-stat-card {
    background: #fff;
    border: 1px solid var(--tf-border);
    border-radius: 12px;
    padding: 1.25rem;
}
.tf-stat-card .label { color: var(--tf-text-muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; }
.tf-stat-card .value { font-family: 'Manrope'; font-size: 1.7rem; font-weight: 800; color: var(--tf-navy); margin-top: 0.4rem; }

/* Cards */
.tf-panel {
    background: #fff;
    border: 1px solid var(--tf-border);
    border-radius: 12px;
    padding: 1.5rem;
}
.tf-panel h3, .tf-panel h2 { font-size: 1.05rem; margin-top: 0; margin-bottom: 1rem; }

/* Auth shell */
.tf-auth-bg {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--tf-navy) 0%, var(--tf-dark) 100%);
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem;
}
.tf-auth-card {
    background: #fff;
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0,0,0,0.30);
}
.tf-auth-card h1 {
    font-size: 1.5rem;
    margin-bottom: 0.4rem;
}
.tf-auth-card .sub {
    color: var(--tf-text-muted);
    margin-bottom: 1.5rem;
}

/* Timeline */
.tf-timeline { position: relative; padding-left: 1.5rem; }
.tf-timeline::before {
    content: ''; position: absolute; left: 6px; top: 4px; bottom: 4px;
    width: 2px; background: var(--tf-border);
}
.tf-timeline .event {
    position: relative; padding-bottom: 1.25rem;
}
.tf-timeline .event::before {
    content: ''; position: absolute; left: -1.5rem; top: 4px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--tf-gold); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--tf-border);
}
.tf-timeline .event h5 { margin: 0 0 0.2rem; font-size: 1rem; }
.tf-timeline .event .time { color: var(--tf-text-muted); font-size: 0.85rem; }
.tf-timeline .event p { margin: 0.4rem 0 0; color: var(--tf-text-muted); }

/* ---------------------------------------------------------------------- */
/* Services page                                                          */
/* ---------------------------------------------------------------------- */

/* Hero with layered gradient (placeholder until /img/services/hero.jpg exists) */
.tf-svc-hero {
    position: relative;
    color: #fff;
    padding: 6rem 0 5rem;
    overflow: hidden;
    background-color: var(--tf-dark);
    background-image:
        linear-gradient(125deg, rgba(11,30,63,0.92) 0%, rgba(15,42,87,0.78) 45%, rgba(15,23,42,0.95) 100%),
        url('../img/services/hero.jpg');
    background-size: cover;
    background-position: center 35%;
    background-repeat: no-repeat;
}
.tf-svc-hero__bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 60% 60% at 80% 20%, rgba(201,169,110,0.18), transparent 60%),
        radial-gradient(ellipse 50% 60% at 10% 90%, rgba(11,30,63,0.55), transparent 65%);
}
.tf-svc-hero h1 {
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.15;
    margin-bottom: 1rem;
    text-shadow: 0 2px 24px rgba(0,0,0,0.35);
    max-width: 18ch;
}
.tf-svc-hero p.lead {
    color: var(--tf-text-on-dark);
    max-width: 60ch;
}

.tf-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(229,231,235,0.65);
    margin-bottom: 1.5rem;
}
.tf-breadcrumb a { color: rgba(229,231,235,0.85); text-decoration: none; }
.tf-breadcrumb a:hover { color: var(--tf-gold); text-decoration: none; }
.tf-breadcrumb .sep { color: var(--tf-gold); }

/* Sticky pill nav under hero */
.tf-svc-pills {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid var(--tf-border);
    box-shadow: 0 2px 12px rgba(11,30,63,0.04);
}
.tf-svc-pills ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.tf-svc-pills ul::-webkit-scrollbar { display: none; }
.tf-svc-pills li { flex-shrink: 0; }
.tf-svc-pills a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.1rem;
    color: var(--tf-text-muted);
    font-size: 0.92rem;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.tf-svc-pills a:hover {
    color: var(--tf-navy);
    text-decoration: none;
    background: rgba(201,169,110,0.05);
}
.tf-svc-pills a .num {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    color: var(--tf-gold);
    letter-spacing: -0.02em;
}

/* Service block (alternating sections) */
.tf-svc-block {
    padding: 5.5rem 0;
    background: #fff;
    scroll-margin-top: 80px; /* sticky pill nav offset */
}
.tf-svc-block--dark {
    background: var(--tf-navy);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.tf-svc-block--dark::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 0% 100%, rgba(201,169,110,0.08), transparent 60%),
        radial-gradient(ellipse 60% 50% at 100% 0%, rgba(201,169,110,0.06), transparent 60%);
    pointer-events: none;
}
.tf-svc-block--dark > .container { position: relative; z-index: 1; }
.tf-svc-block--dark h2 { color: #fff; }
.tf-svc-block--dark .text-muted,
.tf-svc-block--dark p { color: var(--tf-text-on-dark); }
.tf-svc-block__lead {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--tf-text-on-dark);
}

/* Visual panel (placeholder image card) */
.tf-svc-visual {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 20px 50px rgba(11,30,63,0.18);
    background-color: var(--tf-navy);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.tf-svc-visual::before {
    content: '';
    position: absolute; inset: 0; z-index: 0;
    background:
        linear-gradient(135deg, rgba(11,30,63,0.78) 0%, rgba(15,42,87,0.55) 50%, rgba(15,23,42,0.85) 100%),
        radial-gradient(ellipse 80% 60% at 80% 20%, rgba(201,169,110,0.30), transparent 60%);
}
.tf-svc-step-num {
    position: absolute;
    bottom: 1.2rem;
    left: 1.5rem;
    z-index: 2;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(5rem, 9vw, 8rem);
    font-weight: 800;
    line-height: 1;
    color: var(--tf-gold);
    letter-spacing: -0.05em;
    opacity: 0.45;
    user-select: none;
    pointer-events: none;
}
.tf-svc-visual__chip {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    z-index: 2;
    background: rgba(11,30,63,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(201,169,110,0.35);
    color: var(--tf-gold);
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
/* Per-block subtle SVG patterns: dotted grid for investigation, network nodes for tracer */
.tf-svc-visual--investigation::after {
    content: '';
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    opacity: 0.25;
    background-image: radial-gradient(rgba(201,169,110,0.6) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    mask-image: linear-gradient(135deg, #000 30%, transparent 80%);
    -webkit-mask-image: linear-gradient(135deg, #000 30%, transparent 80%);
}
.tf-svc-visual--tracer::after {
    content: '';
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    opacity: 0.30;
    background-image:
        linear-gradient(45deg,  transparent 49.4%, rgba(201,169,110,0.65) 49.7%, rgba(201,169,110,0.65) 50.3%, transparent 50.6%),
        linear-gradient(-45deg, transparent 49.4%, rgba(201,169,110,0.45) 49.7%, rgba(201,169,110,0.45) 50.3%, transparent 50.6%);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at 60% 50%, #000 40%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 60% 50%, #000 40%, transparent 75%);
}

/* When user drops a real image into /img/services, add a class on the block to use it */
.tf-svc-visual--has-image::before {
    background:
        linear-gradient(135deg, rgba(11,30,63,0.55) 0%, rgba(11,30,63,0.30) 60%, rgba(15,23,42,0.65) 100%);
}
.tf-svc-visual--has-image::after { display: none; }

/* Feature list (split layout, content side) */
.tf-svc-features {
    margin-top: 1.75rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 576px) {
    .tf-svc-features { grid-template-columns: 1fr 1fr; }
}
.tf-svc-feature {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}
.tf-svc-feature__bullet {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(201,169,110,0.15);
    border: 1px solid rgba(201,169,110,0.35);
    color: var(--tf-gold);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800;
    margin-top: 2px;
}
.tf-svc-feature strong { display: block; color: var(--tf-navy); margin-bottom: 2px; }
.tf-svc-block--dark .tf-svc-feature strong { color: #fff; }
.tf-svc-feature > div span { color: var(--tf-text-muted); font-size: 0.9rem; line-height: 1.5; }
.tf-svc-block--dark .tf-svc-feature > div span { color: rgba(229,231,235,0.7); }

/* Mini stat tiles (used on dark Tracer section) */
.tf-svc-mini {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    padding: 0.95rem 1.1rem;
    height: 100%;
}
.tf-svc-mini strong {
    display: block;
    color: var(--tf-gold);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.4rem;
}
.tf-svc-mini span {
    display: block;
    color: rgba(229,231,235,0.85);
    font-size: 0.92rem;
    line-height: 1.45;
}

/* Asset Recovery sub-cards */
.tf-svc-asset {
    background: #fff;
    border: 1px solid var(--tf-border);
    border-radius: 14px;
    padding: 2rem;
    height: 100%;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tf-svc-asset:hover {
    transform: translateY(-3px);
    border-color: var(--tf-gold);
    box-shadow: 0 12px 30px rgba(11,30,63,0.10);
}
.tf-svc-asset__icon {
    width: 56px; height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--tf-navy), var(--tf-navy-2));
    color: var(--tf-gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
}
.tf-svc-asset h3 { font-size: 1.2rem; margin: 0 0 0.7rem; }
.tf-svc-asset > p { color: var(--tf-text-muted); margin-bottom: 1rem; }
.tf-svc-asset ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    border-top: 1px solid var(--tf-border);
    padding-top: 1rem;
}
.tf-svc-asset ul li {
    color: var(--tf-text-muted);
    font-size: 0.88rem;
    padding: 0.35rem 0 0.35rem 1.4rem;
    position: relative;
}
.tf-svc-asset ul li::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 7px; height: 7px;
    border-right: 2px solid var(--tf-gold);
    border-bottom: 2px solid var(--tf-gold);
}

/* Security Wallet feature panel */
.tf-svc-spotlight {
    position: relative;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    padding: 5.5rem 0;
    background-color: var(--tf-navy);
    background-image:
        linear-gradient(125deg, rgba(11,30,63,0.92) 0%, rgba(15,42,87,0.85) 50%, rgba(15,23,42,0.95) 100%),
        url('../img/services/wallet-feature.jpg');
    background-size: cover;
    background-position: center;
}
.tf-svc-spotlight__bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 60% 60% at 80% 20%, rgba(201,169,110,0.18), transparent 60%),
        radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: auto, 24px 24px;
}
.tf-svc-spotlight h2 { color: #fff; max-width: 18ch; }
.tf-svc-spotlight__lead {
    color: var(--tf-text-on-dark);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 60ch;
}
.tf-svc-vault {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(201,169,110,0.30);
    border-radius: 18px;
    padding: 2.5rem 2rem;
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.tf-svc-vault__inner { color: var(--tf-gold); }
.tf-svc-vault__metric {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(201,169,110,0.25);
}
.tf-svc-vault__metric strong {
    display: block;
    color: var(--tf-gold);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 0.3rem;
}
.tf-svc-vault__metric span {
    display: block;
    color: rgba(229,231,235,0.7);
    font-size: 0.85rem;
    margin-bottom: 0.6rem;
}
.tf-svc-vault__metric em {
    display: block;
    font-style: normal;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
}

/* Final CTA panel */
.tf-cta-panel {
    background: linear-gradient(135deg, var(--tf-navy), var(--tf-navy-2));
    color: #fff;
    border-radius: 16px;
    padding: 3.5rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.tf-cta-panel::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(201,169,110,0.18), transparent 60%);
    pointer-events: none;
}
.tf-cta-panel > * { position: relative; z-index: 1; }
.tf-cta-panel h2 { color: #fff; margin-bottom: 0.85rem; }
.tf-cta-panel p { color: var(--tf-text-on-dark); margin-bottom: 1.5rem; }

@media (max-width: 767.98px) {
    .tf-svc-block { padding: 3.5rem 0; }
    .tf-svc-spotlight { padding: 3.5rem 0; }
}

/* ---------------------------------------------------------------------- */
/* Contact page                                                           */
/* ---------------------------------------------------------------------- */

/* Form panel — slightly more substantial than tf-panel default */
.tf-panel--form { padding: 2.25rem; }
.tf-panel--form .tf-eyebrow { margin-bottom: 0.4rem; }

/* Numbered "what happens next" list — gold gradient bullets */
.tf-next {
    list-style: none;
    counter-reset: tf-next;
    padding: 0;
    margin: 0;
}
.tf-next li {
    counter-increment: tf-next;
    position: relative;
    padding: 0.55rem 0 0.55rem 2.4rem;
    border-top: 1px solid var(--tf-border);
    color: var(--tf-text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}
.tf-next li:first-child { border-top: 0; padding-top: 0; }
.tf-next li::before {
    content: counter(tf-next, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.55rem;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--tf-gold);
    letter-spacing: -0.02em;
    line-height: 1.5;
}
.tf-next li:first-child::before { top: 0; }

/* Warning-style panel (gold left rule + warm gold tint) */
.tf-panel--warn {
    border-left: 3px solid var(--tf-gold);
    background: linear-gradient(to right, rgba(201,169,110,0.06), transparent 70%);
}

/* Full-width map section */
.tf-map-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.tf-map {
    width: 100%;
    height: 540px;
    background: #0F172A;
}
.tf-map-card-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
}
.tf-map-card {
    position: relative;
    width: 360px;
    max-width: calc(100% - 2rem);
    background: #fff;
    border: 1px solid var(--tf-border);
    border-left: 4px solid var(--tf-gold);
    border-radius: 14px;
    padding: 1.85rem;
    pointer-events: auto;
    box-shadow: 0 20px 50px rgba(11,30,63,0.25);
}
.tf-map-card .tf-eyebrow { margin-bottom: 0.6rem; }
.tf-map-card__title {
    font-size: 1.2rem;
    color: var(--tf-navy);
    margin: 0 0 0.85rem;
}
.tf-map-card__addr {
    font-style: normal;
    color: var(--tf-text-muted);
    line-height: 1.6;
    font-size: 0.95rem;
    margin: 0 0 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--tf-border);
}
.tf-map-card__addr strong { color: var(--tf-navy); font-weight: 700; }

/* Custom gold pin marker (Leaflet divIcon) */
.tf-map-marker { background: transparent; border: 0; }
.tf-map-marker__pin {
    display: block;
    position: relative;
    width: 24px;
    height: 24px;
    margin-left: 2px;
    background: linear-gradient(135deg, #DCBE82 0%, #C9A96E 50%, #A98847 100%);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 3px solid #fff;
    box-shadow: 0 6px 14px rgba(11,30,63,0.40);
    animation: tf-marker-drop .55s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.tf-map-marker__pin::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 7px; height: 7px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--tf-navy);
}
@keyframes tf-marker-drop {
    0%   { transform: rotate(-45deg) translate3d(0, -160%, 0); opacity: 0; }
    100% { transform: rotate(-45deg) translate3d(0, 0, 0);     opacity: 1; }
}

/* Leaflet attribution polish */
.leaflet-control-attribution {
    background: rgba(255,255,255,0.85) !important;
    font-size: 0.72rem !important;
    color: var(--tf-text-muted) !important;
}

/* Mobile: card flows below map instead of overlay */
@media (max-width: 767.98px) {
    .tf-map { height: 360px; }
    .tf-map-card-wrap {
        position: relative;
        inset: auto;
        margin-top: -2rem;
        z-index: 2;
    }
    .tf-map-card {
        width: 100%;
        max-width: 100%;
    }
}

/* ---------------------------------------------------------------------- */
/* About page                                                             */
/* ---------------------------------------------------------------------- */

/* Centered editorial positioning statement */
.tf-mission { text-align: center; padding: 1rem 0 1.5rem; }
.tf-mission .tf-eyebrow { color: var(--tf-gold-2); margin-bottom: 1.5rem; }
.tf-mission__statement {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    line-height: 1.45;
    color: var(--tf-navy);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 auto;
    max-width: 64ch;
    position: relative;
    padding-top: 1.25rem;
}
.tf-mission__statement::before {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: var(--tf-gold);
    margin: 0 auto 1.5rem;
}

/* "At a glance" definition-list facts */
.tf-facts {
    display: flex;
    flex-direction: column;
    margin: 0;
}
.tf-fact {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--tf-border);
}
.tf-fact:first-child { border-top: 0; padding-top: 0; }
.tf-fact .label {
    color: var(--tf-text-muted);
    font-size: 0.85rem;
}
.tf-fact .value {
    color: var(--tf-navy);
    font-weight: 600;
    font-size: 0.92rem;
    text-align: right;
}

/* Principle cards (4-card grid) */
.tf-principle {
    background: #fff;
    border: 1px solid var(--tf-border);
    border-radius: 14px;
    padding: 1.85rem;
    height: 100%;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tf-principle:hover {
    transform: translateY(-3px);
    border-color: var(--tf-gold);
    box-shadow: 0 12px 30px rgba(11,30,63,0.10);
}
.tf-principle__num {
    font-family: 'Manrope', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--tf-gold);
    letter-spacing: -0.02em;
    line-height: 1;
    padding-bottom: 0.85rem;
    border-bottom: 2px solid var(--tf-gold);
    width: 38px;
    margin-bottom: 1.1rem;
}
.tf-principle h3 {
    font-size: 1.05rem;
    margin: 0 0 0.55rem;
    color: var(--tf-navy);
}
.tf-principle p {
    color: var(--tf-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* Capability counter blocks (on dark band) */
.tf-capability {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    padding: 1.85rem;
    height: 100%;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    transition: border-color .2s ease, transform .2s ease;
}
.tf-capability:hover {
    border-color: rgba(201,169,110,0.40);
    transform: translateY(-2px);
}
.tf-capability__count {
    flex-shrink: 0;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(2.4rem, 3.2vw, 2.9rem);
    font-weight: 800;
    color: var(--tf-gold);
    letter-spacing: -0.04em;
    line-height: 1;
    min-width: 64px;
    padding-right: 1rem;
    border-right: 1px solid rgba(201,169,110,0.30);
    font-variant-numeric: tabular-nums;
}
.tf-capability h4 {
    color: #fff;
    font-size: 1.1rem;
    margin: 0 0 0.45rem;
    font-weight: 700;
}
.tf-capability p {
    color: rgba(229,231,235,0.7);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* Compliance panels */
.tf-compliance {
    background: #fff;
    border: 1px solid var(--tf-border);
    border-radius: 12px;
    padding: 1.4rem 1.4rem 1.4rem 1.6rem;
    height: 100%;
    border-left: 3px solid var(--tf-gold);
    transition: box-shadow .2s ease, transform .2s ease;
}
.tf-compliance:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(11,30,63,0.08);
}
.tf-compliance h5 {
    color: var(--tf-navy);
    font-size: 1rem;
    margin: 0 0 0.5rem;
    font-weight: 700;
}
.tf-compliance p {
    color: var(--tf-text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0;
}

/* ---------------------------------------------------------------------- */
/* Wallet Tracer page                                                     */
/* ---------------------------------------------------------------------- */

/* Animated blockchain trace graph (hero visual) */
.tf-tracer-graph {
    position: relative;
    aspect-ratio: 4 / 2.8;
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--tf-navy);
    background-image:
        linear-gradient(135deg, rgba(11,30,63,1) 0%, rgba(15,42,87,0.95) 50%, rgba(15,23,42,1) 100%);
    box-shadow: 0 20px 50px rgba(11,30,63,0.18);
    padding: 1rem;
}
.tf-tracer-graph::before {
    content: '';
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 80% 60% at 80% 20%, rgba(201,169,110,0.18), transparent 60%),
        radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: auto, 22px 22px;
    mask-image: linear-gradient(135deg, #000 30%, transparent 90%);
    -webkit-mask-image: linear-gradient(135deg, #000 30%, transparent 90%);
}
.tf-tracer-graph svg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
}

/* Numbered flow list (How tracing works) — stacked, flush-left */
.tf-flow {
    list-style: none;
    padding: 0;
    margin: 1.75rem 0 0;
}
.tf-flow li {
    padding: 1.1rem 0;
    border-top: 1px solid var(--tf-border);
}
.tf-flow li:first-child { border-top: 0; padding-top: 0.25rem; }
.tf-flow .tf-flow__num {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--tf-gold);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 0.4rem;
    text-align: left;
}
.tf-flow li > strong {
    display: block;
    font-size: 1rem;
    color: var(--tf-navy);
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.tf-flow li > span:not(.tf-flow__num) {
    display: block;
    color: var(--tf-text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* Coverage panels (chains × counterparty types) */
.tf-coverage {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    padding: 1.75rem;
    height: 100%;
}
.tf-coverage h4 {
    color: var(--tf-gold);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 0 0 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(201,169,110,0.20);
}
.tf-coverage ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tf-coverage ul li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: baseline;
    padding: 0.55rem 0 0.55rem 1.4rem;
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.tf-coverage ul li:first-child { border-top: 0; padding-top: 0; }
.tf-coverage ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.05rem;
    width: 6px; height: 6px;
    transform: rotate(45deg);
    border-right: 2px solid var(--tf-gold);
    border-bottom: 2px solid var(--tf-gold);
}
.tf-coverage ul li:first-child::before { top: 0.5rem; }
.tf-coverage ul li strong {
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
}
.tf-coverage ul li span {
    color: rgba(229,231,235,0.65);
    font-size: 0.85rem;
}

@media (max-width: 767.98px) {
    .tf-tracer-graph { aspect-ratio: 4 / 3.2; }
    .tf-flow li { grid-template-columns: 48px 1fr; }
    .tf-flow__num { font-size: 1.25rem; padding-right: 0.75rem; }
}

/* ---------------------------------------------------------------------- */
/* Process page                                                           */
/* ---------------------------------------------------------------------- */

/* Engagement numbers strip (sits under hero, navy band) */
.tf-process-meta {
    background: var(--tf-navy);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.tf-process-meta::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 0% 50%, rgba(201,169,110,0.10), transparent 60%),
        radial-gradient(ellipse 60% 80% at 100% 50%, rgba(201,169,110,0.06), transparent 60%);
    pointer-events: none;
}
.tf-process-meta .container { position: relative; z-index: 1; }
.tf-process-meta__cell {
    padding: 1.75rem 1.5rem;
    border-right: 1px solid rgba(255,255,255,0.10);
}
.tf-process-meta__cell:last-child { border-right: 0; }
.tf-process-meta__cell .label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(229,231,235,0.65);
}
.tf-process-meta__cell .value {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    font-weight: 800;
    color: var(--tf-gold);
    letter-spacing: -0.02em;
    margin-top: 0.4rem;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 767.98px) {
    .tf-process-meta__cell { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.10); }
    .tf-process-meta__cell:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.10); }
    .tf-process-meta__cell:nth-last-child(-n+2) { border-bottom: 0; }
}

/* Detailed phase blocks */
.tf-process-phases {
    padding: 5.5rem 0;
    background: #fff;
}
.tf-phase {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 2.5rem;
    padding: 3rem 0;
    border-top: 1px solid var(--tf-border);
    scroll-margin-top: 80px;
}
.tf-phase:first-of-type {
    border-top: 0;
    padding-top: 1rem;
}
.tf-phase__num {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    font-weight: 800;
    color: var(--tf-navy);
    line-height: 1;
    letter-spacing: -0.06em;
    position: relative;
    padding-bottom: 1rem;
}
.tf-phase__num::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 2px;
    background: var(--tf-gold);
}
.tf-phase__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}
.tf-phase__head h3 {
    font-size: 1.6rem;
    margin: 0.2rem 0 0;
    color: var(--tf-navy);
}
.tf-phase__chip {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border: 1px solid rgba(201,169,110,0.40);
    background: rgba(201,169,110,0.10);
    color: var(--tf-gold-2);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-radius: 4px;
    white-space: nowrap;
    margin-top: 0.4rem;
}
.tf-phase__lead {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--tf-text-muted);
    margin: 1.25rem 0 0.5rem;
    max-width: 60ch;
}
.tf-phase__sub {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    color: var(--tf-navy);
    font-weight: 700;
    margin: 0 0 0.85rem;
}
.tf-phase__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tf-phase__list li {
    position: relative;
    padding: 0.55rem 0 0.55rem 1.6rem;
    color: var(--tf-text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
    border-top: 1px solid var(--tf-border);
}
.tf-phase__list li:first-child {
    border-top: 0;
    padding-top: 0;
}
.tf-phase__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.05rem;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    border-right: 2px solid var(--tf-gold);
    border-bottom: 2px solid var(--tf-gold);
}
.tf-phase__list li:first-child::before { top: 0.5rem; }

@media (max-width: 767.98px) {
    .tf-process-phases { padding: 3rem 0; }
    .tf-phase {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 2.25rem 0;
    }
    .tf-phase__num { font-size: 3.5rem; padding-bottom: 0.6rem; }
}

/* Honest expectations panels */
.tf-expect {
    background: #fff;
    border: 1px solid var(--tf-border);
    border-radius: 14px;
    padding: 1.75rem;
    height: 100%;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tf-expect:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(11,30,63,0.08);
}
.tf-expect--will:hover { border-color: var(--tf-gold); }
.tf-expect--wont:hover { border-color: #B91C1C; }

.tf-expect h4 {
    font-size: 0.85rem;
    margin: 0 0 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--tf-border);
}
.tf-expect--will h4 { color: var(--tf-navy); }
.tf-expect--wont h4 { color: #B91C1C; }

.tf-expect ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tf-expect ul li {
    padding: 0.55rem 0 0.55rem 1.7rem;
    position: relative;
    color: var(--tf-text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
    border-top: 1px solid var(--tf-border);
}
.tf-expect ul li:first-child { border-top: 0; padding-top: 0; }
.tf-expect ul li::before {
    position: absolute;
    left: 0;
    top: 0.55rem;
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1;
}
.tf-expect--will li::before { content: '✓'; color: var(--tf-gold); }
.tf-expect--wont li::before { content: '✕'; color: #B91C1C; top: 0.6rem; }
.tf-expect ul li:first-child::before { top: 0; }
.tf-expect--wont ul li:first-child::before { top: 0.05rem; }

/* Reusable arrow icon (helper: arrow_icon($size, 'after'|'before')) */
.tf-arrow-icon {
    display: inline-block;
    vertical-align: -2px;
    transition: transform .25s ease;
}
.tf-arrow-icon--after  { margin-left: 0.45em; }
.tf-arrow-icon--before { margin-right: 0.4em; }
a:hover .tf-arrow-icon--after,
.btn:hover .tf-arrow-icon--after  { transform: translateX(3px); }
a:hover .tf-arrow-icon--before,
.btn:hover .tf-arrow-icon--before { transform: translateX(-3px); }

/* Misc */
.tf-status-pill { padding: 0.25rem 0.7rem; border-radius: 999px; font-weight: 600; font-size: 0.78rem; }
hr.tf-divider { border-color: var(--tf-border); margin: 2rem 0; }

/* Faq */
.accordion-button:not(.collapsed) { background: rgba(11,30,63,0.05); color: var(--tf-navy); }
.accordion-button:focus { box-shadow: 0 0 0 0.2rem rgba(201,169,110,0.25); }

@media (max-width: 768px) {
    .tf-hero { padding: 4rem 0 3rem; }
    .tf-section { padding: 3.5rem 0; }
    .tf-sidebar { min-height: auto; }
}

/* ─────────────────────────────────────────────────────────────────────
   Inquiries — preview cell + detail modal
   ───────────────────────────────────────────────────────────────────── */
.tf-inq-preview {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-inq-modal { border: 0; border-radius: 14px; overflow: hidden; }
.tf-inq-modal__head {
    background: linear-gradient(135deg, #0B1E3F 0%, #142a55 100%);
    color: #fff;
    border-bottom: 0;
    padding: 1.25rem 1.5rem;
}
.tf-inq-modal__head .modal-title { color: #fff; font-family: 'Manrope', sans-serif; }
.tf-inq-modal__head .small { color: rgba(255,255,255,0.72) !important; }
.tf-inq-modal__head .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: 0.7;
}
.tf-inq-modal__head .btn-close:hover { opacity: 1; }

.tf-inq-modal__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tf-gold) 0%, #b08e54 100%);
    color: #0B1E3F;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: 'Manrope', sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.tf-inq-modal .modal-body { padding: 1.5rem; background: #fff; }

.tf-inq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem 1.25rem;
}
.tf-inq-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6B7280;
    margin-bottom: 0.25rem;
}
.tf-inq-value {
    display: block;
    color: var(--tf-navy);
    font-weight: 600;
    font-size: 0.95rem;
}
.tf-inq-message {
    background: #F5F7FA;
    border: 1px solid rgba(11,30,63,0.08);
    border-radius: 8px;
    padding: 1rem 1.1rem;
    color: var(--tf-navy);
    font-size: 0.95rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 320px;
    overflow-y: auto;
}
.tf-inq-modal__foot {
    background: #F5F7FA;
    border-top: 1px solid rgba(11,30,63,0.08);
    padding: 1rem 1.5rem;
}

/* ─────────────────────────────────────────────────────────────────────
   Contact form sent popup
   ───────────────────────────────────────────────────────────────────── */
.tf-sent-modal .modal-content {
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(11,30,63,0.28);
    background: #fff;
}
.tf-sent-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    opacity: 0.55;
}
.tf-sent-modal__close:hover { opacity: 1; }
.tf-sent-modal__body {
    text-align: center;
    padding: 2.25rem 1.75rem 1.5rem;
}
.tf-sent-modal__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto 1.1rem;
    background: linear-gradient(135deg, var(--tf-gold) 0%, #b08e54 100%);
    color: #0B1E3F;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px rgba(201,169,110,0.35);
    animation: tfSentPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tf-sent-modal__title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    color: var(--tf-navy);
    font-size: 1.35rem;
    margin: 0 0 0.5rem;
}
.tf-sent-modal__sub {
    color: #6B7280;
    font-size: 0.92rem;
    margin: 0;
    line-height: 1.5;
}
.tf-sent-modal__progress {
    height: 3px;
    background: rgba(11,30,63,0.06);
    overflow: hidden;
}
.tf-sent-modal__progress span {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--tf-gold) 0%, #b08e54 100%);
    transform-origin: left;
    animation: tfSentBar 3.5s linear forwards;
}
@keyframes tfSentPop {
    0%   { transform: scale(0.4); opacity: 0; }
    70%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
}
@keyframes tfSentBar {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* ============================================================
   Auth split-screen (login / register) — "Private Vault"
   ============================================================ */
.tf-authx {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    background: var(--tf-surface);
    font-family: 'Inter', system-ui, sans-serif;
}

/* ---- Left cinematic aside ---- */
.tf-authx__aside {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(2.5rem, 4vw, 4.25rem);
    color: #F4EEE3;
    isolation: isolate;
}
.tf-authx__bg {
    position: absolute; inset: 0; z-index: -3;
    background: url('../img/security-wallet/security-wallet.jpg') center/cover no-repeat;
    transform: scale(1.08);
    animation: tfAuthKen 26s ease-in-out infinite alternate;
    filter: grayscale(0.3) contrast(1.05);
}
@keyframes tfAuthKen {
    from { transform: scale(1.08) translate3d(0,0,0); }
    to   { transform: scale(1.16) translate3d(-1.5%,-2%,0); }
}
.tf-authx__aside::before {        /* navy duotone wash */
    content: ''; position: absolute; inset: 0; z-index: -2;
    background:
      linear-gradient(160deg, rgba(11,30,63,0.78) 0%, rgba(11,30,63,0.90) 45%, rgba(9,20,42,0.97) 100%),
      radial-gradient(130% 80% at 80% 0%, rgba(201,169,110,0.22) 0%, rgba(201,169,110,0) 55%);
}
.tf-authx__aside::after {         /* fine grid + grain */
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.5;
    background-image:
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 40%, transparent 100%);
            mask-image: radial-gradient(120% 90% at 50% 30%, #000 40%, transparent 100%);
}

.tf-authx__brand {
    display: inline-flex; align-items: center; gap: 12px;
    text-decoration: none; color: #fff;
    opacity: 0; animation: tfAuthIn .8s .05s cubic-bezier(.16,1,.3,1) forwards;
}
.tf-authx__brand img { height: clamp(46px, 4vw, 60px); width: auto; display: block; }
.tf-authx__brand-mark {
    width: 0; height: 0;
    border-left: 9px solid transparent; border-right: 9px solid transparent;
    border-bottom: 14px solid var(--tf-gold);
}
.tf-authx__brand-name {
    font-family: 'Manrope', sans-serif; font-weight: 800;
    font-size: 1.15rem; letter-spacing: .04em; color: #fff;
}

.tf-authx__mid { max-width: 30ch; }
.tf-authx__eyebrow {
    display: inline-block;
    font-size: .72rem; font-weight: 600; letter-spacing: .26em;
    text-transform: uppercase; color: var(--tf-gold);
    margin-bottom: 1.4rem;
    opacity: 0; animation: tfAuthIn .8s .18s cubic-bezier(.16,1,.3,1) forwards;
}
.tf-authx__headline {
    font-family: 'Manrope', sans-serif; font-weight: 800;
    font-size: clamp(2.3rem, 3.6vw, 3.5rem);
    line-height: 1.05; letter-spacing: -0.02em; margin: 0;
    color: #F7F2E8;
    opacity: 0; animation: tfAuthIn .9s .28s cubic-bezier(.16,1,.3,1) forwards;
}
.tf-authx__headline em {
    font-style: normal; color: var(--tf-gold);
    position: relative; white-space: nowrap;
}
.tf-authx__headline em::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0.08em; height: 2px;
    background: linear-gradient(90deg, var(--tf-gold), transparent);
    transform: scaleX(0); transform-origin: left;
    animation: tfAuthLine 1s 1s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes tfAuthLine { to { transform: scaleX(1); } }

.tf-authx__foot {
    opacity: 0; animation: tfAuthIn .9s .42s cubic-bezier(.16,1,.3,1) forwards;
}
.tf-authx__rule {
    width: 56px; height: 2px; background: var(--tf-gold);
    margin-bottom: 1.5rem; transform-origin: left;
    animation: tfAuthLine 1.1s .6s cubic-bezier(.16,1,.3,1) both;
}
.tf-authx__quotes { position: relative; min-height: 6.5rem; }
.tf-authx__quote {
    position: absolute; inset: 0;
    opacity: 0; transform: translateY(10px);
    transition: opacity .7s ease, transform .7s ease;
    pointer-events: none;
}
.tf-authx__quote.is-active { opacity: 1; transform: none; }
.tf-authx__quote p {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic; font-weight: 400;
    font-size: clamp(1.15rem, 1.55vw, 1.5rem);
    line-height: 1.45; color: #EFE7D7; margin: 0 0 1rem;
}
.tf-authx__quote p::before { content: '\201C'; color: var(--tf-gold); margin-right: .12em; }
.tf-authx__quote p::after  { content: '\201D'; color: var(--tf-gold); margin-left: .06em; }
.tf-authx__cite {
    font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(244,238,227,0.62); font-weight: 600;
}
.tf-authx__dots { display: flex; gap: 8px; margin-top: 1.6rem; }
.tf-authx__dot {
    width: 22px; height: 3px; border-radius: 2px; border: 0; padding: 0;
    background: rgba(244,238,227,0.25); cursor: pointer; transition: background .3s;
}
.tf-authx__dot.is-active { background: var(--tf-gold); }

/* ---- Right form panel ---- */
.tf-authx__panel {
    position: relative;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 4vw, 4rem) clamp(1.25rem, 4vw, 3.5rem);
}
.tf-authx__panel-inner {
    width: 100%; max-width: 430px;
    opacity: 0; animation: tfAuthIn .8s .35s cubic-bezier(.16,1,.3,1) forwards;
}
.tf-authx__lang {
    position: absolute; top: 1.5rem; right: clamp(1.25rem, 4vw, 3.5rem);
    display: inline-flex; gap: 4px;
}
.tf-authx__lang a {
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    padding: 5px 9px; border-radius: 6px; text-decoration: none;
    color: var(--tf-text-muted); transition: all .2s;
}
.tf-authx__lang a:hover { color: var(--tf-navy); background: rgba(11,30,63,0.05); }
.tf-authx__lang a.is-active { background: var(--tf-navy); color: #fff; }

.tf-authx__mobilebrand { display: none; }

.tf-authx__title {
    font-family: 'Manrope', sans-serif; font-weight: 800;
    font-size: 1.85rem; letter-spacing: -0.02em;
    color: var(--tf-navy); margin: 0 0 .5rem;
}
.tf-authx__sub {
    color: var(--tf-text-muted); font-size: .95rem;
    line-height: 1.6; margin: 0 0 1.9rem;
}
.tf-authx__sub a { color: var(--tf-gold-2); font-weight: 600; text-decoration: none; }
.tf-authx__sub a:hover { text-decoration: underline; }

/* Scoped form refinement */
.tf-authx__panel .form-label {
    font-size: .78rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--tf-navy);
    margin-bottom: .4rem;
}
.tf-authx__panel .form-control,
.tf-authx__panel .form-select {
    border: 1px solid var(--tf-border);
    border-radius: 11px;
    padding: .72rem .9rem;
    font-size: .95rem;
    background: #fff;
    color: var(--tf-navy);
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.tf-authx__panel .form-control::placeholder { color: #9AA7B8; }
.tf-authx__panel .form-control:focus,
.tf-authx__panel .form-select:focus {
    border-color: var(--tf-gold);
    box-shadow: 0 0 0 4px rgba(201,169,110,0.16);
    background: #fff; outline: none;
}
.tf-authx__panel .input-group .form-select { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tf-authx__panel .input-group .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tf-authx__panel .form-text { font-size: .78rem; color: #8492A6; margin-top: .4rem; }

.tf-authx__panel .btn-primary {
    --bs-btn-bg: transparent;
    background: linear-gradient(135deg, var(--tf-gold) 0%, var(--tf-gold-2) 100%);
    border: 0; color: var(--tf-navy);
    font-family: 'Manrope', sans-serif; font-weight: 700;
    letter-spacing: .02em; font-size: .95rem;
    padding: .82rem 1rem; border-radius: 11px;
    box-shadow: 0 10px 24px -8px rgba(184,148,86,0.6);
    transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s;
}
.tf-authx__panel .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -10px rgba(184,148,86,0.7);
    color: var(--tf-navy);
}
.tf-authx__panel .btn-primary:active { transform: translateY(0); }

.tf-authx__switch {
    text-align: center; margin-top: 1.4rem;
    font-size: .88rem; color: var(--tf-text-muted);
}
.tf-authx__switch a { color: var(--tf-navy); font-weight: 700; text-decoration: none; }
.tf-authx__switch a:hover { color: var(--tf-gold-2); }
.tf-authx__home {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 1.6rem; font-size: .82rem; color: #94A3B8;
    text-decoration: none; transition: color .2s;
}
.tf-authx__home:hover { color: var(--tf-navy); }

.tf-authx .alert { border-radius: 11px; font-size: .9rem; }

@keyframes tfAuthIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .tf-authx { grid-template-columns: 1fr; }
    .tf-authx__aside { display: none; }
    .tf-authx__panel { min-height: 100vh; align-items: flex-start; }
    .tf-authx__panel-inner { margin: 4.5rem auto; }
    .tf-authx__mobilebrand {
        display: flex; align-items: center; gap: 10px;
        margin-bottom: 2rem;
    }
    .tf-authx__mobilebrand .tf-authx__brand-mark { border-bottom-color: var(--tf-gold); }
    .tf-authx__mobilebrand span {
        font-family: 'Manrope', sans-serif; font-weight: 800;
        font-size: 1.15rem; color: var(--tf-navy); letter-spacing: .03em;
    }
}
@media (prefers-reduced-motion: reduce) {
    .tf-authx__bg { animation: none; }
    .tf-authx [class*="tf-authx__"] { animation-duration: .01ms !important; }
}

/* ============================================================
   Client withdrawal — modern multi-step flow
   ============================================================ */
.tf-wd { max-width: 920px; }
.tf-wd__step { margin-bottom: 1.75rem; }
.tf-wd__step-head { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; }
.tf-wd__step-head h3 { margin: 0; font-size: 1.05rem; }
.tf-wd__num {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--tf-navy); color: #fff;
    font-size: .82rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}

/* Wallet cards */
.tf-wd__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tf-wd-card {
    --ctone: var(--tf-gold);
    text-align: left; cursor: pointer;
    background: #fff; border: 1.5px solid var(--tf-border);
    border-radius: 16px; padding: 18px 18px 16px;
    display: flex; flex-direction: column; gap: 4px;
    position: relative; overflow: hidden;
    transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s, border-color .18s;
}
.tf-wd-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--ctone);
}
.tf-wd-card:not(:disabled):hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -14px rgba(11,30,63,.35);
    border-color: var(--ctone);
}
.tf-wd-card.is-active {
    border-color: var(--ctone);
    box-shadow: 0 0 0 3px var(--csoft, rgba(201,169,110,.15));
}
.tf-wd-card.is-disabled { cursor: not-allowed; opacity: .62; }
.tf-wd-card.is-blocked::before { background: #E4B53C; }
.tf-wd-card__top { display: flex; justify-content: space-between; align-items: center; }
.tf-wd-card__sym {
    font-family: 'Manrope', sans-serif; font-weight: 800; font-size: .82rem;
    letter-spacing: .08em; color: var(--ctone);
    background: var(--csoft, rgba(201,169,110,.12)); padding: 3px 9px; border-radius: 6px;
}
.tf-wd-card__lock { color: #B7791F; display: inline-flex; }
.tf-wd-card__name { font-size: .82rem; color: var(--tf-text-muted); margin-top: 6px; }
.tf-wd-card__bal {
    font-family: 'Manrope', sans-serif; font-weight: 800;
    font-size: 1.45rem; color: var(--tf-navy); line-height: 1.1;
}
.tf-wd-card__bal i { font-style: normal; font-size: .9rem; color: var(--tf-text-muted); font-weight: 600; }
.tf-wd-card__eur { font-size: .8rem; color: var(--tf-text-muted); }
.tf-wd-card__tag {
    position: absolute; top: 14px; right: 14px;
    font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: #B7791F; background: rgba(228,181,60,.15); padding: 3px 8px; border-radius: 5px;
}
.tf-wd-card__tag--ok { color: #0F7B4F; background: rgba(16,185,129,.14); }

/* Step 2 panel */
.tf-wd__panel { background: #fff; border: 1px solid var(--tf-border); border-radius: 16px; padding: 1.4rem 1.5rem; }
.tf-wd__field { margin-bottom: 1.4rem; }
.tf-wd__field:last-child { margin-bottom: 0; }
.tf-wd__field .form-label { font-size: .82rem; font-weight: 600; color: var(--tf-navy); }

.tf-wd__amount { position: relative; display: flex; align-items: center; }
.tf-wd__amount .form-control {
    padding: .8rem 7.5rem .8rem .9rem;
    font-size: 1.15rem; font-family: 'Manrope', sans-serif; font-weight: 700;
    border-radius: 11px; border: 1px solid var(--tf-border);
}
.tf-wd__amount .form-control:focus { border-color: var(--tf-gold); box-shadow: 0 0 0 4px rgba(201,169,110,.15); }
.tf-wd__cur-badge {
    position: absolute; right: 4.6rem; font-weight: 700; color: var(--tf-text-muted); font-size: .9rem;
}
.tf-wd__max {
    position: absolute; right: .5rem; border: 0; background: var(--tf-navy); color: #fff;
    font-size: .72rem; font-weight: 700; letter-spacing: .05em;
    padding: .4rem .7rem; border-radius: 7px; cursor: pointer;
}
.tf-wd__max:hover { background: var(--tf-navy-2, #0F2A57); }
.tf-wd__err { color: #B91C1C; font-size: .82rem; margin-top: .45rem; }
.tf-wd__addbtn {
    border: 0; background: none; color: var(--tf-gold-2);
    font-size: .82rem; font-weight: 700; cursor: pointer; padding: 0;
}
.tf-wd__addbtn:hover { text-decoration: underline; }
.tf-wd__addbox {
    background: var(--tf-surface); border: 1px dashed var(--tf-border);
    border-radius: 11px; padding: 1rem; margin-bottom: .9rem;
}

/* Trusted address rows */
.tf-wd__addrlist { display: flex; flex-direction: column; gap: 8px; }
.tf-wd-addr {
    display: flex; align-items: center; gap: 12px;
    border: 1.5px solid var(--tf-border); border-radius: 11px;
    padding: .75rem .9rem; cursor: pointer; transition: border-color .15s, background .15s;
}
.tf-wd-addr:hover { border-color: var(--tf-gold); }
.tf-wd-addr input { accent-color: var(--tf-gold-2); width: 16px; height: 16px; flex: 0 0 auto; }
.tf-wd-addr__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tf-wd-addr__label { font-weight: 700; font-size: .88rem; color: var(--tf-navy); }
.tf-wd-addr__val {
    font-family: 'SFMono-Regular', Menlo, monospace; font-size: .78rem;
    color: var(--tf-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tf-wd-addr__check { color: var(--tf-gold-2); font-weight: 800; opacity: 0; transition: opacity .15s; }
.tf-wd-addr:has(input:checked) {
    border-color: var(--tf-gold);
    background: rgba(201,169,110,.07);
}
.tf-wd-addr:has(input:checked) .tf-wd-addr__check { opacity: 1; }
.tf-wd__empty { color: var(--tf-text-muted); font-size: .85rem; margin: .6rem 0 0; }

.tf-wd__submit {
    margin-top: 1.4rem; width: 100%;
    background: linear-gradient(135deg, var(--tf-gold) 0%, var(--tf-gold-2) 100%);
    border: 0; color: var(--tf-navy); font-family: 'Manrope', sans-serif; font-weight: 700;
    padding: .85rem 1rem; border-radius: 11px; font-size: .95rem;
    box-shadow: 0 10px 24px -8px rgba(184,148,86,.55); transition: transform .15s, box-shadow .15s, opacity .15s;
}
.tf-wd__submit:hover:not(:disabled) { transform: translateY(-2px); color: var(--tf-navy); }
.tf-wd__submit:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* History */
.tf-wd__history { display: flex; flex-direction: column; gap: 10px; }
.tf-wd__hrow {
    display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
    background: #fff; border: 1px solid var(--tf-border); border-radius: 12px; padding: .85rem 1rem;
}
.tf-wd__hsym {
    --ctone: var(--tf-gold);
    font-family: 'Manrope', sans-serif; font-weight: 800; font-size: .74rem;
    color: #fff; background: var(--ctone); padding: 5px 8px; border-radius: 6px; letter-spacing: .05em;
}
.tf-wd__hmain { display: flex; flex-direction: column; min-width: 0; }
.tf-wd__hmain strong { font-size: .98rem; color: var(--tf-navy); }
.tf-wd__hdest {
    font-family: 'SFMono-Regular', Menlo, monospace; font-size: .76rem;
    color: var(--tf-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tf-wd__hmeta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.tf-wd__hnote { grid-column: 1 / -1; font-size: .8rem; color: var(--tf-text-muted); border-top: 1px dashed var(--tf-border); padding-top: .5rem; }
.tf-wd__hnote--err { color: #B91C1C; }

@media (max-width: 768px) {
    .tf-wd__cards { grid-template-columns: 1fr; }
}

/* Live presence badge (admin clients list) */
.tf-live {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: #94A3B8; background: rgba(148,163,184,.12);
    padding: 3px 8px; border-radius: 999px; vertical-align: middle;
}
.tf-live__dot { width: 7px; height: 7px; border-radius: 50%; background: #94A3B8; }
.tf-live.is-live { color: #0F7B4F; background: rgba(16,185,129,.14); }
.tf-live.is-live .tf-live__dot {
    background: #10B981; box-shadow: 0 0 0 0 rgba(16,185,129,.6);
    animation: tfLivePulse 1.8s infinite;
}
@keyframes tfLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.55); }
    70%  { box-shadow: 0 0 0 7px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* Admin-impersonation banner (client portal) */
.tf-imp-banner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    background: linear-gradient(135deg, #0B1E3F 0%, #0F2A57 100%);
    color: #F4EEE3; border: 1px solid rgba(201,169,110,.4);
    border-radius: 11px; padding: .7rem 1rem; margin-bottom: 1rem;
    font-size: .9rem;
}
.tf-imp-banner a {
    color: var(--tf-navy); background: var(--tf-gold);
    font-weight: 700; text-decoration: none;
    padding: .35rem .8rem; border-radius: 7px; font-size: .82rem; white-space: nowrap;
}
.tf-imp-banner a:hover { background: var(--tf-gold-2); }

/* ============================================================
   Client KYC verification — modern layout + drag-drop slots
   ============================================================ */
.tf-kyc { max-width: 1080px; }
.tf-kyc__progress {
    background: #fff; border: 1px solid var(--tf-border); border-radius: 14px;
    padding: 18px 22px; margin-bottom: 18px;
}
.tf-kyc__progress-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 10px; }
.tf-kyc__eyebrow {
    margin: 0 0 4px; font-size: .68rem; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: var(--tf-gold-2);
}
.tf-kyc__status { margin: 0; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--tf-navy); }
.tf-kyc__pct { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 2rem; color: var(--tf-navy); line-height: 1; }
.tf-kyc__bar { height: 6px; background: var(--tf-surface); border-radius: 99px; overflow: hidden; }
.tf-kyc__bar span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--tf-gold) 0%, var(--tf-gold-2) 100%);
    border-radius: 99px; transition: width .6s cubic-bezier(.16,1,.3,1);
}

.tf-kyc__why {
    display: flex; gap: 14px; align-items: flex-start;
    background: rgba(11,30,63,0.04); border: 1px solid rgba(11,30,63,0.08);
    border-left: 3px solid var(--tf-navy);
    border-radius: 12px; padding: 14px 18px; margin-bottom: 22px;
    color: var(--tf-text-muted); font-size: .9rem; line-height: 1.55;
}
.tf-kyc__why svg { color: var(--tf-navy); flex: 0 0 auto; margin-top: 2px; }
.tf-kyc__why strong { color: var(--tf-navy); }

/* Grid */
.tf-kyc__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 22px; }
@media (max-width: 900px) { .tf-kyc__grid { grid-template-columns: 1fr; } }

/* Slot card */
.tf-kyc-slot {
    background: #fff; border: 1px solid var(--tf-border); border-radius: 16px;
    padding: 20px 22px; display: flex; flex-direction: column;
    transition: border-color .18s, box-shadow .18s;
}
.tf-kyc-slot.is-approved { background: linear-gradient(180deg, rgba(16,185,129,0.05) 0%, #fff 100%); border-color: rgba(16,185,129,.35); }
.tf-kyc-slot.is-rejected { border-color: rgba(220,38,38,.35); }
.tf-kyc-slot.is-pending  { border-color: rgba(245,158,11,.4); }

.tf-kyc-slot__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.tf-kyc-slot__head h3 {
    margin: 0 0 4px; font-size: 1rem; line-height: 1.3; color: var(--tf-navy);
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.tf-kyc-slot__req, .tf-kyc-slot__opt {
    font-size: .64rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; padding: 3px 8px; border-radius: 5px;
}
.tf-kyc-slot__req { color: #B91C1C; background: rgba(220,38,38,.10); }
.tf-kyc-slot__opt { color: var(--tf-text-muted); background: rgba(11,30,63,.06); }
.tf-kyc-slot__sub { margin: 0; font-size: .82rem; color: var(--tf-text-muted); line-height: 1.5; }
.tf-kyc-slot__badge { flex: 0 0 auto; }

.tf-kyc-slot__approved {
    display: flex; align-items: center; gap: 14px;
    background: rgba(16,185,129,.10); border-radius: 11px; padding: 14px 16px;
    color: #047857;
}
.tf-kyc-slot__approved svg { flex: 0 0 auto; }
.tf-kyc-slot__approved strong { color: #065F46; display: block; font-size: .98rem; }

.tf-kyc-slot__pending {
    background: rgba(245,158,11,.10); border-radius: 11px; padding: 10px 14px;
    color: #92400E; font-size: .85rem; margin-bottom: 12px;
}
.tf-kyc-slot__reject {
    background: rgba(220,38,38,.08); border-radius: 11px; padding: 10px 14px;
    color: #B91C1C; font-size: .85rem; margin-bottom: 12px;
}

/* Drop zone */
.tf-kyc-drop {
    display: block; cursor: pointer; position: relative;
    border: 2px dashed var(--tf-border); border-radius: 12px;
    padding: 28px 18px; text-align: center;
    background: var(--tf-surface);
    transition: border-color .18s, background .18s, transform .15s;
    outline: none;
}
.tf-kyc-drop:hover { border-color: var(--tf-gold); background: rgba(201,169,110,.06); }
.tf-kyc-drop:focus-visible { box-shadow: 0 0 0 3px rgba(201,169,110,.30); }
.tf-kyc-drop.is-dragover {
    border-color: var(--tf-gold-2); background: rgba(201,169,110,.13);
    transform: scale(1.01);
}
.tf-kyc-drop.has-file { border-style: solid; border-color: var(--tf-gold); background: #fff; }
.tf-kyc-drop.is-error { border-color: rgba(220,38,38,.55); background: rgba(220,38,38,.05); }

.tf-kyc-drop__icon { color: var(--tf-text-muted); margin-bottom: 6px; }
.tf-kyc-drop:hover .tf-kyc-drop__icon, .tf-kyc-drop.is-dragover .tf-kyc-drop__icon { color: var(--tf-gold-2); }
.tf-kyc-drop__title {
    margin: 0; font-family: 'Manrope', sans-serif; font-weight: 700;
    color: var(--tf-navy); font-size: .95rem;
}
.tf-kyc-drop__sub { margin: 4px 0 0; font-size: .8rem; color: var(--tf-text-muted); }
.tf-kyc-drop__link { color: var(--tf-gold-2); font-weight: 700; }

.tf-kyc-drop__chosen {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    text-align: left;
}
.tf-kyc-drop__file { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tf-kyc-drop__file svg { color: var(--tf-gold-2); flex: 0 0 auto; }
.tf-kyc-drop__meta { min-width: 0; }
.tf-kyc-drop__name {
    display: block; color: var(--tf-navy); font-size: .9rem; max-width: 26ch;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tf-kyc-drop__size { font-size: .76rem; color: var(--tf-text-muted); }
.tf-kyc-drop.is-error .tf-kyc-drop__name { color: #B91C1C; }
.tf-kyc-drop__remove {
    border: 0; background: rgba(11,30,63,.06); color: var(--tf-text-muted);
    width: 28px; height: 28px; border-radius: 7px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.tf-kyc-drop__remove:hover { background: rgba(220,38,38,.12); color: #B91C1C; }

/* Submit row */
.tf-kyc__submit {
    background: #fff; border: 1px solid var(--tf-border); border-radius: 14px;
    padding: 16px 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px;
    position: sticky; bottom: 12px;
    box-shadow: 0 12px 26px -16px rgba(11,30,63,.45);
}
.tf-kyc__tip { margin: 0; font-size: .85rem; color: var(--tf-text-muted); max-width: 60ch; }
.tf-kyc__btn {
    background: linear-gradient(135deg, var(--tf-gold) 0%, var(--tf-gold-2) 100%);
    border: 0; color: var(--tf-navy); font-family: 'Manrope', sans-serif; font-weight: 700;
    padding: .8rem 1.2rem; border-radius: 11px; font-size: .92rem;
    box-shadow: 0 10px 22px -8px rgba(184,148,86,.5); transition: transform .15s, box-shadow .15s, opacity .15s;
    display: inline-flex; align-items: center; gap: 8px;
}
.tf-kyc__btn:hover:not(:disabled) { transform: translateY(-2px); color: var(--tf-navy); }
.tf-kyc__btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.tf-kyc__btn-count {
    background: rgba(11,30,63,.18); color: var(--tf-navy);
    font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 99px;
    min-width: 22px; text-align: center;
}
@media (max-width: 640px) {
    .tf-kyc__submit { flex-direction: column; align-items: stretch; }
    .tf-kyc__btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Toast notifications (replaces inline alert bars site-wide)
   ============================================================ */
.tf-toasts {
    position: fixed; top: 18px; right: 18px;
    z-index: 1080;
    display: flex; flex-direction: column; gap: 10px;
    max-width: calc(100vw - 36px); width: 380px;
    pointer-events: none;
}
.tf-toast {
    pointer-events: auto;
    display: grid; grid-template-columns: 38px 1fr 28px; align-items: center; gap: 10px;
    background: #fff;
    border: 1px solid var(--tf-border);
    border-left: 4px solid var(--tf-navy);
    border-radius: 12px;
    padding: 12px 12px 12px 14px;
    box-shadow: 0 18px 40px -14px rgba(11,30,63,.35), 0 4px 12px rgba(11,30,63,.10);
    transform: translateX(120%); opacity: 0;
    transition: transform .42s cubic-bezier(.16,1,.3,1), opacity .3s ease;
    font-size: .91rem; line-height: 1.45;
    color: var(--tf-navy);
}
.tf-toast.is-show { transform: translateX(0); opacity: 1; }
.tf-toast__icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--tf-navy);
    background: rgba(11,30,63,.08);
}
.tf-toast__icon svg { width: 18px; height: 18px; }
.tf-toast__msg { font-weight: 500; word-wrap: break-word; }
.tf-toast__close {
    border: 0; background: transparent;
    color: var(--tf-text-muted); cursor: pointer;
    width: 28px; height: 28px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.tf-toast__close:hover { background: rgba(11,30,63,.07); color: var(--tf-navy); }

.tf-toast--success { border-left-color: #10B981; }
.tf-toast--success .tf-toast__icon { color: #047857; background: rgba(16,185,129,.13); }
.tf-toast--error { border-left-color: #DC2626; }
.tf-toast--error .tf-toast__icon { color: #B91C1C; background: rgba(220,38,38,.12); }
.tf-toast--warning { border-left-color: #F59E0B; }
.tf-toast--warning .tf-toast__icon { color: #B45309; background: rgba(245,158,11,.15); }
.tf-toast--info { border-left-color: #3B82F6; }
.tf-toast--info .tf-toast__icon { color: #1D4ED8; background: rgba(59,130,246,.13); }

@media (max-width: 540px) {
    .tf-toasts { top: 10px; right: 10px; left: 10px; width: auto; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tf-toast { transition: none; }
}

/* ============================================================
   Wallet -> EUR conversion card (Security Wallet sidebar)
   Full-height (matches the 2x2 wallet grid on the left) with a
   submit button anchored to the bottom of the card.
   ============================================================ */
.tf-wallet-layout > .col-lg-4 { display: flex; flex-direction: column; }
.tf-convert > form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.tf-convert {
    --ctone: #1F6FEB;
    background: #fff; border: 1px solid var(--tf-border); border-radius: 16px;
    padding: 24px 24px 22px;
    display: flex; flex-direction: column;
    box-shadow: 0 8px 22px -16px rgba(11,30,63,.4);
    width: 100%; flex: 1;
}

/* ── Header ─────────────────────────────────────────── */
.tf-convert__head {
    display: flex; gap: 14px; align-items: flex-start;
    padding-bottom: 18px; margin-bottom: 18px;
    border-bottom: 1px solid var(--tf-border);
}
.tf-convert__icon {
    width: 42px; height: 42px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(31,111,235,0.10); color: var(--ctone); flex: 0 0 auto;
}
.tf-convert__title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.15rem; margin: 0 0 4px; color: var(--tf-navy); }
.tf-convert__sub   { margin: 0; font-size: .82rem; color: var(--tf-text-muted); line-height: 1.5; }

/* ── Form fields ────────────────────────────────────── */
.tf-convert__field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.tf-convert__field .form-label {
    font-size: .72rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--tf-text-muted); margin: 0;
}

.tf-convert__sources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tf-convert__src {
    --ctone: var(--tf-gold);
    position: relative; cursor: pointer;
    border: 1.5px solid var(--tf-border); border-radius: 10px;
    padding: 10px 6px 9px; text-align: center;
    transition: border-color .15s, background .15s, transform .15s;
    display: flex; flex-direction: column; gap: 5px; align-items: center;
}
.tf-convert__src:hover { border-color: var(--ctone); }
.tf-convert__src input { position: absolute; opacity: 0; pointer-events: none; }
.tf-convert__src-pill {
    font-family: 'Manrope', sans-serif; font-weight: 800; letter-spacing: .05em;
    font-size: .72rem; color: var(--ctone); background: rgba(0,0,0,.05);
    padding: 3px 8px; border-radius: 5px;
}
.tf-convert__src-bal { font-size: .76rem; color: var(--tf-navy); font-weight: 600; word-break: break-all; line-height: 1.25; }
.tf-convert__src:has(input:checked) { border-color: var(--ctone); background: rgba(0,0,0,.02); }
.tf-convert__src:has(input:checked) .tf-convert__src-pill { color: #fff; background: var(--ctone); }

.tf-convert__amount { position: relative; display: flex; align-items: center; }
.tf-convert__amount .form-control {
    padding: .8rem 4.4rem .8rem .9rem;
    font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.1rem;
    border-radius: 10px;
}
.tf-convert__amount .form-control:focus { border-color: var(--tf-gold); box-shadow: 0 0 0 4px rgba(201,169,110,.15); }
.tf-convert__max {
    position: absolute; right: .5rem; border: 0; background: var(--tf-navy); color: #fff;
    font-size: .7rem; font-weight: 700; letter-spacing: .05em;
    padding: .4rem .75rem; border-radius: 7px; cursor: pointer;
}
.tf-convert__max:hover { background: var(--tf-navy-2, #0F2A57); }
.tf-convert__hint { margin: 0; font-size: .78rem; color: var(--tf-text-muted); }
.tf-convert__hint strong { color: var(--tf-navy); }

/* ── Conversion preview block ──────────────────────── */
.tf-convert__preview {
    background: linear-gradient(180deg, rgba(31,111,235,0.05) 0%, var(--tf-surface) 100%);
    border: 1px solid var(--tf-border); border-radius: 12px;
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 10px;
    margin-bottom: 22px;
}
.tf-convert__preview-row {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: .82rem; color: var(--tf-text-muted);
}
.tf-convert__preview-row strong {
    font-family: 'Manrope', sans-serif; font-weight: 800;
    color: var(--tf-navy); font-size: 1.08rem; letter-spacing: -0.01em;
}
.tf-convert__preview-row--eur strong { color: #1F6FEB; font-size: 1.18rem; }
.tf-convert__preview-arrow {
    align-self: center; color: var(--tf-gold-2); font-size: 1.1rem; line-height: 1;
    background: rgba(201,169,110,.12);
    width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.tf-convert__preview-rate {
    margin: 6px 0 0; padding-top: 10px;
    border-top: 1px dashed var(--tf-border);
    font-size: .74rem; color: var(--tf-text-muted); text-align: right;
}

.tf-convert__empty {
    background: var(--tf-surface); border: 1px dashed var(--tf-border);
    border-radius: 10px; padding: 16px;
    flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
}

/* Submit anchored to the bottom of the card */
.tf-convert__submit {
    margin-top: auto;
    background: linear-gradient(135deg, var(--tf-gold) 0%, var(--tf-gold-2) 100%);
    border: 0; color: var(--tf-navy);
    font-family: 'Manrope', sans-serif; font-weight: 700;
    padding: .95rem 1.1rem; border-radius: 11px; font-size: .95rem;
    box-shadow: 0 12px 24px -10px rgba(184,148,86,.55);
    transition: transform .15s, opacity .15s, box-shadow .15s;
    letter-spacing: .01em;
}
.tf-convert__submit:hover:not(:disabled) {
    transform: translateY(-2px); color: var(--tf-navy);
    box-shadow: 0 16px 30px -12px rgba(184,148,86,.7);
}
.tf-convert__submit:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

@media (max-width: 992px) {
    .tf-wallet-layout > .col-lg-4 { display: block; }
    .tf-convert { flex: none; }
    .tf-convert__submit { margin-top: 6px; }
}

/* Per-wallet "reserved in pending withdrawals" footnote */
.tf-wallet__reserved {
    margin-top: 8px;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 600; color: #B45309;
    background: rgba(245,158,11,0.10);
    border: 1px solid rgba(245,158,11,0.22);
    padding: 4px 9px; border-radius: 999px;
    line-height: 1.3;
}
.tf-wallet__reserved svg { color: #B45309; flex: 0 0 auto; }

/* ============================================================
   Topbar user menu (admin + portal)
   Replaces the old .tf-admin__sidebar-foot with a dropdown.
   ============================================================ */
.tf-admin__topbar-right { display: flex; align-items: center; gap: 12px; }
.tf-admin__topbar { gap: 12px; }

.tf-userbtn { position: relative; }
.tf-userbtn__btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: transparent; border: 1px solid transparent;
    border-radius: 11px; padding: 4px 10px 4px 4px;
    color: var(--tf-navy); cursor: pointer; transition: background .15s, border-color .15s;
    line-height: 1.2;
}
.tf-userbtn__btn:hover, .tf-userbtn__btn[aria-expanded="true"] {
    background: rgba(11,30,63,.05);
    border-color: rgba(11,30,63,.10);
}
.tf-userbtn__avatar {
    width: 34px; height: 34px; min-width: 34px; border-radius: 50%;
    background: var(--tf-gold); color: var(--tf-navy);
    font-family: 'Manrope', sans-serif; font-weight: 800; font-size: .78rem; letter-spacing: .02em;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    line-height: 1;              /* keeps initials vertically centred — no inherited 1.5 leak */
    text-transform: uppercase;
    overflow: hidden;
}
.tf-userbtn__avatar--lg {
    width: 46px; height: 46px; min-width: 46px;   /* min-width prevents flex shrink */
    font-size: .92rem;
}
.tf-userbtn__info { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.tf-userbtn__info strong {
    font-size: .82rem; font-weight: 700; color: var(--tf-navy); line-height: 1.15;
    max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tf-userbtn__info span {
    font-size: .72rem; color: var(--tf-text-muted); line-height: 1.15;
    max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tf-userbtn__chev { color: var(--tf-text-muted); flex: 0 0 auto; }

.tf-userdrop {
    border: 1px solid var(--tf-border);
    border-radius: 12px;
    padding: 6px;
    min-width: 260px;
    box-shadow: 0 18px 40px -12px rgba(11,30,63,.25), 0 4px 12px rgba(11,30,63,.10);
}
.tf-userdrop__head {
    padding: 10px 12px 8px;
}
.tf-userdrop__head strong {
    display: block; font-size: .92rem; color: var(--tf-navy);
    font-weight: 700; line-height: 1.25; margin-bottom: 2px;
}
.tf-userdrop__head span {
    display: block; font-size: .78rem; color: var(--tf-text-muted);
    line-height: 1.3; word-break: break-all;
}

.tf-userdrop__item {
    display: flex; align-items: center; gap: 10px;
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--tf-navy); font-size: .88rem; font-weight: 500;
}
.tf-userdrop__item:hover, .tf-userdrop__item:focus {
    background: rgba(201,169,110,.10); color: var(--tf-navy);
}
.tf-userdrop__item svg { color: var(--tf-text-muted); flex: 0 0 auto; }
.tf-userdrop__item:hover svg { color: var(--tf-gold-2); }
.tf-userdrop__item--danger { color: #B91C1C; }
.tf-userdrop__item--danger svg { color: #DC2626; }
.tf-userdrop__item--danger:hover, .tf-userdrop__item--danger:focus {
    background: rgba(220,38,38,.08); color: #991B1B;
}

/* On narrow screens (≤640px), collapse the user button to just avatar+chevron */
@media (max-width: 640px) {
    .tf-userbtn__info { display: none; }
    .tf-userbtn__btn { padding: 3px 6px 3px 3px; }
    .tf-userdrop { min-width: 240px; }
}

/* ============================================================
   Dashboard polish (admin) — KPI icons + Live Now panel
   ============================================================ */
.tf-kpi { position: relative; }
.tf-kpi__icon {
    --tone: var(--tf-gold);
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--tone);
    background: color-mix(in srgb, var(--tone) 13%, transparent);
}
/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .tf-kpi__icon { background: rgba(11,30,63,.08); }
}

.tf-livepanel {
    background: linear-gradient(135deg, #0B1E3F 0%, #0F2A57 100%);
    color: #F4EEE3; border-radius: 14px;
    padding: 14px 18px 16px;
    box-shadow: 0 10px 26px -16px rgba(11,30,63,.45);
}
.tf-livepanel__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tf-livepanel__dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #34D399;
    box-shadow: 0 0 0 4px rgba(52,211,153,.25);
    animation: tfLiveBlink 1.6s ease-in-out infinite;
    flex: 0 0 auto;
}
@keyframes tfLiveBlink { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.tf-livepanel__title {
    margin: 0; font-family: 'Manrope', sans-serif; font-weight: 800;
    font-size: .92rem; color: #fff; letter-spacing: .04em; text-transform: uppercase;
}
.tf-livepanel__count {
    margin-left: auto; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
    color: rgba(244,238,227,.65); text-transform: uppercase;
}
.tf-livepanel__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.tf-livepanel__item {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px; padding: 5px 12px 5px 6px;
    color: #F4EEE3; text-decoration: none;
    transition: background .15s, border-color .15s, transform .15s;
}
.tf-livepanel__item:hover {
    background: rgba(201,169,110,.2);
    border-color: rgba(201,169,110,.45);
    color: #fff; transform: translateY(-1px);
}
.tf-livepanel__avatar {
    position: relative;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--tf-gold); color: var(--tf-navy);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Manrope', sans-serif; font-weight: 800; font-size: .68rem;
    flex: 0 0 auto;
}
.tf-livepanel__pulse {
    position: absolute; right: -1px; bottom: -1px;
    width: 9px; height: 9px; border-radius: 50%;
    background: #34D399; border: 2px solid #0B1E3F;
}
.tf-livepanel__name { font-size: .84rem; font-weight: 600; line-height: 1.2; }

/* Make the KYC status pill fit the KPI value slot */
.tf-kpi__value--badge { font-size: 1rem; padding-top: .4rem; line-height: 1; }
.tf-kpi__value--badge .tf-pill { font-size: .82rem; }

/* ============================================================
   Admin Balances — modernized credit form + recent-credits feed
   ============================================================ */
.tf-kpi__value--eur { font-size: 1.55rem; }

/* Per-currency totals strip */
.tf-bal-totals { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 4px; }
.tf-bal-totals__chip {
    --ctone: var(--tf-gold); --csoft: rgba(201,169,110,.10);
    display: inline-flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid var(--tf-border); border-radius: 12px;
    padding: 10px 16px;
    box-shadow: 0 2px 6px -2px rgba(11,30,63,.08);
}
.tf-bal-totals__sym {
    width: 36px; height: 36px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--csoft); color: var(--ctone);
    font-family: 'Manrope', sans-serif; font-weight: 800; font-size: .76rem; letter-spacing: .04em;
}
.tf-bal-totals__chip strong {
    display: block; font-family: 'Manrope', sans-serif; font-weight: 800;
    color: var(--tf-navy); font-size: 1rem; line-height: 1.2;
}
.tf-bal-totals__chip span { font-size: .76rem; color: var(--tf-text-muted); }

/* Credit card shell */
.tf-credit-card {
    background: #fff; border: 1px solid var(--tf-border); border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 8px 22px -16px rgba(11,30,63,.4);
}
.tf-credit-card__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--tf-border); }
.tf-credit-card__head--feed { display: block; }
.tf-credit-card__icon {
    width: 40px; height: 40px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(201,169,110,.12); color: var(--tf-gold-2); flex: 0 0 auto;
}
.tf-credit-card__title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.05rem; margin: 0 0 3px; color: var(--tf-navy); }
.tf-credit-card__sub { margin: 0; font-size: .82rem; color: var(--tf-text-muted); line-height: 1.5; }

/* Steps — every child takes the full row inside the credit card.
   Reset the legacy .tf-step padding (which had 4.5rem left padding for an
   absolute-positioned number circle on /process.php) so fields sit flush
   inside the card with symmetric left/right whitespace. */
.tf-credit-card .tf-step {
    padding: 16px 18px;
    height: auto;
    margin-bottom: 14px;
}
.tf-step__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tf-step > *:not(.tf-step__head) { width: 100%; box-sizing: border-box; }
.tf-step .row { margin-left: 0; margin-right: 0; }
.tf-step .row > [class*="col-"] { padding-left: 4px; padding-right: 4px; }
.tf-step .row > [class*="col-"]:first-child { padding-left: 0; }
.tf-step .row > [class*="col-"]:last-child  { padding-right: 0; }
.tf-step__n {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--tf-navy); color: #fff;
    font-size: .72rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.tf-step .form-label { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tf-navy); }

/* Client picker (autocomplete) */
.tf-clientpicker { position: relative; }
.tf-clientpicker__input { border-radius: 10px; padding: .65rem .85rem; }
.tf-clientpicker__input:focus { border-color: var(--tf-gold); box-shadow: 0 0 0 4px rgba(201,169,110,.15); }
.tf-clientpicker__list {
    list-style: none; margin: 4px 0 0; padding: 6px;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    background: #fff; border: 1px solid var(--tf-border); border-radius: 11px;
    box-shadow: 0 14px 28px -10px rgba(11,30,63,.25); max-height: 280px; overflow-y: auto;
}
.tf-clientpicker__opt {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 9px; border-radius: 8px; cursor: pointer;
}
.tf-clientpicker__opt:hover { background: rgba(201,169,110,.12); }
.tf-clientpicker__avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--tf-gold); color: var(--tf-navy);
    font-family: 'Manrope', sans-serif; font-weight: 800; font-size: .72rem;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; text-transform: uppercase; flex: 0 0 auto;
}
.tf-clientpicker__optmeta { display: flex; flex-direction: column; min-width: 0; }
.tf-clientpicker__optmeta strong { color: var(--tf-navy); font-size: .9rem; line-height: 1.2; }
.tf-clientpicker__optmeta span  { color: var(--tf-text-muted); font-size: .76rem; }

.tf-clientpicker__selected {
    display: flex; align-items: center; gap: 10px;
    background: var(--tf-surface); border: 1px solid var(--tf-border); border-radius: 11px;
    padding: 8px 10px;
}
.tf-clientpicker__meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tf-clientpicker__meta strong { color: var(--tf-navy); font-size: .9rem; line-height: 1.2; }
.tf-clientpicker__meta span  { color: var(--tf-text-muted); font-size: .76rem; word-break: break-all; }
.tf-clientpicker__clear {
    background: transparent; border: 0; cursor: pointer; color: var(--tf-text-muted);
    width: 26px; height: 26px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; transition: background .15s, color .15s;
}
.tf-clientpicker__clear:hover { background: rgba(220,38,38,.10); color: #B91C1C; }

/* Client current balances chips */
.tf-clientbal { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--tf-border); border-radius: 10px; background: var(--tf-surface); }
.tf-clientbal__label { margin: 0 0 6px; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tf-text-muted); }
.tf-clientbal__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tf-clientbal__chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid var(--tf-border); border-radius: 999px;
    padding: 3px 10px 3px 4px;
    font-size: .8rem; font-weight: 600; color: var(--tf-navy);
}
.tf-clientbal__chip i {
    font-style: normal; font-family: 'Manrope', sans-serif; font-weight: 800;
    font-size: .68rem; letter-spacing: .04em;
    background: var(--tf-navy); color: #fff; padding: 2px 7px; border-radius: 999px;
}
.tf-clientbal__chip.is-neg { color: #B91C1C; }
.tf-clientbal__empty { font-size: .8rem; color: var(--tf-text-muted); }

/* Amount input + currency chips */
.tf-credit-amount { position: relative; display: flex; align-items: center; margin-bottom: 12px; }
.tf-credit-amount .form-control {
    padding-right: 4.6rem;
    font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.15rem;
    border-radius: 10px;
}
.tf-credit-amount .form-control:focus { border-color: var(--tf-gold); box-shadow: 0 0 0 4px rgba(201,169,110,.15); }
.tf-credit-amount__badge {
    position: absolute; right: .55rem;
    background: var(--tf-navy); color: #fff;
    font-family: 'Manrope', sans-serif; font-weight: 800;
    font-size: .72rem; letter-spacing: .04em;
    padding: .35rem .65rem; border-radius: 7px;
}

.tf-curchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tf-curchip {
    --ctone: var(--tf-gold);
    position: relative; cursor: pointer;
    border: 1.5px solid var(--tf-border); border-radius: 9px;
    padding: 5px 11px;
    font-family: 'Manrope', sans-serif; font-weight: 700;
    font-size: .76rem; color: var(--tf-navy);
    transition: all .15s;
}
.tf-curchip input { position: absolute; opacity: 0; pointer-events: none; }
.tf-curchip:hover { border-color: var(--ctone); }
.tf-curchip.is-active { background: var(--ctone); color: #fff; border-color: var(--ctone); }

.tf-credit-preview {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--tf-surface); border: 1px solid var(--tf-border); border-radius: 10px;
    padding: 10px 14px;
    font-size: .85rem; color: var(--tf-text-muted);
}
.tf-credit-preview strong { font-family: 'Manrope', sans-serif; font-weight: 800; color: var(--tf-navy); font-size: 1.1rem; }

/* Big submit button */
.tf-credit-card__submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; border: 0;
    background: linear-gradient(135deg, var(--tf-gold) 0%, var(--tf-gold-2) 100%);
    color: var(--tf-navy); font-family: 'Manrope', sans-serif; font-weight: 700;
    padding: .9rem 1.1rem; border-radius: 11px; font-size: .94rem;
    box-shadow: 0 12px 24px -10px rgba(184,148,86,.55);
    transition: transform .15s, box-shadow .15s, opacity .15s;
    cursor: pointer;
}
.tf-credit-card__submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(184,148,86,.7); }
.tf-credit-card__submit:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Recent-credits feed */
.tf-credit-filter { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.tf-credit-filter__search { position: relative; flex: 1; min-width: 200px; }
.tf-credit-filter__search svg {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--tf-text-muted);
}
.tf-credit-filter__search input {
    width: 100%;
    background: var(--tf-surface); border: 1px solid var(--tf-border); border-radius: 9px;
    padding: .5rem .9rem .5rem 2.1rem;
    font-size: .88rem; color: var(--tf-navy);
}
.tf-credit-filter__search input:focus { border-color: var(--tf-gold); outline: none; box-shadow: 0 0 0 3px rgba(201,169,110,.12); }
.tf-credit-filter__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tf-credit-filter__chip {
    --ctone: var(--tf-navy);
    background: var(--tf-surface); border: 1px solid var(--tf-border); border-radius: 999px;
    padding: 4px 11px; font-size: .76rem; font-weight: 700;
    color: var(--tf-text-muted); cursor: pointer;
    transition: all .15s;
}
.tf-credit-filter__chip:hover { color: var(--tf-navy); border-color: var(--ctone); }
.tf-credit-filter__chip.is-active { background: var(--ctone); color: #fff; border-color: var(--ctone); }

.tf-credit-feed { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tf-credit-row {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
    background: #fff; border: 1px solid var(--tf-border); border-radius: 11px;
    padding: 12px 14px;
    transition: border-color .15s, background .15s;
}
.tf-credit-row:hover { border-color: rgba(201,169,110,.45); background: rgba(201,169,110,.03); }
.tf-credit-row[hidden] { display: none; }
.tf-credit-row.is-debit { background: rgba(220,38,38,.02); }

.tf-credit-row__client {
    display: flex; align-items: center; gap: 11px;
    text-decoration: none; min-width: 0;
}
.tf-credit-row__avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--tf-gold); color: var(--tf-navy);
    font-family: 'Manrope', sans-serif; font-weight: 800; font-size: .76rem;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; text-transform: uppercase; flex: 0 0 auto;
}
.tf-credit-row__meta { display: flex; flex-direction: column; min-width: 0; }
.tf-credit-row__meta strong { color: var(--tf-navy); font-size: .9rem; line-height: 1.2; }
.tf-credit-row__sub {
    font-size: .76rem; color: var(--tf-text-muted); line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tf-credit-row__case {
    font-style: normal; font-weight: 700; color: var(--tf-navy);
    background: var(--tf-surface); border: 1px solid var(--tf-border);
    padding: 1px 6px; border-radius: 4px; font-size: .7rem;
}
.tf-credit-row__amt { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.tf-credit-row__sym {
    color: #fff; font-family: 'Manrope', sans-serif; font-weight: 800;
    font-size: .68rem; letter-spacing: .04em;
    padding: 4px 8px; border-radius: 5px;
}
.tf-credit-row__num { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: .95rem; line-height: 1; }
.tf-credit-row__num.is-credit { color: #047857; }
.tf-credit-row__num.is-debit  { color: #B91C1C; }
.tf-credit-row__note {
    grid-column: 1 / -1; font-size: .78rem; color: var(--tf-text-muted);
    border-top: 1px dashed var(--tf-border); padding-top: 8px; margin-top: 4px;
}

.tf-credit-feed__nores { color: var(--tf-text-muted); font-size: .9rem; text-align: center; margin: 22px 0 6px; }

.tf-credit-empty {
    text-align: center; padding: 36px 16px;
    color: var(--tf-text-muted);
}
.tf-credit-empty svg { color: var(--tf-border); margin-bottom: 6px; }
.tf-credit-empty p { margin: 0; font-size: .9rem; }

/* ============================================================
   Universal mobile responsive — keep the main grid track from
   blowing out the viewport, make data tables scroll inside their
   panels, and tighten paddings/typography on narrow screens.
   ============================================================ */

/* Hard guarantee that the main content track never escapes the viewport.
   Without overflow-x:hidden, a wide table can stretch the grid column on
   mobile and push the page right edge off-screen. */
.tf-admin__main,
.tf-admin__content { min-width: 0; }
.tf-admin__main    { overflow-x: hidden; }

/* Panels cap at the available width and never grow beyond it. */
.tf-panel,
.tf-credit-card { max-width: 100%; }

/* Tables — collapse into vertical "label / value" cards on mobile, no
   horizontal swiping. The labels come from each <th> via JS in the footer
   (it copies thead text onto each td as data-label at DOM-ready). */
@media (max-width: 768px) {
  .tf-panel table,
  .tf-credit-card table {
    display: block;
    width: 100%;
    border: 0;
  }
  .tf-panel table thead,
  .tf-credit-card table thead {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .tf-panel table tbody,
  .tf-credit-card table tbody { display: block; }
  .tf-panel table tr,
  .tf-credit-card table tr {
    display: block;
    background: #fff;
    border: 1px solid var(--tf-border);
    border-radius: 11px;
    padding: 10px 12px;
    margin-bottom: 10px;
    box-shadow: 0 2px 6px -3px rgba(11,30,63,.08);
  }
  .tf-panel table td,
  .tf-credit-card table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
    border: 0;
    text-align: right;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .tf-panel table td + td,
  .tf-credit-card table td + td {
    border-top: 1px dashed var(--tf-border);
  }
  .tf-panel table td::before,
  .tf-credit-card table td::before {
    content: attr(data-label);
    font-size: .68rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tf-text-muted);
    text-align: left;
    flex: 0 0 38%;
    padding-top: 3px;     /* visual baseline alignment with value */
  }
  /* Empty-label cells (typically the "Actions" column with no <th> text)
     drop the label and let the action button(s) stretch full width. */
  .tf-panel table td[data-label=""]::before,
  .tf-panel table td:not([data-label])::before,
  .tf-credit-card table td[data-label=""]::before,
  .tf-credit-card table td:not([data-label])::before { content: none; }
  .tf-panel table td[data-label=""],
  .tf-panel table td:not([data-label]),
  .tf-credit-card table td[data-label=""],
  .tf-credit-card table td:not([data-label]) {
    justify-content: flex-end;
    padding-top: 8px;
  }
  /* Bootstrap row-stripe styling looks ugly on the card view — drop it. */
  .tf-panel table.table-striped > tbody > tr:nth-of-type(odd) > td { background-color: transparent; }

  /* Tighter spacing on mobile so panels don't waste half the screen. */
  .tf-admin__content { padding: 14px 12px; }
  .tf-panel          { padding: 1.1rem 1rem; border-radius: 12px; }
  .tf-credit-card    { padding: 18px 16px; border-radius: 14px; }

  /* Page title row: stack heading and action buttons cleanly. */
  .tf-page-title {
    flex-wrap: wrap; gap: 10px;
  }
  .tf-page-title h1 { font-size: 1.45rem; }
  .tf-page-title > div:first-child { width: 100%; }

  /* Subtitles wrap; never let them force the row wider. */
  .tf-page-subtitle { font-size: .88rem; }

  /* Modal: full-width form controls + smaller dialog gutter. */
  .modal-dialog { margin: 0.6rem; }

  /* Drop the date crumb in the topbar on phones — saves room for the
     hamburger + user dropdown without crowding. */
  .tf-admin__crumb { display: none; }

  /* KPI cards already use Bootstrap cols; ensure the icon never overlaps
     the label when the card is narrow. */
  .tf-kpi__icon { top: 12px; right: 12px; width: 28px; height: 28px; }
  .tf-kpi__icon svg { width: 16px; height: 16px; }

  /* Withdrawal/wallet currency cards: keep them readable + tap-friendly. */
  .tf-wd__cards { grid-template-columns: 1fr; }
  .tf-wallet-layout > .col-lg-4 { display: block; }

  /* Recent-credits feed: stack the amount under the client on tight screens. */
  .tf-credit-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .tf-credit-row__amt { justify-self: end; }

  /* Per-currency totals strip: stack pills full-width. */
  .tf-bal-totals__chip { width: 100%; }

  /* Filter row on the feed: stack search + chip group cleanly. */
  .tf-credit-filter { flex-direction: column; align-items: stretch; gap: 8px; }
  .tf-credit-filter__search { width: 100%; min-width: 0; }
}

/* Extra-narrow phones: reduce h1 a touch more and tighten KPI grids. */
@media (max-width: 480px) {
  .tf-page-title h1 { font-size: 1.3rem; }
  .tf-kpi__value { font-size: 1.5rem; }
  .tf-kpi__value--eur { font-size: 1.3rem; }
}

/* Long single-token strings (emails, IBANs, wallet addresses) should be able
   to break instead of forcing horizontal scroll on any container that hosts them. */
.tf-credit-row__sub,
.tf-credit-row__meta strong,
.tf-userdrop__head span,
.tf-clientpicker__optmeta span,
.tf-clientpicker__meta span { overflow-wrap: anywhere; }

/* ============================================================
   Client portal — Billings (PDF invoice list)
   ============================================================ */
.tf-billings { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tf-billing {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center; gap: 14px;
    background: #fff; border: 1px solid var(--tf-border); border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 2px 6px -3px rgba(11,30,63,.08);
    transition: border-color .15s, transform .15s;
}
.tf-billing:hover { border-color: rgba(201,169,110,.45); transform: translateY(-1px); }

.tf-billing__main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tf-billing__sym {
    color: #fff; font-family: 'Manrope', sans-serif; font-weight: 800;
    font-size: .72rem; letter-spacing: .04em;
    padding: 6px 10px; border-radius: 7px; flex: 0 0 auto;
}
.tf-billing__meta { display: flex; flex-direction: column; min-width: 0; }
.tf-billing__meta strong {
    font-family: 'Manrope', sans-serif; font-weight: 800;
    font-size: .92rem; color: var(--tf-navy); line-height: 1.2;
}
.tf-billing__meta span {
    font-size: .76rem; color: var(--tf-text-muted); line-height: 1.4;
    overflow-wrap: anywhere;
}
.tf-billing__meta em {
    font-style: normal; font-weight: 700; color: var(--tf-navy);
    background: var(--tf-surface); border: 1px solid var(--tf-border);
    padding: 1px 6px; border-radius: 4px; font-size: .7rem;
}
.tf-billing__note {
    margin-top: 4px; padding: 4px 8px; border-radius: 5px;
    background: rgba(11,30,63,.04); font-size: .74rem;
    color: var(--tf-text-muted) !important;
}

.tf-billing__amt {
    text-align: right; flex: 0 0 auto;
    font-family: 'Manrope', sans-serif;
}
.tf-billing__amt strong { display: block; font-weight: 800; color: var(--tf-navy); font-size: 1rem; }
.tf-billing__amt span   { display: block; font-size: .74rem; color: var(--tf-text-muted); }

.tf-billing__btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, var(--tf-gold) 0%, var(--tf-gold-2) 100%);
    color: var(--tf-navy); text-decoration: none;
    font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .82rem;
    padding: .55rem .95rem; border-radius: 9px;
    box-shadow: 0 8px 18px -8px rgba(184,148,86,.55);
    transition: transform .15s, box-shadow .15s;
    flex: 0 0 auto;
}
.tf-billing__btn:hover {
    transform: translateY(-1px);
    color: var(--tf-navy);
    box-shadow: 0 12px 22px -10px rgba(184,148,86,.7);
}

@media (max-width: 640px) {
    .tf-billing { grid-template-columns: 1fr; }
    .tf-billing__amt { text-align: left; }
    .tf-billing__btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Admin — Withdrawals queue (modern card-style feed)
   Re-uses .tf-credit-filter__search / .tf-credit-filter__chip
   for the filter bar so the visual language stays consistent
   with the Balances page.
   ============================================================ */
.tf-wd-filter {
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    margin-bottom: 14px;
}

.tf-wd-feed {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}

.tf-wd-row {
    --row-tone: var(--tf-border);
    background: #fff;
    border: 1px solid var(--tf-border);
    border-left: 3px solid var(--row-tone);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 2px 6px -3px rgba(11,30,63,.08);
    transition: border-color .15s, transform .15s, box-shadow .15s;
    display: flex; flex-direction: column; gap: 10px;
}
.tf-wd-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -12px rgba(11,30,63,.16);
}
.tf-wd-row[hidden] { display: none; }

.tf-wd-row.is-pending { --row-tone: #F59E0B; background: rgba(245,158,11,.03); }
.tf-wd-row.is-paid    { --row-tone: #10B981; }
.tf-wd-row.is-rej     { --row-tone: #DC2626; background: rgba(220,38,38,.02); }

/* Top row: client (left) + amount/badge (right) */
.tf-wd-row__top {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    flex-wrap: wrap;
}

.tf-wd-row__client {
    display: flex; align-items: center; gap: 11px;
    min-width: 0; flex: 1 1 220px;
}
.tf-wd-row__avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--tf-gold); color: var(--tf-navy);
    font-family: 'Manrope', sans-serif; font-weight: 800; font-size: .8rem;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; text-transform: uppercase; flex: 0 0 auto;
    text-decoration: none;
    box-shadow: 0 4px 10px -4px rgba(184,148,86,.6);
    transition: transform .15s;
}
.tf-wd-row__avatar:hover { transform: scale(1.05); color: var(--tf-navy); }
.tf-wd-row__meta { display: flex; flex-direction: column; min-width: 0; }
.tf-wd-row__meta strong {
    color: var(--tf-navy); font-size: .92rem; line-height: 1.2;
    overflow-wrap: anywhere;
}
.tf-wd-row__meta span {
    font-size: .76rem; color: var(--tf-text-muted); line-height: 1.4;
    overflow-wrap: anywhere;
}

.tf-wd-row__amount {
    display: flex; align-items: center; gap: 10px;
    flex: 0 0 auto;
}
/* Currency chip — scoped higher specificity so the .tf-wd-row__amount
   descendant-span rule below doesn't override the white text. */
.tf-wd-row__amount .tf-wd-row__sym {
    color: #fff; font-family: 'Manrope', sans-serif; font-weight: 800;
    font-size: .7rem; letter-spacing: .04em;
    padding: 5px 9px; border-radius: 6px;
    line-height: 1;
}
.tf-wd-row__amount > div { display: flex; flex-direction: column; line-height: 1.2; }
.tf-wd-row__amount strong {
    font-family: 'Manrope', sans-serif; font-weight: 800;
    font-size: 1rem; color: var(--tf-navy);
}
/* Only the EUR-equivalent line inside the inner div is muted — keep the
   currency badge white and let the status pill keep its own colours. */
.tf-wd-row__amount > div > span {
    font-size: .74rem; color: var(--tf-text-muted);
}

/* Destination block (IBAN or wallet address) */
.tf-wd-row__dest {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--tf-surface);
    border: 1px solid var(--tf-border);
    border-radius: 9px;
    padding: 8px 11px;
}
.tf-wd-row__dest-label {
    font-size: .64rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--tf-text-muted);
    padding-right: 8px; border-right: 1px solid var(--tf-border);
}
.tf-wd-row__dest code {
    font-family: 'Manrope', monospace; font-size: .82rem;
    color: var(--tf-navy); font-weight: 600;
    overflow-wrap: anywhere; word-break: break-all;
    background: transparent; padding: 0;
}
.tf-wd-row__badge {
    display: inline-flex; align-items: center;
    font-size: .65rem; font-weight: 800; letter-spacing: .04em;
    padding: 2px 7px; border-radius: 4px;
    text-transform: uppercase;
}
.tf-wd-row__badge--ok {
    background: rgba(16,185,129,.12); color: #047857;
    border: 1px solid rgba(16,185,129,.3);
}
.tf-wd-row__bank {
    font-size: .76rem; color: var(--tf-text-muted);
    margin-left: auto;
}

/* Pending: inline approve + reject forms */
.tf-wd-row__actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    border-top: 1px dashed var(--tf-border); padding-top: 10px;
}
.tf-wd-row__form {
    display: flex; gap: 6px; align-items: stretch; min-width: 0;
}
.tf-wd-row__form input.form-control {
    flex: 1; min-width: 0;
    background: #fff; border: 1px solid var(--tf-border);
    border-radius: 8px;
    font-size: .82rem;
}
.tf-wd-row__form input.form-control:focus {
    border-color: var(--tf-gold);
    box-shadow: 0 0 0 3px rgba(201,169,110,.12);
}
.tf-wd-row__form button {
    display: inline-flex; align-items: center; gap: 5px;
    flex: 0 0 auto; white-space: nowrap;
    font-weight: 700;
}

/* Resolved status note (paid / rejected) */
.tf-wd-row__note {
    border-top: 1px dashed var(--tf-border);
    padding-top: 10px;
    font-size: .82rem; color: var(--tf-text-muted);
    overflow-wrap: anywhere;
}
.tf-wd-row__note strong { color: var(--tf-navy); margin-right: 4px; }
.tf-wd-row__note code {
    background: var(--tf-surface);
    border: 1px solid var(--tf-border);
    padding: 1px 6px; border-radius: 4px;
    font-size: .76rem; color: var(--tf-navy);
}
.tf-wd-row__note--ok strong  { color: #047857; }
.tf-wd-row__note--err strong { color: #B91C1C; }

@media (max-width: 768px) {
    .tf-wd-row__top { flex-direction: column; align-items: flex-start; gap: 10px; }
    .tf-wd-row__amount { width: 100%; justify-content: space-between; }
    .tf-wd-row__actions { grid-template-columns: 1fr; }
    .tf-wd-row__bank { margin-left: 0; width: 100%; }
    .tf-wd-filter { flex-direction: column; align-items: stretch; gap: 8px; }
}