*{ box-sizing:border-box; }
html, body{
height: auto;
min-height: 100%;
}
html{
overflow-y: scroll;
color-scheme: light;
--ct-topbar-fixed-height: 68px;
--stickyTop: var(--ct-topbar-fixed-height);
}
body{
margin:0;
background: var(--bg);
color: var(--text);
font-family: var(--ct-font-sans);
letter-spacing: .1px;
position: relative;
overflow-x: hidden;
}
.wrap{
max-width: 1180px;
margin: 0 auto;
padding: 9px 14px 28px;
position: relative;
z-index: 0;
}
html.is-booting.ct-boot-shell-ready > body > .wrap{
--_boot-shell-top: var(--stickyTop, 68px);
--_boot-shell-w: min(620px, calc(100vw - 40px));
--_boot-chart-w: 250px;
--_boot-chart-h: 110px;
--_boot-shell-muted: #8A94A4;
min-height: calc(100vh - var(--_boot-shell-top));
pointer-events: none;
}
html.is-booting.ct-boot-shell-ready > body > .wrap > *{
visibility: hidden;
}
html.is-booting.ct-boot-shell-ready > body > .wrap::before,
html.is-booting.ct-boot-shell-ready > body > .wrap::after{
position: fixed;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
}
html.is-booting.ct-boot-shell-ready > body > .wrap::before{
content: "Синхронизируем портфель";
top: calc(var(--_boot-shell-top) + 92px);
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
width: var(--_boot-shell-w);
height: auto;
border: 0;
background: transparent;
color: var(--_boot-shell-muted);
font-family: "Inter", var(--ct-font-sans);
font-size: 13px;
font-weight: 520;
box-shadow: none;
}
html.is-booting.ct-boot-shell-ready > body > .wrap::after{
content: "";
top: calc(var(--_boot-shell-top) + 136px);
z-index: 19;
width: var(--_boot-chart-w);
height: var(--_boot-chart-h);
border: 0;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='110' viewBox='0 0 250 110'%3E%3Cpath d='M0 82 C24 78 34 64 56 68 C82 73 92 88 116 72 C140 55 150 38 176 46 C202 54 214 77 250 56 L250 110 L0 110 Z' fill='%235E6D9C' fill-opacity='.075'/%3E%3Cpath d='M0 82 C24 78 34 64 56 68 C82 73 92 88 116 72 C140 55 150 38 176 46 C202 54 214 77 250 56' fill='none' stroke='%235E6D9C' stroke-opacity='.94' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='250' cy='56' r='4.6' fill='%235E6D9C' fill-opacity='.94'/%3E%3Ccircle cx='250' cy='56' r='9.5' fill='%235E6D9C' fill-opacity='.10'/%3E%3C/svg%3E")
center/250px 110px no-repeat;
box-shadow: none;
clip-path: inset(0 100% 0 0);
animation: bootChartLoadingTrace 1.7s ease-in-out infinite;
}
html.is-booting.ct-boot-shell-ready .topbar .workspaceNav,
html.is-booting.ct-boot-shell-ready .topbar .actionsRight{
opacity: .58;
pointer-events: none;
}
html.is-booting.ct-boot-shell-ready .topbarPortfolioTriggerLabel{
position: relative;
color: transparent;
}
html.is-booting.ct-boot-shell-ready .topbarPortfolioTriggerLabel::after{
content: "Портфель";
position: absolute;
inset: 0;
color: var(--_topbar-muted);
}
@keyframes bootChartLoadingTrace{
0%{
clip-path: inset(0 100% 0 0);
opacity: 0;
transform: translateX(calc(-50% - 4px));
}
10%{
opacity: 1;
}
78%{
clip-path: inset(0 0 0 0);
opacity: 1;
transform: translateX(-50%);
}
88%{
clip-path: inset(0 0 0 0);
opacity: 0;
transform: translateX(-50%);
}
100%{
clip-path: inset(0 100% 0 0);
opacity: 0;
transform: translateX(calc(-50% - 4px));
}
}
@media (prefers-reduced-motion: reduce){
html.is-booting.ct-boot-shell-ready > body > .wrap::after{
animation: none;
clip-path: none;
opacity: 1;
transform: translateX(-50%);
}
}
/* ===== Topbar canonical layer ===== */
.topbar{
--_topbar-height: var(--ct-topbar-fixed-height);
--_topbar-z: 160;
--_topbar-wrap-max: 1980px;
--_topbar-wrap-pad-y: 12px;
--_topbar-wrap-pad-x: 32px;
--_topbar-shell-h: 56px;
--_topbar-shell-pad-x: 34px;
--_topbar-shell-gap: 28px;
--_topbar-actions-gap: 24px;
--_topbar-actions-left-gap: 6px;
--_topbar-actions-right-gap: 10px;
--_topbar-actions-right-pad-left: 10px;
--_topbar-nav-h: 33px;
--_topbar-nav-pad-x: 12px;
--_topbar-nav-radius: 7px;
--_topbar-portfolio-h: 30px;
--_topbar-portfolio-max-w: 190px;
--_topbar-connect-h: 32px;
--_topbar-connect-menu-w: 212px;
--_topbar-icon-size: 19px;
--_topbar-avatar-size: 40px;
--_topbar-currency-w: 46px;
--_topbar-currency-h: 22.75px;
--_topbar-text: #172132;
--_topbar-text-strong: #0D1728;
--_topbar-muted: #707C8F;
--_topbar-muted-strong: #647186;
--_topbar-nav-muted: color-mix(in srgb, #677489 94%, var(--bg) 6%);
--_topbar-hover-bg: #F6F8FB;
--_topbar-open-bg: rgba(244, 247, 250, .92);
--_topbar-dropdown-bg: rgba(255,255,255,.985);
--_topbar-dropdown-border: #EEEEEC;
--_topbar-dropdown-hover-bg: #F7F7F6;
--_topbar-dropdown-text: color-mix(in srgb, #1F2939 92%, #5A677A 8%);
--_topbar-dropdown-hover-text: #111827;
--_topbar-dropdown-shadow: 0 6px 14px rgba(15, 23, 42, .05);
--_topbar-occlusion-fade-h: 12px;
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--_topbar-height);
z-index: var(--_topbar-z);
background: linear-gradient(
to bottom,
var(--bg) 0 calc(100% - var(--_topbar-occlusion-fade-h)),
color-mix(in srgb, var(--bg) 0%, transparent) 100%
);
border-bottom: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.topbar::before,
.topbar::after{
content: none;
display: none;
}
.topbar,
.topbar button,
.topbar select,
.topbar input,
.topbar summary,
.topbar h1{
font-family: "Inter", var(--ct-font-sans);
}
body.hasModalOpen .topbar{
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.topbar .wrap{
position: relative;
z-index: 1;
max-width: var(--_topbar-wrap-max);
height: var(--_topbar-height);
margin: 0 auto;
padding: var(--_topbar-wrap-pad-y) var(--_topbar-wrap-pad-x) 0;
}
.topbar .titleRow{
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--_topbar-shell-gap);
height: var(--_topbar-shell-h);
min-height: var(--_topbar-shell-h);
padding: 0 var(--_topbar-shell-pad-x);
border: 0;
border-radius: 8px;
background: transparent;
box-shadow: none;
overflow: visible;
}
.topbar .brandLayer{
display: flex;
align-items: center;
flex: 0 0 auto;
min-width: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.topbar .title{
display: flex;
align-items: center;
min-width: 0;
gap: 0;
}
.topbar .title h1{
margin: 0;
font-size: 15.5px;
font-weight: 680;
line-height: 1.2;
letter-spacing: -.024em;
color: var(--_topbar-text-strong);
white-space: nowrap;
}
.topbar .actions{
display: flex;
align-items: center;
justify-content: space-between;
flex: 1 1 auto;
min-width: 0;
gap: var(--_topbar-actions-gap);
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}
.topbar .actionsLeft,
.topbar .actionsRight{
display: flex;
align-items: center;
min-height: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.topbar .actionsLeft{
flex: 1 1 auto;
min-width: 0;
gap: var(--_topbar-actions-left-gap);
overflow: visible;
}
.topbar .actionsRight{
flex: 0 0 auto;
gap: var(--_topbar-actions-right-gap);
padding-left: var(--_topbar-actions-right-pad-left);
justify-content: flex-end;
white-space: nowrap;
overflow: visible;
}
.topbar .actionsRight > *,
.topbar .actionsLeft > *{
flex: 0 0 auto;
}
.topbar .workspaceNav{
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
overflow: visible;
white-space: nowrap;
}
.topbar .topCtrl{
min-width: 0;
min-height: 0;
border: 0;
background: transparent;
box-shadow: none;
line-height: 1;
}
.topbar .topNavItem{
display: inline-flex;
align-items: center;
justify-content: center;
height: var(--_topbar-nav-h);
min-height: var(--_topbar-nav-h);
padding: 0 var(--_topbar-nav-pad-x);
border-radius: var(--_topbar-nav-radius);
color: var(--_topbar-nav-muted);
font-size: 13px;
font-weight: 450;
letter-spacing: 0;
white-space: nowrap;
transition: color .14s ease, background-color .14s ease;
}
.topbar .topNavItem:hover,
.topbar .topNavItem:focus-visible{
background: transparent;
color: #172033;
box-shadow: none;
}
.topbar .topNavItem.is-active{
background: transparent;
color: #111827;
font-weight: 530;
box-shadow: none;
}
.topbar .topNavItem.is-active::after{
content: none;
}
.topbar .portfolioSelect{
display: none;
}
.topbar .topbarPortfolio{
position: relative;
display: inline-flex;
align-items: center;
width: auto;
min-width: 0;
max-width: none;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.topbar .topbarPortfolioTrigger{
display: inline-flex;
align-items: center;
width: auto;
min-width: 0;
max-width: var(--_topbar-portfolio-max-w);
height: var(--_topbar-portfolio-h);
min-height: var(--_topbar-portfolio-h);
padding: 0 11px 0 12px;
gap: 8px;
border: 0;
border-radius: 8px;
background: transparent;
color: #132033;
box-shadow: none;
font-size: 13px;
font-weight: 550;
letter-spacing: 0;
transition: background-color .14s ease, color .14s ease;
}
.topbar .topbarPortfolioTrigger:hover,
.topbar .topbarPortfolioTrigger:focus-visible{
background: transparent;
color: var(--_topbar-text-strong);
box-shadow: none;
}
.topbar .topbarPortfolio.is-open .topbarPortfolioTrigger{
background: var(--_topbar-open-bg);
color: var(--_topbar-text-strong);
box-shadow: none;
}
.topbar .topbarPortfolioTriggerLabel{
flex: 0 1 auto;
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: inherit;
}
.topbar .topbarPortfolioTriggerChevron,
.topbar .topbarConnectBtnChevron{
width: 6px;
height: 6px;
border-right: 1px solid var(--_topbar-muted);
border-bottom: 1px solid var(--_topbar-muted);
transform: translateY(-1px) rotate(45deg);
transition: transform .16s ease, border-color .16s ease;
flex: 0 0 auto;
}
.topbar .topbarPortfolioTriggerChevron{
margin-left: 1px;
}
.topbar .topbarPortfolio.is-open .topbarPortfolioTriggerChevron,
.topbar .topbarPortfolioTrigger:hover .topbarPortfolioTriggerChevron,
.topbar .topbarPortfolioTrigger:focus-visible .topbarPortfolioTriggerChevron{
border-right-color: var(--_topbar-text);
border-bottom-color: var(--_topbar-text);
}
.topbar .topbarConnect{
position: relative;
flex: 0 0 auto;
}
.topbar .topbarImportBtn,
.topbar .topbarConnectBtn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: var(--_topbar-connect-h);
min-height: var(--_topbar-connect-h);
padding: 0 10px 0 8px;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
color: var(--_topbar-text);
box-shadow: none;
font-size: 13px;
font-weight: 530;
letter-spacing: 0;
transition: color .14s ease, background-color .14s ease, border-color .14s ease;
}
.topbar .topbarImportBtn:hover,
.topbar .topbarImportBtn:focus-visible,
.topbar .topbarConnect.is-open .topbarConnectBtn{
border-color: transparent;
background: var(--_topbar-hover-bg);
color: var(--_topbar-text-strong);
box-shadow: none;
}
.topbar .topbarConnectBtnChevron{
margin-top: -2px;
border-right-width: 1.2px;
border-bottom-width: 1.2px;
transform: translateY(0) rotate(45deg);
}
.topbar .topbarConnectBtn:hover .topbarConnectBtnChevron,
.topbar .topbarConnectBtn:focus-visible .topbarConnectBtnChevron,
.topbar .topbarConnect.is-open .topbarConnectBtnChevron{
border-right-color: var(--_topbar-text);
border-bottom-color: var(--_topbar-text);
}
.topbar .topbarConnect.is-open .topbarConnectBtnChevron{
transform: translateY(2px) rotate(-135deg);
}
.topbar .topbarIconBtn{
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--_topbar-icon-size);
min-width: var(--_topbar-icon-size);
height: var(--_topbar-icon-size);
min-height: var(--_topbar-icon-size);
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--_topbar-muted);
transition: color .14s ease, background-color .14s ease;
}
.topbar .topbarIconBtn:hover,
.topbar .topbarIconBtn:focus-visible,
.topbar .topbarSettings.is-open #btnTopbarSettings.topbarIconBtn{
background: transparent;
color: var(--_topbar-text);
box-shadow: none;
}
.topbar .topbarIconGlyph{
width: var(--_topbar-icon-size);
height: var(--_topbar-icon-size);
fill: none;
stroke: currentColor;
stroke-width: 1.65;
stroke-linecap: round;
stroke-linejoin: round;
}
.topbar #btnTopbarSettings .topbarIconGlyph{
width: 20px;
height: 20px;
transform: translateY(2px);
}
.topbar .topbarSettings{
position: relative;
flex: 0 0 auto;
margin-left: 2px;
}
.topbar .topbarAccount{
--_account-menu-bg: #FFFFFF;
--_account-menu-border: #E4E9F1;
--_account-menu-shadow: 0 18px 42px rgba(15, 23, 42, .14);
--_account-menu-text: #111827;
--_account-menu-muted: #66758A;
--_account-menu-hover-bg: #F6F8FC;
position: relative;
flex: 0 0 auto;
}
.topbar .topbarAccountAvatar,
.topbar #btnOpenAccount.topbarAccountAvatar{
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--_topbar-avatar-size);
min-width: var(--_topbar-avatar-size);
height: var(--_topbar-avatar-size);
min-height: var(--_topbar-avatar-size);
margin-left: 6px;
padding: 0;
border: 0;
border-radius: 999px;
background: #1E293B;
box-shadow: none;
color: #FFFFFF;
font-size: 13px;
font-weight: 650;
letter-spacing: 0;
}
.topbar #btnOpenAccount.topbarAccountAvatar[data-account-state="local"]{
width: auto;
min-width: 58px;
padding: 0 12px;
font-size: 12px;
}
.topbar .topbarAccount.is-open #btnOpenAccount.topbarAccountAvatar,
.topbar #btnOpenAccount.topbarAccountAvatar:hover,
.topbar #btnOpenAccount.topbarAccountAvatar:focus-visible{
background: #111827;
color: #FFFFFF;
box-shadow: 0 0 0 3px rgba(15, 23, 42, .08);
}
.topbar .topbarAccountMenu{
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 120;
box-sizing: border-box;
display: grid;
min-width: 156px;
padding: 6px;
border: 1px solid var(--_account-menu-border);
border-radius: 8px;
background: var(--_account-menu-bg);
box-shadow: var(--_account-menu-shadow);
}
.topbar .topbarAccountMenu[hidden]{
display: none;
}
.topbar .topbarAccountAction{
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 34px;
padding: 0 10px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--_account-menu-text);
font-family: var(--ct-font-ui);
font-size: 12px;
font-weight: 560;
line-height: 1.1;
text-align: left;
box-shadow: none;
}
.topbar .topbarAccountAction[hidden]{
display: none;
}
.topbar .topbarAccountAction:hover,
.topbar .topbarAccountAction:focus-visible{
background: var(--_account-menu-hover-bg);
color: var(--_account-menu-text);
box-shadow: none;
}
.topbar #uiCurrencyPicker{
position: relative;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
width: var(--_topbar-currency-w);
min-width: var(--_topbar-currency-w);
max-width: var(--_topbar-currency-w);
}
.topbar #uiCurrencyPickerInput{
display: block;
width: var(--_topbar-currency-w);
min-width: var(--_topbar-currency-w);
height: var(--_topbar-currency-h);
min-height: var(--_topbar-currency-h);
padding: 0 18px 0 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--_topbar-muted-strong);
font-size: 13.5px;
font-weight: 445;
line-height: var(--_topbar-currency-h);
text-align: left;
cursor: pointer;
}
.topbar #uiCurrencyPickerInput:hover,
.topbar #uiCurrencyPickerInput:focus-visible,
.topbar #uiCurrencyPicker.txDropdown.is-open .txDropdownTrigger{
background: transparent;
color: var(--_topbar-muted-strong);
box-shadow: none;
}
.topbar #uiCurrencyPicker::after{
content: "";
position: absolute;
top: 50%;
right: 0;
width: 11px;
height: 11px;
border: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 11px 11px;
transform: translateY(-50%);
pointer-events: none;
}
.topbar #uiCurrencyPicker > #uiCurrency.txDropdownNative{
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
min-width: 0;
max-width: 0;
height: 0;
min-height: 0;
padding: 0;
margin: 0;
border: 0;
inset: 0;
}
.topbar .topbarOverflow{
position: relative;
flex: 0 0 auto;
display: none;
}
.topbar .topbarOverflow > summary{
list-style: none;
}
.topbar .topbarOverflow > summary::-webkit-details-marker{
display: none;
}
.topbar .topbarOverflowBtn{
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
min-width: 28px;
height: 28px;
min-height: 28px;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: #6E7B8D;
box-shadow: none;
cursor: pointer;
}
.topbar .topbarOverflow[open] .topbarOverflowBtn,
.topbar .topbarOverflowBtn:hover,
.topbar .topbarOverflowBtn:focus-visible{
color: #253347;
background: var(--_topbar-hover-bg);
box-shadow: none;
}
.topbar .topbarOverflowIcon{
width: 16px;
height: 16px;
display: block;
fill: currentColor;
}
.topbar .topbarOverflowMenu,
.topbar .topbarConnectMenu,
.topbar .topbarSettingsMenu{
position: absolute;
z-index: 200;
display: grid;
min-width: 180px;
padding: 6px;
border: 1px solid var(--_topbar-dropdown-border);
border-radius: 10px;
background: var(--_topbar-dropdown-bg);
box-shadow: var(--_topbar-dropdown-shadow);
overflow: hidden;
transform: translateY(-3px);
}
.topbar .topbarOverflowMenu{
top: calc(100% + 8px);
left: 0;
gap: 4px;
}
.topbar .topbarOverflowMenuRight{
left: auto;
right: 0;
}
.topbar .topbarConnectMenu{
top: calc(100% + 8px);
left: 0;
width: var(--_topbar-connect-menu-w);
padding-bottom: 11px;
}
.topbar .topbarSettingsMenu{
top: calc(100% + 8px);
right: 0;
padding: 8px;
padding-bottom: 13px;
border-radius: 12px;
background: rgba(255,255,255,.98);
box-shadow: 0 20px 40px rgba(17, 24, 39, .08);
transform: translateY(-5px);
}
.topbar .topbarConnectMenu[hidden],
.topbar .topbarSettingsMenu[hidden],
.topbar .topbarPortfolioDropdown[hidden]{
display: none;
}
.topbar .topbarOverflowAction,
.topbar .topbarConnectAction,
.topbar .topbarSettingsAction{
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
min-width: 0;
min-height: 0;
height: auto;
padding: 6px 10px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--_topbar-dropdown-text);
box-shadow: none;
font-size: 12.4px;
font-weight: 490;
line-height: 1.15;
text-align: left;
white-space: nowrap;
cursor: pointer;
transform: none;
}
.topbar .topbarOverflowAction{
min-height: 32px;
gap: 8px;
padding: 0 10px;
font-size: 11px;
font-weight: 620;
}
.topbar .topbarOverflowAction:hover,
.topbar .topbarOverflowAction:focus-visible,
.topbar .topbarOverflowAction.is-active,
.topbar .topbarConnectAction:hover,
.topbar .topbarConnectAction:focus-visible,
.topbar .topbarSettingsAction:hover,
.topbar .topbarSettingsAction:focus-visible{
background: var(--_topbar-dropdown-hover-bg);
color: var(--_topbar-dropdown-hover-text);
box-shadow: none;
transform: none;
}
.topbar .topbarSettingsActionHint{
margin-left: auto;
color: inherit;
font-size: inherit;
font-weight: inherit;
}
.topbar .topbarPortfolioDropdown{
position: absolute;
z-index: 200;
top: calc(100% + 8px);
left: 0;
width: 262px;
padding: 8px 0 0;
border: 1px solid var(--_topbar-dropdown-border);
border-radius: 15px;
background: var(--_topbar-dropdown-bg);
box-shadow: var(--_topbar-dropdown-shadow);
}
.topbar .topbarPortfolioList{
display: grid;
padding: 0 8px 8px;
gap: 2px;
}
.topbar .topbarPortfolioRowWrap{
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 34px;
align-items: stretch;
gap: 6px;
padding-right: 4px;
border-radius: 12px;
}
.topbar .topbarPortfolioRow{
display: flex;
align-items: center;
width: 100%;
min-height: 39px;
padding: 0 12px;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--_topbar-dropdown-text);
box-shadow: none;
font-size: 13.1px;
font-weight: 490;
line-height: 1.15;
text-align: left;
transform: none;
}
.topbar .topbarPortfolioRow:hover,
.topbar .topbarPortfolioRow:focus-visible,
.topbar .topbarPortfolioRow.is-active:hover,
.topbar .topbarPortfolioRow.is-active:focus-visible{
background: var(--_topbar-dropdown-hover-bg);
color: var(--_topbar-dropdown-hover-text);
box-shadow: none;
transform: none;
}
.topbar .topbarPortfolioRow.is-active{
background: transparent;
color: var(--_topbar-dropdown-text);
}
.topbar .topbarPortfolioRowLead{
display: inline-flex;
align-items: center;
gap: 10px;
min-width: 0;
width: 100%;
}
.topbar .topbarPortfolioRowLabel{
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.topbar .topbarPortfolioRowCheck{
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 16px;
height: 16px;
color: var(--_topbar-dropdown-text);
}
.topbar .topbarPortfolioRowCheck svg,
.topbar .topbarPortfolioActionIcon svg{
width: 16px;
height: 16px;
stroke: currentColor;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.topbar .topbarPortfolioRowCheck svg{
stroke-width: 2.2;
}
.topbar .topbarPortfolioRowCheck--empty{
opacity: 0;
}
.topbar .topbarPortfolioMore{
display: inline-flex;
align-items: center;
justify-content: center;
justify-self: end;
align-self: center;
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: 10px;
background: transparent;
color: #98A2B3;
box-shadow: none;
transform: none;
}
.topbar .topbarPortfolioMore:hover,
.topbar .topbarPortfolioMore:focus-visible,
.topbar .topbarPortfolioRowWrap:hover .topbarPortfolioMore,
.topbar .topbarPortfolioRowWrap:focus-within .topbarPortfolioMore{
background: transparent;
color: #98A2B3;
box-shadow: none;
transform: none;
}
.topbar .topbarPortfolioMoreIcon,
.topbar .topbarPortfolioActionIcon{
display: inline-flex;
align-items: center;
justify-content: center;
}
.topbar .topbarPortfolioMoreIcon svg{
width: 16px;
height: 16px;
fill: currentColor;
stroke: none;
}
.topbar .topbarPortfolioActionMenu{
position: absolute;
z-index: 210;
top: 0;
left: calc(100% + 12px);
display: grid;
width: 206px;
padding: 6px 0;
border: 1px solid var(--_topbar-dropdown-border);
border-radius: 12px;
background: var(--_topbar-dropdown-bg);
box-shadow: var(--_topbar-dropdown-shadow);
transform: none;
}
.topbar .topbarPortfolioAction{
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 33px;
padding: 0 13px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--_topbar-dropdown-text);
box-shadow: none;
font-size: 11.7px;
font-weight: 490;
text-align: left;
transform: none;
}
.topbar .topbarPortfolioAction + .topbarPortfolioAction{
border-top: 1px solid #EEF2F7;
}
.topbar .topbarPortfolioAction:hover,
.topbar .topbarPortfolioAction:focus-visible{
background: var(--_topbar-dropdown-hover-bg);
color: var(--_topbar-dropdown-hover-text);
box-shadow: none;
transform: none;
}
.topbar .topbarPortfolioAction.danger,
.topbar .topbarPortfolioAction.danger:hover,
.topbar .topbarPortfolioAction.danger:focus-visible{
color: #D97A7A;
}
.topbar .topbarPortfolioAction.danger:hover,
.topbar .topbarPortfolioAction.danger:focus-visible{
background: #FFF6F6;
}
.topbar .topbarPortfolioActionIcon svg{
stroke-width: 1.9;
}
.topbar .topbarPortfolioCreate{
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
min-height: 52px;
padding: 0 18px;
border: 0;
border-top: 1px solid #EEF2F7;
border-radius: 0;
background: transparent;
color: var(--_topbar-dropdown-text);
box-shadow: none;
font-size: 13px;
font-weight: 520;
text-align: center;
}
.topbar .topbarPortfolioCreateIcon{
font-size: 18px;
font-weight: 400;
line-height: 1;
transform: translateY(-1px);
}
.topbar .topbarPortfolioCreate:hover,
.topbar .topbarPortfolioCreate:focus-visible{
background: var(--_topbar-dropdown-hover-bg);
box-shadow: none;
transform: none;
}
.topbar #uiCurrencyPickerDropdown.txDropdownMenu{
position: fixed;
z-index: 200;
min-width: 0;
padding: 8px;
padding-bottom: 13px;
border: 1px solid #E4E4E1;
border-radius: 12px;
background: rgba(255,255,255,.98);
box-shadow: 0 20px 40px rgba(17, 24, 39, .08);
overflow: hidden;
transform: translateY(-5px);
}
.topbar #uiCurrencyPicker .txDropdownOption{
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 0;
height: auto;
padding: 6px 10px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--_topbar-dropdown-text);
box-shadow: none;
font-size: 11.2px;
font-weight: 400;
line-height: 1.15;
text-align: left;
cursor: pointer;
}
.topbar #uiCurrencyPicker .txDropdownOption.is-selected{
background: transparent;
color: var(--_topbar-dropdown-text);
box-shadow: none;
}
.topbar #uiCurrencyPicker .txDropdownOption:hover,
.topbar #uiCurrencyPicker .txDropdownOption:focus-visible{
background: var(--_topbar-dropdown-hover-bg);
color: var(--_topbar-dropdown-hover-text);
box-shadow: none;
}
.topbar .statusLine{
margin-top: 8px;
padding-left: 0;
font-size: 11px;
}
.topbar .topbarIconBtn.is-busy .topbarIconGlyph{
animation: topbarSpin 1s linear infinite;
}
@media (max-width: 1180px){
.topbar{
--_topbar-actions-gap: 18px;
--_topbar-actions-left-gap: 14px;
--_topbar-portfolio-max-w: 176px;
}
}
@media (max-width: 1080px){
.topbar #btnTopbarSources.topNavItem,
.topbar #btnTopbarTaxReport.topNavItem{
display: none;
}
.topbar .topbarNavOverflow{
display: inline-flex;
}
}
@media (max-width: 980px){
.topbar #btnRefresh.topbarIconBtn{
display: none;
}
.topbar .workspaceNav > .topNavItem{
display: none;
}
.topbar .topbarNavOverflow{
display: inline-flex;
}
.topbar .topbarNavOverflow .topbarOverflowMenu{
left: auto;
right: 0;
}
.topbar .topbarUtilityOverflow{
display: inline-flex;
}
}
@media (max-width: 720px){
.topbar{
--_topbar-shell-gap: 10px;
--_topbar-actions-gap: 8px;
--_topbar-actions-left-gap: 8px;
--_topbar-actions-right-gap: 8px;
--_topbar-actions-right-pad-left: 0;
--_topbar-portfolio-max-w: 156px;
--_topbar-currency-w: 44px;
}
.topbar .topbarPortfolioTrigger{
height: 32px;
min-height: 32px;
padding: 0 10px;
}
.topbar #topbarConnect{
display: none;
}
.topbar #uiCurrencyPickerInput{
width: 44px;
min-width: 44px;
}
}
@media (max-width: 560px){
.topbar{
--_topbar-wrap-pad-x: 14px;
--_topbar-shell-pad-x: 14px;
--_topbar-shell-gap: 0px;
--_topbar-actions-gap: 6px;
--_topbar-actions-left-gap: 6px;
--_topbar-actions-right-gap: 6px;
--_topbar-avatar-size: 36px;
--_topbar-portfolio-max-w: 130px;
--_topbar-currency-w: 42px;
}
.topbar .brandLayer{
display: none;
}
.topbar .titleRow{
justify-content: flex-end;
}
.topbar .actions{
width: 100%;
}
.topbar .topbarAccountAvatar,
.topbar #btnOpenAccount.topbarAccountAvatar{
margin-left: 2px;
}
}
@media (max-width: 360px){
.topbar #uiCurrencyPicker{
display: none;
}
}
@keyframes topbarSpin{
from{ transform: rotate(0deg); }
to{ transform: rotate(360deg); }
}
.pill{
display:inline-flex;
align-items:center;
gap:8px;
padding: 6px 10px;
border: 1px solid var(--border);
background: rgba(255,255,255,.04);
border-radius: 999px;
font-size: 12px;
color: var(--muted);
white-space: nowrap;
}
#fxRateInfo{
display: inline-block;
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
white-space: nowrap;
}
.mono{
font-family: var(--ct-font-mono);
font-variant-numeric: tabular-nums;
}
button{
width: auto;
min-width: unset;
min-height: var(--ct-h-secondary);
padding: 0 14px;
border-radius: var(--ct-radius-control);
border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
background: color-mix(in srgb, var(--btn) 92%, transparent);
color: var(--text);
cursor: pointer;
font-weight: 700;
font-size: 13px;
line-height: 1.1;
opacity: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease, color .15s ease;
}
button:hover{
background: color-mix(in srgb, var(--btnHover) 96%, transparent);
border-color: color-mix(in srgb, var(--border) 102%, transparent);
box-shadow: none;
}
button:active{
background: color-mix(in srgb, var(--btnHover) 90%, transparent);
border-color: color-mix(in srgb, var(--border) 106%, transparent);
box-shadow: none;
}
button:focus-visible{
outline: none;
box-shadow: var(--focus);
}
button:disabled,
button[disabled]{
opacity: .52;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.btnPrimarySmall{
min-height: var(--ct-h-secondary);
padding: 0 16px;
border-radius: 14px;
font-size: 13px;
font-weight: 850;
opacity: 1;
box-shadow: 0 14px 40px rgba(120,120,255,.18);
}
.primary{
border: 0;
background: var(--primary);
color: white;
box-shadow: 0 12px 30px rgba(120,120,255,.18);
opacity: 1;
}
.primary:hover{
background: var(--primaryHover);
box-shadow: 0 16px 36px rgba(120,120,255,.24);
}
.danger{
background: color-mix(in srgb, var(--bad) 8%, transparent);
border-color: color-mix(in srgb, var(--bad) 28%, var(--border));
color: color-mix(in srgb, var(--bad) 72%, var(--text));
box-shadow: none;
}
.danger:hover{
background: color-mix(in srgb, var(--bad) 12%, transparent);
border-color: color-mix(in srgb, var(--bad) 40%, var(--border));
}
.statusLine{
margin-top: 6px;
font-size: 12px;
color: var(--muted);
display: none;
}
.portfolioSwitchingView{
position: relative;
min-height: 280px;
}
.portfolioSwitchingView > *{
opacity: .18;
filter: blur(.8px);
pointer-events: none;
transition: opacity .12s ease, filter .12s ease;
}
.portfolioSwitchingView::after{
content: attr(data-portfolio-switching-message);
position: absolute;
inset: 0;
z-index: 40;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: min(132px, 18vh);
color: var(--muted);
font-size: 13px;
font-weight: 650;
letter-spacing: 0;
text-align: center;
pointer-events: none;
}
.card{
border: 1px solid var(--border);
background: linear-gradient(180deg, var(--surface), var(--surface2));
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.cardInner{ padding: 14px; }
.grid{
display:grid;
grid-template-columns: 1fr;
gap: 12px;
margin-top: 14px;
}
label{
display:block;
font-size: 12px;
color: var(--muted);
margin: 0 0 6px;
}
input, select{
width: fit-content;
max-width: 100%;
padding: 11px 12px;
border-radius: 14px;
border: 1px solid var(--border);
background: rgba(255,255,255,.04);
color: var(--text);
outline: none;
transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus{
box-shadow: var(--focus);
border-color: rgba(120,160,255,.45);
}
input[type="number"]{ font-variant-numeric: tabular-nums; }
.kpis{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media (max-width: 980px){ .kpis{ grid-template-columns: 1fr; } }
.kpi{
position: relative;
border: 1px solid var(--border);
background:
linear-gradient(180deg, color-mix(in srgb, var(--card2) 94%, transparent), rgba(255,255,255,.035));
border-radius: 18px;
padding: 14px 15px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.kpi .label{
font-size: 11px;
color: color-mix(in srgb, var(--muted) 88%, transparent);
letter-spacing: .18px;
text-transform: uppercase;
}
.kpi .value{
margin-top: 8px;
font-size: 22px;
font-weight: 850;
letter-spacing: .12px;
}
.kpi .sub{ margin-top: 5px; font-size: 12px; color: var(--muted2); }
#totalValue,
#totalPnl{
font-size: 24px;
letter-spacing: -.02em;
}
.kpi .value, .breakTile .v, #pfValueNow, #pfRangePnl, #pfRangePnlUsd{
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.good{ color: var(--good); }
.bad{ color: var(--bad); }
.warn{ color: var(--warn); }
.chartCard{
margin-top:0;
border:1px solid var(--border);
background:
linear-gradient(180deg, color-mix(in srgb, var(--card2) 95%, transparent), rgba(255,255,255,.03));
border-radius:18px;
padding:14px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.chartHead{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
flex-wrap:wrap;
margin-bottom:10px;
}
.pfBig{
font-weight:900;
font-size:22px;
letter-spacing:.08px;
margin-top:6px;
}
.segBtn{
padding:7px 10px;
border-radius:12px;
border:1px solid var(--border);
background:rgba(255,255,255,.04);
color:var(--muted);
font-weight:800;
font-size:12px;
opacity:1;
}
.segBtn.active{
background:rgba(255,255,255,.10);
color:var(--text);
border-color:rgba(120,160,255,.35);
box-shadow:0 12px 32px rgba(120,120,255,.12);
}
.chartWrap{
position:relative;
border:1px solid rgba(10,12,16,.10);
border-radius:14px;
background:rgba(255,255,255,.03);
overflow:hidden;
}
canvas.pfChart{ width:100%; height:160px; display:block; }
.chartRangeBar{
display:flex;
gap:6px;
flex-wrap:wrap;
align-items:center;
justify-content:flex-start;
margin-top:10px;
}
.chartFoot{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
flex-wrap:wrap;
margin-top:10px;
}
.breakdownCard{
margin-top: 14px;
border: 1px solid var(--border);
background:
linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, var(--card2)), rgba(255,255,255,.03));
border-radius: 18px;
padding: 14px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.breakdownGrid{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media (max-width: 980px){ .breakdownGrid{ grid-template-columns: 1fr; } }
.breakTile{
position: relative;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--surface2) 86%, transparent);
border-radius: 14px;
padding: 10px 12px;
display:flex;
align-items:center;
justify-content:space-between;
gap: 10px;
min-height: 44px;
font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text", Inter, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
.breakTile .k{
font-size: 12px;
color: var(--muted);
font-weight: 750;
letter-spacing: .15px;
}
.breakTile .v{
font-variant-numeric: tabular-nums;
font-weight: 850;
font-size: 14px;
}
.breakTile .tileHelp{
position: absolute;
top: 3px;
right: 6px;
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid var(--border);
color: var(--muted2);
font-size: 8px;
font-weight: 800;
line-height: 10px;
text-align: center;
cursor: help;
user-select: none;
z-index: 2;
}
.breakTile .tileHelp::after{
content: attr(data-tip);
position: absolute;
right: 0;
top: calc(100% + 6px);
width: 190px;
padding: 7px 9px;
border-radius: 10px;
border: 1px solid var(--border);
background: rgba(255,255,255,.98);
color: var(--muted2);
font-size: 12px;
font-weight: 400;
font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text", Inter, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
line-height: 1.35;
text-align: left;
box-shadow: 0 12px 30px rgba(10,12,16,.18);
opacity: 0;
visibility: hidden;
transform: translateY(-3px);
transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
pointer-events: none;
}
.breakTile .tileHelp:hover::after,
.breakTile .tileHelp:focus-visible::after{
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.breakTile.good{ background: rgba(11,95,42,.12); border-color: rgba(11,95,42,.30); }
.breakTile.bad{ background: rgba(255,77,77,.10); border-color: rgba(255,77,77,.22); }
.kpi .kpiHelp{
position: absolute;
top: 3px;
right: 6px;
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid var(--border);
color: var(--muted2);
font-size: 8px;
font-weight: 800;
line-height: 10px;
text-align: center;
cursor: help;
user-select: none;
z-index: 2;
}
.kpi .kpiHelp::after{
content: attr(data-tip);
position: absolute;
right: 0;
top: calc(100% + 6px);
width: 190px;
padding: 7px 9px;
border-radius: 10px;
border: 1px solid var(--border);
background: rgba(255,255,255,.98);
color: var(--muted2);
font-size: 12px;
font-weight: 400;
line-height: 1.35;
text-align: left;
box-shadow: 0 12px 30px rgba(10,12,16,.18);
opacity: 0;
visibility: hidden;
transform: translateY(-3px);
transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
pointer-events: none;
}
.kpi .kpiHelp:hover::after,
.kpi .kpiHelp:focus-visible::after{
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.helpQ{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 4px;
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid var(--border);
color: var(--muted2);
font-size: 8px;
font-weight: 800;
line-height: 1;
text-align: center;
cursor: help;
user-select: none;
z-index: 30;
vertical-align: middle;
}
.helpQ::after{
content: attr(data-tip);
position: absolute;
right: 0;
top: calc(100% + 6px);
width: 220px;
max-width: 260px;
padding: 7px 9px;
border-radius: 10px;
border: 1px solid var(--border);
background: rgba(255,255,255,.98);
color: var(--muted2);
font-size: 12px;
font-weight: 400;
line-height: 1.35;
text-align: left;
white-space: normal;
box-shadow: 0 12px 30px rgba(10,12,16,.18);
opacity: 0;
visibility: hidden;
transform: translateY(-3px);
transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
pointer-events: none;
z-index: 9999;
}
.helpQ.tipRight::after{
left: 0;
right: auto;
transform-origin: top left;
}
.helpQ:hover::after,
.helpQ:focus-visible::after{
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.modalCard .helpQ::after{
content: none !important;
display: none !important;
}
.helpQ.forcePopover::after{
content: none !important;
display: none !important;
}
#helpQPopover{
position: fixed;
left: -9999px;
top: -9999px;
max-width: 300px;
padding: 8px 10px;
border-radius: 10px;
border: 1px solid var(--border);
background: rgba(255,255,255,.98);
color: rgba(10,12,16,.82);
box-shadow: 0 12px 30px rgba(10,12,16,.18);
font-size: 12px;
font-weight: 400;
line-height: 1.35;
white-space: pre-line;
word-break: break-word;
z-index: 10050;
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translateY(-2px);
transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}
#helpQPopover.show{
opacity: 1;
visibility: visible;
transform: translateY(0);
}
#placeChipTooltip{
position: fixed;
left: -9999px;
top: -9999px;
max-width: 300px;
padding: 8px 10px;
border-radius: 11px;
border: 1px solid var(--border);
background: rgba(255,255,255,.98);
color: rgba(10,12,16,.84);
box-shadow: 0 12px 30px rgba(10,12,16,.18);
font-size: 12px;
font-weight: 400;
line-height: 1.35;
white-space: normal;
word-break: break-word;
z-index: 10060;
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translateY(-2px);
transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}
#placeChipTooltip.show{
opacity: 1;
visibility: visible;
transform: translateY(0);
}
#coverageBadgeTooltip{
--_badge-tip-max-width: 300px;
--_badge-tip-pad-y: 8px;
--_badge-tip-pad-x: 10px;
--_badge-tip-radius: 10px;
position: fixed;
left: -9999px;
top: -9999px;
max-width: var(--_badge-tip-max-width);
padding: var(--_badge-tip-pad-y) var(--_badge-tip-pad-x);
border-radius: var(--_badge-tip-radius);
border: 1px solid var(--border);
background: rgba(255,255,255,.98);
color: rgba(10,12,16,.84);
box-shadow: var(--ct-shadow-popover);
font-size: 12px;
font-weight: 400;
line-height: 1.35;
white-space: normal;
word-break: break-word;
z-index: 10070;
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translateY(-2px);
transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}
#coverageBadgeTooltip.show{
opacity: 1;
visibility: visible;
transform: translateY(0);
}
[data-badge-tip]{
cursor: help;
}
[data-badge-tip]:focus-visible{
outline: 2px solid rgba(63, 122, 191, .28);
outline-offset: 2px;
}
.miniAddWrap{
display:flex;
flex-direction: column;
gap: 10px;
align-items:center;
justify-content: center;
margin-top: 31px;
}
.actionsCard{
width: min(520px, 100%);
align-items: stretch;
justify-content: flex-start;
padding: 18px;
gap: 13px;
border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
border-radius: 18px;
background:
linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--surface2) 94%, transparent));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.05),
0 18px 42px rgba(0,0,0,.08);
}
.ctaAdd{
width: fit-content;
max-width: 100%;
min-height: 48px;
padding: 12px 18px;
border-radius: 15px;
font-size: 15px;
font-weight: 850;
letter-spacing: .2px;
box-shadow: 0 18px 48px rgba(120,120,255,.22);
}
.actionsRow{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
width: 100%;
}
.actionSecondaryBtn{
width: 100%;
min-height: 39px;
padding: 9px 12px;
border-radius: 14px;
font-size: 13px;
font-weight: 700;
border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
background: color-mix(in srgb, var(--surface2) 82%, transparent);
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.actionsCardHint{
margin-top: 2px;
padding-top: 10px;
border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
font-size: 12px;
line-height: 1.3;
color: var(--muted);
}
@media (max-width: 900px){
.actionsRow{
grid-template-columns: 1fr;
}
}
.small{ font-size: 12px; color: var(--muted); }
/* Override: when combined with semantic color classes */
.small.bad{ color: var(--bad) !important; }
.small.warn{ color: var(--warn) !important; }
.small.good{ color: var(--good) !important; }
.tableWrap{
position: relative;
overflow:auto;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--surface2);
background-clip: padding-box;
isolation: isolate;
}
table{
width:100%;
border-collapse: collapse;
min-width: 900px;
}
#tblTx,
#tblPlaces,
#tblTaxReport{
border-collapse: separate;
border-spacing: 0;
}
#tblTx{
table-layout: fixed;
width: 100%;
min-width: 1080px;
}
tbody{ background: var(--surface2); }
th, td{
padding: 10px 10px;
border-bottom: 1px solid rgba(10,12,16,.08);
font-size: 13px;
vertical-align: top;
}
th{
position: sticky;
top: 0;
background: var(--theadBg);
font-size: 12px;
color: var(--muted);
text-align:left;
z-index: 6;
box-shadow: 0 1px 0 rgba(0,0,0,.06);
background-clip: padding-box;
}
#tblTx thead th,
#tblPlaces thead th,
#tblTaxReport thead th{
position: sticky;
top: var(--stickyTop);
background: var(--theadBg);
background-color: var(--theadBg);
background-image: none;
z-index: 60;
box-shadow: 0 1px 0 rgba(0,0,0,.14);
}
#tblTx tbody td,
#tblPlaces tbody td,
#tblTaxReport tbody td{
position: relative;
z-index: 0;
}
.tableWrap.pageStickyWrap{ overflow: auto; }
.txTableWrap{ overflow: auto; }
th.sortable{
cursor: pointer;
user-select: none;
}
th.sortable:hover{
background: color-mix(in srgb, var(--theadBg) 86%, var(--text) 14%);
}
.sortMark{
display: inline-block;
margin-left: 4px;
font-size: 11px;
opacity: .45;
vertical-align: middle;
}
.sortMark.active{ opacity: .95; }
#viewTaxReport{
--_tax-report-filters-gap: 8px;
--_tax-report-filters-row-gap: 6px;
--_tax-report-filters-inline-gap: 8px;
--_tax-report-filters-rail-gap: 12px;
--_tax-report-filters-seam-color: #E9E7E1;
--_tax-report-filters-field-width: 78px;
--_tax-report-filters-field-height: 28px;
--_tax-report-filters-field-radius: 10px;
--_tax-report-filters-field-border: rgba(229, 234, 241, .62);
--_tax-report-filters-field-bg: #FFFFFF;
--_tax-report-filters-field-text: #30353A;
--_tax-report-filters-field-placeholder: #8D9297;
--_tax-report-filters-field-shadow: 0 1px 1px rgba(88, 96, 105, 0.025);
--_tax-report-filters-field-font-size: 11px;
--_tax-report-filters-dash-color: #7D8286;
--_tax-report-filters-dash-size: 12px;
--_tax-report-filters-range-shell-radius: 10px;
--_tax-report-filters-range-shell-pad-x: 11px;
--_tax-report-filters-range-shell-icon-space: 28px;
--_tax-report-filters-chip-radius: 9px;
--_tax-report-filters-chip-height: 28px;
--_tax-report-filters-chip-font-size: 10.5px;
--_tax-report-filters-chip-pad-x: 10px;
--_tax-report-filters-chip-border: rgba(229, 234, 241, .72);
--_tax-report-filters-chip-bg: #F8F8F7;
--_tax-report-filters-chip-text: #686D73;
--_tax-report-filters-chip-active-bg: #EFEFEE;
--_tax-report-filters-chip-active-border: rgba(229, 234, 241, .72);
--_tax-report-filters-chip-active-text: #565C63;
--_tax-report-filters-mode-active-bg: #FFFFFF;
--_tax-report-filters-mode-active-border: #D7DEE9;
--_tax-report-filters-mode-active-text: #44566E;
--_tax-report-filters-mode-active-shadow: 0 1px 2px rgba(174, 184, 195, 0.15);
--_tax-report-filters-source-height: 28px;
--_tax-report-filters-source-radius: 10px;
--_tax-report-filters-source-border: rgba(229, 234, 241, .62);
--_tax-report-filters-source-bg: #FFFFFF;
--_tax-report-filters-source-text: #30353A;
--_tax-report-filters-source-font-size: 11px;
--_tax-report-filters-source-width: 126px;
--_tax-report-filters-mode-width: 118px;
--_tax-report-filters-popover-width: 312px;
--_tax-report-filters-popover-radius: 12px;
--_tax-report-filters-popover-border: #EEF3F8;
--_tax-report-filters-popover-bg: #FFFFFF;
--_tax-report-filters-popover-shadow: 0 6px 14px rgba(15, 23, 42, .05);
--_tax-report-date-panel-border: #EDF2F8;
--_tax-report-date-panel-radius: 10px;
--_tax-report-date-quiet-bg: #F9FBFE;
--_tax-report-date-quiet-border: #E2E8F1;
--_tax-report-date-quiet-text: #5C687C;
--_tax-report-date-hover-bg: #EDF5FF;
--_tax-report-date-hover-text: #2D9AEB;
--_tax-report-date-selected-bg: color-mix(in srgb, #EDF5FF 80%, #FFFFFF 20%);
--_tax-report-date-selected-text: #2D8DD9;
--_tax-report-date-selected-stroke: inset 0 0 0 1px rgba(173, 205, 238, .42);
--_tax-report-date-today-bg: #F8FBFF;
--_tax-report-date-today-text: #475569;
--_tax-report-date-today-stroke: inset 0 0 0 1px rgba(151, 176, 208, .5);
--_tax-report-date-label: #334155;
--_tax-report-date-subtle: #8693A6;
--_tax-report-filters-warning-text: #7E6643;
--_tax-report-filters-lead-title: #151C17;
--_tax-report-filters-lead-sub: #6D7377;
--_tax-preview-kpi-gap: 9px;
--_tax-preview-kpi-label: #B0B9C8;
--_tax-preview-kpi-border: #F2F5FA;
--_tax-preview-kpi-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
--_tax-preview-kpi-pad-y: 13.5px;
--_tax-preview-kpi-pad-x: 15.7px;
--_tax-preview-kpi-label-value-gap: 5.5px;
--_tax-preview-kpi-value-size: 21.86px;
--_tax-report-table-shell-bg:
radial-gradient(90% 90% at 0% 0%, rgba(227, 228, 227, .16) 0%, rgba(227, 228, 227, 0) 48%),
linear-gradient(180deg, #FBFCFB 0%, #F8F8F8 100%);
--_tax-report-table-bg: transparent;
--_tax-report-table-shell-border: rgba(228, 232, 239, .40);
--_tax-report-table-shell-radius: 15px;
--_tax-report-table-shell-shadow: 0 8px 22px rgba(15, 23, 42, .028), inset 0 1px 0 rgba(255,255,255,.78);
--_tax-report-table-head-height: 32px;
--_tax-report-table-head-bg: linear-gradient(180deg, rgba(251,251,251,.98) 0%, rgba(247,247,247,.94) 100%);
--_tax-report-table-head-sticky-bg: linear-gradient(180deg, #FBFBFB 0%, #F7F7F7 100%);
--_tax-report-table-head-text: #6A7273;
--_tax-report-table-head-size: 11.4px;
--_tax-report-table-head-weight: 540;
--_tax-report-table-head-separator: rgba(228, 232, 239, .40);
--_tax-report-table-head-active: #596263;
--_tax-report-table-row-bg: rgba(255,255,255,.76);
--_tax-report-table-row-hover: rgba(251,252,250,.94);
--_tax-report-table-row-separator: rgba(228, 232, 239, .40);
--_tax-report-table-row-text: #798280;
--_tax-report-table-row-muted: #8D9594;
--_tax-report-table-row-strong: #172026;
--_tax-report-table-cost-text: color-mix(in srgb, #7A8381 50%, var(--_tax-report-table-row-strong) 50%);
--_tax-report-table-pnl-text: color-mix(in srgb, var(--_tax-report-table-row-muted) 65%, var(--_tax-report-table-row-strong) 35%);
--_tax-report-table-pnl-good: color-mix(in srgb, #5D8A73 65%, var(--_tax-report-table-row-strong) 35%);
--_tax-report-table-pnl-bad: color-mix(in srgb, #B76879 65%, var(--_tax-report-table-row-strong) 35%);
--_tax-report-table-row-size: 12.1px;
--_tax-report-table-row-weight: 500;
--_tax-report-table-cell-pad-y: 9px;
--_tax-report-table-cell-pad-x: 8px;
--_tax-report-table-edge-px: 18px;
--_tax-report-table-sticky-divider: rgba(228, 232, 239, .40);
--_tax-report-table-sticky-bg: rgba(250,250,249,.98);
--_tax-report-table-sticky-hover-bg: rgba(252,252,251,.98);
--_tax-report-table-action-col-width: 48px;
--_tax-report-table-action-btn-size: 24px;
--_tax-report-table-action-btn-radius: 9px;
--_tax-report-table-action-btn-border: rgba(223, 225, 223, .92);
--_tax-report-table-action-btn-bg: rgba(255,255,255,.78);
--_tax-report-table-action-btn-text: #7A8695;
--_tax-report-table-action-btn-hover-bg: #F7F8F7;
--_tax-report-table-action-btn-hover-border: #D7DEDE;
--_tax-report-table-action-btn-hover-text: #5F6976;
--_tax-report-table-badge-h: 18px;
--_tax-report-table-badge-radius: 999px;
--_tax-report-table-badge-pad-x: 8px;
--_tax-report-table-badge-font-size: 9px;
--_tax-report-table-badge-font-weight: 600;
--_tax-report-table-badge-line: 1.2;
--_tax-report-table-badge-border-w: 1px;
--_tax-report-table-badge-shadow: inset 0 1px 0 rgba(255,255,255,.70);
--_tax-report-table-status-pending-bg: rgba(230, 239, 252, .96);
--_tax-report-table-status-pending-border: rgba(191, 207, 235, .98);
--_tax-report-table-status-pending-text: #4C6688;
--_tax-report-table-status-approved-bg: rgba(231, 243, 236, .96);
--_tax-report-table-status-approved-border: rgba(190, 216, 201, .98);
--_tax-report-table-status-approved-text: #466754;
--_tax-report-table-status-rejected-bg: rgba(239, 242, 246, .96);
--_tax-report-table-status-rejected-border: rgba(206, 213, 223, .98);
--_tax-report-table-status-rejected-text: #5D6677;
--_tax-report-table-badge-result-ok-bg: rgba(240, 246, 242, .92);
--_tax-report-table-badge-result-ok-border: rgba(210, 226, 216, .92);
--_tax-report-table-badge-result-ok-text: #5F7B6D;
--_tax-report-table-badge-result-oversold-bg: rgba(251, 244, 233, .96);
--_tax-report-table-badge-result-oversold-border: rgba(237, 221, 195, .94);
--_tax-report-table-badge-result-oversold-text: #8B6640;
--_tax-report-table-badge-source-exchange-bg: rgba(239, 244, 252, .92);
--_tax-report-table-badge-source-exchange-border: rgba(208, 219, 239, .92);
--_tax-report-table-badge-source-exchange-text: #59708E;
--_tax-report-table-badge-source-chain-bg: rgba(243, 247, 248, .92);
--_tax-report-table-badge-source-chain-border: rgba(220, 227, 230, .94);
--_tax-report-table-badge-source-chain-text: #64747A;
--_tax-report-table-badge-source-bank-bg: rgba(249, 244, 237, .92);
--_tax-report-table-badge-source-bank-border: rgba(233, 223, 208, .94);
--_tax-report-table-badge-source-bank-text: #7C6B56;
--_tax-report-table-badge-source-wallet-bg: rgba(240, 246, 242, .92);
--_tax-report-table-badge-source-wallet-border: rgba(210, 226, 216, .94);
--_tax-report-table-badge-source-wallet-text: #5B7567;
--_tax-report-table-badge-source-none-bg: rgba(245, 246, 248, .92);
--_tax-report-table-badge-source-none-border: rgba(222, 225, 231, .92);
--_tax-report-table-badge-source-none-text: #7A838F;
--_tax-report-table-badge-method-auto-bg: rgba(242, 246, 252, .92);
--_tax-report-table-badge-method-auto-border: rgba(216, 225, 239, .94);
--_tax-report-table-badge-method-auto-text: #61738C;
--_tax-report-table-badge-method-manual-bg: rgba(245, 244, 251, .92);
--_tax-report-table-badge-method-manual-border: rgba(227, 223, 238, .94);
--_tax-report-table-badge-method-manual-text: #746D8E;
--_tax-preview-font-ui: "Inter", var(--ct-font-sans);
--_tax-report-top-font-ui: "Inter", var(--ct-font-sans);
--_tax-report-top-font-mono: var(--ct-font-mono);
--_tax-report-top-header-bg: #FCFCFA;
--_tax-report-top-header-border: #E4E4E1;
--_tax-report-top-header-radius: 16px;
--_tax-report-top-header-shadow: 0 8px 17px rgba(201, 203, 199, 0.1);
--_tax-report-top-header-pad-y: 10px;
--_tax-report-top-header-pad-x: 13px;
--_tax-report-top-header-gap: 8px;
--_tax-report-top-title-size: 25px;
--_tax-report-top-control-height: 34px;
--_tax-report-top-control-radius: 12px;
--_tax-report-top-control-font: 12px;
--_tax-report-top-control-gap: 8px;
--_tax-report-top-hero-radius: 25px;
--_tax-report-top-hero-border: rgba(224, 213, 197, .24);
--_tax-report-top-hero-ready-bg: linear-gradient(180deg, #E4ECE0 0%, #EEF3EA 42%, #FBFBF7 100%);
--_tax-report-top-hero-warning-bg: linear-gradient(180deg, #EEDFCB 0%, #F6EFE4 42%, #FCFBF8 100%);
--_tax-report-top-hero-blocked-bg: linear-gradient(180deg, #E6E9E4 0%, #F1F3F0 42%, #FBFBF8 100%);
--_tax-report-top-hero-ready-border: rgba(223, 214, 199, .24);
--_tax-report-top-hero-warning-border: rgba(226, 210, 188, .27);
--_tax-report-top-hero-blocked-border: rgba(224, 215, 201, .24);
--_tax-report-top-hero-shadow: 0 10px 22px rgba(144, 159, 138, 0.05);
--_tax-report-top-hero-main-pad-y: 25px;
--_tax-report-top-hero-main-pad-x: 26px;
--_tax-report-top-hero-main-gap: 17px;
--_tax-report-top-hero-side-width: 252px;
--_tax-report-top-hero-side-gap: 12px;
--_tax-report-top-hero-side-pad-top: 8px;
--_tax-report-top-hero-side-pad-right: 8px;
--_tax-report-top-hero-side-pad-bottom: 8px;
--_tax-report-top-hero-side-pad-left: 12px;
--_tax-report-top-hero-pill-bg: rgba(255, 255, 255, 0.72);
--_tax-report-top-hero-pill-border: #E2E8DF;
--_tax-report-top-hero-pill-text: #4A6848;
--_tax-report-top-hero-pill-size: 12px;
--_tax-report-top-hero-title: #162018;
--_tax-report-top-hero-title-size: 43px;
--_tax-report-top-hero-body: #5E6E63;
--_tax-report-top-hero-body-size: 14px;
--_tax-report-top-hero-exclusion-label: #425345;
--_tax-report-top-hero-exclusion-label-size: 14px;
--_tax-report-top-side-card-bg: #FDFCF9;
--_tax-report-top-side-card-border: #E3E1DA;
--_tax-report-top-side-card-radius: 14px;
--_tax-report-top-side-card-pad: 13px;
--_tax-report-top-side-card-label: #697074;
--_tax-report-top-side-card-value: #1A1F24;
--_tax-report-top-side-card-meta: #646B70;
--_tax-report-top-side-card-label-size: 10px;
--_tax-report-top-side-card-value-size: 27px;
--_tax-report-top-side-card-meta-size: 10px;
--_tax-report-top-problems-card-bg: #F7EFE5;
--_tax-report-top-problems-card-border: rgba(230, 215, 199, .15);
--_tax-report-top-problems-card-label: #8D6B4C;
--_tax-report-top-problems-card-value: #604633;
--_tax-report-top-problems-card-meta: #7F6654;
--_tax-report-top-kpi-shell-radius: 22px;
--_tax-report-top-kpi-shell-bg: linear-gradient(180deg, rgba(255,255,255,.985) 0%, rgba(249,250,252,.975) 100%);
--_tax-report-top-kpi-shell-border: rgba(229, 234, 241, .54);
--_tax-report-top-kpi-shell-shadow: 0 16px 34px rgba(15, 23, 42, .035), 0 1px 0 rgba(255,255,255,.95) inset;
--_tax-report-top-kpi-min-height: 118px;
--_tax-report-top-kpi-pad-y: 17px;
--_tax-report-top-kpi-pad-x: 24px;
--_tax-report-top-kpi-content-gap: 14px;
--_tax-report-top-kpi-head-gap: 12px;
--_tax-report-top-kpi-label: #8B94A2;
--_tax-report-top-kpi-value: #121823;
--_tax-report-top-kpi-label-size: 10.5px;
--_tax-report-top-kpi-value-size: 23px;
--_tax-report-top-kpi-icon-size: 24px;
--_tax-report-top-kpi-icon-radius: 8px;
--_tax-report-top-kpi-icon-neutral-border: #E7EBF1;
--_tax-report-top-kpi-icon-neutral-bg: linear-gradient(180deg, #FCFDFC 0%, #F7F8FA 100%);
--_tax-report-top-kpi-icon-neutral-color: #78818E;
--_tax-report-top-kpi-icon-pnl-border: #DFE6F6;
--_tax-report-top-kpi-icon-pnl-bg: linear-gradient(180deg, rgba(246,248,255,.98) 0%, rgba(238,243,255,.96) 100%);
--_tax-report-top-kpi-icon-pnl-color: #7382B1;
--_tax-report-top-kpi-icon-buy-border: #F0DADF;
--_tax-report-top-kpi-icon-buy-bg: linear-gradient(180deg, rgba(255,247,249,.98) 0%, rgba(251,239,242,.96) 100%);
--_tax-report-top-kpi-icon-buy-color: #B47381;
--_tax-report-top-kpi-icon-sell-border: #DCE9DF;
--_tax-report-top-kpi-icon-sell-bg: linear-gradient(180deg, rgba(246,251,247,.98) 0%, rgba(239,247,241,.96) 100%);
--_tax-report-top-kpi-icon-sell-color: #6F8E73;
--_tax-report-table-intro-text: #768091;
--_tax-report-problem-row-bg: rgba(255, 248, 238, .96);
--_tax-report-problem-row-sticky-bg: #FFF8ED;
}
#viewTaxReport > .taxReportPageShell{
border: 0;
background: transparent;
border-radius: 0;
box-shadow: none;
}
#viewTaxReport > .taxReportPageShell > .taxReportPageInner{
padding: 14px 14px 11px;
}
#viewTaxReport .taxReportTopHeader{
margin-bottom: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--_tax-report-top-header-gap);
min-height: 60px;
padding: var(--_tax-report-top-header-pad-y) var(--_tax-report-top-header-pad-x);
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
#viewTaxReport .taxReportTopHeaderTitleWrap{
min-width: 0;
flex: 1 1 auto;
}
#viewTaxReport .taxReportTopHeaderTitle{
color: #171C18;
font-family: var(--_tax-report-top-font-ui);
font-size: var(--_tax-report-top-title-size);
font-weight: 700;
line-height: .98;
letter-spacing: -.03em;
}
#viewTaxReport .taxReportTopHeaderControls{
display: inline-flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: var(--_tax-report-top-control-gap);
min-width: 0;
}
#viewTaxReport .taxReportTopCurrency{
display: inline-flex;
align-items: center;
gap: 8px;
min-height: var(--_tax-report-top-control-height);
margin: 0;
padding: 7px 10px;
border: 1px solid #E3E3E3;
border-radius: 12px;
background: #F8F8F8;
box-sizing: border-box;
white-space: nowrap;
}
#viewTaxReport .taxReportTopCurrencyLabel{
color: #64696D;
font-family: var(--_tax-report-top-font-ui);
font-size: 11px;
font-weight: 500;
line-height: 1;
}
#viewTaxReport .taxReportTopCurrencySelect{
width: auto;
min-width: 0;
padding: 0;
border: 0;
background: transparent;
color: #31363B;
font-size: 11px;
font-weight: 600;
cursor: pointer;
}
#viewTaxReport .taxReportTopExportBtn,
#viewTaxReport .taxReportTopBackBtn{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--_tax-report-top-control-height);
padding: 0 13px;
border-radius: 13px;
font-family: var(--_tax-report-top-font-ui);
font-size: var(--_tax-report-top-control-font);
line-height: 1;
white-space: nowrap;
transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#viewTaxReport #btnExportTaxReportCsv{
border: 1px solid #1A1A1A;
background: linear-gradient(180deg, #151515 0%, #2A2A2A 100%);
color: #FFFFFF;
font-weight: 600;
box-shadow: 0 9px 17px rgba(22, 22, 22, 0.1);
}
#viewTaxReport #btnExportTaxReportCsv:hover{
border-color: #111111;
background: linear-gradient(180deg, #111111 0%, #242424 100%);
box-shadow: 0 11px 19px rgba(22, 22, 22, 0.14);
}
#viewTaxReport #btnBackTaxReport{
border: 1px solid #E3E3E3;
background: #F7F7F7;
color: #464B50;
font-weight: 500;
box-shadow: none;
}
#viewTaxReport #btnBackTaxReport:hover{
background: #F1F1F1;
border-color: #D9D9D9;
}
#viewTaxReport #btnExportTaxReportCsv:active,
#viewTaxReport #btnBackTaxReport:active{
transform: translateY(1px);
}
#viewTaxReport .taxReportTopHero{
margin-top: 24px;
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(220px, var(--_tax-report-top-hero-side-width));
min-height: 263px;
--_tax-report-top-hero-frame-border: var(--_tax-report-top-hero-blocked-border);
border: 0;
border-radius: var(--_tax-report-top-hero-radius);
background: var(--_tax-report-top-hero-blocked-bg);
box-shadow: var(--_tax-report-top-hero-shadow);
overflow: hidden;
isolation: isolate;
}
#viewTaxReport .taxReportTopHero::after{
content: "";
position: absolute;
inset: 0;
border: 1px solid var(--_tax-report-top-hero-frame-border);
border-radius: inherit;
pointer-events: none;
z-index: 2;
}
#viewTaxReport .taxReportTopHero.is-ready{
--_tax-report-top-hero-frame-border: var(--_tax-report-top-hero-ready-border);
background: var(--_tax-report-top-hero-ready-bg);
}
#viewTaxReport .taxReportTopHero.is-warning{
--_tax-report-top-hero-frame-border: var(--_tax-report-top-hero-warning-border);
background: var(--_tax-report-top-hero-warning-bg);
}
#viewTaxReport .taxReportTopHero.is-blocked{
--_tax-report-top-hero-frame-border: var(--_tax-report-top-hero-blocked-border);
background: var(--_tax-report-top-hero-blocked-bg);
}
#viewTaxReport .taxReportTopHeroMain{
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--_tax-report-top-hero-main-gap);
min-width: 0;
padding: var(--_tax-report-top-hero-main-pad-y) var(--_tax-report-top-hero-main-pad-x);
}
#viewTaxReport .taxReportTopHeroPill{
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
min-height: 25px;
padding: 7px 12px;
border: 1px solid var(--_tax-report-top-hero-pill-border);
border-radius: 999px;
background: var(--_tax-report-top-hero-pill-bg);
color: var(--_tax-report-top-hero-pill-text);
font-family: var(--_tax-report-top-font-ui);
font-size: var(--_tax-report-top-hero-pill-size);
font-weight: 600;
line-height: 1;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
#viewTaxReport .taxReportTopHeroPill::before{
content: "";
width: 8px;
height: 8px;
flex: 0 0 auto;
border-radius: 50%;
background: #7AA072;
box-shadow: 0 0 0 1px rgba(122, 160, 114, 0.12);
}
#viewTaxReport .taxReportTopHero.is-warning .taxReportTopHeroPill{
border-color: #E4D6C6;
background: rgba(255, 255, 255, 0.88);
color: #8B6A49;
}
#viewTaxReport .taxReportTopHero.is-warning .taxReportTopHeroPill::before{
background: #C28B42;
box-shadow: 0 0 0 1px rgba(194, 139, 66, 0.12);
}
#viewTaxReport .taxReportTopHero.is-blocked .taxReportTopHeroPill{
border-color: #DCE2DC;
color: #617066;
}
#viewTaxReport .taxReportTopHero.is-blocked .taxReportTopHeroPill::before{
background: #8C9B8F;
box-shadow: 0 0 0 1px rgba(140, 155, 143, 0.12);
}
#viewTaxReport .taxReportTopHeroText{
display: flex;
flex-direction: column;
min-width: 0;
}
#viewTaxReport .taxReportTopHeroTitle{
color: var(--_tax-report-top-hero-title);
font-family: var(--_tax-report-top-font-ui);
font-size: var(--_tax-report-top-hero-title-size);
font-weight: 700;
line-height: .92;
letter-spacing: -.05em;
text-wrap: balance;
}
#viewTaxReport .taxReportTopHeroFooter{
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
#viewTaxReport .taxReportTopHeroBody{
max-width: 612px;
color: var(--_tax-report-top-hero-body);
font-family: var(--_tax-report-top-font-ui);
font-size: var(--_tax-report-top-hero-body-size);
font-weight: 500;
line-height: 1.35;
}
#viewTaxReport .taxReportTopHeroExclusion{
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
padding: 0;
border: 0;
background: transparent;
color: var(--_tax-report-top-hero-exclusion-label);
}
#viewTaxReport .taxReportTopHeroExclusionLabel{
color: var(--_tax-report-top-hero-exclusion-label);
font-family: var(--_tax-report-top-font-ui);
font-size: var(--_tax-report-top-hero-exclusion-label-size);
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
}
#viewTaxReport .taxReportTopHeroExclusionBadges{
display: inline-flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
}
#viewTaxReport .taxReportTopHeroExclusion .taxPreviewReasonBadge,
#viewTaxReport .taxReportTopHeroExclusion .taxProofChip.oversold,
#viewTaxReport .taxReportTopHeroExclusion .taxProofChip.taxPreviewPendingChip{
min-height: 23px;
padding: 5px 10px;
border-radius: 999px;
font-family: var(--_tax-report-top-font-ui);
font-size: 11px;
font-weight: 600;
line-height: 1;
box-shadow: none;
}
#viewTaxReport .taxReportTopHeroExclusion .taxPreviewReasonBadge,
#viewTaxReport .taxReportTopHeroExclusion .taxProofChip.oversold{
border-color: #E6D4B5;
background: #FFF6E9;
color: #A9792E;
}
#viewTaxReport .taxReportTopHeroExclusion .taxProofChip.taxPreviewPendingChip{
border-width: var(--_tax-report-table-badge-border-w);
border-style: solid;
border-color: var(--_tax-report-table-status-pending-border);
background: var(--_tax-report-table-status-pending-bg);
color: var(--_tax-report-table-status-pending-text);
font-size: 10.45px;
font-weight: 570;
box-shadow: var(--_tax-report-table-badge-shadow);
}
#viewTaxReport .taxReportTopHeroSide{
display: flex;
flex-direction: column;
gap: var(--_tax-report-top-hero-side-gap);
min-width: 0;
padding: var(--_tax-report-top-hero-side-pad-top) var(--_tax-report-top-hero-side-pad-right) var(--_tax-report-top-hero-side-pad-bottom) var(--_tax-report-top-hero-side-pad-left);
}
#viewTaxReport .taxReportTopHeroSideCard{
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 7px;
min-height: 0;
flex: 1 1 0;
padding: var(--_tax-report-top-side-card-pad);
border: 1px solid var(--_tax-report-top-side-card-border);
border-radius: var(--_tax-report-top-side-card-radius);
background: var(--_tax-report-top-side-card-bg);
}
#viewTaxReport .taxReportTopHeroCardLabel{
color: var(--_tax-report-top-side-card-label);
font-family: var(--_tax-report-top-font-ui);
font-size: var(--_tax-report-top-side-card-label-size);
font-weight: 600;
line-height: 1.25;
letter-spacing: .08em;
text-transform: uppercase;
}
#viewTaxReport .taxReportTopHeroCardValue{
color: var(--_tax-report-top-side-card-value);
font-family: var(--_tax-report-top-font-ui);
font-size: var(--_tax-report-top-side-card-value-size);
font-weight: 700;
line-height: .96;
letter-spacing: -.04em;
font-variant-numeric: tabular-nums;
}
#viewTaxReport .taxReportTopHeroCardMeta{
color: var(--_tax-report-top-side-card-meta);
font-family: var(--_tax-report-top-font-ui);
font-size: var(--_tax-report-top-side-card-meta-size);
font-weight: 500;
line-height: 1.35;
}
#viewTaxReport .taxReportTopHeroProblemsCard{
position: relative;
cursor: pointer;
border-width: .5px;
border-color: var(--_tax-report-top-problems-card-border);
background: var(--_tax-report-top-problems-card-bg);
transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
#viewTaxReport .taxReportTopHeroProblemsCard .taxReportTopHeroCardLabel{
color: var(--_tax-report-top-problems-card-label);
}
#viewTaxReport .taxReportTopHeroProblemsCard .taxReportTopHeroCardValue{
color: var(--_tax-report-top-problems-card-value);
}
#viewTaxReport .taxReportTopHeroProblemsCard .taxReportTopHeroCardMeta{
color: var(--_tax-report-top-problems-card-meta);
}
#viewTaxReport .taxReportTopHeroProblemsCard:hover{
transform: translateY(-2px);
box-shadow: 0 8px 15px rgba(120, 90, 51, 0.08);
}
#viewTaxReport .taxReportTopHeroProblemsCard:active{
transform: translateY(1px);
}
#viewTaxReport .taxReportTopHeroProblemsCard:focus-visible{
outline: 2px solid rgba(120, 160, 255, 0.5);
outline-offset: 2px;
}
#viewTaxReport .taxReportTopHeroProblemsCard.is-active{
border-color: rgba(197, 150, 95, .15);
background: linear-gradient(180deg, #FAF1E6 0%, #F5E8D7 100%);
box-shadow: inset 0 0 0 1px rgba(197, 150, 95, 0.027);
}
#viewTaxReport .taxReportTopHero.is-ready .taxReportTopHeroProblemsCard:not(.has-problems){
border-width: 1px;
border-color: rgba(224, 224, 221, .45);
background: rgba(253, 252, 249, 0.88);
box-shadow: none;
}
#viewTaxReport .taxReportTopHero.is-ready .taxReportTopHeroProblemsCard:not(.has-problems) .taxReportTopHeroCardLabel{
color: #707579;
}
#viewTaxReport .taxReportTopHero.is-ready .taxReportTopHeroProblemsCard:not(.has-problems) .taxReportTopHeroCardValue{
color: #5B6065;
}
#viewTaxReport .taxReportTopHero.is-ready .taxReportTopHeroProblemsCard:not(.has-problems) .taxReportTopHeroCardMeta{
color: #757B7F;
}
#viewTaxReport .taxReportTopHero.is-blocked .taxReportTopHeroStatCard{
background: rgba(253, 252, 249, 0.82);
border-color: #DDDDDA;
}
#viewTaxReport .taxReportTopHero.is-blocked .taxReportTopHeroProblemsCard:not(.has-problems){
background: rgba(248, 248, 244, 0.88);
border-color: #D8D8D5;
}
/* === Tax report dropdowns: shared base === */
#viewTaxReport :is(#taxReportCurrencyPicker, #taxReportSourceFilterPicker, #taxPreviewModePicker){
position: relative;
--_dropdown-trigger-text: #111827;
--_dropdown-trigger-open-border: #E8E8E6;
--_dropdown-menu-border: #ECECE9;
--_dropdown-menu-radius: 12px;
--_dropdown-menu-bg: #FFFFFF;
--_dropdown-menu-shadow: 0 10px 20px rgba(30, 30, 30, 0.08);
--_dropdown-menu-pad: 6px;
--_dropdown-menu-offset-y: -3px;
--_dropdown-option-radius: 8px;
--_dropdown-option-pad-y: 6px;
--_dropdown-option-pad-x: 12px;
--_dropdown-option-font-weight: 445;
--_dropdown-option-text: #5B6166;
--_dropdown-option-hover-bg: #F7F7F6;
--_dropdown-option-hover-text: #111827;
}
#viewTaxReport :is(#taxReportCurrencyPicker, #taxReportSourceFilterPicker, #taxPreviewModePicker).assetPicker::after{
width: 5px;
height: 5px;
border-right-width: 1.3px;
border-bottom-width: 1.3px;
border-right-color: #9CA3AF;
border-bottom-color: #9CA3AF;
transform: translateY(-58%) rotate(45deg);
}
#viewTaxReport :is(#taxReportCurrencyPicker, #taxReportSourceFilterPicker, #taxPreviewModePicker).is-open.assetPicker::after{
transform: translateY(-58%) rotate(45deg);
}
#viewTaxReport :is(#taxReportCurrencyPickerDropdown, #taxReportSourceFilterPickerDropdown, #taxPreviewModePickerDropdown).txDropdownMenu{
position: fixed;
top: 0;
left: 0;
right: auto;
z-index: 84;
min-width: 0;
border: 1px solid var(--_dropdown-menu-border);
border-radius: var(--_dropdown-menu-radius);
background: var(--_dropdown-menu-bg);
box-shadow: var(--_dropdown-menu-shadow);
padding: var(--_dropdown-menu-pad);
padding-bottom: calc(var(--_dropdown-menu-pad) + 5px);
overflow: hidden;
transform: translateY(var(--_dropdown-menu-offset-y));
}
#viewTaxReport :is(#taxReportCurrencyPicker, #taxReportSourceFilterPicker, #taxPreviewModePicker).txDropdown.is-open .txDropdownTrigger{
border-color: var(--_dropdown-trigger-open-border);
background: #F8F8F8;
box-shadow: none;
}
#viewTaxReport :is(#taxReportCurrencyPicker, #taxReportSourceFilterPicker, #taxPreviewModePicker) .txDropdownOption{
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 0;
height: auto;
border: 0;
border-radius: var(--_dropdown-option-radius);
padding: var(--_dropdown-option-pad-y) var(--_dropdown-option-pad-x);
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_dropdown-option-font-size);
font-weight: var(--_dropdown-option-font-weight);
line-height: 1.15;
color: var(--_dropdown-option-text);
background: transparent;
box-shadow: none;
}
#viewTaxReport :is(#taxReportCurrencyPicker, #taxReportSourceFilterPicker, #taxPreviewModePicker) .txDropdownOption.is-selected{
background: transparent;
color: var(--_dropdown-option-text);
box-shadow: none;
}
#viewTaxReport :is(#taxReportCurrencyPicker, #taxReportSourceFilterPicker, #taxPreviewModePicker) .txDropdownOption:hover,
#viewTaxReport :is(#taxReportCurrencyPicker, #taxReportSourceFilterPicker, #taxPreviewModePicker) .txDropdownOption:focus-visible{
background: var(--_dropdown-option-hover-bg);
color: var(--_dropdown-option-hover-text);
border-color: transparent;
box-shadow: none;
}
/* Currency picker: unique */
#viewTaxReport #taxReportCurrencyPicker{
min-width: 60px;
width: 60px;
--_dropdown-trigger-font-size: 11px;
--_dropdown-trigger-font-weight: 600;
--_dropdown-trigger-radius: 10px;
--_dropdown-trigger-border: #E3E3E3;
--_dropdown-option-font-size: 11px;
}
#viewTaxReport #taxReportCurrencyPicker.assetPicker::after{
right: 9px;
}
#viewTaxReport #taxReportCurrencyPicker > #taxReportCurrency.txDropdownNative{
position: absolute !important;
opacity: 0 !important;
pointer-events: none !important;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
inset: 0 !important;
}
#viewTaxReport #taxReportCurrencyPickerInput{
width: 100%;
min-width: 60px;
cursor: pointer;
text-align: left;
background: #F8F8F8;
border: 0;
color: #31363B;
padding: 0 15px 0 0;
height: 21px;
min-height: 21px;
font-family: "Inter", var(--ct-font-sans);
font-size: 11px;
font-weight: 600;
line-height: 1.1;
box-shadow: none;
border-radius: 0;
caret-color: transparent;
}
#viewTaxReport .taxReportTopCurrencySelect:focus{
outline: none;
box-shadow: none;
}
#viewTaxReport .taxReportFilters{
margin-top: 13px;
display: grid;
gap: var(--_tax-report-filters-gap);
padding: 2px 0 13px;
border-bottom: 0;
}
#viewTaxReport .taxReportFiltersRail{
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--_tax-report-filters-rail-gap);
min-width: 0;
}
#viewTaxReport .taxReportFiltersPeriod,
#viewTaxReport .taxReportFiltersReview,
#viewTaxReport .taxReportFiltersLead{
display: flex;
align-items: center;
min-width: 0;
}
#viewTaxReport .taxReportFiltersPeriod{
gap: var(--_tax-report-filters-inline-gap);
overflow: hidden;
}
#viewTaxReport .taxReportFiltersReview{
justify-self: end;
gap: 8px;
}
#viewTaxReport .taxReportFiltersLead{
min-height: 0;
padding-left: 2px;
}
#viewTaxReport .taxReportFiltersRange{
position: relative;
display: inline-flex;
align-items: center;
gap: 0;
min-width: 0;
padding: 0 var(--_tax-report-filters-range-shell-icon-space) 0 var(--_tax-report-filters-range-shell-pad-x);
min-height: var(--_tax-report-filters-field-height);
border: 1px solid var(--_tax-report-filters-field-border);
border-radius: var(--_tax-report-filters-range-shell-radius);
background: var(--_tax-report-filters-field-bg);
box-shadow: var(--_tax-report-filters-field-shadow);
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#viewTaxReport .taxReportFiltersRange::after{
content: "";
position: absolute;
top: 50%;
right: 10px;
width: 12px;
height: 12px;
transform: translateY(-50%);
opacity: .82;
pointer-events: none;
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238D9297' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2' ry='2'/%3E%3Cline x1='8' y1='2.5' x2='8' y2='6.5'/%3E%3Cline x1='16' y1='2.5' x2='16' y2='6.5'/%3E%3Cline x1='3' y1='9.5' x2='21' y2='9.5'/%3E%3C/svg%3E");
}
#viewTaxReport .taxReportFiltersRange:hover,
#viewTaxReport .taxReportFiltersRange:focus-within{
border-color: var(--_tax-report-filters-field-border);
box-shadow: 0 0 0 1px rgba(229, 234, 241, .39);
}
#viewTaxReport .taxReportFiltersRangeDash{
flex: 0 0 auto;
margin: 0 3px;
color: var(--_tax-report-filters-dash-color);
font-family: var(--_tax-report-top-font-ui);
font-size: var(--_tax-report-filters-dash-size);
font-weight: 500;
line-height: 1;
}
#viewTaxReport .taxReportFiltersDatePicker{
position: relative;
width: var(--_tax-report-filters-field-width);
flex: 0 0 var(--_tax-report-filters-field-width);
min-width: 0;
}
#viewTaxReport #taxReportDateFrom,
#viewTaxReport #taxReportDateTo{
display: none;
}
#viewTaxReport .taxReportFiltersDatePicker .txDateTimeTrigger{
position: relative;
display: flex;
align-items: center;
width: 100%;
min-height: var(--_tax-report-filters-field-height);
height: var(--_tax-report-filters-field-height);
overflow: hidden;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
#viewTaxReport .taxReportFiltersDateInput{
flex: 1 1 auto;
min-width: 0;
width: 100%;
height: 100%;
border: 0;
background: transparent;
color: var(--_tax-report-filters-field-text);
font-family: var(--_tax-report-top-font-ui);
font-size: var(--_tax-report-filters-field-font-size);
font-weight: 600;
line-height: 1.1;
padding: 0 5px 0 0;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
appearance: none;
-webkit-appearance: none;
box-shadow: none;
cursor: pointer;
text-align: left;
}
#viewTaxReport #taxReportDateFromDisplayInput{
text-align: right;
padding-right: 0;
}
#viewTaxReport #taxReportDateToDisplayInput{
padding-right: 0;
}
#viewTaxReport .taxReportFiltersDateInput::placeholder{
color: var(--_tax-report-filters-field-placeholder);
opacity: 1;
}
#viewTaxReport .taxReportFiltersDateInput:focus{
outline: none;
}
#viewTaxReport .taxReportFiltersDatePicker .txDateTimeOpenBtn{
display: none;
}
#viewTaxReport .taxReportFiltersDatePicker .txDateTimePopover{
position: fixed;
z-index: 86;
width: var(--_tax-report-filters-popover-width);
border: 1px solid var(--_tax-report-filters-popover-border);
border-radius: var(--_tax-report-filters-popover-radius);
background: var(--_tax-report-filters-popover-bg);
box-shadow: var(--_tax-report-filters-popover-shadow);
padding: 10px;
box-sizing: border-box;
overflow: visible;
}
#viewTaxReport .taxReportFiltersDatePicker .txDateTimePopoverInner{
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
align-items: start;
}
#viewTaxReport .taxReportFiltersDatePicker .txDatePanel{
border: 1px solid var(--_tax-report-date-panel-border);
border-radius: var(--_tax-report-date-panel-radius);
background: #FFFFFF;
padding: 10px;
}
#viewTaxReport .taxReportFiltersDatePicker .txDateHeader{
display: grid;
grid-template-columns: 30px 1fr 30px;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
#viewTaxReport .taxReportFiltersDatePicker .txDateNavBtn{
min-height: 28px;
height: 28px;
border-radius: var(--_tx-type-chip-radius);
border: 1px solid var(--_tax-report-date-quiet-border);
background: var(--_tax-report-date-quiet-bg);
color: var(--_tax-report-date-quiet-text);
font-size: 15px;
line-height: 1;
padding: 0;
}
#viewTaxReport .taxReportFiltersDatePicker .txDateMonthLabel{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
min-height: 28px;
height: 28px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--_tax-report-date-label);
font-family: var(--_tax-report-top-font-ui);
font-size: 12px;
font-weight: 600;
line-height: 1;
text-transform: capitalize;
padding: 0 6px;
cursor: pointer;
}
#viewTaxReport .taxReportFiltersDatePicker .txDateMonthLabel::after{
content: "▾";
color: #8EA1BA;
font-size: 10px;
line-height: 1;
transform: translateY(1px);
}
#viewTaxReport .taxReportFiltersDatePicker .txDateMonthLabel:hover,
#viewTaxReport .taxReportFiltersDatePicker .txDateMonthLabel:focus-visible{
outline: none;
background: #F3F8FF;
color: #2F7FBF;
}
#viewTaxReport .taxReportFiltersDatePicker .txDateWeekdays{
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-bottom: 6px;
}
#viewTaxReport .taxReportFiltersDatePicker .txDateWeekdays span{
text-align: center;
color: var(--_tax-report-date-subtle);
font-family: var(--_tax-report-top-font-ui);
font-size: 10px;
font-weight: 600;
line-height: 1.1;
}
#viewTaxReport .taxReportFiltersDatePicker .txDateGrid{
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
#viewTaxReport .taxReportFiltersDatePicker .txDateMonthYearPanel{
display: grid;
gap: 10px;
padding-top: 2px;
}
#viewTaxReport .taxReportFiltersDatePicker .txDateYearGrid,
#viewTaxReport .taxReportFiltersDatePicker .txDateMonthGrid{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
}
#viewTaxReport .taxReportFiltersDatePicker .txDateYearBtn,
#viewTaxReport .taxReportFiltersDatePicker .txDateMonthBtn{
min-height: 28px;
height: 28px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--_tax-report-date-quiet-text);
font-family: var(--_tax-report-top-font-ui);
font-size: 11px;
font-weight: 520;
line-height: 1;
padding: 0 6px;
}
#viewTaxReport .taxReportFiltersDatePicker .txDateYearBtn:hover,
#viewTaxReport .taxReportFiltersDatePicker .txDateYearBtn:focus-visible,
#viewTaxReport .taxReportFiltersDatePicker .txDateMonthBtn:hover,
#viewTaxReport .taxReportFiltersDatePicker .txDateMonthBtn:focus-visible{
outline: none;
background: var(--_tax-report-date-hover-bg);
color: var(--_tax-report-date-hover-text);
}
#viewTaxReport .taxReportFiltersDatePicker .txDateYearBtn.is-selected,
#viewTaxReport .taxReportFiltersDatePicker .txDateMonthBtn.is-selected{
background: var(--_tax-report-date-selected-bg);
color: var(--_tax-report-date-selected-text);
box-shadow: var(--_tax-report-date-selected-stroke);
}
#viewTaxReport .taxReportFiltersDatePicker .txDateCell{
min-height: 28px;
height: 28px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--_tax-report-date-label);
font-family: var(--_tax-report-top-font-ui);
font-size: 11px;
font-weight: 500;
line-height: 1;
padding: 0;
}
#viewTaxReport .taxReportFiltersDatePicker .txDateCell:hover,
#viewTaxReport .taxReportFiltersDatePicker .txDateCell:focus-visible{
outline: none;
background: var(--_tax-report-date-hover-bg);
color: var(--_tax-report-date-hover-text);
}
#viewTaxReport .taxReportFiltersDatePicker .txDateCell.is-outside{
color: color-mix(in srgb, var(--_tax-report-date-subtle) 78%, white 22%);
}
#viewTaxReport .taxReportFiltersDatePicker .txDateCell.is-today{
background: var(--_tax-report-date-today-bg);
color: var(--_tax-report-date-today-text);
box-shadow: var(--_tax-report-date-today-stroke);
}
#viewTaxReport .taxReportFiltersDatePicker .txDateCell.is-selected{
background: var(--_tax-report-date-selected-bg);
color: var(--_tax-report-date-selected-text);
box-shadow: var(--_tax-report-date-selected-stroke);
}
#viewTaxReport .taxReportFiltersDatePicker .txDateActions{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
margin-top: 10px;
}
#viewTaxReport .taxReportFiltersDatePicker .txDateActionBtn{
min-height: 28px;
border-radius: 8px;
border: 1px solid var(--_tax-report-date-quiet-border);
background: var(--_tax-report-date-quiet-bg);
color: var(--_tax-report-date-quiet-text);
font-family: var(--_tax-report-top-font-ui);
font-size: 11px;
font-weight: 560;
line-height: 1.1;
padding: 0 9px;
white-space: nowrap;
}
#viewTaxReport .taxReportFiltersDatePicker .txDateActionBtn:hover,
#viewTaxReport .taxReportFiltersDatePicker .txDateActionBtn:focus-visible{
outline: none;
background: var(--_tax-report-date-hover-bg);
border-color: #CBD9EC;
color: var(--_tax-report-date-hover-text);
}
#viewTaxReport .taxReportPeriodPresets{
display: inline-flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
min-width: 0;
}
#viewTaxReport .taxReportFiltersChip{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--_tax-report-filters-chip-height);
border: 1px solid transparent;
border-radius: var(--_tax-report-filters-chip-radius);
font-family: var(--_tax-report-top-font-ui);
font-size: var(--_tax-report-filters-chip-font-size);
font-weight: 600;
line-height: 1;
cursor: pointer;
white-space: nowrap;
transform: none;
box-shadow: none;
transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
#viewTaxReport .taxReportFiltersPresetChip{
padding: 0 var(--_tax-report-filters-chip-pad-x);
border-color: var(--_tax-report-filters-chip-border);
background: var(--_tax-report-filters-chip-bg);
color: var(--_tax-report-filters-chip-text);
}
#viewTaxReport .taxReportFiltersPresetChip:hover{
background: #F3F3F2;
border-color: var(--_tax-report-filters-chip-border);
color: #5F656C;
box-shadow: none;
transform: none;
}
#viewTaxReport .taxReportFiltersPresetChip.is-active{
border-color: var(--_tax-report-filters-chip-active-border);
background: var(--_tax-report-filters-chip-active-bg);
color: var(--_tax-report-filters-chip-active-text);
box-shadow: none;
}
#viewTaxReport .taxReportFiltersPresetChip:active{
background: #ECEDEC;
border-color: var(--_tax-report-filters-chip-active-border);
color: #575D64;
box-shadow: none;
transform: none;
}
#viewTaxReport .taxReportFiltersPresetChip:focus-visible{
outline: none;
box-shadow: 0 0 0 1px rgba(229, 234, 241, .42);
}
#viewTaxReport .taxReportFiltersReset{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: var(--_tax-report-filters-source-height);
padding: 0 12px;
border: 1px solid var(--_tax-report-filters-chip-border);
border-radius: 10px;
background: var(--_tax-report-filters-chip-bg);
box-shadow: none;
color: var(--_tax-report-filters-chip-text);
font-family: var(--_tax-report-top-font-ui);
font-size: 11px;
font-weight: 600;
line-height: 1;
cursor: pointer;
white-space: nowrap;
transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
#viewTaxReport .taxReportFiltersReset::before{
content: "";
width: 11px;
height: 11px;
flex: 0 0 11px;
opacity: .86;
background-repeat: no-repeat;
background-position: center;
background-size: 11px 11px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23686D73' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v5h5'/%3E%3C/svg%3E");
}
#viewTaxReport .taxReportFiltersReset:hover{
border-color: #DBDDE1;
background: #F3F3F2;
color: #5F656C;
box-shadow: none;
}
#viewTaxReport .taxReportFiltersReset:hover::before{
opacity: 1;
}
#viewTaxReport .taxReportFiltersReset:active{
background: #ECEDEC;
border-color: #D6D8DD;
color: #575D64;
box-shadow: none;
}
#viewTaxReport :is(#taxPreviewModePicker, #taxReportSourceFilterPicker){
min-width: 0;
--_dropdown-trigger-font-size: var(--_tax-report-filters-source-font-size);
--_dropdown-trigger-font-weight: 490;
--_dropdown-trigger-radius: var(--_tax-report-filters-source-radius);
--_dropdown-trigger-border: var(--_tax-report-filters-source-border);
--_dropdown-trigger-text: color-mix(in srgb, #1F2939 92%, #5A677A 8%);
--_dropdown-trigger-open-border: #D7DEE9;
--_dropdown-menu-pad: 5px;
--_dropdown-menu-offset-y: -1px;
--_dropdown-option-radius: 8px;
--_dropdown-option-pad-y: 7px;
--_dropdown-option-pad-x: 11px;
--_dropdown-option-font-size: 12px;
--_dropdown-option-font-weight: 490;
--_dropdown-option-text: color-mix(in srgb, #1F2939 92%, #5A677A 8%);
}
#viewTaxReport #taxPreviewModePicker{
width: var(--_tax-report-filters-mode-width);
}
#viewTaxReport #taxReportSourceFilterPicker{
width: var(--_tax-report-filters-source-width);
}
#viewTaxReport :is(#taxPreviewModePicker, #taxReportSourceFilterPicker).assetPicker::after{
right: 10px;
width: 5px;
height: 5px;
border-right-color: #A4A7AA;
border-bottom-color: #A4A7AA;
}
#viewTaxReport :is(#taxPreviewModePicker > #taxPreviewModeFilter.txDropdownNative, #taxReportSourceFilterPicker > #taxReportSourceFilter.txDropdownNative){
position: absolute !important;
opacity: 0 !important;
pointer-events: none !important;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
inset: 0 !important;
}
#viewTaxReport :is(#taxPreviewModePickerInput, #taxReportSourceFilterPickerInput){
min-width: 0;
height: var(--_tax-report-filters-source-height);
min-height: var(--_tax-report-filters-source-height);
padding: 0 24px 0 10px;
border-radius: var(--_tax-report-filters-source-radius);
border: 1px solid var(--_tax-report-filters-source-border);
background: var(--_tax-report-filters-source-bg);
color: var(--_dropdown-trigger-text);
font-family: var(--_tax-report-top-font-ui);
font-size: var(--_tax-report-filters-source-font-size);
font-weight: var(--_dropdown-trigger-font-weight);
line-height: 1.1;
box-shadow: var(--_tax-report-filters-field-shadow);
cursor: pointer;
caret-color: transparent;
}
#viewTaxReport #taxPreviewModePickerInput{
width: var(--_tax-report-filters-mode-width);
}
#viewTaxReport #taxReportSourceFilterPickerInput{
width: var(--_tax-report-filters-source-width);
}
#viewTaxReport :is(#taxPreviewModePicker, #taxReportSourceFilterPicker).txDropdown.is-open .txDropdownTrigger{
border-color: var(--_tax-report-filters-source-border);
background: #FFFFFF;
box-shadow: 0 0 0 1px rgba(229, 234, 241, .39);
}
#viewTaxReport :is(#taxPreviewModePicker, #taxReportSourceFilterPicker):hover .txDropdownTrigger,
#viewTaxReport :is(#taxPreviewModePicker, #taxReportSourceFilterPicker):focus-within .txDropdownTrigger{
box-shadow: 0 0 0 1px rgba(229, 234, 241, .35);
}
#viewTaxReport .taxReportFiltersWarning{
color: var(--_tax-report-filters-warning-text);
font-family: var(--_tax-report-top-font-ui);
font-size: 10px;
font-weight: 500;
line-height: 1.45;
}
#viewTaxReport .taxReportTopKpis{
margin-top: 10px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
border: 1px solid var(--_tax-report-top-kpi-shell-border);
border-radius: var(--_tax-report-top-kpi-shell-radius);
background: var(--_tax-report-top-kpi-shell-bg);
box-shadow: var(--_tax-report-top-kpi-shell-shadow);
overflow: hidden;
}
#viewTaxReport .taxReportTopKpiCard{
min-width: 0;
min-height: var(--_tax-report-top-kpi-min-height);
padding: var(--_tax-report-top-kpi-pad-y) var(--_tax-report-top-kpi-pad-x);
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--_tax-report-top-kpi-content-gap);
background: transparent;
}
#viewTaxReport .taxReportTopKpiHead{
display: inline-flex;
align-items: center;
gap: var(--_tax-report-top-kpi-head-gap);
min-width: 0;
}
#viewTaxReport .taxReportTopKpiIcon{
width: var(--_tax-report-top-kpi-icon-size);
height: var(--_tax-report-top-kpi-icon-size);
border-radius: var(--_tax-report-top-kpi-icon-radius);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
border: 1px solid var(--_tax-report-top-kpi-icon-neutral-border);
background: var(--_tax-report-top-kpi-icon-neutral-bg);
color: var(--_tax-report-top-kpi-icon-neutral-color);
}
#viewTaxReport .taxReportTopKpiIcon svg{
width: 10.5px;
height: 10.5px;
stroke: currentColor;
fill: none;
stroke-width: 1.55;
stroke-linecap: round;
stroke-linejoin: round;
}
#viewTaxReport .taxReportTopKpiIconPnl{
border-color: var(--_tax-report-top-kpi-icon-pnl-border);
background: var(--_tax-report-top-kpi-icon-pnl-bg);
color: var(--_tax-report-top-kpi-icon-pnl-color);
}
#viewTaxReport .taxReportTopKpiIconBuy{
border-color: var(--_tax-report-top-kpi-icon-buy-border);
background: var(--_tax-report-top-kpi-icon-buy-bg);
color: var(--_tax-report-top-kpi-icon-buy-color);
}
#viewTaxReport .taxReportTopKpiIconSell{
border-color: var(--_tax-report-top-kpi-icon-sell-border);
background: var(--_tax-report-top-kpi-icon-sell-bg);
color: var(--_tax-report-top-kpi-icon-sell-color);
}
#viewTaxReport .taxReportTopKpiLabel{
color: var(--_tax-report-top-kpi-label);
font-family: var(--_tax-report-top-font-ui);
font-size: var(--_tax-report-top-kpi-label-size);
font-weight: 560;
line-height: 1.1;
letter-spacing: .06em;
text-transform: none;
min-width: 0;
}
#viewTaxReport .taxReportTopKpiValue{
margin-top: 0;
color: var(--_tax-report-top-kpi-value);
font-family: var(--_tax-report-top-font-ui);
font-size: var(--_tax-report-top-kpi-value-size);
font-weight: 555;
line-height: .94;
letter-spacing: -.04em;
overflow-wrap: anywhere;
}
#viewTaxReport .taxReportTopKpiValue.good{
color: var(--good);
}
#viewTaxReport .taxReportTopKpiValue.bad{
color: var(--bad);
}
#viewTaxReport .taxReportTopKpiValue.mono{
font-family: var(--_tax-report-top-font-ui);
font-variant-numeric: tabular-nums;
}
#viewTaxReport .taxExportHistory{
--_tax-export-history-border: #E4E8EE;
--_tax-export-history-muted: #7A8492;
--_tax-export-history-text: #202733;
--_tax-export-history-surface: #FFFFFF;
--_tax-export-history-soft-bg: #F7F9FB;
--_tax-export-history-pill-border: #E6E9EE;
--_tax-export-history-pill-text: #697484;
--_tax-export-history-good-bg: #EEF7F1;
--_tax-export-history-good-border: #DCEBDF;
--_tax-export-history-good-text: #4E7A5A;
margin-top: 10px;
display: grid;
grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
border: 1px solid var(--_tax-export-history-border);
border-radius: 16px;
background: var(--_tax-export-history-surface);
box-shadow: 0 10px 24px rgba(20, 28, 38, .04);
overflow: hidden;
font-family: var(--_tax-report-top-font-ui);
}
#viewTaxReport .taxExportHistoryHead{
min-width: 0;
padding: 14px 16px;
border-right: 1px solid var(--_tax-export-history-border);
background: var(--_tax-export-history-soft-bg);
}
#viewTaxReport .taxExportHistoryTitle{
color: var(--_tax-export-history-text);
font-size: 14px;
font-weight: 760;
line-height: 1.15;
}
#viewTaxReport .taxExportHistoryMeta{
margin-top: 4px;
color: var(--_tax-export-history-muted);
font-size: 11px;
font-weight: 560;
line-height: 1.3;
}
#viewTaxReport .taxExportHistoryList{
min-width: 0;
display: grid;
align-content: stretch;
background: var(--_tax-export-history-surface);
}
#viewTaxReport .taxExportHistoryState{
min-height: 58px;
display: flex;
align-items: center;
padding: 13px 16px;
color: var(--_tax-export-history-muted);
font-size: 12px;
font-weight: 620;
line-height: 1.35;
}
#viewTaxReport .taxExportHistoryStateError{
color: #7D5360;
background: #FBF6F7;
}
#viewTaxReport .taxExportHistorySummary{
width: 100%;
min-height: 58px;
padding: 13px 14px;
border: 0;
border-bottom: 1px solid transparent;
background: var(--_tax-export-history-surface);
color: #566171;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
cursor: pointer;
text-align: left;
font: inherit;
}
#viewTaxReport .taxExportHistorySummary[aria-expanded="true"]{
border-bottom-color: var(--_tax-export-history-border);
background: linear-gradient(180deg, var(--_tax-export-history-surface), var(--_tax-export-history-soft-bg));
}
#viewTaxReport .taxExportHistorySummary:hover,
#viewTaxReport .taxExportHistorySummary:focus-visible{
background: var(--_tax-export-history-soft-bg);
outline: none;
}
#viewTaxReport .taxExportHistorySummaryMain{
min-width: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
font-size: 12px;
font-weight: 620;
line-height: 1.3;
}
#viewTaxReport .taxExportHistorySummaryStrong{
color: var(--_tax-export-history-text);
font-weight: 760;
}
#viewTaxReport .taxExportHistorySummaryAction{
flex: 0 0 auto;
min-height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 9px;
border: 1px solid var(--_tax-export-history-pill-border);
border-radius: 999px;
background: var(--_tax-export-history-soft-bg);
color: var(--_tax-export-history-pill-text);
font-size: 11px;
font-weight: 720;
line-height: 1;
white-space: nowrap;
}
#viewTaxReport .taxExportHistoryRows{
min-width: 0;
display: grid;
}
#viewTaxReport .taxExportHistoryRow{
min-width: 0;
min-height: 46px;
padding: 10px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid var(--_tax-export-history-border);
}
#viewTaxReport .taxExportHistoryRow:last-child{
border-bottom: 0;
}
#viewTaxReport .taxExportHistoryMain{
min-width: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
color: #566171;
font-size: 12px;
font-weight: 620;
line-height: 1.3;
}
#viewTaxReport .taxExportHistoryDate{
color: var(--_tax-export-history-text);
font-weight: 740;
}
#viewTaxReport .taxExportHistoryDot{
width: 4px;
height: 4px;
border-radius: 50%;
background: #C5CCD5;
flex: 0 0 auto;
}
#viewTaxReport .taxExportHistorySide{
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 7px;
}
#viewTaxReport .taxExportHistoryType,
#viewTaxReport .taxExportHistoryStatus{
min-height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 9px;
border: 1px solid var(--_tax-export-history-pill-border);
border-radius: 999px;
background: var(--_tax-export-history-soft-bg);
color: var(--_tax-export-history-pill-text);
font-size: 11px;
font-weight: 720;
line-height: 1;
white-space: nowrap;
}
#viewTaxReport .taxExportHistoryStatus.is-saved{
border-color: var(--_tax-export-history-good-border);
background: var(--_tax-export-history-good-bg);
color: var(--_tax-export-history-good-text);
}
#viewTaxReport .taxExportHistoryStatus.is-muted{
border-color: var(--_tax-export-history-pill-border);
background: var(--_tax-export-history-soft-bg);
color: var(--_tax-export-history-pill-text);
}
@media (max-width: 1080px){
#viewTaxReport .taxReportFiltersRail{
grid-template-columns: minmax(0, 1fr);
gap: 9px;
}
#viewTaxReport .taxReportFiltersPeriod{
overflow: visible;
}
#viewTaxReport .taxReportFiltersReview{
justify-self: start;
}
#viewTaxReport .taxReportFiltersDatePicker .txDateTimePopover{
width: min(calc(100vw - 32px), var(--_tax-report-filters-popover-width));
}
#viewTaxReport .taxReportTopHeader{
flex-wrap: wrap;
}
#viewTaxReport .taxReportTopHeaderControls{
width: 100%;
justify-content: flex-end;
}
#viewTaxReport .taxReportTopHero{
grid-template-columns: minmax(0, 1fr);
}
#viewTaxReport .taxReportTopHeroMain{
padding-bottom: 17px;
}
#viewTaxReport .taxReportTopHeroSide{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 0 8px 8px;
}
#viewTaxReport .taxReportTopKpis{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px){
#viewTaxReport .taxReportFiltersPeriod{
flex-direction: column;
align-items: stretch;
gap: 8px;
}
#viewTaxReport .taxReportFiltersReview{
justify-self: stretch;
flex-direction: column;
align-items: stretch;
gap: 8px;
}
#viewTaxReport .taxReportFiltersRange{
width: 100%;
}
#viewTaxReport .taxReportFiltersDatePicker{
flex: 1 1 0;
width: auto;
min-width: 0;
}
#viewTaxReport .taxReportPeriodPresets{
flex-wrap: wrap;
}
#viewTaxReport #taxPreviewModePicker,
#viewTaxReport #taxPreviewModePickerInput{
width: 100%;
min-width: 0;
}
#viewTaxReport #taxReportSourceFilterPicker,
#viewTaxReport #taxReportSourceFilterPickerInput{
width: 100%;
min-width: 0;
}
#viewTaxReport .taxReportTopHeader{
align-items: flex-start;
}
#viewTaxReport .taxReportTopHeaderTitle{
font-size: 20px;
}
#viewTaxReport .taxReportTopHeaderControls{
justify-content: flex-start;
}
#viewTaxReport .taxReportTopCurrency{
width: 100%;
justify-content: space-between;
}
#viewTaxReport .taxReportTopHero{
min-height: 0;
}
#viewTaxReport .taxReportTopHeroMain{
padding: 19px 17px 15px;
gap: 14px;
}
#viewTaxReport .taxReportTopHeroTitle{
font-size: 29px;
}
#viewTaxReport .taxReportTopHeroBody{
font-size: 13px;
}
#viewTaxReport .taxReportTopHeroExclusionLabel{
font-size: 12px;
}
#viewTaxReport .taxReportTopHeroExclusion .taxPreviewReasonBadge,
#viewTaxReport .taxReportTopHeroExclusion .taxProofChip.oversold,
#viewTaxReport .taxReportTopHeroExclusion .taxProofChip.taxPreviewPendingChip{
font-size: 10px;
}
#viewTaxReport .taxReportTopHeroSide{
grid-template-columns: minmax(0, 1fr);
padding: 0 8px 8px;
}
#viewTaxReport .taxReportTopKpis{
grid-template-columns: minmax(0, 1fr);
}
#viewTaxReport .taxExportHistory{
grid-template-columns: minmax(0, 1fr);
}
#viewTaxReport .taxExportHistoryHead{
border-right: 0;
border-bottom: 1px solid var(--_tax-export-history-border);
}
#viewTaxReport .taxExportHistoryRow{
align-items: flex-start;
flex-direction: column;
}
#viewTaxReport .taxExportHistorySummary{
align-items: flex-start;
flex-direction: column;
}
#viewTaxReport .taxReportTopKpiCard{
min-height: 0;
padding: 18px 20px;
}
#viewTaxReport .taxReportTopHeroCardValue{
font-size: 24px;
}
#viewTaxReport .taxReportTopKpiValue{
font-size: 21px;
}
#viewTaxReport .taxReportTopKpiHead{
gap: 10px;
}
#viewTaxReport .taxReportTopKpiIcon{
width: 22px;
height: 22px;
}
}
@media (max-width: 560px){
#viewTaxReport .taxReportFiltersRange{
padding-right: 14px;
}
#viewTaxReport .taxReportFiltersDatePicker{
width: auto;
}
#viewTaxReport .taxReportFiltersRange::after{
display: none;
}
#viewTaxReport .taxReportPeriodPresets{
gap: 6px;
}
}
.taxBasisBadge{
display:inline-flex;
align-items:center;
justify-content:center;
min-width: 74px;
max-width: 128px;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid var(--border);
font-size: 11px;
font-weight: 800;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.taxBasisBadge.ok{
color: #0b5f2a;
border-color: rgba(11,95,42,.40);
background: rgba(46,204,113,.14);
}
.taxBasisBadge.problem{
color: #8a5a00;
border-color: rgba(255,176,32,.46);
background: rgba(255,176,32,.18);
}
.taxBasisEmpty{
cursor: default;
user-select: text;
pointer-events: none;
}
td.right, th.right{ text-align:right; }
td.right.mono{ white-space: nowrap; }
#tblTx td, #tblPlaces td, #tblTaxReport td, #tblAssetPlaces td{
font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text", Inter, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
font-size: 12px;
font-weight: 400;
letter-spacing: .1px;
color: #000;
}
#txDateFrom, #txDateTo, #txSideFilter, #txAssetFilter, #txPlaceFilter, #btnResetTxFilters,
#taxReportDateFrom, #taxReportDateTo, #taxReportSourceFilter, #btnResetTaxReportFilters{
font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text", Inter, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
font-size: 12px;
font-weight: 400;
letter-spacing: .1px;
color: #000;
}
#tblTx th, #tblPlaces th, #tblTaxReport th{ color: #000; }
#tblTx .mono, #tblPlaces .mono, #tblTaxReport .mono, #tblAssetPlaces .mono{
font-family: inherit;
font-variant-numeric: tabular-nums;
}
#tblTx td:nth-child(3),
#tblTx td:nth-child(3) .assetLink{
font-weight: 700;
color: #000;
}
#tblTx td:nth-child(6){
font-weight: 700;
}
#tblTx td.right .small, #tblPlaces td.right .small{
white-space: nowrap;
}
#tblPlaces td:nth-child(1){ font-weight: 700; color: #000; }
#tblPlaces td:nth-child(2){ font-weight: 700; }
#tblPlaces td:nth-child(3){ white-space: nowrap; }
#tblPlaces td:nth-child(4){ white-space: nowrap; }
.placeTypeBadge{
display: inline-flex;
align-items: center;
margin-left: 8px;
padding: 2px 7px;
border-radius: 999px;
border: 1px solid var(--border);
font-size: 11px;
font-weight: 700;
line-height: 1;
vertical-align: middle;
color: var(--muted);
background: rgba(255,255,255,.03);
}
.placeTypeBadge.exchange{
color: #2558c9;
border-color: rgba(60,123,255,.35);
background: rgba(60,123,255,.13);
}
.placeTypeBadge.wallet{
color: #0b5f2a;
border-color: rgba(11,95,42,.40);
background: rgba(46,204,113,.14);
}
.placeTypeBadge.unknown{
color: var(--muted2);
border-color: color-mix(in srgb, var(--border) 95%, transparent);
background: rgba(255,255,255,.02);
}
tr:hover td{ background: rgba(255,255,255,.03); }
.tag{
display:inline-flex;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid var(--border);
background: rgba(255,255,255,.03);
font-size: 12px;
color: var(--muted);
gap: 6px;
align-items:center;
}
.tag-buy{background:rgba(46,204,113,.14);border-color:rgba(46,204,113,.35);color:#1d7a45;}
.tag-sell{background:rgba(255,71,87,.14);border-color:rgba(255,71,87,.35);color:#b02835;}
.tag-transfer{background:rgba(60,123,255,.14);border-color:rgba(60,123,255,.35);color:#2558c9;}
.tag-warn{background:rgba(255,176,32,.16);border-color:rgba(255,176,32,.45);color:#8a5a00;}
#tblPlaces td:first-child .tag{
margin-left: 6px;
}
#tblTx th:nth-child(1), #tblTx td:nth-child(1){ width: 160px; }
#tblTx th:nth-child(2), #tblTx td:nth-child(2){ width: 96px; }
#tblTx th:nth-child(4), #tblTx td:nth-child(4){ width: 90px; }
#tblTx th:nth-child(5), #tblTx td:nth-child(5){ width: 100px; }
#tblTx th:nth-child(6), #tblTx td:nth-child(6){ width: 120px; }
#tblTx th:nth-child(7), #tblTx td:nth-child(7){ width: 146px; }
#tblTx th:nth-child(8), #tblTx td:nth-child(8){ width: 92px; }
#tblTx th:nth-child(1),
#tblTx td:nth-child(1){
white-space: nowrap;
}
#tblTx td:nth-child(3){
white-space: normal;
overflow: visible;
padding-right: 6px;
}
#tblTx td:nth-child(3) .assetLink{
display: inline-block;
max-width: 92px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
}
#tblTx td:nth-child(3) .tag{
max-width: 200px;
padding: 2px 5px;
margin-left: 6px !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
#tblTx td:nth-child(3) .txPlaceTag[data-open-place]{ cursor: pointer; }
#tblTx td:nth-child(3) .txAssetPlaceInline-transfer{
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
width: 100%;
flex-wrap: nowrap;
}
#tblTx td:nth-child(3) .txAssetPlaceInline-transfer .assetLink,
#tblTx td:nth-child(3) .txAssetPlaceInline-transfer .txAssetQuickBtn{
flex: 0 0 auto;
}
#tblTx td:nth-child(3) .txTransferRouteChip{
display: block;
flex: 1 1 auto;
min-width: 0;
max-width: none;
white-space: normal;
overflow: hidden;
text-overflow: clip;
overflow-wrap: anywhere;
word-break: break-word;
line-height: 1.28;
max-height: calc(1.28em * 2 + 6px);
padding-top: 4px;
padding-bottom: 4px;
vertical-align: middle;
margin-left: 0 !important;
}
#tblTx td:nth-child(3) .txAssetQuickBtn{
width: 22px;
height: 22px;
padding: 0 !important;
border-radius: 999px;
margin-left: 6px !important;
opacity: .86;
font-size: 12px;
line-height: 1;
}
#tblTx td:nth-child(4),
#tblTx td:nth-child(7),
#tblTx td:nth-child(8){
white-space: nowrap;
}
#tblTx td:nth-child(8){
white-space: nowrap;
text-align: right;
}
#tblTx td:nth-child(8).txActionsCell{
display:flex;
align-items:center;
justify-content:flex-end;
gap:6px;
}
#tblTx td:nth-child(8) .txIconBtn{
width: 28px;
height: 28px;
min-width: 28px;
padding: 0 !important;
border-radius: 999px;
display:inline-flex;
align-items:center;
justify-content:center;
font-size: 13px;
line-height: 1;
opacity: .9;
}
.txTaxCol{
width: 136px;
min-width: 136px;
white-space: nowrap;
}
.taxTxBadge{
display:inline-flex;
align-items:center;
justify-content:center;
width: 100%;
max-width: 122px;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid var(--border);
background: rgba(255,255,255,.04);
color: var(--muted);
font-size: 11px;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.taxTxBadge.pending{
color: #2558c9;
border-color: rgba(60,123,255,.35);
background: rgba(60,123,255,.14);
}
.taxTxBadge.approved{
color: #0b5f2a;
border-color: rgba(11,95,42,.40);
background: rgba(46,204,113,.16);
}
.taxTxBadge.rejected{
color: #b02835;
border-color: rgba(255,71,87,.35);
background: rgba(255,71,87,.14);
}
.toast{
position: fixed;
right: 14px;
bottom: 14px;
z-index: 50;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid var(--border);
background: rgba(246,247,251,.85);
color: rgba(10,12,16,.90);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 18px 55px rgba(0,0,0,.40);
font-size: 13px;
max-width: 360px;
display:none;
}
.assetPicker{
position: relative;
width: 100%;
}
.assetPicker::after{
content: "";
position: absolute;
top: 50%;
right: 14px;
width: 6px;
height: 6px;
border-right: 1.5px solid var(--text);
border-bottom: 1.5px solid var(--text);
transform: translateY(-58%) rotate(45deg);
pointer-events: none;
transition: transform .15s ease, border-color .15s ease, opacity .15s ease;
opacity: .88;
}
.assetPicker.is-search-mode::after{
opacity: 0;
}
.assetPicker:hover::after,
.assetPicker:focus-within::after,
.assetPicker.is-open::after{
border-color: var(--text);
}
.assetPicker.is-open::after{
transform: translateY(-36%) rotate(225deg);
}
.assetPickerInput{
width: 100%;
padding-right: 38px;
background: rgba(255,255,255,.04);
color: var(--text);
box-shadow: none;
}
.assetPickerInput[readonly]{
cursor: pointer;
color: var(--text);
background: rgba(255,255,255,.04);
caret-color: transparent;
}
.assetPickerInput[readonly]:focus,
.assetPickerInput[readonly]:focus-visible{
border-color: color-mix(in srgb, var(--border) 88%, rgba(83,110,150,.18));
box-shadow: none;
}
.assetPicker:not(.is-search-mode) .assetPickerInput::placeholder{
color: var(--text);
opacity: 1;
}
.assetPicker.is-search-mode .assetPickerInput::placeholder{
color: var(--muted);
opacity: 1;
}
.assetPicker:hover .assetPickerInput,
.assetPicker:focus-within .assetPickerInput,
.assetPicker.is-open .assetPickerInput{
background: color-mix(in srgb, rgba(255,255,255,.055) 96%, transparent);
border-color: color-mix(in srgb, var(--border) 92%, rgba(83,110,150,.16));
box-shadow: none;
}
.assetPicker:focus-within .assetPickerInput,
.assetPicker.is-open .assetPickerInput{
border-color: color-mix(in srgb, var(--border) 84%, rgba(83,110,150,.24));
box-shadow: 0 0 0 1px rgba(83,110,150,.10);
}
.assetPicker > #tAssetPreset{
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
inset: 0;
}
.assetPickerDropdown{
position: fixed;
top: 0;
left: 0;
right: auto;
z-index: 72;
display: flex;
flex-direction: column;
padding: 8px;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--surface);
box-shadow: var(--ct-shadow-popover);
overflow: hidden;
}
.assetPickerSearchControls{
display: none;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.assetPickerDropdown.is-search-mode .assetPickerSearchControls{
display: flex;
}
.assetPickerDropdown #coinResults{
width: 100%;
height: auto;
min-height: 0;
max-height: 272px;
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow-y: auto;
padding: 6px 8px;
border-radius: 12px;
background: color-mix(in srgb, var(--surface2) 92%, transparent);
border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
box-shadow: none;
color: var(--text);
font-size: 13px;
line-height: 1.35;
font-family: inherit;
}
.assetPickerDropdown #coinResults:focus{
outline: none;
box-shadow: var(--focus);
}
.assetPickerDropdown #coinResults option{
padding: 8px 10px;
white-space: normal;
cursor: pointer;
color: var(--text);
font-weight: 500;
background: color-mix(in srgb, var(--surface) 94%, transparent);
font-family: inherit;
}
.assetPickerDropdown #coinResults option:checked{
color: var(--text);
background: color-mix(in srgb, var(--surface) 94%, transparent);
box-shadow: none;
}
.assetPickerDropdown #coinResults option:hover,
.assetPickerDropdown #coinResults option:focus{
color: var(--text);
background: color-mix(in srgb, rgba(120,160,255,.34) 100%, var(--surface));
}
.assetPickerDropdown #coinResults option:hover:checked,
.assetPickerDropdown #coinResults option:focus:checked{
background: color-mix(in srgb, rgba(120,160,255,.42) 100%, var(--surface));
}
.assetPickerDropdown:not(.is-search-mode) #coinResults{
font-variant-numeric: tabular-nums;
}
.assetPickerDropdown:not(.is-search-mode) #coinResults optgroup{
font-style: normal;
font-weight: 600;
color: var(--text);
font-family: inherit;
}
.assetPickerDropdown:not(.is-search-mode) #coinResults option{
white-space: pre;
font-family: inherit;
}
.assetPickerDropdown.is-search-mode #coinResults option{
font-family: inherit;
white-space: normal;
font-weight: 500;
}
.assetPickerPopularActions{
display: flex;
flex: 0 0 auto;
margin-top: 8px;
}
.assetPickerDropdown.is-search-mode .assetPickerPopularActions{
display: none;
}
.assetPickerPrimaryBtn,
.assetPickerSecondaryBtn,
.assetPickerLinkBtn{
appearance: none;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--surface2) 94%, transparent);
color: var(--text);
border-radius: 10px;
font: inherit;
line-height: 1.2;
cursor: pointer;
}
.assetPickerPrimaryBtn{
padding: 8px 12px;
font-weight: 700;
}
.assetPickerSecondaryBtn{
width: 100%;
justify-content: center;
padding: 8px 12px;
text-align: center;
font-weight: 600;
}
.assetPickerLinkBtn{
padding: 7px 10px;
background: transparent;
color: var(--muted);
border-color: transparent;
text-decoration: underline;
text-underline-offset: 2px;
}
.assetPickerDropdown .resultNote{
margin-top: 8px;
margin-bottom: 0;
}
.typePicker > #tSide,
.txDropdown > .txDropdownNative{
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
inset: 0;
}
.typePickerDropdown{
position: fixed;
top: 0;
left: 0;
right: auto;
z-index: 84;
min-width: 0;
padding: 8px;
gap: 4px;
}
.typePickerOption{
display: block;
width: 100%;
text-align: left;
padding: 8px 10px;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--text);
font: inherit;
font-size: 13px;
font-weight: 500;
line-height: 1.25;
cursor: pointer;
}
.typePickerOption:hover,
.typePickerOption:focus-visible{
outline: none;
background: color-mix(in srgb, rgba(120,160,255,.28) 100%, var(--surface));
color: #2A4B73;
}
.customWrap{ display:none; margin-top:10px; }
.customWrap.show{ display:block; }
.customGrid{
display:grid;
grid-template-columns: 1.2fr .8fr;
gap: 10px;
margin-top: 8px;
}
@media (max-width: 980px){ .customGrid{ grid-template-columns: 1fr; } }
.inlineRow{ display:flex; gap:8px; align-items:center; flex-wrap: wrap; }
.btnMini{
min-height: var(--ct-h-secondary);
padding: 0 12px;
border-radius: 14px;
font-size: 13px;
font-weight: 700;
opacity: 1;
min-width: unset !important;
}
.ghost{
background: color-mix(in srgb, var(--surface2) 86%, transparent);
border-color: color-mix(in srgb, var(--border) 96%, transparent);
color: var(--text);
box-shadow: none;
}
.ghost:hover{
background: color-mix(in srgb, var(--btnHover) 80%, transparent);
border-color: color-mix(in srgb, var(--border) 120%, transparent);
}
.adv{
display:none;
margin-top:10px;
padding: 10px;
border-radius: 14px;
border: 1px dashed rgba(10,12,16,.18);
background: rgba(255,255,255,.03);
}
.adv.show{ display:block; }
.resultNote{
margin-top: 8px;
font-size: 12px;
color: var(--muted2);
}
.modalOverlay{
--_modal-overlay-bg: var(--ct-modal-backdrop-bg);
--_modal-overlay-filter: var(--ct-modal-backdrop-filter, none);
position: fixed;
inset: 0;
z-index: 60;
display: flex;
align-items: center;
justify-content: center;
padding: 18px 14px;
background: var(--_modal-overlay-bg);
backdrop-filter: var(--_modal-overlay-filter);
-webkit-backdrop-filter: var(--_modal-overlay-filter);
}
.modalOverlay.hidden{ display:none; }
#createPlaceModal{
z-index: 72;
--_create-place-modal-width: 620px;
--_create-place-modal-height: auto;
--_create-place-modal-left-width: 100%;
--_create-place-modal-body-gap: 0;
--_create-place-modal-section-gap: 18px;
--_create-place-modal-pad-top: 32px;
--_create-place-modal-pad-x: 46.08px;
--_create-place-modal-pad-bottom: 24px;
--_create-place-modal-radius: 31.68px;
--_create-place-modal-surface: linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%);
--_create-place-modal-card: #FFFFFF;
--_create-place-modal-text: #111827;
--_create-place-modal-muted: #6B7280;
--_create-place-modal-soft: #F4F6F8;
--_create-place-modal-soft-2: #F6F8FB;
--_create-place-modal-line: #E7ECF1;
--_create-place-modal-line-strong: #E9EDF3;
--_create-place-modal-primary: #172033;
--_create-place-modal-primary-hover: #1F2937;
--_create-place-modal-danger: #E5484D;
--_create-place-modal-shadow: 0 27.36px 56.16px rgba(7, 17, 31, .33);
--_create-place-modal-head-height: 68px;
--_create-place-modal-body-height: auto;
--_create-place-modal-footer-height: 42px;
--_create-place-modal-step-marker: 31.68px;
--_create-place-modal-row-gap: 15.84px;
--_create-place-modal-row-copy: 180px;
--_create-place-modal-address-copy: 406.8px;
--_create-place-modal-flow-gap: 14.4px;
--_create-place-modal-control-width: 87.12px;
--_create-place-modal-control-height: 36px;
--_create-place-modal-close: 38.88px;
--_create-place-modal-submit-width: 141.12px;
--_create-place-modal-submit-height: 41.76px;
--_create-place-modal-link-text: #4B5563;
--_create-place-modal-link-text-hover: #111827;
--_create-place-modal-link-size: 12px;
--_create-place-modal-link-weight: 650;
--_create-place-modal-link-icon-size: 30px;
--_create-place-modal-link-icon-bg: #F1F2EF;
--_create-place-modal-link-icon-text: #7B8490;
--_create-place-modal-link-icon-text-hover: #4B5563;
--_create-place-modal-link-gap: 12px;
--_create-place-modal-link-plus-size: 15px;
align-items: flex-start;
overflow-y: auto;
overscroll-behavior: contain;
padding: calc(var(--stickyTop, 0px) + 28.8px) 16.2px 28.8px;
background: var(--_modal-overlay-bg);
backdrop-filter: var(--_modal-overlay-filter);
-webkit-backdrop-filter: var(--_modal-overlay-filter);
}
#createPlaceModal .createPlaceModalCard{
position: relative;
display: flex;
flex-direction: column;
gap: var(--_create-place-modal-section-gap);
width: min(var(--_create-place-modal-width), 100%);
height: var(--_create-place-modal-height);
max-height: calc(100dvh - (var(--stickyTop, 0px) + 57.6px));
padding:
var(--_create-place-modal-pad-top)
var(--_create-place-modal-pad-x)
var(--_create-place-modal-pad-bottom);
border: 0;
border-radius: var(--_create-place-modal-radius);
background: var(--_create-place-modal-surface);
box-shadow: var(--_create-place-modal-shadow);
color: var(--_create-place-modal-text);
overflow: hidden;
font-family: var(--font, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
#createPlaceModal .createPlaceModalCard,
#createPlaceModal .createPlaceModalCard *{
box-sizing: border-box;
}
#createPlaceModal .createPlaceModalHead{
position: relative;
display: flex;
align-items: start;
justify-content: space-between;
gap: 11.52px;
width: 100%;
min-height: var(--_create-place-modal-head-height);
height: var(--_create-place-modal-head-height);
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
#createPlaceModal .createPlaceModalIntro{
width: 561.6px;
min-width: 0;
}
#createPlaceModal .createPlaceModalTitle{
margin: 0;
color: #18202D;
font-size: 37.44px;
font-weight: 800;
line-height: 1.18;
letter-spacing: 0;
}
#createPlaceModal .createPlaceModalClose{
display: inline-grid;
place-items: center;
width: var(--_create-place-modal-close);
height: var(--_create-place-modal-close);
min-width: 0;
min-height: 0;
padding: 0;
border: 0.72px solid #E0E5EB;
border-radius: 19.44px;
background: #F2F4F6;
color: #687382;
box-shadow: none;
}
#createPlaceModal .createPlaceModalClose:hover,
#createPlaceModal .createPlaceModalClose:focus-visible{
background: #E8EDF3;
color: var(--_create-place-modal-text);
outline: none;
}
#createPlaceModal .createPlaceModalCloseIcon{
display: block;
font-size: 23.04px;
font-weight: 400;
line-height: 1;
transform: translateY(-0.72px);
}
#createPlaceModal .createPlaceModalBody{
display: flex;
flex-direction: column;
gap: var(--_create-place-modal-section-gap);
padding: 0;
}
#createPlaceModal .createPlaceModalMain{
display: block;
width: 100%;
min-height: var(--_create-place-modal-body-height);
height: var(--_create-place-modal-body-height);
}
#createPlaceModal .createPlaceModalSteps{
display: flex;
flex-direction: column;
gap: var(--_create-place-modal-flow-gap);
width: 100%;
max-width: var(--_create-place-modal-left-width);
height: var(--_create-place-modal-body-height);
min-width: 0;
}
#createPlaceModal .createPlaceModalStep{
display: grid;
grid-template-columns: var(--_create-place-modal-step-marker) var(--_create-place-modal-row-copy) var(--_create-place-modal-control-width);
align-items: center;
column-gap: var(--_create-place-modal-row-gap);
width: 100%;
height: 54.72px;
min-height: 54.72px;
}
#createPlaceModal .createPlaceModalField:first-child{
grid-template-columns: var(--_create-place-modal-step-marker) var(--_create-place-modal-address-copy);
height: 61.92px;
min-height: 61.92px;
}
#createPlaceModal .createPlaceModalStepMarker{
display: inline-grid;
place-items: center;
width: var(--_create-place-modal-step-marker);
height: var(--_create-place-modal-step-marker);
border-radius: 899.1px;
background: #E8EDF3;
color: #687382;
font-size: 11.52px;
font-weight: 760;
line-height: 1;
letter-spacing: 0;
}
#createPlaceModal .createPlaceModalStepMarker.is-active{
background: #172033;
color: #FFFFFF;
}
#createPlaceModal .createPlaceModalStepCopy{
width: 100%;
min-width: 0;
}
#createPlaceModal .createPlaceModalStepLabel{
display: block;
margin: 0 0 5.04px;
color: #8A94A2;
font-size: 10.08px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0.216px;
}
#createPlaceModal .createPlaceModalStepValue,
#createPlaceModal .createPlaceModalValueInput{
width: 100%;
min-width: 0;
color: #18202D;
font-size: 16.56px;
font-weight: 800;
line-height: 1.24;
letter-spacing: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#createPlaceModal .createPlaceModalValueInput{
height: 24.48px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
outline: none;
color: #18202D;
font-size: 18.16px;
font-weight: 720;
}
#createPlaceModal .createPlaceModalValueInput::placeholder{
color: #C0C6CE;
font-size: 17.25px;
font-weight: 585;
opacity: 1;
}
#createPlaceModal .createPlaceModalValueInput.fieldInvalid{
color: var(--_create-place-modal-danger);
box-shadow: inset 0 -0.9px 0 var(--_create-place-modal-danger);
}
#createPlaceModal .createPlaceModalDivider{
width: calc(100% - var(--_create-place-modal-submit-width) - 12px);
height: 0.72px;
margin: 0;
background: var(--_create-place-modal-line);
}
#createPlaceModal .createPlaceModalProviderField{
display: block;
}
#createPlaceModal .createPlaceModalProviderField[style*="display:none"],
#createPlaceModal .createPlaceModalProviderField[style*="display: none"]{
display: none;
}
#createPlaceModal .createPlaceModalProviderField .createPlaceModalDivider{
margin-bottom: var(--_create-place-modal-flow-gap);
}
#createPlaceModal .createPlaceModalDropdown{
position: relative;
width: var(--_create-place-modal-control-width);
min-width: var(--_create-place-modal-control-width);
height: var(--_create-place-modal-control-height);
}
#createPlaceModal .createPlaceModalTrigger{
width: 100%;
height: var(--_create-place-modal-control-height);
min-height: 0;
padding: 0 25.2px 0 12.96px;
border: 0;
border-radius: 15.84px;
background: #F4F6F8;
color: #596576;
box-shadow: none;
caret-color: transparent;
cursor: pointer;
font-family: inherit;
font-size: 10.8px;
font-weight: 800;
line-height: 1;
letter-spacing: 0;
text-align: left;
text-overflow: ellipsis;
}
#createPlaceModal .createPlaceModalTrigger::placeholder{
color: #596576;
opacity: 1;
}
#createPlaceModal .createPlaceModalDropdown::after{
content: "⌄";
position: absolute;
top: 50%;
right: 12.96px;
width: auto;
height: auto;
border: 0;
color: #737E8D;
font-size: 14.4px;
font-weight: 700;
line-height: 1;
pointer-events: none;
transform: translateY(-50%);
}
#createPlaceModal :is(#createPlaceKind, #createPlaceProvider).fieldInvalid + .createPlaceModalTrigger{
background: #FFF5F5;
box-shadow: inset 0 0 0 0.72px rgba(229, 72, 77, .72);
color: var(--_create-place-modal-danger);
}
#createPlaceModal :is(#createPlaceKindPickerDropdown, #createPlaceProviderPickerDropdown){
position: fixed;
top: 0;
left: 0;
right: auto;
z-index: 84;
min-width: 129.6px;
max-width: min(234px, calc(100vw - 30.6px));
padding: 4.32px;
border: 0.72px solid var(--_create-place-modal-line-strong);
border-radius: 10.08px;
background: var(--_create-place-modal-card);
box-shadow: 0 10.08px 23.04px rgba(15, 23, 42, .14);
}
#createPlaceModal :is(#createPlaceKindPickerDropdown, #createPlaceProviderPickerDropdown) .txDropdownOption{
appearance: none;
display: block;
width: 100%;
min-height: 0;
padding: 6.48px 7.2px;
border: 0;
border-radius: 7.2px;
background: transparent;
color: var(--_create-place-modal-text);
font: inherit;
font-size: 9.36px;
font-weight: 600;
line-height: 1.25;
letter-spacing: 0;
text-align: left;
cursor: pointer;
}
#createPlaceModal :is(#createPlaceKindPickerDropdown, #createPlaceProviderPickerDropdown) .txDropdownOption.is-selected,
#createPlaceModal :is(#createPlaceKindPickerDropdown, #createPlaceProviderPickerDropdown) .txDropdownOption:hover,
#createPlaceModal :is(#createPlaceKindPickerDropdown, #createPlaceProviderPickerDropdown) .txDropdownOption:focus-visible{
background: var(--_create-place-modal-soft-2);
color: var(--_create-place-modal-primary);
outline: none;
}
#createPlaceModal .createPlaceModalHint{
min-height: 16.2px;
margin: 0;
color: var(--_create-place-modal-muted);
font-size: 9.9px;
line-height: 1.35;
letter-spacing: 0;
}
#createPlaceModal .createPlaceModalHint:empty{
display: none;
}
#createPlaceModal .createPlaceModalActions{
display: flex;
align-items: center;
justify-content: space-between;
min-height: var(--_create-place-modal-footer-height);
height: var(--_create-place-modal-footer-height);
margin: 0;
border-top: 0;
}
#createPlaceModal .createPlaceModalActionGroup{
display: inline-flex;
align-items: center;
gap: 12px;
margin-left: auto;
}
#createPlaceModal .createPlaceModalPrimaryBtn{
width: var(--_create-place-modal-submit-width);
height: var(--_create-place-modal-submit-height);
min-width: 0;
min-height: 0;
padding: 0;
border: 0;
border-radius: 15.84px;
background: #172033;
color: #FFFFFF;
font-family: inherit;
font-size: 11.52px;
font-weight: 800;
line-height: 1;
letter-spacing: 0;
box-shadow: 0 11.52px 20.16px rgba(23, 32, 51, .13);
}
#createPlaceModal .createPlaceModalPrimaryBtn:hover,
#createPlaceModal .createPlaceModalPrimaryBtn:focus-visible{
background: var(--_create-place-modal-primary-hover);
outline: none;
}
@media (max-width: 1008px){
#createPlaceModal{
--_create-place-modal-width: min(620px, calc(100vw - 25.2px));
}
#createPlaceModal .createPlaceModalCard{
height: auto;
overflow: auto;
}
#createPlaceModal .createPlaceModalMain{
flex-direction: column;
height: auto;
gap: 25.2px;
}
#createPlaceModal .createPlaceModalSteps{
max-width: 100%;
height: auto;
}
}
@media (max-width: 558px){
#createPlaceModal{
padding: calc(var(--stickyTop, 0px) + 10.8px) 10.8px 10.8px;
--_create-place-modal-close: 36px;
--_create-place-modal-control-width: 79.2px;
--_create-place-modal-body-gap: 21.6px;
}
#createPlaceModal .createPlaceModalCard{
height: auto;
max-height: calc(100dvh - (var(--stickyTop, 0px) + 21.6px));
border-radius: 19.8px;
overflow: auto;
}
#createPlaceModal .createPlaceModalHead{
min-height: auto;
padding-top: 21.6px;
}
#createPlaceModal .createPlaceModalTitle{
font-size: 20.7px;
}
#createPlaceModal .createPlaceModalBody{
padding-top: 19.8px;
}
#createPlaceModal .createPlaceModalStep,
#createPlaceModal .createPlaceModalField:first-child{
grid-template-columns: var(--_create-place-modal-step-marker) minmax(0, 1fr);
row-gap: 10.8px;
height: auto;
}
#createPlaceModal .createPlaceModalStepControl{
grid-column: 2;
}
#createPlaceModal .createPlaceModalDropdown{
width: min(171px, 100%);
}
#createPlaceModal .createPlaceModalDivider{
width: 100%;
}
#createPlaceModal .createPlaceModalActions{
align-items: stretch;
flex-direction: column;
justify-content: flex-start;
gap: 10.8px;
height: auto;
}
#createPlaceModal .createPlaceModalCtaRow{
justify-content: center;
}
#createPlaceModal .createPlaceModalActionGroup{
width: 100%;
}
#createPlaceModal .createPlaceModalPrimaryBtn{
flex: 1 1 0;
}
}
#compactPromptModal{
z-index: 72;
--_compact-input-modal-width: 432px;
--_compact-input-modal-radius: 16px;
--_compact-input-modal-surface: #FFFFFF;
--_compact-input-modal-border: #E4E9F1;
--_compact-input-modal-shadow: 0 22px 64px rgba(15, 23, 42, .12);
--_compact-input-modal-header-bg: linear-gradient(180deg, #FBFCFE 0%, #F6F8FC 100%);
--_compact-input-modal-body-bg: linear-gradient(180deg, #FFFFFF 0%, #FCFDFE 100%);
--_compact-input-modal-footer-bg: linear-gradient(180deg, rgba(250, 251, 253, .18) 0%, #F9FAFC 100%);
--_compact-input-modal-header-pad-y: 16px;
--_compact-input-modal-header-pad-x: 22px;
--_compact-input-modal-body-pad: 22px;
--_compact-input-modal-field-gap: 4px;
--_compact-input-modal-title-size: 15px;
--_compact-input-modal-title-weight: 700;
--_compact-input-modal-label-size: 10px;
--_compact-input-modal-label-weight: 500;
--_compact-input-modal-label-color: #6B7280;
--_compact-input-modal-control-height: 32px;
--_compact-input-modal-control-pad-x: 11px;
--_compact-input-modal-control-radius: 8px;
--_compact-input-modal-control-border: #E3E8F0;
--_compact-input-modal-control-bg: #FFFFFF;
--_compact-input-modal-control-text: #111827;
--_compact-input-modal-control-placeholder: #9CA3AF;
--_compact-input-modal-control-font-size: 11px;
--_compact-input-modal-control-focus-border: #63AAF2;
--_compact-input-modal-control-focus-shadow: 0 0 0 2px rgba(99, 170, 242, .14);
--_compact-input-modal-divider: #F3F4F6;
--_compact-input-modal-close-size: 28px;
--_compact-input-modal-close-radius: 8px;
--_compact-input-modal-close-bg: #F3F4F6;
--_compact-input-modal-close-bg-hover: #E9EDF3;
--_compact-input-modal-close-color: #6B7280;
--_compact-input-modal-close-icon-size: 12px;
--_compact-input-modal-btn-height: 32px;
--_compact-input-modal-btn-radius: 8px;
--_compact-input-modal-btn-font-size: 11px;
--_compact-input-modal-btn-font-weight: 600;
--_compact-input-modal-btn-secondary-bg: #F3F4F6;
--_compact-input-modal-btn-secondary-border: #E5E7EB;
--_compact-input-modal-btn-secondary-text: #374151;
--_compact-input-modal-btn-primary-bg: #111827;
--_compact-input-modal-btn-primary-bg-hover: #1F2937;
--_compact-input-modal-btn-primary-text: #FFFFFF;
--_compact-input-modal-btn-secondary-pad-x: 16px;
--_compact-input-modal-btn-primary-pad-x: 19px;
--_compact-input-modal-footer-pad-top: 10px;
--_compact-input-modal-footer-pad-bottom: 15px;
}
#compactPromptModal .compactPromptModalCard{
position: relative;
width: min(var(--_compact-input-modal-width), 100%);
border-radius: var(--_compact-input-modal-radius);
border: 1px solid var(--_compact-input-modal-border);
background: var(--_compact-input-modal-surface);
box-shadow: var(--_compact-input-modal-shadow);
overflow: hidden;
}
#compactPromptModal .compactPromptModalCard::before{
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, rgba(99, 170, 242, 0) 0%, rgba(99, 170, 242, .38) 52%, rgba(99, 170, 242, 0) 100%);
pointer-events: none;
}
#compactPromptModal .compactPromptModalHead{
position: static;
gap: 12px;
padding: var(--_compact-input-modal-header-pad-y) var(--_compact-input-modal-header-pad-x);
border-bottom: 1px solid var(--_compact-input-modal-border);
background: var(--_compact-input-modal-header-bg);
box-shadow: inset 0 -1px 0 rgba(255,255,255,.72);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
#compactPromptModal .compactPromptModalTitle{
color: #111827;
font-size: var(--_compact-input-modal-title-size);
font-weight: var(--_compact-input-modal-title-weight);
line-height: 1.2;
}
#compactPromptModal .compactPromptModalClose{
width: var(--_compact-input-modal-close-size);
min-width: var(--_compact-input-modal-close-size);
height: var(--_compact-input-modal-close-size);
min-height: var(--_compact-input-modal-close-size);
border: 0;
border-radius: var(--_compact-input-modal-close-radius);
background: var(--_compact-input-modal-close-bg);
color: var(--_compact-input-modal-close-color);
box-shadow: none;
transition: background-color .16s ease, color .16s ease;
}
#compactPromptModal .compactPromptModalClose:hover{
background: var(--_compact-input-modal-close-bg-hover);
color: #5F6979;
border-color: transparent;
box-shadow: none;
}
#compactPromptModal .compactPromptModalCloseIcon{
width: var(--_compact-input-modal-close-icon-size);
height: var(--_compact-input-modal-close-icon-size);
display: block;
}
#compactPromptModal .compactPromptModalCloseIcon path{
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
}
#compactPromptModal .compactPromptModalBody{
display: flex;
flex-direction: column;
gap: 14px;
padding: var(--_compact-input-modal-body-pad);
background: var(--_compact-input-modal-body-bg);
}
#compactPromptModal .compactPromptModalDescription{
margin: 0;
color: #6B7280;
font-size: 14px;
font-weight: 650;
line-height: 1.45;
white-space: pre-line;
}
#compactPromptModal .compactPromptModalField{
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--_compact-input-modal-field-gap);
}
#compactPromptModal .compactPromptModalField > label{
margin: 0;
color: var(--_compact-input-modal-label-color);
font-size: var(--_compact-input-modal-label-size);
font-weight: var(--_compact-input-modal-label-weight);
line-height: 1.2;
}
#compactPromptModal #compactPromptModalInput{
width: 100%;
min-height: var(--_compact-input-modal-control-height);
height: var(--_compact-input-modal-control-height);
padding: 0 var(--_compact-input-modal-control-pad-x);
border-radius: var(--_compact-input-modal-control-radius);
border: 1px solid var(--_compact-input-modal-control-border);
background: var(--_compact-input-modal-control-bg);
color: var(--_compact-input-modal-control-text);
font-family: var(--ct-font-ui);
font-size: var(--_compact-input-modal-control-font-size);
font-weight: 400;
line-height: 1.1;
box-shadow: none;
transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
#compactPromptModal #compactPromptModalInput::placeholder{
color: var(--_compact-input-modal-control-placeholder);
}
#compactPromptModal #compactPromptModalInput:hover{
border-color: #D1D5DB;
}
#compactPromptModal #compactPromptModalInput:focus,
#compactPromptModal #compactPromptModalInput:focus-visible{
border-color: var(--_compact-input-modal-control-focus-border);
box-shadow: var(--_compact-input-modal-control-focus-shadow);
}
#compactPromptModal .compactPromptModalActions{
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
padding: var(--_compact-input-modal-footer-pad-top) var(--_compact-input-modal-body-pad) var(--_compact-input-modal-footer-pad-bottom);
border-top: 1px solid var(--_compact-input-modal-divider);
background: var(--_compact-input-modal-footer-bg);
}
#compactPromptModal :is(.compactPromptModalSecondaryBtn, .compactPromptModalPrimaryBtn){
min-height: var(--_compact-input-modal-btn-height);
padding-top: 0;
padding-bottom: 0;
border-radius: var(--_compact-input-modal-btn-radius);
font-size: var(--_compact-input-modal-btn-font-size);
font-weight: var(--_compact-input-modal-btn-font-weight);
line-height: 1.1;
box-shadow: none;
}
#compactPromptModal .compactPromptModalSecondaryBtn{
padding-left: var(--_compact-input-modal-btn-secondary-pad-x);
padding-right: var(--_compact-input-modal-btn-secondary-pad-x);
border: 1px solid var(--_compact-input-modal-btn-secondary-border);
background: var(--_compact-input-modal-btn-secondary-bg);
color: var(--_compact-input-modal-btn-secondary-text);
}
#compactPromptModal .compactPromptModalSecondaryBtn:hover{
background: #EDEFF3;
border-color: #D8DEE8;
color: #1F2937;
box-shadow: none;
}
#compactPromptModal .compactPromptModalPrimaryBtn{
padding-left: var(--_compact-input-modal-btn-primary-pad-x);
padding-right: var(--_compact-input-modal-btn-primary-pad-x);
border: 0;
background: var(--_compact-input-modal-btn-primary-bg);
color: var(--_compact-input-modal-btn-primary-text);
}
#compactPromptModal .compactPromptModalPrimaryBtn:hover{
background: var(--_compact-input-modal-btn-primary-bg-hover);
box-shadow: none;
}
@media (max-width: 760px){
#compactPromptModal{
--_compact-input-modal-width: 100%;
--_compact-input-modal-header-pad-x: 18px;
--_compact-input-modal-body-pad: 18px;
}
#compactPromptModal .compactPromptModalActions{
justify-content: stretch;
}
#compactPromptModal :is(.compactPromptModalSecondaryBtn, .compactPromptModalPrimaryBtn){
flex: 1 1 0;
}
}
.modalCard{
width: min(980px, 100%);
max-height: calc(100vh - 36px);
overflow: auto;
border-radius: var(--radius);
border: 1px solid var(--border);
background: linear-gradient(180deg, var(--surface), var(--surface2));
box-shadow: 0 26px 80px rgba(0,0,0,.50);
}
/* ===== Account auth modal ===== */
#accountAuthModal{
z-index: 76;
--_account-auth-width: 440px;
--_account-auth-radius: 22px;
--_account-auth-surface: #FFFFFF;
--_account-auth-soft: #F7F9FC;
--_account-auth-soft-2: #F1F4F8;
--_account-auth-text: #18202D;
--_account-auth-muted: #758093;
--_account-auth-border: #E4E9F1;
--_account-auth-border-strong: #D8E0EA;
--_account-auth-primary: #18202D;
--_account-auth-primary-hover: #101722;
--_account-auth-success: #3F7A55;
--_account-auth-success-bg: #F1FAF4;
--_account-auth-error: #B76575;
--_account-auth-error-bg: #FFF6F6;
--_account-auth-shadow: 0 24px 70px rgba(15, 23, 42, .18);
--_account-auth-control-h: 40px;
}
#accountAuthModal .accountAuthCard{
box-sizing: border-box;
width: min(var(--_account-auth-width), calc(100vw - 28px));
max-height: calc(100dvh - 36px);
overflow: auto;
border: 1px solid rgba(255, 255, 255, .72);
border-radius: var(--_account-auth-radius);
background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%);
box-shadow: var(--_account-auth-shadow);
color: var(--_account-auth-text);
font-family: "Inter", var(--ct-font-sans);
}
#accountAuthModal .accountAuthHead{
box-sizing: border-box;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
padding: 24px 24px 16px;
border-bottom: 1px solid var(--_account-auth-border);
background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
}
#accountAuthModal .accountAuthIntro{
display: grid;
gap: 6px;
min-width: 0;
}
#accountAuthModal .accountAuthTitle{
color: var(--_account-auth-text);
font-size: 24px;
font-weight: 820;
line-height: 1.1;
letter-spacing: 0;
}
#accountAuthModal .accountAuthSubtitle{
color: var(--_account-auth-muted);
font-size: 12px;
font-weight: 520;
line-height: 1.35;
letter-spacing: 0;
}
#accountAuthModal .accountAuthClose{
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 34px;
height: 34px;
border: 0;
border-radius: 12px;
background: var(--_account-auth-soft-2);
color: #657184;
font-size: 21px;
font-weight: 560;
line-height: 1;
box-shadow: none;
}
#accountAuthModal .accountAuthClose:hover,
#accountAuthModal .accountAuthClose:focus-visible{
background: #E8EDF4;
color: var(--_account-auth-text);
box-shadow: none;
}
#accountAuthModal .accountAuthModeTabs{
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
padding: 16px 18px 0;
}
#accountAuthModal .accountAuthModeTabs[hidden]{
display: none;
}
#accountAuthModal .accountAuthModeBtn{
min-width: 0;
min-height: 34px;
padding: 0 8px;
border: 1px solid transparent;
border-radius: 10px;
background: transparent;
color: #7A8596;
font-size: 11px;
font-weight: 760;
line-height: 1.1;
letter-spacing: 0;
box-shadow: none;
white-space: normal;
}
#accountAuthModal .accountAuthModeBtn:hover,
#accountAuthModal .accountAuthModeBtn:focus-visible{
background: var(--_account-auth-soft);
color: var(--_account-auth-text);
box-shadow: none;
}
#accountAuthModal .accountAuthModeBtn.is-active{
border-color: var(--_account-auth-border);
background: #FFFFFF;
color: var(--_account-auth-text);
box-shadow: 0 8px 18px rgba(31, 41, 55, .06);
}
#accountAuthModal .accountAuthForm{
display: grid;
gap: 14px;
padding: 18px 24px 24px;
}
#accountAuthModal .accountAuthField{
display: grid;
gap: 6px;
min-width: 0;
margin: 0;
}
#accountAuthModal .accountAuthField[hidden]{
display: none;
}
#accountAuthModal .accountAuthField > span{
color: var(--_account-auth-muted);
font-size: 11px;
font-weight: 720;
line-height: 1.2;
letter-spacing: 0;
}
#accountAuthModal .accountAuthInput{
box-sizing: border-box;
width: 100%;
height: var(--_account-auth-control-h);
min-height: var(--_account-auth-control-h);
padding: 0 12px;
border: 1px solid var(--_account-auth-border);
border-radius: 10px;
background: #FFFFFF;
color: var(--_account-auth-text);
font-family: var(--ct-font-ui);
font-size: 13px;
font-weight: 520;
line-height: 1.1;
letter-spacing: 0;
box-shadow: none;
transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
#accountAuthModal .accountAuthInput::placeholder{
color: #A2ACBA;
}
#accountAuthModal .accountAuthInput:hover{
border-color: var(--_account-auth-border-strong);
}
#accountAuthModal .accountAuthInput:focus,
#accountAuthModal .accountAuthInput:focus-visible{
border-color: #8AB7EA;
box-shadow: 0 0 0 3px rgba(138, 183, 234, .16);
}
#accountAuthModal .accountAuthStatus{
min-height: 34px;
padding: 10px 12px;
border: 1px solid var(--_account-auth-border);
border-radius: 10px;
background: var(--_account-auth-soft);
color: var(--_account-auth-muted);
font-size: 12px;
font-weight: 640;
line-height: 1.25;
}
#accountAuthModal .accountAuthStatus[hidden]{
display: none;
}
#accountAuthModal .accountAuthStatus[data-tone="success"]{
border-color: #D9EBDF;
background: var(--_account-auth-success-bg);
color: var(--_account-auth-success);
}
#accountAuthModal .accountAuthStatus[data-tone="error"]{
border-color: #F0DCDD;
background: var(--_account-auth-error-bg);
color: var(--_account-auth-error);
}
#accountAuthModal .accountAuthActions{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 10px;
margin-top: 2px;
}
#accountAuthModal :is(.accountAuthPrimaryBtn, .accountAuthSecondaryBtn, .accountAuthTextBtn){
min-height: var(--_account-auth-control-h);
border-radius: 10px;
font-family: var(--ct-font-ui);
font-size: 12px;
font-weight: 780;
line-height: 1.1;
letter-spacing: 0;
box-shadow: none;
}
#accountAuthModal .accountAuthPrimaryBtn{
border: 0;
background: var(--_account-auth-primary);
color: #FFFFFF;
}
#accountAuthModal .accountAuthPrimaryBtn:hover,
#accountAuthModal .accountAuthPrimaryBtn:focus-visible{
background: var(--_account-auth-primary-hover);
box-shadow: none;
}
#accountAuthModal .accountAuthSecondaryBtn{
border: 1px solid var(--_account-auth-border);
background: #FFFFFF;
color: #596678;
}
#accountAuthModal .accountAuthSecondaryBtn:hover,
#accountAuthModal .accountAuthSecondaryBtn:focus-visible{
border-color: var(--_account-auth-border-strong);
background: var(--_account-auth-soft);
color: var(--_account-auth-text);
box-shadow: none;
}
#accountAuthModal .accountAuthTextBtn{
justify-self: center;
min-height: 28px;
padding: 0 10px;
border: 0;
background: transparent;
color: #7A8596;
}
#accountAuthModal .accountAuthTextBtn[hidden]{
display: none;
}
#accountAuthModal .accountAuthTextBtn:hover,
#accountAuthModal .accountAuthTextBtn:focus-visible{
color: var(--_account-auth-text);
background: transparent;
box-shadow: none;
}
#accountAuthModal.is-busy :is(.accountAuthInput, .accountAuthPrimaryBtn, .accountAuthSecondaryBtn, .accountAuthTextBtn, .accountAuthClose){
cursor: wait;
}
#accountAuthModal :is(button, input):disabled{
opacity: .62;
}
@media (max-width: 520px){
#accountAuthModal{
--_account-auth-width: 100%;
}
#accountAuthModal .accountAuthHead,
#accountAuthModal .accountAuthForm{
padding-inline: 18px;
}
#accountAuthModal .accountAuthModeTabs,
#accountAuthModal .accountAuthActions{
grid-template-columns: 1fr;
}
}
/* ===== Tx modal owner layer ===== */
#txModal{
--_tx-modal-surface: #F8F8F7;
--_tx-modal-border: rgba(255,255,255,.72);
--_tx-modal-header-border: #E6E8EA;
--_tx-modal-divider: #E5E6E7;
--_tx-modal-top-bg: var(--_tx-modal-surface);
--_tx-modal-label: #6F757F;
--_tx-modal-text: #1D2430;
--_tx-modal-muted: #8B929D;
--_tx-modal-soft: #EFF0F0;
--_tx-modal-soft-hover: #E8EAEA;
--_tx-modal-dark: #202733;
--_tx-modal-dark-hover: #161D27;
--_tx-modal-field-bg: #FFFFFF;
--_tx-modal-field-border: #DEE3E9;
--_tx-modal-field-radius: 10px;
--_tx-modal-field-h: 36px;
--_tx-modal-field-px: 12px;
--_tx-modal-value-size: 22px;
--_tx-modal-top-value-size: 26px;
--_tx-modal-value-weight: 540;
--_tx-modal-label-weight: 500;
--_tx-modal-placeholder-weight: 460;
--_tx-modal-subvalue-weight: 430;
--_tx-modal-unit-weight: 500;
--_tx-modal-value-muted: #7B838D;
--_tx-modal-placeholder: #A8AFB6;
--_tx-modal-radius: 27px;
--_tx-modal-width: 731px;
--_tx-modal-head-px: 27px;
--_tx-modal-head-pt: 24px;
--_tx-modal-body-px: 27px;
--_tx-modal-body-pt: 17px;
--_tx-modal-footer-pb: 24px;
--_tx-modal-row-gap: 15px;
--_tx-modal-field-gap: 13px;
--_tx-modal-field-col-asset: 214px;
--_tx-modal-field-col-qty: 166px;
--_tx-modal-field-col-price: 232px;
--_tx-modal-qty-reserve: 44px;
--_tx-modal-transfer-picker-w: var(--_tx-modal-field-col-asset);
--_tx-modal-transfer-to-offset: 9px;
--_tx-modal-transfer-empty-size: 20px;
--_tx-modal-transfer-empty-weight: 460;
--_tx-modal-gap-minor: 9px;
--_tx-modal-chip-h: 35px;
--_tx-modal-chip-px: 18px;
--_tx-type-segment-w: 360px;
--_tx-type-segment-bg: var(--_tx-modal-surface);
--_tx-type-segment-border: color-mix(in srgb, #DEE1E5 50%, var(--_tx-modal-surface) 50%);
--_tx-type-segment-radius: 16px;
--_tx-type-chip-radius: 14px;
--_tx-type-segment-active-bg: #FFFFFF;
--_tx-type-segment-active-border: color-mix(in srgb, #E3E5E8 50%, #FFFFFF 50%);
--_tx-type-segment-inactive-text: color-mix(in srgb, #89898A 75%, var(--_tx-modal-text) 25%);
--_tx-type-icon-size: 16px;
--_tx-type-icon-buy: #4E765A;
--_tx-type-icon-sell: #B65A5F;
--_tx-type-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
--_tx-type-icon-trend-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpath d='M16 7h6v6'/%3E%3C/svg%3E");
--_tx-type-icon-trend-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 17 13.5 8.5 8.5 13.5 2 7'/%3E%3Cpath d='M16 17h6v-6'/%3E%3C/svg%3E");
--_tx-modal-tax-mode-label: color-mix(in srgb, #66738A 80%, #1D2430 20%);
--_tx-modal-tax-mode-switch-on: color-mix(in srgb, #CAD6C7 85%, #5D8A73 15%);
--_tx-modal-chip-active-border: color-mix(in srgb, #C9D0CC 15%, #E6E9E7 85%);
--_tx-modal-chip-buy-border: color-mix(in srgb, #9FAFA4 16%, #E5EEE8 84%);
--_tx-modal-chip-sell-border: color-mix(in srgb, #BFA6A8 16%, #F1E7E7 84%);
--_tx-modal-chip-transfer-border: color-mix(in srgb, #B8CBDD 15%, #EEF4F9 85%);
--_tx-modal-chip-reward-border: color-mix(in srgb, #CCBEDD 15%, #F4F0F8 85%);
--_tx-modal-shell-shadow: 0 24px 64px rgba(15, 23, 42, .24);
--_tx-modal-setting-row-border: #E1E4E8;
--_tx-modal-setting-row-bg: #F2F3F3;
--_tx-modal-action-divider: var(--_tx-modal-divider);
--_tx-fx-select-w: 62px;
--_tx-fx-rate-w: 72px;
--_tx-fx-wrap-gap: 10px;
--_tx-fx-wrap-pad-x: 11px;
--_tx-fx-wrap-pad-y: 9px;
--_dropdown-trigger-text: var(--_tx-modal-text);
--_dropdown-trigger-font-size: 13px;
--_dropdown-trigger-font-weight: 500;
--_dropdown-trigger-radius: 11px;
--_dropdown-trigger-border: var(--_tx-modal-field-border);
--_dropdown-trigger-open-border: #E8EDF4;
--_dropdown-menu-border: #EEF3F8;
--_dropdown-menu-radius: 10px;
--_dropdown-menu-bg: #FFFFFF;
--_dropdown-menu-shadow: 0 6px 14px rgba(15, 23, 42, .05);
--_dropdown-menu-pad: 6px;
--_dropdown-menu-offset-y: -3px;
--_dropdown-option-radius: 8px;
--_dropdown-option-pad-y: 6px;
--_dropdown-option-pad-x: 12px;
--_dropdown-option-font-size: 12px;
--_dropdown-option-font-weight: 445;
--_dropdown-option-text: color-mix(in srgb, var(--_tx-asset-picker-option-text) 92%, #5A677A 8%);
--_dropdown-option-selected-bg: color-mix(in srgb, #EDF5FF 78%, #FFFFFF 22%);
--_dropdown-option-selected-text: #2D8DD9;
--_dropdown-option-selected-stroke: inset 0 0 0 1px rgba(173, 205, 238, .42);
--_dropdown-option-hover-bg: #EDF5FF;
--_dropdown-option-hover-text: #2D9AEB;
--_dropdown-section-label-size: 11px;
--_dropdown-section-label-weight: 560;
--_dropdown-section-label-color: #7B8799;
--_dropdown-section-label-pad-y: 6px;
--_dropdown-section-label-pad-x: 12px;
--_tx-modal-overlay-pad-top: calc(var(--stickyTop, 0px) + 18px);
--_tx-modal-overlay-pad-bottom: 18px;
--_tx-modal-overlay-pad-x: 14px;
}
#txModal.modalOverlay{
background: var(--_modal-overlay-bg);
backdrop-filter: var(--_modal-overlay-filter);
-webkit-backdrop-filter: var(--_modal-overlay-filter);
align-items: center;
overflow-y: auto;
overscroll-behavior: contain;
padding:
var(--_tx-modal-overlay-pad-top)
var(--_tx-modal-overlay-pad-x)
var(--_tx-modal-overlay-pad-bottom);
}
#txModal .modalCard{
width: min(var(--_tx-modal-width), 100%);
border-radius: var(--_tx-modal-radius);
border-color: var(--_tx-modal-border);
background: var(--_tx-modal-surface);
box-shadow: var(--_tx-modal-shell-shadow);
margin: 0 auto;
max-height: calc(100dvh - (var(--_tx-modal-overlay-pad-top) + var(--_tx-modal-overlay-pad-bottom)));
}
.modalHead{
position: sticky;
top: 0;
z-index: 2;
display:flex;
align-items:center;
justify-content: space-between;
gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid rgba(10,12,16,.08);
background: rgba(246,247,251,.80);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.modalTitle{ font-weight: 850; }
.modalHeadRight{
display:flex;
align-items:center;
gap:10px;
margin-left:auto;
}
.taxModeCtl{
display:flex;
align-items:center;
gap:10px;
color: var(--muted);
font-size: 12px;
max-width: min(62vw, 520px);
}
.taxModeCtlTop{
display:flex;
align-items:center;
gap:8px;
flex-wrap: nowrap;
}
.taxModeCtlTop > span:first-child{ white-space: nowrap; }
.taxModeCtl .helpQ{ flex: 0 0 auto; }
#txModal .modalHead{
position: static;
padding: var(--_tx-modal-head-pt) var(--_tx-modal-head-px) 0;
border-bottom: 0;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
gap: var(--_tx-modal-gap-minor);
}
#txModal .modalTitle{
color: var(--_tx-modal-text);
font-family: "Inter", var(--ct-font-sans);
font-size: 25px;
font-weight: 620;
line-height: 1.14;
letter-spacing: 0;
}
#txModal .modalHeadRight{
gap: 12px;
align-items: center;
}
#txModal .taxModeCtl{
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 12px;
border: 1px solid #ECEDED;
border-radius: 999px;
background: #F0F1F1;
color: var(--_tx-modal-label);
font-size: 10.5px;
font-weight: 500;
max-width: none;
font-family: "Inter", var(--ct-font-sans);
box-shadow: none;
}
#txModal .taxModeCtlTop{
gap: 6px;
align-items: center;
min-height: 24px;
}
#txModal .taxModeCtlTop > span:first-child{
color: var(--_tx-modal-tax-mode-label);
font-size: 11.5px;
font-weight: 500;
}
#txModal .taxModeCtl .helpQ{
display: none;
width: 14px;
height: 14px;
font-size: 8px;
color: #93A0B5;
border-color: #DCE4EF;
background: #FFFFFF;
opacity: 1;
margin-left: 0;
}
#txModal .switch{
width: 39px;
height: 20px;
transform: translateY(2px);
}
#txModal .slider{
background: #DBDDDD;
border: 0;
}
#txModal .slider::before{
width: 15px;
height: 15px;
left: 3px;
top: 2.5px;
box-shadow: 0 1px 2px rgba(15, 23, 42, .10);
}
#txModal .switch input:checked + .slider{
background: var(--_tx-modal-tax-mode-switch-on);
}
#txModal .switch input:checked + .slider::before{
transform: translateX(18px);
}
html.tx-boot-tax-on #txModal .taxModeCtl .slider{
background: var(--_tx-modal-tax-mode-switch-on);
}
html.tx-boot-tax-on #txModal .taxModeCtl .slider::before{
transform: translateX(18px);
}
html.is-booting #txModal .taxModeCtl .slider,
html.is-booting #txModal .taxModeCtl .slider::before,
html.tx-boot-tax-on #txModal .taxModeCtl .slider,
html.tx-boot-tax-on #txModal .taxModeCtl .slider::before,
#txModal.is-restoring-draft .taxModeCtl .slider,
#txModal.is-restoring-draft .taxModeCtl .slider::before{
transition: none;
}
#txModal .txModalCloseBtn{
width: 26px;
min-width: 26px;
height: 26px;
min-height: 26px;
padding: 0;
border-radius: 50%;
border: 1px solid #DFE1E2;
background: #F0F1F1;
color: #768397;
box-shadow: none;
align-self: center;
margin: 0;
position: static;
}
#txModal .txModalCloseBtn svg{
width: 13px;
height: 13px;
display: block;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
}
#txModal .txModalCloseBtn:hover,
#txModal .txModalCloseBtn:focus-visible{
background: #E9EBEB;
border-color: #D8DBDD;
color: #5F6D81;
box-shadow: none;
}
.switch{
position: relative;
display: inline-block;
width: 38px;
height: 22px;
flex: 0 0 auto;
}
.switch input{ display:none; }
.slider{
position:absolute;
inset:0;
cursor:pointer;
background: color-mix(in srgb, var(--text) 22%, transparent);
border: 1px solid var(--border);
border-radius: 999px;
transition: .2s ease;
}
.slider::before{
content:"";
position:absolute;
height: 16px;
width: 16px;
left: 2px;
top: 2px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
transition: .2s ease;
}
.switch input:checked + .slider{
background: color-mix(in srgb, var(--primary) 60%, var(--btn));
border-color: rgba(120,160,255,.45);
}
.switch input:checked + .slider::before{
transform: translateX(16px);
}
#txModal #advancedTaxSection{
--_tx-tax-width: 677px;
--_tx-tax-text: #666465;
--_tx-tax-value: #5F5E5F;
--_tx-tax-picker-value: #474747;
--_tx-tax-muted: #8D8C8C;
--_tx-tax-soft: #F0F1F3;
--_tx-tax-soft-border: #DEE1E5;
--_tx-tax-divider: #E6E6E6;
--_tx-tax-tab-active-bg: #FFFFFF;
--_tx-tax-tab-active-border: #E3E5E8;
--_tx-tax-status-bg: #EAF1FF;
--_tx-tax-status-border: #C9DDFF;
--_tx-tax-status-text: #4969A2;
--_tx-tax-status-approved-bg: #E7EFEA;
--_tx-tax-status-approved-border: #D4E0D8;
--_tx-tax-status-approved-text: #425F4B;
--_tx-tax-status-rejected-bg: #FFF0F1;
--_tx-tax-status-rejected-border: #F0D1D7;
--_tx-tax-status-rejected-text: #9A5A65;
--_tx-tax-status-wallet-bg: #F3F0FF;
--_tx-tax-status-wallet-border: #DDD4FF;
--_tx-tax-status-wallet-text: #6E5DA8;
--_tx-tax-col-gap: 14px;
--_tx-tax-pair-col-gap: calc(var(--_tx-tax-col-gap) * 1.5);
--_tx-tax-pair-col-w: calc((100% - var(--_tx-tax-pair-col-gap)) / 2);
--_tx-tax-pair-second-col-x: calc(var(--_tx-tax-pair-col-w) + var(--_tx-tax-pair-col-gap));
--_tx-tax-bank-field-size: calc(var(--_tx-tax-value-size) * .727);
--_tx-tax-bank-field-weight: 370;
--_tx-tax-bank-placeholder-size: calc(var(--_tx-tax-bank-field-size) * .92);
--_tx-tax-bank-placeholder-weight: 320;
--_tx-tax-bank-label-gap: 12px;
--_tx-tax-row-gap: 27px;
--_tx-tax-second-row-shift: 7px;
--_tx-tax-label-size: 13px;
--_tx-tax-value-size: 17px;
--_tx-tax-note-toggle-text: #66727F;
--_tx-tax-note-toggle-text-active: #4969A2;
--_tx-tax-action-h: 34px;
--_tx-tax-action-icon-size: 12px;
--_tx-tax-action-radius: calc(var(--_tx-type-chip-radius) * .85);
--_tx-tax-action-primary-bg: #E5EBF3;
--_tx-tax-action-primary-border: color-mix(in srgb, #C8D4E3 68%, #E5EBF3 32%);
--_tx-tax-action-primary-text: #506681;
--_tx-tax-action-primary-bg-hover: #DDE5EF;
--_tx-tax-action-primary-border-hover: color-mix(in srgb, #B8C8DA 72%, #DDE5EF 28%);
--_tx-tax-action-primary-text-hover: #435A76;
--_tx-tax-action-primary-shadow-hover: 0 7px 16px rgba(60, 78, 104, .105);
--_tx-tax-action-secondary-text: #66717F;
--_tx-tax-action-secondary-text-hover: #4F6178;
--_tx-tax-action-secondary-bg-hover: rgba(230, 236, 244, .72);
--_tx-tax-action-ghost-bg: #FFFFFF;
--_tx-tax-action-ghost-border: #DDE3EA;
--_tx-tax-action-ghost-text: #596273;
--_tx-tax-action-ghost-bg-hover: #F8FAFC;
--_tx-tax-action-ghost-border-hover: #D2DAE3;
--_tx-tax-action-ghost-shadow: 0 2px 6px rgba(31, 43, 62, .045);
--_tx-tax-action-setup-bg: var(--_tx-tax-action-ghost-bg);
--_tx-tax-action-setup-border: #E3E5E8;
--_tx-tax-action-setup-text: #596273;
--_tx-tax-action-setup-bg-hover: #EEF2F6;
--_tx-tax-action-setup-border-hover: color-mix(in srgb, #CBD6E2 48%, #EEF2F6 52%);
--_tx-tax-action-setup-text-hover: color-mix(in srgb, #4B5C73 84%, #356997 16%);
--_tx-tax-copy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E");
--_tx-transfer-csv-notice-bg: #F4F7FA;
--_tx-transfer-csv-notice-border: color-mix(in srgb, #E1E8F0 50%, transparent);
--_tx-transfer-csv-notice-text: #66727F;
--_tx-transfer-csv-notice-strong: #47566B;
--_tx-transfer-csv-notice-icon-bg: #E8F0F8;
--_tx-transfer-csv-notice-icon-text: #5D7291;
--_tx-tax-summary-bg: #F6FAF7;
--_tx-tax-summary-border: #DDE9E0;
--_tx-tax-summary-text: #3F5948;
--_tx-tax-summary-muted: #66727F;
--_tx-tax-summary-icon-bg: #3E8B54;
--_tx-tax-summary-stale-bg: #FCFAEF;
--_tx-tax-summary-stale-border: #E7E1C8;
--_tx-tax-summary-stale-text: #665633;
--_tx-tax-summary-stale-muted: #766A55;
--_tx-tax-summary-pending-bg: #F5F8FD;
--_tx-tax-summary-pending-border: #DDE7F4;
--_tx-tax-summary-pending-text: #3F587A;
--_tx-tax-summary-pending-muted: #66778E;
--_tx-tax-summary-pending-icon: #4778C7;
--_tx-tax-summary-pending-action: #4B668C;
--_tx-tax-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
--_tx-tax-external-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
display: none;
width: 100%;
max-width: var(--_tx-tax-width);
margin: 0 0 8px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--_tx-tax-text);
font-family: "Inter", var(--ct-font-sans);
}
#txModal #advancedTaxSection .small{
color: var(--_tx-tax-muted);
font-family: "Inter", var(--ct-font-sans);
}
#txModal #advancedTaxSection.has-approved-summary{
max-width: 100%;
margin-bottom: 34px;
}
#txModal #advancedTaxSection .taxApprovedSummaryCard{
display: flex;
align-items: center;
gap: 14px;
width: 100%;
min-height: 61px;
padding: 12px 13px;
border: 1px solid var(--_tx-tax-summary-border);
border-radius: 10px;
background: var(--_tx-tax-summary-bg);
color: var(--_tx-tax-summary-text);
box-shadow: 0 1px 2px rgba(31, 43, 62, .025);
}
#txModal #advancedTaxSection .taxApprovedSummaryIcon{
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 32px;
width: 32px;
height: 32px;
border-radius: 999px;
background: var(--_tx-tax-summary-icon-bg);
color: #FFFFFF;
font-family: "Inter", var(--ct-font-sans);
font-size: 22px;
font-weight: 420;
line-height: 1;
}
#txModal #advancedTaxSection .taxApprovedSummaryCard.is-stale-warning{
border-color: var(--_tx-tax-summary-stale-border);
background: var(--_tx-tax-summary-stale-bg);
color: var(--_tx-tax-summary-stale-text);
}
#txModal #advancedTaxSection .taxApprovedSummaryCard.is-stale-warning .taxApprovedSummaryIcon{
flex-basis: 28px;
width: 28px;
height: 28px;
border-radius: 0;
background: transparent;
color: inherit;
font-size: 23px;
font-weight: 400;
}
#txModal #advancedTaxSection .taxApprovedSummaryCard.is-stale-warning .taxApprovedSummaryTitle{
color: var(--_tx-tax-summary-stale-text);
}
#txModal #advancedTaxSection .taxApprovedSummaryCard.is-stale-warning .taxApprovedSummaryMeta{
color: var(--_tx-tax-summary-stale-muted);
}
#txModal #advancedTaxSection .taxApprovedSummaryCard.is-stale-warning .taxApprovedSummaryAction{
color: #6C5529;
}
#txModal #advancedTaxSection .taxApprovedSummaryCard.is-pending{
border-color: var(--_tx-tax-summary-pending-border);
background: var(--_tx-tax-summary-pending-bg);
color: var(--_tx-tax-summary-pending-text);
}
#txModal #advancedTaxSection .taxApprovedSummaryCard.is-pending .taxApprovedSummaryIcon{
flex-basis: 28px;
width: 28px;
height: 28px;
border-radius: 0;
background: transparent;
color: var(--_tx-tax-summary-pending-icon);
font-size: 0;
font-weight: 400;
}
#txModal #advancedTaxSection .taxApprovedSummaryCard.is-pending .taxApprovedSummaryIcon::before{
content: "";
width: 18px;
height: 18px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E") center / contain no-repeat;
}
#txModal #advancedTaxSection .taxApprovedSummaryCard.is-pending .taxApprovedSummaryTitle{
color: var(--_tx-tax-summary-pending-text);
}
#txModal #advancedTaxSection .taxApprovedSummaryCard.is-pending .taxApprovedSummaryMeta{
color: var(--_tx-tax-summary-pending-muted);
}
#txModal #advancedTaxSection .taxApprovedSummaryCard.is-pending .taxApprovedSummaryAction{
color: var(--_tx-tax-summary-pending-action);
}
#txModal #advancedTaxSection .taxApprovedSummaryCard.is-pending .taxApprovedSummaryAction::before{
-webkit-mask: var(--_tx-tax-search-icon) center / contain no-repeat;
mask: var(--_tx-tax-search-icon) center / contain no-repeat;
}
#txModal #advancedTaxSection .taxApprovedSummaryText{
display: flex;
flex-direction: column;
min-width: 0;
gap: 7px;
}
#txModal #advancedTaxSection .taxApprovedSummaryTitle{
color: var(--_tx-tax-summary-text);
font-family: "Inter", var(--ct-font-sans);
font-size: 13.5px;
font-weight: 459;
line-height: 1.15;
letter-spacing: 0;
white-space: nowrap;
}
#txModal #advancedTaxSection .taxApprovedSummaryMeta{
min-width: 0;
color: var(--_tx-tax-summary-muted);
font-family: "Inter", var(--ct-font-sans);
font-size: 11.5px;
font-weight: 430;
line-height: 1.25;
letter-spacing: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#txModal #advancedTaxSection .taxApprovedSummaryAction{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
flex: 0 0 auto;
min-height: var(--_tx-tax-action-h);
margin-left: auto;
padding: 0 14px;
border: 1px solid var(--_tx-tax-action-ghost-border);
border-radius: var(--_tx-tax-action-radius);
background: var(--_tx-tax-action-ghost-bg);
color: #425F4B;
font-family: "Inter", var(--ct-font-sans);
font-size: 12.5px;
font-weight: 455;
line-height: 1;
letter-spacing: 0;
white-space: nowrap;
box-shadow: var(--_tx-tax-action-ghost-shadow);
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
#txModal #advancedTaxSection .taxApprovedSummaryAction::before{
content: "";
flex: 0 0 13px;
width: 13px;
height: 13px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
#txModal #advancedTaxSection .taxApprovedSummaryAction:hover,
#txModal #advancedTaxSection .taxApprovedSummaryAction:focus-visible{
background: var(--_tx-tax-action-ghost-bg-hover);
border-color: var(--_tx-tax-action-ghost-border-hover);
color: #36543F;
outline: 0;
box-shadow: 0 4px 10px rgba(31, 43, 62, .06);
}
#txModal #advancedTaxSection .taxProofEditorPanel[aria-hidden="true"]{
display: none;
}
#txModal #advancedTaxSection .txTaxTopRow{
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
min-height: 33px;
}
#txModal #advancedTaxSection .taxTabs{
display: flex;
align-items: stretch;
flex: 0 0 354px;
min-width: 0;
min-height: 33px;
padding: 4px;
border: 1px solid var(--_tx-tax-soft-border);
border-radius: 999px;
background: var(--_tx-tax-soft);
gap: 0;
}
#txModal #advancedTaxSection .taxTabs .taxTab{
flex: 1 1 50%;
min-width: 0;
min-height: 25px;
margin: 0;
padding: 0 12px;
border: 1px solid transparent;
border-radius: 999px;
background: transparent;
color: #89898A;
font-family: "Inter", var(--ct-font-sans);
font-size: 12px;
font-weight: 500;
line-height: 1;
letter-spacing: 0;
text-align: center;
white-space: nowrap;
cursor: pointer;
box-shadow: none;
transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
#txModal #advancedTaxSection .taxTabs .taxTab.is-active{
background: var(--_tx-tax-tab-active-bg);
border-color: var(--_tx-tax-tab-active-border);
color: #616061;
box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
#txModal #advancedTaxSection .taxTabs .taxTab:not(.is-active):hover{
color: #6E6E70;
}
#txModal #advancedTaxSection .taxStatusRow{
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0;
flex: 0 0 auto;
min-width: 0;
margin: 0;
}
#txModal #advancedTaxSection .taxStatusBadge{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 24px;
padding: 0 10px;
border: 1px solid var(--_tx-tax-status-border);
border-radius: 999px;
background: var(--_tx-tax-status-bg);
color: var(--_tx-tax-status-text);
font-family: "Inter", var(--ct-font-sans);
font-size: 12px;
font-weight: 450;
line-height: 1;
letter-spacing: 0;
white-space: nowrap;
}
#txModal #advancedTaxSection .taxStatusBadge.approved{
border-color: var(--_tx-tax-status-approved-border);
background: var(--_tx-tax-status-approved-bg);
color: var(--_tx-tax-status-approved-text);
}
#txModal #advancedTaxSection .taxStatusBadge.pending{
border-color: var(--_tx-tax-status-border);
background: var(--_tx-tax-status-bg);
color: var(--_tx-tax-status-text);
}
#txModal #advancedTaxSection .taxStatusBadge.rejected{
border-color: var(--_tx-tax-status-rejected-border);
background: var(--_tx-tax-status-rejected-bg);
color: var(--_tx-tax-status-rejected-text);
}
#txModal #advancedTaxSection .taxStatusBadge.wallet-proof{
border-color: var(--_tx-tax-status-wallet-border);
background: var(--_tx-tax-status-wallet-bg);
color: var(--_tx-tax-status-wallet-text);
}
#txModal #advancedTaxSection .taxAutoChip{
display: none;
}
#txModal #advancedTaxSection .txTaxDivider{
width: 100%;
height: 1px;
margin: 22px 0 23px;
background: var(--_tx-tax-divider);
}
#txModal #advancedTaxSection .taxTabPanel{
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
#txModal #advancedTaxSection .taxAdvGrid,
#txModal #advancedTaxSection .taxManualProofGrid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--_tx-tax-row-gap) var(--_tx-tax-col-gap);
align-items: start;
width: 100%;
max-width: 100%;
}
#txModal #advancedTaxSection .taxAdvField,
#txModal #advancedTaxSection .taxBankProofBox{
min-width: 0;
max-width: 100%;
}
#txModal #advancedTaxSection .taxAdvField label{
display: inline-flex;
align-items: center;
gap: 5px;
margin: 0 0 8px;
color: var(--_tx-tax-muted);
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_tx-tax-label-size);
font-weight: 430;
line-height: 1.15;
letter-spacing: 0;
white-space: nowrap;
}
#txModal #advancedTaxSection .taxAdvPickerLabel,
#txModal #advancedTaxSection .taxAdvField .taxAdvStaticLabel{
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 4px;
width: auto;
margin: 0 0 18px;
padding: 0;
min-height: 0;
height: auto;
border: 0;
background: transparent;
color: var(--_tx-modal-label);
font-family: "Inter", var(--ct-font-sans);
font-size: 10.5px;
font-weight: var(--_tx-modal-label-weight);
line-height: 1.2;
letter-spacing: .012em;
text-align: left;
box-shadow: none;
}
#txModal #advancedTaxSection .taxAdvPickerLabel{
cursor: pointer;
}
#txModal #advancedTaxSection .taxAdvField .taxAdvStaticLabel{
cursor: default;
}
#txModal #advancedTaxSection .taxAdvPickerLabel:hover,
#txModal #advancedTaxSection .taxAdvPickerLabel:focus-visible{
color: #3C4552;
box-shadow: none;
outline: 0;
}
#txModal #advancedTaxSection .taxAdvSource > label::after,
#txModal #advancedTaxSection #taxDetailField > label::after,
#txModal #advancedTaxSection #taxAutoPlaceField > label::after{
content: "";
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
opacity: .58;
transform: translateY(1px);
}
#txModal #advancedTaxSection .assetPicker{
width: 100%;
min-height: 22px;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
#txModal #advancedTaxSection .assetPicker::after{
content: none;
display: none;
}
#txModal #advancedTaxSection .taxAdvField input,
#txModal #advancedTaxSection .taxAdvField select,
#txModal #advancedTaxSection .taxAdvField .assetPickerInput,
#txModal #advancedTaxSection .taxBankProofFields input{
width: 100%;
min-height: 22px;
height: auto;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--_tx-tax-value);
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_tx-tax-value-size);
font-weight: 430;
line-height: 1.25;
letter-spacing: 0;
box-shadow: none;
outline: 0;
}
#txModal #advancedTaxSection .taxAdvField input:focus,
#txModal #advancedTaxSection .taxAdvField select:focus,
#txModal #advancedTaxSection .taxAdvField .assetPickerInput:focus,
#txModal #advancedTaxSection .taxBankProofFields input:focus{
box-shadow: none;
}
#txModal #advancedTaxSection #taxSourcePickerInput,
#txModal #advancedTaxSection #taxDetailPickerInput,
#txModal #advancedTaxSection #taxAutoPlacePickerInput,
#txModal #advancedTaxSection #taxManualProofTypePickerInput,
#txModal #advancedTaxSection #taxManualProofNetworkPickerInput,
#txModal #advancedTaxSection #taxManualPlacePickerInput,
#txModal #advancedTaxSection #taxIdentifier,
#txModal #advancedTaxSection #taxManualProofId,
#txModal #advancedTaxSection #taxManualProofNote,
#txModal #advancedTaxSection #taxBankProofSourceAuto,
#txModal #advancedTaxSection #taxBankProofIdAuto,
#txModal #advancedTaxSection #taxBankProofSourceManual,
#txModal #advancedTaxSection #taxBankProofIdManual{
color: var(--_tx-tax-picker-value);
}
#txModal #advancedTaxSection .taxAdvField input::placeholder,
#txModal #advancedTaxSection .taxBankProofFields input::placeholder{
color: #9B9A9A;
opacity: 1;
}
#txModal #advancedTaxSection #taxIdentifier::placeholder{
color: #B3B3B3;
font-size: calc(var(--_tx-tax-value-size) * .855);
font-weight: 369;
}
#txModal #advancedTaxSection #taxManualProofId::placeholder,
#txModal #advancedTaxSection #taxManualProofNetworkCustom::placeholder,
#txModal #advancedTaxSection #taxManualProofNote::placeholder{
color: #B3B3B3;
font-size: calc(var(--_tx-tax-value-size) * .855);
font-weight: 369;
}
#txModal #advancedTaxSection #taxAutoMetaGrid .taxAdvSource{
grid-column: 1;
grid-row: 1;
}
#txModal #advancedTaxSection #taxAutoMetaGrid{
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--_tx-tax-pair-col-gap);
}
#txModal #advancedTaxSection #taxAutoMetaGrid #taxDetailField,
#txModal #advancedTaxSection #taxAutoMetaGrid #taxWalletChainField{
grid-column: 2;
grid-row: 1;
}
#txModal #advancedTaxSection #taxAutoMetaGrid #taxAutoPlaceField{
grid-column: 1;
grid-row: 2;
margin-top: var(--_tx-tax-second-row-shift);
}
#txModal #advancedTaxSection #taxAutoMetaGrid #taxIdentifierField{
grid-column: 2;
grid-row: 2;
margin-top: var(--_tx-tax-second-row-shift);
}
#txModal #advancedTaxSection #taxAutoMetaGrid[data-tax-source="wallet"] #taxWalletChainField{
grid-column: 2;
grid-row: 2;
margin-top: var(--_tx-tax-second-row-shift);
}
#txModal #advancedTaxSection #taxAutoMetaGrid #taxWalletSoon{
grid-column: 1 / -1;
}
#txModal #advancedTaxSection #taxAutoMetaGrid[data-tax-source="wallet"] #taxWalletSoon{
grid-column: 2;
grid-row: 2;
margin-top: var(--_tx-tax-second-row-shift);
}
#txModal #advancedTaxSection #taxAutoMetaGrid[data-tax-source="exchange"][data-tax-csv-state="empty"] #taxWalletSoon{
grid-column: 2;
grid-row: 2;
margin-top: var(--_tx-tax-second-row-shift);
}
#txModal #advancedTaxSection .taxWalletSoonRow{
display: flex;
align-items: center;
min-height: 22px;
gap: 8px;
flex-wrap: wrap;
}
#txModal #advancedTaxSection .taxWalletConnectAction{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 0 12px;
border: 1px solid var(--_tx-tax-action-setup-border);
border-radius: var(--_tx-tax-action-radius);
background: var(--_tx-tax-action-setup-bg);
color: var(--_tx-tax-action-setup-text);
font-family: "Inter", var(--ct-font-sans);
font-size: 12.5px;
font-weight: 420;
line-height: 1;
letter-spacing: 0;
white-space: nowrap;
box-shadow: var(--_tx-tax-action-ghost-shadow);
transform: translateY(-10px);
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
#txModal #advancedTaxSection .taxWalletConnectAction[hidden]{
display: none;
}
#txModal #advancedTaxSection .taxWalletConnectAction:hover,
#txModal #advancedTaxSection .taxWalletConnectAction:focus-visible{
background: var(--_tx-tax-action-setup-bg-hover);
border-color: var(--_tx-tax-action-setup-border-hover);
color: var(--_tx-tax-action-setup-text-hover);
outline: 0;
}
#txModal #advancedTaxSection .taxAutoBankProofBox{
grid-column: 1 / -1;
grid-row: 3;
align-self: start;
margin-top: 0;
padding-top: 0;
}
#txModal #advancedTaxSection .taxBankProofBox{
display: grid;
gap: 14px;
color: var(--_tx-tax-muted);
}
#txModal #advancedTaxSection .taxAutoBankProofBox{
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--_tx-tax-pair-col-gap);
row-gap: 12px;
align-items: start;
position: relative;
min-height: 30px;
overflow: visible;
}
#txModal #advancedTaxSection .taxBankProofToggle{
display: inline-flex;
align-items: center;
justify-self: start;
gap: 7px;
width: max-content;
max-width: 100%;
min-height: 28px;
margin: 2px 0 0;
padding: 0 10px;
border: 1px solid var(--_tx-modal-setting-row-border);
border-radius: 10px;
background: var(--_tx-modal-setting-row-bg);
color: #67717E;
font-size: 10.5px;
font-weight: 500;
line-height: normal;
box-shadow: none;
cursor: pointer;
}
#txModal #advancedTaxSection .taxAutoBankProofBox > .taxBankProofToggle{
grid-column: 1;
grid-row: 1;
margin-left: 0;
}
#txModal #advancedTaxSection .taxAutoBankProofBox > .taxBankProofFields{
position: absolute;
top: 0;
left: var(--_tx-tax-pair-second-col-x);
width: var(--_tx-tax-pair-col-w);
padding-top: 0;
z-index: 2;
}
#txModal #advancedTaxSection .taxAutoBankProofBox > .taxBankProofActions{
position: absolute;
top: 58px;
left: var(--_tx-tax-pair-second-col-x);
width: var(--_tx-tax-pair-col-w);
}
#txModal #advancedTaxSection .taxBankProofToggle input{
flex: 0 0 auto;
width: 13px;
height: 13px;
margin: 3px 3px 3px 4px;
accent-color: #6E747C;
cursor: pointer;
}
#txModal #advancedTaxSection .taxBankProofToggle input:focus,
#txModal #advancedTaxSection .taxBankProofToggle input:focus-visible{
outline: none;
box-shadow: none;
}
#txModal #advancedTaxSection .taxBankProofFields{
display: grid;
gap: 12px;
padding-top: 2px;
}
#txModal #advancedTaxSection .taxBankProofFields .taxAdvStaticLabel{
margin-bottom: var(--_tx-tax-bank-label-gap);
}
#txModal #advancedTaxSection .taxBankProofFields input{
font-size: var(--_tx-tax-bank-field-size);
font-weight: var(--_tx-tax-bank-field-weight);
}
#txModal #advancedTaxSection .taxBankProofFields input::placeholder{
font-size: var(--_tx-tax-bank-placeholder-size);
font-weight: var(--_tx-tax-bank-placeholder-weight);
}
#txModal #advancedTaxSection .taxBankProofFields .taxManualProofGrid{
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
#txModal #advancedTaxSection .taxBankProofActions{
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
#txModal #advancedTaxSection .taxBankProofStatus{
color: var(--_tx-tax-muted);
}
#txModal #advancedTaxSection .taxBankProofStatus.good{
color: var(--_tx-tax-status-approved-text);
}
#txModal #advancedTaxSection .taxBankProofStatus.bad{
color: var(--_tx-tax-status-rejected-text);
}
#txModal #advancedTaxSection .taxTransferCsvNotice[hidden]{
display: none;
}
#txModal #advancedTaxSection .taxTransferCsvNotice{
display: flex;
align-items: center;
gap: 10px;
width: 100%;
margin: 22px 0 0;
padding: 8px 12px;
border: 1px solid var(--_tx-transfer-csv-notice-border);
border-radius: 14px;
background: var(--_tx-transfer-csv-notice-bg);
color: var(--_tx-transfer-csv-notice-text);
font-family: "Inter", var(--ct-font-sans);
font-size: 12px;
font-weight: 420;
line-height: 1.35;
}
#txModal #advancedTaxSection .taxTransferCsvNoticeIcon{
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 18px;
width: 18px;
height: 18px;
border-radius: 999px;
background: var(--_tx-transfer-csv-notice-icon-bg);
color: var(--_tx-transfer-csv-notice-icon-text);
font-size: 11px;
font-weight: 510;
line-height: 1;
}
#txModal #advancedTaxSection .taxTransferCsvNoticeText{
min-width: 0;
color: var(--_tx-transfer-csv-notice-text);
}
#txModal #advancedTaxSection .taxTransferCsvNoticeStrong{
font-weight: 560;
}
#txModal #advancedTaxSection .taxTransferCsvNoticeLink{
display: inline-flex;
align-items: center;
gap: 5px;
flex: 0 0 auto;
margin-left: auto;
padding: 0;
border: 0;
background: transparent;
color: var(--_tx-tax-action-secondary-text);
font-family: "Inter", var(--ct-font-sans);
font-size: 12px;
font-weight: 430;
line-height: 1.35;
white-space: nowrap;
cursor: pointer;
box-shadow: none;
}
#txModal #advancedTaxSection .taxTransferCsvNoticeLink::after{
content: "";
flex: 0 0 12px;
width: 12px;
height: 12px;
background: currentColor;
opacity: .72;
-webkit-mask: var(--_tx-tax-external-icon) center / contain no-repeat;
mask: var(--_tx-tax-external-icon) center / contain no-repeat;
}
#txModal #advancedTaxSection .taxTransferCsvNoticeLink:hover,
#txModal #advancedTaxSection .taxTransferCsvNoticeLink:focus-visible{
color: var(--_tx-tax-action-secondary-text-hover);
text-decoration: underline;
text-underline-offset: 3px;
outline: 0;
}
#txModal #advancedTaxSection .taxTransferCsvNotice:not([hidden]) + .taxEvidenceBar{
margin-top: 16px;
}
#txModal #advancedTaxSection .taxEvidenceBar{
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-top: 30px;
}
#txModal #advancedTaxSection .taxEvidenceActionHintWrap{
position: relative;
display: inline-flex;
align-items: center;
}
#txModal #advancedTaxSection .taxEvidenceAction{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--_tx-tax-action-h);
padding: 0 17px;
border: 1px solid transparent;
border-radius: var(--_tx-tax-action-radius);
font-family: "Inter", var(--ct-font-sans);
font-size: 13px;
font-weight: 470;
line-height: 1;
letter-spacing: 0;
white-space: nowrap;
text-decoration: none;
box-shadow: none;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
#txModal #advancedTaxSection .taxEvidenceAction:disabled{
opacity: .58;
cursor: not-allowed;
box-shadow: none;
}
#txModal #advancedTaxSection .taxEvidenceActionTooltip{
position: absolute;
left: 50%;
bottom: calc(100% + 9px);
z-index: 30;
width: max-content;
max-width: 245px;
padding: 8px 10px;
border: 1px solid #E3E6EA;
border-radius: calc(var(--_tx-type-chip-radius) * .75);
background: rgba(255, 255, 255, .98);
color: #69727F;
font-family: "Inter", var(--ct-font-sans);
font-size: 11.5px;
font-weight: 430;
line-height: 1.35;
letter-spacing: 0;
text-align: left;
white-space: normal;
box-shadow: 0 10px 26px rgba(31, 43, 62, .09);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(-50%, 4px);
transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}
#txModal #advancedTaxSection .taxEvidenceActionTooltip::after{
content: "";
position: absolute;
left: 50%;
bottom: -5px;
width: 8px;
height: 8px;
border-right: 1px solid #E3E6EA;
border-bottom: 1px solid #E3E6EA;
background: rgba(255, 255, 255, .98);
transform: translateX(-50%) rotate(45deg);
}
#txModal #advancedTaxSection .taxEvidenceActionHintWrap.has-tooltip:hover .taxEvidenceActionTooltip,
#txModal #advancedTaxSection .taxEvidenceActionHintWrap.has-tooltip:focus-within .taxEvidenceActionTooltip{
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
#txModal #advancedTaxSection .taxEvidenceActionPrimary{
gap: 7px;
min-height: calc(var(--_tx-tax-action-h) + 2px);
background: var(--_tx-tax-action-primary-bg);
border-color: var(--_tx-tax-action-primary-border);
color: var(--_tx-tax-action-primary-text);
font-weight: 425;
}
#txModal #advancedTaxSection .taxEvidenceActionPrimary::before{
content: "";
display: inline-block;
width: var(--_tx-tax-action-icon-size);
height: var(--_tx-tax-action-icon-size);
flex: 0 0 var(--_tx-tax-action-icon-size);
background: currentColor;
transform: translateY(.2px);
-webkit-mask: var(--_tx-tax-search-icon) center / contain no-repeat;
mask: var(--_tx-tax-search-icon) center / contain no-repeat;
}
#txModal #advancedTaxSection .taxEvidenceActionPrimary:not(:disabled):hover,
#txModal #advancedTaxSection .taxEvidenceActionPrimary:not(:disabled):focus-visible{
background: var(--_tx-tax-action-primary-bg-hover);
border-color: var(--_tx-tax-action-primary-border-hover);
color: var(--_tx-tax-action-primary-text-hover);
box-shadow: var(--_tx-tax-action-primary-shadow-hover);
outline: 0;
}
#txModal #advancedTaxSection .taxEvidenceActionSecondary{
gap: 6px;
min-height: 30px;
padding: 0 10px;
border: 0;
border-radius: var(--_tx-tax-action-radius);
background: transparent;
color: var(--_tx-tax-action-secondary-text);
font-size: 12.5px;
font-weight: 415;
}
#txModal #advancedTaxSection .taxEvidenceActionSecondary::after{
content: "";
display: inline-block;
width: 11px;
height: 11px;
flex: 0 0 11px;
background: currentColor;
opacity: .82;
transform: translateY(-.5px);
-webkit-mask: var(--_tx-tax-external-icon) center / contain no-repeat;
mask: var(--_tx-tax-external-icon) center / contain no-repeat;
}
#txModal #advancedTaxSection .taxEvidenceActionSecondary:not(:disabled):hover,
#txModal #advancedTaxSection .taxEvidenceActionSecondary:not(:disabled):focus-visible{
color: var(--_tx-tax-action-secondary-text-hover);
background: var(--_tx-tax-action-secondary-bg-hover);
text-decoration: none;
outline: 0;
}
#txModal #advancedTaxSection .taxEvidenceActionCompact{
gap: 6px;
min-height: 30px;
padding: 0 11px;
border-color: var(--_tx-tax-action-ghost-border);
background: var(--_tx-tax-action-ghost-bg);
color: var(--_tx-tax-action-ghost-text);
font-size: 12.5px;
font-weight: 430;
box-shadow: var(--_tx-tax-action-ghost-shadow);
}
#txModal #advancedTaxSection .taxEvidenceActionCompact::after{
content: "";
display: inline-block;
width: 11px;
height: 11px;
flex: 0 0 11px;
background: currentColor;
opacity: .82;
transform: translateY(-.4px);
-webkit-mask: var(--_tx-tax-copy-icon) center / contain no-repeat;
mask: var(--_tx-tax-copy-icon) center / contain no-repeat;
}
#txModal #advancedTaxSection .taxEvidenceActionCompact:not(:disabled):hover,
#txModal #advancedTaxSection .taxEvidenceActionCompact:not(:disabled):focus-visible{
background: var(--_tx-tax-action-ghost-bg-hover);
border-color: var(--_tx-tax-action-ghost-border-hover);
color: var(--_tx-tax-action-secondary-text-hover);
box-shadow: 0 4px 10px rgba(31, 43, 62, .06);
outline: 0;
}
#txModal #advancedTaxSection #taxEvidenceMsg{
color: var(--_tx-tax-muted);
font-size: 12px;
}
#txModal #advancedTaxSection .taxManualProofWrap{
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
#txModal #advancedTaxSection .taxManualProofIdHead{
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px 12px;
min-width: 0;
margin: 0 0 18px;
}
#txModal #advancedTaxSection .taxManualProofIdHead .taxAdvStaticLabel{
margin: 0;
}
#txModal #advancedTaxSection .taxManualProofNoteToggle{
display: inline-flex;
align-items: center;
min-width: 0;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--_tx-tax-note-toggle-text);
font-family: "Inter", var(--ct-font-sans);
font-size: 10.5px;
font-weight: 520;
line-height: 1.2;
letter-spacing: 0;
cursor: pointer;
box-shadow: none;
transition: color .16s ease;
z-index: 1;
}
#txModal #advancedTaxSection .taxManualProofNoteToggle:hover,
#txModal #advancedTaxSection .taxManualProofNoteToggle:focus-visible,
#txModal #advancedTaxSection .taxManualProofNoteToggle.has-note{
color: var(--_tx-tax-note-toggle-text-active);
outline: 0;
}
#txModal #advancedTaxSection .taxManualProofNoteToggle.is-open{
color: var(--_tx-tax-muted);
}
#txModal #advancedTaxSection .taxManualProofNoteToggle[hidden]{
display: none;
}
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="exchange"] > .taxManualProofGrid,
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="blockchain"] > .taxManualProofGrid{
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--_tx-tax-pair-col-gap);
}
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="exchange"] > .taxManualProofGrid{
row-gap: var(--_tx-tax-row-gap);
}
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="exchange"] #taxManualProofTypeField{
grid-column: 1;
grid-row: 1;
}
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="exchange"] #taxManualPlaceField{
grid-column: 1;
grid-row: 2;
margin-top: var(--_tx-tax-second-row-shift);
}
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="exchange"] #taxManualProofIdField{
grid-column: 2;
grid-row: 1;
margin-top: 0;
}
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="exchange"] #taxManualProofNoteField{
grid-column: 1 / -1;
grid-row: 3;
}
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="blockchain"] #taxManualProofTypeField{
grid-column: 1;
grid-row: 1;
}
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="blockchain"] #taxManualProofNetworkField{
grid-column: 2;
grid-row: 1;
}
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="blockchain"] #taxManualProofNetworkCustomField[aria-hidden="false"]{
grid-column: 2;
grid-row: 2;
}
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="blockchain"] #taxManualPlaceField{
grid-column: 1;
grid-row: 2;
}
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="blockchain"] #taxManualProofIdField{
grid-column: 2;
grid-row: 2;
}
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="blockchain"] #taxManualProofNoteField{
grid-column: 1 / -1;
grid-row: 3;
}
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="blockchain"]:has(#taxManualProofNetworkCustomField[aria-hidden="false"]) #taxManualPlaceField{
grid-row: 2;
}
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="blockchain"]:has(#taxManualProofNetworkCustomField[aria-hidden="false"]) #taxManualProofIdField{
grid-row: 3;
}
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="blockchain"]:has(#taxManualProofNetworkCustomField[aria-hidden="false"]) #taxManualProofNoteField{
grid-row: 4;
}
#txModal #advancedTaxSection .taxManualPlaceCreate{
grid-column: 1 / -1;
}
#txModal #advancedTaxSection .taxManualPlaceCreateRow{
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: end;
}
#txModal #advancedTaxSection .taxManualPlaceCreateRow button{
min-height: 30px;
padding: 0 13px;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
}
#txModal #advancedTaxSection .taxManualPlaceCreateMeta{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px var(--_tx-tax-col-gap);
margin-top: 18px;
align-items: start;
}
#txModal #advancedTaxSection .taxBankProofSubsection{
display: grid;
gap: 14px;
margin-top: 27px;
}
#txModal #advancedTaxSection #taxBankProofBoxManual{
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--_tx-tax-pair-col-gap);
row-gap: 12px;
align-items: start;
min-height: 30px;
}
#txModal #advancedTaxSection #taxBankProofBoxManual > .taxBankProofToggle{
grid-column: 1;
grid-row: 1;
margin-left: 0;
}
#txModal #advancedTaxSection #taxBankProofBoxManual > .taxBankProofFields{
grid-column: 2;
grid-row: 1;
padding-top: 0;
}
#txModal #advancedTaxSection .taxManualProofActions{
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 16px;
}
#txModal #advancedTaxSection .taxManualProofErrors{
color: var(--_tx-tax-muted);
}
#txModal #advancedTaxSection .taxManualProofErrors.bad{
color: var(--_tx-tax-status-rejected-text);
}
#txModal #advancedTaxSection .taxManualProofErrors.good{
color: var(--_tx-tax-status-approved-text);
}
#txModal #advancedTaxSection .taxManualDuplicateWarn{
margin-top: 18px;
padding: 12px 14px;
border: 1px solid #E8D7A9;
border-radius: 12px;
background: #FFF8E8;
color: #7A6230;
}
#txModal #advancedTaxSection .taxManualDuplicateActions{
display: flex;
align-items: center;
gap: 9px;
flex-wrap: wrap;
margin-top: 10px;
}
#txModal #advancedTaxSection .taxManualDuplicateActions .primary,
#txModal #advancedTaxSection .taxManualDuplicateActions .ghost{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--_tx-tax-action-h);
padding: 0 14px;
border-radius: var(--_tx-tax-action-radius);
font-family: "Inter", var(--ct-font-sans);
font-size: 12.5px;
line-height: 1;
letter-spacing: 0;
white-space: nowrap;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
#txModal #advancedTaxSection .taxManualDuplicateActions .primary{
border: 1px solid var(--_tx-tax-action-primary-border);
background: var(--_tx-tax-action-primary-bg);
color: var(--_tx-tax-action-primary-text);
font-weight: 425;
box-shadow: none;
}
#txModal #advancedTaxSection .taxManualDuplicateActions .primary:hover,
#txModal #advancedTaxSection .taxManualDuplicateActions .primary:focus-visible{
border-color: var(--_tx-tax-action-primary-border-hover);
background: var(--_tx-tax-action-primary-bg-hover);
color: var(--_tx-tax-action-primary-text-hover);
box-shadow: var(--_tx-tax-action-primary-shadow-hover);
outline: 0;
}
#txModal #advancedTaxSection .taxManualDuplicateActions .ghost{
border: 0;
background: transparent;
color: var(--_tx-tax-action-secondary-text);
font-weight: 415;
box-shadow: none;
}
#txModal #advancedTaxSection .taxManualDuplicateActions .ghost:hover,
#txModal #advancedTaxSection .taxManualDuplicateActions .ghost:focus-visible{
background: var(--_tx-tax-action-secondary-bg-hover);
color: var(--_tx-tax-action-secondary-text-hover);
outline: 0;
}
#txModal #advancedTaxSection .taxEvidenceCandidates{
--_tx-tax-candidate-bg: #FFFFFF;
--_tx-tax-candidate-border: #E1E6ED;
--_tx-tax-candidate-border-selected: #CFE1D4;
--_tx-tax-candidate-bg-selected: #F4FAF5;
--_tx-tax-candidate-text: #1F2633;
--_tx-tax-candidate-muted: #6D7582;
--_tx-tax-candidate-soft: #F5F8FB;
--_tx-tax-candidate-soft-border: #E3EAF2;
--_tx-tax-candidate-divider: #E4E8EE;
--_tx-tax-candidate-green-bg: #ECF7F0;
--_tx-tax-candidate-green-border: #CDE5D4;
--_tx-tax-candidate-green-text: #3E7650;
--_tx-tax-candidate-red-bg: #FCF0F1;
--_tx-tax-candidate-red-border: #EBCDD2;
--_tx-tax-candidate-red-text: #9B5560;
--_tx-tax-candidate-blue-bg: #F2F6FC;
--_tx-tax-candidate-blue-border: #D5DFEC;
--_tx-tax-candidate-blue-text: #546981;
--_tx-tax-candidate-shadow: 0 7px 18px rgba(31, 43, 62, .035);
display: flex;
flex-direction: column;
gap: 8px;
max-height: 248px;
margin-top: 16px;
padding: 0;
overflow: auto;
border: 0;
border-radius: 0;
background: transparent;
font-family: "Inter", var(--ct-font-sans);
}
#txModal #advancedTaxSection .taxEvidenceItem{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 9px 10px;
border: 1px solid #E4E6EA;
border-radius: 10px;
background: #FFFFFF;
}
#txModal #advancedTaxSection .taxEvidenceMismatchNotice{
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
justify-content: stretch;
gap: 8px 14px;
padding: 10px 12px;
}
#txModal #advancedTaxSection .taxEvidenceMismatchText{
display: grid;
gap: 5px;
min-width: 0;
color: #777D78;
}
#txModal #advancedTaxSection .taxEvidenceMismatchText .small{
display: block;
max-width: 610px;
line-height: 1.28;
}
#txModal #advancedTaxSection .taxEvidenceMismatchText strong{
color: #6C6F6B;
font-weight: 620;
}
#txModal #advancedTaxSection .taxEvidenceMismatchActions{
align-items: center;
justify-content: flex-end;
justify-self: end;
}
#txModal #advancedTaxSection .taxEvidenceMismatchActions .taxEvidenceConfirmBtn{
min-height: 26px;
padding: 0 12px;
font-size: 11px;
}
#txModal #advancedTaxSection .taxEvidenceMismatchList{
grid-column: 1 / -1;
margin-top: 0;
width: 100%;
}
#txModal #advancedTaxSection .taxEvidenceMismatchList .taxEvidenceCandidateRowCompact{
grid-template-columns: minmax(0, 1fr) auto;
}
#txModal #advancedTaxSection .taxEvidenceMismatchList .taxEvidenceCandidateCompactMain{
flex-wrap: wrap;
row-gap: 5px;
}
#txModal #advancedTaxSection .taxWalletProofSummary{
align-items: flex-start;
margin-top: 18px;
background: #FBFCFD;
}
#txModal #advancedTaxSection .taxEvidenceItem.taxEvidenceItemSelected{
border-color: #CFE1D4;
background: #F4FAF5;
}
#txModal #advancedTaxSection .taxEvidenceMeta{
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
min-width: 0;
}
#txModal #advancedTaxSection .taxWalletProofSummaryMeta{
flex: 1 1 auto;
min-width: 0;
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
#txModal #advancedTaxSection .taxEvidenceMeta .mono{
font-family: "Inter", var(--ct-font-sans);
font-size: 11px;
font-variant-numeric: tabular-nums;
}
#txModal #advancedTaxSection .taxWalletProofSummaryHash{
word-break: break-all;
white-space: normal;
}
#txModal #advancedTaxSection .taxEvidenceConfirmBtn{
flex: 0 0 auto;
min-height: 30px;
padding: 0 12px;
border: 1px solid var(--_tx-tax-action-ghost-border);
border-radius: var(--_tx-tax-action-radius);
background: var(--_tx-tax-action-ghost-bg);
color: var(--_tx-tax-action-ghost-text);
font-family: "Inter", var(--ct-font-sans);
font-size: 12px;
font-weight: 430;
line-height: 1;
white-space: nowrap;
box-shadow: var(--_tx-tax-action-ghost-shadow);
cursor: pointer;
}
#txModal #advancedTaxSection .taxEvidenceConfirmBtn:hover,
#txModal #advancedTaxSection .taxEvidenceConfirmBtn:focus-visible{
border-color: var(--_tx-tax-action-ghost-border-hover);
background: var(--_tx-tax-action-ghost-bg-hover);
color: var(--_tx-tax-action-secondary-text-hover);
outline: 0;
}
#txModal #advancedTaxSection .taxEvidenceCandidateRow{
--_tx-tax-action-icon-size: 10.5px;
display: grid;
gap: 8px;
padding: 9px 11px;
border: 1px solid var(--_tx-tax-candidate-border);
border-radius: 10px;
background: var(--_tx-tax-candidate-bg);
color: var(--_tx-tax-candidate-text);
box-shadow: var(--_tx-tax-candidate-shadow);
}
#txModal #advancedTaxSection .taxEvidenceCandidateRow.taxEvidenceItemSelected{
border-color: var(--_tx-tax-candidate-border-selected);
background: var(--_tx-tax-candidate-bg-selected);
}
#txModal #advancedTaxSection .taxEvidenceCandidateHead{
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
min-width: 0;
}
#txModal #advancedTaxSection .taxEvidenceCandidateIdentity{
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
flex-wrap: wrap;
}
#txModal #advancedTaxSection .taxEvidenceCandidateDirection{
display: inline-flex;
align-items: center;
justify-content: center;
width: 19px;
height: 19px;
flex: 0 0 19px;
padding: 0;
border: 1px solid var(--_tx-tax-candidate-blue-border);
border-radius: 6.5px;
background: var(--_tx-tax-candidate-blue-bg);
color: var(--_tx-tax-candidate-blue-text);
line-height: 1;
box-shadow: none;
}
#txModal #advancedTaxSection .taxEvidenceCandidateDirection svg{
width: 10px;
height: 10px;
stroke: currentColor;
fill: none;
stroke-width: 1.55;
stroke-linecap: round;
stroke-linejoin: round;
}
#txModal #advancedTaxSection .taxEvidenceCandidateDirection.is-in{
border-color: var(--_tx-tax-candidate-green-border);
background: var(--_tx-tax-candidate-green-bg);
color: var(--_tx-tax-candidate-green-text);
}
#txModal #advancedTaxSection .taxEvidenceCandidateDirection.is-out{
border-color: var(--_tx-tax-candidate-red-border);
background: var(--_tx-tax-candidate-red-bg);
color: var(--_tx-tax-candidate-red-text);
}
#txModal #advancedTaxSection .taxEvidenceCandidateAsset{
min-width: 0;
color: var(--_tx-tax-candidate-text);
font-family: "Inter", var(--ct-font-sans);
font-size: 16.2px;
font-weight: 640;
line-height: 1.05;
letter-spacing: 0;
}
#txModal #advancedTaxSection .taxEvidenceCandidateNetwork{
display: inline-flex;
align-items: baseline;
gap: 3px;
min-width: 0;
color: var(--_tx-tax-candidate-muted);
font-family: "Inter", var(--ct-font-sans);
font-size: 11px;
font-weight: 420;
line-height: 1.1;
white-space: nowrap;
}
#txModal #advancedTaxSection .taxEvidenceCandidateNetwork strong{
min-width: 0;
color: var(--_tx-tax-candidate-blue-text);
font-size: 11px;
font-weight: 520;
overflow: hidden;
text-overflow: ellipsis;
}
#txModal #advancedTaxSection .taxEvidenceCandidateTimestamp{
min-width: 0;
color: var(--_tx-tax-candidate-muted);
font-family: "Inter", var(--ct-font-sans);
font-size: 11.5px;
font-weight: 420;
line-height: 1.2;
white-space: nowrap;
}
#txModal #advancedTaxSection .taxEvidenceCandidateScore{
display: inline-flex;
align-items: baseline;
justify-content: flex-end;
gap: 5px;
min-width: 0;
color: var(--_tx-tax-candidate-muted);
font-family: "Inter", var(--ct-font-sans);
font-size: 10px;
font-weight: 430;
line-height: 1.1;
white-space: nowrap;
}
#txModal #advancedTaxSection .taxEvidenceCandidateScore span{
order: 2;
text-transform: lowercase;
}
#txModal #advancedTaxSection .taxEvidenceCandidateScore strong{
order: 1;
color: var(--_tx-tax-candidate-green-text);
font-size: 15.2px;
font-weight: 640;
line-height: 1;
font-variant-numeric: tabular-nums;
}
#txModal #advancedTaxSection .taxEvidenceCandidateMetrics{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
padding: 6px 0 7px;
border-top: 1px solid var(--_tx-tax-candidate-divider);
border-bottom: 1px solid var(--_tx-tax-candidate-divider);
}
#txModal #advancedTaxSection .taxEvidenceCandidateMetric{
display: flex;
align-items: baseline;
gap: 6px;
min-width: 0;
padding-right: 10px;
border-right: 1px solid var(--_tx-tax-candidate-divider);
white-space: nowrap;
}
#txModal #advancedTaxSection .taxEvidenceCandidateMetric:last-child{
padding-right: 0;
border-right: 0;
}
#txModal #advancedTaxSection .taxEvidenceCandidateMetric span{
color: var(--_tx-tax-candidate-muted);
font-size: 11px;
font-weight: 420;
line-height: 1.15;
flex: 0 0 auto;
}
#txModal #advancedTaxSection .taxEvidenceCandidateMetric strong{
min-width: 0;
color: var(--_tx-tax-candidate-text);
font-family: "Inter", var(--ct-font-sans);
font-size: 12.8px;
font-weight: 600;
line-height: 1.1;
font-variant-numeric: tabular-nums;
overflow: hidden;
text-overflow: ellipsis;
}
#txModal #advancedTaxSection .taxEvidenceCandidateFooter{
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
min-width: 0;
}
#txModal #advancedTaxSection .taxEvidenceCandidateTechMeta{
display: flex;
align-items: center;
gap: 11px;
min-width: 0;
flex-wrap: wrap;
}
#txModal #advancedTaxSection .taxEvidenceCandidateTechItem{
display: inline-flex;
align-items: center;
gap: 5px;
min-width: 0;
color: var(--_tx-tax-candidate-muted);
font-size: 11.5px;
font-weight: 420;
line-height: 1.2;
white-space: nowrap;
}
#txModal #advancedTaxSection .taxEvidenceCandidateTechItem strong{
min-width: 0;
color: var(--_tx-tax-candidate-muted);
font-family: "Inter", var(--ct-font-sans);
font-size: 11.5px;
font-weight: 470;
font-variant-numeric: tabular-nums;
overflow: hidden;
text-overflow: ellipsis;
}
#txModal #advancedTaxSection .taxEvidenceCandidates .walletTxPickerActions{
display: inline-flex;
align-items: center;
justify-content: flex-end;
flex: 0 0 auto;
gap: 6px;
flex-wrap: wrap;
}
#txModal #advancedTaxSection .taxEvidenceCandidateRow .taxEvidenceAction{
min-height: 25px;
padding: 0 9px;
font-size: 11px;
}
#txModal #advancedTaxSection .taxEvidenceCandidateRow .taxEvidenceActionPrimary{
min-height: 26px;
padding: 0 10px;
}
#txModal #advancedTaxSection .taxEvidenceCandidateRowCompact{
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
padding: 7px 9px;
box-shadow: none;
}
#txModal #advancedTaxSection .taxEvidenceCandidateRowExpanded{
grid-template-columns: 1fr;
align-items: stretch;
padding: 9px 11px;
box-shadow: var(--_tx-tax-candidate-shadow);
}
#txModal #advancedTaxSection .taxEvidenceCandidateCompactMain{
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
padding: 0;
border: 0;
background: transparent;
color: var(--_tx-tax-candidate-text);
font-family: "Inter", var(--ct-font-sans);
line-height: 1.15;
text-align: left;
}
#txModal #advancedTaxSection .taxEvidenceCandidateCompactMain:focus-visible{
outline: 1px solid color-mix(in srgb, var(--_tx-tax-candidate-blue-border) 68%, transparent);
outline-offset: 3px;
border-radius: 7px;
}
#txModal #advancedTaxSection .taxEvidenceCandidateRowCompact .taxEvidenceCandidateDirection{
width: 17px;
height: 17px;
flex-basis: 17px;
border-radius: 6px;
}
#txModal #advancedTaxSection .taxEvidenceCandidateRowCompact .taxEvidenceCandidateDirection svg{
width: 9px;
height: 9px;
}
#txModal #advancedTaxSection .taxEvidenceCandidateRowCompact .taxEvidenceCandidateAsset{
flex: 0 1 auto;
font-size: 13px;
font-weight: 620;
}
#txModal #advancedTaxSection .taxEvidenceCandidateRowCompact .taxEvidenceCandidateNetwork{
flex: 0 1 auto;
max-width: 120px;
font-size: 10.5px;
}
#txModal #advancedTaxSection .taxEvidenceCandidateRowCompact .taxEvidenceCandidateNetwork strong{
font-size: 10.5px;
}
#txModal #advancedTaxSection .taxEvidenceCandidateCompactDate{
flex: 0 1 auto;
min-width: 0;
color: var(--_tx-tax-candidate-muted);
font-size: 11px;
font-weight: 420;
line-height: 1.15;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#txModal #advancedTaxSection .taxEvidenceCandidateCompactAmount{
flex: 0 1 auto;
min-width: 0;
color: var(--_tx-tax-candidate-text);
font-size: 11.5px;
font-weight: 560;
font-variant-numeric: tabular-nums;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#txModal #advancedTaxSection .taxEvidenceCandidateCompactScore{
flex: 0 0 auto;
color: var(--_tx-tax-candidate-green-text);
font-size: 12px;
font-weight: 640;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
#txModal #advancedTaxSection .taxEvidenceCandidateCompactActions{
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
flex-wrap: nowrap;
}
#txModal #advancedTaxSection .taxEvidenceCandidateCompactPick{
min-height: 24px;
padding: 0 9px;
font-size: 10.5px;
}
#txModal #advancedTaxSection .taxEvidenceCandidateCompactDetailsButton{
min-height: 24px;
padding: 0 9px;
border-color: var(--_tx-tax-action-ghost-border);
background: transparent;
color: var(--_tx-tax-candidate-muted);
font-size: 10.5px;
font-weight: 430;
box-shadow: none;
}
#txModal #advancedTaxSection .taxEvidenceCandidateCompactDetailsButton:hover,
#txModal #advancedTaxSection .taxEvidenceCandidateCompactDetailsButton:focus-visible{
border-color: var(--_tx-tax-action-ghost-border-hover);
background: transparent;
color: var(--_tx-tax-action-secondary-text-hover);
outline: 0;
}
#txModal #advancedTaxSection .taxEvidenceCandidateCompactDetails{
display: grid;
grid-column: 1 / -1;
gap: 7px;
padding-top: 8px;
border-top: 1px solid var(--_tx-tax-candidate-divider);
}
#txModal #advancedTaxSection .taxEvidenceCandidateCompactDetails .taxEvidenceCandidateMetrics{
padding: 0 0 7px;
border-top: 0;
}
.fieldInvalid{
border-color: rgba(255,77,77,.55) !important;
box-shadow: 0 0 0 2px rgba(255,77,77,.18);
}
@media (max-width: 780px){
#txModal #advancedTaxSection{
max-width: 100%;
}
#txModal #advancedTaxSection .txTaxTopRow{
flex-direction: column;
align-items: stretch;
gap: 9px;
}
#txModal #advancedTaxSection .taxTabs{
flex-basis: auto;
width: 100%;
}
#txModal #advancedTaxSection .taxStatusRow{
justify-content: flex-start;
}
#txModal #advancedTaxSection .taxApprovedSummaryCard{
align-items: flex-start;
flex-wrap: wrap;
}
#txModal #advancedTaxSection .taxApprovedSummaryText{
flex: 1 1 calc(100% - 48px);
}
#txModal #advancedTaxSection .taxApprovedSummaryTitle,
#txModal #advancedTaxSection .taxApprovedSummaryMeta{
white-space: normal;
}
#txModal #advancedTaxSection .taxApprovedSummaryAction{
margin-left: 46px;
}
#txModal #advancedTaxSection .txTaxDivider{
margin: 17px 0 18px;
}
#txModal #advancedTaxSection .taxAdvGrid,
#txModal #advancedTaxSection .taxManualProofGrid,
#txModal #advancedTaxSection .taxManualPlaceCreateMeta{
grid-template-columns: 1fr;
gap: 18px;
}
#txModal #advancedTaxSection #taxAutoMetaGrid .taxAdvSource,
#txModal #advancedTaxSection #taxAutoMetaGrid #taxDetailField,
#txModal #advancedTaxSection #taxAutoMetaGrid #taxWalletChainField,
#txModal #advancedTaxSection #taxAutoMetaGrid #taxAutoPlaceField,
#txModal #advancedTaxSection #taxAutoMetaGrid #taxIdentifierField,
#txModal #advancedTaxSection #taxAutoMetaGrid #taxWalletSoon,
#txModal #advancedTaxSection .taxAutoBankProofBox,
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="exchange"] #taxManualProofTypeField,
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="exchange"] #taxManualPlaceField,
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="exchange"] #taxManualProofNoteField,
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="exchange"] #taxManualProofIdField,
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="blockchain"] #taxManualProofNetworkField,
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="blockchain"] #taxManualProofNetworkCustomField[aria-hidden="false"],
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="blockchain"] #taxManualPlaceField,
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="blockchain"] #taxManualProofIdField,
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="blockchain"] #taxManualProofNoteField{
grid-column: 1;
grid-row: auto;
}
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="exchange"] #taxManualProofNoteField,
#txModal #advancedTaxSection #taxManualProofWrap[data-proof-type="exchange"] #taxManualProofIdField{
margin-top: 0;
}
#txModal #advancedTaxSection .taxAutoBankProofBox{
grid-template-columns: 1fr;
min-height: 0;
overflow: visible;
padding-top: 0;
}
#txModal #advancedTaxSection #taxBankProofBoxManual{
grid-template-columns: 1fr;
min-height: 0;
}
#txModal #advancedTaxSection .taxAutoBankProofBox > .taxBankProofToggle,
#txModal #advancedTaxSection .taxAutoBankProofBox > .taxBankProofFields,
#txModal #advancedTaxSection .taxAutoBankProofBox > .taxBankProofActions,
#txModal #advancedTaxSection #taxBankProofBoxManual > .taxBankProofToggle,
#txModal #advancedTaxSection #taxBankProofBoxManual > .taxBankProofFields{
position: static;
width: auto;
grid-column: 1;
grid-row: auto;
}
#txModal #advancedTaxSection .taxAutoBankProofBox > .taxBankProofToggle{
margin-left: 0;
}
#txModal #advancedTaxSection .taxBankProofFields .taxManualProofGrid{
grid-template-columns: 1fr;
}
#txModal #advancedTaxSection .taxEvidenceBar{
gap: 12px;
margin-top: 24px;
}
#txModal #advancedTaxSection .taxTransferCsvNotice{
align-items: flex-start;
flex-wrap: wrap;
}
#txModal #advancedTaxSection .taxTransferCsvNoticeLink{
margin-left: 28px;
}
#txModal #advancedTaxSection .taxManualPlaceCreateRow,
#txModal #advancedTaxSection .taxEvidenceItem,
#txModal #advancedTaxSection .taxEvidenceCandidateRow{
grid-template-columns: 1fr;
align-items: stretch;
}
#txModal #advancedTaxSection .taxEvidenceItem{
flex-direction: column;
}
#txModal #advancedTaxSection .taxEvidenceCandidateHead,
#txModal #advancedTaxSection .taxEvidenceCandidateFooter{
grid-template-columns: 1fr;
}
#txModal #advancedTaxSection .taxEvidenceCandidateScore{
justify-content: flex-start;
}
#txModal #advancedTaxSection .taxEvidenceCandidateCompactMain{
flex-wrap: wrap;
}
#txModal #advancedTaxSection .taxEvidenceCandidateCompactPick{
justify-self: start;
}
#txModal #advancedTaxSection .taxEvidenceCandidateMetrics{
grid-template-columns: 1fr;
}
#txModal #advancedTaxSection .taxEvidenceCandidateMetric{
padding-right: 0;
padding-bottom: 10px;
border-right: 0;
border-bottom: 1px solid var(--_tx-tax-candidate-divider);
}
#txModal #advancedTaxSection .taxEvidenceCandidateMetric:last-child{
padding-bottom: 0;
border-bottom: 0;
}
#txModal #advancedTaxSection .taxEvidenceCandidates .walletTxPickerActions{
justify-content: flex-start;
}
}
#txModal .txDateTimePicker{
position: relative;
width: 100%;
}
#txModal #tTime{
display: none;
}
#txModal .txDateTimeTrigger{
position: relative;
display: grid;
align-items: start;
width: 100%;
min-height: 0;
height: auto;
box-sizing: border-box;
overflow: visible;
border-radius: 0;
border: 0;
background: transparent;
box-shadow: none;
}
#txModal .txDateDisplay{
display: flex;
align-items: baseline;
justify-self: start;
gap: 8px;
min-width: 0;
min-height: 39px;
padding-top: 4px;
box-sizing: border-box;
color: var(--_tx-modal-text);
font-family: "Inter", var(--ct-font-sans);
transition: opacity .12s ease;
pointer-events: none;
}
#txModal .txDateDisplayDate{
min-width: 0;
color: var(--_tx-modal-text);
font-size: var(--_tx-modal-value-size);
font-weight: var(--_tx-modal-value-weight);
line-height: 1.18;
white-space: nowrap;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
#txModal .txDateDisplayTime{
flex: 0 0 auto;
color: var(--_tx-modal-value-muted);
font-size: 11.5px;
font-weight: var(--_tx-modal-unit-weight);
line-height: 1.2;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
#txModal .txDateDisplayTime:empty{
display: none;
}
#txModal .txDateDisplay.is-empty .txDateDisplayDate{
color: var(--_tx-modal-placeholder);
font-weight: var(--_tx-modal-placeholder-weight);
}
#txModal .txDateTimeDisplayInput{
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
width: 100%;
min-width: 0;
border: 0;
background: transparent;
color: var(--_tx-modal-text);
font-family: "Inter", var(--ct-font-sans);
font-size: 15px;
font-weight: 720;
line-height: 1.2;
height: auto;
padding: 0;
opacity: 0;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
appearance: none;
-webkit-appearance: none;
}
#txModal .txDateTimeDisplayInput::placeholder{
color: var(--_tx-modal-muted);
opacity: 1;
}
#txModal .txDateTimeDisplayInput:focus{
outline: none;
opacity: 1;
background: var(--_tx-modal-surface);
box-shadow: none;
}
#txModal .txDateTimeTrigger:focus-within .txDateDisplay{
opacity: 0;
}
#txModal .txDateTimeOpenBtn{
width: auto;
height: auto;
display: inline-flex;
justify-self: start;
justify-content: flex-start;
border: 0;
border-radius: 0;
background: transparent;
margin: 0;
padding: 0;
cursor: pointer;
opacity: 1;
appearance: none;
-webkit-appearance: none;
background-image: none;
}
#txModal .txDateTimeTrigger:hover,
#txModal .txDateTimeTrigger:focus-within{
background: transparent;
}
#txModal .txDateTimePicker.is-open .txDateTimeTrigger{
outline: none;
box-shadow: none;
}
#txModal .txDateTimeOpenBtn:hover{
background-color: transparent;
}
#txModal .txDateTimePopover{
position: fixed;
z-index: 86;
width: 312px;
border: 1px solid var(--_dropdown-menu-border);
border-radius: 12px;
background: #FFFFFF;
box-shadow: var(--_dropdown-menu-shadow);
padding: 10px;
box-sizing: border-box;
overflow: visible;
}
#txModal .txDateTimePopoverInner{
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
align-items: start;
}
#txModal .txDatePanel{
border: 1px solid #EDF2F8;
border-radius: 10px;
background: #FFFFFF;
padding: 10px;
}
#txModal .txDateHeader{
display: grid;
grid-template-columns: 30px 1fr 30px;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
#txModal .txDateNavBtn{
min-height: 28px;
height: 28px;
border-radius: 8px;
border: 1px solid #E2E8F1;
background: #F9FBFE;
color: #5C687C;
font-size: 15px;
line-height: 1;
padding: 0;
}
#txModal .txDateMonthLabel{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
text-align: center;
border: 0;
background: transparent;
font-family: "Inter", var(--ct-font-sans);
font-size: 12px;
font-weight: 600;
color: #334155;
text-transform: capitalize;
cursor: pointer;
min-height: 28px;
height: 28px;
border-radius: 8px;
line-height: 1;
padding: 0 6px;
}
#txModal .txDateMonthLabel::after{
content: "▾";
font-size: 10px;
line-height: 1;
color: #8EA1BA;
opacity: .92;
transform: translateY(1px);
}
#txModal .txDateMonthLabel:hover,
#txModal .txDateMonthLabel:focus-visible{
outline: none;
background: #F3F8FF;
color: #2F7FBF;
}
#txModal .txDateWeekdays{
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-bottom: 6px;
}
#txModal .txDateWeekdays span{
text-align: center;
font-family: "Inter", var(--ct-font-sans);
font-size: 10px;
font-weight: 560;
color: #8693A6;
}
#txModal .txDateGrid{
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
#txModal .txDateMonthYearPanel{
display: grid;
gap: 10px;
padding-top: 2px;
}
#txModal .txDateYearGrid{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
}
#txModal .txDateMonthGrid{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
}
#txModal .txDateYearBtn,
#txModal .txDateMonthBtn{
min-height: 28px;
height: 28px;
border-radius: 8px;
border: 0;
background: transparent;
color: #4B5A70;
font-family: "Inter", var(--ct-font-sans);
font-size: 11px;
font-weight: 520;
line-height: 1;
padding: 0 6px;
}
#txModal .txDateYearBtn:hover,
#txModal .txDateYearBtn:focus-visible,
#txModal .txDateMonthBtn:hover,
#txModal .txDateMonthBtn:focus-visible{
outline: none;
background: #EDF5FF;
color: #2D8DD9;
}
#txModal .txDateYearBtn.is-selected,
#txModal .txDateMonthBtn.is-selected{
background: color-mix(in srgb, #EDF5FF 82%, #FFFFFF 18%);
color: #2B7FC3;
box-shadow: inset 0 0 0 1px rgba(173, 205, 238, .45);
}
#txModal .txDateCell{
min-height: 28px;
height: 28px;
border-radius: 8px;
border: 0;
background: transparent;
color: #374151;
font-family: "Inter", var(--ct-font-sans);
font-size: 11px;
font-weight: 500;
line-height: 1;
padding: 0;
}
#txModal .txDateCell:hover,
#txModal .txDateCell:focus-visible{
outline: none;
background: #EDF5FF;
color: #2D9AEB;
}
#txModal .txDateCell.is-outside{
color: #A5AFBD;
}
#txModal .txDateCell.is-today{
box-shadow: inset 0 0 0 1px rgba(151, 176, 208, .5);
color: #475569;
background: #F8FBFF;
}
#txModal .txDateCell.is-selected{
background: color-mix(in srgb, #EDF5FF 80%, #FFFFFF 20%);
color: #2D8DD9;
box-shadow: inset 0 0 0 1px rgba(173, 205, 238, .42);
}
#txModal .txTimePanel{
border: 1px solid #EDF2F8;
border-radius: 10px;
background: #FFFFFF;
padding: 10px 9px;
display: grid;
gap: 8px;
align-content: start;
}
#txModal .txTimeCols{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
}
#txModal .txTimeCol{
min-width: 0;
}
#txModal .txTimeColLabel{
margin-bottom: 6px;
text-align: center;
font-family: "Inter", var(--ct-font-sans);
font-size: 10px;
font-weight: 560;
color: #8693A6;
}
#txModal .txTimeList{
max-height: 196px;
overflow: auto;
padding: 0 1px;
display: grid;
gap: 4px;
}
#txModal .txTimeOption{
min-height: 26px;
height: 26px;
border-radius: 7px;
border: 0;
background: transparent;
color: #374151;
font-family: "Inter", var(--ct-font-sans);
font-size: 11px;
font-weight: 500;
line-height: 1;
padding: 0;
}
#txModal .txTimeOption:hover,
#txModal .txTimeOption:focus-visible{
outline: none;
background: #EDF5FF;
color: #2D9AEB;
}
#txModal .txTimeOption.is-selected{
background: color-mix(in srgb, #EDF5FF 80%, #FFFFFF 20%);
color: #2D8DD9;
box-shadow: inset 0 0 0 1px rgba(173, 205, 238, .42);
}
#txModal .txDateActions{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
margin-top: 10px;
}
#txModal .txDateActionBtn{
min-height: 28px;
border-radius: 8px;
border: 1px solid #DCE4EF;
background: #F8FBFF;
color: #5A667A;
font-family: "Inter", var(--ct-font-sans);
font-size: 11px;
font-weight: 560;
line-height: 1.1;
padding: 0 9px;
white-space: nowrap;
}
#txModal .txDateActionBtn:hover,
#txModal .txDateActionBtn:focus-visible{
outline: none;
border-color: #CBD9EC;
background: #EFF5FD;
color: #425269;
}
@media (max-width: 760px){
#txModal .txDateTimePopover{
width: min(94vw, 312px);
}
#txModal .txDateTimePopoverInner{
grid-template-columns: 1fr;
}
#txModal .txTimeList{
max-height: 132px;
}
}
#txModal #taxSource,
#txModal #taxDetail,
#txModal #taxAutoPlacePreset,
#txModal #taxWalletChainSelect,
#txModal #taxManualProofType,
#txModal #taxManualProofNetwork,
#txModal #taxManualPlaceId,
#txModal #taxManualPlaceKind,
#txModal #taxManualPlaceProvider{
line-height: 1;
padding-top: 8px;
padding-bottom: 6px;
}
.modalBody{ padding: 14px; }
#csvImportModal{
z-index: 72;
--_csv-import-air-width: 1010px;
--_csv-import-air-expanded-width: 1210px;
--_csv-import-air-height: 581px;
--_csv-import-air-expanded-height: 655px;
--_csv-import-air-expanded-shift: 37px;
--_csv-import-air-y: -70px;
--_csv-import-air-radius: 33px;
--_csv-import-air-pad-top: 40px;
--_csv-import-air-pad-x: 49px;
--_csv-import-air-pad-bottom: 25px;
--_csv-import-air-gap: 15px;
--_csv-import-air-header-h: 59px;
--_csv-import-air-body-gap: 32px;
--_csv-import-air-left-w: 428px;
--_csv-import-air-expanded-left-w: 628px;
--_csv-import-air-right-w: 452px;
--_csv-import-preview-h: 360px;
--_csv-import-preview-drop: 30px;
--_csv-import-air-footer-h: 50px;
--_csv-import-air-text: #18202D;
--_csv-import-air-text-soft: #687382;
--_csv-import-air-muted: #838E9D;
--_csv-import-air-kicker: #7C8796;
--_csv-import-air-dark: #172033;
--_csv-import-air-dark-hover: #111827;
--_csv-import-air-divider: #E6EBF0;
--_csv-import-air-green-bg: #F4F7F5;
--_csv-import-air-green-border: #DEE8E1;
--_csv-import-air-green-text: #3F6D4D;
--_csv-import-air-green-dot: #4B7D5A;
--_csv-import-air-warning-bg: #FFF4DD;
--_csv-import-air-warning-text: #A76713;
--_csv-import-air-error-bg: #FFECEC;
--_csv-import-air-error-text: #B74444;
--_csv-import-air-focus: 0 0 0 2.7px rgba(23, 32, 51, .12);
--_csv-import-air-overlay-pad-top: calc(var(--stickyTop, 0px) + 18px);
--_csv-import-air-overlay-pad-x: 16px;
--_csv-import-air-overlay-pad-bottom: 18px;
}
#csvImportModal.modalOverlay{
align-items: center;
overflow-y: auto;
overscroll-behavior: contain;
padding:
var(--_csv-import-air-overlay-pad-top)
var(--_csv-import-air-overlay-pad-x)
var(--_csv-import-air-overlay-pad-bottom);
background: var(--_modal-overlay-bg);
backdrop-filter: var(--_modal-overlay-filter);
-webkit-backdrop-filter: var(--_modal-overlay-filter);
}
#csvImportModal .csvImportCard{
position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: var(--_csv-import-air-gap);
width: min(var(--_csv-import-air-width), 100%);
height: var(--_csv-import-air-height);
min-height: 0;
max-height: calc(100dvh - (var(--_csv-import-air-overlay-pad-top) + var(--_csv-import-air-overlay-pad-bottom)));
margin: 0 auto;
padding: var(--_csv-import-air-pad-top) var(--_csv-import-air-pad-x) var(--_csv-import-air-pad-bottom);
border: 0;
border-radius: var(--_csv-import-air-radius);
background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%);
box-shadow: 0 29px 59px rgba(7, 17, 31, .33);
color: var(--_csv-import-air-text);
font-family: "Inter", var(--ct-font-sans);
overflow: hidden;
top: var(--_csv-import-air-y);
}
#csvImportModal.csvImportModeVisible{
--_csv-import-air-width: var(--_csv-import-air-expanded-width);
--_csv-import-air-height: var(--_csv-import-air-expanded-height);
--_csv-import-air-left-w: var(--_csv-import-air-expanded-left-w);
}
#csvImportModal.csvImportModeVisible.csvImportModeChosen{
--_csv-import-air-left-w: 308px;
--_csv-import-air-right-w: 772px;
}
#csvImportModal.csvImportModeVisible .csvImportCard{
top: calc(var(--_csv-import-air-y) + var(--_csv-import-air-expanded-shift));
}
#csvImportModal .csvImportModalHead{
position: relative;
top: -5px;
display: flex;
flex: 0 0 auto;
align-items: flex-start;
justify-content: space-between;
min-height: var(--_csv-import-air-header-h);
gap: 16px;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
#csvImportModal .csvImportModalTitle{
color: var(--_csv-import-air-text);
font-family: "Inter", var(--ct-font-sans);
font-size: 43px;
font-weight: 800;
line-height: 1.08;
letter-spacing: 0;
}
#csvImportModal .csvImportModalCloseBtn{
display: inline-flex;
align-items: center;
justify-content: center;
width: 41px;
min-width: 41px;
height: 41px;
min-height: 41px;
padding: 0;
border: 1px solid #E0E5EB;
border-radius: 50%;
background: #F2F4F6;
color: #687382;
box-shadow: none;
cursor: pointer;
transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
#csvImportModal .csvImportModalCloseBtn:hover,
#csvImportModal .csvImportModalCloseBtn:focus-visible{
background: #E9EDF1;
border-color: #D5DCE4;
color: #303A48;
outline: none;
}
#csvImportModal .csvImportModalCloseIcon{
width: 19px;
height: 19px;
display: block;
}
#csvImportModal .csvImportModalCloseIcon path{
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
}
#csvImportModal .csvImportBody{
position: relative;
top: -25px;
display: grid;
grid-template-columns: minmax(0, var(--_csv-import-air-left-w)) minmax(0, var(--_csv-import-air-right-w));
justify-content: space-between;
gap: var(--_csv-import-air-body-gap);
flex: 1 1 auto;
min-height: 0;
overflow: visible;
padding: 0;
background: transparent;
color: var(--_csv-import-air-text);
}
#csvImportModal .csvImportUploadZone{
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
min-height: 0;
gap: 20px;
position: relative;
top: -12px;
}
#csvImportModal .csvImportIntro{
width: min(398px, 100%);
margin: 0;
color: var(--_csv-import-air-text-soft);
font-size: 16.8px;
font-weight: 500;
line-height: 1.45;
}
#csvImportModal .csvImportDropzone{
display: flex;
align-items: center;
gap: 22px;
min-height: 89px;
padding: 0;
border: 1px solid transparent;
border-radius: 25px;
background: transparent;
box-shadow: none;
text-align: left;
transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
#csvImportModal .csvImportDropzone.isDrag{
border-color: #CAD3DE;
background: rgba(255, 255, 255, .54);
box-shadow: inset 0 0 0 1px rgba(23, 32, 51, .04);
}
#csvImportModal.csvImportHasFile .csvImportDropzone{
border-color: transparent;
background: transparent;
}
#csvImportModal .csvImportUploadMark{
display: inline-flex;
align-items: center;
justify-content: center;
width: 70px;
min-width: 70px;
height: 70px;
padding: 0;
border: 0;
border-radius: 23px;
background: var(--_csv-import-air-dark);
color: #FFFFFF;
font: inherit;
box-shadow: 0 14px 26px rgba(23, 32, 51, .14);
cursor: pointer;
transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
appearance: none;
}
#csvImportModal .csvImportUploadMark:hover,
#csvImportModal .csvImportUploadMark:focus-visible{
background: var(--_csv-import-air-dark-hover);
box-shadow: 0 15px 28px rgba(23, 32, 51, .18);
outline: none;
}
#csvImportModal .csvImportUploadMark:focus-visible{
box-shadow: 0 15px 28px rgba(23, 32, 51, .18), var(--_csv-import-air-focus);
}
#csvImportModal .csvImportUploadGlyph{
display: block;
font-size: 35px;
font-weight: 500;
line-height: 1;
transform: translateY(-1.8px);
}
#csvImportModal .csvImportUploadCopy{
min-width: 0;
flex: 1 1 auto;
}
#csvImportModal .csvDropText{
color: var(--_csv-import-air-text);
font-family: "Inter", var(--ct-font-sans);
font-size: 26px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0;
}
#csvImportModal .csvDropSub{
width: min(398px, 100%);
margin-top: 6px;
color: var(--_csv-import-air-muted);
font-family: "Inter", var(--ct-font-sans);
font-size: 13.1px;
font-weight: 500;
line-height: 1.35;
}
#csvImportModal .csvImportInlinePickBtn{
display: inline;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: #526175;
font: inherit;
font-weight: 700;
line-height: inherit;
box-shadow: none;
cursor: pointer;
text-decoration: none;
transition: color .16s ease;
}
#csvImportModal .csvImportInlinePickBtn:hover,
#csvImportModal .csvImportInlinePickBtn:focus-visible{
color: var(--_csv-import-air-dark);
outline: none;
}
#csvImportModal .csvImportInlinePickBtn:focus-visible{
box-shadow: var(--_csv-import-air-focus);
border-radius: 5px;
}
#csvImportModal .csvImportSourceRow{
display: flex;
align-items: center;
gap: 11px;
min-height: 55px;
margin-top: 24px;
}
#csvImportModal .csvImportLabel{
margin: 0;
color: #8A94A2;
font-size: 11.5px;
font-weight: 700;
line-height: 1.2;
}
#csvImportModal #csvSourcePicker{
position: relative;
display: inline-flex;
width: 112px;
min-width: 112px;
height: 39px;
}
#csvImportModal #csvSourcePicker > #csvSource.csvImportNativeSelect{
position: absolute;
inset: 0;
width: 1px;
min-width: 1px;
height: 1px;
min-height: 1px;
margin: -1px;
padding: 0;
border: 0;
opacity: 0;
pointer-events: none;
overflow: hidden;
clip-path: inset(50%);
}
#csvImportModal #csvSourcePickerInput{
width: 100%;
height: 39px;
min-height: 39px;
padding: 0 27px 0 14px;
border: 1px solid var(--_csv-import-air-green-border);
border-radius: 17px;
background: var(--_csv-import-air-green-bg);
color: #233127;
font-family: "Inter", var(--ct-font-sans);
font-size: 13.1px;
font-weight: 640;
line-height: 1;
box-shadow: none;
caret-color: transparent;
cursor: pointer;
transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
#csvImportModal #csvSourcePickerInput:hover,
#csvImportModal #csvSourcePickerInput:focus,
#csvImportModal #csvSourcePickerInput:focus-visible,
#csvImportModal #csvSourcePicker.is-open #csvSourcePickerInput{
border-color: #CDDCCF;
background: #F8FAF8;
box-shadow: none;
outline: none;
}
#csvImportModal #csvSourcePicker::after{
content: "";
position: absolute;
top: 50%;
right: 14px;
width: 6px;
height: 6px;
pointer-events: none;
border-right: 1.2px solid #6F7C72;
border-bottom: 1.2px solid #6F7C72;
transform: translateY(-58%) rotate(45deg);
transition: transform .16s ease;
}
#csvImportModal #csvSourcePicker.is-open::after{
transform: translateY(-42%) rotate(225deg);
}
#csvImportModal #csvSourcePickerDropdown{
position: absolute;
top: 0;
left: 0;
right: auto;
z-index: 84;
min-width: 0;
padding: 6px;
border: 1px solid #E0E5EB;
border-radius: 14px;
background: #FFFFFF;
box-shadow: 0 16px 34px rgba(7, 17, 31, .14);
overflow: hidden;
transform: none;
}
#csvImportModal #csvSourcePicker .csvImportSourceOption{
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 31px;
height: auto;
padding: 7px 11px;
border: 0;
border-radius: 10px;
background: transparent;
color: #233127;
font-family: "Inter", var(--ct-font-sans);
font-size: 11.7px;
font-weight: 560;
line-height: 1.15;
text-align: left;
box-shadow: none;
cursor: pointer;
transition: background-color .14s ease, color .14s ease;
}
#csvImportModal #csvSourcePicker .csvImportSourceOption.is-selected{
background: var(--_csv-import-air-green-bg);
color: #172033;
}
#csvImportModal #csvSourcePicker .csvImportSourceOption:hover,
#csvImportModal #csvSourcePicker .csvImportSourceOption:focus-visible{
background: #F3F6FA;
color: #172033;
outline: none;
}
#csvImportModal #csvSourcePicker .csvImportSourceOption[disabled]{
color: #9AA4B2;
cursor: not-allowed;
background: transparent;
pointer-events: none;
}
#csvImportModal .csvImportStatusPill{
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 8px;
min-height: 32px;
padding: 9px 13px;
border-radius: 17px;
background: var(--_csv-import-air-green-bg);
color: var(--_csv-import-air-green-text);
font-size: 11.5px;
font-weight: 600;
line-height: 1.2;
opacity: 0;
visibility: hidden;
transition: opacity .16s ease, background-color .16s ease, color .16s ease;
}
#csvImportModal.csvImportHasFile .csvImportStatusPill{
opacity: 1;
visibility: visible;
}
#csvImportModal .csvImportStatusDot{
width: 6px;
min-width: 6px;
height: 6px;
border-radius: 50%;
background: var(--_csv-import-air-green-dot);
}
#csvImportModal.csvImportHasError .csvImportStatusPill{
background: var(--_csv-import-air-error-bg);
color: var(--_csv-import-air-error-text);
}
#csvImportModal.csvImportHasError .csvImportStatusDot{
background: var(--_csv-import-air-error-text);
}
#csvImportModal.csvImportHasWarning .csvImportStatusPill{
background: var(--_csv-import-air-warning-bg);
color: var(--_csv-import-air-warning-text);
}
#csvImportModal.csvImportHasWarning .csvImportStatusDot{
background: var(--_csv-import-air-warning-text);
}
#csvImportModal .csvImportStatusPill.isNeutral{
background: var(--_csv-import-air-green-bg);
color: var(--_csv-import-air-green-text);
}
#csvImportModal .csvImportStatusPill.isNeutral .csvImportStatusDot{
background: var(--_csv-import-air-green-dot);
}
#csvImportModal .csvCheckBlock{
display: flex;
flex-direction: column;
position: relative;
isolation: isolate;
min-width: 0;
min-height: 0;
gap: 14px;
padding: 65px 0 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
overflow: hidden;
}
#csvImportModal .csvImportPreviewHead{
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 40px;
}
#csvImportModal .csvImportPreviewTitleBlock{
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
gap: 5px;
}
#csvImportModal .csvImportPreviewKicker{
color: var(--_csv-import-air-kicker);
font-size: 9.2px;
font-weight: 800;
line-height: 1.2;
letter-spacing: .08em;
text-transform: uppercase;
}
#csvImportModal .csvImportSummary{
color: #1D2634;
font-family: "Inter", var(--ct-font-sans);
font-size: 19.1px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0;
}
#csvImportModal .csvImportEmptyHint{
max-width: 100%;
color: #7B8492;
font-family: "Inter", var(--ct-font-sans);
font-size: 10.7px;
font-weight: 600;
line-height: 1.35;
letter-spacing: 0;
white-space: nowrap;
}
#csvImportModal.csvImportHasFile .csvImportEmptyHint,
#csvImportModal.csvImportHasCheckResult .csvImportEmptyHint{
display: none;
}
#csvImportModal .csvFileName{
display: block;
flex: 0 1 auto;
width: auto;
max-width: min(288px, 62%);
min-width: 0;
min-height: 29px;
padding: 7px 11px;
border-radius: 14px;
background: #F3F6FA;
color: #4F5C6C;
font-family: "Inter", var(--ct-font-sans);
font-size: 10.7px;
font-weight: 800;
line-height: 1.15;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#csvImportModal:not(.csvImportHasFile) .csvFileName{
display: none;
}
#csvImportModal .csvImportTotals{
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 9px;
max-width: 100%;
min-height: 23px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
color: var(--_csv-import-air-text-soft);
font-family: "Inter", var(--ct-font-sans);
font-size: 10.7px;
font-weight: 700;
line-height: 1.25;
}
#csvImportModal .csvImportTotals::-webkit-scrollbar{
display: none;
}
#csvImportModal .csvImportTotals,
#csvImportModal .csvPreviewMono{
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
#csvImportModal .csvImportMetric{
display: inline-flex;
align-items: center;
flex: 0 0 auto;
gap: 3px;
min-height: 22px;
padding: 3px 5px;
border: 1px solid transparent;
border-radius: 999px;
white-space: nowrap;
transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
user-select: none;
}
#csvImportModal .csvImportMetric.isInteractive{
cursor: pointer;
}
#csvImportModal .csvImportMetric.isInteractive:hover,
#csvImportModal .csvImportMetric.isInteractive:focus-visible{
border-color: #E3E9EF;
background: #FAFBFC;
box-shadow: 0 5px 14px rgba(29, 38, 52, .045);
outline: none;
}
#csvImportModal .csvImportMetric.isActive{
border-color: #D4E2D8;
background: #F5FAF6;
box-shadow: inset 0 0 0 1px rgba(63, 109, 77, .055);
}
#csvImportModal .csvImportMetricStrong{
font-weight: 800;
}
#csvImportModal .csvMetricNew{
color: var(--_csv-import-air-green-dot);
font-weight: 800;
}
#csvImportModal .csvMetricDuplicate{
color: #8A6A32;
font-weight: 800;
}
#csvImportModal .csvMetricError{
color: var(--_csv-import-air-error-text);
font-weight: 800;
}
#csvImportModal .csvMetricSkipped{
color: #7B838D;
font-weight: 800;
}
#csvImportModal .csvMetricUpdate{
color: #506A8F;
font-weight: 800;
}
#csvImportModal .csvMetricReview{
color: #9A6A22;
font-weight: 800;
}
#csvImportModal .csvMetricKeep{
color: #6F7785;
font-weight: 800;
}
#csvImportModal .csvImportTotalsMeta{
flex-basis: 100%;
color: #798494;
font-family: "Inter", var(--ct-font-sans);
font-size: 9.9px;
font-weight: 600;
line-height: 1.35;
}
#csvImportModal .csvImportTotals:has(.csvImportTotalsMeta){
flex-wrap: wrap;
overflow: visible;
row-gap: 7px;
}
#csvImportModal .csvImportTotals:has(.csvImportTotalsMeta) .csvImportTotalsMeta{
flex: 0 0 100%;
max-width: 100%;
}
#csvImportModal .csvImportModeBlock{
--_csv-mode-border: #E0E6ED;
--_csv-mode-border-active: #C9D9CE;
--_csv-mode-bg: #FFFFFF;
--_csv-mode-bg-active: #F4F8F5;
--_csv-mode-text: #1D2634;
--_csv-mode-muted: #737F8D;
--_csv-mode-disabled: #8D97A4;
display: flex;
flex-direction: column;
width: 100%;
gap: 10px;
min-width: 0;
box-sizing: border-box;
padding: 11px 12px;
border: 1px solid rgba(224, 230, 237, .92);
border-radius: 15px;
background: rgba(255, 255, 255, .48);
}
#csvImportModal .csvImportModeBlock[hidden]{
display: none;
}
#csvImportModal .csvImportModeLabel{
color: #1D2634;
font-family: "Inter", var(--ct-font-sans);
font-size: 16.2px;
font-weight: 760;
line-height: 1.2;
letter-spacing: 0;
text-transform: none;
}
#csvImportModal .csvImportModeCards{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
min-width: 0;
}
#csvImportModal .csvImportModeCard{
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 11px;
min-width: 0;
min-height: 178px;
padding: 15px 16px;
border: 1px solid var(--_csv-mode-border);
border-radius: 8px;
background: var(--_csv-mode-bg);
color: var(--_csv-mode-text);
font-family: "Inter", var(--ct-font-sans);
text-align: left;
box-shadow: none;
cursor: pointer;
appearance: none;
transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
#csvImportModal .csvImportModeCard:hover,
#csvImportModal .csvImportModeCard:focus-visible{
border-color: #CCD5DF;
box-shadow: var(--_csv-import-air-focus);
outline: none;
}
#csvImportModal .csvImportModeCard.isSelected{
border-color: var(--_csv-mode-border-active);
background: var(--_csv-mode-bg-active);
box-shadow: inset 0 0 0 1px rgba(63, 109, 77, .08);
}
#csvImportModal .csvImportModeCardTitle{
display: block;
color: inherit;
font-size: 19.8px;
font-weight: 720;
line-height: 1.08;
letter-spacing: 0;
overflow-wrap: normal;
text-wrap: balance;
}
#csvImportModal .csvImportModeCardTitle::after{
content: "";
display: block;
width: calc(100% - 30px);
height: 1px;
margin: 13px 15px 0;
border-radius: 999px;
background: #DDE3EA;
}
#csvImportModal .csvImportModeCardText{
display: block;
color: var(--_csv-mode-muted);
font-size: 12.4px;
font-weight: 540;
line-height: 1.32;
letter-spacing: 0;
overflow-wrap: anywhere;
}
#csvImportModal .csvImportModeCompactText{
display: none;
}
#csvImportModal .csvImportModeCard.isSelected .csvImportModeCardTitle{
font-size: 22px;
font-weight: 800;
}
#csvImportModal .csvImportModeCard.isSelected .csvImportModeCardText{
font-size: 13.8px;
font-weight: 600;
}
#csvImportModal .csvImportModePlaceholder{
padding: 8px 10px;
border: 1px solid var(--_csv-import-air-green-border);
border-radius: 8px;
background: var(--_csv-import-air-green-bg);
color: var(--_csv-import-air-green-text);
font-family: "Inter", var(--ct-font-sans);
font-size: 10px;
font-weight: 650;
line-height: 1.3;
}
#csvImportModal .csvImportModePlaceholder[hidden]{
display: none;
}
#csvImportModal .csvImportModeBlock.isCompact{
gap: 8px;
}
#csvImportModal .csvImportModeBlock.isCompact .csvImportModeLabel{
font-size: 12.4px;
font-weight: 720;
}
#csvImportModal .csvImportModeBlock.isCompact .csvImportModeCards{
gap: 7px;
}
#csvImportModal .csvImportModeBlock.isCompact .csvImportModeCard{
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 14px;
border-radius: 999px;
gap: 0;
text-align: center;
}
#csvImportModal .csvImportModeBlock.isCompact .csvImportModeCardTitle,
#csvImportModal .csvImportModeBlock.isCompact .csvImportModeCardText{
display: none;
}
#csvImportModal .csvImportModeBlock.isCompact .csvImportModeCardTitle::after{
display: none;
}
#csvImportModal .csvImportModeBlock.isCompact .csvImportModeCompactText{
display: block;
color: inherit;
font-family: "Inter", var(--ct-font-sans);
font-size: 10.8px;
font-weight: 760;
line-height: 1.12;
}
#csvImportModal.csvImportModeChosen .csvImportModePlaceholder{
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: #778292;
font-size: 10.5px;
font-weight: 420;
}
#csvImportModal .csvPlaceMappingBlock{
--_csv-place-map-border: #DDE6EE;
--_csv-place-map-bg: #FFFFFF;
--_csv-place-map-text: #1D2634;
--_csv-place-map-muted: #7A8493;
display: flex;
flex-direction: column;
gap: 7px;
min-width: 0;
margin-top: 2px;
font-family: "Inter", var(--ct-font-sans);
}
#csvImportModal .csvPlaceMappingBlock[hidden]{
display: none;
}
#csvImportModal .csvPlaceMappingLabel{
color: var(--_csv-place-map-text);
font-size: 11.2px;
font-weight: 720;
line-height: 1.15;
}
#csvImportModal .csvPlaceMappingCard,
#csvImportModal .csvPlaceMappingSelectWrap{
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
padding: 10px 11px;
border: 1px solid var(--_csv-place-map-border);
border-radius: 10px;
background: var(--_csv-place-map-bg);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}
#csvImportModal .csvPlaceMappingSelectWrap{
position: relative;
flex-direction: row;
align-items: center;
gap: 11px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
#csvImportModal .csvPlaceMappingBlock.isFound{
--_csv-place-map-border: #D4E2D8;
--_csv-place-map-bg: #F6FAF7;
}
#csvImportModal .csvPlaceMappingBlock.isDraft{
--_csv-place-map-border: #E8D9B9;
--_csv-place-map-bg: #FFF8EA;
}
#csvImportModal .csvPlaceMappingValue{
color: var(--_csv-place-map-text);
font-size: 11.3px;
font-weight: 740;
line-height: 1.22;
}
#csvImportModal .csvPlaceMappingHint{
color: var(--_csv-place-map-muted);
font-size: 9.8px;
font-weight: 520;
line-height: 1.25;
}
#csvImportModal .csvPlaceMappingLink{
color: #2F6F46;
font: inherit;
font-weight: 650;
text-decoration: underline;
text-underline-offset: 2px;
}
#csvImportModal .csvPlaceMappingLink:hover,
#csvImportModal .csvPlaceMappingLink:focus-visible{
color: #24583B;
outline: none;
}
#csvImportModal .csvPlaceMappingSelectWrap span{
flex: 0 0 auto;
color: #8A94A2;
font-size: 11.5px;
font-weight: 700;
line-height: 1.2;
}
#csvImportModal .csvPlaceMappingSelect{
width: 100%;
min-width: 0;
height: 39px;
min-height: 39px;
padding: 0 31px 0 14px;
border: 1px solid var(--_csv-import-air-green-border);
border-radius: 17px;
background: var(--_csv-import-air-green-bg);
color: #233127;
font-family: "Inter", var(--ct-font-sans);
font-size: 13.1px;
font-weight: 640;
line-height: 1;
outline: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
#csvImportModal .csvPlaceMappingSelect:hover,
#csvImportModal .csvPlaceMappingSelect:focus,
#csvImportModal .csvPlaceMappingSelect:focus-visible{
border-color: #CDDCCF;
background: #F8FAF8;
box-shadow: none;
}
#csvImportModal .csvPlaceMappingSelectWrap::after{
content: "";
position: absolute;
top: 50%;
right: 14px;
width: 6px;
height: 6px;
pointer-events: none;
border-right: 1.2px solid #6F7C72;
border-bottom: 1.2px solid #6F7C72;
transform: translateY(-58%) rotate(45deg);
}
#csvImportModal.csvImportModeVisible .csvImportUploadZone{
justify-content: flex-start;
gap: 14px;
top: -2px;
padding-top: 66px;
}
#csvImportModal.csvImportModeVisible .csvCheckBlock{
gap: 14px;
padding-top: 65px;
}
#csvImportModal.csvImportModeVisible.csvImportModeChosen .csvCheckBlock{
height: calc(100% + var(--_csv-import-preview-drop));
}
#csvImportModal .csvPreviewWrap{
flex: 1 1 auto;
position: relative;
z-index: 0;
height: var(--_csv-import-preview-h);
min-height: 0;
max-height: var(--_csv-import-preview-h);
overflow: auto;
border: 0;
border-radius: 0;
background: #FFFFFF;
}
#csvImportModal .csvPreviewModeGate{
position: absolute;
inset: 46px 0 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
border-radius: 12px;
background: rgba(248, 250, 252, .80);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
pointer-events: auto;
}
#csvImportModal .csvPreviewModeGate[hidden]{
display: none;
}
#csvImportModal .csvPreviewModeGateCard{
position: relative;
z-index: 1;
width: min(382px, 100%);
padding: 24px 26px;
border: 1px solid rgba(218, 226, 235, .88);
border-radius: 19px;
background: #FFFFFF;
box-shadow: 0 18px 42px rgba(29, 38, 52, .10);
text-align: center;
}
#csvImportModal .csvPreviewModeGateTitle{
color: #1D2634;
font-family: "Inter", var(--ct-font-sans);
font-size: 18px;
font-weight: 800;
line-height: 1.2;
}
#csvImportModal .csvPreviewModeGateText{
margin-top: 10px;
color: #687382;
font-family: "Inter", var(--ct-font-sans);
font-size: 13px;
font-weight: 600;
line-height: 1.38;
}
#csvImportModal .csvPreviewModeGateTextStrong{
color: #1D2634;
font-size: 1.05em;
font-weight: 720;
}
#csvImportModal .csvPreviewModeGateHint{
margin-top: 12px;
color: #3F6D4D;
font-family: "Inter", var(--ct-font-sans);
font-size: 12.2px;
font-weight: 760;
line-height: 1.2;
}
#csvImportModal .csvPreviewLimitNote{
margin-top: 10px;
color: #1D2634;
font-family: "Inter", var(--ct-font-sans);
font-size: 10.2px;
font-weight: 400;
line-height: 1.3;
text-align: left;
}
#csvImportModal .csvPreviewLimitText{
min-width: 0;
}
#csvImportModal #csvPreviewTable .csvPreviewMoreRow,
#csvImportModal #csvPreviewTable .csvPreviewMoreRow:hover{
height: 56px;
background: transparent;
}
#csvImportModal #csvPreviewTable .csvPreviewMoreRow td{
height: 56px;
border-bottom: 0;
text-align: center;
background: transparent;
}
#csvImportModal .csvPreviewShowMoreBtn{
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-height: 32px;
padding: 0 12px;
border: 0;
border-radius: 14px;
background: transparent;
color: #6E7885;
font-family: "Inter", var(--ct-font-sans);
font-size: 11.2px;
font-weight: 440;
line-height: 1;
cursor: pointer;
box-shadow: none;
transition: background-color .16s ease, color .16s ease;
}
#csvImportModal .csvPreviewShowMoreBtn:hover,
#csvImportModal .csvPreviewShowMoreBtn:focus-visible{
color: #46515F;
background: rgba(247,248,250,.48);
outline: none;
}
#csvImportModal #csvPreviewTable{
width: 100%;
min-width: 452px;
border-collapse: collapse;
table-layout: fixed;
}
#csvImportModal #csvPreviewTable thead{
background: #FAFBFC;
}
#csvImportModal #csvPreviewTable th,
#csvImportModal #csvPreviewTable td{
height: 41px;
padding: 0 8px;
border-bottom: 1px solid #EEF1F5;
color: #293241;
font-family: "Inter", var(--ct-font-sans);
font-size: 9.95px;
font-weight: 500;
line-height: 1.25;
letter-spacing: 0;
text-align: left;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#csvImportModal #csvPreviewTable th{
height: 29px;
color: #77808F;
font-size: 8.4px;
font-weight: 600;
}
#csvImportModal #csvPreviewTable th:nth-child(1),
#csvImportModal #csvPreviewTable td:nth-child(1){ width: 84px; padding-left: 11px; }
#csvImportModal #csvPreviewTable th:nth-child(2),
#csvImportModal #csvPreviewTable td:nth-child(2){ width: 62px; font-weight: 600; color: #182033; }
#csvImportModal #csvPreviewTable th:nth-child(3),
#csvImportModal #csvPreviewTable td:nth-child(3){ width: 72px; color: #4B5565; }
#csvImportModal #csvPreviewTable th:nth-child(4),
#csvImportModal #csvPreviewTable td:nth-child(4){ width: 74px; }
#csvImportModal #csvPreviewTable th:nth-child(5),
#csvImportModal #csvPreviewTable td:nth-child(5){ width: 68px; }
#csvImportModal #csvPreviewTable th:nth-child(6),
#csvImportModal #csvPreviewTable td:nth-child(6){ width: 92px; }
#csvImportModal #csvPreviewTable.csvPreviewTableTxMode{
min-width: 608px;
}
#csvImportModal #csvPreviewTable.csvPreviewTableTxMode th,
#csvImportModal #csvPreviewTable.csvPreviewTableTxMode td{
height: 76px;
}
#csvImportModal #csvPreviewTable.csvPreviewTableTxMode th{
height: 30px;
}
#csvImportModal #csvPreviewTable.csvPreviewTableTxMode th:nth-child(1),
#csvImportModal #csvPreviewTable.csvPreviewTableTxMode td:nth-child(1){ width: 96px; }
#csvImportModal #csvPreviewTable.csvPreviewTableTxMode th:nth-child(2),
#csvImportModal #csvPreviewTable.csvPreviewTableTxMode td:nth-child(2){ width: 84px; }
#csvImportModal #csvPreviewTable.csvPreviewTableTxMode th:nth-child(3),
#csvImportModal #csvPreviewTable.csvPreviewTableTxMode td:nth-child(3){ width: 70px; }
#csvImportModal #csvPreviewTable.csvPreviewTableTxMode th:nth-child(4),
#csvImportModal #csvPreviewTable.csvPreviewTableTxMode td:nth-child(4){ width: 78px; }
#csvImportModal #csvPreviewTable.csvPreviewTableTxMode th:nth-child(5),
#csvImportModal #csvPreviewTable.csvPreviewTableTxMode td:nth-child(5){ width: 148px; }
#csvImportModal #csvPreviewTable.csvPreviewTableTxMode th:nth-child(6),
#csvImportModal #csvPreviewTable.csvPreviewTableTxMode td:nth-child(6){ width: 132px; }
#csvImportModal #csvPreviewTable tbody tr:nth-child(even){
background: #FBFCFE;
}
#csvImportModal #csvPreviewTable tbody tr:last-child td{
border-bottom: 0;
}
#csvImportModal #csvPreviewTable .csvPreviewCellRight{
text-align: right;
}
#csvImportModal .csvPreviewSide{
font-weight: 700;
}
#csvImportModal .csvPreviewSideBuy{
color: #23855A;
}
#csvImportModal .csvPreviewSideSell{
color: #B74444;
}
#csvImportModal .csvRowStatusPill{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 20px;
max-width: 100%;
padding: 5px 8px;
border-radius: 10px;
font-size: 9.2px;
font-weight: 600;
line-height: 1;
vertical-align: middle;
}
#csvImportModal .csvRowStatus-new{
background: #EAF7F0;
color: #23855A;
}
#csvImportModal .csvRowStatus-create{
background: #EAF7F0;
color: #23855A;
}
#csvImportModal .csvRowStatus-update{
background: #EDF4FB;
color: #506A8F;
}
#csvImportModal .csvRowStatus-review{
background: #FFF4DF;
color: #9A6A22;
}
#csvImportModal .csvRowStatus-keep{
background: #F3F6FA;
color: #687382;
}
#csvImportModal .csvRowStatus-duplicate{
background: var(--_csv-import-air-warning-bg);
color: var(--_csv-import-air-warning-text);
}
#csvImportModal .csvRowStatus-skipped{
background: #F3F6FA;
color: #687382;
}
#csvImportModal .csvRowStatus-error{
background: var(--_csv-import-air-error-bg);
color: var(--_csv-import-air-error-text);
}
#csvImportModal #csvPreviewTable.csvPreviewTableTxMode .csvPreviewTxCell{
white-space: normal;
overflow: hidden;
text-overflow: clip;
}
#csvImportModal .csvPreviewTxMain,
#csvImportModal .csvPreviewTxSub,
#csvImportModal .csvPreviewTxReason{
display: block;
min-width: 0;
max-width: 100%;
overflow: hidden;
}
#csvImportModal .csvPreviewTxMain{
text-overflow: ellipsis;
white-space: nowrap;
color: #1D2634;
font-size: 10px;
font-weight: 650;
line-height: 1.2;
}
#csvImportModal .csvPreviewTxMainWrap{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
white-space: normal;
overflow-wrap: normal;
}
#csvImportModal .csvPreviewTxSub{
margin-top: 3px;
color: #7D8795;
font-size: 9px;
font-weight: 560;
line-height: 1.2;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
white-space: normal;
overflow-wrap: anywhere;
}
#csvImportModal .csvPreviewTxReason{
margin-top: 4px;
color: #7D8795;
font-size: 8.8px;
font-weight: 560;
line-height: 1.18;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
white-space: normal;
overflow-wrap: anywhere;
}
#csvImportModal .csvPlaceDiffName{
color: #1D2634;
}
#csvImportModal .csvPreviewReviewBtn{
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 6px;
min-height: 22px;
padding: 0 9px;
border: 1px solid #E2E8EF;
border-radius: 999px;
background: #FFFFFF;
color: #506A8F;
font-family: "Inter", var(--ct-font-sans);
font-size: 8.8px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
#csvImportModal .csvPreviewReviewBtn:hover,
#csvImportModal .csvPreviewReviewBtn:focus-visible{
border-color: #CFDAE6;
background: #F7FAFD;
color: #314A6B;
outline: none;
}
#csvImportModal #csvPreviewTable.csvPreviewTableReviewMode{
min-width: 0;
}
#csvImportModal #csvPreviewTable.csvPreviewTableReviewMode thead{
display: none;
}
#csvImportModal #csvPreviewTable .csvPreviewFocusedRow,
#csvImportModal #csvPreviewTable .csvPreviewFocusedRow:hover{
background: #FFFFFF;
}
#csvImportModal #csvPreviewTable .csvPreviewFocusedRow td{
height: auto;
padding: 0;
border-bottom: 0;
white-space: normal;
overflow: visible;
text-overflow: clip;
vertical-align: top;
}
#csvImportModal .csvReviewFocused{
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
padding: 2px 0 10px;
}
#csvImportModal .csvReviewFocusedHead{
display: flex;
align-items: flex-start;
gap: 12px;
min-width: 0;
}
#csvImportModal .csvReviewTitle{
color: #1D2634;
font-family: "Inter", var(--ct-font-sans);
font-size: 12.2px;
font-weight: 800;
line-height: 1.2;
}
#csvImportModal .csvReviewSubtitle{
margin-top: 3px;
color: #7D8795;
font-family: "Inter", var(--ct-font-sans);
font-size: 9.5px;
font-weight: 600;
line-height: 1.25;
}
#csvImportModal .csvReviewBackBtn{
flex: 0 0 auto;
min-height: 28px;
padding: 0 12px;
border: 1px solid #D5DEE8;
border-radius: 999px;
background: #F4F7FA;
color: #293241;
font-family: "Inter", var(--ct-font-sans);
font-size: 9.4px;
font-weight: 780;
cursor: pointer;
box-shadow: 0 5px 14px rgba(29, 38, 52, .045);
transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
#csvImportModal .csvReviewBackBtn:hover,
#csvImportModal .csvReviewBackBtn:focus-visible{
border-color: #C4D0DD;
background: #EEF3F7;
color: #182033;
outline: none;
}
#csvImportModal .csvReviewCsvCard,
#csvImportModal .csvReviewCandidateCard{
min-width: 0;
padding: 12px;
border: 1px solid #E8EDF3;
border-radius: 8px;
background: #FFFFFF;
}
#csvImportModal .csvReviewCandidateCard.isSelected{
border-color: #C9D9CE;
background: #F5FAF6;
}
#csvImportModal .csvReviewFieldGrid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 12px;
row-gap: 0;
min-width: 0;
}
#csvImportModal .csvReviewCardHead{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
min-width: 0;
margin-bottom: 9px;
}
#csvImportModal .csvReviewCardHead .csvReviewCardTitle{
margin-bottom: 0;
}
#csvImportModal .csvReviewCardTitle{
margin-bottom: 8px;
color: #1D2634;
font-family: "Inter", var(--ct-font-sans);
font-size: 10.5px;
font-weight: 800;
line-height: 1.2;
}
#csvImportModal .csvReviewField{
display: grid;
grid-template-columns: minmax(74px, .8fr) minmax(0, 1.2fr);
gap: 8px;
min-width: 0;
padding: 5px 0;
border-top: 1px solid #F0F3F7;
font-family: "Inter", var(--ct-font-sans);
line-height: 1.25;
}
#csvImportModal .csvReviewFieldLabel{
color: #8A94A3;
font-size: 8.8px;
font-weight: 700;
}
#csvImportModal .csvReviewFieldValue{
min-width: 0;
color: #293241;
font-size: 9.4px;
font-weight: 650;
overflow-wrap: anywhere;
}
#csvImportModal .csvReviewCandidatesBlock{
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
#csvImportModal .csvReviewBlockTitle{
color: #1D2634;
font-family: "Inter", var(--ct-font-sans);
font-size: 10.5px;
font-weight: 780;
line-height: 1.2;
}
#csvImportModal .csvReviewCandidatesList{
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
#csvImportModal .csvReviewCandidateTop{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
min-width: 0;
margin-bottom: 8px;
}
#csvImportModal .csvReviewCandidateTitle{
color: #1D2634;
font-family: "Inter", var(--ct-font-sans);
font-size: 10.8px;
font-weight: 800;
line-height: 1.2;
}
#csvImportModal .csvReviewCandidateMeta{
margin-top: 2px;
color: #7D8795;
font-family: "Inter", var(--ct-font-sans);
font-size: 9px;
font-weight: 600;
line-height: 1.25;
}
#csvImportModal .csvReviewDiffs{
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
#csvImportModal .csvReviewDiffChip{
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 0 8px;
border-radius: 999px;
background: #FFF4DF;
color: #8A621F;
font-family: "Inter", var(--ct-font-sans);
font-size: 8.9px;
font-weight: 700;
line-height: 1;
}
#csvImportModal .csvReviewActions{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
#csvImportModal .csvReviewDecisionBtn{
min-height: 32px;
padding: 0 11px;
border: 1px solid #E0E6ED;
border-radius: 999px;
background: #FFFFFF;
color: #293241;
font-family: "Inter", var(--ct-font-sans);
font-size: 9.4px;
font-weight: 800;
cursor: pointer;
transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
#csvImportModal .csvReviewDecisionBtn:disabled{
cursor: default;
opacity: .48;
}
#csvImportModal .csvReviewDecisionBtn:hover,
#csvImportModal .csvReviewDecisionBtn:focus-visible{
border-color: #C9D5E2;
background: #F7FAFD;
outline: none;
}
#csvImportModal .csvReviewDecisionBtn.isUpdate{
color: #506A8F;
border-color: #C9D8E8;
background: #EDF4FB;
box-shadow: inset 0 0 0 1px rgba(80, 106, 143, .045);
}
#csvImportModal .csvReviewDecisionBtn.isCreate{
color: #2F7B55;
border-color: #CDE5D4;
background: #ECF7F0;
box-shadow: inset 0 0 0 1px rgba(47, 123, 85, .045);
}
#csvImportModal .csvReviewDecisionBtn.isKeep{
min-height: 28px;
padding: 0 12px;
border-color: #D5DEE8;
background: #F4F7FA;
color: #293241;
font-weight: 780;
box-shadow: 0 5px 14px rgba(29, 38, 52, .045);
}
#csvImportModal .csvReviewNoCandidates{
padding: 14px 12px;
border: 1px dashed #E1E7EE;
border-radius: 8px;
color: #7D8795;
font-family: "Inter", var(--ct-font-sans);
font-size: 10px;
font-weight: 650;
line-height: 1.3;
background: #FBFCFE;
}
#csvImportModal #csvPreviewTable .csvPreviewEmptyCell{
height: 224px;
padding: 0 30px;
color: #98A2B1;
font-size: 10.7px;
font-weight: 650;
line-height: 1.35;
text-align: center;
vertical-align: middle;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
#csvImportModal #csvPreviewTable:has(.csvPreviewMessageCell),
#csvImportModal #csvPreviewTable:has(.csvPreviewEmptyCell){
height: 100%;
}
#csvImportModal #csvPreviewTable:has(.csvPreviewMessageCell) tbody,
#csvImportModal #csvPreviewTable:has(.csvPreviewEmptyCell) tbody,
#csvImportModal #csvPreviewTable:has(.csvPreviewMessageCell) tr,
#csvImportModal #csvPreviewTable:has(.csvPreviewEmptyCell) tr{
height: 100%;
}
#csvImportModal #csvPreviewTable .csvPreviewMessageCell{
height: auto;
position: relative;
padding: 0;
white-space: normal;
overflow: visible;
text-overflow: clip;
text-align: center;
vertical-align: middle;
color: #687382;
font-size: 11.95px;
font-weight: 735;
line-height: 1.35;
}
#csvImportModal .csvPreviewMessageStack{
position: absolute;
inset: 0 44px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 0;
max-width: 100%;
margin: 0 auto;
text-align: center;
transform: none;
}
#csvImportModal .csvPreviewMessageTitle{
color: #293241;
max-width: 640px;
font-size: 11.35px;
font-weight: 700;
line-height: inherit;
overflow-wrap: break-word;
text-wrap: balance;
}
#csvImportModal .csvPreviewMessageHint{
max-width: 380px;
color: #7A8493;
font-size: 10.7px;
font-weight: 650;
line-height: 1.35;
}
#csvImportModal #csvPreviewTable.csvPreviewTableResultMode{
min-width: 0;
}
#csvImportModal #csvPreviewTable.csvPreviewTableResultMode thead{
display: none;
}
#csvImportModal .csvImportResultScreen{
--_csv-result-text: #1D2634;
--_csv-result-muted: #758091;
--_csv-result-border: #E4EAF1;
--_csv-result-surface: #FFFFFF;
--_csv-result-accent: #4E7A5D;
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
align-items: start;
gap: 14px;
width: min(560px, 100%);
margin: 0 auto;
padding: 20px 22px;
border: 1px solid var(--_csv-result-border);
border-radius: 22px;
background: var(--_csv-result-surface);
box-shadow: 0 18px 44px rgba(40, 56, 76, .10);
color: var(--_csv-result-text);
text-align: left;
white-space: normal;
}
#csvImportModal .csvImportResultScreen.isPartial{
--_csv-result-accent: #A46A1C;
--_csv-result-border: #F1DEC2;
background: #FFFCF7;
}
#csvImportModal .csvImportResultScreen.isFailed{
--_csv-result-accent: #B84B4B;
--_csv-result-border: #F0D3D3;
background: #FFF8F8;
}
#csvImportModal .csvImportResultScreen.isLoading{
--_csv-result-accent: #506A8F;
}
#csvImportModal .csvImportResultMark,
#csvImportModal .csvImportResultSpinner{
width: 38px;
height: 38px;
border-radius: 999px;
background: color-mix(in srgb, var(--_csv-result-accent) 12%, #FFFFFF);
border: 1px solid color-mix(in srgb, var(--_csv-result-accent) 28%, #FFFFFF);
position: relative;
}
#csvImportModal .csvImportResultMark::after{
content: "";
position: absolute;
left: 13px;
top: 9px;
width: 9px;
height: 15px;
border-right: 2px solid var(--_csv-result-accent);
border-bottom: 2px solid var(--_csv-result-accent);
transform: rotate(42deg);
}
#csvImportModal .csvImportResultScreen.isFailed .csvImportResultMark::before,
#csvImportModal .csvImportResultScreen.isFailed .csvImportResultMark::after{
content: "";
position: absolute;
left: 11px;
top: 18px;
width: 15px;
height: 2px;
border: 0;
background: var(--_csv-result-accent);
transform: rotate(45deg);
}
#csvImportModal .csvImportResultScreen.isFailed .csvImportResultMark::after{
transform: rotate(-45deg);
}
#csvImportModal .csvImportResultSpinner::after{
content: "";
position: absolute;
inset: 8px;
border-radius: 999px;
border: 2px solid color-mix(in srgb, var(--_csv-result-accent) 18%, #FFFFFF);
border-top-color: var(--_csv-result-accent);
animation: csvResultSpin .8s linear infinite;
}
@keyframes csvResultSpin{
to{ transform: rotate(360deg); }
}
#csvImportModal .csvImportResultContent{
display: flex;
min-width: 0;
flex-direction: column;
gap: 10px;
}
#csvImportModal .csvImportResultTitle{
color: var(--_csv-result-text);
font-size: 17px;
font-weight: 760;
line-height: 1.15;
}
#csvImportModal .csvImportResultHint,
#csvImportModal .csvImportResultMeta,
#csvImportModal .csvImportResultFootnote{
color: var(--_csv-result-muted);
font-size: 11.4px;
font-weight: 610;
line-height: 1.35;
}
#csvImportModal .csvImportResultCounts{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
margin-top: 2px;
}
#csvImportModal .csvImportResultCountRow{
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 9px;
min-height: 28px;
padding: 5px 0;
border-bottom: 0;
font-size: 12px;
line-height: 1.2;
}
#csvImportModal .csvImportResultCountLabel{
color: #606C7C;
font-weight: 660;
}
#csvImportModal .csvImportResultCountValue{
color: var(--_csv-result-text);
font-weight: 780;
}
#csvImportModal .csvImportResultErrors{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
#csvImportModal .csvImportResultErrorList{
display: grid;
gap: 6px;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#csvImportModal .csvImportResultErrorList li{
display: grid;
gap: 2px;
padding: 8px 10px;
border-radius: 12px;
background: rgba(184, 75, 75, .07);
color: var(--_csv-result-text);
}
#csvImportModal .csvImportResultErrorList span{
font-size: 11.2px;
font-weight: 740;
}
#csvImportModal .csvImportResultErrorList small{
color: #8B6870;
font-size: 10.2px;
font-weight: 620;
line-height: 1.3;
}
#csvImportModal .csvImportResultActions{
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 4px;
}
#csvImportModal .csvImportResultPrimaryBtn,
#csvImportModal .csvImportResultSecondaryBtn{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 0 15px;
border-radius: 999px;
font-family: "Inter", var(--ct-font-sans);
font-size: 11.5px;
font-weight: 730;
line-height: 1;
cursor: pointer;
transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
#csvImportModal .csvImportResultPrimaryBtn{
border: 1px solid color-mix(in srgb, var(--_csv-result-accent) 32%, #FFFFFF);
background: color-mix(in srgb, var(--_csv-result-accent) 12%, #FFFFFF);
color: var(--_csv-result-accent);
}
#csvImportModal .csvImportResultSecondaryBtn{
border: 1px solid #DFE7F0;
background: #FFFFFF;
color: #657184;
}
#csvImportModal .csvImportResultPrimaryBtn:hover,
#csvImportModal .csvImportResultPrimaryBtn:focus-visible,
#csvImportModal .csvImportResultSecondaryBtn:hover,
#csvImportModal .csvImportResultSecondaryBtn:focus-visible{
outline: none;
box-shadow: 0 8px 20px rgba(48, 63, 84, .10);
}
#csvImportModal .csvImportResultEmpty{
color: var(--_csv-result-muted);
font-size: 11.6px;
font-weight: 640;
}
#csvImportModal .csvModalActions{
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: flex-end;
min-height: var(--_csv-import-air-footer-h);
gap: 22px;
padding: 0;
border: 0;
background: transparent;
flex-wrap: nowrap;
}
#csvImportModal .csvImportFooterButtons{
display: flex;
align-items: center;
gap: 11px;
min-width: 0;
}
#csvImportModal .csvImportPrimaryBtn{
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
min-height: 44px;
padding: 0 16px;
border-radius: 17px;
font-family: "Inter", var(--ct-font-sans);
font-size: 12.2px;
font-weight: 800;
line-height: 1;
box-shadow: none;
opacity: 1;
flex: 0 0 auto;
cursor: pointer;
transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
#csvImportModal .csvImportPrimaryBtn{
width: 171px;
border: 1px solid var(--_csv-import-air-dark);
background: var(--_csv-import-air-dark);
color: #FFFFFF;
box-shadow: 0 13px 22px rgba(23, 32, 51, .13);
}
#csvImportModal .csvImportPrimaryBtn:hover,
#csvImportModal .csvImportPrimaryBtn:focus-visible{
background: var(--_csv-import-air-dark-hover);
border-color: var(--_csv-import-air-dark-hover);
outline: none;
}
#csvImportModal .csvImportPrimaryBtn:focus-visible{
box-shadow: var(--_csv-import-air-focus);
}
#csvImportModal .csvImportPrimaryBtn:disabled{
opacity: 1;
box-shadow: none;
transform: none;
cursor: default;
}
#csvImportModal .csvImportPrimaryBtn:disabled{
border-color: #D7DDE4;
background: #D7DDE4;
color: #FFFFFF;
}
#csvImportModal .csvImportToast{
position: absolute;
inset: 0;
z-index: 6;
display: flex;
align-items: center;
justify-content: center;
padding: var(--_csv-import-air-pad-x);
pointer-events: none;
}
#csvImportModal .csvImportToast.hidden{
display: none;
}
#csvImportModal .csvImportToastCard{
display: flex;
align-items: flex-start;
gap: 11px;
width: min(378px, 100%);
padding: 13px;
border: 1px solid #E0E5EB;
border-radius: 16px;
background: rgba(255,255,255,.98);
box-shadow: 0 22px 49px rgba(7, 17, 31, .22);
pointer-events: auto;
}
#csvImportModal .csvImportToast.success .csvImportToastCard{
border-color: #D4DED6;
}
#csvImportModal .csvImportToast.info .csvImportToastCard{
border-color: #E3D8C2;
}
#csvImportModal .csvImportToastIcon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 25px;
min-width: 25px;
height: 25px;
border-radius: 999px;
background: #F2F3F3;
color: #687382;
flex: 0 0 auto;
}
#csvImportModal .csvImportToast.success .csvImportToastIcon{
background: #EAF7F0;
color: #23855A;
}
#csvImportModal .csvImportToast.info .csvImportToastIcon{
background: var(--_csv-import-air-warning-bg);
color: var(--_csv-import-air-warning-text);
}
#csvImportModal .csvImportToastIcon::before{
content: "";
width: 13px;
height: 13px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
#csvImportModal .csvImportToast.info .csvImportToastIcon::before{
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v5'/%3E%3Cpath d='M12 17h.01'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v5'/%3E%3Cpath d='M12 17h.01'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
}
#csvImportModal .csvImportToastText{
min-width: 0;
flex: 1 1 auto;
color: var(--_csv-import-air-text);
font-family: "Inter", var(--ct-font-sans);
}
#csvImportModal .csvImportToastTitle{
font-size: 11.7px;
font-weight: 800;
line-height: 1.2;
}
#csvImportModal .csvImportToastBody{
margin-top: 5px;
color: #66717F;
font-size: 10.8px;
font-weight: 500;
line-height: 1.35;
white-space: pre-line;
}
#csvImportModal .csvImportToastClose{
display: inline-flex;
align-items: center;
justify-content: center;
width: 23px;
min-width: 23px;
height: 23px;
padding: 0;
border: 1px solid #E1E4E8;
border-radius: 999px;
background: #FFFFFF;
color: #7B838D;
box-shadow: none;
flex: 0 0 auto;
cursor: pointer;
transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
#csvImportModal .csvImportToastClose:hover,
#csvImportModal .csvImportToastClose:focus-visible{
background: #F2F3F3;
border-color: #CED2D5;
color: #343B46;
outline: none;
}
#csvImportModal .csvImportToastCloseIcon{
width: 10px;
height: 10px;
display: block;
}
#csvImportModal .csvImportToastCloseIcon path{
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
}
@media (prefers-reduced-motion: reduce){
#csvImportModal *,
#csvImportModal *::before,
#csvImportModal *::after{
transition-duration: .001ms;
animation-duration: .001ms;
}
}
@media (max-width: 1065px){
#csvImportModal{
--_csv-import-preview-h: 276px;
}
#csvImportModal .csvImportCard{
height: auto;
top: 0;
}
#csvImportModal .csvImportBody{
display: flex;
flex-direction: column;
overflow-y: auto;
padding-right: 2px;
}
#csvImportModal .csvImportUploadZone{
justify-content: flex-start;
position: static;
top: auto;
flex: 0 0 auto;
}
#csvImportModal .csvCheckBlock{
flex: 0 0 auto;
height: auto;
min-height: 297px;
padding-top: 3px;
}
#csvImportModal.csvImportModeVisible.csvImportModeChosen .csvCheckBlock{
height: auto;
}
}
@media (max-width: 780px){
#csvImportModal{
--_csv-import-air-radius: 25px;
--_csv-import-air-pad-top: 27px;
--_csv-import-air-pad-x: 20px;
--_csv-import-air-pad-bottom: 22px;
--_csv-import-air-gap: 22px;
--_csv-import-air-overlay-pad-top: 7px;
--_csv-import-air-overlay-pad-x: 7px;
--_csv-import-air-overlay-pad-bottom: 7px;
}
#csvImportModal .csvImportCard{
min-height: 0;
max-height: calc(100dvh - 14px);
overflow: hidden;
}
#csvImportModal .csvImportModalHead{
min-height: 52px;
align-items: flex-start;
}
#csvImportModal .csvImportModalTitle{
font-size: 31px;
}
#csvImportModal .csvImportModalCloseBtn{
width: 36px;
min-width: 36px;
height: 36px;
min-height: 36px;
}
#csvImportModal .csvImportBody{
overflow-y: auto;
gap: 22px;
grid-auto-rows: max-content;
align-content: start;
}
#csvImportModal .csvImportIntro{
font-size: 13.5px;
}
#csvImportModal .csvImportDropzone{
align-items: flex-start;
gap: 14px;
min-height: 115px;
}
#csvImportModal .csvImportUploadMark{
width: 52px;
min-width: 52px;
height: 52px;
border-radius: 18px;
}
#csvImportModal .csvImportUploadGlyph{
font-size: 26px;
}
#csvImportModal .csvDropText{
font-size: 20px;
}
#csvImportModal .csvDropSub{
font-size: 11.7px;
}
#csvImportModal .csvImportPreviewHead{
align-items: flex-start;
flex-direction: column;
gap: 9px;
}
#csvImportModal .csvCheckBlock{
min-height: 198px;
}
#csvImportModal .csvImportSummary{
font-size: 17px;
}
#csvImportModal .csvImportEmptyHint{
white-space: normal;
}
#csvImportModal .csvFileName{
max-width: 100%;
}
#csvImportModal .csvModalActions{
align-items: stretch;
flex-direction: column;
min-height: 0;
gap: 13px;
}
#csvImportModal .csvImportFooterButtons{
width: 100%;
flex-direction: column;
}
#csvImportModal .csvImportPrimaryBtn{
width: 100%;
}
}
#walletTxPickerModal{
z-index: 82;
}
.walletTxPickerCard{
width: min(960px, 100%);
}
.walletTxPickerBody{
display: flex;
flex-direction: column;
gap: 10px;
}
.walletTxPickerHint{
color: var(--muted);
min-height: 18px;
}
.walletTxPickerRows{
display: flex;
flex-direction: column;
gap: 8px;
max-height: 420px;
overflow: auto;
padding-right: 2px;
}
.walletTxPickerRow{
display: flex;
gap: 10px;
align-items: flex-start;
justify-content: space-between;
border: 1px solid var(--border);
border-radius: 14px;
padding: 10px 12px;
background: rgba(255,255,255,.03);
}
.walletTxPickerRowEmpty{
justify-content: flex-start;
color: var(--muted);
}
.walletTxPickerMeta{
display: flex;
flex-wrap: wrap;
gap: 7px 10px;
align-items: center;
min-width: 0;
}
.walletTxPickerMeta .mono{
font-variant-numeric: tabular-nums;
}
.walletTxPickerActions{
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.walletTxPickerOppositeList{
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.walletTxPickerRetry{
display: flex;
gap: 8px;
justify-content: flex-end;
flex-wrap: wrap;
}
@media (max-width: 760px){
.walletTxPickerRow{
flex-direction: column;
align-items: stretch;
}
.walletTxPickerActions{
justify-content: flex-start;
}
}
#taxPackExportModal{
z-index: 84;
--_tax-pack-modal-scale: .8;
--_tax-pack-modal-width: calc(1380px * var(--_tax-pack-modal-scale));
--_tax-pack-modal-radius: calc(46px * var(--_tax-pack-modal-scale));
--_tax-pack-modal-pad-top: calc(52px * var(--_tax-pack-modal-scale));
--_tax-pack-modal-pad-x: calc(58px * var(--_tax-pack-modal-scale));
--_tax-pack-modal-pad-bottom: calc(40px * var(--_tax-pack-modal-scale));
--_tax-pack-modal-gap: calc(26px * var(--_tax-pack-modal-scale));
--_tax-pack-panel-scale: calc(var(--_tax-pack-modal-scale) * .95);
--_tax-pack-panel-height: calc((412px * var(--_tax-pack-panel-scale)) - 10px);
--_tax-pack-modal-bg: linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%);
--_tax-pack-modal-shadow: 0 calc(40px * var(--_tax-pack-modal-scale)) calc(86px * var(--_tax-pack-modal-scale)) #07111F55;
--_tax-pack-modal-text: #18202D;
--_tax-pack-modal-muted: #727D8C;
--_tax-pack-modal-soft: #F8FAFC;
--_tax-pack-modal-soft-line: #E8ECF1;
--_tax-pack-modal-dark: #172033;
--_tax-pack-panel-shadow: 0 calc(14px * var(--_tax-pack-panel-scale)) calc(32px * var(--_tax-pack-panel-scale)) #2630410C;
--_tax-pack-modal-warning: #9A4D12;
--_tax-pack-modal-warning-muted: #8A6A32;
--_tax-pack-modal-warning-soft: #FFF8EF;
--_tax-pack-modal-warning-border: #F6E7D4;
--_tax-pack-modal-warning-accent: #D9A7B2;
--_tax-pack-modal-ready: #28734F;
--_tax-pack-modal-ready-muted: #2F684B;
--_tax-pack-modal-ready-soft: #DDECE5;
--_tax-pack-modal-ready-border: #E2F2E8;
--_tax-pack-modal-ready-accent: #9BCBAF;
--_tax-pack-details-border: #E4E6EA;
--_tax-pack-details-bg: #FFFFFF;
--_tax-pack-details-hover: #F7F8FA;
--_tax-pack-details-line: #ECEEF2;
--_tax-pack-details-text: #18202D;
--_tax-pack-details-muted: #6B7280;
--_tax-pack-modal-overlay-pad-top: calc(var(--stickyTop, 0px) + 18px);
--_tax-pack-modal-overlay-pad-bottom: 18px;
--_tax-pack-modal-overlay-pad-x: 14px;
}
#taxPackExportModal.modalOverlay{
align-items: flex-start;
overflow-y: auto;
overscroll-behavior: contain;
padding:
var(--_tax-pack-modal-overlay-pad-top)
var(--_tax-pack-modal-overlay-pad-x)
var(--_tax-pack-modal-overlay-pad-bottom);
background: var(--_modal-overlay-bg);
backdrop-filter: var(--_modal-overlay-filter);
-webkit-backdrop-filter: var(--_modal-overlay-filter);
}
#walletConnectModal{
z-index: 72;
--_wallet-connect-modal-width: 950.4px;
--_wallet-connect-modal-height: 521.28px;
--_wallet-connect-modal-content-width: 858.24px;
--_wallet-connect-modal-left-width: 511.2px;
--_wallet-connect-modal-right-width: 302.4px;
--_wallet-connect-modal-body-gap: 43.2px;
--_wallet-connect-modal-section-gap: 24.48px;
--_wallet-connect-modal-pad-top: 38.88px;
--_wallet-connect-modal-pad-x: 46.08px;
--_wallet-connect-modal-pad-bottom: 7.2px;
--_wallet-connect-modal-radius: 31.68px;
--_wallet-connect-modal-surface: linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%);
--_wallet-connect-modal-card: #FFFFFF;
--_wallet-connect-modal-text: #111827;
--_wallet-connect-modal-muted: #6B7280;
--_wallet-connect-modal-soft: #F4F6F8;
--_wallet-connect-modal-soft-2: #F6F8FB;
--_wallet-connect-modal-line: #E7ECF1;
--_wallet-connect-modal-line-strong: #E9EDF3;
--_wallet-connect-modal-primary: #172033;
--_wallet-connect-modal-primary-hover: #1F2937;
--_wallet-connect-modal-danger: #E5484D;
--_wallet-connect-modal-shadow: 0 27.36px 56.16px rgba(7, 17, 31, .33);
--_wallet-connect-modal-head-height: 84.96px;
--_wallet-connect-modal-body-height: 275.04px;
--_wallet-connect-modal-footer-height: 66.24px;
--_wallet-connect-modal-step-marker: 31.68px;
--_wallet-connect-modal-row-gap: 15.84px;
--_wallet-connect-modal-row-copy: 180px;
--_wallet-connect-modal-address-copy: 406.8px;
--_wallet-connect-modal-flow-gap: 18.72px;
--_wallet-connect-modal-control-width: 87.12px;
--_wallet-connect-modal-control-height: 36px;
--_wallet-connect-modal-close: 38.88px;
--_wallet-connect-modal-submit-width: 141.12px;
--_wallet-connect-modal-submit-height: 41.76px;
--_wallet-connect-modal-create-wallet-text: #4B5563;
--_wallet-connect-modal-create-wallet-text-hover: #111827;
--_wallet-connect-modal-create-wallet-size: 12px;
--_wallet-connect-modal-create-wallet-weight: 650;
--_wallet-connect-modal-create-wallet-icon-size: 30px;
--_wallet-connect-modal-create-wallet-icon-bg: #F1F2EF;
--_wallet-connect-modal-create-wallet-icon-text: #7B8490;
--_wallet-connect-modal-create-wallet-icon-text-hover: #4B5563;
--_wallet-connect-modal-create-wallet-gap: 12px;
--_wallet-connect-modal-create-wallet-plus-size: 15px;
align-items: flex-start;
overflow-y: auto;
overscroll-behavior: contain;
padding: calc(var(--stickyTop, 0px) + 28.8px) 16.2px 28.8px;
background: var(--_modal-overlay-bg);
backdrop-filter: var(--_modal-overlay-filter);
-webkit-backdrop-filter: var(--_modal-overlay-filter);
}
#walletConnectModal .walletConnectModalCard{
position: relative;
width: min(var(--_wallet-connect-modal-width), 100%);
height: var(--_wallet-connect-modal-height);
max-height: calc(100dvh - (var(--stickyTop, 0px) + 57.6px));
padding:
var(--_wallet-connect-modal-pad-top)
var(--_wallet-connect-modal-pad-x)
var(--_wallet-connect-modal-pad-bottom);
border: 0;
border-radius: var(--_wallet-connect-modal-radius);
background: var(--_wallet-connect-modal-surface);
box-shadow: var(--_wallet-connect-modal-shadow);
color: var(--_wallet-connect-modal-text);
display: flex;
flex-direction: column;
gap: var(--_wallet-connect-modal-section-gap);
overflow: hidden;
font-family: var(--font, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
#walletConnectModal .walletConnectModalCard,
#walletConnectModal .walletConnectModalCard *{
box-sizing: border-box;
}
#walletConnectModal .walletConnectModalHead{
position: relative;
display: flex;
align-items: start;
justify-content: space-between;
gap: 11.52px;
min-height: var(--_wallet-connect-modal-head-height);
height: var(--_wallet-connect-modal-head-height);
width: 100%;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
#walletConnectModal .walletConnectModalIntro{
width: 561.6px;
min-width: 0;
}
#walletConnectModal .walletConnectModalTitle{
margin: 0;
color: #18202D;
font-size: 37.44px;
font-weight: 800;
line-height: 1.18;
letter-spacing: -1.08px;
}
#walletConnectModal.isCustomWalletCreate .walletConnectModalIntro{
width: min(710px, calc(100% - var(--_wallet-connect-modal-close) - 12px));
}
#walletConnectModal.isCustomWalletCreate .walletConnectModalTitle{
white-space: nowrap;
}
#walletConnectModal .walletConnectModalSubtitle{
width: min(518.4px, 100%);
margin-top: 8.64px;
color: #727D8C;
font-size: 12.96px;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0;
}
#walletConnectModal .walletConnectModalClose{
display: inline-grid;
place-items: center;
width: var(--_wallet-connect-modal-close);
height: var(--_wallet-connect-modal-close);
min-width: 0;
min-height: 0;
padding: 0;
border: 0.72px solid #E0E5EB;
border-radius: 19.44px;
background: #F2F4F6;
color: #687382;
box-shadow: none;
}
#walletConnectModal .walletConnectModalClose:hover,
#walletConnectModal .walletConnectModalClose:focus-visible{
background: #E8EDF3;
color: var(--_wallet-connect-modal-text);
outline: none;
}
#walletConnectModal .walletConnectModalCloseIcon{
display: block;
font-size: 23.04px;
font-weight: 400;
line-height: 1;
transform: translateY(-0.72px);
}
#walletConnectModal .walletConnectModalBody{
display: flex;
flex-direction: column;
gap: var(--_wallet-connect-modal-section-gap);
padding: 0;
}
#walletConnectModal .walletConnectModalMain{
display: flex;
gap: var(--_wallet-connect-modal-body-gap);
align-items: start;
width: 100%;
min-height: var(--_wallet-connect-modal-body-height);
height: var(--_wallet-connect-modal-body-height);
}
#walletConnectModal .walletConnectModalSteps{
display: flex;
flex-direction: column;
width: 100%;
max-width: var(--_wallet-connect-modal-left-width);
height: var(--_wallet-connect-modal-body-height);
min-width: 0;
justify-content: center;
gap: var(--_wallet-connect-modal-flow-gap);
}
#walletConnectModal .walletConnectModalStep{
display: grid;
grid-template-columns: var(--_wallet-connect-modal-step-marker) var(--_wallet-connect-modal-row-copy) var(--_wallet-connect-modal-control-width);
align-items: center;
column-gap: var(--_wallet-connect-modal-row-gap);
width: 100%;
height: 54.72px;
min-height: 54.72px;
}
#walletConnectModal .walletConnectModalStepAddress{
grid-template-columns: var(--_wallet-connect-modal-step-marker) var(--_wallet-connect-modal-address-copy) 79.2px;
height: 61.92px;
min-height: 61.92px;
}
#walletConnectModal .walletConnectModalNameStep{
grid-template-columns: var(--_wallet-connect-modal-step-marker) var(--_wallet-connect-modal-address-copy);
height: 61.92px;
min-height: 61.92px;
}
#walletConnectModal.isWalletConnectEdit .walletConnectModalStepChain{
grid-template-columns: var(--_wallet-connect-modal-step-marker) var(--_wallet-connect-modal-address-copy);
}
#walletConnectModal.isWalletConnectEdit .walletConnectModalStepChain .walletConnectModalStepControl{
display: none;
}
#walletConnectModal:is(.isCustomWalletCreate, .isWalletConnectEdit) #walletConnectPlaceField + .walletConnectModalDivider{
display: none;
}
#walletConnectModal .walletConnectModalStepMarker{
display: inline-grid;
place-items: center;
width: var(--_wallet-connect-modal-step-marker);
height: var(--_wallet-connect-modal-step-marker);
border-radius: 899.1px;
background: #E8EDF3;
color: #687382;
font-size: 11.52px;
font-weight: 760;
line-height: 1;
letter-spacing: 0;
}
#walletConnectModal .walletConnectModalStepMarker.is-active{
background: #172033;
color: #FFFFFF;
}
#walletConnectModal .walletConnectModalStepCopy{
width: 100%;
min-width: 0;
}
#walletConnectModal .walletConnectModalStepLabel{
display: block;
margin: 0 0 5.04px;
color: #8A94A2;
font-size: 10.08px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0.216px;
}
#walletConnectModal .walletConnectModalStepValue,
#walletConnectModal .walletConnectModalAddressInput{
width: 100%;
min-width: 0;
color: #18202D;
font-size: 16.56px;
font-weight: 800;
line-height: 1.24;
letter-spacing: -0.288px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#walletConnectModal .walletConnectModalAddressInput{
height: 24.48px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
outline: none;
color: #18202D;
font-size: 18.16px;
font-weight: 720;
letter-spacing: -0.576px;
}
#walletConnectModal .walletConnectModalAddressInput::placeholder{
color: #A2ABB7;
opacity: 1;
}
#walletConnectModal .walletConnectModalNameInput::placeholder{
font-size: 15.44px;
font-weight: 583;
letter-spacing: 0.08px;
}
#walletConnectModal .walletConnectModalAddressInput.fieldInvalid{
color: var(--_wallet-connect-modal-danger);
box-shadow: inset 0 -0.9px 0 var(--_wallet-connect-modal-danger);
}
#walletConnectModal .walletConnectModalDivider{
width: 100%;
height: 0.72px;
margin: 0;
background: var(--_wallet-connect-modal-line);
}
#walletConnectModal .walletConnectModalDropdown{
position: relative;
width: var(--_wallet-connect-modal-control-width);
min-width: var(--_wallet-connect-modal-control-width);
height: var(--_wallet-connect-modal-control-height);
}
#walletConnectModal .walletConnectModalTrigger{
width: 100%;
height: var(--_wallet-connect-modal-control-height);
min-height: 0;
padding: 0 25.2px 0 12.96px;
border: 0;
border-radius: 15.84px;
background: #F4F6F8;
color: #596576;
box-shadow: none;
caret-color: transparent;
cursor: pointer;
font-family: inherit;
font-size: 10.8px;
font-weight: 800;
line-height: 1;
letter-spacing: 0;
text-align: left;
text-overflow: ellipsis;
}
#walletConnectModal .walletConnectModalTrigger::placeholder{
color: #596576;
opacity: 1;
}
#walletConnectModal .walletConnectModalDropdown::after{
content: "⌄";
position: absolute;
top: 50%;
right: 12.96px;
width: auto;
height: auto;
border: 0;
color: #737E8D;
font-size: 14.4px;
font-weight: 700;
line-height: 1;
pointer-events: none;
transform: translateY(calc(-50% - 3px));
}
#walletConnectModal :is(#walletConnectPlaceId, #walletConnectChain).fieldInvalid + .walletConnectModalTrigger{
background: #FFF5F5;
box-shadow: inset 0 0 0 0.72px rgba(229, 72, 77, .72);
color: var(--_wallet-connect-modal-danger);
}
#walletConnectModal :is(#walletConnectPlacePickerDropdown, #walletConnectChainPickerDropdown){
z-index: 84;
min-width: 129.6px;
max-width: min(234px, calc(100vw - 30.6px));
padding: 4.32px;
border: 0.72px solid var(--_wallet-connect-modal-line-strong);
border-radius: 10.08px;
background: var(--_wallet-connect-modal-card);
box-shadow: 0 10.08px 23.04px rgba(15, 23, 42, .14);
}
#walletConnectModal :is(#walletConnectPlacePickerDropdown, #walletConnectChainPickerDropdown) .txDropdownOption{
appearance: none;
display: block;
width: 100%;
min-height: 0;
padding: 6.48px 7.2px;
border: 0;
border-radius: 7.2px;
background: transparent;
color: var(--_wallet-connect-modal-text);
font: inherit;
font-size: 9.36px;
font-weight: 600;
line-height: 1.25;
letter-spacing: 0;
text-align: left;
cursor: pointer;
}
#walletConnectModal :is(#walletConnectPlacePickerDropdown, #walletConnectChainPickerDropdown) .txDropdownOption.is-selected,
#walletConnectModal :is(#walletConnectPlacePickerDropdown, #walletConnectChainPickerDropdown) .txDropdownOption:hover,
#walletConnectModal :is(#walletConnectPlacePickerDropdown, #walletConnectChainPickerDropdown) .txDropdownOption:focus-visible{
background: var(--_wallet-connect-modal-soft-2);
color: var(--_wallet-connect-modal-primary);
outline: none;
}
#walletConnectModal .walletConnectModalPasteBtn{
width: 79.2px;
height: 30.24px;
min-width: 0;
min-height: 0;
padding: 0;
border: 0;
border-radius: 15.12px;
background: #F4F6F8;
color: #596576;
font-family: inherit;
font-size: 10.08px;
font-weight: 800;
line-height: 1;
letter-spacing: 0;
cursor: pointer;
transform: translate(20px, 4.4px);
}
#walletConnectModal .walletConnectModalPasteBtn:hover,
#walletConnectModal .walletConnectModalPasteBtn:focus-visible{
background: #E8EDF3;
color: var(--_wallet-connect-modal-text);
outline: none;
}
#walletConnectModal .walletConnectModalPasteBtn[hidden]{
display: none;
}
#walletConnectModal .walletConnectModalInfo{
width: var(--_wallet-connect-modal-right-width);
min-width: 0;
min-height: var(--_wallet-connect-modal-body-height);
height: var(--_wallet-connect-modal-body-height);
padding: 8.64px 5.76px 0 17.28px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
#walletConnectModal .walletConnectModalBadge{
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
height: 15.84px;
padding: 3.6px 6.48px;
border-radius: 899.1px;
background: #EEF7F3;
color: #2F7358;
font-size: 8.8px;
font-weight: 700;
line-height: 1.1;
letter-spacing: 0;
text-transform: lowercase;
}
#walletConnectModal .walletConnectModalBadge::before{
content: "";
width: 4.32px;
height: 4.32px;
margin-right: 4.32px;
border-radius: 899.1px;
background: #2F9E72;
}
#walletConnectModal .walletConnectModalInfoTitle{
width: 100%;
margin-top: 4.32px;
color: #101828;
font-size: 14.4px;
font-weight: 780;
line-height: 1.2;
letter-spacing: 0;
}
#walletConnectModal .walletConnectModalInfoText{
width: 100%;
margin-top: 4.536px;
color: #667085;
font-size: 9.6px;
font-weight: 400;
line-height: 1.38;
letter-spacing: 0;
}
#walletConnectModal .walletConnectModalInfoTitle + .walletConnectModalInfoText{
margin-bottom: 9.072px;
}
#walletConnectModal .walletConnectModalInfoDivider{
width: 100%;
height: 0.72px;
margin: 8.64px 0;
background: #E9EDF3;
}
#walletConnectModal .walletConnectModalInfoList{
display: grid;
gap: 6.804px;
margin: 0;
}
#walletConnectModal .walletConnectModalInfoItem{
display: grid;
grid-template-columns: 13.608px minmax(0, 1fr);
gap: 9.072px;
align-items: center;
min-width: 0;
min-height: 24.192px;
}
#walletConnectModal .walletConnectModalInfoIcon{
display: inline-grid;
place-items: center;
width: 13.608px;
height: 13.608px;
border-radius: 0;
background: transparent;
color: #728197;
}
#walletConnectModal .walletConnectModalInfoItem:nth-child(1) .walletConnectModalInfoIcon{
color: #337A63;
}
#walletConnectModal .walletConnectModalInfoItem:nth-child(3) .walletConnectModalInfoIcon{
color: #A4783B;
}
#walletConnectModal .walletConnectModalInfoIcon svg{
width: 13.608px;
height: 13.608px;
fill: none;
stroke: currentColor;
stroke-width: 1.89;
stroke-linecap: round;
stroke-linejoin: round;
}
#walletConnectModal .walletConnectModalInfoLabel{
color: #98A2B3;
font-size: 9.8px;
font-weight: 570;
line-height: 1.2;
letter-spacing: 0;
}
#walletConnectModal .walletConnectModalInfoValue{
min-width: 0;
margin-top: 1.512px;
color: #344054;
font-size: 11.4px;
font-weight: 500;
line-height: 1.24;
letter-spacing: 0;
overflow-wrap: anywhere;
}
#walletConnectModal #walletConnectPublicAddressText{
font-weight: 500;
}
#walletConnectModal .walletConnectPublicAddressValue{
font-size: 11.4px;
font-weight: 500;
}
#walletConnectModal .walletConnectModalNotice{
display: grid;
grid-template-columns: 12.24px minmax(0, 1fr);
align-items: center;
min-height: 26.64px;
margin-top: 0;
padding: 7.2px 9.36px;
border-radius: 15.84px;
gap: 8.64px;
background: #F6F8FB;
color: #667085;
font-size: 9.6px;
font-weight: 500;
line-height: 1.35;
letter-spacing: 0;
}
#walletConnectModal .walletConnectModalNoticeIcon,
#walletConnectModal .walletConnectModalNoticeIcon svg{
display: block;
width: 12.24px;
height: 12.24px;
}
#walletConnectModal .walletConnectModalNoticeIcon svg{
fill: none;
stroke: #728197;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
#walletConnectModal .walletConnectModalNoticeText{
min-width: 0;
}
#walletConnectModal .walletConnectModalField{
min-width: 0;
}
#walletConnectModal .walletConnectModalField > label{
display: block;
margin: 0 0 5.4px;
color: #8B95A1;
font-size: 9px;
font-weight: 640;
line-height: 1.2;
letter-spacing: 0;
}
#walletConnectModal .walletConnectModalField > input{
width: 100%;
height: 31.5px;
border: 0.72px solid var(--_wallet-connect-modal-line);
border-radius: 10.8px;
background: var(--_wallet-connect-modal-card);
color: var(--_wallet-connect-modal-text);
font-family: inherit;
font-size: 10.8px;
line-height: 1.2;
}
#walletConnectModal .walletConnectTechnicalFields{
display: none;
}
#walletConnectModal .walletConnectModalHint{
min-height: 16.2px;
margin: 0;
color: var(--_wallet-connect-modal-muted);
font-size: 9.9px;
line-height: 1.35;
letter-spacing: 0;
}
#walletConnectModal .walletConnectModalHint:empty{
display: none;
}
#walletConnectModal .walletConnectModalHint.bad{
color: var(--bad);
}
#walletConnectModal .walletConnectModalHint.good{
color: var(--good);
}
#walletConnectModal .walletConnectModalHint.warn{
color: var(--warn);
}
#walletConnectModal .walletConnectModalActions{
display: flex;
align-items: center;
justify-content: space-between;
min-height: var(--_wallet-connect-modal-footer-height);
height: var(--_wallet-connect-modal-footer-height);
margin: 0;
border-top: 0;
}
#walletConnectModal .walletConnectModalCreateWalletBtn{
display: inline-flex;
align-items: center;
gap: var(--_wallet-connect-modal-create-wallet-gap);
min-width: 0;
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--_wallet-connect-modal-create-wallet-text);
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_wallet-connect-modal-create-wallet-size);
font-weight: var(--_wallet-connect-modal-create-wallet-weight);
line-height: 1.25;
text-decoration: none;
transition: color 140ms ease;
}
#walletConnectModal .walletConnectModalCreateWalletBtn::before{
content: "+";
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--_wallet-connect-modal-create-wallet-icon-size);
height: var(--_wallet-connect-modal-create-wallet-icon-size);
min-width: var(--_wallet-connect-modal-create-wallet-icon-size);
min-height: var(--_wallet-connect-modal-create-wallet-icon-size);
border-radius: 999px;
background: var(--_wallet-connect-modal-create-wallet-icon-bg);
color: var(--_wallet-connect-modal-create-wallet-icon-text);
font-size: var(--_wallet-connect-modal-create-wallet-plus-size);
font-weight: 500;
line-height: 1;
transition: color 140ms ease;
}
#walletConnectModal .walletConnectModalCreateWalletBtn:hover,
#walletConnectModal .walletConnectModalCreateWalletBtn:focus-visible{
color: var(--_wallet-connect-modal-create-wallet-text-hover);
outline: none;
}
#walletConnectModal .walletConnectModalCreateWalletBtn:hover::before,
#walletConnectModal .walletConnectModalCreateWalletBtn:focus-visible::before{
color: var(--_wallet-connect-modal-create-wallet-icon-text-hover);
}
#walletConnectModal .walletConnectModalBackBtn{
display: none;
min-width: 0;
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--_wallet-connect-modal-create-wallet-text);
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_wallet-connect-modal-create-wallet-size);
font-weight: var(--_wallet-connect-modal-create-wallet-weight);
line-height: 1.25;
transition: color 140ms ease;
}
#walletConnectModal .walletConnectModalBackBtn:hover,
#walletConnectModal .walletConnectModalBackBtn:focus-visible{
color: var(--_wallet-connect-modal-create-wallet-text-hover);
outline: none;
}
#walletConnectModal.isCustomWalletCreate .walletConnectModalBackBtn{
display: inline-flex;
align-items: center;
}
#walletConnectModal:is(.isCustomWalletCreate, .isWalletConnectEdit) .walletConnectModalCreateWalletBtn{
display: none;
}
#walletConnectModal .walletConnectModalPrimaryBtn{
width: var(--_wallet-connect-modal-submit-width);
height: var(--_wallet-connect-modal-submit-height);
min-width: 0;
min-height: 0;
padding: 0;
border: 0;
border-radius: 15.84px;
background: #172033;
color: #FFFFFF;
font-family: inherit;
font-size: 11.52px;
font-weight: 800;
line-height: 1;
letter-spacing: 0;
box-shadow: 0 11.52px 20.16px rgba(23, 32, 51, .13);
}
#walletConnectModal .walletConnectModalPrimaryBtn:hover,
#walletConnectModal .walletConnectModalPrimaryBtn:focus-visible{
background: var(--_wallet-connect-modal-primary-hover);
outline: none;
}
@media (max-width: 1008px){
#walletConnectModal{
--_wallet-connect-modal-width: min(950.4px, calc(100vw - 25.2px));
}
#walletConnectModal .walletConnectModalCard{
height: auto;
overflow: auto;
}
#walletConnectModal .walletConnectModalMain{
flex-direction: column;
height: auto;
gap: 25.2px;
}
#walletConnectModal .walletConnectModalSteps{
max-width: 100%;
height: auto;
}
#walletConnectModal .walletConnectModalInfo{
width: 100%;
height: auto;
min-height: 0;
}
}
@media (max-width: 558px){
#walletConnectModal{
padding: calc(var(--stickyTop, 0px) + 10.8px) 10.8px 10.8px;
--_wallet-connect-modal-close: 36px;
--_wallet-connect-modal-control-width: 79.2px;
--_wallet-connect-modal-body-gap: 21.6px;
}
#walletConnectModal .walletConnectModalCard{
height: auto;
max-height: calc(100dvh - (var(--stickyTop, 0px) + 21.6px));
border-radius: 19.8px;
overflow: auto;
}
#walletConnectModal .walletConnectModalHead{
min-height: auto;
padding-top: 21.6px;
}
#walletConnectModal .walletConnectModalTitle{
font-size: 20.7px;
}
#walletConnectModal .walletConnectModalSubtitle{
font-size: 9.9px;
}
#walletConnectModal .walletConnectModalBody{
padding-top: 19.8px;
}
#walletConnectModal .walletConnectModalStep{
grid-template-columns: var(--_wallet-connect-modal-step-marker) minmax(0, 1fr);
row-gap: 10.8px;
}
#walletConnectModal .walletConnectModalStepControl,
#walletConnectModal .walletConnectModalPasteBtn{
grid-column: 2;
}
#walletConnectModal .walletConnectModalDropdown{
width: min(171px, 100%);
}
#walletConnectModal .walletConnectModalActions{
align-items: stretch;
flex-direction: column;
justify-content: flex-start;
gap: 10.8px;
height: auto;
}
#walletConnectModal .walletConnectModalCreateWalletBtn{
justify-content: center;
}
#walletConnectModal .walletConnectModalPrimaryBtn{
width: 100%;
}
}
#taxPackExportModal .taxPackAirModal{
position: relative;
display: flex;
flex-direction: column;
gap: var(--_tax-pack-modal-gap);
width: min(var(--_tax-pack-modal-width), 100%);
max-height: calc(100dvh - (var(--_tax-pack-modal-overlay-pad-top) + var(--_tax-pack-modal-overlay-pad-bottom)));
margin: 0 auto;
padding: var(--_tax-pack-modal-pad-top) var(--_tax-pack-modal-pad-x) var(--_tax-pack-modal-pad-bottom);
border: 0;
border-radius: var(--_tax-pack-modal-radius);
background: var(--_tax-pack-modal-bg);
box-shadow: var(--_tax-pack-modal-shadow);
color: var(--_tax-pack-modal-text);
font-family: "Inter", var(--ct-font-sans);
overflow: auto;
overscroll-behavior: contain;
}
#taxPackExportModal .taxPackAirHeader{
display: flex;
align-items: center;
justify-content: space-between;
flex: 0 0 calc(74px * var(--_tax-pack-modal-scale));
gap: calc(26px * var(--_tax-pack-modal-scale));
min-width: 0;
}
#taxPackExportModal .taxPackAirTitleCopy{
display: flex;
flex-direction: column;
gap: calc(10px * var(--_tax-pack-modal-scale));
flex: 1 1 auto;
max-width: calc(760px * var(--_tax-pack-modal-scale));
min-width: 0;
}
#taxPackExportModal .taxPackAirHeaderActions{
display: flex;
align-items: center;
justify-content: flex-end;
flex: 0 0 auto;
gap: calc(10px * var(--_tax-pack-modal-scale));
min-width: 0;
}
#taxPackExportModal .taxPackAirTitle{
color: #18202D;
font-size: calc(52px * var(--_tax-pack-modal-scale));
font-weight: 800;
line-height: 1.2;
letter-spacing: 0;
}
#taxPackExportModal .taxPackAirClose{
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 calc(54px * var(--_tax-pack-modal-scale));
width: calc(54px * var(--_tax-pack-modal-scale));
height: calc(54px * var(--_tax-pack-modal-scale));
min-width: 0;
min-height: 0;
padding: 0;
border: 1px solid #E0E5EB;
border-radius: calc(27px * var(--_tax-pack-modal-scale));
background: #F2F4F6;
color: #687382;
font-size: calc(32px * var(--_tax-pack-modal-scale));
font-weight: 400;
line-height: 1;
box-shadow: none;
cursor: pointer;
transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
#taxPackExportModal .taxPackAirClose:hover{
background: #E8ECF1;
border-color: #D7DEE7;
color: #526070;
}
#taxPackExportModal .taxPackAirHero{
display: flex;
align-items: center;
justify-content: space-between;
flex: 0 0 calc(214px * var(--_tax-pack-modal-scale));
gap: calc(24px * var(--_tax-pack-modal-scale));
width: 100%;
min-width: 0;
padding: 0 calc(30px * var(--_tax-pack-modal-scale));
border: 1px solid var(--_tax-pack-modal-warning-border);
border-radius: calc(34px * var(--_tax-pack-modal-scale));
background: linear-gradient(90deg, #FFFFFF 0%, var(--_tax-pack-modal-warning-soft) 100%);
}
#taxPackExportModal .taxPackAirHero[data-tax-pack-tone="ready"]{
border-color: var(--_tax-pack-modal-ready-border);
background: linear-gradient(90deg, #FBFBF7 0%, #EEF3EA 58%, #E4ECE0 100%);
}
#taxPackExportModal .taxPackAirHeroCopy{
display: flex;
flex-direction: column;
gap: calc(10px * var(--_tax-pack-modal-scale));
width: calc(650px * var(--_tax-pack-modal-scale));
min-width: 0;
}
#taxPackExportModal .taxPackAirKicker{
color: var(--_tax-pack-modal-warning-muted);
font-size: calc(14px * var(--_tax-pack-modal-scale));
font-weight: 800;
line-height: 1.2;
letter-spacing: calc(.4px * var(--_tax-pack-modal-scale));
}
#taxPackExportModal .taxPackAirHero[data-tax-pack-tone="ready"] .taxPackAirKicker{
color: var(--_tax-pack-modal-ready-muted);
}
#taxPackExportModal .taxPackAirHeroTitle{
color: var(--_tax-pack-modal-warning);
font-size: calc(34px * var(--_tax-pack-modal-scale));
font-weight: 800;
line-height: 1.2;
letter-spacing: 0;
}
#taxPackExportModal .taxPackAirHero[data-tax-pack-tone="ready"] .taxPackAirHeroTitle{
color: var(--_tax-pack-modal-ready);
}
#taxPackExportModal .taxPackAirHeroText{
width: min(calc(620px * var(--_tax-pack-modal-scale)), 100%);
color: #6F7A89;
font-size: calc(16px * var(--_tax-pack-modal-scale));
font-weight: 600;
line-height: 1.2;
}
#taxPackExportModal .taxPackAirPeriod{
display: flex;
align-items: center;
gap: calc(8px * var(--_tax-pack-modal-scale));
width: calc(350px * var(--_tax-pack-modal-scale));
min-height: calc(42px * var(--_tax-pack-modal-scale));
}
#taxPackExportModal .taxPackAirPeriodLabel,
#taxPackExportModal .taxPackAirPeriodDash{
color: #8A94A2;
font-size: calc(12px * var(--_tax-pack-modal-scale));
font-weight: 800;
line-height: 1.2;
}
#taxPackExportModal .taxPackAirPeriodDash{
color: #9AA3AE;
font-size: calc(14px * var(--_tax-pack-modal-scale));
}
#taxPackExportModal .taxPackAirPeriodChip{
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(112px * var(--_tax-pack-modal-scale));
height: calc(34px * var(--_tax-pack-modal-scale));
border: 1px solid var(--_tax-pack-modal-warning-border);
border-radius: calc(17px * var(--_tax-pack-modal-scale));
background: #FFFFFF;
color: #253044;
font-size: calc(13px * var(--_tax-pack-modal-scale));
font-weight: 800;
line-height: 1;
white-space: nowrap;
}
#taxPackExportModal .taxPackAirHero[data-tax-pack-tone="ready"] .taxPackAirPeriodChip{
border-color: var(--_tax-pack-modal-ready-border);
}
#taxPackExportModal .taxPackAirHeroStats{
display: flex;
align-items: center;
justify-content: center;
width: calc(430px * var(--_tax-pack-modal-scale));
min-width: 0;
}
#taxPackExportModal .taxPackAirPackStat{
display: flex;
flex-direction: column;
justify-content: center;
gap: calc(12px * var(--_tax-pack-modal-scale));
width: 100%;
min-height: calc(168px * var(--_tax-pack-modal-scale));
padding: calc(28px * var(--_tax-pack-modal-scale)) calc(24px * var(--_tax-pack-modal-scale));
border: 1px solid var(--_tax-pack-modal-warning-border);
border-radius: calc(30px * var(--_tax-pack-modal-scale));
background: #FFFFFF;
}
#taxPackExportModal .taxPackAirHero[data-tax-pack-tone="ready"] .taxPackAirPackStat{
border-color: var(--_tax-pack-modal-ready-border);
}
#taxPackExportModal .taxPackAirPackLabel{
color: var(--_tax-pack-modal-warning-muted);
font-size: calc(13px * var(--_tax-pack-modal-scale));
font-weight: 800;
line-height: 1.2;
}
#taxPackExportModal .taxPackAirHero[data-tax-pack-tone="ready"] .taxPackAirPackLabel{
color: var(--_tax-pack-modal-ready-muted);
}
#taxPackExportModal .taxPackAirPackValue{
color: #18202D;
font-size: calc(34px * var(--_tax-pack-modal-scale));
font-weight: 800;
line-height: 1.15;
letter-spacing: 0;
}
#taxPackExportModal .taxPackAirMiniLedger{
display: flex;
flex-direction: column;
gap: calc(8px * var(--_tax-pack-modal-scale));
width: 100%;
}
#taxPackExportModal .taxPackAirLedgerLine{
display: flex;
align-items: center;
justify-content: space-between;
min-height: calc(24px * var(--_tax-pack-modal-scale));
gap: calc(12px * var(--_tax-pack-modal-scale));
color: #7A8594;
font-size: calc(12px * var(--_tax-pack-modal-scale));
font-weight: 700;
line-height: 1.2;
}
#taxPackExportModal .taxPackAirLedgerLine strong{
color: #253044;
font-weight: 800;
white-space: nowrap;
}
#taxPackExportModal .taxPackAirLedgerDivider{
height: 1px;
background: #F1F4F8;
}
#taxPackExportModal .taxPackAirNotice{
margin-top: calc(-10px * var(--_tax-pack-modal-scale));
color: #667287;
font-size: calc(13px * var(--_tax-pack-modal-scale));
font-weight: 600;
line-height: 1.35;
}
#taxPackExportModal .taxPackAirMain{
display: flex;
align-items: stretch;
gap: calc(28px * var(--_tax-pack-panel-scale));
flex: 0 0 var(--_tax-pack-panel-height);
width: 100%;
min-width: 0;
}
#taxPackExportModal .taxPackAirPanel{
display: flex;
flex-direction: column;
min-width: 0;
height: 100%;
border-radius: calc(34px * var(--_tax-pack-panel-scale));
background: #FFFFFF;
box-shadow: var(--_tax-pack-panel-shadow);
}
#taxPackExportModal .taxPackAirConfirmations,
#taxPackExportModal .taxPackAirExcluded{
width: calc(390px * var(--_tax-pack-panel-scale));
padding: calc(26px * var(--_tax-pack-panel-scale)) calc(28px * var(--_tax-pack-panel-scale));
gap: calc(18px * var(--_tax-pack-panel-scale));
}
#taxPackExportModal .taxPackAirNext{
width: calc(444px * var(--_tax-pack-panel-scale));
padding: calc(28px * var(--_tax-pack-panel-scale));
gap: calc(20px * var(--_tax-pack-panel-scale));
border: 1px solid #EEF2F6;
}
#taxPackExportModal .taxPackAirPanelTitle{
color: #18202D;
font-size: calc(24px * var(--_tax-pack-panel-scale));
font-weight: 800;
line-height: 1.2;
letter-spacing: 0;
}
#taxPackExportModal .taxPackAirPanelSub{
width: min(calc(320px * var(--_tax-pack-panel-scale)), 100%);
color: #7A8594;
font-size: calc(15px * var(--_tax-pack-panel-scale));
font-weight: 500;
line-height: 1.4;
}
#taxPackExportModal .taxPackAirSoftLine{
width: 100%;
height: 1px;
background: var(--_tax-pack-modal-soft-line);
}
#taxPackExportModal .taxPackAirConfirmRows{
display: flex;
flex-direction: column;
gap: 0;
}
#taxPackExportModal .taxPackAirConfirmRow{
display: flex;
align-items: center;
justify-content: space-between;
min-height: calc(48px * var(--_tax-pack-panel-scale));
color: #253044;
font-size: calc(16px * var(--_tax-pack-panel-scale));
font-weight: 740;
line-height: 1.2;
}
#taxPackExportModal .taxPackAirConfirmRow strong{
font-size: calc(18px * var(--_tax-pack-panel-scale));
font-weight: 740;
}
#taxPackExportModal .taxPackAirExcludedMain{
display: flex;
align-items: center;
gap: calc(18px * var(--_tax-pack-panel-scale));
min-height: calc(104px * var(--_tax-pack-panel-scale));
}
#taxPackExportModal .taxPackAirExcludedAccent{
flex: 0 0 calc(6px * var(--_tax-pack-panel-scale));
width: calc(6px * var(--_tax-pack-panel-scale));
height: calc(70px * var(--_tax-pack-panel-scale));
border-radius: calc(3px * var(--_tax-pack-panel-scale));
background: var(--_tax-pack-modal-warning-accent);
}
#taxPackExportModal .taxPackAirExcluded[data-tax-pack-tone="ready"] .taxPackAirExcludedAccent{
align-self: stretch;
height: auto;
background: var(--_tax-pack-modal-ready-accent);
}
#taxPackExportModal .taxPackAirExcluded[data-tax-pack-tone="ready"] .taxPackAirExcludedMain{
align-items: stretch;
min-height: 0;
margin-top: calc(18px * var(--_tax-pack-panel-scale));
}
#taxPackExportModal .taxPackAirExcludedCopy{
display: flex;
flex-direction: column;
gap: calc(8px * var(--_tax-pack-panel-scale));
min-width: 0;
}
#taxPackExportModal .taxPackAirExcludedValue{
color: var(--_tax-pack-modal-warning);
font-size: calc(30px * var(--_tax-pack-panel-scale));
font-weight: 720;
line-height: 1.15;
letter-spacing: 0;
}
#taxPackExportModal .taxPackAirExcluded[data-tax-pack-tone="ready"] .taxPackAirExcludedValue{
color: var(--_tax-pack-modal-ready);
}
#taxPackExportModal .taxPackAirExcludedText{
width: min(calc(289px * var(--_tax-pack-panel-scale)), 100%);
color: #526070;
font-size: calc(16px * var(--_tax-pack-panel-scale));
font-weight: 665;
line-height: 1.35;
}
#taxPackExportModal .taxPackAirNextHeader{
display: flex;
flex-direction: column;
gap: calc(7px * var(--_tax-pack-panel-scale));
min-width: 0;
}
#taxPackExportModal .taxPackAirEyebrow{
color: #8A96A8;
font-size: calc(10px * var(--_tax-pack-panel-scale));
font-weight: 700;
line-height: 1.2;
letter-spacing: calc(1.4px * var(--_tax-pack-panel-scale));
text-transform: uppercase;
}
#taxPackExportModal .taxPackAirNextTitle{
color: #172033;
font-size: calc(22px * var(--_tax-pack-panel-scale));
font-weight: 700;
line-height: 1.12;
letter-spacing: 0;
}
#taxPackExportModal .taxPackAirNextText{
color: #667287;
font-size: calc(13px * var(--_tax-pack-panel-scale));
font-weight: 400;
line-height: 1.35;
}
#taxPackExportModal .taxPackAirStepList{
display: flex;
flex-direction: column;
gap: calc(4px * var(--_tax-pack-panel-scale));
min-width: 0;
}
#taxPackExportModal .taxPackAirStep{
display: grid;
grid-template-columns: calc(36px * var(--_tax-pack-panel-scale)) minmax(0, 1fr);
align-items: center;
gap: calc(16px * var(--_tax-pack-panel-scale));
min-height: calc(64px * var(--_tax-pack-panel-scale));
padding: calc(14px * var(--_tax-pack-panel-scale));
border-top: 1px solid transparent;
color: #202A3A;
font-size: calc(14px * var(--_tax-pack-panel-scale));
font-weight: 700;
line-height: 1.2;
}
#taxPackExportModal .taxPackAirStep + .taxPackAirStep{
border-top-color: #F1F4F8;
}
#taxPackExportModal .taxPackAirStepNum{
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(36px * var(--_tax-pack-panel-scale));
height: calc(36px * var(--_tax-pack-panel-scale));
border-radius: calc(18px * var(--_tax-pack-panel-scale));
background: #F2F6FB;
color: #3D4C63;
font-size: calc(13px * var(--_tax-pack-panel-scale));
font-weight: 700;
line-height: 1;
}
#taxPackExportModal .taxPackAirStepNumWarn{
background: #FFF5EC;
color: #A45C1B;
}
#taxPackExportModal .taxPackAirStepNumOk{
background: #EEF8F3;
color: #28734F;
}
#taxPackExportModal .taxPackAirDetails{
flex: 0 0 auto;
border: 1px solid var(--_tax-pack-details-border);
border-radius: calc(28px * var(--_tax-pack-modal-scale));
background: var(--_tax-pack-details-bg);
overflow: hidden;
}
#taxPackExportModal .taxPackAirDetails > summary{
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
min-height: calc(74px * var(--_tax-pack-modal-scale));
padding: 0 calc(26px * var(--_tax-pack-modal-scale));
list-style: none;
color: #18202D;
font-size: calc(19px * var(--_tax-pack-modal-scale));
font-weight: 800;
line-height: 1.2;
cursor: pointer;
transition: background-color .16s ease;
}
#taxPackExportModal .taxPackAirDetails > summary:hover{
background: var(--_tax-pack-details-hover);
}
#taxPackExportModal .taxPackAirDetails > summary:focus-visible{
outline: none;
box-shadow: inset 0 0 0 2px rgba(107, 114, 128, .26);
}
#taxPackExportModal .taxPackAirDetails > summary::after{
content: "";
width: calc(12px * var(--_tax-pack-modal-scale));
height: calc(12px * var(--_tax-pack-modal-scale));
border-right: 2px solid #8A8F98;
border-bottom: 2px solid #8A8F98;
transform: translateY(-20%) rotate(45deg);
transition: transform .16s ease;
}
#taxPackExportModal .taxPackAirDetails[open] > summary::after{
transform: translateY(20%) rotate(225deg);
}
#taxPackExportModal .taxPackAirDetails > summary::-webkit-details-marker{
display: none;
}
#taxPackExportModal .taxPackDetailsGrid{
display: grid;
gap: calc(12px * var(--_tax-pack-modal-scale));
padding: 0 calc(26px * var(--_tax-pack-modal-scale)) calc(22px * var(--_tax-pack-modal-scale));
color: var(--_tax-pack-details-text);
font-size: calc(13px * var(--_tax-pack-modal-scale));
line-height: 1.4;
}
#taxPackExportModal .taxPackDetailsItem{
display: grid;
gap: calc(5px * var(--_tax-pack-modal-scale));
padding-top: calc(10px * var(--_tax-pack-modal-scale));
border-top: 1px solid var(--_tax-pack-details-line);
}
#taxPackExportModal .taxPackDetailsItem:first-child{
padding-top: 0;
border-top: 0;
}
#taxPackExportModal .taxPackDetailsLabel{
color: var(--_tax-pack-details-muted);
font-size: calc(10px * var(--_tax-pack-modal-scale));
font-weight: 650;
line-height: 1.2;
}
#taxPackExportModal .taxPackMiniList{
display: grid;
gap: calc(4px * var(--_tax-pack-modal-scale));
margin-top: calc(6px * var(--_tax-pack-modal-scale));
}
#taxPackExportModal :is(.taxPackAirSecondaryBtn, .taxPackAirPrimaryBtn){
display: inline-flex;
align-items: center;
justify-content: center;
height: calc(58px * var(--_tax-pack-modal-scale));
min-height: 0;
padding: 0;
border-radius: calc(22px * var(--_tax-pack-modal-scale));
font-size: calc(16px * var(--_tax-pack-modal-scale));
font-weight: 800;
line-height: 1;
cursor: pointer;
transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
#taxPackExportModal .taxPackAirSecondaryBtn{
width: calc(216px * var(--_tax-pack-modal-scale));
border: 1px solid #DDE5EE;
background: #FFFFFF;
color: #526070;
box-shadow: none;
}
#taxPackExportModal .taxPackAirSecondaryBtn:hover{
background: #F8FAFC;
border-color: #D1DAE6;
color: #3D4C63;
}
#taxPackExportModal .taxPackAirPrimaryBtn{
width: calc(230px * var(--_tax-pack-modal-scale));
border: 0;
background: #172033;
color: #FFFFFF;
box-shadow: 0 calc(16px * var(--_tax-pack-modal-scale)) calc(28px * var(--_tax-pack-modal-scale)) #17203322;
}
#taxPackExportModal .taxPackAirPrimaryBtn:hover{
background: #202A3A;
}
#taxPackExportModal .taxPackAirPrimaryBtn[disabled]{
opacity: 1;
background: #9CA3AF;
color: #FFFFFF;
box-shadow: none;
cursor: default;
}
@media (max-width: 980px){
#taxPackExportModal .taxPackAirModal{
padding: 28px;
}
#taxPackExportModal .taxPackAirHeader{
flex-basis: auto;
}
#taxPackExportModal .taxPackAirHeaderActions{
flex-wrap: wrap;
}
#taxPackExportModal .taxPackAirHero,
#taxPackExportModal .taxPackAirMain{
flex-direction: column;
flex-basis: auto;
height: auto;
}
#taxPackExportModal .taxPackAirHeroCopy,
#taxPackExportModal .taxPackAirHeroStats,
#taxPackExportModal .taxPackAirConfirmations,
#taxPackExportModal .taxPackAirExcluded,
#taxPackExportModal .taxPackAirNext{
width: 100%;
}
#taxPackExportModal .taxPackAirHero{
align-items: stretch;
padding: 24px;
}
}
@media (max-width: 760px){
#taxPackExportModal .taxPackAirModal{
padding: 22px 18px;
border-radius: 28px;
}
#taxPackExportModal .taxPackAirTitle{
font-size: 31px;
}
#taxPackExportModal .taxPackAirHeader{
flex-direction: column;
align-items: flex-start;
}
#taxPackExportModal .taxPackAirHeaderActions{
width: 100%;
justify-content: flex-start;
}
#taxPackExportModal .taxPackAirPeriod{
flex-wrap: wrap;
width: 100%;
}
#taxPackExportModal :is(.taxPackAirSecondaryBtn, .taxPackAirPrimaryBtn){
flex: 1 1 calc(50% - 6px);
width: auto;
}
#taxPackExportModal .taxPackAirClose{
margin-left: auto;
}
}
@media (max-width: 760px){
#txModal .taxManualPlaceCreateMeta{
grid-template-columns: 1fr;
}
}
/* ===== Tx modal redesign ===== */
#txModal .modalBody{
padding: var(--_tx-modal-body-pt) var(--_tx-modal-body-px) var(--_tx-modal-footer-pb);
background: transparent;
}
#txModal .txDealForm{
display: grid;
gap: 0;
font-family: "Inter", var(--ct-font-sans);
color: var(--_tx-modal-text);
}
#txModal .txDealTypeRow{
display: inline-flex;
align-items: stretch;
gap: 0;
width: min(100%, var(--_tx-type-segment-w));
min-height: calc(var(--_tx-modal-chip-h) + 6px);
min-width: 0;
margin-bottom: 17px;
padding: 3px;
border: 1px solid var(--_tx-type-segment-border);
border-radius: var(--_tx-type-segment-radius);
background: var(--_tx-type-segment-bg);
}
#txModal .txDealTypeChip{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
flex: 1 1 0;
width: 100%;
min-width: 0;
min-height: var(--_tx-modal-chip-h);
height: auto;
padding: 0 var(--_tx-modal-chip-px);
border-radius: var(--_tx-type-chip-radius);
border: 1px solid transparent;
background: transparent;
color: var(--_tx-type-segment-inactive-text);
font-size: 12px;
font-weight: 500;
line-height: 1;
box-shadow: none;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
html.is-booting #txModal .txDealTypeChip{
transition: none;
}
#txModal #txTypeBuyButton,
#txModal #txTypeSellButton{
font-size: 12px;
letter-spacing: 0;
}
#txModal #txTypeBuyButton::before,
#txModal #txTypeSellButton::before{
content: "";
display: inline-block;
width: var(--_tx-type-icon-size);
height: var(--_tx-type-icon-size);
flex: 0 0 var(--_tx-type-icon-size);
background: currentColor;
transform: translateY(.5px);
-webkit-mask: var(--_tx-type-icon-mask) center / contain no-repeat;
mask: var(--_tx-type-icon-mask) center / contain no-repeat;
}
#txModal #txTypeBuyButton{
--_tx-type-icon-mask: var(--_tx-type-icon-trend-up);
color: var(--_tx-type-segment-inactive-text);
}
#txModal #txTypeSellButton{
--_tx-type-icon-mask: var(--_tx-type-icon-trend-down);
color: var(--_tx-type-segment-inactive-text);
}
#txModal #txTypeBuyButton::before{
background: var(--_tx-type-icon-buy);
}
#txModal #txTypeSellButton::before{
background: var(--_tx-type-icon-sell);
}
#txModal .txDealTypeChip:hover,
#txModal .txDealTypeChip:focus-visible{
background: transparent;
border-color: transparent;
color: color-mix(in srgb, #6E6E70 75%, var(--_tx-modal-text) 25%);
box-shadow: none;
}
#txModal .txDealTypeChip.is-active{
color: #202733;
background: var(--_tx-type-segment-active-bg);
border-color: var(--_tx-type-segment-active-border);
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
#txModal .txDealForm[data-tx-side="buy"] #txTypeBuyButton.is-active{
--_tx-type-icon-mask: var(--_tx-type-icon-check);
color: #425F4B;
background: #E2ECE5;
border-color: var(--_tx-modal-chip-buy-border);
}
#txModal .txDealForm[data-tx-side="sell"] #txTypeSellButton.is-active{
--_tx-type-icon-mask: var(--_tx-type-icon-check);
color: #784D51;
background: #F3E5E5;
border-color: var(--_tx-modal-chip-sell-border);
}
#txModal .txDealForm[data-tx-side="transfer"] #txTypeMoreButton.is-active{
color: #516F8B;
background: #EAF5FC;
border-color: var(--_tx-modal-chip-transfer-border);
}
#txModal .txDealForm[data-tx-side="airdrop"] #txTypeMoreButton.is-active,
#txModal .txDealForm[data-tx-side="reward"] #txTypeMoreButton.is-active{
color: #705C88;
background: #F5ECFC;
border-color: var(--_tx-modal-chip-reward-border);
}
#txModal .txDealMorePicker{
display: flex;
align-items: stretch;
flex: 1 1 0;
position: relative;
width: auto;
min-width: 0;
}
#txModal .txDealTypeMoreButton{
min-width: 0;
}
#txModal .txDealChevron{
display: inline-block;
color: currentColor;
font-size: 12px;
line-height: 1;
transform: translateY(-3px);
}
#txModal .txDealDivider,
#txModal .txDealRowDivider{
height: 1px;
background: var(--_tx-modal-divider);
}
#txModal .txDealTaxModeDivider{
display: none;
}
#txModal #advancedTaxSection[aria-hidden="false"] + .txDealForm .txDealTaxModeDivider{
display: block;
}
#txModal #advancedTaxSection[aria-hidden="false"] + .txDealForm .txDealTaxModeDivider + .txDealTypeRow{
margin-top: 17px;
}
#txModal .txDealGrid{
display: grid;
grid-template-columns:
minmax(0, var(--_tx-modal-field-col-asset))
minmax(0, var(--_tx-modal-field-col-qty))
minmax(0, var(--_tx-modal-field-col-price))
minmax(0, 1fr);
column-gap: var(--_tx-modal-field-gap);
row-gap: 17px;
align-items: start;
justify-content: start;
padding: 13px 0 0;
}
#txModal .txDealField,
#txModal .txDealExtraCell{
min-width: 0;
}
#txModal .txDealFieldAsset{ grid-column: 1; }
#txModal .txDealFieldQty{ grid-column: 2; }
#txModal .txDealFieldPrice{ grid-column: 3; }
#txModal .txDealRowDivider{ grid-column: 1 / -1; }
#txModal #fxManualCell{
grid-column: 4;
grid-row: 1;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
align-self: start;
justify-self: end;
width: max-content;
max-width: none;
margin-top: 82px;
z-index: 1;
}
#txModal .txDealFieldPlace{
grid-column: 1;
align-self: start;
}
#txModal .txDealFieldDate{
grid-column: 2 / 4;
align-self: start;
max-width: 260px;
margin-left: 45px;
padding-top: 0;
}
#txModal .txDealFieldSymbol{ display: none; }
#txModal .txDealFieldFrom,
#txModal .txDealFieldTo{
grid-column: auto;
}
#txModal .txDealExtraCell{
grid-column: 1 / -1;
}
#txModal .txDealForm[data-tx-side="transfer"] .txDealFieldAsset{ grid-column: 1; }
#txModal .txDealForm[data-tx-side="transfer"] #cellAsset{ grid-column: 1; grid-row: 1; }
#txModal .txDealForm[data-tx-side="transfer"] #cellQty{ grid-column: 2; grid-row: 1; }
#txModal .txDealForm[data-tx-side="transfer"] #cellTime{ grid-column: 3; grid-row: 1; }
#txModal .txDealForm[data-tx-side="transfer"] .txDealRowDivider{ grid-row: 2; }
#txModal .txDealForm[data-tx-side="transfer"] #cellFrom{ grid-column: 1 / 2; grid-row: 3; }
#txModal .txDealForm[data-tx-side="transfer"] #cellFrom,
#txModal .txDealForm[data-tx-side="transfer"] #cellTo{
width: var(--_tx-modal-transfer-picker-w);
max-width: none;
}
#txModal .txDealForm[data-tx-side="transfer"] #cellTo{
grid-column: 2 / 3;
grid-row: 3;
margin-left: var(--_tx-modal-transfer-to-offset);
}
#txModal .txDealFieldLabel{
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 4px;
margin: 0 0 18px;
padding: 0;
min-height: 0;
height: auto;
border: 0;
background: transparent;
color: var(--_tx-modal-label);
font-family: "Inter", var(--ct-font-sans);
font-size: 10.5px;
font-weight: var(--_tx-modal-label-weight);
line-height: 1.2;
letter-spacing: .012em;
text-align: left;
box-shadow: none;
}
#txModal .txDealPickerLabel{
cursor: pointer;
}
#txModal .txDealPickerLabel:hover,
#txModal .txDealPickerLabel:focus-visible{
color: #3C4552;
box-shadow: none;
}
#txModal .txDealUnit{
display: none;
}
#txModal .txDealValueInput{
display: block;
width: 100%;
min-width: 0;
height: auto;
min-height: 24px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--_tx-modal-text);
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_tx-modal-value-size);
font-weight: var(--_tx-modal-value-weight);
line-height: 1.18;
letter-spacing: 0;
box-shadow: none;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
appearance: none;
-webkit-appearance: none;
}
#txModal .txDealValueInput::placeholder{
color: var(--_tx-modal-placeholder);
font-size: 20px;
font-weight: var(--_tx-modal-placeholder-weight);
opacity: 1;
}
#txModal .txDealValueInput:focus{
outline: none;
box-shadow: none;
}
#txModal .txDealField:focus-within .txDealFieldLabel{
color: #505A56;
}
#txModal .txDealNumberInput::-webkit-outer-spin-button,
#txModal .txDealNumberInput::-webkit-inner-spin-button{
margin: 0;
-webkit-appearance: none;
}
#txModal .txDealNumberInput{
appearance: textfield;
-moz-appearance: textfield;
}
#txModal .txDealSubValue{
margin-top: 0;
color: var(--_tx-modal-muted);
font-size: 11px;
font-weight: var(--_tx-modal-subvalue-weight);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#txModal .txDealAssetValueRow,
#txModal .txDealQuantityValueRow,
#txModal .txDealPriceValueRow{
display: flex;
align-items: baseline;
gap: 10px;
min-width: 0;
min-height: 39px;
}
#txModal .txDealAssetValueRow{
gap: 7px;
}
#txModal .txDealAssetInput{
flex: 0 1 auto;
width: var(--_tx-asset-symbol-w, 10ch);
min-width: 4ch;
max-width: min(14ch, 78%);
field-sizing: content;
caret-color: transparent;
cursor: pointer;
}
#txModal .txDealAssetPicker.is-search-mode .txDealAssetInput{
width: 100%;
max-width: none;
font-size: 14px;
line-height: 1.18;
caret-color: auto;
cursor: text;
}
#txModal .txDealAssetPicker.is-search-mode .txDealAssetInput::placeholder{
font-size: 14px;
}
#txModal .txDealAssetPicker.is-empty .txDealAssetInput{
width: 100%;
max-width: none;
min-width: 0;
}
#txModal .txDealAssetInput:placeholder-shown{
width: 100%;
max-width: none;
min-width: 0;
}
#txModal .txDealAssetPicker.is-empty .txDealAssetInput::placeholder{
font-size: 19px;
font-weight: 390;
}
#txModal .txDealAssetPicker.is-search-mode.is-empty .txDealAssetInput::placeholder{
font-size: 14px;
}
#txModal .txDealAssetName{
flex: 1 1 0;
min-width: 0;
max-width: none;
transform: translateY(-1px);
color: var(--_tx-modal-value-muted);
font-size: 11.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#txModal .txDealAssetName:empty,
#txModal .txDealPlacePicker .txDealSubValue{
display: none;
}
#txModal .txDealFieldAsset:has(.txDealAssetPicker.is-search-mode) + .txDealFieldQty .txDealAssetName{
display: none;
}
#txModal .txDealFieldAsset .txDealValueInput,
#txModal .txDealFieldQty .txDealValueInput,
#txModal .txDealFieldPrice .txDealValueInput{
font-size: var(--_tx-modal-top-value-size);
}
#txModal .txDealFieldPrice .txDealValueUnit{
font-size: 12px;
}
#txModal .txDealPlacePicker,
#txModal .txDateTimeTrigger{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
#txModal .txDealPlaceInput,
#txModal .txDateDisplay{
min-height: 39px;
}
#txModal .txDealFieldPlace .txDealValueInput,
#txModal .txDealFieldDate .txDateDisplayDate{
font-size: 21px;
}
#txModal .txDealQuantityValueRow .txDealValueInput,
#txModal .txDealPriceValueRow .txDealValueInput{
flex: 1 1 auto;
width: auto;
min-width: 0;
max-width: 100%;
overflow: hidden;
}
#txModal .txDealQuantityValueRow .txDealValueInput{
flex: 0 1 calc(100% - var(--_tx-modal-qty-reserve));
inline-size: calc(100% - var(--_tx-modal-qty-reserve));
max-inline-size: calc(100% - var(--_tx-modal-qty-reserve));
box-sizing: border-box;
}
#txModal .txDealFieldQty.is-negative-qty .txDealQuantityValueRow .txDealValueInput{
letter-spacing: -0.022em;
}
#txModal .txDealQuantityValueRow{
position: relative;
}
#txModal .txDealPriceValueRow{
position: relative;
gap: 0;
}
#txModal .txDealQuantityValueRow .txDealAssetName{
position: absolute;
top: 50%;
right: calc(100% + 12px);
width: 126px;
transform: translateY(-50%);
text-align: right;
}
#txModal .txDealValueUnit{
flex: 0 0 auto;
color: var(--_tx-modal-value-muted);
font-size: 11px;
font-weight: var(--_tx-modal-unit-weight);
line-height: 1.2;
letter-spacing: 0;
}
#txModal .txDealPriceUnit{
position: absolute;
top: 50%;
right: calc(100% + 12px);
width: 38px;
transform: translateY(-50%);
text-align: right;
}
#txModal .txDealQtyUnit,
#txModal .txDealQtyUnit:empty{
display: none;
}
#txModal .txDealAssetPicker,
#txModal .txDealPlacePicker,
#txModal .txDealTransferPicker,
#txModal .txDateTimePicker{
position: relative;
width: 100%;
min-width: 0;
}
#txModal .txDealTransferPicker{
width: var(--_tx-modal-transfer-picker-w);
max-width: none;
}
#txModal #tAssetPreset,
#txModal #tSide,
#txModal #tPlacePreset,
#txModal #tFromPlace,
#txModal #tToPlace,
#txModal .txVisuallyHiddenControl{
position: absolute;
width: 1px;
min-width: 1px;
height: 1px;
min-height: 1px;
padding: 0;
margin: -1px;
border: 0;
opacity: 0;
pointer-events: none;
overflow: hidden;
clip-path: inset(50%);
}
#txModal .txDealAssetInput{
text-transform: none;
}
#txModal .txDealAssetPicker.is-search-mode .txDealAssetInput{
text-transform: none;
}
#txModal .txDealMorePicker::after,
#txModal .txDealAssetPicker::after,
#txModal .txDealPlacePicker::after,
#txModal .txDealTransferPicker::after{
content: none;
display: none;
}
#txModal .txDealTransferPlaceInput{
cursor: pointer;
}
#txModal .txDealTransferPicker.is-disabled .txDealPickerLabel,
#txModal .txDealTransferPicker.is-disabled .txDealTransferPlaceInput{
cursor: default;
color: var(--_tx-modal-muted);
}
#txModal .txDealTransferPicker.is-no-places-state .txDealTransferPlaceInput{
font-size: var(--_tx-modal-transfer-empty-size);
font-weight: var(--_tx-modal-transfer-empty-weight);
}
#txModal .txDateTimeDisplayInput{
font-size: 20px;
font-weight: var(--_tx-modal-value-weight);
}
#txModal .txDealForm .txDropdownMenu,
#txModal #advancedTaxSection .txDropdownMenu{
position: fixed;
top: 0;
left: 0;
right: auto;
z-index: 84;
min-width: 0;
border: 1px solid #E3E5E6;
border-radius: 13px;
background: #FFFFFF;
box-shadow: 0 14px 34px rgba(15, 23, 42, .14);
padding: 6px;
overflow: hidden;
transform: translateY(4px);
}
#txModal .txDealForm .txDropdownOption,
#txModal #advancedTaxSection .txDropdownOption{
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 32px;
height: auto;
border: 0;
border-radius: 9px;
padding: 7px 12px;
font-family: "Inter", var(--ct-font-sans);
font-size: 12px;
font-weight: 450;
line-height: 1.15;
color: #252C36;
background: transparent;
box-shadow: none;
text-align: left;
}
#txModal .txDealForm .txDropdownOption.is-selected,
#txModal #advancedTaxSection .txDropdownOption.is-selected{
background: #EEF1EF;
color: #111827;
box-shadow: none;
}
#txModal .txDealForm .txDropdownOption:hover,
#txModal .txDealForm .txDropdownOption:focus-visible,
#txModal #advancedTaxSection .txDropdownOption:hover,
#txModal #advancedTaxSection .txDropdownOption:focus-visible{
background: #F2F3F3;
color: #111827;
border-color: transparent;
box-shadow: none;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"]{
--_tx-asset-picker-option-text: #252C36;
--_tx-asset-picker-group-text: #7B818A;
--_tx-asset-picker-prompt-width: 334px;
--_tx-asset-picker-prompt-height: 50px;
--_tx-asset-picker-prompt-offset-x: -10px;
--_tx-asset-picker-search-results-width-boost: 35px;
--_tx-asset-picker-prompt-bg: #FFFFFF;
--_tx-asset-picker-prompt-shadow: 0 18px 42px rgba(38, 48, 65, .07);
--_tx-asset-picker-back-bg: #F4F6F8;
--_tx-asset-picker-back-icon: #6D7785;
--_tx-asset-picker-back-text: #65707D;
--_tx-asset-picker-hint-title: #7C8796;
--_tx-asset-picker-hint-text: #A0A9B5;
--_tx-asset-picker-search-bg: #EAF2FA;
--_tx-asset-picker-search-border: #D9E5F1;
--_tx-asset-picker-search-text: #3E6286;
--_tx-asset-picker-search-shadow: 0 8px 18px rgba(45, 95, 145, .055);
--_tx-asset-picker-search-logo-size: 25px;
--_tx-asset-picker-local-logo-size: 19px;
--_tx-asset-picker-search-logo-bg: #EEF4F8;
--_tx-asset-picker-search-logo-text: #68717E;
--_tx-asset-picker-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
border: 1px solid #E3E5E6;
border-radius: 14px;
background: #FFFFFF;
box-shadow: 0 16px 38px rgba(15, 23, 42, .16);
padding: 6px 6px 10px;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] .assetPickerSearchControls{
gap: 8px;
flex-wrap: nowrap;
justify-content: flex-start;
margin: 0 0 10px;
padding: 0;
border: 0;
background: transparent;
width: 100%;
box-sizing: border-box;
align-items: center;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"].is-search-prompt{
border: 0;
border-radius: 18px;
background: var(--_tx-asset-picker-prompt-bg);
box-shadow: var(--_tx-asset-picker-prompt-shadow);
padding: 8px 10px;
justify-content: center;
overflow: visible;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"].is-search-prompt .assetPickerSearchControls{
margin: 0;
gap: 0;
justify-content: space-between;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] #coinResults{
display: flex;
flex-direction: column;
overflow-y: auto;
border: 0;
background: transparent;
padding: 0;
color: var(--_tx-asset-picker-option-text);
font-family: "Inter", var(--ct-font-sans);
font-size: 12px;
line-height: 1.15;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] #coinResults .txDropdownOption{
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 31px;
border: 0;
border-radius: 9px;
padding: 7px 12px;
color: var(--_tx-asset-picker-option-text);
background: transparent;
box-shadow: none;
text-align: left;
cursor: pointer;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] #coinResults .txDropdownOption--more{
justify-content: center;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] #coinResults .txDropdownOption.is-selected{
background: #EEF1EF;
color: #111827;
box-shadow: none;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] #coinResults .txDropdownOption:hover,
.txAssetPickerDropdown[data-portal-owner="tx-modal"] #coinResults .txDropdownOption:focus-visible{
background: #F2F3F3;
color: #111827;
box-shadow: none;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"].is-search-mode #coinResults .txDropdownOption-searchText{
display: flex;
flex-direction: column;
gap: 3px;
flex: 1 1 auto;
min-width: 0;
width: 100%;
font-weight: 300;
line-height: 1.18;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"].is-search-mode #coinResults .txDropdownOption{
align-items: center;
gap: 9px;
min-height: 48px;
margin: 0 0 7px;
padding: 7px 11px 8px;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] #coinResults .txDropdownOption-searchLogo,
.txAssetPickerDropdown[data-portal-owner="tx-modal"] #coinResults .txDropdownOption-localLogo{
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--_tx-asset-picker-search-logo-size);
height: var(--_tx-asset-picker-search-logo-size);
flex: 0 0 var(--_tx-asset-picker-search-logo-size);
overflow: hidden;
border-radius: 50%;
background: var(--_tx-asset-picker-search-logo-bg);
color: var(--_tx-asset-picker-search-logo-text);
font-size: 11px;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] #coinResults .txDropdownOption-localLogo{
width: var(--_tx-asset-picker-local-logo-size);
height: var(--_tx-asset-picker-local-logo-size);
flex-basis: var(--_tx-asset-picker-local-logo-size);
margin-right: 8px;
font-size: 9.5px;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] #coinResults .txDropdownOption-searchLogo img,
.txAssetPickerDropdown[data-portal-owner="tx-modal"] #coinResults .txDropdownOption-localLogo img{
display: block;
width: 100%;
height: 100%;
object-fit: contain;
background: transparent;
border-radius: inherit;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] #coinResults .txDropdownOption-searchLogo.is-fallback,
.txAssetPickerDropdown[data-portal-owner="tx-modal"] #coinResults .txDropdownOption-localLogo.is-fallback{
background: var(--_tx-asset-picker-search-logo-bg);
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"].is-search-mode #coinResults .txDropdownOption-searchTop{
display: flex;
align-items: baseline;
gap: 7px;
min-width: 0;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"].is-search-mode #coinResults .txDropdownOption-searchTicker{
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
color: #252C36;
font-size: 12px;
font-weight: 440;
white-space: nowrap;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"].is-search-mode #coinResults .txDropdownOption-searchRank{
flex: 0 0 auto;
color: #8B94A1;
font-size: 10.5px;
font-weight: 320;
white-space: nowrap;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"].is-search-mode #coinResults .txDropdownOption-searchName{
display: -webkit-box;
overflow: hidden;
color: #68717E;
font-size: 11px;
font-weight: 300;
line-height: 1.2;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] #coinResults .txDropdownSectionLabel{
display: block;
padding: 6px 12px;
color: var(--_tx-asset-picker-group-text);
font-family: "Inter", var(--ct-font-sans);
font-size: 11px;
font-weight: 500;
line-height: 1.2;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] #coinResults .txDropdownDivider{
height: 1px;
margin: 5px 6px 4px;
background: #EEF0F1;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] #coinResults .txDropdownOption-ticker{
flex-shrink: 0;
min-width: 9ch;
font-weight: 540;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] #coinResults .txDropdownOption-name{
flex: 1 1 auto;
min-width: 0;
margin-left: 7px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--_tx-asset-picker-group-text);
font-weight: 420;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] #coinResults .txDropdownOption-count{
flex-shrink: 0;
min-width: 0;
margin-left: 8px;
text-align: left;
color: var(--_tx-asset-picker-group-text);
font-variant-numeric: tabular-nums;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] > .assetPickerActionRow{
display: flex;
align-items: center;
width: 100%;
min-height: 31px;
border: 0;
border-radius: 9px;
padding: 7px 12px;
color: #252C36;
background: #F2F3F3;
box-shadow: none;
font-size: 12px;
font-weight: 500;
text-align: left;
cursor: pointer;
box-sizing: border-box;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] > .assetPickerActionRow:hover,
.txAssetPickerDropdown[data-portal-owner="tx-modal"] > .assetPickerActionRow:focus-visible{
background: #E1E3E4;
color: #111827;
box-shadow: none;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] .assetPickerPrimaryBtn,
.txAssetPickerDropdown[data-portal-owner="tx-modal"] .assetPickerLinkBtn{
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 31px;
padding: 0 9px;
border-radius: 13px;
border: 1px solid transparent;
font-family: "Inter", var(--ct-font-sans);
font-size: 10.8px;
font-weight: 630;
line-height: 1;
text-decoration: none;
box-shadow: none;
cursor: pointer;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] .assetPickerLinkBtn{
flex: 0 0 auto;
min-width: 74px;
background: var(--_tx-asset-picker-back-bg);
color: var(--_tx-asset-picker-back-text);
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] .assetPickerPrimaryBtn{
flex: 0 0 auto;
min-width: 79px;
border-color: var(--_tx-asset-picker-search-border);
background: var(--_tx-asset-picker-search-bg);
color: var(--_tx-asset-picker-search-text);
box-shadow: var(--_tx-asset-picker-search-shadow);
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] .assetPickerControlIcon{
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
color: currentColor;
font-size: 11.7px;
font-weight: 630;
line-height: 1;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] .assetPickerLinkBtn .assetPickerControlIcon{
color: var(--_tx-asset-picker-back-icon);
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] .assetPickerPrimaryBtn .assetPickerControlIcon{
width: 10.8px;
height: 10.8px;
font-size: 0;
background: currentColor;
-webkit-mask: var(--_tx-asset-picker-search-icon) center / contain no-repeat;
mask: var(--_tx-asset-picker-search-icon) center / contain no-repeat;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] .assetPickerSearchHint{
display: none;
flex: 1 1 auto;
min-width: 102px;
max-width: 118px;
flex-direction: column;
gap: 2px;
font-family: "Inter", var(--ct-font-sans);
line-height: 1.05;
white-space: nowrap;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"].is-search-prompt .assetPickerSearchHint{
display: flex;
flex: 0 0 118px;
align-items: center;
text-align: center;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] .assetPickerSearchHintTitle{
color: var(--_tx-asset-picker-hint-title);
font-size: 10.5px;
font-weight: 800;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] .assetPickerSearchHintText{
color: var(--_tx-asset-picker-hint-text);
font-size: 9.5px;
font-weight: 600;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] .assetPickerLinkBtn:hover,
.txAssetPickerDropdown[data-portal-owner="tx-modal"] .assetPickerLinkBtn:focus-visible{
background: #EAEEF2;
color: #343B46;
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] .assetPickerPrimaryBtn:hover,
.txAssetPickerDropdown[data-portal-owner="tx-modal"] .assetPickerPrimaryBtn:focus-visible{
background: #E4EDF8;
border-color: #CFDDEA;
color: var(--_tx-asset-picker-search-text);
box-shadow: 0 10px 22px rgba(45, 95, 145, .08);
}
.txAssetPickerDropdown[data-portal-owner="tx-modal"] .resultNote{
display: none;
}
#txModal .txFxToggleLabel{
display: inline-flex;
align-items: center;
order: 2;
flex: 0 0 auto;
gap: 7px;
margin: 2px 0 0;
min-height: 28px;
padding: 0 10px;
border: 1px solid var(--_tx-modal-setting-row-border);
border-radius: 10px;
background: var(--_tx-modal-setting-row-bg);
color: #67717E;
font-size: 10.5px;
font-weight: 500;
box-shadow: none;
cursor: pointer;
}
#txModal .txFxToggleLabel input[type="checkbox"]{
width: 13px;
height: 13px;
accent-color: #6E747C;
cursor: pointer;
}
#txModal .txDealForm input[type="checkbox"]{
width: auto;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
#txModal .txDealForm input[type="checkbox"]:focus,
#txModal .txDealForm input[type="checkbox"]:focus-visible{
outline: none;
box-shadow: none;
border-color: transparent;
}
#txModal #fxManualWrap{
order: 1;
flex: 0 0 auto;
margin-top: 0;
display: flex;
align-items: center;
width: fit-content;
max-width: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
box-sizing: border-box;
}
#txModal .txModalInlineRow{
flex-wrap: nowrap;
gap: 8px;
align-items: center;
}
#txModal #fxCurrencyPicker{
position: relative;
width: var(--_tx-fx-select-w);
min-width: var(--_tx-fx-select-w);
}
#txModal #fxCurrencyPicker::after{
right: 8px;
border-color: #65717F;
}
#txModal #fxCurrencyPickerInput,
#txModal #fxRate,
#txModal .txAutoPlaceSelect{
height: 31px;
min-height: 31px;
box-sizing: border-box;
border-radius: 12px;
border: 1px solid #DEE3E9;
background: #FFFFFF;
color: #1D2430;
font-size: 10.8px;
font-weight: 450;
line-height: 1;
padding: 8px 9px;
box-shadow: none;
}
#txModal #fxRate{
width: var(--_tx-fx-rate-w);
min-width: var(--_tx-fx-rate-w);
}
#txModal #fxCurrencyPickerInput{
padding: 7px 18px 7px 8px;
}
#txModal #fxManualWrap #fxCurrencyPickerInput,
#txModal #fxManualWrap #fxRate{
height: 28px;
min-height: 28px;
max-height: 28px;
background: color-mix(in srgb, var(--_tx-modal-surface) 70%, #FFFFFF 30%);
font-size: 10.25px;
line-height: 1;
padding-top: 5px;
padding-bottom: 5px;
}
#txModal #fxManualWrap #fxCurrencyPickerInput{
padding-right: 18px;
padding-left: 8px;
}
#txModal #fxManualWrap #fxRate{
padding-right: 8px;
padding-left: 8px;
}
#txModal #fxCurrencyPickerDropdown{
padding: 5px;
border-radius: 11px;
}
#txModal #fxCurrencyPickerDropdown .txDropdownOption{
min-height: 26px;
padding: 4px 10px;
border-radius: 8px;
font-size: 10.25px;
line-height: 1.1;
}
#txModal #fxCurrencyPicker > #fxCurrency.txDropdownNative{
position: absolute;
opacity: 0;
pointer-events: none;
width: 1px;
height: 1px;
padding: 0;
margin: 0;
border: 0;
overflow: hidden;
}
#txModal #placeCustomWrap{
grid-column: 1 / -1;
grid-row: auto;
margin-top: 0;
}
#txModal #txProofResetWarningInline{
grid-column: 1 / -1;
grid-row: auto;
}
#txModal .customPlaceCell{
display: none;
}
#txModal .customPlaceCell.show{
display: block;
}
#txModal #tPlacePreset.taxPlaceLocked,
#txModal #tPlacePreset.taxPlaceLocked:disabled{
opacity: 0;
cursor: default;
pointer-events: none;
}
#txModal #placeCustomWrap .inlineRow{
gap: 10px;
align-items: center;
}
#txModal #placeCustomWrap .small,
#txModal #placeCustomWrap .placeHelp{
color: #7A8698;
font-size: 11px;
line-height: 1.4;
}
#txModal #placeCustomWrap .placeHelp{
position: static;
margin-top: 6px;
font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text", Inter, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
#txModal #btnOpenCreatePlaceFromTx{
min-height: 32px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid #D8DBDD;
background: #FFFFFF;
color: #4F5966;
font-family: "Inter", var(--ct-font-sans);
font-size: 12px;
font-weight: 500;
box-shadow: none;
}
#txModal #btnOpenCreatePlaceFromTx:hover,
#txModal #btnOpenCreatePlaceFromTx:focus-visible{
background: #F2F3F3;
border-color: #CED2D5;
color: #252C36;
box-shadow: none;
}
#txModal #txProofResetWarningInline{
color: var(--bad);
font-size: 12px;
line-height: 1.35;
}
#txModal .txDealFooter{
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--_tx-modal-action-divider);
}
#txModal .txDealSummary{
min-width: 0;
}
#txModal .txDealSummary[hidden]{
visibility: hidden;
display: block;
}
#txModal .txDealSummaryLabel{
margin-bottom: 5px;
color: var(--_tx-modal-label);
font-size: 10.5px;
font-weight: var(--_tx-modal-label-weight);
line-height: 1.2;
}
#txModal .txDealSummaryValue{
color: var(--_tx-modal-text);
font-size: 26px;
font-weight: var(--_tx-modal-value-weight);
line-height: 1.08;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
}
#txModal .txDealActions{
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
flex: 0 0 auto;
}
#txModal #btnAdd.txDealSaveButton{
min-height: 40px;
width: auto;
padding: 0 20px;
border-radius: 12px;
border: 1px solid var(--_tx-modal-dark);
background: var(--_tx-modal-dark);
color: #FFFFFF;
font-family: "Inter", var(--ct-font-sans);
font-size: 12px;
font-weight: 580;
box-shadow: none;
}
#txModal #btnAdd.txDealSaveButton:hover,
#txModal #btnAdd.txDealSaveButton:focus-visible{
background: var(--_tx-modal-dark-hover);
border-color: var(--_tx-modal-dark-hover);
box-shadow: none;
opacity: 1;
}
#txModal #btnClearForm.txDealClearButton{
min-height: 36px;
width: auto;
padding: 0 12px;
border: 0;
border-radius: 999px;
background: transparent;
color: #6E7580;
font-family: "Inter", var(--ct-font-sans);
font-size: 11px;
font-weight: 500;
box-shadow: none;
}
#txModal #btnClearForm.txDealClearButton:hover,
#txModal #btnClearForm.txDealClearButton:focus-visible{
background: #ECEEEE;
color: #343B46;
box-shadow: none;
}
#txModal .sellCoverageWarning{
margin-top: 12px;
border: 1px solid rgba(255,176,32,.33);
background: linear-gradient(180deg, rgba(255,224,148,.17), rgba(255,193,84,.11));
border-radius: 14px;
padding: 12px;
box-shadow: 0 10px 26px rgba(140,92,20,.14);
}
#txModal .sellCoverageWarningTitle{
font-size: 15px;
font-weight: 850;
color: #8A5A00;
line-height: 1.25;
}
#txModal .sellCoverageWarningText{
margin-top: 6px;
font-size: 13px;
color: color-mix(in srgb, var(--text) 86%, #8A5A00 14%);
line-height: 1.4;
}
#txModal .txModalFxHint{
margin-top: 6px;
}
#txModal .txModalHint{
margin-top: 10px;
}
#txModal .txAutoPlaceWrap{
margin-top: 8px;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
@media (max-width: 780px){
#txModal{
--_tx-modal-head-px: 20px;
--_tx-modal-body-px: 20px;
--_tx-modal-radius: 22px;
--_tx-modal-overlay-pad-top: 8px;
--_tx-modal-overlay-pad-bottom: 8px;
}
#txModal .modalHead{
align-items: flex-start;
}
#txModal .modalTitle{
font-size: 22px;
}
#txModal .txModalHeadRight{
gap: 8px;
}
#txModal .taxModeCtl{
min-height: 24px;
padding: 0 8px;
}
#txModal .taxModeCtlTop > span:first-child{
display: none;
}
#txModal .txDealTypeRow{
width: 100%;
max-width: none;
margin-bottom: 14px;
overflow: visible;
}
#txModal .txDealTypeChip{
min-width: 0;
padding: 0 10px;
flex: 1 1 0;
}
#txModal .txDealTypeMoreButton{
min-width: 0;
}
#txModal .txDealGrid,
#txModal .txDealForm[data-tx-side="transfer"] .txDealGrid{
grid-template-columns: 1fr;
row-gap: 14px;
}
#txModal .txDealFieldAsset,
#txModal .txDealFieldQty,
#txModal .txDealFieldPrice,
#txModal .txDealFieldPlace,
#txModal .txDealFieldDate,
#txModal .txDealFieldFrom,
#txModal .txDealFieldTo,
#txModal .txDealForm[data-tx-side="transfer"] .txDealFieldAsset,
#txModal .txDealForm[data-tx-side="transfer"] .txDealFieldFrom,
#txModal .txDealForm[data-tx-side="transfer"] .txDealFieldTo,
#txModal .txDealForm[data-tx-side="transfer"] .txDealFieldQty,
#txModal .txDealForm[data-tx-side="transfer"] .txDealFieldDate{
grid-column: 1;
grid-row: auto;
}
#txModal .txDealForm[data-tx-side="transfer"] #cellAsset,
#txModal .txDealForm[data-tx-side="transfer"] #cellQty,
#txModal .txDealForm[data-tx-side="transfer"] #cellTime,
#txModal .txDealForm[data-tx-side="transfer"] #cellFrom,
#txModal .txDealForm[data-tx-side="transfer"] #cellTo{
grid-column: 1;
grid-row: auto;
}
#txModal .txDealFieldDate{
max-width: none;
margin-left: 0;
}
#txModal .txDealForm[data-tx-side="transfer"] #cellTo{
margin-left: 0;
}
#txModal .txDealForm[data-tx-side="transfer"] #cellFrom,
#txModal .txDealForm[data-tx-side="transfer"] #cellTo{
width: 100%;
max-width: 100%;
}
#txModal .txDealTransferPicker{
width: 100%;
max-width: 100%;
}
#txModal #fxManualCell{
grid-column: 1;
grid-row: auto;
align-items: flex-start;
flex-direction: column;
justify-self: start;
width: auto;
max-width: 100%;
margin-top: 0;
}
#txModal .txDealQuantityValueRow .txDealAssetName{
position: static;
width: auto;
max-width: 45%;
transform: none;
text-align: left;
}
#txModal .txDealPriceUnit{
position: static;
width: auto;
transform: none;
text-align: left;
}
#txModal .txDealPriceValueRow{
gap: 10px;
}
#txModal .txDealFooter{
align-items: stretch;
flex-direction: column;
}
#txModal .txDealActions{
justify-content: space-between;
}
#txModal #btnAdd.txDealSaveButton{
flex: 1 1 auto;
}
#txModal #fxManualWrap{
order: 2;
width: 100%;
}
#txModal .txFxToggleLabel{
order: 1;
}
#txModal #fxManualWrap .txModalInlineRow{
flex-wrap: wrap;
}
#txModal #fxCurrencyPicker,
#txModal #fxRate{
width: 100%;
min-width: 0;
}
}
.btnIcon{
width: var(--ct-h-secondary);
min-width: var(--ct-h-secondary);
height: var(--ct-h-secondary);
min-height: var(--ct-h-secondary);
padding: 0;
border-radius: var(--ct-radius-control);
font-weight: 800;
line-height: 1;
}
.viewHidden{ display:none; }
/* ===== Signed-out auth gate ===== */
.authGate{
--_auth-gate-font: "Inter", var(--ct-font-sans);
--_auth-gate-text: #121A28;
--_auth-gate-muted: #687386;
--_auth-gate-line: #E4E9F0;
--_auth-gate-soft: #F7F9FC;
--_auth-gate-primary: #18202D;
--_auth-gate-primary-hover: #101722;
box-sizing: border-box;
min-height: 100vh;
padding: 74px 18px;
background:
radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .86), rgba(255, 255, 255, 0) 32%),
linear-gradient(180deg, #F7F8FA 0%, #EEF2F6 100%);
color: var(--_auth-gate-text);
font-family: var(--_auth-gate-font);
}
.authGate[hidden]{
display: none;
}
.authGateShell{
display: flex;
align-items: center;
justify-content: center;
min-height: calc(100vh - 148px);
}
.authGateCard{
box-sizing: border-box;
display: grid;
gap: 28px;
width: min(100%, 680px);
padding: 42px;
border: 1px solid rgba(228, 233, 240, .92);
border-radius: 24px;
background: rgba(255, 255, 255, .84);
box-shadow: 0 18px 42px rgba(38, 48, 65, .07), 0 1px 0 rgba(255, 255, 255, .86) inset;
}
.authGateCopy{
display: grid;
gap: 14px;
}
.authGateEyebrow{
color: #7C8798;
font-size: 13px;
font-weight: 760;
line-height: 1.2;
letter-spacing: 0;
}
.authGateTitle{
max-width: 620px;
margin: 0;
color: var(--_auth-gate-text);
font-size: 36px;
font-weight: 820;
line-height: 1.08;
letter-spacing: 0;
}
.authGateSubtitle{
max-width: 600px;
margin: 0;
color: var(--_auth-gate-muted);
font-size: 16px;
font-weight: 460;
line-height: 1.48;
letter-spacing: 0;
}
.authGateActions{
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.authGateBtn{
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 18px;
border: 1px solid var(--_auth-gate-line);
border-radius: 12px;
font-family: var(--_auth-gate-font);
font-size: 14px;
font-weight: 760;
line-height: 1.1;
letter-spacing: 0;
cursor: pointer;
transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.authGateBtn:hover,
.authGateBtn:focus-visible{
transform: translateY(-1px);
}
.authGateBtnPrimary{
border-color: var(--_auth-gate-primary);
background: var(--_auth-gate-primary);
color: #FFFFFF;
box-shadow: 0 12px 24px rgba(18, 26, 40, .15);
}
.authGateBtnPrimary:hover,
.authGateBtnPrimary:focus-visible{
border-color: var(--_auth-gate-primary-hover);
background: var(--_auth-gate-primary-hover);
box-shadow: 0 14px 28px rgba(18, 26, 40, .18);
}
.authGateBtnSecondary,
.authGateBtnGhost{
background: #FFFFFF;
color: #4F5C70;
}
.authGateBtnSecondary:hover,
.authGateBtnSecondary:focus-visible,
.authGateBtnGhost:hover,
.authGateBtnGhost:focus-visible{
border-color: #D5DDE7;
background: var(--_auth-gate-soft);
}
.authGateNotice{
box-sizing: border-box;
min-height: 42px;
padding: 11px 13px;
border: 1px solid var(--_auth-gate-line);
border-radius: 12px;
background: #FFFFFF;
color: var(--_auth-gate-muted);
font-size: 14px;
font-weight: 620;
line-height: 1.35;
letter-spacing: 0;
}
.authGateNotice[hidden]{
display: none;
}
html.ct-auth-gate-active{
--stickyTop: 0px;
}
html.ct-auth-gate-active .topbar,
html.ct-auth-gate-active > body > .wrap,
html.ct-auth-gate-active #txModal,
html.ct-auth-gate-active #csvImportModal,
html.ct-auth-gate-active #taxPackExportModal,
html.ct-auth-gate-active #walletConnectModal,
html.ct-auth-gate-active #walletTxPickerModal,
html.ct-auth-gate-active #sourcesPickerModal,
html.ct-auth-gate-active #createPlaceModal{
display: none;
}
@media (max-width: 720px){
.authGate{
padding: 34px 12px;
}
.authGateShell{
min-height: calc(100vh - 68px);
}
.authGateCard{
gap: 24px;
padding: 28px 20px;
border-radius: 18px;
}
.authGateTitle{
font-size: 27px;
}
.authGateActions{
display: grid;
}
.authGateBtn{
width: 100%;
}
}
/* ===== Account settings view ===== */
#viewAccount{
--_account-scale: .72;
--_account-shell-scale: .8;
--_account-font: "Inter", var(--ct-font-sans);
--_account-shell-w: calc(1456px * var(--_account-shell-scale));
--_account-shell-radius: calc(48px * var(--_account-shell-scale));
--_account-shell-pad-top: calc(54px * var(--_account-shell-scale));
--_account-shell-pad-x: calc(58px * var(--_account-shell-scale));
--_account-shell-pad-bottom: calc(46px * var(--_account-shell-scale));
--_account-shell-gap: calc(28px * var(--_account-shell-scale));
--_account-shell-bg: rgba(255, 255, 255, .75);
--_account-shell-border: rgba(228, 228, 225, .5);
--_account-shell-shadow: none;
--_account-panel-radius: calc(34px * var(--_account-scale));
--_account-row-radius: calc(26px * var(--_account-scale));
--_account-control-radius: calc(18px * var(--_account-scale));
--_account-text: #121A28;
--_account-muted: #8C96A5;
--_account-soft: #FAFBFC;
--_account-line: #E6EBF2;
--_account-control-line: #DDE4EC;
--_account-content-card-bg: rgba(255, 255, 255, .48);
--_account-content-card-border: #E5EAF1;
--_account-content-card-radius: 21px;
--_account-content-card-shadow: 0 7px 17px rgba(38, 48, 65, .026), 0 1px 0 rgba(255, 255, 255, .72) inset;
--_account-avatar-bg: #EEF2F7;
--_account-green: #4F7E5C;
--_account-red: #B76575;
--_account-red-soft: #B58A8E;
--_account-red-line: #EFD8DB;
--_account-red-bg: #FFFBFB;
--_account-primary: #18202D;
--_account-primary-hover: #101722;
--_account-disabled-bg: #F3F5F8;
--_account-disabled-text: #A0A8B4;
box-sizing: border-box;
min-height: calc(100vh - var(--stickyTop, 0px));
padding: calc(31px * var(--_account-shell-scale)) 0 calc(40px * var(--_account-shell-scale));
background: transparent;
color: var(--_account-text);
font-family: var(--_account-font);
}
#viewAccount.viewHidden{
display: none;
}
#viewAccount .accountSettingsShell{
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: var(--_account-shell-gap);
width: min(100%, var(--_account-shell-w));
margin: 0 auto;
padding: var(--_account-shell-pad-top) var(--_account-shell-pad-x) var(--_account-shell-pad-bottom);
border: 1px solid var(--_account-shell-border);
border-radius: var(--_account-shell-radius);
background: var(--_account-shell-bg);
box-shadow: var(--_account-shell-shadow);
overflow: hidden;
}
#viewAccount .accountSettingsHeader{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: calc(28px * var(--_account-scale));
min-width: 0;
}
#viewAccount .accountSettingsTitleStack,
#viewAccount .accountSettingsIdentityCopy,
#viewAccount .accountSettingsSectionHead,
#viewAccount .accountSettingsControlCopy,
#viewAccount .accountSettingsDangerCopy{
display: flex;
flex-direction: column;
min-width: 0;
}
#viewAccount .accountSettingsTitleStack{
gap: calc(16px * var(--_account-scale));
}
#viewAccount .accountSettingsSectionHead{
gap: calc(12px * var(--_account-scale));
}
#viewAccount .accountSettingsIdentityCopy{
gap: calc(7px * var(--_account-scale));
}
#viewAccount .accountSettingsControlCopy,
#viewAccount .accountSettingsDangerCopy{
gap: calc(8px * var(--_account-scale));
}
#viewAccount .accountSettingsTitle,
#viewAccount .accountSettingsSubtitle,
#viewAccount .accountSettingsSectionTitle,
#viewAccount .accountSettingsSectionSubtitle,
#viewAccount .accountSettingsDangerTitle,
#viewAccount .accountSettingsDangerHint{
margin: 0;
letter-spacing: 0;
}
#viewAccount .accountSettingsTitle{
color: var(--_account-text);
font-size: calc(46px * var(--_account-scale));
font-weight: 820;
line-height: 1.02;
}
#viewAccount .accountSettingsSubtitle{
color: var(--_account-muted);
font-size: calc(17px * var(--_account-scale));
font-weight: 420;
line-height: 1.28;
}
#viewAccount .accountSettingsHeaderAccount{
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-end;
flex: 0 0 auto;
gap: calc(24px * var(--_account-scale));
max-width: min(62vw, calc(760px * var(--_account-scale)));
min-width: 0;
transform: scale(.8);
transform-origin: top right;
}
#viewAccount .accountSettingsHeaderEmail{
max-width: min(100%, calc(620px * var(--_account-scale)));
}
#viewAccount .accountSettingsContent,
#viewAccount .accountSettingsMainCard{
min-width: 0;
}
#viewAccount .accountSettingsMainCard{
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: calc(50px * var(--_account-scale));
min-height: calc(760px * var(--_account-scale));
padding: calc(48px * var(--_account-scale)) calc(34px * var(--_account-scale)) calc(50px * var(--_account-scale));
border: 1px solid var(--_account-content-card-border);
border-radius: var(--_account-content-card-radius);
background: var(--_account-content-card-bg);
box-shadow: var(--_account-content-card-shadow);
}
#viewAccount .accountSettingsIdentityMirror,
#viewAccount .accountSettingsEmailMirror{
display: none;
}
#viewAccount .accountSettingsSummaryIdentity,
#viewAccount .accountSettingsControlRow,
#viewAccount .accountSettingsDangerRow{
box-sizing: border-box;
display: flex;
align-items: center;
min-width: 0;
}
#viewAccount .accountSettingsSummaryIdentity{
gap: calc(20px * var(--_account-scale));
}
#viewAccount .accountSettingsIdentityAvatar{
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: calc(62px * var(--_account-scale));
height: calc(62px * var(--_account-scale));
border-radius: calc(18px * var(--_account-scale));
background: var(--_account-avatar-bg);
color: var(--_account-text);
font-size: calc(16px * var(--_account-scale));
font-weight: 820;
line-height: 1;
}
#viewAccount .accountSettingsFieldLabel,
#viewAccount .accountSettingsControlLabel{
color: #9AA4B2;
line-height: 1.2;
letter-spacing: 0;
}
#viewAccount .accountSettingsFieldLabel{
font-weight: 720;
}
#viewAccount .accountSettingsControlLabel,
#viewAccount #accountEmailForm .accountSettingsFieldLabel{
font-weight: 575;
}
#viewAccount .accountSettingsIdentityCopy .accountSettingsFieldLabel{
font-weight: 720;
}
#viewAccount .accountSettingsFieldLabel{
font-size: calc(14px * var(--_account-scale));
}
#viewAccount .accountSettingsControlLabel{
font-size: calc(15px * var(--_account-scale));
}
#viewAccount .accountSettingsEmail,
#viewAccount .accountSettingsControlValue{
min-width: 0;
overflow: hidden;
color: var(--_account-text);
line-height: 1.12;
text-overflow: ellipsis;
white-space: nowrap;
}
#viewAccount .accountSettingsEmail{
max-width: min(100%, calc(620px * var(--_account-scale)));
font-size: calc(34px * var(--_account-scale));
font-weight: 720;
}
#viewAccount .accountSettingsControlValue{
font-weight: 680;
}
#viewAccount .accountSettingsStateValue{
color: var(--_account-green);
font-size: calc(17px * var(--_account-scale));
font-weight: 760;
line-height: 1.15;
}
#viewAccount .accountSettingsStateBadge{
display: none;
}
#viewAccount .accountSettingsGrid{
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(calc(430px * var(--_account-scale)), .9fr);
gap: calc(56px * var(--_account-scale));
min-width: 0;
align-items: start;
}
#viewAccount .accountSettingsAccess,
#viewAccount .accountSettingsInterface{
display: flex;
flex-direction: column;
gap: calc(24px * var(--_account-scale));
min-width: 0;
}
#viewAccount .accountSettingsSectionTitle{
color: var(--_account-text);
font-size: calc(32.4px * var(--_account-scale));
font-weight: 697;
line-height: 1.08;
}
#viewAccount .accountSettingsSectionSubtitle{
color: var(--_account-muted);
font-size: calc(17px * var(--_account-scale));
font-weight: 420;
line-height: 1.25;
}
#viewAccount .accountSettingsAccessStack{
display: flex;
flex-direction: column;
gap: calc(20px * var(--_account-scale));
min-width: 0;
}
#viewAccount .accountSettingsControlRow{
justify-content: space-between;
gap: calc(18px * var(--_account-scale));
min-height: calc(86px * var(--_account-scale));
padding: calc(14px * var(--_account-scale)) calc(20px * var(--_account-scale));
border: 1px solid var(--_account-line);
border-radius: var(--_account-row-radius);
background: var(--_account-soft);
}
#viewAccount .accountSettingsControlValue{
font-size: calc(22px * var(--_account-scale));
}
#viewAccount .accountSettingsLanguageRow{
min-height: calc(94px * var(--_account-scale));
}
#viewAccount .accountSettingsLanguageValue{
font-size: calc(20px * var(--_account-scale));
}
#viewAccount .accountSettingsChevron{
flex: 0 0 auto;
color: #98A2AF;
font-size: calc(28px * var(--_account-scale));
font-weight: 760;
line-height: 1;
}
#viewAccount .accountSettingsBtn{
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-height: calc(54px * var(--_account-scale));
padding: 0 calc(22px * var(--_account-scale));
border: 1px solid var(--_account-control-line);
border-radius: var(--_account-control-radius);
font-family: var(--_account-font);
font-size: calc(15px * var(--_account-scale));
font-weight: 760;
line-height: 1.1;
letter-spacing: 0;
white-space: nowrap;
cursor: pointer;
transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
#viewAccount .accountSettingsBtnLight{
min-width: calc(176px * var(--_account-scale));
background: #FFFFFF;
color: #5F6B7A;
box-shadow: 0 calc(12px * var(--_account-scale)) calc(24px * var(--_account-scale)) rgba(38, 48, 65, .04);
}
#viewAccount #btnAccountPageSignOut{
min-width: calc(128px * var(--_account-scale));
}
#viewAccount #btnAccountPasswordToggle{
min-width: calc(184px * var(--_account-scale));
}
#viewAccount #btnAccountChangeEmail,
#viewAccount #btnAccountPasswordToggle{
font-weight: 608;
}
#viewAccount .accountSettingsBtnLight:hover,
#viewAccount .accountSettingsBtnLight:focus-visible{
border-color: #D4DCE6;
background: #FAFBFC;
box-shadow: 0 calc(14px * var(--_account-scale)) calc(28px * var(--_account-scale)) rgba(38, 48, 65, .06);
transform: translateY(calc(-1px * var(--_account-scale)));
}
#viewAccount .accountSettingsBtnPrimary{
width: auto;
min-width: calc(168px * var(--_account-scale));
border-color: var(--_account-primary);
background: var(--_account-primary);
color: #FFFFFF;
box-shadow: 0 calc(14px * var(--_account-scale)) calc(26px * var(--_account-scale)) rgba(18, 26, 40, .16);
}
#viewAccount .accountSettingsBtnPrimary:hover,
#viewAccount .accountSettingsBtnPrimary:focus-visible{
border-color: var(--_account-primary-hover);
background: var(--_account-primary-hover);
box-shadow: 0 calc(16px * var(--_account-scale)) calc(30px * var(--_account-scale)) rgba(18, 26, 40, .18);
transform: translateY(calc(-1px * var(--_account-scale)));
}
#viewAccount .accountSettingsReveal .accountSettingsBtnPrimary{
justify-self: end;
}
#viewAccount .accountSettingsBtnDisabled,
#viewAccount .accountSettingsBtn:disabled{
cursor: not-allowed;
transform: none;
opacity: 1;
}
#viewAccount .accountSettingsBtnDisabled{
background: var(--_account-disabled-bg);
color: var(--_account-disabled-text);
box-shadow: none;
}
#viewAccount .accountSettingsInput:disabled,
#viewAccount .accountSettingsForm .accountSettingsBtn:disabled{
cursor: wait;
opacity: .62;
}
#viewAccount .accountSettingsReveal{
box-sizing: border-box;
display: grid;
gap: calc(14px * var(--_account-scale));
padding: calc(18px * var(--_account-scale)) calc(20px * var(--_account-scale));
border: 1px solid var(--_account-line);
border-radius: calc(24px * var(--_account-scale));
background: rgba(250, 251, 252, .88);
}
#viewAccount .accountSettingsReveal[hidden]{
display: none;
}
#viewAccount .accountSettingsFormGrid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: calc(14px * var(--_account-scale));
min-width: 0;
}
#viewAccount .accountSettingsFormField{
display: grid;
gap: calc(8px * var(--_account-scale));
min-width: 0;
margin: 0;
}
#viewAccount .accountSettingsInput{
box-sizing: border-box;
width: 100%;
height: calc(52px * var(--_account-scale));
min-height: calc(52px * var(--_account-scale));
padding: 0 calc(16px * var(--_account-scale));
border: 1px solid var(--_account-control-line);
border-radius: calc(16px * var(--_account-scale));
background: #FFFFFF;
color: var(--_account-text);
font-family: var(--_account-font);
font-size: calc(15px * var(--_account-scale));
font-weight: 650;
line-height: 1.1;
letter-spacing: 0;
outline: 0;
transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
#viewAccount .accountSettingsInput::placeholder{
color: #A4ADBA;
font-weight: 520;
}
#viewAccount .accountSettingsInput:hover{
border-color: #D2DBE6;
}
#viewAccount .accountSettingsInput:focus,
#viewAccount .accountSettingsInput:focus-visible{
border-color: #8AB7EA;
box-shadow: 0 0 0 calc(3px * var(--_account-scale)) rgba(138, 183, 234, .16);
}
#viewAccount .accountSettingsInlineStatus{
box-sizing: border-box;
min-height: calc(42px * var(--_account-scale));
padding: calc(10px * var(--_account-scale)) calc(12px * var(--_account-scale));
border: 1px solid var(--_account-line);
border-radius: calc(16px * var(--_account-scale));
background: #FFFFFF;
color: var(--_account-muted);
font-size: calc(13px * var(--_account-scale));
font-weight: 650;
line-height: 1.25;
}
#viewAccount .accountSettingsInlineStatus[hidden]{
display: none;
}
#viewAccount .accountSettingsInlineStatus[data-tone="success"]{
border-color: #D9EBDF;
background: #F1FAF4;
color: var(--_account-green);
}
#viewAccount .accountSettingsInlineStatus[data-tone="error"]{
border-color: var(--_account-red-line);
background: #FFF6F6;
color: var(--_account-red);
}
#viewAccount .accountSettingsDangerRow{
justify-content: space-between;
gap: calc(22px * var(--_account-scale));
width: min(100%, calc(720px * var(--_account-scale)));
min-height: calc(104px * var(--_account-scale));
margin-top: auto;
padding: calc(18px * var(--_account-scale)) calc(22px * var(--_account-scale));
border: 1px solid var(--_account-red-line);
border-radius: var(--_account-row-radius);
background: var(--_account-red-bg);
}
#viewAccount .accountSettingsDangerTitle{
color: var(--_account-red);
font-size: calc(28px * var(--_account-scale));
font-weight: 800;
line-height: 1.08;
}
#viewAccount .accountSettingsDangerHint{
color: var(--_account-red-soft);
font-size: calc(16px * var(--_account-scale));
font-weight: 600;
line-height: 1.25;
}
#viewAccount .accountSettingsBtnDelete{
min-width: calc(174px * var(--_account-scale));
min-height: calc(46px * var(--_account-scale));
border-color: var(--_account-red-line);
border-radius: calc(15px * var(--_account-scale));
background: #FFF8F8;
color: var(--_account-red-soft);
font-size: calc(14px * var(--_account-scale));
font-weight: 720;
}
@media (max-width: 1180px){
#viewAccount{
--_account-scale: .68;
padding-right: 16px;
padding-left: 16px;
}
}
@media (max-width: 980px){
#viewAccount .accountSettingsGrid{
grid-template-columns: 1fr;
}
#viewAccount .accountSettingsMainCard{
gap: calc(38px * var(--_account-scale));
}
#viewAccount .accountSettingsDangerRow{
width: 100%;
}
}
@media (max-width: 720px){
#viewAccount{
--_account-scale: .62;
padding-inline: 10px;
}
#viewAccount .accountSettingsShell{
min-height: 0;
padding: 28px 22px 30px;
}
#viewAccount .accountSettingsHeaderAccount{
justify-content: flex-start;
width: 100%;
max-width: 100%;
transform-origin: top left;
}
#viewAccount .accountSettingsHeader,
#viewAccount .accountSettingsControlRow,
#viewAccount .accountSettingsDangerRow{
align-items: flex-start;
flex-direction: column;
}
#viewAccount .accountSettingsSummaryIdentity{
align-items: flex-start;
}
#viewAccount .accountSettingsEmail{
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
}
#viewAccount .accountSettingsBtnLight,
#viewAccount #btnAccountPageSignOut,
#viewAccount #btnAccountPasswordToggle{
width: 100%;
min-width: 0;
}
#viewAccount .accountSettingsFormGrid{
grid-template-columns: 1fr;
}
#viewAccount .accountSettingsControlValue{
white-space: normal;
overflow-wrap: anywhere;
}
}
/* ===== Stats view ===== */
#viewStats{
--_stats-scale: .8;
--_stats-font-ui: "Inter", var(--ct-font-sans);
--_stats-page-pad-top: calc(31px * var(--_stats-scale));
--_stats-page-pad-bottom: calc(40px * var(--_stats-scale));
--_stats-shell-w: calc(1456px * var(--_stats-scale));
--_stats-shell-radius: calc(48px * var(--_stats-scale));
--_stats-shell-pad-top: calc(54px * var(--_stats-scale));
--_stats-shell-pad-x: calc(58px * var(--_stats-scale));
--_stats-shell-pad-bottom: calc(46px * var(--_stats-scale));
--_stats-shell-gap: calc(28px * var(--_stats-scale));
--_stats-shell-bg: rgba(255, 255, 255, .75);
--_stats-shell-border: rgba(228, 228, 225, .5);
--_stats-shell-shadow: none;
--_stats-text-strong: #18202D;
--_stats-text-muted: #526070;
--_stats-text-soft: #727D8C;
--_stats-text-faint: #9AA3AE;
--_stats-line: #EDF0F4;
--_stats-blue: #6E86C5;
--_stats-blue-strong: #6F86DB;
--_stats-green: #62AA83;
--_stats-gray: #A8B1BD;
--_stats-pink: #D9A7B2;
--_stats-ladder-row-h: calc(52px * var(--_stats-scale));
--_stats-place-row-h: calc(50px * var(--_stats-scale));
--_stats-row-gap: calc(18px * var(--_stats-scale));
--_stats-ladder-scroll-max: calc(var(--_stats-ladder-row-h) * 6);
--_stats-place-scroll-max: calc(var(--_stats-place-row-h) * 6);
padding: var(--_stats-page-pad-top) 0 var(--_stats-page-pad-bottom);
background: transparent;
font-family: var(--_stats-font-ui);
}
#viewStats > .statsViewShell{
width: min(100%, var(--_stats-shell-w));
margin: 0 auto;
border: 1px solid var(--_stats-shell-border);
border-radius: var(--_stats-shell-radius);
background: var(--_stats-shell-bg);
box-shadow: var(--_stats-shell-shadow);
overflow: hidden;
}
#viewStats > .statsViewShell > .statsViewInner{
display: flex;
flex-direction: column;
gap: var(--_stats-shell-gap);
padding: var(--_stats-shell-pad-top) var(--_stats-shell-pad-x) var(--_stats-shell-pad-bottom);
min-width: 0;
}
#viewStats .statsBanner{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: calc(24px * var(--_stats-scale));
width: 100%;
min-height: calc(104px * var(--_stats-scale));
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
#viewStats .statsBannerMain{
display: flex;
flex-direction: column;
gap: calc(12px * var(--_stats-scale));
width: min(100%, calc(780px * var(--_stats-scale)));
min-width: 0;
}
#viewStats .statsBannerTitle{
color: var(--_stats-text-strong);
font-family: var(--_stats-font-ui);
font-size: calc(47.5px * var(--_stats-scale));
font-weight: 800;
line-height: 1;
letter-spacing: calc(-1.52px * var(--_stats-scale));
}
#viewStats .statsBannerSubtitle{
width: min(100%, calc(650px * var(--_stats-scale)));
color: var(--_stats-text-soft);
font-family: var(--_stats-font-ui);
font-size: calc(16px * var(--_stats-scale));
font-weight: 500;
line-height: 1.35;
letter-spacing: 0;
}
#viewStats .statsBannerActions{
display: flex;
align-items: center;
justify-content: flex-end;
gap: calc(14px * var(--_stats-scale));
flex: 0 0 auto;
min-width: 0;
}
#viewStats .statsPageEmptyState{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: calc(26px * var(--_stats-scale));
min-height: calc(430px * var(--_stats-scale));
padding: calc(34px * var(--_stats-scale)) 0 calc(52px * var(--_stats-scale));
text-align: center;
}
#viewStats .statsPageEmptyState[hidden]{
display: none;
}
#viewStats .statsPageEmptyCopy{
display: flex;
flex-direction: column;
align-items: center;
gap: calc(14px * var(--_stats-scale));
max-width: calc(660px * var(--_stats-scale));
}
#viewStats .statsPageEmptyTitle{
color: var(--_stats-text-strong);
font-family: var(--_stats-font-ui);
font-size: calc(30px * var(--_stats-scale));
font-weight: 800;
line-height: 1.12;
}
#viewStats .statsPageEmptySubtitle{
color: var(--_stats-text-soft);
font-family: var(--_stats-font-ui);
font-size: calc(16px * var(--_stats-scale));
font-weight: 390;
line-height: 1.45;
}
#viewStats .statsPageEmptyAddTx{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 20px;
border: 1px solid #171D27;
border-radius: 12px;
background: #171D27;
color: #FFFFFF;
box-shadow: 0 12px 24px rgba(15, 23, 42, .13);
font-family: "Inter", var(--ct-font-sans);
font-size: 13px;
font-weight: 540;
letter-spacing: -.01em;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#viewStats .statsPageEmptyAddTx:hover,
#viewStats .statsPageEmptyAddTx:focus-visible{
border-color: #111720;
background: #111720;
box-shadow: 0 14px 26px rgba(15, 23, 42, .15);
transform: translateY(-1px);
}
#viewStats.isStatsEmpty .statsHeroComposition,
#viewStats.isStatsEmpty .statsConcentrationSummary,
#viewStats.isStatsEmpty .statsPlacesLandscape{
display: none;
}
#viewStats .statsSummaryChip{
display: inline-flex;
align-items: center;
gap: calc(8px * var(--_stats-scale));
min-height: calc(44px * var(--_stats-scale));
padding: calc(13px * var(--_stats-scale)) calc(18px * var(--_stats-scale));
border: 0;
border-radius: calc(22px * var(--_stats-scale));
background: #F4F6F8;
box-shadow: none;
color: #7B8492;
font-family: var(--_stats-font-ui);
font-size: calc(14px * var(--_stats-scale));
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
#viewStats .statsSummaryChip #statsTotal{
color: var(--_stats-text-strong);
font-size: calc(15px * var(--_stats-scale));
font-weight: 800;
font-family: var(--_stats-font-ui);
}
#viewStats .statsBackButton{
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(104px * var(--_stats-scale));
height: calc(46px * var(--_stats-scale));
min-width: calc(104px * var(--_stats-scale));
min-height: calc(46px * var(--_stats-scale));
padding: 0;
border: 1px solid #DDE5EE;
border-radius: calc(18px * var(--_stats-scale));
background: #FFFFFF;
color: var(--_stats-text-muted);
box-shadow: none;
font-family: var(--_stats-font-ui);
font-size: calc(14px * var(--_stats-scale));
font-weight: 800;
line-height: 1;
white-space: nowrap;
}
#viewStats .statsBackButton:hover,
#viewStats .statsBackButton:focus-visible{
border-color: #CDD7E4;
background: #F8FAFC;
color: var(--_stats-text-strong);
outline: none;
}
#viewStats .statsHeroComposition{
display: grid;
grid-template-columns: minmax(0, calc(760px * var(--_stats-scale))) minmax(0, calc(520px * var(--_stats-scale)));
gap: calc(44px * var(--_stats-scale));
align-items: stretch;
width: 100%;
min-height: calc(322px * var(--_stats-scale));
}
#viewStats .statsDominancePanel,
#viewStats .statsAssetLadderPanel,
#viewStats .statsPlacesLadderPanel,
#viewStats .statsCapitalMapPanel{
min-width: 0;
border: 0;
background: transparent;
box-shadow: none;
}
#viewStats .statsAssetLadderPanel{
display: flex;
flex-direction: column;
gap: calc(10px * var(--_stats-scale));
padding: 0 calc(4px * var(--_stats-scale)) 0 0;
--_stats-asset-ladder-panel-scale: calc(var(--_stats-scale) * 1.1);
--_stats-asset-ladder-content-shift-x: calc(46px * var(--_stats-asset-ladder-panel-scale));
--_stats-asset-ladder-heading-shift-x: var(--_stats-asset-ladder-content-shift-x);
}
#viewStats .statsSectionHead{
display: grid;
gap: calc(6px * var(--_stats-scale));
min-width: 0;
}
#viewStats .statsSectionTitle{
color: var(--_stats-text-strong);
font-family: var(--_stats-font-ui);
font-size: calc(18px * var(--_stats-scale));
font-weight: 800;
line-height: 1.18;
letter-spacing: 0;
}
#viewStats .statsSectionSubtitle{
color: #5F6B7A;
font-family: var(--_stats-font-ui);
font-size: calc(12px * var(--_stats-scale));
font-weight: 700;
line-height: 1.2;
letter-spacing: 0;
}
#viewStats .statsConcentration{
--_stats-concentration-scale: calc(var(--_stats-scale) * .93);
--_stats-concentration-top-width: 93%;
display: flex;
flex-direction: column;
justify-content: center;
gap: calc(18px * var(--_stats-scale));
width: 100%;
min-height: 100%;
}
#viewStats .statsConcentrationEyebrow{
color: #7C8796;
font-family: var(--_stats-font-ui);
font-size: calc(15px * var(--_stats-scale));
font-weight: 800;
line-height: 1.2;
letter-spacing: calc(.3px * var(--_stats-scale));
}
#viewStats .statsConcentrationHero{
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: calc(24px * var(--_stats-concentration-scale));
width: var(--_stats-concentration-top-width);
min-width: 0;
}
#viewStats .statsConcentrationHeroMain,
#viewStats .statsConcentrationValueBlock{
display: flex;
flex-direction: column;
min-width: 0;
}
#viewStats .statsConcentrationHeroMain{ gap: calc(8px * var(--_stats-concentration-scale)); }
#viewStats .statsConcentrationValueBlock{
align-items: flex-end;
gap: calc(4px * var(--_stats-concentration-scale));
flex: 0 0 auto;
white-space: nowrap;
}
#viewStats .statsConcentrationSymbol{
overflow: hidden;
color: var(--_stats-text-strong);
font-family: var(--_stats-font-ui);
font-size: calc(72.2px * var(--_stats-concentration-scale));
font-weight: 800;
line-height: .95;
letter-spacing: calc(-2.28px * var(--_stats-concentration-scale));
text-overflow: ellipsis;
white-space: nowrap;
}
#viewStats .statsConcentrationSub{
width: min(100%, calc(360px * var(--_stats-concentration-scale)));
color: #7A8594;
font-family: var(--_stats-font-ui);
font-size: calc(16px * var(--_stats-concentration-scale));
font-weight: 500;
line-height: 1.35;
}
#viewStats .statsConcentrationValue{
color: var(--_stats-text-strong);
font-family: var(--_stats-font-ui);
font-size: calc(60.8px * var(--_stats-concentration-scale));
font-weight: 800;
line-height: .95;
letter-spacing: calc(-1.71px * var(--_stats-concentration-scale));
}
#viewStats .statsConcentrationMoney{
color: #7A8594;
font-family: var(--_stats-font-ui);
font-size: calc(18px * var(--_stats-concentration-scale));
font-weight: 800;
line-height: 1.2;
}
#viewStats .statsConcentrationStack{
display: flex;
gap: calc(8px * var(--_stats-concentration-scale));
width: var(--_stats-concentration-top-width);
height: calc(47.6px * var(--_stats-concentration-scale));
overflow: hidden;
background: transparent;
}
#viewStats .statsConcentrationSegment{
display: block;
height: 100%;
min-width: 4px;
border-radius: calc(23.8px * var(--_stats-concentration-scale));
}
#viewStats .statsConcentrationLegend{
display: flex;
align-items: center;
gap: calc(10px * var(--_stats-scale));
min-height: calc(42px * var(--_stats-scale));
overflow: hidden;
}
#viewStats .statsConcentrationLegendItem{
display: inline-flex;
align-items: center;
gap: calc(8px * var(--_stats-scale));
min-width: 0;
padding: calc(9px * var(--_stats-scale)) calc(12px * var(--_stats-scale));
border: 0;
border-radius: calc(18px * var(--_stats-scale));
background: #F6F8FB;
color: #5F6B7A;
font-family: var(--_stats-font-ui);
font-size: calc(13px * var(--_stats-scale));
font-weight: 800;
line-height: 1;
white-space: nowrap;
}
#viewStats .statsConcentrationLegendDot{
width: calc(8px * var(--_stats-scale));
height: calc(8px * var(--_stats-scale));
flex: 0 0 calc(8px * var(--_stats-scale));
border-radius: calc(4px * var(--_stats-scale));
}
#viewStats .statsConcentrationLegendText{
overflow: hidden;
text-overflow: ellipsis;
}
#viewStats .statsLadder{
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
}
#viewStats .statsAssetLadder{
--_stats-asset-ladder-scale: calc(var(--_stats-scale) * 1.1);
}
#viewStats .statsPlacesLadder{
--_stats-place-ladder-scale: calc(var(--_stats-scale) * 1.1);
--_stats-place-ladder-meta-shift-x: calc(-46px * var(--_stats-place-ladder-scale));
}
#viewStats .statsLadderScroll{
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
}
#viewStats .statsLadderScroll-isScrollable{
max-height: var(--_stats-ladder-scroll-max);
overflow-y: auto;
padding-right: calc(6px * var(--_stats-scale));
scrollbar-width: thin;
scrollbar-color: #CDD6E1 transparent;
}
#viewStats .statsAssetLadder .statsLadderScroll-isScrollable{
max-height: calc((52px * var(--_stats-asset-ladder-scale)) * 6);
padding-right: calc(6px * var(--_stats-asset-ladder-scale));
}
#viewStats .statsAssetLadderPanel .statsSectionHead{
transform: translateX(var(--_stats-asset-ladder-heading-shift-x));
}
#viewStats .statsPlacesLadder .statsLadderScroll-isScrollable{
max-height: calc((50px * var(--_stats-place-ladder-scale)) * 6);
padding-right: calc(6px * var(--_stats-place-ladder-scale));
}
#viewStats .statsLadderScroll-isScrollable::-webkit-scrollbar{
width: calc(6px * var(--_stats-scale));
}
#viewStats .statsLadderScroll-isScrollable::-webkit-scrollbar-thumb{
border-radius: calc(6px * var(--_stats-scale));
background: #CDD6E1;
}
#viewStats .statsLadderRow{
display: flex;
flex: 0 0 var(--_stats-ladder-row-h);
align-items: center;
gap: var(--_stats-row-gap);
width: 100%;
min-width: 0;
height: var(--_stats-ladder-row-h);
padding: 0 0 calc(11px * var(--_stats-scale));
border: 0;
border-bottom: 1px solid var(--_stats-line);
border-radius: 0;
background: transparent;
color: inherit;
box-shadow: none;
text-align: left;
cursor: pointer;
}
#viewStats .statsLadderRow:last-child{ border-bottom: 0; }
#viewStats .statsAssetLadder .statsLadderRow,
#viewStats .statsPlacesLadder .statsLadderRow{ border-bottom: 0; }
#viewStats .statsAssetLadder .statsLadderRow{
flex-basis: calc(52px * var(--_stats-asset-ladder-scale));
gap: calc(18px * var(--_stats-asset-ladder-scale));
height: calc(52px * var(--_stats-asset-ladder-scale));
padding-bottom: calc(11px * var(--_stats-asset-ladder-scale));
}
#viewStats .statsPlacesLadder .statsLadderRow{
flex-basis: calc(50px * var(--_stats-place-ladder-scale));
gap: calc(18px * var(--_stats-place-ladder-scale));
height: calc(50px * var(--_stats-place-ladder-scale));
padding-bottom: calc(10px * var(--_stats-place-ladder-scale));
}
#viewStats .statsLadderRow:hover,
#viewStats .statsLadderRow:focus-visible{
background: transparent;
outline: none;
}
#viewStats .statsLadderRow:hover .statsLadderName,
#viewStats .statsLadderRow:focus-visible .statsLadderName{
color: var(--_stats-blue-strong);
}
#viewStats .statsPlaceLadderRow{
flex-basis: var(--_stats-place-row-h);
height: var(--_stats-place-row-h);
padding-bottom: calc(10px * var(--_stats-scale));
}
#viewStats .statsPlaceLadderRow:disabled{
cursor: default;
}
#viewStats .statsPlaceLadderRow:disabled:hover .statsLadderName{
color: var(--_stats-text-strong);
}
#viewStats .statsOtherAssetRow .statsLadderName,
#viewStats .statsOtherPlaceRow .statsLadderName,
#viewStats .statsOtherAssetRow .statsLadderMeta strong,
#viewStats .statsOtherPlaceRow .statsLadderMeta strong,
#viewStats .statsOtherAssetRow .statsLadderMeta span,
#viewStats .statsOtherPlaceRow .statsLadderMeta span{
color: #7A8594;
}
#viewStats .statsOtherChevron{
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(16px * var(--_stats-scale));
height: calc(16px * var(--_stats-scale));
margin-left: calc(7px * var(--_stats-scale));
border-radius: calc(8px * var(--_stats-scale));
background: #F3F5F8;
color: #8A94A3;
font-size: calc(10px * var(--_stats-scale));
font-weight: 800;
line-height: 0;
vertical-align: middle;
}
#viewStats .statsAssetLadder .statsOtherChevron{
width: calc(16px * var(--_stats-asset-ladder-scale));
height: calc(16px * var(--_stats-asset-ladder-scale));
margin-left: calc(7px * var(--_stats-asset-ladder-scale));
border-radius: calc(8px * var(--_stats-asset-ladder-scale));
font-size: calc(10px * var(--_stats-asset-ladder-scale));
}
#viewStats .statsPlacesLadder .statsOtherChevron{
width: calc(16px * var(--_stats-place-ladder-scale));
height: calc(16px * var(--_stats-place-ladder-scale));
margin-left: calc(7px * var(--_stats-place-ladder-scale));
border-radius: calc(8px * var(--_stats-place-ladder-scale));
font-size: calc(10px * var(--_stats-place-ladder-scale));
}
#viewStats .statsOtherChevron.is-closed{
position: relative;
color: transparent;
}
#viewStats .statsOtherChevron.is-closed::before{
content: "⌄";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #8A94A3;
transform: translateY(calc(-2.5px * var(--_stats-scale)));
}
#viewStats .statsAssetLadder .statsOtherChevron.is-closed::before{
transform: translateY(calc(-2.5px * var(--_stats-asset-ladder-scale)));
}
#viewStats .statsPlacesLadder .statsOtherChevron.is-closed::before{
transform: translateY(calc(-2.5px * var(--_stats-place-ladder-scale)));
}
#viewStats .statsLadderRank{
flex: 0 0 calc(20px * var(--_stats-scale));
color: var(--_stats-text-faint);
font-family: var(--_stats-font-ui);
font-size: calc(11px * var(--_stats-scale));
font-weight: 700;
line-height: 1;
}
#viewStats .statsPlacesLadder .statsLadderRank{
flex-basis: calc(20px * var(--_stats-place-ladder-scale));
font-size: calc(11px * var(--_stats-place-ladder-scale));
}
#viewStats .statsAssetLadderIconSlot{
--_stats-asset-ladder-icon-size: calc(18.975px * var(--_stats-asset-ladder-scale));
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 calc(20px * var(--_stats-asset-ladder-scale));
width: calc(20px * var(--_stats-asset-ladder-scale));
min-width: calc(20px * var(--_stats-asset-ladder-scale));
height: var(--_stats-asset-ladder-icon-size);
transform: translateX(var(--_stats-asset-ladder-content-shift-x));
}
#viewStats .statsAssetLadderIcon{
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--_stats-asset-ladder-icon-size);
height: var(--_stats-asset-ladder-icon-size);
flex: 0 0 var(--_stats-asset-ladder-icon-size);
border-radius: 50%;
overflow: hidden;
background: transparent;
color: var(--_stats-text-faint);
font-family: var(--_stats-font-ui);
font-size: calc(10px * var(--_stats-asset-ladder-scale));
font-weight: 800;
line-height: 1;
transform: translateY(-2px);
}
#viewStats .statsAssetLadder .statsLadderMain{
gap: calc(4px * var(--_stats-asset-ladder-scale));
transform: translateX(var(--_stats-asset-ladder-content-shift-x));
}
#viewStats .statsAssetLadder .statsLadderName{
font-size: calc(15px * var(--_stats-asset-ladder-scale));
}
#viewStats .statsAssetLadder .statsLadderTrack{
height: calc(5px * var(--_stats-asset-ladder-scale));
border-radius: calc(3px * var(--_stats-asset-ladder-scale));
}
#viewStats .statsAssetLadder .statsLadderMeta{
flex-basis: calc(118px * var(--_stats-asset-ladder-scale));
gap: calc(4px * var(--_stats-asset-ladder-scale));
}
#viewStats .statsAssetLadder .statsLadderMeta strong{
font-size: calc(13px * var(--_stats-asset-ladder-scale));
}
#viewStats .statsAssetLadder .statsLadderMeta span{
font-size: calc(11px * var(--_stats-asset-ladder-scale));
}
#viewStats .statsPlacesLadder .statsLadderMain{
gap: calc(4px * var(--_stats-place-ladder-scale));
}
#viewStats .statsPlacesLadder .statsLadderName{
font-size: calc(15px * var(--_stats-place-ladder-scale));
}
#viewStats .statsPlacesLadder .statsLadderTrack{
height: calc(5px * var(--_stats-place-ladder-scale));
border-radius: calc(3px * var(--_stats-place-ladder-scale));
}
#viewStats .statsPlacesLadder .statsLadderMeta{
flex-basis: calc(118px * var(--_stats-place-ladder-scale));
gap: calc(4px * var(--_stats-place-ladder-scale));
transform: translateX(var(--_stats-place-ladder-meta-shift-x));
}
#viewStats .statsPlacesLadder .statsLadderMeta strong{
font-size: calc(13px * var(--_stats-place-ladder-scale));
}
#viewStats .statsPlacesLadder .statsLadderMeta span{
font-size: calc(11px * var(--_stats-place-ladder-scale));
}
#viewStats .statsAssetLadderIcon img{
display: block;
object-fit: contain;
border-radius: inherit;
background: transparent;
}
#viewStats .statsOtherLadderIcon img{
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: inherit;
background: transparent;
filter: contrast(.9) brightness(1.03);
}
#viewStats .statsOtherLadderIconFallback{
display: none;
}
#viewStats .statsPlaceLadderIconSlot{
--_stats-place-ladder-icon-size: calc(20.8725px * var(--_stats-place-ladder-scale));
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 calc(22px * var(--_stats-place-ladder-scale));
width: calc(22px * var(--_stats-place-ladder-scale));
min-width: calc(22px * var(--_stats-place-ladder-scale));
height: var(--_stats-place-ladder-icon-size);
}
#viewStats .statsPlaceLadderIcon{
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--_stats-place-ladder-icon-size);
height: var(--_stats-place-ladder-icon-size);
flex: 0 0 var(--_stats-place-ladder-icon-size);
border-radius: 50%;
overflow: hidden;
background: transparent;
color: var(--_stats-text-faint);
font-family: var(--_stats-font-ui);
font-size: calc(10px * var(--_stats-place-ladder-scale));
font-weight: 800;
line-height: 1;
}
#viewStats .statsPlaceLadderIcon img{
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: inherit;
background: transparent;
}
#viewStats .statsPlaceLadderIconFallback{
display: none;
}
#viewStats .statsLadderMain{
display: flex;
flex-direction: column;
gap: calc(4px * var(--_stats-scale));
flex: 1 1 auto;
min-width: 0;
}
#viewStats .statsLadderName{
overflow: hidden;
color: var(--_stats-text-strong);
font-family: var(--_stats-font-ui);
font-size: calc(15px * var(--_stats-scale));
font-weight: 800;
line-height: 1.15;
text-overflow: ellipsis;
white-space: nowrap;
transition: color 140ms ease;
}
#viewStats .statsLadderTrack{
display: block;
width: 100%;
height: calc(5px * var(--_stats-scale));
overflow: hidden;
border-radius: calc(3px * var(--_stats-scale));
background: #E9EDF2;
}
#viewStats .statsLadderFill{
display: block;
height: 100%;
min-width: 2px;
border-radius: inherit;
background: var(--_stats-blue);
}
#viewStats .statsLadderFill-wallet{ background: var(--_stats-green); }
#viewStats .statsLadderFill-unknown{ background: var(--_stats-gray); }
#viewStats .statsLadderFill-exchange{ background: var(--_stats-blue); }
#viewStats .statsLadderMeta{
display: flex;
flex: 0 0 calc(118px * var(--_stats-scale));
flex-direction: column;
align-items: flex-end;
gap: calc(4px * var(--_stats-scale));
min-width: 0;
white-space: nowrap;
}
#viewStats .statsLadderMeta strong{
color: #253044;
font-family: var(--_stats-font-ui);
font-size: calc(13px * var(--_stats-scale));
font-weight: 800;
line-height: 1;
}
#viewStats .statsLadderMeta span{
color: var(--_stats-text-muted);
font-family: var(--_stats-font-ui);
font-size: calc(11px * var(--_stats-scale));
font-weight: 400;
line-height: 1;
}
#viewStats .statsOtherAssetRow .statsLadderMeta strong,
#viewStats .statsOtherPlaceRow .statsLadderMeta strong{
color: #253044;
}
#viewStats .statsOtherAssetRow .statsLadderMeta span,
#viewStats .statsOtherPlaceRow .statsLadderMeta span{
color: #526070;
font-weight: 400;
}
#viewStats .statsAssetMetricsLine{
display: flex;
align-items: center;
justify-content: flex-start;
justify-self: end;
gap: calc(18px * var(--_stats-scale));
width: fit-content;
max-width: 100%;
height: calc(76px * var(--_stats-scale));
min-height: calc(76px * var(--_stats-scale));
padding: calc(10px * var(--_stats-scale)) calc(14px * var(--_stats-scale)) calc(10px * var(--_stats-scale)) calc(38px * var(--_stats-scale));
border: 1px solid rgba(229, 234, 240, .5);
border-radius: calc(24px * var(--_stats-scale));
background: #F8FAFC;
box-shadow: 0 calc(10px * var(--_stats-scale)) calc(22px * var(--_stats-scale)) #2630410A;
}
#viewStats .statsConcentrationSummary{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, calc(520px * var(--_stats-scale)));
gap: calc(34px * var(--_stats-scale));
align-items: center;
width: 100%;
}
#viewStats .statsMetricItem{
display: flex;
flex: 0 0 auto;
flex-direction: column;
justify-content: center;
gap: calc(4px * var(--_stats-scale));
height: 100%;
min-width: 0;
width: calc(132px * var(--_stats-scale));
}
#viewStats .statsMetricItem:first-child{
width: calc(150px * var(--_stats-scale));
}
#viewStats .statsMetricItem:last-child{
width: calc(120px * var(--_stats-scale));
}
#viewStats .statsMetricItem strong{
color: var(--_stats-text-strong);
font-family: var(--_stats-font-ui);
font-size: calc(27px * var(--_stats-scale));
font-weight: 800;
line-height: 1;
}
#viewStats .statsMetricItem span{
color: #7A8594;
font-family: var(--_stats-font-ui);
font-size: calc(12px * var(--_stats-scale));
font-weight: 800;
line-height: 1;
}
#viewStats .statsConcentrationAlert{
display: flex;
align-items: center;
gap: calc(19.8px * var(--_stats-scale));
width: 100%;
min-height: calc(104.4px * var(--_stats-scale));
}
#viewStats .statsConcentrationAlertLine{
width: calc(6.3px * var(--_stats-scale));
height: calc(64.8px * var(--_stats-scale));
flex: 0 0 calc(6.3px * var(--_stats-scale));
border-radius: calc(3.6px * var(--_stats-scale));
background: var(--_stats-pink);
}
#viewStats .statsConcentrationAlertLine-high{ background: #C98E9B; }
#viewStats .statsConcentrationAlertLine-balanced{ background: #9ECAB2; }
#viewStats .statsConcentrationAlertCopy{
display: flex;
flex-direction: column;
gap: calc(8.1px * var(--_stats-scale));
min-width: 0;
}
#viewStats .statsConcentrationAlertCopy span{
color: #6F7778;
font-family: var(--_stats-font-ui);
font-size: calc(19.8px * var(--_stats-scale));
font-weight: 720;
line-height: 1.12;
letter-spacing: calc(-.18px * var(--_stats-scale));
}
#viewStats .statsConcentrationAlertCopy strong{
color: #303A48;
font-family: var(--_stats-font-ui);
font-size: calc(20.7px * var(--_stats-scale));
font-weight: 720;
line-height: 1.18;
letter-spacing: calc(-.225px * var(--_stats-scale));
}
#viewStats .statsPlacesLandscape{
display: grid;
grid-template-columns: minmax(0, calc(560px * var(--_stats-scale))) minmax(0, calc(520px * var(--_stats-scale)));
gap: calc(38px * var(--_stats-scale));
align-items: stretch;
justify-content: space-between;
width: 100%;
min-height: calc(285px * var(--_stats-scale));
}
#viewStats .statsPlacesLadderPanel{
display: flex;
flex-direction: column;
gap: calc(16px * var(--_stats-scale));
padding-top: calc(10px * var(--_stats-scale));
}
#viewStats .statsCapitalMapPanel{
display: flex;
flex-direction: column;
gap: calc(18px * var(--_stats-scale));
padding-top: calc(10px * var(--_stats-scale));
--_stats-capital-content-scale: calc(var(--_stats-scale) * 1.2);
--_stats-capital-content-shift-x: calc(-78px * var(--_stats-scale));
}
#viewStats .statsCapitalMapPanel .statsSectionHead{
transform: translateX(var(--_stats-capital-content-shift-x));
}
#viewStats .statsCapitalMap{
--_stats-capital-hero-bg: linear-gradient(90deg, #EAF2FA 0%, #F4F8FC 68%, rgba(244,248,252,0) 100%);
--_stats-capital-exchange: #6F86DB;
--_stats-capital-wallet: #62AA83;
--_stats-capital-wallet-strong: #2F7A55;
--_stats-capital-unspecified: #A8B1BD;
--_stats-capital-unspecified-strong: #687382;
--_stats-capital-mini-wallet-bg: linear-gradient(90deg, #F6FAF7 0%, rgba(246,250,247,.72) 68%, rgba(246,250,247,0) 100%);
--_stats-capital-mini-exchange-bg: linear-gradient(90deg, #F4F8FC 0%, rgba(244,248,252,.72) 68%, rgba(244,248,252,0) 100%);
--_stats-capital-mini-unspecified-bg: linear-gradient(90deg, #F6F7F9 0%, rgba(246,247,249,.72) 68%, rgba(246,247,249,0) 100%);
display: flex;
flex-direction: column;
gap: calc(18px * var(--_stats-capital-content-scale));
width: 115%;
margin-left: -15%;
min-width: 0;
}
#viewStats .statsCapitalHero{
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(16px * var(--_stats-capital-content-scale));
width: 100%;
min-height: calc(92px * var(--_stats-capital-content-scale));
padding: 0 calc(22px * var(--_stats-capital-content-scale));
border-radius: calc(30px * var(--_stats-capital-content-scale));
}
#viewStats .statsCapitalHero-exchange{
background: var(--_stats-capital-hero-bg);
}
#viewStats .statsCapitalHero-wallet{
background: var(--_stats-capital-hero-bg);
}
#viewStats .statsCapitalHero-unspecified{
background: var(--_stats-capital-hero-bg);
}
#viewStats .statsCapitalHeroCopy{
display: flex;
flex-direction: column;
gap: calc(6px * var(--_stats-capital-content-scale));
min-width: 0;
}
#viewStats .statsCapitalHeroCopy span{
color: #5F6B7A;
font-family: var(--_stats-font-ui);
font-size: calc(14px * var(--_stats-capital-content-scale));
font-weight: 800;
line-height: 1;
}
#viewStats .statsCapitalHeroCopy strong{
overflow: hidden;
color: var(--_stats-text-strong);
font-family: var(--_stats-font-ui);
font-size: calc(24px * var(--_stats-capital-content-scale));
font-weight: 800;
line-height: 1;
letter-spacing: calc(-.5px * var(--_stats-capital-content-scale));
text-overflow: ellipsis;
white-space: nowrap;
}
#viewStats .statsCapitalHeroShare{
color: var(--_stats-capital-exchange);
font-family: var(--_stats-font-ui);
font-size: calc(34px * var(--_stats-capital-content-scale));
font-weight: 800;
line-height: 1;
letter-spacing: calc(-.8px * var(--_stats-capital-content-scale));
white-space: nowrap;
}
#viewStats .statsCapitalHero-wallet .statsCapitalHeroShare{ color: var(--_stats-capital-wallet-strong); }
#viewStats .statsCapitalHero-unspecified .statsCapitalHeroShare{ color: var(--_stats-capital-unspecified-strong); }
#viewStats .statsCapitalStack{
display: flex;
gap: calc(5px * var(--_stats-capital-content-scale));
width: 100%;
height: calc(18px * var(--_stats-scale));
overflow: hidden;
background: transparent;
}
#viewStats .statsCapitalStackSegment{
display: block;
height: 100%;
min-width: 0;
border-radius: calc(9px * var(--_stats-scale));
}
#viewStats .statsCapitalStackSegment-exchange{ background: var(--_stats-capital-exchange); }
#viewStats .statsCapitalStackSegment-wallet{ background: var(--_stats-capital-wallet); }
#viewStats .statsCapitalStackSegment-unspecified{ background: var(--_stats-capital-unspecified); }
#viewStats .statsCapitalMiniCards{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: calc(12px * var(--_stats-capital-content-scale));
min-height: calc(92px * var(--_stats-capital-content-scale));
}
#viewStats .statsCapitalMiniCard{
display: flex;
flex-direction: column;
justify-content: center;
gap: calc(7px * var(--_stats-capital-content-scale));
min-width: 0;
padding: 0 calc(16px * var(--_stats-capital-content-scale));
border-radius: calc(24px * var(--_stats-capital-content-scale));
background: var(--_stats-capital-mini-unspecified-bg);
}
#viewStats .statsCapitalMiniCard-wallet{ background: var(--_stats-capital-mini-wallet-bg); }
#viewStats .statsCapitalMiniCard-exchange{ background: var(--_stats-capital-mini-exchange-bg); }
#viewStats .statsCapitalMiniCard span{
color: #5F6B7A;
font-family: var(--_stats-font-ui);
font-size: calc(13px * var(--_stats-capital-content-scale));
font-weight: 800;
line-height: 1;
}
#viewStats .statsCapitalMiniCard strong{
color: var(--_stats-capital-unspecified-strong);
font-family: var(--_stats-font-ui);
font-size: calc(22px * var(--_stats-capital-content-scale));
font-weight: 800;
line-height: 1;
}
#viewStats .statsCapitalMiniCard-wallet strong{ color: var(--_stats-capital-wallet-strong); }
#viewStats .statsCapitalMiniCard-exchange strong{ color: var(--_stats-capital-exchange); }
#viewStats .statsEmptyState{
display: flex;
align-items: center;
justify-content: center;
min-height: calc(92px * var(--_stats-scale));
width: 100%;
color: var(--_stats-text-soft);
font-family: var(--_stats-font-ui);
font-size: calc(13px * var(--_stats-scale));
font-weight: 700;
line-height: 1.35;
text-align: center;
}
@media (max-width: 1180px){
#viewStats{
--_stats-scale: .74;
padding-right: 16px;
padding-left: 16px;
}
#viewStats .statsHeroComposition,
#viewStats .statsConcentrationSummary,
#viewStats .statsPlacesLandscape{
grid-template-columns: 1fr;
}
#viewStats .statsAssetLadderPanel,
#viewStats .statsCapitalMapPanel{
padding-top: 0;
}
#viewStats .statsCapitalMapPanel{
--_stats-capital-content-scale: var(--_stats-scale);
--_stats-capital-content-shift-x: 0px;
}
#viewStats .statsCapitalMap{
width: 100%;
margin-left: 0;
}
}
@media (max-width: 720px){
#viewStats{
--_stats-scale: .68;
padding-right: 10px;
padding-left: 10px;
}
#viewStats > .statsViewShell > .statsViewInner{
padding: 28px 22px 26px;
}
#viewStats .statsBanner,
#viewStats .statsConcentrationHero{
flex-direction: column;
align-items: flex-start;
}
#viewStats .statsBannerActions{
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
}
#viewStats .statsConcentrationValueBlock{
align-items: flex-start;
}
#viewStats .statsConcentrationHero,
#viewStats .statsConcentrationStack{
width: 100%;
}
#viewStats .statsConcentrationLegend{
flex-wrap: wrap;
height: auto;
}
#viewStats .statsAssetMetricsLine,
#viewStats .statsCapitalMiniCards{
grid-template-columns: 1fr;
display: grid;
}
#viewStats .statsLadderRow{
gap: 10px;
}
#viewStats .statsLadderMeta{
flex-basis: 86px;
}
#viewStats .statsAssetLadderIconSlot,
#viewStats .statsAssetLadder .statsLadderMain,
#viewStats .statsAssetLadderPanel .statsSectionHead,
#viewStats .statsPlacesLadder .statsLadderMeta{
transform: none;
}
}
#viewTaxReport .taxPreviewReasonBadge{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 24px;
padding: 4px 9px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
background: color-mix(in srgb, var(--surface) 94%, transparent);
color: color-mix(in srgb, var(--text) 80%, transparent);
font-size: 12px;
font-weight: 600;
line-height: 1.1;
white-space: nowrap;
}
#viewTaxReport .taxPreviewReasonBadge.is-neutral{
color: color-mix(in srgb, var(--good) 78%, var(--text));
border-color: color-mix(in srgb, var(--good) 26%, var(--border));
background: color-mix(in srgb, var(--good) 12%, var(--surface) 88%);
}
#viewTaxReport .taxPreviewReasonBadge.is-warning{
background: rgba(255,176,32,.10);
border-color: rgba(255,176,32,.22);
color: #8a5a00;
}
#viewTaxReport .taxPreviewReasonBadge.is-danger{
background: rgba(214,58,58,.08);
border-color: rgba(214,58,58,.18);
color: #8d3030;
}
#viewTaxReport .taxProofChip.taxPreviewPendingChip{
color: #2558c9;
border-color: rgba(60,123,255,.35);
background: rgba(60,123,255,.14);
}
#viewSources{
--_sources-scale: .8;
--_sources-font-ui: "Inter", var(--ct-font-sans);
--_sources-shell-w: 1165px;
--_sources-shell-min-h: 806px;
--_sources-shell-pad-top: calc(54px * var(--_sources-scale));
--_sources-shell-pad-x: calc(58px * var(--_sources-scale));
--_sources-shell-pad-bottom: calc(46px * var(--_sources-scale));
--_sources-shell-radius: calc(48px * var(--_sources-scale));
--_sources-shell-bg: rgba(255, 255, 255, .75);
--_sources-shell-border: rgba(228, 228, 225, .5);
--_sources-shell-shadow: none;
--_sources-gap-main: 26px;
--_sources-content-gap: 19px;
--_sources-title-size: calc(47.5px * var(--_sources-scale));
--_sources-title-color: #111827;
--_sources-copy-muted: #8A94A2;
--_sources-text: #18202D;
--_sources-border: #E5EAF1;
--_sources-divider: #E2E8EF;
--_sources-soft-border: #DCE3EC;
--_sources-card-bg: rgba(255, 255, 255, .48);
--_sources-row-bg: #FCFCFD;
--_sources-card-shadow: 0 7px 17px rgba(38, 48, 65, .026), 0 1px 0 rgba(255,255,255,.72) inset;
--_sources-summary-h: 94px;
--_sources-summary-radius: 21px;
--_sources-summary-pad-y: 18px;
--_sources-summary-pad-x: 19px;
--_sources-panel-radius: 27px;
--_sources-head-h: 66px;
--_sources-head-pad-x: 22px;
--_sources-row-h: 102px;
--_sources-row-pad-x: 22px;
--_sources-row-left-gap: 14px;
--_sources-icon-size: 40px;
--_sources-icon-img-size: 40px;
--_sources-icon-radius: 999px;
--_sources-btn-radius: 13px;
--_sources-btn-h: 40px;
--_sources-btn-font: 11px;
padding: 28px 0 40px;
display: flex;
justify-content: center;
background: transparent;
font-family: var(--_sources-font-ui);
}
#viewSources.viewHidden{
display: none;
}
#viewSources .sourcesFloatingShell{
width: min(100%, var(--_sources-shell-w));
min-height: var(--_sources-shell-min-h);
box-sizing: border-box;
display: grid;
align-content: start;
gap: var(--_sources-gap-main);
padding: var(--_sources-shell-pad-top) var(--_sources-shell-pad-x) var(--_sources-shell-pad-bottom);
border: 1px solid var(--_sources-shell-border);
border-radius: var(--_sources-shell-radius);
background: var(--_sources-shell-bg);
box-shadow: var(--_sources-shell-shadow);
overflow: hidden;
}
#viewSources .sourcesPageHeaderBlock{
margin: 0;
border: 0;
background: transparent;
box-shadow: none;
}
#viewSources .sourcesPageHeader{
min-height: 74px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin: 0;
padding: 0;
}
#viewSources .sourcesPageHeaderMain{
min-width: 0;
display: grid;
gap: 6px;
}
#viewSources .sourcesPageTitle{
color: var(--_sources-title-color);
font-family: var(--_sources-font-ui);
font-size: var(--_sources-title-size);
font-weight: 800;
letter-spacing: calc(-1.52px * var(--_sources-scale));
line-height: 1;
}
#viewSources .sourcesPageSubtitle{
color: var(--_sources-copy-muted);
font-family: var(--_sources-font-ui);
font-size: 13px;
font-weight: 490;
line-height: 1.3;
}
#viewSources .sourcesPageHeaderActions{
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
#viewSources .sourcesTabs{
width: 176px;
height: 43px;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 3px;
margin: 0;
padding: 3px;
border: 1px solid #E3E7EC;
border-radius: 14px;
background: #F7F8FA;
}
#viewSources .sourcesTab{
width: 83px;
height: 37px;
min-height: 0;
margin: 0;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 12px;
background: transparent;
color: #7A8594;
font-family: "Inter", var(--ct-font-sans);
font-size: 12px;
font-weight: 725;
line-height: 1;
box-shadow: none;
}
#viewSources .sourcesTab.is-active{
color: var(--_sources-text);
background: #FFFFFF;
font-weight: 765;
box-shadow: none;
}
#viewSources[data-sources-tab="wallets"] .sourcesTabs{
width: 182px;
height: 42px;
gap: 2px;
padding: 2px;
border-radius: 11px;
background: #FFFFFF;
}
#viewSources[data-sources-tab="wallets"] .sourcesTab{
width: 88px;
border-radius: 9px;
}
#viewSources[data-sources-tab="wallets"] .sourcesTab.is-active{
border: 1px solid #E1E6EC;
background: #F5F7FA;
}
#viewSources #btnBackSources{
width: 93px;
height: 43px;
min-height: 0;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
border: 1px solid #E2E6EA;
border-radius: 14px;
background: #FFFFFF;
color: #3D4655;
font-family: "Inter", var(--ct-font-sans);
font-size: 12px;
font-weight: 850;
line-height: 1;
box-shadow: none;
white-space: nowrap;
}
#viewSources #btnBackSources:hover,
#viewSources #btnBackSources:focus-visible{
background: #F7F8FA;
border-color: #D8DEE6;
color: #2F3744;
outline: none;
box-shadow: none;
}
#viewSources #btnBackSources .sourcesBackIcon,
#viewSources #btnBackSources .sourcesBackText{
color: inherit;
font: inherit;
line-height: inherit;
}
#viewSources .sourcesSummary{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
#viewSources .sourcesSummaryCard{
min-width: 0;
min-height: var(--_sources-summary-h);
box-sizing: border-box;
display: grid;
align-content: start;
gap: 6px;
padding: var(--_sources-summary-pad-y) var(--_sources-summary-pad-x);
border: 1px solid var(--_sources-border);
border-radius: var(--_sources-summary-radius);
background: var(--_sources-card-bg);
box-shadow: var(--_sources-card-shadow);
}
#viewSources .sourcesSummaryLabel{
color: #9AA4B2;
font-family: var(--_sources-font-ui);
font-size: 11px;
font-weight: 680;
letter-spacing: .08em;
line-height: 1.1;
}
#viewSources .sourcesSummaryValue{
min-width: 0;
color: var(--_sources-text);
font-family: var(--_sources-font-ui);
font-size: 22px;
font-weight: 675;
letter-spacing: 0;
line-height: 1.1;
}
#viewSources .sourcesSummaryValueAccent{
color: #4E7B5A;
}
#viewSources .sourcesSummaryNetworkList{
width: 90px;
display: grid;
gap: 6px;
color: var(--_sources-text);
font-size: 14px;
font-weight: 675;
}
#viewSources .sourcesSummaryNetworkRow{
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
line-height: 1.1;
}
#viewSources .sourcesSummaryNetworkRow span:first-child{
color: #7A8594;
font-weight: 600;
}
#viewSources .sourcesContent,
#viewSources .sourcesPane{
min-width: 0;
position: relative;
margin: 0;
padding: 0;
}
#viewSources .sourcesConnectedListShell,
#viewSources .sourcesWalletList{
position: relative;
min-width: 0;
overflow: hidden;
border: 1px solid var(--_sources-border);
border-radius: var(--_sources-panel-radius);
background: var(--_sources-card-bg);
box-shadow: 0 8px 20px rgba(38, 48, 65, .026), 0 1px 0 rgba(255,255,255,.72) inset;
}
#viewSources .sourcesListHead{
height: var(--_sources-head-h);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 0 var(--_sources-head-pad-x);
border-bottom: 1px solid var(--_sources-divider);
background: transparent;
}
#viewSources .sourcesSectionTitle{
min-width: 0;
margin: 0;
color: var(--_sources-text);
font-family: var(--_sources-font-ui);
font-size: 18px;
font-weight: 810;
line-height: 1.2;
}
#viewSources .sourcesInlineAddRow{
margin: 0;
padding: 0;
min-height: 0;
display: flex;
align-items: center;
justify-content: flex-end;
border: 0;
background: transparent;
}
#viewSources .sourcesInlineAddBtn{
height: 37px;
min-height: 0;
padding: 0 22px;
border: 1px solid #E1E6EC;
border-radius: 13px;
background: #F7F8FA;
color: #3D4655;
font-family: "Inter", var(--ct-font-sans);
font-size: 11px;
font-weight: 850;
line-height: 1;
box-shadow: none;
white-space: nowrap;
}
#viewSources .sourcesInlineAddBtn::before{
content: "+ ";
font-weight: 850;
}
#viewSources .sourcesInlineAddBtn:hover,
#viewSources .sourcesInlineAddBtn:focus-visible{
background: #F1F4F8;
border-color: #D8DEE6;
color: #2F3744;
outline: none;
box-shadow: none;
}
#viewSources .sourcesConnectedRows,
#viewSources .sourcesWalletRows,
#viewSources #sourcesWalletListRows{
margin: 0;
display: block;
}
#viewSources .sourcesExchangeCard,
#viewSources .sourcesWalletRow{
min-height: var(--_sources-row-h);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 0 var(--_sources-row-pad-x);
border: 0;
border-radius: 0;
background: var(--_sources-row-bg);
box-shadow: 0 1px 0 rgba(255,255,255,.76) inset;
}
#viewSources .sourcesExchangeCard + .sourcesExchangeCard,
#viewSources .sourcesWalletRow + .sourcesWalletRow{
border-top: 1px solid var(--_sources-divider);
}
#viewSources .sourcesExchangeTopRow{
width: 100%;
min-height: var(--_sources-row-h);
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
#viewSources .sourcesExchangeIdentity,
#viewSources .sourcesWalletIdentity{
min-width: 0;
flex: 1 1 auto;
}
#viewSources .sourcesExchangeIdentityHead,
#viewSources .sourcesWalletIdentity{
display: flex;
align-items: center;
gap: var(--_sources-row-left-gap);
}
#viewSources .sourcesExchangeIdentityText,
#viewSources .sourcesWalletText{
min-width: 0;
display: grid;
gap: 5px;
}
#viewSources .sourcesExchangeHeader{
min-width: 0;
}
#viewSources .sourcesConnectedTitle,
#viewSources .sourcesWalletName{
min-width: 0;
color: var(--_sources-text);
font-family: var(--_sources-font-ui);
font-size: 17px;
font-weight: 765;
line-height: 1.2;
}
#viewSources .sourcesConnectedMeta,
#viewSources .sourcesExchangeStatus{
min-width: 0;
margin: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
color: var(--_sources-copy-muted);
font-family: "Inter", var(--ct-font-sans);
font-size: 12px;
font-weight: 640;
line-height: 1.25;
}
#viewSources .sourcesCsvStatus,
#viewSources .sourcesCsvCount{
display: inline-flex;
align-items: center;
gap: 3px;
color: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
white-space: nowrap;
}
#viewSources .sourcesCsvStatusReady{
color: #4E7B5A;
}
#viewSources .sourcesCsvStatusEmpty.sourcesWalletChip{
border: 1px solid #F0E2B8;
background: #FFF8E6;
color: #8A651D;
}
#viewSources .sourcesCsvStatusIcon{
width: 12px;
height: 12px;
fill: none;
stroke: currentColor;
stroke-width: 2.8;
stroke-linecap: round;
stroke-linejoin: round;
}
#viewSources .sourcesExchangeHelpInline{
width: 100%;
margin: 0;
display: flex;
align-items: center;
}
#viewSources .sourcesExchangeHelpInline button{
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: #6E7A8A;
font-family: "Inter", var(--ct-font-sans);
font-size: 10px;
font-weight: 680;
line-height: 1.15;
box-shadow: none;
cursor: pointer;
}
#viewSources .sourcesExchangeHelpInline button:hover{
color: #3D4655;
}
#viewSources .sourcesSourceIcon{
width: var(--_sources-icon-size);
height: var(--_sources-icon-size);
min-width: var(--_sources-icon-size);
min-height: var(--_sources-icon-size);
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: var(--_sources-icon-radius);
background: transparent;
color: var(--_sources-text);
overflow: hidden;
font-family: "Inter", var(--ct-font-sans);
font-size: 10px;
font-weight: 900;
line-height: 1;
}
#viewSources .sourcesSourceIconImg{
width: var(--_sources-icon-img-size);
height: var(--_sources-icon-img-size);
display: block;
object-fit: contain;
border-radius: 999px;
}
#viewSources .sourcesSourceIconFallback{
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
font: inherit;
line-height: inherit;
}
#viewSources .sourcesSourceIcon:has(.sourcesSourceIconImg) .sourcesSourceIconFallback{
display: none;
}
#viewSources .sourcesWalletLogoSlot{
width: var(--_sources-icon-size);
height: var(--_sources-icon-size);
min-width: var(--_sources-icon-size);
min-height: var(--_sources-icon-size);
}
#viewSources .sourcesExchangeActions,
#viewSources .sourcesWalletActions{
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
#viewSources .sourcesExchangeActions button,
#viewSources .sourcesWalletActions button{
height: var(--_sources-btn-h);
min-height: 0;
padding: 0 18px;
border-radius: var(--_sources-btn-radius);
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_sources-btn-font);
font-weight: 850;
line-height: 1;
box-shadow: none;
white-space: nowrap;
}
#viewSources .sourcesExchangeActions [data-open-ready-csv]{
width: 106px;
padding: 0;
border: 0;
background: #18202D;
color: #FFFFFF;
font-weight: 900;
box-shadow: none;
}
#viewSources .sourcesExchangeActions [data-open-ready-csv]:hover{
background: #111827;
}
#viewSources .sourcesExchangeActions [data-exchange-reset]{
width: 118px;
padding: 0;
border: 1px solid #E5E9EE;
background: #F3F5F8;
color: #A0A8B4;
font-weight: 725;
cursor: not-allowed;
}
#viewSources .sourcesExchangeActions [data-exchange-reset]:not(:disabled){
border-color: #E1E6EC;
background: #FFFFFF;
color: #5F6B7A;
cursor: pointer;
}
#viewSources .sourcesExchangeActions [data-exchange-reset]:not(:disabled):hover,
#viewSources .sourcesExchangeActions [data-exchange-reset]:not(:disabled):focus-visible{
background: #FAFBFC;
border-color: #D8DEE6;
color: #3D4655;
}
#viewSources .sourcesExchangeActions [data-exchange-del],
#viewSources .sourcesWalletDelete{
width: 90px;
padding: 0;
border: 1px solid #F0DCDD;
background: #FFF8F8;
color: #B76575;
}
#viewSources .sourcesWalletActions button.sourcesWalletEdit{
width: 114px;
padding: 0;
border: 1px solid #E1E6EC;
background: #FFFFFF;
color: #5F6B7A;
font-weight: 510;
}
#viewSources .sourcesWalletDelete{
background: transparent;
}
#viewSources .sourcesWalletDeleteConfirm{
border-color: rgba(183, 101, 117, .55);
background: #FFF1F2;
color: #9F4E5F;
}
#viewSources .sourcesWalletRow{
min-height: 110px;
}
#viewSources .sourcesWalletRowMeta{
min-width: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
}
#viewSources .sourcesWalletChip,
#viewSources .sourcesWalletAddress,
#viewSources .sourcesWalletCreated,
#viewSources .sourcesWalletStatus{
min-height: 26px;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
border-radius: 10px;
background: #F7F8FA;
color: #6E7A8A;
font-family: "Inter", var(--ct-font-sans);
font-size: 10px;
font-weight: 850;
line-height: 1;
white-space: nowrap;
}
#viewSources .sourcesWalletChainChip,
#viewSources .sourcesWalletAddress,
#viewSources .sourcesWalletCreated{
font-weight: 595;
}
#viewSources .sourcesWalletChainChip{
background: #F3F5F8;
}
#viewSources .sourcesWalletAddress{
max-width: 136px;
overflow: hidden;
text-overflow: ellipsis;
}
#viewSources .sourcesWalletStatus{
border: 1px solid #DDEBE2;
background: #F3FAF5;
color: #4E7B5A;
}
#viewSources .sourcesEmptyState{
display: none;
min-height: 190px;
box-sizing: border-box;
align-items: center;
justify-content: flex-start;
padding: 0 var(--_sources-row-pad-x);
background: var(--_sources-row-bg);
}
#viewSources .sourcesConnectedListShell.is-empty .sourcesEmptyState,
#viewSources .sourcesWalletList.is-empty .sourcesEmptyState{
display: flex;
}
#viewSources .sourcesConnectedListShell.is-empty .sourcesListHead,
#viewSources .sourcesWalletList.is-empty .sourcesListHead{
position: relative;
}
#viewSources .sourcesConnectedListShell.is-empty .sourcesInlineAddRow,
#viewSources .sourcesWalletList.is-empty .sourcesInlineAddRow{
position: absolute;
top: calc(var(--_sources-head-h) + 76px);
right: var(--_sources-row-pad-x);
z-index: 1;
}
#viewSources .sourcesConnectedListShell.is-empty .sourcesInlineAddBtn,
#viewSources .sourcesWalletList.is-empty .sourcesInlineAddBtn{
background: #18202D;
border-color: #18202D;
color: #FFFFFF;
box-shadow: none;
}
#viewSources .sourcesEmptyLeft{
min-width: 0;
display: flex;
align-items: center;
gap: 14px;
}
#viewSources .sourcesEmptyIcon{
width: 43px;
height: 43px;
min-width: 43px;
min-height: 43px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: #F3F5F8;
color: #7A8594;
font-size: 18px;
line-height: 1;
}
#viewSources .sourcesEmptyCopy{
min-width: 0;
display: grid;
gap: 5px;
}
#viewSources .sourcesEmptyTitle{
color: var(--_sources-text);
font-family: "Inter", var(--ct-font-sans);
font-size: 18px;
font-weight: 900;
line-height: 1.15;
}
#viewSources .sourcesEmptyHint{
color: var(--_sources-copy-muted);
font-family: "Inter", var(--ct-font-sans);
font-size: 11px;
font-weight: 700;
line-height: 1.25;
}
#viewSources .sourcesDevPanel{
margin-bottom: 16px;
border: 1px dashed var(--_sources-soft-border);
border-radius: 14px;
background: rgba(255,255,255,.70);
padding: 12px;
display: grid;
gap: 8px;
}
#viewSources .sourcesDevPanel.hidden{ display: none; }
#viewSources .sourcesDevTitle{
color: var(--_sources-copy-muted);
font-size: 11px;
font-weight: 850;
letter-spacing: .04em;
text-transform: uppercase;
}
#viewSources .sourcesDevRow{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
#viewSources #devPlaceProviderTarget{
min-width: 220px;
width: auto;
flex: 1 1 220px;
}
#viewSources .sourcesDevDebug{
max-height: 220px;
margin: 0;
overflow: auto;
padding: 8px;
border: 1px solid var(--_sources-soft-border);
border-radius: 10px;
background: #F7F8FA;
color: var(--_sources-text);
font-size: 12px;
line-height: 1.4;
white-space: pre-wrap;
}
#viewSources .sourcesGuidePopover{
position: fixed;
top: 0;
left: 0;
z-index: 12;
width: min(420px, calc(100% - 24px));
padding: 10px;
border: 1px solid var(--_sources-border);
border-radius: 12px;
background: rgba(255,255,255,.97);
box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
}
#viewSources .sourcesGuideHead{
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
#viewSources .sourcesGuideTitle{
font-size: 13px;
font-weight: 800;
}
#viewSources .sourcesGuideSteps{
margin: 8px 0 0;
padding-left: 18px;
display: grid;
gap: 4px;
color: #6E7A8A;
font-size: 12px;
line-height: 1.35;
}
#viewSources .sourcesSoon{
display: inline-flex;
align-items: center;
padding: 3px 8px;
border: 1px solid var(--_sources-border);
border-radius: 999px;
color: #6E7A8A;
font-size: 12px;
line-height: 1;
white-space: nowrap;
}
@media (max-width: 980px){
#viewSources{
padding: 12px 0 28px;
}
#viewSources .sourcesFloatingShell{
min-height: 0;
padding: 28px 18px;
border-radius: 26px;
}
#viewSources .sourcesPageHeader{
align-items: flex-start;
flex-direction: column;
}
#viewSources .sourcesPageHeaderActions{
width: 100%;
justify-content: space-between;
flex-wrap: wrap;
}
#viewSources .sourcesSummary{
grid-template-columns: 1fr;
}
#viewSources .sourcesExchangeTopRow,
#viewSources .sourcesWalletRow{
align-items: flex-start;
flex-wrap: wrap;
padding-top: 20px;
padding-bottom: 20px;
}
#viewSources .sourcesExchangeActions,
#viewSources .sourcesWalletActions{
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
}
#viewSources .sourcesListHead{
height: auto;
min-height: var(--_sources-head-h);
align-items: flex-start;
flex-direction: column;
padding: 18px var(--_sources-head-pad-x);
}
#viewSources .sourcesEmptyState{
align-items: flex-start;
min-height: 180px;
padding-top: 32px;
}
}
#sourcesPickerModal{
z-index: 72;
--_sources-picker-modal-width: 520px;
--_sources-picker-modal-height: auto;
--_sources-picker-modal-min-height: auto;
--_sources-picker-modal-max-height: calc(100dvh - 32px);
--_sources-picker-modal-radius: 16px;
--_sources-picker-modal-surface: #FFFFFF;
--_sources-picker-modal-border: rgba(226, 227, 225, .88);
--_sources-picker-modal-shadow: 0 12px 30px rgba(15, 23, 42, .055), 0 1px 0 rgba(255,255,255,.82) inset;
--_sources-picker-modal-header-bg: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(249,250,249,.94) 100%);
--_sources-picker-modal-body-bg: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(252,252,251,.96) 100%);
--_sources-picker-modal-footer-bg: linear-gradient(180deg, rgba(250, 250, 249, .42) 0%, rgba(247,248,247,.94) 100%);
--_sources-picker-modal-header-pad-y: 16px;
--_sources-picker-modal-header-pad-x: 22px;
--_sources-picker-modal-body-pad-y: 22px;
--_sources-picker-modal-body-pad-x: 22px;
--_sources-picker-modal-section-gap: 12px;
--_sources-picker-modal-title-size: 15px;
--_sources-picker-modal-title-weight: 700;
--_sources-picker-modal-title-color: #111827;
--_sources-picker-modal-copy-color: #8D959E;
--_sources-picker-modal-copy-size: 10.5px;
--_sources-picker-modal-copy-weight: 500;
--_sources-picker-modal-close-size: 28px;
--_sources-picker-modal-close-radius: 8px;
--_sources-picker-modal-close-bg: #F3F4F4;
--_sources-picker-modal-close-bg-hover: #ECEEEB;
--_sources-picker-modal-close-color: #707883;
--_sources-picker-modal-close-icon-size: 12px;
--_sources-picker-modal-search-height: 32px;
--_sources-picker-modal-search-pad-x: 11px;
--_sources-picker-modal-search-radius: 8px;
--_sources-picker-modal-search-border: #E3E5E3;
--_sources-picker-modal-search-focus-border: #CDD2D1;
--_sources-picker-modal-search-focus-shadow: 0 0 0 2px rgba(205, 210, 209, .22);
--_sources-picker-modal-row-gap: 8px;
--_sources-picker-modal-row-pad-y: 10px;
--_sources-picker-modal-row-pad-x: 12px;
--_sources-picker-modal-row-radius: 12px;
--_sources-picker-modal-row-border: #E4E6E4;
--_sources-picker-modal-row-bg: linear-gradient(180deg, #FBFCFB 0%, #F7F8F7 100%);
--_sources-picker-modal-row-title-size: 12px;
--_sources-picker-modal-row-title-weight: 700;
--_sources-picker-modal-row-meta-size: 10.5px;
--_sources-picker-modal-row-meta-color: #8D959E;
--_sources-picker-modal-row-btn-height: 30px;
--_sources-picker-modal-row-btn-pad-x: 12px;
--_sources-picker-modal-row-btn-radius: 8px;
--_sources-picker-modal-row-btn-font-size: 11px;
--_sources-picker-modal-row-btn-font-weight: 600;
--_sources-picker-modal-row-btn-bg: #F3F4F4;
--_sources-picker-modal-row-btn-border: #E4E6E4;
--_sources-picker-modal-row-btn-text: #374151;
--_sources-picker-modal-divider: #ECEEEC;
--_sources-picker-modal-footer-pad-top: 10px;
--_sources-picker-modal-footer-pad-x: 22px;
--_sources-picker-modal-footer-pad-bottom: 15px;
--_sources-picker-modal-btn-height: 32px;
--_sources-picker-modal-btn-radius: 8px;
--_sources-picker-modal-btn-font-size: 11px;
--_sources-picker-modal-btn-font-weight: 600;
--_sources-picker-modal-btn-secondary-bg: #F3F4F4;
--_sources-picker-modal-btn-secondary-border: #E4E6E4;
--_sources-picker-modal-btn-secondary-text: #374151;
--_sources-picker-modal-btn-secondary-pad-x: 16px;
--_sources-picker-modal-font: "Inter", var(--ct-font-sans);
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"]{
--_modal-overlay-bg: var(--ct-modal-backdrop-bg);
--_sources-picker-modal-width: 950.4px;
--_sources-picker-modal-height: 521.28px;
--_sources-picker-modal-min-height: auto;
--_sources-picker-modal-max-height: calc(100dvh - (var(--stickyTop, 0px) + 57.6px));
--_sources-picker-modal-radius: 35px;
--_sources-picker-modal-surface: linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%);
--_sources-picker-modal-border: rgba(255,255,255,.72);
--_sources-picker-modal-shadow: 0 30px 62px rgba(7, 17, 31, .33);
--_sources-picker-modal-header-bg: transparent;
--_sources-picker-modal-body-bg: transparent;
--_sources-picker-modal-footer-bg: transparent;
--_sources-picker-modal-header-pad-y: 43px;
--_sources-picker-modal-header-pad-x: 43px;
--_sources-picker-modal-body-pad-y: 31px;
--_sources-picker-modal-body-pad-x: 43px;
--_sources-picker-modal-section-gap: 0;
--_sources-picker-modal-title-size: 37.44px;
--_sources-picker-modal-title-weight: 800;
--_sources-picker-modal-title-color: #18202D;
--_sources-picker-modal-copy-color: #727D8C;
--_sources-picker-modal-copy-size: 12.96px;
--_sources-picker-modal-copy-weight: 500;
--_sources-picker-modal-close-size: 43px;
--_sources-picker-modal-close-radius: 22px;
--_sources-picker-modal-close-bg: #F2F4F6;
--_sources-picker-modal-close-bg-hover: #E9EDF2;
--_sources-picker-modal-close-color: #687382;
--_sources-picker-modal-close-icon-size: 26px;
--_sources-picker-modal-row-gap: 17.6px;
--_sources-picker-modal-row-title-size: 21.1px;
--_sources-picker-modal-row-title-weight: 900;
--_sources-picker-modal-row-meta-size: 11.2px;
--_sources-picker-modal-row-meta-color: #727D8C;
--_sources-picker-modal-row-btn-height: 37px;
--_sources-picker-modal-row-btn-pad-x: 17.6px;
--_sources-picker-modal-row-btn-radius: 14px;
--_sources-picker-modal-row-btn-font-size: 12px;
--_sources-picker-modal-row-btn-font-weight: 800;
--_sources-picker-modal-row-btn-bg: #F4F6F8;
--_sources-picker-modal-row-btn-border: transparent;
--_sources-picker-modal-row-btn-text: #596576;
--_sources-picker-modal-divider: #E9EDF3;
--_sources-picker-modal-footer-pad-top: 16px;
--_sources-picker-modal-footer-pad-x: 43px;
--_sources-picker-modal-footer-pad-bottom: 32px;
--_sources-picker-modal-btn-height: 46px;
--_sources-picker-modal-btn-radius: 18px;
--_sources-picker-modal-btn-font-size: 12.8px;
--_sources-picker-modal-btn-font-weight: 800;
align-items: flex-start;
padding: calc(var(--stickyTop, 0px) + 28.8px) 16.2px 28.8px;
}
#sourcesPickerModal .sourcesPickerCard{
width: min(var(--_sources-picker-modal-width), calc(100vw - 24px));
max-width: var(--_sources-picker-modal-width);
}
#sourcesPickerModal .sourcesPickerModalCard{
position: relative;
display: flex;
flex-direction: column;
width: min(var(--_sources-picker-modal-width), 100%);
height: var(--_sources-picker-modal-height);
min-height: var(--_sources-picker-modal-min-height);
max-height: var(--_sources-picker-modal-max-height);
border-radius: var(--_sources-picker-modal-radius);
border: 1px solid var(--_sources-picker-modal-border);
background: var(--_sources-picker-modal-surface);
box-shadow: var(--_sources-picker-modal-shadow);
overflow: hidden;
font-family: var(--_sources-picker-modal-font);
}
#sourcesPickerModal .sourcesPickerModalCard::before{
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, rgba(224, 227, 224, 0) 0%, rgba(224, 227, 224, .72) 52%, rgba(224, 227, 224, 0) 100%);
pointer-events: none;
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"] .sourcesPickerModalCard::before{
background: rgba(255,255,255,.84);
}
#sourcesPickerModal .sourcesPickerModalHead{
position: static;
gap: 12px;
padding: var(--_sources-picker-modal-header-pad-y) var(--_sources-picker-modal-header-pad-x);
border-bottom: 1px solid var(--_sources-picker-modal-border);
background: var(--_sources-picker-modal-header-bg);
box-shadow: inset 0 -1px 0 rgba(255,255,255,.72);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"] .sourcesPickerModalHead{
align-items: flex-start;
padding-bottom: 0;
border-bottom: 0;
box-shadow: none;
}
#sourcesPickerModal .sourcesPickerModalTitleWrap{
display: grid;
gap: 6px;
min-width: 0;
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"] .sourcesPickerModalTitleWrap{
max-width: 650px;
gap: 8px;
}
#sourcesPickerModal .sourcesPickerModalTitle{
color: var(--_sources-picker-modal-title-color);
font-size: var(--_sources-picker-modal-title-size);
font-weight: var(--_sources-picker-modal-title-weight);
line-height: 1.2;
letter-spacing: 0;
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"] .sourcesPickerModalTitle{
line-height: 1.18;
letter-spacing: -1.08px;
}
#sourcesPickerModal .sourcesPickerModalClose{
width: var(--_sources-picker-modal-close-size);
min-width: var(--_sources-picker-modal-close-size);
height: var(--_sources-picker-modal-close-size);
min-height: var(--_sources-picker-modal-close-size);
border: 0;
border-radius: var(--_sources-picker-modal-close-radius);
background: var(--_sources-picker-modal-close-bg);
color: var(--_sources-picker-modal-close-color);
box-shadow: none;
transition: background-color .16s ease, color .16s ease;
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"] .sourcesPickerModalClose{
border: 1px solid #E0E5EB;
}
#sourcesPickerModal .sourcesPickerModalClose:hover{
background: var(--_sources-picker-modal-close-bg-hover);
color: #67707C;
border-color: transparent;
box-shadow: none;
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"] .sourcesPickerModalClose:hover{
border-color: #D7DEE7;
}
#sourcesPickerModal .sourcesPickerModalCloseIcon{
width: var(--_sources-picker-modal-close-icon-size);
height: var(--_sources-picker-modal-close-icon-size);
display: block;
}
#sourcesPickerModal .sourcesPickerModalCloseIcon path{
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"] .sourcesPickerModalCloseIcon path{
stroke-width: 1.3;
}
#sourcesPickerModal .sourcesPickerModalBody{
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: var(--_sources-picker-modal-section-gap);
padding: var(--_sources-picker-modal-body-pad-y) var(--_sources-picker-modal-body-pad-x);
background: var(--_sources-picker-modal-body-bg);
overflow: auto;
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"] .sourcesPickerModalBody{
overflow: hidden;
}
#sourcesPickerModal .sourcesPickerModalHint{
color: var(--_sources-picker-modal-copy-color);
font-size: var(--_sources-picker-modal-copy-size);
font-weight: var(--_sources-picker-modal-copy-weight);
line-height: 1.35;
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"] .sourcesPickerModalHint{
max-width: 560px;
line-height: 1.4;
letter-spacing: 0;
}
#sourcesPickerModal .sourcesPickerSearchWrap{
display: none;
margin-top: -2px;
}
#sourcesPickerModal #sourcesPickerSearch{
width: 100%;
min-height: var(--_sources-picker-modal-search-height);
height: var(--_sources-picker-modal-search-height);
padding: 0 var(--_sources-picker-modal-search-pad-x);
border-radius: var(--_sources-picker-modal-search-radius);
border: 1px solid var(--_sources-picker-modal-search-border);
background: #FFFFFF;
color: #111827;
font-family: var(--_sources-picker-modal-font);
font-size: 11px;
line-height: 1.1;
box-shadow: none;
transition: border-color .18s ease, box-shadow .18s ease;
}
#sourcesPickerModal #sourcesPickerSearch::placeholder{
color: #9CA3AF;
}
#sourcesPickerModal #sourcesPickerSearch:hover{
border-color: #D7DAD8;
}
#sourcesPickerModal #sourcesPickerSearch:focus,
#sourcesPickerModal #sourcesPickerSearch:focus-visible{
border-color: var(--_sources-picker-modal-search-focus-border);
box-shadow: var(--_sources-picker-modal-search-focus-shadow);
}
#sourcesPickerModal .sourcesPickerModalBodyGrid{
display: block;
min-width: 0;
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"] .sourcesPickerModalBodyGrid{
display: grid;
grid-template-columns: minmax(0, 500px) minmax(0, 336px);
column-gap: 36px;
align-items: start;
min-height: 284px;
}
#sourcesPickerModal .sourcesPickerList{
margin-top: 0;
display: grid;
gap: var(--_sources-picker-modal-row-gap);
max-height: min(52vh, 420px);
overflow: auto;
padding-right: 2px;
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"] .sourcesPickerList{
gap: 0;
margin-top: 42px;
max-height: none;
overflow: visible;
padding-right: 0;
}
#sourcesPickerModal .sourcesPickerList > .small{
color: var(--_sources-picker-modal-copy-color);
font-size: var(--_sources-picker-modal-copy-size);
line-height: 1.35;
padding: 2px 0;
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"] .sourcesPickerList > .small{
align-self: start;
padding: 18px 0;
font-size: 13px;
}
#sourcesPickerModal .sourcesPickerRow{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border: 1px solid var(--_sources-picker-modal-row-border);
border-radius: var(--_sources-picker-modal-row-radius);
background: var(--_sources-picker-modal-row-bg);
padding: var(--_sources-picker-modal-row-pad-y) var(--_sources-picker-modal-row-pad-x);
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"] .sourcesPickerExchangeRow{
min-height: 76px;
gap: 17.6px;
padding: 0 0 17.6px;
border: 0;
border-bottom: 1px solid #E7ECF1;
border-radius: 0;
background: transparent;
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"] .sourcesPickerExchangeRow + .sourcesPickerExchangeRow{
padding-top: 17.6px;
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"] .sourcesPickerExchangeRow:last-child{
border-bottom: 0;
}
#sourcesPickerModal .sourcesPickerExchangeMain{
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
#sourcesPickerModal .sourcesPickerExchangeCopy{
display: grid;
gap: 4px;
min-width: 0;
}
#sourcesPickerModal .sourcesPickerExchangeIcon{
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 46px;
width: 46px;
height: 46px;
border: 0;
border-radius: 999px;
background: transparent;
color: #18202D;
overflow: hidden;
font-size: 10.4px;
font-weight: 800;
line-height: 1;
letter-spacing: 0;
}
#sourcesPickerModal .sourcesPickerExchangeIconImg{
width: 46px;
height: 46px;
display: block;
object-fit: contain;
border-radius: 999px;
}
#sourcesPickerModal .sourcesPickerExchangeIconFallback{
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
font: inherit;
line-height: inherit;
}
#sourcesPickerModal .sourcesPickerExchangeIcon:has(.sourcesPickerExchangeIconImg) .sourcesPickerExchangeIconFallback{
display: none;
}
#sourcesPickerModal .sourcesPickerRowTitle{
color: #111827;
font-weight: var(--_sources-picker-modal-row-title-weight);
font-size: var(--_sources-picker-modal-row-title-size);
line-height: 1.2;
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"] .sourcesPickerRowTitle{
color: #18202D;
line-height: 1.12;
}
#sourcesPickerModal .sourcesPickerRowMeta{
font-size: var(--_sources-picker-modal-row-meta-size);
color: var(--_sources-picker-modal-row-meta-color);
line-height: 1.35;
margin-top: 2px;
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"] .sourcesPickerRowMeta{
font-weight: 500;
line-height: 1.25;
margin-top: 0;
}
#sourcesPickerModal .sourcesPickerRow button{
flex: 0 0 auto;
min-height: var(--_sources-picker-modal-row-btn-height);
padding: 0 var(--_sources-picker-modal-row-btn-pad-x);
border-radius: var(--_sources-picker-modal-row-btn-radius);
border: 1px solid var(--_sources-picker-modal-row-btn-border);
background: var(--_sources-picker-modal-row-btn-bg);
color: var(--_sources-picker-modal-row-btn-text);
font-size: var(--_sources-picker-modal-row-btn-font-size);
font-weight: var(--_sources-picker-modal-row-btn-font-weight);
line-height: 1.1;
box-shadow: none;
}
#sourcesPickerModal .sourcesPickerRow button:hover{
background: #EEEFEF;
border-color: #D9DDDB;
color: #1F2937;
box-shadow: none;
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"] .sourcesPickerRow button:hover{
background: #EEF1F4;
border-color: transparent;
color: #18202D;
}
#sourcesPickerModal .sourcesPickerRow button:disabled{
opacity: 1;
background: #F3F4F4;
border-color: #E4E6E4;
color: #9CA3AF;
box-shadow: none;
}
#sourcesPickerModal .sourcesPickerContext[hidden]{
display: none;
}
#sourcesPickerModal .sourcesPickerContext{
display: grid;
align-content: start;
gap: 10px;
min-width: 0;
padding: 10px 6px 0 19px;
}
#sourcesPickerModal .sourcesPickerContextBadge{
display: inline-flex;
align-items: center;
justify-self: start;
gap: 6px;
min-height: 22px;
padding: 0 10px;
border-radius: 999px;
background: #EEF7F3;
color: #2F7358;
font-size: 8.8px;
font-weight: 700;
line-height: 1;
}
#sourcesPickerModal .sourcesPickerContextBadgeDot{
width: 5px;
height: 5px;
border-radius: 999px;
background: #2F9E72;
}
#sourcesPickerModal .sourcesPickerContextCopy{
display: grid;
gap: 7px;
padding-top: 1px;
}
#sourcesPickerModal .sourcesPickerContextTitle{
color: #101828;
font-size: 14.4px;
font-weight: 780;
line-height: 1.2;
}
#sourcesPickerModal .sourcesPickerContextText{
max-width: 288px;
color: #667085;
font-size: 9.6px;
font-weight: 400;
line-height: 1.38;
}
#sourcesPickerModal .sourcesPickerContextDivider{
height: 1px;
margin: 8px 0;
background: #E9EDF3;
}
#sourcesPickerModal .sourcesPickerContextChecklist{
display: grid;
gap: 10px;
}
#sourcesPickerModal .sourcesPickerContextItem{
display: grid;
grid-template-columns: 14px minmax(0, 1fr);
align-items: start;
gap: 10px;
}
#sourcesPickerModal .sourcesPickerContextIcon{
display: inline-grid;
width: 14px;
height: 14px;
place-items: center;
color: #7E90A7;
}
#sourcesPickerModal .sourcesPickerContextIcon svg{
width: 14px;
height: 14px;
display: block;
}
#sourcesPickerModal .sourcesPickerContextIcon path{
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
#sourcesPickerModal .sourcesPickerContextIconSource{
color: #2F7358;
}
#sourcesPickerModal .sourcesPickerContextIconHash{
color: #B4843F;
}
#sourcesPickerModal .sourcesPickerContextItemCopy{
display: grid;
gap: 2px;
min-width: 0;
}
#sourcesPickerModal .sourcesPickerContextLabel{
color: #98A2B3;
font-size: 9.8px;
font-weight: 570;
line-height: 1.2;
}
#sourcesPickerModal .sourcesPickerContextValue{
color: #344054;
font-size: 11.4px;
font-weight: 500;
line-height: 1.24;
}
#sourcesPickerModal .sourcesPickerContextDividerBottom{
margin-bottom: 0;
}
#sourcesPickerModal .sourcesPickerContextNote{
display: flex;
align-items: center;
gap: 10px;
margin-top: -2px;
padding: 9px 12px;
border-radius: 18px;
background: #F6F8FB;
color: #667085;
font-size: 9.6px;
font-weight: 500;
line-height: 1.35;
}
#sourcesPickerModal .sourcesPickerContextNoteIcon{
display: inline-grid;
flex: 0 0 14px;
width: 14px;
height: 14px;
place-items: center;
color: #7E90A7;
}
#sourcesPickerModal .sourcesPickerContextNoteIcon svg{
width: 14px;
height: 14px;
display: block;
}
#sourcesPickerModal .sourcesPickerContextNoteIcon :is(path, rect){
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
#sourcesPickerModal .sourcesPickerModalActions{
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
margin-top: 2px;
padding: var(--_sources-picker-modal-footer-pad-top) var(--_sources-picker-modal-footer-pad-x) var(--_sources-picker-modal-footer-pad-bottom);
border-top: 1px solid var(--_sources-picker-modal-divider);
background: var(--_sources-picker-modal-footer-bg);
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"] .sourcesPickerModalActions{
display: none;
}
#sourcesPickerModal .sourcesPickerModalSecondaryBtn{
min-height: var(--_sources-picker-modal-btn-height);
padding: 0 var(--_sources-picker-modal-btn-secondary-pad-x);
border-radius: var(--_sources-picker-modal-btn-radius);
font-size: var(--_sources-picker-modal-btn-font-size);
font-weight: var(--_sources-picker-modal-btn-font-weight);
line-height: 1.1;
box-shadow: none;
}
#sourcesPickerModal .sourcesPickerModalSecondaryBtn{
border: 1px solid var(--_sources-picker-modal-btn-secondary-border);
background: var(--_sources-picker-modal-btn-secondary-bg);
color: var(--_sources-picker-modal-btn-secondary-text);
}
#sourcesPickerModal .sourcesPickerModalSecondaryBtn:hover{
background: #EEEFEF;
border-color: #D9DDDB;
color: #1F2937;
box-shadow: none;
}
@media (max-width: 980px){
#sourcesPickerModal[data-sources-picker-mode="exchanges"]{
--_sources-picker-modal-header-pad-y: 34px;
--_sources-picker-modal-header-pad-x: 34px;
--_sources-picker-modal-body-pad-y: 26px;
--_sources-picker-modal-body-pad-x: 34px;
--_sources-picker-modal-footer-pad-x: 34px;
--_sources-picker-modal-title-size: 34px;
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"] .sourcesPickerModalBodyGrid{
grid-template-columns: minmax(0, 1fr) minmax(248px, 32%);
column-gap: 28px;
}
}
@media (max-width: 760px){
#sourcesPickerModal{
--_sources-picker-modal-header-pad-x: 18px;
--_sources-picker-modal-body-pad-x: 18px;
--_sources-picker-modal-footer-pad-x: 18px;
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"]{
--_sources-picker-modal-min-height: auto;
--_sources-picker-modal-radius: 24px;
--_sources-picker-modal-header-pad-y: 24px;
--_sources-picker-modal-title-size: 28px;
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"] .sourcesPickerModalBody{
overflow: auto;
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"] .sourcesPickerModalBodyGrid{
grid-template-columns: 1fr;
row-gap: 24px;
}
#sourcesPickerModal .sourcesPickerRow{
flex-direction: column;
align-items: stretch;
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"] .sourcesPickerExchangeRow{
flex-direction: row;
align-items: center;
}
#sourcesPickerModal .sourcesPickerRow button{
width: 100%;
}
#sourcesPickerModal[data-sources-picker-mode="exchanges"] .sourcesPickerRow button{
width: auto;
}
#sourcesPickerModal .sourcesPickerModalActions{
justify-content: stretch;
}
#sourcesPickerModal .sourcesPickerModalSecondaryBtn{
flex: 1 1 0;
}
}
/* === Asset detail page (Pencil floating shell) === */
#viewAsset{
--_asset-detail-scale: .8;
--_asset-detail-font: "Inter", var(--ct-font-sans);
--_asset-detail-shell-w: calc(1456px * var(--_asset-detail-scale));
--_asset-detail-shell-gap: calc(28px * var(--_asset-detail-scale));
--_asset-detail-shell-pad-y: calc(44px * var(--_asset-detail-scale));
--_asset-detail-shell-pad-x: calc(54px * var(--_asset-detail-scale));
--_asset-detail-shell-radius: calc(48px * var(--_asset-detail-scale));
--_asset-detail-shell-bg: rgba(255, 255, 255, .75);
--_asset-detail-shell-shadow: none;
--_asset-detail-surface-bg: rgba(255, 255, 255, .48);
--_asset-detail-surface-border: #E5EAF1;
--_asset-detail-surface-divider: #E2E8EF;
--_asset-detail-surface-shadow: 0 8px 20px rgba(38, 48, 65, .026), 0 1px 0 rgba(255,255,255,.72) inset;
--_asset-detail-header-h: calc(96px * var(--_asset-detail-scale));
--_asset-detail-token-size: calc(62px * var(--_asset-detail-scale) * .95);
--_asset-detail-token-radius: calc(22px * var(--_asset-detail-scale));
--_asset-detail-token-text: #3D78B4;
--_asset-detail-token-border: transparent;
--_asset-detail-token-bg: transparent;
--_asset-detail-title-size: calc(44px * var(--_asset-detail-scale) * .95);
--_asset-detail-title-weight: 810;
--_asset-detail-title-color: #111827;
--_asset-detail-subtitle-size: calc(15px * var(--_asset-detail-scale));
--_asset-detail-subtitle-weight: 490;
--_asset-detail-subtitle-color: #7A8594;
--_asset-detail-action-gap: calc(12px * var(--_asset-detail-scale));
--_asset-detail-action-h: calc(50px * var(--_asset-detail-scale));
--_asset-detail-action-radius: calc(18px * var(--_asset-detail-scale));
--_asset-detail-action-font: calc(15px * var(--_asset-detail-scale));
--_asset-detail-action-secondary-w: calc(126px * var(--_asset-detail-scale));
--_asset-detail-action-primary-w: calc(132px * var(--_asset-detail-scale));
--_asset-detail-hero-gap: calc(34px * var(--_asset-detail-scale));
--_asset-detail-hero-pad-top: calc(36px * var(--_asset-detail-scale));
--_asset-detail-hero-pad-x: calc(38px * var(--_asset-detail-scale));
--_asset-detail-hero-pad-bottom: calc(36px * var(--_asset-detail-scale));
--_asset-detail-hero-radius: calc(30px * var(--_asset-detail-scale));
--_asset-detail-hero-border: var(--_asset-detail-surface-border);
--_asset-detail-hero-bg: var(--_asset-detail-surface-bg);
--_asset-detail-hero-shadow: 0 7px 17px rgba(38, 48, 65, .026), 0 1px 0 rgba(255,255,255,.72) inset;
--_asset-detail-divider: var(--_asset-detail-surface-divider);
--_asset-detail-label: #9AA3AE;
--_asset-detail-hint: #8A94A2;
--_asset-detail-hint-secondary: #7A8594;
--_asset-detail-value: #111827;
--_asset-detail-primary-value-size: calc(58px * var(--_asset-detail-scale) * .9025);
--_asset-detail-primary-label-size: calc(14px * var(--_asset-detail-scale) * .95);
--_asset-detail-primary-hint-size: calc(15px * var(--_asset-detail-scale) * .95);
--_asset-detail-secondary-value-size: calc(38px * var(--_asset-detail-scale) * .9025);
--_asset-detail-secondary-label-size: calc(13px * var(--_asset-detail-scale) * .95);
--_asset-detail-secondary-hint-size: calc(14px * var(--_asset-detail-scale) * .95);
--_asset-detail-metric-gap: calc(12px * var(--_asset-detail-scale));
--_asset-detail-secondary-gap: calc(8px * var(--_asset-detail-scale));
--_asset-detail-pnl-good-bg: #F0F7F2;
--_asset-detail-pnl-good-border: #DDEBE2;
--_asset-detail-pnl-good-text: #4F855E;
--_asset-detail-pnl-bad-bg: #FDF1DF;
--_asset-detail-pnl-bad-border: #F3DFC3;
--_asset-detail-pnl-bad-text: #95602A;
--_asset-detail-panel-gap: calc(24px * var(--_asset-detail-scale));
--_asset-detail-panel-h: calc(440px * var(--_asset-detail-scale));
--_asset-detail-panel-radius: calc(30px * var(--_asset-detail-scale));
--_asset-detail-panel-pad-y: calc(26px * var(--_asset-detail-scale));
--_asset-detail-panel-pad-x: calc(28px * var(--_asset-detail-scale));
--_asset-detail-panel-bg: var(--_asset-detail-surface-bg);
--_asset-detail-panel-border: var(--_asset-detail-surface-border);
--_asset-detail-panel-shadow: var(--_asset-detail-surface-shadow);
--_asset-detail-panel-row-h: calc(72px * var(--_asset-detail-scale));
--_asset-detail-panel-visible-rows: 5;
--_asset-detail-panel-table-max-h: calc(var(--_asset-detail-panel-row-h) * var(--_asset-detail-panel-visible-rows));
--_asset-detail-panel-row-line: var(--_asset-detail-surface-divider);
--_asset-detail-panel-title: #18202D;
--_asset-detail-panel-title-size: calc(22px * var(--_asset-detail-scale));
--_asset-detail-panel-title-weight: 810;
--_asset-detail-panel-meta: #8A94A2;
--_asset-detail-panel-meta-size: calc(14px * var(--_asset-detail-scale));
--_asset-detail-row-main-size: calc(16px * var(--_asset-detail-scale));
--_asset-detail-row-sub-size: calc(13px * var(--_asset-detail-scale));
--_asset-detail-row-amount-size: calc(15px * var(--_asset-detail-scale));
--_asset-detail-row-strong: #18202D;
--_asset-detail-row-muted: #8A94A2;
--_asset-detail-row-secondary: #5F6B7A;
--_asset-detail-row-buy: #3F7B54;
--_asset-detail-row-sell: #B76879;
--_asset-detail-row-transfer: #4B6F96;
--_asset-detail-row-neutral: #657180;
--_asset-detail-icon-btn-size: calc(28px * var(--_asset-detail-scale));
--_asset-detail-icon-size: calc(14px * var(--_asset-detail-scale));
--_asset-detail-empty-pad: calc(40px * var(--_asset-detail-scale));
}
#viewAsset,
#viewAsset *{
letter-spacing: 0;
}
#viewAsset{
display: grid;
justify-items: center;
padding-top: calc(25px * var(--_asset-detail-scale));
font-family: var(--_asset-detail-font);
}
#viewAsset.viewHidden{
display: none;
}
#viewAsset .assetDetailFloatingShell{
width: min(100%, var(--_asset-detail-shell-w));
display: grid;
gap: var(--_asset-detail-shell-gap);
padding: var(--_asset-detail-shell-pad-y) var(--_asset-detail-shell-pad-x);
border: 0;
border-radius: var(--_asset-detail-shell-radius);
background: var(--_asset-detail-shell-bg);
box-shadow: var(--_asset-detail-shell-shadow);
color: var(--_asset-detail-title-color);
font-family: var(--_asset-detail-font);
box-sizing: border-box;
}
#viewAsset .assetDetailHeader{
min-height: var(--_asset-detail-header-h);
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(28px * var(--_asset-detail-scale));
min-width: 0;
}
#viewAsset .assetDetailIdentity{
min-width: 0;
display: flex;
align-items: center;
gap: calc(18px * var(--_asset-detail-scale));
}
#viewAsset .assetDetailTokenMark{
width: var(--_asset-detail-token-size);
height: var(--_asset-detail-token-size);
flex: 0 0 var(--_asset-detail-token-size);
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: var(--_asset-detail-token-radius);
background: var(--_asset-detail-token-bg);
color: var(--_asset-detail-token-text);
overflow: hidden;
font-family: var(--_asset-detail-font);
font-size: calc(28px * var(--_asset-detail-scale) * .95);
font-weight: 900;
line-height: 1;
transform: translateY(calc(-8px * var(--_asset-detail-scale)));
}
#viewAsset .assetDetailTokenMark .assetIcon{
width: 100%;
height: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: inherit;
background: transparent;
color: inherit;
box-shadow: none;
overflow: hidden;
font-family: var(--_asset-detail-font);
font-size: calc(22px * var(--_asset-detail-scale) * .95);
font-weight: 900;
line-height: 1;
}
#viewAsset .assetDetailTokenMark .assetIcon img{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: inherit;
}
#viewAsset .assetDetailTitleStack{
min-width: 0;
display: grid;
gap: calc(5px * var(--_asset-detail-scale));
}
#viewAsset .assetDetailTicker{
min-width: 0;
overflow: hidden;
color: var(--_asset-detail-title-color);
font-family: var(--_asset-detail-font);
font-size: var(--_asset-detail-title-size);
font-weight: var(--_asset-detail-title-weight);
line-height: 1.12;
text-overflow: ellipsis;
white-space: nowrap;
}
#viewAsset .assetDetailSubtitle{
min-width: 0;
display: flex;
align-items: center;
gap: calc(5px * var(--_asset-detail-scale));
overflow: hidden;
color: var(--_asset-detail-subtitle-color);
font-size: var(--_asset-detail-subtitle-size);
font-weight: var(--_asset-detail-subtitle-weight);
line-height: 1.2;
white-space: nowrap;
}
#viewAsset .assetDetailSubtitle span{
min-width: 0;
overflow: hidden;
font-family: var(--_asset-detail-font);
font-variant-numeric: normal;
font-feature-settings: normal;
text-overflow: ellipsis;
}
#viewAsset .assetDetailActions{
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--_asset-detail-action-gap);
}
#viewAsset .assetDetailAction{
height: var(--_asset-detail-action-h);
min-height: var(--_asset-detail-action-h);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 calc(20px * var(--_asset-detail-scale));
border-radius: var(--_asset-detail-action-radius);
border: 1px solid transparent;
font-family: var(--_asset-detail-font);
font-size: var(--_asset-detail-action-font);
font-weight: 800;
line-height: 1;
white-space: nowrap;
box-shadow: none;
transform: none;
cursor: pointer;
}
#viewAsset .assetDetailActionSecondary{
width: var(--_asset-detail-action-secondary-w);
background: #FFFFFF;
border-width: .8px;
border-color: #E9ECEF;
color: #4B5563;
font-weight: 570;
}
#viewAsset .assetDetailActionPrimary{
width: var(--_asset-detail-action-primary-w);
background: linear-gradient(180deg, #202938 0%, #111827 100%);
color: #FFFFFF;
font-weight: 850;
box-shadow: none;
}
#viewAsset .assetDetailActionSecondary:hover,
#viewAsset .assetDetailActionSecondary:focus-visible{
background: #F7F8FA;
border-color: #E2E6EC;
color: #364152;
}
#viewAsset .assetDetailActionPrimary:hover,
#viewAsset .assetDetailActionPrimary:focus-visible{
background: linear-gradient(180deg, #293347 0%, #18202D 100%);
color: #FFFFFF;
}
#viewAsset .assetDetailHeroMetrics{
display: flex;
flex-direction: column;
gap: var(--_asset-detail-hero-gap);
padding: var(--_asset-detail-hero-pad-top) var(--_asset-detail-hero-pad-x) var(--_asset-detail-hero-pad-bottom);
border: 1px solid var(--_asset-detail-hero-border);
border-radius: var(--_asset-detail-hero-radius);
background: var(--_asset-detail-hero-bg);
box-shadow: var(--_asset-detail-hero-shadow);
width: 100%;
min-width: 0;
box-sizing: border-box;
}
#viewAsset .assetDetailPrimaryMetrics,
#viewAsset .assetDetailSecondaryMetrics{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
justify-content: space-between;
gap: calc(48px * var(--_asset-detail-scale));
min-width: 0;
}
#viewAsset .assetDetailMetric{
min-width: 0;
display: grid;
align-content: start;
}
#viewAsset .assetDetailMetricPrimary{
gap: var(--_asset-detail-metric-gap);
}
#viewAsset .assetDetailMetricSecondary{
gap: var(--_asset-detail-secondary-gap);
}
#viewAsset .assetDetailMetric .label{
overflow: hidden;
color: var(--_asset-detail-label);
font-family: var(--_asset-detail-font);
font-weight: 648;
line-height: 1.2;
text-transform: uppercase;
text-overflow: ellipsis;
white-space: nowrap;
}
#viewAsset .assetDetailMetricPrimary .label{
font-size: var(--_asset-detail-primary-label-size);
}
#viewAsset .assetDetailMetricSecondary .label{
font-size: var(--_asset-detail-secondary-label-size);
}
#viewAsset .assetDetailMetric .value{
min-width: 0;
overflow: hidden;
color: var(--_asset-detail-value);
font-family: var(--_asset-detail-font);
font-weight: 729;
line-height: 1.08;
text-overflow: ellipsis;
white-space: nowrap;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
#viewAsset .assetDetailMetricPrimary .value{
font-size: var(--_asset-detail-primary-value-size);
}
#viewAsset .assetDetailMetricSecondary .value{
font-size: var(--_asset-detail-secondary-value-size);
}
#viewAsset .assetDetailMetric .sub{
min-width: 0;
overflow: visible;
color: var(--_asset-detail-hint);
font-family: var(--_asset-detail-font);
font-weight: 504;
line-height: 1.25;
white-space: normal;
}
#viewAsset .assetDetailMetricPrimary .sub{
font-size: var(--_asset-detail-primary-hint-size);
}
#viewAsset .assetDetailMetricSecondary .sub{
color: var(--_asset-detail-hint-secondary);
font-size: var(--_asset-detail-secondary-hint-size);
}
#viewAsset .assetDetailMetricDivider{
width: 100%;
height: 1px;
background: var(--_asset-detail-divider);
}
#viewAsset #assetPnl.value,
#viewAsset #assetPnl.value.good,
#viewAsset #assetPnl.value.bad{
display: flex;
align-items: center;
gap: calc(14px * var(--_asset-detail-scale));
overflow: visible;
color: var(--_asset-detail-value);
}
#viewAsset .assetDetailPnlAmount{
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#viewAsset #assetPnl .assetDetailPnlPct{
flex: 0 0 auto;
min-height: calc(34px * var(--_asset-detail-scale));
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 calc(16px * var(--_asset-detail-scale));
border: 1px solid var(--_asset-detail-pnl-good-border);
border-radius: calc(17px * var(--_asset-detail-scale));
background: var(--_asset-detail-pnl-good-bg);
color: var(--_asset-detail-pnl-good-text);
font-size: calc(17px * var(--_asset-detail-scale) * .9025);
font-weight: 729;
line-height: 1;
white-space: nowrap;
}
#viewAsset #assetPnl .assetDetailPnlPct.assetDetailPnlPct--bad{
border-color: var(--_asset-detail-pnl-bad-border);
background: var(--_asset-detail-pnl-bad-bg);
color: var(--_asset-detail-pnl-bad-text);
}
#viewAsset .assetDetailLowerContent{
min-height: var(--_asset-detail-panel-h);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--_asset-detail-panel-gap);
min-width: 0;
}
#viewAsset .assetDetailPanel{
min-width: 0;
min-height: var(--_asset-detail-panel-h);
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: calc(18px * var(--_asset-detail-scale));
padding: var(--_asset-detail-panel-pad-y) var(--_asset-detail-panel-pad-x);
border: 1px solid var(--_asset-detail-panel-border);
border-radius: var(--_asset-detail-panel-radius);
background: var(--_asset-detail-panel-bg);
box-shadow: var(--_asset-detail-panel-shadow);
overflow: hidden;
box-sizing: border-box;
}
#viewAsset .assetDetailPanelHead{
min-height: calc(38px * var(--_asset-detail-scale));
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(16px * var(--_asset-detail-scale));
min-width: 0;
}
#viewAsset .assetDetailPanelTitle{
margin: 0;
min-width: 0;
overflow: hidden;
color: var(--_asset-detail-panel-title);
font-family: var(--_asset-detail-font);
font-size: var(--_asset-detail-panel-title-size);
font-weight: var(--_asset-detail-panel-title-weight);
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
#viewAsset .assetDetailPanelMeta{
flex: 0 0 auto;
color: var(--_asset-detail-panel-meta);
font-family: var(--_asset-detail-font);
font-size: var(--_asset-detail-panel-meta-size);
font-weight: 640;
line-height: 1.2;
white-space: nowrap;
}
#viewAsset .assetDetailTxRows,
#viewAsset .assetDetailPlacesRows,
#viewAsset .assetDetailTxTableScroll,
#viewAsset .assetDetailPlacesTableScroll{
min-width: 0;
overflow: auto;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
#viewAsset .assetDetailTxTableScroll,
#viewAsset .assetDetailPlacesTableScroll{
max-height: var(--_asset-detail-panel-table-max-h);
overflow-y: auto;
overflow-x: hidden;
}
#viewAsset #tblAssetTx,
#viewAsset #tblAssetPlaces{
width: 100%;
min-width: 0;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
background: transparent;
font-family: var(--_asset-detail-font);
}
#viewAsset #tblAssetTx thead,
#viewAsset #tblAssetPlaces thead{
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
#viewAsset #tblAssetTx tbody,
#viewAsset #tblAssetPlaces tbody{
display: grid;
}
#viewAsset #tblAssetTx tr,
#viewAsset #tblAssetPlaces tr{
min-height: var(--_asset-detail-panel-row-h);
display: grid;
align-items: center;
border-bottom: 1px solid var(--_asset-detail-panel-row-line);
cursor: pointer;
}
#viewAsset #tblAssetTx tr:last-child,
#viewAsset #tblAssetPlaces tr:last-child{
border-bottom-color: transparent;
}
#viewAsset #tblAssetTx tr{
grid-template-columns: minmax(0, 1fr) max-content max-content;
gap: calc(16px * var(--_asset-detail-scale));
}
#viewAsset #tblAssetPlaces tr{
grid-template-columns: minmax(0, 1fr) max-content;
gap: calc(18px * var(--_asset-detail-scale));
}
#viewAsset #tblAssetTx td,
#viewAsset #tblAssetPlaces td{
min-width: 0;
padding: 0;
border: 0;
background: transparent;
color: var(--_asset-detail-row-strong);
font-family: var(--_asset-detail-font);
line-height: 1.22;
vertical-align: middle;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
#viewAsset #tblAssetTx td.right,
#viewAsset #tblAssetPlaces td.right{
text-align: right;
}
#viewAsset #tblAssetTx tr:hover td,
#viewAsset #tblAssetPlaces tr:hover td{
color: var(--_asset-detail-row-strong);
}
#viewAsset #tblAssetTx .assetTxCompactCopy{
display: grid;
gap: calc(5px * var(--_asset-detail-scale));
justify-items: start;
}
#viewAsset #tblAssetTx .assetTxCompactType{
max-width: 100%;
overflow: hidden;
color: var(--_asset-detail-row-neutral);
font-size: calc(15px * var(--_asset-detail-scale));
font-weight: 612;
text-overflow: ellipsis;
white-space: nowrap;
}
#viewAsset #tblAssetTx .assetTxCompactType--buy{ color: var(--_asset-detail-row-buy); }
#viewAsset #tblAssetTx .assetTxCompactType--sell{ color: var(--_asset-detail-row-sell); }
#viewAsset #tblAssetTx .assetTxCompactType--transfer{ color: var(--_asset-detail-row-transfer); }
#viewAsset #tblAssetTx .assetTxCompactPlace{
max-width: 100%;
display: inline-flex;
align-items: center;
gap: calc(4px * var(--_asset-detail-scale));
overflow: hidden;
color: var(--_asset-detail-row-muted);
font-size: var(--_asset-detail-row-sub-size);
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
#viewAsset #tblAssetTx .assetTxCompactPlaceType{
flex: 0 0 auto;
color: var(--_asset-detail-row-muted);
font-weight: 595;
line-height: 1.18;
}
#viewAsset #tblAssetTx .assetTxCompactPlaceName{
min-width: 0;
overflow: hidden;
color: #616B78;
font-weight: 700;
line-height: 1.18;
text-overflow: ellipsis;
white-space: nowrap;
}
#viewAsset #tblAssetTx [data-open-place].assetTxCompactPlace{
cursor: pointer;
}
#viewAsset #tblAssetTx .assetTxCompactAmount{
white-space: nowrap;
}
#viewAsset #tblAssetPlaces .assetPlacesPlaceCell{
display: flex;
align-items: center;
gap: 0;
min-width: 0;
}
#viewAsset #tblAssetPlaces .assetPlacesPlaceIcon{
position: relative;
width: calc(30px * var(--_asset-detail-scale));
height: calc(30px * var(--_asset-detail-scale));
flex: 0 0 calc(30px * var(--_asset-detail-scale));
display: none;
align-items: center;
justify-content: center;
border-radius: 999px;
overflow: hidden;
background: #F4F5F4;
box-shadow: none;
color: #5E6A7D;
font-size: calc(10px * var(--_asset-detail-scale));
font-weight: 900;
line-height: 1;
}
#viewAsset #tblAssetPlaces .assetPlacesPlaceIcon img,
#viewAsset #tblAssetPlaces .assetPlacesPlaceIcon svg{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: inherit;
}
#viewAsset #tblAssetPlaces .assetPlacesPlaceIcon-exchange img{
transform: scale(1.2);
}
#viewAsset #tblAssetPlaces .assetPlacesPlaceIcon[data-provider]{
background: transparent;
}
#viewAsset #tblAssetPlaces .assetPlacesPlaceIcon-exchange[data-provider] img{
object-fit: contain;
transform: none;
}
#viewAsset #tblAssetPlaces .assetPlacesPlaceIcon img + .assetPlacesPlaceIconFallback{
display: none;
}
#viewAsset #tblAssetPlaces .assetPlacesPlaceIconFallback{
position: absolute;
inset: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
#viewAsset #tblAssetPlaces .assetPlacesPlaceIcon-exchange .assetPlacesPlaceIconFallback{
background: linear-gradient(180deg, #EEF5FF 0%, #DDEAFF 100%);
color: #41658F;
}
#viewAsset #tblAssetPlaces .assetPlacesPlaceIcon-wallet .assetPlacesPlaceIconFallback{
background: linear-gradient(180deg, #EEF8F3 0%, #DDF0E7 100%);
color: #3E765B;
}
#viewAsset #tblAssetPlaces .assetPlacesPlaceIcon-unknown .assetPlacesPlaceIconFallback,
#viewAsset #tblAssetPlaces .assetPlacesPlaceIcon-other .assetPlacesPlaceIconFallback{
background: linear-gradient(180deg, #F3F3F2 0%, #E6E6E3 100%);
color: #5E6A7D;
}
#viewAsset #tblAssetPlaces .assetPlacesPlaceText{
display: grid;
gap: calc(5px * var(--_asset-detail-scale));
min-width: 0;
}
#viewAsset #tblAssetPlaces .assetPlacesPlaceName,
#viewAsset #tblAssetPlaces .assetPlacesPlaceType{
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#viewAsset #tblAssetPlaces .assetPlacesPlaceName{
color: var(--_asset-detail-row-strong);
font-size: var(--_asset-detail-row-main-size);
font-weight: 810;
}
#viewAsset #tblAssetPlaces .assetPlacesPlaceType{
color: var(--_asset-detail-row-muted);
font-size: var(--_asset-detail-row-sub-size);
font-weight: 595;
}
#viewAsset #tblAssetTx .assetPlacesAmountCell,
#viewAsset #tblAssetPlaces .assetPlacesAmountCell{
display: grid;
align-content: center;
justify-items: end;
gap: calc(5px * var(--_asset-detail-scale));
white-space: nowrap;
}
#viewAsset #tblAssetTx .assetPlacesTokenAmount,
#viewAsset #tblAssetPlaces .assetPlacesTokenAmount{
color: var(--_asset-detail-row-strong);
font-size: var(--_asset-detail-row-amount-size);
font-weight: 675;
line-height: 1.18;
}
#viewAsset #tblAssetTx .assetPlacesFiatAmount,
#viewAsset #tblAssetPlaces .assetPlacesFiatAmount{
color: var(--_asset-detail-row-muted);
font-size: var(--_asset-detail-row-sub-size);
font-weight: 560;
line-height: 1.18;
}
#viewAsset #tblAssetPlaces .assetPlacesAmountCell.bad .assetPlacesTokenAmount{
color: var(--_asset-detail-row-sell);
}
#viewAsset #tblAssetTx .taxProofChip,
#viewAsset #tblAssetPlaces .taxProofChip{
min-height: calc(20px * var(--_asset-detail-scale));
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
padding: 0 calc(8px * var(--_asset-detail-scale));
border: 1px solid var(--_asset-detail-pnl-bad-border);
border-radius: 999px;
background: var(--_asset-detail-pnl-bad-bg);
color: var(--_asset-detail-pnl-bad-text);
font-size: calc(9px * var(--_asset-detail-scale));
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
box-shadow: none;
}
#viewAsset #tblAssetTx .txActionsCell{
display: flex;
align-items: center;
justify-content: flex-end;
gap: calc(6px * var(--_asset-detail-scale));
white-space: nowrap;
}
#viewAsset #tblAssetTx .txIconBtn{
width: var(--_asset-detail-icon-btn-size);
height: var(--_asset-detail-icon-btn-size);
min-width: var(--_asset-detail-icon-btn-size);
min-height: var(--_asset-detail-icon-btn-size);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid transparent;
border-radius: calc(10px * var(--_asset-detail-scale));
background: transparent;
color: #798190;
box-shadow: none;
opacity: .72;
transform: none;
transition: opacity .16s ease, color .16s ease, background-color .16s ease, border-color .16s ease;
}
#viewAsset #tblAssetTx .txIconBtn svg{
width: var(--_asset-detail-icon-size);
height: var(--_asset-detail-icon-size);
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
#viewAsset #tblAssetTx .txIconBtn:hover,
#viewAsset #tblAssetTx .txIconBtn:focus-visible{
opacity: 1;
border-color: rgba(226,230,236,.92);
background: rgba(249,250,251,.98);
color: #3B475A;
}
#viewAsset #tblAssetTx .txIconBtn.danger:hover,
#viewAsset #tblAssetTx .txIconBtn.danger:focus-visible{
border-color: rgba(240,217,217,.96);
background: rgba(253,245,245,.98);
color: #B95A5A;
}
#viewAsset .assetTxEmptyState{
padding: var(--_asset-detail-empty-pad);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: calc(12px * var(--_asset-detail-scale));
border: 1px solid var(--_asset-detail-panel-row-line);
border-radius: calc(18px * var(--_asset-detail-scale));
background: linear-gradient(180deg, #FBFCFD 0%, #F7F8FA 100%);
text-align: center;
}
#viewAsset .assetTxEmptyTitle{
color: var(--_asset-detail-panel-title);
font-size: calc(16px * var(--_asset-detail-scale));
font-weight: 800;
line-height: 1.25;
}
#viewAsset .assetTxEmptyText,
#viewAsset .assetDetailHint{
color: var(--_asset-detail-row-muted);
font-size: calc(13px * var(--_asset-detail-scale));
font-weight: 600;
line-height: 1.35;
}
#viewAsset .assetDetailHint{
margin-top: 0;
}
@media (max-width: 980px){
#viewAsset .assetDetailFloatingShell{
--_asset-detail-scale: .74;
}
#viewAsset .assetDetailHeroMetrics{
padding: 22px 18px;
}
#viewAsset .assetDetailHeader{
align-items: flex-start;
flex-direction: column;
}
#viewAsset .assetDetailActions{
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
}
#viewAsset .assetDetailLowerContent{
grid-template-columns: 1fr;
}
}
@media (max-width: 720px){
#viewAsset{
padding-top: 10px;
}
#viewAsset .assetDetailFloatingShell{
--_asset-detail-scale: .68;
padding: 22px 18px;
border-radius: 28px;
}
#viewAsset .assetDetailIdentity{
width: 100%;
}
#viewAsset .assetDetailSubtitle{
flex-wrap: wrap;
white-space: normal;
}
#viewAsset .assetDetailAction{
width: auto;
flex: 1 1 140px;
}
#viewAsset .assetDetailPrimaryMetrics,
#viewAsset .assetDetailSecondaryMetrics{
grid-template-columns: 1fr;
gap: 18px;
}
#viewAsset .assetDetailHeroMetrics,
#viewAsset .assetDetailPanel{
min-height: auto;
}
#viewAsset #tblAssetTx tr,
#viewAsset #tblAssetPlaces tr{
grid-template-columns: 1fr;
align-items: start;
gap: 8px;
padding: 12px 0;
}
#viewAsset #tblAssetTx td.right,
#viewAsset #tblAssetPlaces td.right,
#viewAsset #tblAssetTx .txActionsCell{
text-align: left;
justify-content: flex-start;
}
}
#viewPlace{
--_place-lk-scale: .8;
--_place-lk-hero-unit: var(--_place-lk-scale);
--_place-lk-font: "Inter", var(--ct-font-sans);
--_place-lk-shell-max-width: calc(1456px * var(--_place-lk-scale));
--_place-lk-shell-radius: calc(48px * var(--_place-lk-scale));
--_place-lk-shell-pad-y: calc(44px * var(--_place-lk-scale));
--_place-lk-shell-pad-x: calc(54px * var(--_place-lk-scale));
--_place-lk-shell-gap: calc(28px * var(--_place-lk-scale));
--_place-lk-shell-bg: rgba(255, 255, 255, .75);
--_place-lk-shell-shadow: none;
--_place-lk-surface-bg: rgba(255, 255, 255, .48);
--_place-lk-surface-border: #E5EAF1;
--_place-lk-surface-divider: #E2E8EF;
--_place-lk-surface-shadow: 0 8px 20px rgba(38, 48, 65, .026), 0 1px 0 rgba(255,255,255,.72) inset;
--_place-lk-page-top-gap: calc(25px * var(--_place-lk-scale));
--_place-lk-top-gap: var(--_place-lk-shell-gap);
--_place-lk-header-pad-x: 0;
--_place-lk-header-gap: calc(24px * var(--_place-lk-hero-unit));
--_place-lk-identity-gap: calc(16px * var(--_place-lk-hero-unit));
--_place-lk-avatar-size: calc(62px * var(--_place-lk-hero-unit));
--_place-lk-avatar-stroke: calc(1px * var(--_place-lk-hero-unit));
--_place-lk-avatar-font-size: calc(20px * var(--_place-lk-hero-unit));
--_place-lk-title-gap: calc(5px * var(--_place-lk-hero-unit));
--_place-lk-title-size: calc(44px * var(--_place-lk-hero-unit) * .95);
--_place-lk-title-color: #111827;
--_place-lk-title-weight: 810;
--_place-lk-sub-size: calc(15px * var(--_place-lk-hero-unit));
--_place-lk-sub-color: #7A8594;
--_place-lk-action-gap: calc(10px * var(--_place-lk-hero-unit));
--_place-lk-action-height: calc(50px * var(--_place-lk-hero-unit));
--_place-lk-action-radius: calc(16px * var(--_place-lk-hero-unit));
--_place-lk-action-font-size: calc(15px * var(--_place-lk-hero-unit));
--_place-lk-premium-radius: calc(30px * var(--_place-lk-scale));
--_place-lk-premium-gap: calc(34px * var(--_place-lk-scale));
--_place-lk-premium-pad-y: calc(36px * var(--_place-lk-scale));
--_place-lk-premium-pad-x: calc(38px * var(--_place-lk-scale));
--_place-lk-premium-bg: var(--_place-lk-surface-bg);
--_place-lk-premium-border: var(--_place-lk-surface-border);
--_place-lk-premium-shadow: 0 7px 17px rgba(38, 48, 65, .026), 0 1px 0 rgba(255,255,255,.72) inset;
--_place-lk-meta-row-gap: calc(96px * var(--_place-lk-scale));
--_place-lk-meta-row-pad-y: calc(13px * var(--_place-lk-scale));
--_place-lk-meta-row-pad-x: 0;
--_place-lk-meta-cell-radius: calc(22px * var(--_place-lk-scale));
--_place-lk-meta-cell-gap: calc(14px * var(--_place-lk-scale));
--_place-lk-meta-cell-pad-y: 0;
--_place-lk-meta-cell-pad-x: calc(18px * var(--_place-lk-scale));
--_place-lk-meta-cell-border: transparent;
--_place-lk-meta-icon-size: calc(40px * var(--_place-lk-scale));
--_place-lk-meta-icon-radius: calc(14px * var(--_place-lk-scale));
--_place-lk-meta-icon-symbol: calc(21px * var(--_place-lk-scale));
--_place-lk-meta-label-size: calc(12px * var(--_place-lk-scale));
--_place-lk-meta-label-color: #99A4B4;
--_place-lk-meta-value-size: calc(24px * var(--_place-lk-scale));
--_place-lk-meta-value-color: #18202D;
--_place-lk-settings-width: calc(128px * var(--_place-lk-scale));
--_place-lk-settings-height: var(--_place-lk-action-height);
--_place-lk-settings-radius: var(--_place-lk-action-radius);
--_place-lk-settings-pad-x: calc(18px * var(--_place-lk-scale));
--_place-lk-settings-font-size: var(--_place-lk-action-font-size);
--_place-lk-stats-gap: calc(70px * var(--_place-lk-scale));
--_place-lk-stats-pad-top: 0;
--_place-lk-stats-pad-x: 0;
--_place-lk-stats-pad-bottom: 0;
--_place-lk-stat-gap: calc(12px * var(--_place-lk-scale));
--_place-lk-stat-edge-shift: 0px;
--_place-lk-stat-label-size: calc(14px * var(--_place-lk-scale) * .95);
--_place-lk-stat-main-label-size: calc(14px * var(--_place-lk-scale) * .95);
--_place-lk-stat-value-size: calc(58px * var(--_place-lk-scale) * .9025);
--_place-lk-stat-small-value-size: calc(58px * var(--_place-lk-scale) * .9025);
--_place-lk-stat-sub-size: calc(15px * var(--_place-lk-scale) * .95);
--_place-lk-stat-main-sub-size: calc(15px * var(--_place-lk-scale) * .95);
--_place-lk-control-radius: calc(13px * var(--_place-lk-scale));
--_place-lk-control-font-size: calc(14px * var(--_place-lk-scale));
--_place-lk-editor-pad-x: calc(16px * var(--_place-lk-scale));
--_place-settings-grid-gap: calc(24px * var(--_place-lk-scale));
--_place-settings-left-w: calc(820px * var(--_place-lk-scale));
--_place-settings-right-w: calc(504px * var(--_place-lk-scale));
--_place-settings-panel-radius: calc(30px * var(--_place-lk-scale));
--_place-settings-panel-pad-x: calc(32px * var(--_place-lk-scale));
--_place-settings-panel-pad-y: calc(30px * var(--_place-lk-scale));
--_place-settings-title-size: calc(22px * var(--_place-lk-scale));
--_place-settings-sub-size: calc(14px * var(--_place-lk-scale));
--_place-settings-value-size: calc(20px * var(--_place-lk-scale));
--_place-settings-status-size: calc(19px * var(--_place-lk-scale));
--_place-settings-connection-size: calc(26px * var(--_place-lk-scale));
--_place-settings-field-h: calc(86px * var(--_place-lk-scale));
--_place-settings-select-h: calc(92px * var(--_place-lk-scale));
--_place-settings-field-radius: calc(22px * var(--_place-lk-scale));
--_place-settings-button-h: calc(54px * var(--_place-lk-scale));
--_place-settings-button-radius: calc(16px * var(--_place-lk-scale));
--_place-settings-border: #EBEFF4;
--_place-settings-field-border: #E8EDF3;
--_place-settings-muted: #8A94A2;
--_place-settings-strong: #18202D;
--_place-settings-green: #4E7B5A;
--_place-settings-danger: #B76575;
}
#viewPlace > .placeDetailPageCard{
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
#viewPlace > .placeDetailPageCard > .placeDetailPageInner{
padding: var(--_place-lk-page-top-gap) 0 0;
display: flex;
flex-direction: column;
gap: 0;
}
#viewPlace .placeLkTop{
display: flex;
flex-direction: column;
gap: var(--_place-lk-top-gap);
width: 100%;
min-width: 0;
}
#viewPlace .placeDetailFloatingShell{
width: min(100%, var(--_place-lk-shell-max-width));
margin: 0 auto 34px;
padding: var(--_place-lk-shell-pad-y) var(--_place-lk-shell-pad-x);
border: 0;
border-radius: var(--_place-lk-shell-radius);
background: var(--_place-lk-shell-bg);
box-shadow: var(--_place-lk-shell-shadow);
overflow: visible;
}
#viewPlace .placeLkFloatingHeader{
min-height: calc(96px * var(--_place-lk-scale));
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--_place-lk-header-gap);
padding: 0 var(--_place-lk-header-pad-x);
width: 100%;
min-width: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
#viewPlace .placeLkIdentity{
display: flex;
align-items: center;
gap: var(--_place-lk-identity-gap);
min-width: 0;
flex: 1 1 auto;
}
#viewPlace .placeLkAvatar{
width: var(--_place-lk-avatar-size);
height: var(--_place-lk-avatar-size);
flex: 0 0 var(--_place-lk-avatar-size);
border-radius: 50%;
border: 0;
background: transparent;
box-shadow: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
#viewPlace .placeLkAvatarInner{
position: relative;
width: 100%;
height: 100%;
border-radius: inherit;
border: var(--_place-lk-avatar-stroke) solid #DCE2EA;
background: linear-gradient(180deg, #F7F8FA 0%, #EEF1F5 100%);
box-shadow: inset 0 var(--_place-lk-avatar-stroke) 0 rgba(255,255,255,.82);
color: #4F5A68;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
}
#viewPlace .placeLkAvatarImg{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: inherit;
}
#viewPlace .placeLkAvatar[data-provider] .placeLkAvatarInner{
border: 0;
background: transparent;
box-shadow: none;
}
#viewPlace .placeLkAvatar[data-provider] .placeLkAvatarImg{
object-fit: contain;
transform: none;
}
#viewPlace .placeLkAvatar[data-kind="exchange"] .placeLkAvatarImg{
transform: scale(1.08);
}
#viewPlace .placeLkAvatar[data-kind="exchange"][data-provider] .placeLkAvatarImg{
transform: none;
}
#viewPlace .placeLkAvatarFallback{
position: absolute;
inset: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: #536278;
font-family: var(--_place-lk-font);
font-size: var(--_place-lk-avatar-font-size);
font-weight: 900;
letter-spacing: 0;
line-height: 1;
}
#viewPlace .placeLkTitleCol{
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--_place-lk-title-gap);
min-width: 0;
}
#viewPlace .placeLkTitleRow{
display: inline-flex;
align-items: center;
gap: calc(10px * var(--_place-lk-scale));
min-width: 0;
}
#viewPlace .placeLkTitle{
font-family: var(--_place-lk-font);
font-size: var(--_place-lk-title-size);
font-weight: var(--_place-lk-title-weight);
letter-spacing: 0;
line-height: 1.12;
color: var(--_place-lk-title-color);
min-width: 0;
overflow-wrap: anywhere;
}
#viewPlace .placeLkSub{
display: block;
color: var(--_place-lk-sub-color);
font-family: var(--_place-lk-font);
font-size: var(--_place-lk-sub-size);
font-weight: 490;
line-height: 1.2;
letter-spacing: 0;
}
#viewPlace .placeLkActions{
display: flex;
align-items: center;
gap: var(--_place-lk-action-gap);
flex-wrap: wrap;
justify-content: flex-end;
flex: 0 0 auto;
}
#viewPlace #btnBackPlace{
appearance: none;
width: calc(126px * var(--_place-lk-scale));
height: calc(50px * var(--_place-lk-scale));
min-height: calc(50px * var(--_place-lk-scale));
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 calc(20px * var(--_place-lk-scale));
border-radius: calc(18px * var(--_place-lk-scale));
border: 1px solid transparent;
border-width: .8px;
border-color: #E9ECEF;
background: #FFFFFF;
color: #4B5563;
font-family: var(--_place-lk-font);
font-size: calc(15px * var(--_place-lk-scale));
font-weight: 570;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transform: none;
box-shadow: none;
}
#viewPlace #btnBackPlace:hover,
#viewPlace #btnBackPlace:focus-visible{
background: #F7F8FA;
border-color: #E2E6EC;
color: #364152;
}
#viewPlace .placeDetailFloatingShell:has(.placeLkPremiumShell.is-place-settings-editing) #btnBackPlace{
display: none;
}
#viewPlace .placeLkPremiumShell{
border: 1px solid var(--_place-lk-premium-border);
border-radius: var(--_place-lk-premium-radius);
background: var(--_place-lk-premium-bg);
box-shadow: var(--_place-lk-premium-shadow);
padding: var(--_place-lk-premium-pad-y) var(--_place-lk-premium-pad-x);
display: flex;
flex-direction: column;
gap: var(--_place-lk-premium-gap);
width: 100%;
min-width: 0;
}
#viewPlace .placeLkHeroDivider{
width: 100%;
height: 1px;
background: var(--_place-lk-surface-divider);
}
#viewPlace .placeLkMetaSummary{
width: 100%;
min-width: 0;
}
#viewPlace .placeLkMetaRow{
display: grid;
grid-template-columns: minmax(0, 345fr) minmax(0, 345fr) minmax(0, 390fr);
align-items: center;
gap: var(--_place-lk-meta-row-gap);
padding: var(--_place-lk-meta-row-pad-y) var(--_place-lk-meta-row-pad-x);
width: 100%;
min-width: 0;
border: 1px solid rgba(255,255,255,0);
background: rgba(255,255,255,0);
}
#viewPlace .placeLkMetaCell{
display: flex;
align-items: center;
gap: var(--_place-lk-meta-cell-gap);
flex: 1 1 0;
min-width: 0;
border: 1px solid var(--_place-lk-meta-cell-border);
border-radius: var(--_place-lk-meta-cell-radius);
background: #F8FAFC;
padding: var(--_place-lk-meta-cell-pad-y) var(--_place-lk-meta-cell-pad-x);
min-height: calc(82px * var(--_place-lk-scale));
}
#viewPlace .placeLkMetaIcon{
width: var(--_place-lk-meta-icon-size);
height: var(--_place-lk-meta-icon-size);
flex: 0 0 var(--_place-lk-meta-icon-size);
border-radius: var(--_place-lk-meta-icon-radius);
border: 0;
background: #EEF1F5;
color: #7A8594;
display: inline-flex;
align-items: center;
justify-content: center;
}
#viewPlace .placeLkMetaIcon svg{
width: var(--_place-lk-meta-icon-symbol);
height: var(--_place-lk-meta-icon-symbol);
display: block;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
#viewPlace .placeLkMetaCellConnection.is-connected-status{
border-color: #DDEBE2;
background: #F6FAF7;
}
#viewPlace .placeLkMetaCellConnection.is-connected-status .placeLkMetaIcon{
background: #EAF4ED;
color: #4F855E;
}
#viewPlace .placeLkMetaCellConnection.is-connected-status .placeLkMetaText .small{
color: #7A9A82;
}
#viewPlace .placeLkMetaText,
#viewPlace .placeLkMetaConnectionInfo{
display: flex;
flex-direction: column;
gap: calc(5px * var(--_place-lk-scale));
min-width: 0;
}
#viewPlace .placeLkMetaText .small,
#viewPlace .placeLkMetaField .small,
#viewPlace .placeSettingsStatusCard .small,
#viewPlace .placeLkMetaConnectionInfo .small{
margin-bottom: calc(1px * var(--_place-lk-scale));
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_place-lk-meta-label-size);
color: var(--_place-lk-meta-label-color);
line-height: 1.2;
font-weight: 900;
letter-spacing: calc(1.1px * var(--_place-lk-scale));
}
#viewPlace .placeSettingsEditPanel .placeLkMetaField .small,
#viewPlace .placeSettingsConnectionBlock .placeLkMetaConnectionInfo .small,
#viewPlace .placeSettingsStatusCard .small{
font-size: calc(var(--_place-lk-meta-label-size) * 1.15);
font-weight: 608;
}
#viewPlace #placeMetaSummary .placeLkMetaText .small{
font-size: calc(var(--_place-lk-meta-label-size) * 1.1025);
font-weight: 675;
}
#viewPlace #placeMetaSummary .placeLkMetaCell:not(.placeLkMetaCellConnection) .placeLkMetaText .small{
color: #929EAF;
}
#viewPlace .placeLkMetaValue,
#viewPlace .placeLkMetaConnectionStatus{
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_place-lk-meta-value-size);
font-weight: 900;
line-height: 1.15;
color: var(--_place-lk-meta-value-color);
min-width: 0;
overflow-wrap: anywhere;
}
#viewPlace #placeMetaSummary .placeLkMetaKindValueSoft{
font-weight: 765;
}
#viewPlace #placeMetaBlockchainValue{
font-weight: 765;
}
#viewPlace #placeMetaSummary .placeLkMetaProviderValueSoft{
font-weight: 765;
}
#viewPlace #placeMetaSummary .placeLkMetaProviderValuePlain{
font-size: calc(var(--_place-lk-meta-value-size) * .92);
font-weight: 400;
line-height: 1.15;
}
#viewPlace .placeLkMetaLink{
appearance: none;
border: 0;
background: transparent;
padding: 0;
margin: 0;
width: auto;
min-width: 0;
min-height: 0;
display: inline-flex;
align-items: center;
justify-content: flex-start;
font: inherit;
color: inherit;
text-align: left;
box-shadow: none;
cursor: default;
text-decoration: none;
}
#viewPlace .placeLkMetaLink[disabled]{
opacity: 1;
pointer-events: none;
}
#viewPlace .placeLkMetaLink.is-actionable{
cursor: pointer;
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: rgba(71, 85, 105, .32);
text-underline-offset: calc(2px * var(--_place-lk-scale));
transition: color .18s ease, text-decoration-color .18s ease;
}
#viewPlace .placeLkMetaLink.is-actionable:hover,
#viewPlace .placeLkMetaLink.is-actionable:focus-visible{
color: #24324A;
text-decoration-color: currentColor;
outline: none;
}
#viewPlace #placeMetaSummaryConnectionValue:not(.is-connected-status){
color: #162033;
}
#viewPlace #placeMetaSummaryConnectionValue.placeLkMetaConnectionProviderMissing{
font-size: calc(var(--_place-lk-meta-value-size) * .92);
font-weight: 400;
line-height: 1.15;
}
#viewPlace .placeLkMetaLink.is-connected-status{
align-items: center;
gap: calc(7px * var(--_place-lk-scale));
color: #4F8065;
font-weight: 765;
text-decoration: none;
}
#viewPlace #placeMetaSummary.placeLkMetaSummaryAllConnected .placeLkMetaKindValueSoft,
#viewPlace #placeMetaSummary.placeLkMetaSummaryAllConnected .placeLkMetaProviderValueSoft,
#viewPlace #placeMetaSummary.placeLkMetaSummaryAllConnected .placeLkMetaLink.is-connected-status{
font-weight: 712;
}
#viewPlace .placeLkMetaLink.is-connected-status::before{
content: "✓";
width: auto;
height: auto;
flex: 0 0 auto;
border-radius: 0;
background: transparent;
color: #4F8065;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: calc(16px * var(--_place-lk-scale));
font-weight: 800;
line-height: 1;
}
#viewPlace .placeLkMetaConnectionStatus{
color: #344155;
white-space: nowrap;
}
#viewPlace .placeLkMetaConnectionStatus.is-connected-status{
display: inline-flex;
align-items: center;
gap: calc(7px * var(--_place-lk-scale));
color: #4F8065;
font-size: calc(var(--_place-lk-meta-value-size) * 1.05);
font-weight: 765;
}
#viewPlace .placeLkMetaConnectionStatus.is-connected-status::before{
content: "✓";
width: calc(16px * var(--_place-lk-scale));
height: calc(16px * var(--_place-lk-scale));
flex: 0 0 calc(16px * var(--_place-lk-scale));
border-radius: 999px;
background: rgba(93, 138, 115, .12);
color: #5D8A73;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: calc(11px * var(--_place-lk-scale));
font-weight: 800;
line-height: 1;
}
#viewPlace #btnPlaceMetaEdit{
appearance: none;
flex: 0 0 var(--_place-lk-settings-width);
width: var(--_place-lk-settings-width);
position: static;
min-height: var(--_place-lk-settings-height);
height: var(--_place-lk-settings-height);
padding: 0 var(--_place-lk-settings-pad-x);
border-radius: var(--_place-lk-settings-radius);
border: 1px solid #CDD4E0;
background: #FFFFFF;
color: #4B5563;
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_place-lk-settings-font-size);
font-weight: 800;
line-height: 1.1;
box-shadow: 0 calc(10px * var(--_place-lk-scale)) calc(22px * var(--_place-lk-scale)) rgba(38, 48, 65, .06);
white-space: nowrap;
cursor: pointer;
}
#viewPlace #btnPlaceMetaEdit:hover,
#viewPlace #btnPlaceMetaEdit:focus-visible{
background: #FFFFFF;
border-color: #B8C2CF;
color: #2E3A4B;
outline: none;
box-shadow: 0 calc(12px * var(--_place-lk-scale)) calc(24px * var(--_place-lk-scale)) rgba(38, 48, 65, .08);
}
#viewPlace #btnPlaceMetaCancel,
#viewPlace #btnPlaceMetaSave{
font-family: "Inter", var(--ct-font-sans);
font-size: calc(15px * var(--_place-lk-scale));
line-height: 1.1;
white-space: nowrap;
min-height: var(--_place-settings-button-h);
height: var(--_place-settings-button-h);
border-radius: var(--_place-settings-button-radius);
cursor: pointer;
box-shadow: none;
}
#viewPlace #btnPlaceMetaCancel{
width: calc(130px * var(--_place-lk-scale));
border: 1px solid #DDE3EB;
background: #FFFFFF;
color: #5F6B7A;
font-weight: 700;
padding: 0 calc(20px * var(--_place-lk-scale));
}
#viewPlace #btnPlaceMetaSave{
width: calc(150px * var(--_place-lk-scale));
border: 1px solid var(--_place-settings-strong);
background: var(--_place-settings-strong);
color: #FFFFFF;
font-weight: 850;
padding: 0 calc(22px * var(--_place-lk-scale));
}
#viewPlace #btnPlaceMetaSave:disabled{
opacity: .56;
cursor: default;
}
#viewPlace .placeLkMetaEditor{
margin: 0;
display: block;
padding: 0;
width: 100%;
min-width: 0;
font-family: "Inter", var(--ct-font-sans);
}
#viewPlace .placeLkPremiumShell.is-place-settings-editing{
border: 0;
background: transparent;
box-shadow: none;
padding: 0;
}
#viewPlace .placeLkPremiumShell.is-place-settings-editing .placeLkStatsRow,
#viewPlace .placeLkPremiumShell.is-place-settings-editing .placeLkHeroDivider,
#viewPlace .placeLkPremiumShell.is-place-settings-editing .placeLkMetaSummary{
display: none;
}
#viewPlace .placeLkMetaEditorSurface{
display: grid;
grid-template-columns: minmax(0, var(--_place-settings-left-w)) minmax(0, var(--_place-settings-right-w));
gap: var(--_place-settings-grid-gap);
align-items: stretch;
min-width: 0;
}
#viewPlace .placeSettingsPanel{
display: flex;
flex-direction: column;
min-height: calc(460px * var(--_place-lk-scale));
min-width: 0;
border: 1px solid var(--_place-settings-border);
border-radius: var(--_place-settings-panel-radius);
background: #FFFFFF;
padding: var(--_place-settings-panel-pad-y) var(--_place-settings-panel-pad-x);
box-shadow: none;
}
#viewPlace .placeSettingsEditPanel{
gap: calc(24px * var(--_place-lk-scale));
}
#viewPlace .placeSettingsSavePanel{
gap: calc(24px * var(--_place-lk-scale));
}
#viewPlace .placeSettingsPanelIntro{
display: flex;
flex-direction: column;
gap: calc(10px * var(--_place-lk-scale));
min-width: 0;
}
#viewPlace .placeLkMetaEditorHeading,
#viewPlace .placeSettingsSaveHeading{
font-size: var(--_place-settings-title-size);
font-weight: 900;
color: var(--_place-settings-strong);
line-height: 1.15;
letter-spacing: 0;
}
#viewPlace .placeSettingsPanelSub{
color: var(--_place-settings-muted);
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_place-settings-sub-size);
font-weight: 490;
line-height: 1.2;
letter-spacing: 0;
}
#viewPlace .placeSettingsFormStack{
display: flex;
flex-direction: column;
gap: calc(24px * var(--_place-lk-scale));
min-width: 0;
}
#viewPlace .placeMetaControls{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: calc(16px * var(--_place-lk-scale));
align-items: stretch;
padding: 0;
min-width: 0;
}
#viewPlace .placeLkMetaField{
display: flex;
flex-direction: column;
justify-content: center;
gap: calc(9px * var(--_place-lk-scale));
min-width: 0;
border: 1px solid var(--_place-settings-field-border);
border-radius: var(--_place-settings-field-radius);
background: #FAFBFC;
padding: calc(20px * var(--_place-lk-scale)) calc(18px * var(--_place-lk-scale));
box-shadow: none;
}
#viewPlace #placeTypeField{
min-height: var(--_place-settings-select-h);
}
#viewPlace #placeProviderField{
min-height: var(--_place-settings-select-h);
}
#viewPlace #placeNameField{
min-height: var(--_place-settings-field-h);
}
#viewPlace .placeLkNameInputWrap{
display: flex;
align-items: center;
width: 100%;
min-width: 0;
}
#viewPlace .placeSettingsDivider,
#viewPlace .placeSettingsSaveDivider{
width: 100%;
height: 1px;
background: #EEF1F5;
flex: 0 0 auto;
}
#viewPlace .placeLkMetaConnectionCard{
width: 100%;
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
column-gap: calc(16px * var(--_place-lk-scale));
row-gap: calc(8px * var(--_place-lk-scale));
border: 0;
border-radius: 0;
background: transparent;
padding: 0;
box-shadow: none;
}
#viewPlace .placeLkMetaConnectionCard .placeLkMetaConnectionInfo{
display: flex;
flex-direction: column;
gap: calc(8px * var(--_place-lk-scale));
min-width: 0;
}
#viewPlace .placeLkMetaWalletCta{
display: flex;
align-items: center;
justify-content: flex-start;
gap: calc(10px * var(--_place-lk-scale));
min-width: 0;
}
#viewPlace .placeLkDangerZone{
width: 100%;
min-width: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(18px * var(--_place-lk-scale));
}
#viewPlace .placeSettingsDangerText{
display: flex;
flex-direction: column;
gap: calc(5px * var(--_place-lk-scale));
min-width: 0;
}
#viewPlace .placeSettingsDangerTitle{
color: var(--_place-settings-strong);
font-family: "Inter", var(--ct-font-sans);
font-size: calc(15px * var(--_place-lk-scale));
font-weight: 850;
line-height: 1.15;
}
#viewPlace .placeSettingsDangerHint{
color: var(--_place-settings-soft);
font-family: "Inter", var(--ct-font-sans);
font-size: calc(13px * var(--_place-lk-scale));
font-weight: 700;
line-height: 1.15;
}
#viewPlace #btnDeletePlace{
appearance: none;
width: calc(174px * var(--_place-lk-scale));
min-height: calc(45px * var(--_place-lk-scale));
height: calc(45px * var(--_place-lk-scale));
flex: 0 0 calc(174px * var(--_place-lk-scale));
padding: 0 calc(24px * var(--_place-lk-scale));
border-radius: calc(15px * var(--_place-lk-scale));
border: 1px solid #F0DCDD;
background: #FFF8F8;
color: var(--_place-settings-danger);
font-family: "Inter", var(--ct-font-sans);
font-size: calc(15px * var(--_place-lk-scale));
font-weight: 700;
line-height: 1.15;
white-space: nowrap;
cursor: pointer;
box-shadow: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
#viewPlace #btnDeletePlace:hover,
#viewPlace #btnDeletePlace:focus-visible{
background: #FFF2F3;
border-color: #E8CBCD;
color: #A94F5B;
box-shadow: none;
}
#viewPlace .placeLkMetaEditorActions{
display: flex;
justify-content: flex-end;
gap: calc(12px * var(--_place-lk-scale));
flex-wrap: nowrap;
padding: 0;
margin-top: auto;
}
#viewPlace .placeSettingsStatusCard{
display: flex;
flex-direction: column;
justify-content: center;
gap: calc(14px * var(--_place-lk-scale));
min-height: calc(130px * var(--_place-lk-scale));
border: 1px solid var(--_place-settings-field-border);
border-radius: var(--_place-settings-field-radius);
background: #FAFBFC;
padding: calc(20px * var(--_place-lk-scale)) calc(18px * var(--_place-lk-scale));
}
#viewPlace .placeSettingsStatusValue{
color: var(--_place-settings-strong);
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_place-settings-status-size);
font-weight: 700;
line-height: 1.2;
overflow-wrap: anywhere;
}
#viewPlace .placeSettingsStatusNameRow{
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: calc(12px * var(--_place-lk-scale));
min-width: 0;
}
#viewPlace .placeSettingsStatusName{
color: var(--_place-settings-strong);
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_place-settings-status-size);
font-weight: 700;
line-height: 1.2;
overflow-wrap: anywhere;
}
#viewPlace #placeTypePicker,
#viewPlace #placeProviderPicker{
position: relative;
width: 100%;
min-width: 0;
--_dropdown-trigger-text: #1D293D;
--_dropdown-trigger-font-size: var(--_place-lk-control-font-size);
--_dropdown-trigger-font-weight: 620;
--_dropdown-trigger-radius: var(--_place-lk-control-radius);
--_dropdown-trigger-border: #E3E9F1;
--_dropdown-trigger-open-border: rgba(227, 233, 241, .5);
--_dropdown-menu-border: #E5ECF5;
--_dropdown-menu-radius: calc(16px * var(--_place-lk-scale));
--_dropdown-menu-bg: #FFFFFF;
--_dropdown-menu-shadow: 0 12px 28px rgba(15, 23, 42, .08);
--_dropdown-menu-pad: calc(8px * var(--_place-lk-scale));
--_dropdown-menu-offset-y: calc(4px * var(--_place-lk-scale));
--_dropdown-option-radius: calc(10px * var(--_place-lk-scale));
--_dropdown-option-pad-y: calc(9px * var(--_place-lk-scale));
--_dropdown-option-pad-x: calc(12px * var(--_place-lk-scale));
--_dropdown-option-font-size: calc(13px * var(--_place-lk-scale));
--_dropdown-option-font-weight: 560;
--_dropdown-option-text: #243146;
--_dropdown-option-hover-bg: #F7F7F6;
--_dropdown-option-hover-text: #243146;
}
#viewPlace #placeTypePicker > #placeTypeSelect.txDropdownNative,
#viewPlace #placeProviderPicker > #placeProviderSelect.txDropdownNative{
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
min-width: 0;
max-width: 0;
height: 0;
min-height: 0;
padding: 0;
margin: 0;
border: 0;
inset: 0;
}
#viewPlace #placeTypePickerInput,
#viewPlace #placeProviderPickerInput,
#viewPlace #placeNameInput{
width: 100%;
min-width: 0;
min-height: 0;
height: auto;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--_place-settings-strong);
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_place-settings-value-size);
font-weight: 700;
line-height: 1.15;
box-shadow: none;
}
#viewPlace #placeNameInput{
cursor: text;
caret-color: var(--_place-settings-strong);
}
#viewPlace #placeNameInput:disabled{
background: transparent;
color: #7D8797;
cursor: not-allowed;
}
#viewPlace #placeTypePickerInput,
#viewPlace #placeProviderPickerInput{
cursor: pointer;
caret-color: transparent;
padding-right: calc(28px * var(--_place-lk-scale));
}
#viewPlace #placeTypePicker.assetPicker::after,
#viewPlace #placeProviderPicker.assetPicker::after{
width: calc(8px * var(--_place-lk-scale));
height: calc(8px * var(--_place-lk-scale));
border-right-width: calc(3px * var(--_place-lk-scale));
border-bottom-width: calc(3px * var(--_place-lk-scale));
right: calc(4px * var(--_place-lk-scale));
border-right-color: #9AA4B2;
border-bottom-color: #9AA4B2;
transform: translateY(-56%) rotate(45deg);
}
#viewPlace #placeTypePicker.is-open.assetPicker::after,
#viewPlace #placeProviderPicker.is-open.assetPicker::after{
transform: translateY(-56%) rotate(45deg);
}
#viewPlace #placeTypePickerDropdown.txDropdownMenu,
#viewPlace #placeProviderPickerDropdown.txDropdownMenu{
position: fixed;
top: 0;
left: 0;
right: auto;
z-index: 84;
min-width: 0;
border: 1px solid var(--_dropdown-menu-border);
border-radius: var(--_dropdown-menu-radius);
background: var(--_dropdown-menu-bg);
box-shadow: var(--_dropdown-menu-shadow);
padding: var(--_dropdown-menu-pad);
overflow: hidden;
transform: translateY(var(--_dropdown-menu-offset-y));
}
#viewPlace #placeTypePicker.txDropdown.is-open .txDropdownTrigger,
#viewPlace #placeProviderPicker.txDropdown.is-open .txDropdownTrigger{
background: transparent;
box-shadow: none;
}
#viewPlace #placeTypePicker .txDropdownOption,
#viewPlace #placeProviderPicker .txDropdownOption{
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 0;
height: auto;
border: 0;
border-radius: var(--_dropdown-option-radius);
padding: var(--_dropdown-option-pad-y) var(--_dropdown-option-pad-x);
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_dropdown-option-font-size);
font-weight: var(--_dropdown-option-font-weight);
line-height: 1.15;
color: var(--_dropdown-option-text);
background: transparent;
box-shadow: none;
}
#viewPlace #placeTypePicker .txDropdownOption.is-selected,
#viewPlace #placeProviderPicker .txDropdownOption.is-selected{
background: transparent;
color: var(--_dropdown-option-text);
box-shadow: none;
}
#viewPlace #placeTypePicker .txDropdownOption:hover,
#viewPlace #placeTypePicker .txDropdownOption:focus-visible,
#viewPlace #placeProviderPicker .txDropdownOption:hover,
#viewPlace #placeProviderPicker .txDropdownOption:focus-visible{
background: var(--_dropdown-option-hover-bg);
color: var(--_dropdown-option-hover-text);
border-color: transparent;
box-shadow: none;
}
#viewPlace #btnPlaceMetaWalletConnect{
min-height: calc(38px * var(--_place-lk-scale));
padding: 0 calc(23px * var(--_place-lk-scale));
border-radius: calc(14px * var(--_place-lk-scale));
border: 1px solid #D8DEE7;
background: #FFFFFF;
color: #5F6B7A;
font-family: "Inter", var(--ct-font-sans);
font-size: calc(13px * var(--_place-lk-scale));
font-weight: 700;
letter-spacing: 0;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
overflow: visible;
position: relative;
top: calc(3px * var(--_place-lk-scale));
display: inline-flex;
align-items: center;
justify-content: center;
gap: calc(7px * var(--_place-lk-scale));
line-height: 1.2;
white-space: nowrap;
text-align: center;
}
#viewPlace #btnPlaceMetaWalletConnect:hover{
border-color: #C3CBD6;
background: #F3F5F7;
color: #4C5663;
}
#viewPlace .placeSettingsConnectionBlock #btnPlaceMetaWalletConnect{
top: calc(14px * var(--_place-lk-scale));
}
#viewPlace #btnPlaceMetaWalletConnect .placeMetaHelpQ{
position: relative;
margin-left: calc(6px * var(--_place-lk-scale));
top: calc(1px * var(--_place-lk-scale));
flex: 0 0 auto;
z-index: 3;
border-color: rgba(148, 163, 184, .4);
background: rgba(148, 163, 184, .08);
color: currentColor;
opacity: .78;
}
#viewPlace #btnPlaceMetaWalletConnect .placeMetaHelpQ::after{
left: calc(100% + 8px);
right: auto;
top: auto;
bottom: calc(100% - 2px);
transform: translateY(3px);
transform-origin: bottom left;
background: #111827;
color: #F9FAFB;
border-color: rgba(148, 163, 184, .35);
box-shadow: 0 14px 28px rgba(15, 23, 42, .32);
}
#viewPlace #btnPlaceMetaWalletConnect .placeMetaHelpQ:hover::after,
#viewPlace #btnPlaceMetaWalletConnect .placeMetaHelpQ:focus-visible::after{
transform: translateY(0);
}
#viewPlace .placeLkMetaWarning{
flex: 0 0 100%;
margin-top: calc(2px * var(--_place-lk-scale));
padding: 0;
border-bottom: 0;
font-size: calc(12px * var(--_place-lk-scale));
color: #97A4B6;
line-height: 1.45;
}
#viewPlace .placeSettingsConnectionBlock .placeLkMetaConnectionStatus{
color: var(--_place-settings-strong);
font-size: var(--_place-settings-connection-size);
font-weight: 630;
line-height: 1.1;
white-space: normal;
}
#viewPlace .placeSettingsConnectionBlock .placeLkMetaConnectionStatus.is-connected-status{
gap: 0;
color: var(--_place-settings-green);
font-size: var(--_place-settings-connection-size);
font-weight: 630;
}
#viewPlace .placeSettingsConnectionBlock .placeLkMetaConnectionStatus.is-connected-status::before{
content: none;
display: none;
}
#viewPlace .placeLkSystemWarning{
padding: 0 var(--_place-lk-editor-pad-x) calc(18px * var(--_place-lk-scale));
border-bottom: 1px solid rgba(226, 231, 238, .68);
}
#viewPlace .placeLkStatsRow{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--_place-lk-stats-gap);
padding: var(--_place-lk-stats-pad-top) var(--_place-lk-stats-pad-x) var(--_place-lk-stats-pad-bottom);
width: 100%;
min-width: 0;
}
#viewPlace .placeLkStatCol{
display: flex;
flex-direction: column;
gap: var(--_place-lk-stat-gap);
min-width: 0;
flex: 1 1 0;
}
#viewPlace .placeLkStatColAssets{
align-items: center;
text-align: center;
}
#viewPlace .placeLkStatColValue{
transform: translateX(var(--_place-lk-stat-edge-shift));
}
#viewPlace .placeLkStatColShare{
align-items: flex-end;
text-align: right;
transform: translateX(calc(var(--_place-lk-stat-edge-shift) * -1));
}
#viewPlace .placeLkStatLabel{
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_place-lk-stat-label-size);
color: #9AA3AE;
font-weight: 648;
letter-spacing: 0;
text-transform: uppercase;
line-height: 1.2;
}
#viewPlace .placeLkStatColValue .placeLkStatLabel{
font-size: var(--_place-lk-stat-main-label-size);
color: #8B96A8;
letter-spacing: 0;
}
#viewPlace .placeLkStatColAssets .placeLkStatLabel{
font-size: var(--_place-lk-stat-main-label-size);
color: #8B96A8;
letter-spacing: 0;
}
#viewPlace .placeLkStatColShare .placeLkStatLabel{
font-size: var(--_place-lk-stat-main-label-size);
color: #8B96A8;
letter-spacing: 0;
}
#viewPlace .placeLkStatValue{
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_place-lk-stat-value-size);
font-weight: 729;
line-height: 1.08;
color: #0F1828;
letter-spacing: 0;
overflow-wrap: anywhere;
}
#viewPlace .placeLkStatValueSmall{
font-size: var(--_place-lk-stat-small-value-size);
color: #162133;
}
#viewPlace .placeLkStatColAssets .placeLkStatValueSmall{
font-size: var(--_place-lk-stat-value-size);
color: #0F1828;
}
#viewPlace .placeLkStatColShare .placeLkStatValueSmall{
font-size: var(--_place-lk-stat-value-size);
color: #0F1828;
}
#viewPlace .placeLkStatSub{
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_place-lk-stat-sub-size);
font-weight: 504;
line-height: 1.25;
color: #8A94A2;
overflow-wrap: anywhere;
}
#viewPlace .placeLkStatColValue .placeLkStatSub{
font-size: var(--_place-lk-stat-main-sub-size);
color: #707C8F;
}
#viewPlace .placeDetailLowerGrid{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: calc(24px * var(--_place-lk-scale));
width: 100%;
min-width: 0;
}
#viewPlace .placeDetailPanel{
min-width: 0;
min-height: calc(440px * var(--_place-lk-scale));
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: calc(18px * var(--_place-lk-scale));
border: 1px solid var(--_place-lk-surface-border);
border-radius: calc(30px * var(--_place-lk-scale));
background: var(--_place-lk-surface-bg);
box-shadow: var(--_place-lk-surface-shadow);
padding: calc(26px * var(--_place-lk-scale)) calc(28px * var(--_place-lk-scale));
overflow: hidden;
box-sizing: border-box;
}
#viewPlace .placeDetailPanelHead{
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(18px * var(--_place-lk-scale));
min-height: calc(38px * var(--_place-lk-scale));
margin: 0;
min-width: 0;
}
#viewPlace .placeDetailPanelMeta{
flex: 0 0 auto;
color: #8A94A2;
font-family: "Inter", var(--ct-font-sans);
font-size: calc(14px * var(--_place-lk-scale));
font-weight: 800;
line-height: 1.2;
white-space: nowrap;
}
#viewPlace .placeAssetsTableBlock,
#viewPlace .placeTxTableBlock{
--_place-lower-row-h: calc(72px * var(--_place-lk-scale));
--_place-lower-row-line: var(--_place-lk-surface-divider);
--_place-lower-title: #18202D;
--_place-lower-muted: #8A94A2;
--_place-lower-copy: #5F6B7A;
--_place-lower-strong: #111827;
--_place-lower-visible-rows: 5;
--_place-lower-table-max-h: calc(var(--_place-lower-row-h) * var(--_place-lower-visible-rows));
display: grid;
gap: 0;
min-width: 0;
margin-top: 0;
font-family: "Inter", var(--ct-font-sans);
}
#viewPlace .placeAssetsTableTitle,
#viewPlace .placeTxTableTitle{
margin: 0;
color: var(--_place-lower-title);
font-family: "Inter", var(--ct-font-sans);
font-size: calc(22px * var(--_place-lk-scale));
font-weight: 900;
line-height: 1.2;
letter-spacing: 0;
}
#viewPlace .placeAssetsTableWrap,
#viewPlace .placeTxTableShell,
#viewPlace .placeTxTableShell > .placeTxTableWrap{
margin: 0;
min-width: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
overflow: auto;
background-clip: padding-box;
isolation: isolate;
}
#viewPlace .placeAssetsTableWrap,
#viewPlace .placeTxTableShell > .placeTxTableWrap{
max-height: var(--_place-lower-table-max-h);
overflow-y: auto;
overflow-x: hidden;
}
#viewPlace .placeAssetsTableBlock #tblPlaceAssets,
#viewPlace .placeTxTableBlock #tblPlaceTx{
width: 100%;
min-width: 0;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
background: transparent;
font-family: "Inter", var(--ct-font-sans);
}
#viewPlace .placeAssetsTableBlock #tblPlaceAssets thead,
#viewPlace .placeAssetsTableBlock #tblPlaceAssets thead tr,
#viewPlace .placeAssetsTableBlock #tblPlaceAssets thead th,
#viewPlace .placeTxTableBlock #tblPlaceTx thead,
#viewPlace .placeTxTableBlock #tblPlaceTx thead tr,
#viewPlace .placeTxTableBlock #tblPlaceTx thead th{
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
margin: -1px;
padding: 0;
border: 0;
clip-path: inset(50%);
white-space: nowrap;
}
#viewPlace .placeAssetsTableBlock #tblPlaceAssets tbody,
#viewPlace .placeTxTableBlock #tblPlaceTx tbody{
display: grid;
background: transparent;
}
#viewPlace .placeAssetsTableBlock #tblPlaceAssets tbody tr,
#viewPlace .placeTxTableBlock #tblPlaceTx tbody tr{
display: grid;
align-items: center;
align-content: center;
min-height: var(--_place-lower-row-h);
height: auto;
border-bottom: 1px solid var(--_place-lower-row-line);
background: transparent;
}
#viewPlace .placeAssetsTableBlock #tblPlaceAssets tbody tr{
grid-template-columns: minmax(0, 1fr) max-content;
gap: calc(18px * var(--_place-lk-scale));
}
#viewPlace .placeTxTableBlock #tblPlaceTx tbody tr{
grid-template-columns: minmax(0, 1fr) max-content;
gap: calc(16px * var(--_place-lk-scale));
}
#viewPlace .placeAssetsTableBlock #tblPlaceAssets tbody tr.clickableRow,
#viewPlace .placeTxTableBlock #tblPlaceTx tbody tr.clickableRow{
cursor: pointer;
}
#viewPlace .placeAssetsTableBlock #tblPlaceAssets tbody tr:last-child,
#viewPlace .placeTxTableBlock #tblPlaceTx tbody tr:last-child{
border-bottom-color: transparent;
}
#viewPlace .placeAssetsTableBlock #tblPlaceAssets tbody td,
#viewPlace .placeTxTableBlock #tblPlaceTx tbody td{
min-width: 0;
min-height: 0;
height: auto;
width: auto;
padding: 0;
border: 0;
background: transparent;
vertical-align: middle;
font-family: "Inter", var(--ct-font-sans);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
line-height: 1.2;
letter-spacing: 0;
white-space: nowrap;
align-self: center;
}
#viewPlace .placeAssetsTableBlock #tblPlaceAssets tbody tr:hover td,
#viewPlace .placeAssetsTableBlock #tblPlaceAssets tbody tr.placeNegativeRow td,
#viewPlace .placeTxTableBlock #tblPlaceTx tbody tr:hover td{
background: transparent;
}
#viewPlace .placeAssetCompactCopy,
#viewPlace .placeTxCompactCopy{
display: grid;
align-content: center;
gap: calc(5px * var(--_place-lk-scale));
justify-items: start;
color: var(--_place-lower-copy);
white-space: normal;
}
#viewPlace .placeAssetCompactTicker{
display: block;
max-width: 100%;
overflow: hidden;
color: var(--_place-lower-strong);
font-size: calc(16px * var(--_place-lk-scale));
font-weight: 810;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
#viewPlace .placeAssetCompactName{
display: block;
max-width: 100%;
overflow: hidden;
color: var(--_place-lower-muted);
font-size: calc(13px * var(--_place-lk-scale));
font-weight: 595;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
#viewPlace .placeTxCompactType{
display: block;
max-width: 100%;
overflow: hidden;
font-size: calc(15px * var(--_place-lk-scale));
font-weight: 612;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
#viewPlace .placeTxCompactType--buy{ color: #3F7B54; }
#viewPlace .placeTxCompactType--sell{ color: #B76575; }
#viewPlace .placeTxCompactType--transfer{ color: #4B6F96; }
#viewPlace .placeTxCompactType--neutral{ color: #657180; }
#viewPlace .placeTxCompactAssetLine{
display: inline-flex;
align-items: center;
max-width: 100%;
min-width: 0;
gap: calc(4px * var(--_place-lk-scale));
overflow: hidden;
color: var(--_place-lower-muted);
font-size: calc(13px * var(--_place-lk-scale));
font-weight: 700;
line-height: 1.25;
white-space: nowrap;
}
#viewPlace .placeTxCompactAssetLine[data-open-asset]{
cursor: pointer;
}
#viewPlace .placeTxCompactAsset{
display: inline-block;
max-width: calc(124px * var(--_place-lk-scale));
overflow: hidden;
color: #616B78;
text-overflow: ellipsis;
white-space: nowrap;
}
#viewPlace .placeTxCompactDot,
#viewPlace .placeTxCompactStatus{
flex: 0 0 auto;
color: var(--_place-lower-muted);
font-weight: 595;
}
#viewPlace .placeTxCompactStatusWarn{
color: #95602A;
}
#viewPlace .assetPlacesAmountCell{
display: grid;
align-content: center;
justify-self: end;
justify-items: end;
gap: calc(5px * var(--_place-lk-scale));
color: var(--_place-lower-strong);
text-align: right;
white-space: nowrap;
}
#viewPlace .assetPlacesTokenAmount{
display: block;
color: var(--_place-lower-strong);
font-size: calc(15px * var(--_place-lk-scale));
font-weight: 675;
line-height: 1.2;
white-space: nowrap;
}
#viewPlace .assetPlacesFiatAmount{
display: block;
color: var(--_place-lower-copy);
font-size: calc(14px * var(--_place-lk-scale));
font-weight: 560;
line-height: 1.2;
white-space: nowrap;
}
#viewPlace .placeAssetsTableBlock #tblPlaceAssets .taxProofChip{
margin-top: calc(2px * var(--_place-lk-scale));
margin-left: 0;
padding: calc(2px * var(--_place-lk-scale)) calc(7px * var(--_place-lk-scale));
border: 1px solid rgba(238, 218, 190, .92);
border-radius: 999px;
background: rgba(253, 247, 238, .94);
color: #8F6940;
font-size: calc(9px * var(--_place-lk-scale));
font-weight: 700;
line-height: 1.25;
white-space: nowrap;
box-shadow: none;
vertical-align: middle;
}
#viewPlace .placeAssetsTableHint{
margin-top: 0;
color: var(--_place-lower-muted);
font-family: "Inter", var(--ct-font-sans);
font-size: 13px;
font-weight: 500;
line-height: 18px;
}
@media (max-width: 1180px){
#viewPlace .placeLkMetaRow{
gap: calc(18px * var(--_place-lk-scale));
}
#viewPlace .placeDetailLowerGrid{
gap: calc(18px * var(--_place-lk-scale));
}
#viewPlace .placeLkMetaEditorSurface{
grid-template-columns: 1fr;
}
#viewPlace .placeSettingsPanel{
min-height: 0;
}
#viewPlace .placeLkMetaEditorActions{
justify-content: flex-end;
}
}
@media (max-width: 980px){
#viewPlace > .placeDetailPageCard > .placeDetailPageInner{
padding: 16px 0 0;
}
#viewPlace .placeLkFloatingHeader{
flex-wrap: wrap;
align-items: flex-start;
}
#viewPlace .placeLkIdentity{
align-items: flex-start;
gap: var(--_place-lk-identity-gap);
}
#viewPlace .placeLkActions{
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
}
#viewPlace .placeLkPremiumShell{
padding: 22px 18px;
}
#viewPlace .placeLkPremiumShell.is-place-settings-editing{
padding: 0;
}
#viewPlace .placeLkMetaRow{
grid-template-columns: 1fr;
align-items: flex-start;
gap: 10px;
}
#viewPlace .placeLkMetaCell{
width: 100%;
flex-basis: auto;
}
#viewPlace #btnPlaceMetaEdit{
width: 100%;
}
#viewPlace .placeDetailFloatingShell{
padding: 24px 18px;
border-radius: 26px;
}
#viewPlace .placeDetailLowerGrid{
grid-template-columns: 1fr;
}
#viewPlace .placeMetaControls{
grid-template-columns: 1fr;
}
#viewPlace .placeLkMetaConnectionCard{
align-items: flex-start;
}
#viewPlace .placeLkMetaWalletCta{
width: 100%;
justify-content: flex-start;
}
#viewPlace .placeLkStatsRow{
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
#viewPlace .placeLkStatColAssets,
#viewPlace .placeLkStatColShare{
align-items: flex-start;
text-align: left;
}
#viewPlace .placeLkStatColValue,
#viewPlace .placeLkStatColShare{
transform: none;
}
#viewPlace #placeTypePicker,
#viewPlace #placeTypePickerInput,
#viewPlace #placeProviderPicker,
#viewPlace #placeProviderPickerInput,
#viewPlace #placeNameInput{
min-width: 0;
width: 100%;
}
}
@media (max-width: 720px){
#viewPlace .placeLkActions{
gap: var(--_place-lk-action-gap);
row-gap: var(--_place-lk-action-gap);
}
#viewPlace #btnBackPlace{
width: auto;
flex: 1 1 140px;
}
}
.clickableRow{ cursor:pointer; }
.assetLink{
cursor:pointer;
text-decoration: none;
border-bottom: 1px dashed rgba(10,12,16,.25);
}
.portfolioBox{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}
.btnIconOnly{
width: var(--ct-h-secondary);
min-width: var(--ct-h-secondary);
height: var(--ct-h-secondary);
min-height: var(--ct-h-secondary);
padding: 0;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius: var(--ct-radius-control);
font-weight: 900;
line-height: 1;
}
.btnTiny{
min-height: 32px;
padding: 0 10px;
border-radius: var(--ct-radius-pill);
font-size: 12px;
font-weight: 850;
}
.btnDeal{
min-height: 32px;
padding: 0 10px;
border-radius: var(--ct-radius-pill);
font-size: 12px;
font-weight: 850;
opacity: 1;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 6px;
}
.tdNoWrap{ white-space: nowrap; }
.sectionTitle{
font-weight: 820;
letter-spacing: -.01em;
}
#btnReset{ display:none !important; }
.rowBreak{ flex-basis:100%; height:0; }
/* === UX: скрыть отображение ID/названия монеты в скобках (оставляем только тикер) === */
#tblTx .small.mono,
#tblAssetTx .small.mono,
#tblAssetPlaces .small.mono{
display:none !important;
}
/* === Dashboard tabs shell === */
.dashboardStickyMount{
--_overview-sticky-height: calc(100dvh - var(--stickyTop, var(--ct-topbar-fixed-height)));
--_overview-sticky-min-height: 280px;
--_overview-tabs-z: 90;
--_overview-panel-gap-assets: 17.6px;
--_overview-panel-gap-tx: 22px;
position: relative;
z-index: 1;
height: max(var(--_overview-sticky-min-height), var(--_overview-sticky-height));
margin-top: 16px;
}
.dashboardStickyMount.is-overview-stuck{
z-index: var(--_overview-tabs-z);
}
.dashboardTabs{
--_dashboard-tabs-gap: 5.1px;
--_dashboard-tabs-surface-pad-top: 6px;
--_dashboard-tabs-surface-pad-x: 28px;
--_dashboard-tabs-surface-pad-bottom: 20px;
--_dashboard-tabs-surface-radius: 28px;
--_dashboard-tabs-surface-bg: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(247,249,252,.20) 100%);
--_dashboard-tabs-surface-border: rgba(227,232,239,.28);
--_dashboard-tabs-surface-shadow: 0 14px 30px #26304105;
--_dashboard-tabs-list-height: 51.2px;
--_dashboard-tabs-list-gap: 4.8px;
--_dashboard-tabs-list-pad: 4px;
--_dashboard-tabs-radius: 17.6px;
--_dashboard-tabs-border-width: .8px;
--_dashboard-tabs-border: #E3E8EF;
--_dashboard-tabs-bg: linear-gradient(180deg, #FFFFFF 0%, #F5F7F9 100%);
--_dashboard-tabs-shadow: 0 9.6px 22.4px #2630410D;
--_dashboard-tabs-button-height: 43.2px;
--_dashboard-tabs-button-radius: 14.4px;
--_dashboard-tabs-button-text: #7A8594;
--_dashboard-tabs-button-text-active: #18202D;
--_dashboard-tabs-button-active-bg: #FFFFFF;
--_dashboard-tabs-button-active-border: #DDE5EE;
--_dashboard-tabs-button-shadow: none;
--_dashboard-tabs-font-family: "Inter", var(--ct-font-sans);
--_dashboard-tabs-button-font-size: 13.6px;
--_dashboard-tabs-button-font-weight: 684;
--_dashboard-tabs-button-letter: 0;
--_dashboard-tabs-button-active-font-size: 14.4px;
--_dashboard-tabs-button-active-font-weight: 770;
--_dashboard-tabs-button-active-letter: 0;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: var(--_dashboard-tabs-gap);
height: 100%;
min-height: 0;
width: calc(100% + (var(--_dashboard-tabs-surface-pad-x) * 2));
margin-top: 0;
margin-left: calc(var(--_dashboard-tabs-surface-pad-x) * -1);
margin-right: calc(var(--_dashboard-tabs-surface-pad-x) * -1);
padding: var(--_dashboard-tabs-surface-pad-top) var(--_dashboard-tabs-surface-pad-x) var(--_dashboard-tabs-surface-pad-bottom);
border: 1px solid var(--_dashboard-tabs-surface-border);
border-radius: var(--_dashboard-tabs-surface-radius);
background: var(--_dashboard-tabs-surface-bg);
box-shadow: var(--_dashboard-tabs-surface-shadow);
box-sizing: border-box;
overflow: visible;
}
.dashboardStickyMount.is-overview-stuck .dashboardTabs{
position: fixed;
top: var(--stickyTop, var(--ct-topbar-fixed-height));
left: var(--_overview-sticky-left, 0px);
width: var(--_overview-sticky-width, 100%);
height: max(var(--_overview-sticky-min-height), var(--_overview-sticky-height));
margin-left: 0;
margin-right: 0;
z-index: var(--_overview-tabs-z);
}
.dashboardTabList{
width: 100%;
display: flex;
align-items: center;
justify-content: stretch;
justify-self: stretch;
gap: var(--_dashboard-tabs-list-gap);
height: var(--_dashboard-tabs-list-height);
padding: var(--_dashboard-tabs-list-pad);
border: var(--_dashboard-tabs-border-width) solid transparent;
border-radius: var(--_dashboard-tabs-radius);
background: transparent;
box-shadow: none;
overflow-x: auto;
scrollbar-width: none;
box-sizing: border-box;
}
.dashboardTabList::-webkit-scrollbar{
display: none;
}
.dashboardTabButton{
flex: 1 1 0;
width: auto;
min-height: var(--_dashboard-tabs-button-height);
height: var(--_dashboard-tabs-button-height);
padding: 0 12.8px;
border: var(--_dashboard-tabs-border-width) solid transparent;
border-radius: var(--_dashboard-tabs-button-radius);
background: transparent;
color: var(--_dashboard-tabs-button-text);
font-family: var(--_dashboard-tabs-font-family);
font-size: var(--_dashboard-tabs-button-font-size);
font-weight: var(--_dashboard-tabs-button-font-weight);
line-height: 1;
letter-spacing: var(--_dashboard-tabs-button-letter);
white-space: nowrap;
cursor: pointer;
box-shadow: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0;
box-sizing: border-box;
transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.dashboardTabButton:hover,
.dashboardTabButton:focus-visible{
outline: none;
border-color: transparent;
background: transparent;
color: var(--_dashboard-tabs-button-text-active);
box-shadow: none;
}
.dashboardTabButton.is-active{
background: var(--_dashboard-tabs-button-active-bg);
color: var(--_dashboard-tabs-button-text-active);
border-color: var(--_dashboard-tabs-button-active-border);
box-shadow: var(--_dashboard-tabs-button-shadow);
font-size: var(--_dashboard-tabs-button-active-font-size);
font-weight: var(--_dashboard-tabs-button-active-font-weight);
letter-spacing: var(--_dashboard-tabs-button-active-letter);
}
.dashboardTabPanel{
display: block;
min-height: 0;
}
.dashboardTabPanel.is-active{
display: grid;
min-height: 0;
height: 100%;
overflow: hidden;
}
.dashboardTabPanel[hidden]{
display: none;
}
@media (max-width: 760px){
.dashboardStickyMount{
margin-top: 33px;
}
.dashboardTabList{
justify-content: flex-start;
}
.dashboardTabButton{
flex: 0 0 248px;
}
.dashboardTabButton[data-dashboard-tab="tx"]{
flex-basis: 328px;
}
}
.dashboardStickyMount .assetsTableCard,
.dashboardStickyMount .placesTableCard,
.dashboardStickyMount .txHistoryCard{
min-height: 0;
max-height: 100%;
}
.dashboardStickyMount .assetsTableCard,
.dashboardStickyMount .placesTableCard{
height: calc(100% - var(--_overview-panel-gap-assets));
grid-template-rows: auto auto minmax(0, 1fr);
}
.dashboardStickyMount .txHistoryCard{
height: calc(100% - var(--_overview-panel-gap-tx));
}
.dashboardStickyMount .txHistoryCard > .txHistoryCardInner{
height: 100%;
min-height: 0;
grid-template-rows: auto minmax(0, 1fr) auto;
}
.dashboardStickyMount .assetsTableArea,
.dashboardStickyMount .placesTableArea,
.dashboardStickyMount .txHistoryTableShell{
min-height: 0;
height: 100%;
}
.dashboardStickyMount .assetsTableWrap,
.dashboardStickyMount .placesTableWrap,
.dashboardStickyMount .txHistoryTableScroller{
height: 100%;
max-height: 100%;
}
/* === Assets table block: Pencil transfer at 80% scale === */
.assetsTableCard{
--_assets-table-card-width: 1164.8px;
--_assets-table-card-gap: 20.8px;
--_assets-table-summary-area-h: 60.8px;
--_assets-table-summary-strip-w: 736px;
--_assets-table-summary-strip-h: 52.8px;
--_assets-table-summary-item-w: 152px;
--_assets-table-summary-item-h: 40px;
--_assets-table-summary-divider-w: .8px;
--_assets-table-summary-divider-h: 27.2px;
--_assets-table-summary-gap: 32.2px;
--_assets-table-summary-divider: rgba(226,232,240,.78);
--_assets-table-summary-label: #7A8594;
--_assets-table-summary-value: #18202D;
--_assets-table-summary-pnl-label: #687382;
--_assets-table-summary-pnl-value: #2F7A55;
--_assets-table-summary-label-size: 12.8px;
--_assets-table-summary-label-weight: 450;
--_assets-table-summary-value-size: 21.6px;
--_assets-table-summary-value-weight: 400;
--_assets-table-control-h: 48px;
--_assets-table-control-radius: 19.2px;
--_assets-table-search-w: 416px;
--_assets-table-search-icon-shell: 25.6px;
--_assets-table-search-icon-size: 14.4px;
--_assets-table-search-bg: linear-gradient(180deg, rgba(255,255,255,.54) 0%, rgba(246,248,251,.34) 100%);
--_assets-table-search-border: rgba(228,234,241,.58);
--_assets-table-search-shadow: 0 8px 18px #26304108;
--_assets-table-search-icon-bg: rgba(240,242,244,.52);
--_assets-table-search-icon-border: rgba(225,229,234,.58);
--_assets-table-search-icon: #68727E;
--_assets-table-search-placeholder: #8893A1;
--_assets-table-actions-gap: 14.4px;
--_assets-table-chip-row-h: 46.4px;
--_assets-table-chip-h: 40px;
--_assets-table-chip-radius: 17.6px;
--_assets-table-chip-text: #657180;
--_assets-table-chip-text-active: #18202D;
--_assets-table-chip-bg-active: linear-gradient(180deg, rgba(255,255,255,.54) 0%, rgba(238,245,255,.36) 100%);
--_assets-table-chip-border-active: rgba(220,232,246,.58);
--_assets-table-chip-shadow-active: 0 6px 14px #2B5B8A0B;
--_assets-table-chip-bg-hover: linear-gradient(180deg, rgba(255,255,255,.46) 0%, rgba(246,247,248,.26) 100%);
--_assets-table-chip-border-hover: rgba(226,230,234,.42);
--_assets-table-chip-shadow-hover: 0 4px 10px #26304105;
--_assets-table-deal-w: 123.2px;
--_assets-table-deal-h: 44.8px;
--_assets-table-deal-radius: 18.4px;
--_assets-table-deal-bg: linear-gradient(180deg, rgba(255,255,255,.54) 0%, rgba(246,247,248,.34) 100%);
--_assets-table-deal-border: rgba(226,230,234,.58);
--_assets-table-deal-shadow: 0 6px 14px #26304108;
--_assets-table-deal-bg-hover: linear-gradient(180deg, rgba(250,250,249,.72) 0%, rgba(240,240,238,.44) 100%);
--_assets-table-deal-border-hover: transparent;
--_assets-table-deal-shadow-hover: 0 6px 14px #2630410A;
--_assets-table-deal-text: #4B5563;
--_assets-table-deal-icon-bg: rgba(240,242,244,.56);
--_assets-table-table-radius: 27.2px;
--_assets-table-table-shadow: 0 10px 26px #26304109;
--_assets-table-table-w: 1078.4px;
--_assets-table-header-h: 51.2px;
--_assets-table-row-h: 83.2px;
--_assets-table-more-h: 56px;
--_assets-table-edge-px: 19.2px;
--_assets-table-cell-px: 3.2px;
--_assets-table-col-asset: 200px;
--_assets-table-col-value: 97.6px;
--_assets-table-col-qty: 67.2px;
--_assets-table-col-price: 124px;
--_assets-table-col-avg: 116px;
--_assets-table-col-unrealized: 132px;
--_assets-table-col-realized: 104px;
--_assets-table-col-total: 120px;
--_assets-table-head-bg: linear-gradient(180deg, #FCFDFE 0%, #F7F9FB 100%);
--_assets-table-head-line: rgba(233,237,242,.72);
--_assets-table-head-text: #6F7A88;
--_assets-table-head-text-active: #202938;
--_assets-table-head-pill-bg: rgba(241,243,245,.62);
--_assets-table-head-pill-border: rgba(221,226,232,.62);
--_assets-table-head-arrow: #68727E;
--_assets-table-row-line: rgba(237,240,244,.72);
--_assets-table-strong: #18202D;
--_assets-table-value: #18202D;
--_assets-table-qty: #202938;
--_assets-table-price: #526070;
--_assets-table-muted: #98A1AC;
--_assets-table-avg: #7F8994;
--_assets-table-good: #3F7B54;
--_assets-table-bad: #B76575;
--_assets-table-zero: #9AA3AE;
--_assets-table-zero-bucket-badge-bg: rgba(241,243,245,.72);
--_assets-table-zero-bucket-badge-weight: 800;
--_assets-table-zero-bucket-warn-bg: rgba(252,239,213,.9);
--_assets-table-zero-bucket-warn-text: #8A5B20;
--_assets-table-zero-bucket-chevron-bg: rgba(241,243,245,.72);
--_assets-table-zero-bucket-chevron-text: #8A94A3;
width: min(100%, var(--_assets-table-card-width));
max-width: 100%;
margin-top: 17.6px;
display: grid;
gap: var(--_assets-table-card-gap);
padding: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
font-family: "Inter", var(--ct-font-sans);
box-sizing: border-box;
}
.assetsTableHeaderArea{
min-height: var(--_assets-table-summary-area-h);
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
.assetsTableSummary{
width: min(100%, var(--_assets-table-summary-strip-w));
height: var(--_assets-table-summary-strip-h);
display: grid;
grid-template-columns:
var(--_assets-table-summary-item-w)
var(--_assets-table-summary-divider-w)
var(--_assets-table-summary-item-w)
var(--_assets-table-summary-divider-w)
var(--_assets-table-summary-item-w);
align-items: center;
justify-content: center;
column-gap: var(--_assets-table-summary-gap);
min-width: 0;
box-sizing: border-box;
overflow-x: auto;
scrollbar-width: none;
}
.assetsTableSummary::-webkit-scrollbar{
display: none;
}
.assetsTableSummaryItem{
width: var(--_assets-table-summary-item-w);
height: var(--_assets-table-summary-item-h);
display: grid;
align-content: center;
gap: 4px;
min-width: 0;
padding: 0;
overflow: hidden;
}
.assetsTableSummaryDivider{
width: var(--_assets-table-summary-divider-w);
height: var(--_assets-table-summary-divider-h);
border-radius: 999px;
background: var(--_assets-table-summary-divider);
justify-self: center;
}
.assetsTableSummaryLabel{
overflow: hidden;
color: var(--_assets-table-summary-label);
font-size: var(--_assets-table-summary-label-size);
font-weight: var(--_assets-table-summary-label-weight);
line-height: 1.15;
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
.assetsTableSummaryItemPnl .assetsTableSummaryLabel{
color: var(--_assets-table-summary-pnl-label);
}
.assetsTableSummaryValue{
overflow: hidden;
color: var(--_assets-table-summary-value);
font-size: var(--_assets-table-summary-value-size);
font-weight: var(--_assets-table-summary-value-weight);
line-height: 1.05;
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
.assetsTableSummaryItemPnl .assetsTableSummaryValue{
color: var(--_assets-table-summary-pnl-value);
font-weight: 420;
}
.assetsTableSummaryItemPnl.is-negative .assetsTableSummaryValue{
color: var(--_assets-table-bad);
}
.assetsTableFilterRow{
min-height: 62.4px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-width: 0;
}
.assetsTableSearchShell{
width: var(--_assets-table-search-w);
height: var(--_assets-table-control-h);
display: flex;
align-items: center;
gap: 11.2px;
padding: 0 14.4px;
border: 1px solid var(--_assets-table-search-border);
border-radius: var(--_assets-table-control-radius);
background: var(--_assets-table-search-bg);
box-shadow: var(--_assets-table-search-shadow);
cursor: text;
min-width: 0;
}
.assetsTableSearchIcon{
width: var(--_assets-table-search-icon-shell);
height: var(--_assets-table-search-icon-shell);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 var(--_assets-table-search-icon-shell);
border: 1px solid var(--_assets-table-search-icon-border);
border-radius: 12.8px;
background: var(--_assets-table-search-icon-bg);
color: var(--_assets-table-search-icon);
box-shadow: 0 4px 9px #26304106;
}
.assetsTableSearchIcon svg{
width: var(--_assets-table-search-icon-size);
height: var(--_assets-table-search-icon-size);
display: block;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.assetsTableSearch{
width: 100%;
min-width: 0;
height: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--_assets-table-strong);
font-family: "Inter", var(--ct-font-sans);
font-size: 12.8px;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
outline: none;
box-shadow: none;
appearance: none;
-webkit-appearance: none;
}
.assetsTableSearch:focus,
.assetsTableSearch:focus-visible{
border: 0;
outline: none;
box-shadow: none;
}
.assetsTableSearch::placeholder{
color: var(--_assets-table-search-placeholder);
font-weight: 540;
opacity: 1;
}
.assetsTableSearchShell:focus-within{
border-color: var(--_assets-table-search-border);
box-shadow: var(--_assets-table-search-shadow);
}
.assetsTableActions{
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--_assets-table-actions-gap);
min-width: 0;
}
.assetsTableChips{
height: var(--_assets-table-chip-row-h);
display: flex;
align-items: center;
gap: 6.4px;
padding: 3.2px;
border: 0;
border-radius: 20.8px;
background: transparent;
overflow: hidden;
scrollbar-width: none;
flex: 0 0 auto;
}
.assetsTableChips::-webkit-scrollbar{
display: none;
}
.assetsTableChip{
height: var(--_assets-table-chip-h);
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
padding: 0 12px;
border: 1px solid transparent;
border-radius: var(--_assets-table-chip-radius);
background: transparent;
color: var(--_assets-table-chip-text);
font-family: "Inter", var(--ct-font-sans);
font-size: 12px;
font-weight: 599;
line-height: 1;
letter-spacing: 0;
white-space: nowrap;
cursor: pointer;
box-shadow: none;
transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.assetsTableChip:nth-child(1){ width: 68.8px; }
.assetsTableChip:nth-child(2){ width: 89.6px; }
.assetsTableChip:nth-child(3){ width: 86.4px; }
.assetsTableChip:nth-child(4){ width: 76.8px; }
.assetsTableChip:hover,
.assetsTableChip:focus-visible{
border-color: var(--_assets-table-chip-border-hover);
background: var(--_assets-table-chip-bg-hover);
color: var(--_assets-table-chip-text-active);
box-shadow: var(--_assets-table-chip-shadow-hover);
outline: none;
}
.assetsTableChip.is-active{
border-color: var(--_assets-table-chip-border-active);
background: var(--_assets-table-chip-bg-active);
color: var(--_assets-table-chip-text-active);
box-shadow: var(--_assets-table-chip-shadow-active);
}
.assetsTableDealBtn{
width: var(--_assets-table-deal-w);
height: var(--_assets-table-deal-h);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6.4px;
flex: 0 0 var(--_assets-table-deal-w);
padding: 0 11.2px;
border: 1px solid var(--_assets-table-deal-border);
border-radius: var(--_assets-table-deal-radius);
background: var(--_assets-table-deal-bg);
color: var(--_assets-table-deal-text);
font-family: "Inter", var(--ct-font-sans);
font-size: 12px;
font-weight: 800;
line-height: 1;
letter-spacing: 0;
box-shadow: var(--_assets-table-deal-shadow);
cursor: pointer;
transition: border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.assetsTableDealIcon{
width: 17.6px;
height: 17.6px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 17.6px;
border-radius: 8.8px;
background: var(--_assets-table-deal-icon-bg);
color: #68727E;
font-size: 12px;
font-weight: 800;
line-height: 1;
}
.assetsTableDealBtn:hover,
.assetsTableDealBtn:focus-visible{
border-color: var(--_assets-table-deal-border-hover);
background: var(--_assets-table-deal-bg-hover);
color: var(--_assets-table-deal-text);
box-shadow: var(--_assets-table-deal-shadow-hover);
outline: none;
transform: none;
}
.assetsTableArea{
border: 0;
border-radius: var(--_assets-table-table-radius);
background: rgba(255,255,255,.25);
box-shadow: var(--_assets-table-table-shadow);
overflow: hidden;
min-width: 0;
}
.assetsTableWrap{
overflow-x: auto;
overflow-y: auto;
border: 0;
border-radius: inherit;
background: transparent;
isolation: isolate;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.assetsTableCard #tblAssets{
width: 100%;
min-width: var(--_assets-table-table-w);
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
background: transparent;
font-family: "Inter", var(--ct-font-sans);
}
.assetsTableCard #tblAssets tbody{
background: transparent;
}
.assetsTableCard #tblAssets .assetsColAsset{ width: var(--_assets-table-col-asset); }
.assetsTableCard #tblAssets .assetsColValue{ width: var(--_assets-table-col-value); }
.assetsTableCard #tblAssets .assetsColQty{ width: var(--_assets-table-col-qty); }
.assetsTableCard #tblAssets .assetsColPrice{ width: var(--_assets-table-col-price); }
.assetsTableCard #tblAssets .assetsColAvg{ width: var(--_assets-table-col-avg); }
.assetsTableCard #tblAssets .assetsColUnrealized{ width: var(--_assets-table-col-unrealized); }
.assetsTableCard #tblAssets .assetsColRealized{ width: var(--_assets-table-col-realized); }
.assetsTableCard #tblAssets .assetsColTotal{ width: var(--_assets-table-col-total); }
.assetsTableCard #tblAssets th,
.assetsTableCard #tblAssets td{
padding: 0 var(--_assets-table-cell-px);
text-align: left;
vertical-align: middle;
font-family: "Inter", var(--ct-font-sans);
letter-spacing: 0;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
background: transparent;
}
.assetsTableCard #tblAssets th.right,
.assetsTableCard #tblAssets td.right{
text-align: left;
}
.assetsTableCard #tblAssets thead th{
position: sticky;
top: 0;
z-index: 60;
height: var(--_assets-table-header-h);
border-bottom: 1px solid var(--_assets-table-head-line);
background: var(--_assets-table-head-bg);
color: var(--_assets-table-head-text);
font-size: 10.4px;
font-weight: 618;
line-height: 1;
letter-spacing: 0;
white-space: nowrap;
cursor: default;
background-clip: padding-box;
}
.assetsTableCard #tblAssets thead th:first-child,
.assetsTableCard #tblAssets tbody td:first-child{
padding-left: var(--_assets-table-edge-px);
}
.assetsTableCard #tblAssets thead th:last-child,
.assetsTableCard #tblAssets tbody td:last-child{
padding-right: var(--_assets-table-edge-px);
}
.assetsTableCard #tblAssets thead th.sortable{
cursor: pointer;
}
.assetsTableCard #tblAssets thead th .sortLabel{
min-height: 22.4px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 2.4px;
padding: 0 8px;
border: 1px solid transparent;
border-radius: 10.4px;
color: inherit;
max-width: 100%;
}
.assetsTableCard #tblAssets thead th.sortable:hover .sortLabel{
color: var(--_assets-table-head-text-active);
}
.assetsTableCard #tblAssets thead th .sortLabel:has(.sortMark.active){
border-color: var(--_assets-table-head-pill-border);
background: var(--_assets-table-head-pill-bg);
color: var(--_assets-table-head-text-active);
font-size: 8.8px;
}
.assetsTableCard #tblAssets .sortMark{
display: inline-flex;
align-items: center;
justify-content: center;
width: 8.8px;
color: var(--_assets-table-head-arrow);
font-size: 8.8px;
font-weight: 800;
line-height: 1;
letter-spacing: 0;
opacity: 0;
transition: opacity .16s ease;
}
.assetsTableCard #tblAssets .sortMark.active{
opacity: 1;
}
.assetsTableCard #tblAssets thead th.sortable:hover .sortMark:not(.active){
opacity: .45;
}
.assetsTableCard #tblAssets thead th:not(:first-child){
font-size: 11.96px;
font-weight: 473;
}
.assetsTableCard #tblAssets thead th:not(:first-child) .sortLabel:has(.sortMark.active){
font-size: 10.12px;
font-weight: 473;
}
.assetsTableCard #tblAssets tbody tr{
height: var(--_assets-table-row-h);
}
.assetsTableCard #tblAssets tbody td{
height: var(--_assets-table-row-h);
border-bottom: 1px solid var(--_assets-table-row-line);
background: transparent;
color: var(--_assets-table-price);
line-height: 1.2;
white-space: nowrap;
}
.assetsTableCard #tblAssets tbody tr:hover td{
background: rgba(251,252,253,.24);
}
.assetsTableCard #tblAssets tbody td:not(:first-child){
font-size: 13.57px;
font-weight: 612;
}
.assetsTableCard #tblAssets .assetCell{
display: flex;
align-items: center;
gap: 11.2px;
min-width: 0;
}
.assetsTableCard #tblAssets .assetIcon{
width: 32px;
height: 32px;
flex: 0 0 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 16px;
overflow: hidden;
background: rgba(234,244,255,.62);
color: #68727E;
font-size: 12px;
font-weight: 800;
line-height: 1;
letter-spacing: 0;
box-shadow: none;
}
.assetsTableCard #tblAssets .assetIcon.assetIcon--image{
background: transparent;
color: inherit;
}
.assetsTableCard #tblAssets .assetIcon img{
width: 100%;
height: 100%;
display: block;
object-fit: contain;
background: transparent;
border-radius: inherit;
}
.assetsTableCard #tblAssets .assetCellText{
display: grid;
gap: 4px;
min-width: 0;
}
.assetsTableCard #tblAssets .assetSymbol{
display: block;
overflow: hidden;
color: var(--_assets-table-strong);
font-size: 13.2px;
font-weight: 800;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.assetsTableCard #tblAssets .assetName{
display: block;
overflow: hidden;
color: var(--_assets-table-muted);
font-size: 9.6px;
font-weight: 700;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.assetsTableCard #tblAssets td:nth-child(2){
color: var(--_assets-table-value);
font-size: 15.64px;
font-weight: 612;
}
.assetsTableCard #tblAssets td:nth-child(3){
color: var(--_assets-table-qty);
}
.assetsTableCard #tblAssets td:nth-child(4){
color: var(--_assets-table-price);
}
.assetsTableCard #tblAssets td:nth-child(5){
color: var(--_assets-table-avg);
}
.assetsTableCard #tblAssets td:nth-child(6),
.assetsTableCard #tblAssets td:nth-child(7){
color: var(--_assets-table-zero);
}
.assetsTableCard #tblAssets td:nth-child(8){
color: var(--_assets-table-good);
font-size: 14.38px;
}
.assetsTableCard #tblAssets thead th:nth-child(n+3){
font-weight: 426;
}
.assetsTableCard #tblAssets thead th:nth-child(n+3) .sortLabel:has(.sortMark.active){
font-weight: 426;
}
.assetsTableCard #tblAssets tbody td:nth-child(n+3){
font-weight: 551;
}
.assetsTableCard #tblAssets td.good{
color: var(--_assets-table-good);
}
.assetsTableCard #tblAssets td.bad{
color: var(--_assets-table-bad);
}
.assetsTableCard #tblAssets td:nth-child(6).good::before,
.assetsTableCard #tblAssets td:nth-child(7).good::before,
.assetsTableCard #tblAssets td:nth-child(8).good::before{
content: "\25B2 +";
}
.assetsTableCard #tblAssets td:nth-child(6).bad::before,
.assetsTableCard #tblAssets td:nth-child(7).bad::before,
.assetsTableCard #tblAssets td:nth-child(8).bad::before{
content: "\25BC ";
}
.assetsTableCard #tblAssets td.right .small{
display: none;
}
.assetsTableCard #tblAssets td:first-child .tag.tag-warn{
width: max-content;
max-width: 96px;
margin-left: 0;
padding: 1.6px 4px;
border-color: rgba(255,176,32,.4);
background: rgba(255,176,32,.14);
color: #946718;
font-size: 6.6px;
font-weight: 600;
line-height: 1.1;
white-space: normal;
}
.assetsTableCard #tblAssets tfoot{
display: none;
}
.assetsTableCard #tblAssets .assetsTableMoreRow,
.assetsTableCard #tblAssets .assetsTableMoreRow:hover{
height: var(--_assets-table-more-h);
background: transparent;
}
.assetsTableCard #tblAssets .assetsTableMoreRow td{
height: var(--_assets-table-more-h);
border-bottom: 0;
text-align: center;
background: transparent;
}
.assetsTableMoreBtn{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
padding: 0 12px;
border: 0;
border-radius: 14px;
background: transparent;
color: #7A8594;
font-family: "Inter", var(--ct-font-sans);
font-size: 11.2px;
font-weight: 800;
line-height: 1;
letter-spacing: 0;
cursor: pointer;
}
.assetsTableMoreBtn:hover,
.assetsTableMoreBtn:focus-visible{
color: #4F5A68;
background: rgba(247,248,250,.48);
outline: none;
}
.assetsTableCard #tblAssets .assetsTableZeroBucketRow,
.assetsTableCard #tblAssets .assetsTableZeroBucketRow:hover{
height: var(--_assets-table-more-h);
background: transparent;
}
.assetsTableCard #tblAssets .assetsTableZeroBucketRow td{
height: var(--_assets-table-more-h);
border-bottom: 1px solid var(--_assets-table-row-line);
text-align: left;
background: transparent;
}
.assetsTableCard .assetsTableZeroBucketBtn{
width: 100%;
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
padding: 0;
border: 0;
background: transparent;
color: var(--_assets-table-muted);
font-family: "Inter", var(--ct-font-sans);
font-size: 12.4px;
font-weight: 600;
line-height: 1;
letter-spacing: 0;
text-align: left;
cursor: pointer;
}
.assetsTableCard .assetsTableZeroBucketBtn:hover,
.assetsTableCard .assetsTableZeroBucketBtn:focus-visible{
color: var(--_assets-table-strong);
outline: none;
}
.assetsTableCard .assetsTableZeroBucketMain{
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.assetsTableCard .assetsTableZeroBucketTitle{
color: inherit;
font-weight: 600;
white-space: nowrap;
}
.assetsTableCard .assetsTableZeroBucketMeta,
.assetsTableCard .assetsTableZeroBucketWarn{
min-width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 7px;
border-radius: 999px;
font-size: 10.4px;
font-weight: var(--_assets-table-zero-bucket-badge-weight);
line-height: 1;
white-space: nowrap;
}
.assetsTableCard .assetsTableZeroBucketMeta{
background: var(--_assets-table-zero-bucket-badge-bg);
color: var(--_assets-table-muted);
}
.assetsTableCard .assetsTableZeroBucketWarn{
background: var(--_assets-table-zero-bucket-warn-bg);
color: var(--_assets-table-zero-bucket-warn-text);
}
.assetsTableCard .assetsTableZeroBucketChevron{
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 18px;
border-radius: 9px;
background: var(--_assets-table-zero-bucket-chevron-bg);
color: var(--_assets-table-zero-bucket-chevron-text);
font-size: 10px;
font-weight: 800;
line-height: 0;
}
.assetsTableCard #tblAssets .assetsTableZeroChildRow td{
background: transparent;
}
.assetsEmptyState{
min-height: 320px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6.4px;
text-align: center;
color: var(--_assets-table-muted);
font-family: "Inter", var(--ct-font-sans);
}
.assetsEmptyTitle{
color: var(--_assets-table-strong);
font-size: 14.4px;
font-weight: 800;
line-height: 1.25;
}
.assetsEmptyText{
color: var(--_assets-table-muted);
font-size: 11.2px;
font-weight: 700;
line-height: 1.3;
}
@media (max-width: 980px){
.assetsTableFilterRow{
flex-direction: column;
align-items: stretch;
}
.assetsTableActions{
justify-content: flex-start;
}
.assetsTableSearchShell{
width: 100%;
}
}
@media (max-width: 760px){
.assetsTableSummary,
.assetsTableActions{
overflow-x: auto;
scrollbar-width: none;
}
.assetsTableSummary::-webkit-scrollbar,
.assetsTableActions::-webkit-scrollbar{
display: none;
}
}
/* === Places table block: assets table visual transfer === */
.placesTableCard{
--_places-table-card-width: 1164.8px;
--_places-table-card-gap: 20.8px;
--_places-table-summary-area-h: 60.8px;
--_places-table-summary-strip-w: 736px;
--_places-table-summary-strip-h: 52.8px;
--_places-table-summary-item-w: 152px;
--_places-table-summary-item-h: 40px;
--_places-table-summary-divider-w: .8px;
--_places-table-summary-divider-h: 27.2px;
--_places-table-summary-gap: 32.2px;
--_places-table-summary-divider: rgba(226,232,240,.78);
--_places-table-summary-label: #7A8594;
--_places-table-summary-value: #18202D;
--_places-table-summary-label-size: 12.8px;
--_places-table-summary-label-weight: 450;
--_places-table-summary-value-size: 21.6px;
--_places-table-summary-value-weight: 400;
--_places-table-actions-gap: 14.4px;
--_places-table-chip-row-h: 46.4px;
--_places-table-chip-h: 40px;
--_places-table-chip-radius: 17.6px;
--_places-table-chip-text: #657180;
--_places-table-chip-text-active: #18202D;
--_places-table-chip-bg-active: linear-gradient(180deg, rgba(255,255,255,.54) 0%, rgba(238,245,255,.36) 100%);
--_places-table-chip-border-active: rgba(220,232,246,.58);
--_places-table-chip-shadow-active: 0 6px 14px #2B5B8A0B;
--_places-table-chip-bg-hover: linear-gradient(180deg, rgba(255,255,255,.46) 0%, rgba(246,247,248,.26) 100%);
--_places-table-chip-border-hover: rgba(226,230,234,.42);
--_places-table-chip-shadow-hover: 0 4px 10px #26304105;
--_places-table-create-w: 168px;
--_places-table-create-h: 44.8px;
--_places-table-create-radius: 18.4px;
--_places-table-create-bg: linear-gradient(180deg, rgba(255,255,255,.54) 0%, rgba(246,247,248,.34) 100%);
--_places-table-create-border: rgba(226,230,234,.58);
--_places-table-create-shadow: 0 6px 14px #26304108;
--_places-table-create-bg-hover: linear-gradient(180deg, rgba(250,250,249,.72) 0%, rgba(240,240,238,.44) 100%);
--_places-table-create-border-hover: transparent;
--_places-table-create-shadow-hover: 0 6px 14px #2630410A;
--_places-table-create-text: #4B5563;
--_places-table-create-icon-bg: rgba(240,242,244,.56);
--_places-table-table-radius: 27.2px;
--_places-table-table-shadow: 0 10px 26px #26304109;
--_places-table-table-w: 780px;
--_places-table-header-h: 51.2px;
--_places-table-row-h: 83.2px;
--_places-table-edge-px: 19.2px;
--_places-table-cell-px: 3.2px;
--_places-table-head-secondary-size: 11.96px;
--_places-table-head-secondary-active-size: 10.12px;
--_places-table-head-value-weight: 473;
--_places-table-head-secondary-weight: 426;
--_places-table-row-secondary-size: 13.57px;
--_places-table-row-secondary-weight: 551;
--_places-table-row-value-size: 15.64px;
--_places-table-row-value-weight: 612;
--_places-table-col-place: 260px;
--_places-table-col-value: 180px;
--_places-table-col-assets: 120px;
--_places-table-col-unrealized: 220px;
--_places-table-head-bg: linear-gradient(180deg, #FCFDFE 0%, #F7F9FB 100%);
--_places-table-head-line: rgba(233,237,242,.72);
--_places-table-head-text: #6F7A88;
--_places-table-head-text-active: #202938;
--_places-table-head-pill-bg: rgba(241,243,245,.62);
--_places-table-head-pill-border: rgba(221,226,232,.62);
--_places-table-head-arrow: #68727E;
--_places-table-row-line: rgba(237,240,244,.72);
--_places-table-strong: #18202D;
--_places-table-value: #18202D;
--_places-table-qty: rgba(32,41,56,.72);
--_places-table-muted: #98A1AC;
--_places-table-good: #3F7B54;
--_places-table-bad: #B76575;
--_places-table-zero: #9AA3AE;
--_places-table-icon-size: 32px;
--_places-table-icon-gap: 11.2px;
width: min(100%, var(--_places-table-card-width));
max-width: 100%;
margin-top: 17.6px;
display: grid;
gap: var(--_places-table-card-gap);
padding: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
font-family: "Inter", var(--ct-font-sans);
box-sizing: border-box;
}
.placesTableHeaderArea{
min-height: var(--_places-table-summary-area-h);
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
.placesTableSummary{
width: min(100%, var(--_places-table-summary-strip-w));
height: var(--_places-table-summary-strip-h);
display: grid;
grid-template-columns:
var(--_places-table-summary-item-w)
var(--_places-table-summary-divider-w)
var(--_places-table-summary-item-w)
var(--_places-table-summary-divider-w)
var(--_places-table-summary-item-w);
align-items: center;
justify-content: center;
column-gap: var(--_places-table-summary-gap);
min-width: 0;
box-sizing: border-box;
overflow-x: auto;
scrollbar-width: none;
}
.placesTableSummary::-webkit-scrollbar{
display: none;
}
.placesTableSummaryItem{
width: var(--_places-table-summary-item-w);
height: var(--_places-table-summary-item-h);
display: grid;
align-content: center;
gap: 4px;
min-width: 0;
padding: 0;
overflow: hidden;
}
.placesTableSummaryDivider{
width: var(--_places-table-summary-divider-w);
height: var(--_places-table-summary-divider-h);
border-radius: 999px;
background: var(--_places-table-summary-divider);
justify-self: center;
}
.placesTableSummaryLabel{
overflow: hidden;
color: var(--_places-table-summary-label);
font-size: var(--_places-table-summary-label-size);
font-weight: var(--_places-table-summary-label-weight);
line-height: 1.15;
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
.placesTableSummaryValue{
overflow: hidden;
color: var(--_places-table-summary-value);
font-size: var(--_places-table-summary-value-size);
font-weight: var(--_places-table-summary-value-weight);
line-height: 1.05;
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
.placesTableFilterRow{
min-height: 62.4px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 24px;
min-width: 0;
}
.placesTableActions{
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--_places-table-actions-gap);
min-width: 0;
}
.placesTypeFilters{
height: var(--_places-table-chip-row-h);
display: flex;
align-items: center;
gap: 6.4px;
padding: 3.2px;
border: 0;
border-radius: 20.8px;
background: transparent;
overflow: hidden;
scrollbar-width: none;
flex: 0 0 auto;
}
.placesTypeFilters::-webkit-scrollbar{
display: none;
}
.placesTypeSelect[hidden]{
display: none;
}
.placesTypeChip{
height: var(--_places-table-chip-h);
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
padding: 0 12px;
border: 1px solid transparent;
border-radius: var(--_places-table-chip-radius);
background: transparent;
color: var(--_places-table-chip-text);
font-family: "Inter", var(--ct-font-sans);
font-size: 12px;
font-weight: 599;
line-height: 1;
letter-spacing: 0;
white-space: nowrap;
cursor: pointer;
box-shadow: none;
transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.placesTypeChip:nth-of-type(1){ width: 68.8px; }
.placesTypeChip:nth-of-type(2){ width: 89.6px; }
.placesTypeChip:nth-of-type(3){ width: 86.4px; }
.placesTypeChip:hover,
.placesTypeChip:focus-visible{
border-color: var(--_places-table-chip-border-hover);
background: var(--_places-table-chip-bg-hover);
color: var(--_places-table-chip-text-active);
box-shadow: var(--_places-table-chip-shadow-hover);
outline: none;
}
.placesTypeChip.is-active{
border-color: var(--_places-table-chip-border-active);
background: var(--_places-table-chip-bg-active);
color: var(--_places-table-chip-text-active);
box-shadow: var(--_places-table-chip-shadow-active);
}
.placesCreateBtn{
width: var(--_places-table-create-w);
height: var(--_places-table-create-h);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6.4px;
flex: 0 0 var(--_places-table-create-w);
padding: 0 11.2px;
border: 1px solid var(--_places-table-create-border);
border-radius: var(--_places-table-create-radius);
background: var(--_places-table-create-bg);
color: var(--_places-table-create-text);
font-family: "Inter", var(--ct-font-sans);
font-size: 12px;
font-weight: 800;
line-height: 1;
letter-spacing: 0;
box-shadow: var(--_places-table-create-shadow);
cursor: pointer;
transition: border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.placesCreateIcon{
width: 17.6px;
height: 17.6px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 17.6px;
border-radius: 8.8px;
background: var(--_places-table-create-icon-bg);
color: #68727E;
font-size: 12px;
font-weight: 800;
line-height: 1;
}
.placesCreateBtn:hover,
.placesCreateBtn:focus-visible{
border-color: var(--_places-table-create-border-hover);
background: var(--_places-table-create-bg-hover);
color: var(--_places-table-create-text);
box-shadow: var(--_places-table-create-shadow-hover);
outline: none;
transform: none;
}
.placesTableArea{
border: 0;
border-radius: var(--_places-table-table-radius);
background: rgba(255,255,255,.25);
box-shadow: var(--_places-table-table-shadow);
overflow: hidden;
min-width: 0;
}
.placesTableWrap{
overflow-x: auto;
overflow-y: auto;
border: 0;
border-radius: inherit;
background: transparent;
isolation: isolate;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.placesTableCard #tblPlaces{
width: 100%;
min-width: var(--_places-table-table-w);
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
background: transparent;
font-family: "Inter", var(--ct-font-sans);
}
.placesTableCard #tblPlaces tbody{
background: transparent;
}
.placesTableCard #tblPlaces .placesColPlace{ width: var(--_places-table-col-place); }
.placesTableCard #tblPlaces .placesColValue{ width: var(--_places-table-col-value); }
.placesTableCard #tblPlaces .placesColAssets{ width: var(--_places-table-col-assets); }
.placesTableCard #tblPlaces .placesColUnrealized{ width: var(--_places-table-col-unrealized); }
.placesTableCard #tblPlaces th,
.placesTableCard #tblPlaces td{
padding: 0 var(--_places-table-cell-px);
text-align: left;
vertical-align: middle;
font-family: "Inter", var(--ct-font-sans);
letter-spacing: 0;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
background: transparent;
}
.placesTableCard #tblPlaces th.right,
.placesTableCard #tblPlaces td.right{
text-align: left;
}
.placesTableCard #tblPlaces thead th{
position: sticky;
top: 0;
z-index: 60;
height: var(--_places-table-header-h);
border-bottom: 1px solid var(--_places-table-head-line);
background: var(--_places-table-head-bg);
color: var(--_places-table-head-text);
font-size: 10.4px;
font-weight: 618;
line-height: 1;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
cursor: default;
box-shadow: none;
background-clip: padding-box;
}
.placesTableCard #tblPlaces thead th:first-child,
.placesTableCard #tblPlaces tbody td:first-child{
padding-left: var(--_places-table-edge-px);
}
.placesTableCard #tblPlaces thead th:last-child,
.placesTableCard #tblPlaces tbody td:last-child{
padding-right: var(--_places-table-edge-px);
}
.placesTableCard #tblPlaces thead th.sortable{
cursor: pointer;
}
.placesTableCard #tblPlaces thead th .sortLabel{
min-height: 22.4px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 2.4px;
padding: 0 8px;
border: 1px solid transparent;
border-radius: 10.4px;
color: inherit;
max-width: 100%;
}
.placesTableCard #tblPlaces thead th.sortable:hover .sortLabel{
color: var(--_places-table-head-text-active);
}
.placesTableCard #tblPlaces thead th .sortLabel:has(.sortMark.active){
border-color: var(--_places-table-head-pill-border);
background: var(--_places-table-head-pill-bg);
color: var(--_places-table-head-text-active);
font-size: 8.8px;
}
.placesTableCard #tblPlaces .sortMark{
display: inline-flex;
align-items: center;
justify-content: center;
width: 8.8px;
color: var(--_places-table-head-arrow);
font-size: 8.8px;
font-weight: 800;
line-height: 1;
letter-spacing: 0;
opacity: 0;
transition: opacity .16s ease;
}
.placesTableCard #tblPlaces .sortMark.active{
opacity: 1;
}
.placesTableCard #tblPlaces thead th.sortable:hover .sortMark:not(.active){
opacity: .45;
}
.placesTableCard #tblPlaces thead th:not(:first-child){
font-size: var(--_places-table-head-secondary-size);
font-weight: var(--_places-table-head-value-weight);
}
.placesTableCard #tblPlaces thead th:not(:first-child) .sortLabel:has(.sortMark.active){
font-size: var(--_places-table-head-secondary-active-size);
font-weight: var(--_places-table-head-value-weight);
}
.placesTableCard #tblPlaces thead th:nth-child(n+3){
font-weight: var(--_places-table-head-secondary-weight);
}
.placesTableCard #tblPlaces thead th:nth-child(n+3) .sortLabel:has(.sortMark.active){
font-weight: var(--_places-table-head-secondary-weight);
}
.placesTableCard #tblPlaces tbody tr{
height: var(--_places-table-row-h);
}
.placesTableCard #tblPlaces tbody td{
height: var(--_places-table-row-h);
border-bottom: 1px solid var(--_places-table-row-line);
background: transparent;
color: var(--_places-table-muted);
line-height: 1.2;
white-space: nowrap;
}
.placesTableCard #tblPlaces tbody tr:hover td{
background: rgba(251,252,253,.24);
}
.placesTableCard #tblPlaces tbody td:not(:first-child){
font-size: var(--_places-table-row-secondary-size);
font-weight: var(--_places-table-row-secondary-weight);
}
.placesTableCard #tblPlaces .placeCell{
display: flex;
align-items: center;
gap: var(--_places-table-icon-gap);
min-width: 0;
}
.placesTableCard #tblPlaces .placeIcon{
position: relative;
width: var(--_places-table-icon-size);
height: var(--_places-table-icon-size);
flex: 0 0 var(--_places-table-icon-size);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 16px;
overflow: hidden;
background: rgba(234,244,255,.62);
color: #68727E;
font-family: "Inter", var(--ct-font-sans);
font-size: 12px;
font-weight: 800;
line-height: 1;
letter-spacing: 0;
box-shadow: none;
}
.placesTableCard #tblPlaces .placeIcon img,
.placesTableCard #tblPlaces .placeIcon svg{
width: 100%;
height: 100%;
display: block;
object-fit: contain;
background: transparent;
border-radius: inherit;
transform-origin: center;
}
.placesTableCard #tblPlaces .placeIcon-exchange img{
transform: scale(1.12);
}
.placesTableCard #tblPlaces .placeIcon[data-provider]{
background: transparent;
}
.placesTableCard #tblPlaces .placeIcon-exchange[data-provider] img{
transform: none;
}
.placesTableCard #tblPlaces .placeIcon img + .placeIconFallback{
display: none;
}
.placesTableCard #tblPlaces .placeIconFallback{
position: absolute;
inset: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.placesTableCard #tblPlaces .placeIcon-exchange .placeIconFallback,
.placesTableCard #tblPlaces .placeIcon-wallet .placeIconFallback,
.placesTableCard #tblPlaces .placeIcon-unknown .placeIconFallback,
.placesTableCard #tblPlaces .placeIcon-other .placeIconFallback{
background: rgba(234,244,255,.62);
color: #68727E;
}
.placesTableCard #tblPlaces .placeCellText{
display: grid;
gap: 4px;
min-width: 0;
}
.placesTableCard #tblPlaces .placeName{
display: block;
max-width: 100%;
overflow: hidden;
color: var(--_places-table-strong);
font-size: 13.2px;
font-weight: 800;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.placesTableCard #tblPlaces td:nth-child(2){
color: var(--_places-table-value);
font-size: var(--_places-table-row-value-size);
font-weight: var(--_places-table-row-value-weight);
}
.placesTableCard #tblPlaces td:nth-child(3){
color: var(--_places-table-qty);
}
.placesTableCard #tblPlaces tbody td:nth-child(4){
color: var(--_places-table-zero);
font-size: var(--_places-table-row-secondary-size);
font-weight: var(--_places-table-row-secondary-weight);
}
.placesTableCard #tblPlaces tbody td:nth-child(4) .good,
.placesTableCard #tblPlaces tbody td:nth-child(4) .bad{
font-weight: inherit;
}
.placesTableCard #tblPlaces td .good{
color: var(--_places-table-good);
}
.placesTableCard #tblPlaces td .bad{
color: var(--_places-table-bad);
}
.placesTableCard #tblPlaces td:nth-child(4) .good::before{
content: "\25B2 +";
}
.placesTableCard #tblPlaces td:nth-child(4) .bad::before{
content: "\25BC ";
}
.placesTableCard #tblPlaces td.right .small{
display: none;
}
.placesTableCard #tblPlaces td:first-child .tag.tag-warn{
width: max-content;
max-width: 96px;
margin-left: 0;
padding: 1.6px 4px;
border-color: rgba(255,176,32,.4);
background: rgba(255,176,32,.14);
color: #946718;
font-size: 6.6px;
font-weight: 600;
line-height: 1.1;
white-space: normal;
}
.placesTableCard #tblPlaces .placesZeroGroupRow td{
height: 56px;
border-bottom: 1px solid var(--_places-table-row-line);
color: var(--_places-table-muted);
}
.placesTableCard #tblPlaces .placesZeroToggle{
width: 100%;
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
padding: 0;
border: 0;
background: transparent;
color: var(--_places-table-muted);
font-family: "Inter", var(--ct-font-sans);
font-size: 12.4px;
font-weight: 600;
line-height: 1;
letter-spacing: 0;
text-align: left;
cursor: pointer;
}
.placesTableCard #tblPlaces .placesZeroToggle:hover,
.placesTableCard #tblPlaces .placesZeroToggle:focus-visible{
color: var(--_places-table-strong);
outline: none;
}
.placesTableCard #tblPlaces .placesZeroToggleCount{
min-width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 7px;
border-radius: 999px;
background: rgba(241,243,245,.72);
color: var(--_places-table-muted);
font-size: 10.4px;
font-weight: 800;
line-height: 1;
}
.placesTableCard #tblPlaces .placesZeroToggleChevron{
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background: rgba(241,243,245,.72);
color: #8A94A3;
font-size: 10px;
font-weight: 800;
line-height: 0;
}
.placesTableCard #tblPlaces .placesZeroBalanceRow .placeName{
color: color-mix(in srgb, var(--_places-table-strong) 74%, var(--_places-table-muted));
}
.placesTableCard #tblPlaces .placesZeroBalanceRow td:nth-child(2),
.placesTableCard #tblPlaces .placesZeroBalanceRow td:nth-child(3),
.placesTableCard #tblPlaces .placesZeroBalanceRow td:nth-child(4){
color: var(--_places-table-zero);
}
.placesEmptyState{
min-height: 320px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6.4px;
text-align: center;
color: var(--_places-table-muted);
font-family: "Inter", var(--ct-font-sans);
}
.placesEmptyTitle{
color: var(--_places-table-strong);
font-size: 14.4px;
font-weight: 800;
line-height: 1.25;
}
.placesEmptyText{
color: var(--_places-table-muted);
font-size: 11.2px;
font-weight: 700;
line-height: 1.3;
}
@media (max-width: 980px){
.placesTableFilterRow{
flex-direction: column;
align-items: stretch;
}
.placesTableActions{
justify-content: flex-start;
}
}
@media (max-width: 760px){
.placesTableActions{
overflow-x: auto;
scrollbar-width: none;
}
.placesTableActions::-webkit-scrollbar{
display: none;
}
}
/* === Transactions table block (Pencil transfer, scaled to 70%) === */
.txHistoryCard{
--_tx-section-gap: 12.5px;
--_tx-header-gap: 17.8px;
--_tx-head-gap: var(--_tx-header-gap);
--_tx-summary-area-h: 60.8px;
--_tx-summary-strip-w: 736px;
--_tx-summary-strip-h: 52.8px;
--_tx-summary-item-w: 152px;
--_tx-summary-item-h: 40px;
--_tx-summary-divider-w: .8px;
--_tx-summary-divider-h: 27.2px;
--_tx-summary-gap: 32.2px;
--_tx-summary-divider: rgba(226,232,240,.78);
--_tx-summary-label: #7A8594;
--_tx-summary-label-size: 12.8px;
--_tx-summary-label-weight: 450;
--_tx-summary-value: #18202D;
--_tx-summary-value-size: 21.6px;
--_tx-summary-value-weight: 400;
--_tx-summary-tax-prefix: color-mix(in srgb, var(--_tx-summary-value) 80%, white 20%);
--_tx-summary-tax-prefix-size: 17.2px;
--_tx-filters-bg: transparent;
--_tx-filters-border: transparent;
--_tx-filters-radius: 0;
--_tx-filters-pad-y: 0;
--_tx-filters-pad-x: 0;
--_tx-filters-gap: 14.6px;
--_tx-filter-text: #344050;
--_tx-filter-font-size: 11.25px;
--_tx-filter-font-weight: 475;
--_tx-filters-shadow: none;
--_tx-filter-control-bg: #F9FAFB;
--_tx-filter-control-border: #E8E8E8;
--_tx-filter-control-border-strong: #E8E8E8;
--_tx-filter-control-radius: 10px;
--_tx-filter-control-height: 32.4px;
--_tx-filter-control-px: 12px;
--_tx-filter-control-shadow: none;
--_tx-filter-control-shadow-active: none;
--_tx-filter-row-width: 650px;
--_tx-filter-row-height: 43.2px;
--_tx-filter-picker-gap: 9.6px;
--_tx-filter-picker-inner-gap: 6px;
--_tx-filter-picker-height: 33.6px;
--_tx-filter-picker-radius: 14.4px;
--_tx-filter-picker-text: #657180;
--_tx-filter-picker-muted: #A1AAB5;
--_tx-filter-picker-reset-text: color-mix(in srgb, var(--_tx-filter-picker-muted) 75%, var(--_tx-filter-picker-text) 25%);
--_tx-filter-picker-reset-bg: rgba(241, 243, 245, .22);
--_tx-filter-picker-reset-border: rgba(221, 226, 232, .26);
--_tx-filter-picker-reset-shadow: 0 4px 10px rgba(38, 48, 65, .025);
--_tx-filter-picker-size: 12px;
--_tx-filter-picker-weight: 640;
--_tx-filter-picker-reset-size: 10.4px;
--_tx-filter-picker-reset-weight: 560;
--_tx-filter-picker-chevron-size: 11.2px;
--_tx-filter-picker-width: 140px;
--_tx-filter-picker-reset-width: 51.2px;
--_tx-filter-picker-reset-height: 30.2px;
--_tx-date-row-border: #ECEFF3;
--_tx-date-row-radius: 12.8px;
--_tx-date-row-pad-y: 0;
--_tx-date-row-pad-x: 12.8px;
--_tx-date-row-width: 352px;
--_tx-date-row-height: 40.2px;
--_tx-date-row-gap: 11.2px;
--_tx-date-row-bg: linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(248,249,250,.22) 100%);
--_tx-date-row-shadow: 0 6.4px 14.4px #26304108;
--_tx-date-label-text: #828B96;
--_tx-date-divider: #E7EBF0;
--_tx-date-input-bg: transparent;
--_tx-date-input-border: transparent;
--_tx-date-input-radius: 0;
--_tx-date-input-min-width: 80px;
--_tx-date-text: #3F4A59;
--_tx-date-icon: #7A8594;
--_tx-date-dash: #AEB6C0;
--_tx-date-icon-shell-bg: #F4F5F7;
--_tx-date-icon-shell-size: 24px;
--_tx-date-label-size: 10.4px;
--_tx-date-text-size: 12px;
--_tx-date-label-weight: 640;
--_tx-date-weight: 560;
--_tx-date-icon-offset: 16px;
--_tx-reset-btn-text: #4B5563;
--_tx-reset-btn-border: #E8E8E8;
--_tx-reset-btn-bg: #F9FAFB;
--_tx-reset-btn-icon: #A5ACB7;
--_tx-filter-dd-trigger-open-border: var(--_tx-filter-control-border-strong);
--_tx-filter-dd-menu-border: rgba(226, 227, 225, .92);
--_tx-filter-dd-menu-radius: 12px;
--_tx-filter-dd-menu-bg: rgba(255,255,255,.985);
--_tx-filter-dd-menu-shadow: 0 20px 40px rgba(15, 23, 42, .06);
--_tx-filter-dd-menu-pad: 6px;
--_tx-filter-dd-menu-offset-y: -2px;
--_tx-filter-dd-option-radius: 8px;
--_tx-filter-dd-option-pad-y: 7px;
--_tx-filter-dd-option-pad-x: 10px;
--_tx-filter-dd-option-size: 10.8px;
--_tx-filter-dd-option-weight: 475;
--_tx-filter-dd-option-text: #4D5663;
--_tx-filter-dd-option-selected-bg: #FAFAFB;
--_tx-filter-dd-option-selected-text: #162033;
--_tx-filter-dd-option-selected-stroke: inset 0 0 0 1px rgba(228, 230, 231, .9);
--_tx-filter-dd-option-hover-bg: #F7F7F6;
--_tx-filter-dd-option-hover-text: #162033;
--_tx-date-popover-border: #EEF3F8;
--_tx-date-popover-radius: 12px;
--_tx-date-popover-shadow: 0 6px 14px rgba(15, 23, 42, .05);
--_tx-date-panel-border: #EDF2F8;
--_tx-date-panel-radius: 10px;
--_tx-date-panel-bg: #FFFFFF;
--_tx-date-panel-shadow: none;
--_tx-date-quiet-bg: #F9FBFE;
--_tx-date-quiet-border: #E2E8F1;
--_tx-date-quiet-text: #5C687C;
--_tx-date-hover-bg: #EDF5FF;
--_tx-date-hover-text: #2D9AEB;
--_tx-date-selected-bg: color-mix(in srgb, #EDF5FF 80%, #FFFFFF 20%);
--_tx-date-selected-text: #2D8DD9;
--_tx-date-selected-stroke: inset 0 0 0 1px rgba(173, 205, 238, .42);
--_tx-date-today-bg: #F8FBFF;
--_tx-date-today-text: #475569;
--_tx-date-today-stroke: inset 0 0 0 1px rgba(151, 176, 208, .5);
--_tx-date-label: #334155;
--_tx-date-subtle: #8693A6;
--_tx-table-shell-bg: rgba(255,255,255,.25);
--_tx-table-bg: transparent;
--_tx-table-border: transparent;
--_tx-table-radius: 27.2px;
--_tx-table-shadow: 0 10px 26px #26304109;
--_tx-table-min-w: 1078.4px;
--_tx-head-bg: linear-gradient(180deg, #FCFDFE 0%, #F7F9FB 100%);
--_tx-head-text: #6F7A88;
--_tx-head-text-active: #202938;
--_tx-head-pill-bg: rgba(241,243,245,.62);
--_tx-head-pill-border: rgba(221,226,232,.62);
--_tx-row-bg: transparent;
--_tx-row-text: #526070;
--_tx-row-muted: #98A1AC;
--_tx-row-strong: #18202D;
--_tx-row-hover: rgba(251,252,253,.24);
--_tx-separator-head: rgba(233,237,242,.72);
--_tx-separator-row: rgba(237,240,244,.72);
--_tx-sort: #68727E;
--_tx-sort-active: #202938;
--_tx-tag-bg: rgba(241,243,245,.62);
--_tx-tag-border: rgba(221,226,232,.62);
--_tx-tag-text: #657180;
--_tx-icon: #8A92A0;
--_tx-icon-hover: #273348;
--_tx-icon-danger: #B45364;
--_tx-icon-shell-border: #E6E6E3;
--_tx-icon-shell-hover-border: #DADAD7;
--_tx-icon-shell-bg: #FAFAF9;
--_tx-icon-shell-bg-hover: #F3F3F1;
--_tx-icon-shell-danger-border: #F0D9DE;
--_tx-icon-shell-danger-bg: #FFF7F8;
--_tx-action-gap: 10px;
--_tx-action-pad-x: 0;
--_tx-action-size: 14px;
--_tx-action-hit-size: 30px;
--_tx-action-hit-col-width: 52px;
--_tx-action-stroke-width: 2;
--_tx-asset-icon-size: 32px;
--_tx-asset-icon-gap: 11.2px;
--_tx-asset-icon-bg: rgba(234,244,255,.62);
--_tx-asset-icon-text: #68727E;
--_tx-asset-icon-shadow: none;
--_tx-head-py: 0;
--_tx-head-px: 3.2px;
--_tx-row-py: 0;
--_tx-row-px: 3.2px;
--_tx-edge-px: 19.2px;
--_tx-col-gap-strong: 18px;
--_tx-col-gap-soft: 12px;
--_tx-head-font-size: 10.4px;
--_tx-row-font-size: 11.8px;
--_tx-head-secondary-size: 11.96px;
--_tx-head-secondary-active-size: 10.12px;
--_tx-head-secondary-weight: 426;
--_tx-row-secondary-size: 13.57px;
--_tx-row-secondary-weight: 551;
--_tx-head-height: 51.2px;
--_tx-row-height: 83.2px;
--_tx-sort-size: 8.8px;
--_tx-sort-gap: 2.4px;
--_tx-badge-font-size: 9.6px;
--_tx-tax-filter-width: var(--_tx-filter-picker-width);
--_tx-tax-col-width: 146px;
--_tx-tax-badge-width: 136px;
--_tx-tax-badge-pad-x: 12px;
--_tx-tax-border: rgba(228, 228, 225, .92);
--_tx-tax-bg: #F7F7F6;
--_tx-tax-text: #687180;
--_tx-tax-pending-bg: #EEF5FD;
--_tx-tax-pending-border: #D8E6F6;
--_tx-tax-pending-text: #5F7995;
--_tx-tax-approved-bg: #F2F7F3;
--_tx-tax-approved-border: #DDE8E0;
--_tx-tax-approved-text: #557261;
--_tx-tax-rejected-bg: #FAF6F7;
--_tx-tax-rejected-border: #ECDCE0;
--_tx-tax-rejected-text: #90707A;
--_tx-empty-bg: linear-gradient(180deg, rgba(251,251,250,.98) 0%, rgba(247,247,246,.96) 100%);
--_tx-empty-border: rgba(226, 227, 225, .88);
--_tx-empty-radius: 15px;
--_tx-empty-gap: 12px;
--_tx-empty-pad: 40px;
--_tx-empty-title-color: #111827;
--_tx-empty-title-size: 16px;
--_tx-empty-title-weight: 600;
--_tx-empty-text-color: #757C89;
--_tx-empty-text-size: 13px;
--_tx-empty-note-size: 12px;
--_tx-pager-bg: linear-gradient(180deg, rgba(250,250,250,.9) 0%, rgba(248,248,247,.96) 100%);
--_tx-pager-divider: var(--_tx-separator-head);
--_tx-pager-gap: 14px;
--_tx-pager-pad-y: 12px;
--_tx-pager-pad-x: var(--_tx-edge-px);
--_tx-pager-text: var(--_tx-head-text);
--_tx-pager-strong: #202936;
--_tx-pager-label-size: 11.2px;
--_tx-pager-label-weight: 560;
--_tx-pager-label-spacing: 0;
--_tx-pager-value-size: 12.4px;
--_tx-pager-value-weight: 650;
--_tx-pager-size-label-size: 11.2px;
--_tx-pager-control-height: 28px;
--_tx-pager-control-radius: 10px;
--_tx-pager-control-bg: rgba(255,255,255,.54);
--_tx-pager-control-border: rgba(222, 224, 224, .82);
--_tx-pager-control-hover-bg: rgba(255,255,255,.82);
--_tx-pager-control-hover-border: #D7D9D8;
--_tx-pager-control-disabled-text: #A5ACB7;
--_tx-pager-control-disabled-bg: rgba(250,250,250,.42);
--_tx-pager-select-width: 29px;
--_tx-col-time: 154px;
--_tx-col-type: 96px;
--_tx-col-asset: 130px;
--_tx-col-amount: 104px;
--_tx-col-place: 226px;
--_tx-col-total: 132px;
--_tx-col-tax: 146px;
--_tx-col-actions: 90px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
display: grid;
gap: var(--_tx-section-gap);
margin-top: 22px;
font-family: "Inter", var(--ct-font-sans);
}
.txHistoryCard.card{
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.txHistoryCard > .txHistoryCardInner{
padding: 0;
display: grid;
gap: var(--_tx-section-gap);
}
.txHistoryCard .txHistoryHead{
display: grid;
gap: var(--_tx-head-gap);
}
.txHistoryCard .txHistoryHeaderArea{
min-height: var(--_tx-summary-area-h);
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
.txHistoryCard .txHistorySummary{
width: min(100%, var(--_tx-summary-strip-w));
height: var(--_tx-summary-strip-h);
display: grid;
grid-template-columns:
var(--_tx-summary-item-w)
var(--_tx-summary-divider-w)
var(--_tx-summary-item-w)
var(--_tx-summary-divider-w)
var(--_tx-summary-item-w);
align-items: center;
justify-content: center;
column-gap: var(--_tx-summary-gap);
box-sizing: border-box;
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
}
.txHistoryCard .txHistorySummary::-webkit-scrollbar{
display: none;
}
.txHistoryCard .txHistorySummaryItem{
width: var(--_tx-summary-item-w);
height: var(--_tx-summary-item-h);
display: grid;
align-content: center;
gap: 4px;
min-width: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
.txHistoryCard .txHistorySummaryDivider{
width: var(--_tx-summary-divider-w);
height: var(--_tx-summary-divider-h);
border-radius: 999px;
background: var(--_tx-summary-divider);
justify-self: center;
}
.txHistoryCard .txHistorySummaryLabel{
overflow: hidden;
color: var(--_tx-summary-label);
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_tx-summary-label-size);
font-weight: var(--_tx-summary-label-weight);
line-height: 1.15;
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
.txHistoryCard .txHistorySummaryValue{
overflow: hidden;
color: var(--_tx-summary-value);
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_tx-summary-value-size);
font-weight: var(--_tx-summary-value-weight);
line-height: 1.04;
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
.txHistoryCard .txHistorySummaryTaxPrefix{
color: var(--_tx-summary-tax-prefix);
font-size: var(--_tx-summary-tax-prefix-size);
}
.txHistoryCard .txFiltersShell{
display: flex;
align-items: center;
align-self: flex-start;
flex-wrap: wrap;
gap: var(--_tx-filters-gap);
padding: var(--_tx-filters-pad-y) var(--_tx-filters-pad-x);
border: 0;
border-radius: var(--_tx-filters-radius);
background: var(--_tx-filters-bg);
box-shadow: var(--_tx-filters-shadow);
overflow: auto;
min-width: 0;
}
.txHistoryCard .txDatePair{
display: inline-flex;
align-items: center;
gap: var(--_tx-date-row-gap);
width: var(--_tx-date-row-width);
min-width: var(--_tx-date-row-width);
height: var(--_tx-date-row-height);
min-height: var(--_tx-date-row-height);
box-sizing: border-box;
padding: var(--_tx-date-row-pad-y) var(--_tx-date-row-pad-x);
border: 1px solid var(--_tx-date-row-border);
border-radius: var(--_tx-date-row-radius);
background: var(--_tx-date-row-bg);
box-shadow: var(--_tx-date-row-shadow);
flex: 0 0 auto;
}
.txHistoryCard .txDatePairLabel{
color: var(--_tx-date-label-text);
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_tx-date-label-size);
font-weight: var(--_tx-date-label-weight);
line-height: 1.2;
white-space: nowrap;
}
.txHistoryCard .txDatePairDivider{
width: 1px;
height: 17.6px;
flex: 0 0 1px;
background: var(--_tx-date-divider);
}
.txHistoryCard .txHistoryDatePicker{
position: relative;
width: var(--_tx-date-input-min-width);
flex: 0 0 auto;
}
.txHistoryCard #txHistoryDateToPicker{
width: calc(var(--_tx-date-input-min-width) + var(--_tx-date-icon-shell-size) + var(--_tx-date-icon-offset));
}
.txHistoryCard .txDateSep{
color: var(--_tx-date-dash);
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_tx-date-text-size);
font-weight: 800;
line-height: 1;
flex: 0 0 auto;
}
.txHistoryCard .txFilterField{
width: auto;
min-height: var(--_tx-filter-control-height);
padding: 0 var(--_tx-filter-control-px);
border: 1px solid var(--_tx-filter-control-border);
border-radius: var(--_tx-filter-control-radius);
background: var(--_tx-filter-control-bg);
color: var(--_tx-filter-text);
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_tx-filter-font-size);
font-weight: var(--_tx-filter-font-weight);
line-height: 1.2;
box-shadow: var(--_tx-filter-control-shadow);
transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.txHistoryCard .txDateField{
min-width: 0;
background: var(--_tx-date-input-bg);
border-color: var(--_tx-date-input-border);
border-radius: var(--_tx-date-input-radius);
color: var(--_tx-date-text);
padding: 0;
}
.txHistoryCard #txDateFrom,
.txHistoryCard #txDateTo{
display: none;
}
.txHistoryCard #txSideFilter{ min-width: 119.6px; }
.txHistoryCard #txAssetFilter{ min-width: 126.5px; }
.txHistoryCard #txPlaceFilter{ min-width: 135.7px; }
.txHistoryCard #txTaxFilter{ min-width: var(--_tx-tax-filter-width); }
.txHistoryCard #txDateFrom,
.txHistoryCard #txDateTo,
.txHistoryCard #txHistoryDateFromDisplayInput,
.txHistoryCard #txHistoryDateToDisplayInput,
.txHistoryCard #txSideFilter,
.txHistoryCard #txAssetFilter,
.txHistoryCard #txPlaceFilter,
.txHistoryCard #txTaxFilter,
.txHistoryCard #btnResetTxFilters{
font-size: var(--_tx-filter-font-size);
}
.txHistoryCard select.txFilterField{
appearance: none;
padding-right: 24px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 11px 11px;
}
.txHistoryCard .txHistoryFilterPicker{
position: relative;
height: var(--_tx-filter-picker-height);
min-height: var(--_tx-filter-picker-height);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--_tx-filter-picker-inner-gap);
flex: 0 0 auto;
}
.txHistoryCard .txHistoryFilterGroup{
width: min(100%, var(--_tx-filter-row-width));
min-height: var(--_tx-filter-row-height);
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: var(--_tx-filter-picker-gap);
flex: 0 0 auto;
min-width: 0;
margin-left: auto;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.txHistoryCard .txHistoryFilterGroup::-webkit-scrollbar{
display: none;
}
.txHistoryCard #txSideFilterPicker{
min-width: var(--_tx-filter-picker-width);
width: var(--_tx-filter-picker-width);
}
.txHistoryCard #txAssetFilterPicker{
min-width: var(--_tx-filter-picker-width);
width: var(--_tx-filter-picker-width);
}
.txHistoryCard #txPlaceFilterPicker{
min-width: var(--_tx-filter-picker-width);
width: var(--_tx-filter-picker-width);
}
.txHistoryCard #txTaxFilterPicker{
min-width: var(--_tx-filter-picker-width);
width: var(--_tx-filter-picker-width);
}
.txHistoryCard .txHistoryFilterPicker > .txDropdownNative{
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
min-width: 0;
max-width: 0;
height: 0;
min-height: 0;
padding: 0;
margin: 0;
border: 0;
inset: 0;
background: transparent;
box-shadow: none;
}
.txHistoryCard :is(#txSideFilterPickerInput, #txAssetFilterPickerInput, #txPlaceFilterPickerInput, #txTaxFilterPickerInput){
position: absolute;
inset: 0;
width: 100%;
height: var(--_tx-filter-picker-height);
min-height: var(--_tx-filter-picker-height);
cursor: pointer;
text-align: center;
padding: 0;
background: transparent;
border: 0;
color: transparent;
font-size: var(--_tx-filter-picker-size);
font-weight: var(--_tx-filter-picker-weight);
line-height: 1.2;
caret-color: transparent;
box-shadow: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.txHistoryCard .txHistoryFilterPicker::before{
content: attr(data-label);
max-width: calc(100% - var(--_tx-filter-picker-chevron-size) - var(--_tx-filter-picker-inner-gap));
display: block;
overflow: hidden;
color: var(--_tx-filter-picker-text);
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_tx-filter-picker-size);
font-weight: var(--_tx-filter-picker-weight);
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
}
.txHistoryCard .txHistoryFilterPicker.assetPicker::after{
position: static;
inset: auto;
width: var(--_tx-filter-picker-chevron-size);
height: var(--_tx-filter-picker-chevron-size);
border: 0;
content: "⌄";
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: var(--_tx-filter-picker-muted);
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_tx-filter-picker-chevron-size);
font-weight: var(--_tx-filter-picker-weight);
line-height: 1;
flex: 0 0 var(--_tx-filter-picker-chevron-size);
transform: translateY(-1px);
opacity: 1;
}
.txHistoryCard .txHistoryFilterPicker.assetPicker.is-open::after{
transform: translateY(-1px);
}
.txHistoryCard [id$='FilterPickerDropdown'].txDropdownMenu{
position: fixed;
top: 0;
left: 0;
right: auto;
z-index: 84;
min-width: 0;
border: 1px solid var(--_tx-filter-dd-menu-border);
border-radius: var(--_tx-filter-dd-menu-radius);
background: var(--_tx-filter-dd-menu-bg);
box-shadow: var(--_tx-filter-dd-menu-shadow);
padding: var(--_tx-filter-dd-menu-pad);
overflow: hidden;
transform: translateY(var(--_tx-filter-dd-menu-offset-y));
padding-bottom: calc(var(--_tx-filter-dd-menu-pad) + 5px);
}
.txHistoryCard .txHistoryFilterPicker.txDropdown.is-open .txDropdownTrigger{
border-color: transparent;
background: transparent;
box-shadow: none;
}
.txHistoryCard .txHistoryFilterPicker .txDropdownTrigger{
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_tx-filter-picker-reset-size);
font-weight: var(--_tx-filter-picker-weight);
line-height: 1.2;
border-radius: var(--_tx-filter-picker-radius);
border-color: transparent;
color: var(--_tx-filter-picker-text);
box-shadow: none;
}
.txHistoryCard .txHistoryFilterPicker .txDropdownOption{
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 0;
height: auto;
border: 0;
border-radius: var(--_tx-filter-dd-option-radius);
padding: var(--_tx-filter-dd-option-pad-y) var(--_tx-filter-dd-option-pad-x);
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_tx-filter-dd-option-size);
font-weight: var(--_tx-filter-dd-option-weight);
line-height: 1.15;
color: var(--_tx-filter-dd-option-text);
background: transparent;
box-shadow: none;
text-align: left;
cursor: pointer;
}
.txHistoryCard .txHistoryFilterPicker .txDropdownOption.is-selected{
background: transparent;
color: var(--_tx-filter-dd-option-text);
box-shadow: none;
}
.txHistoryCard .txHistoryFilterPicker .txDropdownOption:hover,
.txHistoryCard .txHistoryFilterPicker .txDropdownOption:focus-visible{
background: var(--_tx-filter-dd-option-hover-bg);
color: var(--_tx-filter-dd-option-hover-text);
border-color: transparent;
box-shadow: none;
outline: none;
}
.txHistoryCard #btnResetTxFilters.txFilterResetBtn{
width: var(--_tx-filter-picker-reset-width);
min-width: var(--_tx-filter-picker-reset-width);
height: var(--_tx-filter-picker-reset-height);
min-height: var(--_tx-filter-picker-reset-height);
padding: 0;
border: 1px solid var(--_tx-filter-picker-reset-border);
border-radius: var(--_tx-filter-picker-radius);
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_tx-filter-picker-size);
font-weight: var(--_tx-filter-picker-reset-weight);
color: var(--_tx-filter-picker-reset-text);
background: var(--_tx-filter-picker-reset-bg);
box-shadow: var(--_tx-filter-picker-reset-shadow);
opacity: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
}
.txHistoryCard #btnResetTxFilters.txFilterResetBtn svg,
.txHistoryCard #btnResetTxFilters.txFilterResetBtn i{
color: var(--_tx-reset-btn-icon);
}
.txHistoryCard #btnResetTxFilters.txFilterResetBtn:hover,
.txHistoryCard #btnResetTxFilters.txFilterResetBtn:focus-visible{
outline: none;
border-color: transparent;
background: transparent;
color: var(--_tx-filter-picker-text);
box-shadow: none;
}
.txHistoryCard #btnResetTxFilters.txFilterResetBtn:active{
background: transparent;
border-color: transparent;
color: var(--_tx-filter-picker-text);
box-shadow: none;
}
.txHistoryCard .txDateTimeTrigger{
position: relative;
display: flex;
align-items: center;
width: 100%;
min-height: 18px;
height: 18px;
box-sizing: border-box;
overflow: visible;
border-radius: var(--_tx-date-input-radius);
border: 0;
background: var(--_tx-date-input-bg);
box-shadow: none;
}
.txHistoryCard .txDateTimeDisplayInput{
flex: 1 1 auto;
min-width: 0;
border: 0;
background: transparent;
color: var(--_tx-date-text);
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_tx-date-text-size);
font-weight: var(--_tx-date-weight);
line-height: 1.2;
height: 100%;
padding: 0;
text-align: left;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
.txHistoryCard :is(#txHistoryDateFromDisplayInput, #txHistoryDateToDisplayInput){
height: 18px;
min-height: 18px;
color: var(--_tx-date-text);
font-size: var(--_tx-date-text-size);
font-weight: var(--_tx-date-weight);
line-height: 1.2;
}
.txHistoryCard .txDateTimeDisplayInput::placeholder{
color: var(--_tx-date-text);
opacity: 1;
}
.txHistoryCard .txDateTimeDisplayInput:focus{
outline: none;
}
.txHistoryCard .txDateTimeOpenBtn{
flex: 0 0 var(--_tx-date-icon-shell-size);
width: var(--_tx-date-icon-shell-size);
height: var(--_tx-date-icon-shell-size);
min-height: var(--_tx-date-icon-shell-size);
max-height: var(--_tx-date-icon-shell-size);
display: block;
border: 0;
border-radius: 8px;
background-color: var(--_tx-date-icon-shell-bg);
margin: 0;
padding: 0;
cursor: pointer;
opacity: 1;
appearance: none;
-webkit-appearance: none;
background-repeat: no-repeat;
background-position: center;
background-size: 13.6px 13.6px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%237A8594' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E");
}
.txHistoryCard #txHistoryDateFromOpenBtn{
display: none;
}
.txHistoryCard .txDateTimeTrigger:hover,
.txHistoryCard .txDateTimeTrigger:focus-within{
background: var(--_tx-date-input-bg);
box-shadow: none;
}
.txHistoryCard .txHistoryDatePicker.is-open .txDateTimeTrigger{
outline: none;
box-shadow: none;
}
.txHistoryCard .txDateTimeOpenBtn:hover{
background-color: #ECEFF3;
}
.txHistoryCard .txDateTimePopover{
position: fixed;
z-index: 86;
width: 312px;
border: 1px solid var(--_tx-date-popover-border);
border-radius: var(--_tx-date-popover-radius);
background: #FFFFFF;
box-shadow: var(--_tx-date-popover-shadow);
padding: 10px;
box-sizing: border-box;
overflow: visible;
}
.txHistoryCard .txDateTimePopoverInner{
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
align-items: start;
}
.txHistoryCard .txDatePanel{
border: 1px solid var(--_tx-date-panel-border);
border-radius: var(--_tx-date-panel-radius);
background: var(--_tx-date-panel-bg);
box-shadow: var(--_tx-date-panel-shadow);
padding: 10px;
}
.txHistoryCard .txDateHeader{
display: grid;
grid-template-columns: 30px 1fr 30px;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.txHistoryCard .txDateNavBtn{
min-height: 28px;
height: 28px;
border-radius: 8px;
border: 1px solid var(--_tx-date-quiet-border);
background: var(--_tx-date-quiet-bg);
color: var(--_tx-date-quiet-text);
font-size: 15px;
line-height: 1;
padding: 0;
}
.txHistoryCard .txDateMonthLabel{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
text-align: center;
border: 0;
background: transparent;
font-family: "Inter", var(--ct-font-sans);
font-size: 12px;
font-weight: 450;
color: var(--_tx-date-label);
text-transform: capitalize;
cursor: pointer;
min-height: 28px;
height: 28px;
border-radius: 8px;
line-height: 1;
padding: 0 6px;
}
.txHistoryCard .txDateMonthLabel::after{
content: "▾";
font-size: 10px;
line-height: 1;
color: var(--_tx-date-subtle);
opacity: .92;
transform: translateY(1px);
}
.txHistoryCard .txDateMonthLabel:hover,
.txHistoryCard .txDateMonthLabel:focus-visible{
outline: none;
background: var(--_tx-date-hover-bg);
color: var(--_tx-date-hover-text);
}
.txHistoryCard .txDateWeekdays{
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-bottom: 6px;
}
.txHistoryCard .txDateWeekdays span{
text-align: center;
font-family: "Inter", var(--ct-font-sans);
font-size: 10px;
font-weight: 560;
color: var(--_tx-date-subtle);
}
.txHistoryCard .txDateGrid{
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.txHistoryCard .txDateMonthYearPanel{
display: grid;
gap: 10px;
padding-top: 2px;
}
.txHistoryCard .txDateYearGrid,
.txHistoryCard .txDateMonthGrid{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
}
.txHistoryCard .txDateYearBtn,
.txHistoryCard .txDateMonthBtn{
min-height: 28px;
height: 28px;
border-radius: 8px;
border: 0;
background: transparent;
color: var(--_tx-date-quiet-text);
font-family: "Inter", var(--ct-font-sans);
font-size: 11px;
font-weight: 520;
line-height: 1;
padding: 0 6px;
}
.txHistoryCard .txDateYearBtn:hover,
.txHistoryCard .txDateYearBtn:focus-visible,
.txHistoryCard .txDateMonthBtn:hover,
.txHistoryCard .txDateMonthBtn:focus-visible{
outline: none;
background: var(--_tx-date-hover-bg);
color: var(--_tx-date-hover-text);
}
.txHistoryCard .txDateYearBtn.is-selected,
.txHistoryCard .txDateMonthBtn.is-selected{
background: var(--_tx-date-selected-bg);
color: var(--_tx-date-selected-text);
box-shadow: var(--_tx-date-selected-stroke);
}
.txHistoryCard .txDateCell{
min-height: 28px;
height: 28px;
border-radius: 8px;
border: 0;
background: transparent;
color: var(--_tx-date-label);
font-family: "Inter", var(--ct-font-sans);
font-size: 11px;
font-weight: 500;
line-height: 1;
padding: 0;
}
.txHistoryCard .txDateCell:hover,
.txHistoryCard .txDateCell:focus-visible{
outline: none;
background: var(--_tx-date-hover-bg);
color: var(--_tx-date-hover-text);
}
.txHistoryCard .txDateCell.is-outside{
color: color-mix(in srgb, var(--_tx-date-subtle) 78%, white 22%);
}
.txHistoryCard .txDateCell.is-today{
box-shadow: var(--_tx-date-today-stroke);
color: var(--_tx-date-today-text);
background: var(--_tx-date-today-bg);
}
.txHistoryCard .txDateCell.is-selected{
background: var(--_tx-date-selected-bg);
color: var(--_tx-date-selected-text);
box-shadow: var(--_tx-date-selected-stroke);
}
.txHistoryCard .txDateActions{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
margin-top: 10px;
}
.txHistoryCard .txDateActionBtn{
min-height: 28px;
border-radius: 8px;
border: 1px solid var(--_tx-date-quiet-border);
background: var(--_tx-date-quiet-bg);
color: var(--_tx-date-quiet-text);
font-family: "Inter", var(--ct-font-sans);
font-size: 11px;
font-weight: 560;
line-height: 1.1;
padding: 0 9px;
white-space: nowrap;
}
.txHistoryCard .txDateActionBtn:hover,
.txHistoryCard .txDateActionBtn:focus-visible{
outline: none;
border-color: var(--_tx-filter-control-border-strong);
background: var(--_tx-date-hover-bg);
color: var(--_tx-date-hover-text);
}
@media (max-width: 760px){
.txHistoryCard .txHistorySummary{
width: 100%;
justify-content: start;
overflow-x: auto;
}
.txHistoryCard .txFiltersShell{
align-items: stretch;
}
.txHistoryCard .txDatePair{
width: 100%;
}
.txHistoryCard .txHistoryDatePicker{
flex: 1 1 0;
}
.txHistoryCard .txHistoryFilterGroup{
width: 100%;
margin-left: 0;
justify-content: flex-start;
}
.txHistoryCard .txDateTimePopover{
width: min(94vw, 312px);
}
.txHistoryCard .txDateTimePopoverInner{
grid-template-columns: 1fr;
}
}
.txHistoryCard .txHistoryTableShell{
margin-top: 0;
display: grid;
min-width: 0;
border: 0;
border-radius: var(--_tx-table-radius);
background: var(--_tx-table-shell-bg);
overflow: hidden;
background-clip: padding-box;
isolation: isolate;
box-shadow: var(--_tx-table-shadow);
}
.txHistoryCard .txHistoryTableShell.txTableWrap{
overflow: hidden;
}
.txHistoryCard .txHistoryTableShell > .txHistoryTableScroller{
margin: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
overflow-x: auto;
overflow-y: auto;
isolation: isolate;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.txHistoryCard #tblTx{
width: 100%;
min-width: var(--_tx-table-min-w);
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
background: var(--_tx-table-bg);
font-family: "Inter", var(--ct-font-sans);
}
.txHistoryCard #tblTx tbody{
background: transparent;
}
.txHistoryCard #tblTx .txColTime{ width: var(--_tx-col-time); }
.txHistoryCard #tblTx .txColType{ width: var(--_tx-col-type); }
.txHistoryCard #tblTx .txColAsset{ width: var(--_tx-col-asset); }
.txHistoryCard #tblTx .txColAmount{ width: var(--_tx-col-amount); }
.txHistoryCard #tblTx .txColPlace{ width: var(--_tx-col-place); }
.txHistoryCard #tblTx .txColTotal{ width: var(--_tx-col-total); }
.txHistoryCard #tblTx .txColTax{ width: var(--_tx-col-tax); }
.txHistoryCard #tblTx .txColActions{ width: var(--_tx-col-actions); }
.txHistoryCard #tblTx th,
.txHistoryCard #tblTx td{
padding: var(--_tx-row-py) var(--_tx-row-px);
text-align: left;
vertical-align: middle;
font-family: "Inter", var(--ct-font-sans);
letter-spacing: 0;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
background: transparent;
}
.txHistoryCard #tblTx th.right,
.txHistoryCard #tblTx td.right{
text-align: left;
}
.txHistoryCard #tblTx thead th{
position: sticky;
top: 0;
z-index: 60;
height: var(--_tx-head-height);
border-bottom: 1px solid var(--_tx-separator-head);
background: var(--_tx-head-bg);
color: var(--_tx-head-text);
font-size: var(--_tx-head-font-size);
font-weight: 618;
line-height: 1;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
box-shadow: none;
cursor: default;
background-clip: padding-box;
}
.txHistoryCard #tblTx thead th:first-child,
.txHistoryCard #tblTx tbody td:first-child{
padding-left: var(--_tx-edge-px);
}
.txHistoryCard #tblTx thead th:last-child,
.txHistoryCard #tblTx tbody td:last-child{
padding-right: var(--_tx-edge-px);
}
.txHistoryCard #tblTx thead th.sortable{
cursor: pointer;
}
.txHistoryCard #tblTx thead th .sortLabel{
min-height: 22.4px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--_tx-sort-gap);
padding: 0 8px;
border: 1px solid transparent;
border-radius: 10.4px;
color: inherit;
max-width: 100%;
}
.txHistoryCard #tblTx thead th.sortable:hover .sortLabel{
color: var(--_tx-head-text-active);
}
.txHistoryCard #tblTx thead th .sortLabel:has(.sortMark.active){
border-color: var(--_tx-head-pill-border);
background: var(--_tx-head-pill-bg);
color: var(--_tx-head-text-active);
font-size: 8.8px;
}
.txHistoryCard #tblTx .sortMark{
display: inline-flex;
align-items: center;
justify-content: center;
width: 8.8px;
color: var(--_tx-sort);
font-size: var(--_tx-sort-size);
font-weight: 600;
line-height: 1;
letter-spacing: 0;
opacity: 0;
transition: opacity .16s ease;
}
.txHistoryCard #tblTx .sortMark.active{
opacity: 1;
}
.txHistoryCard #tblTx thead th.sortable:hover .sortMark:not(.active){
opacity: .45;
}
.txHistoryCard #tblTx thead th:not(:nth-child(3)){
font-size: var(--_tx-head-secondary-size);
font-weight: var(--_tx-head-secondary-weight);
}
.txHistoryCard #tblTx thead th:not(:nth-child(3)) .sortLabel:has(.sortMark.active){
font-size: var(--_tx-head-secondary-active-size);
font-weight: var(--_tx-head-secondary-weight);
}
.txHistoryCard #tblTx tbody tr{
height: var(--_tx-row-height);
cursor: pointer;
}
.txHistoryCard #tblTx tbody td{
height: var(--_tx-row-height);
border-bottom: 1px solid var(--_tx-separator-row);
color: var(--_tx-row-text);
font-size: var(--_tx-row-font-size);
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
}
.txHistoryCard #tblTx tbody tr:hover td{
background: var(--_tx-row-hover);
}
/* Main page shared table-shell contract (assets / places / tx):
shell owns corner geometry; table layers stay rectangular. */
.placesTableCard #tblPlaces tbody,
.txHistoryCard #tblTx tbody{
background: transparent;
}
.placesTableCard #tblPlaces thead th:first-child,
.txHistoryCard #tblTx thead th:first-child{
border-top-left-radius: 0;
}
.placesTableCard #tblPlaces thead th:last-child,
.txHistoryCard #tblTx thead th:last-child{
border-top-right-radius: 0;
}
.placesTableCard #tblPlaces tbody tr:last-child td:first-child,
.txHistoryCard #tblTx tbody tr:last-child td:first-child{
border-bottom-left-radius: 0;
}
.placesTableCard #tblPlaces tbody tr:last-child td:last-child,
.txHistoryCard #tblTx tbody tr:last-child td:last-child{
border-bottom-right-radius: 0;
}
.txHistoryCard #tblTx td:nth-child(1){
color: var(--_tx-row-muted);
font-size: 11.2px;
font-weight: 700;
}
.txHistoryCard #tblTx td:nth-child(2){
white-space: normal;
}
.txHistoryCard #tblTx td:nth-child(2) .tag{
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--_tx-row-muted);
font-size: 12px;
font-weight: 700;
line-height: 1.2;
}
.txHistoryCard #tblTx td:nth-child(2) .tag::before,
.txHistoryCard #tblTx td:nth-child(2) .tag.tag-warn::before{
display: none;
}
.txHistoryCard #tblTx td:nth-child(2) .tag + .tag{
margin-top: 2px;
}
.txHistoryCard #tblTx td:nth-child(2) .tag.tag-warn{
font-size: 9.6px;
font-weight: 700;
}
.txHistoryCard #tblTx td:nth-child(2) .tag.tag-buy{ color: #3F7B54; }
.txHistoryCard #tblTx td:nth-child(2) .tag.tag-sell{ color: #B76575; }
.txHistoryCard #tblTx td:nth-child(2) .tag.tag-transfer{ color: #3E74A8; }
.txHistoryCard #tblTx td:nth-child(3){
color: var(--_tx-row-strong);
font-size: 13.2px;
font-weight: 800;
}
.txHistoryCard #tblTx td.txCellOpenAsset,
.txHistoryCard #tblTx td.txCellOpenPlace{
cursor: pointer;
}
#viewTaxReport #tblTaxReport td.col-type .txTypeStack{
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
line-height: 1.2;
white-space: normal;
}
#viewTaxReport #tblTaxReport td.col-type .txTypeMain{
font-size: var(--_tx-row-font-size);
font-weight: 600;
line-height: 1.2;
}
#viewTaxReport #tblTaxReport td.col-type .txTypeMain{
font-size: var(--_tax-report-table-row-size);
}
#viewTaxReport #tblTaxReport td.col-type .txTypeMain--buy{
color: #2A7B48;
}
#viewTaxReport #tblTaxReport td.col-type .txTypeMain--sell{
color: #C05A2D;
}
#viewTaxReport #tblTaxReport td.col-type .txTypeMain--transfer{
color: #1F84C4;
}
#viewTaxReport #tblTaxReport td.col-type .txTypeMain--neutral{
color: var(--_tx-row-muted);
}
#viewTaxReport #tblTaxReport td.col-type .txTypeSub{
font-weight: 600;
line-height: 1.2;
color: color-mix(in srgb, var(--_tx-row-muted) 85%, #8A94A6 15%);
}
#viewTaxReport #tblTaxReport td.col-type .txTypeSub{
font-size: calc(var(--_tax-report-table-row-size) * 0.76);
}
#viewTaxReport #tblTaxReport td.col-type .txTypeSub--warn{
color: #8a5a00 !important;
}
.txHistoryCard #tblTx .txAssetCell{
display: inline-flex;
align-items: center;
gap: var(--_tx-asset-icon-gap);
max-width: 100%;
min-width: 0;
vertical-align: middle;
}
.txHistoryCard #tblTx .txAssetCell .assetIcon{
width: var(--_tx-asset-icon-size);
height: var(--_tx-asset-icon-size);
flex: 0 0 var(--_tx-asset-icon-size);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: calc(var(--_tx-asset-icon-size) / 2);
overflow: hidden;
background: var(--_tx-asset-icon-bg);
color: var(--_tx-asset-icon-text);
font-family: "Inter", var(--ct-font-sans);
font-size: 12px;
font-weight: 800;
line-height: 1;
letter-spacing: 0;
box-shadow: var(--_tx-asset-icon-shadow);
}
.txHistoryCard #tblTx .txAssetCell .assetIcon.assetIcon--image{
background: transparent;
color: inherit;
}
.txHistoryCard #tblTx .txAssetCell .assetIcon img{
width: 100%;
height: 100%;
display: block;
object-fit: contain;
background: transparent;
border-radius: inherit;
}
.txHistoryCard #tblTx td:nth-child(3) .assetLink{
display: inline-block;
max-width: 72px;
overflow: hidden;
border-bottom: 0;
color: var(--_tx-row-strong);
font-size: 13.2px;
font-weight: 800;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.txHistoryCard #tblTx td:nth-child(5) .tag{
margin-left: 0;
padding: 0 10px;
min-height: 24px;
max-width: 100%;
border-radius: 999px;
background: var(--_tx-tag-bg);
border: 1px solid var(--_tx-tag-border);
color: var(--_tx-tag-text);
font-size: 10.4px;
font-weight: 700;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
box-shadow: none;
}
.txHistoryCard #tblTx td:nth-child(6){
color: var(--_tx-row-strong);
font-size: 11.8px;
font-weight: 800;
}
.txHistoryCard #tblTx tbody td:not(:nth-child(3)):not(.txActionsCell){
font-size: var(--_tx-row-secondary-size);
font-weight: var(--_tx-row-secondary-weight);
}
.txHistoryCard #tblTx td:nth-child(2) .tag,
.txHistoryCard #tblTx td:nth-child(5) .tag{
font-size: var(--_tx-row-secondary-size);
font-weight: var(--_tx-row-secondary-weight);
}
.txHistoryCard #tblTx td:nth-child(5) .tag{
font-size: calc(var(--_tx-row-secondary-size) * .85);
}
.txHistoryCard #tblTx .txTaxCol{
width: var(--_tx-tax-col-width);
min-width: var(--_tx-tax-col-width);
}
.txHistoryCard #tblTx .taxTxBadge{
width: var(--_tx-tax-badge-width);
min-width: var(--_tx-tax-badge-width);
max-width: var(--_tx-tax-badge-width);
min-height: 20px;
padding: 0 var(--_tx-tax-badge-pad-x);
box-sizing: border-box;
border-radius: 999px;
font-size: var(--_tx-badge-font-size);
font-weight: 600;
line-height: 1.2;
border: 1px solid var(--_tx-tax-border);
background: var(--_tx-tax-bg);
color: var(--_tx-tax-text);
box-shadow: none;
}
.txHistoryCard #tblTx .taxTxBadge.pending{
border-color: var(--_tx-tax-pending-border);
background: var(--_tx-tax-pending-bg);
color: var(--_tx-tax-pending-text);
}
.txHistoryCard #tblTx .taxTxBadge.approved{
border-color: var(--_tx-tax-approved-border);
background: var(--_tx-tax-approved-bg);
color: var(--_tx-tax-approved-text);
}
.txHistoryCard #tblTx .taxTxBadge.rejected{
border-color: var(--_tx-tax-rejected-border);
background: var(--_tx-tax-rejected-bg);
color: var(--_tx-tax-rejected-text);
}
.txHistoryCard #tblTx td.txActionsCell{
display: table-cell;
text-align: right;
white-space: nowrap;
font-size: 0;
line-height: 0;
padding-left: 8px;
padding-right: 8px;
height: var(--_tx-row-height);
vertical-align: middle;
}
.txHistoryCard #tblTx td.txActionsCell .txIconBtn + .txIconBtn{
margin-left: var(--_tx-action-gap);
}
.txHistoryCard #tblTx .txIconBtn{
width: var(--_tx-action-hit-size);
height: var(--_tx-action-hit-size);
min-width: var(--_tx-action-hit-size);
min-height: var(--_tx-action-hit-size);
padding: 0;
border: 1px solid transparent;
border-radius: 10px;
background: transparent;
box-shadow: none;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--_tx-icon);
opacity: .72;
transition: opacity .16s ease, color .16s ease, background-color .16s ease, border-color .16s ease;
}
.txHistoryCard #tblTx .txIconBtn.danger{
color: var(--_tx-icon);
}
.txHistoryCard #tblTx .txIconBtn svg{
width: var(--_tx-action-size);
height: var(--_tx-action-size);
display: block;
stroke: currentColor;
fill: none;
stroke-width: var(--_tx-action-stroke-width);
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.txHistoryCard #tblTx .txIconBtn:hover{
opacity: 1;
color: var(--_tx-icon-hover);
border-color: var(--_tx-icon-shell-hover-border);
background: var(--_tx-icon-shell-bg-hover);
transform: none;
}
.txHistoryCard #tblTx tbody tr:hover .txIconBtn{
opacity: 1;
border-color: var(--_tx-icon-shell-border);
background: var(--_tx-icon-shell-bg);
}
.txHistoryCard #tblTx .txIconBtn.danger:hover{
color: var(--_tx-icon-danger);
border-color: var(--_tx-icon-shell-danger-border);
background: var(--_tx-icon-shell-danger-bg);
}
.txHistoryCard .txHistoryPager{
margin-top: 0;
min-height: var(--_tx-head-height);
padding: var(--_tx-pager-pad-y) var(--_tx-pager-pad-x);
border: 0;
border-top: 1px solid var(--_tx-pager-divider);
border-radius: 0;
background: var(--_tx-head-bg);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--_tx-pager-gap);
}
.txHistoryCard .txHistoryPagerMeta{
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
}
.txHistoryCard .txHistoryPagerRange,
.txHistoryCard .txHistoryPagerStatus{
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
height: var(--_tx-pager-control-height);
}
.txHistoryCard .txHistoryPagerStatus::before{
content: "";
flex: 0 0 auto;
width: 3px;
height: 3px;
margin: 0 2px;
border-radius: 999px;
background: color-mix(in srgb, var(--_tx-pager-text) 56%, transparent);
}
.txHistoryCard .txHistoryPagerMetaLabel,
.txHistoryCard .txHistoryPagerMetaValue,
.txHistoryCard .txHistoryPagerSizeLabel{
display: inline-flex;
align-items: center;
height: var(--_tx-pager-control-height);
font-family: "Inter", var(--ct-font-sans);
line-height: 1;
white-space: nowrap;
}
.txHistoryCard .txHistoryPagerMetaLabel{
font-size: var(--_tx-pager-label-size);
font-weight: var(--_tx-pager-label-weight);
letter-spacing: var(--_tx-pager-label-spacing);
text-transform: none;
color: var(--_tx-pager-text);
}
.txHistoryCard .txHistoryPagerMetaValue{
font-size: var(--_tx-pager-value-size);
font-weight: var(--_tx-pager-value-weight);
color: var(--_tx-pager-strong);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.txHistoryCard .txHistoryPagerStatus .txHistoryPagerMetaValue{
color: color-mix(in srgb, var(--_tx-pager-strong) 72%, var(--_tx-pager-text) 28%);
font-weight: 560;
}
.txHistoryCard .txHistoryPagerControls{
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
min-height: var(--_tx-pager-control-height);
}
.txHistoryCard .txHistoryPagerSize{
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
height: var(--_tx-pager-control-height);
}
.txHistoryCard .txHistoryPagerSizeLabel{
font-size: var(--_tx-pager-size-label-size);
font-weight: 560;
color: var(--_tx-pager-text);
letter-spacing: 0;
text-transform: none;
}
.txHistoryCard .txHistoryPagerSizeSelect{
width: var(--_tx-pager-select-width);
min-width: var(--_tx-pager-select-width);
height: var(--_tx-pager-control-height);
padding: 0 9px 0 0;
border: 0;
border-radius: 0;
background-color: transparent;
color: var(--_tx-pager-strong);
font-family: "Inter", var(--ct-font-sans);
font-size: 12px;
font-weight: 600;
line-height: normal;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2397A0AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right center;
background-size: 9px 9px;
box-shadow: none;
cursor: pointer;
}
.txHistoryCard .txHistoryPagerSizeSelect:hover,
.txHistoryCard .txHistoryPagerSizeSelect:focus-visible{
outline: none;
background-color: transparent;
color: var(--_tx-pager-strong);
box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--_tx-pager-text) 34%, transparent);
}
.txHistoryCard .txHistoryPagerNav{
display: inline-flex;
align-items: center;
height: var(--_tx-pager-control-height);
gap: 6px;
}
.txHistoryCard .txHistoryPagerBtn{
width: var(--_tx-pager-control-height);
height: var(--_tx-pager-control-height);
min-height: var(--_tx-pager-control-height);
padding: 0;
border-radius: var(--_tx-pager-control-radius);
border: 0;
background: transparent;
color: var(--_tx-pager-strong);
font-size: 0;
line-height: 0;
box-shadow: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
.txHistoryCard .txHistoryPagerBtn svg{
display: block;
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.txHistoryCard .txHistoryPagerBtn:hover,
.txHistoryCard .txHistoryPagerBtn:focus-visible{
outline: none;
border-color: transparent;
background: transparent;
color: var(--_tx-pager-strong);
box-shadow: none;
transform: none;
}
.txHistoryCard .txHistoryPagerBtn:disabled{
border-color: transparent;
background: transparent;
color: var(--_tx-pager-control-disabled-text);
cursor: default;
opacity: .72;
}
@media (max-width: 760px){
.txHistoryCard .txHistoryPager{
align-items: stretch;
flex-direction: column;
}
.txHistoryCard .txHistoryPagerMeta,
.txHistoryCard .txHistoryPagerControls{
width: 100%;
}
.txHistoryCard .txHistoryPagerControls{
justify-content: space-between;
}
.txHistoryCard .txHistoryPagerSize{
flex: 1 1 auto;
}
.txHistoryCard .txHistoryPagerNav{
width: 100%;
justify-content: flex-end;
}
}
/* === DEBUG BANNER === */
#debugBanner{
position: fixed;
top: 10px;
left: 10px;
right: 10px;
z-index: 9999;
display: none;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid rgba(255,77,77,.25);
background: rgba(255,77,77,.10);
color: rgba(120,20,20,.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 18px 55px rgba(10,12,16,.12);
font-size: 12px;
line-height: 1.35;
}
#debugBanner b{ color: rgba(255,235,235,.98); }
#debugBanner .mono{ font-variant-numeric: tabular-nums; }
#debugBanner .row{
display:flex;
gap:10px;
align-items:flex-start;
justify-content: space-between;
flex-wrap: wrap;
}
#debugBanner .btns{
display:flex;
gap:8px;
align-items:center;
flex: 0 0 auto;
}
#debugBanner .btnDbg{
padding: 6px 10px;
border-radius: 12px;
border: 1px solid rgba(10,12,16,.10);
background: rgba(10,12,16,.06);
color: rgba(10,12,16,.88);
cursor:pointer;
font-weight: 850;
font-size: 12px;
opacity: .92;
}
#debugBanner .btnDbg:hover{ opacity: 1; }
#tblPlaces{
min-width: 780px;
}
/* Tax report table block: custom reuse of main project table language */
#viewTaxReport .taxReportTableBlock{
display: grid;
gap: 10px;
margin-top: 0;
}
#viewTaxReport .taxReportTableWrap{
position: relative;
max-width: 100%;
max-height: min(62vh, 680px);
overflow: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
border: 1px solid var(--_tax-report-table-shell-border);
border-radius: var(--_tax-report-table-shell-radius);
background: var(--_tax-report-table-shell-bg);
background-clip: padding-box;
box-shadow: var(--_tax-report-table-shell-shadow);
isolation: isolate;
}
#viewTaxReport .taxReportTableCaption{
margin-top: 0;
color: var(--_tax-report-table-intro-text);
font-family: "Inter", var(--ct-font-sans);
font-size: 12px;
font-weight: 500;
line-height: 1.35;
}
#viewTaxReport #tblTaxReport{
width: 100%;
min-width: 1338px;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
background: var(--_tax-report-table-bg);
font-family: "Inter", var(--ct-font-sans);
clip-path: inset(0 round var(--_tax-report-table-shell-radius));
}
#viewTaxReport #tblTaxReport thead th,
#viewTaxReport #tblTaxReport tbody td{
padding-left: var(--_tax-report-table-cell-pad-x);
padding-right: var(--_tax-report-table-cell-pad-x);
font-family: "Inter", var(--ct-font-sans);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
letter-spacing: 0;
vertical-align: middle;
background-clip: padding-box;
}
#viewTaxReport #tblTaxReport thead th{
position: sticky;
top: 0;
z-index: 60;
min-height: 34px;
padding-top: 3px;
padding-bottom: 3px;
border-bottom: 1px solid var(--_tax-report-table-head-separator);
background: var(--_tax-report-table-head-bg);
color: var(--_tax-report-table-head-text);
font-size: var(--_tax-report-table-head-size);
font-weight: var(--_tax-report-table-head-weight);
line-height: 1.06;
white-space: normal;
box-shadow: none;
}
#viewTaxReport #tblTaxReport thead th:first-child,
#viewTaxReport #tblTaxReport tbody td:first-child{
padding-left: var(--_tax-report-table-edge-px);
}
#viewTaxReport #tblTaxReport thead th:last-child,
#viewTaxReport #tblTaxReport tbody td:last-child{
padding-right: var(--_tax-report-table-edge-px);
}
#viewTaxReport #tblTaxReport tbody tr{
height: 54px;
}
#viewTaxReport #tblTaxReport tbody td{
min-height: 54px;
padding-top: var(--_tax-report-table-cell-pad-y);
padding-bottom: var(--_tax-report-table-cell-pad-y);
border-bottom: 0;
background: var(--_tax-report-table-row-bg);
color: var(--_tax-report-table-row-text);
font-size: var(--_tax-report-table-row-size);
font-weight: var(--_tax-report-table-row-weight);
line-height: 1.24;
white-space: nowrap;
transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
#viewTaxReport #tblTaxReport tbody tr + tr td{
border-top: 1px solid var(--_tax-report-table-row-separator);
}
#viewTaxReport #tblTaxReport tbody tr:hover td{
background: var(--_tax-report-table-row-hover);
}
#viewTaxReport #tblTaxReport tbody td.col-dt,
#viewTaxReport #tblTaxReport tbody td.col-type,
#viewTaxReport #tblTaxReport tbody td.col-asset,
#viewTaxReport #tblTaxReport tbody td.tax-col-action{
background: var(--_tax-report-table-sticky-bg);
}
#viewTaxReport #tblTaxReport tbody tr:hover td.col-dt,
#viewTaxReport #tblTaxReport tbody tr:hover td.col-type,
#viewTaxReport #tblTaxReport tbody tr:hover td.col-asset,
#viewTaxReport #tblTaxReport tbody tr:hover td.tax-col-action{
background: var(--_tax-report-table-sticky-hover-bg);
}
#viewTaxReport #tblTaxReport tbody tr.taxPreviewProblemRow td{
background: var(--_tax-report-problem-row-bg);
}
#viewTaxReport #tblTaxReport tbody tr.taxPreviewProblemRow td.col-dt,
#viewTaxReport #tblTaxReport tbody tr.taxPreviewProblemRow td.col-type,
#viewTaxReport #tblTaxReport tbody tr.taxPreviewProblemRow td.col-asset,
#viewTaxReport #tblTaxReport tbody tr.taxPreviewProblemRow td.tax-col-action{
background: var(--_tax-report-problem-row-sticky-bg);
}
#viewTaxReport #tblTaxReport tbody tr.taxPreviewProblemRow:hover td{
background: var(--_tax-report-problem-row-bg);
}
#viewTaxReport #tblTaxReport tbody tr.taxPreviewProblemRow:hover td.col-dt,
#viewTaxReport #tblTaxReport tbody tr.taxPreviewProblemRow:hover td.col-type,
#viewTaxReport #tblTaxReport tbody tr.taxPreviewProblemRow:hover td.col-asset,
#viewTaxReport #tblTaxReport tbody tr.taxPreviewProblemRow:hover td.tax-col-action{
background: var(--_tax-report-problem-row-sticky-bg);
}
#viewTaxReport #tblTaxReport thead th.col-dt,
#viewTaxReport #tblTaxReport tbody td.col-dt{
box-sizing: border-box;
min-width: 160px;
width: 160px;
max-width: 160px;
position: sticky;
left: 0;
z-index: 40;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-right: 1px solid var(--_tax-report-table-sticky-divider);
}
#viewTaxReport #tblTaxReport thead th.col-type,
#viewTaxReport #tblTaxReport tbody td.col-type{
box-sizing: border-box;
min-width: 118px;
width: 118px;
max-width: 118px;
position: sticky;
left: 160px;
z-index: 40;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
border-right: 1px solid var(--_tax-report-table-sticky-divider);
}
#viewTaxReport #tblTaxReport thead th.col-asset,
#viewTaxReport #tblTaxReport tbody td.col-asset{
box-sizing: border-box;
min-width: 92px;
width: 92px;
max-width: 92px;
position: sticky;
left: 278px;
z-index: 40;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-right: 1px solid var(--_tax-report-table-sticky-divider);
}
#viewTaxReport #tblTaxReport thead th.col-dt,
#viewTaxReport #tblTaxReport thead th.col-type,
#viewTaxReport #tblTaxReport thead th.col-asset{
z-index: 65;
background: var(--_tax-report-table-head-sticky-bg);
}
#viewTaxReport #tblTaxReport tbody td.col-dt{
color: var(--_tx-row-muted);
font-weight: 620;
letter-spacing: -.01em;
}
#viewTaxReport #tblTaxReport tbody td.col-asset{
color: var(--_tax-report-table-row-strong);
font-weight: 700;
}
#viewTaxReport #tblTaxReport .tax-col-qty{
min-width: 104px;
width: 104px;
color: color-mix(in srgb, var(--_tax-report-table-row-strong) 86%, #55605F 14%);
}
#viewTaxReport #tblTaxReport .tax-col-price{
min-width: 126px;
width: 126px;
color: color-mix(in srgb, var(--_tax-report-table-row-strong) 88%, #5C6665 12%);
}
#viewTaxReport #tblTaxReport .tax-col-amount{
min-width: 128px;
width: 128px;
color: var(--_tax-report-table-row-strong);
font-weight: 620;
}
#viewTaxReport #tblTaxReport .tax-col-cost{
min-width: 168px;
width: 168px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#viewTaxReport #tblTaxReport tbody .tax-col-cost{
color: var(--_tax-report-table-cost-text);
}
#viewTaxReport #tblTaxReport .tax-col-pnl{
min-width: 144px;
width: 144px;
font-weight: 620;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#viewTaxReport #tblTaxReport tbody .tax-col-pnl{
color: var(--_tax-report-table-pnl-text);
}
#viewTaxReport #tblTaxReport tbody .tax-col-pnl.good{
color: var(--_tax-report-table-pnl-good);
}
#viewTaxReport #tblTaxReport tbody .tax-col-pnl.bad{
color: var(--_tax-report-table-pnl-bad);
}
#viewTaxReport #tblTaxReport .tax-col-oversold{
min-width: 124px;
width: 124px;
max-width: 124px;
text-align: center;
}
#viewTaxReport #tblTaxReport .tax-col-proof{
min-width: 118px;
width: 118px;
max-width: 118px;
text-align: center;
}
#viewTaxReport #tblTaxReport .tax-col-proof-source{
min-width: 126px;
width: 126px;
max-width: 126px;
text-align: center;
}
#viewTaxReport #tblTaxReport .tax-col-bank-proof{
min-width: 128px;
width: 128px;
max-width: 128px;
text-align: center;
}
#viewTaxReport #tblTaxReport .tax-col-status{
min-width: 156px;
width: 156px;
max-width: 156px;
overflow: hidden;
}
#viewTaxReport #tblTaxReport .tax-col-action{
min-width: var(--_tax-report-table-action-col-width);
width: var(--_tax-report-table-action-col-width);
max-width: var(--_tax-report-table-action-col-width);
position: sticky;
right: 0;
z-index: 45;
text-align: center;
border-left: 1px solid var(--_tax-report-table-sticky-divider);
background: var(--_tax-report-table-sticky-bg);
}
#viewTaxReport #tblTaxReport thead .tax-col-action{
z-index: 70;
background: var(--_tax-report-table-head-sticky-bg);
}
#viewTaxReport #tblTaxReport thead .taxThLabel{
display: inline-flex;
align-items: center;
gap: 4px;
max-width: 100%;
white-space: normal;
line-height: 1.08;
}
#viewTaxReport #tblTaxReport thead th.right .taxThLabel{
justify-content: flex-end;
}
#viewTaxReport #tblTaxReport thead .taxThLabel .helpQ{
flex: 0 0 auto;
margin-left: 0;
align-self: center;
}
#viewTaxReport .taxCellStack{
display: grid;
gap: 2px;
min-width: 0;
}
#viewTaxReport .taxBasisInline{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
min-width: 0;
max-width: 100%;
}
#viewTaxReport .taxSourcePrimary{
display: block;
line-height: 1.26;
word-break: break-word;
overflow-wrap: anywhere;
}
#viewTaxReport .taxSourceSecondary{
color: var(--_tax-report-table-row-muted);
font-size: 10px;
line-height: 1.22;
white-space: normal;
word-break: break-word;
overflow-wrap: anywhere;
}
#viewTaxReport .taxBasisInfo{
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 999px;
border: 1px solid rgba(223, 225, 223, .92);
background: rgba(255,255,255,.84);
color: #63717A;
font-size: 11px;
font-weight: 700;
line-height: 1;
cursor: help;
flex: 0 0 auto;
box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
#viewTaxReport .helpQ.taxBasisInfo::after{
display: none;
}
#viewTaxReport .taxBasisInfo:focus-visible{
outline: 2px solid rgba(120,160,255,.45);
outline-offset: 1px;
}
#viewTaxReport .taxPreviewActionBtn{
width: var(--_tax-report-table-action-btn-size);
height: var(--_tax-report-table-action-btn-size);
min-width: var(--_tax-report-table-action-btn-size);
min-height: var(--_tax-report-table-action-btn-size);
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--_tax-report-table-action-btn-border);
border-radius: var(--_tax-report-table-action-btn-radius);
background: var(--_tax-report-table-action-btn-bg);
color: var(--_tax-report-table-action-btn-text);
box-shadow: none;
transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
#viewTaxReport .taxPreviewActionBtn .topMiniIcon{
width: 13px;
height: 13px;
display: block;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
pointer-events: none;
}
#viewTaxReport .taxPreviewActionBtn:hover{
border-color: var(--_tax-report-table-action-btn-hover-border);
background: var(--_tax-report-table-action-btn-hover-bg);
color: var(--_tax-report-table-action-btn-hover-text);
}
#viewTaxReport #tblTaxReport .tax-col-status .taxTxBadge{
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: 0;
max-width: 100%;
min-height: 20px;
padding: 0 9px;
border-radius: 999px;
border: 1px solid var(--_tax-report-table-status-rejected-border);
background: var(--_tax-report-table-status-rejected-bg);
color: var(--_tax-report-table-status-rejected-text);
font-size: 9.2px;
font-weight: 600;
line-height: 1.2;
white-space: normal;
overflow: hidden;
box-sizing: border-box;
text-align: center;
box-shadow: var(--_tax-report-table-badge-shadow);
}
#viewTaxReport #tblTaxReport .tax-col-status .taxTxBadge.pending{
border-color: var(--_tax-report-table-status-pending-border);
background: var(--_tax-report-table-status-pending-bg);
color: var(--_tax-report-table-status-pending-text);
}
#viewTaxReport #tblTaxReport .tax-col-status .taxTxBadge.approved{
border-color: var(--_tax-report-table-status-approved-border);
background: var(--_tax-report-table-status-approved-bg);
color: var(--_tax-report-table-status-approved-text);
}
#viewTaxReport #tblTaxReport .tax-col-status .taxTxBadge.rejected{
border-color: var(--_tax-report-table-status-rejected-border);
background: var(--_tax-report-table-status-rejected-bg);
color: var(--_tax-report-table-status-rejected-text);
}
#viewTaxReport #tblTaxReport .taxProofChip{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 62px;
max-width: 100%;
min-height: var(--_tax-report-table-badge-h);
padding: 0 var(--_tax-report-table-badge-pad-x);
border-radius: var(--_tax-report-table-badge-radius);
border-width: var(--_tax-report-table-badge-border-w);
border-style: solid;
font-size: var(--_tax-report-table-badge-font-size);
font-weight: var(--_tax-report-table-badge-font-weight);
line-height: var(--_tax-report-table-badge-line);
white-space: nowrap;
box-shadow: var(--_tax-report-table-badge-shadow);
}
#viewTaxReport #tblTaxReport .tax-col-oversold .taxProofChip.ok{
border-color: var(--_tax-report-table-badge-result-ok-border);
background: var(--_tax-report-table-badge-result-ok-bg);
color: var(--_tax-report-table-badge-result-ok-text);
}
#viewTaxReport #tblTaxReport .tax-col-oversold .taxProofChip.oversold{
border-color: var(--_tax-report-table-badge-result-oversold-border);
background: var(--_tax-report-table-badge-result-oversold-bg);
color: var(--_tax-report-table-badge-result-oversold-text);
}
#viewTaxReport #tblTaxReport .tax-col-proof .taxProofChip.auto,
#viewTaxReport #tblTaxReport .taxProofChip.csv{
border-color: var(--_tax-report-table-badge-method-auto-border);
background: var(--_tax-report-table-badge-method-auto-bg);
color: var(--_tax-report-table-badge-method-auto-text);
}
#viewTaxReport #tblTaxReport .tax-col-proof .taxProofChip.manual{
border-color: var(--_tax-report-table-badge-method-manual-border);
background: var(--_tax-report-table-badge-method-manual-bg);
color: var(--_tax-report-table-badge-method-manual-text);
}
#viewTaxReport #tblTaxReport .tax-col-proof .taxProofChip.none,
#viewTaxReport #tblTaxReport .tax-col-proof-source .taxProofChip.none,
#viewTaxReport #tblTaxReport .tax-col-bank-proof .taxProofChip.none{
border-color: var(--_tax-report-table-badge-source-none-border);
background: var(--_tax-report-table-badge-source-none-bg);
color: var(--_tax-report-table-badge-source-none-text);
}
#viewTaxReport #tblTaxReport .tax-col-proof-source .taxProofChip.exchange{
border-color: var(--_tax-report-table-badge-source-exchange-border);
background: var(--_tax-report-table-badge-source-exchange-bg);
color: var(--_tax-report-table-badge-source-exchange-text);
}
#viewTaxReport #tblTaxReport .tax-col-proof-source .taxProofChip.chain{
border-color: var(--_tax-report-table-badge-source-chain-border);
background: var(--_tax-report-table-badge-source-chain-bg);
color: var(--_tax-report-table-badge-source-chain-text);
}
#viewTaxReport #tblTaxReport .tax-col-proof-source .taxProofChip.wallet{
border-color: var(--_tax-report-table-badge-source-wallet-border);
background: var(--_tax-report-table-badge-source-wallet-bg);
color: var(--_tax-report-table-badge-source-wallet-text);
}
#viewTaxReport #tblTaxReport .tax-col-bank-proof .taxProofChip.bank{
border-color: var(--_tax-report-table-badge-source-bank-border);
background: var(--_tax-report-table-badge-source-bank-bg);
color: var(--_tax-report-table-badge-source-bank-text);
}
#viewTaxReport #tblTaxReport tbody td[colspan]{
padding: 28px var(--_tax-report-table-edge-px);
background: transparent;
color: var(--_tax-report-table-row-muted);
font-size: 13px;
font-weight: 500;
line-height: 1.4;
text-align: center;
white-space: normal;
}
.txHistoryCard .txHistoryEmptyState{
margin-top: 0;
padding: var(--_tx-empty-pad);
border: 1px solid var(--_tx-empty-border);
border-radius: var(--_tx-empty-radius);
background: var(--_tx-empty-bg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--_tx-empty-gap);
text-align: center;
}
.txHistoryCard .txHistoryEmptyTitle{
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_tx-empty-title-size);
font-weight: var(--_tx-empty-title-weight);
line-height: 1.25;
color: var(--_tx-empty-title-color);
}
.txHistoryCard .txHistoryEmptyText{
margin-top: 0;
width: 100%;
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_tx-empty-text-size);
font-weight: 400;
line-height: 1.35;
color: var(--_tx-empty-text-color);
text-align: center;
}
.txHistoryCard .txHistoryEmptyNote{
width: 100%;
font-family: "Inter", var(--ct-font-sans);
font-size: var(--_tx-empty-note-size);
font-weight: 400;
line-height: 1.35;
color: var(--_tx-empty-text-color);
text-align: center;
}
@media (max-width: 1360px){
#viewTaxReport #tblTaxReport{
min-width: 1260px;
}
}
@media (max-width: 1120px){
#viewTaxReport #tblTaxReport{
min-width: 1180px;
}
}
/* ===== Main overview + portfolio dynamics ===== */
body > .wrap{
--_page-shell-topbar-offset: var(--stickyTop, var(--ct-topbar-fixed-height));
--_page-shell-topbar-gap: 10px;
padding-top: calc(var(--_page-shell-topbar-offset) + var(--_page-shell-topbar-gap));
}
#viewMain .heroCardsShell.hero21Pass{
--_main-hero-font-ui: "Inter", var(--ct-font-sans);
--_main-hero-shell-bg: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(251,252,254,.84) 100%);
--_main-hero-shell-border: rgba(229, 234, 241, .54);
--_main-hero-shell-shadow: 0 8px 20px rgba(15, 23, 42, .018), 0 1px 0 rgba(255,255,255,.74) inset;
--_main-hero-rail-bg: linear-gradient(180deg, rgba(255,255,255,.925) 0%, rgba(250,251,253,.78) 100%);
--_main-hero-rail-shadow: 0 5px 16px rgba(15, 23, 42, .014), 0 1px 0 rgba(255,255,255,.68) inset;
--_main-hero-divider: rgba(223, 227, 234, .92);
--_main-hero-divider-soft: rgba(223, 227, 234, 0);
--_main-hero-text: #121823;
--_main-hero-muted: #7A8494;
--_main-hero-muted-strong: #667081;
--_main-hero-label: #8B94A2;
--_main-hero-positive: #5B9070;
--_main-hero-negative: #BB6C7C;
--_main-hero-button: #171D27;
--_main-hero-button-hover: #111720;
--_main-hero-button-shadow: 0 12px 24px rgba(15, 23, 42, .13);
--_main-hero-chip-border: #DCE9DF;
--_main-hero-chip-bg: linear-gradient(180deg, rgba(246,251,247,.98) 0%, rgba(239,247,241,.96) 100%);
--_main-hero-chip-bg-bad: linear-gradient(180deg, rgba(255,246,248,.98) 0%, rgba(252,239,242,.96) 100%);
--_main-hero-seg-active-bg: rgba(255,255,255,.96);
--_main-hero-seg-active-border: rgba(221, 226, 232, .96);
--_main-hero-kpi-icon-neutral-bg: linear-gradient(180deg, rgba(252,252,251,.98) 0%, rgba(246,247,246,.96) 100%);
--_main-hero-kpi-icon-positive-bg: linear-gradient(180deg, rgba(246,251,247,.98) 0%, rgba(239,247,241,.96) 100%);
--_main-hero-kpi-icon-negative-bg: linear-gradient(180deg, rgba(245,247,255,.98) 0%, rgba(238,242,255,.96) 100%);
--_main-hero-kpi-icon-neutral-border: #E7E8E5;
--_main-hero-kpi-icon-positive-border: #DCE9DF;
--_main-hero-kpi-icon-negative-border: #DFE6FF;
--_main-hero-left-pad-y: 34px;
--_main-hero-left-pad-x: 38px;
--_main-hero-action-gap: 20px;
--_main-hero-value-gap: 16px;
--_main-chart-plot-border: rgba(226, 231, 238, .76);
--_main-chart-plot-height: 276px;
--_main-chart-line: rgba(94, 109, 156, .95);
--_main-chart-line-soft: rgba(129, 141, 186, .82);
--_main-chart-fill-top: rgba(118, 131, 184, .16);
--_main-chart-fill-mid: rgba(118, 131, 184, .05);
--_main-chart-fill-bottom: rgba(118, 131, 184, .012);
--_main-chart-dot-halo: rgba(95, 110, 157, .14);
--_main-chart-dot-ring: rgba(255,255,255,.98);
--_main-chart-dot-good: rgba(93, 144, 111, 1);
--_main-chart-dot-bad: rgba(187, 108, 124, 1);
--_main-chart-stroke-shadow: rgba(86, 99, 140, .07);
--_main-chart-stroke-width: 2.15;
--_main-chart-stroke-shadow-blur: 8;
--_main-chart-stroke-shadow-offset-y: 1;
--_main-chart-dot-halo-radius: 7.6;
--_main-chart-dot-ring-radius: 5.9;
--_main-chart-dot-radius: 3.3;
--_main-value-delta-gap: 15px;
--_main-value-delta-scale: 1;
--_main-value-delta-stack-gap: 10px;
--_main-value-delta-inline-gap-base: 9px;
--_main-value-delta-chip-height-base: 24px;
--_main-value-delta-chip-pad-x-base: 10px;
--_main-value-delta-chip-radius-base: 8px;
--_main-value-delta-chip-font-size-base: 12px;
--_main-value-delta-pct-font-size-base: 12.5px;
font-family: var(--_main-hero-font-ui);
border: 0;
background: transparent;
box-shadow: none;
}
#viewMain .heroCardsShell.hero21Pass > .cardInner{
padding: 0;
}
#viewMain .hero21Pass .heroFrame{
display: grid;
grid-template-columns: 1fr;
gap: 18px;
}
#viewMain .hero21Pass .heroPrimaryCard{
border: 1px solid var(--_main-hero-shell-border);
border-radius: 24px;
background: var(--_main-hero-shell-bg);
box-shadow: var(--_main-hero-shell-shadow);
overflow: hidden;
position: relative;
}
#viewMain .hero21Pass .heroPrimaryCard::before{
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 82% 12%, rgba(219, 225, 235, .20) 0%, rgba(219, 225, 235, 0) 36%),
radial-gradient(circle at 18% 110%, rgba(233, 237, 243, .28) 0%, rgba(233, 237, 243, 0) 42%);
opacity: .52;
pointer-events: none;
}
#viewMain .hero21Pass .heroPrimaryInner{
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(330px, .84fr) minmax(0, 1.26fr);
align-items: stretch;
gap: 0;
padding: 0;
}
#viewMain .hero21Pass .heroPrimaryInner::after{
content: "";
position: absolute;
top: 42px;
bottom: 42px;
left: 40%;
width: 1px;
background: linear-gradient(
180deg,
var(--_main-hero-divider-soft) 0%,
var(--_main-hero-divider) 16%,
var(--_main-hero-divider) 84%,
var(--_main-hero-divider-soft) 100%
);
opacity: .86;
pointer-events: none;
}
#viewMain .hero21Pass .heroLeft{
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--_main-hero-action-gap);
padding: var(--_main-hero-left-pad-y) var(--_main-hero-left-pad-x) 32px;
min-width: 0;
}
#viewMain .hero21Pass .heroValueCluster{
display: grid;
align-content: start;
flex: 0 0 auto;
gap: var(--_main-hero-value-gap);
min-width: 0;
}
#viewMain .hero21Pass .heroEyebrowRow{
display: inline-flex;
align-items: center;
gap: 0;
flex-wrap: wrap;
margin-bottom: 10px;
}
#viewMain .hero21Pass .heroEyebrow{
font-family: var(--_main-hero-font-ui);
font-size: 13.75px;
line-height: 1.2;
font-weight: 454;
letter-spacing: .02em;
color: var(--_main-hero-label);
}
#viewMain .hero21Pass .heroValueRow{
display: flex;
align-items: flex-end;
column-gap: var(--_main-value-delta-gap);
row-gap: 10px;
flex-wrap: nowrap;
min-width: 0;
}
#viewMain .hero21Pass .heroMainValue{
min-width: 0;
flex: 0 1 auto;
max-width: 100%;
padding-right: .12em;
overflow: hidden;
text-overflow: clip;
white-space: nowrap;
font-family: var(--_main-hero-font-ui);
font-size: clamp(52px, 3.85vw, 58px);
line-height: .92;
font-weight: 560;
letter-spacing: -.05em;
color: var(--_main-hero-text);
}
#viewMain .hero21Pass .heroDeltaInline{
display: inline-flex;
align-items: center;
align-self: flex-end;
flex: 0 0 auto;
min-width: 0;
gap: calc(var(--_main-value-delta-inline-gap-base) * var(--_main-value-delta-scale));
flex-wrap: nowrap;
transform: none;
}
#viewMain .hero21Pass .heroDeltaChip{
display: inline-flex;
align-items: center;
min-height: calc(var(--_main-value-delta-chip-height-base) * var(--_main-value-delta-scale));
padding: 0 calc(var(--_main-value-delta-chip-pad-x-base) * var(--_main-value-delta-scale));
border-radius: calc(var(--_main-value-delta-chip-radius-base) * var(--_main-value-delta-scale));
border: 1px solid var(--_main-hero-chip-border);
background: var(--_main-hero-chip-bg);
box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
font-family: var(--_main-hero-font-ui);
font-size: calc(var(--_main-value-delta-chip-font-size-base) * var(--_main-value-delta-scale));
line-height: 1;
font-weight: 540;
color: var(--_main-hero-positive);
white-space: nowrap;
}
#viewMain .hero21Pass .heroDeltaChip.bad{
background: var(--_main-hero-chip-bg-bad);
border-color: #F0DADF;
color: var(--_main-hero-negative);
}
#viewMain .hero21Pass .heroDeltaPct{
font-family: var(--_main-hero-font-ui);
font-size: calc(var(--_main-value-delta-pct-font-size-base) * var(--_main-value-delta-scale));
line-height: 1;
font-weight: 560;
color: var(--_main-hero-positive);
white-space: nowrap;
}
#viewMain .hero21Pass .heroDeltaPct.bad{
color: var(--_main-hero-negative);
}
#viewMain .hero21Pass .heroValueRow.is-delta-stacked{
display: inline-grid;
grid-template-columns: max-content;
justify-items: end;
align-items: end;
row-gap: var(--_main-value-delta-stack-gap);
column-gap: 0;
}
#viewMain .hero21Pass .heroValueRow.is-delta-stacked .heroMainValue,
#viewMain .hero21Pass .heroValueRow.is-delta-stacked .heroDeltaInline{
justify-self: end;
}
#viewMain .hero21Pass .heroValueRow.is-delta-stacked .heroDeltaInline{
align-self: start;
}
#viewMain .hero21Pass .heroUpdatedRow{
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 12px;
color: var(--_main-hero-muted);
font-family: var(--_main-hero-font-ui);
font-size: 12px;
line-height: 1.45;
font-weight: 500;
}
#viewMain .hero21Pass .heroUpdatedIcon{
width: 13px;
height: 13px;
stroke: currentColor;
fill: none;
stroke-width: 1.55;
stroke-linecap: round;
stroke-linejoin: round;
flex: 0 0 auto;
}
#viewMain .hero21Pass .heroActionRow{
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
flex-wrap: wrap;
min-width: 0;
margin-top: 10px;
padding-top: 0;
align-self: flex-start;
}
#viewMain .hero21Pass .heroActionBtn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 44px;
padding: 0 20px;
border-radius: 12px;
font-family: var(--_main-hero-font-ui);
font-size: 13px;
line-height: 1;
font-weight: 540;
letter-spacing: -.01em;
white-space: nowrap;
}
#viewMain .hero21Pass .heroPrimaryAction{
border: 1px solid var(--_main-hero-button);
background: var(--_main-hero-button);
color: #FFFFFF;
box-shadow: var(--_main-hero-button-shadow);
}
#viewMain .hero21Pass .heroPrimaryAction:hover,
#viewMain .hero21Pass .heroPrimaryAction:focus-visible{
border-color: var(--_main-hero-button-hover);
background: var(--_main-hero-button-hover);
box-shadow: 0 14px 26px rgba(15, 23, 42, .15);
transform: translateY(-1px);
}
#viewMain .hero21Pass .heroChartEmbed{
display: flex;
flex-direction: column;
align-self: stretch;
gap: 18px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
padding: 0;
min-width: 0;
overflow: hidden;
position: relative;
}
#viewMain .hero21Pass .heroChartEmbed::before{
content: none;
}
#viewMain .hero21Pass .chartHead{
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 40px 36px 12px;
margin: 0;
position: relative;
z-index: 1;
}
#viewMain .hero21Pass .chartHeroCopy{
display: grid;
gap: 6px;
min-width: 0;
width: 100%;
}
#viewMain .hero21Pass .chartTitle{
font-family: var(--_main-hero-font-ui);
font-size: 18px;
line-height: 1.15;
font-weight: 590;
color: var(--_main-hero-text);
}
#viewMain .hero21Pass .chartRangeSummary{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
width: 100%;
min-width: 0;
}
#viewMain .hero21Pass .chartRangeValues{
display: inline-flex;
align-items: baseline;
gap: 8px 10px;
min-width: 0;
flex-wrap: wrap;
}
#viewMain .hero21Pass .chartRangeSummary .pfBig{
margin: 0;
font-family: var(--_main-hero-font-ui);
font-size: clamp(22px, 1.8vw, 30px);
line-height: .94;
letter-spacing: -.045em;
font-weight: 560;
color: var(--_main-hero-text);
white-space: nowrap;
}
#viewMain .hero21Pass .chartRangeSummary #pfValueNow.good,
#viewMain .hero21Pass .chartRangeSummary #pfValueNow.bad{
color: var(--_main-hero-text);
}
#viewMain .hero21Pass .chartRangeSummary #pfRangePnl{
font-family: var(--_main-hero-font-ui);
font-size: 13.5px;
line-height: 1.1;
font-weight: 560;
color: var(--_main-hero-positive);
white-space: nowrap;
}
#viewMain .hero21Pass .chartRangeSummary #pfRangePnl.bad{
color: var(--_main-hero-negative);
}
#viewMain .hero21Pass .chartRangeSummary #pfRangePnlUsd{
display: none;
}
#viewMain .hero21Pass .chartRangeBar{
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
width: max-content;
margin: 0 0 0 auto;
padding: 0;
border-radius: 999px;
border: 0;
background: transparent;
box-shadow: none;
}
#viewMain .hero21Pass .segBtn{
min-height: 26px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid transparent;
background: transparent;
color: var(--_main-hero-muted-strong);
font-family: var(--_main-hero-font-ui);
font-size: 10.5px;
font-weight: 560;
line-height: 1;
box-shadow: none;
}
#viewMain .hero21Pass .segBtn:hover,
#viewMain .hero21Pass .segBtn:focus-visible{
background: rgba(255,255,255,.72);
border-color: transparent;
color: var(--_main-hero-text);
transform: none;
box-shadow: none;
}
#viewMain .hero21Pass .segBtn.active,
#viewMain .hero21Pass .segBtn.active:hover{
background: var(--_main-hero-seg-active-bg);
border-color: var(--_main-hero-seg-active-border);
color: var(--_main-hero-text);
box-shadow: 0 1px 2px rgba(15, 23, 42, .03), inset 0 1px 0 rgba(255,255,255,.88);
}
#viewMain .hero21Pass .heroChartEmbed .chartInnerPanel{
display: grid;
gap: 0;
padding: 4px 36px 24px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
position: relative;
z-index: 1;
}
#viewMain .hero21Pass .heroChartEmbed .chartWrap{
position: relative;
min-height: var(--_main-chart-plot-height);
height: var(--_main-chart-plot-height);
border: 0;
border-radius: 20px;
background: transparent;
box-shadow: none;
overflow: hidden;
transform: none;
}
#viewMain .hero21Pass .chartWrap::before,
#viewMain .hero21Pass .chartWrap::after{
content: none;
}
#viewMain .hero21Pass canvas.pfChart{
position: relative;
z-index: 1;
height: 100%;
min-height: 0;
}
#viewMain .hero21Pass canvas.pfChart.is-revealing{
animation: mainChartRevealOnce 1.7s cubic-bezier(.22,.74,.18,1) both;
will-change: clip-path, opacity;
}
#viewMain .hero21Pass .chartEmptyState{
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 26px;
text-align: center;
z-index: 2;
pointer-events: none;
}
#viewMain .hero21Pass .chartEmptyState::before{
content: "";
width: 48px;
height: 48px;
border-radius: 12px;
border: 1px solid var(--_main-chart-plot-border);
background:
#FFFFFF
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23959FAD' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9'/%3E%3Cpath d='M12 7v6l4 2'/%3E%3C/svg%3E")
center/28px 28px no-repeat;
box-shadow: 0 8px 18px rgba(17, 24, 39, .04), inset 0 1px 0 rgba(255,255,255,.96);
}
#viewMain .hero21Pass .chartEmptyState[data-chart-state="pending"]::before{
width: 150px;
height: 70px;
border: 0;
border-radius: 0;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='70' viewBox='0 0 150 70'%3E%3Cpath d='M0 52 C14 50 20 41 34 43 C49 45 55 55 70 46 C84 38 90 24 106 29 C121 34 128 48 150 35 L150 70 L0 70 Z' fill='%235E6D9C' fill-opacity='.075'/%3E%3Cpath d='M0 52 C14 50 20 41 34 43 C49 45 55 55 70 46 C84 38 90 24 106 29 C121 34 128 48 150 35' fill='none' stroke='%235E6D9C' stroke-opacity='.94' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='150' cy='35' r='3.2' fill='%235E6D9C' fill-opacity='.94'/%3E%3Ccircle cx='150' cy='35' r='6.5' fill='%235E6D9C' fill-opacity='.10'/%3E%3C/svg%3E")
left center/150px 70px no-repeat;
box-shadow: none;
clip-path: inset(0 100% 0 0);
animation: mainChartLoadingTrace 1.7s ease-in-out infinite;
}
#viewMain .hero21Pass .chartEmptyState[data-chart-state="error"]::before{
background:
#FFFFFF
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23B76575' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z'/%3E%3C/svg%3E")
center/28px 28px no-repeat;
}
#viewMain .hero21Pass .chartEmptyTitle{
font-family: var(--_main-hero-font-ui);
font-size: 12.5px;
line-height: 1.25;
font-weight: 570;
color: #4B5668;
}
#viewMain .hero21Pass .chartEmptyText{
font-family: var(--_main-hero-font-ui);
font-size: 11px;
line-height: 1.5;
color: var(--_main-hero-muted);
max-width: 300px;
}
#viewMain .hero21Pass .chartFoot{
position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
border: 0;
}
#viewMain .hero21Pass #pfChartHint{
display: block;
margin-top: 10px;
font-size: 11.5px;
line-height: 1.45;
font-weight: 500;
color: var(--_main-hero-muted);
}
#viewMain .hero21Pass #pfChartHint:empty{
display: none;
}
#viewMain .hero21Pass .heroMetricsRow{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
border: 1px solid var(--_main-hero-shell-border);
border-radius: 22px;
background: var(--_main-hero-rail-bg);
box-shadow: var(--_main-hero-rail-shadow);
overflow: hidden;
}
#viewMain .hero21Pass .heroMetricsRow > *{
min-width: 0;
}
#viewMain .hero21Pass .heroMetricsRow > * + *{
border-left: 1px solid rgba(226, 231, 238, .56);
}
#viewMain .hero21Pass .heroKpiCard,
#viewMain .hero21Pass #breakdownRealized,
#viewMain .hero21Pass #breakdownUnrealized,
#viewMain .hero21Pass .breakTile.good,
#viewMain .hero21Pass .breakTile.bad{
min-height: 0;
padding: 25px 28px 24px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
display: grid;
align-content: start;
gap: 16px;
position: relative;
}
#viewMain .hero21Pass .breakTile + .breakTile{
border-left: 0;
}
#viewMain .hero21Pass .heroKpiHead{
display: inline-flex;
align-items: center;
gap: 12px;
min-width: 0;
}
#viewMain .hero21Pass .heroKpiIcon{
width: 30px;
height: 30px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
border: 1px solid var(--_main-hero-kpi-icon-neutral-border);
background: var(--_main-hero-kpi-icon-neutral-bg);
}
#viewMain .hero21Pass .heroKpiIcon svg{
width: 13px;
height: 13px;
stroke: currentColor;
fill: none;
stroke-width: 1.55;
stroke-linecap: round;
stroke-linejoin: round;
}
#viewMain .hero21Pass .heroKpiIconTotal{
color: #78818E;
}
#viewMain .hero21Pass .heroKpiIconRealized{
color: var(--_main-hero-positive);
border-color: var(--_main-hero-kpi-icon-positive-border);
background: var(--_main-hero-kpi-icon-positive-bg);
}
#viewMain .hero21Pass .heroKpiIconUnrealized{
color: #7283D3;
border-color: var(--_main-hero-kpi-icon-negative-border);
background: var(--_main-hero-kpi-icon-negative-bg);
}
#viewMain .hero21Pass .heroKpiCard .label,
#viewMain .hero21Pass .heroKpiCard .k{
margin: 0;
font-family: var(--_main-hero-font-ui);
font-size: 10.5px;
line-height: 1.1;
font-weight: 560;
letter-spacing: .06em;
text-transform: none;
color: var(--_main-hero-label);
}
#viewMain .hero21Pass .heroKpiCard .value,
#viewMain .hero21Pass .heroKpiCard .v{
margin: 0;
min-width: 0;
overflow: hidden;
text-overflow: clip;
white-space: nowrap;
font-family: var(--_main-hero-font-ui);
font-size: clamp(29px, 2.45vw, 42px);
line-height: .94;
font-weight: 555;
letter-spacing: -.04em;
color: var(--_main-hero-text);
}
#viewMain .hero21Pass .heroKpiCard .v.good,
#viewMain .hero21Pass .heroKpiCard .v.bad,
#viewMain .hero21Pass #totalPnl.good,
#viewMain .hero21Pass #totalPnl.bad{
color: var(--_main-hero-text);
}
#viewMain .hero21Pass #totalPnl .totalPnlMoney{
display: block;
}
#viewMain .hero21Pass .heroKpiSubline{
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
min-height: 0;
}
#viewMain .hero21Pass .heroKpiChange{
font-family: var(--_main-hero-font-ui);
font-size: 13px;
line-height: 1.2;
font-weight: 560;
color: var(--_main-hero-positive);
white-space: nowrap;
}
#viewMain .hero21Pass .heroKpiChange.bad{
color: var(--_main-hero-negative);
}
#viewMain .hero21Pass .heroKpiDescriptor{
font-family: var(--_main-hero-font-ui);
font-size: 12px;
line-height: 1.45;
font-weight: 500;
color: var(--_main-hero-muted);
}
#viewMain .hero21Pass .heroKpiCard .tileHelp,
#viewMain .hero21Pass .kpiHelp{
display: none;
}
@keyframes mainChartLoadingTrace{
0%{
clip-path: inset(0 100% 0 0);
opacity: 0;
transform: translateX(-4px);
}
10%{
opacity: 1;
}
78%{
clip-path: inset(0 0 0 0);
opacity: 1;
transform: translateX(0);
}
88%{
clip-path: inset(0 0 0 0);
opacity: 0;
transform: translateX(0);
}
100%{
clip-path: inset(0 100% 0 0);
opacity: 0;
transform: translateX(-4px);
}
}
@keyframes mainChartRevealOnce{
0%{
clip-path: inset(0 100% 0 0);
opacity: .98;
}
100%{
clip-path: inset(0 0 0 0);
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce){
#viewMain .hero21Pass canvas.pfChart.is-revealing{
animation: none;
clip-path: none;
opacity: 1;
}
#viewMain .hero21Pass .chartEmptyState[data-chart-state="pending"]::before{
animation: none;
clip-path: none;
opacity: 1;
transform: none;
}
}
@media (max-width: 1080px){
#viewMain .hero21Pass .heroPrimaryInner{
grid-template-columns: 1fr;
}
#viewMain .hero21Pass .heroPrimaryInner::after{
content: none;
}
#viewMain .hero21Pass .heroLeft{
padding: 36px 32px 26px;
}
#viewMain .hero21Pass .heroChartEmbed{
border-top: 1px solid var(--_main-hero-divider);
}
#viewMain .hero21Pass .chartHead{
padding: 28px 32px 12px;
}
#viewMain .hero21Pass .heroChartEmbed .chartInnerPanel{
padding: 4px 32px 24px;
}
#viewMain .hero21Pass .heroChartEmbed .chartWrap{
min-height: 268px;
height: 268px;
}
}
@media (max-width: 980px){
body > .wrap{
--_page-shell-topbar-gap: 8px;
}
#viewMain .heroCardsShell.hero21Pass{
width: min(100%, calc(100vw - 24px));
justify-self: start;
margin-inline: 0;
}
#viewMain .hero21Pass .heroMetricsRow{
grid-template-columns: 1fr;
}
#viewMain .hero21Pass .heroMetricsRow > * + *{
border-left: 0;
border-top: 1px solid var(--_main-hero-divider);
}
#viewMain .hero21Pass .heroLeft{
padding: 28px 24px 24px;
}
#viewMain .hero21Pass .heroChartEmbed .chartWrap{
height: 252px;
min-height: 252px;
}
}
@media (max-width: 720px){
#viewMain .heroCardsShell.hero21Pass{
width: min(100%, calc(100vw - 20px));
}
#viewMain .hero21Pass .heroFrame{
gap: 14px;
}
#viewMain .hero21Pass .heroValueCluster{
gap: 16px;
}
#viewMain .hero21Pass .heroLeft{
gap: 18px;
padding: 26px 22px 22px;
}
#viewMain .hero21Pass .heroValueRow{
flex-wrap: wrap;
gap: 10px 12px;
}
#viewMain .hero21Pass .heroValueRow.is-delta-stacked{
flex-wrap: initial;
}
#viewMain .hero21Pass .heroMainValue{
font-size: clamp(42px, 12vw, 52px);
}
#viewMain .hero21Pass .heroDeltaInline{
transform: none;
}
#viewMain .hero21Pass .heroActionRow,
#viewMain .hero21Pass .heroActionBtn{
width: 100%;
}
#viewMain .hero21Pass .chartHead{
padding: 24px 22px 10px;
}
#viewMain .hero21Pass .chartRangeSummary{
flex-direction: column;
align-items: stretch;
}
#viewMain .hero21Pass .chartRangeValues{
width: 100%;
}
#viewMain .hero21Pass .chartRangeBar{
width: 100%;
margin-left: 0;
justify-content: space-between;
}
#viewMain .hero21Pass .segBtn{
flex: 1 1 0;
padding-left: 0;
padding-right: 0;
}
#viewMain .hero21Pass .heroChartEmbed .chartInnerPanel{
padding: 4px 22px 20px;
}
#viewMain .hero21Pass .heroChartEmbed .chartWrap{
height: 236px;
min-height: 236px;
border-radius: 18px;
}
#viewMain .hero21Pass .heroKpiCard,
#viewMain .hero21Pass #breakdownRealized,
#viewMain .hero21Pass #breakdownUnrealized,
#viewMain .hero21Pass .breakTile.good,
#viewMain .hero21Pass .breakTile.bad{
padding: 22px 22px 20px;
}
#viewMain .hero21Pass .heroKpiCard .value,
#viewMain .hero21Pass .heroKpiCard .v{
font-size: clamp(26px, 8vw, 34px);
}
}