body {
    font-family: 'Segoe UI', 'Roboto', Helvetica, Arial, sans-serif;
    background-color: #f0f4f8;
    /* var(--bg-color) */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    color: #333;
    /* var(--text-color) */
}

/* ... existing code ... */

.readout {
    font-size: 1.2rem;
    /* Slightly smaller font */
    font-weight: bold;
    color: #e31b23;
    padding: 0.5rem 0.5rem;
    background: #fff0f0;
    border-radius: 10px;
    border: 1px solid #ffcccc;
    /* Ensure the box has a stable minimum width so it doesn't jump */
    min-width: 150px;
    /* Reduced from 200px */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px !important;
    /* Override default generic margin */
}

/* ... existing code ... */

.location-name {
    font-weight: bold;
    margin-top: 5px;
    font-size: 1.8rem;
    color: #2c3e50;
}



.container {
    text-align: center;
    background: white;
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

h1 {
    margin-bottom: 2rem;
    color: #2c3e50;
}

.thermometer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap: 20px; Not supported in IE11 for flex */
    user-select: none;
    -ms-user-select: none;
    /* IE specific */
}

/* Margin hack for flex gap support in IE11 */
.thermometer-container>* {
    margin-bottom: 20px;
}

.thermometer-container>*:last-child {
    margin-bottom: 0;
}

