/*
 * Tokenizer.capital look for the user panel (auth, panel and maintenance layouts).
 * Loaded after the purchased theme (bootstrap.min.css, style.css, custom.css). Every value is
 * taken from the landing page (styles/royal-theme.css, layout*.css, header-menu.css), so the
 * panel looks like the same site. Not loaded on the landing page.
 * Many theme rules use !important, so the overrides below need it too.
 */

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../tc-font-2.ttf) format('truetype');
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../tc-font-3.ttf) format('truetype');
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../tc-font-4.ttf) format('truetype');
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../tc-font-5.ttf) format('truetype');
}

:root {
    /* Landing tokens */
    --tc-blue: #174cff;
    --tc-blue-hover: #103bdb;
    --tc-accent: #2450ce;
    --tc-sky: #f3f5ff;
    --tc-sky-soft: #fafbff;
    --tc-sky-deep: #e8edff;
    --tc-band: #edf0ff;
    --tc-footer: #edf0fa;
    --tc-active: #e3eaff;
    --tc-ink: #141518;
    --tc-muted: #484c57;
    --tc-muted-2: #565d6c;
    --tc-nav: #5b606d;
    --tc-line: #dce1ee;
    --tc-line-soft: #e1e6f3;
    --tc-input-line: #aac7df;
    --tc-max: 1260px;
    --tc-gutter: clamp(20px, 3.2vw, 48px);
    --tc-shell: min(var(--tc-max), calc(100% - 2 * var(--tc-gutter)));
    --tc-header: 72px;
    /* style.css greys most secondary text with this (#696969). */
    --dark-scheme-font-color: var(--tc-muted-2);

    /* Theme variables (custom.css) */
    --bg-color: var(--tc-sky);
    --bg-color-primary: #ffffff;
    --bg-color-secondary: var(--tc-sky-soft);
    --text-color-primary: var(--tc-ink);
    --text-color-secondary: var(--tc-muted);
    --border-primary: var(--tc-line);
    --border-focus-color: var(--tc-blue);
    --input-focus-color: var(--tc-sky-deep);
    --btn-gradiant-primary: var(--tc-blue);
    --btn-gradiant-secondary: var(--tc-blue);
    --btn-gradiant-primary-hover: var(--tc-blue-hover);
    --btn-gradiant-secondary-hover: var(--tc-blue-hover);

    /* Read by the web3-onboard wallet modal (shadow DOM): above the theme header and Bootstrap modals. */
    --onboard-modal-z-index: 1060;
    --w3o-font-family: Manrope, Arial, sans-serif;
    --w3o-action-color: var(--tc-blue);
    --w3o-border-radius: 12px;
    /* onboard's `theme: 'light'` sets these inline on <html>, which React can strip when it re-renders
       the root; without them the account center is see-through. */
    --w3o-background-color: #ffffff;
    --w3o-foreground-color: var(--tc-sky);
    --w3o-text-color: var(--tc-ink);
    --w3o-border-color: var(--tc-line);
    /* Account center (bottom-right wallet widget): defaults to z-index 1, so page buttons painted over it.
       1040 = above the fixed header, below Bootstrap modal backdrops (1050). */
    --account-center-z-index: 1040;
    --account-center-box-shadow: 0 12px 32px rgba(20, 21, 24, 0.14);
    --account-center-maximized-upper-background: #ffffff;
    --account-center-maximized-info-section-background-color: #ffffff;
    --account-center-maximized-upper-action-background-hover: var(--tc-active);
}

/* Phones: a 16px gutter (header, page and footer share --tc-shell, so they stay aligned). */
@media (max-width: 575px) {
    :root {
        --tc-gutter: 16px;
    }
}

/* style.css declares the fonts on `*`, so they are replaced there too. */
* {
    --body-font: Manrope, Arial, sans-serif;
    --title-font: Manrope, Arial, sans-serif;
}

html,
body {
    background: var(--tc-sky) !important;
}

body {
    color: var(--tc-ink);
    font-family: Manrope, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: #cedaff;
    color: #131a30;
}

a {
    color: var(--tc-accent);
}

/* ---------- Typography (landing scale: 600 headings, tight tracking, muted body) ---------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: Manrope, Arial, sans-serif;
    color: var(--tc-ink);
    letter-spacing: -.02em;
}

/* The landing's headings are never looser than -.035em. */
h1, h2, h3,
.h1, .h2, .h3 {
    letter-spacing: -.035em;
}

/* The landing never uses bold (700+); 600 is its heaviest weight. */
b,
strong,
.fw-bold,
.fw-bolder,
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

.fw-bold,
.fw-bolder,
.fw-semibold {
    font-weight: 600 !important;
}

p {
    color: var(--tc-muted);
    line-height: 1.75;
}

.lead {
    font-size: 18px !important;
    font-weight: 400;
    line-height: 1.65 !important;
    color: var(--tc-muted);
}

/* Landing weights: display headings and page titles 600; every smaller heading
   (card, section and list titles) 500 with tight tracking; labels and buttons 600. */
h3, h4, h5, h6,
.h3, .h4, .h5, .h6,
h3.fw-semibold, h4.fw-semibold, h5.fw-semibold, h6.fw-semibold,
h3.fw-bold, h4.fw-bold, h5.fw-bold, h6.fw-bold,
h3.fw-bolder, h4.fw-bolder, h5.fw-bolder, h6.fw-bolder {
    font-weight: 500 !important;
    letter-spacing: -.025em;
}

/* Accent words in headings: the landing's solid blue, not a gradient. */
.gradient-text {
    background: none !important;
    -webkit-text-fill-color: currentColor;
    color: var(--tc-accent) !important;
}

/* Page titles: landing heading style at an app-page size (32px / 600 / -.035em). */
body .main-page-title {
    font-size: clamp(26px, 2.3vw, 32px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.035em;
    color: var(--tc-ink);
    margin-bottom: 24px;
}

/* Page header: the landing's section pattern (blue label, title, one-line description). */
.tc-page-head {
    margin-bottom: 28px;
}

.tc-eyebrow {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--tc-accent);
}

body .tc-page-head .main-page-title {
    display: block;
    margin-bottom: 8px;
}

body .tc-page-head .tc-page-lead {
    max-width: 640px;
    margin: 0;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--tc-muted);
}

/* Card titles in the panel (Profile Settings, Change password, ...): ink, not grey. */
body h2.dashboard-section-heading {
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: -.03em;
    color: var(--tc-ink) !important;
}

.section-subtitle {
    font-size: 14px;
    line-height: 1.5;
}

.sub-heading {
    font-size: 20px !important;
    font-weight: 500 !important;
    letter-spacing: -.03em;
}

.section-subtitle {
    color: var(--tc-muted) !important;
}

/* ---------- Buttons (landing .btn: 4px corners, 14px / 600, blue → #103bdb) ---------- */

/* The theme draws borders and fills with ::before / ::after layers (the double border on hover). */
.btn-main::before,
.btn-main::after,
.btn-gradient::before,
.btn-gradient::after,
.btn-sm-gredient::before,
.btn-sm-gredient::after,
.btn-search::before,
.btn-search::after {
    content: none !important;
    display: none !important;
}

a.btn-main,
.btn-main,
.btn-gradient,
.btn-sm-gredient,
.btn-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px !important;
    border: 1px solid var(--tc-blue) !important;
    border-radius: 4px !important;
    font-family: Manrope, Arial, sans-serif;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    box-shadow: none !important;
    cursor: pointer;
    overflow: visible;
    transition: background-color .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}

/* style.css sets inline-block on these states, which drops the centring above once a link is clicked. */
a.btn-main:active,
a.btn-main:focus,
a.btn-main:visited {
    display: inline-flex;
}

a.btn-main span,
.btn-main span,
.btn-sm-gredient span,
.btn-search span {
    font-size: inherit !important;
    color: inherit !important;
}

/* Primary: solid blue; lifts 2px on hover like the landing. */
a.btn-main,
.btn-main,
.btn-gradient {
    background: var(--tc-blue) !important;
    color: #ffffff !important;
}

a.btn-main:hover,
.btn-main:hover,
.btn-gradient:hover,
a.btn-main:focus-visible,
.btn-main:focus-visible,
.btn-gradient:focus-visible {
    background: var(--tc-blue-hover) !important;
    border-color: var(--tc-blue-hover) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* Secondary: outline; fills with the hover blue (landing footer "Investor Login"). */
.btn-sm-gredient,
.btn-search {
    background: transparent !important;
    color: var(--tc-blue) !important;
}

.btn-sm-gredient:hover,
.btn-search:hover,
.btn-sm-gredient:focus-visible,
.btn-search:focus-visible {
    background: var(--tc-blue-hover) !important;
    border-color: var(--tc-blue-hover) !important;
    color: #ffffff !important;
}

a.btn-main:active,
.btn-main:active,
.btn-gradient:active,
.btn-sm-gredient:active,
.btn-search:active {
    transform: translateY(0);
}

a.btn-main:focus-visible,
.btn-main:focus-visible,
.btn-gradient:focus-visible,
.btn-sm-gredient:focus-visible,
.btn-search:focus-visible {
    outline: 2px solid var(--tc-blue);
    outline-offset: 2px;
}

.btn-main:disabled,
.btn-gradient:disabled,
.btn-sm-gredient:disabled,
.btn-search:disabled,
.btn-main.disabled {
    opacity: .5;
    transform: none !important;
    cursor: not-allowed;
}

/* Dashboard hero and closing call to action: the landing's 48px hero buttons. */
.tc-dashboard #home .btn-gradient,
.tc-dashboard #home .btn-sm-gredient,
.tc-dashboard #cta .btn-gradient,
.tc-dashboard #cta .btn-sm-gredient {
    min-height: 48px;
    padding: 0 22px !important;
}

/* Compact size (header, small buttons, dropdowns): the landing's 40px header buttons. */
#wrapper > header:not(.auth-header) a.btn-main,
#wrapper > header:not(.auth-header) .btn-main,
#wrapper > header:not(.auth-header) .btn-sm-gredient,
.btn-main.btn-sm,
.btn-sm.btn-main,
.mobile-menu .btn-main,
.mobile-menu .btn-sm-gredient {
    min-height: 40px;
    padding: 0 18px !important;
}

/* Signed-out header: the landing's Login pill. */
header .tc-login-pill {
    border-radius: 999px !important;
    box-shadow: 0 6px 16px rgba(23, 76, 255, .22) !important;
}

header .tc-login-pill:hover,
header .tc-login-pill:focus-visible {
    box-shadow: 0 8px 20px rgba(23, 76, 255, .28) !important;
    transform: none;
}

header .tc-login-pill svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Header (landing topbar: 72px, translucent, centred links) ---------- */

#wrapper > header:not(.auth-header) {
    height: var(--tc-header) !important;
    background: rgba(250, 251, 255, .82) !important;
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid rgba(220, 225, 238, .8) !important;
    box-shadow: none !important;
}

#wrapper > header:not(.auth-header) > .container {
    width: var(--tc-shell);
    max-width: none;
    height: 100%;
    padding: 0;
}

#wrapper > header:not(.auth-header) > .container > .row,
#wrapper > header:not(.auth-header) > .container > .row > [class*="col"] {
    height: 100%;
    margin: 0;
    padding: 0;
}

#wrapper > header:not(.auth-header) .de-flex {
    height: 100%;
    align-items: center;
}

.tc-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    white-space: nowrap;
    font-family: Manrope, Arial, sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.04em;
    color: var(--tc-ink) !important;
    text-decoration: none;
}

.tc-brand .brand-dot {
    color: var(--tc-blue);
}

.tc-brand img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

#wrapper > header:not(.auth-header) #logo {
    display: flex;
    align-items: center;
}

/* Section links: plain text, a 2px line draws in under the word on hover; the current page is blue. */
#wrapper > header:not(.auth-header) #mainmenu {
    display: flex;
    align-items: center;
    gap: clamp(24px, 2.8vw, 44px);
    margin: 0;
    padding: 0;
}

#wrapper > header:not(.auth-header) #mainmenu > li {
    margin: 0;
    padding: 0;
}

#wrapper > header:not(.auth-header) #mainmenu > li > a {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    min-height: 40px;
    padding: 0 !important;
    font-family: Manrope, Arial, sans-serif;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--tc-nav) !important;
    background: none !important;
    text-decoration: none;
    white-space: nowrap;
    transition: color .25s ease;
}

#wrapper > header:not(.auth-header) #mainmenu > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), background-color .25s ease;
}

#wrapper > header:not(.auth-header) #mainmenu > li > a:hover,
#wrapper > header:not(.auth-header) #mainmenu > li > a[aria-current="page"] {
    color: var(--tc-ink) !important;
}

#wrapper > header:not(.auth-header) #mainmenu > li > a:hover::after,
#wrapper > header:not(.auth-header) #mainmenu > li > a[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left center;
}

#wrapper > header:not(.auth-header) #mainmenu > li > a[aria-current="page"]::after {
    background: var(--tc-blue);
}

#wrapper > header:not(.auth-header) #mainmenu > li > a:focus-visible {
    outline: 2px solid var(--tc-blue);
    outline-offset: 4px;
    border-radius: 2px;
}

#wrapper > header:not(.auth-header) .menu_side_area,
#wrapper > header:not(.auth-header) .de-login-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

#wrapper > header:not(.auth-header) .de-login-menu .mr10 {
    margin-right: 0 !important;
}

/* Desktop: logo left, links in the true centre, actions right (landing grid 1fr auto 1fr). */
@media (min-width: 1200px) {
    #wrapper > header:not(.auth-header) .de-flex {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 24px;
    }

    #wrapper > header:not(.auth-header) .de-flex > .de-flex-col:first-child {
        justify-self: start;
    }

    #wrapper > header:not(.auth-header) .header-col-mid {
        display: contents;
    }

    #wrapper > header:not(.auth-header) #mainmenu {
        grid-column: 2;
    }

    #wrapper > header:not(.auth-header) .menu_side_area {
        grid-column: 3;
        justify-self: end;
    }
}

/* Small laptops (993–1199px): the desktop header with tighter spacing, logo mark only. */
@media (min-width: 993px) and (max-width: 1199px) {
    #wrapper > header:not(.auth-header) .tc-brand > span {
        display: none;
    }

    #wrapper > header:not(.auth-header) .de-flex {
        gap: 16px;
    }

    #wrapper > header:not(.auth-header) #mainmenu {
        gap: 20px;
        margin-inline: 16px;
    }
}

/* Profile button: avatar + chevron in a pill, so it reads as "opens a menu".
   React-Bootstrap renders it as `.btn.btn-primary.border-0.bg-transparent`, and the theme's `.btn` clips
   (overflow:hidden), hence the !important overrides and the no-shrink wrapper. */
#wrapper > header:not(.auth-header) .de-login-menu > .dropdown {
    flex: 0 0 auto;
}

header .de-menu-profile {
    display: inline-flex !important;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 2px 13px 2px 2px !important;
    overflow: visible !important;
    border: 1px solid var(--tc-line) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--tc-nav) !important;
    line-height: 1;
    transition: border-color .2s ease, color .2s ease;
}

header .de-menu-profile:hover,
header .de-menu-profile[aria-expanded="true"] {
    border-color: var(--tc-blue) !important;
    color: var(--tc-blue) !important;
}

header .de-menu-profile:focus-visible {
    outline: 2px solid var(--tc-blue) !important;
    outline-offset: 2px;
}

