.sp-table-view,
.sp-table-preview-card {
    border: var(--border-width) solid var(--border-color);
    border-radius: calc(var(--radius-lg) + 2px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--main-background-color) 96%, var(--color-accent) 4%), var(--main-background-color));
    box-shadow: var(--shadow-sm);
    color: var(--color-ink);
    font-family: var(--font-sans);
    overflow: hidden;
}

.sp-table-view-header,
.sp-table-preview-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width) solid var(--border-color);
}

.sp-table-view-header h3,
.sp-table-chart-card h4 {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
}

.sp-table-view-header p,
.sp-table-preview-head span {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    line-height: var(--leading-tight);
}

.sp-table-preview-kicker {
    color: var(--color-accent) !important;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.sp-table-tabs {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: color-mix(in srgb, var(--main-background-color-secondary) 88%, var(--color-accent) 12%);
    border-bottom: var(--border-width) solid var(--border-color);
}

.sp-table-tab {
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-ink-light);
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    padding: var(--space-1) var(--space-3);
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.sp-table-tab.is-active {
    background: var(--main-background-color);
    border-color: var(--color-accent);
    color: var(--color-accent);
    box-shadow: var(--shadow-sm);
}

.sp-table-pane { display: none; }
.sp-table-pane.is-active { display: block; }

.sp-table-scroll {
    max-width: 100%;
    overflow: auto;
    scrollbar-color: color-mix(in srgb, var(--color-accent) 45%, var(--border-color)) transparent;
}

.sp-table-grid {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 100%;
    table-layout: fixed;
    font-size: var(--text-xs);
}

.sp-table-grid th,
.sp-table-grid td {
    border-right: var(--border-width) solid var(--border-color);
    border-bottom: var(--border-width) solid var(--border-color);
    height: calc(var(--space-8) - var(--space-1));
    max-width: 260px;
    overflow: hidden;
    padding: var(--space-1) var(--space-2);
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background var(--transition-fast), outline-color var(--transition-fast);
}

.sp-table-grid th { position: relative; }

.sp-table-grid thead th,
.sp-table-row-head,
.sp-table-corner {
    background: color-mix(in srgb, var(--main-background-color-secondary) 90%, var(--color-accent) 10%);
    color: var(--color-ink-light);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    position: sticky;
    z-index: 1;
}

.sp-table-grid thead th { top: 0; }
.sp-table-row-head,
.sp-table-corner { left: 0; width: 42px; }
.sp-table-corner { z-index: 2; }
.sp-table-grid td:hover { background: color-mix(in srgb, var(--color-accent) 4%, transparent); }
.sp-table-grid td[data-value-type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
.sp-table-grid td[data-value-type="error"] { color: var(--color-error); font-weight: var(--weight-semibold); }
.sp-table-preview-more { padding: var(--space-2) var(--space-3); color: var(--color-ink-light); font-size: var(--text-xs); }

.sp-table-preview-meta-grid {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--space-3) var(--space-4);
    color: var(--color-ink-light);
    font-size: var(--text-xs);
}

.sp-table-preview-meta-grid strong {
    color: var(--color-ink);
    font-weight: var(--weight-semibold);
}

.sp-table-preview-description {
    grid-column: 1 / -1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-table-chart-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    padding: var(--space-4);
}

.sp-table-chart-card {
    border: var(--border-width) solid var(--border-color);
    border-radius: calc(var(--radius-lg) + 2px);
    background: linear-gradient(180deg, var(--main-background-color), color-mix(in srgb, var(--main-background-color-secondary) 72%, var(--main-background-color) 28%));
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 300px;
    min-width: 0;
    overflow: visible;
    padding: var(--space-4);
    position: relative;
}

.sp-table-chart-card h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-table-chart-body {
    align-items: stretch;
    display: flex;
    min-height: 190px;
    min-width: 0;
    overflow: visible;
    position: relative;
}

.sp-table-chart-with-axis {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 190px;
    min-width: 0;
    width: 100%;
}

.sp-table-chart-y-axis {
    align-items: stretch;
    color: var(--color-ink-light);
    display: flex;
    flex-direction: column;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    justify-content: space-between;
    line-height: 1;
    padding: var(--space-2) 0 22px;
    text-align: right;
}

.sp-table-chart-bars-wrap {
    align-items: stretch;
    display: flex;
    gap: var(--space-2);
    min-height: 190px;
    min-width: 0;
    overflow: visible;
    padding: var(--space-2) var(--space-1) 0;
    width: 100%;
}

.sp-table-chart-bar-group {
    align-items: stretch;
    display: grid;
    flex: 1 1 0;
    gap: var(--space-2);
    grid-template-rows: 1fr auto;
    min-width: 0;
}

.sp-table-chart-bars {
    align-items: end;
    border-bottom: var(--border-width) solid var(--border-color);
    display: flex;
    gap: 3px;
    justify-content: center;
    min-height: 150px;
    min-width: 0;
    padding-inline: 2px;
    width: 100%;
}

.sp-table-chart-bar { background: var(--color-accent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; display: block; flex: 0 1 18px; min-width: 6px; max-width: 24px; position: relative; }
.sp-table-chart-bar:hover,
.sp-table-chart-bar:focus-visible {
    filter: brightness(1.18);
    outline: 2px solid color-mix(in srgb, var(--color-accent) 55%, var(--main-background-color));
    outline-offset: 2px;
}
.sp-table-chart-bar:nth-child(2n) { background: var(--color-operation); }
.sp-table-chart-bar:nth-child(3n) { background: var(--color-query); }
.sp-table-chart-bar:nth-child(4n) { background: var(--color-output); }
.sp-table-chart-hover-overlay {
    background: color-mix(in srgb, var(--color-ink) 92%, #000 8%);
    border: var(--border-width) solid color-mix(in srgb, var(--main-background-color) 20%, transparent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md, var(--shadow-sm));
    color: var(--main-background-color);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    max-width: min(240px, calc(100% - var(--space-6)));
    opacity: 0;
    padding: var(--space-2) var(--space-3);
    pointer-events: none;
    position: absolute;
    text-align: center;
    transform: translateY(4px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    visibility: hidden;
    width: max-content;
    z-index: 6;
}
.sp-table-chart-hover-overlay.is-visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}
.sp-table-chart-bar-label { color: var(--color-ink-light); font-size: var(--text-xs); line-height: var(--leading-tight); max-width: 100%; min-width: 0; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.sp-table-chart-svg { color: var(--color-accent); height: 100%; min-height: 190px; overflow: visible; width: 100%; }
.sp-table-chart-svg-axis line { stroke: var(--border-color); stroke-width: 1; }
.sp-table-chart-svg-axis text { fill: var(--color-ink-light); font-size: 10px; font-variant-numeric: tabular-nums; }
.sp-table-chart-line-point {
    fill: var(--main-background-color);
    stroke: var(--color-accent);
    stroke-width: 2;
    transition: r var(--transition-fast), fill var(--transition-fast), stroke-width var(--transition-fast);
}
.sp-table-chart-line-mark { cursor: pointer; outline: none; }
.sp-table-chart-line-mark:hover .sp-table-chart-line-point,
.sp-table-chart-line-mark:focus-visible .sp-table-chart-line-point {
    fill: var(--color-accent);
    outline: none;
    r: 6;
    stroke-width: 3;
}
.sp-table-chart-pie { display: block; height: min(190px, 100%); margin: auto; max-width: 100%; overflow: visible; width: 190px; }
.sp-table-chart-pie-slice { fill: transparent; stroke: var(--color-accent); stroke-width: 8; }
.sp-table-chart-pie-mark { cursor: pointer; outline: none; }
.sp-table-chart-pie-mark:hover .sp-table-chart-pie-slice,
.sp-table-chart-pie-mark:focus-visible .sp-table-chart-pie-slice {
    filter: brightness(1.12);
    outline: none;
    stroke-width: 9;
}
.sp-table-chart-pie-mark:nth-child(2n) .sp-table-chart-pie-slice { stroke: var(--color-operation); }
.sp-table-chart-pie-mark:nth-child(3n) .sp-table-chart-pie-slice { stroke: var(--color-query); }
.sp-table-chart-pie-mark:nth-child(4n) .sp-table-chart-pie-slice { stroke: var(--color-output); }
.sp-table-chart-scatter { background: linear-gradient(var(--border-color) var(--border-width), transparent var(--border-width)), linear-gradient(90deg, var(--border-color) var(--border-width), transparent var(--border-width)); background-size: 25% 25%; border: var(--border-width) solid var(--border-color); border-radius: var(--radius-md); flex: 1 1 auto; min-height: 190px; position: relative; width: 100%; }
.sp-table-chart-dot { background: var(--color-accent); border: var(--border-width) solid var(--main-background-color); border-radius: var(--radius-full); box-shadow: var(--shadow-sm); cursor: pointer; height: var(--space-3); position: absolute; transform: translate(-50%, -50%); width: var(--space-3); }
.sp-table-chart-dot:hover,
.sp-table-chart-dot:focus-visible {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 22%, transparent), var(--shadow-sm);
    outline: none;
    transform: translate(-50%, -50%) scale(1.35);
}
.sp-table-chart-legend { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-2); min-height: 20px; overflow: hidden; }
.sp-table-chart-legend span { border-radius: var(--radius-full); background: color-mix(in srgb, var(--main-background-color-secondary) 78%, var(--color-accent) 22%); color: var(--color-ink-light); font-size: var(--text-xs); line-height: 1; max-width: 140px; overflow: hidden; padding: var(--space-1) var(--space-2); text-overflow: ellipsis; white-space: nowrap; }
.sp-table-chart-empty { align-items: center; border: var(--border-width) dashed var(--border-color); border-radius: var(--radius-md); color: var(--color-ink-light); display: flex; font-size: var(--text-xs); line-height: var(--leading-normal); min-height: 190px; padding: var(--space-3); }
.sp-table-chart-warning {
    border: var(--border-width) solid color-mix(in srgb, var(--color-warning, var(--color-accent)) 40%, var(--border-color));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-warning, var(--color-accent)) 10%, transparent);
    color: var(--color-ink-light);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    margin-top: var(--space-2);
    padding: var(--space-2);
}

