/* ShopCAM - light, Mastercam-style workspace */
:root {
  --bg: #f0f0f0; --panel: #ffffff; --rib: #f8f8f8; --tabs: #f3f3f3; --line: #d6d6d6; --line2: #bdbdbd; --text: #1f1f1f; --muted: #686868;
  --file: #b3202a; --file2: #8f1820; --hover: #e5f1fb; --hoverb: #cce4f7; --sel: #cce8ff; --selb: #99d1ff; --blue: #1f63d6;
  --ok: #2e9e4f; --bad: #c62828; --warn: #b26a00; --mill: #2e7d32; --lathe: #6a3fb5;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, Ubuntu, "Helvetica Neue", sans-serif;
  --mono: Consolas, "Cascadia Mono", "DejaVu Sans Mono", "Liberation Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 12px/1.35 var(--font); overflow: hidden; }
button { font: inherit; color: var(--text); background: #fdfdfd; border: 1px solid #adadad; border-radius: 2px; padding: 3px 10px; cursor: pointer; }
button:hover { background: var(--hover); border-color: #3c8fd6; }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: #e5f1fb; border-color: #0078d7; }
button.danger { color: var(--bad); }
input, select, textarea { font: inherit; color: var(--text); background: #fff; border: 1px solid #b9b9b9; border-radius: 2px; padding: 2px 4px; min-height: 22px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #0078d7; }
input[type=number] { width: 96px; }
input[type=checkbox], input[type=radio] { accent-color: #0067c0; min-height: 0; }
input[type=color] { padding: 1px; width: 34px; height: 22px; }
.ic { flex: none; display: block; }
.hidden { display: none !important; }

#app { display: grid; grid-template-rows: 30px auto 1fr 24px; height: 100vh; position: relative; }

/* title bar + quick access toolbar */
#titlebar { display: flex; align-items: center; gap: 6px; padding: 0 8px; background: var(--tabs); border-bottom: 1px solid #e2e2e2; }
.app-mark { width: 20px; height: 20px; border-radius: 3px; background: var(--file); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 12px; margin-right: 4px; }
.qat { display: flex; align-items: center; gap: 1px; }
.qat button { background: transparent; border: 1px solid transparent; padding: 2px 3px; display: flex; }
.qat button:hover { background: var(--hover); border-color: var(--hoverb); }
.qsep { width: 1px; height: 16px; background: #cfcfcf; margin: 0 4px; }
#docTitle { flex: 1; text-align: center; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ribbon */
#ribbon { background: var(--tabs); }
#ribbonTabs { display: flex; align-items: flex-end; gap: 1px; padding: 0 6px; height: 25px; }
.tab { border: 1px solid transparent; border-bottom: none; border-radius: 0; background: transparent; padding: 3px 14px 4px; color: #333; position: relative; }
.tab:hover { background: #fafafa; border-color: #e3e3e3; }
.tab.active { background: var(--rib); border-color: var(--line); z-index: 1; margin-bottom: -1px; padding-bottom: 5px; }
.tab.file { background: var(--file); color: #fff; border-color: var(--file); padding: 3px 16px 4px; margin-right: 4px; }
.tab.file:hover { background: var(--file2); }
.tab.ctx::before { content: ''; position: absolute; left: -1px; right: -1px; top: -4px; height: 4px; }
.tab.ctx-mill { color: var(--mill); } .tab.ctx-mill::before { background: var(--mill); }
.tab.ctx-lathe { color: var(--lathe); } .tab.ctx-lathe::before { background: var(--lathe); }
#ribbonPanel { display: flex; background: var(--rib); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); height: 96px; padding: 3px 2px 0; overflow-x: auto; overflow-y: hidden; }
.rgroup { display: flex; flex-direction: column; padding: 0 3px; border-right: 1px solid #e0e0e0; flex: none; }
.ritems { display: flex; align-items: flex-start; gap: 1px; flex: 1; }
.gname { font-size: 11px; color: var(--muted); text-align: center; padding: 1px 4px 3px; white-space: nowrap; }
.rbig { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; min-width: 46px; max-width: 76px; height: 72px; padding: 3px 4px 2px; border: 1px solid transparent; border-radius: 0; background: transparent; }
.rbig .lbl { font-size: 11.5px; line-height: 13px; text-align: center; white-space: normal; }
.rbig:hover, .rsmall:hover, .gitem:hover { background: var(--hover); border-color: var(--hoverb); }
.rcol { display: flex; flex-direction: column; gap: 1px; padding-top: 1px; }
.rsmall { display: flex; align-items: center; gap: 5px; height: 23px; padding: 0 6px 0 4px; border: 1px solid transparent; border-radius: 0; background: transparent; white-space: nowrap; text-align: left; }
.rctl { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 6px; white-space: nowrap; color: #333; }
.rctl select { max-width: 170px; }
.rctl input[type=number] { width: 70px; }
.rchk { display: flex; align-items: center; gap: 5px; height: 23px; padding: 0 6px; white-space: nowrap; }
.gallery { display: flex; gap: 1px; padding: 2px; border: 1px solid #cfcfcf; background: #fff; height: 74px; }
.gitem { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 62px; padding: 3px 2px; border: 1px solid transparent; border-radius: 0; background: transparent; }
.gitem .lbl { font-size: 11px; line-height: 12px; text-align: center; }

/* workspace */
#workspace { display: grid; grid-template-columns: 300px 1fr; min-height: 0; }
#manager { background: var(--panel); border-right: 1px solid var(--line2); display: flex; flex-direction: column; min-height: 0; position: relative; }
.mhead { height: 24px; display: flex; align-items: center; padding: 0 8px; background: #f5f5f5; border-bottom: 1px solid var(--line); font-weight: 600; color: #333; }
.mbody { flex: 1; overflow: auto; min-height: 0; }
.mtabs { display: flex; border-top: 1px solid var(--line2); background: #ececec; padding: 0 2px 2px; gap: 1px; }
.mtabs button { border: 1px solid transparent; border-top: none; border-radius: 0 0 3px 3px; background: transparent; padding: 3px 9px; color: #444; font-size: 11.5px; }
.mtabs button.active { background: #fff; border-color: var(--line2); color: #000; margin-top: -1px; }
#funcPanel { position: absolute; left: 0; right: 0; top: 0; bottom: 24px; background: var(--panel); z-index: 6; display: flex; flex-direction: column; border-bottom: 1px solid var(--line2); }
#funcPanel .fhead { height: 24px; display: flex; align-items: center; padding: 0 8px; background: #f5f5f5; border-bottom: 1px solid var(--line); font-weight: 600; }
#funcPanel .fbar { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid #eee; }
.fbtn { background: transparent; border: 1px solid transparent; padding: 2px 4px; display: flex; }
.fbtn:hover { background: var(--hover); border-color: var(--hoverb); }
.fhint { color: var(--muted); font-size: 11px; margin-left: 6px; }
#funcPanel .fbody { flex: 1; overflow: auto; padding: 8px; }
.seg { display: flex; gap: 3px; margin: 2px 0 6px; }
.seg button { display: flex; align-items: center; gap: 4px; }
.seg button.on { background: var(--sel); border-color: var(--selb); }

/* graphics */
#viewport { position: relative; min-width: 0; min-height: 0; background: linear-gradient(to bottom, #6f8fb6 0%, #aebfd4 45%, #e4eaf1 100%); }
#gl, #overlay { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#overlay { pointer-events: none; }
#gl { cursor: crosshair; }
#selbar { position: absolute; right: 8px; top: 6px; display: flex; align-items: center; gap: 1px; padding: 2px; background: rgba(250, 250, 250, .95); border: 1px solid #b9b9b9; border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.sbtn { display: flex; align-items: center; gap: 4px; background: transparent; border: 1px solid transparent; padding: 1px 5px; font-size: 11.5px; }
.sbtn:hover { background: var(--hover); border-color: var(--hoverb); }
.ssep { width: 1px; height: 18px; background: #d0d0d0; margin: 0 2px; }
#promptBox { position: absolute; left: 10px; top: 8px; background: #fbfbfb; border: 1px solid #9a9a9a; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); padding: 6px 10px 7px; max-width: 46%; }
#prompt { font-size: 12.5px; color: #111; margin-bottom: 5px; }
#cmdInput { width: 230px; font-family: var(--mono); font-size: 12px; }
#simbar { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); background: #fafafa; border: 1px solid #a9a9a9; padding: 6px 10px; display: flex; gap: 6px; align-items: center; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); white-space: nowrap; }
#simbar input[type=range] { width: 300px; }
#simbar .info { font-family: var(--mono); font-size: 11px; color: #444; min-width: 230px; white-space: normal; }
#toast { position: absolute; right: 12px; bottom: 12px; background: #fff; border: 1px solid #a9a9a9; border-left: 4px solid var(--blue); padding: 7px 12px; box-shadow: 0 3px 10px rgba(0, 0, 0, .2); opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 60%; }
#toast.show { opacity: 1; } #toast.err { border-left-color: var(--bad); color: #7a1010; }

/* status bar */
#statusbar { display: flex; align-items: stretch; background: var(--tabs); border-top: 1px solid var(--line2); font-size: 11px; color: #333; text-transform: uppercase; letter-spacing: .2px; }
#statusbar > span { display: flex; align-items: center; padding: 0 10px; border-right: 1px solid #d7d7d7; white-space: nowrap; }
#statusbar .click { cursor: pointer; } #statusbar .click:hover { background: var(--hover); }
#statusbar .coords { font-family: var(--mono); text-transform: none; min-width: 300px; }
#statusbar .grow { flex: 1; border-right: none; }
#statusbar .disp { padding: 0 2px; gap: 1px; border-right: none; }
#statusbar .disp button { background: transparent; border: 1px solid transparent; padding: 1px 3px; display: flex; }
#statusbar .disp button.on { background: var(--sel); border-color: var(--selb); }

/* menus */
.menu { position: fixed; z-index: 100; background: #fff; border: 1px solid #a9a9a9; box-shadow: 2px 3px 8px rgba(0, 0, 0, .25); padding: 3px 0; min-width: 190px; max-height: 70vh; overflow: auto; }
.mitem { display: flex; align-items: center; gap: 6px; padding: 4px 18px 4px 6px; cursor: default; white-space: nowrap; }
.mitem:hover { background: var(--hover); }
.mitem.dis { color: #999; }
.mchk { width: 14px; text-align: center; color: #0067c0; font-weight: 700; }
.msep { height: 1px; background: #e0e0e0; margin: 3px 0; }
.mhdr { padding: 4px 10px 2px; font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; }

/* manager contents */
.mtool { display: flex; flex-wrap: wrap; gap: 0; padding: 3px 4px; border-bottom: 1px solid #e6e6e6; background: #fafafa; }
.mtb { background: transparent; border: 1px solid transparent; padding: 2px; display: flex; }
.mtb:hover { background: var(--hover); border-color: var(--hoverb); }
.mtsep { width: 1px; background: #d8d8d8; margin: 2px 3px; }
.tree { padding: 3px 0; }
.trow { display: flex; align-items: center; height: 20px; white-space: nowrap; cursor: default; padding-right: 6px; }
.trow:hover { background: #e5f3ff; }
.trow.sel { background: var(--sel); }
.trow.dim .tl { color: #999; font-style: italic; }
.trow.bold .tl { font-weight: 600; }
.tw { width: 13px; flex: none; color: #555; text-align: center; font-size: 10px; cursor: pointer; }
.ti { position: relative; width: 18px; height: 16px; flex: none; margin-right: 4px; }
.ti .badge { position: absolute; right: -3px; bottom: -3px; }
.tl { overflow: hidden; text-overflow: ellipsis; }
.msum { padding: 6px 10px; color: var(--muted); border-top: 1px solid #eee; line-height: 1.5; }
.hint { color: var(--muted); font-size: 11.5px; margin: 6px 0; line-height: 1.45; }
.pad { padding: 8px 10px; }
table.mgrid { width: 100%; border-collapse: collapse; }
table.mgrid th { background: #f3f3f3; font-weight: 500; color: #444; text-align: left; padding: 3px 5px; border-bottom: 1px solid var(--line); border-right: 1px solid #e6e6e6; font-size: 11px; }
table.mgrid td { padding: 2px 5px; border-bottom: 1px solid #f0f0f0; white-space: nowrap; }
table.mgrid tr:hover td { background: #f2f8fe; }
table.mgrid tr.act td { background: var(--sel); }
table.mgrid td.flag { width: 30px; text-align: center; cursor: pointer; font-weight: 700; color: #0b5cad; }
table.mgrid td.flag:hover { background: var(--hover); }
table.mgrid td.vis { color: #c62828; }

/* forms */
.form { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.form label { color: #333; }
.form .full { grid-column: 1 / -1; }
.form .info { color: #333; font-weight: 600; }
.fgroup { border: 1px solid #d3d3d3; border-radius: 2px; padding: 12px 8px 8px; margin: 10px 0 8px; position: relative; }
.fgroup > .gt { position: absolute; top: -8px; left: 8px; padding: 0 4px; background: #fff; font-size: 11.5px; color: #1f4f9c; }
h4 { margin: 12px 0 6px; font-size: 11.5px; color: #1f4f9c; font-weight: 600; }

/* modal dialogs */
#modalRoot .backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .25); z-index: 50; display: flex; align-items: center; justify-content: center; }
.modal { background: #fff; border: 1px solid #8a8a8a; width: min(760px, 94vw); max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.modal.wide { width: min(1200px, 96vw); height: 88vh; }
.modal.treedlg { width: min(1080px, 96vw); height: min(720px, 90vh); }
.modal .mh { padding: 0 6px 0 12px; height: 30px; background: #fff; border-bottom: 1px solid #e3e3e3; display: flex; gap: 8px; align-items: center; }
.modal .mh .t { flex: 1; }
.modal .mh button { border: none; background: transparent; padding: 3px 9px; }
.modal .mh button:hover { background: #e81123; color: #fff; }
.modal .mb { padding: 12px 14px; overflow: auto; flex: 1; min-height: 0; }
.modal.treedlg .mb { padding: 0; display: flex; }
.modal .mf { padding: 8px 12px; border-top: 1px solid #e3e3e3; background: #f3f3f3; display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.modal .mf .left { margin-right: auto; color: var(--muted); font-size: 11.5px; }
.modal .mf button { display: flex; align-items: center; gap: 5px; min-width: 76px; justify-content: center; }
.td { display: flex; flex: 1; min-height: 0; width: 100%; }
.tdleft { width: 250px; flex: none; border-right: 1px solid #ddd; display: flex; flex-direction: column; background: #fbfbfb; }
.tdnav { flex: 1; overflow: auto; padding: 4px 0; }
.tditem { display: flex; align-items: center; gap: 6px; padding: 3px 10px; cursor: default; }
.tditem:hover { background: #e5f3ff; }
.tditem.sel { background: var(--sel); }
.tdcontent { flex: 1; overflow: auto; padding: 0 16px 16px; min-width: 0; }
.tdpagehead { font-size: 15px; color: #1f4f9c; padding: 10px 0 4px; border-bottom: 1px solid #e5e5e5; margin-bottom: 6px; }
.qv { border-top: 1px solid #ddd; padding: 6px 8px 8px; font-size: 11px; background: #fff; }
.qvh { font-weight: 600; color: #1f4f9c; margin-bottom: 3px; }
.qv table { width: 100%; border-collapse: collapse; }
.qv td { padding: 1px 2px; } .qv td:first-child { color: var(--muted); } .qv td:last-child { text-align: right; }
.toolpage { display: grid; grid-template-columns: 1fr 300px; gap: 14px; }
.tlist { min-width: 0; }
.tlist .tbl { max-height: 360px; overflow: auto; border: 1px solid #d6d6d6; }
.toolinfo { border: 1px solid #d6d6d6; background: #fafafa; padding: 6px 8px; margin-top: 10px; }
.linkpage { display: grid; grid-template-columns: 1fr 240px; gap: 14px; align-items: start; }
.linkfig { border: 1px solid #ddd; background: #fafcff; margin-top: 10px; }
.tabsbar { display: flex; gap: 3px; margin-bottom: 8px; flex-wrap: wrap; }
.tabsbar button.active { background: var(--sel); border-color: var(--selb); }
table.grid { width: 100%; border-collapse: collapse; }
table.grid th { background: #f3f3f3; color: #444; font-weight: 500; font-size: 11.5px; text-align: left; padding: 3px 6px; border-bottom: 1px solid #ddd; position: sticky; top: 0; }
table.grid td { border-bottom: 1px solid #eee; padding: 2px 6px; }
table.grid tr.sel td { background: var(--sel); }
table.grid tr:hover td { background: #f2f8fe; }
table.grid input, table.grid select { width: 100%; }
textarea.code, pre.code { width: 100%; font: 12px/1.5 var(--mono); background: #fff; color: #111; border: 1px solid #c8c8c8; border-radius: 0; padding: 6px 8px; tab-size: 2; white-space: pre; overflow: auto; margin: 0; }
textarea.code { height: 100%; min-height: 58vh; resize: none; }
.nced { display: flex; height: calc(88vh - 175px); border: 1px solid #c8c8c8; }
.nced .gut { width: 62px; flex: none; overflow: hidden; background: #f3f3f3; color: #8a8a8a; font: 12px/1.5 var(--mono); text-align: right; padding: 6px 6px 6px 0; white-space: pre; border-right: 1px solid #ddd; }
.nced textarea { border: none; flex: 1; min-height: 0; height: 100%; }
.vnc { flex: 1; position: relative; overflow: auto; font: 12px/18px var(--mono); background: #fff; outline: none; }
.vnc .vsp { width: 1px; }
.vnc .vwin { position: absolute; left: 0; right: 0; }
.vnc .vrow { display: flex; height: 18px; white-space: pre; cursor: text; }
.vnc .vrow:hover { background: #f2f8fe; }
.vnc .vg { width: 62px; flex: none; text-align: right; padding-right: 6px; margin-right: 6px; background: #f3f3f3; color: #8a8a8a; border-right: 1px solid #ddd; }
.vnc .vin { flex: 1; font: inherit; border: 1px solid #2f7bd1; padding: 0 2px; height: 18px; box-sizing: border-box; }
.list { display: flex; flex-direction: column; gap: 1px; }
.item { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid transparent; }
.item:hover { background: #f2f8fe; }
.item.sel { background: var(--sel); border-color: var(--selb); }
.item .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .meta { color: var(--muted); font-size: 11px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.toolbar button { display: flex; align-items: center; gap: 4px; }
.err { color: var(--bad); white-space: pre-wrap; font-family: var(--mono); font-size: 12px; }
.warnmsg { color: var(--warn); white-space: pre-wrap; font-family: var(--mono); font-size: 12px; }
.ok { color: var(--ok); }

/* File backstage */
#backstage { position: absolute; left: 0; right: 0; top: 30px; bottom: 0; z-index: 40; display: grid; grid-template-columns: 200px 1fr; background: #fff; }
.bsnav { background: var(--file); color: #fff; display: flex; flex-direction: column; padding-top: 8px; }
.bsnav button { background: transparent; border: none; color: #fff; text-align: left; padding: 10px 24px; font-size: 14px; border-radius: 0; display: flex; align-items: center; gap: 10px; }
.bsnav button:hover { background: rgba(255, 255, 255, .14); }
.bsnav button.active { background: rgba(255, 255, 255, .24); }
.bsnav .back { font-size: 20px; padding: 6px 22px 14px; }
.bsnav .bssep { height: 1px; background: rgba(255, 255, 255, .25); margin: 8px 18px; }
.bscontent { padding: 26px 44px; overflow: auto; }
.bscontent h2 { font-weight: 300; font-size: 30px; margin: 0 0 18px; color: #222; }
.bscontent h3 { font-weight: 400; font-size: 16px; margin: 20px 0 8px; color: #333; }
.cards { display: flex; flex-wrap: wrap; gap: 14px; }
.card { width: 190px; border: 1px solid #d0d0d0; background: #fff; padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; border-radius: 0; }
.card:hover { background: var(--hover); border-color: #3c8fd6; }
.card .ct { font-size: 14px; } .card .cs { color: var(--muted); font-size: 11.5px; }
.bstable { border-collapse: collapse; min-width: 560px; }
.bstable th { text-align: left; color: #555; font-weight: 500; border-bottom: 1px solid #ccc; padding: 6px 10px; }
.bstable td { border-bottom: 1px solid #eee; padding: 6px 10px; }
.bstable tr:hover td { background: #f2f8fe; }
.bsrow { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.bsrow input[type=text] { width: 320px; padding: 4px 6px; }
.bigbtn { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 13px; min-width: 240px; }