.community { margin:20px 0; color:#242a2d; text-align:left; line-height:1.5; }
.community h2 { margin:0 0 6px; font-size:24px; }
.community h3 { margin:0 0 12px; font-size:18px; }
.community a { color:#075e62; }
.community-panel { padding:18px; margin:18px 0; border:1px solid #d0dada; border-radius:6px; background:#f7f9f9; overflow-wrap:anywhere; }
.community-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; margin:12px 0; }
.community button, .community-button { display:inline-block; padding:8px 12px; border:0; border-radius:4px; background:#0a7175; color:#fff !important; cursor:pointer; font:inherit; text-decoration:none; }
.profile-actions { gap:8px; }
.profile-actions form { margin:0; }
.profile-actions .community-button:hover, .profile-actions button:hover { background:#075e62; }
.community button.secondary { background:#536568; }
.community-form { padding:18px; margin:18px 0; background:#edf1f1; border-radius:6px; }
.community-form .field { display:grid; grid-template-columns:140px minmax(0,1fr); align-items:start; gap:16px; margin:16px 0; }
.community-form .field > label, .community-form .field > span { padding-top:8px; font-weight:bold; text-align:right; }
.community-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .community-form select, .community-form textarea { width:100%; min-width:0; box-sizing:border-box; padding:9px; margin:0; border:1px solid #a7b7b8; border-radius:4px; font:inherit; background:#fff; color:#202729; }
.community-form textarea { resize:vertical; }
.community-form .check { display:flex; align-items:center; gap:8px; font-weight:normal; }
.account-birthday { display:grid; grid-template-columns:1fr 1fr 1.25fr; gap:8px; }
.community-form .form-actions { margin:20px 0 0 156px; display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.community-form .help, .community small { color:#516165; font-size:11px; }
.community-role-picker { border:1px solid #a7b7b8; border-radius:4px; background:#fff; color:#202729; }
.community-role-picker summary { padding:9px; cursor:pointer; }
.community-role-options { max-height:20rem; overflow:auto; border-top:1px solid #a7b7b8; }
.community-role-option { display:flex; align-items:baseline; gap:8px; padding:8px 9px; cursor:pointer; }
.community-role-option:hover, .community-role-option:focus-within { background:#edf1f1; }
.community-role-option small { display:block; margin-top:2px; font-style:italic; }
.community-notice { padding:12px; background:#e5f0ee; border-left:4px solid #0a7175; }
.community-error { color:#8b2020; }
.street-rep { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:12px 0; }
.street-rep form { margin:0; }
.rep-rank { position:relative; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:120px; height:80px; background:transparent; border-radius:5px; cursor:help; }
.rep-rank-art { position:absolute; inset:0; overflow:hidden; border-radius:inherit; }
.rep-rank-art > img { position:absolute; left:50%; top:var(--badge-top, 50.85%); width:var(--badge-width, 100%); height:auto; max-width:none; transform:translate(var(--badge-x, -50%), var(--badge-y, -50%)); }
/* Match Street Regular's visible artwork height, accounting for each PNG's transparent margins. */
.rep-rank-art > img[src$="/street-regular.png"] { --badge-top:50%; }
.rep-rank-art > img[src$="/new-to-the-scene.png"] { --badge-width:88.83%; --badge-y:-49.07%; }
.rep-rank-art > img[src$="/known-in-the-scene.png"] { --badge-width:80.37%; --badge-y:-48.93%; }
.rep-rank-art > img[src$="/scene-veteran.png"] { --badge-width:80.68%; --badge-x:-49.93%; --badge-y:-49.66%; }
.rep-rank-art > img[src$="/street-elite.png"] { --badge-width:99.72%; --badge-x:-49.92%; --badge-y:-50.56%; }
.rep-rank-art > img[src$="/tuner-legend.png"] { --badge-width:68.48%; --badge-y:-48.97%; }
.rep-rank:focus-visible { outline:3px solid #0a8180; outline-offset:3px; }
.rep-rank-tooltip { position:absolute; left:0; top:calc(100% + 6px); z-index:20; padding:7px 10px; border-radius:4px; background:#142c30; color:#fff; font:12px/1.4 Verdana,sans-serif; white-space:nowrap; visibility:hidden; opacity:0; pointer-events:none; }
.rep-rank:hover .rep-rank-tooltip, .rep-rank:focus .rep-rank-tooltip { visibility:visible; opacity:1; }
.street-rep button { padding:6px 10px; border:0; border-radius:4px; background:#0a7175; color:#fff; cursor:pointer; }
.profile-hero { position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; border-radius:8px; padding:28px 20px; background:#163e42; color:#fff; }
.profile-hero > .profile-cover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.28; border-radius:inherit; pointer-events:none; }
.profile-identity { position:relative; display:flex; flex:1; min-width:0; align-items:center; gap:18px; }
.profile-identity > div { min-width:0; overflow-wrap:anywhere; }
.profile-avatar { flex-shrink:0; width:90px; height:90px; object-fit:cover; border-radius:8px; border:2px solid #fff; }
.profile-reputation { position:relative; flex:0 0 180px; }
.profile-reputation .rep-rank { width:180px; height:120px; }
.profile-reputation .rep-rank-tooltip { left:auto; right:0; top:auto; bottom:calc(100% + 8px); }
.rep-explainer summary { cursor:pointer; color:#075e62; }
.member-dashboard { --dashboard-accent:#075e62; background:#ccc; color:#242424; font:13px/1.45 Arial, Helvetica, sans-serif; }
.member-dashboard h2.background1 { display:flex; align-items:center; box-sizing:border-box; height:34px; margin:0; font:inherit; }
.dashboard-body { padding:12px; }
.member-dashboard h3 { margin:0 0 8px; font-size:12px; text-transform:uppercase; }
.member-dashboard a, .member-dashboard summary { color:var(--dashboard-accent); }
.member-dashboard :is(a, summary):focus-visible { outline:2px solid var(--dashboard-accent); outline-offset:2px; }
.dashboard-identity { display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.dashboard-identity img { display:block; flex:none; width:44px; height:44px; object-fit:cover; border-radius:10px; background:#e5e5e5; }
.dashboard-identity strong { font-size:15px; }
.dashboard-identity p { margin:2px 0 0; color:#454545; font-size:12px; }
.dashboard-status { margin-bottom:12px; }
.dashboard-status form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 6px; margin:0; }
.dashboard-status label, .dashboard-status [role="status"] { grid-column:1/-1; }
.dashboard-status label { font-weight:bold; }
.dashboard-status input { min-width:0; padding:6px 8px; border:1px solid #9baaaa; border-radius:4px; font:inherit; }
.dashboard-status button { padding:6px 9px; border:0; border-radius:4px; background:#0a7175; color:#fff; font:inherit; cursor:pointer; }
.dashboard-status button:hover { background:#075e62; }
.dashboard-reputation { margin-bottom:14px; padding:10px; border-radius:8px; background:#e7e7e7; }
.dashboard-rep-heading, .dashboard-rep-meta { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 8px; }
.dashboard-rep-heading h3 { margin:0; }
.dashboard-rep-heading strong { color:var(--dashboard-accent); white-space:nowrap; }
.dashboard-reputation progress { display:block; box-sizing:border-box; width:100%; height:11px; margin:8px 0 5px; border:2px solid #c9c9c9; border-radius:999px; overflow:hidden; appearance:none; background:#a8a8a8; color:#b9f52b; }
.dashboard-reputation progress::-webkit-progress-bar { background:#a8a8a8; }
.dashboard-reputation progress::-webkit-progress-value { border-radius:0 999px 999px 0; background:#b9f52b; }
.dashboard-reputation progress::-moz-progress-bar { border-radius:0 999px 999px 0; background:#b9f52b; }
.dashboard-rep-meta { color:#454545; font-size:11px; }
.dashboard-reputation .rep-explainer { margin-top:9px; font-size:12px; }
.dashboard-quick-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.dashboard-quick-links a { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; padding:8px 4px; border-radius:6px; background:#e7e7e7; color:#242424; text-align:center; text-decoration:none; font-size:12px; font-weight:bold; }
.dashboard-quick-links a:hover, .dashboard-activity li a:hover { background:#f3f3f3; }
.dashboard-quick-links svg { color:var(--dashboard-accent); }
.dashboard-activity { margin-top:14px; padding-top:12px; border-top:1px solid #a8a8a8; }
.dashboard-activity ul { margin:0; padding:0; list-style:none; }
.dashboard-activity li a { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:5px 4px; border-radius:4px; color:#242424; text-decoration:none; }
.dashboard-activity li span { min-width:1.6em; padding:1px 4px; border-radius:999px; background:#e7e7e7; text-align:center; font-size:11px; font-weight:bold; }
.dashboard-activity li .has-activity { background:#b9f52b; color:#242424; }
.dashboard-more { margin-top:8px; font-size:12px; }
.dashboard-more summary { cursor:pointer; }
.dashboard-more > div { margin-top:8px; }
@media (min-width:931px) {
    .member-dashboard { font:14px/1.45 'Segoe UI', system-ui, sans-serif; }
    .dashboard-identity strong { font-size:16px; }
    .member-dashboard h3, .dashboard-identity p, .dashboard-reputation .rep-explainer, .dashboard-quick-links a, .dashboard-more { font-size:13px; }
    .dashboard-rep-meta, .dashboard-activity li span { font-size:12px; }
    .member-dashboard h3, .dashboard-identity strong, .dashboard-status label, .dashboard-rep-heading strong, .dashboard-quick-links a, .dashboard-activity li span { font-weight:600; }
}
.profile-hero h2 { color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:20px; font-weight:700; letter-spacing:-.02em; overflow-wrap:anywhere; }
.profile-hero p { margin:4px 0; }
.profile-role-badge { display:inline-block; max-width:100%; box-sizing:border-box; padding:4px 8px; border-radius:6px; background:var(--role-background, #28343b); color:var(--role-color, #e0eaf0); font-size:12px; font-weight:700; line-height:1.3; text-transform:uppercase; }
.profile-role-badge[data-role="Enthusiast"] { --role-background:#182c38; --role-color:#50dfff; }
.profile-role-badge[data-role="Tuner"] { --role-background:#293218; --role-color:#c8f465; }
.profile-role-badge[data-role="Builder"] { --role-background:#182e29; --role-color:#42edac; }
.profile-role-badge[data-role="Collector"] { --role-background:#302a17; --role-color:#ffda6b; }
.profile-role-badge[data-role="Crew Organizer"] { --role-background:#372126; --role-color:#ff909c; }
.profile-role-badge[data-role="Driver"] { --role-background:#342318; --role-color:#ffa359; }
.profile-role-badge[data-role="Dealer"] { --role-background:#30213d; --role-color:#d8a8ff; }
.profile-role-badge[data-role="Photographer"] { --role-background:#212941; --role-color:#a4b8ff; }
.profile-role-badge[data-role="Promoter"] { --role-background:#351e31; --role-color:#ff84d3; }
.community-tags { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.community-tag { display:inline-block; padding:4px 8px; background:#deebeb; color:#245255; border-radius:4px; font-size:11px; }
.crew-heading { display:flex; align-items:center; gap:16px; }
.crew-logo { width:76px; height:76px; object-fit:contain; border-radius:6px; background:#edf1f1; }
.crew-card { padding:16px 0; border-bottom:1px solid #d0dada; }
.crew-member { margin:22px 0; border-top:1px solid #d0dada; padding-top:18px; }
.community-timeline { list-style:none; margin:0; padding:0; }
.community-timeline li, .build-update { border-top:1px solid #d0dada; padding:14px 0; }
.community-timeline li:first-child { border-top:0; }
.activity-row { display:flex; gap:12px; align-items:center; }
.activity-thumbnail { display:block; flex:0 0 88px; }
.activity-thumbnail img { display:block; width:88px; height:88px; object-fit:cover; border-radius:4px; }
.activity-details { min-width:0; }
.activity-details time { color:#516165; font-size:11px; }
.activity-details p { margin:4px 0 0; }
.build-update img, .activity-photo { max-width:100%; max-height:240px; border-radius:4px; object-fit:cover; }
.build-update p { white-space:normal; overflow-wrap:anywhere; }
.build-photo-options { display:flex; flex-wrap:wrap; gap:8px; }
.build-photo-option { display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px; background:#fff; border:1px solid #c5cece; border-radius:4px; cursor:pointer; }
.build-photo-option img { width:76px; height:54px; object-fit:cover; }
.community-links { display:flex; flex-wrap:wrap; gap:16px; }
@media (max-width:600px) { .community-form .field { grid-template-columns:1fr; gap:6px; } .community-form .field > label, .community-form .field > span { text-align:left; } .community-form .form-actions { margin-left:0; } .profile-hero { flex-wrap:wrap; } .profile-identity { flex-basis:100%; align-items:flex-start; gap:12px; } .profile-avatar { width:64px; height:64px; } .profile-reputation { margin-left:auto; } }