.rider-hub {
  --hub-surface: #fff;
  --hub-surface-soft: #f3f5f7;
  --hub-ink: #20262d;
  --hub-muted: #6d7884;
  --hub-line: #dfe4e8;
  --hub-red: #cf1d33;
  --hub-red-soft: rgba(207, 29, 51, .09);
  --hub-green: #218b5a;
  color: var(--hub-ink);
  display: grid;
  gap: 1rem;
  margin: .5rem 0 2rem;
}
html[data-theme="dark"] .rider-hub {
  --hub-surface: #191d22;
  --hub-surface-soft: #22272d;
  --hub-ink: #edf1f5;
  --hub-muted: #a6b0bb;
  --hub-line: #323940;
  --hub-red: #a7182b;
  --hub-red-soft: rgba(240, 60, 83, .12);
  --hub-green: #48c68a;
}
.rider-hub-hero { background: linear-gradient(130deg, #141920, #252d36); border: 0; border-radius: 20px; box-shadow: 0 18px 45px rgba(5,10,16,.24); color: #fff; min-height: 330px; overflow: hidden; padding: 1.6rem; position: relative; }
.rider-hub-hero.has-cover { background-image: var(--hub-cover); background-position: center; background-size: cover; }
.rider-hub-hero::after { background: linear-gradient(90deg, #d41931, #fa566a 45%, transparent 88%); bottom: 0; content: ""; height: 4px; left: 0; position: absolute; right: 0; }
.rider-hub-hero__shade { background: linear-gradient(90deg, rgba(7,11,16,.7) 0%, rgba(9,14,20,.48) 38%, rgba(9,14,20,.18) 72%, rgba(9,14,20,.08) 100%), linear-gradient(180deg, rgba(7,11,16,.06) 0%, rgba(7,11,16,.14) 62%, rgba(7,11,16,.42) 100%); inset: 0; position: absolute; }
.rider-hub-title h1,
.rider-hub-title > strong,
.rider-hub-title__meta { text-shadow: 0 2px 10px rgba(0,0,0,.72); }
.rider-hub-hero.is-uploading::before { align-items: center; background: rgba(7,11,16,.68); color: #fff; content: "Αποθήκευση…"; display: flex; font-size: .78rem; font-weight: 750; inset: 0; justify-content: center; position: absolute; z-index: 4; }
.rider-hub-cover-controls { bottom: 6.25rem; display: flex; gap: .4rem; position: absolute; right: 1.6rem; z-index: 2; }
.rider-hub-cover-edit, .rider-hub-cover-remove { align-items: center; backdrop-filter: blur(8px); background: rgba(10,14,20,.72); border: 1px solid rgba(255,255,255,.28); border-radius: 9px; color: #fff; cursor: pointer; display: flex; font-size: .72rem; font-weight: 760; gap: .42rem; min-height: 38px; padding: .5rem .7rem; }
.rider-hub-cover-edit:hover { background: rgba(10,14,20,.9); border-color: rgba(255,255,255,.5); }
.rider-hub-cover-remove { background: rgba(139,20,36,.76); }
.rider-hub-cover-remove:hover { background: rgba(176,24,44,.92); border-color: rgba(255,255,255,.48); }
.rider-hub-cover-remove.is-hidden { display: none; }
.rider-hub-cover-input { height: 1px; opacity: 0; overflow: hidden; pointer-events: none; position: absolute; width: 1px; }
.rider-hub-hero__content { align-items: flex-start; display: flex; gap: 1.5rem; justify-content: space-between; position: relative; z-index: 1; }
.rider-hub-hero__identity { align-items: center; display: flex; gap: 1rem; min-width: 0; }
.rider-hub-avatar { flex: 0 0 106px; height: 106px; position: relative; width: 106px; }
.rider-hub-avatar img { border: 4px solid rgba(255,255,255,.82); border-radius: 50%; box-shadow: 0 10px 28px rgba(0,0,0,.34); height: 106px; object-fit: cover; width: 106px; }
.rider-hub-presence { background: #7d8791; border: 3px solid #1b2128; border-radius: 50%; bottom: 6px; height: 17px; position: absolute; right: 3px; width: 17px; }
.rider-hub-presence.is-online { background: #43d78e; box-shadow: 0 0 0 4px rgba(67,215,142,.16); }
.rider-hub-title > span { color: #a91b2d; display: block; font-size: .65rem; font-weight: 850; letter-spacing: .12em; }
.rider-hub-title h1 { color: #fff !important; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.05; margin: .28rem 0 .12rem; }
.rider-hub-title > strong { color: #d6dde4; display: block; font-size: .85rem; font-weight: 650; }
.rider-hub-title__meta { display: flex; flex-wrap: wrap; gap: .65rem 1rem; margin-top: .65rem; }
.rider-hub-title__meta span { align-items: center; color: #bdc6cf; display: inline-flex; font-size: .68rem; gap: .35rem; }
.rider-hub-title__meta i { color: #ff7183; }
.rider-hub-title__meta .is-online, .rider-hub-title__meta .is-online i { color: #64dba0; font-size: .58rem; }
.rider-hub-actions { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: flex-end; max-width: 390px; }
.rider-hub-action { align-items: center; background: rgba(10,14,20,.64); border: 1px solid rgba(255,255,255,.3); border-radius: 9px; color: #fff !important; cursor: pointer; display: inline-flex; font-size: .7rem; font-weight: 760; gap: .4rem; min-height: 39px; padding: .58rem .72rem; text-decoration: none !important; text-shadow: 0 1px 5px rgba(0,0,0,.7); }
.rider-hub-action:hover { background: rgba(10,14,20,.82); }
.rider-hub-action--primary, .rider-hub-action--wave { background: #d51f36; border-color: #ea4055; }
.rider-hub-action--primary.is-active { background: rgba(53,177,113,.22); border-color: rgba(91,222,151,.55); }
.rider-hub-action--wave.is-active { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #c7d0d8 !important; cursor: default; }
.rider-hub-connections { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.6rem; max-width: 820px; position: relative; z-index: 1; }
.rider-hub-connections span { align-items: center; backdrop-filter: blur(6px); background: rgba(12,17,24,.66); border: 1px solid rgba(255,255,255,.17); border-radius: 999px; color: #e6ebef; display: inline-flex; font-size: .66rem; font-weight: 690; gap: .38rem; padding: .38rem .58rem; }
.rider-hub-connections i { color: #ff687a; }
.rider-hub-stats { backdrop-filter: blur(7px); background: rgba(10,14,20,.7); border: 1px solid rgba(255,255,255,.12); border-radius: 13px; bottom: 1.4rem; display: grid; grid-template-columns: repeat(5, minmax(75px, 1fr)); left: 1.6rem; max-width: 610px; overflow: hidden; position: absolute; z-index: 1; }
.rider-hub-stats span { min-width: 0; padding: .65rem .85rem; text-align: center; }
.rider-hub-stats span + span { border-left: 1px solid rgba(255,255,255,.12); }
.rider-hub-stats strong, .rider-hub-stats small { display: block; }
.rider-hub-stats strong { color: #fff; font-size: .9rem; }
.rider-hub-stats small { color: #aeb8c2; font-size: .55rem; margin-top: .08rem; }
.rider-hub-follow-settings { align-items: center; background: var(--hub-surface); border: 1px solid var(--hub-line); border-radius: 12px; box-shadow: 0 8px 22px rgba(12,18,24,.07); display: flex; flex-wrap: wrap; gap: .75rem 1.2rem; padding: .75rem 1rem; }
.rider-hub-follow-settings.is-hidden { display: none; }
.rider-hub-follow-settings > div { align-items: center; display: flex; gap: .6rem; margin-right: auto; }
.rider-hub-follow-settings > div > i { color: var(--hub-red); }
.rider-hub-follow-settings strong, .rider-hub-follow-settings small { display: block; }
.rider-hub-follow-settings strong { color: var(--hub-ink); font-size: .72rem; }
.rider-hub-follow-settings small { color: var(--hub-muted); font-size: .6rem; margin-top: .1rem; }
.rider-hub-follow-settings label { color: var(--hub-muted); font-size: .66rem; margin: 0; }
.rider-hub-follow-settings input { accent-color: var(--hub-red); margin-right: .25rem; }
.rider-hub-follow-settings button { background: var(--hub-red); border: 0; border-radius: 7px; color: #fff; font-size: .63rem; font-weight: 720; padding: .45rem .65rem; }
.rider-interaction-history { background: linear-gradient(135deg, #1c222a, #12171d); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; box-shadow: 0 8px 22px rgba(12,18,24,.12); color: #fff; padding: .9rem 1rem; }
.rider-interaction-history__heading { align-items: center; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: .7rem; }
.rider-interaction-history__heading span { color: #ff7183; display: block; font-size: .75rem; font-weight: 850; letter-spacing: .08em; }
.rider-interaction-history__heading h2 { color: #fff !important; font-size: 1rem; margin: .12rem 0 0; }
.rider-interaction-history__heading > small { color: #aeb8c2; font-size: .75rem; }
.rider-interaction-history__heading > small i { margin-right: .3rem; }
.rider-interaction-history__grid { display: grid; gap: .55rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rider-interaction-history__grid > a, .rider-interaction-history__grid > div { align-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); border-radius: 9px; color: #fff !important; display: flex; gap: .55rem; min-width: 0; padding: .6rem; text-decoration: none !important; }
.rider-interaction-history__grid > a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); }
.rider-interaction-history__grid > a > i:first-child, .rider-interaction-history__grid > div > i { color: #ff7183; font-size: 1rem; }
.rider-interaction-history__grid > a > i:last-child { color: #7f8b96; font-size: .72rem; margin-left: auto; }
.rider-interaction-history__grid span { min-width: 0; }
.rider-interaction-history__grid small, .rider-interaction-history__grid strong { display: block; }
.rider-interaction-history__grid small { color: #c0c8d0; font-size: .75rem; line-height: 1.3; }
.rider-interaction-history__grid strong { font-size: .84rem; margin-top: .12rem; }
.rider-insights-panel, .rider-story-panel { background: var(--hub-surface); border: 1px solid var(--hub-line); border-radius: 15px; box-shadow: 0 8px 24px rgba(12,18,24,.07); padding: 1.1rem; }
.rider-insights-panel__heading { align-items: center; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: .8rem; }
.rider-insights-panel__heading span { color: var(--hub-red); display: block; font-size: .56rem; font-weight: 850; letter-spacing: .1em; }
.rider-insights-panel__heading h2 { color: var(--hub-ink) !important; font-size: .95rem; margin: .12rem 0 0; }
.rider-insights-panel__heading > small { align-items: center; color: var(--hub-muted); display: flex; font-size: .55rem; gap: .3rem; }
.rider-insights-grid { display: grid; gap: .6rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rider-insights-grid > div { align-items: center; background: var(--hub-surface-soft); border: 1px solid var(--hub-line); border-radius: 10px; display: grid; gap: .05rem .5rem; grid-template-columns: 34px minmax(0, 1fr) auto; padding: .58rem; }
.rider-insights-grid > div > span { align-items: center; background: var(--hub-red-soft); border-radius: 8px; color: var(--hub-red); display: flex; grid-row: 1 / 3; height: 34px; justify-content: center; width: 34px; }
.rider-insights-grid strong { color: var(--hub-ink); font-size: .82rem; }
.rider-insights-grid small { color: var(--hub-muted); font-size: .5rem; grid-column: 2 / 4; }
.rider-insights-grid em { color: var(--hub-green); font-size: .5rem; font-style: normal; font-weight: 800; }
.rider-story-panel .rider-hub-section-heading { margin-bottom: .75rem; }
.rider-story-grid { display: grid; gap: .7rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rider-story-grid article { align-items: flex-start; background: linear-gradient(145deg, var(--hub-surface-soft), var(--hub-surface)); border: 1px solid var(--hub-line); border-radius: 12px; display: flex; gap: .65rem; min-width: 0; padding: .75rem; }
.rider-story-grid article > span { align-items: center; background: linear-gradient(145deg, #e1253c, #a71428); border-radius: 9px; color: #fff; display: flex; flex: 0 0 37px; height: 37px; justify-content: center; width: 37px; }
.rider-story-grid article > div { min-width: 0; }
.rider-story-grid h3 { color: var(--hub-ink) !important; font-size: .68rem; margin: 0 0 .28rem; }
.rider-story-grid p { color: var(--hub-muted); font-size: .6rem; line-height: 1.5; margin: 0; }
.rider-story-empty { align-items: center; color: var(--hub-muted); display: flex; gap: .7rem; padding: .35rem 0; }
.rider-story-empty > i { align-items: center; background: var(--hub-red-soft); border-radius: 50%; color: var(--hub-red); display: flex; flex: 0 0 42px; height: 42px; justify-content: center; }
.rider-story-empty strong, .rider-story-empty span { display: block; }
.rider-story-empty strong { color: var(--hub-ink); font-size: .68rem; }
.rider-story-empty span { font-size: .58rem; margin-top: .1rem; }
.rider-hub-grid { display: grid; gap: 1rem; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); }
.rider-passport, .rider-activity, .rider-garage-showcase { background: var(--hub-surface); border: 1px solid var(--hub-line); border-radius: 15px; box-shadow: 0 8px 24px rgba(12,18,24,.07); }
.rider-passport, .rider-activity { padding: 1.1rem; }
.rider-hub-section-heading { border-bottom: 1px solid var(--hub-line); margin-bottom: .9rem; padding-bottom: .75rem; }
.rider-hub-section-heading > span, .rider-hub-section-heading > div > span { color: var(--hub-red); display: block; font-size: .62rem; font-weight: 850; letter-spacing: .1em; }
.rider-hub-section-heading h2 { color: var(--hub-ink) !important; font-size: 1.05rem; margin: .15rem 0 0; }
.rider-passport-bike { align-items: center; background: var(--hub-surface-soft); border: 1px solid var(--hub-line); border-radius: 11px; color: var(--hub-ink) !important; display: flex; gap: .65rem; overflow: hidden; padding: .6rem; text-decoration: none !important; }
.rider-passport-bike > img, .rider-passport-bike > span { border-radius: 8px; flex: 0 0 56px; height: 56px; object-fit: cover; width: 56px; }
.rider-passport-bike > span { align-items: center; background: var(--hub-red-soft); color: var(--hub-red); display: flex; font-size: 1.2rem; justify-content: center; }
.rider-passport-bike > div { min-width: 0; }
.rider-passport-bike small, .rider-passport-bike strong, .rider-passport-bike em { display: block; }
.rider-passport-bike small { color: var(--hub-muted); font-size: .56rem; }
.rider-passport-bike strong { color: var(--hub-ink); font-size: .75rem; margin-top: .12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rider-passport-bike em { color: var(--hub-muted); font-size: .59rem; font-style: normal; }
.rider-passport-bike > i { color: var(--hub-red); font-size: .65rem; margin-left: auto; }
.rider-passport-motto { border-left: 3px solid var(--hub-red); color: var(--hub-muted); font-size: .8rem; font-style: italic; line-height: 1.5; margin: .75rem 0 0; padding: .4rem 0 .4rem .7rem; }
.rider-passport-motto::before, .rider-passport-motto::after { content: none !important; }
.rider-passport-motto i { color: var(--hub-red); font-size: .62rem; margin-right: .35rem; }
.rider-passport-facts { display: grid; gap: .45rem; grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: .75rem; }
.rider-passport-facts > span { background: var(--hub-surface-soft); border: 1px solid var(--hub-line); border-radius: 9px; display: grid; gap: .05rem .4rem; grid-template-columns: 20px minmax(0,1fr); padding: .5rem; }
.rider-passport-facts > span > i { color: var(--hub-red); grid-row: 1 / 3; margin-top: .2rem; }
.rider-passport-facts small { color: var(--hub-muted); font-size: .75rem; line-height: 1.3; }
.rider-passport-facts strong { font-size: .8rem; line-height: 1.35; overflow-wrap: anywhere; }
.rider-passport-group { border-top: 1px solid var(--hub-line); margin-top: .9rem; padding-top: .8rem; }
.rider-passport-group h3 { align-items: center; color: var(--hub-ink) !important; display: flex; font-size: .73rem; gap: .4rem; margin: 0 0 .55rem; }
.rider-passport-group h3 i { color: var(--hub-red); }
.rider-passport-group--help h3 i { color: var(--hub-green); }
.rider-passport-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.rider-passport-tags span { background: var(--hub-red-soft); border: 1px solid rgba(207,29,51,.18); border-radius: 999px; color: var(--hub-ink); font-size: .6rem; font-weight: 650; padding: .3rem .45rem; }
.rider-passport-group--help .rider-passport-tags span { background: rgba(33,139,90,.1); border-color: rgba(33,139,90,.22); }
.rider-passport-group--help > a { align-items: center; color: var(--hub-green) !important; display: inline-flex; font-size: .65rem; font-weight: 760; gap: .35rem; margin-top: .65rem; }
.rider-ask-actions { margin-top: .65rem; }
.rider-ask-actions summary { align-items: center; color: var(--hub-green); cursor: pointer; display: inline-flex; font-size: .78rem; font-weight: 760; gap: .35rem; list-style: none; }
.rider-ask-actions summary::-webkit-details-marker { display: none; }
.rider-ask-actions > div { display: grid; gap: .4rem; margin-top: .5rem; }
.rider-ask-actions a { align-items: center; background: var(--hub-surface); border: 1px solid var(--hub-line); border-radius: 8px; color: var(--hub-ink) !important; display: flex; gap: .5rem; padding: .5rem; text-decoration: none !important; }
.rider-ask-actions a > i { color: var(--hub-red); width: 18px; }
.rider-ask-actions a span, .rider-ask-actions a strong, .rider-ask-actions a small { display: block; }
.rider-ask-actions a strong { font-size: .76rem; }
.rider-ask-actions a small { color: var(--hub-muted); font-size: .72rem; line-height: 1.35; margin-top: .08rem; }
.rider-passport-availability__list { display: grid; gap: .35rem; }
.rider-passport-availability__list > span { align-items: center; color: var(--hub-muted); display: flex; font-size: .75rem; gap: .4rem; line-height: 1.35; }
.rider-passport-availability__list i { color: var(--hub-green); width: 16px; }
.rider-passport-availability > p { align-items: flex-start; background: var(--hub-surface-soft); border-radius: 8px; color: var(--hub-muted); display: flex; font-size: .72rem; gap: .45rem; line-height: 1.35; margin: .55rem 0 0; padding: .55rem; }
.rider-passport-availability > p > i { color: var(--hub-red); margin-top: .12rem; }
.rider-passport-availability > p small, .rider-passport-availability > p strong { display: block; }
.rider-passport-availability > p strong { color: var(--hub-ink); font-size: .76rem; margin-top: .1rem; }
.rider-passport-social { border-top: 1px solid var(--hub-line); display: flex; gap: .45rem; margin-top: .9rem; padding-top: .8rem; }
.rider-passport-social a { align-items: center; background: var(--hub-surface-soft); border: 1px solid var(--hub-line); border-radius: 8px; color: var(--hub-muted) !important; display: inline-flex; font-size: .62rem; gap: .3rem; padding: .4rem .5rem; }
.rider-passport-completion { align-items: center; background: linear-gradient(135deg, #222934, #161b22); border-radius: 11px; color: #fff; display: flex; gap: .75rem; margin-top: .9rem; padding: .75rem; }
.rider-passport-completion__ring { align-items: center; background: conic-gradient(#f0495d var(--completion), rgba(255,255,255,.13) 0); border-radius: 50%; display: flex; flex: 0 0 54px; height: 54px; justify-content: center; position: relative; width: 54px; }
.rider-passport-completion__ring::before { background: #1c222a; border-radius: 50%; content: ""; inset: 5px; position: absolute; }
.rider-passport-completion__ring strong { font-size: .72rem; position: relative; }
.rider-passport-completion > div:last-child > strong, .rider-passport-completion > div:last-child > span { display: block; }
.rider-passport-completion > div:last-child > strong { font-size: .7rem; }
.rider-passport-completion > div:last-child > span { color: #aeb8c2; font-size: .56rem; line-height: 1.4; margin: .18rem 0 .35rem; }
.rider-passport-completion a { color: #a91b2d !important; font-size: .58rem; font-weight: 730; }
.rider-hub-section-heading--activity, .rider-hub-section-heading--garage { align-items: flex-end; display: flex; gap: .8rem; justify-content: space-between; }
.rider-activity-filters { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
.rider-activity-filters button { background: var(--hub-surface-soft); border: 1px solid var(--hub-line); border-radius: 999px; color: var(--hub-muted); cursor: pointer; font-size: .58rem; font-weight: 680; padding: .32rem .5rem; }
.rider-activity-filters button.is-active { background: var(--hub-red); border-color: var(--hub-red); color: #fff; }
.rider-activity-list { display: grid; }
.rider-activity-item { display: grid; gap: .7rem; grid-template-columns: 36px minmax(0, 1fr); padding: .75rem 0; }
.rider-activity-item + .rider-activity-item { border-top: 1px solid var(--hub-line); }
.rider-activity-item.is-filtered { display: none; }
.rider-activity-item__icon { align-items: center; background: var(--hub-red-soft); border-radius: 9px; color: var(--hub-red); display: flex; height: 36px; justify-content: center; width: 36px; }
.rider-activity-item[data-activity-kind="garage"] .rider-activity-item__icon { background: rgba(33,139,90,.1); color: var(--hub-green); }
.rider-activity-item__meta { align-items: center; display: flex; gap: .6rem; justify-content: space-between; }
.rider-activity-item__meta span { color: var(--hub-red); font-size: .56rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.rider-activity-item__meta time { color: var(--hub-muted); font-size: .54rem; }
.rider-activity-item h3 { font-size: .78rem; line-height: 1.35; margin: .15rem 0; }
.rider-activity-item h3 a { color: var(--hub-ink) !important; }
.rider-activity-item p { color: var(--hub-muted); font-size: .66rem; line-height: 1.45; margin: .2rem 0; }
.rider-activity-item > div > small { color: var(--hub-muted); font-size: .55rem; }
.rider-activity-more { align-items: center; background: var(--hub-surface-soft); border: 1px solid var(--hub-line); border-radius: 9px; color: var(--hub-ink); cursor: pointer; display: flex; font-size: .62rem; font-weight: 720; gap: .4rem; justify-content: center; margin-top: .7rem; padding: .55rem .7rem; width: 100%; }
.rider-activity-more:hover { border-color: rgba(207,29,51,.35); color: var(--hub-red); }
.rider-activity-more:disabled { cursor: wait; opacity: .6; }
.rider-community-layer { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.65fr) minmax(270px, .85fr); }
.rider-achievements, .rider-connections-panel, .rider-rides-panel { background: var(--hub-surface); border: 1px solid var(--hub-line); border-radius: 15px; box-shadow: 0 8px 24px rgba(12,18,24,.07); padding: 1.1rem; }
.rider-achievement-grid { display: grid; gap: .55rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rider-achievement { align-items: center; background: var(--hub-surface-soft); border: 1px solid var(--hub-line); border-radius: 11px; display: flex; gap: .6rem; min-width: 0; padding: .62rem; }
.rider-achievement > span { align-items: center; background: linear-gradient(145deg, #e1253c, #9d1325); border: 2px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 5px 13px rgba(183,20,42,.24); color: #fff; display: flex; flex: 0 0 39px; height: 39px; justify-content: center; width: 39px; }
.rider-achievement > div { min-width: 0; }
.rider-achievement strong, .rider-achievement small { display: block; }
.rider-achievement strong { color: var(--hub-ink); font-size: .66rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rider-achievement small { color: var(--hub-muted); font-size: .52rem; line-height: 1.3; margin-top: .12rem; }
.rider-achievement-empty { align-items: center; color: var(--hub-muted); display: flex; font-size: .64rem; gap: .55rem; min-height: 74px; }
.rider-achievement-empty i { align-items: center; background: rgba(33,139,90,.1); border-radius: 50%; color: var(--hub-green); display: flex; height: 38px; justify-content: center; width: 38px; }
.rider-next-achievement { align-items: center; background: linear-gradient(135deg, #202731, #13181e); border-radius: 11px; color: #fff; display: grid; gap: .45rem .7rem; grid-template-columns: minmax(135px, auto) minmax(90px, 1fr) auto; margin-top: .75rem; padding: .65rem .75rem; }
.rider-next-achievement > div:first-child span, .rider-next-achievement > div:first-child strong, .rider-next-achievement > div:first-child small { display: block; }
.rider-next-achievement > div:first-child span { color: #ff7183; font-size: .46rem; font-weight: 850; letter-spacing: .08em; }
.rider-next-achievement > div:first-child strong { font-size: .65rem; margin-top: .08rem; }
.rider-next-achievement > div:first-child small { color: #abb5bf; font-size: .5rem; }
.rider-next-achievement__progress { background: rgba(255,255,255,.12); border-radius: 99px; height: 7px; overflow: hidden; }
.rider-next-achievement__progress span { background: linear-gradient(90deg, #d41e36, #ff687a); border-radius: inherit; display: block; height: 100%; }
.rider-next-achievement > b { color: #dce3e9; font-size: .56rem; }
.rider-connection-stats { background: var(--hub-surface-soft); border: 1px solid var(--hub-line); border-radius: 10px; display: grid; grid-template-columns: 1fr 1fr; margin-bottom: .75rem; }
.rider-connection-stats span { padding: .5rem; text-align: center; }
.rider-connection-stats span + span { border-left: 1px solid var(--hub-line); }
.rider-connection-stats strong, .rider-connection-stats small { display: block; }
.rider-connection-stats strong { color: var(--hub-ink); font-size: .82rem; }
.rider-connection-stats small { color: var(--hub-muted); font-size: .52rem; }
.rider-connection-group h3 { align-items: center; color: var(--hub-ink) !important; display: flex; font-size: .64rem; gap: .35rem; margin: 0 0 .45rem; }
.rider-connection-group h3 i { color: var(--hub-red); }
.rider-connection-person { align-items: center; border-radius: 9px; color: var(--hub-ink) !important; display: flex; gap: .5rem; padding: .4rem; text-decoration: none !important; }
.rider-connection-person:hover { background: var(--hub-surface-soft); }
.rider-connection-person img { border: 2px solid var(--hub-line); border-radius: 50%; flex: 0 0 35px; height: 35px; object-fit: cover; width: 35px; }
.rider-connection-person > span { min-width: 0; }
.rider-connection-person strong, .rider-connection-person small { display: block; }
.rider-connection-person strong { font-size: .64rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rider-connection-person small { color: var(--hub-muted); font-size: .5rem; margin-top: .08rem; }
.rider-connection-person > i { color: var(--hub-red); font-size: .5rem; margin-left: auto; }
.rider-connections-panel__empty { color: var(--hub-muted); font-size: .6rem; line-height: 1.5; margin: .35rem 0 0; }
.rider-endorsements { border-top: 1px solid var(--hub-line); margin-top: .75rem; padding-top: .7rem; }
.rider-endorsements > h3 { align-items: center; color: var(--hub-ink) !important; display: flex; font-size: .64rem; gap: .35rem; margin: 0 0 .5rem; }
.rider-endorsements > h3 > i { color: #d49a18; }
.rider-endorsements > h3 > small { align-items: center; background: var(--hub-red); border-radius: 99px; color: #fff; display: flex; font-size: .48rem; height: 18px; justify-content: center; margin-left: auto; min-width: 18px; padding: 0 .25rem; }
.rider-endorsements > div { display: flex; flex-wrap: wrap; gap: .35rem; }
.rider-endorsements button, .rider-endorsements > div > span { align-items: center; background: var(--hub-surface-soft); border: 1px solid var(--hub-line); border-radius: 999px; color: var(--hub-muted); display: inline-flex; font-size: .54rem; gap: .25rem; padding: .32rem .42rem; }
.rider-endorsements button { cursor: pointer; }
.rider-endorsements button:hover { border-color: rgba(207,29,51,.35); color: var(--hub-ink); }
.rider-endorsements button.is-selected { background: var(--hub-red-soft); border-color: rgba(207,29,51,.4); color: var(--hub-red); }
.rider-endorsements b { font-weight: 680; }
.rider-endorsements button small, .rider-endorsements > div > span small { background: var(--hub-surface); border-radius: 99px; font-size: .46rem; min-width: 15px; padding: .08rem .2rem; text-align: center; }
.rider-endorsements > p { color: var(--hub-muted); font-size: .56rem; line-height: 1.45; margin: 0; }
.rider-rides-panel > .rider-hub-section-heading small { color: var(--hub-muted); font-size: .55rem; }
.rider-rides-grid { display: grid; gap: .7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rider-ride-card { background: var(--hub-surface-soft); border: 1px solid var(--hub-line); border-radius: 12px; display: grid; grid-template-columns: 70px minmax(0, 1fr); overflow: hidden; }
.rider-ride-card.is-shared { border-color: rgba(33,139,90,.45); box-shadow: inset 0 0 0 1px rgba(33,139,90,.08); }
.rider-ride-card__date { align-items: center; background: linear-gradient(155deg, #262d36, #151a20); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: .7rem .35rem; }
.rider-ride-card__date strong { font-size: 1.35rem; line-height: 1; }
.rider-ride-card__date span { color: #ff7183; font-size: .58rem; font-weight: 800; text-transform: uppercase; }
.rider-ride-card__date small { color: #b7c0c9; font-size: .53rem; margin-top: .35rem; }
.rider-ride-card__content { min-width: 0; padding: .7rem; }
.rider-ride-card__content > div:first-child { align-items: center; display: flex; flex-wrap: wrap; gap: .35rem; justify-content: space-between; }
.rider-ride-card__content > div:first-child > span { color: var(--hub-red); font-size: .5rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.rider-ride-card__content > div:first-child b { color: var(--hub-green); font-size: .5rem; }
.rider-ride-card__content h3 { font-size: .75rem; margin: .18rem 0; }
.rider-ride-card__content h3 a { color: var(--hub-ink) !important; }
.rider-ride-card__content p { color: var(--hub-muted); font-size: .55rem; margin: .22rem 0 .55rem; }
.rider-ride-card__content p i { color: var(--hub-red); margin-right: .25rem; }
.rider-ride-card__content footer { align-items: center; display: flex; gap: .5rem; justify-content: space-between; }
.rider-ride-card__content footer > span { color: var(--hub-muted); font-size: .52rem; }
.rider-ride-card__content footer > span i { margin-right: .2rem; }
.rider-ride-card__content footer button { background: var(--hub-red); border: 0; border-radius: 7px; color: #fff; cursor: pointer; font-size: .55rem; font-weight: 720; padding: .36rem .5rem; }
.rider-ride-card__content footer button.is-attending { background: var(--hub-green); }
.rider-ride-card__content footer button i { margin-right: .2rem; }
.rider-garage-showcase { padding: 1.1rem; }
.rider-hub-section-heading--garage > a { align-items: center; color: var(--hub-red) !important; display: inline-flex; font-size: .68rem; font-weight: 760; gap: .35rem; }
.rider-garage-grid { display: grid; gap: .8rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rider-garage-card { background: var(--hub-surface-soft); border: 1px solid var(--hub-line); border-radius: 12px; color: var(--hub-ink) !important; display: grid; grid-template-columns: 105px minmax(0, 1fr); overflow: hidden; text-decoration: none !important; }
.rider-garage-card.is-featured { grid-column: span 2; grid-template-columns: minmax(180px, 44%) minmax(0, 1fr); }
.rider-garage-card__media { align-items: center; background: #242a31; color: #75808b; display: flex; justify-content: center; min-height: 120px; overflow: hidden; position: relative; }
.rider-garage-card__media img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.rider-garage-card__media > i { font-size: 1.6rem; }
.rider-garage-card__media span { background: var(--hub-red); border-radius: 5px; color: #fff; font-size: .5rem; font-weight: 850; left: .5rem; padding: .25rem .35rem; position: absolute; top: .5rem; }
.rider-garage-card__body { min-width: 0; padding: .75rem; }
.rider-garage-card__body h3 { color: var(--hub-ink) !important; font-size: .8rem; margin: 0; }
.rider-garage-card__body p { color: var(--hub-muted); font-size: .61rem; line-height: 1.45; margin: .35rem 0 .55rem; }
.rider-garage-card__body small { color: var(--hub-red); font-size: .55rem; }
.rider-hub-empty { align-items: center; color: var(--hub-muted); display: flex; flex-direction: column; gap: .35rem; justify-content: center; min-height: 180px; text-align: center; }
.rider-hub-empty > i { color: var(--hub-red); font-size: 1.5rem; }
.rider-hub-empty strong { color: var(--hub-ink); font-size: .78rem; }
.rider-hub-empty span, .rider-hub-empty a { font-size: .64rem; }
.rider-hub-empty--garage { grid-column: 1 / -1; min-height: 120px; }
.rider-hub button:focus-visible, .rider-hub a:focus-visible { outline: 2px solid var(--hub-red); outline-offset: 2px; }
@media (max-width: 991.98px) { .rider-hub-hero__content { flex-direction: column; } .rider-hub-actions { justify-content: flex-start; max-width: none; } .rider-hub-grid, .rider-community-layer { grid-template-columns: 1fr; } .rider-insights-grid, .rider-interaction-history__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rider-garage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .rider-hub-hero { min-height: 430px; padding: 1.15rem; } .rider-hub-hero__identity { align-items: flex-start; } .rider-hub-avatar, .rider-hub-avatar img { height: 78px; width: 78px; } .rider-hub-avatar { flex-basis: 78px; } .rider-hub-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .rider-hub-action { justify-content: center; } .rider-hub-connections { margin-top: 1rem; } .rider-hub-stats { bottom: 1.2rem; grid-template-columns: repeat(5, minmax(0, 1fr)); left: 1.15rem; max-width: calc(100% - 2.3rem); width: calc(100% - 2.3rem); } .rider-hub-stats span { padding: .55rem .2rem; } .rider-hub-stats small { font-size: .45rem; } .rider-hub-follow-settings { align-items: flex-start; flex-direction: column; } .rider-hub-section-heading--activity, .rider-hub-section-heading--garage { align-items: flex-start; flex-direction: column; } .rider-activity-filters { justify-content: flex-start; } .rider-story-grid, .rider-achievement-grid, .rider-rides-grid { grid-template-columns: 1fr; } .rider-garage-grid { grid-template-columns: 1fr; } .rider-garage-card.is-featured { grid-column: auto; } }
@media (max-width: 479.98px) { .rider-hub-title h1 { font-size: 1.55rem; } .rider-hub-title__meta { display: grid; gap: .3rem; } .rider-hub-connections span { font-size: .57rem; } .rider-hub-stats strong { font-size: .75rem; } .rider-insights-panel__heading { align-items: flex-start; flex-direction: column; } .rider-insights-grid { grid-template-columns: 1fr; } .rider-passport, .rider-activity, .rider-garage-showcase, .rider-achievements, .rider-connections-panel, .rider-rides-panel, .rider-insights-panel, .rider-story-panel { padding: .9rem; } .rider-next-achievement { grid-template-columns: 1fr auto; } .rider-next-achievement__progress { grid-column: 1 / -1; grid-row: 2; } .rider-garage-card, .rider-garage-card.is-featured { grid-template-columns: 92px minmax(0, 1fr); } }

/* Readability pass: functional profile copy should remain comfortable to scan. */
.rider-hub-title > span,
.rider-hub-section-heading > span,
.rider-hub-section-heading > div > span,
.rider-insights-panel__heading span { font-size: .7rem; }
.rider-hub-title__meta span,
.rider-hub-action,
.rider-hub-connections span { font-size: .76rem; }
.rider-hub-title__meta .is-online,
.rider-hub-title__meta .is-online i { font-size: .72rem; }
.rider-hub-stats strong { font-size: 1rem; }
.rider-hub-stats small,
.rider-hub-follow-settings small,
.rider-hub-follow-settings label,
.rider-insights-panel__heading > small,
.rider-insights-grid small,
.rider-insights-grid em,
.rider-story-grid p,
.rider-story-empty span,
.rider-passport-bike small,
.rider-passport-bike em,
.rider-passport-tags span,
.rider-passport-social a,
.rider-passport-completion > div:last-child > span,
.rider-passport-completion a,
.rider-activity-filters button,
.rider-activity-item__meta span,
.rider-activity-item__meta time,
.rider-activity-item > div > small,
.rider-achievement small,
.rider-next-achievement > div:first-child span,
.rider-next-achievement > div:first-child small,
.rider-next-achievement > b,
.rider-connection-stats small,
.rider-connection-person small,
.rider-connections-panel__empty,
.rider-endorsements > h3 > small,
.rider-endorsements button,
.rider-endorsements > div > span,
.rider-endorsements button small,
.rider-endorsements > div > span small,
.rider-endorsements > p,
.rider-rides-panel > .rider-hub-section-heading small,
.rider-ride-card__date span,
.rider-ride-card__date small,
.rider-ride-card__content > div:first-child > span,
.rider-ride-card__content > div:first-child b,
.rider-ride-card__content p,
.rider-ride-card__content footer > span,
.rider-ride-card__content footer button,
.rider-garage-card__media span,
.rider-garage-card__body small { font-size: .7rem; line-height: 1.35; }
.rider-hub-follow-settings strong,
.rider-hub-follow-settings button,
.rider-story-grid h3,
.rider-story-empty strong,
.rider-passport-bike strong,
.rider-passport-group h3,
.rider-passport-group--help > a,
.rider-passport-completion > div:last-child > strong,
.rider-activity-item p,
.rider-activity-more,
.rider-achievement strong,
.rider-achievement-empty,
.rider-next-achievement > div:first-child strong,
.rider-connection-group h3,
.rider-connection-person strong,
.rider-endorsements > h3,
.rider-ride-card__content h3,
.rider-garage-card__body p,
.rider-hub-empty span,
.rider-hub-empty a,
.rider-hub-section-heading--garage > a { font-size: .8rem; }
.rider-activity-item h3,
.rider-garage-card__body h3 { font-size: .84rem; }

@media (max-width: 767.98px) {
  .rider-hub-hero { min-height: 510px; }
  .rider-hub-cover-controls { bottom: 10.5rem; right: 1.15rem; }
  .rider-hub-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .rider-hub-stats span { background: rgba(10,14,20,.72); }
  .rider-hub-stats span:nth-child(4) { border-left: 0; }
  .rider-hub-stats small { font-size: .7rem; }
  .rider-interaction-history__heading { align-items: flex-start; flex-direction: column; }
  .rider-interaction-history__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .rider-hub * { scroll-behavior: auto !important; transition-duration: .01ms !important; } }