:root {
  --sg-bg: var(--surface);
  --sg-grid: #e1e5ea;
  --sg-hdr: var(--surface-2);
  --sg-hdr-on: #d3e6ea;
  --sg-hdr-full: var(--accent);
  --sg-tint: rgba(14, 74, 89, .12);
  --sg-active: var(--sel-edge);
  --sg-text: var(--text);
  --sg-err: var(--danger);
  --sg-border: #1f2933;
  --sd-blue: #4472c4; --sd-blue-band: #dae3f3; --sd-green: #548235; --sd-green-band: #e2efda; --sd-orange: #c55a11; --sd-orange-band: #fbe5d6; --sd-gray: #595959; --sd-gray-band: #ededed;
  --sg-ref-0: #2f6fdf; --sg-ref-1: #c0392b; --sg-ref-2: #7d3c98; --sg-ref-3: #1e8449; --sg-ref-4: #b9770e; --sg-ref-5: #138d90;
}
:root[data-theme=dark] {
  --sg-grid: #26365a;
  --sg-hdr-on: #24425e;
  --sg-tint: rgba(143, 219, 224, .16);
  --sg-active: var(--sel-edge);
  --sg-border: #c9d4e3;
  --sd-blue: #2f5597; --sd-blue-band: #1c2b45; --sd-green: #3a5e25; --sd-green-band: #1d2c1a; --sd-orange: #8a3d0b; --sd-orange-band: #33221a; --sd-gray: #4a4a4a; --sd-gray-band: #262a30;
  --sg-ref-0: #7fa9ff; --sg-ref-1: #ff8a7d; --sg-ref-2: #d29bf0; --sg-ref-3: #6fd69a; --sg-ref-4: #f4c46e; --sg-ref-5: #6fd8db;
}