/* Chevron (replaces Bootstrap's small triangle); points up while the menu is open. */
header .de-menu-profile::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    margin: -4px 0 0;
    border-style: solid !important;
    border-color: currentColor !important;
    border-width: 0 2px 2px 0 !important;
    border-radius: 1px;
    transform: rotate(45deg);
    transition: transform .2s ease, margin .2s ease;
}

header .de-menu-profile[aria-expanded="true"]::after {
    margin-top: 4px;
    transform: rotate(-135deg);
}

header .de-menu-profile img {
    width: 34px;
    height: 34px;
    margin: 0;
    border-radius: 999px;
    border: 1px solid var(--tc-line-soft);
    background: #ffffff;
    object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
    header .de-menu-profile,
    header .de-menu-profile::after {
        transition: none;
    }
}

/* Dropdowns: the landing's white menu card. `.dark-scheme .de-submenu` repeats the theme's own
   !important selector (8px radius, no shadow) so this one wins. */
.de-submenu,
.dark-scheme .de-submenu,
.dropdown-menu {
    background: #ffffff !important;
    border: 1px solid var(--tc-line-soft) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(20, 21, 24, .12) !important;
}

/* Profile menu: who is signed in, the wallet card, account links, sign out.
   The theme forces span/button sizes with !important on phones, hence the !important sizes. */
.de-submenu.tc-profile-menu {
    width: 300px;
    max-width: calc(100vw - 24px);
    padding: 8px !important;
}

/* Phones: style.css pins .de-submenu to `right: 0 !important` while Popper also shifts it to stay on screen,
   so the two offsets stacked and the menu opened off the left edge. Anchor it to .de-login-menu instead
   (its right edge is the page gutter), and drop Popper's shift. */
@media (max-width: 575px) {
    #wrapper > header .tc-profile-dropdown {
        position: static;
    }

    #wrapper > header .de-submenu.tc-profile-menu {
        inset: calc(100% + 8px) 0 auto auto !important;
        width: min(300px, calc(100vw - 2 * var(--tc-gutter)));
        max-width: none;
        margin-top: 4px;
        transform: none !important;
    }
}

.tc-profile-menu svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tc-pm-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 14px;
}

.tc-pm-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 1px solid var(--tc-line-soft);
    border-radius: 999px;
    background: #ffffff;
    object-fit: cover;
}

.tc-pm-who {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tc-profile-menu .tc-pm-name,
.tc-profile-menu .tc-pm-email {
    overflow: hidden;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tc-profile-menu .tc-pm-name {
    font-size: 15px !important;
    font-weight: 600;
    color: var(--tc-ink);
}

.tc-profile-menu .tc-pm-email {
    font-size: 13px !important;
    color: var(--tc-muted-2);
}

.tc-profile-menu .tc-pm-role {
    align-self: flex-start;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--tc-active);
    color: var(--tc-accent);
    font-size: 11px !important;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.tc-pm-wallet {
    margin: 0 2px 6px;
    padding: 12px;
    border: 1px solid var(--tc-line-soft);
    border-radius: 12px;
    background: var(--tc-sky-soft);
}

.tc-profile-menu .tc-pm-label {
    display: block;
    margin-bottom: 8px;
    font-size: 11px !important;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tc-muted-2);
}

.tc-pm-address {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tc-profile-menu .tc-pm-hash {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px !important;
    font-weight: 600;
    color: var(--tc-ink);
}

.tc-profile-menu .tc-pm-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--tc-line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--tc-blue);
    font-size: 12px !important;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.tc-profile-menu .tc-pm-copy span {
    font-size: 12px !important;
}

.tc-profile-menu .tc-pm-copy svg {
    width: 14px;
    height: 14px;
}

.tc-profile-menu .tc-pm-copy:hover {
    border-color: var(--tc-blue);
    background: var(--tc-blue);
    color: #ffffff;
}

.tc-profile-menu .tc-pm-hint {
    display: block;
    margin-bottom: 10px;
    font-size: 13px !important;
    color: var(--tc-muted);
}

.tc-profile-menu .tc-pm-lock {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: var(--tc-blue);
    color: #ffffff;
    font-size: 14px !important;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease;
}

.tc-profile-menu .tc-pm-lock:hover {
    background: var(--tc-blue-hover);
}

.tc-pm-links {
    padding: 2px 0 6px;
    border-bottom: 1px solid var(--tc-line-soft);
}

.tc-profile-menu .tc-pm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 6px 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--tc-ink);
    font-size: 14px !important;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.tc-profile-menu .tc-pm-text {
    flex: 1 1 auto;
    font-size: 14px !important;
}

.tc-pm-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--tc-sky);
    color: var(--tc-accent);
    transition: background .2s ease, color .2s ease;
}

/* The theme's `.dropdown a:hover` (0,2,1) sets display:inline-block; keep the row layout on hover. */
.tc-profile-menu .tc-pm-item:hover {
    display: flex;
    text-decoration: none;
    background: var(--tc-sky);
    color: var(--tc-blue);
}

.tc-profile-menu .tc-pm-item:hover .tc-pm-icon {
    background: var(--tc-active);
}

.tc-profile-menu .tc-pm-item.is-verified,
.tc-profile-menu .tc-pm-item.is-verified:hover {
    background: none;
    color: #198754;
    cursor: default;
}

.tc-profile-menu .tc-pm-item.is-verified .tc-pm-icon {
    background: #e8f5ee;
    color: #198754;
}

.tc-profile-menu .tc-pm-signout {
    margin-top: 6px;
}

.tc-profile-menu .tc-pm-signout:hover {
    background: #fdf1f1;
    color: #c0392b;
}

.tc-profile-menu .tc-pm-signout:hover .tc-pm-icon {
    background: #fbe2e2;
    color: #c0392b;
}

.tc-profile-menu .tc-pm-item:focus-visible,
.tc-profile-menu .tc-pm-copy:focus-visible,
.tc-profile-menu .tc-pm-lock:focus-visible {
    outline: 2px solid var(--tc-blue);
    outline-offset: 2px;
}

/* ---------- Page frame ---------- */

/* Footer stays at the bottom of short pages. */
#wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#wrapper > .section-container {
    flex: 1 0 auto;
    min-height: 0;
    padding-top: var(--tc-header) !important;
}

/* Panel pages: the landing content width, 48px below the header. */
#wrapper > .section-container > .container {
    width: var(--tc-shell);
    max-width: none;
    padding: 48px 0 96px;
}

/* style.css adds 60px under every <section>; on the page wrapper it stacked on the 96px above. */
#wrapper > .section-container > .container > section {
    padding-bottom: 0;
}

/* Pages wrap their content in a Bootstrap .row; its 12px column padding stacked on the shell gutter,
   pushing the content in from the header logo. The shell already provides the gutter. */
#wrapper > .section-container > .container > section > .row > * {
    padding-inline: 0;
}

/* KYC notice: in line with the page content (the dashboard itself is full width). */
.tc-kyc-slot > .row {
    margin-top: 0 !important;
}

/* Dashboard: the notice sits on the hero's sky band, so no white strip opens between header and hero. */
.overflow-hidden > .tc-kyc-slot:not(:empty) {
    background: var(--tc-sky);
    padding-top: 24px;
}

.overflow-hidden > .tc-kyc-slot > .row {
    width: var(--tc-shell);
    margin-inline: auto !important;
}

.overflow-hidden > .tc-kyc-slot > .row > .mb-4 {
    margin-bottom: 0 !important;
}

#back-to-top {
    background: var(--tc-blue) !important;
    background-image: none !important;
    border-radius: 4px;
}

/* ---------- Surfaces ---------- */

.card {
    border: 1px solid var(--tc-line);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(23, 76, 255, .02);
}

.loginbox {
    border-radius: 12px;
    border: 1px solid var(--tc-line);
}

thead,
thead tr,
thead th {
    background: var(--tc-band) !important;
}

/* Table headings: the landing's small-caps label style. */
body thead th {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tc-muted-2) !important;
}

/* KYC notice: a quiet warning card instead of a full-width yellow bar. */
.swap-warn {
    background: #fff8e8 !important;
    border: 1px solid #f3dfae !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
}

.swap-warn p,
.swap-warn p.text-warning {
    color: #7a5a12 !important;
    font-size: 14px;
    line-height: 1.6;
}

.swap-warn .text-warning {
    color: #c48a0a !important;
}

/* "Verify KYC": reads as the link it is. */
.swap-warn .cursor-pointer {
    margin-left: 4px;
    color: var(--tc-blue) !important;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.swap-warn .cursor-pointer:hover {
    color: var(--tc-blue-hover) !important;
}

/* Forms (landing contact form: white fields, 5px corners, blue focus). */
.form-control,
.form-select {
    min-height: 42px;
    border-radius: 5px;
    border-color: var(--tc-line);
    background-color: #ffffff;
    color: var(--tc-ink);
    font-family: Manrope, Arial, sans-serif;
}

.form-control.form-control-rounded {
    border-radius: 5px !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--tc-blue);
    box-shadow: 0 0 0 3px rgba(23, 76, 255, .15);
}

/* Every editable field is white (a theme rule made some text inputs transparent);
   only disabled fields get the soft tint (style.css painted them near-black). */
body .form-control:not(:disabled),
body .form-control-1:not(:disabled) {
    background-color: #ffffff !important;
}

.form-control:disabled,
.form-control-1:disabled {
    background-color: var(--tc-sky-soft) !important;
    color: var(--tc-muted);
}

label,
.form-label {
    color: var(--tc-ink);
    font-weight: 600;
    font-size: 14px;
}

/* Search box with its button inside: one 42px field, button flush right. */
.property-search {
    height: 42px !important;
    border: 1px solid var(--tc-line) !important;
    border-radius: 5px !important;
    background: #ffffff !important;
    overflow: hidden;
}

.property-search .form-control {
    min-height: 0;
    height: 40px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.property-search:focus-within {
    border-color: var(--tc-blue) !important;
    box-shadow: 0 0 0 3px rgba(23, 76, 255, .15);
}

.property-search button {
    width: 42px !important;
    border-radius: 0 !important;
    background: var(--tc-blue) !important;
    transition: background-color .2s;
}

.property-search button:hover {
    background: var(--tc-blue-hover) !important;
}

/* Tabs: like the landing menu (same weight in every state, blue line under the active one). */
.tab {
    border-bottom: 1px solid var(--tc-line) !important;
}

.tab .tab-item {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--tc-nav) !important;
    border-bottom: 2px solid transparent !important;
    border-image: none !important;
    transition: color .2s, border-color .2s;
}

.tab .tab-item:hover {
    color: var(--tc-ink) !important;
}

.tab .tab-item.active {
    background: none !important;
    -webkit-text-fill-color: currentColor;
    color: var(--tc-ink) !important;
    border-bottom-color: var(--tc-blue) !important;
}

/* FAQ questions */
.accordion-button {
    font-size: 17px !important;
    font-weight: 500 !important;
    color: var(--tc-ink) !important;
}

.timeline-badge {
    font-size: 12px !important;
    line-height: 1.2 !important;
    padding: 5px 10px !important;
}

/* Empty state: a quiet icon tile and two short lines (no illustration). */
.tc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
}

/* Tables scroll sideways on small screens; the empty state and the loader centred in the full table width
   ended up off-screen. Pin them to the visible part of the scroll area instead. */
@media (max-width: 991px) {
    td > .tc-empty,
    td.table-loader > * {
        position: sticky;
        left: 0;
        width: calc(100vw - 2 * var(--tc-gutter) - 48px);
        max-width: 100%;
    }
}

/* Phones: the tab row scrolls sideways instead of wrapping onto a second line. */
@media (max-width: 575px) {
    .tab.property-tab-container {
        justify-content: flex-start !important;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .tab.property-tab-container ul {
        flex-wrap: nowrap;
        margin-bottom: 0;
    }

    .tab.property-tab-container .tab-item {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* Empty-state illustration (NoDataFound.js): an empty listing under a magnifier, in the panel tokens. */
.tc-empty-art {
    display: block;
    width: 168px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 14px;
    overflow: visible;
    vertical-align: middle;
}

.tc-empty-art .tc-ea-ground { fill: var(--tc-sky-deep); }
.tc-empty-art .tc-ea-spark { fill: var(--tc-active); }
.tc-empty-art .tc-ea-plus { fill: none; stroke: #c6d2fb; stroke-width: 2; stroke-linecap: round; }
.tc-empty-art .tc-ea-back { fill: var(--tc-band); stroke: var(--tc-line); stroke-width: 1.5; }
.tc-empty-art .tc-ea-card { fill: #ffffff; stroke: var(--tc-line); stroke-width: 1.5; }
.tc-empty-art .tc-ea-tile { fill: var(--tc-active); }
.tc-empty-art .tc-ea-glyph { fill: none; stroke: var(--tc-blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tc-empty-art .tc-ea-line { fill: var(--tc-sky-deep); }
.tc-empty-art .tc-ea-line.is-soft { fill: var(--tc-sky); }
.tc-empty-art .tc-ea-lens { fill: #ffffff; stroke: var(--tc-blue); stroke-width: 3; }
.tc-empty-art .tc-ea-handle,
.tc-empty-art .tc-ea-minus { fill: none; stroke: var(--tc-blue); stroke-linecap: round; }
.tc-empty-art .tc-ea-handle { stroke-width: 4.5; }
.tc-empty-art .tc-ea-minus { stroke-width: 2.5; }

@media (max-width: 767px) {
    .tc-empty-art {
        width: 132px;
    }
}

body .tc-empty .tc-empty-title {
    margin: 0 0 4px;
    font-size: 16px !important;
    font-weight: 600;
    line-height: 1.4 !important;
    color: var(--tc-ink);
}

body .tc-empty .tc-empty-text {
    margin: 0;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--tc-muted);
}

/* react-select fields: the same shape as text inputs (the theme made them pills). */
body .react-select-custom > div[class*="-control"][class] {
    min-height: 42px !important;
    border-radius: 5px !important;
    border-color: var(--tc-line) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body .react-select-custom > div[class*="-control"][class]:hover {
    border-color: #c9d2ea !important;
}

body .react-select-custom > div[class*="-control"][class][class*="focused"],
body .react-select-custom > div[class*="-control"][class]:focus-within {
    border-color: var(--tc-blue) !important;
    box-shadow: 0 0 0 3px rgba(23, 76, 255, .15) !important;
}

.react-select-custom div[class*="-menu"] {
    border: 1px solid var(--tc-line-soft);
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(20, 21, 24, .12) !important;
    overflow: hidden;
}

.react-select-custom div[class*="-option"][class*="selected"] {
    background: var(--tc-blue) !important;
}

/* Info notices: landing tones instead of Bootstrap cyan. */
.swap-info,
.alert-info,
.text-info.bg-info-subtle {
    background: var(--tc-band) !important;
    border-color: var(--tc-line) !important;
    color: var(--tc-accent) !important;
    border-radius: 8px;
}

.swap-info .text-info,
.alert-info .text-info,
.alert-info i {
    color: var(--tc-accent) !important;
}

/* Status badges: soft landing tints with dark text (the theme's cyan / yellow were hard to read). */
.timeline-badge,
.property-badge {
    border-radius: 999px !important;
    font-weight: 600 !important;
    border: 0 !important;
}

.timeline-badge.success { background: #e6f6ec !important; color: #17663a !important; }
.timeline-badge.danger { background: #fdecec !important; color: #b42318 !important; }
.timeline-badge.warning { background: #fff3d6 !important; color: #7a5a12 !important; }
.timeline-badge.info { background: var(--tc-active) !important; color: var(--tc-accent) !important; }
.timeline-badge.primary,
.property-badge { background: var(--tc-blue) !important; color: #ffffff !important; }
.property-badge.badge-warning { background: #fff3d6 !important; color: #7a5a12 !important; }

.text-success {
    color: #17803d !important;
}

/* Small +/- buttons: white with the landing line, blue on hover. */
.btn-light {
    background: #ffffff !important;
    border: 1px solid var(--tc-line) !important;
    border-radius: 4px !important;
    color: var(--tc-ink) !important;
}

.btn-light:hover,
.btn-light:focus-visible {
    background: var(--tc-sky) !important;
    border-color: var(--tc-blue) !important;
    color: var(--tc-blue) !important;
}

/* Pagination */

.page-link:hover {
    color: var(--tc-blue);
}

.page-link.active,
.active > .page-link {
    background: var(--tc-blue);
    border-color: var(--tc-blue);
    color: #ffffff;
}

/* Phones: seven page buttons are wider than a card; the end-aligned row pushed the first ones out of the
   card's left edge. Wrap and centre them instead. */
@media (max-width: 575px) {
    .pagination-box {
        justify-content: center !important;
    }

    .pagination-box .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        margin-bottom: 0;
    }

    .pagination-box .pagination .page-item {
        margin: 0;
    }
}

/* ---------- Footer (landing footer layout: brand, tagline, rule, links) ---------- */

#wrapper > footer.tc-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 12px;
    padding: 48px max(var(--tc-gutter), calc((100% - var(--tc-max)) / 2)) 32px !important;
    background: var(--tc-footer) !important;
    border-top: 1px solid var(--tc-line) !important;
    color: var(--tc-muted);
    font-family: Manrope, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.75;
}

#wrapper > footer.tc-footer .tc-brand {
    order: 1;
    margin-right: auto;
}

#wrapper > footer.tc-footer .tc-brand img {
    width: 44px;
    height: 44px;
}

#wrapper > footer.tc-footer .tc-footer-tagline {
    order: 2;
    flex: 0 0 100%;
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--tc-muted);
}

#wrapper > footer.tc-footer::after {
    content: "";
    order: 3;
    flex: 0 0 100%;
    height: 1px;
    margin: 32px 0 12px;
    background: var(--tc-line);
}

#wrapper > footer.tc-footer .tc-footer-legal {
    order: 4;
    display: flex;
    flex-wrap: wrap;
    gap: 0 32px;
    font-size: 14px;
}

#wrapper > footer.tc-footer .tc-footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: inherit;
    text-decoration: none;
}

#wrapper > footer.tc-footer .tc-footer-legal a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

#wrapper > footer.tc-footer .tc-footer-copy {
    order: 5;
    margin-left: auto;
    font-size: 14px;
}

@media (max-width: 900px) {
    #wrapper > footer.tc-footer {
        padding: 32px var(--tc-gutter) 40px !important;
    }

    #wrapper > footer.tc-footer .tc-brand {
        font-size: 18px;
    }

    #wrapper > footer.tc-footer .tc-footer-tagline {
        margin-top: 12px;
    }

    #wrapper > footer.tc-footer::after {
        margin: 24px 0 8px;
    }

    #wrapper > footer.tc-footer .tc-footer-legal {
        gap: 0 24px;
    }

    #wrapper > footer.tc-footer .tc-footer-copy {
        flex: 0 0 100%;
        margin: 8px 0 0;
    }
}

