/* Trích nguyên từ mã bạn cung cấp (docx), chỉ thêm phần mở rộng ở cuối file. */
.reflective-card {
position: relative;
box-sizing: border-box;
width: var(--rc-width);
height: var(--rc-height);
max-width: 100%;
perspective: 900px;
color: var(--rc-ink);
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
}
.reflective-card__body {
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: var(--rc-radius);
background: var(--rc-base);
box-shadow: var(--rc-shadow);
transform: translate3d(0, var(--rc-lift, 0px), 0) rotateX(var(--rc-rotate-x, 0deg)) rotateY(var(--rc-rotate-y, 0deg));
opacity: var(--rc-presence, 1);
isolation: isolate;
will-change: transform;
}
.reflective-card__canvas {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
}
.reflective-card__content {
position: relative;
z-index: 1;
box-sizing: border-box;
display: flex;
height: 100%;
flex-direction: column;
padding: var(--rc-pad);
}
.reflective-card__header {
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
line-height: 20px;
}
.reflective-card__badge {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--rc-ink);
font-weight: 500;
}
.reflective-card__status {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: auto;
color: var(--rc-muted);
}
.reflective-card__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--rc-status);
}
.reflective-card__identity {
margin-top: auto;
}
.reflective-card__name {
margin: 0;
color: var(--rc-ink);
font-size: 24px;
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.15;
text-wrap: balance;
}
.reflective-card__role {
margin: 4px 0 0;
color: var(--rc-muted);
font-size: 14px;
line-height: 1.4;
}
.reflective-card__footer {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin-top: 24px;
}
.reflective-card__id {
display: flex;
min-width: 0;
flex-direction: column;
gap: 4px;
}
.reflective-card__label {
color: var(--rc-muted);
font-size: 12px;
line-height: 16px;
}
.reflective-card__value {
overflow: hidden;
color: var(--rc-ink);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 15px;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
line-height: 20px;
text-overflow: ellipsis;
white-space: nowrap;
}
.reflective-card__tile {
position: relative;
box-sizing: border-box;
display: flex;
width: 44px;
height: 44px;
flex: none;
align-items: center;
justify-content: center;
border-radius: var(--rc-tile-radius);
background: var(--rc-tile);
box-shadow: var(--rc-tile-shadow);
color: var(--rc-muted);
}
.reflective-card__tile::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow:
inset 0 0 0 1px var(--rc-tile-edge),
inset 0 1px 0 var(--rc-tile-highlight);
pointer-events: none;
}
.reflective-card__rim {
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
box-shadow:
inset 0 0 0 1px var(--rc-rim),
inset 0 1px 0 var(--rc-rim-highlight);
pointer-events: none;
}
.reflective-card__media {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}