html {
    background-color: #ECF3F7;
    overflow: hidden;
}

* {
  box-sizing: border-box;
}

body {
    margin: 0;
    display: flex;
    justify-content: center;
}



#container_canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    margin: 0;
}

.moves-layout {
    position: fixed;
    top: 12px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.moves-layout p {
    margin: 3px;
    padding: 7px 15px;
    border-radius: 12px;
    background-color: rgb(240, 240, 240);
    color: #191919;
    font-size: 18px;
    font-weight: 700;
}

/* 关卡游玩：LE 计数器放在右上角返回按钮的正下方（具体位置由脚本按返回按钮算） */
body.mode-level .moves-layout {
    top: 80px;
    left: auto;
    right: 10px;
    transform: none;
}



.thumbnail {
    position: absolute;
    top: 2vh;
    left: 2vw;
    z-index: 5;
    width: 40vw;
    max-width: 300px;
    aspect-ratio: 4 / 3;
    border-radius: 25px;
    cursor: pointer;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
    background-color: white;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* 图片在上、目标与达成情况在下：内容靠上排，不用竖直居中（否则图片上下都会留空档） */
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    padding: 10px;
}

.thumbnail-middle {
    /* 图片区占满卡片（展开时被 .thumbnail.open 压到一半）；同时作为左上角小窗的定位基准 */
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
}

/* 缩略图收起时：目标步数做成小窗浮在图片左上角（未达成的黑、已达成的金色） */
.level-goal-badge {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 2;
    display: flex;
    gap: 0.45em;
    padding: 0.16em 0.6em;
    border-radius: 0.6em;
    background-color: rgba(255, 255, 255, 0.86);
    /* 跟着屏幕放大缩小（缩略图桌面是 40vw 一档，这里同源）：宽屏上小窗不再显得特别小 */
    font-size: clamp(13px, 1.5vw, 22px);
    font-weight: bold;
    color: #191919;
    pointer-events: none;
}

/* 目标步数里已达成的那个（L 或 E）变金色：小窗与正文那行共用 */
.goal-part.active {
    color: #FFD200;
}

/* 作者样式里的 display 会盖掉浏览器默认的 [hidden]，这里补回来 */
.level-goal-badge[hidden] {
    display: none;
}

/* 卡片展开后步数已经写在正文那一行里，小窗收起来 */
.thumbnail.open .level-goal-badge {
    display: none;
}

/* 达成情况（完成 / L / E / V 四个勾）：展开后排在同一行的最右边 */
.level-status {
    position: static;
    flex: 0 1 auto;
    width: auto;
    /* 靠右：不要紧贴着前面的「目标：nL nE」 */
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 0;
    font-size: 14px;
    color: #191919;
    white-space: nowrap;
    pointer-events: none;
}

.level-status > * {
    flex-shrink: 0;
}

.level-tick {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: #a0a0a0;
    opacity: 1;
    transition: all 0.3s ease;
}

/* 作者样式里的 display 会盖掉浏览器默认的 [hidden]，这里补回来，
   否则未标目标的 L / E 勾、单解关卡的 V 勾都会一直显示 */
.level-tick[hidden],
.complete-item[hidden] {
    display: none;
}

.level-tick.active {
    color: #FFD200;
    opacity: 1;
}

.thumbnail.open .thumbnail-middle {
    max-height: 50%;
}

#thumbnail-picture {
    /* 缩略图填满整个方框（比例不符时裁掉一点边缘，不拉伸） */
    object-fit: cover;
    background-color: #f7f7f7;
    width: 100%;
    height: 100%;
}

/* 展开后的示意图可点开全屏查看 */
.thumbnail.open #thumbnail-picture {
    cursor: zoom-in;
}

.thumbnail-zoom {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 4vw;
    background-color: rgba(0, 0, 0, 0.75);
    cursor: zoom-out;
}

.thumbnail-zoom img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.thumbnail.open {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    aspect-ratio: 4 / 5;
    max-width: 500px;
    cursor: auto;
    justify-content: start;
}

.masks {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 4;
    display: none;
    background-color: rgba(0, 0, 0, 0.5);
}

.hidden_inf {
    display: none;
}

.thumbnail-title {
    width: 100%;
    flex-direction: column;
    align-items: center;
}

.thumbnail-body {
    flex-grow: 1;
    width: 100%;
    flex-direction: column-reverse;
    align-items: center;
    min-height: 0; /* 关键！允许元素收缩到小于内容高度 */
    /* 滚轮只给正文区（#body_inf 那一块）：这一层要是自己滚，
       「目标：nL nE」那一行就会跟着内容一起滚走，而不是常驻底部 */
    overflow: hidden;
    padding-inline: 16px;
}

.full-width {
    width: 100%;
}

.thumbnail-title-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.thumbnail-body-container {
    margin: 5px 0 0;
    width: 100%;
    display: block;
    flex: 1 1 auto; /* 占满剩余空间 */
    min-height: 0; /* 能收缩：否则内容一多就把底部那行挤出卡片 */
    overflow-y: auto;
}