/* ---------- Dashboard: full-width bands like the landing sections ---------- */

.tc-dashboard > section {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(72px, 8vw, 112px) max(var(--tc-gutter), calc((100% - var(--tc-max)) / 2)) !important;
    background: var(--tc-sky) !important;
}

.tc-dashboard > section:nth-of-type(even) {
    background: #ffffff !important;
}

.tc-dashboard > section#home {
    padding-top: clamp(48px, 6vw, 96px) !important;
}

.tc-dashboard > section#cta {
    background: linear-gradient(140deg, #f6f7ff, #e9edff) !important;
}

.tc-dashboard > section > .container {
    width: 100%;
    max-width: none;
    padding-inline: 0;
}

/* Phones: 72px above and below every band left screen-high gaps between sections. */
@media (max-width: 575px) {
    .tc-dashboard > section {
        padding-block: 48px !important;
    }

    .tc-dashboard > section#home {
        padding-top: 32px !important;
    }

    /* Partner logos: two per row (logo over name) instead of one long column. */
    .tc-dashboard .protocol-card {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .tc-dashboard .protocol-card > a {
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        height: 100%;
        padding: 16px 8px !important;
        text-align: center;
    }

    .tc-dashboard .protocol-card > a > div {
        margin-right: 0 !important;
    }

    .tc-dashboard .protocol-card span {
        font-size: 14px;
        overflow-wrap: anywhere;
    }
}

/* Hero headline: the landing h1 (72px / 600 / -.045em). */
body .tc-dashboard h1.display-3 {
    font-size: clamp(38px, 4.2vw, 60px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.045em;
}

/* Section headlines: the landing h2 (57px / 500 / -.05em). */
body .tc-dashboard h2.display-6 {
    font-size: clamp(30px, 3.1vw, 44px);
    font-weight: 500 !important;
    line-height: 1.1;
    letter-spacing: -.05em;
}

.tc-dashboard .hero-image {
    border-radius: 8px;
    box-shadow: none;
}

/* Cards and tiles read against both band colours. */
.tc-dashboard > section:nth-of-type(odd) .card {
    background: #ffffff;
}

.tc-dashboard .property-badge {
    border-radius: 999px;
    font-weight: 600;
}

/* Benefit tiles: white cards on the sky band (they were sky on white). */
.tc-dashboard .vstack-card {
    background: #ffffff !important;
    border: 1px solid var(--tc-line);
    border-radius: 12px !important;
}

.tc-dashboard #benefits > .row {
    align-items: flex-start !important;
}

/* Sub-section headings ("For Property Owners"): the landing's card heading (29px / 500). */
body .tc-dashboard h3.h4 {
    font-size: clamp(20px, 1.8vw, 24px) !important;
    font-weight: 500 !important;
    line-height: 1.18;
    letter-spacing: -.035em;
}

/* ---------- ROI distribution flow: one panel, five linked steps ---------- */

.tc-roi {
    --roi-gap: 24px;
    --roi-node: 56px;
    --roi-line: #cfd8f6;
    padding: clamp(24px, 3vw, 40px);
    border: 1px solid var(--tc-line);
    border-radius: 16px;
    background: var(--tc-sky-soft);
}

.tc-roi-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--roi-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tc-roi-step {
    position: relative;
    margin: 0;
    padding: 0;
}

.tc-roi-node {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--roi-node);
    height: var(--roi-node);
    border: 1px solid var(--tc-line);
    border-radius: 16px;
    background: #ffffff;
    color: var(--tc-blue);
    box-shadow: 0 2px 8px rgba(23, 76, 255, .06);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.tc-roi-node svg {
    width: 24px;
    height: 24px;
}

/* The destination: investors get the solid brand tile. */
.tc-roi-step:last-child .tc-roi-node {
    border-color: var(--tc-blue);
    background: var(--tc-blue);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(23, 76, 255, .24);
}

@media (hover: hover) {
    .tc-roi-step:hover .tc-roi-node {
        transform: translateY(-2px);
    }

    .tc-roi-step:not(:last-child):hover .tc-roi-node {
        border-color: var(--tc-blue);
        box-shadow: 0 8px 20px rgba(23, 76, 255, .14);
    }
}

/* Link to the next step: a line with an arrowhead, and a pulse that runs along it. Each link
   waits for the one before it (--i), so the pulse appears to travel from rent to investors. */
.tc-roi-link {
    position: absolute;
    top: calc(var(--roi-node) / 2 - 6px);
    left: calc(var(--roi-node) + 10px);
    width: calc(100% + var(--roi-gap) - var(--roi-node) - 20px);
    height: 12px;
    overflow: hidden;
    background: linear-gradient(var(--roi-line), var(--roi-line)) center / 100% 2px no-repeat;
}

.tc-roi-link::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 2px;
    width: 7px;
    height: 7px;
    border-top: 2px solid var(--roi-line);
    border-right: 2px solid var(--roi-line);
    transform: translateY(-50%) rotate(45deg);
}

.tc-roi-link::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 0;
    width: 40%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--tc-blue), transparent);
    transform: translateX(-100%);
    animation: tc-roi-pulse-x 6s ease-in-out infinite;
    animation-delay: calc(var(--i) * 1.2s);
}

@keyframes tc-roi-pulse-x {
    0% { transform: translateX(-100%); }
    20%, 100% { transform: translateX(250%); }
}

@keyframes tc-roi-pulse-y {
    0% { transform: translateY(-100%); }
    20%, 100% { transform: translateY(250%); }
}

.tc-roi-body {
    margin-top: 20px;
}

body .tc-dashboard .tc-roi-index {
    display: block;
    margin-bottom: 6px;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 1.2 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tc-muted-2);
}

body .tc-dashboard .tc-roi-title {
    margin: 0 0 10px;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: -.02em;
}

body .tc-dashboard .tc-roi-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--tc-active);
    color: var(--tc-accent);
    font-size: 12.5px !important;
    font-weight: 600;
    line-height: 1.35 !important;
}

body .tc-dashboard .tc-roi-text {
    margin: 12px 0 0;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--tc-muted) !important;
}

.tc-roi-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 40px;
    margin: 32px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--tc-line);
    list-style: none;
}

body .tc-dashboard .tc-roi-facts li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 14px !important;
    font-weight: 600;
    color: var(--tc-ink);
}

.tc-roi-facts svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--tc-blue);
}

/* Small laptops: five columns stay, tighter. */
@media (max-width: 1199px) {
    .tc-roi {
        --roi-gap: 16px;
    }
}

/* Tablets and phones: a vertical timeline, nodes on a left rail. */
@media (max-width: 991px) {
    .tc-roi {
        --roi-gap: 28px;
        --roi-node: 48px;
    }

    .tc-roi-steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .tc-roi-step {
        padding-left: calc(var(--roi-node) + 16px);
    }

    .tc-roi-node {
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 14px;
    }

    .tc-roi-node svg {
        width: 22px;
        height: 22px;
    }

    .tc-roi-link {
        top: calc(var(--roi-node) + 8px);
        left: calc(var(--roi-node) / 2 - 6px);
        width: 12px;
        height: calc(100% + var(--roi-gap) - var(--roi-node) - 16px);
        background-size: 2px 100%;
    }

    .tc-roi-link::before {
        top: auto;
        right: auto;
        bottom: 2px;
        left: 50%;
        transform: translateX(-50%) rotate(135deg);
    }

    .tc-roi-link::after {
        top: 0;
        left: 5px;
        width: 2px;
        height: 40%;
        background: linear-gradient(180deg, transparent, var(--tc-blue), transparent);
        transform: translateY(-100%);
        animation-name: tc-roi-pulse-y;
    }

    .tc-roi-body {
        min-height: var(--roi-node);
        margin-top: 0;
    }

    .tc-roi-facts {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tc-roi-link::after {
        display: none;
    }

    .tc-roi-node {
        transition: none;
    }

    .tc-roi-step:hover .tc-roi-node {
        transform: none;
    }
}

/* ---------- Testimonials: one featured quote on brand blue, two beside it ---------- */

.tc-quotes {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 24px;
}

.tc-quote {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: clamp(24px, 2.6vw, 32px);
    border: 1px solid var(--tc-line);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(23, 76, 255, .04);
    transition: box-shadow .25s ease, border-color .25s ease;
}

.tc-quote.is-featured {
    grid-row: span 2;
    padding: clamp(28px, 3.4vw, 48px);
    border-color: var(--tc-blue);
    background: var(--tc-blue);
    color: #ffffff;
    box-shadow: 0 16px 40px rgba(23, 76, 255, .22);
}

/* AOS owns the transform on these cards, so hover only deepens the shadow. */
@media (hover: hover) {
    .tc-quote:hover {
        border-color: #c6d2fb;
        box-shadow: 0 12px 28px rgba(23, 76, 255, .10);
    }

    .tc-quote.is-featured:hover {
        border-color: var(--tc-blue);
        box-shadow: 0 20px 48px rgba(23, 76, 255, .30);
    }
}

.tc-quote-mark {
    width: 48px;
    height: 36px;
    fill: rgba(255, 255, 255, .35);
}

.tc-quote-stars {
    display: flex;
    gap: 4px;
}

.tc-quote-stars svg {
    width: 18px;
    height: 18px;
    fill: #f5b301;
}

.tc-quote.is-featured .tc-quote-stars svg {
    fill: #ffd25e;
}

/* The theme styles every blockquote as a 24px pull-quote with a left rule. */
.tc-quote .tc-quote-text {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    border: 0;
    font-family: inherit;
    font-size: inherit;
    font-style: normal;
    color: inherit;
}

body .tc-dashboard .tc-quote-text p {
    margin: 0;
    font-size: 16px !important;
    font-weight: 500;
    line-height: 1.65 !important;
    letter-spacing: -.005em;
    color: var(--tc-ink) !important;
}

body .tc-dashboard .tc-quote.is-featured .tc-quote-text p {
    font-size: clamp(20px, 1.9vw, 26px) !important;
    line-height: 1.45 !important;
    letter-spacing: -.02em;
    color: #ffffff !important;
}

.tc-quote-author {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tc-quote-person {
    display: flex;
    align-items: center;
    gap: 14px;
}

body .tc-dashboard .tc-quote-name,
body .tc-dashboard .tc-quote-role {
    display: block;
}

body .tc-dashboard .tc-quote-name {
    font-size: 16px !important;
    font-weight: 600;
    line-height: 1.3 !important;
    color: var(--tc-ink);
}

body .tc-dashboard .tc-quote-role {
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: var(--tc-muted-2);
}

body .tc-dashboard .tc-quote.is-featured .tc-quote-name {
    color: #ffffff;
}

body .tc-dashboard .tc-quote.is-featured .tc-quote-role {
    color: rgba(255, 255, 255, .78);
}

body .tc-dashboard .tc-quote .tc-monogram {
    font-size: 16px !important;
    line-height: 1 !important;
}

.tc-quote.is-featured .tc-monogram {
    background: rgba(255, 255, 255, .16);
    color: #ffffff;
}

/* Tablets: featured quote across the top, the other two side by side. */
@media (max-width: 991px) {
    .tc-quotes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tc-quote.is-featured {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}

@media (max-width: 767px) {
    .tc-quotes {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tc-quote {
        transition: none;
    }
}

/* Brand monograms instead of stock photos. */
.tc-monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--tc-active);
    color: var(--tc-accent);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .02em;
}

/* ---------- Phones (the theme forces sizes with !important below 768px) ---------- */

@media (max-width: 767px) {
    body .main-page-title {
        font-size: 26px !important;
        line-height: 1.15 !important;
    }

    body .tc-dashboard h1.display-3 {
        font-size: 36px !important;
        line-height: 1.1 !important;
    }

    body .tc-dashboard h2.display-6 {
        font-size: 28px !important;
        line-height: 1.12 !important;
    }

    a.btn-main,
    .btn-main,
    .btn-gradient,
    .btn-sm-gredient,
    .btn-search {
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    #wrapper > .section-container > .container {
        padding: 32px 0 64px;
    }
}

/* Tablets and phones (theme breakpoint 992px): the theme puts the header in the page flow,
   so the content needs no header offset; the footer link row needs its height back. */
@media (max-width: 992px) {
    #wrapper > header:not(.auth-header) {
        height: 64px !important;
        padding: 0 !important;
    }

    #wrapper > header:not(.auth-header) > .container {
        width: var(--tc-shell) !important;
        min-width: 0 !important;
        margin-inline: auto !important;
    }

    #wrapper > .section-container {
        padding-top: 0 !important;
    }

    #wrapper > footer.tc-footer .tc-footer-legal {
        height: auto !important;
    }
}