.sp-table-editor {
    border: var(--border-width) solid var(--border-color);
    border-radius: calc(var(--radius-lg) + 2px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--main-background-color) 94%, var(--color-accent) 6%), var(--main-background-color) 120px);
    box-shadow: var(--shadow-md, var(--shadow-sm));
    overflow: hidden;
}

.sp-table-editor-head {
    align-items: flex-start;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: var(--border-width) solid var(--border-color);
}

.sp-table-editor-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
}

.sp-table-editor-meta span,
.sp-table-selection-chip {
    border: var(--border-width) solid color-mix(in srgb, var(--border-color) 72%, var(--color-accent) 28%);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--main-background-color) 82%, var(--color-accent) 18%);
    color: var(--color-ink);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    padding: var(--space-1) var(--space-2);
}

.sp-table-editor-kicker {
    color: var(--color-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sp-table-title-input,
.sp-table-description-input,
.sp-table-formula-input,
.sp-table-column-label-input,
.sp-table-chart-title-input,
.sp-table-chart-range-input,
.sp-table-chart-type-input {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--main-background-color);
    color: var(--color-ink);
    font: inherit;
}

.sp-table-title-input {
    border-color: transparent;
    display: block;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    margin-top: var(--space-1);
    padding: var(--space-1) 0;
    width: min(460px, 100%);
}

.sp-table-description-input {
    display: block;
    margin-top: var(--space-2);
    min-height: 46px;
    padding: var(--space-2);
    resize: vertical;
    width: min(520px, 100%);
}

.sp-table-editor-actions,
.sp-table-toolbar,
.sp-table-tool-group,
.sp-table-chart-create-row,
.sp-table-chart-edit-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.sp-table-toolbar {
    padding: var(--space-2) var(--space-3);
    border-bottom: var(--border-width) solid var(--border-color);
    background: var(--main-background-color);
}

.sp-table-tool-group {
    border-right: var(--border-width) solid var(--border-color);
    padding-right: var(--space-2);
}

.sp-table-tool-group:last-of-type { border-right: 0; }

.sp-table-toolbar-spacer { flex: 1 1 auto; }

.sp-table-small-btn {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--main-background-color-secondary);
    color: var(--color-ink);
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    padding: var(--space-1) var(--space-2);
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.sp-table-small-btn:hover:not(:disabled),
.sp-table-small-btn:focus-visible:not(:disabled) {
    border-color: var(--color-accent);
    color: var(--color-accent);
    outline: none;
    transform: translateY(-1px);
}

.sp-table-small-btn:disabled { cursor: not-allowed; opacity: .45; }
.sp-table-primary-btn { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.sp-table-primary-btn:hover:not(:disabled),
.sp-table-primary-btn:focus-visible:not(:disabled) { color: #fff; filter: brightness(1.03); }

.sp-table-formula-bar {
    align-items: center;
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: var(--border-width) solid var(--border-color);
    background: color-mix(in srgb, var(--main-background-color) 92%, var(--main-background-color-secondary) 8%);
}

.sp-table-selected-address {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--color-ink-light);
    flex: 0 0 auto;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    min-width: 44px;
    padding: var(--space-1) var(--space-2);
    text-align: center;
}

.sp-table-formula-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-2);
}