textarea {
    resize: none;
    width: 100%;
    height: 100%;
}

.thumbnail-bottom-container {
    width: 100%;
    display: flex;
    gap: 5px;
    align-items: center;
}

#thumbnail-title-switch {
    width: 50px;
    height: 50px;
    background-color: rgb(240, 240, 240);
    border-radius: 5px;
    cursor: pointer;
    border: none; /* 去边框 */
    transition: all 0.5s ease;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* 默认值陷阱！ */
}

#thumbnail-title-switch-hidden {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    opacity: 0; 
    pointer-events: none;
}

#thumbnail-title-switch.active .svg-icon {
    stroke: #0fd869;
}

#thumbnail-title-button {
    width: 50px;
    height: 50px;
    cursor: pointer;
    border: none; /* 去边框 */
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* 默认值陷阱！ */
    background-color: transparent;
}

.thumbnail-button-container {
    position: absolute;
    right: 5px;
}

.thumbnail-button {
    width: 50px;
    height: 50px;
    background-color: rgb(240, 240, 240);
    border-radius: 5px;
    cursor: pointer;
    border: none; /* 去边框 */
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* 默认值陷阱！ */
}

.switch-flex {
    display: none;
    flex-direction: column;
    gap: 5px;
}

.switch_input {
    display: none;
}

#title_input,
#title_inf {
    font-size: 24;
    font-weight: bold;
}

#bottom_input,
#bottom_inf {
    font-size: 18;
    /* 目标步数：未达成的黑、已达成的金（达成情况由 .goal-part.active 上色） */
    color: #191919;
}

#body_inf {
    white-space: pre-wrap; /* 或者 pre, pre-line */
}



#container_more {
    position: absolute;
    top: 0;
    right: 0;
    /* 高于缩略图（z-index: 5）：窄屏上缩略图不能压住撤销 / 重做按钮 */
    z-index: 8;
    display: flex;
    justify-content: end;
    flex-wrap: wrap;
    margin: 0;
    background-color: transparent;
    gap: 5px;
    padding: 10px;
}

/* 更多栏按钮的弹层菜单 */
.board-popup {
    position: fixed;
    z-index: 6;
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    background-color: rgb(220, 220, 225);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(25, 25, 25, 0.18);
}

.board-popup.open {
    display: flex;
}

.popup-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border: none;
    border-radius: 5px;
    background-color: rgb(240, 240, 240);
    color: #191919;
    font: inherit;
    font-size: 14px;
    white-space: nowrap;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.5s ease;
}

.popup-item:hover {
    background-color: #fef7e5;
}

.popup-item .svg-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

/* 点击落在按钮自身，保证移动端信息栏能取到 data-action */
.popup-item span {
    pointer-events: none;
}

/* 样式弹层：颜色 / 粗细 / 标签 */
.style-popup {
    min-width: 200px;
}

.style-popup-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.style-popup-title {
    width: 34px;
    flex-shrink: 0;
    color: rgb(90, 90, 95);
    font-size: 13px;
}

.style-popup-color {
    flex: 1;
    height: 34px;
    border: 2px solid rgb(240, 240, 240);
    border-radius: 5px;
    cursor: pointer;
}

.style-popup-option {
    flex: 1;
    min-height: 34px;
    border: none;
    border-radius: 5px;
    background-color: rgb(240, 240, 240);
    color: #191919;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.5s ease;
}

.style-popup-option:hover {
    background-color: #fef7e5;
}

.style-popup-option.active {
    background-color: #d7e8eb;
    outline: 2px solid #277f96;
    outline-offset: -2px;
}

/* 标签开关：滑块式，开（右侧圆点亮）表示显示标签，关表示不显示 */
.style-popup-switch {
    max-width: 50%;
    position: relative;
    flex: 1;
    height: 34px;
    border: none;
    border-radius: 34px;
    background-color: rgb(240, 240, 240);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.style-popup-switch:hover {
    background-color: #fef7e5;
}

.style-popup-switch-knob {
    position: absolute;
    top: 50%;
    left: 5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgb(170, 170, 175);
    transform: translateY(-50%);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}

.style-popup-switch.active {
    background-color: #d7e8eb;
    outline: 2px solid #277f96;
    outline-offset: -2px;
}

.style-popup-switch.active:hover {
    background-color: #cfe3e7;
}

.style-popup-switch.active .style-popup-switch-knob {
    left: calc(100% - 29px);
    background-color: #277f96;
}

/* 取色输入：藏在视口外但保留在文档中，避免取色过程中被移除导致 change 事件丢失 */
.style-color-input {
    position: fixed;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* gmt 代码窗口 */
.board-dialog-mask {
    position: fixed;
    inset: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.45);
}

.board-dialog {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(640px, 88vw);
    padding: 16px;
    border-radius: 12px;
    background-color: rgb(220, 220, 225);
    color: #191919;
}

.board-dialog strong {
    font-size: 16px;
}

/* 顶部提示条：用于「当前不可用」这类说明，不用点确认；样式与其他弹层保持一致 */
.board-toast {
    position: fixed;
    top: 14px;
    left: 50%;
    z-index: 20;
    max-width: min(560px, 88vw);
    padding: 12px 20px;
    border-radius: 12px;
    background-color: rgb(220, 220, 225);
    color: #191919;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
    transform: translate(-50%, -180%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
    pointer-events: none;
}

.board-toast.trans {
    transform: translate(-50%, 0);
    opacity: 1;
}

/* 弹层里的单行输入（替代浏览器自带的 prompt） */
.board-dialog-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #b9bcc4;
    border-radius: 8px;
    background-color: #fff;
    color: #191919;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
}

.board-dialog-input:focus {
    border-color: #277f96;
    box-shadow: 0 0 0 3px rgba(39, 127, 150, 0.12);
}

/* 弹层里不可用的项 */
.popup-item.disable {
    opacity: 0.45;
    cursor: default;
}

.popup-item.disable:hover {
    background-color: transparent;
}

/* 确认框 */
.board-dialog-confirm {
    width: min(380px, 88vw);
}

.board-dialog-confirm .board-dialog-actions {
    justify-content: flex-end;
}

/* 帮助窗口 */
.help-dialog {
    width: min(560px, 90vw);
    max-height: 80vh;
    overflow: auto;
}

.help-body p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.7;
    color: #2b2b2b;
}

