:root {
  --border: #d0d7de;
  --border-strong: #afb8c1;
  --bg: #f8f9fa;
  --bg-card: #fff;
  --header-bg: #f8f9fa;
  --header-fg: #5f6368;
  --selected: #c6dafc;
  --selected-border: #1a73e8;
  --range: rgba(26,115,232,0.12);
  --accent: #1a73e8;
  --accent-hover: #1765cc;
  --row-hover: #f1f3f4;
  --shadow: 0 1px 3px rgba(60,64,67,0.15);
}
/* ===== Self-hosted web fonts (Google Fonts, OFL license, no CDN) ===== */
@font-face { font-family: 'Roboto'; src: url('fonts/Roboto-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('fonts/Roboto-Italic-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('fonts/OpenSans-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('fonts/OpenSans-Italic-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Italic-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'PT Sans'; src: url('fonts/PTSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'PT Sans'; src: url('fonts/PTSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'PT Sans'; src: url('fonts/PTSans-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'PT Sans'; src: url('fonts/PTSans-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'PT Serif'; src: url('fonts/PTSerif-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'PT Serif'; src: url('fonts/PTSerif-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'PT Serif'; src: url('fonts/PTSerif-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'PT Serif'; src: url('fonts/PTSerif-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('fonts/Merriweather-Variable.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Italic-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Oswald'; src: url('fonts/Oswald-Variable.woff2') format('woff2'); font-weight: 200 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('fonts/PlayfairDisplay-Variable.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('fonts/PlayfairDisplay-Italic-Variable.woff2') format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Noto Sans'; src: url('fonts/NotoSans-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Comfortaa'; src: url('fonts/Comfortaa-Variable.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('fonts/Caveat-Variable.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bebas Neue'; src: url('fonts/BebasNeue-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'PT Mono'; src: url('fonts/PTMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Variable.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Italic-Variable.woff2') format('woff2'); font-weight: 100 800; font-style: italic; font-display: swap; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: 'Google Sans','Segoe UI',Roboto,system-ui,sans-serif; font-size: 13px; color: #202124; background: var(--bg); }
body { display: flex; flex-direction: column; overflow: hidden; }

/* ===== Top bar ===== */
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; background: var(--bg-card); border-bottom: 1px solid var(--border);
}
.brand { font-weight: 600; color: var(--accent); font-size: 15px; }
.topbar input[type=text] {
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px;
  font: inherit; min-width: 130px;
}
.spacer { flex: 1; }
.peers { display: flex; gap: 4px; }
.peer {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 600; box-shadow: var(--shadow);
}
.btn-icon {
  padding: 5px 10px; border: 1px solid var(--border); background: var(--bg-card);
  border-radius: 4px; cursor: pointer; font: inherit; color: #3c4043;
}
.btn-icon:hover { background: var(--row-hover); }
.btn-save { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 500; }
.btn-save:hover { background: var(--accent-hover); }
.btn-save.dirty { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(26,115,232,0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(26,115,232,0); }
}

.save-state {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--border);
  font-size: 12px; color: var(--header-fg); user-select: none;
}
.save-state .save-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #bdc1c6; transition: background 0.15s;
}
.save-state.saved      { background: #e6f4ea; border-color: #ceead6; color: #137333; }
.save-state.saved      .save-dot { background: #1e8e3e; }
.save-state.dirty      { background: #fef7e0; border-color: #fbe07c; color: #b06000; }
.save-state.dirty      .save-dot { background: #f9ab00; }
.save-state.saving     { background: #e8f0fe; border-color: #aecbfa; color: #1967d2; }
.save-state.saving     .save-dot { background: var(--accent); animation: spin 1s linear infinite; }
.save-state.error      { background: #fce8e6; border-color: #f4c7c3; color: #c5221f; }
.save-state.error      .save-dot { background: #d93025; }
@keyframes spin {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(0.5); opacity: 0.4; }
  100% { transform: scale(1); opacity: 1; }
}
.status {
  color: var(--header-fg); font-size: 12px; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card);
}
.status .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #d93025; margin-right: 6px; vertical-align: middle;
}
.status.online .dot { background: #1e8e3e; }

/* ===== Menu ===== */
.menubar {
  display: flex; gap: 2px; padding: 2px 8px;
  background: var(--bg-card); border-bottom: 1px solid var(--border);
  position: relative; z-index: 50;
}
.menu {
  padding: 4px 10px; border-radius: 4px; cursor: pointer;
  color: #3c4043; font-size: 13px; user-select: none; position: relative;
}
.menu:hover { background: var(--row-hover); }
.menu.open { background: #e8f0fe; color: var(--accent); }
.menu .dropdown {
  display: none; position: absolute; top: 100%; left: 0; min-width: 240px;
  background: #fff; border: 1px solid var(--border); border-radius: 4px;
  box-shadow: 0 4px 14px rgba(60,64,67,0.2); padding: 6px 0; z-index: 60;
}
.menu.open .dropdown { display: block; }
.mi {
  padding: 6px 14px; display: flex; justify-content: space-between; gap: 24px;
  cursor: pointer; color: #202124; white-space: nowrap;
}
.mi:hover { background: var(--row-hover); }
.mi.disabled { color: #bdc1c6; cursor: default; }
.mi.disabled:hover { background: transparent; }
.mi .kbd {
  color: var(--header-fg); font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11px;
}
.msep { height: 1px; background: var(--border); margin: 6px 0; }

/* ===== Toolbar ===== */
.toolbar {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px;
  background: var(--bg-card); border-bottom: 1px solid var(--border);
}
.tgroup {
  display: flex; gap: 2px; padding: 0 6px;
  border-right: 1px solid var(--border);
}
.tgroup:last-child { border-right: 0; }
.toolbar button {
  min-width: 28px; height: 28px; padding: 0 8px;
  border: 1px solid transparent; background: transparent; border-radius: 4px;
  cursor: pointer; font: inherit; color: #3c4043;
}
.toolbar button:hover:not(:disabled) { background: var(--row-hover); }
.toolbar button.active { background: #d2e3fc; color: var(--accent); }
.toolbar button:disabled { opacity: 0.4; cursor: default; }
.toolbar select {
  height: 28px; padding: 0 6px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-card); font: inherit;
}
/* Font picker widget */
.font-picker { position: relative; display: inline-flex; }
.fp-widget { display: inline-flex; }
.fp-widget .fp-inp,
.font-picker input {
  width: 140px; height: 28px; padding: 0 6px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-card); font: inherit; cursor: pointer;
}
.fp-widget .fp-inp:focus,
.font-picker input:focus { outline: none; border-color: var(--accent); }
/* cw-font-picker inside wizard: wider input */
.cw-font-picker .fp-inp { width: 180px; }
.fp-drop,
.font-picker-drop {
  display: none; position: fixed; z-index: 1100;
  background: #fff; border: 1px solid var(--border); border-radius: 4px;
  box-shadow: 0 4px 16px rgba(60,64,67,.22);
  width: 260px; max-height: 320px; overflow-y: auto;
}
.fp-drop.open,
.font-picker-drop.open { display: block; }
.fp-item {
  padding: 5px 12px; cursor: pointer; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #202124;
}
.fp-item:hover, .fp-item.active { background: var(--row-hover); }
.fp-item.selected { color: var(--accent); font-weight: 600; }
.fp-group {
  padding: 4px 12px 2px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--header-fg); user-select: none;
  border-top: 1px solid var(--border); margin-top: 2px;
}
.fp-group:first-child { border-top: none; margin-top: 0; }
/* ===== Font size combo (input + preset dropdown) ===== */
.sz-widget { display: inline-flex; }
.sz-widget .sz-inp {
  width: 52px; height: 28px; padding: 0 6px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-card); font: inherit; text-align: center;
}
.sz-widget .sz-inp:focus { outline: none; border-color: var(--accent); }
.sz-drop {
  display: none; position: fixed; z-index: 1100;
  background: #fff; border: 1px solid var(--border); border-radius: 4px;
  box-shadow: 0 4px 16px rgba(60,64,67,.22);
  max-height: 280px; overflow-y: auto;
}
.sz-drop.open { display: block; }
.sz-item {
  padding: 4px 12px; cursor: pointer; font-size: 13px; text-align: center;
  color: #202124;
}
.sz-item:hover { background: var(--row-hover); }
.sz-item.selected { color: var(--accent); font-weight: 600; }

/* Color buttons (text color / fill) — open the color popover on click. */
.toolbar .color-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  height: 28px; min-width: 26px; padding: 2px 5px 3px; line-height: 1;
  border: 1px solid transparent; border-radius: 4px; background: var(--bg-card); cursor: pointer;
}
.toolbar .color-btn:hover { background: var(--row-hover); }
.toolbar .color-btn .color-bar {
  display: block; width: 16px; height: 3px; margin-top: 2px; border-radius: 1px;
  background: #000; box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}

/* ===== Color picker popover ===== */
.cp-pop {
  position: fixed; z-index: 1100; background: var(--bg-card);
  border: 1px solid var(--border-strong); border-radius: 6px;
  box-shadow: 0 4px 16px rgba(60,64,67,0.25); padding: 8px; display: flex; flex-direction: column; gap: 8px;
}
.cp-grid { display: grid; grid-template-columns: repeat(10, 18px); gap: 4px; }
.cp-sw { width: 18px; height: 18px; padding: 0; border: 1px solid rgba(0,0,0,0.15); border-radius: 3px; cursor: pointer; }
.cp-sw:hover { transform: scale(1.15); }
.cp-sw.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.cp-custom { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--header-fg); border-top: 1px solid var(--border); padding-top: 8px; }
.cp-custom input[type=color] { width: 32px; height: 24px; border: 1px solid var(--border); border-radius: 3px; padding: 0; background: none; cursor: pointer; }
.cp-foot { display: flex; justify-content: flex-end; gap: 6px; border-top: 1px solid var(--border); padding-top: 8px; }
.cp-foot button { height: 30px; padding: 0 14px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card); cursor: pointer; font-size: 13px; }
.cp-foot button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ===== Borders dropdown ===== */
.borders-pop {
  position: fixed; z-index: 120; background: var(--bg-card);
  border: 1px solid var(--border-strong); border-radius: 6px;
  box-shadow: 0 4px 16px rgba(60,64,67,0.25); padding: 6px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 240px;
}
.borders-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border: none; background: none; cursor: pointer; border-radius: 5px;
  font: inherit; font-size: 13px; text-align: left; color: #202124;
}
.borders-item:hover { background: var(--bg); }
.borders-item.danger { color: #d93025; grid-column: 1 / -1; border-top: 1px solid var(--border); margin-top: 2px; padding-top: 8px; }
.borders-item svg { flex: 0 0 auto; }

/* ===== Formula bar ===== */
.formula-bar {
  display: flex; align-items: center; gap: 8px; padding: 4px 12px;
  background: var(--bg-card); border-bottom: 1px solid var(--border);
}
.formula-bar .addr {
  font-family: ui-monospace,Menlo,Consolas,monospace; min-width: 70px;
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px;
  color: var(--header-fg); text-align: center; background: var(--bg);
}
.formula-bar .fx { color: var(--header-fg); font-style: italic; font-family: serif; }
.fx-range-btn {
  flex-shrink: 0; padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--header-bg); cursor: pointer; font-size: 15px; line-height: 1;
  color: var(--fg); display: flex; align-items: center; justify-content: center;
}
.fx-range-btn:hover { background: var(--hover); border-color: var(--accent); }
.fx-clear-btn {
  flex-shrink: 0; padding: 2px 7px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--header-bg); cursor: pointer; font-size: 12px; line-height: 1;
  color: var(--header-fg); display: flex; align-items: center; justify-content: center;
}
.fx-clear-btn:hover { background: #fce8e6; border-color: #d93025; color: #d93025; }
body.readonly .fx-clear-btn, body.preview-mode .fx-clear-btn { pointer-events: none; opacity: 0.5; }
.formula-bar input {
  flex: 1; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px;
  font-family: ui-monospace,Menlo,Consolas,monospace;
}

/* ===== Banner ===== */
.banner {
  padding: 6px 12px; background: #fef7e0; border-bottom: 1px solid #f9ab00;
  font-size: 12px; display: none;
}
.banner.show { display: block; }

/* ===== Main ===== */
.main { flex: 1; display: flex; min-height: 0; }
.grid-wrap { flex: 1; overflow: auto; background: #fff; position: relative; }

/* ===== Grid ===== */
table.grid {
  border-collapse: separate; border-spacing: 0; table-layout: fixed;
  font-family: 'Google Sans',Arial,sans-serif;
}
table.grid th, table.grid td {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0; height: 22px;
}
/* Top header row (A B C ...) — sticks to top while scrolling */
table.grid thead th {
  background: var(--header-bg); text-align: center; font-weight: 500;
  position: sticky; top: 0; z-index: 5; color: var(--header-fg);
  user-select: none; font-size: 11px;
  border-top: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border-strong);
}
/* Left header column (1 2 3 ...) — sticks to left while scrolling */
table.grid td.row-head {
  position: sticky; left: 0; background: var(--header-bg); text-align: center;
  color: var(--header-fg); z-index: 4; width: 46px; min-width: 46px;
  font-size: 11px; user-select: none;
  border-left: 1px solid var(--border);
  box-shadow: 1px 0 0 var(--border-strong);
}
/* Corner (top-left) — must be above BOTH so it stays visible diagonally */
table.grid thead th.row-head {
  left: 0; z-index: 6; width: 46px; min-width: 46px;
  box-shadow: 1px 1px 0 var(--border-strong);
}
table.grid th:first-child, table.grid th.col-head:first-of-type {
  border-left: 1px solid var(--border);
}
table.grid td.cell {
  cursor: cell; padding: 2px 6px; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; position: relative; line-height: 1.38;
  background: #fff;
}
table.grid td.cell.num { text-align: right; }
/* Word wrap — the <tr> height acts as a minimum, so the row grows to fit */
table.grid td.cell.wrap {
  white-space: normal; overflow-wrap: anywhere; text-overflow: clip;
}
table.grid td.cell.err { color: #d93025; }
/* range tint — use position+overlay so it works on top of inline background */
table.grid td.cell { position: relative; }
table.grid td.cell.in-range::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--selected-border);
  opacity: 0.18;
  pointer-events: none;
}
/* Text wrapper — above the range tint background */
table.grid td.cell .cell-text { position: relative; z-index: 1; user-select: none; }

/* Headers indicate that their column/row is in selection */
table.grid th.col-head.in-range,
table.grid td.row-head.in-range {
  background: #d2e3fc; color: var(--accent); font-weight: 600;
}
table.grid th.col-head, table.grid td.row-head { cursor: pointer; }

table.grid td.cell.selected {
  box-shadow: inset 0 0 0 2px var(--selected-border);
  z-index: 1;
}
/* Outer frame around the whole selected range */
.range-frame {
  position: absolute; pointer-events: none; z-index: 4;
  border: 2px solid var(--selected-border);
  box-sizing: border-box; border-radius: 1px;
}
.range-frame.no-border { border-color: transparent; }
/* Frames around the disjoint Ctrl+click ranges — same crisp border as the
   active range so multi-selection reads as clearly as a normal selection
   (no fill handle on these; only the active range gets that). */
.range-frame.extra { z-index: 4; }
/* Drag handle in the bottom-right corner — pulling it extends the pattern */
.fill-handle {
  position: absolute; right: -4px; bottom: -4px;
  width: 7px; height: 7px;
  background: var(--selected-border);
  border: 1px solid #fff;
  box-sizing: border-box;
  pointer-events: auto;
  cursor: crosshair;
}
/* Preview frame for the range being dragged out, before mouseup commits it */
.fill-preview-frame {
  position: absolute; pointer-events: none; z-index: 4;
  border: 1px dashed var(--selected-border);
  box-sizing: border-box;
}
table.grid td.cell.pick {
  background: rgba(52,168,83,0.12);
  box-shadow: inset 0 0 0 1px #34a853;
}

/* ===== Pinned strip ===== */
/* Mirrors pinned rows/cols in a sticky overlay above/left of the main grid,
   so they stay visible (and editable) without moving out of their original
   place in the document. Built from up to 3 small tables (top/left/corner)
   instead of one big table, since sticking on two axes at once with
   table-layout doesn't compose cleanly across quadrants. */
.pinned-strip {
  position: sticky; top: 0; left: 0; z-index: 8;
  width: 0; height: 0; display: block;
  pointer-events: none;
}
.pinned-strip table.grid { pointer-events: auto; position: absolute; top: 0; left: 0; }
/* Inside the pinned strip nothing scrolls independently, so none of the
   main table's sticky-header tricks apply — every cell/header sits at a
   plain relative position within its own little table. */
.pinned-strip table.grid th,
.pinned-strip table.grid td.row-head {
  position: relative !important; top: 0; left: 0;
}
table.grid.pinned-corner { z-index: 3; }
table.grid.pinned-top { z-index: 2; }
table.grid.pinned-left { z-index: 1; }
/* When a corner table exists it already shows the pinned cols' letters, so
   the left strip's own thead would just duplicate it one row lower — hide
   it and let buildPinnedStrip()'s margin-top push the left table's body
   down to align with row 0 instead. */
table.grid.pinned-left.has-corner thead { display: none; }
table.grid.pinned-corner,
table.grid.pinned-top,
table.grid.pinned-left {
  box-shadow: 0 2px 4px rgba(60,64,67,0.2);
}
.pin-marker {
  position: absolute; top: 1px; right: 1px; font-size: 8px; line-height: 1;
  cursor: pointer; opacity: 0.7;
}
.pin-marker:hover { opacity: 1; }
table.grid td.row-head.pinned, table.grid th.col-head.pinned {
  background: #fef7e0;
}
/* The pinned strip already shows col letters / row numbers in its own
   thead / row-head — hide the main table's copies so they don't repeat
   right below/right of the strip. */
table.grid.hide-thead thead { display: none; }
table.grid.hide-rowhead td.row-head { display: none; }
table.grid td.cell input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 2px solid var(--selected-border); outline: 0; font: inherit;
  padding: 2px 6px; background: #fffde7;
}

/* column resize handle — z-index above the selection's fill handle (z-index:4),
   which overhangs 4px past the selected range's right/bottom edge and would
   otherwise swallow the mousedown when the selection sits on a column/row
   boundary (its onFillHandleMouseDown stopPropagation()s, blocking resize). */
table.grid th .resize {
  position: absolute; top: 0; right: -3px; width: 6px; height: 100%;
  cursor: col-resize; z-index: 6;
}
table.grid th { position: relative; }

/* row resize handle — NOTE: do NOT set position:relative on td.row-head here.
   It would override the position:sticky declared above and the row numbers would
   scroll away horizontally. A sticky element is itself a containing block for
   absolutely-positioned children, so the handle still positions correctly. */
table.grid td.row-head .row-resize {
  position: absolute; left: 0; bottom: -3px; height: 6px; width: 100%;
  cursor: row-resize; z-index: 6;
}

/* ===== Sheet tabs ===== */
.sheet-tabs {
  display: flex; align-items: stretch;
  background: var(--bg-card); border-top: 1px solid var(--border);
  padding: 0 6px; min-height: 32px;
}
.add-sheet {
  border: 0; background: transparent; cursor: pointer; padding: 0 10px;
  font-size: 18px; color: var(--header-fg);
}
.add-sheet:hover { color: var(--accent); }
.tabs { display: flex; gap: 2px; overflow-x: auto; flex: 1; min-width: 0; }
.status-bar {
  display: flex; align-items: center; gap: 14px; flex-shrink: 0;
  padding: 0 14px; font-size: 12px; color: var(--header-fg);
  white-space: nowrap;
}
.status-bar .stat strong { color: #3c4043; font-weight: 600; margin-left: 4px; }
.zoom-bar {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  padding: 0 10px; border-left: 1px solid var(--border);
}
.zoom-btn {
  width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--header-bg); color: var(--header-fg); cursor: pointer;
  font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.zoom-btn:hover { background: var(--hover); }
#zoom-slider {
  width: 90px; height: 4px; cursor: pointer; accent-color: var(--accent);
}
.zoom-label {
  font-size: 12px; color: var(--header-fg); min-width: 36px; text-align: right;
  cursor: pointer; user-select: none;
}
.tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; cursor: pointer; border-right: 1px solid var(--border);
  color: #3c4043; user-select: none; white-space: nowrap;
  font-size: 13px; position: relative;
}
.tab:hover { background: var(--row-hover); }
.tab.active {
  background: #fff; font-weight: 500; color: var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent);
}
.tab .close {
  opacity: 0; padding: 0 4px; font-size: 14px; color: #5f6368;
}
.tab:hover .close { opacity: 1; }
.tab .close:hover { color: #d93025; }

/* ===== History side ===== */
.side {
  width: 320px; border-left: 1px solid var(--border); background: var(--bg);
  display: none; flex-direction: column; min-height: 0;
}
.side.open { display: flex; }
.side-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: var(--bg-card); border-bottom: 1px solid var(--border);
}
.side-head h3 { margin: 0; font-size: 13px; }
.btn-x { border: 0; background: none; cursor: pointer; font-size: 18px; color: var(--header-fg); }
.btn-x:hover { color: #d93025; }
.side-actions {
  padding: 8px 12px; display: flex; gap: 6px;
  background: var(--bg-card); border-bottom: 1px solid var(--border);
}
.side-actions button {
  padding: 4px 10px; border: 1px solid var(--border); background: var(--bg-card);
  border-radius: 4px; cursor: pointer; font: inherit;
}
.side-actions button:hover { background: var(--row-hover); }
.history { flex: 1; overflow: auto; }
.commit { padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.commit:hover { background: var(--row-hover); }
.commit.active { background: #e8f0fe; }
.commit .msg { font-weight: 500; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.commit .meta { font-size: 11px; color: var(--header-fg); font-family: ui-monospace,Menlo,Consolas,monospace; }
.commit .actions-row { display: none; gap: 6px; margin-top: 8px; }
.commit.active .actions-row { display: flex; }
.commit .actions-row button {
  padding: 3px 10px; border: 1px solid var(--border); background: var(--bg-card);
  border-radius: 4px; cursor: pointer; font: inherit; font-size: 12px;
}
.commit .actions-row button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ===== Modal ===== */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(60,64,67,0.5); display: none;
  align-items: center; justify-content: center; z-index: 100;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: #fff; border-radius: 8px; width: 480px; max-width: 90vw;
  box-shadow: 0 24px 64px rgba(60,64,67,0.3);
}
/* When the modal contains a dlg-full child, hide the backdrop tint and remove shadow */
.modal-backdrop:has(.dlg-full) { background: transparent; }
.modal.dlg.dlg-full { box-shadow: none; }
.modal h2 { margin: 0; padding: 16px 20px; font-size: 16px; border-bottom: 1px solid var(--border); }
.modal .body { padding: 16px 20px; display: grid; grid-template-columns: 140px 1fr; gap: 10px 14px; align-items: center; }
.modal .body input[type=text], .modal .body input[type=password], .modal .body input[type=number] {
  width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: 4px; font: inherit;
}
.modal .foot { padding: 4px 8px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 6px; }
.modal .foot button {
  padding: 6px 16px; border: 1px solid var(--border); background: var(--bg-card);
  border-radius: 4px; cursor: pointer; font: inherit;
}
.modal .foot button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.modal .foot button.primary:hover { background: var(--accent-hover); }
.modal .hint { grid-column: 1 / -1; font-size: 11px; color: var(--header-fg); }
.modal code { background: var(--bg); padding: 1px 4px; border-radius: 3px; }

/* ===== Generic dialog ===== */
.dlg { width: 460px; max-width: 92vw; }
.dlg.dlg-md { width: 560px; }
.dlg.dlg-lg { width: 720px; }
.dlg .dlg-body {
  padding: 16px 20px; max-height: 60vh; overflow: auto;
  font-size: 13px; line-height: 1.5; color: #202124;
}
.dlg .dlg-body p { margin: 0 0 10px; }
.dlg .dlg-body p:last-child { margin-bottom: 0; }
.dlg .dlg-body input[type=text], .dlg .dlg-body input[type=password], .dlg .dlg-body textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px;
  font: inherit; box-sizing: border-box;
}
.dlg .dlg-body textarea { min-height: 80px; resize: vertical; }
.dlg .dlg-body .field { margin-bottom: 12px; }
.dlg .dlg-body .field label { display: block; margin-bottom: 4px; color: var(--header-fg); font-size: 12px; }

/* ===== Formula wizard (fx) ===== */
.formula-bar .fx { user-select: none; }
.dlg .dlg-body.fw, .dlg .dlg-body:has(.fw) { padding: 0; }
.fw { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 380px; max-height: 72vh; }
.fw-fx { font-style: italic; font-family: Georgia, 'Times New Roman', serif; margin-right: 6px; color: var(--accent); }
.fw-list { border-right: 1px solid var(--border); padding: 10px; display: flex; flex-direction: column; min-height: 0; }
.fw-search { width: 100%; margin-bottom: 8px; }
.fw-items { display: flex; flex-direction: column; gap: 2px; overflow: auto; }
.fw-group {
  margin: 8px 4px 2px; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--header-fg);
}
.fw-group:first-child { margin-top: 0; }
.fw-item {
  padding: 7px 10px; border-radius: 4px; cursor: pointer; font-size: 13px;
  color: #202124; display: flex; align-items: center; gap: 8px;
}
.fw-item-icon { width: 20px; text-align: center; flex: none; opacity: 0.75; font-size: 12px; }
.fw-item:hover { background: var(--bg); }
.fw-item.active { background: #e8f0fe; color: var(--accent); font-weight: 600; }
.fw-empty { padding: 10px; color: var(--header-fg); font-size: 12px; }
.fw-pane { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: auto; }
.fw-desc { font-size: 13px; color: var(--header-fg); line-height: 1.5; }
.fw-builder { display: flex; flex-direction: column; gap: 12px; }
.fw-form { display: flex; flex-direction: column; gap: 12px; }
.fw-field { display: flex; flex-direction: column; gap: 4px; }
.fw-field label { font-size: 12px; color: var(--header-fg); }
.fw-field input { font-family: var(--font-mono, monospace); }
.fw-field select { height: 32px; border: 1px solid var(--border); border-radius: 4px; font: inherit; padding: 0 8px; background: var(--bg-card); }
.fw-hint { font-size: 11px; color: var(--header-fg); opacity: 0.8; }
/* строки условий («колонка / оператор / значение / ✕») — по образцу фильтров */
.fw-conds { display: flex; flex-direction: column; gap: 6px; }
.fw-cond-row { display: grid; grid-template-columns: 44px 1.1fr 0.9fr 1.2fr 30px; gap: 6px; align-items: center; }
.fw-cond-row select, .fw-cond-row input { width: 100%; height: 32px; box-sizing: border-box; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; font: inherit; }
.fw-cond-row .fw-range-row { display: flex; }
.fw-if-row { grid-template-columns: 58px 1.1fr 70px 1.2fr 30px; }
.fw-concat-row { grid-template-columns: 1fr 30px; }
.fw-where { font-size: 12px; color: var(--header-fg); text-align: center; }
.fw-val { display: block; min-width: 0; }
.fw-val input { width: 100%; }
.fw-conn { height: 32px; }
.fw-del { height: 28px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card); cursor: pointer; color: #d93025; font-size: 12px; padding: 0; }
.fw-del:hover:not(:disabled) { background: #fce8e6; }
.fw-del:disabled { opacity: 0.35; cursor: default; }
.fw-add { margin-top: 4px; align-self: flex-start; height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card); cursor: pointer; font-size: 12px; }
.fw-add:hover { background: var(--bg); }
.fw-check { font-size: 13px; display: flex; align-items: center; gap: 8px; }
.fw-ext-picked { font-size: 13px; padding: 8px 10px; background: var(--bg); border-radius: 4px; color: #202124; word-break: break-all; }
/* каталог всех функций */
.fw-catalog { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.fw-catalog-list { max-height: 180px; overflow: auto; border: 1px solid var(--border); border-radius: 4px; padding: 4px; }
.fw-catalog-list .fw-item { font-family: var(--font-mono, monospace); padding: 4px 8px; }
/* предпросмотр: формула + вычисленный результат */
.fw-preview { margin-top: auto; background: var(--bg); border-radius: 4px; padding: 10px 12px; flex: none; }
.fw-preview-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.fw-preview-label { font-size: 11px; color: var(--header-fg); }
.fw-clear {
  height: 24px; padding: 0 8px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-card); cursor: pointer; font-size: 11px; color: var(--header-fg);
}
.fw-clear:hover { background: #fce8e6; border-color: #d93025; color: #d93025; }
.fw-freeedit {
  width: 100%; min-height: 110px; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 4px; resize: vertical;
  font-family: var(--font-mono, monospace); font-size: 13px; line-height: 1.5;
}
.fw-freeedit:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(26,115,232,.2); }
.fw-preview code { font-family: var(--font-mono, monospace); font-size: 14px; color: #202124; word-break: break-all; display: block; }
.fw-preview code.fw-code-empty { color: var(--header-fg); font-style: italic; font-family: inherit; font-size: 12px; }
.fw-result { margin-top: 6px; font-size: 13px; font-weight: 600; color: #188038; }
.fw-result.fw-result-warn { color: #d93025; font-weight: 500; }

/* ===== Standard Filter dialog ===== */
.dlg .dlg-body.flt, .dlg .dlg-body:has(.flt) { padding: 0; }
.flt-fx { color: var(--accent); margin-right: 4px; }
.flt-presets { display: flex; gap: 8px; padding: 12px 16px 0; align-items: center; }
.flt-presets select { flex: 1; height: 32px; border: 1px solid var(--border); border-radius: 4px; font: inherit; padding: 0 8px; }
.flt-presets button { height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card); cursor: pointer; font-size: 12px; white-space: nowrap; }
.flt-presets button:hover:not(:disabled) { background: var(--bg); }
.flt-presets button:disabled { opacity: 0.5; cursor: default; }
.flt-modes { display: flex; gap: 4px; padding: 12px 16px 0; align-items: center; }
.flt-clear { margin-left: auto; height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card); cursor: pointer; font-size: 12px; color: var(--header-fg); }
.flt-clear:hover { background: var(--bg); }
.flt-tab {
  font-size: 12px; padding: 5px 12px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg-card); cursor: pointer; color: var(--header-fg);
}
.flt-tab.active { background: #e8f0fe; color: var(--accent); border-color: var(--accent); font-weight: 600; }
.flt-pane { padding: 14px 16px; }

/* simple mode grid */
.flt-simple { display: flex; flex-direction: column; gap: 6px; }
.flt-row { display: grid; grid-template-columns: 78px 1fr 1fr 1.2fr 30px; gap: 8px; align-items: center; }
.flt-row-head { font-size: 11px; color: var(--header-fg); }
.flt-row select, .flt-row .flt-val input { width: 100%; height: 32px; box-sizing: border-box; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; font: inherit; }
.flt-where { font-size: 12px; color: var(--header-fg); text-align: center; }
.flt-val { display: block; }
.flt-del { height: 28px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card); cursor: pointer; color: #d93025; font-size: 12px; padding: 0; }
.flt-del:hover { background: #fce8e6; }
.flt-add { margin-top: 4px; align-self: flex-start; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card); cursor: pointer; font-size: 13px; }
.flt-add:hover { background: var(--bg); }

/* advanced mode — nested groups */
.flt-group { border: 1px solid var(--border-strong); border-radius: 6px; padding: 10px; background: var(--bg); margin-bottom: 8px; }
.flt-group .flt-group { background: var(--bg-card); }
.flt-group-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.flt-group-bar select { height: 28px; width: 80px; border: 1px solid var(--border); border-radius: 4px; font: inherit; }
.flt-group-lbl { font-size: 11px; color: var(--header-fg); }
.flt-group-bar .flt-del { margin-left: auto; }
.flt-leaf { grid-template-columns: 1fr 1fr 1.2fr 30px; margin-bottom: 6px; }
.flt-group-actions { display: flex; gap: 8px; margin-top: 4px; }
.flt-group-actions button { height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card); cursor: pointer; font-size: 12px; }
.flt-group-actions button:hover { background: var(--bg); }
.flt-preview { margin-top: 8px; font-family: var(--font-mono, monospace); font-size: 12px; color: var(--header-fg); word-break: break-word; }

/* options */
.flt-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.flt-check { font-size: 13px; display: flex; align-items: center; gap: 8px; }
.flt-check.disabled { color: var(--header-fg); opacity: 0.6; }

/* ===== Autofilter funnels + popover ===== */
.col-funnel {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; line-height: 14px; text-align: center;
  font-size: 9px; color: var(--header-fg); cursor: pointer; border-radius: 2px;
  background: rgba(255,255,255,0.7); z-index: 5;
}
.col-funnel:hover { background: #e8f0fe; color: var(--accent); }
.col-funnel.on { background: var(--accent); color: #fff; }
.funnel-pop {
  position: fixed; z-index: 100; width: 300px; max-width: 92vw; background: var(--bg-card);
  border: 1px solid var(--border-strong); border-radius: 6px;
  box-shadow: 0 4px 16px rgba(60,64,67,0.25); padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.funnel-search { width: 100%; height: 30px; box-sizing: border-box; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; font: inherit; }
.funnel-list { max-height: 300px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
.funnel-item { display: flex; align-items: center; gap: 8px; padding: 4px 4px; font-size: 13px; cursor: pointer; border-radius: 3px; }
.funnel-item input[type=checkbox] { flex: 0 0 auto; margin: 0; }
.funnel-item-txt { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.funnel-item:hover { background: var(--bg); }
.funnel-all { border-bottom: 1px solid var(--border); padding-bottom: 6px; font-weight: 500; }
.funnel-empty { padding: 10px 4px; font-size: 12px; color: var(--header-fg); text-align: center; }
.funnel-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; border-top: 1px solid var(--border); padding-top: 6px; }
.funnel-foot-right { display: flex; gap: 6px; }
.funnel-foot button { height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card); cursor: pointer; font-size: 13px; }
.funnel-foot button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.funnel-reset { color: #d93025; }
.funnel-reset:hover { background: #fce8e6; }

/* shortcut/help layouts */
.kbd-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; align-items: baseline; }
.kbd-list kbd {
  background: var(--bg); border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 4px; padding: 2px 8px; font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 12px; color: #3c4043; white-space: nowrap;
}
.kbd-list .desc { color: #202124; }
.kbd-list .section { grid-column: 1/-1; font-weight: 600; color: var(--accent); margin-top: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.kbd-list .section:first-child { margin-top: 0; }

.fn-search {
  position: sticky; top: 0; background: #fff; padding: 0 0 10px; z-index: 1;
}
.fn-search input { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px; font: inherit; }
.fn-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 4px 12px; font-family: ui-monospace,Menlo,Consolas,monospace; font-size: 12px;
}
.fn-list code {
  padding: 3px 6px; background: var(--bg); border-radius: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.about { text-align: center; padding: 8px 0; }
.about .logo { font-size: 32px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.about .ver { color: var(--header-fg); font-size: 12px; margin-bottom: 16px; }
.about .lic { font-size: 12px; color: var(--header-fg); margin-top: 16px; }
.about .lic a { color: var(--accent); }

/* ===== Auth overlay (login / setup) ===== */
.auth-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: linear-gradient(135deg, #e8f0fe 0%, #f8f9fa 100%);
  display: flex; align-items: center; justify-content: center;
}
.auth-card {
  width: 380px; max-width: 92vw; background: #fff; border-radius: 12px;
  padding: 32px; box-shadow: 0 12px 40px rgba(60,64,67,0.15);
}
.auth-logo { font-size: 24px; font-weight: 700; color: var(--accent); text-align: center; }
.auth-sub { text-align: center; color: var(--header-fg); margin: 6px 0 24px; font-size: 13px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--header-fg); }
.auth-form input {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-size: 14px;
}
.auth-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.auth-btn {
  margin-top: 8px; padding: 10px; background: var(--accent); color: #fff; border: 0;
  border-radius: 6px; cursor: pointer; font: inherit; font-weight: 500; font-size: 14px;
}
.auth-btn:hover { background: var(--accent-hover); }
.auth-err { color: #d93025; font-size: 12px; min-height: 16px; }
.auth-note { color: var(--header-fg); font-size: 11px; text-align: center; margin-top: 8px; }

/* ===== Admin panel ===== */
.admin-users .admin-actions { margin-bottom: 12px; }
.admin-users button.primary {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  padding: 6px 14px; border-radius: 4px; cursor: pointer; font: inherit;
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th, .admin-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.admin-table th { background: var(--bg); font-weight: 500; color: var(--header-fg); font-size: 12px; }
.admin-table td.row-actions { white-space: nowrap; }
.admin-table td.row-actions button {
  padding: 3px 8px; margin-right: 4px; border: 1px solid var(--border); background: #fff;
  border-radius: 3px; cursor: pointer; font: inherit; font-size: 11px;
}
.admin-table td.row-actions button:hover { background: var(--row-hover); }
.badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.badge.admin { background: #e8f0fe; color: var(--accent); }
.badge.ok    { background: #e6f4ea; color: #1e8e3e; }
.badge.off   { background: #fce8e6; color: #d93025; }

/* User chip in topbar */
.user-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 4px; cursor: pointer;
}
.user-chip:hover { background: var(--row-hover); }
.user-chip .ava {
  width: 24px; height: 24px; border-radius: 50%; background: var(--accent);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}
.user-menu {
  position: absolute; top: 100%; right: 0; background: #fff; border: 1px solid var(--border);
  border-radius: 6px; box-shadow: 0 4px 14px rgba(60,64,67,0.2); padding: 6px 0; min-width: 200px;
  z-index: 70; display: none;
}
.user-menu.open { display: block; }
.user-menu .mi { padding: 6px 14px; cursor: pointer; }
.user-menu .mi:hover { background: var(--row-hover); }
.user-menu .uinfo { padding: 8px 14px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.user-menu .uinfo .nm { font-weight: 500; }
.user-menu .uinfo .lg { color: var(--header-fg); font-size: 11px; }

/* ===== File manager ===== */
body.mode-files { background: #f6f8fa; }
body.mode-files #app-root { display: flex; flex-direction: column; height: 100vh; }

.fm-topbar {
  display: flex; align-items: center; gap: 14px; padding: 10px 18px;
  background: #fff; border-bottom: 1px solid var(--border);
}
.fm-topbar .brand { font-size: 16px; font-weight: 600; color: var(--accent); }
.fm-search-wrap { flex: 0 0 320px; }
.fm-search-wrap input {
  width: 100%; padding: 8px 12px 8px 32px; border: 1px solid var(--border);
  border-radius: 6px; font: inherit; font-size: 13px; background: var(--bg) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%235f6368" stroke-width="2.5"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>') no-repeat 10px 50%;
}
.fm-search-wrap input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.fm-body { flex: 1; display: flex; min-height: 0; }
.fm-side {
  width: 300px; background: #fff; border-right: 1px solid var(--border);
  padding: 16px 0; overflow: auto; display: flex; flex-direction: column; gap: 22px;
}
.fm-side-section { display: flex; flex-direction: column; }
.fm-side-item {
  padding: 10px 20px; cursor: pointer; user-select: none; font-size: 15px; color: #3c4043;
}
.fm-side-item:hover { background: var(--row-hover); }
.fm-side-item.active { background: #e8f0fe; color: var(--accent); font-weight: 500; }
.fm-tree { display: flex; flex-direction: column; }
.fm-tree-node {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 20px 8px 8px; cursor: pointer; font-size: 15px; color: #3c4043;
  white-space: nowrap; overflow: hidden;
}
.fm-tree-node:hover { background: var(--row-hover); }
.fm-tree-twisty {
  flex: 0 0 22px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 700;
  color: #3c4043; cursor: pointer; border-radius: 4px;
}
.fm-tree-twisty:not(.empty):hover { background: #d8dade; color: var(--accent); }
.fm-tree-icon { flex: 0 0 auto; font-size: 17px; }
.fm-tree-name { overflow: hidden; text-overflow: ellipsis; }
.fm-tree-node.active { background: #e8f0fe; color: var(--accent); font-weight: 500; }
.fm-tree-node.drag-over,
.fm-side-item.drag-over { background: #d2e3fc; outline: 2px dashed var(--accent); outline-offset: -2px; }

.fm-main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.fm-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 24px; background: #fff; border-bottom: 1px solid var(--border);
}
.fm-breadcrumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.fm-breadcrumbs .crumb { cursor: pointer; padding: 4px 8px; border-radius: 4px; color: #3c4043; }
.fm-breadcrumbs .crumb:hover { background: var(--row-hover); }
.fm-breadcrumbs .crumb.home { font-weight: 500; }
.fm-breadcrumbs .sep { color: var(--header-fg); }

.fm-btn {
  padding: 7px 14px; border: 1px solid var(--border); background: #fff;
  border-radius: 6px; cursor: pointer; font: inherit; font-size: 13px; color: #3c4043;
}
.fm-btn:hover { background: var(--row-hover); }
.fm-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 500; }
.fm-btn.primary:hover { background: var(--accent-hover); }

.fm-grid {
  flex: 1; overflow: auto; padding: 18px 24px; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px; align-content: start;
}
.fm-item {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 12px; cursor: default; position: relative; user-select: none;
  transition: all 0.1s;
}
.fm-item:hover { background: #fafbfc; box-shadow: 0 2px 6px rgba(60,64,67,0.1); }
.fm-item.sel { background: #e8f0fe; border-color: var(--accent); }
.fm-item.dragging { opacity: 0.4; }
.fm-item.drag-over { background: #d2e3fc; border-color: var(--accent); border-style: dashed; }
.fm-item-icon { font-size: 32px; text-align: center; margin-bottom: 6px; }
.fm-item-name {
  font-size: 13px; font-weight: 500; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fm-item-meta { font-size: 11px; color: var(--header-fg); text-align: center; margin-top: 2px; }
.fm-item-menu {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border: 0; background: transparent;
  border-radius: 50%; cursor: pointer; color: var(--header-fg); font-size: 14px;
  opacity: 0;
}
.fm-item:hover .fm-item-menu { opacity: 1; }
.fm-item-menu:hover { background: var(--row-hover); }

.fm-empty {
  display: none; padding: 60px 24px; text-align: center; color: var(--header-fg);
  font-size: 14px;
}
.fm-empty.show { display: block; }

.fm-popup {
  position: fixed; background: #fff; border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 4px 14px rgba(60,64,67,0.2); padding: 6px 0; min-width: 200px; z-index: 80;
}
.fm-popup .mi { padding: 6px 14px; cursor: pointer; font-size: 13px; }
.fm-popup .mi:hover { background: var(--row-hover); }
.fm-popup .mi.disabled { color: #bdc1c6; cursor: default; }
.fm-popup .mi.disabled:hover { background: transparent; }

.fm-new-doc-menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 4px 14px rgba(60,64,67,0.18); padding: 6px 0;
  min-width: 220px; display: none; z-index: 80;
}
.fm-new-doc-menu.open { display: block; }
.fm-new-doc-menu .mi {
  padding: 8px 14px; cursor: pointer; font-size: 13px;
}
.fm-new-doc-menu .mi:hover { background: var(--row-hover); }

/* When file manager is mounted, hide the spreadsheet UI */
body.mode-files .topbar,
body.mode-files .menubar,
body.mode-files .toolbar,
body.mode-files .formula-bar,
body.mode-files .main,
body.mode-files .sheet-tabs { display: none !important; }

/* ===== Share dialog ===== */
.share-dlg { display: flex; flex-direction: column; gap: 14px; }
.share-target {
  padding: 10px 12px; background: var(--bg); border-radius: 6px;
  display: flex; align-items: center; gap: 8px;
}
.share-target .share-icon { font-size: 20px; }
.share-target .share-name { font-weight: 500; }
.share-target .share-hint { color: var(--header-fg); font-size: 11px; margin-left: 6px; }
.share-add { position: relative; }
.share-add input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  font: inherit; box-sizing: border-box;
}
.share-results {
  max-height: 200px; overflow: auto; margin-top: 8px;
  border: 1px solid var(--border); border-radius: 6px;
}
.share-results:empty { border: 0; }
.share-cand {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.share-cand:last-child { border-bottom: 0; }
.share-cand .ava {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 600;
}
.share-info { flex: 1; min-width: 0; }
.share-info .share-nm { font-weight: 500; font-size: 13px; }
.share-info .share-lg { color: var(--header-fg); font-size: 11px; }
.share-cand-role, .share-role-sel {
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; font: inherit;
  background: #fff;
}
.share-cand-add {
  padding: 5px 12px; background: var(--accent); color: #fff; border: 0;
  border-radius: 4px; cursor: pointer; font: inherit; font-size: 12px;
}
.share-cand-add:hover { background: var(--accent-hover); }
.share-list-title { font-size: 12px; color: var(--header-fg); font-weight: 500; }
.share-list {
  border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.share-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.share-row:last-child { border-bottom: 0; }
.share-row.owner { background: var(--bg); }
.share-row .ava {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 600;
}
.share-role { color: var(--header-fg); font-size: 12px; padding: 4px 8px; }
.share-rm {
  width: 26px; height: 26px; border: 1px solid var(--border); background: #fff;
  border-radius: 50%; cursor: pointer; color: var(--header-fg); font-size: 14px;
}
.share-rm:hover:not(:disabled) { background: #fce8e6; color: #d93025; border-color: #fce8e6; }
.share-rm:disabled { opacity: 0.4; cursor: default; }
.share-list .empty { padding: 10px 12px; color: var(--header-fg); font-size: 12px; text-align: center; }

/* ===== Preview mode (просмотр старой версии) ===== */
#preview-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; background: #fef7e0; border-bottom: 2px solid #f9ab00;
  font-size: 13px; color: #b06000;
}
#preview-bar .pb-icon { font-size: 20px; }
#preview-bar .pb-text { flex: 1; line-height: 1.3; }
#preview-bar .pb-text code {
  background: #fff7c2; padding: 1px 6px; border-radius: 3px;
  font-family: ui-monospace,Menlo,Consolas,monospace; color: #5d4037;
}
#preview-bar .pb-meta { color: #8d6e3a; margin-left: 4px; }
#preview-bar .pb-msg { color: #5d4037; font-style: italic; margin-top: 2px; }
#preview-bar .pb-restore {
  padding: 6px 14px; background: #f9ab00; color: #fff; border: 0;
  border-radius: 4px; cursor: pointer; font: inherit; font-weight: 500;
}
#preview-bar .pb-restore:hover { background: #e9a100; }
#preview-bar .pb-close {
  width: 28px; height: 28px; border: 1px solid #d4a72c; background: transparent;
  color: #b06000; border-radius: 50%; cursor: pointer; font-size: 14px;
}
#preview-bar .pb-close:hover { background: #fff; }
#preview-bar .pb-legend {
  display: flex; align-items: center; gap: 10px; font-size: 11px; color: #5d4037;
}
#preview-bar .pb-legend .dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin-right: 3px; vertical-align: middle; border: 1px solid;
}
#preview-bar .pb-legend .dot.rm { background: rgba(217,48,37,0.3); border-color: #d93025; }
#preview-bar .pb-legend .dot.ch { background: rgba(249,171,0,0.3); border-color: #f9ab00; }
#preview-bar .pb-legend .dot.ad { background: rgba(52,168,83,0.3); border-color: #34a853; }

/* ===== Chart wizard ===== */
.cw { display: flex; flex-direction: column; gap: 18px; }
.cw-step { display: flex; gap: 14px; }
.cw-step-num {
  font-size: 22px; font-weight: 700; color: var(--accent);
  width: 30px; flex-shrink: 0; text-align: center;
}
.cw-step-text { flex: 1; min-width: 0; }
.cw-step-title { font-size: 16px; font-weight: 600; color: #202124; margin-bottom: 4px; }
.cw-step-hint { font-size: 12px; color: var(--header-fg); margin-bottom: 8px; }

.cw-data-card {
  border: 1px solid var(--border); border-radius: 8px; padding: 0;
  background: var(--bg); min-height: 80px; overflow: hidden;
}
.cw-data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cw-data-table th, .cw-data-table td { padding: 6px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.cw-data-table th { background: #fff; color: var(--header-fg); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
.cw-data-table td { background: #fff; }
.cw-data-table td:nth-child(2), .cw-data-table th:nth-child(2) { text-align: right; font-family: ui-monospace,Menlo,Consolas,monospace; }
.cw-data-table .more { color: var(--header-fg); font-style: italic; text-align: center; }
.cw-data-empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 90px; color: var(--header-fg); font-size: 13px; text-align: center; padding: 16px;
}
.cw-row-actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.cw-range-label {
  font-family: ui-monospace,Menlo,Consolas,monospace; font-size: 12px; color: var(--header-fg);
}
.cw-mini-btn {
  margin-left: auto; padding: 4px 12px; border: 1px solid var(--border);
  background: #fff; border-radius: 4px; cursor: pointer; font: inherit; font-size: 12px;
}
.cw-mini-btn:hover { background: var(--row-hover); }

/* Column-assignment list (multi-series wizard) */
.cw-cols { display: flex; flex-direction: column; gap: 6px; }
.cw-cols-empty { padding: 16px; text-align: center; color: var(--header-fg); font-size: 13px; border: 1px dashed var(--border); border-radius: 8px; }
.cw-col-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.cw-col-name { flex: 0 0 90px; font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-col-roles { display: flex; gap: 4px; }
.cw-series-name-inp {
  margin-left: auto; width: 110px; height: 26px; padding: 0 6px;
  border: 1px solid var(--border); border-radius: 4px; font: inherit; font-size: 12px;
  color: #202124; background: var(--bg-card);
}
.cw-series-name-inp:focus { outline: none; border-color: var(--accent); }
.cw-col-roles button { padding: 4px 10px; border: 1px solid var(--border); background: var(--bg-card); border-radius: 4px; cursor: pointer; font: inherit; font-size: 12px; color: var(--header-fg); }
.cw-col-roles button:hover { background: var(--row-hover); }
.cw-col-roles button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.cw-headerrow { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--header-fg); }

.cw-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 4px; }
.cw-type-card {
  border: 2px solid var(--border); border-radius: 10px; padding: 8px;
  cursor: pointer; text-align: center; background: #fff; position: relative;
  transition: all 0.12s;
}
.cw-type-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.cw-type-card.selected {
  border-color: var(--accent); background: #e8f0fe;
}
.cw-type-thumb {
  width: 100%; height: 70px; background: var(--bg); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cw-type-thumb svg { width: 100%; height: 100%; display: block; }
.cw-type-name { margin-top: 8px; font-size: 14px; font-weight: 600; color: #202124; }
.cw-type-check {
  margin-top: 2px; font-size: 11px; color: var(--accent); font-weight: 600;
  visibility: hidden;
}
.cw-type-card.selected .cw-type-check { visibility: visible; }
.cw-type-hint {
  margin-top: 12px; padding: 8px 12px; background: #fef7e0; border-radius: 6px;
  font-size: 13px; color: #5d4037;
}

#cw-title {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-size: 14px; box-sizing: border-box;
}
#cw-title:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.cw-preview-divider {
  text-align: center; color: var(--header-fg); font-size: 11px;
  font-family: ui-monospace,Menlo,Consolas,monospace; margin: 6px 0;
}
.cw-preview {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 14px; min-height: 320px; display: flex; align-items: center; justify-content: center;
}
.cw-preview svg { max-width: 100%; height: auto; }

/* Chart color controls */
.cw-colors-section { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.cw-colors-label { font-size: 12px; color: var(--header-fg); font-weight: 500; }
.cw-palette-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.cw-swatch-btn {
  display: flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card);
  cursor: pointer; font-size: 12px; color: #202124;
}
.cw-swatch-btn:hover { border-color: var(--accent); }
.cw-swatch-btn.active { border-color: var(--accent); background: #e8f0fe; }
.cw-swatch-dots { display: flex; gap: 3px; }
.cw-swatch-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.cw-series-colors { display: flex; flex-direction: column; gap: 6px; }
.cw-series-color-row { display: flex; align-items: center; gap: 8px; }
.cw-color-btn {
  width: 24px; height: 24px; border-radius: 4px; border: 2px solid rgba(0,0,0,.15);
  cursor: pointer; flex-shrink: 0; padding: 0;
}
.cw-color-btn:hover { border-color: #5f6368; }
.cw-series-color-name { font-size: 13px; color: #202124; }

/* Chart label font controls */
.cw-font-section { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.cw-font-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cw-font-family-inp {
  flex: 1; min-width: 120px; height: 30px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-size: 13px; background: var(--bg-card); color: var(--fg);
}
.cw-font-family-inp:focus { outline: none; border-color: var(--accent); }
.cw-font-size-inp {
  width: 56px; height: 30px; padding: 0 6px;
  border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-size: 13px; background: var(--bg-card); color: var(--fg);
  text-align: center;
}
.cw-font-size-inp:focus { outline: none; border-color: var(--accent); }
.cw-font-bold-btn {
  width: 32px; height: 30px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); cursor: pointer; font-weight: bold; font-size: 14px;
  color: var(--header-fg); flex-shrink: 0;
}
.cw-font-bold-btn:hover { border-color: var(--accent); }
.cw-font-bold-btn.active { border-color: var(--accent); background: #e8f0fe; color: var(--accent); }

/* Y-axis max input */
.cw-ymax-section { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.cw-ymax-row { display: flex; align-items: center; gap: 8px; }
.cw-ymax-inp {
  width: 110px; height: 30px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-size: 13px; background: var(--bg-card); color: var(--fg);
}
.cw-ymax-inp:focus { outline: none; border-color: var(--accent); }
.cw-ymax-reset {
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); cursor: pointer; font: inherit; font-size: 12px;
  color: var(--header-fg);
}
.cw-ymax-reset:hover { border-color: var(--accent); color: var(--accent); }

/* X-axis label angle selector */
.cw-label-angle-section { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.cw-labelvert-row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--header-fg); cursor: pointer; }
.cw-angle-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.cw-angle-btn {
  padding: 5px 12px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); cursor: pointer; font: inherit; font-size: 12px;
  color: var(--header-fg);
}
.cw-angle-btn:hover { border-color: var(--accent); }
.cw-angle-btn.active { border-color: var(--accent); background: #e8f0fe; color: var(--accent); font-weight: 600; }

.cw-palette-row { display: flex; align-items: center; gap: 10px; }
.cw-palette-btn {
  padding: 8px 16px; border: 1px solid var(--border); background: #fff;
  border-radius: 6px; cursor: pointer; font: inherit; font-size: 13px;
}
.cw-palette-btn:hover { background: var(--row-hover); }
.cw-palette-name { color: var(--header-fg); font-size: 13px; }

/* ===== Chart on grid ===== */
.chart-overlay {
  position: absolute; background: #fff; border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 2px 10px rgba(60,64,67,0.12);
  overflow: hidden; cursor: move; user-select: none;
}

.chart-overlay svg { display: block; width: 100%; height: 100%; }
.chart-resize {
  position: absolute; right: -1px; bottom: -1px;
  width: 16px; height: 16px; cursor: nwse-resize;
  background: var(--accent); border-radius: 50% 0 0 0;
  opacity: 0; transition: opacity 0.12s;
}
.chart-overlay.selected .chart-resize,
.chart-overlay:hover .chart-resize { opacity: 1; }
body.readonly .chart-overlay { cursor: default; }
body.readonly .chart-resize { display: none; }
.chart-overlay.pinned { cursor: default; }
.chart-overlay.pinned .chart-resize { display: none; }


/* Pin badge shown on pinned charts */
.chart-overlay.pinned::after {
  content: '📌'; position: absolute; top: 6px; left: 8px;
  font-size: 13px; pointer-events: none; z-index: 1;
}

/* ===== Images on grid (modeled exactly on charts) ===== */
.image-overlay {
  position: absolute;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(60,64,67,0.12);
  overflow: hidden;
  cursor: move;
  background: #fff;
  user-select: none;
}
.image-overlay img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fafafa;
  pointer-events: none;
}
.image-resize {
  position: absolute; right: -1px; bottom: -1px;
  width: 16px; height: 16px; cursor: nwse-resize;
  background: var(--accent); border-radius: 50% 0 0 0;
  opacity: 0; transition: opacity 0.12s;
}
.image-overlay.selected .image-resize,
.image-overlay:hover .image-resize { opacity: 1; }
body.readonly .image-overlay { cursor: default; }
body.readonly .image-resize { display: none; }
.image-overlay.pinned { cursor: default; }
.image-overlay.pinned .image-resize { display: none; }
.image-overlay.pinned::after {
  content: '📌'; position: absolute; top: 4px; left: 6px;
  font-size: 12px; pointer-events: none; z-index: 1;
}

/* ===== Images inside cells (via =IMAGE("...")) ===== */
table.grid td.cell.has-image {
  padding: 0 !important;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
  /* Do not force display:flex on td (table-cell) — it can break table row height
     inheritance in some browsers. Use classic table-cell centering instead. */
}
table.grid td.cell.has-image img.cell-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  background: transparent;
  /* keep pointer cell-like for selection */
}

/* ===== Context menu (right-click) ===== */
.ctx-menu, .ctx-submenu {
  position: fixed; z-index: 9999; background: #fff;
  border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(60,64,67,0.18);
  padding: 4px 0; min-width: 200px; font-size: 13px; color: #202124;
  user-select: none;
}
.ctx-mi {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; cursor: pointer; white-space: nowrap; position: relative;
}
.ctx-mi:hover:not(.disabled),
.ctx-mi.ctx-mi-open:not(.disabled) { background: var(--row-hover); }
.ctx-mi.disabled { color: #bdc1c6; cursor: default; }
.ctx-mi.danger { color: #d93025; }
.ctx-mi.danger:hover { background: #fce8e6; }

/* Admin table delete button */
.admin-table button.danger {
  color: #d93025;
  border: 1px solid #f5c6c6;
  background: #fff;
}
.admin-table button.danger:hover {
  background: #fce8e6;
}
.ctx-icon { width: 16px; flex-shrink: 0; text-align: center; font-size: 13px; }
.ctx-label { flex: 1; }
.ctx-kbd {
  color: var(--header-fg); font-size: 11px;
  font-family: ui-monospace,Menlo,Consolas,monospace;
}
.ctx-arrow { color: var(--header-fg); font-size: 10px; }
.ctx-sep { height: 1px; background: var(--border); margin: 4px 0; }

body.preview-mode .toolbar,
body.preview-mode #btn-save,
body.preview-mode #save-state,
body.preview-mode #btn-add-sheet,
body.preview-mode .formula-bar input { pointer-events: none; opacity: 0.5; }

/* Diff highlights in preview mode */
table.grid td.cell.diff-added {
  background: rgba(52,168,83,0.18);
  box-shadow: inset 0 0 0 2px #34a853;
}
table.grid td.cell.diff-removed {
  background: rgba(217,48,37,0.16);
  box-shadow: inset 0 0 0 2px #d93025;
  text-decoration: line-through;
}
table.grid td.cell.diff-changed {
  background: rgba(249,171,0,0.18);
  box-shadow: inset 0 0 0 2px #f9ab00;
}

/* ===== Read-only mode ===== */
body.readonly .toolbar,
body.readonly #btn-save,
body.readonly #save-state,
body.readonly #btn-add-sheet { display: none !important; }
body.readonly table.grid td.cell { cursor: default; }
body.readonly .formula-bar input { background: var(--bg); pointer-events: none; }

.role-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 12px; font-size: 12px;
  background: #fef7e0; color: #b06000; border: 1px solid #fbe07c;
  margin-left: 4px;
}
.role-badge.editor { background: #e8f0fe; color: var(--accent); border-color: #aecbfa; }

/* ===== Remote cursors (collaborators) ===== */
#remote-cursors {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
}
.remote-frame {
  position: absolute; border: 2px solid; border-radius: 1px;
  box-sizing: border-box; transition: all 0.12s ease-out;
}
.remote-label {
  position: absolute; color: #fff; padding: 2px 8px;
  border-radius: 4px 4px 4px 0; font-size: 11px; font-weight: 500;
  white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: all 0.12s ease-out;
}

/* ===== Cell comment marker ===== */
table.grid td.cell.has-comment::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: 0; height: 0; border-style: solid;
  border-width: 0 8px 8px 0; border-color: transparent #f9ab00 transparent transparent;
}

/* External-link cells: normal background, but a bold black chain badge in the
   top-left corner so cells pulling data from another document are easy to spot.
   The cell text is nudged right so the badge never overlaps it. */
table.grid td.cell.is-external::before {
  content: '🔗';
  position: absolute; top: 0; left: 1px;
  font-size: 11px; line-height: 1.2;
  pointer-events: none; z-index: 2;
  filter: grayscale(1) brightness(0);
}
table.grid td.cell.is-external .cell-text { padding-left: 13px; }

/* ===== Comments side panel ===== */
.side .comments-panel { display: none; flex: 1; overflow: auto; flex-direction: column; }
.side.comments-mode .history,
.side.comments-mode #side-actions-history { display: none; }
.side.comments-mode .comments-panel { display: flex; }
.comments-panel .ch-empty { padding: 14px; color: var(--header-fg); font-size: 12px; text-align: center; }
.comments-panel .ch-cell {
  border-bottom: 1px solid var(--border); padding: 12px 14px;
}
.comments-panel .ch-cell-head {
  font-size: 11px; color: var(--header-fg); font-family: ui-monospace,Menlo,Consolas,monospace;
  cursor: pointer; margin-bottom: 8px;
}
.comments-panel .ch-cell-head:hover { color: var(--accent); }
.comments-panel .ch-thread { display: flex; flex-direction: column; gap: 8px; }
.comments-panel .ch-msg {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px; font-size: 12px;
}
.comments-panel .ch-msg .h {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.comments-panel .ch-msg .ava {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10px; font-weight: 600;
}
.comments-panel .ch-msg .nm { font-weight: 500; }
.comments-panel .ch-msg .dt { color: var(--header-fg); margin-left: auto; font-size: 10px; }
.comments-panel .ch-msg .rm {
  border: 0; background: transparent; cursor: pointer; color: var(--header-fg); font-size: 13px;
}
.comments-panel .ch-msg .rm:hover { color: #d93025; }
.comments-panel .ch-msg .tx { white-space: pre-wrap; word-break: break-word; }
.comments-panel .ch-add {
  padding: 10px 14px; border-top: 1px solid var(--border); background: var(--bg);
}
.comments-panel .ch-add .ch-cell-info {
  font-size: 11px; color: var(--header-fg); margin-bottom: 6px;
  font-family: ui-monospace,Menlo,Consolas,monospace;
}
.comments-panel .ch-add textarea {
  width: 100%; min-height: 60px; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 4px; font: inherit; resize: vertical; box-sizing: border-box;
}
.comments-panel .ch-add button {
  margin-top: 6px; padding: 5px 14px; background: var(--accent); color: #fff;
  border: 0; border-radius: 4px; cursor: pointer; font: inherit; font-size: 12px;
}
.comments-panel .ch-add button:disabled { background: #bdc1c6; cursor: default; }

/* ===================== Range Picker ===================== */
.dlg-xl { width: min(900px, 96vw); }
.dlg-full { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; display: flex; flex-direction: column; border-radius: 0; }
.dlg-full .dlg-body { flex: 1; overflow: hidden; min-height: 0; max-height: none !important; height: 100%; padding: 10px 16px; display: flex; flex-direction: column; }
.rp { display: flex; flex-direction: column; gap: 8px; user-select: none; flex: 1; min-height: 0; }
.rp-addrrow { display: flex; align-items: center; gap: 8px; }
.rp-addrlabel { font-size: 12px; color: var(--header-fg); white-space: nowrap; }
.rp-addrinput {
  flex: 1; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px;
  font: inherit; font-size: 13px; font-family: ui-monospace,Menlo,Consolas,monospace;
}
.rp-addrinput:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(26,115,232,.2); }
.rp-multihint { font-size: 11px; color: var(--header-fg); white-space: nowrap; opacity: 0.85; }
.rp-clearbtn {
  flex-shrink: 0; height: 28px; padding: 0 10px; border: 1px solid var(--border);
  border-radius: 4px; background: var(--bg-card); cursor: pointer; font-size: 12px;
  color: var(--header-fg);
}
.rp-clearbtn:hover { background: #fce8e6; border-color: #d93025; color: #d93025; }
.rp-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 2px; }
.rp-tab {
  padding: 3px 12px; border: 1px solid transparent; border-radius: 4px 4px 0 0;
  background: transparent; cursor: pointer; font: inherit; font-size: 12px; color: var(--header-fg);
}
.rp-tab:hover { background: var(--hover); }
.rp-tab.active { border-color: var(--border); border-bottom-color: var(--bg); background: var(--bg); color: var(--fg); font-weight: 500; }
.rp-gridwrap { overflow: auto; min-height: 0; height: 100%; border: 1px solid var(--border); border-radius: 4px; }

.rp-extpanel { display: flex; flex: 1; min-height: 0; }
.rp-extgrid { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--border); border-radius: 4px; background: #fff; }
.rp-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 12px; font-family: 'Google Sans',Arial,sans-serif; }
.rp-table th, .rp-table td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #fff; }
.rp-table th:first-child, .rp-table th.rp-colhead:first-of-type { border-left: 1px solid var(--border); }
.rp-corner { background: var(--header-bg); width: 46px; min-width: 46px; }
.rp-colhead { background: var(--header-bg); color: var(--header-fg); text-align: center; font-weight: 500; height: 22px; position: sticky; top: 0; z-index: 1; cursor: pointer; font-size: 11px; border-top: 1px solid var(--border); }
.rp-rowhead { background: var(--header-bg); color: var(--header-fg); text-align: center; font-weight: 500; width: 46px; min-width: 46px; position: sticky; left: 0; z-index: 1; cursor: pointer; font-size: 11px; border-left: 1px solid var(--border); }
.rp-colhead:hover, .rp-rowhead:hover { background: var(--hover, #e8eaed); color: var(--accent); }
.rp-cell { cursor: crosshair; padding: 2px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; line-height: 1.38; background: #fff; }
/* images in picker preview */
.rp-cell img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rp-cell:hover { background: var(--hover); }
.rp-sel { background: rgba(26,115,232,.12) !important; }
.rp-sel-top    { border-top:    2px solid var(--accent) !important; }
.rp-sel-bottom { border-bottom: 2px solid var(--accent) !important; }
.rp-sel-left   { border-left:   2px solid var(--accent) !important; }
.rp-sel-right  { border-right:  2px solid var(--accent) !important; }

/* Range button in formula wizard */
.fw-range-row { display: flex; gap: 4px; align-items: center; }
.fw-range-row input { flex: 1; }
.fw-range-btn {
  flex-shrink: 0; width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--border); border-radius: 4px; background: var(--header-bg);
  cursor: pointer; font-size: 16px; line-height: 1; color: var(--fg);
  display: flex; align-items: center; justify-content: center;
}
.fw-range-btn:hover { background: var(--hover); border-color: var(--accent); }

/* ===================== Ref Builder dialog ===================== */
.refb { display: flex; flex-direction: column; gap: 10px; }
.refb-desc { font-size: 12px; color: var(--header-fg); line-height: 1.4; }
.refb-row { display: flex; gap: 6px; align-items: center; }
.refb-input {
  flex: 1; padding: 6px 10px; border: 1px solid var(--border); border-radius: 4px;
  font-family: ui-monospace,Menlo,Consolas,monospace; font-size: 13px;
  background: var(--bg); color: var(--fg);
}
.refb-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(26,115,232,.2); }
.refb-btn {
  flex-shrink: 0; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--border); border-radius: 4px; background: var(--header-bg);
  cursor: pointer; font-size: 18px; line-height: 1; color: var(--fg);
  display: flex; align-items: center; justify-content: center;
}
.refb-btn:hover { background: var(--hover); border-color: var(--accent); }

/* Range picker — mode bar (local / external) */
.rp-modebar { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 6px; }
.rp-modetab {
  padding: 5px 14px; font-size: 13px; cursor: pointer;
  border: none; background: transparent; color: var(--fg3); border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.rp-modetab:hover { color: var(--fg); }
.rp-modetab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* Range picker — external panel */
.rp-extpanel { padding: 8px 0; flex: 1; width: 100%; min-height: 0; overflow: visible; }
.rp-extcard:hover { background: var(--hover) !important; border-radius: 5px; }
.rp-extcard.active { background: var(--accent) !important; color: #fff !important; border-radius: 5px; }
.rp-extfolder:hover { background: var(--hover) !important; border-radius: 5px; }
.rp-expbtn:hover { background: var(--hover) !important; border-color: var(--accent) !important; }
.rp-expbtn.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
.rp-expbtn.active span { color: rgba(255,255,255,.75) !important; }