/* 设置页面（settings.html）；颜色、按钮、输入框、顶部分页沿用 app.css */
main.settings { display: flex; min-height: 0; flex: 1; }
#side { width: 236px; flex: none; background: var(--panel); border-right: 1px solid var(--line); padding: 14px 12px; overflow-y: auto; }
#side select { width: 100%; margin-bottom: 8px; }
#side .buttons { margin: 0 0 6px; }
#side .buttons button { flex: 1; }
.side-field { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 4px; font-size: 12px; color: var(--muted); }
.side-field input { width: 100%; color: var(--ink); font-size: 14px; }
.sec-head { font-size: 12px; font-weight: 600; color: var(--muted); margin: 16px 6px 6px; }
#side .sec { display: block; width: 100%; text-align: left; border: none; background: none; padding: 7px 10px 7px 14px;
             border-radius: var(--radius-sm); position: relative; color: var(--ink); }
#side .sec:hover { background: var(--hover); }
#side .sec.active { background: var(--accent-weak); color: var(--accent-ink); font-weight: 600; }
#side .sec.active::before { content: ""; position: absolute; left: 3px; top: 7px; bottom: 7px; width: 3px; border-radius: 2px;
                            background: var(--accent); }
#side .sec.bad::after { content: " ●"; color: var(--danger); }
#panel { flex: 1; overflow: auto; padding: 20px 28px 48px; min-width: 0; }
#panel h2 { font-size: 18px; font-weight: 600; margin: 0 0 14px; }
#panel h3 { font-size: 14px; font-weight: 600; margin: 22px 0 8px; }
#panel > .hint { max-width: 900px; }
#problems { width: 290px; flex: none; overflow-y: auto; background: var(--panel); border-left: 1px solid var(--line); padding: 14px; }
#problems h3 { margin: 4px 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
#problems h3 ~ h3 { margin-top: 18px; }
#problems ul { padding-left: 0; margin: 0; }
#problems li { list-style: none; margin: 4px 0; font-size: 12px; cursor: pointer; padding: 5px 8px; border-radius: var(--radius-sm);
               border-left: 3px solid transparent; }
#problems li.error { color: var(--danger); background: var(--danger-weak); border-left-color: var(--danger); }
#problems li.warning { color: var(--warn); background: var(--warn-weak); border-left-color: #d6a300; }
#problems li.ok { color: var(--ok); cursor: default; background: #edf6ee; border-left-color: var(--ok); }
/* 表单：一组一张卡片（名称 | 输入 | 说明） */
.form { display: grid; grid-template-columns: minmax(170px, max-content) minmax(180px, 360px) 1fr; gap: 10px 16px; align-items: center;
        background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px;
        box-shadow: var(--shadow); max-width: 1180px; }