/* 答案图窗口 */
.answer-dialog {
    width: min(860px, 92vw);
    max-height: 86vh;
    overflow: auto;
}

.answer-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.answer-figure {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 8px;
    border-radius: 10px;
    background-color: rgb(240, 240, 243);
}

.answer-figure img {
    width: 100%;
    max-height: 240px;
    object-fit: contain;
    border-radius: 6px;
    background-color: #fff;
    cursor: zoom-in;
}

.answer-figure figcaption {
    font-size: 12px;
    color: #4a4a4a;
    text-align: center;
}

.answer-figure.zoom {
    grid-column: 1 / -1;
}

.answer-figure.zoom img {
    max-height: none;
    cursor: zoom-out;
}

.board-dialog-code {
    width: 100%;
    height: min(50vh, 360px);
    resize: vertical;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background-color: rgb(248, 248, 248);
    color: #191919;
    font: 13px/1.6 Consolas, "Courier New", monospace;
}

.board-dialog-hint {
    margin: 0;
    min-height: 16px;
    color: #c0392b;
    font-size: 13px;
}

.board-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.board-dialog-actions button {
    min-height: 32px;
    padding: 4px 14px;
    border: none;
    border-radius: 5px;
    background-color: rgb(240, 240, 240);
    color: #191919;
    font: inherit;
    cursor: pointer;
    transition: background-color 0.5s ease;
}

.board-dialog-actions button:hover {
    background-color: #fef7e5;
}

.solver-panel {
    position: fixed;
    top: 100px;
    right: 12px;
    z-index: 4;
    display: grid;
    gap: 10px;
    width: 210px;
    /* 解多时面板会很长，限高后自己滚，免得出画面 */
    max-height: calc(100vh - 330px);
    overflow-y: auto;
    /* 给滚动条常驻预留一条槽位：滚动条出现 / 消失时内容宽度不再变，也就不会压住内容 */
    scrollbar-gutter: stable;
    padding: 10px 6px 10px 10px;
    border-radius: 10px;
    background-color: rgb(220, 220, 225);
    color: #191919;
}
.solver-panel label { display: grid; gap: 5px; }

/* 求解参数：电脑端一列一项（面板够宽，两两并排反而挤） */
.solver-field-row { display: grid; gap: 10px; }
.solver-panel input, .solver-panel select, .solver-panel button { width: 100%; min-height: 32px; border: none; border-radius: 5px; background-color: rgb(240, 240, 240); padding: 4px 7px; font: inherit; }
.solver-panel button { cursor: pointer; }
.solver-panel output { color: rgb(128, 128, 255); font-size: 14px; }

/* 两个侧面板的滚动条做细一点（顺带把浮动的覆盖式滚动条换成占位的经典滚动条） */
.mark-panel::-webkit-scrollbar,
.solver-panel::-webkit-scrollbar {
    width: 8px;
}

.mark-panel::-webkit-scrollbar-thumb,
.solver-panel::-webkit-scrollbar-thumb {
    background-color: rgb(165, 165, 175);
    border-radius: 4px;
}