.thermometer {
    width: 200px;
    /* var(--thermometer-width) */
    height: 680px;
    /* var(--thermometer-height) */
    background: #fdfdfd;
    /* var(--stem-bg) */
    border-radius: 100px 100px 30px 30px;
    position: relative;
    box-shadow:
        inset 5px 0 10px rgba(255, 255, 255, 0.8),
        inset -5px 0 10px rgba(0, 0, 0, 0.1),
        0 8px 15px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

/* Hole at top */
.thermometer::before {
    content: '';
    width: 12px;
    height: 12px;
    background: #aab;
    border-radius: 50%;
    position: absolute;
    top: 15px;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.symbol {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    /* IE9 */
    font-size: 24px;
    font-weight: bold;
    color: #000;
    z-index: 15;
}

.stem {
    position: relative;
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* Glass Scale Tube (Visual only) */
.capillary {
    width: 50px;
    /* var(--liquid-width) - 加粗以便更清楚看到液柱 */
    height: 550px;
    background: #eef2f5;
    border-radius: 25px;
    position: relative;
    z-index: 10;
    box-shadow: inset 2px 0 5px rgba(0, 0, 0, 0.1);
    top: 20px;
    cursor: ns-resize;
    overflow: hidden;
}

/* The red liquid column */
.liquid {
    width: 100%;
    background: #e31b23;
    /* var(--liquid-color) */
    position: absolute;
    bottom: 0;
    height: 50%;
    /* transition: height 0.05s linear; Removed for instant drag response */
    border-radius: 2px 2px 0 0;
    box-shadow: inset -2px 0 3px rgba(0, 0, 0, 0.2);
}

.scale-container {
    height: 550px;
    position: absolute;
    top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 0;
    overflow: visible;
}

/* Scale container gap needs to be adjusted for new width and liquid size.
   Liquid is 50px.
   Thermometer is 200px.
   Let's keep liquid at 50px.
   Right/Left scale margin = (LiquidWidth / 2) + Gap.
   Let's keep Gap small, say 5px. Margin = 25 + 5 = 30px.
*/

.left-scale {
    right: 50%;
    margin-right: 30px;
    text-align: right;
    align-items: flex-end;
}

.right-scale {
    left: 50%;
    margin-left: 30px;
    text-align: left;
    align-items: flex-start;
}

.mark {
    height: 2px;
    background: #000;
    position: absolute;
}

.mark.major {
    width: 50px;
    /* Lengthened from 35px */
}

.mark.medium {
    width: 22px;
}

.mark.minor {
    width: 12px;
}

/* Align marks to the edge closest to liquid */
.left-scale .mark {
    right: 0;
}

.right-scale .mark {
    left: 0;
}

.mark-label {
    position: absolute;
    font-size: 20px;
    font-weight: bold;
    transform: none;
    /* Removed translateY to sit on line */
    -ms-transform: translateY(50%);
    bottom: 0;
    /* Align baseline roughly with mark */
    line-height: 1;
    /* Help vertical centering */
    padding-bottom: 2px;
    /* Slight gap above line */
}

/* Left numbers align right to sit over the line but avoid minor marks (12px) */
/* Left numbers align right to sit on the end of the long mark.
   Mark is 50px. Medium is 22px.
   We want the number to be in the space between 22px and 50px.
   Let's place it around 25px from the edge.
*/
.left-scale .mark-label {
    right: 25px;
    text-align: center;
    width: 25px;
}

/* Right numbers align left */
.right-scale .mark-label {
    left: 25px;
    text-align: center;
    width: 25px;
}

/* Bulb Area */
.bulb {
    width: 70px;
    height: 70px;
    background: #e31b23;
    /* var(--liquid-color) */
    border-radius: 50%;
    position: absolute;
    bottom: 25px;
    z-index: 5;
    box-shadow:
        inset -5px -2px 10px rgba(0, 0, 0, 0.3),
        inset 5px 2px 10px rgba(255, 255, 255, 0.4);
}

.bulb-liquid {
    position: absolute;
    top: -10px;
    left: 10px;
    /* (70 - 50) / 2 = 10 */
    width: 50px;
    height: 20px;
    background: #e31b23;
    /* var(--liquid-color) - 与液柱宽度匹配 */
}

.bulb-shine {
    position: absolute;
    width: 10px;
    height: 20px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    top: 10px;
    left: 8px;
    transform: rotate(20deg);
    -ms-transform: rotate(20deg);
}

/* Metal Guard */
.metal-guard {
    position: absolute;
    bottom: 20px;
    width: 80px;
    height: 45px;
    background: rgba(200, 200, 210, 0.4);
    border-left: 2px solid #999;
    border-right: 2px solid #999;
    border-radius: 12px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    pointer-events: none;
}

.guard-slot {
    width: 80%;
    height: 4px;
    background: linear-gradient(90deg, #888, #ccc, #888);
    /* IE Filter for gradient backup is complex, usually skip or just solid color. Solid fallback: */
    background-color: #ccc;
    border-radius: 2px;
}

/* Readout adjustments */


#temp-display {
    display: inline-block;
    width: 3ch;
    text-align: right;
    position: relative;
    cursor: pointer;
    /* font-variant-numeric: tabular-nums; Not supported in IE, fallback to monospaced font if strictly needed, but let's leave. */
}

.temp-display {
    /* Class based styling for replacement of ID */
    display: inline-block;
    width: 3ch;
    text-align: right;
    position: relative;
    cursor: pointer;
}

.temp-display.masked {
    color: transparent;
}

.temp-display.masked::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #aaa;
    border-radius: 3px;
}

/* ID based styles removal/support for legacy just in case, but focusing on classes now */
#temp-display.masked {
    color: transparent;
}

#temp-display.masked::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #aaa;
    border-radius: 3px;
    /* Optional: Add a question mark or similar to indicate hidden state */
}

.instruction {
    color: #666;
    font-size: 0.9rem;
    margin-top: 20px;
}

/* Make main container fluid */
.container {
    width: 98%;
    max-width: none;
    padding: 2rem 0;
    /* Reduce side padding to allow full width usage */
}

/* New Layout Styles for 4-column responsive grid */
.stations-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 20px;
    /* justify-content: center; Removed to let items fill space */
}

/* Definition for the item container */
.thermometer-container {
    flex: 0 0 25%;
    max-width: 25%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10px;
    /* Padding for spacing between items (IE11 gap alternative) */
}