[class*="fg-theme-"] {
  --fg-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans", sans-serif;
  --fg-font-size: 13px;
  --fg-radius: 8px;
  --fg-cell-px: 12px;
  --fg-shadow: 0 12px 32px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .08);
}
.fg-theme-light {
  --fg-bg: #ffffff; --fg-fg: #1f2430; --fg-muted: #636b7c;
  --fg-header-bg: #f6f7f9; --fg-header-fg: #39404f; --fg-border: #e3e6eb; --fg-row-border: #eef0f3;
  --fg-row-odd: #fbfbfc; --fg-row-hover: #f2f6ff; --fg-row-selected: #e3edff;
  --fg-accent: #2563eb; --fg-accent-fg: #ffffff; --fg-focus: #2563eb; --fg-popup-bg: #ffffff; --fg-input-bg: #ffffff;
}
.fg-theme-dark {
  --fg-bg: #11141b; --fg-fg: #e6e9f0; --fg-muted: #8c95a8;
  --fg-header-bg: #171b24; --fg-header-fg: #c9cfdc; --fg-border: #262c38; --fg-row-border: #1c212b;
  --fg-row-odd: #13171f; --fg-row-hover: #1a2233; --fg-row-selected: #1d3157;
  --fg-accent: #4f8cff; --fg-accent-fg: #0b0d12; --fg-focus: #4f8cff; --fg-popup-bg: #171b24; --fg-input-bg: #0f1218;
  --fg-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
.fg-root {
  position: relative; display: flex; flex-direction: row; box-sizing: border-box;
  width: 100%; height: 100%; overflow: hidden; outline: none;
  font: var(--fg-font-size)/1.4 var(--fg-font); color: var(--fg-fg); background: var(--fg-bg);
  border: 1px solid var(--fg-border); border-radius: var(--fg-radius);
  border-top: var(--fg-top-border, 1px solid var(--fg-border));
  font-variant-numeric: tabular-nums;
}
.fg-root *, .fg-menu * { box-sizing: border-box; }
.fg-main { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.fg-grid { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; outline: none; }
.fg-root [hidden], .fg-menu [hidden] { display: none !important; }
.fg-header { display: flex; flex: none; background: var(--fg-header-bg); color: var(--fg-header-fg); border-bottom: var(--fg-header-border, 1px solid var(--fg-border)); }
.fg-header-pane { position: relative; overflow: hidden; flex: none; }
.fg-header-pane-center { flex: 1 1 0; min-width: 0; }
.fg-header-pane-left { border-right: 1px solid var(--fg-border); }
.fg-header-pane-right { border-left: 1px solid var(--fg-border); }
.fg-header-inner { position: relative; will-change: transform; }
.fg-header-cell {
  position: absolute; display: flex; align-items: center; gap: 6px; padding: 0 var(--fg-cell-px);
  font-weight: var(--fg-header-weight, 600); white-space: nowrap; overflow: hidden; user-select: none;
  box-shadow: inset -1px -1px 0 var(--fg-header-line, var(--fg-row-border));
}
.fg-header-group { justify-content: center; }
.fg-header-cell.fg-sortable { cursor: pointer; }
.fg-header-cell.fg-align-right { flex-direction: row-reverse; }
.fg-header-cell.fg-align-center { justify-content: center; }
/* the label takes the free space (the menu button's auto margin would otherwise push it to the start) */
.fg-header-cell.fg-align-center .fg-header-label { flex: 1 1 auto; text-align: center; }
.fg-header-label { overflow: hidden; text-overflow: ellipsis; flex: var(--fg-header-label-flex, 0 1 auto); text-align: var(--fg-header-text-align, left); }
.fg-sort-icon { color: var(--fg-accent); font-size: 12px; }
.fg-sort-icon sup { font-size: 9px; margin-left: 1px; }
.fg-menu-btn {
  margin-left: auto; display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none;
  border: 0; border-radius: 5px; background: none; color: var(--fg-muted); cursor: pointer; opacity: 0; transition: opacity .12s;
}
/* the hidden button takes no room, so narrow columns keep their label; on hover it shows over the label's end.
   An active filter's button stays in the row, always visible. */
.fg-menu-btn:not(.fg-filter-active) {
  position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); margin: 0; background: var(--fg-header-bg);
}
.fg-header-cell.fg-align-right .fg-menu-btn { margin-left: 0; margin-right: auto; }
.fg-header-cell.fg-align-right .fg-menu-btn:not(.fg-filter-active) { inset-inline-end: auto; inset-inline-start: 6px; }
.fg-header-cell:hover .fg-menu-btn, .fg-menu-btn:focus-visible, .fg-menu-btn.fg-filter-active { opacity: 1; }
.fg-menu-btn:hover { background: var(--fg-row-hover); color: var(--fg-fg); }
.fg-menu-btn.fg-filter-active { color: var(--fg-accent); }
.fg-resize { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 1; }
.fg-resize:hover, .fg-resizing .fg-resize:active { background: linear-gradient(90deg, transparent 5px, var(--fg-accent) 5px, var(--fg-accent) 8px); }
.fg-resizing { cursor: col-resize; user-select: none; }
.fg-header-cell.fg-dragging { opacity: .45; }
.fg-drop-marker { position: absolute; top: 0; width: 2px; background: var(--fg-accent); z-index: 5; pointer-events: none; }
.fg-drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none; padding: 6px 10px; border-radius: 6px;
  font: 600 var(--fg-font-size) var(--fg-font); color: var(--fg-fg); background: var(--fg-popup-bg); box-shadow: var(--fg-shadow);
}
.fg-body { position: relative; display: flex; flex: 1 1 auto; min-height: 0; }
.fg-body-pane { position: relative; overflow: hidden; flex: none; }
.fg-body-pane-center { flex: 1 1 0; min-width: 0; overflow: auto; }
.fg-body-pane-left { border-right: 1px solid var(--fg-border); box-shadow: 4px 0 8px -6px rgba(0, 0, 0, .18); z-index: 1; }
.fg-body-pane-right { border-left: 1px solid var(--fg-border); box-shadow: -4px 0 8px -6px rgba(0, 0, 0, .18); z-index: 1; }
/* isolation: the z-index of rows drawing merged blocks stays inside the canvas (below the editor, fill handle, overlays) */
.fg-canvas { position: relative; isolation: isolate; }
.fg-row { position: absolute; left: 0; right: 0; top: 0; border-bottom: 1px solid var(--fg-row-border); background: var(--fg-bg); }
.fg-row-odd { background: var(--fg-row-odd); }
.fg-row:hover { background: var(--fg-row-hover); }
.fg-row-selected, .fg-row-selected:hover { background: var(--fg-row-selected); }
/* rowStyle: its colours under the selection colour */
.fg-row-styled:not(.fg-row-selected) { background: var(--fg-row-custom-bg, var(--fg-bg)); }
.fg-row-odd.fg-row-styled:not(.fg-row-selected) { background: var(--fg-row-custom-bg, var(--fg-row-odd)); }
.fg-row-styled { color: var(--fg-row-custom-fg, inherit); font-weight: var(--fg-row-custom-weight, inherit); font-style: var(--fg-row-custom-style, normal); text-decoration: var(--fg-row-custom-line, none); }
/* button, link and image cells */
.fg-cell-button { height: calc(100% - 8px); max-height: 28px; padding: 0 10px; border: 1px solid var(--fg-border); border-radius: 6px; background: var(--fg-bg); color: inherit; font: inherit; font-size: .95em; white-space: nowrap; cursor: pointer; }
.fg-cell-button:hover:not(:disabled) { border-color: var(--fg-accent); color: var(--fg-accent); }
.fg-cell-button:disabled { opacity: .45; cursor: not-allowed; }
.fg-cell-link { color: var(--fg-accent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.fg-cell-link:hover { text-decoration: underline; }
.fg-cell-image { display: block; max-width: 100%; object-fit: cover; border-radius: 4px; }
.fg-cell-image-round { border-radius: 50%; aspect-ratio: 1; }
/* cell notes: a red corner; the note in its tooltip */
.fg-cell-note { background-image: linear-gradient(225deg, #e5484d 6px, transparent 6px); }
.fg-cell-dirty.fg-cell-note { background-image: linear-gradient(225deg, #e5484d 6px, transparent 6px), linear-gradient(135deg, var(--fg-dirty, #f2a900) 6px, transparent 6px); }
.fg-tooltip.fg-tooltip-note { max-width: 320px; white-space: pre-wrap; background: #fffbe6; color: #3b3200; border: 1px solid #f0d878; }
.fg-tooltip-note-title { font-weight: 600; font-size: .85em; margin-bottom: 2px; opacity: .75; }
.fg-tooltip.fg-tooltip-interactive { pointer-events: auto; user-select: text; }
.fg-note-body, .fg-calc-body { display: flex; flex-direction: column; gap: 8px; }
.fg-dialog-danger { color: #c2361f; margin-inline-end: auto; }
/* calculated column dialog */
.fg-calc-label { display: flex; flex-direction: column; gap: 4px; font-size: .9em; color: var(--fg-muted); }
.fg-calc-label .fg-input { color: var(--fg-fg); }
.fg-calc-formula { height: auto; min-height: 52px; padding: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
.fg-calc-title { font-size: .85em; font-weight: 600; color: var(--fg-muted); }
.fg-calc-fields { display: flex; flex-wrap: wrap; gap: 4px; }
.fg-calc-chip { padding: 2px 8px; border: 1px solid var(--fg-border); border-radius: 999px; background: var(--fg-bg); color: inherit; font: inherit; font-size: .9em; cursor: pointer; }
.fg-calc-chip:hover { border-color: var(--fg-accent); color: var(--fg-accent); }
.fg-calc-error { color: #c2361f; font-size: .9em; }
.fg-calc-error:empty { display: none; }
.fg-calc-preview { display: grid; gap: 2px; padding: 6px 8px; border: 1px dashed var(--fg-border); border-radius: 6px; font-variant-numeric: tabular-nums; min-height: 24px; }
/* values shown as a share */
.fg-cell-values-as { color: var(--fg-accent); }
/* auto header height: no three-line clamp */
.fg-auto-header .fg-header-wrap .fg-header-label { display: block; -webkit-line-clamp: unset; }
/* cell text selection */
.fg-text-select .fg-body .fg-cell { user-select: text; cursor: text; }
/* pager page buttons and box */
.fg-pager-num { min-width: 28px; }
.fg-pager-current { background: var(--fg-accent); color: var(--fg-accent-fg, #fff); border-color: var(--fg-accent); }
.fg-pager-jump { width: 64px; height: 28px; text-align: center; }
/* header checkbox of a boolean / toggle column */
.fg-col-check { vertical-align: -2px; margin-inline-end: 2px; }
/* dragging a header up and out: the ghost says it will hide the column */
.fg-drag-ghost.fg-drag-hide { opacity: .85; text-decoration: line-through; background: #c2361f; color: #fff; }
.fg-cell {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 var(--fg-cell-px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: var(--fg-col-line, none);
}
.fg-cell.fg-align-right { justify-content: flex-end; }
.fg-cell.fg-align-center { justify-content: center; }
.fg-cell-focused { outline: 2px solid var(--fg-focus); outline-offset: -2px; border-radius: 2px; }
.fg-cell-select, .fg-header-select { justify-content: center; padding: 0; }
.fg-checkbox { width: 15px; height: 15px; margin: 0; accent-color: var(--fg-accent); cursor: pointer; }
.fg-summary { display: flex; flex: none; background: var(--fg-header-bg); font-weight: 600; }
.fg-summary-top { border-bottom: 1px solid var(--fg-border); }
.fg-summary-bottom { border-top: 1px solid var(--fg-border); }
.fg-summary-pane { position: relative; overflow: hidden; flex: none; }
.fg-summary-pane-center { flex: 1 1 0; min-width: 0; }
.fg-summary-pane-left { border-right: 1px solid var(--fg-border); }
.fg-summary-pane-right { border-left: 1px solid var(--fg-border); }
.fg-summary-inner { position: relative; will-change: transform; }
.fg-summary-row, .fg-summary-row:hover { background: var(--fg-header-bg); font-weight: 600; }
.fg-summary-label { color: var(--fg-muted); }
.fg-overlay { position: absolute; left: 0; right: 0; bottom: 0; display: grid; place-items: center; color: var(--fg-muted); pointer-events: none; }
.fg-menu {
  /* border-box: the max-height set from the window size includes padding and border */
  position: fixed; z-index: 10000; box-sizing: border-box; width: 262px; max-width: calc(100vw - 8px); padding: 6px; border-radius: 10px; overflow: auto; overscroll-behavior: contain;
  font: var(--fg-font-size)/1.4 var(--fg-font); color: var(--fg-fg); background: var(--fg-popup-bg);
  border: 1px solid var(--fg-border); box-shadow: var(--fg-shadow);
}
.fg-menu-section { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.fg-menu-section + .fg-menu-section { border-top: 1px solid var(--fg-border); }
.fg-menu-item { text-align: left; padding: 6px 10px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
.fg-menu-item:hover, .fg-menu-item:focus-visible { background: var(--fg-row-hover); outline: none; }
.fg-menu-title { padding: 4px 10px 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted); }
.fg-filter { gap: 6px; padding: 6px 4px; }
.fg-input, .fg-filter-op {
  width: 100%; height: 30px; padding: 0 8px; border: 1px solid var(--fg-border); border-radius: 6px;
  background: var(--fg-input-bg); color: inherit; font: inherit;
}
.fg-input:focus, .fg-filter-op:focus { outline: 2px solid var(--fg-focus); outline-offset: -1px; }
/* every select in the grid, its menus and dialogs: a drawn chevron with room on the right */
.fg-root select:not([multiple]):not([size]), .fg-menu select:not([multiple]):not([size]) {
  appearance: none; -webkit-appearance: none; padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238a93a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 11px;
}
.fg-set-list { max-height: 220px; overflow: auto; display: flex; flex-direction: column; }
.fg-set-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-set-item:hover { background: var(--fg-row-hover); }
.fg-set-all { font-weight: 600; }
.fg-set-more { padding: 4px 6px; color: var(--fg-muted); }
.fg-menu-actions { display: flex; justify-content: flex-end; gap: 6px; padding-top: 4px; }
.fg-btn { height: 28px; padding: 0 12px; border: 1px solid var(--fg-border); border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
.fg-btn:hover { background: var(--fg-row-hover); }
.fg-btn-primary { background: var(--fg-accent); border-color: var(--fg-accent); color: var(--fg-accent-fg); }
.fg-btn-primary:hover { background: var(--fg-accent); filter: brightness(1.08); }
.fg-sidebar { display: flex; flex: none; border-left: 1px solid var(--fg-border); background: var(--fg-header-bg); }
.fg-sidebar-panel { width: min(240px, 50vw); display: flex; flex-direction: column; border-right: 1px solid var(--fg-border); background: var(--fg-bg); }
.fg-sidebar-tabs { width: 28px; display: flex; flex-direction: column; }
.fg-sidebar-tab {
  writing-mode: vertical-rl; padding: 12px 0; border: 0; background: none; color: var(--fg-header-fg);
  font: 600 var(--fg-font-size) var(--fg-font); cursor: pointer;
}
.fg-sidebar-tab[aria-expanded="true"] { color: var(--fg-accent); box-shadow: inset 2px 0 var(--fg-accent); }
.fg-sidebar-open .fg-sidebar-tabs { width: 32px; gap: 4px; padding: 8px 4px 8px 0; }
.fg-sidebar-open .fg-sidebar-tab {
  position: relative; margin-left: -1px; padding: 14px 0; border: 1px solid var(--fg-border); border-left-color: transparent;
  border-radius: 0 7px 7px 0; background: var(--fg-header-bg); color: var(--fg-muted);
}
.fg-sidebar-open .fg-sidebar-tab:hover { color: var(--fg-header-fg); background: var(--fg-row-hover); }
.fg-sidebar-open .fg-sidebar-tab[aria-expanded="true"] {
  background: var(--fg-bg); color: var(--fg-accent); border-left-color: var(--fg-bg); box-shadow: inset -3px 0 var(--fg-accent); z-index: 1;
}
.fg-sidebar-open .fg-sidebar-tab:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: -2px; }
.fg-chooser { display: flex; flex-direction: column; gap: 6px; padding: 8px; min-height: 0; flex: 1; }
.fg-chooser-dialog { width: 294px; }
.fg-chooser-dialog .fg-chooser { max-height: 420px; }
.fg-chooser-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 0 0; }
.fg-chooser-close { width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--fg-muted); font-size: 18px; cursor: pointer; }
.fg-chooser-close:hover { background: var(--fg-row-hover); color: var(--fg-fg); }
.fg-chooser-all { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-weight: 600; cursor: pointer; }
.fg-chooser-list { position: relative; overflow: auto; flex: 1; min-height: 0; }
.fg-chooser-item { display: flex; align-items: center; gap: 6px; height: 28px; padding-right: 6px; border-radius: 6px; white-space: nowrap; }
.fg-chooser-item:hover { background: var(--fg-row-hover); }
.fg-chooser-item.fg-dragging { opacity: .45; }
.fg-chooser-group > .fg-chooser-label { font-weight: 600; }
.fg-chooser-handle { color: var(--fg-muted); cursor: grab; letter-spacing: -3px; padding: 0 4px 0 0; user-select: none; }
.fg-chooser-caret { width: 16px; border: 0; background: none; color: var(--fg-muted); cursor: pointer; padding: 0; }
.fg-chooser-label { overflow: hidden; text-overflow: ellipsis; }
.fg-chooser-pin { margin-left: auto; color: var(--fg-muted); font-size: 11px; }
.fg-chooser-marker { position: absolute; left: 0; right: 0; height: 2px; background: var(--fg-accent); pointer-events: none; }

/* 심플형: white everywhere, no zebra stripes, hairline row rules, quiet header (works well with merged cells) */
.fg-theme-simple {
  --fg-radius: 6px; --fg-bg: #ffffff; --fg-fg: #222831; --fg-muted: #7b8290;
  --fg-header-bg: #ffffff; --fg-header-fg: #5b6270; --fg-header-weight: 600;
  --fg-border: #e6e8ec; --fg-row-border: #f0f1f4;
  --fg-row-odd: #ffffff; --fg-row-hover: #f7f8fa; --fg-row-selected: #eef4ff;
  --fg-accent: #3b6fe0; --fg-accent-fg: #ffffff; --fg-focus: #3b6fe0; --fg-popup-bg: #ffffff; --fg-input-bg: #ffffff;
  --fg-header-border: 1px solid #e6e8ec; --fg-header-line: transparent;
}

/* ── Korean-style themes: simple lines, centered headers ─────────────────── */
.fg-theme-board, .fg-theme-erp, .fg-theme-excel, .fg-theme-classic {
  --fg-font: "Pretendard Variable", Pretendard, "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", ui-sans-serif, system-ui, sans-serif;
  --fg-header-label-flex: 1 1 auto; --fg-header-text-align: center;
  --fg-popup-bg: #ffffff; --fg-input-bg: #ffffff; --fg-accent-fg: #ffffff; --fg-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}
/* 게시판형: thick top rule, light grey header, horizontal lines only */
.fg-theme-board {
  --fg-radius: 0; --fg-bg: #ffffff; --fg-fg: #222222; --fg-muted: #767676;
  --fg-header-bg: #f7f7f7; --fg-header-fg: #222222; --fg-border: #dddddd; --fg-row-border: #e5e5e5;
  --fg-row-odd: #ffffff; --fg-row-hover: #f6f8fb; --fg-row-selected: #eef3fc;
  --fg-accent: #1f5bd6; --fg-focus: #1f5bd6;
  --fg-top-border: 2px solid #222222; --fg-header-border: 1px solid #bbbbbb; --fg-header-line: transparent;
}
.fg-theme-board.fg-root { border-left: 0; border-right: 0; }
/* 관리자·ERP형: every cell bordered, blue-grey header, compact */
.fg-theme-erp {
  --fg-font-size: 12px; --fg-radius: 2px; --fg-cell-px: 8px;
  --fg-bg: #ffffff; --fg-fg: #333333; --fg-muted: #7a8494;
  --fg-header-bg: #eef2f7; --fg-header-fg: #2b3442; --fg-border: #c5ceda; --fg-row-border: #dde3eb;
  --fg-row-odd: #fafbfd; --fg-row-hover: #eef5ff; --fg-row-selected: #fff6d5;
  --fg-accent: #2f6fde; --fg-focus: #2f6fde;
  --fg-col-line: inset -1px 0 #dde3eb; --fg-header-line: #c5ceda;
}
/* 엑셀형: gridlines, plain grey header, green focus */
.fg-theme-excel {
  --fg-radius: 0; --fg-cell-px: 8px;
  --fg-bg: #ffffff; --fg-fg: #1f1f1f; --fg-muted: #6e6e6e;
  --fg-header-bg: #f3f3f3; --fg-header-fg: #444444; --fg-header-weight: 500;
  --fg-border: #d4d4d4; --fg-row-border: #e2e2e2;
  --fg-row-odd: #ffffff; --fg-row-hover: #f7f7f7; --fg-row-selected: #e6f2ea;
  --fg-accent: #107c41; --fg-focus: #107c41;
  --fg-col-line: inset -1px 0 #e2e2e2; --fg-header-line: #d4d4d4;
}
/* 진한 헤더형: calm navy header with white text */
.fg-theme-classic {
  --fg-radius: 4px; --fg-bg: #ffffff; --fg-fg: #2a2f37; --fg-muted: #6b7380;
  --fg-header-bg: #3d4b63; --fg-header-fg: #ffffff; --fg-border: #cfd5de; --fg-row-border: #e3e7ed;
  --fg-row-odd: #f8f9fb; --fg-row-hover: #eef2f8; --fg-row-selected: #e2e9f5;
  --fg-accent: #3d4b63; --fg-focus: #3d6bb3;
  --fg-col-line: inset -1px 0 #e3e7ed; --fg-header-line: #56657e;
}
.fg-theme-classic .fg-menu-btn { color: #c9d2e0; }
.fg-theme-classic .fg-menu-btn:hover { background: rgba(255, 255, 255, .12); color: #ffffff; }
.fg-theme-classic .fg-sort-icon, .fg-theme-classic .fg-menu-btn.fg-filter-active { color: #ffd166; }
.fg-theme-classic .fg-sidebar-tab { color: #c9d2e0; }
.fg-theme-classic .fg-sidebar-tab[aria-expanded="true"] { color: #ffd166; box-shadow: inset 2px 0 #ffd166; }
.fg-theme-classic .fg-sidebar-open .fg-sidebar-tab[aria-expanded="true"] { color: var(--fg-accent); box-shadow: inset -3px 0 var(--fg-accent); }
.fg-theme-board .fg-header-cell, .fg-theme-erp .fg-header-cell, .fg-theme-excel .fg-header-cell, .fg-theme-classic .fg-header-cell { flex-direction: row; justify-content: center; }
.fg-theme-board .fg-menu-btn, .fg-theme-erp .fg-menu-btn, .fg-theme-excel .fg-menu-btn, .fg-theme-classic .fg-menu-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); margin: 0;
}
.fg-theme-board .fg-header-label, .fg-theme-erp .fg-header-label, .fg-theme-excel .fg-header-label, .fg-theme-classic .fg-header-label { flex: 0 1 auto; }

/* ── cell ranges, context menu, toast ───────────────────────────────── */
.fg-cell-range { background: var(--fg-range-bg, color-mix(in srgb, var(--fg-accent) 13%, transparent)); }
.fg-range-dragging, .fg-range-dragging * { user-select: none; cursor: cell; }
.fg-context-menu { width: 250px; }
.fg-cm-item { display: flex; align-items: center; gap: 12px; width: 100%; }
.fg-cm-item:disabled { opacity: .45; cursor: default; background: none; }
.fg-cm-label { flex: 1; }
.fg-cm-shortcut { color: var(--fg-muted); font-size: .9em; }
.fg-cm-sep { height: 1px; margin: 4px 2px; background: var(--fg-border); }
.fg-cm-icon { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; color: var(--fg-muted); font-size: 13px; line-height: 1; }
.fg-cm-icon svg { width: 14px; height: 14px; }
.fg-cm-item[aria-checked="true"] .fg-cm-icon { color: var(--fg-accent); font-weight: 700; }
.fg-cm-with-icons .fg-cm-heading { padding-inline-start: 38px; }
.fg-cm-heading { padding: 6px 10px 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted); }
.fg-cm-arrow { margin-inline-start: auto; color: var(--fg-muted); font-size: 15px; line-height: 1; }
.fg-cm-parent[aria-expanded="true"] { background: var(--fg-row-hover); }
.fg-cm-danger { color: #c2361f; }
.fg-cm-danger .fg-cm-icon { color: inherit; }
.fg-cm-submenu { width: auto; min-width: 180px; max-width: 320px; }
.fg-rtl-menu .fg-cm-arrow, [dir="rtl"] .fg-cm-arrow { transform: scaleX(-1); }
.fg-toast {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 20; max-width: 90%;
  padding: 8px 14px; border-radius: 8px; background: var(--fg-fg); color: var(--fg-bg); font-size: .95em; box-shadow: var(--fg-shadow);
}

/* ── editing ────────────────────────────────────────────────────────── */
.fg-editor { position: absolute; z-index: 15; display: flex; background: var(--fg-bg); box-shadow: 0 0 0 2px var(--fg-focus), var(--fg-shadow); border-radius: 2px; }
.fg-editor-control { flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; outline: none; padding: 0 var(--fg-cell-px); background: transparent; color: var(--fg-fg); font: inherit; }
textarea.fg-editor-control { padding-top: 8px; resize: none; }
.fg-editor-msg { position: absolute; left: -2px; top: 100%; margin-top: 4px; white-space: nowrap; padding: 4px 8px; border-radius: 6px; background: #c2361f; color: #fff; font-size: .9em; }
.fg-editor-msg:empty { display: none; }
.fg-editor-invalid { box-shadow: 0 0 0 2px #c2361f, var(--fg-shadow); }
/* pickers of the cell editors: calendar, ranges, lists, number steps, dialog, switch */
.fg-editor-popup .fg-editor-msg { top: auto; bottom: 100%; margin: 0 0 4px; }
.fg-editor-popup-above .fg-editor-msg { top: 100%; bottom: auto; margin: 4px 0 0; }
.fg-editor-display { display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: default; }
.fg-editor-number { display: flex; align-items: stretch; padding: 0; }
.fg-editor-number-input { flex: 1; min-width: 0; border: 0; outline: none; padding: 0 var(--fg-cell-px); background: transparent; color: inherit; font: inherit; text-align: right; }
.fg-editor-steps { display: flex; flex-direction: column; border-inline-start: 1px solid var(--fg-border); }
.fg-editor-step { flex: 1; width: 22px; padding: 0; border: 0; background: none; color: var(--fg-muted); font-size: 8px; line-height: 1; cursor: pointer; }
.fg-editor-step:hover { background: var(--fg-row-hover); color: var(--fg-fg); }
.fg-picker { width: auto; min-width: 180px; max-width: calc(100vw - 8px); padding: 8px; user-select: none; }
.fg-picker-options { display: flex; flex-direction: column; gap: 6px; }
.fg-picker-list { display: flex; flex-direction: column; gap: 1px; max-height: 260px; overflow: auto; overscroll-behavior: contain; }
.fg-picker-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.fg-picker-item:hover, .fg-picker-active { background: var(--fg-row-hover); }
.fg-picker-checked { color: var(--fg-accent); font-weight: 600; }
.fg-picker-off { opacity: .45; cursor: not-allowed; }
.fg-picker-item .fg-checkbox { pointer-events: none; }
.fg-picker-all { border-bottom: 1px solid var(--fg-border); border-radius: 6px 6px 0 0; color: var(--fg-muted); }
.fg-picker-dot { width: 14px; height: 14px; flex: none; border: 1.5px solid var(--fg-muted); border-radius: 50%; }
.fg-picker-checked .fg-picker-dot { border-color: var(--fg-accent); box-shadow: inset 0 0 0 3px var(--fg-popup-bg), inset 0 0 0 7px var(--fg-accent); }
.fg-picker-empty { padding: 6px 10px; color: var(--fg-muted); }
.fg-picker-empty:empty { display: none; }
.fg-picker-search { height: 28px; }
.fg-picker-foot { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--fg-border); }
.fg-picker-count { margin-inline-end: auto; color: var(--fg-muted); font-size: .9em; }
.fg-picker-btn { height: 28px; padding: 0 12px; border: 1px solid var(--fg-border); border-radius: 6px; background: var(--fg-bg); color: inherit; font: inherit; cursor: pointer; }
.fg-picker-btn:hover:not(:disabled) { background: var(--fg-row-hover); }
.fg-picker-btn:disabled { opacity: .45; cursor: not-allowed; }
.fg-picker-primary { border-color: var(--fg-accent); background: var(--fg-accent); color: var(--fg-accent-fg, #fff); }
.fg-picker-primary:hover:not(:disabled) { background: var(--fg-accent); filter: brightness(1.08); }
.fg-cal-nav { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.fg-cal-titles { flex: 1; display: flex; gap: 16px; }
.fg-cal-title { flex: 1; display: flex; justify-content: center; align-items: center; gap: 4px; font-weight: 600; }
.fg-cal-title select { height: 26px; padding: 0 4px; border: 1px solid var(--fg-border); border-radius: 6px; background: var(--fg-input-bg); color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.fg-cal-prev, .fg-cal-next { width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.fg-cal-prev:hover, .fg-cal-next:hover { background: var(--fg-row-hover); }
.fg-cal-months { display: flex; gap: 16px; }
.fg-cal-month-grid { display: flex; flex-direction: column; gap: 2px; }
.fg-cal-week { display: grid; grid-template-columns: repeat(7, 32px); gap: 2px 0; }
.fg-cal-weekday { height: 24px; display: grid; place-items: center; color: var(--fg-muted); font-size: .85em; }
.fg-cal-day { height: 30px; padding: 0; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
.fg-cal-day:hover:not(:disabled) { background: var(--fg-row-hover); }
.fg-cal-today { box-shadow: inset 0 0 0 1px var(--fg-accent); font-weight: 600; }
.fg-cal-off { opacity: .3; cursor: not-allowed; text-decoration: line-through; }
.fg-cal-in-range { border-radius: 0; background: color-mix(in srgb, var(--fg-accent) 16%, transparent); }
.fg-cal-start { border-start-start-radius: 6px; border-end-start-radius: 6px; }
.fg-cal-end { border-start-end-radius: 6px; border-end-end-radius: 6px; }
.fg-cal-selected, .fg-cal-selected:hover:not(:disabled) { background: var(--fg-accent); color: var(--fg-accent-fg, #fff); font-weight: 600; }
.fg-picker-range-body { display: flex; gap: 10px; }
.fg-picker-presets { display: flex; flex-direction: column; gap: 2px; padding-inline-end: 10px; border-inline-end: 1px solid var(--fg-border); }
.fg-picker-preset { padding: 6px 10px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: start; white-space: nowrap; cursor: pointer; }
.fg-picker-preset:hover { background: var(--fg-row-hover); }
@media (max-width: 600px) {
  .fg-picker-range-body { flex-direction: column; }
  .fg-picker-presets { flex-direction: row; flex-wrap: wrap; padding: 0 0 8px; border: 0; border-bottom: 1px solid var(--fg-border); }
  .fg-picker-range .fg-cal-months > :nth-child(2), .fg-picker-range .fg-cal-title-text { display: none; }
}
.fg-modal-backdrop { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 16px; background: rgba(15, 18, 25, .45); }
.fg-modal.fg-menu { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); padding: 14px 16px; }
.fg-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.fg-modal-title { font-weight: 600; font-size: 1.05em; }
.fg-modal-text { display: block; width: 100%; height: auto; min-height: 160px; padding: 10px; line-height: 1.5; resize: vertical; }
.fg-modal-msg { position: static; display: block; margin-top: 8px; white-space: normal; }
.fg-switch { position: relative; display: inline-block; width: 34px; height: 20px; flex: none; border-radius: 10px; background: color-mix(in srgb, var(--fg-muted) 45%, transparent); transition: background .15s; cursor: pointer; vertical-align: middle; }
.fg-switch-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s; }
.fg-switch-on { background: var(--fg-accent); }
.fg-switch-on .fg-switch-knob { transform: translateX(14px); }
.fg-switch-readonly { opacity: .55; cursor: default; }
@media (prefers-reduced-motion: reduce) { .fg-switch, .fg-switch-knob { transition: none; } }
.fg-cell-dirty { background-image: linear-gradient(225deg, var(--fg-dirty, #f2a900) 6px, transparent 6px); }
.fg-row-created { box-shadow: inset 3px 0 0 var(--fg-accent); }

/* ── v0.3: merge, pinned rows, status bar, fill handle, find, header wrap ── */
.fg-cell-merged { z-index: 1; background: var(--fg-bg); align-items: flex-start; padding-top: calc((var(--fg-font-size, 13px) * 2.75 - 1.4em) / 2 + var(--fg-merge-shift, 0px)); border-bottom: 1px solid var(--fg-row-border); box-shadow: var(--fg-col-line, none); }
.fg-row-odd .fg-cell-merged { background: var(--fg-bg); }
.fg-cell-merged.fg-cell-merged-middle { align-items: center; padding-top: var(--fg-merge-shift, 0px); padding-bottom: var(--fg-merge-shift-bottom, 0px); }
.fg-cell-merged.fg-cell-merged-bottom { align-items: flex-end; padding-top: var(--fg-merge-shift, 0px); padding-bottom: calc((var(--fg-font-size, 13px) * 2.75 - 1.4em) / 2 + var(--fg-merge-shift-bottom, 0px)); }
.fg-cell-merge-hidden { visibility: hidden; }
.fg-cell-select.fg-cell-merged { padding-top: calc((var(--fg-font-size, 13px) * 2.75 - 15px) / 2 + var(--fg-merge-shift, 0px)); }
.fg-pinned-rows { display: flex; flex: none; background: var(--fg-bg); }
.fg-pinned-top { border-bottom: 2px solid var(--fg-border); }
.fg-pinned-bottom { border-top: 2px solid var(--fg-border); }
.fg-section-pane { position: relative; overflow: hidden; flex: none; }
.fg-section-pane-center { flex: 1 1 0; min-width: 0; }
.fg-section-pane-left { border-right: 1px solid var(--fg-border); }
.fg-section-pane-right { border-left: 1px solid var(--fg-border); }
.fg-section-inner { position: relative; will-change: transform; }
.fg-row-pinned, .fg-row-pinned:hover { background: var(--fg-row-odd); font-weight: 500; }
.fg-statusbar { display: flex; flex: none; justify-content: space-between; gap: 16px; padding: 6px var(--fg-cell-px); border-top: 1px solid var(--fg-border); background: var(--fg-header-bg); color: var(--fg-muted); font-size: .92em; white-space: nowrap; overflow: hidden; }
.fg-status-aggs { color: var(--fg-fg); font-variant-numeric: tabular-nums; white-space: pre; }
.fg-fill-handle { position: absolute; z-index: 16; width: 8px; height: 8px; background: var(--fg-accent); border: 1px solid var(--fg-bg); cursor: crosshair; }
.fg-fill-preview { position: absolute; z-index: 15; border: 1px dashed var(--fg-accent); pointer-events: none; }
.fg-cell-match { background: color-mix(in srgb, #f2a900 22%, transparent); }
.fg-cell-match-current { background: #f2a900; color: #1a1300; }
.fg-findbar { position: absolute; top: 6px; right: 18px; z-index: 30; display: flex; align-items: center; gap: 4px; padding: 5px 6px; border-radius: 8px; background: var(--fg-popup-bg); border: 1px solid var(--fg-border); box-shadow: var(--fg-shadow); }
.fg-findbar .fg-input { width: 200px; height: 28px; }
.fg-findbar-count { min-width: 56px; text-align: center; color: var(--fg-muted); font-size: .9em; font-variant-numeric: tabular-nums; }
.fg-findbar-btn { width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--fg-fg); cursor: pointer; }
.fg-findbar-btn:hover { background: var(--fg-row-hover); }
.fg-header-wrap .fg-header-label { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.25; }

/* grouping, tree data, master/detail, row drag */
.fg-group-panel {
  display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px;
  background: var(--fg-bg); border-bottom: 1px solid var(--fg-border); color: var(--fg-muted, #6b7280);
}
.fg-group-panel-over { background: var(--fg-row-hover); outline: 2px dashed var(--fg-accent); outline-offset: -4px; }
.fg-group-hint { font-size: .92em; }
.fg-group-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border: 1px solid var(--fg-border);
  border-radius: 999px; background: var(--fg-header-bg); color: var(--fg-header-fg); cursor: grab; user-select: none;
}
.fg-group-chip.fg-dragging { opacity: .5; }
.fg-group-chip-remove {
  width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit;
  font: inherit; line-height: 1; cursor: pointer;
}
.fg-group-chip-remove:hover { background: var(--fg-row-hover); }
.fg-group-sep { opacity: .6; }
.fg-row-group, .fg-row-group:hover { background: var(--fg-header-bg); font-weight: 600; }
.fg-group-cell { overflow: visible; z-index: 1; padding-left: calc(4px + var(--fg-level, 0) * 16px); }
.fg-group-label { white-space: nowrap; }
.fg-cell-agg { color: var(--fg-header-fg); }
.fg-group-toggle, .fg-tree-toggle, .fg-detail-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; margin-right: 4px;
  padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; cursor: pointer;
}
.fg-group-toggle:hover, .fg-tree-toggle:hover, .fg-detail-toggle:hover { background: var(--fg-row-hover); }
.fg-group-toggle svg, .fg-tree-toggle svg, .fg-detail-toggle svg { transition: transform .12s ease; }
.fg-expanded svg { transform: rotate(90deg); }
.fg-tree-spacer { display: inline-block; flex: none; width: 24px; }
.fg-cell-lead { padding-left: calc(4px + var(--fg-level, 0) * 16px); }
.fg-row-detail, .fg-row-detail:hover { background: var(--fg-bg); }
.fg-detail {
  position: absolute; top: 0; bottom: 0; box-sizing: border-box; overflow: auto; padding: 10px 14px;
  border-bottom: 1px solid var(--fg-row-border); background: var(--fg-bg);
}
.fg-cell-drag { justify-content: center; padding: 0; cursor: grab; }
.fg-drag-handle { color: var(--fg-muted, #9aa1ad); cursor: grab; letter-spacing: -1px; user-select: none; }
.fg-drag-handle.fg-drag-disabled { opacity: .35; cursor: not-allowed; }
.fg-row-dragging, .fg-row-dragging * { cursor: grabbing !important; }
.fg-row-drop-marker { position: absolute; left: 0; right: 0; height: 2px; background: var(--fg-accent); z-index: 6; pointer-events: none; }
.fg-row-drop-marker.fg-row-drop-inside { background: color-mix(in srgb, var(--fg-accent) 8%, transparent); box-shadow: inset 0 0 0 2px var(--fg-accent); }
.fg-row-drop-marker.fg-row-drop-copy::before { content: '+'; position: absolute; left: 4px; top: -7px; width: 16px; height: 16px; border-radius: 50%; background: var(--fg-accent); color: #fff; font: 700 12px/16px system-ui, sans-serif; text-align: center; }
@media (prefers-reduced-motion: reduce) { .fg-group-toggle svg, .fg-tree-toggle svg, .fg-detail-toggle svg { transition: none; } }
.fg-tree-loading svg { animation: fg-spin .8s linear infinite; opacity: .6; }
@keyframes fg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fg-tree-loading svg { animation: none; } }

/* pagination and server rows */
.fg-pager {
  display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 38px; padding: 4px 10px;
  border-top: 1px solid var(--fg-border); background: var(--fg-header-bg); color: var(--fg-header-fg); font-variant-numeric: tabular-nums;
}
.fg-pager-spacer { flex: 1; }
.fg-pager-size-label { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }
.fg-pager-size { font: inherit; color: var(--fg-fg); background: var(--fg-input-bg); border: 1px solid var(--fg-border); border-radius: 4px; padding: 2px 4px; }
.fg-pager-page { padding: 0 8px; }
.fg-pager-btn {
  min-width: 28px; height: 28px; padding: 0 6px; border: 1px solid transparent; border-radius: 4px;
  background: transparent; color: inherit; font: inherit; font-size: 1.1em; line-height: 1; cursor: pointer;
}
.fg-pager-btn:hover:not(:disabled) { background: var(--fg-row-hover); border-color: var(--fg-border); }
.fg-pager-btn:disabled { opacity: .35; cursor: default; }
.fg-skeleton {
  display: block; width: 70%; height: .8em; border-radius: 4px;
  background: linear-gradient(90deg, var(--fg-row-border) 25%, var(--fg-border) 50%, var(--fg-row-border) 75%);
  background-size: 200% 100%; animation: fg-shimmer 1.2s ease-in-out infinite;
}
@keyframes fg-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .fg-skeleton { animation: none; } }

/* filters tool panel */
.fg-filters-panel { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.fg-filters-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--fg-border); }
.fg-filters-title { font-weight: 600; }
.fg-filters-clear { font-size: .9em; padding: 2px 8px; }
.fg-filters-list { overflow: auto; flex: 1; }
.fg-filters-item { border-bottom: 1px solid var(--fg-row-border); }
.fg-filters-item > summary { padding: 7px 10px; cursor: pointer; list-style-position: inside; }
.fg-filters-item > summary:hover { background: var(--fg-row-hover); }
.fg-filters-item.fg-filter-on > summary { color: var(--fg-accent); font-weight: 600; }
.fg-filters-item.fg-filter-on > summary::after { content: ' ●'; font-size: .7em; vertical-align: middle; }
.fg-filters-item .fg-filter { border: 0; padding: 4px 10px 10px; }

/* pivot panel */
.fg-pivot-panel { display: flex; flex-direction: column; gap: 4px; overflow: auto; flex: 1; padding: 8px 10px; }
.fg-pivot-mode { display: flex; align-items: center; gap: 8px; padding: 4px 0 8px; font-weight: 600; border-bottom: 1px solid var(--fg-border); }
.fg-pivot-zone { padding: 8px 0; border-bottom: 1px solid var(--fg-row-border); }
.fg-pivot-zone-title { font-size: .9em; color: var(--fg-muted); margin-bottom: 6px; }
.fg-pivot-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.fg-pivot-chips .fg-group-chip { cursor: default; }
.fg-pivot-agg, .fg-pivot-add {
  font: inherit; font-size: .92em; color: var(--fg-fg); background: var(--fg-input-bg);
  border: 1px solid var(--fg-border); border-radius: 4px; padding: 2px 4px;
}
.fg-pivot-add { width: 100%; }

/* charts */
.fg-chart-panel {
  position: absolute; top: 12px; right: 12px; z-index: 20; width: min(640px, calc(100% - 24px));
  background: var(--fg-popup-bg); border: 1px solid var(--fg-border); border-radius: 8px; box-shadow: var(--fg-shadow);
  display: flex; flex-direction: column;
}
.fg-chart-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--fg-border); }
.fg-chart-type {
  padding: 3px 8px; border: 1px solid var(--fg-border); border-radius: 999px; background: transparent;
  color: var(--fg-fg); font: inherit; font-size: .88em; cursor: pointer;
}
.fg-chart-type[aria-pressed="true"] { background: var(--fg-accent); border-color: var(--fg-accent); color: var(--fg-accent-fg); }
.fg-chart-spacer { flex: 1; }
.fg-chart-body { padding: 4px 8px 8px; }
.fg-chart { display: block; width: 100%; height: auto; font: 11px var(--fg-font); color: var(--fg-fg); }
.fg-chart text { fill: var(--fg-muted); }
.fg-chart .fg-chart-title { fill: var(--fg-fg); font-size: 14px; font-weight: 600; }
.fg-chart-grid { stroke: var(--fg-row-border); }
.fg-chart-zero { stroke: var(--fg-border); stroke-width: 1.5; }
.fg-chart-legend-item text { fill: var(--fg-fg); }
.fg-chart-bar, .fg-chart-slice, .fg-chart-point { transition: opacity .12s; }
.fg-chart-plot:hover .fg-chart-bar:not(:hover), .fg-chart:hover .fg-chart-slice:not(:hover) { opacity: .55; }
.fg-chart-slice { stroke: var(--fg-popup-bg, #fff); stroke-width: 1.5; }
@media (prefers-reduced-motion: reduce) { .fg-chart-bar, .fg-chart-slice, .fg-chart-point { transition: none; } }

/* free-use badge (unlicensed company domains) */
.fg-free-badge {
  position: absolute; right: 22px; bottom: 22px; z-index: 30; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 6px; border-radius: 999px; background: rgba(255, 255, 255, .92); border: 1px solid rgba(14, 23, 38, .15);
  box-shadow: 0 2px 8px rgba(14, 23, 38, .12); color: #0E1726; font: 600 11px/1.2 var(--fg-font); text-decoration: none; opacity: .45;
  pointer-events: none; user-select: none;
}
.fg-free-badge svg { flex: none; }

/* column spans */
.fg-cell-span-hidden { visibility: hidden; }
.fg-cell-colspan { z-index: 1; background: inherit; }

/* per-cell locks */
.fg-cell-readonly { color: var(--fg-muted); background-image: linear-gradient(rgba(14, 23, 38, .025), rgba(14, 23, 38, .025)); }
.fg-cell-select-locked .fg-checkbox { cursor: not-allowed; opacity: .45; }

/* wrapped cells (autoRowHeight grows the row to fit) */
.fg-cell-wrap { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; line-height: 1.45; padding-top: 6px; padding-bottom: 6px; }

/* right-to-left: mirror the grid area, then turn every cell back so text reads normally */
/* the root keeps dir=rtl (side bar on the left); the grid inside is laid out ltr and mirrored */
.fg-rtl .fg-main { transform: scaleX(-1); direction: ltr; }
.fg-rtl .fg-cell, .fg-rtl .fg-header-cell, .fg-rtl .fg-statusbar, .fg-rtl .fg-pager, .fg-rtl .fg-group-panel,
.fg-rtl .fg-overlay, .fg-rtl .fg-find, .fg-rtl .fg-chart-panel, .fg-rtl .fg-row-detail .fg-detail { transform: scaleX(-1); direction: rtl; }
.fg-rtl .fg-sidebar { direction: rtl; border-left: 0; border-right: 1px solid var(--fg-border); }

/* touch */
.fg-body { touch-action: pan-x pan-y; }
@media (pointer: coarse) {
  .fg-editor input, .fg-editor select, .fg-editor textarea, .fg-picker input, .fg-modal textarea { font-size: 16px; } /* no zoom-in on focus in mobile Safari */
}

/* card view for narrow screens */
.fg-card-mode .fg-header, .fg-card-mode .fg-body, .fg-card-mode .fg-grid, .fg-card-mode .fg-summary, .fg-card-mode .fg-pinned-rows { display: none; }
.fg-cards { flex: 1; min-height: 0; overflow: auto; padding: 10px; -webkit-overflow-scrolling: touch; }
.fg-cards-canvas { position: relative; }
.fg-card {
  position: absolute; left: 0; right: 0; top: 0; box-sizing: border-box; padding: 10px 14px; overflow: hidden;
  border: 1px solid var(--fg-border); border-radius: 10px; background: var(--fg-bg); box-shadow: 0 1px 2px rgba(14, 23, 38, .06);
}
.fg-card-selected { border-color: var(--fg-accent); background: var(--fg-row-selected); }
.fg-card-other { background: var(--fg-header-bg); font-weight: 600; display: flex; align-items: center; }
.fg-card-head { display: flex; align-items: center; gap: 8px; height: var(--fg-card-line, 27px); color: var(--fg-muted); font-size: .92em; }
.fg-card-line { display: grid; grid-template-columns: minmax(80px, 38%) 1fr; gap: 10px; align-items: center; height: var(--fg-card-line, 27px); }
.fg-card-label { color: var(--fg-muted); font-size: .92em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-card-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* row numbers */
.fg-cell-rownum, .fg-header-rownum { justify-content: center; color: var(--fg-muted); font-variant-numeric: tabular-nums; cursor: default; }
.fg-cell-rownum { background: var(--fg-header-bg); }

/* filter row */
.fg-filter-row { position: relative; border-top: 1px solid var(--fg-border); will-change: transform; }
.fg-filter-cell { position: absolute; top: 0; box-sizing: border-box; display: flex; align-items: center; padding: 3px 4px; border-right: 1px solid var(--fg-border); }
.fg-filter-input { width: 100%; height: 100%; min-width: 0; box-sizing: border-box; border: 1px solid var(--fg-border); border-radius: 4px; padding: 0 6px; background: var(--fg-bg); color: var(--fg-fg); font: inherit; font-size: .92em; }
.fg-filter-input:focus { outline: 2px solid var(--fg-focus); outline-offset: -1px; }
.fg-filter-input::placeholder { color: var(--fg-muted); opacity: .7; }
.fg-filter-active .fg-filter-input { border-color: var(--fg-accent); }
.fg-filter-bad.fg-filter-input { border-color: #dc2626; }
.fg-rtl .fg-filter-cell { transform: scaleX(-1); direction: rtl; }
.fg-filter-cell-date .fg-filter-input { padding-inline-end: 24px; }
.fg-filter-cal-btn { position: absolute; inset-inline-end: 7px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--fg-muted); cursor: pointer; }
.fg-filter-cal-btn:hover { background: var(--fg-row-hover); color: var(--fg-fg); }
.fg-filter-active .fg-filter-cal-btn { color: var(--fg-accent); }
.fg-filter-cal { padding: 6px 0 2px; }
.fg-filter-cal .fg-cal-month-grid { flex: 1; }
.fg-filter-cal .fg-cal-week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.fg-filter-cal .fg-cal-day { height: 26px; }
.fg-date-filter .fg-picker-presets .fg-picker-checked { background: var(--fg-row-hover); }

/* tooltips */
.fg-tooltip { position: fixed; z-index: 1000; max-width: 360px; padding: 6px 9px; border-radius: 6px; background: #1f2430; color: #fff; font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.fg-tooltip.fg-theme-dark { background: #e6e9f0; color: #11141b; }

/* cells changed by applyTransaction */
.fg-cell-flash { animation: fg-flash var(--fg-flash-duration, 1s) ease-out; }
@keyframes fg-flash { from { background: color-mix(in srgb, var(--fg-accent) 35%, transparent); } to { background: transparent; } }
.fg-cell-flash-up { animation-name: fg-flash-up; }
.fg-cell-flash-down { animation-name: fg-flash-down; }
@keyframes fg-flash-up { from { background: color-mix(in srgb, var(--fg-up, #16a34a) 32%, transparent); } to { background: transparent; } }
@keyframes fg-flash-down { from { background: color-mix(in srgb, var(--fg-down, #dc2626) 32%, transparent); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .fg-cell-flash { animation: none; outline: 1px solid var(--fg-accent); outline-offset: -1px; }
  .fg-cell-flash-up { outline-color: var(--fg-up, #16a34a); }
  .fg-cell-flash-down { outline-color: var(--fg-down, #dc2626); } }

/* editType 'row': the row being edited */
.fg-row-editing { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fg-accent) 45%, transparent); background: color-mix(in srgb, var(--fg-accent) 5%, var(--fg-bg)); }

/* collapsible column groups */
.fg-colgroup-toggle { margin-left: 6px; width: 18px; height: 18px; padding: 0; border: 1px solid var(--fg-border); border-radius: 4px; background: var(--fg-bg); color: var(--fg-muted); font: 600 12px/1 var(--fg-font); cursor: pointer; flex: none; }
.fg-colgroup-toggle:hover { color: var(--fg-fg); border-color: var(--fg-muted); }

/* two conditions in a column filter */
.fg-filter-cond { display: flex; flex-direction: column; gap: 6px; }
.fg-filter-join { display: flex; gap: 14px; padding: 2px 2px 0; font-size: .92em; color: var(--fg-muted); }
.fg-filter-join label { display: flex; align-items: center; gap: 4px; cursor: pointer; }

/* advanced filter builder: one condition per line (column, operator, value, ×) */
.fg-filter-builder { width: 520px; display: flex; flex-direction: column; gap: 8px; }
.fg-filter-builder .fg-filter-join { padding: 0 4px; }
.fg-fb-list { display: flex; flex-direction: column; border-top: 1px solid var(--fg-border); border-bottom: 1px solid var(--fg-border); max-height: 50vh; overflow: auto; }
.fg-fb-list:empty { display: none; }
.fg-fb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 2px; }
.fg-fb-line { display: flex; flex: 1 1 100%; align-items: center; gap: 6px; min-width: 0; }
.fg-fb-row .fg-filter-cal { flex: 1 1 100%; max-width: 260px; }
.fg-fb-row + .fg-fb-row { border-top: 1px dashed var(--fg-border); }
.fg-fb-line > select, .fg-fb-line > input { flex: 1 1 0; min-width: 0; }
.fg-fb-line > .fg-fb-col, .fg-fb-line > .fg-fb-value { flex-grow: 1.3; }
.fg-fb-remove { flex: none; }
.fg-fb-group-label { flex: 1; min-width: 0; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-muted); }
.fg-fb-add { align-self: flex-start; }
@media (max-width: 560px) {
  /* narrow screens: the column on its own line, operator and value under it */
  .fg-fb-row { flex-wrap: wrap; }
  .fg-fb-row > .fg-fb-col { flex-basis: calc(100% - 32px); }
}

/* autoHeight: grow with the rows */
.fg-root.fg-auto-height { height: auto; }
/* only the height follows the rows: .fg-main still fills the width (the root is a flex row) */
.fg-auto-height .fg-grid { flex: none; }
.fg-auto-height .fg-body { flex: none; min-height: 0; }
.fg-auto-height .fg-body-pane-center { overflow-y: hidden; }

.fg-sparkline { display: block; overflow: visible; }

.fg-overlay.fg-overlay-custom { pointer-events: auto; }

/* density */
.fg-density-compact { --fg-cell-px: 7px; }
.fg-density-comfortable { --fg-cell-px: 14px; }

/* conditional formats */
.fg-cf-bar { background-image: linear-gradient(to right, transparent var(--fg-bar-from), color-mix(in srgb, var(--fg-bar-color) 38%, transparent) var(--fg-bar-from), color-mix(in srgb, var(--fg-bar-color) 38%, transparent) var(--fg-bar-to), transparent var(--fg-bar-to)); background-repeat: no-repeat; background-size: 100% 70%; background-position: 0 50%; }
.fg-cf-icon { display: inline-block; margin-inline-end: 6px; font-size: .9em; line-height: 1; }
.fg-cf-dialog { width: 354px; }
.fg-cf-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
.fg-cf-rule { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border: 1px solid var(--fg-border); border-radius: 6px; }
.fg-cf-rule-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-cf-sample { flex: none; width: 34px; height: 18px; border-radius: 4px; border: 1px solid var(--fg-border); display: grid; place-items: center; font-size: 11px; }
.fg-cf-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fg-cf-form > .fg-cf-wide { grid-column: 1 / -1; }
.fg-cf-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.fg-cf-swatch { width: 30px; height: 22px; border-radius: 5px; border: 1px solid var(--fg-border); cursor: pointer; font: 600 11px/1 var(--fg-font); padding: 0; }
.fg-cf-swatch[aria-pressed="true"] { outline: 2px solid var(--fg-accent); outline-offset: 1px; }
.fg-cf-empty { color: var(--fg-muted); padding: 4px 0; }