.mark-panel::-webkit-scrollbar-track,
.solver-panel::-webkit-scrollbar-track {
    background-color: transparent;
}
/* 开始求解：绿调；搜索进行中换成下面红调的「停止求解」，两个状态一眼可辨 */
.solver-panel #geb-solver-run { background-color: rgb(232, 245, 233); box-shadow: inset 0 0 0 2px #2e7d32; }
.solver-panel #geb-solver-run.running { background-color: rgb(251, 234, 230); box-shadow: inset 0 0 0 2px #d84b35; }
/* 求解结果列表：一行一个解，左边选解、右边看文字步骤（当前画出的那个用解法色标出来） */
.solver-solution-list { display: grid; gap: 6px; }
.solver-solution-list:empty { display: none; }
.solver-solution-row { display: flex; gap: 5px; }
.solver-solution-row .solver-solution-pick { flex: 1 1 auto; text-align: left; }
.solver-solution-row .solver-solution-text { flex: 0 0 auto; width: auto; font-size: 12px; padding: 4px 6px; }
.solver-solution-row .solver-solution-pick.active { background-color: rgb(255, 215, 245); box-shadow: inset 0 0 0 2px #ff00ff; }
/* 逐步查看解法：上一步 / 当前步数 / 下一步 */
.solver-step-row { display: flex; align-items: center; gap: 5px; }
.solver-step-row button { width: auto; flex: 0 0 auto; font-size: 12px; padding: 4px 6px; }
.solver-step-row span { flex: 1 1 auto; text-align: center; font-size: 12px; color: #191919; }
/* 文字步骤弹框：等宽字体、可滚动 */
.board-dialog-report { margin: 0; max-height: 60vh; overflow: auto; padding: 10px; border-radius: 8px; background-color: rgb(240, 240, 240); font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }

/* 文字步骤弹层：要压在上拉栏（手机端 z-index:12）之上 */
.board-dialog-mask.board-dialog-report-mask {
    z-index: 14;
}

.mark-panel {
    position: fixed;
    top: 84px;
    left: 12px;
    z-index: 4;
    display: grid;
    gap: 8px;
    width: 190px;
    max-height: 42vh;
    /* 只纵向滚（横向滚动条会盖住最后一行），并给滚动条留常驻槽位 */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    padding: 10px 6px 10px 10px;
    border-radius: 10px;
    background-color: rgb(220, 220, 225);
    color: #191919;
}
.mark-panel strong { font-size: 15px; }
.mark-panel b { color: rgb(128, 128, 255); }
.mark-panel ul { margin: 4px 0 0; padding-left: 20px; }
.mark-panel li.empty { color: rgb(128, 128, 128); list-style: none; }
/* 已标记对象：分组可折叠，所求里每个解再嵌一层（判定 / 显示） */
.mark-panel .mark-fold { margin: 2px 0; }
.mark-panel .mark-fold > summary {
    cursor: pointer;
    font-weight: 600;
    color: rgb(128, 128, 255);
    outline: none;
}
.mark-panel .mark-fold > summary::marker { color: rgb(128, 128, 128); }
.mark-panel .mark-fold .mark-fold { margin-left: 4px; }
.mark-panel .mark-fold .mark-fold > summary { font-weight: 500; }
.mark-panel .mark-fold-active { color: #0a8f4d; }
.mark-panel .mark-item b { font-weight: 500; }
/* 名称后面跟一条解析式：点给坐标、直线给 y=kx+b、圆给标准式。
   与名称同一行显示（中间留一点距离），不换行 —— 太长的式子直接在行尾省略 */
.mark-panel .mark-name { margin-right: 8px; }
.mark-panel .mark-eq {
    display: inline;
    font-size: 11px;
    color: rgb(110, 110, 120);
}
.mark-panel li:not(.empty) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 解的编号按钮（1 / 2 / + / −）：数字用 SVG 文本画，选中变绿 */
.mark-solution .mark-solution-text {
    fill: #4a4a4a;
    font-size: 110px;
    font-weight: 600;
}
.mark-solution.active .mark-solution-text { fill: #0fd869; }



/* 工具项样式 */
.svg-button {
    width: 70px;
    height: 70px;
    background-color: rgb(240, 240, 240);
    border-radius: 5px;
    cursor: pointer;
    border: none; /* 去边框 */
    transition: background-color 0.5s ease, 
        width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* 默认值陷阱！ */
}

.svg-button:hover {
    background-color: #fef7e5; /* 悬停效果 */
    width: 100px;
}

/* 工具栏里的分组分隔线（例如通用档里样式刷之后）：一条竖线，把功能性质不同的工具分开 */
.tool-separator {
    width: 2px;
    height: 56px;
    margin: 0 8px;
    border-radius: 1px;
    background-color: rgb(190, 190, 190);
    flex-shrink: 0;
    align-self: center;
}

.svg-icon {
    width: 100%;
    height: 100%;
    transition: stroke 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    stroke: rgb(128, 128, 255);
}

.svg-item {
    pointer-events: none;
}

.svg-button.active .svg-icon {
    stroke: #0fd869;
}

/* 分类按钮右下角的「当前高级工具」小角标（构造档）：
   分类本身的图标固定不动，当前选中的那个工具用小图标挂在右下角 */
.menu-tool-item {
    position: relative;
}

.menu-tool-corner {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background-color: rgba(245, 245, 245, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
}

.menu-tool-corner.show {
    display: flex;
}

/* 写在 .svg-button.active 之后：构造档选中时角标也保持深色，不被分类的绿色盖掉 */
#menu_toolbar .menu-tool-corner .svg-icon {
    width: 24px;
    height: 24px;
    stroke: #191919;
}

/* 顶部菜单里的标记按钮：给定图标黑、所求图标金；
   选中时图标保持标记色，只加选中的高亮框（不换成绿色的 svg） */
#menu_toolbar .svg-button.mark-initial .svg-icon {
    stroke: #191919;
}

#menu_toolbar .svg-button.mark-result .svg-icon {
    stroke: #ffd700;
}

/* 清除标记：红色（它是「删掉所有标记」这类破坏性操作，和给定 / 所求的标记色区分开） */
#menu_toolbar .svg-button.mark-clear .svg-icon {
    stroke: #d84b35;
}

#menu_toolbar .svg-button.mark-clear:hover {
    background-color: #fbeae6;
}

