/* TlbxGuides panel. Themed with the same --sui-* tokens as TlbxUI (falling back to common app tokens). */
.sgd-panel {
  --g-bg: var(--sui-bg, var(--panel, #232323));
  --g-bg2: var(--sui-bg2, var(--panel-2, #2c2c2c));
  --g-input: var(--sui-input, var(--input, #161616));
  --g-line: var(--sui-line, var(--line-2, #3d3d3d));
  --g-fg: var(--sui-fg, var(--fg, #e6e6e6));
  --g-dim: var(--sui-dim, var(--fg-dim, #a0a0a0));
  --g-faint: var(--sui-faint, var(--fg-faint, #6c6c6c));
  --g-hover: var(--sui-hover, var(--hover, #3a3a3a));
  --g-accent: var(--sui-accent, var(--accent, #a2fff6));
  --g-accent-ink: var(--sui-accent-ink, var(--accent-ink, #0a1817));
  --g-radius: var(--sui-radius, var(--radius, 6px));
  --g-shadow: var(--sui-shadow, var(--shadow, 0 18px 50px rgba(0, 0, 0, .55)));
  --g-font: var(--sui-font, var(--ui, "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif));
  --g-mono: var(--sui-mono, var(--mono, "JetBrains Mono", ui-monospace, monospace));
  position: fixed; z-index: 900; right: 16px; top: 96px; width: 304px; max-height: calc(100vh - 120px);
  display: flex; flex-direction: column; background: var(--g-bg); color: var(--g-fg); border: 1px solid var(--g-line);
  border-radius: calc(var(--g-radius) + 3px); box-shadow: var(--g-shadow); font: 12px/1.4 var(--g-font); animation: sgd-in .16s ease-out;
}
@keyframes sgd-in { from { opacity: 0; transform: translateY(6px); } }
.sgd-panel.sgd-moved { margin: 0; }
.sgd-panel *, .sgd-panel *::before { box-sizing: border-box; }
.sgd-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 12px; border-bottom: 1px solid var(--g-line); font-weight: 600; cursor: move; user-select: none; touch-action: none; }
.sgd-x { width: 26px; height: 26px; border: 0; background: none; border-radius: 4px; font-size: 18px; line-height: 1; color: var(--g-dim); cursor: pointer; }
.sgd-x:hover { background: var(--g-hover); color: var(--g-fg); }
.sgd-body { padding: 10px 12px 4px; overflow-y: auto; min-height: 0; flex: 1; }
.sgd-foot { padding: 8px 12px 10px; border-top: 1px solid var(--g-line); }
.sgd-row2 { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.sgd-f { display: flex; align-items: center; gap: 6px; color: var(--g-dim); min-width: 0; }
.sgd-f select { flex: 1; min-width: 0; }
.sgd-in { height: 26px; min-width: 0; padding: 3px 6px; background: var(--g-input); color: var(--g-fg); border: 1px solid var(--g-line); border-radius: var(--g-radius); font: inherit; }
.sgd-in:focus-visible, .sgd-btn:focus-visible, .sgd-tab:focus-visible, .sgd-chip:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 1px; }
.sgd-unit { width: 58px; }
.sgd-num { width: 100%; font-family: var(--g-mono); font-size: 11px; }
.sgd-num.sgd-bad { border-color: #e5484d; }
.sgd-code { width: 100%; height: auto; min-height: 92px; resize: vertical; font: 12px/1.5 var(--g-mono); }
.sgd-presets { display: flex; gap: 6px; margin-bottom: 8px; }
.sgd-preset { flex: 1; }
.sgd-btn { height: 26px; padding: 0 10px; border-radius: var(--g-radius); border: 1px solid var(--g-line); background: var(--g-bg2); color: var(--g-fg); font: inherit; cursor: pointer; white-space: nowrap; }
.sgd-btn:hover:not(:disabled) { background: var(--g-hover); }
.sgd-btn:disabled { opacity: .5; cursor: default; }
.sgd-btn.sgd-primary { background: var(--g-accent); color: var(--g-accent-ink); border-color: transparent; font-weight: 600; }
.sgd-btn.sgd-icon { width: 28px; padding: 0; }
.sgd-btn.sgd-on { border-color: var(--g-accent); color: var(--g-accent); }
.sgd-tabs { display: flex; gap: 2px; margin: 2px 0 10px; padding: 2px; background: var(--g-input); border-radius: var(--g-radius); }
.sgd-tab { flex: 1; height: 24px; border: 0; border-radius: calc(var(--g-radius) - 2px); background: none; color: var(--g-dim); font: inherit; cursor: pointer; }
.sgd-tab.sgd-on { background: var(--g-bg2); color: var(--g-fg); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); font-weight: 600; }
.sgd-group { border: 0; padding: 0; margin: 0 0 10px; min-width: 0; }
.sgd-group legend { padding: 0; margin-bottom: 4px; font-size: 11px; font-weight: 600; color: var(--g-dim); text-transform: uppercase; letter-spacing: .04em; }
.sgd-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sgd-cells5 { grid-template-columns: repeat(4, 1fr) 28px; align-items: start; }
.sgd-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 10px; color: var(--g-faint); }
.sgd-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; margin-bottom: 6px; }
.sgd-chk { display: inline-flex; align-items: center; gap: 6px; color: var(--g-dim); cursor: pointer; }
.sgd-chk input { accent-color: var(--g-accent); margin: 0; }
.sgd-status { min-height: 16px; margin-bottom: 8px; font-size: 11px; color: var(--g-faint); }
.sgd-status.sgd-err { color: #ff6b70; }
.sgd-btns { display: flex; justify-content: flex-end; gap: 6px; }
.sgd-btns .sgd-primary { min-width: 72px; }
.sgd-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0; color: var(--g-faint); font-size: 11px; }
.sgd-chip { padding: 1px 6px; border: 1px solid var(--g-line); border-radius: 10px; background: var(--g-bg2); color: var(--g-fg); font: 11px var(--g-mono); cursor: pointer; }
.sgd-chip:hover { background: var(--g-hover); }
.sgd-syntax summary { cursor: pointer; color: var(--g-dim); font-size: 11px; margin-bottom: 4px; }
.sgd-help { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0 0 6px; font-size: 11px; }
.sgd-help dt { font-family: var(--g-mono); color: var(--g-accent); white-space: nowrap; }
.sgd-help dd { margin: 0; color: var(--g-dim); }
.sgd-hint { margin: 0 0 8px; color: var(--g-faint); font-size: 11px; }
/* Windows 98 themes */
[data-theme="paint"] .sgd-panel, [data-theme="classic"] .sgd-panel { background: #c0c0c0; color: #000; border: 0; border-radius: 0; padding: 3px; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf, 2px 2px 0 rgba(0, 0, 0, .4); font: 11px "MS Sans Serif", Tahoma, sans-serif; --g-dim: #000; --g-faint: #404040; --g-accent: #000080; }
[data-theme="paint"] .sgd-head, [data-theme="classic"] .sgd-head { background: linear-gradient(90deg, #000080, #0a5ea8); color: #fff; border: 0; padding: 2px 3px 2px 6px; }
[data-theme="paint"] .sgd-x, [data-theme="classic"] .sgd-x { width: 16px; height: 14px; background: #c0c0c0; color: #000; border-radius: 0; font-size: 12px; font-weight: 700; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff; }
[data-theme="paint"] .sgd-in, [data-theme="classic"] .sgd-in { background: #fff; color: #000; border: 0; border-radius: 0; box-shadow: inset 1px 1px #808080, inset -1px -1px #fff; }
[data-theme="paint"] .sgd-btn, [data-theme="classic"] .sgd-btn, [data-theme="paint"] .sgd-tab.sgd-on, [data-theme="classic"] .sgd-tab.sgd-on { background: #c0c0c0; color: #000; border: 0; border-radius: 0; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080; }
[data-theme="paint"] .sgd-btn.sgd-primary, [data-theme="classic"] .sgd-btn.sgd-primary { outline: 1px solid #000; outline-offset: -1px; }
[data-theme="paint"] .sgd-tabs, [data-theme="classic"] .sgd-tabs { background: #a8a8a8; border-radius: 0; }
[data-theme="paint"] .sgd-foot, [data-theme="classic"] .sgd-foot { border-color: #808080; }
@media (max-width: 700px) {
  .sgd-panel, .sgd-panel.sgd-moved { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0; width: auto; max-height: 58vh; border-radius: 12px 12px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .sgd-in { height: 32px; font-size: 16px; }
  .sgd-num { font-size: 14px; }
  .sgd-btn { height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .sgd-panel { animation: none; } }