/* Settings, Profile, Edit profile and every You page on the dark design: grouped lists like the rest of the app.
   Loaded last; the ids beat the older light-design rules still in styles.css and layout-v3.css. */
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet { --st-row:#2a2e35; --st-line:#ffffff10; --st-muted:#9aa3ad; --st-text:#f1f3f5; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet .st-section { display:block!important; margin:0!important; padding:0 0 20px!important; border:0!important; background:none!important; box-shadow:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet .st-label { display:block; margin:0 0 8px 4px!important; font-size:12px!important; font-weight:700!important; letter-spacing:.08em!important; color:var(--st-muted)!important; text-transform:uppercase; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet .st-group { display:block; overflow:hidden; margin:0 0 10px; padding:0!important; border:0!important; border-radius:16px!important; background:var(--st-row)!important; box-shadow:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet .st-group:last-of-type { margin-bottom:0; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet :is(.st-row,.account-link) { box-sizing:border-box; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:14px!important; width:100%!important; min-height:54px!important; height:auto!important; margin:0!important; padding:10px 16px!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; color:var(--st-text)!important; font-weight:600!important; font-size:15px!important; line-height:1.3!important; font-family:inherit!important; text-align:left!important; text-decoration:none!important; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet :is(.st-row,.account-link) + :is(.st-row,.account-link,.st-pro) { border-top:1px solid var(--st-line)!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet :is(button.st-row,.account-link):active { background:#ffffff0a!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet :is(.st-row,.account-link) b { font-size:15px!important; font-weight:600!important; color:var(--st-text)!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet .st-text { display:flex!important; flex-direction:column; gap:3px; min-width:0; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet .st-text > span { display:block; margin:0!important; font-size:13px!important; font-weight:500!important; line-height:1.35!important; color:var(--st-muted)!important; letter-spacing:0!important; text-transform:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet :is(.st-row,.account-link) > i { flex:none; font-style:normal; font-size:20px; line-height:1; color:#6f7882!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet .account-link > i { font-size:15px; }
/* Plan: the plan on the left, a quiet blue text button on the right. */
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet .st-link { flex:none; height:34px!important; padding:0 14px!important; border:0!important; border-radius:999px!important; background:#3b82f61f!important; color:#7cb0ff!important; font-weight:600!important; font-size:14px!important; line-height:1!important; font-family:inherit!important; box-shadow:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet .st-pro { display:flex!important; flex-direction:column; gap:4px; margin:0!important; padding:12px 16px 14px!important; border:0!important; border-radius:0!important; background:transparent!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet .st-pro[hidden] { display:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet .st-pro b { font-size:14px!important; color:var(--st-text)!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet .st-pro span { font-size:14px!important; font-weight:600!important; color:#7cb0ff!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet .st-pro :is(small,em) { font-size:13px!important; font-style:normal; line-height:1.4; color:var(--st-muted)!important; }
/* Switch rows: the text wraps, the switch stays on the right. */
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet .settings-toggle.st-row { align-items:center!important; padding-top:12px!important; padding-bottom:12px!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet .settings-toggle.st-row input { flex:none; margin:0!important; }
/* Choice rows: the choice reads as quiet text with a chevron, not a boxed field. */
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet .st-select select { flex:none; min-width:0!important; width:auto!important; max-width:55%; height:36px!important; margin:0!important; padding:0 22px 0 8px!important; border:0!important; border-radius:10px!important; background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%239aa3ad' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 2px center/12px no-repeat!important; color:var(--st-muted)!important; font-weight:500!important; font-size:15px!important; line-height:1!important; font-family:inherit!important; text-align:right; text-align-last:right; -webkit-appearance:none; appearance:none; box-shadow:none!important; cursor:pointer; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet .st-select select:focus-visible { outline:2px solid #3b82f6; outline-offset:2px; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet .st-select select option { background:#2a2e35; color:#f1f3f5; }
/* Account: sign out in blue, delete in red, like iOS. */
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet .settings-signout b { color:#7cb0ff!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet .account-delete.st-row { justify-content:center!important; color:#ff6b6b!important; text-align:center!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet .st-row:disabled { opacity:.6; cursor:default; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet .st-note { margin:8px 4px 0!important; font-size:13px!important; line-height:1.4!important; color:var(--st-muted)!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet .st-note:empty { display:none; }

/* Profile: one rounded card for who you are, the two actions full width under it. */
.vertex-v3 #app#app#app#app#app#app#app#app #communityProfileView .community-profile-hero { display:grid!important; grid-template-columns:52px minmax(0,1fr)!important; align-items:center!important; column-gap:12px!important; margin:0 0 12px!important; padding:14px!important; border:0!important; border-radius:18px!important; background:#2a2e35!important; box-shadow:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #communityProfileView .community-profile-avatar { width:52px!important; height:52px!important; border-radius:50%!important; font-size:22px!important; font-weight:700!important; display:grid!important; place-items:center!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #communityProfileView .community-profile-hero > div { display:contents!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #communityProfileView #communityProfileTitle { grid-column:2; align-self:end; font-size:18px!important; font-weight:700!important; color:#f1f3f5!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #communityProfileView #communityProfileMeta { grid-column:2; align-self:start; margin-top:2px!important; font-size:13px!important; color:#9aa3ad!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #communityProfileView #communityProfileBio { grid-column:1 / -1; margin:10px 0 0!important; font-size:15px!important; line-height:1.45!important; color:#d9dee3!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #communityProfileView :is(#communityProfileActions,#communityFriendActions,#communitySafetyActions):not([hidden]) { grid-column:1 / -1; display:grid!important; grid-template-columns:1fr 1fr!important; gap:8px!important; margin:12px 0 0!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #communityProfileView :is(#communityProfileActions,#communityFriendActions,#communitySafetyActions) button { width:100%!important; height:42px!important; margin:0!important; padding:0 12px!important; border:0!important; border-radius:12px!important; background:#3a3f48!important; color:#f1f3f5!important; font-weight:600!important; font-size:15px!important; line-height:1!important; font-family:inherit!important; box-shadow:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #communityProfileView .community-profile-stats { margin:0 0 16px!important; }

/* Edit profile: the same field style as the setup screen. */
.vertex-v3 #app#app#app#app#app#app#app#app #profileEditorSheet > label { display:block!important; margin:0 0 16px!important; font-size:13px!important; font-weight:600!important; color:#9aa3ad!important; letter-spacing:0!important; text-transform:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #profileEditorSheet > label :is(input,textarea) { box-sizing:border-box; display:block; width:100%!important; margin:8px 0 0!important; padding:13px 16px!important; border:1px solid #ffffff1f!important; border-radius:14px!important; background:#2a2e35!important; color:#f1f3f5!important; font-weight:500!important; font-size:16px!important; line-height:1.35!important; font-family:inherit!important; box-shadow:none!important; outline:none; }
.vertex-v3 #app#app#app#app#app#app#app#app #profileEditorSheet > label input { height:50px!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #profileEditorSheet > label textarea { min-height:96px; resize:vertical; }
.vertex-v3 #app#app#app#app#app#app#app#app #profileEditorSheet > label :is(input,textarea):focus { border-color:#3b82f6!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #profileEditorSheet > label :is(input,textarea)::placeholder { color:#7d8791!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #profileEditorSheet .profile-editor-rider { margin:6px 0 18px!important; padding-top:20px!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #profileEditorSheet #profileEditorNote { margin:0 4px 12px!important; font-size:13px!important; color:#9aa3ad!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #profileEditorSheet #saveProfile { height:52px!important; border-radius:14px!important; font-size:16px!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet .settings-help :is(.st-text,.st-text span) { opacity:1!important; margin-top:0; }
.vertex-v3 #app#app#app#app#app#app#app#app #settingsSheet .st-select { min-height:52px!important; padding-top:6px!important; padding-bottom:6px!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #communityProfileView .community-profile-avatar { grid-row:1 / span 2; }
.vertex-v3 #app#app#app#app#app#app#app#app #communityProfileView :is(#communityProfileTitle,#communityProfileMeta) { display:block!important; margin-left:0!important; padding:0!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #communityProfileView :is(#communityProfileActions,#communityFriendActions,#communitySafetyActions) button { border:0!important; outline:0; }
.vertex-v3 #app#app#app#app#app#app#app#app #communityProfileView .community-route-save-inline { height:40px!important; margin:6px 0 0!important; border:0!important; border-radius:12px!important; background:#3a3f48!important; color:#f1f3f5!important; font-size:15px!important; font-weight:600!important; }

/* You and its pages (menu, Ski log, My routes, Friends & people): the same rounded grouped lists. */
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .you-season-summary { margin:0 0 12px!important; padding:14px 16px!important; border:0!important; border-radius:16px!important; background:#2a2e35!important; box-shadow:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .you-season-summary small { font-size:12px!important; font-weight:700!important; letter-spacing:.08em!important; color:#9aa3ad!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .you-season-summary b { display:block; margin-top:4px!important; font-size:17px!important; font-weight:700!important; color:#f1f3f5!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .you-menu { display:block!important; overflow:hidden; padding:0!important; border:0!important; border-radius:16px!important; background:#2a2e35!important; box-shadow:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .you-menu > button { display:flex!important; align-items:center!important; gap:12px!important; width:100%!important; min-height:54px!important; margin:0!important; padding:8px 16px!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .you-menu > button + button { border-top:1px solid #ffffff10!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .you-menu > button:active { background:#ffffff0a!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .you-menu > button > span { display:grid!important; place-items:center!important; flex:none; width:34px!important; height:34px!important; border:0!important; border-radius:10px!important; background:#3a3f48!important; color:#f1f3f5!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .you-menu > button > div { flex:1 1 auto; min-width:0; text-align:left; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .you-menu > button b { font-size:15px!important; font-weight:600!important; color:#f1f3f5!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .you-menu > button > i { font-style:normal; font-size:20px!important; color:#6f7882!important; }

/* Ski log: totals as quiet tiles, the days as one rounded list. */
.vertex-v3 #app#app#app#app#app#app#app#app #activitiesTotals { gap:8px!important; margin:0 0 14px!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #activitiesTotals > span { padding:12px 14px!important; border:0!important; border-radius:16px!important; background:#2a2e35!important; box-shadow:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #activitiesTotals b { font-size:18px!important; font-weight:700!important; color:#f1f3f5!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #activitiesTotals small { font-size:13px!important; color:#9aa3ad!important; letter-spacing:0!important; text-transform:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #activitiesList:not(:empty) { display:block!important; overflow:hidden; border-radius:16px!important; background:#2a2e35!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #activitiesList .activity-row { display:flex!important; align-items:center!important; gap:12px!important; width:100%!important; min-height:64px!important; margin:0!important; padding:10px 16px!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #activitiesList .activity-row + .activity-row { border-top:1px solid #ffffff10!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #activitiesList .activity-row:active { background:#ffffff0a!important; }
.vertex-v3 #app#app#app#app#app#app#app#app :is(#activitiesList,#routesList) .activity-icon { display:grid!important; place-items:center!important; flex:none; width:36px!important; height:36px!important; border:0!important; border-radius:50%!important; background:#3a3f48!important; color:#f1f3f5!important; }
.vertex-v3 #app#app#app#app#app#app#app#app :is(#activitiesList,#routesList) .activity-copy { flex:1 1 auto; min-width:0; }
.vertex-v3 #app#app#app#app#app#app#app#app :is(#activitiesList,#routesList) .activity-copy small { font-size:12px!important; color:#9aa3ad!important; letter-spacing:0!important; text-transform:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app :is(#activitiesList,#routesList) .activity-copy b { font-size:15px!important; font-weight:600!important; color:#f1f3f5!important; }
.vertex-v3 #app#app#app#app#app#app#app#app :is(#activitiesList,#routesList) .activity-copy em { font-size:13px!important; font-style:normal; color:#9aa3ad!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #activitiesList .activity-arrow { font-size:20px!important; color:#6f7882!important; }

/* Friends & people: one small heading per group, cards without outlines. */
.vertex-v3 #app#app#app#app#app#app#app#app .community-friends-title { display:block!important; margin:0 0 8px 4px!important; }
.vertex-v3 #app#app#app#app#app#app#app#app .community-friends-title small { font-size:12px!important; font-weight:700!important; letter-spacing:.08em!important; color:#9aa3ad!important; }
.vertex-v3 #app#app#app#app#app#app#app#app .community-friends-title b { display:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app :is(.community-person-card,.community-my-profile-card,.community-route-card) { border:0!important; border-radius:16px!important; background:#2a2e35!important; box-shadow:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app :is(.community-person-card,.community-my-profile-card) :is(button:not(.community-person-card)) { border:0!important; border-radius:10px!important; }
.vertex-v3 #app#app#app#app#app#app#app#app .community-section-head small { font-size:12px!important; font-weight:700!important; letter-spacing:.08em!important; color:#9aa3ad!important; }
.vertex-v3 #app#app#app#app#app#app#app#app .community-section-head h2 { font-size:17px!important; font-weight:700!important; }

/* My routes: the toolbar buttons share one shape, the routes are one rounded list. */
.vertex-v3 #app#app#app#app#app#app#app#app .routes-library-toolbar .route-filter-toggle { border:0!important; background:#2a2e35!important; color:#f1f3f5!important; box-shadow:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app .routes-library-toolbar .route-filter-toggle[aria-expanded="true"] { background:#3b82f6!important; color:#fff!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #routesList:has(.route-row) { display:block!important; overflow:hidden; border-radius:16px!important; background:#2a2e35!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #routesList .route-row { display:flex!important; align-items:center!important; gap:8px!important; margin:0!important; padding:8px 10px 8px 12px!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #routesList .route-row + .route-row { border-top:1px solid #ffffff10!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #routesList .route-main { display:flex!important; align-items:center!important; gap:12px!important; flex:1 1 auto; min-width:0; padding:4px 0!important; border:0!important; background:transparent!important; box-shadow:none!important; text-align:left; }
.vertex-v3 #app#app#app#app#app#app#app#app #routesList .route-thumb { flex:none; width:48px!important; height:48px!important; border:0!important; border-radius:12px!important; background:#3a3f48!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #routesList :is(.route-map-toggle,.route-more) { flex:none; height:34px!important; min-width:34px; padding:0 12px!important; border:0!important; border-radius:999px!important; background:#3a3f48!important; color:#f1f3f5!important; font-size:13px!important; font-weight:600!important; box-shadow:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #routesList .route-map-toggle.active { background:#3b82f6!important; color:#fff!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #routesList .activities-empty { display:block!important; padding:24px 16px!important; border:0!important; border-radius:16px!important; background:#2a2e35!important; text-align:center; }
.vertex-v3 #app#app#app#app#app#app#app#app #routesList .activities-empty b { font-size:15px!important; font-weight:600!important; color:#9aa3ad!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #exploreSheet #savedTourControls { height:auto!important; min-height:0!important; grid-template-rows:auto!important; }

/* Saved mountains: one rounded card per mountain, numbers in a quiet row. */
.vertex-v3 #app#app#app#app#app#app#app#app #compareGrid { gap:8px!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #compareGrid .compare-card { border:0!important; border-radius:16px!important; background:#2a2e35!important; box-shadow:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #compareGrid .compare-card:active { background:#30353d!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #compareGrid .compare-card b { color:#f1f3f5!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #compareGrid .compare-card small { color:#9aa3ad!important; letter-spacing:0!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #compareGrid :is(.activities-empty,.compare-loading) { padding:20px 16px!important; border:0!important; border-radius:16px!important; background:#2a2e35!important; color:#9aa3ad!important; font-size:14px!important; text-align:center; }
.vertex-v3 #app#app#app#app#app#app#app#app #compareGrid .activities-empty :is(b,span) { display:block; }
.vertex-v3 #app#app#app#app#app#app#app#app #compareGrid .activities-empty b { font-size:15px!important; color:#f1f3f5!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #compareGrid .activities-empty span { margin-top:4px; font-size:13px!important; color:#9aa3ad!important; }