.af-lwc,
.af-lwc *,
.af-lwc *::before,
.af-lwc *::after {
box-sizing: border-box;
}
.af-lwc {
--af-lwc-accent: var(--af-primary, #67e8f9);
--af-lwc-green: var(--af-green, #6ee7b7);
--af-lwc-text: var(--af-text, #f4f7fb);
--af-lwc-muted: var(--af-muted, #a9b5c8);
--af-lwc-border: rgba(255, 255, 255, 0.12);
width: 100%;
min-width: 0;
padding: 16px;
color: var(--af-lwc-text);
border: 1px solid var(--af-lwc-border);
border-radius: 16px;
font: inherit;
}
.af-lwc-glass {
background:
linear-gradient(
145deg,
rgba(103, 232, 249, 0.08),
rgba(167, 139, 250, 0.06)
),
rgba(10, 23, 37, 0.84);
}
.af-lwc-minimal {
padding: 12px 0;
background: transparent;
border-width: 1px 0;
border-radius: 0;
}
.af-lwc-neon {
background: #07111f;
border-color: rgba(103, 232, 249, 0.38);
box-shadow:
inset 0 0 20px rgba(103, 232, 249, 0.04),
0 0 18px rgba(103, 232, 249, 0.08);
}
.af-lwc-solid {
background: #102237;
}
.af-lwc-heading {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 13px;
color: var(--af-lwc-text);
font-size: 0.78rem;
font-weight: 850;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.af-lwc-pulse {
width: 8px;
height: 8px;
flex: 0 0 8px;
background: var(--af-lwc-green);
border-radius: 50%;
box-shadow:
0 0 0 4px rgba(110, 231, 183, 0.1);
}
.af-lwc-animated .af-lwc-pulse {
animation:
af-lwc-pulse
2.2s
ease-in-out
infinite;
}
.af-lwc-metrics {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(72px, 1fr));
gap: 8px;
}
.af-lwc-metric {
min-width: 0;
padding: 10px;
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 11px;
text-align: center;
}
.af-lwc-metric strong {
display: block;
color: var(--af-lwc-accent);
font-size: clamp(1rem, 2vw, 1.35rem);
line-height: 1.15;
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.af-lwc-metric span {
display: block;
margin-top: 4px;
color: var(--af-lwc-muted);
font-size: 0.67rem;
line-height: 1.25;
}
.af-lwc-compact {
padding: 10px;
}
.af-lwc-compact .af-lwc-heading {
margin-bottom: 8px;
}
.af-lwc-compact .af-lwc-metric {
padding: 7px;
}
.af-lwc-countries {
margin-top: 13px;
padding-top: 12px;
border-top: 1px solid var(--af-lwc-border);
}
.af-lwc-country-title {
display: block;
margin-bottom: 8px;
color: var(--af-lwc-muted);
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
}
.af-lwc-countries ol {
display: grid;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.af-lwc-countries li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0;
padding: 0;
color: var(--af-lwc-muted);
font-size: 0.75rem;
}
.af-lwc-countries li strong {
color: var(--af-lwc-accent);
font-variant-numeric: tabular-nums;
}
.af-lwc-countries p {
margin: 0;
color: var(--af-lwc-muted);
font-size: 0.72rem;
line-height: 1.45;
}
.af-lwc-auto {
width: min(calc(100% - 32px), 1180px);
margin-inline: auto;
}
.af-lwc-auto-header {
margin-top: 14px;
margin-bottom: 14px;
}
.af-lwc-auto-footer {
width: min(calc(100% - 32px), 1180px);
margin: 28px auto;
}
.af-lwc-floating {
position: fixed;
z-index: 99990;
bottom:
calc(
18px +
env(safe-area-inset-bottom, 0px)
);
width: min(280px, calc(100vw - 32px));
}
.af-lwc-bottom-left {
left:
calc(
18px +
env(safe-area-inset-left, 0px)
);
}
.af-lwc-bottom-right {
right:
calc(
18px +
env(safe-area-inset-right, 0px)
);
}
@keyframes af-lwc-pulse {
0%,
100% {
transform: scale(0.85);
opacity: 0.62;
}
50% {
transform: scale(1.18);
opacity: 1;
}
}
@media (max-width: 480px) {
.af-lwc {
padding: 13px;
}
.af-lwc-floating {
right: 12px;
bottom:
calc(
58px +
env(safe-area-inset-bottom, 0px)
);
left: 12px;
width: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.af-lwc,
.af-lwc * {
animation: none !important;
transition: none !important;
}
}
@media print {
.af-lwc-floating,
.af-lwc-auto {
display: none !important;
}
}