body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: fixed; /* 防止滚动偏移 */
    background-color: white;
    overflow: hidden;
    user-select: none; /* 防止文本选择 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: none; /* 防止触摸手势 */
}

canvas {
    display: block;
    cursor: crosshair;
    touch-action: none; /* 冗余但安全 */
    position: absolute;
    top: 0;
    left: 0;
}

#bottom-ui {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 15px; /* 工具栏与清除按钮之间的间距 */
    z-index: 100;
    pointer-events: none; /* 让点击穿透容器 */
}

#ui-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}

#toolbar {
    pointer-events: auto; /* 重新启用点击 */
    background: rgba(255, 255, 255, 0.9);
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 6px; /* 减小默认间距 */
}

.separator {
    width: 1px;
    height: 18px;
    background-color: #e0e0e0;
    margin: 0 4px; /* 分隔线左右间距 */
}

#clear-area {
    pointer-events: auto; /* 重新启用点击 */
    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tool-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #ccc;
    background: #f5f5f5;
    border-radius: 50%; /* 变为圆形 */
    cursor: pointer;
    font-size: 0; /* 隐藏后备文本 */
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* 用于激活指示器 */
}

/* 移除悬停效果以防止触摸设备上的粘滞状态 */
/* @media (hover: hover) {
    .tool-btn:hover {
        background: #e0e0e0;
        transform: scale(1.1);
    }
} */

.tool-btn.active {
    background: #b3e0ff;
    border-color: #007bff;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
}

.tool-btn.active::after {
    content: '';
    position: absolute;
    top: -18px; /* 上移其高度 */
    left: 50%;
    transform: translateX(-50%);
    width: 12px; /* 12px * 4/3 = 16px */
    height: 12px; /* 12px * 4/3 = 16px */
    background-color: #FFC107; /* 琥珀色/黄色以获得更好的可见性 */
    border: 1px solid rgba(0,0,0,0.1); /* 微妙的边框以增加对比度 */
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.tool-btn svg {
    pointer-events: none; /* 确保点击穿透到按钮 */
    width: 20px;
    height: 20px;
}

.color-picker {
    display: flex;
    gap: 8px;
    padding-left: 10px;
    border-left: 1px solid #ddd;
}

.color-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.2s;
}

/* @media (hover: hover) {
    .color-btn:hover {
        transform: scale(1.1);
    }
} */

.color-btn.active {
    border-color: #007bff;
    transform: scale(1.2);
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

/* 弹出菜单 */
.popup-menu {
    position: fixed; /* 也就是固定相对于视口，对于工具栏来说最简单 */
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    z-index: 200;
    min-width: 120px;
}

.popup-menu button {
    background: none;
    border: none;
    padding: 10px 16px;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    width: 100%;
    transition: background-color 0.2s;
}

/* @media (hover: hover) {
    .popup-menu button:hover {
        background-color: #f5f5f5;
        color: #0099ff;
    }
} */

/* 对话框覆盖层 */
.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.dialog-box {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    width: 320px;
    text-align: center;
}

.dialog-box h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    font-size: 18px;
}

.dialog-box input {
    width: 100%;
    padding: 10px;
    margin-bottom: 24px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    text-align: center;
}

.dialog-box input:focus {
    border-color: #0099ff;
    outline: none;
}

.dialog-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.dialog-buttons button {
    padding: 8px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
}

#btn-poly-cancel {
    background: #f5f5f5;
    color: #333;
}

#btn-poly-confirm {
    background: #0099ff;
    color: white;
}

/* @media (hover: hover) {
    #btn-poly-cancel:hover {
        background: #e0e0e0;
    }
    
    #btn-poly-confirm:hover {
        background: #007acc;
    }
} */
/* 清除按钮区域样式 */
#clear-area {
    position: absolute;
    bottom: 12px;
    left: 8px;
    z-index: 100;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

#clear-area .tool-btn {
    background: transparent;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    box-shadow: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}

#clear-area .tool-btn svg {
    width: 16px;
    height: 16px;
}

#clear-area .tool-btn:active {
    transform: scale(0.92);
}

#btn-collapse {
    padding: 0 8px;
    height: 22px;
    line-height: 20px;
    font-size: 11px;
    color: #333;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #ccc;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

#btn-collapse:active {
    transform: scale(0.96);
}

@media (max-width: 600px) {
    #clear-area {
        left: 4px;
        bottom: 10px;
    }
}

/* Site integration and responsive controls. */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #24435a; }
#grid-controls { position:fixed; top:12px; left:12px; z-index:110; display:flex; flex-wrap:wrap; align-items:center; gap:12px; max-width:calc(100vw - 96px); padding:10px 14px; background:rgba(255,255,255,.95); border:1px solid #d5e8f1; border-radius:16px; box-shadow:0 3px 14px #214d6b12; font-size:13px; }
#grid-controls a { color:#247bd0; text-decoration:none; font-weight:600; }
#grid-controls label { display:flex; align-items:center; gap:6px; }
#grid-controls input { width:76px; accent-color:#247bd0; }
#grid-controls output { min-width:30px; font-variant-numeric:tabular-nums; }
#grid-controls button { border:1px solid #bfdced; border-radius:9px; background:#eef8ff; color:#246398; padding:7px 10px; cursor:pointer; }
#grid-controls button:disabled { opacity:.45; cursor:default; }
#grid-controls details p { position:absolute; left:0; top:100%; max-width:360px; padding:15px; background:white; box-shadow:0 4px 18px #2343; border-radius:12px; line-height:1.7; }
#grid-controls summary { cursor:pointer; }
#operation-status { position:fixed; top:72px; left:18px; font-size:12px; color:#526e82; pointer-events:none; }
#bottom-ui { max-width:calc(100vw - 24px); }
#toolbar { flex-wrap:wrap; justify-content:center; max-width:calc(100vw - 110px); padding:12px; gap:8px; }
.tool-btn { width:36px; height:36px; flex-shrink:0; }
.tool-btn.active::after { width:7px; height:7px; top:-8px; }
@media(max-width:700px) {
  #grid-controls { gap:8px; padding:8px; font-size:12px; }
  #grid-controls a { width:100%; }
  #operation-status { top:126px; right:14px; }
  #toolbar { gap:5px; padding:8px; }
  .tool-btn { width:32px; height:32px; }
  .separator { margin:0; }
}