html, body {
height: 100%;
}
/* Canonical public footer and feedback widget. Specific selectors isolate it from legacy dashboard styles. */
.yf-footer.yf-public-footer {
margin: 0 !important;
border-top: 1px solid rgba(255, 255, 255, .08);
color: rgba(248, 244, 234, .72);
background: #081512;
font-family: "Manrope", Arial, sans-serif;
font-size: 14px;
line-height: 1.55;
}
.yf-footer.yf-public-footer,
.yf-footer.yf-public-footer * { box-sizing: border-box; letter-spacing: 0; }
.yf-footer.yf-public-footer .yf-footer__inner {
width: min(1180px, calc(100% - 40px));
margin: 0 auto;
padding: 54px 0 42px;
display: grid;
grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
align-items: start;
gap: clamp(42px, 6vw, 78px);
}
.yf-footer.yf-public-footer .yf-footer__brand { max-width: 300px; }
.yf-footer.yf-public-footer .yf-footer__brand > a { display: inline-flex; margin-bottom: 14px; }
.yf-footer.yf-public-footer .yf-footer__brand img { display: block; width: 138px; height: auto; }
.yf-footer.yf-public-footer .yf-footer__brand p { margin: 0; color: rgba(248, 244, 234, .72); font-size: 14px; line-height: 1.6; }
.yf-footer.yf-public-footer .yf-footer__brand small { display: block; margin-top: 10px; color: rgba(248, 244, 234, .52); font-size: 13px; }
.yf-footer.yf-public-footer .yf-footer__meta { display: grid; gap: 3px; margin-top: 14px; color: rgba(248, 244, 234, .62); font-size: 13px; }
.yf-footer.yf-public-footer .yf-footer__meta strong { color: rgba(248, 244, 234, .9) !important; }
.yf-footer.yf-public-footer .yf-footer__columns { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); gap: 42px; }
.yf-footer.yf-public-footer .yf-footer__group { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.yf-footer.yf-public-footer .yf-footer__group > strong { margin: 0 0 7px; color: rgba(248, 244, 234, .96) !important; font-size: 12px; font-weight: 750; line-height: 1.4; text-transform: uppercase; }
.yf-footer.yf-public-footer .yf-footer__group a,
.yf-footer.yf-public-footer .yf-footer__group button { padding: 0; border: 0; color: rgba(248, 244, 234, .68); background: transparent; font: inherit; font-size: 13px; line-height: 1.5; text-align: left; text-decoration: none; cursor: pointer; transition: color .2s ease; }
.yf-footer.yf-public-footer .yf-footer__group a:hover,
.yf-footer.yf-public-footer .yf-footer__group a:focus-visible,
.yf-footer.yf-public-footer .yf-footer__group button:hover,
.yf-footer.yf-public-footer .yf-footer__group button:focus-visible { color: #65d9ae; outline: none; }
.yf-footer__payments { border-top: 1px solid rgba(255, 255, 255, .08); }
.yf-footer__payments-inner { width: min(1180px, calc(100% - 40px)); min-height: 74px; margin: 0 auto; display: flex; align-items: center; gap: 24px; }
.yf-footer__payments-inner > span { flex: 0 0 auto; color: rgba(248, 244, 234, .52); font-size: 12px; font-weight: 700; }
.yf-footer__payment-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.yf-footer__payment-logos img { width: auto; max-width: 88px; height: 28px; object-fit: contain; padding: 5px 8px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 5px; background: #dfe9e5; }
.yf-error-report__trigger { all: unset; position: fixed; z-index: 10800; right: 22px; bottom: 20px; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; gap: 9px; padding: 11px 17px; border: 1px solid rgba(101, 217, 174, .38); border-radius: 8px; color: #092019; background: #65d9ae; box-shadow: 0 16px 42px rgba(0, 0, 0, .2); font: 750 13px/1.2 "Manrope", Arial, sans-serif; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.yf-error-report__trigger:hover { transform: translateY(-2px); background: #78e2bb; }
.yf-error-report__trigger i { font-size: 17px; }
body.modal-open .yf-error-report__trigger {
opacity: 0;
pointer-events: none;
transform: translateY(10px);
}
.yf-error-report__backdrop { position: fixed; z-index: 11990; inset: 0; background: rgba(4, 15, 12, .62); backdrop-filter: blur(5px); }
.yf-error-report__dialog { position: fixed; z-index: 12000; left: 50%; top: 50%; width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; transform: translate(-50%, -50%); padding: 30px; border: 1px solid rgba(16, 34, 30, .12); border-radius: 12px; color: #10221e; background: #fbfdfb; box-shadow: 0 30px 90px rgba(0, 0, 0, .3); font-family: "Manrope", Arial, sans-serif; }
.yf-error-report__dialog[hidden], .yf-error-report__backdrop[hidden] { display: none !important; }
.yf-error-report__close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #71817b; background: transparent; cursor: pointer; }
.yf-error-report__close:hover { color: #10221e; background: #edf4f0; }
.yf-error-report__icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 50%; color: #127456; background: #e1f5ed; font-size: 20px; }
.yf-error-report__heading > span { color: #987a18; font: 700 11px/1.3 "IBM Plex Mono", monospace; text-transform: uppercase; }
.yf-error-report__heading h2 { margin: 7px 42px 7px 0; color: #10221e; font-size: 25px; line-height: 1.18; }
.yf-error-report__heading p { margin: 0 0 22px; color: #687a73; font-size: 14px; line-height: 1.55; }
.yf-error-report form { display: grid; gap: 15px; }
.yf-error-report label { display: grid; gap: 7px; margin: 0; color: #31433c; font-size: 13px; font-weight: 700; }
.yf-error-report label small { color: #8a9893; font-weight: 500; }
.yf-error-report input, .yf-error-report textarea { width: 100%; min-height: 44px; padding: 11px 13px; border: 1px solid #ccd8d3; border-radius: 7px; color: #10221e; background: #fff; font: 500 14px/1.45 "Manrope", Arial, sans-serif; outline: none; resize: vertical; }
.yf-error-report input:focus, .yf-error-report textarea:focus { border-color: #269875; box-shadow: 0 0 0 3px rgba(38, 152, 117, .12); }
.yf-error-report input[readonly] { color: #55665f; background: #edf3f0; cursor: default; }
.yf-error-report__honeypot { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.yf-error-report__status { min-height: 20px; color: #697b74; font-size: 13px; }
.yf-error-report__status.is-success { color: #117555; }
.yf-error-report__status.is-error { color: #bd3942; }
.yf-error-report form .yf26-button { justify-self: start; min-width: 150px; }
.yf-error-report form .yf26-button:disabled { opacity: .6; cursor: wait; }
.yf-error-report__verification { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px 16px; align-items: start; padding: 18px; border: 1px solid #d6e4df; border-radius: 9px; background: #f1f7f4; }
.yf-error-report__verification > i { width: 46px; height: 46px; display: grid; place-items: center; grid-row: 1 / span 3; border-radius: 50%; color: #167b5f; background: #dff2ea; font-size: 19px; }
.yf-error-report__verification > div:not(.yf-error-report__status) { min-width: 0; }
.yf-error-report__verification strong { color: #173029; font-size: 15px; }
.yf-error-report__verification p { margin: 4px 0 0; color: #657770; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.yf-error-report__verification .yf26-button { justify-self: start; min-height: 42px; }
.yf-error-report__change-email { justify-self: start; padding: 0; border: 0; color: #187b62; background: transparent; font: 700 12px/1.4 "Manrope", Arial, sans-serif; text-decoration: underline; cursor: pointer; }
.yf-error-report__verification .yf-error-report__status { grid-column: 2; width: 100%; }
.yf-dialog-open { overflow: hidden; }
body:has(.yf-cookie:not([hidden])) .yf-error-report__trigger {
opacity: 0;
pointer-events: none;
}
@media (max-width: 820px) {
.yf-footer.yf-public-footer .yf-footer__inner { grid-template-columns: 1fr; gap: 34px; }
.yf-footer.yf-public-footer .yf-footer__columns { grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: 30px 22px; }
.yf-footer.yf-public-footer .yf-footer__group:last-child { grid-column: 1 / -1; }
.yf-footer__payments-inner { width: min(100% - 32px, 1180px); padding: 18px 0; align-items: flex-start; flex-direction: column; gap: 10px; }
}
@media (max-width: 575.98px) {
.yf-footer.yf-public-footer .yf-footer__inner { width: min(100% - 32px, 1180px); padding: 42px 0 34px; }
.yf-footer.yf-public-footer .yf-footer__columns { grid-template-columns: 1fr 1fr; gap: 30px 18px; }
.yf-error-report__trigger { right: 14px; bottom: 14px; width: 46px; padding: 0; justify-content: center; border-radius: 50%; }
.yf-error-report__trigger span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.yf-error-report__dialog { padding: 24px 20px; }
}
/* Analytics refinement: compact KPIs and readable decision widgets. */
.yf-income-kpi--year .yf-income-kpi__metric--year-summary {
grid-template-columns: 26px minmax(0, 1fr);
}
.yf-income-kpi--year .yf-income-kpi__metric--year-summary > i,
.yf-income-kpi--year .yf-income-kpi__rows--year > div > i {
width: 26px;
height: 26px;
}
.yf-income-kpi--year .yf-income-kpi__metric--year-summary > span { font-size: 12px; }
.yf-income-kpi--year .yf-income-kpi__rows--year > div {
grid-template-columns: 28px minmax(0, 1fr) minmax(96px, auto);
}
.yf-income-kpi--year .yf-income-kpi__rows--year > div > span,
.yf-income-kpi--year .yf-income-kpi__rows--year > div > strong { font-size: 13px; }
@media (min-width: 992px) {
#income-month-kpi-card .card-body { display: flex; }
#income-month-kpi-card .yf-income-kpi--month { width: 100%; margin-block: auto; }
}
.finance-month-insights-card .card-body,
.finance-picture-card .card-body { position: relative; }
.finance-section-heading--pinned-info { padding-right: 48px; }
.finance-section-heading--pinned-info .finance-section-heading__info {
position: absolute;
z-index: 2;
top: 18px;
right: 18px;
margin: 0;
}
.finance-month-insight { min-height: 0; }
.finance-month-insight p { font-size: 13px; }
.finance-picture-heading { align-items: center; }
.finance-picture-heading__copy { display: grid; gap: 4px; min-width: 0; }
.finance-picture-heading__period { color: #6e807a; font-size: 13px; }
.finance-picture-grid { gap: 0; margin-top: 26px; }
.finance-picture-column {
display: flex;
flex-direction: column;
min-width: 0;
padding: 0 28px;
border-left: 1px solid #dfe8e5;
}
.finance-picture-column:first-child { padding-left: 0; border-left: 0; }
.finance-picture-column:last-child { padding-right: 0; }
.finance-picture-column__heading { display: flex; align-items: center; gap: 12px; }
.finance-picture-column__heading h6 { margin: 0; color: #20342e; font-size: 20px; font-weight: 700; text-transform: none; }
.finance-picture-column__icon {
display: grid;
place-items: center;
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 50%;
color: #15976d;
background: #e9f7f1;
font-size: 19px;
}
.finance-picture-column[data-finance-picture="expenses"] .finance-picture-column__icon { color: #df5058; background: #fff0f1; }
.finance-picture-primary { display: grid; gap: 8px; margin-top: 20px; padding-bottom: 18px; border-bottom: 1px solid #e1e9e6; }
.finance-picture-primary > span,
.finance-picture-secondary span { display: inline-flex; align-items: center; gap: 7px; color: #687a74; font-size: 12px; }
.finance-picture-primary > span i,
.finance-picture-secondary span i { display: block; width: 9px; height: 9px; border-radius: 50%; }
.finance-picture-primary .is-fact { background: #2eb780; }
.finance-picture-secondary .is-plan { background: #387fe1; }
.finance-picture-secondary .is-forecast { background: #889791; }
.finance-picture-primary strong { color: #20342e; font-size: 30px; line-height: 1.05; letter-spacing: 0; }
.finance-picture-primary strong.is-positive { color: #15976d; }
.finance-picture-primary strong.is-negative { color: #df5058; }
.finance-picture-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.finance-picture-secondary > div { display: grid; gap: 6px; min-width: 0; }
.finance-picture-secondary strong { color: #243832; font-size: 17px; overflow-wrap: normal; word-break: normal; }
.finance-picture-secondary strong.is-positive { color: #168c63; }
.finance-picture-secondary strong.is-negative { color: #df5058; }
.finance-picture-scale {
position: relative;
height: 16px;
margin-top: 22px;
overflow: visible;
border-radius: 999px;
background: #e6eeeb;
}
.finance-picture-scale__fill {
position: absolute;
top: 0;
bottom: 0;
border-radius: 999px;
background: #2eb780;
transition: left .3s ease, width .3s ease;
}
.finance-picture-column[data-finance-picture="expenses"] .finance-picture-scale__fill,
.finance-picture-scale__fill[data-direction="negative"] { background: #eb5a61; }
.finance-picture-scale__marker {
position: absolute;
z-index: 3;
top: -6px;
width: 2px;
height: 28px;
transform: translateX(-1px);
border-radius: 2px;
}
.finance-picture-scale__marker.is-plan { background: #387fe1; }
.finance-picture-scale__marker.is-forecast { width: 8px; height: 8px; top: 4px; transform: translateX(-4px); border: 2px solid #fff; border-radius: 50%; background: #73827d; box-shadow: 0 0 0 1px #73827d; }
.finance-picture-scale--signed { background: linear-gradient(90deg, #f8e3e5 0 50%, #e6f4ee 50% 100%); }
.finance-picture-scale__zero { top: -4px; bottom: -4px; background: #71817b; }
.finance-picture-axis { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; color: #74847e; font-size: 11px; }
.finance-picture-axis span:nth-child(2) { color: #387fe1; }
.finance-picture-status {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: 12px;
align-items: center;
margin-top: 22px;
padding: 14px;
border: 1px solid #dce9e4;
border-radius: 7px;
background: #f3faf7;
}
.finance-picture-status__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #148b64; background: #dff3ea; }
.finance-picture-status > div { display: grid; gap: 3px; }
.finance-picture-status strong { color: #168c63; font-size: 14px; }
.finance-picture-status span { color: #667872; font-size: 12px; }
.finance-picture-status.is-negative { border-color: #f0d6d8; background: #fff2f3; }
.finance-picture-status.is-negative .finance-picture-status__icon { color: #dc4d55; background: #ffe1e4; }
.finance-picture-status.is-negative strong { color: #dc4d55; }
.finance-picture-status.is-neutral { background: #f5f7f6; }
.finance-picture-status.is-neutral .finance-picture-status__icon { color: #70817b; background: #e8edeb; }
.finance-picture-status.is-neutral strong { color: #53645f; }
.finance-analytics-insight-card .finance-analytics-insight-layout { min-height: 334px; gap: 10px; }
.finance-analytics-trend-table { height: 100%; align-content: space-evenly; }
.finance-analytics-trend-row {
grid-template-columns: minmax(88px, 1fr) minmax(88px, auto) 120px;
min-height: 66px;
gap: 10px;
padding: 9px 2px;
}
.finance-analytics-trend-row__label { font-size: 13px; }
.finance-analytics-trend-row__change { justify-self: end; font-size: 14px; }
.finance-trend-sparkline { width: 120px; height: 46px; color: #7b8d87; }
.finance-trend-sparkline polygon { fill: currentColor; opacity: .12; }
.finance-trend-sparkline polyline { stroke: currentColor; stroke-width: 2.6; }
.finance-trend-sparkline circle { fill: currentColor; stroke: #fff; stroke-width: 1.5; }
.finance-trend-sparkline.is-positive { color: #28a978; }
.finance-trend-sparkline.is-negative { color: #df565e; }
.finance-trend-sparkline.is-warning { color: #d39531; }
.finance-analytics-insight-card .finance-analytics-insight-note { min-height: 0; padding: 10px 11px; font-size: 12px; }
.finance-analytics-anomaly-state { align-content: stretch; }
.finance-analytics-anomaly-row { min-height: 96px; padding: 14px 3px; }
.finance-analytics-anomaly-row__main { align-content: start; gap: 7px; }
.finance-analytics-anomaly-row__main strong { font-size: 14px; }
.finance-analytics-anomaly-row__main span { font-size: 11px; }
.finance-analytics-anomaly-row__value { align-content: start; gap: 8px; }
.finance-analytics-anomaly-row__value > div { display: flex; align-items: baseline; gap: 9px; }
.finance-analytics-anomaly-row__value strong { font-size: 15px; }
.finance-analytics-anomaly-row__value b { color: #dc4d55; font-size: 14px; }
.finance-analytics-severity-badge { min-height: 25px; padding-inline: 9px; font-size: 10px; }
.finance-analytics-regular-summary { gap: 4px; margin-bottom: 9px; }
.finance-analytics-regular-summary strong { font-size: 17px; }
.finance-analytics-regular-summary span { font-size: 11px; }
.finance-analytics-regular-row { min-height: 42px; }
.finance-analytics-regular-row__name,
.finance-analytics-regular-row strong { font-size: 12px; }
.yf-analytics-detail-modal .modal-body { font-size: 14px; line-height: 1.55; }
.yf-analytics-detail-modal .finance-analytics-anomaly-row,
.yf-analytics-detail-modal .finance-analytics-regular-row { padding-block: 15px; }
body.yf-dashboard-auth.dark-theme .finance-picture-heading__period,
body.yf-dashboard-auth.dark-theme .finance-picture-primary > span,
body.yf-dashboard-auth.dark-theme .finance-picture-secondary span,
body.yf-dashboard-auth.dark-theme .finance-picture-axis,
body.yf-dashboard-auth.dark-theme .finance-picture-status span { color: #a8b8b2; }
body.yf-dashboard-auth.dark-theme .finance-picture-column { border-color: rgba(176, 207, 197, .14); }
body.yf-dashboard-auth.dark-theme .finance-picture-column__heading h6,
body.yf-dashboard-auth.dark-theme .finance-picture-primary strong,
body.yf-dashboard-auth.dark-theme .finance-picture-secondary strong { color: #edf5f2; }
body.yf-dashboard-auth.dark-theme .finance-picture-column__icon { color: #75d6b3; background: rgba(54, 171, 130, .16); }
body.yf-dashboard-auth.dark-theme .finance-picture-column[data-finance-picture="expenses"] .finance-picture-column__icon { color: #ff9298; background: rgba(207, 70, 80, .17); }
body.yf-dashboard-auth.dark-theme .finance-picture-primary { border-color: rgba(176, 207, 197, .13); }
body.yf-dashboard-auth.dark-theme .finance-picture-scale { background: #364240; }
body.yf-dashboard-auth.dark-theme .finance-picture-scale__marker.is-forecast { border-color: #202a2c; }
body.yf-dashboard-auth.dark-theme .finance-picture-status { border-color: rgba(102, 195, 162, .2); background: #22322f; }
body.yf-dashboard-auth.dark-theme .finance-picture-status.is-negative { border-color: rgba(225, 84, 94, .25); background: #352729; }
body.yf-dashboard-auth.dark-theme .finance-picture-status.is-neutral { background: #293234; }
@media (max-width: 991.98px) {
.finance-picture-column { padding: 22px 0; border-top: 1px solid #dfe8e5; border-left: 0; }
.finance-picture-column:first-child { padding-top: 0; border-top: 0; }
.finance-picture-column:last-child { padding-bottom: 0; }
.finance-analytics-insight-card .finance-analytics-insight-layout { min-height: 0; }
}
@media (max-width: 575.98px) {
.finance-section-heading--pinned-info { padding-right: 42px; }
.finance-section-heading--pinned-info .finance-section-heading__info { top: 14px; right: 14px; }
.finance-picture-column__heading h6 { font-size: 18px; }
.finance-picture-primary strong { font-size: 27px; }
.finance-picture-secondary strong { font-size: 15px; }
.finance-analytics-trend-row { grid-template-columns: minmax(74px, 1fr) auto 92px; min-height: 62px; }
.finance-trend-sparkline { width: 92px; height: 42px; }
.finance-analytics-anomaly-row { grid-template-columns: 1fr; min-height: 0; }
.finance-analytics-anomaly-row__value { justify-items: start; text-align: left; }
}
/* YOUFI rewards hub */
.yf-rewards-modal {
--yf-reward-ink: #17211f;
--yf-reward-muted: #697772;
--yf-reward-line: rgba(18, 50, 43, .12);
--yf-reward-soft: #f1f6f4;
--yf-reward-mint: #149c73;
--yf-reward-mint-soft: #daf3e9;
overflow: hidden;
padding: 0 !important;
border: 1px solid rgba(255, 255, 255, .35) !important;
border-radius: 12px !important;
background: #fbfcfc !important;
color: var(--yf-reward-ink) !important;
box-shadow: 0 28px 90px rgba(5, 25, 20, .28);
}
.yf-rewards-modal .modal-header {
min-height: 68px;
padding: 20px 24px;
border-bottom: 1px solid var(--yf-reward-line);
background: #fff;
}
.yf-rewards-modal .modal-title {
color: var(--yf-reward-ink);
font-size: 22px;
font-weight: 750;
}
.yf-rewards-modal .btn-close {
margin: 0;
}
.yf-rewards-modal__body {
padding: 20px 24px 24px;
}
.yf-rewards-head {
align-items: stretch;
}
.yf-rewards-wallet {
height: 100%;
padding: 0 !important;
border: 1px solid var(--yf-reward-line) !important;
border-radius: 9px !important;
background: linear-gradient(135deg, #edf8f4, #fff) !important;
box-shadow: none !important;
}
.yf-rewards-wallet .card-body {
display: flex;
align-items: center;
justify-content: center;
min-height: 110px;
padding: 16px;
}
.yf-rewards-wallet img {
width: 52px !important;
height: 52px;
margin-bottom: 7px;
object-fit: contain;
}
.yf-rewards-wallet #youfi-balance {
color: var(--yf-reward-ink);
font-family: "IBM Plex Mono", monospace;
font-size: 20px !important;
}
.yf-rewards-tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
height: 100%;
}
.yf-rewards-tabs .btn {
min-height: 48px;
margin: 0 !important;
border: 1px solid var(--yf-reward-line);
border-radius: 8px;
background: #f3f6f5;
color: #46544f;
font-size: 13px;
font-weight: 700;
}
.yf-rewards-tabs .btn:hover:not(:disabled) {
border-color: rgba(20, 156, 115, .35);
background: #eaf5f1;
color: #0e7356;
}
.yf-rewards-tabs .btn-primary,
.yf-rewards-tabs .btn-primary:hover {
border-color: #176d57;
background: #176d57;
color: #fff;
}
.yf-rewards-tabs .btn:disabled {
opacity: .55;
}
.yf-rewards-modal #leader-top {
display: none;
}
.yf-rewards-loading,
.yf-rewards-empty {
display: flex;
min-height: 240px;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--yf-reward-muted);
font-size: 14px;
}
.yf-rewards-empty {
flex-direction: column;
text-align: center;
}
.yf-rewards-empty i {
color: #d65b62;
font-size: 28px;
}
.yf-rewards-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 12px;
}
.yf-rewards-section-head > div,
.yf-shop-intro > div,
.yf-leader-summary > div {
display: flex;
flex-direction: column;
gap: 2px;
}
.yf-rewards-section-head span,
.yf-shop-intro span,
.yf-leader-summary span {
color: var(--yf-reward-muted);
font-size: 11px;
}
.yf-rewards-section-head strong,
.yf-shop-intro strong,
.yf-leader-summary strong {
color: var(--yf-reward-ink) !important;
font-size: 15px;
}
.yf-rewards-ready {
flex: 0 0 auto;
padding: 7px 10px;
border-radius: 999px;
background: var(--yf-reward-mint-soft);
color: #0d7758 !important;
font-weight: 750;
}
.yf-task-list {
display: grid;
gap: 9px;
}
.yf-task-section + .yf-task-section {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--yf-reward-line);
}
.yf-task-section__title {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
margin-bottom: 10px;
}
.yf-task-section__title span {
color: var(--yf-reward-ink);
font-size: 14px;
font-weight: 800;
}
.yf-task-section__title small {
color: var(--yf-reward-muted);
font-size: 10px;
}
.yf-weekly-report-offer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-top: 18px;
padding: 18px 20px;
border: 1px solid rgba(45, 167, 126, .28);
border-radius: 8px;
background: rgba(45, 167, 126, .07);
}
.yf-weekly-report-offer > div,
.yf-weekly-report-offer span {
display: flex;
align-items: center;
gap: 12px;
}
.yf-weekly-report-offer span {
align-items: flex-start;
flex-direction: column;
gap: 2px;
}
.yf-weekly-report-offer i { color: #20966f; font-size: 22px; }
.yf-weekly-report-offer small { color: var(--yf-muted, #6d7772); }
.yf-weekly-report-offer .btn { flex: 0 0 auto; color: #fff; background: #15775d; }
.yf-notifications-nav-item { position: relative; }
.yf-notifications-button { position: relative; display: grid !important; width: 38px; height: 38px; padding: 0 !important; place-items: center; border: 0; background: transparent; border-radius: 50%; }
.yf-notifications-button:hover, .yf-notifications-button:focus-visible { background: rgba(255,255,255,.1); }
.yf-notifications-button i { font-size: 16px; }
.yf-notifications-badge { position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border: 2px solid #20272a; border-radius: 9px; background: #e3505a; color: #fff; font-size: 9px; font-weight: 800; line-height: 13px; text-align: center; }
.yf-notifications-button.has-unread i { animation: yf-notification-ring .55s ease 1; transform-origin: 50% 0; }
@keyframes yf-notification-ring { 0%,100% { transform: rotate(0); } 25% { transform: rotate(12deg); } 55% { transform: rotate(-10deg); } 78% { transform: rotate(6deg); } }
.yf-notifications-dialog { width: min(560px, calc(100vw - 24px)); }
.yf-notifications-panel { overflow: hidden; border: 1px solid rgba(31,91,74,.2); border-radius: 10px; }
.yf-notifications-panel .modal-header { padding: 19px 21px; }
.yf-notifications-panel .modal-header .modal-title { font-size: 20px; line-height: 1.25; }
.yf-notifications-panel .modal-header > div { display: grid; gap: 1px; }
.yf-notifications-panel .modal-header > div > span { color: #248b6d; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.yf-notifications-panel .modal-body { padding: 18px 21px 21px; }
.yf-notifications-toolbar { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; color: #75817d; font-size: 13px; }
.yf-notifications-toolbar button { padding: 5px 0; border: 0; background: transparent; color: #168666; font-size: 13px; font-weight: 700; }
.yf-notifications-list { display: grid; }
.yf-notification-item { position: relative; padding: 17px 4px 17px 19px; border-bottom: 1px solid rgba(20,48,41,.1); cursor: default; }
.yf-notification-item:last-child { border-bottom: 0; }
.yf-notification-item::before { content: ''; position: absolute; left: 1px; top: 23px; width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.yf-notification-item.is-unread::before { background: #2ba77d; box-shadow: 0 0 0 4px rgba(43,167,125,.11); }
.yf-notification-item > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.yf-notification-item > div span { color: #248b6d; font-size: 12px; font-weight: 750; }
.yf-notification-item time { color: #89938f; font-size: 12px; }
.yf-notification-item > strong { display: block; margin-top: 6px; color: #172622; font-size: 16px; line-height: 1.35; }
.yf-notification-item p { margin: 7px 0 0; color: #65736e; font-size: 14px; line-height: 1.6; white-space: pre-line; }
.yf-notification-item a { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: #168666; font-size: 13px; font-weight: 750; text-decoration: none; }
.yf-notifications-empty { min-height: 190px; display: grid; place-items: center; align-content: center; gap: 7px; color: #7d8884; text-align: center; }
.yf-notifications-empty i { color: #54a98e; font-size: 30px; }
.yf-notifications-empty strong { color: #293a35; font-size: 16px; }
.yf-notifications-empty span { max-width: 360px; font-size: 13px; line-height: 1.55; }
.yf-notifications-loading { display: grid; gap: 8px; padding: 16px 0; }
.yf-notifications-loading span { display: block; height: 62px; border-radius: 7px; background: linear-gradient(90deg,#f1f5f3,#e5eeeb,#f1f5f3); background-size: 200% 100%; animation: yf-skeleton 1.1s linear infinite; }
.dark-theme .yf-notifications-panel { border-color: #3c4c4a; background: #20282b; }
.dark-theme .yf-notification-item { border-color: rgba(220,235,230,.1); }
.dark-theme .yf-notification-item > strong, .dark-theme .yf-notifications-empty strong { color: #edf3f1; }
.dark-theme .yf-notification-item p, .dark-theme .yf-notifications-toolbar, .dark-theme .yf-notifications-empty { color: #9eaaa6; }
.dark-theme .yf-notifications-loading span { background: linear-gradient(90deg,#283235,#324043,#283235); background-size: 200% 100%; }
@media (max-width: 575.98px) {
.yf-weekly-report-offer { align-items: stretch; flex-direction: column; }
.yf-weekly-report-offer .btn { width: 100%; }
}
.yf-task-card {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 164px;
align-items: center;
gap: 14px;
padding: 14px;
border: 1px solid var(--yf-reward-line);
border-radius: 9px;
background: #fff;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.yf-task-card:hover {
transform: translateY(-1px);
border-color: rgba(20, 156, 115, .3);
box-shadow: 0 8px 22px rgba(25, 53, 46, .07);
}
.yf-task-card.is-completed {
background: #f7faf9;
}
.yf-task-card.is-ready {
border-color: rgba(20, 156, 115, .42);
}
.yf-task-card.is-current {
border-color: rgba(20, 156, 115, .58);
box-shadow: 0 0 0 3px rgba(42, 181, 137, .1);
}
.yf-task-card.is-completed_unclaimed {
border-color: rgba(20, 156, 115, .42);
background: #f3fbf8;
}
.yf-task-card.is-locked,
.yf-task-card.is-disabled,
.yf-task-card.is-expired {
opacity: .62;
}
.yf-task-card.is-locked .yf-task-action {
pointer-events: none;
}
.yf-task-card__icon {
display: grid;
width: 42px;
height: 42px;
place-items: center;
border-radius: 50%;
background: #e6f4ef;
color: #138362;
font-size: 18px;
}
.yf-task-card.is-completed .yf-task-card__icon {
background: #edf1f0;
color: #7f8c87;
}
.yf-task-card__meta {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
}
.yf-task-card__meta span {
padding: 2px 6px;
border-radius: 4px;
background: var(--yf-reward-soft);
color: var(--yf-reward-muted);
font-size: 9px;
font-weight: 700;
}
.yf-task-card__meta .yf-task-card__reward {
margin-left: auto;
background: #fff7d7;
color: #8a6a08;
}
.yf-task-card h6 {
margin: 0 0 3px;
color: var(--yf-reward-ink);
font-size: 14px;
font-weight: 750;
}
.yf-task-card p {
margin: 0;
color: var(--yf-reward-muted);
font-size: 11px;
line-height: 1.5;
}
.yf-task-progress {
display: grid;
grid-template-columns: minmax(90px, 150px) auto;
align-items: center;
gap: 8px;
margin-top: 8px;
}
.yf-task-progress__track {
overflow: hidden;
height: 5px;
border-radius: 999px;
background: #e7edeb;
}
.yf-task-progress__track span {
display: block;
height: 100%;
border-radius: inherit;
background: #36b98d;
}
.yf-task-progress > span,
.yf-task-card__action small {
color: var(--yf-reward-muted);
font-size: 9px;
}
.yf-task-card__action {
display: flex;
flex-direction: column;
gap: 5px;
text-align: center;
}
.yf-task-action {
min-height: 38px;
border: 1px solid var(--yf-reward-line);
border-radius: 7px;
background: #f3f6f5;
color: #30433d;
font-size: 11px;
font-weight: 750;
}
.yf-task-action:hover:not(:disabled) {
border-color: #64bea0;
background: #eaf7f2;
color: #0e7356;
}
.yf-task-action--claim,
.yf-task-action--claim:hover:not(:disabled) {
border-color: #178565;
background: #178565;
color: #fff;
}
.yf-youfi-indicator {
position: absolute;
top: 5px;
right: 1px;
display: block;
width: 8px;
height: 8px;
border: 0;
border-radius: 50%;
}
#tasks-btn { position: relative; }
.yf-youfi-indicator[hidden] { display: none; }
.yf-youfi-indicator.is-green {
background: #2dc891;
box-shadow: 0 0 3px 3px rgba(45, 200, 145, .42);
}
.yf-youfi-indicator.is-red {
background: #ff6b6b;
box-shadow: 0 0 3px 3px rgba(255, 107, 107, .5);
}
.yf-welcome-modal .modal-dialog { max-width: 560px; }
.yf-welcome-modal .modal-content {
overflow: hidden;
border: 1px solid rgba(26, 129, 99, .2);
border-radius: 18px;
background: #fff;
box-shadow: 0 28px 80px rgba(10, 49, 38, .22);
}
.yf-welcome-modal .modal-header {
align-items: center;
padding: 22px 26px 0;
}
.yf-welcome-modal__eyebrow {
color: #18805f;
font-size: 12px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
.yf-welcome-modal .modal-body { padding: 18px 26px 8px; }
.yf-welcome-modal__icon {
display: grid;
width: 54px;
height: 54px;
margin: 0 auto 18px;
place-items: center;
border-radius: 15px;
background: #e5f6ef;
color: #178361;
font-size: 25px;
}
.yf-welcome-modal h2 {
margin-bottom: 10px;
color: #162722;
font-size: 30px;
font-weight: 800;
letter-spacing: 0;
}
.yf-welcome-modal .modal-body > p {
margin-bottom: 20px;
color: #66746f;
font-size: 15px;
line-height: 1.6;
}
.yf-welcome-modal__hub {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 17px;
border: 1px solid #d8ebe4;
border-radius: 12px;
background: #f3faf7;
}
.yf-welcome-modal__hub-icon {
display: grid;
flex: 0 0 38px;
width: 38px;
height: 38px;
place-items: center;
border-radius: 10px;
background: #d9f1e8;
color: #16775a;
align-self: center;
line-height: 1;
}
.yf-welcome-modal__hub-icon i {
display: grid;
width: 100%;
height: 100%;
place-items: center;
line-height: 1;
}
.yf-welcome-modal__hub-icon i::before { display: block; line-height: 1; }
.yf-welcome-modal__hub strong,
.yf-welcome-modal__hub span { display: block; }
.yf-welcome-modal__hub strong {
margin-bottom: 4px;
color: #1f332d;
font-size: 14px;
}
.yf-welcome-modal__hub div > span {
color: #71807b;
font-size: 13px;
line-height: 1.5;
}
.yf-welcome-modal .modal-footer {
gap: 10px;
padding: 20px 26px 26px;
}
.yf-welcome-modal .btn {
min-height: 44px;
border-radius: 9px;
font-size: 14px;
font-weight: 700;
}
.yf-welcome-modal__primary {
border-color: #178361;
background: #178361;
color: #fff;
}
.yf-welcome-modal__primary:hover,
.yf-welcome-modal__primary:focus {
border-color: #11694d;
background: #11694d;
color: #fff;
}
.yf-welcome-modal__secondary {
border-color: #d5dfdc;
background: transparent;
color: #52615c;
}
.dark-theme .yf-welcome-modal .modal-content {
border-color: rgba(111, 205, 174, .25);
background: #16231f;
}
.dark-theme .yf-welcome-modal h2,
.dark-theme .yf-welcome-modal__hub strong { color: #f2f7f5; }
.dark-theme .yf-welcome-modal .modal-body > p,
.dark-theme .yf-welcome-modal__hub div > span { color: #aab8b3; }
.dark-theme .yf-welcome-modal__hub {
border-color: rgba(123, 205, 178, .18);
background: #1c2d28;
}
.dark-theme .yf-welcome-modal__secondary {
border-color: #40524c;
color: #d2ddd9;
}
.dark-theme .yf-welcome-modal .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
@media (max-width: 575.98px) {
.yf-welcome-modal .modal-dialog { margin: 14px; }
.yf-welcome-modal .modal-header { padding: 19px 20px 0; }
.yf-welcome-modal .modal-body { padding: 16px 20px 6px; }
.yf-welcome-modal h2 { font-size: 26px; }
.yf-welcome-modal .modal-footer {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
padding: 18px 20px 22px;
}
.yf-welcome-modal .modal-footer .btn { width: 100%; }
}
.yf-onboarding-highlight {
position: relative;
z-index: 2;
outline: 3px solid rgba(40, 181, 137, .35);
outline-offset: 4px;
box-shadow: 0 0 0 10px rgba(40, 181, 137, .08), 0 18px 48px rgba(18, 78, 62, .16) !important;
transition: outline-color .25s ease, box-shadow .25s ease;
}
.yf-onboarding-focus {
position: fixed;
inset: 0;
z-index: 1045;
display: grid;
place-items: start center;
padding: 88px 20px 20px;
pointer-events: none;
}
.yf-onboarding-focus[hidden] { display: none; }
.yf-onboarding-focus__backdrop {
position: absolute;
inset: 0;
background: rgba(5, 20, 17, .76);
backdrop-filter: blur(5px);
pointer-events: auto;
}
.yf-onboarding-focus__panel {
position: relative;
width: min(100%, 440px);
padding: 24px 26px;
border: 1px solid rgba(110, 217, 180, .35);
border-radius: 14px;
background: #f9fcfb;
color: #132a24;
box-shadow: 0 30px 90px rgba(0, 0, 0, .34);
animation: yf-onboarding-panel-in .36s cubic-bezier(.22, 1, .36, 1) both;
pointer-events: auto;
}
.yf-onboarding-nav-layer {
position: relative !important;
z-index: 1048 !important;
}
#tasks-btn.yf-onboarding-spotlight-target {
position: relative;
z-index: 1049;
border-radius: 8px;
background: #eefaf6;
color: #11392e !important;
box-shadow: 0 0 0 4px rgba(111, 224, 185, .34), 0 14px 42px rgba(0, 0, 0, .34);
pointer-events: auto;
animation: yf-onboarding-target-pulse 1.7s ease-in-out infinite;
}
.yf-onboarding-focus__hint {
display: inline-flex;
gap: 8px;
align-items: center;
margin-top: 16px;
color: #177457;
font-size: 13px;
font-weight: 700;
}
.yf-onboarding-focus__hint i { font-size: 16px; }
.yf-onboarding-focus__skip {
display: block;
margin: 18px auto 0;
padding: 2px 4px;
border: 0;
background: transparent;
color: #81908b;
font-size: 12px;
line-height: 1.4;
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 3px;
transition: color .18s ease, text-decoration-color .18s ease;
}
.yf-onboarding-focus__skip:hover,
.yf-onboarding-focus__skip:focus-visible {
color: #465a53;
text-decoration-color: currentColor;
}
.yf-onboarding-focus__skip:disabled { cursor: wait; opacity: .58; }
.yf-onboarding-focus__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.yf-onboarding-focus__duration {
display: inline-flex;
align-items: center;
gap: 6px;
color: #667a73;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
@keyframes yf-onboarding-panel-in {
from { opacity: 0; transform: translateY(-12px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes yf-onboarding-target-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(111, 224, 185, .28), 0 14px 42px rgba(0, 0, 0, .34); }
50% { box-shadow: 0 0 0 8px rgba(111, 224, 185, .13), 0 18px 52px rgba(0, 0, 0, .42); }
}
.yf-onboarding-focus__step {
display: inline-flex;
margin-bottom: 0;
padding: 5px 9px;
border-radius: 999px;
background: #dcf5ec;
color: #137556;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
}
.yf-onboarding-focus__panel h2 {
margin: 0 0 10px;
font-size: clamp(24px, 4vw, 34px);
}
.yf-onboarding-focus__panel p {
margin: 0;
color: #5d6f69;
font-size: 15px;
line-height: 1.6;
}
.yf-onboarding-focus__actions {
display: flex;
gap: 10px;
margin-top: 22px;
}
.yf-onboarding-focus__actions .btn {
min-height: 44px;
padding: 9px 16px;
border-radius: 8px;
font-weight: 750;
}
.yf-onboarding-focus__primary {
background: #163d33;
color: #fff;
}
.yf-onboarding-focus__secondary {
border: 1px solid #93d6be;
background: #e7f7f1;
color: #155d49;
}
.yf26-demo-form {
display: contents;
}
.yf26-button--demo {
border: 1px solid rgba(157, 223, 196, .34);
background: rgba(157, 223, 196, .08);
color: #dff8ee;
}
.yf26-button--demo:hover {
border-color: rgba(214, 180, 93, .62);
background: rgba(214, 180, 93, .1);
color: #fff8e6;
}
.yf-demo-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 10px;
padding: 13px 16px;
border: 1px solid rgba(38, 167, 127, .28);
border-radius: 8px;
background: #e9f7f2;
color: #29423a;
}
.yf-demo-banner > div,
.yf-demo-banner__actions {
display: flex;
align-items: center;
gap: 10px;
}
.yf-demo-banner i { color: #168363; font-size: 18px; }
.yf-demo-banner__actions form { margin: 0; }
.yf-demo-banner .btn {
min-height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 8px 13px;
border: 1px solid rgba(22, 131, 99, .25);
border-radius: 7px;
background: #fff;
color: #17634d;
font-size: 12px;
font-weight: 700;
line-height: 1;
text-decoration: none;
}
.yf-demo-banner .btn:hover,
.yf-demo-banner .btn:focus-visible { border-color: rgba(22, 131, 99, .48); background: #f4fbf8; color: #0f624b; outline: none; }
.yf-demo-banner .yf-demo-banner__primary,
.yf-demo-banner__actions form:first-child .btn { border-color: #176f56; background: #176f56; color: #fff; }
.yf-demo-banner .yf-demo-banner__primary:hover,
.yf-demo-banner .yf-demo-banner__primary:focus-visible { border-color: #0e5c46; background: #0e5c46; color: #fff; }
body.yf-demo-mode .yf-card-action,
body.yf-demo-mode #tasks-btn,
body.yf-demo-mode [data-bs-target="#createTagModal"],
body.yf-demo-mode [data-bs-target="#expenseModal"],
body.yf-demo-mode [data-bs-target="#planModal"],
body.yf-demo-mode [data-bs-target="#createIncomeTagModal"],
body.yf-demo-mode [data-bs-target="#incomeModal"],
body.yf-demo-mode [data-bs-target="#incomePlanModal"] {
display: none !important;
}
body.yf-dashboard-auth.dark-theme .yf-demo-banner {
border-color: rgba(77, 183, 148, .28);
background: #17332b;
color: #d7e8e2;
}
.yf-weekly-report-form__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 132px;
gap: 10px;
}
.yf-weekly-report-form select,
.yf-weekly-report-form input[type="time"] {
width: 100%;
min-height: 40px;
padding: 8px 10px;
border: 1px solid var(--yf-modal-line, rgba(20, 50, 42, .15));
border-radius: 7px;
background: var(--yf-modal-input, #fff);
color: inherit;
}
.yf-weekly-report-next {
display: block;
color: var(--yf-reward-muted);
line-height: 1.45;
}
body.yf-dashboard-auth.dark-theme .yf-onboarding-focus__panel {
border-color: rgba(113, 210, 177, .3);
background: #162521;
color: #eff8f4;
}
body.yf-dashboard-auth.dark-theme .yf-onboarding-focus__panel p { color: #a8bbb5; }
body.yf-dashboard-auth.dark-theme #tasks-btn.yf-onboarding-spotlight-target {
background: #dff7ee;
color: #102f27 !important;
}
.yf-tutorial-task-note {
display: flex;
gap: 11px;
align-items: center;
margin: 0 0 10px;
padding: 12px 14px;
border: 1px solid rgba(28, 153, 112, .3);
border-radius: 9px;
background: #edf9f5;
color: #27473d;
}
.yf-tutorial-task-note i { color: #168461; font-size: 20px; }
.yf-tutorial-task-note span,
.yf-tutorial-task-note strong { display: block; }
.yf-tutorial-task-note strong { margin-bottom: 2px; color: #15372d; }
#tasksModal.yf-tutorial-task-focus .yf-task-card:not(.yf-tutorial-task-target),
#tasksModal.yf-tutorial-task-focus .yf-task-section:nth-of-type(2) {
opacity: .34;
filter: saturate(.45);
transition: opacity .25s ease, filter .25s ease;
}
#tasksModal .yf-tutorial-task-target {
position: relative;
z-index: 2;
border-color: rgba(26, 151, 109, .6);
box-shadow: 0 0 0 4px rgba(42, 181, 137, .12), 0 16px 38px rgba(15, 76, 58, .16);
animation: yf-onboarding-task-in .4s cubic-bezier(.22, 1, .36, 1) both;
}
body.yf-dashboard-auth.dark-theme .yf-tutorial-task-note {
border-color: rgba(91, 205, 166, .28);
background: #19342c;
color: #b8ccc5;
}
body.yf-dashboard-auth.dark-theme .yf-tutorial-task-note strong { color: #edf8f4; }
@keyframes yf-onboarding-task-in {
from { opacity: .45; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
#tasks-btn.yf-onboarding-spotlight-target,
.yf-onboarding-focus__panel,
#tasksModal .yf-tutorial-task-target { animation: none; }
}
/* Keep the public landing's first render focused on the hero on mobile. */
@supports (content-visibility: auto) {
.yf-landing-body .yf26-section,
.yf-landing-body .yf-footer {
content-visibility: auto;
contain-intrinsic-size: auto 760px;
}
}
.yf-leader-summary,
.yf-shop-intro {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 12px;
padding: 13px 15px;
border: 1px solid var(--yf-reward-line);
border-radius: 8px;
background: var(--yf-reward-soft);
}
.yf-leader-summary > div:last-child {
text-align: right;
}
.yf-leader-list {
overflow: hidden;
border: 1px solid var(--yf-reward-line);
border-radius: 9px;
}
.yf-leader-row {
display: grid;
grid-template-columns: 34px 38px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
min-height: 58px;
padding: 8px 14px;
border-bottom: 1px solid var(--yf-reward-line);
background: #fff;
}
.yf-leader-row:last-child {
border-bottom: 0;
}
.yf-leader-row.is-current {
background: #eaf7f2;
}
.yf-leader-row img {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
}
.yf-leader-rank {
color: var(--yf-reward-muted);
font-family: "IBM Plex Mono", monospace;
font-size: 12px;
font-weight: 700;
}
.yf-leader-row > div {
display: flex;
min-width: 0;
flex-direction: column;
}
.yf-leader-row strong {
overflow: hidden;
color: var(--yf-reward-ink) !important;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.yf-leader-row > div span,
.yf-leader-balance small {
color: var(--yf-reward-muted);
font-size: 9px;
}
.yf-leader-balance {
display: flex;
flex-direction: column;
color: var(--yf-reward-ink);
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
font-weight: 700;
text-align: right;
}
.yf-shop-pass {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
padding: 13px 15px;
border: 1px solid rgba(20, 156, 115, .3);
border-radius: 8px;
background: #eaf7f2;
}
.yf-shop-pass.is-empty {
border-color: var(--yf-reward-line);
background: var(--yf-reward-soft);
}
.yf-shop-pass > i {
display: grid;
width: 36px;
height: 36px;
place-items: center;
border-radius: 50%;
background: #d1eee3;
color: #087657;
}
.yf-shop-pass > div {
display: flex;
flex-direction: column;
}
.yf-shop-pass span {
color: var(--yf-reward-muted);
font-size: 10px;
}
.yf-shop-pass strong {
color: var(--yf-reward-ink) !important;
font-size: 13px;
}
.yf-shop-intro p {
max-width: 320px;
margin: 0;
color: var(--yf-reward-muted);
font-size: 10px;
text-align: right;
}
.yf-shop-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.yf-shop-product {
display: flex;
min-height: 164px;
flex-direction: column;
padding: 14px;
border: 1px solid var(--yf-reward-line);
border-radius: 9px;
background: #fff;
}
.yf-shop-product.is-business {
background: linear-gradient(160deg, #f1f8f5, #fff);
}
.yf-shop-product__top {
display: flex;
flex-direction: column;
gap: 3px;
}
.yf-shop-product__top span {
color: #9a7a19;
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
}
.yf-shop-product__top strong {
color: var(--yf-reward-ink) !important;
font-size: 15px;
}
.yf-shop-product p {
margin: 8px 0 14px;
color: var(--yf-reward-muted);
font-size: 10px;
line-height: 1.45;
}
.yf-shop-product__bottom {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 8px;
margin-top: auto;
}
.yf-shop-product__bottom > strong {
color: var(--yf-reward-ink) !important;
font-family: "IBM Plex Mono", monospace;
font-size: 13px;
}
.yf-shop-product__bottom small {
color: var(--yf-reward-muted);
font-size: 8px;
}
.yf-shop-product .btn {
padding: 7px 9px;
border: 1px solid #176d57;
border-radius: 6px;
background: #176d57;
color: #fff;
font-size: 9px;
font-weight: 750;
}
.yf-shop-product .btn:disabled {
border-color: var(--yf-reward-line);
background: #edf1f0;
color: #84918d;
}
.yf-shop-rules {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
margin-top: 13px;
}
.yf-shop-rules span {
display: flex;
align-items: center;
gap: 4px;
color: var(--yf-reward-muted);
font-size: 9px;
}
.yf-shop-rules i {
color: var(--yf-reward-mint);
}
body.yf-dashboard-auth.dark-theme .yf-rewards-modal {
--yf-reward-ink: #edf5f2;
--yf-reward-muted: #a8b7b1;
--yf-reward-line: rgba(220, 238, 231, .12);
--yf-reward-soft: #222c2b;
--yf-reward-mint-soft: rgba(35, 173, 128, .16);
background: #192220 !important;
}
body.yf-dashboard-auth.dark-theme .yf-rewards-modal .modal-header,
body.yf-dashboard-auth.dark-theme .yf-task-card,
body.yf-dashboard-auth.dark-theme .yf-leader-row,
body.yf-dashboard-auth.dark-theme .yf-shop-product {
background: #1e2927 !important;
}
body.yf-dashboard-auth.dark-theme .yf-rewards-wallet,
body.yf-dashboard-auth.dark-theme .yf-shop-product.is-business {
background: linear-gradient(145deg, #21312d, #1e2927) !important;
}
body.yf-dashboard-auth.dark-theme .yf-rewards-tabs .btn,
body.yf-dashboard-auth.dark-theme .yf-task-action {
background: #25312f;
color: #c6d1cd;
}
body.yf-dashboard-auth.dark-theme .yf-rewards-tabs .btn-primary,
body.yf-dashboard-auth.dark-theme .yf-rewards-tabs .btn-primary:hover,
body.yf-dashboard-auth.dark-theme .yf-task-action--claim,
body.yf-dashboard-auth.dark-theme .yf-task-action--claim:hover:not(:disabled) {
background: #18785e;
color: #fff;
}
body.yf-dashboard-auth.dark-theme .yf-task-card__meta .yf-task-card__reward {
background: rgba(214, 180, 93, .14);
color: #e2c96f;
}
body.yf-dashboard-auth.dark-theme .yf-shop-pass {
background: rgba(29, 142, 108, .14);
}
body.yf-dashboard-auth.dark-theme .yf-leader-row.is-current {
background: rgba(29, 142, 108, .14) !important;
}
@media (max-width: 767.98px) {
.yf-rewards-modal__body,
.yf-rewards-modal .modal-header {
padding-right: 16px;
padding-left: 16px;
}
.yf-task-card {
grid-template-columns: 38px minmax(0, 1fr);
gap: 10px;
}
.yf-task-card__icon {
width: 38px;
height: 38px;
}
.yf-task-card__action {
grid-column: 1 / -1;
}
.yf-task-progress {
grid-template-columns: minmax(70px, 120px) minmax(0, 1fr);
}
.yf-shop-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Shared information affordance for every primary dashboard card. */
.yf-dashboard-card-has-info > .card-body {
position: relative;
}
.yf-dashboard-card-has-info > .card-body > .card-title,
.yf-dashboard-card-has-info > .card-body > .yf-card-title-row,
.yf-dashboard-card-has-info > .card-body > .yf-card-heading,
.yf-dashboard-card-has-info > .card-body > .yf-net-assets-heading {
padding-right: 46px;
}
.yf-card-auto-info {
position: absolute;
top: 16px;
right: 16px;
z-index: 4;
display: grid;
width: 34px;
height: 34px;
padding: 0;
place-items: center;
border: 1px solid #cbe2db;
border-radius: 50%;
background: #f6fbf9;
color: #168666;
box-shadow: 0 3px 10px rgba(28, 95, 74, .06);
transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}
.yf-card-auto-info:hover,
.yf-card-auto-info:focus-visible {
border-color: #82c8b2;
background: #eaf7f2;
color: #0f6f55;
transform: translateY(-1px);
outline: 0;
}
.yf-card-auto-info i {
font-size: 16px;
line-height: 1;
}
.dashboard-info-button:not(.yf-table-info-button):not(.yf-card-auto-info) {
display: grid;
width: 34px;
height: 34px;
padding: 0 !important;
place-items: center;
border: 1px solid #cbe2db !important;
border-radius: 50%;
background: #f6fbf9 !important;
color: #168666 !important;
text-decoration: none;
box-shadow: 0 3px 10px rgba(28, 95, 74, .06);
}
.dashboard-info-button:not(.yf-table-info-button):not(.yf-card-auto-info):hover,
.dashboard-info-button:not(.yf-table-info-button):not(.yf-card-auto-info):focus-visible {
border-color: #82c8b2 !important;
background: #eaf7f2 !important;
color: #0f6f55 !important;
outline: 0;
}
.yf-dashboard-info-dialog {
width: min(760px, calc(100vw - 24px));
}
.yf-dashboard-info-modal {
overflow: hidden;
border: 1px solid #cfe1db;
border-radius: 12px;
background: #fff;
box-shadow: 0 24px 70px rgba(16, 45, 37, .2);
}
.yf-dashboard-info-modal .modal-header {
padding: 18px 20px;
border-color: #dbe7e3;
background: linear-gradient(115deg, #f2faf7 0%, #fff 68%);
}
.yf-dashboard-info-heading {
display: flex;
min-width: 0;
align-items: center;
gap: 12px;
}
.yf-dashboard-info-heading__icon {
display: grid;
width: 42px;
height: 42px;
flex: 0 0 42px;
place-items: center;
border-radius: 50%;
background: #dff4ec;
color: #158466;
font-size: 18px;
}
.yf-dashboard-info-heading > div {
display: grid;
gap: 2px;
min-width: 0;
}
.yf-dashboard-info-heading > div > span {
color: #388b72;
font-size: 11px;
font-weight: 800;
letter-spacing: 0;
text-transform: uppercase;
}
.yf-dashboard-info-heading .modal-title {
overflow-wrap: anywhere;
color: #18332b;
font-size: 20px;
line-height: 1.25;
}
#dashboardInfoModalBody {
display: grid;
gap: 13px;
padding: 20px;
}
.yf-dashboard-info-section {
display: block;
padding: 17px;
border: 1px solid #dce8e4;
border-radius: 8px;
background: #fbfdfc;
}
.yf-dashboard-info-section__heading {
display: flex;
align-items: center;
gap: 14px;
}
.yf-dashboard-info-section__body {
width: 100%;
}
.yf-dashboard-info-section__icon {
display: grid;
width: 42px;
height: 42px;
place-items: center;
border-radius: 8px;
background: #e7f5f0;
color: #198769;
font-size: 17px;
}
.yf-dashboard-info-section--formula .yf-dashboard-info-section__icon {
background: #edf2fb;
color: #4077b8;
}
.yf-dashboard-info-section--reading .yf-dashboard-info-section__icon {
background: #f8f1dc;
color: #9a7517;
}
.yf-dashboard-info-section h6,
.yf-dashboard-info-parameters__title h6,
.yf-dashboard-info-parameter h6 {
margin: 0;
color: #20352f;
font-size: 15px;
font-weight: 750;
line-height: 1.35;
}
.yf-dashboard-info-section p,
.yf-dashboard-info-section li {
color: #64736e;
font-size: 14px;
line-height: 1.62;
}
.yf-dashboard-info-section p { margin: 12px 0 0; }
.yf-dashboard-info-section ul { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 22px; }
.yf-dashboard-info-parameters {
display: grid;
gap: 10px;
}
.yf-dashboard-info-parameters__title {
display: flex;
align-items: center;
gap: 9px;
padding: 2px 2px 5px;
color: #3d78b0;
}
.yf-dashboard-info-parameter {
padding: 16px;
border: 1px solid #dce8e4;
border-radius: 8px;
background: #fbfdfc;
}
.yf-dashboard-info-parameter dl {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin: 12px 0 0;
}
.yf-dashboard-info-parameter dl > div {
padding: 12px;
border-radius: 7px;
background: #f1f6f4;
}
.yf-dashboard-info-parameter dt {
margin-bottom: 5px;
color: #31846b;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
}
.yf-dashboard-info-parameter dd {
margin: 0;
color: #62716c;
font-size: 13px;
line-height: 1.55;
}
.yf-dashboard-info-modal .modal-footer {
padding: 13px 20px 17px;
border-color: #dbe7e3;
background: #f8fbfa;
}
body.yf-dashboard-auth.dark-theme .yf-card-auto-info,
body.yf-dashboard-auth.dark-theme .dashboard-info-button:not(.yf-table-info-button),
html[data-theme="dark"] body.yf-dashboard-auth .yf-card-auto-info,
html[data-theme="dark"] body.yf-dashboard-auth .dashboard-info-button:not(.yf-table-info-button) {
border-color: #405753 !important;
background: #263432 !important;
color: #74d1b3 !important;
box-shadow: none;
}
body.yf-dashboard-auth.dark-theme .yf-card-auto-info:hover,
body.yf-dashboard-auth.dark-theme .dashboard-info-button:not(.yf-table-info-button):hover,
html[data-theme="dark"] body.yf-dashboard-auth .yf-card-auto-info:hover,
html[data-theme="dark"] body.yf-dashboard-auth .dashboard-info-button:not(.yf-table-info-button):hover {
border-color: #5b8b7d !important;
background: #2d413d !important;
color: #9ce2ca !important;
}
body.yf-dashboard-auth.dark-theme .yf-dashboard-info-modal,
html[data-theme="dark"] body.yf-dashboard-auth .yf-dashboard-info-modal {
border-color: #3b4c49;
background: #1f292b;
}
body.yf-dashboard-auth.dark-theme .yf-dashboard-info-modal .modal-header,
html[data-theme="dark"] body.yf-dashboard-auth .yf-dashboard-info-modal .modal-header {
border-color: #394845;
background: linear-gradient(115deg, #243633 0%, #202a2c 70%);
}
body.yf-dashboard-auth.dark-theme .yf-dashboard-info-heading .modal-title,
body.yf-dashboard-auth.dark-theme .yf-dashboard-info-section h6,
body.yf-dashboard-auth.dark-theme .yf-dashboard-info-parameters__title h6,
body.yf-dashboard-auth.dark-theme .yf-dashboard-info-parameter h6,
html[data-theme="dark"] body.yf-dashboard-auth .yf-dashboard-info-heading .modal-title,
html[data-theme="dark"] body.yf-dashboard-auth .yf-dashboard-info-section h6,
html[data-theme="dark"] body.yf-dashboard-auth .yf-dashboard-info-parameters__title h6,
html[data-theme="dark"] body.yf-dashboard-auth .yf-dashboard-info-parameter h6 {
color: #edf5f2;
}
body.yf-dashboard-auth.dark-theme .yf-dashboard-info-section,
body.yf-dashboard-auth.dark-theme .yf-dashboard-info-parameter,
html[data-theme="dark"] body.yf-dashboard-auth .yf-dashboard-info-section,
html[data-theme="dark"] body.yf-dashboard-auth .yf-dashboard-info-parameter {
border-color: #394b47;
background: #252f31;
}
body.yf-dashboard-auth.dark-theme .yf-dashboard-info-section p,
body.yf-dashboard-auth.dark-theme .yf-dashboard-info-section li,
body.yf-dashboard-auth.dark-theme .yf-dashboard-info-parameter dd,
html[data-theme="dark"] body.yf-dashboard-auth .yf-dashboard-info-section p,
html[data-theme="dark"] body.yf-dashboard-auth .yf-dashboard-info-section li,
html[data-theme="dark"] body.yf-dashboard-auth .yf-dashboard-info-parameter dd {
color: #b5c2be;
}
body.yf-dashboard-auth.dark-theme .yf-dashboard-info-parameter dl > div,
html[data-theme="dark"] body.yf-dashboard-auth .yf-dashboard-info-parameter dl > div {
background: #2b3839;
}
body.yf-dashboard-auth.dark-theme .yf-dashboard-info-modal .modal-footer,
html[data-theme="dark"] body.yf-dashboard-auth .yf-dashboard-info-modal .modal-footer {
border-color: #394845;
background: #202a2c;
}
@media (max-width: 767.98px) {
.yf-card-auto-info {
top: 13px;
right: 13px;
width: 32px;
height: 32px;
}
.yf-dashboard-info-modal .modal-header,
#dashboardInfoModalBody {
padding: 16px;
}
.yf-dashboard-info-section {
padding: 14px;
}
.yf-dashboard-info-section__heading { gap: 11px; }
.yf-dashboard-info-section__icon {
width: 36px;
height: 36px;
}
.yf-dashboard-info-parameter dl {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.yf-rewards-section-head,
.yf-shop-intro {
align-items: flex-start;
flex-direction: column;
}
.yf-shop-intro p {
text-align: left;
}
.yf-task-card__meta {
flex-wrap: wrap;
}
.yf-task-card__meta .yf-task-card__reward {
margin-left: 0;
}
.yf-task-section__title,
.yf-onboarding-focus__actions {
align-items: flex-start;
flex-direction: column;
}
.yf-onboarding-focus__panel { padding: 24px 20px; }
.yf-onboarding-focus__actions .btn { width: 100%; }
.yf-demo-banner,
.yf-demo-banner > div,
.yf-demo-banner__actions { align-items: stretch; flex-direction: column; }
.yf-demo-banner__actions .btn { width: 100%; }
.yf-shop-grid {
grid-template-columns: 1fr;
}
.yf-leader-row {
grid-template-columns: 24px 34px minmax(0, 1fr);
padding: 8px 10px;
}
.yf-leader-balance {
display: none;
}
}
body {
display: flex;
flex-direction: column;
}
.yf-tracker-pixel {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.content {
flex: 1;
}
.custom-logo {
margin-right: 200px;
padding-left: 0;
}
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.55);
z-index: 999999;
display: flex;
justify-content: center;
align-items: center;
}
.table-tag-color {
padding: 0.135rem 0.635rem 0.135rem 0.635rem;
border-radius: 0.65rem;
display: inline-block;
}
.table-tag-minus {
padding: 0 .7rem 0 .7rem;
border-radius: 0.65rem;
background: rgba(96, 96, 96, 0.1);
display: inline-block;
}
.table-tag-sum {
padding: 0 .7rem 0 .7rem;
border-radius: 0.65rem;
background: rgba(0, 255, 21, 0.1);
display: inline-block;
}
.table-tag-delta-up {
padding: 0 .7rem 0 .7rem;
border-radius: 0.65rem;
background: rgba(91, 143, 146, 0.15);
display: inline-block;
}
.table-tag-delta-down {
padding: 0 .7rem 0 .7rem;
border-radius: 0.65rem;
background: rgba(255, 129, 0, 0.15);
display: inline-block;
}
.table-tag-plan {
padding: 0 .7rem 0 .7rem;
border-radius: 0.4rem;
background: rgba(0, 152, 255, 0.1);
display: inline-block;
}
.table-tag-fact {
padding: 0 .7rem 0 .7rem;
border-radius: 0.4rem;
background: rgba(239, 9, 9, 0.13);
display: inline-block;
}
td {
padding: 0.5rem;
border-bottom: solid 1px rgb(0 0 0 / 25%);
}
th {
padding: 0.235rem;
border-bottom: solid 1px rgb(0 0 0 / 25%);
}
/* Sticky left columns for finance tables (expenses + incomes) */
#expenses-table,
#incomes-table {
--sticky-tag-col-width: 1%;
}
#expenses-table.main-table,
#incomes-table.main-table,
#income-plans-table.main-table {
overflow: visible !important;
}
#expenses-table tr > :nth-child(1),
#incomes-table tr > :nth-child(1) {
position: -webkit-sticky !important;
position: sticky !important;
left: 0 !important;
z-index: 8 !important;
min-width: 112px !important;
width: var(--sticky-tag-col-width) !important;
max-width: 180px !important;
background-clip: padding-box;
box-shadow: 2px 0 0 rgba(0, 0, 0, 0.12);
}
/* Expenses: compact plan column follows the sticky tag. */
#expenses-table tr > :nth-child(2) {
min-width: 80px !important;
width: 80px !important;
max-width: 80px !important;
}
#expenses-table thead tr > :nth-child(1),
#expenses-table thead tr > :nth-child(2),
#incomes-table thead tr > :nth-child(1) {
z-index: 10 !important;
}
#income-plans-table tr > :nth-child(1) {
position: -webkit-sticky !important;
position: sticky !important;
left: 0 !important;
z-index: 8 !important;
min-width: 190px !important;
width: 190px !important;
max-width: 190px !important;
background-clip: padding-box;
box-shadow: 2px 0 0 rgba(0, 0, 0, 0.12);
}
#income-plans-table thead tr > :nth-child(1) {
z-index: 10 !important;
}
.income-plan-cell {
min-width: 82px;
}
.income-plan-total-row td {
border-top: 2px solid rgba(0, 0, 0, 0.22);
font-weight: 600;
}
.income-plan-modal-row {
border-bottom: 1px solid rgba(128, 128, 128, 0.2);
padding-bottom: 0.75rem;
}
.income-plan-modal-row:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.yf-income-plan-cell-visual { position: relative; display: grid; min-width: 62px; min-height: 24px; place-items: center; }
.yf-income-plan-sectors { display: flex; width: 100%; height: 22px; align-items: stretch; gap: 2px; }
.yf-income-plan-sector {
position: relative;
flex: var(--yf-plan-weight, 1) 1 0;
min-width: 3px;
border: 1px solid #8bc2df;
border-radius: 4px;
background: #dceffc;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
cursor: pointer;
transform-origin: center;
transition: transform .16s ease, border-color .16s ease, filter .16s ease, box-shadow .16s ease;
}
.yf-income-plan-sector:first-child { border-radius: 8px 4px 4px 8px; }
.yf-income-plan-sector:last-child { border-radius: 4px 8px 8px 4px; }
.yf-income-plan-sector:only-child { border-radius: 8px; }
.yf-income-plan-sector.is-completed { border-color: #68c493; background: #b8ebcc; }
.yf-income-plan-sector:hover,
.yf-income-plan-sector:focus-visible {
z-index: 2;
border-color: #4f9fc8;
filter: saturate(1.06);
box-shadow: 0 3px 9px rgba(39, 101, 126, .18), inset 0 1px 0 rgba(255, 255, 255, .55);
outline: none;
transform: scaleX(1.06);
}
.yf-income-plan-sector.is-completed:hover,
.yf-income-plan-sector.is-completed:focus-visible { border-color: #3fa979; }
@media (prefers-reduced-motion: reduce) {
.yf-income-plan-sector,
.yf-finance-plan-list .delete-income-plan {
transition: none;
}
.yf-income-plan-sector:hover,
.yf-income-plan-sector:focus-visible {
transform: none;
}
}
.yf-income-plan-cell-amount {
position: absolute;
z-index: 3;
max-width: calc(100% - 8px);
overflow: hidden;
color: #24483c;
font-size: 10px;
font-variant-numeric: tabular-nums;
font-weight: 700;
line-height: 1;
pointer-events: none;
text-overflow: ellipsis;
text-shadow: 0 1px 0 rgba(255, 255, 255, .72);
white-space: nowrap;
}
.yf-income-plan-tooltip {
position: fixed;
z-index: 2147483000;
display: grid;
max-width: min(280px, calc(100vw - 20px));
gap: 3px;
padding: 9px 11px;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 7px;
background: #20282c;
box-shadow: 0 12px 30px rgba(20, 31, 28, .24);
color: #f5f8f7;
font-size: 11px;
line-height: 1.35;
pointer-events: none;
}
.yf-income-plan-tooltip[hidden] { display: none; }
.yf-income-plan-tooltip strong {
overflow-wrap: anywhere;
color: #f5f8f7 !important;
font-size: 11px;
font-weight: 650;
}
.yf-income-plan-tooltip span { color: #b6c4bf !important; font-size: 10px; }
.income-plan-total-row .table-tag-sum {
min-width: 54px;
padding: 4px 7px;
border: 1px solid rgba(67, 177, 119, .32);
border-radius: 8px;
background: rgba(91, 210, 128, .14);
font-size: 9px;
font-variant-numeric: tabular-nums;
font-weight: 650;
line-height: 1.15;
}
.income-plan-total-row td:first-child .table-tag-sum {
min-width: 0;
font-size: 10px;
}
.yf-income-plan-check { display: inline-flex; min-height: 40px; align-items: center; gap: 8px; cursor: pointer; color: var(--yf-muted, #66746f); font-size: 11px; }
.yf-income-plan-check input { position: absolute; opacity: 0; pointer-events: none; }
.yf-income-plan-check span { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid #b8c9c4; border-radius: 6px; background: #fff; color: transparent; transition: background .18s ease, border-color .18s ease, color .18s ease; }
.yf-income-plan-check input:checked + span { border-color: #2ca77c; background: #2ca77c; color: #fff; }
.yf-income-plan-check input:focus-visible + span { box-shadow: 0 0 0 3px rgba(44, 167, 124, .18); }
.dark-theme .yf-income-plan-sector { border-color: #52778b; background: #29495b; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.dark-theme .yf-income-plan-sector.is-completed { border-color: #559c7e; background: #397d62; }
.dark-theme .yf-income-plan-cell-amount { color: #eef5f2; text-shadow: 0 1px 2px rgba(0, 0, 0, .58); }
.dark-theme .yf-income-plan-check span { border-color: #50605d; background: #20292b; }
/* Actual income: table/calendar views */
.yf-income-view-toolbar {
display: grid;
grid-template-columns: repeat(2, minmax(0, 126px));
width: fit-content;
margin: 14px auto 0;
padding: 2px;
border: 1px solid rgba(27, 77, 64, .1);
border-radius: 8px;
background: #f2f6f4;
box-shadow: inset 0 1px 2px rgba(20, 48, 41, .04);
}
.yf-income-view-switch {
display: inline-flex;
min-height: 34px;
align-items: center;
justify-content: center;
gap: 7px;
padding: 7px 14px;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
color: #66756f;
font: inherit;
font-size: 12px;
font-weight: 700;
transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.yf-income-view-switch:hover,
.yf-income-view-switch:focus-visible { color: #1d755c; }
.yf-income-view-switch:focus-visible { outline: 2px solid rgba(39, 155, 118, .28); outline-offset: 1px; }
.yf-income-view-switch.is-active {
border-color: rgba(39, 126, 101, .13);
background: #fff;
box-shadow: 0 2px 7px rgba(20, 58, 48, .08);
color: #177657;
}
.yf-income-view-toolbar + .yf-table-stage { margin-top: 14px; }
.yf-income-calendar { min-width: 0; }
.yf-income-calendar__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
max-width: 100%;
padding: 1px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-gutter: stable;
}
.yf-income-calendar__grid[aria-busy="true"] { min-height: 410px; opacity: .72; }
.yf-income-calendar-card {
min-width: 0;
overflow: hidden;
border: 1px solid rgba(25, 61, 51, .12);
border-radius: 8px;
background: #fff;
box-shadow: 0 4px 16px rgba(23, 56, 48, .035);
scroll-snap-align: center;
}
.yf-income-calendar-card.is-selected {
border-color: #2e9d78;
box-shadow: 0 0 0 1px rgba(46, 157, 120, .13), 0 7px 20px rgba(26, 103, 79, .07);
}
.yf-income-calendar-card__header {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) 34px;
min-height: 54px;
align-items: center;
gap: 8px;
padding: 9px 10px 6px;
text-align: center;
}
.yf-income-calendar-card__header strong {
overflow: hidden;
color: #1c312b;
font-size: 13px;
text-overflow: ellipsis;
white-space: nowrap;
}
.yf-income-calendar-card.is-selected .yf-income-calendar-card__header strong { color: #17815f; }
.yf-income-calendar-card__nav {
display: grid;
width: 32px;
height: 32px;
place-items: center;
border: 1px solid rgba(28, 82, 66, .11);
border-radius: 7px;
background: #fff;
color: #27856a;
transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.yf-income-calendar-card__nav:hover,
.yf-income-calendar-card__nav:focus-visible {
border-color: rgba(39, 133, 106, .34);
background: #f1f8f5;
outline: none;
transform: translateY(-1px);
}
.yf-income-calendar-card__weekdays,
.yf-income-calendar-card__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.yf-income-calendar-card__weekdays {
padding: 0 7px 5px;
color: #7a8783;
font-size: 9px;
font-weight: 700;
text-align: center;
}
.yf-income-calendar-card__days {
margin: 0 7px;
overflow: hidden;
border-top: 1px solid rgba(24, 65, 53, .1);
border-left: 1px solid rgba(24, 65, 53, .1);
border-radius: 6px;
}
.yf-income-calendar-day-cell {
position: relative;
display: flex;
min-width: 0;
min-height: 58px;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 2px;
padding: 5px 2px 3px;
overflow: hidden;
border: 0;
border-right: 1px solid rgba(24, 65, 53, .1);
border-bottom: 1px solid rgba(24, 65, 53, .1);
border-radius: 0;
background: #fff;
color: #273a34;
cursor: pointer;
font: inherit;
font-variant-numeric: tabular-nums;
transition: background .16s ease, box-shadow .16s ease;
}
.yf-income-calendar-day-cell:not(:disabled):hover,
.yf-income-calendar-day-cell:not(:disabled):focus-visible {
z-index: 2;
background: #edf8f4;
box-shadow: inset 0 0 0 1px rgba(39, 151, 116, .3);
outline: none;
}
.yf-income-calendar-day-cell.is-outside { background: #fafcfb; color: #bcc4c1; cursor: default; }
.yf-income-calendar-day-cell.is-today .yf-income-calendar-day-cell__number {
display: grid;
min-width: 19px;
height: 19px;
place-items: center;
border-radius: 50%;
background: #e0f4ec;
color: #167456;
}
.yf-income-calendar-day-cell.has-income { background: linear-gradient(180deg, #fff 45%, #f4fbf8 100%); }
.yf-income-calendar-day-cell__number { font-size: 9px; font-weight: 650; line-height: 1.2; }
.yf-income-calendar-day-cell > strong {
max-width: 100%;
overflow: hidden;
color: #173d31;
font-size: 9px;
line-height: 1.15;
text-overflow: ellipsis;
white-space: nowrap;
}
.yf-income-calendar-day-cell__categories {
display: flex;
max-width: 100%;
align-items: center;
justify-content: center;
gap: 3px;
overflow: hidden;
}
.yf-income-calendar-day-cell__categories > span { display: inline-flex; min-width: 0; align-items: center; gap: 2px; }
.yf-income-calendar-day-cell__categories i,
.yf-income-calendar__legend-item i {
display: inline-block;
flex: 0 0 auto;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--yf-income-category-color, #4da983);
}
.yf-income-calendar-day-cell__categories small {
overflow: hidden;
color: #72807b;
font-size: 7px;
line-height: 1;
text-overflow: ellipsis;
white-space: nowrap;
}
.yf-income-calendar-card__footer {
display: flex;
min-height: 48px;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 8px;
padding: 10px 12px;
border-top: 1px solid rgba(25, 67, 54, .1);
color: #63716c;
font-size: 10px;
}
.yf-income-calendar-card__footer span,
.yf-income-calendar-card__footer strong { display: inline-flex; align-items: center; line-height: 1; }
.yf-income-calendar-card__footer strong { color: #17815f; font-size: 13px; font-variant-numeric: tabular-nums; }
.yf-income-calendar__legend {
display: flex;
min-height: 46px;
align-items: center;
gap: 8px 14px;
margin-top: 14px;
padding: 10px 12px;
border: 1px solid rgba(26, 67, 55, .1);
border-radius: 8px;
background: #f8faf9;
overflow-x: auto;
}
.yf-income-calendar__legend > strong {
display: inline-flex;
min-height: 27px;
flex: 0 0 auto;
align-items: center;
color: #687772;
font-size: 10px;
line-height: 1.15;
}
.yf-income-calendar__legend-item {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 5px;
color: #596963;
font-size: 10px;
white-space: nowrap;
}
.yf-income-calendar__legend-item i { width: 9px; height: 9px; }
.yf-income-calendar__error { grid-column: 1 / -1; margin: 0; padding: 40px 20px; color: #8d5252; text-align: center; }
.yf-income-calendar-day-dialog { max-width: 650px; }
.yf-income-calendar-day__summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-bottom: 16px;
overflow: hidden;
border: 1px solid rgba(28, 83, 66, .12);
border-radius: 8px;
background: #f8fbfa;
}
.yf-income-calendar-day__summary > div {
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
gap: 2px 7px;
min-width: 0;
padding: 13px;
border-right: 1px solid rgba(28, 83, 66, .1);
}
.yf-income-calendar-day__summary > div:last-child { border-right: 0; }
.yf-income-calendar-day__summary i { grid-row: 1 / 3; align-self: center; color: #22906e; font-size: 16px; }
.yf-income-calendar-day__summary span { overflow: hidden; color: #6f7f79; font-size: 11px; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.yf-income-calendar-day__summary strong { color: #187858; font-size: 15px; font-variant-numeric: tabular-nums; }
.yf-income-calendar-day__rows {
overflow: hidden;
border: 1px solid rgba(27, 72, 58, .11);
border-radius: 8px;
}
.yf-income-calendar-day__row {
display: grid;
grid-template-columns: minmax(110px, .75fr) minmax(180px, 1.25fr);
align-items: center;
gap: 12px;
min-height: 58px;
padding: 8px 12px;
border-bottom: 1px solid rgba(27, 72, 58, .09);
}
.yf-income-calendar-day__row:last-child { border-bottom: 0; }
.yf-income-calendar-day__tag {
width: fit-content;
max-width: 100%;
padding: 5px 10px;
overflow: hidden;
border-radius: 999px;
color: #30423c;
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
.yf-income-calendar-day__edit {
display: grid;
grid-template-columns: auto minmax(0, 1fr) 24px;
min-height: 40px;
align-items: center;
gap: 7px;
padding: 7px 9px;
border: 1px solid rgba(32, 96, 76, .13);
border-radius: 7px;
background: #fff;
color: #31433d;
text-align: left;
transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.yf-income-calendar-day__edit:hover,
.yf-income-calendar-day__edit:focus-visible {
border-color: rgba(31, 142, 106, .4);
background: #f3faf7;
outline: none;
transform: translateY(-1px);
}
.yf-income-calendar-day__edit strong { font-size: 12px; font-variant-numeric: tabular-nums; }
.yf-income-calendar-day__edit span { color: #7b8984; font-size: 9px; }
.yf-income-calendar-day__edit > i:last-child { color: #27886b; text-align: center; }
.yf-income-calendar-day__edit.is-empty { display: flex; justify-content: center; color: #27886b; }
.yf-income-calendar-day__note {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 14px;
padding: 11px 12px;
border-left: 3px solid #45b792;
border-radius: 0 7px 7px 0;
background: #edf8f4;
color: #61736c;
font-size: 10px;
line-height: 1.45;
}
.yf-income-calendar-day__note i { color: #218c6b; }
.dark-theme .yf-income-view-toolbar { border-color: rgba(169, 205, 194, .12); background: #1f292a; }
.dark-theme .yf-income-view-switch { color: #aab8b4; }
.dark-theme .yf-income-view-switch.is-active { border-color: rgba(126, 209, 181, .2); background: #30403e; color: #8ee0c1; box-shadow: none; }
.dark-theme .yf-income-calendar-card,
.dark-theme .yf-income-calendar-day-cell,
.dark-theme .yf-income-calendar-card__nav,
.dark-theme .yf-income-calendar-day__edit { border-color: rgba(191, 221, 212, .13); background: #252e30; color: #dbe7e3; }
.dark-theme .yf-income-calendar-card.is-selected { border-color: #53bd97; box-shadow: 0 0 0 1px rgba(83, 189, 151, .12); }
.dark-theme .yf-income-calendar-card__header strong,
.dark-theme .yf-income-calendar-day-cell > strong { color: #e7f0ed; }
.dark-theme .yf-income-calendar-card.is-selected .yf-income-calendar-card__header strong,
.dark-theme .yf-income-calendar-card__footer strong { color: #78d5b2; }
.dark-theme .yf-income-calendar-card__days,
.dark-theme .yf-income-calendar-day-cell { border-color: rgba(191, 221, 212, .12); }
.dark-theme .yf-income-calendar-day-cell.has-income { background: linear-gradient(180deg, #252e30 45%, #273b36 100%); }
.dark-theme .yf-income-calendar-day-cell.is-outside { background: #20282a; color: #687571; }
.dark-theme .yf-income-calendar-day-cell:not(:disabled):hover,
.dark-theme .yf-income-calendar-day-cell:not(:disabled):focus-visible { background: #2c413a; }
.dark-theme .yf-income-calendar__legend,
.dark-theme .yf-income-calendar-day__summary { border-color: rgba(191, 221, 212, .12); background: #20292b; }
.dark-theme .yf-income-calendar-day__rows { border-color: rgba(191, 221, 212, .12); }
.dark-theme .yf-income-calendar-day__row { border-color: rgba(191, 221, 212, .1); }
.dark-theme .yf-income-calendar-day__tag { color: #e0e9e6; }
.dark-theme .yf-income-calendar-day__note { background: #253a35; color: #b5c5c0; }
@media (max-width: 1199.98px) {
.yf-income-calendar__grid { grid-template-columns: repeat(3, minmax(360px, 1fr)); }
}
@media (max-width: 767.98px) {
.yf-income-view-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.yf-income-calendar__grid {
grid-template-columns: repeat(3, minmax(min(calc(100vw - 72px), 350px), 1fr));
gap: 10px;
margin-inline: -2px;
padding: 1px 2px 8px;
}
.yf-income-calendar-day-cell { min-height: 56px; }
.yf-income-calendar-day-cell__categories small { display: none; }
.yf-income-calendar__legend { align-items: center; flex-wrap: nowrap; }
.yf-income-calendar-day__summary { grid-template-columns: 1fr; }
.yf-income-calendar-day__summary > div {
grid-template-columns: 24px minmax(0, 1fr) auto;
border-right: 0;
border-bottom: 1px solid rgba(28, 83, 66, .1);
}
.yf-income-calendar-day__summary > div:last-child { border-bottom: 0; }
.yf-income-calendar-day__summary i { grid-row: auto; }
.yf-income-calendar-day__summary span { font-size: 11px; }
.yf-income-calendar-day__summary strong { font-size: 14px; }
.yf-income-calendar-day__row { grid-template-columns: minmax(88px, .7fr) minmax(150px, 1.3fr); padding-inline: 9px; }
}
.income-plan-fact-summary {
font-size: 11pt;
}
.income-overview-row > [class*="col-"] {
display: flex;
}
.income-overview-row .card {
width: 100%;
}
.income-tags-card .card-body,
.income-month-card .card-body {
padding: 20px 14px 18px;
}
.expense-tags-card .card-body,
.expense-month-card .card-body {
padding: 20px 18px 18px;
}
.expense-tags-carousel {
display: flex;
gap: 22px;
overflow-x: auto;
overflow-y: hidden;
padding: 2px 2px 4px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.expense-tags-carousel::-webkit-scrollbar {
display: none;
}
.expense-tags-page {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(3, minmax(24px, auto));
grid-auto-flow: row;
gap: 16px 20px;
min-width: 100%;
scroll-snap-align: start;
}
.expense-tags-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 14px;
}
.expense-tags-control {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid rgba(83, 97, 121, 0.18);
border-radius: 50%;
color: #536179;
background: #ffffff;
box-shadow: 0 6px 14px rgba(22, 34, 51, 0.06);
transition: color .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease;
}
.expense-tags-control:hover:not(:disabled),
.expense-tags-control:focus-visible:not(:disabled) {
color: #2f80ed;
border-color: rgba(47, 128, 237, 0.36);
background: rgba(47, 128, 237, 0.06);
}
.expense-tags-control:disabled {
opacity: .35;
cursor: default;
}
.expense-tags-page-indicator {
min-width: 36px;
color: #657188;
font-size: .82rem;
text-align: center;
}
.expense-tag {
min-width: 0;
}
.expense-tag-select {
display: inline-flex;
align-items: center;
gap: 7px;
max-width: 100%;
color: #536179;
font-size: .9rem;
line-height: 1.2;
}
.expense-tag-color {
flex: 0 0 auto;
font-size: .78rem;
}
.expense-tag-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.expense-tag-edit {
flex: 0 0 auto;
color: #8b98ad;
font-size: .83rem;
}
.expense-month-card .card-body {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(170px, 210px);
grid-template-rows: max-content 1fr;
align-content: center;
column-gap: 24px;
row-gap: 10px;
min-height: 218px;
}
.expense-month-card .dashboard-info-button {
position: absolute;
top: 18px;
right: 18px;
}
.expense-month-card .card-title {
grid-column: 1;
grid-row: 1;
}
.expense-month-card__metrics {
grid-column: 1;
grid-row: 2;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 24px;
align-self: center;
}
.expense-month-card__metric-column {
display: grid;
align-content: start;
gap: 10px;
min-width: 0;
}
.expense-month-card .mb-1 {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
margin-bottom: 0 !important;
color: #536179;
font-size: .82rem;
line-height: 1.18;
}
.expense-month-card .mb-1 i,
.expense-month-card .mb-1 img {
flex: 0 0 18px;
width: 18px;
max-width: 18px;
color: #8b98ad;
font-size: .92rem;
}
.expense-month-card .mb-1 strong {
color: #25324b;
font-size: .86rem;
font-weight: 700;
}
.expense-budget-inline {
grid-column: 2;
grid-row: 1 / span 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-self: stretch;
min-width: 0;
padding-left: 14px;
border-left: 1px solid rgba(15, 23, 42, 0.08);
}
.expense-budget-inline .card-title {
align-self: stretch;
grid-column: auto;
grid-row: auto;
text-align: left;
margin-bottom: 10px !important;
color: #657188;
font-size: .8rem;
line-height: 1.15;
font-weight: 600;
}
/* YousoroFinance digital landing 2026 */
:root {
--yf26-night: #071714;
--yf26-forest: #0d2721;
--yf26-panel: #122f28;
--yf26-paper: #f3f6f2;
--yf26-white: #fbfdfb;
--yf26-ink: #10221e;
--yf26-muted: #687974;
--yf26-mint: #65d9ae;
--yf26-mint-soft: #dff7ee;
--yf26-gold: #e8c869;
--yf26-blue: #4da5f4;
--yf26-red: #ff7c84;
--yf26-border-dark: rgba(226, 248, 239, .13);
--yf26-border-light: rgba(16, 34, 30, .11);
--yf26-shadow: 0 28px 80px rgba(5, 25, 20, .14);
--yf26-radius: 24px;
}
.yf26-nav,
.yf26-nav *,
.yf26-shell,
.yf26-shell * {
box-sizing: border-box;
letter-spacing: 0;
}
body:has(.yf26-shell) {
overflow-x: hidden;
background: var(--yf26-paper);
}
.content > .container:has(.yf26-shell) {
width: 100%;
max-width: none;
padding: 0 !important;
}
.yf26-container {
width: min(1180px, calc(100% - 40px));
margin-inline: auto;
}
.yf26-nav {
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
font-family: "Manrope", Arial, sans-serif;
background: rgba(7, 23, 20, .88);
border-bottom: 1px solid rgba(255, 255, 255, .08);
backdrop-filter: blur(18px) saturate(135%);
-webkit-backdrop-filter: blur(18px) saturate(135%);
}
.yf26-nav__inner {
min-height: 68px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
}
.yf26-nav__brand {
display: inline-flex;
width: fit-content;
align-items: center;
}
.yf26-nav__brand img {
display: block;
width: auto;
height: 38px;
}
.yf26-nav__links {
display: flex;
align-items: center;
gap: 6px;
padding: 4px;
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 999px;
background: rgba(255, 255, 255, .035);
}
.yf26-nav__links a {
padding: 9px 13px;
border-radius: 999px;
color: rgba(244, 251, 247, .7);
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: color .2s ease, background-color .2s ease;
}
.yf26-nav__links a:hover,
.yf26-nav__links a:focus-visible,
.yf26-nav__links a.is-active {
color: #fff;
background: rgba(255, 255, 255, .08);
outline: none;
}
.yf26-nav__auth {
position: relative;
justify-self: end;
width: 222px;
height: 42px;
overflow: hidden;
border-radius: 999px;
background: transparent;
}
.yf26-nav__auth-face {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
border: 1px solid rgba(255, 255, 255, .13);
border-radius: inherit;
color: #fff;
background: rgba(77, 165, 244, .13);
font-size: 13px;
font-weight: 700;
pointer-events: none;
}
.yf26-nav__auth-face i {
color: #72bdfc;
font-size: 17px;
}
.yf26-nav__auth iframe {
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
width: 222px !important;
max-width: 222px !important;
height: 42px !important;
border: 0 !important;
border-radius: inherit !important;
opacity: .01 !important;
}
.yf26-shell {
width: 100%;
margin-top: -8px;
overflow: hidden;
color: var(--yf26-ink);
background: var(--yf26-paper);
font-family: "Manrope", Arial, sans-serif;
}
.yf26-shell strong,
.yf26-shell b {
color: inherit;
}
.yf26-hero {
position: relative;
min-height: auto;
padding: clamp(68px, 7vw, 94px) 0 24px;
overflow: hidden;
color: #f5fbf8;
background:
radial-gradient(circle at 82% 28%, rgba(69, 180, 139, .16), transparent 28rem),
radial-gradient(circle at 14% 88%, rgba(232, 200, 105, .09), transparent 26rem),
var(--yf26-night);
}
.yf26-hero::before {
content: "";
position: absolute;
inset: 0;
opacity: .16;
pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: linear-gradient(90deg, transparent 2%, #000 30%, #000 100%);
}
.yf26-hero__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(360px, .82fr) minmax(560px, 1.18fr);
align-items: center;
gap: clamp(38px, 5vw, 70px);
}
.yf26-hero__copy {
padding-bottom: 22px;
animation: yf26-rise .65s ease both;
}
.yf26-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--yf26-gold);
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
font-weight: 600;
line-height: 1.4;
text-transform: uppercase;
}
.yf26-eyebrow > span {
width: 26px;
height: 1px;
background: currentColor;
}
.yf26-hero h1 {
max-width: 620px;
margin: 20px 0 22px;
color: #f7fbf8;
font-size: clamp(46px, 5.3vw, 68px);
font-weight: 700;
line-height: 1.01;
}
.yf26-hero h1 em {
color: var(--yf26-mint);
font-style: normal;
}
.yf26-hero__lead {
max-width: 580px;
margin: 0;
color: rgba(231, 243, 237, .7);
font-size: 17px;
line-height: 1.68;
}
.yf26-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 30px;
}
.yf26-button {
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 20px;
border: 1px solid transparent;
border-radius: 12px;
color: var(--yf26-ink);
font-size: 14px;
font-weight: 750;
line-height: 1;
text-decoration: none;
transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.yf26-button:hover {
transform: translateY(-2px);
color: inherit;
}
.yf26-button:focus-visible {
outline: 3px solid rgba(101, 217, 174, .32);
outline-offset: 3px;
}
.yf26-button--primary {
color: #092019;
background: var(--yf26-mint);
box-shadow: 0 14px 36px rgba(101, 217, 174, .18);
}
.yf26-button--primary:hover {
color: #092019;
background: #75e3ba;
box-shadow: 0 18px 42px rgba(101, 217, 174, .25);
}
.yf26-button--ghost {
color: rgba(245, 251, 248, .84);
border-color: rgba(255, 255, 255, .14);
background: rgba(255, 255, 255, .04);
}
.yf26-button--ghost:hover {
color: #fff;
border-color: rgba(255, 255, 255, .25);
background: rgba(255, 255, 255, .07);
}
.yf26-button--line {
color: inherit;
border-color: currentColor;
border-color: rgba(110, 136, 127, .32);
background: transparent;
}
.yf26-button--line:hover {
border-color: rgba(101, 217, 174, .68);
background: rgba(101, 217, 174, .08);
}
.yf26-trust {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
margin-top: 24px;
color: rgba(231, 243, 237, .64);
font-size: 12px;
}
.yf26-audience { display: flex; align-items: center; gap: 9px; max-width: 720px; margin: 16px 0 0; color: rgba(229, 241, 236, .7); font-size: 13px; line-height: 1.55; }
.yf26-audience i { flex: 0 0 auto; color: #65d9ae; font-size: 15px; }
.yf26-trust span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.yf26-trust i {
color: var(--yf26-mint);
}
.yf26-terminal {
position: relative;
min-width: 0;
border: 1px solid rgba(217, 247, 235, .16);
border-radius: 22px;
background: #eef3ef;
box-shadow: 0 38px 100px rgba(0, 0, 0, .36);
animation: yf26-rise .75s .08s ease both;
}
.yf26-terminal__chrome {
height: 40px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 0 14px;
border-bottom: 1px solid rgba(16, 34, 30, .1);
color: #788782;
background: #f9fbf9;
border-radius: 22px 22px 0 0;
font-family: "IBM Plex Mono", monospace;
font-size: 9px;
}
.yf26-terminal__chrome > i {
justify-self: end;
color: #3d876f;
}
.yf26-terminal__dots {
display: flex;
gap: 5px;
}
.yf26-terminal__dots span {
width: 7px;
height: 7px;
border-radius: 50%;
background: #d9dfdc;
}
.yf26-terminal__body {
min-height: 448px;
display: grid;
grid-template-columns: 54px 1fr;
}
.yf26-terminal__rail {
display: flex;
flex-direction: column;
align-items: center;
gap: 9px;
padding: 16px 7px;
border-right: 1px solid rgba(255, 255, 255, .07);
border-radius: 0 0 0 21px;
background: #0c231e;
}
.yf26-terminal__rail img {
width: 31px;
height: 31px;
margin-bottom: 10px;
object-fit: contain;
}
.yf26-terminal__rail span {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: 9px;
color: rgba(223, 239, 232, .5);
font-size: 13px;
}
.yf26-terminal__rail span.is-active {
color: var(--yf26-mint);
background: rgba(101, 217, 174, .11);
}
.yf26-terminal__content {
min-width: 0;
padding: 22px;
color: var(--yf26-ink);
}
.yf26-terminal__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.yf26-terminal__head > div {
display: grid;
gap: 2px;
}
.yf26-terminal__head small,
.yf26-overview small,
.yf26-chart__head small {
color: #84908c;
font-size: 9px;
}
.yf26-terminal__head strong {
font-size: 15px;
}
.yf26-terminal__head > span {
padding: 7px 9px;
border: 1px solid rgba(16, 34, 30, .1);
border-radius: 8px;
color: #64726e;
background: #fff;
font-size: 9px;
}
.yf26-overview {
display: grid;
grid-template-columns: 1.45fr 1fr 1fr;
gap: 9px;
margin-top: 17px;
}
.yf26-overview > div {
min-width: 0;
padding: 13px;
border: 1px solid rgba(16, 34, 30, .09);
border-radius: 11px;
background: rgba(255, 255, 255, .78);
}
.yf26-overview > div strong {
display: block;
margin-top: 5px;
font-size: 14px;
white-space: nowrap;
}
.yf26-overview__primary strong {
font-size: 20px !important;
}
.yf26-overview__primary span {
display: block;
margin-top: 7px;
color: #16835f;
font-size: 8px;
}
.yf26-overview__metric:last-child strong {
color: #16835f;
}
.yf26-terminal__analytics {
display: grid;
grid-template-columns: minmax(0, 1.65fr) minmax(150px, .75fr);
gap: 9px;
margin-top: 9px;
}
.yf26-chart,
.yf26-assets {
min-width: 0;
padding: 13px;
border: 1px solid rgba(16, 34, 30, .09);
border-radius: 11px;
background: rgba(255, 255, 255, .78);
}
.yf26-chart__head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 10px;
font-weight: 700;
}
.yf26-chart svg {
display: block;
width: 100%;
height: 138px;
overflow: visible;
}
.yf26-chart__grid {
fill: none;
stroke: rgba(16, 34, 30, .08);
stroke-width: 1;
}
.yf26-chart__area {
fill: url(#yf26-chart-fill);
}
.yf26-chart__line {
fill: none;
stroke: #2fbf8d;
stroke-width: 3;
stroke-linecap: round;
}
.yf26-chart circle {
fill: #f8fcfa;
stroke: #2fbf8d;
stroke-width: 3;
}
.yf26-chart__months {
display: flex;
justify-content: space-between;
color: #929d99;
font-size: 7px;
}
.yf26-assets__donut {
position: relative;
width: 104px;
height: 104px;
display: grid;
place-items: center;
margin: 20px auto 14px;
border-radius: 50%;
background: conic-gradient(var(--yf26-mint) 0 48%, var(--yf26-gold) 48% 75%, #5f8ff1 75% 100%);
}
.yf26-assets__donut::before {
content: "";
position: absolute;
width: 72px;
height: 72px;
border-radius: 50%;
background: #fff;
}
.yf26-assets__donut span {
position: relative;
z-index: 1;
display: grid;
text-align: center;
font-size: 13px;
font-weight: 800;
}
.yf26-assets__donut small {
color: #83908b;
font-size: 7px;
font-weight: 500;
}
.yf26-assets__legend {
display: grid;
gap: 6px;
}
.yf26-assets__legend span {
display: grid;
grid-template-columns: 7px 1fr auto;
align-items: center;
gap: 5px;
color: #7a8782;
font-size: 7px;
}
.yf26-assets__legend i {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--dot);
}
.yf26-assets__legend b {
color: #33443f;
}
.yf26-command {
position: absolute;
left: -34px;
bottom: 30px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 11px;
min-width: 360px;
padding: 12px 14px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 14px;
color: #edf8f3;
background: rgba(8, 30, 24, .94);
box-shadow: 0 20px 48px rgba(0, 0, 0, .26);
backdrop-filter: blur(14px);
}
.yf26-command__icon {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 10px;
color: #fff;
background: var(--yf26-blue);
}
.yf26-command > div:nth-child(2) {
display: grid;
gap: 2px;
}
.yf26-command small {
color: rgba(237, 248, 243, .54);
font-size: 8px;
}
.yf26-command strong {
font-size: 11px;
}
.yf26-command > span {
padding: 5px 7px;
border-radius: 7px;
color: var(--yf26-mint);
background: rgba(101, 217, 174, .1);
font-size: 8px;
font-weight: 700;
}
.yf26-hero__foot {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 24px;
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, .09);
color: rgba(225, 239, 232, .46);
font-size: 11px;
}
.yf26-hero__foot div {
display: flex;
align-items: center;
gap: 12px;
}
.yf26-hero__foot b {
color: rgba(238, 249, 244, .7);
font-family: "IBM Plex Mono", monospace;
font-size: 12px;
}
.yf26-section {
padding: clamp(78px, 9vw, 112px) 0;
}
.yf26-section--light {
background: var(--yf26-paper);
}
#features.yf26-section {
padding-top: clamp(56px, 6vw, 76px);
}
.yf26-section-head {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(280px, .65fr);
align-items: end;
gap: clamp(32px, 7vw, 100px);
margin-bottom: 42px;
}
.yf26-section-head h2,
.yf26-system h2,
.yf26-final h2 {
max-width: 760px;
margin: 14px 0 0;
color: var(--yf26-ink);
font-size: clamp(38px, 4.5vw, 58px);
font-weight: 700;
line-height: 1.08;
}
.yf26-section-head > p,
.yf26-system__copy > p,
.yf26-final p {
margin: 0;
color: var(--yf26-muted);
font-size: 15px;
line-height: 1.7;
}
.yf26-capabilities {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.yf26-capability {
position: relative;
min-height: 350px;
overflow: hidden;
padding: 34px;
border: 1px solid var(--yf26-border-light);
border-radius: var(--yf26-radius);
background: rgba(255, 255, 255, .64);
transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.yf26-capability:hover {
transform: translateY(-3px);
border-color: rgba(38, 132, 99, .24);
box-shadow: 0 20px 50px rgba(18, 48, 40, .08);
}
.yf26-capability--wide {
grid-column: 1 / -1;
min-height: 310px;
display: grid;
grid-template-columns: minmax(0, .78fr) minmax(420px, 1.22fr);
align-items: center;
gap: 60px;
}
.yf26-capability__index {
display: inline-grid;
place-items: center;
width: 34px;
height: 28px;
margin-bottom: 16px;
border: 1px solid rgba(16, 34, 30, .12);
border-radius: 8px;
color: #527067;
font-family: "IBM Plex Mono", monospace;
font-size: 10px;
}
.yf26-capability h3 {
max-width: 480px;
margin: 0 0 12px;
font-size: clamp(24px, 2.7vw, 34px);
font-weight: 700;
line-height: 1.14;
}
.yf26-capability p {
max-width: 520px;
margin: 0;
color: var(--yf26-muted);
font-size: 15px;
line-height: 1.68;
}
.yf26-bars {
display: grid;
gap: 13px;
padding: 24px;
border-left: 1px solid var(--yf26-border-light);
}
.yf26-bars > div {
display: grid;
grid-template-columns: 72px 1fr 94px;
align-items: center;
gap: 14px;
color: #71807b;
font-size: 11px;
}
.yf26-bars i {
position: relative;
height: 8px;
overflow: hidden;
border-radius: 999px;
background: #e2e8e4;
}
.yf26-bars i::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: var(--value);
border-radius: inherit;
background: var(--color);
}
.yf26-bars b {
color: #20332d;
font-size: 11px;
text-align: right;
}
.yf26-capability--crypto {
color: #eff8f4;
background:
radial-gradient(circle at 100% 0, rgba(232, 200, 105, .16), transparent 19rem),
var(--yf26-forest);
}
.yf26-capability--crypto .yf26-capability__index {
color: rgba(238, 248, 243, .64);
border-color: rgba(255, 255, 255, .13);
}
.yf26-capability--crypto p {
color: rgba(230, 241, 236, .63);
}
.yf26-coin-list {
display: grid;
gap: 1px;
margin-top: 32px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 14px;
background: rgba(255, 255, 255, .09);
}
.yf26-coin-list span {
display: grid;
grid-template-columns: 32px 1fr auto;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: rgba(255, 255, 255, .035);
}
.yf26-coin-list b {
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: 50%;
color: var(--yf26-night);
background: var(--yf26-gold);
font-family: "IBM Plex Mono", monospace;
font-size: 12px;
}
.yf26-coin-list i {
color: rgba(236, 247, 242, .72);
font-size: 11px;
font-style: normal;
}
.yf26-capability--crypto .yf26-coin-list strong {
color: #f2faf6 !important;
font-size: 11px;
}
.yf26-capability--insight {
display: flex;
flex-direction: column;
}
.yf26-outcomes-section {
padding: 0 0 clamp(70px, 8vw, 104px);
background: var(--yf26-paper);
}
.yf26-outcomes {
overflow: hidden;
border: 1px solid var(--yf26-border-light);
border-radius: var(--yf26-radius);
background: rgba(255, 255, 255, .56);
}
.yf26-outcomes__intro {
max-width: 820px;
margin-bottom: 28px;
}
.yf26-outcomes__intro h2 {
max-width: 760px;
margin: 18px 0 0;
color: var(--yf26-ink);
font-size: clamp(28px, 3.2vw, 42px);
line-height: 1.12;
}
.yf26-outcomes__intro > p {
max-width: 760px;
margin: 16px 0 0;
color: var(--yf26-muted);
font-size: 16px;
line-height: 1.7;
}
.yf26-outcomes__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.yf26-outcomes__grid article {
min-width: 0;
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: 13px;
padding: 30px 26px;
border-right: 1px solid var(--yf26-border-light);
}
.yf26-outcomes__grid article:last-child {
border-right: 0;
}
.yf26-outcomes__grid article > i {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 50%;
color: #0e7658;
background: rgba(101, 217, 174, .18);
font-size: 16px;
}
.yf26-outcomes__grid h3 {
margin: 1px 0 8px;
color: var(--yf26-ink);
font-size: 16px;
line-height: 1.3;
}
.yf26-outcomes__grid p {
margin: 0;
color: var(--yf26-muted);
font-size: 13px;
line-height: 1.6;
}
.yf26-outcomes__trust {
display: flex;
align-items: center;
gap: 9px;
margin: 0;
padding: 17px 26px;
border-top: 1px solid var(--yf26-border-light);
color: #496159;
background: rgba(32, 116, 86, .045);
font-size: 12px;
font-weight: 600;
}
.yf26-outcomes__trust i {
color: #168565;
font-size: 15px;
}
@media (max-width: 1100px) {
.yf26-outcomes__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.yf26-outcomes__grid article:nth-child(2) {
border-right: 0;
}
.yf26-outcomes__grid article:nth-child(-n + 2) {
border-bottom: 1px solid var(--yf26-border-light);
}
}
@media (max-width: 640px) {
.yf26-outcomes__intro {
margin-bottom: 22px;
}
.yf26-outcomes__grid {
grid-template-columns: 1fr;
}
.yf26-outcomes__grid article,
.yf26-outcomes__grid article:nth-child(2) {
padding: 22px 20px;
border-right: 0;
border-bottom: 1px solid var(--yf26-border-light);
}
.yf26-outcomes__grid article:last-child {
border-bottom: 0;
}
.yf26-outcomes__trust {
align-items: flex-start;
padding: 16px 20px;
}
}
.yf26-insight {
display: grid;
grid-template-columns: 42px 1fr;
align-items: center;
gap: 14px;
margin-top: auto;
padding: 16px;
border: 1px solid rgba(77, 165, 244, .15);
border-radius: 14px;
background: rgba(77, 165, 244, .07);
}
.yf26-insight > i {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 12px;
color: #287fc5;
background: rgba(77, 165, 244, .13);
}
.yf26-insight div {
display: grid;
gap: 2px;
}
.yf26-insight small,
.yf26-insight span {
color: #71807b;
font-size: 9px;
}
.yf26-insight strong {
font-size: 12px;
}
.yf26-workflow {
color: #eef8f3;
background:
radial-gradient(circle at 50% 12%, rgba(101, 217, 174, .1), transparent 32rem),
var(--yf26-night);
}
.yf26-section-head--dark h2 {
color: #f2f9f5;
}
.yf26-section-head--dark > p {
color: rgba(225, 240, 233, .58);
}
.yf26-flow {
display: grid;
grid-template-columns: minmax(260px, 1fr) 72px minmax(230px, .86fr) 72px minmax(240px, .9fr);
align-items: center;
padding: 20px;
border: 1px solid var(--yf26-border-dark);
border-radius: 28px;
background: rgba(255, 255, 255, .025);
}
.yf26-flow__stage {
align-self: stretch;
min-width: 0;
padding: 18px;
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 18px;
background: rgba(255, 255, 255, .035);
}
.yf26-flow__label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
color: rgba(226, 241, 234, .5);
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
text-transform: uppercase;
}
.yf26-flow__label b {
color: var(--yf26-gold);
}
.yf26-chat {
overflow: hidden;
border-radius: 14px;
color: #1a2c27;
background: #dfeae6;
box-shadow: 0 16px 36px rgba(0, 0, 0, .16);
}
.yf26-chat__top {
min-height: 52px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 10px;
padding: 10px 13px;
color: #e9f6f0;
background: #1e685b;
}
.yf26-chat__top > i {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--yf26-blue);
}
.yf26-chat__top div {
display: grid;
}
.yf26-chat__top strong {
font-size: 12px;
}
.yf26-chat__top small {
color: rgba(233, 246, 240, .58);
font-size: 9px;
}
.yf26-chat__top > span {
color: rgba(255, 255, 255, .55);
font-size: 10px;
}
.yf26-chat__day {
width: fit-content;
margin: 10px auto 0;
padding: 3px 7px;
border-radius: 999px;
color: #64746e;
background: rgba(255, 255, 255, .52);
font-size: 9px;
}
.yf26-chat__message {
position: relative;
width: fit-content;
max-width: 84%;
margin: 8px 10px 0;
padding: 8px 10px;
border-radius: 10px;
background: #fff;
font-size: 11.5px;
line-height: 1.45;
}
.yf26-chat__message.is-user {
margin-left: auto;
background: #c9f1df;
}
.yf26-chat__message small {
display: block;
margin-top: 3px;
color: #81908a;
font-size: 8.5px;
text-align: right;
}
.yf26-chat__message small i {
color: #2d94da;
}
.yf26-chat__choices {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 7px 10px 0;
}
.yf26-chat__choices span {
padding: 5px 7px;
border: 1px solid rgba(30, 104, 91, .17);
border-radius: 7px;
color: #42655b;
background: rgba(255, 255, 255, .5);
font-size: 9.5px;
}
.yf26-chat__choices .is-active {
color: #174e42;
border-color: rgba(30, 104, 91, .3);
background: rgba(101, 217, 174, .3);
}
.yf26-chat .yf26-chat__message:last-child {
margin-bottom: 12px;
}
.yf26-flow__connector {
position: relative;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 5px;
padding: 0 6px;
color: #8edcbe;
}
.yf26-flow__connector > span {
height: 2px;
border-radius: 999px;
background: rgba(122, 211, 177, .36);
}
.yf26-flow__connector > i {
width: 28px;
height: 28px;
display: grid;
place-items: center;
border: 1px solid rgba(122, 211, 177, .26);
border-radius: 50%;
background: rgba(101, 217, 174, .07);
font-size: 15px;
}
.yf26-flow__connector small {
position: absolute;
top: calc(50% + 17px);
left: 50%;
transform: translateX(-50%);
color: rgba(221, 239, 231, .62);
font-family: "IBM Plex Mono", monospace;
font-size: 9px;
font-weight: 600;
white-space: nowrap;
}
.yf26-event {
display: grid;
gap: 1px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 13px;
background: rgba(255, 255, 255, .08);
}
.yf26-event div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 45px;
padding: 12px 13px;
background: rgba(255, 255, 255, .035);
}
.yf26-event span {
color: rgba(225, 240, 233, .42);
font-size: 11.5px;
}
.yf26-event strong {
font-size: 12.5px;
}
.yf26-flow__status,
.yf26-result-note {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 10px;
margin-top: 12px;
padding: 11px;
border-radius: 12px;
color: var(--yf26-mint);
background: rgba(101, 217, 174, .08);
}
.yf26-flow__status {
padding: 13px;
border: 1px solid rgba(101, 217, 174, .13);
background: rgba(101, 217, 174, .12);
}
.yf26-flow__status > i { font-size: 21px; }
.yf26-flow__status strong { font-size: 12px; }
.yf26-flow__status small { margin-top: 2px; }
.yf26-flow__status > i,
.yf26-result-note > i {
font-size: 18px;
}
.yf26-flow__status span,
.yf26-result-note span {
display: grid;
}
.yf26-flow__status strong,
.yf26-result-note strong {
font-size: 11px;
}
.yf26-flow__status small,
.yf26-result-note small {
color: rgba(222, 239, 231, .42);
font-size: 9px;
}
.yf26-result-card {
padding: 15px;
border-radius: 14px;
color: var(--yf26-ink);
background: #f7faf8;
}
.yf26-result-card > div:first-child {
display: grid;
}
.yf26-result-card small {
color: #7c8984;
font-size: 10px;
}
.yf26-result-card strong {
margin-top: 3px;
font-size: 18px;
}
.yf26-result-card span {
color: #5f706a;
font-size: 10px;
}
.yf26-result-card__chart {
height: 80px;
display: flex;
align-items: flex-end;
gap: 8px;
margin: 15px 0 10px;
padding: 0 3px;
border-bottom: 1px solid rgba(16, 34, 30, .08);
}
.yf26-result-card__chart i {
flex: 1;
height: var(--h);
border-radius: 4px 4px 0 0;
background: linear-gradient(180deg, #65d9ae, #2fa67d);
}
.yf26-result-card__change {
color: #16835f;
font-size: 10.5px;
font-weight: 700;
}
.yf26-result-note {
color: var(--yf26-gold);
background: rgba(232, 200, 105, .08);
}
.yf26-workflow__steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
margin-top: 24px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 14px;
background: rgba(255, 255, 255, .08);
}
.yf26-workflow__steps span {
display: grid;
gap: 3px;
padding: 15px 16px;
color: rgba(223, 239, 231, .52);
background: var(--yf26-night);
font-size: 12px;
text-align: center;
}
.yf26-workflow__steps b {
color: #eaf5f0;
}
.yf26-workflow__steps small {
color: rgba(223, 239, 231, .42);
font-size: 10px;
}
.yf26-section--system {
background: #e8eeea;
}
.yf26-system {
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr);
align-items: center;
gap: clamp(40px, 8vw, 110px);
}
.yf26-system__copy > p {
max-width: 610px;
margin-top: 22px;
}
.yf26-system__copy ul {
display: grid;
gap: 16px;
margin: 30px 0 0;
padding: 0;
list-style: none;
}
.yf26-system__copy li {
display: grid;
grid-template-columns: 42px 1fr;
align-items: start;
gap: 13px;
}
.yf26-system__copy li > i {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border: 1px solid rgba(16, 34, 30, .09);
border-radius: 11px;
color: #218263;
background: rgba(255, 255, 255, .6);
}
.yf26-system__copy li span {
display: grid;
gap: 2px;
color: var(--yf26-muted);
font-size: 12px;
line-height: 1.5;
}
.yf26-system__copy li strong {
color: var(--yf26-ink);
font-size: 13px;
}
.yf26-system__visual {
min-height: 490px;
display: grid;
place-items: center;
}
.yf26-system__visual--orbital {
min-width: 0;
position: relative;
z-index: 2;
overflow: visible;
}
.yf26-system__visual--orbital > .finance-orbit.v2 {
width: min(100%, 620px);
}
.yf26-orbit {
position: relative;
width: min(440px, 100%);
aspect-ratio: 1;
border: 1px solid rgba(16, 34, 30, .11);
border-radius: 50%;
}
.yf26-orbit::before,
.yf26-orbit::after {
content: "";
position: absolute;
border: 1px solid rgba(16, 34, 30, .09);
border-radius: 50%;
}
.yf26-orbit::before { inset: 13%; }
.yf26-orbit::after { inset: 28%; }
.yf26-orbit__core {
position: absolute;
inset: 35%;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
border-radius: 50%;
color: #dff7ee;
background: var(--yf26-forest);
box-shadow: 0 22px 60px rgba(13, 39, 33, .22);
}
.yf26-orbit__core img {
width: 70px;
height: 70px;
display: block;
flex: 0 0 auto;
object-fit: contain;
object-position: center;
}
.yf26-orbit__core small {
font-size: 9px;
line-height: 1;
text-align: center;
}
.yf26-orbit__node {
position: absolute;
z-index: 3;
min-width: 104px;
display: grid;
grid-template-columns: 30px auto;
align-items: center;
gap: 7px;
padding: 8px 10px;
border: 1px solid rgba(16, 34, 30, .1);
border-radius: 12px;
background: rgba(252, 254, 252, .9);
box-shadow: 0 12px 30px rgba(16, 34, 30, .08);
}
.yf26-orbit__node i {
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: 9px;
color: #1f755b;
background: var(--yf26-mint-soft);
}
.yf26-orbit__node b {
font-size: 9px;
}
.yf26-orbit__node.is-bank { top: 2%; left: 36%; }
.yf26-orbit__node.is-cash { right: -2%; top: 44%; }
.yf26-orbit__node.is-invest { bottom: 2%; left: 36%; }
.yf26-orbit__node.is-crypto { left: -2%; top: 44%; }
.yf26-orbit__node.is-crypto i { color: #8b6d16; background: #f8efd3; }
.yf26-pricing-section {
color: #eef8f3;
background: var(--yf26-forest);
}
.yf26-pricing {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.yf26-plan {
position: relative;
min-width: 0;
min-height: 520px;
display: flex;
flex-direction: column;
padding: 30px;
border: 1px solid rgba(255, 255, 255, .11);
border-radius: 22px;
background: rgba(255, 255, 255, .035);
transition: transform .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}
.yf26-plan:hover {
transform: translateY(-4px);
border-color: rgba(101, 217, 174, .38);
background: rgba(255, 255, 255, .055);
box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
}
.yf26-plan--featured {
border-color: rgba(101, 217, 174, .48);
background: linear-gradient(180deg, rgba(101, 217, 174, .11), rgba(255, 255, 255, .035));
box-shadow: 0 22px 60px rgba(101, 217, 174, .08);
}
.yf26-plan--business {
border-color: rgba(101, 217, 174, .24);
background: linear-gradient(180deg, rgba(101, 217, 174, .055), rgba(255, 255, 255, .035) 42%);
}
.yf26-plan__badge {
position: absolute;
top: 20px;
right: 20px;
padding: 6px 9px;
border-radius: 999px;
color: #0b2a21;
background: var(--yf26-mint);
font-size: 10px;
font-weight: 800;
}
.yf26-plan__head > span {
color: var(--yf26-gold);
font-family: "IBM Plex Mono", monospace;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
}
.yf26-plan h3 {
margin: 14px 0 20px;
font-size: 26px;
font-weight: 700;
}
.yf-plan-title-row {
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.yf-plan-title-row h3 {
min-width: 0;
}
.yf-youfi-multiplier {
position: relative;
min-height: 30px;
display: inline-flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
padding: 6px 10px;
border: 1px solid transparent;
border-radius: 999px;
font: 750 10px/1 "Manrope", sans-serif;
letter-spacing: 0;
white-space: nowrap;
cursor: pointer;
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.yf-youfi-multiplier span {
font-family: "IBM Plex Mono", monospace;
font-size: 12px;
font-weight: 700;
}
.yf-youfi-multiplier:hover,
.yf-youfi-multiplier[aria-expanded="true"] {
transform: translateY(-1px);
box-shadow: 0 7px 18px rgba(5, 28, 22, .14);
}
.yf-youfi-multiplier:focus-visible {
outline: 3px solid rgba(89, 189, 154, .26);
outline-offset: 2px;
}
.yf-youfi-multiplier--free {
color: #56625e;
border-color: rgba(111, 123, 119, .28);
background: #edf1ef;
}
.yf-youfi-multiplier--premium {
color: #725914;
border-color: rgba(207, 165, 47, .36);
background: #f7e7a9;
}
.yf-youfi-multiplier--business {
color: #0b664e;
border-color: rgba(38, 157, 119, .32);
background: #d7f2e7;
}
.yf-youfi-multiplier--founder {
color: #8a2f34;
border-color: rgba(193, 75, 84, .3);
background: #f8dde0;
}
.yf26-plan .yf-plan-title-row {
align-items: center;
margin: 14px 0 20px;
}
.yf26-plan .yf-plan-title-row h3 {
margin: 0;
}
.yf26-plan__head > div {
display: flex;
align-items: baseline;
gap: 7px;
}
.yf26-plan__head > .yf-plan-title-row {
align-items: center;
justify-content: space-between;
gap: 12px;
}
.yf26-plan__head strong {
font-size: 42px;
line-height: 1;
}
.yf26-plan__head small {
color: rgba(227, 241, 234, .47);
font-size: 10px;
}
.yf26-plan__head p {
min-height: 70px;
margin: 16px 0 0;
color: rgba(228, 241, 235, .62);
font-size: 13px;
line-height: 1.62;
}
.yf26-plan__sale-slot {
min-height: 34px;
display: flex;
align-items: flex-end;
}
.yf26-plan__sale-slot.is-empty > .yf26-sale {
visibility: hidden;
}
.yf26-plan__countdown-slot {
min-height: 25px;
display: flex;
align-items: flex-start;
}
.yf26-plan__sale-slot .yf26-sale,
.yf26-plan__countdown-slot .yf26-sale-countdown {
margin-bottom: 0;
}
.yf26-plan ul {
display: grid;
gap: 13px;
margin: 26px 0 30px;
padding: 24px 0 0;
border-top: 1px solid rgba(255, 255, 255, .08);
list-style: none;
}
.yf26-plan li {
display: grid;
grid-template-columns: 18px 1fr;
gap: 8px;
color: rgba(229, 242, 236, .7);
font-size: 14px;
line-height: 1.48;
}
.yf26-plan li i {
color: var(--yf26-mint);
}
.yf26-plan .yf-plan-feature,
.yf-plan-features .yf-plan-feature {
position: relative;
grid-template-columns: 18px minmax(0, 1fr) 20px;
align-items: start;
}
.yf-plan-feature__mark {
display: inline-grid;
place-items: center;
width: 18px;
min-height: 20px;
margin-top: 0;
line-height: 1;
transform: translateY(-1px);
}
.yf-plan-feature__mark::before { vertical-align: 0; }
.yf-plan-feature__content {
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px 7px;
}
.yf-plan-feature__label {
min-width: 0;
}
.yf-plan-feature__label--sparkles {
position: relative;
isolation: isolate;
display: inline-block;
padding-inline: 3px;
color: #e5c967;
font-weight: 750;
text-shadow: 0 0 16px rgba(229, 201, 103, .2);
}
.yf-plan-feature__label-text {
position: relative;
z-index: 2;
}
.yf-plan-feature__sparkles {
position: absolute;
inset: -5px -2px;
z-index: 1;
pointer-events: none;
}
.yf-plan-feature__sparkle {
position: absolute;
color: #75d6b1;
font-size: 9px;
line-height: 1;
opacity: 0;
transform-origin: center;
filter: drop-shadow(0 0 4px currentColor);
animation: yf-plan-sparkle 1.08s cubic-bezier(.35, 0, .2, 1) infinite;
}
.yf-plan-feature__sparkle--1 { top: 1px; left: 4%; animation-delay: -.08s; }
.yf-plan-feature__sparkle--2 { top: -1px; left: 18%; color: #e5c967; animation-delay: -.44s; animation-duration: 1.16s; }
.yf-plan-feature__sparkle--3 { top: 0; right: 5%; animation-delay: -.26s; animation-duration: .94s; }
.yf-plan-feature__sparkle--4 { right: 15%; bottom: 0; color: #e5c967; animation-delay: -.63s; animation-duration: 1.24s; }
.yf-plan-feature__sparkle--5 { bottom: 1px; left: 7%; animation-delay: -.77s; animation-duration: 1.04s; }
.yf-plan-feature__sparkle--6 { top: 38%; left: 40%; color: #f1dc8d; font-size: 6px; animation-delay: -.35s; animation-duration: .88s; }
.yf-plan-feature__sparkle--7 { bottom: -1px; left: 59%; font-size: 7px; animation-delay: -.86s; animation-duration: 1.12s; }
.yf-plan-feature__sparkle--8 { top: 24%; right: 2%; color: #f1dc8d; font-size: 6px; animation-delay: -.16s; animation-duration: .98s; }
.yf-plan-feature__sparkle--9 { top: 16%; left: 11%; font-size: 7px; animation-delay: -.54s; animation-duration: .92s; }
@keyframes yf-plan-sparkle {
0%, 100% { opacity: 0; transform: translate3d(-1px, 1px, 0) scale(.2) rotate(20deg); }
20% { opacity: 1; transform: translate3d(0, -1px, 0) scale(1.08) rotate(105deg); }
48% { opacity: .34; transform: translate3d(1px, -2px, 0) scale(.58) rotate(175deg); }
70% { opacity: .92; transform: translate3d(0, -1px, 0) scale(.9) rotate(245deg); }
88% { opacity: 0; transform: translate3d(-1px, -3px, 0) scale(.24) rotate(315deg); }
}
.yf-plan-feature__badge {
display: inline-flex;
align-items: center;
min-height: 20px;
padding: 3px 7px;
border: 1px solid rgba(210, 169, 54, .3);
border-radius: 999px;
color: #e4c763;
background: rgba(210, 169, 54, .1);
font-size: 9px;
font-weight: 800;
line-height: 1;
white-space: nowrap;
}
.yf-plan-feature__info {
position: relative;
width: 20px;
height: 20px;
display: inline-grid;
place-items: center;
padding: 0;
border: 1px solid currentColor;
border-radius: 50%;
color: rgba(101, 217, 174, .72);
background: transparent;
cursor: pointer;
font-size: 11px;
font-weight: 800;
line-height: 1;
transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}
.yf-plan-feature__info::after {
content: "";
position: absolute;
inset: -5px;
}
.yf-plan-feature__info:hover,
.yf-plan-feature__info[aria-expanded="true"] {
color: #0b5b44;
border-color: #78cdb0;
background: #dff6ed;
}
.yf-plan-feature__info:focus-visible {
outline: 3px solid rgba(76, 185, 148, .28);
outline-offset: 2px;
}
.yf-plan-feature-popover {
position: fixed;
z-index: 2200;
padding: 15px 16px;
border: 1px solid #bad9ce;
border-radius: 8px;
color: #21342e;
background: #fff;
box-shadow: 0 18px 50px rgba(7, 35, 27, .2);
}
.yf-plan-feature-popover[hidden] {
display: none;
}
.yf-plan-feature-popover strong {
display: block;
padding-right: 4px;
color: #19362d;
font-size: 16px;
font-weight: 750;
line-height: 1.35;
}
.yf-plan-feature-popover p {
margin: 7px 0 0;
color: #576a64;
font-size: 13.5px;
line-height: 1.62;
}
body.yf-landing-body .yf-plan-feature-popover,
body.yf-public-page .yf-plan-feature-popover {
color: #f1f7f5;
border-color: rgba(108, 184, 157, .34);
background: #17342c;
box-shadow: 0 18px 50px rgba(1, 15, 11, .42);
}
body.yf-landing-body .yf-plan-feature-popover strong,
body.yf-public-page .yf-plan-feature-popover strong {
color: #f5fbf8;
}
body.yf-landing-body .yf-plan-feature-popover p,
body.yf-public-page .yf-plan-feature-popover p {
color: #c2d2cd;
}
.yf26-plan .yf26-button {
width: 100%;
margin-top: auto;
color: #eff8f4;
}
.yf26-plan .yf26-button--primary {
color: #092019;
}
.yf26-final-section {
position: relative;
margin-top: -1px;
background: var(--yf26-night);
}
.yf26-final {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: clamp(36px, 5vw, 56px);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 28px;
color: #edf8f3;
background:
radial-gradient(circle at 84% 16%, rgba(101, 217, 174, .16), transparent 18rem),
rgba(255, 255, 255, .035);
}
.yf26-final h2 {
color: #f1f8f4;
font-size: clamp(34px, 4vw, 50px);
}
.yf26-final p {
margin-top: 14px;
color: rgba(227, 241, 234, .6);
}
.yf26-final .yf26-button {
flex: 0 0 auto;
}
.yf26-materials-section {
color: var(--yf26-ink);
background: var(--yf26-paper);
}
.yf26-materials-head {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
align-items: end;
gap: 64px;
margin-bottom: 42px;
}
.yf26-materials-head h2 {
max-width: 760px;
margin: 0;
font-size: clamp(38px, 4.4vw, 58px);
line-height: 1.08;
}
.yf26-materials-head > p {
margin: 0;
color: var(--yf26-muted);
font-size: 16px;
line-height: 1.7;
}
.yf26-materials-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
overflow: hidden;
border: 1px solid var(--yf26-border-light);
border-radius: 8px;
background: var(--yf26-border-light);
}
.yf26-material {
display: flex;
flex-direction: column;
min-height: 280px;
padding: 28px;
color: var(--yf26-ink);
background: var(--yf26-white);
text-decoration: none;
transition: color .22s ease, background-color .22s ease;
}
.yf26-material:hover,
.yf26-material:focus-visible {
color: var(--yf26-ink);
background: #eaf4ef;
outline: none;
}
.yf26-material__top {
display: flex;
align-items: center;
justify-content: space-between;
color: #7f8e88;
font: 600 11px/1.3 "IBM Plex Mono", monospace;
text-transform: uppercase;
}
.yf26-material__top span { display: flex; align-items: center; gap: 8px; }
.yf26-material__top span i { color: #168565; font-size: 15px; }
.yf26-material__top > i { color: #168565; font-size: 18px; transition: transform .2s ease; }
.yf26-material:hover .yf26-material__top > i { transform: translate(3px, -3px); }
.yf26-material h3 { margin: 48px 0 12px; font-size: 23px; line-height: 1.2; }
.yf26-material p { margin: 0; color: var(--yf26-muted); font-size: 14px; line-height: 1.65; }
.yf26-material small { margin-top: auto; padding-top: 24px; color: #168565; font-weight: 650; }
.yf26-materials-more { display: flex; justify-content: flex-end; margin-top: 24px; }
.yf26-materials-more a { display: inline-flex; align-items: center; gap: 9px; color: #146f55; font-weight: 750; text-decoration: none; }
@media (max-width: 960px) {
.yf26-materials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
.yf26-materials-head { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 575.98px) {
.yf26-materials-grid { grid-template-columns: 1fr; }
.yf26-material { min-height: 240px; padding: 24px; }
.yf26-material h3 { margin-top: 34px; }
}
.yf-cookie[hidden] { display: none !important; }
.yf-cookie,
.yf-cookie *,
.yf-cookie *::before,
.yf-cookie *::after { box-sizing: border-box; }
.yf-cookie {
position: fixed;
z-index: 12000;
right: 20px;
left: 20px;
bottom: 22px;
width: min(920px, calc(100% - 40px));
margin-inline: auto;
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
align-items: center;
gap: 18px;
padding: 20px 22px;
border: 1px solid rgba(111, 217, 178, .26);
border-radius: 14px;
color: #eaf5f0;
background: rgba(8, 27, 22, .97);
box-shadow: 0 28px 80px rgba(0, 0, 0, .3);
font-family: "Manrope", Arial, sans-serif;
animation: yf-cookie-in .28s ease both;
}
.yf-cookie__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #65d9ae; background: rgba(101,217,174,.12); font-size: 19px; }
.yf-cookie__copy strong { display: block; color: #f2f8f5 !important; font-size: 16px; font-weight: 750; line-height: 1.3; }
.yf-cookie__copy p { margin: 5px 0 8px; color: rgba(234,245,240,.72); font-size: 13px; line-height: 1.5; }
.yf-cookie__links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.yf-cookie__links a { color: #9ddfc6; font-size: 12px; text-decoration: none; }
.yf-cookie__links a:hover { color: #fff; }
.yf-cookie__actions { display: flex; gap: 7px; }
.yf-cookie__actions button { min-height: 42px; padding: 10px 15px; border-radius: 8px; font-size: 13px; font-weight: 750; white-space: nowrap; cursor: pointer; }
.yf-cookie__secondary { border: 1px solid rgba(255,255,255,.16); color: #edf7f2; background: transparent; }
.yf-cookie__primary { border: 1px solid #65d9ae; color: #092019; background: #65d9ae; }
@keyframes yf-cookie-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.yf-legal-page { background: var(--yf26-paper); }
.yf-legal-hero { padding: clamp(64px, 8vw, 104px) 0; color: #f2f8f5; background-color: var(--yf26-night); background-image: linear-gradient(rgba(101,217,174,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(101,217,174,.04) 1px,transparent 1px); background-size: 46px 46px; }
.yf-legal-hero h1 { max-width: 920px; margin: 0; color: #f6faf7; font-size: clamp(36px, 5vw, 64px); line-height: 1.06; }
.yf-legal-hero > div > p:last-child { max-width: 760px; margin: 20px 0 0; color: rgba(234,245,240,.68); font-size: 17px; }
.yf-legal-content { padding: clamp(58px, 7vw, 92px) 0; }
.yf-legal-content__grid { display: grid; grid-template-columns: 220px minmax(0, 780px); justify-content: space-between; gap: 70px; }
.yf-legal-content aside { position: sticky; top: 92px; align-self: start; display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(16,34,30,.14); }
.yf-legal-content aside strong { margin-bottom: 5px; font-size: 12px; text-transform: uppercase; }
.yf-legal-content aside a { color: #697a74; font-size: 13px; line-height: 1.5; text-decoration: none; }
.yf-legal-content aside a:hover { color: #137858; }
.yf-legal-document { padding: clamp(24px, 4vw, 48px); border: 1px solid rgba(16,34,30,.12); border-radius: 12px; background: #fbfdfb; box-shadow: 0 22px 60px rgba(8,35,27,.08); }
.yf-legal-document h2 { margin: 38px 0 12px; color: #10221e; font-size: clamp(20px, 2.2vw, 27px); line-height: 1.25; }
.yf-legal-document h2:first-of-type { margin-top: 22px; }
.yf-legal-document p, .yf-legal-document li { color: #4e6059; font-size: 16px; line-height: 1.75; }
.yf-legal-document a { color: #117555; text-decoration: underline; }
.yf-legal-document li + li { margin-top: 8px; }
.yf-legal-document__updated { color: #8a752d !important; font: 600 12px/1.4 "IBM Plex Mono", monospace !important; text-transform: uppercase; }
.yf-legal-pdf__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; }
.yf-legal-pdf__head h2 { margin-top: 8px; }
.yf-legal-pdf__head p:not(.yf-legal-document__updated) { margin-bottom: 0; }
.yf-legal-pdf__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.yf-legal-pdf__actions .yf26-button { min-height: 44px; white-space: nowrap; }
.yf-legal-pdf__actions .yf26-button--line { border-color: rgba(16, 34, 30, .18); color: #173029; background: #f4f8f6; }
.yf-legal-pdf__viewer { margin-top: 30px; overflow: hidden; border: 1px solid rgba(16, 34, 30, .12); border-radius: 9px; background: #eef3f0; }
.yf-legal-pdf__viewer object { display: block; width: 100%; height: min(76vh, 920px); min-height: 620px; }
.yf-legal-pdf__viewer object p { padding: 30px; }
@media (max-width: 820px) {
.yf-legal-content__grid { grid-template-columns: 1fr; gap: 32px; }
.yf-legal-content aside { position: static; }
.yf-cookie { grid-template-columns: 40px minmax(0, 1fr); }
.yf-cookie__actions { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 575.98px) {
.yf-cookie { right: 12px; left: 12px; bottom: 12px; width: calc(100% - 24px); grid-template-columns: 36px minmax(0, 1fr); gap: 11px; padding: 16px; }
.yf-cookie__icon { width: 36px; height: 36px; }
.yf-cookie__actions { display: grid; grid-template-columns: 1fr; }
.yf-cookie__actions button { width: 100%; white-space: normal; }
.yf-legal-document { padding: 22px 18px; }
.yf-legal-pdf__head { grid-template-columns: 1fr; align-items: start; }
.yf-legal-pdf__actions { display: grid; width: 100%; justify-content: stretch; }
.yf-legal-pdf__actions .yf26-button { width: 100%; }
.yf-legal-pdf__viewer object { min-height: 520px; }
}
@keyframes yf26-rise {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1050px) {
.yf26-hero__grid {
grid-template-columns: 1fr;
}
.yf26-hero__copy {
max-width: 760px;
}
.yf26-terminal {
width: min(760px, 100%);
margin-inline: auto;
}
.yf26-command {
left: 20px;
}
.yf26-flow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.yf26-flow__connector {
display: none;
}
.yf26-system {
grid-template-columns: 1fr 1fr;
gap: 48px;
}
}
@media (max-width: 820px) {
.yf26-container {
width: min(100% - 28px, 720px);
}
.yf26-nav__inner {
grid-template-columns: 1fr auto;
min-height: 62px;
}
.yf26-nav__links {
display: none;
}
.yf26-nav__brand img {
height: 34px;
}
.yf26-nav__auth {
width: 196px;
}
.yf26-nav__auth iframe {
width: 196px !important;
max-width: 196px !important;
}
.yf26-section-head,
.yf26-system {
grid-template-columns: 1fr;
}
.yf26-section-head {
align-items: start;
gap: 20px;
}
.yf26-section-head > p {
max-width: 610px;
}
.yf26-capability--wide {
grid-template-columns: 1fr;
gap: 30px;
}
.yf26-bars {
padding: 0;
border-left: 0;
}
.yf26-flow {
grid-template-columns: 1fr;
gap: 12px;
max-width: 560px;
margin-inline: auto;
}
.yf26-flow__stage {
padding: 20px;
}
.yf26-chat {
max-width: 380px;
margin-inline: auto;
}
.yf26-workflow__steps {
grid-template-columns: 1fr;
}
.yf26-system__visual {
min-height: 440px;
}
.yf26-system__visual--orbital {
min-height: 390px;
}
.yf26-orbit {
width: min(400px, 88vw);
}
.yf26-pricing {
grid-template-columns: 1fr;
max-width: 540px;
margin-inline: auto;
}
.yf26-plan {
min-height: 0;
}
.yf26-plan__head p {
min-height: 0;
}
.yf26-plan__sale-slot.is-empty,
.yf26-plan__countdown-slot.is-empty {
display: none;
}
}
@media (max-width: 575.98px) {
.yf26-container {
width: calc(100% - 24px);
}
.yf26-nav__inner {
gap: 10px;
}
.yf26-nav__brand img {
width: 112px;
height: auto;
}
.yf26-nav__auth {
width: 164px;
height: 38px;
}
.yf26-nav__auth iframe {
width: 164px !important;
max-width: 164px !important;
height: 38px !important;
}
.yf26-nav__auth-face {
gap: 6px;
font-size: 10px;
}
.yf26-nav__auth-face i {
font-size: 14px;
}
.yf26-hero {
min-height: auto;
padding: 52px 0 24px;
}
.yf26-hero h1 {
font-size: clamp(37px, 11vw, 48px);
line-height: 1.04;
}
.yf26-hero__lead {
font-size: 15px;
}
.yf26-actions,
.yf26-button {
width: 100%;
}
.yf26-trust {
display: grid;
}
.yf26-terminal__chrome {
grid-template-columns: 1fr auto;
}
.yf26-terminal__chrome > span {
display: none;
}
.yf26-terminal__body {
min-height: 370px;
grid-template-columns: 42px 1fr;
}
.yf26-terminal__rail {
padding-inline: 5px;
}
.yf26-terminal__rail span {
width: 28px;
height: 28px;
}
.yf26-terminal__content {
padding: 13px;
}
.yf26-overview {
grid-template-columns: 1fr 1fr;
}
.yf26-overview__primary {
grid-column: 1 / -1;
}
.yf26-terminal__analytics {
grid-template-columns: 1fr;
}
.yf26-assets {
display: none;
}
.yf26-chart svg {
height: 106px;
}
.yf26-command {
position: relative;
left: auto;
bottom: auto;
min-width: 0;
margin: -10px 12px 12px;
}
.yf26-command > span {
display: none;
}
.yf26-hero__foot {
align-items: flex-start;
flex-direction: column;
}
.yf26-section {
padding: 66px 0;
}
.yf26-section-head h2,
.yf26-system h2 {
font-size: clamp(34px, 10vw, 44px);
}
.yf26-capabilities {
grid-template-columns: 1fr;
}
.yf26-capability--wide {
grid-column: auto;
}
.yf26-capability {
min-height: 0;
padding: 25px;
border-radius: 20px;
}
.yf26-capability__index {
margin-bottom: 16px;
}
.yf26-bars > div {
grid-template-columns: 58px 1fr 74px;
gap: 8px;
font-size: 9px;
}
.yf26-bars b {
font-size: 9px;
}
.yf26-flow {
padding: 10px;
border-radius: 20px;
}
.yf26-workflow__steps span {
text-align: left;
}
.yf26-system__visual {
min-height: 350px;
}
.yf26-system__visual--orbital {
min-height: 300px;
margin-inline: -20px;
}
.yf26-orbit__node {
min-width: 90px;
grid-template-columns: 26px auto;
padding: 6px 8px;
}
.yf26-orbit__node i {
width: 24px;
height: 24px;
}
.yf26-orbit__node.is-bank { top: -2%; left: 34%; }
.yf26-orbit__node.is-cash { right: -5%; }
.yf26-orbit__node.is-invest { bottom: -2%; left: 34%; }
.yf26-orbit__node.is-crypto { left: -5%; }
.yf26-plan {
padding: 25px;
}
.yf26-final {
align-items: stretch;
flex-direction: column;
padding: 28px;
border-radius: 22px;
}
.yf26-final h2 {
font-size: 36px;
}
}
@media (prefers-reduced-motion: reduce) {
.yf26-hero__copy,
.yf26-terminal {
animation: none;
}
.yf26-button,
.yf26-capability,
.yf26-plan {
transition: none;
}
}
.expense-budget-ring {
display: grid;
place-items: center;
width: 128px;
height: 128px;
margin: 0 auto 10px;
border-radius: 50%;
background:
radial-gradient(circle closest-side, #fff 79%, transparent 81%),
conic-gradient(var(--expense-budget-color, #2dbf90) var(--expense-budget-progress, 0%), rgba(37, 50, 75, 0.10) 0);
box-shadow: inset 0 0 0 1px rgba(45, 191, 144, 0.08);
}
.expense-budget-ring.is-overrun {
box-shadow: inset 0 0 0 1px rgba(255, 77, 95, 0.12);
}
.expense-budget-ring__center {
display: grid;
gap: 4px;
text-align: center;
}
.expense-budget-ring__center strong {
color: #25324b;
font-size: 1rem;
line-height: 1;
}
.expense-budget-ring__center span {
color: #536179;
font-size: .78rem;
font-weight: 700;
}
.expense-budget-ring-caption {
color: #657188;
font-size: .8rem;
font-weight: 600;
}
.income-add-tag-action {
display: inline-flex;
align-items: center;
gap: 6px;
color: #657188;
font-size: .92rem;
}
.income-add-tag-action:hover,
.income-add-tag-action:focus {
color: #2f80ed;
}
.income-tags-carousel {
display: flex;
gap: 22px;
overflow-x: auto;
overflow-y: hidden;
padding: 2px 2px 4px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.income-tags-carousel::-webkit-scrollbar {
display: none;
}
.income-tags-page {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(24px, auto));
grid-auto-flow: row;
gap: 16px 22px;
min-width: 100%;
scroll-snap-align: start;
}
.income-tags-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 16px;
}
.income-tags-control {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid rgba(83, 97, 121, 0.18);
border-radius: 50%;
color: #536179;
background: #ffffff;
box-shadow: 0 6px 14px rgba(22, 34, 51, 0.06);
transition: color .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease;
}
.income-tags-control:hover:not(:disabled),
.income-tags-control:focus-visible:not(:disabled) {
color: #2f80ed;
border-color: rgba(47, 128, 237, 0.36);
background: rgba(47, 128, 237, 0.06);
}
.income-tags-control:disabled {
opacity: .35;
cursor: default;
}
.income-tags-page-indicator {
min-width: 36px;
color: #657188;
font-size: .82rem;
text-align: center;
}
.income-tag {
min-width: 0;
}
.income-tag-select {
display: inline-flex;
align-items: center;
gap: 7px;
max-width: 100%;
color: #536179;
font-size: .92rem;
line-height: 1.2;
}
.income-tag-color {
flex: 0 0 auto;
font-size: .78rem;
}
.income-tag-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.income-tag-edit {
flex: 0 0 auto;
color: #8b98ad;
font-size: .83rem;
}
.income-month-goal {
display: inline-flex;
align-items: center;
gap: 8px;
color: #657188;
font-size: .9rem;
}
.income-month-goal i {
color: #8b98ad;
}
.income-month-metrics {
display: grid;
grid-template-columns: repeat(2, minmax(260px, 1fr));
gap: 12px 16px;
}
.income-month-metric {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 14px;
align-items: center;
min-height: 78px;
padding: 14px 16px;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 8px;
background: #ffffff;
box-shadow: 0 10px 24px rgba(22, 34, 51, 0.04);
}
.income-month-metric__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
font-size: 1.3rem;
}
.income-month-metric__label {
display: block;
margin-bottom: 4px;
color: #657188;
font-size: .8rem;
line-height: 1.2;
}
.income-month-metric strong {
display: block;
color: #25324b;
font-size: .99rem;
line-height: 1.2;
}
.income-month-metric #incomeHeroMonthPlan,
.income-month-metric #incomeTotalMonth {
color: #25324b;
font-size: .99rem;
line-height: 1.2;
}
.income-month-metric #incomeHeroMonthPlan strong,
.income-month-metric #incomeTotalMonth strong {
display: inline;
}
.income-month-metric__subtext {
display: block;
margin-top: 3px;
font-size: .86rem;
font-weight: 700;
line-height: 1.2;
}
.income-month-metric--plan .income-month-metric__icon {
color: #2f80ed;
background: rgba(47, 128, 237, 0.12);
}
.income-month-metric--fact .income-month-metric__icon {
color: #18a878;
background: rgba(24, 168, 120, 0.12);
}
.income-month-metric--delta .income-month-metric__icon {
color: #ff4d5f;
background: rgba(255, 77, 95, 0.12);
}
.income-month-metric--completion {
grid-template-columns: minmax(0, 1fr) 58px;
}
.income-month-progress-ring {
width: 56px;
height: 56px;
border-radius: 50%;
background:
radial-gradient(circle closest-side, #fff 74%, transparent 76%),
conic-gradient(#2dbf90 var(--income-progress, 0%), rgba(45, 191, 144, 0.16) 0);
box-shadow: inset 0 0 0 1px rgba(45, 191, 144, 0.10);
}
#income-kpi-card .card-body,
#income-month-kpi-card .card-body {
padding: 16px;
}
#card15,
#income-kpi-card {
height: auto;
}
#income-month-kpi-card .card-body,
#income-month-kpi-card .income-kpi-inline {
display: flex;
flex-direction: column;
}
#income-month-kpi-card .income-kpi-inline {
flex: 1 1 auto;
}
#income-month-kpi-card .income-kpi-section {
margin-top: auto;
margin-bottom: auto;
}
.income-kpi-inline {
color: #313a4f;
font-size: .88rem;
line-height: 1.35;
}
.income-kpi-section {
display: grid;
gap: 8px;
}
.income-kpi-row {
display: grid;
grid-template-columns: 18px minmax(130px, 1fr) minmax(108px, auto);
gap: 10px;
align-items: start;
color: #536179;
}
.income-kpi-row i {
margin-top: 2px;
color: #8b98ad;
font-size: .92rem;
}
.income-kpi-row > span:last-child {
color: #25324b;
text-align: right;
font-weight: 700;
}
.income-kpi-row strong {
font-weight: 700;
}
.yf-income-kpi {
display: grid;
gap: 12px;
color: #22332e;
}
.yf-income-kpi__heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.yf-income-kpi__top-grid,
.yf-income-kpi__detail-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.yf-income-kpi__top-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yf-income-kpi__metric,
.yf-income-kpi__detail-grid > div {
position: relative;
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
grid-template-areas: "icon label" "icon value";
align-items: center;
column-gap: 9px;
min-height: 66px;
padding: 10px;
border: 1px solid #dbe7e3;
border-radius: 8px;
background: #fbfdfc;
}
.yf-income-kpi__metric > i,
.yf-income-kpi__detail-grid > div > i,
.yf-income-kpi__rows > div > i {
display: grid;
place-items: center;
grid-area: icon;
width: 36px;
height: 36px;
border-radius: 50%;
color: #2870c9;
background: #edf4ff;
font-size: 16px;
}
.yf-income-kpi__metric--positive > i,
.yf-income-kpi__detail-grid > div:nth-child(4) > i { color: #15966e; background: #eaf8f2; }
.yf-income-kpi__metric--accent > i { color: #7656c9; background: #f2effd; }
.yf-income-kpi__detail-grid > div:first-child > i { color: #e24f57; background: #fff0f1; }
.yf-income-kpi__metric > span,
.yf-income-kpi__detail-grid > div > span {
grid-area: label;
color: #71817c;
font-size: 11px;
line-height: 1.25;
}
.yf-income-kpi__metric > strong,
.yf-income-kpi__detail-grid > div > strong {
grid-area: value;
color: #172622;
font-size: 16px;
line-height: 1.15;
overflow-wrap: anywhere;
}
.yf-income-kpi__completion {
display: grid;
grid-template-columns: 86px minmax(0, 1fr);
align-items: center;
gap: 16px;
padding: 13px;
border: 1px solid #dbe7e3;
border-radius: 8px;
background: #fff;
}
.yf-income-kpi__donut {
display: grid;
place-items: center;
width: 82px;
height: 82px;
border-radius: 50%;
background: radial-gradient(circle closest-side, #fff 70%, transparent 72%), conic-gradient(#45c58e var(--income-kpi-progress, 0%), #e4ece9 0);
}
.yf-income-kpi__donut strong { color: #16996d; font-size: 15px; }
.yf-income-kpi__progress-copy { display: grid; gap: 8px; min-width: 0; }
.yf-income-kpi__progress-copy > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.yf-income-kpi__progress-copy span { color: #62736d; font-size: 12px; }
.yf-income-kpi__progress-copy strong { font-size: 14px; }
.yf-income-kpi__progress { display: block; height: 7px; overflow: hidden; border-radius: 999px; background: #e4ece9; }
.yf-income-kpi__progress i { display: block; width: var(--income-kpi-progress, 0%); height: 100%; border-radius: inherit; background: #55cf99; transition: width .35s ease; }
.yf-income-kpi__scale { display: flex; justify-content: space-between; }
.yf-income-kpi__scale span { font-size: 10px; }
.yf-income-kpi__rows { display: grid; }
.yf-income-kpi__rows > div {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) minmax(106px, auto);
grid-template-areas: "icon label value";
align-items: center;
gap: 8px;
min-height: 44px;
border-bottom: 1px solid #e3eae8;
}
.yf-income-kpi__rows > div:last-child { border-bottom: 0; }
.yf-income-kpi__rows > div > i { width: 32px; height: 32px; font-size: 14px; }
.yf-income-kpi__rows > div > span { color: #53665f; font-size: 12px; }
.yf-income-kpi__rows > div > strong { color: #172622; font-size: 13px; text-align: right; }
.yf-income-kpi__rows > div:nth-child(1) > i,
.yf-income-kpi__rows > div:nth-child(3) > i { color: #15966e; background: #eaf8f2; }
.yf-income-kpi__rows > div:nth-child(4) > i { color: #df5058; background: #fff0f1; }
.yf-income-kpi__rows > div > span,
.yf-income-kpi__rows > div > strong {
min-width: 0;
overflow-wrap: normal;
word-break: normal;
}
body.yf-dashboard-auth.dark-theme .yf-income-kpi { color: #edf5f1; }
body.yf-dashboard-auth.dark-theme .yf-income-kpi__metric,
body.yf-dashboard-auth.dark-theme .yf-income-kpi__detail-grid > div,
body.yf-dashboard-auth.dark-theme .yf-income-kpi__completion { border-color: rgba(171, 205, 193, .14); background: #202a2c; }
body.yf-dashboard-auth.dark-theme .yf-income-kpi__metric > strong,
body.yf-dashboard-auth.dark-theme .yf-income-kpi__detail-grid > div > strong,
body.yf-dashboard-auth.dark-theme .yf-income-kpi__rows > div > strong { color: #eef6f3; }
body.yf-dashboard-auth.dark-theme .yf-income-kpi__donut { background: radial-gradient(circle closest-side, #202a2c 70%, transparent 72%), conic-gradient(#55cf99 var(--income-kpi-progress, 0%), #34403f 0); }
body.yf-dashboard-auth.dark-theme .yf-income-kpi__rows > div { border-bottom-color: rgba(171, 205, 193, .12); }
@media (max-width: 575.98px) {
.yf-income-kpi__top-grid,
.yf-income-kpi__detail-grid { grid-template-columns: 1fr; }
.yf-income-kpi__completion { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 12px; }
.yf-income-kpi__donut { width: 72px; height: 72px; }
.yf-income-kpi__progress-copy > div:first-child { align-items: flex-start; flex-direction: column; gap: 3px; }
.yf-income-kpi__rows > div { grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "icon label" "icon value"; padding-block: 8px; }
.yf-income-kpi__rows > div > i { grid-area: icon; }
.yf-income-kpi__rows > div > span { grid-area: label; }
.yf-income-kpi__rows > div > strong { grid-area: value; text-align: left; }
}
@media (min-width: 1400px) {
.income-month-metrics {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.income-month-card .card-body {
padding-right: 14px;
padding-left: 14px;
}
}
@media (max-width: 767.98px) {
.income-tags-page {
grid-template-columns: 1fr;
grid-template-rows: repeat(4, minmax(24px, auto));
}
.income-month-metrics {
grid-template-columns: 1fr;
}
.income-month-metric {
min-height: 76px;
}
.income-tags-card .card-body,
.income-month-card .card-body,
.expense-tags-card .card-body,
.expense-month-card .card-body {
padding: 18px 14px;
}
.expense-tags-page {
grid-template-columns: 1fr;
grid-template-rows: repeat(6, minmax(24px, auto));
}
.expense-month-card .card-body {
display: block;
min-height: auto;
}
.expense-month-card .mb-1 {
margin-bottom: 10px !important;
}
.expense-budget-inline {
margin-top: 16px;
padding-left: 0;
border-left: 0;
}
}
#loader {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.card {
position: relative;
height: 100%;
border-radius: 10px;
box-shadow: 0 .25rem .35rem rgba(0, 0, 0, 0.07);
}
.overlay-card-lock {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 9 !important;
pointer-events: none;
cursor: default;
border-radius: 7px;
}
.custom-select {
position: relative;
display: inline-block;
width: 100%;
}
.selected {
padding: 0.375rem;
border: 1px solid #ccc;
cursor: pointer;
border-radius: 0.375rem;
}
.options {
display: none;
position: absolute;
z-index: 1085;
top: calc(100% + 6px);
left: 0;
width: 100%;
max-height: min(240px, 38vh);
overflow-y: auto;
padding: 5px;
border: 1px solid rgba(25, 92, 73, .16);
border-radius: 0.375rem;
background: #fff;
box-shadow: 0 16px 36px rgba(15, 52, 42, .18);
font-size: 10pt;
}
.options.yf-floating-listbox {
z-index: 2000 !important;
display: block !important;
margin: 0;
overflow: auto;
overscroll-behavior: contain;
border: 1px solid rgba(25, 92, 73, .18);
border-radius: 8px;
background: #fff;
box-shadow: 0 18px 45px rgba(14, 45, 37, .22);
}
.option {
display: flex;
align-items: center;
gap: 8px;
min-height: 38px;
padding: 7px 10px;
border-radius: 5px;
cursor: pointer;
}
.option:hover {
background-color: #f0f0f0;
}
.bg-primary {
background-color: #5b8f92 !important;
}
.text-primary {
color: #5b8f92 !important;
}
.text-danger {
color: #ee6666 !important;
}
.bg-changes-down {
background-color: #ea3943;
}
.bg-changes-up {
background-color: #16c784;
}
.text-crypto-name {
display: inline-flex;
font-weight: 400;
font-size: 14px;
}
.investmentGraph {
width: 100%;
height: 100%;
text-align: center;
box-sizing: content-box;
filter: hue-rotate(300deg) saturate(210%) brightness(0.7) contrast(170%);
}
.investmentGraph-isUp {
filter: hue-rotate(85deg) saturate(80%) brightness(0.85);
}
.nav-element {
background: rgba(218, 218, 218, 0.76);
border-radius: 20px;
color: #939393 !important;
}
.nav-element-active {
background: rgba(197, 197, 197, 0.76);
color: #1e1e1e !important;
}
.payment-success {
background-color: #93dabd;
border-radius: 8px;
font-size: 0.8rem !important;
color: #5e5e5e;
}
.payment-pending {
background-color: #ecce8b;
border-radius: 8px;
font-size: 0.8rem !important;
color: #5e5e5e;
}
.payment-fail {
background-color: #f3a8a8;
border-radius: 8px;
font-size: 0.8rem !important;
color: #5e5e5e;
}
.payment-transaction {
background-color: rgba(197, 197, 197, 0.55);
border-radius: 8px;
font-size: 0.8rem !important;
font-weight: normal !important;
}
.btn-primary {
background-color: #5b8f92 !important;
border-color: rgba(91, 143, 146, 0) !important;
}
.btn-primary .disabled, .btn-primary:disabled {
background-color: #5b8f92 !important;
border-color: rgba(91, 143, 146, 0) !important;
}
.btn-primary:focus {
box-shadow: 0 0 0 .25rem rgba(43, 87, 91, 0);
}
.btn-primary:active {
box-shadow: 0 0 0 .25rem rgba(43, 87, 91, 0) !important;
}
.btn-myself {
background-color: #489d7a !important;
}
.btn-premium {
background-color: #e0ad46 !important;
}
.landing-page {
border-radius: 12px;
box-shadow: 0 .25rem .35rem rgba(0, 0, 0, 0.15);
}
.landing-page img {
border-radius: 12px;
box-shadow: 0 .225rem .25rem rgba(0, 0, 0, 0.1);
}
.overlay-card-lock-content {
text-align: center;
}
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.8);
z-index: 9999;
opacity: 0;
transition: opacity 240ms ease;
will-change: opacity;
}
#overlay.is-visible {
opacity: 1;
}
.tooltipTutorial {
display: none;
position: absolute;
background-color: #fff;
color: #000;
border-radius: 5px;
padding: 10px;
max-width: 500px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
z-index: 399999999;
visibility: visible;
opacity: 0;
transform: translate3d(0, 10px, 0) scale(.985);
transform-origin: center;
transition: opacity 220ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1);
will-change: top, left, transform, opacity;
}
.card.highlight {
z-index: 299999999;
border: 2px solid #007bff;
}
#progressTutorial {
margin: 10px 0;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.positive-change {
color: #91cc75;
}
.negative-change {
color: #ee6666;
}
.bg-positive-change {
background-color: rgba(145, 204, 117, 0.75);
}
.bg-negative-change {
background-color: rgba(238, 102, 102, 0.75);
}
.task-row {
border-radius: 10px;
box-shadow: 0 .225rem .25rem rgba(0, 0, 0, 0.1);
}
.light-theme .task-row {
border: 1px solid #adadad;
background: #ececec;
}
.task-name {
font-size: 11pt;
margin: 0;
padding: 0;
}
.task-description {
font-size: 9pt;
margin: 0;
padding: 0;
display: block;
}
.task-button {
border-radius: 0 0 0.375rem 0.375rem;
}
.task-reward-value {
font-size: 10pt;
margin: 0;
}
.task-reward-token {
font-size: 7pt;
margin: 0;
}
.task-arrow-right {
font-size: 9pt;
}
.task-icon {
height: 34px;
}
.coin-price {
font-size: 10pt;
}
.pricing-box {
height: 100%;
border-radius: 12px;
box-shadow: 0 .225rem .25rem rgba(0, 0, 0, 0.1);
}
.disabled-box {
background-color: rgba(89, 89, 89, 0.25) !important;
z-index: 1000000000000000 !important;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.dark-theme {
background-color: #0f1725;
}
.dark-theme .modal-content {
background-color: #0f1725 !important;
color: #c9c9c9 !important;
padding: .5em 1em .7em 1em;
border: 2px solid rgb(255 255 255 / 0.05);
}
.dark-theme .card-subtitle {
color: #a6a6a6 !important;
}
.dark-theme .card {
background: #18212f !important;
color: #c9c9c9 !important;
padding: .5em 1em .7em 1em;
border: 2px solid rgb(255 255 255 / 0.05);
}
.dark-theme .text-crypto-name {
color: rgba(222, 222, 222, 0.55);
border-bottom: 1px dashed rgba(222, 222, 222, 0.12);
}
.dark-theme .coin-price {
color: rgba(229, 229, 229, 0.75);
}
.notify-dot {
background: rgba(255, 107, 107, 1);
box-shadow: 0px 0px 3px 3px rgba(255, 107, 107, 0.5);
}
.dark-theme .overlay-card-lock {
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(17, 25, 40, 0.75);
border: 2px solid rgb(0 0 0 / 0.1);
}
.dark-theme .form-select {
background-color: #23344a;
color: white;
border: solid 1px rgba(212, 212, 212, 0.4);
}
.dark-theme .options{
background: #2d3748;
border: 1px solid #254060;
border-radius: 8px;
}
.dark-theme .option:hover {
background: #19273a;
}
.dark-theme table {
color: #c9c9c9 !important;
}
.dark-theme .main-table {
border-collapse: separate;
border-spacing: 0;
border-radius: 10px;
overflow: hidden;
border: solid 1px rgba(212, 212, 212, 0.4);
padding: 0.235rem 0.5rem 0;
background-color: #1e2d40;
}
.dark-theme .main-table td:nth-child(odd),
.dark-theme .main-table th:nth-child(odd) {
background-color: #1e2d40; /* Светло-серый цвет для нечётных столбцов */
}
.dark-theme .main-table td:nth-child(even),
.dark-theme .main-table th:nth-child(even) {
background-color: #23344a;
}
.dark-theme input {
background-color: #2d3748 !important;
color: #c9c9c9 !important;
}
.dark-theme .selected {
background: #2d3748;
}
.dark-theme input:focus {
background-color: #2d3748 !important;
color: #c9c9c9 !important;
}
.dark-theme .form-control:disabled {
background-color: #545462 !important;
color: #a9a9a9 !important;
}
.dark-theme input::placeholder {
color: #a9a9a9 !important;
}
.dark-theme strong {
color: #cccccc;
}
.light-theme {
background-color: #efefef;
}
.light-theme .modal-content {
background-color: #f8f8f8;
color: black;
padding: .5em 1em .7em 1em;
border: 2px solid rgb(0 0 0 / 0.1);
}
.light-theme .card {
background-color: #f8f8f8;
color: #444444;
padding: .5em 1em .7em 1em;
border: 2px solid rgb(0 0 0 / 0.1);
}
.light-theme .overlay-card-lock {
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(238, 238, 238, 0.7);
border: 1px solid #dfdfdf;
}
.light-theme .text-crypto-name {
color: rgba(29, 29, 29, 0.55);
border-bottom: 1px dashed rgba(29, 29, 29, 0.12);
}
.light-theme .coin-price {
color: rgba(29, 29, 29, 0.75);
}
.light-theme .selected {
background: #ffffff;
}
.light-theme .form-select {
background-color: #ffffff;
}
.light-theme .options{
background: #ffffff;;
border: 1px solid #cccccc;
border-radius: 8px;
}
.light-theme .option:hover {
background: #cccccc;
}
.light-theme table {
color: #1f1f1f !important;
}
.light-theme .main-table {
border-collapse: separate;
border-spacing: 0;
border-radius: 10px;
overflow: hidden;
border: solid 1px rgb(0 0 0 / 40%);
padding: 0.235rem 0.5rem 0;
background-color: #eeeeee;
}
.light-theme .main-table td:nth-child(odd),
.light-theme .main-table th:nth-child(odd) {
background-color: #eeeeee; /* Светло-серый цвет для нечётных столбцов */
}
.light-theme .main-table td:nth-child(even),
.light-theme .main-table th:nth-child(even) {
background-color: #f8f8f8; /* Белый цвет для чётных столбцов */
}
.light-theme input {
background-color: #e3e3e3;
color: #000000;
}
.light-theme input:focus {
background-color: #e3e3e3;
color: #000000;
}
.light-theme .form-control:disabled {
background-color: #e3e3e3;
color: #a9a9a9 ;
}
.light-theme strong {
color: #333333;
}
.theme-switch-wrapper {
display: flex;
align-items: center;
}
.theme-switch {
display: inline-block;
height: 24px;
position: relative;
width: 50px;
}
.theme-switch input {
display: none;
}
.slider {
background-color: #ccc;
bottom: 0;
cursor: pointer;
left: 0px;
position: absolute;
right: 0;
top: 0;
transition: 0.4s;
}
.slider:before {
background-color: white;
bottom: 4px;
content: "";
height: 16px;
left: 4px;
position: absolute;
transition: 0.4s;
width: 16px;
}
input:checked + .slider {
background-color: #66bb6a;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.slider.round {
border-radius: 24px;
}
.slider.round:before {
border-radius: 50%;
}
.photo {
display: inline-block;
height: 30px;
width: 30px;
border-radius: 50%;
vertical-align: middle;
overflow: hidden;
}
.photo img {
width: 100%;
}
.premium-photo {
border: 1px solid rgba(255, 178, 0, 0.7);
box-shadow: 0px 0px 10px -2px rgb(255, 178, 0);
}
.business-photo {
border: 1px solid #489d7a;
box-shadow: 0px 0px 10px -2px rgb(54, 168, 125);
}
.trial-photo {
border: 1px solid #0890e8;
box-shadow: 0px 0px 10px -2px rgb(8, 143, 231);
}
.premium-color {
color: rgb(253, 177, 1);
}
.business-color {
color: #489d7a;
}
.trial-color {
color: #0890e8;
}
.business-active {
border: 1px solid #489d7a !important;
box-shadow: 0px 0px 5px 0px rgb(54, 168, 125) !important;
}
.premium-active {
border: 1px solid rgba(255, 178, 0, 0.7) !important;
box-shadow: 0px 0px 5px 0px rgb(255, 178, 0) !important;
}
.trial-active {
border: 1px solid #0890e8 !important;
box-shadow: 0px 0px 5px 0px rgb(8, 143, 231) !important;
}
.cursor-pointer {
cursor: pointer;
}
.cursor-default {
cursor: default;
}
footer {
flex-shrink: 0;
margin-top: 28px;
}
@media (max-width: 768px) {
.w-75 {
width: 100% !important;
}
.btn-group {
display: flex;
flex-wrap: wrap;
gap: 0px;
}
.btn-group .btn {
flex: 1 1 calc(50% - 10px);
}
.tooltipTutorial {
max-width: 100%;
width: 100%;
left: 0 !important;
padding: 20px;
box-sizing: border-box;
}
}
@media (max-width: 1399px) {
.custom-logo {
margin-right: 100px;
}
}
@media (max-width: 1199px) {
.custom-logo {
margin-right: 30px;
}
}
/* YousoroFinance 2026 landing */
.yf-landing-nav,
.yf-landing-nav *,
.yf-landing-shell,
.yf-landing-shell * {
box-sizing: border-box;
}
.content > .container:has(.yf-landing-shell) {
width: 100%;
max-width: none;
padding-left: 0;
padding-right: 0;
}
.yf-landing-nav {
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
background: rgba(13, 24, 25, 0.88);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
}
.yf-landing-nav__inner {
width: min(1180px, calc(100% - 32px));
min-height: 72px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.yf-landing-nav__brand {
display: inline-flex;
align-items: center;
min-width: 190px;
}
.yf-landing-nav__brand img {
height: 42px;
max-width: 100%;
object-fit: contain;
}
.yf-landing-nav__links {
display: flex;
align-items: center;
gap: 10px;
padding: 6px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
}
.yf-landing-nav__links a {
color: rgba(245, 250, 246, 0.76);
text-decoration: none;
font-size: 0.92rem;
line-height: 1;
padding: 10px 14px;
border-radius: 999px;
transition: color .2s ease, background-color .2s ease;
}
.yf-landing-nav__links a:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.08);
}
.yf-landing-nav__auth {
min-width: 236px;
display: flex;
justify-content: flex-end;
}
.yf-landing-shell {
width: 100%;
margin-left: 0;
margin-top: -0.5rem;
overflow: hidden;
color: #162120;
background:
radial-gradient(circle at 12% 0%, rgba(206, 175, 96, 0.12), transparent 34rem),
linear-gradient(180deg, #0d1819 0%, #f4f1ea 35%, #f7f5ef 100%);
}
.yf-landing-hero {
position: relative;
min-height: calc(100svh - 72px);
padding: clamp(64px, 8vw, 104px) 0 clamp(56px, 8vw, 96px);
color: #f8f7ef;
isolation: isolate;
}
.yf-landing-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background:
linear-gradient(115deg, rgba(13, 24, 25, 0.98) 0%, rgba(13, 24, 25, 0.92) 44%, rgba(18, 50, 48, 0.66) 100%),
radial-gradient(circle at 76% 16%, rgba(107, 183, 174, 0.22), transparent 24rem),
radial-gradient(circle at 24% 78%, rgba(206, 175, 96, 0.16), transparent 30rem);
}
.yf-landing-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
opacity: .2;
background-image:
linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: linear-gradient(90deg, transparent, #000 22%, #000 76%, transparent);
}
.yf-landing-hero__inner,
.yf-landing-section,
.yf-landing-final {
width: min(1180px, calc(100% - 32px));
margin: 0 auto;
}
.yf-landing-hero__inner {
display: grid;
grid-template-columns: minmax(0, .85fr) minmax(420px, 1.15fr);
align-items: center;
gap: clamp(32px, 6vw, 72px);
}
.yf-landing-hero__copy {
animation: yfLandingRise .7s ease both;
}
.yf-landing-kicker,
.yf-landing-section__head span,
.yf-landing-workflow__content > span,
.yf-landing-final span,
.yf-landing-plan__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
color: #c8a757;
font-size: .78rem;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
}
.yf-landing-kicker::before,
.yf-landing-section__head span::before,
.yf-landing-workflow__content > span::before,
.yf-landing-final span::before {
content: "";
width: 28px;
height: 1px;
background: currentColor;
}
.yf-landing-hero h1 {
max-width: 760px;
margin: 18px 0 20px;
font-size: clamp(2.55rem, 6vw, 5.7rem);
line-height: .94;
font-weight: 750;
letter-spacing: 0;
}
.yf-landing-hero p {
max-width: 590px;
margin: 0;
color: rgba(248, 247, 239, 0.76);
font-size: clamp(1.03rem, 1.6vw, 1.2rem);
line-height: 1.7;
}
.yf-landing-hero h1 span {
display: block;
}
.yf-landing-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 34px;
}
.yf-landing-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 22px;
border-radius: 999px;
font-weight: 700;
text-decoration: none;
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
}
.yf-landing-button:hover {
transform: translateY(-2px);
}
.yf-landing-button--primary {
color: #102020;
background: linear-gradient(135deg, #f4d57a, #7ed4c8);
box-shadow: 0 18px 36px rgba(126, 212, 200, 0.22);
}
.yf-landing-button--primary:hover {
color: #102020;
box-shadow: 0 24px 42px rgba(126, 212, 200, 0.3);
}
.yf-landing-button--ghost,
.yf-landing-button--line {
color: #f8f7ef;
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.06);
}
.yf-landing-button--ghost:hover,
.yf-landing-button--line:hover {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.38);
}
.yf-landing-button--line {
color: #1c2a28;
border-color: rgba(28, 42, 40, 0.16);
background: rgba(255, 255, 255, 0.56);
}
.yf-landing-button--line:hover {
color: #102020;
border-color: rgba(25, 88, 82, 0.32);
}
.yf-landing-trust {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
}
.yf-landing-trust span {
color: rgba(248, 247, 239, 0.74);
font-size: .9rem;
padding: 8px 12px;
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
}
.yf-landing-product {
position: relative;
min-height: 560px;
animation: yfLandingFloatIn .9s .1s ease both;
}
.yf-landing-product__screen {
position: absolute;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 24px;
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 34px 90px rgba(0, 0, 0, 0.34);
}
.yf-landing-product__screen img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.9) contrast(1.03);
}
.yf-landing-product__screen--main {
inset: 22px 0 110px 36px;
transform: perspective(1200px) rotateY(-9deg) rotateX(3deg);
}
.yf-landing-product__screen--side {
right: 44px;
bottom: 28px;
width: min(430px, 62%);
height: 210px;
transform: perspective(900px) rotateY(-13deg) rotateX(5deg);
}
.yf-landing-product__note {
position: absolute;
left: 0;
bottom: 72px;
max-width: 260px;
padding: 16px 18px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 18px;
color: rgba(248, 247, 239, 0.84);
background: rgba(14, 29, 30, 0.74);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 22px 46px rgba(0, 0, 0, 0.24);
}
.yf-landing-product__note span {
display: block;
color: #f4d57a;
font-size: 1.35rem;
font-weight: 800;
}
.yf-landing-section {
padding: clamp(68px, 9vw, 110px) 0;
}
.yf-landing-section--light {
color: #162120;
}
.yf-landing-section__head {
max-width: 760px;
margin-bottom: 42px;
}
.yf-landing-section__head h2,
.yf-landing-workflow__content h2,
.yf-landing-final h2 {
margin: 14px 0 0;
font-size: clamp(2rem, 4.2vw, 4.1rem);
line-height: 1.02;
font-weight: 760;
letter-spacing: 0;
}
.yf-landing-benefits {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
overflow: hidden;
border: 1px solid rgba(20, 42, 39, 0.12);
border-radius: 28px;
background: rgba(20, 42, 39, 0.12);
}
.yf-landing-benefit {
min-height: 310px;
padding: clamp(28px, 4vw, 42px);
background: rgba(255, 255, 255, 0.58);
transition: background-color .24s ease, transform .24s ease;
}
.yf-landing-benefit:hover {
background: rgba(255, 255, 255, 0.86);
transform: translateY(-3px);
}
.yf-landing-benefit i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin-bottom: 42px;
border-radius: 999px;
color: #173433;
background: linear-gradient(135deg, rgba(126, 212, 200, 0.7), rgba(244, 213, 122, 0.7));
font-size: 1.35rem;
}
.yf-landing-benefit h3,
.yf-landing-step h3,
.yf-landing-plan h3 {
margin: 0 0 12px;
font-size: 1.35rem;
line-height: 1.2;
font-weight: 750;
}
.yf-landing-benefit p,
.yf-landing-step p,
.yf-landing-plan p,
.yf-landing-final p {
margin: 0;
color: rgba(22, 33, 32, 0.68);
line-height: 1.65;
}
.yf-landing-workflow {
display: grid;
grid-template-columns: minmax(280px, .8fr) minmax(0, 1fr);
align-items: center;
gap: clamp(34px, 6vw, 76px);
}
.yf-landing-workflow__media {
position: relative;
}
.yf-landing-workflow__media::before {
content: "";
position: absolute;
inset: 32px -24px -24px 28px;
z-index: -1;
border-radius: 36px;
background: #183331;
}
.yf-landing-workflow__media img {
display: block;
width: 100%;
aspect-ratio: 1 / 1.08;
object-fit: cover;
border-radius: 34px;
box-shadow: 0 30px 70px rgba(20, 42, 39, 0.24);
}
.yf-landing-steps {
display: grid;
gap: 18px;
margin-top: 34px;
}
.yf-landing-step {
display: grid;
grid-template-columns: 64px 1fr;
gap: 18px;
padding: 22px 0;
border-top: 1px solid rgba(20, 42, 39, 0.12);
}
.yf-landing-step strong {
color: #c8a757;
font-size: .95rem;
}
.yf-landing-section--pricing {
width: 100%;
max-width: none;
padding-left: max(16px, calc((100vw - 1180px) / 2));
padding-right: max(16px, calc((100vw - 1180px) / 2));
color: #f7f3e7;
background:
linear-gradient(180deg, rgba(16, 32, 32, 0.96), rgba(13, 24, 25, 1)),
radial-gradient(circle at 82% 18%, rgba(126, 212, 200, 0.2), transparent 28rem);
}
.yf-landing-section--pricing .yf-landing-section__head h2 {
color: #f8f7ef;
}
.yf-landing-pricing {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.yf-landing-plan {
position: relative;
display: flex;
min-height: 560px;
flex-direction: column;
justify-content: space-between;
gap: 28px;
padding: clamp(26px, 3vw, 36px);
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 28px;
background: rgba(255, 255, 255, 0.055);
transition: transform .24s ease, border-color .24s ease, background-color .24s ease;
}
.yf-landing-plan:hover {
transform: translateY(-6px);
border-color: rgba(126, 212, 200, 0.34);
background: rgba(255, 255, 255, 0.08);
}
.yf-landing-plan--featured {
color: #102020;
border-color: rgba(244, 213, 122, 0.58);
background: linear-gradient(145deg, #f7efd5, #d8f1e8);
box-shadow: 0 28px 80px rgba(126, 212, 200, 0.18);
}
.yf-landing-plan__badge {
position: absolute;
top: 18px;
right: 18px;
padding: 8px 12px;
border-radius: 999px;
color: #102020;
background: rgba(244, 213, 122, 0.78);
font-size: .78rem;
font-weight: 800;
}
.yf-landing-plan h3 {
color: inherit;
}
.yf-landing-plan__price {
margin: 22px 0 12px;
font-size: clamp(2.2rem, 3.5vw, 3.35rem);
line-height: 1;
font-weight: 800;
}
.yf-landing-plan__price small {
font-size: 1rem;
font-weight: 600;
opacity: .62;
}
.yf-landing-plan:not(.yf-landing-plan--featured) p,
.yf-landing-plan:not(.yf-landing-plan--featured) li {
color: rgba(248, 247, 239, 0.72);
}
.yf-landing-plan ul {
display: grid;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.yf-landing-plan li {
position: relative;
padding-left: 28px;
line-height: 1.45;
}
.yf-landing-plan li::before {
content: "";
position: absolute;
left: 0;
top: .45em;
width: 10px;
height: 10px;
border-radius: 999px;
background: linear-gradient(135deg, #f4d57a, #7ed4c8);
}
.yf-landing-final {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
margin-top: clamp(58px, 8vw, 96px);
margin-bottom: clamp(50px, 7vw, 82px);
padding: clamp(32px, 5vw, 58px);
border-radius: 34px;
color: #f8f7ef;
background:
linear-gradient(135deg, rgba(13, 24, 25, 0.98), rgba(24, 58, 55, 0.96)),
radial-gradient(circle at 80% 10%, rgba(244, 213, 122, 0.2), transparent 20rem);
}
.yf-landing-final div {
max-width: 760px;
}
.yf-landing-final h2 {
max-width: 820px;
}
.yf-landing-final p {
max-width: 720px;
margin-top: 18px;
color: rgba(248, 247, 239, 0.72);
}
@keyframes yfLandingRise {
from {
opacity: 0;
transform: translateY(22px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes yfLandingFloatIn {
from {
opacity: 0;
transform: translateY(30px) scale(.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 991.98px) {
.yf-landing-nav__inner {
min-height: auto;
padding: 14px 0;
flex-wrap: wrap;
justify-content: center;
}
.yf-landing-nav__brand {
justify-content: center;
min-width: 100%;
}
.yf-landing-nav__links {
order: 3;
width: 100%;
justify-content: center;
flex-wrap: wrap;
overflow: hidden;
}
.yf-landing-nav__auth {
min-width: 0;
justify-content: center;
}
.yf-landing-hero {
min-height: auto;
padding-top: 46px;
}
.yf-landing-hero__inner,
.yf-landing-workflow,
.yf-landing-pricing {
grid-template-columns: 1fr;
}
.yf-landing-product {
min-height: 430px;
}
.yf-landing-product__screen--main {
inset: 8px 0 96px 0;
transform: none;
}
.yf-landing-product__screen--side {
right: 10px;
bottom: 24px;
width: 70%;
height: 160px;
transform: none;
}
.yf-landing-product__note {
left: 10px;
bottom: 42px;
}
.yf-landing-benefits {
grid-template-columns: 1fr;
}
.yf-landing-benefit {
min-height: 0;
}
.yf-landing-benefit i {
margin-bottom: 24px;
}
.yf-landing-final {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 575.98px) {
body:has(.yf-landing-shell) {
overflow-x: hidden;
}
.yf-landing-shell {
width: 100%;
max-width: 100%;
margin-left: 0;
}
.yf-landing-nav__inner,
.yf-landing-hero__inner,
.yf-landing-section,
.yf-landing-final {
width: min(1180px, calc(100% - 24px));
}
.yf-landing-nav__brand img {
height: 34px;
}
.yf-landing-nav__links a {
padding: 8px 7px;
font-size: .76rem;
}
.yf-landing-hero h1 {
max-width: 100%;
font-size: 1.62rem;
line-height: 1.05;
overflow-wrap: anywhere;
}
.yf-landing-hero__copy {
width: 100% !important;
max-width: 330px !important;
}
.yf-landing-hero h1,
.yf-landing-hero h1 span {
width: 100% !important;
max-width: 330px !important;
}
.yf-landing-kicker {
max-width: 100%;
font-size: .66rem;
line-height: 1.45;
}
.yf-landing-hero p {
width: 100% !important;
max-width: 330px !important;
font-size: .9rem;
}
.yf-landing-actions,
.yf-landing-button {
width: 100%;
}
.yf-landing-actions,
.yf-landing-trust {
max-width: 330px;
}
.yf-landing-product {
min-height: 370px;
}
.yf-landing-product__screen {
border-radius: 18px;
}
.yf-landing-product__screen--main {
bottom: 118px;
}
.yf-landing-product__screen--side {
width: 78%;
height: 128px;
}
.yf-landing-product__note {
max-width: calc(100% - 20px);
padding: 12px 14px;
font-size: .9rem;
}
.yf-landing-step {
grid-template-columns: 44px 1fr;
}
.yf-landing-plan {
min-height: auto;
}
.yf-landing-plan__badge {
position: static;
align-self: flex-start;
margin-bottom: -8px;
}
}
@media (prefers-reduced-motion: reduce) {
.yf-landing-hero__copy,
.yf-landing-product {
animation: none;
}
.yf-landing-button,
.yf-landing-benefit,
.yf-landing-plan {
transition: none;
}
}
/* YousoroFinance commercial landing polish */
:root {
--yf-dark: #0b1c19;
--yf-dark-2: #132b26;
--yf-surface: #f4f1ea;
--yf-surface-2: #f7f4ed;
--yf-text: #10201d;
--yf-text-dark: #f8f4ea;
--yf-muted: #6d7772;
--yf-gold: #d6b45d;
--yf-mint: #9ddfc4;
--yf-gradient: linear-gradient(135deg, #f0d978 0%, #9ddfc4 100%);
--yf-border-dark: rgba(255, 255, 255, 0.12);
--yf-border-light: rgba(16, 32, 29, 0.12);
--yf-radius-lg: 32px;
--yf-radius-md: 24px;
--yf-shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.18);
--yf-shadow-card: 0 18px 44px rgba(16, 32, 29, 0.1);
--yf-container: min(1180px, calc(100% - 40px));
}
.content > .container:has(.yf-landing-shell) {
width: 100%;
max-width: none;
padding-left: 0;
padding-right: 0;
}
.yf-landing-nav {
background: rgba(11, 28, 25, 0.82);
border-bottom: 1px solid var(--yf-border-dark);
}
.yf-landing-nav__inner {
width: var(--yf-container);
min-height: 64px;
gap: 18px;
}
.yf-landing-nav__brand {
min-width: 172px;
}
.yf-landing-nav__brand img {
height: 36px;
}
.yf-landing-nav__links {
gap: 4px;
padding: 4px;
border-color: var(--yf-border-dark);
background: rgba(255, 255, 255, 0.045);
}
.yf-landing-nav__links a {
color: rgba(248, 244, 234, 0.72);
font-size: 0.9rem;
font-weight: 500;
padding: 9px 13px;
}
.yf-landing-nav__links a:hover,
.yf-landing-nav__links a:focus-visible {
color: var(--yf-text-dark);
background: rgba(157, 223, 196, 0.11);
outline: none;
}
.yf-landing-nav__auth {
min-width: 220px;
}
.yf-landing-shell {
color: var(--yf-text);
background:
radial-gradient(circle at 72% 8%, rgba(157, 223, 196, 0.12), transparent 26rem),
linear-gradient(180deg, var(--yf-dark) 0%, var(--yf-surface) 35%, var(--yf-surface-2) 100%);
}
.yf-landing-hero {
min-height: auto;
padding: clamp(70px, 8vw, 104px) 0 clamp(74px, 8vw, 108px);
color: var(--yf-text-dark);
}
.yf-landing-hero::before {
background:
linear-gradient(115deg, rgba(11, 28, 25, 0.99) 0%, rgba(11, 28, 25, 0.94) 46%, rgba(19, 43, 38, 0.82) 100%),
radial-gradient(circle at 76% 20%, rgba(157, 223, 196, 0.16), transparent 24rem),
radial-gradient(circle at 24% 78%, rgba(214, 180, 93, 0.11), transparent 28rem);
}
.yf-landing-hero::after {
opacity: .11;
background-size: 84px 84px;
}
.yf-landing-hero__inner,
.yf-landing-section,
.yf-landing-final {
width: var(--yf-container);
}
.yf-landing-hero__inner {
grid-template-columns: minmax(0, 0.92fr) minmax(400px, 1.08fr);
gap: clamp(36px, 5vw, 64px);
}
.yf-landing-kicker,
.yf-landing-section__head span,
.yf-landing-workflow__content > span,
.yf-landing-final span,
.yf-landing-plan__eyebrow {
color: var(--yf-gold);
font-size: .75rem;
font-weight: 700;
letter-spacing: .075em;
}
.yf-landing-hero h1 {
max-width: 640px;
margin: 16px 0 18px;
font-size: clamp(48px, 5.4vw, 76px);
line-height: 1;
font-weight: 800;
}
.yf-landing-hero p {
max-width: 560px;
color: rgba(248, 244, 234, 0.76);
font-size: clamp(16px, 1.25vw, 18px);
line-height: 1.65;
font-weight: 400;
}
.yf-landing-actions {
gap: 12px;
margin-top: 28px;
}
.yf-landing-button {
min-height: 46px;
padding: 0 20px;
border-radius: 999px;
font-weight: 700;
font-size: .95rem;
}
.yf-landing-button:focus-visible {
outline: 3px solid rgba(157, 223, 196, 0.34);
outline-offset: 3px;
}
.yf-landing-button--primary {
color: var(--yf-text);
background: var(--yf-gradient);
box-shadow: 0 16px 34px rgba(157, 223, 196, 0.2);
}
.yf-landing-button--primary:hover {
color: var(--yf-text);
box-shadow: 0 20px 44px rgba(157, 223, 196, 0.28);
}
.yf-landing-button--ghost {
color: var(--yf-text-dark);
border-color: rgba(248, 244, 234, 0.22);
background: rgba(255, 255, 255, 0.035);
}
.yf-landing-button--ghost:hover {
color: var(--yf-text-dark);
background: rgba(157, 223, 196, 0.08);
border-color: rgba(157, 223, 196, 0.34);
}
.yf-landing-button--line {
color: var(--yf-text-dark);
border-color: rgba(248, 244, 234, 0.2);
background: rgba(255, 255, 255, 0.045);
}
.yf-landing-button--line:hover {
color: var(--yf-text-dark);
background: rgba(157, 223, 196, 0.08);
border-color: rgba(157, 223, 196, 0.38);
}
.yf-landing-trust {
gap: 8px;
margin-top: 20px;
}
.yf-landing-trust span {
color: rgba(248, 244, 234, 0.76);
font-size: .86rem;
padding: 7px 11px;
border-color: var(--yf-border-dark);
background: rgba(255, 255, 255, 0.04);
}
.yf-landing-product {
min-height: 470px;
}
.yf-landing-product__screen {
border-color: rgba(255, 255, 255, 0.16);
border-radius: var(--yf-radius-md);
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.3);
}
.yf-landing-product__screen img {
filter: saturate(0.96) contrast(1.05) brightness(1.02);
}
.yf-landing-product__screen--main {
inset: 14px 0 92px 24px;
transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
}
.yf-landing-product__screen--side {
right: 30px;
bottom: 18px;
width: min(400px, 58%);
height: 184px;
transform: perspective(900px) rotateY(-8deg) rotateX(3deg);
}
.yf-landing-product__note {
bottom: 52px;
max-width: 250px;
padding: 14px 16px;
border-color: var(--yf-border-dark);
border-radius: 18px;
color: rgba(248, 244, 234, 0.8);
background: rgba(19, 43, 38, 0.82);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}
.yf-landing-section {
padding: clamp(88px, 8vw, 112px) 0;
}
.yf-landing-section__head {
max-width: 720px;
margin-bottom: 34px;
}
.yf-landing-section__head h2,
.yf-landing-workflow__content h2,
.yf-landing-final h2 {
margin-top: 12px;
font-size: clamp(38px, 4.1vw, 58px);
line-height: 1.08;
font-weight: 750;
}
.yf-landing-benefits {
gap: 16px;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
}
.yf-landing-benefit {
min-height: 248px;
padding: 32px;
border: 1px solid var(--yf-border-light);
border-radius: var(--yf-radius-md);
background: rgba(255, 255, 255, 0.62);
box-shadow: none;
}
.yf-landing-benefit:hover {
transform: translateY(-4px);
border-color: rgba(157, 223, 196, 0.45);
background: rgba(255, 255, 255, 0.82);
box-shadow: var(--yf-shadow-card);
}
.yf-landing-benefit i {
width: 44px;
height: 44px;
margin-bottom: 28px;
color: var(--yf-text);
background: rgba(157, 223, 196, 0.34);
font-size: 1.15rem;
}
.yf-landing-benefit h3,
.yf-landing-step h3,
.yf-landing-plan h3 {
font-size: clamp(22px, 2vw, 26px);
font-weight: 750;
}
.yf-landing-benefit p,
.yf-landing-step p,
.yf-landing-plan p,
.yf-landing-final p {
color: var(--yf-muted);
line-height: 1.62;
}
.yf-landing-workflow {
gap: clamp(36px, 5vw, 64px);
}
.yf-landing-workflow__media::before,
.yf-landing-workflow__media img {
display: none;
}
.yf-landing-flow-card {
position: relative;
display: grid;
grid-template-columns: minmax(180px, 0.82fr) 48px minmax(180px, 1fr);
align-items: center;
gap: 16px;
min-height: 390px;
padding: 26px;
border: 1px solid var(--yf-border-light);
border-radius: var(--yf-radius-lg);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(244, 241, 234, 0.82)),
radial-gradient(circle at 20% 20%, rgba(157, 223, 196, 0.18), transparent 18rem);
box-shadow: var(--yf-shadow-card);
}
.yf-landing-phone,
.yf-landing-mini-dashboard {
border: 1px solid rgba(16, 32, 29, 0.12);
border-radius: 24px;
background: rgba(255, 255, 255, 0.72);
box-shadow: 0 14px 34px rgba(16, 32, 29, 0.1);
}
.yf-landing-phone {
padding: 16px;
}
.yf-landing-phone__top {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
color: var(--yf-text);
font-weight: 700;
}
.yf-landing-phone__top i {
color: #54a9eb;
font-size: 1.2rem;
}
.yf-landing-message {
width: fit-content;
max-width: 92%;
margin-top: 10px;
padding: 10px 12px;
border-radius: 16px;
color: var(--yf-text);
background: rgba(16, 32, 29, 0.08);
font-size: .92rem;
line-height: 1.35;
}
.yf-landing-message--user {
margin-left: auto;
background: rgba(157, 223, 196, 0.35);
}
.yf-landing-flow-arrow {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 999px;
color: var(--yf-text);
background: var(--yf-gradient);
box-shadow: 0 12px 28px rgba(157, 223, 196, 0.22);
}
.yf-landing-mini-dashboard {
padding: 18px;
}
.yf-landing-mini-dashboard__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
color: var(--yf-text);
}
.yf-landing-mini-dashboard__top span {
color: var(--yf-muted);
font-size: .86rem;
}
.yf-landing-mini-bars {
display: grid;
gap: 12px;
}
.yf-landing-mini-bars span {
display: block;
height: 12px;
border-radius: 999px;
background:
linear-gradient(90deg, var(--yf-mint) var(--bar), rgba(16, 32, 29, 0.08) var(--bar));
}
.yf-landing-mini-total {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--yf-border-light);
color: var(--yf-text);
font-weight: 750;
}
.yf-landing-steps {
gap: 0;
margin-top: 26px;
}
.yf-landing-step {
grid-template-columns: 52px 1fr;
gap: 16px;
padding: 18px 0;
border-top-color: rgba(16, 32, 29, 0.1);
}
.yf-landing-step strong {
color: var(--yf-gold);
font-size: .86rem;
}
.yf-landing-section--pricing {
padding: clamp(88px, 8vw, 112px) max(20px, calc((100vw - 1180px) / 2));
color: var(--yf-text-dark);
background:
linear-gradient(180deg, rgba(11, 28, 25, 0.98), rgba(14, 33, 30, 1)),
radial-gradient(circle at 82% 18%, rgba(157, 223, 196, 0.12), transparent 28rem);
}
.yf-landing-pricing {
gap: 18px;
align-items: stretch;
}
.yf-landing-plan {
min-height: 480px;
padding: 32px;
border-color: var(--yf-border-dark);
border-radius: var(--yf-radius-md);
background: rgba(255, 255, 255, 0.045);
box-shadow: none;
}
.yf-landing-plan:hover {
transform: translateY(-4px);
border-color: rgba(157, 223, 196, 0.45);
background: rgba(255, 255, 255, 0.065);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
}
.yf-landing-plan--featured {
color: var(--yf-text-dark);
border-color: rgba(157, 223, 196, 0.45);
background:
linear-gradient(180deg, rgba(157, 223, 196, 0.1), rgba(255, 255, 255, 0.03)),
rgba(255, 255, 255, 0.055);
box-shadow: 0 20px 60px rgba(157, 223, 196, 0.08);
}
.yf-landing-plan--featured:hover {
background:
linear-gradient(180deg, rgba(157, 223, 196, 0.14), rgba(255, 255, 255, 0.045)),
rgba(255, 255, 255, 0.065);
}
.yf-landing-plan__badge {
color: var(--yf-text);
background: var(--yf-gradient);
}
.yf-landing-plan__price {
margin: 18px 0 10px;
font-size: clamp(38px, 3.2vw, 50px);
}
.yf-landing-plan:not(.yf-landing-plan--featured) p,
.yf-landing-plan:not(.yf-landing-plan--featured) li,
.yf-landing-plan--featured p,
.yf-landing-plan--featured li {
color: rgba(248, 244, 234, 0.74);
}
.yf-landing-plan .yf-landing-button {
margin-top: auto;
}
.yf-landing-final {
margin-top: clamp(56px, 6vw, 78px);
margin-bottom: clamp(44px, 6vw, 68px);
padding: clamp(30px, 4vw, 44px);
border-radius: var(--yf-radius-lg);
background:
linear-gradient(135deg, rgba(11, 28, 25, 0.98), rgba(19, 43, 38, 0.96)),
radial-gradient(circle at 78% 18%, rgba(157, 223, 196, 0.18), transparent 18rem);
}
.yf-footer {
flex-shrink: 0;
color: rgba(248, 244, 234, 0.72);
background: #081512;
border-top: 1px solid rgba(255, 255, 255, 0.08);
font-size: .92rem;
}
.yf-footer__inner {
width: var(--yf-container);
margin: 0 auto;
padding: 32px 0;
display: flex;
justify-content: space-between;
gap: 32px;
}
.yf-footer__name {
margin-bottom: 8px;
color: var(--yf-text-dark);
font-size: 1rem;
font-weight: 800;
}
.yf-footer__meta {
display: grid;
gap: 2px;
margin-top: 12px;
color: rgba(248, 244, 234, 0.56);
}
.yf-footer__meta strong {
color: rgba(248, 244, 234, 0.82);
}
.yf-footer__links {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px 18px;
max-width: 540px;
}
.yf-footer__links a {
color: rgba(248, 244, 234, 0.72);
text-decoration: none;
transition: color .2s ease;
}
.yf-footer__links a:hover,
.yf-footer__links a:focus-visible {
color: var(--yf-mint);
outline: none;
}
@media (max-width: 1199.98px) {
:root {
--yf-container: min(1120px, calc(100% - 32px));
}
.yf-landing-hero h1 {
font-size: clamp(44px, 5vw, 66px);
}
.yf-landing-product {
min-height: 420px;
}
}
@media (max-width: 991.98px) {
.yf-landing-hero,
.yf-landing-section,
.yf-landing-section--pricing {
padding-top: 76px;
padding-bottom: 82px;
}
.yf-landing-hero__inner {
grid-template-columns: 1fr;
}
.yf-landing-product {
min-height: 390px;
}
.yf-landing-flow-card {
grid-template-columns: 1fr;
min-height: auto;
}
.yf-landing-flow-arrow {
transform: rotate(90deg);
justify-self: center;
}
.yf-landing-pricing {
grid-template-columns: 1fr;
}
.yf-landing-plan {
min-height: auto;
}
.yf-footer__inner {
flex-direction: column;
}
.yf-footer__links {
justify-content: flex-start;
}
}
@media (max-width: 575.98px) {
:root {
--yf-container: min(100% - 24px, 1180px);
}
.yf-landing-nav__inner {
width: var(--yf-container);
gap: 12px;
padding: 12px 0;
}
.yf-landing-nav__brand,
.yf-landing-nav__auth,
.yf-landing-nav__links {
flex: 0 0 100%;
}
.yf-landing-nav__auth {
display: flex;
justify-content: center;
max-width: 100%;
overflow: hidden;
}
.yf-landing-nav__auth iframe {
max-width: 100% !important;
}
.yf-landing-nav__links {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2px;
padding: 4px;
}
.yf-landing-nav__links a[href="#pricing"] {
display: none;
}
.yf-landing-nav__links a {
padding: 8px 2px;
font-size: .74rem;
text-align: center;
white-space: nowrap;
}
.yf-landing-hero {
padding-top: 54px;
padding-bottom: 62px;
}
.yf-landing-hero h1 {
max-width: 340px !important;
font-size: clamp(31px, 9vw, 38px);
line-height: 1.05;
}
.yf-landing-hero__copy,
.yf-landing-hero h1 span,
.yf-landing-hero p,
.yf-landing-actions,
.yf-landing-trust {
max-width: 340px !important;
}
.yf-landing-kicker {
font-size: .65rem;
}
.yf-landing-product {
min-height: 330px;
}
.yf-landing-product__screen--main {
inset: 0 0 92px 0;
}
.yf-landing-product__screen--side {
width: 72%;
height: 118px;
}
.yf-landing-section,
.yf-landing-section--pricing {
padding-top: 62px;
padding-bottom: 66px;
}
.yf-landing-section__head {
margin-bottom: 24px;
}
.yf-landing-section__head h2,
.yf-landing-workflow__content h2,
.yf-landing-final h2 {
font-size: clamp(30px, 8vw, 38px);
line-height: 1.1;
}
.yf-landing-benefit,
.yf-landing-plan,
.yf-landing-flow-card {
padding: 24px;
border-radius: 22px;
}
.yf-landing-phone,
.yf-landing-mini-dashboard {
border-radius: 18px;
}
.yf-landing-final {
margin-top: 42px;
padding: 26px;
border-radius: 26px;
}
}
/* Landing visual fixes: pricing grid, workflow mockup, Telegram widget crop */
.yf-landing-nav__auth {
position: relative !important;
width: 248px !important;
height: 44px !important;
min-width: 248px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
border-radius: 999px !important;
background: transparent !important;
box-shadow: none !important;
line-height: 0 !important;
}
.yf-landing-nav__auth-face {
position: absolute;
inset: 0;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 999px;
color: #ffffff;
background: #54a9eb;
box-shadow: 0 12px 28px rgba(84, 169, 235, 0.28);
font-size: 16px;
font-weight: 700;
line-height: 1;
pointer-events: none;
}
.yf-landing-nav__auth-face i {
font-size: 20px;
line-height: 1;
}
.yf-landing-nav__auth iframe {
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
width: 248px !important;
max-width: 248px !important;
height: 44px !important;
border: 0 !important;
border-radius: 999px !important;
background: transparent !important;
clip-path: inset(0 round 999px);
opacity: .01 !important;
}
.yf-landing-section--pricing {
overflow: hidden;
}
.yf-landing-section--pricing .yf-landing-section__head {
width: min(760px, 100%);
margin-right: auto;
margin-left: auto;
text-align: center;
}
.yf-landing-pricing {
width: 100% !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 20px !important;
align-items: stretch !important;
}
.yf-landing-plan {
position: relative !important;
inset: auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
min-height: 470px !important;
padding: 30px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 22px !important;
color: var(--yf-text-dark, #f8f4ea) !important;
border: 1px solid rgba(255, 255, 255, 0.13) !important;
border-radius: 28px !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.035)),
rgba(19, 43, 38, 0.86) !important;
box-shadow: none !important;
transform: none;
box-sizing: border-box;
}
.yf-landing-plan:hover {
transform: translateY(-4px);
border-color: rgba(157, 223, 196, 0.45) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.045)),
rgba(19, 43, 38, 0.9) !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22) !important;
}
.yf-landing-plan--featured,
.yf-landing-plan--featured:hover {
border-color: rgba(157, 223, 196, 0.56) !important;
background:
linear-gradient(180deg, rgba(157, 223, 196, 0.12), rgba(255, 255, 255, 0.045)),
rgba(19, 43, 38, 0.92) !important;
box-shadow: 0 24px 70px rgba(157, 223, 196, 0.12) !important;
}
.yf-landing-plan__badge {
position: absolute !important;
top: 18px !important;
right: 18px !important;
z-index: 2;
max-width: calc(100% - 36px);
color: #10201d !important;
background: linear-gradient(135deg, #f0d978 0%, #9ddfc4 100%) !important;
}
.yf-landing-plan h3 {
max-width: calc(100% - 92px);
margin: 0;
color: var(--yf-text-dark, #f8f4ea) !important;
font-size: clamp(24px, 2vw, 30px) !important;
line-height: 1.1 !important;
}
.yf-landing-plan:not(.yf-landing-plan--featured) h3 {
max-width: 100% !important;
}
.yf-landing-plan__eyebrow {
display: inline-flex;
max-width: calc(100% - 92px);
margin-bottom: 12px;
color: var(--yf-gold, #d6b45d) !important;
}
.yf-landing-plan:not(.yf-landing-plan--featured) .yf-landing-plan__eyebrow {
max-width: 100% !important;
}
.yf-landing-plan__price {
margin: 18px 0 12px !important;
color: var(--yf-text-dark, #f8f4ea) !important;
font-size: clamp(36px, 3vw, 48px) !important;
line-height: .98 !important;
letter-spacing: 0 !important;
white-space: nowrap;
}
.yf-landing-plan__price small {
margin-left: 5px;
font-size: .34em !important;
color: rgba(248, 244, 234, 0.62) !important;
}
.yf-landing-plan p,
.yf-landing-plan li {
color: rgba(248, 244, 234, 0.76) !important;
font-size: .96rem;
line-height: 1.55;
}
.yf-landing-plan ul {
margin: 0 !important;
padding: 0 !important;
display: grid !important;
gap: 12px !important;
list-style: none !important;
}
.yf-landing-plan li {
position: static !important;
width: 100% !important;
min-width: 0 !important;
padding-left: 0 !important;
display: flex !important;
gap: 14px !important;
align-items: start !important;
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none !important;
}
.yf-landing-plan li::before {
content: "";
position: static !important;
flex: 0 0 9px !important;
width: 9px;
height: 9px;
margin-top: .45em;
border-radius: 999px;
background: var(--yf-mint, #9ddfc4);
}
.yf-landing-plan .yf-landing-button {
width: 100% !important;
margin-top: auto !important;
}
.yf-landing-flow-card {
min-height: 0 !important;
padding: clamp(24px, 3vw, 32px) !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 20px !important;
align-items: center !important;
justify-items: center !important;
border-radius: 30px !important;
background:
radial-gradient(circle at 55% 48%, rgba(157, 223, 196, 0.18), transparent 16rem),
linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(247, 244, 237, 0.94)) !important;
box-shadow: 0 22px 60px rgba(16, 32, 29, 0.12) !important;
}
.yf-landing-phone,
.yf-landing-mini-dashboard {
width: 100% !important;
max-width: 280px !important;
border: 1px solid rgba(16, 32, 29, 0.1) !important;
border-radius: 22px !important;
background: rgba(255, 255, 255, 0.86) !important;
box-shadow: 0 14px 34px rgba(16, 32, 29, 0.08) !important;
}
.yf-landing-phone {
justify-self: center;
padding: 18px !important;
}
.yf-landing-phone__top {
gap: 10px !important;
margin-bottom: 18px !important;
color: var(--yf-text, #10201d) !important;
font-size: .96rem !important;
}
.yf-landing-message {
width: fit-content !important;
max-width: 86% !important;
margin-top: 10px !important;
padding: 10px 12px !important;
border-radius: 14px !important;
color: var(--yf-text, #10201d) !important;
font-size: .92rem !important;
line-height: 1.35 !important;
}
.yf-landing-message--user {
margin-left: auto !important;
background: rgba(157, 223, 196, 0.34) !important;
}
.yf-landing-flow-arrow {
width: 46px !important;
height: 46px !important;
justify-self: center !important;
transform: rotate(90deg) !important;
color: var(--yf-text, #10201d) !important;
background: linear-gradient(135deg, #f0d978 0%, #9ddfc4 100%) !important;
box-shadow: 0 14px 30px rgba(157, 223, 196, 0.22) !important;
}
.yf-landing-mini-dashboard {
justify-self: center;
padding: 22px !important;
}
.yf-landing-mini-dashboard__top {
gap: 16px !important;
color: var(--yf-text, #10201d) !important;
}
.yf-landing-mini-title,
.yf-landing-mini-total {
color: var(--yf-text, #10201d) !important;
}
@media (max-width: 991.98px) {
.yf-landing-pricing {
grid-template-columns: 1fr !important;
}
.yf-landing-plan {
min-height: auto !important;
}
.yf-landing-flow-card {
grid-template-columns: 1fr !important;
}
.yf-landing-phone,
.yf-landing-mini-dashboard {
max-width: none !important;
justify-self: stretch !important;
}
.yf-landing-flow-arrow {
transform: rotate(90deg) !important;
}
}
@media (max-width: 575.98px) {
.yf-landing-nav__auth {
flex: 0 1 min(100%, 340px) !important;
width: min(100%, 340px) !important;
min-width: 0 !important;
height: 42px !important;
margin: 0 auto !important;
}
.yf-landing-nav__auth iframe {
width: 100% !important;
max-width: 100% !important;
height: 42px !important;
}
.yf-landing-nav__links {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
overflow: hidden !important;
}
.yf-landing-nav__links a {
min-width: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding-right: 0 !important;
padding-left: 0 !important;
font-size: .68rem !important;
letter-spacing: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.yf-landing-nav__links a[href="#pricing"] {
display: none !important;
}
.yf-landing-plan {
padding: 24px !important;
border-radius: 22px !important;
}
.yf-landing-plan h3,
.yf-landing-plan__eyebrow {
max-width: 100%;
padding-right: 96px;
}
}
/* Cross-browser pricing fallback for YandexBrowser and older Chromium builds */
.yf-landing-section--pricing {
padding: 96px 24px !important;
}
.yf-landing-pricing {
width: 100% !important;
max-width: 1180px !important;
margin: 0 auto !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: stretch !important;
gap: 20px !important;
}
.yf-landing-plan {
flex: 1 1 320px !important;
width: auto !important;
min-width: 300px !important;
max-width: 360px !important;
}
@media (min-width: 1100px) {
.yf-landing-plan {
flex-basis: 0 !important;
}
}
@media (max-width: 767.98px) {
.yf-landing-section--pricing {
padding: 64px 16px !important;
}
.yf-landing-pricing {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 18px !important;
}
.yf-landing-plan {
width: 100% !important;
min-width: 0 !important;
max-width: 420px !important;
flex: 0 1 auto !important;
}
}
/* Landing spacing polish */
#how-it-works.yf-landing-section {
padding-top: 0 !important;
}
.yf-landing-section--pricing {
width: min(1180px, calc(100% - 64px)) !important;
margin: 0 auto !important;
border-radius: 34px !important;
overflow: hidden !important;
}
@media (max-width: 767.98px) {
.yf-landing-section--pricing {
width: calc(100% - 24px) !important;
border-radius: 26px !important;
}
}
/* Financial analytics dashboard */
#financial-overview-card .card-body {
position: relative;
}
#financial-overview-card .dashboard-info-button {
position: absolute;
top: 18px;
right: 20px;
z-index: 2;
}
#financial-overview-card .card-title {
padding-right: 36px;
}
.finance-analytics-kpi-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0;
padding-top: 14px;
}
.finance-analytics-kpi-column {
display: grid;
gap: 16px;
align-content: start;
padding: 0 26px;
border-left: 1px solid rgba(15, 23, 42, 0.08);
}
.finance-analytics-kpi-column__title {
margin: 0 0 2px;
color: #7b879d;
font-size: .69rem;
font-weight: 800;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: .045em;
}
.finance-analytics-kpi-column:first-child {
padding-left: 0;
border-left: 0;
}
.finance-analytics-kpi-column:last-child {
padding-right: 0;
}
.finance-analytics-kpi {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 14px;
align-items: center;
min-height: 58px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.finance-analytics-kpi__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
font-size: 1.25rem;
background: #f1f5f9;
color: #64748b;
}
.finance-analytics-kpi__content {
min-width: 0;
}
.finance-analytics-kpi__label {
display: block;
margin-bottom: 5px;
color: #5d6b86;
font-size: .88rem;
line-height: 1.25;
}
.finance-analytics-kpi__value {
display: block;
color: #1f2937;
font-size: 1.12rem;
line-height: 1.15;
white-space: normal;
}
.finance-analytics-kpi__value strong {
font-weight: 700;
}
.finance-analytics-kpi__unit {
color: #667085;
font-size: .9rem;
font-weight: 600;
}
.finance-analytics-kpi__note {
display: block;
min-height: 1.1em;
margin-top: 5px;
color: #7b8792;
font-size: .7rem;
font-weight: 650;
line-height: 1.35;
}
.finance-analytics-kpi__note.is-success { color: #198754; }
.finance-analytics-kpi__note.is-danger { color: #dc3545; }
.finance-analytics-kpi--success .finance-analytics-kpi__icon {
background: rgba(25, 135, 84, 0.12);
color: #198754;
}
.finance-analytics-kpi--danger .finance-analytics-kpi__icon {
background: rgba(220, 53, 69, 0.12);
color: #dc3545;
}
.finance-analytics-kpi--warning .finance-analytics-kpi__icon {
background: rgba(255, 193, 7, 0.14);
color: #d88900;
}
.finance-analytics-kpi--blue .finance-analytics-kpi__icon {
background: rgba(13, 110, 253, 0.10);
color: #0d6efd;
}
.finance-analytics-kpi--neutral .finance-analytics-kpi__icon {
background: rgba(108, 117, 125, 0.10);
color: #6c757d;
}
.finance-analytics-panel .card-body {
padding: 20px 22px;
}
.finance-analytics-panel .card-title {
margin-bottom: 12px;
color: #1f2937;
font-size: 1rem;
font-weight: 700;
}
.finance-analytics-text-list {
display: grid;
gap: 8px;
color: #4b5563;
font-size: .94rem;
line-height: 1.45;
}
.finance-analytics-insight-card .card-body {
min-height: 198px;
}
.finance-analytics-card-title {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px !important;
}
.finance-analytics-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex: 0 0 30px;
border-radius: 50%;
font-size: .95rem;
}
.finance-analytics-title-icon--blue {
color: #3b82f6;
background: rgba(59, 130, 246, 0.10);
}
.finance-analytics-trend-table {
overflow: hidden;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 8px;
}
.finance-analytics-trend-row,
.finance-analytics-regular-row {
display: grid;
align-items: center;
gap: 12px;
color: #4f5d75;
font-size: .92rem;
line-height: 1.35;
}
.finance-analytics-trend-row {
grid-template-columns: minmax(0, 1fr) auto;
padding: 8px 12px;
border-top: 1px solid rgba(15, 23, 42, 0.08);
background: rgba(255, 255, 255, 0.68);
}
.finance-analytics-trend-row:first-child {
border-top: 0;
}
.finance-analytics-insight-note {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
gap: 10px;
align-items: center;
margin-top: 12px;
padding: 11px 12px;
border-radius: 8px;
color: #536179;
background: rgba(59, 130, 246, 0.08);
font-size: .86rem;
line-height: 1.4;
}
.finance-analytics-insight-note i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
color: #3b82f6;
background: rgba(59, 130, 246, 0.10);
}
.finance-analytics-anomaly-state {
min-height: 118px;
}
.finance-analytics-empty-state {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
min-height: 118px;
color: #536179;
}
.finance-analytics-empty-state__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 92px;
height: 92px;
flex: 0 0 92px;
border-radius: 50%;
color: #18a878;
background: rgba(24, 168, 120, 0.13);
font-size: 2.85rem;
}
.finance-analytics-empty-state__icon i {
display: inline-flex;
line-height: 1;
}
.finance-analytics-empty-state strong {
display: block;
margin-bottom: 6px;
color: #334155;
font-size: 1rem;
}
.finance-analytics-empty-state div span {
display: block;
font-size: .9rem;
}
.finance-analytics-regular-list {
display: grid;
gap: 12px;
}
.finance-analytics-regular-row,
.finance-analytics-anomaly-row {
padding-bottom: 2px;
}
.finance-analytics-regular-row {
grid-template-columns: minmax(0, 1fr) max-content 38px;
gap: 10px;
}
.finance-analytics-anomaly-row {
display: grid;
grid-template-columns: minmax(0, 1fr) max-content 44px;
gap: 10px;
align-items: start;
color: #4f5d75;
font-size: .92rem;
line-height: 1.35;
}
.finance-analytics-regular-row > span:first-child,
.finance-analytics-anomaly-row > span:first-child {
min-width: 0;
overflow-wrap: anywhere;
}
.finance-analytics-regular-row strong,
.finance-analytics-anomaly-row strong {
color: #3f4b63;
font-weight: 700;
white-space: nowrap;
}
.finance-analytics-regular-row > span:last-child,
.finance-analytics-anomaly-row > span:last-child {
color: #536179;
text-align: right;
font-weight: 700;
white-space: nowrap;
}
.finance-analytics-muted-empty {
color: #6c757d;
}
@media (max-width: 1199.98px) {
.finance-analytics-kpi-grid {
grid-template-columns: repeat(3, minmax(160px, 1fr));
row-gap: 22px;
}
.finance-analytics-kpi-column:nth-child(4) {
padding-left: 0;
border-left: 0;
}
}
@media (max-width: 991.98px) {
.finance-analytics-kpi-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.finance-analytics-kpi-column,
.finance-analytics-kpi-column:nth-child(4) {
padding: 0 20px;
border-left: 1px solid rgba(15, 23, 42, 0.08);
}
.finance-analytics-kpi-column:nth-child(odd) {
padding-left: 0;
border-left: 0;
}
}
@media (max-width: 575.98px) {
.finance-analytics-kpi-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.finance-analytics-kpi-column,
.finance-analytics-kpi-column:first-child,
.finance-analytics-kpi-column:last-child {
gap: 14px;
padding: 0;
border-left: 0;
}
.finance-analytics-kpi {
grid-template-columns: 36px minmax(0, 1fr);
min-height: 50px;
}
.finance-analytics-kpi__icon {
width: 36px;
height: 36px;
font-size: 1.05rem;
}
.finance-analytics-regular-row,
.finance-analytics-anomaly-row {
grid-template-columns: minmax(0, 1fr);
gap: 2px;
}
.finance-analytics-regular-row > span:last-child,
.finance-analytics-anomaly-row > span:last-child {
text-align: left;
}
.finance-analytics-empty-state {
justify-content: flex-start;
}
}
/* Keep the landing isolated from legacy dashboard typography rules loaded later. */
.yf26-command strong,
.yf26-event strong,
.yf26-flow__status strong,
.yf26-result-note strong,
.yf26-plan h3,
.yf26-plan__head strong {
color: #eef8f3 !important;
}
.yf26-result-card strong,
.yf26-overview strong,
.yf26-terminal__head strong,
.yf26-insight strong,
.yf26-bars b,
.yf26-orbit__node b {
color: var(--yf26-ink) !important;
}
/* Authorized dashboard 2026 ------------------------------------------------ */
body.yf-dashboard-auth {
--yf-app-ink: #10201d;
--yf-app-muted: #65736e;
--yf-app-surface: #ffffff;
--yf-app-surface-soft: #f7faf8;
--yf-app-border: rgba(16, 32, 29, 0.11);
--yf-app-border-strong: rgba(16, 32, 29, 0.18);
--yf-app-mint: #2cb889;
--yf-app-mint-dark: #087a59;
--yf-app-mint-soft: #e2f5ee;
--yf-app-gold: #d2ad45;
--yf-app-gold-soft: #fbf4da;
--yf-app-danger: #e65361;
--yf-app-danger-soft: #fdebed;
--yf-app-blue: #4f7fe8;
--yf-app-shadow: 0 8px 28px rgba(17, 50, 42, 0.065);
background: #eef3f1;
color: var(--yf-app-ink);
font-family: "Manrope", sans-serif;
}
body.yf-dashboard-auth .content {
min-height: calc(100vh - 48px);
background: #eef3f1;
}
.yf-dashboard-container {
width: min(100%, 1440px);
padding-right: clamp(12px, 2vw, 28px);
padding-left: clamp(12px, 2vw, 28px);
}
.yf-dashboard-shell {
padding: 8px 0 34px;
color: var(--yf-app-ink);
}
.yf-dashboard-shell > .nav {
display: inline-flex;
gap: 4px;
margin-bottom: 12px !important;
padding: 4px;
border: 1px solid var(--yf-app-border);
border-radius: 8px;
background: rgba(255, 255, 255, 0.78);
box-shadow: 0 3px 12px rgba(16, 32, 29, 0.04);
backdrop-filter: blur(12px);
}
.yf-dashboard-shell > .nav .nav-element {
min-height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 6px 15px !important;
border-radius: 6px;
background: transparent;
color: var(--yf-app-muted) !important;
font-size: 13px;
font-weight: 600;
transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.yf-dashboard-shell > .nav .nav-element:hover {
color: var(--yf-app-ink) !important;
background: var(--yf-app-surface-soft);
}
.yf-dashboard-shell > .nav .nav-element-active {
color: #f8fbfa !important;
background: #173d35;
box-shadow: 0 4px 12px rgba(23, 61, 53, 0.18);
}
.yf-dashboard-shell .row {
--bs-gutter-x: 12px;
}
.yf-dashboard-shell .card {
overflow: hidden;
padding: 0 !important;
border: 1px solid var(--yf-app-border) !important;
border-radius: 8px !important;
background: var(--yf-app-surface) !important;
color: var(--yf-app-ink) !important;
box-shadow: var(--yf-app-shadow) !important;
}
.yf-dashboard-shell .card-body {
padding: clamp(18px, 1.8vw, 26px);
}
.yf-dashboard-shell .card-title {
color: var(--yf-app-ink);
font-size: 17px;
line-height: 1.35;
font-weight: 700;
}
.yf-dashboard-shell .card-subtitle {
color: var(--yf-app-muted) !important;
font-size: 12.5px;
line-height: 1.5;
font-weight: 500;
}
.yf-dashboard-shell .card-text,
.yf-dashboard-shell .mb-1,
.yf-dashboard-shell .mb-2 {
font-size: 13.5px;
line-height: 1.55;
}
.yf-card-title-icon {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 10px;
border-radius: 50%;
color: var(--yf-app-mint-dark);
background: var(--yf-app-mint-soft);
font-size: 14px;
vertical-align: middle;
}
.yf-assets-section > .row + .row {
margin-top: 12px;
}
.yf-assets-section [class*="pt-2"] {
padding-top: 0 !important;
}
.yf-assets-section #card1 h3 {
margin: 12px 0 0;
color: var(--yf-app-ink);
font-size: clamp(20px, 1.65vw, 25px);
line-height: 1.25;
font-weight: 700;
}
.yf-assets-section #card2 h4 {
margin: 7px 0 0;
color: var(--yf-app-ink);
font-size: clamp(16px, 1.25vw, 19px);
line-height: 1.35;
font-weight: 600;
}
.yf-assets-section #card1 .card-text {
padding-top: 4px;
color: var(--yf-app-muted);
}
.yf-assets-section #card4 .card-text,
.yf-assets-section #card5 .card-text,
.yf-assets-section #card6 .card-text {
color: var(--yf-app-muted);
}
.yf-assets-section strong {
color: var(--yf-app-ink) !important;
font-weight: 700;
}
.yf-assets-section hr {
border-color: var(--yf-app-border);
opacity: 1;
}
.yf-assets-section .btn-group {
gap: 4px;
padding: 4px;
border-radius: 7px;
background: #eef3f1;
}
.yf-assets-section .btn-group .btn {
border: 0 !important;
border-radius: 5px !important;
padding: 7px 12px;
background: transparent !important;
color: var(--yf-app-muted);
font-size: 12px;
font-weight: 600;
}
.yf-assets-section .btn-group .btn-primary {
background: #173d35 !important;
color: #fff;
}
.yf-dashboard-shell .form-control,
.yf-dashboard-shell .form-select {
min-height: 42px;
border-color: var(--yf-app-border-strong);
border-radius: 7px;
background: #fff;
color: var(--yf-app-ink);
font-size: 13px;
}
.yf-dashboard-shell .form-control:focus,
.yf-dashboard-shell .form-select:focus {
border-color: rgba(44, 184, 137, .65);
box-shadow: 0 0 0 3px rgba(44, 184, 137, .12);
}
/* Subscription gates */
.yf-card--subscription-locked > .card-body {
pointer-events: none;
user-select: none;
filter: blur(2.5px) saturate(.75);
opacity: .48;
}
.yf-card--subscription-locked {
isolation: isolate;
overflow: hidden;
}
.yf-card--subscription-locked::after {
position: absolute;
z-index: 11;
inset: 0;
pointer-events: none;
background-image: radial-gradient(circle at 24% 18%, rgba(45, 191, 144, .08), transparent 34%);
content: "";
}
.yf-subscription-gate {
position: absolute;
z-index: 12;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 24px;
text-align: center;
border-radius: inherit;
background: linear-gradient(145deg, rgba(248, 251, 250, .88), rgba(239, 247, 244, .8));
backdrop-filter: blur(8px);
}
.yf-subscription-gate__icon {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(210, 173, 69, .28);
border-radius: 50%;
color: #856a1e;
background: var(--yf-app-gold-soft);
font-size: 17px;
}
.yf-subscription-gate__content {
display: flex;
flex-direction: column;
gap: 4px;
max-width: 420px;
}
.yf-subscription-gate__content strong {
color: var(--yf-app-ink) !important;
font-size: 15px;
font-weight: 700;
}
.yf-subscription-gate__content span {
color: var(--yf-app-muted);
font-size: 12px;
line-height: 1.5;
}
.yf-subscription-gate__button {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 13px;
border: 1px solid rgba(16, 32, 29, .12);
border-radius: 6px;
background: #173d35;
color: #fff;
font-size: 12px;
font-weight: 700;
}
.yf-subscription-gate__button:hover {
background: #0f302a;
color: #fff;
}
/* Dashboard modals */
.yf-dashboard-modal {
--yf-modal-ink: #10201d;
--yf-modal-muted: #68766f;
--yf-modal-border: rgba(16, 32, 29, .12);
}
.yf-dashboard-auth .yf-modal-surface {
overflow: hidden;
padding: 0 !important;
border: 1px solid rgba(255, 255, 255, .2) !important;
border-radius: 12px !important;
background: #f8faf9 !important;
color: var(--yf-modal-ink) !important;
box-shadow: 0 28px 90px rgba(7, 25, 20, .28);
}
.yf-modal-header {
align-items: flex-start;
padding: 22px 24px 18px;
border-bottom: 1px solid var(--yf-modal-border);
background: #fff;
}
.yf-modal-header > div {
padding-right: 24px;
}
.yf-modal-eyebrow {
display: block;
margin-bottom: 5px;
color: var(--yf-app-mint-dark);
font-size: 10px;
line-height: 1.2;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0;
}
.yf-modal-header .modal-title {
color: var(--yf-modal-ink);
font-size: clamp(20px, 2vw, 28px);
line-height: 1.2;
font-weight: 750;
}
.yf-modal-header p {
margin: 5px 0 0;
color: var(--yf-modal-muted);
font-size: 13px;
line-height: 1.55;
}
.yf-modal-header .btn-close {
width: 34px;
height: 34px;
flex: 0 0 34px;
margin: 0;
padding: 0;
border-radius: 50%;
background-size: 12px;
opacity: .55;
}
.yf-modal-header .btn-close:hover {
background-color: #eef3f1;
opacity: 1;
}
.yf-modal-body {
padding: 22px 24px 24px;
}
.yf-modal-footer {
justify-content: space-between;
gap: 12px;
padding: 14px 24px;
border-top: 1px solid var(--yf-modal-border);
background: #fff;
color: var(--yf-modal-muted);
font-size: 11px;
}
.yf-modal-footer a {
color: var(--yf-app-mint-dark);
font-weight: 700;
text-decoration: none;
}
.yf-subscription-status {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 16px;
}
.yf-subscription-status > div {
min-width: 150px;
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 13px;
border: 1px solid var(--yf-modal-border);
border-radius: 7px;
background: #fff;
}
.yf-subscription-status span {
color: var(--yf-modal-muted);
font-size: 12px;
}
.yf-subscription-status strong {
color: var(--yf-modal-ink) !important;
font-size: 15px;
}
.yf-pricing-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.yf-plan-card {
min-width: 0;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
padding: 24px;
border: 1px solid var(--yf-modal-border);
border-radius: 8px;
background: #fff;
box-shadow: 0 5px 18px rgba(16, 32, 29, .045);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.yf-plan-card::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 3px;
background: #aab3af;
}
.yf-plan-card:hover {
transform: translateY(-3px);
border-color: rgba(44, 184, 137, .38);
box-shadow: 0 15px 38px rgba(16, 32, 29, .1);
}
.yf-plan-card--featured {
border-color: rgba(44, 184, 137, .46);
background: linear-gradient(180deg, #f2fbf7 0%, #fff 46%);
box-shadow: 0 12px 32px rgba(44, 184, 137, .11);
}
.yf-plan-card--featured::before {
background: #d7b74a;
}
.yf-plan-card--business::before {
background: #2a9e79;
}
.yf-plan-card--free {
background: linear-gradient(180deg, #f8faf9 0%, #fff 34%);
}
.yf-plan-card--business {
border-color: rgba(42, 158, 121, .28);
background: linear-gradient(180deg, #eff9f5 0%, #fff 42%);
}
.yf-plan-card.is-current {
box-shadow: inset 0 0 0 1px rgba(44, 184, 137, .42), 0 10px 30px rgba(16, 32, 29, .08);
}
.yf-plan-card__topline {
min-height: 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
}
.yf-plan-card__label {
color: #8a7126;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
}
.yf-plan-card__status {
padding: 4px 7px;
border-radius: 999px;
color: #0c644c;
background: #d9f2e8;
font-size: 11px;
font-weight: 800;
}
.yf-plan-card h3 {
margin: 0 0 10px;
color: var(--yf-modal-ink);
font-size: 24px;
line-height: 1.2;
font-weight: 750;
}
.yf-plan-card .yf-plan-title-row h3 {
margin-bottom: 0;
}
.yf-plan-card .yf-plan-title-row {
align-items: center;
margin-bottom: 12px;
}
.yf-plan-title-row--founder {
width: fit-content;
justify-content: flex-start;
gap: 10px;
}
.yf-plan-price {
display: flex;
align-items: baseline;
gap: 5px;
}
.yf-plan-price strong {
color: var(--yf-modal-ink) !important;
font-family: "IBM Plex Mono", monospace;
font-size: 27px;
line-height: 1.2;
font-weight: 600;
}
.yf-plan-price span,
.yf-plan-daily {
color: var(--yf-modal-muted);
font-size: 12px;
}
.yf-plan-daily {
margin: 3px 0 0;
}
.yf-plan-summary {
min-height: 58px;
margin: 15px 0 12px;
color: var(--yf-modal-muted);
font-size: 14px;
line-height: 1.55;
}
.yf-plan-card__sale-slot {
min-height: 34px;
display: flex;
align-items: flex-end;
}
.yf-plan-card__daily-slot {
min-height: 18px;
display: flex;
align-items: flex-start;
}
.yf-plan-card__countdown-slot {
min-height: 25px;
display: flex;
align-items: flex-start;
}
.yf-plan-card__sale-slot .yf-plan-sale,
.yf-plan-card__daily-slot .yf-plan-daily,
.yf-plan-card__countdown-slot .yf-plan-countdown {
margin-bottom: 0;
}
.yf-plan-features {
display: grid;
gap: 9px;
margin: 4px 0 0;
padding: 18px 0 0;
border-top: 1px solid rgba(16, 32, 29, .09);
list-style: none;
}
.yf-plan-features li {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
gap: 6px;
color: #43514d;
font-size: 14.5px;
line-height: 1.48;
}
.yf-plan-features i {
color: var(--yf-app-mint);
font-size: 16px;
}
.yf-plan-card .yf-plan-feature__badge {
color: #8b6818;
border-color: rgba(186, 139, 30, .28);
background: #fff7dc;
}
.yf-plan-card .yf-plan-feature__info {
color: #598078;
}
body.yf-dashboard-auth.dark-theme .yf-plan-feature-popover {
color: #f0f6f4;
border-color: #49625d;
background: #24332f;
box-shadow: 0 18px 50px rgba(0, 0, 0, .42);
}
body.yf-dashboard-auth.dark-theme .yf-plan-feature-popover strong {
color: #f5fbf8;
}
body.yf-dashboard-auth.dark-theme .yf-plan-feature-popover p {
color: #bbc9c5;
}
body.yf-dashboard-auth.dark-theme .yf-plan-card .yf-plan-feature__info {
color: #8bcdb7;
}
body.yf-dashboard-auth.dark-theme .yf-plan-card .yf-plan-feature__badge {
color: #efd77e;
border-color: rgba(231, 199, 91, .28);
background: rgba(210, 169, 54, .1);
}
@media (max-width: 575.98px) {
.yf-plan-feature-popover {
padding: 14px;
}
.yf-plan-feature-popover strong {
font-size: 15px;
}
.yf-plan-feature-popover p {
font-size: 13.5px;
}
}
.yf-plan-card__footer {
min-height: 42px;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 8px;
margin-top: auto;
padding-top: 18px;
}
.yf-plan-current-note {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--yf-modal-muted);
font-size: 10px;
}
.yf-plan-button,
.yf-primary-button,
.yf-secondary-button {
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border-radius: 6px;
font-size: 12px;
font-weight: 750;
}
.yf-plan-button,
.yf-secondary-button {
border: 1px solid var(--yf-modal-border);
background: #fff;
color: var(--yf-modal-ink);
}
.yf-plan-button:hover,
.yf-secondary-button:hover {
border-color: rgba(44, 184, 137, .42);
background: #f2faf7;
color: var(--yf-modal-ink);
}
.yf-plan-button--primary,
.yf-primary-button {
border: 1px solid #173d35;
background: #173d35;
color: #fff;
}
.yf-plan-button--primary:hover,
.yf-primary-button:hover {
border-color: #0e3029;
background: #0e3029;
color: #fff;
}
/* Balance modal */
.yf-balance-hero {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
padding: 17px 18px;
border: 1px solid rgba(44, 184, 137, .22);
border-radius: 8px;
background: #edf8f4;
}
.yf-balance-hero > div {
display: flex;
flex-direction: column;
gap: 3px;
}
.yf-balance-hero span {
color: var(--yf-modal-muted);
font-size: 11px;
}
.yf-balance-hero strong {
color: #086f51 !important;
font-family: "IBM Plex Mono", monospace;
font-size: 25px;
line-height: 1.25;
}
.yf-balance-hero__icon {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #d7f1e7;
color: #087a59 !important;
font-size: 18px !important;
}
.yf-balance-form,
.yf-link-form {
padding: 18px;
border: 1px solid var(--yf-modal-border);
border-radius: 8px;
background: #fff;
}
.yf-form-field + .yf-form-field,
.yf-form-field + .yf-top-up-panel {
margin-top: 14px;
}
.yf-form-label-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.yf-dashboard-modal .form-label {
margin-bottom: 6px;
color: var(--yf-modal-ink);
font-size: 11px;
font-weight: 700;
}
.yf-dashboard-modal .form-control {
min-height: 44px;
border: 1px solid var(--yf-modal-border);
border-radius: 7px;
background: #f8faf9 !important;
color: var(--yf-modal-ink) !important;
font-size: 13px;
}
.yf-dashboard-modal .form-control:focus {
border-color: rgba(44, 184, 137, .7);
box-shadow: 0 0 0 3px rgba(44, 184, 137, .12);
}
.yf-dashboard-modal .form-control:disabled {
background: #eef2f0 !important;
color: #53615c !important;
opacity: 1;
}
.yf-field-status {
display: inline-flex;
align-items: center;
gap: 5px;
color: #087a59;
font-size: 10px;
font-weight: 700;
}
.yf-agreement {
margin: 12px 0;
color: var(--yf-modal-muted);
font-size: 10px;
}
.yf-top-up-panel {
display: grid;
gap: 12px;
margin-top: 15px;
}
.yf-money-input {
position: relative;
}
.yf-money-input input {
padding-right: 42px;
font-family: "IBM Plex Mono", monospace;
font-size: 16px !important;
font-weight: 600;
}
.yf-money-input > span {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
color: var(--yf-modal-muted);
font-size: 13px;
}
.yf-quick-amounts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 7px;
}
.yf-quick-amount {
min-height: 34px;
border: 1px solid var(--yf-modal-border);
border-radius: 6px;
background: #fff;
color: var(--yf-modal-ink);
font-size: 11px;
font-weight: 700;
}
.yf-quick-amount:hover,
.yf-quick-amount.is-selected {
border-color: rgba(44, 184, 137, .55);
background: #e9f7f1;
color: #086f51;
}
.yf-primary-button--wide {
width: 100%;
}
.yf-form-hint {
color: var(--yf-modal-muted);
font-size: 9px;
text-align: center;
}
.yf-transaction-history {
width: 100%;
margin-top: 14px;
overflow: hidden;
border: 1px solid var(--yf-modal-border);
border-radius: 8px;
background: #fff;
}
.yf-transaction-history summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
cursor: pointer;
list-style: none;
color: var(--yf-modal-ink);
font-size: 12px;
font-weight: 700;
}
.yf-transaction-history summary::-webkit-details-marker {
display: none;
}
.yf-transaction-history summary > span {
display: inline-flex;
align-items: center;
gap: 7px;
}
.yf-transaction-history summary > span:last-child {
color: var(--yf-modal-muted);
font-size: 9px;
font-weight: 600;
}
.yf-transaction-history[open] summary .bi-chevron-down {
transform: rotate(180deg);
}
.yf-modal-table {
width: 100% !important;
min-width: 100%;
table-layout: auto;
border-top: 1px solid var(--yf-modal-border);
color: var(--yf-modal-ink) !important;
font-size: 10px;
}
.yf-modal-table th,
.yf-modal-table td {
padding: 10px 12px;
border-color: var(--yf-modal-border);
background: #fff !important;
white-space: nowrap;
}
.yf-transaction-history > .table-responsive {
width: 100%;
max-width: none;
}
.yf-modal-table th {
color: var(--yf-modal-muted);
font-weight: 700;
}
.yf-transaction-id {
padding: 4px 6px;
border-radius: 5px;
background: #eef2f0;
font-family: "IBM Plex Mono", monospace;
}
.yf-payment-status {
display: inline-flex;
padding: 4px 7px;
border-radius: 999px;
font-size: 9px;
font-weight: 700;
}
.yf-payment-status.is-success { color: #087a59; background: #dff4eb; }
.yf-payment-status.is-pending { color: #84691f; background: #fbf1cf; }
.yf-payment-status.is-failed { color: #ad3442; background: #fde6e9; }
.yf-transaction-note {
margin: 0;
padding: 10px 12px;
color: var(--yf-modal-muted);
font-size: 9px;
}
/* Dashboard links modal */
.yf-link-form__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.yf-saved-links {
margin-top: 16px;
overflow: hidden;
border: 1px solid var(--yf-modal-border);
border-radius: 8px;
background: #fff;
}
.yf-saved-links__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 13px 15px;
border-bottom: 1px solid var(--yf-modal-border);
}
.yf-saved-links__header h6 {
margin: 0;
color: var(--yf-modal-ink);
font-size: 13px;
font-weight: 750;
}
.yf-saved-links__header span {
color: var(--yf-modal-muted);
font-size: 9px;
}
.yf-link-row {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 11px 14px;
border-bottom: 1px solid var(--yf-modal-border);
}
.yf-link-row:last-child {
border-bottom: 0;
}
.yf-link-row__icon {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--yf-app-mint-dark);
background: var(--yf-app-mint-soft);
}
.yf-link-row__content {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.yf-link-row__content strong {
color: var(--yf-modal-ink) !important;
font-size: 11px;
}
.yf-link-row__content a {
overflow: hidden;
color: var(--yf-modal-muted);
font-size: 9px;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
.yf-link-row__actions {
display: flex;
gap: 6px;
}
.yf-link-row__actions form {
margin: 0;
}
.yf-icon-button {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid var(--yf-modal-border);
border-radius: 6px;
background: #fff;
color: var(--yf-modal-muted);
}
.yf-icon-button:hover {
border-color: rgba(44, 184, 137, .42);
background: #edf8f4;
color: #087a59;
}
.yf-icon-button--danger:hover {
border-color: rgba(230, 83, 97, .35);
background: var(--yf-app-danger-soft);
color: var(--yf-app-danger);
}
.yf-empty-links {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 28px 16px;
color: var(--yf-modal-muted);
text-align: center;
}
.yf-empty-links > i {
font-size: 22px;
}
.yf-empty-links strong {
color: var(--yf-modal-ink) !important;
font-size: 12px;
}
.yf-empty-links span {
font-size: 10px;
}
/* Dark dashboard */
body.yf-dashboard-auth.dark-theme,
body.yf-dashboard-auth.dark-theme .content {
--yf-app-ink: #edf2f3;
--yf-app-muted: #a4b1b5;
--yf-app-surface: #1c2327;
--yf-app-surface-soft: #252e33;
--yf-app-border: rgba(211, 225, 230, .09);
--yf-app-border-strong: rgba(211, 225, 230, .16);
--yf-app-mint-soft: rgba(95, 174, 166, .14);
background: #12171a;
}
body.yf-dashboard-auth.dark-theme .yf-dashboard-shell > .nav {
background: rgba(28, 35, 39, .92);
}
body.yf-dashboard-auth.dark-theme .yf-dashboard-shell .card {
background: #1c2327 !important;
}
body.yf-dashboard-auth.dark-theme .yf-subscription-gate {
background: linear-gradient(145deg, rgba(20, 35, 41, .9), rgba(16, 29, 34, .86));
}
body.yf-dashboard-auth.dark-theme .yf-subscription-gate__content strong {
color: #edf5f1 !important;
}
body.yf-dashboard-auth.dark-theme .yf-modal-surface,
body.yf-dashboard-auth.dark-theme .yf-modal-header,
body.yf-dashboard-auth.dark-theme .yf-modal-footer,
body.yf-dashboard-auth.dark-theme .yf-plan-card,
body.yf-dashboard-auth.dark-theme .yf-subscription-status > div,
body.yf-dashboard-auth.dark-theme .yf-balance-form,
body.yf-dashboard-auth.dark-theme .yf-link-form,
body.yf-dashboard-auth.dark-theme .yf-transaction-history,
body.yf-dashboard-auth.dark-theme .yf-saved-links,
body.yf-dashboard-auth.dark-theme .yf-modal-table th,
body.yf-dashboard-auth.dark-theme .yf-modal-table td {
--yf-modal-ink: #edf2f3;
--yf-modal-muted: #a4b1b5;
--yf-modal-border: rgba(255, 255, 255, .1);
background: #1c2327 !important;
color: #edf2f3 !important;
}
body.yf-dashboard-auth.dark-theme .yf-plan-card--featured,
body.yf-dashboard-auth.dark-theme .yf-balance-hero {
background: #223035 !important;
}
body.yf-dashboard-auth.dark-theme .yf-plan-card--free {
background: linear-gradient(180deg, #242c30, #1c2327 38%) !important;
}
body.yf-dashboard-auth.dark-theme .yf-plan-card--business {
border-color: rgba(91, 200, 160, .28);
background: linear-gradient(180deg, #20342f, #1c2327 44%) !important;
}
body.yf-dashboard-auth.dark-theme .yf-plan-features {
border-top-color: rgba(255, 255, 255, .09);
}
body.yf-dashboard-auth.dark-theme .yf-youfi-multiplier--free {
color: #d2d9d6;
border-color: rgba(207, 220, 215, .2);
background: rgba(207, 220, 215, .09);
}
body.yf-dashboard-auth.dark-theme .yf-youfi-multiplier--premium {
color: #f3d875;
border-color: rgba(225, 189, 73, .3);
background: rgba(225, 189, 73, .12);
}
body.yf-dashboard-auth.dark-theme .yf-youfi-multiplier--business {
color: #8ee0c2;
border-color: rgba(90, 209, 164, .27);
background: rgba(66, 181, 138, .13);
}
body.yf-dashboard-auth.dark-theme .yf-youfi-multiplier--founder {
color: #f2a5a9;
border-color: rgba(220, 105, 113, .28);
background: rgba(195, 64, 74, .14);
}
body.yf-dashboard-auth.dark-theme .yf-dashboard-modal .form-control,
body.yf-dashboard-auth.dark-theme .yf-dashboard-modal .form-control:disabled,
body.yf-dashboard-auth.dark-theme .yf-quick-amount,
body.yf-dashboard-auth.dark-theme .yf-plan-button,
body.yf-dashboard-auth.dark-theme .yf-secondary-button,
body.yf-dashboard-auth.dark-theme .yf-icon-button {
background: #252e33 !important;
color: #edf2f3 !important;
}
@media (max-width: 991.98px) {
.yf-dashboard-container {
padding-right: 14px;
padding-left: 14px;
}
.yf-pricing-grid {
grid-template-columns: 1fr;
}
.yf-plan-summary {
min-height: 0;
}
.yf-plan-card__footer {
min-height: 0;
}
.yf-plan-card__sale-slot.is-empty,
.yf-plan-card__daily-slot.is-empty,
.yf-plan-card__countdown-slot.is-empty {
display: none;
}
}
@media (max-width: 575.98px) {
.yf-dashboard-shell {
padding-top: 4px;
}
.yf-dashboard-shell > .nav {
width: 100%;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.yf-dashboard-shell > .nav .nav-element {
min-width: 0;
padding: 7px 5px !important;
font-size: 11px;
}
.yf-dashboard-shell .card-body {
padding: 16px;
}
.yf-dashboard-shell .card-title {
font-size: 15px;
}
.yf-card-title-icon {
width: 29px;
height: 29px;
margin-right: 8px;
}
.yf-modal-header,
.yf-modal-body {
padding-right: 16px;
padding-left: 16px;
}
.yf-modal-footer {
align-items: flex-start;
padding-right: 16px;
padding-left: 16px;
}
.yf-subscription-status {
display: grid;
grid-template-columns: 1fr 1fr;
}
.yf-subscription-status > div {
min-width: 0;
}
.yf-quick-amounts {
grid-template-columns: 1fr 1fr;
}
.yf-link-row {
grid-template-columns: 32px minmax(0, 1fr);
}
.yf-link-row__actions {
grid-column: 2;
}
.yf-subscription-gate {
padding: 18px;
}
.yf-subscription-gate__content span {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.yf-plan-feature__sparkle {
animation: none;
opacity: .38;
transform: scale(.65);
}
.yf-plan-card,
.yf-dashboard-shell .nav-element {
transition: none;
}
}
/* Authorized dashboard polish: tables, navigation, modals and footer. */
body.yf-dashboard-auth {
min-height: 100vh;
display: flex;
flex-direction: column;
}
body.yf-dashboard-auth .content {
width: 100%;
flex: 1 0 auto;
}
body.yf-dashboard-auth[data-dashboard-section="analytics"] .content {
min-height: 0;
flex-grow: 0;
}
.yf-dashboard-shell > .nav .nav-element:hover,
.yf-dashboard-shell > .nav .nav-element:focus-visible {
color: #173d35 !important;
background: #dce9e4;
outline: none;
}
/* Finance tables keep their sticky columns, but use one calm surface. */
body.yf-dashboard-auth .yf-dashboard-shell .main-table {
width: 100%;
margin-bottom: 0;
padding: 0;
border: 1px solid var(--yf-app-border) !important;
border-radius: 8px;
border-collapse: separate;
border-spacing: 0;
table-layout: auto;
overflow: visible;
background: #fff !important;
color: var(--yf-app-ink) !important;
font-size: 12.5px !important;
line-height: 1.35;
}
body.yf-dashboard-auth .yf-dashboard-shell .main-table th,
body.yf-dashboard-auth .yf-dashboard-shell .main-table td {
height: 42px;
padding: 8px 10px !important;
border: 0;
border-right: 1px solid rgba(16, 32, 29, .06);
border-bottom: 1px solid rgba(16, 32, 29, .08);
background: #fff !important;
color: inherit;
vertical-align: middle;
white-space: nowrap;
}
body.yf-dashboard-auth .yf-dashboard-shell .main-table thead th {
height: 44px;
background: #edf4f1 !important;
color: #40514b;
font-size: 11.5px;
font-weight: 700;
}
body.yf-dashboard-auth .yf-dashboard-shell .main-table tbody tr:hover td {
background: #f1f7f4 !important;
}
body.yf-dashboard-auth .yf-dashboard-shell .main-table tr:last-child td {
border-bottom: 0;
}
body.yf-dashboard-auth .yf-dashboard-shell .main-table tr > :last-child {
border-right: 0;
}
body.yf-dashboard-auth .yf-dashboard-shell .main-table input,
body.yf-dashboard-auth .yf-dashboard-shell .main-table button,
body.yf-dashboard-auth .yf-dashboard-shell .main-table .btn {
font-size: 12px;
}
body.yf-dashboard-auth #expenses-table,
body.yf-dashboard-auth #incomes-table {
min-width: 1080px;
}
body.yf-dashboard-auth #income-plans-table {
min-width: 1120px;
}
/* Profile menu: reserve one column for icons and keep labels aligned. */
body.yf-dashboard-auth .nav.bg-dark .dropdown-menu {
min-width: 292px;
padding: 7px;
border: 1px solid rgba(255, 255, 255, .11);
border-radius: 9px;
box-shadow: 0 18px 45px rgba(0, 0, 0, .28);
}
body.yf-dashboard-auth .nav.bg-dark .dropdown-item {
min-height: 38px;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 6px;
font-size: 13px;
line-height: 1.35;
}
body.yf-dashboard-auth .nav.bg-dark .dropdown-item > .bi:first-child {
width: 18px;
flex: 0 0 18px;
margin: 0 !important;
text-align: center;
font-size: 15px;
}
body.yf-dashboard-auth .nav.bg-dark .dropdown-item > .bi-plus-circle {
margin-left: auto;
}
body.yf-dashboard-auth .nav.bg-dark .theme-switch-wrapper {
min-height: 42px;
justify-content: space-between;
gap: 12px;
padding: 7px 10px;
}
body.yf-dashboard-auth .nav.bg-dark .theme-switch-wrapper > span {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px !important;
}
body.yf-dashboard-auth .nav.bg-dark .theme-switch-wrapper .bi {
width: 18px;
text-align: center;
}
/* Modal typography and close controls. */
body.yf-dashboard-auth .modal-content {
position: relative;
}
body.yf-dashboard-auth .modal-header {
position: relative;
min-height: 62px;
padding-right: 64px;
}
body.yf-dashboard-auth .modal-header .btn-close {
position: absolute;
top: 50%;
right: 18px;
width: 34px;
height: 34px;
margin: 0;
padding: 0;
transform: translateY(-50%);
border-radius: 50%;
background-position: center;
background-size: 12px;
box-sizing: border-box;
}
body.yf-dashboard-auth .yf-modal-header .btn-close {
top: 20px;
transform: none;
}
body.yf-dashboard-auth .modal-title {
font-size: 19px;
line-height: 1.3;
font-weight: 700;
}
body.yf-dashboard-auth .modal-body {
font-size: 14px;
line-height: 1.6;
}
body.yf-dashboard-auth .modal-body label,
body.yf-dashboard-auth .yf-dashboard-modal .form-label {
font-size: 13px;
}
body.yf-dashboard-auth .modal-body .form-control,
body.yf-dashboard-auth .modal-body .form-select,
body.yf-dashboard-auth .modal-body .btn {
font-size: 13.5px;
}
.yf-modal-header p,
.yf-plan-summary,
.yf-plan-features li,
.yf-modal-footer,
.yf-agreement,
.yf-form-hint,
.yf-transaction-history,
.yf-saved-links {
font-size: 12.5px;
}
.yf-plan-price span,
.yf-plan-daily,
.yf-plan-current-note,
.yf-subscription-status span,
.yf-balance-hero span,
.yf-field-status {
font-size: 11.5px;
}
.yf-plan-button,
.yf-primary-button,
.yf-secondary-button,
.yf-quick-amount {
font-size: 13px;
}
/* The authorized footer follows the dashboard width and stays after content. */
body.yf-dashboard-auth .yf-footer {
width: 100%;
margin-top: 30px;
position: static !important;
flex: 0 0 auto;
}
body.yf-dashboard-auth .yf-footer__inner {
width: min(100%, 1440px);
margin: 0 auto;
padding: 24px clamp(14px, 2vw, 28px);
}
body.yf-dashboard-auth.dark-theme .yf-dashboard-shell > .nav .nav-element:hover,
body.yf-dashboard-auth.dark-theme .yf-dashboard-shell > .nav .nav-element:focus-visible {
color: #e8f4f3 !important;
background: #29383d;
}
body.yf-dashboard-auth.dark-theme .yf-dashboard-shell .main-table,
body.yf-dashboard-auth.dark-theme .yf-dashboard-shell .main-table th,
body.yf-dashboard-auth.dark-theme .yf-dashboard-shell .main-table td {
background: #1c2327 !important;
color: #dde6e8 !important;
border-color: rgba(255, 255, 255, .08);
}
body.yf-dashboard-auth.dark-theme .yf-dashboard-shell .main-table thead th {
background: #252f34 !important;
color: #b8c5c9 !important;
}
body.yf-dashboard-auth.dark-theme .yf-dashboard-shell .main-table tbody tr:hover td {
background: #232c31 !important;
}
@media (max-width: 575.98px) {
body.yf-dashboard-auth .yf-footer__inner {
padding-top: 22px;
padding-bottom: 22px;
}
body.yf-dashboard-auth .modal-header .btn-close {
right: 12px;
}
body.yf-dashboard-auth .modal-title {
font-size: 17px;
}
}
/* Net assets goal view and chart contrast. */
.yf-net-assets-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
.yf-net-assets-status {
min-height: 32px;
display: inline-flex;
align-items: center;
gap: 7px;
flex: 0 0 auto;
padding: 6px 10px;
border-radius: 999px;
color: #77611f;
background: var(--yf-app-gold-soft);
font-size: 11px;
font-weight: 700;
}
.yf-net-assets-status.is-complete {
color: #087252;
background: var(--yf-app-mint-soft);
}
.yf-net-assets-layout {
display: grid;
grid-template-columns: minmax(230px, .72fr) minmax(0, 1.8fr);
gap: clamp(24px, 4vw, 58px);
align-items: center;
margin-top: 24px;
}
.yf-net-assets-summary {
min-width: 0;
padding-right: clamp(22px, 3vw, 44px);
border-right: 1px solid var(--yf-app-border);
}
.yf-net-assets-eyebrow {
display: block;
margin-bottom: 7px;
color: var(--yf-app-muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
.yf-net-assets-value {
display: block;
color: var(--yf-app-ink) !important;
font-family: "IBM Plex Mono", monospace;
font-size: clamp(26px, 3vw, 42px);
line-height: 1.12;
font-weight: 600 !important;
white-space: nowrap;
}
.yf-net-assets-summary p {
max-width: 390px;
margin: 12px 0 0;
color: var(--yf-app-muted);
font-size: 12.5px;
line-height: 1.6;
}
.yf-net-assets-progress-panel {
min-width: 0;
}
.yf-net-assets-progress-head,
.yf-net-assets-scale {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.yf-net-assets-progress-head {
margin-bottom: 11px;
color: var(--yf-app-muted);
font-size: 12px;
font-weight: 600;
}
.yf-net-assets-progress-head strong {
color: var(--yf-app-mint-dark) !important;
font-family: "IBM Plex Mono", monospace;
font-size: 14px;
}
.yf-net-assets-rail {
position: relative;
height: 15px;
overflow: visible;
border-radius: 999px;
background: #e4ece8;
}
.yf-net-assets-rail > span {
position: absolute;
inset: 0 auto 0 0;
min-width: 8px;
border-radius: inherit;
background: linear-gradient(90deg, #278d6d 0%, #66c09d 100%);
box-shadow: 0 5px 16px rgba(44, 184, 137, .18);
}
.yf-net-assets-rail > span::after {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 21px;
height: 21px;
transform: translate(50%, -50%);
border: 5px solid #fff;
border-radius: 50%;
background: #2ca77f;
box-shadow: 0 3px 12px rgba(16, 32, 29, .2);
}
.yf-net-assets-scale {
margin-top: 9px;
color: var(--yf-app-muted);
font-size: 10.5px;
}
.yf-net-assets-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--yf-app-border);
}
.yf-net-assets-metrics > div {
min-width: 0;
display: grid;
gap: 5px;
padding: 0 18px;
border-right: 1px solid var(--yf-app-border);
}
.yf-net-assets-metrics > div:first-child {
padding-left: 0;
}
.yf-net-assets-metrics > div:last-child {
padding-right: 0;
border-right: 0;
}
.yf-net-assets-metrics span {
color: var(--yf-app-muted);
font-size: 10.5px;
}
.yf-net-assets-metrics strong {
overflow: hidden;
color: var(--yf-app-ink) !important;
font-family: "IBM Plex Mono", monospace;
font-size: 13px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
body.yf-dashboard-auth.dark-theme .text-muted,
body.yf-dashboard-auth.dark-theme .card-subtitle,
body.yf-dashboard-auth.dark-theme .income-kpi-row,
body.yf-dashboard-auth.dark-theme .finance-analytics-kpi__label,
body.yf-dashboard-auth.dark-theme .finance-analytics-regular-row,
body.yf-dashboard-auth.dark-theme .finance-analytics-anomaly-row {
color: #a4b1b5 !important;
}
body.yf-dashboard-auth.dark-theme .yf-dashboard-shell .form-control,
body.yf-dashboard-auth.dark-theme .yf-dashboard-shell .form-select {
border-color: rgba(205, 221, 226, .18);
background-color: #252e33 !important;
color: #e2e9eb !important;
}
body.yf-dashboard-auth.dark-theme .yf-dashboard-shell .form-select option {
background: #252e33;
color: #e2e9eb;
}
body.yf-dashboard-auth.dark-theme .yf-dashboard-shell .form-control:focus,
body.yf-dashboard-auth.dark-theme .yf-dashboard-shell .form-select:focus {
border-color: rgba(95, 174, 166, .62);
box-shadow: 0 0 0 3px rgba(95, 174, 166, .12);
}
body.yf-dashboard-auth.dark-theme .income-month-goal,
body.yf-dashboard-auth.dark-theme .income-month-metric__label,
body.yf-dashboard-auth.dark-theme .expense-month-card .mb-1,
body.yf-dashboard-auth.dark-theme .expense-budget-ring-caption,
body.yf-dashboard-auth.dark-theme .expense-budget-ring__center span,
body.yf-dashboard-auth.dark-theme .finance-analytics-empty-state,
body.yf-dashboard-auth.dark-theme .finance-analytics-insight-note {
color: #a4b1b5 !important;
}
body.yf-dashboard-auth.dark-theme .income-month-metric {
border-color: rgba(211, 225, 230, .09);
background: #232b30;
box-shadow: none;
}
body.yf-dashboard-auth.dark-theme .income-month-metric strong,
body.yf-dashboard-auth.dark-theme .income-month-metric #incomeHeroMonthPlan,
body.yf-dashboard-auth.dark-theme .income-month-metric #incomeTotalMonth,
body.yf-dashboard-auth.dark-theme .expense-month-card .mb-1 strong,
body.yf-dashboard-auth.dark-theme .expense-budget-ring__center strong,
body.yf-dashboard-auth.dark-theme .finance-analytics-empty-state strong,
body.yf-dashboard-auth.dark-theme .finance-analytics-regular-row strong,
body.yf-dashboard-auth.dark-theme .finance-analytics-anomaly-row strong {
color: #edf2f3 !important;
}
body.yf-dashboard-auth.dark-theme .income-month-progress-ring {
background:
radial-gradient(circle closest-side, #232b30 74%, transparent 76%),
conic-gradient(#63aea6 var(--income-progress, 0%), rgba(99, 174, 166, .16) 0);
box-shadow: inset 0 0 0 1px rgba(99, 174, 166, .12);
}
body.yf-dashboard-auth.dark-theme .expense-budget-ring {
background:
radial-gradient(circle closest-side, #1c2327 79%, transparent 81%),
conic-gradient(var(--expense-budget-color, #63aea6) var(--expense-budget-progress, 0%), rgba(211, 225, 230, .12) 0);
}
body.yf-dashboard-auth.dark-theme .finance-analytics-trend-table {
border-color: rgba(211, 225, 230, .09);
}
body.yf-dashboard-auth.dark-theme .finance-analytics-trend-row {
border-color: rgba(211, 225, 230, .09);
background: #232b30;
color: #b1bec2;
}
body.yf-dashboard-auth.dark-theme .finance-analytics-regular-row > span:last-child,
body.yf-dashboard-auth.dark-theme .finance-analytics-anomaly-row > span:last-child {
color: #b1bec2 !important;
}
body.yf-dashboard-auth.dark-theme .finance-analytics-insight-note {
background: rgba(78, 129, 153, .12);
}
body.yf-dashboard-auth.dark-theme .yf-assets-section .btn-group {
border: 1px solid rgba(211, 225, 230, .08);
background: #252e33;
}
body.yf-dashboard-auth.dark-theme .yf-assets-section .btn-group .btn {
color: #a4b1b5;
}
body.yf-dashboard-auth.dark-theme .yf-assets-section .btn-group .btn-primary {
background: #28575b !important;
color: #f4f8f8;
}
body.yf-dashboard-auth.dark-theme .income-tags-control,
body.yf-dashboard-auth.dark-theme .expense-tags-control {
border-color: rgba(211, 225, 230, .13);
background: #252e33;
color: #b2c0c4;
box-shadow: none;
}
body.yf-dashboard-auth.dark-theme .income-tags-control:hover:not(:disabled),
body.yf-dashboard-auth.dark-theme .income-tags-control:focus-visible:not(:disabled),
body.yf-dashboard-auth.dark-theme .expense-tags-control:hover:not(:disabled),
body.yf-dashboard-auth.dark-theme .expense-tags-control:focus-visible:not(:disabled) {
border-color: rgba(95, 174, 166, .42);
background: #2a373b;
color: #84c2bb;
}
body.yf-dashboard-auth.dark-theme .income-tags-page-indicator,
body.yf-dashboard-auth.dark-theme .expense-tags-page-indicator {
color: #9faeb3;
}
body.yf-dashboard-auth.dark-theme .income-tag-select,
body.yf-dashboard-auth.dark-theme .expense-tag-select,
body.yf-dashboard-auth.dark-theme .income-add-tag-action,
body.yf-dashboard-auth.dark-theme .expense-add-tag-action,
body.yf-dashboard-auth.dark-theme .income-tag-edit,
body.yf-dashboard-auth.dark-theme .expense-tag-edit {
color: #a4b1b5;
}
.yf-net-assets-heading .card-subtitle {
margin-top: 8px;
}
.expense-budget-inline .card-title {
font-size: .72rem;
font-weight: 500;
}
/* Compact finance table labels after removing the unused checkbox column. */
body.yf-dashboard-auth #expenses-table tr > :first-child,
body.yf-dashboard-auth #incomes-table tr > :first-child {
padding-right: 6px !important;
padding-left: 6px !important;
}
.finance-table-tag {
max-width: 160px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 7px !important;
line-height: 1.35;
white-space: nowrap;
}
.finance-table-tag__mobile {
display: none;
}
/* The two active cards share a controlled height; only the article list scrolls. */
.yf-finance-articles-scroll {
min-height: 0;
}
.yf-finance-article {
padding: 2px;
line-height: 1.35;
}
.yf-finance-article img {
margin-right: 7px;
vertical-align: -3px;
}
.yf-finance-articles-scroll hr {
margin: 3px 0 !important;
}
/* Active navigation has no hover recoloring. */
body.yf-dashboard-auth .yf-dashboard-shell > .nav .nav-element.nav-element-active:hover,
body.yf-dashboard-auth .yf-dashboard-shell > .nav .nav-element.nav-element-active:focus-visible,
body.yf-dashboard-auth.dark-theme .yf-dashboard-shell > .nav .nav-element.nav-element-active:hover,
body.yf-dashboard-auth.dark-theme .yf-dashboard-shell > .nav .nav-element.nav-element-active:focus-visible {
color: #f8fbfa !important;
background: #28575b;
box-shadow: 0 4px 12px rgba(16, 32, 35, 0.28);
}
@media (min-width: 992px) {
.yf-assets-paired-row > [class*="col-"] {
display: flex;
}
.yf-assets-paired-row #card4,
.yf-assets-paired-row #card5 {
width: 100%;
}
.yf-assets-paired-row #card4 .card-body {
min-height: 0;
display: flex;
flex-direction: column;
}
.yf-finance-articles-scroll {
flex: 1 1 auto;
overflow-x: hidden;
overflow-y: auto;
padding-right: 6px;
scrollbar-color: var(--yf-scroll-thumb) var(--yf-scroll-track);
scrollbar-width: thin;
}
.yf-finance-articles-scroll::-webkit-scrollbar {
width: 10px;
}
.yf-finance-articles-scroll::-webkit-scrollbar-thumb {
border-radius: 999px;
background: var(--yf-scroll-thumb);
}
}
body.yf-dashboard-auth.dark-theme .yf-net-assets-rail {
background: #354147;
}
body.yf-dashboard-auth.dark-theme .yf-net-assets-rail > span {
background: linear-gradient(90deg, #4f9498 0%, #78b7ae 100%);
box-shadow: none;
}
body.yf-dashboard-auth.dark-theme .yf-net-assets-rail > span::after {
border-color: #1c2327;
background: #78b7ae;
}
body.yf-dashboard-auth.dark-theme .yf-net-assets-status {
color: #d1bd79;
background: rgba(203, 177, 97, .12);
}
body.yf-dashboard-auth.dark-theme .yf-net-assets-status.is-complete {
color: #83c4aa;
background: rgba(100, 184, 152, .12);
}
@media (max-width: 767.98px) {
#expenses-table tr > :first-child,
#incomes-table tr > :first-child {
min-width: 96px !important;
width: 96px !important;
max-width: 96px !important;
}
.finance-table-tag {
max-width: 84px;
}
.finance-table-tag__full {
display: none;
}
.finance-table-tag__mobile {
display: inline;
}
.yf-net-assets-heading {
align-items: flex-start;
flex-direction: column;
gap: 12px;
}
.yf-net-assets-layout {
grid-template-columns: 1fr;
gap: 24px;
}
.yf-net-assets-summary {
padding-right: 0;
padding-bottom: 22px;
border-right: 0;
border-bottom: 1px solid var(--yf-app-border);
}
.yf-net-assets-metrics {
grid-template-columns: 1fr;
gap: 12px;
}
.yf-net-assets-metrics > div,
.yf-net-assets-metrics > div:first-child,
.yf-net-assets-metrics > div:last-child {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 0 0 12px;
border-right: 0;
border-bottom: 1px solid var(--yf-app-border);
}
.yf-net-assets-metrics > div:last-child {
padding-bottom: 0;
border-bottom: 0;
}
}
/* Unified native scrollbars: standards first, WebKit fallback for older engines. */
:root,
body.light-theme,
html[data-theme="light"] {
--yf-scroll-track: rgba(16, 32, 29, .055);
--yf-scroll-thumb: rgba(69, 91, 84, .34);
--yf-scroll-thumb-hover: rgba(47, 77, 68, .58);
--yf-scroll-thumb-active: rgba(38, 64, 57, .72);
color-scheme: light;
}
body.dark-theme,
html[data-theme="dark"] {
--yf-scroll-track: rgba(220, 232, 236, .055);
--yf-scroll-thumb: rgba(156, 176, 182, .34);
--yf-scroll-thumb-hover: rgba(178, 199, 205, .56);
--yf-scroll-thumb-active: rgba(196, 215, 220, .72);
color-scheme: dark;
}
html,
html *,
body,
body * {
scrollbar-color: var(--yf-scroll-thumb) var(--yf-scroll-track);
scrollbar-width: thin;
}
.table-responsive,
.yf-finance-articles-scroll,
.yf-transaction-history,
.yf-saved-links,
.modal-body {
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.table-responsive {
padding-bottom: 3px;
overscroll-behavior-inline: contain;
}
@supports selector(::-webkit-scrollbar) {
html::-webkit-scrollbar,
body::-webkit-scrollbar,
body *::-webkit-scrollbar {
width: 10px;
height: 10px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
body *::-webkit-scrollbar-track {
border-radius: 999px;
background: var(--yf-scroll-track);
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
body *::-webkit-scrollbar-thumb {
min-width: 38px;
min-height: 38px;
border: 2px solid transparent;
border-radius: 999px;
background: var(--yf-scroll-thumb);
background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
body *::-webkit-scrollbar-thumb:hover {
background: var(--yf-scroll-thumb-hover);
background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active,
body *::-webkit-scrollbar-thumb:active {
background: var(--yf-scroll-thumb-active);
background-clip: padding-box;
}
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
body *::-webkit-scrollbar-corner {
background: transparent;
}
html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button,
body *::-webkit-scrollbar-button {
display: none;
width: 0;
height: 0;
}
@media (hover: none), (pointer: coarse) {
html::-webkit-scrollbar,
body::-webkit-scrollbar,
body *::-webkit-scrollbar {
width: 7px;
height: 7px;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
body *::-webkit-scrollbar-thumb {
border-width: 1px;
}
}
}
@media (hover: none), (pointer: coarse) {
.table-responsive,
.yf-finance-articles-scroll,
.yf-transaction-history,
.yf-saved-links,
.modal-body {
scrollbar-width: thin;
touch-action: pan-x pan-y;
}
}
body .expense-tags-carousel,
body .income-tags-carousel {
scrollbar-width: none;
}
body .expense-tags-carousel::-webkit-scrollbar,
body .income-tags-carousel::-webkit-scrollbar {
display: none;
}
/* Section-aware tutorials and a stable swipeable mobile section navigation. */
.yf-dashboard-shell .yf-section-nav {
max-width: 100%;
flex-wrap: nowrap;
white-space: nowrap;
}
.yf-dashboard-shell .yf-section-nav .nav-element {
flex: 0 0 auto;
white-space: nowrap;
}
.tooltipTutorial {
position: fixed;
width: min(420px, calc(100vw - 32px));
max-width: 420px;
padding: 20px !important;
border: 1px solid rgba(16, 32, 29, 0.14);
border-radius: 10px;
background: #ffffff;
color: #10201d;
box-shadow: 0 24px 70px rgba(4, 20, 17, 0.28);
}
.tooltipTutorial.is-visible {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
.tooltipTutorial.is-transitioning {
opacity: .9;
transform: translate3d(0, 5px, 0) scale(.99);
}
.tooltipTutorial__content {
transition: opacity 190ms ease, transform 270ms cubic-bezier(.22, 1, .36, 1);
}
.tooltipTutorial__content.is-changing {
opacity: 0;
transform: translate3d(0, 5px, 0);
}
.tooltipTutorial h5 {
margin: 0 0 8px;
font-size: 18px;
font-weight: 700;
color: inherit;
}
.tooltipTutorial p {
margin: 0;
color: #5e6d68;
font-size: 14px;
line-height: 1.55;
}
.tooltipTutorial #progressTutorial {
display: inline-flex;
align-items: center;
min-height: 28px;
margin: 16px 8px 0 0;
padding: 4px 9px;
border-radius: 999px;
background: #edf5f2;
color: #28575b;
font-size: 12px;
font-weight: 700;
}
.tooltipTutorial .btn {
min-height: 36px;
margin-top: 16px;
padding: 7px 14px;
border-radius: 7px;
font-size: 13px;
font-weight: 650;
}
.tooltipTutorial .btn:disabled {
cursor: wait;
opacity: .64;
}
.tooltipTutorial #close-btn {
color: #5e6d68;
border-color: rgba(16, 32, 29, 0.18);
}
.tooltipTutorial #close-btn:hover {
color: #10201d;
background: #edf2f0;
}
.yf-dashboard-shell .card.highlight {
position: relative;
z-index: 299999999;
border-color: #65b99f !important;
box-shadow: 0 0 0 3px rgba(101, 185, 159, 0.28), 0 20px 48px rgba(4, 20, 17, 0.22) !important;
transform: translate3d(0, -2px, 0);
}
.yf-dashboard-shell .card.highlight,
.yf-dashboard-shell .card.highlight-leaving {
transition: border-color 280ms ease, box-shadow 360ms ease, transform 360ms cubic-bezier(.22, 1, .36, 1);
}
.yf-dashboard-shell .card.highlight-leaving {
z-index: 299999998;
transform: translate3d(0, 0, 0);
}
body.yf-dashboard-auth.dark-theme .tooltipTutorial {
border-color: rgba(157, 223, 196, 0.2);
background: #182a30;
color: #f2f7f5;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52);
}
body.yf-dashboard-auth.dark-theme .tooltipTutorial p {
color: #b5c4c1;
}
body.yf-dashboard-auth.dark-theme .tooltipTutorial #progressTutorial {
background: #213c3c;
color: #a8decf;
}
body.yf-dashboard-auth.dark-theme .tooltipTutorial #close-btn {
color: #c5d2cf;
border-color: rgba(197, 210, 207, 0.24);
}
body.yf-dashboard-auth.dark-theme .tooltipTutorial #close-btn:hover {
color: #f2f7f5;
background: #263a3f;
}
@media (max-width: 767.98px) {
.tooltipTutorial {
top: auto !important;
right: 10px;
bottom: max(10px, env(safe-area-inset-bottom));
left: 10px !important;
width: auto;
max-width: none;
}
}
@media (max-width: 575.98px) {
.yf-dashboard-shell .yf-section-nav {
width: 100%;
max-width: 100%;
display: flex !important;
grid-template-columns: none;
justify-content: flex-start;
gap: 4px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
overscroll-behavior-inline: contain;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
touch-action: pan-x pan-y;
}
.yf-dashboard-shell .yf-section-nav::-webkit-scrollbar {
display: none;
}
.yf-dashboard-shell .yf-section-nav .nav-element {
flex: 0 0 auto;
min-width: 92px;
min-height: 36px;
padding: 7px 12px !important;
scroll-snap-align: start;
font-size: 12px;
line-height: 20px;
}
.tooltipTutorial {
top: auto !important;
right: 10px;
bottom: max(10px, env(safe-area-inset-bottom));
left: 10px !important;
width: auto;
max-width: none;
padding: 18px !important;
border-radius: 10px;
}
.tooltipTutorial h5 {
font-size: 17px;
}
.tooltipTutorial p {
font-size: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
#overlay,
.tooltipTutorial,
.tooltipTutorial__content,
.yf-dashboard-shell .card.highlight,
.yf-dashboard-shell .card.highlight-leaving {
transition-duration: 1ms !important;
animation-duration: 1ms !important;
}
}
/* Rewards hub refinements */
.yf-rewards-modal__body {
min-height: 590px;
}
.yf-rewards-modal #modal-content {
min-height: 420px;
}
.yf-rewards-wallet__value {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.yf-rewards-settings-button {
display: inline-grid;
width: 28px;
height: 28px;
padding: 0;
place-items: center;
border: 1px solid transparent;
border-radius: 50%;
background: transparent;
color: #72817c;
transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.yf-rewards-settings-button:hover,
.yf-rewards-settings-button:focus-visible {
border-color: rgba(20, 156, 115, .22);
background: #e4f3ed;
color: #0d7c5c;
outline: none;
}
.yf-rewards-settings {
position: absolute;
z-index: 20;
inset: 0;
display: grid;
place-items: center;
padding: 20px;
border-radius: inherit;
background: rgba(15, 31, 27, .48);
backdrop-filter: blur(4px);
}
.yf-rewards-settings[hidden] {
display: none;
}
.yf-rewards-notice {
position: absolute;
inset: 0;
z-index: 12;
display: grid;
place-items: center;
padding: 24px;
background: rgba(12, 28, 25, 0.52);
backdrop-filter: blur(5px);
opacity: 0;
transition: opacity 160ms ease;
}
.yf-rewards-notice[hidden] {
display: none;
}
.yf-rewards-notice.is-visible {
opacity: 1;
}
.yf-rewards-notice__dialog {
position: relative;
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
gap: 16px;
width: min(440px, 100%);
padding: 24px;
border: 1px solid rgba(25, 123, 99, 0.2);
border-radius: 18px;
background: #fff;
box-shadow: 0 24px 80px rgba(4, 24, 19, 0.28);
transform: translateY(8px) scale(0.985);
transition: transform 160ms ease;
}
.yf-rewards-notice.is-visible .yf-rewards-notice__dialog {
transform: translateY(0) scale(1);
}
.yf-rewards-notice__icon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 50%;
color: #b78318;
background: #fff4d8;
font-size: 20px;
}
.yf-rewards-notice__eyebrow {
color: #b78318;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
}
.yf-rewards-notice__content h6 {
margin: 4px 32px 8px 0;
color: #172925;
font-size: 18px;
font-weight: 750;
}
.yf-rewards-notice__content p {
margin: 0 0 18px;
color: #60706c;
font-size: 14px;
line-height: 1.55;
}
.yf-rewards-notice__button {
min-width: 118px;
padding: 9px 18px;
border: 0;
border-radius: 10px;
color: #fff;
background: #197b63;
font-weight: 700;
}
.yf-rewards-notice__button:hover,
.yf-rewards-notice__button:focus-visible {
color: #fff;
background: #12624f;
}
.yf-rewards-notice__close {
position: absolute;
top: 14px;
right: 14px;
display: grid;
place-items: center;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 50%;
color: #73807d;
background: transparent;
}
.yf-rewards-notice__close:hover {
color: #172925;
background: #edf3f1;
}
body.yf-dashboard-auth.dark-theme .yf-rewards-notice__dialog {
border-color: rgba(140, 210, 190, 0.22);
background: #172724;
}
body.yf-dashboard-auth.dark-theme .yf-rewards-notice__content h6 {
color: #f3f7f5;
}
body.yf-dashboard-auth.dark-theme .yf-rewards-notice__content p {
color: #b6c4c0;
}
body.yf-dashboard-auth.dark-theme .yf-rewards-notice__close:hover {
color: #f3f7f5;
background: rgba(255, 255, 255, 0.08);
}
.yf-rewards-settings__dialog {
position: relative;
width: min(100%, 430px);
padding: 25px;
border: 1px solid rgba(16, 32, 29, .13);
border-radius: 11px;
background: #fff;
color: #17211f;
box-shadow: 0 24px 70px rgba(8, 29, 23, .26);
}
.yf-rewards-settings__close {
position: absolute;
top: 14px;
right: 14px;
display: grid;
width: 32px;
height: 32px;
padding: 0;
place-items: center;
border: 0;
border-radius: 50%;
background: #eef3f1;
color: #56645f;
}
.yf-rewards-settings__eyebrow {
color: #138362;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
}
.yf-rewards-settings__dialog h6 {
margin: 5px 40px 7px 0;
font-size: 19px;
font-weight: 750;
}
.yf-rewards-settings__dialog > p {
margin: 0 0 18px;
color: #68766f;
font-size: 12px;
line-height: 1.6;
}
.yf-rewards-settings__option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 14px;
border: 1px solid rgba(16, 32, 29, .12);
border-radius: 8px;
background: #f5f8f7;
cursor: pointer;
}
.yf-rewards-settings__option > span {
display: flex;
flex-direction: column;
gap: 3px;
}
.yf-rewards-settings__option strong {
color: #17211f !important;
font-size: 13px;
}
.yf-rewards-settings__option small {
color: #71807a;
font-size: 10px;
}
.yf-rewards-settings__option input {
width: 42px;
height: 23px;
flex: 0 0 42px;
appearance: none;
border: 0 !important;
border-radius: 999px;
background: #cbd4d1 !important;
cursor: pointer;
transition: background-color .2s ease;
}
.yf-rewards-settings__option input::after {
display: block;
width: 17px;
height: 17px;
margin: 3px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
content: "";
transition: transform .2s ease;
}
.yf-rewards-settings__option input:checked {
background: #159a73 !important;
}
.yf-rewards-settings__option input:checked::after {
transform: translateX(19px);
}
.yf-rewards-settings__status {
min-height: 18px;
margin-top: 9px;
color: #66756f;
font-size: 10px;
text-align: right;
}
.yf-task-card h6 {
font-size: 14.5px;
}
.yf-task-card p {
font-size: 11.5px;
}
.yf-task-card__meta span,
.yf-task-progress > span,
.yf-task-card__action small {
font-size: 9.5px;
}
.yf-task-card__meta .yf-task-card__reward {
font-size: 10.5px;
}
.yf-task-action--claim {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
gap: 1px;
}
.yf-task-action--claim > strong {
display: inline-flex;
align-items: baseline;
gap: 4px;
color: #fff !important;
}
.yf-task-action--claim > strong span {
color: #fff !important;
font-size: 12px;
}
.yf-task-action--claim > strong small {
color: rgba(255, 255, 255, .82) !important;
font-size: 8px;
}
.yf-task-action.is-loading,
.yf-shop-product .btn.is-loading {
color: transparent !important;
pointer-events: none;
}
.yf-task-action.is-loading::after,
.yf-shop-product .btn.is-loading::after {
position: absolute;
width: 15px;
height: 15px;
border: 2px solid rgba(255, 255, 255, .45);
border-top-color: #fff;
border-radius: 50%;
content: "";
animation: yf-reward-spin .7s linear infinite;
}
.yf-task-action,
.yf-shop-product .btn {
position: relative;
}
@keyframes yf-reward-spin {
to { transform: rotate(360deg); }
}
.yf-shop-intro p,
.yf-shop-product p {
font-size: 10.5px;
}
.yf-shop-rules span,
.yf-shop-product__top span {
font-size: 9.5px;
}
.yf-shop-product__top strong {
font-size: 15.5px;
}
.yf-shop-product__bottom {
align-items: stretch;
flex-direction: column;
gap: 8px;
}
.yf-shop-product__bottom > strong {
font-size: 13.5px;
}
.yf-shop-product .btn {
width: 100%;
min-height: 34px;
font-size: 9.5px;
}
.yf-rewards-skeleton {
min-height: 420px;
}
.yf-rewards-skeleton > div {
display: grid;
gap: 9px;
}
.yf-rewards-skeleton--shop > div {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.yf-skeleton-block {
display: block;
border-radius: 9px;
background: linear-gradient(90deg, #edf2f0 25%, #f8faf9 50%, #edf2f0 75%);
background-size: 220% 100%;
animation: yf-reward-skeleton 1.35s ease-in-out infinite;
}
.yf-skeleton-block--summary,
.yf-skeleton-block--pass,
.yf-skeleton-block--intro {
height: 65px;
margin-bottom: 10px;
}
.yf-skeleton-block--task {
height: 108px;
}
.yf-skeleton-block--leader {
height: 58px;
}
.yf-skeleton-block--product {
height: 176px;
}
@keyframes yf-reward-skeleton {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
body.yf-dashboard-auth.dark-theme .yf-rewards-settings__dialog {
border-color: rgba(230, 242, 237, .13);
background: #1e2927;
color: #edf5f2;
}
body.yf-dashboard-auth.dark-theme .yf-rewards-settings__dialog h6,
body.yf-dashboard-auth.dark-theme .yf-rewards-settings__option strong {
color: #edf5f2 !important;
}
body.yf-dashboard-auth.dark-theme .yf-rewards-settings__dialog > p,
body.yf-dashboard-auth.dark-theme .yf-rewards-settings__option small,
body.yf-dashboard-auth.dark-theme .yf-rewards-settings__status {
color: #a8b7b1;
}
body.yf-dashboard-auth.dark-theme .yf-rewards-settings__option {
border-color: rgba(230, 242, 237, .12);
background: #25312f;
}
body.yf-dashboard-auth.dark-theme .yf-rewards-settings-button:hover {
background: rgba(35, 173, 128, .16);
}
body.yf-dashboard-auth.dark-theme .yf-skeleton-block {
background: linear-gradient(90deg, #232e2c 25%, #2d3936 50%, #232e2c 75%);
background-size: 220% 100%;
}
@media (max-width: 767.98px) {
.yf-rewards-modal__body {
min-height: min(620px, calc(100dvh - 110px));
}
.yf-rewards-modal #modal-content,
.yf-rewards-skeleton {
min-height: 400px;
}
.yf-rewards-skeleton--shop > div {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 480px) {
.yf-task-action--claim {
flex-direction: column;
gap: 1px;
}
.yf-shop-product__bottom > strong {
font-size: 14px;
}
.yf-rewards-skeleton--shop > div {
grid-template-columns: 1fr;
}
}
/* Authentication 2026 */
.yf-auth-body {
--auth-bg: #071a17;
--auth-panel: #0d2722;
--auth-mint: #91ddc0;
--auth-gold: #dfc466;
--auth-text: #f7f5ed;
--auth-muted: #aab8b3;
display: flex;
min-height: 100vh;
min-height: 100dvh;
margin: 0;
color: var(--auth-text);
background:
linear-gradient(rgba(145, 221, 192, .035) 1px, transparent 1px),
linear-gradient(90deg, rgba(145, 221, 192, .035) 1px, transparent 1px),
radial-gradient(circle at 74% 38%, rgba(44, 133, 105, .2), transparent 36%),
var(--auth-bg);
background-size: 42px 42px, 42px 42px, auto, auto;
font-family: Manrope, sans-serif;
}
.yf-auth-page {
display: flex;
flex: 1 0 auto;
flex-direction: column;
min-height: 100vh;
min-height: 100dvh;
width: 100%;
}
html:has(body.yf-auth-body) {
min-height: 100%;
background: #071a17;
}
body.yf-auth-body > .yf-auth-page {
flex: 1 1 auto;
align-self: stretch;
}
body.yf-auth-body {
width: 100%;
min-height: 100vh;
align-items: stretch;
}
.yf-auth-body *, .yf-auth-body *::before, .yf-auth-body *::after { box-sizing: border-box; }
.yf-auth-header, .yf-auth-footer {
width: min(1180px, calc(100% - 48px));
margin: 0 auto;
}
.yf-auth-header {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 78px;
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.yf-auth-brand img { display: block; width: 154px; height: auto; }
.yf-auth-back { color: var(--auth-muted); font-size: 14px; font-weight: 650; text-decoration: none; }
.yf-auth-back:hover { color: var(--auth-text); }
.yf-auth-back i { margin-right: 7px; }
.yf-auth-shell {
display: grid;
grid-template-columns: minmax(0, .88fr) minmax(480px, 1fr);
align-items: start;
gap: clamp(48px, 8vw, 118px);
width: min(1080px, calc(100% - 48px));
min-height: auto;
margin: 0 auto;
padding: 48px 0 56px;
flex: 1 0 auto;
}
.yf-auth-page > .yf-public-footer {
position: relative;
z-index: 0;
flex: 0 0 auto;
margin-top: auto !important;
}
.yf-authorized-brand {
position: absolute;
top: 50%;
left: clamp(18px, 3vw, 52px);
z-index: 1;
transform: translateY(-50%);
}
body.yf-dashboard-auth > .nav.bg-dark {
position: relative;
z-index: 1030;
overflow: visible;
isolation: isolate;
}
body.yf-dashboard-auth > .yf-authorized-nav {
min-height: 60px;
align-items: center;
padding-block: 6px;
background: rgba(7, 23, 20, .88) !important;
border-bottom: 1px solid rgba(255, 255, 255, .08);
box-shadow: 0 8px 24px rgba(3, 17, 14, .16);
backdrop-filter: blur(18px) saturate(135%);
-webkit-backdrop-filter: blur(18px) saturate(135%);
}
body.yf-dashboard-auth.dark-theme > .yf-authorized-nav,
html[data-theme="dark"] body.yf-dashboard-auth > .yf-authorized-nav {
background: rgba(7, 20, 18, .96) !important;
border-bottom-color: rgba(157, 223, 196, .1);
box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}
@media (min-width: 1200px) {
body.yf-dashboard-auth > .yf-authorized-nav {
display: flex;
width: 100%;
min-height: 68px;
align-items: center;
justify-content: flex-end !important;
flex-wrap: nowrap;
padding-right: max(clamp(12px, 2vw, 28px), calc((100vw - 1440px) / 2 + 28px));
padding-left: max(clamp(12px, 2vw, 28px), calc((100vw - 1440px) / 2 + 28px));
}
.yf-authorized-nav > .yf-authorized-brand {
position: static;
order: 0;
flex: 0 0 auto;
margin-right: auto;
transform: none;
}
.yf-authorized-nav > .yf-authorized-extra-link { order: 10; }
.yf-authorized-nav > .yf-youfihub-nav-item { order: 20; }
.yf-authorized-nav > .yf-notifications-nav-item { order: 30; }
.yf-authorized-nav > .yf-authorized-profile { order: 40; }
}
.yf-authorized-brand__link {
display: flex;
align-items: center;
padding: 7px 0;
}
.yf-authorized-brand__link img {
display: block;
width: 150px;
height: auto;
}
.yf-public-demo-nav {
justify-content: flex-start !important;
gap: 18px;
padding-inline: max(clamp(16px, 2vw, 28px), calc((100vw - 1440px) / 2 + 28px)) !important;
}
.yf-public-demo-nav > .yf-authorized-brand {
position: static;
display: block;
flex: 0 0 auto;
margin-right: auto;
transform: none;
}
.yf-public-demo-nav__brand {
margin: 0;
padding: 6px 0;
border: 0;
border-radius: 0;
color: inherit;
background: transparent;
box-shadow: none;
text-decoration: none;
}
.yf-public-demo-nav__brand:hover,
.yf-public-demo-nav__brand:focus-visible { background: transparent; outline: none; }
.yf-public-demo-nav__brand:focus-visible { box-shadow: 0 0 0 3px rgba(101, 217, 174, .28); }
.yf-public-demo-nav__actions {
display: flex;
align-items: center;
gap: 14px;
}
.yf-public-demo-nav__label {
display: inline-flex;
align-items: center;
gap: 7px;
color: rgba(228, 244, 238, .68);
font-size: 12px;
font-weight: 650;
}
.yf-public-demo-nav__label i { color: #65d9ae; font-size: 14px; }
.yf-public-demo-nav .yf-public-demo-nav__cta {
min-height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 14px;
border: 1px solid rgba(101, 217, 174, .42);
border-radius: 7px;
color: #eafff7;
background: rgba(101, 217, 174, .09);
font-size: 12px;
font-weight: 750;
line-height: 1;
text-decoration: none;
}
.yf-public-demo-nav .yf-public-demo-nav__cta:hover,
.yf-public-demo-nav .yf-public-demo-nav__cta:focus-visible {
border-color: #65d9ae;
color: #071d17;
background: #65d9ae;
outline: none;
}
@media (max-width: 767.98px) {
.yf-public-demo-nav { min-height: 58px; gap: 10px; padding-inline: 14px !important; }
.yf-public-demo-nav__brand img { width: 126px; }
.yf-public-demo-nav__actions { margin-left: auto; }
.yf-public-demo-nav .yf-public-demo-nav__cta { min-height: 36px; padding-inline: 11px; font-size: 11px; }
}
@media (max-width: 1199.98px) {
.yf-authorized-brand { display: none; }
}
.yf-auth-intro { max-width: 480px; }
.yf-auth-eyebrow, .yf-auth-card__head > span, .yf-auth-state > span {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--auth-gold);
font: 700 11px/1.2 "IBM Plex Mono", monospace;
text-transform: uppercase;
}
.yf-auth-eyebrow::before { width: 24px; height: 1px; content: ''; background: currentColor; }
.yf-auth-intro h1 { max-width: 520px; margin: 20px 0 22px; font-size: clamp(42px, 5.2vw, 68px); line-height: 1; letter-spacing: 0; font-weight: 750; }
.yf-auth-intro p { margin: 0; color: var(--auth-muted); font-size: 17px; line-height: 1.7; }
.yf-auth-intro ul { display: grid; gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; color: #dbe5e1; font-size: 14px; }
.yf-auth-intro li i { margin-right: 10px; color: var(--auth-mint); }
.yf-auth-card {
position: relative;
width: 100%;
padding: clamp(28px, 4vw, 42px);
border: 1px solid rgba(157, 223, 196, .2);
border-radius: 24px;
background: rgba(14, 40, 34, .82);
box-shadow: 0 32px 90px rgba(0, 0, 0, .3);
backdrop-filter: blur(18px);
}
.yf-auth-card__head h2, .yf-auth-state h2 { margin: 7px 0 9px; font-size: clamp(28px, 3vw, 38px); line-height: 1.12; font-weight: 750; }
.yf-auth-card__head p, .yf-auth-state p { margin: 0 0 25px; color: var(--auth-muted); font-size: 14px; line-height: 1.65; }
.yf-auth-form { display: grid; gap: 16px; }
.yf-auth-form > label, .yf-auth-form__columns > label { display: grid; gap: 7px; color: #dfe8e4; font-size: 13px; font-weight: 650; }
.yf-auth-form__columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.yf-auth-password-fields { align-items: start; }
.yf-password-requirements {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px 14px;
margin-top: -5px;
color: #8da09a;
font-size: 11px;
line-height: 1.35;
}
.yf-password-requirements span { display: flex; align-items: center; gap: 7px; }
.yf-password-requirements i { font-size: 8px; }
.yf-password-requirements span.is-valid { color: #91ddc0; }
.yf-password-requirements span.is-valid i::before { content: "\f26e"; font-size: 11px; }
.yf-auth-input { display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 9px; min-height: 48px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 11px; color: #7d918a; background: rgba(3, 18, 15, .38); transition: border-color 150ms, box-shadow 150ms, background 150ms; }
.yf-auth-input:focus-within { border-color: rgba(145, 221, 192, .72); background: rgba(3, 18, 15, .55); box-shadow: 0 0 0 3px rgba(145, 221, 192, .1); }
.yf-auth-input input { width: 100%; min-width: 0; padding: 12px 0; border: 0; outline: 0; color: #f7f5ed; background: transparent; font: 500 14px/1.4 Manrope, sans-serif; }
.yf-auth-input input::placeholder { color: #70827c; }
.yf-auth-error { display: block; color: #ff8f92; font-size: 12px; font-weight: 500; }
.yf-auth-consent { display: flex !important; grid-template-columns: none !important; flex-direction: row; align-items: flex-start; gap: 9px !important; color: var(--auth-muted) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.5; }
.yf-auth-consent input { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; accent-color: #53bb96; }
.yf-auth-consent a, .yf-auth-form__line a, .yf-auth-switch a { color: var(--auth-mint); text-decoration: none; }
.yf-auth-consent a:hover, .yf-auth-form__line a:hover, .yf-auth-switch a:hover { text-decoration: underline; }
.yf-auth-form__line { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; }
.yf-auth-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 49px;
padding: 11px 18px;
border: 0;
border-radius: 11px;
color: #08201a;
background: linear-gradient(135deg, #e7cf6c, #91ddc0);
box-shadow: 0 12px 32px rgba(72, 180, 143, .15);
font: 750 14px/1.2 Manrope, sans-serif;
cursor: pointer;
transition: transform 150ms, filter 150ms;
}
.yf-auth-button:hover { transform: translateY(-1px); filter: brightness(1.04); }
.yf-auth-button:disabled { cursor: wait; opacity: .7; transform: none; }
.yf-auth-button--telegram { width: 100%; color: #eff8f5; background: #248fd1; box-shadow: none; }
.yf-auth-button--telegram:hover { background: #1f82bf; }
.yf-auth-button.is-loading i { animation: yf-auth-spin 800ms linear infinite; }
@keyframes yf-auth-spin { to { transform: rotate(360deg); } }
.yf-auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: #789088; font-size: 11px; text-transform: uppercase; }
.yf-auth-divider::before, .yf-auth-divider::after { flex: 1; height: 1px; content: ''; background: rgba(255, 255, 255, .1); }
.yf-telegram-auth { display: grid; gap: 12px; }
.yf-telegram-auth__copy { display: flex; align-items: center; gap: 12px; }
.yf-telegram-auth__copy > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #49ace8; background: rgba(73, 172, 232, .11); font-size: 18px; }
.yf-telegram-auth__copy div { display: grid; gap: 2px; }
.yf-telegram-auth__copy strong { font-size: 13px; }
.yf-telegram-auth__copy span { color: var(--auth-muted); font-size: 11px; }
.yf-telegram-auth__widget { min-height: 46px; text-align: center; }
.yf-telegram-auth__status { min-height: 18px; color: var(--auth-muted); font-size: 11px; line-height: 1.5; }
.yf-telegram-auth__status.is-error { padding: 10px 12px; border: 1px solid rgba(255, 128, 132, .2); border-radius: 9px; color: #ffc0c2; background: rgba(119, 35, 39, .18); }
.yf-telegram-auth__status.is-ready { color: var(--auth-mint); text-align: center; }
.yf-auth-switch { margin: 22px 0 0; color: var(--auth-muted); font-size: 13px; text-align: center; }
.yf-auth-alert { margin-bottom: 18px; padding: 11px 13px; border: 1px solid rgba(255, 128, 132, .22); border-radius: 10px; color: #ffc0c2; background: rgba(119, 35, 39, .18); font-size: 12px; line-height: 1.5; }
.yf-auth-alert.is-error { border-color: rgba(255, 128, 132, .28); color: #ffd2d4; background: rgba(119, 35, 39, .24); }
.yf-auth-alert.is-success { border-color: rgba(145, 221, 192, .22); color: #bff1dd; background: rgba(43, 118, 92, .18); }
.yf-auth-state { display: grid; justify-items: center; text-align: center; }
.yf-auth-state__icon { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 20px; border-radius: 50%; color: var(--auth-mint); background: rgba(145, 221, 192, .1); font-size: 28px; }
.yf-auth-state strong { color: #f7f5ed; }
.yf-auth-state form { width: min(320px, 100%); }
.yf-auth-state .yf-auth-button { width: 100%; }
.yf-auth-text-button { margin-top: 14px; padding: 8px; border: 0; color: var(--auth-muted); background: transparent; font: 600 12px Manrope, sans-serif; cursor: pointer; }
.yf-auth-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; border-top: 1px solid rgba(255, 255, 255, .08); color: #758a83; font-size: 11px; }
.yf-auth-footer div { display: flex; gap: 18px; }
.yf-auth-footer a,
.yf-auth-footer button { padding: 0; border: 0; color: #90a39d; background: transparent; font: inherit; text-decoration: none; cursor: pointer; }
.yf-auth-footer a:hover,
.yf-auth-footer button:hover { color: #edf4f1; }
.yf26-nav__actions { display: flex; align-items: center; justify-content: flex-end; justify-self: stretch; width: 100%; gap: 8px; }
.yf26-nav__login, .yf26-nav__register { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.yf26-nav__login { border: 1px solid rgba(255,255,255,.18); color: #f7f5ed; background: rgba(255,255,255,.04); }
.yf26-nav__login:hover { color: #fff; border-color: rgba(157,223,196,.42); background: rgba(157,223,196,.08); }
.yf26-nav__register { color: #0b241e; background: linear-gradient(135deg, #e7cf6c, #91ddc0); }
.yf26-nav__register:hover { color: #061a15; filter: brightness(1.04); }
@media (max-width: 820px) {
.yf-auth-shell { grid-template-columns: 1fr; width: min(600px, calc(100% - 32px)); min-height: auto; gap: 34px; padding: 38px 0 46px; }
.yf-auth-intro { max-width: none; }
.yf-auth-intro h1 { max-width: 600px; font-size: clamp(38px, 10vw, 56px); }
.yf-auth-intro ul { display: none; }
.yf-auth-header, .yf-auth-footer { width: calc(100% - 32px); }
}
@media (max-width: 560px) {
.yf-auth-header { min-height: 66px; }
.yf-auth-brand img { width: 132px; }
.yf-auth-back { font-size: 0; }
.yf-auth-back i { font-size: 18px; }
.yf-auth-shell { padding-top: 28px; }
.yf-auth-intro p { font-size: 15px; }
.yf-auth-card { padding: 24px 18px; border-radius: 18px; }
.yf-auth-form__columns { grid-template-columns: 1fr; }
.yf-password-requirements { grid-template-columns: 1fr; }
.yf-auth-footer { align-items: flex-start; flex-direction: column; padding: 20px 0; }
.yf-auth-footer div { flex-direction: column; gap: 7px; }
.yf26-nav__actions { gap: 5px; }
.yf26-nav__login, .yf26-nav__register { min-height: 36px; padding: 8px 10px; font-size: 11px; }
}
/* Account settings */
.yf-account-modal { border: 0; border-radius: 20px; color: #21302d; background: #f8faf9; overflow: hidden; }
.yf-account-modal .modal-header { align-items: flex-start; padding: 24px 28px 18px; border-bottom-color: #dce5e2; }
.yf-account-modal .modal-header .btn-close { margin: 1px 0 0; }
.yf-account-modal__eyebrow { color: #168166; font: 750 10px "IBM Plex Mono", monospace; text-transform: uppercase; }
.yf-account-modal .modal-title { margin-top: 3px; font-size: 23px; font-weight: 760; }
.yf-account-modal .modal-body { padding: 22px 28px 28px; }
.yf-account-identity { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: center; gap: 14px; margin-bottom: 20px; padding: 15px; border: 1px solid #dce5e2; border-radius: 14px; background: #fff; }
.yf-account-identity img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.yf-account-avatar-button { position: relative; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.yf-account-avatar-button > span { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #187b62; font-size: 10px; }
.yf-account-avatar-button:focus-visible { outline: 3px solid rgba(24,123,98,.25); outline-offset: 3px; }
.yf-account-identity > div { display: grid; gap: 3px; min-width: 0; }
.yf-account-identity strong { color: #172622; font-size: 15px; }
.yf-account-identity span { color: #72817d; font-size: 12px; overflow-wrap: anywhere; }
.yf-account-identity__status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; color: #62726d !important; background: #edf2f0; font-size: 11px !important; font-weight: 700; }
.yf-account-identity__status.is-linked { color: #0a795b !important; background: #e0f4ec; }
.yf-account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.yf-account-section--profile { grid-column: 1 / -1; min-height: 0; }
.yf-account-profile-layout { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 14px; }
.yf-account-profile-layout .yf-account-form { grid-template-columns: minmax(0,1fr) auto; align-items: end; }
.yf-account-profile-layout .yf-account-button { margin: 0; white-space: nowrap; }
.yf-account-avatar-actions { display: flex; gap: 8px; }
.yf-account-avatar-actions .yf-account-button { margin: 0; }
.yf-account-switch--telegram-avatar { margin-top: 18px; }
.yf-account-avatar-button > span i { color: #fff !important; }
.yf-account-switch--telegram-avatar.is-disabled { opacity: .62; }
.yf-inline-info { display: inline-grid; place-items: center; padding: 0; border: 0; color: #168166; background: transparent; font-size: 13px; vertical-align: middle; }
.yf-account-section { display: flex; flex-direction: column; min-height: 190px; padding: 17px; border: 1px solid #dce5e2; border-radius: 14px; background: #fff; }
.yf-account-section__head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.yf-account-section__head > i { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; color: #168166; background: #e6f5ef; font-size: 16px; }
.yf-account-section__head > div { display: grid; gap: 2px; }
.yf-account-section__head strong { color: #1d2d29; font-size: 14px; }
.yf-account-section__head span, .yf-account-section > p { color: #778681; font-size: 11px; line-height: 1.5; }
.yf-account-section > p { margin: 0 0 14px; }
.yf-account-form { display: grid; gap: 9px; }
.yf-account-form label { display: grid; gap: 5px; color: #677671; font-size: 10px; font-weight: 700; }
.yf-account-form input { width: 100%; min-height: 39px; padding: 8px 10px; border: 1px solid #d6e0dd; border-radius: 9px; outline: 0; color: #1b2d28; background: #fbfcfc; font: 500 12px Manrope, sans-serif; }
.yf-account-form input:focus { border-color: #6fc8aa; box-shadow: 0 0 0 3px rgba(65,166,132,.1); }
.yf-account-email-state { display: grid; gap: 10px; }
.yf-account-email-state > div { display: grid; gap: 3px; min-width: 0; padding: 10px 12px; border-radius: 9px; background: #f2f6f4; }
.yf-account-email-state small { color: #778681; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.yf-account-email-state strong { color: #263a34; font-size: 12px; overflow-wrap: anywhere; }
.yf-account-email-state .yf-account-button { margin: 0; }
.yf-account-email-change { margin-top: 11px; border-top: 1px solid #e2e9e6; }
.yf-account-email-change summary { padding: 10px 0 4px; color: #187b62; font-size: 10px; font-weight: 750; cursor: pointer; }
.yf-account-email-change[open] summary { margin-bottom: 6px; }
.yf-account-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 39px; margin-top: auto; padding: 8px 13px; border: 0; border-radius: 9px; color: #fff; background: #187b62; font: 750 11px Manrope, sans-serif; }
.yf-account-button:hover { background: #12644f; }
.yf-account-button:disabled { opacity: .5; cursor: not-allowed; }
.yf-account-button.is-secondary { border: 1px solid #cad8d4; color: #28423b; background: #f5f8f7; }
.yf-account-button.is-telegram { background: #278fcf; }
.yf-account-switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding: 12px; border-radius: 10px; background: #f2f6f4; }
.yf-account-profile-layout + .yf-account-switch--telegram-avatar { margin-top: 16px; }
.yf-account-switch > span { display: grid; gap: 3px; }
.yf-account-switch strong { color: #273b35; font-size: 11px; }
.yf-account-switch small { color: #778681; font-size: 9px; line-height: 1.4; }
.yf-account-switch input { flex: 0 0 auto; width: 36px; height: 20px; accent-color: #188267; }
.yf-account-linked { display: flex; align-items: center; gap: 11px; margin-top: auto; padding: 13px; border-radius: 10px; color: #14765d; background: #e7f7f1; }
.yf-account-linked > i { font-size: 22px; }
.yf-account-linked > div { display: grid; gap: 2px; }
.yf-account-linked strong { font-size: 12px; }
.yf-account-linked span { font-size: 10px; }
.yf-account-telegram-widget { min-height: 44px; margin-top: 8px; text-align: center; }
.yf-account-status { min-height: 18px; margin-top: 12px; color: #62726d; font-size: 11px; line-height: 1.5; }
.yf-account-status.is-success { padding: 10px 12px; border-radius: 9px; color: #14765d; background: #e5f5ef; }
.yf-account-status.is-error { padding: 10px 12px; border-radius: 9px; color: #b43d46; background: #ffedef; }
body.yf-dashboard-auth.dark-theme .yf-account-modal { color: #eaf1ee; background: #162522; }
body.yf-dashboard-auth.dark-theme .yf-account-modal .modal-header { border-bottom-color: rgba(255,255,255,.1); }
body.yf-dashboard-auth.dark-theme .yf-account-modal .modal-title,
body.yf-dashboard-auth.dark-theme .yf-account-identity strong,
body.yf-dashboard-auth.dark-theme .yf-account-section__head strong,
body.yf-dashboard-auth.dark-theme .yf-account-switch strong { color: #eef4f1; }
body.yf-dashboard-auth.dark-theme .yf-account-identity,
body.yf-dashboard-auth.dark-theme .yf-account-section { border-color: rgba(158,201,187,.14); background: #1b302b; }
body.yf-dashboard-auth.dark-theme .yf-account-identity span,
body.yf-dashboard-auth.dark-theme .yf-account-section__head span,
body.yf-dashboard-auth.dark-theme .yf-account-section > p { color: #a2b3ad; }
body.yf-dashboard-auth.dark-theme .yf-account-form input { border-color: rgba(158,201,187,.18); color: #f0f5f3; background: #13231f; }
body.yf-dashboard-auth.dark-theme .yf-account-email-state > div { background: #142722; }
body.yf-dashboard-auth.dark-theme .yf-account-email-state strong { color: #edf5f1; }
body.yf-dashboard-auth.dark-theme .yf-account-email-change { border-top-color: rgba(158,201,187,.14); }
body.yf-dashboard-auth.dark-theme .yf-account-switch { background: #142722; }
body.yf-dashboard-auth.dark-theme .yf-account-button.is-secondary { border-color: rgba(158,201,187,.2); color: #dbe8e3; background: #203832; }
body.yf-dashboard-auth.dark-theme .yf-account-avatar-button > span { border-color: #1b302b; }
.yf-avatar-editor { overflow: visible; }
.yf-avatar-editor__stage { position: relative; height: min(52vh, 430px); min-height: 280px; overflow: hidden; border: 1px solid #d7e2de; border-radius: 12px; background: #eaf0ee; }
.yf-avatar-editor__stage img { display: block; max-width: 100%; }
.yf-avatar-editor__empty { margin: 12px 0 0; color: #71817c; font-size: 12px; text-align: center; }
.yf-avatar-editor__tools { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 14px; }
.yf-avatar-editor__tools button { display: grid; place-items: center; min-height: 40px; border: 1px solid #cad9d4; border-radius: 8px; color: #285047; background: #f4f8f6; }
.yf-avatar-editor__tools button:hover { border-color: #45a48c; color: #0b7157; background: #e7f4ef; }
.yf-avatar-editor .cropper-view-box, .yf-avatar-editor .cropper-face { border-radius: 50%; }
.yf-avatar-editor .cropper-view-box { outline-color: rgba(32,145,111,.75); }
body.yf-dashboard-auth.dark-theme .yf-avatar-editor__stage { border-color: rgba(158,201,187,.2); background: #10201c; }
body.yf-dashboard-auth.dark-theme .yf-avatar-editor__tools button { border-color: rgba(158,201,187,.2); color: #dce9e5; background: #203832; }
@media (max-width: 900px) {
.yf-account-modal .modal-header { padding: 20px 18px 15px; }
.yf-account-modal .modal-body { padding: 17px 18px 22px; }
.yf-account-identity { grid-template-columns: 46px minmax(0,1fr); }
.yf-account-identity img { width: 46px; height: 46px; }
.yf-account-identity__status { grid-column: 1 / -1; justify-self: start; }
.yf-account-grid { grid-template-columns: 1fr; }
.yf-account-section { min-height: auto; }
.yf-account-profile-layout, .yf-account-profile-layout .yf-account-form { grid-template-columns: 1fr; }
.yf-account-avatar-actions { display: grid; grid-template-columns: 1fr 1fr; }
.yf-account-switch--telegram-avatar { margin-top: 18px; }
.yf-avatar-editor__tools { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
.yf-account-avatar-actions { grid-template-columns: 1fr; }
.yf-account-avatar-actions .yf-account-button { width: 100%; }
}
/* Contact page */
.yf-contact-body {
--yf-contact-bg: #0b1c19;
--yf-contact-surface: #122823;
--yf-contact-light: #f5f4ef;
--yf-contact-ink: #10201d;
--yf-contact-muted: #6d7772;
--yf-contact-mint: #9ddfc4;
--yf-contact-gold: #d6b45d;
min-height: 100vh;
margin: 0;
background: var(--yf-contact-bg);
color: #f8f4ea;
font-family: "Manrope", sans-serif;
}
.yf-contact-header {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 68px;
padding: 12px max(24px, calc((100vw - 1160px) / 2));
border-bottom: 1px solid rgba(255, 255, 255, .1);
background: rgba(11, 28, 25, .92);
backdrop-filter: blur(18px);
}
.yf-contact-brand img {
display: block;
width: 154px;
height: auto;
}
.yf-contact-back {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(248, 244, 234, .78);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: color .18s ease;
}
.yf-contact-back:hover,
.yf-contact-back:focus-visible {
color: var(--yf-contact-mint);
}
.yf-contact-main {
width: min(1160px, calc(100% - 48px));
margin: 0 auto;
padding: 88px 0 72px;
}
.yf-contact-hero {
max-width: 780px;
margin-bottom: 48px;
}
.yf-contact-eyebrow,
.yf-contact-card__label {
display: block;
margin-bottom: 16px;
color: var(--yf-contact-gold);
font-family: "IBM Plex Mono", monospace;
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
text-transform: uppercase;
}
.yf-contact-hero h1 {
max-width: 720px;
margin: 0 0 22px;
color: #f8f4ea;
font-size: clamp(42px, 5vw, 64px);
font-weight: 750;
line-height: 1.04;
letter-spacing: 0;
}
.yf-contact-hero p {
max-width: 690px;
margin: 0;
color: rgba(248, 244, 234, .67);
font-size: 17px;
line-height: 1.7;
}
.yf-contact-grid {
display: grid;
grid-template-columns: 1.12fr .88fr;
gap: 16px;
}
.yf-contact-card {
min-height: 390px;
padding: 36px;
border: 1px solid rgba(16, 32, 29, .12);
border-radius: 8px;
background: var(--yf-contact-light);
color: var(--yf-contact-ink);
}
.yf-contact-card--primary {
border-color: rgba(157, 223, 196, .25);
background: var(--yf-contact-surface);
color: #f8f4ea;
}
.yf-contact-card__icon {
display: grid;
width: 46px;
height: 46px;
margin-bottom: 38px;
place-items: center;
border-radius: 50%;
background: rgba(157, 223, 196, .16);
color: #63caa3;
font-size: 21px;
}
.yf-contact-card--primary .yf-contact-card__icon {
background: rgba(157, 223, 196, .12);
color: var(--yf-contact-mint);
}
.yf-contact-card h2 {
max-width: 520px;
margin: 0 0 14px;
font-size: clamp(25px, 2.5vw, 34px);
font-weight: 700;
line-height: 1.16;
letter-spacing: 0;
}
.yf-contact-card p {
max-width: 570px;
margin: 0 0 28px;
color: var(--yf-contact-muted);
font-size: 15px;
line-height: 1.65;
}
.yf-contact-card--primary p {
color: rgba(248, 244, 234, .66);
}
.yf-contact-telegram {
display: flex;
align-items: center;
gap: 14px;
width: min(100%, 380px);
padding: 14px 16px;
border: 1px solid rgba(157, 223, 196, .3);
border-radius: 8px;
background: rgba(157, 223, 196, .08);
color: #f8f4ea;
text-decoration: none;
transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}
.yf-contact-telegram:hover,
.yf-contact-telegram:focus-visible {
transform: translateY(-2px);
border-color: rgba(157, 223, 196, .62);
background: rgba(157, 223, 196, .13);
color: #fff;
}
.yf-contact-telegram > i:first-child {
color: var(--yf-contact-mint);
font-size: 22px;
}
.yf-contact-telegram > i:last-child {
margin-left: auto;
}
.yf-contact-telegram span {
display: grid;
gap: 2px;
}
.yf-contact-telegram small {
color: rgba(248, 244, 234, .55);
font-size: 11px;
}
.yf-contact-telegram strong {
font-size: 15px;
}
.yf-contact-details {
display: grid;
gap: 0;
margin: 34px 0 0;
}
.yf-contact-details div {
display: grid;
grid-template-columns: 130px 1fr;
gap: 22px;
padding: 17px 0;
border-top: 1px solid rgba(16, 32, 29, .12);
}
.yf-contact-details dt {
color: var(--yf-contact-muted);
font-size: 13px;
font-weight: 500;
}
.yf-contact-details dd {
margin: 0;
font-size: 14px;
font-weight: 650;
}
.yf-contact-support {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: 72px;
margin-top: 16px;
padding: 48px 40px;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 8px;
background: rgba(255, 255, 255, .025);
}
.yf-contact-support h2 {
margin: 0;
font-size: clamp(27px, 3vw, 40px);
line-height: 1.12;
letter-spacing: 0;
}
.yf-contact-support ul {
display: grid;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.yf-contact-support li {
display: grid;
grid-template-columns: 36px 1fr;
gap: 15px;
padding: 18px 0;
border-top: 1px solid rgba(255, 255, 255, .1);
color: rgba(248, 244, 234, .62);
font-size: 14px;
line-height: 1.55;
}
.yf-contact-support li:first-child {
padding-top: 0;
border-top: 0;
}
.yf-contact-support li i {
color: var(--yf-contact-mint);
font-size: 18px;
}
.yf-contact-support li span {
display: grid;
gap: 4px;
}
.yf-contact-support li strong {
color: #f8f4ea;
font-size: 15px;
}
.yf-contact-legal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
margin-top: 16px;
padding: 28px 32px;
border-radius: 8px;
background: var(--yf-contact-light);
color: var(--yf-contact-ink);
}
.yf-contact-legal > div {
display: grid;
gap: 4px;
}
.yf-contact-legal > div span {
color: var(--yf-contact-muted);
font-size: 12px;
}
.yf-contact-legal nav {
display: flex;
gap: 10px;
}
.yf-contact-legal a {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 11px 14px;
border: 1px solid rgba(16, 32, 29, .16);
border-radius: 8px;
color: var(--yf-contact-ink);
font-size: 13px;
font-weight: 650;
text-decoration: none;
transition: border-color .18s ease, background-color .18s ease;
}
.yf-contact-legal a:hover,
.yf-contact-legal a:focus-visible {
border-color: rgba(16, 98, 75, .42);
background: rgba(157, 223, 196, .18);
}
.yf-contact-footer {
display: flex;
justify-content: space-between;
gap: 24px;
width: min(1160px, calc(100% - 48px));
margin: 0 auto;
padding: 28px 0 38px;
border-top: 1px solid rgba(255, 255, 255, .1);
color: rgba(248, 244, 234, .48);
font-size: 12px;
}
@media (max-width: 820px) {
.yf-contact-main {
padding-top: 64px;
}
.yf-contact-grid,
.yf-contact-support {
grid-template-columns: 1fr;
}
.yf-contact-support {
gap: 36px;
}
.yf-contact-legal {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 560px) {
.yf-contact-header {
min-height: 60px;
padding-inline: 18px;
}
.yf-contact-brand img {
width: 132px;
}
.yf-contact-back {
font-size: 0;
}
.yf-contact-back i {
font-size: 19px;
}
.yf-contact-main,
.yf-contact-footer {
width: min(100% - 28px, 1160px);
}
.yf-contact-main {
padding: 52px 0 48px;
}
.yf-contact-hero {
margin-bottom: 34px;
}
.yf-contact-hero h1 {
font-size: 38px;
}
.yf-contact-hero p {
font-size: 15px;
}
.yf-contact-card,
.yf-contact-support {
min-height: 0;
padding: 26px 22px;
}
.yf-contact-card__icon {
margin-bottom: 28px;
}
.yf-contact-details div {
grid-template-columns: 1fr;
gap: 5px;
}
.yf-contact-legal {
padding: 24px 20px;
}
.yf-contact-legal nav {
width: 100%;
flex-direction: column;
}
.yf-contact-legal a {
justify-content: space-between;
}
.yf-contact-footer {
flex-direction: column;
gap: 8px;
}
}
/* Referral program */
.yf-referral-hero,
.yf-referral-payout,
.yf-referral-panel,
.yf-referral-info,
.yf-referral-history,
.yf-referral-apply,
.yf-referral-linked {
border: 1px solid rgba(16, 32, 29, .12);
background: #fff;
border-radius: 8px;
}
.yf-referral-hero,
.yf-referral-payout {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 18px 20px;
}
.yf-referral-hero > div:first-child,
.yf-referral-payout > div {
display: grid;
gap: 4px;
min-width: 0;
}
.yf-referral-hero span,
.yf-referral-payout span,
.yf-referral-stats span,
.yf-referral-stats small,
.yf-referral-muted {
color: #6d7772;
font-size: 13px;
}
.yf-referral-hero strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #10201d;
}
.yf-referral-actions { display: flex; gap: 8px; }
.yf-referral-actions .btn,
.yf-referral-payout .btn,
.yf-referral-apply .btn {
border: 0;
background: #167a62;
color: #fff;
font-weight: 700;
white-space: nowrap;
}
.yf-referral-actions .btn:first-child { background: #edf5f2; color: #145f4e; }
.yf-referral-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin: 12px 0;
}
.yf-referral-stats article {
display: grid;
gap: 3px;
min-height: 92px;
padding: 15px;
border: 1px solid rgba(16, 32, 29, .1);
border-radius: 8px;
background: #f7f9f8;
}
.yf-referral-stats strong { color: #10201d; font-size: 22px; }
.yf-referral-stats .is-ready { background: #eaf7f2; border-color: rgba(26, 141, 112, .28); }
.yf-referral-stats .is-ready strong { color: #167a62; }
.yf-referral-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 12px; margin-top: 12px; }
.yf-referral-panel { min-height: 250px; padding: 16px; }
.yf-referral-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.yf-referral-panel__head select { border: 1px solid rgba(16, 32, 29, .14); border-radius: 6px; padding: 6px 9px; background: transparent; }
.yf-referral-chart { width: 100%; height: 205px; }
.yf-referral-people { display: grid; max-height: 205px; overflow: auto; margin-top: 10px; }
.yf-referral-person { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(16, 32, 29, .08); }
.yf-referral-person > div { display: grid; min-width: 0; }
.yf-referral-person span { color: #6d7772; font-size: 12px; }
.yf-referral-info,
.yf-referral-history { margin-top: 12px; padding: 14px 16px; }
.yf-referral-info summary,
.yf-referral-history summary { cursor: pointer; font-weight: 700; color: #10201d; }
.yf-referral-info > div,
.yf-referral-history > div { padding-top: 12px; color: #59645f; }
.yf-referral-rules { display: grid; gap: 12px; }
.yf-referral-rule {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
align-items: start;
gap: 11px;
}
.yf-referral-rule__icon {
width: 38px;
aspect-ratio: 1;
display: inline-grid;
place-items: center;
border-radius: 50%;
color: #14765d;
background: #e6f5ef;
font-size: 15px;
line-height: 1;
}
.yf-referral-rule p { display: grid; gap: 3px; margin: 0; }
.yf-referral-rule p strong { color: #18322b; font-size: 14px; }
.yf-referral-rule p span { color: #65736e; font-size: 13px; line-height: 1.55; }
.yf-referral-example {
display: grid;
gap: 13px;
margin-top: 4px;
padding: 16px;
border: 1px solid rgba(32, 132, 101, .18);
border-radius: 8px;
background: #f3f8f6;
}
.yf-referral-example__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.yf-referral-example__head > span {
display: inline-flex;
align-items: center;
gap: 7px;
color: #173b31;
font-size: 14px;
font-weight: 750;
}
.yf-referral-example > p { margin: 0; color: #65736e; font-size: 13px; }
.yf-referral-example__math {
display: grid;
grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1.25fr);
align-items: center;
gap: 8px;
}
.yf-referral-example__math > span {
min-height: 64px;
display: grid;
align-content: center;
gap: 4px;
padding: 10px 12px;
border: 1px solid rgba(16, 32, 29, .09);
border-radius: 7px;
background: #fff;
}
.yf-referral-example__math > i { color: #80908a; text-align: center; }
.yf-referral-example__math small { color: #78857f; font-size: 10px; }
.yf-referral-example__math strong { color: #20342e; font: 650 16px/1.2 "IBM Plex Mono", monospace; white-space: nowrap; }
.yf-referral-example__math .is-total { border-color: rgba(33, 146, 112, .28); background: #e7f5f0; }
.yf-referral-example__math .is-total strong { color: #117158; }
.yf-referral-example__plans { display: flex; flex-wrap: wrap; gap: 7px; }
.yf-referral-multiplier {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border: 1px solid rgba(111, 123, 119, .22);
border-radius: 999px;
color: #59645f;
background: #edf1ef;
font-size: 12px;
line-height: 1;
white-space: nowrap;
}
.yf-referral-multiplier > span { display: inline-flex; align-items: center; gap: 5px; }
.yf-referral-multiplier b { font: 800 12px/1 "IBM Plex Mono", monospace; }
.yf-referral-multiplier strong { font: 700 13px/1 "IBM Plex Mono", monospace; }
.yf-referral-multiplier--current { min-height: 38px; padding: 9px 14px; font-size: 13px; font-weight: 800; }
.yf-referral-multiplier--free { color: #4f5b57; border-color: rgba(99, 112, 107, .28); background: #e8eeeb; }
.yf-referral-multiplier--premium { color: #66500f; border-color: rgba(190, 145, 25, .32); background: #f5e3a2; }
.yf-referral-multiplier--business { color: #075d46; border-color: rgba(25, 137, 103, .3); background: #d5f0e5; }
.yf-referral-multiplier--founder { color: #812a31; border-color: rgba(176, 57, 67, .28); background: #f4dade; }
.yf-referral-history > div > div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(16, 32, 29, .08); }
.yf-referral-apply { display: flex; gap: 8px; padding: 10px; margin-top: 12px; }
.yf-referral-apply input { flex: 1; min-width: 0; border: 1px solid rgba(16, 32, 29, .14); border-radius: 6px; padding: 9px 11px; }
.yf-referral-linked { display: inline-flex; align-items: center; gap: 7px; width: fit-content; margin-top: 12px; padding: 8px 11px; color: #167a62; background: #edf7f3; }
.yf-referral-landing { display: grid; gap: 20px; }
.yf-referral-landing__head { display: grid; gap: 10px; }
.yf-referral-landing h2 { max-width: 460px; margin: 0; color: #f7f5ed; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; font-weight: 760; }
.yf-referral-landing__head > p { margin: 0; color: #b8c7c1; font-size: 15px; line-height: 1.6; }
.yf-referral-landing__head > p strong { color: #f7f5ed; }
.yf-referral-benefit {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
align-items: center;
gap: 14px;
padding: 16px;
border: 1px solid rgba(157, 223, 196, .22);
border-radius: 14px;
background: rgba(157, 223, 196, .075);
}
.yf-referral-benefit__icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 12px;
color: #f0d978;
background: rgba(240, 217, 120, .12);
font-size: 20px;
}
.yf-referral-benefit div { display: grid; gap: 4px; min-width: 0; }
.yf-referral-benefit strong { color: #f7f5ed; font-size: 14px; line-height: 1.35; }
.yf-referral-benefit div span { color: #9fb1aa; font-size: 12px; line-height: 1.5; }
.yf-referral-landing__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.yf-referral-landing__actions a { min-width: 0; text-decoration: none; }
.yf-referral-landing__primary { width: 100%; }
.yf-referral-landing__secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 49px;
padding: 11px 16px;
border: 1px solid rgba(157, 223, 196, .25);
border-radius: 11px;
color: #dce9e4;
background: rgba(255, 255, 255, .035);
font: 700 13px/1.2 Manrope, sans-serif;
transition: border-color 150ms, background-color 150ms, transform 150ms;
}
.yf-referral-landing__secondary:hover,
.yf-referral-landing__secondary:focus-visible { color: #fff; border-color: rgba(157, 223, 196, .5); background: rgba(157, 223, 196, .09); transform: translateY(-1px); }
.yf-referral-code {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
align-items: center;
gap: 11px;
padding: 13px 14px;
border-top: 1px solid rgba(255, 255, 255, .09);
}
.yf-referral-code > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #9ddfc4; background: rgba(157, 223, 196, .09); }
.yf-referral-code p { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 0; min-width: 0; }
.yf-referral-code span { color: #dce8e3; font-size: 12px; font-weight: 650; }
.yf-referral-code strong { color: #f0d978; font: 600 12px/1.4 "IBM Plex Mono", monospace; overflow-wrap: anywhere; }
.yf-referral-code small { grid-column: 1 / -1; color: #82978f; font-size: 11px; }
@media (max-width: 560px) {
.yf-referral-landing { gap: 17px; }
.yf-referral-landing__actions { grid-template-columns: 1fr; }
.yf-referral-code p { grid-template-columns: 1fr; }
.yf-referral-code small { grid-column: auto; }
}
body.yf-dashboard-auth.dark-theme .yf-referral-hero,
body.yf-dashboard-auth.dark-theme .yf-referral-payout,
body.yf-dashboard-auth.dark-theme .yf-referral-panel,
body.yf-dashboard-auth.dark-theme .yf-referral-info,
body.yf-dashboard-auth.dark-theme .yf-referral-history,
body.yf-dashboard-auth.dark-theme .yf-referral-apply,
body.yf-dashboard-auth.dark-theme .yf-referral-linked,
body.yf-dashboard-auth.dark-theme .yf-referral-stats article {
color: #dce8e4;
border-color: rgba(185, 211, 202, .14);
background: #152624;
}
body.yf-dashboard-auth.dark-theme .yf-referral-hero strong,
body.yf-dashboard-auth.dark-theme .yf-referral-stats strong,
body.yf-dashboard-auth.dark-theme .yf-referral-info summary,
body.yf-dashboard-auth.dark-theme .yf-referral-history summary { color: #edf5f2; }
body.yf-dashboard-auth.dark-theme .yf-referral-stats .is-ready { background: #12342d; }
body.yf-dashboard-auth.dark-theme .yf-referral-apply input,
body.yf-dashboard-auth.dark-theme .yf-referral-panel__head select { color: #edf5f2; border-color: rgba(185, 211, 202, .18); background: #10201e; }
body.yf-dashboard-auth.dark-theme .yf-referral-rule p strong,
body.yf-dashboard-auth.dark-theme .yf-referral-example__head > span,
body.yf-dashboard-auth.dark-theme .yf-referral-example__math strong { color: #eef6f3; }
body.yf-dashboard-auth.dark-theme .yf-referral-rule p span,
body.yf-dashboard-auth.dark-theme .yf-referral-example > p { color: #a9bbb4; }
body.yf-dashboard-auth.dark-theme .yf-referral-rule__icon { color: #8bd9bc; background: rgba(89, 190, 153, .12); }
body.yf-dashboard-auth.dark-theme .yf-referral-example { border-color: rgba(112, 205, 170, .18); background: #132825; }
body.yf-dashboard-auth.dark-theme .yf-referral-example__math > span { border-color: rgba(194, 219, 210, .12); background: #192e2a; }
body.yf-dashboard-auth.dark-theme .yf-referral-example__math .is-total { border-color: rgba(91, 204, 162, .25); background: #16352e; }
body.yf-dashboard-auth.dark-theme .yf-referral-example__math .is-total strong { color: #87ddbc; }
body.yf-dashboard-auth.dark-theme .yf-referral-multiplier--free { color: #d4ddda; border-color: rgba(210, 221, 217, .2); background: #2b3733; }
body.yf-dashboard-auth.dark-theme .yf-referral-multiplier--premium { color: #f0d576; border-color: rgba(225, 188, 67, .28); background: rgba(206, 164, 43, .14); }
body.yf-dashboard-auth.dark-theme .yf-referral-multiplier--business { color: #8ce0c0; border-color: rgba(79, 195, 151, .27); background: rgba(43, 148, 109, .16); }
body.yf-dashboard-auth.dark-theme .yf-referral-multiplier--founder { color: #f0a0a7; border-color: rgba(214, 91, 100, .28); background: rgba(175, 54, 64, .18); }
@media (max-width: 767px) {
.yf-referral-hero,
.yf-referral-payout { align-items: stretch; flex-direction: column; }
.yf-referral-actions { display: grid; grid-template-columns: 1fr 1fr; }
.yf-referral-stats { grid-template-columns: 1fr 1fr; }
.yf-referral-grid { grid-template-columns: 1fr; }
.yf-referral-person { grid-template-columns: minmax(0, 1fr) auto; }
.yf-referral-person > span { display: none; }
.yf-referral-example__head { align-items: flex-start; flex-direction: column; }
.yf-referral-example__math { grid-template-columns: 1fr; }
.yf-referral-example__math > i { transform: rotate(90deg); }
.yf-referral-example__plans { display: grid; grid-template-columns: 1fr; }
.yf-referral-multiplier { justify-content: space-between; min-height: 34px; }
}
/* Unified asset management */
.yf-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.yf-card-title-row .card-title { margin-bottom: 0; }
.yf-card-title-row + .card-subtitle { margin-top: 8px; }
.yf-card-action {
display: inline-grid;
place-items: center;
width: 32px;
height: 32px;
flex: 0 0 32px;
border: 1px solid rgba(26, 141, 112, .25);
border-radius: 50%;
background: rgba(26, 141, 112, .08);
color: #167a62;
transition: transform .16s ease, background-color .16s ease;
}
.yf-card-action:hover { transform: translateY(-1px); background: rgba(26, 141, 112, .16); }
.yf-manage-modal { border: 1px solid rgba(16, 32, 29, .12) !important; border-radius: 12px !important; overflow: hidden; }
.yf-manage-modal .modal-header { align-items: flex-start; padding: 20px 22px; }
.yf-manage-modal .modal-title { margin-top: 2px; color: #10201d; font-size: 21px; font-weight: 750; }
.yf-manage-modal__eyebrow { color: #167a62; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.yf-manage-modal__intro { color: #6d7772; }
.yf-manage-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.yf-manage-form-grid label,
.yf-asset-create label,
.yf-asset-edit label { display: grid; gap: 6px; color: #52615c; font-size: 13px; }
.yf-manage-form-grid .is-wide { grid-column: 1 / -1; }
.yf-manage-form-grid input,
.yf-asset-create input,
.yf-asset-edit input { width: 100%; min-width: 0; height: 42px; padding: 8px 11px; border: 1px solid rgba(16, 32, 29, .14); border-radius: 7px; color: #10201d; background: #fff; }
.yf-money-input { position: relative; }
.yf-money-input input { padding-right: 34px; }
.yf-money-input b { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: #77827d; }
.yf-money-input--calculator {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
align-items: stretch;
}
.yf-money-input--calculator .yf-calculator-trigger {
position: static;
width: 42px;
height: 42px;
border: 1px solid rgba(16, 32, 29, .14);
border-right: 0;
border-radius: 7px 0 0 7px;
color: #167a62;
background: #eef7f3;
}
.yf-money-input--calculator input {
height: 42px;
border-radius: 0 7px 7px 0 !important;
}
.yf-money-input--calculator b { right: 12px; }
.yf-manage-primary { border: 0 !important; background: #167a62 !important; color: #fff !important; font-weight: 700 !important; }
.yf-manage-danger { border: 1px solid rgba(197, 73, 80, .2) !important; color: #b94149 !important; background: rgba(197, 73, 80, .06) !important; }
.yf-manage-status { min-height: 20px; margin-top: 12px; font-size: 13px; }
.yf-manage-status.is-success { color: #167a62; }
.yf-manage-status.is-error { color: #b94149; }
.yf-manage-tabs { display: inline-flex; padding: 4px; margin-bottom: 16px; border: 1px solid rgba(16, 32, 29, .1); border-radius: 8px; background: #f2f6f4; }
.yf-manage-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 0; border-radius: 6px; color: #66736e; background: transparent; }
.yf-manage-tabs button.is-active { color: #fff; background: #167a62; }
.yf-asset-create { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: end; gap: 10px; padding: 14px; margin-bottom: 14px; border: 1px solid rgba(16, 32, 29, .1); border-radius: 8px; background: #f7f9f8; }
.yf-asset-create--investment { grid-template-columns: 1.2fr .55fr .8fr 1fr auto; }
.yf-asset-create > button { height: 42px; }
.yf-asset-list { display: grid; gap: 8px; }
.yf-asset-row { border: 1px solid rgba(16, 32, 29, .1); border-radius: 8px; background: #fff; overflow: hidden; }
.yf-asset-row summary { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.yf-asset-row summary::-webkit-details-marker { display: none; }
.yf-asset-row summary > div { display: grid; gap: 2px; }
.yf-asset-row summary span { color: #6d7772; font-size: 12px; }
.yf-asset-row__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #167a62 !important; background: #e7f5ef; }
.yf-asset-row[open] summary > .bi-chevron-down { transform: rotate(180deg); }
.yf-asset-edit { display: grid; grid-template-columns: 1.4fr 1fr auto; align-items: end; gap: 10px; padding: 14px; border-top: 1px solid rgba(16, 32, 29, .08); background: #f8faf9; }
.yf-asset-edit--investment { grid-template-columns: 1.1fr .6fr .8fr 1fr auto; }
.yf-asset-edit > div { display: flex; gap: 7px; }
.yf-asset-edit > div > .btn { height: 42px; }
.yf-asset-empty { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 90px; color: #7a8681; border: 1px dashed rgba(16, 32, 29, .16); border-radius: 8px; }
.yf-inline-asset-icon { display: inline-grid; place-items: center; width: 20px; margin-right: 7px; color: #167a62; }
body.yf-dashboard-auth.dark-theme .yf-manage-modal,
body.yf-dashboard-auth.dark-theme .yf-asset-row { color: #dce8e4; border-color: rgba(185, 211, 202, .14) !important; background: #152624; }
body.yf-dashboard-auth.dark-theme .yf-manage-modal .modal-title,
body.yf-dashboard-auth.dark-theme .yf-asset-row strong { color: #edf5f2; }
body.yf-dashboard-auth.dark-theme .yf-manage-form-grid input,
body.yf-dashboard-auth.dark-theme .yf-asset-create input,
body.yf-dashboard-auth.dark-theme .yf-asset-edit input { color: #edf5f2; border-color: rgba(185, 211, 202, .16); background: #10201e; }
body.yf-dashboard-auth.dark-theme .yf-asset-create,
body.yf-dashboard-auth.dark-theme .yf-asset-edit,
body.yf-dashboard-auth.dark-theme .yf-manage-tabs { border-color: rgba(185, 211, 202, .12); background: #10201e; }
body.yf-dashboard-auth.dark-theme .yf-money-input--calculator .yf-calculator-trigger {
color: #70d8b7;
border-color: rgba(185, 211, 202, .16);
background: #18302c;
}
@media (max-width: 767px) {
.yf-manage-form-grid,
.yf-asset-create,
.yf-asset-create--investment,
.yf-asset-edit,
.yf-asset-edit--investment { grid-template-columns: 1fr; }
.yf-manage-form-grid .is-wide { grid-column: auto; }
}
.yf-plan-sale,
.yf26-sale {
display: flex;
align-items: center;
gap: 9px;
margin: 8px 0 2px;
}
.yf-plan-sale span,
.yf26-sale b {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 8px;
border-radius: 4px;
background: #dff3ed;
color: #16765f;
font-size: 12px;
font-weight: 800;
}
.yf-plan-sale del,
.yf26-sale del {
color: #84908d;
font-size: 14px;
}
.yf-plan-countdown,
.yf26-sale-countdown {
display: block;
margin: 5px 0 0;
color: #168a70;
font-size: 12px;
font-weight: 650;
}
.yf-plan-countdown.is-ended,
.yf26-sale-countdown.is-ended { color: #7d8885; }
.dark-theme .yf-plan-sale span,
.dark-theme .yf26-sale b {
background: rgba(92, 196, 168, .14);
color: #80d7bf;
}
.dark-theme .yf-plan-countdown,
.dark-theme .yf26-sale-countdown { color: #80d7bf; }
/* Demo, operation editor and analytics refinements */
.yf-account-section--weekly { grid-column: 1 / -1; min-height: auto; }
.yf-account-section--telegram { order: 4; }
.yf-account-section--newsletter { order: 5; grid-column: 1 / -1; min-height: auto; }
.yf-account-section--weekly { order: 6; }
.yf-account-section--weekly .yf-weekly-report-form {
grid-template-columns: 1fr;
gap: 12px;
}
.yf-account-section--weekly .yf-account-switch {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
min-height: 42px;
margin: 0;
}
.yf-account-section--weekly .yf-account-switch > span { min-width: 0; }
.yf-account-section--weekly .yf-account-switch input[type="checkbox"] {
appearance: auto;
justify-self: end;
flex: 0 0 auto;
width: 36px;
min-width: 36px;
height: 20px;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
box-shadow: none;
accent-color: #188267;
}
.yf-account-section--weekly .yf-weekly-report-form__grid {
grid-template-columns: minmax(150px, .8fr) minmax(120px, .65fr) minmax(220px, 1.4fr);
}
.yf-weekly-report-form__actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.yf-account-legal-link {
display: inline-flex;
margin-top: 10px;
color: #19795f;
font-size: 12px;
text-decoration: none;
}
.yf-account-legal-link:hover { text-decoration: underline; }
.yf-account-section--weekly .yf-account-button { flex: 0 0 auto; min-width: 190px; margin: 0; }
.yf-account-section--weekly .yf-weekly-report-next { min-width: 0; }
.yf-entry-editor {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: end;
padding: 12px 0;
border-bottom: 1px solid rgba(16, 32, 29, .09);
}
.yf-entry-editor:last-child { border-bottom: 0; }
.yf-entry-editor__fields { display: grid; grid-template-columns: minmax(130px, .75fr) minmax(180px, 1.4fr) minmax(140px, .75fr); gap: 10px; }
.yf-entry-editor__fields label { display: grid; gap: 5px; min-width: 0; color: #697772; font-size: 11px; font-weight: 700; }
.yf-entry-editor__fields .form-control { min-width: 0; }
.yf-entry-editor__actions { display: flex; gap: 7px; padding-bottom: 1px; }
.yf-amount-input {
display: flex;
min-width: 0;
}
.yf-amount-input .form-control {
flex: 1 1 auto;
width: 100%;
border-left: 0 !important;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.yf-calculator-trigger {
display: grid;
place-items: center;
flex: 0 0 40px;
width: 40px;
border: 1px solid rgba(21, 74, 61, .16);
border-right: 0;
border-radius: 7px 0 0 7px;
color: #19785f;
background: #edf7f3;
}
.yf-calculator-trigger:hover,
.yf-calculator-trigger:focus-visible { color: #0e614b; background: #dff2ea; outline: 0; }
.yf-calculator {
position: fixed;
z-index: 1095;
width: min(310px, calc(100vw - 24px));
padding: 14px;
border: 1px solid rgba(23, 119, 94, .24);
border-radius: 10px;
color: #20312d;
background: #fff;
box-shadow: 0 18px 48px rgba(15, 52, 43, .22);
}
.yf-calculator.is-positioning { visibility: hidden; }
.yf-calculator__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.yf-calculator__head strong { font-size: .86rem; }
.yf-calculator__head button { width: 30px; height: 30px; border: 0; color: #65756f; background: transparent; }
.yf-calculator__display {
width: 100%;
min-height: 44px;
padding: 9px 11px;
border: 1px solid rgba(21, 74, 61, .16);
border-radius: 7px;
color: #172824;
background: #f7faf9;
font: 700 1rem/1.2 "IBM Plex Mono", monospace;
text-align: right;
}
.yf-calculator__status { min-height: 18px; padding: 4px 1px 2px; color: #71817b; font-size: .68rem; }
.yf-calculator__status.is-error { color: #b43c47; }
.yf-calculator__keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.yf-calculator__keys button,
.yf-calculator__insert {
min-height: 38px;
border: 1px solid rgba(21, 74, 61, .13);
border-radius: 7px;
color: #233a34;
background: #f2f7f5;
font-weight: 700;
}
.yf-calculator__keys button:hover { background: #e3f2ec; }
.yf-calculator__keys .is-wide { grid-column: span 2; }
.yf-calculator__insert { width: 100%; margin-top: 9px; border-color: #208568; color: #fff; background: #208568; }
.yf-calculator__insert:hover { background: #176d55; }
.yf-entry-action {
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid rgba(27, 125, 99, .2);
border-radius: 8px;
color: #17775e;
background: rgba(40, 158, 124, .08);
}
.yf-entry-action:hover,
.yf-entry-action:focus-visible { color: #0e614b; background: rgba(40, 158, 124, .16); outline: none; }
.yf-entry-action--danger { color: #bd4750; border-color: rgba(197, 73, 80, .2); background: rgba(197, 73, 80, .07); }
.yf-entry-action--danger:hover,
.yf-entry-action--danger:focus-visible { color: #99353d; background: rgba(197, 73, 80, .14); }
.yf-bank-account-icon {
display: inline-grid;
place-items: center;
width: 18px;
height: 18px;
margin-right: 7px;
border-radius: 50%;
color: #fff;
background: #82a1e2;
font-size: 10px;
vertical-align: -2px;
}
.yf-finance-article__coin { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.yf-finance-article__market { margin-left: 5px; font-size: .78rem; }
.yf-asset-row__icon--coin { overflow: hidden; background: #f3f6f5; }
.yf-asset-row__icon--coin img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
body.yf-demo-mode .yf-card-action { display: inline-grid !important; }
body.yf-dashboard-auth.dark-theme .finance-analytics-kpi-column { border-left-color: rgba(194, 217, 209, .12); }
body.yf-dashboard-auth.dark-theme .finance-analytics-kpi-column:first-child { border-left: 0; }
body.yf-dashboard-auth.dark-theme .finance-analytics-kpi-column__title { color: #8fa49d; }
body.yf-dashboard-auth.dark-theme .finance-analytics-kpi__note { color: #91a39d; }
body.yf-dashboard-auth.dark-theme .yf-entry-editor { border-bottom-color: rgba(185, 211, 202, .12); }
body.yf-dashboard-auth.dark-theme .yf-entry-editor__fields label { color: #9eb0aa; }
body.yf-dashboard-auth.dark-theme .yf-entry-action { color: #8ed6bf; border-color: rgba(126, 205, 181, .2); background: rgba(76, 164, 137, .12); }
body.yf-dashboard-auth.dark-theme .yf-calculator-trigger { border-color: rgba(185, 211, 202, .14); color: #8ed6bf; background: #243532; }
body.yf-dashboard-auth.dark-theme .yf-calculator { border-color: rgba(185, 211, 202, .16); color: #edf6f3; background: #1c2927; box-shadow: 0 18px 48px rgba(0, 0, 0, .38); }
body.yf-dashboard-auth.dark-theme .yf-calculator__display,
body.yf-dashboard-auth.dark-theme .yf-calculator__keys button { border-color: rgba(185, 211, 202, .14); color: #edf6f3; background: #253330; }
@media (max-width: 1100px) {
.yf-account-section--weekly .yf-weekly-report-form__grid { grid-template-columns: 1fr 1fr; }
.yf-account-section--weekly .yf-weekly-report-form__grid label:last-child { grid-column: 1 / -1; }
}
@media (max-width: 991.98px) {
body.yf-dashboard-auth.dark-theme .finance-analytics-kpi-column:nth-child(odd) { border-left: 0; }
}
@media (max-width: 575.98px) {
.yf-account-section--weekly .yf-weekly-report-form__grid { grid-template-columns: 1fr; }
.yf-account-section--weekly .yf-weekly-report-form__grid label:last-child { grid-column: auto; }
.yf-weekly-report-form__actions { align-items: stretch; flex-direction: column; }
.yf-account-section--weekly .yf-account-button { width: 100%; min-width: 0; }
.yf-entry-editor { grid-template-columns: 1fr; gap: 9px; }
.yf-entry-editor__fields { grid-template-columns: 1fr; }
.yf-entry-editor__actions { justify-content: flex-end; }
.yf-entry-action { width: 44px; height: 40px; }
.yf-finance-article__market { display: block; margin: 4px 0 0 25px; }
}
@media (min-width: 576px) and (max-width: 900px) {
.yf-entry-editor__fields { grid-template-columns: 1fr 1fr; }
.yf-entry-editor__date { grid-column: 1 / -1; }
}
.yf26-actions .yf26-button--demo {
color: #effbf6 !important;
border-color: rgba(157, 223, 196, .48) !important;
background: rgba(255, 255, 255, .055) !important;
}
.yf26-actions .yf26-button--demo:hover,
.yf26-actions .yf26-button--demo:focus-visible {
color: #0b211b !important;
border-color: #9ddfc4 !important;
background: #9ddfc4 !important;
}
/* Finance dashboard responsive controls and focused transaction forms. */
.yf-period-picker {
display: grid;
grid-template-columns: minmax(0, 1.65fr) minmax(96px, 1fr);
gap: 12px;
}
.yf-period-picker__field {
min-width: 0;
}
.yf-period-picker__field .form-label {
margin-bottom: 6px;
}
.expense-tags-shell--mobile,
.income-tags-shell--mobile {
display: none;
}
.expense-tags-shell--wide .expense-tags-page {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(3, minmax(24px, auto));
}
.income-tags-shell--wide .income-tags-page {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(24px, auto));
}
.investment-item .yf-finance-article__market {
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.expense-budget-inline .card-title {
width: 100%;
text-align: center;
}
.yf-net-assets-rail[role="slider"] {
cursor: grab;
touch-action: pan-y;
user-select: none;
}
.yf-net-assets-rail[role="slider"]::before {
content: "";
position: absolute;
inset: -12px 0;
}
.yf-net-assets-rail[role="slider"]:focus-visible {
outline: 3px solid rgba(47, 128, 237, .2);
outline-offset: 5px;
}
.yf-net-assets-rail[role="slider"].is-dragging {
cursor: grabbing;
}
.yf-net-assets-rail[role="slider"].is-dragging > span::after {
transform: translate(50%, -50%) scale(1.12);
box-shadow: 0 4px 18px rgba(16, 32, 29, .26);
}
.yf-net-assets-rail[role="slider"].is-disabled {
cursor: default;
opacity: .72;
}
.yf-finance-form-dialog {
width: min(540px, calc(100% - 24px));
max-width: 540px;
margin-right: auto;
margin-left: auto;
}
.yf-finance-form-dialog--wide {
width: min(820px, calc(100% - 24px));
max-width: 820px;
}
.yf-finance-form-dialog .modal-content {
overflow: hidden;
border: 1px solid rgba(25, 92, 73, .15);
border-radius: 10px;
background: #fbfdfc;
box-shadow: 0 28px 80px rgba(13, 42, 34, .22);
}
.yf-finance-form-dialog .modal-content.yf-select-open,
.yf-finance-form-dialog .modal-content.yf-select-open .modal-body {
overflow: visible;
}
.yf-finance-form-dialog .modal-content.yf-select-open .modal-body {
position: relative;
z-index: 4;
}
.yf-finance-form-dialog .modal-header {
min-height: 76px;
padding: 16px 20px;
border-bottom-color: rgba(25, 92, 73, .1);
background: linear-gradient(135deg, rgba(54, 177, 139, .075), rgba(255, 255, 255, 0) 58%);
}
.yf-finance-modal-heading {
min-width: 0;
display: flex;
align-items: center;
gap: 12px;
}
.yf-finance-modal-heading__icon {
display: inline-grid;
place-items: center;
flex: 0 0 40px;
width: 40px;
height: 40px;
border-radius: 50%;
color: #24775f;
background: rgba(74, 181, 149, .12);
}
.yf-finance-modal-heading__icon--expense {
color: #b84e56;
background: rgba(202, 79, 87, .1);
}
.yf-finance-modal-heading__icon--plan {
color: #2f6f9e;
background: rgba(69, 143, 195, .1);
}
.yf-finance-modal-heading > div {
min-width: 0;
display: grid;
gap: 2px;
}
.yf-finance-modal-heading > div > span {
color: #73827d;
font-size: .67rem;
font-weight: 750;
}
.yf-finance-modal-heading .modal-title {
margin: 0;
color: #1d312b;
font-size: 1.05rem;
font-weight: 780;
}
.yf-finance-form {
padding: 18px 20px;
}
.yf-finance-form .mb-3 {
display: grid;
gap: 7px;
margin-bottom: 14px !important;
}
.yf-finance-form .form-label {
margin: 0;
color: #51645e;
font-size: .74rem;
font-weight: 700;
}
.yf-finance-form .form-control,
.yf-finance-form .form-select,
.yf-finance-form .custom-select .selected {
min-height: 44px;
border-color: rgba(25, 92, 73, .16);
border-radius: 7px;
background-color: #fff;
}
.yf-finance-form .custom-select {
display: block;
align-self: stretch;
}
.yf-finance-form .custom-select .selected {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 9px 12px;
}
.yf-finance-form .custom-select.is-open {
z-index: 1085;
}
.yf-finance-form__footer {
position: relative;
z-index: 1;
}
.yf-finance-form .form-control:focus,
.yf-finance-form .form-select:focus,
.yf-finance-form .custom-select.is-open .selected {
border-color: rgba(45, 166, 129, .58);
box-shadow: 0 0 0 3px rgba(45, 166, 129, .1);
}
.yf-income-plan-tag-select .selected {
justify-content: space-between;
border: 1px solid rgba(25, 92, 73, .16);
color: #344b44;
text-align: left;
}
.yf-income-plan-tag-value,
.yf-income-plan-tag-option {
min-width: 0;
}
.yf-income-plan-tag-value {
display: inline-flex;
align-items: center;
gap: 9px;
}
.yf-income-plan-tag-value .bi-circle-fill,
.yf-income-plan-tag-option .bi-circle-fill {
flex: 0 0 auto;
font-size: 12px;
}
.yf-income-plan-tag-value span,
.yf-income-plan-tag-option span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.yf-income-plan-tag-option {
width: 100%;
border: 0;
background: transparent;
color: #30463f;
text-align: left;
}
.yf-income-plan-tag-option:hover,
.yf-income-plan-tag-option:focus-visible,
.yf-income-plan-tag-option.is-selected {
background: #edf7f3;
color: #126c50;
outline: none;
}
.yf-finance-form__intro {
margin: 0 0 16px;
padding: 10px 12px;
border-left: 3px solid #4ab595;
border-radius: 0 6px 6px 0;
color: #65756f;
background: rgba(74, 181, 149, .06);
font-size: .76rem;
line-height: 1.5;
}
.yf-finance-plan-list {
padding: 14px;
border: 1px solid rgba(25, 92, 73, .1);
border-radius: 8px;
background: #f6faf8;
}
.yf-finance-plan-list .income-plan-modal-row {
margin: 0 !important;
padding: 10px 0;
}
.yf-finance-plan-list .income-plan-modal-row:first-child { padding-top: 2px; }
.yf-finance-plan-list .income-plan-modal-row:last-child { padding-bottom: 2px; }
.yf-finance-plan-list .delete-income-plan {
display: inline-grid;
width: 36px;
height: 36px;
place-items: center;
border: 1px solid rgba(190, 73, 78, .22);
border-radius: 7px;
background: #fff4f4;
color: #b54d52;
box-shadow: none;
transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}
.yf-finance-plan-list .delete-income-plan:hover,
.yf-finance-plan-list .delete-income-plan:focus-visible {
border-color: rgba(190, 73, 78, .42);
background: #fce7e8;
color: #97383e;
outline: none;
transform: translateY(-1px);
}
.yf-finance-form__footer {
gap: 8px;
padding: 13px 20px 17px;
border-top-color: rgba(25, 92, 73, .1);
background: #f7faf9;
}
.yf-finance-form__footer .btn {
min-height: 40px;
margin: 0;
border-radius: 7px;
font-size: .78rem;
font-weight: 700;
}
.yf-finance-form__footer .yf-finance-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border-width: 1px;
box-shadow: none;
transition: border-color .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease;
}
.yf-finance-action--secondary {
border-color: rgba(65, 86, 79, .2);
background: #eef3f1;
color: #52635e;
}
.yf-finance-action--secondary:hover,
.yf-finance-action--secondary:focus-visible {
border-color: rgba(65, 86, 79, .32);
background: #e3ebe8;
color: #344a43;
}
.yf-finance-action--update {
border-color: rgba(26, 132, 99, .34);
background: #fff;
color: #177b5d;
}
.yf-finance-action--primary {
border-color: #1a8564;
background: #1a8564;
color: #fff;
}
.yf-finance-action--primary:hover,
.yf-finance-action--primary:focus {
border-color: #126c50;
background: #126c50;
color: #fff;
}
.yf-finance-action--update:hover:not(:disabled),
.yf-finance-action--update:focus:not(:disabled) {
border-color: #1a8564;
background: #eaf7f2;
color: #126c50;
}
.yf-finance-action:disabled,
.yf-finance-action.disabled {
border-color: rgba(91, 108, 102, .14);
background: #edf1ef;
color: #9aa7a2;
opacity: 1;
cursor: not-allowed;
}
body.yf-dashboard-auth.dark-theme .yf-finance-form-dialog .modal-content {
border-color: rgba(148, 205, 188, .14);
background: #1c2529;
}
body.yf-dashboard-auth.dark-theme .yf-finance-form-dialog .modal-header {
border-bottom-color: rgba(183, 215, 206, .1);
background: linear-gradient(135deg, rgba(68, 151, 128, .12), rgba(28, 37, 41, 0) 62%);
}
body.yf-dashboard-auth.dark-theme .yf-finance-modal-heading .modal-title {
color: #edf5f2;
}
body.yf-dashboard-auth.dark-theme .yf-finance-modal-heading > div > span,
body.yf-dashboard-auth.dark-theme .yf-finance-form .form-label,
body.yf-dashboard-auth.dark-theme .yf-finance-form__intro {
color: #a6b8b2;
}
body.yf-dashboard-auth.dark-theme .yf-finance-form__intro,
body.yf-dashboard-auth.dark-theme .yf-finance-plan-list {
background: rgba(74, 181, 149, .07);
}
body.yf-dashboard-auth.dark-theme .yf-finance-plan-list {
border-color: rgba(183, 215, 206, .1);
}
body.yf-dashboard-auth.dark-theme .yf-income-plan-tag-select .selected,
body.yf-dashboard-auth.dark-theme .yf-income-plan-tag-option {
color: #d8e5e1;
}
body.yf-dashboard-auth.dark-theme .yf-income-plan-tag-option:hover,
body.yf-dashboard-auth.dark-theme .yf-income-plan-tag-option:focus-visible,
body.yf-dashboard-auth.dark-theme .yf-income-plan-tag-option.is-selected {
background: rgba(95, 204, 169, .12);
color: #8edbc0;
}
body.yf-dashboard-auth.dark-theme .yf-finance-plan-list .delete-income-plan {
border-color: rgba(215, 118, 122, .24);
background: rgba(190, 73, 78, .1);
color: #df9295;
}
body.yf-dashboard-auth.dark-theme .yf-finance-plan-list .delete-income-plan:hover,
body.yf-dashboard-auth.dark-theme .yf-finance-plan-list .delete-income-plan:focus-visible {
border-color: rgba(225, 134, 138, .46);
background: rgba(190, 73, 78, .18);
color: #f0adaf;
}
body.yf-dashboard-auth.dark-theme .yf-finance-form__footer {
border-top-color: rgba(183, 215, 206, .1);
background: #202a2e;
}
body.yf-dashboard-auth.dark-theme .yf-finance-action--secondary,
body.yf-dashboard-auth.dark-theme .yf-finance-action:disabled,
body.yf-dashboard-auth.dark-theme .yf-finance-action.disabled {
border-color: rgba(183, 215, 206, .12);
background: #293438;
color: #93a29d;
}
body.yf-dashboard-auth.dark-theme .yf-finance-action--secondary:hover,
body.yf-dashboard-auth.dark-theme .yf-finance-action--secondary:focus-visible {
border-color: rgba(183, 215, 206, .22);
background: #334044;
color: #d5e2de;
}
body.yf-dashboard-auth.dark-theme .yf-finance-action--update:not(:disabled) {
border-color: rgba(95, 204, 169, .38);
background: transparent;
color: #78d4b5;
}
body.yf-dashboard-auth.dark-theme .yf-finance-form .options {
border-color: rgba(183, 215, 206, .14);
background: #202a2e;
box-shadow: 0 18px 42px rgba(0, 0, 0, .32);
}
@media (max-width: 767.98px) {
.expense-tags-shell--wide,
.income-tags-shell--wide {
display: none;
}
.expense-tags-shell--mobile,
.income-tags-shell--mobile {
display: block;
}
.expense-tags-shell--mobile .expense-tags-page,
.income-tags-shell--mobile .income-tags-page {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(24px, auto));
gap: 14px 12px;
}
.investment-item {
font-size: .78rem;
white-space: nowrap;
}
.investment-item .yf-finance-article__market {
margin: 0 0 0 2px;
font-size: .7rem;
}
.investment-item .badge {
padding: 3px 5px;
}
.yf-period-picker {
grid-template-columns: minmax(0, 1.45fr) minmax(86px, .72fr);
gap: 8px;
}
.yf-period-picker__field .form-label {
font-size: .72rem;
}
.yf-period-picker__field .form-select {
min-width: 0;
padding-right: 28px;
padding-left: 10px;
font-size: .8rem;
}
.expense-budget-inline {
align-items: center;
}
.expense-budget-inline .card-title {
text-align: center;
}
.yf-finance-form-dialog,
.yf-finance-form-dialog--wide {
width: calc(100% - 18px);
max-width: none;
margin: 9px auto;
}
.yf-finance-form-dialog .modal-header {
min-height: 70px;
padding: 13px 14px;
}
.yf-finance-modal-heading {
gap: 10px;
}
.yf-finance-modal-heading__icon {
flex-basis: 36px;
width: 36px;
height: 36px;
}
.yf-finance-form {
padding: 15px 14px;
}
.yf-finance-form .row.g-3 {
--bs-gutter-y: 12px;
}
.yf-finance-form__footer {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 12px 14px 14px;
}
.yf-finance-form__footer .btn {
width: 100%;
}
.yf-finance-form-dialog--wide .yf-finance-form__footer .btn:first-child {
grid-column: 1 / -1;
grid-row: 2;
}
}
/* Founder access */
.yf-founder-offer {
margin-top: 14px;
overflow: hidden;
border: 1px solid rgba(201, 76, 84, .3);
border-radius: 8px;
background: linear-gradient(135deg, rgba(201, 76, 84, .075), rgba(255, 255, 255, .98) 46%);
box-shadow: 0 12px 34px rgba(88, 28, 34, .07);
}
.yf-founder-offer.is-current { box-shadow: inset 0 0 0 1px rgba(201, 76, 84, .26), 0 12px 34px rgba(88, 28, 34, .09); }
.yf-founder-offer__intro { padding: 18px 20px 15px; border-bottom: 1px solid rgba(201, 76, 84, .14); }
.yf-founder-offer__eyebrow {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 9px;
color: #a83d47;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .06em;
}
.yf-founder-offer__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; }
.yf-founder-offer__heading h3 { margin: 0; color: var(--yf-modal-ink); font-size: 26px; font-weight: 800; }
.yf-founder-offer__heading p { max-width: 650px; margin: 7px 0 0; color: var(--yf-modal-muted); font-size: 14px; line-height: 1.55; }
.yf-founder-offer__price { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; }
.yf-founder-offer__price strong { color: #9f3741 !important; font-family: "IBM Plex Mono", monospace; font-size: 23px; }
.yf-founder-offer__price span { color: var(--yf-modal-muted); font-size: 12px; }
.yf-founder-offer__price del { color: var(--yf-modal-muted); font-family: "IBM Plex Mono", monospace; font-size: 13px; text-decoration-color: #c94c54; }
.yf-founder-offer__price small { margin-top: 2px; color: #a83d47; font-size: 11px; font-weight: 700; }
.yf-founder-offer__price .yf-founder-offer__discount-badge { margin-bottom: 3px; padding: 3px 6px; border-radius: 4px; background: rgba(201, 76, 84, .12); color: #a83d47; font-size: 9px; font-weight: 800; }
.yf-founder-offer__body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(230px, .75fr); gap: 24px; align-items: center; padding: 16px 20px 18px; }
.yf-founder-offer__features { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; margin: 0; padding: 0; list-style: none; }
.yf-founder-offer__features li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; color: #43514d; font-size: 13.5px; line-height: 1.5; }
.yf-founder-offer__features i { color: #b8444e; font-size: 15px; }
.yf-founder-offer__purchase { display: grid; gap: 8px; }
.yf-founder-offer__remaining { color: var(--yf-modal-muted); font-size: 13px; text-align: center; }
.yf-founder-offer__remaining strong { color: #a83d47 !important; font-family: "IBM Plex Mono", monospace; font-size: 14px; }
.yf-founder-offer__button {
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid #a83d47;
border-radius: 6px;
background: #a83d47;
color: #fff;
font-size: 13.5px;
font-weight: 800;
}
.yf-founder-offer__button:hover,
.yf-founder-offer__button:focus-visible { border-color: #8f3039; background: #8f3039; color: #fff; }
.yf-founder-offer__purchase small { color: var(--yf-modal-muted); font-size: 11px; text-align: center; }
.yf-founder-offer__active,
.yf-founder-offer__sold-out { display: flex; align-items: center; justify-content: center; gap: 8px; color: #9f3741; font-size: 12px; font-weight: 750; text-align: center; }
.founder-color { color: #8f3039; }
.founder-photo {
border: 1px solid #8f3039;
box-shadow: 0 0 0 2px rgba(214, 180, 93, .34), 0 0 11px rgba(115, 31, 43, .34);
}
.yf-profile-avatar-wrap { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; }
.yf-founder-gem {
position: absolute;
z-index: 3;
display: grid;
place-items: center;
border: 1px solid rgba(255, 244, 208, .72);
border-radius: 50%;
color: #f0dc9b;
background: #7f2933;
box-shadow: 0 2px 7px rgba(57, 12, 19, .28);
line-height: 1;
}
.yf-founder-gem--nav { right: -4px; bottom: -3px; width: 14px; height: 14px; font-size: 7px; }
#navbarDropdown[data-founder-tooltip] { position: relative; }
#navbarDropdown[data-founder-tooltip]::after {
position: absolute;
z-index: 1200;
top: calc(100% + 9px);
left: 0;
width: max-content;
max-width: min(270px, 86vw);
padding: 7px 10px;
border: 1px solid rgba(214, 180, 93, .3);
border-radius: 7px;
background: #182521;
box-shadow: 0 10px 28px rgba(0, 0, 0, .24);
color: #f8f4ea;
content: attr(data-founder-tooltip);
font-size: 10px;
font-weight: 650;
line-height: 1.35;
opacity: 0;
pointer-events: none;
transform: translateY(-3px);
transition: opacity .16s ease, transform .16s ease;
white-space: normal;
}
#navbarDropdown[data-founder-tooltip].is-founder-tooltip-visible::after { opacity: 1; transform: translateY(0); }
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
#navbarDropdown[data-founder-tooltip]:hover::after,
#navbarDropdown[data-founder-tooltip]:focus-visible::after { opacity: 1; transform: translateY(0); }
}
.yf-leader-avatar { position: relative; display: inline-grid; width: 36px; height: 36px; place-items: center; }
.yf-leader-avatar.is-founder img {
border: 1px solid #8f3039;
box-shadow: 0 0 0 2px rgba(214, 180, 93, .32), 0 0 10px rgba(115, 31, 43, .25);
}
.yf-founder-gem--leader { right: -4px; bottom: -3px; width: 15px; height: 15px; font-size: 7px; }
.yf-leader-row > div .yf-founder-status {
margin-top: 1px;
color: #8f3039;
font-size: 9px;
font-weight: 800;
line-height: 1.25;
}
.yf-leader-row > div .yf-leader-earned { margin-top: 1px; }
body.yf-dashboard-auth.dark-theme .yf-founder-offer {
border-color: rgba(230, 103, 112, .32);
background: linear-gradient(135deg, rgba(168, 61, 71, .18), rgba(18, 38, 33, .96) 48%);
}
body.yf-dashboard-auth.dark-theme .yf-founder-offer__intro { border-bottom-color: rgba(230, 103, 112, .18); }
body.yf-dashboard-auth.dark-theme .yf-founder-offer__heading h3,
body.yf-dashboard-auth.dark-theme .yf-founder-offer__price strong { color: #f4d9dc !important; }
body.yf-dashboard-auth.dark-theme .yf-founder-offer__heading p,
body.yf-dashboard-auth.dark-theme .yf-founder-offer__features li,
body.yf-dashboard-auth.dark-theme .yf-founder-offer__remaining,
body.yf-dashboard-auth.dark-theme .yf-founder-offer__purchase small { color: #aebfb9; }
body.yf-dashboard-auth.dark-theme .yf-founder-offer__price del { color: #9dafaa; }
body.yf-dashboard-auth.dark-theme .yf-founder-offer__price small,
body.yf-dashboard-auth.dark-theme .yf-founder-offer__price .yf-founder-offer__discount-badge { color: #ef8d95; }
body.yf-dashboard-auth.dark-theme .yf-founder-offer__price .yf-founder-offer__discount-badge { background: rgba(230, 103, 112, .14); }
body.yf-dashboard-auth.dark-theme .yf-founder-offer__eyebrow,
body.yf-dashboard-auth.dark-theme .yf-founder-offer__active,
body.yf-dashboard-auth.dark-theme .yf-founder-offer__sold-out { color: #ef8d95; }
body.yf-dashboard-auth.dark-theme .founder-photo,
body.yf-dashboard-auth.dark-theme .yf-leader-avatar.is-founder img {
border-color: #c85c68;
box-shadow: 0 0 0 2px rgba(228, 202, 130, .38), 0 0 12px rgba(141, 48, 61, .4);
}
body.yf-dashboard-auth.dark-theme .yf-founder-gem { color: #f1d98e; background: #68212a; }
body.yf-dashboard-auth.dark-theme .yf-leader-row > div .yf-founder-status { color: #e18a93; }
@media (max-width: 767.98px) {
.yf-founder-offer__heading { align-items: flex-start; flex-direction: column; gap: 12px; }
.yf-founder-offer__price { align-items: flex-start; }
.yf-founder-offer__body { grid-template-columns: 1fr; gap: 18px; }
.yf-founder-offer__features { grid-template-columns: 1fr; }
}
.yf-demo-readonly-modal {
overflow: hidden;
border: 1px solid rgba(24, 124, 97, .16) !important;
border-radius: 14px !important;
box-shadow: 0 28px 80px rgba(8, 32, 26, .22);
}
.yf-demo-readonly-modal .modal-header { align-items: center; padding: 22px 24px 4px; }
.yf-demo-readonly-modal__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #167a62; background: #e2f5ee; font-size: 20px; }
.yf-demo-readonly-modal .modal-body { padding: 12px 24px 8px; }
.yf-demo-readonly-modal__eyebrow { color: #168166; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.yf-demo-readonly-modal .modal-title { margin: 6px 0 10px; color: #152a24; font-size: 21px; font-weight: 750; }
.yf-demo-readonly-modal .modal-body p { margin: 0; color: #697873; line-height: 1.65; }
.yf-demo-readonly-modal .modal-footer { gap: 9px; padding: 16px 24px 24px; }
.yf-demo-readonly-modal .modal-footer form { margin: 0; }
.yf-demo-readonly-modal__primary { color: #fff !important; background: #167a62 !important; }
body.yf-dashboard-auth.dark-theme .yf-demo-readonly-modal { background: #172925; }
body.yf-dashboard-auth.dark-theme .yf-demo-readonly-modal .modal-title { color: #f0f7f4; }
body.yf-dashboard-auth.dark-theme .yf-demo-readonly-modal .modal-body p { color: #a7b8b2; }
/* Payment result / digital receipt */
.yf-payment-result-page {
--yf-payment-bg: #edf3f0;
--yf-payment-surface: #ffffff;
--yf-payment-ink: #14251f;
--yf-payment-muted: #6d7c76;
--yf-payment-line: rgba(20, 53, 44, .12);
--yf-payment-accent: #168263;
--yf-payment-accent-soft: #e2f5ee;
min-height: 100vh;
margin: 0;
background: var(--yf-payment-bg);
color: var(--yf-payment-ink);
}
.yf-payment-page {
min-height: calc(100vh - 250px);
display: flex;
flex: 1 0 auto;
flex-direction: column;
}
.yf-payment-brand {
display: flex;
width: min(1160px, calc(100% - 40px));
min-height: 72px;
margin: 0 auto;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--yf-payment-line);
color: var(--yf-payment-muted);
font-size: 12px;
font-weight: 650;
}
.yf-payment-brand a {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--yf-payment-ink);
font-size: 15px;
font-weight: 800;
text-decoration: none;
}
.yf-payment-brand__logo {
display: block;
width: auto;
height: 31px;
object-fit: contain;
}
.yf-payment-brand__mark {
display: grid;
width: 30px;
height: 30px;
place-items: center;
border: 1px solid rgba(22, 130, 99, .22);
border-radius: 50%;
color: var(--yf-payment-accent);
background: var(--yf-payment-accent-soft);
}
.yf-payment-main {
display: flex;
min-height: 0;
flex: 1 0 auto;
padding: 56px 20px 76px;
align-items: flex-start;
justify-content: center;
}
.yf-payment-receipt {
position: relative;
overflow: hidden;
width: min(100%, 680px);
border: 1px solid var(--yf-payment-line);
border-radius: 16px;
background: var(--yf-payment-surface);
box-shadow: 0 28px 70px rgba(22, 49, 41, .11), 0 4px 14px rgba(22, 49, 41, .05);
}
.yf-payment-receipt::before {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 4px;
background: var(--yf-payment-accent);
content: '';
}
.yf-payment-receipt.is-pending { --yf-payment-accent: #3976b8; --yf-payment-accent-soft: #e8f1fb; }
.yf-payment-receipt.is-failed { --yf-payment-accent: #a44550; --yf-payment-accent-soft: #faeaec; }
.yf-payment-receipt__status { padding: 38px 42px 24px; text-align: center; }
.yf-payment-receipt__icon {
display: grid;
width: 54px;
height: 54px;
margin: 0 auto 17px;
place-items: center;
border-radius: 50%;
color: var(--yf-payment-accent);
background: var(--yf-payment-accent-soft);
font-size: 24px;
}
.yf-payment-receipt__eyebrow {
display: block;
margin-bottom: 6px;
color: var(--yf-payment-accent);
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
}
.yf-payment-receipt__status h1 { margin: 0; color: var(--yf-payment-ink); font-size: clamp(25px, 4vw, 34px); font-weight: 750; line-height: 1.16; }
.yf-payment-receipt__status p { max-width: 470px; margin: 11px auto 0; color: var(--yf-payment-muted); font-size: 14px; line-height: 1.6; }
.yf-payment-receipt__amount {
display: flex;
margin: 0 42px;
padding: 22px 0;
align-items: center;
justify-content: space-between;
border-top: 1px solid var(--yf-payment-line);
border-bottom: 1px solid var(--yf-payment-line);
}
.yf-payment-receipt__amount span { color: var(--yf-payment-muted); font-size: 12px; font-weight: 650; }
.yf-payment-receipt__amount strong { color: var(--yf-payment-ink); font-size: 29px; font-weight: 800; font-variant-numeric: tabular-nums; }
.yf-payment-receipt__amount small { font-size: .58em; font-weight: 700; }
.yf-payment-receipt__details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin: 0;
padding: 24px 42px 16px;
gap: 20px 30px;
}
.yf-payment-receipt__details div { min-width: 0; }
.yf-payment-receipt__details dt { margin-bottom: 5px; color: var(--yf-payment-muted); font-size: 10px; font-weight: 650; }
.yf-payment-receipt__details dd { overflow-wrap: anywhere; margin: 0; color: var(--yf-payment-ink); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.yf-payment-receipt__badge { display: inline-flex; padding: 4px 8px; border-radius: 5px; color: var(--yf-payment-accent); background: var(--yf-payment-accent-soft); font-size: 10px; font-weight: 800; }
.yf-payment-receipt__note {
display: flex;
margin: 6px 42px 0;
padding: 13px 14px;
align-items: flex-start;
gap: 10px;
border-radius: 8px;
color: var(--yf-payment-muted);
background: rgba(103, 130, 121, .08);
font-size: 11px;
line-height: 1.55;
}
.yf-payment-receipt__note i { margin-top: 1px; color: var(--yf-payment-accent); font-size: 14px; }
.yf-payment-receipt__actions { display: grid; padding: 24px 42px; gap: 9px; }
.yf-payment-receipt__primary,
.yf-payment-receipt__secondary {
display: inline-flex;
min-height: 46px;
align-items: center;
justify-content: center;
gap: 9px;
border: 1px solid transparent;
border-radius: 7px;
font-size: 12px;
font-weight: 800;
text-decoration: none;
transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.yf-payment-receipt__primary { color: #fff; background: var(--yf-payment-accent); }
.yf-payment-receipt__secondary { border-color: var(--yf-payment-line); color: var(--yf-payment-ink); background: transparent; }
.yf-payment-receipt__primary:hover,
.yf-payment-receipt__primary:focus-visible { color: #fff; filter: brightness(.94); transform: translateY(-1px); }
.yf-payment-receipt__secondary:hover,
.yf-payment-receipt__secondary:focus-visible { border-color: rgba(22, 130, 99, .32); color: var(--yf-payment-ink); background: rgba(22, 130, 99, .05); }
.yf-payment-receipt__primary:focus-visible,
.yf-payment-receipt__secondary:focus-visible { outline: 3px solid rgba(22, 130, 99, .2); outline-offset: 2px; }
.yf-payment-receipt__footer {
display: flex;
padding: 15px 42px;
align-items: center;
justify-content: space-between;
border-top: 1px dashed var(--yf-payment-line);
color: var(--yf-payment-muted);
font-size: 9px;
font-weight: 650;
}
.yf-payment-receipt__footer span:first-child { color: var(--yf-payment-ink); font-weight: 800; }
.yf-payment-result-page.dark-theme {
--yf-payment-bg: #111a18;
--yf-payment-surface: #192623;
--yf-payment-ink: #edf5f2;
--yf-payment-muted: #a8b7b1;
--yf-payment-line: rgba(221, 239, 233, .12);
--yf-payment-accent: #62c6a6;
--yf-payment-accent-soft: rgba(59, 181, 143, .14);
}
.yf-payment-result-page.dark-theme .yf-payment-receipt { box-shadow: 0 28px 80px rgba(0, 0, 0, .28); }
.yf-payment-result-page.dark-theme .yf-payment-receipt.is-pending { --yf-payment-accent: #82aee0; --yf-payment-accent-soft: rgba(75, 128, 188, .17); }
.yf-payment-result-page.dark-theme .yf-payment-receipt.is-failed { --yf-payment-accent: #e1848d; --yf-payment-accent-soft: rgba(180, 70, 82, .16); }
.yf-payment-result-page.dark-theme .yf-payment-receipt__note { background: rgba(224, 239, 234, .05); }
.yf-payment-result-page .yf-footer { margin-top: 0; }
@media (max-width: 575.98px) {
.yf-payment-brand { width: calc(100% - 32px); min-height: 62px; }
.yf-payment-brand > span { display: none; }
.yf-payment-main { min-height: auto; padding: 28px 12px 52px; }
.yf-payment-receipt { border-radius: 12px; }
.yf-payment-receipt__status { padding: 30px 22px 20px; }
.yf-payment-receipt__amount { margin: 0 22px; padding: 18px 0; }
.yf-payment-receipt__amount strong { font-size: 25px; }
.yf-payment-receipt__details { grid-template-columns: 1fr; padding: 21px 22px 13px; gap: 15px; }
.yf-payment-receipt__note { margin: 5px 22px 0; }
.yf-payment-receipt__actions { padding: 20px 22px; }
.yf-payment-receipt__footer { padding: 13px 22px; align-items: flex-start; flex-direction: column; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
.yf-payment-receipt__primary,
.yf-payment-receipt__secondary { transition: none; }
}
/* Branded HTTP error pages. */
.yf-error-result-page {
--yf-error-bg: #eef3f1;
--yf-error-surface: #ffffff;
--yf-error-ink: #10201d;
--yf-error-muted: #6d7772;
--yf-error-line: rgba(16, 32, 29, .12);
--yf-error-accent: #168263;
min-height: 100vh;
background: var(--yf-error-bg);
color: var(--yf-error-ink);
font-family: "Manrope", sans-serif;
}
.yf-error-page {
display: flex;
min-height: calc(100vh - 205px);
flex: 1 0 auto;
flex-direction: column;
}
.yf-error-nav {
color: #f8f4ea;
background: #0b1c19;
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.yf-error-nav__inner {
display: flex;
width: min(1160px, calc(100% - 40px));
min-height: 66px;
margin: 0 auto;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.yf-error-nav__brand,
.yf-error-nav__profile,
.yf-error-nav__link,
.yf-error-nav__button {
text-decoration: none;
}
.yf-error-nav__brand img {
display: block;
width: auto;
height: 32px;
}
.yf-error-nav__links,
.yf-error-nav__actions,
.yf-error-nav__profile {
display: flex;
align-items: center;
}
.yf-error-nav__links { gap: 24px; }
.yf-error-nav__actions { gap: 10px; }
.yf-error-nav__link {
color: rgba(248, 244, 234, .7);
font-size: 13px;
font-weight: 650;
}
.yf-error-nav__link:hover,
.yf-error-nav__link:focus-visible { color: #ffffff; }
.yf-error-nav__button {
display: inline-flex;
min-height: 38px;
padding: 0 16px;
align-items: center;
justify-content: center;
border: 1px solid rgba(157, 223, 196, .25);
border-radius: 7px;
color: #f8f4ea;
font-size: 13px;
font-weight: 750;
}
.yf-error-nav__button.is-primary {
color: #10201d;
background: #9ddfc4;
border-color: #9ddfc4;
}
.yf-error-nav__profile {
gap: 9px;
padding-left: 4px;
color: #ffffff;
font-size: 13px;
font-weight: 700;
}
.yf-error-nav__avatar {
width: 32px;
height: 32px;
border: 1px solid rgba(157, 223, 196, .55);
border-radius: 50%;
object-fit: cover;
}
.yf-error-main {
display: flex;
width: min(1160px, calc(100% - 40px));
min-height: 570px;
margin: 0 auto;
padding: 70px 0 84px;
flex: 1 0 auto;
align-items: center;
justify-content: center;
}
.yf-error-stage {
display: grid;
width: min(100%, 900px);
grid-template-columns: minmax(210px, .72fr) minmax(0, 1.28fr);
overflow: hidden;
border: 1px solid var(--yf-error-line);
border-radius: 16px;
background: var(--yf-error-surface);
box-shadow: 0 24px 70px rgba(22, 49, 41, .1);
}
.yf-error-stage__code {
display: flex;
min-height: 390px;
padding: 44px 34px;
align-items: flex-end;
justify-content: space-between;
flex-direction: column;
color: #f8f4ea;
background: #132b26;
}
.yf-error-stage__code span:first-child {
color: #9ddfc4;
font-family: "IBM Plex Mono", monospace;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.yf-error-stage__code strong {
align-self: flex-start;
color: #f8f4ea;
font-family: "IBM Plex Mono", monospace;
font-size: clamp(72px, 9vw, 118px);
font-weight: 600;
line-height: .82;
}
.yf-error-stage__code i {
color: #d6b45d;
font-size: 27px;
}
.yf-error-stage__content {
display: flex;
padding: 54px clamp(32px, 5vw, 62px);
justify-content: center;
flex-direction: column;
}
.yf-error-stage__eyebrow {
margin-bottom: 14px;
color: var(--yf-error-accent);
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
.yf-error-stage h1 {
max-width: 560px;
margin: 0 0 16px;
color: var(--yf-error-ink);
font-size: clamp(31px, 4vw, 45px);
font-weight: 800;
line-height: 1.08;
}
.yf-error-stage p {
max-width: 550px;
margin: 0;
color: var(--yf-error-muted);
font-size: 16px;
line-height: 1.65;
}
.yf-error-stage__actions {
display: flex;
margin-top: 30px;
gap: 10px;
flex-wrap: wrap;
}
.yf-error-stage__actions a,
.yf-error-stage__actions button {
display: inline-flex;
min-height: 44px;
padding: 0 19px;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid var(--yf-error-line);
border-radius: 7px;
color: var(--yf-error-ink);
background: transparent;
font: inherit;
font-size: 13px;
font-weight: 750;
text-decoration: none;
cursor: pointer;
}
.yf-error-stage__actions .is-primary {
color: #ffffff;
background: var(--yf-error-accent);
border-color: var(--yf-error-accent);
}
.yf-error-stage__actions a:hover,
.yf-error-stage__actions button:hover { transform: translateY(-1px); }
.yf-error-result-page.dark-theme {
--yf-error-bg: #12171a;
--yf-error-surface: #1c2327;
--yf-error-ink: #edf2f3;
--yf-error-muted: #a4b1b5;
--yf-error-line: rgba(211, 225, 230, .12);
--yf-error-accent: #63b7a8;
}
.yf-error-result-page.dark-theme .yf-error-stage__code { background: #101c1a; }
.yf-error-result-page .yf-footer { margin-top: 0; }
@media (max-width: 767.98px) {
.yf-error-nav__inner { width: calc(100% - 28px); min-height: 60px; }
.yf-error-nav__brand img { height: 27px; }
.yf-error-nav__links { display: none; }
.yf-error-nav__profile span { display: none; }
.yf-error-nav__button { min-height: 36px; padding: 0 12px; }
.yf-error-main { width: calc(100% - 24px); min-height: 0; padding: 34px 0 50px; }
.yf-error-stage { grid-template-columns: 1fr; border-radius: 12px; }
.yf-error-stage__code {
min-height: 142px;
padding: 25px 24px;
align-items: flex-start;
flex-direction: row;
}
.yf-error-stage__code strong { align-self: flex-end; font-size: 67px; }
.yf-error-stage__content { padding: 32px 24px 34px; }
.yf-error-stage h1 { font-size: 30px; }
.yf-error-stage__actions { flex-direction: column; }
.yf-error-stage__actions a,
.yf-error-stage__actions button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.yf-error-stage__actions a,
.yf-error-stage__actions button { transition: none; }
}
/* Authorized dashboard mobile polish: navigation, actions, tables and editors. */
.yf-dashboard-shell .yf-section-nav {
box-sizing: border-box;
display: flex;
width: 100%;
max-width: 100%;
gap: 4px;
overflow-x: auto;
overflow-y: hidden;
padding: 4px;
border: 1px solid rgba(27, 74, 65, .12);
border-radius: 8px;
scroll-padding-inline: 4px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.yf-dashboard-shell .yf-section-nav::-webkit-scrollbar {
display: none;
}
.yf-dashboard-shell .yf-section-nav .nav-element {
flex: 0 0 auto;
min-width: max-content;
border-radius: 6px;
scroll-snap-align: nearest;
white-space: nowrap;
}
.yf-assets-section > .yf-assets-row {
margin-top: 0;
margin-bottom: 0;
}
.yf-assets-section > .yf-assets-row + .yf-assets-row {
margin-top: 12px;
}
.yf-assets-section > .yf-assets-row > [class*="col-"] {
padding-top: 0;
}
.yf-card-heading,
.yf-table-card-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.yf-card-heading {
margin-bottom: 14px;
}
.yf-table-card-heading > div {
min-width: 0;
}
.yf-table-card-actions {
display: flex;
flex-wrap: nowrap;
gap: 8px;
margin-top: 6px;
}
.yf-table-card-heading + .yf-table-stage {
margin-top: 14px;
}
.yf-table-stage > .table-responsive > .main-table {
margin-top: 0 !important;
}
.yf-inline-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 34px;
margin: 0;
padding: 7px 11px;
border: 1px solid rgba(47, 126, 108, .2);
border-radius: 7px;
color: #24775f;
background: rgba(74, 181, 149, .07);
font: inherit;
font-size: .78rem;
font-weight: 700;
line-height: 1;
white-space: nowrap;
transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.yf-inline-action:hover,
.yf-inline-action:focus-visible {
border-color: rgba(47, 126, 108, .42);
color: #155e4a;
background: rgba(74, 181, 149, .13);
}
.yf-inline-action:active {
transform: translateY(1px);
}
.yf-table-info-button {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid rgba(47, 128, 237, .18);
border-radius: 50%;
color: #2f80ed;
background: rgba(47, 128, 237, .06);
}
#expenses-table tfoot td,
#incomes-table tfoot td {
border-top: 1px solid rgba(15, 23, 42, .14);
border-bottom: 0;
background: rgba(75, 169, 140, .055);
font-weight: 700;
}
.yf-table-total-label {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
min-height: 24px;
border-radius: 999px;
color: #24775f;
background: rgba(45, 191, 144, .12);
font-weight: 800;
}
#income-plans-table tr > :nth-child(1) {
min-width: 112px !important;
width: var(--sticky-tag-col-width, 1%) !important;
max-width: 180px !important;
}
.expense-tags-page {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(24px, auto));
gap: 16px 22px;
}
.yf-day-editor-dialog {
width: min(700px, calc(100% - 24px));
max-width: 700px;
margin-right: auto;
margin-left: auto;
}
.yf-day-editor-dialog .modal-content {
overflow: hidden;
border: 1px solid rgba(21, 74, 61, .14);
border-radius: 10px;
background: #fcfdfd;
box-shadow: 0 24px 70px rgba(15, 37, 31, .2);
}
.yf-day-editor-dialog .modal-header {
padding: 20px 22px 14px;
border-bottom-color: rgba(21, 74, 61, .1);
}
.yf-day-editor-dialog .modal-title {
color: #20312d;
font-size: 1.05rem;
font-weight: 750;
}
.yf-day-editor {
padding: 18px 22px;
}
.yf-day-editor__meta {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
gap: 10px;
margin-bottom: 18px;
}
.yf-day-editor__meta > span {
display: grid;
gap: 6px;
min-width: 0;
padding: 10px 12px;
border: 1px solid rgba(21, 74, 61, .1);
border-radius: 7px;
background: rgba(74, 181, 149, .055);
}
.yf-day-editor__meta small {
color: #75847f;
font-size: .68rem;
font-weight: 700;
}
.yf-day-editor__meta strong {
min-width: 0;
color: #20312d;
font-size: .84rem;
}
.yf-day-editor__heading {
display: grid;
gap: 3px;
margin-bottom: 4px;
}
.yf-day-editor__heading strong {
color: #20312d;
font-size: .92rem;
}
.yf-day-editor__heading span {
color: #75847f;
font-size: .72rem;
}
.yf-entry-editor {
margin-top: 10px;
padding: 12px;
border: 1px solid rgba(21, 74, 61, .1);
border-radius: 7px;
background: #f8fbfa;
}
.yf-entry-editor.is-deleted {
opacity: .62;
border-color: rgba(190, 67, 76, .2);
background: rgba(190, 67, 76, .055);
}
.yf-entry-editor.is-deleted .yf-entry-editor__fields {
filter: grayscale(.55);
pointer-events: none;
}
.yf-entry-editor.is-deleted .yf-entry-editor__fields input {
text-decoration: line-through;
}
.yf-entry-editor.is-deleted .yf-entry-date-text {
text-decoration: line-through;
}
.yf-entry-editor__fields .form-control {
min-height: 40px;
border-color: rgba(21, 74, 61, .16);
background: #fff;
}
.yf-entry-editor__fields .form-control:focus {
border-color: rgba(45, 191, 144, .55);
box-shadow: 0 0 0 3px rgba(45, 191, 144, .1);
}
.yf-day-editor__add {
display: inline-flex;
align-items: center;
gap: 7px;
width: 100%;
min-height: 40px;
margin-top: 12px;
padding: 9px 12px;
border: 1px dashed rgba(47, 126, 108, .34);
border-radius: 7px;
color: #24775f;
background: rgba(74, 181, 149, .055);
font-size: .82rem;
font-weight: 700;
}
.yf-day-editor__status {
min-height: 18px;
margin-top: 9px;
color: #75847f;
font-size: .72rem;
line-height: 1.4;
}
.yf-day-editor__status:empty {
min-height: 0;
margin-top: 0;
}
.yf-day-editor__status.is-danger {
color: #b63d49;
}
.yf-day-editor__status.is-warning {
color: #9a6a12;
}
.yf-day-editor__status.is-loading {
color: #24775f;
}
.yf-day-editor-dialog .modal-footer {
padding: 14px 22px 18px;
border-top-color: rgba(21, 74, 61, .1);
background: #f6faf8;
}
.yf-day-editor-dialog .modal-footer .btn {
min-width: 112px;
min-height: 40px;
border-radius: 7px;
font-size: .82rem;
font-weight: 700;
}
.yf-compact-date {
position: relative;
display: flex;
min-width: 0;
min-height: 40px;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 0 11px;
overflow: hidden;
border: 1px solid rgba(21, 74, 61, .16);
border-radius: 7px;
color: #31433e;
background: #fff;
font-size: .78rem;
font-weight: 650;
white-space: nowrap;
}
.yf-compact-date > i { color: #667872; }
.yf-compact-date :is(.expense-date, .income-date) {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
opacity: 0;
cursor: pointer;
}
.yf-compact-date:focus-within {
border-color: rgba(45, 191, 144, .55);
box-shadow: 0 0 0 3px rgba(45, 191, 144, .1);
}
.finance-analytics-kpi-column {
min-width: 0;
}
.finance-analytics-kpi-column__title,
.finance-analytics-kpi__label,
.finance-analytics-kpi__value {
overflow-wrap: anywhere;
}
body.yf-dashboard-auth.dark-theme .yf-inline-action {
border-color: rgba(157, 223, 196, .2);
color: #a8decf;
background: rgba(80, 174, 146, .09);
}
body.yf-dashboard-auth.dark-theme .yf-table-info-button {
border-color: rgba(119, 166, 229, .24);
color: #9cc4f8;
background: rgba(77, 126, 191, .12);
}
body.yf-dashboard-auth.dark-theme .yf-day-editor__meta > span,
body.yf-dashboard-auth.dark-theme .yf-entry-editor,
body.yf-dashboard-auth.dark-theme .yf-day-editor__add {
border-color: rgba(185, 211, 202, .13);
background: rgba(31, 57, 54, .72);
}
body.yf-dashboard-auth.dark-theme .yf-day-editor__meta strong,
body.yf-dashboard-auth.dark-theme .yf-day-editor__heading strong {
color: #edf6f3;
}
body.yf-dashboard-auth.dark-theme .yf-day-editor__meta small,
body.yf-dashboard-auth.dark-theme .yf-day-editor__heading span {
color: #9eb0aa;
}
body.yf-dashboard-auth.dark-theme .yf-entry-editor__fields .form-control {
border-color: rgba(185, 211, 202, .14);
background: #132522;
}
body.yf-dashboard-auth.dark-theme .yf-compact-date,
html[data-theme="dark"] body.yf-dashboard-auth .yf-compact-date {
border-color: rgba(185, 211, 202, .14);
color: #dce9e4;
background: #132522;
}
body.yf-dashboard-auth.dark-theme .yf-day-editor-dialog .modal-content {
border-color: rgba(185, 211, 202, .14);
background: #172825;
}
body.yf-dashboard-auth.dark-theme .yf-day-editor-dialog .modal-title {
color: #edf6f3;
}
body.yf-dashboard-auth.dark-theme .yf-day-editor-dialog .modal-header,
body.yf-dashboard-auth.dark-theme .yf-day-editor-dialog .modal-footer {
border-color: rgba(185, 211, 202, .12);
}
body.yf-dashboard-auth.dark-theme .yf-day-editor-dialog .modal-footer {
background: #14231f;
}
body.yf-dashboard-auth.dark-theme #expenses-table tfoot td,
body.yf-dashboard-auth.dark-theme #incomes-table tfoot td {
border-top-color: rgba(194, 217, 209, .14);
background: rgba(80, 174, 146, .075);
}
@media (max-width: 1199.98px) and (min-width: 992px) {
.finance-analytics-kpi-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: 26px;
}
.finance-analytics-kpi-column,
.finance-analytics-kpi-column:nth-child(4) {
padding: 0 22px;
border-left: 1px solid rgba(15, 23, 42, .08);
}
.finance-analytics-kpi-column:nth-child(3n + 1) {
padding-left: 0;
border-left: 0;
}
}
@media (max-width: 991.98px) {
.yf-assets-section > .yf-assets-row > [class*="col-"] + [class*="col-"] {
padding-top: 12px;
}
}
@media (max-width: 767.98px) {
.yf-dashboard-shell .yf-section-nav {
margin-inline: 0;
scroll-snap-type: x proximity;
}
.yf-dashboard-shell .yf-section-nav .nav-element {
min-width: 88px;
padding-inline: 12px !important;
text-align: center;
}
.yf-card-heading {
align-items: center;
}
.yf-card-heading .card-title {
line-height: 1.3;
}
.yf-table-card-actions {
width: 100%;
gap: 6px;
}
.yf-table-card-actions .yf-inline-action {
flex: 1 1 0;
min-width: 0;
padding-inline: 8px;
}
.yf-day-editor__meta {
grid-template-columns: 1fr;
}
.yf-day-editor-dialog {
width: calc(100% - 20px);
margin: 10px auto;
}
.yf-day-editor-dialog .modal-header {
padding: 18px 18px 13px;
}
.yf-day-editor {
padding: 16px 18px;
}
.yf-day-editor-dialog .modal-footer {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 13px 18px 16px;
}
.yf-day-editor-dialog .modal-footer .btn {
width: 100%;
min-width: 0;
margin: 0;
}
.finance-analytics-kpi-grid {
grid-template-columns: 1fr;
gap: 22px;
}
.finance-analytics-kpi-column,
.finance-analytics-kpi-column:first-child,
.finance-analytics-kpi-column:last-child,
.finance-analytics-kpi-column:nth-child(4),
.finance-analytics-kpi-column:nth-child(odd) {
padding: 0;
border-left: 0;
}
.finance-analytics-kpi-column + .finance-analytics-kpi-column {
padding-top: 18px;
border-top: 1px solid rgba(15, 23, 42, .08);
}
body.yf-dashboard-auth.dark-theme .finance-analytics-kpi-column + .finance-analytics-kpi-column {
border-top-color: rgba(194, 217, 209, .12);
}
.finance-analytics-insight-card .card-body {
min-height: 0;
padding: 18px 16px;
}
.finance-analytics-empty-state {
justify-content: flex-start;
min-height: 0;
}
.finance-analytics-empty-state__icon {
width: 54px;
height: 54px;
flex-basis: 54px;
font-size: 1.65rem;
}
.finance-analytics-regular-list,
.finance-analytics-anomaly-state {
gap: 0;
}
.finance-analytics-regular-row,
.finance-analytics-anomaly-row {
grid-template-columns: minmax(0, 1fr) auto;
gap: 5px 12px;
padding: 10px 0;
border-top: 1px solid rgba(15, 23, 42, .07);
}
.finance-analytics-regular-row:first-child,
.finance-analytics-anomaly-row:first-child {
border-top: 0;
}
.finance-analytics-regular-row > span:last-child,
.finance-analytics-anomaly-row > span:last-child {
grid-column: 2;
text-align: right;
}
}
@media (max-width: 420px) {
.yf-dashboard-shell .yf-section-nav .nav-element {
min-width: 82px;
padding-inline: 10px !important;
}
.yf-inline-action {
font-size: .72rem;
}
.yf-table-card-heading {
gap: 8px;
}
.yf-table-card-actions {
gap: 5px;
}
.yf-table-card-actions .yf-inline-action {
min-height: 32px;
padding: 6px 7px;
font-size: .69rem;
}
.yf-table-info-button {
flex-basis: 32px;
width: 32px;
height: 32px;
}
}
.yf-pwa-modal {
width: min(680px, calc(100% - 28px));
max-width: 680px;
margin-right: auto;
margin-left: auto;
}
.yf-pwa-modal .modal-content {
overflow: hidden;
border: 1px solid #cfe0da;
border-radius: 8px;
color: #142721;
background: #f8fbf9;
box-shadow: 0 28px 80px rgba(4, 22, 17, .3);
}
.yf-pwa-modal__header {
align-items: flex-start;
padding: 24px 24px 20px;
border-bottom: 1px solid #dbe7e2;
background: #eef7f3;
}
.yf-pwa-modal__heading {
display: flex;
gap: 14px;
align-items: center;
min-width: 0;
}
.yf-pwa-modal__heading > div {
min-width: 0;
}
.yf-pwa-modal__mark {
width: 46px;
height: 46px;
flex: 0 0 46px;
display: grid;
place-items: center;
border-radius: 50%;
color: #087a5c;
background: #d8f0e7;
font-size: 21px;
}
.yf-pwa-modal__heading span:not(.yf-pwa-modal__mark) {
display: block;
margin-bottom: 3px;
color: #75867f;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
}
.yf-pwa-modal__heading h5 {
margin: 0;
color: #142721;
font-size: 20px;
line-height: 1.28;
}
.yf-pwa-modal .modal-body {
padding: 24px;
}
.yf-pwa-modal__lead {
max-width: 570px;
margin: 0 0 20px;
color: #64766f;
font-size: 14px;
line-height: 1.6;
}
.yf-pwa-modal__platforms {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.yf-pwa-platform {
width: 100%;
min-height: 86px;
display: grid;
grid-template-columns: 42px minmax(0, 1fr) 18px;
gap: 12px;
align-items: center;
padding: 15px;
border: 1px solid #ceded8;
border-radius: 8px;
color: #173029;
background: #fff;
text-align: left;
cursor: pointer;
transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.yf-pwa-platform:hover {
border-color: #58b99b;
background: #f0faf6;
transform: translateY(-1px);
}
.yf-pwa-platform:focus-visible {
outline: 3px solid rgba(35, 151, 116, .18);
outline-offset: 2px;
}
.yf-pwa-platform:disabled {
opacity: .62;
cursor: wait;
}
.yf-pwa-platform__icon {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 8px;
color: #0b795b;
background: #e1f4ed;
font-size: 20px;
}
.yf-pwa-platform strong,
.yf-pwa-platform small {
display: block;
}
.yf-pwa-platform strong {
margin-bottom: 4px;
font-size: 15px;
}
.yf-pwa-platform small {
color: #74857e;
font-size: 11px;
line-height: 1.4;
}
.yf-pwa-platform > .bi-arrow-right {
color: #84958f;
}
.yf-pwa-modal__instructions {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 13px;
margin-top: 16px;
padding: 17px;
border: 1px solid #d6e4df;
border-radius: 8px;
background: #eef6f2;
outline: none;
}
.yf-pwa-modal__instructions[hidden] {
display: none;
}
.yf-pwa-modal__instructions-icon {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 50%;
color: #9b7710;
background: #fff4cd;
}
.yf-pwa-modal__instructions h6 {
margin: 1px 0 8px;
color: #18322b;
font-size: 15px;
}
.yf-pwa-modal__instructions p,
.yf-pwa-modal__instructions ol {
margin: 0;
color: #60736b;
font-size: 13px;
line-height: 1.62;
}
.yf-pwa-modal__instructions ol {
padding-left: 20px;
}
.yf-pwa-modal__instructions li + li {
margin-top: 4px;
}
.yf-pwa-modal__safari-transfer {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
margin-top: 12px;
}
.yf-pwa-modal__safari-transfer[hidden] {
display: none;
}
.yf-pwa-modal__safari-transfer code {
min-width: 0;
overflow: hidden;
padding: 10px 12px;
border: 1px solid #cdded8;
border-radius: 8px;
color: #38564c;
background: #fff;
font: 600 11px/1.4 "IBM Plex Mono", monospace;
text-overflow: ellipsis;
white-space: nowrap;
}
.yf-pwa-modal__safari-transfer button {
min-height: 38px;
display: inline-flex;
gap: 7px;
align-items: center;
justify-content: center;
padding: 9px 12px;
border: 1px solid #289476;
border-radius: 8px;
color: #fff;
background: #168365;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.yf-pwa-modal__safari-transfer button:focus-visible {
outline: 3px solid rgba(35, 151, 116, .18);
outline-offset: 2px;
}
.yf-pwa-modal__status {
min-height: 20px;
margin-top: 12px;
color: #687a73;
font-size: 12px;
}
.yf-pwa-modal__status.is-success {
color: #087a5c;
}
.yf-pwa-modal__status.is-info {
color: #5b7068;
}
.yf-pwa-modal__note {
display: flex;
gap: 9px;
align-items: flex-start;
margin-top: 10px;
padding-top: 16px;
border-top: 1px solid #dfe8e4;
color: #71827b;
font-size: 11px;
line-height: 1.5;
}
.yf-pwa-modal__note i {
flex: 0 0 auto;
margin-top: 1px;
color: #158363;
font-size: 14px;
}
.dark-theme .yf-pwa-modal .modal-content {
border-color: #314842;
color: #edf7f3;
background: #10231f;
}
.dark-theme .yf-pwa-modal__header {
border-color: #30443f;
background: #132b25;
}
.dark-theme .yf-pwa-modal__heading h5,
.dark-theme .yf-pwa-platform,
.dark-theme .yf-pwa-modal__instructions h6 {
color: #edf7f3;
}
.dark-theme .yf-pwa-modal__heading span:not(.yf-pwa-modal__mark),
.dark-theme .yf-pwa-modal__lead,
.dark-theme .yf-pwa-platform small,
.dark-theme .yf-pwa-modal__instructions p,
.dark-theme .yf-pwa-modal__instructions ol,
.dark-theme .yf-pwa-modal__status,
.dark-theme .yf-pwa-modal__note {
color: #9db1a9;
}
.dark-theme .yf-pwa-platform {
border-color: #365149;
background: #172e28;
}
.dark-theme .yf-pwa-platform:hover {
border-color: #55b495;
background: #1b3931;
}
.dark-theme .yf-pwa-modal__instructions {
border-color: #344d46;
background: #172f29;
}
.dark-theme .yf-pwa-modal__safari-transfer code {
border-color: #365149;
color: #c4d8d0;
background: #10231f;
}
.dark-theme .yf-pwa-modal__note {
border-color: #304740;
}
@media (max-width: 575.98px) {
.yf-pwa-modal {
width: calc(100% - 20px);
}
.yf-pwa-modal__header {
padding: 20px 18px 17px;
}
.yf-pwa-modal__heading {
align-items: flex-start;
}
.yf-pwa-modal__mark {
width: 40px;
height: 40px;
flex-basis: 40px;
}
.yf-pwa-modal__heading h5 {
font-size: 17px;
}
.yf-pwa-modal .modal-body {
padding: 20px 18px max(20px, env(safe-area-inset-bottom));
}
.yf-pwa-modal__platforms {
grid-template-columns: 1fr;
}
.yf-pwa-modal__safari-transfer {
grid-template-columns: 1fr;
}
}
html.yf-pwa-standalone {
--yf-pwa-safe-top: max(10px, env(safe-area-inset-top));
--yf-pwa-safe-bottom: max(10px, env(safe-area-inset-bottom));
}
html.yf-pwa-standalone .yf26-nav,
html.yf-pwa-standalone .nav.bg-dark {
padding-top: env(safe-area-inset-top);
}
html.yf-pwa-standalone .yf-error-report__trigger {
bottom: max(14px, env(safe-area-inset-bottom));
}
html.yf-pwa-standalone .modal-dialog {
max-height: calc(100vh - var(--yf-pwa-safe-top) - var(--yf-pwa-safe-bottom));
max-height: calc(100dvh - var(--yf-pwa-safe-top) - var(--yf-pwa-safe-bottom));
margin-top: var(--yf-pwa-safe-top);
margin-right: auto;
margin-bottom: var(--yf-pwa-safe-bottom);
margin-left: auto;
}
html.yf-pwa-standalone .modal-dialog-centered {
min-height: calc(100% - var(--yf-pwa-safe-top) - var(--yf-pwa-safe-bottom));
}
html.yf-pwa-standalone .modal-dialog-scrollable {
height: calc(100% - var(--yf-pwa-safe-top) - var(--yf-pwa-safe-bottom));
}
html.yf-pwa-standalone .modal-content {
max-height: calc(100vh - var(--yf-pwa-safe-top) - var(--yf-pwa-safe-bottom));
max-height: calc(100dvh - var(--yf-pwa-safe-top) - var(--yf-pwa-safe-bottom));
overflow: hidden;
}
html.yf-pwa-standalone .modal-header,
html.yf-pwa-standalone .modal-footer {
flex: 0 0 auto;
}
html.yf-pwa-standalone .modal-body {
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* Finance tables: guided empty state */
.yf-table-stage {
position: relative;
min-height: 205px;
max-width: 100%;
overflow: hidden;
}
.yf-table-stage.is-empty > .table-responsive {
display: none;
pointer-events: none;
}
.yf-table-stage.is-empty > #income-table-view-panel,
.yf-table-stage.is-empty > #income-calendar-view-panel {
display: none !important;
pointer-events: none;
}
.yf-table-empty {
position: relative;
display: grid;
place-items: center;
min-height: 205px;
border: 1px solid rgba(24, 63, 52, .11);
border-radius: 8px;
background: #f7faf8;
}
.yf-table-empty[hidden] { display: none !important; }
.yf-table-empty__content {
width: min(390px, calc(100% - 32px));
padding: 28px 20px;
text-align: center;
}
.yf-table-empty__content > span {
display: grid;
place-items: center;
width: 40px;
height: 40px;
margin: 0 auto 12px;
border-radius: 50%;
background: #e1f3ec;
color: #258a6e;
}
.yf-table-empty__content strong { display: block; color: #193029; font-size: 16px; }
.yf-table-empty__content p { margin: 7px auto 16px; color: #708079; font-size: 13px; line-height: 1.5; }
.yf-table-empty__content .btn { min-height: 40px; border: 0; border-radius: 7px; background: #238a6e; font-size: 12px; font-weight: 700; }
/* Expense categories: primary metrics, structure, then supporting context. */
.yf-expense-category-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.yf-expense-category-heading > div { min-width: 0; }
.yf-expense-category-heading p {
margin: 6px 0 0;
color: #7a8983;
font-size: 12px;
line-height: 1.45;
}
.yf-expense-category-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-top: 20px;
}
.yf-expense-category-kpi {
position: relative;
min-width: 0;
min-height: 78px;
padding: 12px 15px;
overflow: hidden;
border: 1px solid rgba(23, 59, 49, .10);
border-radius: 8px;
background: #f7faf8;
}
.yf-expense-category-kpi::before {
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: #2f9b7a;
content: "";
}
.yf-expense-category-kpi--reference::before { background: #6d8ea8; }
.yf-expense-category-kpi--category::before { background: var(--yf-category-accent, #d5ad51); }
.yf-expense-category-kpi--share::before { background: #8b6ec7; }
.yf-expense-category-kpi > span,
.yf-expense-category-kpi small,
.yf-expense-category-kpi strong { display: block; }
.yf-expense-category-kpi > span { color: #788780; font-size: 11px; line-height: 1.35; }
.yf-expense-category-kpi strong {
margin-top: 9px;
overflow: hidden;
color: #183027;
font-size: clamp(16px, 1.4vw, 21px);
font-weight: 700;
line-height: 1.15;
text-overflow: ellipsis;
white-space: nowrap;
}
.yf-expense-category-kpi small { margin-top: 5px; color: #62736c; font-size: 11px; }
.yf-expense-category-kpi .yf-expense-category-kpi__inline {
display: flex;
align-items: baseline;
gap: 6px;
min-width: 0;
}
.yf-expense-category-kpi__inline > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.yf-expense-category-kpi__inline > small {
display: inline;
flex: 0 0 auto;
margin: 0;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.yf-expense-category-layout {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
align-items: center;
margin-top: 22px;
}
.yf-expense-category-chart-wrap { min-width: 0; }
.yf-expense-category-chart { width: 100%; height: 330px; }
.yf-expense-category-details { min-width: 0; }
.yf-expense-category-details__heading {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(23, 59, 49, .10);
}
.yf-expense-category-details__heading strong { color: #21362f; font-size: 13px; }
.yf-expense-category-details__heading span { color: #89958f; font-size: 10px; }
.yf-expense-category-list {
display: grid;
gap: 1px;
max-height: 240px;
overflow-y: auto;
scrollbar-width: thin;
}
.yf-expense-category-row {
display: grid;
grid-template-columns: 10px minmax(0, 1fr) auto auto;
gap: 10px;
align-items: center;
min-height: 39px;
padding: 8px 2px;
border-bottom: 1px solid rgba(23, 59, 49, .07);
}
.yf-expense-category-row__marker {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--yf-category-color);
}
.yf-expense-category-row__name {
min-width: 0;
overflow: hidden;
color: #52665e;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.yf-expense-category-row__amount { color: #263b34; font-size: 12px; font-weight: 700; white-space: nowrap; }
.yf-expense-category-row__share {
min-width: 48px;
color: #77867f;
font-family: "IBM Plex Mono", monospace;
font-size: 10px;
text-align: right;
white-space: nowrap;
}
.yf-expense-category-list__empty { padding: 34px 12px; color: #829089; font-size: 12px; text-align: center; }
.yf-expense-category-insight {
margin: 14px 0 0;
padding: 11px 13px;
border-left: 3px solid #2d9777;
border-radius: 0 7px 7px 0;
background: #edf7f3;
color: #315b4d;
font-size: 12px;
line-height: 1.5;
}
.yf-expense-category-meta { margin: 10px 0 0; color: #8a9791; font-size: 10px; line-height: 1.45; }
body.dark-theme .yf-expense-category-heading p,
html[data-theme="dark"] .yf-expense-category-heading p,
body.dark-theme .yf-expense-category-kpi > span,
html[data-theme="dark"] .yf-expense-category-kpi > span { color: #95a79f; }
body.dark-theme .yf-expense-category-kpi,
html[data-theme="dark"] .yf-expense-category-kpi { border-color: rgba(207,226,219,.12); background: rgba(255,255,255,.035); }
body.dark-theme .yf-expense-category-kpi strong,
html[data-theme="dark"] .yf-expense-category-kpi strong,
body.dark-theme .yf-expense-category-details__heading strong,
html[data-theme="dark"] .yf-expense-category-details__heading strong,
body.dark-theme .yf-expense-category-row__amount,
html[data-theme="dark"] .yf-expense-category-row__amount { color: #e8f1ed; }
body.dark-theme .yf-expense-category-kpi small,
html[data-theme="dark"] .yf-expense-category-kpi small,
body.dark-theme .yf-expense-category-row__name,
html[data-theme="dark"] .yf-expense-category-row__name { color: #a5b6af; }
body.dark-theme .yf-expense-category-details__heading,
html[data-theme="dark"] .yf-expense-category-details__heading,
body.dark-theme .yf-expense-category-row,
html[data-theme="dark"] .yf-expense-category-row { border-color: rgba(207,226,219,.10); }
body.dark-theme .yf-expense-category-insight,
html[data-theme="dark"] .yf-expense-category-insight { background: rgba(46,151,119,.10); color: #b6d8cd; }
@media (max-width: 991.98px) {
.yf-expense-category-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yf-expense-category-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.yf-expense-category-chart { height: 300px; }
}
@media (max-width: 767.98px) {
.yf-expense-category-layout { grid-template-columns: 1fr; }
.yf-expense-category-chart { height: 280px; }
}
@media (max-width: 575.98px) {
.yf-expense-category-kpis { gap: 8px; margin-top: 16px; }
.yf-expense-category-kpi { min-height: 76px; padding: 11px 12px; }
.yf-expense-category-kpi strong { font-size: 16px; }
.yf-expense-category-layout { gap: 14px; margin-top: 16px; }
.yf-expense-category-chart { height: 270px; }
.yf-expense-category-row { grid-template-columns: 9px minmax(0, 1fr) auto; gap: 8px; }
.yf-expense-category-row__share { grid-column: 2 / 4; margin-top: -5px; text-align: left; }
}
body.dark-theme .yf-table-empty,
html[data-theme="dark"] .yf-table-empty {
border-color: rgba(207, 226, 219, .14);
background: rgba(29, 37, 40, .95);
}
body.dark-theme .yf-table-empty__content strong,
html[data-theme="dark"] .yf-table-empty__content strong { color: #edf5f2; }
body.dark-theme .yf-table-empty__content p,
html[data-theme="dark"] .yf-table-empty__content p { color: #9aaca5; }
body.yf-dashboard-auth.dark-theme .yf-onboarding-focus__skip { color: #93a69f; }
body.yf-dashboard-auth.dark-theme .yf-onboarding-focus__skip:hover,
body.yf-dashboard-auth.dark-theme .yf-onboarding-focus__skip:focus-visible { color: #d2e0db; }
.yf-subscription-confirm-route {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
min-width: 0;
margin: 0;
padding: 0;
color: #5e7069;
}
.yf-subscription-confirm-route strong { color: #19745c; }
.yf-subscription-confirm-dialog { max-width: 580px; }
.yf-subscription-confirm-hero {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
align-items: center;
gap: 13px;
margin-bottom: 14px;
padding: 14px 16px;
border: 1px solid rgba(28, 86, 68, .14);
border-radius: 8px;
background: linear-gradient(135deg, rgba(45, 151, 118, .1), rgba(45, 151, 118, .035));
}
.yf-subscription-confirm-icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
color: #16785d;
background: #dff4eb;
font-size: 18px;
}
.yf-subscription-confirm-metrics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.yf-subscription-confirm-metrics > div {
display: grid;
gap: 5px;
padding: 12px 14px;
border: 1px solid rgba(28, 86, 68, .11);
border-radius: 8px;
background: #f8fbfa;
}
.yf-subscription-confirm-metrics span { color: #708079; font-size: 11px; font-weight: 650; }
.yf-subscription-confirm-metrics strong { color: #183b31; font-size: 17px; font-variant-numeric: tabular-nums; }
.yf-subscription-confirm-list {
display: grid;
gap: 9px;
margin: 0;
padding: 13px 14px;
border: 1px solid rgba(28, 86, 68, .09);
border-radius: 8px;
background: rgba(244, 248, 246, .72);
list-style: none;
}
.yf-subscription-confirm-list li { display: flex; align-items: flex-start; gap: 9px; color: #50625b; font-size: 13px; line-height: 1.45; }
.yf-subscription-confirm-list i { margin-top: 2px; color: #238a6e; }
.yf-subscription-confirm-footer { display: flex; justify-content: flex-end; gap: 9px; }
body.yf-dashboard-auth.dark-theme .yf-subscription-confirm-hero,
html[data-theme="dark"] body.yf-dashboard-auth .yf-subscription-confirm-hero {
border-color: rgba(183, 215, 206, .13);
background: linear-gradient(135deg, rgba(75, 170, 140, .14), rgba(31, 43, 46, .25));
}
body.yf-dashboard-auth.dark-theme .yf-subscription-confirm-icon,
html[data-theme="dark"] body.yf-dashboard-auth .yf-subscription-confirm-icon { color: #93dfc3; background: #243a35; }
body.yf-dashboard-auth.dark-theme .yf-subscription-confirm-metrics > div,
body.yf-dashboard-auth.dark-theme .yf-subscription-confirm-list,
html[data-theme="dark"] body.yf-dashboard-auth .yf-subscription-confirm-metrics > div,
html[data-theme="dark"] body.yf-dashboard-auth .yf-subscription-confirm-list { border-color: rgba(183, 215, 206, .11); background: #222d30; }
body.yf-dashboard-auth.dark-theme .yf-subscription-confirm-metrics strong,
html[data-theme="dark"] body.yf-dashboard-auth .yf-subscription-confirm-metrics strong { color: #edf6f3; }
#planList .plan-item {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 8px;
align-items: center;
margin: 0 0 8px !important;
padding: 10px;
border: 1px solid rgba(30, 68, 56, .12);
border-radius: 8px;
background: #f8faf9;
}
#planList .plan-item > [class*="col-"] { width: auto; padding: 0; }
#planList .plan-amount { min-height: 42px; }
#planList .edit-plan,
#planList .delete-plan { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 7px; background: #e9f3ef; color: #247d65; }
#planList .delete-plan { background: #fff0f1; color: #bd4f58; }
body.dark-theme #planList .plan-item,
html[data-theme="dark"] #planList .plan-item { border-color: rgba(207,226,219,.14); background: rgba(255,255,255,.04); }
@media (max-width: 575.98px) {
.yf-table-stage { min-height: 190px; }
.yf-table-empty { min-height: 190px; }
.yf-table-empty__content { width: 100%; padding: 24px 16px; }
.yf-table-empty__content .btn { width: 100%; }
.yf-subscription-confirm-hero {
grid-template-columns: 36px minmax(0, 1fr);
gap: 10px;
padding: 12px;
}
.yf-subscription-confirm-icon {
width: 36px;
height: 36px;
font-size: 16px;
}
.yf-subscription-confirm-route {
flex-wrap: wrap;
justify-content: flex-start;
gap: 8px;
}
.yf-subscription-confirm-metrics { grid-template-columns: 1fr; }
.yf-subscription-confirm-footer { display: grid; grid-template-columns: 1fr 1fr; }
.yf-subscription-confirm-footer .btn { width: 100%; min-width: 0; }
}
/* One period controller for every authorized dashboard section. */
.yf-dashboard-commandbar {
position: relative;
z-index: 40;
display: flex;
min-width: 0;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 4px 9px 4px 4px;
border: 1px solid rgba(27, 74, 65, .12);
border-radius: 8px;
background: #fff;
box-shadow: 0 4px 15px rgba(22, 60, 49, .035);
}
.yf-dashboard-shell .yf-dashboard-commandbar .yf-section-nav {
width: auto;
flex: 1 1 auto;
min-height: 32px;
align-items: center;
border: 0;
background: transparent;
}
.yf-dashboard-shell .yf-dashboard-commandbar .yf-section-nav .nav-element {
min-height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 14px !important;
border: 0;
color: #66756f !important;
background: transparent;
font-size: 12px;
font-weight: 650;
line-height: 1;
transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.yf-dashboard-shell .yf-dashboard-commandbar .yf-section-nav .nav-element:hover,
.yf-dashboard-shell .yf-dashboard-commandbar .yf-section-nav .nav-element:focus-visible {
color: #173d34 !important;
background: #edf4f1;
outline: none;
}
.yf-dashboard-shell .yf-dashboard-commandbar .yf-section-nav .nav-element.nav-element-active {
color: #fff !important;
background: #174c40;
box-shadow: 0 5px 13px rgba(19, 73, 61, .16);
}
.yf-dashboard-commandbar.is-assets .yf-section-nav { width: 100%; }
.yf-dashboard-period {
position: relative;
display: grid;
flex: 0 0 auto;
grid-template-columns: 32px minmax(112px, 150px) minmax(78px, 94px) 32px;
align-items: center;
gap: 6px;
}
.yf-dashboard-period__step,
.yf-dashboard-period__trigger {
display: inline-flex;
min-height: 32px;
align-items: center;
justify-content: center;
border: 1px solid rgba(30, 78, 65, .14);
border-radius: 6px;
background: #edf4f1;
color: #53645e;
font: inherit;
font-size: 12px;
transition: border-color .17s ease, background .17s ease, color .17s ease, box-shadow .17s ease;
}
.yf-dashboard-period__step {
width: 32px;
padding: 0;
}
.yf-dashboard-period__step:hover,
.yf-dashboard-period__step:focus-visible,
.yf-dashboard-period__trigger:hover,
.yf-dashboard-period__trigger:focus-visible,
.yf-dashboard-period__trigger[aria-expanded="true"] {
border-color: rgba(33, 137, 105, .48);
background: #e4f1ec;
color: #177657;
box-shadow: 0 0 0 2px rgba(41, 154, 119, .1);
outline: none;
}
.yf-dashboard-period__step:disabled { cursor: not-allowed; opacity: .4; }
.yf-dashboard-period__picker { position: relative; min-width: 0; }
.yf-dashboard-period__trigger { width: 100%; justify-content: space-between; gap: 10px; padding: 6px 10px; }
.yf-dashboard-period__trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yf-dashboard-period__trigger i { flex: 0 0 auto; font-size: 10px; }
.yf-dashboard-period__menu {
position: absolute;
z-index: 1080;
top: calc(100% + 7px);
right: 0;
width: 100%;
min-width: 170px;
max-height: min(430px, calc(100vh - 150px));
padding: 7px;
overflow: auto;
border: 1px solid rgba(25, 69, 57, .14);
border-radius: 8px;
background: #fff;
box-shadow: 0 18px 45px rgba(17, 47, 39, .16);
}
.yf-dashboard-period__menu[hidden] { display: none; }
.yf-dashboard-period__menu button {
display: flex;
width: 100%;
min-height: 36px;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 7px 10px;
border: 0;
border-radius: 6px;
background: transparent;
color: #273a34;
font: inherit;
font-size: 13px;
text-align: left;
}
.yf-dashboard-period__menu button i { visibility: hidden; color: #228762; }
.yf-dashboard-period__menu button:hover,
.yf-dashboard-period__menu button:focus-visible { background: #f1f6f4; outline: none; }
.yf-dashboard-period__menu button[aria-selected="true"] { background: #eaf6f1; color: #187858; }
.yf-dashboard-period__menu button[aria-selected="true"] i { visibility: visible; }
.yf-dashboard-period__menu--years { min-width: 112px; }
.yf-table-card-heading__tools { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.yf-table-card-heading--with-view {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
grid-template-areas:
"primary view info"
"action view .";
align-items: start;
row-gap: 3px;
}
.yf-table-card-heading--with-view > .yf-table-card-heading__primary { grid-area: primary; }
.yf-table-card-heading--with-view > .yf-income-view-toolbar { grid-area: view; }
.yf-table-card-heading--with-view > .yf-table-info-button { grid-area: info; }
.yf-table-card-heading--with-view > .yf-table-card-heading__action { grid-area: action; }
.yf-table-card-heading--with-view > .yf-income-view-toolbar { justify-self: center; }
.yf-table-card-heading--with-view > .yf-table-info-button { justify-self: end; }
.yf-table-card-heading--with-view .yf-income-view-toolbar { margin: 0; }
.yf-table-card-heading--with-view + .yf-table-stage { margin-top: 6px; }
.yf-table-card-heading--with-view > .yf-table-card-heading__action { margin-top: 0; }
.yf-income-view-toolbar { grid-template-columns: repeat(2, minmax(0, 112px)); }
.yf-income-view-switch { min-height: 36px; font-size: 12px; }
.income-plan-total-row .table-tag-sum {
min-width: 62px;
padding: 5px 9px;
font-size: 11px;
line-height: 1.2;
}
.income-plan-total-row td:first-child .table-tag-sum { font-size: 11px; }
#income-plans-table thead th:last-child { font-size: 12px; font-weight: 750; }
#income-plans-table tbody tr:not(.income-plan-total-row) td:last-child .table-tag-sum {
min-width: 58px;
padding: 5px 8px;
font-size: 11px;
font-weight: 700;
}
.yf-income-calendar-card.is-selected {
border-color: #2e9d78;
background: linear-gradient(180deg, rgba(235, 249, 243, .72), #fff 24%);
box-shadow: 0 0 0 2px rgba(46, 157, 120, .1), 0 10px 28px rgba(26, 103, 79, .11);
}
.yf-income-calendar-day-cell__number { font-size: 11px; }
.yf-income-calendar-day-cell__categories { min-height: 8px; gap: 4px; }
.yf-income-calendar-day-cell__categories > span { display: inline-flex; }
.yf-income-calendar-day-cell__categories i { width: 7px; height: 7px; }
.yf-income-calendar-day-cell.is-outside.has-income { background: linear-gradient(180deg, #fafcfb 45%, #f0f6f3 100%); }
.yf-income-calendar-day-cell.is-outside.has-income > strong { color: #81918b; }
.yf-income-calendar-card__footer { align-items: center; line-height: 1; }
.yf-income-calendar-card__footer span,
.yf-income-calendar-card__footer strong { min-height: 16px; justify-content: center; white-space: nowrap; }
.yf-income-calendar-card__footer strong { color: #23966f; font-size: 14px; line-height: 1; }
.yf-income-calendar__legend { gap: 8px; }
.yf-income-calendar__legend-item {
min-height: 27px;
padding: 5px 10px;
border: 1px solid rgba(32, 79, 65, .09);
border-radius: 999px;
color: #334b43;
font-size: 10px;
font-weight: 650;
}
body.yf-dashboard-auth.dark-theme .yf-dashboard-commandbar,
html[data-theme="dark"] .yf-dashboard-commandbar { border-color: rgba(196, 221, 213, .12); background: #232b2e; box-shadow: none; }
body.yf-dashboard-auth.dark-theme .yf-dashboard-shell .yf-dashboard-commandbar .yf-section-nav .nav-element,
html[data-theme="dark"] .yf-dashboard-shell .yf-dashboard-commandbar .yf-section-nav .nav-element { color: #aebcb7 !important; }
body.yf-dashboard-auth.dark-theme .yf-dashboard-shell .yf-dashboard-commandbar .yf-section-nav .nav-element:hover,
html[data-theme="dark"] .yf-dashboard-shell .yf-dashboard-commandbar .yf-section-nav .nav-element:hover { color: #eef7f3 !important; background: #2d3938; }
body.yf-dashboard-auth.dark-theme .yf-dashboard-shell .yf-dashboard-commandbar .yf-section-nav .nav-element.nav-element-active,
html[data-theme="dark"] .yf-dashboard-shell .yf-dashboard-commandbar .yf-section-nav .nav-element.nav-element-active { color: #fff !important; background: #276f5e; }
body.yf-dashboard-auth.dark-theme .yf-dashboard-period__step,
body.yf-dashboard-auth.dark-theme .yf-dashboard-period__trigger,
html[data-theme="dark"] .yf-dashboard-period__step,
html[data-theme="dark"] .yf-dashboard-period__trigger { border-color: rgba(196, 221, 213, .14); background: #252e30; color: #c1cfca; }
body.yf-dashboard-auth.dark-theme .yf-dashboard-period__menu,
html[data-theme="dark"] .yf-dashboard-period__menu { border-color: rgba(196, 221, 213, .14); background: #252e30; box-shadow: 0 18px 45px rgba(0, 0, 0, .32); }
body.yf-dashboard-auth.dark-theme .yf-dashboard-period__menu button,
html[data-theme="dark"] .yf-dashboard-period__menu button { color: #d9e4e0; }
body.yf-dashboard-auth.dark-theme .yf-dashboard-period__menu button:hover,
body.yf-dashboard-auth.dark-theme .yf-dashboard-period__menu button:focus-visible,
html[data-theme="dark"] .yf-dashboard-period__menu button:hover,
html[data-theme="dark"] .yf-dashboard-period__menu button:focus-visible { background: #2d3938; }
body.yf-dashboard-auth.dark-theme .yf-dashboard-period__menu button[aria-selected="true"],
html[data-theme="dark"] .yf-dashboard-period__menu button[aria-selected="true"] { background: #29453c; color: #82d4b5; }
body.yf-dashboard-auth.dark-theme .yf-income-calendar-card.is-selected,
html[data-theme="dark"] .yf-income-calendar-card.is-selected { background: linear-gradient(180deg, rgba(43, 79, 67, .7), #252e30 25%); box-shadow: 0 0 0 2px rgba(83, 189, 151, .11), 0 10px 28px rgba(0, 0, 0, .2); }
body.yf-dashboard-auth.dark-theme .yf-income-calendar-card__footer strong,
html[data-theme="dark"] .yf-income-calendar-card__footer strong { color: #78d5b2; }
body.yf-dashboard-auth.dark-theme .yf-income-calendar__legend-item,
html[data-theme="dark"] .yf-income-calendar__legend-item { border-color: rgba(210, 230, 223, .12); color: #e0e9e6; }
@media (max-width: 767.98px) {
.yf-dashboard-commandbar {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.yf-dashboard-shell .yf-dashboard-commandbar .yf-section-nav,
.yf-dashboard-period {
width: 100%;
border: 1px solid rgba(27, 74, 65, .12);
border-radius: 8px;
background: #fff;
box-shadow: 0 4px 15px rgba(22, 60, 49, .035);
}
.yf-dashboard-shell .yf-dashboard-commandbar .yf-section-nav {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 2px;
padding: 3px;
overflow: visible;
}
.yf-dashboard-shell .yf-dashboard-commandbar .yf-section-nav .nav-element {
flex: none;
width: 100%;
min-width: 0;
padding: 7px 3px !important;
font-size: 11px;
white-space: nowrap;
}
.yf-dashboard-period {
grid-template-columns: 32px minmax(0, 1.45fr) minmax(78px, .8fr) 32px;
gap: 6px;
padding: 4px 7px;
}
.yf-dashboard-period__step { width: 32px; min-height: 32px; }
.yf-dashboard-period__trigger { min-height: 32px; }
.yf-dashboard-period__menu { right: auto; left: 0; }
.yf-dashboard-period__picker--year .yf-dashboard-period__menu { right: 0; left: auto; }
.yf-table-card-heading--with-view {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"primary info"
"view view"
"action action";
row-gap: 8px;
}
.yf-table-card-heading--with-view > .yf-income-view-toolbar { justify-self: center; width: min(100%, 230px); }
.yf-table-card-heading--with-view > .yf-table-card-heading__action { width: 100%; margin-top: 0; }
.yf-table-card-heading--with-view > .yf-table-card-heading__action .yf-inline-action { width: 100%; }
.yf-table-card-heading__tools { width: 100%; justify-content: space-between; }
.yf-table-card-heading--with-view .yf-income-view-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yf-income-view-switch { padding-inline: 10px; font-size: 11px; }
body.yf-dashboard-auth.dark-theme .yf-dashboard-commandbar,
html[data-theme="dark"] .yf-dashboard-commandbar { background: transparent; }
body.yf-dashboard-auth.dark-theme .yf-dashboard-shell .yf-dashboard-commandbar .yf-section-nav,
body.yf-dashboard-auth.dark-theme .yf-dashboard-period,
html[data-theme="dark"] .yf-dashboard-shell .yf-dashboard-commandbar .yf-section-nav,
html[data-theme="dark"] .yf-dashboard-period { border-color: rgba(196, 221, 213, .12); background: #232b2e; }
}
@media (max-width: 390px) {
.yf-dashboard-period { grid-template-columns: 32px minmax(0, 1.35fr) minmax(70px, .75fr) 32px; gap: 4px; }
.yf-dashboard-period__step { width: 32px; }
.yf-dashboard-period__trigger { padding-inline: 8px; }
.yf-table-card-heading__tools { gap: 7px; }
.yf-income-view-switch span { font-size: 10px; }
}
/* Expense calendar, modal overlays and guided quests share one dashboard surface. */
.yf-calendar-plan-button {
display: inline-flex;
min-height: 30px;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 76px;
padding: 6px 12px;
white-space: nowrap;
border: 1px solid rgba(31, 133, 102, .24);
border-radius: 6px;
background: #edf7f3;
color: #19775b;
font-size: 11px;
font-weight: 700;
}
.yf-calendar-plan-button:hover,
.yf-calendar-plan-button:focus-visible {
border-color: rgba(31, 133, 102, .48);
background: #e1f2eb;
outline: none;
}
.yf-month-plan-editor {
display: grid;
gap: 10px;
max-height: min(58vh, 520px);
overflow-y: auto;
padding-right: 4px;
}
.yf-month-plan-summary {
display: grid;
grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(110px, .7fr));
gap: 8px;
margin-bottom: 12px;
}
.yf-month-plan-summary > div {
display: grid;
gap: 4px;
min-height: 68px;
padding: 11px 13px;
border: 1px solid rgba(25, 92, 73, .12);
border-radius: 7px;
background: #f3f8f6;
}
.yf-month-plan-summary span { color: #74827d; font-size: 11px; }
.yf-month-plan-summary strong { color: #173b31; font-size: 17px; }
.yf-expense-plan-compose {
display: grid;
gap: 10px;
padding: 13px;
border: 1px solid rgba(25, 92, 73, .12);
border-radius: 8px;
background: #f7faf9;
}
.yf-expense-plan-rows { display: grid; gap: 8px; }
.yf-expense-plan-row {
position: relative;
display: grid;
grid-template-columns: minmax(145px, .72fr) minmax(190px, 1fr) 34px;
align-items: end;
gap: 8px;
padding: 10px;
border: 1px solid rgba(25, 92, 73, .12);
border-radius: 7px;
background: #fff;
}
.yf-expense-plan-row label { display: grid; gap: 5px; min-width: 0; }
.yf-expense-plan-row label > span:first-child { color: #667772; font-size: 12px; font-weight: 700; }
.yf-expense-plan-row .form-control { min-width: 0; min-height: 42px; }
.yf-expense-plan-row > .delete-plan { width: 34px; height: 42px; }
.yf-expense-plan-row[data-deleted="1"] { opacity: .55; background: #fff5f5; }
.yf-expense-plan-row[data-deleted="1"] input { text-decoration: line-through; }
.yf-month-plan-editor__category {
padding: 12px;
border: 1px solid rgba(25, 92, 73, .12);
border-radius: 8px;
background: #f7faf9;
}
.yf-month-plan-editor__category > div:first-child {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.yf-month-plan-editor__category > div:first-child > span {
min-width: 0;
padding: 5px 9px;
border-radius: 999px;
color: #263c35;
font-size: 12px;
font-weight: 700;
}
.yf-month-plan-editor__category > div:first-child > button,
.yf-month-plan-editor__item button {
border: 1px solid rgba(25, 92, 73, .16);
border-radius: 6px;
background: #fff;
color: #24775f;
}
.yf-month-plan-editor__category > div:first-child > button {
padding: 6px 9px;
font-size: 11px;
font-weight: 700;
}
.yf-month-plan-editor__list { display: grid; gap: 7px; margin-top: 10px; }
.yf-month-plan-editor__item { display: grid; grid-template-columns: minmax(130px, .65fr) minmax(180px, 1fr) 36px; gap: 7px; }
.yf-month-plan-editor__item input {
width: 100%;
min-height: 40px;
padding: 8px 11px;
border: 1px solid rgba(25, 92, 73, .16);
border-radius: 7px;
background: #fff;
}
.yf-month-plan-editor__item button { color: #b64e55; }
.yf-month-plan-editor__status { min-height: 18px; margin: 10px 0 0; color: #b64e55; font-size: 11px; }
#expenses-table-stage:not(.is-calendar-view) { margin-top: 12px; }
#expenses-table-stage.is-calendar-view { margin-top: 10px; }
.yf-table-card-heading--with-view + #expenses-table-stage:not(.is-calendar-view) { margin-top: 12px; }
.options.yf-floating-listbox {
z-index: 1095 !important;
margin: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: contain;
border: 1px solid rgba(25, 92, 73, .18) !important;
border-radius: 8px !important;
background: #fff !important;
box-shadow: 0 18px 46px rgba(12, 42, 34, .24) !important;
}
#tasksModal.yf-tutorial-task-focus .yf-task-section:nth-of-type(2) {
pointer-events: auto;
opacity: 1;
filter: none;
}
.yf-task-card h6 { font-size: 15px; }
.yf-task-card__content > p { font-size: 13px; line-height: 1.45; }
.yf-task-card__action .btn { font-size: 13px; }
.yf-task-card__action small,
.yf-task-progress > span { font-size: 11px; }
.yf-youfi-indicator.is-lavender {
background: #8b5cf6;
box-shadow: 0 0 0 3px rgba(139, 92, 246, .2), 0 0 11px rgba(139, 92, 246, .62);
}
.yf-onboarding-focus__actions[hidden] { display: none; }
.yf-income-calendar-day__edit:not(.is-empty) {
grid-template-columns: minmax(0, 1fr) 24px;
grid-template-areas:
"amount icon"
"meta icon";
text-align: center;
}
.yf-income-calendar-day__edit:not(.is-empty) > strong { grid-area: amount; }
.yf-income-calendar-day__edit:not(.is-empty) > span { grid-area: meta; text-align: center; }
.yf-income-calendar-day__edit:not(.is-empty) > i:last-child { grid-area: icon; }
@media (max-width: 767.98px) {
/* Phones show the selected month; the global period control changes it. */
.yf-income-calendar__grid {
grid-template-columns: minmax(0, 1fr);
overflow: visible;
}
.yf-income-calendar-card:not(.is-selected) { display: none; }
}
body.yf-dashboard-auth.dark-theme .modal-content,
html[data-theme="dark"] body.yf-dashboard-auth .modal-content {
border-color: rgba(190, 215, 207, .13);
background: #1c2529;
color: #e9f2ef;
}
body.yf-dashboard-auth.dark-theme .modal-body,
body.yf-dashboard-auth.dark-theme .yf-finance-form,
body.yf-dashboard-auth.dark-theme .yf-expense-plan-compose,
body.yf-dashboard-auth.dark-theme .yf-expense-plan-row,
body.yf-dashboard-auth.dark-theme .yf-month-plan-summary > div,
body.yf-dashboard-auth.dark-theme .yf-month-plan-editor__category,
html[data-theme="dark"] body.yf-dashboard-auth .modal-body,
html[data-theme="dark"] body.yf-dashboard-auth .yf-finance-form,
html[data-theme="dark"] body.yf-dashboard-auth .yf-expense-plan-compose,
html[data-theme="dark"] body.yf-dashboard-auth .yf-expense-plan-row,
html[data-theme="dark"] body.yf-dashboard-auth .yf-month-plan-summary > div,
html[data-theme="dark"] body.yf-dashboard-auth .yf-month-plan-editor__category { background: #1c2529; }
body.yf-dashboard-auth.dark-theme .form-control,
body.yf-dashboard-auth.dark-theme .form-select,
body.yf-dashboard-auth.dark-theme .custom-select .selected,
body.yf-dashboard-auth.dark-theme .yf-day-calendar,
body.yf-dashboard-auth.dark-theme .yf-month-picker,
body.yf-dashboard-auth.dark-theme .yf-month-plan-editor__item input,
body.yf-dashboard-auth.dark-theme .yf-month-plan-editor__category > div:first-child > button,
body.yf-dashboard-auth.dark-theme .yf-month-plan-editor__item button,
html[data-theme="dark"] body.yf-dashboard-auth .form-control,
html[data-theme="dark"] body.yf-dashboard-auth .form-select,
html[data-theme="dark"] body.yf-dashboard-auth .custom-select .selected {
border-color: rgba(190, 215, 207, .14) !important;
background-color: #252e30 !important;
color: #e0ebe7 !important;
}
body.yf-dashboard-auth.dark-theme .options.yf-floating-listbox,
html[data-theme="dark"] body.yf-dashboard-auth .options.yf-floating-listbox {
border-color: rgba(190, 215, 207, .14) !important;
background: #252e30 !important;
box-shadow: 0 18px 46px rgba(0, 0, 0, .42) !important;
}
body.yf-dashboard-auth.dark-theme .yf-calendar-plan-button,
html[data-theme="dark"] body.yf-dashboard-auth .yf-calendar-plan-button {
border-color: rgba(116, 211, 178, .22);
background: rgba(91, 190, 157, .1);
color: #8bd7bd;
}
@media (max-width: 767.98px) {
.yf-month-plan-summary { grid-template-columns: 1fr 1fr; }
.yf-month-plan-summary > div:first-child { grid-column: 1 / -1; }
.yf-expense-plan-row,
.yf-month-plan-editor__item { grid-template-columns: minmax(0, 1fr) 34px; }
.yf-expense-plan-row label:nth-of-type(2),
.yf-month-plan-editor__item .yf-month-plan-comment { grid-column: 1 / -1; }
.yf-expense-plan-row > .delete-plan,
.yf-month-plan-editor__item .yf-month-plan-delete { grid-column: 2; grid-row: 1; }
.yf-month-plan-editor { max-height: min(62vh, 500px); }
.yf-month-plan-editor__category > div:first-child { align-items: flex-start; }
.yf-month-plan-editor__category > div:first-child > button { flex: 0 0 auto; }
.yf-income-calendar-card__header { grid-template-columns: 34px minmax(0, 1fr) auto; }
.yf-calendar-plan-button { padding-inline: 8px; }
}
/* Stable walkthrough surface: the page never changes stacking context. */
.yf-onboarding-focus.is-dashboard-guide {
z-index: 1080;
display: block;
padding: 0;
pointer-events: none;
}
.yf-onboarding-focus.is-dashboard-guide .yf-onboarding-focus__backdrop {
background: transparent;
backdrop-filter: none;
}
.yf-onboarding-focus__spotlight {
--yf-onboarding-shade: rgba(8, 25, 21, .76);
position: fixed;
z-index: 0;
border: 2px solid rgba(102, 219, 181, .82);
border-radius: 10px;
background: transparent;
box-shadow: 0 0 0 6px rgba(71, 187, 150, .16), 0 0 0 100vmax var(--yf-onboarding-shade), 0 14px 42px rgba(0, 0, 0, .24);
clip-path: inset(-100vmax round 10px);
pointer-events: none;
transition: top .28s cubic-bezier(.22, 1, .36, 1), left .28s cubic-bezier(.22, 1, .36, 1), width .28s cubic-bezier(.22, 1, .36, 1), height .28s cubic-bezier(.22, 1, .36, 1);
}
.yf-onboarding-focus__spotlight[hidden] { display: none; }
.yf-onboarding-focus.is-dashboard-guide .yf-onboarding-focus__backdrop { display: none; }
.yf-onboarding-focus.is-dashboard-guide.is-guide-target-offscreen .yf-onboarding-focus__backdrop {
display: block;
background: rgba(8, 25, 21, .76);
backdrop-filter: none;
}
.yf-onboarding-focus__shade {
position: fixed;
z-index: 0;
background: transparent;
pointer-events: auto;
}
.yf-authorized-profile { position: relative; }
.yf-authorized-profile > .dropdown-menu {
right: 0 !important;
left: auto !important;
}
@media (max-width: 575.98px) {
.yf-authorized-profile > .dropdown-menu {
position: absolute !important;
top: calc(100% + 4px) !important;
right: auto !important;
left: 16px !important;
width: min(292px, calc(100vw - 24px));
min-width: 0;
max-height: calc(100dvh - env(safe-area-inset-top) - 64px);
margin: 0;
overflow-y: auto;
transform: none !important;
}
}
.yf-onboarding-focus.is-dashboard-guide:not(.is-guide-ready) .yf-onboarding-focus__spotlight,
.yf-onboarding-focus.is-dashboard-guide:not(.is-guide-ready) .yf-onboarding-focus__shade,
.yf-onboarding-focus.is-dashboard-guide:not(.is-guide-ready) .yf-onboarding-focus__panel {
visibility: hidden;
opacity: 0;
}
.yf-onboarding-focus.is-dashboard-guide.is-guide-positioning .yf-onboarding-focus__spotlight,
.yf-onboarding-focus.is-dashboard-guide.is-guide-positioning .yf-onboarding-focus__panel {
transition: none !important;
}
.yf-onboarding-focus.is-dashboard-guide.is-guide-ready .yf-onboarding-focus__spotlight,
.yf-onboarding-focus.is-dashboard-guide.is-guide-ready .yf-onboarding-focus__shade,
.yf-onboarding-focus.is-dashboard-guide.is-guide-ready .yf-onboarding-focus__panel {
visibility: visible;
opacity: 1;
}
.yf-onboarding-focus.is-dashboard-guide .yf-onboarding-focus__panel {
position: fixed;
z-index: 2;
width: min(calc(100% - 32px), 410px);
max-height: calc(100dvh - 32px);
padding: 20px 22px;
overflow-y: auto;
transform: none !important;
animation: none;
transition: top .28s cubic-bezier(.22, 1, .36, 1), left .28s cubic-bezier(.22, 1, .36, 1), opacity .18s ease;
}
.yf-onboarding-focus.is-dashboard-guide .yf-onboarding-focus__panel h2 {
font-size: clamp(23px, 3vw, 29px);
line-height: 1.12;
}
.yf-onboarding-focus.is-dashboard-guide .yf-onboarding-focus__panel p {
font-size: 14px;
line-height: 1.5;
}
.yf-onboarding-dashboard-target,
.yf-onboarding-control-target {
position: static !important;
z-index: auto !important;
outline: 0 !important;
box-shadow: none !important;
animation: none !important;
}
/* Table view and calendar view use one predictable vertical rhythm. */
#incomes-table-stage:not(.is-calendar-view),
#expenses-table-stage:not(.is-calendar-view),
.yf-table-card-heading--with-view + #incomes-table-stage:not(.is-calendar-view),
.yf-table-card-heading--with-view + #expenses-table-stage:not(.is-calendar-view) {
margin-top: 6px;
}
#incomes-table-stage.is-calendar-view,
#expenses-table-stage.is-calendar-view { margin-top: 10px; }
#incomes-table,
#expenses-table { margin-top: 0 !important; }
/* Calendar header reserves real space for the monthly plan action. */
.yf-income-calendar-card__header {
grid-template-columns: minmax(34px, auto) minmax(0, 1fr) minmax(34px, auto);
}
.yf-calendar-plan-button {
max-width: 100%;
min-width: 68px;
padding-inline: 10px;
}
/* Outside-month cells must remain subdued in the current dark palette. */
body.yf-dashboard-auth.dark-theme .yf-income-calendar-day-cell.is-outside,
html[data-theme="dark"] body.yf-dashboard-auth .yf-income-calendar-day-cell.is-outside {
background: #20282a !important;
color: #687571 !important;
}
body.yf-dashboard-auth.dark-theme .yf-income-calendar-day-cell.is-outside.has-income,
html[data-theme="dark"] body.yf-dashboard-auth .yf-income-calendar-day-cell.is-outside.has-income {
background: linear-gradient(180deg, #20282a 42%, #22312e 100%) !important;
}
body.yf-dashboard-auth.dark-theme .yf-income-calendar-day-cell.is-outside > strong,
html[data-theme="dark"] body.yf-dashboard-auth .yf-income-calendar-day-cell.is-outside > strong {
color: #87958f !important;
}
/* Final dark-modal tokens override the retired blue theme. */
body.yf-dashboard-auth.dark-theme .modal-content,
html[data-theme="dark"] body.yf-dashboard-auth .modal-content {
border-color: rgba(190, 215, 207, .13) !important;
background: #1c2529 !important;
color: #e9f2ef !important;
}
body.yf-dashboard-auth.dark-theme .modal-body,
html[data-theme="dark"] body.yf-dashboard-auth .modal-body {
background: #1c2529 !important;
}
body.yf-dashboard-auth.dark-theme .modal-footer,
html[data-theme="dark"] body.yf-dashboard-auth .modal-footer {
border-color: rgba(190, 215, 207, .11) !important;
background: #202a2e !important;
}
body.yf-dashboard-auth.dark-theme .modal-header,
html[data-theme="dark"] body.yf-dashboard-auth .modal-header {
border-color: rgba(190, 215, 207, .11) !important;
background: linear-gradient(135deg, rgba(68, 151, 128, .1), rgba(28, 37, 41, 0) 62%), #1c2529 !important;
}
body.yf-dashboard-auth .modal-footer {
align-items: center;
gap: 8px;
}
body.yf-dashboard-auth .modal-footer > .btn {
min-height: 40px;
margin: 0;
border-radius: 7px;
font-size: .78rem;
font-weight: 700;
line-height: 1.2;
}
/* Read-only financial records remain inspectable in demo and admin preview. */
.yf-day-editor-dialog.is-readonly .yf-day-editor__add,
.yf-day-editor-dialog.is-readonly .yf-entry-editor__actions,
.yf-day-editor-dialog.is-readonly .modal-footer .btn-primary {
display: none !important;
}
.yf-day-editor-dialog.is-readonly .yf-compact-date :is(.expense-date, .income-date) {
pointer-events: none;
}
.yf-day-editor-dialog.is-readonly .yf-entry-editor__fields .form-control {
cursor: default;
color: #31433e;
background: #f3f7f5;
}
.yf-day-editor-dialog.is-readonly .modal-footer .btn-secondary {
min-width: 118px;
}
body.yf-dashboard-auth.dark-theme .yf-day-editor-dialog.is-readonly .yf-entry-editor__fields .form-control,
html[data-theme="dark"] body.yf-dashboard-auth .yf-day-editor-dialog.is-readonly .yf-entry-editor__fields .form-control {
color: #dce9e4;
background: #202d2b;
}
.yf-entry-editor {
position: relative;
grid-template-columns: minmax(0, 1fr);
padding-right: 46px;
}
.yf-entry-editor .yf-entry-editor__actions {
position: absolute;
top: 10px;
right: 9px;
padding: 0;
}
.yf-entry-editor .yf-entry-action {
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
box-shadow: none;
font-size: 13px;
}
.yf-entry-editor .yf-entry-action:hover,
.yf-entry-editor .yf-entry-action:focus-visible {
background: rgba(197, 73, 80, .1);
}
@media (min-width: 901px) {
:is(.expense-item, .income-item) .yf-entry-editor__fields {
grid-template-columns: minmax(170px, .95fr) minmax(220px, 1.35fr) minmax(100px, .55fr);
}
}
.yf-amount-input > .yf-calculator-trigger {
border-radius: 7px 0 0 7px !important;
}
.yf-amount-input > .form-control {
border-left: 0 !important;
border-radius: 0 7px 7px 0 !important;
}
.yf-calculator__keys .yf-calculator__operator {
display: grid;
place-items: center;
font-family: Arial, sans-serif !important;
font-size: 1.08rem;
line-height: 1;
}
.yf-calculator.is-readonly .yf-calculator__status {
color: #657770;
}
.yf-calculator.is-readonly :is(.yf-calculator__keys button, .yf-calculator__insert):disabled {
cursor: not-allowed;
opacity: .48;
color: #687873;
border-color: rgba(21, 74, 61, .1);
background: #edf2f0;
}
body.yf-dashboard-auth.dark-theme .yf-calculator.is-readonly :is(.yf-calculator__keys button, .yf-calculator__insert):disabled {
color: #8fa19b;
border-color: rgba(185, 211, 202, .1);
background: #22302d;
}
/* Public demo navigation: keep Bootstrap variables from overriding its dark treatment. */
body.yf-dashboard-auth > .yf-public-demo-nav {
display: flex;
min-height: 68px;
align-items: center;
justify-content: flex-start !important;
gap: 18px;
padding: 6px max(clamp(16px, 2vw, 28px), calc((100vw - 1440px) / 2 + 28px)) !important;
background: #102a24 !important;
}
body.yf-dashboard-auth > .yf-public-demo-nav > .yf-authorized-brand {
position: static;
display: block;
flex: 0 0 auto;
margin-right: auto;
transform: none;
}
body.yf-dashboard-auth > .yf-public-demo-nav .yf-public-demo-nav__label {
color: rgba(228, 244, 238, .76) !important;
}
body.yf-dashboard-auth > .yf-public-demo-nav .yf-public-demo-nav__cta {
display: inline-flex;
min-height: 38px;
align-items: center;
justify-content: center;
padding: 8px 14px;
border: 1px solid rgba(101, 217, 174, .48) !important;
border-radius: 7px;
color: #eafff7 !important;
background: rgba(101, 217, 174, .12) !important;
font-size: 12px;
font-weight: 750;
line-height: 1;
text-decoration: none;
}
body.yf-dashboard-auth > .yf-public-demo-nav .yf-public-demo-nav__cta:is(:hover, :focus-visible) {
color: #071d17 !important;
background: #65d9ae !important;
}
@media (max-width: 767.98px) {
body.yf-dashboard-auth > .yf-public-demo-nav {
min-height: 58px;
gap: 10px;
padding-inline: 14px !important;
}
body.yf-dashboard-auth > .yf-public-demo-nav .yf-public-demo-nav__brand img { width: 126px; }
body.yf-dashboard-auth > .yf-public-demo-nav .yf-public-demo-nav__actions { margin-left: auto; }
body.yf-dashboard-auth > .yf-public-demo-nav .yf-public-demo-nav__cta { min-height: 36px; padding-inline: 11px; font-size: 11px; }
}
.yf-calculator__keys .yf-calculator__operator > span {
display: block;
line-height: 1;
transform: translateY(-1px);
}
/* Finance modal actions follow the create-income modal on every flow. */
:is(.yf-finance-form-dialog, .yf-day-editor-dialog, .yf-income-calendar-day-dialog, .yf-tag-edit-dialog) .modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 13px 20px 17px;
}
:is(.yf-finance-form-dialog, .yf-day-editor-dialog, .yf-income-calendar-day-dialog, .yf-tag-edit-dialog) .modal-footer .btn {
min-height: 40px;
margin: 0;
padding: 9px 14px;
border-radius: 7px;
font-size: .78rem;
font-weight: 700;
line-height: 1.2;
}
:is(.yf-finance-form-dialog, .yf-day-editor-dialog, .yf-income-calendar-day-dialog, .yf-tag-edit-dialog) .modal-footer .btn-secondary {
border-color: rgba(65, 86, 79, .2);
background: #eef3f1;
color: #52635e;
}
:is(.yf-finance-form-dialog, .yf-day-editor-dialog, .yf-income-calendar-day-dialog, .yf-tag-edit-dialog) .modal-footer .btn-primary {
border-color: #1a8564;
background: #1a8564;
color: #fff;
}
body.yf-dashboard-auth.dark-theme :is(.yf-finance-form-dialog, .yf-day-editor-dialog, .yf-income-calendar-day-dialog, .yf-tag-edit-dialog) .modal-footer .btn-secondary,
html[data-theme="dark"] body.yf-dashboard-auth :is(.yf-finance-form-dialog, .yf-day-editor-dialog, .yf-income-calendar-day-dialog, .yf-tag-edit-dialog) .modal-footer .btn-secondary {
border-color: rgba(183, 215, 206, .12);
background: #293438;
color: #c4d1cd;
}
.yf-income-calendar-day__summary span {
overflow: visible;
font-size: 13px;
line-height: 1.25;
text-overflow: clip;
white-space: normal;
}
.yf-income-calendar-day__summary strong { font-size: 16px; }
.yf-income-calendar-day__row { min-height: 64px; }
.yf-income-calendar-day__tag { font-size: 13px; }
.yf-income-calendar-day__edit strong { font-size: 14px; }
.yf-income-calendar-day__edit span { font-size: 11px; }
.yf-income-calendar-day__edit.is-empty { font-size: 13px; }
.yf-income-calendar-day__note { font-size: 12px; }
@media (max-width: 767.98px) {
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea,
[contenteditable="true"] {
font-size: 16px !important;
}
.yf-onboarding-focus.is-dashboard-guide .yf-onboarding-focus__panel {
width: min(calc(100% - 24px), 390px);
max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
padding: 18px;
}
.yf-calendar-plan-button {
min-width: 64px;
padding-inline: 8px;
}
:is(.yf-finance-form-dialog, .yf-day-editor-dialog, .yf-income-calendar-day-dialog, .yf-tag-edit-dialog) .modal-footer {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
:is(.yf-finance-form-dialog, .yf-day-editor-dialog, .yf-income-calendar-day-dialog, .yf-tag-edit-dialog) .modal-footer .btn {
width: 100%;
}
}
/* Analytics interpretation and KPI stabilization */
.finance-analytics-overview-heading {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto 34px;
align-items: center;
gap: 12px;
}
#financial-overview-card .finance-analytics-overview-heading .card-title { padding-right: 0; }
#financial-overview-card .finance-analytics-overview-heading .dashboard-info-button {
position: static;
justify-self: end;
}
.finance-month-state {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 30px;
padding: 5px 11px;
border: 1px solid currentColor;
border-radius: 999px;
color: #64748b;
background: #f8faf9;
font: 750 12px Manrope, sans-serif;
cursor: help;
}
.finance-month-state__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.finance-month-state--stable { color: #17865f; background: #eaf7f1; }
.finance-month-state--attention { color: #b97812; background: #fff7e7; }
.finance-month-state--risk { color: #d34851; background: #fff0f1; }
.finance-month-state--insufficient { color: #3579bc; background: #eef6ff; }
.finance-month-state-popover {
position: absolute;
z-index: 12;
top: calc(100% + 9px);
right: 40px;
width: min(360px, calc(100vw - 40px));
padding: 12px 14px;
border: 1px solid #d9e5e1;
border-radius: 8px;
color: #31443e;
background: #fff;
box-shadow: 0 14px 30px rgba(20, 45, 37, .14);
font-size: 12px;
line-height: 1.55;
}
.finance-section-heading,
.finance-chart-heading {
display: flex;
align-items: center;
gap: 10px;
}
.finance-section-heading__icon {
display: grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 50%;
color: #168166;
background: #e8f6f0;
}
.finance-section-heading--stacked { align-items: flex-start; }
.finance-section-heading--stacked p { margin: 4px 0 0; color: #7a8984; font-size: 12px; }
.finance-month-insights {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 16px;
}
.finance-month-insight {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: 12px;
align-items: start;
min-height: 112px;
padding: 16px;
border: 1px solid #deebe6;
border-radius: 8px;
background: #f7fbf9;
}
.finance-month-insight--negative { border-color: #f1d5d7; background: #fff5f5; }
.finance-month-insight__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #168a65; background: #e3f5ed; font-size: 18px; }
.finance-month-insight--negative .finance-month-insight__icon { color: #d94b54; background: #ffe6e8; }
.finance-month-insight strong { display: block; color: #21352f; font-size: 13px; line-height: 1.4; }
.finance-month-insight p { margin: 7px 0 0; color: #687a74; font-size: 11px; line-height: 1.55; }
.finance-picture-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 18px;
}
.finance-picture-column { min-width: 0; padding: 0 24px; border-left: 1px solid #e0e9e6; }
.finance-picture-column:first-child { padding-left: 0; border-left: 0; }
.finance-picture-column:last-child { padding-right: 0; }
.finance-picture-column h6 { margin: 0 0 10px; color: #263a34; font-size: 13px; font-weight: 800; text-transform: uppercase; }
.finance-picture-legend { display: flex; flex-wrap: wrap; gap: 10px; color: #71817c; font-size: 10px; }
.finance-picture-legend span { display: inline-flex; align-items: center; gap: 5px; }
.finance-picture-legend i { width: 8px; height: 8px; border-radius: 50%; }
.finance-picture-legend .is-fact { background: #2fb985; }
.finance-picture-legend .is-plan { background: #4285df; }
.finance-picture-legend .is-forecast { border: 1px dashed #73a6df; background: #fff; }
.finance-picture-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 14px 0 8px; }
.finance-picture-values strong { min-width: 0; color: #273b35; font-size: 12px; overflow-wrap: anywhere; }
.finance-picture-values strong:nth-child(2) { text-align: center; }
.finance-picture-values strong:nth-child(3) { text-align: right; }
.finance-picture-values strong.is-positive { color: #14875f; }
.finance-picture-values strong.is-negative { color: #dc4d55; }
.finance-picture-scale { position: relative; height: 24px; overflow: hidden; border-radius: 6px; background: #eef2f1; }
.finance-picture-scale > span { position: absolute; left: 0; height: 6px; border-radius: 999px; transition: width .3s ease, left .3s ease; }
.finance-picture-scale > .is-fact { top: 2px; background: #33b985; }
.finance-picture-scale > .is-plan { top: 9px; background: #4285df; }
.finance-picture-scale > .is-forecast { top: 16px; border: 1px dashed #4d91d9; background: rgba(77,145,217,.16); }
.finance-picture-scale--signed { background: linear-gradient(90deg, #f8e8e9 0 50%, #e9f6f0 50% 100%); }
.finance-picture-scale__zero { position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 1px; background: #899892; }
.finance-picture-scale--signed > span[data-direction="negative"] { background: #df5961; }
.finance-picture-column > p { min-height: 34px; margin: 9px 0 0; color: #6f7f7a; font-size: 10px; line-height: 1.5; }
.finance-chart-heading { justify-content: space-between; margin-bottom: 12px; padding-right: 42px; }
.finance-chart-heading strong { flex: 0 0 auto; white-space: nowrap; font-size: 15px; }
.finance-chart-heading .finance-section-heading { min-width: 0; }
.finance-chart-heading .finance-section-heading .card-title { overflow-wrap: normal; word-break: normal; }
.finance-chart-heading strong.is-positive { color: #168c63; }
.finance-chart-heading strong.is-negative { color: #dc4d55; }
body.yf-dashboard-auth.dark-theme .finance-month-state-popover,
body.yf-dashboard-auth.dark-theme .finance-month-insight,
body.yf-dashboard-auth.dark-theme .finance-picture-card { border-color: rgba(158,201,187,.16); color: #dfeae6; background: #202a2c; }
body.yf-dashboard-auth.dark-theme .finance-month-state--stable { color: #79d7b1; background: #17342d; border-color: #326b59; }
body.yf-dashboard-auth.dark-theme .finance-month-state--attention { color: #f0bd61; background: #392f1f; border-color: #725b2d; }
body.yf-dashboard-auth.dark-theme .finance-month-state--risk { color: #ff9298; background: #3a2428; border-color: #744049; }
body.yf-dashboard-auth.dark-theme .finance-month-state--insufficient { color: #8dc5f4; background: #213140; border-color: #3e607a; }
body.yf-dashboard-auth.dark-theme .finance-month-insight--negative { background: #302426; }
body.yf-dashboard-auth.dark-theme .finance-month-insight strong,
body.yf-dashboard-auth.dark-theme .finance-picture-column h6,
body.yf-dashboard-auth.dark-theme .finance-picture-values strong { color: #edf5f2; }
body.yf-dashboard-auth.dark-theme .finance-month-insight p,
body.yf-dashboard-auth.dark-theme .finance-picture-column > p,
body.yf-dashboard-auth.dark-theme .finance-section-heading--stacked p { color: #a6b6b0; }
body.yf-dashboard-auth.dark-theme .finance-picture-column { border-left-color: rgba(158,201,187,.14); }
body.yf-dashboard-auth.dark-theme .finance-picture-scale { background: #34403f; }
body.yf-dashboard-auth.dark-theme .finance-picture-scale--signed { background: linear-gradient(90deg, rgba(157,56,64,.25) 0 50%, rgba(36,137,102,.22) 50% 100%); }
@media (max-width: 991.98px) {
.finance-month-insights,
.finance-picture-grid { grid-template-columns: 1fr; }
.finance-picture-column { padding: 18px 0; border-top: 1px solid #e0e9e6; border-left: 0; }
.finance-picture-column:first-child { padding-top: 0; border-top: 0; }
.finance-picture-column:last-child { padding-bottom: 0; }
body.yf-dashboard-auth.dark-theme .finance-picture-column { border-top-color: rgba(158,201,187,.14); border-left: 0; }
}
@media (max-width: 767.98px) {
.expense-month-card__metrics { grid-template-columns: 1fr; }
.finance-analytics-overview-heading { grid-template-columns: minmax(0, 1fr) 34px; }
.finance-analytics-overview-heading .card-title { grid-column: 1; }
.finance-analytics-overview-heading .dashboard-info-button { grid-column: 2; grid-row: 1; }
.finance-month-state { grid-column: 1 / -1; justify-self: start; }
.finance-month-state-popover { right: 0; top: calc(100% + 7px); }
.finance-month-insight { min-height: 0; }
.finance-picture-values strong { font-size: 11px; }
}
/* Final analytics composition */
.finance-analytics-overview-title { min-width: 0; }
.finance-month-state__icon { flex: 0 0 auto; font-size: 13px; line-height: 1; }
.finance-section-heading__icon,
.finance-analytics-title-icon {
border-radius: 50%;
color: #168166;
background: #e8f6f0;
}
.finance-chart-card-heading { margin-bottom: 12px; }
.finance-analytics-card-title { font-size: 15px; }
.finance-month-insights { gap: 14px; margin-top: 14px; }
.finance-month-insight {
grid-template-columns: 44px minmax(0, 1fr);
gap: 14px;
min-height: 104px;
padding: 17px;
border-color: #dcebe5;
background: #f2faf6;
}
.finance-month-insight--negative { border-color: #f2d5d8; background: #fff1f2; }
.finance-month-insight__icon { width: 44px; height: 44px; font-size: 20px; }
.finance-month-insight strong { font-size: 14px; line-height: 1.35; }
.finance-month-insight p { margin-top: 6px; font-size: 12px; line-height: 1.5; }
.finance-picture-grid { margin-top: 16px; }
.finance-picture-column { padding-inline: 22px; }
.finance-picture-column h6 { margin-bottom: 9px; font-size: 13px; }
.finance-picture-legend { gap: 12px; font-size: 11px; }
.finance-picture-legend i { width: 9px; height: 9px; }
.finance-picture-values { gap: 8px; margin: 15px 0 9px; }
.finance-picture-values strong { font-size: 13px; line-height: 1.25; }
.finance-picture-scale {
height: 16px;
overflow: hidden;
border-radius: 5px;
background: #e7edeb;
}
.finance-picture-scale > span {
top: 4px;
height: 8px;
border-radius: 999px;
}
.finance-picture-scale > .is-plan { z-index: 1; top: 4px; background: #4285df; }
.finance-picture-scale > .is-forecast {
z-index: 2;
top: 2px;
height: 12px;
border: 1px dashed #4d91d9;
background: transparent;
}
.finance-picture-scale > .is-fact { z-index: 3; top: 4px; background: #33b985; }
.finance-picture-scale--signed { background: linear-gradient(90deg, #f8e8e9 0 50%, #e9f6f0 50% 100%); }
.finance-picture-scale--signed > .is-plan,
.finance-picture-scale--signed > .is-plan[data-direction="negative"] { background: #4285df; }
.finance-picture-scale--signed > .is-fact[data-direction="negative"] { background: #df5961; }
.finance-picture-scale--signed > .is-forecast[data-direction="negative"] { border-color: #df5961; background: transparent; }
.finance-picture-column.has-forecast-overrun .finance-picture-scale > .is-forecast { border-color: #df5961; }
.finance-picture-captions {
display: grid;
gap: 3px;
min-height: 36px;
margin-top: 9px;
color: #667873;
font-size: 11px;
line-height: 1.45;
}
.finance-picture-captions span { display: block; }
body.yf-dashboard-auth.dark-theme .finance-section-heading__icon,
body.yf-dashboard-auth.dark-theme .finance-analytics-title-icon { color: #69d7b1; background: rgba(68, 194, 150, .14); }
body.yf-dashboard-auth.dark-theme .finance-month-insight { border-color: rgba(106, 194, 164, .2); background: #21312e; }
body.yf-dashboard-auth.dark-theme .finance-month-insight--negative { border-color: rgba(224, 92, 102, .24); background: #342628; }
body.yf-dashboard-auth.dark-theme .finance-picture-captions { color: #a6b6b0; }
body.yf-dashboard-auth.dark-theme .finance-picture-scale { background: #364240; }
body.yf-dashboard-auth.dark-theme .finance-picture-legend .is-forecast { background: #202a2c; }
@media (max-width: 991.98px) {
.finance-picture-column { padding: 17px 0; }
}
@media (max-width: 767.98px) {
.finance-analytics-overview-heading { grid-template-columns: minmax(0, 1fr) 34px; }
.finance-analytics-overview-title { grid-column: 1; grid-row: 1; }
.finance-analytics-overview-heading .dashboard-info-button { grid-column: 2; grid-row: 1; }
.finance-month-state { grid-column: 1 / -1; grid-row: 2; }
.finance-month-insight { grid-template-columns: 42px minmax(0, 1fr); padding: 15px; }
.finance-month-insight__icon { width: 42px; height: 42px; }
.finance-month-insight strong { font-size: 14px; }
.finance-month-insight p { font-size: 12px; }
.finance-picture-values strong { font-size: 12px; }
.finance-picture-captions { font-size: 11px; }
}
/* Compact annual income KPI without changing the monthly KPI component. */
.yf-income-kpi--year {
gap: 9px;
}
.yf-income-kpi--year .yf-income-kpi__top-grid--year-summary {
gap: 8px;
}
.yf-income-kpi--year .yf-income-kpi__metric--year-summary {
grid-template-columns: 28px minmax(0, 1fr);
column-gap: 7px;
min-height: 52px;
padding: 7px;
}
.yf-income-kpi--year .yf-income-kpi__metric--year-summary > i,
.yf-income-kpi--year .yf-income-kpi__rows--year > div > i {
width: 28px;
height: 28px;
font-size: 11px;
}
.yf-income-kpi--year .yf-income-kpi__metric--year-summary > span {
font-size: 10px;
line-height: 1.15;
}
.yf-income-kpi--year .yf-income-kpi__metric--year-summary > strong {
font-size: 14px;
line-height: 1.1;
overflow-wrap: normal;
word-break: normal;
}
.yf-income-kpi--year .yf-income-kpi__rows--year > div {
grid-template-columns: 30px minmax(0, 1fr) minmax(96px, auto);
gap: 7px;
min-height: 37px;
}
.yf-income-kpi--year .yf-income-kpi__rows--year > div > span {
font-size: 11px;
line-height: 1.25;
}
.yf-income-kpi--year .yf-income-kpi__rows--year > div > strong {
font-size: 12px;
line-height: 1.2;
}
.yf-card-heading--tag-list {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 9px;
padding-right: 42px;
}
.yf-card-heading--tag-list .yf-inline-action {
align-self: flex-start;
}
.yf-summary-card-with-info .card-body {
position: relative;
}
.yf-summary-card-with-info .yf-card-heading {
padding-right: 42px;
}
.yf-summary-card-with-info .yf-summary-card-info {
position: absolute;
z-index: 2;
top: 16px;
right: 16px;
margin: 0;
}
/* Analytics preview cards: stable header, scrollable preview, fixed action. */
.finance-analytics-insight-card .finance-analytics-insight-layout {
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: 12px;
min-height: 304px;
height: 100%;
padding: 18px;
}
.finance-analytics-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-width: 0;
}
.finance-analytics-card-header .finance-analytics-card-title {
min-width: 0;
margin: 0 !important;
color: #172622;
font-size: 14px;
line-height: 1.25;
}
.finance-analytics-card-info {
flex: 0 0 auto;
}
.finance-analytics-card-content {
min-height: 0;
overflow: auto;
scrollbar-gutter: stable;
}
.finance-analytics-card-footer {
margin-top: 0;
}
.finance-analytics-detail-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-height: 40px;
padding: 9px 12px;
border: 1px solid #dce7e3;
border-radius: 6px;
color: #42564f;
background: #f8fbfa;
font-size: 12px;
font-weight: 700;
text-align: left;
transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.finance-analytics-detail-link:hover,
.finance-analytics-detail-link:focus-visible {
border-color: #8bcab5;
color: #147b5e;
background: #eff8f4;
outline: 0;
}
.finance-analytics-trend-table {
display: grid;
overflow: visible;
border: 0;
border-radius: 0;
}
.finance-analytics-trend-row {
grid-template-columns: minmax(84px, 1fr) auto 104px;
gap: 10px;
min-height: 55px;
padding: 8px 2px;
border-top: 0;
border-bottom: 1px solid #e4ece9;
background: transparent;
}
.finance-analytics-trend-row:last-child {
border-bottom: 0;
}
.finance-analytics-trend-row__label {
min-width: 0;
color: #42554f;
font-size: 12px;
font-weight: 700;
}
.finance-analytics-trend-row__change {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
white-space: nowrap;
}
.finance-analytics-trend-row.is-positive .finance-analytics-trend-row__change { color: #168b63; }
.finance-analytics-trend-row.is-negative .finance-analytics-trend-row__change { color: #da4d55; }
.finance-analytics-trend-row.is-warning .finance-analytics-trend-row__change { color: #b97812; }
.finance-analytics-trend-row.is-neutral .finance-analytics-trend-row__change { color: #778780; }
.finance-trend-sparkline {
display: block;
width: 104px;
height: 34px;
overflow: visible;
}
.finance-trend-sparkline polyline {
fill: none;
stroke: #7a8b85;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.finance-trend-sparkline.is-positive polyline { stroke: #29a878; }
.finance-trend-sparkline.is-negative polyline { stroke: #e05a62; }
.finance-trend-sparkline.is-warning polyline { stroke: #d39b39; }
.finance-trend-sparkline--empty { height: 1px; border-top: 1px dashed #cbd6d2; }
.finance-analytics-insight-card .finance-analytics-insight-note {
grid-template-columns: 30px minmax(0, 1fr);
min-height: 48px;
margin: 0;
padding: 9px 10px;
font-size: 11px;
}
.finance-analytics-insight-card .finance-analytics-insight-note i {
width: 28px;
height: 28px;
}
.finance-analytics-anomaly-state {
display: grid;
align-content: start;
min-height: 0;
}
.finance-analytics-anomaly-row {
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
padding: 11px 2px;
border-bottom: 1px solid #e4ece9;
}
.finance-analytics-anomaly-row:last-child { border-bottom: 0; }
.finance-analytics-anomaly-row__main,
.finance-analytics-anomaly-row__value { display: grid; gap: 4px; min-width: 0; }
.finance-analytics-anomaly-row__main strong { overflow-wrap: anywhere; font-size: 12px; }
.finance-analytics-anomaly-row__main span { color: #778780; font-size: 10px; line-height: 1.35; }
.finance-analytics-anomaly-row__value { justify-items: end; text-align: right; }
.finance-analytics-anomaly-row__value strong { font-size: 12px; }
.finance-analytics-severity-badge {
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 3px 7px;
border-radius: 999px;
color: #a66616;
background: #fff4df;
font-size: 9px;
font-weight: 750;
white-space: nowrap;
}
.finance-analytics-anomaly-row.is-elevated .finance-analytics-severity-badge { color: #bb621a; background: #fff0e1; }
.finance-analytics-anomaly-row.is-strong .finance-analytics-severity-badge { color: #d4444e; background: #ffeaec; }
.finance-analytics-regular-list,
.finance-analytics-regular-rows {
display: grid;
gap: 0;
}
.finance-analytics-regular-summary {
display: grid;
gap: 2px;
margin-bottom: 7px;
padding-bottom: 9px;
border-bottom: 1px solid #e4ece9;
}
.finance-analytics-regular-summary strong { color: #168b63; font-size: 15px; }
.finance-analytics-regular-summary span { color: #778780; font-size: 10px; }
.finance-analytics-regular-row {
grid-template-columns: 28px minmax(0, 1fr) auto auto;
gap: 8px;
min-height: 38px;
padding: 6px 2px;
border-bottom: 1px solid #e7eeeb;
}
.finance-analytics-regular-row:last-child { border-bottom: 0; }
.finance-analytics-regular-row__icon {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
color: #367fd0;
background: #edf4ff;
font-size: 11px;
}
.finance-analytics-regular-row__name { min-width: 0; overflow: hidden; color: #52655e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.finance-analytics-regular-row strong { font-size: 11px; }
.finance-analytics-regular-row > span:last-child { min-width: 34px; font-size: 10px; }
.finance-analytics-empty-state {
min-height: 150px;
}
.finance-analytics-empty-state__icon {
width: 66px;
height: 66px;
flex-basis: 66px;
font-size: 2rem;
}
.finance-analytics-detail-list {
display: grid;
}
.yf-analytics-detail-dialog {
max-width: 680px;
}
.yf-analytics-detail-modal .modal-body {
max-height: min(66vh, 620px);
overflow-y: auto;
}
body.yf-dashboard-auth.dark-theme .finance-analytics-card-header .finance-analytics-card-title,
body.yf-dashboard-auth.dark-theme .finance-analytics-trend-row__label,
body.yf-dashboard-auth.dark-theme .finance-analytics-regular-row__name { color: #e9f2ef; }
body.yf-dashboard-auth.dark-theme .finance-analytics-trend-row,
body.yf-dashboard-auth.dark-theme .finance-analytics-anomaly-row,
body.yf-dashboard-auth.dark-theme .finance-analytics-regular-row,
body.yf-dashboard-auth.dark-theme .finance-analytics-regular-summary { border-color: rgba(180, 211, 201, .12); background: transparent; }
body.yf-dashboard-auth.dark-theme .finance-analytics-detail-link { border-color: rgba(180, 211, 201, .16); color: #c2d1cc; background: #263133; }
body.yf-dashboard-auth.dark-theme .finance-analytics-detail-link:hover,
body.yf-dashboard-auth.dark-theme .finance-analytics-detail-link:focus-visible { border-color: #579d87; color: #7bd0b0; background: #2a3937; }
body.yf-dashboard-auth.dark-theme .finance-analytics-severity-badge { color: #f0bd70; background: rgba(178, 113, 24, .2); }
body.yf-dashboard-auth.dark-theme .finance-analytics-anomaly-row.is-strong .finance-analytics-severity-badge { color: #ff9aa0; background: rgba(190, 57, 67, .2); }
body.yf-dashboard-auth.dark-theme .finance-analytics-regular-row__icon { color: #8dbdf3; background: rgba(58, 126, 199, .18); }
body.yf-dashboard-auth.dark-theme .finance-trend-sparkline--empty { border-color: rgba(180, 211, 201, .2); }
body.yf-dashboard-auth.dark-theme .yf-analytics-detail-modal { color: #e7f0ed; background: #202a2c; }
@media (max-width: 1199.98px) {
.yf-income-kpi--year .yf-income-kpi__top-grid--year-summary {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 991.98px) {
.finance-analytics-insight-card .finance-analytics-insight-layout {
min-height: 0;
height: auto;
}
.finance-analytics-card-content {
max-height: none;
overflow: visible;
}
}
@media (max-width: 575.98px) {
.yf-income-kpi--year .yf-income-kpi__top-grid--year-summary {
grid-template-columns: 1fr;
}
.yf-income-kpi--year .yf-income-kpi__rows--year > div {
grid-template-columns: 30px minmax(0, 1fr);
grid-template-areas: "icon label" "icon value";
min-height: 44px;
padding-block: 6px;
}
.yf-income-kpi--year .yf-income-kpi__rows--year > div > strong {
text-align: left;
}
.yf-summary-card-with-info .yf-summary-card-info {
top: 14px;
right: 14px;
}
.finance-analytics-trend-row {
grid-template-columns: minmax(76px, 1fr) auto 86px;
gap: 7px;
}
.finance-trend-sparkline { width: 86px; }
.finance-analytics-anomaly-row { grid-template-columns: 1fr; gap: 7px; }
.finance-analytics-anomaly-row__value { justify-items: start; text-align: left; }
.finance-analytics-regular-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
.finance-analytics-regular-row > span:last-child { grid-column: 2 / -1; text-align: left; }
}
/* Final analytics overrides must stay after the legacy dashboard bundle. */
.yf-income-kpi--year .yf-income-kpi__metric--year-summary { grid-template-columns: 26px minmax(0, 1fr); }
.yf-income-kpi--year .yf-income-kpi__metric--year-summary > i,
.yf-income-kpi--year .yf-income-kpi__rows--year > div > i { width: 26px; height: 26px; }
.yf-income-kpi--year .yf-income-kpi__metric--year-summary > span { font-size: 12px; }
.yf-income-kpi--year .yf-income-kpi__rows--year > div { grid-template-columns: 28px minmax(0, 1fr) minmax(96px, auto); }
.yf-income-kpi--year .yf-income-kpi__rows--year > div > span,
.yf-income-kpi--year .yf-income-kpi__rows--year > div > strong { font-size: 13px; }
.finance-month-insight { min-height: 0; }
.finance-month-insight p { font-size: 13px; }
.finance-picture-grid { gap: 0; margin-top: 26px; }
.finance-picture-column { padding: 0 28px; }
.finance-picture-column__heading h6 { margin: 0; font-size: 20px; text-transform: none; }
.finance-picture-scale { height: 16px; margin-top: 22px; overflow: visible; border-radius: 999px; }
.finance-picture-scale__fill { top: 0 !important; bottom: 0; height: auto !important; }
.finance-analytics-insight-card .finance-analytics-insight-layout { min-height: 334px; gap: 10px; }
.finance-analytics-trend-table { height: 100%; align-content: space-evenly; }
.finance-analytics-trend-row { grid-template-columns: minmax(88px, 1fr) minmax(88px, auto) 120px; min-height: 66px; gap: 10px; padding: 9px 2px; }
.finance-analytics-trend-row__label { font-size: 13px; }
.finance-analytics-trend-row__change { justify-self: end; font-size: 14px; }
.finance-trend-sparkline { width: 120px; height: 46px; }
.finance-trend-sparkline polygon { fill: currentColor; opacity: .12; }
.finance-trend-sparkline polyline { stroke: currentColor; stroke-width: 2.6; }
.finance-trend-sparkline circle { fill: currentColor; stroke: #fff; stroke-width: 1.5; }
.finance-trend-sparkline.is-positive { color: #28a978; }
.finance-trend-sparkline.is-negative { color: #df565e; }
.finance-trend-sparkline.is-warning { color: #d39531; }
.finance-analytics-insight-card .finance-analytics-insight-note { min-height: 0; padding: 10px 11px; font-size: 12px; }
.finance-analytics-anomaly-row { min-height: 96px; padding: 14px 3px; }
.finance-analytics-anomaly-row__main { gap: 7px; }
.finance-analytics-anomaly-row__main strong { font-size: 14px; }
.finance-analytics-anomaly-row__main span { font-size: 11px; }
.finance-analytics-anomaly-row__value { gap: 8px; }
.finance-analytics-anomaly-row__value > div { display: flex; align-items: baseline; gap: 9px; }
.finance-analytics-anomaly-row__value strong { font-size: 15px; }
.finance-analytics-anomaly-row__value b { color: #dc4d55; font-size: 14px; }
.finance-analytics-severity-badge { min-height: 25px; padding-inline: 9px; font-size: 10px; }
.finance-analytics-regular-summary { gap: 4px; margin-bottom: 9px; }
.finance-analytics-regular-summary strong { font-size: 17px; }
.finance-analytics-regular-summary span { font-size: 11px; }
.finance-analytics-regular-row { min-height: 42px; }
.finance-analytics-regular-row__name,
.finance-analytics-regular-row strong { font-size: 12px; }
.yf-analytics-detail-modal .modal-body { font-size: 14px; line-height: 1.55; }
@media (min-width: 992px) {
#income-month-kpi-card .card-body { display: flex; }
#income-month-kpi-card .yf-income-kpi--month { width: 100%; margin-block: auto; }
}
@media (max-width: 991.98px) {
.finance-picture-column { padding: 22px 0; border-top: 1px solid #dfe8e5; border-left: 0; }
.finance-picture-column:first-child { padding-top: 0; border-top: 0; }
.finance-picture-column:last-child { padding-bottom: 0; }
.finance-analytics-insight-card .finance-analytics-insight-layout { min-height: 0; }
}
@media (max-width: 575.98px) {
.finance-picture-column__heading h6 { font-size: 18px; }
.finance-analytics-trend-row { grid-template-columns: minmax(74px, 1fr) auto 92px; min-height: 62px; }
.finance-trend-sparkline { width: 92px; height: 42px; }
.finance-analytics-anomaly-row { grid-template-columns: 1fr; min-height: 0; }
}
/* Analytics charts: compact, readable ECharts surfaces. */
.finance-picture-grid { gap: 0; margin-top: 14px; }
.finance-picture-column { padding: 0 20px; }
.finance-picture-column__heading { gap: 9px; }
.finance-picture-column__icon { width: 34px; height: 34px; font-size: 14px; }
.finance-picture-column__heading h6 { margin: 0; font-size: 15px; line-height: 1.25; text-transform: none; }
.finance-picture-chart { width: 100%; height: 132px; margin-top: 8px; }
.finance-picture-status { min-height: 56px; margin-top: 10px; padding: 10px 11px; }
.finance-picture-status__icon { width: 32px; height: 32px; font-size: 13px; }
.finance-picture-status strong { font-size: 13px; line-height: 1.3; }
.finance-picture-status span { font-size: 11px; line-height: 1.4; }
.finance-analytics-trend-row__label { font-size: 14px; }
.finance-analytics-trend-row__change { font-size: 14px; }
.finance-analytics-trend-row__change i { font-size: 17px; line-height: 1; }
.finance-trend-sparkline { width: 120px; height: 48px; overflow: hidden; }
.yf-analytics-detail-modal .finance-analytics-regular-summary { gap: 5px; padding-bottom: 13px; }
.yf-analytics-detail-modal .finance-analytics-regular-summary strong { font-size: 19px; }
.yf-analytics-detail-modal .finance-analytics-regular-summary span { font-size: 13px; }
.yf-analytics-detail-modal .finance-analytics-regular-row { grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 11px; min-height: 58px; padding: 10px 2px; }
.yf-analytics-detail-modal .finance-analytics-regular-row__icon { width: 34px; height: 34px; font-size: 14px; }
.yf-analytics-detail-modal .finance-analytics-regular-row__name,
.yf-analytics-detail-modal .finance-analytics-regular-row strong { font-size: 14px; }
.yf-analytics-detail-modal .finance-analytics-regular-row > span:last-child { font-size: 12px; }
.yf-analytics-detail-modal .modal-title { font-size: 20px; line-height: 1.25; }
.yf-analytics-detail-modal .yf-modal-eyebrow { font-size: 11px; }
.yf-analytics-detail-modal .modal-body { font-size: 15px; line-height: 1.6; }
.yf-analytics-detail-modal .modal-footer .btn { font-size: 14px; }
body.yf-dashboard-auth.dark-theme .finance-picture-chart canvas { filter: none; }
@media (max-width: 991.98px) {
.finance-picture-column { padding: 18px 0; }
.finance-picture-column__heading h6 { font-size: 15px; }
.finance-picture-chart { height: 126px; }
}
@media (max-width: 575.98px) {
.finance-analytics-trend-row { grid-template-columns: minmax(92px, 1fr) auto 96px; }
.finance-trend-sparkline { width: 96px; height: 44px; }
.yf-analytics-detail-modal .finance-analytics-regular-row { grid-template-columns: 34px minmax(0, 1fr); }
.yf-analytics-detail-modal .finance-analytics-regular-row strong,
.yf-analytics-detail-modal .finance-analytics-regular-row > span:last-child { grid-column: 2; text-align: left; }
}
/* Analytics clarity pass: forecast semantics, yearly trends and mobile comparison. */
.finance-picture-heading { position: relative; padding-right: 44px; }
.finance-picture-heading .finance-section-heading__info { position: absolute; top: 0; right: 0; }
.finance-picture-summary {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 14px;
padding: 11px 13px;
border-left: 3px solid #2a9a78;
border-radius: 4px;
color: #314740;
background: #f3f8f6;
font-size: 13px;
font-weight: 650;
line-height: 1.5;
}
.finance-picture-summary i { flex: 0 0 auto; margin-top: 1px; color: #218d6c; font-size: 15px; }
.finance-picture-tabs { display: none; }
.finance-picture-column__heading { display: flex; align-items: center; gap: 9px; }
.finance-picture-column__icon {
display: grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
aspect-ratio: 1;
border-radius: 50%;
color: #1f8c6a;
background: #edf7f3;
}
.finance-picture-column[data-finance-picture="expenses"] .finance-picture-column__icon { color: #c9555c; background: #fbefef; }
.finance-picture-metrics { display: grid; gap: 5px; margin-top: 12px; }
.finance-picture-metric {
display: inline-flex;
align-items: center;
gap: 7px;
min-width: 0;
color: #52655e;
font-size: 12px;
line-height: 1.35;
}
.finance-picture-metric i { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #2ca879; }
.finance-picture-metric--plan i { background: #397fd7; }
.finance-picture-metric--forecast i { border: 1px solid #778a84; background: transparent; }
.finance-picture-metric b { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.finance-picture-chart { height: 108px; margin-top: 5px; }
.finance-picture-status {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
align-items: center;
gap: 10px;
min-height: 58px;
margin-top: 9px;
padding: 10px 11px;
border: 1px solid #dde7e3;
border-radius: 6px;
color: #556861;
background: #f8faf9;
box-shadow: inset 3px 0 0 #859994;
}
.finance-picture-status__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e9efed; }
.finance-picture-status strong { display: block; color: #263a34; font-size: 12px; line-height: 1.35; }
.finance-picture-status span { display: block; margin-top: 2px; color: #70817b; font-size: 11px; line-height: 1.4; }
.finance-picture-status.is-positive { box-shadow: inset 3px 0 0 #24966f; }
.finance-picture-status.is-positive .finance-picture-status__icon { color: #177d5d; background: #e5f3ed; }
.finance-picture-status.is-near { box-shadow: inset 3px 0 0 #5b83ad; }
.finance-picture-status.is-near .finance-picture-status__icon { color: #356f9f; background: #eaf1f7; }
.finance-picture-status.is-warning { box-shadow: inset 3px 0 0 #c58a2c; }
.finance-picture-status.is-warning .finance-picture-status__icon { color: #9b6717; background: #f6efe2; }
.finance-picture-status.is-negative { box-shadow: inset 3px 0 0 #cc555d; }
.finance-picture-status.is-negative .finance-picture-status__icon { color: #be464f; background: #f8e9ea; }
.finance-month-insight {
min-height: 0;
border-color: #dde7e3;
background: #f8faf9;
box-shadow: inset 3px 0 0 #2b9672;
}
.finance-month-insight--negative { border-color: #eadbdd; background: #faf8f8; box-shadow: inset 3px 0 0 #ce555d; }
.finance-month-insight--warning { border-color: #e9dfcd; background: #faf9f6; box-shadow: inset 3px 0 0 #c28b31; }
.finance-month-insight--neutral { box-shadow: inset 3px 0 0 #81938d; }
.finance-month-insight__icon { color: #217e61; background: #e8f2ee; }
.finance-month-insight--negative .finance-month-insight__icon { color: #bd4952; background: #f6e9ea; }
.finance-month-insight--warning .finance-month-insight__icon { color: #9d6b1e; background: #f4eee3; }
.finance-month-insight p { font-size: 13px; }
.finance-analytics-card-title { font-size: 16px; }
.finance-analytics-trend-row { grid-template-columns: minmax(110px, 1fr) minmax(86px, auto) minmax(140px, 1.2fr); gap: 12px; }
.finance-analytics-trend-row__change { justify-self: center; }
.finance-trend-sparkline { width: 100%; min-width: 140px; height: 52px; }
.finance-analytics-regular-summary small { color: #7a8a84; font-size: 10px; line-height: 1.4; }
.yf-analytics-detail-modal .finance-analytics-anomaly-row__main strong,
.yf-analytics-detail-modal .finance-analytics-anomaly-row__value strong { font-size: 15px; }
.yf-analytics-detail-modal .finance-analytics-anomaly-row__main span,
.yf-analytics-detail-modal .finance-analytics-severity-badge { font-size: 12px; }
.finance-month-state { min-height: 36px; padding-inline: 13px; cursor: pointer; }
.income-tags-control,
.expense-tags-control { min-width: 38px; min-height: 38px; }
#income-table-view-panel .table-responsive,
#expense-table-view-panel.table-responsive {
scroll-padding-left: 132px;
scrollbar-width: auto;
}
#income-table-view-panel .table-responsive::-webkit-scrollbar,
#expense-table-view-panel.table-responsive::-webkit-scrollbar { height: 12px; }
#incomes-table tr > :first-child,
#expenses-table tr > :first-child {
z-index: 12 !important;
background-color: #fff;
box-shadow: 5px 0 8px -7px rgba(25, 51, 43, .72), 1px 0 0 #d4dfdb;
}
#incomes-table thead tr > :first-child,
#expenses-table thead tr > :first-child { z-index: 14 !important; background-color: #eef5f2; }
body.yf-dashboard-auth.dark-theme .finance-picture-summary { color: #d9e8e3; background: #263230; border-left-color: #5dc5a0; }
body.yf-dashboard-auth.dark-theme .finance-picture-column__icon { color: #7bd4b3; background: #253a34; }
body.yf-dashboard-auth.dark-theme .finance-picture-column[data-finance-picture="expenses"] .finance-picture-column__icon { color: #ef9197; background: #3a2b2e; }
body.yf-dashboard-auth.dark-theme .finance-picture-metric { color: #b6c5c0; }
body.yf-dashboard-auth.dark-theme .finance-picture-status,
body.yf-dashboard-auth.dark-theme .finance-month-insight { border-color: rgba(174, 204, 194, .15); color: #b7c6c1; background: #252f31; }
body.yf-dashboard-auth.dark-theme .finance-picture-status strong { color: #eef5f2; }
body.yf-dashboard-auth.dark-theme .finance-picture-status span,
body.yf-dashboard-auth.dark-theme .finance-analytics-regular-summary small { color: #a6b5b0; }
body.yf-dashboard-auth.dark-theme #incomes-table tr > :first-child,
body.yf-dashboard-auth.dark-theme #expenses-table tr > :first-child { background-color: #202a2c; box-shadow: 5px 0 8px -7px #000, 1px 0 0 #3b4945; }
body.yf-dashboard-auth.dark-theme #incomes-table thead tr > :first-child,
body.yf-dashboard-auth.dark-theme #expenses-table thead tr > :first-child { background-color: #263335; }
@media (max-width: 767.98px) {
.finance-picture-tabs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3px;
margin-top: 14px;
padding: 3px;
border: 1px solid #dce7e3;
border-radius: 7px;
background: #f1f5f3;
}
.finance-picture-tabs button {
min-width: 0;
min-height: 38px;
padding: 7px 5px;
border: 0;
border-radius: 5px;
color: #62746d;
background: transparent;
font-size: 12px;
font-weight: 700;
}
.finance-picture-tabs button.is-active { color: #14795d; background: #fff; box-shadow: 0 1px 5px rgba(27, 65, 52, .1); }
.finance-picture-grid { display: block; margin-top: 13px; }
.finance-picture-column { display: none; padding: 0; border: 0; }
.finance-picture-column.is-mobile-active { display: block; }
.finance-picture-chart { height: 118px; }
.finance-picture-summary { font-size: 12px; }
.finance-analytics-trend-row { grid-template-columns: minmax(94px, 1fr) 82px minmax(112px, 1.25fr); gap: 8px; }
.finance-trend-sparkline { min-width: 112px; height: 48px; }
body.yf-dashboard-auth.dark-theme .finance-picture-tabs { border-color: rgba(174, 204, 194, .16); background: #263032; }
body.yf-dashboard-auth.dark-theme .finance-picture-tabs button { color: #aab9b4; }
body.yf-dashboard-auth.dark-theme .finance-picture-tabs button.is-active { color: #78d1b1; background: #34413f; }
}
@media (max-width: 430px) {
.finance-analytics-trend-row { grid-template-columns: 82px 76px minmax(105px, 1fr); }
.finance-analytics-trend-row__label { font-size: 13px; }
.finance-trend-sparkline { min-width: 105px; }
}
/* Dashboard semantic palette and analytics alignment. */
body.yf-dashboard-auth {
--yf-state-success: #238a68;
--yf-state-success-soft: #e8f4ef;
--yf-state-danger: #c94f59;
--yf-state-danger-soft: #f8eaec;
--yf-state-blue: #3f6faf;
--yf-state-blue-soft: #eaf0f7;
--yf-state-warning: #ae7626;
--yf-state-warning-soft: #f6f0e5;
--bs-success: #238a68;
--bs-danger: #c94f59;
--bs-primary: #3f6faf;
}
body.yf-dashboard-auth .text-success { color: var(--yf-state-success) !important; }
body.yf-dashboard-auth .text-danger { color: var(--yf-state-danger) !important; }
body.yf-dashboard-auth .text-primary { color: var(--yf-state-blue) !important; }
body.yf-dashboard-auth .bg-success { background-color: var(--yf-state-success) !important; }
body.yf-dashboard-auth .bg-danger { background-color: var(--yf-state-danger) !important; }
body.yf-dashboard-auth .bg-primary { background-color: var(--yf-state-blue) !important; }
body.yf-dashboard-auth .finance-analytics-kpi__note.is-success { color: var(--yf-state-success); }
body.yf-dashboard-auth .finance-analytics-kpi__note.is-danger { color: var(--yf-state-danger); }
.income-add-tag-action:hover,
.income-add-tag-action:focus,
.income-tags-control:hover:not(:disabled),
.income-tags-control:focus-visible:not(:disabled),
.expense-tags-control:hover:not(:disabled),
.expense-tags-control:focus-visible:not(:disabled) { color: var(--yf-state-blue); }
.income-tags-control:hover:not(:disabled),
.income-tags-control:focus-visible:not(:disabled),
.expense-tags-control:hover:not(:disabled),
.expense-tags-control:focus-visible:not(:disabled) {
border-color: color-mix(in srgb, var(--yf-state-blue) 34%, transparent);
background: color-mix(in srgb, var(--yf-state-blue) 7%, transparent);
}
.finance-analytics-empty-state__icon { color: var(--yf-state-success); background: var(--yf-state-success-soft); }
.finance-analytics-kpi { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
.finance-analytics-kpi__icon {
width: 36px;
height: 36px;
font-size: 1rem;
}
.finance-analytics-kpi--success .finance-analytics-kpi__icon,
.income-month-metric--fact .income-month-metric__icon { color: var(--yf-state-success); background: var(--yf-state-success-soft); }
.finance-analytics-kpi--danger .finance-analytics-kpi__icon,
.income-month-metric--delta .income-month-metric__icon { color: var(--yf-state-danger); background: var(--yf-state-danger-soft); }
.finance-analytics-kpi--blue .finance-analytics-kpi__icon,
.income-month-metric--plan .income-month-metric__icon { color: var(--yf-state-blue); background: var(--yf-state-blue-soft); }
.finance-analytics-kpi--warning .finance-analytics-kpi__icon { color: var(--yf-state-warning); background: var(--yf-state-warning-soft); }
.income-month-metric { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
.income-month-metric__icon {
width: 36px;
height: 36px;
font-size: 1rem;
}
#income-month-kpi-card .yf-income-kpi--month {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
width: 100%;
height: 100%;
margin: 0;
}
#income-month-kpi-card .yf-income-kpi__heading { align-self: start; }
.yf-income-kpi__month-body {
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
min-height: 0;
padding-block: 10px;
}
@media (min-width: 992px) {
#income-month-kpi-card .card-body { display: block; }
}
.finance-picture-metric i { background: var(--yf-state-success); }
.finance-picture-metric--plan i { background: var(--yf-state-blue); }
.finance-picture-metric--forecast i { border-color: #71847d; }
.finance-picture-status {
grid-template-columns: 28px minmax(0, 1fr);
border-color: #dbe5e1;
background: #f7f9f8;
box-shadow: inset 3px 0 0 #71847d;
}
.finance-picture-status__icon {
display: flex;
align-items: center;
justify-content: center;
align-self: center;
flex: 0 0 28px;
width: 28px;
height: 28px;
aspect-ratio: 1;
line-height: 1;
}
.finance-picture-status__icon i { display: block; line-height: 1; }
.finance-picture-status.is-positive { box-shadow: inset 3px 0 0 var(--yf-state-success); }
.finance-picture-status.is-positive .finance-picture-status__icon { color: var(--yf-state-success); background: var(--yf-state-success-soft); }
.finance-picture-status.is-near { box-shadow: inset 3px 0 0 var(--yf-state-blue); }
.finance-picture-status.is-near .finance-picture-status__icon { color: var(--yf-state-blue); background: var(--yf-state-blue-soft); }
.finance-picture-status.is-warning { box-shadow: inset 3px 0 0 var(--yf-state-warning); }
.finance-picture-status.is-warning .finance-picture-status__icon { color: var(--yf-state-warning); background: var(--yf-state-warning-soft); }
.finance-picture-status.is-negative { box-shadow: inset 3px 0 0 var(--yf-state-danger); }
.finance-picture-status.is-negative .finance-picture-status__icon { color: var(--yf-state-danger); background: var(--yf-state-danger-soft); }
.finance-month-insight { box-shadow: inset 3px 0 0 var(--yf-state-success); }
.finance-month-insight--negative { border-color: #eadbdd; background: #faf7f8; box-shadow: inset 3px 0 0 var(--yf-state-danger); }
.finance-month-insight--warning { border-color: #e7ddcb; background: #faf8f4; box-shadow: inset 3px 0 0 var(--yf-state-warning); }
.finance-month-insight__icon { color: var(--yf-state-success); background: var(--yf-state-success-soft); }
.finance-month-insight--negative .finance-month-insight__icon { color: var(--yf-state-danger); background: var(--yf-state-danger-soft); }
.finance-month-insight--warning .finance-month-insight__icon { color: var(--yf-state-warning); background: var(--yf-state-warning-soft); }
#incomes-table .table-tag-fact {
color: #1f684f;
background: #e5ffe7;
}
#yf-asset-plan-summary { margin-bottom: 0; }
body.yf-dashboard-auth.dark-theme {
--yf-state-success: #62b596;
--yf-state-success-soft: rgba(62, 151, 118, .18);
--yf-state-danger: #df7b83;
--yf-state-danger-soft: rgba(190, 75, 86, .18);
--yf-state-blue: #78a3d2;
--yf-state-blue-soft: rgba(74, 119, 167, .2);
--yf-state-warning: #d2a45d;
--yf-state-warning-soft: rgba(170, 119, 41, .19);
}
body.yf-dashboard-auth.dark-theme #incomes-table .table-tag-fact {
color: #a7dfc8;
background: rgba(47, 139, 102, .27);
}
/* Dashboard-wide money, chart controls and final semantic color pass. */
.income-month-metric--completion {
grid-template-columns: minmax(104px, 1fr) 48px;
}
.income-month-metric--completion > div { min-width: 0; }
.income-month-metric--completion .income-month-metric__label,
.income-month-metric--completion strong {
overflow-wrap: normal;
word-break: normal;
}
.income-month-metric--completion .income-month-progress-ring {
width: 46px;
height: 46px;
background:
radial-gradient(circle closest-side, #fff 73%, transparent 75%),
conic-gradient(var(--yf-state-success) var(--income-progress, 0%), color-mix(in srgb, var(--yf-state-success) 16%, transparent) 0);
}
.yf-chart-card-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-right: 1px;
}
#expenses-yearly-chart-card .yf-chart-card-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
#expenses-yearly-chart-card .yf-chart-view-toolbar {
grid-column: 2;
justify-self: center;
}
.yf-chart-view-toolbar {
grid-template-columns: repeat(2, 38px);
flex: 0 0 auto;
margin: 0;
}
.yf-chart-view-toolbar .yf-income-view-switch {
width: 38px;
min-height: 34px;
padding: 6px;
font-size: 14px;
}
.finance-picture-metric--forecast.is-positive i {
border-color: var(--yf-state-success);
background: var(--yf-state-success);
}
.finance-picture-metric--forecast.is-negative i {
border-color: var(--yf-state-danger);
background: var(--yf-state-danger);
}
.yf-income-kpi--year .yf-income-kpi__metric--year-summary > i,
.yf-income-kpi__detail-grid > div > i,
.yf-income-kpi--year .yf-income-kpi__rows--year > div > i {
color: var(--yf-state-blue);
background: var(--yf-state-blue-soft);
}
.yf-income-kpi--year .yf-income-kpi__metric--positive > i,
.yf-income-kpi--year .yf-income-kpi__rows--year > div:nth-child(1) > i,
.yf-income-kpi--year .yf-income-kpi__rows--year > div:nth-child(3) > i,
.yf-income-kpi__detail-grid > div:nth-child(4) > i {
color: var(--yf-state-success);
background: var(--yf-state-success-soft);
}
.yf-income-kpi--year .yf-income-kpi__metric--accent > i,
.yf-income-kpi--year .yf-income-kpi__rows--year > div:nth-child(4) > i,
.yf-income-kpi__detail-grid > div:nth-child(1) > i {
color: var(--yf-state-danger);
background: var(--yf-state-danger-soft);
}
.yf-expense-category-kpi {
--yf-expense-kpi-accent: var(--yf-state-success);
box-shadow: inset 3px 0 0 var(--yf-expense-kpi-accent);
}
.yf-expense-category-kpi::before { content: none; }
.yf-expense-category-kpi--reference { --yf-expense-kpi-accent: var(--yf-state-blue); }
.yf-expense-category-kpi--category { --yf-expense-kpi-accent: var(--yf-category-accent, var(--yf-state-warning)); }
.yf-expense-category-kpi--share { --yf-expense-kpi-accent: var(--yf-state-warning); }
body.yf-dashboard-auth.dark-theme .income-month-metric--completion .income-month-progress-ring {
background:
radial-gradient(circle closest-side, #232b30 73%, transparent 75%),
conic-gradient(var(--yf-state-success) var(--income-progress, 0%), color-mix(in srgb, var(--yf-state-success) 18%, transparent) 0);
}
@media (max-width: 575.98px) {
.yf-chart-card-heading { align-items: flex-start; }
.yf-chart-card-heading .card-title { padding-top: 7px; }
}
/* Financial picture: server-driven semantic presentation. */
.finance-analytics-kpi__value { font-size: 1rem; }
.finance-picture-column__icon,
.finance-picture-status__icon,
.finance-month-insight__icon {
display: inline-grid;
place-items: center;
aspect-ratio: 1;
line-height: 1;
}
.finance-picture-status__icon {
position: relative;
}
.finance-picture-status__icon .bi {
position: absolute;
inset: 0;
display: grid;
width: 100%;
height: 100%;
place-items: center;
line-height: 1;
}
.finance-picture-status__icon .bi::before {
display: block;
margin: 0;
line-height: 1;
vertical-align: 0;
transform: translateY(.5px);
}
.finance-picture-column__icon .bi,
.finance-picture-status__icon .bi,
.finance-month-insight__icon .bi,
.finance-picture-column__icon .bi::before,
.finance-picture-status__icon .bi::before,
.finance-month-insight__icon .bi::before {
display: block;
margin: 0;
line-height: 1;
}
.finance-picture-status__icon .bi {
display: grid;
place-items: center;
}
@media (max-width: 767.98px) {
#expenses-yearly-chart-card .yf-chart-card-heading {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
#expenses-yearly-chart-card .yf-chart-view-toolbar {
grid-column: 1;
}
}
.finance-picture-metric i {
border: 0;
background: var(--yf-state-muted, #778a84);
}
.finance-picture-metric.is-positive i { background: var(--yf-state-success, #238a68); }
.finance-picture-metric.is-negative i { background: var(--yf-state-danger, #c94f59); }
.finance-picture-metric.is-warning i { background: var(--yf-state-warning, #ae7626); }
.finance-picture-metric.is-plan i { background: var(--yf-state-blue, #3f6faf); }
.finance-picture-metric.is-neutral i { background: #778a84; }
.finance-picture-metric.is-positive b { color: var(--yf-state-success, #238a68); }
.finance-picture-metric.is-negative b { color: var(--yf-state-danger, #c94f59); }
.finance-picture-metric.is-warning b { color: var(--yf-state-warning, #ae7626); }
.finance-picture-metric.is-plan b { color: var(--yf-state-blue, #3f6faf); }
.finance-section-heading--pinned-info {
position: relative;
padding-right: 48px;
}
.finance-section-heading--pinned-info .finance-section-heading__info {
position: absolute;
top: 0;
right: 0;
margin: 0;
}
/* Public-site designer review. */
.yf-public-exit-form { display: contents; }
.yf-public-exit-form button {
margin: 0;
padding: 0;
border: 0;
color: inherit;
background: transparent;
font: inherit;
text-align: left;
}
.yf-authorized-brand .yf-public-exit-form button { display: inline-flex; cursor: pointer; }
.yf-landing-body .yf26-hero h1 {
letter-spacing: -.045em;
text-transform: none;
text-wrap: balance;
}
.yf-landing-body .yf26-final h2 {
letter-spacing: 0;
text-transform: uppercase;
text-wrap: balance;
}
.yf-landing-body .yf26-hero h1 { font-size: clamp(46px, 5.3vw, 68px); line-height: 1.01; }
.yf-landing-body .yf26-section-head h2,
.yf-landing-body .yf26-outcomes__intro h2,
.yf-landing-body .yf26-system h2,
.yf-landing-body .yf26-materials-head h2 {
margin-block: 14px 0;
font-size: 44px;
line-height: 1.08;
text-wrap: balance;
}
.yf-landing-body .yf26-section-head > p,
.yf-landing-body .yf26-outcomes__intro > p,
.yf-landing-body .yf26-system__copy > p,
.yf-landing-body .yf26-materials-head > p,
.yf-guide p,
.yf-guide li { text-wrap: pretty; }
.yf-landing-body .yf26-eyebrow { color: #8b742d; }
.yf-landing-body .yf26-hero .yf26-eyebrow,
.yf-landing-body .yf26-workflow .yf26-eyebrow,
.yf-landing-body .yf26-pricing-section .yf26-eyebrow,
.yf-landing-body .yf26-final .yf26-eyebrow { color: #e5c85d; }
.yf-landing-body #features .yf26-section-head { margin-bottom: 34px; }
.yf-landing-body .yf26-month-story {
padding: 28px 30px;
border: 1px solid #d6e2de;
border-radius: 8px;
background: #fff;
box-shadow: 0 16px 40px rgba(18, 54, 43, .07);
}
.yf-landing-body .yf26-month-story__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
}
.yf-landing-body .yf26-month-story__head > div:first-child { min-width: 0; }
.yf-landing-body .yf26-month-story__head > div:first-child > span {
display: block;
margin-bottom: 7px;
color: #18845f;
font-family: "IBM Plex Mono", monospace;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
text-transform: uppercase;
}
.yf-landing-body .yf26-month-story__head h3 {
margin: 0;
color: #17352d;
font-size: 26px;
line-height: 1.2;
}
.yf-landing-body .yf26-month-story__date {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
padding: 9px 11px;
border: 1px solid #d6e7e0;
border-radius: 6px;
color: #466159;
background: #f3f8f6;
font-size: 11px;
white-space: nowrap;
}
.yf-landing-body .yf26-month-story__date > i { color: #18845f; font-size: 13px; }
.yf-landing-body .yf26-month-story__date > span { font-weight: 700; }
.yf-landing-body .yf26-month-story__date > b {
padding-left: 8px;
border-left: 1px solid #cfded8;
color: #72827d;
font-weight: 550;
}
.yf-landing-body .yf26-month-story__body {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(270px, .72fr);
align-items: stretch;
gap: 30px;
margin-top: 24px;
}
.yf-landing-body .yf26-cashflow-list {
position: relative;
display: grid;
align-content: center;
padding-left: 2px;
}
.yf-landing-body .yf26-cashflow-list::before {
content: "";
position: absolute;
top: 25px;
bottom: 25px;
left: 15px;
width: 2px;
background: #dce7e3;
}
.yf-landing-body .yf26-cashflow-row {
position: relative;
display: grid;
grid-template-columns: 30px minmax(0, 1fr) auto;
align-items: center;
gap: 13px;
min-height: 58px;
}
.yf-landing-body .yf26-cashflow-row > i {
display: inline-grid;
place-items: center;
z-index: 1;
width: 28px;
height: 28px;
aspect-ratio: 1;
border-radius: 50%;
font-size: 13px;
line-height: 1;
box-shadow: 0 0 0 4px #fff;
}
.yf-landing-body .yf26-cashflow-row.is-received > i {
color: #16865f;
background: #e4f4ed;
}
.yf-landing-body .yf26-cashflow-row.is-expected > i {
color: #a8750a;
border: 2px solid #d4a536;
background: #fffaf0;
}
.yf-landing-body .yf26-cashflow-row > div {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.yf-landing-body .yf26-cashflow-row > div > strong {
color: #243a34;
font-size: 14px;
font-weight: 650;
}
.yf-landing-body .yf26-cashflow-row > div > span {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 4px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
.yf-landing-body .yf26-cashflow-row.is-received > div > span {
color: #187c5b;
background: #e8f5ef;
}
.yf-landing-body .yf26-cashflow-row.is-expected > div > span {
color: #94670b;
background: #fff4d6;
}
.yf-landing-body .yf26-cashflow-row > b {
color: #20352f;
font-size: 16px;
font-weight: 750;
white-space: nowrap;
}
.yf-landing-body .yf26-cashflow-row.is-received > b { color: #16865f; }
.yf-landing-body .yf26-month-summary {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
padding: 24px;
border: 1px solid #cfe3da;
border-radius: 8px;
background: #f0f8f4;
}
.yf-landing-body .yf26-month-summary > span {
color: #567069;
font-size: 11px;
font-weight: 650;
}
.yf-landing-body .yf26-month-summary > strong {
margin-top: 8px;
color: #173f34;
font-size: 30px;
line-height: 1.05;
white-space: nowrap;
}
.yf-landing-body .yf26-month-summary__progress {
height: 11px;
margin-top: 20px;
overflow: hidden;
border-radius: 999px;
background: #dfeae5;
}
.yf-landing-body .yf26-month-summary__progress > i {
display: block;
height: 100%;
border-radius: inherit;
background: #35ad7d;
}
.yf-landing-body .yf26-month-summary__legend {
display: grid;
gap: 8px;
margin-top: 15px;
}
.yf-landing-body .yf26-month-summary__legend p {
display: grid;
grid-template-columns: 8px minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
margin: 0;
color: #6a7d76;
font-size: 11px;
}
.yf-landing-body .yf26-month-summary__legend p > i {
width: 8px;
height: 8px;
border-radius: 50%;
}
.yf-landing-body .yf26-month-summary__legend p > i.is-received { background: #35ad7d; }
.yf-landing-body .yf26-month-summary__legend p > i.is-expected { background: #c9d7d1; }
.yf-landing-body .yf26-month-summary__legend p > b { color: #29433b; font-weight: 700; white-space: nowrap; }
.yf-landing-body .yf26-month-summary__note {
margin: 18px 0 0;
padding-top: 14px;
border-top: 1px solid #d5e4de;
color: #5e746c;
font-size: 11px;
}
.yf-landing-body .yf26-month-summary__note > b { color: #18845f; font-size: 14px; }
.yf-landing-body .yf26-scenario-bridge {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 14px 0;
color: #35534a;
font-size: 13px;
font-weight: 700;
}
.yf-landing-body .yf26-scenario-bridge i { color: #18845f; }
.yf-landing-body .yf26-scenario-results {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.yf-landing-body .yf26-scenario-results article {
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
grid-template-rows: auto 1fr;
align-content: start;
gap: 14px;
min-height: 182px;
padding: 20px;
border: 1px solid #c6ded4;
border-radius: 8px;
background: #f8fcfa;
box-shadow: 0 10px 26px rgba(18, 54, 43, .045);
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.yf-landing-body .yf26-scenario-results article.is-safe { background: #f6fbf8; }
.yf-landing-body .yf26-scenario-results article.is-positive { background: #f1faf5; }
.yf-landing-body .yf26-scenario-results article:hover {
transform: translateY(-2px);
border-color: #84bda7;
box-shadow: 0 14px 32px rgba(18, 54, 43, .08);
}
.yf-landing-body .yf26-scenario-results article > i {
display: inline-grid;
place-items: center;
width: 46px;
height: 46px;
aspect-ratio: 1;
border-radius: 50%;
color: #16865f;
background: #e2f3eb;
font-size: 19px;
line-height: 1;
}
.yf-landing-body .yf26-scenario-results article > div:first-of-type { min-width: 0; }
.yf-landing-body .yf26-scenario-results article > div:first-of-type > span {
display: block;
color: #18845f;
font-family: "IBM Plex Mono", monospace;
font-size: 10px;
font-weight: 700;
line-height: 1.35;
text-transform: uppercase;
}
.yf-landing-body .yf26-scenario-results article > div:first-of-type > strong {
display: block;
margin-top: 7px;
color: #17352d;
font-size: 24px;
line-height: 1.15;
white-space: nowrap;
}
.yf-landing-body .yf26-scenario-results article > div:first-of-type > strong small {
font-size: 13px;
font-weight: 650;
}
.yf-landing-body .yf26-scenario-results article > div:first-of-type > p {
margin: 8px 0 0;
color: #70807b;
font-size: 12px;
line-height: 1.45;
}
.yf-landing-body .yf26-scenario-results article.is-warning {
border-color: #e4cb85;
background: #fffaf0;
}
.yf-landing-body .yf26-scenario-results article.is-warning > i { color: #9c6d0f; background: #fff0c9; }
.yf-landing-body .yf26-scenario-results article.is-warning > div:first-of-type > span { color: #94670b; }
.yf-landing-body .yf26-scenario-results article.is-warning > div:first-of-type > p b { color: #a75d16; white-space: nowrap; }
.yf-landing-body .yf26-result-status {
display: inline-flex;
grid-column: 1 / -1;
align-items: center;
align-self: end;
gap: 7px;
width: fit-content;
margin-top: 4px;
padding: 7px 10px;
border-radius: 6px;
color: #187c5b;
background: #e2f2ea;
font-size: 11px;
font-weight: 700;
}
.yf-landing-body .yf26-result-status > i { font-size: 13px; }
.yf-landing-body .yf26-result-scale {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-column: 1 / -1;
gap: 4px 12px;
align-self: end;
margin-top: 2px;
}
.yf-landing-body .yf26-result-scale > div { display: flex; justify-content: space-between; gap: 6px; color: #7c7055; font-size: 9px; }
.yf-landing-body .yf26-result-scale > div > b { color: #5e553f; font-weight: 700; white-space: nowrap; }
.yf-landing-body .yf26-result-scale > p {
display: flex;
grid-column: 1 / -1;
height: 7px;
margin: 5px 0 0;
overflow: hidden;
border-radius: 999px;
background: #e8e5dc;
}
.yf-landing-body .yf26-result-scale > p > i.is-plan { flex: 10; background: #6f93c7; }
.yf-landing-body .yf26-result-scale > p > i.is-overrun { flex: 1; background: #d69b29; }
.yf-landing-body .yf26-scenario-insight {
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
align-items: center;
gap: 15px;
margin-top: 16px;
padding: 19px 22px;
border: 1px solid #bcd9cd;
border-radius: 8px;
color: #435b53;
background: #edf7f2;
box-shadow: 0 10px 26px rgba(18, 54, 43, .045);
}
.yf-landing-body .yf26-scenario-insight > i {
display: inline-grid;
place-items: center;
width: 46px;
height: 46px;
aspect-ratio: 1;
border-radius: 50%;
color: #fff;
background: #238d67;
font-size: 19px;
line-height: 1;
}
.yf-landing-body .yf26-scenario-insight > div { min-width: 0; }
.yf-landing-body .yf26-scenario-insight strong {
display: block;
color: #176f53;
font-size: 14px;
line-height: 1.25;
}
.yf-landing-body .yf26-scenario-insight p {
margin: 5px 0 0;
color: #435b53;
font-size: 13px;
line-height: 1.55;
}
.yf-landing-body .yf26-scenario-insight p > b { color: #176f53; white-space: nowrap; }
.yf-landing-body .yf26-outcomes-section {
padding-top: clamp(70px, 8vw, 96px);
color: #e8f2ee;
background: #10231f;
}
.yf-landing-body .yf26-outcomes {
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
}
.yf-landing-body .yf26-outcomes-section .yf26-eyebrow { color: #e5c85d; }
.yf-landing-body .yf26-outcomes__intro h2,
.yf-landing-body .yf26-outcomes__grid h3 { color: #f4f8f6; }
.yf-landing-body .yf26-outcomes__intro > p,
.yf-landing-body .yf26-outcomes__grid p { color: rgba(235, 246, 241, .76); }
.yf-landing-body .yf26-outcomes__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
border: 0;
background: transparent;
}
.yf-landing-body .yf26-outcomes__grid article {
min-height: 280px;
padding: 32px;
border: 1px solid rgba(151, 204, 184, .24);
border-radius: 8px;
background: #17302a;
box-shadow: 0 12px 30px rgba(3, 18, 14, .12);
transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.yf-landing-body .yf26-outcomes__grid article:hover {
transform: translateY(-2px);
border-color: rgba(132, 214, 183, .42);
background: #1a372f;
box-shadow: 0 18px 38px rgba(3, 18, 14, .2);
}
.yf-landing-body .yf26-outcomes__grid article > i {
color: #84d6b7;
background: rgba(101, 217, 174, .14);
}
.yf-landing-body .yf26-outcomes__intro {
max-width: 940px;
margin-bottom: 34px;
}
.yf-landing-body .yf26-outcomes__intro h2 { max-width: 880px; }
.yf-landing-body .yf26-outcomes__intro > p { max-width: 820px; }
.yf-landing-body .yf26-tool-card {
--yf26-tool-accent: #84d6b7;
--yf26-tool-soft: rgba(132, 214, 183, .12);
isolation: isolate;
position: relative;
overflow: hidden;
grid-template-columns: 58px minmax(0, 1fr);
gap: 20px;
align-items: start;
}
.yf-landing-body .yf26-tool-card--analytics {
--yf26-tool-accent: #86d9b7;
--yf26-tool-soft: rgba(111, 204, 166, .13);
}
.yf-landing-body .yf26-tool-card--telegram {
--yf26-tool-accent: #73cbd0;
--yf26-tool-soft: rgba(91, 187, 198, .13);
grid-template-rows: auto auto;
}
.yf-landing-body .yf26-tool-card--reserve {
--yf26-tool-accent: #e2c467;
--yf26-tool-soft: rgba(226, 196, 103, .12);
}
.yf-landing-body .yf26-tool-card > i {
position: relative;
z-index: 2;
width: 58px;
height: 58px;
color: var(--yf26-tool-accent);
background: var(--yf26-tool-soft);
border: 1px solid rgba(132, 214, 183, .15);
font-size: 22px;
}
.yf-landing-body .yf26-tool-card__content {
position: relative;
z-index: 1;
min-width: 0;
min-height: 216px;
display: flex;
flex-direction: column;
}
.yf-landing-body .yf26-tool-card--telegram .yf26-tool-card__content {
min-height: 0;
}
.yf-landing-body .yf26-outcomes__grid .yf26-tool-card h3 {
max-width: 430px;
margin: 2px 0 10px;
font-size: 21px;
line-height: 1.25;
}
.yf-landing-body .yf26-outcomes__grid .yf26-tool-card__content > p {
max-width: 42ch;
font-size: 15px;
line-height: 1.55;
}
.yf-landing-body .yf26-tool-demo {
min-width: 0;
margin-top: auto;
padding-top: 22px;
border-top: 1px solid rgba(188, 224, 210, .14);
}
.yf-landing-body .yf26-tool-capital {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(165px, 36%);
grid-template-areas:
"chips visual"
"total visual";
align-items: center;
column-gap: 22px;
row-gap: 18px;
}
.yf-landing-body .yf26-tool-chips {
grid-area: chips;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.yf-landing-body .yf26-tool-chips span {
padding: 7px 12px;
border: 1px solid rgba(132, 214, 183, .2);
border-radius: 999px;
color: #cce9de;
background: rgba(132, 214, 183, .075);
font-size: 12px;
line-height: 1;
white-space: nowrap;
}
.yf-landing-body .yf26-tool-total {
grid-area: total;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 10px;
margin-top: 0;
}
.yf-landing-body .yf26-tool-total small,
.yf-landing-body .yf26-tool-reserve small {
color: rgba(224, 240, 234, .62);
font-size: 13px;
}
.yf-landing-body .yf26-tool-total strong {
color: #f4f8f6;
font-size: 27px;
line-height: 1;
white-space: nowrap;
}
.yf-landing-body .yf26-capital-stack {
grid-area: visual;
position: relative;
width: 100%;
min-width: 165px;
height: 174px;
justify-self: end;
}
.yf-landing-body .yf26-capital-stack__layer {
position: absolute;
right: 0;
bottom: 0;
width: min(142px, 82%);
height: 158px;
overflow: hidden;
border: 1px solid rgba(141, 211, 185, .25);
border-radius: 8px;
background: #173a32;
box-shadow: 0 14px 30px rgba(1, 16, 12, .18);
transform-origin: 70% 100%;
}
.yf-landing-body .yf26-capital-stack__layer--far {
right: 28px;
bottom: 16px;
opacity: .34;
transform: rotate(-5deg);
}
.yf-landing-body .yf26-capital-stack__layer--middle {
right: 14px;
bottom: 8px;
opacity: .58;
transform: rotate(-2deg);
}
.yf-landing-body .yf26-capital-stack__layer--front {
z-index: 2;
background: #1a4137;
box-shadow: 0 16px 34px rgba(1, 16, 12, .25), 0 0 24px rgba(93, 190, 153, .055);
}
.yf-landing-body .yf26-capital-stack__layer--far::before,
.yf-landing-body .yf26-capital-stack__layer--middle::before {
content: "";
position: absolute;
top: 24px;
left: 22px;
width: 42px;
aspect-ratio: 1;
border: 7px solid rgba(130, 210, 180, .15);
border-top-color: rgba(130, 210, 180, .3);
border-radius: 50%;
}
.yf-landing-body .yf26-capital-stack__layer--far > i,
.yf-landing-body .yf26-capital-stack__layer--middle > i {
position: absolute;
top: 83px;
left: 21px;
width: 70px;
height: 5px;
border-radius: 999px;
background: rgba(134, 218, 185, .12);
}
.yf-landing-body .yf26-capital-stack__layer--far > b,
.yf-landing-body .yf26-capital-stack__layer--middle > b {
position: absolute;
top: 97px;
left: 21px;
width: 43px;
height: 5px;
border-radius: 999px;
background: rgba(134, 218, 185, .08);
}
.yf-landing-body .yf26-capital-stack__donut {
position: absolute;
top: 24px;
left: 50%;
width: 74px;
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(#a3e8cc 0 34%, #69c3a2 34% 62%, #3b876f 62% 88%, #d4b755 88% 100%);
transform: translateX(-50%);
}
.yf-landing-body .yf26-capital-stack__donut::after {
content: "";
position: absolute;
inset: 13px;
border-radius: inherit;
background: #1a4137;
box-shadow: inset 0 0 0 1px rgba(185, 228, 211, .04);
}
.yf-landing-body .yf26-capital-stack__layer--front > b {
position: absolute;
left: 25px;
bottom: 31px;
width: 88px;
height: 6px;
border-radius: 999px;
background: rgba(145, 221, 192, .21);
}
.yf-landing-body .yf26-capital-stack__layer--front > b:last-child {
bottom: 18px;
width: 55px;
background: rgba(145, 221, 192, .11);
}
.yf-landing-body .yf26-tool-bars {
display: grid;
gap: 12px;
}
.yf-landing-body .yf26-tool-bars > div {
display: grid;
grid-template-columns: 68px minmax(80px, 1fr) auto;
align-items: center;
gap: 14px;
}
.yf-landing-body .yf26-tool-bars span {
color: rgba(224, 240, 234, .68);
font-size: 14px;
}
.yf-landing-body .yf26-tool-bars i {
height: 8px;
overflow: hidden;
border-radius: 999px;
background: rgba(210, 229, 222, .13);
}
.yf-landing-body .yf26-tool-bars i b {
height: 100%;
display: block;
border-radius: inherit;
background: var(--yf26-tool-accent);
}
.yf-landing-body .yf26-tool-bars > div:nth-child(1) i b { width: 88%; }
.yf-landing-body .yf26-tool-bars > div:nth-child(2) i b { width: 37%; }
.yf-landing-body .yf26-tool-bars > div:nth-child(3) i b { width: 76%; }
.yf-landing-body .yf26-tool-bars strong {
color: #edf6f2;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
}
.yf-landing-body .yf26-tool-analytics-demo {
display: grid;
gap: 15px;
}
.yf-landing-body .yf26-tool-analysis-summary {
display: grid;
gap: 7px;
padding-top: 13px;
border-top: 1px solid rgba(188, 224, 210, .14);
}
.yf-landing-body .yf26-tool-analysis-summary > div,
.yf-landing-body .yf26-tool-analysis-summary > p {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.yf-landing-body .yf26-tool-analysis-summary > div > span {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(225, 241, 235, .76);
font-size: 13px;
font-weight: 650;
}
.yf-landing-body .yf26-tool-analysis-summary > div > span > i {
width: 24px;
aspect-ratio: 1;
display: inline-grid;
place-items: center;
border-radius: 50%;
color: #a4e5cc;
background: rgba(132, 214, 183, .12);
font-size: 11px;
font-style: normal;
}
.yf-landing-body .yf26-tool-analysis-summary > div > strong {
color: #a8e6cd;
font-size: 20px;
line-height: 1;
}
.yf-landing-body .yf26-tool-analysis-summary > p {
margin: 0;
color: rgba(224, 240, 234, .52);
font-size: 12px;
}
.yf-landing-body .yf26-tool-analysis-summary > p > b {
color: #dfc771;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
}
.yf-landing-body .yf26-tool-message {
position: relative;
width: 100%;
max-width: 500px;
min-height: 166px;
overflow: hidden;
margin-inline: auto;
padding: 18px 20px 15px;
border: 1px solid rgba(115, 203, 208, .2);
border-radius: 8px;
background: rgba(9, 39, 35, .46);
box-shadow: inset 0 1px 0 rgba(230, 250, 245, .035);
}
.yf-landing-body .yf26-tool-card--telegram > .yf26-tool-message {
grid-column: 1 / -1;
justify-self: center;
margin: 24px auto 0;
}
.yf-landing-body .yf26-tool-message__head {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 13px;
border-bottom: 1px solid rgba(188, 224, 210, .12);
}
.yf-landing-body .yf26-tool-message__head > span {
width: 34px;
aspect-ratio: 1;
flex: 0 0 auto;
display: grid;
place-items: center;
border: 1px solid rgba(115, 203, 208, .18);
border-radius: 50%;
color: #9de2d7;
background: rgba(115, 203, 208, .12);
font-size: 14px;
}
.yf-landing-body .yf26-tool-message__head > div {
min-width: 0;
display: grid;
gap: 2px;
}
.yf-landing-body .yf26-tool-message__head strong {
color: #e8f5f1;
font-size: 13.5px;
line-height: 1.2;
}
.yf-landing-body .yf26-tool-message__head small {
color: rgba(211, 235, 229, .52);
font-size: 11px;
line-height: 1.2;
}
.yf-landing-body .yf26-tool-message__head time {
margin-left: auto;
color: rgba(211, 235, 229, .44);
font-size: 11px;
}
.yf-landing-body .yf26-tool-message__operation {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
padding: 15px 0 13px;
}
.yf-landing-body .yf26-tool-message__operation > span {
min-width: 0;
display: grid;
gap: 4px;
}
.yf-landing-body .yf26-tool-message__operation small {
color: rgba(211, 235, 229, .5);
font-size: 11px;
}
.yf-landing-body .yf26-tool-message__operation strong {
color: #f3f8f6;
font-size: 17px;
line-height: 1.25;
}
.yf-landing-body .yf26-tool-message__operation > b {
color: #d9f4ed;
font-size: 26px;
line-height: 1;
white-space: nowrap;
}
.yf-landing-body .yf26-tool-message__status {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
padding-top: 11px;
border-top: 1px solid rgba(188, 224, 210, .1);
color: rgba(213, 237, 229, .62);
font-size: 11px;
}
.yf-landing-body .yf26-tool-message__status > i {
color: #8fe0bf;
font-size: 13px;
}
.yf-landing-body .yf26-tool-message__status > strong {
display: inline-flex;
align-items: center;
padding: 5px 9px;
border-radius: 999px;
color: #a6e8ce;
background: rgba(99, 205, 163, .1);
font-size: 11px;
font-weight: 700;
line-height: 1;
}
.yf-landing-body .yf26-tool-reserve {
display: grid;
gap: 17px;
}
.yf-landing-body .yf26-tool-reserve__safety {
display: grid;
gap: 7px;
}
.yf-landing-body .yf26-tool-reserve__safety > span {
color: rgba(224, 240, 234, .68);
font-size: 13px;
font-weight: 650;
}
.yf-landing-body .yf26-tool-reserve__safety > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.yf-landing-body .yf26-tool-reserve__safety strong {
color: #b6ead6;
font-size: 29px;
line-height: 1;
white-space: nowrap;
}
.yf-landing-body .yf26-tool-reserve__safety em {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 9px;
border-radius: 999px;
color: #a9e6ce;
background: rgba(99, 205, 163, .1);
font-size: 11px;
font-style: normal;
font-weight: 700;
}
.yf-landing-body .yf26-tool-reserve__safety > small {
color: rgba(224, 240, 234, .48);
font-size: 11px;
}
.yf-landing-body .yf26-tool-reserve__goal {
display: grid;
gap: 9px;
padding-top: 16px;
border-top: 1px solid rgba(226, 196, 103, .16);
}
.yf-landing-body .yf26-tool-reserve__goal > div,
.yf-landing-body .yf26-tool-reserve__goal > small {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.yf-landing-body .yf26-tool-reserve__goal > div > span {
color: #efe6c5;
font-size: 13px;
font-weight: 650;
}
.yf-landing-body .yf26-tool-reserve__goal > div > strong {
color: #f4f0d9;
font-size: 13px;
white-space: nowrap;
}
.yf-landing-body .yf26-tool-reserve__goal > i {
height: 7px;
display: block;
overflow: hidden;
border-radius: 999px;
background: rgba(226, 196, 103, .12);
}
.yf-landing-body .yf26-tool-reserve__goal > i > b {
width: 31%;
height: 100%;
display: block;
border-radius: inherit;
background: var(--yf26-tool-accent);
}
.yf-landing-body .yf26-tool-reserve__goal > small {
color: rgba(224, 240, 234, .48);
font-size: 11px;
}
.yf-landing-body .yf26-tool-reserve__goal > small > b {
color: #e5ca74;
font-size: 13px;
}
.yf-landing-body .yf26-outcomes__trust {
display: grid;
grid-template-columns: 46px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
margin-top: 16px;
padding: 18px 22px;
border: 1px solid rgba(151, 204, 184, .22);
border-radius: 8px;
color: #d9ebe4;
background: rgba(101, 217, 174, .065);
}
.yf-landing-body .yf26-outcomes__trust > i {
width: 46px;
height: 46px;
display: grid;
place-items: center;
border-radius: 50%;
color: #9de2c7;
background: rgba(132, 214, 183, .12);
font-size: 20px;
}
.yf-landing-body .yf26-outcomes__trust strong {
display: block;
color: #f1f7f4;
font-size: 16px;
}
.yf-landing-body .yf26-outcomes__trust p {
margin: 4px 0 0;
color: rgba(224, 240, 234, .7);
font-size: 13px;
font-weight: 500;
line-height: 1.5;
}
.yf-landing-body .yf26-outcomes__trust > span {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 10px;
border: 1px solid rgba(132, 214, 183, .18);
border-radius: 999px;
color: #cce9de;
background: rgba(132, 214, 183, .06);
font-size: 12px;
white-space: nowrap;
}
.yf-landing-body .yf26-outcomes__trust > span i { color: #84d6b7; }
.yf-landing-body .yf26-flow__stage {
isolation: isolate;
position: relative;
overflow: hidden;
}
.yf-landing-body .yf26-flow__stage::before {
position: absolute;
z-index: 2;
top: 50px;
right: 13px;
color: rgba(101, 217, 174, .075);
font: 800 96px/1 Manrope, sans-serif;
pointer-events: none;
}
.yf-landing-body .yf26-flow__stage > * { position: relative; z-index: 1; }
.yf-landing-body .yf26-flow__label { z-index: 3; }
.yf-landing-body .yf26-flow__telegram::before { content: "01"; }
.yf-landing-body .yf26-flow__process::before { content: "02"; }
.yf-landing-body .yf26-flow__result::before { content: "03"; }
.yf-landing-body .yf26-flow__label b { color: #7fcbae; }
.yf-landing-body .yf26-orbit { border-color: rgba(96, 187, 153, .38); }
.yf-landing-body .yf26-orbit::before,
.yf-landing-body .yf26-orbit::after { border-color: rgba(96, 187, 153, .28); }
.yf-landing-body .yf26-orbit__core {
border: 1px solid rgba(117, 214, 178, .42);
box-shadow: 0 18px 52px rgba(14, 82, 61, .22), inset 0 0 0 8px rgba(101, 217, 174, .05);
}
.yf-landing-body .yf26-orbit__node {
border-color: rgba(91, 159, 134, .28);
box-shadow: 0 12px 30px rgba(24, 72, 58, .12);
}
.yf-landing-body .yf26-plan__head > span {
font-size: 12px;
line-height: 1.35;
}
.yf-landing-body .yf26-materials-grid {
gap: 18px;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
}
.yf-landing-body .yf26-material {
min-height: 260px;
border: 1px solid #d8e3df;
border-radius: 8px;
background: #fff;
box-shadow: 0 10px 26px rgba(18, 54, 43, .055);
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.yf-landing-body .yf26-material:hover,
.yf-landing-body .yf26-material:focus-visible {
border-color: #94c9b5;
box-shadow: 0 16px 34px rgba(18, 54, 43, .1);
transform: translateY(-2px);
}
.yf-landing-body .yf26-material:focus-visible { outline: 3px solid rgba(43, 150, 114, .2); outline-offset: 3px; }
.yf-landing-body .yf26-material h3 { margin-top: 38px; }
@media (max-width: 1023.98px) {
.yf-landing-body .yf26-hero h1 { font-size: 52px; }
.yf-landing-body .yf26-section-head h2,
.yf-landing-body .yf26-outcomes__intro h2,
.yf-landing-body .yf26-system h2,
.yf-landing-body .yf26-materials-head h2 { font-size: 36px; }
.yf-landing-body .yf26-outcomes__grid article { min-height: 270px; }
.yf-landing-body .yf26-tool-card__content { min-height: 212px; }
}
@media (max-width: 820px) {
.yf-landing-body .yf26-month-story__body {
grid-template-columns: 1fr;
gap: 18px;
}
.yf-landing-body .yf26-month-summary { padding: 20px; }
.yf-landing-body .yf26-scenario-results {
grid-template-columns: 1fr;
gap: 12px;
}
.yf-landing-body .yf26-scenario-results article { min-height: 0; }
.yf-landing-body .yf26-outcomes__grid { grid-template-columns: 1fr; }
.yf-landing-body .yf26-outcomes__grid article { min-height: 260px; padding: 30px; }
.yf-landing-body .yf26-tool-card__content { min-height: 200px; }
.yf-landing-body .yf26-outcomes__trust {
grid-template-columns: 46px minmax(0, 1fr);
}
.yf-landing-body .yf26-outcomes__trust > span {
grid-column: 2;
justify-self: start;
}
}
@media (max-width: 575.98px) {
.yf-landing-body .yf26-container { width: calc(100% - 44px); }
.yf-landing-body .yf26-hero h1 { font-size: 40px; line-height: 1.04; }
.yf-landing-body .yf26-section-head h2,
.yf-landing-body .yf26-outcomes__intro h2,
.yf-landing-body .yf26-system h2,
.yf-landing-body .yf26-materials-head h2 { font-size: 30px; }
.yf-landing-body .yf26-outcomes__grid { gap: 12px; }
.yf-landing-body .yf26-outcomes__grid article { min-height: 0; padding: 20px; }
.yf-landing-body .yf26-tool-card { grid-template-columns: 46px minmax(0, 1fr); gap: 14px; }
.yf-landing-body .yf26-tool-card > i { width: 46px; height: 46px; font-size: 18px; }
.yf-landing-body .yf26-tool-card__content { min-height: 0; }
.yf-landing-body .yf26-tool-demo { margin-top: 22px; }
.yf-landing-body .yf26-outcomes__grid .yf26-tool-card h3 { font-size: 19px; }
.yf-landing-body .yf26-outcomes__grid .yf26-tool-card__content > p { font-size: 14px; }
.yf-landing-body .yf26-tool-capital { grid-template-columns: 1fr; }
.yf-landing-body .yf26-tool-card--capital .yf26-tool-demo {
width: calc(100% + 60px);
margin-left: -60px;
}
.yf-landing-body .yf26-tool-capital {
grid-template-columns: 1fr;
grid-template-areas: "chips" "visual" "total";
gap: 18px;
}
.yf-landing-body .yf26-capital-stack {
width: min(210px, 76vw);
min-width: 0;
height: 174px;
justify-self: center;
}
.yf-landing-body .yf26-capital-stack__layer { width: 142px; }
.yf-landing-body .yf26-tool-message { width: 100%; }
.yf-landing-body .yf26-tool-total strong { font-size: 24px; }
.yf-landing-body .yf26-tool-bars > div { grid-template-columns: 58px minmax(50px, 1fr) auto; gap: 9px; }
.yf-landing-body .yf26-tool-bars span { font-size: 12px; }
.yf-landing-body .yf26-tool-bars strong { font-size: 11px; }
.yf-landing-body .yf26-tool-message { min-height: 158px; padding: 16px 17px 14px; }
.yf-landing-body .yf26-tool-message__head > span { width: 31px; }
.yf-landing-body .yf26-tool-message__head strong { font-size: 13px; }
.yf-landing-body .yf26-tool-message__head small,
.yf-landing-body .yf26-tool-message__head time,
.yf-landing-body .yf26-tool-message__operation small,
.yf-landing-body .yf26-tool-message__status { font-size: 10px; }
.yf-landing-body .yf26-tool-message__operation strong { font-size: 16px; }
.yf-landing-body .yf26-tool-message__operation > b { font-size: 23px; }
.yf-landing-body .yf26-tool-reserve__safety strong { font-size: 25px; }
.yf-landing-body .yf26-tool-reserve__goal > div { align-items: flex-start; flex-direction: column; gap: 4px; }
.yf-landing-body .yf26-outcomes__trust {
grid-template-columns: 42px minmax(0, 1fr);
gap: 12px;
margin-top: 12px;
padding: 16px 18px;
}
.yf-landing-body .yf26-outcomes__trust > i { width: 42px; height: 42px; font-size: 18px; }
.yf-landing-body .yf26-outcomes__trust > span { grid-column: 1 / -1; }
.yf-landing-body .yf26-flow__stage::before { top: 48px; right: 12px; font-size: 72px; }
.yf-landing-body #features .yf26-section-head { margin-bottom: 24px; }
.yf-landing-body .yf26-month-story { padding: 22px 20px 18px; }
.yf-landing-body .yf26-month-story__head {
align-items: flex-start;
flex-direction: column;
gap: 14px;
}
.yf-landing-body .yf26-month-story__head h3 { font-size: 22px; }
.yf-landing-body .yf26-month-story__date {
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
white-space: normal;
}
.yf-landing-body .yf26-month-story__date > b { margin-left: auto; }
.yf-landing-body .yf26-month-story__body {
gap: 16px;
margin-top: 18px;
}
.yf-landing-body .yf26-cashflow-list::before {
top: 30px;
bottom: 30px;
}
.yf-landing-body .yf26-cashflow-row {
grid-template-columns: 28px minmax(0, 1fr) auto;
gap: 10px;
min-height: 64px;
padding: 4px 0;
}
.yf-landing-body .yf26-cashflow-row > div {
display: grid;
gap: 5px;
justify-items: start;
}
.yf-landing-body .yf26-cashflow-row > div > strong { font-size: 14px; }
.yf-landing-body .yf26-cashflow-row > b { font-size: 14px; }
.yf-landing-body .yf26-month-summary > strong { font-size: 25px; }
.yf-landing-body .yf26-scenario-bridge {
margin: 12px 0;
font-size: 12px;
}
.yf-landing-body .yf26-scenario-results article {
grid-template-columns: 42px minmax(0, 1fr);
min-height: 0;
padding: 18px;
}
.yf-landing-body .yf26-scenario-results article > i {
width: 42px;
height: 42px;
}
.yf-landing-body .yf26-scenario-results article > div:first-of-type > strong { font-size: 21px; }
.yf-landing-body .yf26-scenario-insight {
grid-template-columns: 40px minmax(0, 1fr);
padding: 17px;
}
.yf-landing-body .yf26-scenario-insight > i {
width: 40px;
height: 40px;
font-size: 17px;
}
.yf-landing-body .yf26-scenario-insight p { font-size: 12px; }
}
@media (max-width: 339.98px) {
.yf-landing-body .yf26-container { width: calc(100% - 36px); }
.yf-landing-body .yf26-hero h1 { font-size: 36px; }
}
/* Changelog */
.yf-changelog-page {
--yf-changelog-bg: #f3f7f5;
--yf-changelog-surface: #fff;
--yf-changelog-ink: #102c25;
--yf-changelog-muted: #65766f;
--yf-changelog-line: #d8e3df;
margin: 0;
color: var(--yf-changelog-ink);
background: var(--yf-changelog-bg);
font-family: "Manrope", sans-serif;
}
.yf-changelog-hero {
position: relative;
overflow: hidden;
border-bottom: 1px solid rgba(146, 203, 183, .18);
background:
linear-gradient(rgba(97, 172, 145, .055) 1px, transparent 1px),
linear-gradient(90deg, rgba(97, 172, 145, .055) 1px, transparent 1px),
#061d18;
background-size: 40px 40px;
color: #f2f8f5;
}
.yf-changelog-hero__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) 230px;
gap: 64px;
align-items: end;
min-height: 470px;
padding-top: 96px;
padding-bottom: 72px;
}
.yf-changelog-hero__copy { max-width: 830px; }
.yf-changelog-hero .yf26-eyebrow { color: #e2c45e; }
.yf-changelog-hero__copy h1 {
max-width: 790px;
margin: 18px 0 20px;
color: #f4f7f4;
font-size: clamp(48px, 6vw, 82px);
font-weight: 700;
line-height: 1.02;
letter-spacing: 0;
}
.yf-changelog-hero__copy p {
max-width: 710px;
margin: 0;
color: #a8bbb4;
font-size: 18px;
line-height: 1.7;
}
.yf-changelog-hero__signal {
box-sizing: border-box;
display: grid;
grid-template-columns: 1fr auto 1fr;
max-width: 100%;
min-width: 0;
gap: 12px;
align-items: center;
margin-bottom: 12px;
padding: 18px 20px;
border: 1px solid rgba(143, 205, 181, .25);
border-radius: 8px;
background: rgba(18, 57, 47, .72);
font-family: "IBM Plex Mono", monospace;
font-size: 14px;
}
.yf-changelog-hero__signal span { color: #8ea69e; }
.yf-changelog-hero__signal strong { color: #8de0be; text-align: right; }
.yf-changelog-hero__signal i { color: #dfc35d; }
.yf-changelog-feed { padding: 72px 0 104px; }
.yf-changelog-toolbar {
display: flex;
gap: 32px;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 56px;
}
.yf-changelog-toolbar h2 {
margin: 10px 0 0;
color: var(--yf-changelog-ink);
font-size: 34px;
font-weight: 750;
}
.yf-changelog-filters {
display: flex;
gap: 7px;
justify-content: flex-end;
flex-wrap: wrap;
max-width: 680px;
}
.yf-changelog-filters button {
min-height: 40px;
padding: 8px 13px;
border: 1px solid var(--yf-changelog-line);
border-radius: 7px;
color: #52665f;
background: rgba(255, 255, 255, .62);
font: inherit;
font-size: 13px;
font-weight: 650;
transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.yf-changelog-filters button:hover,
.yf-changelog-filters button.is-active {
border-color: #25866c;
color: #fff;
background: #176c58;
}
.yf-changelog-filters button:focus-visible {
outline: 3px solid rgba(43, 142, 113, .22);
outline-offset: 2px;
}
.yf-changelog-timeline { position: relative; }
.yf-changelog-release {
display: grid;
grid-template-columns: 170px 34px minmax(0, 1fr);
align-items: stretch;
}
.yf-changelog-release[hidden] { display: none; }
.yf-changelog-release__meta {
display: flex;
align-items: flex-end;
flex-direction: column;
gap: 7px;
padding: 22px 20px 72px 0;
text-align: right;
}
.yf-changelog-release__meta time {
color: var(--yf-changelog-ink);
font-size: 14px;
font-weight: 700;
}
.yf-changelog-release__meta span {
color: #71837c;
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
}
.yf-changelog-release__marker {
position: relative;
display: flex;
justify-content: center;
}
.yf-changelog-release__marker::before {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: var(--yf-changelog-line);
content: "";
}
.yf-changelog-release:first-child .yf-changelog-release__marker::before { top: 29px; }
.yf-changelog-release:last-of-type .yf-changelog-release__marker::before { bottom: calc(100% - 31px); }
.yf-changelog-release__marker i {
position: relative;
z-index: 1;
width: 13px;
height: 13px;
margin-top: 23px;
border: 3px solid var(--yf-changelog-bg);
border-radius: 50%;
background: #2ca37f;
box-shadow: 0 0 0 1px rgba(44, 163, 127, .36);
}
.yf-changelog-release__content {
margin-bottom: 28px;
padding: 25px 30px 27px;
border: 1px solid var(--yf-changelog-line);
border-radius: 8px;
background: var(--yf-changelog-surface);
box-shadow: 0 14px 34px rgba(29, 72, 59, .055);
}
.yf-changelog-release__categories {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.yf-changelog-release__categories span {
padding: 4px 7px;
border: 1px solid #cfe2db;
border-radius: 5px;
color: #277b65;
background: #f0f8f5;
font-size: 10px;
font-weight: 750;
text-transform: uppercase;
}
.yf-changelog-release__content h3 {
margin: 0;
color: var(--yf-changelog-ink);
font-size: 25px;
font-weight: 750;
line-height: 1.25;
}
.yf-changelog-release__content > p {
max-width: 820px;
margin: 10px 0 20px;
color: var(--yf-changelog-muted);
font-size: 15px;
line-height: 1.65;
}
.yf-changelog-release__content ul {
display: grid;
gap: 10px;
margin: 0;
padding: 19px 0 0;
border-top: 1px solid var(--yf-changelog-line);
list-style: none;
}
.yf-changelog-release__content li {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
gap: 8px;
color: #40564e;
font-size: 14px;
line-height: 1.55;
}
.yf-changelog-release__content li i { color: #289174; font-size: 16px; }
.yf-changelog-release__content small {
display: block;
margin-top: 18px;
color: #8a9994;
font-family: "IBM Plex Mono", monospace;
font-size: 10px;
}
.yf-changelog-empty {
margin: 0 0 0 204px;
padding: 30px;
border: 1px dashed var(--yf-changelog-line);
color: var(--yf-changelog-muted);
text-align: center;
}
.yf-changelog-page.dark-theme {
--yf-changelog-bg: #101a1d;
--yf-changelog-surface: #1b2729;
--yf-changelog-ink: #edf5f2;
--yf-changelog-muted: #9aada7;
--yf-changelog-line: #31413f;
}
.yf-changelog-page.dark-theme .yf-changelog-filters button { color: #b5c5bf; background: #1b2729; }
.yf-changelog-page.dark-theme .yf-changelog-filters button:hover,
.yf-changelog-page.dark-theme .yf-changelog-filters button.is-active { color: #0d261f; background: #78d5b2; }
.yf-changelog-page.dark-theme .yf-changelog-release__content { box-shadow: none; }
.yf-changelog-page.dark-theme .yf-changelog-release__categories span { border-color: #31594d; color: #8ed9bd; background: #203a33; }
.yf-changelog-page.dark-theme .yf-changelog-release__content li { color: #c7d4cf; }
@media (max-width: 767.98px) {
.yf-changelog-hero__inner {
grid-template-columns: 1fr;
gap: 34px;
min-height: 0;
padding-top: 72px;
padding-bottom: 52px;
}
.yf-changelog-hero__copy h1 { font-size: 45px; }
.yf-changelog-hero__copy p { font-size: 16px; }
.yf-changelog-hero__signal { width: 100%; margin: 0; }
.yf-changelog-feed { padding: 52px 0 76px; }
.yf-changelog-toolbar { align-items: flex-start; flex-direction: column; margin-bottom: 34px; }
.yf-changelog-toolbar h2 { font-size: 28px; }
.yf-changelog-filters { justify-content: flex-start; max-width: none; }
.yf-changelog-release { grid-template-columns: 22px minmax(0, 1fr); }
.yf-changelog-release__meta {
grid-column: 2;
align-items: flex-start;
flex-direction: row;
justify-content: space-between;
padding: 0 0 10px;
text-align: left;
}
.yf-changelog-release__marker { grid-column: 1; grid-row: 1 / span 2; }
.yf-changelog-release__marker i { margin-top: 5px; }
.yf-changelog-release:first-child .yf-changelog-release__marker::before { top: 11px; }
.yf-changelog-release:last-of-type .yf-changelog-release__marker::before { bottom: calc(100% - 13px); }
.yf-changelog-release__content { grid-column: 2; margin-bottom: 24px; padding: 22px 20px 23px; }
.yf-changelog-release__content h3 { font-size: 21px; }
.yf-changelog-release__content > p { font-size: 14px; }
.yf-changelog-empty { margin-left: 22px; }
}
@media (max-width: 389.98px) {
.yf-changelog-hero__copy h1 { font-size: 38px; }
.yf-changelog-filters button { flex: 1 1 calc(50% - 7px); }
.yf-changelog-release__meta { align-items: flex-start; flex-direction: column; }
}