html, body {
    /* height: 100%; */
    margin: 0;          /* 取消浏览器默认 margin，避免出现多余滚动条 */
    padding: 0;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f5f5f7;
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.container {
    display: flex;
    flex-direction: column;
    /* height: 90%; */
    max-width: 80%;
    margin: 20px auto;
    padding: 20px 24px 40px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}
h1 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 26px;
}
.section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}
.section:last-of-type {
    border-bottom: none;
}
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: center;
    margin-bottom: 12px;
}

label {
    font-size: 14px;
    color: #374151;
}

select, input[type="number"] {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    min-width: 180px;
    font-size: 14px;
}

.select-wrapper {
    /* width: 200px; */
    max-width: 200px;

    .choices__inner {
        min-height: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }

    .choices__item {
        padding: 0 6px;
    }

    .choices__button {
        padding: 2px;
    }

    input {
        padding: 2px;
        margin: 0;
    }
}

button {
    padding: 8px 16px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    background: #2563eb;
    color: white;
}
button:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}
#plot-area {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 320px;
    /* max-height: 60%; */
    border-radius: 12px;
    border: 1px dashed #e5e7eb;
    background: #f9fafb;
    overflow: hidden;
}
#plots-wrapper {
    display: flex;
    flex-direction: row;     /* 横向排列 */
    flex-wrap: wrap; /* 允许换行（核心） */
    align-items: flex-start; /* 顶部对齐 */
    align-items: start;        /* 在纵向上靠前 */
    /* align-items: stretch; */
    justify-content: center;    /* 在横向上居中 */
    gap: 20px;                  /* 两张图之间留点空隙 */
    padding: 10px 0;
}
#left-wrapper {
    max-width: 40%;             /* 限制最大宽度，使其不会溢出容器 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#plots-wrapper img {
    height: auto;               /* 按比例缩放 */
    display: inline;
}
#plots-wrapper table {
    height: auto;
    display: inline;
    text-align: center; /* 核心：文字水平居中 */
    vertical-align: middle; /* 可选：文字垂直居中（应对单元格高度不一致的情况） */;
}
#plot-img {
    max-width: 80%;
}
#rewards-img {
    max-width: 40%;
}

/* #plot-img {
    max-width: 100%;
    max-height: 600px;
} */
.slider-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

#step-slider {
    flex: 1 1 auto;
}

.slider-row > label {
    flex: 1 1 auto;
}
/* 滑轨这一行布局 */
.slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.slider-row > label {
    flex: 0 0 auto;
}

/* 滑条尽量占剩余空间 */
#step-slider {
    flex: 1 1 auto;
}

/* 播放按钮 */
#play-btn {
    padding: 6px 10px;
    border-radius: 999px;
    border: none;
    font-size: 13px;
    cursor: pointer;
    background: #10b981;       /* 绿色播放 */
    color: #ffffff;
    white-space: nowrap;
}

#play-btn.paused {
    background: #2563eb;       /* 暂停时改个颜色也行，看你喜好 */
}

#play-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

input[type="range"] {
    flex: 1;
}

.step-info {
    font-size: 13px;
    color: #6b7280;
}

#step-input {
    width: 60px;        /* 足够放 4 位数 + 一点边距 */
    padding: 4px 6px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    font-size: 14px;
    box-sizing: border-box;
    text-align: right;  /* 可选，看你习惯，右对齐数字 */
}

@media (max-width: 1200px) {

    .container {
        margin: 0;
        padding: 12px 10px 20px;
        border-radius: 0;
        max-width: 100%;
        min-height: 100vh;   /* 占满整个手机屏幕高度 */
        box-shadow: none;    /* 手机上去掉大阴影，看起来更轻 */
    }

    h1 {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .section {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }

    /* 表单一行排列在手机上太挤，改成上下排列 */
    .form-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .form-row label {
        font-size: 13px;
    }

    .form-row select,
    .form-row button {
        width: 100%;
        min-width: 0;    /* 让它适配手机宽度 */
    }

    /* 滑轨区：堆叠起来，方便手指操作 */
    .slider-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    #step-slider {
        width: 100%;
    }

    #step-input {
        width: 80px;     /* 手机上稍微放大一点也行 */
        align-self: flex-end;
    }

    /* 显示区高度稍微缩小，手机上不至于太占屏 */
    #plot-area {
        min-height: 240px;
    }

    #plots-wrapper {
        flex-direction: column;     /* 竖向排列 */
        align-items: center;        /* 在横向上居中 */
        justify-content: center;    /* 在纵向上居中 */
    }

    /* 图像在手机上可以宽一点 */
    #plots-wrapper img {
        max-width: 100%;
    }
    
    .select-wrapper {
        max-width: 100%;
    }
}