.sp-table-editor-scroll { max-height: 52vh; }
.sp-table-editor-grid { user-select: none; }
.sp-table-editor-grid td { cursor: cell; }
.sp-table-is-col-resizing,
.sp-table-is-col-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}
.sp-table-is-row-resizing,
.sp-table-is-row-resizing * {
    cursor: row-resize !important;
    user-select: none !important;
}
.sp-table-column-head { padding-right: calc(var(--space-2) + 6px); }
.sp-table-column-label-input {
    background: transparent;
    border-color: transparent;
    color: var(--color-ink);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    min-width: 0;
    padding: var(--space-1);
    text-align: center;
    width: 100%;
}
.sp-table-column-label-input:focus {
    background: var(--main-background-color);
    border-color: var(--color-accent);
    outline: none;
}
.sp-table-column-resize,
.sp-table-row-resize {
    background: transparent;
    position: absolute;
    z-index: 3;
}
.sp-table-column-resize {
    bottom: 0;
    cursor: col-resize;
    right: -3px;
    top: 0;
    width: 7px;
}
.sp-table-row-resize {
    bottom: -3px;
    cursor: row-resize;
    height: 7px;
    left: 0;
    right: 0;
}
.sp-table-column-resize:hover,
.sp-table-row-resize:hover {
    background: color-mix(in srgb, var(--color-accent) 55%, transparent);
}
.sp-table-editor-cell.is-in-range { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.sp-table-editor-cell.is-selected {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 50%, transparent);
}
.sp-table-editor-cell.is-editing { padding: 0; }

