:root {
  --bg: #0b0f1a;
  --bg-2: #0e1322;
  --panel: #121726;
  --panel-2: #161c2e;
  --card: #151b2c;
  --border: #232a40;
  --border-2: #2c3450;
  --text: #e6e9f5;
  --muted: #8f97b6;
  --dim: #5f6787;
  --accent: #7c86ff;
  --accent-2: #6870f2;
  --cyan: #38d6f0;
  --green: #3ddc97;
  --amber: #f5b13d;
  --red: #ff5d6c;
  --pink: #ff7aa8;
  --font: 'IBM Plex Sans Thai', 'Noto Sans Thai', 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  display: grid;
  grid-template-rows: 48px 1fr 26px;
  overflow: hidden;
  user-select: none;
}
button, select, input { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
code, .mono { font-family: var(--mono); }
.hidden { display: none !important; }
.spacer { flex: 1; }
.muted { color: var(--dim); }

i[data-icon] { display: inline-flex; width: 16px; height: 16px; flex: none; }
i[data-icon] svg { width: 100%; height: 100%; }

/* ---------------- TOP BAR ---------------- */
.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 0 12px 0 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 228px; }
.logo {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, #3a8bff, #7c86ff);
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 0 0 1px #ffffff22 inset, 0 4px 14px #4f6bff55;
}
.logo i[data-icon] { width: 18px; height: 18px; }
.brand-title { font-weight: 700; font-size: 14.5px; letter-spacing: .2px; line-height: 1.1; }
.brand-title span { color: var(--accent); font-weight: 600; }
.brand-sub { font-size: 10.5px; color: var(--muted); }