#menu_toolbar .svg-button.mark-clear.disable .svg-icon {
    stroke: rgb(128, 128, 128);
}

.svg-button.mark-initial.active,
.svg-button.mark-result.active {
    background-color: #d7e8eb;
    outline: 2px solid #277f96;
    outline-offset: -2px;
}

/* 标记工具的选项（放在 #container_toolbar 里）：图标一直是各自标记的颜色，选中时只加深绿色边框 */
#container_toolbar .mark-choice[data-action="mark-initial"] .svg-icon,
#container_toolbar .mark-choice[data-action="mark-named"] .svg-icon {
    stroke: #191919;
}

#container_toolbar .mark-choice[data-action="mark-movepoints"] .svg-icon {
    stroke: #0099ff;
}

#container_toolbar .mark-choice[data-action="mark-result"] .svg-icon {
    stroke: #ffd700;
}

#container_toolbar .mark-choice[data-action="mark-result-shown"] .svg-icon,
#container_toolbar .mark-choice[data-action="mark-explore"] .svg-icon {
    stroke: #ffd700;
}

#container_toolbar .mark-choice.active {
    background-color: #d7e8eb;
    outline: 2px solid #277f96;
    outline-offset: -2px;
}

.floating-svg-switch-button {
    width: 60px;
    height: 60px;
    background-color: rgb(240, 240, 240);
    border-radius: 5px;
    cursor: pointer;
    border: none; /* 去边框 */
    transition: background-color 0.5s ease;
    flex-shrink: 0;
    box-sizing: border-box; /* 包含内边距和边框在内的宽度计算 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* 默认值陷阱！ */
}

.floating-svg-switch-button:hover {
    background-color: #fef7e5; /* 悬停效果 */
}

.floating-svg-switch-button.active .svg-icon {
    stroke: #0fd869;
}

/* 非激活按钮的SVG保持原色 */
.floating-svg-switch-button:not(.active) .svg-icon {
    stroke: rgb(128, 128, 255);
}

.floating-svg-button {
    width: 60px;
    height: 60px;
    background-color: rgb(240, 240, 240);
    border-radius: 5px;
    cursor: pointer;
    border: none; /* 去边框 */
    transition: background-color 0.5s ease;
    flex-shrink: 0;
    box-sizing: border-box; /* 包含内边距和边框在内的宽度计算 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* 默认值陷阱！ */
}

.floating-svg-button:hover {
    background-color: #fef7e5; /* 悬停效果 */
}

.floating-svg-button.disable {
    background-color: rgb(100, 100, 100);
    cursor: default;
}

.svg-icon.disable {
    stroke: rgb(128, 128, 128);
}

.floating-svg-switch-button .svg-icon {
    stroke: rgb(128, 128, 255);
}

.floating-svg-choice {
    width: 60px;
    height: 60px;
    background-color: rgb(240, 240, 240);
    border-radius: 5px;
    border: none; /* 去边框 */
    flex-shrink: 0;
    box-sizing: border-box; /* 包含内边距和边框在内的宽度计算 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* 默认值陷阱！ */
}

.floating-svg-choice .svg-icon {
    stroke: rgb(128, 128, 255);
}

.floating-svg-choice.disable {
    background-color: rgb(128, 128, 128);
}

.floating-svg-choice.disable .svg-icon {
    stroke: rgb(100, 100, 100);
}


.more-button-item {
    width: 60px;
    height: 60px;
    background-color: rgb(240, 240, 240);
    border-radius: 5px;
    cursor: pointer;
    border: none; /* 去边框 */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* 默认值陷阱！ */
    transition: background-color 0.5s ease;
}

.board-mode-button {
    color: #191919;
}

.board-mode-button:hover {
    background-color: #fef7e5;
}

.board-mode-button.active {
    background-color: #d7e8eb;
    outline: 2px solid #277f96;
    outline-offset: -2px;
}

/* 探索模式按钮：与工具栏保持一致，开启时图标变绿 */
.board-mode-button.active[data-action="explore"] {
    background-color: rgb(240, 240, 240);
    outline: none;
}

.board-mode-button.active[data-action="explore"] .svg-icon {
    stroke: #0fd869;
}

.more-button-item.disable {
    background-color: rgb(100, 100, 100);
    cursor: default;
}

.more-button-item.disable .svg-icon {
    stroke: rgb(128, 128, 128);
}


.transparent {
    background-color: transparent;
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 5px;
}