.sp-table-start-copy {
    color: var(--color-ink-light);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    margin: var(--space-2) 0 0;
    max-width: 560px;
}

.sp-table-start-options {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    padding: var(--space-3);
}

.sp-table-start-card {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--main-background-color-secondary);
    color: var(--color-ink);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 116px;
    padding: var(--space-4);
    text-align: left;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.sp-table-start-card:hover,
.sp-table-start-card:focus {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-sm);
    outline: none;
    transform: translateY(-1px);
}

.sp-table-start-card strong {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.sp-table-start-card span,
.sp-table-import-message {
    color: var(--color-ink-light);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}

.sp-table-import-message {
    padding: var(--space-2) var(--space-3);
    border-top: var(--border-width) solid var(--border-color);
    background: var(--main-background-color-secondary);
}

.sp-table-formula-helpers {
    align-items: center;
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: var(--space-1);
    justify-content: flex-start;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-bottom: var(--border-width) solid var(--border-color);
    background: color-mix(in srgb, var(--main-background-color-secondary) 82%, var(--color-accent) 18%);
}

.sp-table-formula-helpers span {
    color: var(--color-ink-light);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    margin-right: var(--space-1);
}

.sp-table-formula-helper {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--main-background-color);
    color: var(--color-ink);
    cursor: pointer;
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-2);
}

.sp-table-formula-helper:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.sp-table-editor-cell-input {
    border: 0;
    background: inherit;
    color: inherit;
    font: inherit;
    height: 100%;
    outline: 2px solid var(--color-accent);
    padding: var(--space-1) var(--space-2);
    width: 100%;
}

.sp-table-format-tools label {
    align-items: center;
    color: var(--color-ink-light);
    display: inline-flex;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    gap: var(--space-1);
}

.sp-table-format-tools input[type="color"] {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    height: 24px;
    padding: 0;
    width: 32px;
}

.sp-table-chart-editor {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border-top: var(--border-width) solid var(--border-color);
    background: var(--main-background-color-secondary);
}

.sp-table-chart-help {
    border: var(--border-width) solid color-mix(in srgb, var(--border-color) 70%, var(--color-accent) 30%);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--main-background-color) 78%, var(--color-accent) 22%);
    color: var(--color-ink-light);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    padding: var(--space-2) var(--space-3);
}

.sp-table-chart-title-input { min-width: 180px; padding: var(--space-2); }
.sp-table-chart-range-input { width: 110px; padding: var(--space-2); }
.sp-table-chart-type-input { padding: var(--space-2); }
.sp-table-editor-empty,
.sp-table-editor-status { color: var(--color-ink-light); font-size: var(--text-xs); }
.sp-table-editor-status {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    border-top: var(--border-width) solid var(--border-color);
    background: color-mix(in srgb, var(--main-background-color-secondary) 88%, var(--main-background-color) 12%);
}

.sp-table-status-error {
    color: var(--color-error);
    font-weight: var(--weight-semibold);
}

@media (max-width: 640px) {
    .sp-table-chart-grid { grid-template-columns: 1fr; }
    .sp-table-grid th,
    .sp-table-grid td { height: var(--space-10); padding: var(--space-2) var(--space-3); }
    .sp-table-editor-head { flex-direction: column; }
    .sp-table-editor-actions,
    .sp-table-toolbar { width: 100%; }
    .sp-table-toolbar { align-items: stretch; flex-direction: column; }
    .sp-table-tool-group { border-right: 0; border-bottom: var(--border-width) solid var(--border-color); padding: 0 0 var(--space-2); }
    .sp-table-editor-meta { justify-content: flex-start; }
    .sp-table-small-btn { flex: 1 1 calc(50% - var(--space-2)); }
}
    flex: 1 1 auto;