/* ---------- Sign-in pages: the landing's bay towers under a navy tint ---------- */

/* custom.css used a black tint; navy keeps the white header and footer text readable. */
.auth-main,
.auth-bg,
.privacy-policy-bg {
    background-image: url(/assets/north-hd-still-0.webp) !important;
    background-position: 25% center !important;
}

.auth-header,
.auth-container,
.auth-footer {
    background-color: rgba(8, 22, 64, .42) !important;
}

/* ---------- Panel stroke icons (components/includes/panelIcons.js) ---------- */

:is(.tc-icon, .lucide),
.tc-stroke > svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Progress bars fill from the left once, to the width set inline. */
@keyframes tc-bar-grow {
    from { transform: scaleX(0); }
}

/* ---------- Settings: identity card beside the actions, sign-ins underneath ---------- */

.tc-set-loading {
    display: flex;
    justify-content: center;
    padding: 64px 0;
}

/* Sign-ins sit outside .tc-set-grid so the sticky identity card stops at the end of the grid. */
.tc-set-body,
.tc-set-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

.tc-set-main {
    display: grid;
    gap: 20px;
    min-width: 0;
}

/* Section links (#wallet, #password ...) land below the fixed header. */
.tc-set [id] {
    scroll-margin-top: calc(var(--tc-header) + 24px);
}

.tc-set .tc-set-card,
.tc-set .tc-set-id {
    padding: 24px;
    background: #ffffff;
    border: 1px solid var(--tc-line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(20, 21, 24, .04);
}

/* Identity card */
.tc-set-who {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px;
    text-align: center;
}

.tc-set-avatar {
    position: relative;
    width: 96px;
    height: 96px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--tc-sky);
    cursor: pointer;
}

.tc-set-avatar img {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    object-fit: cover;
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 5px var(--tc-line);
}

.tc-set-avatar-edit {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--tc-blue);
    color: #ffffff;
    box-shadow: 0 0 0 3px #ffffff;
    transition: transform .2s, background-color .2s;
}

.tc-set-avatar-edit :is(.tc-icon, .lucide) {
    width: 15px;
    height: 15px;
}

.tc-set-avatar:hover .tc-set-avatar-edit {
    background: var(--tc-blue-hover);
    transform: scale(1.08);
}

.tc-set-avatar:focus-visible {
    outline: 2px solid var(--tc-blue);
    outline-offset: 6px;
}

body .tc-set .tc-set-name {
    margin: 18px 0 2px;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.25;
    letter-spacing: -.03em;
    overflow-wrap: anywhere;
}

.tc-set .tc-set-email {
    margin: 0;
    font-size: 14px !important;
    line-height: 1.5;
    color: var(--tc-muted);
    overflow-wrap: anywhere;
}

.tc-set .tc-set-role {
    margin-top: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--tc-active);
    color: var(--tc-accent);
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: .04em;
}

.tc-set-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--tc-line-soft);
}

.tc-set-block + .tc-set-block {
    margin-top: 20px;
}

.tc-set .tc-set-label {
    font-size: 12px !important;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--tc-muted-2);
}

.tc-set .tc-set-note {
    margin: 0;
    font-size: 14px !important;
    line-height: 1.55;
    color: var(--tc-muted);
}

.tc-set-wallet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 8px 8px 14px;
    border: 1px solid var(--tc-line);
    border-radius: 10px;
    background: var(--tc-sky-soft);
}

.tc-set code,
.tc-set-mono {
    padding: 0;
    background: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    color: var(--tc-ink);
}

.tc-set .tc-set-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--tc-line);
    border-radius: 6px;
    background: #ffffff;
    color: var(--tc-ink);
    font-size: 13px !important;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color .2s, color .2s;
}

.tc-set .tc-set-chip:hover,
.tc-set .tc-set-chip:focus-visible {
    border-color: var(--tc-blue);
    color: var(--tc-blue);
}

.tc-set-chip > svg {
    width: 15px;
    height: 15px;
}

.tc-set .tc-set-wide {
    width: 100%;
}

.tc-set .tc-set-state {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px !important;
    font-weight: 600;
}

.tc-set-state.is-on { background: #e6f6ec; color: #17663a; }
.tc-set-state.is-off { background: #fdecec; color: #b42318; }

.tc-set-state > svg {
    width: 16px;
    height: 16px;
}

/* Account protection: three steps and a bar */
.tc-set-protect-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

body .tc-set .tc-set-title {
    margin: 0;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.3;
    letter-spacing: -.025em;
    color: var(--tc-ink);
}

.tc-set .tc-set-count {
    font-size: 13px !important;
    font-weight: 600;
    color: var(--tc-accent);
    white-space: nowrap;
}

.tc-set-bar {
    height: 6px;
    margin: 14px 0 16px;
    border-radius: 999px;
    background: var(--tc-sky-deep);
    overflow: hidden;
}

.tc-set-bar > span,
.tc-pd-meter > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--tc-blue);
    transform-origin: left center;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
    animation: tc-bar-grow .9s cubic-bezier(.2, .7, .2, 1) both;
}

.tc-set-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tc-set-checks a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 14px 0 7px;
    border: 1px solid var(--tc-line);
    border-radius: 999px;
    background: #ffffff;
    font-size: 14px;
    font-weight: 500;
    color: var(--tc-ink);
    text-decoration: none;
    transition: border-color .2s, background-color .2s;
}

.tc-set-checks a:hover,
.tc-set-checks a:focus-visible {
    border-color: var(--tc-blue);
    color: var(--tc-ink);
}

.tc-set-tick {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1.5px dashed var(--tc-input-line);
    border-radius: 999px;
}

.tc-set-checks .is-done a {
    background: var(--tc-sky-soft);
}

.tc-set-checks .is-done .tc-set-tick {
    border: 0;
    background: var(--tc-blue);
    color: #ffffff;
}

.tc-set-tick :is(.tc-icon, .lucide) {
    width: 13px;
    height: 13px;
    stroke-width: 2.6;
}

/* Card heads: icon tile, title, one line, optional control */
.tc-set-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.tc-set-tile {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--tc-active);
    color: var(--tc-blue);
}

.tc-set-tile :is(.tc-icon, .lucide) {
    width: 20px;
    height: 20px;
}

.tc-set-head-text {
    flex: 1 1 auto;
    min-width: 0;
}

.tc-set .tc-set-head-text p {
    margin: 4px 0 0;
    font-size: 14px !important;
    line-height: 1.55;
    color: var(--tc-muted);
}

.tc-set-head-aside {
    flex: 0 0 auto;
    padding-top: 8px;
}

/* Password */
.tc-set-form {
    display: grid;
    gap: 16px;
}

.tc-set-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

/* Two-factor */
.tc-set-steps {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--tc-line-soft);
    list-style: none;
    counter-reset: tc-step;
}

.tc-set .tc-set-steps > li {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 18px 0 18px 44px;
    border-bottom: 1px solid var(--tc-line-soft);
    counter-increment: tc-step;
}

.tc-set-steps > li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.tc-set-steps > li::before {
    content: counter(tc-step);
    position: absolute;
    top: 18px;
    left: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--tc-blue);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
}

.tc-set-step-text strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--tc-ink);
}

.tc-set .tc-set-step-text p,
.tc-set .tc-set-off p {
    margin: 2px 0 0;
    font-size: 14px !important;
    line-height: 1.5;
    color: var(--tc-muted);
}

.tc-set-qr {
    width: 168px;
    height: 168px;
    padding: 8px;
    border: 1px solid var(--tc-line);
    border-radius: 12px;
    background: #ffffff;
}

.tc-set-key {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 12px;
    border: 1px dashed var(--tc-input-line);
    border-radius: 10px;
    background: var(--tc-sky-soft);
}

.tc-set-key code {
    flex: 1 1 auto;
    min-width: 0;
    letter-spacing: .06em;
    overflow-wrap: anywhere;
}

.tc-set-otp {
    display: flex;
    gap: 10px;
}

.tc-set-otp .tc-input {
    flex: 0 1 220px;
}

.tc-set .tc-set-otp .form-control {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 18px !important;
    letter-spacing: .4em;
    text-align: center;
}

.tc-set-off {
    display: grid;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--tc-line-soft);
}

/* Recent sign-ins */
.tc-set-history .table-responsive {
    border: 1px solid var(--tc-line-soft);
    border-radius: 12px;
}

/* custom.css centres every table cell; sign-ins read left to right so the dates line up. */
.tc-set-table th,
.tc-set-table td {
    padding: 14px 18px !important;
    border-color: var(--tc-line-soft);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.tc-set-table td {
    font-size: 14px;
    color: var(--tc-ink);
}

.tc-set-table tbody tr:last-child td {
    border-bottom: 0;
}

/* custom.css centres every heading cell with !important (thead>tr>th). */
.tc-set-table thead > tr > th {
    text-align: left !important;
}

/* Fixed columns: the date (with its "Latest" badge) gets a set width, the other four share the rest.
   Below the minimum width the table scrolls inside its frame instead of squeezing. */
.tc-set-table {
    min-width: 760px;
    table-layout: fixed;
}

.tc-set-table th:first-child {
    width: 260px;
}

.tc-set-table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-set-table .tc-set-ip {
    font-variant-numeric: tabular-nums;
    color: var(--tc-muted);
}

.tc-set-empty {
    color: var(--tc-muted-2);
    opacity: .6;
}

.tc-set .tc-set-latest {
    margin-left: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e6f6ec;
    color: #17663a;
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Modals (rendered outside page wrappers; profile + Header use .tc-modal) */
/* style.css gives html `overflow-x: hidden`, so the page scrolls on html and Bootstrap's body.modal-open lock
   never takes effect. Lock html too while any modal is open. */
html:has(body.modal-open) {
    overflow: hidden;
}

/* Blurred page behind every modal. Opacity stays 1 (Bootstrap uses .5) so the blur isn't washed out. */
.modal-backdrop.show {
    opacity: 1;
    background-color: rgba(20, 21, 24, .35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.tc-modal .modal-content {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(20, 21, 24, .18);
}

.tc-modal .modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--tc-line-soft);
}

body .tc-modal .modal-title {
    margin: 0;
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: -.03em;
}

.tc-modal .modal-body {
    padding: 24px;
}

.tc-modal .modal-footer {
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--tc-line-soft);
}

.tc-modal .modal-footer > * {
    margin: 0;
}

.tc-set-avatars {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 16px;
}

.tc-set-avatar-option {
    position: relative;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--tc-sky);
    cursor: pointer;
    transition: transform .2s;
}

.tc-set-avatar-option img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--tc-line);
    transition: box-shadow .2s;
}

.tc-set-avatar-option:hover {
    transform: translateY(-2px);
}

.tc-set-avatar-option.is-selected img {
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px var(--tc-blue);
}

.tc-set-avatar-option:focus-visible {
    outline: 2px solid var(--tc-blue);
    outline-offset: 6px;
}

.tc-set-avatar-check {
    position: absolute;
    right: 0;
    bottom: 0;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--tc-blue);
    color: #ffffff;
    box-shadow: 0 0 0 2px #ffffff;
}

.tc-set-avatar-check :is(.tc-icon, .lucide) {
    width: 14px;
    height: 14px;
    stroke-width: 2.6;
}

/* Desktop: identity card sticks beside the actions; password and two-factor side by side. */
@media (min-width: 1200px) {
    .tc-set-body {
        gap: 24px;
    }

    .tc-set-grid {
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }

    .tc-set .tc-set-id {
        position: sticky;
        top: calc(var(--tc-header) + 24px);
    }

    .tc-set-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        align-items: start;
    }

    .tc-set-protect {
        grid-column: 1 / -1;
    }
}

/* Phones: sign-ins become labelled rows; the code field takes the full width. */
@media (max-width: 767px) {
    .tc-set-table thead {
        display: none;
    }

    .tc-set-table,
    .tc-set-table tbody,
    .tc-set-table tr,
    .tc-set-table td {
        display: block;
        width: 100%;
    }

    .tc-set-table {
        min-width: 0;
    }

    .tc-set-table tr {
        padding: 12px 16px;
        border-bottom: 1px solid var(--tc-line-soft);
    }

    .tc-set-table tr:last-child {
        border-bottom: 0;
    }

    .tc-set-table td {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 4px 0 !important;
        border: 0;
        text-align: right;
        white-space: normal;
    }

    .tc-set-table td::before {
        content: attr(data-label);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .06em;
        text-align: left;
        text-transform: uppercase;
        color: var(--tc-muted-2);
    }
}

@media (max-width: 575px) {
    .tc-set .tc-set-card,
    .tc-set .tc-set-id {
        padding: 20px;
        border-radius: 14px;
    }

    .tc-set-otp {
        flex-direction: column;
    }

    .tc-set-otp .tc-input {
        flex-basis: auto;
    }

    .tc-set .tc-set-steps > li {
        padding-left: 40px;
    }
}

/* ---------- Property details: photos and facts left, a sticky term sheet right ---------- */

.tc-pd-loading {
    display: flex;
    justify-content: center;
    padding: 96px 0;
}

.tc-pd-head {
    margin-bottom: 28px;
}

.tc-pd .tc-pd-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tc-muted);
    text-decoration: none;
    transition: color .2s, gap .2s;
}

.tc-pd .tc-pd-back:hover,
.tc-pd .tc-pd-back:focus-visible {
    gap: 10px;
    color: var(--tc-blue);
}

.tc-pd-back :is(.tc-icon, .lucide) {
    width: 16px;
    height: 16px;
}

/* Title block left, countdown right; they stack on narrow screens. */
.tc-pd-headrow {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px 32px;
}

.tc-pd-headtext {
    flex: 1 1 420px;
    min-width: 0;
}

.tc-pd .tc-pd-status {
    display: inline-block;
    margin: 0;
    padding: 5px 12px;
    font-size: 12px !important;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tc-pd .tc-pd-countdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 18px;
    border: 1px solid var(--tc-line);
    border-radius: 14px;
    background: #ffffff;
}

.tc-pd .tc-pd-countdown-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tc-muted-2);
}

.tc-pd-countdown-label :is(.tc-icon, .lucide) {
    width: 15px;
    height: 15px;
    color: var(--tc-blue);
}

/* The shared countdown (utils/calculateCountdown.js) is absolutely positioned for property cards;
   here it sits in the flow as plain figures. */
.tc-pd .tc-pd-countdown .de_countdown {
    position: static;
    left: auto;
    bottom: auto;
    z-index: auto;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    transform: none;
    text-align: left;
}

.tc-pd-countdown .de_countdown > .fa-solid {
    display: none;
}

.tc-pd .tc-pd-countdown .countdown-row {
    display: flex;
    gap: 14px;
}

