:root{--role-super:#6D28D9;--role-club:#006B64;--role-fan:#B60078}
body[data-area="super"],[data-identity="super"]{--area-colour:var(--role-super);--area-soft:#f1eafb}
body[data-area="club"],[data-identity="club"]{--area-colour:var(--role-club);--area-soft:#e7f3f0}
body[data-area="fan"],[data-identity="fan"]{--area-colour:var(--role-fan);--area-soft:#fbeaf5}
.area-identity{display:inline-flex;align-items:center;gap:9px;max-width:100%;padding:7px 11px;border-left:4px solid var(--area-colour);border-radius:7px;background:var(--area-soft);color:var(--area-colour);font-size:12px;font-weight:650;letter-spacing:0;line-height:1.35;text-align:left;vertical-align:middle}
.area-mark{display:inline-flex;align-items:center;justify-content:center;flex:0 0 30px;width:30px;height:30px;border-radius:8px;background:var(--area-colour);color:#fff}
.area-glyph{display:inline-block;flex-shrink:0;width:21px;height:21px;vertical-align:middle}
.area-label{min-width:0;overflow-wrap:break-word}
.area-workspace{margin-top:18px;text-align:left;letter-spacing:0}
.area-workspace .area-identity{width:100%;padding:7px 9px}
body[data-area] .topbar{height:auto;min-height:78px;border-top:4px solid var(--area-colour);gap:12px;padding-top:12px;padding-bottom:12px}
.area-context{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.area-context .breadcrumb{margin:0;font-size:12px;overflow-wrap:anywhere}
body[data-area] .sidebar .nav-link.active{background:var(--area-soft);color:var(--area-colour);box-shadow:inset 3px 0 var(--area-colour)}
.area-destination{--destination-colour:var(--role-club)}
.area-destination[data-target-area="super"]{--destination-colour:var(--role-super)}
.area-destination[data-target-area="fan"]{--destination-colour:var(--role-fan)}
.area-destination .area-glyph{color:var(--destination-colour)}
.fan-header{border-top:4px solid var(--role-fan)}
.fan-brand-copy{display:flex;flex-direction:column;gap:6px;min-width:0}
.fan-header .fan-brand-copy>.area-identity{width:fit-content;padding:5px 9px;font-size:12px}
.fan-header .area-mark{width:25px;height:25px;flex-basis:25px;border-radius:6px}
.fan-header .area-mark .area-glyph{width:18px;height:18px}
.fan-header nav a.area-destination{display:inline-flex;align-items:center;gap:6px}
@media(max-width:760px){body[data-area] .topbar{flex-wrap:wrap;padding-left:18px;padding-right:18px;min-height:74px}.area-context{gap:8px}.area-identity{font-size:12px;padding:6px 9px}.area-workspace{display:none}.area-context .breadcrumb{display:none}.fan-header .fan-brand{min-width:0;max-width:100%}.fan-brand-copy>strong{font-size:17px;overflow-wrap:anywhere}.fan-header nav a.area-destination .area-glyph{width:18px;height:18px}}