.overview-item {
    width: 70px;
    background-color: rgb(240, 240, 240);
    border-radius: 10px;
    cursor: pointer;
    padding: 0; /* 默认值陷阱！ */
}

.overview-item.select {
    border: 3px solid;
}

.overview-item-text {
    display: flex;
    gap: 5px;
    pointer-events: none;
}

.panel {
    bottom: 5vh;
    width: 70vw;
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
}

.panel-container {
    background-color: rgb(220, 220, 225);
    padding: 5px 10px;
    border-radius: 15px;
    width: 105%;
    margin-left: -2.5%;
    pointer-events: auto;
}

.column-direction {
    display: flex;
    flex-direction: column;
}

.row-direction {
    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 5px;
    white-space: nowrap;
    scroll-behavior: smooth; /* 平滑滚动 */
    -webkit-overflow-scrolling: touch; /* 移动端惯性滚动 */
}

/* 隐藏滚动条以保持简洁 */
.row-direction::-webkit-scrollbar {
    display: none;
}

/* 「几何元素一览」的档位下拉：默认的浏览器样式在这个面板里太突兀，
   改成与面板同色的小胶囊 + 自绘箭头（全/隐藏两档一眼能看清当前选的是哪个） */
#overview-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 7px 30px 7px 12px;
    border: 1px solid rgb(200, 200, 206);
    border-radius: 8px;
    background-color: rgb(232, 232, 236);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2368757a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 10px 6px;
    color: #191919;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

#overview-select:hover {
    background-color: rgb(224, 224, 229);
    border-color: #277f96;
}

#overview-select:focus-visible {
    outline: 2px solid #277f96;
    outline-offset: 1px;
}

#overview-select option {
    color: #191919;
    background-color: #fff;
}

#container_overview {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); /* 关键修改 */
    width: 100%;
    max-height: 30vh;
    overflow-y: auto;       /* 垂直滚动 */
}


.floating-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 5vw;
    pointer-events: none;
}

#floating-bar-buttons {
    max-width: 80vw;
    pointer-events: auto;
}

#floating-bar-elements {
    display: flex;
    flex-direction: row-reverse;
    max-width: 80vw;
    pointer-events: auto;
}

#mobile-information {
    width: 100%;
    background-color: rgba(225, 225, 225, 0.9);
    border-radius: 5px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#mobile-information.active {
    visibility: visible;
    opacity: 1;
}

.inf-title {
    font-size: 30px;
    margin: 0;
}

.inf-context {
    font-size: 20px;
    margin: 0;
}



.item-container {
    display: none; /* flex */
    flex-direction: column;
    width: 100%;
    max-height: 40vh;
    overflow-y: auto;
    background-color: rgb(220, 220, 225);
    pointer-events: all;
    border-radius: 10px;
    gap: 5px;
}

.item-container-title {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    width: 100%;
    background-color: rgb(200, 200, 205);
    border-radius: 10px;
    padding: 5px;
    gap: 5px;
}

.item-container-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.item-container-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* 三列等高（行里最高的一列决定），内容从顶部排 */
    align-self: stretch;
    gap: 6px;
    height: auto;
    min-height: 0;
    padding: 8px;
    box-sizing: border-box;
    background-color: rgb(210, 210, 215);
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

/* 元素一览详情的样式控件单独占一层：重画时只清自己这里，
   不会把同一列里别的行（例如「有效性」）一起清掉 */
.style-inline-holder {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 4px;
}

/* 只读展示的样式值（游玩界面）：占满剩余宽度、与输入框一个观感 */
.style-inline-value {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    border-radius: 8px;
    background-color: rgb(235, 235, 238);
    color: rgb(90, 90, 95);
    font-size: 14px;
    box-sizing: border-box;
}

/* 详情面板里“跟着上面几行走”的信息块（基底 / 上层构造 / 二维坐标）：
   不再是独立灰方块，直接并进所在列，省下内边距与间距 */
.item-container-plain {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 2px;
}

#geometry-item input:not([type="checkbox"]):not([type="color"]) {
    min-width: 64px;
    padding: 6px 8px;
    border: 1px solid #b9bcc4;
    border-radius: 8px;
    background-color: #fff;
    color: #191919;
    font: inherit;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}

#geometry-item input:not([type="checkbox"]):not([type="color"]):focus {
    border-color: #277f96;
    box-shadow: 0 0 0 3px rgba(39, 127, 150, 0.12);
}

#geometry-item input:not([type="checkbox"]):not([type="color"]):disabled {
    background-color: rgb(235, 235, 238);
    color: rgb(120, 120, 126);
}

/* 只读的结果输入框（id / 基底 / 上层构造 / 有效性）：观感同置灰，但文字能选中复制 */
#geometry-item input[readonly] {
    background-color: rgb(235, 235, 238);
    color: rgb(90, 90, 95);
}

/* 名字输入框后面的「id」连同它的值贴到最右 */
#geometry-item .item-id-value {
    margin-left: auto;
}

/* id 的值：窄一点的不可编辑输入框 */
#geometry-item .item-id-input {
    width: 72px;
    flex: 0 0 auto;
}

