/* 注册常规体 (Regular) */
@font-face {
    font-family: 'Google Sans Flex';
    src: url('../fonts/GoogleSansFlex_24pt-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* 4. Regular (400) */
@font-face {
    font-family: 'Google Sans Flex';
    src: url('../fonts/GoogleSansFlex_24pt-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/* 5. Medium (500) */
@font-face {
    font-family: 'Google Sans Flex';
    src: url('../fonts/GoogleSansFlex_24pt-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
/* 5. Medium (600) */
@font-face {
    font-family: 'Google Sans Flex';
    src: url('../fonts/GoogleSansFlex_24pt-SemiBold.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

html {
    font-size: 62.5%; 
}
p, h1, h2, h3, h4, h5, h6 {
    margin: 0; padding: 0;
}
body {
    /* 全局指定 Outfit 字体，如果下载失败，自动降级到苹果和安卓的系统无衬线字体 */
    font-family: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    padding: 0;
    margin: 0;
    background-image: linear-gradient(90deg, #fff 0%, #f5f6f8 100%);
}
/* 大标题：自动调用 Bold 体 */
.title {
    font-size: clamp(2.600rem, calc(2.455rem + 0.455vw), 3.000rem);
    font-weight: 700; /* 自动匹配 Outfit-Bold.ttf */
}
/* 按钮文字或者小卡片标题：自动调用 Medium 体 */
.refresh-btn, .subtitle {
    font-size: clamp(2.200rem, calc(2.054rem + 0.455vw), 2.600rem);
    font-weight: 500; /* 自动匹配 Outfit-Medium.ttf */
}
/* 普通日常段落：自动调用 Regular 体 */
.log-item {
    /* font-size: 2.2rem; */
    font-size: clamp(1.600rem, calc(1.655rem + 0.455vw), 2.000rem);
    font-weight: 400; /* 自动匹配 Outfit-Regular.ttf */
}

.header {
    padding: 1rem 2rem;
    background-image: linear-gradient(45deg, #a18cd1 0%, #fbc2eb 100%);
    width: 100vw;
    box-sizing: border-box;
    color: #f8fff8;
}
.header .fun-module {
    display: grid;
    justify-content: space-between;
    align-items: center;
    grid-template-columns: auto auto;
}

.header .fun-module .time {
    font-size: clamp(1.400rem, calc(1.254rem + 0.455vw), 1.800rem);
}

.header .fun-module .down-local {
    display: flex;
    align-items: center;
}

.header .fun-module .down-local > div {
    padding: 0 0.8rem;
}

.weight-number {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(6.800rem, calc(5.709rem + 3.409vw), 9.800rem);
    font-weight: 700;
    padding: 1rem 0;
    color: #f8fff8;
}

.weight-number .unit {
    font-size: clamp(2.200rem, calc(1.655rem + 0.455vw), 2.600rem);
    margin-left: 0.5rem;
    color: #f8fff8;
    font-weight: 400;
}

.weight-data {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    text-align: center;
    gap: 2rem;
    font-size: clamp(1.400rem, calc(1.254rem + 0.455vw), 1.800rem);
}
.weight-data .Q-target {
    grid-column: 1 / -1;                  /* 占满所有列 */
    text-align: center;
}

.weight-data .percentage {                /* 占满所有列 */
    text-align: center;
    padding: 0.5rem 0;
}

.chart-section {
    padding: 2rem;
    margin: 1rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 500px), 1fr));
    gap: 1.5rem;
    
}

.chart-section .chart-container {
    border-radius: .7rem;
    padding: 1rem;
}