/* 基本页面样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
}

h1 {
    color: #444;
}

/* 文件输入框样式 */
#image-input {
    margin-bottom: 20px;
}

/* 尺寸控制面板样式 */
#size-controls {
    margin-bottom: 20px;
    display: flex;
    gap: 20px;
    align-items: center;
}

#size-controls label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
}

#size-controls input {
    width: 100px;
    padding: 5px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

#size-controls input:disabled {
    background-color: #f0f0f0;
    cursor: not-allowed;
}

/* 图片容器样式 */
#image-container {
    position: relative; /* 这是让坐标提示框相对于它定位的关键 */
    border: 2px dashed #ccc;
    min-height: 100px;
    max-width: 80vw;
    display: inline-block; /* 使容器大小包裹图片 */
}

/* 显示的图片样式 */
#displayed-image {
    display: block; /* 移除图片下方的空隙 */
    cursor: crosshair; /* 更改鼠标样式为十字准线 */
}

/* 坐标提示框样式 */
#coords-display {
    display: none; /* 默认隐藏 */
    position: absolute; /* 相对于 image-container 定位 */
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    /* 让鼠标事件穿透这个 div，避免闪烁 */
    pointer-events: none; 
    white-space: nowrap;
}