.ss-listpage .vbar .input { inline-size: 240px; max-inline-size: 100%; }
.ss-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-block-start: 12px; }
.ss-tile { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.ss-tile:hover, .ss-tile:focus-within { border-color: var(--line-strong); box-shadow: var(--shadow); }
.ss-open { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.ss-open:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ss-thumbbox { block-size: 132px; overflow: hidden; background: var(--sg-bg); border-block-end: 1px solid var(--line); }
.ss-thumb { border-collapse: collapse; table-layout: fixed; inline-size: 100%; font-size: 11px; color: var(--text-2); }
.ss-thumb td { border: 1px solid var(--sg-grid); block-size: 21px; padding-inline: 4px; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.ss-thumb td.n { text-align: end; }
.ss-tname { font-weight: 600; padding-block: 8px 2px; padding-inline: 10px 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-tmeta { padding-block: 0 8px; padding-inline: 10px; }
.ss-tmenu { position: absolute; inset-inline-end: 6px; inset-block-end: 22px; }

.ss-page { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); }
.ss-gridhost { flex: 1; min-block-size: 0; position: relative; display: flex; }
.ss-loading { margin: auto; }
.ss-views { flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--panel); border-block-end: 1px solid var(--line); min-block-size: 34px; overflow-x: auto; }
.ss-viewslabel { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-inline-end: 2px; }
.ss-viewtabs { display: flex; gap: 2px; }
.ss-viewtab { display: inline-flex; align-items: center; gap: 4px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--text-2); padding: 3px 10px; font: inherit; font-size: var(--fs-sm); white-space: nowrap; }
.ss-viewtab:hover { background: var(--hover); color: var(--text); }
.ss-viewtab.on { background: var(--accent-2); border-color: var(--accent); color: var(--text); font-weight: 600; }
.ss-viewtab:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ss-vic { font-size: 11px; }
.ss-dirty { color: var(--warn); font-weight: 700; }
.ss-unsaved { font-size: var(--fs-sm); color: var(--warn); background: var(--warn-bg); border-radius: var(--r-pill, 999px); padding: 2px 8px; }
.ss-tabs { flex: none; display: flex; align-items: center; gap: 4px; padding: 3px 8px; background: var(--panel); border-block-start: 1px solid var(--line); min-block-size: 36px; overflow-x: auto; }
.ss-sheettabs { display: flex; gap: 2px; min-inline-size: 0; }
.ss-sheettab { --ss-tab: transparent; position: relative; border: 1px solid var(--line); border-block-start-color: transparent; border-radius: 0 0 6px 6px; background: var(--surface-2); color: var(--text-2); padding: 4px 14px; font: inherit; font-size: var(--fs-sm); white-space: nowrap; box-shadow: inset 0 -3px 0 var(--ss-tab); }
.ss-sheettab.colored { background: color-mix(in srgb, var(--ss-tab) 22%, var(--surface-2)); box-shadow: inset 0 -4px 0 var(--ss-tab); }
.ss-sheettab.colored.on { background: var(--sg-bg); box-shadow: inset 0 -5px 0 var(--ss-tab); }
.ss-sheettab:hover { color: var(--text); background: var(--hover); }
.ss-sheettab.on { background: var(--sg-bg); color: var(--text); font-weight: 600; border-color: var(--line-strong); border-block-start-color: var(--sg-bg); }
.ss-sheettab.drop { outline: 2px dashed var(--accent); }
.ss-sheettab:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ss-srename { font: inherit; inline-size: 12ch; border: 1px solid var(--accent); padding: 0 4px; background: var(--input-bg); color: var(--text); }
.ss-hiddeninfo { margin-inline-start: 6px; }
.ss-status { flex: none; display: flex; align-items: center; gap: 14px; padding: 2px 12px; min-block-size: 24px; font-size: var(--fs-xs); background: var(--panel-2); border-block-start: 1px solid var(--line); color: var(--text-2); }
.ss-note { color: var(--warn); }
.ss-stats { display: flex; gap: 14px; }
.ss-stat { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ss-who { display: flex; flex-direction: column; gap: 6px; }
.ss-keytable { inline-size: 100%; border-collapse: collapse; }
.ss-keytable th, .ss-keytable td { text-align: start; padding: 4px 8px; border-block-end: 1px solid var(--line-2); vertical-align: top; }
.ss-keytable kbd { font-family: var(--mono); font-size: var(--fs-xs); white-space: nowrap; }

.sg-barwrap { flex: none; background: var(--panel); border-block-end: 1px solid var(--line); }
.sg-bar { display: flex; align-items: flex-start; gap: 6px; padding: 4px 8px; }
.sg-namewrap { position: relative; display: flex; flex: none; }
.sg-namebox { inline-size: 120px; block-size: 26px; font: inherit; font-size: var(--fs-sm); border: 1px solid var(--border); border-start-start-radius: 4px; border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: 4px; border-start-end-radius: 0; border-end-end-radius: 0; padding-inline: 6px; background: var(--input-bg); color: var(--text); }
.sg-namebtn { block-size: 26px; inline-size: 20px; border: 1px solid var(--border); border-inline-start: 0; border-start-end-radius: 4px; border-end-end-radius: 4px; background: var(--surface-2); color: var(--text-2); padding: 0; font-size: 10px; }
.sg-names { position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: 40; min-inline-size: 180px; max-block-size: 260px; overflow: auto; margin: 2px 0 0; padding: 4px 0; list-style: none; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow-pop); }
.sg-name-o { padding: 4px 10px; cursor: pointer; }
.sg-name-o:hover, .sg-name-o.on { background: var(--sel-bg); }
.sg-name-empty { padding: 4px 10px; color: var(--muted); }
.sg-fxbtns { display: flex; gap: 2px; flex: none; }
.sg-fxbtn { block-size: 26px; min-inline-size: 26px; }
.sg-fxfn { font-style: italic; font-family: Georgia, "Times New Roman", serif; }
.sg-fx-wrap { position: relative; flex: 1; min-inline-size: 0; }
.sg-fx-input, .sg-fx-mirror { box-sizing: border-box; inline-size: 100%; margin: 0; font: inherit; font-family: var(--mono); font-size: var(--fs-sm); line-height: 18px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 4px; white-space: pre-wrap; word-break: break-all; overflow-wrap: anywhere; }
.sg-fx-input { display: block; block-size: 26px; resize: none; overflow: hidden; background: var(--input-bg); color: var(--text); position: relative; z-index: 1; }
.sg-bar.open .sg-fx-input { block-size: 96px; overflow: auto; }
.sg-fx-mirror { position: absolute; inset: 0; z-index: 2; pointer-events: none; color: var(--text); overflow: hidden; border-color: transparent; background: transparent; display: none; }
.sg-fx-wrap.has-refs .sg-fx-mirror { display: block; }
.sg-fx-wrap.has-refs .sg-fx-input { color: transparent; caret-color: var(--text); }
.sg-fx-input:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px; }
.sg-fx-err { margin: 0 8px 4px; padding: 4px 8px; border-radius: 4px; background: var(--danger-bg); color: var(--danger); font-size: var(--fs-sm); }