.menu { display: flex; align-items: center; gap: 2px; }
.menu > button, .dropdown > button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 7px; color: #cfd5ee;
}
.menu > button:hover, .dropdown > button:hover, .dropdown.open > button { background: #1d2438; }
.menu .icon-only { padding: 6px 7px; }
.menu .chev { width: 13px; height: 13px; opacity: .7; }
.vsep { width: 1px; height: 18px; background: var(--border); margin: 0 6px; }

.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  min-width: 320px; padding: 6px;
  background: var(--panel-2); border: 1px solid var(--border-2); border-radius: 10px;
  box-shadow: 0 16px 40px #0009;
  display: none;
}
.dropdown.open .dropdown-menu { display: block; }
.ex-item { display: flex; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 7px; align-items: flex-start; }
.ex-item:hover { background: #20283f; }
.ex-num { font-family: var(--mono); color: var(--accent); font-size: 11px; padding-top: 2px; }
.ex-name { font-weight: 600; }
.ex-desc { color: var(--muted); font-size: 11.5px; }

.top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lang-toggle {
  display: flex; align-items: center; gap: 2px; padding: 3px 3px 3px 9px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-2); color: var(--muted);
}
.lang-toggle i[data-icon] { width: 14px; height: 14px; margin-right: 4px; }
.lang-toggle button { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--muted); }
.lang-toggle button.active { background: var(--accent); color: #fff; }
.ghost { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 7px; color: #cfd5ee; }
.ghost:hover { background: #1d2438; }
.status-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-2); font-size: 12px; color: #cfd5ee;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); display: inline-block; flex: none; }
.dot.run { background: var(--green); box-shadow: 0 0 0 3px #3ddc9726; animation: pulse 1.4s infinite; }
.dot.pause { background: var(--amber); }
.dot.err { background: var(--red); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px #3ddc9700; } }

.speed { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--dim); font-weight: 600; letter-spacing: .5px; }
.speed select, .mini-select {
  background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 7px;
  padding: 5px 8px; font-family: var(--mono); font-size: 12px; color: var(--text); outline: none;
}
.primary {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 8px;
  background: linear-gradient(180deg, #8890ff, #6c74f3); color: #fff; font-weight: 600;
  box-shadow: 0 0 0 1px #ffffff1f inset, 0 6px 18px #6c74f344;
}
.primary:hover { filter: brightness(1.08); }
.primary.paused { background: linear-gradient(180deg, #3ee0a0, #22b97c); box-shadow: 0 0 0 1px #ffffff1f inset, 0 6px 18px #22b97c44; }
.outline {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--border-2); background: var(--panel-2); color: #dfe3f5; font-weight: 500;
}
.outline:hover { border-color: #3b4566; background: #1b2236; }

/* ---------------- LAYOUT ---------------- */
.layout { display: grid; grid-template-columns: 252px 1fr 372px; min-height: 0; }
.panel-head {
  height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  border-bottom: 1px solid var(--border); color: var(--muted); font-size: 12px; flex: none;
}
.panel-head b { color: var(--text); letter-spacing: 1.2px; font-size: 11.5px; }
.panel-head i[data-icon] { width: 14px; height: 14px; }

/* ---------------- TOOLBOX ---------------- */
.toolbox { display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--border); min-height: 0; }
.toolbox-list { flex: 1; overflow-y: auto; padding: 4px 10px 12px 10px; }
.toolbox-list::-webkit-scrollbar, .console::-webkit-scrollbar, .datatable::-webkit-scrollbar, .right-body::-webkit-scrollbar { width: 8px; }
.toolbox-list::-webkit-scrollbar-thumb, .console::-webkit-scrollbar-thumb, .datatable::-webkit-scrollbar-thumb, .right-body::-webkit-scrollbar-thumb { background: #262e47; border-radius: 4px; }
.cat-title {
  display: flex; align-items: center; gap: 8px; margin: 14px 2px 7px; font-size: 11px; color: var(--muted);
}
.cat-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.cat-title .cat-en { color: var(--dim); }
.part {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px 8px 12px; margin-bottom: 7px; border-radius: 10px; text-align: left;
  background: var(--card); border: 1px solid var(--border); cursor: grab; touch-action: none;
  transition: border-color .12s, background .12s, transform .12s;
}
.part::before { content: ''; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c, var(--accent)); }
.part:hover { border-color: #39425f; background: #192036; }
.part:active { cursor: grabbing; transform: scale(.985); }
.part.active { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan) inset; }
.part-icon {
  width: 46px; height: 40px; border-radius: 8px; flex: none;
  background: #0e1322; border: 1px solid var(--border-2); display: grid; place-items: center;
}
.part-icon canvas { width: 42px; height: 34px; }
.part-name { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tag { font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--accent); background: #7c86ff1c; padding: 1px 6px; border-radius: 4px; }
.part-desc { color: var(--muted); font-size: 11.5px; line-height: 1.35; margin-top: 2px; }
.tb-search { display: flex; align-items: center; gap: 8px; margin: 10px 10px 2px; padding: 0 10px; background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 8px; color: var(--dim); }
.tb-search:focus-within { border-color: var(--accent); color: var(--accent); }
.tb-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; padding: 7px 0; color: var(--text); user-select: text; }
.folder { margin-top: 7px; border: 1px solid var(--border); border-radius: 10px; background: #0f1424; overflow: hidden; }
.folder-head { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; text-align: left; color: #d5daf0; font-weight: 600; }
.folder-head:hover { background: #171d31; }
.ficon { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; color: var(--c, var(--accent));
  background: color-mix(in srgb, var(--c, #7c86ff) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c, #7c86ff) 45%, transparent); }
.ficon i[data-icon] { width: 18px; height: 18px; }
.boom-card { text-align: center; padding: 26px 28px 22px; max-width: 440px; border-color: #6b2e3e; box-shadow: 0 0 0 1px #ff5d6c33, 0 30px 80px #000a, 0 0 60px #ff5d6c22; }
.boom-icon { font-size: 54px; line-height: 1; margin-bottom: 8px; animation: boompop .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes boompop { from { transform: scale(.2); opacity: 0; } }
.boom-card h3 { margin: 0 0 10px; font-size: 19px; color: #ff8a96; }
#boomReasons { text-align: left; display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.boom-item { background: #1a1220; border: 1px solid #4a2230; border-radius: 8px; padding: 8px 12px; line-height: 1.5; user-select: text; }
.boom-item b { color: #ffb3bd; font-family: var(--mono); margin-right: 6px; }
.boom-card p { margin: 0 0 18px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.boom-actions { display: flex; gap: 10px; justify-content: center; }
.folder-head .fname { flex: 1; min-width: 0; }
.folder-head .fcount { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--muted); background: #1e2538; padding: 1px 7px; border-radius: 999px; }
.folder-head .fchev { width: 14px; height: 14px; color: var(--dim); transition: transform .15s; transform: rotate(-90deg); }
.folder.open .fchev { transform: none; }
.folder.open .folder-head { border-bottom: 1px solid var(--border); background: #131930; }
.folder-body { display: none; padding: 8px 8px 1px; }
.folder.open .folder-body { display: block; }
.toolbox-foot { border-top: 1px solid var(--border); padding: 8px 10px; }
.toolbox-foot button { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); padding: 4px 6px; border-radius: 6px; }
.toolbox-foot button:hover { color: var(--text); background: #1d2438; }

/* ---------------- CENTER ---------------- */
.center { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.tabs { height: 38px; display: flex; align-items: stretch; border-bottom: 1px solid var(--border); background: var(--panel); flex: none; }
.tab { display: flex; align-items: center; gap: 8px; padding: 0 16px; font-weight: 600; border-right: 1px solid var(--border); }
.tab.active { background: var(--bg); box-shadow: inset 0 2px 0 var(--accent); }
.tab code { color: var(--dim); font-size: 11px; font-weight: 400; }
.tabs-right { margin-left: auto; display: flex; align-items: center; padding: 0 14px; color: var(--muted); font-size: 12px; }

.toolbar {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px; flex: none; flex-wrap: wrap;
  border-bottom: 1px solid var(--border); background: var(--bg);
}
.seg { display: flex; padding: 3px; gap: 2px; background: var(--panel); border: 1px solid var(--border); border-radius: 9px; }
.seg button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 6px; color: var(--muted); }
.seg button:hover { color: var(--text); }
.seg button.active { background: #232b45; color: #fff; box-shadow: 0 0 0 1px #3a4468 inset; }
.seg button[data-tool="delete"].active { background: #3a1d27; box-shadow: 0 0 0 1px #6b2e3e inset; color: #ffb3bd; }
.tb {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--border); color: #cbd1ea;
}
.tb:hover { border-color: #39425f; }
.tb:disabled { opacity: .4; cursor: default; }
.zoom { display: flex; align-items: center; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; }
.zoom button { padding: 6px 8px; color: var(--muted); }
.zoom button:hover { color: var(--text); }
.zoom span { font-family: var(--mono); font-size: 11.5px; min-width: 46px; text-align: center; color: #cbd1ea; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel); color: var(--muted); font-size: 12px;
}
.chip i[data-icon] { width: 14px; height: 14px; }
.chip.on { color: var(--green); border-color: #2a6b52; background: #11261f; }
.chip .e-sym { font-family: var(--mono); font-size: 12px; }
.chip[data-opt="electron"].on { color: #74b6ff; border-color: #2c4f7d; background: #111e33; }

.stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--bg); }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.stage.tool-wire canvas { cursor: crosshair; }
.stage.tool-delete canvas { cursor: not-allowed; }
.end-hint {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 11.5px; pointer-events: none; white-space: nowrap;
}
.end-hint i[data-icon] { width: 13px; height: 13px; }
.end-hint::before, .end-hint::after { content: ''; width: 120px; border-top: 1px dashed #2a3149; }
.empty-hint {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  text-align: center; max-width: 380px; padding: 28px 30px; border-radius: 14px;
  border: 1px dashed #343d5c; background: #0f1424cc; backdrop-filter: blur(3px);
}
.empty-icon { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 14px; display: grid; place-items: center; border: 1px solid var(--border-2); color: var(--accent); background: var(--panel-2); }
.empty-icon i[data-icon] { width: 24px; height: 24px; }
.empty-title { font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.empty-desc { color: var(--muted); line-height: 1.55; margin-bottom: 16px; }
.tooltip {
  position: absolute; pointer-events: none; z-index: 5;
  background: #0d1220ee; border: 1px solid var(--border-2); border-radius: 8px;
  padding: 7px 10px; font-size: 12px; min-width: 140px; box-shadow: 0 8px 22px #0008;
}
.tooltip .tt-h { font-weight: 600; margin-bottom: 4px; display: flex; gap: 6px; align-items: center; }
.tooltip .tt-row { display: flex; justify-content: space-between; gap: 14px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.tooltip .tt-row b { color: var(--text); font-weight: 500; }

/* bottom panel */
.bottom { height: 200px; flex: none; display: flex; flex-direction: column; border-top: 1px solid var(--border); background: var(--panel); transition: height .15s; }
.bottom.collapsed { height: 38px; }
.bottom.collapsed #btnCollapse i { transform: rotate(180deg); }
.bottom-tabs { height: 38px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 10px; border-bottom: 1px solid var(--border); }
.btab { display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; height: 100%; color: var(--dim); font-weight: 700; font-size: 11.5px; letter-spacing: .6px; border-bottom: 2px solid transparent; }
.btab.active { color: var(--text); border-bottom-color: var(--accent); }
.btab.alert::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px #ff5d6c33; }
.btab code { font-size: 10px; font-weight: 400; background: #1e2538; color: var(--muted); padding: 1px 6px; border-radius: 4px; letter-spacing: 0; }
.icon-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: var(--muted); }
.icon-btn:hover { background: #1d2438; color: var(--text); }
.bottom-body { flex: 1; min-height: 0; position: relative; }
.console { position: absolute; inset: 0; overflow-y: auto; padding: 8px 14px; font-size: 12.5px; user-select: text; }
.log { display: flex; gap: 12px; padding: 2px 0; line-height: 1.5; }
.log time { font-family: var(--mono); color: var(--dim); font-size: 11.5px; flex: none; padding-top: 1px; }
.log.warn span { color: var(--amber); }
.log.error span { color: var(--red); }
.log.ok span { color: var(--green); }
.datatable { position: absolute; inset: 0; overflow: auto; }
.datatable table { width: 100%; border-collapse: collapse; font-size: 12px; }
.datatable th { position: sticky; top: 0; background: var(--panel-2); text-align: left; padding: 6px 12px; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border); }
.datatable td { padding: 5px 12px; border-bottom: 1px solid #1c2236; }
.datatable td.num { font-family: var(--mono); text-align: right; }
.datatable th.num { text-align: right; }
.datatable tr { cursor: pointer; }
.datatable tr:hover td { background: #182036; }
.datatable tr.sel td { background: #15273a; }
.datatable .lbl { font-family: var(--mono); color: var(--accent); font-weight: 600; }
.st-bad { color: var(--red); font-weight: 600; }
.st-ok { color: var(--green); }
.tbl-empty { padding: 18px; color: var(--dim); text-align: center; }

/* ---------------- RIGHT ---------------- */
.right { display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--border); min-height: 0; }
.chip-sm { font-family: var(--mono); font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; }
.right-body { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; }
.card-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.label-sm { font-size: 11px; font-weight: 700; letter-spacing: .4px; color: var(--muted); }
.pill-outline { font-size: 11px; color: var(--cyan); border: 1px solid #2a8fa3; border-radius: 999px; padding: 1px 9px; background: #0f2a33; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.mini-select { padding: 3px 6px; font-size: 11px; }
#scope { display: block; width: 100%; height: 190px; }
.scope-probes { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 10px 4px; }
.probe-chip { flex: 1; display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 9px; border: 1px dashed var(--border-2); background: var(--bg-2); cursor: grab; touch-action: none; user-select: none; }
.probe-chip:active { cursor: grabbing; }
.probe-chip .pdot { width: 10px; height: 10px; border-radius: 50%; background: var(--pc); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 25%, transparent); }
.probe-chip b { font-family: var(--mono); font-size: 11px; color: var(--pc); }
.probe-chip .prd { flex: 1; text-align: right; font-family: var(--mono); font-size: 12px; color: var(--text); }
.probe-chip .pclr { display: none; color: var(--dim); font-size: 14px; line-height: 1; padding: 0 2px; }
.probe-chip.on { border-style: solid; border-color: var(--pc); }
.probe-chip.on .pclr { display: inline; }
.probe-chip .pclr:hover { color: var(--red); }
.probe-chip[data-ch="0"] { --pc: #f5c542; }
.probe-chip[data-ch="1"] { --pc: #2ad4f5; }
.probe-chip[data-ch="2"] { --pc: #aab3c8; flex-basis: 100%; }
.probe-hint { padding: 2px 12px 9px; font-size: 10.5px; line-height: 1.5; color: var(--dim); }
.scope-legend { display: flex; gap: 14px; padding: 6px 10px 9px; font-size: 11.5px; color: var(--muted); }
.lg { display: inline-flex; align-items: center; gap: 6px; }
.lg i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.lg-v i { background: var(--amber); }
.lg-i i { background: var(--cyan); }

.props-empty { text-align: center; padding: 28px 18px; color: var(--muted); }
.props-empty .pe-icon { width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 12px; border: 1px solid var(--border-2); display: grid; place-items: center; background: var(--panel-2); color: var(--muted); }
.props-empty .pe-icon i[data-icon] { width: 22px; height: 22px; }
.props-empty b { display: block; color: var(--text); font-size: 14px; margin-bottom: 6px; }
.props-empty p { margin: 0; font-size: 12px; line-height: 1.6; }

.sel-card { padding: 12px; border-color: #2a8fa3; box-shadow: 0 0 0 1px #38d6f033, 0 0 24px #38d6f010; }
.sel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sel-icon { width: 42px; height: 38px; border-radius: 8px; border: 1px solid var(--border-2); background: #0b101c; display: grid; place-items: center; }
.sel-icon canvas { width: 38px; height: 32px; }
.sel-title { font-weight: 700; font-size: 14px; display: flex; gap: 7px; align-items: center; }
.sel-lbl { font-family: var(--mono); font-size: 11px; color: var(--cyan); background: #0f2a33; border: 1px solid #1f5b68; padding: 0 6px; border-radius: 4px; }
.sel-sub { color: var(--muted); font-size: 11.5px; }
.badge-bad { font-size: 10.5px; color: #fff; background: var(--red); padding: 1px 7px; border-radius: 999px; }

.readings { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.rd { background: #0b101c; border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; }
.rd small { display: block; color: var(--dim); font-size: 10.5px; }
.rd b { font-family: var(--mono); font-size: 15px; font-weight: 500; }
.rd.v b { color: var(--amber); }
.rd.i b { color: var(--cyan); }
.rd.p b { color: var(--pink); }
.rd.r b { color: #b9c0ff; }

.prop { margin-bottom: 11px; }
.prop-label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11.5px; margin-bottom: 5px; }
.prop-label code { font-size: 10px; color: var(--dim); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }
.prop-row { display: flex; align-items: center; gap: 10px; }
.prop-row input[type=range] { flex: 1; }
.num-wrap { display: flex; align-items: center; background: #0b101c; border: 1px solid var(--border-2); border-radius: 7px; overflow: hidden; }
.num-wrap:focus-within { border-color: var(--accent); }
.num-wrap input { width: 82px; background: transparent; border: 0; outline: none; padding: 6px 8px; font-family: var(--mono); color: #b9c0ff; text-align: right; }
.num-wrap span { padding: 0 9px 0 2px; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.prop select { width: 100%; background: #0b101c; border: 1px solid var(--border-2); border-radius: 7px; padding: 6px 8px; outline: none; }

input[type=range] { -webkit-appearance: none; appearance: none; height: 4px; background: #262e47; border-radius: 4px; outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); cursor: pointer; }

.toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle .sw { width: 36px; height: 20px; border-radius: 999px; background: #262e47; position: relative; transition: background .15s; flex: none; }
.toggle .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #cfd5ee; transition: left .15s; }
.toggle.on .sw { background: var(--green); }
.toggle.on .sw::after { left: 19px; background: #fff; }

.levels { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.lvl { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; font-size: 11.5px; color: var(--dim); border: 1px solid transparent; }
.lvl i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; opacity: .55; }
.lvl code { margin-left: auto; font-size: 10.5px; }
.lvl.on { color: #fff; border-color: var(--c); font-weight: 600; }
.lvl.on i { opacity: 1; box-shadow: 0 0 0 3px #ffffff14; }
.sel-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.sel-actions button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 7px; border: 1px solid var(--border-2); background: var(--panel-2); font-size: 12px; color: #cfd5ee; }
.sel-actions button:hover { border-color: #3b4566; }
.sel-actions button.danger:hover { border-color: #6b2e3e; color: #ffb3bd; }
.sel-actions button.repair { border-color: #6b5a2e; color: var(--amber); }
.sel-actions i[data-icon] { width: 14px; height: 14px; }

.vlegend { flex: none; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); }
.vbar { flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #5078ff, #3ddc97, #f5b13d, #ff5d6c); }
.vlabel { color: var(--dim); }

/* ---------------- STATUS BAR ---------------- */
.statusbar { display: flex; align-items: center; gap: 16px; padding: 0 12px; background: var(--panel); border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.sb-item { display: inline-flex; align-items: center; gap: 6px; }
.sb-item i[data-icon] { width: 13px; height: 13px; }

/* ---------------- MODAL ---------------- */
.modal { position: fixed; inset: 0; background: #05070dcc; display: grid; place-items: center; z-index: 100; }
.modal-card { width: min(620px, 92vw); max-height: 86vh; overflow: auto; background: var(--panel-2); border: 1px solid var(--border-2); border-radius: 14px; box-shadow: 0 30px 80px #000a; }
.modal-head { display: flex; align-items: center; gap: 9px; padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 15px; }
.modal-body { padding: 6px 20px 18px; line-height: 1.65; color: #cfd5ee; user-select: text; }
.modal-body h4 { margin: 14px 0 6px; color: var(--accent); font-size: 13px; }
.modal-body ul { margin: 0; padding-left: 18px; }
.modal-body b { color: #fff; }
kbd { font-family: var(--mono); font-size: 11px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border-2); background: #0b101c; color: #dfe3f5; }
.kbd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }

@media (max-width: 1640px) {
  .chip span { display: none; }
  .chip { padding: 6px 9px; }
}
@media (max-width: 1280px) {
  .layout { grid-template-columns: 220px 1fr 320px; }
  .menu > button span, .dropdown > button span { display: none; }
  .brand { min-width: 0; }
  .chip span { display: none; }
}

/* =====================================================================
 * THEME: bright / "สดใส"  — sky-blue stage, light grey panels, black nav bars, vivid accents
 * (switched with <html data-theme="bright">; the dark theme is the default)
 * ===================================================================== */
.theme-toggle { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-2); color: var(--muted); }
.theme-toggle button { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; color: var(--muted); }
.theme-toggle button i[data-icon] { width: 14px; height: 14px; }
.theme-toggle button.active { background: var(--accent); color: #fff; }

:root[data-theme="bright"] {
  --bg: #cfe5ff; --bg-2: #eef3fa; --panel: #f3f4f6; --panel-2: #ffffff; --card: #ffffff;
  --border: #c8cfdb; --border-2: #b0bacb;
  --text: #18202f; --muted: #4d5870; --dim: #6a768c;
  --accent: #2468e0; --accent-2: #1b55bd; --cyan: #0a86b4; --green: #12924f; --amber: #bf6f00; --red: #d3243a; --pink: #cf2f74;
}
[data-theme="bright"] body { background: linear-gradient(180deg, #3f95ff 0%, #9cc9ff 55%, #d8ebff 100%) fixed; }

/* black navigation bars (like PhET), keeping the dark palette inside them */
[data-theme="bright"] .topbar, [data-theme="bright"] .statusbar {
  --panel: #12161c; --panel-2: #1c222c; --bg-2: #0c1015; --card: #161b24; --border: #2a313d; --border-2: #3a4454;
  --text: #eef2f9; --muted: #aeb8cb; --dim: #7e8aa1; --accent: #7c9bff; --cyan: #38d6f0; --green: #3ddc97; --amber: #f5b13d; --red: #ff5d6c;
  background: #12161c; border-color: #000; color: var(--text);
}

/* stage & toolbar sit on the sky */
[data-theme="bright"] .center { background: transparent; }
[data-theme="bright"] .toolbar { background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(4px); border-bottom-color: rgba(255, 255, 255, 0.7); }
[data-theme="bright"] .stage { background: transparent; }
[data-theme="bright"] .tabs { background: #f3f4f6; }
[data-theme="bright"] .tab.active { background: #ffffff; box-shadow: inset 0 3px 0 var(--accent); }
[data-theme="bright"] .bottom { background: #f3f4f6; }
[data-theme="bright"] .toolbox, [data-theme="bright"] .right { box-shadow: 0 0 18px #0b2a6a22; }

/* toolbox */
[data-theme="bright"] .part:hover { border-color: #9db4dc; background: #eef4ff; }
[data-theme="bright"] .part-icon { background: #eef3fa; }
[data-theme="bright"] .tag { background: #2468e01a; }
[data-theme="bright"] .folder { background: #ffffff; }
[data-theme="bright"] .folder-head { color: var(--text); }
[data-theme="bright"] .folder-head:hover { background: #eef4ff; }
[data-theme="bright"] .folder.open .folder-head { background: #e8f0fc; }
[data-theme="bright"] .folder-head .fcount { background: #e5eaf3; }
[data-theme="bright"] .tb-search { background: #fff; }
[data-theme="bright"] .toolbox-foot button:hover { background: #e8eef8; }
[data-theme="bright"] .toolbox-list::-webkit-scrollbar-thumb, [data-theme="bright"] .console::-webkit-scrollbar-thumb,
[data-theme="bright"] .datatable::-webkit-scrollbar-thumb, [data-theme="bright"] .right-body::-webkit-scrollbar-thumb { background: #c3cbd9; }

/* toolbar buttons */
[data-theme="bright"] .seg { background: #ffffffd9; }
[data-theme="bright"] .seg button.active { background: #2468e0; color: #fff; box-shadow: none; }
[data-theme="bright"] .seg button[data-tool="delete"].active { background: #fde4e8; color: #c21f35; box-shadow: 0 0 0 1px #f0a8b3 inset; }
[data-theme="bright"] .tb { color: var(--text); background: #ffffffd9; }
[data-theme="bright"] .tb:hover { border-color: #8aa0c8; }
[data-theme="bright"] .zoom { background: #ffffffd9; }
[data-theme="bright"] .zoom span { color: var(--text); }
[data-theme="bright"] .chip { background: #ffffffd9; }
[data-theme="bright"] .chip.on { background: #e2f6ec; border-color: #7cc9a2; }
[data-theme="bright"] .chip[data-opt="electron"].on { background: #e1edff; border-color: #8bb3ee; color: #1f5fc9; }
[data-theme="bright"] .outline { color: var(--text); }
[data-theme="bright"] .outline:hover { border-color: #8aa0c8; background: #eef4ff; }
[data-theme="bright"] .end-hint { color: #fff; text-shadow: 0 1px 2px #0b2a6a88; }
[data-theme="bright"] .end-hint::before, [data-theme="bright"] .end-hint::after { border-top-color: #ffffffaa; }
[data-theme="bright"] .empty-hint { background: #ffffffe0; border-color: #8fb0e0; }
[data-theme="bright"] .tooltip { background: #fffffff2; box-shadow: 0 8px 22px #0b2a6a33; }
[data-theme="bright"] .tooltip .tt-row b { color: var(--text); }

/* bottom panel + data table */
[data-theme="bright"] .btab code { background: #e5eaf3; }
[data-theme="bright"] .icon-btn:hover { background: #e8eef8; }
[data-theme="bright"] .datatable th { background: #eef3fa; }
[data-theme="bright"] .datatable td { border-bottom-color: #e5eaf3; }
[data-theme="bright"] .datatable tr:hover td { background: #eef4ff; }
[data-theme="bright"] .datatable tr.sel td { background: #dcecff; }

/* right panel */
[data-theme="bright"] .card { background: #ffffff; }
[data-theme="bright"] .pill-outline { background: #e0f3fa; border-color: #7cc3da; }
[data-theme="bright"] .mini-select { background: #fff; }
[data-theme="bright"] .sel-card { border-color: #5bb3d1; box-shadow: 0 0 0 1px #0a86b433; }
[data-theme="bright"] .sel-icon { background: #eef3fa; }
[data-theme="bright"] .sel-lbl { background: #e0f3fa; border-color: #8ccbe0; }
[data-theme="bright"] .rd { background: #f3f6fb; }
[data-theme="bright"] .rd.r b { color: #3a46c4; }
[data-theme="bright"] .num-wrap { background: #fff; }
[data-theme="bright"] .num-wrap input { color: #243a8f; }
[data-theme="bright"] .prop select { background: #fff; }
[data-theme="bright"] input[type=range] { background: #c7d0e0; }
[data-theme="bright"] .toggle .sw { background: #c7d0e0; }
[data-theme="bright"] .toggle .sw::after { background: #fff; box-shadow: 0 1px 3px #0003; }
[data-theme="bright"] .lvl.on { color: var(--text); }
[data-theme="bright"] .sel-actions button { background: #fff; color: var(--text); }
[data-theme="bright"] .sel-actions button:hover { border-color: #8aa0c8; }
[data-theme="bright"] .sel-actions button.danger:hover { border-color: #e08b99; color: #c21f35; }
[data-theme="bright"] .props-empty .pe-icon { background: #eef3fa; }

/* dialogs */
[data-theme="bright"] .modal { background: #0b1a3399; }
[data-theme="bright"] .modal-body { color: var(--text); }
[data-theme="bright"] .modal-body b { color: #000; }
[data-theme="bright"] .modal-body h4 { color: var(--accent); }
[data-theme="bright"] kbd { background: #f3f6fb; color: var(--text); }
[data-theme="bright"] .boom-card { border-color: #e08b99; box-shadow: 0 30px 80px #0b1a3366; }
[data-theme="bright"] .boom-card h3 { color: #c21f35; }
[data-theme="bright"] .boom-item { background: #fff1f3; border-color: #f0b4bd; }
[data-theme="bright"] .boom-item b { color: #b3182d; }

/* ================= homework mode ================= */
.toast { position: fixed; left: 50%; bottom: 46px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 200; max-width: 80vw;
  padding: 10px 18px; border-radius: 10px; background: #1c222c; color: #eef2f9; border: 1px solid #3a4454; box-shadow: 0 12px 34px #0007; font-size: 13px; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { border-color: #ff5d6c; background: #2a1419; }
.badge-lock { font-size: 10.5px; color: #1a1300; background: #ffb02e; padding: 1px 7px; border-radius: 999px; font-weight: 700; }
.prop.locked { opacity: .5; pointer-events: none; }
body.mode-student #btnOpen, body.mode-student #exampleDrop, body.mode-student #btnClear, body.mode-grader #btnOpen { display: none !important; }
body.mode-student .vsep { display: none; }
.hw-card { padding: 12px; border-color: #7c86ff; box-shadow: 0 0 0 1px #7c86ff33; }
.hw-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.hw-head b { font-size: 14px; flex: 1; }
.hw-tag { font-size: 10px; font-weight: 700; letter-spacing: .5px; color: #fff; background: var(--accent); padding: 2px 8px; border-radius: 999px; }
.hw-desc { white-space: pre-wrap; line-height: 1.55; color: var(--text); font-size: 12.5px; user-select: text; margin-bottom: 8px; }
.hw-sub { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; color: var(--dim); text-transform: uppercase; margin: 8px 0 4px; }
.hw-rules { display: flex; flex-wrap: wrap; gap: 5px; }
.hw-rule { font-size: 11px; color: var(--muted); background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
.hw-goal { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; font-size: 12.5px; line-height: 1.4; }
.hw-goal i { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; background: var(--bg-2); border: 1px solid var(--border-2); color: var(--dim); margin-top: 1px; }
.hw-goal.ok i { background: var(--green); border-color: var(--green); color: #fff; }
.hw-goal.bad i { background: var(--red); border-color: var(--red); color: #fff; }
.hw-goal small { display: block; color: var(--dim); font-size: 11px; }
.hw-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.hw-actions button { padding: 6px 11px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--panel-2); font-size: 12px; }
.hw-actions button.main { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.hw-actions button:hover { filter: brightness(1.08); }
.hw-submit { margin-top: 10px; padding: 9px; border-radius: 9px; background: #12261b; border: 1px solid #1f6a47; font-size: 12px; }
.hw-submit.fail { background: #2a1419; border-color: #7a2432; }
.hw-submit input, .hw-submit textarea { width: 100%; margin-top: 6px; background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 7px; padding: 6px 8px; color: var(--text); font-family: var(--mono); font-size: 11px; user-select: text; }
.hw-submit textarea { height: 70px; resize: vertical; }
:root[data-theme="bright"] .hw-submit { background: #e6f7ee; border-color: #8fd1ae; }
:root[data-theme="bright"] .hw-submit.fail { background: #fde8eb; border-color: #eba0ab; }

/* ================= settings pop-up ================= */
.prop-popup { position: fixed; z-index: 120; width: 350px; max-width: calc(100vw - 20px); max-height: calc(100vh - 20px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border-2); border-radius: 14px; box-shadow: 0 24px 64px #000b, 0 0 0 1px #7c86ff22; animation: ppin .12s ease-out; }
@keyframes ppin { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.pp-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; background: var(--panel);
  border-bottom: 1px solid var(--border); cursor: grab; user-select: none; border-radius: 14px 14px 0 0; }
.pp-head b { flex: 1; font-size: 12px; font-weight: 600; color: var(--muted); }
.pp-head:active { cursor: grabbing; }
.prop-popup .props { padding: 10px; }
.prop-popup .sel-card { border: 0; box-shadow: none; padding: 0; background: transparent; }