/* The same identity is used at app size, in navigation, and on the design sheet. */
.upfront-wordmark {display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-family:var(--sans,'Arial',sans-serif);font-size:25px;font-weight:700;line-height:1;letter-spacing:-1.1px;color:var(--ink,#352033)}
.upfront-wordmark .upfront-mark {width:29px;height:29px;flex:none}
.upfront-period {color:#a84875}
.wordmark:has(.upfront-wordmark) {font-family:var(--sans);letter-spacing:0}
.desk-brand .upfront-wordmark {font-size:32px}
.desk-brand .upfront-mark {width:36px;height:36px}
.hm-footer > .upfront-wordmark {letter-spacing:-.8px;font-size:24px}
.feature-login .upfront-wordmark {color:inherit;margin-bottom:8px}
.official-platform {display:inline-flex;align-items:center;justify-content:center;overflow:hidden;padding:0!important;background:transparent!important;flex-shrink:0}
.official-platform img {display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit}
.official-platform[data-platform-logo="goodshort"] {background:#fff!important;border-radius:24%;box-shadow:inset 0 0 0 1px #f2dce7}
.official-platform[data-platform-logo="goodshort"] img {transform:scale(1.34);border-radius:0}
.platform-picker .hm-platform-mark.official-platform {border-radius:6px}
.pmark.official-platform {width:22px;height:22px;border-radius:5px;background:transparent}
.platform-monogram.official-platform {width:36px;height:36px;border-radius:8px}
/* Transparent dimensional navigation artwork. */
.tabbar a > .upfront-nav-image {display:block;width:38px;height:38px;flex:none;object-fit:contain;user-select:none;-webkit-user-drag:none}
.tabbar a[data-tab="home"],.tabbar a[data-tab="discover"],.tabbar a[data-tab="earnings"],.tabbar a[data-tab="me"] {gap:1px}
.tabbar a:active > .upfront-nav-image {transform:translateY(1px)}
.currency-note {font-size:11px;line-height:1.6;color:var(--muted);margin:14px 0 0}
.metric .big {font-variant-numeric:tabular-nums}
.metric .big small {white-space:normal}
.pcard .metric .big {font-size:24px}
.pcard .metric .big small {display:block;font-size:11px;margin:3px 0 0}
.dc-metric > span:first-child {min-width:0}
.dc-metric > span:first-child small {display:block;font-size:11px;margin-top:2px}
.kp-num {font-variant-numeric:tabular-nums;letter-spacing:-1px}
.wallet-review strong,.account-record-amount {font-variant-numeric:tabular-nums}
@media (max-width:350px){.upfront-wordmark{font-size:23px}.upfront-wordmark .upfront-mark{width:27px;height:27px}.pcard .metric .big{font-size:22px}.kp-num{font-size:32px}.tabbar a > .upfront-nav-image{width:35px;height:35px}}

/* The New button keeps its prominent position with a warm dimensional treatment. */
.tab-new-icon {background:linear-gradient(145deg,#fffaf6,#ffe3d4);border-color:#fffaf6;box-shadow:inset 0 1px 0 #fff,0 5px 13px rgb(148 76 50 / .2)}
.tabbar .tab-new-icon > .upfront-new-image {display:block;width:52px;height:52px;object-fit:contain;user-select:none;-webkit-user-drag:none}
.tab-new-icon b {background:#ffeadb;color:#a34721;border-color:#fffaf6}
.tabbar .tab-new[aria-current="page"] .tab-new-icon {background:linear-gradient(145deg,#fff4e9,#ffd2b7);box-shadow:inset 0 1px 0 #fff,0 5px 17px rgb(188 87 47 / .28)}

/* Shared destination buttons: one shape, artwork chosen for each destination. */
#app .uf-nav-button {display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;max-width:100%;padding:8px 11px;border:1px solid #ddb9ce;border-radius:12px;background:#fff3f9;color:#6e3c58;font:650 11.5px/1.45 var(--sans);text-decoration:none;text-align:left;cursor:pointer;box-shadow:0 2px 4px #8c46670a;transition:background-color .15s,border-color .15s}
#app .uf-nav-button .uf-nav-art {display:inline-flex;align-items:center;justify-content:center;flex:none;width:23px;height:23px;object-fit:contain;font:21px/1 "Segoe UI Emoji",sans-serif}
#app .uf-nav-button .uf-nav-heart {color:#c9457c;font:25px/1 var(--sans)}
#app .uf-nav-button .uf-nav-copy {display:block;min-width:0}
#app .uf-nav-button .uf-nav-copy>span {display:block}
#app .uf-nav-button .uf-nav-arrow {display:block;flex:none;width:15px;height:15px;margin:0;color:currentColor}
#app .uf-nav-button[data-nav-kind="follow"] {background:#ffedf5;border-color:#dda5c0;color:#8d3e63}
#app .uf-nav-button[data-nav-kind="records"],#app .uf-nav-button[data-nav-kind="earnings"] {background:#fff2e9;border-color:#e6c4b5;color:#824e3b}
#app .uf-nav-button[data-nav-kind="security"],#app .uf-nav-button[data-nav-kind="profile"] {background:#f4f3ff;border-color:#d5c9e4;color:#5b476c}
#app .uf-nav-button[data-nav-kind="charts"] {background:#fff3e9;border-color:#e6c8b3;color:#885335}
#app .uf-nav-button[data-nav-kind="watch"] {background:#fff0e8;border-color:#e8c5b9;color:#824738}
#app .uf-nav-button:focus-visible {outline:2px solid #9f507a;outline-offset:3px}
#app .account-section-head {gap:8px;flex-wrap:wrap}
#app .account-settings {display:grid;gap:8px;padding:0;border:0;background:transparent;box-shadow:none}
#app .account-settings+.account-settings {margin-top:8px}
#app .uf-nav-setting {width:100%;min-height:62px;padding:12px 14px;justify-content:flex-start}
#app .uf-nav-setting .uf-nav-art {width:29px;height:29px;font-size:26px}
#app .uf-nav-setting .uf-nav-copy {flex:1}
#app .uf-nav-setting b {font:650 13px/1.4 var(--sans);color:#3e2939}
#app .uf-nav-setting small {display:block;margin-top:4px;color:#705568;font:400 10.5px/1.5 var(--sans)}
#app .account-wallet-meta>.uf-nav-button {min-height:34px;padding:5px 8px;border-color:#94718a;background:#fff4fb12;color:#f8deed;font-size:11px}
#app .account-wallet-meta>.uf-nav-button .uf-nav-art {width:20px;height:20px;font-size:18px}
#app .er-story-button.uf-nav-button {min-height:32px;padding:4px 7px;gap:5px;border-radius:8px;font-size:10.5px;white-space:nowrap}
#app .er-story-button.uf-nav-button .uf-nav-art {width:18px;height:18px}
#app .er-story-button.uf-nav-button .uf-nav-arrow {width:13px;height:13px}
#app .er-work-meta {flex-wrap:wrap}
#app .hm-project-details.uf-nav-button {min-height:32px;padding:4px 7px;gap:5px;font-size:10.5px;border-radius:9px}
#app .hm-project-details.uf-nav-button .uf-nav-art {width:19px;height:19px}
#app .ufc-button--story.uf-nav-button {font-size:13px;min-height:44px}
#app .account-shortcuts {gap:6px}
#app .account-shortcuts a {border:1px solid #e4bdd2;border-radius:10px;padding:10px 3px;background:#fff5fb99}
#app [data-act="follow"] {color:#b23f73}
#app [data-act="follow"][aria-pressed="true"] {color:#cd467f}
#app [data-act="follow"] svg.fill {fill:currentColor;stroke:currentColor}
#app .account-shortcuts a[href="#/me/following"] svg {color:#cd467f;fill:currentColor;stroke:currentColor}
#app .following-list .prow {align-items:center}
#app #profile-form {padding-top:8px}
#app #profile-form fieldset {margin-top:22px}
#app .bar.sub h1 {font-family:var(--sans);font-weight:650}
@media(hover:hover){#app .uf-nav-button:hover{background:#f9e2ee;border-color:#c78da9}#app .account-wallet-meta>.uf-nav-button:hover{background:#ffffff20}}
@media(max-width:370px){#app .uf-nav-button{gap:5px;padding-inline:8px;font-size:10.5px}#app .uf-nav-button .uf-nav-art{width:21px;height:21px}#app .uf-nav-setting{padding:10px 12px}#app .account-shortcut-top{gap:4px}#app .account-shortcuts a{font-size:10px}#app .account-shortcut-top b{font-size:18px}#app .account-footer{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){#app .uf-nav-button{transition:none}}