.tc-pd .tc-pd-countdown .countdown-section {
    margin: 0;
    font-size: 22px !important;
}

.tc-pd-countdown .countdown-amount {
    font-weight: 600 !important;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--tc-ink) !important;
}

body .tc-pd .tc-pd-title {
    margin: 0;
    font-size: clamp(30px, 3.4vw, 44px) !important;
    font-weight: 600 !important;
    line-height: 1.08;
    letter-spacing: -.04em;
    color: var(--tc-ink);
    overflow-wrap: anywhere;
}

.tc-pd .tc-pd-address {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    font-size: 15px !important;
    line-height: 1.5;
    color: var(--tc-muted);
}

.tc-pd-address :is(.tc-icon, .lucide) {
    width: 16px;
    height: 16px;
    color: var(--tc-blue);
}

/* Layout: two independent columns on desktop (photos, facts, amenities, documents | term sheet,
   description, token). Below 992px the column wrappers dissolve and the blocks reorder to
   photo → term sheet → description → amenities/documents. */
.tc-pd-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tc-pd-col { display: contents; }
.tc-pd-media { order: 1; min-width: 0; }
.tc-pd-panel { order: 2; }
.tc-pd-body { order: 3; min-width: 0; }
.tc-pd-extra { order: 4; min-width: 0; }
.tc-pd-extra:empty { display: none; }

/* Gallery */
.tc-pd-stage {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: var(--tc-sky-deep);
}

.tc-pd-main .swiper-slide {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    height: auto;
    background: #0f1424;
}

.tc-pd-main img {
    display: block;
    width: 100%;
    height: 100%;
    user-select: none;
}

/* The whole photo, uncropped, over a blurred and dimmed copy that fills the frame. */
.tc-pd-main .tc-pd-photo {
    position: relative;
    object-fit: contain;
}

.tc-pd-main .tc-pd-backdrop {
    position: absolute;
    inset: 0;
    object-fit: cover;
    filter: blur(24px) brightness(.62) saturate(1.1);
    transform: scale(1.15);
    pointer-events: none;
}

.tc-pd-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: var(--tc-ink);
    box-shadow: 0 6px 18px rgba(20, 21, 24, .14);
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .2s, background-color .2s, color .2s;
}

.tc-pd-nav.is-prev { left: 16px; }
.tc-pd-nav.is-next { right: 16px; }

.tc-pd-stage:hover .tc-pd-nav,
.tc-pd-nav:focus-visible {
    opacity: 1;
}

.tc-pd-nav:hover {
    background: var(--tc-blue);
    color: #ffffff;
}

.tc-pd-nav:focus-visible {
    outline: 2px solid var(--tc-blue);
    outline-offset: 2px;
}

.tc-pd-nav :is(.tc-icon, .lucide) {
    width: 20px;
    height: 20px;
}

@media (hover: none) {
    .tc-pd-nav {
        opacity: 1;
    }
}

.tc-pd .tc-pd-count {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 2;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(20, 21, 24, .62);
    color: #ffffff;
    font-size: 12px !important;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

/* Full-screen button, bottom right of the photo. */
.tc-pd-expand {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .92);
    color: var(--tc-ink);
    box-shadow: 0 6px 18px rgba(20, 21, 24, .18);
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.tc-pd-expand:hover {
    background: var(--tc-blue);
    color: #ffffff;
}

.tc-pd-expand:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.tc-pd-expand :is(.tc-icon, .lucide) {
    width: 18px;
    height: 18px;
}

/* Full-screen viewer (PhotoViewer in PropertyGallery.js) */
.modal.tc-pd-lightbox {
    z-index: 20050;
}

.tc-pd-lightbox .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    background: rgba(9, 11, 18, .97);
    color: #ffffff;
}

.tc-pd-lightbox-bar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
}

.tc-pd-lightbox .tc-pd-lightbox-count {
    font-size: 14px !important;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .8);
}

.tc-pd-lightbox-close,
.tc-pd-lightbox-nav {
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
    cursor: pointer;
    transition: background-color .2s;
}

.tc-pd-lightbox-close {
    width: 44px;
    height: 44px;
}

.tc-pd-lightbox-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 52px;
    height: 52px;
    transform: translateY(-50%);
}

.tc-pd-lightbox-nav.is-prev { left: 24px; }
.tc-pd-lightbox-nav.is-next { right: 24px; }

.tc-pd-lightbox-close:hover,
.tc-pd-lightbox-nav:hover {
    background: rgba(255, 255, 255, .24);
}

.tc-pd-lightbox-close:focus-visible,
.tc-pd-lightbox-nav:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.tc-pd-lightbox-close :is(.tc-icon, .lucide),
.tc-pd-lightbox-nav :is(.tc-icon, .lucide) {
    width: 22px;
    height: 22px;
}

/* Photo area fills whatever the thumbnail strip leaves; the arrows centre on it. */
.tc-pd-lightbox-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.tc-pd-lightbox-main {
    width: 100%;
    height: 100%;
}

.tc-pd-lightbox-main .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 76px 100px 16px;
}

.tc-pd-lightbox-main img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
}

.tc-pd-lightbox .tc-pd-lightbox-thumbs {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    padding: 4px 20px 20px;
}

@media (max-width: 767px) {
    .tc-pd-lightbox-main .swiper-slide {
        padding: 72px 12px 76px;
    }

    .tc-pd-lightbox .tc-pd-lightbox-thumbs {
        padding: 4px 12px 16px;
    }

    /* Arrows sit under the photo, above the thumbnail strip. */
    .tc-pd-lightbox-nav {
        top: auto;
        bottom: 16px;
        width: 46px;
        height: 46px;
        transform: none;
    }

    .tc-pd-lightbox-nav.is-prev { left: calc(50% - 56px); }
    .tc-pd-lightbox-nav.is-next { right: calc(50% - 56px); }
}

.tc-pd-thumbs {
    margin-top: 10px;
}

.tc-pd-thumbs .swiper-slide {
    width: 104px;
    height: 70px;
    overflow: hidden;
    border-radius: 10px;
    opacity: .55;
    cursor: pointer;
    transition: opacity .2s;
}

.tc-pd-thumbs .swiper-slide:hover {
    opacity: .85;
}

.tc-pd-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    outline: 2px solid var(--tc-blue);
    outline-offset: -2px;
}

.tc-pd-thumbs img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tc-pd-gallery.is-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    aspect-ratio: 16 / 10;
    border: 1px dashed var(--tc-input-line);
    border-radius: 16px;
    background: var(--tc-sky-soft);
    color: var(--tc-muted-2);
    font-size: 14px;
}

.tc-pd-gallery.is-empty :is(.tc-icon, .lucide) {
    width: 32px;
    height: 32px;
}

/* Term sheet */
.tc-pd .tc-pd-panel {
    padding: 22px 24px;
    background: #ffffff;
    border: 1px solid var(--tc-line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(20, 21, 24, .04), 0 18px 40px -24px rgba(23, 76, 255, .2);
}

.tc-pd .tc-pd-label {
    display: block;
    margin: 0;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--tc-muted-2);
}

/* Price label on the left, sale status badge on the right. */
.tc-pd-price-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.tc-pd-price strong {
    display: block;
    margin-top: 4px;
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.045em;
    font-variant-numeric: tabular-nums;
    color: var(--tc-ink);
}

.tc-pd-avail {
    margin-top: 16px;
}

.tc-pd-meter {
    height: 8px;
    border-radius: 999px;
    background: var(--tc-sky-deep);
    overflow: hidden;
}

.tc-pd .tc-pd-avail p {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    margin: 0 0 10px;
    font-size: 14px !important;
    line-height: 1.4;
    color: var(--tc-muted);
}

.tc-pd .tc-pd-avail p span {
    font-size: 14px !important;
}

.tc-pd .tc-pd-avail .tc-pd-sold {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--tc-blue);
}

.tc-pd-avail strong,
.tc-pd-terms strong {
    color: var(--tc-ink);
}

/* Sale figures: two-up label/value tiles. */
.tc-pd-figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 16px 0 0;
}

.tc-pd-figures > div {
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--tc-sky-soft);
    box-shadow: inset 0 0 0 1px var(--tc-line-soft);
}

.tc-pd-figures dt {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tc-muted-2);
}

.tc-pd-figures dd {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--tc-ink);
    overflow-wrap: anywhere;
}

/* Narrow phones: two tiles per row split large amounts mid-number ("$1,234,567,8 / 90,000").
   One row per figure, label left and value right, keeps every number whole. */
@media (max-width: 400px) {
    .tc-pd-figures {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .tc-pd-figures > div {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 2px 12px;
    }

    .tc-pd-figures dt {
        margin: 0;
    }

    .tc-pd-figures dd {
        overflow-wrap: normal;
        text-align: right;
    }
}

.tc-pd-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 16px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--tc-line-soft);
    list-style: none;
}

.tc-pd .tc-pd-terms li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px !important;
    color: var(--tc-muted);
}

.tc-pd .tc-pd-terms li span {
    font-size: 14px !important;
}

.tc-pd-terms :is(.tc-icon, .lucide) {
    color: var(--tc-blue);
}

.tc-pd-buy {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--tc-line-soft);
}

.tc-pd .tc-pd-note {
    margin: 14px 0 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--tc-sky);
    font-size: 14px !important;
    line-height: 1.5;
    color: var(--tc-muted);
}

.tc-pd-owner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--tc-line-soft);
}

.tc-pd-owner img {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--tc-line);
}

.tc-pd-owner div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tc-pd .tc-pd-owner .tc-pd-label {
    font-size: 11px !important;
    letter-spacing: .1em;
}

.tc-pd-owner strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--tc-ink);
}

.tc-pd-owner small {
    overflow: hidden;
    font-size: 13px;
    color: var(--tc-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Buy box (components/investment/PurchaseShare.js): stepper and total share one row, the CTA under them. */
.tc-pd-purchase {
    display: grid;
    gap: 12px;
}

.tc-pd-order {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 16px;
}

.tc-pd-qty,
.tc-pd-total {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tc-pd-total {
    align-items: flex-end;
    text-align: right;
}

.tc-pd-stepper {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--tc-line);
    border-radius: 10px;
    background: #ffffff;
}

.tc-pd .tc-pd-stepper button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tc-ink);
    transition: background-color .2s, color .2s;
}

.tc-pd-stepper button:hover:not(:disabled) {
    background: var(--tc-sky);
    color: var(--tc-blue);
}

.tc-pd-stepper button:disabled {
    color: var(--tc-line);
    cursor: not-allowed;
}

.tc-pd-stepper button:focus-visible {
    outline: 2px solid var(--tc-blue);
    outline-offset: -2px;
}

body .tc-pd .tc-pd-stepper input {
    width: 60px;
    height: 38px;
    padding: 0;
    border: 0;
    border-inline: 1px solid var(--tc-line);
    background: #ffffff;
    font-size: 16px !important;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--tc-ink);
}

.tc-pd-stepper input:focus {
    outline: none;
    background: var(--tc-sky-soft) !important;
}


.tc-pd-total strong {
    font-size: 24px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--tc-ink);
}

.tc-pd-total strong small {
    margin-left: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--tc-muted-2);
}

.tc-pd .tc-pd-balance {
    margin: 0;
    font-size: 12px !important;
    color: var(--tc-muted-2);
    text-align: right;
}

.tc-pd .btn-main.tc-pd-cta {
    width: 100%;
    min-height: 46px;
    font-size: 15px !important;
}

.tc-pd .tc-pd-hint {
    display: flex;
    gap: 8px;
    margin: 0;
    font-size: 13px !important;
    line-height: 1.5;
    color: var(--tc-muted);
}

.tc-pd .tc-pd-hint span {
    font-size: 13px !important;
}

.tc-pd-hint :is(.tc-icon, .lucide) {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--tc-accent);
}

/* Facts, description, amenities, documents, token */
.tc-pd-facts-wrap {
    display: grid;
    gap: 16px;
}

/* Key facts strip sits under the photo thumbnails. */
.tc-pd-media .tc-pd-facts {
    margin-top: 16px;
}

/* Divider lines: each fact draws its top and left edge; the frame clips the outer ones. */
.tc-pd-facts {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--tc-line);
    border-radius: 16px;
    background: #ffffff;
}

.tc-pd-fact {
    flex: 1 1 96px;
    min-width: 0;
    padding: 12px 12px 12px 14px;
    box-shadow: -1px -1px 0 var(--tc-line-soft);
}

.tc-pd-fact dt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tc-muted-2);
}

.tc-pd-fact dt :is(.tc-icon, .lucide) {
    width: 14px;
    height: 14px;
    color: var(--tc-blue);
}

.tc-pd-fact dd {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .02em;
    color: var(--tc-ink);
    overflow-wrap: anywhere;
}

.tc-pd .tc-pd-section {
    padding: 20px 22px;
    border: 1px solid var(--tc-line);
    border-radius: 16px;
    background: #ffffff;
}

body .tc-pd .tc-pd-h2 {
    margin: 0 0 12px;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.3;
    letter-spacing: -.03em;
    color: var(--tc-ink);
}

.tc-pd .tc-pd-about {
    max-width: 75ch;
    margin: 0;
    font-size: 16px !important;
    line-height: 1.75;
    color: var(--tc-muted);
    white-space: pre-line;
}

.tc-pd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tc-pd .tc-pd-chips li {
    padding: 7px 14px;
    border: 1px solid var(--tc-line-soft);
    border-radius: 999px;
    background: var(--tc-sky);
    text-transform: capitalize;
    font-size: 14px !important;
    font-weight: 500;
    color: var(--tc-ink);
}

.tc-pd-docs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tc-pd-doc {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 14px 16px;
    border: 1px solid var(--tc-line);
    border-radius: 12px;
    background: #ffffff;
    color: var(--tc-ink);
    text-decoration: none;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}

.tc-pd-doc:hover {
    border-color: var(--tc-blue);
    box-shadow: 0 12px 24px -16px rgba(23, 76, 255, .45);
    color: var(--tc-ink);
    transform: translateY(-2px);
}

.tc-pd-doc:focus-visible,
.tc-pd-token:focus-visible {
    outline: 2px solid var(--tc-blue);
    outline-offset: 2px;
}

.tc-pd-doc-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--tc-active);
    color: var(--tc-blue);
}

.tc-pd-doc-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.tc-pd-doc-text strong {
    font-size: 15px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.tc-pd-doc-text small {
    font-size: 12px;
    color: var(--tc-muted-2);
}

.tc-pd-doc > :is(.tc-icon, .lucide) {
    width: 16px;
    height: 16px;
    color: var(--tc-muted-2);
}

.tc-pd-doc:hover > :is(.tc-icon, .lucide) {
    color: var(--tc-blue);
}

.tc-pd-token {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 16px 18px;
    border: 1px solid var(--tc-line);
    border-radius: 12px;
    background: var(--tc-sky-soft);
    color: var(--tc-ink);
    text-decoration: none;
    transition: border-color .2s;
}

.tc-pd-token:hover {
    border-color: var(--tc-blue);
    color: var(--tc-ink);
}

.tc-pd-token > :is(.tc-icon, .lucide) {
    width: 22px;
    height: 22px;
    color: var(--tc-blue);
}

.tc-pd .tc-pd-token > span {
    font-size: 15px !important;
}

.tc-pd .tc-pd-token .tc-pd-token-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 14px !important;
    font-weight: 600;
    color: var(--tc-blue);
}

