/* 清除所有元素默认内外边距，设置盒模型为border-box（边框包含在宽高中） */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 页面整体样式：flex布局使内容居中，背景色为深灰 */
body {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    min-height: 100vh; /* 最小高度为视口高度，确保占满屏幕 */
    background: #363636;
}

/* 容器样式：用于排列多个圆形进度条 */
.container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px; /* 进度条之间的间距 */
}

/* 圆形进度条容器样式 */
.container .circle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* 内部元素垂直排列 */
    width: 200px; /* 圆形宽度 */
    height: 200px; /* 圆形高度 */
    border-radius: 50%; /* 圆角为50%，形成圆形 */
}

/* 圆形进度条内层遮罩（通过伪元素实现） */
.container .circle::before {
    content: ''; /* 伪元素必须设置content */
    position: absolute;
    inset: 5px; /* 内边距为5px，相对于父元素 */
    border-radius: 50%; /* 圆形 */
    background: #222; /* 背景色 */
    opacity: 0.8; /* 透明度 */
}

/* 圆形进度条中心装饰（通过伪元素实现） */
.container .circle::after{
    content: '';
    position: absolute;
    width: 120px; /* 中心圆宽度 */
    height: 120px; /* 中心圆高度 */
    background: #333; /* 背景色 */
    border: 15px solid #4d4c51; /* 边框样式 */
    border-radius: 50%; /* 圆形 */
    /* 多重阴影：增强立体感 */
    box-shadow: inset 0 5px 10px rgba(0,0,0,0.25), /* 内阴影 */
    0 10px 10px rgba(0,0,0,0.75), /* 外阴影 */
    0 -2px 2px rgba(255,255,255,0.5), /* 顶部高光 */
    inset 0 4px 2px rgba(0,0,0,0.25), /* 内层阴影 */
    inset 0 -2px 2px rgba(255,255,255,0.5); /* 内层顶部高光 */
}

/* 百分比数字样式 */
.container .circle .number {
    position: relative;
    color: #fff; /* 文字颜色 */
    z-index: 10; /* 层级高于背景，确保可见 */
    line-height: 1em; /* 行高 */
    font-size: 2em; /* 字体大小 */
}

/* 百分比符号样式 */
.container .circle .number span {
    font-size: 0.5em; /* 符号大小为数字的一半 */
    font-weight: 500; /* 字体粗细 */
}

/* 标题文字样式 */
.container .circle h4 {
    position: relative;
    color: #fff; /* 文字颜色 */
    z-index: 10; /* 层级高于背景，确保可见 */
    font-weight: 500; /* 字体粗细 */
    font-size: 0.8em; /* 字体大小 */
    text-decoration: uppercase; /* 大写字母 */
    line-height: 0.6em; /* 行高 */
}