* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
body {
    font-family: PingFang-Light, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #fff;
    color: #333;
    line-height: 1.5;
    padding: clamp(20.0px, 5.333333333333333vw, 40.0px);
}
.container {
    max-width: 800px;
    margin: 0 auto;
}
h1 {
    display: none;
}
h2 {
    font-family: PingFang-Bold;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}
.module {
    margin-bottom: clamp(20.0px, 5.333333333333333vw, 40.0px);
}

/* Module 1 */
.intro-box {
    background-color: #FFF4F6;
    border-radius: clamp(15.0px, 4.0vw, 30.0px);
    padding: clamp(15.0px, 4.0vw, 30.0px);
    display: flex;
    align-items: flex-start; /* Icon aligns with top (title) */
}
.intro-icon {
    width: clamp(25.0px, 6.666666666666667vw, 50.0px); /* Adjust size as needed */
    height: auto;
    flex-shrink: 0;
}
.intro-content {
    flex: 1;
}
.intro-content h2 {
    margin-bottom: clamp(4.0px, 1.0666666666666667vw, 8.0px);
    font-size: clamp(12.0px, 3.2vw, 24.0px);
    line-height: 1.4;
    font-family: PingFang-Bold;
    color: #580505;
}
.intro-content p {
    font-size: clamp(10.0px, 2.6666666666666665vw, 20.0px);
    color: #580505;
    line-height: 1.6;
}

/* Modules 2, 3, 4 */
.section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: clamp(10.0px, 2.6666666666666665vw, 20.0px);
}
.section-icon {
    width: clamp(20.0px, 5.333333333333333vw, 40.0px);
    height: auto;
    flex-shrink: 0;
}
.section-header h2 {
    font-size: clamp(14.000000000000002px, 3.7333333333333334vw, 28.0px);
}
.section-desc {
    font-size: clamp(11.0px, 2.933333333333333vw, 22.0px);
    color: #0F0F24;
    margin-bottom: clamp(10.0px, 2.6666666666666665vw, 20.0px);
    opacity: 0.8;
}

/* Table Styles */
table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #EEE3E5;
    font-size: 13px;
    table-layout: fixed; /* Ensures columns respect width */
}
th, td {
    border: 1px solid #EEE3E5;
    padding: clamp(10.0px, 2.6666666666666665vw, 20.0px) 0px;
    text-align: center;
    vertical-align: middle;
    word-break: break-all;
    font-size: clamp(10.0px, 2.6666666666666665vw, 20.0px);
}

td strong {
    font-weight: bold;
    font-family: PingFang-Bold;
}
/* Specific alignment for center column to prevent wrapping if possible, though fixed width + word-break usually handles it.
   User requested "cannot wrap" (不能换行), so we use white-space: nowrap for the middle column specifically.
*/
td:nth-child(2), th:nth-child(2) {
    white-space: nowrap;
}
td:nth-child(2) {
    color: #3D3D3D;
}
td:nth-child(1) {
    font-family: PingFang-Regular;
}
th {
    background-color: #FFF4F6;
    font-weight: normal;
    color: #333;
}
td {
    color: #0F0F24;
}
/* Column Widths */
.col-method { width: 33%; }
.col-req { width: 42%; }
.col-reward { width: 25%; }

/* Tag Style */
.text-wrapper {
    position: relative;
    display: inline-block;
}
.tag-red {
    position: absolute;
    top: -40%;
    left: 100%;
    display: inline-block;
    background-color: #FF4D4F; /* Red background */
    color: white;
    font-size: clamp(7.000000000000001px, 1.8666666666666667vw, 14.0px);
    padding: clamp(2.0px, 0.5333333333333333vw, 4.0px) clamp(4.0px, 1.0666666666666667vw, 8.0px) clamp(2.5px, 0.6666666666666666vw, 5.0px) clamp(2.5px, 0.6666666666666666vw, 5.0px);
    border-radius: 0 clamp(2.0px, 0.5333333333333333vw, 4.0px) clamp(2.0px, 0.5333333333333333vw, 4.0px) 0;
    line-height: 1.2;
    /* transform: scale(0.8); */
    transform-origin: left bottom;
    white-space: nowrap;
    margin-left: clamp(2.0px, 0.5333333333333333vw, 4.0px);
}
.tag-red::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: clamp(6.0px, 1.6vw, 12.0px) clamp(6.0px, 1.6vw, 12.0px) clamp(6.0px, 1.6vw, 12.0px) 0;
    border-color: transparent #FF4D4F transparent transparent;
}

/* Specific tweaks for text layout in cells */
.cell-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.cell-content-row {
    display: inline-block;
}