.tool-container {
            max-width: 800px;
            margin: 0 auto;
            padding: var(--space-lg) 0;
        }
.input-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: var(--space-md);
            box-shadow: var(--shadow);
            margin-bottom: var(--space-lg);
        }
.input-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: var(--space-sm);
        }
.brand-sub {
            display: flex;
            flex-direction: column;
        }
.brand-sub-title {
            font-size: 0.875rem;
            font-weight: bold;
            color: var(--text-color);
        }
.brand-sub-badge {
            font-size: 10px;
            color: var(--svg); 
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
.tab-menu {
            display: flex;
            gap: 4px;
            margin-bottom: 12px;
            border-bottom: 1px solid var(--border-color);
        }
.tab-item {
            padding: 8px 16px;
            cursor: pointer;
            font-size: 0.875rem;
            color: var(--text-color);
            opacity: 0.6;
            border-radius: 6px 6px 0 0;
            transition: all 0.2s;
        }
.tab-item:hover {
            opacity: 1;
            background: var(--hover-bg);
        }
.tab-item.active {
            opacity: 1;
            font-weight: bold;
            background: var(--bg-color);
            border: 1px solid var(--border-color);
            border-bottom-color: var(--bg-color);
            margin-bottom: -1px;
        }
.tab-content {
            display: none;
        }
.tab-content.active {
            display: block;
        }
#markdownInput {
            width: 100%;
            height: 200px;
            padding: 12px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background: var(--bg-color);
            color: var(--text-color);
            font-family: var(--f-mono);
            font-size: 0.875rem;
            resize: none;
            outline: none;
            transition: border-color 0.2s;
        }
#markdownInput:focus {
            border-color: var(--link-color);
        }
.grid-editor-container {
            width: 100%;
            overflow-x: hidden;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background: var(--bg-color);
        }
.grid-editor {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }
.grid-editor th, .grid-editor td {
            border: 1px solid var(--border-color);
            padding: 0;
            position: relative;
            min-width: 0;
        }
.grid-editor.two-cols tr > th:nth-child(2), .grid-editor.two-cols tr > td:nth-child(2) {
            width: 35%;
        }
.grid-editor.two-cols tr > th:nth-child(3), .grid-editor.two-cols tr > td:nth-child(3) {
            width: 65%;
        }
.grid-editor .index-cell {
            width: 20px;
            min-width: 20px;
            background: var(--card-bg);
            text-align: center;
            vertical-align: middle;
            border-right: 1px solid var(--border-color);
            padding: 0 !important;
        }
.grid-editor textarea {
            width: 100%;
            min-height: 40px;
            border: none;
            background: transparent;
            color: var(--text-color);
            padding: 10px;
            font-size: 0.875rem;
            outline: none;
            resize: none;
            display: block;
            overflow: hidden;
            line-height: 1.5;
            font-family: inherit;
        }
.grid-editor textarea:focus {
            background: var(--hover-bg);
        }
.btn-delete-idx {
            background: transparent;
            border: none;
            color: var(--svg);
            cursor: pointer;
            font-size: 1rem;
            padding: 2px;
            opacity: 0.4;
            transition: opacity 0.2s;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }
.btn-delete-idx:hover {
            opacity: 1;
        }
.grid-controls {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 16px;
        }
.btn-grid-action {
            background: var(--link-color);
            border: none;
            color: var(--accent-ink);
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 0.8rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            flex: 1 1 160px;
            min-width: 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
.btn-grid-action:hover {
            filter: brightness(1.1);
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
.format-tooltip {
            position: fixed;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 4px;
            display: none;
            gap: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            z-index: 1000;
        }
.tooltip-item {
            background: transparent;
            border: none;
            color: var(--text-color);
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: bold;
        }
.tooltip-item:hover {
            background: var(--bg-color);
            color: var(--link-color);
        }
.input-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: var(--space-sm);
        }
.hint-text {
            font-size: 10px;
            color: #9ca3af; 
        }
#clearBtn {
            font-size: 0.75rem;
            color: #9ca3af;
            background: none;
            border: none;
            cursor: pointer;
            transition: color 0.2s;
        }
#clearBtn:hover {
            color: var(--svg);
        }