.form label { color: var(--ink); }
.form .help { color: var(--muted); font-size: 12px; }
dialog .form { box-shadow: none; }
input[type=number] { width: 110px; }
input.bad, select.bad, textarea.bad, tr.bad td { outline: 2px solid var(--danger); outline-offset: -1px; }
.flash { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: #fff3c4; } to { background: transparent; } }
.pair input { width: 90px; margin-right: 4px; }
table.grid { border-collapse: collapse; font-size: 13px; background: var(--panel); }
table.grid th, table.grid td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; }
table.grid th { background: #f6f3ec; font-weight: 600; white-space: nowrap; }
table.grid tr.clickable:hover td { background: var(--hover); }
table.grid tr.sel td, table.grid tr.sel:hover td { background: var(--accent-weak); }
table.grid input[type=number] { width: 80px; }
table.grid input.w-small { width: 64px; }
table.grid select { max-width: 220px; }
table.grid tr.clickable { cursor: pointer; }
.swatch { display: inline-block; width: 22px; height: 14px; border: 1px solid #0003; vertical-align: middle; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1px solid #0003; margin-right: 7px; vertical-align: -1px; }
.muted { color: var(--muted); }
.row-field { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.errors li { color: var(--danger); font-size: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.grid2 label { display: flex; flex-direction: column; gap: 4px; }
/* 钻包 */
.drill-top { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 12px; }
#drill-map { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
#drill-map circle { cursor: pointer; }
#drill-map text { font: 600 11px system-ui, sans-serif; fill: #fff; pointer-events: none; }
#drill-map text.empty { fill: #888; }
.drill-props { display: grid; grid-template-columns: max-content max-content; gap: 6px 10px; align-items: center; }
/* 刀具库（仿 EnRoute Tool Library） */
.tools-wrap { display: flex; gap: 16px; align-items: flex-start; }
.tools-list { flex: 0 1 auto; max-width: 600px; }                  /* 列表按内容宽；名称、类型不折行，说明可折 */
.tools-list.tp-list { max-width: 640px; }
.page-hint { max-width: 1000px; margin: 0 0 12px; }
#tool-table td:not(:nth-child(2)), #tp-table td:nth-child(-n+2) { white-space: nowrap; }
#tool-table td:nth-child(2) { min-width: 140px; }
.tools-list .filters { display: flex; gap: 8px; margin-bottom: 6px; align-items: center; }
.tools-list .table-wrap { max-height: 62vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.tools-list table.grid { width: 100%; }
.tools-detail { flex: 1; min-width: 0; }
.tool-top { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }   /* 窄了刀形图放到参数上面 */
#tool-shape { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); flex: none; }
#tool-shape text { font: 11px system-ui, sans-serif; fill: var(--ink); }
#nt-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; border: 1px solid var(--line); border-radius: 4px; }
#nt-types label { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 4px; }
#nt-types label:hover { background: #f1ede3; }
#nt-types svg { flex: none; }
/* 图层与刀路：一行 = 名称 + 条件 + 刀路；条件那一列占剩下的宽度 */
table.rules { width: 100%; }
.rules td { vertical-align: top; }
table.rules th, table.rules td { padding: 4px 5px; }
.rules td.no { white-space: nowrap; }
.rules td.name input { width: 125px; }
table.rules select { max-width: 150px; }
.rules-wrap { overflow-x: auto; }
.rules td.act { white-space: nowrap; }
.rules td.act button { padding: 2px 4px; }
table.rules input.w-small { width: 64px; appearance: textfield; -moz-appearance: textfield; }
table.rules input.w-small::-webkit-inner-spin-button, table.rules input.w-small::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rules td.when { width: 100%; }
.rules td.when input { width: 100%; min-width: 230px; box-sizing: border-box; font-family: ui-monospace, Consolas, monospace; }
.rules tr.outline-row td { background: var(--accent-weak); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 8px; }
.chip { font: 12px ui-monospace, Consolas, monospace; padding: 1px 6px; border-radius: 10px; background: #eef2f7; border: 1px solid #d5dce6; cursor: pointer; }
textarea.tpl { width: min(720px, 100%); min-height: 70px; font: 12px/1.4 ui-monospace, Consolas, monospace; }
.order-list { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
               padding: 8px 12px; margin: 0; max-width: 560px; list-style: none; }
.order-list li { display: flex; gap: 6px; align-items: center; margin: 2px 0; padding: 2px 0; }
.order-list li + li { border-top: 1px dashed var(--line); }
.order-list button { padding: 0 7px; }
.badge { display: inline-block; padding: 0 6px; border-radius: 8px; font-size: 11px; color: #fff; }
.badge.imported { background: #2e7d32; } .badge.conflict { background: var(--danger); }
.badge.unconfirmed { background: #b26a00; } .badge.not_needed { background: #8a8a8a; }
.imp-report-wrap { max-height: 40vh; overflow-y: auto; margin: 8px 0; }
dialog#import-dialog { width: min(1100px, 95vw); }
dialog#newtool-dialog { width: min(640px, 95vw); }

/* 刀路模板 */
fieldset.cut { border: 1px solid var(--line); border-radius: var(--radius); margin: 12px 0; padding: 8px 14px 10px; background: #fff;
                box-shadow: var(--shadow); }
fieldset.cut legend { font-weight: 600; font-size: 13px; }
fieldset.cut legend .act { margin-left: 10px; font-weight: normal; }
fieldset.cut legend .act button { padding: 0 6px; }
fieldset.cut.bad { outline: 2px solid var(--danger); outline-offset: -1px; }
fieldset.cut .cond { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0; }
fieldset.cut .cond label { display: flex; gap: 4px; align-items: center; font-size: 12px; }
fieldset.cut input.w-small { width: 72px; }
fieldset.cut select { max-width: 240px; }
#tp-table tr.bad td { outline: 2px solid var(--danger); outline-offset: -1px; }
.tool-form input.wide { width: 360px; }
.rules td.tp { white-space: nowrap; }
table.rules td.tp select { width: 155px; max-width: none; }
button.link { border: none; background: none; color: var(--accent); padding: 0 4px; cursor: pointer; }
#tpimp-list tr.warn td { background: #fff7e0; }
#tpimp-list .errors { font-size: 12px; }
dialog#tpimp-dialog { width: min(1100px, 95vw); }

/* 刀具库页不要左栏；刀的参数两列（名称 | 输入框），缺省 / 上限排一行 */
body.tab-sheets #side { display: none; }
#sizes-table input[type=number] { width: 100px; }
#sizes-table input.name { width: 200px; }
#sizes-table td.act { white-space: nowrap; }
#sizes-table td.act button { padding: 2px 6px; }
.tool-form { display: grid; grid-template-columns: max-content max-content; gap: 8px 14px; align-items: center;
             background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.tool-form .pair { display: flex; gap: 6px; }
.tool-form > label { max-width: 240px; }                        /* 长的名称（剖面的写法说明）折行，不把表单撑出页面 */
.tool-form .full-row { grid-column: 1 / -1; max-width: 440px; }
.tool-form .wrap-hint { max-width: 420px; white-space: normal; font-size: 12px; }
.tool-form input[type=number] { width: 100px; }
.tool-form input[type=text], .tool-form select { width: 210px; }
.tool-form textarea { width: 210px; min-height: 120px; }

.reach { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.reach label { white-space: nowrap; }
.reach input { width: 72px; }

/* 云端（host.js 给 <html> 加 .cloud）：本机才有的东西藏起来 */
.cloud:not(.shell) .tab[data-tab="printers"], .cloud:not(.shell) #pane-printers, .cloud:not(.shell) #test-printer, .cloud:not(.shell) #test-print { display: none !important; }
.host-dialog { border: 1px solid #ccc; border-radius: 8px; padding: 18px 22px; min-width: 360px; }
.host-dialog .actions { display: flex; gap: 8px; margin-top: 12px; }
.host-dialog .bad { color: #b42318; }
.host-logout { margin-left: 8px; }
.host-support { margin-left: 8px; white-space: nowrap; }

/* 导入插件的设置页（插件给内容，这里统一样子） */
.plugin-fields { display: grid; gap: 8px; margin: 4px 0 12px; }
.plugin-field label > span:first-child { display: inline-block; min-width: 9em; }
.plugin-field input[type=number] { width: 7em; }
.plugin-img { display: block; max-width: 360px; margin: 6px 0; border: 1px solid var(--line, #ddd); border-radius: 6px; }

/* 图层与刀路"铣出来"：通孔、盲孔两条刀路 */
.mill-pair { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; margin-left: 6px; }
.mill-pair label { white-space: nowrap; }

/* 左边"用于哪些机床"（刀具库、刀路模板、图层与刀路、加工策略） */
#side .machines-field { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
#side .machines-field > span { color: var(--muted); font-size: 12px; }
#side .machines-field label { display: flex; align-items: baseline; gap: 6px; color: var(--ink); font-size: 13px; }
#side .machines-field label input { flex: none; width: auto; }   /* .side-field input 是 100% 宽：勾选框会占满一行、把名字挤没 */
#side .machines-field .m-name { overflow-wrap: anywhere; }
#side .machines-field .m-id { color: var(--muted); font-size: 11px; white-space: nowrap; }