.sg { position: relative; flex: 1; min-inline-size: 0; display: flex; background: var(--sg-bg); color: var(--sg-text); font-size: var(--fs-sm); }
.sg-grid { position: relative; flex: 1; min-inline-size: 0; display: flex; }
.sg-scroll { position: relative; flex: 1; overflow: auto; overscroll-behavior: contain; outline: none; }
.sg-canvas { position: relative; }
.sg-top { position: sticky; top: 0; z-index: 3; background: var(--sg-bg); }
.sg-corner { position: sticky; inset-inline-start: 0; top: 0; z-index: 4; background: var(--sg-bg); }
.sg-body { position: relative; }
.sg-left { position: sticky; inset-inline-start: 0; z-index: 2; background: var(--sg-bg); }
.sg-layer { position: absolute; inset-inline-start: 0; top: 0; inset-inline-end: 0; bottom: 0; }
.sg-row { position: absolute; inset-inline-start: 0; inset-inline-end: 0; }
.sg-cell { position: absolute; top: 0; bottom: 0; box-sizing: border-box; border-inline-end: 1px solid var(--sg-grid); border-bottom: 1px solid var(--sg-grid); padding: 0 3px; line-height: 20px; white-space: nowrap; display: flex; align-items: flex-end; outline: none; cursor: cell; }
.sg-nogrid .sg-cell { border-color: transparent; }
.sg-t { display: block; overflow: hidden; text-overflow: clip; white-space: nowrap; max-inline-size: 100%; flex: 1; text-align: start; position: relative; z-index: 1; }
.sg-cell.sg-n .sg-t { text-align: end; font-variant-numeric: tabular-nums; }
.sg-cell.sg-c .sg-t { text-align: center; }
.sg-cell.sg-err .sg-t { color: var(--sg-err); }
.sg-cell.sg-wrap { white-space: normal; align-items: flex-start; }
.sg-cell.sg-wrap .sg-t { white-space: pre-wrap; overflow-wrap: anywhere; }
.sg-cell.sg-imported { padding-inline-start: 19px; }
.sg-kept-badge { position: absolute; inset-inline-start: 2px; top: 50%; transform: translateY(-50%); font-size: 9px; line-height: 11px; padding: 0 2px; border: 1px solid var(--warn); border-radius: 3px; color: var(--text); background: var(--warn-bg); text-decoration: line-through; font-style: italic; pointer-events: none; }
.sg-fx-note { margin: 0 8px 4px; padding: 4px 8px; border-radius: 4px; background: var(--warn-bg); color: var(--text); border-inline-start: 3px solid var(--warn); font-size: var(--fs-sm); }
.sg-hdr { position: absolute; top: 0; bottom: 0; box-sizing: border-box; background: var(--sg-hdr); color: var(--text-2); border-inline-end: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: var(--fs-xs); display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; cursor: default; font-variant-numeric: tabular-nums; }
.sg-ch { cursor: s-resize; }
.sg-rh { inset-inline-start: 0; cursor: e-resize; }
.sg-hdr.on { background: var(--sg-hdr-on); color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--sg-active); }
.sg-rh.on { box-shadow: inset -2px 0 0 var(--sg-active); }
.sg-hdr.full { background: var(--sg-hdr-full); color: var(--on-fill, #fff); }
.sg-all { inset-inline-start: 0; cursor: pointer; }
.sg-all::after { content: ""; position: absolute; inset-inline-end: 3px; bottom: 3px; border-style: solid; border-block-width: 0 9px; border-inline-width: 9px 0; border-color: transparent transparent var(--line-strong) transparent; }
.sg-frozen-r .sg-top { box-shadow: 0 1px 0 var(--line-strong); }
.sg-frozen-c .sg-left, .sg-frozen-c .sg-corner { box-shadow: 1px 0 0 var(--line-strong); }
.sg-tint, .sg-ov { position: absolute; inset-inline-start: 0; top: 0; pointer-events: none; }
.sg-ov { z-index: 2; }
.sg-seltint, .sg-untint, .sg-selbox, .sg-active, .sg-refbox { position: absolute; box-sizing: border-box; }
.sg-seltint { background: var(--sg-tint); }
.sg-untint { background: var(--sg-bg); }
.sg-selbox { border: 1px solid var(--sg-active); }
.sg-selbox.cut-t { border-top: 0; } .sg-selbox.cut-b { border-bottom: 0; } .sg-selbox.cut-l { border-inline-start: 0; } .sg-selbox.cut-r { border-inline-end: 0; }
.sg-active { border: 2px solid var(--sg-active); margin-block: -1px 0; margin-inline: -1px 0; padding: 1px; }
.sg-active.sg-editing { border-style: solid; opacity: .5; }
.sg-refbox { border: 2px dashed currentColor; }
.sg-ref-0 { color: var(--sg-ref-0); } .sg-ref-1 { color: var(--sg-ref-1); } .sg-ref-2 { color: var(--sg-ref-2); } .sg-ref-3 { color: var(--sg-ref-3); } .sg-ref-4 { color: var(--sg-ref-4); } .sg-ref-5 { color: var(--sg-ref-5); }
.sg-cell:focus { outline: none; }
.sg-cell:focus-visible { outline: none; }
.sg-float { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.sg-editor { position: absolute; pointer-events: auto; box-sizing: border-box; margin: 0; resize: none; overflow: hidden; font: inherit; line-height: 19px; padding: 0 3px; border: 2px solid var(--sg-active); background: var(--sg-bg); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: var(--shadow-pop); outline: none; }
.sg-editor.sg-n { text-align: end; }
.sg-ac { position: absolute; pointer-events: auto; z-index: 12; margin: 0; padding: 4px 0; list-style: none; min-inline-size: 240px; max-inline-size: 420px; max-block-size: 240px; overflow: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow-pop); font-size: var(--fs-sm); }
.sg-ac-o { padding: 3px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-ac-o.on, .sg-ac-o:hover { background: var(--sel-bg); }
.sg-hint { position: absolute; z-index: 11; padding: 3px 8px; border-radius: 4px; background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow); font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; }
.sg-guide { position: absolute; z-index: 9; pointer-events: none; background: var(--sg-active); }
.sg-guide.col { top: 0; bottom: 0; inline-size: 1px; }
.sg-guide.row { inset-inline-start: 0; inset-inline-end: 0; block-size: 1px; }
.sg-sizetip { position: absolute; z-index: 9; pointer-events: none; padding: 2px 6px; border-radius: 4px; background: var(--text); color: var(--sg-bg); font-size: var(--fs-xs); }
@media (prefers-reduced-motion: reduce) { .sg-scroll { scroll-behavior: auto; } }
@media (forced-colors: active) {
  .sg-active { border-color: Highlight; }
  .sg-selbox { border-color: Highlight; }
  .sg-hdr.on { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}
@media print { .ss-views, .ss-tabs, .ss-status, .sg-barwrap, .dtb { display: none !important; } }

.sg-cell.sg-composing { z-index: 3; background: var(--sg-bg); white-space: pre; overflow: visible; }
.sg-cell.sg-composing > .sg-t { display: none; }
.sg-cell[contenteditable=true] { caret-color: transparent; }
.sg-cell.sg-composing[contenteditable=true] { caret-color: auto; outline: 2px solid var(--sg-active); }
.se-fillh { position: absolute; inline-size: 7px; block-size: 7px; background: var(--sg-active); border: 1px solid var(--sg-bg); box-sizing: border-box; cursor: crosshair; pointer-events: auto; }
.se-fillprev { position: absolute; border: 1px dashed var(--sg-active); box-sizing: border-box; }
.se-marquee { position: absolute; box-sizing: border-box; border: 2px dashed var(--sg-active); animation: se-march 1s linear infinite; }
@keyframes se-march { 50% { border-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .se-marquee { animation: none; } }
.se-afo { position: absolute; pointer-events: auto; inline-size: 22px; block-size: 18px; padding: 0; font-size: var(--fs-xs); background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 3px; cursor: pointer; }
.se-afo:focus-visible { outline: 2px solid var(--focus, var(--sg-active)); }
.se-radios { display: flex; flex-direction: column; gap: 4px; }
.se-radios label { display: flex; align-items: center; gap: 6px; }
.se-form fieldset { border: 0; padding: 0; margin: 0 0 8px; }
.sg-cell.sg-bordered { border-color: transparent; }
.sf-tb.sf-b { font-weight: 700; } .sf-tb.sf-i { font-style: italic; } .sf-tb.sf-u { text-decoration: underline; } .sf-tb.sf-a { text-decoration: underline 3px; }
.sf-tb[aria-pressed=true] { background: var(--sg-hdr-on); }
.sf-sw { display: inline-block; inline-size: 14px; block-size: 14px; border: 1px solid var(--border); border-radius: 2px; vertical-align: middle; margin-inline-end: 6px; }
.sf-tabs { display: flex; gap: 2px; border-block-end: 1px solid var(--border); margin-block-end: 10px; }
.sf-tabbtn { padding: 6px 12px; border: 1px solid transparent; border-block-end: 0; background: none; color: var(--text-2); border-radius: 4px 4px 0 0; cursor: pointer; font: inherit; }
.sf-tabbtn.on { background: var(--panel); color: var(--text); border-color: var(--border); font-weight: 600; margin-block-end: -1px; }
.sf-tabbtn:focus-visible { outline: 2px solid var(--focus, var(--sg-active)); outline-offset: -2px; }
.sf-tab { min-block-size: 280px; display: flex; flex-direction: column; gap: 8px; }
.sf-numgrid { display: grid; grid-template-columns: minmax(150px, 1fr) 2fr; gap: 16px; }
.sf-numgrid select[size] { inline-size: 100%; }
.sf-opts { display: flex; flex-direction: column; gap: 8px; margin-block-start: 8px; }
.sf-row { display: flex; flex-direction: column; gap: 2px; }
.sf-sample { display: block; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--sg-bg); font-variant-numeric: tabular-nums; min-block-size: 1.5em; }
.sf-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.sf-colorfield { display: inline-flex; align-items: center; gap: 10px; }
.sf-color { inline-size: 44px; block-size: 28px; padding: 0; border: 1px solid var(--border); border-radius: 4px; background: none; }
@media (max-width: 640px) { .sf-numgrid { grid-template-columns: 1fr; } }
.cf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-block-size: 50vh; overflow: auto; }
.cf-item { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; }
.cf-swatch { inline-size: 36px; text-align: center; border: 1px solid var(--border); border-radius: 3px; font-size: var(--fs-xs); }
.cf-acts { display: flex; gap: 4px; }
.sd-levels { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sd-level { display: grid; grid-template-columns: 70px 1fr auto auto; gap: 6px; align-items: center; }
.sd-fs { border: 1px solid var(--border); border-radius: 4px; padding: 8px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.sd-fs legend { padding-inline: 4px; font-weight: 600; }
.sd-sortrow { display: flex; gap: 6px; }
.sd-values { list-style: none; margin: 0; padding: 4px; max-block-size: 220px; overflow: auto; border: 1px solid var(--border); border-radius: 4px; background: var(--sg-bg); }
.sd-cond { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sd-cond .input { flex: 1 1 120px; min-inline-size: 0; }
.sg-cell.sd-hasfbtn { padding-inline-end: 20px; }
.sd-fbtn, .sd-dvbtn { position: absolute; inset-inline-end: 1px; inset-block-end: 1px; inline-size: 17px; block-size: 17px; padding: 0; font-size: 10px; line-height: 1; border: 1px solid var(--border); border-radius: 2px; background: var(--panel); color: var(--text-2); cursor: pointer; }
.sd-fbtn.on, .sd-fbtn.sorted { color: var(--sg-active); border-color: var(--sg-active); }
.sd-fbtn.on::after { content: ''; position: absolute; inset-inline-end: 1px; inset-block-start: 1px; inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--sg-active); }
.sd-tcell.sd-th { font-weight: 700; color: #fff; }
.sd-tcell.sd-th.sd-t-blue { background: var(--sd-blue); } .sd-tcell.sd-th.sd-t-green { background: var(--sd-green); } .sd-tcell.sd-th.sd-t-orange { background: var(--sd-orange); } .sd-tcell.sd-th.sd-t-gray { background: var(--sd-gray); }
.sd-tcell.sd-band.sd-t-blue { background: var(--sd-blue-band); } .sd-tcell.sd-band.sd-t-green { background: var(--sd-green-band); } .sd-tcell.sd-band.sd-t-orange { background: var(--sd-orange-band); } .sd-tcell.sd-band.sd-t-gray { background: var(--sd-gray-band); }
.sd-tcell.sd-ttotal { font-weight: 700; box-shadow: inset 0 2px 0 var(--sg-border); }
.sd-inputmsg { position: absolute; z-index: 11; max-inline-size: 260px; padding: 6px 8px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 4px; box-shadow: var(--shadow-pop); font-size: var(--fs-xs); pointer-events: none; }
.sg-cell.sn-has::after { content: ''; position: absolute; inset-inline-end: 0; inset-block-start: 0; border-style: solid; border-block-width: 0 6px; border-inline-width: 0 6px; border-block-color: transparent; border-inline-color: transparent #c0392b; }
.sn-box { position: absolute; z-index: 12; inline-size: 260px; padding: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 6px; }
.sn-text { inline-size: 100%; box-sizing: border-box; resize: vertical; }
.sn-acts { display: flex; justify-content: flex-end; gap: 6px; }
.sx-bar { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; border-block-end: 1px solid var(--border); background: var(--surface-2); }
.sx-bar[hidden], .sx-bar .sx-row[hidden], .sx-results[hidden] { display: none; }
.sx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sx-row > .input[type=search], .sx-row > .input[type=text] { flex: 1 1 200px; min-inline-size: 0; }
.sx-status { color: var(--text-2); font-size: var(--fs-xs); margin-inline-start: auto; }
.sx-results { list-style: none; margin: 0; padding: 0; max-block-size: 180px; overflow: auto; border: 1px solid var(--border); border-radius: 4px; background: var(--sg-bg); }
button.sx-hit { display: grid; grid-template-columns: 110px 1fr; gap: 8px; inline-size: 100%; text-align: start; padding: 3px 6px; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; }
button.sx-hit:hover, button.sx-hit:focus-visible { background: var(--sg-tint); }
.sx-where { font-variant-numeric: tabular-nums; color: var(--text-2); }
.sx-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (forced-colors: active) {
  .se-fillh { forced-color-adjust: none; background: Highlight; border-color: Canvas; }
  .se-fillprev, .se-marquee { border-color: Highlight; }
  .sd-fbtn, .sd-dvbtn, .se-afo { border-color: ButtonText; }
  .sd-fbtn.on, .sd-fbtn.sorted { border-color: Highlight; color: Highlight; }
  .sd-tcell.sd-th { border-block-end: 2px solid CanvasText; }
  .sg-cell.sn-has::after { border-block-color: transparent; border-inline-color: transparent Mark; forced-color-adjust: none; }
  .sg-cell.sg-cf { forced-color-adjust: auto; }
  .sf-tabbtn.on { border-color: Highlight; }
  .sg-cell.sg-composing { outline-color: Highlight; }
}
.sg-cell.sg-merged { z-index: 1; }
.sg-top, .sg-left, .sg-corner { overflow: clip; }
.sg-ghost { pointer-events: none; }
.sg-cell.sg-covered { visibility: hidden; }
:root { --sg-model: rgba(47, 111, 223, .07); --sg-model-h: rgba(47, 111, 223, .16); --sg-model-edge: #2f6fdf; }
:root[data-theme=dark] { --sg-model: rgba(127, 169, 255, .10); --sg-model-h: rgba(127, 169, 255, .22); --sg-model-edge: #7fa9ff; }
.sg-cell.sg-model { background: var(--sg-model); cursor: default; }
.sg-cell.sg-model-h { background: var(--sg-model-h); font-weight: 600; }
.sg-cell.sg-model-h::before { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; border-block-end: 2px solid var(--sg-model-edge); }
.sm-dialog .sm-kinds { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.sm-dialog .sm-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 12px; max-block-size: 220px; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 6px; }
.sm-dialog .sm-cols-legend { grid-column: 1 / -1; font-weight: 600; }
.sm-dialog .sm-col { display: flex; align-items: center; gap: 4px; }
@media (forced-colors: active) { .sg-cell.sg-model-h::before { border-color: CanvasText; } }

.pg-title.ss-renamable { cursor: text; }
.pg-title .ss-title-input { font: inherit; inline-size: min(40ch, 100%); padding: 0 4px; }