.tc-pd-token-link :is(.tc-icon, .lucide) {
    width: 15px;
    height: 15px;
}

/* Your position */
.tc-pd .tc-pd-position {
    margin-top: 56px;
    padding: 0;
}

/* A purchase scrolls here; land below the fixed header. */
.tc-pd .tc-pd-position,
.tc-pd-lists {
    scroll-margin-top: calc(var(--tc-header) + 24px);
}

.tc-pd-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin: 0;
}

.tc-pd-stat {
    padding: 22px 24px;
    border: 1px solid var(--tc-line);
    border-radius: 16px;
    background: #ffffff;
}

.tc-pd-stat dt {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tc-muted-2);
}

.tc-pd-stat dd {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    color: var(--tc-ink);
    overflow-wrap: anywhere;
}

.tc-pd-stat dd small {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--tc-muted-2);
}

.tc-pd-stat.is-accent {
    background: var(--tc-blue);
    border-color: var(--tc-blue);
}

.tc-pd-stat.is-accent dt,
.tc-pd-stat.is-accent dd small {
    color: rgba(255, 255, 255, .78);
}

.tc-pd-stat.is-accent dd {
    color: #ffffff;
}

/* Lists under the page (existing table components) */
.tc-pd-lists {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 56px;
}

.tc-pd-wide {
    grid-column: 1 / -1;
}

/* Owner notices: rejected / waiting for approval */
.tc-pd-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 720px;
    margin-bottom: 24px;
    padding: 14px 18px;
    border: 1px solid;
    border-radius: 12px;
}

.tc-pd-notice > :is(.tc-icon, .lucide) {
    width: 20px;
    height: 20px;
    margin-top: 2px;
}

.tc-pd-notice strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
}

.tc-pd .tc-pd-notice p {
    margin: 2px 0 0;
    font-size: 14px !important;
    line-height: 1.5;
}

.tc-pd-notice.is-danger { background: #fdecec; border-color: #f6c9c5; color: #b42318; }
.tc-pd .tc-pd-notice.is-danger p { color: #7a271a; }
.tc-pd-notice.is-warn { background: #fff8e8; border-color: #f3dfae; color: #7a5a12; }
.tc-pd .tc-pd-notice.is-warn p { color: #7a5a12; }

@media (min-width: 992px) {
    /* Desktop: photos, facts, amenities and documents on the left half; term sheet and the rest on the right. */
    .tc-pd-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
        align-items: start;
    }

    .tc-pd-col {
        display: flex;
        flex-direction: column;
        gap: 16px;
        min-width: 0;
    }

    .tc-pd-main .swiper-slide,
    .tc-pd-gallery.is-empty {
        aspect-ratio: 4 / 3;
    }

    .tc-pd-lists.is-split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .tc-pd-grid {
        column-gap: 40px;
    }

    .tc-pd-figures {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .tc-pd .tc-pd-panel {
        padding: 22px;
    }

    .tc-pd-price strong {
        font-size: 34px;
    }

    .tc-pd-main .swiper-slide {
        aspect-ratio: 4 / 3;
    }

    .tc-pd-stage,
    .tc-pd-gallery.is-empty {
        border-radius: 12px;
    }

    .tc-pd-thumbs .swiper-slide {
        width: 68px;
        height: 48px;
    }

    .tc-pd-stat dd {
        font-size: 24px;
    }

    .tc-pd-facts-wrap {
        gap: 16px;
    }

    .tc-pd .tc-pd-section {
        padding: 20px;
    }

    .tc-pd .tc-pd-countdown {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tc-set-bar > span,
    .tc-pd-meter > span {
        animation: none;
        transition: none;
    }

    .tc-set-avatar-edit,
    .tc-set-avatar-option,
    .tc-pd-back,
    .tc-pd-doc,
    .tc-pd-nav,
    .tc-pd-expand,
    .tc-pd-lightbox-close,
    .tc-pd-lightbox-nav {
        transition: none;
    }

    .tc-set-avatar:hover .tc-set-avatar-edit,
    .tc-set-avatar-option:hover,
    .tc-pd-doc:hover {
        transform: none;
    }
}

/* ---------- Form system (components/includes/form/*, FormErrors, PasswordValidator, AuthCard) ---------- */
/* Label above every field, 46px controls, Lucide icons, one focus ring and one error red everywhere.
   custom.css paints focused fields with !important, so the states below need it too. */

:root {
    --tc-field-h: 48px;
    --tc-field-radius: 10px;
    /* Filled fields: a soft fill and a faint line at rest, white with the blue ring on focus. */
    --tc-field-fill: #f4f6fb;
    --tc-field-fill-hover: #eef1f8;
    --tc-field-line: #e2e7f1;
    --tc-field-hover: #c9d2e6;
    --tc-field-icon: #737a8d;
    --tc-ring: 0 0 0 4px rgba(23, 76, 255, .12);
    --tc-danger: #c4320a;
    --tc-danger-ink: #912018;
    --tc-danger-ring: 0 0 0 4px rgba(217, 45, 32, .12);
    --tc-danger-bg: #fef3f2;
    --tc-danger-line: #fecdca;
    --tc-ok: #17803d;
    --tc-warn: #dc6803;
}

.tc-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
}

.tc-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tc-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

body .tc-label {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--tc-ink);
}

body .tc-hint {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--tc-muted-2);
}

/* Small text link beside a label or under a field ("Forgot password?", "Resend code"). */
body .tc-link {
    padding: 0;
    border: 0;
    background: none;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tc-blue);
    text-decoration: none;
    cursor: pointer;
    transition: color .2s;
}

body .tc-link:hover {
    color: var(--tc-blue-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body .tc-link:focus-visible {
    outline: 2px solid var(--tc-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

body .tc-link:disabled {
    color: var(--tc-muted-2);
    text-decoration: none;
    cursor: default;
}

/* Input shell: leading icon, the field, optional trailing button. */
.tc-input {
    position: relative;
    display: flex;
    align-items: center;
}

.tc-input .tc-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    color: var(--tc-field-icon);
    pointer-events: none;
    transition: color .2s;
}

body .tc-input .form-control {
    width: 100%;
    height: var(--tc-field-h);
    min-height: var(--tc-field-h);
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--tc-field-line) !important;
    border-radius: var(--tc-field-radius) !important;
    background: var(--tc-field-fill) !important;
    color: var(--tc-ink) !important;
    font-family: Manrope, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.4;
    box-shadow: none !important;
    transition: border-color .2s, box-shadow .2s;
}

body .tc-input.has-icon .form-control {
    padding-left: 42px;
}

body .tc-input.has-action .form-control {
    padding-right: 48px !important;
}

body .tc-input .form-control::placeholder {
    color: #737a8d;
    opacity: 1;
}

body .tc-input .form-control:hover {
    border-color: var(--tc-field-hover) !important;
    background: var(--tc-field-fill-hover) !important;
}

body .tc-input .form-control:focus {
    border-color: var(--tc-blue) !important;
    background: #ffffff !important;
    box-shadow: var(--tc-ring) !important;
    outline: none;
}

.tc-input:focus-within .tc-input-icon {
    color: var(--tc-blue);
}

body .tc-input .form-control.is-invalid {
    border-color: var(--tc-danger) !important;
}

body .tc-input .form-control.is-invalid:focus {
    box-shadow: var(--tc-danger-ring) !important;
}

.tc-input:has(.is-invalid) .tc-input-icon {
    color: var(--tc-danger);
}

/* Browser autofill keeps the white field instead of its yellow / blue fill. */
body .tc-input .form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 40px var(--tc-field-fill) inset !important;
    -webkit-text-fill-color: var(--tc-ink);
}

.tc-input-action {
    position: absolute;
    right: 4px;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--tc-field-icon);
    transform: translateY(-50%);
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.tc-input-action svg {
    width: 18px;
    height: 18px;
}

.tc-input-action:hover {
    background: var(--tc-sky);
    color: var(--tc-ink);
}

.tc-input-action:focus-visible {
    outline: 2px solid var(--tc-blue);
    outline-offset: -2px;
    color: var(--tc-ink);
}

/* Field error: icon + text, so the state never relies on colour alone. */
body .tc-field-error {
    align-items: flex-start;
    gap: 6px;
    margin-top: 7px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--tc-danger) !important;
}

.tc-field-error svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 1px;
}

/* Form-level alert (server / network errors) and info notices. */
.tc-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 12px 12px 14px;
    border: 1px solid var(--tc-danger-line);
    border-radius: 10px;
    background: var(--tc-danger-bg);
    color: var(--tc-danger-ink);
    font-size: 14px;
    line-height: 1.5;
}

.tc-alert.is-info {
    border-color: var(--tc-line);
    background: var(--tc-band);
    color: var(--tc-accent);
}

.tc-alert.is-warning {
    border-color: color-mix(in srgb, var(--tc-warn) 35%, transparent);
    background: color-mix(in srgb, var(--tc-warn) 8%, transparent);
    color: var(--tc-warn);
}

.tc-alert-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.tc-alert-text {
    flex: 1 1 auto;
    min-width: 0;
}

.tc-alert-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: -2px -2px 0 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    opacity: .75;
    cursor: pointer;
    transition: background-color .2s, opacity .2s;
}

.tc-alert-close svg {
    width: 16px;
    height: 16px;
}

.tc-alert-close:hover {
    background: rgba(145, 32, 24, .08);
    opacity: 1;
}

.tc-alert-close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
    opacity: 1;
}

.tc-alert-actions {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -4px -4px -4px 0;
}

.tc-alert-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid currentColor;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s;
}

.tc-alert-btn svg {
    width: 15px;
    height: 15px;
}

.tc-alert-btn:hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.tc-alert-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

@media (max-width: 575px) {
    .tc-alert:has(.tc-alert-actions) {
        flex-wrap: wrap;
    }

    .tc-alert-actions {
        flex-basis: 100%;
        margin: 0 0 0 28px;
    }
}

/* Checkbox: the native input stays focusable underneath the drawn box. */
.tc-check {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-weight: 400 !important;
    cursor: pointer;
}

.tc-check input {
    position: absolute;
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.tc-check-box {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1.5px solid #b7c0d6;
    border-radius: 5px;
    background: #ffffff;
    color: #ffffff;
    transition: background-color .15s, border-color .15s, box-shadow .2s;
}

.tc-check-box svg {
    width: 14px;
    height: 14px;
    stroke-width: 3;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .15s, transform .15s;
}

.tc-check:hover .tc-check-box {
    border-color: var(--tc-blue);
}

.tc-check input:checked + .tc-check-box {
    border-color: var(--tc-blue);
    background: var(--tc-blue);
}

.tc-check input:checked + .tc-check-box svg {
    opacity: 1;
    transform: none;
}

.tc-check input:focus-visible + .tc-check-box {
    box-shadow: var(--tc-ring);
    border-color: var(--tc-blue);
}

.tc-check.is-invalid .tc-check-box {
    border-color: var(--tc-danger);
}

body .tc-check-text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--tc-muted);
}

body .tc-check-text a {
    font-weight: 600;
    color: var(--tc-blue);
    text-decoration: none;
}

body .tc-check-text a:hover {
    color: var(--tc-blue-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Password strength: five bars (one per rule met) and the rule checklist. */
.tc-pw {
    margin-top: 10px;
}

.tc-pw-meter {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tc-pw-bars {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.tc-pw-bars span {
    height: 4px;
    border-radius: 999px;
    background: var(--tc-line-soft);
    transition: background-color .25s;
}

.tc-pw[data-score="1"] .tc-pw-bars .is-on,
.tc-pw[data-score="2"] .tc-pw-bars .is-on { background: var(--tc-danger); }
.tc-pw[data-score="3"] .tc-pw-bars .is-on { background: var(--tc-warn); }
.tc-pw[data-score="4"] .tc-pw-bars .is-on { background: var(--tc-blue); }
.tc-pw[data-score="5"] .tc-pw-bars .is-on { background: var(--tc-ok); }

.tc-pw-label {
    flex: 0 0 auto;
    font-size: 12.5px;
    color: var(--tc-muted-2);
}

.tc-pw[data-score="1"] .tc-pw-label strong,
.tc-pw[data-score="2"] .tc-pw-label strong { color: var(--tc-danger); }
.tc-pw[data-score="3"] .tc-pw-label strong { color: var(--tc-warn); }
.tc-pw[data-score="4"] .tc-pw-label strong { color: var(--tc-blue); }
.tc-pw[data-score="5"] .tc-pw-label strong { color: var(--tc-ok); }

.tc-pw-rules {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px 14px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.tc-pw-rules li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--tc-muted-2);
    transition: color .2s;
}

.tc-pw-rules svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: #a6adbf;
    transition: color .2s;
}

.tc-pw-rules li.is-met {
    color: var(--tc-ink);
}

.tc-pw-rules li.is-met svg {
    color: var(--tc-ok);
}

/* Spinning loader inside buttons and links. */
.tc-spin {
    width: 18px;
    height: 18px;
    animation: tc-spin .8s linear infinite;
}

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

/* Full-width submit: the landing's 48px primary button. */
body .tc-form .btn-main.btn-fullwidth {
    display: flex;
    width: 100%;
    min-height: 48px;
    font-size: 15px !important;
}

body .tc-form .btn-main.btn-fullwidth:hover {
    transform: none;
}

/* One-time code: six boxes. */
.tc-otp {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

body .tc-otp input {
    width: 100%;
    height: 54px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--tc-field-line);
    border-radius: 10px;
    background: var(--tc-field-fill);
    color: var(--tc-ink);
    font-family: Manrope, Arial, sans-serif;
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    caret-color: var(--tc-blue);
    transition: border-color .2s, box-shadow .2s;
}

body .tc-otp input:hover {
    border-color: var(--tc-field-hover);
}

body .tc-otp input:focus {
    border-color: var(--tc-blue);
    background: #ffffff;
    box-shadow: var(--tc-ring);
    outline: none;
}

body .tc-otp.is-invalid input {
    border-color: var(--tc-danger);
}

/* Resend row under a code field. */
.tc-resend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    font-size: 13.5px;
    color: var(--tc-muted-2);
}

.tc-resend-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 36px tap target without moving the text around it. */
    min-height: 36px;
    margin-block: -8px;
}

.tc-resend-action svg {
    width: 15px;
    height: 15px;
}

.tc-resend-timer {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--tc-ink);
}

/* Switch: native checkbox (role="switch") under a drawn track. style.css strips checkbox borders. */
.tc-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-weight: 500 !important;
    cursor: pointer;
}

.tc-switch input {
    position: absolute;
    width: 44px;
    height: 24px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.tc-switch-track {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 24px;
    border: 1px solid var(--tc-input-line);
    border-radius: 999px;
    background: var(--tc-sky-deep);
    transition: background-color .2s, border-color .2s, box-shadow .2s;
}

.tc-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(20, 21, 24, .25);
    transition: transform .2s;
}

.tc-switch input:checked + .tc-switch-track {
    border-color: var(--tc-blue);
    background: var(--tc-blue);
}

.tc-switch input:checked + .tc-switch-track .tc-switch-thumb {
    transform: translateX(20px);
}

.tc-switch input:focus-visible + .tc-switch-track {
    box-shadow: var(--tc-ring);
    border-color: var(--tc-blue);
}

.tc-switch input:disabled + .tc-switch-track {
    opacity: .5;
}

body .tc-switch-label {
    font-size: 14px;
    color: var(--tc-ink);
}

