#join-dialog{width:min(830px,calc(100% - 24px));padding:6px;border-radius:3px}
#join-dialog .dialog-heading{margin:0;align-items:center;padding:10px 14px;background:linear-gradient(#555,#222)}
#join-dialog .dialog-heading h2{margin:0;color:#fff;font:600 17px var(--body)}#join-dialog .icon-button{color:#fff}
.team-required{text-align:right;color:#8b4242;font-size:12px;margin:12px}
#join-dialog fieldset{border:1px solid #bbcbd6;margin:16px 12px;padding:13px 16px 16px;min-width:0}
#join-dialog legend{color:#0069bd;font-size:13px;font-weight:700;text-transform:uppercase;padding:0 6px}
.team-form-row{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;padding:9px 0;align-items:start}
.team-form-row>div:first-child{text-align:right;padding-top:8px;font-size:14px}.team-form-row label{margin:0;font-size:14px;font-weight:600}
#join-dialog input,#join-dialog select,#join-dialog textarea{width:100%;font:14px var(--body);border:1px solid #adbcc8;background:#fff;color:#243746;border-radius:2px;padding:9px;box-sizing:border-box}
#join-dialog input[type=file]{padding:6px;font-size:13px}#join-dialog input[type=file]::file-selector-button{padding:5px 9px;border:1px solid #a9bac6;border-radius:2px;background:#e9eff3;color:#214b69;margin-right:9px}
#join-dialog .short-input{max-width:100px}#join-dialog textarea{resize:vertical;min-height:85px}.team-form-row small{display:block;font-size:12px;color:#6a7885;line-height:1.5;margin-top:6px}#join-ladder-name{display:block;padding-top:8px;color:#0069bd;font-size:14px}.team-upload-hint{font-size:12px;color:#6a7885;margin:6px 0 0 188px}
.team-form-actions{display:flex;justify-content:flex-end;gap:9px;padding:12px;border-top:1px solid #c4d0d8;background:#eef2f5}.team-form-actions .button{width:auto;padding:8px 14px;min-height:34px;font-size:13px;border-radius:2px;box-shadow:none;text-shadow:none}.team-form-actions .primary-button{background:#087fce;border-color:#0872b8}
.team-image{width:53px;height:53px;object-fit:cover;border:1px solid #9aacb8;border-radius:3px;flex-shrink:0}.team-image.small{width:28px;height:28px}.team-large-avatar{display:grid;place-items:center;background:#edf2f5;border:1px solid #bccbd6;min-height:160px;overflow:hidden}.team-large-avatar .team-image{width:100%;height:100%;max-height:260px;object-fit:contain;border:0}.team-upload-preview,#join-avatar-preview .team-image{display:block;max-width:180px;max-height:120px;width:auto;height:auto;margin-top:10px}#join-logo-preview img{width:64px;height:64px;object-fit:cover;margin-top:10px}.profile-heading [data-edit-team]{margin-left:auto;width:auto;font-size:12px;padding:8px}.squad-summary p{overflow-wrap:anywhere;white-space:pre-wrap;font-size:14px;line-height:1.5;margin-bottom:10px}
html[data-theme=dark] #join-dialog .dialog-heading{background:linear-gradient(#071019,#102735);border-bottom:1px solid #2d5b7e}html[data-theme=dark] #join-dialog fieldset{border-color:#2d5b7e}html[data-theme=dark] #join-dialog legend,html[data-theme=dark] #join-ladder-name{color:#69b9ee}html[data-theme=dark] #join-dialog :is(input,select,textarea){background:#111d26;color:#e2eaf0;border-color:#3c617b}html[data-theme=dark] .team-form-row small,html[data-theme=dark] .team-upload-hint{color:#adbfcd}html[data-theme=dark] .team-required{color:#f0aaaa}html[data-theme=dark] :is(.team-form-actions,.team-large-avatar){background:#172630;border-color:#2d5b7e}html[data-theme=dark] .team-form-actions .primary-button{background:#176b9f;border-color:#3885b5}
@media(max-width:620px){.team-form-row{grid-template-columns:1fr;gap:6px;padding:9px 0}.team-form-row>div:first-child{text-align:left;padding:0}.team-upload-hint{margin-left:0}#join-dialog fieldset{margin:12px 6px;padding:10px}.profile-heading{flex-wrap:wrap}}
#join-ladder.is-joined{background:#258047;border-color:#1e713d;color:#fff;box-shadow:none}
#join-ladder.is-joined:hover{background:#1c6d3b;border-color:#165c31;color:#fff}
html[data-theme=dark] #join-ladder.is-joined{background:#256b46;border-color:#438b62;color:#f0fff5}
html[data-theme=dark] #join-ladder.is-joined:hover{background:#2e8054;border-color:#5aaa7b;color:#fff}
.squad-summary dd{overflow-wrap:anywhere;min-width:0}.squad-summary{min-width:0}
.team-management{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px 0;flex-wrap:wrap}.team-management:empty{display:none}
.button:is(.add-roster-button,.disband-button){border:1px solid var(--action-border);background:linear-gradient(var(--action-top),var(--action-bottom));color:var(--action-text);box-shadow:inset 0 1px 0 #ffffff24,inset 0 -1px 0 #00000018;text-shadow:0 1px 1px #00000024;border-radius:2px;padding:7px 12px;font:600 13px/18px var(--body);min-height:34px;letter-spacing:normal}
.button.add-roster-button{--action-top:#2eaf50;--action-bottom:#188236;--action-border:#48c769;--action-text:#fff}
.button.disband-button{--action-top:#a72c36;--action-bottom:#801e28;--action-border:#b74c55;--action-text:#fff}
.button:is(.add-roster-button,.disband-button):hover{filter:brightness(1.12);border-color:var(--action-text)}
.button:is(.add-roster-button,.disband-button):active{box-shadow:inset 0 2px 4px #00000040}
.button:is(.add-roster-button,.disband-button):focus-visible{outline:2px solid var(--action-border);outline-offset:3px}
html[data-theme=dark] .button.add-roster-button{--action-top:#2eaf50;--action-bottom:#188236;--action-border:#48c769;--action-text:#fff}
html[data-theme=dark] .button.disband-button{--action-top:#a72c36;--action-bottom:#801e28;--action-border:#b74c55;--action-text:#fff}
.roster-role-select{font:13px var(--body);padding:5px 8px;border:1px solid #a9bbc8;border-radius:2px;background:#fff;color:#1f567b;width:96px;min-width:96px;max-width:96px}.team-action-dialog{width:min(510px,calc(100% - 24px));padding:5px;border-radius:3px}.team-action-dialog .dialog-heading{background:linear-gradient(#555,#222);padding:10px 12px;margin:0;align-items:center}.team-action-dialog .dialog-heading h2{color:#fff;font:600 17px var(--body);margin:0}.team-action-dialog .icon-button{color:#fff}.team-action-body{padding:16px;font-size:14px;line-height:1.5}.team-action-body label{font-size:14px}.team-action-body input,.team-action-body select{width:100%;margin:7px 0 12px}.team-action-body p{margin-bottom:14px}
html[data-theme=dark] .roster-role-select{background:#102737;border-color:#477792;color:#c3e4f9}html[data-theme=dark] .team-action-dialog .dialog-heading{background:linear-gradient(#071019,#102735);border-bottom:1px solid #2d5b7e}

.remove-roster-button{display:inline-grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:0;background:none;color:#d92339;font:500 32px/28px var(--body);box-shadow:none;text-shadow:none}.remove-roster-button:hover{background:none;color:#ff4055}.remove-roster-button:focus-visible{outline:2px solid #ef6976;outline-offset:3px}html[data-theme=dark] .remove-roster-button{background:none;border:0;color:#ff6678}html[data-theme=dark] .remove-roster-button:hover{background:none;color:#ff9aa6}
/* Give the main team artwork the proportions of the classic profile panel. */
.profile-overview{grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:start;gap:20px}
.profile-overview :is(.team-large-avatar,.squad-emblem){width:100%;aspect-ratio:5/4;min-height:0;height:auto;align-self:start}
.profile-overview .team-large-avatar{position:relative}
.profile-overview .team-large-avatar .team-image{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain}
@media(max-width:620px){.profile-overview{gap:14px;grid-template-columns:minmax(0,2fr) minmax(0,3fr)}}
@media(max-width:420px){.profile-overview{grid-template-columns:1fr}.profile-overview :is(.team-large-avatar,.squad-emblem){max-width:320px}.profile-overview .squad-summary{width:100%}}
.profile-tabs:has(.team-management){display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding-block:6px}
.profile-tabs .team-management{margin-left:auto;padding:0;gap:8px;align-items:center}
html .profile-tabs .team-management .button{border:1px solid var(--action-border);background:linear-gradient(var(--action-top),var(--action-bottom));color:var(--action-text);border-radius:2px;padding:7px 12px;min-height:34px;font:600 13px/18px var(--body)}
.profile-overview .squad-summary h3{font-size:26px;line-height:1.2;font-weight:700;margin:0 0 14px;overflow-wrap:anywhere}
@media(max-width:620px){.profile-tabs .team-management{gap:5px}.profile-tabs .team-management .button{padding:6px 8px;font-size:12px}.profile-overview .squad-summary h3{font-size:22px}}
@media(max-width:420px){.profile-tabs .team-management{flex-basis:100%;justify-content:flex-start;margin-top:4px}}

html[data-theme=dark] .profile-tabs .team-management .button{background:linear-gradient(var(--action-top),var(--action-bottom));border-color:var(--action-border);color:var(--action-text)}

.competition-info .team-image{width:53px;height:53px;object-fit:contain}.competition-info>div{min-width:0}.competition-info strong{overflow-wrap:anywhere}

/* Forest green team actions, with readable white labels in both themes. */
:root,html[data-theme=dark]{--team-win-green:#24633d;--team-win-ink:#fff;--team-win-border:#3f8056}
html[data-theme] #join-ladder.is-joined,html[data-theme] .button.add-roster-button{background:var(--team-win-green);border-color:var(--team-win-border);color:var(--team-win-ink);text-shadow:none;box-shadow:inset 0 1px 0 #ffffff24,inset 0 -1px 0 #00000018}
html[data-theme] #join-ladder.is-joined:hover,html[data-theme] .button.add-roster-button:hover{background:var(--team-win-green);color:var(--team-win-ink);border-color:var(--team-win-border);filter:brightness(1.08)}
html[data-theme] .button.add-roster-button{--action-top:var(--team-win-green);--action-bottom:var(--team-win-green);--action-border:var(--team-win-border);--action-text:var(--team-win-ink)}

.invitation-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.invitation-actions .button{width:auto}

/* Team toolbar actions share the subdued navigation treatment. */
html[data-theme] .profile-tabs .team-management .button{min-height:34px;padding:7px 12px;border-radius:2px;font:600 13px/18px var(--body);text-shadow:none;box-shadow:inset 0 1px #ffffff0d;filter:none}
html[data-theme] .profile-tabs .team-management .add-roster-button{--action-top:#17374a;--action-bottom:#0b1d28;--action-border:#386782;--action-text:#9bcdea;background:linear-gradient(var(--action-top),var(--action-bottom));border-color:var(--action-border);color:var(--action-text)}
html[data-theme] .profile-tabs .team-management .add-roster-button:hover{background:linear-gradient(#21475d,#123044);border-color:#619abb;color:#d5efff;filter:none}
html[data-theme] .profile-tabs .team-management .disband-button{--action-top:#17374a;--action-bottom:#0b1d28;--action-border:#386782;--action-text:#9bcdea;background:linear-gradient(var(--action-top),var(--action-bottom));border-color:var(--action-border);color:var(--action-text)}
html[data-theme] .profile-tabs .team-management .disband-button:hover{background:linear-gradient(#21475d,#123044);border-color:#619abb;color:#d5efff;filter:none}
html[data-theme] .profile-tabs .team-management .button:active{box-shadow:inset 0 1px 2px #0004}
@media(max-width:620px){html[data-theme] .profile-tabs .team-management .button{min-height:44px;padding:9px 12px}}

html[data-theme] .profile-tabs .team-management .disband-button:focus-visible{outline:2px solid #439dd8;outline-offset:3px}

.roster-console{display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px;vertical-align:middle;color:#303c44}
.console-mark{display:block;width:24px;height:24px;fill:currentColor}
.console-mark-ps5{width:28px}

html[data-theme=dark] .roster-console{color:#e4e8eb}