/* Table Formatter — стили только этого инструмента */
.tf-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px 8px; }
.tf-more { display: none; font-size: 20px; line-height: 1; }
.tf-lbl { margin-left: 4px; }
.tf-restored { margin: 0 16px 8px; padding: 4px 4px 4px 12px; border-radius: 10px; background: var(--blue-tint); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tf-restored[hidden] { display: none; }
.tf .notice { margin-top: 0; }

.tf-toolbar { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--border); background: var(--canvas); }
.tf-group { display: inline-flex; align-items: center; gap: 2px; }
.tf-gl { font-size: 12px; color: var(--muted); margin-right: 4px; text-transform: uppercase; letter-spacing: .04em; }
.tf-toolbar button, .tf-menu button { font: 500 13px var(--font); color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; height: 32px; min-width: 32px; padding: 0 9px; cursor: pointer; white-space: nowrap; }
.tf-toolbar button:hover, .tf-menu button:hover { border-color: #C9D3E3; background: var(--blue-tint); }
.tf-toolbar button.on { background: var(--blue-tint); color: var(--blue); border-color: var(--blue); }

/* сетка */
.tf-grid-wrap { position: relative; overflow: auto; max-height: 460px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); overscroll-behavior: contain; }
.tf-grid { border-collapse: separate; border-spacing: 0; table-layout: fixed; font: 14px/1.4 var(--font); }
.tf-grid th, .tf-grid td { height: 34px; padding: 0 10px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.tf-grid thead th { position: sticky; top: 0; z-index: 3; background: var(--canvas); color: var(--muted); font-weight: 500; font-size: 12px; text-align: center; height: 30px; user-select: none; }
.tf-grid thead th .tf-colname { pointer-events: none; }
.tf-grid thead th .tf-al { margin-left: 4px; color: var(--blue); font-size: 11px; }
.tf-grid .tf-colbtn { font: inherit; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 4px; margin-left: 2px; border-radius: 6px; height: 24px; }
.tf-grid .tf-colbtn:hover { background: var(--blue-tint); color: var(--blue); }
.tf-grid thead th.sel { background: var(--blue-tint); color: var(--blue); }
.tf-grid .tf-corner { position: sticky; left: 0; z-index: 4; }
.tf-grid tbody th { position: sticky; left: 0; z-index: 2; background: var(--canvas); color: var(--muted); font-weight: 500; font-size: 12px; text-align: center; cursor: pointer; user-select: none; padding: 0 4px; }
.tf-grid tbody th:hover, .tf-grid tbody th.sel { background: var(--blue-tint); color: var(--blue); }
.tf-grid td { cursor: cell; color: var(--ink); }
.tf-grid tr.hdr td { font-weight: 600; background: var(--canvas); }
.tf-grid tr.hdr td:empty::before { content: attr(data-ph); color: var(--muted); font-weight: 400; opacity: .7; }
.tf-grid td.sel { background: rgba(36, 81, 232, .08); }
.tf-grid td.act { box-shadow: inset 0 0 0 2px var(--blue); }
.tf-grid td .nl { color: var(--muted); font-size: 11px; padding: 0 2px; }
.tf-grid tr.sp td { padding: 0; border: 0; height: auto; }
.tf-cell-ed {
  position: absolute; z-index: 5; margin: 0; padding: 5px 8px; box-sizing: border-box; border: 2px solid var(--blue); border-radius: 0; box-shadow: 0 4px 14px rgba(23, 32, 51, .15);
  font: 14px/1.4 var(--font); color: var(--ink); background: var(--surface); resize: none; overflow: hidden; outline: none; white-space: pre-wrap; overflow-wrap: anywhere;
}
.tf-cell-ed.hdr { font-weight: 600; }

/* вкладки форматов */
.tf-formats { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.tf-global { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 14px; }
.tf-global label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.tf-global input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--blue); margin: 0; }
.tf-tabhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.tf-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--border); max-width: 100%; }
.tf-tabs button { flex: none; font: 600 14px var(--font); color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; padding: 0 12px; height: 40px; cursor: pointer; }
.tf-tabs button[aria-selected="true"] { color: var(--blue); border-bottom-color: var(--blue); }
.tf-tabs button:hover { color: var(--ink); }
.tf-badge { font-size: 12px; font-weight: 600; color: var(--warn); background: var(--warn-tint); border-radius: var(--r-badge); padding: 4px 8px; align-self: center; }
.tf-badge[hidden] { display: none; }
.tf-popts { font-size: 14px; }
.tf-popts > summary { cursor: pointer; color: var(--muted); font-weight: 600; padding: 4px 0; width: max-content; }
.tf-popts .options { border-top: 0; padding: 6px 0 4px; }
.tf-note { margin: 0; color: var(--muted); }
.tf-err { padding: 10px 14px; border-radius: var(--r-ctl); background: var(--danger-tint); color: var(--danger); font-size: 14px; }
.tf-err[hidden] { display: none; }
.tf-code { min-height: 240px; }
.tf-code.err { border-color: var(--danger); }

/* меню ⋯ и «New table» */
.tf-menu { position: absolute; z-index: 40; min-width: 220px; max-width: calc(100vw - 24px); max-height: 70vh; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; }
.tf-menu .mh { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 8px 8px 4px; }
.tf-menu .mrow { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 4px 4px; }
.tf-menu button { height: 36px; }
.tf-menu .newt { display: flex; align-items: center; gap: 6px; padding: 4px; font-size: 14px; }
.tf-menu .newt input { width: 72px; height: 36px; padding: 0 8px; font: 14px var(--font); border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); }

@media (max-width: 768px) {
  .tf-bar { padding: 10px 12px 6px; }
  .tf-toolbar { display: none; }
  .tf-more { display: inline-flex; }
  .tf-lbl { display: none; }
  .tf-grid-wrap { max-height: 360px; }
  .tf-grid th, .tf-grid td { height: 40px; }
  .tf-cell-ed { font-size: 16px; padding: 7px 8px; }
  .tf-formats { padding: 12px; }
  .tf-tabs { width: 100%; }
  .tf-menu button { height: 44px; }
}

/* справка по синтаксису под инструментом */
#table-syntax pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 13px; overflow-x: auto; max-width: 100%; margin: 0 0 16px; }
#table-syntax code { font-size: 90%; overflow-wrap: anywhere; }