/* Modal title bar (ModalHeader.js): title left, Lucide close right. */
.tc-modal .tc-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.tc-modal-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: -6px -8px -6px 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--tc-muted-2);
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.tc-modal-close svg {
    width: 20px;
    height: 20px;
}

.tc-modal-close:hover {
    background: var(--tc-sky);
    color: var(--tc-ink);
}

.tc-modal-close:focus-visible {
    outline: 2px solid var(--tc-blue);
    outline-offset: 0;
}

.tc-modal .tc-form {
    gap: 16px;
}

/* Mobile menu toggle (Header.js): Lucide Menu / X at the theme's 24px icon size. */
.menu-btn .lucide {
    width: 24px;
    height: 24px;
}

/* Buttons that end in an icon ("Verify now" ↗); loaders keep their own 18px. */
.btn-main .lucide:not(.tc-spin),
.btn-search .lucide:not(.tc-spin) {
    width: 16px;
    height: 16px;
}

/* Wallet addresses stay monospace inside the shared input shell. */
body .tc-input .form-control.tc-set-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
}

/* Read-only value with a copy button (KYC link). */
body .tc-input:not(.tc-date-input) .form-control[readonly] {
    background: #eceff6 !important;
    color: var(--tc-muted);
    text-overflow: ellipsis;
}

/* Short check list inside a modal (KYC success). */
.tc-check-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.tc-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--tc-muted);
}

.tc-check-list svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: var(--tc-ok);
}

/* ---------- Property form (add / edit property): grid, textarea, radio pills, dropzone, thumbs, chips ---------- */

body .tc-label-note {
    font-weight: 500;
    color: var(--tc-muted-2);
}

.tc-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.tc-form-actions .btn-main {
    min-height: 48px;
    padding: 0 26px !important;
}

/* Textarea: same line, radius and focus ring as the input shell; optional counter bottom right. */
.tc-textarea-wrap {
    position: relative;
}

body .tc-textarea-wrap .form-control.tc-textarea {
    display: block;
    width: 100%;
    min-height: 128px;
    margin: 0;
    padding: 12px 14px 28px;
    border: 1px solid var(--tc-field-line) !important;
    border-radius: var(--tc-field-radius) !important;
    background: var(--tc-field-fill) !important;
    color: var(--tc-ink) !important;
    font-family: Manrope, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    box-shadow: none !important;
    resize: vertical;
    transition: border-color .2s, box-shadow .2s;
}

body .tc-textarea-wrap .form-control.tc-textarea::placeholder {
    color: #737a8d;
}

body .tc-textarea-wrap .form-control.tc-textarea:hover {
    border-color: var(--tc-field-hover) !important;
    background: var(--tc-field-fill-hover) !important;
}

body .tc-textarea-wrap .form-control.tc-textarea:focus {
    border-color: var(--tc-blue) !important;
    background: #ffffff !important;
    box-shadow: var(--tc-ring) !important;
    outline: none;
}

body .tc-textarea-wrap .form-control.tc-textarea.is-invalid {
    border-color: var(--tc-danger) !important;
}

body .tc-textarea-wrap .form-control.tc-textarea.is-invalid:focus {
    box-shadow: var(--tc-danger-ring) !important;
}

body .tc-count {
    position: absolute;
    right: 12px;
    bottom: 8px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--tc-muted-2);
    pointer-events: none;
}

/* Radio choices as segmented pills (RadioGroup.js). */
.tc-radio-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.tc-radio-group > legend.tc-label {
    float: none;
    width: auto;
    margin: 0 0 7px;
    padding: 0;
    font-size: 14px;
    line-height: 1.3;
}

.tc-radio-options {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--tc-field-line);
    border-radius: 10px;
    background: var(--tc-field-fill);
}

.tc-radio-group.is-invalid .tc-radio-options {
    border-color: var(--tc-danger);
}

.tc-radio {
    position: relative;
    margin: 0;
    font-weight: 600 !important;
    cursor: pointer;
}

.tc-radio input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

body .tc-radio span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 18px;
    border-radius: 7px;
    font-size: 14px;
    color: var(--tc-muted);
    white-space: nowrap;
    transition: background-color .2s, color .2s, box-shadow .2s;
}

.tc-radio:hover span {
    color: var(--tc-ink);
}

.tc-radio input:checked + span {
    background: #ffffff;
    color: var(--tc-blue);
    box-shadow: 0 1px 3px rgba(20, 21, 24, .12);
}

.tc-radio input:focus-visible + span {
    outline: 2px solid var(--tc-blue);
    outline-offset: 1px;
}

/* Dropzone (FileDropzone.js, and the "Add a document" button that opens the document modal). */
.tc-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 28px 20px;
    border: 1.5px dashed #b9c3dc;
    border-radius: 12px;
    background: var(--tc-field-fill);
    font-family: inherit;
    font-weight: 400 !important;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}

.tc-dropzone:hover,
.tc-dropzone.is-over {
    border-color: var(--tc-blue);
    background: var(--tc-field-fill-hover);
}

.tc-dropzone:focus-within,
button.tc-dropzone:focus-visible {
    border-color: var(--tc-blue);
    box-shadow: var(--tc-ring);
    outline: none;
}

.tc-dropzone.is-invalid {
    border-color: var(--tc-danger);
}

.tc-dropzone-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.tc-dropzone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--tc-blue);
    box-shadow: 0 1px 3px rgba(20, 21, 24, .08);
}

.tc-dropzone-icon svg {
    width: 20px;
    height: 20px;
}

body .tc-dropzone-title {
    max-width: 100%;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tc-ink);
    text-align: center;
    overflow-wrap: anywhere;
}

body .tc-dropzone-hint {
    font-size: 13px;
    color: var(--tc-muted-2);
}

body .tc-dropzone-reject {
    font-size: 13px;
    font-weight: 500;
    color: var(--tc-danger);
}

.tc-dropzone.is-compact {
    height: 100%;
    padding: 12px;
    gap: 4px;
}

.tc-dropzone.is-compact .tc-dropzone-icon {
    width: 36px;
    height: 36px;
    margin: 0;
}

body .tc-dropzone.is-compact .tc-dropzone-title {
    font-size: 13px;
}

/* Image thumbnails with a remove button; the last tile adds more. */
.tc-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tc-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--tc-line);
    border-radius: 10px;
    background: var(--tc-sky);
}

.tc-thumbs.is-invalid .tc-thumb {
    border-color: var(--tc-danger);
}

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

.tc-thumb.is-add {
    overflow: visible;
    border: 0;
    background: none;
}

.tc-thumb-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(20, 21, 24, .62);
    color: #ffffff;
    cursor: pointer;
    transition: background-color .2s;
}

/* Phones: 28-30px remove buttons and 26px table actions are too small to tap reliably. */
@media (max-width: 575px) {
    .tc-thumb-remove,
    .tc-file-chip-remove {
        width: 36px !important;
        height: 36px !important;
    }

    td .btn.btn-sm {
        min-height: 36px;
        padding-inline: 12px;
    }
}

.tc-thumb-remove svg {
    width: 16px;
    height: 16px;
}

.tc-thumb-remove:hover {
    background: var(--tc-danger);
}

.tc-thumb-remove:focus-visible {
    outline: 2px solid #ffffff;
    box-shadow: 0 0 0 4px var(--tc-blue);
}

/* Attached documents (FileChip.js). */
.tc-file-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tc-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 8px 6px 8px 12px;
    border: 1px solid var(--tc-line);
    border-radius: 10px;
    background: #ffffff;
}

.tc-file-chip-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--tc-blue);
}

.tc-file-chip-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

body .tc-file-chip-text strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--tc-ink);
}

body .tc-file-chip-text span {
    max-width: 220px;
    overflow: hidden;
    font-size: 12.5px;
    color: var(--tc-muted-2);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-file-chip-remove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--tc-muted-2);
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.tc-file-chip-remove svg {
    width: 16px;
    height: 16px;
}

.tc-file-chip-remove:hover {
    background: var(--tc-danger-bg);
    color: var(--tc-danger);
}

.tc-file-chip-remove:focus-visible {
    outline: 2px solid var(--tc-blue);
    outline-offset: 0;
}

/* react-select inside the form system: 46px like the inputs, red line when invalid. */
body :is(.tc-form, .tc-filter) .react-select-custom > div[class*="-control"][class] {
    min-height: var(--tc-field-h) !important;
    border-color: var(--tc-field-line) !important;
    border-radius: var(--tc-field-radius) !important;
    background: var(--tc-field-fill) !important;
}

body :is(.tc-form, .tc-filter) .react-select-custom > div[class*="-control"][class]:hover {
    border-color: var(--tc-field-hover) !important;
    background: var(--tc-field-fill-hover) !important;
}

body :is(.tc-form, .tc-filter) .react-select-custom > div[class*="-control"][class][class*="focused"],
body :is(.tc-form, .tc-filter) .react-select-custom > div[class*="-control"][class]:focus-within {
    border-color: var(--tc-blue) !important;
    background: #ffffff !important;
    box-shadow: var(--tc-ring) !important;
}

:is(.tc-form, .tc-filter) .is-invalid-group {
    box-shadow: none;
}

body :is(.tc-form, .tc-filter) .is-invalid-group .react-select-custom > div[class*="-control"][class] {
    border-color: var(--tc-danger) !important;
}

body :is(.tc-form, .tc-filter) .is-invalid-group .react-select-custom > div[class*="-control"][class]:focus-within {
    box-shadow: var(--tc-danger-ring) !important;
}

/* Date fields (DateRangePickerWrapper.js). The !important padding beats custom.css `.form-control-rounded`
   (padding: 0 20px !important), which the filter bars still use, so the calendar icon never covers the text. */
body .tc-date-input .form-control {
    padding-left: 42px !important;
    cursor: pointer;
}

.tc-date-popup {
    overflow: hidden;
    border: 1px solid var(--tc-line);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(20, 21, 24, .14);
}

@media (max-width: 575px) {
    .tc-radio-options {
        display: flex;
    }

    .tc-radio {
        flex: 1 1 0;
    }

    body .tc-radio span {
        padding: 0 10px;
    }

    .tc-form-actions .btn-main {
        width: 100%;
    }

    .tc-thumbs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body .tc-file-chip-text span {
        max-width: 160px;
    }
}

/* ---------- Page frame: let position: sticky work ----------
   body (Bootstrap .overflow-x-hidden), #wrapper (style.css overflow: hidden) and .section-container (custom.css
   overflow-y: auto) never scroll, but those values still make them scroll containers, so every sticky element in
   the panel (property summary, property terms, settings card) stuck to them instead of the viewport.
   `clip` clips the same way without creating a scroll container. Sign-in pages scroll #wrapper itself and keep it. */
body.overflow-x-hidden {
    overflow-x: clip !important;
}

#wrapper:not(.auth-main) {
    overflow: clip;
}

#wrapper:not(.auth-main) > .section-container {
    overflow: visible;
    overflow-x: clip;
}

/* ---------- Property page layout: numbered section cards + sticky summary (FormSection.js, PropertySummary.js) ---------- */

.tc-property-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
}

.tc-property-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.tc-fsec {
    padding: 24px 28px 28px;
    border: 1px solid var(--tc-line);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(20, 21, 24, .04);
    scroll-margin-top: 96px;
}

.tc-fsec-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--tc-line-soft);
}

.tc-fsec-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--tc-active);
    color: var(--tc-blue);
    font-size: 14px;
    font-weight: 600;
}

body .tc-fsec-title {
    margin: 4px 0 0;
    font-size: 18px !important;
    font-weight: 600;
    line-height: 1.3 !important;
    letter-spacing: -.02em;
    color: var(--tc-ink);
}

body .tc-fsec-desc {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--tc-muted);
}

.tc-fsec-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tc-grid-2,
.tc-grid-3 {
    display: grid;
    gap: 20px;
}

.tc-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tc-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tc-span-full {
    grid-column: 1 / -1;
}

/* Summary panel */
.tc-sum {
    position: sticky;
    top: 96px;
}

.tc-sum-card {
    padding: 22px;
    border: 1px solid var(--tc-line);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(20, 21, 24, .06);
}

.tc-sum-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

body .tc-sum-title {
    margin: 0;
    font-size: 16px !important;
    font-weight: 600;
    line-height: 1.3 !important;
    color: var(--tc-ink);
}

body .tc-sum-count {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--tc-muted-2);
}

.tc-sum-bar {
    height: 6px;
    margin: 12px 0 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--tc-line-soft);
}

.tc-sum-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--tc-blue);
    transform-origin: left center;
    transition: transform .3s ease;
}

.tc-sum-steps {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tc-sum-steps a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--tc-muted);
    text-decoration: none;
    transition: background-color .2s, color .2s;
}

.tc-sum-steps a:hover {
    background: var(--tc-sky);
    color: var(--tc-ink);
}

.tc-sum-steps a:focus-visible {
    outline: 2px solid var(--tc-blue);
    outline-offset: 0;
}

.tc-sum-steps svg {
    width: 18px;
    height: 18px;
    color: #8a91a3;
}

.tc-sum-steps .is-done a {
    color: var(--tc-ink);
}

.tc-sum-steps .is-done svg {
    color: var(--tc-ok);
}

.tc-sum-total {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 16px 0;
    padding: 16px 0;
    border-top: 1px solid var(--tc-line-soft);
    border-bottom: 1px solid var(--tc-line-soft);
}

body .tc-sum-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tc-muted-2);
}

body .tc-sum-value {
    font-size: 24px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    color: var(--tc-ink);
    overflow-wrap: anywhere;
}

body .tc-sum-formula {
    font-size: 12.5px;
    color: var(--tc-muted-2);
}

.tc-sum-alert {
    margin-bottom: 12px;
}

body .tc-sum-submit {
    display: flex;
    width: 100%;
    min-height: 48px;
    font-size: 15px !important;
}

/* Phones and tablets: the summary follows the sections, a bottom bar keeps total + submit in reach. */
.tc-sum-mobile {
    display: none;
}