#geometry-item p {
    margin: 2px 0;
}

#geometry-item .item-container-row {
    padding: 1px 2px;
    gap: 6px;
}

#geometry-item .item-container-column {
    gap: 4px;
    padding: 6px;
}

#geometry-item .item-container-plain {
    gap: 1px;
}

.item-container-button {
    width: 50px;
    height: 50px;
    background-color: rgb(240, 240, 240);
    border-radius: 5px;
    cursor: pointer;
    border: none; /* 去边框 */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* 默认值陷阱！ */
}



#storage-item-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 40vh;
    overflow-y: auto;
}

.head-item {
    display: flex;
    align-items: center;
    gap: 5px;
    position: sticky;
    top: 0;
    width: 100%;
}

.record-item {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    background-color: rgb(230, 230, 230);
}

.storage-panel-button {
    width: 50px;
    height: 50px;
    background-color: rgb(240, 240, 240);
    border-radius: 5px;
    cursor: pointer;
    border: none; /* 去边框 */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* 默认值陷阱！ */
}

.storage-panel-button.active .svg-icon {
    stroke: #0fd869;
}

.record-item-index-style {
    background-color: rgb(200, 200, 200);
}



.complete-layout {
    position: fixed;
    /* 宽度随屏幕自动算：宽屏 300px，窄屏留出两侧边距 */
    width: min(300px, calc(100vw - 24px));
    max-width: 300px;
    box-sizing: border-box;
    top: auto;
    bottom: 96px;
    left: auto;
    right: 12px;
    transform: translateX(calc(100% + 24px));
    background-color: rgb(250, 250, 250);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0; /* 默认值陷阱！ */
    /* 只过渡 transform：竖直位置（bottom）是按浮动栏现算的，跟着一起过渡会变成斜着滑进来 */
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}

.complete-layout.trans {
    transform: translateX(0);
}

.complete-title {
    font-size: 30px;
    width: 100%;
    text-align: center;
}

.complete-body {
    font-size: 50px;
    width: 100%;
    text-align: center;
    color: #FFD200;
    background-color: #404040;
    padding: 6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    overflow: hidden;
}

.complete-body > * {
    flex-shrink: 0;
}

/* 通关界面里的步数与目标对比 */
.complete-steps {
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    background-color: #404040;
    color: #f0f0f0;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-align: center;
}

/* 通关界面上的勾：完成 / L / E / V，未点亮的勾是灰的 */
.complete-item {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0 8px;
    font-size: 22px;
    font-weight: bold;
    color: rgb(140, 140, 140);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.complete-item .complete-check {
    font-size: 22px;
}

.complete-item.active {
    color: #FFD200;
    opacity: 1;
}





/* 画布左侧的两个圆形按钮（点开各自的底部上拉栏）：只在手机端出现，
   桌面端仍旧用浮在画布上的面板（见文件末尾的 @media） */
.side-buttons {
    display: none;
}

.side-button {
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background-color: rgb(220, 220, 225);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* 默认值陷阱！ */
    cursor: pointer;
}

.side-button .svg-icon {
    width: 26px;
    height: 26px;
    stroke: #191919;
}

.side-button.active {
    background-color: #d7e8eb;
    outline: 2px solid #277f96;
    outline-offset: -2px;
}

.panel-sheet-close {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background-color: rgb(214, 214, 220);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

/* 上拉栏外壳：桌面端让它彻底「透明」 —— 标题栏不显示、外壳不参与布局，
   里面的面板照旧按自己的 fixed 定位浮在画布上（上拉栏的样子见文件末尾的 @media） */
.panel-sheet {
    display: block;
}

.panel-sheet-head {
    display: none;
}

.panel-sheet-body {
    display: contents;
}

/* vConsole 默认停在右下角，会压住工具栏 —— 挪到右上角、工具栏下面那片空位
   （游玩页 L/E 计数器待的地方；制题器 / 求解器的工具栏在上面，所以再往下让开一行）。
   四个偏移量都要 !important：vConsole 自己也会改这几个值（不盖住的话按钮会被拉成一大块） */
#__vconsole .vc-switch {
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    width: auto;
    /* 落在菜单栏（.board-popup，z-index:6）下层，别挡住弹出的菜单 */
    z-index: 5 !important;
}

#__vconsole .vc-panel {
    z-index: 5 !important;
}