:root {
            --theme-primary: #374151;
            --theme-header-bg: #f9fafb;
            --theme-border: #e5e7eb;
            --theme-table-bg: #ffffff;
        }
[data-theme="dark"] {
            --theme-primary: #e0e0e0;
            --theme-header-bg: #2d2d2d;
            --theme-border: #444444;
            --theme-table-bg: #1e1e1e;
        }
.theme-blue { --theme-primary: #1d4ed8; --theme-header-bg: #eff6ff; --theme-border: #dbeafe; }
.theme-green { --theme-primary: #047857; --theme-header-bg: #ecfdf5; --theme-border: #d1fae5; }
.theme-red { --theme-primary: #b91c1c; --theme-header-bg: #fef2f2; --theme-border: #fee2e2; }
.theme-purple { --theme-primary: #6d28d9; --theme-header-bg: #f5f3ff; --theme-border: #ede9fe; }
.theme-orange { --theme-primary: #c2410c; --theme-header-bg: #fff7ed; --theme-border: #ffedd5; }
[data-theme="dark"] .theme-blue { --theme-primary: #a5d8ff; --theme-header-bg: #1e3a8a; --theme-border: #2563eb; }
[data-theme="dark"] .theme-green { --theme-primary: #6ee7b7; --theme-header-bg: #064e3b; --theme-border: #059669; }
[data-theme="dark"] .theme-red { --theme-primary: #fca5a5; --theme-header-bg: #7f1d1d; --theme-border: #dc2626; }
[data-theme="dark"] .theme-purple { --theme-primary: #c4b5fd; --theme-header-bg: #4c1d95; --theme-border: #7c3aed; }
[data-theme="dark"] .theme-orange { --theme-primary: #fdba74; --theme-header-bg: #7c2d12; --theme-border: #ea580c; }
.markdown-body table {
            width: 100%;
            table-layout: fixed;
            border-collapse: collapse;
            margin: 0;
            font-size: 0.95rem;
            background-color: var(--theme-table-bg);
            border-top: 2px solid var(--theme-primary);
        }
.markdown-body th, .markdown-body td {
            padding: 14px 16px;
            border: 1px solid var(--theme-border);
            text-align: left;
            line-height: 1.6;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
            word-break: break-word;
            color: var(--text-color);
        }
.markdown-body th {
            background-color: var(--theme-header-bg);
            font-weight: 700;
            color: var(--theme-primary);
            white-space: normal;
        }
.table-container {
            width: 100%;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            margin-bottom: 2rem;
            border-radius: 4px;
            box-shadow: var(--shadow);
        }
.table-container.table-two-cols table tr > *:nth-child(1) {
            width: 35%;
        }
.table-container.table-two-cols table tr > *:nth-child(2) {
            width: 65%;
        }
.table-container.equal-cols table tr > * {
            width: calc(100% / var(--preview-col-count, 3));
        }
.table-container::-webkit-scrollbar {
            height: 8px;
        }
.screenshot-btn-wrapper {
            display: flex;
            justify-content: flex-end;
            margin-top: -1.5rem;
            margin-bottom: 2rem;
        }
.screenshot-btn {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            color: var(--text-color);
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 6px;
            box-shadow: var(--shadow);
        }
.screenshot-btn:hover {
            background: var(--bg-color);
            border-color: var(--link-color);
            color: var(--link-color);
        }
.screenshot-btn svg {
            width: 14px;
            height: 14px;
        }
.theme-picker {
            display: flex;
            gap: 8px;
            align-items: center;
        }
.color-dot {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            cursor: pointer;
            transition: transform 0.2s, border-color 0.2s;
            border: 2px solid transparent;
        }
.color-dot.active {
            transform: scale(1.2);
            border-color: var(--text-color);
        }

/* Width modes, column resizing, CSV import and saved-settings modal (ported from the May 2026 editor update). */
html,body{overflow-x:auto !important}
.tool-container{max-width:none !important;width:max-content;min-width:calc(100% - 32px);overflow:visible}
.input-card,.markdown-body{width:max-content;min-width:100%;overflow:visible}
.input-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.settings-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-color);background:var(--card-bg);color:var(--text-color);border-radius:999px;padding:7px 12px;font-size:.8rem;cursor:pointer;transition:all .2s}
.settings-btn:hover{border-color:var(--link-color);color:var(--link-color)}
.settings-btn svg{width:15px;height:15px}
.control-panel,.visual-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:12px;background:color-mix(in srgb, var(--accent) 4%, transparent);border:1px solid var(--border-color);border-radius:10px}
.control-panel,.visual-toolbar{margin-bottom:12px}
.editor-advice{display:flex;flex-wrap:wrap;gap:8px;margin:-2px 0 12px}
.editor-advice-item{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:color-mix(in srgb, var(--accent) 6%, transparent);border:1px solid color-mix(in srgb, var(--accent) 10%, transparent);font-size:.74rem;color:var(--muted)}
.editor-advice-item svg{width:13px;height:13px;flex:none;opacity:.8}
.editor-advice-item.is-warning{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.18);color:var(--warn)}
.editor-advice-item[hidden]{display:none !important}
.column-width-panel{display:block;margin-top:14px;padding:12px;background:color-mix(in srgb, var(--accent) 4%, transparent);border:1px solid var(--border-color);border-radius:10px}
.control-group{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.section-label{font-size:.75rem;font-weight:700;letter-spacing:.03em;color:var(--text-color);opacity:.8}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 14px;border-radius:8px;border:1px solid var(--border-color);background:var(--card-bg);color:var(--text-color);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s}
.btn-secondary:hover{border-color:var(--link-color);color:var(--link-color)}
.btn-secondary svg{width:14px;height:14px}
.mode-button-group{display:flex;flex-wrap:wrap;gap:8px}
.mode-button{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid var(--border-color);background:var(--bg-color);color:var(--text-color);font-size:.82rem;font-weight:700;cursor:pointer;transition:all .2s;text-decoration:none}
.mode-button svg{width:16px;height:16px;flex:none}
.mode-button:hover{border-color:var(--link-color);color:var(--link-color)}
.mode-button.active{background:color-mix(in srgb, var(--accent) 14%, transparent);border-color:var(--link-color);color:var(--link-color);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent)}
.radio-chip-group{display:flex;flex-wrap:wrap;gap:8px}
.radio-chip{position:relative}
.radio-chip>input{position:absolute;inset:0;opacity:0;pointer-events:none;appearance:none;width:1px;height:1px}
.radio-chip>span{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--border-color);background:var(--bg-color);color:var(--text-color);cursor:pointer;font-size:.8rem;transition:all .2s}
.radio-chip>input:checked+span{background:color-mix(in srgb, var(--accent) 14%, transparent);border-color:var(--link-color);color:var(--link-color);font-weight:700}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#markdownInput{height:220px;resize:vertical}
.grid-editor-container{overflow:visible !important;width:max-content;min-width:100%;max-width:none;-webkit-overflow-scrolling:touch}
.grid-editor{border-collapse:collapse;table-layout:fixed}
.grid-editor th,.grid-editor td{background:var(--bg-color);vertical-align:top}
.grid-editor .index-cell{width:28px;min-width:28px}
.grid-editor textarea{padding:12px 14px;display:block}
.cell-shell{position:relative;display:block}
.col-resize-handle{position:absolute;top:0;right:-10px;width:20px;height:100%;cursor:col-resize;z-index:8;touch-action:none;pointer-events:auto}
.col-resize-handle::after{content:'';position:absolute;top:8px;bottom:8px;left:4px;width:2px;border-radius:999px;background:color-mix(in srgb, var(--accent) 12%, transparent);opacity:.14;transition:background .2s,opacity .2s}
.grid-editor tr:hover .col-resize-handle::after,.col-resize-handle:hover::after,body.is-column-resizing .col-resize-handle::after{background:var(--link-color);opacity:.85}
body.is-column-resizing,body.is-column-resizing *{user-select:none !important}
.column-width-header{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.column-width-header h3{margin:0;font-size:.88rem}
.column-width-note{font-size:.74rem;color:var(--muted)}
.column-width-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;align-items:start;grid-auto-rows:min-content}
.column-width-item{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:8px;border:1px solid var(--border-color);background:var(--bg-color);align-self:start;height:auto}
.column-width-item label{font-size:.78rem;font-weight:700;color:var(--text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.column-width-item input{width:100%;border:1px solid var(--border-color);border-radius:8px;background:var(--card-bg);color:var(--text-color);padding:8px 10px;font-size:.82rem}
.format-tooltip{border-radius:999px;padding:4px;box-shadow:0 10px 28px rgba(0,0,0,.25)}
.tooltip-item{padding:6px 10px;border-radius:999px}
.table-container{overflow:visible !important;width:max-content;min-width:0;max-width:none;background:var(--card-bg)}
.markdown-body table{border-collapse:collapse;table-layout:fixed}
.markdown-body th,.markdown-body td{vertical-align:top}
.empty-preview{padding:28px 18px;text-align:center;border:1px dashed var(--border-color);border-radius:10px;color:var(--muted)}
.settings-modal-backdrop{position:fixed;inset:0;background:rgba(17,24,39,.55);display:none;align-items:center;justify-content:center;padding:20px;z-index:1200}
.settings-modal-backdrop.open{display:flex}
.settings-modal{width:min(100%,520px);max-height:min(85vh,760px);overflow:auto;background:var(--card-bg);border:1px solid var(--border-color);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.25);padding:18px}
.settings-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.settings-modal-header h2{margin:0;font-size:1rem}
.settings-modal-sub{margin:4px 0 0;font-size:.8rem;color:var(--muted)}
.settings-close{width:34px;height:34px;border-radius:999px;border:1px solid var(--border-color);background:transparent;color:var(--text-color);font-size:1rem;cursor:pointer}
.settings-section{border:1px solid var(--border-color);border-radius:12px;padding:14px;margin-bottom:14px;background:color-mix(in srgb, var(--accent) 3%, transparent)}
.settings-section h3{margin:0 0 10px;font-size:.86rem}
.settings-status-list,.settings-actions{display:grid;gap:8px}
.settings-status-item{display:flex;justify-content:space-between;gap:12px;font-size:.82rem;padding:8px 10px;border-radius:8px;background:var(--bg-color);border:1px solid var(--border-color)}
.settings-action-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:1px solid var(--border-color);background:var(--bg-color);color:var(--text-color);border-radius:10px;padding:11px 12px;font-size:.82rem;cursor:pointer;transition:all .2s;text-align:left}
.settings-action-btn:hover:not(:disabled){border-color:var(--link-color);color:var(--link-color)}
.settings-action-btn:disabled{opacity:.5;cursor:not-allowed}
.settings-action-btn.settings-danger{color:#dc2626}
.settings-confirm{display:none;margin-top:12px;padding:12px;border-radius:10px;border:1px solid rgba(220,38,38,.3);background:rgba(220,38,38,.08)}
.settings-confirm.open{display:block}
.settings-confirm p{margin:0 0 10px;font-size:.82rem}
.settings-confirm-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.btn-confirm{border:none;background:#dc2626;color:#fff;padding:9px 14px;border-radius:8px;cursor:pointer;font-size:.82rem;font-weight:700}
.btn-cancel{border:1px solid var(--border-color);background:transparent;color:var(--text-color);padding:9px 14px;border-radius:8px;cursor:pointer;font-size:.82rem}
.settings-modal-footer{display:flex;justify-content:flex-end}
.settings-modal-footer .btn-secondary{min-width:90px}
@media (max-width:768px){html,body{overflow-x:hidden !important}.tool-container,.input-card,.markdown-body{width:100% !important;min-width:0 !important;max-width:100% !important}.grid-editor-container,.table-container{width:100% !important;min-width:0 !important;max-width:100% !important}.grid-editor textarea,.column-width-item input,.mode-button,.btn-secondary,.settings-btn,.tooltip-item{font-size:16px !important}.editor-advice{gap:6px}.editor-advice-item{font-size:.8rem;line-height:1.3}}
@media (max-width:700px){.input-header,.visual-toolbar,.control-panel,.input-footer{align-items:stretch}.input-actions,.theme-picker{justify-content:flex-start}.column-width-list{grid-template-columns:repeat(2,minmax(0,1fr))}.mode-button-group{width:100%}}
@media (max-width:480px){.column-width-list{grid-template-columns:1fr}.settings-btn{width:100%;justify-content:center}}