.cdl-global-live {
position: relative;
z-index: var(--cdl-global-live-z, 99985);
pointer-events: none;
--cdl-live-ok-bg: #e8f5e9;
--cdl-live-ok-fg: #1b5e20;
--cdl-live-err-bg: #ffebee;
--cdl-live-err-fg: #b71c1c;
}
.cdl-global-live > * {
pointer-events: auto;
} .cdl-global-live--gps-off .cdl-global-live__action[data-cdk-action='nearby']:disabled,
.cdl-global-live--gps-off .cdl-global-live__action[data-cdk-action='nearby'][aria-disabled='true'] {
opacity: 0.55;
cursor: not-allowed;
}
.cdl-global-live__fab {
position: fixed;
z-index: calc(var(--cdl-global-live-z, 99985) + 1);
min-height: 48px;
min-width: 48px;
padding: 0.65rem 1.1rem;
border: none;
border-radius: 999px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
background: linear-gradient(135deg, #c62828, #8e0000);
color: #fff;
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.cdl-global-live--is-open .cdl-global-live__fab {
opacity: 0.92;
transform: scale(0.98);
}
.cdl-global-live__fab:hover,
.cdl-global-live__fab:focus-visible {
transform: scale(1.03);
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
outline: 2px solid #fff;
outline-offset: 2px;
}
.cdl-global-live--is-open .cdl-global-live__fab:hover,
.cdl-global-live--is-open .cdl-global-live__fab:focus-visible {
transform: scale(1);
}
.cdl-global-live--float .cdl-global-live__fab {
right: max(var(--cdl-global-live-fab-right, 24px), env(safe-area-inset-right, 0px));
bottom: max(var(--cdl-global-live-fab-bottom, 24px), calc(12px + env(safe-area-inset-bottom, 0px)));
} body:has(#car-root) .cdl-global-live--float .cdl-global-live__fab {
bottom: max(
calc(var(--cdl-global-live-fab-bottom, 24px) + 52px + 12px),
calc(1.25rem + 52px + 12px + env(safe-area-inset-bottom, 0px))
);
}
@media (max-width: 782px) {
body:has(#car-root) .cdl-global-live--float .cdl-global-live__fab {
bottom: max(
calc(var(--cdl-global-live-fab-bottom, 24px) + 52px + 12px),
calc(1rem + 52px + 12px + env(safe-area-inset-bottom, 0px))
);
}
body.cd-mobile-fix:has(.cdspwa-android-bar:not([hidden])):has(#car-root) .cdl-global-live--float .cdl-global-live__fab {
bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px) + 52px + 12px);
}
}
.cdl-global-live--top-strip .cdl-global-live__fab {
top: max(12px, env(safe-area-inset-top, 0px));
right: max(var(--cdl-global-live-fab-right, 24px), env(safe-area-inset-right, 0px));
bottom: auto;
border-radius: 10px;
font-size: 0.95rem;
}
.cdl-global-live__panel[hidden] {
display: none !important;
}
.cdl-global-live__panel:not([hidden]) {
display: block;
position: fixed;
inset: 0;
z-index: var(--cdl-global-live-z, 99985);
}
.cdl-global-live__backdrop {
position: absolute;
inset: 0;
border: none;
padding: 0;
margin: 0;
background: rgba(0, 0, 0, 0.45);
cursor: pointer;
animation: cdl-global-live-fade 0.24s ease;
}
.cdl-global-live__sheet {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: min(100%, 400px);
max-width: 100vw;
background: #fff;
box-shadow: -6px 0 24px rgba(0, 0, 0, 0.12);
display: flex;
flex-direction: column;
overflow: hidden;
animation: cdl-global-live-slide 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.cdl-global-live__scroll {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
@media (min-width: 783px) {
.cdl-global-live__sheet {
top: max(12px, env(safe-area-inset-top, 0px));
bottom: max(12px, env(safe-area-inset-bottom, 0px));
height: auto;
max-height: calc(100vh - 24px);
border-radius: 14px 0 0 14px;
box-shadow: -8px 8px 32px rgba(0, 0, 0, 0.14);
}
}
@media (max-width: 480px) {
.cdl-global-live__sheet {
width: 100%;
}
}
@media (max-width: 782px) {
.cdl-global-live__sheet {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.cdl-global-live__scroll {
scroll-padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
}
}
@keyframes cdl-global-live-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes cdl-global-live-slide {
from {
transform: translateX(100%);
opacity: 0.96;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes cdl-global-live-content-in {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes cdl-global-live-toast-in {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.cdl-global-live__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 1rem 0.55rem;
border-bottom: 1px solid #eee;
flex-shrink: 0;
background: #fff;
z-index: 2;
}
.cdl-global-live__title {
margin: 0;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.25;
}
.cdl-global-live__close.cdl-btn--icon {
min-width: 44px;
min-height: 44px;
padding: 0;
border-radius: 8px;
font-size: 1.5rem;
line-height: 1;
background: transparent;
border: 1px solid #ddd;
cursor: pointer;
}
.cdl-global-live__close:focus-visible {
outline: 2px solid #c62828;
outline-offset: 2px;
}
.cdl-global-live__toast--global {
margin: 0.75rem 1rem 0;
padding: 0.55rem 0.85rem;
border-radius: 8px;
font-size: 0.9rem;
line-height: 1.4;
}
.cdl-global-live__toast--global:not([hidden]) {
animation: cdl-global-live-toast-in 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.cdl-global-live__toast--global:not([hidden]).cdl-global-live__toast--ok {
background: var(--cdl-live-ok-bg);
color: var(--cdl-live-ok-fg);
}
.cdl-global-live__toast--global:not([hidden]).cdl-global-live__toast--err {
background: var(--cdl-live-err-bg);
color: var(--cdl-live-err-fg);
}
.cdl-global-live__intro {
margin: 0 1rem 0.85rem;
padding: 0;
font-size: 0.9375rem;
line-height: 1.55;
color: #444;
} .cdl-global-live__hub-hero {
margin: 0;
padding: 0.55rem 1rem 0.35rem;
}
.cdl-global-live__hub-headline {
margin: 0 0 0.35rem;
font-size: 1rem;
font-weight: 700;
line-height: 1.35;
color: #1a1a1a;
}
.cdl-global-live__hub-community {
margin: 0;
padding: 0.4rem 0.65rem;
border-radius: 10px;
background: linear-gradient(135deg, #fff8f8, #ffebee);
border: 1px solid #ffcdd2;
}
.cdl-global-live__hub-community-line {
margin: 0;
padding: 0.1rem 0;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.4;
color: #8e0000;
}
.cdl-global-live__hub-community-line + .cdl-global-live__hub-community-line {
border-top: 1px solid rgba(198, 40, 40, 0.1);
padding-top: 0.25rem;
margin-top: 0.15rem;
}
.cdl-global-live__hub-pulse {
margin: 0 1rem 0.75rem;
padding: 0.5rem 0.75rem;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
line-height: 1.4;
color: #8e0000;
background: #ffebee;
}
.cdl-global-live__hub {
padding: 0 1rem 0.65rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.cdl-global-live__hub-card {
margin: 0;
padding: 0.85rem;
border: 1px solid #e0e0e0;
border-radius: 14px;
background: #fafafa;
}
.cdl-global-live__hub-card--primary {
border-color: #c62828;
background: linear-gradient(180deg, #fff 0%, #fff5f5 100%);
box-shadow: 0 4px 16px rgba(198, 40, 40, 0.12);
padding: 0.85rem 0.9rem;
}
.cdl-global-live__hub-card--primary .cdl-global-live__hub-card-title {
color: #8e0000;
font-size: 1.08rem;
}
.cdl-global-live__hub-card--row {
padding: 0;
border-color: #ececec;
background: #fff;
overflow: hidden;
}
.cdl-global-live__hub-row {
display: flex;
align-items: center;
gap: 0.65rem;
width: 100%;
min-height: 56px;
padding: 0.55rem 0.75rem;
border: none;
background: transparent;
text-align: left;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s ease;
}
.cdl-global-live__hub-row:hover,
.cdl-global-live__hub-row:focus-visible {
background: #fafafa;
outline: none;
box-shadow: inset 0 0 0 2px rgba(198, 40, 40, 0.25);
}
.cdl-global-live__hub-row-icon {
flex: 0 0 1.5rem;
font-size: 1.15rem;
line-height: 1;
text-align: center;
}
.cdl-global-live__hub-row-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.cdl-global-live__hub-row-title {
font-size: 0.9375rem;
font-weight: 700;
line-height: 1.3;
color: #1a1a1a;
}
.cdl-global-live__hub-row-hint {
font-size: 0.8125rem;
line-height: 1.35;
color: #5c5c5c;
}
.cdl-global-live__hub-row-chevron {
flex: 0 0 auto;
font-size: 1.35rem;
line-height: 1;
color: #c62828;
font-weight: 600;
}
.cdl-global-live__hub-card-icon {
font-size: 1.35rem;
line-height: 1;
margin-bottom: 0.35rem;
}
.cdl-global-live__hub-card-title {
margin: 0 0 0.35rem;
font-size: 1.05rem;
font-weight: 700;
line-height: 1.3;
color: #1a1a1a;
}
.cdl-global-live__hub-card-lead {
margin: 0 0 0.25rem;
font-size: 0.95rem;
font-weight: 600;
color: #333;
}
.cdl-global-live__hub-card-text {
margin: 0 0 0.65rem;
font-size: 0.875rem;
line-height: 1.45;
color: #5c5c5c;
}
.cdl-global-live__hub-card-lock {
margin: 0 0 0.55rem;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.4;
color: #5c5c5c;
}
.cdl-global-live__hub-card-note {
margin: 0.35rem 0 0;
font-size: 0.85rem;
line-height: 1.4;
color: #6b6b6b;
}
.cdl-global-live__hub-cta {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 48px;
padding: 0.65rem 1rem;
border: none;
border-radius: 10px;
font-size: 1rem;
font-weight: 600;
line-height: 1.25;
text-align: center;
text-decoration: none;
cursor: pointer;
box-sizing: border-box;
transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.cdl-global-live__hub-cta--primary {
background: linear-gradient(135deg, #c62828, #8e0000);
color: #fff;
box-shadow: 0 2px 10px rgba(198, 40, 40, 0.22);
}
.cdl-global-live__hub-cta--primary:hover,
.cdl-global-live__hub-cta--primary:focus-visible {
box-shadow: 0 4px 14px rgba(198, 40, 40, 0.28);
outline: 2px solid #1a1a1a;
outline-offset: 2px;
}
.cdl-global-live__hub-cta--secondary {
background: #fff;
color: #8e0000;
border: 1px solid #c62828;
}
.cdl-global-live__hub-cta--secondary:hover,
.cdl-global-live__hub-cta--secondary:focus-visible {
background: #ffebee;
outline: 2px solid #c62828;
outline-offset: 2px;
}
.cdl-global-live__hub-cta:disabled,
.cdl-global-live__hub-cta[aria-disabled='true'] {
opacity: 1;
background: #f0f0f0;
color: #757575;
border: 1px solid #ddd;
cursor: not-allowed;
box-shadow: none;
}
.cdl-global-live__hub-footer {
margin: 0.35rem 1rem 0.75rem;
padding-top: 0.55rem;
border-top: 1px solid #eee;
}
.cdl-global-live__hub-footer--login {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.cdl-global-live__hub-login-text {
margin: 0;
font-size: 0.9rem;
line-height: 1.45;
color: #5c5c5c;
}
.cdl-global-live__hub-link {
display: inline-flex;
align-items: center;
width: 100%;
min-height: 44px;
padding: 0.45rem 0;
border: none;
background: transparent;
color: #8e0000;
font-size: 0.95rem;
font-weight: 600;
text-align: left;
cursor: pointer;
text-decoration: underline;
}
.cdl-live-nearby__lead {
margin: 0 0 0.85rem;
font-size: 1rem;
font-weight: 600;
color: #1a1a1a;
}
.cdl-live-nearby__multi-head {
margin: 0 0 0.65rem;
font-size: 0.95rem;
font-weight: 600;
color: #1a1a1a;
}
.cdl-live-nearby__picks {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 0.85rem;
}
.cdl-live-nearby__pick-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
width: 100%;
padding: 0.75rem 0.85rem;
border: 2px solid #e0e0e0;
border-radius: 12px;
background: #fff;
color: #1a1a1a;
text-align: left;
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.cdl-live-nearby__pick-card:hover,
.cdl-live-nearby__pick-card:focus-visible {
border-color: #c62828;
outline: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.cdl-live-nearby__pick-card.is-selected {
border-color: #c62828;
background: #fff;
box-shadow: 0 0 0 1px #c62828;
}
.cdl-live-nearby__pick-card--static {
cursor: default;
}
.cdl-live-nearby__pick-title {
font-size: 1rem;
font-weight: 700;
line-height: 1.35;
color: #1a1a1a;
}
.cdl-live-nearby__pick-meta {
font-size: 0.85rem;
line-height: 1.35;
color: #5c5c5c;
}
.cdl-live-nearby__result-label {
margin: 0 0 0.25rem;
font-size: 0.9rem;
color: #5c5c5c;
}
.cdl-live-nearby__result-title {
margin: 0 0 0.35rem;
font-size: 1.1rem;
font-weight: 700;
line-height: 1.35;
color: #1a1a1a;
}
.cdl-live-nearby__result-meta {
margin: 0 0 0.5rem;
font-size: 0.85rem;
color: #5c5c5c;
}
.cdl-live-nearby__result-actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 0.85rem;
} .cdl-party-hub {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.cdl-party-hub__card {
margin: 0;
padding: 1rem;
border-radius: 14px;
border: 1px solid #ffcdd2;
background: linear-gradient(180deg, #fff 0%, #fff8f8 100%);
box-shadow: 0 4px 14px rgba(198, 40, 40, 0.08);
}
.cdl-party-hub__badge {
margin: 0 0 0.5rem;
padding: 0.35rem 0.55rem;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 700;
line-height: 1.35;
display: inline-block;
}
.cdl-party-hub__badge--registered,
.cdl-party-hub__badge--skipped {
color: #1b5e20;
background: #e8f5e9;
}
.cdl-party-hub__badge--already {
color: #e65100;
background: #fff3e0;
}
.cdl-party-hub__title {
margin: 0 0 0.25rem;
font-size: 1.15rem;
font-weight: 700;
line-height: 1.35;
color: #1a1a1a;
}
.cdl-party-hub__when {
margin: 0;
font-size: 0.9rem;
font-weight: 600;
color: #5c5c5c;
}
.cdl-party-hub__stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
.cdl-party-hub__stat {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.25rem 0.35rem;
padding: 0.55rem 0.65rem;
border-radius: 10px;
background: #fafafa;
border: 1px solid #eee;
}
.cdl-party-hub__stat-ico {
font-size: 1rem;
line-height: 1;
}
.cdl-party-hub__stat-val {
font-size: 1.05rem;
font-weight: 700;
color: #1a1a1a;
}
.cdl-party-hub__stat-lbl {
font-size: 0.8rem;
color: #5c5c5c;
width: 100%;
}
.cdl-party-hub__loading,
.cdl-party-hub__empty {
margin: 0;
grid-column: 1 / -1;
font-size: 0.875rem;
color: #666;
}
.cdl-party-hub__stats-skeleton {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
grid-column: 1 / -1;
}
.cdl-party-hub__stats-skeleton span {
display: block;
height: 2.25rem;
border-radius: 8px;
background: linear-gradient(90deg, #eee 0%, #f5f5f5 50%, #eee 100%);
background-size: 200% 100%;
animation: cdl-live-shimmer 1.2s ease-in-out infinite;
}
.cdl-party-hub__stats-skeleton span:nth-child(1) {
flex: 1 1 28%;
min-width: 4.5rem;
}
.cdl-party-hub__stats-skeleton span:nth-child(2) {
flex: 1 1 28%;
min-width: 4.5rem;
}
.cdl-party-hub__stats-skeleton span:nth-child(3) {
flex: 1 1 28%;
min-width: 4.5rem;
}
.cdl-party-hub__activity {
padding: 0.65rem 0.75rem;
border-radius: 10px;
background: #fff8e1;
border: 1px solid #ffe082;
}
.cdl-party-hub__activity-head {
margin: 0 0 0.35rem;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #e65100;
}
.cdl-party-hub__quote {
margin: 0;
padding: 0;
border: none;
font-size: 0.9rem;
line-height: 1.45;
font-style: italic;
color: #333;
}
.cdl-party-hub__actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.cdl-global-live__nearby .cdl-party-hub {
padding: 0 1rem 1rem;
}
@media (max-width: 420px) {
.cdl-party-hub__stats {
grid-template-columns: 1fr;
}
.cdl-global-live__hub-hero {
padding: 0.45rem 0.85rem 0.3rem;
}
.cdl-global-live__hub-headline {
font-size: 0.9375rem;
margin-bottom: 0.3rem;
}
.cdl-global-live__hub {
padding: 0 0.85rem 0.55rem;
gap: 0.45rem;
}
.cdl-global-live__hub-card {
padding: 0.75rem;
}
.cdl-global-live__hub-card--primary {
padding: 0.75rem 0.8rem;
}
.cdl-global-live__hub-card-text {
margin-bottom: 0.55rem;
font-size: 0.8125rem;
}
.cdl-global-live__hub-row {
min-height: 52px;
padding: 0.5rem 0.65rem;
}
}
.cdl-global-live__section-label {
margin: 0 1rem 0.5rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #888;
}
.cdl-global-live__actions {
list-style: none;
margin: 0;
padding: 0 1rem 0.5rem;
}
.cdl-global-live__actions li {
margin: 0 0 0.6rem;
}
.cdl-global-live__action {
display: flex;
align-items: stretch;
gap: 0;
width: 100%;
text-align: left;
min-height: 52px;
padding: 0;
border: 1px solid #e0e0e0;
border-radius: 12px;
background: #fafafa;
cursor: pointer;
font-size: 1rem;
transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, filter 0.12s ease;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
}
.cdl-global-live__action:active:not(:disabled) {
filter: brightness(0.97);
}
.cdl-global-live__action:hover,
.cdl-global-live__action:focus-visible {
background: #fff;
border-color: #c62828;
box-shadow: 0 2px 10px rgba(198, 40, 40, 0.12);
outline: none;
}
.cdl-global-live__action-step {
flex: 0 0 2.25rem;
display: flex;
align-items: center;
justify-content: center;
background: #eceff1;
color: #546e7a;
font-size: 0.85rem;
font-weight: 700;
}
.cdl-global-live__action:hover .cdl-global-live__action-step,
.cdl-global-live__action:focus-visible .cdl-global-live__action-step {
background: #ffebee;
color: #c62828;
}
.cdl-global-live__action-body {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
padding: 0.6rem 0.75rem 0.65rem 0.5rem;
min-width: 0;
}
.cdl-global-live__action-ico {
line-height: 1.2;
font-size: 1.1rem;
}
.cdl-global-live__action-label {
line-height: 1.3;
font-weight: 600;
color: #212121;
}
.cdl-global-live__action-hint {
font-size: 0.8rem;
line-height: 1.35;
color: #757575;
}
.cdl-global-live__toolbar {
padding: 0.35rem 1rem 0.5rem;
border-top: 1px solid #eee;
background: #fafafa;
flex-shrink: 0;
}
.cdl-global-live__sheet--subopen .cdl-global-live__toolbar:not([hidden]) {
animation: cdl-global-live-content-in 0.2s ease;
}
.cdl-global-live__back {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.45rem 0.5rem;
margin: 0;
border: none;
background: transparent;
color: #c62828;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
border-radius: 6px;
min-height: 44px;
}
.cdl-global-live__back:hover,
.cdl-global-live__back:focus-visible {
text-decoration: underline;
outline: 2px solid #c62828;
outline-offset: 2px;
}
.cdl-global-live__back-ico {
font-size: 1.1rem;
line-height: 1;
}
.cdl-global-live__detail {
padding: 0 1rem 0.85rem;
border-top: 1px solid #eee;
}
.cdl-global-live__detail:not([hidden]) .cdl-global-live__detail-inner {
animation: cdl-global-live-content-in 0.22s ease;
}
.cdl-global-live__detail-inner {
padding-top: 0.75rem;
font-size: 0.95rem;
}
.cdl-global-live__detail-loading {
margin: 0;
color: #666;
}
.cdl-global-live__inline-pulse {
margin: 0.35rem 0 0.65rem;
padding: 0.45rem 0.65rem;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.4;
color: #8e0000;
background: #fff5f5;
animation: cdl-live-pulse-fade 1.4s ease-in-out infinite;
}
@keyframes cdl-live-pulse-fade {
0%,
100% {
opacity: 0.72;
}
50% {
opacity: 1;
}
}
@keyframes cdl-live-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.cdl-global-live__subhead {
margin: 0 0 0.65rem;
font-size: 1.02rem;
font-weight: 600;
color: #333;
}
.cdl-global-live__live-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 0;
}
.cdl-global-live__live-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
padding: 0.65rem 0.85rem;
border: 1px solid #e8e8e8;
border-radius: 10px;
background: #fff;
text-decoration: none;
color: #212121;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cdl-global-live__live-card:hover,
.cdl-global-live__live-card:focus-visible {
border-color: #c62828;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
outline: none;
}
.cdl-global-live__live-card-title {
font-weight: 600;
line-height: 1.3;
}
.cdl-global-live__live-card-meta {
font-size: 0.8rem;
color: #757575;
}
.cdl-global-live__nearby {
padding: 0 1rem 1.25rem;
border-top: 1px solid #eee;
}
.cdl-global-live__nearby:not([hidden]) {
animation: cdl-global-live-content-in 0.22s ease;
}
.cdl-global-live__nearby-title {
margin: 0 0 0.5rem;
font-size: 1rem;
font-weight: 600;
color: #333;
}
.cdl-global-live__nearby[hidden] {
display: none !important;
}
.cdl-live-nearby__presence {
margin: 0.75rem 0 0;
padding: 0.65rem 0.85rem;
border-radius: 8px;
font-size: 0.92rem;
line-height: 1.45;
background: #e8f5e9;
color: #1b5e20;
}
.cdl-live-nearby__presence--already {
background: #e3f2fd;
color: #0d47a1;
}
body.cdl-global-live--scroll-lock {
overflow: hidden;
}
.cdl-global-live__fab[aria-busy='true'] {
opacity: 0.75;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.cdl-global-live__sheet,
.cdl-global-live__backdrop {
animation: none;
}
.cdl-global-live__fab {
transition: none;
}
.cdl-global-live__detail:not([hidden]) .cdl-global-live__detail-inner,
.cdl-global-live__nearby:not([hidden]),
.cdl-global-live__sheet--subopen .cdl-global-live__toolbar:not([hidden]) {
animation: none;
}
.cdl-global-live--is-open .cdl-global-live__fab {
transform: none;
}
.cdl-global-live__toast--global:not([hidden]) {
animation: none;
}
.cdl-global-live__inline-pulse,
.cdl-party-hub__stats-skeleton span,
.cdl-radar-card__badge-shimmer,
.cdl-radar-card__meta-shimmer {
animation: none;
}
.cdl-global-live__action:active:not(:disabled) {
filter: none;
}
} .cdl-radar__head {
margin: 0 0 0.55rem;
padding: 0;
}
.cdl-radar__title {
margin: 0 0 0.25rem;
}
.cdl-radar__subtitle {
margin: 0 0 0.5rem;
font-size: 0.875rem;
line-height: 1.45;
color: #5c5c5c;
}
.cdl-radar__list {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 0;
padding: 0;
}
.cdl-radar-card {
margin: 0;
padding: 0.75rem;
border: 1px solid #e8e8e8;
border-radius: 14px;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.cdl-radar-card--loading {
opacity: 0.92;
}
.cdl-radar-card__badge {
margin: 0 0 0.45rem;
padding: 0.25rem 0.55rem;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 700;
line-height: 1.3;
display: inline-block;
}
.cdl-radar-card__badge--hot {
color: #bf360c;
background: #fbe9e7;
}
.cdl-radar-card__badge--active {
color: #1b5e20;
background: #e8f5e9;
}
.cdl-radar-card__badge--calm {
color: #e65100;
background: #fff3e0;
}
.cdl-radar-card__badge--new {
color: #0d47a1;
background: #e3f2fd;
}
.cdl-radar-card__badge--loading {
padding: 0.2rem 0;
background: transparent;
}
.cdl-radar-card__badge-shimmer,
.cdl-radar-card__meta-shimmer {
display: block;
height: 0.85rem;
border-radius: 999px;
background: linear-gradient(90deg, #eee 0%, #f5f5f5 50%, #eee 100%);
background-size: 200% 100%;
animation: cdl-live-shimmer 1.2s ease-in-out infinite;
}
.cdl-radar-card__badge-shimmer {
width: 5.5rem;
}
.cdl-radar-card__meta-shimmer {
width: 7rem;
margin-top: 0.15rem;
}
.cdl-radar-card__meta--loading {
min-height: 1rem;
}
.cdl-radar-card__title {
margin: 0 0 0.35rem;
font-size: 1.05rem;
font-weight: 700;
line-height: 1.35;
color: #1a1a1a;
}
.cdl-radar-card__meta {
margin: 0 0 0.35rem;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.4;
color: #333;
}
.cdl-radar-card__ambiance {
margin: 0 0 0.35rem;
font-size: 0.85rem;
font-weight: 600;
color: #5c5c5c;
}
.cdl-radar-card__quote-wrap {
margin: 0.3rem 0 0.55rem;
padding: 0.5rem 0.6rem;
border-radius: 10px;
background: #fafafa;
border: 1px solid #eee;
}
.cdl-radar-card__quote-label {
margin: 0 0 0.15rem;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
color: #5c5c5c;
}
.cdl-radar-card__quote {
margin: 0;
padding: 0;
border: none;
font-size: 0.875rem;
line-height: 1.45;
font-style: italic;
color: #333;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cdl-radar-card__quote-age {
margin: 0.25rem 0 0;
font-size: 0.75rem;
color: #757575;
}
.cdl-radar-card__quote-empty {
margin: 0;
font-size: 0.85rem;
color: #757575;
font-style: italic;
}
.cdl-radar-card__actions {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.cdl-global-live__detail-inner .cdl-radar__list {
padding: 0 0 0.35rem;
}
@media (max-width: 420px) {
.cdl-radar-card {
padding: 0.75rem;
}
.cdl-radar-card__title {
font-size: 1rem;
}
.cdl-radar-card__meta {
font-size: 0.8125rem;
}
}