@media (max-width: 1199px) {
    .tc-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .tc-property-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .tc-sum {
        position: static;
    }

    .tc-sum-alert,
    .tc-sum-submit {
        display: none !important;
    }

    .tc-sum-mobile {
        position: sticky;
        bottom: 0;
        z-index: 20;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px 16px;
        padding: 12px 16px;
        border: 1px solid var(--tc-line);
        border-radius: 14px 14px 0 0;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 -8px 24px rgba(20, 21, 24, .08);
    }

    .tc-sum-mobile-alert {
        flex: 1 0 100%;
    }

    .tc-sum-mobile-total {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    body .tc-sum-mobile-total strong {
        font-size: 17px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: var(--tc-ink);
        overflow-wrap: anywhere;
    }

    body .tc-sum-mobile-submit {
        min-height: 46px;
    }

    /* The wallet widget (web3-onboard account center, bottom right) covered the bar's submit button. */
    body:has(.tc-sum-mobile) {
        --account-center-position-bottom: 84px;
    }

    body:has(.tc-sum-mobile-alert) {
        --account-center-position-bottom: 140px;
    }
}

@media (max-width: 767px) {
    .tc-grid-2,
    .tc-grid-3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .tc-fsec {
        padding: 20px 18px 22px;
    }

    body .tc-sum-label {
        font-size: 12px !important;
    }

    body .tc-sum-count,
    body .tc-sum-formula {
        font-size: 13px !important;
    }

    body .tc-fsec-title,
    body .tc-sum-title {
        font-weight: 600 !important;
    }

    body .tc-sum-mobile-total strong {
        font-size: 16px !important;
    }
}

/* ---------- Inline icons in tables, cards and badges (were Font Awesome glyphs): sized by the text ---------- */
.tc-ico {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

/* ---------- List filters (FilterBar.js): labelled fields in one row, the action aligned with the inputs ---------- */
.tc-filter {
    /* Filters sit on the page tint, not inside a white card, so their fields get a stronger line. */
    --tc-field-line: #bcc6dc;
    --tc-field-hover: #a3afc8;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
}

.tc-filter-fields {
    flex: 1 1 520px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    min-width: 0;
}

.tc-filter .tc-field-head {
    margin-bottom: 6px;
}

body .tc-filter .tc-label {
    font-size: 13px;
    color: var(--tc-muted);
}

.tc-filter-actions {
    display: flex;
    gap: 10px;
    padding-bottom: 0;
}

.tc-filter-actions .btn-search,
.tc-filter-actions .btn-main {
    min-height: var(--tc-field-h);
    padding: 0 20px !important;
}

/* Search box with its submit arrow inside (investor property list). */
.tc-filter-search {
    margin: 0;
}

@media (max-width: 575px) {
    .tc-filter-fields {
        flex-basis: 100%;
        grid-template-columns: minmax(0, 1fr);
    }

    .tc-filter-actions,
    .tc-filter-actions .btn-search,
    .tc-filter-actions .btn-main {
        width: 100%;
    }
}

/* ---------- Swap request (swap/page.js): "you offer" and "you receive" side by side ---------- */
.tc-swap-form {
    margin-top: 20px;
}

.tc-swap-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.tc-swap-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--tc-line);
    border-radius: 14px;
    background: #ffffff;
}

body .tc-swap-side-title {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tc-muted-2);
}

.tc-swap-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--tc-active);
    color: var(--tc-blue);
}

.tc-swap-arrow svg {
    width: 20px;
    height: 20px;
}

/* Busy indicator at the end of an input (swap receiver lookup): same spot as an action, not clickable. */
.tc-input-status {
    position: absolute;
    right: 14px;
    top: 50%;
    display: inline-flex;
    color: var(--tc-field-icon);
    transform: translateY(-50%);
    pointer-events: none;
}

/* ---------- Transfer ROI (ManageROI.js): one row of fields, then the button ---------- */
.tc-roi-form {
    margin-top: 20px;
}

.tc-roi-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) auto;
    gap: 16px;
    align-items: start;
}

/* Lines the button up with the inputs: label height + gap. */
.tc-roi-submit {
    padding-top: 25px;
}

.tc-roi-submit .btn-main {
    min-height: var(--tc-field-h);
}

@media (max-width: 1199px) {
    .tc-roi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tc-roi-submit {
        padding-top: 0;
    }
}

@media (max-width: 991px) {
    .tc-swap-grid {
        grid-template-columns: minmax(0, 1fr);
        justify-items: stretch;
    }

    .tc-swap-arrow {
        justify-self: center;
        transform: rotate(90deg);
    }
}

@media (max-width: 575px) {
    .tc-swap-side,
    .tc-roi-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tc-roi-submit .btn-main {
        width: 100%;
    }
}

/* ---------- Sign-in card ---------- */

body .auth-container {
    padding: 24px 16px !important;
}

.tc-auth-card {
    width: 100%;
    max-width: 550px;
    margin: auto;
    padding: 36px 32px 32px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 24px 64px rgba(8, 22, 64, .28), 0 2px 6px rgba(8, 22, 64, .08);
}

.tc-auth-head {
    margin-bottom: 26px;
    text-align: center;
}

.tc-auth-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: var(--tc-active);
    color: var(--tc-blue);
}

.tc-auth-badge svg {
    width: 22px;
    height: 22px;
}

body .tc-auth-title {
    margin: 0 0 6px;
    font-size: 26px !important;
    font-weight: 800;
    line-height: 1.2 !important;
    letter-spacing: -.03em;
    color: var(--tc-ink);
}

body .tc-auth-sub {
    max-width: 340px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.6;
    color: var(--tc-muted);
}

.tc-auth-card .tc-alert.is-info {
    margin-bottom: 18px;
}

body .tc-auth-alt {
    margin: 22px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--tc-line-soft);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    color: var(--tc-muted);
}

body .tc-auth-alt a {
    margin-left: 4px;
    font-weight: 600;
    color: var(--tc-blue);
    text-decoration: none;
}

body .tc-auth-alt a:hover {
    color: var(--tc-blue-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* custom.css forces input / li / span / button to 14px below 768px; keep form text readable
   and inputs at 16px so iOS does not zoom into a focused field. */
@media (max-width: 767px) {
    body .tc-input .form-control {
        font-size: 16px !important;
    }

    body .tc-otp input {
        font-size: 22px !important;
    }

    body .tc-pw-rules li,
    body .tc-pw-label,
    body .tc-field-error span,
    body .tc-hint {
        font-size: 13px !important;
    }

    body .tc-form .btn-main.btn-fullwidth {
        font-size: 15px !important;
    }

    body .tc-textarea-wrap .form-control.tc-textarea {
        font-size: 16px !important;
    }

    body .tc-dropzone-title {
        font-size: 14.5px !important;
    }

    body .tc-dropzone.is-compact .tc-dropzone-title {
        font-size: 13px !important;
    }

    body .tc-dropzone-hint,
    body .tc-dropzone-reject,
    body .tc-file-chip-text strong {
        font-size: 13px !important;
    }

    body .tc-count {
        font-size: 12px !important;
    }

    body .tc-file-chip-text span {
        font-size: 12.5px !important;
    }

    body .tc-radio span {
        font-size: 14px !important;
        font-weight: 600 !important;
    }
}

@media (max-width: 480px) {
    .tc-auth-card {
        padding: 28px 20px 24px;
        border-radius: 14px;
    }

    body .tc-auth-title {
        font-size: 23px !important;
    }

    .tc-otp {
        gap: 6px;
    }

    body .tc-otp input {
        height: 50px;
        font-size: 20px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tc-spin {
        animation-duration: 2.4s;
    }

    .tc-input .form-control,
    .tc-input-icon,
    .tc-input-action,
    .tc-check-box,
    .tc-check-box svg,
    .tc-pw-bars span,
    .tc-otp input,
    .tc-switch-track,
    .tc-switch-thumb,
    .tc-textarea,
    .tc-radio span,
    .tc-dropzone,
    .tc-thumb-remove,
    .tc-file-chip-remove,
    .tc-sum-bar > span,
    .tc-sum-steps a {
        transition: none;
    }
}

/* ---------- Property card (components/property/PropertyCard.js) ----------
   One card for every property list. The title link's ::after covers the card, so the whole card is
   clickable; .pc-raised elements sit above that overlay. */

.pc-card {
    --pc-radius: 18px;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--tc-line);
    border-radius: var(--pc-radius);
    box-shadow: 0 1px 2px rgba(20, 21, 24, .04), 0 8px 24px rgba(23, 76, 255, .05);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    cursor: pointer;
}

.pc-card:hover {
    transform: translateY(-4px);
    border-color: #c5d0f5;
    box-shadow: 0 2px 4px rgba(20, 21, 24, .04), 0 18px 40px rgba(23, 76, 255, .13);
}

.pc-card:has(.pc-stretched:focus-visible) {
    outline: 2px solid var(--tc-blue);
    outline-offset: 3px;
}

/* Card list: 1 column on phones, 2 from 768px, 3 from 1200px. */
.pc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

@media (min-width: 768px) {
    .pc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

@media (min-width: 1200px) {
    .pc-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Photo */
.pc-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--tc-sky-deep);
}

.pc-media img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform .5s ease;
}

.pc-card:hover .pc-media img {
    transform: scale(1.04);
}

.pc-media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(to top, rgba(10, 16, 34, .55), transparent);
    pointer-events: none;
}

.pc-media-empty {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #9aa8d6;
}

.pc-media-empty svg {
    width: 44px;
    height: 44px;
}

.pc-chips {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.pc-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .01em;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(10, 16, 34, .16);
}

.pc-chip svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.pc-chip-roi {
    background: var(--tc-blue);
    color: #ffffff;
}

.pc-chip-roi.is-excluded {
    background: rgba(255, 255, 255, .94);
    color: var(--tc-muted);
}

.pc-chip-status {
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.pc-chip-status.is-active { color: #12804a; }
.pc-chip-status.is-upcoming,
.pc-chip-status.is-pending { color: #a15c00; }
.pc-chip-status.is-completed { color: var(--tc-accent); }
.pc-chip-status.is-rejected { color: #c62828; }

.pc-countdown-wrap {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.pc-countdown {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 6px 12px 6px 10px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(12, 18, 40, .5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #ffffff;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
}

.pc-countdown-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: #ffb340;
}

.pc-countdown.is-upcoming .pc-countdown-icon {
    color: #8fb0ff;
}

.pc-countdown-label {
    color: rgba(255, 255, 255, .78);
    font-weight: 500;
}

.pc-countdown-time {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Body */
.pc-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px 20px;
}

body .pc-title {
    margin: 0;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.35;
    letter-spacing: -.02em;
}

.pc-title a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tc-ink);
    text-decoration: none;
    transition: color .2s ease;
}

.pc-card:hover .pc-title a {
    color: var(--tc-blue);
}

.pc-stretched::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.pc-stretched:focus-visible {
    outline: none;
}

.pc-address {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -8px 0 0 !important;
    font-size: 13px;
    line-height: 1.5;
    color: var(--tc-muted-2);
}

.pc-address svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--tc-blue);
}

.pc-address span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-stats {
    display: grid;
    grid-template-columns: repeat(var(--pc-cols, 3), minmax(0, 1fr));
    margin: 0;
    border: 1px solid var(--tc-line-soft);
    border-radius: 12px;
    background: var(--tc-sky-soft);
}

.pc-stat {
    min-width: 0;
    padding: 10px 12px;
}

.pc-stat + .pc-stat {
    border-left: 1px solid var(--tc-line-soft);
}

.pc-stats dt,
.pc-meta dt {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tc-muted-2);
}

.pc-stats dd {
    margin: 2px 0 0;
    overflow-wrap: break-word;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    color: var(--tc-ink);
}

.pc-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--tc-muted-2);
}

.pc-progress-head strong {
    font-size: 13px;
    color: var(--tc-ink);
    font-variant-numeric: tabular-nums;
}

.pc-progress-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--tc-sky-deep);
}

.pc-progress-track > span {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--tc-blue), #5a83ff);
    transition: width .6s ease;
}

.pc-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    margin: 0;
    padding-top: 14px;
    border-top: 1px dashed var(--tc-line);
}

.pc-meta > div:nth-child(even) {
    text-align: right;
}

.pc-meta dd {
    margin: 2px 0 0;
    overflow-wrap: break-word;
    font-size: 13px;
    font-weight: 500;
    color: var(--tc-ink);
}

.pc-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

.pc-raised {
    position: relative;
    z-index: 2;
}

.pc-cta {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 10px;
    background: var(--tc-blue);
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease;
}

.pc-cta svg {
    width: 16px;
    height: 16px;
    transition: transform .2s ease;
}

.pc-card:hover .pc-cta,
.pc-cta:hover,
.pc-cta:focus-visible {
    background: var(--tc-blue-hover);
}

.pc-card:hover .pc-cta svg:last-child {
    transform: translateX(3px);
}

.pc-cta:focus-visible {
    outline: 2px solid var(--tc-blue);
    outline-offset: 3px;
}

.pc-extra {
    flex-shrink: 0;
}

.pc-extra:only-child {
    flex: 1;
}

/* Secondary button inside the footer (e.g. "View History"). */
.pc-ghost-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--tc-line);
    border-radius: 10px;
    background: #ffffff;
    color: var(--tc-accent);
    font-size: 14px;
    font-weight: 600;
    transition: background .2s ease, border-color .2s ease;
}

.pc-ghost-btn svg {
    width: 16px;
    height: 16px;
}

.pc-ghost-btn:hover {
    border-color: #c5d0f5;
    background: var(--tc-sky);
}

.pc-ghost-btn:focus-visible {
    outline: 2px solid var(--tc-blue);
    outline-offset: 3px;
}

@media (max-width: 575.98px) {
    .pc-body {
        padding: 16px 16px 18px;
    }

    .pc-stat {
        padding: 9px 10px;
    }

    .pc-stats dd {
        font-size: 14px;
    }

    .pc-countdown {
        font-size: 12px;
    }
}

/* custom.css forces every span / p to 14px !important below 768px; keep the card's own scale. */
@media (max-width: 767.98px) {
    .pc-card .pc-chip,
    .pc-card .pc-countdown,
    .pc-card .pc-countdown span,
    .pc-card .pc-progress-head span {
        font-size: 12px !important;
    }

    .pc-card .pc-address,
    .pc-card .pc-address span {
        font-size: 13px !important;
    }
}

/* Phones (one card per row): show the whole title and address on up to two lines instead of cutting them. */
@media (max-width: 575px) {
    .pc-title a,
    .pc-address span {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
    }
}

/* Extra-narrow phones: keep the countdown on one line by dropping its label. */
@media (max-width: 359.98px) {
    .pc-countdown-label {
        display: none;
    }
}

@media (hover: none) {
    .pc-card:hover {
        transform: none;
    }

    .pc-card:hover .pc-media img {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pc-card,
    .pc-media img,
    .pc-title a,
    .pc-cta,
    .pc-cta svg,
    .pc-progress-track > span {
        transition: none;
    }

    .pc-card:hover,
    .pc-card:hover .pc-media img,
    .pc-card:hover .pc-cta svg:last-child {
        transform: none;
    }
}

/* Scrollbars: thin slate thumb on a pale track, replacing the theme's dark ones (style.css). The thumb
   keeps a transparent border so it reads 4px wide but has a 10px hit area, and thickens on hover. */
::-webkit-scrollbar,
.property-description::-webkit-scrollbar,
.custom-select .react-select__menu-list::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
    background: transparent !important;
}

::-webkit-scrollbar-track,
.property-description::-webkit-scrollbar-track,
.custom-select .react-select__menu-list::-webkit-scrollbar-track {
    background: var(--tc-sky) !important;
    border-radius: 999px !important;
}

::-webkit-scrollbar-thumb,
.property-description::-webkit-scrollbar-thumb,
.custom-select .react-select__menu-list::-webkit-scrollbar-thumb {
    background: #c3cbe2 !important;
    background-clip: padding-box !important;
    border: 3px solid transparent !important;
    border-radius: 999px !important;
}

::-webkit-scrollbar-thumb:hover,
.property-description::-webkit-scrollbar-thumb:hover,
.custom-select .react-select__menu-list::-webkit-scrollbar-thumb:hover {
    background: #8e9cc8 !important;
    background-clip: padding-box !important;
    border-width: 2px !important;
}

::-webkit-scrollbar-thumb:active {
    background: var(--tc-blue) !important;
    background-clip: padding-box !important;
}

::-webkit-scrollbar-corner {
    background: transparent !important;
}

/* Firefox has no ::-webkit-scrollbar; Chrome would drop the rules above if scrollbar-color were set. */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: #c3cbe2 var(--tc-sky);
    }
}

.table-responsive {
    padding-bottom: 6px;
}