/* 响应式设计：手机端调整 */
@media (max-width: 768px) {
    .moves-layout {
        top: 50px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
    .svg-button {
        width: 45px;
        height: 45px;
    }
    .svg-button:hover {
        width: 70px;
    }
    .floating-svg-switch-button {
        width: 40px;
        height: 40px;
    }
    .floating-svg-button {
        width: 40px;
        height: 40px;
    }
    .floating-svg-choice {
        width: 40px;
        height: 40px;
    }

    .more-button-item {
        width: 40px;
        height: 40px;
    }
    .panel {
        width: 90vw;
        bottom: 2vh;
        gap: 5px;
    }
    #container_overview {
        max-height: 25vh;
        grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
        gap: 0;
    }
    .overview-item {
        width: 50px;
    }
    #thumbnail-title-switch {
        width: 40px;
        height: 40px;
    }
    #thumbnail-title-button {
        width: 40px;
        height: 40px;
    }
    .thumbnail-button {
        width: 40px;
        height: 40px;
    }
    .item-container-button {
        width: 40px;
        height: 40px;
    }
    .storage-panel-button {
        width: 40px;
        height: 40px;
    }
    .moves-layout p {
        font-size: 14px;
        padding: 5px 10px;
    }
    /* 工具栏里的分组竖线跟着按钮一起缩，否则容器比按钮高一点 */
    .tool-separator {
        height: 45px;
        margin: 0 6px;
    }
    /* 构造档按钮右下角的小角标跟着缩 */
    .menu-tool-corner {
        width: 22px;
        height: 22px;
        border-radius: 4px;
    }
    #menu_toolbar .menu-tool-corner .svg-icon {
        width: 17px;
        height: 17px;
    }
    /* 缩略图挪到右上角按钮下面一排，既不压住撤销 / 重做，也留得住宽度 */
    .thumbnail {
        top: 56px;
        left: 6px;
        width: 46vw;
        max-width: 200px;
    }
    .level-status {
        font-size: 10px;
        gap: 3px;
    }
    /* 通关界面：字号与四个勾一起缩，窄屏排一行不换行 */
    .complete-title {
        font-size: 22px;
    }
    .complete-item {
        font-size: 18px;
        margin: 0 5px;
    }
    .complete-steps {
        font-size: 12px;
    }
    /* 手机端：设置面板收进「左上角两个圆形按钮 + 底部上拉栏」（桌面端仍旧浮在画布上） */
    .side-buttons {
        display: flex;
        position: fixed;
        top: 62px;
        left: 8px;
        z-index: 6;
        flex-direction: column;
        gap: 6px;
    }
    .side-button {
        width: 40px;
        height: 40px;
    }
    .side-button .svg-icon {
        width: 22px;
        height: 22px;
    }
    /* 底部上拉栏：默认收起在屏幕外，加 .open 才拉起来 */
    .panel-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 12;
        max-height: 72vh;
        display: flex;
        flex-direction: column;
        background-color: rgb(232, 232, 236);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18);
        transform: translateY(105%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }
    .panel-sheet.open {
        transform: translateY(0);
        pointer-events: auto;
    }
    /* 半展开：只留标题栏那一小截，能看见画布（抓住标题栏拖到任意高度，见 board-tools.js）
       用「高度」而不是位移：面板始终贴着屏幕底边，里面的滚动条才能一直滚到最下面的内容 */
    .panel-sheet.peek {
        transform: translateY(0);
        height: 96px;
        pointer-events: auto;
    }
    /* 手机端上拉栏里空间窄：求解参数两两并排省高度 */
    .panel-sheet .solver-field-row {
        grid-template-columns: 1fr 1fr;
    }
    .panel-sheet-head {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px 6px;
        /* 标题栏就是拖动上拉栏的手柄 */
        cursor: grab;
        touch-action: none;
    }
    .panel-sheet-body {
        display: block;
        padding: 0 12px 14px;
        overflow-y: auto;
        /* 面板被拖矮时这一块要跟着变矮并自己滚，底部内容才滚得进屏幕 */
        flex: 1 1 auto;
        min-height: 0;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .panel-sheet .mark-panel,
    .panel-sheet .solver-panel {
        position: static;
        top: auto;
        right: auto;
        left: auto;
        width: 100%;
        max-height: none;
        padding: 0;
        background: none;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }
    /* 展开的缩略图：把高度用满，正文区能放下 8~10 行再出现滚轮（「目标：」那一行常驻底部） */
    .thumbnail.open {
        aspect-ratio: auto;
        height: 54vh;
        max-height: 54vh;
    }
    .thumbnail.open .thumbnail-middle {
        flex: 0 0 auto;
        max-height: 40%;
    }
    .thumbnail.open .thumbnail-body-container {
        min-height: 140px;
    }
    /* vConsole 在手机端离菜单栏近一点（菜单栏比桌面矮），并且回到右上角 */
    #__vconsole .vc-switch {
        top: 62px !important;
        left: auto !important;
        right: 12px !important;
    }
}

/* 光标悬停对象时跟着走的提示：对象名称 · 类型（移动工具与标记模式） */
.object-tip {
    position: fixed;
    z-index: 30;
    padding: 3px 8px;
    border-radius: 6px;
    background-color: rgba(25, 25, 25, 0.86);
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
    pointer-events: none;
}
/* 非中文界面：文案换好之前先不显示，避免先闪一下中文（i18n.js 在 <head> 挂 i18n-pending） */
html.i18n-pending body { visibility: hidden; }


/* 光标下的预览点覆盖层（board-tools.js 绘制，见 drawPreview） */
#container_canvas { position: relative; }
#container_canvas canvas.cursor-preview { position: absolute; pointer-events: none; z-index: 3; }